From 85836ef183c672ec93d5a8e467980cb5bce5ce9f Mon Sep 17 00:00:00 2001
From: "ar.badiei" <ahmadreza6137@gmail.com>
Date: Sat, 11 Jul 2026 21:21:29 +0330
Subject: [PATCH] Initial import of 1407 block sources under blocks/

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .gitignore                             |    2 +
 README.md                              |   28 +
 blocks/.gitkeep                        |    0
 blocks/BlogBlocksPage.tsx              |  109 ++
 blocks/about1.tsx                      |   84 +
 blocks/about10.tsx                     |  118 ++
 blocks/about12.tsx                     |  231 +++
 blocks/about13.tsx                     |   63 +
 blocks/about14.tsx                     |   58 +
 blocks/about15.tsx                     |   47 +
 blocks/about16.tsx                     |   71 +
 blocks/about17.tsx                     |   98 +
 blocks/about18.tsx                     |   58 +
 blocks/about19.tsx                     |   56 +
 blocks/about2.tsx                      |  206 ++
 blocks/about28.tsx                     |  149 ++
 blocks/about3.tsx                      |  220 +++
 blocks/about4.tsx                      |  107 +
 blocks/about5.tsx                      |  108 ++
 blocks/about6.tsx                      |   82 +
 blocks/about7.tsx                      |  113 ++
 blocks/about8.tsx                      |  235 +++
 blocks/about9.tsx                      |   64 +
 blocks/accept-invite1.tsx              |   96 +
 blocks/accept-invite2.tsx              |   55 +
 blocks/address-book1.tsx               |  593 ++++++
 blocks/address-book2.tsx               |  563 ++++++
 blocks/application-shell1.tsx          |  441 +++++
 blocks/application-shell10.tsx         | 1337 +++++++++++++
 blocks/application-shell11.tsx         |  672 +++++++
 blocks/application-shell12.tsx         | 1118 +++++++++++
 blocks/application-shell13.tsx         |  454 +++++
 blocks/application-shell14.tsx         |  610 ++++++
 blocks/application-shell2.tsx          |  422 ++++
 blocks/application-shell3.tsx          |  444 +++++
 blocks/application-shell4.tsx          |  539 ++++++
 blocks/application-shell5.tsx          |  586 ++++++
 blocks/application-shell6.tsx          |  511 +++++
 blocks/application-shell7.tsx          | 1074 ++++++++++
 blocks/application-shell8.tsx          | 1070 ++++++++++
 blocks/application-shell9.tsx          |  733 +++++++
 blocks/awards1.tsx                     |   91 +
 blocks/awards2.tsx                     |   50 +
 blocks/awards3.tsx                     |   75 +
 blocks/awards4.tsx                     |  115 ++
 blocks/awards5.tsx                     |  132 ++
 blocks/background-pattern1.tsx         |   25 +
 blocks/background-pattern10.tsx        |   32 +
 blocks/background-pattern100.tsx       |   68 +
 blocks/background-pattern11.tsx        |   32 +
 blocks/background-pattern111.tsx       |   36 +
 blocks/background-pattern112.tsx       |   36 +
 blocks/background-pattern113.tsx       |   36 +
 blocks/background-pattern115.tsx       |   36 +
 blocks/background-pattern116.tsx       |   36 +
 blocks/background-pattern117.tsx       |   36 +
 blocks/background-pattern12.tsx        |   36 +
 blocks/background-pattern13.tsx        |   36 +
 blocks/background-pattern14.tsx        |   36 +
 blocks/background-pattern15.tsx        |   36 +
 blocks/background-pattern16.tsx        |   36 +
 blocks/background-pattern17.tsx        |   36 +
 blocks/background-pattern18.tsx        |   36 +
 blocks/background-pattern19.tsx        |   68 +
 blocks/background-pattern2.tsx         |   25 +
 blocks/background-pattern20.tsx        |   70 +
 blocks/background-pattern21.tsx        |   70 +
 blocks/background-pattern22.tsx        |   70 +
 blocks/background-pattern23.tsx        |   70 +
 blocks/background-pattern24.tsx        |   70 +
 blocks/background-pattern25.tsx        |   70 +
 blocks/background-pattern26.tsx        |   70 +
 blocks/background-pattern27.tsx        |   30 +
 blocks/background-pattern28.tsx        |   37 +
 blocks/background-pattern29.tsx        |   29 +
 blocks/background-pattern3.tsx         |   24 +
 blocks/background-pattern30.tsx        |   33 +
 blocks/background-pattern31.tsx        |   36 +
 blocks/background-pattern32.tsx        |   40 +
 blocks/background-pattern33.tsx        |   40 +
 blocks/background-pattern34.tsx        |   40 +
 blocks/background-pattern35.tsx        |   40 +
 blocks/background-pattern36.tsx        |   40 +
 blocks/background-pattern37.tsx        |   40 +
 blocks/background-pattern38.tsx        |   40 +
 blocks/background-pattern39.tsx        |   36 +
 blocks/background-pattern4.tsx         |   27 +
 blocks/background-pattern40.tsx        |   40 +
 blocks/background-pattern5.tsx         |   27 +
 blocks/background-pattern6.tsx         |   27 +
 blocks/background-pattern7.tsx         |   32 +
 blocks/background-pattern8.tsx         |   32 +
 blocks/background-pattern9.tsx         |   32 +
 blocks/background-pattern95.tsx        |   55 +
 blocks/background-pattern96.tsx        |   59 +
 blocks/background-pattern97.tsx        |   60 +
 blocks/background-pattern98.tsx        |   58 +
 blocks/background-pattern99.tsx        |   58 +
 blocks/banner1.tsx                     |   74 +
 blocks/banner2.tsx                     |   76 +
 blocks/banner3.tsx                     |   95 +
 blocks/banner4.tsx                     |   78 +
 blocks/banner5.tsx                     |   97 +
 blocks/banner6.tsx                     |  100 +
 blocks/banner7.tsx                     |   60 +
 blocks/blog1.tsx                       |  152 ++
 blocks/blog11.tsx                      |  113 ++
 blocks/blog12.tsx                      |  111 ++
 blocks/blog13.tsx                      |   91 +
 blocks/blog14.tsx                      |  115 ++
 blocks/blog16.tsx                      |  131 ++
 blocks/blog17.tsx                      |  191 ++
 blocks/blog19.tsx                      |   88 +
 blocks/blog21.tsx                      |  223 +++
 blocks/blog22.tsx                      |  120 ++
 blocks/blog23.tsx                      |  159 ++
 blocks/blog24.tsx                      |  163 ++
 blocks/blog26.tsx                      |  188 ++
 blocks/blog27.tsx                      |  595 ++++++
 blocks/blog28.tsx                      |  132 ++
 blocks/blog29.tsx                      |  126 ++
 blocks/blog30.tsx                      |  114 ++
 blocks/blog4.tsx                       |  113 ++
 blocks/blog5.tsx                       |  191 ++
 blocks/blog6.tsx                       |  170 ++
 blocks/blog7.tsx                       |  147 ++
 blocks/blog8.tsx                       |  144 ++
 blocks/blogpost1.tsx                   |  161 ++
 blocks/blogpost2.tsx                   |  119 ++
 blocks/blogpost3.tsx                   |  263 +++
 blocks/blogpost4.tsx                   |  347 ++++
 blocks/blogpost5.tsx                   |  323 ++++
 blocks/blogpost6.tsx                   |  394 ++++
 blocks/blogpost7.tsx                   |  123 ++
 blocks/book-a-demo1.tsx                |  217 +++
 blocks/book-a-demo2.tsx                |  503 +++++
 blocks/book-a-demo3.tsx                |  233 +++
 blocks/careers1.tsx                    |   97 +
 blocks/careers2.tsx                    |   83 +
 blocks/careers3.tsx                    |  106 +
 blocks/careers4.tsx                    |  106 +
 blocks/careers5.tsx                    |  109 ++
 blocks/careers6.tsx                    |  177 ++
 blocks/careers7.tsx                    |   59 +
 blocks/careers8.tsx                    |  222 +++
 blocks/careers9.tsx                    |  106 +
 blocks/case-studies1.tsx               |  121 ++
 blocks/case-studies2.tsx               |  140 ++
 blocks/case-studies3.tsx               |  160 ++
 blocks/case-studies4.tsx               |  114 ++
 blocks/case-studies5.tsx               |  219 +++
 blocks/case-study1.tsx                 |  205 ++
 blocks/case-study3.tsx                 |  362 ++++
 blocks/case-study8.tsx                 |  156 ++
 blocks/changelog1.tsx                  |  166 ++
 blocks/changelog2.tsx                  |   85 +
 blocks/changelog3.tsx                  |  126 ++
 blocks/changelog4.tsx                  |  183 ++
 blocks/changelog5.tsx                  |  265 +++
 blocks/changelog6.tsx                  |  307 +++
 blocks/changelog8.tsx                  |  235 +++
 blocks/chart-card1.tsx                 |  145 ++
 blocks/chart-card10.tsx                |  141 ++
 blocks/chart-card11.tsx                |  142 ++
 blocks/chart-card12.tsx                |  121 ++
 blocks/chart-card13.tsx                |  141 ++
 blocks/chart-card14.tsx                |  158 ++
 blocks/chart-card15.tsx                |  174 ++
 blocks/chart-card16.tsx                |  109 ++
 blocks/chart-card17.tsx                |  121 ++
 blocks/chart-card18.tsx                |  157 ++
 blocks/chart-card19.tsx                |  120 ++
 blocks/chart-card2.tsx                 |  174 ++
 blocks/chart-card20.tsx                |  109 ++
 blocks/chart-card21.tsx                |  119 ++
 blocks/chart-card22.tsx                |  158 ++
 blocks/chart-card23.tsx                |  142 ++
 blocks/chart-card24.tsx                |  166 ++
 blocks/chart-card25.tsx                |  168 ++
 blocks/chart-card26.tsx                |  201 ++
 blocks/chart-card27.tsx                |  175 ++
 blocks/chart-card3.tsx                 |  123 ++
 blocks/chart-card4.tsx                 |  111 ++
 blocks/chart-card5.tsx                 |  171 ++
 blocks/chart-card6.tsx                 |  142 ++
 blocks/chart-card7.tsx                 |  156 ++
 blocks/chart-card8.tsx                 |  129 ++
 blocks/chart-card9.tsx                 |  187 ++
 blocks/chart-group1.tsx                |  225 +++
 blocks/chart-group10.tsx               |  212 ++
 blocks/chart-group11.tsx               |  247 +++
 blocks/chart-group12.tsx               |  496 +++++
 blocks/chart-group13.tsx               |  515 +++++
 blocks/chart-group14.tsx               |  644 ++++++
 blocks/chart-group15.tsx               |  743 +++++++
 blocks/chart-group2.tsx                |  271 +++
 blocks/chart-group3.tsx                |  270 +++
 blocks/chart-group4.tsx                |  279 +++
 blocks/chart-group5.tsx                |  212 ++
 blocks/chart-group6.tsx                |  185 ++
 blocks/chart-group7.tsx                |  269 +++
 blocks/chart-group8.tsx                |  327 ++++
 blocks/chart-group9.tsx                |  342 ++++
 blocks/checkout1.tsx                   | 1145 +++++++++++
 blocks/checkout2.tsx                   | 1043 ++++++++++
 blocks/checkout3.tsx                   | 1016 ++++++++++
 blocks/checkout4.tsx                   |  640 ++++++
 blocks/checkout5.tsx                   |  500 +++++
 blocks/checkout8.tsx                   | 1092 +++++++++++
 blocks/community1.tsx                  |   74 +
 blocks/community2.tsx                  |   87 +
 blocks/community3.tsx                  |   95 +
 blocks/community4.tsx                  |  114 ++
 blocks/community5.tsx                  |  148 ++
 blocks/community6.tsx                  |  104 +
 blocks/community7.tsx                  |  116 ++
 blocks/companies-create1.tsx           |  490 +++++
 blocks/companies-create2.tsx           |  545 ++++++
 blocks/companies-create3.tsx           |  555 ++++++
 blocks/companies-create4.tsx           |  176 ++
 blocks/companies-create5.tsx           |  242 +++
 blocks/companies-detail1.tsx           |  287 +++
 blocks/companies-detail2.tsx           |  297 +++
 blocks/companies-list1.tsx             |  615 ++++++
 blocks/companies-list2.tsx             |  540 ++++++
 blocks/compare-products1.tsx           |  214 ++
 blocks/compare-products2.tsx           |  217 +++
 blocks/compare-products3.tsx           |  240 +++
 blocks/compare1.tsx                    |  120 ++
 blocks/compare10.tsx                   |   91 +
 blocks/compare2.tsx                    |  173 ++
 blocks/compare3.tsx                    |  167 ++
 blocks/compare4.tsx                    |  162 ++
 blocks/compare5.tsx                    |   78 +
 blocks/compare6.tsx                    |  164 ++
 blocks/compare7.tsx                    |  166 ++
 blocks/compare8.tsx                    |  201 ++
 blocks/compare9.tsx                    |  337 ++++
 blocks/compliance1.tsx                 |  126 ++
 blocks/compliance5.tsx                 |   64 +
 blocks/compliance6.tsx                 |  140 ++
 blocks/compliance7.tsx                 |  152 ++
 blocks/contact1.tsx                    |  388 ++++
 blocks/contact10.tsx                   |  336 ++++
 blocks/contact11.tsx                   |  307 +++
 blocks/contact14.tsx                   |  217 +++
 blocks/contact16.tsx                   |  223 +++
 blocks/contact17.tsx                   |  388 ++++
 blocks/contact18.tsx                   |  268 +++
 blocks/contact19.tsx                   |   60 +
 blocks/contact2.tsx                    |  297 +++
 blocks/contact20.tsx                   |  312 +++
 blocks/contact21.tsx                   |  213 ++
 blocks/contact22.tsx                   |  384 ++++
 blocks/contact23.tsx                   |  189 ++
 blocks/contact24.tsx                   |  140 ++
 blocks/contact25.tsx                   |  273 +++
 blocks/contact28.tsx                   |  461 +++++
 blocks/contact29.tsx                   |  408 ++++
 blocks/contact3.tsx                    |  145 ++
 blocks/contact30.tsx                   |  271 +++
 blocks/contact31.tsx                   |  233 +++
 blocks/contact32.tsx                   |  276 +++
 blocks/contact33.tsx                   |  249 +++
 blocks/contact34.tsx                   |  262 +++
 blocks/contact35.tsx                   |  237 +++
 blocks/contact4.tsx                    |  197 ++
 blocks/contact5.tsx                    |  243 +++
 blocks/contact6.tsx                    |  421 ++++
 blocks/contact7.tsx                    |  102 +
 blocks/contact8.tsx                    |   71 +
 blocks/contact9.tsx                    |  302 +++
 blocks/content1.tsx                    |  264 +++
 blocks/content2.tsx                    |  171 ++
 blocks/content3.tsx                    |  319 +++
 blocks/content4.tsx                    |  279 +++
 blocks/cta1.tsx                        |   42 +
 blocks/cta10.tsx                       |   61 +
 blocks/cta11.tsx                       |   49 +
 blocks/cta12.tsx                       |   71 +
 blocks/cta13.tsx                       |   71 +
 blocks/cta16.tsx                       |   42 +
 blocks/cta27.tsx                       |   88 +
 blocks/cta3.tsx                        |   70 +
 blocks/cta4.tsx                        |   65 +
 blocks/cta5.tsx                        |   35 +
 blocks/cta6.tsx                        |   35 +
 blocks/cta7.tsx                        |   80 +
 blocks/dashboard1.tsx                  | 1971 +++++++++++++++++++
 blocks/dashboard10.tsx                 | 2080 ++++++++++++++++++++
 blocks/dashboard11.tsx                 | 1591 +++++++++++++++
 blocks/dashboard12.tsx                 | 1806 +++++++++++++++++
 blocks/dashboard2.tsx                  | 2472 ++++++++++++++++++++++++
 blocks/dashboard3.tsx                  | 1362 +++++++++++++
 blocks/dashboard4.tsx                  | 1850 ++++++++++++++++++
 blocks/dashboard5.tsx                  | 1907 ++++++++++++++++++
 blocks/dashboard6.tsx                  | 1357 +++++++++++++
 blocks/dashboard7.tsx                  | 1893 ++++++++++++++++++
 blocks/dashboard8.tsx                  | 2304 ++++++++++++++++++++++
 blocks/dashboard9.tsx                  | 1714 ++++++++++++++++
 blocks/data-table1.tsx                 |  357 ++++
 blocks/data-table10.tsx                |  704 +++++++
 blocks/data-table11.tsx                | 1024 ++++++++++
 blocks/data-table12.tsx                | 1113 +++++++++++
 blocks/data-table13.tsx                |  955 +++++++++
 blocks/data-table14.tsx                | 1146 +++++++++++
 blocks/data-table15.tsx                | 1057 ++++++++++
 blocks/data-table16.tsx                |  972 ++++++++++
 blocks/data-table17.tsx                |  640 ++++++
 blocks/data-table18.tsx                |  643 ++++++
 blocks/data-table19.tsx                |  695 +++++++
 blocks/data-table2.tsx                 |  363 ++++
 blocks/data-table20.tsx                |  436 +++++
 blocks/data-table21.tsx                |  762 ++++++++
 blocks/data-table22.tsx                | 1609 +++++++++++++++
 blocks/data-table23.tsx                |  343 ++++
 blocks/data-table24.tsx                |  357 ++++
 blocks/data-table25.tsx                |  319 +++
 blocks/data-table26.tsx                | 1186 ++++++++++++
 blocks/data-table27.tsx                | 1194 ++++++++++++
 blocks/data-table28.tsx                | 1524 +++++++++++++++
 blocks/data-table29.tsx                | 1714 ++++++++++++++++
 blocks/data-table3.tsx                 |  362 ++++
 blocks/data-table30.tsx                | 1153 +++++++++++
 blocks/data-table31.tsx                | 1020 ++++++++++
 blocks/data-table32.tsx                | 1060 ++++++++++
 blocks/data-table4.tsx                 |  409 ++++
 blocks/data-table5.tsx                 |  394 ++++
 blocks/data-table6.tsx                 |  453 +++++
 blocks/data-table7.tsx                 |  535 +++++
 blocks/data-table8.tsx                 |  583 ++++++
 blocks/data-table9.tsx                 |  588 ++++++
 blocks/download1.tsx                   |  165 ++
 blocks/download10.tsx                  |  125 ++
 blocks/download11.tsx                  |   80 +
 blocks/download13.tsx                  |  105 +
 blocks/download2.tsx                   |  141 ++
 blocks/download3.tsx                   |  127 ++
 blocks/download4.tsx                   |  152 ++
 blocks/download5.tsx                   |  211 ++
 blocks/download6.tsx                   |  148 ++
 blocks/download7.tsx                   |   69 +
 blocks/download8.tsx                   |  123 ++
 blocks/download9.tsx                   |  130 ++
 blocks/ecommerce-footer1.tsx           |  401 ++++
 blocks/ecommerce-footer18.tsx          |  554 ++++++
 blocks/ecommerce-footer19.tsx          |  580 ++++++
 blocks/ecommerce-footer2.tsx           |  398 ++++
 blocks/ecommerce-footer20.tsx          |  500 +++++
 blocks/ecommerce-footer9.tsx           |  440 +++++
 blocks/ecommerce-hero1.tsx             |  199 ++
 blocks/ecommerce-hero2.tsx             |  174 ++
 blocks/ecommerce-hero3.tsx             |  215 +++
 blocks/ecommerce-hero6.tsx             |  235 +++
 blocks/ecommerce-hero7.tsx             |  460 +++++
 blocks/ecommerce-hero8.tsx             |  244 +++
 blocks/ecommerce-navbar1.tsx           | 1018 ++++++++++
 blocks/ecommerce-navbar2.tsx           | 1013 ++++++++++
 blocks/experience1.tsx                 |  108 ++
 blocks/experience2.tsx                 |   96 +
 blocks/experience3.tsx                 |  107 +
 blocks/experience5.tsx                 |   99 +
 blocks/faq1.tsx                        |   93 +
 blocks/faq10.tsx                       |   99 +
 blocks/faq11.tsx                       |  119 ++
 blocks/faq12.tsx                       |  322 +++
 blocks/faq14.tsx                       |  162 ++
 blocks/faq15.tsx                       |   74 +
 blocks/faq16.tsx                       |   98 +
 blocks/faq17.tsx                       |  161 ++
 blocks/faq2.tsx                        |   74 +
 blocks/faq20.tsx                       |  134 ++
 blocks/faq3.tsx                        |  111 ++
 blocks/faq4.tsx                        |  109 ++
 blocks/faq5.tsx                        |   77 +
 blocks/faq6.tsx                        |   74 +
 blocks/faq7.tsx                        |   82 +
 blocks/faq8.tsx                        |  103 +
 blocks/faq9.tsx                        |   67 +
 blocks/feature1.tsx                    |   72 +
 blocks/feature10.tsx                   |   75 +
 blocks/feature101.tsx                  |   83 +
 blocks/feature102.tsx                  |  113 ++
 blocks/feature103.tsx                  |   95 +
 blocks/feature104.tsx                  |  124 ++
 blocks/feature105.tsx                  |  123 ++
 blocks/feature106.tsx                  |  187 ++
 blocks/feature107.tsx                  |  109 ++
 blocks/feature108.tsx                  |  157 ++
 blocks/feature109.tsx                  |   66 +
 blocks/feature11.tsx                   |   48 +
 blocks/feature110.tsx                  |  157 ++
 blocks/feature111.tsx                  |   86 +
 blocks/feature112.tsx                  |   71 +
 blocks/feature113.tsx                  |  145 ++
 blocks/feature114.tsx                  |  218 +++
 blocks/feature115.tsx                  |  103 +
 blocks/feature116.tsx                  |  103 +
 blocks/feature117.tsx                  |  121 ++
 blocks/feature118.tsx                  |  122 ++
 blocks/feature119.tsx                  |   60 +
 blocks/feature12.tsx                   |  179 ++
 blocks/feature120.tsx                  |   93 +
 blocks/feature121.tsx                  |  117 ++
 blocks/feature122.tsx                  |  120 ++
 blocks/feature123.tsx                  |   64 +
 blocks/feature124.tsx                  |   64 +
 blocks/feature125.tsx                  |   64 +
 blocks/feature126.tsx                  |  160 ++
 blocks/feature127.tsx                  |  153 ++
 blocks/feature128.tsx                  |   76 +
 blocks/feature129.tsx                  |  119 ++
 blocks/feature13.tsx                   |  112 ++
 blocks/feature130.tsx                  |   71 +
 blocks/feature131.tsx                  |  127 ++
 blocks/feature132.tsx                  |   74 +
 blocks/feature133.tsx                  |   61 +
 blocks/feature134.tsx                  |  113 ++
 blocks/feature135.tsx                  |  118 ++
 blocks/feature136.tsx                  |  135 ++
 blocks/feature137.tsx                  |  121 ++
 blocks/feature138.tsx                  |  106 +
 blocks/feature139.tsx                  |   81 +
 blocks/feature14.tsx                   |   82 +
 blocks/feature140.tsx                  |   82 +
 blocks/feature141.tsx                  |   63 +
 blocks/feature142.tsx                  |   74 +
 blocks/feature143.tsx                  |   67 +
 blocks/feature144.tsx                  |   94 +
 blocks/feature145.tsx                  |  140 ++
 blocks/feature146.tsx                  |  129 ++
 blocks/feature147.tsx                  |   85 +
 blocks/feature148.tsx                  |   91 +
 blocks/feature149.tsx                  |   70 +
 blocks/feature15.tsx                   |   82 +
 blocks/feature150.tsx                  |   78 +
 blocks/feature152.tsx                  |  107 +
 blocks/feature153.tsx                  |  178 ++
 blocks/feature154.tsx                  |  146 ++
 blocks/feature156.tsx                  |  103 +
 blocks/feature157.tsx                  |   58 +
 blocks/feature158.tsx                  |   64 +
 blocks/feature159.tsx                  |   62 +
 blocks/feature16.tsx                   |   59 +
 blocks/feature160.tsx                  |  117 ++
 blocks/feature161.tsx                  |   82 +
 blocks/feature162.tsx                  |   53 +
 blocks/feature163.tsx                  |   68 +
 blocks/feature164.tsx                  |   87 +
 blocks/feature166.tsx                  |  121 ++
 blocks/feature167.tsx                  |  121 ++
 blocks/feature168.tsx                  |   92 +
 blocks/feature169.tsx                  |  106 +
 blocks/feature17.tsx                   |  115 ++
 blocks/feature170.tsx                  |   77 +
 blocks/feature171.tsx                  |  128 ++
 blocks/feature172.tsx                  |  292 +++
 blocks/feature173.tsx                  |   69 +
 blocks/feature174.tsx                  |  156 ++
 blocks/feature175.tsx                  |  142 ++
 blocks/feature176.tsx                  |  237 +++
 blocks/feature18.tsx                   |  105 +
 blocks/feature180.tsx                  |  113 ++
 blocks/feature181.tsx                  |  103 +
 blocks/feature182.tsx                  |   90 +
 blocks/feature183.tsx                  |  181 ++
 blocks/feature184.tsx                  |  138 ++
 blocks/feature186.tsx                  |  152 ++
 blocks/feature187.tsx                  |   95 +
 blocks/feature188.tsx                  |   86 +
 blocks/feature189.tsx                  |   91 +
 blocks/feature19.tsx                   |  171 ++
 blocks/feature190.tsx                  |  129 ++
 blocks/feature191.tsx                  |  102 +
 blocks/feature192.tsx                  |  164 ++
 blocks/feature193.tsx                  |  207 ++
 blocks/feature194.tsx                  |   94 +
 blocks/feature195.tsx                  |  124 ++
 blocks/feature197.tsx                  |  143 ++
 blocks/feature198.tsx                  |  113 ++
 blocks/feature199.tsx                  |  297 +++
 blocks/feature2.tsx                    |   72 +
 blocks/feature20.tsx                   |   93 +
 blocks/feature200.tsx                  |  102 +
 blocks/feature202.tsx                  |  148 ++
 blocks/feature203.tsx                  |  125 ++
 blocks/feature204.tsx                  |   77 +
 blocks/feature205.tsx                  |  136 ++
 blocks/feature206.tsx                  |  183 ++
 blocks/feature207.tsx                  |   66 +
 blocks/feature209.tsx                  |  105 +
 blocks/feature21.tsx                   |  115 ++
 blocks/feature210.tsx                  |  165 ++
 blocks/feature211.tsx                  |  290 +++
 blocks/feature213.tsx                  |  110 ++
 blocks/feature214.tsx                  |  198 ++
 blocks/feature215.tsx                  |  202 ++
 blocks/feature215a.tsx                 |  163 ++
 blocks/feature215b.tsx                 |  170 ++
 blocks/feature216.tsx                  |  297 +++
 blocks/feature217.tsx                  |  104 +
 blocks/feature217a.tsx                 |  102 +
 blocks/feature217b.tsx                 |   89 +
 blocks/feature218.tsx                  |   54 +
 blocks/feature219.tsx                  |  200 ++
 blocks/feature22.tsx                   |  205 ++
 blocks/feature220.tsx                  |   91 +
 blocks/feature220a.tsx                 |   91 +
 blocks/feature220b.tsx                 |   91 +
 blocks/feature221.tsx                  |  138 ++
 blocks/feature222.tsx                  |  165 ++
 blocks/feature224.tsx                  |  214 ++
 blocks/feature225.tsx                  |  202 ++
 blocks/feature227.tsx                  |   54 +
 blocks/feature228.tsx                  |  116 ++
 blocks/feature229.tsx                  |   94 +
 blocks/feature23.tsx                   |   91 +
 blocks/feature230.tsx                  |   84 +
 blocks/feature231.tsx                  |  101 +
 blocks/feature234.tsx                  |  158 ++
 blocks/feature235.tsx                  |  200 ++
 blocks/feature236.tsx                  |  112 ++
 blocks/feature237.tsx                  |  387 ++++
 blocks/feature238.tsx                  |  139 ++
 blocks/feature239.tsx                  |  116 ++
 blocks/feature24.tsx                   |   47 +
 blocks/feature240.tsx                  |  166 ++
 blocks/feature241.tsx                  |  120 ++
 blocks/feature242.tsx                  |  177 ++
 blocks/feature243.tsx                  |  117 ++
 blocks/feature244.tsx                  |  129 ++
 blocks/feature245.tsx                  |  176 ++
 blocks/feature246.tsx                  |   65 +
 blocks/feature247.tsx                  |  104 +
 blocks/feature248.tsx                  |  103 +
 blocks/feature249.tsx                  |  150 ++
 blocks/feature25.tsx                   |   97 +
 blocks/feature250.tsx                  |  445 +++++
 blocks/feature251.tsx                  |  463 +++++
 blocks/feature252.tsx                  |   56 +
 blocks/feature253.tsx                  |   41 +
 blocks/feature254.tsx                  |  148 ++
 blocks/feature255.tsx                  |  109 ++
 blocks/feature256.tsx                  |  132 ++
 blocks/feature257.tsx                  |  110 ++
 blocks/feature26.tsx                   |   88 +
 blocks/feature261.tsx                  |  160 ++
 blocks/feature266.tsx                  |  164 ++
 blocks/feature267.tsx                  |   73 +
 blocks/feature268.tsx                  |  137 ++
 blocks/feature269.tsx                  |   93 +
 blocks/feature27.tsx                   |   67 +
 blocks/feature270.tsx                  |  258 +++
 blocks/feature271.tsx                  |  128 ++
 blocks/feature272.tsx                  |   79 +
 blocks/feature274.tsx                  |  174 ++
 blocks/feature275.tsx                  |  156 ++
 blocks/feature276.tsx                  |  146 ++
 blocks/feature277.tsx                  |  166 ++
 blocks/feature278.tsx                  |  168 ++
 blocks/feature28.tsx                   |   67 +
 blocks/feature280.tsx                  |  118 ++
 blocks/feature281.tsx                  |  233 +++
 blocks/feature282.tsx                  |   69 +
 blocks/feature283.tsx                  |  122 ++
 blocks/feature284.tsx                  |  105 +
 blocks/feature285.tsx                  |  171 ++
 blocks/feature286.tsx                  |   96 +
 blocks/feature287.tsx                  |   80 +
 blocks/feature288.tsx                  |   53 +
 blocks/feature289.tsx                  |   86 +
 blocks/feature29.tsx                   |   65 +
 blocks/feature292.tsx                  |   67 +
 blocks/feature293.tsx                  |   65 +
 blocks/feature294.tsx                  |  104 +
 blocks/feature295.tsx                  |  326 ++++
 blocks/feature297.tsx                  |   74 +
 blocks/feature299.tsx                  |   73 +
 blocks/feature3.tsx                    |  104 +
 blocks/feature30.tsx                   |   41 +
 blocks/feature31.tsx                   |   68 +
 blocks/feature312.tsx                  |  148 ++
 blocks/feature313.tsx                  |  218 +++
 blocks/feature314.tsx                  |  157 ++
 blocks/feature32.tsx                   |   66 +
 blocks/feature322.tsx                  |  363 ++++
 blocks/feature323.tsx                  |  440 +++++
 blocks/feature33.tsx                   |   84 +
 blocks/feature34.tsx                   |  111 ++
 blocks/feature342.tsx                  |  155 ++
 blocks/feature343.tsx                  |  270 +++
 blocks/feature35.tsx                   |   63 +
 blocks/feature36.tsx                   |  111 ++
 blocks/feature37.tsx                   |   72 +
 blocks/feature38.tsx                   |   63 +
 blocks/feature39.tsx                   |   64 +
 blocks/feature4.tsx                    |   92 +
 blocks/feature41.tsx                   |   70 +
 blocks/feature42.tsx                   |   50 +
 blocks/feature43.tsx                   |  105 +
 blocks/feature44.tsx                   |   93 +
 blocks/feature5.tsx                    |   55 +
 blocks/feature50.tsx                   |  114 ++
 blocks/feature51.tsx                   |  113 ++
 blocks/feature52.tsx                   |  105 +
 blocks/feature53.tsx                   |  128 ++
 blocks/feature54.tsx                   |  228 +++
 blocks/feature55.tsx                   |   26 +
 blocks/feature56.tsx                   |   83 +
 blocks/feature57.tsx                   |  204 ++
 blocks/feature58.tsx                   |   66 +
 blocks/feature59.tsx                   |   99 +
 blocks/feature6.tsx                    |   53 +
 blocks/feature60.tsx                   |   37 +
 blocks/feature61.tsx                   |   37 +
 blocks/feature62.tsx                   |   75 +
 blocks/feature63.tsx                   |   91 +
 blocks/feature64.tsx                   |   74 +
 blocks/feature65.tsx                   |  146 ++
 blocks/feature66.tsx                   |   73 +
 blocks/feature67.tsx                   |   91 +
 blocks/feature68.tsx                   |   77 +
 blocks/feature69.tsx                   |  134 ++
 blocks/feature7.tsx                    |   53 +
 blocks/feature70.tsx                   |  134 ++
 blocks/feature71.tsx                   |  112 ++
 blocks/feature72.tsx                   |  117 ++
 blocks/feature73.tsx                   |  109 ++
 blocks/feature74.tsx                   |   97 +
 blocks/feature75.tsx                   |   67 +
 blocks/feature76.tsx                   |   81 +
 blocks/feature77.tsx                   |   80 +
 blocks/feature78.tsx                   |  115 ++
 blocks/feature79.tsx                   |   96 +
 blocks/feature8.tsx                    |  110 ++
 blocks/feature80.tsx                   |   99 +
 blocks/feature81.tsx                   |  121 ++
 blocks/feature82.tsx                   |   83 +
 blocks/feature83.tsx                   |   62 +
 blocks/feature85.tsx                   |  112 ++
 blocks/feature86.tsx                   |   53 +
 blocks/feature87.tsx                   |   62 +
 blocks/feature89.tsx                   |   89 +
 blocks/feature9.tsx                    |   72 +
 blocks/feature90.tsx                   |   64 +
 blocks/feature91.tsx                   |  138 ++
 blocks/feature92.tsx                   |   90 +
 blocks/feature93.tsx                   |   91 +
 blocks/feature94.tsx                   |   92 +
 blocks/feature95.tsx                   |  111 ++
 blocks/feature97.tsx                   |   68 +
 blocks/feature98.tsx                   |   96 +
 blocks/feature99.tsx                   |   61 +
 blocks/field-mapping1.tsx              |  466 +++++
 blocks/field-merging1.tsx              |  378 ++++
 blocks/footer1.tsx                     |  165 ++
 blocks/footer10.tsx                    |   56 +
 blocks/footer11.tsx                    |  131 ++
 blocks/footer12.tsx                    |   76 +
 blocks/footer13.tsx                    |  174 ++
 blocks/footer14.tsx                    |  129 ++
 blocks/footer15.tsx                    |  143 ++
 blocks/footer16.tsx                    |  151 ++
 blocks/footer17.tsx                    |  453 +++++
 blocks/footer18.tsx                    |  472 +++++
 blocks/footer2.tsx                     |  135 ++
 blocks/footer23.tsx                    |  103 +
 blocks/footer24.tsx                    |  118 ++
 blocks/footer25.tsx                    |  129 ++
 blocks/footer27.tsx                    |  142 ++
 blocks/footer3.tsx                     |  166 ++
 blocks/footer30.tsx                    |  106 +
 blocks/footer31.tsx                    |  191 ++
 blocks/footer32.tsx                    |  126 ++
 blocks/footer4.tsx                     |  151 ++
 blocks/footer5.tsx                     |  154 ++
 blocks/footer50.tsx                    |  142 ++
 blocks/footer6.tsx                     |  116 ++
 blocks/footer7.tsx                     |  150 ++
 blocks/footer8.tsx                     |  146 ++
 blocks/footer9.tsx                     |  162 ++
 blocks/gallery1.tsx                    |  122 ++
 blocks/gallery10.tsx                   |  221 +++
 blocks/gallery11.tsx                   |  133 ++
 blocks/gallery12.tsx                   |  234 +++
 blocks/gallery13.tsx                   |  165 ++
 blocks/gallery14.tsx                   |  189 ++
 blocks/gallery15.tsx                   |  246 +++
 blocks/gallery16.tsx                   |  271 +++
 blocks/gallery17.tsx                   |  187 ++
 blocks/gallery18.tsx                   |  154 ++
 blocks/gallery19.tsx                   |  176 ++
 blocks/gallery20.tsx                   |  138 ++
 blocks/gallery21.tsx                   |  184 ++
 blocks/gallery22.tsx                   |  237 +++
 blocks/gallery23.tsx                   |  180 ++
 blocks/gallery24.tsx                   |  167 ++
 blocks/gallery25.tsx                   |  340 ++++
 blocks/gallery26.tsx                   |  267 +++
 blocks/gallery27.tsx                   |  157 ++
 blocks/gallery28.tsx                   |  155 ++
 blocks/gallery29.tsx                   |   96 +
 blocks/gallery3.tsx                    |  192 ++
 blocks/gallery30.tsx                   |  170 ++
 blocks/gallery31.tsx                   |   97 +
 blocks/gallery32.tsx                   |  141 ++
 blocks/gallery33.tsx                   |  134 ++
 blocks/gallery34.tsx                   |  198 ++
 blocks/gallery35.tsx                   |  402 ++++
 blocks/gallery4.tsx                    |  212 ++
 blocks/gallery5.tsx                    |  232 +++
 blocks/gallery6.tsx                    |  210 ++
 blocks/gallery7.tsx                    |  106 +
 blocks/gallery8.tsx                    |  197 ++
 blocks/gallery9.tsx                    |  181 ++
 blocks/help1.tsx                       |  156 ++
 blocks/help2.tsx                       |  159 ++
 blocks/help3.tsx                       |  312 +++
 blocks/help4.tsx                       |  369 ++++
 blocks/hero1.tsx                       |   92 +
 blocks/hero10.tsx                      |   81 +
 blocks/hero100.tsx                     |   49 +
 blocks/hero101.tsx                     |  106 +
 blocks/hero103.tsx                     |  194 ++
 blocks/hero104.tsx                     |  182 ++
 blocks/hero107.tsx                     |   89 +
 blocks/hero108.tsx                     |   97 +
 blocks/hero11.tsx                      |   47 +
 blocks/hero111.tsx                     |  161 ++
 blocks/hero112.tsx                     |  147 ++
 blocks/hero115.tsx                     |   82 +
 blocks/hero116.tsx                     |  134 ++
 blocks/hero118.tsx                     |  194 ++
 blocks/hero12.tsx                      |  115 ++
 blocks/hero123.tsx                     |   54 +
 blocks/hero125.tsx                     |   83 +
 blocks/hero127.tsx                     |  151 ++
 blocks/hero129.tsx                     |  134 ++
 blocks/hero13.tsx                      |   46 +
 blocks/hero134.tsx                     |  128 ++
 blocks/hero135.tsx                     |   98 +
 blocks/hero136.tsx                     |   99 +
 blocks/hero14.tsx                      |  172 ++
 blocks/hero141.tsx                     |   60 +
 blocks/hero143.tsx                     |  114 ++
 blocks/hero144.tsx                     |  116 ++
 blocks/hero145.tsx                     |   81 +
 blocks/hero146.tsx                     |   96 +
 blocks/hero149.tsx                     |  116 ++
 blocks/hero15.tsx                      |   63 +
 blocks/hero151.tsx                     |  178 ++
 blocks/hero152.tsx                     |   92 +
 blocks/hero154.tsx                     |  146 ++
 blocks/hero157.tsx                     |   51 +
 blocks/hero158.tsx                     |   81 +
 blocks/hero159.tsx                     |   88 +
 blocks/hero16.tsx                      |   36 +
 blocks/hero160.tsx                     |   73 +
 blocks/hero162.tsx                     |   80 +
 blocks/hero163.tsx                     |   70 +
 blocks/hero164.tsx                     |   92 +
 blocks/hero165.tsx                     |   60 +
 blocks/hero166.tsx                     |   97 +
 blocks/hero167.tsx                     |   84 +
 blocks/hero168.tsx                     |   60 +
 blocks/hero170.tsx                     |  119 ++
 blocks/hero171.tsx                     |  224 +++
 blocks/hero172.tsx                     |  227 +++
 blocks/hero173.tsx                     |  123 ++
 blocks/hero174.tsx                     |   61 +
 blocks/hero175.tsx                     |   66 +
 blocks/hero177.tsx                     |  125 ++
 blocks/hero178.tsx                     |   68 +
 blocks/hero179.tsx                     |   56 +
 blocks/hero18.tsx                      |  142 ++
 blocks/hero180.tsx                     |   81 +
 blocks/hero183.tsx                     |  151 ++
 blocks/hero185.tsx                     |   57 +
 blocks/hero186.tsx                     |  148 ++
 blocks/hero187.tsx                     |  231 +++
 blocks/hero187a.tsx                    |  242 +++
 blocks/hero187b.tsx                    |  240 +++
 blocks/hero190.tsx                     |  101 +
 blocks/hero192.tsx                     |   54 +
 blocks/hero194.tsx                     |  170 ++
 blocks/hero195.tsx                     |  158 ++
 blocks/hero196.tsx                     |  186 ++
 blocks/hero197.tsx                     |   50 +
 blocks/hero2.tsx                       |   92 +
 blocks/hero20.tsx                      |  151 ++
 blocks/hero200.tsx                     |   77 +
 blocks/hero201.tsx                     |   77 +
 blocks/hero202.tsx                     |   64 +
 blocks/hero203.tsx                     |  142 ++
 blocks/hero204.tsx                     |  135 ++
 blocks/hero205.tsx                     |  113 ++
 blocks/hero206.tsx                     |  143 ++
 blocks/hero21.tsx                      |   64 +
 blocks/hero210.tsx                     |  160 ++
 blocks/hero211.tsx                     |  292 +++
 blocks/hero212.tsx                     |  247 +++
 blocks/hero213.tsx                     |  170 ++
 blocks/hero214.tsx                     |  252 +++
 blocks/hero215.tsx                     |   42 +
 blocks/hero216.tsx                     |   43 +
 blocks/hero218.tsx                     |   98 +
 blocks/hero219.tsx                     |  243 +++
 blocks/hero220.tsx                     |   44 +
 blocks/hero221.tsx                     |   50 +
 blocks/hero222.tsx                     |   89 +
 blocks/hero223.tsx                     |  128 ++
 blocks/hero224.tsx                     |  398 ++++
 blocks/hero225.tsx                     |  103 +
 blocks/hero226.tsx                     |  162 ++
 blocks/hero227.tsx                     |  124 ++
 blocks/hero228.tsx                     |  186 ++
 blocks/hero229.tsx                     |  245 +++
 blocks/hero230.tsx                     |  240 +++
 blocks/hero231.tsx                     |  331 ++++
 blocks/hero232.tsx                     |  122 ++
 blocks/hero233.tsx                     |   86 +
 blocks/hero234.tsx                     |  115 ++
 blocks/hero234a.tsx                    |  149 ++
 blocks/hero234b.tsx                    |  175 ++
 blocks/hero235.tsx                     |   94 +
 blocks/hero236.tsx                     |  439 +++++
 blocks/hero237.tsx                     |  137 ++
 blocks/hero238.tsx                     |  147 ++
 blocks/hero239.tsx                     |   79 +
 blocks/hero24.tsx                      |   80 +
 blocks/hero240.tsx                     |  113 ++
 blocks/hero241.tsx                     |   54 +
 blocks/hero242.tsx                     |  178 ++
 blocks/hero243.tsx                     |   69 +
 blocks/hero244.tsx                     |  119 ++
 blocks/hero245.tsx                     |   81 +
 blocks/hero246.tsx                     |  222 +++
 blocks/hero247.tsx                     |  109 ++
 blocks/hero248.tsx                     |   72 +
 blocks/hero249.tsx                     |  103 +
 blocks/hero25.tsx                      |   62 +
 blocks/hero256.tsx                     |  197 ++
 blocks/hero258.tsx                     |  271 +++
 blocks/hero259.tsx                     |  298 +++
 blocks/hero26.tsx                      |   68 +
 blocks/hero261.tsx                     |  171 ++
 blocks/hero262.tsx                     |  121 ++
 blocks/hero27.tsx                      |   51 +
 blocks/hero28.tsx                      |  155 ++
 blocks/hero29.tsx                      |  118 ++
 blocks/hero3.tsx                       |  136 ++
 blocks/hero30.tsx                      |   50 +
 blocks/hero31.tsx                      |  131 ++
 blocks/hero32.tsx                      |  149 ++
 blocks/hero33.tsx                      |   56 +
 blocks/hero34.tsx                      |   42 +
 blocks/hero35.tsx                      |   58 +
 blocks/hero36.tsx                      |   94 +
 blocks/hero37.tsx                      |   67 +
 blocks/hero38.tsx                      |   69 +
 blocks/hero39.tsx                      |   46 +
 blocks/hero4.tsx                       |   89 +
 blocks/hero40.tsx                      |  146 ++
 blocks/hero45.tsx                      |   86 +
 blocks/hero47.tsx                      |   95 +
 blocks/hero49.tsx                      |   56 +
 blocks/hero5.tsx                       |   40 +
 blocks/hero50.tsx                      |   64 +
 blocks/hero51.tsx                      |   62 +
 blocks/hero53.tsx                      |   59 +
 blocks/hero55.tsx                      |   40 +
 blocks/hero57.tsx                      |   63 +
 blocks/hero58.tsx                      |   44 +
 blocks/hero59.tsx                      |   47 +
 blocks/hero6.tsx                       |   86 +
 blocks/hero60.tsx                      |   40 +
 blocks/hero64.tsx                      |  180 ++
 blocks/hero67.tsx                      |   77 +
 blocks/hero68.tsx                      |   80 +
 blocks/hero7.tsx                       |  104 +
 blocks/hero70.tsx                      |  172 ++
 blocks/hero71.tsx                      |   42 +
 blocks/hero74.tsx                      |  106 +
 blocks/hero75.tsx                      |   72 +
 blocks/hero76.tsx                      |   49 +
 blocks/hero78.tsx                      |   32 +
 blocks/hero79.tsx                      |   46 +
 blocks/hero8.tsx                       |   46 +
 blocks/hero80.tsx                      |  114 ++
 blocks/hero82.tsx                      |   56 +
 blocks/hero83.tsx                      |   94 +
 blocks/hero84.tsx                      |   83 +
 blocks/hero85.tsx                      |  211 ++
 blocks/hero86.tsx                      |   51 +
 blocks/hero87.tsx                      |   41 +
 blocks/hero88.tsx                      |   54 +
 blocks/hero89.tsx                      |   67 +
 blocks/hero9.tsx                       |   70 +
 blocks/hero90.tsx                      |   73 +
 blocks/hero91.tsx                      |   55 +
 blocks/hero99.tsx                      |   64 +
 blocks/incentives1.tsx                 |   91 +
 blocks/incentives2.tsx                 |  107 +
 blocks/incentives6.tsx                 |  114 ++
 blocks/incentives7.tsx                 |  174 ++
 blocks/industries1.tsx                 |  168 ++
 blocks/industries2.tsx                 |  110 ++
 blocks/industries3.tsx                 |  135 ++
 blocks/industries4.tsx                 |  198 ++
 blocks/integration1.tsx                |  142 ++
 blocks/integration10.tsx               |  106 +
 blocks/integration11.tsx               |  242 +++
 blocks/integration12.tsx               |   83 +
 blocks/integration13.tsx               |  257 +++
 blocks/integration2.tsx                |  187 ++
 blocks/integration3.tsx                |   94 +
 blocks/integration4.tsx                |  105 +
 blocks/integration5.tsx                |   82 +
 blocks/integration6.tsx                |  188 ++
 blocks/integration7.tsx                |  137 ++
 blocks/integration8.tsx                |  124 ++
 blocks/integration9.tsx                |  106 +
 blocks/invite-user1.tsx                |  141 ++
 blocks/invite-user2.tsx                |  151 ++
 blocks/invite-user3.tsx                |  312 +++
 blocks/invite-user4.tsx                |  200 ++
 blocks/leaderboard1.tsx                |   68 +
 blocks/leaderboard2.tsx                |  118 ++
 blocks/leaderboard3.tsx                |  113 ++
 blocks/list1.tsx                       |  200 ++
 blocks/list2.tsx                       |  124 ++
 blocks/list3.tsx                       |  189 ++
 blocks/live-purchase1.tsx              |  144 ++
 blocks/live-purchase2.tsx              |  149 ++
 blocks/live-purchase3.tsx              |  147 ++
 blocks/login1.tsx                      |   91 +
 blocks/login2.tsx                      |  102 +
 blocks/login3.tsx                      |  101 +
 blocks/login4.tsx                      |  139 ++
 blocks/login5.tsx                      |  139 ++
 blocks/login6.tsx                      |  120 ++
 blocks/login7.tsx                      |  125 ++
 blocks/login9.tsx                      |  132 ++
 blocks/logos1.tsx                      |   59 +
 blocks/logos10.tsx                     |  115 ++
 blocks/logos11.tsx                     |  230 +++
 blocks/logos12.tsx                     |  109 ++
 blocks/logos13.tsx                     |   87 +
 blocks/logos17.tsx                     |  162 ++
 blocks/logos2.tsx                      |   89 +
 blocks/logos3.tsx                      |  131 ++
 blocks/logos4.tsx                      |   76 +
 blocks/logos5.tsx                      |  126 ++
 blocks/logos7.tsx                      |  131 ++
 blocks/logos8.tsx                      |   72 +
 blocks/logos9.tsx                      |  174 ++
 blocks/navbar1.tsx                     |  312 +++
 blocks/navbar10.tsx                    |  824 ++++++++
 blocks/navbar11.tsx                    |  577 ++++++
 blocks/navbar14.tsx                    |  543 ++++++
 blocks/navbar17.tsx                    |  197 ++
 blocks/navbar18.tsx                    |  295 +++
 blocks/navbar2.tsx                     |  302 +++
 blocks/navbar21.tsx                    |  145 ++
 blocks/navbar22.tsx                    |  148 ++
 blocks/navbar24.tsx                    |  304 +++
 blocks/navbar29.tsx                    |  191 ++
 blocks/navbar3.tsx                     |  689 +++++++
 blocks/navbar33.tsx                    |  275 +++
 blocks/navbar4.tsx                     | 1152 +++++++++++
 blocks/navbar5.tsx                     |  245 +++
 blocks/navbar6.tsx                     |  236 +++
 blocks/navbar7.tsx                     |  476 +++++
 blocks/navbar8.tsx                     |  483 +++++
 blocks/navbar9.tsx                     |  460 +++++
 blocks/offer-modal1.tsx                |   61 +
 blocks/offer-modal4.tsx                |  140 ++
 blocks/offer-modal5.tsx                |  178 ++
 blocks/onboarding1.tsx                 | 1125 +++++++++++
 blocks/onboarding2.tsx                 |  651 +++++++
 blocks/order-history1.tsx              |  360 ++++
 blocks/order-history2.tsx              |  554 ++++++
 blocks/order-history3.tsx              |  355 ++++
 blocks/order-history4.tsx              |  413 ++++
 blocks/order-history5.tsx              |  526 +++++
 blocks/order-summary1.tsx              |  472 +++++
 blocks/order-summary2.tsx              |  439 +++++
 blocks/order-summary3.tsx              |  359 ++++
 blocks/order-summary4.tsx              |  709 +++++++
 blocks/order-summary5.tsx              |  234 +++
 blocks/order-summary6.tsx              |  184 ++
 blocks/payment-methods1.tsx            |  607 ++++++
 blocks/payment-methods2.tsx            |  729 +++++++
 blocks/payment-methods3.tsx            |  497 +++++
 blocks/payment-methods4.tsx            |  526 +++++
 blocks/pricing1.tsx                    |  222 +++
 blocks/pricing10.tsx                   |  271 +++
 blocks/pricing11.tsx                   |  329 ++++
 blocks/pricing12.tsx                   |  153 ++
 blocks/pricing13.tsx                   |  100 +
 blocks/pricing14.tsx                   |   88 +
 blocks/pricing15.tsx                   |   58 +
 blocks/pricing16.tsx                   |  218 +++
 blocks/pricing2.tsx                    |  162 ++
 blocks/pricing20.tsx                   |  157 ++
 blocks/pricing21.tsx                   |  329 ++++
 blocks/pricing22.tsx                   |  147 ++
 blocks/pricing23.tsx                   |  298 +++
 blocks/pricing24.tsx                   |  159 ++
 blocks/pricing26.tsx                   |  145 ++
 blocks/pricing27.tsx                   |  149 ++
 blocks/pricing28.tsx                   |  443 +++++
 blocks/pricing29.tsx                   |  223 +++
 blocks/pricing3.tsx                    |  158 ++
 blocks/pricing30.tsx                   |  305 +++
 blocks/pricing31.tsx                   |  179 ++
 blocks/pricing32.tsx                   |  266 +++
 blocks/pricing33.tsx                   |  134 ++
 blocks/pricing34.tsx                   |  208 ++
 blocks/pricing35.tsx                   |  194 ++
 blocks/pricing36.tsx                   |  155 ++
 blocks/pricing37.tsx                   |   70 +
 blocks/pricing38.tsx                   |  278 +++
 blocks/pricing4.tsx                    |  159 ++
 blocks/pricing40.tsx                   |  225 +++
 blocks/pricing41.tsx                   |  186 ++
 blocks/pricing42.tsx                   |  225 +++
 blocks/pricing5.tsx                    |  161 ++
 blocks/pricing6.tsx                    |   77 +
 blocks/pricing7.tsx                    |  157 ++
 blocks/pricing8.tsx                    |   76 +
 blocks/pricing9.tsx                    |  326 ++++
 blocks/process1.tsx                    |  119 ++
 blocks/process2.tsx                    |  172 ++
 blocks/process3.tsx                    |  124 ++
 blocks/process4.tsx                    |  108 ++
 blocks/product-card1.tsx               |  111 ++
 blocks/product-card10.tsx              |  266 +++
 blocks/product-card2.tsx               |  114 ++
 blocks/product-card21.tsx              |  377 ++++
 blocks/product-card22.tsx              |  401 ++++
 blocks/product-card23.tsx              |  229 +++
 blocks/product-card24.tsx              |  450 +++++
 blocks/product-card3.tsx               |  115 ++
 blocks/product-card4.tsx               |   86 +
 blocks/product-card5.tsx               |   78 +
 blocks/product-card6.tsx               |  316 +++
 blocks/product-card7.tsx               |  487 +++++
 blocks/product-card8.tsx               |  561 ++++++
 blocks/product-card9.tsx               |  330 ++++
 blocks/product-categories1.tsx         |   65 +
 blocks/product-categories2.tsx         |  149 ++
 blocks/product-categories3.tsx         |   51 +
 blocks/product-categories4.tsx         |  118 ++
 blocks/product-categories5.tsx         |  148 ++
 blocks/product-detail1.tsx             |  515 +++++
 blocks/product-detail10.tsx            |  562 ++++++
 blocks/product-detail2.tsx             |  842 ++++++++
 blocks/product-detail3.tsx             |  671 +++++++
 blocks/product-detail4.tsx             |  768 ++++++++
 blocks/product-detail5.tsx             |  804 ++++++++
 blocks/product-detail6.tsx             | 1018 ++++++++++
 blocks/product-detail7.tsx             |  642 ++++++
 blocks/product-detail8.tsx             |  824 ++++++++
 blocks/product-detail9.tsx             |  453 +++++
 blocks/product-gallery1.tsx            |  102 +
 blocks/product-gallery2.tsx            |  315 +++
 blocks/product-gallery3.tsx            |  263 +++
 blocks/product-gallery4.tsx            |  412 ++++
 blocks/product-gallery7.tsx            |  345 ++++
 blocks/product-list1.tsx               |  201 ++
 blocks/product-list10.tsx              |  549 ++++++
 blocks/product-list2.tsx               |  248 +++
 blocks/product-list3.tsx               |  245 +++
 blocks/product-list4.tsx               |  234 +++
 blocks/product-list5.tsx               |  178 ++
 blocks/product-list6.tsx               |  728 +++++++
 blocks/product-list7.tsx               |  860 +++++++++
 blocks/product-list8.tsx               | 1161 +++++++++++
 blocks/product-list9.tsx               | 1407 ++++++++++++++
 blocks/product-quick-view4.tsx         |  490 +++++
 blocks/product-quick-view5.tsx         |  827 ++++++++
 blocks/product-quick-view6.tsx         |  408 ++++
 blocks/product-quick-view7.tsx         |  592 ++++++
 blocks/product-quick-view8.tsx         |  164 ++
 blocks/product-specs1.tsx              |  213 ++
 blocks/product-specs2.tsx              |  206 ++
 blocks/project1.tsx                    |  136 ++
 blocks/project10.tsx                   |  237 +++
 blocks/project12.tsx                   |  131 ++
 blocks/project13.tsx                   |  225 +++
 blocks/project13a.tsx                  |  225 +++
 blocks/project14.tsx                   |  190 ++
 blocks/project2.tsx                    |  108 ++
 blocks/project2a.tsx                   |  110 ++
 blocks/project2b.tsx                   |  129 ++
 blocks/project2c.tsx                   |  145 ++
 blocks/project2d.tsx                   |  156 ++
 blocks/project4.tsx                    |  115 ++
 blocks/project4a.tsx                   |  139 ++
 blocks/project4b.tsx                   |  136 ++
 blocks/project4c.tsx                   |  151 ++
 blocks/project5.tsx                    |  149 ++
 blocks/project5a.tsx                   |  131 ++
 blocks/project5b.tsx                   |  171 ++
 blocks/project5c.tsx                   |  125 ++
 blocks/project5d.tsx                   |  131 ++
 blocks/project5e.tsx                   |  195 ++
 blocks/project5f.tsx                   |  146 ++
 blocks/project5g.tsx                   |  144 ++
 blocks/project6.tsx                    |  230 +++
 blocks/project6a.tsx                   |  215 +++
 blocks/project7.tsx                    |  152 ++
 blocks/project8.tsx                    |   91 +
 blocks/project8a.tsx                   |   93 +
 blocks/project8b.tsx                   |   90 +
 blocks/project8c.tsx                   |   96 +
 blocks/project8d.tsx                   |   96 +
 blocks/project8e.tsx                   |   96 +
 blocks/project9.tsx                    |  177 ++
 blocks/projects1.tsx                   |  106 +
 blocks/projects10.tsx                  |   96 +
 blocks/projects11.tsx                  |   98 +
 blocks/projects12.tsx                  |  199 ++
 blocks/projects13.tsx                  |   86 +
 blocks/projects14.tsx                  |  114 ++
 blocks/projects15.tsx                  |  174 ++
 blocks/projects15a.tsx                 |  174 ++
 blocks/projects15b.tsx                 |  175 ++
 blocks/projects15c.tsx                 |  173 ++
 blocks/projects15d.tsx                 |  175 ++
 blocks/projects15e.tsx                 |  197 ++
 blocks/projects16.tsx                  |   65 +
 blocks/projects17.tsx                  |  186 ++
 blocks/projects17a.tsx                 |  187 ++
 blocks/projects17b.tsx                 |  218 +++
 blocks/projects18.tsx                  |  114 ++
 blocks/projects2.tsx                   |   76 +
 blocks/projects3.tsx                   |  248 +++
 blocks/projects4.tsx                   |   93 +
 blocks/projects5.tsx                   |   96 +
 blocks/projects6.tsx                   |  148 ++
 blocks/projects7.tsx                   |  194 ++
 blocks/projects8.tsx                   |  204 ++
 blocks/projects9.tsx                   |   78 +
 blocks/promo-banner1.tsx               |   61 +
 blocks/promo-banner2.tsx               |   44 +
 blocks/promo-banner3.tsx               |   93 +
 blocks/promo-banner4.tsx               |   54 +
 blocks/promo-banner5.tsx               |   92 +
 blocks/promo-banner6.tsx               |  106 +
 blocks/promo-banner7.tsx               |  107 +
 blocks/rate-card1.tsx                  |  142 ++
 blocks/rate-card2.tsx                  |  105 +
 blocks/resource1.tsx                   |  217 +++
 blocks/resource2.tsx                   |  302 +++
 blocks/resource3.tsx                   |  225 +++
 blocks/resources1.tsx                  |  683 +++++++
 blocks/resources2.tsx                  |  422 ++++
 blocks/resources3.tsx                  |  142 ++
 blocks/resources4.tsx                  |  114 ++
 blocks/resources5.tsx                  |  174 ++
 blocks/reviews1.tsx                    |  176 ++
 blocks/reviews18.tsx                   |  445 +++++
 blocks/reviews2.tsx                    |  227 +++
 blocks/reviews23.tsx                   |  254 +++
 blocks/reviews3.tsx                    |  297 +++
 blocks/reviews4.tsx                    |  239 +++
 blocks/reviews5.tsx                    |  308 +++
 blocks/reviews6.tsx                    |  250 +++
 blocks/reviews8.tsx                    |  292 +++
 blocks/reviews9.tsx                    |  232 +++
 blocks/service1.tsx                    |  105 +
 blocks/service2.tsx                    |  114 ++
 blocks/service3.tsx                    |  156 ++
 blocks/service4.tsx                    |  190 ++
 blocks/service5.tsx                    |  215 +++
 blocks/service6.tsx                    |  250 +++
 blocks/service7.tsx                    |  260 +++
 blocks/services1.tsx                   |   92 +
 blocks/services10.tsx                  |  231 +++
 blocks/services11.tsx                  |   85 +
 blocks/services12.tsx                  |  130 ++
 blocks/services13.tsx                  |  191 ++
 blocks/services14.tsx                  |   97 +
 blocks/services15.tsx                  |  135 ++
 blocks/services16.tsx                  |  139 ++
 blocks/services18.tsx                  |  119 ++
 blocks/services19.tsx                  |  150 ++
 blocks/services20.tsx                  |  113 ++
 blocks/services21.tsx                  |  141 ++
 blocks/services3.tsx                   |   74 +
 blocks/services4.tsx                   |   89 +
 blocks/services5.tsx                   |  108 ++
 blocks/services6.tsx                   |   88 +
 blocks/services7.tsx                   |   92 +
 blocks/services8.tsx                   |  167 ++
 blocks/services9.tsx                   |  128 ++
 blocks/settings-integrations1.tsx      |  257 +++
 blocks/settings-integrations2.tsx      |  219 +++
 blocks/settings-integrations3.tsx      |  207 ++
 blocks/settings-integrations3a.tsx     |  210 ++
 blocks/settings-integrations4.tsx      |  218 +++
 blocks/settings-integrations5.tsx      |  153 ++
 blocks/settings-integrations6.tsx      |  185 ++
 blocks/settings-integrations7.tsx      |  226 +++
 blocks/settings-integrations8.tsx      |  269 +++
 blocks/settings-integrations9.tsx      |  254 +++
 blocks/settings-members1.tsx           |  266 +++
 blocks/settings-members2.tsx           |  272 +++
 blocks/settings-members3.tsx           |  267 +++
 blocks/settings-members4.tsx           |  283 +++
 blocks/settings-members5.tsx           |  352 ++++
 blocks/settings-notifications1.tsx     |  162 ++
 blocks/settings-notifications2.tsx     |   83 +
 blocks/settings-notifications3.tsx     |  135 ++
 blocks/settings-notifications4.tsx     |  143 ++
 blocks/settings-profile1.tsx           |  195 ++
 blocks/settings-profile2.tsx           |  252 +++
 blocks/settings-profile3.tsx           |  262 +++
 blocks/settings-profile4.tsx           |  462 +++++
 blocks/settings-profile5.tsx           |  350 ++++
 blocks/settings-profile6.tsx           |  425 ++++
 blocks/settings-profile7.tsx           |  184 ++
 blocks/shader1.tsx                     |  131 ++
 blocks/shader10.tsx                    |  295 +++
 blocks/shader11.tsx                    |  223 +++
 blocks/shader12.tsx                    |  170 ++
 blocks/shader13.tsx                    |  128 ++
 blocks/shader14.tsx                    |  313 +++
 blocks/shader15.tsx                    |  153 ++
 blocks/shader16.tsx                    |  144 ++
 blocks/shader17.tsx                    |  978 ++++++++++
 blocks/shader18.tsx                    |  289 +++
 blocks/shader19.tsx                    |  207 ++
 blocks/shader2.tsx                     |  132 ++
 blocks/shader20.tsx                    |  171 ++
 blocks/shader3.tsx                     |  317 +++
 blocks/shader4.tsx                     |  170 ++
 blocks/shader5.tsx                     |  177 ++
 blocks/shader6.tsx                     |  143 ++
 blocks/shader7.tsx                     |  572 ++++++
 blocks/shader8.tsx                     |  412 ++++
 blocks/shader9.tsx                     |  172 ++
 blocks/shopping-cart1.tsx              |  149 ++
 blocks/shopping-cart14.tsx             |  426 ++++
 blocks/shopping-cart15.tsx             |  912 +++++++++
 blocks/shopping-cart16.tsx             |  647 +++++++
 blocks/shopping-cart17.tsx             |  564 ++++++
 blocks/shopping-cart18.tsx             |  230 +++
 blocks/shopping-cart19.tsx             |  348 ++++
 blocks/shopping-cart2.tsx              |  231 +++
 blocks/shopping-cart20.tsx             |  189 ++
 blocks/shopping-cart3.tsx              |  359 ++++
 blocks/shopping-cart7.tsx              |  431 +++++
 blocks/sidebar1.tsx                    |  205 ++
 blocks/sidebar10.tsx                   |  516 +++++
 blocks/sidebar11.tsx                   |  509 +++++
 blocks/sidebar12.tsx                   |  602 ++++++
 blocks/sidebar13.tsx                   |  319 +++
 blocks/sidebar14.tsx                   |  554 ++++++
 blocks/sidebar15.tsx                   |  507 +++++
 blocks/sidebar16.tsx                   |  846 ++++++++
 blocks/sidebar17.tsx                   |  449 +++++
 blocks/sidebar18.tsx                   |  484 +++++
 blocks/sidebar19.tsx                   |  607 ++++++
 blocks/sidebar2.tsx                    |  316 +++
 blocks/sidebar20.tsx                   |  321 +++
 blocks/sidebar21.tsx                   |  466 +++++
 blocks/sidebar3.tsx                    |  278 +++
 blocks/sidebar4.tsx                    |  306 +++
 blocks/sidebar5.tsx                    |  377 ++++
 blocks/sidebar6.tsx                    |  453 +++++
 blocks/sidebar7.tsx                    |  514 +++++
 blocks/sidebar8.tsx                    |  519 +++++
 blocks/sidebar9.tsx                    |  514 +++++
 blocks/signup1.tsx                     |   96 +
 blocks/signup10.tsx                    |  141 ++
 blocks/signup2.tsx                     |  112 ++
 blocks/signup3.tsx                     |  128 ++
 blocks/signup4.tsx                     |  144 ++
 blocks/signup5.tsx                     |  136 ++
 blocks/signup6.tsx                     |  125 ++
 blocks/signup7.tsx                     |  180 ++
 blocks/signup8.tsx                     |  118 ++
 blocks/signup9.tsx                     |  185 ++
 blocks/skills1.tsx                     |  114 ++
 blocks/skills2.tsx                     |  145 ++
 blocks/social-media-trending1.tsx      |  342 ++++
 blocks/social-media-trending2.tsx      |  294 +++
 blocks/social-media-trending3.tsx      |  206 ++
 blocks/social-media-trending4.tsx      |  311 +++
 blocks/social-media-trending5.tsx      |  290 +++
 blocks/stats-card1.tsx                 |   58 +
 blocks/stats-card10.tsx                |   70 +
 blocks/stats-card2.tsx                 |   80 +
 blocks/stats-card3.tsx                 |   51 +
 blocks/stats-card4.tsx                 |   49 +
 blocks/stats-card5.tsx                 |   60 +
 blocks/stats-card6.tsx                 |   71 +
 blocks/stats-card7.tsx                 |   78 +
 blocks/stats-card8.tsx                 |   76 +
 blocks/stats-card9.tsx                 |   63 +
 blocks/stats1.tsx                      |   52 +
 blocks/stats10.tsx                     |   80 +
 blocks/stats11.tsx                     |   77 +
 blocks/stats12.tsx                     |  234 +++
 blocks/stats13.tsx                     |  159 ++
 blocks/stats14.tsx                     |  157 ++
 blocks/stats15.tsx                     |  216 +++
 blocks/stats16.tsx                     |  141 ++
 blocks/stats17.tsx                     |  149 ++
 blocks/stats18.tsx                     |  120 ++
 blocks/stats19.tsx                     |   67 +
 blocks/stats2.tsx                      |   80 +
 blocks/stats4.tsx                      |   70 +
 blocks/stats5.tsx                      |   64 +
 blocks/stats6.tsx                      |   64 +
 blocks/stats7.tsx                      |   69 +
 blocks/stats8.tsx                      |   88 +
 blocks/stats9.tsx                      |  129 ++
 blocks/team1.tsx                       |   94 +
 blocks/team10.tsx                      |  140 ++
 blocks/team11.tsx                      |  292 +++
 blocks/team12.tsx                      |   94 +
 blocks/team13.tsx                      |  155 ++
 blocks/team15.tsx                      |  199 ++
 blocks/team2.tsx                       |  161 ++
 blocks/team3.tsx                       |  183 ++
 blocks/team36.tsx                      |   77 +
 blocks/team4.tsx                       |  124 ++
 blocks/team5.tsx                       |  169 ++
 blocks/team6.tsx                       |  172 ++
 blocks/team7.tsx                       |   67 +
 blocks/team8.tsx                       |  215 +++
 blocks/team9.tsx                       |  368 ++++
 blocks/test/BlogBlocksCard.tsx         |   29 +
 blocks/test/BlogBlocksCategoryTabs.tsx |   32 +
 blocks/testimonial1.tsx                |  225 +++
 blocks/testimonial10.tsx               |   55 +
 blocks/testimonial11.tsx               |  181 ++
 blocks/testimonial12.tsx               |  136 ++
 blocks/testimonial13.tsx               |   50 +
 blocks/testimonial14.tsx               |  107 +
 blocks/testimonial15.tsx               |  131 ++
 blocks/testimonial16.tsx               |  299 +++
 blocks/testimonial17.tsx               |  229 +++
 blocks/testimonial18.tsx               |   63 +
 blocks/testimonial19.tsx               |  148 ++
 blocks/testimonial2.tsx                |   49 +
 blocks/testimonial20.tsx               |   73 +
 blocks/testimonial21.tsx               |  176 ++
 blocks/testimonial23.tsx               |  245 +++
 blocks/testimonial24.tsx               |  185 ++
 blocks/testimonial25.tsx               |  154 ++
 blocks/testimonial26.tsx               |  199 ++
 blocks/testimonial27.tsx               |  198 ++
 blocks/testimonial28.tsx               |  210 ++
 blocks/testimonial29.tsx               |  156 ++
 blocks/testimonial3.tsx                |   30 +
 blocks/testimonial30.tsx               |  204 ++
 blocks/testimonial31.tsx               |  146 ++
 blocks/testimonial4.tsx                |  107 +
 blocks/testimonial6.tsx                |  116 ++
 blocks/testimonial7.tsx                |  223 +++
 blocks/testimonial8.tsx                |  149 ++
 blocks/testimonial9.tsx                |  133 ++
 blocks/timeline1.tsx                   |   72 +
 blocks/timeline10.tsx                  |  116 ++
 blocks/timeline11.tsx                  |  120 ++
 blocks/timeline12.tsx                  |  142 ++
 blocks/timeline13.tsx                  |  204 ++
 blocks/timeline14.tsx                  |  144 ++
 blocks/timeline2.tsx                   |  142 ++
 blocks/timeline3.tsx                   |  115 ++
 blocks/timeline4.tsx                   |  179 ++
 blocks/timeline5.tsx                   |   93 +
 blocks/timeline6.tsx                   |   99 +
 blocks/timeline7.tsx                   |  178 ++
 blocks/timeline8.tsx                   |  121 ++
 blocks/timeline9.tsx                   |   83 +
 blocks/todo1.tsx                       |  121 ++
 blocks/todo10.tsx                      | 1527 +++++++++++++++
 blocks/todo2.tsx                       |  264 +++
 blocks/todo3.tsx                       |  369 ++++
 blocks/todo4.tsx                       |  354 ++++
 blocks/todo5.tsx                       |  565 ++++++
 blocks/todo6.tsx                       |  636 ++++++
 blocks/todo7.tsx                       |  927 +++++++++
 blocks/todo8.tsx                       |  495 +++++
 blocks/todo9.tsx                       |  508 +++++
 blocks/trust-strip1.tsx                |   73 +
 blocks/trust-strip2.tsx                |   91 +
 blocks/trust-strip3.tsx                |   65 +
 blocks/trust-strip4.tsx                |   95 +
 blocks/user-profile1.tsx               |  109 ++
 blocks/user-profile10.tsx              |   84 +
 blocks/user-profile11.tsx              |   89 +
 blocks/user-profile12.tsx              |  126 ++
 blocks/user-profile13.tsx              |  146 ++
 blocks/user-profile14.tsx              |  156 ++
 blocks/user-profile2.tsx               |  174 ++
 blocks/user-profile3.tsx               |  241 +++
 blocks/user-profile4.tsx               |   79 +
 blocks/user-profile5.tsx               |   97 +
 blocks/user-profile6.tsx               |  252 +++
 blocks/user-profile9.tsx               |  261 +++
 blocks/waitlist1.tsx                   |   63 +
 blocks/waitlist2.tsx                   |  241 +++
 blocks/waitlist3.tsx                   |  126 ++
 blocks/wishlist1.tsx                   |  200 ++
 blocks/wishlist2.tsx                   |  274 +++
 1412 files changed, 303567 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 blocks/.gitkeep
 create mode 100644 blocks/BlogBlocksPage.tsx
 create mode 100644 blocks/about1.tsx
 create mode 100644 blocks/about10.tsx
 create mode 100644 blocks/about12.tsx
 create mode 100644 blocks/about13.tsx
 create mode 100644 blocks/about14.tsx
 create mode 100644 blocks/about15.tsx
 create mode 100644 blocks/about16.tsx
 create mode 100644 blocks/about17.tsx
 create mode 100644 blocks/about18.tsx
 create mode 100644 blocks/about19.tsx
 create mode 100644 blocks/about2.tsx
 create mode 100644 blocks/about28.tsx
 create mode 100644 blocks/about3.tsx
 create mode 100644 blocks/about4.tsx
 create mode 100644 blocks/about5.tsx
 create mode 100644 blocks/about6.tsx
 create mode 100644 blocks/about7.tsx
 create mode 100644 blocks/about8.tsx
 create mode 100644 blocks/about9.tsx
 create mode 100644 blocks/accept-invite1.tsx
 create mode 100644 blocks/accept-invite2.tsx
 create mode 100644 blocks/address-book1.tsx
 create mode 100644 blocks/address-book2.tsx
 create mode 100644 blocks/application-shell1.tsx
 create mode 100644 blocks/application-shell10.tsx
 create mode 100644 blocks/application-shell11.tsx
 create mode 100644 blocks/application-shell12.tsx
 create mode 100644 blocks/application-shell13.tsx
 create mode 100644 blocks/application-shell14.tsx
 create mode 100644 blocks/application-shell2.tsx
 create mode 100644 blocks/application-shell3.tsx
 create mode 100644 blocks/application-shell4.tsx
 create mode 100644 blocks/application-shell5.tsx
 create mode 100644 blocks/application-shell6.tsx
 create mode 100644 blocks/application-shell7.tsx
 create mode 100644 blocks/application-shell8.tsx
 create mode 100644 blocks/application-shell9.tsx
 create mode 100644 blocks/awards1.tsx
 create mode 100644 blocks/awards2.tsx
 create mode 100644 blocks/awards3.tsx
 create mode 100644 blocks/awards4.tsx
 create mode 100644 blocks/awards5.tsx
 create mode 100644 blocks/background-pattern1.tsx
 create mode 100644 blocks/background-pattern10.tsx
 create mode 100644 blocks/background-pattern100.tsx
 create mode 100644 blocks/background-pattern11.tsx
 create mode 100644 blocks/background-pattern111.tsx
 create mode 100644 blocks/background-pattern112.tsx
 create mode 100644 blocks/background-pattern113.tsx
 create mode 100644 blocks/background-pattern115.tsx
 create mode 100644 blocks/background-pattern116.tsx
 create mode 100644 blocks/background-pattern117.tsx
 create mode 100644 blocks/background-pattern12.tsx
 create mode 100644 blocks/background-pattern13.tsx
 create mode 100644 blocks/background-pattern14.tsx
 create mode 100644 blocks/background-pattern15.tsx
 create mode 100644 blocks/background-pattern16.tsx
 create mode 100644 blocks/background-pattern17.tsx
 create mode 100644 blocks/background-pattern18.tsx
 create mode 100644 blocks/background-pattern19.tsx
 create mode 100644 blocks/background-pattern2.tsx
 create mode 100644 blocks/background-pattern20.tsx
 create mode 100644 blocks/background-pattern21.tsx
 create mode 100644 blocks/background-pattern22.tsx
 create mode 100644 blocks/background-pattern23.tsx
 create mode 100644 blocks/background-pattern24.tsx
 create mode 100644 blocks/background-pattern25.tsx
 create mode 100644 blocks/background-pattern26.tsx
 create mode 100644 blocks/background-pattern27.tsx
 create mode 100644 blocks/background-pattern28.tsx
 create mode 100644 blocks/background-pattern29.tsx
 create mode 100644 blocks/background-pattern3.tsx
 create mode 100644 blocks/background-pattern30.tsx
 create mode 100644 blocks/background-pattern31.tsx
 create mode 100644 blocks/background-pattern32.tsx
 create mode 100644 blocks/background-pattern33.tsx
 create mode 100644 blocks/background-pattern34.tsx
 create mode 100644 blocks/background-pattern35.tsx
 create mode 100644 blocks/background-pattern36.tsx
 create mode 100644 blocks/background-pattern37.tsx
 create mode 100644 blocks/background-pattern38.tsx
 create mode 100644 blocks/background-pattern39.tsx
 create mode 100644 blocks/background-pattern4.tsx
 create mode 100644 blocks/background-pattern40.tsx
 create mode 100644 blocks/background-pattern5.tsx
 create mode 100644 blocks/background-pattern6.tsx
 create mode 100644 blocks/background-pattern7.tsx
 create mode 100644 blocks/background-pattern8.tsx
 create mode 100644 blocks/background-pattern9.tsx
 create mode 100644 blocks/background-pattern95.tsx
 create mode 100644 blocks/background-pattern96.tsx
 create mode 100644 blocks/background-pattern97.tsx
 create mode 100644 blocks/background-pattern98.tsx
 create mode 100644 blocks/background-pattern99.tsx
 create mode 100644 blocks/banner1.tsx
 create mode 100644 blocks/banner2.tsx
 create mode 100644 blocks/banner3.tsx
 create mode 100644 blocks/banner4.tsx
 create mode 100644 blocks/banner5.tsx
 create mode 100644 blocks/banner6.tsx
 create mode 100644 blocks/banner7.tsx
 create mode 100644 blocks/blog1.tsx
 create mode 100644 blocks/blog11.tsx
 create mode 100644 blocks/blog12.tsx
 create mode 100644 blocks/blog13.tsx
 create mode 100644 blocks/blog14.tsx
 create mode 100644 blocks/blog16.tsx
 create mode 100644 blocks/blog17.tsx
 create mode 100644 blocks/blog19.tsx
 create mode 100644 blocks/blog21.tsx
 create mode 100644 blocks/blog22.tsx
 create mode 100644 blocks/blog23.tsx
 create mode 100644 blocks/blog24.tsx
 create mode 100644 blocks/blog26.tsx
 create mode 100644 blocks/blog27.tsx
 create mode 100644 blocks/blog28.tsx
 create mode 100644 blocks/blog29.tsx
 create mode 100644 blocks/blog30.tsx
 create mode 100644 blocks/blog4.tsx
 create mode 100644 blocks/blog5.tsx
 create mode 100644 blocks/blog6.tsx
 create mode 100644 blocks/blog7.tsx
 create mode 100644 blocks/blog8.tsx
 create mode 100644 blocks/blogpost1.tsx
 create mode 100644 blocks/blogpost2.tsx
 create mode 100644 blocks/blogpost3.tsx
 create mode 100644 blocks/blogpost4.tsx
 create mode 100644 blocks/blogpost5.tsx
 create mode 100644 blocks/blogpost6.tsx
 create mode 100644 blocks/blogpost7.tsx
 create mode 100644 blocks/book-a-demo1.tsx
 create mode 100644 blocks/book-a-demo2.tsx
 create mode 100644 blocks/book-a-demo3.tsx
 create mode 100644 blocks/careers1.tsx
 create mode 100644 blocks/careers2.tsx
 create mode 100644 blocks/careers3.tsx
 create mode 100644 blocks/careers4.tsx
 create mode 100644 blocks/careers5.tsx
 create mode 100644 blocks/careers6.tsx
 create mode 100644 blocks/careers7.tsx
 create mode 100644 blocks/careers8.tsx
 create mode 100644 blocks/careers9.tsx
 create mode 100644 blocks/case-studies1.tsx
 create mode 100644 blocks/case-studies2.tsx
 create mode 100644 blocks/case-studies3.tsx
 create mode 100644 blocks/case-studies4.tsx
 create mode 100644 blocks/case-studies5.tsx
 create mode 100644 blocks/case-study1.tsx
 create mode 100644 blocks/case-study3.tsx
 create mode 100644 blocks/case-study8.tsx
 create mode 100644 blocks/changelog1.tsx
 create mode 100644 blocks/changelog2.tsx
 create mode 100644 blocks/changelog3.tsx
 create mode 100644 blocks/changelog4.tsx
 create mode 100644 blocks/changelog5.tsx
 create mode 100644 blocks/changelog6.tsx
 create mode 100644 blocks/changelog8.tsx
 create mode 100644 blocks/chart-card1.tsx
 create mode 100644 blocks/chart-card10.tsx
 create mode 100644 blocks/chart-card11.tsx
 create mode 100644 blocks/chart-card12.tsx
 create mode 100644 blocks/chart-card13.tsx
 create mode 100644 blocks/chart-card14.tsx
 create mode 100644 blocks/chart-card15.tsx
 create mode 100644 blocks/chart-card16.tsx
 create mode 100644 blocks/chart-card17.tsx
 create mode 100644 blocks/chart-card18.tsx
 create mode 100644 blocks/chart-card19.tsx
 create mode 100644 blocks/chart-card2.tsx
 create mode 100644 blocks/chart-card20.tsx
 create mode 100644 blocks/chart-card21.tsx
 create mode 100644 blocks/chart-card22.tsx
 create mode 100644 blocks/chart-card23.tsx
 create mode 100644 blocks/chart-card24.tsx
 create mode 100644 blocks/chart-card25.tsx
 create mode 100644 blocks/chart-card26.tsx
 create mode 100644 blocks/chart-card27.tsx
 create mode 100644 blocks/chart-card3.tsx
 create mode 100644 blocks/chart-card4.tsx
 create mode 100644 blocks/chart-card5.tsx
 create mode 100644 blocks/chart-card6.tsx
 create mode 100644 blocks/chart-card7.tsx
 create mode 100644 blocks/chart-card8.tsx
 create mode 100644 blocks/chart-card9.tsx
 create mode 100644 blocks/chart-group1.tsx
 create mode 100644 blocks/chart-group10.tsx
 create mode 100644 blocks/chart-group11.tsx
 create mode 100644 blocks/chart-group12.tsx
 create mode 100644 blocks/chart-group13.tsx
 create mode 100644 blocks/chart-group14.tsx
 create mode 100644 blocks/chart-group15.tsx
 create mode 100644 blocks/chart-group2.tsx
 create mode 100644 blocks/chart-group3.tsx
 create mode 100644 blocks/chart-group4.tsx
 create mode 100644 blocks/chart-group5.tsx
 create mode 100644 blocks/chart-group6.tsx
 create mode 100644 blocks/chart-group7.tsx
 create mode 100644 blocks/chart-group8.tsx
 create mode 100644 blocks/chart-group9.tsx
 create mode 100644 blocks/checkout1.tsx
 create mode 100644 blocks/checkout2.tsx
 create mode 100644 blocks/checkout3.tsx
 create mode 100644 blocks/checkout4.tsx
 create mode 100644 blocks/checkout5.tsx
 create mode 100644 blocks/checkout8.tsx
 create mode 100644 blocks/community1.tsx
 create mode 100644 blocks/community2.tsx
 create mode 100644 blocks/community3.tsx
 create mode 100644 blocks/community4.tsx
 create mode 100644 blocks/community5.tsx
 create mode 100644 blocks/community6.tsx
 create mode 100644 blocks/community7.tsx
 create mode 100644 blocks/companies-create1.tsx
 create mode 100644 blocks/companies-create2.tsx
 create mode 100644 blocks/companies-create3.tsx
 create mode 100644 blocks/companies-create4.tsx
 create mode 100644 blocks/companies-create5.tsx
 create mode 100644 blocks/companies-detail1.tsx
 create mode 100644 blocks/companies-detail2.tsx
 create mode 100644 blocks/companies-list1.tsx
 create mode 100644 blocks/companies-list2.tsx
 create mode 100644 blocks/compare-products1.tsx
 create mode 100644 blocks/compare-products2.tsx
 create mode 100644 blocks/compare-products3.tsx
 create mode 100644 blocks/compare1.tsx
 create mode 100644 blocks/compare10.tsx
 create mode 100644 blocks/compare2.tsx
 create mode 100644 blocks/compare3.tsx
 create mode 100644 blocks/compare4.tsx
 create mode 100644 blocks/compare5.tsx
 create mode 100644 blocks/compare6.tsx
 create mode 100644 blocks/compare7.tsx
 create mode 100644 blocks/compare8.tsx
 create mode 100644 blocks/compare9.tsx
 create mode 100644 blocks/compliance1.tsx
 create mode 100644 blocks/compliance5.tsx
 create mode 100644 blocks/compliance6.tsx
 create mode 100644 blocks/compliance7.tsx
 create mode 100644 blocks/contact1.tsx
 create mode 100644 blocks/contact10.tsx
 create mode 100644 blocks/contact11.tsx
 create mode 100644 blocks/contact14.tsx
 create mode 100644 blocks/contact16.tsx
 create mode 100644 blocks/contact17.tsx
 create mode 100644 blocks/contact18.tsx
 create mode 100644 blocks/contact19.tsx
 create mode 100644 blocks/contact2.tsx
 create mode 100644 blocks/contact20.tsx
 create mode 100644 blocks/contact21.tsx
 create mode 100644 blocks/contact22.tsx
 create mode 100644 blocks/contact23.tsx
 create mode 100644 blocks/contact24.tsx
 create mode 100644 blocks/contact25.tsx
 create mode 100644 blocks/contact28.tsx
 create mode 100644 blocks/contact29.tsx
 create mode 100644 blocks/contact3.tsx
 create mode 100644 blocks/contact30.tsx
 create mode 100644 blocks/contact31.tsx
 create mode 100644 blocks/contact32.tsx
 create mode 100644 blocks/contact33.tsx
 create mode 100644 blocks/contact34.tsx
 create mode 100644 blocks/contact35.tsx
 create mode 100644 blocks/contact4.tsx
 create mode 100644 blocks/contact5.tsx
 create mode 100644 blocks/contact6.tsx
 create mode 100644 blocks/contact7.tsx
 create mode 100644 blocks/contact8.tsx
 create mode 100644 blocks/contact9.tsx
 create mode 100644 blocks/content1.tsx
 create mode 100644 blocks/content2.tsx
 create mode 100644 blocks/content3.tsx
 create mode 100644 blocks/content4.tsx
 create mode 100644 blocks/cta1.tsx
 create mode 100644 blocks/cta10.tsx
 create mode 100644 blocks/cta11.tsx
 create mode 100644 blocks/cta12.tsx
 create mode 100644 blocks/cta13.tsx
 create mode 100644 blocks/cta16.tsx
 create mode 100644 blocks/cta27.tsx
 create mode 100644 blocks/cta3.tsx
 create mode 100644 blocks/cta4.tsx
 create mode 100644 blocks/cta5.tsx
 create mode 100644 blocks/cta6.tsx
 create mode 100644 blocks/cta7.tsx
 create mode 100644 blocks/dashboard1.tsx
 create mode 100644 blocks/dashboard10.tsx
 create mode 100644 blocks/dashboard11.tsx
 create mode 100644 blocks/dashboard12.tsx
 create mode 100644 blocks/dashboard2.tsx
 create mode 100644 blocks/dashboard3.tsx
 create mode 100644 blocks/dashboard4.tsx
 create mode 100644 blocks/dashboard5.tsx
 create mode 100644 blocks/dashboard6.tsx
 create mode 100644 blocks/dashboard7.tsx
 create mode 100644 blocks/dashboard8.tsx
 create mode 100644 blocks/dashboard9.tsx
 create mode 100644 blocks/data-table1.tsx
 create mode 100644 blocks/data-table10.tsx
 create mode 100644 blocks/data-table11.tsx
 create mode 100644 blocks/data-table12.tsx
 create mode 100644 blocks/data-table13.tsx
 create mode 100644 blocks/data-table14.tsx
 create mode 100644 blocks/data-table15.tsx
 create mode 100644 blocks/data-table16.tsx
 create mode 100644 blocks/data-table17.tsx
 create mode 100644 blocks/data-table18.tsx
 create mode 100644 blocks/data-table19.tsx
 create mode 100644 blocks/data-table2.tsx
 create mode 100644 blocks/data-table20.tsx
 create mode 100644 blocks/data-table21.tsx
 create mode 100644 blocks/data-table22.tsx
 create mode 100644 blocks/data-table23.tsx
 create mode 100644 blocks/data-table24.tsx
 create mode 100644 blocks/data-table25.tsx
 create mode 100644 blocks/data-table26.tsx
 create mode 100644 blocks/data-table27.tsx
 create mode 100644 blocks/data-table28.tsx
 create mode 100644 blocks/data-table29.tsx
 create mode 100644 blocks/data-table3.tsx
 create mode 100644 blocks/data-table30.tsx
 create mode 100644 blocks/data-table31.tsx
 create mode 100644 blocks/data-table32.tsx
 create mode 100644 blocks/data-table4.tsx
 create mode 100644 blocks/data-table5.tsx
 create mode 100644 blocks/data-table6.tsx
 create mode 100644 blocks/data-table7.tsx
 create mode 100644 blocks/data-table8.tsx
 create mode 100644 blocks/data-table9.tsx
 create mode 100644 blocks/download1.tsx
 create mode 100644 blocks/download10.tsx
 create mode 100644 blocks/download11.tsx
 create mode 100644 blocks/download13.tsx
 create mode 100644 blocks/download2.tsx
 create mode 100644 blocks/download3.tsx
 create mode 100644 blocks/download4.tsx
 create mode 100644 blocks/download5.tsx
 create mode 100644 blocks/download6.tsx
 create mode 100644 blocks/download7.tsx
 create mode 100644 blocks/download8.tsx
 create mode 100644 blocks/download9.tsx
 create mode 100644 blocks/ecommerce-footer1.tsx
 create mode 100644 blocks/ecommerce-footer18.tsx
 create mode 100644 blocks/ecommerce-footer19.tsx
 create mode 100644 blocks/ecommerce-footer2.tsx
 create mode 100644 blocks/ecommerce-footer20.tsx
 create mode 100644 blocks/ecommerce-footer9.tsx
 create mode 100644 blocks/ecommerce-hero1.tsx
 create mode 100644 blocks/ecommerce-hero2.tsx
 create mode 100644 blocks/ecommerce-hero3.tsx
 create mode 100644 blocks/ecommerce-hero6.tsx
 create mode 100644 blocks/ecommerce-hero7.tsx
 create mode 100644 blocks/ecommerce-hero8.tsx
 create mode 100644 blocks/ecommerce-navbar1.tsx
 create mode 100644 blocks/ecommerce-navbar2.tsx
 create mode 100644 blocks/experience1.tsx
 create mode 100644 blocks/experience2.tsx
 create mode 100644 blocks/experience3.tsx
 create mode 100644 blocks/experience5.tsx
 create mode 100644 blocks/faq1.tsx
 create mode 100644 blocks/faq10.tsx
 create mode 100644 blocks/faq11.tsx
 create mode 100644 blocks/faq12.tsx
 create mode 100644 blocks/faq14.tsx
 create mode 100644 blocks/faq15.tsx
 create mode 100644 blocks/faq16.tsx
 create mode 100644 blocks/faq17.tsx
 create mode 100644 blocks/faq2.tsx
 create mode 100644 blocks/faq20.tsx
 create mode 100644 blocks/faq3.tsx
 create mode 100644 blocks/faq4.tsx
 create mode 100644 blocks/faq5.tsx
 create mode 100644 blocks/faq6.tsx
 create mode 100644 blocks/faq7.tsx
 create mode 100644 blocks/faq8.tsx
 create mode 100644 blocks/faq9.tsx
 create mode 100644 blocks/feature1.tsx
 create mode 100644 blocks/feature10.tsx
 create mode 100644 blocks/feature101.tsx
 create mode 100644 blocks/feature102.tsx
 create mode 100644 blocks/feature103.tsx
 create mode 100644 blocks/feature104.tsx
 create mode 100644 blocks/feature105.tsx
 create mode 100644 blocks/feature106.tsx
 create mode 100644 blocks/feature107.tsx
 create mode 100644 blocks/feature108.tsx
 create mode 100644 blocks/feature109.tsx
 create mode 100644 blocks/feature11.tsx
 create mode 100644 blocks/feature110.tsx
 create mode 100644 blocks/feature111.tsx
 create mode 100644 blocks/feature112.tsx
 create mode 100644 blocks/feature113.tsx
 create mode 100644 blocks/feature114.tsx
 create mode 100644 blocks/feature115.tsx
 create mode 100644 blocks/feature116.tsx
 create mode 100644 blocks/feature117.tsx
 create mode 100644 blocks/feature118.tsx
 create mode 100644 blocks/feature119.tsx
 create mode 100644 blocks/feature12.tsx
 create mode 100644 blocks/feature120.tsx
 create mode 100644 blocks/feature121.tsx
 create mode 100644 blocks/feature122.tsx
 create mode 100644 blocks/feature123.tsx
 create mode 100644 blocks/feature124.tsx
 create mode 100644 blocks/feature125.tsx
 create mode 100644 blocks/feature126.tsx
 create mode 100644 blocks/feature127.tsx
 create mode 100644 blocks/feature128.tsx
 create mode 100644 blocks/feature129.tsx
 create mode 100644 blocks/feature13.tsx
 create mode 100644 blocks/feature130.tsx
 create mode 100644 blocks/feature131.tsx
 create mode 100644 blocks/feature132.tsx
 create mode 100644 blocks/feature133.tsx
 create mode 100644 blocks/feature134.tsx
 create mode 100644 blocks/feature135.tsx
 create mode 100644 blocks/feature136.tsx
 create mode 100644 blocks/feature137.tsx
 create mode 100644 blocks/feature138.tsx
 create mode 100644 blocks/feature139.tsx
 create mode 100644 blocks/feature14.tsx
 create mode 100644 blocks/feature140.tsx
 create mode 100644 blocks/feature141.tsx
 create mode 100644 blocks/feature142.tsx
 create mode 100644 blocks/feature143.tsx
 create mode 100644 blocks/feature144.tsx
 create mode 100644 blocks/feature145.tsx
 create mode 100644 blocks/feature146.tsx
 create mode 100644 blocks/feature147.tsx
 create mode 100644 blocks/feature148.tsx
 create mode 100644 blocks/feature149.tsx
 create mode 100644 blocks/feature15.tsx
 create mode 100644 blocks/feature150.tsx
 create mode 100644 blocks/feature152.tsx
 create mode 100644 blocks/feature153.tsx
 create mode 100644 blocks/feature154.tsx
 create mode 100644 blocks/feature156.tsx
 create mode 100644 blocks/feature157.tsx
 create mode 100644 blocks/feature158.tsx
 create mode 100644 blocks/feature159.tsx
 create mode 100644 blocks/feature16.tsx
 create mode 100644 blocks/feature160.tsx
 create mode 100644 blocks/feature161.tsx
 create mode 100644 blocks/feature162.tsx
 create mode 100644 blocks/feature163.tsx
 create mode 100644 blocks/feature164.tsx
 create mode 100644 blocks/feature166.tsx
 create mode 100644 blocks/feature167.tsx
 create mode 100644 blocks/feature168.tsx
 create mode 100644 blocks/feature169.tsx
 create mode 100644 blocks/feature17.tsx
 create mode 100644 blocks/feature170.tsx
 create mode 100644 blocks/feature171.tsx
 create mode 100644 blocks/feature172.tsx
 create mode 100644 blocks/feature173.tsx
 create mode 100644 blocks/feature174.tsx
 create mode 100644 blocks/feature175.tsx
 create mode 100644 blocks/feature176.tsx
 create mode 100644 blocks/feature18.tsx
 create mode 100644 blocks/feature180.tsx
 create mode 100644 blocks/feature181.tsx
 create mode 100644 blocks/feature182.tsx
 create mode 100644 blocks/feature183.tsx
 create mode 100644 blocks/feature184.tsx
 create mode 100644 blocks/feature186.tsx
 create mode 100644 blocks/feature187.tsx
 create mode 100644 blocks/feature188.tsx
 create mode 100644 blocks/feature189.tsx
 create mode 100644 blocks/feature19.tsx
 create mode 100644 blocks/feature190.tsx
 create mode 100644 blocks/feature191.tsx
 create mode 100644 blocks/feature192.tsx
 create mode 100644 blocks/feature193.tsx
 create mode 100644 blocks/feature194.tsx
 create mode 100644 blocks/feature195.tsx
 create mode 100644 blocks/feature197.tsx
 create mode 100644 blocks/feature198.tsx
 create mode 100644 blocks/feature199.tsx
 create mode 100644 blocks/feature2.tsx
 create mode 100644 blocks/feature20.tsx
 create mode 100644 blocks/feature200.tsx
 create mode 100644 blocks/feature202.tsx
 create mode 100644 blocks/feature203.tsx
 create mode 100644 blocks/feature204.tsx
 create mode 100644 blocks/feature205.tsx
 create mode 100644 blocks/feature206.tsx
 create mode 100644 blocks/feature207.tsx
 create mode 100644 blocks/feature209.tsx
 create mode 100644 blocks/feature21.tsx
 create mode 100644 blocks/feature210.tsx
 create mode 100644 blocks/feature211.tsx
 create mode 100644 blocks/feature213.tsx
 create mode 100644 blocks/feature214.tsx
 create mode 100644 blocks/feature215.tsx
 create mode 100644 blocks/feature215a.tsx
 create mode 100644 blocks/feature215b.tsx
 create mode 100644 blocks/feature216.tsx
 create mode 100644 blocks/feature217.tsx
 create mode 100644 blocks/feature217a.tsx
 create mode 100644 blocks/feature217b.tsx
 create mode 100644 blocks/feature218.tsx
 create mode 100644 blocks/feature219.tsx
 create mode 100644 blocks/feature22.tsx
 create mode 100644 blocks/feature220.tsx
 create mode 100644 blocks/feature220a.tsx
 create mode 100644 blocks/feature220b.tsx
 create mode 100644 blocks/feature221.tsx
 create mode 100644 blocks/feature222.tsx
 create mode 100644 blocks/feature224.tsx
 create mode 100644 blocks/feature225.tsx
 create mode 100644 blocks/feature227.tsx
 create mode 100644 blocks/feature228.tsx
 create mode 100644 blocks/feature229.tsx
 create mode 100644 blocks/feature23.tsx
 create mode 100644 blocks/feature230.tsx
 create mode 100644 blocks/feature231.tsx
 create mode 100644 blocks/feature234.tsx
 create mode 100644 blocks/feature235.tsx
 create mode 100644 blocks/feature236.tsx
 create mode 100644 blocks/feature237.tsx
 create mode 100644 blocks/feature238.tsx
 create mode 100644 blocks/feature239.tsx
 create mode 100644 blocks/feature24.tsx
 create mode 100644 blocks/feature240.tsx
 create mode 100644 blocks/feature241.tsx
 create mode 100644 blocks/feature242.tsx
 create mode 100644 blocks/feature243.tsx
 create mode 100644 blocks/feature244.tsx
 create mode 100644 blocks/feature245.tsx
 create mode 100644 blocks/feature246.tsx
 create mode 100644 blocks/feature247.tsx
 create mode 100644 blocks/feature248.tsx
 create mode 100644 blocks/feature249.tsx
 create mode 100644 blocks/feature25.tsx
 create mode 100644 blocks/feature250.tsx
 create mode 100644 blocks/feature251.tsx
 create mode 100644 blocks/feature252.tsx
 create mode 100644 blocks/feature253.tsx
 create mode 100644 blocks/feature254.tsx
 create mode 100644 blocks/feature255.tsx
 create mode 100644 blocks/feature256.tsx
 create mode 100644 blocks/feature257.tsx
 create mode 100644 blocks/feature26.tsx
 create mode 100644 blocks/feature261.tsx
 create mode 100644 blocks/feature266.tsx
 create mode 100644 blocks/feature267.tsx
 create mode 100644 blocks/feature268.tsx
 create mode 100644 blocks/feature269.tsx
 create mode 100644 blocks/feature27.tsx
 create mode 100644 blocks/feature270.tsx
 create mode 100644 blocks/feature271.tsx
 create mode 100644 blocks/feature272.tsx
 create mode 100644 blocks/feature274.tsx
 create mode 100644 blocks/feature275.tsx
 create mode 100644 blocks/feature276.tsx
 create mode 100644 blocks/feature277.tsx
 create mode 100644 blocks/feature278.tsx
 create mode 100644 blocks/feature28.tsx
 create mode 100644 blocks/feature280.tsx
 create mode 100644 blocks/feature281.tsx
 create mode 100644 blocks/feature282.tsx
 create mode 100644 blocks/feature283.tsx
 create mode 100644 blocks/feature284.tsx
 create mode 100644 blocks/feature285.tsx
 create mode 100644 blocks/feature286.tsx
 create mode 100644 blocks/feature287.tsx
 create mode 100644 blocks/feature288.tsx
 create mode 100644 blocks/feature289.tsx
 create mode 100644 blocks/feature29.tsx
 create mode 100644 blocks/feature292.tsx
 create mode 100644 blocks/feature293.tsx
 create mode 100644 blocks/feature294.tsx
 create mode 100644 blocks/feature295.tsx
 create mode 100644 blocks/feature297.tsx
 create mode 100644 blocks/feature299.tsx
 create mode 100644 blocks/feature3.tsx
 create mode 100644 blocks/feature30.tsx
 create mode 100644 blocks/feature31.tsx
 create mode 100644 blocks/feature312.tsx
 create mode 100644 blocks/feature313.tsx
 create mode 100644 blocks/feature314.tsx
 create mode 100644 blocks/feature32.tsx
 create mode 100644 blocks/feature322.tsx
 create mode 100644 blocks/feature323.tsx
 create mode 100644 blocks/feature33.tsx
 create mode 100644 blocks/feature34.tsx
 create mode 100644 blocks/feature342.tsx
 create mode 100644 blocks/feature343.tsx
 create mode 100644 blocks/feature35.tsx
 create mode 100644 blocks/feature36.tsx
 create mode 100644 blocks/feature37.tsx
 create mode 100644 blocks/feature38.tsx
 create mode 100644 blocks/feature39.tsx
 create mode 100644 blocks/feature4.tsx
 create mode 100644 blocks/feature41.tsx
 create mode 100644 blocks/feature42.tsx
 create mode 100644 blocks/feature43.tsx
 create mode 100644 blocks/feature44.tsx
 create mode 100644 blocks/feature5.tsx
 create mode 100644 blocks/feature50.tsx
 create mode 100644 blocks/feature51.tsx
 create mode 100644 blocks/feature52.tsx
 create mode 100644 blocks/feature53.tsx
 create mode 100644 blocks/feature54.tsx
 create mode 100644 blocks/feature55.tsx
 create mode 100644 blocks/feature56.tsx
 create mode 100644 blocks/feature57.tsx
 create mode 100644 blocks/feature58.tsx
 create mode 100644 blocks/feature59.tsx
 create mode 100644 blocks/feature6.tsx
 create mode 100644 blocks/feature60.tsx
 create mode 100644 blocks/feature61.tsx
 create mode 100644 blocks/feature62.tsx
 create mode 100644 blocks/feature63.tsx
 create mode 100644 blocks/feature64.tsx
 create mode 100644 blocks/feature65.tsx
 create mode 100644 blocks/feature66.tsx
 create mode 100644 blocks/feature67.tsx
 create mode 100644 blocks/feature68.tsx
 create mode 100644 blocks/feature69.tsx
 create mode 100644 blocks/feature7.tsx
 create mode 100644 blocks/feature70.tsx
 create mode 100644 blocks/feature71.tsx
 create mode 100644 blocks/feature72.tsx
 create mode 100644 blocks/feature73.tsx
 create mode 100644 blocks/feature74.tsx
 create mode 100644 blocks/feature75.tsx
 create mode 100644 blocks/feature76.tsx
 create mode 100644 blocks/feature77.tsx
 create mode 100644 blocks/feature78.tsx
 create mode 100644 blocks/feature79.tsx
 create mode 100644 blocks/feature8.tsx
 create mode 100644 blocks/feature80.tsx
 create mode 100644 blocks/feature81.tsx
 create mode 100644 blocks/feature82.tsx
 create mode 100644 blocks/feature83.tsx
 create mode 100644 blocks/feature85.tsx
 create mode 100644 blocks/feature86.tsx
 create mode 100644 blocks/feature87.tsx
 create mode 100644 blocks/feature89.tsx
 create mode 100644 blocks/feature9.tsx
 create mode 100644 blocks/feature90.tsx
 create mode 100644 blocks/feature91.tsx
 create mode 100644 blocks/feature92.tsx
 create mode 100644 blocks/feature93.tsx
 create mode 100644 blocks/feature94.tsx
 create mode 100644 blocks/feature95.tsx
 create mode 100644 blocks/feature97.tsx
 create mode 100644 blocks/feature98.tsx
 create mode 100644 blocks/feature99.tsx
 create mode 100644 blocks/field-mapping1.tsx
 create mode 100644 blocks/field-merging1.tsx
 create mode 100644 blocks/footer1.tsx
 create mode 100644 blocks/footer10.tsx
 create mode 100644 blocks/footer11.tsx
 create mode 100644 blocks/footer12.tsx
 create mode 100644 blocks/footer13.tsx
 create mode 100644 blocks/footer14.tsx
 create mode 100644 blocks/footer15.tsx
 create mode 100644 blocks/footer16.tsx
 create mode 100644 blocks/footer17.tsx
 create mode 100644 blocks/footer18.tsx
 create mode 100644 blocks/footer2.tsx
 create mode 100644 blocks/footer23.tsx
 create mode 100644 blocks/footer24.tsx
 create mode 100644 blocks/footer25.tsx
 create mode 100644 blocks/footer27.tsx
 create mode 100644 blocks/footer3.tsx
 create mode 100644 blocks/footer30.tsx
 create mode 100644 blocks/footer31.tsx
 create mode 100644 blocks/footer32.tsx
 create mode 100644 blocks/footer4.tsx
 create mode 100644 blocks/footer5.tsx
 create mode 100644 blocks/footer50.tsx
 create mode 100644 blocks/footer6.tsx
 create mode 100644 blocks/footer7.tsx
 create mode 100644 blocks/footer8.tsx
 create mode 100644 blocks/footer9.tsx
 create mode 100644 blocks/gallery1.tsx
 create mode 100644 blocks/gallery10.tsx
 create mode 100644 blocks/gallery11.tsx
 create mode 100644 blocks/gallery12.tsx
 create mode 100644 blocks/gallery13.tsx
 create mode 100644 blocks/gallery14.tsx
 create mode 100644 blocks/gallery15.tsx
 create mode 100644 blocks/gallery16.tsx
 create mode 100644 blocks/gallery17.tsx
 create mode 100644 blocks/gallery18.tsx
 create mode 100644 blocks/gallery19.tsx
 create mode 100644 blocks/gallery20.tsx
 create mode 100644 blocks/gallery21.tsx
 create mode 100644 blocks/gallery22.tsx
 create mode 100644 blocks/gallery23.tsx
 create mode 100644 blocks/gallery24.tsx
 create mode 100644 blocks/gallery25.tsx
 create mode 100644 blocks/gallery26.tsx
 create mode 100644 blocks/gallery27.tsx
 create mode 100644 blocks/gallery28.tsx
 create mode 100644 blocks/gallery29.tsx
 create mode 100644 blocks/gallery3.tsx
 create mode 100644 blocks/gallery30.tsx
 create mode 100644 blocks/gallery31.tsx
 create mode 100644 blocks/gallery32.tsx
 create mode 100644 blocks/gallery33.tsx
 create mode 100644 blocks/gallery34.tsx
 create mode 100644 blocks/gallery35.tsx
 create mode 100644 blocks/gallery4.tsx
 create mode 100644 blocks/gallery5.tsx
 create mode 100644 blocks/gallery6.tsx
 create mode 100644 blocks/gallery7.tsx
 create mode 100644 blocks/gallery8.tsx
 create mode 100644 blocks/gallery9.tsx
 create mode 100644 blocks/help1.tsx
 create mode 100644 blocks/help2.tsx
 create mode 100644 blocks/help3.tsx
 create mode 100644 blocks/help4.tsx
 create mode 100644 blocks/hero1.tsx
 create mode 100644 blocks/hero10.tsx
 create mode 100644 blocks/hero100.tsx
 create mode 100644 blocks/hero101.tsx
 create mode 100644 blocks/hero103.tsx
 create mode 100644 blocks/hero104.tsx
 create mode 100644 blocks/hero107.tsx
 create mode 100644 blocks/hero108.tsx
 create mode 100644 blocks/hero11.tsx
 create mode 100644 blocks/hero111.tsx
 create mode 100644 blocks/hero112.tsx
 create mode 100644 blocks/hero115.tsx
 create mode 100644 blocks/hero116.tsx
 create mode 100644 blocks/hero118.tsx
 create mode 100644 blocks/hero12.tsx
 create mode 100644 blocks/hero123.tsx
 create mode 100644 blocks/hero125.tsx
 create mode 100644 blocks/hero127.tsx
 create mode 100644 blocks/hero129.tsx
 create mode 100644 blocks/hero13.tsx
 create mode 100644 blocks/hero134.tsx
 create mode 100644 blocks/hero135.tsx
 create mode 100644 blocks/hero136.tsx
 create mode 100644 blocks/hero14.tsx
 create mode 100644 blocks/hero141.tsx
 create mode 100644 blocks/hero143.tsx
 create mode 100644 blocks/hero144.tsx
 create mode 100644 blocks/hero145.tsx
 create mode 100644 blocks/hero146.tsx
 create mode 100644 blocks/hero149.tsx
 create mode 100644 blocks/hero15.tsx
 create mode 100644 blocks/hero151.tsx
 create mode 100644 blocks/hero152.tsx
 create mode 100644 blocks/hero154.tsx
 create mode 100644 blocks/hero157.tsx
 create mode 100644 blocks/hero158.tsx
 create mode 100644 blocks/hero159.tsx
 create mode 100644 blocks/hero16.tsx
 create mode 100644 blocks/hero160.tsx
 create mode 100644 blocks/hero162.tsx
 create mode 100644 blocks/hero163.tsx
 create mode 100644 blocks/hero164.tsx
 create mode 100644 blocks/hero165.tsx
 create mode 100644 blocks/hero166.tsx
 create mode 100644 blocks/hero167.tsx
 create mode 100644 blocks/hero168.tsx
 create mode 100644 blocks/hero170.tsx
 create mode 100644 blocks/hero171.tsx
 create mode 100644 blocks/hero172.tsx
 create mode 100644 blocks/hero173.tsx
 create mode 100644 blocks/hero174.tsx
 create mode 100644 blocks/hero175.tsx
 create mode 100644 blocks/hero177.tsx
 create mode 100644 blocks/hero178.tsx
 create mode 100644 blocks/hero179.tsx
 create mode 100644 blocks/hero18.tsx
 create mode 100644 blocks/hero180.tsx
 create mode 100644 blocks/hero183.tsx
 create mode 100644 blocks/hero185.tsx
 create mode 100644 blocks/hero186.tsx
 create mode 100644 blocks/hero187.tsx
 create mode 100644 blocks/hero187a.tsx
 create mode 100644 blocks/hero187b.tsx
 create mode 100644 blocks/hero190.tsx
 create mode 100644 blocks/hero192.tsx
 create mode 100644 blocks/hero194.tsx
 create mode 100644 blocks/hero195.tsx
 create mode 100644 blocks/hero196.tsx
 create mode 100644 blocks/hero197.tsx
 create mode 100644 blocks/hero2.tsx
 create mode 100644 blocks/hero20.tsx
 create mode 100644 blocks/hero200.tsx
 create mode 100644 blocks/hero201.tsx
 create mode 100644 blocks/hero202.tsx
 create mode 100644 blocks/hero203.tsx
 create mode 100644 blocks/hero204.tsx
 create mode 100644 blocks/hero205.tsx
 create mode 100644 blocks/hero206.tsx
 create mode 100644 blocks/hero21.tsx
 create mode 100644 blocks/hero210.tsx
 create mode 100644 blocks/hero211.tsx
 create mode 100644 blocks/hero212.tsx
 create mode 100644 blocks/hero213.tsx
 create mode 100644 blocks/hero214.tsx
 create mode 100644 blocks/hero215.tsx
 create mode 100644 blocks/hero216.tsx
 create mode 100644 blocks/hero218.tsx
 create mode 100644 blocks/hero219.tsx
 create mode 100644 blocks/hero220.tsx
 create mode 100644 blocks/hero221.tsx
 create mode 100644 blocks/hero222.tsx
 create mode 100644 blocks/hero223.tsx
 create mode 100644 blocks/hero224.tsx
 create mode 100644 blocks/hero225.tsx
 create mode 100644 blocks/hero226.tsx
 create mode 100644 blocks/hero227.tsx
 create mode 100644 blocks/hero228.tsx
 create mode 100644 blocks/hero229.tsx
 create mode 100644 blocks/hero230.tsx
 create mode 100644 blocks/hero231.tsx
 create mode 100644 blocks/hero232.tsx
 create mode 100644 blocks/hero233.tsx
 create mode 100644 blocks/hero234.tsx
 create mode 100644 blocks/hero234a.tsx
 create mode 100644 blocks/hero234b.tsx
 create mode 100644 blocks/hero235.tsx
 create mode 100644 blocks/hero236.tsx
 create mode 100644 blocks/hero237.tsx
 create mode 100644 blocks/hero238.tsx
 create mode 100644 blocks/hero239.tsx
 create mode 100644 blocks/hero24.tsx
 create mode 100644 blocks/hero240.tsx
 create mode 100644 blocks/hero241.tsx
 create mode 100644 blocks/hero242.tsx
 create mode 100644 blocks/hero243.tsx
 create mode 100644 blocks/hero244.tsx
 create mode 100644 blocks/hero245.tsx
 create mode 100644 blocks/hero246.tsx
 create mode 100644 blocks/hero247.tsx
 create mode 100644 blocks/hero248.tsx
 create mode 100644 blocks/hero249.tsx
 create mode 100644 blocks/hero25.tsx
 create mode 100644 blocks/hero256.tsx
 create mode 100644 blocks/hero258.tsx
 create mode 100644 blocks/hero259.tsx
 create mode 100644 blocks/hero26.tsx
 create mode 100644 blocks/hero261.tsx
 create mode 100644 blocks/hero262.tsx
 create mode 100644 blocks/hero27.tsx
 create mode 100644 blocks/hero28.tsx
 create mode 100644 blocks/hero29.tsx
 create mode 100644 blocks/hero3.tsx
 create mode 100644 blocks/hero30.tsx
 create mode 100644 blocks/hero31.tsx
 create mode 100644 blocks/hero32.tsx
 create mode 100644 blocks/hero33.tsx
 create mode 100644 blocks/hero34.tsx
 create mode 100644 blocks/hero35.tsx
 create mode 100644 blocks/hero36.tsx
 create mode 100644 blocks/hero37.tsx
 create mode 100644 blocks/hero38.tsx
 create mode 100644 blocks/hero39.tsx
 create mode 100644 blocks/hero4.tsx
 create mode 100644 blocks/hero40.tsx
 create mode 100644 blocks/hero45.tsx
 create mode 100644 blocks/hero47.tsx
 create mode 100644 blocks/hero49.tsx
 create mode 100644 blocks/hero5.tsx
 create mode 100644 blocks/hero50.tsx
 create mode 100644 blocks/hero51.tsx
 create mode 100644 blocks/hero53.tsx
 create mode 100644 blocks/hero55.tsx
 create mode 100644 blocks/hero57.tsx
 create mode 100644 blocks/hero58.tsx
 create mode 100644 blocks/hero59.tsx
 create mode 100644 blocks/hero6.tsx
 create mode 100644 blocks/hero60.tsx
 create mode 100644 blocks/hero64.tsx
 create mode 100644 blocks/hero67.tsx
 create mode 100644 blocks/hero68.tsx
 create mode 100644 blocks/hero7.tsx
 create mode 100644 blocks/hero70.tsx
 create mode 100644 blocks/hero71.tsx
 create mode 100644 blocks/hero74.tsx
 create mode 100644 blocks/hero75.tsx
 create mode 100644 blocks/hero76.tsx
 create mode 100644 blocks/hero78.tsx
 create mode 100644 blocks/hero79.tsx
 create mode 100644 blocks/hero8.tsx
 create mode 100644 blocks/hero80.tsx
 create mode 100644 blocks/hero82.tsx
 create mode 100644 blocks/hero83.tsx
 create mode 100644 blocks/hero84.tsx
 create mode 100644 blocks/hero85.tsx
 create mode 100644 blocks/hero86.tsx
 create mode 100644 blocks/hero87.tsx
 create mode 100644 blocks/hero88.tsx
 create mode 100644 blocks/hero89.tsx
 create mode 100644 blocks/hero9.tsx
 create mode 100644 blocks/hero90.tsx
 create mode 100644 blocks/hero91.tsx
 create mode 100644 blocks/hero99.tsx
 create mode 100644 blocks/incentives1.tsx
 create mode 100644 blocks/incentives2.tsx
 create mode 100644 blocks/incentives6.tsx
 create mode 100644 blocks/incentives7.tsx
 create mode 100644 blocks/industries1.tsx
 create mode 100644 blocks/industries2.tsx
 create mode 100644 blocks/industries3.tsx
 create mode 100644 blocks/industries4.tsx
 create mode 100644 blocks/integration1.tsx
 create mode 100644 blocks/integration10.tsx
 create mode 100644 blocks/integration11.tsx
 create mode 100644 blocks/integration12.tsx
 create mode 100644 blocks/integration13.tsx
 create mode 100644 blocks/integration2.tsx
 create mode 100644 blocks/integration3.tsx
 create mode 100644 blocks/integration4.tsx
 create mode 100644 blocks/integration5.tsx
 create mode 100644 blocks/integration6.tsx
 create mode 100644 blocks/integration7.tsx
 create mode 100644 blocks/integration8.tsx
 create mode 100644 blocks/integration9.tsx
 create mode 100644 blocks/invite-user1.tsx
 create mode 100644 blocks/invite-user2.tsx
 create mode 100644 blocks/invite-user3.tsx
 create mode 100644 blocks/invite-user4.tsx
 create mode 100644 blocks/leaderboard1.tsx
 create mode 100644 blocks/leaderboard2.tsx
 create mode 100644 blocks/leaderboard3.tsx
 create mode 100644 blocks/list1.tsx
 create mode 100644 blocks/list2.tsx
 create mode 100644 blocks/list3.tsx
 create mode 100644 blocks/live-purchase1.tsx
 create mode 100644 blocks/live-purchase2.tsx
 create mode 100644 blocks/live-purchase3.tsx
 create mode 100644 blocks/login1.tsx
 create mode 100644 blocks/login2.tsx
 create mode 100644 blocks/login3.tsx
 create mode 100644 blocks/login4.tsx
 create mode 100644 blocks/login5.tsx
 create mode 100644 blocks/login6.tsx
 create mode 100644 blocks/login7.tsx
 create mode 100644 blocks/login9.tsx
 create mode 100644 blocks/logos1.tsx
 create mode 100644 blocks/logos10.tsx
 create mode 100644 blocks/logos11.tsx
 create mode 100644 blocks/logos12.tsx
 create mode 100644 blocks/logos13.tsx
 create mode 100644 blocks/logos17.tsx
 create mode 100644 blocks/logos2.tsx
 create mode 100644 blocks/logos3.tsx
 create mode 100644 blocks/logos4.tsx
 create mode 100644 blocks/logos5.tsx
 create mode 100644 blocks/logos7.tsx
 create mode 100644 blocks/logos8.tsx
 create mode 100644 blocks/logos9.tsx
 create mode 100644 blocks/navbar1.tsx
 create mode 100644 blocks/navbar10.tsx
 create mode 100644 blocks/navbar11.tsx
 create mode 100644 blocks/navbar14.tsx
 create mode 100644 blocks/navbar17.tsx
 create mode 100644 blocks/navbar18.tsx
 create mode 100644 blocks/navbar2.tsx
 create mode 100644 blocks/navbar21.tsx
 create mode 100644 blocks/navbar22.tsx
 create mode 100644 blocks/navbar24.tsx
 create mode 100644 blocks/navbar29.tsx
 create mode 100644 blocks/navbar3.tsx
 create mode 100644 blocks/navbar33.tsx
 create mode 100644 blocks/navbar4.tsx
 create mode 100644 blocks/navbar5.tsx
 create mode 100644 blocks/navbar6.tsx
 create mode 100644 blocks/navbar7.tsx
 create mode 100644 blocks/navbar8.tsx
 create mode 100644 blocks/navbar9.tsx
 create mode 100644 blocks/offer-modal1.tsx
 create mode 100644 blocks/offer-modal4.tsx
 create mode 100644 blocks/offer-modal5.tsx
 create mode 100644 blocks/onboarding1.tsx
 create mode 100644 blocks/onboarding2.tsx
 create mode 100644 blocks/order-history1.tsx
 create mode 100644 blocks/order-history2.tsx
 create mode 100644 blocks/order-history3.tsx
 create mode 100644 blocks/order-history4.tsx
 create mode 100644 blocks/order-history5.tsx
 create mode 100644 blocks/order-summary1.tsx
 create mode 100644 blocks/order-summary2.tsx
 create mode 100644 blocks/order-summary3.tsx
 create mode 100644 blocks/order-summary4.tsx
 create mode 100644 blocks/order-summary5.tsx
 create mode 100644 blocks/order-summary6.tsx
 create mode 100644 blocks/payment-methods1.tsx
 create mode 100644 blocks/payment-methods2.tsx
 create mode 100644 blocks/payment-methods3.tsx
 create mode 100644 blocks/payment-methods4.tsx
 create mode 100644 blocks/pricing1.tsx
 create mode 100644 blocks/pricing10.tsx
 create mode 100644 blocks/pricing11.tsx
 create mode 100644 blocks/pricing12.tsx
 create mode 100644 blocks/pricing13.tsx
 create mode 100644 blocks/pricing14.tsx
 create mode 100644 blocks/pricing15.tsx
 create mode 100644 blocks/pricing16.tsx
 create mode 100644 blocks/pricing2.tsx
 create mode 100644 blocks/pricing20.tsx
 create mode 100644 blocks/pricing21.tsx
 create mode 100644 blocks/pricing22.tsx
 create mode 100644 blocks/pricing23.tsx
 create mode 100644 blocks/pricing24.tsx
 create mode 100644 blocks/pricing26.tsx
 create mode 100644 blocks/pricing27.tsx
 create mode 100644 blocks/pricing28.tsx
 create mode 100644 blocks/pricing29.tsx
 create mode 100644 blocks/pricing3.tsx
 create mode 100644 blocks/pricing30.tsx
 create mode 100644 blocks/pricing31.tsx
 create mode 100644 blocks/pricing32.tsx
 create mode 100644 blocks/pricing33.tsx
 create mode 100644 blocks/pricing34.tsx
 create mode 100644 blocks/pricing35.tsx
 create mode 100644 blocks/pricing36.tsx
 create mode 100644 blocks/pricing37.tsx
 create mode 100644 blocks/pricing38.tsx
 create mode 100644 blocks/pricing4.tsx
 create mode 100644 blocks/pricing40.tsx
 create mode 100644 blocks/pricing41.tsx
 create mode 100644 blocks/pricing42.tsx
 create mode 100644 blocks/pricing5.tsx
 create mode 100644 blocks/pricing6.tsx
 create mode 100644 blocks/pricing7.tsx
 create mode 100644 blocks/pricing8.tsx
 create mode 100644 blocks/pricing9.tsx
 create mode 100644 blocks/process1.tsx
 create mode 100644 blocks/process2.tsx
 create mode 100644 blocks/process3.tsx
 create mode 100644 blocks/process4.tsx
 create mode 100644 blocks/product-card1.tsx
 create mode 100644 blocks/product-card10.tsx
 create mode 100644 blocks/product-card2.tsx
 create mode 100644 blocks/product-card21.tsx
 create mode 100644 blocks/product-card22.tsx
 create mode 100644 blocks/product-card23.tsx
 create mode 100644 blocks/product-card24.tsx
 create mode 100644 blocks/product-card3.tsx
 create mode 100644 blocks/product-card4.tsx
 create mode 100644 blocks/product-card5.tsx
 create mode 100644 blocks/product-card6.tsx
 create mode 100644 blocks/product-card7.tsx
 create mode 100644 blocks/product-card8.tsx
 create mode 100644 blocks/product-card9.tsx
 create mode 100644 blocks/product-categories1.tsx
 create mode 100644 blocks/product-categories2.tsx
 create mode 100644 blocks/product-categories3.tsx
 create mode 100644 blocks/product-categories4.tsx
 create mode 100644 blocks/product-categories5.tsx
 create mode 100644 blocks/product-detail1.tsx
 create mode 100644 blocks/product-detail10.tsx
 create mode 100644 blocks/product-detail2.tsx
 create mode 100644 blocks/product-detail3.tsx
 create mode 100644 blocks/product-detail4.tsx
 create mode 100644 blocks/product-detail5.tsx
 create mode 100644 blocks/product-detail6.tsx
 create mode 100644 blocks/product-detail7.tsx
 create mode 100644 blocks/product-detail8.tsx
 create mode 100644 blocks/product-detail9.tsx
 create mode 100644 blocks/product-gallery1.tsx
 create mode 100644 blocks/product-gallery2.tsx
 create mode 100644 blocks/product-gallery3.tsx
 create mode 100644 blocks/product-gallery4.tsx
 create mode 100644 blocks/product-gallery7.tsx
 create mode 100644 blocks/product-list1.tsx
 create mode 100644 blocks/product-list10.tsx
 create mode 100644 blocks/product-list2.tsx
 create mode 100644 blocks/product-list3.tsx
 create mode 100644 blocks/product-list4.tsx
 create mode 100644 blocks/product-list5.tsx
 create mode 100644 blocks/product-list6.tsx
 create mode 100644 blocks/product-list7.tsx
 create mode 100644 blocks/product-list8.tsx
 create mode 100644 blocks/product-list9.tsx
 create mode 100644 blocks/product-quick-view4.tsx
 create mode 100644 blocks/product-quick-view5.tsx
 create mode 100644 blocks/product-quick-view6.tsx
 create mode 100644 blocks/product-quick-view7.tsx
 create mode 100644 blocks/product-quick-view8.tsx
 create mode 100644 blocks/product-specs1.tsx
 create mode 100644 blocks/product-specs2.tsx
 create mode 100644 blocks/project1.tsx
 create mode 100644 blocks/project10.tsx
 create mode 100644 blocks/project12.tsx
 create mode 100644 blocks/project13.tsx
 create mode 100644 blocks/project13a.tsx
 create mode 100644 blocks/project14.tsx
 create mode 100644 blocks/project2.tsx
 create mode 100644 blocks/project2a.tsx
 create mode 100644 blocks/project2b.tsx
 create mode 100644 blocks/project2c.tsx
 create mode 100644 blocks/project2d.tsx
 create mode 100644 blocks/project4.tsx
 create mode 100644 blocks/project4a.tsx
 create mode 100644 blocks/project4b.tsx
 create mode 100644 blocks/project4c.tsx
 create mode 100644 blocks/project5.tsx
 create mode 100644 blocks/project5a.tsx
 create mode 100644 blocks/project5b.tsx
 create mode 100644 blocks/project5c.tsx
 create mode 100644 blocks/project5d.tsx
 create mode 100644 blocks/project5e.tsx
 create mode 100644 blocks/project5f.tsx
 create mode 100644 blocks/project5g.tsx
 create mode 100644 blocks/project6.tsx
 create mode 100644 blocks/project6a.tsx
 create mode 100644 blocks/project7.tsx
 create mode 100644 blocks/project8.tsx
 create mode 100644 blocks/project8a.tsx
 create mode 100644 blocks/project8b.tsx
 create mode 100644 blocks/project8c.tsx
 create mode 100644 blocks/project8d.tsx
 create mode 100644 blocks/project8e.tsx
 create mode 100644 blocks/project9.tsx
 create mode 100644 blocks/projects1.tsx
 create mode 100644 blocks/projects10.tsx
 create mode 100644 blocks/projects11.tsx
 create mode 100644 blocks/projects12.tsx
 create mode 100644 blocks/projects13.tsx
 create mode 100644 blocks/projects14.tsx
 create mode 100644 blocks/projects15.tsx
 create mode 100644 blocks/projects15a.tsx
 create mode 100644 blocks/projects15b.tsx
 create mode 100644 blocks/projects15c.tsx
 create mode 100644 blocks/projects15d.tsx
 create mode 100644 blocks/projects15e.tsx
 create mode 100644 blocks/projects16.tsx
 create mode 100644 blocks/projects17.tsx
 create mode 100644 blocks/projects17a.tsx
 create mode 100644 blocks/projects17b.tsx
 create mode 100644 blocks/projects18.tsx
 create mode 100644 blocks/projects2.tsx
 create mode 100644 blocks/projects3.tsx
 create mode 100644 blocks/projects4.tsx
 create mode 100644 blocks/projects5.tsx
 create mode 100644 blocks/projects6.tsx
 create mode 100644 blocks/projects7.tsx
 create mode 100644 blocks/projects8.tsx
 create mode 100644 blocks/projects9.tsx
 create mode 100644 blocks/promo-banner1.tsx
 create mode 100644 blocks/promo-banner2.tsx
 create mode 100644 blocks/promo-banner3.tsx
 create mode 100644 blocks/promo-banner4.tsx
 create mode 100644 blocks/promo-banner5.tsx
 create mode 100644 blocks/promo-banner6.tsx
 create mode 100644 blocks/promo-banner7.tsx
 create mode 100644 blocks/rate-card1.tsx
 create mode 100644 blocks/rate-card2.tsx
 create mode 100644 blocks/resource1.tsx
 create mode 100644 blocks/resource2.tsx
 create mode 100644 blocks/resource3.tsx
 create mode 100644 blocks/resources1.tsx
 create mode 100644 blocks/resources2.tsx
 create mode 100644 blocks/resources3.tsx
 create mode 100644 blocks/resources4.tsx
 create mode 100644 blocks/resources5.tsx
 create mode 100644 blocks/reviews1.tsx
 create mode 100644 blocks/reviews18.tsx
 create mode 100644 blocks/reviews2.tsx
 create mode 100644 blocks/reviews23.tsx
 create mode 100644 blocks/reviews3.tsx
 create mode 100644 blocks/reviews4.tsx
 create mode 100644 blocks/reviews5.tsx
 create mode 100644 blocks/reviews6.tsx
 create mode 100644 blocks/reviews8.tsx
 create mode 100644 blocks/reviews9.tsx
 create mode 100644 blocks/service1.tsx
 create mode 100644 blocks/service2.tsx
 create mode 100644 blocks/service3.tsx
 create mode 100644 blocks/service4.tsx
 create mode 100644 blocks/service5.tsx
 create mode 100644 blocks/service6.tsx
 create mode 100644 blocks/service7.tsx
 create mode 100644 blocks/services1.tsx
 create mode 100644 blocks/services10.tsx
 create mode 100644 blocks/services11.tsx
 create mode 100644 blocks/services12.tsx
 create mode 100644 blocks/services13.tsx
 create mode 100644 blocks/services14.tsx
 create mode 100644 blocks/services15.tsx
 create mode 100644 blocks/services16.tsx
 create mode 100644 blocks/services18.tsx
 create mode 100644 blocks/services19.tsx
 create mode 100644 blocks/services20.tsx
 create mode 100644 blocks/services21.tsx
 create mode 100644 blocks/services3.tsx
 create mode 100644 blocks/services4.tsx
 create mode 100644 blocks/services5.tsx
 create mode 100644 blocks/services6.tsx
 create mode 100644 blocks/services7.tsx
 create mode 100644 blocks/services8.tsx
 create mode 100644 blocks/services9.tsx
 create mode 100644 blocks/settings-integrations1.tsx
 create mode 100644 blocks/settings-integrations2.tsx
 create mode 100644 blocks/settings-integrations3.tsx
 create mode 100644 blocks/settings-integrations3a.tsx
 create mode 100644 blocks/settings-integrations4.tsx
 create mode 100644 blocks/settings-integrations5.tsx
 create mode 100644 blocks/settings-integrations6.tsx
 create mode 100644 blocks/settings-integrations7.tsx
 create mode 100644 blocks/settings-integrations8.tsx
 create mode 100644 blocks/settings-integrations9.tsx
 create mode 100644 blocks/settings-members1.tsx
 create mode 100644 blocks/settings-members2.tsx
 create mode 100644 blocks/settings-members3.tsx
 create mode 100644 blocks/settings-members4.tsx
 create mode 100644 blocks/settings-members5.tsx
 create mode 100644 blocks/settings-notifications1.tsx
 create mode 100644 blocks/settings-notifications2.tsx
 create mode 100644 blocks/settings-notifications3.tsx
 create mode 100644 blocks/settings-notifications4.tsx
 create mode 100644 blocks/settings-profile1.tsx
 create mode 100644 blocks/settings-profile2.tsx
 create mode 100644 blocks/settings-profile3.tsx
 create mode 100644 blocks/settings-profile4.tsx
 create mode 100644 blocks/settings-profile5.tsx
 create mode 100644 blocks/settings-profile6.tsx
 create mode 100644 blocks/settings-profile7.tsx
 create mode 100644 blocks/shader1.tsx
 create mode 100644 blocks/shader10.tsx
 create mode 100644 blocks/shader11.tsx
 create mode 100644 blocks/shader12.tsx
 create mode 100644 blocks/shader13.tsx
 create mode 100644 blocks/shader14.tsx
 create mode 100644 blocks/shader15.tsx
 create mode 100644 blocks/shader16.tsx
 create mode 100644 blocks/shader17.tsx
 create mode 100644 blocks/shader18.tsx
 create mode 100644 blocks/shader19.tsx
 create mode 100644 blocks/shader2.tsx
 create mode 100644 blocks/shader20.tsx
 create mode 100644 blocks/shader3.tsx
 create mode 100644 blocks/shader4.tsx
 create mode 100644 blocks/shader5.tsx
 create mode 100644 blocks/shader6.tsx
 create mode 100644 blocks/shader7.tsx
 create mode 100644 blocks/shader8.tsx
 create mode 100644 blocks/shader9.tsx
 create mode 100644 blocks/shopping-cart1.tsx
 create mode 100644 blocks/shopping-cart14.tsx
 create mode 100644 blocks/shopping-cart15.tsx
 create mode 100644 blocks/shopping-cart16.tsx
 create mode 100644 blocks/shopping-cart17.tsx
 create mode 100644 blocks/shopping-cart18.tsx
 create mode 100644 blocks/shopping-cart19.tsx
 create mode 100644 blocks/shopping-cart2.tsx
 create mode 100644 blocks/shopping-cart20.tsx
 create mode 100644 blocks/shopping-cart3.tsx
 create mode 100644 blocks/shopping-cart7.tsx
 create mode 100644 blocks/sidebar1.tsx
 create mode 100644 blocks/sidebar10.tsx
 create mode 100644 blocks/sidebar11.tsx
 create mode 100644 blocks/sidebar12.tsx
 create mode 100644 blocks/sidebar13.tsx
 create mode 100644 blocks/sidebar14.tsx
 create mode 100644 blocks/sidebar15.tsx
 create mode 100644 blocks/sidebar16.tsx
 create mode 100644 blocks/sidebar17.tsx
 create mode 100644 blocks/sidebar18.tsx
 create mode 100644 blocks/sidebar19.tsx
 create mode 100644 blocks/sidebar2.tsx
 create mode 100644 blocks/sidebar20.tsx
 create mode 100644 blocks/sidebar21.tsx
 create mode 100644 blocks/sidebar3.tsx
 create mode 100644 blocks/sidebar4.tsx
 create mode 100644 blocks/sidebar5.tsx
 create mode 100644 blocks/sidebar6.tsx
 create mode 100644 blocks/sidebar7.tsx
 create mode 100644 blocks/sidebar8.tsx
 create mode 100644 blocks/sidebar9.tsx
 create mode 100644 blocks/signup1.tsx
 create mode 100644 blocks/signup10.tsx
 create mode 100644 blocks/signup2.tsx
 create mode 100644 blocks/signup3.tsx
 create mode 100644 blocks/signup4.tsx
 create mode 100644 blocks/signup5.tsx
 create mode 100644 blocks/signup6.tsx
 create mode 100644 blocks/signup7.tsx
 create mode 100644 blocks/signup8.tsx
 create mode 100644 blocks/signup9.tsx
 create mode 100644 blocks/skills1.tsx
 create mode 100644 blocks/skills2.tsx
 create mode 100644 blocks/social-media-trending1.tsx
 create mode 100644 blocks/social-media-trending2.tsx
 create mode 100644 blocks/social-media-trending3.tsx
 create mode 100644 blocks/social-media-trending4.tsx
 create mode 100644 blocks/social-media-trending5.tsx
 create mode 100644 blocks/stats-card1.tsx
 create mode 100644 blocks/stats-card10.tsx
 create mode 100644 blocks/stats-card2.tsx
 create mode 100644 blocks/stats-card3.tsx
 create mode 100644 blocks/stats-card4.tsx
 create mode 100644 blocks/stats-card5.tsx
 create mode 100644 blocks/stats-card6.tsx
 create mode 100644 blocks/stats-card7.tsx
 create mode 100644 blocks/stats-card8.tsx
 create mode 100644 blocks/stats-card9.tsx
 create mode 100644 blocks/stats1.tsx
 create mode 100644 blocks/stats10.tsx
 create mode 100644 blocks/stats11.tsx
 create mode 100644 blocks/stats12.tsx
 create mode 100644 blocks/stats13.tsx
 create mode 100644 blocks/stats14.tsx
 create mode 100644 blocks/stats15.tsx
 create mode 100644 blocks/stats16.tsx
 create mode 100644 blocks/stats17.tsx
 create mode 100644 blocks/stats18.tsx
 create mode 100644 blocks/stats19.tsx
 create mode 100644 blocks/stats2.tsx
 create mode 100644 blocks/stats4.tsx
 create mode 100644 blocks/stats5.tsx
 create mode 100644 blocks/stats6.tsx
 create mode 100644 blocks/stats7.tsx
 create mode 100644 blocks/stats8.tsx
 create mode 100644 blocks/stats9.tsx
 create mode 100644 blocks/team1.tsx
 create mode 100644 blocks/team10.tsx
 create mode 100644 blocks/team11.tsx
 create mode 100644 blocks/team12.tsx
 create mode 100644 blocks/team13.tsx
 create mode 100644 blocks/team15.tsx
 create mode 100644 blocks/team2.tsx
 create mode 100644 blocks/team3.tsx
 create mode 100644 blocks/team36.tsx
 create mode 100644 blocks/team4.tsx
 create mode 100644 blocks/team5.tsx
 create mode 100644 blocks/team6.tsx
 create mode 100644 blocks/team7.tsx
 create mode 100644 blocks/team8.tsx
 create mode 100644 blocks/team9.tsx
 create mode 100644 blocks/test/BlogBlocksCard.tsx
 create mode 100644 blocks/test/BlogBlocksCategoryTabs.tsx
 create mode 100644 blocks/testimonial1.tsx
 create mode 100644 blocks/testimonial10.tsx
 create mode 100644 blocks/testimonial11.tsx
 create mode 100644 blocks/testimonial12.tsx
 create mode 100644 blocks/testimonial13.tsx
 create mode 100644 blocks/testimonial14.tsx
 create mode 100644 blocks/testimonial15.tsx
 create mode 100644 blocks/testimonial16.tsx
 create mode 100644 blocks/testimonial17.tsx
 create mode 100644 blocks/testimonial18.tsx
 create mode 100644 blocks/testimonial19.tsx
 create mode 100644 blocks/testimonial2.tsx
 create mode 100644 blocks/testimonial20.tsx
 create mode 100644 blocks/testimonial21.tsx
 create mode 100644 blocks/testimonial23.tsx
 create mode 100644 blocks/testimonial24.tsx
 create mode 100644 blocks/testimonial25.tsx
 create mode 100644 blocks/testimonial26.tsx
 create mode 100644 blocks/testimonial27.tsx
 create mode 100644 blocks/testimonial28.tsx
 create mode 100644 blocks/testimonial29.tsx
 create mode 100644 blocks/testimonial3.tsx
 create mode 100644 blocks/testimonial30.tsx
 create mode 100644 blocks/testimonial31.tsx
 create mode 100644 blocks/testimonial4.tsx
 create mode 100644 blocks/testimonial6.tsx
 create mode 100644 blocks/testimonial7.tsx
 create mode 100644 blocks/testimonial8.tsx
 create mode 100644 blocks/testimonial9.tsx
 create mode 100644 blocks/timeline1.tsx
 create mode 100644 blocks/timeline10.tsx
 create mode 100644 blocks/timeline11.tsx
 create mode 100644 blocks/timeline12.tsx
 create mode 100644 blocks/timeline13.tsx
 create mode 100644 blocks/timeline14.tsx
 create mode 100644 blocks/timeline2.tsx
 create mode 100644 blocks/timeline3.tsx
 create mode 100644 blocks/timeline4.tsx
 create mode 100644 blocks/timeline5.tsx
 create mode 100644 blocks/timeline6.tsx
 create mode 100644 blocks/timeline7.tsx
 create mode 100644 blocks/timeline8.tsx
 create mode 100644 blocks/timeline9.tsx
 create mode 100644 blocks/todo1.tsx
 create mode 100644 blocks/todo10.tsx
 create mode 100644 blocks/todo2.tsx
 create mode 100644 blocks/todo3.tsx
 create mode 100644 blocks/todo4.tsx
 create mode 100644 blocks/todo5.tsx
 create mode 100644 blocks/todo6.tsx
 create mode 100644 blocks/todo7.tsx
 create mode 100644 blocks/todo8.tsx
 create mode 100644 blocks/todo9.tsx
 create mode 100644 blocks/trust-strip1.tsx
 create mode 100644 blocks/trust-strip2.tsx
 create mode 100644 blocks/trust-strip3.tsx
 create mode 100644 blocks/trust-strip4.tsx
 create mode 100644 blocks/user-profile1.tsx
 create mode 100644 blocks/user-profile10.tsx
 create mode 100644 blocks/user-profile11.tsx
 create mode 100644 blocks/user-profile12.tsx
 create mode 100644 blocks/user-profile13.tsx
 create mode 100644 blocks/user-profile14.tsx
 create mode 100644 blocks/user-profile2.tsx
 create mode 100644 blocks/user-profile3.tsx
 create mode 100644 blocks/user-profile4.tsx
 create mode 100644 blocks/user-profile5.tsx
 create mode 100644 blocks/user-profile6.tsx
 create mode 100644 blocks/user-profile9.tsx
 create mode 100644 blocks/waitlist1.tsx
 create mode 100644 blocks/waitlist2.tsx
 create mode 100644 blocks/waitlist3.tsx
 create mode 100644 blocks/wishlist1.tsx
 create mode 100644 blocks/wishlist2.tsx

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fafff2e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+Thumbs.db
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1b3334b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,28 @@
+# reui-blocks
+
+Block source files for the Shadsite catalog.
+
+## Layout
+
+```
+blocks/
+  {slug}.tsx          # flat block sources (1407 files)
+  test/               # auxiliary imports (e.g. BlogBlocksPage)
+```
+
+Consumed by the main app via `BLOCKS_ROOT=./storage/blocks`.
+
+## Clone with main repo
+
+```bash
+git submodule update --init --recursive
+```
+
+## Update blocks in main repo
+
+```bash
+cd storage
+git pull origin main
+cd ..
+npm run blocks:sync-registry
+```
diff --git a/blocks/.gitkeep b/blocks/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/blocks/BlogBlocksPage.tsx b/blocks/BlogBlocksPage.tsx
new file mode 100644
index 0000000..bf6061e
--- /dev/null
+++ b/blocks/BlogBlocksPage.tsx
@@ -0,0 +1,109 @@
+import { BlogBlocksCard } from "./test/BlogBlocksCard";
+import { BlogBlocksCategoryTabs } from "./test/BlogBlocksCategoryTabs";
+
+const categories = [
+  "همه",
+  "شرکت",
+  "بازاریابی",
+  "اتاق خبر",
+  "شرکا",
+  "مهندسی",
+  "مطبوعات",
+];
+const cards = [
+  {
+    category: "شرکت",
+    title: "پذیرش فرهنگ کار از راه دور",
+    description:
+      "مزایا و چالش‌های پذیرش فرهنگ دورکاری در کسب‌وکارهای امروزی را بررسی کنید.",
+    date: "۱۸ آگوست ۲۲۵",
+    authors: ["Meschac Irung"],
+  },
+  {
+    category: "بازاریابی",
+    title: "آینده تحول‌آفرین هوش مصنوعی در بازاریابی دیجیتال",
+    description:
+      "بررسی کنید هوش مصنوعی چگونه استراتژی‌های بازاریابی و تعامل با مشتری را متحول می‌کند.",
+    date: "۱۰ سپتامبر ۲۲۵",
+    authors: ["Theo Balick", "Meschac Irung"],
+  },
+  {
+    category: "اتاق خبر",
+    title: "نوآوری‌های پیشرفته در تحلیل داده",
+    description:
+      "با جدیدترین روندهای تحلیل داده آشنا شوید و ببینید چگونه رشد کسب‌وکار را هدایت می‌کنند.",
+    date: "۵ اکتبر ۲۲۵",
+    authors: ["Shadcn", "Meschac Irung"],
+  },
+  {
+    category: "مهندسی",
+    title: "پیشرفت‌ها در امنیت سایبری",
+    description:
+      "فناوری‌های تازه‌ای را بشناسید که کسب‌وکارها را در برابر تهدیدهای دیجیتال محافظت می‌کنند.",
+    date: "۱۵ اکتبر ۲۲۵",
+    authors: ["Meschac Irung"],
+  },
+  {
+    category: "مطبوعات",
+    title: "نقش بلاک‌چین در مالی مدرن",
+    description: "بررسی کنید بلاک‌چین چگونه آینده خدمات مالی را متحول می‌کند.",
+    date: "۱ نوامبر ۲۲۵",
+    authors: ["Theo Balick"],
+  },
+  {
+    category: "شرکت",
+    title: "پایداری در فناوری: تمرکز رو به رشد",
+    description: "با رویکردها و راهکارهای توسعه پایدار در صنعت فناوری آشنا شوید.",
+    date: "۱۰ نوامبر ۲۲۵",
+    authors: ["Shadcn"],
+  },
+  {
+    category: "بازاریابی",
+    title: "بهره‌گیری از کلان‌داده برای موفقیت کسب‌وکار",
+    description:
+      "بررسی کنید تحلیل کلان‌داده چگونه فرصت‌های جدیدی برای رشد کسب‌وکار ایجاد می‌کند.",
+    date: "۵ دسامبر ۲۲۵",
+    authors: ["Bernard Ngandu", "Glodie Lukose"],
+  },
+];
+
+export function BlogBlocksPage() {
+  return (
+    <main role="main">
+      <div className="bg-background scheme-light selection:bg-foreground/10 selection:text-foreground dark:scheme-dark">
+        <section className="@container bg-background py-16 md:py-24">
+          <div className="mx-auto max-w-5xl px-6">
+            <div className="max-w-md">
+              <span className="text-muted-foreground">وبلاگ</span>
+              <h1 className="mt-4 text-xl font-semibold text-balance text-muted-foreground">
+                اخبار، تحلیل‌ها و مطالب بیشتر از{" "}
+                <strong className="font-semibold text-foreground">تیلارک کوارتز</strong>
+              </h1>
+            </div>
+          </div>
+          <div className="sticky top-0 z-10 my-12 bg-background">
+            <div className="mx-auto max-w-5xl px-6">
+              <div className="flex justify-between gap-4 border-b max-md:-mx-6">
+                <BlogBlocksCategoryTabs labels={categories} />
+              </div>
+            </div>
+          </div>
+          <div className="mx-auto max-w-5xl px-6">
+            <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
+              {cards.map((card) => (
+                <BlogBlocksCard
+                  key={`${card.title}-${card.date}`}
+                  category={card.category}
+                  title={card.title}
+                  description={card.description}
+                  date={card.date}
+                  authors={card.authors}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}
diff --git a/blocks/about1.tsx b/blocks/about1.tsx
new file mode 100644
index 0000000..b939865
--- /dev/null
+++ b/blocks/about1.tsx
@@ -0,0 +1,84 @@
+import { CircleArrowRight, Files, Settings } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface About1Props {
+  className?: string;
+}
+
+const About1 = ({ className }: About1Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-16 lg:gap-28">
+        <div className="flex flex-col gap-4 lg:gap-8">
+          <h1 className="text-xl font-semibold tracking-tighter lg:text-2xll">
+            درباره ما
+          </h1>
+          <p className="max-w-xl text-xl">
+            پلتفرم ما ساخت پورتال مشتری، سامانه‌های سامانه ارتباط با مشتری و فروش، ابزارهای داخلی و نرم‌افزارهای سازمانی را برای تیم شما ساده می‌کند؛ در چند دقیقه، نه چند ماه.
+                                </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="placeholder"
+            className="size-full max-h-96 rounded-2xl object-cover"
+          />
+          <div className="flex flex-col justify-between gap-10 rounded-2xl bg-muted bg-[url('/block-media/shadcnblocks/block/photos/christin-hume-Hcfwew744z4-unsplash.jpg')] bg-cover bg-center p-10">
+            <p className="text-sm font-semibold text-white">مأموریت ما</p>
+            <p className="text-lg font-medium text-white">
+              باور ما این است که ساخت نرم‌افزار باید برای همه ساده و در دسترس باشد. هر کسی باید بتواند بدون نیاز به طراح یا برنامه‌نویس، ابزار موردنیاز خود را بسازد.
+                                      </p>
+          </div>
+        </div>
+        <div className="flex flex-col gap-6 md:gap-20">
+          <div className="max-w-xl">
+            <h2 className="mb-4 text-3xl font-semibold tracking-tight md:text-2xll">
+              ساخت نرم‌افزار را ساده کرده‌ایم
+                                      </h2>
+            <p className="text-lg text-muted-foreground">
+              ما قصد داریم به یک میلیون تیم کمک کنیم تا نرم‌افزار اختصاصی خود را بسازند. این هم برنامه‌ی ما برای رسیدن به این هدف است.
+            </p>
+          </div>
+          <div className="grid gap-10 md:grid-cols-3">
+            <div className="flex flex-col">
+              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
+                <Files className="size-5" />
+              </div>
+              <h3 className="mt-2 mb-3 text-lg font-semibold">
+                شفافیت و همکاری
+                                            </h3>
+              <p className="text-muted-foreground">
+                ما باور داریم همکاری زمانی شکل می‌گیرد که فروتنی، احترام و روحیه کمک به یکدیگر بخشی از فرهنگ تیم باشد. بازخورد سازنده، گفت‌وگوی شفاف و یادگیری مداوم از ارزش‌های اصلی ما هستند.
+                                            </p>
+            </div>
+            <div className="flex flex-col">
+              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
+                <CircleArrowRight className="size-5" />
+              </div>
+              <h3 className="mt-2 mb-3 text-lg font-semibold">
+                ایجاد تغییر چشمگیر 
+              </h3>
+              <p className="text-muted-foreground">
+                با جسارت، شجاعت و اهداف شفاف. ما به دنبال فرصت‌های بزرگ هستیم و تمرکز و انرژی خود را بر مهم‌ترین کارهایی که باید انجام شوند، دوچندان می‌کنیم.
+              </p>
+            </div>
+            <div className="flex flex-col">
+              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
+                <Settings className="size-5" />
+              </div>
+              <h3 className="mt-2 mb-3 text-lg font-semibold">
+                بهینه‌سازی برای توانمندسازی
+              </h3>
+              <p className="text-muted-foreground">
+                ما باور داریم که همه باید توانمند باشند تا هر کاری را که به نظرشان در راستای منافع شرکت است انجام دهند.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About1 };
diff --git a/blocks/about10.tsx b/blocks/about10.tsx
new file mode 100644
index 0000000..770d693
--- /dev/null
+++ b/blocks/about10.tsx
@@ -0,0 +1,118 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const profile = {
+  title: "کسب‌وکار نوپا سامانه ابری",
+  subtitle: "ساخت آینده بهره‌وری",
+  bio: `تیمی پرشور از نوآوران هستیم که راهکارهای SaaS پیشرفته می‌سازیم تا کسب‌وکارها عملیات خود را ساده‌تر کنند و بهره‌وری را بالا ببرند. مأموریت ما نرم‌افزاری است که نه‌تنها مشکلات امروز را حل کند، بلکه چالش‌های فردا را پیش‌بینی کند.`,
+  vision: `به قدرت فناوری برای تحول نحوه کار کسب‌وکارها باور داریم. هدف ما ساخت راهکارهای شهودی و مقیاس‌پذیر است که با مشتریان رشد کند و به نیازهای در حال تغییر آن‌ها سازگار شود.`,
+  outro: `به هزاران کسب‌وکاری بپیوندید که به پلتفرم ما برای موفقیت خود اعتماد دارند. بیایید با هم چیزی شگفت‌انگیز بسازیم.`,
+  team: [
+    { id: "01", item: "مریم چناری", type: "مدیرعامل و هم‌بنیان‌گذار" },
+    { id: "02", item: "مهدی محمدی", type: "مدیر فناوری و هم‌بنیان‌گذار" },
+    { id: "03", item: "الهام حسینی", type: "سرپرست محصول" },
+    { id: "04", item: "داوود کیمیایی", type: "مهندس ارشد" },
+    { id: "05", item: "لیلا احمدی", type: "سرپرست طراحی" },
+    { id: "06", item: "امیر جعفری", type: "سرپرست بازاریابی" },
+    { id: "07", item: "راحله سبز", type: "سرپرست فروش" },
+  ],
+};
+
+interface About10Props {
+  className?: string;
+}
+
+const About10 = ({ className }: About10Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col-reverse gap-5 md:flex-row md:gap-12">
+          <div className="w-full md:w-1/3 md:pr-4">
+            <div className="sticky top-20 md:p-6">
+              <div className="mb-8">
+                <div className="mb-6 flex items-center gap-4">
+                  <img
+                    src="/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png"
+                    alt="تیم کسب‌وکار نوپا سامانه ابری"
+                    className="h-16 w-16 rounded-lg object-cover"
+                  />
+                  <div>
+                    <h3 className="font-semibold">{profile.title}</h3>
+                    <p className="text-sm text-muted-foreground">
+                      {profile.subtitle}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <nav>
+                <div className="py-4">
+                  <div className="group flex p-0 text-start text-xl font-medium hover:bg-transparent sm:text-xl">
+                    <span className="border-b-2 border-border pb-0.5 transition-colors">
+                      تماس با ما
+                    </span>
+                    <ArrowUpRight className="ml-1 h-6 w-5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+                  </div>
+                </div>
+              </nav>
+            </div>
+          </div>
+
+          <div className="w-full md:w-2/3 md:p-6">
+            <div className="max-w-4xl">
+              <h1 className="mb-12 text-2xll font-semibold">درباره ما</h1>
+
+              <div className="space-y-12">
+                <p className="w-full text-xl leading-[36px] font-medium md:max-w-2xl">
+                  {profile.bio}
+                </p>
+
+                <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
+                  <h2 className="text-xl font-medium">فلسفه اصلی</h2>
+                  <p className="leading-relaxed">{profile.vision}</p>
+                </div>
+
+                <div className="my-12">
+                  <img
+                    src="/block-media/shadcnblocks/block/lummi/bw12.jpeg"
+                    alt="دفتر کسب‌وکار نوپا سامانه ابری"
+                    className="rounded-2xl object-cover"
+                  />
+                </div>
+
+                <div>
+                  <h2 className="mb-8 text-xl font-medium">تیم ما</h2>
+                  <div className="space-y-6">
+                    {profile.team.map(({ id, item, type }) => (
+                      <div
+                        key={id}
+                        className="flex items-center justify-between border-b py-4"
+                      >
+                        <div className="flex items-center gap-4">
+                          <span className="font-mono text-sm text-muted-foreground">
+                            {id}
+                          </span>
+                          <span className="text-base">{item}</span>
+                        </div>
+                        <span className="text-sm text-muted-foreground">
+                          {type}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="mt-16">
+                  <p className="leading-relaxed">{profile.outro}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About10 };
diff --git a/blocks/about12.tsx b/blocks/about12.tsx
new file mode 100644
index 0000000..dd8bcb1
--- /dev/null
+++ b/blocks/about12.tsx
@@ -0,0 +1,231 @@
+import React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const awards = [
+  {
+    title: "جایزه رهبری طراحی",
+    year: "2025",
+  },
+  {
+    title: "بهترین بازطراحی برند",
+    year: "2025",
+  },
+  {
+    title: "جایزه تعالی تجربه کاربری",
+    year: "2024",
+  },
+  {
+    title: "نوآوری در هویت بصری",
+    year: "2024",
+  },
+  {
+    title: "تقدیر طراحی بسته‌بندی",
+    year: "2023",
+  },
+  {
+    title: "اثر اجتماعی در طراحی",
+    year: "2023",
+  },
+];
+
+interface About12Props {
+  className?: string;
+}
+
+const About12 = ({ className }: About12Props) => {
+  return (
+    <div className={cn("py-32", className)}>
+      <div className="container">
+        <section className="grid grid-cols-1 items-start gap-6 md:grid-cols-6">
+          <div className="col-span-1 flex items-center gap-1 md:col-span-2">
+            <span className="size-2 bg-primary" />
+            <h1 className="font-mono text-sm text-muted-foreground">درباره</h1>
+          </div>
+          <div className="col-span-1 flex flex-col gap-8 md:col-span-4 md:gap-24">
+            <p className="text-xl font-medium tracking-tight text-balance md:text-2xll">
+              پلتفرم‌های CRM و بازاریابی می‌سازیم که ارزش پیشنهادی شما را
+              به مشتریان هدف منتقل می‌کنند و رشد درآمد را تسریع می‌بخشند.
+            </p>
+            <div className="flex flex-col gap-4 md:gap-6">
+              <img
+                src="/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg"
+                alt="پرتره"
+                className="aspect-[6/8] rounded-xl object-cover md:max-w-md"
+              />
+              <p className="max-w-md text-muted-foreground">
+                فراتر از تحویل پروژه، به ایجاد همکاری‌های بلندمدت باور داریم. از هر تجربه می‌آموزیم و ایده‌های کوچک را به تغییرات ماندگار تبدیل می‌کنیم.
+                                            </p>
+            </div>
+          </div>
+        </section>
+        <Separator className="my-16 md:my-32" />
+        <section className="space-y-6">
+          <div className="flex items-center gap-1">
+            <span className="size-2 bg-primary" />
+            <h1 className="font-mono text-sm text-muted-foreground">فرایند</h1>
+          </div>
+          <div className="grid gap-6 md:grid-cols-3">
+            <div className="flex flex-col gap-4">
+              <div className="relative overflow-hidden rounded-xl border">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="جای‌نگهدار"
+                  className="aspect-square object-cover dark:invert"
+                />
+                <span className="absolute top-3 start-3 rounded-xs bg-primary px-2.5 py-1 font-mono text-sm text-primary-foreground">
+                  01
+                </span>
+              </div>
+              <div className="flex flex-col gap-1 md:gap-2">
+                <h3 className="text-xl font-medium lg:text-xl">درک</h3>
+                <p className="text-sm text-muted-foreground lg:text-base">
+                  با پژوهش و گفت‌وگو شروع می‌کنیم تا اهداف، مخاطب و محدودیت‌ها
+                  روشن شود.
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <div className="relative overflow-hidden rounded-xl border">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                  alt="جای‌نگهدار"
+                  className="aspect-square object-cover dark:invert"
+                />
+                <span className="absolute top-3 left-3 rounded-xs bg-primary px-2.5 py-1 font-mono text-sm text-primary-foreground">
+                  02
+                </span>
+              </div>
+              <div className="flex flex-col gap-1 md:gap-2">
+                <h3 className="text-xl font-medium lg:text-xl">طراحی</h3>
+                <p className="text-sm text-muted-foreground lg:text-base">
+                  مسیرها و نمونه‌های اولیه در هویت، محصول و محتوا با نقاط
+                  کنترل شفاف می‌سازیم.
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <div className="relative overflow-hidden rounded-xl border">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                  alt="جای‌نگهدار"
+                  className="aspect-square object-cover dark:invert"
+                />
+                <span className="absolute top-3 left-3 rounded-xs bg-primary px-2.5 py-1 font-mono text-sm text-primary-foreground">
+                  03
+                </span>
+              </div>
+              <div className="flex flex-col gap-1 md:gap-2">
+                <h3 className="text-xl font-medium lg:text-xl">تحویل</h3>
+                <p className="text-sm text-muted-foreground lg:text-base">
+                  مستندات، راهنماها و پشتیبانی مستمر را فراهم می‌کنیم تا رشد و توسعه کسب‌وکار شما بدون مانع ادامه پیدا کند.
+                                                  </p>
+              </div>
+            </div>
+          </div>
+        </section>
+        <Separator className="my-16 md:my-32" />
+        <section className="grid grid-cols-1 items-start gap-6 md:grid-cols-6">
+          <div className="col-span-1 flex items-center gap-1 md:col-span-2">
+            <span className="size-2 bg-primary" />
+            <h1 className="font-mono text-sm text-muted-foreground">
+              نقاط عطف
+            </h1>
+          </div>
+          <div className="col-span-1 flex flex-col gap-6 md:col-span-4">
+            <div className="flex flex-col justify-between gap-2 rounded-lg bg-muted p-8 lg:flex-row lg:items-center lg:gap-10 lg:p-12">
+              <span className="text-2xll font-medium lg:text-2xll">120+</span>
+              <p className="text-primary/80 lg:max-w-md">
+                پروژه‌های موفق در صنایع مختلف، از غذا و نوشیدنی تا فین‌تک.
+                                            </p>
+            </div>
+            <div className="flex flex-col justify-between gap-2 rounded-lg bg-muted p-8 lg:flex-row lg:items-center lg:gap-10 lg:p-12">
+              <span className="text-2xll font-medium lg:text-2xll">12+</span>
+              <p className="text-primary/80 lg:max-w-md">
+                سال‌ها تجربه در توسعه برند، بهبود فرایندها و طراحی سیستم‌های پایدار.
+                                            </p>
+            </div>
+            <div className="flex flex-col justify-between gap-2 rounded-lg bg-muted p-8 lg:flex-row lg:items-center lg:gap-10 lg:p-12">
+              <span className="text-2xll font-medium lg:text-2xll">15+</span>
+              <p className="text-primary/80 lg:max-w-md">
+                جوایز و افتخاراتی که حاصل اعتماد مشتریان و کیفیت همکاری‌های ما هستند.
+                                            </p>
+            </div>
+          </div>
+        </section>
+        <img
+          src="/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg"
+          alt="جای‌نگهدار"
+          className="my-16 aspect-square w-full rounded-xl object-cover md:my-32 md:aspect-video"
+        />
+        <section className="grid grid-cols-1 items-start gap-6 md:grid-cols-6">
+          <div className="col-span-1 flex items-center gap-1 md:col-span-2">
+            <span className="size-2 bg-primary" />
+            <h1 className="font-mono text-sm text-muted-foreground">جوایز</h1>
+          </div>
+          <div className="col-span-1 flex flex-col gap-4 md:col-span-4">
+            <Separator />
+            {awards.map((award, index) => (
+              <React.Fragment key={index}>
+                <div key={index} className="flex items-center justify-between">
+                  <p className="font-medium tracking-tight md:text-lg">
+                    {award.title}
+                  </p>
+                  <p className="font-mono text-sm font-medium text-muted-foreground md:text-base">
+                    {award.year}
+                  </p>
+                </div>
+                <Separator />
+              </React.Fragment>
+            ))}
+          </div>
+        </section>
+        <Separator className="my-16 md:my-32" />
+        <section className="grid grid-cols-1 items-start gap-6 md:grid-cols-6">
+          <div className="col-span-1 flex items-center gap-1 md:col-span-2">
+            <span className="size-2 bg-primary" />
+            <h1 className="font-mono text-sm text-muted-foreground">
+              نظرات
+            </h1>
+          </div>
+          <div className="flex flex-col gap-8 md:col-span-4 md:gap-12">
+            <div className="flex flex-col gap-4">
+              <p className="text-xl font-medium tracking-tight md:text-2xll">
+                &ldquo;برند و محصول ما را هم‌راستا کردند و اثر آن فوراً در
+                تیم‌ها و مشتریان ما دیده شد.&rdquo;
+              </p>
+              <p className="font-medium text-muted-foreground md:text-lg">
+                نگار، مدیر عملیات در یک خرده‌فروشی جهانی
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <a href="#" className="group relative overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/israel-andrade-YI_9SivVt_s-unsplash.jpg"
+                  alt="جای‌نگهدار"
+                  className="transition-scale aspect-video scale-103 object-cover duration-400 group-hover:scale-101"
+                />
+                <div className="absolute inset-0 hidden bg-gradient-to-t from-black via-transparent to-transparent opacity-0 transition-all duration-400 group-hover:opacity-60 md:block" />
+                <div className="absolute bottom-5 left-5 hidden translate-y-16 flex-col transition-transform duration-400 group-hover:translate-y-0 md:flex">
+                  <p className="text-lg font-medium text-white">مطالعه موردی</p>
+                  <p className="text-sm font-medium text-white/70">
+                    بازطراحی تجارت الکترونیک
+                  </p>
+                </div>
+              </a>
+              <div className="flex flex-col md:hidden">
+                <p className="font-medium">مطالعه موردی</p>
+                <p className="text-sm font-medium text-muted-foreground">
+                  بازطراحی تجارت الکترونیک
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export { About12 };
diff --git a/blocks/about13.tsx b/blocks/about13.tsx
new file mode 100644
index 0000000..ed68649
--- /dev/null
+++ b/blocks/about13.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface About13Props {
+  className?: string;
+}
+
+const About13 = ({ className }: About13Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container space-y-10 lg:space-y-20">
+        <div className="w-full grid-cols-6 gap-10 lg:grid">
+          <div />
+          <h1 className="col-span-4 text-2xll font-semibold tracking-tighter lg:pr-24 lg:pl-10 lg:text-8xl">
+            درباره ما
+          </h1>
+        </div>
+        <div className="grid-cols-6 space-y-12 lg:grid lg:space-y-0 xl:gap-10">
+          <p className="hidden text-foreground/40 lg:block">
+            تیم ما، مأموریت ما
+          </p>
+          <div className="col-span-2 lg:pr-24 lg:pl-10">
+            <p className="text-foreground/40">
+              می‌خواهیم ذهن‌های متنوع را کنار هم بیاوریم و ایده‌ها را به
+              تجربه‌هایی تبدیل کنیم که اهمیت دارند.
+            </p>
+            <div className="mt-5 flex items-center gap-5 lg:mt-20">
+              <img
+                src="/block-media/shadcnblocks/block/guri3/avatar1.png"
+                className="size-12"
+                alt="آواتار"
+              />
+              <div>
+                <h3 className="text-lg font-medium tracking-tight">علی رضایی</h3>
+                <p className="text-sm text-foreground/40">مدیر خلاقیت</p>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-3 mt-32 lg:mt-0 lg:pl-10">
+            <h2 className="text-xl font-medium tracking-tight lg:text-3xl">
+              ما تیمی از متخصصان محصول، فروش و بازاریابی هستیم که به ساخت
+              پلتفرم‌های B2B مؤثر باور داریم. مأموریت ما بر نوآوری،
+              کارایی و کمک به رشد درآمد تیم‌های فروش بنا شده است.
+            </h2>
+            <p className="mt-6 text-base text-foreground/40 lg:mt-18 lg:text-lg">
+              همیشه از خود می‌پرسیم: هدف چیست؟ مخاطب کیست؟ و چگونه می‌توان تجربه‌ای ساده‌تر و بهتر خلق کرد؟
+                                      </p>
+          </div>
+        </div>
+        <div>
+          <img
+            src="/block-media/shadcnblocks/block/guri4/img10.png"
+            alt="تصویر درباره ما"
+            className="mt-4 h-150 w-full object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About13 };
diff --git a/blocks/about14.tsx b/blocks/about14.tsx
new file mode 100644
index 0000000..5caa455
--- /dev/null
+++ b/blocks/about14.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface About14Props {
+  className?: string;
+}
+
+const About14 = ({ className }: About14Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container space-y-10 lg:space-y-20">
+        <div className="w-full grid-cols-6 gap-10 space-y-5 lg:grid lg:space-y-0">
+          <h1 className="col-span-2 text-2xll font-semibold tracking-tight lg:text-2xll">
+            درباره ما
+          </h1>
+          <div />
+        </div>
+        <div>
+          <img
+            src="/block-media/shadcnblocks/block/guri4/img1.png"
+            alt="تصویر درباره ما"
+            className="mt-4 h-132 w-full object-cover"
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-10 space-y-12 lg:grid-cols-6 lg:space-y-0">
+          <p className="hidden text-foreground lg:block">تیم ما، مأموریت ما</p>
+          <div className="order-2 col-span-2 lg:order-none lg:pr-24 lg:pl-10">
+            <p className="text-foreground/40">
+              می‌خواهیم ذهن‌های متنوع را کنار هم بیاوریم و ایده‌ها را به
+              تجربه‌هایی تبدیل کنیم که اهمیت دارند.
+            </p>
+            <div className="mt-5 flex items-center gap-5 lg:mt-12">
+              <img
+                src="/block-media/shadcnblocks/block/guri3/avatar1.png"
+                className="size-12"
+                alt="آواتار"
+              />
+              <div>
+                <h3 className="text-lg font-medium tracking-tight">علی رضایی</h3>
+                <p className="text-sm text-foreground/40">مدیر خلاقیت</p>
+              </div>
+            </div>
+          </div>
+          <div className="order-1 col-span-3 lg:order-none lg:mt-0 lg:pl-10">
+            <h2 className="text-xl font-medium tracking-tight lg:text-3xl">
+              ما تیمی از متخصصان محصول، فروش و بازاریابی هستیم. پلتفرم‌های
+              B2B می‌سازیم که به تیم‌ها کمک می‌کند درآمد را افزایش دهند.
+              مأموریت ما بر نوآوری، کارایی و رشد پایدار مشتریان بنا شده است.
+            </h2>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About14 };
diff --git a/blocks/about15.tsx b/blocks/about15.tsx
new file mode 100644
index 0000000..2581523
--- /dev/null
+++ b/blocks/about15.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface About15Props {
+  className?: string;
+}
+
+const About15 = ({ className }: About15Props) => {
+  return (
+    <section className={cn("bg-neutral-950 py-32 text-white", className)}>
+      <div className="container flex flex-col items-center justify-center gap-25 lg:flex-row lg:gap-[10vw]">
+        <div className="w-xs rotate-[-6deg] border bg-white p-1">
+          <img
+            src="/block-media/shadcnblocks/block/guri4/img14.png"
+            alt=""
+            className="pointer-events-none h-110 w-full object-cover"
+          />
+
+          <div className="pt-2 pb-1">
+            <p className="text-lg font-medium tracking-tight text-neutral-950">
+              علی رضایی
+            </p>
+            <p className="text-sm text-neutral-950/50">@ری یو آی</p>
+          </div>
+        </div>
+        <div className="w-xs space-y-6">
+          <h1 className="mb-15 text-2xll font-medium tracking-tight">
+            به ایده‌ها وضوح و اثر می‌بخشیم{" "}
+            <span className="font-serif"></span> شکل می‌دهیم
+          </h1>
+          <p className="text-sm lg:text-base">
+            هر پروژه با پرسش ساده آغاز می‌شود: چه چیزی باید حس شود و چه
+            اثری باید بگذارد؟ از آنجا مسیر را با دقت و شفافیت ترسیم
+            می‌کنیم.
+          </p>
+          <p className="text-sm lg:text-base">
+            بین استراتژی و اجرا پل می‌زنیم؛ طراحی را نه فقط زیبا، بلکه
+            کاربردی، قابل فهم و هم‌راستا با اهداف واقعی شما می‌سازیم.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About15 };
diff --git a/blocks/about16.tsx b/blocks/about16.tsx
new file mode 100644
index 0000000..0d2a336
--- /dev/null
+++ b/blocks/about16.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const stats = [
+  {
+    number: "80K+",
+    description:
+      "از دسترسی به بیش از ۸۰هزار کاربر تا پشتیبانی از بیش از ۲۰ استارتاپ؛ این اعداد مقیاس، اثر و ثبات کار من را نشان می‌دهند.",
+  },
+  {
+    number: "20+",
+    description:
+      "استارتاپ‌هایی که با راهکارهای نوآورانه و راهنمایی استراتژیک همراه شدند تا در بازار خود مقیاس بگیرند و موفق شوند.",
+  },
+  {
+    number: "95%",
+    description:
+      "نرخ رضایت مشتری با پشتیبانی متعهد، تحویل باکیفیت و مشارکت‌های بلندمدت مبتنی بر اعتماد.",
+  },
+];
+
+interface About16Props {
+  className?: string;
+}
+
+const About16 = ({ className }: About16Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-20 lg:grid-cols-6">
+          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 lg:sticky">
+            <span className="size-2 bg-orange-500" />
+            <p className="text-foreground/30 uppercase">چرا ما؟</p>
+          </div>
+          <div className="col-span-4 ml-auto max-w-3xl space-y-10">
+            <h1 className="text-3xl font-medium tracking-tight lg:text-xl">
+              «ما تیمی از متخصصان محصول و فروش هستیم. پلتفرم‌های B2B می‌سازیم
+              که به تیم‌ها کمک می‌کند درآمد را افزایش دهند. مأموریت ما بر
+              نوآوری، کارایی و رشد پایدار مشتریان بنا شده است.»
+            </h1>
+
+            <p className="text-lg text-foreground/40">
+              می‌پرسیم: هدف چیست؟ برای چه کسی است؟ چطور آن را بی‌دردسر کنیم؟
+              <br className="hidden lg:block" />
+              از چرایی، برای چه کسی و چگونه بهتر شدنش شروع می‌کنیم.
+            </p>
+
+            <img
+              src="/block-media/shadcnblocks/block/guri4/img11.png"
+              alt=""
+              className="pointer-events-none h-110 w-full object-cover"
+            />
+            <ul className="mt-14">
+              {stats.map((stat, index) => (
+                <li key={index} className="grid grid-cols-5 border-b py-8">
+                  <h3 className="col-span-2 text-xl font-medium">
+                    {stat.number}
+                  </h3>
+                  <p className="col-span-3">{stat.description}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About16 };
diff --git a/blocks/about17.tsx b/blocks/about17.tsx
new file mode 100644
index 0000000..ec12bf9
--- /dev/null
+++ b/blocks/about17.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface About17Props {
+  className?: string;
+}
+
+const About17 = ({ className }: About17Props) => {
+  const [active, setActive] = useState<string>("اطلاعات");
+
+  const LINKS = [
+    {
+      title: "اطلاعات",
+      href: "#",
+      img: "/block-media/shadcnblocks/block/guri4/img11.png",
+    },
+    {
+      title: "کارها",
+      href: "#",
+      img: "/block-media/shadcnblocks/block/guri4/img9.png",
+    },
+
+    {
+      title: "مجله",
+      href: "#",
+      img: "/block-media/shadcnblocks/block/guri4/img10.png",
+    },
+
+    {
+      title: "آرشیو",
+      href: "#",
+      img: "/block-media/shadcnblocks/block/guri4/img6.png",
+    },
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-12">
+          <div className="top-10 col-span-3 h-fit w-fit text-xl tracking-tight">
+            <p className="font-medium">طراح مستقل و مهندس بنیان‌گذار</p>
+            <div className="mt-4 flex items-center gap-6 text-foreground/30">
+              <p>
+                {new Date().toLocaleTimeString("en-US", {
+                  timeZone: "America/Chicago",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: true,
+                })}
+              </p>
+              <p>CST</p>
+            </div>
+          </div>
+          <div className="col-span-4 ml-auto max-w-3xl space-y-10 lg:pl-15">
+            <h1 className="text-xl font-medium tracking-tight">
+              علی رضایی با ترکیب خلاقیت و تخصص فنی، محصولاتی دیجیتال خلق می‌کند که علاوه بر کارایی، تجربه‌ای لذت‌بخش برای کاربران فراهم می‌کنند. او با تکیه بر دانش توسعه توسعه کامل و نگاه دقیق به طراحی، ایده‌ها را از مرحله شکل‌گیری تا عرضه به محصولی مقیاس‌پذیر تبدیل می‌کند.
+                                      </h1>
+          </div>
+        </div>
+        <div className="mt-15 grid grid-cols-1 gap-4 border-t py-10 lg:grid-cols-7 lg:gap-12 lg:gap-15">
+          <ul className="top-10 order-2 col-span-3 flex h-fit w-fit gap-10 tracking-tight lg:order-none">
+            {LINKS.map((link) => (
+              <li
+                key={link.title}
+                className={cn(
+                  "cursor-pointer",
+                  active === link.title
+                    ? "text-foreground"
+                    : "text-foreground/30",
+                )}
+                onClick={() => setActive(link.title)}
+              >
+                {link.title}
+              </li>
+            ))}
+          </ul>
+          <ul className="order-1 col-span-4 ml-auto flex w-full max-w-3xl gap-10 font-medium tracking-tight text-foreground/40 lg:order-none lg:pl-15 lg:text-xl">
+            <li className="text-foreground">Austrlia</li>
+            <li>Brisbane</li>
+            <li>+1 (000) 023 0123</li>
+          </ul>
+        </div>
+        <div className="h-150">
+          <img
+            className="h-full w-full object-cover"
+            src={LINKS.find((link) => link.title === active)?.img}
+            alt=""
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About17 };
diff --git a/blocks/about18.tsx b/blocks/about18.tsx
new file mode 100644
index 0000000..0fa7afd
--- /dev/null
+++ b/blocks/about18.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface About18Props {
+  className?: string;
+}
+
+const About18 = ({ className }: About18Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-12">
+          <p className="col-span-2 font-medium">مأموریت ما</p>
+
+          <div className="col-span-4 ml-auto max-w-4xl space-y-10 lg:pl-15">
+            <h1 className="text-xl font-medium tracking-tight">
+              ایده‌ها را به پلتفرم‌های B2B مؤثر تبدیل می‌کنیم. هر پروژه فرصتی است تا با داده و اتوماسیون، رشد درآمد مشتریان را تسریع کنیم.
+                                      </h1>
+            <p className="w-fit text-lg text-foreground/40 lg:translate-y-2">
+              رویکرد ما بر پژوهش عمیق، طراحی هدفمند و اجرای باکیفیت استوار است. به همکاری، یادگیری مستمر و نوآوری باور داریم.
+                                      </p>
+          </div>
+        </div>
+        <div className="my-20 grid grid-cols-2 items-center gap-4">
+          <img
+            src="/block-media/shadcnblocks/block/guri4/img2.png"
+            alt=""
+            className="h-150 w-full object-cover saturate-0"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/guri4/img1.png"
+            alt=""
+            className="h-150 w-full object-cover"
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-12">
+          <p className="col-span-2 font-medium">آنچه ما را به پیش می‌راند</p>
+
+          <div className="col-span-4 ml-auto max-w-4xl space-y-10 lg:pl-15">
+            <h1 className="text-xl font-medium tracking-tight">
+              ما تیمی از متخصصان محصول، فروش و بازاریابی هستیم. پلتفرم‌های
+              B2B می‌سازیم که به تیم‌ها کمک می‌کند درآمد را افزایش دهند.
+              مأموریت ما بر نوآوری، کارایی و رشد پایدار مشتریان بنا شده است.
+            </h1>
+            <p className="w-fit text-lg text-foreground/40 lg:translate-y-2">
+              همیشه از خود می‌پرسیم: هدف چیست، مخاطب کیست و چگونه می‌توان تجربه‌ای ساده‌تر و بهتر خلق کرد؟
+                                        <br className="hidden lg:block" />
+              همه‌چیز را از شناخت نیاز، مخاطب و بهترین راه‌حل آغاز می‌کنیم.
+                                      </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About18 };
diff --git a/blocks/about19.tsx b/blocks/about19.tsx
new file mode 100644
index 0000000..1007c0b
--- /dev/null
+++ b/blocks/about19.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface About19Props {
+  className?: string;
+}
+
+const About19 = ({ className }: About19Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-1">
+          <div className="col-span-4 h-120 border">
+            <img
+              src="/block-media/shadcnblocks/block/guri4/img2.png"
+              alt=""
+              className="h-full w-full object-cover"
+            />
+          </div>
+
+          <div className="col-span-3 ml-auto max-w-4xl space-y-15 lg:pl-15">
+            <h1 className="text-xl font-medium tracking-tight">
+              ما تیمی از متخصصان محصول، فروش و بازاریابی هستیم. پلتفرم‌های
+              B2B می‌سازیم که به تیم‌ها کمک می‌کند درآمد را افزایش دهند.
+              مأموریت ما بر نوآوری، کارایی و رشد پایدار مشتریان بنا شده است.
+            </h1>
+            <p className="text-base text-foreground/40 lg:text-lg">
+              همیشه از خود می‌پرسیم: هدف چیست، برای چه کسی طراحی می‌کنیم و چگونه می‌توان بهترین تجربه را ارائه داد؟
+                                      </p>
+            <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
+              <p className="flex-1 text-sm text-foreground/40">
+                با گرد هم آوردن دیدگاه‌های متنوع، ایده‌ها را به تجربه‌هایی ارزشمند و تأثیرگذار تبدیل می‌کنیم.
+                                            </p>
+              <div className="flex w-fit items-center gap-2">
+                <img
+                  src="/block-media/shadcnblocks/block/guri3/avatar1.png"
+                  className="size-10"
+                  alt="آواتار"
+                />
+                <div>
+                  <h3 className="font-medium tracking-tight">علی رضایی</h3>
+                  <p className="text-sm text-foreground/40">
+                    مدیر خلاقیت
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About19 };
diff --git a/blocks/about2.tsx b/blocks/about2.tsx
new file mode 100644
index 0000000..109c3fa
--- /dev/null
+++ b/blocks/about2.tsx
@@ -0,0 +1,206 @@
+import { cn } from "@/lib/utils";
+
+interface About2Props {
+  className?: string;
+}
+
+const About2 = ({ className }: About2Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="flex flex-col gap-28">
+        <div className="container flex flex-col gap-10 text-center md:gap-24">
+          <div className="mx-auto flex max-w-3xl flex-col gap-6">
+            <h1 className="text-xl font-medium md:text-2xll">پشت صحنه ما</h1>
+            <p className="text-lg text-muted-foreground md:text-xl">
+            کشف کنید چگونه راهکار ما فرایندهای پیچیده را ساده می‌کند و مدیریت عملیات کلیدی و ارائه تجربه‌های استثنایی را آسان‌تر می‌سازد.
+            </p>
+          </div>
+          <div className="grid gap-6 md:grid-cols-12">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="placeholder"
+              className="size-full max-h-96 rounded-xl object-cover md:col-span-5"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="placeholder"
+              className="size-full max-h-96 rounded-xl object-cover md:col-span-4"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-3.svg"
+              alt="placeholder"
+              className="size-full max-h-96 rounded-xl object-cover md:col-span-3"
+            />
+          </div>
+        </div>
+        <div className="container flex flex-col gap-16">
+          <h2 className="max-w-3xl text-xl font-medium md:text-2xll">
+          ما در حوزه خود بهترین هستیم، اما مهارت تنها چیزی نیست که ارائه می‌کنیم.
+          </h2>
+          <div className="grid grid-cols-2 gap-6 md:grid-cols-3">
+            <div className="flex flex-col gap-6 border-b pb-8">
+              <p className="text-xl font-medium md:text-2xll">21M</p>
+              <p className="text-muted-foreground">گستره جهانی کاربران</p>
+            </div>
+            <div className="flex flex-col gap-6 border-b pb-8">
+              <p className="text-xl font-medium md:text-2xll">12+</p>
+              <p className="text-muted-foreground">سال‌ها تجربه و تخصص</p>
+            </div>
+            <div className="flex flex-col gap-6 border-b pb-8">
+              <p className="text-xl font-medium md:text-2xll">654</p>
+              <p className="text-muted-foreground">پروژه‌های تکمیل‌شده</p>
+            </div>
+            <div className="flex flex-col gap-6 border-b pb-8">
+              <p className="text-xl font-medium md:text-2xll">113k+</p>
+              <p className="text-muted-foreground">کاربران فعال ماهانه</p>
+            </div>
+            <div className="flex flex-col gap-6 border-b pb-8">
+              <p className="text-xl font-medium md:text-2xll">461k</p>
+              <p className="text-muted-foreground">حساب‌های ثبت‌شده</p>
+            </div>
+            <div className="flex flex-col gap-6 border-b pb-8">
+              <p className="text-xl font-medium md:text-2xll">98+</p>
+              <p className="text-muted-foreground">کاربران روزانه</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-muted/50 py-24">
+          <div className="container flex flex-col items-center gap-11">
+            <p className="text-center text-xl font-medium">
+            مورد اعتماد تیم‌های محصول پیشرو در سراسر جهان.
+            </p>
+            <div className="grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4">
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/block-1.svg"
+                  alt="logo"
+                  className="h-8 w-auto md:h-14"
+                />
+                <p className="text-xl font-semibold md:text-xl">ری یو آی</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/block-2.svg"
+                  alt="logo"
+                  className="h-8 w-auto md:h-14"
+                />
+                <p className="text-xl font-semibold md:text-xl">Creative</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/block-3.svg"
+                  alt="logo"
+                  className="h-8 w-auto md:h-14"
+                />
+                <p className="text-xl font-semibold md:text-xl">Octan</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/block-4.svg"
+                  alt="logo"
+                  className="h-8 w-auto md:h-14"
+                />
+                <p className="text-xl font-semibold md:text-xl">Newco</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/block-5.svg"
+                  alt="logo"
+                  className="h-8 w-auto md:h-14"
+                />
+                <p className="text-xl font-semibold md:text-xl">ری یو آی</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/block-6.svg"
+                  alt="logo"
+                  className="h-8 w-auto md:h-14"
+                />
+                <p className="text-xl font-semibold md:text-xl">Fabrikam</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/block-1.svg"
+                  alt="logo"
+                  className="h-8 w-auto md:h-14"
+                />
+                <p className="text-xl font-semibold md:text-xl">ری یو آی</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/block-2.svg"
+                  alt="logo"
+                  className="h-8 w-auto md:h-14"
+                />
+                <p className="text-xl font-semibold md:text-xl">ری یو آی</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="container flex flex-col items-center gap-14">
+          <h2 className="text-center text-xl font-semibold md:text-2xll">
+            مزایای همکاری با ما را از نزدیک ببینید
+                                </h2>
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6 md:col-span-2 md:grid-cols-2 md:flex-row lg:col-span-1 lg:grid-cols-1 lg:flex-col">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="placeholder"
+                className="max-h-96 w-full rounded-xl object-cover"
+              />
+              <div className="flex flex-col justify-center rounded-xl bg-muted p-8">
+                <p className="mb-2 text-xl font-medium">21M</p>
+                <p className="mb-6 font-semibold">کاربران جهانی</p>
+                <p className="text-muted-foreground">
+                با استفاده از ابزارهای ما، وظایف را ساده کرده و کارایی را تا ۸۰% افزایش دهید.
+                </p>
+              </div>
+            </div>
+            <div className="relative">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="placeholder"
+                className="h-full rounded-xl object-cover"
+              />
+              <div className="absolute right-6 bottom-6 left-6 rounded-xl bg-background p-4">
+                <div className="mb-4 flex items-center gap-2">
+                  <img
+                    src="/block-media/shadcnblocks/block/block-1.svg"
+                    alt="placeholder"
+                    className="h-7 w-auto"
+                  />
+                  <span className="text-lg font-semibold">ری یو آی.</span>
+                </div>
+                <p className="mb-6 text-sm">
+                راهکار ما با بهینه‌سازی فرایندها، هزینه‌های عملیاتی شما را به‌طور چشمگیری کاهش می‌دهد.
+                                                  </p>
+                <div className="flex items-baseline gap-1">
+                  <span className="font-medium">علی رضایی,</span>
+                  <span className="text-sm text-muted-foreground">
+                    مدیرعامل ری یو آی
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col gap-6">
+              <div className="rounded-xl bg-muted p-8">
+                <p className="mb-2 text-xl font-medium">97%</p>
+                <p className="mb-6 font-semibold">کاهش خطاها</p>
+                <p className="text-muted-foreground">
+                با جعبه‌ابزار پیشرفته ما به دقت و کارایی بیشتری دست پیدا کنید.
+                </p>
+              </div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt="placeholder"
+                className="max-h-96 rounded-xl object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About2 };
diff --git a/blocks/about28.tsx b/blocks/about28.tsx
new file mode 100644
index 0000000..3ed1f5a
--- /dev/null
+++ b/blocks/about28.tsx
@@ -0,0 +1,149 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Image {
+  src: string;
+  alt: string;
+}
+
+interface TextContent {
+  title?: string;
+  paragraphs: string[];
+  ctaButton?: {
+    href: string;
+    text: string;
+  };
+}
+
+interface About28Props {
+  leftImages?: Image[];
+  leftText?: TextContent;
+  rightText?: TextContent;
+  rightImages?: Image[];
+  className?: string;
+}
+
+const About28 = ({
+  leftImages = [
+    {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "همکاری تیم",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      alt: "فضای کاری تیم",
+    },
+  ],
+  leftText = {
+    title: "تیم",
+    paragraphs: [
+      "ساخت را از ۲۱۹ آغاز کردیم و در ۲۲۲ عرضه کردیم. هر نقطه اتصال از صفر طراحی شده  بدون بدهی فنی یا سیستم کهنه. برای نوآوری مدیریت پروژه در صد سال آینده ساخته شده‌ایم.",
+      "صددرصد در مالکیت بنیان‌گذاران و تیم است، سودآوریم و تیم را کوچک نگه می‌داریم. به‌مرور این صفحه کامل‌تر می‌شود، اما الان تمرکزمان بر تحویل به توسعه‌دهندگان است.",
+      "اگر به ساخت آینده مدیریت پروژه علاقه‌مندید، موقعیت‌های باز زیر را ببینید.",
+    ],
+    ctaButton: {
+      href: "/careers",
+      text: "مشاهده موقعیت‌های شغلی",
+    },
+  },
+  rightText = {
+    paragraphs: [
+      "متعهدیم نحوه برنامه‌ریزی، اجرا و تحویل پروژه‌ها را متحول کنیم. مأموریت ما این است که به مشتریان مزیت بی‌رقیب در برابر تأخیر، ناکارآمدی و بی‌نظمی بدهیم  از طریق بینش‌های عملی و همکاری بی‌درز.",
+      "مشتری‌محوریم  زمان می‌گذاریم تا هر جنبه از گردش کار شما را بفهمیم و بهتر از همیشه کار کنید. همه با هم هستیم چون موفقیت شما، موفقیت ماست.",
+    ],
+  },
+  rightImages = [
+    {
+      src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      alt: "فضای کاری مدرن",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/placeholder-4.svg",
+      alt: "همکاری تیم",
+    },
+  ],
+  className,
+}: About28Props) => {
+  return (
+    <section
+      className={cn(
+        "container mt-10 flex max-w-5xl flex-col-reverse gap-8 md:mt-14 md:gap-14 lg:mt-20 lg:flex-row lg:items-end",
+        className,
+      )}
+    >
+      {/* Images Left - Text Right */}
+      <div className="flex flex-col gap-8 lg:gap-16 xl:gap-20">
+        <ImageSection images={leftImages} className="xl:-translate-x-10" />
+        <TextSection
+          title={leftText.title}
+          paragraphs={leftText.paragraphs}
+          ctaButton={leftText.ctaButton}
+        />
+      </div>
+
+      {/* Text Left - Images Right */}
+      <div className="flex flex-col gap-8 lg:gap-16 xl:gap-20">
+        <TextSection paragraphs={rightText.paragraphs} />
+        <ImageSection
+          images={rightImages}
+          className="hidden lg:flex xl:translate-x-10"
+        />
+      </div>
+    </section>
+  );
+};
+
+interface ImageSectionProps {
+  images: Image[];
+  className?: string;
+}
+
+const ImageSection = ({ images, className }: ImageSectionProps) => {
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      {images.map((image, index) => (
+        <div
+          key={index}
+          className="relative aspect-[2/1.5] overflow-hidden rounded-2xl"
+        >
+          <img
+            src={image.src}
+            alt={image.alt}
+            className="absolute inset-0 size-full object-cover"
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+interface TextSectionProps {
+  title?: string;
+  paragraphs: string[];
+  ctaButton?: {
+    href: string;
+    text: string;
+  };
+}
+
+const TextSection = ({ title, paragraphs, ctaButton }: TextSectionProps) => {
+  return (
+    <div className="flex-1 space-y-4 text-lg md:space-y-6">
+      {title && <h2 className="text-xl text-foreground">{title}</h2>}
+      <div className="max-w-xl space-y-6 text-muted-foreground">
+        {paragraphs.map((paragraph, index) => (
+          <p key={index}>{paragraph}</p>
+        ))}
+      </div>
+      {ctaButton && (
+        <div className="mt-8">
+          <Button size="lg" asChild>
+            <a href={ctaButton.href}>{ctaButton.text}</a>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { About28 };
diff --git a/blocks/about3.tsx b/blocks/about3.tsx
new file mode 100644
index 0000000..39ecb84
--- /dev/null
+++ b/blocks/about3.tsx
@@ -0,0 +1,220 @@
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeFade,
+  MarqueeItem,
+} from "@/components/kibo-ui/marquee";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface About3Props {
+  className?: string;
+  title: string;
+  description?: string;
+  mainImage: {
+    src: string;
+    alt: string;
+  };
+  secondaryImage: {
+    src: string;
+    alt: string;
+  };
+  breakout: {
+    src?: string;
+    alt?: string;
+    title: string;
+    description: string;
+    buttonText?: string;
+    buttonUrl?: string;
+  };
+  companies?: Array<{
+    src: string;
+    alt: string;
+  }> | null;
+  achievementsTitle?: string;
+  achievementsDescription?: string;
+  achievements?: Array<{
+    label: string;
+    value: string;
+  }>;
+  contentSections?: Array<{
+    title: string;
+    content: string;
+  }>;
+}
+
+const About3 = ({
+  className,
+  title = "درباره ما",
+  description = "ما تیمی پرشور هستیم که به خلق راهکارهای نوآورانه برای توانمندسازی کسب‌وکارها در عصر دیجیتال متعهدیم. با سال‌ها تجربه در طراحی و توسعه، مؤلفه‌هایی زیبا و در دسترس خلق می‌کنیم که به تیم‌ها کمک می‌کند سریع‌تر بسازند.",
+  mainImage = {
+    src: "/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg",
+    alt: "about",
+  },
+  secondaryImage = {
+    src: "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg",
+    alt: "about",
+  },
+  breakout = {
+    src: "/block-media/shadcnblocks/block/block-1.svg",
+    alt: "logo",
+    title: "هزاران بلاک آماده در ری یو آی",
+    description:
+      "ارائه ابزارهای مؤثر به کسب‌وکارها برای بهبود روند کار، افزایش کارایی و تشویق رشد",
+    buttonText: "بیشتر بدانید",
+    buttonUrl: "https://www.ShadcnBlocks",
+  },
+  companies = [
+    {
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      alt: "Arc",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      alt: "Descript",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      alt: "Mercury",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      alt: "Ramp",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      alt: "Retool",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      alt: "Watershed",
+    },
+  ],
+  achievementsTitle = "دستاوردهای ما به عدد و رقم",
+  achievementsDescription = "ارائه ابزارهای مؤثر به کسب‌وکارها برای بهبود گردش‌کار، افزایش کارایی و تقویت رشد.",
+  achievements = [
+    { label: "شرکت‌ها", value: "300+" },
+    { label: "پروژه‌های تکمیل‌شده", value: "800+" },
+    { label: "مشتریان خوشحال", value: "99%" },
+    { label: "جوایز و افتخارات", value: "10+" },
+  ],
+  contentSections = [
+    {
+      title: "دیدگاه ما",
+      content:
+        "سال‌هاست فرایند ساخت نرم‌افزار سفارشی دشوار مانده است؛ امروز ابزارهای بصری هست، اما راهکارهای دقیق همچنان به تخصص فنی و زمان زیاد نیاز دارند و این برای کسب‌وکارها و افراد دردساز است.\n\nاگر می‌توانستید بدون نوشتن حتی یک خط کد، نرم‌افزار سفارشی بسازید چه؟ اگر می‌توانستید ابزارهای خودتان را بسازید؟\n\nبا پلتفرم ما می‌توانید! ابزارهای ما به شما اجازه می‌دهند چیدمان طراحی کنید و قابلیت بسازیدهمه این‌ها بدون نیاز به کدنویسی.\n\nما باور داریم هر کسی باید بتواند راهکار خودش را بسازد، فارغ از پیشینه فنی.",
+    },
+    {
+      title: "سازندگان",
+      content:
+        "شرکت ما بیش از یک دهه است ابزارهای وب می‌سازد و در هر پروژه بر کارایی و کنترل کاربر تمرکز دارد. می‌دانیم بهترین راهکارها همان‌هایی‌اند که خودتان می‌توانید بسازید.\n\nابتدا این راهکارها را برای تیم خودمان توسعه دادیم و حالا همه می‌توانند از آن‌ها بهره ببرند. افتخار می‌کنیم پلتفرمی در دسترس همه ارائه می‌دهیم، بدون توجه به تخصص فنی.\n\nتیم ما از افراد بااستعداد و مشتاق ساخت ابزاری تشکیل شده که به کاربران قدرت می‌دهد راهکارهایشان را به‌سادگی بسازند. در دستیابی شما به اهدافتان کنار شما هستیم.",
+    },
+  ],
+}: About3Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-14 flex flex-col gap-5 lg:w-2/3">
+          <h1 className="text-2xll font-semibold tracking-tighter lg:text-2xll">
+            {title}
+          </h1>
+          <p className="text-lg text-muted-foreground md:text-xl">
+            {description}
+          </p>
+        </div>
+        <div className="grid gap-7 lg:grid-cols-3">
+          <img
+            src={mainImage.src}
+            alt={mainImage.alt}
+            className="size-full max-h-[620px] rounded-xl object-cover lg:col-span-2"
+          />
+          <div className="flex flex-col gap-7 md:flex-row lg:flex-col">
+            <div className="flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto">
+              <img
+                src={breakout.src}
+                alt={breakout.alt}
+                className="mr-auto h-12 dark:invert"
+              />
+              <div>
+                <p className="mb-2 text-lg font-semibold">{breakout.title}</p>
+                <p className="text-muted-foreground">{breakout.description}</p>
+              </div>
+              <Button variant="outline" className="mr-auto" asChild>
+                <a href={breakout.buttonUrl} target="_blank">
+                  {breakout.buttonText}
+                </a>
+              </Button>
+            </div>
+            <img
+              src={secondaryImage.src}
+              alt={secondaryImage.alt}
+              className="grow basis-0 rounded-xl object-cover md:w-1/2 lg:min-h-0 lg:w-auto"
+            />
+          </div>
+        </div>
+        {companies && (
+          <div className="py-32">
+            <Marquee>
+              <MarqueeContent speed={40}>
+                {companies.map((company, idx) => (
+                  <MarqueeItem
+                    key={company.src + idx}
+                    className="mx-8 flex items-center"
+                  >
+                    <img
+                      src={company.src}
+                      alt={company.alt}
+                      className="h-7 w-auto md:h-8 dark:invert"
+                    />
+                  </MarqueeItem>
+                ))}
+              </MarqueeContent>
+              <MarqueeFade side="left" />
+              <MarqueeFade side="right" />
+            </Marquee>
+          </div>
+        )}
+        <div className="relative overflow-hidden rounded-xl bg-muted p-7 md:p-16">
+          <div className="flex flex-col gap-4 text-center md:text-start">
+            <h2
+              className="text-3xl font-medium md:text-xl text-end"
+              dir="rtl"
+            >
+              {achievementsTitle}
+            </h2>
+            <p className="max-w-xl text-muted-foreground">
+              {achievementsDescription}
+            </p>
+          </div>
+          <div className="mt-10 grid grid-cols-2 gap-x-4 gap-y-8 md:flex md:flex-wrap md:justify-between">
+            {achievements.map((item, idx) => (
+              <div
+                className="flex flex-col gap-2 text-center md:text-start"
+                key={item.label + idx}
+              >
+                <span className="font-mono text-xl font-semibold md:text-2xll">
+                  {item.value}
+                </span>
+                <p className="text-sm md:text-base">{item.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+        {contentSections && contentSections.length > 0 && (
+          <div className="mx-auto grid max-w-5xl gap-16 py-28 md:grid-cols-2 md:gap-28">
+            {contentSections.map((section, idx) => (
+              <div key={section.title + idx}>
+                <h2 className="mb-5 text-xl font-medium">{section.title}</h2>
+                <p className="text-lg leading-7 whitespace-pre-line text-muted-foreground">
+                  {section.content}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { About3 };
diff --git a/blocks/about4.tsx b/blocks/about4.tsx
new file mode 100644
index 0000000..560c54e
--- /dev/null
+++ b/blocks/about4.tsx
@@ -0,0 +1,107 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface About4Props {
+  className?: string;
+}
+
+const About4 = ({ className }: About4Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col gap-8 pb-28 text-center">
+          <h1 className="text-xl font-semibold md:text-2xll">درباره ما</h1>
+          <p className="text-xl font-medium text-muted-foreground">
+            با تیم ما آشنا شوید، ارزش‌هایمان را بشناسید و ببینید چطور کار، زندگی و
+            همه‌چیز بین این دو را متعادل می‌کنیم.
+          </p>
+        </div>
+        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="placeholder"
+            className="max-h-80 w-full object-cover"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-2.svg"
+            alt="placeholder"
+            className="max-h-80 w-full object-cover"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-3.svg"
+            alt="placeholder"
+            className="max-h-80 w-full object-cover"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-4.svg"
+            alt="placeholder"
+            className="max-h-80 w-full object-cover"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-5.svg"
+            alt="placeholder"
+            className="max-h-80 w-full object-cover"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-6.svg"
+            alt="placeholder"
+            className="max-h-80 w-full object-cover"
+          />
+        </div>
+        <div className="mx-auto grid max-w-5xl gap-28 py-28 md:grid-cols-2">
+          <div>
+            <h2 className="mb-5 text-xl font-semibold">چشم‌انداز ما</h2>
+            <p className="text-xl leading-8 font-medium text-muted-foreground">
+              سال‌هاست فرایند ساخت نرم‌افزار سفارشی دشوار مانده است؛ امروز ابزارهای
+              بصری هست، اما راهکارهای دقیق همچنان به تخصص فنی و زمان زیاد نیاز
+              دارند و این برای کسب‌وکارها و افراد دردساز است.
+              <br />
+              <br />
+              اگر می‌توانستید بدون نوشتن حتی یک خط کد، نرم‌افزار سفارشی بسازید
+              چه؟ اگر می‌توانستید ابزارهای خودتان را بسازید؟
+              <br />
+              <br />
+              با پلتفرم ما می‌توانید! ابزارهای ما به شما اجازه می‌دهند چیدمان
+              طراحی کنید و قابلیت بسازیدهمه این‌ها بدون نیاز به کدنویسی.
+              <br />
+              <br />
+              ما باور داریم هر کسی باید بتواند راهکار خودش را بسازد، فارغ از
+              پیشینه فنی.
+            </p>
+          </div>
+          <div>
+            <h2 className="mb-5 text-xl font-semibold">سازندگان</h2>
+            <p className="text-xl leading-8 font-medium text-muted-foreground">
+              <a href="#" className="mr-1 underline">
+                شرکت ما
+              </a>
+              بیش از یک دهه است ابزارهای وب می‌سازد و در هر پروژه بر کارایی و کنترل
+              کاربر تمرکز دارد. می‌دانیم بهترین راهکارها همان‌هایی‌اند که خودتان
+              می‌توانید بسازید.
+              <br />
+              <br />
+              ابتدا این راهکارها را برای تیم خودمان توسعه دادیم و حالا همه
+              می‌توانند از آن‌ها بهره ببرند. افتخار می‌کنیم پلتفرمی در دسترس همه
+              ارائه می‌دهیم، بدون توجه به تخصص فنی.
+              <br />
+              <br />
+              تیم ما از افراد بااستعداد و مشتاق ساخت ابزاری تشکیل شده که به
+              کاربران قدرت می‌دهد راهکارهایشان را به‌سادگی بسازند. در دستیابی شما
+              به اهدافتان کنار شما هستیم و مشتاقیم ببینیم چه می‌سازید!
+            </p>
+          </div>
+        </div>
+        <div className="mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl bg-muted/50 p-14 text-center md:flex-row md:text-start">
+          <h3 className="text-3xl font-semibold">
+            بخشی از
+            <br />
+            تیم جهانی ما
+          </h3>
+          <Button size="lg">آشنایی با تیم</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About4 };
diff --git a/blocks/about5.tsx b/blocks/about5.tsx
new file mode 100644
index 0000000..7972986
--- /dev/null
+++ b/blocks/about5.tsx
@@ -0,0 +1,108 @@
+import { cn } from "@/lib/utils";
+
+interface About5Props {
+  className?: string;
+}
+
+const About5 = ({ className }: About5Props) => {
+  return (
+    <section className={cn("bg-muted py-32 dark:bg-background", className)}>
+      <div className="container">
+        <div className="grid gap-14 pb-32 md:grid-cols-2">
+          <div>
+            <p className="text-sm font-medium">درباره ما</p>
+            <h1 className="mt-4 text-3xl font-medium md:text-xl">
+              ساده‌سازی گردش‌کارهای پیچیده با راهکارهای متمرکز بر توسعه‌دهنده
+            </h1>
+          </div>
+          <p className="md:text-lg">
+            پلتفرم ما ابزارهایی ساده و قدرتمند برای مدیریت و توسعه پروژه‌ها فراهم می‌کند؛ با یکپارچه‌سازی روان، امکانات کاربردی و تجربه‌ای یکپارچه برای تیم‌ها در هر اندازه.
+                                </p>
+        </div>
+        <img
+          src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+          alt="placeholder"
+          className="ml-auto aspect-video max-h-[550px] rounded-xl object-cover"
+        />
+        <p className="mt-6 text-center text-xl lg:text-end">
+          متعهد به حذف پیچیدگی از فرایندهای توسعه
+        </p>
+        <div className="flex flex-col justify-between gap-14 py-40 lg:flex-row">
+          <p className="mx-auto max-w-xl text-center text-xl lg:mx-0 lg:text-start">
+            ما تیمی از توسعه‌دهندگان، طراحان و کارآفرینان پرشور هستیم.
+          </p>
+          <div className="grid shrink-0 grid-cols-2 items-center gap-6 md:grid-cols-4">
+            <img
+              src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
+              alt="logo"
+              className="mx-auto max-h-6 md:mx-0 dark:invert"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+              alt="logo"
+              className="mx-auto max-h-9 md:mx-0 dark:invert"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
+              alt="logo"
+              className="mx-auto max-h-7 md:mx-0 md:max-h-9 dark:hidden"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
+              alt="logo"
+              className="mx-auto hidden max-h-7 md:mx-0 md:max-h-9 dark:block"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/logos/supabase-wordmark.svg"
+              alt="logo"
+              className="mx-auto max-h-9 md:mx-0 dark:hidden"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/logos/supabase-wordmark-dark.svg"
+              alt="logo"
+              className="mx-auto hidden max-h-9 md:mx-0 dark:block"
+            />
+          </div>
+        </div>
+        <div className="grid gap-14 lg:grid-cols-4 xl:grid-cols-5">
+          <div className="md:col-span-2 xl:col-span-3">
+            <h2 className="mb-10 text-xl font-medium">چرا شروع کردیم</h2>
+            <p className="text-lg">
+              چالش‌های توسعه‌دهندگان با زیرساخت‌های پیچیده را از نزدیک دیده‌ایم.
+              به‌جای تکرار همان کارها، خواستیم سیستمی بسازیم که کل گردش‌کار را از
+              ابتدا تا انتها ساده کند و توسعه‌دهندگان روی آنچه بهتر انجام می‌دهند
+              تمرکز کنند. پلتفرم ما برای همکاری و مقیاس‌پذاری کارآمد پروژه‌ها
+              طراحی شده است.
+              <br />
+              <br />
+              مأموریت ما ارائه ابزارهایی است که تیم‌ها بتوانند پروژه‌ها را
+              کارآمد بسازند و مقیاس دهند. باور داریم با برداشتن موانع ورود،
+              همکاری و بهره‌وری، تیم‌ها روی ساخت محصولات عالی تمرکز می‌کنند.
+            </p>
+            <div className="mt-6 grid grid-cols-2 gap-6 text-center">
+              <div className="flex flex-col items-center justify-center gap-2 rounded-xl border bg-background bg-card p-6">
+                <span className="text-xl md:text-xl">2024</span>
+                <span className="text-sm text-muted-foreground md:text-lg">
+                  راه‌اندازی
+                </span>
+              </div>
+              <div className="flex flex-col items-center justify-center gap-2 rounded-xl border bg-background bg-card p-6">
+                <span className="text-xl md:text-xl">$2.2M</span>
+                <span className="text-sm text-muted-foreground md:text-lg">
+                  مرحله پیش‌بذر سرمایه‌گذاری
+                                                  </span>
+              </div>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+            alt="placeholder"
+            className="rounded-xl md:col-span-2"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About5 };
diff --git a/blocks/about6.tsx b/blocks/about6.tsx
new file mode 100644
index 0000000..f342136
--- /dev/null
+++ b/blocks/about6.tsx
@@ -0,0 +1,82 @@
+import { cn } from "@/lib/utils";
+
+interface About6Props {
+  className?: string;
+}
+
+const About6 = ({ className }: About6Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-start gap-6 lg:flex-row">
+          <div className="flex w-full flex-col items-start justify-start gap-24 lg:w-1/2">
+            <div className="pr-6">
+              <h1 className="mb-6 text-xl font-bold md:text-2xll lg:mb-10 lg:text-2xll">
+                درباره ما
+              </h1>
+              <p className="mb-9 text-muted-foreground lg:text-xl">
+                ما تیمی از نوآوران هستیم که با تکیه بر فناوری و خلاقیت، آینده را قدم‌به‌قدم می‌سازیم. مسیر ما از شناسایی یک نیاز واقعی آغاز شد و با ارائه راهکارهای نوآورانه ادامه پیدا کرد.
+                                            </p>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-6 md:flex-row">
+              <img
+                src="/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg"
+                alt="درباره ۱"
+                className="aspect-[0.7] w-full rounded-lg object-cover md:w-1/2"
+              />
+              <div className="flex w-full flex-col items-center justify-center gap-6 md:w-1/2">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg"
+                  alt="درباره ۲"
+                  className="aspect-[1.1] rounded-lg object-cover"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/photos/annie-spratt-vGgn0xLdy8s-unsplash.jpg"
+                  alt="درباره ۳"
+                  className="aspect-[0.7] rounded-lg object-cover"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex w-full flex-col items-center justify-center gap-12 pt-12 lg:w-1/2 lg:pt-48">
+            <div className="flex flex-col items-center justify-center gap-6 md:flex-row">
+              <img
+                src="/block-media/shadcnblocks/block/photos/johnson-wang-iI4sR_nkkbc-unsplash.jpg"
+                alt="درباره ۴"
+                className="aspect-[0.9] w-full rounded-lg object-cover md:w-1/2"
+              />
+              <div className="flex w-full flex-col items-center justify-center gap-6 md:w-1/2">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-eHD8Y1Znfpk-unsplash.jpg"
+                  alt="درباره ۵"
+                  className="aspect-[0.8] rounded-lg object-cover"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg"
+                  alt="درباره ۶"
+                  className="aspect-[0.9] rounded-lg object-cover"
+                />
+              </div>
+            </div>
+            <div className="px-8">
+              <h1 className="mb-8 text-xl font-semibold lg:mb-6">
+                محل کار ما
+              </h1>
+              <p className="mb-9 lg:text-xl">
+                محیط کار ما به گونه‌ای طراحی شده است که خلاقیت را شکوفا کند، همکاری را تقویت کند و فضایی الهام‌بخش برای رشد ایده‌ها فراهم آورد.
+                                            </p>
+              <p className="text-muted-foreground">
+                از فضاهای باز همکاری تا گوشه‌های آرام تمرکز، هر بخش از دفتر با
+                دقت برای سبک‌های مختلف کار طراحی شده است. از راه دور هم
+                دوستانه‌ایم؛ اعضای تیم در سراسر جهان با هم هماهنگ کار می‌کنند
+                تا نتایجی استثنایی تحویل دهند.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About6 };
diff --git a/blocks/about7.tsx b/blocks/about7.tsx
new file mode 100644
index 0000000..d440ac0
--- /dev/null
+++ b/blocks/about7.tsx
@@ -0,0 +1,113 @@
+import { ArrowLeft } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface About7Props {
+  className?: string;
+}
+
+const About7 = ({ className }: About7Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "overflow-x-clip bg-[#E9EDE8] py-32 dark:bg-[#2F332E]",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="max-w-xl lg:-translate-x-32">
+          <h2 className="mb-4 text-xl font-semibold text-muted-foreground md:text-3xl">
+            درباره ما
+          </h2>
+          <h1 className="max-w-[600px] text-3xl leading-tight font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
+            ما ری یو آی هستیم؛ پلتفرمی متفاوت برای برنامه‌ریزی و مدیریت کار که به سازندگان کمک می‌کند آینده را از امروز بسازند.
+                                </h1>
+        </div>
+
+        <div className="relative mt-12 flex gap-4">
+          <div className="max-lg:translate-x-20">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="فضای کاری مدرن با نمایشگر iMac"
+              width={800}
+              height={500}
+            />
+          </div>
+          <div className="bottom-0 aspect-[1.5/1.4] w-[max(30vw,220px)] -left-10 translate-y-20 max-lg:absolute max-lg:border-[16px] max-lg:border-[#E9EDE8] lg:-translate-y-20 dark:max-lg:border-[#2F332E]">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="فردی در حال کار با لپ‌تاپ"
+              className="h-full w-full object-cover"
+            />
+          </div>
+        </div>
+
+        <div className="mt-28 max-w-xl lg:mt-10 lg:-translate-x-32">
+          <p className="text-lg leading-relaxed">
+            وظایف تغییر کرده‌اند، در حال تغییرند و همچنان به سمت بهتر پیش
+            می‌روند. زمان آن است که بهره‌وری کاربرمحور و اینترنت‌محور باشد؛
+            اما برای این کار به زیربنایی نو نیاز داریم.
+          </p>
+        </div>
+
+        <div className="mt-6 space-y-6 md:mt-8 md:space-y-8 lg:mt-10 lg:space-y-10">
+          <h2 className="max-w-xl text-xl font-semibold md:text-3xl lg:-translate-x-32">
+            همیشه می‌گفتند ابزارهای مدیریت کار نمی‌توانند واقعاً پویا و انعطاف‌پذیر باشند.
+                                </h2>
+          <p className="max-w-xl text-lg leading-relaxed lg:-translate-x-32">
+            سال‌ها ابزارهایی مانند مدیریت وظایف، یادداشت‌برداری و مدیریت وظایف را بررسی و استفاده کرده‌ایم. با وجود امکانات فراوان، هنوز نیاز به راهکاری ساده‌تر و هوشمندتر احساس می‌شود. ما باور داریم ابزارهای مدیریت کار باید پویا، منعطف و متناسب با نیاز کاربران باشند؛ به همین دلیل همه‌چیز را از ابتدا طراحی کردیم.
+                                </p>
+          <div className="grid gap-6 py-6 md:grid-cols-2 lg:py-10">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-3.svg"
+              alt="همکاری اعضای تیم"
+              width={600}
+              height={400}
+              className="rounded-lg"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-4.svg"
+              alt="جلسه تیم در اتاق کنفرانس"
+              width={600}
+              height={400}
+              className="rounded-lg"
+            />
+          </div>
+
+          <p className="ms-auto max-w-xl text-lg leading-relaxed lg:translate-x-32">
+            توسعه ری یو آی را از سال ۲۱۹ آغاز کردیم و در سال ۲۲۲ نخستین نسخه آن را منتشر کردیم. هر قابلیت از پایه طراحی شده تا تجربه‌ای سریع، ساده و بدون پیچیدگی ارائه دهد.
+                                </p>
+
+          <h2 className="ms-auto max-w-xl text-xl font-semibold md:text-3xl lg:translate-x-32">
+            تیمی کمی غیرمعمول هستیم  نه استارتاپ فناوری معمولی.
+          </h2>
+          <div className="ms-auto max-w-xl text-lg leading-relaxed lg:translate-x-32">
+            <p>
+              صددرصد در مالکیت بنیان‌گذاران و تیم است، پایدار کار می‌کنیم و
+              تیم را کوچک نگه می‌داریم. به‌مرور این صفحه را کامل‌تر می‌کنیم،
+              اما الان تمرکزمان بر تحویل به کاربران است. اگر می‌خواهید همکاری
+              کنید، موقعیت‌های باز ما را ببینید:
+            </p>
+            <Button
+              variant="outline"
+              size="lg"
+              className="mt-6 md:mt-8 lg:mt-10"
+            >
+              <a href="#">
+                <span className="flex items-center gap-2 whitespace-pre-wrap">
+                  مشاهده موقعیت‌های شغلی
+                  <ArrowLeft className="size-4" />
+                </span>
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About7 };
diff --git a/blocks/about8.tsx b/blocks/about8.tsx
new file mode 100644
index 0000000..b4c8ddf
--- /dev/null
+++ b/blocks/about8.tsx
@@ -0,0 +1,235 @@
+import { type SVGProps, useId } from "react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface About8Props {
+  className?: string;
+}
+
+const contentShell = "container max-w-5xl";
+const proseStack = "space-y-5 md:space-y-8 lg:space-y-10";
+const textInsetStart = "ps-6 md:ps-10 lg:ps-12";
+const textFromStart = cn(textInsetStart, "max-w-2xl w-full");
+
+const About8 = ({ className }: About8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      {/* Hero Section */}
+      <section
+        className={cn("relative py-10 md:py-12 lg:py-15", contentShell)}
+      >
+        <div className={textFromStart}>
+          <h1 className="text-xl font-semibold tracking-tight md:text-2xll lg:text-2xll">
+            بانکی،
+                                  <br />
+            متفاوت
+                                </h1>
+          <p className="mt-4 text-xl text-muted-foreground md:text-3xl">
+            مأموریت ما ایجاد تحول در خدمات مالی با بهره‌گیری از ظرفیت عظیم داده‌های مالی بلااستفاده است.
+                                </p>
+        </div>
+        {/* Background decoration */}
+        <>
+          <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_80%)]">
+            <PlusSigns className="h-full w-full text-foreground/[0.05]" />
+          </div>
+        </>
+      </section>
+
+      {/* Stats Section */}
+      <section className={cn("border-y py-5", contentShell)}>
+        <div className={textInsetStart}>
+          <h2 className="font-mono text-sm font-semibold tracking-widest text-accent-foreground">
+            در یک نگاه
+          </h2>
+          <div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-4">
+          <div>
+            <h3 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+              ۱۵۰ هزار ریال
+                                          </h3>
+            <p className="mt-1 font-medium text-muted-foreground">
+              سرمایه جذب‌شده
+            </p>
+          </div>
+          <div>
+            <h3 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+             ۲۰ هزار 
+                                          </h3>
+            <p className="mt-1 font-medium text-muted-foreground">شرکت</p>
+          </div>
+          <div>
+            <h3 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+              1.3B
+            </h3>
+            <p className="mt-1 font-medium text-muted-foreground">
+              تراکنش ماهانه
+            </p>
+          </div>
+          <div>
+            <h3 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+              1.5K
+            </h3>
+            <p className="mt-1 font-medium text-muted-foreground">
+              اتصال در دقیقه
+            </p>
+          </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Mission Section */}
+      <section className={cn("py-10 md:py-12 lg:py-15", contentShell)}>
+        <div className={cn(textFromStart, proseStack)}>
+          <p className="text-lg">
+            خدمات مالی در حال تحول‌اند. اکنون زمان آن رسیده است که زیرساخت‌های مالی سازنده محصول‌محور و مبتنی بر اتصال هوشمند باشند؛ اما این تحول به معماری و زیرساختی نو نیاز دارد.
+                                </p>
+
+          <h2 className="text-xl font-medium tracking-tight md:text-3xl">
+            همیشه به ما گفته بودند بانک‌ها نمی‌توانند پلتفرم باشند.
+          </h2>
+          <p className="text-lg">
+            سال‌ها تلاش شد با افزودن لایه‌های اتصال هوشمند به سامانه‌های قدیمی، مشکلات برطرف شود؛ اما نتیجه چیزی جز پیچیدگی و ناکارآمدی نبود. تجربه کار با پلتفرم‌هایی مانند سامانه مالی، درگاه پرداخت و اعتبار خرید نشان داد که راهکارهای فعلی پاسخگوی نیاز آینده نیستند. ما باور داریم زیرساخت بانکی باید از پایه و با رویکرد اتصال‌محور بازطراحی شود.
+                                </p>
+        </div>
+      </section>
+
+      {/* Image Grid Section */}
+      <section className="my-5 pb-10 md:my-8 md:pb-12 lg:my-12 lg:pb-15">
+        <Carousel
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+        >
+          <CarouselContent className="-mr-4 ml-0">
+            <CarouselItem className="basis-[80%] pl-0 pr-4 lg:basis-1/3 xl:basis-[40%]">
+              <div className="relative h-[330px] lg:h-[440px] xl:h-[600px]">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="عضو تیم در حال کار"
+                  className="object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[80%] pl-0 pr-4 lg:basis-1/3 xl:basis-[40%]">
+              <div className="relative h-[330px] lg:h-[440px] xl:h-[600px]">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="فضای کاری مدرن"
+                  className="object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[80%] pl-0 pr-4 lg:basis-1/3 xl:basis-[40%]">
+              <div className="relative h-[330px] lg:h-[440px] xl:h-[600px]">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="همکاری تیم"
+                  className="object-cover"
+                />
+              </div>
+            </CarouselItem>
+          </CarouselContent>
+        </Carousel>
+      </section>
+
+      {/* CoreAPI Section */}
+      <section className={contentShell}>
+        <div className={cn("ms-auto me-0 max-w-2xl w-full", proseStack)}>
+          <p className="text-lg">
+            توسعه ری یو آی را از سال ۲۱۹ آغاز کردیم و در سال ۲۲۲ نخستین نسخه آن را منتشر کردیم. تمام نقطه‌های اتصال از ابتدا طراحی شده‌اند؛ بدون بدهی فنی و وابستگی به سامانه‌های قدیمی، تا زیرساختی ماندگار برای آینده خدمات مالی فراهم شود.
+                                </p>
+
+          <h2 className="text-xl font-medium tracking-tight md:text-3xl">
+            ما فقط یک شرکت فناوری یا فین‌تک معمولی نیستیم؛ رویکرد ما از پایه متفاوت است.
+                                </h2>
+
+          <p className="text-lg">
+            مالکیت شرکت کاملاً در اختیار بنیان‌گذاران و اعضای تیم است. با حفظ تیمی چابک و سودآور، تمام تمرکز خود را بر ارائه زیرساختی قابل اعتماد برای توسعه‌دهندگان گذاشته‌ایم.
+                                </p>
+        </div>
+      </section>
+
+      {/* Founding Team Section */}
+      <section className={cn("py-10 md:py-12 lg:py-15", contentShell)}>
+        <div className="grid gap-5 md:grid-cols-2 md:gap-10 lg:gap-16">
+          <div className="order-2 md:order-1">
+            <div className={textFromStart}>
+              <h2 className="text-xl font-semibold tracking-tight md:text-xl">
+                تیم بنیان‌گذار
+              </h2>
+              <p className="mt-5 text-lg md:mt-6">
+                ساخت ری یو آی را از ۲۱۹ آغاز کردیم و در ۲۲۲ عرضه کردیم. هر
+                نقطه اتصال از صفر طراحی شده  بدون بدهی فنی یا سیستم کهنه. برای
+                نوآوری مالی در صد سال آینده ساخته شده‌ایم. صددرصد در مالکیت
+                بنیان‌گذاران و تیم است، سودآوریم و تیم را کوچک نگه می‌داریم.
+                به‌مرور این صفحه کامل‌تر می‌شود، اما الان تمرکزمان بر تحویل به
+                توسعه‌دهندگان است. اگر به ساخت آینده اتصال‌های مالی علاقه‌مندید،
+                موقعیت‌های باز زیر را ببینید.
+              </p>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="همکاری تیم بنیان‌گذار"
+            width={480}
+            height={400}
+            className="order-1 object-cover md:order-2"
+          />
+        </div>
+      </section>
+    </section>
+  );
+};
+
+interface PlusSignsProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
+  const GAP = 16;
+  const STROKE_WIDTH = 1;
+  const PLUS_SIZE = 6;
+  const id = useId();
+  const patternId = `plus-pattern-${id}`;
+
+  return (
+    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          x="0"
+          y="0"
+          width={GAP}
+          height={GAP}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1={GAP / 2}
+            y1={(GAP - PLUS_SIZE) / 2}
+            x2={GAP / 2}
+            y2={(GAP + PLUS_SIZE) / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+          <line
+            x1={(GAP - PLUS_SIZE) / 2}
+            y1={GAP / 2}
+            x2={(GAP + PLUS_SIZE) / 2}
+            y2={GAP / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+};
+
+export { About8 };
diff --git a/blocks/about9.tsx b/blocks/about9.tsx
new file mode 100644
index 0000000..a65134d
--- /dev/null
+++ b/blocks/about9.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface About9Props {
+  className?: string;
+}
+
+const About9 = ({ className }: About9Props) => {
+  return (
+    <section className={cn("py-16 md:py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl">
+          <h1 className="mb-6 max-w-4xl text-3xl leading-tight font-medium tracking-tight md:text-xl">
+            سلام، ما تیمی از توسعه‌دهندگان هستیم که با اشتیاق، اپلیکیشن‌های وب مقیاس‌پذیر، سریع و قابل اعتماد می‌سازیم.
+                                </h1>
+
+          <div className="mb-8 flex justify-center">
+            <img
+              src="/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg"
+              alt="تیم در حال کار"
+              className="w-full rounded-sm object-cover"
+            />
+          </div>
+
+          <div className="mx-auto mb-16 flex w-full max-w-6xl flex-col justify-between gap-12 md:flex-row">
+            <div className="text-base font-medium">
+              <span className="block text-muted-foreground">
+                توسعه‌دهنده فول‌استک
+              </span>
+              <span className="font-semibold text-foreground">
+                San Francisco CA
+                <img
+                  src="/block-media/shadcnblocks/block/flags/united-states.png"
+                  alt="ایالات متحده"
+                  className="h-4 w-4"
+                />
+              </span>
+            </div>
+
+            <div className="mt-8 w-full md:mt-0 md:w-2/3">
+              <p className="font-base w-full text-lg leading-[28px] text-muted-foreground md:w-3/4">
+                من یک توسعه‌دهنده فول‌استک با بیش از ۶ سال تجربه در طراحی و توسعه اپلیکیشن‌های وب مقیاس‌پذیر هستم. علاقه به حل مسئله و فناوری، مسیر حرفه‌ای من را شکل داده است.
+                                              <br />
+                <br />
+                در رابط کاربری، سرور برنامه و فناوری‌های ابری تخصص دارم و به کسب‌وکار نوپا‌ها و سازمان‌ها کمک کرده‌ام محصولات دیجیتال مقیاس‌پذیر توسعه دهند. تمرکز من بر تجربه کاربری، معماری تمیز و کدی است که در بلندمدت به‌سادگی نگهداری شود.
+                                            </p>
+
+              <div className="mt-12">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-eHD8Y1Znfpk-unsplash.jpg"
+                  alt="محیط کار"
+                  className="w-full rounded-sm object-cover"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About9 };
diff --git a/blocks/accept-invite1.tsx b/blocks/accept-invite1.tsx
new file mode 100644
index 0000000..b096bdd
--- /dev/null
+++ b/blocks/accept-invite1.tsx
@@ -0,0 +1,96 @@
+import { FcGoogle } from "react-icons/fc";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface Hyperlink {
+  label: string;
+  href: string;
+}
+
+interface AcceptInvite1Props {
+  companyLogo?: string;
+  disclaimer?: string;
+  disclaimerLink?: Hyperlink;
+  heading?: string;
+  description?: string[];
+  copyright?: string;
+  footerLinks?: Hyperlink[];
+}
+
+const AcceptInvite1 = ({
+  companyLogo = "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg",
+  disclaimer = "با وارد کردن ایمیل خود، با دریافت به‌روزرسانی‌ها و پیام‌های بازاریابی از آکمه موافقت می‌کنید. هر زمان می‌توانید اشتراک را لغو کنید. برای جزئیات بیشتر، ",
+  disclaimerLink = {
+    label: "سیاست حریم خصوصی",
+    href: "#",
+  },
+  heading = "به آکمه خوش آمدید",
+  description = [
+    "آکمه پلتفرمی نسل جدید است که برای ساده‌سازی گردش کار شما طراحی شده. با انعطاف‌پذیری در طراحی، با نیازهای منحصربه‌فرد کسب‌وکار شما سازگار می‌شود.",
+    "پروژه‌های خود را مدیریت کنید، با تیم همکاری کنید و پیشرفت را در یک داشبورد متمرکز دنبال کنید.",
+    "همین امروز شروع کنید.",
+  ],
+  copyright = `© ${new Date().getFullYear().toLocaleString("fa-IR")} آکمه`,
+  footerLinks = [
+    { label: "حریم خصوصی", href: "#" },
+    {
+      label: "پشتیبانی",
+      href: "#",
+    },
+  ],
+}: AcceptInvite1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className="container py-32">
+      <div className="flex w-full flex-col gap-20 text-start sm:items-center">
+        <img
+          src={companyLogo}
+          alt="لوگوی شرکت"
+          className="w-54 dark:invert"
+        />
+
+        <div className="flex flex-col-reverse items-start gap-10 sm:rounded-2xl sm:border sm:px-10 sm:pt-10 sm:pb-10 md:flex-row md:pt-20 lg:gap-20 lg:rounded-3xl lg:px-24 lg:pt-36 xl:gap-40">
+          <div className="flex w-full flex-col gap-6 sm:max-w-sm md:gap-60">
+            <div className="flex flex-col gap-6">
+              <Button type="button" variant="outline">
+                <FcGoogle />
+                ادامه با گوگل
+              </Button>
+              <span className="h-px w-full bg-border" />
+              <form autoComplete="off" className="flex flex-col gap-3">
+                <Input placeholder="ایمیل خود را وارد کنید" required />
+                <Button type="submit">ادامه</Button>
+              </form>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {disclaimer}
+              <a href={disclaimerLink.href} className="underline">
+                {disclaimerLink.label}
+              </a>
+              .
+            </p>
+          </div>
+          <div className="flex w-full flex-col gap-4 sm:max-w-sm">
+            <h3 className="text-xl font-bold">{heading}</h3>
+            <div className="space-y-4 text-sm font-medium text-muted-foreground">
+              {description.map((item, index) => (
+                <p key={index}>{item}</p>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
+          <p>{copyright}</p>
+          {footerLinks.map((link) => (
+            <a key={link.label} href={link.href} className="underline">
+              {link.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { AcceptInvite1 };
diff --git a/blocks/accept-invite2.tsx b/blocks/accept-invite2.tsx
new file mode 100644
index 0000000..faf76d8
--- /dev/null
+++ b/blocks/accept-invite2.tsx
@@ -0,0 +1,55 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface AcceptInvite2Props {
+  className?: string;
+  hostName?: string;
+  description?: string;
+}
+
+const AcceptInvite2 = ({
+  className,
+  hostName = "سارا احمدی",
+  description = "برای همکاری و دسترسی به منابعشان به فضای کار بپیوندید.",
+}: AcceptInvite2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className="py-32">
+      <div className="container">
+        <div
+          className={cn(
+            "mx-auto w-fit space-y-12 rounded-xl border px-6 pt-12 pb-10 shadow-lg",
+            className,
+          )}
+        >
+          <div className="mx-auto flex max-w-md flex-col items-center gap-2 text-center">
+            <span className="flex size-32 items-center justify-center rounded-full bg-muted text-2xll font-medium">
+              {hostName.charAt(0)}
+            </span>
+            <p className="mt-2 text-xl">
+              <span className="font-medium">{hostName}</span>
+              <span className="font-light">
+                {" "}
+                شما را به پیوستن به فضای کار دعوت کرده است.
+              </span>
+            </p>
+            <p className="max-w-sm text-muted-foreground">{description}</p>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-center gap-2">
+              <Button size="lg" variant="outline">
+                رد دعوت
+              </Button>
+              <Button size="lg">پذیرش دعوت</Button>
+            </div>
+            <p className="text-center text-xs text-muted-foreground">
+              اعتبار این دعوت‌نامه ۲۴ ساعت است
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { AcceptInvite2 };
diff --git a/blocks/address-book1.tsx b/blocks/address-book1.tsx
new file mode 100644
index 0000000..dd70966
--- /dev/null
+++ b/blocks/address-book1.tsx
@@ -0,0 +1,593 @@
+"use client";
+
+import {
+  MapPin,
+  MoreVertical,
+  Pencil,
+  Plus,
+  Save,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface Address {
+  id: string;
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zip: string;
+  country: string;
+  phone: string;
+  isDefault: boolean;
+  type: "خانه" | "سرکار" | "سایر";
+}
+
+const DEFAULT_ADDRESSES: Address[] = [
+  {
+    id: "1",
+    name: "علی رضایی",
+    street: "123 Main Street, Apt 4B",
+    city: "New York",
+    state: "NY",
+    zip: "10001",
+    country: "ایران",
+    phone: "(212) 555-1234",
+    isDefault: true,
+    type: "خانه",
+  },
+  {
+    id: "2",
+    name: "علی رضایی",
+    street: "456 Business Ave, Suite 100",
+    city: "New York",
+    state: "NY",
+    zip: "10018",
+    country: "ایران",
+    phone: "(212) 555-5678",
+    isDefault: false,
+    type: "سرکار",
+  },
+];
+
+interface AddressBook1Props {
+  addresses?: Address[];
+  className?: string;
+}
+
+const AddressBook1 = ({
+  addresses: initialAddresses = DEFAULT_ADDRESSES,
+  className,
+}: AddressBook1Props) => {
+  const [addresses, setAddresses] = useState(initialAddresses);
+  const [selectedId, setSelectedId] = useState(
+    addresses.find((a) => a.isDefault)?.id || addresses[0]?.id,
+  );
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [isAddingNew, setIsAddingNew] = useState(false);
+  const [editForm, setEditForm] = useState<Partial<Address>>({});
+
+  const startEditing = (address: Address) => {
+    setEditingId(address.id);
+    setEditForm({ ...address });
+  };
+
+  const cancelEditing = () => {
+    setEditingId(null);
+    setEditForm({});
+  };
+
+  const saveEdit = () => {
+    if (
+      editingId &&
+      editForm.name &&
+      editForm.street &&
+      editForm.city &&
+      editForm.state &&
+      editForm.zip &&
+      editForm.country &&
+      editForm.phone &&
+      editForm.type
+    ) {
+      setAddresses((prev) =>
+        prev.map((addr) =>
+          addr.id === editingId
+            ? ({
+                ...addr,
+                ...editForm,
+              } as Address)
+            : addr,
+        ),
+      );
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  const startAddingNew = () => {
+    setIsAddingNew(true);
+    setEditForm({
+      name: "",
+      street: "",
+      city: "",
+      state: "",
+      zip: "",
+      country: "ایران",
+      phone: "",
+      type: "خانه",
+      isDefault: false,
+    });
+  };
+
+  const cancelAddingNew = () => {
+    setIsAddingNew(false);
+    setEditForm({});
+  };
+
+  const saveNewAddress = () => {
+    if (
+      editForm.name &&
+      editForm.street &&
+      editForm.city &&
+      editForm.state &&
+      editForm.zip &&
+      editForm.country &&
+      editForm.phone &&
+      editForm.type
+    ) {
+      const newAddress: Address = {
+        id: Date.now().toString(),
+        name: editForm.name,
+        street: editForm.street,
+        city: editForm.city,
+        state: editForm.state,
+        zip: editForm.zip,
+        country: editForm.country,
+        phone: editForm.phone,
+        type: editForm.type as "خانه" | "سرکار" | "سایر",
+        isDefault: addresses.length === 0,
+      };
+      setAddresses((prev) => [...prev, newAddress]);
+      setIsAddingNew(false);
+      setEditForm({});
+      if (addresses.length === 0) {
+        setSelectedId(newAddress.id);
+      }
+    }
+  };
+
+  const deleteAddress = (id: string) => {
+    setAddresses((prev) => prev.filter((addr) => addr.id !== id));
+    if (selectedId === id && addresses.length > 1) {
+      setSelectedId(addresses.find((a) => a.id !== id)?.id || "");
+    }
+    if (editingId === id) {
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  return (
+    <section className={cn("w-full py-16 md:py-24 ", className)}>
+      <div className="w-full px-6 ">
+        {/* Header */}
+        <div className="mb-6 flex  justify-between ">
+          <div>
+            <h1 className="text-xl font-semibold tracking-tight md:text-3xl">
+              آدرس‌های من
+                                      </h1>
+            <p className="mt-1 text-muted-foreground">
+              آدرس‌های ذخیره‌شده خود را مدیریت کنید.
+                                      </p>
+          </div>
+          <Button onClick={startAddingNew}>
+            <Plus className="mr-2 size-4" />
+            افزودن آدرس
+                                </Button>
+        </div>
+
+        {/* Address List */}
+        <RadioGroup value={selectedId} onValueChange={setSelectedId}>
+          <div className="space-y-4 ">
+            {addresses.map((address) => (
+              <Card
+                key={address.id}
+                className={cn(
+                  "cursor-pointer gap-0 p-0 transition-colors ",
+                  selectedId === address.id && "border-primary",
+                  editingId === address.id && "border-primary",
+                )}
+                onClick={() =>
+                  editingId !== address.id && setSelectedId(address.id)
+                }
+              >
+                <CardContent className="p-4 ">
+                  {editingId === address.id ? (
+                    <div className="space-y-4">
+                      <div className="flex items-center justify-between ">
+                        <h3 className="font-semibold">ویرایش آدرس</h3>
+                        <div className="flex gap-2">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              cancelEditing();
+                            }}
+                          >
+                            <X className="size-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              saveEdit();
+                            }}
+                          >
+                            <Save className="mr-2 size-4" />
+                            ذخیره
+                          </Button>
+                        </div>
+                      </div>
+                      <div className="grid gap-4 sm:grid-cols-2">
+                        <div className="space-y-2">
+                          <Label htmlFor={`name-${address.id}`}>
+                            نام کامل
+                          </Label>
+                          <Input
+                            id={`name-${address.id}`}
+                            value={editForm.name || ""}
+                            onChange={(e) =>
+                              setEditForm({ ...editForm, name: e.target.value })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor={`phone-${address.id}`}>تلفن</Label>
+                          <Input
+                            id={`phone-${address.id}`}
+                            value={editForm.phone || ""}
+                            onChange={(e) =>
+                              setEditForm({
+                                ...editForm,
+                                phone: e.target.value,
+                              })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2 sm:col-span-2">
+                          <Label htmlFor={`street-${address.id}`}>
+                            آدرس خیابان
+                          </Label>
+                          <Input
+                            id={`street-${address.id}`}
+                            value={editForm.street || ""}
+                            onChange={(e) =>
+                              setEditForm({
+                                ...editForm,
+                                street: e.target.value,
+                              })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor={`city-${address.id}`}>شهر</Label>
+                          <Input
+                            id={`city-${address.id}`}
+                            value={editForm.city || ""}
+                            onChange={(e) =>
+                              setEditForm({ ...editForm, city: e.target.value })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor={`state-${address.id}`}>وضعیت</Label>
+                          <Input
+                            id={`state-${address.id}`}
+                            value={editForm.state || ""}
+                            onChange={(e) =>
+                              setEditForm({
+                                ...editForm,
+                                state: e.target.value,
+                              })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor={`zip-${address.id}`}>کد پستی</Label>
+                          <Input
+                            id={`zip-${address.id}`}
+                            value={editForm.zip || ""}
+                            onChange={(e) =>
+                              setEditForm({ ...editForm, zip: e.target.value })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor={`country-${address.id}`}>
+                            کشور
+                          </Label>
+                          <Input
+                            id={`country-${address.id}`}
+                            value={editForm.country || ""}
+                            onChange={(e) =>
+                              setEditForm({
+                                ...editForm,
+                                country: e.target.value,
+                              })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor={`type-${address.id}`}>نوع</Label>
+                          <Select
+                            value={editForm.type || "خانه"}
+                            onValueChange={(value: "خانه" | "سرکار" | "سایر") =>
+                              setEditForm({ ...editForm, type: value })
+                            }
+                          >
+                            <SelectTrigger
+                              id={`type-${address.id}`}
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="خانه">خانه</SelectItem>
+                              <SelectItem value="سرکار">سرکار</SelectItem>
+                              <SelectItem value="سایر">سایر</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex gap-4 flex-row-reverse">
+                      <RadioGroupItem
+                        value={address.id}
+                        id={address.id}
+                        className="mt-1 "
+                      />
+                      <div className="flex-1">
+                        <div className="flex justify-between gap-2 flex-row-reverse">
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <span className="font-semibold">
+                                {address.name}
+                              </span>
+                              {address.isDefault && (
+                                <Badge
+                                  variant="secondary"
+                                  className="text-xs font-normal"
+                                >
+                                  پیش‌فرض
+                                                                                            </Badge>
+                              )}
+                              <Badge
+                                variant="outline"
+                                className="text-xs capitalize"
+                              >
+                                {address.type}
+                              </Badge>
+                            </div>
+                          </div>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="size-8"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                <MoreVertical className="size-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  startEditing(address);
+                                }}
+                              >
+                                <Pencil className="mr-2 size-4" />
+                                ویرایش
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                className="text-destructive"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  deleteAddress(address.id);
+                                }}
+                              >
+                                <Trash2 className="mr-2 size-4" />
+                                حذف
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+
+                        <div className="mt-2 text-sm text-muted-foreground text-end">
+                          <p>{address.street}</p>
+                          <p>
+                            {address.city}, {address.state} {address.zip}
+                          </p>
+                          <p>{address.country}</p>
+                          <p className="mt-1">{address.phone}</p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+
+            {isAddingNew && (
+              <Card className="gap-0 border-primary p-0">
+                <CardContent className="p-4">
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between flex-row-reverse">
+                      <h3 className="font-semibold ">  افزودن آدرس جدید</h3>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={cancelAddingNew}
+                        >
+                          <X className="size-4" />
+                        </Button>
+                        <Button size="sm" onClick={saveNewAddress}>
+                          <Save className="mr-2 size-4" />
+                          ذخیره
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="grid gap-4 sm:grid-cols-2 ">
+                      <div className="space-y-2">
+                        <Label htmlFor="new-name">نام کامل</Label>
+                        <Input
+                          id="new-name"
+                          value={editForm.name || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, name: e.target.value })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="new-phone">تلفن</Label>
+                        <Input
+                          id="new-phone"
+                          value={editForm.phone || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, phone: e.target.value })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2 sm:col-span-2">
+                        <Label htmlFor="new-street">آدرس خیابان</Label>
+                        <Input
+                          id="new-street"
+                          value={editForm.street || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, street: e.target.value })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="new-city">شهر</Label>
+                        <Input
+                          id="new-city"
+                          value={editForm.city || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, city: e.target.value })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="new-state">شهرستان</Label>
+                        <Input
+                          id="new-state"
+                          value={editForm.state || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, state: e.target.value })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="new-zip">کد پستی</Label>
+                        <Input
+                          id="new-zip"
+                          value={editForm.zip || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, zip: e.target.value })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="new-country">کشور</Label>
+                        <Input
+                          id="new-country"
+                          value={editForm.country || ""}
+                          onChange={(e) =>
+                            setEditForm({
+                              ...editForm,
+                              country: e.target.value,
+                            })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2 sm:col-span-2">
+                        <Label htmlFor="new-type">نوع</Label>
+                        <Select
+                          value={editForm.type || "خانه"}
+                          onValueChange={(value: "خانه" | "سرکار" | "سایر") =>
+                            setEditForm({ ...editForm, type: value })
+                          }
+                        >
+                          <SelectTrigger id="new-type">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="خانه">خانه</SelectItem>
+                            <SelectItem value="سرکار">سرکار</SelectItem>
+                            <SelectItem value="سایر">سایر</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </RadioGroup>
+
+        {addresses.length === 0 && (
+          <Card className="p-0">
+            <CardContent className="flex flex-col items-center justify-center py-12">
+              <MapPin className="mb-4 size-12 text-muted-foreground" />
+              <h2 className="text-xl font-semibold">آدرسی ذخیره نشد</h2>
+              <p className="mt-2 text-muted-foreground">
+                برای سریع‌تر شدن فرایند خرید، یک آدرس جدید اضافه کنید.
+                                            </p>
+              <Button className="mt-4" onClick={startAddingNew}>
+                <Plus className="mr-2 size-4" />
+                اضافه کردن آدرس
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { AddressBook1 };
diff --git a/blocks/address-book2.tsx b/blocks/address-book2.tsx
new file mode 100644
index 0000000..5fdbd09
--- /dev/null
+++ b/blocks/address-book2.tsx
@@ -0,0 +1,563 @@
+"use client";
+
+import { Building, Check, Home, Plus, Save, Star, X } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface Address {
+  id: string;
+  label: string;
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zip: string;
+  country: string;
+  isDefault: boolean;
+  type: "home" | "work";
+}
+
+const DEFAULT_ADDRESSES: Address[] = [
+  {
+    id: "1",
+    label: "خانه",
+    name: "علی رضایی",
+    street: "123 Main Street, Apt 4B",
+    city: "New York",
+    state: "NY",
+    zip: "10001",
+    country: "United States",
+    isDefault: true,
+    type: "home",
+  },
+  {
+    id: "2",
+    label: "دفتر",
+    name: "علی رضایی",
+    street: "456 Business Ave, Suite 100",
+    city: "New York",
+    state: "NY",
+    zip: "10018",
+    country: "United States",
+    isDefault: false,
+    type: "work",
+  },
+];
+
+interface AddressBook2Props {
+  addresses?: Address[];
+  title?: string;
+  className?: string;
+}
+
+const AddressBook2 = ({
+  addresses: initialAddresses = DEFAULT_ADDRESSES,
+  title = "آدرس‌های ارسال",
+  className,
+}: AddressBook2Props) => {
+  const [addresses, setAddresses] = useState(initialAddresses);
+  const [selectedId, setSelectedId] = useState(
+    addresses.find((a) => a.isDefault)?.id || addresses[0]?.id,
+  );
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [isAddingNew, setIsAddingNew] = useState(false);
+  const [editForm, setEditForm] = useState<Partial<Address>>({});
+
+  const typeIcons = {
+    home: <Home className="size-4" />,
+    work: <Building className="size-4" />,
+  };
+
+  const startEditing = (address: Address) => {
+    setEditingId(address.id);
+    setEditForm({ ...address });
+  };
+
+  const cancelEditing = () => {
+    setEditingId(null);
+    setEditForm({});
+  };
+
+  const saveEdit = () => {
+    if (
+      editingId &&
+      editForm.name &&
+      editForm.street &&
+      editForm.city &&
+      editForm.state &&
+      editForm.zip &&
+      editForm.country &&
+      editForm.type &&
+      editForm.label
+    ) {
+      setAddresses((prev) =>
+        prev.map((addr) =>
+          addr.id === editingId
+            ? ({
+                ...addr,
+                ...editForm,
+              } as Address)
+            : addr,
+        ),
+      );
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  const startAddingNew = () => {
+    setIsAddingNew(true);
+    setEditForm({
+      label: "",
+      name: "",
+      street: "",
+      city: "",
+      state: "",
+      zip: "",
+      country: "ایران",
+      type: "home",
+      isDefault: addresses.length === 0,
+    });
+  };
+
+  const cancelAddingNew = () => {
+    setIsAddingNew(false);
+    setEditForm({});
+  };
+
+  const saveNewAddress = () => {
+    if (
+      editForm.name &&
+      editForm.street &&
+      editForm.city &&
+      editForm.state &&
+      editForm.zip &&
+      editForm.country &&
+      editForm.type &&
+      editForm.label
+    ) {
+      const newAddress: Address = {
+        id: Date.now().toString(),
+        label: editForm.label,
+        name: editForm.name,
+        street: editForm.street,
+        city: editForm.city,
+        state: editForm.state,
+        zip: editForm.zip,
+        country: editForm.country,
+        type: editForm.type as "home" | "work",
+        isDefault: addresses.length === 0,
+      };
+      setAddresses((prev) => [...prev, newAddress]);
+      setIsAddingNew(false);
+      setEditForm({});
+      if (addresses.length === 0) {
+        setSelectedId(newAddress.id);
+      }
+    }
+  };
+
+  return (
+    <section className={cn("py-16 md:py-24", className)}>
+      <div className="container max-w-2xl">
+        {/* Header */}
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold">{title}</h2>
+        </div>
+
+        {/* Address Grid */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          {addresses.map((address) => (
+            <Card
+              key={address.id}
+              className={cn(
+                "relative cursor-pointer gap-0 border p-0 transition-all hover:shadow-md",
+                selectedId === address.id && editingId !== address.id
+                  ? "border-primary shadow-md ring-2 ring-primary"
+                  : "",
+                editingId === address.id && "border-muted",
+              )}
+              onClick={() =>
+                editingId !== address.id && setSelectedId(address.id)
+              }
+            >
+              <CardContent className="p-4">
+                {editingId === address.id ? (
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <h3 className="font-semibold">ویرایش آدرس</h3>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            cancelEditing();
+                          }}
+                        >
+                          <X className="size-4" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            saveEdit();
+                          }}
+                        >
+                          <Save className="mr-2 size-4" />
+                          ذخیره
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="grid gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor={`label-${address.id}`}>عنوان</Label>
+                        <Input
+                          id={`label-${address.id}`}
+                          value={editForm.label || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, label: e.target.value })
+                          }
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor={`name-${address.id}`}>نام کامل </Label>
+                        <Input
+                          id={`name-${address.id}`}
+                          value={editForm.name || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, name: e.target.value })
+                          }
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor={`street-${address.id}`}>
+                          آدرس خیابان
+                        </Label>
+                        <Input
+                          id={`street-${address.id}`}
+                          value={editForm.street || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, street: e.target.value })
+                          }
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      </div>
+                      <div className="grid grid-cols-2 gap-2">
+                        <div className="space-y-2">
+                          <Label htmlFor={`city-${address.id}`}>شهر</Label>
+                          <Input
+                            id={`city-${address.id}`}
+                            value={editForm.city || ""}
+                            onChange={(e) =>
+                              setEditForm({ ...editForm, city: e.target.value })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor={`state-${address.id}`}>وضعیت</Label>
+                          <Input
+                            id={`state-${address.id}`}
+                            value={editForm.state || ""}
+                            onChange={(e) =>
+                              setEditForm({
+                                ...editForm,
+                                state: e.target.value,
+                              })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                      </div>
+                      <div className="grid grid-cols-2 gap-2">
+                        <div className="space-y-2">
+                          <Label htmlFor={`zip-${address.id}`}>کد پستی </Label>
+                          <Input
+                            id={`zip-${address.id}`}
+                            value={editForm.zip || ""}
+                            onChange={(e) =>
+                              setEditForm({ ...editForm, zip: e.target.value })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor={`country-${address.id}`}>
+                            کشور
+                          </Label>
+                          <Input
+                            id={`country-${address.id}`}
+                            value={editForm.country || ""}
+                            onChange={(e) =>
+                              setEditForm({
+                                ...editForm,
+                                country: e.target.value,
+                              })
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor={`type-${address.id}`}>نوع</Label>
+                        <Select
+                          value={editForm.type || "home"}
+                          onValueChange={(value: "home" | "work") =>
+                            setEditForm({ ...editForm, type: value })
+                          }
+                        >
+                          <SelectTrigger
+                            id={`type-${address.id}`}
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="home">خانه</SelectItem>
+                            <SelectItem value="work">محل کار</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    {/* Selected Indicator */}
+                    {selectedId === address.id && (
+                      <div className="absolute top-3 right-3 flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                        <Check className="size-4" />
+                      </div>
+                    )}
+
+                    {/* Type Icon & Label */}
+                    <div className="mb-3 flex items-center gap-2">
+                      <div className="flex size-8 items-center justify-center rounded-full bg-muted">
+                        {typeIcons[address.type]}
+                      </div>
+                      <span className="font-medium">{address.label}</span>
+                      {address.isDefault && (
+                        <Badge variant="secondary" className="gap-1 text-xs">
+                          <Star className="size-3 fill-current" />
+                          پیش‌فرض
+                                                                      </Badge>
+                      )}
+                    </div>
+
+                    {/* Address Details */}
+                    <div className="text-sm text-muted-foreground">
+                      <p className="font-medium text-foreground">
+                        {address.name}
+                      </p>
+                      <p>{address.street}</p>
+                      <p>
+                        {address.city}, {address.state} {address.zip}
+                      </p>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="mt-4 flex gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 px-2 text-xs"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          startEditing(address);
+                        }}
+                      >
+                        ویرایش
+                      </Button>
+                      {!address.isDefault && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-8 px-2 text-xs text-destructive hover:text-destructive"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setAddresses((prev) =>
+                              prev.filter((a) => a.id !== address.id),
+                            );
+                            if (
+                              selectedId === address.id &&
+                              addresses.length > 1
+                            ) {
+                              setSelectedId(
+                                addresses.find((a) => a.id !== address.id)
+                                  ?.id || "",
+                              );
+                            }
+                            if (editingId === address.id) {
+                              setEditingId(null);
+                              setEditForm({});
+                            }
+                          }}
+                        >
+                          حذف
+                        </Button>
+                      )}
+                    </div>
+                  </>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+
+          {/* افزودن جدید Card */}
+          {isAddingNew ? (
+            <Card className="gap-0 border border-muted p-0">
+              <CardContent className="p-4">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h3 className="font-semibold">افزودن آدرس جدید</h3>
+                    <div className="flex gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={cancelAddingNew}
+                      >
+                        <X className="size-4" />
+                      </Button>
+                      <Button size="sm" onClick={saveNewAddress}>
+                        <Save className="mr-2 size-4" />
+                        ذخیره
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="grid gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="new-label">عنوان</Label>
+                      <Input
+                        id="new-label"
+                        value={editForm.label || ""}
+                        onChange={(e) =>
+                          setEditForm({ ...editForm, label: e.target.value })
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="new-name">نام کامل</Label>
+                      <Input
+                        id="new-name"
+                        value={editForm.name || ""}
+                        onChange={(e) =>
+                          setEditForm({ ...editForm, name: e.target.value })
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="new-street">آدرس خیابان</Label>
+                      <Input
+                        id="new-street"
+                        value={editForm.street || ""}
+                        onChange={(e) =>
+                          setEditForm({ ...editForm, street: e.target.value })
+                        }
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="space-y-2">
+                        <Label htmlFor="new-city">شهر</Label>
+                        <Input
+                          id="new-city"
+                          value={editForm.city || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, city: e.target.value })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="new-state">وضعیت</Label>
+                        <Input
+                          id="new-state"
+                          value={editForm.state || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, state: e.target.value })
+                          }
+                        />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="space-y-2">
+                        <Label htmlFor="new-zip">کد پستی</Label>
+                        <Input
+                          id="new-zip"
+                          value={editForm.zip || ""}
+                          onChange={(e) =>
+                            setEditForm({ ...editForm, zip: e.target.value })
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="new-country">کشور</Label>
+                        <Input
+                          id="new-country"
+                          value={editForm.country || ""}
+                          onChange={(e) =>
+                            setEditForm({
+                              ...editForm,
+                              country: e.target.value,
+                            })
+                          }
+                        />
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="new-type">نوع</Label>
+                      <Select
+                        value={editForm.type || "home"}
+                        onValueChange={(value: "home" | "work") =>
+                          setEditForm({ ...editForm, type: value })
+                        }
+                      >
+                        <SelectTrigger id="new-type">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="home">خانه</SelectItem>
+                          <SelectItem value="work">محل کار</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card
+              className="cursor-pointer gap-0 border-dashed p-0 transition-colors hover:border-primary hover:bg-muted/50"
+              onClick={startAddingNew}
+            >
+              <CardContent className="flex h-full min-h-[180px] flex-col items-center justify-center p-4 text-center">
+                <div className="mb-3 flex size-12 items-center justify-center rounded-full bg-muted">
+                  <Plus className="size-5 text-muted-foreground" />
+                </div>
+                <p className="font-medium">افزودن آدرس جدید</p>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  آدرس خود را برای ارسال سفارش‌ها ذخیره کنید.
+                                                      </p>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { AddressBook2 };
diff --git a/blocks/application-shell1.tsx b/blocks/application-shell1.tsx
new file mode 100644
index 0000000..ae2c99e
--- /dev/null
+++ b/blocks/application-shell1.tsx
@@ -0,0 +1,441 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "شاد‌سی‌ان بلاکس",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "شاد‌سی‌ان بلاکس",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "قالب‌های شاد‌سی‌ان",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "کامپوننت‌های شاد‌سی‌ان",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+const getInitials = (name: string) =>
+  name
+    .split(" ")
+    .map((part) => part[0])
+    .join("");
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href} className="text-start">
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href} className="text-start">
+                    {child.label}
+                  </a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  const initials = getInitials(user.name);
+
+  const userAvatar = (
+    <Avatar className="size-8 rounded-lg">
+      <AvatarImage src={user.avatar} alt={user.name} />
+      <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
+    </Avatar>
+  );
+
+  const userInfo = (
+    <div className="grid flex-1 text-start text-sm leading-tight">
+      <span className="truncate font-medium">{user.name}</span>
+      <span className="truncate text-xs text-muted-foreground">
+        {user.email}
+      </span>
+    </div>
+  );
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              {userAvatar}
+              {userInfo}
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                {userAvatar}
+                {userInfo}
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        <SidebarLogo logo={sidebarData.logo} />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarGroup>
+          <SidebarGroupLabel>{sidebarData.footerGroup.title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {sidebarData.footerGroup.items.map((item) => (
+                <NavMenuItem key={item.label} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface ApplicationShell1Props {
+  className?: string;
+}
+
+export function ApplicationShell1({ className }: ApplicationShell1Props) {
+  return (
+    <SidebarProvider dir="rtl" lang="fa" className={cn(className)}>
+      <AppSidebar />
+      <SidebarInset dir="rtl" lang="fa">
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" aria-label="باز و بسته کردن منو" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList className="text-start">
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block [&>svg]:راست‌به‌چپ:rotate-180" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
diff --git a/blocks/application-shell10.tsx b/blocks/application-shell10.tsx
new file mode 100644
index 0000000..1a638bf
--- /dev/null
+++ b/blocks/application-shell10.tsx
@@ -0,0 +1,1337 @@
+"use client";
+
+import {
+  Archive,
+  ArrowLeft,
+  Bug,
+  ChevronDown,
+  Clock,
+  CommandIcon,
+  File,
+  Inbox,
+  Lightbulb,
+  MailOpen,
+  MessageSquare,
+  MoreHorizontal,
+  PanelRight,
+  Plus,
+  Search,
+  Send,
+  Sparkles,
+  Trash2,
+  User,
+  UserCheck,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+type NavItemId =
+  | "inbox"
+  | "unassigned"
+  | "assigned"
+  | "drafts"
+  | "archived"
+  | "spam";
+
+type BucketId = "support" | "bugs" | "features" | "internal";
+
+type TicketStatus = "active" | "pending" | "closed";
+
+type NavItem = {
+  id: NavItemId;
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  count?: number;
+};
+
+type Bucket = {
+  id: BucketId;
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+
+type User = {
+  id: string;
+  name: string;
+  email: string;
+  avatar: string;
+  role?: string;
+};
+
+type Customer = {
+  id: string;
+  name: string;
+  email: string;
+  company: string;
+  role: string;
+  avatar: string;
+  isHighValue: boolean;
+};
+
+type Message = {
+  id: string;
+  sender: User | Customer;
+  content: string;
+  timestamp: string;
+  date: string;
+  isStaff: boolean;
+};
+
+type Ticket = {
+  id: string;
+  subject: string;
+  preview: string;
+  timestamp: string;
+  read: boolean;
+  customer: Customer;
+  assignee?: User;
+  status: TicketStatus;
+  messages: Message[];
+  respondingUser?: User;
+};
+
+type PreviousConversation = {
+  id: string;
+  subject: string;
+  timestamp: string;
+};
+
+const navItems: NavItem[] = [
+  { id: "inbox", label: "صندوق ورودی", icon: Inbox, count: 6 },
+  { id: "unassigned", label: "بدون مسئول", icon: MailOpen, count: 10 },
+  { id: "assigned", label: "محول‌شده", icon: UserCheck, count: 3 },
+  { id: "drafts", label: "پیش‌نویس‌ها", icon: File, count: 1 },
+  { id: "archived", label: "بایگانی", icon: Archive },
+  { id: "spam", label: "هرزنامه", icon: Trash2 },
+];
+
+const buckets: Bucket[] = [
+  { id: "support", label: "درخواست‌های پشتیبانی", icon: MessageSquare },
+  { id: "bugs", label: "گزارش باگ", icon: Bug },
+  { id: "features", label: "درخواست ویژگی", icon: Lightbulb },
+  { id: "internal", label: "داخلی", icon: Users },
+];
+
+const staffUsers: User[] = [
+  {
+    id: "peter",
+    name: "رضا کریمی",
+    email: "peter.lann@cloudstar.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
+    role: "کارشناس پشتیبانی",
+  },
+  {
+    id: "alex",
+    name: "امیر چناری",
+    email: "alex.chen@cloudstar.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
+    role: "کارشناس پشتیبانی",
+  },
+];
+
+const mockCustomers: Customer[] = [
+  {
+    id: "sarah",
+    name: "مریم Tran",
+    email: "sarah.tran@example.com",
+    company: "BrightWave Marketing",
+    role: "مدیر عملیات",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar2.webp",
+    isHighValue: true,
+  },
+  {
+    id: "mike",
+    name: "محمد جعفری",
+    email: "mike.j@techcorp.io",
+    company: "TechCorp",
+    role: "توسعه‌دهنده",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar5.webp",
+    isHighValue: false,
+  },
+];
+
+const mockTickets: Ticket[] = [
+  {
+    id: "1",
+    subject: "مشکل اتصال یکپارچه‌سازی Slack",
+    preview:
+      "تیم ما می‌خواهد Slack را به CloudStar وصل کند، اما فرایند احراز هویت با خطا مواجه می‌شود...",
+    timestamp: "۶ ساعت پیش",
+    read: false,
+    customer: mockCustomers[0],
+    assignee: staffUsers[0],
+    status: "active",
+    respondingUser: staffUsers[0],
+    messages: [
+      {
+        id: "m1",
+        sender: mockCustomers[0],
+        content: `سلام پشتیبانی CloudStar،
+
+تیم ما می‌خواهد پیام‌رسان تیمی را به CloudStar وصل کند، اما فرایند احراز هویت با این خطا متوقف می‌شود: «احراز هویت token invalid».
+
+چند بار دوباره وصل شدیم و حتی workspace را ری‌استارت کردیم، اما نتیجه‌ای نگرفتیم.
+
+می‌توانید کمک کنید این یکپارچه‌سازی کار کند؟
+
+ممنون،
+مریم Tran
+مدیر عملیات، BrightWave Marketing`,
+        timestamp: "۸:۰۳",
+        date: "۲۹ مرداد",
+        isStaff: false,
+      },
+      {
+        id: "m2",
+        sender: staffUsers[0],
+        content: `سلام مریم،
+
+ممنون از پیام‌تان  خوشحال می‌شوم کمک کنم! این خطا معمولاً وقتی رخ می‌دهد که پیام‌رسان تیمی هنگام اتصال، مجوزهای لازم را به CloudStar نمی‌دهد. این موارد را امتحان کنید:
+
+۱ قبل از شروع اتصال، در workspace درست پیام‌رسان تیمی وارد شده باشید.
+۲ هنگام درخواست، همه مجوزها را به CloudStar بدهید (گاهی «Deny» اشتباهی زده می‌شود).
+۳. یک پنجره ناشناس/خصوصی امتحان کنید تا credentialهای قدیمی مزاحم نباشند.
+
+اگر جواب داد یا هنوز خطا می‌بینید، خبر دهید!`,
+        timestamp: "۱۲:۵۶",
+        date: "۲۹ مرداد",
+        isStaff: true,
+      },
+    ],
+  },
+  {
+    id: "2",
+    subject: "فایل‌های گم‌شده در فضای کار مشترک",
+    preview:
+      "دیروز مجموعه‌ای از فایل‌های پروژه را در فضای کار مشترک بارگذاری کردم. امروز دو فایل دیگر نیست...",
+    timestamp: "۶ ساعت پیش",
+    read: false,
+    customer: mockCustomers[1],
+    status: "active",
+    respondingUser: staffUsers[1],
+    messages: [],
+  },
+  {
+    id: "3",
+    subject: "مغایرت در صورتحساب آخر",
+    preview:
+      "فاکتور این ماه ۱۰ لایسنس Pro نشان می‌دهد، در حالی که فقط ۸ کاربر فعال داریم. لطفاً بررسی کنید...",
+    timestamp: "۸ ساعت پیش",
+    read: true,
+    customer: mockCustomers[0],
+    status: "pending",
+    messages: [],
+  },
+  {
+    id: "4",
+    subject: "امکان بازنشانی رمز عبور نیست",
+    preview:
+      'با لینک «فراموشی رمز عبور» سعی کردم رمز CloudStar را بازنشانی کنم، اما ایمیل بازنشانی هرگز نرسید...',
+    timestamp: "۱۲ ساعت پیش",
+    read: true,
+    customer: mockCustomers[1],
+    status: "active",
+    messages: [],
+  },
+  {
+    id: "5",
+    subject: "آمار داشبورد به‌روز نمی‌شود",
+    preview:
+      "داشبورد آمار از دیروز حدود ساعت ۱۵ به‌روزرسانی نمی‌شود. همه نمودارها روی همان مقادیر مانده‌اند...",
+    timestamp: "۱ روز پیش",
+    read: true,
+    customer: mockCustomers[0],
+    status: "closed",
+    messages: [],
+  },
+  {
+    id: "6",
+    subject: "درخواست مستندات انطباق HIPAA",
+    preview:
+      "قبل از ادامه فرایند onboarding، تیم حقوقی ما به مستندات CloudStar درباره HIPAA نیاز دارد...",
+    timestamp: "۲ هفته پیش",
+    read: true,
+    customer: mockCustomers[1],
+    status: "pending",
+    messages: [],
+  },
+];
+
+const previousConversations: PreviousConversation[] = [
+  {
+    id: "prev1",
+    subject: "مشکل اتصال یکپارچه‌سازی Slack",
+    timestamp: "۶ ساعت پیش",
+  },
+  {
+    id: "prev2",
+    subject: "انقضای توکن API",
+    timestamp: "۲ هفته پیش",
+  },
+];
+
+function getInitials(name: string) {
+  return (
+    name
+      .split(" ")
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "U"
+  );
+}
+
+function getStatusColor(status: TicketStatus) {
+  switch (status) {
+    case "active":
+      return "bg-emerald-500";
+    case "pending":
+      return "bg-amber-500";
+    case "closed":
+      return "bg-muted-foreground";
+    default:
+      return "bg-muted-foreground";
+  }
+}
+
+function getStatusLabel(status: TicketStatus) {
+  switch (status) {
+    case "active":
+      return "فعال";
+    case "pending":
+      return "در انتظار";
+    case "closed":
+      return "بسته";
+    default:
+      return status;
+  }
+}
+
+interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  activeNavItem: NavItemId;
+  activeBucket: BucketId | null;
+  onNavItemChange: (id: NavItemId) => void;
+  onBucketChange: (id: BucketId | null) => void;
+  onSearchClick: () => void;
+}
+
+function AppSidebar({
+  activeNavItem,
+  activeBucket,
+  onNavItemChange,
+  onBucketChange,
+  onSearchClick,
+  className,
+  ...props
+}: AppSidebarProps) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return (
+    <Sidebar
+      side="right"
+      collapsible="offcanvas"
+      variant="inset"
+      className={cn(className)}
+      {...props}
+    >
+      <SidebarHeader
+        className={cn("flex h-14 flex-row items-center justify-between")}
+      >
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <div className="flex w-full items-center group-data-[collapsible=icon]:justify-center">
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="flex h-auto items-center gap-3 p-0! hover:bg-transparent"
+                  >
+                    <div className="flex size-8 items-center justify-center rounded-sm bg-primary">
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                        alt="شاد‌سی‌ان بلاکس"
+                        className="size-5 invert dark:invert-0"
+                      />
+                    </div>
+                    {!isCollapsed && (
+                      <>
+                        <span className="font-semibold">ری یو آی</span>
+                        <ChevronDown className="size-3 text-muted-foreground" />
+                      </>
+                    )}
+                  </Button>
+                </DropdownMenuTrigger>
+              </div>
+              <DropdownMenuContent className="w-56" align="start">
+                <DropdownMenuLabel>فضای کار</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>تنظیمات فضای کار</DropdownMenuItem>
+                  <DropdownMenuItem>دعوت هم‌تیمی‌ها</DropdownMenuItem>
+                  <DropdownMenuItem>صورتحساب</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>خروج</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <Button variant="ghost" size="icon" className="size-7">
+          <MoreHorizontal className="size-4" />
+        </Button>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup className="py-2">
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton onClick={onSearchClick} className="px-2">
+                  <Search className="size-4" />
+                  <span>جستجو</span>
+                  <kbd className="ms-auto hidden items-center justify-center rounded-md font-mono font-medium text-muted-foreground/70 sm:flex">
+                    <CommandIcon
+                      className="size-3 font-medium"
+                      strokeWidth={1.5}
+                    />
+                    <span>K</span>
+                  </kbd>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarGroup className="py-0">
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => {
+                const Icon = item.icon;
+                const isActive =
+                  activeNavItem === item.id && activeBucket === null;
+                return (
+                  <SidebarMenuItem key={item.id}>
+                    <SidebarMenuButton
+                      onClick={() => {
+                        onNavItemChange(item.id);
+                        onBucketChange(null);
+                      }}
+                      isActive={isActive}
+                      className="px-2"
+                    >
+                      <Icon className="size-4" />
+                      <span>{item.label}</span>
+                      {item.count !== undefined && (
+                        <SidebarMenuBadge>{item.count}</SidebarMenuBadge>
+                      )}
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarGroupLabel>دسته‌ها</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {buckets.map((bucket) => {
+                const Icon = bucket.icon;
+                return (
+                  <SidebarMenuItem key={bucket.id}>
+                    <SidebarMenuButton
+                      onClick={() => onBucketChange(bucket.id)}
+                      isActive={activeBucket === bucket.id}
+                      className="px-2"
+                    >
+                      <Icon className="size-4" />
+                      <span>{bucket.label}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+interface TicketListPanelProps {
+  tickets: Ticket[];
+  selectedTicketId: string | null;
+  onTicketSelect: (ticketId: string) => void;
+  activeNavItem: NavItemId;
+}
+
+function TicketListPanel({
+  tickets,
+  selectedTicketId,
+  onTicketSelect,
+  activeNavItem,
+}: TicketListPanelProps) {
+  const navItem = navItems.find((item) => item.id === activeNavItem);
+  const title = navItem?.label ?? "صندوق ورودی";
+
+  return (
+    <div className="flex h-full w-1/4 max-w-[320px] min-w-[240px] shrink-0 flex-col overflow-hidden border-e bg-background">
+      <div className="flex h-14 shrink-0 items-center justify-between border-b px-4">
+        <div className="truncate text-start text-base font-medium text-foreground">
+          {title} شما
+        </div>
+      </div>
+      <ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]>div]:!block">
+        {tickets.map((ticket) => {
+          const isSelected = selectedTicketId === ticket.id;
+          return (
+            <button
+              type="button"
+              key={ticket.id}
+              onClick={() => onTicketSelect(ticket.id)}
+              className={cn(
+                "w-full border-b p-4 text-start text-sm leading-tight last:border-b-0 hover:bg-muted/50",
+                !ticket.read && "bg-muted/30",
+                isSelected && "bg-muted",
+              )}
+            >
+              <div className="min-w-0">
+                <div className="flex items-center justify-between gap-2">
+                  <span
+                    className={cn(
+                      "truncate text-sm",
+                      !ticket.read && "font-semibold",
+                    )}
+                  >
+                    {ticket.subject}
+                  </span>
+                </div>
+                <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+                  {ticket.preview}
+                </p>
+                {ticket.respondingUser && (
+                  <div className="mt-2 flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Avatar className="size-4">
+                      <AvatarImage
+                        src={ticket.respondingUser.avatar}
+                        alt={ticket.respondingUser.name}
+                      />
+                      <AvatarFallback className="text-[8px]">
+                        {getInitials(ticket.respondingUser.name)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span>
+                      {ticket.respondingUser.name.split(" ")[0]} در حال
+                      پاسخ است...
+                    </span>
+                  </div>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </ScrollArea>
+    </div>
+  );
+}
+
+interface MessageBubbleProps {
+  message: Message;
+}
+
+function MessageBubble({ message }: MessageBubbleProps) {
+  const sender = message.sender;
+  const isCustomer = "company" in sender;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-start gap-3">
+        <Avatar className="mt-0.5 size-10 shrink-0">
+          <AvatarImage src={sender.avatar} alt={sender.name} />
+          <AvatarFallback className="bg-primary text-xs font-medium text-primary-foreground">
+            {getInitials(sender.name)}
+          </AvatarFallback>
+        </Avatar>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="font-medium">{sender.name}</span>
+            {!isCustomer && (
+              <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+                پشتیبانی
+              </Badge>
+            )}
+          </div>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>از</span>
+            <span>{sender.email}</span>
+          </div>
+          <span className="text-xs text-muted-foreground">
+            {message.date}, {message.timestamp}
+          </span>
+        </div>
+      </div>
+      <div className="ps-13 text-sm leading-relaxed whitespace-pre-wrap">
+        {message.content}
+      </div>
+    </div>
+  );
+}
+
+interface ReplyComposerProps {
+  recipientEmail: string;
+  respondingUser?: User;
+}
+
+function ReplyComposer({ recipientEmail, respondingUser }: ReplyComposerProps) {
+  return (
+    <div className="shrink-0 border-t bg-background px-6 py-4 lg:px-10">
+      <div className="mx-auto max-w-3xl rounded-lg border bg-muted/30">
+        <div className="flex items-center gap-2 border-b px-3 py-2">
+          <ArrowLeft className="size-4 shrink-0 rotate-[135deg] text-muted-foreground" />
+          <span className="truncate text-sm text-muted-foreground">
+            {recipientEmail}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="ms-auto h-6 shrink-0 px-2 text-xs"
+          >
+            رونوشت
+          </Button>
+        </div>
+        <Textarea
+          placeholder="پاسخ خود را بنویسید..."
+          className="min-h-[80px] resize-none border-0 bg-transparent focus-visible:ring-0 md:min-h-[100px]"
+        />
+        <div className="flex flex-wrap items-center justify-between gap-2 border-t px-3 py-2">
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="icon" className="size-8 shrink-0">
+              <Plus className="size-4" />
+            </Button>
+            <span className="hidden text-xs text-muted-foreground sm:inline">
+              از <kbd className="rounded bg-muted px-1">/</kbd> برای میانبرها
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            {respondingUser && (
+              <div className="hidden items-center gap-1.5 text-xs text-muted-foreground sm:flex">
+                <Avatar className="size-5">
+                  <AvatarImage
+                    src={respondingUser.avatar}
+                    alt={respondingUser.name}
+                  />
+                  <AvatarFallback className="text-[8px]">
+                    {getInitials(respondingUser.name)}
+                  </AvatarFallback>
+                </Avatar>
+                <span>
+                  {respondingUser.name.split(" ")[0]} در حال پاسخ است...
+                </span>
+              </div>
+            )}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-1">
+                  بستن
+                  <ChevronDown className="size-3" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem>بستن به‌عنوان حل‌شده</DropdownMenuItem>
+                <DropdownMenuItem>بستن به‌عنوان هرزنامه</DropdownMenuItem>
+                <DropdownMenuItem>بستن بدون پاسخ</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Button size="sm" className="gap-1">
+              <Send className="size-3" />
+              ارسال
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface InboxAgentPanelProps {
+  ticket: Ticket;
+  previousConversations: PreviousConversation[];
+}
+
+function InboxAgentPanel({
+  ticket,
+  previousConversations,
+}: InboxAgentPanelProps) {
+  const customer = ticket.customer;
+
+  return (
+    <div className="flex h-full w-1/4 max-w-[360px] min-w-[280px] shrink-0 flex-col overflow-hidden border-s bg-background">
+      <div className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+        <Sparkles className="size-4" />
+        <span className="font-semibold">دستیار صندوق ورودی</span>
+      </div>
+      <ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]>div]:!block">
+        <div className="space-y-6 p-4 text-start">
+          <section className="space-y-3">
+            <div className="flex items-start gap-3">
+              <Avatar className="size-10 shrink-0">
+                <AvatarImage src={customer.avatar} alt={customer.name} />
+                <AvatarFallback className="bg-primary font-medium text-primary-foreground">
+                  {getInitials(customer.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="min-w-0 flex-1">
+                <div className="font-medium">{customer.name}</div>
+                <div className="text-sm text-muted-foreground">
+                  {customer.role}, {customer.company}
+                </div>
+                {customer.isHighValue && (
+                  <Badge
+                    variant="outline"
+                    className="mt-1.5 border-amber-500 bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400"
+                  >
+                    مشتری ارزشمند
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </section>
+
+          <section className="space-y-3">
+            <div className="rounded-lg bg-muted/50 p-3 text-sm">
+              <p className="text-muted-foreground">
+                مشتری آرام به نظر می‌رسد، اما ممکن است ناراضی شود. احتمالاً
+                فنی نیست چون راهنمای یکپارچه‌سازی پیام‌رسان تیمی را نخوانده است.
+              </p>
+              <p className="mt-3 text-muted-foreground">
+                رضا با جزئیات لازم پاسخ داده، اما هنوز تأیید نکرده که مشکل
+                حل شده است یا نه.
+              </p>
+            </div>
+          </section>
+
+          <section className="space-y-3">
+            <p className="text-sm text-muted-foreground">
+              اگر مشتری در ۱۲ ساعت آینده پاسخ ندهد، پیگیری ارسال شود:
+            </p>
+            <div className="rounded-lg border bg-muted/30 p-3 text-sm">
+              <p>
+                سلام مریم، پیگیری می‌کنم ببینم توانستید یکپارچه‌سازی را راه
+                بیندازید؟
+              </p>
+              <p className="mt-2">
+                اگر هنوز مشکل دارید، خوشحال می‌شوم یک تماس هماهنگ کنیم تا
+                سریع‌تر راه بیفتید.
+              </p>
+              <p className="mt-2">با احترام، رضا کریمی</p>
+            </div>
+            <Button variant="outline" className="w-full gap-2">
+              <Clock className="size-4" />
+              زمان‌بندی پیگیری
+            </Button>
+          </section>
+
+          <section className="space-y-3">
+            <p className="text-xs font-medium tracking-wide text-muted-foreground">
+              گفتگوهای قبلی
+            </p>
+            <div className="space-y-2">
+              {previousConversations.map((conv) => (
+                <button
+                  key={conv.id}
+                  type="button"
+                  className="flex w-full items-start justify-between gap-2 rounded-md p-2 text-start hover:bg-muted"
+                >
+                  <span className="line-clamp-2 text-sm">{conv.subject}</span>
+                  <span className="shrink-0 text-xs text-muted-foreground">
+                    {conv.timestamp}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </section>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+interface TicketCommandPaletteProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  tickets: Ticket[];
+  onTicketSelect: (ticketId: string) => void;
+  onNavItemSelect: (navItemId: NavItemId) => void;
+}
+
+function TicketCommandPalette({
+  open,
+  onOpenChange,
+  tickets,
+  onTicketSelect,
+  onNavItemSelect,
+}: TicketCommandPaletteProps) {
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
+      <CommandInput placeholder="جستجوی تیکت، مشتری یا ناوبری..." />
+      <CommandList>
+        <CommandEmpty>نتیجه‌ای یافت نشد.</CommandEmpty>
+        <CommandGroup heading="تیکت‌ها">
+          {tickets.slice(0, 5).map((ticket) => (
+            <CommandItem
+              key={ticket.id}
+              onSelect={() => {
+                onTicketSelect(ticket.id);
+                onOpenChange(false);
+              }}
+            >
+              <MessageSquare className="me-2 size-4" />
+              <span className="truncate">{ticket.subject}</span>
+              <span className="ms-auto text-xs text-muted-foreground">
+                {ticket.timestamp}
+              </span>
+            </CommandItem>
+          ))}
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="مشتریان">
+          {mockCustomers.map((customer) => (
+            <CommandItem key={customer.id}>
+              <User className="me-2 size-4" />
+              <span>{customer.name}</span>
+              <span className="ms-2 text-xs text-muted-foreground">
+                {customer.company}
+              </span>
+            </CommandItem>
+          ))}
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="ناوبری">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            return (
+              <CommandItem
+                key={item.id}
+                onSelect={() => {
+                  onNavItemSelect(item.id);
+                  onOpenChange(false);
+                }}
+              >
+                <Icon className="me-2 size-4" />
+                <span>{item.label}</span>
+                {item.count !== undefined && (
+                  <Badge variant="secondary" className="ms-auto">
+                    {item.count}
+                  </Badge>
+                )}
+              </CommandItem>
+            );
+          })}
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}
+
+export function ApplicationShell10() {
+  const [activeNavItem, setActiveNavItem] = React.useState<NavItemId>("inbox");
+  const [activeBucket, setActiveBucket] = React.useState<BucketId | null>(null);
+  const [selectedTicketId, setSelectedTicketId] = React.useState<string | null>(
+    mockTickets[0]?.id ?? null,
+  );
+  const [tickets, setTickets] = React.useState<Ticket[]>(mockTickets);
+  const [isAgentPanelOpen, setIsAgentPanelOpen] = React.useState(true);
+  const [isCommandOpen, setIsCommandOpen] = React.useState(false);
+  const [isMobileTicketListOpen, setIsMobileTicketListOpen] =
+    React.useState(false);
+  const [isMobileConversationOpen, setIsMobileConversationOpen] =
+    React.useState(false);
+  const [isMobileAgentOpen, setIsMobileAgentOpen] = React.useState(false);
+
+  const selectedTicket = tickets.find((t) => t.id === selectedTicketId) ?? null;
+
+  // Keyboard shortcut for command palette
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setIsCommandOpen((open) => !open);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  const handleTicketSelect = (ticketId: string) => {
+    setSelectedTicketId(ticketId);
+    setTickets((prev) =>
+      prev.map((t) => (t.id === ticketId ? { ...t, read: true } : t)),
+    );
+    if (window.innerWidth < 768) {
+      setIsMobileConversationOpen(true);
+    }
+  };
+
+  return (
+    <SidebarProvider dir="rtl" lang="fa" className="h-svh overflow-hidden">
+      <AppSidebar
+        activeNavItem={activeNavItem}
+        activeBucket={activeBucket}
+        onNavItemChange={setActiveNavItem}
+        onBucketChange={setActiveBucket}
+        onSearchClick={() => setIsCommandOpen(true)}
+        className="hidden md:flex"
+      />
+
+      <div className="flex h-full flex-col overflow-hidden pb-16 md:hidden">
+        <div className="flex h-14 shrink-0 items-center justify-between border-b px-4">
+          <div className="flex items-center gap-2">
+            <div className="flex size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                alt="شاد‌سی‌ان بلاکس"
+                className="size-5 invert dark:invert-0"
+              />
+            </div>
+            <span className="font-semibold">
+              {navItems.find((item) => item.id === activeNavItem)?.label ??
+                "صندوق ورودی"}{" "}
+              شما
+            </span>
+          </div>
+        </div>
+        <ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]>div]:!block">
+          {tickets.map((ticket) => {
+            const isSelected = selectedTicketId === ticket.id;
+            return (
+              <button
+                type="button"
+                key={ticket.id}
+                onClick={() => handleTicketSelect(ticket.id)}
+                className={cn(
+                  "w-full border-b p-4 text-start text-sm leading-tight last:border-b-0 hover:bg-muted/50",
+                  !ticket.read && "bg-muted/30",
+                  isSelected && "bg-muted",
+                )}
+              >
+                <div className="min-w-0">
+                  <div className="flex items-center justify-between gap-2">
+                    <span
+                      className={cn(
+                        "truncate text-sm",
+                        !ticket.read && "font-semibold",
+                      )}
+                    >
+                      {ticket.subject}
+                    </span>
+                    <span className="shrink-0 text-xs text-muted-foreground">
+                      {ticket.timestamp}
+                    </span>
+                  </div>
+                  <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+                    {ticket.preview}
+                  </p>
+                  {ticket.respondingUser && (
+                    <div className="mt-2 flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <Avatar className="size-4">
+                        <AvatarImage
+                          src={ticket.respondingUser.avatar}
+                          alt={ticket.respondingUser.name}
+                        />
+                        <AvatarFallback className="text-[8px]">
+                          {getInitials(ticket.respondingUser.name)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span>
+                        {ticket.respondingUser.name.split(" ")[0]} در حال
+                        پاسخ است...
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </ScrollArea>
+      </div>
+
+      <SidebarInset className="hidden min-h-0 overflow-hidden md:flex">
+        <div className="flex h-full w-full">
+          <TicketListPanel
+            tickets={tickets}
+            selectedTicketId={selectedTicketId}
+            onTicketSelect={handleTicketSelect}
+            activeNavItem={activeNavItem}
+          />
+
+          <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+            {selectedTicket ? (
+              <>
+                <header className="flex h-14 shrink-0 items-center justify-between border-b bg-background px-4">
+                  <div className="flex items-center gap-3">
+                    <MessageSquare className="size-5" />
+                    <span className="font-medium">
+                      پاسخ: {selectedTicket.subject}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="outline" size="sm" className="gap-1.5">
+                          <span
+                            className={cn(
+                              "size-2 rounded-full",
+                              getStatusColor(selectedTicket.status),
+                            )}
+                          />
+                          <span>{getStatusLabel(selectedTicket.status)}</span>
+                          <ChevronDown className="size-3" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start">
+                        <DropdownMenuItem>فعال</DropdownMenuItem>
+                        <DropdownMenuItem>در انتظار</DropdownMenuItem>
+                        <DropdownMenuItem>بسته</DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="size-8"
+                      onClick={() => setIsAgentPanelOpen(!isAgentPanelOpen)}
+                    >
+                      <PanelRight
+                        className={cn(
+                          "size-4",
+                          isAgentPanelOpen && "text-primary",
+                        )}
+                      />
+                    </Button>
+                  </div>
+                </header>
+
+                <ScrollArea className="min-h-0 flex-1">
+                  <div className="px-6 py-6 lg:px-10">
+                    <div className="mx-auto max-w-3xl space-y-8">
+                      {selectedTicket.messages.map((message) => (
+                        <MessageBubble key={message.id} message={message} />
+                      ))}
+                    </div>
+                  </div>
+                </ScrollArea>
+
+                <ReplyComposer
+                  recipientEmail={selectedTicket.customer.email}
+                  respondingUser={selectedTicket.respondingUser}
+                />
+              </>
+            ) : (
+              <div className="flex flex-1 items-center justify-center text-muted-foreground">
+                <div className="text-center">
+                  <MessageSquare className="mx-auto size-12 opacity-50" />
+                  <p className="mt-2 text-sm">یک تیکت را برای مشاهده انتخاب کنید</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {isAgentPanelOpen && selectedTicket && (
+            <InboxAgentPanel
+              ticket={selectedTicket}
+              previousConversations={previousConversations}
+            />
+          )}
+        </div>
+      </SidebarInset>
+
+      <TicketCommandPalette
+        open={isCommandOpen}
+        onOpenChange={setIsCommandOpen}
+        tickets={tickets}
+        onTicketSelect={handleTicketSelect}
+        onNavItemSelect={(navItemId) => {
+          setActiveNavItem(navItemId);
+          setActiveBucket(null);
+        }}
+      />
+
+      <Drawer
+        open={isMobileTicketListOpen}
+        onOpenChange={setIsMobileTicketListOpen}
+        dismissible
+      >
+        <DrawerContent dir="rtl" className="h-[85vh] text-start md:hidden">
+          <DrawerHeader>
+            <DrawerTitle className="text-start">تیکت‌ها</DrawerTitle>
+          </DrawerHeader>
+          <ScrollArea className="min-h-0 flex-1 px-4">
+            {tickets.map((ticket) => (
+              <button
+                type="button"
+                key={ticket.id}
+                onClick={() => {
+                  handleTicketSelect(ticket.id);
+                  setIsMobileTicketListOpen(false);
+                }}
+                className={cn(
+                  "w-full border-b p-4 text-start text-sm",
+                  !ticket.read && "bg-muted/30",
+                )}
+              >
+                <div className="min-w-0">
+                  <div className="flex items-center justify-between gap-2">
+                    <span
+                      className={cn(
+                        "truncate",
+                        !ticket.read && "font-semibold",
+                      )}
+                    >
+                      {ticket.subject}
+                    </span>
+                    <span className="shrink-0 text-xs text-muted-foreground">
+                      {ticket.timestamp}
+                    </span>
+                  </div>
+                  <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                    {ticket.preview}
+                  </p>
+                </div>
+              </button>
+            ))}
+          </ScrollArea>
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer
+        open={isMobileConversationOpen}
+        onOpenChange={setIsMobileConversationOpen}
+        dismissible
+      >
+        <DrawerContent
+          dir="rtl"
+          className="h-[90vh] overflow-hidden text-start md:hidden"
+        >
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>گفتگو</DrawerTitle>
+          </DrawerHeader>
+          {selectedTicket && (
+            <div className="flex h-full min-h-0 flex-col overflow-hidden">
+              <div className="flex shrink-0 items-center justify-between border-b px-4 py-3">
+                <span className="line-clamp-1 font-medium">
+                  {selectedTicket.subject}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 shrink-0"
+                  onClick={() => setIsMobileAgentOpen(true)}
+                >
+                  <Sparkles className="size-4" />
+                </Button>
+              </div>
+              <ScrollArea className="min-h-0 flex-1">
+                <div className="space-y-6 p-4">
+                  {selectedTicket.messages.map((message) => (
+                    <MessageBubble key={message.id} message={message} />
+                  ))}
+                </div>
+              </ScrollArea>
+              <div className="shrink-0">
+                <ReplyComposer
+                  recipientEmail={selectedTicket.customer.email}
+                  respondingUser={selectedTicket.respondingUser}
+                />
+              </div>
+            </div>
+          )}
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer
+        open={isMobileAgentOpen}
+        onOpenChange={setIsMobileAgentOpen}
+        dismissible
+      >
+        <DrawerContent dir="rtl" className="h-[85vh] text-start md:hidden">
+          <DrawerHeader>
+            <DrawerTitle className="flex items-center gap-2 text-start">
+              <Sparkles className="size-4" />
+              دستیار صندوق ورودی
+            </DrawerTitle>
+          </DrawerHeader>
+          {selectedTicket && (
+            <ScrollArea className="min-h-0 flex-1 px-4 pb-6">
+              <div className="space-y-6">
+                <section className="space-y-3">
+                  <div className="flex items-start gap-3">
+                    <Avatar className="size-10 shrink-0">
+                      <AvatarImage
+                        src={selectedTicket.customer.avatar}
+                        alt={selectedTicket.customer.name}
+                      />
+                      <AvatarFallback>
+                        {getInitials(selectedTicket.customer.name)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium">
+                        {selectedTicket.customer.name}
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        {selectedTicket.customer.role},{" "}
+                        {selectedTicket.customer.company}
+                      </div>
+                      {selectedTicket.customer.isHighValue && (
+                        <Badge
+                          variant="outline"
+                          className="mt-1.5 border-amber-500 bg-amber-50 text-amber-700"
+                        >
+                          مشتری ارزشمند
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+                </section>
+
+                <section className="rounded-lg bg-muted/50 p-3 text-sm text-muted-foreground">
+                  <p>
+                    مشتری آرام به نظر می‌رسد، اما ممکن است ناراضی شود.
+                  </p>
+                </section>
+
+                <section className="space-y-3">
+                  <div className="rounded-lg border bg-muted/30 p-3 text-sm">
+                    <p>سلام مریم، پیگیری می‌کنم...</p>
+                  </div>
+                  <Button variant="outline" className="w-full gap-2">
+                    <Clock className="size-4" />
+                    زمان‌بندی پیگیری
+                  </Button>
+                </section>
+              </div>
+            </ScrollArea>
+          )}
+        </DrawerContent>
+      </Drawer>
+
+      <nav
+        aria-label="ناوبری پایین موبایل"
+        className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden"
+      >
+        <div className="grid grid-cols-5">
+          {[
+            {
+              id: "inbox",
+              label: "صندوق ورودی",
+              icon: Inbox,
+              onClick: () => {
+                setActiveNavItem("inbox");
+                setIsMobileTicketListOpen(true);
+              },
+            },
+            {
+              id: "unassigned",
+              label: "بدون مسئول",
+              icon: MailOpen,
+              onClick: () => {
+                setActiveNavItem("unassigned");
+                setIsMobileTicketListOpen(true);
+              },
+            },
+            {
+              id: "assigned",
+              label: "محول‌شده",
+              icon: UserCheck,
+              onClick: () => {
+                setActiveNavItem("assigned");
+                setIsMobileTicketListOpen(true);
+              },
+            },
+            {
+              id: "search",
+              label: "جستجو",
+              icon: Search,
+              onClick: () => setIsCommandOpen(true),
+            },
+            {
+              id: "more",
+              label: "بیشتر",
+              icon: MoreHorizontal,
+              onClick: () => {},
+            },
+          ].map((item) => {
+            const Icon = item.icon;
+            const isActive = activeNavItem === item.id;
+            return (
+              <button
+                key={item.id}
+                type="button"
+                onClick={item.onClick}
+                className={cn(
+                  "flex flex-col items-center gap-1 py-2 text-xs",
+                  isActive
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                <Icon className="size-5" />
+                <span>{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </nav>
+    </SidebarProvider>
+  );
+}
diff --git a/blocks/application-shell11.tsx b/blocks/application-shell11.tsx
new file mode 100644
index 0000000..f750e94
--- /dev/null
+++ b/blocks/application-shell11.tsx
@@ -0,0 +1,672 @@
+"use client";
+
+import {
+  Baby,
+  BadgeCheck,
+  Bell,
+  ChevronDown,
+  ChevronRight,
+  Clapperboard,
+  Clock,
+  CreditCard,
+  Download,
+  Film,
+  Flag,
+  HelpCircle,
+  History,
+  Home,
+  ListVideo,
+  LogOut,
+  type LucideIcon,
+  Menu,
+  MessageSquare,
+  Music,
+  Music2,
+  PlaySquare,
+  Radio,
+  Search,
+  Settings,
+  ShoppingBag,
+  Sparkles,
+  ThumbsUp,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { Kbd } from "@/components/ui/kbd";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+function getInitials(name: string) {
+  return (
+    name
+      .split(" ")
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "U"
+  );
+}
+
+const data = {
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
+  },
+  navPrimary: [
+    { title: "خانه", url: "#", icon: Home, isActive: true },
+    { title: "ویدیوهای کوتاه", url: "#", icon: Clapperboard },
+    { title: "اشتراک‌ها", url: "#", icon: PlaySquare },
+    { title: "شما", url: "#", icon: History },
+  ],
+  subscriptions: [
+    { name: "Theo - t3.gg", avatar: "/avatars/theo.jpg", isLive: true },
+    { name: "Fireship", avatar: "/avatars/fireship.jpg", hasNew: true },
+    { name: "Web Dev Simplified", avatar: "/avatars/webdev.jpg" },
+    { name: "Traversy Media", avatar: "/avatars/traversy.jpg", hasNew: true },
+    { name: "The Primeagen", avatar: "/avatars/prime.jpg" },
+    { name: "Jack Herrington", avatar: "/avatars/jack.jpg", hasNew: true },
+    { name: "Coding in Public", avatar: "/avatars/cip.jpg" },
+  ],
+  navYou: [
+    { title: "تاریخچه", url: "#", icon: History },
+    { title: "لیست‌های پخش", url: "#", icon: ListVideo },
+    { title: "تماشا بعداً", url: "#", icon: Clock },
+    { title: "ویدیوهای پسندیده", url: "#", icon: ThumbsUp },
+    { title: "ویدیوهای شما", url: "#", icon: PlaySquare },
+    { title: "دانلودها", url: "#", icon: Download },
+  ],
+  navExplore: [
+    { title: "خرید", url: "#", icon: ShoppingBag },
+    { title: "موسیقی", url: "#", icon: Music },
+    { title: "فیلم", url: "#", icon: Film },
+  ],
+  navMoreFrom: [
+    { title: "استودیوی ری یو آی", url: "#", icon: Radio },
+    { title: "موسیقی ری یو آی", url: "#", icon: Music2 },
+    { title: "ری یو آی کودکان", url: "#", icon: Baby },
+  ],
+  navFooter: [
+    { title: "تنظیمات", url: "#", icon: Settings },
+    { title: "تاریخچه گزارش", url: "#", icon: Flag },
+    { title: "راهنما", url: "#", icon: HelpCircle },
+    { title: "ارسال بازخورد", url: "#", icon: MessageSquare },
+  ],
+};
+
+// Primary nav (Home, Shorts, Subscriptions, You)
+function NavPrimary({
+  items,
+}: {
+  items: { title: string; url: string; icon: LucideIcon; isActive?: boolean }[];
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.title}>
+            <SidebarMenuButton
+              asChild
+              isActive={item.isActive}
+              tooltip={item.title}
+            >
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.title}</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
+
+// Subscriptions section with channel avatars
+function NavSubscriptions({
+  subscriptions,
+}: {
+  subscriptions: {
+    name: string;
+    avatar: string;
+    isLive?: boolean;
+    hasNew?: boolean;
+  }[];
+}) {
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <Collapsible defaultOpen>
+        <SidebarGroupLabel asChild>
+          <CollapsibleTrigger className="group/collapsible flex w-full items-center text-start">
+            اشتراک‌ها
+            <ChevronRight className="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarMenu>
+            {subscriptions.map((channel) => (
+              <SidebarMenuItem key={channel.name}>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <Avatar className="size-6 ring-2 ring-muted">
+                      <AvatarImage src={channel.avatar} />
+                      <AvatarFallback className="bg-primary text-xs text-primary-foreground">
+                        {channel.name[0]}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="truncate">{channel.name}</span>
+                    {channel.isLive && (
+                      <Radio className="ms-auto size-4 text-red-500" />
+                    )}
+                    {channel.hasNew && !channel.isLive && (
+                      <span className="ms-auto size-2 rounded-full bg-blue-500" />
+                    )}
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+              <SidebarMenuButton>
+                <ChevronDown className="size-4" />
+                <span>نمایش بیشتر</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarGroup>
+  );
+}
+
+// "You" section - History, Playlists, etc.
+function NavYou({
+  items,
+}: {
+  items: { title: string; url: string; icon: LucideIcon }[];
+}) {
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <Collapsible defaultOpen>
+        <SidebarGroupLabel asChild>
+          <CollapsibleTrigger className="group/collapsible flex w-full items-center text-start">
+            شما
+            <ChevronRight className="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarMenu>
+            {items.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url}>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+              <SidebarMenuButton>
+                <ChevronDown className="size-4" />
+                <span>نمایش بیشتر</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarGroup>
+  );
+}
+
+// Explore section - Shopping, Music, Movies
+function NavExplore({
+  items,
+}: {
+  items: { title: string; url: string; icon: LucideIcon }[];
+}) {
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <Collapsible defaultOpen>
+        <SidebarGroupLabel asChild>
+          <CollapsibleTrigger className="group/collapsible flex w-full items-center text-start">
+            کاوش
+            <ChevronRight className="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarMenu>
+            {items.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url}>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+            <SidebarMenuItem>
+              <SidebarMenuButton>
+                <ChevronDown className="size-4" />
+                <span>نمایش بیشتر</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarGroup>
+  );
+}
+
+// More from Zerotube section
+function NavMoreFrom({
+  items,
+}: {
+  items: { title: string; url: string; icon: LucideIcon }[];
+}) {
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>بیشتر از ری یو آی</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.title}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.title}</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
+
+// Footer nav - Settings, Help, etc.
+function NavFooter({
+  items,
+}: {
+  items: { title: string; url: string; icon: LucideIcon }[];
+}) {
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.title}>
+            <SidebarMenuButton asChild size="sm">
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.title}</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
+
+// Footer links at the very bottom
+function FooterLinks() {
+  return (
+    <div className="px-4 py-4 text-start text-xs text-muted-foreground">
+      <div className="flex flex-wrap gap-x-2 gap-y-1">
+        <a href="#" className="hover:underline">
+          درباره
+        </a>
+        <a href="#" className="hover:underline">
+          مطبوعات
+        </a>
+        <a href="#" className="hover:underline">
+          حق نشر
+        </a>
+        <a href="#" className="hover:underline">
+          تماس با ما
+        </a>
+        <a href="#" className="hover:underline">
+          سازندگان
+        </a>
+        <a href="#" className="hover:underline">
+          تبلیغات
+        </a>
+        <a href="#" className="hover:underline">
+          توسعه‌دهندگان
+        </a>
+      </div>
+      <div className="mt-2 flex flex-wrap gap-x-2 gap-y-1">
+        <a href="#" className="hover:underline">
+          قوانین
+        </a>
+        <a href="#" className="hover:underline">
+          حریم خصوصی
+        </a>
+        <a href="#" className="hover:underline">
+          سیاست و ایمنی
+        </a>
+      </div>
+      <p className="mt-3">© ۱۴۰۴ ری یو آی</p>
+    </div>
+  );
+}
+
+function SiteHeader() {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <header className="fixed top-0 z-50 hidden w-full items-center border-b bg-background md:flex">
+      {/* Left: Menu + Logo */}
+      <div className="flex h-(--header-height) w-(--sidebar-width-icon) shrink-0 items-center justify-center">
+        <Button
+          className="size-9"
+          variant="ghost"
+          size="icon"
+          onClick={toggleSidebar}
+          aria-label="منو"
+        >
+          <Menu className="size-5" />
+        </Button>
+      </div>
+      <div className="flex h-(--header-height) items-center pe-4">
+        <a href="#" className="flex items-center gap-2">
+          <div className="flex size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+              alt="شاد‌سی‌ان بلاکس"
+              className="size-5 invert dark:invert-0"
+            />
+          </div>
+          <span className="hidden text-lg font-semibold sm:block">
+            ری یو آی
+          </span>
+        </a>
+      </div>
+
+      {/* Center: Search Bar */}
+      <div className="flex flex-1 justify-center px-4">
+        <InputGroup className="h-10 max-w-xl rounded-full">
+          <InputGroupAddon>
+            <Search className="text-muted-foreground" />
+          </InputGroupAddon>
+          <InputGroupInput placeholder="جستجو" />
+          <InputGroupAddon align="inline-end">
+            <Kbd>⌘K</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+      </div>
+
+      {/* Right: Avatar */}
+      <div className="flex h-(--header-height) items-center gap-1 px-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="flex h-auto items-center gap-2 px-2 py-1"
+            >
+              <Avatar className="size-8">
+                <AvatarImage src={data.user.avatar} alt={data.user.name} />
+                <AvatarFallback>{getInitials(data.user.name)}</AvatarFallback>
+              </Avatar>
+              <span className="hidden font-medium sm:inline">
+                {data.user.name}
+              </span>
+              <ChevronDown className="size-3 text-muted-foreground" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56" align="start">
+            <DropdownMenuLabel className="font-normal">
+              <div className="flex flex-col space-y-1 text-start">
+                <p className="text-sm font-medium">{data.user.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  {data.user.email}
+                </p>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles className="me-2 size-4" />
+                ارتقا به نسخه حرفه‌ای
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck className="me-2 size-4" />
+                حساب کاربری
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard className="me-2 size-4" />
+                صورتحساب
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell className="me-2 size-4" />
+                اعلان‌ها
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      side="right"
+      collapsible="icon"
+      className="top-(--header-height) hidden h-[calc(100svh-var(--header-height))]! md:flex"
+      {...props}
+    >
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          <NavPrimary items={data.navPrimary} />
+          <NavSubscriptions subscriptions={data.subscriptions} />
+          <NavYou items={data.navYou} />
+          <NavExplore items={data.navExplore} />
+          <NavMoreFrom items={data.navMoreFrom} />
+          <NavFooter items={data.navFooter} />
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter className="group-data-[collapsible=icon]:hidden">
+        <FooterLinks />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+export const iframeHeight = "800px";
+
+export const description = "سایدبار با هدر و فرم جستجو.";
+
+function MobileHeader() {
+  return (
+    <header className="sticky top-0 z-50 flex h-14 items-center justify-between border-b bg-background px-4 md:hidden">
+      <a href="#" className="flex items-center gap-2">
+        <div className="flex size-8 items-center justify-center rounded-sm bg-primary">
+          <img
+            src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+            alt="شاد‌سی‌ان بلاکس"
+            className="size-5 invert dark:invert-0"
+          />
+        </div>
+        <span className="text-lg font-semibold">ری یو آی</span>
+      </a>
+      <div className="flex items-center gap-1">
+        <Button variant="ghost" size="icon" className="size-9" aria-label="جستجو">
+          <Search className="size-5" />
+          <span className="sr-only">جستجو</span>
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-9">
+              <Avatar className="size-8">
+                <AvatarImage src={data.user.avatar} alt={data.user.name} />
+                <AvatarFallback>{getInitials(data.user.name)}</AvatarFallback>
+              </Avatar>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56" align="start">
+            <DropdownMenuLabel className="font-normal">
+              <div className="flex flex-col space-y-1 text-start">
+                <p className="text-sm font-medium">{data.user.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  {data.user.email}
+                </p>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles className="me-2 size-4" />
+                ارتقا به نسخه حرفه‌ای
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck className="me-2 size-4" />
+                حساب کاربری
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard className="me-2 size-4" />
+                صورتحساب
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell className="me-2 size-4" />
+                اعلان‌ها
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}
+
+function MobileBottomNav() {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden">
+      <div className="grid grid-cols-4">
+        {data.navPrimary.map((item) => {
+          const Icon = item.icon;
+          return (
+            <button
+              key={item.title}
+              type="button"
+              className={cn(
+                "flex flex-col items-center gap-1 py-2 text-xs transition-colors",
+                item.isActive
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <Icon className="size-5" />
+              <span className="sr-only">{item.title}</span>
+              <span aria-hidden="true">{item.title}</span>
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
+
+function ContentGrid() {
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-4">
+      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+      </div>
+      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+      </div>
+      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+      </div>
+    </div>
+  );
+}
+
+export function ApplicationShell11() {
+  return (
+    <div className="w-full [--header-height:calc(--spacing(14))]">
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className="flex flex-col"
+        style={{ "--sidebar-width-icon": "3rem" } as React.CSSProperties}
+      >
+        {/* Desktop layout */}
+        <SiteHeader />
+        <div className="hidden flex-1 pt-(--header-height) md:flex">
+          <AppSidebar />
+          <SidebarInset>
+            <ContentGrid />
+          </SidebarInset>
+        </div>
+
+        {/* Mobile layout */}
+        <div className="flex flex-col md:hidden">
+          <MobileHeader />
+          <div className="pb-16">
+            <ContentGrid />
+          </div>
+          <MobileBottomNav />
+        </div>
+      </SidebarProvider>
+    </div>
+  );
+}
diff --git a/blocks/application-shell12.tsx b/blocks/application-shell12.tsx
new file mode 100644
index 0000000..35b6381
--- /dev/null
+++ b/blocks/application-shell12.tsx
@@ -0,0 +1,1118 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import {
+  Bell,
+  BookOpen,
+  Calendar,
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+  FileText,
+  HelpCircle,
+  Home,
+  type LucideIcon,
+  MessageSquare,
+  PanelLeft,
+  PanelLeftClose,
+  Plus,
+  Settings,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const SIDEBAR_WIDTH = 304;
+const SIDEBAR_RAIL_WIDTH = 64;
+const SIDEBAR_PANEL_WIDTH = SIDEBAR_WIDTH - SIDEBAR_RAIL_WIDTH;
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+interface SidebarContextValue {
+  isPanelOpen: boolean;
+  setPanelOpen: (open: boolean) => void;
+  togglePanel: () => void;
+  panelState: "expanded" | "collapsed";
+}
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}
+
+interface SidebarProviderProps {
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  children,
+}: SidebarProviderProps) {
+  const [_isPanelOpen, _setIsPanelOpen] = React.useState(defaultOpen);
+  const isPanelOpen = _isPanelOpen;
+
+  const setPanelOpen = React.useCallback((open: boolean) => {
+    _setIsPanelOpen(open);
+  }, []);
+
+  const togglePanel = React.useCallback(() => {
+    setPanelOpen(!isPanelOpen);
+  }, [isPanelOpen, setPanelOpen]);
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        togglePanel();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [togglePanel]);
+
+  const panelState = isPanelOpen ? "expanded" : "collapsed";
+
+  const value = React.useMemo<SidebarContextValue>(
+    () => ({
+      isPanelOpen,
+      setPanelOpen,
+      togglePanel,
+      panelState,
+    }),
+    [isPanelOpen, setPanelOpen, togglePanel, panelState],
+  );
+
+  return (
+    <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>
+  );
+}
+
+interface NavItemConfig {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  path: string;
+}
+
+interface NavSectionConfig {
+  id: string;
+  label?: string;
+  items: NavItemConfig[];
+}
+
+interface NavModuleConfig {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  defaultPath: string;
+  sections: NavSectionConfig[];
+}
+
+interface RailIconConfig {
+  moduleId: string;
+  label: string;
+  icon: LucideIcon;
+  defaultPath: string;
+}
+
+const data = {
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
+  },
+  organization: {
+    name: "شرکت آکمه",
+    logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+  },
+  railIcons: [
+    { moduleId: "home", label: "خانه", icon: Home, defaultPath: "#" },
+    {
+      moduleId: "projects",
+      label: "پروژه‌ها",
+      icon: FileText,
+      defaultPath: "#",
+    },
+    {
+      moduleId: "calendar",
+      label: "تقویم",
+      icon: Calendar,
+      defaultPath: "#",
+    },
+    { moduleId: "team", label: "تیم", icon: Users, defaultPath: "#" },
+  ] as RailIconConfig[],
+  modules: [
+    {
+      id: "home",
+      label: "خانه",
+      icon: Home,
+      defaultPath: "#",
+      sections: [
+        {
+          id: "main",
+          items: [
+            { id: "overview", label: "نمای کلی", icon: Home, path: "#" },
+            { id: "documents", label: "اسناد", icon: FileText, path: "#" },
+            {
+              id: "messages",
+              label: "پیام‌ها",
+              icon: MessageSquare,
+              path: "#",
+            },
+          ],
+        },
+        {
+          id: "library",
+          label: "کتابخانه",
+          items: [
+            { id: "guides", label: "راهنماها", icon: BookOpen, path: "#" },
+            { id: "resources", label: "منابع", icon: FileText, path: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      id: "projects",
+      label: "پروژه‌ها",
+      icon: FileText,
+      defaultPath: "#",
+      sections: [
+        {
+          id: "main",
+          items: [
+            {
+              id: "all-projects",
+              label: "همه پروژه‌ها",
+              icon: FileText,
+              path: "#",
+            },
+            { id: "recent", label: "اخیر", icon: Calendar, path: "#" },
+            { id: "starred", label: "ستاره‌دار", icon: BookOpen, path: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      id: "calendar",
+      label: "تقویم",
+      icon: Calendar,
+      defaultPath: "#",
+      sections: [
+        {
+          id: "main",
+          items: [
+            { id: "schedule", label: "برنامه", icon: Calendar, path: "#" },
+            { id: "events", label: "رویدادها", icon: Bell, path: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      id: "team",
+      label: "تیم",
+      icon: Users,
+      defaultPath: "#",
+      sections: [
+        {
+          id: "main",
+          items: [
+            { id: "members", label: "اعضا", icon: Users, path: "#" },
+            {
+              id: "activity",
+              label: "فعالیت",
+              icon: MessageSquare,
+              path: "#",
+            },
+          ],
+        },
+      ],
+    },
+  ] as NavModuleConfig[],
+  utilities: [
+    { id: "help", label: "راهنما و پشتیبانی", icon: HelpCircle, path: "#" },
+  ] as NavItemConfig[],
+};
+
+function getInitials(name: string) {
+  return (
+    name
+      .split(" ")
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "U"
+  );
+}
+
+const SidebarTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof Button> & { showTooltip?: boolean }
+>(({ className, onClick, showTooltip = true, ...props }, ref) => {
+  const { isPanelOpen, togglePanel } = useSidebar();
+
+  const button = (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      className={cn("size-8", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        togglePanel();
+      }}
+      aria-label={isPanelOpen ? "بستن سایدبار" : "باز کردن سایدبار"}
+      aria-expanded={isPanelOpen}
+      {...props}
+    >
+      {isPanelOpen ? (
+        <PanelLeftClose className="size-4" />
+      ) : (
+        <PanelLeft className="size-4" />
+      )}
+    </Button>
+  );
+
+  if (!showTooltip) {
+    return button;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="left" sideOffset={8}>
+        <span>{isPanelOpen ? "بستن" : "باز کردن"}</span>
+        <kbd className="ms-2 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+          {"\u2318"}B
+        </kbd>
+      </TooltipContent>
+    </Tooltip>
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+interface SidebarRailProps {
+  railIcons: RailIconConfig[];
+  activeModuleId: string;
+  onModuleChange: (moduleId: string) => void;
+}
+
+function SidebarRail({
+  railIcons,
+  activeModuleId,
+  onModuleChange,
+}: SidebarRailProps) {
+  return (
+    <div className="flex h-full w-16 flex-col items-center justify-between">
+      <div className="flex flex-col items-center gap-3 p-2">
+        <div className="pt-2 pb-1">
+          <a
+            href="#"
+            className="flex items-center justify-center rounded-lg transition-opacity outline-none hover:opacity-80 focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <div className="flex size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                alt="شاد‌سی‌ان بلاکس"
+                className="size-5 invert dark:invert-0"
+              />
+            </div>
+          </a>
+        </div>
+
+        <div className="flex flex-col items-center gap-3">
+          {railIcons.map((item) => {
+            const isActive = item.moduleId === activeModuleId;
+            const Icon = item.icon;
+            return (
+              <Tooltip key={item.moduleId}>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={() => onModuleChange(item.moduleId)}
+                    aria-label={item.label}
+                    className={cn(
+                      "relative flex size-11 items-center justify-center rounded-lg transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      isActive
+                        ? "bg-background text-foreground"
+                        : "text-muted-foreground hover:bg-accent active:bg-accent/80",
+                    )}
+                  >
+                    <Icon className="size-5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="left" sideOffset={8}>
+                  {item.label}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-3 py-3">
+        <SidebarTrigger className="size-11 text-muted-foreground hover:bg-accent active:bg-accent/80" />
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex size-11 items-center justify-center">
+              <UserMenu />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="left" sideOffset={8}>
+            حساب کاربری
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
+
+function UserMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="flex size-11 items-center justify-center rounded-lg hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring active:bg-accent/80"
+          aria-label="حساب کاربری"
+        >
+          <Avatar className="size-7">
+            <AvatarImage src={data.user.avatar} alt={data.user.name} />
+            <AvatarFallback className="text-xs">
+              {getInitials(data.user.name)}
+            </AvatarFallback>
+          </Avatar>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" side="left" className="w-56">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1 text-start">
+            <p className="text-sm font-medium">{data.user.name}</p>
+            <p className="text-xs text-muted-foreground">{data.user.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>حساب کاربری</DropdownMenuItem>
+        <DropdownMenuItem>صورتحساب</DropdownMenuItem>
+        <DropdownMenuItem>اعلان‌ها</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>خروج</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function OrganizationSwitcher() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 py-1.5 text-start hover:bg-accent">
+          <span className="flex-1 truncate text-sm font-medium text-foreground">
+            {data.organization.name}
+          </span>
+          <ChevronDown className="size-4 text-muted-foreground" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuLabel>سازمان‌ها</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <span>{data.organization.name}</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Plus className="me-2 size-4" />
+          ایجاد سازمان
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function NotificationBell() {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="ms-auto size-8 text-muted-foreground hover:bg-accent"
+      aria-label="اعلان‌ها"
+    >
+      <Bell className="size-4" />
+    </Button>
+  );
+}
+
+function NewActionButton() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="w-full justify-start gap-2 bg-primary text-primary-foreground hover:bg-primary/90">
+          <Plus className="size-4" />
+          جدید
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-48">
+        <DropdownMenuItem>سند جدید</DropdownMenuItem>
+        <DropdownMenuItem>پروژه جدید</DropdownMenuItem>
+        <DropdownMenuItem>رویداد جدید</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface SidebarPanelProps {
+  module: NavModuleConfig;
+  utilities: NavItemConfig[];
+}
+
+function isItemActive(_pathname: string, itemPath: string): boolean {
+  return itemPath === "#" && _pathname === "#";
+}
+
+function SidebarPanel({ module, utilities }: SidebarPanelProps) {
+  const [setupOpen, setSetupOpen] = React.useState(false);
+  const prefersReducedMotion = useReducedMotion();
+  const pathname = "#";
+
+  const primarySections = module.sections.filter(
+    (s) => s.id !== "studio-setup",
+  );
+  const setupSection = module.sections.find((s) => s.id === "studio-setup");
+
+  const isSetupActive =
+    setupSection?.items.some((item) => isItemActive(pathname, item.path)) ??
+    false;
+
+  React.useEffect(() => {
+    if (isSetupActive) {
+      setSetupOpen(true);
+    }
+  }, [isSetupActive]);
+
+  return (
+    <div
+      className="relative flex h-screen flex-col overflow-hidden rounded-s-xl bg-[var(--shell-panel)]"
+      style={{ width: `${SIDEBAR_PANEL_WIDTH}px` }}
+    >
+      <div
+        key={module.id}
+        className="relative flex min-h-0 flex-1 animate-in flex-col text-muted-foreground duration-200 fade-in slide-in-from-start-2"
+      >
+        <div className="shrink-0 p-3">
+          <div className="mb-2 flex items-center gap-2">
+            <OrganizationSwitcher />
+            <NotificationBell />
+          </div>
+
+          <div>
+            <NewActionButton />
+          </div>
+        </div>
+
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="flex flex-col gap-5 px-3 pb-3">
+            {primarySections.map((section) => (
+              <div key={section.id}>
+                {section.label && (
+                  <div className="mb-2 ps-3 text-sm text-muted-foreground">
+                    {section.label}
+                  </div>
+                )}
+                <nav className="flex flex-col gap-0.5">
+                  {section.items.map((item, index) => (
+                    <NavItem
+                      key={item.id}
+                      item={item}
+                      isActive={index === 0 && section.id === "main"}
+                    />
+                  ))}
+                </nav>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+
+        {(setupSection && setupSection.items.length > 0) ||
+          utilities.length > 0 ? (
+          <div className="shrink-0 px-3 pt-1 pb-3">
+            {setupSection && setupSection.items.length > 0 && (
+              <Collapsible
+                open={setupOpen}
+                onOpenChange={setSetupOpen}
+                className="group/setup"
+              >
+                <div
+                  className={cn(
+                    "rounded-lg p-2",
+                    setupOpen && "bg-background/20",
+                  )}
+                >
+                  <CollapsibleTrigger
+                    className={cn(
+                      "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                      setupOpen && "hidden",
+                      isSetupActive
+                        ? "bg-primary/10 font-medium text-primary"
+                        : "text-muted-foreground hover:bg-accent/50",
+                    )}
+                  >
+                    <Settings
+                      className={cn(
+                        "size-4",
+                        isSetupActive
+                          ? "text-primary"
+                          : "text-muted-foreground",
+                      )}
+                    />
+                    <span className="font-medium">پیکربندی</span>
+                    <ChevronRight
+                      className={cn(
+                        "ms-auto size-4 rtl:rotate-180",
+                        isSetupActive
+                          ? "text-primary/60"
+                          : "text-muted-foreground/60",
+                      )}
+                    />
+                  </CollapsibleTrigger>
+
+                  <AnimatePresence initial={false}>
+                    {setupOpen && (
+                      <motion.nav
+                        initial={
+                          prefersReducedMotion
+                            ? false
+                            : { height: 0, opacity: 0 }
+                        }
+                        animate={{
+                          height: "auto",
+                          opacity: 1,
+                          transition: {
+                            height: prefersReducedMotion
+                              ? { duration: 0 }
+                              : {
+                                type: "spring",
+                                stiffness: 500,
+                                damping: 40,
+                                mass: 1,
+                              },
+                            opacity: prefersReducedMotion
+                              ? { duration: 0 }
+                              : { duration: 0.2 },
+                          },
+                        }}
+                        exit={{
+                          height: 0,
+                          opacity: 0,
+                          transition: {
+                            height: prefersReducedMotion
+                              ? { duration: 0 }
+                              : {
+                                type: "spring",
+                                stiffness: 500,
+                                damping: 40,
+                                mass: 1,
+                              },
+                            opacity: prefersReducedMotion
+                              ? { duration: 0 }
+                              : { duration: 0.15 },
+                          },
+                        }}
+                        className="relative flex max-h-[40vh] flex-col gap-0.5 overflow-y-auto pe-6"
+                      >
+                        <CollapsibleTrigger
+                          className="absolute top-0 end-0 p-1 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
+                          aria-label="بستن پیکربندی"
+                        >
+                          <ChevronDown className="size-4" />
+                        </CollapsibleTrigger>
+                        {setupSection.items.map((item, i) => (
+                          <motion.div
+                            key={item.id}
+                            initial={
+                              prefersReducedMotion
+                                ? false
+                                : { opacity: 0, x: 8 }
+                            }
+                            animate={{
+                              opacity: 1,
+                              x: 0,
+                              transition: {
+                                delay: prefersReducedMotion ? 0 : i * 0.03,
+                                duration: prefersReducedMotion ? 0 : 0.2,
+                                ease: [0.25, 0.1, 0.25, 1],
+                              },
+                            }}
+                            exit={{
+                              opacity: 0,
+                              transition: {
+                                duration: prefersReducedMotion ? 0 : 0.1,
+                              },
+                            }}
+                          >
+                            <NavItem
+                              item={item}
+                              isActive={isItemActive(pathname, item.path)}
+                            />
+                          </motion.div>
+                        ))}
+                      </motion.nav>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </Collapsible>
+            )}
+
+            {utilities.length > 0 && (
+              <div className="mt-3 border-t border-border pt-3">
+                <nav className="flex flex-col gap-0.5">
+                  {utilities.map((item) => (
+                    <NavItem
+                      key={item.id}
+                      item={item}
+                      isActive={isItemActive(pathname, item.path)}
+                    />
+                  ))}
+                </nav>
+              </div>
+            )}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function NavItem({
+  item,
+  isActive,
+}: {
+  item: NavItemConfig;
+  isActive: boolean;
+}) {
+  const isExternal = item.path.startsWith("http");
+  const Icon = item.icon;
+
+  return (
+    <a
+      href={item.path}
+      target={isExternal ? "_blank" : undefined}
+      rel={isExternal ? "noopener noreferrer" : undefined}
+      className={cn(
+        "group flex h-8 items-center justify-between rounded-lg p-2 text-sm leading-none transition-[background-color,color,font-weight] duration-75",
+        isActive
+          ? "bg-primary/10 font-medium text-primary hover:bg-primary/15 active:bg-primary/20"
+          : "text-foreground hover:bg-accent active:bg-accent/80",
+      )}
+    >
+      <span className="flex min-w-0 items-center gap-2.5">
+        <Icon
+          className={cn(
+            "size-4 shrink-0",
+            isActive ? "text-primary" : "text-muted-foreground",
+          )}
+        />
+        <span className="truncate">{item.label}</span>
+      </span>
+      {isExternal && (
+        <ExternalLink className="size-3.5 text-muted-foreground transition-transform duration-75 group-hover:translate-x-px group-hover:-translate-y-px rtl:group-hover:-translate-x-px" />
+      )}
+    </a>
+  );
+}
+
+function Area({
+  visible,
+  direction = "right",
+  children,
+}: {
+  visible: boolean;
+  direction?: "left" | "right";
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "top-0 left-0 flex size-full flex-col transition-[opacity,transform] duration-300",
+        visible
+          ? "relative opacity-100"
+          : cn(
+            "pointer-events-none absolute opacity-0",
+            direction === "left" ? "-translate-x-full" : "translate-x-full",
+          ),
+      )}
+      aria-hidden={!visible}
+      inert={!visible ? true : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+function ContentArea({ activeModule }: { activeModule: NavModuleConfig }) {
+  const { isPanelOpen } = useSidebar();
+  const showCornerFills = isPanelOpen;
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col bg-background md:bg-[var(--shell-chrome)] md:py-2 md:pe-2">
+      <div className="relative flex min-h-0 flex-1 flex-col">
+        <div
+          className={cn(
+            "absolute top-0 -start-2 z-0 hidden h-3 w-5 bg-[var(--shell-panel)] transition-opacity duration-300 md:block",
+            showCornerFills ? "opacity-100" : "opacity-0",
+          )}
+        />
+        <div
+          className={cn(
+            "absolute bottom-0 -start-2 z-0 hidden h-3 w-5 bg-[var(--shell-panel)] transition-opacity duration-300 md:block",
+            showCornerFills ? "opacity-100" : "opacity-0",
+          )}
+        />
+        <main className="z-10 flex min-h-0 flex-1 flex-col overflow-hidden bg-background pb-20 md:rounded-xl md:pb-0">
+          <div className="flex flex-1 flex-col gap-4 p-4 md:p-0">
+            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 p-6 pb-28 md:min-h-min md:pb-6">
+              <div className="mx-auto max-w-4xl space-y-6">
+                <div>
+                  <h1 className="text-xl font-bold tracking-tight text-foreground">
+                    {activeModule.label}
+                  </h1>
+                  <p className="text-muted-foreground">
+                    به بخش {activeModule.label} خوش آمدید
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+interface DubSidebarProps {
+  railIcons: RailIconConfig[];
+  activeModule: NavModuleConfig | null;
+  activeModuleId: string;
+  utilities: NavItemConfig[];
+  onModuleChange: (moduleId: string) => void;
+}
+
+function DubSidebar({
+  railIcons,
+  activeModule,
+  activeModuleId,
+  utilities,
+  onModuleChange,
+}: DubSidebarProps) {
+  const { isPanelOpen } = useSidebar();
+
+  const hasContent = activeModule !== null;
+  const showPanel = hasContent && isPanelOpen;
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <aside
+        className={cn(
+          "sticky top-0 z-40 hidden h-screen transition-[width] duration-300 md:block",
+        )}
+        style={
+          {
+            width: showPanel ? SIDEBAR_WIDTH : SIDEBAR_RAIL_WIDTH,
+            "--sidebar-width": `${showPanel ? SIDEBAR_WIDTH : SIDEBAR_RAIL_WIDTH}px`,
+            "--sidebar-rail-width": `${SIDEBAR_RAIL_WIDTH}px`,
+            "--sidebar-panel-width": `${SIDEBAR_PANEL_WIDTH}px`,
+          } as React.CSSProperties
+        }
+        data-panel-state={isPanelOpen ? "expanded" : "collapsed"}
+        data-has-content={hasContent}
+      >
+        <nav className="grid size-full grid-cols-[64px_1fr]">
+          <SidebarRail
+            railIcons={railIcons}
+            activeModuleId={activeModuleId}
+            onModuleChange={onModuleChange}
+          />
+          <div
+            className={cn(
+              "relative size-full overflow-hidden py-2 transition-opacity duration-300",
+              !showPanel && "opacity-0",
+            )}
+          >
+            <Area visible={true} direction="left">
+              {activeModule && (
+                <SidebarPanel module={activeModule} utilities={utilities} />
+              )}
+            </Area>
+          </div>
+        </nav>
+      </aside>
+    </TooltipProvider>
+  );
+}
+
+interface MobileNavigationProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  railIcons: RailIconConfig[];
+  activeModule: NavModuleConfig | null;
+  activeModuleId: string;
+  utilities: NavItemConfig[];
+  onModuleChange: (moduleId: string) => void;
+}
+
+function MobileNavigation({
+  open,
+  onOpenChange,
+  railIcons,
+  activeModule,
+  activeModuleId,
+  utilities,
+  onModuleChange,
+}: MobileNavigationProps) {
+  const pathname = "#";
+  const handleItemSelect = () => onOpenChange(false);
+
+  return (
+    <>
+      <Drawer open={open} onOpenChange={onOpenChange}>
+        <DrawerContent dir="rtl" className="text-start md:hidden">
+          <DrawerHeader>
+            <DrawerTitle>{activeModule?.label ?? "پیمایش"}</DrawerTitle>
+          </DrawerHeader>
+          <ScrollArea className="max-h-[70vh] px-4 pb-6">
+            {activeModule ? (
+              <>
+                <div className="flex flex-col gap-6">
+                  {activeModule.sections.map((section) => (
+                    <div key={section.id}>
+                      {section.label && (
+                        <div className="mb-2 ps-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
+                          {section.label}
+                        </div>
+                      )}
+                      <nav className="flex flex-col gap-0.5">
+                        {section.items.map((item, index) => (
+                          <MobileNavItem
+                            key={item.id}
+                            item={item}
+                            isActive={index === 0 && section.id === "main"}
+                            onSelect={handleItemSelect}
+                          />
+                        ))}
+                      </nav>
+                    </div>
+                  ))}
+                </div>
+
+                {utilities.length > 0 && (
+                  <div className="mt-6 border-t border-border pt-3">
+                    <div className="mb-2 ps-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
+                      ابزارها
+                    </div>
+                    <nav className="flex flex-col gap-0.5">
+                      {utilities.map((item) => (
+                        <MobileNavItem
+                          key={item.id}
+                          item={item}
+                          isActive={isItemActive(pathname, item.path)}
+                          onSelect={handleItemSelect}
+                        />
+                      ))}
+                    </nav>
+                  </div>
+                )}
+              </>
+            ) : null}
+          </ScrollArea>
+        </DrawerContent>
+      </Drawer>
+
+      <nav className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur-lg supports-[backdrop-filter]:bg-background/80 md:hidden">
+        <div
+          className="grid"
+          style={{
+            gridTemplateColumns: `repeat(${railIcons.length}, minmax(0, 1fr))`,
+          }}
+        >
+          {railIcons.map((module) => {
+            const Icon = module.icon;
+            const isActive = module.moduleId === activeModuleId;
+            return (
+              <button
+                key={module.moduleId}
+                type="button"
+                onClick={() => {
+                  onModuleChange(module.moduleId);
+                  onOpenChange(true);
+                }}
+                className={cn(
+                  "flex flex-col items-center gap-1 py-3 text-xs",
+                  isActive
+                    ? "text-primary"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+                aria-label={module.label}
+              >
+                <Icon className="size-5" />
+                <span className="sr-only">{module.label}</span>
+                <span aria-hidden="true">{module.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </nav>
+    </>
+  );
+}
+
+function MobileNavItem({
+  item,
+  isActive,
+  onSelect,
+}: {
+  item: NavItemConfig;
+  isActive: boolean;
+  onSelect?: () => void;
+}) {
+  const isExternal = item.path.startsWith("http");
+  const Icon = item.icon;
+
+  return (
+    <a
+      href={item.path}
+      target={isExternal ? "_blank" : undefined}
+      rel={isExternal ? "noopener noreferrer" : undefined}
+      onClick={onSelect}
+      className={cn(
+        "group flex h-8 items-center justify-between rounded-lg p-2 text-sm leading-none transition-[background-color,color,font-weight] duration-75",
+        isActive
+          ? "bg-primary/10 font-medium text-primary hover:bg-primary/15 active:bg-primary/20"
+          : "text-foreground hover:bg-accent active:bg-accent/80",
+      )}
+    >
+      <span className="flex min-w-0 items-center gap-2.5">
+        <Icon
+          className={cn(
+            "size-4 shrink-0",
+            isActive ? "text-primary" : "text-muted-foreground",
+          )}
+        />
+        <span className="truncate">{item.label}</span>
+      </span>
+      {isExternal && (
+        <ExternalLink className="size-3.5 text-muted-foreground transition-transform duration-75 group-hover:translate-x-px group-hover:-translate-y-px rtl:group-hover:-translate-x-px" />
+      )}
+    </a>
+  );
+}
+
+export const iframeHeight = "800px";
+
+export const description =
+  "سایدبار دوطبقه با تعویض سازمان و اعلان‌ها.";
+
+export function ApplicationShell12() {
+  const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
+  const [activeModuleId, setActiveModuleId] = React.useState("home");
+
+  const activeModule = React.useMemo(
+    () => data.modules.find((m) => m.id === activeModuleId) ?? data.modules[0],
+    [activeModuleId],
+  );
+
+  return (
+    <SidebarProvider>
+      <div
+        dir="rtl"
+        lang="fa"
+        className="flex h-screen flex-col overflow-hidden bg-[var(--shell-chrome)]"
+        style={
+          {
+            "--shell-panel":
+              "color-mix(in oklch, var(--background) 94%, var(--foreground))",
+            "--shell-chrome":
+              "color-mix(in oklch, var(--background) 88%, var(--foreground))",
+          } as React.CSSProperties
+        }
+      >
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4 md:hidden">
+          <a href="#" className="flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                alt="شاد‌سی‌ان بلاکس"
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+          </a>
+          <Separator
+            orientation="vertical"
+            className="data-[orientation=vertical]:h-4"
+          />
+          <div className="shrink-0">
+            <OrganizationSwitcher />
+          </div>
+          <div className="ms-auto">
+            <UserMenu />
+          </div>
+        </header>
+
+        <div className="flex min-h-0 flex-1 md:grid md:grid-cols-[min-content_minmax(0,1fr)]">
+          <DubSidebar
+            railIcons={data.railIcons}
+            activeModule={activeModule}
+            activeModuleId={activeModuleId}
+            utilities={data.utilities}
+            onModuleChange={setActiveModuleId}
+          />
+
+          <ContentArea activeModule={activeModule} />
+        </div>
+
+        <MobileNavigation
+          open={isMobilePanelOpen}
+          onOpenChange={setIsMobilePanelOpen}
+          railIcons={data.railIcons}
+          activeModule={activeModule}
+          activeModuleId={activeModuleId}
+          utilities={data.utilities}
+          onModuleChange={setActiveModuleId}
+        />
+      </div>
+    </SidebarProvider>
+  );
+}
diff --git a/blocks/application-shell13.tsx b/blocks/application-shell13.tsx
new file mode 100644
index 0000000..2178de6
--- /dev/null
+++ b/blocks/application-shell13.tsx
@@ -0,0 +1,454 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Bell,
+  Briefcase,
+  ChevronDown,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  Search,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import type { ComponentType, SVGProps } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+};
+
+const data = {
+  brand: {
+    name: "ShadcnBlocks",
+    logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+  },
+  organization: {
+    name: "شرکت آکمه",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+  },
+};
+
+const navGroups: NavGroup[] = [
+  {
+    title: "نمای کلی",
+    items: [
+      {
+        label: "داشبورد",
+        icon: LayoutDashboard,
+        href: "#",
+        isActive: true,
+      },
+      { label: "وظایف", icon: ClipboardList, href: "#" },
+      { label: "نقشه راه", icon: BarChart3, href: "#" },
+    ],
+  },
+  {
+    title: "پروژه‌ها",
+    items: [
+      {
+        label: "پروژه‌های فعال",
+        icon: Briefcase,
+        href: "#",
+        children: [
+          { label: "پروژه آلفا", icon: FileText, href: "#" },
+          { label: "پروژه بتا", icon: FileText, href: "#" },
+          { label: "پروژه گاما", icon: FileText, href: "#" },
+        ],
+      },
+      {
+        label: "بایگانی",
+        icon: Folder,
+        href: "#",
+        children: [
+          { label: "بایگانی ۱۴۰۳", icon: FileText, href: "#" },
+          { label: "بایگانی ۱۴۲", icon: FileText, href: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "تیم",
+    items: [
+      { label: "اعضا", icon: Users, href: "#" },
+      { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+      { label: "تأییدها", icon: BadgeCheck, href: "#" },
+      { label: "بازبینی‌ها", icon: Star, href: "#" },
+    ],
+  },
+  {
+    title: "فضای کار",
+    items: [
+      { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+      { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+    ],
+  },
+];
+
+function getInitials(name: string) {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+function OrganizationSwitcher() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="gap-2 px-2">
+          <span className="flex size-6 shrink-0 items-center justify-center rounded bg-primary">
+            <img
+              src={data.organization.logo}
+              alt={data.organization.name}
+              width={16}
+              height={16}
+              className="size-4 invert dark:invert-0"
+            />
+          </span>
+          <span className="truncate text-sm font-medium text-foreground">
+            {data.organization.name}
+          </span>
+          <ChevronDown className="ms-auto size-4 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuLabel>سازمان‌ها</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <div className="flex items-center gap-2">
+            <span className="flex size-6 items-center justify-center rounded bg-primary">
+              <img
+                src={data.organization.logo}
+                alt={data.organization.name}
+                width={16}
+                height={16}
+                className="size-4 invert dark:invert-0"
+              />
+            </span>
+            <span>{data.organization.name}</span>
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ایجاد سازمان</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+const NavDropdown = ({ group }: { group: NavGroup }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="gap-1">
+          {group.title}
+          <ChevronDown className="size-3" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-48">
+        {group.items.map((item) => {
+          const Icon = item.icon;
+          return (
+            <div key={item.label}>
+              <DropdownMenuItem asChild>
+                <a href={item.href} className="flex items-center gap-2">
+                  <Icon className="size-4" />
+                  {item.label}
+                </a>
+              </DropdownMenuItem>
+              {item.children?.map((child) => {
+                const ChildIcon = child.icon;
+                return (
+                  <DropdownMenuItem key={child.label} asChild className="ps-6">
+                    <a href={child.href} className="flex items-center gap-2">
+                      <ChildIcon className="size-4" />
+                      {child.label}
+                    </a>
+                  </DropdownMenuItem>
+                );
+              })}
+            </div>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+function MobileNav() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          aria-label="باز کردن منو"
+        >
+          <Menu className="size-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" dir="rtl" className="w-72 p-0 text-start">
+        <SheetHeader className="px-4 pt-4">
+          <SheetTitle className="flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={data.brand.logo}
+                alt="شاد‌سی‌ان بلاکس"
+                width={20}
+                height={20}
+                className="size-5 invert dark:invert-0"
+              />
+            </div>
+            {data.brand.name}
+          </SheetTitle>
+        </SheetHeader>
+        <ScrollArea className="min-h-0 flex-1">
+          <nav className="flex flex-col gap-4 px-4 py-4">
+            {navGroups.map((group) => (
+              <div key={group.title}>
+                <div className="mb-2 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                  {group.title}
+                </div>
+                <div className="flex flex-col gap-1">
+                  {group.items.map((item) => {
+                    const Icon = item.icon;
+                    return (
+                      <div key={item.label}>
+                        <a
+                          href={item.href}
+                          className={cn(
+                            "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted",
+                            item.isActive && "bg-muted font-medium",
+                          )}
+                        >
+                          <Icon className="size-4" />
+                          {item.label}
+                        </a>
+                        {item.children?.map((child) => {
+                          const ChildIcon = child.icon;
+                          return (
+                            <a
+                              key={child.label}
+                              href={child.href}
+                              className="flex items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm hover:bg-muted"
+                            >
+                              <ChildIcon className="size-4" />
+                              {child.label}
+                            </a>
+                          );
+                        })}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </nav>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function SearchField({ className }: { className?: string }) {
+  return (
+    <div className={cn("relative", className)}>
+      <Search className="pointer-events-none absolute top-1/2 start-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        type="search"
+        placeholder="جستجو..."
+        className="h-9 w-full ps-8"
+        aria-label="جستجو"
+      />
+    </div>
+  );
+}
+
+function NavUser() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="gap-2 px-2">
+          <Avatar className="size-8">
+            <AvatarImage src={data.user.avatar} alt={data.user.name} />
+            <AvatarFallback className="text-xs">
+              {getInitials(data.user.name)}
+            </AvatarFallback>
+          </Avatar>
+          <span className="hidden text-sm font-medium md:inline">
+            {data.user.name}
+          </span>
+          <ChevronsUpDown className="hidden size-4 md:block" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1 text-start">
+            <p className="text-sm font-medium">{data.user.name}</p>
+            <p className="text-xs text-muted-foreground">{data.user.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <User className="me-2 size-4" />
+          حساب کاربری
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="me-2 size-4" />
+          خروج
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface ApplicationShell13Props {
+  className?: string;
+}
+
+export function ApplicationShell13({ className }: ApplicationShell13Props) {
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("flex min-h-svh flex-col bg-muted/50", className)}
+    >
+      <header className="sticky top-0 z-40 w-full border-b border-border bg-background">
+        <div className="mx-auto grid h-14 w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 px-4 lg:px-6">
+          <div className="flex items-center gap-3">
+            <MobileNav />
+            <a href="#" className="flex items-center gap-2">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={data.brand.logo}
+                  alt="شاد‌سی‌ان بلاکس"
+                  width={20}
+                  height={20}
+                  className="size-5 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <span className="font-semibold">{data.brand.name}</span>
+            </a>
+          </div>
+          <div className="hidden w-full justify-self-center md:block md:max-w-md">
+            <SearchField />
+          </div>
+          <div className="flex items-center gap-2 justify-self-end">
+            <Button variant="ghost" size="icon" aria-label="اعلان‌ها">
+              <Bell className="size-4" />
+            </Button>
+            <NavUser />
+          </div>
+        </div>
+        <div className="border-t border-border md:hidden">
+          <div className="px-4 py-3">
+            <SearchField />
+          </div>
+        </div>
+        <div className="hidden border-t border-border md:block">
+          <div className="mx-auto flex items-center gap-3 overflow-x-auto px-4 py-2 lg:px-6">
+            <nav className="flex items-center gap-1">
+              {navGroups.map((group) => (
+                <NavDropdown key={group.title} group={group} />
+              ))}
+            </nav>
+            <div className="ms-auto max-w-52">
+              <OrganizationSwitcher />
+            </div>
+          </div>
+        </div>
+      </header>
+      <main className="flex-1 px-4 py-6 pb-24 md:pb-6 lg:px-6">
+        <div className="mx-auto max-w-5xl">
+          <div className="min-h-[360px]" />
+        </div>
+      </main>
+      {/* Mobile Bottom Navigation */}
+      <BottomNav />
+    </div>
+  );
+}
+
+const bottomNavItems = [
+  { label: "نمای کلی", icon: LayoutDashboard, href: "#", isActive: true },
+  { label: "پروژه‌ها", icon: Briefcase, href: "#" },
+  { label: "تیم", icon: Users, href: "#" },
+  { label: "فضای کار", icon: Globe2, href: "#" },
+];
+
+function BottomNav() {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur md:hidden">
+      <div className="grid grid-cols-4">
+        {bottomNavItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <a
+              key={item.label}
+              href={item.href}
+              className={cn(
+                "flex flex-col items-center gap-1 py-2 text-xs",
+                item.isActive
+                  ? "text-primary"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <Icon className="size-5" aria-hidden="true" />
+              <span className="sr-only">{item.label}</span>
+              <span aria-hidden="true">{item.label}</span>
+            </a>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
diff --git a/blocks/application-shell14.tsx b/blocks/application-shell14.tsx
new file mode 100644
index 0000000..c171eb0
--- /dev/null
+++ b/blocks/application-shell14.tsx
@@ -0,0 +1,610 @@
+"use client";
+
+import {
+  ArrowDownRight,
+  ArrowLeftRight,
+  ArrowUpRight,
+  BarChart3,
+  Bell,
+  ChevronDown,
+  Copy,
+  Gift,
+  HelpCircle,
+  LayoutGrid,
+  LogOut,
+  type LucideIcon,
+  Menu,
+  Moon,
+  Search,
+  Settings,
+  Star,
+  TrendingUp,
+  Wallet,
+} from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+type NavLink = {
+  label: string;
+  href: string;
+  isActive?: boolean;
+  icon: LucideIcon;
+};
+
+type TokenItem = {
+  name: string;
+  symbol: string;
+  color: string;
+};
+
+type NotificationItem = {
+  title: string;
+  detail: string;
+  time: string;
+  tone: string;
+};
+
+const data = {
+  brand: {
+    name: "NexoChain",
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  wallet: {
+    address: "0x1cf2...9a56",
+    balance: "$460,890.02",
+    status: "متصل",
+  },
+};
+
+const navLinks: NavLink[] = [
+  { label: "نمای کلی", href: "#", isActive: true, icon: LayoutGrid },
+  { label: "بازارها", href: "#", icon: BarChart3 },
+  { label: "معامله", href: "#", icon: ArrowLeftRight },
+  { label: "پاداش‌ها", href: "#", icon: TrendingUp },
+];
+
+const favorites: TokenItem[] = [
+  { name: "Bitcoin", symbol: "BTC", color: "bg-orange-500" },
+  { name: "Ethereum", symbol: "ETH", color: "bg-indigo-500" },
+  { name: "XRP", symbol: "XRP", color: "bg-neutral-900" },
+  { name: "TetherUS", symbol: "IRRT", color: "bg-emerald-500" },
+  { name: "Tron", symbol: "TRX", color: "bg-red-500" },
+  { name: "Solana", symbol: "SOL", color: "bg-violet-500" },
+  { name: "IRRC", symbol: "IRRC", color: "bg-blue-500" },
+  { name: "BNB", symbol: "BNB", color: "bg-yellow-500" },
+  { name: "Avalanche", symbol: "AVAX", color: "bg-rose-500" },
+  { name: "Cardano", symbol: "ADA", color: "bg-sky-500" },
+];
+
+const walletAssets: TokenItem[] = [
+  { name: "Bitcoin", symbol: "BTC", color: "bg-orange-500" },
+  { name: "Ethereum", symbol: "ETH", color: "bg-indigo-500" },
+  { name: "XRP", symbol: "XRP", color: "bg-neutral-900" },
+  { name: "TetherUS", symbol: "IRRT", color: "bg-emerald-500" },
+];
+
+const notifications: NotificationItem[] = [
+  {
+    title: "برای امنیت حساب، احراز دو مرحله‌ای را فعال کنید",
+    detail: "کروم روی macOS، استانبول",
+    time: "۵ دقیقه",
+    tone: "text-rose-500",
+  },
+  {
+    title: "مبادله انجام شد",
+    detail: "۰٫۵ BTC - ۱۲٬۳۵۰ IRRC",
+    time: "اکنون",
+    tone: "text-emerald-500",
+  },
+  {
+    title: "۱۵ IRRC پاداش معاملاتی دریافت کردید",
+    detail: "در انتظار تأیید بلاک",
+    time: "۱ ساعت",
+    tone: "text-emerald-500",
+  },
+  {
+    title: "ورود جدید",
+    detail: "کروم روی macOS، استانبول",
+    time: "۱۰ دقیقه",
+    tone: "text-orange-500",
+  },
+  {
+    title: "تعمیرات برنامه‌ریزی‌شده",
+    detail: "فردا ساعت ۰۳:۰۰ UTC",
+    time: "دیروز",
+    tone: "text-muted-foreground",
+  },
+];
+
+function TokenBadge({ item }: { item: TokenItem }) {
+  return (
+    <span
+      className={cn(
+        "flex size-6 items-center justify-center rounded-full text-[11px] font-semibold text-white",
+        item.color,
+      )}
+    >
+      {item.symbol.slice(0, 1)}
+    </span>
+  );
+}
+
+function HeaderTab({ item }: { item: NavLink }) {
+  return (
+    <a
+      href={item.href}
+      className={cn(
+        "rounded-full px-3 py-1 text-sm",
+        item.isActive
+          ? "bg-accent text-foreground"
+          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+      )}
+    >
+      {item.label}
+    </a>
+  );
+}
+
+function SearchField({ className }: { className?: string }) {
+  return (
+    <div className={cn("relative", className)}>
+      <Search className="pointer-events-none absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        placeholder="جستجوی توکن یا جفت..."
+        className="h-9 w-full rounded-full bg-muted ps-9"
+        aria-label="جستجوی توکن"
+      />
+      <span className="pointer-events-none absolute top-1/2 end-2.5 -translate-y-1/2 rounded-full bg-accent px-2 py-0.5 text-[10px] text-muted-foreground">
+        /
+      </span>
+    </div>
+  );
+}
+
+function WalletMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="gap-2 rounded-full border border-border bg-background px-3"
+        >
+          <span className="flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <Wallet className="size-3.5" />
+          </span>
+          <span className="text-sm font-medium text-foreground">
+            {data.wallet.address}
+          </span>
+          <ChevronDown className="size-3 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-80 p-3 text-start">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <span className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <Wallet className="size-4" />
+            </span>
+            <div>
+              <div className="text-sm font-medium text-foreground">
+                {data.wallet.address}
+              </div>
+              <div className="text-xs text-primary">{data.wallet.status}</div>
+            </div>
+          </div>
+          <Button variant="outline" size="sm" className="h-7 gap-1">
+            <Copy className="size-3" />
+            کپی
+          </Button>
+        </div>
+        <div className="mt-4 rounded-lg border border-border bg-muted px-3 py-2">
+          <div className="text-xs text-muted-foreground">موجودی کل</div>
+          <div className="mt-1 text-xl font-semibold text-foreground">
+            {data.wallet.balance}
+          </div>
+          <Button variant="outline" size="sm" className="mt-2 h-7 gap-1">
+            <span className="flex size-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
+              E
+            </span>
+            ارز دیجیتال
+            <ChevronDown className="size-3" />
+          </Button>
+        </div>
+        <div className="mt-3 flex items-center gap-2">
+          <Button variant="outline" size="sm" className="h-8 gap-1">
+            <ArrowLeftRight className="size-3.5" />
+            مبادله
+          </Button>
+          <Button variant="outline" size="sm" className="h-8 gap-1">
+            <ArrowDownRight className="size-3.5" />
+            خرید
+          </Button>
+          <Button variant="outline" size="sm" className="h-8 gap-1">
+            <ArrowUpRight className="size-3.5" />
+            ارسال
+          </Button>
+        </div>
+        <div className="mt-4 flex items-center justify-between text-xs font-medium text-muted-foreground">
+          <span>دارایی‌های برتر</span>
+          <span className="text-primary">مشاهده همه</span>
+        </div>
+        <div className="mt-2 space-y-2">
+          {walletAssets.map((asset) => (
+            <div
+              key={asset.symbol}
+              className="flex items-center justify-between rounded-md px-2 py-1 text-sm hover:bg-accent/50"
+            >
+              <div className="flex items-center gap-2">
+                <TokenBadge item={asset} />
+                <span>
+                  {asset.name}
+                  <span className="ms-1 text-xs text-muted-foreground">
+                    {asset.symbol}
+                  </span>
+                </span>
+              </div>
+              <span className="text-xs text-muted-foreground">۰٫۰۰۹۵</span>
+            </div>
+          ))}
+        </div>
+        <DropdownMenuSeparator className="my-3" />
+        <DropdownMenuItem className="flex items-center justify-between">
+          <div>
+            <div className="text-sm">تأیید ۲FA</div>
+            <div className="text-xs text-muted-foreground">
+              برای امنیت بیشتر ۲FA را فعال کنید
+            </div>
+          </div>
+          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">
+            تأیید
+          </span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>تنظیمات کیف پول</DropdownMenuItem>
+        <DropdownMenuItem className="text-rose-500">
+          قطع اتصال کیف پول
+        </DropdownMenuItem>
+        <div className="mt-2 text-[11px] text-muted-foreground">
+          نسخه ۱٫۵٫۶۹  قوانین و مقررات
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function FavoritesMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="rounded-full">
+          <Star className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-80 p-3 text-start">
+        <div className="flex items-center justify-between text-sm">
+          <span className="font-medium">علاقه‌مندی‌های من (۴)</span>
+          <button className="text-xs text-muted-foreground">پاک کردن</button>
+        </div>
+        <div className="relative mt-3">
+          <Search className="pointer-events-none absolute top-1/2 start-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="جستجوی توکن..."
+            className="h-8 ps-8 text-sm"
+            aria-label="جستجوی توکن"
+          />
+        </div>
+        <div className="mt-3 max-h-56 space-y-2 overflow-auto pe-1">
+          {favorites.map((token) => (
+            <div
+              key={token.symbol}
+              className="flex items-center justify-between rounded-md px-2 py-1 text-sm hover:bg-accent/50"
+            >
+              <div className="flex items-center gap-2">
+                <TokenBadge item={token} />
+                <span>
+                  {token.name}
+                  <span className="ms-1 text-xs text-muted-foreground">
+                    {token.symbol}
+                  </span>
+                </span>
+              </div>
+              <Star className="size-3 text-amber-400" />
+            </div>
+          ))}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function NotificationsMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="rounded-full">
+          <Bell className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-80 p-3 text-start">
+        <div className="flex items-center justify-between text-sm">
+          <span className="font-medium">اعلان‌ها</span>
+          <button className="text-xs text-primary">علامت‌گذاری همه به‌عنوان خوانده‌شده</button>
+        </div>
+        <div className="mt-3 space-y-2">
+          {notifications.map((item) => (
+            <div
+              key={item.title}
+              className="flex items-start gap-2 rounded-md border border-border px-2 py-2"
+            >
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "mt-1 flex size-7 items-center justify-center rounded-full bg-accent text-xs",
+                  item.tone,
+                )}
+              />
+              <div className="flex-1">
+                <div className="text-sm font-medium text-foreground">
+                  {item.title}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {item.detail}
+                </div>
+              </div>
+              <span className="text-xs text-muted-foreground">{item.time}</span>
+            </div>
+          ))}
+        </div>
+        <button className="mt-3 w-full rounded-md border border-border py-1 text-xs text-muted-foreground">
+          مشاهده همه اعلان‌ها
+        </button>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function UserMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="flex items-center gap-2 rounded-full border border-transparent px-2 py-1 text-sm hover:bg-accent/50">
+          <Avatar className="size-7">
+            <AvatarImage src={data.user.avatar} alt={data.user.name} />
+            <AvatarFallback className="text-xs">
+              {data.user.name
+                .split(" ")
+                .map((part) => part[0])
+                .join("")}
+            </AvatarFallback>
+          </Avatar>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64 p-3 text-start">
+        <div className="flex items-center gap-3">
+          <Avatar className="size-9">
+            <AvatarImage src={data.user.avatar} alt={data.user.name} />
+            <AvatarFallback className="text-xs">
+              {data.user.name
+                .split(" ")
+                .map((part) => part[0])
+                .join("")}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <div className="text-sm font-medium text-foreground">
+              {data.user.name}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {data.user.email}
+            </div>
+          </div>
+        </div>
+        <DropdownMenuSeparator className="my-2" />
+        <DropdownMenuItem className="gap-2">
+          <Moon className="size-4" />
+          حالت تیره
+        </DropdownMenuItem>
+        <DropdownMenuItem className="gap-2">
+          <Settings className="size-4" />
+          تنظیمات حساب
+        </DropdownMenuItem>
+        <DropdownMenuItem className="gap-2">
+          <Wallet className="size-4" />
+          ترجیح‌ها
+        </DropdownMenuItem>
+        <DropdownMenuItem className="gap-2">
+          <HelpCircle className="size-4" />
+          راهنمای کاربران
+        </DropdownMenuItem>
+        <DropdownMenuItem className="gap-2">
+          <Gift className="size-4" />
+          انجمن
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className="my-2" />
+        <DropdownMenuItem className="gap-2 text-rose-500">
+          <LogOut className="size-4" />
+          خروج
+        </DropdownMenuItem>
+        <div className="mt-2 text-[11px] text-muted-foreground">
+          نسخه ۲٫۸٫۶۹  قوانین و مقررات
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function MobileMenu() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          aria-label="باز کردن منو"
+        >
+          <Menu className="size-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" dir="rtl" className="w-72 p-0 text-start">
+        <SheetHeader className="px-4 pt-4">
+          <SheetTitle className="flex items-center gap-2">
+            <span className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <Wallet className="size-4" />
+            </span>
+            {data.brand.name}
+          </SheetTitle>
+        </SheetHeader>
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="flex flex-col gap-2 px-4 py-4">
+            {navLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                className={cn(
+                  "rounded-md px-3 py-2 text-sm",
+                  link.isActive
+                    ? "bg-accent font-medium"
+                    : "text-muted-foreground hover:bg-accent/50",
+                )}
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+          <div className="px-4 pb-4">
+            <WalletMenu />
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function BottomNav() {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur md:hidden">
+      <div className="grid grid-cols-4">
+        {navLinks.map((link) => {
+          const Icon = link.icon;
+          return (
+            <a
+              key={link.label}
+              href={link.href}
+              className={cn(
+                "flex flex-col items-center gap-1 py-2 text-xs",
+                link.isActive
+                  ? "text-primary"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <Icon className="size-5" aria-hidden="true" />
+              <span className="sr-only">{link.label}</span>
+              <span aria-hidden="true">{link.label}</span>
+            </a>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
+
+interface ApplicationShell14Props {
+  className?: string;
+}
+
+export function ApplicationShell14({ className }: ApplicationShell14Props) {
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("min-h-svh bg-background", className)}
+    >
+      <div className="min-h-svh w-full bg-background">
+        <div className="border-b border-border">
+          <div className="mx-auto w-full max-w-7xl px-4">
+            <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 py-2 text-xs text-muted-foreground">
+              <div />
+              <div className="flex flex-wrap items-center justify-center gap-2 text-center">
+                <Gift className="size-3.5 text-primary" />
+                <span>
+                  ۲۵ دلار پاداش خوش‌آمدگویی اولین مبادله را دریافت کنید
+                </span>
+                <button className="text-primary">دریافت کنید</button>
+              </div>
+              <div className="flex justify-end">
+                <button className="text-muted-foreground" aria-label="بستن">
+                  &times;
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="border-b border-border">
+          <div className="mx-auto w-full max-w-7xl px-4">
+            <div className="flex items-center justify-between gap-4 py-3">
+              <div className="flex items-center gap-2 md:gap-3">
+                <MobileMenu />
+                <div className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-primary md:hidden">
+                  <Wallet className="size-4" />
+                </div>
+                <div className="hidden size-9 items-center justify-center rounded-full bg-primary/10 text-primary md:flex">
+                  <Wallet className="size-5" />
+                </div>
+                <nav className="hidden items-center gap-1 md:flex">
+                  {navLinks.map((link) => (
+                    <HeaderTab key={link.label} item={link} />
+                  ))}
+                </nav>
+              </div>
+              <div className="hidden w-full justify-self-center md:block md:max-w-md">
+                <SearchField />
+              </div>
+              <div className="flex items-center gap-1 md:gap-2">
+                <WalletMenu />
+                <div className="hidden md:block">
+                  <FavoritesMenu />
+                </div>
+                <div className="hidden md:block">
+                  <NotificationsMenu />
+                </div>
+                <UserMenu />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="border-b border-border md:hidden">
+          <div className="mx-auto w-full max-w-7xl px-4 py-3">
+            <SearchField />
+          </div>
+        </div>
+        <div className="mx-auto w-full max-w-7xl px-4">
+          <div className="min-h-[360px]" />
+        </div>
+      </div>
+      <BottomNav />
+    </div>
+  );
+}
diff --git a/blocks/application-shell2.tsx b/blocks/application-shell2.tsx
new file mode 100644
index 0000000..211330a
--- /dev/null
+++ b/blocks/application-shell2.tsx
@@ -0,0 +1,422 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface ApplicationShell2Props {
+  className?: string;
+}
+
+export function ApplicationShell2({ className }: ApplicationShell2Props) {
+  return (
+    <SidebarProvider dir="rtl" lang="fa" className={cn(className)}>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 md:hidden">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <a href="#" className="flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={sidebarData.logo.src}
+                alt={sidebarData.logo.alt}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            <span className="font-semibold">{sidebarData.logo.title}</span>
+          </a>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
diff --git a/blocks/application-shell3.tsx b/blocks/application-shell3.tsx
new file mode 100644
index 0000000..4eb0d03
--- /dev/null
+++ b/blocks/application-shell3.tsx
@@ -0,0 +1,444 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronDown,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Desktop navigation dropdown for each group
+const NavDropdown = ({ group }: { group: NavGroup }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="gap-1">
+          {group.title}
+          <ChevronDown className="size-3" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-48">
+        {group.items.map((item) => {
+          const Icon = item.icon;
+          return (
+            <React.Fragment key={item.label}>
+              <DropdownMenuItem asChild>
+                <a href={item.href} className="flex items-center gap-2">
+                  <Icon className="size-4" />
+                  {item.label}
+                </a>
+              </DropdownMenuItem>
+              {item.children?.map((child) => {
+                const ChildIcon = child.icon;
+                return (
+                  <DropdownMenuItem key={child.label} asChild className="ps-6">
+                    <a href={child.href} className="flex items-center gap-2">
+                      <ChildIcon className="size-4" />
+                      {child.label}
+                    </a>
+                  </DropdownMenuItem>
+                );
+              })}
+            </React.Fragment>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+// Mobile navigation sheet
+const MobileNav = () => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          aria-label="باز کردن منو"
+        >
+          <Menu className="size-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" dir="rtl" className="w-72 p-0 text-start">
+        <SheetHeader className="px-4 pt-4">
+          <SheetTitle className="flex items-center gap-2 text-start">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={sidebarData.logo.src}
+                alt={sidebarData.logo.alt}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            {sidebarData.logo.title}
+          </SheetTitle>
+        </SheetHeader>
+        <ScrollArea className="min-h-0 flex-1">
+          <nav className="flex flex-col gap-4 px-4 py-4">
+            {sidebarData.navGroups.map((group) => (
+              <div key={group.title}>
+                <div className="mb-2 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                  {group.title}
+                </div>
+                <div className="flex flex-col gap-1">
+                  {group.items.map((item) => {
+                    const Icon = item.icon;
+                    return (
+                      <React.Fragment key={item.label}>
+                        <a
+                          href={item.href}
+                          className={cn(
+                            "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted",
+                            item.isActive && "bg-muted font-medium",
+                          )}
+                        >
+                          <Icon className="size-4" />
+                          {item.label}
+                        </a>
+                        {item.children?.map((child) => {
+                          const ChildIcon = child.icon;
+                          return (
+                            <a
+                              key={child.label}
+                              href={child.href}
+                              className="flex items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm hover:bg-muted"
+                            >
+                              <ChildIcon className="size-4" />
+                              {child.label}
+                            </a>
+                          );
+                        })}
+                      </React.Fragment>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+            <Separator />
+            <div>
+              <div className="mb-2 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                {sidebarData.footerGroup.title}
+              </div>
+              <div className="flex flex-col gap-1">
+                {sidebarData.footerGroup.items.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <a
+                      key={item.label}
+                      href={item.href}
+                      className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted"
+                    >
+                      <Icon className="size-4" />
+                      {item.label}
+                    </a>
+                  );
+                })}
+              </div>
+            </div>
+          </nav>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+// User dropdown
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="gap-2 px-2">
+          <Avatar className="size-8">
+            <AvatarImage src={user.avatar} alt={user.name} />
+            <AvatarFallback>
+              {user.name
+                .split(" ")
+                .map((n) => n[0])
+                .join("")}
+            </AvatarFallback>
+          </Avatar>
+          <span className="hidden text-sm font-medium md:inline">
+            {user.name}
+          </span>
+          <ChevronsUpDown className="hidden size-4 md:block" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1 text-start">
+            <p className="text-sm font-medium">{user.name}</p>
+            <p className="text-xs text-muted-foreground">{user.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <User className="me-2 size-4" />
+          حساب کاربری
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="me-2 size-4" />
+          خروج
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+interface ApplicationShell3Props {
+  className?: string;
+}
+
+export function ApplicationShell3({ className }: ApplicationShell3Props) {
+  return (
+    <div dir="rtl" lang="fa" className={cn("flex min-h-svh flex-col", className)}>
+      {/* Top navigation bar */}
+      <header className="sticky top-0 z-50 border-b bg-background">
+        <div className="flex h-14 items-center gap-4 px-4 lg:px-6">
+          {/* Mobile menu */}
+          <MobileNav />
+
+          {/* Logo */}
+          <a href="#" className="flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={sidebarData.logo.src}
+                alt={sidebarData.logo.alt}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            <span className="font-semibold">{sidebarData.logo.title}</span>
+          </a>
+
+          {/* Desktop navigation */}
+          <nav className="ms-4 hidden items-center gap-1 md:flex">
+            {sidebarData.navGroups.map((group) => (
+              <NavDropdown key={group.title} group={group} />
+            ))}
+          </nav>
+
+          {/* Right side */}
+          <div className="ms-auto flex items-center gap-2">
+            <div className="relative hidden md:block">
+              <Search className="pointer-events-none absolute top-1/2 start-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="جستجو..."
+                aria-label="جستجو"
+                className="h-9 w-64 ps-8"
+              />
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              aria-label="جستجو"
+            >
+              <Search className="size-5" />
+            </Button>
+            {sidebarData.user && <NavUser user={sidebarData.user} />}
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="flex flex-1 flex-col gap-4 p-4 lg:p-6">
+        <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </main>
+    </div>
+  );
+}
diff --git a/blocks/application-shell4.tsx b/blocks/application-shell4.tsx
new file mode 100644
index 0000000..772450d
--- /dev/null
+++ b/blocks/application-shell4.tsx
@@ -0,0 +1,539 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronDown,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Desktop navigation dropdown for each group
+const NavDropdown = ({
+  group,
+  isActive,
+  onSelect,
+}: {
+  group: NavGroup;
+  isActive: boolean;
+  onSelect: () => void;
+}) => {
+  return (
+    <Button
+      variant="ghost"
+      className={cn("gap-1", isActive && "bg-muted")}
+      onClick={onSelect}
+    >
+      {group.title}
+    </Button>
+  );
+};
+
+// Sub-navigation row showing items for active group
+const SubNav = ({
+  group,
+  activeItem,
+  onSelectItem,
+}: {
+  group: NavGroup;
+  activeItem: NavItem | null;
+  onSelectItem: (item: NavItem) => void;
+}) => {
+  return (
+    <div className="flex h-10 items-center gap-1 border-b bg-muted/30 px-4 lg:px-6">
+      {group.items.map((item) => {
+        const Icon = item.icon;
+        const isActive = activeItem?.label === item.label;
+        const hasChildren = item.children && item.children.length > 0;
+
+        if (hasChildren) {
+          return (
+            <DropdownMenu key={item.label}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(
+                    "h-7 gap-1.5 text-sm",
+                    isActive && "bg-accent text-accent-foreground",
+                  )}
+                >
+                  <Icon className="size-4" />
+                  {item.label}
+                  <ChevronDown className="size-3" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                {item.children!.map((child) => {
+                  const ChildIcon = child.icon;
+                  return (
+                    <DropdownMenuItem key={child.label} asChild>
+                      <a href={child.href} className="flex items-center gap-2">
+                        <ChildIcon className="size-4" />
+                        {child.label}
+                      </a>
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        }
+
+        return (
+          <Button
+            key={item.label}
+            variant="ghost"
+            size="sm"
+            className={cn(
+              "h-7 gap-1.5 text-sm",
+              isActive && "bg-accent text-accent-foreground",
+            )}
+            onClick={() => onSelectItem(item)}
+          >
+            <Icon className="size-4" />
+            {item.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+// Mobile navigation sheet
+const MobileNav = ({
+  activeGroupIndex,
+  onSelectGroup,
+}: {
+  activeGroupIndex: number;
+  onSelectGroup: (index: number) => void;
+}) => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          aria-label="باز کردن منو"
+        >
+          <Menu className="size-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" dir="rtl" className="w-72 p-0 text-start">
+        <SheetHeader className="px-4 pt-4">
+          <SheetTitle className="flex items-center gap-2 text-start">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={sidebarData.logo.src}
+                alt={sidebarData.logo.alt}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            {sidebarData.logo.title}
+          </SheetTitle>
+        </SheetHeader>
+        <ScrollArea className="min-h-0 flex-1">
+          <nav className="flex flex-col gap-4 px-4 py-4">
+            {sidebarData.navGroups.map((group, index) => (
+              <div key={group.title}>
+                <button
+                  onClick={() => onSelectGroup(index)}
+                  className={cn(
+                    "mb-2 text-xs font-medium tracking-wider uppercase",
+                    index === activeGroupIndex
+                      ? "text-foreground"
+                      : "text-muted-foreground",
+                  )}
+                >
+                  {group.title}
+                </button>
+                {index === activeGroupIndex && (
+                  <div className="flex flex-col gap-1">
+                    {group.items.map((item) => {
+                      const Icon = item.icon;
+                      return (
+                        <React.Fragment key={item.label}>
+                          <a
+                            href={item.href}
+                            className={cn(
+                              "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted",
+                              item.isActive && "bg-muted font-medium",
+                            )}
+                          >
+                            <Icon className="size-4" />
+                            {item.label}
+                          </a>
+                          {item.children?.map((child) => {
+                            const ChildIcon = child.icon;
+                            return (
+                              <a
+                                key={child.label}
+                                href={child.href}
+                                className="flex items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm hover:bg-muted"
+                              >
+                                <ChildIcon className="size-4" />
+                                {child.label}
+                              </a>
+                            );
+                          })}
+                        </React.Fragment>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            ))}
+            <Separator />
+            <div>
+              <div className="mb-2 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                {sidebarData.footerGroup.title}
+              </div>
+              <div className="flex flex-col gap-1">
+                {sidebarData.footerGroup.items.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <a
+                      key={item.label}
+                      href={item.href}
+                      className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted"
+                    >
+                      <Icon className="size-4" />
+                      {item.label}
+                    </a>
+                  );
+                })}
+              </div>
+            </div>
+          </nav>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+// User dropdown
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="gap-2 px-2">
+          <Avatar className="size-8">
+            <AvatarImage src={user.avatar} alt={user.name} />
+            <AvatarFallback>
+              {user.name
+                .split(" ")
+                .map((n) => n[0])
+                .join("")}
+            </AvatarFallback>
+          </Avatar>
+          <span className="hidden text-sm font-medium md:inline">
+            {user.name}
+          </span>
+          <ChevronsUpDown className="hidden size-4 md:block" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1 text-start">
+            <p className="text-sm font-medium">{user.name}</p>
+            <p className="text-xs text-muted-foreground">{user.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <User className="me-2 size-4" />
+          حساب کاربری
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="me-2 size-4" />
+          خروج
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+interface ApplicationShell4Props {
+  className?: string;
+}
+
+export function ApplicationShell4({ className }: ApplicationShell4Props) {
+  const [activeGroupIndex, setActiveGroupIndex] = React.useState(0);
+  const activeGroup = sidebarData.navGroups[activeGroupIndex];
+
+  // Initialize activeItem to Dashboard (first item with isActive, or first item)
+  const getDefaultActiveItem = (group: NavGroup) => {
+    return group.items.find((item) => item.isActive) || group.items[0] || null;
+  };
+
+  const [activeItem, setActiveItem] = React.useState<NavItem | null>(
+    getDefaultActiveItem(activeGroup),
+  );
+
+  return (
+    <div dir="rtl" lang="fa" className={cn("flex min-h-svh flex-col", className)}>
+      {/* Top navigation bar */}
+      <header className="sticky top-0 z-50 bg-background">
+        <div className="flex h-14 items-center gap-4 border-b px-4 lg:px-6">
+          {/* Mobile menu */}
+          <MobileNav
+            activeGroupIndex={activeGroupIndex}
+            onSelectGroup={setActiveGroupIndex}
+          />
+
+          {/* Logo */}
+          <a href="#" className="flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={sidebarData.logo.src}
+                alt={sidebarData.logo.alt}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            <span className="font-semibold">{sidebarData.logo.title}</span>
+          </a>
+
+          {/* Desktop navigation - group tabs */}
+          <nav className="ms-4 hidden items-center gap-1 md:flex">
+            {sidebarData.navGroups.map((group, index) => (
+              <NavDropdown
+                key={group.title}
+                group={group}
+                isActive={index === activeGroupIndex}
+                onSelect={() => setActiveGroupIndex(index)}
+              />
+            ))}
+          </nav>
+
+          {/* Right side */}
+          <div className="ms-auto flex items-center gap-2">
+            <div className="relative hidden md:block">
+              <Search className="pointer-events-none absolute top-1/2 start-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="جستجو..."
+                aria-label="جستجو"
+                className="h-9 w-64 ps-8"
+              />
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              aria-label="جستجو"
+            >
+              <Search className="size-5" />
+            </Button>
+            {sidebarData.user && <NavUser user={sidebarData.user} />}
+          </div>
+        </div>
+
+        {/* Sub-navigation row */}
+        <SubNav
+          group={activeGroup}
+          activeItem={activeItem}
+          onSelectItem={setActiveItem}
+        />
+      </header>
+
+      {/* Main content */}
+      <main className="flex flex-1 flex-col gap-4 p-4 lg:p-6">
+        <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </main>
+    </div>
+  );
+}
diff --git a/blocks/application-shell5.tsx b/blocks/application-shell5.tsx
new file mode 100644
index 0000000..1cf99aa
--- /dev/null
+++ b/blocks/application-shell5.tsx
@@ -0,0 +1,586 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (hasChildren) {
+    return (
+      <Collapsible asChild defaultOpen className="group/collapsible">
+        <SidebarMenuItem>
+          <CollapsibleTrigger asChild>
+            <SidebarMenuButton isActive={item.isActive}>
+              <Icon className="size-4" />
+              <span>{item.label}</span>
+              <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+            </SidebarMenuButton>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <SidebarMenuSub>
+              {item.children!.map((child) => {
+                const ChildIcon = child.icon;
+                return (
+                  <SidebarMenuSubItem key={child.label}>
+                    <SidebarMenuSubButton asChild isActive={child.isActive}>
+                      <a href={child.href}>
+                        <ChildIcon className="size-4" />
+                        <span>{child.label}</span>
+                      </a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                );
+              })}
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </SidebarMenuItem>
+      </Collapsible>
+    );
+  }
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild isActive={item.isActive}>
+        <a href={item.href}>
+          <Icon className="size-4" />
+          <span>{item.label}</span>
+        </a>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+// Module tabs (top bar navigation)
+interface ModuleTabsProps {
+  className?: string;
+  groups: NavGroup[];
+  activeGroupIndex: number;
+  onChange: (index: number) => void;
+}
+
+const ModuleTabs = ({
+  className,
+  groups,
+  activeGroupIndex,
+  onChange,
+}: ModuleTabsProps) => {
+  return (
+    <nav
+      aria-label="ماژول‌های اصلی"
+      className={cn(
+        "hidden flex-1 items-center gap-1 overflow-x-auto whitespace-nowrap md:flex",
+        className,
+      )}
+    >
+      {groups.map((group, index) => {
+        const isActive = index === activeGroupIndex;
+        return (
+          <button
+            key={group.title}
+            type="button"
+            onClick={() => onChange(index)}
+            className={cn(
+              "flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+              isActive
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+            )}
+          >
+            <span>{group.title}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+};
+
+// Mobile bottom navigation
+interface MobileBottomNavProps {
+  className?: string;
+  groups: NavGroup[];
+  activeGroupIndex: number;
+  onChange: (index: number) => void;
+}
+
+const MobileBottomNav = ({
+  className,
+  groups,
+  activeGroupIndex,
+  onChange,
+}: MobileBottomNavProps) => {
+  const { setOpenMobile } = useSidebar();
+
+  return (
+    <nav
+      aria-label="ناوبری پایین موبایل"
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden",
+        className,
+      )}
+    >
+      <div
+        className="grid"
+        style={{
+          gridTemplateColumns: `repeat(${groups.length}, minmax(0, 1fr))`,
+        }}
+      >
+        {groups.map((group, index) => {
+          // Use first item's icon as the group icon
+          const Icon = group.items[0]?.icon;
+          const isActive = index === activeGroupIndex;
+          return (
+            <button
+              key={group.title}
+              type="button"
+              onClick={() => {
+                onChange(index);
+                setOpenMobile(false);
+              }}
+              className={cn(
+                "flex flex-col items-center gap-1 py-2 text-xs transition-colors",
+                isActive
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+              aria-label={group.title}
+            >
+              {Icon && <Icon className="size-5" />}
+              <span className="truncate">{group.title}</span>
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  );
+};
+
+interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  activeGroupIndex: number;
+}
+
+const AppSidebar = ({ activeGroupIndex, ...props }: AppSidebarProps) => {
+  const activeGroup = sidebarData.navGroups[activeGroupIndex];
+  const { isMobile } = useSidebar();
+
+  return (
+    <Sidebar
+      side="right"
+      collapsible="icon"
+      className="top-14 h-[calc(100svh-3.5rem)]!"
+      {...props}
+    >
+      <SidebarHeader>
+        <div className="flex items-center justify-between group-data-[collapsible=icon]:justify-center">
+          {isMobile ? (
+            <a href="#" className="flex items-center gap-2 px-2">
+              <div className="flex aspect-square size-6 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={sidebarData.logo.src}
+                  alt={sidebarData.logo.alt}
+                  className="size-4 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <span className="text-sm font-medium">
+                {sidebarData.logo.title}
+              </span>
+            </a>
+          ) : (
+            <span className="px-2 text-start text-sm font-medium group-data-[collapsible=icon]:hidden">
+              {activeGroup.title}
+            </span>
+          )}
+          <SidebarTrigger />
+        </div>
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          <SidebarGroup>
+            <SidebarGroupLabel>{activeGroup.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {activeGroup.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+          {/* Footer group items */}
+          <SidebarGroup>
+            <SidebarGroupLabel>
+              {sidebarData.footerGroup.title}
+            </SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {sidebarData.footerGroup.items.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <SidebarMenuItem key={item.label}>
+                      <SidebarMenuButton asChild isActive={item.isActive}>
+                        <a href={item.href}>
+                          <Icon className="size-4" />
+                          <span>{item.label}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+    </Sidebar>
+  );
+};
+
+interface ApplicationShell5Props {
+  className?: string;
+}
+
+const ApplicationShell5 = ({ className }: ApplicationShell5Props) => {
+  const [activeGroupIndex, setActiveGroupIndex] = React.useState(0);
+  const activeGroup = sidebarData.navGroups[activeGroupIndex];
+
+  return (
+    <SidebarProvider dir="rtl" lang="fa" className={cn("flex flex-col", className)}>
+      <header className="sticky top-0 z-40 border-b bg-background">
+        <div className="flex h-14 items-center gap-4 px-4">
+          <div className="flex items-center gap-3 md:hidden">
+            <SidebarTrigger />
+            <a href="#" className="flex items-center gap-2">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={sidebarData.logo.src}
+                  alt={sidebarData.logo.alt}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <span className="font-semibold">{sidebarData.logo.title}</span>
+            </a>
+          </div>
+          <div className="hidden items-center gap-3 md:flex">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={sidebarData.logo.src}
+                alt={sidebarData.logo.alt}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            <span className="font-semibold">{sidebarData.logo.title}</span>
+          </div>
+
+          <ModuleTabs
+            groups={sidebarData.navGroups}
+            activeGroupIndex={activeGroupIndex}
+            onChange={setActiveGroupIndex}
+          />
+
+          <div className="ms-auto flex items-center text-sm font-semibold md:hidden">
+            {activeGroup.title}
+          </div>
+        </div>
+      </header>
+
+      <div className="flex flex-1">
+        <AppSidebar activeGroupIndex={activeGroupIndex} />
+        <SidebarInset className="pb-20 md:pb-0">
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+          </div>
+        </SidebarInset>
+      </div>
+
+      <MobileBottomNav
+        groups={sidebarData.navGroups}
+        activeGroupIndex={activeGroupIndex}
+        onChange={setActiveGroupIndex}
+      />
+    </SidebarProvider>
+  );
+};
+
+export { ApplicationShell5 };
diff --git a/blocks/application-shell6.tsx b/blocks/application-shell6.tsx
new file mode 100644
index 0000000..9446fbc
--- /dev/null
+++ b/blocks/application-shell6.tsx
@@ -0,0 +1,511 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+  Activity,
+  Calendar,
+  Clapperboard,
+  FileText,
+  Handshake,
+  Home,
+  Images,
+  Inbox,
+  Kanban,
+  LayoutDashboard,
+  ListTodo,
+  Receipt,
+  Settings,
+  Wallet,
+} from "lucide-react";
+import * as React from "react";
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+type ModuleId =
+  | "overview"
+  | "sales"
+  | "production"
+  | "deliverables"
+  | "finance";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  badge?: string;
+  active?: boolean;
+};
+
+type NavSection = {
+  title?: string;
+  items: NavItem[];
+};
+
+type NavModule = {
+  id: ModuleId;
+  label: string;
+  icon: NavItem["icon"];
+  sections: NavSection[];
+};
+
+const navModules: NavModule[] = [
+  {
+    id: "overview",
+    label: "نمای کلی",
+    icon: LayoutDashboard,
+    sections: [
+      {
+        title: "نمای کلی",
+        items: [
+          { label: "خانه", icon: Home, href: "#", active: true },
+          { label: "داشبورد", icon: Activity, href: "#" },
+          { label: "صندوق ورودی", icon: Inbox, href: "#", badge: "۳" },
+        ],
+      },
+      {
+        title: "وظایف",
+        items: [
+          { label: "وظایف من", icon: ListTodo, href: "#", badge: "۵" },
+          { label: "تقویم", icon: Calendar, href: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "sales",
+    label: "فروش",
+    icon: Handshake,
+    sections: [
+      {
+        title: "قیف فروش",
+        items: [
+          { label: "سرنخ‌های جدید", icon: Inbox, href: "#", active: true },
+          { label: "پیش‌فاکتورها", icon: FileText, href: "#" },
+          { label: "رزروها", icon: Calendar, href: "#" },
+        ],
+      },
+      {
+        title: "گزارش‌ها",
+        items: [{ label: "داشبورد فروش", icon: Activity, href: "#" }],
+      },
+    ],
+  },
+  {
+    id: "production",
+    label: "تولید",
+    icon: Clapperboard,
+    sections: [
+      {
+        title: "مسیر تولید",
+        items: [
+          { label: "تخته فیلمبرداری", icon: Kanban, href: "#", active: true },
+          { label: "لیست شات‌ها", icon: ListTodo, href: "#" },
+        ],
+      },
+      {
+        title: "تیم",
+        items: [{ label: "تخصیص‌ها", icon: Inbox, href: "#" }],
+      },
+    ],
+  },
+  {
+    id: "deliverables",
+    label: "تحویل‌ها",
+    icon: Images,
+    sections: [
+      {
+        title: "گالری‌ها",
+        items: [
+          { label: "همه گالری‌ها", icon: Images, href: "#", active: true },
+          { label: "تأییدها", icon: Inbox, href: "#", badge: "۲" },
+        ],
+      },
+      {
+        title: "خروجی‌ها",
+        items: [{ label: "مرکز دانلود", icon: FileText, href: "#" }],
+      },
+    ],
+  },
+  {
+    id: "finance",
+    label: "مالی",
+    icon: Wallet,
+    sections: [
+      {
+        title: "صورتحساب",
+        items: [
+          { label: "فاکتورها", icon: Receipt, href: "#", active: true },
+          { label: "پرداخت‌ها", icon: Wallet, href: "#" },
+        ],
+      },
+      {
+        title: "گزارش‌ها",
+        items: [{ label: "سود و زیان", icon: Activity, href: "#" }],
+      },
+    ],
+  },
+];
+
+const utilities: NavItem[] = [{ label: "تنظیمات", icon: Settings, href: "#" }];
+
+interface ModulePanelProps {
+  className?: string;
+  module: NavModule;
+}
+
+function ModulePanel({ className, module }: ModulePanelProps) {
+  return (
+    <div className={cn("space-y-4 px-4 py-3 text-start text-sm", className)}>
+      {module.sections.map((section, index) => (
+        <div className="space-y-2" key={section.title ?? index}>
+          {section.title && (
+            <SidebarGroupLabel className="mb-1 text-xs font-medium tracking-wide text-muted-foreground">
+              {section.title}
+            </SidebarGroupLabel>
+          )}
+          <SidebarMenu>
+            {section.items.map((item) => {
+              const Icon = item.icon;
+              return (
+                <SidebarMenuItem
+                  key={item.label}
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <SidebarMenuButton
+                    asChild
+                    isActive={item.active}
+                    className="px-2"
+                  >
+                    <a href={item.href}>
+                      <Icon className="size-4" />
+                      {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                      )}
+                      <span>{item.label}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              );
+            })}
+          </SidebarMenu>
+        </div>
+      ))}
+
+      <div className="border-t pt-3">
+        <SidebarGroupLabel className="mb-2 text-xs font-medium tracking-wide text-muted-foreground">
+          استودیو
+        </SidebarGroupLabel>
+        <SidebarMenu className="text-sm">
+          {utilities.map((item) => {
+            const Icon = item.icon;
+            return (
+              <SidebarMenuItem key={item.label}>
+                <SidebarMenuButton
+                  asChild
+                  className="gap-2.5 px-2 text-muted-foreground hover:text-foreground"
+                >
+                  <a href={item.href}>
+                    <Icon className="size-4" />
+                    <span>{item.label}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            );
+          })}
+        </SidebarMenu>
+      </div>
+    </div>
+  );
+}
+
+interface AppSidebarProps extends Omit<
+  React.ComponentProps<typeof Sidebar>,
+  "className"
+> {
+  className?: string;
+  activeKey: ModuleId;
+  onNavChange: (key: ModuleId) => void;
+}
+
+export function AppSidebar({
+  className,
+  activeKey,
+  onNavChange,
+  ...props
+}: AppSidebarProps) {
+  const { state, setOpen, isMobile } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const showFooter = isCollapsed || isMobile;
+
+  const activeModule =
+    navModules.find((module) => module.id === activeKey) ?? navModules[0];
+  const activeNavLabel = activeModule.label;
+
+  return (
+    <Sidebar
+      side="right"
+      collapsible="icon"
+      className={cn(
+        "overflow-hidden *:data-[sidebar=sidebar]:flex-row",
+        className,
+      )}
+      {...props}
+    >
+      <Sidebar
+        collapsible="none"
+        className="w-[calc(var(--sidebar-width-icon)+1px)]! border-e"
+      >
+        <SidebarHeader className="h-14 border-b">
+          <SidebarMenu className="my-auto">
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                      alt="شاد‌سی‌ان بلاکس"
+                      className="size-6 text-primary-foreground invert dark:invert-0"
+                    />
+                  </div>
+                  <span className="text-lg font-semibold tracking-tighter">
+                    ری یو آی
+                  </span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {" "}
+                <SidebarMenuItem>
+                  <motion.div
+                    key={isCollapsed ? "h-collapsed" : "h-expanded"}
+                    className={cn(
+                      isCollapsed
+                        ? "hidden items-center justify-center sm:flex"
+                        : "hidden",
+                    )}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.8 }}
+                  >
+                    <SidebarTrigger />
+                  </motion.div>
+                </SidebarMenuItem>
+                {navModules.map((module) => {
+                  const Icon = module.icon;
+                  return (
+                    <SidebarMenuItem key={module.id}>
+                      <SidebarMenuButton
+                        tooltip={{
+                          children: module.label,
+                          hidden: isMobile,
+                        }}
+                        onClick={() => {
+                          onNavChange(module.id);
+                          setOpen(true);
+                        }}
+                        isActive={activeKey === module.id}
+                        aria-label={module.label}
+                        className="px-2.5 md:px-2"
+                      >
+                        <Icon className="size-4" />
+                        <span>{module.label}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+
+        <SidebarFooter className={cn(showFooter ? "flex" : "hidden")}>
+          <SidebarGroup className="p-0">
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {utilities.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <SidebarMenuItem key={item.label}>
+                      <SidebarMenuButton
+                        asChild
+                        tooltip={{
+                          children: item.label,
+                          hidden: isMobile,
+                        }}
+                        className="px-2.5 md:px-2"
+                        aria-label={item.label}
+                      >
+                        <a href={item.href}>
+                          <Icon className="size-4" />
+                          <span>{item.label}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>{" "}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarFooter>
+      </Sidebar>
+
+      <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+        <SidebarHeader className="h-14 gap-3.5 border-b px-4">
+          <div className="my-auto flex w-full items-center justify-between">
+            <div className="text-start text-base font-medium text-foreground">
+              {activeNavLabel}
+            </div>
+            <div className="hidden sm:block">
+              <SidebarTrigger />
+            </div>
+          </div>
+        </SidebarHeader>
+
+        <SidebarContent className="overflow-hidden">
+          <ScrollArea className="min-h-0 flex-1">
+            <SidebarGroup className="px-0">
+              <SidebarGroupContent>
+                <ModulePanel module={activeModule} />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </ScrollArea>
+        </SidebarContent>
+      </Sidebar>
+    </Sidebar>
+  );
+}
+
+interface ApplicationShell6Props {
+  className?: string;
+}
+
+export function ApplicationShell6({ className }: ApplicationShell6Props) {
+  const [activeKey, setActiveKey] = React.useState<ModuleId>(navModules[0].id);
+  const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
+
+  const activeModule =
+    navModules.find((module) => module.id === activeKey) ?? navModules[0];
+  const activeNavLabel = activeModule.label;
+
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+      className={cn(className)}
+    >
+      <div className="hidden md:block">
+        <AppSidebar activeKey={activeKey} onNavChange={setActiveKey} />
+      </div>
+
+      <SidebarInset className="pb-20 md:pb-0">
+        <div className="flex flex-1 flex-col gap-4">
+          <div className="sticky top-0 z-40 flex h-14 items-center gap-2 border-b bg-background px-4 md:hidden">
+            <SidebarTrigger />
+            <Separator
+              orientation="vertical"
+              className="ms-2 data-[orientation=vertical]:h-4"
+            />
+            <a href="#">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                  alt="شاد‌سی‌ان بلاکس"
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+            </a>
+            <div className="ms-auto text-sm font-medium text-muted-foreground">
+              {activeNavLabel}
+            </div>
+          </div>
+
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+          </div>
+        </div>
+      </SidebarInset>
+
+      <Drawer
+        open={isMobilePanelOpen}
+        onOpenChange={setIsMobilePanelOpen}
+        dismissible
+      >
+        <DrawerContent dir="rtl" className="text-start md:hidden">
+          <DrawerHeader>
+            <DrawerTitle className="text-start">{activeNavLabel}</DrawerTitle>
+          </DrawerHeader>
+          <div className="pb-6">
+            <ModulePanel module={activeModule} />
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      <nav
+        aria-label="ناوبری پایین موبایل"
+        className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden"
+      >
+        <div className="grid grid-cols-5">
+          {navModules.map((module) => {
+            const Icon = module.icon;
+            const isActive = module.id === activeKey;
+            return (
+              <button
+                key={module.id}
+                type="button"
+                onClick={() => {
+                  setActiveKey(module.id);
+                  setIsMobilePanelOpen(true);
+                }}
+                className={`flex flex-col items-center justify-center py-3 text-xs ${
+                  isActive
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+                aria-label={module.label}
+              >
+                <Icon className="h-5 w-5" />
+                <span className="sr-only">{module.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </nav>
+    </SidebarProvider>
+  );
+}
diff --git a/blocks/application-shell7.tsx b/blocks/application-shell7.tsx
new file mode 100644
index 0000000..9df721a
--- /dev/null
+++ b/blocks/application-shell7.tsx
@@ -0,0 +1,1074 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+  BadgeCheck,
+  Bell,
+  Bookmark,
+  ChevronDown,
+  ClipboardCheck,
+  Clock,
+  CreditCard,
+  FileText,
+  Folder,
+  Hash,
+  Inbox,
+  Layers,
+  LayoutGrid,
+  LogOut,
+  MessageSquare,
+  MessageSquareText,
+  MessagesSquare,
+  PhoneCall,
+  Pin,
+  Settings,
+  Sparkles,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+type ModuleId = "messages" | "spaces" | "threads" | "calls" | "files";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  badge?: string;
+  active?: boolean;
+};
+
+type NavSection = {
+  title?: string;
+  items: NavItem[];
+};
+
+type NavModule = {
+  id: ModuleId;
+  label: string;
+  icon: NavItem["icon"];
+  sections: NavSection[];
+};
+
+function getItemKey(moduleId: ModuleId, item: NavItem) {
+  return `${moduleId}:${item.label}`;
+}
+
+function getDefaultItemKey(module: NavModule) {
+  const items = module.sections.flatMap((section) => section.items);
+  const activeItem = items.find((item) => item.active) ?? items[0];
+  return activeItem ? getItemKey(module.id, activeItem) : `${module.id}:`;
+}
+
+function getActiveItemLabel(module: NavModule, activeItemKey: string) {
+  const items = module.sections.flatMap((section) => section.items);
+  const match = items.find(
+    (item) => getItemKey(module.id, item) === activeItemKey,
+  );
+  return match?.label ?? module.sections[0]?.items[0]?.label ?? module.label;
+}
+
+function getInitials(name: string) {
+  return (
+    name
+      .split(" ")
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "U"
+  );
+}
+
+const navModules: NavModule[] = [
+  {
+    id: "messages",
+    label: "پیام‌ها",
+    icon: MessagesSquare,
+    sections: [
+      {
+        title: "صندوق ورودی",
+        items: [
+          { label: "همه پیام‌ها", icon: Inbox, href: "#", active: true },
+          { label: "ارجاع‌ها", icon: UserPlus, href: "#", badge: "۴" },
+          { label: "اعلان‌ها", icon: Bell, href: "#", badge: "۱۲" },
+          { label: "ذخیره‌شده", icon: Bookmark, href: "#" },
+        ],
+      },
+      {
+        title: "نماها",
+        items: [
+          { label: "خوانده‌نشده", icon: Bell, href: "#" },
+          { label: "زمان‌بندی‌شده", icon: Clock, href: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "spaces",
+    label: "فضاها",
+    icon: LayoutGrid,
+    sections: [
+      {
+        title: "فضاها",
+        items: [
+          { label: "به‌روزرسانی محصول", icon: Hash, href: "#", active: true },
+          { label: "موفقیت مشتری", icon: Users, href: "#", badge: "۲" },
+          { label: "عملیات انتشار", icon: Layers, href: "#" },
+        ],
+      },
+      {
+        title: "مستقیم",
+        items: [
+          { label: "Kai", icon: Users, href: "#", badge: "۱" },
+          { label: "Mina", icon: Users, href: "#" },
+          { label: "Diego", icon: Users, href: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "threads",
+    label: "گفتگوها",
+    icon: MessageSquareText,
+    sections: [
+      {
+        title: "گفتگوها",
+        items: [
+          { label: "دنبال‌شده", icon: Bookmark, href: "#", active: true },
+          { label: "محول‌شده", icon: Users, href: "#" },
+          { label: "بسته‌شده", icon: MessageSquareText, href: "#" },
+        ],
+      },
+      {
+        title: "برجسته‌ها",
+        items: [
+          { label: "ارجاع‌ها", icon: UserPlus, href: "#", badge: "۳" },
+          { label: "سنجاق‌شده", icon: Bookmark, href: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "calls",
+    label: "تماس‌ها",
+    icon: PhoneCall,
+    sections: [
+      {
+        title: "جلسات",
+        items: [
+          { label: "پیش‌رو", icon: Clock, href: "#", active: true },
+          { label: "ضبط‌ها", icon: FileText, href: "#" },
+        ],
+      },
+      {
+        title: "دستگاه‌ها",
+        items: [
+          { label: "صدا و تصویر", icon: PhoneCall, href: "#" },
+          { label: "اعلان‌ها", icon: Bell, href: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "files",
+    label: "فایل‌ها",
+    icon: Folder,
+    sections: [
+      {
+        title: "مرور",
+        items: [
+          { label: "اخیر", icon: Clock, href: "#", active: true },
+          { label: "اشتراکی با من", icon: Users, href: "#" },
+          { label: "بارگذاری‌ها", icon: Folder, href: "#" },
+          { label: "مجموعه‌ها", icon: Layers, href: "#" },
+        ],
+      },
+      {
+        title: "فیلترهای سریع",
+        items: [
+          { label: "اسناد", icon: FileText, href: "#" },
+          { label: "نظرات خوانده‌نشده", icon: Bell, href: "#", badge: "۵" },
+        ],
+      },
+    ],
+  },
+];
+
+const utilities: NavItem[] = [
+  { label: "اعلان‌ها", icon: Bell, href: "#" },
+  { label: "تنظیمات", icon: Settings, href: "#" },
+];
+
+const data = {
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
+  },
+  participants: [
+    {
+      id: "you",
+      name: "علی رضایی",
+      title: "شما",
+      status: "online",
+    },
+    {
+      id: "riley",
+      name: "ریحانه Park",
+      title: "محصول",
+      status: "online",
+    },
+    {
+      id: "sam",
+      name: "Sam Rivera",
+      title: "طراحی",
+      status: "away",
+    },
+    {
+      id: "noah",
+      name: "Noah Patel",
+      title: "مهندسی",
+      status: "offline",
+    },
+    {
+      id: "maya",
+      name: "نگار Singh",
+      title: "پشتیبانی",
+      status: "online",
+    },
+    {
+      id: "jules",
+      name: "Jules Tan",
+      title: "عملیات",
+      status: "offline",
+    },
+  ] as const,
+  activity: [
+    {
+      id: "a1",
+      icon: MessageSquare,
+      title: "گفتگوی جدید شروع شد",
+      detail: "Riley در به‌روزرسانی محصول پست گذاشت.",
+      time: "۲ دقیقه",
+    },
+    {
+      id: "a2",
+      icon: UserPlus,
+      title: "ارجاع جدید",
+      detail: "سام شما را به تیکت پشتیبانی مشتری ارجاع داد.",
+      time: "۱۸ دقیقه",
+    },
+    {
+      id: "a3",
+      icon: Pin,
+      title: "پیام سنجاق شد",
+      detail: "Maya «چک‌لیست انتشار نسخه ۳» را سنجاق کرد.",
+      time: "۱ ساعت",
+    },
+    {
+      id: "a4",
+      icon: ClipboardCheck,
+      title: "وظیفه تکمیل شد",
+      detail: "Noah «پاکسازی API» را انجام‌شده علامت زد.",
+      time: "امروز",
+    },
+    {
+      id: "a5",
+      icon: PhoneCall,
+      title: "تماس پایان یافت",
+      detail: "همگام‌سازی هفتگی • ۲۴ دقیقه",
+      time: "دیروز",
+    },
+    {
+      id: "a6",
+      icon: FileText,
+      title: "فایل بارگذاری شد",
+      detail: "Jules «incident-notes.pdf» را به اشتراک گذاشت.",
+      time: "دیروز",
+    },
+  ] as const,
+};
+
+interface ShellBreadcrumbProps {
+  className?: string;
+  moduleLabel: string;
+  itemLabel: string;
+}
+
+function ShellBreadcrumb({
+  className,
+  moduleLabel,
+  itemLabel,
+}: ShellBreadcrumbProps) {
+  return (
+    <Breadcrumb className={cn(className)}>
+      <BreadcrumbList>
+        <BreadcrumbItem className="hidden md:block">
+          <BreadcrumbLink href="#">{moduleLabel}</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator className="hidden md:block" />
+        <BreadcrumbItem>
+          <BreadcrumbPage>{itemLabel}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
+
+interface ModulePanelProps {
+  className?: string;
+  module: NavModule;
+  activeItemKey: string;
+  onSelectItem: (key: string) => void;
+}
+
+function ModulePanel({
+  className,
+  module,
+  activeItemKey,
+  onSelectItem,
+}: ModulePanelProps) {
+  return (
+    <div className={cn("space-y-4 px-4 py-3 text-start text-sm", className)}>
+      {module.sections.map((section, index) => (
+        <div className="space-y-2" key={section.title ?? index}>
+          {section.title && (
+            <SidebarGroupLabel className="mb-1 text-xs font-medium tracking-wide text-muted-foreground">
+              {section.title}
+            </SidebarGroupLabel>
+          )}
+          <SidebarMenu>
+            {section.items.map((item) => {
+              const Icon = item.icon;
+              const itemKey = getItemKey(module.id, item);
+              return (
+                <SidebarMenuItem
+                  key={item.label}
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <SidebarMenuButton
+                    asChild
+                    isActive={itemKey === activeItemKey}
+                    className="px-2"
+                  >
+                    <a
+                      href={item.href}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        onSelectItem(itemKey);
+                      }}
+                    >
+                      <Icon className="size-4" />
+                      {item.badge && (
+                        <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                      )}
+                      <span>{item.label}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              );
+            })}
+          </SidebarMenu>
+        </div>
+      ))}
+
+      <div className="border-t pt-3">
+        <SidebarGroupLabel className="mb-2 text-xs font-medium tracking-wide text-muted-foreground">
+          ترجیحات
+        </SidebarGroupLabel>
+        <SidebarMenu className="text-sm">
+          {utilities.map((item) => {
+            const Icon = item.icon;
+            return (
+              <SidebarMenuItem key={item.label}>
+                <SidebarMenuButton
+                  asChild
+                  className="gap-2.5 px-2 text-muted-foreground hover:text-foreground"
+                >
+                  <a href={item.href}>
+                    <Icon className="size-4" />
+                    <span>{item.label}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            );
+          })}
+        </SidebarMenu>
+      </div>
+    </div>
+  );
+}
+
+interface AppSidebarProps extends Omit<
+  React.ComponentProps<typeof Sidebar>,
+  "className"
+> {
+  className?: string;
+  activeKey: ModuleId;
+  activeItemKey: string;
+  onNavChange: (key: ModuleId) => void;
+  onItemChange: (key: string) => void;
+}
+
+function AppSidebar({
+  className,
+  activeKey,
+  activeItemKey,
+  onNavChange,
+  onItemChange,
+  ...props
+}: AppSidebarProps) {
+  const { state, setOpen, isMobile } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const showFooter = isCollapsed || isMobile;
+
+  const activeModule =
+    navModules.find((module) => module.id === activeKey) ?? navModules[0];
+
+  return (
+    <Sidebar
+      side="right"
+      collapsible="icon"
+      className={cn(
+        "overflow-hidden *:data-[sidebar=sidebar]:flex-row",
+        className,
+      )}
+      {...props}
+    >
+      <Sidebar
+        collapsible="none"
+        className="w-[calc(var(--sidebar-width-icon)+1px)]! border-e"
+      >
+        <SidebarHeader className="h-14 border-b">
+          <SidebarMenu className="my-auto">
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                      alt="شاد‌سی‌ان بلاکس"
+                      className="size-6 text-primary-foreground invert dark:invert-0"
+                    />
+                  </div>
+                  <span className="text-lg font-semibold tracking-tighter">
+                    ری یو آی
+                  </span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {" "}
+                <SidebarMenuItem>
+                  <motion.div
+                    key={isCollapsed ? "h-collapsed" : "h-expanded"}
+                    className={cn(
+                      isCollapsed
+                        ? "hidden items-center justify-center sm:flex"
+                        : "hidden",
+                    )}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.8 }}
+                  >
+                    <SidebarTrigger />
+                  </motion.div>
+                </SidebarMenuItem>
+                {navModules.map((module) => {
+                  const Icon = module.icon;
+                  return (
+                    <SidebarMenuItem key={module.id}>
+                      <SidebarMenuButton
+                        tooltip={{
+                          children: module.label,
+                          hidden: isMobile,
+                        }}
+                        onClick={() => {
+                          onNavChange(module.id);
+                          setOpen(true);
+                        }}
+                        isActive={activeKey === module.id}
+                        aria-label={module.label}
+                        className="px-2.5 md:px-2"
+                      >
+                        <Icon className="size-4" />
+                        <span>{module.label}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+
+        <SidebarFooter className={cn(showFooter ? "flex" : "hidden")}>
+          <SidebarGroup className="p-0">
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {utilities.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <SidebarMenuItem key={item.label}>
+                      <SidebarMenuButton
+                        asChild
+                        tooltip={{
+                          children: item.label,
+                          hidden: isMobile,
+                        }}
+                        className="px-2.5 md:px-2"
+                        aria-label={item.label}
+                      >
+                        <a href={item.href}>
+                          <Icon className="size-4" />
+                          <span>{item.label}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>{" "}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarFooter>
+      </Sidebar>
+
+      <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+        <SidebarHeader
+          className={cn(
+            "flex h-14 border-b px-2",
+            isCollapsed
+              ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-center md:justify-start"
+              : "flex-row items-center justify-between",
+          )}
+        >
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <div className="flex w-full items-center px-2 group-data-[collapsible=icon]:justify-center">
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      className="flex h-auto items-center gap-1.5 p-0! hover:bg-transparent"
+                    >
+                      <span className="font-semibold">ری یو آی</span>
+                      <ChevronDown className="size-3 text-muted-foreground" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </div>
+                <DropdownMenuContent
+                  className="min-w-60 rounded-lg"
+                  side="bottom"
+                  align="center"
+                >
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem asChild>
+                      <a href="#">
+                        تنظیمات فضای کار
+                        <DropdownMenuShortcut>⌥⇧S</DropdownMenuShortcut>
+                      </a>
+                    </DropdownMenuItem>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        دعوت هم‌تیمی‌ها
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuPortal>
+                        <DropdownMenuSubContent className="min-w-64 rounded-lg">
+                          <DropdownMenuLabel>دعوت به Pulse</DropdownMenuLabel>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem className="flex items-center gap-2">
+                            <div className="flex aspect-square size-6 items-center justify-center rounded bg-blue-500 text-[10px] font-semibold text-white">
+                              EM
+                            </div>
+                            دعوت با ایمیل
+                          </DropdownMenuItem>
+                          <DropdownMenuItem className="flex items-center gap-2">
+                            <div className="flex aspect-square size-6 items-center justify-center rounded bg-emerald-500 text-[10px] font-semibold text-white">
+                              LK
+                            </div>
+                            کپی لینک دعوت
+                            <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem>دعوت‌های در انتظار</DropdownMenuItem>
+                          <DropdownMenuItem>نقش‌ها و دسترسی</DropdownMenuItem>
+                        </DropdownMenuSubContent>
+                      </DropdownMenuPortal>
+                    </DropdownMenuSub>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+
+                  <DropdownMenuItem>
+                    خروج
+                    <DropdownMenuShortcut>⌥⇧Q</DropdownMenuShortcut>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <motion.div
+            key={isCollapsed ? "h-collapsed" : "h-expanded"}
+            className={cn(
+              "flex items-center gap-2",
+              isCollapsed ? "flex-row md:flex-col-reverse" : "flex-row",
+            )}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8 }}
+          >
+            <SidebarTrigger />
+          </motion.div>
+        </SidebarHeader>
+
+        <SidebarContent className="overflow-hidden">
+          <ScrollArea className="min-h-0 flex-1">
+            <SidebarGroup className="px-0">
+              <SidebarGroupContent>
+                <ModulePanel
+                  module={activeModule}
+                  activeItemKey={activeItemKey}
+                  onSelectItem={onItemChange}
+                />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </ScrollArea>
+        </SidebarContent>
+      </Sidebar>
+    </Sidebar>
+  );
+}
+
+interface NavUserProps {
+  className?: string;
+  user: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+}
+
+function NavUser({ className, user }: NavUserProps) {
+  const { isMobile } = useSidebar();
+  const initials = getInitials(user.name);
+  return (
+    <SidebarMenu className={cn("w-full", className)}>
+      <SidebarMenuItem className="w-full">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="default"
+              className="h-10 w-full data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-7 w-7">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="bg-sidebar-primary text-xs font-medium text-sidebar-primary-foreground">
+                  {initials}
+                </AvatarFallback>
+              </Avatar>
+              <span className="min-w-0 flex-1 truncate text-sm font-medium">
+                {user.name}
+              </span>
+              <ChevronDown className="ms-auto size-4 text-muted-foreground" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "left"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="h-8 w-8">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="bg-sidebar-primary font-medium text-sidebar-primary-foreground">
+                    {initials}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles className="me-2 size-4" />
+                ارتقا به حرفه‌ای
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck className="me-2 size-4" />
+                حساب کاربری
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard className="me-2 size-4" />
+                صورتحساب
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell className="me-2 size-4" />
+                اعلان‌ها
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
+
+interface SidebarRightProps extends Omit<
+  React.ComponentProps<typeof Sidebar>,
+  "className"
+> {
+  className?: string;
+}
+
+function RightPanelContent() {
+  return (
+    <div className="space-y-6 p-4 text-start">
+      <section className="space-y-3">
+        <div className="flex items-center justify-between gap-2">
+          <SidebarGroupLabel className="text-xs font-medium tracking-wide text-muted-foreground">
+            شرکت‌کنندگان
+          </SidebarGroupLabel>
+          <Button variant="outline" size="sm" className="h-8 gap-2">
+            <UserPlus className="size-4" />
+            دعوت
+          </Button>
+        </div>
+
+        <div className="space-y-1">
+          {data.participants.map((participant) => {
+            const statusClassName =
+              participant.status === "online"
+                ? "bg-emerald-500"
+                : participant.status === "away"
+                  ? "bg-amber-500"
+                  : "bg-muted-foreground/50";
+            const initials = getInitials(participant.name);
+            const isYou = participant.id === "you";
+
+            return (
+              <button
+                key={participant.id}
+                type="button"
+                className="flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-start hover:bg-accent"
+              >
+                <span
+                  className={cn(
+                    "mt-0.5 size-2 shrink-0 rounded-full",
+                    statusClassName,
+                  )}
+                  aria-hidden="true"
+                />
+                <Avatar className="h-7 w-7">
+                  <AvatarFallback className="bg-primary text-xs font-medium text-primary-foreground">
+                    {initials}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate text-sm font-medium">
+                      {participant.name}
+                    </span>
+                    {isYou && (
+                      <Badge
+                        variant="secondary"
+                        className="h-5 px-1.5 text-[10px]"
+                      >
+                        شما
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="truncate text-xs text-muted-foreground">
+                    {participant.title}
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <SidebarGroupLabel className="text-xs font-medium tracking-wide text-muted-foreground">
+            فعالیت‌ها
+          </SidebarGroupLabel>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 px-2 text-muted-foreground hover:text-foreground"
+          >
+            مشاهده همه
+          </Button>
+        </div>
+
+        <div className="space-y-2">
+          {data.activity.map((event) => {
+            const Icon = event.icon;
+            return (
+              <div
+                key={event.id}
+                className="flex gap-3 rounded-md p-2 hover:bg-accent/50"
+              >
+                <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-accent/50">
+                  <Icon className="size-4 text-foreground" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="truncate text-sm font-medium">
+                      {event.title}
+                    </div>
+                    <div className="shrink-0 text-xs text-muted-foreground">
+                      {event.time}
+                    </div>
+                  </div>
+                  <div className="mt-0.5 text-xs text-muted-foreground">
+                    {event.detail}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export function SidebarRight({ className, ...props }: SidebarRightProps) {
+  return (
+    <Sidebar
+      collapsible="none"
+      side="left"
+      className={cn("sticky top-0 hidden h-svh border-s lg:flex", className)}
+      {...props}
+    >
+      <SidebarHeader className="flex h-14 items-center border-b px-2">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent className="p-0">
+        <ScrollArea className="h-[calc(100svh-3.5rem)]">
+          <RightPanelContent />
+        </ScrollArea>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+interface ApplicationShell7Props {
+  className?: string;
+}
+
+export function ApplicationShell7({ className }: ApplicationShell7Props) {
+  const [activeKey, setActiveKey] = React.useState<ModuleId>(navModules[0].id);
+  const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
+  const [activeItemKey, setActiveItemKey] = React.useState(() =>
+    getDefaultItemKey(navModules[0]),
+  );
+
+  const activeModule =
+    navModules.find((module) => module.id === activeKey) ?? navModules[0];
+  const activeItemLabel = getActiveItemLabel(activeModule, activeItemKey);
+
+  React.useEffect(() => {
+    setActiveItemKey(getDefaultItemKey(activeModule));
+  }, [activeModule]);
+
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+      className={cn(className)}
+    >
+      <div className="hidden md:block">
+        <AppSidebar
+          activeKey={activeKey}
+          activeItemKey={activeItemKey}
+          onNavChange={setActiveKey}
+          onItemChange={setActiveItemKey}
+        />
+      </div>
+
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-3">
+          <a href="#" className="md:hidden">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                alt="شاد‌سی‌ان بلاکس"
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+          </a>
+          <div className="flex flex-1 items-center gap-2">
+            <ShellBreadcrumb
+              moduleLabel={activeModule.label}
+              itemLabel={activeItemLabel}
+            />
+          </div>
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="lg:hidden"
+                aria-label="تیم"
+              >
+                <Users className="size-5" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" dir="rtl" className="w-80 p-0 text-start">
+              <SheetHeader className="px-4 pt-4">
+                <SheetTitle className="text-start">تیم</SheetTitle>
+              </SheetHeader>
+              <ScrollArea className="min-h-0 flex-1">
+                <RightPanelContent />
+              </ScrollArea>
+            </SheetContent>
+          </Sheet>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="h-[50vh] w-full rounded-xl bg-muted/50" />
+          <div className="h-[100vh] w-full rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+
+      <SidebarRight />
+
+      <Drawer
+        open={isMobilePanelOpen}
+        onOpenChange={setIsMobilePanelOpen}
+        dismissible
+      >
+        <DrawerContent dir="rtl" className="text-start md:hidden">
+          <DrawerHeader>
+            <DrawerTitle className="text-start">{activeModule.label}</DrawerTitle>
+          </DrawerHeader>
+          <div className="pb-6">
+            <ModulePanel
+              module={activeModule}
+              activeItemKey={activeItemKey}
+              onSelectItem={(key) => {
+                setActiveItemKey(key);
+                setIsMobilePanelOpen(false);
+              }}
+            />
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      <nav
+        aria-label="ناوبری پایین موبایل"
+        className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden"
+      >
+        <div className="grid grid-cols-5">
+          {navModules.map((module) => {
+            const Icon = module.icon;
+            const isActive = module.id === activeKey;
+            return (
+              <button
+                key={module.id}
+                type="button"
+                onClick={() => {
+                  setActiveKey(module.id);
+                  setIsMobilePanelOpen(true);
+                }}
+                className={`flex flex-col items-center justify-center py-3 text-xs ${isActive
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                  }`}
+                aria-label={module.label}
+              >
+                <Icon className="h-5 w-5" />
+                <span className="sr-only">{module.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </nav>
+    </SidebarProvider>
+  );
+}
diff --git a/blocks/application-shell8.tsx b/blocks/application-shell8.tsx
new file mode 100644
index 0000000..cce382d
--- /dev/null
+++ b/blocks/application-shell8.tsx
@@ -0,0 +1,1070 @@
+"use client";
+
+import {
+  ArchiveX,
+  BadgeCheck,
+  Bell,
+  Calendar,
+  ChevronDown,
+  ChevronsUpDown,
+  CreditCard,
+  File,
+  FileSpreadsheet,
+  Inbox,
+  LogOut,
+  Mail,
+  MoreHorizontal,
+  Send,
+  Settings,
+  Sparkles,
+  StickyNote,
+  Trash2,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+type FolderId = "inbox" | "sent" | "drafts" | "junk" | "trash";
+
+type Folder = {
+  id: FolderId;
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  count?: number;
+};
+
+const folders: Folder[] = [
+  { id: "inbox", label: "صندوق ورودی", icon: Inbox },
+  { id: "drafts", label: "پیش‌نویس‌ها", icon: File },
+  { id: "sent", label: "ارسال‌شده", icon: Send },
+  { id: "junk", label: "هرزنامه", icon: ArchiveX },
+  { id: "trash", label: "سطل زباله", icon: Trash2 },
+];
+
+const navTitleToFolderId: Record<string, FolderId> = {
+  "صندوق ورودی": "inbox",
+  "پیش‌نویس‌ها": "drafts",
+  "ارسال‌شده": "sent",
+  "هرزنامه": "junk",
+  "سطل زباله": "trash",
+};
+
+type SidebarModule = {
+  id: string;
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+
+const sidebarModules: SidebarModule[] = [
+  { id: "emails", label: "ایمیل‌ها", icon: Mail },
+  { id: "calendar", label: "تقویم", icon: Calendar },
+  { id: "contacts", label: "مخاطبین", icon: Users },
+  { id: "tasks", label: "وظایف", icon: FileSpreadsheet },
+  { id: "notes", label: "یادداشت‌ها", icon: StickyNote },
+];
+
+const userData = {
+  name: "علی رضایی",
+  email: "ali@example.com",
+  avatar:
+    "/block-media/shadcnblocks/block/avatar/avatar1.webp",
+};
+
+function getInitials(name: string) {
+  return (
+    name
+      .split(" ")
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "U"
+  );
+}
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "صندوق ورودی",
+      url: "#",
+      icon: Inbox,
+      isActive: true,
+    },
+    {
+      title: "پیش‌نویس‌ها",
+      url: "#",
+      icon: File,
+      isActive: false,
+    },
+    {
+      title: "ارسال‌شده",
+      url: "#",
+      icon: Send,
+      isActive: false,
+    },
+    {
+      title: "هرزنامه",
+      url: "#",
+      icon: ArchiveX,
+      isActive: false,
+    },
+    {
+      title: "سطل زباله",
+      url: "#",
+      icon: Trash2,
+      isActive: false,
+    },
+  ],
+  mails: [
+    {
+      id: "1",
+      name: "مریم Mitchell",
+      email: "sarah.mitchell@acme.io",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar2.webp",
+      verified: true,
+      subject: "بررسی نقشه راه محصول Q4",
+      date: "۰۹:۳۰",
+      teaser:
+        "سلام تیم، پیش‌نویس نقشه راه Q4 را آماده کردم و قبل از نهایی‌سازی هفته آینده نظر شما را می‌خواهم...",
+      read: false,
+      starred: true,
+    },
+    {
+      id: "2",
+      name: "GitHub",
+      email: "noreply@github.com",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar2.webp",
+      verified: true,
+      subject: "[acme/dashboard] ادغام PR #847",
+      date: "دیروز",
+      teaser:
+        "درخواست ادغام شما در main ادغام شد. خط لوله CI/CD شروع شده و استقرار روی staging در جریان است...",
+      read: true,
+      starred: false,
+    },
+    {
+      id: "3",
+      name: "امیر احمدی",
+      email: "alex.t@designstudio.co",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar3.webp",
+      verified: true,
+      subject: "دارایی‌های برند جدید آماده بازبینی",
+      date: "دیروز",
+      teaser:
+        "سلام! راهنمای برند و کتابخانه دارایی به‌روزرسانی شد. پالت رنگ جدید هم اضافه شده است...",
+      read: true,
+      starred: false,
+    },
+    {
+      id: "4",
+      name: "Stripe",
+      email: "notifications@stripe.com",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar4.webp",
+      verified: true,
+      subject: "واریز آذر ماه آغاز شد",
+      date: "۲ روز پیش",
+      teaser:
+        "مبلغ ۱۲٬۴۵۰ دلار آمریکا به حساب بانکی با پایان •••• 4521 در حال واریز است...",
+      read: true,
+      starred: true,
+    },
+    {
+      id: "5",
+      name: "مهدی جعفری",
+      email: "marcus@venturecap.fund",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar5.webp",
+      verified: false,
+      subject: "پیگیری: گفتگوی Series A",
+      date: "۳ روز پیش",
+      teaser:
+        "از ملاقات در TechCrunch Disrupt هفته گذشته خوشحال شدم. دوست دارم درباره رشد شما ادامه دهیم...",
+      read: true,
+      starred: false,
+    },
+    {
+      id: "6",
+      name: "Linear",
+      email: "notifications@linear.app",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar6.webp",
+      verified: true,
+      subject: "خلاصه هفتگی پروژه",
+      date: "۳ روز پیش",
+      teaser:
+        "خلاصه این هفته: ۲۳ مورد انجام‌شده، ۸ در جریان، ۵ مورد جدید ایجاد شده...",
+      read: true,
+      starred: false,
+    },
+    {
+      id: "7",
+      name: "Emma حسینی",
+      email: "emma.w@clientcorp.com",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar8.webp",
+      verified: true,
+      subject: "تمدید قرارداد  اقدام لازم",
+      date: "۴ روز پیش",
+      teaser:
+        "قرارداد سالانه ماه آینده برای تمدید است. می‌خواستم درباره سطح‌های قیمت جدید صحبت کنیم...",
+      read: false,
+      starred: false,
+    },
+    {
+      id: "8",
+      name: "Vercel",
+      email: "notifications@vercel.com",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar8.webp",
+      verified: true,
+      subject: "خطای build: acme-dashboard",
+      date: "۴ روز پیش",
+      teaser:
+        "آخرین استقرار acme-dashboard ناموفق بود. خطا: Module not found: Can't resolve 'componen...",
+      read: true,
+      starred: false,
+    },
+  ],
+};
+
+type NavItem = (typeof data.navMain)[number];
+type MailItem = (typeof data.mails)[number];
+
+function VerifiedIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 22 22"
+      className={cn("size-4 text-[#38bdf8]", className)}
+      fill="currentColor"
+    >
+      <path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z" />
+    </svg>
+  );
+}
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+}) {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {getInitials(user.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "left"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {getInitials(user.name)}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles className="me-2 size-4" />
+                ارتقا به حرفه‌ای
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck className="me-2 size-4" />
+                حساب کاربری
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard className="me-2 size-4" />
+                صورتحساب
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell className="me-2 size-4" />
+                اعلان‌ها
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
+
+interface FolderTabsProps {
+  className?: string;
+  folders: Folder[];
+  activeFolder: FolderId;
+  onFolderChange: (folderId: FolderId) => void;
+  activeEmailCount: number;
+}
+
+function FolderTabs({
+  className,
+  folders,
+  activeFolder,
+  onFolderChange,
+  activeEmailCount,
+}: FolderTabsProps) {
+  const mainFolders = folders.slice(0, 5);
+  const additionalFolders = folders.slice(5);
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      {/* Desktop: All folders visible at 2xl */}
+      <div className="hidden items-center gap-1 2xl:flex">
+        {folders.map((folder) => {
+          const Icon = folder.icon;
+          const isActive = activeFolder === folder.id;
+          return (
+            <Button
+              key={folder.id}
+              variant="ghost"
+              size="sm"
+              onClick={() => onFolderChange(folder.id)}
+              className={cn(
+                "h-[30px] gap-1.5",
+                isActive && "bg-muted text-foreground hover:bg-muted",
+              )}
+            >
+              <Icon className="size-4" />
+              <span className="text-[13px]">{folder.label}</span>
+              {isActive && (
+                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+                  {activeEmailCount.toLocaleString("fa-IR")}
+                </Badge>
+              )}
+            </Button>
+          );
+        })}
+      </div>
+
+      {/* Large: Main folders + dropdown for additional */}
+      <div className="hidden items-center gap-1 xl:flex 2xl:hidden">
+        {mainFolders.map((folder) => {
+          const Icon = folder.icon;
+          const isActive = activeFolder === folder.id;
+          return (
+            <Button
+              key={folder.id}
+              variant="ghost"
+              size="sm"
+              onClick={() => onFolderChange(folder.id)}
+              className={cn(
+                "h-[30px] gap-1.5",
+                isActive && "bg-muted text-foreground hover:bg-muted",
+              )}
+            >
+              <Icon className="size-4" />
+              <span className="text-[13px]">{folder.label}</span>
+              {isActive && (
+                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+                  {activeEmailCount.toLocaleString("fa-IR")}
+                </Badge>
+              )}
+            </Button>
+          );
+        })}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-[30px]">
+              <MoreHorizontal className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {additionalFolders.map((folder) => {
+              const Icon = folder.icon;
+              return (
+                <DropdownMenuItem
+                  key={folder.id}
+                  onClick={() => onFolderChange(folder.id)}
+                >
+                  <Icon className="me-2 size-4" />
+                  {folder.label}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Medium: First 3 folders + dropdown */}
+      <div className="hidden items-center gap-1 lg:flex xl:hidden">
+        {mainFolders.slice(0, 3).map((folder) => {
+          const Icon = folder.icon;
+          const isActive = activeFolder === folder.id;
+          return (
+            <Button
+              key={folder.id}
+              variant="ghost"
+              size="sm"
+              onClick={() => onFolderChange(folder.id)}
+              className={cn(
+                "h-[30px] gap-1.5",
+                isActive && "bg-muted text-foreground hover:bg-muted",
+              )}
+            >
+              <Icon className="size-4" />
+              <span className="text-[13px]">{folder.label}</span>
+              {isActive && (
+                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+                  {activeEmailCount.toLocaleString("fa-IR")}
+                </Badge>
+              )}
+            </Button>
+          );
+        })}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-[30px]">
+              <MoreHorizontal className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {[...mainFolders.slice(3), ...additionalFolders].map((folder) => {
+              const Icon = folder.icon;
+              return (
+                <DropdownMenuItem
+                  key={folder.id}
+                  onClick={() => onFolderChange(folder.id)}
+                >
+                  <Icon className="me-2 size-4" />
+                  {folder.label}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Small: First 2 folders + dropdown */}
+      <div className="hidden items-center gap-1 md:flex lg:hidden">
+        {mainFolders.slice(0, 2).map((folder) => {
+          const Icon = folder.icon;
+          const isActive = activeFolder === folder.id;
+          return (
+            <Button
+              key={folder.id}
+              variant="ghost"
+              size="sm"
+              onClick={() => onFolderChange(folder.id)}
+              className={cn(
+                "h-[30px] gap-1.5",
+                isActive && "bg-muted text-foreground hover:bg-muted",
+              )}
+            >
+              <Icon className="size-4" />
+              <span className="text-[13px]">{folder.label}</span>
+              {isActive && (
+                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+                  {activeEmailCount.toLocaleString("fa-IR")}
+                </Badge>
+              )}
+            </Button>
+          );
+        })}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-[30px]">
+              <MoreHorizontal className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {[...mainFolders.slice(2), ...additionalFolders].map((folder) => {
+              const Icon = folder.icon;
+              return (
+                <DropdownMenuItem
+                  key={folder.id}
+                  onClick={() => onFolderChange(folder.id)}
+                >
+                  <Icon className="me-2 size-4" />
+                  {folder.label}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Mobile: Single dropdown */}
+      <div className="flex items-center gap-1 md:hidden">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-[30px] gap-1.5">
+              {(() => {
+                const ActiveIcon =
+                  folders.find((f) => f.id === activeFolder)?.icon || Inbox;
+                return <ActiveIcon className="size-4" />;
+              })()}
+              <span className="text-[13px]">
+                {folders.find((f) => f.id === activeFolder)?.label}
+              </span>
+              <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+                {activeEmailCount.toLocaleString()}
+              </Badge>
+              <ChevronDown className="size-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {folders.map((folder) => {
+              const Icon = folder.icon;
+              const isActive = activeFolder === folder.id;
+              return (
+                <DropdownMenuItem
+                  key={folder.id}
+                  onClick={() => onFolderChange(folder.id)}
+                >
+                  <Icon className="me-2 size-4" />
+                  {folder.label}
+                  {isActive && (
+                    <span className="ms-auto text-xs text-muted-foreground">
+                      {activeEmailCount.toLocaleString("fa-IR")}
+                    </span>
+                  )}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
+
+interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  activeModule: string;
+  onModuleChange: (moduleId: string) => void;
+}
+
+export function AppSidebar({
+  activeModule,
+  onModuleChange,
+  ...props
+}: AppSidebarProps) {
+  return (
+    <Sidebar side="right" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                    alt="شاد‌سی‌ان بلاکس"
+                    className="size-6 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">ری یو آی</span>
+                  <span className="truncate text-xs">سازمانی</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent className="px-1.5 md:px-0">
+            <SidebarMenu>
+              {sidebarModules.map((moduleItem) => (
+                <SidebarMenuItem key={moduleItem.id}>
+                  <SidebarMenuButton
+                    tooltip={{
+                      children: moduleItem.label,
+                      hidden: false,
+                    }}
+                    onClick={() => onModuleChange(moduleItem.id)}
+                    isActive={activeModule === moduleItem.id}
+                    className="px-2.5 md:px-2"
+                  >
+                    <moduleItem.icon />
+                    <span>{moduleItem.label}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              tooltip={{
+                children: "تنظیمات",
+                hidden: false,
+              }}
+              className="px-2.5 md:px-2"
+              aria-label="تنظیمات"
+            >
+              <Settings />
+              <span>تنظیمات</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+interface MailSidebarProps {
+  activeItem: NavItem;
+  mails: MailItem[];
+  selectedEmailId: string | null;
+  onEmailSelect: (emailId: string) => void;
+}
+
+function MailSidebar({
+  activeItem,
+  mails,
+  selectedEmailId,
+  onEmailSelect,
+}: MailSidebarProps) {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="w-full shrink-0 border-e md:flex md:w-[320px]"
+    >
+      <SidebarHeader className="gap-3.5 border-b p-4">
+        <div className="flex w-full items-center justify-between">
+          <div className="text-start text-base font-medium text-foreground">
+            {activeItem?.title}
+          </div>
+          <Label className="flex items-center gap-2 text-sm">
+            <span>خوانده‌نشده</span>
+            <Switch className="shadow-none" />
+          </Label>
+        </div>
+        <SidebarInput placeholder="جستجو..." aria-label="جستجو" />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]>div]:!block">
+          <SidebarGroup className="px-0">
+            <SidebarGroupContent>
+              {mails.map((mail) => {
+                const isSelected = selectedEmailId === mail.id;
+                return (
+                  <button
+                    type="button"
+                    key={mail.id}
+                    onClick={() => onEmailSelect(mail.id)}
+                    className={cn(
+                      "flex w-full gap-3 border-b p-4 text-start text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                      !mail.read && "bg-muted/30",
+                      isSelected && "bg-sidebar-accent",
+                    )}
+                  >
+                    <Avatar className="mt-0.5 size-9 shrink-0">
+                      <AvatarImage src={mail.avatar} alt={mail.name} />
+                      <AvatarFallback className="bg-primary text-xs font-medium text-primary-foreground">
+                        {getInitials(mail.name)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center justify-between gap-2">
+                        <div className="flex min-w-0 items-center gap-1">
+                          <span
+                            className={cn(
+                              "truncate text-sm",
+                              !mail.read && "font-semibold",
+                            )}
+                          >
+                            {mail.name}
+                          </span>
+                          {mail.verified && (
+                            <VerifiedIcon className="size-3.5 shrink-0" />
+                          )}
+                        </div>
+                        <span className="shrink-0 text-xs text-muted-foreground">
+                          {mail.date}
+                        </span>
+                      </div>
+                      <p
+                        className={cn(
+                          "mt-0.5 truncate text-sm",
+                          !mail.read && "font-medium",
+                        )}
+                      >
+                        {mail.subject}
+                      </p>
+                      <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+                        {mail.teaser}
+                      </p>
+                    </div>
+                  </button>
+                );
+              })}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </ScrollArea>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+export function ApplicationShell8() {
+  const [activeModule, setActiveModule] = React.useState("emails");
+  const [activeFolder, setActiveFolder] = React.useState<FolderId>("inbox");
+  const [mails, setMails] = React.useState<MailItem[]>(data.mails);
+  const [selectedEmailId, setSelectedEmailId] = React.useState<string | null>(
+    data.mails[0]?.id ?? null,
+  );
+  const [isMobileDetailOpen, setIsMobileDetailOpen] = React.useState(false);
+
+  const filteredEmails = mails;
+  const selectedEmail = mails.find((m) => m.id === selectedEmailId) ?? null;
+
+  const handleModuleChange = (moduleId: string) => {
+    setActiveModule(moduleId);
+  };
+
+  const handleFolderChange = (folderId: FolderId) => {
+    setActiveFolder(folderId);
+    const mail = [...data.mails].sort(() => Math.random() - 0.5);
+    setMails(mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1)));
+  };
+
+  const handleEmailSelect = (emailId: string) => {
+    setSelectedEmailId(emailId);
+    setMails((prev) =>
+      prev.map((m) => (m.id === emailId ? { ...m, read: true } : m)),
+    );
+    if (window.innerWidth < 768) {
+      setIsMobileDetailOpen(true);
+    }
+  };
+
+  const activeItem =
+    data.navMain.find(
+      (item) => navTitleToFolderId[item.title] === activeFolder,
+    ) || data.navMain[0];
+
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      defaultOpen={false}
+      className="h-svh overflow-hidden"
+      style={
+        {
+          "--sidebar-width": "var(--sidebar-width-icon)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar
+        activeModule={activeModule}
+        onModuleChange={handleModuleChange}
+      />
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <header className="flex h-14 shrink-0 items-center justify-between border-b bg-background px-4">
+          <div className="flex items-center">
+            <div className="ms-2 flex items-center md:hidden">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                  alt="شاد‌سی‌ان بلاکس"
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+            </div>
+            {activeModule === "emails" ? (
+              <FolderTabs
+                folders={folders}
+                activeFolder={activeFolder}
+                onFolderChange={handleFolderChange}
+                activeEmailCount={filteredEmails.length}
+              />
+            ) : (
+              <div className="flex items-center gap-2">
+                {(() => {
+                  const moduleData = sidebarModules.find(
+                    (m) => m.id === activeModule,
+                  );
+                  if (!moduleData) return null;
+                  const Icon = moduleData.icon;
+                  return (
+                    <>
+                      <Icon className="size-5" />
+                      <span className="text-base font-medium">
+                        {moduleData.label}
+                      </span>
+                    </>
+                  );
+                })()}
+              </div>
+            )}
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                className="flex h-auto items-center gap-2 px-2 py-1"
+              >
+                <Avatar className="size-7">
+                  <AvatarImage src={userData.avatar} alt={userData.name} />
+                  <AvatarFallback>{getInitials(userData.name)}</AvatarFallback>
+                </Avatar>
+                <span className="hidden font-medium sm:inline">
+                  {userData.name}
+                </span>
+                <ChevronDown className="size-3 text-muted-foreground" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="start">
+              <DropdownMenuLabel className="font-normal">
+                <div className="flex flex-col space-y-1 text-start">
+                  <p className="text-sm font-medium">{userData.name}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {userData.email}
+                  </p>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <Sparkles className="me-2 size-4" />
+                  ارتقا به حرفه‌ای
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <BadgeCheck className="me-2 size-4" />
+                  حساب کاربری
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CreditCard className="me-2 size-4" />
+                  صورتحساب
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Bell className="me-2 size-4" />
+                  اعلان‌ها
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <LogOut className="me-2 size-4" />
+                خروج
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </header>
+        <div className="flex min-h-0 flex-1 overflow-hidden pb-14 md:pb-0">
+          {activeModule === "emails" && (
+            <MailSidebar
+              activeItem={activeItem}
+              mails={mails}
+              selectedEmailId={selectedEmailId}
+              onEmailSelect={handleEmailSelect}
+            />
+          )}
+          <SidebarInset className="hidden min-h-0 md:flex">
+            <ScrollArea className="flex-1">
+              <div className="flex flex-1 flex-col gap-4 p-4">
+                {activeModule === "emails" ? (
+                  Array.from({ length: 24 }).map((_, index) => (
+                    <div
+                      key={index}
+                      className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+                    />
+                  ))
+                ) : (
+                  <div className="flex h-full items-center justify-center text-muted-foreground">
+                    <div className="text-center">
+                      {(() => {
+                        const moduleData = sidebarModules.find(
+                          (m) => m.id === activeModule,
+                        );
+                        if (!moduleData) return null;
+                        const Icon = moduleData.icon;
+                        return (
+                          <>
+                            <Icon className="mx-auto size-12 opacity-50" />
+                            <p className="mt-2 text-sm">
+                              محتوای {moduleData.label} به‌زودی
+                            </p>
+                          </>
+                        );
+                      })()}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </SidebarInset>
+        </div>
+      </div>
+
+      <Drawer
+        open={isMobileDetailOpen}
+        onOpenChange={setIsMobileDetailOpen}
+        dismissible
+      >
+        <DrawerContent dir="rtl" className="h-[90vh] text-start md:hidden">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>جزئیات ایمیل</DrawerTitle>
+          </DrawerHeader>
+          <div className="flex h-full flex-col">
+            {selectedEmail ? (
+              <ScrollArea className="flex-1 p-4">
+                <div className="space-y-4">
+                  <div className="flex items-start gap-3">
+                    <Avatar className="size-10 shrink-0">
+                      <AvatarImage
+                        src={selectedEmail.avatar}
+                        alt={selectedEmail.name}
+                      />
+                      <AvatarFallback className="bg-primary font-medium text-primary-foreground">
+                        {getInitials(selectedEmail.name)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-1">
+                        <span className="font-medium">
+                          {selectedEmail.name}
+                        </span>
+                        {selectedEmail.verified && (
+                          <VerifiedIcon className="size-4" />
+                        )}
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        {selectedEmail.email}
+                      </p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        {selectedEmail.date}
+                      </p>
+                    </div>
+                  </div>
+                  <h1 className="text-xl font-medium">
+                    {selectedEmail.subject}
+                  </h1>
+                  <p className="text-sm leading-relaxed text-muted-foreground">
+                    {selectedEmail.teaser}
+                  </p>
+                </div>
+              </ScrollArea>
+            ) : (
+              <div className="flex flex-1 items-center justify-center text-muted-foreground">
+                <Mail className="size-12 opacity-50" />
+              </div>
+            )}
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      <nav
+        aria-label="ناوبری پایین موبایل"
+        className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden"
+      >
+        <div className="grid grid-cols-5">
+          {sidebarModules.map((moduleItem) => {
+            const Icon = moduleItem.icon;
+            const isActive = activeModule === moduleItem.id;
+            return (
+              <button
+                key={moduleItem.id}
+                type="button"
+                onClick={() => setActiveModule(moduleItem.id)}
+                className={cn(
+                  "flex flex-col items-center justify-center py-3 text-xs",
+                  isActive
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+                aria-label={moduleItem.label}
+              >
+                <Icon className="size-5" />
+                <span className="sr-only">{moduleItem.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </nav>
+    </SidebarProvider>
+  );
+}
diff --git a/blocks/application-shell9.tsx b/blocks/application-shell9.tsx
new file mode 100644
index 0000000..7529a0a
--- /dev/null
+++ b/blocks/application-shell9.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+import {
+  ChevronRight,
+  File,
+  Folder,
+  GitBranch,
+  History,
+  MessageSquare,
+  PanelRight,
+  Play,
+  Plus,
+  Search,
+  Settings,
+  User,
+} from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+type SidebarModule = {
+  id: string;
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+
+const sidebarModules: SidebarModule[] = [
+  { id: "search", label: "جستجو", icon: Search },
+  { id: "explorer", label: "مرورگر", icon: File },
+  { id: "git", label: "کنترل منبع", icon: GitBranch },
+];
+
+const changesData = [
+  { file: "README.md", state: "M" },
+  { file: "api/hello/route.ts", state: "U" },
+  { file: "app/layout.tsx", state: "M" },
+];
+
+type TreeItem = string | TreeItem[];
+
+const fileTreeData: TreeItem[] = [
+  [
+    "app",
+    [
+      "api",
+      ["hello", ["route.ts"]],
+      "page.tsx",
+      "layout.tsx",
+      ["blog", ["page.tsx"]],
+    ],
+  ],
+  ["components", ["ui", "button.tsx", "card.tsx"], "header.tsx", "footer.tsx"],
+  ["lib", ["util.ts"]],
+  ["public", "favicon.ico", "vercel.svg"],
+  ".eslintrc.json",
+  ".gitignore",
+  "next.config.js",
+  "tailwind.config.js",
+  "package.json",
+  "README.md",
+];
+
+function Logo({ className }: { className?: string }) {
+  return (
+    <img
+      src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+      alt="شاد‌سی‌ان بلاکس"
+      className={cn("size-5 dark:invert", className)}
+    />
+  );
+}
+
+function Tree({ item }: { item: TreeItem }) {
+  const [name, ...items] = Array.isArray(item) ? item : [item];
+
+  if (!items.length) {
+    return (
+      <SidebarMenuButton className="data-[active=true]:bg-transparent">
+        <File className="size-4" />
+        {name}
+      </SidebarMenuButton>
+    );
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "app" || name === "components"}
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton>
+            <ChevronRight className="size-4 transition-transform rtl:rotate-180" />
+            <Folder className="size-4" />
+            {name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  );
+}
+
+interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  activeModule: string;
+  onModuleChange: (moduleId: string) => void;
+}
+
+export function AppSidebar({
+  activeModule,
+  onModuleChange,
+  ...props
+}: AppSidebarProps) {
+  return (
+    <Sidebar side="right" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                    alt="شاد‌سی‌ان بلاکس"
+                    className="size-5 invert dark:invert-0"
+                  />
+                </div>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">ری یو آی</span>
+                  <span className="truncate text-xs">پروژه من</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent className="px-1.5 md:px-0">
+            <SidebarMenu>
+              {sidebarModules.map((module) => (
+                <SidebarMenuItem key={module.id}>
+                  <SidebarMenuButton
+                    tooltip={{
+                      children: module.label,
+                      hidden: false,
+                    }}
+                    onClick={() => onModuleChange(module.id)}
+                    isActive={activeModule === module.id}
+                    className="px-2.5 md:px-2"
+                  >
+                    <module.icon />
+                    <span>{module.label}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              tooltip={{
+                children: "تنظیمات",
+                hidden: false,
+              }}
+              className="px-2.5 md:px-2"
+              aria-label="تنظیمات"
+            >
+              <Settings />
+              <span>تنظیمات</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              tooltip={{
+                children: "پروفایل",
+                hidden: false,
+              }}
+              className="px-2.5 md:px-2"
+              aria-label="پروفایل"
+            >
+              <User />
+              <span>پروفایل</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+function ExplorerSidebar() {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="w-full shrink-0 border-e md:flex md:w-[280px]"
+    >
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>تغییرات</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {changesData.map((item, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuButton>
+                    <File className="size-4" />
+                    <span className="truncate">{item.file}</span>
+                  </SidebarMenuButton>
+                  <SidebarMenuBadge
+                    className={cn(
+                      "text-[10px] font-medium",
+                      item.state === "M" && "text-yellow-500",
+                      item.state === "U" && "text-green-500",
+                      item.state === "D" && "text-red-500",
+                    )}
+                  >
+                    {item.state}
+                  </SidebarMenuBadge>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>فایل‌ها</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {fileTreeData.map((item, index) => (
+                <Tree key={index} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+function SearchSidebar() {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="w-full shrink-0 border-e md:flex md:w-[280px]"
+    >
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>جستجو</SidebarGroupLabel>
+          <SidebarGroupContent className="px-2">
+            <div className="flex items-center rounded-md border bg-background px-3 py-2">
+              <Search className="me-2 size-4 shrink-0 text-muted-foreground" />
+              <input
+                type="search"
+                placeholder="جستجوی فایل‌ها..."
+                aria-label="جستجوی فایل‌ها"
+                className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              />
+            </div>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+function GitSidebar() {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="w-full shrink-0 border-e md:flex md:w-[280px]"
+    >
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>تغییرات</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {changesData.map((item, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuButton>
+                    <File className="size-4" />
+                    <span className="truncate">{item.file}</span>
+                  </SidebarMenuButton>
+                  <SidebarMenuBadge
+                    className={cn(
+                      "text-[10px] font-medium",
+                      item.state === "M" && "text-yellow-500",
+                      item.state === "U" && "text-green-500",
+                      item.state === "D" && "text-red-500",
+                    )}
+                  >
+                    {item.state}
+                  </SidebarMenuBadge>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+type MobileDrawer = "search" | "explorer" | "git" | "chat" | null;
+
+export function ApplicationShell9() {
+  const [activeModule, setActiveModule] = React.useState("explorer");
+  const [isChatOpen, setIsChatOpen] = React.useState(false);
+  const [mobileDrawer, setMobileDrawer] = React.useState<MobileDrawer>(null);
+
+  const handleModuleChange = (moduleId: string) => {
+    setActiveModule(moduleId);
+  };
+
+  const renderSidebar = () => {
+    switch (activeModule) {
+      case "search":
+        return <SearchSidebar />;
+      case "explorer":
+        return <ExplorerSidebar />;
+      case "کنترل نسخه":
+        return <GitSidebar />;
+      default:
+        return <ExplorerSidebar />;
+    }
+  };
+
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className="h-svh overflow-hidden"
+      style={
+        {
+          "--sidebar-width": "var(--sidebar-width-icon)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar
+        activeModule={activeModule}
+        onModuleChange={handleModuleChange}
+        className="hidden md:flex"
+      />
+
+      <div className="flex h-full w-full flex-col md:hidden">
+        <header className="flex h-12 shrink-0 items-center justify-between border-b bg-background px-3">
+          <div className="flex items-center gap-2">
+            <div className="flex aspect-square size-7 items-center justify-center rounded-sm bg-primary">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                alt="شاد‌سی‌ان بلاکس"
+                className="size-4 invert dark:invert-0"
+              />
+            </div>
+            <span className="text-sm font-medium">پروژه من</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              aria-label="افزودن"
+            >
+              <Plus className="size-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              aria-label="تنظیمات"
+            >
+              <Settings className="size-4" />
+            </Button>
+          </div>
+        </header>
+
+        <div className="flex flex-1 items-center justify-center bg-muted/30">
+          <Logo className="size-16 opacity-30" />
+        </div>
+
+        <div className="flex h-14 shrink-0 items-center justify-around border-t bg-background">
+          <button
+            type="button"
+            onClick={() => setMobileDrawer("search")}
+            className={cn(
+              "flex items-center justify-center rounded-md p-2",
+              mobileDrawer === "search"
+                ? "text-foreground"
+                : "text-muted-foreground",
+            )}
+            aria-label="جستجو"
+          >
+            <Search className="size-5" />
+            <span className="sr-only">جستجو</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setMobileDrawer("explorer")}
+            className={cn(
+              "flex items-center justify-center rounded-md p-2",
+              mobileDrawer === "explorer"
+                ? "text-foreground"
+                : "text-muted-foreground",
+            )}
+            aria-label="مرورگر"
+          >
+            <File className="size-5" />
+            <span className="sr-only">مرورگر</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setMobileDrawer("git")}
+            className={cn(
+              "flex items-center justify-center rounded-md p-2",
+              mobileDrawer === "git"
+                ? "text-foreground"
+                : "text-muted-foreground",
+            )}
+            aria-label="کنترل منبع"
+          >
+            <GitBranch className="size-5" />
+            <span className="sr-only">کنترل منبع</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setMobileDrawer("chat")}
+            className={cn(
+              "flex items-center justify-center rounded-md p-2",
+              mobileDrawer === "chat"
+                ? "text-foreground"
+                : "text-muted-foreground",
+            )}
+            aria-label="گفتگو"
+          >
+            <MessageSquare className="size-5" />
+            <span className="sr-only">گفتگو</span>
+          </button>
+        </div>
+
+        <Drawer
+          open={mobileDrawer === "search"}
+          onOpenChange={(open) => setMobileDrawer(open ? "search" : null)}
+        >
+          <DrawerContent dir="rtl" className="text-start">
+            <DrawerHeader>
+              <DrawerTitle className="text-start">جستجو</DrawerTitle>
+            </DrawerHeader>
+            <div className="p-4">
+              <div className="flex items-center rounded-md border bg-background px-3 py-2">
+                <Search className="me-2 size-4 shrink-0 text-muted-foreground" />
+                <input
+                  type="search"
+                  placeholder="جستجوی فایل‌ها..."
+                  aria-label="جستجوی فایل‌ها"
+                  className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                />
+              </div>
+            </div>
+          </DrawerContent>
+        </Drawer>
+
+        <Drawer
+          open={mobileDrawer === "explorer"}
+          onOpenChange={(open) => setMobileDrawer(open ? "explorer" : null)}
+        >
+          <DrawerContent dir="rtl" className="max-h-[85vh] text-start">
+            <DrawerHeader>
+              <DrawerTitle className="text-start">فایل‌ها</DrawerTitle>
+            </DrawerHeader>
+            <ScrollArea className="h-[60vh] [&>[data-slot=scroll-area-viewport]>div]:!block">
+              <SidebarContent>
+                <SidebarGroup>
+                  <SidebarGroupLabel>تغییرات</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      {changesData.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                          <SidebarMenuButton>
+                            <File className="size-4" />
+                            <span className="truncate">{item.file}</span>
+                          </SidebarMenuButton>
+                          <SidebarMenuBadge
+                            className={cn(
+                              "text-[10px] font-medium",
+                              item.state === "M" && "text-yellow-500",
+                              item.state === "U" && "text-green-500",
+                              item.state === "D" && "text-red-500",
+                            )}
+                          >
+                            {item.state}
+                          </SidebarMenuBadge>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+                <SidebarGroup>
+                  <SidebarGroupLabel>فایل‌ها</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      {fileTreeData.map((item, index) => (
+                        <Tree key={index} item={item} />
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              </SidebarContent>
+            </ScrollArea>
+          </DrawerContent>
+        </Drawer>
+
+        <Drawer
+          open={mobileDrawer === "git"}
+          onOpenChange={(open) => setMobileDrawer(open ? "git" : null)}
+        >
+          <DrawerContent dir="rtl" className="max-h-[85vh] text-start">
+            <DrawerHeader>
+              <DrawerTitle className="text-start">کنترل منبع</DrawerTitle>
+            </DrawerHeader>
+            <ScrollArea className="h-[60vh] [&>[data-slot=scroll-area-viewport]>div]:!block">
+              <SidebarContent>
+                <SidebarGroup>
+                  <SidebarGroupLabel>تغییرات</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      {changesData.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                          <SidebarMenuButton>
+                            <File className="size-4" />
+                            <span className="truncate">{item.file}</span>
+                          </SidebarMenuButton>
+                          <SidebarMenuBadge
+                            className={cn(
+                              "text-[10px] font-medium",
+                              item.state === "M" && "text-yellow-500",
+                              item.state === "U" && "text-green-500",
+                              item.state === "D" && "text-red-500",
+                            )}
+                          >
+                            {item.state}
+                          </SidebarMenuBadge>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              </SidebarContent>
+            </ScrollArea>
+          </DrawerContent>
+        </Drawer>
+
+        <Drawer
+          open={mobileDrawer === "chat"}
+          onOpenChange={(open) => setMobileDrawer(open ? "chat" : null)}
+        >
+          <DrawerContent dir="rtl" className="max-h-[85vh] text-start">
+            <DrawerHeader>
+              <DrawerTitle className="text-start">گفتگو</DrawerTitle>
+            </DrawerHeader>
+            <div className="flex h-[60vh] flex-col">
+              <ScrollArea className="flex-1 p-4">
+                <div className="flex justify-end">
+                  <div className="max-w-[85%] rounded-2xl rounded-ee-sm bg-primary px-4 py-3 text-sm text-primary-foreground">
+                    یک لندینگ برای ری یو آی با بخش قهرمان، شبکه
+                    ویژگی‌ها و جدول قیمت‌گذاری بساز
+                  </div>
+                </div>
+              </ScrollArea>
+              <div className="border-t p-3">
+                <div className="rounded-lg border bg-background">
+                  <textarea
+                    placeholder="توضیح دهید چه چیزی می‌خواهید بسازید..."
+                    rows={3}
+                    className="w-full resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
+                  />
+                  <div className="flex items-center justify-between border-t px-3 py-2">
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <span>اینتر برای ارسال</span>
+                    </div>
+                    <Button size="sm" className="h-7 gap-1.5 px-3">
+                      <span>ارسال</span>
+                      <ChevronRight className="size-3 rtl:rotate-180" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </div>
+
+      <div className="hidden min-w-0 flex-1 flex-col overflow-hidden md:flex">
+        <header className="flex h-12 shrink-0 items-center justify-between border-b bg-background px-4">
+          <nav className="flex items-center gap-1 text-sm">
+            <span className="font-medium">ری یو آی</span>
+            <ChevronRight className="size-4 text-muted-foreground rtl:rotate-180" />
+            <span className="text-muted-foreground">پروژه من</span>
+          </nav>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" className="h-8 gap-1.5">
+              <Play className="size-4" />
+              <span>پیش‌نمایش</span>
+            </Button>
+            <Button variant="ghost" size="icon" className="size-8">
+              <Plus className="size-4" />
+            </Button>
+            <Button variant="ghost" size="icon" className="size-8">
+              <History className="size-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn("size-8", isChatOpen && "bg-muted")}
+              onClick={() => setIsChatOpen(!isChatOpen)}
+            >
+              <PanelRight className="size-4" />
+            </Button>
+          </div>
+        </header>
+
+        <div className="flex min-h-0 flex-1 overflow-hidden">
+          {renderSidebar()}
+
+          <SidebarInset className="min-h-0 flex-col overflow-hidden">
+            <div className="flex flex-1 overflow-hidden">
+              <div
+                className={cn(
+                  "flex flex-1 items-center justify-center bg-muted/30",
+                )}
+              >
+                {!isChatOpen ? (
+                  <div className="flex flex-col items-center gap-4 text-center">
+                    <Logo className="size-16 opacity-30" />
+                    <div className="space-y-2">
+                      <h3 className="text-lg font-medium">شروع ساخت</h3>
+                      <p className="max-w-sm text-sm text-muted-foreground">
+                        توضیح دهید چه چیزی می‌خواهید بسازید تا هوش مصنوعی
+                        کمک کند
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => setIsChatOpen(true)}
+                      className="gap-2"
+                    >
+                      <MessageSquare className="size-4" />
+                      باز کردن گفتگو
+                    </Button>
+                  </div>
+                ) : (
+                  <Logo className="size-16 opacity-30" />
+                )}
+              </div>
+
+              {isChatOpen && (
+                <div className="flex w-[400px] shrink-0 flex-col border-s">
+                  <div className="flex h-10 items-center justify-between border-b px-4">
+                    <div className="flex items-center gap-2">
+                      <MessageSquare className="size-4" />
+                      <span className="text-sm font-medium">گفتگو</span>
+                    </div>
+                  </div>
+                  <ScrollArea className="flex-1 p-4">
+                    <div className="flex justify-end">
+                      <div className="max-w-[85%] rounded-2xl rounded-ee-sm bg-primary px-4 py-3 text-sm text-primary-foreground">
+                        یک لندینگ برای ری یو آی با بخش قهرمان، شبکه
+                        ویژگی‌ها و جدول قیمت‌گذاری بساز
+                      </div>
+                    </div>
+                  </ScrollArea>
+
+                  <div className="border-t p-3">
+                    <div className="rounded-lg border bg-background">
+                      <textarea
+                        placeholder="توضیح دهید چه چیزی می‌خواهید بسازید..."
+                        rows={3}
+                        className="w-full resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
+                      />
+                      <div className="flex items-center justify-between border-t px-3 py-2">
+                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                          <span>اینتر برای ارسال</span>
+                        </div>
+                        <Button size="sm" className="h-7 gap-1.5 px-3">
+                          <span>ارسال</span>
+                          <ChevronRight className="size-3 rtl:rotate-180" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </SidebarInset>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}
diff --git a/blocks/awards1.tsx b/blocks/awards1.tsx
new file mode 100644
index 0000000..e79347c
--- /dev/null
+++ b/blocks/awards1.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Awards1Props {
+  className?: string;
+}
+
+const faYear = (year: number) => year.toLocaleString("fa-IR");
+
+const Awards1 = ({ className }: Awards1Props) => {
+  const awards = [
+    {
+      name: "برنده جوایز طراحی استایل‌دهی",
+      description:
+        "به پاس کیفیت ممتاز در طراحی و عملکرد وب مورد تقدیر قرار گرفته است.",
+      year: 2024,
+      url: "#",
+    },
+    {
+      name: "سایت روز Awwwards",
+      description:
+        "به دلیل نوآوری و خلاقیت در توسعه وب برگزیده شده است.",
+      year: 2023,
+      url: "#",
+    },
+    {
+      name: "بلاک‌های رابط ری یو آی",
+      description:
+        "به دلیل طراحی رابط کاربری و تجربه کاربری ممتاز مورد تقدیر قرار گرفته است.",
+      year: 2023,
+      url: "https://www.ShadcnBlocks",
+    },
+    {
+      name: "تعالی در طراحی وب",
+      description:
+        "به پاس کیفیت بالای طراحی و اجرای فنی مورد تقدیر قرار گرفته است.",
+      year: 2022,
+      url: "#",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container space-y-10 lg:space-y-12">
+        <h1 className="max-w-md text-2xll tracking-tighter lg:text-2xll">
+          جوایز
+        </h1>
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="h-12 border-b text-start text-sm text-foreground/80">
+              <th className="font-semibold">جایزه</th>
+              <th className="font-semibold">توضیحات</th>
+              <th className="text-end font-semibold">سال</th>
+            </tr>
+          </thead>
+          <tbody>
+            {awards.map((award, index) => (
+              <tr
+                key={index}
+                className="h-20 border-b text-start text-sm text-foreground/40"
+              >
+                <td className="text-lg font-light tracking-tight text-foreground lg:text-xl">
+                  <a
+                    href={award.url}
+                    target={award.url.startsWith("http") ? "_blank" : undefined}
+                    rel={
+                      award.url.startsWith("http")
+                        ? "noopener noreferrer"
+                        : undefined
+                    }
+                    className="hover:underline"
+                    title={award.name}
+                  >
+                    {award.name}
+                  </a>
+                </td>
+                <td>{award.description}</td>
+                <td className="text-end text-foreground">
+                  {faYear(award.year)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+};
+
+export { Awards1 };
diff --git a/blocks/awards2.tsx b/blocks/awards2.tsx
new file mode 100644
index 0000000..77f3efd
--- /dev/null
+++ b/blocks/awards2.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Awards2Props {
+  className?: string;
+}
+
+const faYear = (year: number) => year.toLocaleString("fa-IR");
+
+const Awards2 = ({ className }: Awards2Props) => {
+  const awards = [
+    { title: "جایزه همکاری خلاقانه", year: 2023 },
+    { title: "جایزه تعالی طراحی", year: 2023 },
+    { title: "نوآوری در توسعه وب", year: 2022 },
+    { title: "بهترین طراحی تجربه کاربری", year: 2022 },
+    { title: "طراحی بصری برجسته", year: 2021 },
+    { title: "جایزه نوآوری دیجیتال", year: 2021 },
+    { title: "تعالی فناوری خلاقانه", year: 2020 },
+    { title: "بهترین طراحی تعاملی", year: 2020 },
+    { title: "دستاورد طراحی وب", year: 2019 },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-20 lg:grid-cols-6">
+          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 py-8 lg:sticky">
+            <span className="size-3 bg-orange-500" />
+            <p className="text-xl text-foreground/30">جوایز</p>
+          </div>
+          <ul className="col-span-4 w-full">
+            {awards.map((award, index) => (
+              <li key={index} className="flex justify-between border-b py-4">
+                <h3 className="text-xl font-medium tracking-tight">
+                  {award.title}
+                </h3>
+                <p className="font-mono text-lg tracking-tighter text-foreground/50">
+                  {faYear(award.year)}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Awards2 };
diff --git a/blocks/awards3.tsx b/blocks/awards3.tsx
new file mode 100644
index 0000000..8ad54dd
--- /dev/null
+++ b/blocks/awards3.tsx
@@ -0,0 +1,75 @@
+import { MoveUpRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const faYear = (year: number) => year.toLocaleString("fa-IR");
+
+const awards = [
+  {
+    title: "جایزه طراحی پیکسل‌محور",
+    categories: ["طراحی دیجیتال", "رابط و تجربه کاربری"],
+    year: 2023,
+    color: "bg-amber-300",
+  },
+  {
+    title: "جایزه برترین مهارت فنی",
+    categories: ["توسعه وب", "نوآوری"],
+    year: 2023,
+    color: "bg-red-500",
+  },
+  {
+    title: "جایزه برترین راهبرد",
+    categories: ["راهبرد محصول", "اثر بازار"],
+    year: 2022,
+    color: "bg-blue-500",
+  },
+];
+
+interface Awards3Props {
+  className?: string;
+}
+
+const Awards3 = ({ className }: Awards3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-6 text-xl font-semibold tracking-tighter text-foreground sm:text-xl lg:text-3xl">
+          جوایز و تقدیرها
+        </h2>
+        <p className="mb-6 max-w-3xl text-base text-muted-foreground">
+          تعهد ما به کیفیت، نوآوری و خلق تجربه‌های ارزشمند، زمینه‌ساز دریافت این افتخارات بوده است. این دستاوردها انگیزه‌ای برای ادامه مسیر و ارائه راهکارهای بهتر هستند.
+                          </p>
+
+        {awards.map((award, index) => (
+          <div
+            key={index}
+            className="group relative flex items-start gap-4 overflow-hidden border-b border-border p-4"
+          >
+            <div className="absolute inset-0 z-0 translate-y-full bg-accent transition-transform duration-300 ease-in-out group-hover:translate-y-0" />
+
+            <div className="relative z-10 flex-1 space-y-2 pb-4">
+              <div className="flex items-center gap-4">
+                <div
+                  className={`h-5 w-5 rounded-md ${award.color} flex items-center justify-center`}
+                ></div>
+                <h3 className="rounded-md font-medium">{award.title}</h3>
+              </div>
+              <p className="flex gap-x-2 ps-9 text-sm text-muted-foreground">
+                {award.categories.map((category, index) => (
+                  <span key={index}>{category}</span>
+                ))}
+              </p>
+              <p className="ps-9 text-sm text-muted-foreground">
+                {faYear(award.year)}
+              </p>
+            </div>
+
+            <MoveUpRight className="relative z-10 mt-1 h-4 w-4 text-muted-foreground rtl:-scale-x-100" />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Awards3 };
diff --git a/blocks/awards4.tsx b/blocks/awards4.tsx
new file mode 100644
index 0000000..30e2e6f
--- /dev/null
+++ b/blocks/awards4.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Awards4Props {
+  className?: string;
+}
+
+const faYear = (year: number) => year.toLocaleString("fa-IR");
+
+const faRowNum = (index: number) =>
+  `(${(index + 1).toLocaleString("fa-IR", { minimumIntegerDigits: 3 })})`;
+
+const Awards4 = ({ className }: Awards4Props) => {
+  const awards = [
+    {
+      name: "برنده جوایز طراحی استایل‌دهی",
+      description:
+        "به پاس کیفیت ممتاز در طراحی و عملکرد وب مورد تقدیر قرار گرفته است.",
+      year: 2024,
+      logo: "/block-media/shadcnblocks/block/block-1.svg",
+    },
+    {
+      name: "سایت روز Awwwards",
+      description:
+        "به دلیل نوآوری و خلاقیت در توسعه وب برگزیده شده است.",
+      year: 2023,
+      logo: "/block-media/shadcnblocks/block/block-2.svg",
+    },
+    {
+      name: "بهترین طراحی رابط و تجربه کاربری",
+      description:
+        "به دلیل طراحی رابط کاربری و تجربه کاربری ممتاز مورد تقدیر قرار گرفته است.",
+      year: 2023,
+      logo: "/block-media/shadcnblocks/block/block-3.svg",
+    },
+    {
+      name: "تعالی در طراحی وب",
+      description:
+        "به پاس کیفیت بالای طراحی و اجرای فنی مورد تقدیر قرار گرفته است.",
+      year: 2022,
+      logo: "/block-media/shadcnblocks/block/block-4.svg",
+    },
+    {
+      name: "اپلیکیشن موبایل سال",
+      description:
+        "به دلیل نوآوری در طراحی موبایل و ارائه تجربه کاربری برتر مورد تقدیر قرار گرفته است.",
+      year: 2022,
+      logo: "/block-media/shadcnblocks/block/block-5.svg",
+    },
+    {
+      name: "جایزه نوآوری دیجیتال",
+      description:
+        "به دلیل ارائه راهکارهای دیجیتال نوآورانه و فناوری خلاقانه مورد تقدیر قرار گرفته است.",
+      year: 2021,
+      logo: "/block-media/shadcnblocks/block/block-6.svg",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container space-y-10 lg:space-y-20">
+        <div className="flex w-full items-end justify-between">
+          <h1 className="text-2xll font-semibold tracking-tighter lg:text-8xl">
+            جوایز
+          </h1>
+          <h2 className="text-lg font-semibold tracking-tighter lg:text-3xl">
+            (۲۱۵–۲۲۵©)
+          </h2>
+        </div>
+
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="h-12 border-b text-start text-foreground/40">
+              <th className="hidden min-w-30 font-normal lg:table-cell lg:min-w-40"></th>
+              <th className="font-normal">نام</th>
+              <th className="hidden font-normal md:table-cell">نامزدی</th>
+              <th className="text-end font-normal">سال</th>
+            </tr>
+          </thead>
+          <tbody>
+            {awards.map((award, index) => (
+              <tr
+                key={index}
+                className="h-20 border-b text-start text-foreground/40"
+              >
+                <td className="hidden font-medium tracking-tight text-foreground/50 lg:table-cell">
+                  {faRowNum(index)}
+                </td>
+                <td className="text-lg font-medium tracking-tight text-foreground lg:text-xl">
+                  <div className="flex items-center gap-2">
+                    <span className="size-8 rounded-xl bg-foreground object-cover p-1.5">
+                      <img
+                        src={award.logo}
+                        className="invert"
+                        alt={award.name}
+                      />
+                    </span>
+                    {award.name}
+                  </div>
+                </td>
+                <td className="hidden md:table-cell">{award.description}</td>
+                <td className="text-end text-foreground">
+                  {faYear(award.year)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+};
+
+export { Awards4 };
diff --git a/blocks/awards5.tsx b/blocks/awards5.tsx
new file mode 100644
index 0000000..a1a40e2
--- /dev/null
+++ b/blocks/awards5.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { motion, useSpring } from "framer-motion";
+import React, { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Awards5Props {
+  className?: string;
+}
+
+const faOrder = (index: number) => (index + 1).toLocaleString("fa-IR");
+
+const Awards5 = ({ className }: Awards5Props) => {
+  const SPRING = {
+    mass: 0.1,
+    stiffness: 100,
+    damping: 10,
+  };
+
+  const xSpring = useSpring(0, SPRING);
+  const ySpring = useSpring(0, SPRING);
+  const scaleSpring = useSpring(0, SPRING);
+  const opacity = useSpring(0, SPRING);
+
+  const awards = [
+    {
+      title: "جایزه همکاری خلاقانه",
+      url: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img1.png",
+    },
+    {
+      title: "جایزه تعالی طراحی",
+      url: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img2.png",
+    },
+    {
+      title: "نوآوری در توسعه وب",
+      url: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img3.png",
+    },
+    {
+      title: "بهترین طراحی تجربه کاربری",
+      url: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img4.png",
+    },
+    {
+      title: "طراحی بصری برجسته",
+      url: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img5.png",
+    },
+    {
+      title: "جایزه نوآوری دیجیتال",
+      url: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img6.png",
+    },
+  ];
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLUListElement>) => {
+    const bounds = e.currentTarget.getBoundingClientRect();
+    xSpring.set(e.clientX - bounds.left + 20);
+    ySpring.set(e.clientY - bounds.top + 20);
+  };
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="font-hedvigLettersSerif container">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
+          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 py-8 lg:sticky">
+            <p className="text-xl text-foreground/30">
+              {Number(5).toLocaleString("fa-IR")} جوایز
+            </p>
+          </div>
+          <ul
+            onPointerMove={handlePointerMove}
+            onPointerEnter={() => {
+              opacity.set(1);
+              scaleSpring.set(1);
+            }}
+            onPointerLeave={() => {
+              opacity.set(0);
+              scaleSpring.set(0);
+            }}
+            className="relative col-span-4 w-full"
+          >
+            {awards.map((award, index) => (
+              <li
+                key={index}
+                onPointerEnter={() => {
+                  setCurrentIndex(index);
+                }}
+                className="group relative flex cursor-pointer items-center justify-between border-b py-5"
+              >
+                <h3 className="text-xl font-medium tracking-tight lg:text-2xll">
+                  {award.title}
+                  <sup className="align-top text-xs lg:text-sm">
+                    {faOrder(index)}
+                  </sup>
+                </h3>
+                <a
+                  href={award.url}
+                  className="text-sm tracking-tighter text-foreground/30 hover:text-foreground"
+                >
+                  مشاهده جایزه
+                </a>
+              </li>
+            ))}
+            <motion.div
+              className="pointer-events-none absolute top-0 inset-s-0 size-40 border"
+              style={{
+                x: xSpring,
+                y: ySpring,
+                opacity: opacity,
+                scale: scaleSpring,
+              }}
+            >
+              <img
+                src={awards[currentIndex].image}
+                alt={awards[currentIndex].title}
+                className="h-full w-full object-cover"
+              />
+            </motion.div>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Awards5 };
diff --git a/blocks/background-pattern1.tsx b/blocks/background-pattern1.tsx
new file mode 100644
index 0000000..3976b2a
--- /dev/null
+++ b/blocks/background-pattern1.tsx
@@ -0,0 +1,25 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern1Props {
+  className?: string;
+}
+
+const BackgroundPattern1 = ({ className }: BackgroundPattern1Props) => {
+  return (
+    <section className={cn("relative min-h-screen w-full", className)}>
+      <PatternPlaceholder />
+      {/* Background Pattern */}
+      {/* Top Primary Radial Background Pattern */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(125% 125% at 50% 10%, var(--background) 40%, var(--primary) 100%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export { BackgroundPattern1 };
diff --git a/blocks/background-pattern10.tsx b/blocks/background-pattern10.tsx
new file mode 100644
index 0000000..9c70ea0
--- /dev/null
+++ b/blocks/background-pattern10.tsx
@@ -0,0 +1,32 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern10Props {
+  className?: string;
+}
+
+const BackgroundPattern10 = ({ className }: BackgroundPattern10Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Basic Center Grid (corner hide) Background */}
+      <div
+        className="absolute inset-0 z-0 bg-[linear-gradient(to_right,_var(--muted)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--muted)_1px,_transparent_1px)] bg-[length:40px_40px]"
+        style={{
+          WebkitMaskImage:
+            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
+          maskImage:
+            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern10 };
diff --git a/blocks/background-pattern100.tsx b/blocks/background-pattern100.tsx
new file mode 100644
index 0000000..3314746
--- /dev/null
+++ b/blocks/background-pattern100.tsx
@@ -0,0 +1,68 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern100Props {
+  className?: string;
+}
+
+const BackgroundPattern100 = ({ className }: BackgroundPattern100Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Gradient Blend with Noise */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background: `
+            radial-gradient(circle 900px at 0% 100%, 
+              oklch(from var(--chart-1) calc(l * 1.1) calc(c * 1.8) h / 0.8) 0%,
+              oklch(from var(--chart-1) calc(l * 0.9) calc(c * 1.6) h / 0.6) 25%,
+              oklch(from var(--chart-1) calc(l * 0.8) calc(c * 1.4) h / 0.3) 50%,
+              transparent 80%
+            ),
+            radial-gradient(circle 900px at 100% 100%, 
+              oklch(from var(--chart-2) calc(l * 1.1) calc(c * 1.8) h / 0.8) 0%,
+              oklch(from var(--chart-2) calc(l * 0.9) calc(c * 1.6) h / 0.6) 25%,
+              oklch(from var(--chart-2) calc(l * 0.8) calc(c * 1.4) h / 0.3) 50%,
+              transparent 80%
+            ),
+            var(--background)
+          `,
+          filter: "blur(120px)",
+        }}
+      />
+
+      <div className="pointer-events-none absolute inset-0 z-10">
+        <svg
+          className="h-full w-full opacity-30"
+          style={{ mixBlendMode: "overlay" }}
+        >
+          <filter id="noise-pattern">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.8"
+              numOctaves="4"
+              stitchTiles="stitch"
+              seed="2"
+            />
+            <feColorMatrix type="saturate" values="0" />
+          </filter>
+          <rect
+            width="100%"
+            height="100%"
+            filter="url(#noise-pattern)"
+            fill="white"
+          />
+        </svg>
+      </div>
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern100 };
diff --git a/blocks/background-pattern11.tsx b/blocks/background-pattern11.tsx
new file mode 100644
index 0000000..f0ef03f
--- /dev/null
+++ b/blocks/background-pattern11.tsx
@@ -0,0 +1,32 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern11Props {
+  className?: string;
+}
+
+const BackgroundPattern11 = ({ className }: BackgroundPattern11Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Diagonal Cross Grid */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(45deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px),
+            repeating-linear-gradient(135deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px)
+          `,
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern11 };
diff --git a/blocks/background-pattern111.tsx b/blocks/background-pattern111.tsx
new file mode 100644
index 0000000..4d0d06e
--- /dev/null
+++ b/blocks/background-pattern111.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern111Props {
+  className?: string;
+}
+
+const BackgroundPattern111 = ({ className }: BackgroundPattern111Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* radial gradient with left fade dot Pattern */}
+
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(oklch(from var(--primary) calc(l * 0.8) calc(c * 1.5) h / 1) 1px, transparent 1px)",
+          backgroundSize: "3px 3px",
+          maskImage:
+            "radial-gradient(ellipse at 80% 14%, rgba(0, 0, 0, 1), transparent 40%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse at 80% 14%, rgba(0, 0, 0, 1), transparent 40%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern111 };
diff --git a/blocks/background-pattern112.tsx b/blocks/background-pattern112.tsx
new file mode 100644
index 0000000..5230ba6
--- /dev/null
+++ b/blocks/background-pattern112.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern112Props {
+  className?: string;
+}
+
+const BackgroundPattern112 = ({ className }: BackgroundPattern112Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* radial gradient with right fade dot Pattern */}
+
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(oklch(from var(--primary) calc(l * 0.8) calc(c * 1.5) h / 1) 1px, transparent 1px)",
+          backgroundSize: "3px 3px",
+          maskImage:
+            "radial-gradient(ellipse at 20% 14%, rgba(0, 0, 0, 1), transparent 40%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse at 20% 14%, rgba(0, 0, 0, 1), transparent 40%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern112 };
diff --git a/blocks/background-pattern113.tsx b/blocks/background-pattern113.tsx
new file mode 100644
index 0000000..e5715fe
--- /dev/null
+++ b/blocks/background-pattern113.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern113Props {
+  className?: string;
+}
+
+const BackgroundPattern113 = ({ className }: BackgroundPattern113Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* radial gradient with bottom right fade dot Pattern */}
+
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(oklch(from var(--primary) calc(l * 0.8) calc(c * 1.5) h / 1) 1px, transparent 1px)",
+          backgroundSize: "3px 3px",
+          maskImage:
+            "radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 1), transparent 40%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 1), transparent 40%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern113 };
diff --git a/blocks/background-pattern115.tsx b/blocks/background-pattern115.tsx
new file mode 100644
index 0000000..dbdab48
--- /dev/null
+++ b/blocks/background-pattern115.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern115Props {
+  className?: string;
+}
+
+const BackgroundPattern115 = ({ className }: BackgroundPattern115Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* radial gradient with Center fade dot Pattern */}
+
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(oklch(from var(--primary) calc(l * 0.8) calc(c * 1.5) h / 1) 1px, transparent 1px)",
+          backgroundSize: "3px 3px",
+          maskImage:
+            "radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 1), transparent 60%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 1), transparent 60%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern115 };
diff --git a/blocks/background-pattern116.tsx b/blocks/background-pattern116.tsx
new file mode 100644
index 0000000..1f20eb1
--- /dev/null
+++ b/blocks/background-pattern116.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern116Props {
+  className?: string;
+}
+
+const BackgroundPattern116 = ({ className }: BackgroundPattern116Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* radial gradient with top center fade dot Pattern */}
+
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(oklch(from var(--primary) calc(l * 0.8) calc(c * 1.5) h / 1) 1px, transparent 1px)",
+          backgroundSize: "3px 3px",
+          maskImage:
+            "radial-gradient(ellipse 95% 54% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 34%, transparent 74%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 95% 54% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 34%, transparent 74%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern116 };
diff --git a/blocks/background-pattern117.tsx b/blocks/background-pattern117.tsx
new file mode 100644
index 0000000..896e23b
--- /dev/null
+++ b/blocks/background-pattern117.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern117Props {
+  className?: string;
+}
+
+const BackgroundPattern117 = ({ className }: BackgroundPattern117Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* radial gradient with Bottom center fade dot Pattern */}
+
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(oklch(from var(--primary) calc(l * 0.8) calc(c * 1.5) h / 1) 1px, transparent 1px)",
+          backgroundSize: "3px 3px",
+          maskImage:
+            "radial-gradient(ellipse 95% 54% at 50% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 34%, transparent 74%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 95% 54% at 50% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 34%, transparent 74%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern117 };
diff --git a/blocks/background-pattern12.tsx b/blocks/background-pattern12.tsx
new file mode 100644
index 0000000..4c0aa57
--- /dev/null
+++ b/blocks/background-pattern12.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern12Props {
+  className?: string;
+}
+
+const BackgroundPattern12 = ({ className }: BackgroundPattern12Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Right Fade Diagonal Cross Grid */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(45deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px),
+            repeating-linear-gradient(135deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px)
+          `,
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern12 };
diff --git a/blocks/background-pattern13.tsx b/blocks/background-pattern13.tsx
new file mode 100644
index 0000000..e0c30bd
--- /dev/null
+++ b/blocks/background-pattern13.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern13Props {
+  className?: string;
+}
+
+const BackgroundPattern13 = ({ className }: BackgroundPattern13Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Left Fade Diagonal Cross Grid */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(45deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px),
+            repeating-linear-gradient(135deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px)
+          `,
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern13 };
diff --git a/blocks/background-pattern14.tsx b/blocks/background-pattern14.tsx
new file mode 100644
index 0000000..d1505a7
--- /dev/null
+++ b/blocks/background-pattern14.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern14Props {
+  className?: string;
+}
+
+const BackgroundPattern14 = ({ className }: BackgroundPattern14Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Top Fade Diagonal Cross Grid */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(45deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px),
+            repeating-linear-gradient(135deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px)
+          `,
+          WebkitMaskImage:
+            "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)",
+          maskImage:
+            "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern14 };
diff --git a/blocks/background-pattern15.tsx b/blocks/background-pattern15.tsx
new file mode 100644
index 0000000..9c92453
--- /dev/null
+++ b/blocks/background-pattern15.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern15Props {
+  className?: string;
+}
+
+const BackgroundPattern15 = ({ className }: BackgroundPattern15Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Fade Diagonal Cross Grid */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(45deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px),
+            repeating-linear-gradient(135deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px)
+          `,
+          WebkitMaskImage:
+            "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern15 };
diff --git a/blocks/background-pattern16.tsx b/blocks/background-pattern16.tsx
new file mode 100644
index 0000000..9d82186
--- /dev/null
+++ b/blocks/background-pattern16.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern16Props {
+  className?: string;
+}
+
+const BackgroundPattern16 = ({ className }: BackgroundPattern16Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Right Fade Diagonal Cross Grid */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(45deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px),
+            repeating-linear-gradient(135deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px)
+          `,
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern16 };
diff --git a/blocks/background-pattern17.tsx b/blocks/background-pattern17.tsx
new file mode 100644
index 0000000..38cd066
--- /dev/null
+++ b/blocks/background-pattern17.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern17Props {
+  className?: string;
+}
+
+const BackgroundPattern17 = ({ className }: BackgroundPattern17Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Left Fade Diagonal Cross Grid */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(45deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px),
+            repeating-linear-gradient(135deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px)
+          `,
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern17 };
diff --git a/blocks/background-pattern18.tsx b/blocks/background-pattern18.tsx
new file mode 100644
index 0000000..2d34716
--- /dev/null
+++ b/blocks/background-pattern18.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern18Props {
+  className?: string;
+}
+
+const BackgroundPattern18 = ({ className }: BackgroundPattern18Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Center Fade Diagonal Cross Grid */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(45deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px),
+            repeating-linear-gradient(135deg, transparent, transparent 32px, var(--muted) 32px, var(--muted) 33px)
+          `,
+          WebkitMaskImage:
+            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
+          maskImage:
+            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern18 };
diff --git a/blocks/background-pattern19.tsx b/blocks/background-pattern19.tsx
new file mode 100644
index 0000000..a8a3901
--- /dev/null
+++ b/blocks/background-pattern19.tsx
@@ -0,0 +1,68 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern19Props {
+  className?: string;
+}
+
+const BackgroundPattern19 = ({ className }: BackgroundPattern19Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Dashed Grid Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, var(--muted) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--muted) 1px, transparent 1px)
+          `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            )
+          `,
+          WebkitMaskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            )
+          `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern19 };
diff --git a/blocks/background-pattern2.tsx b/blocks/background-pattern2.tsx
new file mode 100644
index 0000000..d820240
--- /dev/null
+++ b/blocks/background-pattern2.tsx
@@ -0,0 +1,25 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern2Props {
+  className?: string;
+}
+
+const BackgroundPattern2 = ({ className }: BackgroundPattern2Props) => {
+  return (
+    <section className={cn("relative min-h-screen w-full", className)}>
+      <PatternPlaceholder />
+      {/* Background Pattern */}
+      {/* Bottom Primary Radial Background Pattern */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(125% 125% at 50% 90%, var(--background) 40%, var(--primary) 100%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export { BackgroundPattern2 };
diff --git a/blocks/background-pattern20.tsx b/blocks/background-pattern20.tsx
new file mode 100644
index 0000000..e963998
--- /dev/null
+++ b/blocks/background-pattern20.tsx
@@ -0,0 +1,70 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern20Props {
+  className?: string;
+}
+
+const BackgroundPattern20 = ({ className }: BackgroundPattern20Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Right Fade Dashed Grid Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, var(--muted) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--muted) 1px, transparent 1px)
+          `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)
+          `,
+          WebkitMaskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)
+          `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern20 };
diff --git a/blocks/background-pattern21.tsx b/blocks/background-pattern21.tsx
new file mode 100644
index 0000000..d68edd8
--- /dev/null
+++ b/blocks/background-pattern21.tsx
@@ -0,0 +1,70 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern21Props {
+  className?: string;
+}
+
+const BackgroundPattern21 = ({ className }: BackgroundPattern21Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Left Fade Dashed Grid Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, var(--muted) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--muted) 1px, transparent 1px)
+          `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)
+          `,
+          WebkitMaskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)
+          `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern21 };
diff --git a/blocks/background-pattern22.tsx b/blocks/background-pattern22.tsx
new file mode 100644
index 0000000..1f1d7e2
--- /dev/null
+++ b/blocks/background-pattern22.tsx
@@ -0,0 +1,70 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern22Props {
+  className?: string;
+}
+
+const BackgroundPattern22 = ({ className }: BackgroundPattern22Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Top Fade Dashed Grid Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, var(--muted) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--muted) 1px, transparent 1px)
+          `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)
+          `,
+          WebkitMaskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)
+          `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern22 };
diff --git a/blocks/background-pattern23.tsx b/blocks/background-pattern23.tsx
new file mode 100644
index 0000000..0164cfd
--- /dev/null
+++ b/blocks/background-pattern23.tsx
@@ -0,0 +1,70 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern23Props {
+  className?: string;
+}
+
+const BackgroundPattern23 = ({ className }: BackgroundPattern23Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Fade Dashed Grid Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, var(--muted) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--muted) 1px, transparent 1px)
+          `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)
+          `,
+          WebkitMaskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)
+          `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern23 };
diff --git a/blocks/background-pattern24.tsx b/blocks/background-pattern24.tsx
new file mode 100644
index 0000000..1226ef4
--- /dev/null
+++ b/blocks/background-pattern24.tsx
@@ -0,0 +1,70 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern24Props {
+  className?: string;
+}
+
+const BackgroundPattern24 = ({ className }: BackgroundPattern24Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Right Fade Dashed Grid Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, var(--muted) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--muted) 1px, transparent 1px)
+          `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)
+          `,
+          WebkitMaskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)
+          `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern24 };
diff --git a/blocks/background-pattern25.tsx b/blocks/background-pattern25.tsx
new file mode 100644
index 0000000..e476d81
--- /dev/null
+++ b/blocks/background-pattern25.tsx
@@ -0,0 +1,70 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern25Props {
+  className?: string;
+}
+
+const BackgroundPattern25 = ({ className }: BackgroundPattern25Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Left Fade Dashed Grid Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, var(--muted) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--muted) 1px, transparent 1px)
+          `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+           radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)
+          `,
+          WebkitMaskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+           radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)
+          `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern25 };
diff --git a/blocks/background-pattern26.tsx b/blocks/background-pattern26.tsx
new file mode 100644
index 0000000..c0f0a3d
--- /dev/null
+++ b/blocks/background-pattern26.tsx
@@ -0,0 +1,70 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern26Props {
+  className?: string;
+}
+
+const BackgroundPattern26 = ({ className }: BackgroundPattern26Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Center Fade Dashed Grid Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, var(--muted) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--muted) 1px, transparent 1px)
+          `,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 0 0",
+          maskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+          radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)
+          `,
+          WebkitMaskImage: `
+            repeating-linear-gradient(
+              to right,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+            repeating-linear-gradient(
+              to bottom,
+              black 0px,
+              black 3px,
+              transparent 3px,
+              transparent 8px
+            ),
+          radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)
+          `,
+          maskComposite: "intersect",
+          WebkitMaskComposite: "source-in",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern26 };
diff --git a/blocks/background-pattern27.tsx b/blocks/background-pattern27.tsx
new file mode 100644
index 0000000..4f3fa01
--- /dev/null
+++ b/blocks/background-pattern27.tsx
@@ -0,0 +1,30 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern27Props {
+  className?: string;
+}
+
+const BackgroundPattern27 = ({ className }: BackgroundPattern27Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Gradinet Background with Top Glow */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(ellipse 80% 60% at 50% 0%, oklch(from var(--primary) calc(l - 0.1) c h / 0.20), transparent 70%)",
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern27 };
diff --git a/blocks/background-pattern28.tsx b/blocks/background-pattern28.tsx
new file mode 100644
index 0000000..95f7615
--- /dev/null
+++ b/blocks/background-pattern28.tsx
@@ -0,0 +1,37 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern28Props {
+  className?: string;
+}
+
+const BackgroundPattern28 = ({ className }: BackgroundPattern28Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Center Spotlight Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          background: `
+        radial-gradient(
+          circle at center,
+          oklch(from var(--primary) calc(l * 0.85) calc(c * 0.8) h / 0.12) 0%,
+          oklch(from var(--primary) calc(l * 0.8) calc(c * 0.75) h / 0.08) 30%,
+          oklch(from var(--primary) calc(l * 0.75) calc(c * 0.7) h / 0.04) 60%,
+          transparent 80%
+        )
+      `,
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern28 };
diff --git a/blocks/background-pattern29.tsx b/blocks/background-pattern29.tsx
new file mode 100644
index 0000000..25a627b
--- /dev/null
+++ b/blocks/background-pattern29.tsx
@@ -0,0 +1,29 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern29Props {
+  className?: string;
+}
+
+const BackgroundPattern29 = ({ className }: BackgroundPattern29Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Top Radial Glow Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `radial-gradient(circle 500px at 50% 100px, oklch(from var(--primary) calc(l * 0.85) calc(c * 0.8) h / 0.2), oklch(from var(--primary) calc(l * 0.7) calc(c * 0.6) h / 0.1) 60%, transparent)`,
+        }}
+      />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern29 };
diff --git a/blocks/background-pattern3.tsx b/blocks/background-pattern3.tsx
new file mode 100644
index 0000000..d42dae7
--- /dev/null
+++ b/blocks/background-pattern3.tsx
@@ -0,0 +1,24 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern3Props {
+  className?: string;
+}
+
+const BackgroundPattern3 = ({ className }: BackgroundPattern3Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Basic Grid Background */}
+      <div className="absolute inset-0 z-0 bg-[linear-gradient(to_right,_var(--muted)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--muted)_1px,_transparent_1px)] bg-[length:40px_40px]" />
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern3 };
diff --git a/blocks/background-pattern30.tsx b/blocks/background-pattern30.tsx
new file mode 100644
index 0000000..a1c2489
--- /dev/null
+++ b/blocks/background-pattern30.tsx
@@ -0,0 +1,33 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern30Props {
+  className?: string;
+}
+
+const BackgroundPattern30 = ({ className }: BackgroundPattern30Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Corner Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        radial-gradient(circle 600px at 0% 200px, oklch(from var(--primary) calc(l * 0.7) calc(c * 0.6) h / 0.15), transparent),
+        radial-gradient(circle 600px at 100% 200px, oklch(from var(--primary) calc(l * 0.75) calc(c * 0.65) h / 0.12), transparent)
+      `,
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern30 };
diff --git a/blocks/background-pattern31.tsx b/blocks/background-pattern31.tsx
new file mode 100644
index 0000000..20b04b4
--- /dev/null
+++ b/blocks/background-pattern31.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern31Props {
+  className?: string;
+}
+
+const BackgroundPattern31 = ({ className }: BackgroundPattern31Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/*  Circuit Board Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px)
+      `,
+          backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern31 };
diff --git a/blocks/background-pattern32.tsx b/blocks/background-pattern32.tsx
new file mode 100644
index 0000000..a0b387b
--- /dev/null
+++ b/blocks/background-pattern32.tsx
@@ -0,0 +1,40 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern32Props {
+  className?: string;
+}
+
+const BackgroundPattern32 = ({ className }: BackgroundPattern32Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Right Fade Circuit Board Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px)
+      `,
+          backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern32 };
diff --git a/blocks/background-pattern33.tsx b/blocks/background-pattern33.tsx
new file mode 100644
index 0000000..a722e8e
--- /dev/null
+++ b/blocks/background-pattern33.tsx
@@ -0,0 +1,40 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern33Props {
+  className?: string;
+}
+
+const BackgroundPattern33 = ({ className }: BackgroundPattern33Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Left Fade Circuit Board Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px)
+      `,
+          backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern33 };
diff --git a/blocks/background-pattern34.tsx b/blocks/background-pattern34.tsx
new file mode 100644
index 0000000..958f217
--- /dev/null
+++ b/blocks/background-pattern34.tsx
@@ -0,0 +1,40 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern34Props {
+  className?: string;
+}
+
+const BackgroundPattern34 = ({ className }: BackgroundPattern34Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Top Fade Circuit Board Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px)
+      `,
+          backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)",
+          maskImage:
+            "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern34 };
diff --git a/blocks/background-pattern35.tsx b/blocks/background-pattern35.tsx
new file mode 100644
index 0000000..6d46850
--- /dev/null
+++ b/blocks/background-pattern35.tsx
@@ -0,0 +1,40 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern35Props {
+  className?: string;
+}
+
+const BackgroundPattern35 = ({ className }: BackgroundPattern35Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Fade Circuit Board Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px)
+      `,
+          backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern35 };
diff --git a/blocks/background-pattern36.tsx b/blocks/background-pattern36.tsx
new file mode 100644
index 0000000..a027eb3
--- /dev/null
+++ b/blocks/background-pattern36.tsx
@@ -0,0 +1,40 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern36Props {
+  className?: string;
+}
+
+const BackgroundPattern36 = ({ className }: BackgroundPattern36Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Right Fade Circuit Board Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px)
+      `,
+          backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern36 };
diff --git a/blocks/background-pattern37.tsx b/blocks/background-pattern37.tsx
new file mode 100644
index 0000000..b045655
--- /dev/null
+++ b/blocks/background-pattern37.tsx
@@ -0,0 +1,40 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern37Props {
+  className?: string;
+}
+
+const BackgroundPattern37 = ({ className }: BackgroundPattern37Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Left Fade Circuit Board Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px)
+      `,
+          backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern37 };
diff --git a/blocks/background-pattern38.tsx b/blocks/background-pattern38.tsx
new file mode 100644
index 0000000..310bc0e
--- /dev/null
+++ b/blocks/background-pattern38.tsx
@@ -0,0 +1,40 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern38Props {
+  className?: string;
+}
+
+const BackgroundPattern38 = ({ className }: BackgroundPattern38Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Center Fade Circuit Board Background */}
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(90deg, var(--muted) 1px, transparent 1px),
+        linear-gradient(180deg, var(--muted) 1px, transparent 1px)
+      `,
+          backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
+          maskImage:
+            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern38 };
diff --git a/blocks/background-pattern39.tsx b/blocks/background-pattern39.tsx
new file mode 100644
index 0000000..5a51416
--- /dev/null
+++ b/blocks/background-pattern39.tsx
@@ -0,0 +1,36 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern39Props {
+  className?: string;
+}
+
+const BackgroundPattern39 = ({ className }: BackgroundPattern39Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* White Grid with Dots Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(to right, var(--muted) 1px, transparent 1px),
+        linear-gradient(to bottom, var(--muted) 1px, transparent 1px),
+        radial-gradient(circle, oklch(from var(--foreground) l c h / 0.1) 1px, transparent 1px)
+      `,
+          backgroundSize: "20px 20px, 20px 20px, 20px 20px",
+          backgroundPosition: "0 0, 0 0, 0 0",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern39 };
diff --git a/blocks/background-pattern4.tsx b/blocks/background-pattern4.tsx
new file mode 100644
index 0000000..97168c3
--- /dev/null
+++ b/blocks/background-pattern4.tsx
@@ -0,0 +1,27 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern4Props {
+  className?: string;
+}
+
+const BackgroundPattern4 = ({ className }: BackgroundPattern4Props) => {
+  return (
+    <section className={cn("relative min-h-screen w-full", className)}>
+      <PatternPlaceholder />
+      {/* Background Pattern */}
+      {/* Diagonal Fade Grid Left Pattern */}
+      <div
+        className="absolute inset-0 z-0 bg-[linear-gradient(to_right,_var(--muted)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--muted)_1px,_transparent_1px)] bg-[length:32px_32px]"
+        style={{
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export { BackgroundPattern4 };
diff --git a/blocks/background-pattern40.tsx b/blocks/background-pattern40.tsx
new file mode 100644
index 0000000..7741461
--- /dev/null
+++ b/blocks/background-pattern40.tsx
@@ -0,0 +1,40 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern40Props {
+  className?: string;
+}
+
+const BackgroundPattern40 = ({ className }: BackgroundPattern40Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Right Fade White Grid with Dots Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+        linear-gradient(to right, var(--muted) 1px, transparent 1px),
+        linear-gradient(to bottom, var(--muted) 1px, transparent 1px),
+        radial-gradient(circle, oklch(from var(--foreground) l c h / 0.1) 1px, transparent 1px)
+      `,
+          backgroundSize: "20px 20px, 20px 20px, 20px 20px",
+          backgroundPosition: "0 0, 0 0, 0 0",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern40 };
diff --git a/blocks/background-pattern5.tsx b/blocks/background-pattern5.tsx
new file mode 100644
index 0000000..25e8597
--- /dev/null
+++ b/blocks/background-pattern5.tsx
@@ -0,0 +1,27 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern5Props {
+  className?: string;
+}
+
+const BackgroundPattern5 = ({ className }: BackgroundPattern5Props) => {
+  return (
+    <section className={cn("relative min-h-screen w-full", className)}>
+      <PatternPlaceholder />
+      {/* Background Pattern */}
+      {/* Diagonal Fade Grid Right Pattern*/}
+      <div
+        className="absolute inset-0 z-0 bg-[linear-gradient(to_right,_var(--muted)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--muted)_1px,_transparent_1px)] bg-[length:32px_32px]"
+        style={{
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export { BackgroundPattern5 };
diff --git a/blocks/background-pattern6.tsx b/blocks/background-pattern6.tsx
new file mode 100644
index 0000000..535a2ca
--- /dev/null
+++ b/blocks/background-pattern6.tsx
@@ -0,0 +1,27 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern6Props {
+  className?: string;
+}
+
+const BackgroundPattern6 = ({ className }: BackgroundPattern6Props) => {
+  return (
+    <section className={cn("relative min-h-screen w-full", className)}>
+      <PatternPlaceholder />
+      {/* Background Pattern */}
+      {/* Top Fade Grid Pattern */}
+      <div
+        className="absolute inset-0 z-0 bg-[linear-gradient(to_right,_var(--muted)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--muted)_1px,_transparent_1px)] bg-[length:32px_32px]"
+        style={{
+          WebkitMaskImage:
+            "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)",
+          maskImage:
+            "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export { BackgroundPattern6 };
diff --git a/blocks/background-pattern7.tsx b/blocks/background-pattern7.tsx
new file mode 100644
index 0000000..4546d14
--- /dev/null
+++ b/blocks/background-pattern7.tsx
@@ -0,0 +1,32 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern7Props {
+  className?: string;
+}
+
+const BackgroundPattern7 = ({ className }: BackgroundPattern7Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      <PatternPlaceholder />
+      {/* Background Pattern */}
+      {/* Bottom Fade Grid Pattern */}
+      <div
+        className="absolute inset-0 z-0 bg-[linear-gradient(to_right,_var(--muted)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--muted)_1px,_transparent_1px)] bg-[length:32px_32px]"
+        style={{
+          WebkitMaskImage:
+            "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export { BackgroundPattern7 };
diff --git a/blocks/background-pattern8.tsx b/blocks/background-pattern8.tsx
new file mode 100644
index 0000000..1d315f1
--- /dev/null
+++ b/blocks/background-pattern8.tsx
@@ -0,0 +1,32 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern8Props {
+  className?: string;
+}
+
+const BackgroundPattern8 = ({ className }: BackgroundPattern8Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      <PatternPlaceholder />
+      {/* Background Pattern */}
+      {/* Bottom Left Fade Grid Pattern */}
+      <div
+        className="absolute inset-0 z-0 bg-[linear-gradient(to_right,_var(--muted)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--muted)_1px,_transparent_1px)] bg-[length:32px_32px]"
+        style={{
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export { BackgroundPattern8 };
diff --git a/blocks/background-pattern9.tsx b/blocks/background-pattern9.tsx
new file mode 100644
index 0000000..b6fedbd
--- /dev/null
+++ b/blocks/background-pattern9.tsx
@@ -0,0 +1,32 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern9Props {
+  className?: string;
+}
+
+const BackgroundPattern9 = ({ className }: BackgroundPattern9Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      <PatternPlaceholder />
+      {/* Background Pattern */}
+      {/* Bottom Right Fade Grid Pattern */}
+      <div
+        className="absolute inset-0 z-0 bg-[linear-gradient(to_right,_var(--muted)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--muted)_1px,_transparent_1px)] bg-[length:32px_32px]"
+        style={{
+          WebkitMaskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)",
+          maskImage:
+            "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export { BackgroundPattern9 };
diff --git a/blocks/background-pattern95.tsx b/blocks/background-pattern95.tsx
new file mode 100644
index 0000000..74404f3
--- /dev/null
+++ b/blocks/background-pattern95.tsx
@@ -0,0 +1,55 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern95Props {
+  className?: string;
+}
+
+const BackgroundPattern95 = ({ className }: BackgroundPattern95Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Multi-Corner Radial Gradient Glow */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background: ` 
+            radial-gradient(at 34% 18%, oklch(from var(--chart-1) l c h / 0.15) 0%, transparent 50%),
+            radial-gradient(at 90% 64%, oklch(from var(--chart-2) l c h / 0.15) 0%, transparent 50%), 
+            radial-gradient(at 69% 59%, oklch(from var(--chart-3) l c h / 0.15) 0%, transparent 50%), 
+            radial-gradient(at 0% 78%, oklch(from var(--chart-4) l c h / 0.15) 0%, transparent 50%), 
+            var(--background)
+          `,
+        }}
+      />
+
+      {/* Noise Texture Layer */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            repeating-conic-gradient(from 0deg at 50% 50%, 
+              oklch(from var(--muted) l c h / 0.03) 0deg 0.5deg,
+              transparent 0.5deg 1deg
+            ),
+            repeating-conic-gradient(from 45deg at 50% 50%, 
+              oklch(from var(--foreground) l c h / 0.50) 0deg 0.5deg,
+              transparent 0.5deg 1deg
+            )
+          `,
+          backgroundSize: "5px 5px, 5px 5px",
+          mixBlendMode: "overlay",
+        }}
+      />
+
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern95 };
diff --git a/blocks/background-pattern96.tsx b/blocks/background-pattern96.tsx
new file mode 100644
index 0000000..11f356a
--- /dev/null
+++ b/blocks/background-pattern96.tsx
@@ -0,0 +1,59 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern96Props {
+  className?: string;
+}
+
+const BackgroundPattern96 = ({ className }: BackgroundPattern96Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Gradient Glow with Noise Texture */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background: `
+            radial-gradient(at 0% 0%, oklch(from var(--chart-1) l c h / 0.25) 0%, transparent 40%),
+            radial-gradient(at 10% 10%, oklch(from var(--chart-2) l c h / 0.2) 0%, transparent 45%),
+            radial-gradient(at 5% 15%, oklch(from var(--chart-3) l c h / 0.18) 0%, transparent 50%),
+            radial-gradient(at 15% 5%, oklch(from var(--chart-4) l c h / 0.15) 0%, transparent 35%),
+            var(--background)
+          `,
+        }}
+      />
+
+      <div className="pointer-events-none absolute inset-0 z-10">
+        <svg
+          className="h-full w-full opacity-20"
+          style={{ mixBlendMode: "overlay" }}
+        >
+          <filter id="noise-pattern">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.8"
+              numOctaves="4"
+              stitchTiles="stitch"
+              seed="2"
+            />
+            <feColorMatrix type="saturate" values="0" />
+          </filter>
+          <rect
+            width="100%"
+            height="100%"
+            filter="url(#noise-pattern)"
+            fill="white"
+          />
+        </svg>
+      </div>
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern96 };
diff --git a/blocks/background-pattern97.tsx b/blocks/background-pattern97.tsx
new file mode 100644
index 0000000..1d1d95c
--- /dev/null
+++ b/blocks/background-pattern97.tsx
@@ -0,0 +1,60 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern97Props {
+  className?: string;
+}
+
+const BackgroundPattern97 = ({ className }: BackgroundPattern97Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Mesh Glow with Noise Texture */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background: `
+            radial-gradient(circle at 0% 0%, oklch(from var(--chart-1) calc(l * 1.2) calc(c * 1.5) h / 0.4) 0%, transparent 30%),
+            radial-gradient(circle at 100% 100%, oklch(from var(--chart-2) calc(l * 1.1) calc(c * 1.6) h / 0.35) 0%, transparent 35%),
+            radial-gradient(circle at 50% 50%, oklch(from var(--chart-3) calc(l * 0.9) calc(c * 1.4) h / 0.25) 0%, transparent 50%),
+            radial-gradient(ellipse 120% 100% at 30% 70%, oklch(from var(--chart-4) calc(l * 1.1) calc(c * 1.5) h / 0.3) 0%, transparent 40%),
+            var(--background)
+          `,
+          filter: "blur(100px)",
+        }}
+      />
+
+      <div className="pointer-events-none absolute inset-0 z-10">
+        <svg
+          className="h-full w-full opacity-20"
+          style={{ mixBlendMode: "overlay" }}
+        >
+          <filter id="noise-pattern">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.8"
+              numOctaves="4"
+              stitchTiles="stitch"
+              seed="2"
+            />
+            <feColorMatrix type="saturate" values="0" />
+          </filter>
+          <rect
+            width="100%"
+            height="100%"
+            filter="url(#noise-pattern)"
+            fill="white"
+          />
+        </svg>
+      </div>
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern97 };
diff --git a/blocks/background-pattern98.tsx b/blocks/background-pattern98.tsx
new file mode 100644
index 0000000..c619e67
--- /dev/null
+++ b/blocks/background-pattern98.tsx
@@ -0,0 +1,58 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern98Props {
+  className?: string;
+}
+
+const BackgroundPattern98 = ({ className }: BackgroundPattern98Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Bottom Glow with Noise Texture */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `
+            radial-gradient(circle at 50% 100%, oklch(from var(--chart-1) l calc(c * 1.8) h / 0.6) 0%, transparent 60%),
+            radial-gradient(circle at 50% 100%, oklch(from var(--chart-2) l calc(c * 1.5) h / 0.4) 0%, transparent 70%),
+            radial-gradient(circle at 50% 100%, oklch(from var(--chart-3) l calc(c * 1.3) h / 0.3) 0%, transparent 80%)
+        `,
+          filter: "blur(100px)",
+        }}
+      />
+
+      <div className="pointer-events-none absolute inset-0 z-10">
+        <svg
+          className="h-full w-full opacity-30"
+          style={{ mixBlendMode: "overlay" }}
+        >
+          <filter id="noise-pattern">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.8"
+              numOctaves="4"
+              stitchTiles="stitch"
+              seed="2"
+            />
+            <feColorMatrix type="saturate" values="0" />
+          </filter>
+          <rect
+            width="100%"
+            height="100%"
+            filter="url(#noise-pattern)"
+            fill="white"
+          />
+        </svg>
+      </div>
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern98 };
diff --git a/blocks/background-pattern99.tsx b/blocks/background-pattern99.tsx
new file mode 100644
index 0000000..c824bd9
--- /dev/null
+++ b/blocks/background-pattern99.tsx
@@ -0,0 +1,58 @@
+import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
+import { cn } from "@/lib/utils";
+
+interface BackgroundPattern99Props {
+  className?: string;
+}
+
+const BackgroundPattern99 = ({ className }: BackgroundPattern99Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen w-full items-center justify-center",
+        className,
+      )}
+    >
+      {/* Background Pattern */}
+      {/* Duo-Color Gradient Blend with Noise */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background: `
+            radial-gradient(circle at 100% 0%, oklch(from var(--chart-1) calc(l * 1.2) calc(c * 1.5) h / 0.6) 0%, transparent 45%),
+            radial-gradient(circle at 0% 100%, oklch(from var(--chart-2) calc(l * 1.2) calc(c * 1.4) h / 0.4) 0%, transparent 50%),
+            var(--background)
+          `,
+          filter: "blur(120px)",
+        }}
+      />
+
+      <div className="pointer-events-none absolute inset-0 z-10">
+        <svg
+          className="h-full w-full opacity-30"
+          style={{ mixBlendMode: "overlay" }}
+        >
+          <filter id="noise-pattern">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.8"
+              numOctaves="4"
+              stitchTiles="stitch"
+              seed="2"
+            />
+            <feColorMatrix type="saturate" values="0" />
+          </filter>
+          <rect
+            width="100%"
+            height="100%"
+            filter="url(#noise-pattern)"
+            fill="white"
+          />
+        </svg>
+      </div>
+      <PatternPlaceholder />
+    </section>
+  );
+};
+
+export { BackgroundPattern99 };
diff --git a/blocks/banner1.tsx b/blocks/banner1.tsx
new file mode 100644
index 0000000..f3b864f
--- /dev/null
+++ b/blocks/banner1.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Banner1Props {
+  title: string;
+  description: string;
+  linkText: string;
+  linkUrl: string;
+  defaultVisible?: boolean;
+  className?: string;
+}
+
+const Banner1 = ({
+  title = "نسخه ۲۰ منتشر شد!",
+  description = "جزئیات این نسخه را",
+  linkText = "مشاهده کنید",
+  linkUrl = "#",
+  defaultVisible = true,
+  className,
+}: Banner1Props) => {
+  const [isVisible, setIsVisible] = useState(defaultVisible);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full border-b bg-background px-4 py-3", className)}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex-1 text-center">
+          <span className="text-sm">
+            <span className="font-medium">{title}</span>{" "}
+            <span className="text-muted-foreground">
+              {description}{" "}
+              <a
+                href={linkUrl}
+                className="underline underline-offset-2 hover:text-foreground"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {linkText}
+              </a>
+              .
+            </span>
+          </span>
+        </div>
+
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="-ms-2 h-8 w-8 flex-none"
+          aria-label="بستن"
+          onClick={handleClose}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export { Banner1 };
diff --git a/blocks/banner2.tsx b/blocks/banner2.tsx
new file mode 100644
index 0000000..a966ed5
--- /dev/null
+++ b/blocks/banner2.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Banner2Props {
+  title: string;
+  description: string;
+  linkText: string;
+  linkUrl: string;
+  defaultVisible?: boolean;
+  className?: string;
+}
+
+const Banner2 = ({
+  title = "نسخه ۲۰ منتشر شد!",
+  description = "جزئیات این نسخه را",
+  linkText = "مشاهده کنید",
+  linkUrl = "#",
+  defaultVisible = true,
+  className,
+}: Banner2Props) => {
+  const [isVisible, setIsVisible] = useState(defaultVisible);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-muted px-4 py-3", className)}
+    >
+      <div className="container">
+        <div className="flex items-center gap-2">
+          <div className="flex-1 text-start">
+            <span className="text-sm">
+              <span className="font-medium">{title}</span>{" "}
+              <span className="text-muted-foreground">
+                {description}{" "}
+                <a
+                  href={linkUrl}
+                  className="underline underline-offset-2 hover:text-foreground"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {linkText}
+                </a>
+                .
+              </span>
+            </span>
+          </div>
+
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="-ms-2 h-8 w-8 flex-none"
+            aria-label="بستن"
+            onClick={handleClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Banner2 };
diff --git a/blocks/banner3.tsx b/blocks/banner3.tsx
new file mode 100644
index 0000000..6d77ad0
--- /dev/null
+++ b/blocks/banner3.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { ShoppingBag, X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Banner3Props {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+  defaultVisible?: boolean;
+  className?: string;
+}
+
+const Banner3 = ({
+  title = "فروش ویژه جمعه سیاه! 🎉",
+  description = "تا ۷۰٪ تخفیف روی تمام محصولات. فرصت محدود!",
+  buttonText = "مشاهده محصولات",
+  buttonUrl = "https://ShadcnBlocks",
+  defaultVisible = true,
+  className,
+}: Banner3Props) => {
+  const [isVisible, setIsVisible] = useState(defaultVisible);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-primary p-4", className)}
+    >
+      <div className="container">
+        <div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute top-0 end-0 h-8 w-8 md:hidden"
+            aria-label="بستن"
+            onClick={handleClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+
+          <div className="flex flex-col items-start gap-3 pt-2 text-start text-primary-foreground md:flex-row md:items-center md:pt-0">
+            <div className="flex flex-col gap-1 md:flex-row md:items-center">
+              <p className="text-sm font-medium">{title}</p>
+              <p className="text-sm text-primary-foreground/80">
+                {description}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button
+              size="sm"
+              className="dark w-full md:w-auto"
+              variant="secondary"
+              asChild
+            >
+              <a
+                href={buttonUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {buttonText}
+                <ShoppingBag className="ms-2 h-3 w-3" />
+              </a>
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="hidden h-8 w-8 invert md:inline-flex"
+              aria-label="بستن"
+              onClick={handleClose}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Banner3 };
diff --git a/blocks/banner4.tsx b/blocks/banner4.tsx
new file mode 100644
index 0000000..28a2dd9
--- /dev/null
+++ b/blocks/banner4.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Banner4Props {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+  defaultVisible?: boolean;
+  className?: string;
+}
+
+const Banner4 = ({
+  title = "فروش ویژه جمعه سیاه! 🎉",
+  description = "تا ۷۰٪ تخفیف روی تمام محصولات. فرصت محدود!",
+  defaultVisible = true,
+  className,
+}: Banner4Props) => {
+  const [isVisible, setIsVisible] = useState(defaultVisible);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-primary p-4", className)}
+    >
+      <div className="container">
+        <div className="relative flex flex-col gap-4 text-center md:flex-row md:items-center md:justify-center">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute top-0 end-0 h-8 w-8 md:hidden"
+            aria-label="بستن"
+            onClick={handleClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+
+          <div className="flex flex-col items-center gap-3 pt-2 text-primary-foreground md:flex-row md:items-center md:pt-0">
+            <div className="flex flex-col gap-1 md:flex-row md:items-center">
+              <p className="text-sm font-medium">{title}</p>
+              <p className="text-sm text-primary-foreground/80">
+                {description}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="hidden h-8 w-8 invert md:inline-flex"
+              aria-label="بستن"
+              onClick={handleClose}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Banner4 };
diff --git a/blocks/banner5.tsx b/blocks/banner5.tsx
new file mode 100644
index 0000000..719431e
--- /dev/null
+++ b/blocks/banner5.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Banner5Props {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+  defaultVisible?: boolean;
+  className?: string;
+}
+
+const Banner5 = ({
+  title = "نسخه ۲۰ منتشر شد!",
+  description = "قابلیت‌ها و امکانات جدید را بررسی کنید.",
+  buttonText = "اطلاعات بیشتر",
+  buttonUrl = "https://ShadcnBlocks",
+  defaultVisible = true,
+  className,
+}: Banner5Props) => {
+  const [isVisible, setIsVisible] = useState(defaultVisible);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "absolute top-4 inset-x-0 z-50 mx-auto max-w-2xl animate-fade-in",
+        className,
+      )}
+    >
+      <div className="mx-4">
+        <div className="w-full rounded-lg border bg-background p-4 shadow-md">
+          <div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="absolute top-0 end-0 h-8 w-8 md:hidden"
+              aria-label="بستن"
+              onClick={handleClose}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+
+            <div className="flex flex-col items-start gap-3 pt-2 text-start md:flex-row md:items-center md:pt-0">
+              <div className="flex flex-col gap-1 md:flex-row md:items-center">
+                <p className="text-sm font-medium">{title}</p>
+                <p className="text-sm text-muted-foreground">{description}</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full md:w-auto"
+                asChild
+              >
+                <a
+                  href={buttonUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {buttonText}
+                </a>
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="hidden h-8 w-8 md:inline-flex"
+                aria-label="بستن"
+                onClick={handleClose}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Banner5 };
diff --git a/blocks/banner6.tsx b/blocks/banner6.tsx
new file mode 100644
index 0000000..dce104e
--- /dev/null
+++ b/blocks/banner6.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Banner6Props {
+  count?: string;
+  description?: string;
+  buttonText?: string;
+  buttonUrl?: string;
+  avatars?: Array<{
+    src: string;
+    fallback: string;
+  }>;
+  defaultVisible?: boolean;
+  className?: string;
+}
+
+const Banner6 = ({
+  description = "بیش از ۲ هزار مشتری در سراسر جهان به ما اعتماد کرده‌اند",
+  avatars = [
+    {
+      src: "/block-media/shadcnblocks/block/avatar-1.webp",
+      fallback: "کاربر",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/avatar-2.webp",
+      fallback: "کاربر",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/avatar-3.webp",
+      fallback: "کاربر",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/avatar-4.webp",
+      fallback: "کاربر",
+    },
+  ],
+  defaultVisible = true,
+  className,
+}: Banner6Props) => {
+  const [isVisible, setIsVisible] = useState(defaultVisible);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "absolute top-4 inset-x-0 z-50 mx-auto max-w-2xl animate-in fade-in slide-in-from-top-2",
+        className,
+      )}
+    >
+      <div className="mx-4">
+        <div className="w-full rounded-full border bg-background p-4 shadow-md">
+          <div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div className="flex items-center gap-4">
+              <div className="flex -space-x-2">
+                {avatars.map((avatar, i) => (
+                  <Avatar key={i} className="ring-2 ring-white">
+                    <AvatarImage
+                      src={avatar.src}
+                      alt={`کاربر ${(i + 1).toLocaleString("fa-IR")}`}
+                    />
+                    <AvatarFallback>{avatar.fallback}</AvatarFallback>
+                  </Avatar>
+                ))}
+              </div>
+              <p className="text-start text-sm font-semibold">{description}</p>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 rounded-full"
+                aria-label="بستن"
+                onClick={handleClose}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Banner6 };
diff --git a/blocks/banner7.tsx b/blocks/banner7.tsx
new file mode 100644
index 0000000..87999e5
--- /dev/null
+++ b/blocks/banner7.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { ArrowRight, X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Banner7Props {
+  className?: string;
+}
+
+const Banner7 = ({ className }: Banner7Props) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "flex items-center justify-between gap-2 border-t-3 border-t-primary bg-muted px-4 py-4 dark:bg-card",
+        className,
+      )}
+    >
+      <div className="flex flex-1 items-center gap-4 text-sm font-medium md:justify-center md:text-center">
+        <p>
+          پلن پریمیوم اکنون در دسترس است! 🎉 با امکانات بیشتر و انعطاف بالاتر، تجربه‌ای حرفه‌ای‌تر داشته باشید.
+                            <a href="#" className="ms-2 whitespace-nowrap underline md:hidden">
+            <span>اطلاعات بیشتر</span>
+          </a>
+        </p>
+        <Separator
+          orientation="vertical"
+          className="hidden self-stretch bg-primary data-[orientation=vertical]:h-auto md:block"
+        />
+        <a href="#" className="group hidden items-center gap-2 md:flex">
+          <span>اطلاعات بیشتر</span>
+          <ArrowRight className="size-4 transition-transform duration-200 group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+        </a>
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        aria-label="بستن"
+        onClick={handleClose}
+      >
+        <X />
+      </Button>
+    </section>
+  );
+};
+
+export { Banner7 };
diff --git a/blocks/blog1.tsx b/blocks/blog1.tsx
new file mode 100644
index 0000000..52aad50
--- /dev/null
+++ b/blocks/blog1.tsx
@@ -0,0 +1,152 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+const filters = [
+  {
+    name: "دسته‌بندی‌ها",
+    values: ["همه", "فناوری", "طراحی", "بازاریابی", "کسب‌وکار"],
+  },
+];
+
+const posts = [
+  {
+    id: "post-1",
+    title: "۱۰ روند طراحی وب که نباید از دست بدهید",
+    summary:
+      "آخرین روندهای طراحی که چهره فضای دیجیتال را شکل می‌دهند و راه‌های عملی برای به‌کارگیری آن‌ها در پروژه بعدی شما.",
+    label: "طراحی",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "post-2",
+    title: "راهنمای جامع جاوااسکریپت مدرن",
+    summary:
+      "با قابلیت‌های جدید جاوااسکریپت آشنا شوید؛ همان ویژگی‌هایی که توسعه وب را متحول کرده و کدنویسی را کارآمدتر می‌کند.",
+    label: "فناوری",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+  },
+  {
+    id: "post-3",
+    title: "ساخت وب‌اپلیکیشن‌های دسترس‌پذیر",
+    summary:
+      "بهترین روش‌ها برای ساخت برنامه‌هایی که برای همه کاربران  بدون توجه به توانایی یا محدودیت  قابل استفاده باشند.",
+    label: "توسعه",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+  },
+  {
+    id: "post-4",
+    title: "استراتژی‌های سئویی که واقعاً نتیجه می‌دهند",
+    summary:
+      "از میان هیاهو عبور کنید و تکنیک‌های اثبات‌شده سئو را بیاموزید؛ روش‌هایی که دیده‌شدن سایت و ترافیک ارگانیک را بهبود می‌دهند.",
+    label: "بازاریابی",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
+  },
+  {
+    id: "post-5",
+    title: "آینده هوش مصنوعی در توسعه وب",
+    summary:
+      "بررسی کنید هوش مصنوعی چگونه از تولید کد تا بهبود تجربه کاربری، آینده توسعه وب را متحول می‌کند.",
+    label: "فناوری",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-5.svg",
+  },
+  {
+    id: "post-6",
+    title: "طراحی واکنش‌گرا؛ فراتر از Media Query",
+    summary:
+      "تکنیک‌های پیشرفته برای طراحی‌هایی که واقعاً با هر دستگاه و اندازه صفحه‌ای سازگار می‌شوند  با قابلیت‌های مدرن CSS.",
+    label: "طراحی",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-6.svg",
+  },
+];
+
+interface Blog1Props {
+  className?: string;
+}
+
+const Blog1 = ({ className }: Blog1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 md:mb-10 lg:mb-12">
+          <h2 className="mb-6 w-full text-start text-xl font-medium md:mb-14 md:text-2xll lg:mb-16 lg:text-2xll">
+            آخرین مطالب وبلاگ
+          </h2>
+          <div className="mb-10 flex flex-wrap items-center gap-x-4 gap-y-3 lg:gap-x-3">
+            {filters.map((filter) => (
+              <div key={filter.name} className="shrink-0">
+                <Select>
+                  <SelectTrigger className="text-black">
+                    <SelectValue
+                      placeholder={filter.name}
+                      className="text-black"
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {filter.values.map((value) => (
+                      <SelectItem key={value} value={value}>
+                        {value}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2 lg:gap-6 2xl:grid-cols-3">
+          {posts.map((post) => (
+            <a
+              key={post.id}
+              href={post.href}
+              className="group flex flex-col justify-between rounded-xl border border-border bg-accent p-6"
+            >
+              <div>
+                <div className="flex aspect-3/2 overflow-clip rounded-xl">
+                  <div className="flex-1">
+                    <div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
+                      <img
+                        src={post.image}
+                        alt={post.title}
+                        className="h-full w-full object-cover object-center"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="mb-2 line-clamp-3 pt-4 text-start text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4">
+                {post.title}
+              </div>
+              <div className="mb-8 line-clamp-2 text-start text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
+                {post.summary}
+              </div>
+              <div>
+                <Badge variant="outline">{post.label}</Badge>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog1 };
diff --git a/blocks/blog11.tsx b/blocks/blog11.tsx
new file mode 100644
index 0000000..6c2233c
--- /dev/null
+++ b/blocks/blog11.tsx
@@ -0,0 +1,113 @@
+import { FileText } from "lucide-react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const blogs = [
+  {
+    title: "چگونه یک وب‌سایت را از صفر طراحی کنیم",
+    image:
+      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
+    date: "۳۱ اردیبهشت ۱۴۰۳",
+  },
+  {
+    title: "بهترین ابزارها برای توسعه و طراحی وب",
+    image:
+      "/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
+    date: "۲۳ خرداد ۱۴۰۳",
+  },
+  {
+    title: "چگونه بازدید وب‌سایت خود را افزایش دهیم",
+    image:
+      "/block-media/external/unsplash/photo-1572733438515-8f143a854f72.jpg",
+    date: "۱۵ تیر ۱۴۰۳",
+  },
+  {
+    title: "آینده توسعه و طراحی وب",
+    image:
+      "/block-media/external/unsplash/photo-1546414701-81cc6963c67f.jpg",
+    date: "۲۸ مرداد ۱۴۰۳",
+  },
+  {
+    title: "تفاوت رابط کاربری و تجربه کاربری و چگونه برای هر دو طراحی کنیم",
+    image:
+      "/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg",
+    date: "۱۷ شهریور ۱۴۰۳",
+  },
+  {
+    title: "بهینه‌سازی وب‌سایت برای سئو و ترافیک بیشتر از موتورهای جستجو",
+    image:
+      "/block-media/external/unsplash/photo-1623496258831-091279081ac5.jpg",
+    date: "۲ مهر ۱۴۰۳",
+  },
+  {
+    title: "ابزارهای ضروری برای توسعه‌دهندگان و طراحان وب",
+    image:
+      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
+    date: "۲۱ مهر ۱۴۰۳",
+  },
+];
+
+interface Blog11Props {
+  className?: string;
+}
+
+const Blog11 = ({ className }: Blog11Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/60 py-32", className)}>
+      <div className="container">
+        <div className="relative mx-auto flex max-w-7xl flex-col gap-20 lg:flex-row">
+          <header className="top-10 flex h-fit flex-col items-center gap-5 text-center lg:sticky lg:max-w-80 lg:items-start lg:gap-8 lg:text-start">
+            <FileText className="h-full w-14" strokeWidth={1} />
+            <h1 className="text-xl font-extrabold lg:text-2xll">مطالب وبلاگ</h1>
+            <p className="text-muted-foreground lg:text-xl">
+              وبلاگ فرصتی مناسب برای انتشار دانش، تجربه و دیدگاه‌های تخصصی شماست.
+                                      </p>
+            <Separator />
+            <nav>
+              <ul className="flex flex-wrap items-center justify-center gap-4 lg:flex-col lg:items-start lg:gap-2">
+                <li className="font-medium">
+                  <a href="#">همه</a>
+                </li>
+                <li className="text-muted-foreground hover:text-primary">
+                  <a href="#">طراحی</a>
+                </li>
+                <li className="text-muted-foreground hover:text-primary">
+                  <a href="#">توسعه</a>
+                </li>
+                <li className="text-muted-foreground hover:text-primary">
+                  <a href="#">بازاریابی</a>
+                </li>
+              </ul>
+            </nav>
+          </header>
+          <div className="grid gap-4 md:grid-cols-2">
+            {blogs.map((blog, index) => (
+              <a
+                href="#"
+                key={index}
+                className="group relative isolate h-80 rounded-lg bg-background"
+              >
+                <div className="z-10 flex h-full flex-col justify-between p-6 text-start">
+                  <p className="text-muted-foreground transition-colors duration-500 group-hover:text-background">
+                    {blog.date}
+                  </p>
+                  <h2 className="line-clamp-2 text-xl font-medium transition-colors duration-500 group-hover:text-background">
+                    {blog.title}
+                  </h2>
+                </div>
+                <img
+                  src={blog.image}
+                  alt={blog.title}
+                  className="absolute inset-0 -z-10 size-full rounded-lg object-cover brightness-50 transition-all duration-500 ease-[cubic-bezier(0.77,0,0.175,1)] [clip-path:inset(0_0_100%_0)] group-hover:[clip-path:inset(0_0_0%_0)]"
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog11 };
diff --git a/blocks/blog12.tsx b/blocks/blog12.tsx
new file mode 100644
index 0000000..bd47c02
--- /dev/null
+++ b/blocks/blog12.tsx
@@ -0,0 +1,111 @@
+import { ArrowRight, FileText } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const posts = [
+  {
+    title: "چگونه برند و کسب‌وکار موفقی آنلاین بسازیم",
+    summary:
+      "راهکارهای عملی برای ساخت هویت برند قوی و رشد پایدار کسب‌وکار در فضای دیجیتال امروز.",
+    author: "علی رضایی",
+    readTime: "۱۰ دقیقه مطالعه",
+    image:
+      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
+    avatar: "/block-media/shadcnblocks/block/avatar-4.webp",
+    href: "#",
+  },
+  {
+    title: "تفاوت رابط کاربری و تجربه کاربری و چگونه برای هر دو طراحی کنیم",
+    summary:
+      "تفاوت‌های کلیدی UI و UX و نکاتی برای طراحی تجربه‌ای هماهنگ و کاربرمحور.",
+    author: "سارا احمدی",
+    readTime: "۱۴ دقیقه مطالعه",
+    image:
+      "/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
+    avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    href: "#",
+  },
+  {
+    title: "بهینه‌سازی وب‌سایت برای سئو و افزایش ترافیک",
+    summary:
+      "تکنیک‌های سئو که دیده‌شدن سایت شما را بهبود می‌دهد و ترافیک ارگانیک را افزایش می‌دهد.",
+    author: "مریم حسینی",
+    readTime: "۹ دقیقه مطالعه",
+    image:
+      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
+    avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
+    href: "#",
+  },
+];
+
+interface Blog12Props {
+  className?: string;
+}
+
+const Blog12 = ({ className }: Blog12Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4 text-center">
+          <Badge variant="outline" className="gap-1 py-1">
+            <FileText className="h-full w-4" />
+            وبلاگ ما
+          </Badge>
+          <h1 className="text-xl font-semibold text-balance">
+            جدیدترین روندها را کشف کنید
+          </h1>
+          <p className="text-muted-foreground">
+            در وبلاگ ما جدیدترین مقالات، آموزش‌ها و ایده‌های کاربردی را برای رشد کسب‌وکار و توسعه مهارت‌های خود دنبال کنید.
+                                </p>
+        </div>
+        <div className="mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {posts.map((post) => (
+            <a
+              key={post.title}
+              className="rounded-xl border"
+              href={post.href}
+            >
+              <div className="p-2">
+                <img
+                  src={post.image}
+                  alt={post.title}
+                  className="aspect-video w-full rounded-lg object-cover"
+                />
+              </div>
+              <div className="px-3 pt-2 pb-4 text-start">
+                <h2 className="mb-1 font-medium">{post.title}</h2>
+                <p className="line-clamp-2 text-sm text-muted-foreground">
+                  {post.summary}
+                </p>
+                <Separator className="my-5" />
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-3">
+                    <Avatar className="size-9 rounded-full ring-1 ring-input">
+                      <AvatarImage src={post.avatar} alt={post.author} />
+                    </Avatar>
+                    <span className="text-sm font-medium">{post.author}</span>
+                  </div>
+                  <Badge variant="secondary" className="h-fit shrink-0">
+                    {post.readTime}
+                  </Badge>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+        <div className="mt-10 flex justify-center">
+          <Button variant="outline">
+            مشاهده همه مطالب
+            <ArrowRight className="ms-2 h-full w-4 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog12 };
diff --git a/blocks/blog13.tsx b/blocks/blog13.tsx
new file mode 100644
index 0000000..9cf19ea
--- /dev/null
+++ b/blocks/blog13.tsx
@@ -0,0 +1,91 @@
+import { Calendar, ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const posts = [
+  {
+    title: "چگونه برند و کسب‌وکار موفقی بسازیم",
+    category: "کسب‌وکار",
+    date: "۲ مهر ۱۴۰۳",
+    image:
+      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
+    href: "#",
+  },
+  {
+    title: "تفاوت رابط کاربری و تجربه کاربری",
+    category: "طراحی",
+    date: "۱۸ فروردین ۱۴۰۳",
+    image:
+      "/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
+    href: "#",
+  },
+  {
+    title: "بهینه‌سازی وب‌سایت برای سئو و ترافیک بیشتر",
+    category: "بازاریابی",
+    date: "۱۰ شهریور ۱۴۰۳",
+    image:
+      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
+    href: "#",
+  },
+];
+
+interface Blog13Props {
+  className?: string;
+}
+
+const Blog13 = ({ className }: Blog13Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
+          <Badge variant="outline">مقالات</Badge>
+          <h1 className="text-xl font-semibold text-balance">
+            جدیدترین روندها را کشف کنید
+          </h1>
+          <p className="text-muted-foreground">
+            در وبلاگ ما جدیدترین مقالات، آموزش‌ها و ایده‌های کاربردی را برای رشد کسب‌وکار و توسعه مهارت‌های خود دنبال کنید.
+                                </p>
+          <a href="#" className="flex items-center gap-1 text-sm font-semibold">
+            مشاهده همه مطالب
+            <ChevronRight className="h-full w-4 rtl:rotate-180" />
+          </a>
+        </div>
+        <div className="mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {posts.map((post) => (
+            <div key={post.title} className="flex flex-col">
+              <div className="relative">
+                <img
+                  src={post.image}
+                  alt={post.title}
+                  className="aspect-video w-full rounded-lg object-cover"
+                />
+                <Badge
+                  variant="secondary"
+                  className="absolute top-4 end-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm"
+                >
+                  {post.category}
+                </Badge>
+              </div>
+              <div className="flex h-full flex-col justify-between p-4 text-start">
+                <h2 className="mb-5 text-xl font-semibold">{post.title}</h2>
+                <div className="flex justify-between gap-6 text-sm">
+                  <span className="flex items-center gap-1 text-muted-foreground">
+                    <Calendar className="h-4 w-4 shrink-0" />
+                    {post.date}
+                  </span>
+                  <a href={post.href} className="flex shrink-0 items-center gap-1">
+                    ادامه مطلب
+                                                  <ChevronRight className="h-full w-3 rtl:rotate-180" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog13 };
diff --git a/blocks/blog14.tsx b/blocks/blog14.tsx
new file mode 100644
index 0000000..9f8a305
--- /dev/null
+++ b/blocks/blog14.tsx
@@ -0,0 +1,115 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+type Category = "فناوری" | "کسب‌وکار" | "سلامت و تندرستی" | "بهره‌وری";
+
+type Post = {
+  title: string;
+  category: Category;
+  description: string;
+  image: string;
+};
+
+const posts: Post[] = [
+  {
+    title: "آینده هوش مصنوعی در فناوری امروز",
+    category: "فناوری",
+    description:
+      "ببینید هوش مصنوعی چگونه صنایع مختلف را دگرگون می‌کند و با پیشرفته‌ترین دستاوردهای هوش مصنوعی در دنیای فناوری آشنا شوید.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    title: "استراتژی‌های رشد مؤثر کسب‌وکار در ۱۴۰۴",
+    category: "کسب‌وکار",
+    description:
+      "استراتژی‌های اثبات‌شده برای رشد کسب‌وکار و ماندن رقابتی در بازاری که مدام در حال تغییر است.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    title: "برترین روندهای تندرستی برای بهبود سلامت در ۱۴۰۴",
+    category: "سلامت و تندرستی",
+    description:
+      "روندهای برجسته تندرستی که به شما کمک می‌کنند سبک زندگی سالم‌تر و متعادل‌تری داشته باشید.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    title: "افزایش بهره‌وری با ابزارها و تکنیک‌های هوشمند",
+    category: "بهره‌وری",
+    description:
+      "بیاموزید چگونه با جدیدترین ابزارها و تکنیک‌ها بهره‌وری خود را افزایش دهید و زمان را بهتر مدیریت کنید.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+];
+
+interface Blog14Props {
+  className?: string;
+}
+
+const Blog14 = ({ className }: Blog14Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-16 text-center">
+          <h1 className="text-2xll font-medium md:text-2xll">
+            بینش‌ها و تازه‌ترین روندها
+                                </h1>
+          <p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">
+            با جدیدترین تحلیل‌ها، روندها و نکات کاربردی همراه باشید و همیشه یک گام جلوتر حرکت کنید.
+                                </p>
+        </div>
+        <div className="mx-auto max-w-7xl">
+          <div className="my-16 grid grid-cols-1 items-center gap-8 md:grid-cols-2 lg:gap-16">
+            <img
+              src={posts[0].image}
+              alt={posts[0].title}
+              className="aspect-video rounded-lg object-cover"
+            />
+            <div className="flex flex-col items-start gap-4 text-start">
+              <Badge variant="secondary" className="shrink">
+                {posts[0].category}
+              </Badge>
+              <h2 className="text-xl font-semibold text-balance md:max-w-lg lg:text-3xl">
+                {posts[0].title}
+              </h2>
+              <p className="text-muted-foreground md:max-w-lg">
+                {posts[0].description}
+              </p>
+            </div>
+          </div>
+          <p className="text-start text-xl font-medium md:text-3xl">
+            مطالب پربازدید
+          </p>
+          <div className="mt-8 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-6">
+            {posts.slice(1).map((post) => (
+              <div
+                key={post.title}
+                className="flex flex-col items-start gap-4 text-start"
+              >
+                <img
+                  src={post.image}
+                  alt={post.title}
+                  className="aspect-video rounded-lg object-cover"
+                />
+                <Badge variant="secondary" className="shrink">
+                  {post.category}
+                </Badge>
+                <h3 className="text-xl font-semibold text-balance md:max-w-md">
+                  {post.title}
+                </h3>
+                <p className="text-muted-foreground md:max-w-md">
+                  {post.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog14 };
diff --git a/blocks/blog16.tsx b/blocks/blog16.tsx
new file mode 100644
index 0000000..5fe15ed
--- /dev/null
+++ b/blocks/blog16.tsx
@@ -0,0 +1,131 @@
+import { ArrowRight, ChevronRight } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const data = [
+  {
+    team: "اکمه",
+    logo: "/block-media/shadcnblocks/block/block-1.svg",
+    date: "۲ آذر ۱۴۰۳",
+    title: "آینده تحول دیجیتال: پذیرش فناوری‌های نوین",
+    link: "#",
+    categories: [
+      {
+        name: "فناوری",
+        link: "#",
+      },
+      {
+        name: "نوآوری",
+        link: "#",
+      },
+      {
+        name: "کسب‌وکار",
+        link: "#",
+      },
+    ],
+  },
+  {
+    team: "شرکت ادونت",
+    logo: "/block-media/shadcnblocks/block/block-2.svg",
+    date: "۱۷ آبان ۱۴۰۳",
+    title: "ساخت راه‌حل‌های پایدار برای چالش‌های فردا",
+    link: "#",
+    categories: [
+      {
+        name: "پایداری",
+        link: "#",
+      },
+      { name: "نوآوری", link: "#" },
+      { name: "کسب‌وکار", link: "#" },
+    ],
+  },
+  {
+    team: "ایس",
+    logo: "/block-media/shadcnblocks/block/block-3.svg",
+    date: "۹ آبان ۱۴۰۳",
+    title: "چگونه فناوری‌های مدرن چشم‌انداز کسب‌وکار را بازمی‌آفرینند",
+    link: "#",
+    categories: [
+      { name: "فناوری", link: "#" },
+      { name: "کسب‌وکار", link: "#" },
+    ],
+  },
+];
+
+interface Blog16Props {
+  className?: string;
+}
+
+const Blog16 = ({ className }: Blog16Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="px-0">
+        <h1 className="container text-start text-3xl font-bold lg:text-2xll">
+          <span className="text-muted-foreground">وبلاگ</span>
+          <br />
+          جدیدترین مطالب و به‌روزرسانی‌ها
+                          </h1>
+        <div className="mt-8">
+          <Separator />
+          <div className="">
+            {data.map((item) => (
+              <React.Fragment key={item.title}>
+                <div className="container grid grid-cols-1 gap-6 py-8 lg:grid-cols-4">
+                  <div className="hidden items-center gap-3 self-start lg:flex">
+                    <img
+                      src={item.logo}
+                      alt={item.team}
+                      className="h-auto w-11"
+                    />
+                    <div className="flex flex-col gap-1 text-start">
+                      <span className="font-semibold">{item.team}</span>
+                      <span className="text-sm text-muted-foreground">تیم</span>
+                    </div>
+                  </div>
+                  <div className="col-span-2 max-w-xl text-start">
+                    <span className="mb-2 text-sm font-medium text-muted-foreground">
+                      {item.date}
+                      <span className="inline lg:hidden">  {item.team}</span>
+                    </span>
+                    <h3 className="text-xl font-bold hover:underline lg:text-3xl">
+                      <a href={item.link}>{item.title}</a>
+                    </h3>
+                    <div className="mt-5 flex flex-wrap gap-2">
+                      {item.categories.map((category) => (
+                        <a
+                          key={category.name}
+                          href={category.link}
+                          className="flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-muted"
+                        >
+                          {category.name}
+                          <ChevronRight className="h-4 w-4 text-muted-foreground rtl:rotate-180" />
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    asChild
+                    size="icon"
+                    className="ms-auto hidden lg:flex"
+                  >
+                    <a href={item.link}>
+                      <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+                      <span className="sr-only">ادامه مطلب</span>
+                    </a>
+                  </Button>
+                </div>
+                <Separator />
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog16 };
diff --git a/blocks/blog17.tsx b/blocks/blog17.tsx
new file mode 100644
index 0000000..b12db5e
--- /dev/null
+++ b/blocks/blog17.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const ALL_ARTICLES = "همه مطالب";
+
+const data = [
+  {
+    id: 1,
+    title: "شروع کار با توسعه وب مدرن: راهنمای جامع",
+    description:
+      "با اصول توسعه وب مدرن آشنا شوید. ابزارها، فریم‌ورک‌ها و بهترین روش‌هایی که به ساخت اپلیکیشن‌های وب پایدار و مقیاس‌پذیر در محیط توسعه پرشتاب امروز کمک می‌کنند.",
+    author: "سارا احمدی",
+    date: "۲۵ اسفند ۱۴۲",
+    category: "توسعه وب",
+    link: "#",
+  },
+  {
+    id: 2,
+    title: "راهنمای جامع مدیریت state در اپلیکیشن‌های فرانت‌اند",
+    description:
+      "رویکردهای مختلف مدیریت state در اپلیکیشن‌های فرانت‌اند را بررسی کنید. از state محلی تا راه‌حل‌های سراسری  چگونه استراتژی مناسب را برای نیاز و پیچیدگی پروژه انتخاب کنید.",
+    author: "امیر ویلسون",
+    date: "۲۲ اسفند ۱۴۲",
+    category: "فرانت‌اند",
+    link: "#",
+  },
+  {
+    id: 3,
+    title: "ساخت سیستم‌های سمت سرور مقیاس‌پذیر: بهترین روش‌ها و الگوها",
+    description:
+      "طراحی و پیاده‌سازی سیستم‌های بک‌اند را بیاموزید که با رشد اپلیکیشن شما گسترش می‌یابند. الگوهای معماری، تکنیک‌های بهینه‌سازی و ملاحظات زیرساخت برای توسعه مدرن.",
+    author: "محمد رضایی",
+    date: "۱۸ اسفند ۱۴۲",
+    category: "سمت سرور",
+    link: "#",
+  },
+  {
+    id: 4,
+    title: "تسلط بر معماری کامپوننت در توسعه فرانت‌اند",
+    description:
+      "ساخت کامپوننت‌های قابل نگهداری و استفاده مجدد را عمیق‌تر بررسی کنید. الگوهای طراحی کامپوننت، مدیریت state و بهترین روش‌ها برای معماری‌های مقیاس‌پذیر.",
+    author: "اما ژانگ",
+    date: "۱۵ اسفند ۱۴۲",
+    category: "فرانت‌اند",
+    link: "#",
+  },
+  {
+    id: 5,
+    title: "بهینه‌سازی کارایی اپلیکیشن: از تئوری تا عمل",
+    description:
+      "تکنیک‌های عملی بهبود کارایی اپلیکیشن را کشف کنید. از بهینه‌سازی در سطح کد تا تنظیم زیرساخت  چگونه تجربه‌ای سریع‌تر و کارآمدتر ارائه دهید.",
+    author: "رضا پاک",
+    date: "۱۳ اسفند ۱۴۲",
+    category: "توسعه وب",
+    link: "#",
+  },
+  {
+    id: 6,
+    title: "بهترین روش‌های امنیت در توسعه سمت سرور",
+    description:
+      "مفاهیم امنیتی ضروری و استراتژی‌های پیاده‌سازی برای محافظت از سیستم‌های بک‌اند. آسیب‌پذیری‌های رایج، روش‌های احراز هویت و حفاظت از داده.",
+    author: "لیلا محمدی",
+    date: "۹ اسفند ۱۴۲",
+    category: "سمت سرور",
+    link: "#",
+  },
+  {
+    id: 7,
+    title: "استراتژی‌های مدرن تست فرانت‌اند",
+    description:
+      "رویکردهای جامع تست اپلیکیشن‌های فرانت‌اند را بیاموزید. از تست واحد کامپوننت‌ها تا تست end-to-end  چگونه کد فرانت‌اند قابل اعتماد و نگهداری بماند.",
+    author: "علی کریمی",
+    date: "۶ اسفند ۱۴۲",
+    category: "فرانت‌اند",
+    link: "#",
+  },
+  {
+    id: 8,
+    title: "طراحی و بهینه‌سازی پایگاه داده برای سیستم‌های بک‌اند",
+    description:
+      "اصول طراحی و بهینه‌سازی پایگاه داده برای اپلیکیشن‌های سمت سرور. طراحی schema، استراتژی‌های ایندکس‌گذاری و بهینه‌سازی کوئری.",
+    author: "راحله مارتینز",
+    date: "۳ اسفند ۱۴۲",
+    category: "سمت سرور",
+    link: "#",
+  },
+  {
+    id: 9,
+    title: "ساخت رابط‌های وب واکنش‌گرا",
+    description:
+      "هنر ساخت رابط‌های وب واکنش‌گرا و تطبیقی را بیاموزید. تکنیک‌های مدرن استایل‌دهی، طراحی mobile-first و استراتژی‌های بهینه‌سازی کارایی.",
+    author: "کیوان اندرسون",
+    date: "۳۰ بهمن ۱۴۲",
+    category: "توسعه وب",
+    link: "#",
+  },
+  {
+    id: 10,
+    title: "طراحی اتصال هوشمند و الگوهای یکپارچه‌سازی",
+    description:
+      "بهترین روش‌های طراحی و یکپارچه‌سازی اتصال هوشمند در اپلیکیشن‌ها. اصول RESTful، استراتژی‌های احراز هویت و الگوهای مدیریت خطا.",
+    author: "نینا پاتیل",
+    date: "۲۶ بهمن ۱۴۲",
+    category: "سمت سرور",
+    link: "#",
+  },
+];
+
+interface Blog17Props {
+  className?: string;
+}
+
+const Blog17 = ({ className }: Blog17Props) => {
+  const [selectedCategory, setSelectedCategory] = useState(ALL_ARTICLES);
+
+  const categories = [
+    ALL_ARTICLES,
+    ...Array.from(new Set(data.map((item) => item.category))),
+  ];
+
+  const filteredData =
+    selectedCategory === ALL_ARTICLES
+      ? data
+      : data.filter((item) => item.category === selectedCategory);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6 text-center">
+          <Badge variant="secondary">وبلاگ</Badge>
+          <h1 className="text-xl font-bold lg:text-2xll">
+            جدیدترین مطالب و به‌روزرسانی‌ها
+                                </h1>
+          <p className="text-balance lg:text-xl">
+            با جدیدترین روندها، آموزش‌ها و بهترین روش‌های توسعه نرم‌افزار به‌روز
+            بمانید. کارشناسان ما دانش خود را برای ساخت اپلیکیشن‌های بهتر به
+            اشتراک می‌گذارند.
+          </p>
+        </div>
+        <div className="mx-auto mt-20 grid max-w-7xl grid-cols-1 gap-20 lg:grid-cols-4">
+          <div className="hidden flex-col gap-2 lg:flex">
+            {categories.map((category) => (
+              <Button
+                variant="ghost"
+                key={category}
+                onClick={() => setSelectedCategory(category)}
+                className={cn(
+                  "justify-start text-start",
+                  selectedCategory === category &&
+                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                )}
+              >
+                {category}
+              </Button>
+            ))}
+          </div>
+          <div className="lg:col-span-3">
+            {filteredData.map((item) => (
+              <React.Fragment key={item.id}>
+                <a href={item.link} className="flex flex-col gap-3 text-start">
+                  <p className="text-sm font-semibold text-muted-foreground">
+                    {item.category}
+                  </p>
+                  <h3 className="text-xl font-semibold text-balance lg:text-3xl">
+                    {item.title}
+                  </h3>
+                  <p className="text-muted-foreground">{item.description}</p>
+                  <div className="mt-3 flex items-center gap-2 text-sm">
+                    <span className="font-medium">{item.author}</span>
+                    <span className="text-muted-foreground">
+                      · {item.date}
+                    </span>
+                  </div>
+                </a>
+                <Separator className="my-8" />
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog17 };
diff --git a/blocks/blog19.tsx b/blocks/blog19.tsx
new file mode 100644
index 0000000..0f67bbd
--- /dev/null
+++ b/blocks/blog19.tsx
@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const data = [
+  {
+    id: 1,
+    title: "شروع کار با توسعه وب مدرن",
+    description:
+      "ابزارها و فریم‌ورک‌های ضروری توسعه وب مدرن را بشناسید. فناوری‌های جدید، بهترین روش‌ها و تکنیک‌های بهینه‌سازی گردش کار برای ساخت اپلیکیشن‌های پایدار.",
+    date: "۲۵ اسفند ۱۴۲",
+    category: "توسعه وب",
+    link: "#",
+  },
+  {
+    id: 2,
+    title: "درک اصول طراحی فرانت‌اند",
+    description:
+      "اصول بنیادی طراحی و توسعه فرانت‌اند را بررسی کنید. چیدمان واکنش‌گرا، الگوهای رابط کاربری، استانداردهای دسترس‌پذیری و ساخت تجربه‌های جذاب.",
+    date: "۲۲ اسفند ۱۴۲",
+    category: "فرانت‌اند",
+    link: "#",
+  },
+  {
+    id: 3,
+    title: "راهنمای اصول توسعه سمت سرور",
+    description:
+      "مفاهیم اصلی توسعه بک‌اند از طراحی پایگاه داده و معماری اتصال هوشمند تا مدیریت سرور را بیاموزید. سیستم‌های امن، کارآمد و مقیاس‌پذیر بسازید.",
+    date: "۱۸ اسفند ۱۴۲",
+    category: "سمت سرور",
+    link: "#",
+  },
+  {
+    id: 4,
+    title: "مفاهیم پیشرفته برنامه‌نویسی برنامه‌نویسی وب",
+    description:
+      "به مفاهیم پیشرفته برنامه‌نویسی وب از برنامه‌نویسی ناهمگام و الگوهای طراحی تا ویژگی‌های ES6+ بپردازید. کدی تمیز، قابل نگهداری و کارآمد بنویسید.",
+    date: "۱۵ اسفند ۱۴۲",
+    category: "فرانت‌اند",
+    link: "#",
+  },
+];
+
+interface Blog19Props {
+  className?: string;
+}
+
+const Blog19 = ({ className }: Blog19Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 flex flex-wrap items-center justify-between gap-1">
+          <h1 className="text-start text-xl font-semibold md:text-xl">
+            مطالب مرتبط
+          </h1>
+          <Button
+            variant="outline"
+            className="md:h-10 md:px-4 md:py-2"
+            size="sm"
+          >
+            مشاهده همه مطالب
+          </Button>
+        </div>
+        <div className="grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10">
+          {data.map((item) => (
+            <a
+              key={item.id}
+              href={item.link}
+              className="flex flex-col gap-2 text-start"
+            >
+              <span className="text-sm font-medium text-muted-foreground">
+                {item.category}
+              </span>
+              <h3 className="mb-1 text-lg font-semibold">{item.title}</h3>
+              <p className="mb-4 text-sm text-muted-foreground">
+                {item.description}
+              </p>
+              <span className="text-sm font-medium text-muted-foreground">
+                {item.date}
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog19 };
diff --git a/blocks/blog21.tsx b/blocks/blog21.tsx
new file mode 100644
index 0000000..8315426
--- /dev/null
+++ b/blocks/blog21.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { ArrowLeft, ArrowRight, Calendar } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: string;
+  title: string;
+  summary: string;
+  href: string;
+  image: string;
+  date: string;
+  tag: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: "item-1",
+    title: "ویژگی‌های کلیدی اپلیکیشن یادداشت ما را بشناسید",
+    summary:
+      "الگوریتم‌های پیشرفته هوش مصنوعی که زبان انسان را درک و پردازش می‌کنند و ارتباط روان میان کاربر و ماشین را از طریق متن و گفتار ممکن می‌سازند.",
+    href: "https://www.ShadcnBlocks",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    date: "۲۰ تیر ۱۴۰۳",
+    tag: "هوش مصنوعی",
+  },
+  {
+    id: "item-2",
+    title: "فناوری بینایی ماشین، تحولی در صنعت",
+    summary:
+      "قابلیت‌های قدرتمند تشخیص و پردازش تصویر که به سیستم‌های هوش مصنوعی امکان می‌دهد اطلاعات بصری را تحلیل، درک و تفسیر کنند.",
+    href: "https://www.ShadcnBlocks",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    date: "۲۱ تیر ۱۴۰۳",
+    tag: "توسعه",
+  },
+  {
+    id: "item-3",
+    title: "اتوماسیون یادگیری ماشین؛ آینده همین حالاست",
+    summary:
+      "الگوریتم‌های خودبهبودی که از الگوهای داده یاد می‌گیرند تا وظایف پیچیده را خودکار کنند و با کمترین دخالت انسان تصمیم بگیرند.",
+    href: "https://www.ShadcnBlocks",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+    date: "۲۲ تیر ۱۴۰۳",
+    tag: "متن‌باز",
+  },
+  {
+    id: "item-4",
+    title: "تحلیل پیش‌بینی؛ کلید موفقیت",
+    summary:
+      "قابلیت‌های پیشرفته پیش‌بینی که داده‌های گذشته را تحلیل می‌کنند تا روندها و نتایج آینده را برآورد کنند و تصمیم‌گیری داده‌محور را ممکن سازند.",
+    href: "https://www.ShadcnBlocks",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+    date: "۲۳ تیر ۱۴۰۳",
+    tag: "ویژگی",
+  },
+  {
+    id: "item-5",
+    title: "معماری شبکه عصبی؛ آینده همین حالاست",
+    summary:
+      "مدل‌های پیچیده هوش مصنوعی الهام‌گرفته از ساختار مغز انسان که از طریق یادگیری عمیق و تشخیص الگو، مسائل پیچیده را حل می‌کنند.",
+    href: "https://www.ShadcnBlocks",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+    date: "۲۴ تیر ۱۴۰۳",
+    tag: "راهنما",
+  },
+];
+
+interface Blog21Props {
+  className?: string;
+}
+
+const Blog21 = ({ className }: Blog21Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-linear-to-b from-background to-muted/20 py-24",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="mb-12 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-2 text-start">
+            <h2 className="text-3xl font-bold tracking-tight md:text-xl">
+              آخرین مطالب وبلاگ
+            </h2>
+            <p className="text-muted-foreground">
+              با جدیدترین مقالات و تحلیل‌های ما همراه باشید
+                                      </p>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollPrev()}
+              disabled={!canScrollPrev}
+              className="rounded-full hover:bg-background/80 disabled:opacity-50"
+            >
+              <ArrowLeft className="size-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollNext()}
+              disabled={!canScrollNext}
+              className="rounded-full hover:bg-background/80 disabled:opacity-50"
+            >
+              <ArrowRight className="size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+      <Carousel
+        setApi={setCarouselApi}
+        opts={{
+          align: "start",
+          loop: true,
+          direction: "rtl",
+          breakpoints: {
+            "(max-width: 768px)": {
+              dragFree: true,
+            },
+          },
+        }}
+        className="w-full"
+      >
+        <CarouselContent className="me-[calc(theme(container.padding))] gap-6 2xl:ms-[calc(50vw-700px+theme(container.padding)-20px)] 2xl:me-[calc(50vw-700px+theme(container.padding))]">
+          {DATA.map((item) => (
+            <CarouselItem
+              key={item.id}
+              className="px-4 md:basis-1/2 md:ps-4 md:pe-0 lg:basis-1/3"
+            >
+              <div className="group h-full overflow-hidden rounded-xl border bg-background shadow-sm transition-all hover:shadow-md">
+                <a href={item.href} className="flex h-full flex-col">
+                  <div className="relative aspect-4/3 w-full overflow-hidden bg-muted">
+                    <Badge className="absolute top-4 end-4 z-10">
+                      {item.tag}
+                    </Badge>
+                    <img
+                      src={item.image || "/placeholder.svg"}
+                      alt={item.title}
+                      className="h-full w-full object-cover transition duration-500 group-hover:scale-105"
+                    />
+                  </div>
+                  <div className="flex flex-1 flex-col justify-between p-6 text-start">
+                    <div>
+                      <h3 className="mb-2 line-clamp-2 text-xl font-semibold tracking-tight">
+                        {item.title}
+                      </h3>
+                      <p className="line-clamp-2 text-muted-foreground">
+                        {item.summary}
+                      </p>
+                    </div>
+                    <div className="mt-6 flex items-center justify-between">
+                      <Badge variant="secondary" className="rounded-full">
+                        <Calendar className="ms-1.5 size-3.5" />
+                        <span className="text-xs">{item.date}</span>
+                      </Badge>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="rounded-full hover:bg-background"
+                      >
+                        <ArrowRight className="size-4 rtl:rotate-180" />
+                      </Button>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <div className="mt-16 flex items-center justify-center">
+        <Button
+          variant="outline"
+          size="lg"
+          className="rounded-full px-8 font-medium hover:bg-primary hover:text-primary-foreground"
+        >
+          مشاهده همه مطالب
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export { Blog21 };
diff --git a/blocks/blog22.tsx b/blocks/blog22.tsx
new file mode 100644
index 0000000..1de8920
--- /dev/null
+++ b/blocks/blog22.tsx
@@ -0,0 +1,120 @@
+import { ArrowRight } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  title: string;
+  content: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    title: "رایانش ابری",
+    content:
+      "بررسی الگوهای مقرون‌به‌صرفه مهاجرت به ابر و مدیریت چندابری",
+  },
+  {
+    title: "امنیت سایبری",
+    content:
+      "پیاده‌سازی چارچوب‌های امنیتی تطبیقی برای نیروهای دورکار",
+  },
+  {
+    title: "اینترنت اشیا",
+    content: "کاهش تأخیر در شهرهای هوشمند با رایانش مه",
+  },
+  {
+    title: "بلاک‌چین",
+    content:
+      "کاربردهای سازمانی فناوری دفتر کل توزیع‌شده در زنجیره تأمین",
+  },
+];
+
+interface Blog22Props {
+  className?: string;
+}
+
+const Blog22 = ({ className }: Blog22Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("dark relative bg-background py-32", className)}
+    >
+      <div className="container">
+        <div className="mb-8 text-start">
+          <h1 className="text-3xl font-bold text-foreground md:text-xl lg:text-2xll">
+            بینش‌های فناوری
+          </h1>
+
+          <div className="mt-4 flex flex-wrap items-center justify-between gap-4">
+            <span className="mt-2 block text-sm text-muted-foreground md:text-base">
+              با فناوری‌های پیشرو که آینده دنیای دیجیتال را شکل می‌دهند آشنا شوید.
+                                      </span>
+            <Button
+              variant="outline"
+              className="rounded-full border-foreground text-foreground"
+            >
+              ادامه مطلب
+                                        <ArrowRight className="h-4 w-4 md:h-6 md:w-6 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12">
+          <div className="mb-4 text-start">
+            <img
+              className="w-full rounded-lg object-cover"
+              src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
+              alt="انقلاب هوش مصنوعی"
+            />
+            <div className="mt-4">
+              <h2 className="text-xl font-bold text-foreground md:text-3xl lg:text-xl">
+                هوش مصنوعی نسل بعد: تحول عملیات کسب‌وکار
+              </h2>
+            </div>
+            <div className="mt-6 flex items-center gap-3 md:mt-8 md:gap-4">
+              <Avatar className="h-8 w-8 rounded-md md:h-12 md:w-12">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-1.webp"
+                  alt="سارا احمدی"
+                />
+              </Avatar>
+              <span className="text-sm md:text-base">
+                <span className="block text-foreground">سارا احمدی</span>
+                <span className="text-xs text-muted-foreground md:text-sm">
+                  پژوهشگر هوش مصنوعی
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div className="space-y-6 text-foreground md:space-y-8">
+            {DATA.map((post) => (
+              <div
+                key={post.title}
+                className="flex items-start gap-4 border-b pb-6 text-start last:border-b-0"
+              >
+                <div className="w-1/4 shrink-0 md:w-1/5">
+                  <img
+                    className="rounded-md"
+                    src="/block-media/shadcnblocks/block/placeholder-dark-8-wide.svg"
+                    alt={post.title}
+                  />
+                </div>
+                <div className="w-3/4 md:w-4/5">
+                  <p className="text-sm leading-relaxed md:text-base">
+                    {post.content}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog22 };
diff --git a/blocks/blog23.tsx b/blocks/blog23.tsx
new file mode 100644
index 0000000..d983501
--- /dev/null
+++ b/blocks/blog23.tsx
@@ -0,0 +1,159 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Post {
+  id: string;
+  title: string;
+  summary: string;
+  label: string;
+  author: string;
+  published: string;
+  url: string;
+  image: string;
+}
+
+interface Blog23Props {
+  tagline: string;
+  heading: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+  posts: Post[];
+  className?: string;
+}
+
+const Blog23 = ({
+  tagline = "آخرین به‌روزرسانی‌ها",
+  heading = "مطالب وبلاگ",
+  description = "جدیدترین روندها، نکات و بهترین روش‌های توسعه وب مدرن را دنبال کنید؛ از طراحی رابط کاربری تا سیستم‌های طراحی، همراه با آموزش‌ها و تجربه‌های متخصصان.",
+  buttonText = "مشاهده همه مطالب",
+  buttonUrl = "https://ShadcnBlocks",
+  posts = [
+    {
+      id: "post-1",
+      title: "شروع کار با کامپوننت‌های ری یو آی",
+      summary:
+        "یاد بگیرید چگونه کامپوننت‌های shadcn/ui را در پروژه‌های Next.js به‌سرعت پیاده‌سازی و سفارشی‌سازی کنید و با بهترین روش‌های ساخت رابط‌های کاربری مدرن آشنا شوید.",
+      label: "آموزش",
+      author: "سارا احمدی",
+      published: "۱۱ دی ۱۴۲",
+      url: "https://ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+    {
+      id: "post-2",
+      title: "ساخت وب‌اپلیکیشن‌های دسترس‌پذیر",
+      summary:
+        "با کامپوننت‌های دسترس‌پذیر shadcn/ui تجربه‌های وب فراگیر بسازید. نکات عملی برای برچسب‌های ARIA، ناوبری با کیبورد و HTML معنایی را بیاموزید.",
+      label: "دسترس‌پذیری",
+      author: "محمد رضایی",
+      published: "۱۱ دی ۱۴۲",
+      url: "https://ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+    {
+      id: "post-3",
+      title: "سیستم‌های طراحی مدرن با استایل‌دهی مدرن",
+      summary:
+        "ساخت سیستم‌های طراحی مقیاس‌پذیر با Tailwind CSS و shadcn/ui را بررسی کنید. چگونه یکنواختی را حفظ کنید و در عین حال کتابخانه‌ای انعطاف‌پذیر و قابل نگهداری بسازید.",
+      label: "سیستم طراحی",
+      author: "اما حسینی",
+      published: "۱۱ دی ۱۴۲",
+      url: "https://ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+  ],
+  className,
+}: Blog23Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-4xl">
+        <div className="text-center">
+          <Badge variant="secondary" className="mb-6">
+            {tagline}
+          </Badge>
+          <h2 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-2xll lg:mb-6">
+            {heading}
+          </h2>
+          <p className="mb-12 text-muted-foreground md:text-base lg:text-lg">
+            {description}
+          </p>
+        </div>
+
+        <div className="space-y-12">
+          {posts.map((post) => (
+            <Card
+              key={post.id}
+              className="overflow-hidden border-0 bg-transparent shadow-none"
+            >
+              <div className="mb-6">
+                <a
+                  href={post.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block transition-opacity duration-200 hover:opacity-90"
+                >
+                  <img
+                    src={post.image}
+                    alt={post.title}
+                    className="aspect-16/9 h-full w-full rounded-lg object-cover object-center"
+                  />
+                </a>
+              </div>
+              <div className="space-y-4 text-start">
+                <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+                  <Badge variant="secondary">{post.label}</Badge>
+                  <span>{post.author}</span>
+                  <span>{post.published}</span>
+                </div>
+                <h3 className="text-xl leading-tight font-bold lg:text-3xl">
+                  <a
+                    href={post.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="hover:underline"
+                  >
+                    {post.title}
+                  </a>
+                </h3>
+                <p className="text-lg text-muted-foreground">{post.summary}</p>
+                <a
+                  href={post.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center text-primary hover:underline"
+                >
+                  ادامه مطلب
+                                            <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+                </a>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-16 text-center">
+          <Button
+            variant="outline"
+            size="lg"
+            className="w-full sm:w-auto"
+            asChild
+          >
+            <a href={buttonUrl} target="_blank" rel="noopener noreferrer">
+              {buttonText}
+              <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+            </a>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog23 };
diff --git a/blocks/blog24.tsx b/blocks/blog24.tsx
new file mode 100644
index 0000000..b64e82d
--- /dev/null
+++ b/blocks/blog24.tsx
@@ -0,0 +1,163 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Post {
+  id: string;
+  title: string;
+  summary: string;
+  label: string;
+  author: string;
+  published: string;
+  url: string;
+  image: string;
+}
+
+interface Blog24Props {
+  tagline: string;
+  heading: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+  posts: Post[];
+  className?: string;
+}
+
+const Blog24 = ({
+  tagline = "آخرین به‌روزرسانی‌ها",
+  heading = "مطالب وبلاگ",
+  description = "جدیدترین روندها، نکات و بهترین روش‌های توسعه وب مدرن را دنبال کنید؛ از طراحی رابط کاربری تا سیستم‌های طراحی، همراه با آموزش‌ها و تجربه‌های متخصصان.",
+  buttonText = "مشاهده همه مطالب",
+  buttonUrl = "https://ShadcnBlocks",
+  posts = [
+    {
+      id: "post-1",
+      title: "شروع کار با کامپوننت‌های ری یو آی",
+      summary:
+        "یاد بگیرید چگونه کامپوننت‌های shadcn/ui را در پروژه‌های Next.js به‌سرعت پیاده‌سازی و سفارشی‌سازی کنید و با بهترین روش‌های ساخت رابط‌های کاربری مدرن آشنا شوید.",
+      label: "آموزش",
+      author: "سارا احمدی",
+      published: "۱۱ دی ۱۴۲",
+      url: "https://ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+    {
+      id: "post-2",
+      title: "ساخت وب‌اپلیکیشن‌های دسترس‌پذیر",
+      summary:
+        "با کامپوننت‌های دسترس‌پذیر shadcn/ui تجربه‌های وب فراگیر بسازید. نکات عملی برای برچسب‌های ARIA، ناوبری با کیبورد و HTML معنایی را بیاموزید.",
+      label: "دسترس‌پذیری",
+      author: "محمد رضایی",
+      published: "۱۱ دی ۱۴۲",
+      url: "https://ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+    {
+      id: "post-3",
+      title: "سیستم‌های طراحی مدرن با استایل‌دهی مدرن",
+      summary:
+        "ساخت سیستم‌های طراحی مقیاس‌پذیر با Tailwind CSS و shadcn/ui را بررسی کنید. چگونه یکنواختی را حفظ کنید و در عین حال کتابخانه‌ای انعطاف‌پذیر و قابل نگهداری بسازید.",
+      label: "سیستم طراحی",
+      author: "اما حسینی",
+      published: "۱۱ دی ۱۴۲",
+      url: "https://ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+  ],
+  className,
+}: Blog24Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto">
+        <div className="mx-auto max-w-3xl text-center">
+          <Badge variant="secondary" className="mb-6">
+            {tagline}
+          </Badge>
+          <h2 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-2xll lg:mb-6">
+            {heading}
+          </h2>
+          <p className="mb-12 text-muted-foreground md:text-base lg:text-lg">
+            {description}
+          </p>
+        </div>
+
+        <div className="mx-auto max-w-5xl space-y-12">
+          {posts.map((post) => (
+            <Card
+              key={post.id}
+              className="overflow-hidden border-0 bg-transparent shadow-none"
+            >
+              <div className="flex flex-col gap-6 sm:flex-row">
+                <div className="shrink-0">
+                  <a
+                    href={post.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block transition-opacity duration-200 hover:opacity-90"
+                  >
+                    <img
+                      src={post.image}
+                      alt={post.title}
+                      className="aspect-16/9 w-full rounded-lg object-cover object-center sm:w-[260px]"
+                    />
+                  </a>
+                </div>
+                <div className="flex-1 space-y-3 text-start">
+                  <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+                    <Badge variant="secondary">{post.label}</Badge>
+                    <span>{post.author}</span>
+                    <span>{post.published}</span>
+                  </div>
+                  <h3 className="text-xl leading-tight font-bold lg:text-xl">
+                    <a
+                      href={post.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="hover:underline"
+                    >
+                      {post.title}
+                    </a>
+                  </h3>
+                  <p className="text-base text-muted-foreground">
+                    {post.summary}
+                  </p>
+                  <a
+                    href={post.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center text-primary hover:underline"
+                  >
+                    ادامه مطلب
+                                                  <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+                  </a>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-16 text-center">
+          <Button
+            variant="outline"
+            size="lg"
+            className="w-full sm:w-auto"
+            asChild
+          >
+            <a href={buttonUrl} target="_blank" rel="noopener noreferrer">
+              {buttonText}
+              <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+            </a>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog24 };
diff --git a/blocks/blog26.tsx b/blocks/blog26.tsx
new file mode 100644
index 0000000..a116d2a
--- /dev/null
+++ b/blocks/blog26.tsx
@@ -0,0 +1,188 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { cn } from "@/lib/utils";
+
+interface post {
+  thumbnail?: string;
+  title: string;
+  summary?: string;
+  author: {
+    name: string;
+    link: string;
+  };
+  link: string;
+  date: string;
+  className?: string;
+}
+
+const TOP_POST: post = {
+  thumbnail:
+    "/block-media/shadcnblocks/block/placeholder-1.svg",
+  title: "آینده نوآوری در هوش مصنوعی",
+  summary:
+    "بررسی کنید فناوری‌های نوین هوش مصنوعی چگونه فرایندهای کسب‌وکار را متحول کرده، بهره‌وری را افزایش می‌دهند و فرصت‌های تازه‌ای برای رشد ایجاد می‌کنند.",
+  author: {
+    name: "کریستین بونهنر",
+    link: "#",
+  },
+  link: "#",
+  date: "۲۵ اسفند ۱۴۲",
+};
+
+const POSTS: Array<post> = [
+  {
+    title:
+      "هوش مصنوعی برای بازاریاب‌ها: جدیدترین ابزارها و چگونگی تسلط بر آن‌ها",
+    link: "#",
+    author: {
+      name: "کریستین بونهنر",
+      link: "#",
+    },
+    date: "۲۲ اسفند ۱۴۲",
+  },
+  {
+    title: "۶ ابزار هوش مصنوعی برای ساده‌سازی و تسریع تولید پادکست",
+    link: "#",
+    author: {
+      name: "کریستین بونهنر",
+      link: "#",
+    },
+    date: "۲۰ اسفند ۱۴۲",
+  },
+  {
+    title: "اگر رشد کانال یوتیوب شما متوقف شده، این را امتحان کنید",
+    link: "#",
+    author: {
+      name: "کریستین بونهنر",
+      link: "#",
+    },
+    date: "۱۸ اسفند ۱۴۲",
+  },
+];
+
+const Post = ({ title, author, date, link, className }: post) => {
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col gap-[1.875rem] border-b py-10 text-start lg:max-w-[28.125rem]",
+        className,
+      )}
+    >
+      <a
+        href={link}
+        className="group inline-block text-xl leading-[1.22] font-semibold hover:underline"
+      >
+        {title}
+      </a>
+      <div className="flex w-full flex-col gap-5">
+        <div className="flex flex-wrap items-center gap-2">
+          <a
+            className="text-sm font-medium text-foreground/60 hover:underline"
+            href={author.link}
+          >
+            مقاله {author.name}
+          </a>
+          <span className="text-sm text-muted-foreground" aria-hidden="true">
+            •
+          </span>
+          <span className="text-sm text-muted-foreground">{date}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface Blog26Props {
+  className?: string;
+}
+
+const Blog26 = ({ className }: Blog26Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-10 grid grid-cols-[minmax(18.75rem,1fr)] items-start justify-start gap-2.5 md:mb-20 lg:mb-24 lg:grid-cols-[minmax(18.75rem,1fr)_minmax(12.5rem,28.125rem)] lg:gap-20">
+          <h1 className="text-start text-2xll leading-[1.22] font-bold md:text-[5rem] md:font-semibold lg:text-[7.5rem]">
+            وبلاگ
+          </h1>
+          <div className="pb-5 text-start">
+            <p className="text-base text-foreground sm:text-lg">
+              <span className="text-muted-foreground">
+                جایی که ایده‌های نو به واقعیت تبدیل می‌شوند
+                                            </span>
+              <br />
+              <strong>وبلاگ شرکت</strong>
+            </p>
+            <div className="mt-6 rounded-lg border p-4">
+              <div className="flex items-center gap-3">
+                <img
+                  src="/block-media/shadcnblocks/block/portraits/christian-buehner-DItYlc26zVI-unsplash 1.jpg"
+                  alt="تصویر کریستین بونهنر"
+                  className="h-12 w-12 rounded-full object-cover"
+                />
+                <div>
+                  <p className="text-sm font-medium">کریستین بونهنر</p>
+                  <p className="text-xs text-muted-foreground">نویسنده محتوا</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="grid w-full grid-cols-[minmax(18.75rem,1fr)] gap-20 pb-[6.25rem] lg:grid-cols-[minmax(18.75rem,1fr)_minmax(12.5rem,28.125rem)]">
+          <div className="text-start">
+            <div className="flex flex-col gap-[1.875rem]">
+              <a
+                href={TOP_POST.link}
+                className="group flex aspect-[1.736111111] w-full overflow-hidden rounded-[0.625rem]"
+              >
+                <AspectRatio
+                  ratio={1.736111111}
+                  className="m-auto overflow-hidden"
+                >
+                  <img
+                    src={TOP_POST.thumbnail}
+                    alt={TOP_POST.title}
+                    className="block size-full object-cover object-center"
+                  />
+                </AspectRatio>
+              </a>
+              <div className="flex w-full flex-col gap-5">
+                <a
+                  href={TOP_POST.link}
+                  className="group inline-block text-xl leading-[1.22] font-semibold hover:underline md:text-xl"
+                >
+                  {TOP_POST.title}
+                </a>
+                <p className="text-lg text-foreground">{TOP_POST.summary}</p>
+              </div>
+              <div className="flex w-full flex-col gap-5">
+                <div className="flex flex-wrap items-center gap-2">
+                  <a
+                    className="text-sm font-medium text-foreground/60 hover:underline"
+                    href={TOP_POST.author.link}
+                  >
+                    مقاله {TOP_POST.author.name}
+                  </a>
+                  <span className="text-sm text-muted-foreground" aria-hidden="true">
+                    •
+                  </span>
+                  <span className="text-sm text-muted-foreground">
+                    {TOP_POST.date}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-10 text-start">
+            <div className="text-2xll leading-[1.2] font-semibold">جدیدترین</div>
+            <div className="-mt-10 flex flex-col">
+              {POSTS.map((post) => (
+                <Post {...post} key={post.title} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog26 };
diff --git a/blocks/blog27.tsx b/blocks/blog27.tsx
new file mode 100644
index 0000000..f39f0f8
--- /dev/null
+++ b/blocks/blog27.tsx
@@ -0,0 +1,595 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRight, Slash } from "lucide-react";
+import { Fragment, useCallback, useMemo, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Field } from "@/components/ui/field";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface BreadcrumbItem {
+  label: string;
+  link: string;
+}
+
+interface Post {
+  categoryKey: string;
+  category: string;
+  title: string;
+  summary: string;
+  link: string;
+  cta: string;
+  thumbnail: string;
+}
+
+interface Category {
+  label: string;
+  value: string;
+}
+
+interface FilterFormProps {
+  categories: Array<Category>;
+  onCategoryChange: (selectedCategories: string[]) => void;
+}
+
+interface BlogsResultProps {
+  posts: Array<Post>;
+  categories: Array<Category>;
+}
+
+interface BreadcrumbBlogProps {
+  breadcrumb: Array<BreadcrumbItem>;
+}
+
+const POSTS_PER_PAGE = 6;
+
+const BREADCRUMB: Array<BreadcrumbItem> = [
+  {
+    label: "منابع",
+    link: "#",
+  },
+  {
+    label: "وبلاگ",
+    link: "#",
+  },
+];
+
+const CATEGORIES: Array<Category> = [
+  {
+    label: "همه",
+    value: "all",
+  },
+  {
+    label: "بهره‌وری",
+    value: "productivity",
+  },
+  {
+    label: "دسترس‌پذیری",
+    value: "accessibility",
+  },
+  {
+    label: "کارایی",
+    value: "performance",
+  },
+];
+
+const PRIMARY_POST: Post = {
+  categoryKey: "all",
+  category: "ویژه نوآوری",
+  title: "چگونه هوش مصنوعی توسعه فرانت‌اند را متحول می‌کند",
+  summary:
+    "ببینید ابزارهایی مانند GitHub Copilot و دستیارهای هوش مصنوعی چگونه فرایند طراحی رابط کاربری و توسعه نرم‌افزار را متحول می‌کنند.",
+  link: "#",
+  cta: "بیشتر بدانید",
+  thumbnail:
+    "/block-media/shadcnblocks/block/placeholder-1.svg",
+};
+
+const POSTS: Array<Post> = [
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "۵ افزونه ویرایشگر کد که ساعت‌ها وقت شما را ذخیره می‌کند",
+    summary:
+      "افزونه‌های ضروری برای افزایش بهره‌وری کدنویسی و ساده‌تر کردن گردش کار.",
+    link: "#",
+    cta: "ویرایشگر را تقویت کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "مدیریت زمان برای توسعه‌دهندگان: چه چیزی واقعاً جواب می‌دهد",
+    summary:
+      "استراتژی‌های اثبات‌شده برای جلوگیری از فرسودگی و مدیریت وظایف بدون استرس.",
+    link: "#",
+    cta: "زمان را مدیریت کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "خودکارسازی گردش کار با اجرای خودکار وظایفها",
+    summary:
+      "از Gulp، اسکریپت‌های npm و GitHub Actions برای خودکار کردن کارهای تکراری توسعه استفاده کنید.",
+    link: "#",
+    cta: "همین حالا خودکار کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "روتین‌های روزانه مؤثر برای توسعه‌دهندگان",
+    summary:
+      "روتین‌هایی که توسعه‌دهندگان برتر برای ماندن پرانرژی، خلاق و متمرکز دنبال می‌کنند.",
+    link: "#",
+    cta: "جریان کاری خود را بیابید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "تسلط بر کنترل نسخه با این میانبرها",
+    summary:
+      "با استفاده از Aliasها و ترفندهای Git، مدیریت نسخه و فرایند توسعه را سریع‌تر و ساده‌تر کنید.",
+    link: "#",
+    cta: "Git را سریع‌تر کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "کاهش تعویض زمینه در کار توسعه",
+    summary:
+      "حواس‌پرتی را کم کنید و با تمرکز عمیق روی کد پیش بروید.",
+    link: "#",
+    cta: "متمرکز بمانید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "راه‌اندازی دورکاری: ابزارهای محیط بدون حواس‌پرتی",
+    summary:
+      "فضا و استک نرم‌افزاری را برای حداکثر بهره‌وری در کار از خانه تنظیم کنید.",
+    link: "#",
+    cta: "محیط کار را ارتقا دهید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "پومودورو برای برنامه‌نویسان: واقعاً مؤثر است؟",
+    summary:
+      "بررسی عملی تکنیک پومودورو و اثربخشی آن در توسعه نرم‌افزار.",
+    link: "#",
+    cta: "روش را امتحان کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "چرا دسترس‌پذیری باید بخشی از نسخه اولیه محصول شما باشد",
+    summary:
+      "فراگیر کردن محصول از روز اول، قابلیت استفاده و دسترسی را بهبود می‌دهد.",
+    link: "#",
+    cta: "دلیلش را بدانید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "استفاده درست از نقش‌های برچسب دسترس‌پذیری در وب‌اپ",
+    summary:
+      "یاد بگیرید چگونه با نقش‌ها و Landmarkهای ARIA، دسترسی‌پذیری برای صفحه‌خوان‌ها را بهبود دهید.",
+    link: "#",
+    cta: "معناشناسی را بهبود دهید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "نکات کنتراست رنگ برای خوانایی بهتر",
+    summary:
+      "ترکیب‌های رنگی دسترس‌پذیر مطابق استاندارد WCAG را بیاموزید.",
+    link: "#",
+    cta: "رنگ‌ها را اصلاح کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "ناوبری با کیبورد: تجربه‌ای که نادیده گرفته می‌شود",
+    summary:
+      "وب‌سایت را کاملاً با کیبورد قابل استفاده کنید  برای دسترس‌پذیری و سرعت.",
+    link: "#",
+    cta: "ناوبری را تست کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "فرم‌های دسترس‌پذیر: برچسب، خطا و بازخورد",
+    summary:
+      "با دستورالعمل‌های واضح، فرم‌هایی طراحی کنید که هم برای کاربران و هم برای صفحه‌خوان‌ها قابل درک باشند.",
+    link: "#",
+    cta: "فرم‌ها را اصلاح کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "تست با صفحه‌خوان: راهنمای مبتدی",
+    summary:
+      "یاد بگیرید چگونه وب‌سایت خود را با صفحه‌خوان‌های رایج آزمایش و مشکلات دسترس‌پذیری را شناسایی کنید.",
+    link: "#",
+    cta: "تست را شروع کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "تفکر طراحی فراگیر در توسعه رابط کاربری",
+    summary:
+      "رابط‌هایی طراحی کنید که از ابتدا همه توانایی‌ها را در نظر بگیرند.",
+    link: "#",
+    cta: "برای همه طراحی کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "ممیزی دسترس‌پذیری: ابزارها و چک‌لیست‌ها",
+    summary:
+      "ممیزی کامل با Axe، Lighthouse و چک‌لیست‌های دستی انجام دهید.",
+    link: "#",
+    cta: "ممیزی کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "بارگذاری تنبل تصاویر با استاندارد وب مدرن",
+    summary:
+      "زمان بارگذاری را با lazy-loading بومی و استراتژی‌های جایگزین بهبود دهید.",
+    link: "#",
+    cta: "تصاویر را بهینه کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "فشرده‌سازی برنامه‌نویسی وب بدون ایجاد اختلال در برنامه",
+    summary:
+      "بهترین روش‌های minify و tree-shaking برای bundleهای سریع‌تر.",
+    link: "#",
+    cta: "کد را کوچک کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "شاخص‌های عملکرد وب توضیح داده شد: جابجایی چیدمان، زمان بارگذاری اصلی، تأخیر اولین تعامل",
+    summary:
+      "اندازه‌گیری و بهبود Core Web Vitals برای تجربه کاربری بهتر.",
+    link: "#",
+    cta: "شاخص‌ها را بهبود دهید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "رندر سمت سرور در برابر کلاینت: کدام سریع‌تر است؟",
+    summary:
+      "SSR و CSR را مقایسه کنید و بدانید هر کدام چه زمانی برای کارایی بهتر مناسب‌اند.",
+    link: "#",
+    cta: "گزینه‌ها را بررسی کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "بهینه‌سازی فونت برای بارگذاری سریع‌تر",
+    summary:
+      "فونت‌ها را بدون مسدود کردن رندر یا ایجاد جابه‌جایی چیدمان بارگذاری کنید.",
+    link: "#",
+    cta: "فونت‌ها را سریع کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "کاهش حجم بسته با تقسیم هوشمند بار",
+    summary:
+      "با import پویا و chunking مبتنی بر مسیر، زمان بار اولیه را کم کنید.",
+    link: "#",
+    cta: "تقسیم‌بندی کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "استراتژی‌های کش برای وب‌اپ‌های مدرن",
+    summary:
+      "از کش HTTP، service worker و CDN برای سرعت و پشتیبانی آفلاین بهره ببرید.",
+    link: "#",
+    cta: "هوشمندانه کش کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "تحلیل گلوگاه‌های کارایی با ابزار تحلیل مرورگر",
+    summary:
+      "با تب Performance در DevTools مشکلات زمان اجرا را پیدا و رفع کنید.",
+    link: "#",
+    cta: "همین حالا تحلیل کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+];
+
+const FilterFormSchema = z.object({
+  items: z.array(z.string()).refine((value) => value.length > 0, {
+    message: "حداقل یک دسته باید انتخاب شود.",
+  }),
+});
+
+const FilterForm = ({ categories, onCategoryChange }: FilterFormProps) => {
+  const form = useForm<z.infer<typeof FilterFormSchema>>({
+    resolver: zodResolver(FilterFormSchema),
+    defaultValues: {
+      items: [CATEGORIES[0].value],
+    },
+  });
+
+  const handleCheckboxChange = useCallback(
+    (
+      checked: boolean | string,
+      categoryValue: string,
+      field: ControllerRenderProps<z.infer<typeof FilterFormSchema>, "items">,
+    ) => {
+      let updatedValues = checked
+        ? [...field.value, categoryValue]
+        : field.value.filter((value: string) => value !== categoryValue);
+
+      if (updatedValues.length === 0) {
+        form.setValue("items", ["all"]);
+        onCategoryChange(["all"]);
+        return;
+      }
+
+      if (updatedValues.includes("all")) {
+        updatedValues = updatedValues.filter((v: string) => v !== "all");
+      }
+
+      if (JSON.stringify(field.value) !== JSON.stringify(updatedValues)) {
+        form.setValue("items", updatedValues);
+        onCategoryChange(updatedValues);
+      }
+    },
+    [form, onCategoryChange],
+  );
+
+  return (
+    <form>
+      <Controller
+        control={form.control}
+        name="items"
+        render={({ field }) => (
+          <Field className="flex w-full flex-wrap items-center gap-2.5">
+            {categories.map((category) => {
+              const isChecked = field.value?.includes(category.value);
+              return (
+                <Field
+                  key={category.value}
+                  className="flex flex-row items-start gap-3 space-y-0"
+                >
+                  <Label className="flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5">
+                    <div>{category.label}</div>
+                    <Checkbox
+                      checked={isChecked}
+                      onCheckedChange={(checked) =>
+                        handleCheckboxChange(checked, category.value, field)
+                      }
+                    />
+                  </Label>
+                </Field>
+              );
+            })}
+          </Field>
+        )}
+      />
+    </form>
+  );
+};
+
+const BlogsResult = ({ posts, categories }: BlogsResultProps) => {
+  const [visibleCount, setVisibleCount] = useState(POSTS_PER_PAGE);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([
+    CATEGORIES[0].value,
+  ]);
+  const handleCategoryChange = useCallback((selected: string[]) => {
+    setSelectedCategories(selected);
+    setVisibleCount(POSTS_PER_PAGE);
+  }, []);
+
+  const handleLoadMore = useCallback(() => {
+    setVisibleCount((prev) => prev + POSTS_PER_PAGE);
+  }, []);
+  const filteredPosts = useMemo(() => {
+    return posts.filter(
+      (post) =>
+        selectedCategories.includes(post.categoryKey) ||
+        selectedCategories.includes("all"),
+    );
+  }, [posts, selectedCategories]);
+
+  const postsToDisplay = filteredPosts.length > 0 ? filteredPosts : posts;
+
+  const hasMore = visibleCount < postsToDisplay.length;
+
+  return (
+    <div>
+      <FilterForm
+        categories={categories}
+        onCategoryChange={handleCategoryChange}
+      />
+      <div className="flex w-full flex-col gap-4 py-8 lg:gap-8">
+        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
+          {postsToDisplay.slice(0, visibleCount).map((post) => (
+            <BlogCard key={post.title} {...post} />
+          ))}
+        </div>
+        <div className="flex justify-center">
+          {hasMore && (
+            <Button variant="secondary" onClick={handleLoadMore}>
+              بارگذاری بیشتر
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const BreadcrumbBlog = ({ breadcrumb }: BreadcrumbBlogProps) => {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {breadcrumb.map((item, i) => {
+          return (
+            <Fragment key={`${item.label}`}>
+              <BreadcrumbItem>
+                <BreadcrumbLink href={item.link}>{item.label}</BreadcrumbLink>
+              </BreadcrumbItem>
+              {i < breadcrumb.length - 1 ? (
+                <BreadcrumbSeparator>
+                  <Slash />
+                </BreadcrumbSeparator>
+              ) : null}
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+const BlogCard = ({ category, title, thumbnail, summary, link, cta }: Post) => {
+  return (
+    <a href={link} className="block h-full w-full">
+      <Card className="size-full rounded-lg border py-0">
+        <CardContent className="p-0">
+          <div className="border-b p-2.5 text-start text-sm leading-[1.2] font-medium text-muted-foreground">
+            {category}
+          </div>
+          <AspectRatio ratio={1.520833333} className="overflow-hidden">
+            <img
+              src={thumbnail}
+              alt={title}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+          <div className="flex w-full flex-col gap-5 p-5 text-start">
+            <h2 className="text-lg leading-tight font-medium md:text-xl">
+              {title}
+            </h2>
+            <div className="w-full max-w-[20rem]">
+              <p className="text-sm leading-[1.4] font-medium text-muted-foreground">
+                {summary}
+              </p>
+            </div>
+            <div>
+              <Button size="sm" variant="outline">
+                {cta}
+                <ArrowRight className="rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+interface Blog27Props {
+  className?: string;
+}
+
+const Blog27 = ({ className }: Blog27Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
+      <div className="bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat">
+        <div className="container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex w-full flex-col justify-between gap-12">
+            <div className="flex w-full max-w-[36rem] flex-col gap-8 text-start">
+              <BreadcrumbBlog breadcrumb={BREADCRUMB} />
+              <div className="flex w-full flex-col gap-5">
+                <h1 className="text-[2.5rem] leading-[1.2] font-semibold md:text-2xll lg:text-2xll">
+                  بهترین مقالات وبلاگ
+                </h1>
+                <p className="text-xl leading-[1.4] text-muted-foreground">
+                  یک وبلاگ موفق با محتوای ارزشمند، کاربردی و قابل اعتماد، مخاطب را جذب کرده و او را به مطالعه بیشتر ترغیب می‌کند.
+                                                  </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="w-full max-w-[27.5rem]">
+            <BlogCard {...PRIMARY_POST} />
+          </div>
+        </div>
+      </div>
+      <div className="py-20">
+        <div className="container flex flex-col gap-8 text-start">
+          <h2 className="text-[1.75rem] leading-none font-medium md:text-[2.25rem] lg:text-[2rem]">
+            همه مطالب
+          </h2>
+          <div>
+            <BlogsResult posts={POSTS} categories={CATEGORIES} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog27 };
diff --git a/blocks/blog28.tsx b/blocks/blog28.tsx
new file mode 100644
index 0000000..be19f94
--- /dev/null
+++ b/blocks/blog28.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface Post {
+  date: string;
+  author: string;
+  title: string;
+  image: string;
+  link: string;
+  description: string;
+}
+
+const posts: Post[] = [
+  {
+    date: "۲۶ خرداد ۱۴۰۳",
+    author: "علی احمدی",
+    title: "آینده هوش مصنوعی: چگونه یادگیری ماشین صنایع را متحول می‌کند",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    link: "#",
+    description:
+      "ببینید هوش مصنوعی و یادگیری ماشین چگونه از بهداشت تا تولید را دگرگون می‌کنند و با جدیدترین نوآوری‌هایی که آینده ما را شکل می‌دهند آشنا شوید.",
+  },
+  {
+    date: "۲۳ خرداد ۱۴۰۳",
+    author: "مایا پاتیل",
+    title: "اصول طراحی مینیمال: کمتر، بیشتر در تجربه و رابط کاربری مدرن",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    link: "#",
+    description:
+      "اصول طراحی مینیمال را بشناسید و ببینید چگونه رابط‌هایی شهودی‌تر و کاربرپسندتر می‌سازند.",
+  },
+  {
+    date: "۲۱ خرداد ۱۴۰۳",
+    author: "داوود چین",
+    title: "انقلاب دورکاری: چگونه شرکت‌ها با وضعیت جدید سازگار می‌شوند",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    link: "#",
+    description:
+      "مزایا و چالش‌های دورکاری و روش‌های سازگاری شرکت‌ها با این الگوی جدید کار را بررسی کنید.",
+  },
+  {
+    date: "۱۹ خرداد ۱۴۰۳",
+    author: "سارا ویلیامز",
+    title: "ساخت اپلیکیشن‌های مقیاس‌پذیر با معماری میکروسرویس",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    link: "#",
+    description:
+      "بیاموزید معماری میکروسرویس چگونه به ساخت اپلیکیشن‌های مقیاس‌پذیر و قابل نگهداری کمک می‌کند.",
+  },
+  {
+    date: "۱۶ خرداد ۱۴۰۳",
+    author: "محمد رودریگز",
+    title: "استراتژی‌های بازاریابی محتوا برای ترافیک ارگانیک در ۱۴۰۳",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    link: "#",
+    description:
+      "استراتژی‌های مؤثر بازاریابی محتوا را کشف کنید تا ترافیک ارگانیک بگیرید و مخاطبان خود را در ۱۴۰۳ رشد دهید.",
+  },
+];
+
+interface Blog28Props {
+  className?: string;
+}
+
+const Blog28 = ({ className }: Blog28Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="mb-12 text-center text-xl font-medium md:text-2xll">
+          جدیدترین وبلاگ فناوری
+        </h1>
+
+        <div className="xs:grid-cols-1 mt-24 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="relative md:row-span-2 lg:col-span-2">
+            <a
+              href={posts[0].link}
+              className="block h-fit rounded-lg p-3 text-start md:top-0"
+            >
+              <img
+                src={posts[0].image}
+                alt={posts[0].title}
+                className="h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96"
+              />
+              <div className="mt-5">
+                <div className="mb-2.5 flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
+                  <time>{posts[0].date}</time>
+                  <span aria-hidden="true">·</span>
+                  <span>{posts[0].author}</span>
+                </div>
+                <h2 className="text-lg md:text-3xl lg:text-xl">
+                  {posts[0].title}
+                </h2>
+                <p className="mt-4 text-muted-foreground">
+                  {posts[0].description}
+                </p>
+              </div>
+            </a>
+          </div>
+          {posts.slice(1).map((post) => (
+            <a
+              key={post.title}
+              href={post.link}
+              className="rounded-lg p-3 text-start"
+            >
+              <img
+                src={post.image}
+                alt={post.title}
+                className="h-48 w-full rounded-lg object-cover hover:opacity-80"
+              />
+              <div className="mt-5">
+                <div className="mb-2.5 flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
+                  <time>{post.date}</time>
+                  <span aria-hidden="true">·</span>
+                  <span>{post.author}</span>
+                </div>
+                <h3 className="text-lg">{post.title}</h3>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog28 };
diff --git a/blocks/blog29.tsx b/blocks/blog29.tsx
new file mode 100644
index 0000000..4836a4b
--- /dev/null
+++ b/blocks/blog29.tsx
@@ -0,0 +1,126 @@
+import { ArrowUpRightIcon } from "lucide-react";
+import React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Blog29Props {
+  className?: string;
+}
+
+const Blog29 = ({ className }: Blog29Props) => {
+  const blogPosts = [
+    {
+      href: "#",
+      date: "۲۵ اسفند ۱۴۲",
+      title: "ساخت سیستم طراحی با ری یو آی",
+      content:
+        "بیاموزید چگونه با کامپوننت‌های ری یو آی یک سیستم طراحی مقیاس‌پذیر بسازید. ترکیب کامپوننت‌ها، تم‌سازی و بهترین روش‌های حفظ یکنواختی در اپلیکیشن را بررسی می‌کنیم. قدرت primitiveهای کتابخانه پایه را با کدبیسی تمیز و قابل نگهداری به کار بگیرید.",
+      tags: [
+        "سیستم طراحی",
+        "Shadcn UI",
+        "React",
+        "Tailwind CSS",
+        "توسعه رابط کاربری",
+      ],
+    },
+    {
+      href: "#",
+      date: "۲۰ اسفند ۱۴۲",
+      title: "ظهور کامپوننت‌های Headless رابط کاربری",
+      content:
+        "مزایای کامپوننت‌های headless و تأثیر آن‌ها بر توسعه وب را بررسی کنید. کتابخانه‌های محبوب را مقایسه می‌کنیم، ملاحظات دسترس‌پذیری را مطرح می‌کنیم و نحوه ساخت کامپوننت‌های انعطاف‌پذیر و بدون استایل پیش‌فرض را نشان می‌دهیم.",
+      tags: [
+        "Headless UI",
+        "دسترس‌پذیری",
+        "معماری کامپوننت",
+        "React",
+        "توسعه وب",
+      ],
+    },
+    {
+      href: "#",
+      date: "۱۵ اسفند ۱۴۲",
+      title: "بهینه‌سازی کتابخانه کامپوننت برای کارایی",
+      content:
+        "تکنیک‌های ساخت کتابخانه کامپوننت پرکارایی و مقیاس‌پذیر را کشف کنید. از تقسیم هوشمند بار و tree shaking تا کاهش حجم بسته و بارگذاری هوشمند  بدون قربانی کردن قابلیت‌ها، تجربه‌ای روان ارائه دهید.",
+      tags: [
+        "کارایی",
+        "حجم بسته",
+        "Code Splitting",
+        "React",
+        "کارایی وب",
+      ],
+    },
+  ];
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-16", className)}
+    >
+      <div className="container">
+        <h1 className="mb-10 px-6 text-start text-xl font-bold tracking-tighter text-foreground sm:text-2xll">
+          وبلاگ
+        </h1>
+
+        <section className="mt-10 space-y-6 md:mt-18">
+          {blogPosts.map((post, index) => (
+            <React.Fragment key={post.title}>
+              <Card className="border-none shadow-none">
+                <CardContent>
+                  <div className="relative w-full text-start">
+                    <p className="text-sm tracking-tight text-muted-foreground">
+                      {post.date}
+                    </p>
+
+                    <h2 className="mt-2 text-lg font-medium tracking-tight text-foreground md:text-xl">
+                      {post.title}
+                    </h2>
+
+                    <p className="md:text-md mt-4 text-sm text-muted-foreground md:pe-24 xl:pe-32">
+                      {post.content}
+                    </p>
+
+                    <div className="mt-4 flex w-9/10 flex-wrap items-center gap-2">
+                      {post.tags.map((tag) => (
+                        <Badge
+                          key={tag}
+                          variant="secondary"
+                          className="h-6 rounded-md"
+                        >
+                          <span className="text-md font-medium text-muted-foreground">
+                            {tag}
+                          </span>
+                        </Badge>
+                      ))}
+                    </div>
+
+                    <a href={post.href}>
+                      <Button
+                        variant="secondary"
+                        className="absolute -bottom-1 -end-3 flex h-10 w-10 items-center justify-center rounded-full transition-all ease-in-out hover:rotate-45 md:bottom-14"
+                      >
+                        <ArrowUpRightIcon className="rtl:-rotate-90" />
+                      </Button>
+                    </a>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {index < blogPosts.length - 1 && (
+                <Separator className="h-px w-full" />
+              )}
+            </React.Fragment>
+          ))}
+        </section>
+      </div>
+    </section>
+  );
+};
+
+export { Blog29 };
diff --git a/blocks/blog30.tsx b/blocks/blog30.tsx
new file mode 100644
index 0000000..33c32ae
--- /dev/null
+++ b/blocks/blog30.tsx
@@ -0,0 +1,114 @@
+import { ArrowRightIcon } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const blogPosts = [
+  {
+    id: 1,
+    title: "آینده توسعه وب",
+    date: "۱۳ آذر ۱۴۰۳",
+    description:
+      "آخرین روندهای فناوری فرانت‌اند و بک‌اند را بررسی می‌کنیم؛ از ابزارهای کدنویسی مبتنی بر هوش مصنوعی تا فریم‌ورک‌های مدرن.",
+    image:
+      "/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg",
+    imageAlt: "توسعه‌دهنده در حال کدنویسی",
+    href: "#",
+  },
+  {
+    id: 2,
+    title: "تسلط بر بهینه‌سازی کارایی رابط کاربری",
+    date: "۱۵ آذر ۱۴۰۳",
+    description:
+      "نگاهی عمیق به memoization، بارگذاری هوشمند و مدیریت state کارآمد برای اپلیکیشن‌های رابط کاربری سریع‌تر.",
+    image:
+      "/block-media/shadcnblocks/block/photos/jason-goodman-ZJlfUi5rTDU-unsplash.jpg",
+    imageAlt: "کد روی صفحه نمایش",
+    href: "#",
+  },
+  {
+    id: 3,
+    title: "اصول طراحی رابط کاربری/تجربه کاربری برای ۱۴۰۴",
+    date: "۲۰ آذر ۱۴۰۳",
+    description:
+      "استراتژی‌های کلیدی برای ساخت رابط‌هایی شهودی و زیبا که کاربر را جذب می‌کنند و تعامل را در سال پیش رو افزایش می‌دهند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg",
+    imageAlt: "طرح‌های رابط کاربری/تجربه کاربری روی کاغذ",
+    href: "#",
+  },
+];
+
+interface Blog30Props {
+  className?: string;
+}
+
+const Blog30 = ({ className }: Blog30Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <h1 className="mb-12 max-w-lg text-start font-sans text-2xll font-extrabold tracking-tight text-foreground md:text-2xll">
+          محتوای تازه ما را کشف کنید
+        </h1>
+
+        <div className="flex flex-col">
+          {blogPosts.map((post, index) => (
+            <div
+              key={post.id}
+              className="flex flex-col items-center gap-16 md:flex-row"
+            >
+              <div className="flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140">
+                <img
+                  src={post.image}
+                  className="h-full w-full object-cover"
+                  alt={post.imageAlt}
+                />
+              </div>
+              <Card className="border-none shadow-none">
+                <CardContent className="p-0">
+                  <div
+                    className={cn(
+                      "mb-5 flex h-90 items-start border-b py-10 md:mb-0 lg:gap-32",
+                      index == 0 && "md:border-t",
+                    )}
+                  >
+                    <div className="flex h-full w-full flex-col items-start justify-between pe-8 text-start">
+                      <h2 className="text-xl font-bold tracking-tight text-foreground md:text-3xl">
+                        {post.title}
+                      </h2>
+                      <p className="mt-2 text-sm font-semibold tracking-wide text-muted-foreground">
+                        {post.date}
+                      </p>
+                    </div>
+                    <div className="flex h-full w-full flex-col items-start justify-between gap-6 text-start">
+                      <p className="text-lg leading-relaxed font-normal tracking-tight text-muted-foreground md:text-xl">
+                        {post.description}
+                      </p>
+                      <Button
+                        variant="ghost"
+                        className="inline-flex items-center justify-center gap-4 px-0 text-primary transition-all ease-in-out hover:gap-6 hover:text-accent-foreground"
+                        asChild
+                      >
+                        <a
+                          href={post.href}
+                          className="inline-flex items-center gap-4 text-lg font-semibold tracking-tight"
+                        >
+                          ادامه مطلب
+                                                                    <ArrowRightIcon className="rtl:rotate-180" />
+                        </a>
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog30 };
diff --git a/blocks/blog4.tsx b/blocks/blog4.tsx
new file mode 100644
index 0000000..537eac3
--- /dev/null
+++ b/blocks/blog4.tsx
@@ -0,0 +1,113 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const posts = [
+  {
+    id: "post-1",
+    title: "آینده توسعه وب: گام بعدی چیست؟",
+    summary:
+      "آخرین روندهای توسعه وب را بررسی کنید؛ از ابزارهای مبتنی بر هوش مصنوعی تا فریم‌ورک‌هایی که نحوه ساخت وب را دگرگون می‌کنند. بدانید توسعه‌دهندگان برای جلو ماندن به چه چیزهایی نیاز دارند.",
+    label: "توسعه وب",
+    author: "سارا احمدی",
+    published: "۲۵ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    avatarFallback: "سا",
+  },
+  {
+    id: "post-2",
+    title: "ساخت اتصال‌های مقیاس‌پذیر با الگوهای معماری مدرن",
+    summary:
+      "با میکروسرویس‌ها، GraphQL و معماری‌های رویدادمحور آشنا شوید؛ همان رویکردهایی که موفق‌ترین اپلیکیشن‌های امروز را پشتیبانی می‌کنند. نکات عملی برای ساخت APIهای پایدار.",
+    label: "سمت سرور",
+    author: "محمد رضایی",
+    published: "۲۲ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    avatarFallback: "مر",
+  },
+  {
+    id: "post-3",
+    title: "سیستم‌های طراحی: یکپارچگی در مقیاس بزرگ",
+    summary:
+      "ببینید شرکت‌های پیشرو چگونه سیستم‌های طراحی را پیاده می‌کنند تا یکنواختی بصری در محصولات حفظ شود و در عین حال توسعه و نوآوری سریع‌تر پیش برود.",
+    label: "طراحی",
+    author: "اما حسینی",
+    published: "۲۰ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    avatarFallback: "اح",
+  },
+];
+
+interface Blog4Props {
+  className?: string;
+}
+
+const Blog4 = ({ className }: Blog4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 md:mb-14 lg:mb-16">
+          <div className="flex items-start justify-between gap-8">
+            <div>
+              <h2 className="mb-4 w-full text-start text-xl font-medium md:mb-5 md:text-2xll lg:mb-6 lg:text-2xll">
+                وبلاگ
+              </h2>
+            </div>
+          </div>
+          <p className="text-start text-muted-foreground">
+            آموزش‌ها، تحلیل‌ها و تازه‌ترین مطالب درباره توسعه نرم‌افزار مدرن
+                                </p>
+        </div>
+        <div className="grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3">
+          {posts.map((post) => (
+            <a key={post.id} href={post.href} className="group flex flex-col">
+              <div className="mb-4 flex overflow-clip rounded-xl md:mb-5">
+                <div className="transition-opacity duration-300 group-hover:opacity-80">
+                  <img
+                    src={post.image}
+                    alt={post.title}
+                    className="aspect-3/2 h-full w-full object-cover object-center"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <Badge variant="secondary">{post.label}</Badge>
+              </div>
+              <div className="mb-2 line-clamp-3 pt-4 text-start text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-3xl">
+                {post.title}
+              </div>
+              <div className="mb-4 line-clamp-2 text-start text-sm text-muted-foreground md:mb-5 md:text-base">
+                {post.summary}
+              </div>
+              <div className="flex items-center gap-2">
+                <Avatar className="size-12">
+                  <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                  <AvatarFallback>{post.avatarFallback}</AvatarFallback>
+                </Avatar>
+                <div className="flex flex-col gap-px text-start">
+                  <span className="text-xs font-medium">{post.author}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {post.published}
+                  </span>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+        <div className="mt-8 flex flex-col items-center py-2 md:hidden">
+          <Button className="w-full sm:w-fit">مشاهده همه مطالب</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog4 };
diff --git a/blocks/blog5.tsx b/blocks/blog5.tsx
new file mode 100644
index 0000000..89004be
--- /dev/null
+++ b/blocks/blog5.tsx
@@ -0,0 +1,191 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const posts = [
+  {
+    id: "post-1",
+    title: "آینده توسعه وب: گام بعدی چیست؟",
+    summary:
+      "آخرین روندهای توسعه وب را بررسی کنید؛ از ابزارهای مبتنی بر هوش مصنوعی تا فریم‌ورک‌هایی که نحوه ساخت وب را دگرگون می‌کنند. بدانید توسعه‌دهندگان برای جلو ماندن به چه چیزهایی نیاز دارند.",
+    label: "توسعه وب",
+    author: "سارا احمدی",
+    published: "۲۵ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    avatarFallback: "سا",
+  },
+  {
+    id: "post-2",
+    title: "ساخت اتصال‌های مقیاس‌پذیر با الگوهای معماری مدرن",
+    summary:
+      "با میکروسرویس‌ها، GraphQL و معماری‌های رویدادمحور آشنا شوید؛ همان رویکردهایی که موفق‌ترین اپلیکیشن‌های امروز را پشتیبانی می‌کنند. نکات عملی برای ساخت APIهای پایدار.",
+    label: "سمت سرور",
+    author: "محمد رضایی",
+    published: "۲۲ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    avatarFallback: "مر",
+  },
+  {
+    id: "post-3",
+    title: "سیستم‌های طراحی: یکپارچگی در مقیاس بزرگ",
+    summary:
+      "ببینید شرکت‌های پیشرو چگونه سیستم‌های طراحی را پیاده می‌کنند تا یکنواختی بصری در محصولات حفظ شود و در عین حال توسعه و نوآوری سریع‌تر پیش برود.",
+    label: "طراحی",
+    author: "اما حسینی",
+    published: "۲۰ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    avatarFallback: "اح",
+  },
+  {
+    id: "post-4",
+    title: "یادگیری ماشین در محیط عملیاتی: بهترین روش‌های استقرار",
+    summary:
+      "از نسخه‌بندی مدل تا پایش و مقیاس‌پذیری؛ اصول ضروری استقرار مدل‌های یادگیری ماشین در محیط‌های واقعی را بیاموزید.",
+    label: "یادگیری ماشین",
+    author: "علی کریمی",
+    published: "۱۸ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
+    avatarFallback: "عک",
+  },
+  {
+    id: "post-5",
+    title: "رشد محاسبات لبه: تحول در معماری نرم‌افزار",
+    summary:
+      "ببینید محاسبات لبه چگونه کارایی اپلیکیشن و تجربه کاربری را متحول می‌کند و استراتژی‌های پیاده‌سازی معماری لبه‌محور را بیاموزید.",
+    label: "رایانش ابری",
+    author: "رضا پاک",
+    published: "۱۵ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-5.svg",
+    avatarFallback: "رپ",
+  },
+  {
+    id: "post-6",
+    title: "اصول امنیت سایبری برای اپلیکیشن‌های مدرن",
+    summary:
+      "روش‌های امنیتی ضروری برای هر توسعه‌دهنده؛ از احراز هویت و مجوزدهی تا رمزنگاری داده و اصول کدنویسی امن.",
+    label: "امنیت",
+    author: "لیلا محمدی",
+    published: "۱۳ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-6.svg",
+    avatarFallback: "لم",
+  },
+  {
+    id: "post-7",
+    title: "بهینه‌سازی کارایی: تکنیک‌هایی برای وب‌اپلیکیشن‌های سریع‌تر",
+    summary:
+      "تکنیک‌های پیشرفته بهینه‌سازی کارایی وب؛ از code splitting و lazy loading تا استراتژی‌های مدرن کش.",
+    label: "کارایی",
+    author: "امیر ویلسون",
+    published: "۱۱ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    avatarFallback: "او",
+  },
+  {
+    id: "post-8",
+    title: "فرهنگ DevOps: خطوط تحویل نرم‌افزار قوی‌تر",
+    summary:
+      "چگونه فرهنگ DevOps را در سازمان تقویت کنید و خطوط CI/CD بسازید که توسعه را سرعت می‌دهد و کیفیت را حفظ می‌کند.",
+    label: "DevOps",
+    author: "مریم گارسی",
+    published: "۹ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    avatarFallback: "مگ",
+  },
+  {
+    id: "post-9",
+    title: "توسعه اپ موبایل: بومی یا چندسکویی؟",
+    summary:
+      "رویکردهای توسعه بومی و چندسکویی را مقایسه کنید و مزایا و معایب کارایی، سرعت توسعه و تجربه کاربری را بررسی کنید.",
+    label: "توسعه موبایل",
+    author: "رضا جانسون",
+    published: "۷ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    avatarFallback: "رج",
+  },
+];
+
+interface Blog5Props {
+  className?: string;
+}
+
+const Blog5 = ({ className }: Blog5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 md:mb-14 lg:mb-16">
+          <div className="flex items-start justify-between gap-8">
+            <div>
+              <h2 className="mb-4 w-full text-start text-xl font-medium md:mb-5 md:text-2xll lg:mb-6 lg:text-2xll">
+                وبلاگ
+              </h2>
+            </div>
+          </div>
+          <p className="text-start text-muted-foreground">
+            آموزش‌ها، تحلیل‌ها و تازه‌ترین مطالب درباره توسعه نرم‌افزار مدرن
+                                </p>
+        </div>
+        <div className="grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3">
+          {posts.map((post) => (
+            <a key={post.id} href={post.href} className="group flex flex-col">
+              <div className="mb-4 flex overflow-clip rounded-xl md:mb-5">
+                <div className="transition-opacity duration-300 group-hover:opacity-80">
+                  <img
+                    src={post.image}
+                    alt={post.title}
+                    className="aspect-3/2 h-full w-full object-cover object-center"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <Badge variant="secondary">{post.label}</Badge>
+              </div>
+              <div className="mb-2 line-clamp-3 pt-4 text-start text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-3xl">
+                {post.title}
+              </div>
+              <div className="mb-4 line-clamp-2 text-start text-sm text-muted-foreground md:mb-5 md:text-base">
+                {post.summary}
+              </div>
+              <div className="flex items-center gap-2">
+                <Avatar className="size-12">
+                  <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                  <AvatarFallback>{post.avatarFallback}</AvatarFallback>
+                </Avatar>
+                <div className="flex flex-col gap-px text-start">
+                  <span className="text-xs font-medium">{post.author}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {post.published}
+                  </span>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+        <div className="mt-8 flex flex-col items-center py-2 md:hidden">
+          <Button className="w-full sm:w-fit">مشاهده همه مطالب</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog5 };
diff --git a/blocks/blog6.tsx b/blocks/blog6.tsx
new file mode 100644
index 0000000..6e306a7
--- /dev/null
+++ b/blocks/blog6.tsx
@@ -0,0 +1,170 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const posts = [
+  {
+    id: "post-1",
+    title: "آینده توسعه وب: گام بعدی چیست؟",
+    summary:
+      "آخرین روندهای توسعه وب را بررسی کنید؛ از ابزارهای مبتنی بر هوش مصنوعی تا فریم‌ورک‌هایی که نحوه ساخت وب را دگرگون می‌کنند. بدانید توسعه‌دهندگان برای جلو ماندن به چه چیزهایی نیاز دارند.",
+    label: "توسعه وب",
+    author: "سارا احمدی",
+    published: "۲۵ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "post-2",
+    title: "ساخت اتصال‌های مقیاس‌پذیر با الگوهای معماری مدرن",
+    summary:
+      "با میکروسرویس‌ها، GraphQL و معماری‌های رویدادمحور آشنا شوید؛ همان رویکردهایی که موفق‌ترین اپلیکیشن‌های امروز را پشتیبانی می‌کنند. نکات عملی برای ساخت APIهای پایدار.",
+    label: "سمت سرور",
+    author: "محمد رضایی",
+    published: "۲۲ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+  },
+  {
+    id: "post-3",
+    title: "سیستم‌های طراحی: یکپارچگی در مقیاس بزرگ",
+    summary:
+      "ببینید شرکت‌های پیشرو چگونه سیستم‌های طراحی را پیاده می‌کنند تا یکنواختی بصری در محصولات حفظ شود و در عین حال توسعه و نوآوری سریع‌تر پیش برود.",
+    label: "طراحی",
+    author: "اما حسینی",
+    published: "۲۰ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+  },
+  {
+    id: "post-4",
+    title: "یادگیری ماشین در محیط عملیاتی: بهترین روش‌های استقرار",
+    summary:
+      "از نسخه‌بندی مدل تا پایش و مقیاس‌پذیری؛ اصول ضروری استقرار مدل‌های یادگیری ماشین در محیط‌های واقعی را بیاموزید.",
+    label: "یادگیری ماشین",
+    author: "علی کریمی",
+    published: "۱۸ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
+  },
+  {
+    id: "post-5",
+    title: "رشد محاسبات لبه: تحول در معماری نرم‌افزار",
+    summary:
+      "ببینید محاسبات لبه چگونه کارایی اپلیکیشن و تجربه کاربری را متحول می‌کند و استراتژی‌های پیاده‌سازی معماری لبه‌محور را بیاموزید.",
+    label: "رایانش ابری",
+    author: "رضا پاک",
+    published: "۱۵ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-5.svg",
+  },
+  {
+    id: "post-6",
+    title: "اصول امنیت سایبری برای اپلیکیشن‌های مدرن",
+    summary:
+      "روش‌های امنیتی ضروری برای هر توسعه‌دهنده؛ از احراز هویت و مجوزدهی تا رمزنگاری داده و اصول کدنویسی امن.",
+    label: "امنیت",
+    author: "لیلا محمدی",
+    published: "۱۳ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-6.svg",
+  },
+  {
+    id: "post-7",
+    title: "بهینه‌سازی کارایی: تکنیک‌هایی برای وب‌اپلیکیشن‌های سریع‌تر",
+    summary:
+      "تکنیک‌های پیشرفته بهینه‌سازی کارایی وب؛ از code splitting و lazy loading تا استراتژی‌های مدرن کش.",
+    label: "کارایی",
+    author: "امیر ویلسون",
+    published: "۱۱ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "post-8",
+    title: "فرهنگ DevOps: خطوط تحویل نرم‌افزار قوی‌تر",
+    summary:
+      "چگونه فرهنگ DevOps را در سازمان تقویت کنید و خطوط CI/CD بسازید که توسعه را سرعت می‌دهد و کیفیت را حفظ می‌کند.",
+    label: "DevOps",
+    author: "مریم گارسی",
+    published: "۹ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+  },
+  {
+    id: "post-9",
+    title: "توسعه اپ موبایل: بومی یا چندسکویی؟",
+    summary:
+      "رویکردهای توسعه بومی و چندسکویی را مقایسه کنید و مزایا و معایب کارایی، سرعت توسعه و تجربه کاربری را بررسی کنید.",
+    label: "توسعه موبایل",
+    author: "رضا جانسون",
+    published: "۷ دی ۱۴۲",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+  },
+];
+
+interface Blog6Props {
+  className?: string;
+}
+
+const Blog6 = ({ className }: Blog6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 md:mb-14 lg:mb-16">
+          <div className="flex items-start justify-between gap-8">
+            <div>
+              <h1 className="mb-4 w-full text-start text-xl font-medium md:mb-5 md:text-2xll lg:mb-6 lg:text-2xll">
+                وبلاگ
+              </h1>
+            </div>
+          </div>
+          <p className="text-start text-muted-foreground">
+            آموزش‌ها، تحلیل‌ها و تازه‌ترین مطالب درباره توسعه نرم‌افزار مدرن
+                                </p>
+        </div>
+        <div className="grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3">
+          {posts.map((post) => (
+            <a key={post.id} href={post.href} className="group flex flex-col">
+              <div className="mb-4 flex overflow-clip rounded-xl md:mb-5">
+                <div className="transition-opacity duration-300 group-hover:opacity-80">
+                  <img
+                    src={post.image}
+                    alt={post.title}
+                    className="aspect-3/2 h-full w-full object-cover object-center"
+                  />
+                </div>
+              </div>
+
+              <div className="mb-4 flex items-center gap-2 text-start text-xs text-muted-foreground">
+                <span className="font-medium">{post.author}</span>
+                <span aria-hidden="true">•</span>
+                <span>{post.published}</span>
+              </div>
+              <h2 className="mb-2 line-clamp-3 text-start text-lg font-medium break-words md:mb-3 md:text-xl">
+                {post.title}
+              </h2>
+              <div className="line-clamp-2 text-start text-sm text-muted-foreground md:text-base">
+                {post.summary}
+              </div>
+            </a>
+          ))}
+        </div>
+        <div className="mt-8 flex flex-col items-center py-2 md:hidden">
+          <Button className="w-full sm:w-fit">مشاهده همه مطالب</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog6 };
diff --git a/blocks/blog7.tsx b/blocks/blog7.tsx
new file mode 100644
index 0000000..96a4035
--- /dev/null
+++ b/blocks/blog7.tsx
@@ -0,0 +1,147 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Post {
+  id: string;
+  title: string;
+  summary: string;
+  label: string;
+  author: string;
+  published: string;
+  url: string;
+  image: string;
+}
+
+interface Blog7Props {
+  tagline: string;
+  heading: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+  posts: Post[];
+  className?: string;
+}
+
+const Blog7 = ({
+  tagline = "آخرین به‌روزرسانی‌ها",
+  heading = "وبلاگ",
+  description = "جدیدترین روندها، نکات و بهترین روش‌ها در توسعه وب مدرن را کشف کنید. از کامپوننت‌های رابط کاربری تا سیستم‌های طراحی، با بینش‌های کارشناسان ما به‌روز بمانید.",
+  posts = [
+    {
+      id: "post-1",
+      title: "شروع کار با کامپوننت‌های ری یو آی",
+      summary:
+        "یاد بگیرید چطور کامپوننت‌های shadcn/ui را سریع در پروژه‌های Next.js یکپارچه و سفارشی کنید. نصب، تم‌سازی و بهترین روش‌ها برای ساخت رابط‌های مدرن را پوشش می‌دهیم.",
+      label: "آموزش",
+      author: "سارا احمدی",
+      published: "۱۱ دی ۱۴۲",
+      url: "https://www.ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+    {
+      id: "post-2",
+      title: "ساخت وب‌اپلیکیشن‌های دسترس‌پذیر",
+      summary:
+        "با کامپوننت‌های دسترس‌پذیر shadcn/ui تجربه‌های وب فراگیر بسازید. نکات عملی برای برچسب‌های ARIA، ناوبری با کیبورد و HTML معنایی را بیاموزید.",
+      label: "دسترس‌پذیری",
+      author: "محمد رضایی",
+      published: "۱۱ دی ۱۴۲",
+      url: "#",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+    {
+      id: "post-3",
+      title: "سیستم‌های طراحی مدرن با استایل‌دهی مدرن",
+      summary:
+        "ساخت سیستم‌های طراحی مقیاس‌پذیر با Tailwind CSS و shadcn/ui را بررسی کنید. چگونه یکنواختی را حفظ کنید و در عین حال کتابخانه‌ای انعطاف‌پذیر و قابل نگهداری بسازید.",
+      label: "سیستم طراحی",
+      author: "اما حسینی",
+      published: "۱۱ دی ۱۴۲",
+      url: "#",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    },
+  ],
+  className,
+}: Blog7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto flex flex-col items-center gap-8">
+        <div className="text-center">
+          <Badge variant="secondary" className="mb-6">
+            {tagline}
+          </Badge>
+          <h2 className="mb-3 text-2xll tracking-tighter text-pretty md:mb-4 lg:mb-6 lg:max-w-3xl lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
+            {description}
+          </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+          {posts.map((post) => (
+            <Card
+              key={post.id}
+              className="grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0"
+            >
+              <div className="aspect-video w-full">
+                <a
+                  href={post.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-opacity duration-200 fade-in hover:opacity-70"
+                >
+                  <img
+                    src={post.image}
+                    alt={post.title}
+                    className="h-full w-full object-cover object-center"
+                  />
+                </a>
+              </div>
+              <CardHeader className="text-start">
+                <h3 className="text-xl hover:underline md:text-xl">
+                  <a href={post.url} target="_blank" rel="noopener noreferrer">
+                    {post.title}
+                  </a>
+                </h3>
+                <p className="mt-2 text-sm font-semibold text-foreground/80">
+                  {post.author}
+                  <span aria-hidden="true"> · </span>
+                  {post.published}
+                </p>
+              </CardHeader>
+              <CardContent className="text-start">
+                <p className="leading-relaxed text-muted-foreground">
+                  {post.summary}
+                </p>
+              </CardContent>
+              <CardFooter className="text-start">
+                <a
+                  href={post.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center text-muted-foreground hover:underline"
+                >
+                  ادامه مطلب
+                                            <ArrowRight className="ms-1 size-4 rtl:rotate-180" />
+                </a>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog7 };
diff --git a/blocks/blog8.tsx b/blocks/blog8.tsx
new file mode 100644
index 0000000..c172c0f
--- /dev/null
+++ b/blocks/blog8.tsx
@@ -0,0 +1,144 @@
+import { ArrowRight } from "lucide-react";
+
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Post {
+  id: string;
+  title: string;
+  summary: string;
+  label: string;
+  author: string;
+  published: string;
+  url: string;
+  image: string;
+  tags?: string[];
+}
+
+interface Blog8Props {
+  heading?: string;
+  description?: string;
+  posts?: Post[];
+  className?: string;
+}
+
+const Blog8 = ({
+  heading = "مطالب وبلاگ",
+  description = "جدیدترین آموزش‌ها، تحلیل‌ها و نکات کاربردی درباره توسعه وب، طراحی رابط کاربری و معماری مبتنی بر کامپوننت را بخوانید.",
+  posts = [
+    {
+      id: "post-1",
+      title: "ساخت رابط‌های کاربری مدرن با ری یو آی و رابط کاربری",
+      summary:
+        "در این مقاله با روش‌های ساخت رابط‌های کاربری مدرن با shadcn/ui و React آشنا می‌شوید و بهترین شیوه‌های پیاده‌سازی را یاد می‌گیرید.",
+      label: "طراحی وب",
+      author: "سارا احمدی",
+      published: "۲۶ بهمن ۱۴۲",
+      url: "https://ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+      tags: ["طراحی وب", "توسعه رابط"],
+    },
+    {
+      id: "post-2",
+      title: "تسلط بر استایل‌دهی مدرن: از مبانی تا تکنیک‌های پیشرفته",
+      summary:
+        "یاد بگیرید چگونه با Tailwind CSS وب‌سایت‌هایی زیبا، واکنش‌گرا و با کدی تمیز و قابل نگهداری ایجاد کنید.",
+      label: "طراحی وب",
+      author: "مهدی پارک",
+      published: "۳ اسفند ۱۴۲",
+      url: "https://ShadcnBlocks",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+      tags: ["طراحی وب", "CSS"],
+    },
+  ],
+  className,
+}: Blog8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center gap-16">
+        <div className="text-center">
+          <h2 className="mx-auto mb-6 text-3xl font-semibold text-pretty md:text-xl lg:max-w-3xl">
+            {heading}
+          </h2>
+          <p className="mx-auto max-w-2xl text-muted-foreground md:text-lg">
+            {description}
+          </p>
+        </div>
+
+        <div className="grid gap-y-10 sm:grid-cols-12 sm:gap-y-12 md:gap-y-16 lg:gap-y-20">
+          {posts.map((post) => (
+            <Card
+              key={post.id}
+              className="order-last border-0 bg-transparent shadow-none sm:order-first sm:col-span-12 lg:col-span-10 lg:col-start-2"
+            >
+              <div className="grid gap-y-6 sm:grid-cols-10 sm:gap-x-5 sm:gap-y-0 md:items-center md:gap-x-8 lg:gap-x-12">
+                <div className="text-start sm:col-span-5">
+                  <div className="mb-4 md:mb-6">
+                    <div className="flex flex-wrap gap-3 text-xs tracking-wider text-muted-foreground md:gap-5 lg:gap-6">
+                      {post.tags?.map((tag) => (
+                        <span key={tag}>{tag}</span>
+                      ))}
+                    </div>
+                  </div>
+                  <h3 className="text-xl font-semibold md:text-xl lg:text-3xl">
+                    <a
+                      href={post.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="hover:underline"
+                    >
+                      {post.title}
+                    </a>
+                  </h3>
+                  <p className="mt-4 text-muted-foreground md:mt-5">
+                    {post.summary}
+                  </p>
+                  <div className="mt-6 flex items-center gap-4 text-sm md:mt-8">
+                    <span className="text-muted-foreground">{post.author}</span>
+                    <span className="text-muted-foreground" aria-hidden="true">
+                      •
+                    </span>
+                    <span className="text-muted-foreground">
+                      {post.published}
+                    </span>
+                  </div>
+                  <div className="mt-6 flex items-center gap-2 md:mt-8">
+                    <a
+                      href={post.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center font-semibold hover:underline md:text-base"
+                    >
+                      <span>ادامه مطلب</span>
+                      <ArrowRight className="ms-2 size-4 transition-transform rtl:rotate-180" />
+                    </a>
+                  </div>
+                </div>
+                <div className="order-first sm:order-last sm:col-span-5">
+                  <a
+                    href={post.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block"
+                  >
+                    <div className="aspect-16/9 overflow-clip rounded-lg border border-border">
+                      <img
+                        src={post.image}
+                        alt={post.title}
+                        className="h-full w-full object-cover transition-opacity duration-200 fade-in hover:opacity-70"
+                      />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blog8 };
diff --git a/blocks/blogpost1.tsx b/blocks/blogpost1.tsx
new file mode 100644
index 0000000..dc84f06
--- /dev/null
+++ b/blocks/blogpost1.tsx
@@ -0,0 +1,161 @@
+import { Lightbulb } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface Blogpost1Props {
+  className?: string;
+  title?: string;
+  author?: {
+    name: string;
+    website: string;
+    websiteName: string;
+    image: string;
+  };
+  image?: string;
+  pubDate?: Date;
+  description?: string;
+}
+
+const formatPersianDate = (date: Date) =>
+  new Intl.DateTimeFormat("fa-IR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+
+const Blogpost1 = ({
+  className,
+  title = "طراحی سریع‌تر وب‌سایت با ری یو آی",
+  author = {
+    name: "علی رضایی",
+    website: "https://www.ShadcnBlocks",
+    websiteName: "ShadcnBlocks",
+    image: "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  image = "/block-media/shadcnblocks/block/placeholder-1.svg",
+  pubDate = new Date(),
+  description =
+    "راهنمای گام‌به‌گام ساخت وبلاگ مدرن و واکنش‌گرا با رابط کاربری و استایل‌دهی مدرن.",
+}: Blogpost1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 text-center">
+          <h1 className="max-w-3xl text-2xll font-semibold text-pretty md:text-2xll">
+            {title}
+          </h1>
+          <h3 className="max-w-3xl text-lg text-muted-foreground md:text-xl">
+            {description}
+          </h3>
+          <div className="flex flex-col items-center gap-1 text-sm md:flex-row md:gap-2 md:text-base">
+            <div className="flex items-center gap-2">
+              <Avatar className="h-8 w-8 border">
+                <AvatarImage src={author.image} />
+                <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>
+              </Avatar>
+              <span className="font-semibold">{author.name}</span>
+            </div>
+            <span className="text-muted-foreground">
+              مالک{" "}
+              <a
+                href={author.website}
+                className="font-semibold text-foreground hover:underline"
+              >
+                {author.websiteName}
+              </a>
+            </span>
+            <span className="text-muted-foreground">
+              منتشر شده در {formatPersianDate(pubDate)}
+            </span>
+          </div>
+          <img
+            src={image}
+            alt="تصویر شاخص مطلب"
+            className="mt-4 mb-8 aspect-video w-full rounded-lg border object-cover"
+          />
+        </div>
+      </div>
+      <div className="container">
+        <div className="mx-auto prose max-w-3xl dark:prose-invert">
+          <h2 className="text-3xl font-extrabold">راهنمای طراحی رابط کاربری مدرن با رابط کاربری</h2>
+          <p className="mt-2 text-lg text-muted-foreground">
+            طراحی رابط کاربری مدرن تنها به ظاهر زیبا محدود نمی‌شود. استفاده از کامپوننت‌های قابل استفاده مجدد و رعایت اصول تجربه کاربری، توسعه محصولات باکیفیت را ساده‌تر می‌کند.
+                                </p>
+
+          <h2>چرا معماری کامپوننت‌محور؟</h2>
+          <p>
+            معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
+                                </p>
+          <Alert>
+            <Lightbulb className="h-4 w-4" />
+            <AlertTitle>نکته مهم</AlertTitle>
+            <AlertDescription>
+              پیش از شروع توسعه، ساختار طراحی، رنگ‌ها و کامپوننت‌های پایه را مشخص کنید تا محصولی یکپارچه داشته باشید.
+                                      </AlertDescription>
+          </Alert>
+          <h2>بهترین روش‌ها</h2>
+          <p>
+            استفاده از سیستم طراحی، نام‌گذاری استاندارد و مستندسازی کامپوننت‌ها کیفیت توسعه را در پروژه‌های بزرگ افزایش می‌دهد.
+                                </p>
+          <div>
+            <table>
+              <thead>
+                <tr>
+                  <th>تعداد لید</th>
+                  <th>نرخ تبدیل</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{(120).toLocaleString("fa-IR")}</td>
+                  <td>{(8).toLocaleString("fa-IR")}٪</td>
+                </tr>
+                <tr className="m-0 border-t p-0 even:bg-muted">
+                  <td>{(340).toLocaleString("fa-IR")}</td>
+                  <td>{(14).toLocaleString("fa-IR")}٪</td>
+                </tr>
+                <tr className="m-0 border-t p-0 even:bg-muted">
+                  <td>{(520).toLocaleString("fa-IR")}</td>
+                  <td>{(22).toLocaleString("fa-IR")}٪</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p>
+            معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
+                                </p>
+
+          <h2>جمع‌بندی</h2>
+
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="داشبورد تحلیل نرخ تبدیل"
+            className="my-8 aspect-video w-full rounded-md object-cover"
+          />
+          <p>
+            برای شروع کافی است{" "}
+            <a href="#">یک ساختار مناسب</a> را برای پروژه خود انتخاب کنید و به‌مرور توسعه دهید.
+                                </p>
+          <blockquote>
+            «رابط کاربری خوب فقط زیبا نیست؛ استفاده از آن باید ساده، سریع و لذت‌بخش باشد.»
+                                </blockquote>
+          <p>
+            برای بهبود نرخ تبدیل، این سه اصل را در اولویت قرار دهید:
+          </p>
+          <ul>
+            <li>طراحی سیستم منسجم</li>
+            <li>کامپوننت‌های قابل استفاده مجدد</li>
+            <li>مستندسازی استاندارد</li>
+          </ul>
+          <p>
+            با رعایت این اصول، توسعه پروژه سریع‌تر، نگهداری آن ساده‌تر و تجربه کاربران نیز بهتر خواهد بود.
+                                </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blogpost1 };
diff --git a/blocks/blogpost2.tsx b/blocks/blogpost2.tsx
new file mode 100644
index 0000000..4ea0483
--- /dev/null
+++ b/blocks/blogpost2.tsx
@@ -0,0 +1,119 @@
+import { ChevronRight } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface Blogpost2Props {
+  className?: string;
+}
+
+const Blogpost2 = ({ className }: Blogpost2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative flex flex-col justify-between gap-10 lg:flex-row">
+          <aside className="top-10 h-fit flex-shrink-0 text-start lg:sticky lg:w-[300px] xl:w-[400px]">
+            <a
+              className="mb-5 flex items-center gap-1 text-muted-foreground hover:text-primary"
+              href="#"
+            >
+              <ChevronRight className="h-full w-4 rtl:rotate-180" />
+              بازگشت به خانه
+            </a>
+            <h1 className="mb-5 text-3xl font-bold text-balance lg:text-xl">
+              ۱۰ اصل برای ساخت سیستم طراحی در پروژه‌های بزرگ
+                                      </h1>
+            <div className="flex gap-3">
+              <Avatar className="size-7 rounded-full">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-1.webp"
+                  alt="تصویر نویسنده"
+                />
+              </Avatar>
+              <div>
+                <h2 className="font-semibold">سارا احمدی</h2>
+                <p className="text-xs text-muted-foreground">۲ روز پیش</p>
+              </div>
+            </div>
+          </aside>
+
+          <article>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر شاخص مطلب"
+              className="mt-0 mb-8 aspect-video w-full rounded-lg object-cover"
+            />
+            <div className="prose dark:prose-invert">
+              <p>
+                در پروژه‌های بزرگ، داشتن یک سیستم طراحی یکپارچه استاندارد از ناهماهنگی رابط کاربری جلوگیری کرده و همکاری تیم را ساده‌تر می‌کند.
+                                            </p>
+              <h2>جمع‌بندی</h2>
+              <p>
+                برای شروع کافی است{" "}
+                <a href="#">یک ساختار مناسب</a> را برای پروژه خود انتخاب کنید و به‌مرور توسعه دهید.
+                                            </p>
+              <blockquote>
+                «رابط کاربری خوب فقط زیبا نیست؛ استفاده از آن باید ساده، سریع و لذت‌بخش باشد.»
+                                            </blockquote>
+              <h3>اصول کلیدی</h3>
+              <p>
+                برای پیاده‌سازی موفق سیستم طراحی، این اصول را رعایت کنید:
+              </p>
+              <ul>
+                <li>طراحی سیستم منسجم</li>
+                <li>کامپوننت‌های قابل استفاده مجدد</li>
+                <li>مستندسازی استاندارد</li>
+              </ul>
+              <p>
+                با رعایت این اصول، توسعه پروژه سریع‌تر، نگهداری آن ساده‌تر و تجربه کاربران نیز بهتر خواهد بود.
+                                            </p>
+              <h3>کتابخانه کامپوننت مرکزی</h3>
+              <p>
+                کامپوننت‌های مشترک را در یک کتابخانه مرکزی نگهداری کنید تا همه اعضای تیم از نسخه‌ای واحد استفاده کنند.
+                                            </p>
+              <p>
+                استفاده از توکن‌های طراحی برای رنگ، فاصله و تایپوگرافی، هماهنگی کل محصول را تضمین می‌کند.
+                                            </p>
+              <h3>بهترین روش‌ها</h3>
+              <p>
+                استفاده از سیستم طراحی، نام‌گذاری استاندارد و مستندسازی کامپوننت‌ها کیفیت توسعه را در پروژه‌های بزرگ افزایش می‌دهد.
+                                            </p>
+              <div>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>تعداد کامپوننت</th>
+                      <th>زمان توسعه</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>{(24).toLocaleString("fa-IR")}</td>
+                      <td>{(6).toLocaleString("fa-IR")} هفته</td>
+                    </tr>
+                    <tr className="m-0 border-t p-0 even:bg-muted">
+                      <td>{(68).toLocaleString("fa-IR")}</td>
+                      <td>{(3).toLocaleString("fa-IR")} هفته</td>
+                    </tr>
+                    <tr className="m-0 border-t p-0 even:bg-muted">
+                      <td>{(120).toLocaleString("fa-IR")}</td>
+                      <td>{(1).toLocaleString("fa-IR")} هفته</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <p>
+                معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
+                                            </p>
+              <p>
+                یک سیستم طراحی موفق، سرعت توسعه را افزایش می‌دهد و تجربه‌ای یکپارچه برای کاربران ایجاد می‌کند.
+                                            </p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blogpost2 };
diff --git a/blocks/blogpost3.tsx b/blocks/blogpost3.tsx
new file mode 100644
index 0000000..c211f68
--- /dev/null
+++ b/blocks/blogpost3.tsx
@@ -0,0 +1,263 @@
+"use client";
+
+import { Lightbulb } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Blogpost3Props {
+  className?: string;
+}
+
+const formatPersianDate = (date: Date) =>
+  new Intl.DateTimeFormat("fa-IR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+
+const Blogpost3 = ({ className }: Blogpost3Props) => {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLElement>>({});
+
+  useEffect(() => {
+    const sections = Object.keys(sectionRefs.current);
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      observerCallback,
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1,
+      },
+    );
+
+    sections.forEach((sectionId) => {
+      const element = sectionRefs.current[sectionId];
+      if (element) {
+        observer?.observe(element);
+      }
+    });
+
+    return () => {
+      observer?.disconnect();
+      observer = null;
+    };
+  }, []);
+
+  const addSectionRef = (id: string, ref: HTMLElement | null) => {
+    if (ref) {
+      sectionRefs.current[id] = ref;
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-5xl flex-col items-center gap-5">
+          <Badge variant="secondary">به‌روزرسانی محصول</Badge>
+          <h1 className="text-center text-3xl font-medium text-pretty lg:text-2xll">
+            ابزارهای جدید برای کار بهتر  ابزارهای ساده جریان کار
+          </h1>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            ببینید قابلیت‌های جدید خودکارسازی ما چطور می‌تواند بهره‌وری تیم
+            شما را متحول کند. با جدیدترین ابزارها و امکانات برای افزایش
+            کارایی، کاهش کارهای دستی و بهبود همکاری در سازمان آشنا شوید.
+          </p>
+          <div className="mt-6 flex items-center gap-4">
+            <Avatar className="size-12 border">
+              <AvatarImage
+                src="/block-media/shadcnblocks/block/avatar-2.webp"
+                alt="علی رضایی"
+              />
+            </Avatar>
+            <div className="text-start">
+              <p className="text-sm font-medium">علی رضایی</p>
+              <p className="text-sm text-muted-foreground">
+                به‌روزرسانی در{" "}
+                {formatPersianDate(new Date("2024-12-07"))}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="mx-auto mt-12 max-w-6xl rounded-lg border p-2">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر شاخص مطلب"
+            className="aspect-video rounded-lg object-cover"
+          />
+        </div>
+        <div className="relative mx-auto mt-12 grid max-w-6xl gap-8 lg:grid-cols-4">
+          <div className="sticky top-8 hidden h-fit text-start lg:block">
+            <span className="mb-6 text-lg">فهرست مطالب</span>
+            <nav className="mt-2">
+              <ul className="space-y-2">
+                <li>
+                  <a
+                    href="#section1"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section1"
+                        ? "font-medium text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    چرا معماری کامپوننت‌محور؟
+                                                        </a>
+                </li>
+                <li>
+                  <a
+                    href="#section2"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section2"
+                        ? "font-medium text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    بهترین روش‌ها
+                                                        </a>
+                </li>
+                <li>
+                  <a
+                    href="#section3"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section3"
+                        ? "font-medium text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    جمع‌بندی
+                                                        </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+          <div className="lg:col-span-2">
+            <div className="lg:col-span-2">
+              <div>
+                <h1 className="text-3xl font-extrabold">راهنمای طراحی رابط کاربری مدرن با رابط کاربری</h1>
+                <p className="mt-2 text-lg text-muted-foreground">
+                  طراحی رابط کاربری مدرن تنها به ظاهر زیبا محدود نمی‌شود. استفاده از کامپوننت‌های قابل استفاده مجدد و رعایت اصول تجربه کاربری، توسعه محصولات باکیفیت را ساده‌تر می‌کند.
+                                                  </p>
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="داشبورد خودکارسازی بازاریابی"
+                  className="my-8 aspect-video w-full rounded-md object-cover"
+                />
+              </div>
+              <section
+                id="section1"
+                ref={(ref) => addSectionRef("section1", ref)}
+                className="prose mb-8 dark:prose-invert"
+              >
+                <h2>چرا معماری کامپوننت‌محور؟</h2>
+                <p>
+                  معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
+                                                  </p>
+                <Alert>
+                  <Lightbulb className="h-4 w-4" />
+                  <AlertTitle>نکته مهم</AlertTitle>
+                  <AlertDescription>
+                    پیش از شروع توسعه، ساختار طراحی، رنگ‌ها و کامپوننت‌های پایه را مشخص کنید تا محصولی یکپارچه داشته باشید.
+                                                        </AlertDescription>
+                </Alert>
+              </section>
+
+              <section
+                id="section2"
+                ref={(ref) => addSectionRef("section2", ref)}
+                className="prose mb-8 dark:prose-invert"
+              >
+                <h2>بهترین روش‌ها</h2>
+                <p>
+                  استفاده از سیستم طراحی، نام‌گذاری استاندارد و مستندسازی کامپوننت‌ها کیفیت توسعه را در پروژه‌های بزرگ افزایش می‌دهد.
+                                                  </p>
+                <div>
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>تعداد لید</th>
+                        <th>نرخ تبدیل</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>{(120).toLocaleString("fa-IR")}</td>
+                        <td>{(8).toLocaleString("fa-IR")}٪</td>
+                      </tr>
+                      <tr className="m-0 border-t p-0 even:bg-muted">
+                        <td>{(340).toLocaleString("fa-IR")}</td>
+                        <td>{(14).toLocaleString("fa-IR")}٪</td>
+                      </tr>
+                      <tr className="m-0 border-t p-0 even:bg-muted">
+                        <td>{(520).toLocaleString("fa-IR")}</td>
+                        <td>{(22).toLocaleString("fa-IR")}٪</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <p>
+                  معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
+                                                  </p>
+              </section>
+
+              <section
+                id="section3"
+                ref={(ref) => addSectionRef("section3", ref)}
+                className="prose mb-8 dark:prose-invert"
+              >
+                <h2>جمع‌بندی</h2>
+                <p>
+                  برای شروع کافی است{" "}
+                  <a href="#">یک ساختار مناسب</a> را برای پروژه خود انتخاب کنید و به‌مرور توسعه دهید.
+                                                  </p>
+                <blockquote>
+                  «رابط کاربری خوب فقط زیبا نیست؛ استفاده از آن باید ساده، سریع و لذت‌بخش باشد.»
+                                                  </blockquote>
+                <p>
+                  برای بهبود نرخ تبدیل، این سه اصل را در اولویت قرار دهید:
+                </p>
+                <ul>
+                  <li>طراحی سیستم منسجم</li>
+                  <li>کامپوننت‌های قابل استفاده مجدد</li>
+                  <li>مستندسازی استاندارد</li>
+                </ul>
+                <p>
+                  با رعایت این اصول، توسعه پروژه سریع‌تر، نگهداری آن ساده‌تر و تجربه کاربران نیز بهتر خواهد بود.
+                                                  </p>
+              </section>
+            </div>
+          </div>
+          <div className="sticky top-8 prose hidden h-fit rounded-lg border p-6 text-start lg:block dark:prose-invert">
+            <h5 className="text-xl font-semibold">با راهکار ما شروع کنید</h5>
+            <ul className="my-6 text-sm [&>li]:ps-0 [&>li]:pe-0">
+              <li>صرفه‌جویی ۴۰٪ زمان با خودکارسازی وظایف</li>
+              <li>همکاری بلادرنگ تیمی</li>
+              <li>جریان‌های کار ساده با کشیدن و رها کردن</li>
+            </ul>
+            <div className="flex flex-col gap-2">
+              <Button>شروع کنید</Button>
+              <Button variant="outline">بیشتر بدانید</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blogpost3 };
diff --git a/blocks/blogpost4.tsx b/blocks/blogpost4.tsx
new file mode 100644
index 0000000..dc83c71
--- /dev/null
+++ b/blocks/blogpost4.tsx
@@ -0,0 +1,347 @@
+"use client";
+
+import {
+  ArrowUp,
+  Clock,
+  Facebook,
+  Home,
+  Instagram,
+  Lightbulb,
+  Linkedin,
+  Twitter,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Blogpost4Props {
+  className?: string;
+}
+
+const formatPersianDate = (date: Date) =>
+  new Intl.DateTimeFormat("fa-IR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+
+const Blogpost4 = ({ className }: Blogpost4Props) => {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLElement>>({});
+
+  useEffect(() => {
+    const sections = Object.keys(sectionRefs.current);
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      observerCallback,
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1,
+      },
+    );
+
+    sections.forEach((sectionId) => {
+      const element = sectionRefs.current[sectionId];
+      if (element) {
+        observer?.observe(element);
+      }
+    });
+
+    return () => {
+      observer?.disconnect();
+      observer = null;
+    };
+  }, []);
+
+  const addSectionRef = (id: string, ref: HTMLElement | null) => {
+    if (ref) {
+      sectionRefs.current[id] = ref;
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">
+                <Home className="h-4 w-4" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">کامپوننت‌ها</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>وبلاگ</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <h1 className="mt-7 mb-6 max-w-3xl text-start text-3xl font-semibold md:text-2xll">
+          چگونه نرخ تبدیل لیدها را ۴۰٪ با اتوماسیون بازاریابی افزایش دهید
+        </h1>
+        <div className="flex flex-wrap items-center gap-3 text-sm">
+          <Avatar className="h-8 w-8 border">
+            <AvatarImage
+              src="/block-media/shadcnblocks/block/avatar-2.webp"
+              alt="علی رضایی"
+            />
+          </Avatar>
+          <span>
+            <a href="#" className="font-medium">
+              علی رضایی
+            </a>
+            <span className="ms-1 text-muted-foreground">
+              در {formatPersianDate(new Date("2024-09-23"))}
+            </span>
+          </span>
+
+          <span className="flex items-center gap-1 text-muted-foreground">
+            <Clock className="h-4 w-4" />
+            ۱۰ دقیقه مطالعه
+          </span>
+        </div>
+        <Separator className="mt-8 mb-16" />
+        <div className="relative grid grid-cols-12 gap-6 lg:grid">
+          <div className="col-span-12 lg:col-span-8 lg:col-start-4">
+            <div>
+              <h3 className="mt-3 text-start text-xl font-semibold">
+                اتوماسیون بازاریابی چیست و چرا مهم است؟
+              </h3>
+              <p className="mt-2 text-start text-lg text-muted-foreground">
+                اتوماسیون بازاریابی به معنای اجرای خودکار جریان‌های ایمیل،
+                امتیازدهی لید و اختصاص معامله به فروشندگان بر اساس رفتار
+                دیجیتال مخاطب است. تیم‌های B2B با این رویکرد، زمان پاسخ‌گویی
+                را از ۴۸ ساعت به کمتر از ۲ ساعت کاهش داده‌اند.
+              </p>
+            </div>
+            <section
+              id="section1"
+              ref={(ref) => addSectionRef("section1", ref)}
+              className="my-8 prose dark:prose-invert"
+            >
+              <h2>راه‌اندازی امتیازدهی لید</h2>
+              <p>
+                تیم بازاریابی CloudStar با{" "}
+                <a href="#">مدل امتیازدهی رفتاری</a> لیدهای آماده خرید را
+                شناسایی کرد.
+              </p>
+              <blockquote>
+                لیدهایی که صفحه قیمت را بازدید کرده و وایت‌پیپر را دانلود
+                کرده‌اند، اولویت تماس فروش را دریافت می‌کنند.
+              </blockquote>
+              <p>
+                معیارهای امتیازدهی بر اساس تعامل دیجیتال تعریف شد و لیدهای
+                بالای ۳۰ امتیاز به‌صورت خودکار به فروش اختصاص یافتند.
+              </p>
+              <Alert>
+                <Lightbulb className="h-4 w-4" />
+                <AlertTitle>نکته عملی</AlertTitle>
+                <AlertDescription>
+                  ایمیل‌های با موضوع شخصی‌سازی‌شده (نام شرکت مخاطب) نرخ باز
+                  شدن ۴۲٪ بالاتری نسبت به قالب‌های عمومی داشتند.
+                </AlertDescription>
+              </Alert>
+            </section>
+
+            <section
+              id="section2"
+              ref={(ref) => addSectionRef("section2", ref)}
+              className="prose mb-8 dark:prose-invert"
+            >
+              <h2>نتایج کمپین ۹۰ روزه</h2>
+              <p>
+                پس از اجرای جریان‌های ایمیل و امتیازدهی، تیم فروش شاهد
+                بهبود قابل‌توجهی در معیارهای کلیدی بود.
+              </p>
+              <div>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>تعداد لید</th>
+                      <th>نرخ تبدیل</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>{(120).toLocaleString("fa-IR")}</td>
+                      <td>{(8).toLocaleString("fa-IR")}٪</td>
+                    </tr>
+                    <tr className="m-0 border-t p-0 even:bg-muted">
+                      <td>{(340).toLocaleString("fa-IR")}</td>
+                      <td>{(14).toLocaleString("fa-IR")}٪</td>
+                    </tr>
+                    <tr className="m-0 border-t p-0 even:bg-muted">
+                      <td>{(520).toLocaleString("fa-IR")}</td>
+                      <td>{(22).toLocaleString("fa-IR")}٪</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <p>
+                لیدهایی که حداقل ۳ ایمیل از دنباله را باز کرده بودند، ۲.۸
+                برابر بیشتر احتمال تبدیل به مشتری داشتند.
+              </p>
+            </section>
+
+            <section
+              id="section3"
+              ref={(ref) => addSectionRef("section3", ref)}
+              className="prose mb-8 dark:prose-invert"
+            >
+              <h2>بهینه‌سازی جریان ایمیل</h2>
+              <p>
+                تیم بازاریابی با{" "}
+                <a href="#">تست A/B موضوع ایمیل</a> نرخ باز شدن را از ۱۸٪
+                به ۲۶٪ رساند.
+              </p>
+              <blockquote>
+                ایمیل‌های کوتاه با یک CTA واضح، نرخ کلیک ۳۵٪ بالاتری نسبت
+                به ایمیل‌های چندبخشی داشتند.
+              </blockquote>
+              <p>
+                سه نوع دنباله ایمیل برای بخش‌های مختلف قیف فروش طراحی شد:
+              </p>
+              <ul>
+                <li>آگاهی: معرفی مشکل و راه‌حل</li>
+                <li>بررسی: مقایسه با رقبا و مطالعه موردی</li>
+                <li>تصمیم: دعوت به دمو و پیشنهاد آزمایشی</li>
+              </ul>
+              <p>
+                زمان پاسخ فروش به لیدهای داغ از ۲۴ ساعت به کمتر از ۲ ساعت
+                رسید و نرخ بستن معامله ۴۰٪ افزایش یافت.
+              </p>
+            </section>
+          </div>
+          <div className="sticky top-8 col-span-3 col-start-1 hidden h-fit text-start lg:block">
+            <span className="text-lg font-medium">در این صفحه</span>
+            <nav className="mt-4 text-sm">
+              <ul className="space-y-1">
+                <li>
+                  <a
+                    href="#section1"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section1"
+                        ? "text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    راه‌اندازی امتیازدهی لید
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#section2"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section2"
+                        ? "text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    نتایج کمپین ۹۰ روزه
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#section3"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section3"
+                        ? "text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    بهینه‌سازی جریان ایمیل
+                  </a>
+                </li>
+              </ul>
+            </nav>
+            <Separator className="my-6" />
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-sm font-medium">اشتراک‌گذاری این مطلب</p>
+              <ul className="flex gap-2">
+                <li>
+                  <a
+                    href="#"
+                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
+                    aria-label="اشتراک در فیسبوک"
+                  >
+                    <Facebook className="h-4 w-4" />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
+                    aria-label="اشتراک در توییتر"
+                  >
+                    <Twitter className="h-4 w-4" />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
+                    aria-label="اشتراک در لینکدین"
+                  >
+                    <Linkedin className="h-4 w-4" />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
+                    aria-label="اشتراک در اینستاگرام"
+                  >
+                    <Instagram className="h-4 w-4" />
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className="mt-6">
+              <Button
+                variant="outline"
+                onClick={() =>
+                  window.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                  })
+                }
+              >
+                <ArrowUp className="h-4 w-4" />
+                بازگشت به بالا
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blogpost4 };
diff --git a/blocks/blogpost5.tsx b/blocks/blogpost5.tsx
new file mode 100644
index 0000000..7e95447
--- /dev/null
+++ b/blocks/blogpost5.tsx
@@ -0,0 +1,323 @@
+"use client";
+
+import { Facebook, Home, Lightbulb, Linkedin, Twitter } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Blogpost5Props {
+  className?: string;
+}
+
+const formatPersianDate = (date: Date) =>
+  new Intl.DateTimeFormat("fa-IR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+
+const Blogpost5 = ({ className }: Blogpost5Props) => {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLElement>>({});
+
+  useEffect(() => {
+    const sections = Object.keys(sectionRefs.current);
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      observerCallback,
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1,
+      },
+    );
+
+    sections.forEach((sectionId) => {
+      const element = sectionRefs.current[sectionId];
+      if (element) {
+        observer?.observe(element);
+      }
+    });
+
+    return () => {
+      observer?.disconnect();
+      observer = null;
+    };
+  }, []);
+
+  const addSectionRef = (id: string, ref: HTMLElement | null) => {
+    if (ref) {
+      sectionRefs.current[id] = ref;
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">
+                <Home className="h-4 w-4" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">کامپوننت‌ها</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>وبلاگ</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <h1 className="mt-9 mb-7 max-w-3xl text-start text-xl font-bold md:mb-10 md:text-2xll">
+          چگونه نرخ تبدیل لیدها را ۴۰٪ با اتوماسیون بازاریابی افزایش دهید
+        </h1>
+        <div className="flex flex-wrap items-center gap-3 text-sm md:text-base">
+          <Avatar className="h-8 w-8 border">
+            <AvatarImage
+              src="/block-media/shadcnblocks/block/avatar-2.webp"
+              alt="علی رضایی"
+            />
+          </Avatar>
+          <span>
+            <a href="#" className="font-medium">
+              علی رضایی
+            </a>
+            <span className="ms-1 text-muted-foreground">
+              در {formatPersianDate(new Date("2024-09-23"))}
+            </span>
+          </span>
+        </div>
+        <div className="relative mt-12 grid max-w-7xl gap-14 lg:mt-14 lg:grid lg:grid-cols-12 lg:gap-6">
+          <div className="order-2 lg:order-none lg:col-span-8 lg:col-start-4">
+            <div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر شاخص مطلب"
+                className="mt-0 mb-8 aspect-video w-full rounded-lg border object-cover"
+              />
+              <p className="text-start text-sm text-muted-foreground">
+                اتوماسیون بازاریابی به معنای اجرای خودکار جریان‌های ایمیل،
+                امتیازدهی لید و اختصاص معامله به فروشندگان بر اساس رفتار
+                دیجیتال مخاطب است.
+              </p>
+            </div>
+            <section
+              id="section1"
+              ref={(ref) => addSectionRef("section1", ref)}
+              className="my-8 prose dark:prose-invert"
+            >
+              <h2>راه‌اندازی امتیازدهی لید</h2>
+              <p>
+                تیم بازاریابی CloudStar با{" "}
+                <a href="#">مدل امتیازدهی رفتاری</a> لیدهای آماده خرید را
+                شناسایی کرد.
+              </p>
+              <blockquote>
+                لیدهایی که صفحه قیمت را بازدید کرده و وایت‌پیپر را دانلود
+                کرده‌اند، اولویت تماس فروش را دریافت می‌کنند.
+              </blockquote>
+              <p>
+                معیارهای امتیازدهی بر اساس تعامل دیجیتال تعریف شد و لیدهای
+                بالای ۳۰ امتیاز به‌صورت خودکار به فروش اختصاص یافتند.
+              </p>
+              <Alert>
+                <Lightbulb className="h-4 w-4" />
+                <AlertTitle>نکته عملی</AlertTitle>
+                <AlertDescription>
+                  ایمیل‌های با موضوع شخصی‌سازی‌شده (نام شرکت مخاطب) نرخ باز
+                  شدن ۴۲٪ بالاتری نسبت به قالب‌های عمومی داشتند.
+                </AlertDescription>
+              </Alert>
+            </section>
+
+            <section
+              id="section2"
+              ref={(ref) => addSectionRef("section2", ref)}
+              className="prose mb-8 dark:prose-invert"
+            >
+              <h2>نتایج کمپین ۹۰ روزه</h2>
+              <p>
+                پس از اجرای جریان‌های ایمیل و امتیازدهی، تیم فروش شاهد
+                بهبود قابل‌توجهی در معیارهای کلیدی بود.
+              </p>
+              <div>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>تعداد لید</th>
+                      <th>نرخ تبدیل</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>{(120).toLocaleString("fa-IR")}</td>
+                      <td>{(8).toLocaleString("fa-IR")}٪</td>
+                    </tr>
+                    <tr className="m-0 border-t p-0 even:bg-muted">
+                      <td>{(340).toLocaleString("fa-IR")}</td>
+                      <td>{(14).toLocaleString("fa-IR")}٪</td>
+                    </tr>
+                    <tr className="m-0 border-t p-0 even:bg-muted">
+                      <td>{(520).toLocaleString("fa-IR")}</td>
+                      <td>{(22).toLocaleString("fa-IR")}٪</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <p>
+                لیدهایی که حداقل ۳ ایمیل از دنباله را باز کرده بودند، ۲.۸
+                برابر بیشتر احتمال تبدیل به مشتری داشتند.
+              </p>
+            </section>
+
+            <section
+              id="section3"
+              ref={(ref) => addSectionRef("section3", ref)}
+              className="prose mb-8 dark:prose-invert"
+            >
+              <h2>بهینه‌سازی جریان ایمیل</h2>
+              <p>
+                تیم بازاریابی با{" "}
+                <a href="#">تست A/B موضوع ایمیل</a> نرخ باز شدن را از ۱۸٪
+                به ۲۶٪ رساند.
+              </p>
+              <blockquote>
+                ایمیل‌های کوتاه با یک CTA واضح، نرخ کلیک ۳۵٪ بالاتری نسبت
+                به ایمیل‌های چندبخشی داشتند.
+              </blockquote>
+              <p>
+                سه نوع دنباله ایمیل برای بخش‌های مختلف قیف فروش طراحی شد:
+              </p>
+              <ul>
+                <li>آگاهی: معرفی مشکل و راه‌حل</li>
+                <li>بررسی: مقایسه با رقبا و مطالعه موردی</li>
+                <li>تصمیم: دعوت به دمو و پیشنهاد آزمایشی</li>
+              </ul>
+              <p>
+                زمان پاسخ فروش به لیدهای داغ از ۲۴ ساعت به کمتر از ۲ ساعت
+                رسید و نرخ بستن معامله ۴۰٪ افزایش یافت.
+              </p>
+            </section>
+          </div>
+          <div className="order-1 flex h-fit flex-col text-start text-sm lg:sticky lg:top-8 lg:order-none lg:col-span-3 lg:col-start-1 lg:text-xs">
+            <div className="order-3 lg:order-none">
+              <span className="text-xs font-medium">در این صفحه</span>
+              <nav className="mt-2 lg:mt-4">
+                <ul className="space-y-1">
+                  <li>
+                    <a
+                      href="#section1"
+                      className={cn(
+                        "block py-1 transition-colors duration-200",
+                        activeSection === "section1"
+                          ? "text-muted-foreground lg:text-primary"
+                          : "text-muted-foreground hover:text-primary",
+                      )}
+                    >
+                      راه‌اندازی امتیازدهی لید
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#section2"
+                      className={cn(
+                        "block py-1 transition-colors duration-200",
+                        activeSection === "section2"
+                          ? "text-muted-foreground lg:text-primary"
+                          : "text-muted-foreground hover:text-primary",
+                      )}
+                    >
+                      نتایج کمپین ۹۰ روزه
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#section3"
+                      className={cn(
+                        "block py-1 transition-colors duration-200",
+                        activeSection === "section3"
+                          ? "text-muted-foreground lg:text-primary"
+                          : "text-muted-foreground hover:text-primary",
+                      )}
+                    >
+                      بهینه‌سازی جریان ایمیل
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <Separator className="order-2 mt-8 mb-11 lg:hidden" />
+            <div className="order-1 flex flex-col gap-2 lg:order-none lg:mt-9">
+              <p className="font-medium text-muted-foreground">
+                اشتراک‌گذاری این مطلب:
+              </p>
+              <ul className="flex gap-2">
+                <li>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="group rounded-full"
+                    asChild
+                  >
+                    <a href="#" aria-label="اشتراک در فیسبوک">
+                      <Facebook className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
+                    </a>
+                  </Button>
+                </li>
+                <li>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="group rounded-full"
+                    asChild
+                  >
+                    <a href="#" aria-label="اشتراک در لینکدین">
+                      <Linkedin className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
+                    </a>
+                  </Button>
+                </li>
+                <li>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="group rounded-full"
+                    asChild
+                  >
+                    <a href="#" aria-label="اشتراک در توییتر">
+                      <Twitter className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
+                    </a>
+                  </Button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blogpost5 };
diff --git a/blocks/blogpost6.tsx b/blocks/blogpost6.tsx
new file mode 100644
index 0000000..3f3c7e4
--- /dev/null
+++ b/blocks/blogpost6.tsx
@@ -0,0 +1,394 @@
+"use client";
+import type { LucideIcon } from "lucide-react";
+import { Linkedin, Twitter } from "lucide-react";
+import { Fragment, useEffect, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface BreadcrumbItem {
+  label: string;
+  link: string;
+}
+
+interface BreadcrumbBlogProps {
+  breadcrumb: Array<BreadcrumbItem>;
+}
+
+interface AuthorType {
+  image?: string;
+  name: string;
+  job: string;
+  description: string;
+  socials: {
+    icon: LucideIcon;
+    url: string;
+    label: string;
+  }[];
+}
+
+const formatPersianDate = (date: Date) =>
+  new Intl.DateTimeFormat("fa-IR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+
+const AUTHOR: AuthorType = {
+  image: "/block-media/shadcnblocks/block/avatar-1.webp",
+  name: "مهسا نوری",
+  job: "مدیرعامل و هم‌بنیان‌گذار",
+  description:
+    "توسعه‌دهنده و نویسنده‌ای که تجربه‌های خود در طراحی رابط کاربری، معماری نرم‌افزار و توسعه فرانت‌اند را با زبانی ساده و کاربردی به اشتراک می‌گذارد.",
+  socials: [
+    {
+      icon: Twitter,
+      url: "#",
+      label: "توییتر",
+    },
+    {
+      icon: Linkedin,
+      url: "#",
+      label: "لینکدین",
+    },
+  ],
+};
+
+const BREADCRUMB: Array<BreadcrumbItem> = [
+  {
+    label: "منابع",
+    link: "#",
+  },
+  {
+    label: "وبلاگ",
+    link: "#",
+  },
+];
+
+const SHARE_LINKS = [
+  {
+    icon: Twitter,
+    url: "#",
+    label: "اشتراک در توییتر",
+  },
+  {
+    icon: Linkedin,
+    url: "#",
+    label: "اشتراک در لینکدین",
+  },
+];
+
+const ARTICLE_DATE = formatPersianDate(new Date("2025-05-18"));
+const ARTICLE_DURATION = "۱۰ دقیقه مطالعه";
+
+interface Blogpost6Props {
+  className?: string;
+}
+
+const Blogpost6 = ({ className }: Blogpost6Props) => {
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const chapterIds = ["مقدمه", "انواع کامپوننت‌های رابط کاربری", "جمع‌بندی"];
+    const headingElements = chapterIds
+      .map((id) => document.getElementById(id))
+      .filter(Boolean) as HTMLElement[];
+
+    const observer = new window.IntersectionObserver(
+      (entries) => {
+        const visible = entries.find((entry) => entry.isIntersecting);
+        if (visible) {
+          setActiveId(visible.target.id);
+        }
+      },
+      {
+        rootMargin: "0px 0px -30% 0px",
+        threshold: 0.1,
+      },
+    );
+
+    headingElements.forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
+      <div className="bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-20">
+        <div className="container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-end lg:justify-between">
+          <div className="flex w-full flex-col items-center justify-center gap-12">
+            <div className="flex w-full max-w-[36rem] flex-col items-center justify-center gap-8">
+              <BreadcrumbBlog breadcrumb={BREADCRUMB} />
+              <div className="flex w-full flex-col gap-5">
+                <div className="flex items-center justify-center gap-2.5 text-sm font-medium text-foreground/60">
+                  <div>{ARTICLE_DURATION}</div>
+                  <div>|</div>
+                  <div>{ARTICLE_DATE}</div>
+                </div>
+                <h1 className="text-center text-[2.5rem] leading-[1.2] font-semibold md:text-2xll lg:text-2xll">
+                  ساخت کامپوننت‌های بهتر
+                </h1>
+                <p className="text-center text-xl leading-[1.4] font-semibold text-foreground">
+                  کامپوننت‌های رابط کاربری پایه و اساس ساخت محصولات دیجیتال مدرن هستند. در این مقاله با نقش، مزایا و مهم‌ترین انواع آن‌ها آشنا می‌شوید.
+                                                  </p>
+                <div className="flex items-center justify-center gap-2.5">
+                  {SHARE_LINKS.map((link, index) => (
+                    <Button asChild key={`share-link-${index}`} size="icon">
+                      <a href={link.url} aria-label={link.label}>
+                        <link.icon />
+                      </a>
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container pt-20">
+        <div className="relative mx-auto flex w-full max-w-5xl items-start justify-between gap-20">
+          <div className="top-20 flex-1 bg-background pb-10 text-start lg:sticky lg:pb-0">
+            <div className="text-xl leading-snug font-medium">فهرست مطالب</div>
+            <div className="flex flex-col gap-2 pt-2 ps-2">
+              <a
+                href="#heading-1"
+                className={`block text-sm leading-normal font-medium text-muted-foreground transition duration-300 ${activeId === "heading-1" ? "lg:rounded-md lg:bg-muted lg:p-2 lg:font-bold lg:text-primary!" : "text-muted-foreground"}`}
+              >
+                نقش کامپوننت‌های رابط کاربری در توسعه
+              </a>
+              <a
+                href="#heading-2"
+                className={`block text-sm leading-normal font-medium text-muted-foreground transition duration-300 ${activeId === "heading-2" ? "lg:rounded-md lg:bg-muted lg:p-2 lg:font-bold lg:text-primary!" : "text-muted-foreground"}`}
+              >
+                انواع اصلی کامپوننت‌های رابط کاربری
+              </a>
+              <a
+                href="#heading-3"
+                className={`block text-sm leading-normal font-medium text-muted-foreground transition duration-300 ${activeId === "heading-3" ? "lg:rounded-md lg:bg-muted lg:p-2 lg:font-bold lg:text-primary!" : "text-muted-foreground"}`}
+              >
+                جمع‌بندی
+                                            </a>
+            </div>
+          </div>
+
+          <div className="flex w-full max-w-[40rem] flex-col gap-10">
+            <Author author={AUTHOR} />
+            <div className="prose dark:prose-invert">
+              <h2>نکات کلیدی</h2>
+              <p>
+                • استفاده از کامپوننت‌های قابل استفاده مجدد باعث افزایش سرعت توسعه، کاهش تکرار کد و حفظ یکپارچگی رابط کاربری می‌شود.
+                                            </p>
+              <p>
+                • کتابخانه‌هایی مانند ری یو آی، کتابخانه پایه و کتابخانه رابط توسعه رابط‌های کاربری استاندارد و دسترس‌پذیر را ساده‌تر می‌کنند.
+                                            </p>
+              <p>
+                • طراحی مبتنی بر کامپوننت، نگهداری پروژه، توسعه قابلیت‌های جدید و همکاری تیمی را آسان‌تر می‌کند.
+                                            </p>
+
+              <p>
+                در چشم‌انداز در حال تحول توسعه وب مدرن، کامپوننت‌های رابط کاربری به
+                ابزارهای ضروری برای ساخت رابط‌های کاربرپسند تبدیل شده‌اند. این
+                کامپوننت‌ها  از دکمه‌های ساده تا جداول داده پیچیده 
+                بلاک‌های سازنده‌ای هستند که تجربه کلی کاربر را شکل می‌دهند. با
+                ماژولار کردن رابط به بخش‌های کوچک‌تر و قابل‌مدیریت، کامپوننت‌های
+                رابط کاربری نه‌تنها فرآیند توسعه را ساده می‌کنند، بلکه یکپارچگی طراحی
+                در سراسر اپلیکیشن را نیز تقویت می‌کنند. با پیچیده‌تر شدن
+                محصولات دیجیتال، نقش کامپوننت‌های رابط کاربری ساخت‌یافته در برآورده
+                کردن انتظارات کاربر و حفظ کیفیت کد حتی مهم‌تر می‌شود.
+              </p>
+              <h2 id="heading-1" className="scroll-mt-24">
+                نقش کامپوننت‌های رابط کاربری در توسعه
+              </h2>
+              <p>
+                کامپوننت‌های رابط کاربری واحدهای مستقل عملکرد و نمایش هستند که اغلب برای
+                استفاده مجدد در بخش‌های مختلف اپلیکیشن طراحی می‌شوند. با
+                محصور کردن منطق و استایل، کامپوننت‌ها تکرار را کاهش می‌دهند
+                و نگهداری کدبیس را بهبود می‌بخشند. برای مثال، یک کامپوننت
+                دکمه می‌تواند با props یا استایل‌های مختلف بارها استفاده شود
+                و ظاهر یکنواخت در کل اپلیکیشن را تضمین کند. این رویکرد
+                ماژولار امکان توسعه موازی را نیز فراهم می‌کند؛ تیم‌ها می‌توانند
+                روی کامپوننت‌های جداگانه کار کنند بدون اینکه مزاحم یکدیگر
+                شوند.
+              </p>
+              <p>
+                فریم‌ورک‌های محبوبی مانند رابط کاربری، چارچوب رابط و چارچوب رابط بر معماری
+                مبتنی‌بر کامپوننت بنا شده‌اند و توسعه‌دهندگان را تشویق
+                می‌کنند به‌جای صفحات یکپارچه، به بلاک‌های قابل‌استفاده‌مجدد
+                فکر کنند. این تغییر نه‌تنها مقیاس‌پذیری را افزایش می‌دهد،
+                بلکه تست و دیباگ را نیز ساده‌تر می‌کند. علاوه بر این،
+                کتابخانه‌های رابط کاربری زیادی مانند کتابخانه رابط، کتابخانه رابط و کتابخانه پایه
+                کامپوننت‌های ازپیش‌ساخته و دسترس‌پذیر ارائه می‌دهند که توسعه
+                را تسریع و هماهنگی با سیستم‌های طراحی را تضمین می‌کنند. پذیرفتن
+                کامپوننت‌ها به‌عنوان عناصر اصلی در معماری فرانت‌اند، منجر به
+                سازمان‌دهی بهتر کد، نمونه‌سازی سریع‌تر و تجربه کاربری روان‌تر
+                می‌شود.
+              </p>
+              <h2 id="heading-2" className="scroll-mt-24">
+                انواع اصلی کامپوننت‌های رابط کاربری
+              </h2>
+              <h3>۱ کامپوننت‌های ورودی</h3>
+              <p>
+                کامپوننت‌های ورودی عناصر تعاملی هستند که به کاربر اجازه
+                می‌دهند اطلاعات وارد کند. این‌ها شامل فیلدهای متنی،
+                چک‌باکس‌ها، دکمه‌های رادیویی، اسلایدرها و آپلود فایل
+                می‌شوند. آن‌ها در فرم‌ها و تنظیمات کاربر ضروری‌اند و جمع‌آوری
+                داده و شخصی‌سازی را ممکن می‌سازند.                 یک کامپوننت ورودی خوش‌طراح اعتبارسنجی را مدیریت می‌کند، بازخورد
+                نمایش می‌دهد و تجربه‌ای یکپارچه در دستگاه‌ها و صفحه‌خوان‌ها
+                فراهم می‌کند تا فراگیری و کاربردپذیری تضمین شود.
+              </p>
+              <a href="#">ادامه مطالعه</a>
+              <div className="w-full max-w-[40rem] overflow-hidden">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="نمونه کامپوننت‌های ورودی"
+                  className="size-full object-cover object-center"
+                />
+              </div>
+              <h3>۲ کامپوننت‌های ناوبری</h3>
+              <p>
+                کامپوننت‌های ناوبری کاربر را در ساختار اپلیکیشن هدایت
+                می‌کنند. این‌ها شامل نوار بالا، منوی کناری، breadcrumb،
+                تب‌ها و صفحه‌بندی می‌شوند. ناوبری مؤثر کشف‌پذیری را بهبود
+                می‌بخشد و به کاربر کمک می‌کند محتوای موردنیاز را بدون اصطکاک
+                پیدا کند. طراحی خوب ناوبری جریان کاربر، دسترس‌پذیری (مانند
+                ناوبری با کیبورد و برچسب‌های برچسب دسترس‌پذیری) و واکنش‌گرایی را در نظر
+                می‌گیرد تا رابط در اندازه‌های مختلف صفحه شهودی و سازگار
+                بماند.
+              </p>
+              <div className="w-full max-w-[40rem] overflow-hidden">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                  alt="نمونه کامپوننت‌های ناوبری"
+                  className="size-full object-cover object-center"
+                />
+              </div>
+              <h3>۳. کامپوننت‌های بازخورد</h3>
+              <p>
+                کامپوننت‌های بازخورد نشانه‌های بصری یا متنی در پاسخ به
+                اقدامات کاربر ارائه می‌دهند. نمونه‌ها شامل مودال‌ها،
+                اعلان‌های toast، نوار پیشرفت و tooltipها هستند. این عناصر
+                کاربر را از موفقیت یا شکست عملیات‌ها مطلع می‌کنند یا او را
+                به اقدام لازم هشدار می‌دهند. آن‌ها تعامل را تقویت و سردرگمی
+                را  به‌ویژه در عملیات ناهمگام مانند ارسال فرم یا آپلود
+                فایل  کاهش می‌دهند.
+              </p>
+              <div className="w-full max-w-[40rem] overflow-hidden">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                  alt="نمونه کامپوننت‌های بازخورد"
+                  className="size-full object-cover object-center"
+                />
+              </div>
+              <h3>۴. کامپوننت‌های چیدمان</h3>
+              <p>
+                کامپوننت‌های چیدمان محتوا را به‌صورت بصری در صفحه سازماندهی
+                می‌کنند. نمونه‌های رایج شامل containerها، سطرها، ستون‌ها و
+                سیستم‌های grid هستند. این کامپوننت‌ها ساختار صفحه را تعریف
+                و فاصله‌گذاری، تراز و واکنش‌گرایی عناصر فرزند را کنترل
+                می‌کنند. یک سیستم چیدمان قوی یکنواختی در سلسله‌مراتب بصری
+                را تضمین و از مقیاس‌پذیری با پیچیده‌تر شدن اپلیکیشن
+                پشتیبانی می‌کند.
+              </p>
+              <div className="w-full max-w-[40rem] overflow-hidden">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                  alt="نمونه کامپوننت‌های چیدمان"
+                  className="size-full object-cover object-center"
+                />
+              </div>
+              <h2 id="heading-3" className="scroll-mt-24">
+                جمع‌بندی
+                                            </h2>
+              <p>
+                تسلط بر استفاده از کامپوننت‌های رابط کاربری گامی کلیدی به سوی ساخت
+                اپلیکیشن‌های وب قابل‌اعتماد، مقیاس‌پذیر و از نظر بصری
+                یکپارچه است. با شکستن رابط‌ها به بخش‌های کوچک‌تر،
+                توسعه‌دهندگان انعطاف بیشتری به‌دست می‌آورند، استفاده مجدد را
+                تشویق می‌کنند و احتمال خطا را کاهش می‌دهند. کامپوننت‌های رابط کاربری
+                همچنین شکاف بین طراحی و توسعه را پر می‌کنند و جریان کاری
+                مشارکتی و کارآمدتری ایجاد می‌کنند که به هر دو گروه
+                توسعه‌دهندگان و کاربران نهایی سود می‌رساند.
+              </p>
+            </div>
+
+            <div className="prose rounded-lg bg-muted p-5 dark:prose-invert [&>h2]:mt-0">
+              <h2>نتیجه‌گیری</h2>
+              <p>
+                کامپوننت‌های رابط کاربری فراتر از عناصر بصری هستند  آن‌ها دارایی‌های
+                راهبردی در جعبه‌ابزار سازنده محصول مدرن‌اند. وقتی با دقت
+                طراحی و به‌درستی استفاده شوند، به تیم‌ها قدرت می‌دهند
+                رابط‌های باکیفیت را با سرعت، یکپارچگی و اطمینان تحویل دهند.
+                با ادامه تحول توسعه فرانت‌اند، سرمایه‌گذاری روی کامپوننت‌های
+                رابط کاربری قابل‌استفاده‌مجدد، دسترس‌پذیر و مستندسازی‌شده برای ساخت
+                محصولات دیجیتال کاربرمحور و قابل‌نگهداری همچنان ضروری
+                خواهد ماند.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-4 rounded-lg bg-muted p-5 text-start">
+              <Author author={AUTHOR} />
+              <p>{AUTHOR.description}</p>
+              <div className="flex items-center gap-2.5">
+                {AUTHOR.socials.map((link, index) => (
+                  <Button asChild key={`author-socials-${index}`} size="icon">
+                    <a href={link.url} aria-label={link.label}>
+                      <link.icon />
+                    </a>
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const Author = ({ author }: { author: AuthorType }) => {
+  return (
+    <div className="flex items-center gap-2.5 text-start">
+      <Avatar className="size-12 border">
+        <AvatarImage src={author.image} alt={author.name} />
+        <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>
+      </Avatar>
+      <div>
+        <div className="text-sm leading-normal font-normal">{author.name}</div>
+        <div className="text-sm leading-normal font-normal text-muted-foreground">
+          {author.job}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const BreadcrumbBlog = ({ breadcrumb }: BreadcrumbBlogProps) => {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {breadcrumb.map((item, i) => {
+          return (
+            <Fragment key={`${item.label}`}>
+              <BreadcrumbItem>
+                <BreadcrumbLink href={item.link}>{item.label}</BreadcrumbLink>
+              </BreadcrumbItem>
+              {i < breadcrumb.length - 1 ? (
+                <BreadcrumbSeparator>/</BreadcrumbSeparator>
+              ) : null}
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+export { Blogpost6 };
diff --git a/blocks/blogpost7.tsx b/blocks/blogpost7.tsx
new file mode 100644
index 0000000..0c47dcf
--- /dev/null
+++ b/blocks/blogpost7.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface BlogPost7Props {
+  title: string;
+  image: string;
+  description: string;
+  topNote: string;
+  author: {
+    name: string;
+    image: string;
+    description: string;
+  };
+  secondaryDescription: string;
+  className?: string;
+}
+
+const formatPersianDate = (date: Date) =>
+  new Intl.DateTimeFormat("fa-IR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+
+const Blogpost7 = ({
+  title = "طراحی پایدار در عصر دیجیتال",
+  description =
+    "چرا رویه‌های مسئولانه زیست‌محیطی در محصولات دیجیتال برای آینده فناوری اهمیت دارد.",
+  image = "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  topNote = formatPersianDate(new Date("2025-01-22")),
+  author = {
+    name: "سارا احمدی",
+    image: "/block-media/shadcnblocks/block/avatar-1.webp",
+    description: "مهندس ارشد نرم‌افزار",
+  },
+  secondaryDescription =
+    "ما با طراحی و توسعه محصولات دیجیتال، ایده‌ها را به راهکارهایی کاربردی، مقیاس‌پذیر و ماندگار تبدیل می‌کنیم.",
+  className,
+}: BlogPost7Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "grid min-h-lvh gap-10 p-6 md:grid-cols-2 lg:gap-20",
+        className,
+      )}
+    >
+      <div className="h-full overflow-hidden rounded-xl">
+        <img
+          src={image}
+          alt={title}
+          className="h-full w-full object-cover object-center"
+        />
+      </div>
+      <div className="grid items-center">
+        <div className="flex max-w-lg flex-col gap-10 text-start">
+          <motion.div
+            initial={{ opacity: 0, y: 60 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            viewport={{ once: true }}
+            className="text-xs text-muted-foreground xl:text-base"
+          >
+            {topNote}
+          </motion.div>
+          <motion.h1
+            initial={{ opacity: 0, y: 60 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            className="text-xl font-bold md:text-2xll"
+          >
+            {title}
+          </motion.h1>
+          <motion.div
+            initial={{ opacity: 0, y: 60 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            viewport={{ once: true }}
+            className="text-xs font-medium text-muted-foreground lg:text-base"
+          >
+            {description}
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 60 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            viewport={{ once: true }}
+            className="flex gap-4"
+          >
+            <Avatar className="size-14 border">
+              <AvatarImage src={author.image} alt={author.name} />
+            </Avatar>
+            <div>
+              <h2 className="font-semibold xl:text-lg">{author.name}</h2>
+              <p className="font-medium text-muted-foreground xl:text-lg">
+                {author.description}
+              </p>
+            </div>
+          </motion.div>
+
+          <Separator />
+          <motion.div
+            initial={{ opacity: 0, y: 60 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            viewport={{ once: true }}
+          >
+            <p className="text-3xl font-medium">{secondaryDescription}</p>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Blogpost7 };
diff --git a/blocks/book-a-demo1.tsx b/blocks/book-a-demo1.tsx
new file mode 100644
index 0000000..01eadc4
--- /dev/null
+++ b/blocks/book-a-demo1.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { motion } from "motion/react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const InfiniteMovingCarousel = ({ images }: { images: string[] }) => {
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    if (!carouselRef.current) return;
+
+    setWidth(carouselRef.current.clientWidth);
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setWidth(entry.target.clientWidth);
+        }
+      });
+    });
+    observer.observe(carouselRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        maskImage:
+          "linear-gradient(to right, transparent, black 15%, black 85%, transparent)",
+      }}
+      className={cn("w-full overflow-hidden")}
+    >
+      <motion.div
+        initial={{ x: -width }}
+        animate={{ x: -(width / 2 + 24) }}
+        transition={{
+          duration: 3 * images.length,
+          repeat: Infinity,
+          repeatType: "loop",
+          ease: "linear",
+        }}
+        ref={carouselRef}
+        className="flex w-max items-center gap-12"
+      >
+        {[...images, ...images].map((image, index) => {
+          return (
+            <img
+              key={`bookademo1-company-${index}`}
+              src={image}
+              alt={`لوگوی شرکت ${index + 1}`}
+              className="size-24 shrink-0 object-contain dark:invert"
+            />
+          );
+        })}
+      </motion.div>
+    </div>
+  );
+};
+
+const FormGroup = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex w-full flex-col gap-2">{children}</div>;
+};
+
+interface BookADemo1Props {
+  badge?: string;
+  heading?: string;
+  benefits?: string[];
+  companies?: string[];
+  className?: string;
+}
+
+const BookADemo1 = ({
+  badge = "درخواست دمو",
+  heading = "توسعه نرم‌افزار را سریع‌تر و هوشمندانه‌تر پیش ببرید",
+  benefits = [
+    "به جمع تیم‌هایی بپیوندید که با استفاده از این پلتفرم، سرعت توسعه و کیفیت محصولات خود را افزایش داده‌اند.",
+    "یک جلسه دمو متناسب با نیازهای کسب‌وکار و فرایندهای توسعه خود رزرو کنید.",
+  ],
+  companies = [
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg",
+  ],
+  className,
+}: BookADemo1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-14 lg:grid-cols-2 lg:gap-4">
+          <div className="flex flex-col items-center gap-4 lg:items-start lg:gap-8">
+            <Badge variant="outline">{badge}</Badge>
+            <h3 className="mt-2 max-w-md text-start text-3xl font-medium lg:mt-0 lg:max-w-xl lg:text-2xll">
+              {heading}
+            </h3>
+            <ul className="flex flex-col">
+              {benefits.map((benefit, index) => {
+                return (
+                  <li
+                    key={`bookademo1-benefit-${index}`}
+                    className="flex max-w-md items-start gap-2 px-4 last:hidden last:border-b-0 lg:border-b lg:py-6 last:lg:flex"
+                  >
+                    <ArrowRight
+                      className="hidden size-6 shrink-0 rtl:rotate-180 lg:block"
+                      strokeWidth={1}
+                    />
+                    <p className="text-start font-medium">
+                      {benefit}
+                    </p>
+                  </li>
+                );
+              })}
+            </ul>
+            <div className="mt-20 hidden w-full overflow-hidden lg:block">
+              <InfiniteMovingCarousel images={companies} />
+            </div>
+          </div>
+          <Card className="w-full max-w-xl place-self-center bg-muted/70 px-4 pt-10 pb-4 lg:max-w-none lg:place-self-start">
+            <form className="flex flex-col gap-10">
+              <div className="flex w-full items-center gap-4">
+                <FormGroup>
+                  <Label>نام</Label>
+                  <Input
+                    type="text"
+                    placeholder="علی"
+                    className="bg-background"
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <Label>نام خانوادگی</Label>
+                  <Input
+                    type="text"
+                    placeholder="محمدی"
+                    className="bg-background"
+                  />
+                </FormGroup>
+              </div>
+              <FormGroup>
+                <Label>ایمیل کاری</Label>
+                <Input
+                  type="email"
+                  placeholder="example@company.com"
+                  dir="rtl"
+                  className="bg-background text-start"
+                />
+              </FormGroup>
+              <FormGroup>
+                <Label>سمت شغلی</Label>
+                <Input
+                  type="text"
+                  placeholder="توسعه‌دهنده فول‌استک"
+                  className="bg-background"
+                />
+              </FormGroup>
+              <FormGroup>
+                <Label>چه پروژه یا محصولی در حال توسعه دارید؟</Label>
+                <Textarea
+                  placeholder="اهداف پروژه، فناوری‌های مورد استفاده و نیازهای خود را شرح دهید."
+                  className="bg-background"
+                />
+              </FormGroup>
+              <FormGroup>
+                <Label>از چه طریقی با ما آشنا شدید؟</Label>
+                <Select>
+                  <SelectTrigger className="w-full bg-background">
+                    <SelectValue placeholder="برای مثال: جستجوی گوگل، لینکدین یا معرفی همکار" />
+                  </SelectTrigger>
+                  <SelectContent className="w-full">
+                    <SelectItem value="github">گیت‌هاب</SelectItem>
+                    <SelectItem value="twitter">توییتر</SelectItem>
+                    <SelectItem value="blog">وبلاگ فنی</SelectItem>
+                    <SelectItem value="search">موتور جستجو</SelectItem>
+                    <SelectItem value="conference">کنفرانس فناوری</SelectItem>
+                    <SelectItem value="referral">معرفی همکار</SelectItem>
+                    <SelectItem value="other">سایر</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormGroup>
+              <Button type="submit" className="w-fit place-self-end">
+                درخواست دمو
+                                            </Button>
+            </form>
+          </Card>
+          <div className="mt-20 block w-full overflow-hidden lg:hidden">
+            <InfiniteMovingCarousel images={companies} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { BookADemo1 };
diff --git a/blocks/book-a-demo2.tsx b/blocks/book-a-demo2.tsx
new file mode 100644
index 0000000..9ee4960
--- /dev/null
+++ b/blocks/book-a-demo2.tsx
@@ -0,0 +1,503 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowLeft, ArrowRight, MousePointer2 } from "lucide-react";
+import React, { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface Avatar {
+  image: string;
+  avatarClassName: string;
+  cursorClassName: string;
+  className?: string;
+  delay?: number;
+}
+
+const BookADemo2Avatar = ({
+  image,
+  avatarClassName,
+  cursorClassName,
+  className,
+  delay,
+}: Avatar) => {
+  return (
+    <div className={cn("relative", className)}>
+      <motion.div
+        animate={{
+          x: [0, 10, 10, 0, 0],
+          y: [0, 0, -10, -10, 0],
+        }}
+        transition={{
+          duration: 10,
+          ease: "linear",
+          repeat: Infinity,
+          repeatType: "loop",
+          delay: delay ?? 0,
+        }}
+        className={cn(
+          "relative size-10 rounded-full border-2 p-[1px]",
+          avatarClassName,
+        )}
+      >
+        <MousePointer2
+          className={cn(
+            "absolute start-full bottom-full shrink-0 translate-x-2/5 translate-y-2/5 !delay-0",
+            cursorClassName,
+          )}
+          size={18}
+        />
+        <img
+          src={image}
+          alt="آواتار"
+          className="size-full rounded-full object-cover"
+        />
+      </motion.div>
+    </div>
+  );
+};
+
+interface Description {
+  text: string;
+  hyperlink: string;
+  url: string;
+}
+
+interface Header {
+  heading: string;
+  description: Description;
+  avatars: Avatar[];
+}
+
+const BookADemo2Header = ({ heading, description, avatars }: Header) => {
+  return (
+    <div className="relative flex w-full max-w-2xl flex-col items-center gap-4 text-center">
+      <h3 className="text-xl font-semibold sm:text-2xll md:text-2xll">
+        {heading}
+      </h3>
+
+      <p className="font-medium text-muted-foreground sm:text-lg md:text-xl">
+        <span>{description.text.split(description.hyperlink)[0]}</span>
+        <span className="text-foreground">
+          <a href={description.url} className="underline">
+            {description.hyperlink}
+          </a>
+        </span>
+        <span>{description.text.split(description.hyperlink)[1]}</span>
+      </p>
+
+      <div className="pointer-events-none absolute inset-0 hidden lg:block">
+        <BookADemo2Avatar
+          className="absolute bottom-full start-full"
+          {...avatars[0]}
+        />
+        <BookADemo2Avatar
+          className="absolute top-full end-full"
+          delay={1}
+          {...avatars[1]}
+        />
+      </div>
+    </div>
+  );
+};
+
+interface FormGroupProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const FormGroup = ({ children, className }: FormGroupProps) => {
+  return <div className={cn("flex flex-col gap-2", className)}>{children}</div>;
+};
+
+const BookADemo2ContactForm = () => {
+  return (
+    <div className="border-b p-8 lg:border-e lg:border-b-0">
+      <form className="grid grid-cols-2 gap-x-3 gap-y-6">
+        <FormGroup className="col-span-2 sm:col-span-1">
+          <Label>نام</Label>
+          <Input type="text" placeholder="علی" />
+        </FormGroup>
+        <FormGroup className="col-span-2 sm:col-span-1">
+          <Label>نام خانوادگی</Label>
+          <Input type="text" placeholder="محمدی" />
+        </FormGroup>
+        <FormGroup className="col-span-2">
+          <Label>ایمیل کاری</Label>
+          <Input
+            type="email"
+            placeholder="example@company.com"
+            dir="rtl"
+            className="text-start"
+          />
+        </FormGroup>
+        <FormGroup className="col-span-2 sm:col-span-1">
+          <Label>تعداد اعضای تیم</Label>
+          <Select>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="۱–۱۰ نفر" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="1-10">۱–۱۰ نفر</SelectItem>
+              <SelectItem value="11-50">۱۱–۵۰ نفر</SelectItem>
+              <SelectItem value="51-100">۵۱–۱۰۰ نفر</SelectItem>
+              <SelectItem value="101-500">۱۱–۵۰۰ نفر</SelectItem>
+              <SelectItem value="501-1000">۵۱–۱۰۰۰ نفر</SelectItem>
+            </SelectContent>
+          </Select>
+        </FormGroup>
+        <FormGroup className="col-span-2 sm:col-span-1">
+          <Label>سمت شغلی</Label>
+          <Select>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="سمت شغلی خود را انتخاب کنید" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="CEO">مدیرعامل</SelectItem>
+              <SelectItem value="CTO">مدیر فناوری</SelectItem>
+              <SelectItem value="CFO">مدیر مالی</SelectItem>
+              <SelectItem value="Other">سایر</SelectItem>
+            </SelectContent>
+          </Select>
+        </FormGroup>
+        <FormGroup className="col-span-2">
+          <Label>توضیحات</Label>
+          <Textarea
+            placeholder="درباره پروژه، چالش‌ها، نیازها و انتظارات خود از این جلسه دمو توضیح دهید."
+            className="min-h-32"
+          />
+        </FormGroup>
+        <Button type="submit" className="col-span-2 gap-2" size="lg">
+          ثبت درخواست
+                            <ArrowRight className="rtl:rotate-180" />
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+interface Author {
+  name: string;
+  designation: string;
+  profilePicture: string;
+}
+
+interface Quote {
+  fullQuote: string;
+  highlightedWords: string[];
+}
+
+interface Testimonial {
+  companyLogo: string;
+  quote: Quote;
+  author: Author;
+}
+
+interface TestimonialsProps {
+  testimonials: Testimonial[];
+}
+
+const BookADemo2Testimonials = ({ testimonials }: TestimonialsProps) => {
+  const [activeTestimonial, setActiveTestimonial] = useState(0);
+
+  return (
+    <div className="relative flex h-full p-8">
+      <div className="absolute top-8 end-8 flex items-center gap-2">
+        <Button
+          size="sm"
+          aria-label="نظر قبلی"
+          onClick={() =>
+            setActiveTestimonial(
+              (activeTestimonial + testimonials.length - 1) %
+                testimonials.length,
+            )
+          }
+        >
+          <ArrowLeft className="rtl:rotate-180" />
+        </Button>
+        <Button
+          size="sm"
+          aria-label="نظر بعدی"
+          onClick={() =>
+            setActiveTestimonial((activeTestimonial + 1) % testimonials.length)
+          }
+        >
+          <ArrowRight className="rtl:rotate-180" />
+        </Button>
+      </div>
+
+      <AnimatePresence mode="wait">
+        {testimonials.map((testimonial, index) => {
+          if (index !== activeTestimonial) return null;
+
+          return (
+            <motion.div
+              initial={{
+                opacity: 0,
+              }}
+              animate={{
+                opacity: 1,
+              }}
+              exit={{
+                opacity: 0,
+              }}
+              transition={{
+                duration: 0.3,
+                ease: "easeInOut",
+              }}
+              key={`testimonial-${index}`}
+              className="flex h-full flex-col justify-between gap-12"
+            >
+              <div className="flex items-center gap-3">
+                <img
+                  src={testimonial.companyLogo}
+                  alt={`لوگوی شرکت ${testimonial.author.name}`}
+                  className="h-6 w-auto object-contain md:h-8 dark:invert"
+                />
+              </div>
+
+              <div className="space-y-6">
+                <blockquote className="leading-snug text-muted-foreground sm:text-lg lg:max-w-md">
+                  &quot;
+                  {testimonial.quote.fullQuote
+                    .split(" ")
+                    .map((word, wordIndex) => {
+                      const isHighlighted =
+                        testimonial.quote.highlightedWords.some((highlighted) =>
+                          word
+                            .toLowerCase()
+                            .includes(highlighted.toLowerCase()),
+                        );
+                      return (
+                        <span
+                          key={wordIndex}
+                          className={
+                            isHighlighted ? "font-medium text-foreground" : ""
+                          }
+                        >
+                          {word}{" "}
+                        </span>
+                      );
+                    })}
+                  &quot;
+                </blockquote>
+
+                <div className="flex items-center gap-3">
+                  <img
+                    src={testimonial.author.profilePicture}
+                    alt={testimonial.author.name}
+                    className="size-9 rounded-full object-cover"
+                  />
+                  <div>
+                    <div className="text-sm font-medium">
+                      {testimonial.author.name}
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      {testimonial.author.designation}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          );
+        })}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+interface Footer {
+  heading: string;
+  logos: string[];
+}
+
+const BookADemo2Footer = ({ heading, logos }: Footer) => {
+  return (
+    <div className="flex w-full max-w-6xl flex-col items-center gap-14 text-center">
+      <h3 className="text-sm font-medium text-muted-foreground">{heading}</h3>
+      <div className="flex w-full flex-wrap items-center justify-center gap-10 md:grid md:grid-cols-5">
+        {logos.map((logo, index) => {
+          return (
+            <img
+              key={`bookademo2-footer-logo-${index}`}
+              src={logo}
+              alt={`لوگوی شرکت ${index + 1}`}
+              className={cn(
+                "h-6 place-self-center object-contain md:h-8 dark:invert",
+                index > 5 && "hidden md:block",
+              )}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+interface BookADemo2Props {
+  className?: string;
+  header: Header;
+  testimonials: Testimonial[];
+  footer: Footer;
+}
+
+const BookADemo2 = ({
+  header = {
+    heading: "درخواست دمو",
+    description: {
+      text: "برای آشنایی با قابلیت‌های پلتفرم، مشاهده سناریوهای واقعی و دریافت مشاوره تخصصی، درخواست دمو ثبت کنید. کارشناسان ما در کوتاه‌ترین زمان با شما تماس خواهند گرفت.",
+      hyperlink: "با تیم ما در تماس باشید",
+      url: "https://ShadcnBlocks",
+    },
+    avatars: [
+      {
+        image:
+          "/block-media/shadcnblocks/block/portraits/christian-buehner-DItYlc26zVI-unsplash 1.jpg",
+        avatarClassName: "border-orange-500",
+        cursorClassName: "text-orange-500 fill-orange-500",
+      },
+      {
+        image:
+          "/block-media/shadcnblocks/block/portraits/christian-buehner-DItYlc26zVI-unsplash 1.jpg",
+        avatarClassName: "border-blue-500",
+        cursorClassName: "text-blue-500 fill-blue-500",
+      },
+    ],
+  },
+  testimonials = [
+    {
+      companyLogo:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      quote: {
+        fullQuote:
+          "این پلتفرم گردش کار توسعه ما را متحول کرده است. افزایش بهره‌وری فوق‌العاده بوده است.",
+        highlightedWords: ["متحول", "بهره‌وری", "فوق‌العاده"],
+      },
+      author: {
+        name: "علی رضایی",
+        designation: "توسعه‌دهنده ارشد",
+        profilePicture:
+          "/block-media/shadcnblocks/block/portraits/alexander-hipp-iEEBWgY_6lA-unsplash.jpg",
+      },
+    },
+    {
+      companyLogo:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      quote: {
+        fullQuote:
+          "یکپارچه‌سازی بی‌دردسر بود و تیم ما در چند دقیقه آماده شد. برای استارتاپ ما یک تغییردهنده بازی بود.",
+        highlightedWords: ["بی‌دردسر", "دقیقه", "تغییردهنده"],
+      },
+      author: {
+        name: "محمد حسینی",
+        designation: "مدیر فناوری",
+        profilePicture:
+          "/block-media/shadcnblocks/block/portraits/christian-buehner-DItYlc26zVI-unsplash 1.jpg",
+      },
+    },
+    {
+      companyLogo:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      quote: {
+        fullQuote:
+          "از زمان استفاده از این راه‌حل، زمان توسعه را ۴۰٪ کاهش داده‌ایم. به‌شدت توصیه می‌کنم.",
+        highlightedWords: ["کاهش", "۴۰٪", "توصیه"],
+      },
+      author: {
+        name: "سارا احمدی",
+        designation: "مدیر مهندسی",
+        profilePicture:
+          "/block-media/shadcnblocks/block/portraits/good-faces-xmSWVeGEnJw-unsplash.jpg",
+      },
+    },
+    {
+      companyLogo:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      quote: {
+        fullQuote:
+          "تجربه توسعه‌دهنده فوق‌العاده است. پذیرش توسط تیم آنی بود و منحنی یادگیری بسیار کوتاه.",
+        highlightedWords: ["فوق‌العاده", "آنی", "کوتاه"],
+      },
+      author: {
+        name: "داوود کریمی",
+        designation: "توسعه‌دهنده ارشد",
+        profilePicture:
+          "/block-media/shadcnblocks/block/portraits/joseph-gonzalez-iFgRcqHznqg-unsplash.jpg",
+      },
+    },
+    {
+      companyLogo:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      quote: {
+        fullQuote:
+          "از زمان مهاجرت به این پلتفرم، فرکانس استقرار را ۶۰٪ بهبود داده‌ایم. واقعاً تحول‌آفرین است.",
+        highlightedWords: ["۶۰٪", "بهبود", "تحول‌آفرین"],
+      },
+      author: {
+        name: "مریم محمدی",
+        designation: "مهندس DevOps",
+        profilePicture:
+          "/block-media/shadcnblocks/block/portraits/good-faces-xmSWVeGEnJw-unsplash.jpg",
+      },
+    },
+    {
+      companyLogo:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      quote: {
+        fullQuote:
+          "قابلیت‌های همکاری نحوه کار تیم دورکار ما را متحول کرده است. انگار کل تیم در یک اتاق حضور دارند.",
+        highlightedWords: ["همکاری", "متحول", "اتاق"],
+      },
+      author: {
+        name: "امیر نوری",
+        designation: "مدیر محصول",
+        profilePicture:
+          "/block-media/shadcnblocks/block/portraits/nima-motaghian-nejad-_omdf_EgRUo-unsplash.jpg",
+      },
+    },
+  ],
+  footer = {
+    heading: "انتخاب تیم‌های توسعه نرم‌افزار در سراسر جهان",
+    logos: [
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-9.svg",
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-10.svg",
+    ],
+  },
+  className,
+}: BookADemo2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-12 lg:gap-24">
+          <BookADemo2Header {...header} />
+          <div className="grid max-w-6xl grid-cols-1 rounded-lg border lg:grid-cols-2">
+            <BookADemo2ContactForm />
+            <BookADemo2Testimonials testimonials={testimonials} />
+          </div>
+          <BookADemo2Footer {...footer} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { BookADemo2 };
diff --git a/blocks/book-a-demo3.tsx b/blocks/book-a-demo3.tsx
new file mode 100644
index 0000000..4ee8f1e
--- /dev/null
+++ b/blocks/book-a-demo3.tsx
@@ -0,0 +1,233 @@
+import { Square } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface TestimonialProps {
+  comment: string;
+  name: string;
+  designation: string;
+  image: string;
+  className?: string;
+}
+
+const Testimonial = ({
+  comment,
+  name,
+  designation,
+  image,
+  className,
+}: TestimonialProps) => {
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      <p className="text-base font-light text-muted-foreground md:text-lg">
+        {comment}
+      </p>
+      <div className="flex items-center gap-2">
+        <img src={image} alt={name} className="size-10 rounded" />
+        <div className="flex flex-col">
+          <p className="text-sm md:text-base">{name}</p>
+          <p className="text-sm font-light text-muted-foreground md:text-base">
+            {designation}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const FormGroup = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex flex-col gap-2">{children}</div>;
+};
+
+interface BookADemo3Props {
+  badge?: string;
+  heading?: string;
+  description?: string;
+  testimonial?: TestimonialProps;
+  poweredBy?: string;
+  className?: string;
+}
+
+const BookADemo3 = ({
+  badge = "درخواست دمو",
+  heading = "دموی ری یو آی را از نزدیک تجربه کنید",
+  description =
+    "در یک جلسه دمو، قابلیت‌های ری یو آی را متناسب با نیازهای تیم خود بررسی کنید و ببینید چگونه می‌تواند فرایند توسعه، استقرار و همکاری را بهبود دهد.",
+  testimonial = {
+    comment:
+      "«DevFlow فرآیند توسعه ما را متحول کرد. خطوط CI/CD خودکار و قابلیت‌های همکاری بلادرنگ، بهره‌وری تیم ما را ۴۰٪ افزایش داده است.»",
+    name: "علی رضایی",
+    designation: "توسعه‌دهنده ارشد در TechStart",
+    image:
+      "/block-media/shadcnblocks/block/portraits/alexander-hipp-iEEBWgY_6lA-unsplash.jpg",
+  },
+  poweredBy = "DevFlow",
+  className,
+}: BookADemo3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:gap-10">
+          <div className="flex max-w-lg flex-col gap-5">
+            <div className="flex w-fit items-center gap-1.5 border-b border-dashed pb-2 text-xs md:text-sm">
+              <Square fill="currentColor" size={7} className="opacity-60" />
+
+              <p className="opacity-60">{badge}</p>
+            </div>
+            <h3 className="text-3xl font-medium md:text-xl">{heading}</h3>
+            <p className="text-base font-light md:text-lg">{description}</p>
+            <div className="my-4 h-1 max-w-32 border-b border-dashed" />
+            <Testimonial {...testimonial} />
+          </div>
+          <Card className="relative overflow-hidden bg-muted/70 px-6">
+            <div className="absolute top-5 -end-15 flex w-50 rotate-45 flex-col items-center justify-center bg-foreground py-1 text-background shadow-lg">
+              <span className="text-xs font-light">مورد اعتماد</span>
+              <span className="text-xs sm:text-sm">{poweredBy}</span>
+            </div>
+            <form className="flex flex-col gap-8">
+              <FormGroup>
+                <Label>نام</Label>
+                <Input
+                  type="text"
+                  placeholder="علی محمدی"
+                  className="bg-background"
+                />
+              </FormGroup>
+              <FormGroup>
+                <Label>ایمیل کاری</Label>
+                <Input
+                  type="email"
+                  placeholder="example@company.com"
+                  dir="rtl"
+                  className="bg-background text-start"
+                />
+              </FormGroup>
+              <FormGroup>
+                <Label>کشور محل فعالیت</Label>
+                <Select>
+                  <SelectTrigger className="w-full bg-background">
+                    <SelectValue placeholder="یک گزینه را انتخاب کنید" />
+                  </SelectTrigger>
+                  <SelectContent className="w-full">
+                    <SelectItem value="ir">ایران</SelectItem>
+                    <SelectItem value="us">ایالات متحده</SelectItem>
+                    <SelectItem value="ca">کانادا</SelectItem>
+                    <SelectItem value="uk">بریتانیا</SelectItem>
+                    <SelectItem value="de">آلمان</SelectItem>
+                    <SelectItem value="fr">فرانسه</SelectItem>
+                    <SelectItem value="es">اسپانیا</SelectItem>
+                    <SelectItem value="it">ایتالیا</SelectItem>
+                    <SelectItem value="nl">هلند</SelectItem>
+                    <SelectItem value="se">سوئد</SelectItem>
+                    <SelectItem value="no">نروژ</SelectItem>
+                    <SelectItem value="dk">دانمارک</SelectItem>
+                    <SelectItem value="fi">فنلاند</SelectItem>
+                    <SelectItem value="ch">سوئیس</SelectItem>
+                    <SelectItem value="at">اتریش</SelectItem>
+                    <SelectItem value="be">بلژیک</SelectItem>
+                    <SelectItem value="ie">ایرلند</SelectItem>
+                    <SelectItem value="pt">پرتغال</SelectItem>
+                    <SelectItem value="pl">لهستان</SelectItem>
+                    <SelectItem value="cz">جمهوری چک</SelectItem>
+                    <SelectItem value="hu">مجارستان</SelectItem>
+                    <SelectItem value="au">استرالیا</SelectItem>
+                    <SelectItem value="nz">نیوزیلند</SelectItem>
+                    <SelectItem value="jp">ژاپن</SelectItem>
+                    <SelectItem value="kr">کره جنوبی</SelectItem>
+                    <SelectItem value="sg">سنگاپور</SelectItem>
+                    <SelectItem value="hk">هنگ‌کنگ</SelectItem>
+                    <SelectItem value="in">هند</SelectItem>
+                    <SelectItem value="cn">چین</SelectItem>
+                    <SelectItem value="br">برزیل</SelectItem>
+                    <SelectItem value="mx">مکزیک</SelectItem>
+                    <SelectItem value="ar">آرژانتین</SelectItem>
+                    <SelectItem value="cl">شیلی</SelectItem>
+                    <SelectItem value="co">کلمبیا</SelectItem>
+                    <SelectItem value="pe">پرو</SelectItem>
+                    <SelectItem value="za">آفریقای جنوبی</SelectItem>
+                    <SelectItem value="ng">نیجریه</SelectItem>
+                    <SelectItem value="ke">کنیا</SelectItem>
+                    <SelectItem value="eg">مصر</SelectItem>
+                    <SelectItem value="ma">مراکش</SelectItem>
+                    <SelectItem value="il">اسرائیل</SelectItem>
+                    <SelectItem value="ae">امارات متحده عربی</SelectItem>
+                    <SelectItem value="sa">عربستان سعودی</SelectItem>
+                    <SelectItem value="tr">ترکیه</SelectItem>
+                    <SelectItem value="ru">روسیه</SelectItem>
+                    <SelectItem value="ua">اوکراین</SelectItem>
+                    <SelectItem value="other">سایر</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormGroup>
+              <FormGroup>
+                <Label>در حال حاضر از چه راهکار استقرار خودکار استفاده می‌کنید؟</Label>
+                <Select>
+                  <SelectTrigger className="w-full bg-background">
+                    <SelectValue placeholder="یک گزینه را انتخاب کنید" />
+                  </SelectTrigger>
+                  <SelectContent className="w-full">
+                    <SelectItem value="no-ci-cd">
+                      هنوز خط استقرار خودکار نداریم
+                    </SelectItem>
+                    <SelectItem value="manual-deployment">
+                      استقرار دستی
+                    </SelectItem>
+                    <SelectItem value="github-actions">
+                      استقرار خودکار
+                    </SelectItem>
+                    <SelectItem value="jenkins">سرور اختصاصی</SelectItem>
+                    <SelectItem value="custom-ci-cd">
+                      خط استقرار خودکار سفارشی
+                    </SelectItem>
+                    <SelectItem value="gitlab-ci">استقرار یکپارچه</SelectItem>
+                    <SelectItem value="other">سایر</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormGroup>
+              <FormGroup>
+                <Label>بزرگ‌ترین چالش تیم شما چیست؟</Label>
+                <Textarea
+                  placeholder="درباره فرایند توسعه، چالش‌های فعلی و انتظارات خود از ری یو آی توضیح دهید."
+                  className="bg-background"
+                />
+              </FormGroup>
+              <FormGroup>
+                <Label>از چه طریقی با ری یو آی آشنا شدید؟</Label>
+                <Select>
+                  <SelectTrigger className="w-full bg-background">
+                    <SelectValue placeholder="یک گزینه را انتخاب کنید" />
+                  </SelectTrigger>
+                  <SelectContent className="w-full">
+                    <SelectItem value="linkedin">شبکه حرفه‌ای</SelectItem>
+                    <SelectItem value="events-and-webinars">
+                      رویدادها و وبینارها
+                    </SelectItem>
+                    <SelectItem value="referral">معرفی همکار یا مشتری</SelectItem>
+                    <SelectItem value="search-engine">موتور جستجو</SelectItem>
+                    <SelectItem value="other">سایر</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormGroup>
+              <Button type="submit">درخواست دمو</Button>
+            </form>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { BookADemo3 };
diff --git a/blocks/careers1.tsx b/blocks/careers1.tsx
new file mode 100644
index 0000000..edb5d36
--- /dev/null
+++ b/blocks/careers1.tsx
@@ -0,0 +1,97 @@
+import { ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Role {
+  title: string;
+  location: string;
+  href: string;
+}
+
+interface Department {
+  title: string;
+  roles: Role[];
+  className?: string;
+}
+
+interface Careers1Props {
+  title?: string;
+  description?: string;
+  departments?: Department[];
+  className?: string;
+}
+
+const defaultDepartments: Department[] = [
+  {
+    title: "فروش",
+    roles: [
+      {
+        title: "مدیر فروش",
+        location: "تهران",
+        href: "#",
+      },
+      {
+        title: "نماینده توسعه فروش",
+        location: "تهران",
+        href: "#",
+      },
+      {
+        title: "مدیر فروش",
+        location: "تهران",
+        href: "#",
+      },
+    ],
+  },
+  {
+    title: "موفقیت مشتری",
+    roles: [
+      {
+        title: "کارشناس موفقیت مشتری",
+        location: "تهران",
+        href: "#",
+      },
+    ],
+  },
+];
+
+const Careers1 = ({
+  title = "فرصت‌های شغلی",
+  description = "موقعیت‌های شغلی باز ما را ببینید.",
+  departments = defaultDepartments,
+  className,
+}: Careers1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <h2 className="text-xl font-medium md:text-2xll">{title}</h2>
+        <p className="mt-6 whitespace-pre-wrap text-muted-foreground md:mb-20 md:text-lg">
+          {description}
+        </p>
+        {departments.map((department) => (
+          <div key={department.title} className="mt-12 md:mt-20">
+            <h3 className="mb-8 text-3xl font-medium md:text-xl">
+              {department.title}
+            </h3>
+            <ul className="divide-y divide-border border-y border-border">
+              {department.roles.map((role, index) => (
+                <li key={index} className="group">
+                  <a href={role.href} className="flex items-center py-6">
+                    <div>
+                      <div className="font-medium md:text-lg">{role.title}</div>
+                      <div className="text-xs text-muted-foreground md:mt-2 md:text-sm">
+                        {role.location}
+                      </div>
+                    </div>
+                    <ArrowRight className="ms-auto size-6 translate-x-6 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100 rtl:-translate-x-6 rtl:rotate-180 rtl:group-hover:translate-x-0" />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Careers1 };
diff --git a/blocks/careers2.tsx b/blocks/careers2.tsx
new file mode 100644
index 0000000..39c8760
--- /dev/null
+++ b/blocks/careers2.tsx
@@ -0,0 +1,83 @@
+import { ArrowRight, Clock, MapPin, Target } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const jobs = [
+  {
+    title: "مهندس ارشد نرم‌افزار",
+    location: "دورکاری",
+    city: "تهران",
+    type: "تمام‌وقت",
+    link: "#",
+  },
+  {
+    title: "مدیر محصول",
+    location: "دورکاری",
+    city: "اصفهان",
+    type: "تمام‌وقت",
+    link: "#",
+  },
+];
+
+interface Careers2Props {
+  className?: string;
+}
+
+const Careers2 = ({ className }: Careers2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container px-1">
+        <div className="border-x border-dashed">
+          <div className="relative flex flex-col gap-6 border-b border-dashed px-4 pt-10 pb-10 sm:items-center md:pb-20">
+            <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-[size:64px_64px]"></div>
+            <Badge variant="outline" className="w-fit">
+              فرصت‌های شغلی
+            </Badge>
+            <h1 className="text-xl font-bold md:text-xl">موقعیت‌های شغلی باز</h1>
+            <p className="text-muted-foreground">
+              موقعیت مناسب خود را پیدا نکردید؟
+              <a href="#" className="ms-1 underline">
+                با ما تماس بگیرید.
+              </a>
+            </p>
+          </div>
+          <div>
+            {jobs.map((job) => (
+              <div
+                key={job.title}
+                className="grid items-center gap-6 border-b border-dashed px-6 py-10 lg:grid-cols-4"
+              >
+                <h2 className="text-lg">{job.title}</h2>
+                <div className="col-span-2 flex flex-col gap-4 text-sm text-muted-foreground sm:flex-row sm:gap-8 lg:justify-center">
+                  <div className="flex gap-2">
+                    <Clock className="h-auto w-4" />
+                    {job.type}
+                  </div>
+                  <div className="flex gap-2">
+                    <MapPin className="h-auto w-4" />
+                    {job.city}
+                  </div>
+                  <div className="flex gap-2">
+                    <Target className="h-auto w-4" />
+                    {job.location}
+                  </div>
+                </div>
+                <a
+                  href={job.link}
+                  className={cn(buttonVariants(), "w-fit gap-1 lg:ms-auto")}
+                >
+                  ارسال درخواست
+                  <ArrowRight className="h-auto w-4 rtl:rotate-180" />
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Careers2 };
diff --git a/blocks/careers3.tsx b/blocks/careers3.tsx
new file mode 100644
index 0000000..789a0be
--- /dev/null
+++ b/blocks/careers3.tsx
@@ -0,0 +1,106 @@
+import { ArrowRight, MapPin } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const jobs = [
+  {
+    category: "مهندسی",
+    openings: [
+      {
+        title: "مهندس ارشد نرم‌افزار",
+        description:
+          "مسئول توسعه محصولات نرم‌افزاری جدید و موجود خواهید بود.",
+        location: "دفتر تهران یا دورکاری",
+        link: "#",
+      },
+      {
+        title: "مدیر محصول",
+        description: "به ما در ساخت نسل بعدی محصولات کمک کنید.",
+        location: "دفتر اصفهان یا دورکاری",
+        link: "#",
+      },
+      {
+        title: "مهندس تضمین کیفیت",
+        description:
+          "کیفیت محصولات نرم‌افزاری ما را از طریق تست و خودکارسازی تضمین کنید.",
+        location: "دفتر شیراز یا دورکاری",
+        link: "#",
+      },
+      {
+        title: "کارشناس پشتیبانی فنی",
+        description:
+          "پشتیبانی فنی به مشتریان و تیم‌های داخلی ارائه دهید.",
+        location: "دفتر مشهد یا دورکاری",
+        link: "#",
+      },
+    ],
+  },
+  {
+    category: "بازاریابی",
+    openings: [
+      {
+        title: "نویسنده محتوا",
+        description:
+          "محتوای جذاب برای وبلاگ، وب‌سایت و شبکه‌های اجتماعی تولید کنید.",
+        location: "تبریز",
+        link: "#",
+      },
+      {
+        title: "مدیر شبکه‌های اجتماعی",
+        description:
+          "حضور ما در شبکه‌های اجتماعی را مدیریت کنید و با مخاطبان در تعامل باشید.",
+        location: "کرمان",
+        link: "#",
+      },
+    ],
+  },
+];
+
+interface Careers3Props {
+  className?: string;
+}
+
+const Careers3 = ({ className }: Careers3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-5xl">
+          <h1 className="text-3xl font-bold md:text-2xll">موقعیت‌های شغلی باز</h1>
+          <div className="mx-auto mt-14 flex flex-col gap-16">
+            {jobs.map((jobCategory) => (
+              <div key={jobCategory.category}>
+                <Badge>{jobCategory.category}</Badge>
+                <div>
+                  {jobCategory.openings.map((job) => (
+                    <a
+                      href={job.link}
+                      key={job.title}
+                      className="group block border-b py-7"
+                    >
+                      <h3 className="text-xl font-semibold group-hover:underline">
+                        {job.title}
+                      </h3>
+                      <p className="mt-1 font-medium text-muted-foreground">
+                        {job.description}
+                      </p>
+                      <div className="mt-4 flex justify-between gap-4 text-muted-foreground">
+                        <div className="flex gap-2 text-sm md:text-base">
+                          <MapPin className="h-auto w-4 shrink-0" />
+                          <p>{job.location}</p>
+                        </div>
+                        <ArrowRight className="h-auto w-4 rtl:rotate-180" />
+                      </div>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Careers3 };
diff --git a/blocks/careers4.tsx b/blocks/careers4.tsx
new file mode 100644
index 0000000..f662a0f
--- /dev/null
+++ b/blocks/careers4.tsx
@@ -0,0 +1,106 @@
+import { ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface JobOpening {
+  title: string;
+  location: string;
+  url: string;
+}
+
+interface JobCategory {
+  category: string;
+  openings: JobOpening[];
+}
+
+interface Careers4Props {
+  heading?: string;
+  jobs?: JobCategory[];
+  className?: string;
+}
+
+const defaultJobs: JobCategory[] = [
+  {
+    category: "مهندسی",
+    openings: [
+      {
+        title: "توسعه‌دهنده ارشد فرانت‌اند",
+        location: "دورکاری",
+        url: "#",
+      },
+      {
+        title: "طراح رابط و تجربه کاربری",
+        location: "تهران",
+        url: "#",
+      },
+      {
+        title: "سازنده محصول رابط کاربری",
+        location: "دورکاری",
+        url: "#",
+      },
+      {
+        title: "سرپرست فنی",
+        location: "اصفهان",
+        url: "#",
+      },
+    ],
+  },
+  {
+    category: "طراحی",
+    openings: [
+      {
+        title: "طراح محصول",
+        location: "دورکاری",
+        url: "#",
+      },
+      {
+        title: "طراح بصری",
+        location: "شیراز",
+        url: "#",
+      },
+    ],
+  },
+];
+
+const Careers4 = ({
+  heading = "فرصت‌های شغلی",
+  jobs = defaultJobs,
+  className,
+}: Careers4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto">
+        <h2 className="text-3xl font-medium md:text-xl">{heading}</h2>
+        <div className="mt-6 flex flex-col gap-16 md:mt-14">
+          {jobs.map((jobCategory) => (
+            <div key={jobCategory.category} className="grid">
+              <h2 className="border-b pb-4 text-xl font-bold">
+                {jobCategory.category}
+              </h2>
+              {jobCategory.openings.map((job) => (
+                <div
+                  key={job.title}
+                  className="flex items-center justify-between border-b py-4"
+                >
+                  <div>
+                    <a href={job.url} className="font-semibold hover:underline">
+                      {job.title}
+                    </a>
+                    <p className="text-sm text-muted-foreground">
+                      {job.location}
+                    </p>
+                  </div>
+                  <a href={job.url} className="hover:text-muted-foreground">
+                    <ArrowRight className="size-4 rtl:rotate-180" />
+                  </a>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Careers4 };
diff --git a/blocks/careers5.tsx b/blocks/careers5.tsx
new file mode 100644
index 0000000..5b9d58d
--- /dev/null
+++ b/blocks/careers5.tsx
@@ -0,0 +1,109 @@
+import { Map } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const jobs = [
+  {
+    title: "مهندس ارشد نرم‌افزار",
+    category: "مهندسی",
+    description:
+      "مسئول توسعه محصولات نرم‌افزاری جدید و موجود خواهید بود.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۱۲۰ تا ۱۸۰ میلیون تومان",
+    link: "#",
+  },
+  {
+    title: "مدیر محصول",
+    category: "مهندسی",
+    description: "به ما در ساخت نسل بعدی محصولات کمک کنید.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۱۰۰ تا ۱۵۰ میلیون تومان",
+    link: "#",
+  },
+  {
+    title: "مهندس تضمین کیفیت",
+    category: "مهندسی",
+    description:
+      "کیفیت محصولات نرم‌افزاری ما را از طریق تست و خودکارسازی تضمین کنید.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۸۰ تا ۱۲۰ میلیون تومان",
+    link: "#",
+  },
+  {
+    title: "کارشناس پشتیبانی فنی",
+    category: "مهندسی",
+    description:
+      "پشتیبانی فنی به مشتریان و تیم‌های داخلی ارائه دهید.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۶۰ تا ۹۰ میلیون تومان",
+    link: "#",
+  },
+  {
+    title: "نویسنده محتوا",
+    category: "بازاریابی",
+    description:
+      "محتوای جذاب برای وبلاگ، وب‌سایت و شبکه‌های اجتماعی تولید کنید.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۵۰ تا ۸۰ میلیون تومان",
+    link: "#",
+  },
+  {
+    title: "مدیر شبکه‌های اجتماعی",
+    category: "بازاریابی",
+    description:
+      "حضور ما در شبکه‌های اجتماعی را مدیریت کنید و با مخاطبان در تعامل باشید.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۴۵ تا ۷۵ میلیون تومان",
+    link: "#",
+  },
+];
+
+interface Careers5Props {
+  className?: string;
+}
+
+const Careers5 = ({ className }: Careers5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-5xl">
+          <div className="mb-12 text-center">
+            <h1 className="mb-3 text-xl font-semibold">فرصت‌های شغلی</h1>
+          </div>
+          <div>
+            {jobs.map((job) => (
+              <div key={job.title} className="border-t py-6">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                  <div>
+                    <a
+                      href={job.link}
+                      className="mb-1 text-lg font-semibold hover:underline"
+                    >
+                      {job.title}
+                    </a>
+                    <p className="text-muted-foreground">{job.description}</p>
+                  </div>
+                  <div className="flex gap-4 text-sm text-muted-foreground">
+                    <div className="flex gap-2">
+                      <Map className="h-auto w-4" />
+                      {job.location}
+                    </div>
+                    <div className="flex gap-2">{job.salary}</div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Careers5 };
diff --git a/blocks/careers6.tsx b/blocks/careers6.tsx
new file mode 100644
index 0000000..8d4f7c2
--- /dev/null
+++ b/blocks/careers6.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import {
+  Award,
+  Building2,
+  Clock,
+  DollarSign,
+  Globe,
+  GraduationCap,
+  Map,
+  Users,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const jobs = [
+  {
+    id: 1,
+    title: "مهندس ارشد نرم‌افزار",
+    category: "مهندسی",
+    department: "توسعه محصول",
+    description:
+      "مسئول توسعه محصولات نرم‌افزاری جدید و موجود، رهبری ابتکارات فنی و راهنمایی توسعه‌دهندگان تازه‌کار خواهید بود.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۱۲۰ تا ۱۸۰ میلیون تومان",
+    experience: "۵+ سال سابقه",
+    link: "#",
+  },
+  {
+    id: 2,
+    title: "مدیر محصول",
+    category: "محصول",
+    department: "مدیریت محصول",
+    description:
+      "با تعریف استراتژی و نقشه راه محصول و همکاری نزدیک با تیم‌های فنی، به ساخت نسل بعدی محصولات ما کمک کنید.",
+    location: "تهران",
+    type: "تمام‌وقت",
+    salary: "۱۰۰ تا ۱۵۰ میلیون تومان",
+    experience: "۳+ سال سابقه",
+    link: "#",
+  },
+  {
+    id: 3,
+    title: "مهندس تضمین کیفیت",
+    category: "مهندسی",
+    department: "تضمین کیفیت",
+    description:
+      "کیفیت محصولات نرم‌افزاری ما را از طریق تست جامع، چارچوب‌های خودکارسازی و فرآیندهای بهبود مستمر تضمین کنید.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۸۰ تا ۱۲۰ میلیون تومان",
+    experience: "۲+ سال سابقه",
+    link: "#",
+  },
+  {
+    id: 4,
+    title: "کارشناس پشتیبانی فنی",
+    category: "پشتیبانی",
+    department: "موفقیت مشتری",
+    description:
+      "پشتیبانی فنی ممتاز به مشتریان و تیم‌های داخلی ارائه دهید، مشکلات را برطرف کنید و رضایت مشتری را حفظ کنید.",
+    location: "مشهد",
+    type: "تمام‌وقت",
+    salary: "۶۰ تا ۹۰ میلیون تومان",
+    experience: "۱+ سال سابقه",
+    link: "#",
+  },
+  {
+    id: 5,
+    title: "نویسنده محتوا",
+    category: "بازاریابی",
+    department: "بازاریابی محتوا",
+    description:
+      "محتوای جذاب و بهینه‌شده برای سئو برای وبلاگ، وب‌سایت و شبکه‌های اجتماعی تولید کنید که ترافیک و تبدیل را افزایش دهد.",
+    location: "دورکاری",
+    type: "تمام‌وقت",
+    salary: "۵۰ تا ۸۰ میلیون تومان",
+    experience: "۲+ سال سابقه",
+    link: "#",
+  },
+];
+
+interface Careers6Props {
+  className?: string;
+}
+
+const Careers6 = ({ className }: Careers6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-24", className)}>
+      <div className="container px-4 md:px-6">
+        <div className="mx-auto max-w-4xl">
+          <div className="mb-16 text-center">
+            <h1 className="mb-4 text-xl font-bold tracking-tight">
+              فرصت‌های شغلی
+            </h1>
+            <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+              ما آینده فناوری را می‌سازیم. موقعیت مناسب خود را پیدا کنید و
+              همراه ما رشد کنید.
+            </p>
+            <div className="mt-8 flex flex-wrap justify-center gap-6 text-sm text-muted-foreground">
+              <div className="flex items-center gap-2">
+                <Users className="h-4 w-4 shrink-0" />
+                <span>بیش از ۱۵۰ عضو تیم</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Globe className="h-4 w-4 shrink-0" />
+                <span>اولویت با دورکاری</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Award className="h-4 w-4 shrink-0" />
+                <span>بهترین محل کار ۱۴۰۳</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-6">
+            {jobs.map((job) => (
+              <div
+                key={job.id}
+                className="group relative overflow-hidden rounded-lg border bg-card p-6"
+              >
+                <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+                  <div className="flex-1">
+                    <div className="mb-4">
+                      <div className="mb-2 flex items-center gap-3">
+                        <h3 className="text-xl font-semibold transition-colors group-hover:text-primary">
+                          <a href={job.link} className="hover:underline">
+                            {job.title}
+                          </a>
+                        </h3>
+                      </div>
+                      <p className="mb-4 text-muted-foreground">
+                        {job.description}
+                      </p>
+                      <Button asChild size="sm" variant="outline">
+                        <a href={job.link}>همین حالا درخواست دهید</a>
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-4 lg:w-72">
+                    <div className="space-y-3">
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Building2 className="h-4 w-4 shrink-0" />
+                        <span>{job.department}</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Map className="h-4 w-4 shrink-0" />
+                        <span>{job.location}</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Clock className="h-4 w-4 shrink-0" />
+                        <span>{job.type}</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <GraduationCap className="h-4 w-4 shrink-0" />
+                        <span>{job.experience}</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                        <DollarSign className="h-4 w-4 shrink-0" />
+                        <span>{job.salary}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Careers6 };
diff --git a/blocks/careers7.tsx b/blocks/careers7.tsx
new file mode 100644
index 0000000..398a9e2
--- /dev/null
+++ b/blocks/careers7.tsx
@@ -0,0 +1,59 @@
+import { Button } from "@/components/ui/button";
+
+const jobCategories = [
+  {
+    name: "مهندسی",
+    jobs: [
+      { title: "سازنده محصول موبایل اپل", location: "دورکاری" },
+      { title: "مهندس بک‌اند", location: "دورکاری" },
+      { title: "مهندس فرانت‌اند", location: "دورکاری" },
+    ],
+  },
+  {
+    name: "طراحی",
+    jobs: [
+      { title: "طراح ارشد", location: "دورکاری" },
+      { title: "طراح ستاف", location: "دورکاری" },
+      { title: "طراح", location: "دورکاری" },
+    ],
+  },
+];
+
+export const Careers7 = () => {
+  return (
+    <section dir="rtl" lang="fa" className="container max-w-5xl py-32">
+      <div className="border-t pt-5">
+        <div className="max-w-2xl">
+          <h2 className="text-xl font-semibold tracking-tight md:text-xl">
+            به ما بپیوندید
+          </h2>
+          <p className="mt-4 max-w-2xl pb-10 text-xl text-muted-foreground md:pb-12 md:text-3xl lg:pb-15">
+            از نقاط مختلف جهان، کنار هم کار می‌کنیم.
+          </p>
+
+          {jobCategories.map((category, categoryIndex) => (
+            <div key={categoryIndex}>
+              <h3 className="border-b border-foreground py-6 text-lg font-semibold">
+                {category.name}
+              </h3>
+              <div>
+                {category.jobs.map((job, jobIndex) => (
+                  <div
+                    key={`${categoryIndex}-${jobIndex}`}
+                    className="flex items-center justify-between gap-10 border-b py-3 md:gap-16 lg:gap-28"
+                  >
+                    <h4 className="flex-1 font-medium">{job.title}</h4>
+                    <p className="text-muted-foreground">{job.location}</p>
+                    <Button variant="outline" asChild>
+                      <a href="#">مشاهده جزئیات</a>
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/careers8.tsx b/blocks/careers8.tsx
new file mode 100644
index 0000000..c489780
--- /dev/null
+++ b/blocks/careers8.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { useState } from "react";
+
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+const JOBS = [
+  {
+    category: "مهندسی و توسعه",
+    openings: [
+      {
+        title: "مهندس نرم‌افزار",
+        location: "تهران | دورکاری",
+        link: "#",
+      },
+      {
+        title: "توسعه‌دهنده بک‌اند",
+        location: "تهران | دورکاری",
+        link: "#",
+      },
+    ],
+  },
+  {
+    category: "مدیریت محصول",
+    openings: [
+      {
+        title: "مدیر محصول",
+        location: "تهران",
+        link: "#",
+      },
+      {
+        title: "مالک محصول",
+        location: "تهران",
+        link: "#",
+      },
+      {
+        title: "کارشناس مدیریت داده محصول",
+        location: "تهران | دورکاری",
+        link: "#",
+      },
+      {
+        title: "دستیار مدیر محصول",
+        location: "تهران | دورکاری",
+        link: "#",
+      },
+      {
+        title: "مدیر محصول موبایل",
+        location: "تهران | دورکاری",
+        link: "#",
+      },
+      {
+        title: "مدیر محصول هوش مصنوعی",
+        location: "تهران | دورکاری",
+        link: "#",
+      },
+    ],
+  },
+  {
+    category: "طراحی و تجربه کاربری",
+    openings: [
+      {
+        title: "طراح تجربه کاربری",
+        location: "تهران",
+        link: "#",
+      },
+    ],
+  },
+  {
+    category: "فروش و بازاریابی",
+    openings: [
+      {
+        title: "کارشناس فروش",
+        location: "تهران",
+        link: "#",
+      },
+    ],
+  },
+  {
+    category: "فناوری اطلاعات و زیرساخت",
+    openings: [
+      {
+        title: "پشتیبانی فناوری اطلاعات",
+        location: "تهران",
+        link: "#",
+      },
+      {
+        title: "مدیر سیستم",
+        location: "تهران",
+        link: "#",
+      },
+      {
+        title: "مهندس شبکه",
+        location: "تهران",
+        link: "#",
+      },
+    ],
+  },
+];
+
+const options = [
+  {
+    label: "همه بخش‌ها",
+    value: "all",
+  },
+  {
+    label: "مهندسی و توسعه",
+    value: "engineering_&_development",
+  },
+  {
+    label: "مدیریت محصول",
+    value: "product_management",
+  },
+  {
+    label: "طراحی و تجربه کاربری",
+    value: "design_&_user_experience",
+  },
+  {
+    label: "فروش و بازاریابی",
+    value: "sales_&_marketing",
+  },
+  {
+    label: "فناوری اطلاعات و زیرساخت",
+    value: "IT_&_infrastructure",
+  },
+];
+
+interface Careers8Props {
+  className?: string;
+}
+
+const Careers8 = ({ className }: Careers8Props) => {
+  const [filterValue, setFilterValue] = useState(options[0].value);
+
+  const filterJobsByCategory = (category: string) => {
+    if (category === "همه بخش‌ها") return JOBS;
+    return JOBS.filter((job) => job.category === category);
+  };
+
+  const renderJobs = () => {
+    const option = options.filter((opt) => opt.value == filterValue);
+    const jobs = filterJobsByCategory(option[0].label);
+    return (
+      <>
+        {jobs.map((job, i) => (
+          <div
+            key={`job-${job.category}-${i}`}
+            className="flex w-full flex-col justify-start gap-10"
+          >
+            <div className="text-xl leading-none font-semibold">
+              {job.category}
+            </div>
+            <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+              {job.openings.map((opening) => (
+                <a
+                  key={`job-${opening.title}`}
+                  href={opening.link}
+                  className="block rounded-md bg-muted p-5 transition-colors hover:bg-foreground/10"
+                >
+                  <div className="mb-1 text-lg leading-normal font-semibold">
+                    {opening.title}
+                  </div>
+                  <div className="text-sm leading-normal text-muted-foreground">
+                    {opening.location}
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col gap-14">
+          <h2 className="text-2xll leading-[1.3] font-semibold">
+            موقعیت‌های شغلی باز
+          </h2>
+          <div className="flex flex-wrap items-center justify-start gap-5">
+            <Label
+              htmlFor="department-filter"
+              className="text-base leading-normal font-semibold text-muted-foreground"
+            >
+              فیلتر
+            </Label>
+            <Select
+              value={filterValue}
+              onValueChange={(value) => setFilterValue(value)}
+            >
+              <SelectTrigger id="department-filter" className="w-[15.625rem]">
+                <SelectValue placeholder="انتخاب دسته‌بندی" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {options.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-16">{renderJobs()}</div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Careers8 };
diff --git a/blocks/careers9.tsx b/blocks/careers9.tsx
new file mode 100644
index 0000000..bdcb98b
--- /dev/null
+++ b/blocks/careers9.tsx
@@ -0,0 +1,106 @@
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const jobs = [
+  {
+    department: "مهندسی",
+    role: "توسعه‌دهنده ارشد فول‌استک",
+    location: "دورکاری",
+    link: "#",
+  },
+  {
+    department: "محصول",
+    role: "مدیر محصول",
+    location: "ترکیبی",
+    link: "#",
+  },
+  {
+    department: "طراحی",
+    role: "طراح رابط و تجربه کاربری",
+    location: "دورکاری",
+    link: "#",
+  },
+  {
+    department: "داده",
+    role: "دانشمند داده",
+    location: "حضوری",
+    link: "#",
+  },
+  {
+    department: "بازاریابی",
+    role: "کارشناس بازاریابی رشد",
+    location: "دورکاری",
+    link: "#",
+  },
+];
+
+interface Careers9Props {
+  className?: string;
+}
+
+const Careers9 = ({ className }: Careers9Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-gradient-to-b from-background to-muted/20 py-24",
+        className,
+      )}
+    >
+      <div className="container max-w-6xl">
+        <div className="mb-16 text-center">
+          <h2 className="text-xl font-bold md:text-2xll">موقعیت‌های شغلی باز</h2>
+          <p className="mx-auto mt-4 max-w-2xl text-lg text-muted-foreground">
+            به تیم ما بپیوندید و در شکل‌دهی آینده سهیم باشید. به دنبال افراد
+            مشتاقی هستیم که برای حل مسائل پیچیده و ساخت محصولات عالی
+            هیجان‌زده باشند.
+          </p>
+        </div>
+        <div className="hidden grid-cols-1 items-center gap-1.5 py-6 text-xs sm:grid sm:grid-cols-4 sm:gap-10">
+          <span className="text-muted-foreground">بخش</span>
+          <span className="col-span-2 text-muted-foreground">نقش</span>
+          <span className="text-muted-foreground">مکان</span>
+        </div>
+        <Separator />
+        {jobs.map((job, idx) => (
+          <React.Fragment key={idx}>
+            <a
+              href={job.link}
+              className="group relative grid grid-cols-1 items-center gap-1.5 py-6 sm:grid-cols-4 sm:gap-10"
+            >
+              <Badge variant="outline">{job.department}</Badge>
+              <span className="col-span-2 text-lg font-semibold">
+                {job.role}
+              </span>
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-muted-foreground">{job.location}</span>
+                <ArrowRight className="absolute top-6 end-6 size-4.5 text-muted-foreground transition-all duration-300 group-hover:translate-x-1 group-hover:text-primary sm:static rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </div>
+            </a>
+            <Separator />
+          </React.Fragment>
+        ))}
+        <div className="mt-12 text-center">
+          <p className="mb-4 text-muted-foreground">
+            موقعیت مناسب خود را پیدا نکردید؟ همیشه به دنبال استعدادهای
+            درخشان هستیم.
+          </p>
+          <a
+            href="#contact"
+            className="inline-flex items-center gap-2 font-medium text-primary transition-colors hover:text-primary/80"
+          >
+            رزومه خود را برای ما بفرستید
+            <ArrowRight className="mt-0.5 size-4 rtl:rotate-180" />
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Careers9 };
diff --git a/blocks/case-studies1.tsx b/blocks/case-studies1.tsx
new file mode 100644
index 0000000..a7323d3
--- /dev/null
+++ b/blocks/case-studies1.tsx
@@ -0,0 +1,121 @@
+import { cn } from "@/lib/utils";
+
+interface CaseStudyCard {
+  href: string;
+  image: string;
+  imageAlt: string;
+  logo: string;
+  logoAlt: string;
+  logoClassName: string;
+  title: string;
+  featured?: boolean;
+}
+
+const CASE_STUDIES: CaseStudyCard[] = [
+  {
+    href: "#",
+    image:
+      "/block-media/external/unsplash/photo-1623496258831-091279081ac5.jpg",
+    imageAlt: "جلسه همکاری تیم در فضای کاری مدرن",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark-white.svg",
+    logoAlt: "لوگوی Vercel",
+    logoClassName: "isolate h-7 w-fit",
+    title: "ببینید چگونه راهکارهای ما رشد کسب‌وکار را متحول می‌کنند",
+    featured: true,
+  },
+  {
+    href: "#",
+    image:
+      "/block-media/external/unsplash/photo-1572733438515-8f143a854f72.jpg",
+    imageAlt: "تحلیل داده و برنامه‌ریزی استراتژیک کسب‌وکار",
+    logo: "/block-media/shadcnblocks/block/logos/react-wordmark-white.svg",
+    logoAlt: "لوگوی React",
+    logoClassName: "isolate h-9 w-fit",
+    title: "بیاموزید چگونه پلتفرم ما عملکرد کسب‌وکار را ارتقا می‌دهد",
+  },
+  {
+    href: "#",
+    image:
+      "/block-media/external/unsplash/photo-1648665336208-def77a1ec189.jpg",
+    imageAlt: "طراحی رابط کاربری و توسعه محصول دیجیتال",
+    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark-white.svg",
+    logoAlt: "لوگوی shadcn/ui",
+    logoClassName: "isolate h-8 w-fit",
+    title: "کشف کنید چگونه ابزارهای ما کسب‌وکار شما را برای آینده آماده می‌کنند",
+  },
+  {
+    href: "#",
+    image:
+      "/block-media/external/unsplash/photo-1648665336176-7cb286e77d63.jpg",
+    imageAlt: "کار تیمی در پروژه فناوری و نوآوری",
+    logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark-white.svg",
+    logoAlt: "لوگوی Tailwind CSS",
+    logoClassName: "isolate h-7 w-fit",
+    title: "بررسی کنید چگونه خدمات ما به کسب‌وکار شما سود می‌رسانند",
+  },
+  {
+    href: "#",
+    image:
+      "/block-media/external/unsplash/photo-1647418413367-5ef9301153d9.jpg",
+    imageAlt: "ارائه راهکارهای دیجیتال در محیط حرفه‌ای",
+    logo: "/block-media/shadcnblocks/block/logos/nextjs-wordmark-white.svg",
+    logoAlt: "لوگوی Next.js",
+    logoClassName: "isolate h-6 w-fit",
+    title: "ببینید چگونه محصولات ما موفقیت شما در کسب‌وکار را تقویت می‌کنند",
+    featured: true,
+  },
+  {
+    href: "#",
+    image:
+      "/block-media/external/unsplash/photo-1647517649469-ba454dc72896.jpg",
+    imageAlt: "مدیریت زیرساخت و توسعه سامانه‌های ابری",
+    logo: "/block-media/shadcnblocks/block/logos/supabase-wordmark-white.svg",
+    logoAlt: "لوگوی Supabase",
+    logoClassName: "isolate h-8 w-fit",
+    title: "بیاموزید چگونه خدمات ما موفقیت و رشد کسب‌وکار شما را ارتقا می‌دهند",
+  },
+];
+
+interface CaseStudies1Props {
+  className?: string;
+}
+
+const CaseStudies1 = ({ className }: CaseStudies1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto grid max-w-2xl gap-6 lg:max-w-5xl lg:grid-cols-2">
+          {CASE_STUDIES.map((caseStudy) => (
+            <a
+              key={caseStudy.logo}
+              href={caseStudy.href}
+              className={cn(
+                "group relative flex h-full flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-md lg:p-10",
+                caseStudy.featured
+                  ? "row-span-2 aspect-square lg:aspect-auto"
+                  : "aspect-3/2 md:aspect-2/1",
+              )}
+            >
+              <img
+                src={caseStudy.image}
+                alt={caseStudy.imageAlt}
+                className="absolute inset-0 h-full w-full rounded-2xl object-cover transition-transform duration-700 group-hover:scale-105"
+              />
+              <div className="absolute inset-0 bg-linear-to-t from-black/80 to-black/10"></div>
+              <img
+                src={caseStudy.logo}
+                alt={caseStudy.logoAlt}
+                className={caseStudy.logoClassName}
+              />
+              <h2 className="isolate max-w-sm text-start text-lg font-semibold text-white lg:text-xl lg:font-semibold">
+                {caseStudy.title}
+              </h2>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudies1 };
diff --git a/blocks/case-studies2.tsx b/blocks/case-studies2.tsx
new file mode 100644
index 0000000..ffa7f4f
--- /dev/null
+++ b/blocks/case-studies2.tsx
@@ -0,0 +1,140 @@
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface CaseStudyStat {
+  value: string;
+  label: string;
+  description: string;
+}
+
+interface CaseStudyItem {
+  image: string;
+  imageAlt: string;
+  quote: string;
+  authorName: string;
+  authorRole: string;
+  companyLogo: string;
+  companyLogoAlt: string;
+  stats: [CaseStudyStat, CaseStudyStat];
+}
+
+const CASE_STUDIES: CaseStudyItem[] = [
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "مدیر محصول در حال بررسی داشبورد تیمی",
+    quote:
+      "این ابزار بهره‌وری نحوه همکاری ما را متحول کرد. جریان کار تیم به‌شکل چشمگیری بهتر شد و زمان جلسات را نصف کردیم، در حالی که خروجی بیشتر شد.",
+    authorName: "محمد رضایی",
+    authorRole: "مدیر محصول",
+    companyLogo:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+    companyLogoAlt: "لوگوی شرکت",
+    stats: [
+      {
+        value: "۹۸٪",
+        label: "رضایت مشتریان",
+        description: "از نظرات تأییدشده",
+      },
+      {
+        value: "۳.۸x",
+        label: "بهبود بازگشت سرمایه",
+        description: "در سه‌ماهه اول",
+      },
+    ],
+  },
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "مدیر عملیات در جلسه برنامه‌ریزی تیم",
+    quote:
+      "رابط کاربری شهودی و متناسب با نیازهای ماست. با آموزش حداقلی در همه بخش‌ها اجرا کردیم و بلافاصله نتیجه گرفتیم.",
+    authorName: "سارا احمدی",
+    authorRole: "مدیر عملیات",
+    companyLogo:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+    companyLogoAlt: "لوگوی شرکت",
+    stats: [
+      {
+        value: "۴.۲x",
+        label: "کارایی تیم",
+        description: "افزایش بهره‌وری اثبات‌شده",
+      },
+      {
+        value: "۷۲٪",
+        label: "کاهش زمان انجام کار",
+        description: "در تمام پروژه‌ها",
+      },
+    ],
+  },
+];
+
+interface CaseStudies2Props {
+  className?: string;
+}
+
+const CaseStudies2 = ({ className }: CaseStudies2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-6 text-center">
+          <p className="font-medium">بیش از ۴۵۰۰ مشتری راضی</p>
+          <h2 className="text-xl font-medium md:text-2xll">
+            نتایج واقعی از کاربران واقعی
+          </h2>
+        </div>
+        <div className="mt-20">
+          {CASE_STUDIES.map((caseStudy, index) => (
+            <div key={caseStudy.authorName}>
+              {index > 0 && <Separator className="my-20" />}
+              <div className="grid gap-16 lg:grid-cols-3 xl:gap-24">
+                <div className="flex flex-col gap-10 border-border sm:flex-row lg:col-span-2 lg:border-e lg:pe-16 xl:pe-24">
+                  <img
+                    src={caseStudy.image}
+                    alt={caseStudy.imageAlt}
+                    className="aspect-29/35 h-full w-full max-w-60 rounded-2xl object-cover"
+                  />
+                  <div className="flex h-full flex-col justify-between gap-10">
+                    <q className="text-start sm:text-xl">{caseStudy.quote}</q>
+                    <div className="flex items-end gap-6">
+                      <div className="flex flex-col gap-1 text-start">
+                        <p className="text-lg font-semibold text-foreground">
+                          {caseStudy.authorName}
+                        </p>
+                        <p className="text-muted-foreground">
+                          {caseStudy.authorRole}
+                        </p>
+                      </div>
+                      <img
+                        src={caseStudy.companyLogo}
+                        alt={caseStudy.companyLogoAlt}
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex gap-10 self-center lg:flex-col">
+                  {caseStudy.stats.map((stat) => (
+                    <div
+                      key={stat.label}
+                      className="flex flex-col gap-2 text-start"
+                    >
+                      <p className="text-xl font-medium text-foreground sm:text-2xll">
+                        {stat.value}
+                      </p>
+                      <p className="font-semibold text-foreground">
+                        {stat.label}
+                      </p>
+                      <p className="text-muted-foreground">
+                        {stat.description}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudies2 };
diff --git a/blocks/case-studies3.tsx b/blocks/case-studies3.tsx
new file mode 100644
index 0000000..bcc682e
--- /dev/null
+++ b/blocks/case-studies3.tsx
@@ -0,0 +1,160 @@
+import { MoveRight } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface CaseStudyItem {
+  logo: string;
+  company: string;
+  logoAlt?: string;
+  tags: string;
+  title: string;
+  subtitle: string;
+  image: string;
+  imageAlt?: string;
+  link?: string;
+}
+
+interface CaseStudies3Props {
+  featuredCasestudy?: CaseStudyItem;
+  casestudies?: CaseStudyItem[];
+  className?: string;
+}
+
+const defaultFeaturedCasestudy: CaseStudyItem = {
+  logo: "/block-media/shadcnblocks/block/block-1.svg",
+  company: "Acme",
+  tags: "هوش مصنوعی / راهکارهای سازمانی",
+  title: "اتوماسیون جریان کار برای عصر دیجیتال.",
+  subtitle: "چگونه جریان کار خود را با هوش مصنوعی خودکار کنیم.",
+  image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  imageAlt: "نمای داشبورد اتوماسیون جریان کار",
+  link: "https://ShadcnBlocks",
+};
+
+const defaultCasestudies: CaseStudyItem[] = [
+  {
+    logo: "/block-media/shadcnblocks/block/block-2.svg",
+    company: "Super",
+    tags: "مهاجرت داده / راهکارهای نرم‌افزاری",
+    title: "مهاجرت داده را با هوش مصنوعی تقویت کنید.",
+    subtitle: "پلتفرمی برای مهاجرت داده به سمت آینده‌ای مبتنی بر داده.",
+    image: "",
+    link: "https://ShadcnBlocks",
+  },
+  {
+    logo: "/block-media/shadcnblocks/block/block-3.svg",
+    company: "Advent",
+    tags: "هوش مصنوعی / راهکارهای داده",
+    title: "هوش مصنوعی راهبردی برای کسب‌وکاری آینده‌نگر.",
+    subtitle: "تسلط بر هوش مصنوعی برای عملیات کارآمدتر.",
+    image: "",
+    link: "https://ShadcnBlocks",
+  },
+];
+
+const CaseStudyLink = () => (
+  <div className="flex items-center gap-2 font-medium">
+    مطالعه مورد
+    <MoveRight className="h-4 w-4 transition-transform duration-500 ease-out group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+  </div>
+);
+
+const CaseStudies3 = ({
+  featuredCasestudy = defaultFeaturedCasestudy,
+  casestudies = defaultCasestudies,
+  className,
+}: CaseStudies3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="border border-border">
+          <a
+            href={featuredCasestudy.link || "#"}
+            className="group grid gap-4 overflow-hidden px-6 transition-colors duration-500 ease-out hover:bg-muted/40 lg:grid-cols-2 xl:px-28"
+          >
+            <div className="flex flex-col justify-between gap-4 pt-8 text-start md:pt-16 lg:pb-16">
+              <div className="flex items-center gap-2 text-xl font-medium">
+                <img
+                  src={featuredCasestudy.logo}
+                  alt={featuredCasestudy.logoAlt ?? `لوگوی ${featuredCasestudy.company}`}
+                  className="h-9"
+                />
+                {featuredCasestudy.company}
+              </div>
+              <div>
+                <span className="text-xs text-muted-foreground sm:text-sm">
+                  {featuredCasestudy.tags}
+                </span>
+                <h2 className="mt-4 mb-5 text-xl font-semibold text-balance sm:text-3xl sm:leading-10">
+                  {featuredCasestudy.title}
+                  <span className="font-medium text-primary/50 transition-colors duration-500 ease-out group-hover:text-primary/70">
+                    {" "}
+                    {featuredCasestudy.subtitle}
+                  </span>
+                </h2>
+                <CaseStudyLink />
+              </div>
+            </div>
+            <div className="relative isolate py-16">
+              <div className="relative isolate h-full border border-border bg-background p-2">
+                <div className="h-full overflow-hidden">
+                  <img
+                    src={featuredCasestudy.image}
+                    alt={
+                      featuredCasestudy.imageAlt ??
+                      `تصویر مطالعه مورد ${featuredCasestudy.company}`
+                    }
+                    className="aspect-14/9 h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+          <div className="flex border-t border-border">
+            <div className="hidden w-28 shrink-0 bg-[radial-gradient(var(--muted-foreground)_1px,transparent_1px)] [background-size:10px_10px] opacity-15 xl:block"></div>
+            <div className="grid lg:grid-cols-2">
+              {casestudies.map((item, idx) => (
+                <a
+                  key={item.company}
+                  href={item.link || "#"}
+                  className={cn(
+                    "group flex flex-col justify-between gap-12 border-border bg-background px-6 py-8 text-start transition-colors duration-500 ease-out hover:bg-muted/40 md:py-16 lg:pb-16 xl:gap-16",
+                    idx === 0
+                      ? "xl:border-s xl:ps-8"
+                      : "border-t lg:border-t-0 lg:border-s xl:border-e xl:ps-8",
+                  )}
+                >
+                  <div className="flex items-center gap-2 text-xl font-medium">
+                    <img
+                      src={item.logo}
+                      alt={item.logoAlt ?? `لوگوی ${item.company}`}
+                      className="h-9"
+                    />
+                    {item.company}
+                  </div>
+                  <div>
+                    <span className="text-xs text-muted-foreground sm:text-sm">
+                      {item.tags}
+                    </span>
+                    <h2 className="mt-4 mb-5 text-xl font-semibold text-balance sm:text-3xl sm:leading-10">
+                      {item.title}
+                      <span className="font-medium text-primary/50 transition-colors duration-500 ease-out group-hover:text-primary/70">
+                        {" "}
+                        {item.subtitle}
+                      </span>
+                    </h2>
+                    <CaseStudyLink />
+                  </div>
+                </a>
+              ))}
+            </div>
+            <div className="hidden w-28 shrink-0 bg-[radial-gradient(var(--muted-foreground)_1px,transparent_1px)] [background-size:10px_10px] opacity-15 xl:block"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudies3 };
diff --git a/blocks/case-studies4.tsx b/blocks/case-studies4.tsx
new file mode 100644
index 0000000..fe9b203
--- /dev/null
+++ b/blocks/case-studies4.tsx
@@ -0,0 +1,114 @@
+import { ArrowRight } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const CUSTOMER_DATA = {
+  company: {
+    logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg",
+    name: "Monzo",
+  },
+  stats: [
+    {
+      number: "۴۵٪",
+      text: "بهبود در تکمیل فرآیند ورود کاربر",
+    },
+    {
+      number: "۶۱٪",
+      text: "کاهش زمان دستیابی به ارزش",
+    },
+    {
+      number: "۳ برابر",
+      text: "افزایش فعال‌سازی کاربران",
+    },
+  ],
+  author: {
+    name: "نیلوفر حسینی",
+    image: "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "مدیر فناوری، Monzo",
+  },
+  title: "چگونه جریان ورود کاربر را بهینه کردیم تا فعال‌سازی کاربران سه‌برابر شود",
+  summary:
+    "بیاموزید چگونه تجربه ورود کاربر به محصول را با ابزار داخلی خود بازطراحی کردیم و زمان دستیابی به ارزش را بیش از ۶۰٪ کاهش دادیم.",
+  link: "#",
+};
+
+interface AuthorProps {
+  image: string;
+  name: string;
+  role: string;
+}
+
+const Author = ({ image, name, role }: AuthorProps) => {
+  return (
+    <div className="flex items-center gap-2.5">
+      <Avatar className="size-10 rounded-[.5rem] border bg-background">
+        <AvatarImage src={image} alt={name} />
+        <AvatarFallback>{name}</AvatarFallback>
+      </Avatar>
+      <div className="flex flex-col gap-0.5 text-start">
+        <div className="text-sm leading-normal font-medium">{name}</div>
+        <div className="text-sm leading-normal font-medium text-muted-foreground">
+          {role}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface CaseStudies4Props {
+  className?: string;
+}
+
+const CaseStudies4 = ({ className }: CaseStudies4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col items-stretch justify-between gap-10 rounded-[.5rem] bg-muted p-10 lg:flex-row">
+          <div className="flex w-full max-w-[30rem] flex-col gap-10 rounded-[.5rem] bg-background p-5">
+            <div className="max-w-[4.875rem]">
+              <img
+                src={CUSTOMER_DATA.company.logo}
+                alt={`لوگوی ${CUSTOMER_DATA.company.name}`}
+                className="block size-full object-contain object-center"
+              />
+            </div>
+            <div className="flex w-full flex-col gap-8 sm:flex-row">
+              {CUSTOMER_DATA.stats.map((item, i) => (
+                <div
+                  className="flex flex-col gap-1 text-start"
+                  key={`stats-use-case-${i}`}
+                >
+                  <div className="text-xl font-semibold">{item.number}</div>
+                  <div className="text-sm font-medium text-muted-foreground">
+                    {item.text}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <Author {...CUSTOMER_DATA.author} />
+          </div>
+          <div className="flex max-w-[32rem] flex-col gap-5 text-start">
+            <h2 className="text-xl leading-none font-bold md:text-3xl lg:text-xl">
+              {CUSTOMER_DATA.title}
+            </h2>
+            <p className="text-base font-medium text-foreground">
+              {CUSTOMER_DATA.summary}
+            </p>
+            <div className="shrink-0">
+              <Button asChild variant="outline" size="sm">
+                <a href={CUSTOMER_DATA.link}>
+                  مشاهده مطالعه موردی
+                  <ArrowRight className="rtl:rotate-180" />
+                </a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudies4 };
diff --git a/blocks/case-studies5.tsx b/blocks/case-studies5.tsx
new file mode 100644
index 0000000..aeef879
--- /dev/null
+++ b/blocks/case-studies5.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import React, { useState } from "react";
+
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const SLIDES = [
+  {
+    name: "کاوه مرادی",
+    content:
+      "Laravel نحوه ساخت اپلیکیشن‌های وب ما را کاملاً متحول کرد. نحو زیبا، قابلیت‌های قدرتمند و مستندات عالی، توسعه را لذت‌بخش کرده است.",
+    logo: "/block-media/shadcnblocks/block/logos/laravel-wordmark.svg",
+    logoAlt: "لوگوی Laravel",
+    logoClass: "h-10 md:h-12",
+    imageAlt: "نمونه کار توسعه وب با Laravel",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/photos/fabian-centeno-njeVb6E3XB8-unsplash.jpg",
+        position: 2,
+      },
+      {
+        src: "/block-media/shadcnblocks/block/photos/israel-andrade-YI_9SivVt_s-unsplash.jpg",
+        position: 4,
+      },
+      {
+        src: "/block-media/shadcnblocks/block/photos/studio-kealaula-IVZ_XAoZF3s-unsplash.jpg",
+        position: 7,
+      },
+    ],
+  },
+  {
+    name: "مهسا نوری",
+    content:
+      "همکاری با این تیم کسب‌وکار ما را کاملاً متحول کرد. توجه به جزئیات و راهکارهای نوآورانه آن‌ها باعث شد در تنها شش ماه، درآمدمان ۴۰٪ افزایش یابد.",
+    logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
+    logoAlt: "لوگوی Tailwind CSS",
+    logoClass: "h-6 md:h-8",
+    imageAlt: "نمونه کار طراحی رابط کاربری",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg",
+        position: 1,
+      },
+      {
+        src: "/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg",
+        position: 3,
+      },
+      {
+        src: "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg",
+        position: 5,
+      },
+    ],
+  },
+  {
+    name: "امیر محمدی",
+    content:
+      "این محصول فراتر از تمام انتظارات ما بود. شهودی، قدرتمند و دقیقاً همان چیزی که برای ساده‌سازی فرآیندهایمان نیاز داشتیم. برای هر کسب‌وکاری توصیه می‌شود.",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
+    logoAlt: "لوگوی Vercel",
+    logoClass: "h-6 md:h-8",
+    imageAlt: "نمونه کار استقرار و زیرساخت ابری",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/photos/redd-f-5U_28ojjgms-unsplash.jpg",
+        position: 0,
+      },
+      {
+        src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg",
+        position: 4,
+      },
+      {
+        src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-xxa7qYObMrI-unsplash.jpg",
+        position: 7,
+      },
+    ],
+  },
+];
+
+interface CaseStudies5Props {
+  className?: string;
+}
+
+const CaseStudies5 = ({ className }: CaseStudies5Props) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+
+  React.useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+
+    const onSelect = () => {
+      setCurrentIndex(carouselApi.selectedScrollSnap());
+    };
+
+    carouselApi.on("select", onSelect);
+    return () => {
+      carouselApi.off("select", onSelect);
+    };
+  }, [carouselApi]);
+
+  const renderGrid = (
+    images: (typeof SLIDES)[0]["images"],
+    imageAlt: string,
+  ) => {
+    return (
+      <div className="grid h-full w-full grid-cols-3 grid-rows-3 gap-3 p-3">
+        {Array.from({ length: 9 }).map((_, index) => {
+          const image = images.find((img) => img.position === index);
+          const isImage = Boolean(image);
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "w-full overflow-hidden rounded-lg",
+                !isImage && "bg-muted",
+              )}
+            >
+              {isImage && image?.src && (
+                <img
+                  src={image.src}
+                  alt={imageAlt}
+                  className="aspect-square h-full w-full object-cover md:aspect-video"
+                  loading={index === 0 ? "eager" : "lazy"}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-32", className)}
+    >
+      <div className="relative container">
+        <div className="mx-auto w-full overflow-hidden rounded-lg md:border">
+          <Carousel setApi={setCarouselApi}>
+            <div className="grid grid-cols-1 md:grid-cols-2">
+              <div className="relative">
+                <CarouselContent>
+                  {SLIDES.map((testimonial, index) => (
+                    <CarouselItem key={index}>
+                      <div className="relative flex items-center justify-center overflow-hidden md:h-[500px]">
+                        {renderGrid(testimonial.images, testimonial.imageAlt)}
+                      </div>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </div>
+
+              <div className="z-2 flex h-full items-center p-4 md:p-10">
+                <div className="flex flex-col gap-y-6 md:gap-y-8">
+                  <AnimatePresence mode="wait">
+                    <motion.div
+                      key={currentIndex}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -20 }}
+                      transition={{
+                        duration: 0.4,
+                        ease: "easeOut",
+                      }}
+                      className="flex h-12 items-center gap-3"
+                    >
+                      <img
+                        src={SLIDES[currentIndex].logo}
+                        alt={SLIDES[currentIndex].logoAlt}
+                        className={SLIDES[currentIndex].logoClass}
+                      />
+                    </motion.div>
+                  </AnimatePresence>
+
+                  <AnimatePresence mode="wait">
+                    <motion.p
+                      key={currentIndex}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -20 }}
+                      transition={{
+                        duration: 0.4,
+                        ease: "easeOut",
+                        delay: 0.15,
+                      }}
+                      className="min-h-[100px] text-start leading-snug tracking-tight text-muted-foreground sm:text-xl xl:ms-8"
+                    >
+                      {SLIDES[currentIndex].content}
+                    </motion.p>
+                  </AnimatePresence>
+
+                  <div className="flex h-12 gap-4">
+                    <CarouselPrevious className="static translate-y-0 rtl:rotate-180" />
+                    <CarouselNext className="static translate-y-0 rtl:rotate-180" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudies5 };
diff --git a/blocks/case-study1.tsx b/blocks/case-study1.tsx
new file mode 100644
index 0000000..bf71be7
--- /dev/null
+++ b/blocks/case-study1.tsx
@@ -0,0 +1,205 @@
+import { GitBranch, Lightbulb } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const STATS = [
+  {
+    value: "۱۹٪",
+    label: "افزایش نرخ مشارکت کاربران",
+  },
+  {
+    value: "۲۸٪",
+    label: "رشد نرخ نگهداشت مشتریان",
+  },
+  {
+    value: "۷۲٪",
+    label: "نرخ رضایت کاربران و مشتریان",
+  },
+  {
+    value: "بیش از ۸۵٪",
+    label: "بازخورد مثبت از کاربران",
+  },
+];
+
+interface CaseStudy1Props {
+  className?: string;
+}
+
+const CaseStudy1 = ({ className }: CaseStudy1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-7xl">
+          <Breadcrumb className="mb-6 lg:mb-10">
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink href="/">خانه</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink href="#">مطالعات مورد</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>پایش هوش مصنوعی</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <div className="relative flex-col gap-10 lg:flex lg:flex-row lg:justify-between">
+            <div className="lg:max-w-[692px]">
+              <div className="max lg:col-span-2">
+                <div>
+                  <h1 className="text-start text-3xl font-extrabold text-pretty">
+                    افزایش ۱۲۵ درصدی پایداری سیستم با پایش هوش مصنوعی
+                  </h1>
+                  <p className="mt-2 text-start text-lg text-muted-foreground">
+                    یک شرکت فناوری بزرگ با چالش‌های مکرر در پایداری زیرساخت
+                    مواجه بود. با استقرار سامانه پایش مبتنی بر هوش مصنوعی، زمان
+                    تشخیص و رفع خطا به‌شکل چشمگیری کاهش یافت و پایداری سرویس
+                    متحول شد.
+                  </p>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="داشبورد پایش هوش مصنوعی و تحلیل زیرساخت"
+                    className="my-8 aspect-video w-full rounded-lg object-cover"
+                  />
+                  <div className="mb-8 grid grid-cols-2 gap-5 lg:grid-cols-4">
+                    {STATS.map((stat) => (
+                      <div
+                        key={stat.label}
+                        className="flex flex-col gap-2 text-start"
+                      >
+                        <p className="text-xl font-semibold sm:text-2xll">
+                          {stat.value}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                          {stat.label}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className="prose mb-8 max-w-full text-start lg:max-w-prose dark:prose-invert">
+                  <h2>چگونه سامانه پایش کار می‌کند</h2>
+                  <p>
+                    سامانه با جمع‌آوری داده‌های بلادرنگ از سرورها، پایگاه‌های
+                    داده و سرویس‌های ابری، الگوهای رفتاری عادی را یاد می‌گیرد.
+                    هر انحراف از این الگو به‌عنوان ناهنجاری شناسایی و به تیم
+                    عملیات گزارش می‌شود.
+                  </p>
+                  <Alert>
+                    <Lightbulb className="h-4 w-4" />
+                    <AlertTitle>نکته کلیدی</AlertTitle>
+                    <AlertDescription>
+                      الگوریتم‌های یادگیری ماشین ناهنجاری‌ها را پیش از تأثیر
+                      بر کاربران شناسایی می‌کنند و تیم عملیات را به‌موقع مطلع
+                      می‌سازند.
+                    </AlertDescription>
+                  </Alert>
+
+                  <h2>چالش‌های قبل از استقرار</h2>
+                  <p>
+                    پیش از استقرار، تیم عملیات به پایش دستی و هشدارهای پراکنده
+                    متکی بود. زمان متوسط تشخیص خطا بیش از چهار ساعت بود و هر
+                    اختلال، تجربه کاربران را به‌شکل جدی تحت تأثیر قرار می‌داد.
+                  </p>
+                  <div>
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>پایداری زیرساخت</th>
+                          <th>تجربه کاربر</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>ناپایدار</td>
+                          <td>ضعیف</td>
+                        </tr>
+                        <tr className="m-0 border-t p-0 even:bg-muted">
+                          <td>در حال بهبود</td>
+                          <td>متوسط</td>
+                        </tr>
+                        <tr className="m-0 border-t p-0 even:bg-muted">
+                          <td>پایدار</td>
+                          <td>عالی</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <p>
+                    پس از سه ماه استفاده از سامانه، میانگین زمان تشخیص خطا به
+                    کمتر از دوازده دقیقه رسید و تعداد قطعی‌های سرویس ۶۵٪ کاهش
+                    یافت.
+                  </p>
+
+                  <h2>راهکار پیاده‌سازی‌شده</h2>
+                  <p>
+                    تیم فنی پس از بررسی دقیق،{" "}
+                    <a href="#">معماری پایش چندلایه</a> را طراحی و در سراسر
+                    زیرساخت استقرار داد.
+                  </p>
+                  <blockquote>
+                    «پایش هوشمند نه یک هزینه اضافی، بلکه سرمایه‌گذاری ضروری
+                    برای هر کسب‌وکار دیجیتال است.»
+                  </blockquote>
+                  <p>
+                    سامانه بر سه سطح هشدار طراحی شد تا تیم بتواند بر اساس
+                    شدت مشکل، اولویت‌بندی دقیق انجام دهد:
+                  </p>
+                  <ul>
+                    <li>سطح ۱  انحرافات جزئی منابع: پاسخ خودکار</li>
+                    <li>سطح ۲  اختلال سرویس: اعلان فوری به تیم</li>
+                    <li>سطح ۳  خرابی بحرانی: بازیابی و مقیاس‌دهی خودکار</li>
+                  </ul>
+                  <p>
+                    نتیجه، زیرساختی مقاوم‌تر، تیم عملیات آرام‌تر و کاربرانی
+                    بود که دیگر با قطعی‌های غیرمنتظره مواجه نمی‌شدند.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="h-fit text-start lg:sticky lg:top-8 lg:max-w-80">
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
+                alt="لوگوی شرکت"
+                className="mb-8 w-36"
+              />
+              <p className="mb-1.5 text-sm font-semibold">نمای کلی</p>
+              <p className="mb-5 text-sm text-muted-foreground">
+                مشتری ما با پیاده‌سازی راهکار پایش هوشمند، عملیات کسب‌وکار خود
+                را متحول کرد؛ کارایی بهبود یافت، تجربه مشتری ارتقا پیدا کرد و
+                هزینه‌های عملیاتی در سراسر سازمان به‌طور قابل‌توجهی کاهش یافت.
+              </p>
+              <p className="mb-1.5 text-sm font-semibold">حوزه</p>
+              <p className="mb-5 text-sm text-muted-foreground">فناوری</p>
+              <p className="mb-1.5 text-sm font-semibold">راهکار</p>
+              <Button size="sm" variant="outline">
+                <GitBranch className="opacity-60" />
+                سازمانی
+              </Button>
+              <Separator className="my-5" />
+              <p className="mb-3 text-sm font-semibold">
+                می‌خواهید بیشتر بدانید؟
+              </p>
+              <Button size="sm">تماس با ما</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudy1 };
diff --git a/blocks/case-study3.tsx b/blocks/case-study3.tsx
new file mode 100644
index 0000000..60842b9
--- /dev/null
+++ b/blocks/case-study3.tsx
@@ -0,0 +1,362 @@
+"use client";
+
+import { AlignLeft, CheckCircle2, Lightbulb } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const PAGE_SECTIONS = [
+  { id: "section1", title: "ارزیابی وضع موجود" },
+  { id: "section2", title: "طراحی جریان کار جدید" },
+  { id: "section3", title: "استقرار و آموزش تیم" },
+  { id: "section4", title: "نتایج و درس‌آموخته‌ها" },
+];
+
+const OUTCOMES = [
+  "سامانه‌ای یکپارچه برای افزایش سرعت رشد کسب‌وکار",
+  "سامانه ارتباط با مشتری و فروش منعطف با قابلیت یکپارچه‌سازی با ابزارهای سازمانی",
+  "راهکاری مقیاس‌پذیر که همراه با رشد سازمان توسعه می‌یابد",
+];
+
+interface CaseStudy3Props {
+  className?: string;
+}
+
+const CaseStudy3 = ({ className }: CaseStudy3Props) => {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLElement>>({});
+
+  useEffect(() => {
+    const sections = Object.keys(sectionRefs.current);
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      observerCallback,
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1,
+      },
+    );
+
+    sections.forEach((sectionId) => {
+      const element = sectionRefs.current[sectionId];
+      if (element) {
+        observer?.observe(element);
+      }
+    });
+
+    return () => {
+      observer?.disconnect();
+      observer = null;
+    };
+  }, []);
+
+  const addSectionRef = (id: string, ref: HTMLElement | null) => {
+    if (ref) {
+      sectionRefs.current[id] = ref;
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-prose flex-col items-center justify-between gap-10 lg:max-w-none lg:flex-row">
+          <div className="text-start">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="/">خانه</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">مطالعات مورد</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>جریان کار تیم</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <h1 className="mt-10 text-2xll font-semibold text-balance lg:text-2xll">
+              چگونه یک پلتفرم یکپارچه بهره‌وری تیم‌ها را افزایش داد
+                                      </h1>
+            <div className="mt-16">
+              <p className="font-medium">مطالعه موردی</p>
+              <div className="mt-4 flex items-center gap-4">
+                <Avatar className="size-16 rounded-xl border">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-1.webp"
+                    alt="مهسا نوری"
+                  />
+                </Avatar>
+                <div className="flex flex-col">
+                  <p className="font-semibold">مهسا نوری</p>
+                  <p className="text-muted-foreground">مدیر ارشد محصول</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="داشبورد مدیریت جریان کار تیم"
+            className="max-h-[524px] w-full rounded-xl object-cover lg:w-auto"
+          />
+        </div>
+        <div className="relative mt-20 flex flex-col gap-x-6 gap-y-16 lg:flex-row">
+          <aside className="mx-auto h-fit max-w-prose text-start lg:sticky lg:top-10 lg:mx-0 lg:w-64 lg:max-w-none">
+            <img
+              src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+              alt="لوگوی ری یو آی"
+              className="h-6 dark:invert"
+            />
+            <div className="mt-6 grid grid-cols-2 gap-5 lg:grid-cols-1">
+              <div className="col-span-2 lg:col-span-1">
+                <h2 className="font-semibold">نمای کلی</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  این پلتفرم با یکپارچه‌سازی داده‌ها، خودکارسازی فرایندها و ایجاد دیدی جامع از عملکرد سازمان، تصمیم‌گیری سریع‌تر و همکاری مؤثرتر میان تیم‌ها را ممکن کرده است.
+                                                  </p>
+              </div>
+              <div>
+                <h2 className="font-semibold">حوزه</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  فناوری؛ اتوماسیون
+                </p>
+              </div>
+              <div>
+                <h2 className="font-semibold">اندازه تیم</h2>
+                <p className="mt-1 text-sm text-muted-foreground">۱۰ تا ۱۰۰ نفر</p>
+              </div>
+              <div>
+                <h2 className="font-semibold">موقعیت</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  سانفرانسیسکو، کالیفرنیا
+                </p>
+              </div>
+              <div>
+                <h2 className="font-semibold">تأسیس</h2>
+                <p className="mt-1 text-sm text-muted-foreground">۲۲۰</p>
+              </div>
+              <div>
+                <h2 className="font-semibold">سرمایه‌گذاری</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  ۲۵ میلیون دلار (سری A)
+                </p>
+              </div>
+              <div>
+                <h2 className="font-semibold">قابلیت‌های اصلی</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  داشبوردها، ابزارها، یکپارچگی اتصال هوشمند
+                </p>
+              </div>
+            </div>
+            <div className="mt-10 flex flex-col">
+              <span className="mb-2 text-sm text-muted-foreground">
+                اشتراک‌گذاری این مطلب:
+              </span>
+              <div className="flex gap-4">
+                <a
+                  href="#"
+                  aria-label="اشتراک در شبکه حرفه‌ای"
+                  className="text-muted-foreground hover:text-primary"
+                >
+                  <FaLinkedin className="size-5" />
+                </a>
+                <a
+                  href="#"
+                  aria-label="اشتراک در شبکه اجتماعی"
+                  className="text-muted-foreground hover:text-primary"
+                >
+                  <FaTwitter className="size-5" />
+                </a>
+                <a
+                  href="#"
+                  aria-label="اشتراک در شبکه اجتماعی"
+                  className="text-muted-foreground hover:text-primary"
+                >
+                  <FaFacebook className="size-5" />
+                </a>
+              </div>
+            </div>
+          </aside>
+          <div className="flex">
+            <div className="mx-auto max-w-prose lg:max-w-4xl lg:px-20">
+              <div className="grid gap-x-10 gap-y-7 rounded-3xl border p-6 text-start lg:grid-cols-2 lg:gap-y-10 lg:border-none lg:p-0">
+                <div>
+                  <h2 className="text-xl font-semibold">مسئله</h2>
+                  <p className="mt-3 text-muted-foreground">
+                    پراکندگی داده‌ها، ابزارهای متعدد و نبود یک منبع واحد اطلاعات باعث کاهش سرعت تصمیم‌گیری و ایجاد ناهماهنگی میان تیم‌های فروش، بازاریابی و محصول شده بود.
+                                                        </p>
+                </div>
+                <Separator className="w-full lg:hidden" />
+                <div>
+                  <h2 className="text-xl font-semibold">رویکرد</h2>
+                  <p className="mt-3 text-muted-foreground">
+                    یک پلتفرم متمرکز برای مدیریت داده‌ها و خودکارسازی فرایندها پیاده‌سازی شد تا همه تیم‌ها بر پایه اطلاعات یکسان تصمیم‌گیری کنند.
+                                                        </p>
+                </div>
+                <div className="border-t pt-10 lg:col-span-2">
+                  <h2 className="text-xl font-semibold">دستاوردها</h2>
+                  <ul className="mt-3 grid gap-x-10 gap-y-3 lg:grid-cols-2">
+                    {OUTCOMES.map((outcome) => (
+                      <li key={outcome} className="flex gap-3">
+                        <CheckCircle2 className="mt-0.5 size-5 shrink-0" />
+                        <p className="font-semibold">{outcome}</p>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+              <div className="mt-20">
+                <section
+                  id="section1"
+                  ref={(ref) => addSectionRef("section1", ref)}
+                  className="prose mb-8 text-start dark:prose-invert"
+                >
+                  <h2>ارزیابی وضع موجود</h2>
+                  <p>
+                    تیم پس از بررسی دقیق فرآیندهای داخلی، دریافت که ابزارهای
+                    پراکنده و نبود یک منبع واحد حقیقت، بزرگ‌ترین مانع
+                    هماهنگی بین بخش‌هاست.{" "}
+                    <a href="#">گزارش ارزیابی</a> نشان داد بیش از ۴۰ درصد زمان تیم صرف انتقال اطلاعات و هماهنگی دستی میان ابزارهای مختلف می‌شود.
+                                                        </p>
+                  <blockquote>
+                    «تا وقتی داده‌ها پراکنده باشند، هیچ جریان کاری واقعاً
+                    کارآمد نخواهد بود.»
+                  </blockquote>
+                </section>
+                <section
+                  id="section2"
+                  ref={(ref) => addSectionRef("section2", ref)}
+                  className="prose mb-8 text-start dark:prose-invert"
+                >
+                  <h2>طراحی جریان کار جدید</h2>
+                  <p>
+                    تیم فنی و محصول با همکاری نزدیک، معماری جدیدی طراحی کردند
+                    که همه داده‌های مشتری و محصول را در یک پلتفرم متمرکز
+                    می‌کند:
+                  </p>
+                  <ul>
+                    <li>سطح ۱  یکپارچه‌سازی داده: اتصال سامانه ارتباط با مشتری و فروش و ابزارهای تحلیل</li>
+                    <li>سطح ۲  خودکارسازی: حذف وظایف تکراری بین تیم‌ها</li>
+                    <li>سطح ۳  بینش بلادرنگ: داشبوردهای تصمیم‌گیری برای مدیران</li>
+                  </ul>
+                  <p>
+                    پیاده‌سازی مرحله‌ای باعث شد بدون ایجاد اختلال در فعالیت‌های روزانه، سامانه جدید به‌تدریج در کل سازمان مستقر شود.
+                                                        </p>
+                </section>
+                <section
+                  id="section3"
+                  ref={(ref) => addSectionRef("section3", ref)}
+                  className="prose mb-8 text-start dark:prose-invert"
+                >
+                  <h2>استقرار و آموزش تیم</h2>
+                  <p className="leading-7 not-first:mt-6">
+                    استقرار به‌صورت مرحله‌ای انجام شد: ابتدا تیم فروش، سپس
+                    پشتیبانی و در نهایت بازاریابی. هر فاز شامل کارگاه آموزشی،
+                    مستندسازی و یک هفته پشتیبانی اختصاصی بود.
+                  </p>
+                  <p className="leading-7 not-first:mt-6">
+                    تنها یک ماه پس از استقرار، بیشتر اعضای تیم به‌صورت مستقل از سامانه استفاده می‌کردند و زمان پاسخ‌گویی بین واحدها به میزان قابل توجهی کاهش یافت.
+                                                        </p>
+                </section>
+
+                <section
+                  id="section4"
+                  ref={(ref) => addSectionRef("section4", ref)}
+                  className="prose mb-8 text-start dark:prose-invert"
+                >
+                  <h2>نتایج و درس‌آموخته‌ها</h2>
+                  <p>
+                    شش ماه پس از اجرای پروژه، شاخص‌های بهره‌وری، سرعت تصمیم‌گیری و همکاری میان تیم‌ها رشد محسوسی را تجربه کردند.
+                                                        </p>
+                  <div>
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>کارایی تیم</th>
+                          <th>رضایت مشتری</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>پایین</td>
+                          <td>متوسط</td>
+                        </tr>
+                        <tr className="m-0 border-t p-0 even:bg-muted">
+                          <td>در حال بهبود</td>
+                          <td>خوب</td>
+                        </tr>
+                        <tr className="m-0 border-t p-0 even:bg-muted">
+                          <td>بالا</td>
+                          <td>عالی</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <p>
+                    مهم‌ترین درس این پروژه آن بود که موفقیت هر تحول دیجیتال، علاوه بر فناوری، به آموزش کاربران و پذیرش تغییر در سازمان وابسته است.
+                                                        </p>
+                  <Alert>
+                    <Lightbulb className="h-4 w-4" />
+                    <AlertTitle>نکته کلیدی</AlertTitle>
+                    <AlertDescription>
+                      پیش از استقرار گسترده، یک پروژه آزمایشی کوچک با یک تیم
+                      اجرا کنید و بازخورد واقعی جمع‌آوری کنید.
+                    </AlertDescription>
+                  </Alert>
+                </section>
+              </div>
+            </div>
+            <div className="sticky top-8 hidden h-fit shrink-0 text-start lg:block">
+              <span className="flex items-center gap-2 text-sm">
+                <AlignLeft className="h-4 w-4" />
+                در این صفحه
+              </span>
+              <nav className="mt-2 text-sm" aria-label="فهرست مطالب صفحه">
+                <ul>
+                  {PAGE_SECTIONS.map((section) => (
+                    <li key={section.id}>
+                      <a
+                        href={`#${section.id}`}
+                        className={cn(
+                          "block py-1 transition-colors duration-200",
+                          activeSection === section.id
+                            ? "font-medium text-primary"
+                            : "text-muted-foreground hover:text-primary",
+                        )}
+                      >
+                        {section.title}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudy3 };
diff --git a/blocks/case-study8.tsx b/blocks/case-study8.tsx
new file mode 100644
index 0000000..be43881
--- /dev/null
+++ b/blocks/case-study8.tsx
@@ -0,0 +1,156 @@
+import { cn } from "@/lib/utils";
+
+const SIDEBAR_INFO = [
+  {
+    label: "شرکت",
+    value:
+      "ری یو آی با استفاده از ری یو آی یک سیستم طراحی منسجم ایجاد کرد و توانست سرعت توسعه رابط کاربری و کیفیت محصول را به شکل چشمگیری افزایش دهد.",
+    bordered: false,
+  },
+  {
+    label: "حوزه",
+    value: "فین‌تک",
+    bordered: false,
+  },
+  {
+    label: "موقعیت",
+    value: "لندن، بریتانیا",
+    bordered: true,
+  },
+  {
+    label: "اندازه شرکت",
+    value: "۱۱ تا ۵۰ نفر",
+    bordered: false,
+  },
+  {
+    label: "وب‌سایت",
+    value: (
+      <a href="#" className="underline hover:text-foreground">
+        نمونه.ایران
+      </a>
+    ),
+    bordered: false,
+  },
+  {
+    label: "موضوعات",
+    value: "سیستم طراحی، کامپوننت‌های رابط کاربری، ری یو آی",
+    bordered: false,
+  },
+];
+
+interface CaseStudy8Props {
+  className?: string;
+}
+
+const CaseStudy8 = ({ className }: CaseStudy8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-12 lg:flex-row lg:gap-24">
+        <article className="mx-auto text-start">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="پیش‌نمایش سیستم طراحی ری یو آی با ری یو آی"
+            className="mb-8 aspect-video w-full max-w-3xl rounded-lg border object-cover"
+          />
+          <div className="prose text-start dark:prose-invert">
+            <h1>چگونه ری یو آی با ری یو آی سیستم طراحی خود را ساخت</h1>
+            <p>
+              با رشد سریع محصول، حفظ یکپارچگی رابط کاربری دشوار شد. تیم ری یو آی با انتخاب ری یو آی به‌عنوان هسته سیستم طراحی، این چالش را برطرف کرد.
+                                      </p>
+            <h2>چرا ری یو آی؟</h2>
+            <p>
+              پس از بررسی گزینه‌های مختلف، shadcn/ui به دلیل انعطاف‌پذیری، مالکیت کامل کد و سازگاری با Tailwind CSS انتخاب شد.{" "}
+              <a href="#">معیارهای انتخاب</a> که مهم‌ترین معیارهای آن سرعت توسعه، توسعه‌پذیری و سفارشی‌سازی بود.
+                                      </p>
+            <blockquote>
+              «وقتی کامپوننت‌ها در اختیار تیم توسعه باشند، فاصله بین طراحی و
+              پیاده‌سازی به حداقل می‌رسد.»
+            </blockquote>
+            <h3>ساخت کتابخانه کامپوننت</h3>
+            <p>
+              کتابخانه کامپوننت‌ها در سه لایه طراحی شد تا توسعه محصول ساختارمند و مقیاس‌پذیر باشد:
+                                      </p>
+            <ul>
+              <li>پایه  دکمه‌ها، ورودی‌ها و فرم‌ها</li>
+              <li>میانی  جداول، کارت‌ها و ناوبری</li>
+              <li>پیشرفته  داشبوردها و جریان‌های چندمرحله‌ای</li>
+            </ul>
+            <p>
+              تمام کامپوننت‌ها پیش از انتشار از نظر طراحی، دسترس‌پذیری و کیفیت فنی بررسی می‌شدند تا تجربه‌ای یکپارچه برای کاربران ایجاد شود.
+                                      </p>
+            <h3>همکاری بین تیم طراحی و توسعه</h3>
+            <p>
+              طراحان و توسعه‌دهندگان با استفاده از توکن‌های طراحی مشترک، فاصله بین طراحی و پیاده‌سازی را کاهش دادند و انتشار نسخه‌های جدید را سریع‌تر کردند.
+                                      </p>
+            <p>
+              پس از سه ماه، بیش از ۸۰٪ صفحات جدید مستقیماً از کتابخانه داخلی
+              ساخته می‌شدند و زمان تحویل فیچرها به‌طور میانگین ۳۵٪ کاهش یافت.
+            </p>
+            <h3>نتایج و تأثیر</h3>
+            <p>
+              یکپارچگی بصری و سرعت توسعه در طول زمان بهبود قابل‌توجهی داشت:
+            </p>
+            <div>
+              <table>
+                <thead>
+                  <tr>
+                    <th>یکپارچگی بصری</th>
+                    <th>سرعت توسعه</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>پایین</td>
+                    <td>کند</td>
+                  </tr>
+                  <tr className="m-0 border-t p-0 even:bg-muted">
+                    <td>در حال بهبود</td>
+                    <td>متوسط</td>
+                  </tr>
+                  <tr className="m-0 border-t p-0 even:bg-muted">
+                    <td>بالا</td>
+                    <td>سریع</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <p>
+              امروزه سیستم طراحی ری یو آی به مرجع اصلی توسعه رابط کاربری تبدیل شده و هماهنگی میان تیم‌های طراحی، محصول و توسعه را تضمین می‌کند.
+                                      </p>
+            <p>
+              این تجربه نشان داد سرمایه‌گذاری روی سیستم طراحی، علاوه بر کاهش هزینه‌های نگهداری، سرعت توسعه و کیفیت تجربه کاربری را نیز در بلندمدت افزایش می‌دهد.
+                                      </p>
+          </div>
+        </article>
+
+        <aside className="text-start lg:max-w-[300px]">
+          <div className="flex flex-col items-start rounded-lg border border-border bg-accent py-6 md:py-8">
+            <div className="mb-8 px-6">
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
+                alt="لوگوی ری یو آی"
+                className="max-h-8 w-full"
+              />
+            </div>
+            {SIDEBAR_INFO.map((item) => (
+              <div
+                key={item.label}
+                className={cn(
+                  "mb-5 px-6 last:mb-0",
+                  item.bordered && "w-full border-t border-border pt-5",
+                )}
+              >
+                <div className="mb-2 text-xs font-semibold">{item.label}</div>
+                <div className="overflow-hidden text-xs text-muted-foreground md:text-sm">
+                  {item.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        </aside>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudy8 };
diff --git a/blocks/changelog1.tsx b/blocks/changelog1.tsx
new file mode 100644
index 0000000..6e74979
--- /dev/null
+++ b/blocks/changelog1.tsx
@@ -0,0 +1,166 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type ChangelogEntry = {
+  version: string;
+  date: string;
+  title: string;
+  description: string;
+  items?: string[];
+  image?: string;
+  button?: {
+    url: string;
+    text: string;
+  };
+};
+
+export interface Changelog1Props {
+  className?: string;
+  title?: string;
+  description?: string;
+  entries?: ChangelogEntry[];
+}
+
+export const defaultEntries: ChangelogEntry[] = [
+  {
+    version: "نسخه ۱۳.۰",
+    date: "۲۵ آبان ۱۴۰۳",
+    title: "داشبورد تحلیلی پیشرفته",
+    description:
+      "داشبورد تحلیلی بازطراحی شده است تا با گزارش‌های دقیق‌تر، نمودارهای تعاملی و شاخص‌های کلیدی، تصمیم‌گیری را ساده‌تر کند.",
+    items: [
+      "نمودارهای تعاملی با به‌روزرسانی لحظه‌ای",
+      "ویجت‌های قابل سفارشی‌سازی برای داشبورد",
+      "خروجی گرفتن از تحلیل‌ها در قالب‌های جدول، پی‌دی‌اف و Excel",
+      "قالب‌های گزارش‌دهی جدید برای کاربردهای رایج",
+      "گزینه‌های بهبودیافته فیلتر و دسته‌بندی داده",
+    ],
+    image:
+      "/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg",
+    button: {
+      url: "https://ShadcnBlocks",
+      text: "مشاهده جزئیات",
+    },
+  },
+  {
+    version: "نسخه ۱۲۵",
+    date: "۱۶ مهر ۱۴۰۳",
+    title: "انتشار اپلیکیشن موبایل",
+    description:
+      "اپلیکیشن موبایل منتشر شد تا بتوانید در هر زمان و هر مکان به امکانات پلتفرم دسترسی داشته باشید.",
+    items: [
+      "تجربه بومی موبایل برای بهره‌وری در هر مکان",
+      "پشتیبانی از حالت آفلاین برای کار بدون اتصال اینترنت",
+      "اعلان‌های فوری برای به‌روزرسانی‌های مهم",
+      "احراز هویت بیومتریک برای امنیت بیشتر",
+    ],
+  },
+  {
+    version: "نسخه ۱۲۱",
+    date: "۲ مهر ۱۴۰۳",
+    title: "ویژگی‌های جدید و بهبودها",
+    description:
+      "در این صفحه، همه قابلیت‌های جدید، بهبودهای عملکرد و رفع اشکال‌های هر نسخه را به‌صورت شفاف منتشر می‌کنیم.",
+    items: [
+      "افزودن قابلیت خروجی گرفتن از داده‌ها",
+      "بهبود عملکرد و سرعت",
+      "رفع باگ‌ها و مشکلات جزئی",
+      "افزودن قابلیت وارد کردن داده‌ها",
+    ],
+    image:
+      "/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg",
+  },
+  {
+    version: "نسخه ۱۰.۰",
+    date: "۱۰ شهریور ۱۴۰۳",
+    title: "اولین نسخه پلتفرم",
+    description:
+      "اولین نسخه پلتفرم با امکانات مدیریت پروژه، همکاری تیمی و پیگیری وظایف منتشر شد و از این پس به‌صورت مستمر توسعه خواهد یافت.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg",
+    button: {
+      url: "https://ShadcnBlocks",
+      text: "مشاهده جزئیات",
+    },
+  },
+];
+
+const Changelog1 = ({
+  title = "تاریخچه تغییرات",
+  description = "جدیدترین به‌روزرسانی‌ها و بهبودهای پلتفرم ما را دنبال کنید.",
+  entries = defaultEntries,
+  className,
+}: Changelog1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl">
+          <h1 className="mb-4 text-3xl font-bold tracking-tight md:text-2xll">
+            {title}
+          </h1>
+          <p className="mb-6 text-base text-muted-foreground md:text-lg">
+            {description}
+          </p>
+        </div>
+        <div className="mx-auto mt-16 max-w-3xl space-y-16 md:mt-24 md:space-y-24">
+          {entries.map((entry, index) => (
+            <div
+              key={index}
+              className="relative flex flex-col gap-4 md:flex-row md:gap-16"
+            >
+              <div className="top-8 flex h-min w-64 shrink-0 items-center gap-4 md:sticky">
+                <Badge variant="secondary" className="text-xs">
+                  {entry.version}
+                </Badge>
+                <span className="text-xs font-medium text-muted-foreground">
+                  {entry.date}
+                </span>
+              </div>
+              <div className="flex flex-col">
+                <h2 className="mb-3 text-lg leading-tight font-bold text-foreground/90 md:text-xl">
+                  {entry.title}
+                </h2>
+                <p className="text-sm text-muted-foreground md:text-base">
+                  {entry.description}
+                </p>
+                {entry.items && entry.items.length > 0 && (
+                  <ul className="mt-4 ms-4 space-y-1.5 text-sm text-muted-foreground md:text-base">
+                    {entry.items.map((item, itemIndex) => (
+                      <li key={itemIndex} className="list-disc">
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                {entry.image && (
+                  <img
+                    src={entry.image}
+                    alt={`تصویر ${entry.title}`}
+                    className="mt-8 w-full rounded-lg object-cover"
+                  />
+                )}
+                {entry.button && (
+                  <Button variant="link" className="mt-4 self-start" asChild>
+                    <a
+                      href={entry.button.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {entry.button.text}
+                      <ArrowUpRight className="ms-2 size-4 rtl:rotate-180" />
+                    </a>
+                  </Button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Changelog1 };
diff --git a/blocks/changelog2.tsx b/blocks/changelog2.tsx
new file mode 100644
index 0000000..8dc77f4
--- /dev/null
+++ b/blocks/changelog2.tsx
@@ -0,0 +1,85 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Changelog2Props {
+  className?: string;
+}
+
+const Changelog2 = ({ className }: Changelog2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <h1 className="mb-6 text-2xll font-semibold md:text-2xll">
+            تاریخچه تغییرات
+            <sup>
+              <Badge className="ms-2 bg-emerald-400 hover:bg-emerald-400">
+                جدید
+              </Badge>
+            </sup>
+          </h1>
+          <p className="mx-auto max-w-lg text-lg">
+            جدیدترین قابلیت‌ها، بهبودها و رفع اشکال‌ها را در این بخش دنبال کنید.
+                                </p>
+          <div className="mx-auto mt-10 flex w-full max-w-xs items-center gap-2">
+            <Input
+              type="email"
+              placeholder="ایمیل خود را برای دریافت آخرین تغییرات وارد کنید"
+            />
+            <Button type="submit" aria-label="عضویت در خبرنامه">
+              <ArrowRight className="size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+        <div className="mx-auto mt-20 max-w-xl space-y-10 border-s border-dashed border-border ps-6">
+          <div>
+            <p className="relative font-mono text-sm text-muted-foreground">
+              <time className="absolute top-1 -inset-s-6 size-3 -translate-x-1/2 rounded-full bg-emerald-400"></time>
+              ۲۲ دی ۱۴۰۳
+            </p>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="گزینه‌های خروجی بهتر"
+              className="my-4 aspect-8/7 rounded-md object-cover"
+            />
+            <h2 className="mb-2 text-3xl font-semibold">گزینه‌های خروجی بهتر</h2>
+            <p className="prose text-primary/80 dark:prose-invert">
+              <a href="#">کامپوننت‌ها</a> و{" "}
+              <a href="#">تحلیل‌ها</a> را توسعه داده‌ایم تا بتوانید عملکرد محصول، رفتار کاربران و شاخص‌های کلیدی را دقیق‌تر تحلیل کنید.
+                                        <br />
+              <br />
+              همانند سایر <a href="#">یکپارچه‌سازی‌ها</a>های پلتفرم، این قابلیت نیز با راه‌اندازی ساده، امنیت بالا و رعایت استانداردهای حریم خصوصی ارائه شده است.
+                                      </p>
+          </div>
+          <div>
+            <p className="relative font-mono text-sm text-muted-foreground">
+              <time className="absolute top-1 -inset-s-6 size-3 -translate-x-1/2 rounded-full bg-emerald-400"></time>
+              ۳ دی ۱۴۰۳
+            </p>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="داشبورد و تحلیل‌های جدید"
+              className="my-4 aspect-8/7 rounded-md object-cover"
+            />
+            <h2 className="mb-2 text-3xl font-semibold">
+              داشبورد و تحلیل‌های جدید
+            </h2>
+            <p className="prose text-primary/80 dark:prose-invert">
+              <a href="#">کامپوننت‌ها</a> و{" "}
+              <a href="#">تحلیل‌ها</a> را توسعه داده‌ایم تا بتوانید عملکرد محصول، رفتار کاربران و شاخص‌های کلیدی را دقیق‌تر تحلیل کنید.
+                                        <br />
+              <br />
+              همانند سایر <a href="#">یکپارچه‌سازی‌ها</a>های پلتفرم، این قابلیت نیز با راه‌اندازی ساده، امنیت بالا و رعایت استانداردهای حریم خصوصی ارائه شده است.
+                                      </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Changelog2 };
diff --git a/blocks/changelog3.tsx b/blocks/changelog3.tsx
new file mode 100644
index 0000000..e66c22b
--- /dev/null
+++ b/blocks/changelog3.tsx
@@ -0,0 +1,126 @@
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Changelog3Props {
+  className?: string;
+}
+
+const Changelog3 = ({ className }: Changelog3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="space-y-10">
+          <article className="relative mx-auto flex max-w-3xl flex-col gap-6 md:flex-row md:gap-10">
+            <time className="h-fit text-sm font-semibold text-muted-foreground md:sticky md:top-10">
+              ۲۳ بهمن ۱۴۰۳
+            </time>
+            <div>
+              <div className="flex flex-wrap gap-4">
+                <div className="flex items-center gap-1.5">
+                  <span className="size-3 rounded-full bg-amber-400"></span>
+                  <p className="text-sm font-semibold text-primary/80">
+                    نگهداری
+                  </p>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <span className="size-3 rounded-full bg-purple-500"></span>
+                  <p className="text-sm font-semibold text-primary/80">
+                    مستندات
+                  </p>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <span className="size-3 rounded-full bg-blue-500"></span>
+                  <p className="text-sm font-semibold text-primary/80">
+                    ویژگی
+                  </p>
+                </div>
+              </div>
+              <div className="prose mt-6 dark:prose-invert">
+                <h2>داشبورد و تحلیل‌های جدید</h2>
+                <p>
+                  بخش تحلیل و داشبورد مدیریتی بازطراحی شده تا اطلاعات دقیق‌تری از وضعیت محصول و کاربران در اختیار شما قرار دهد.
+                                                    <br />
+                  همانند سایر
+                                                    <a href="#" className="mx-1 underline">
+                    یکپارچه‌سازی‌ها
+                  </a>
+                  های پلتفرم با تمرکز بر امنیت، کارایی و سهولت استفاده طراحی شده‌اند تا بدون پیچیدگی قابل استفاده باشند.
+                                                    <br />
+                  <br />
+                  همچنین تنظیمات مرتبط با حریم خصوصی، اعلان‌ها و قابلیت‌های مدیریتی به‌صورت یکپارچه در اختیار مدیران سیستم قرار گرفته است.
+                                                    <br />
+                  <br />
+                  برای اطلاعات بیشتر، به
+                  <a href="#" className="mx-1 underline">
+                    مستندات
+                  </a>
+                  مراجعه کنید.
+                </p>
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="داشبورد و تحلیل‌های جدید"
+                  className="my-4 aspect-video rounded-lg border border-border object-cover"
+                />
+              </div>
+            </div>
+          </article>
+          <Separator />
+          <article className="relative mx-auto flex max-w-3xl flex-col gap-6 md:flex-row md:gap-10">
+            <time className="h-fit text-sm font-semibold text-muted-foreground md:sticky md:top-10">
+              ۹ بهمن ۱۴۰۳
+            </time>
+            <div>
+              <div className="flex flex-wrap gap-4">
+                <div className="flex items-center gap-1.5">
+                  <span className="size-3 rounded-full bg-amber-400"></span>
+                  <p className="text-sm font-semibold text-primary/80">
+                    نگهداری
+                  </p>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <span className="size-3 rounded-full bg-purple-500"></span>
+                  <p className="text-sm font-semibold text-primary/80">
+                    مستندات
+                  </p>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <span className="size-3 rounded-full bg-red-500"></span>
+                  <p className="text-sm font-semibold text-primary/80">
+                    امنیت
+                  </p>
+                </div>
+              </div>
+              <div className="prose mt-6 dark:prose-invert">
+                <h2>ویژگی‌های امنیتی پیشرفته</h2>
+                <p>
+                  زیرساخت امنیتی بازطراحی شده است تا حفاظت از داده‌ها، احراز هویت و کنترل دسترسی با استانداردهای روز انجام شود. همانند سایر
+                                                    <a href="#" className="mx-1 underline">
+                    ویژگی‌های امنیتی
+                  </a>
+                  قابلیت‌های امنیتی، این بخش نیز با رمزنگاری پیشرفته، پایش مداوم و استانداردهای امنیتی پیاده‌سازی شده است.
+                                                    <br />
+                  <br />
+                  در این نسخه، پایش لحظه‌ای تهدیدها، پاسخ خودکار به رخدادهای امنیتی و مدیریت الزامات انطباق بهبود یافته است.
+                                                    <br />
+                  <br />
+                  برای اطلاعات بیشتر، به
+                  <a href="#" className="mx-1 underline">
+                    مستندات امنیتی
+                  </a>
+                  ما مراجعه کنید.
+                </p>
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                  alt="ویژگی‌های امنیتی پیشرفته"
+                  className="my-4 aspect-video rounded-lg border border-border object-cover"
+                />
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Changelog3 };
diff --git a/blocks/changelog4.tsx b/blocks/changelog4.tsx
new file mode 100644
index 0000000..7c1559b
--- /dev/null
+++ b/blocks/changelog4.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { FaLinkedin } from "react-icons/fa";
+import { FaBluesky, FaXTwitter } from "react-icons/fa6";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface Changelog4Props {
+  className?: string;
+}
+
+const Changelog4 = ({ className }: Changelog4Props) => {
+  const [scrollProgress, setScrollProgress] = useState(8);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const totalHeight =
+        document.documentElement.scrollHeight - window.innerHeight;
+      const progress = (window.scrollY / totalHeight) * 92 + 8;
+      setScrollProgress(Math.min(progress, 100));
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto w-full max-w-5xl md:px-10">
+          <div className="flex flex-col gap-16">
+            <h1 className="text-2xll font-bold">تاریخچه تغییرات</h1>
+            <div className="mx-auto flex w-full items-center justify-center gap-2 rounded-2xl bg-muted p-3 md:gap-4">
+              <a href="#" aria-label="لینکدین">
+                <FaLinkedin className="size-6 text-muted-foreground duration-150 hover:text-primary" />
+              </a>
+              <a href="#" aria-label="ایکس (توییتر)">
+                <FaXTwitter className="size-6 text-muted-foreground duration-150 hover:text-primary" />
+              </a>
+              <a href="#" aria-label="بلوسکای">
+                <FaBluesky className="size-6 text-muted-foreground duration-150 hover:text-primary" />
+              </a>
+              <p className="text-sm text-muted-foreground">
+                برای اطلاع از نسخه‌های جدید و قابلیت‌های تازه، ما را دنبال کنید.
+                                            </p>
+            </div>
+            <div className="relative space-y-20">
+              <div className="absolute top-4 hidden h-full w-0.5 md:-inset-s-12 md:block lg:-inset-s-14">
+                <div className="h-full w-full rounded-full bg-muted">
+                  <div
+                    className="relative max-h-full w-full rounded-full bg-linear-to-b from-primary/20 via-primary/40 to-primary transition-all duration-300"
+                    style={{
+                      height: `${scrollProgress}%`,
+                    }}
+                  ></div>
+                </div>
+              </div>
+              <div className="relative">
+                <span className="absolute top-2 hidden size-5 -translate-x-1/2 place-items-center rounded-full border bg-background md:-inset-s-12 md:grid lg:-inset-s-[55px]">
+                  <span className="size-2 rounded-full bg-primary" />
+                </span>
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="به‌روزرسانی‌های فناوری و بهبود عملکرد"
+                  className="aspect-video rounded-md border border-border object-cover"
+                />
+                <div className="my-4 flex items-center gap-2">
+                  <Avatar className="size-8 rounded-full border border-border">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-1.webp"
+                      alt="نویسنده"
+                    />
+                  </Avatar>
+                  <time className="text-sm text-muted-foreground">
+                    ۲۳ بهمن ۱۴۰۳
+                  </time>
+                </div>
+                <div className="prose max-w-none dark:prose-invert">
+                  <h2 className="text-xl">
+                    به‌روزرسانی‌های بزرگ فناوری و بهبود عملکرد
+                  </h2>
+                  <p>
+                    پشته فناوری خود را ارتقا دادیم تا از{" "}
+                    <b>جدیدترین فناوری‌های وب</b> بهره ببریم و عملکرد و
+                    تجربه توسعه بهتری در سراسر پلتفرم فراهم کنیم.
+                  </p>
+                  <h3>به‌روزرسانی‌های فریم‌ورک:</h3>
+                  <ul>
+                    <li>
+                      <b>رابط کاربری نسل جدید</b>  رندر همزمان و دسته‌بندی خودکار برای
+                      عملکرد بهتر.
+                    </li>
+                    <li>
+                      <b>زبان نوع‌ایمن ۵</b>  استنتاج نوع بهتر و پشتیبانی از
+                      دکوراتورها.
+                    </li>
+                    <li>
+                      <b>ابزار ساخت ۵</b>  بیلد بسیار سریع و جایگزینی ماژول
+                      داغ بهبودیافته.
+                    </li>
+                  </ul>
+                  <p>
+                    درباره پشته فناوری ما در{" "}
+                    <a href="#">مستندات</a> بیشتر بخوانید.
+                  </p>
+                  <h3>بهبودهای عملکرد:</h3>
+                  <ul>
+                    <li>
+                      <b>بارگذاری تنبل</b>  کاهش زمان بارگذاری اولیه و
+                      بهبود تجربه کاربری.
+                    </li>
+                    <li>
+                      <b>تقسیم کد</b>  سازماندهی بهتر کد و نگهداری آسان‌تر.
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="relative">
+                <span className="absolute top-2 hidden size-5 -translate-x-1/2 place-items-center rounded-full border bg-background md:-inset-s-12 md:grid lg:-inset-s-[55px]">
+                  <span className="size-2 rounded-full bg-primary" />
+                </span>
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                  alt="به‌روزرسانی‌های زیرساخت و امنیت"
+                  className="aspect-video rounded-md border border-border object-cover"
+                />
+                <div className="my-4 flex items-center gap-2">
+                  <Avatar className="size-8 rounded-full border border-border">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-2.webp"
+                      alt="نویسنده"
+                    />
+                  </Avatar>
+                  <time className="text-sm text-muted-foreground">
+                    ۲ مهر ۱۴۰۳
+                  </time>
+                </div>
+                <div className="prose max-w-none dark:prose-invert">
+                  <h2 className="text-xl">
+                    به‌روزرسانی‌های زیرساخت و امنیت
+                  </h2>
+                  <p>
+                    بهبودهای قابل توجهی در زیرساخت و امنیت اعمال کردیم تا
+                    پلتفرمی پایدارتر و امن‌تر داشته باشید.
+                  </p>
+                  <h3>به‌روزرسانی‌های زیرساخت:</h3>
+                  <ul>
+                    <li>
+                      <b>کانتینرهای کانتینر</b>  یکنواختی بیشتر در استقرار و
+                      مقیاس‌پذیری
+                    </li>
+                    <li>
+                      <b>مدیریت کانتینر</b>  ارکستراسیون بهتر کانتینرها و
+                      مقیاس‌دهی خودکار
+                    </li>
+                    <li>
+                      <b>کش کش سریع</b>  زمان پاسخ سریع‌تر و کاهش بار پایگاه
+                      داده
+                    </li>
+                  </ul>
+                  <h3>بهبودهای امنیتی:</h3>
+                  <ul>
+                    <li>
+                      <b>احراز هویت استاندارد</b>  جریان‌های احراز هویت و مجوزدهی
+                      پیشرفته‌تر
+                    </li>
+                    <li>
+                      <b>محدودیت نرخ درخواست</b>  محافظت در برابر حملات حمله سایبری
+                      و سوءاستفاده
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Changelog4 };
diff --git a/blocks/changelog5.tsx b/blocks/changelog5.tsx
new file mode 100644
index 0000000..4817be1
--- /dev/null
+++ b/blocks/changelog5.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+import { ArrowUpRight } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const changelogs = [
+  {
+    title: "معرفی Pixiol Cloud Storage",
+    category: "ویژگی جدید",
+    date: "۱ فروردین ۱۴۰۴",
+    author: "سارا احمدی",
+    role: "مدیر محصول",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    description: (
+      <div className="prose dark:prose-invert">
+        <p>
+          زیرساخت جدید فضای ذخیره‌سازی ابری امکان مدیریت متمرکز فایل‌ها، اسناد و منابع پروژه را فراهم می‌کند تا اعضای تیم از هر مکان به اطلاعات موردنیاز خود دسترسی داشته باشند.
+                        </p>
+        <ul>
+          <li>
+            <a href="#">کتابخانه فایل‌ها</a> اکنون با فضای ذخیره‌سازی ابری یکپارچه شده است.
+                              </li>
+          <li>
+            فایل‌ها را می‌توانید با برچسب، پوشه و فیلترهای پیشرفته دسته‌بندی و سریع‌تر جستجو کنید.
+                              </li>
+          <li>
+            در هر بخش از پروژه می‌توانید با{" "}
+            <strong>استفاده از میانبر</strong> ⌘+F یا از پنل منابع، فایل‌های ذخیره‌شده را به‌سرعت پیدا کنید.
+                              </li>
+          <li>
+            در پروژه‌های جدید امکانات زیر در دسترس است:
+                                <ul>
+              <li>شروع از قالب‌های آماده</li>
+              <li>وارد کردن فایل‌ها از فضای ابری</li>
+              <li>همکاری هم‌زمان با اعضای تیم</li>
+            </ul>
+          </li>
+        </ul>
+        <p>
+          در نسخه جدید، فضای ذخیره‌سازی پایه برای همه کاربران فعال شده است و قابلیت‌های بیشتری نیز در به‌روزرسانی‌های آینده اضافه خواهد شد. اگر پیشنهادی دارید،
+                          <a href="#"> پیشنهاد خود را</a> در سامانه بازخورد ثبت کنید.
+                        </p>
+      </div>
+    ),
+  },
+  {
+    title: "دستیار طراحی مبتنی بر هوش مصنوعی",
+    category: "بهبود",
+    date: "۲۵ اسفند ۱۴۰۳",
+    author: "محمد رضایی",
+    role: "سرپرست تحقیقات هوش مصنوعی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    description: (
+      <div className="prose dark:prose-invert">
+        <p>
+          نسخه جدید دستیار هوش مصنوعی با دقت بیشتر، سرعت بالاتر و پیشنهادهای کاربردی‌تر منتشر شده است.
+                        </p>
+        <ul>
+          <li>۴۰٪ رندر سریع‌تر برای پیشنهادهای تولیدشده با هوش مصنوعی</li>
+          <li>
+            الگوریتم جدید تشخیص سبک برای تم‌های طراحی یکپارچه‌تر
+          </li>
+          <li>پشتیبانی از پرامپت‌های دقیق‌تر و تنظیمات پیشرفته تولید محتوا</li>
+          <li>
+            دستیارهای تخصصی برای تصویرسازی، تایپوگرافی و چیدمان
+          </li>
+        </ul>
+        <p>
+          این قابلیت‌ها برای همه کاربران فعال شده‌اند. برای آشنایی بیشتر به <a href="#">مرکز آموزش</a> مراجعه کنید.
+                        </p>
+      </div>
+    ),
+  },
+  {
+    title: "ابزارهای همکاری تیم خلاق",
+    category: "به‌روزرسانی",
+    date: "۲۰ اسفند ۱۴۰۳",
+    author: "امیر حسینی",
+    role: "طراح ارشد محصول",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+    description: (
+      <div className="prose dark:prose-invert">
+        <p>
+          امکانات همکاری تیمی بازطراحی شده‌اند تا هماهنگی میان اعضای تیم، مدیریت بازخوردها و بررسی تغییرات سریع‌تر انجام شود.
+                        </p>
+        <ul>
+          <li>ویرایش هم‌زمان با نمایش حضور اعضای تیم</li>
+          <li>ثبت نظر روی بخش‌های مختلف فایل</li>
+          <li>تاریخچه نسخه‌ها با امکان مقایسه تغییرات</li>
+          <li>سامانه تأیید و بازبینی مشتری</li>
+        </ul>
+        <p>
+          برای استفاده مؤثر از این قابلیت‌ها،
+                          <a href="#"> راهنمای همکاری تیمی</a> را مطالعه کنید.
+        </p>
+      </div>
+    ),
+  },
+];
+
+interface Changelog5Props {
+  className?: string;
+}
+
+const Changelog5 = ({ className }: Changelog5Props) => {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLElement>>({});
+
+  useEffect(() => {
+    const sections = Object.keys(sectionRefs.current);
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      observerCallback,
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.5,
+      },
+    );
+
+    sections.forEach((sectionId) => {
+      const element = sectionRefs.current[sectionId];
+      if (element) {
+        observer?.observe(element);
+      }
+    });
+
+    return () => {
+      observer?.disconnect();
+      observer = null;
+    };
+  }, []);
+
+  const addSectionRef = (id: string, ref: HTMLElement | null) => {
+    if (ref) {
+      sectionRefs.current[id] = ref;
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="bg-muted/60 py-20 lg:py-28">
+        <div className="container">
+          <div className="flex flex-col items-start gap-4 lg:flex-row">
+            <span className="flex w-[16%] items-center gap-3 pt-1 text-sm">
+              <span className="size-2 shrink-0 rounded-full bg-primary" />
+              تاریخچه تغییرات
+            </span>
+            <div>
+              <h2 className="text-xl">
+                جدیدترین ویژگی‌ها و بهبودها <br />{" "}
+                <span className="text-muted-foreground">Pixiol</span>
+              </h2>
+              <div className="mt-10 flex items-center gap-4 text-sm">
+                <a href="#" className="group flex items-center gap-1 underline">
+                  عضویت در به‌روزرسانی‌ها
+                  <ArrowUpRight className="size-4 transition-all group-hover:rotate-45 rtl:rotate-180" />
+                </a>
+                <a href="#" className="group flex items-center gap-1 underline">
+                  دنبال کردن در ایکس
+                  <ArrowUpRight className="size-4 transition-all group-hover:rotate-45 rtl:rotate-180" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container mt-10 lg:mt-20">
+        <div className="relative flex">
+          <div className="sticky top-10 hidden h-fit w-[16%] text-sm lg:block">
+            <p className="mb-2">خط زمانی</p>
+            <ul className="flex flex-col gap-2">
+              {changelogs.map((changelog, idx) => (
+                <li key={changelog.title}>
+                  <a
+                    href={`#section-${idx + 1}`}
+                    className={cn(
+                      "transition-colors duration-200",
+                      activeSection === `section-${idx + 1}`
+                        ? "font-medium text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    {changelog.date}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <Separator
+            orientation="vertical"
+            className="hidden h-auto data-[orientation=vertical]:h-auto lg:block"
+          />
+          <div className="mx-auto flex max-w-prose flex-col gap-16 lg:gap-24">
+            {changelogs.map((changelog, idx) => (
+              <div
+                key={idx}
+                id={`section-${idx + 1}`}
+                ref={(ref) => addSectionRef(`section-${idx + 1}`, ref)}
+                className="scroll-m-20"
+              >
+                <img
+                  src={changelog.image}
+                  alt={changelog.title}
+                  className="mb-8 aspect-video w-full object-cover"
+                />
+                <span className="flex items-center gap-2">
+                  <span className="size-2 shrink-0 rounded-full border border-muted-foreground" />
+                  <p className="text-sm text-muted-foreground">
+                    {changelog.category}
+                  </p>
+                </span>
+                <h3 className="mt-2 mb-6 text-3xl">{changelog.title}</h3>
+                {changelog.description}
+                <div className="mt-6 flex items-end justify-between border-b border-border pb-4">
+                  <div className="flex items-center gap-4">
+                    <Avatar className="size-10 border border-border">
+                      <AvatarImage
+                        src={changelog.avatar}
+                        alt={changelog.author}
+                      />
+                    </Avatar>
+                    <div className="flex flex-col">
+                      <p className="text-sm font-medium">{changelog.author}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {changelog.role}
+                      </p>
+                    </div>
+                  </div>
+                  <time className="text-sm text-muted-foreground">
+                    {changelog.date}
+                  </time>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Changelog5 };
diff --git a/blocks/changelog6.tsx b/blocks/changelog6.tsx
new file mode 100644
index 0000000..c1de21f
--- /dev/null
+++ b/blocks/changelog6.tsx
@@ -0,0 +1,307 @@
+import { Copy, ExternalLink, GitPullRequest, Maximize2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const changes = [
+  {
+    title: "نسخه ۳.۰.۰: بازطراحی رابط کاربری و یکپارچه‌سازی‌های جدید",
+    date: "۲۵ اردیبهشت ۱۴۰۴",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    excerpt:
+      "این انتشار عمده رابط کاربری را از نو طراحی کرده تا تجربه‌ای شهودی‌تر داشته باشید و یکپارچه‌سازی‌های قدرتمند جدید با سرویس‌های شخص ثالث محبوب اضافه شده است.",
+    contributors: [
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    ],
+    link: "#",
+    content: (
+      <div className="prose dark:prose-invert">
+        <h3>تجربه کاربری بازطراحی‌شده</h3>
+        <p>
+          رابط کاربری بر اساس بازخورد کاربران بازطراحی شده تا استفاده از سامانه سریع‌تر، ساده‌تر و یکپارچه‌تر باشد.
+                        </p>
+        <p>بهبودهای کلیدی بصری و کاربردی شامل:</p>
+        <ul>
+          <li>آیکون‌گرافی و تایپوگرافی مدرن</li>
+          <li>ناوبری و معماری اطلاعات بهبودیافته</li>
+          <li>گزینه‌های سفارشی‌سازی پیشرفته داشبورد</li>
+        </ul>
+        <h4>یکپارچه‌سازی‌های جدید</h4>
+        <p>
+          امکان اتصال مستقیم به سرویس‌های پرکاربرد برای خودکارسازی فرایندها و کاهش جابه‌جایی بین ابزارها فراهم شده است.
+                        </p>
+        <blockquote>
+          «سادگی، نهایتِ تعالی است.»  لئوناردو داوینچی
+        </blockquote>
+        <p>
+          این تغییرات با هدف افزایش سرعت انجام کارها و بهبود تجربه کاربران ارائه شده‌اند.
+                        </p>
+        <table>
+          <thead>
+            <tr>
+              <th>یکپارچه‌سازی</th>
+              <th>وضعیت</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>پیام‌رسان تیمی</td>
+              <td>منتشر شده</td>
+            </tr>
+            <tr>
+              <td>فضای ابری</td>
+              <td>منتشر شده</td>
+            </tr>
+            <tr>
+              <td>مدیریت وظایف</td>
+              <td>بتا</td>
+            </tr>
+          </tbody>
+        </table>
+        <p>
+          فهرست کامل تغییرات را در فایل به‌روزشده{" "}
+          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+            RELEASE_NOTES.md
+          </code>{" "}
+          ببینید.
+        </p>
+        <p className="small">
+          توجه: برخی یکپارچه‌سازی‌ها به‌صورت تدریجی در حال rollout هستند.
+        </p>
+        <p className="text-sm text-muted-foreground">
+          مشتاقیم نظر شما را بشنویم!
+        </p>
+      </div>
+    ),
+  },
+  {
+    title: "نسخه ۲۹.۵: بهبود عملکرد و اتصال هوشمند",
+    date: "۱۳ فروردین ۱۴۰۴",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+    excerpt:
+      "این انتشار بر بهبودهای قابل توجه عملکرد در سراسر پلتفرم و endpointهای API جدید برای انعطاف‌پذیری بیشتر توسعه‌دهندگان تمرکز دارد.",
+    contributors: [
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    ],
+    link: "#",
+    content: (
+      <div className="prose dark:prose-invert">
+        <h3>عملکرد فوق‌العاده سریع</h3>
+        <p>
+          با بهینه‌سازی پردازش‌ها و پایگاه داده، سرعت بارگذاری صفحات و پاسخ‌دهی سامانه به شکل محسوسی افزایش یافته است.
+                        </p>
+        <p>شاخص‌های کلیدی عملکرد بهبود یافته:</p>
+        <ul>
+          <li>میانگین زمان بارگذاری صفحه ۳۰٪ کاهش یافت</li>
+          <li>زمان پاسخ اتصال هوشمند اکنون ۲ برابر سریع‌تر است</li>
+          <li>کاهش مصرف حافظه برای فرآیندهای پس‌زمینه</li>
+        </ul>
+        <h4>قابلیت‌های گسترده اتصال هوشمند</h4>
+        <p>
+          اتصال‌های جدید امکان مدیریت کاربران، دسترسی به گزارش‌های تحلیلی و توسعه یکپارچه‌سازی‌های سفارشی را فراهم می‌کنند.
+                        </p>
+        <blockquote>
+          «تلخی کیفیت پایین، مدت‌ها بعد از شیرینی قیمت پایین فراموش
+          می‌شود.»  Benjamin Franklin
+        </blockquote>
+        <p>تعهد ما به کیفیت و عملکرد همچنان پابرجاست.</p>
+        <table>
+          <thead>
+            <tr>
+              <th>بخش</th>
+              <th>بهبود</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>بارگذاری داشبورد</td>
+              <td>سرعت قابل توجه</td>
+            </tr>
+            <tr>
+              <td>خروجی داده</td>
+              <td>بهینه‌سازی شده</td>
+            </tr>
+          </tbody>
+        </table>
+        <p>
+          جزئیات فنی را در پست مهندسی ما بخوانید:{" "}
+          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+            EngineeringDeepDive_v2.9.5.پی‌دی‌اف
+          </code>
+        </p>
+        <p className="small">توجه: تغییرات اتصال هوشمند سازگار با نسخه‌های قبلی است.</p>
+        <p className="text-sm text-muted-foreground">
+          حمایت مداوم شما، موتور نوآوری ماست.
+        </p>
+      </div>
+    ),
+  },
+];
+
+interface Changelog6Props {
+  className?: string;
+}
+
+const Changelog6 = ({ className }: Changelog6Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-clip py-32", className)}
+    >
+      <div className="container border-x border-border">
+        <div className="relative flex flex-col gap-3 py-8">
+          <div className="flex items-center gap-2">
+            <GitPullRequest className="size-4" />
+            <p className="text-sm font-medium">تاریخچه تغییرات</p>
+          </div>
+          <h1 className="text-3xl font-medium lg:text-xl">
+            جدیدترین بهبودها
+            <br /> و اخبار پلتفرم
+          </h1>
+          <div className="absolute right-0 bottom-0 left-0 h-px w-[200vw] -translate-x-1/2 bg-border" />
+          <div className="absolute top-0 right-0 left-0 h-px w-[200vw] -translate-x-1/2 bg-border" />
+        </div>
+        <div className="flex flex-col">
+          {changes.map((change, idx) => (
+            <Dialog key={idx}>
+              <div className="relative flex w-full flex-col gap-4 py-16 lg:flex-row lg:gap-0">
+                <div className="top-2 inset-s-0 mt-2 block h-fit lg:sticky">
+                  <time className="w-36 text-sm font-medium text-muted-foreground lg:absolute">
+                    {change.date}
+                  </time>
+                </div>
+                <div className="flex max-w-prose flex-col gap-4 lg:mx-auto">
+                  <h3 className="text-3xl font-medium lg:text-xl">
+                    {change.title}
+                  </h3>
+                  <DialogTrigger asChild>
+                    <img
+                      src={change.image}
+                      alt={change.title}
+                      className="max-h-96 w-full cursor-pointer rounded-lg border border-border object-cover"
+                    />
+                  </DialogTrigger>
+                  <p className="text-sm font-medium text-muted-foreground">
+                    {change.excerpt}
+                  </p>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-1">
+                      <div className="flex items-center -space-x-2 rtl:space-x-reverse">
+                        {change.contributors
+                          .slice(0, 3)
+                          .map((contributor, contributorIdx) => (
+                            <img
+                              key={contributorIdx}
+                              src={contributor}
+                              alt="مشارکت‌کننده"
+                              className="size-6 rounded-full border border-border"
+                            />
+                          ))}
+                      </div>
+                      {change.contributors.length > 3 && (
+                        <span className="text-sm font-medium text-muted-foreground">
+                          +{change.contributors.length - 3} مشارکت‌کننده
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-0.5">
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <DialogTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                aria-label="نمایش انتشار کامل"
+                              >
+                                <Maximize2 className="size-4" />
+                              </Button>
+                            </DialogTrigger>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>نمایش انتشار کامل</p>
+                          </TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              aria-label="کپی"
+                            >
+                              <Copy className="size-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>کپی</p>
+                          </TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              aria-label="باز کردن در تب جدید"
+                            >
+                              <ExternalLink className="size-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>باز کردن در تب جدید</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                  </div>
+                </div>
+                <div className="absolute right-0 bottom-0 left-0 h-px w-[200vw] -translate-x-1/2 bg-border" />
+              </div>
+              <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-prose">
+                <DialogHeader>
+                  <DialogTitle className="text-start">
+                    {change.title}
+                  </DialogTitle>
+                  <DialogDescription className="text-start">
+                    {change.excerpt}
+                  </DialogDescription>
+                </DialogHeader>
+                <img
+                  src={change.image}
+                  alt={change.title}
+                  className="max-h-96 w-full rounded-lg border border-border object-cover"
+                />
+                {change.content}
+              </DialogContent>
+            </Dialog>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Changelog6 };
diff --git a/blocks/changelog8.tsx b/blocks/changelog8.tsx
new file mode 100644
index 0000000..978f135
--- /dev/null
+++ b/blocks/changelog8.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+export type ChangelogEntry = {
+  version: string;
+  date: string;
+  title: string;
+  description: string;
+  items?: string[];
+  image?: string;
+};
+
+export interface Changelog8Props {
+  className?: string;
+  title?: string;
+  description?: string;
+  entries?: ChangelogEntry[];
+}
+
+const Changelog8 = ({
+  title = "تاریخچه تغییرات",
+  description = "جدیدترین به‌روزرسانی‌ها و بهبودهای پلتفرم ما را دنبال کنید.",
+  entries = defaultChangelogData,
+  className,
+}: Changelog8Props) => {
+  const [activeId, setActiveId] = useState<number | null>(null);
+  const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+  useEffect(() => {
+    sectionRefs.current = sectionRefs.current.slice(0, entries.length);
+
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY + 100;
+
+      const currentSectionIndex = sectionRefs.current.findIndex(
+        (ref, index) => {
+          if (!ref) return false;
+
+          const nextRef = sectionRefs.current[index + 1];
+          const refTop = ref.offsetTop;
+          const refBottom = nextRef
+            ? nextRef.offsetTop
+            : document.body.scrollHeight;
+
+          return scrollPosition >= refTop && scrollPosition < refBottom;
+        },
+      );
+
+      if (currentSectionIndex !== -1) {
+        setActiveId(currentSectionIndex);
+      } else if (scrollPosition < (sectionRefs.current[0]?.offsetTop || 0)) {
+        setActiveId(null);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [entries.length]);
+
+  const scrollToSection = (index: number) => {
+    const sectionRef = sectionRefs.current[index];
+    if (sectionRef) {
+      window.scrollTo({
+        top: sectionRef.offsetTop - 80,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  const setRef = (index: number) => (el: HTMLDivElement | null) => {
+    sectionRefs.current[index] = el;
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-24 md:py-32", className)}
+    >
+      <div className="relative container flex flex-col lg:flex-row">
+        <div className="mb-12 lg:hidden">
+          <h1 className="mb-4 text-3xl font-bold tracking-tight md:text-xl">
+            {title}
+          </h1>
+          <p className="text-base text-muted-foreground md:text-lg">
+            {description}
+          </p>
+          <Separator className="mt-8" />
+        </div>
+
+        <div className="sticky top-24 hidden h-fit w-72 overflow-visible pe-10 lg:block">
+          <div className="mb-10">
+            <h1 className="mb-3 text-3xl font-bold tracking-tight">{title}</h1>
+            <p className="text-base text-muted-foreground">{description}</p>
+          </div>
+          <Separator className="mb-6" />
+          <ScrollArea className="h-[calc(100vh-300px)]">
+            <div className="pb-6">
+              <h3 className="mb-5 text-sm font-medium tracking-wider text-muted-foreground uppercase">
+                در این صفحه
+              </h3>
+              <nav className="flex flex-col space-y-2.5">
+                {entries.map((entry, index) => (
+                  <button
+                    key={index}
+                    onClick={() => scrollToSection(index)}
+                    className={cn(
+                      "group flex flex-col gap-2 rounded-md border border-transparent px-3 py-2 text-start transition-all hover:border-border hover:bg-accent",
+                      activeId === index
+                        ? "border-border bg-accent font-medium text-foreground shadow-sm"
+                        : "text-muted-foreground",
+                    )}
+                  >
+                    <span className="text-sm">{entry.title}</span>
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <span className="font-medium">{entry.version}</span>
+                      <span>•</span>
+                      <span>{entry.date}</span>
+                    </div>
+                  </button>
+                ))}
+              </nav>
+            </div>
+          </ScrollArea>
+        </div>
+
+        <div className="flex-1 lg:ps-10">
+          <div className="mb-10 hidden lg:block">
+            <h2 className="text-xl font-semibold">آخرین به‌روزرسانی‌ها</h2>
+          </div>
+          <div className="space-y-16 md:space-y-24">
+            {entries.map((entry, index) => (
+              <div
+                key={index}
+                ref={setRef(index)}
+                className="relative flex flex-col gap-6 border-s-4 border-s-border/30 ps-6 transition-colors hover:border-s-border md:gap-8"
+                id={`entry-${index}`}
+              >
+                <div className="flex flex-wrap items-center gap-3">
+                  <Badge
+                    variant="secondary"
+                    className="px-3 py-1 text-xs font-medium"
+                  >
+                    {entry.version}
+                  </Badge>
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {entry.date}
+                  </span>
+                </div>
+                <div>
+                  <h2 className="mb-4 text-xl leading-tight font-bold text-foreground md:text-xl">
+                    {entry.title}
+                  </h2>
+                  <p className="mb-6 text-base text-muted-foreground md:text-base">
+                    {entry.description}
+                  </p>
+                  {entry.items && entry.items.length > 0 && (
+                    <div className="mt-6 rounded-lg border bg-muted/30 p-5">
+                      <h3 className="mb-3 text-sm font-medium">
+                        شامل موارد زیر:
+                      </h3>
+                      <ul className="space-y-2 text-sm text-muted-foreground">
+                        {entry.items.map((item, itemIndex) => (
+                          <li key={itemIndex} className="flex items-start">
+                            <span className="mt-1 ms-2 size-1.5 shrink-0 rounded-full bg-primary" />
+                            <span>{item}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                  {entry.image && (
+                    <div className="mt-8 overflow-hidden rounded-xl border">
+                      <img
+                        src={entry.image}
+                        alt={`تصویر ${entry.title}`}
+                        className="w-full object-cover transition-transform hover:scale-105"
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Changelog8 };
+
+export const defaultChangelogData: ChangelogEntry[] = [
+  {
+    version: "نسخه ۱۳.۰",
+    date: "۲۵ آبان ۱۴۰۳",
+    title: "داشبورد تحلیلی پیشرفته",
+    description:
+      "داشبورد تحلیلی ما را از نو طراحی کردیم تا بینش عمیق‌تر و نمایش بهتری از داده‌های شما ارائه دهد.",
+    items: [
+      "نمودارهای تعاملی با به‌روزرسانی لحظه‌ای",
+      "ویجت‌های قابل سفارشی‌سازی برای داشبورد",
+      "خروجی گرفتن از تحلیل‌ها در قالب‌های جدول، پی‌دی‌اف و Excel",
+      "قالب‌های گزارش‌دهی جدید برای کاربردهای رایج",
+      "گزینه‌های بهبودیافته فیلتر و دسته‌بندی داده",
+    ],
+    image:
+      "/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg",
+  },
+  {
+    version: "نسخه ۱۲۵",
+    date: "۱۶ مهر ۱۴۰۳",
+    title: "انتشار اپلیکیشن موبایل",
+    description:
+      "با افتخار انتشار اپلیکیشن موبایل خود را اعلام می‌کنیم؛ اکنون در موبایل اپل و موبایل اندروید در دسترس است.",
+    items: [
+      "تجربه بومی موبایل برای بهره‌وری در هر مکان",
+      "پشتیبانی از حالت آفلاین برای کار بدون اتصال اینترنت",
+      "اعلان‌های فوری برای به‌روزرسانی‌های مهم",
+      "احراز هویت بیومتریک برای امنیت بیشتر",
+    ],
+    image:
+      "/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg",
+  },
+];
diff --git a/blocks/chart-card1.tsx b/blocks/chart-card1.tsx
new file mode 100644
index 0000000..9ed32ae
--- /dev/null
+++ b/blocks/chart-card1.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard1Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const chartData = [
+  { month: monthLabel(0), value: 186 },
+  { month: monthLabel(1), value: 305 },
+  { month: monthLabel(2), value: 237 },
+  { month: monthLabel(3), value: 273 },
+  { month: monthLabel(4), value: 209 },
+  { month: monthLabel(5), value: 214 },
+  { month: monthLabel(6), value: 286 },
+  { month: monthLabel(7), value: 320 },
+  { month: monthLabel(8), value: 298 },
+  { month: monthLabel(9), value: 342 },
+  { month: monthLabel(10), value: 375 },
+  { month: monthLabel(11), value: 410 },
+];
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const chartConfig = {
+  value: {
+    label: "درآمد",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard1 = ({
+  title = "روند درآمد",
+  description = "درآمد ماهانه در سال جاری",
+  className,
+}: ChartCard1Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <AreaChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={48}
+              tickFormatter={(value) =>
+                compactCurrencyFormatter.format(Number(value))
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    currencyFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke="var(--color-value)"
+              strokeWidth={2}
+              fill="url(#chartGradient)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard1 };
diff --git a/blocks/chart-card10.tsx b/blocks/chart-card10.tsx
new file mode 100644
index 0000000..5625335
--- /dev/null
+++ b/blocks/chart-card10.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard10Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const chartData = [
+  { month: monthLabel(0), organic: 186, paid: 80, referral: 45 },
+  { month: monthLabel(1), organic: 305, paid: 200, referral: 65 },
+  { month: monthLabel(2), organic: 237, paid: 120, referral: 55 },
+  { month: monthLabel(3), organic: 273, paid: 190, referral: 70 },
+  { month: monthLabel(4), organic: 209, paid: 130, referral: 50 },
+  { month: monthLabel(5), organic: 214, paid: 140, referral: 60 },
+];
+
+const chartConfig = {
+  organic: {
+    label: "ارگانیک",
+    color: "var(--chart-1)",
+  },
+  paid: {
+    label: "پولی",
+    color: "var(--chart-2)",
+  },
+  referral: {
+    label: "ارجاع",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard10 = ({
+  title = "کانال‌های جذب",
+  description = "تفکیک منابع ترافیک به تفکیک ماه",
+  className,
+}: ChartCard10Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <BarChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={40}
+              tickFormatter={(value) =>
+                compactNumberFormatter.format(Number(value))
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    numberFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="organic"
+              stackId="a"
+              fill="var(--color-organic)"
+              radius={[0, 0, 0, 0]}
+            />
+            <Bar
+              dataKey="paid"
+              stackId="a"
+              fill="var(--color-paid)"
+              radius={[0, 0, 0, 0]}
+            />
+            <Bar
+              dataKey="referral"
+              stackId="a"
+              fill="var(--color-referral)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard10 };
diff --git a/blocks/chart-card11.tsx b/blocks/chart-card11.tsx
new file mode 100644
index 0000000..cfe587f
--- /dev/null
+++ b/blocks/chart-card11.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard11Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  maximumFractionDigits: 0,
+});
+
+const formatPercent = (value: number) => {
+  const ratio = value <= 1 ? value : value / 100;
+  return percentFormatter.format(ratio);
+};
+
+const chartData = [
+  { category: "الکترونیک", inStock: 65, lowStock: 20, outOfStock: 15 },
+  { category: "پوشاک", inStock: 72, lowStock: 18, outOfStock: 10 },
+  { category: "خانه", inStock: 58, lowStock: 25, outOfStock: 17 },
+  { category: "ورزش", inStock: 80, lowStock: 12, outOfStock: 8 },
+  { category: "کتاب", inStock: 45, lowStock: 35, outOfStock: 20 },
+];
+
+const chartConfig = {
+  inStock: {
+    label: "موجود",
+    color: "var(--chart-1)",
+  },
+  lowStock: {
+    label: "کم‌موجود",
+    color: "var(--chart-4)",
+  },
+  outOfStock: {
+    label: "ناموجود",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard11 = ({
+  title = "وضعیت موجودی",
+  description = "سطح موجودی به تفکیک دسته (درصد)",
+  className,
+}: ChartCard11Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <BarChart
+            data={chartData}
+            layout="vertical"
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+            stackOffset="expand"
+            barSize={24}
+          >
+            <CartesianGrid strokeDasharray="3 3" horizontal={false} />
+            <XAxis
+              type="number"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              tickFormatter={(value) => formatPercent(Number(value))}
+            />
+            <YAxis
+              type="category"
+              dataKey="category"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+              width={88}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value, name) => (
+                    <span className="tabular-nums">
+                      {chartConfig[name as keyof typeof chartConfig]?.label}:{" "}
+                      {formatPercent(Number(value))}
+                    </span>
+                  )}
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="inStock"
+              stackId="a"
+              fill="var(--color-inStock)"
+              radius={[4, 0, 0, 4]}
+            />
+            <Bar
+              dataKey="lowStock"
+              stackId="a"
+              fill="var(--color-lowStock)"
+              radius={0}
+            />
+            <Bar
+              dataKey="outOfStock"
+              stackId="a"
+              fill="var(--color-outOfStock)"
+              radius={[0, 4, 4, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard11 };
diff --git a/blocks/chart-card12.tsx b/blocks/chart-card12.tsx
new file mode 100644
index 0000000..d9595fb
--- /dev/null
+++ b/blocks/chart-card12.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { Bar, BarChart, XAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard12Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const chartData = [
+  { quarter: "سه‌ماهه ۱", revenue: 4200, costs: 2800, profit: 1400 },
+  { quarter: "سه‌ماهه ۲", revenue: 5100, costs: 3200, profit: 1900 },
+  { quarter: "سه‌ماهه ۳", revenue: 4800, costs: 3000, profit: 1800 },
+  { quarter: "سه‌ماهه ۴", revenue: 6200, costs: 3800, profit: 2400 },
+];
+
+const chartConfig = {
+  revenue: {
+    label: "درآمد",
+    color: "var(--chart-1)",
+  },
+  costs: {
+    label: "هزینه",
+    color: "var(--chart-2)",
+  },
+  profit: {
+    label: "سود",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard12 = ({
+  title = "تفکیک سه‌ماهه",
+  description = "درآمد، هزینه و سود به تفکیک فصل",
+  className,
+}: ChartCard12Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <BarChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 10, bottom: 0 }}
+          >
+            <XAxis
+              dataKey="quarter"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    currencyFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="revenue"
+              stackId="a"
+              fill="var(--color-revenue)"
+              radius={[0, 0, 0, 0]}
+            />
+            <Bar
+              dataKey="costs"
+              stackId="a"
+              fill="var(--color-costs)"
+              radius={[0, 0, 0, 0]}
+            />
+            <Bar
+              dataKey="profit"
+              stackId="a"
+              fill="var(--color-profit)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard12 };
diff --git a/blocks/chart-card13.tsx b/blocks/chart-card13.tsx
new file mode 100644
index 0000000..0994f18
--- /dev/null
+++ b/blocks/chart-card13.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard13Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const chartData = [
+  { month: monthLabel(0), value: 2400 },
+  { month: monthLabel(1), value: -1398 },
+  { month: monthLabel(2), value: 3200 },
+  { month: monthLabel(3), value: -2780 },
+  { month: monthLabel(4), value: 1890 },
+  { month: monthLabel(5), value: 2390 },
+  { month: monthLabel(6), value: -1490 },
+  { month: monthLabel(7), value: 3490 },
+];
+
+const chartConfig = {
+  value: {
+    label: "تغییر خالص",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard13 = ({
+  title = "تغییر خالص ماهانه",
+  description = "سود و زیان به تفکیک ماه",
+  className,
+}: ChartCard13Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <BarChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={52}
+              tickFormatter={(value) =>
+                compactCurrencyFormatter.format(Number(value))
+              }
+            />
+            <ReferenceLine y={0} stroke="var(--border)" strokeWidth={1} />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) => {
+                    const num = Number(value);
+                    const formatted = currencyFormatter.format(Math.abs(num));
+                    return num < 0
+                      ? `${formatted} (زیان)`
+                      : `${formatted} (سود)`;
+                  }}
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <Bar dataKey="value" radius={[4, 4, 4, 4]}>
+              {chartData.map((entry, index) => (
+                <Cell
+                  key={index}
+                  fill={entry.value >= 0 ? "var(--chart-1)" : "var(--chart-5)"}
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard13 };
diff --git a/blocks/chart-card14.tsx b/blocks/chart-card14.tsx
new file mode 100644
index 0000000..644d47d
--- /dev/null
+++ b/blocks/chart-card14.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard14Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const formatMilliseconds = (value: number) =>
+  `${numberFormatter.format(value)} میلی‌ثانیه`;
+
+const chartData = [
+  { month: monthLabel(0), min: 120, max: 180, avg: 150 },
+  { month: monthLabel(1), min: 140, max: 220, avg: 175 },
+  { month: monthLabel(2), min: 130, max: 195, avg: 160 },
+  { month: monthLabel(3), min: 155, max: 240, avg: 190 },
+  { month: monthLabel(4), min: 145, max: 210, avg: 175 },
+  { month: monthLabel(5), min: 160, max: 250, avg: 200 },
+  { month: monthLabel(6), min: 170, max: 260, avg: 215 },
+  { month: monthLabel(7), min: 165, max: 245, avg: 205 },
+];
+
+const chartConfig = {
+  range: {
+    label: "بازه",
+    color: "var(--chart-1)",
+  },
+  avg: {
+    label: "میانگین",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard14 = ({
+  title = "بازه زمان پاسخ",
+  description = "حداقل، حداکثر و میانگین زمان پاسخ",
+  className,
+}: ChartCard14Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <AreaChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="rangeGradient14" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--chart-1)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--chart-1)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={48}
+              tickFormatter={(value) =>
+                `${numberFormatter.format(Number(value))}ms`
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value, name) => {
+                    const formatted = formatMilliseconds(Number(value));
+                    if (name === "min") return `حداقل: ${formatted}`;
+                    if (name === "max") return `حداکثر: ${formatted}`;
+                    if (name === "avg") return `میانگین: ${formatted}`;
+                    return formatted;
+                  }}
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <Area
+              type="monotone"
+              dataKey="max"
+              stackId="1"
+              stroke="var(--chart-1)"
+              fill="url(#rangeGradient14)"
+              strokeWidth={0}
+            />
+            <Area
+              type="monotone"
+              dataKey="min"
+              stackId="1"
+              stroke="var(--chart-1)"
+              fill="var(--background)"
+              strokeWidth={0}
+            />
+            <Area
+              type="monotone"
+              dataKey="avg"
+              stroke="var(--chart-2)"
+              fill="none"
+              strokeWidth={2}
+              strokeDasharray="4 4"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard14 };
diff --git a/blocks/chart-card15.tsx b/blocks/chart-card15.tsx
new file mode 100644
index 0000000..af7287a
--- /dev/null
+++ b/blocks/chart-card15.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  LabelList,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard15Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const rawData = [
+  { name: "شروع", value: 10000 },
+  { name: "فروش", value: 5000 },
+  { name: "بازپرداخت", value: -1200 },
+  { name: "هزینه", value: -3500 },
+  { name: "مالیات", value: -800 },
+  { name: "پایان", value: 9500 },
+];
+
+const chartData = rawData.map((item, index) => {
+  if (index === 0 || item.name === "پایان") {
+    return {
+      name: item.name,
+      value: item.value,
+      start: 0,
+      isTotal: true,
+    };
+  }
+
+  let runningTotal = rawData[0].value;
+  for (let i = 1; i < index; i++) {
+    runningTotal += rawData[i].value;
+  }
+
+  return {
+    name: item.name,
+    value: item.value,
+    start: item.value >= 0 ? runningTotal : runningTotal + item.value,
+    isTotal: false,
+  };
+});
+
+const chartConfig = {
+  value: {
+    label: "مبلغ",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard15 = ({
+  title = "آبشار درآمد",
+  description = "تفکیک تغییرات درآمد",
+  className,
+}: ChartCard15Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <BarChart
+            data={chartData}
+            margin={{ top: 20, right: 10, left: 0, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="name"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={11}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={52}
+              tickFormatter={(value) =>
+                compactCurrencyFormatter.format(Number(value))
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) => {
+                    const num = Number(value);
+                    if (num === 0) return null;
+                    const formatted = currencyFormatter.format(Math.abs(num));
+                    return num < 0
+                      ? `${formatted} (کاهش)`
+                      : `${formatted} (افزایش)`;
+                  }}
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <Bar dataKey="start" stackId="a" fill="transparent" />
+            <Bar dataKey="value" stackId="a" radius={[4, 4, 4, 4]}>
+              {chartData.map((entry, index) => (
+                <Cell
+                  key={index}
+                  fill={
+                    entry.isTotal
+                      ? "var(--chart-3)"
+                      : entry.value >= 0
+                        ? "var(--chart-1)"
+                        : "var(--chart-5)"
+                  }
+                />
+              ))}
+              <LabelList
+                dataKey="value"
+                position="top"
+                fontSize={10}
+                formatter={(value) => {
+                  const num = Number(value);
+                  if (num === 0) return "";
+                  return compactCurrencyFormatter.format(Math.abs(num));
+                }}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard15 };
diff --git a/blocks/chart-card16.tsx b/blocks/chart-card16.tsx
new file mode 100644
index 0000000..f98d65c
--- /dev/null
+++ b/blocks/chart-card16.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard16Props {
+  title?: string;
+  description?: string;
+  value?: number;
+  max?: number;
+  className?: string;
+}
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const chartConfig = {
+  value: {
+    label: "پیشرفت",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard16 = ({
+  title = "پیشرفت هدف",
+  description = "میزان تحقق هدف ماهانه",
+  value = 72,
+  max = 100,
+  className,
+}: ChartCard16Props) => {
+  const chartData = [{ value, fill: "var(--chart-1)" }];
+  const percentage = Math.round((value / max) * 100);
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex justify-center">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square h-52"
+        >
+          <RadialBarChart
+            data={chartData}
+            startAngle={90}
+            endAngle={90 - (360 * value) / max}
+            innerRadius={80}
+            outerRadius={110}
+          >
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-xl font-bold tabular-nums"
+                        >
+                          {numberFormatter.format(percentage)}٪
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground text-sm"
+                        >
+                          از هدف
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+            <RadialBar
+              dataKey="value"
+              background={{ fill: "var(--muted)" }}
+              cornerRadius={10}
+            />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard16 };
diff --git a/blocks/chart-card17.tsx b/blocks/chart-card17.tsx
new file mode 100644
index 0000000..b80fed9
--- /dev/null
+++ b/blocks/chart-card17.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard17Props {
+  title?: string;
+  description?: string;
+  value?: number;
+  max?: number;
+  unit?: string;
+  className?: string;
+}
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const chartConfig = {
+  value: {
+    label: "امتیاز",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard17 = ({
+  title = "امتیاز عملکرد",
+  description = "عملکرد فعلی سامانه",
+  value = 73,
+  max = 100,
+  unit = "",
+  className,
+}: ChartCard17Props) => {
+  const percentage = Math.round((value / max) * 100);
+  const chartData = [{ value: percentage, fill: "var(--chart-1)" }];
+
+  const startAngle = 180;
+  const endAngle = 180 - (180 * percentage) / 100;
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col items-center">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-2/1 h-40 w-80"
+        >
+          <RadialBarChart
+            data={chartData}
+            startAngle={startAngle}
+            endAngle={endAngle}
+            innerRadius={100}
+            outerRadius={140}
+            cx="50%"
+            cy="100%"
+          >
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) - 16}
+                          className="fill-foreground text-3xl font-bold tabular-nums"
+                        >
+                          {numberFormatter.format(value)}
+                          {unit}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 8}
+                          className="fill-muted-foreground text-sm"
+                        >
+                          از {numberFormatter.format(max)}
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+            <RadialBar
+              dataKey="value"
+              background={{ fill: "var(--muted)" }}
+              cornerRadius={10}
+            />
+          </RadialBarChart>
+        </ChartContainer>
+        <div className="-mt-2 flex w-72 justify-between text-sm text-muted-foreground tabular-nums">
+          <span>{numberFormatter.format(0)}</span>
+          <span>{numberFormatter.format(max)}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard17 };
diff --git a/blocks/chart-card18.tsx b/blocks/chart-card18.tsx
new file mode 100644
index 0000000..725b141
--- /dev/null
+++ b/blocks/chart-card18.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface RingData {
+  label: string;
+  value: number;
+  max: number;
+  color: string;
+}
+
+interface ChartCard18Props {
+  title?: string;
+  description?: string;
+  rings?: RingData[];
+  className?: string;
+}
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const defaultRings: RingData[] = [
+  { label: "حرکت", value: 420, max: 500, color: "var(--chart-5)" },
+  { label: "ورزش", value: 28, max: 30, color: "var(--chart-1)" },
+  { label: "ایستادن", value: 10, max: 12, color: "var(--chart-2)" },
+];
+
+const ChartCard18 = ({
+  title = "حلقه‌های فعالیت",
+  description = "پیشرفت فعالیت روزانه",
+  rings = defaultRings,
+  className,
+}: ChartCard18Props) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const size = 180;
+  const strokeWidth = 16;
+  const gap = 6;
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-center gap-8">
+          <div className="relative" style={{ width: size, height: size }}>
+            <svg width={size} height={size} className="-rotate-90">
+              {rings.map((ring, index) => {
+                const radius =
+                  (size - strokeWidth) / 2 - index * (strokeWidth + gap);
+                const circumference = 2 * Math.PI * radius;
+                const percentage = Math.min(ring.value / ring.max, 1);
+                const strokeDashoffset = circumference * (1 - percentage);
+                const isActive = activeIndex === index;
+                const isInactive =
+                  activeIndex !== null && activeIndex !== index;
+
+                return (
+                  <g
+                    key={ring.label}
+                    style={{ cursor: "pointer" }}
+                    onMouseEnter={() => setActiveIndex(index)}
+                    onMouseLeave={() => setActiveIndex(null)}
+                  >
+                    <circle
+                      cx={size / 2}
+                      cy={size / 2}
+                      r={radius}
+                      fill="none"
+                      stroke="var(--muted)"
+                      strokeWidth={strokeWidth}
+                      style={{
+                        transition: "opacity 0.15s ease-out",
+                        opacity: isInactive ? 0.3 : 1,
+                      }}
+                    />
+                    <circle
+                      cx={size / 2}
+                      cy={size / 2}
+                      r={radius}
+                      fill="none"
+                      stroke={ring.color}
+                      strokeWidth={strokeWidth}
+                      strokeLinecap="round"
+                      strokeDasharray={circumference}
+                      strokeDashoffset={strokeDashoffset}
+                      style={{
+                        transition:
+                          "stroke-dashoffset 0.5s ease-in-out, opacity 0.15s ease-out",
+                        opacity: isInactive ? 0.3 : 1,
+                      }}
+                    />
+                  </g>
+                );
+              })}
+            </svg>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            {rings.map((ring, index) => {
+              const percentage = Math.round((ring.value / ring.max) * 100);
+              const isActive = activeIndex === index;
+              const isInactive = activeIndex !== null && activeIndex !== index;
+
+              return (
+                <div
+                  key={ring.label}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 transition-all duration-150 ease-out",
+                    isActive && "bg-muted",
+                    !isActive && "hover:bg-muted/50",
+                    isInactive && "opacity-40",
+                  )}
+                  onMouseEnter={() => setActiveIndex(index)}
+                  onMouseLeave={() => setActiveIndex(null)}
+                >
+                  <div
+                    className={cn(
+                      "size-3 rounded-full transition-transform duration-150 ease-out",
+                      isActive && "scale-125",
+                    )}
+                    style={{ backgroundColor: ring.color }}
+                  />
+                  <div>
+                    <div className="text-sm font-medium">{ring.label}</div>
+                    <div className="text-xs text-muted-foreground tabular-nums">
+                      {numberFormatter.format(ring.value)}/
+                      {numberFormatter.format(ring.max)} (
+                      {numberFormatter.format(percentage)}٪)
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard18 };
diff --git a/blocks/chart-card19.tsx b/blocks/chart-card19.tsx
new file mode 100644
index 0000000..10dae7c
--- /dev/null
+++ b/blocks/chart-card19.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard19Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const chartData = [
+  { name: "Chrome", value: 45, fill: "var(--chart-1)" },
+  { name: "Safari", value: 28, fill: "var(--chart-2)" },
+  { name: "Firefox", value: 15, fill: "var(--chart-3)" },
+  { name: "Edge", value: 8, fill: "var(--chart-4)" },
+  { name: "سایر", value: 4, fill: "var(--chart-5)" },
+];
+
+const chartConfig = {
+  Chrome: { label: "Chrome", color: "var(--chart-1)" },
+  Safari: { label: "Safari", color: "var(--chart-2)" },
+  Firefox: { label: "Firefox", color: "var(--chart-3)" },
+  Edge: { label: "Edge", color: "var(--chart-4)" },
+  سایر: { label: "سایر", color: "var(--chart-5)" },
+} satisfies ChartConfig;
+
+const ChartCard19 = ({
+  title = "سهم مرورگرها",
+  description = "ترافیک به تفکیک نوع مرورگر",
+  className,
+}: ChartCard19Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-center gap-6">
+          <ChartContainer config={chartConfig} className="aspect-square h-48">
+            <RadialBarChart
+              data={chartData}
+              innerRadius={30}
+              outerRadius={90}
+              startAngle={90}
+              endAngle={-270}
+            >
+              <PolarAngleAxis
+                type="number"
+                domain={[0, 100]}
+                angleAxisId={0}
+                tick={false}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={
+                  <ChartTooltipContent
+                    hideLabel
+                    formatter={(value, name) => (
+                      <span className="tabular-nums">
+                        {chartConfig[name as keyof typeof chartConfig]?.label ??
+                          name}
+                        : {percentFormatter.format(Number(value))}٪
+                      </span>
+                    )}
+                  />
+                }
+              />
+              <RadialBar
+                dataKey="value"
+                background={{ fill: "var(--muted)" }}
+                cornerRadius={4}
+              />
+            </RadialBarChart>
+          </ChartContainer>
+
+          <div className="flex flex-col gap-2">
+            {chartData.map((item) => (
+              <div key={item.name} className="flex items-center gap-2">
+                <div
+                  className="size-3 rounded-sm"
+                  style={{ backgroundColor: item.fill }}
+                />
+                <span className="text-sm">{item.name}</span>
+                <span className="ms-auto text-sm font-medium tabular-nums">
+                  {percentFormatter.format(item.value)}٪
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard19 };
diff --git a/blocks/chart-card2.tsx b/blocks/chart-card2.tsx
new file mode 100644
index 0000000..7010500
--- /dev/null
+++ b/blocks/chart-card2.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { useState } from "react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface ChartCard2Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  weekday: "short",
+});
+
+const monthFormatter = new Intl.DateTimeFormat("fa-IR", { month: "short" });
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+type ChartPoint = { day: string; value: number };
+
+const chartData: Record<"7d" | "30d" | "90d", ChartPoint[]> = {
+  "7d": [
+    { day: weekdayFormatter.format(new Date(2025, 0, 6)), value: 186 },
+    { day: weekdayFormatter.format(new Date(2025, 0, 7)), value: 205 },
+    { day: weekdayFormatter.format(new Date(2025, 0, 8)), value: 237 },
+    { day: weekdayFormatter.format(new Date(2025, 0, 9)), value: 223 },
+    { day: weekdayFormatter.format(new Date(2025, 0, 10)), value: 249 },
+    { day: weekdayFormatter.format(new Date(2025, 0, 11)), value: 214 },
+    { day: weekdayFormatter.format(new Date(2025, 0, 12)), value: 231 },
+  ],
+  "30d": [
+    { day: "هفته ۱", value: 1420 },
+    { day: "هفته ۲", value: 1650 },
+    { day: "هفته ۳", value: 1580 },
+    { day: "هفته ۴", value: 1820 },
+  ],
+  "90d": [
+    { day: monthFormatter.format(new Date(2025, 0, 1)), value: 4200 },
+    { day: monthFormatter.format(new Date(2025, 1, 1)), value: 4800 },
+    { day: monthFormatter.format(new Date(2025, 2, 1)), value: 5100 },
+  ],
+};
+
+const periodTabs = [
+  { value: "7d", label: "۷ روز" },
+  { value: "30d", label: "۳۰ روز" },
+  { value: "90d", label: "۹۰ روز" },
+] as const;
+
+const chartConfig = {
+  value: {
+    label: "بازدیدکنندگان",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard2 = ({
+  title = "ترافیک وب‌سایت",
+  description = "بازدیدکنندگان یکتا در بازه زمانی",
+  className,
+}: ChartCard2Props) => {
+  const [period, setPeriod] = useState<"7d" | "30d" | "90d">("7d");
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader className="flex flex-row items-center justify-between space-y-0">
+        <div>
+          <CardTitle>{title}</CardTitle>
+          <CardDescription>{description}</CardDescription>
+        </div>
+        <Tabs
+          value={period}
+          onValueChange={(v) => setPeriod(v as "7d" | "30d" | "90d")}
+        >
+          <TabsList>
+            {periodTabs.map((tab) => (
+              <TabsTrigger key={tab.value} value={tab.value}>
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <AreaChart
+            data={chartData[period]}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="chartGradient2" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="day"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={40}
+              tickFormatter={(value) =>
+                compactNumberFormatter.format(Number(value))
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    numberFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke="var(--color-value)"
+              strokeWidth={2}
+              fill="url(#chartGradient2)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard2 };
diff --git a/blocks/chart-card20.tsx b/blocks/chart-card20.tsx
new file mode 100644
index 0000000..395ff68
--- /dev/null
+++ b/blocks/chart-card20.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard20Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const chartData = [
+  { skill: "طراحی", value: 85 },
+  { skill: "فرانت‌اند", value: 92 },
+  { skill: "بک‌اند", value: 78 },
+  { skill: "دواپس", value: 65 },
+  { skill: "تست", value: 70 },
+  { skill: "ارتباطات", value: 88 },
+];
+
+const chartConfig = {
+  value: {
+    label: "امتیاز",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard20 = ({
+  title = "ارزیابی مهارت‌ها",
+  description = "امتیاز شایستگی در حوزه‌های مختلف",
+  className,
+}: ChartCard20Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex justify-center">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square h-64"
+        >
+          <RadarChart data={chartData} cx="50%" cy="50%" outerRadius="80%">
+            <PolarGrid gridType="polygon" />
+            <PolarAngleAxis
+              dataKey="skill"
+              tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
+            />
+            <PolarRadiusAxis
+              angle={30}
+              domain={[0, 100]}
+              tick={{ fontSize: 10 }}
+              axisLine={false}
+              tickFormatter={(value) => numberFormatter.format(Number(value))}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    numberFormatter.format(Number(value))
+                  }
+                />
+              }
+            />
+            <Radar
+              name="امتیاز"
+              dataKey="value"
+              stroke="var(--chart-1)"
+              fill="var(--chart-1)"
+              fillOpacity={0.3}
+              strokeWidth={2}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard20 };
diff --git a/blocks/chart-card21.tsx b/blocks/chart-card21.tsx
new file mode 100644
index 0000000..61cc98a
--- /dev/null
+++ b/blocks/chart-card21.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface FunnelStep {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+interface ChartCard21Props {
+  title?: string;
+  description?: string;
+  data?: FunnelStep[];
+  className?: string;
+}
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+});
+
+const defaultData: FunnelStep[] = [
+  { label: "بازدیدکنندگان", value: 10000 },
+  { label: "سرنخ‌ها", value: 6500 },
+  { label: "واجد شرایط", value: 3200 },
+  { label: "پیشنهادها", value: 1800 },
+  { label: "بسته‌شده", value: 950 },
+];
+
+const ChartCard21 = ({
+  title = "قیف فروش",
+  description = "نرخ تبدیل در مراحل قیف",
+  data = defaultData,
+  className,
+}: ChartCard21Props) => {
+  const maxValue = Math.max(...data.map((d) => d.value));
+  const colors = [
+    "ارزش افزوده(--chart-1)",
+    "ارزش افزوده(--chart-2)",
+    "ارزش افزوده(--chart-3)",
+    "ارزش افزوده(--chart-4)",
+    "ارزش افزوده(--chart-5)",
+  ];
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {data.map((step, index) => {
+            const widthPercent = (step.value / maxValue) * 100;
+            const conversionRate =
+              index > 0
+                ? (step.value / data[index - 1].value) * 100
+                : null;
+
+            return (
+              <div key={step.label} className="space-y-1">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="font-medium">{step.label}</span>
+                  <div className="flex items-center gap-2 tabular-nums">
+                    <span className="text-muted-foreground">
+                      {numberFormatter.format(step.value)}
+                    </span>
+                    {conversionRate !== null && (
+                      <span className="text-xs text-muted-foreground">
+                        ({oneDecimalFormatter.format(conversionRate)}٪)
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="h-8 w-full rounded-sm bg-muted">
+                  <div
+                    className="flex h-full items-center justify-center rounded-sm transition-all duration-500"
+                    style={{
+                      width: `${widthPercent}%`,
+                      backgroundColor:
+                        step.color || colors[index % colors.length],
+                    }}
+                  >
+                    {widthPercent > 15 && (
+                      <span className="text-xs font-medium text-white tabular-nums">
+                        {numberFormatter.format(
+                          Math.round((step.value / maxValue) * 100),
+                        )}
+                        ٪
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard21 };
diff --git a/blocks/chart-card22.tsx b/blocks/chart-card22.tsx
new file mode 100644
index 0000000..e35431e
--- /dev/null
+++ b/blocks/chart-card22.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { ResponsiveContainer, Treemap } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface ChartCard22Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const chartData = [
+  {
+    name: "الکترونیک",
+    children: [
+      { name: "گوشی", size: 4500, color: "var(--chart-1)" },
+      { name: "لپ‌تاپ", size: 3200, color: "var(--chart-1)" },
+      { name: "تبلت", size: 1800, color: "var(--chart-1)" },
+    ],
+  },
+  {
+    name: "پوشاک",
+    children: [
+      { name: "پیراهن", size: 2800, color: "var(--chart-2)" },
+      { name: "شلوار", size: 2100, color: "var(--chart-2)" },
+      { name: "کفش", size: 1600, color: "var(--chart-2)" },
+    ],
+  },
+  {
+    name: "خانه",
+    children: [
+      { name: "مبلمان", size: 2400, color: "var(--chart-3)" },
+      { name: "دکور", size: 1200, color: "var(--chart-3)" },
+    ],
+  },
+  {
+    name: "ورزش",
+    children: [
+      { name: "تجهیزات", size: 1800, color: "var(--chart-4)" },
+      { name: "پوشاک ورزشی", size: 900, color: "var(--chart-4)" },
+    ],
+  },
+];
+
+interface TreemapContentProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  name: string;
+  color?: string;
+  depth: number;
+}
+
+const CustomContent = ({
+  x,
+  y,
+  width,
+  height,
+  name,
+  color,
+  depth,
+}: TreemapContentProps) => {
+  if (depth !== 2) return null;
+
+  const showLabel = width > 50 && height > 30;
+
+  return (
+    <g>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        fill={color || "var(--chart-1)"}
+        stroke="var(--background)"
+        strokeWidth={2}
+        rx={4}
+      />
+      {showLabel && (
+        <text
+          x={x + width / 2}
+          y={y + height / 2}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          className="fill-white text-xs font-medium"
+          style={{ pointerEvents: "none" }}
+        >
+          {name}
+        </text>
+      )}
+    </g>
+  );
+};
+
+const ChartCard22 = ({
+  title = "فروش به تفکیک دسته",
+  description = "توزیع درآمد میان دسته‌های محصول",
+  className,
+}: ChartCard22Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="h-64 w-full">
+          <ResponsiveContainer width="100%" height="100%">
+            <Treemap
+              data={chartData}
+              dataKey="size"
+              aspectRatio={4 / 3}
+              stroke="var(--background)"
+              content={
+                <CustomContent
+                  x={0}
+                  y={0}
+                  width={0}
+                  height={0}
+                  name=""
+                  depth={0}
+                />
+              }
+            />
+          </ResponsiveContainer>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-4">
+          {chartData.map((category, index) => (
+            <div key={category.name} className="flex items-center gap-2">
+              <div
+                className="size-3 rounded-sm"
+                style={{
+                  backgroundColor: `var(--chart-${index + 1})`,
+                }}
+              />
+              <span className="text-sm">{category.name}</span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard22 };
diff --git a/blocks/chart-card23.tsx b/blocks/chart-card23.tsx
new file mode 100644
index 0000000..82614d7
--- /dev/null
+++ b/blocks/chart-card23.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import {
+  CartesianGrid,
+  Scatter,
+  ScatterChart,
+  XAxis,
+  YAxis,
+  ZAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard23Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const chartData = [
+  { x: 100, y: 200, name: "محصول ۱" },
+  { x: 120, y: 100, name: "محصول ۲" },
+  { x: 170, y: 300, name: "محصول ۳" },
+  { x: 140, y: 250, name: "محصول ۴" },
+  { x: 150, y: 400, name: "محصول ۵" },
+  { x: 110, y: 280, name: "محصول ۶" },
+  { x: 200, y: 320, name: "محصول ۷" },
+  { x: 180, y: 150, name: "محصول ۸" },
+  { x: 160, y: 350, name: "محصول ۹" },
+  { x: 190, y: 220, name: "محصول ۱۰" },
+  { x: 130, y: 180, name: "محصول ۱۱" },
+  { x: 220, y: 280, name: "محصول ۱۲" },
+];
+
+const chartConfig = {
+  x: {
+    label: "قیمت",
+    color: "var(--chart-1)",
+  },
+  y: {
+    label: "تعداد فروش",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard23 = ({
+  title = "قیمت در برابر فروش",
+  description = "همبستگی بین قیمت و تعداد فروش",
+  className,
+}: ChartCard23Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <ScatterChart margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis
+              type="number"
+              dataKey="x"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={52}
+              tickFormatter={(value) =>
+                currencyFormatter.format(Number(value))
+              }
+            />
+            <YAxis
+              type="number"
+              dataKey="y"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={40}
+              tickFormatter={(value) => numberFormatter.format(Number(value))}
+            />
+            <ZAxis range={[60, 60]} />
+            <ChartTooltip
+              cursor={{ strokeDasharray: "3 3" }}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(_, payload) => {
+                    const item = payload?.[0]?.payload as
+                      | { name?: string }
+                      | undefined;
+                    return item?.name ?? "";
+                  }}
+                  formatter={(value, name) => {
+                    if (name === "x") {
+                      return `قیمت: ${currencyFormatter.format(Number(value))}`;
+                    }
+                    if (name === "y") {
+                      return `تعداد: ${numberFormatter.format(Number(value))}`;
+                    }
+                    return `${name}: ${value}`;
+                  }}
+                />
+              }
+            />
+            <Scatter data={chartData} fill="var(--chart-1)" fillOpacity={0.7} />
+          </ScatterChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard23 };
diff --git a/blocks/chart-card24.tsx b/blocks/chart-card24.tsx
new file mode 100644
index 0000000..5a46ba7
--- /dev/null
+++ b/blocks/chart-card24.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import {
+  CartesianGrid,
+  Scatter,
+  ScatterChart,
+  XAxis,
+  YAxis,
+  ZAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard24Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const dataA = [
+  { x: 100, y: 200, z: 200 },
+  { x: 120, y: 100, z: 260 },
+  { x: 170, y: 300, z: 400 },
+  { x: 140, y: 250, z: 280 },
+  { x: 150, y: 400, z: 500 },
+  { x: 110, y: 280, z: 200 },
+];
+
+const dataB = [
+  { x: 200, y: 260, z: 240 },
+  { x: 240, y: 290, z: 220 },
+  { x: 190, y: 290, z: 250 },
+  { x: 198, y: 250, z: 210 },
+  { x: 180, y: 280, z: 260 },
+  { x: 210, y: 220, z: 230 },
+];
+
+const chartConfig = {
+  groupA: {
+    label: "گروه الف",
+    color: "var(--chart-1)",
+  },
+  groupB: {
+    label: "گروه ب",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard24 = ({
+  title = "بخش‌های بازار",
+  description = "قیمت، حجم و درآمد به تفکیک بخش",
+  className,
+}: ChartCard24Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <ScatterChart margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis
+              type="number"
+              dataKey="x"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={52}
+              tickFormatter={(value) =>
+                currencyFormatter.format(Number(value))
+              }
+            />
+            <YAxis
+              type="number"
+              dataKey="y"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={40}
+              tickFormatter={(value) => numberFormatter.format(Number(value))}
+            />
+            <ZAxis type="number" dataKey="z" range={[40, 400]} />
+            <ChartTooltip
+              cursor={{ strokeDasharray: "3 3" }}
+              content={
+                <ChartTooltipContent
+                  formatter={(value, name) => {
+                    if (name === "x") {
+                      return `قیمت: ${currencyFormatter.format(Number(value))}`;
+                    }
+                    if (name === "y") {
+                      return `حجم: ${numberFormatter.format(Number(value))}`;
+                    }
+                    if (name === "z") {
+                      return `درآمد: ${compactCurrencyFormatter.format(
+                        Number(value) * 1000,
+                      )}`;
+                    }
+                    return `${name}: ${value}`;
+                  }}
+                />
+              }
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Scatter
+              name="groupA"
+              data={dataA}
+              fill="var(--color-groupA)"
+              fillOpacity={0.7}
+            />
+            <Scatter
+              name="groupB"
+              data={dataB}
+              fill="var(--color-groupB)"
+              fillOpacity={0.7}
+            />
+          </ScatterChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard24 };
diff --git a/blocks/chart-card25.tsx b/blocks/chart-card25.tsx
new file mode 100644
index 0000000..e228761
--- /dev/null
+++ b/blocks/chart-card25.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard25Props {
+  title?: string;
+  description?: string;
+  target?: number;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const chartData = [
+  { month: monthLabel(0), value: 186 },
+  { month: monthLabel(1), value: 305 },
+  { month: monthLabel(2), value: 237 },
+  { month: monthLabel(3), value: 273 },
+  { month: monthLabel(4), value: 209 },
+  { month: monthLabel(5), value: 314 },
+  { month: monthLabel(6), value: 286 },
+  { month: monthLabel(7), value: 320 },
+];
+
+const chartConfig = {
+  value: {
+    label: "درآمد",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard25 = ({
+  title = "درآمد در برابر هدف",
+  description = "درآمد ماهانه با خط مرجع هدف",
+  target = 280,
+  className,
+}: ChartCard25Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <AreaChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="chartGradient25" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={48}
+              tickFormatter={(value) =>
+                compactCurrencyFormatter.format(Number(value))
+              }
+            />
+            <ReferenceLine
+              y={target}
+              stroke="var(--chart-5)"
+              strokeDasharray="4 4"
+              strokeWidth={2}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    currencyFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke="var(--color-value)"
+              strokeWidth={2}
+              fill="url(#chartGradient25)"
+            />
+          </AreaChart>
+        </ChartContainer>
+        <div className="mt-4 flex flex-wrap items-center justify-center gap-6 text-sm">
+          <div className="flex items-center gap-2">
+            <div className="h-0.5 w-4 bg-[var(--chart-1)]" />
+            <span className="text-muted-foreground">درآمد</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-0.5 w-4 border-t-2 border-dashed border-[var(--chart-5)]" />
+            <span className="text-muted-foreground tabular-nums">
+              هدف ({currencyFormatter.format(target)})
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard25 };
diff --git a/blocks/chart-card26.tsx b/blocks/chart-card26.tsx
new file mode 100644
index 0000000..4b20f65
--- /dev/null
+++ b/blocks/chart-card26.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ReferenceArea,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard26Props {
+  title?: string;
+  description?: string;
+  target?: number;
+  upperBound?: number;
+  lowerBound?: number;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const chartData = [
+  { month: monthLabel(0), value: 186 },
+  { month: monthLabel(1), value: 305 },
+  { month: monthLabel(2), value: 237 },
+  { month: monthLabel(3), value: 273 },
+  { month: monthLabel(4), value: 209 },
+  { month: monthLabel(5), value: 314 },
+  { month: monthLabel(6), value: 286 },
+  { month: monthLabel(7), value: 320 },
+  { month: monthLabel(8), value: 298 },
+  { month: monthLabel(9), value: 342 },
+];
+
+const chartConfig = {
+  value: {
+    label: "درآمد",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard26 = ({
+  title = "درآمد با باند هدف",
+  description = "درآمد ماهانه در بازه مجاز",
+  target = 280,
+  upperBound = 320,
+  lowerBound = 240,
+  className,
+}: ChartCard26Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <AreaChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="chartGradient26" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={48}
+              domain={[150, 400]}
+              tickFormatter={(value) =>
+                compactCurrencyFormatter.format(Number(value))
+              }
+            />
+            <ReferenceArea
+              y1={lowerBound}
+              y2={upperBound}
+              fill="var(--chart-2)"
+              fillOpacity={0.1}
+            />
+            <ReferenceLine
+              y={target}
+              stroke="var(--chart-2)"
+              strokeDasharray="4 4"
+              strokeWidth={2}
+            />
+            <ReferenceLine
+              y={upperBound}
+              stroke="var(--chart-2)"
+              strokeOpacity={0.4}
+              strokeWidth={1}
+            />
+            <ReferenceLine
+              y={lowerBound}
+              stroke="var(--chart-2)"
+              strokeOpacity={0.4}
+              strokeWidth={1}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    currencyFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke="var(--color-value)"
+              strokeWidth={2}
+              fill="url(#chartGradient26)"
+            />
+          </AreaChart>
+        </ChartContainer>
+        <div className="mt-4 flex flex-wrap items-center justify-center gap-6 text-sm">
+          <div className="flex items-center gap-2">
+            <div className="h-0.5 w-4 bg-[var(--chart-1)]" />
+            <span className="text-muted-foreground">درآمد</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-0.5 w-4 border-t-2 border-dashed border-[var(--chart-2)]" />
+            <span className="text-muted-foreground tabular-nums">
+              هدف ({currencyFormatter.format(target)})
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-3 w-4 rounded-sm bg-[var(--chart-2)] opacity-20" />
+            <span className="text-muted-foreground tabular-nums">
+              بازه ({currencyFormatter.format(lowerBound)}–
+              {currencyFormatter.format(upperBound)})
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard26 };
diff --git a/blocks/chart-card27.tsx b/blocks/chart-card27.tsx
new file mode 100644
index 0000000..2c0ffe7
--- /dev/null
+++ b/blocks/chart-card27.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ReferenceArea,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard27Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const formatPercent = (value: number) =>
+  `${percentFormatter.format(value)}٪`;
+
+const timeLabel = (hour: number) => {
+  const formattedHour = hour.toLocaleString("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+  const formattedMinute = (0).toLocaleString("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+  return `${formattedHour}:${formattedMinute}`;
+};
+
+const chartData = [
+  { time: timeLabel(0), value: 45 },
+  { time: timeLabel(4), value: 52 },
+  { time: timeLabel(8), value: 78 },
+  { time: timeLabel(12), value: 95 },
+  { time: timeLabel(16), value: 88 },
+  { time: timeLabel(20), value: 72 },
+  { time: timeLabel(24), value: 58 },
+];
+
+const chartConfig = {
+  value: {
+    label: "مصرف CPU",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard27 = ({
+  title = "بار سامانه",
+  description = "مصرف CPU با محدوده‌های آستانه",
+  className,
+}: ChartCard27Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <AreaChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="chartGradient27" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+            <ReferenceArea
+              y1={0}
+              y2={60}
+              fill="var(--chart-1)"
+              fillOpacity={0.05}
+            />
+            <ReferenceArea
+              y1={60}
+              y2={80}
+              fill="var(--chart-4)"
+              fillOpacity={0.1}
+            />
+            <ReferenceArea
+              y1={80}
+              y2={100}
+              fill="var(--chart-5)"
+              fillOpacity={0.15}
+            />
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="time"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={40}
+              domain={[0, 100]}
+              tickFormatter={(value) => formatPercent(Number(value))}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) => formatPercent(Number(value))}
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke="var(--color-value)"
+              strokeWidth={2}
+              fill="url(#chartGradient27)"
+            />
+          </AreaChart>
+        </ChartContainer>
+        <div className="mt-4 flex flex-wrap items-center justify-center gap-4 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1.5">
+            <div className="size-3 rounded-sm bg-chart-1/20" />
+            عادی ({formatPercent(0)}–{formatPercent(60)})
+          </span>
+          <span className="flex items-center gap-1.5">
+            <div className="size-3 rounded-sm bg-chart-4/30" />
+            هشدار ({formatPercent(60)}–{formatPercent(80)})
+          </span>
+          <span className="flex items-center gap-1.5">
+            <div className="size-3 rounded-sm bg-chart-5/40" />
+            بحرانی ({formatPercent(80)}–{formatPercent(100)})
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard27 };
diff --git a/blocks/chart-card3.tsx b/blocks/chart-card3.tsx
new file mode 100644
index 0000000..c009ca6
--- /dev/null
+++ b/blocks/chart-card3.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard3Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const chartData = [
+  { month: monthLabel(0), value: 186 },
+  { month: monthLabel(1), value: 305 },
+  { month: monthLabel(2), value: 237 },
+  { month: monthLabel(3), value: 273 },
+  { month: monthLabel(4), value: 209 },
+  { month: monthLabel(5), value: 214 },
+];
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const chartConfig = {
+  value: {
+    label: "فروش",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard3 = ({
+  title = "فروش ماهانه",
+  description = "عملکرد فروش به تفکیک ماه",
+  className,
+}: ChartCard3Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <BarChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={48}
+              tickFormatter={(value) =>
+                compactCurrencyFormatter.format(Number(value))
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    currencyFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <Bar
+              dataKey="value"
+              fill="var(--color-value)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard3 };
diff --git a/blocks/chart-card4.tsx b/blocks/chart-card4.tsx
new file mode 100644
index 0000000..ec307ad
--- /dev/null
+++ b/blocks/chart-card4.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { Bar, BarChart, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard4Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const chartData = [
+  { name: "Chrome", value: 4520 },
+  { name: "Safari", value: 3210 },
+  { name: "Firefox", value: 1890 },
+  { name: "Edge", value: 1240 },
+  { name: "سایر", value: 680 },
+];
+
+const chartConfig = {
+  value: {
+    label: "کاربران",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard4 = ({
+  title = "استفاده از مرورگر",
+  description = "کاربران به تفکیک نوع مرورگر",
+  className,
+}: ChartCard4Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <BarChart
+            data={chartData}
+            layout="vertical"
+            margin={{ top: 0, right: 10, left: 0, bottom: 0 }}
+          >
+            <XAxis
+              type="number"
+              axisLine={false}
+              tickLine={false}
+              fontSize={10}
+              tickFormatter={(value) =>
+                compactNumberFormatter.format(Number(value))
+              }
+            />
+            <YAxis
+              type="category"
+              dataKey="name"
+              axisLine={false}
+              tickLine={false}
+              fontSize={12}
+              width={72}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    numberFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <Bar
+              dataKey="value"
+              fill="var(--color-value)"
+              radius={[0, 4, 4, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard4 };
diff --git a/blocks/chart-card5.tsx b/blocks/chart-card5.tsx
new file mode 100644
index 0000000..4679ca3
--- /dev/null
+++ b/blocks/chart-card5.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { useState } from "react";
+import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  name: string;
+  value: number;
+  color: string;
+}
+
+interface ChartCard5Props {
+  title?: string;
+  description?: string;
+  centerValue?: string;
+  centerLabel?: string;
+  data?: DataItem[];
+  className?: string;
+}
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const defaultData: DataItem[] = [
+  { name: "دسکتاپ", value: 4520, color: "var(--chart-1)" },
+  { name: "موبایل", value: 3210, color: "var(--chart-2)" },
+  { name: "تبلت", value: 1240, color: "var(--chart-3)" },
+];
+
+const defaultTotalVisitors = defaultData.reduce(
+  (sum, item) => sum + item.value,
+  0,
+);
+
+interface ActiveShapeProps {
+  cx: number;
+  cy: number;
+  innerRadius: number;
+  outerRadius: number;
+  startAngle: number;
+  endAngle: number;
+  fill: string;
+}
+
+const renderActiveShape = (props: ActiveShapeProps) => {
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } =
+    props;
+
+  return (
+    <Sector
+      cx={cx}
+      cy={cy}
+      innerRadius={innerRadius - 2}
+      outerRadius={outerRadius + 4}
+      startAngle={startAngle}
+      endAngle={endAngle}
+      fill={fill}
+    />
+  );
+};
+
+const ChartCard5 = ({
+  title = "ترافیک به تفکیک دستگاه",
+  description = "تفکیک بازدیدکنندگان بر اساس نوع دستگاه",
+  centerValue = numberFormatter.format(defaultTotalVisitors),
+  centerLabel = "مجموع بازدیدکنندگان",
+  data = defaultData,
+  className,
+}: ChartCard5Props) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-center gap-8">
+          <div className="relative size-40">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={data}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={50}
+                  outerRadius={70}
+                  paddingAngle={2}
+                  dataKey="value"
+                  strokeWidth={0}
+                  // activeIndex={activeIndex ?? undefined}
+                  // activeShape={renderActiveShape}
+                  onMouseEnter={(_, index) => setActiveIndex(index)}
+                  onMouseLeave={() => setActiveIndex(null)}
+                >
+                  {data.map((entry, index) => (
+                    <Cell
+                      key={index}
+                      fill={entry.color}
+                      style={{
+                        cursor: "pointer",
+                        transition: "opacity 0.4s ease-out",
+                        opacity:
+                          activeIndex === null || activeIndex === index
+                            ? 1
+                            : 0.3,
+                      }}
+                    />
+                  ))}
+                </Pie>
+              </PieChart>
+            </ResponsiveContainer>
+            <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+              <span className="text-xl font-bold tabular-nums">
+                {centerValue}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {centerLabel}
+              </span>
+            </div>
+          </div>
+          <div className="flex-1 space-y-3">
+            {data.map((item, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "flex cursor-pointer items-center justify-between rounded-md px-2 py-1.5 transition-all duration-300 ease-out",
+                  activeIndex === index ? "bg-muted" : "hover:bg-muted/50",
+                  activeIndex !== null && activeIndex !== index && "opacity-40",
+                )}
+                onMouseEnter={() => setActiveIndex(index)}
+                onMouseLeave={() => setActiveIndex(null)}
+              >
+                <div className="flex items-center gap-2">
+                  <div
+                    className={cn(
+                      "size-3 rounded-full transition-transform duration-300 ease-out",
+                      activeIndex === index && "scale-125",
+                    )}
+                    style={{ backgroundColor: item.color }}
+                  />
+                  <span className="text-sm">{item.name}</span>
+                </div>
+                <span className="text-sm font-medium tabular-nums">
+                  {numberFormatter.format(item.value)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard5 };
diff --git a/blocks/chart-card6.tsx b/blocks/chart-card6.tsx
new file mode 100644
index 0000000..638855c
--- /dev/null
+++ b/blocks/chart-card6.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard6Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const chartData = [
+  { month: monthLabel(0), current: 186, previous: 165 },
+  { month: monthLabel(1), current: 305, previous: 280 },
+  { month: monthLabel(2), current: 237, previous: 251 },
+  { month: monthLabel(3), current: 273, previous: 240 },
+  { month: monthLabel(4), current: 209, previous: 195 },
+  { month: monthLabel(5), current: 314, previous: 285 },
+];
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const chartConfig = {
+  current: {
+    label: "امسال",
+    color: "var(--chart-1)",
+  },
+  previous: {
+    label: "سال قبل",
+    color: "var(--chart-4)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard6 = ({
+  title = "مقایسه درآمد",
+  description = "سال جاری در برابر سال قبل",
+  className,
+}: ChartCard6Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <LineChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={48}
+              tickFormatter={(value) =>
+                compactCurrencyFormatter.format(Number(value))
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    currencyFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Line
+              type="monotone"
+              dataKey="current"
+              stroke="var(--color-current)"
+              strokeWidth={2}
+              dot={{ fill: "var(--color-current)", r: 4 }}
+              activeDot={{ r: 6 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="previous"
+              stroke="var(--color-previous)"
+              strokeWidth={2}
+              strokeDasharray="4 4"
+              dot={{ fill: "var(--color-previous)", r: 4 }}
+              activeDot={{ r: 6 }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard6 };
diff --git a/blocks/chart-card7.tsx b/blocks/chart-card7.tsx
new file mode 100644
index 0000000..a6bbea5
--- /dev/null
+++ b/blocks/chart-card7.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard7Props {
+  title?: string;
+  description?: string;
+  totalValue?: string;
+  changePercent?: number;
+  changeLabel?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const chartData = [
+  { month: monthLabel(0), value: 186 },
+  { month: monthLabel(1), value: 305 },
+  { month: monthLabel(2), value: 237 },
+  { month: monthLabel(3), value: 273 },
+  { month: monthLabel(4), value: 209 },
+  { month: monthLabel(5), value: 314 },
+];
+
+const defaultTotalRevenue = chartData.reduce((sum, item) => sum + item.value, 0);
+
+const periodRangeFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "long",
+  year: "numeric",
+});
+const periodRangeStart = new Date(2025, 0, 1);
+const periodRangeEnd = new Date(2025, 5, 30);
+const defaultPeriodDescription =
+  typeof periodRangeFormatter.formatRange === "function"
+    ? periodRangeFormatter.formatRange(periodRangeStart, periodRangeEnd)
+    : `${periodRangeFormatter.format(periodRangeStart)} – ${periodRangeFormatter.format(periodRangeEnd)}`;
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+});
+
+const chartConfig = {
+  value: {
+    label: "درآمد",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard7 = ({
+  title = "مجموع درآمد",
+  description = defaultPeriodDescription,
+  totalValue = currencyFormatter.format(defaultTotalRevenue),
+  changePercent = 12.5,
+  changeLabel = "رشد در این بازه",
+  className,
+}: ChartCard7Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-48 w-full">
+          <AreaChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="chartGradient7" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-value)"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis hide />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    currencyFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke="var(--color-value)"
+              strokeWidth={2}
+              fill="url(#chartGradient7)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex items-center gap-2 text-sm">
+        <div className="flex items-center gap-1 font-medium">
+          <TrendingUp className="size-4 text-green-500" aria-hidden="true" />
+          <span className="text-green-500 tabular-nums">
+            +{percentFormatter.format(changePercent)}٪
+          </span>
+        </div>
+        <span className="text-muted-foreground">{changeLabel}</span>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export { ChartCard7 };
diff --git a/blocks/chart-card8.tsx b/blocks/chart-card8.tsx
new file mode 100644
index 0000000..e8eb25f
--- /dev/null
+++ b/blocks/chart-card8.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard8Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const chartData = [
+  { month: monthLabel(0), desktop: 186, mobile: 80 },
+  { month: monthLabel(1), desktop: 305, mobile: 200 },
+  { month: monthLabel(2), desktop: 237, mobile: 120 },
+  { month: monthLabel(3), desktop: 273, mobile: 190 },
+  { month: monthLabel(4), desktop: 209, mobile: 130 },
+  { month: monthLabel(5), desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "دسکتاپ",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "موبایل",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard8 = ({
+  title = "ترافیک به تفکیک پلتفرم",
+  description = "بازدیدکنندگان دسکتاپ در برابر موبایل",
+  className,
+}: ChartCard8Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <BarChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={40}
+              tickFormatter={(value) =>
+                compactNumberFormatter.format(Number(value))
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    numberFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              radius={[4, 4, 0, 0]}
+            />
+            <Bar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard8 };
diff --git a/blocks/chart-card9.tsx b/blocks/chart-card9.tsx
new file mode 100644
index 0000000..1231ee4
--- /dev/null
+++ b/blocks/chart-card9.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartCard9Props {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const chartData = [
+  { month: monthLabel(0), desktop: 186, mobile: 80, tablet: 45 },
+  { month: monthLabel(1), desktop: 305, mobile: 200, tablet: 65 },
+  { month: monthLabel(2), desktop: 237, mobile: 120, tablet: 55 },
+  { month: monthLabel(3), desktop: 273, mobile: 190, tablet: 70 },
+  { month: monthLabel(4), desktop: 209, mobile: 130, tablet: 50 },
+  { month: monthLabel(5), desktop: 214, mobile: 140, tablet: 60 },
+  { month: monthLabel(6), desktop: 256, mobile: 165, tablet: 72 },
+  { month: monthLabel(7), desktop: 289, mobile: 180, tablet: 68 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "دسکتاپ",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "موبایل",
+    color: "var(--chart-2)",
+  },
+  tablet: {
+    label: "تبلت",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig;
+
+const ChartCard9 = ({
+  title = "منابع ترافیک",
+  description = "بازدیدکنندگان به تفکیک نوع دستگاه در طول زمان",
+  className,
+}: ChartCard9Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-2xl text-start", className)}
+    >
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-64 w-full">
+          <AreaChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="fillDesktop9" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.4}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile9" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.4}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillTablet9" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-tablet)"
+                  stopOpacity={0.4}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-tablet)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={12}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tickMargin={8}
+              fontSize={10}
+              width={40}
+              tickFormatter={(value) =>
+                compactNumberFormatter.format(Number(value))
+              }
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) =>
+                    numberFormatter.format(Number(value))
+                  }
+                />
+              }
+              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Area
+              type="monotone"
+              dataKey="tablet"
+              stackId="1"
+              stroke="var(--color-tablet)"
+              fill="url(#fillTablet9)"
+              strokeWidth={2}
+            />
+            <Area
+              type="monotone"
+              dataKey="mobile"
+              stackId="1"
+              stroke="var(--color-mobile)"
+              fill="url(#fillMobile9)"
+              strokeWidth={2}
+            />
+            <Area
+              type="monotone"
+              dataKey="desktop"
+              stackId="1"
+              stroke="var(--color-desktop)"
+              fill="url(#fillDesktop9)"
+              strokeWidth={2}
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ChartCard9 };
diff --git a/blocks/chart-group1.tsx b/blocks/chart-group1.tsx
new file mode 100644
index 0000000..e12ac66
--- /dev/null
+++ b/blocks/chart-group1.tsx
@@ -0,0 +1,225 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup1Props {
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const revenueData = [
+  { month: monthLabel(0), value: 18600 },
+  { month: monthLabel(1), value: 30500 },
+  { month: monthLabel(2), value: 23700 },
+  { month: monthLabel(3), value: 27300 },
+  { month: monthLabel(4), value: 20900 },
+  { month: monthLabel(5), value: 31400 },
+];
+
+const ordersData = [
+  { month: monthLabel(0), value: 186 },
+  { month: monthLabel(1), value: 305 },
+  { month: monthLabel(2), value: 237 },
+  { month: monthLabel(3), value: 273 },
+  { month: monthLabel(4), value: 209 },
+  { month: monthLabel(5), value: 314 },
+];
+
+const revenueConfig = {
+  value: {
+    label: "درآمد",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ordersConfig = {
+  value: {
+    label: "سفارش‌ها",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+const ChartGroup1 = ({ className }: ChartGroup1Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container grid gap-4 md:grid-cols-2">
+        <Card className="text-start">
+          <CardHeader>
+            <CardTitle>درآمد</CardTitle>
+            <CardDescription>روند درآمد ماهانه</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={revenueConfig} className="h-64 w-full">
+              <AreaChart
+                data={revenueData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient
+                    id="revenueGradient1"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="0%"
+                      stopColor="var(--color-value)"
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--color-value)"
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={52}
+                  tickFormatter={(v) =>
+                    compactCurrencyFormatter.format(Number(v))
+                  }
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        currencyFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="value"
+                  stroke="var(--color-value)"
+                  strokeWidth={2}
+                  fill="url(#revenueGradient1)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="text-start">
+          <CardHeader>
+            <CardTitle>سفارش‌ها</CardTitle>
+            <CardDescription>حجم سفارش ماهانه</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={ordersConfig} className="h-64 w-full">
+              <BarChart
+                data={ordersData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={40}
+                  tickFormatter={(v) =>
+                    compactNumberFormatter.format(Number(v))
+                  }
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        numberFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ fillOpacity: 0.05 }}
+                />
+                <Bar
+                  dataKey="value"
+                  fill="var(--color-value)"
+                  radius={[4, 4, 0, 0]}
+                />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup1 };
diff --git a/blocks/chart-group10.tsx b/blocks/chart-group10.tsx
new file mode 100644
index 0000000..8af1f13
--- /dev/null
+++ b/blocks/chart-group10.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup10Props {
+  className?: string;
+}
+
+const timeLabel = (hour: number) => {
+  const formattedHour = hour.toLocaleString("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+  const formattedMinute = (0).toLocaleString("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+  return `${formattedHour}:${formattedMinute}`;
+};
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 2,
+  minimumFractionDigits: 0,
+});
+
+const formatPercent = (value: number) =>
+  `${percentFormatter.format(value)}٪`;
+
+const chartData = [
+  { hour: timeLabel(0), requests: 1200, errors: 12 },
+  { hour: timeLabel(4), requests: 800, errors: 8 },
+  { hour: timeLabel(8), requests: 2400, errors: 24 },
+  { hour: timeLabel(12), requests: 3200, errors: 48 },
+  { hour: timeLabel(16), requests: 2800, errors: 28 },
+  { hour: timeLabel(20), requests: 1800, errors: 18 },
+];
+
+const chartConfig = {
+  requests: { label: "درخواست‌ها", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const services = [
+  { name: "دروازه اتصال هوشمند", status: "healthy" as const, uptime: 99.99 },
+  { name: "پایگاه داده", status: "healthy" as const, uptime: 99.95 },
+  { name: "کش", status: "degraded" as const, uptime: 98.5 },
+  { name: "ذخیره‌سازی", status: "healthy" as const, uptime: 99.98 },
+];
+
+const ChartGroup10 = ({ className }: ChartGroup10Props) => {
+  const totalRequests = chartData.reduce((sum, item) => sum + item.requests, 0);
+  const totalErrors = chartData.reduce((sum, item) => sum + item.errors, 0);
+  const errorRate = (totalErrors / totalRequests) * 100;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container grid gap-4 md:grid-cols-3">
+        <Card className="text-start md:col-span-2">
+          <CardHeader>
+            <CardTitle>حجم درخواست‌ها</CardTitle>
+            <CardDescription>درخواست‌ها در ۲۴ ساعت گذشته</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="mb-4 grid grid-cols-3 gap-4">
+              <div>
+                <p className="text-sm text-muted-foreground">مجموع درخواست‌ها</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {numberFormatter.format(totalRequests)}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">مجموع خطاها</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {numberFormatter.format(totalErrors)}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">نرخ خطا</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {formatPercent(errorRate)}
+                </p>
+              </div>
+            </div>
+            <ChartContainer config={chartConfig} className="h-48 w-full">
+              <AreaChart
+                data={chartData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient id="reqGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop
+                      offset="0%"
+                      stopColor="var(--color-requests)"
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--color-requests)"
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="hour"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={40}
+                  tickFormatter={(v) =>
+                    compactNumberFormatter.format(Number(v))
+                  }
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        numberFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="requests"
+                  stroke="var(--color-requests)"
+                  strokeWidth={2}
+                  fill="url(#reqGrad)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="text-start">
+          <CardHeader>
+            <CardTitle>سلامت سرویس‌ها</CardTitle>
+            <CardDescription>وضعیت فعلی سرویس‌ها</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {services.map((service, index) => (
+              <div key={index} className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={cn(
+                        "size-2 rounded-full",
+                        service.status === "healthy"
+                          ? "bg-green-500"
+                          : "bg-yellow-500",
+                      )}
+                      aria-hidden="true"
+                    />
+                    <span className="text-sm font-medium">{service.name}</span>
+                  </div>
+                  <span className="text-sm text-muted-foreground tabular-nums">
+                    {formatPercent(service.uptime)}
+                  </span>
+                </div>
+                <Progress
+                  value={service.uptime}
+                  className={cn(
+                    "h-1.5",
+                    service.status === "degraded" && "[&>div]:bg-yellow-500",
+                  )}
+                />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup10 };
diff --git a/blocks/chart-group11.tsx b/blocks/chart-group11.tsx
new file mode 100644
index 0000000..fa096a6
--- /dev/null
+++ b/blocks/chart-group11.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import {
+  addDays,
+  differenceInDays,
+  format as formatDate,
+  startOfDay,
+  subDays,
+} from "date-fns";
+import { faIR } from "date-fns/locale";
+import { CalendarIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { DateRange } from "react-day-picker";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup11Props {
+  className?: string;
+}
+
+const seededRandom = (seed: number) => {
+  const x = Math.sin(seed) * 10000;
+  return x - Math.floor(x);
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const generateDataForRange = (from: Date, to: Date) => {
+  const data = [];
+  const days = differenceInDays(to, from) + 1;
+
+  for (let i = 0; i < days; i++) {
+    const date = addDays(startOfDay(from), i);
+    const seed = date.getTime() / 86400000;
+
+    data.push({
+      date: date,
+      dateStr: formatDate(date, "d MMM", { locale: faIR }),
+      revenue: Math.floor(seededRandom(seed) * 5000) + 2000,
+      orders: Math.floor(seededRandom(seed + 1000) * 50) + 20,
+    });
+  }
+  return data;
+};
+
+const chartConfig = {
+  revenue: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const ChartGroup11 = ({ className }: ChartGroup11Props) => {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: subDays(new Date(), 30),
+    to: new Date(),
+  });
+
+  const filteredData = useMemo(() => {
+    const from = dateRange?.from ?? subDays(new Date(), 30);
+    const to = dateRange?.to ?? new Date();
+    return generateDataForRange(from, to);
+  }, [dateRange]);
+
+  const totalRevenue = filteredData.reduce(
+    (sum, item) => sum + item.revenue,
+    0,
+  );
+  const totalOrders = filteredData.reduce((sum, item) => sum + item.orders, 0);
+  const avgOrderValue =
+    totalOrders > 0 ? Math.round(totalRevenue / totalOrders) : 0;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <Card className="w-full text-start">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+            <div>
+              <CardTitle>تحلیل درآمد</CardTitle>
+              <CardDescription>
+                پیگیری عملکرد درآمد در طول زمان
+              </CardDescription>
+            </div>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="min-w-[280px] justify-start text-start font-normal"
+                >
+                  <CalendarIcon className="ms-2 size-4" aria-hidden="true" />
+                  {dateRange?.from ? (
+                    dateRange.to ? (
+                      <>
+                        {formatDate(dateRange.from, "d MMM y", {
+                          locale: faIR,
+                        })}{" "}
+                        –{" "}
+                        {formatDate(dateRange.to, "d MMM y", { locale: faIR })}
+                      </>
+                    ) : (
+                      formatDate(dateRange.from, "d MMM y", { locale: faIR })
+                    )
+                  ) : (
+                    <span>انتخاب بازه تاریخ</span>
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="range"
+                  numberOfMonths={2}
+                  locale={faIR}
+                  selected={dateRange}
+                  onSelect={setDateRange}
+                  defaultMonth={subDays(new Date(), 30)}
+                />
+              </PopoverContent>
+            </Popover>
+          </CardHeader>
+          <CardContent>
+            <div className="mb-6 grid grid-cols-3 gap-4">
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">مجموع درآمد</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {currencyFormatter.format(totalRevenue)}
+                </p>
+              </div>
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">مجموع سفارش‌ها</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {numberFormatter.format(totalOrders)}
+                </p>
+              </div>
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">
+                  میانگین ارزش سفارش
+                </p>
+                <p className="text-xl font-bold tabular-nums">
+                  {currencyFormatter.format(avgOrderValue)}
+                </p>
+              </div>
+            </div>
+
+            <ChartContainer config={chartConfig} className="h-72 w-full">
+              <AreaChart
+                data={filteredData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient id="revGrad11" x1="0" y1="0" x2="0" y2="1">
+                    <stop
+                      offset="0%"
+                      stopColor="var(--color-revenue)"
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--color-revenue)"
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="dateStr"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                  interval="preserveStartEnd"
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={52}
+                  tickFormatter={(v) =>
+                    compactCurrencyFormatter.format(Number(v))
+                  }
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        currencyFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="revenue"
+                  stroke="var(--color-revenue)"
+                  strokeWidth={2}
+                  fill="url(#revGrad11)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup11 };
diff --git a/blocks/chart-group12.tsx b/blocks/chart-group12.tsx
new file mode 100644
index 0000000..364b994
--- /dev/null
+++ b/blocks/chart-group12.tsx
@@ -0,0 +1,496 @@
+"use client";
+
+import {
+  addDays,
+  differenceInDays,
+  format as formatDate,
+  startOfDay,
+  subDays,
+  subMonths,
+} from "date-fns";
+import { faIR } from "date-fns/locale";
+import { CalendarIcon, TrendingDown, TrendingUp } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { DateRange } from "react-day-picker";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Pie,
+  PieChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup12Props {
+  className?: string;
+}
+
+const seededRandom = (seed: number) => {
+  const x = Math.sin(seed) * 10000;
+  return x - Math.floor(x);
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const formatPercent = (value: number) =>
+  `${oneDecimalFormatter.format(value)}٪`;
+
+const generateDataForRange = (from: Date, to: Date) => {
+  const data = [];
+  const days = differenceInDays(to, from) + 1;
+
+  for (let i = 0; i < days; i++) {
+    const date = addDays(startOfDay(from), i);
+    const seed = date.getTime() / 86400000;
+
+    data.push({
+      date: date,
+      dateStr: formatDate(date, "d MMM", { locale: faIR }),
+      revenue: Math.floor(seededRandom(seed) * 8000) + 3000,
+      orders: Math.floor(seededRandom(seed + 1000) * 80) + 30,
+      visitors: Math.floor(seededRandom(seed + 2000) * 2000) + 500,
+    });
+  }
+  return data;
+};
+
+const categoryData = [
+  { name: "الکترونیک", value: 4200, fill: "var(--chart-1)" },
+  { name: "پوشاک", value: 3100, fill: "var(--chart-2)" },
+  { name: "خانه", value: 2400, fill: "var(--chart-3)" },
+  { name: "ورزش", value: 1800, fill: "var(--chart-4)" },
+];
+
+const categoryConfig = {
+  الکترونیک: { label: "الکترونیک", color: "var(--chart-1)" },
+  پوشاک: { label: "پوشاک", color: "var(--chart-2)" },
+  خانه: { label: "خانه", color: "var(--chart-3)" },
+  ورزش: { label: "ورزش", color: "var(--chart-4)" },
+} satisfies ChartConfig;
+
+const sourceData = [
+  { name: "ارگانیک", value: 42 },
+  { name: "پولی", value: 28 },
+  { name: "شبکه‌های اجتماعی", value: 18 },
+  { name: "ارجاع", value: 12 },
+];
+
+const presets = [
+  { label: "۷ روز اخیر", days: 7 },
+  { label: "۳۰ روز اخیر", days: 30 },
+  { label: "۹۰ روز اخیر", days: 90 },
+];
+
+const revenueConfig = {
+  revenue: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const sourceConfig = {
+  value: { label: "درصد", color: "var(--chart-2)" },
+} satisfies ChartConfig;
+
+const ChartGroup12 = ({ className }: ChartGroup12Props) => {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: subDays(new Date(), 30),
+    to: new Date(),
+  });
+
+  const filteredData = useMemo(() => {
+    const from = dateRange?.from ?? subDays(new Date(), 30);
+    const to = dateRange?.to ?? new Date();
+    return generateDataForRange(from, to);
+  }, [dateRange]);
+
+  const totalRevenue = filteredData.reduce(
+    (sum, item) => sum + item.revenue,
+    0,
+  );
+  const totalOrders = filteredData.reduce((sum, item) => sum + item.orders, 0);
+  const totalVisitors = filteredData.reduce(
+    (sum, item) => sum + item.visitors,
+    0,
+  );
+  const conversionRate =
+    totalVisitors > 0 ? (totalOrders / totalVisitors) * 100 : 0;
+
+  const handlePreset = (days: number) => {
+    setDateRange({
+      from: subDays(new Date(), days),
+      to: new Date(),
+    });
+  };
+
+  const stats = [
+    {
+      title: "مجموع درآمد",
+      value: currencyFormatter.format(totalRevenue),
+      change: 12.5,
+    },
+    {
+      title: "مجموع سفارش‌ها",
+      value: numberFormatter.format(totalOrders),
+      change: 8.2,
+    },
+    {
+      title: "بازدیدکنندگان",
+      value: numberFormatter.format(totalVisitors),
+      change: -2.4,
+    },
+    {
+      title: "نرخ تبدیل",
+      value: formatPercent(conversionRate),
+      change: 5.1,
+    },
+  ];
+
+  const avgOrderValue =
+    totalOrders > 0 ? Math.round(totalRevenue / totalOrders) : 0;
+  const ordersPerDay =
+    filteredData.length > 0
+      ? Math.round(totalOrders / filteredData.length)
+      : 0;
+  const revenuePerDay =
+    filteredData.length > 0
+      ? Math.round(totalRevenue / filteredData.length)
+      : 0;
+  const visitorsPerDay =
+    filteredData.length > 0
+      ? Math.round(totalVisitors / filteredData.length)
+      : 0;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container space-y-4">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 className="text-xl font-bold">مرور داشبورد</h2>
+            <p className="text-muted-foreground">
+              پیگیری عملکرد کسب‌وکار شما
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            {presets.map((preset) => (
+              <Button
+                key={preset.days}
+                variant="outline"
+                size="sm"
+                onClick={() => handlePreset(preset.days)}
+                className={cn(
+                  dateRange?.from &&
+                    formatDate(dateRange.from, "yyyy-MM-dd") ===
+                      formatDate(
+                        subDays(new Date(), preset.days),
+                        "yyyy-MM-dd",
+                      ) &&
+                    "bg-accent",
+                )}
+              >
+                {preset.label}
+              </Button>
+            ))}
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <CalendarIcon className="ms-2 size-4" aria-hidden="true" />
+                  بازه دلخواه
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="range"
+                  numberOfMonths={2}
+                  locale={faIR}
+                  selected={dateRange}
+                  onSelect={setDateRange}
+                  defaultMonth={subMonths(new Date(), 1)}
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat, index) => (
+            <Card key={index} className="text-start">
+              <CardContent className="pt-6">
+                <p className="text-sm text-muted-foreground">{stat.title}</p>
+                <p className="text-xl font-bold tabular-nums">{stat.value}</p>
+                <div className="mt-1 flex items-center gap-1 text-sm">
+                  {stat.change >= 0 ? (
+                    <TrendingUp className="size-4 text-green-500" />
+                  ) : (
+                    <TrendingDown className="size-4 text-red-500" />
+                  )}
+                  <span
+                    className={cn(
+                      stat.change >= 0 ? "text-green-500" : "text-red-500",
+                      "tabular-nums",
+                    )}
+                  >
+                    {percentChangeFormatter.format(stat.change)}٪
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-3">
+          <Card className="text-start lg:col-span-2">
+            <CardHeader>
+              <CardTitle>روند درآمد</CardTitle>
+              <CardDescription>درآمد روزانه در بازه انتخاب‌شده</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer config={revenueConfig} className="h-64 w-full">
+                <AreaChart
+                  data={filteredData}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <defs>
+                    <linearGradient id="revGrad12" x1="0" y1="0" x2="0" y2="1">
+                      <stop
+                        offset="0%"
+                        stopColor="var(--color-revenue)"
+                        stopOpacity={0.3}
+                      />
+                      <stop
+                        offset="100%"
+                        stopColor="var(--color-revenue)"
+                        stopOpacity={0}
+                      />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="dateStr"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={12}
+                    interval="preserveStartEnd"
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={52}
+                    tickFormatter={(v) =>
+                      compactCurrencyFormatter.format(Number(v))
+                    }
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) =>
+                          currencyFormatter.format(Number(value))
+                        }
+                      />
+                    }
+                    cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                  />
+                  <Area
+                    type="monotone"
+                    dataKey="revenue"
+                    stroke="var(--color-revenue)"
+                    strokeWidth={2}
+                    fill="url(#revGrad12)"
+                  />
+                </AreaChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start">
+            <CardHeader>
+              <CardTitle>فروش به تفکیک دسته</CardTitle>
+              <CardDescription>تفکیک درآمد بر اساس دسته</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-col items-center gap-4">
+                <ChartContainer config={categoryConfig} className="size-36">
+                  <PieChart>
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          nameKey="name"
+                          hideLabel
+                          formatter={(value) =>
+                            currencyFormatter.format(Number(value))
+                          }
+                        />
+                      }
+                      cursor={false}
+                    />
+                    <Pie
+                      data={categoryData}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={45}
+                      outerRadius={65}
+                      paddingAngle={2}
+                      dataKey="value"
+                      nameKey="name"
+                      strokeWidth={0}
+                    />
+                  </PieChart>
+                </ChartContainer>
+                <div className="grid w-full grid-cols-2 gap-2 text-sm">
+                  {categoryData.map((item, index) => (
+                    <div key={index} className="flex items-center gap-2">
+                      <div
+                        className="size-2 shrink-0 rounded-full"
+                        style={{ backgroundColor: item.fill }}
+                      />
+                      <span className="truncate text-muted-foreground">
+                        {item.name}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start lg:col-span-2">
+            <CardHeader>
+              <CardTitle>منابع ترافیک</CardTitle>
+              <CardDescription>منشأ بازدیدکنندگان شما</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer config={sourceConfig} className="h-40 w-full">
+                <BarChart
+                  data={sourceData}
+                  layout="vertical"
+                  margin={{ top: 0, right: 10, left: 0, bottom: 0 }}
+                >
+                  <XAxis
+                    type="number"
+                    axisLine={false}
+                    tickLine={false}
+                    fontSize={12}
+                    tickFormatter={(v) => formatPercent(Number(v))}
+                  />
+                  <YAxis
+                    type="category"
+                    dataKey="name"
+                    axisLine={false}
+                    tickLine={false}
+                    fontSize={12}
+                    width={100}
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) => formatPercent(Number(value))}
+                      />
+                    }
+                    cursor={{ fillOpacity: 0.05 }}
+                  />
+                  <Bar
+                    dataKey="value"
+                    fill="var(--color-value)"
+                    radius={[0, 4, 4, 0]}
+                  />
+                </BarChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start">
+            <CardHeader>
+              <CardTitle>آمار سریع</CardTitle>
+              <CardDescription>خلاصه شاخص‌های کلیدی</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex justify-between gap-4">
+                <span className="text-muted-foreground">میانگین ارزش سفارش</span>
+                <span className="font-semibold tabular-nums">
+                  {currencyFormatter.format(avgOrderValue)}
+                </span>
+              </div>
+              <div className="flex justify-between gap-4">
+                <span className="text-muted-foreground">سفارش در روز</span>
+                <span className="font-semibold tabular-nums">
+                  {numberFormatter.format(ordersPerDay)}
+                </span>
+              </div>
+              <div className="flex justify-between gap-4">
+                <span className="text-muted-foreground">درآمد در روز</span>
+                <span className="font-semibold tabular-nums">
+                  {currencyFormatter.format(revenuePerDay)}
+                </span>
+              </div>
+              <div className="flex justify-between gap-4">
+                <span className="text-muted-foreground">بازدید در روز</span>
+                <span className="font-semibold tabular-nums">
+                  {numberFormatter.format(visitorsPerDay)}
+                </span>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup12 };
diff --git a/blocks/chart-group13.tsx b/blocks/chart-group13.tsx
new file mode 100644
index 0000000..b6aed8c
--- /dev/null
+++ b/blocks/chart-group13.tsx
@@ -0,0 +1,515 @@
+"use client";
+
+import {
+  addDays,
+  differenceInDays,
+  format as formatDate,
+  startOfDay,
+  subDays,
+} from "date-fns";
+import { faIR } from "date-fns/locale";
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  CalendarIcon,
+  DollarSign,
+  Eye,
+  ShoppingCart,
+  Users,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import type { DateRange } from "react-day-picker";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup13Props {
+  className?: string;
+}
+
+const seededRandom = (seed: number) => {
+  const x = Math.sin(seed) * 10000;
+  return x - Math.floor(x);
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const generateDataForRange = (from: Date, to: Date) => {
+  const data = [];
+  const days = differenceInDays(to, from) + 1;
+
+  for (let i = 0; i < days; i++) {
+    const date = addDays(startOfDay(from), i);
+    const seed = date.getTime() / 86400000;
+
+    data.push({
+      date: date,
+      dateStr: formatDate(date, "d MMM", { locale: faIR }),
+      revenue: Math.floor(seededRandom(seed) * 12000) + 5000,
+      users: Math.floor(seededRandom(seed + 1000) * 500) + 200,
+      orders: Math.floor(seededRandom(seed + 2000) * 100) + 40,
+      pageviews: Math.floor(seededRandom(seed + 3000) * 5000) + 2000,
+    });
+  }
+  return data;
+};
+
+const presets = [
+  { label: "امروز", getValue: () => ({ from: new Date(), to: new Date() }) },
+  {
+    label: "دیروز",
+    getValue: () => ({
+      from: subDays(new Date(), 1),
+      to: subDays(new Date(), 1),
+    }),
+  },
+  {
+    label: "۷ روز اخیر",
+    getValue: () => ({ from: subDays(new Date(), 6), to: new Date() }),
+  },
+  {
+    label: "۱۴ روز اخیر",
+    getValue: () => ({ from: subDays(new Date(), 13), to: new Date() }),
+  },
+  {
+    label: "۳۰ روز اخیر",
+    getValue: () => ({ from: subDays(new Date(), 29), to: new Date() }),
+  },
+  {
+    label: "۹۰ روز اخیر",
+    getValue: () => ({ from: subDays(new Date(), 89), to: new Date() }),
+  },
+];
+
+const revenueConfig = {
+  revenue: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+const usersConfig = {
+  users: { label: "کاربران", color: "var(--chart-2)" },
+} satisfies ChartConfig;
+const ordersConfig = {
+  orders: { label: "سفارش‌ها", color: "var(--chart-3)" },
+} satisfies ChartConfig;
+const pageviewsConfig = {
+  pageviews: { label: "بازدید صفحه", color: "var(--chart-4)" },
+} satisfies ChartConfig;
+
+const ChartGroup13 = ({ className }: ChartGroup13Props) => {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: subDays(new Date(), 29),
+    to: new Date(),
+  });
+  const [presetLabel, setPresetLabel] = useState("۳۰ روز اخیر");
+
+  const filteredData = useMemo(() => {
+    const from = dateRange?.from ?? subDays(new Date(), 29);
+    const to = dateRange?.to ?? new Date();
+    return generateDataForRange(from, to);
+  }, [dateRange]);
+
+  const stats = useMemo(() => {
+    const totalRevenue = filteredData.reduce(
+      (sum, item) => sum + item.revenue,
+      0,
+    );
+    const totalUsers = filteredData.reduce((sum, item) => sum + item.users, 0);
+    const totalOrders = filteredData.reduce(
+      (sum, item) => sum + item.orders,
+      0,
+    );
+    const totalPageviews = filteredData.reduce(
+      (sum, item) => sum + item.pageviews,
+      0,
+    );
+    return { totalRevenue, totalUsers, totalOrders, totalPageviews };
+  }, [filteredData]);
+
+  const handlePreset = (preset: (typeof presets)[0]) => {
+    setDateRange(preset.getValue());
+    setPresetLabel(preset.label);
+  };
+
+  const handleCustomSelect = (range: DateRange | undefined) => {
+    setDateRange(range);
+    setPresetLabel("بازه دلخواه");
+  };
+
+  const dateRangeSubtitle =
+    dateRange?.from && dateRange?.to
+      ? `${formatDate(dateRange.from, "d MMM y", { locale: faIR })} – ${formatDate(dateRange.to, "d MMM y", { locale: faIR })}`
+      : "انتخاب بازه تاریخ";
+
+  const statCards = [
+    {
+      title: "درآمد",
+      value: currencyFormatter.format(stats.totalRevenue),
+      change: 12.5,
+      icon: DollarSign,
+      config: revenueConfig,
+      dataKey: "revenue" as const,
+      color: "var(--chart-1)",
+    },
+    {
+      title: "کاربران",
+      value: numberFormatter.format(stats.totalUsers),
+      change: 8.2,
+      icon: Users,
+      config: usersConfig,
+      dataKey: "users" as const,
+      color: "var(--chart-2)",
+    },
+    {
+      title: "سفارش‌ها",
+      value: numberFormatter.format(stats.totalOrders),
+      change: -3.1,
+      icon: ShoppingCart,
+      config: ordersConfig,
+      dataKey: "orders" as const,
+      color: "var(--chart-3)",
+    },
+    {
+      title: "بازدید صفحه",
+      value: numberFormatter.format(stats.totalPageviews),
+      change: 15.8,
+      icon: Eye,
+      config: pageviewsConfig,
+      dataKey: "pageviews" as const,
+      color: "var(--chart-4)",
+    },
+  ];
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container space-y-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 className="text-xl font-bold tracking-tight">تحلیل‌ها</h2>
+            <p className="text-muted-foreground">{dateRangeSubtitle}</p>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                className="min-w-[280px] justify-start text-start font-normal"
+              >
+                <CalendarIcon className="ms-2 size-4" aria-hidden="true" />
+                {presetLabel}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <div className="flex">
+                <div className="border-e p-2">
+                  <ScrollArea className="h-72">
+                    <div className="space-y-1">
+                      {presets.map((preset) => (
+                        <Button
+                          key={preset.label}
+                          variant={
+                            presetLabel === preset.label ? "secondary" : "ghost"
+                          }
+                          size="sm"
+                          className="w-full justify-start text-start"
+                          onClick={() => handlePreset(preset)}
+                        >
+                          {preset.label}
+                        </Button>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                </div>
+                <Calendar
+                  mode="range"
+                  numberOfMonths={2}
+                  locale={faIR}
+                  selected={dateRange}
+                  onSelect={handleCustomSelect}
+                  defaultMonth={subDays(new Date(), 30)}
+                />
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {statCards.map((stat, index) => (
+            <Card key={index} className="text-start">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  {stat.title}
+                </CardTitle>
+                <stat.icon className="size-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-xl font-bold tabular-nums">
+                  {stat.value}
+                </div>
+                <div className="flex flex-wrap items-center gap-1 text-xs">
+                  {stat.change >= 0 ? (
+                    <ArrowUpRight className="size-3 text-green-500" />
+                  ) : (
+                    <ArrowDownRight className="size-3 text-red-500" />
+                  )}
+                  <span
+                    className={cn(
+                      stat.change >= 0 ? "text-green-500" : "text-red-500",
+                      "tabular-nums",
+                    )}
+                  >
+                    {percentChangeFormatter.format(stat.change)}٪
+                  </span>
+                  <span className="text-muted-foreground">
+                    نسبت به دوره قبل
+                  </span>
+                </div>
+                <ChartContainer
+                  config={stat.config}
+                  className="mt-3 h-12 w-full"
+                >
+                  <AreaChart
+                    data={filteredData.slice(-14)}
+                    margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+                  >
+                    <defs>
+                      <linearGradient
+                        id={`grad-${stat.dataKey}`}
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor={stat.color}
+                          stopOpacity={0.3}
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor={stat.color}
+                          stopOpacity={0}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <Area
+                      type="monotone"
+                      dataKey={stat.dataKey}
+                      stroke={stat.color}
+                      strokeWidth={1.5}
+                      fill={`url(#grad-${stat.dataKey})`}
+                    />
+                  </AreaChart>
+                </ChartContainer>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-7">
+          <Card className="text-start lg:col-span-4">
+            <CardHeader>
+              <CardTitle>درآمد در طول زمان</CardTitle>
+              <CardDescription>درآمد روزانه در بازه انتخاب‌شده</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer config={revenueConfig} className="h-80 w-full">
+                <AreaChart
+                  data={filteredData}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <defs>
+                    <linearGradient
+                      id="revGradMain"
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                    >
+                      <stop
+                        offset="0%"
+                        stopColor="var(--color-revenue)"
+                        stopOpacity={0.4}
+                      />
+                      <stop
+                        offset="100%"
+                        stopColor="var(--color-revenue)"
+                        stopOpacity={0}
+                      />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="dateStr"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={12}
+                    interval="preserveStartEnd"
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={52}
+                    tickFormatter={(v) =>
+                      compactCurrencyFormatter.format(Number(v))
+                    }
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) =>
+                          currencyFormatter.format(Number(value))
+                        }
+                      />
+                    }
+                    cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                  />
+                  <Area
+                    type="monotone"
+                    dataKey="revenue"
+                    stroke="var(--color-revenue)"
+                    strokeWidth={2}
+                    fill="url(#revGradMain)"
+                  />
+                </AreaChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start lg:col-span-3">
+            <CardHeader>
+              <CardTitle>کاربران و سفارش‌ها</CardTitle>
+              <CardDescription>
+                همبستگی بین کاربران و سفارش‌ها
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer
+                config={{ ...usersConfig, ...ordersConfig }}
+                className="h-80 w-full"
+              >
+                <LineChart
+                  data={filteredData}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="dateStr"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={12}
+                    interval="preserveStartEnd"
+                  />
+                  <YAxis
+                    yAxisId="left"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={40}
+                    tickFormatter={(v) => numberFormatter.format(Number(v))}
+                  />
+                  <YAxis
+                    yAxisId="right"
+                    orientation="right"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={40}
+                    tickFormatter={(v) => numberFormatter.format(Number(v))}
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) =>
+                          numberFormatter.format(Number(value))
+                        }
+                      />
+                    }
+                    cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                  />
+                  <Line
+                    yAxisId="left"
+                    type="monotone"
+                    dataKey="users"
+                    stroke="var(--color-users)"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                  <Line
+                    yAxisId="right"
+                    type="monotone"
+                    dataKey="orders"
+                    stroke="var(--color-orders)"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                </LineChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup13 };
diff --git a/blocks/chart-group14.tsx b/blocks/chart-group14.tsx
new file mode 100644
index 0000000..8c7eb25
--- /dev/null
+++ b/blocks/chart-group14.tsx
@@ -0,0 +1,644 @@
+"use client";
+
+import {
+  addDays,
+  differenceInDays,
+  endOfMonth,
+  endOfWeek,
+  format as formatDate,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+  subDays,
+  subMonths,
+} from "date-fns";
+import { faIR } from "date-fns/locale";
+import {
+  Activity,
+  CalendarIcon,
+  ChevronLeft,
+  Globe,
+  TrendingDown,
+  TrendingUp,
+  Users,
+  Zap,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import type { DateRange } from "react-day-picker";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Pie,
+  PieChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup14Props {
+  className?: string;
+}
+
+const seededRandom = (seed: number) => {
+  const x = Math.sin(seed) * 10000;
+  return x - Math.floor(x);
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const formatPercent = (value: number) =>
+  `${oneDecimalFormatter.format(value)}٪`;
+
+const generateDataForRange = (from: Date, to: Date) => {
+  const data = [];
+  const days = differenceInDays(to, from) + 1;
+
+  for (let i = 0; i < days; i++) {
+    const date = addDays(startOfDay(from), i);
+    const seed = date.getTime() / 86400000;
+
+    data.push({
+      date: date,
+      dateStr: formatDate(date, "d MMM", { locale: faIR }),
+      revenue: Math.floor(seededRandom(seed) * 15000) + 8000,
+      sessions: Math.floor(seededRandom(seed + 1000) * 3000) + 1500,
+      conversions: Math.floor(seededRandom(seed + 2000) * 150) + 50,
+      bounceRate: Math.floor(seededRandom(seed + 3000) * 30) + 20,
+    });
+  }
+  return data;
+};
+
+const channelData = [
+  { name: "جستجوی ارگانیک", value: 38, fill: "var(--chart-1)" },
+  { name: "مستقیم", value: 26, fill: "var(--chart-2)" },
+  { name: "ارجاع", value: 18, fill: "var(--chart-3)" },
+  { name: "شبکه‌های اجتماعی", value: 12, fill: "var(--chart-4)" },
+  { name: "ایمیل", value: 6, fill: "var(--chart-5)" },
+];
+
+const channelConfig = {
+  "جستجوی ارگانیک": {
+    label: "جستجوی ارگانیک",
+    color: "var(--chart-1)",
+  },
+  مستقیم: { label: "مستقیم", color: "var(--chart-2)" },
+  ارجاع: { label: "ارجاع", color: "var(--chart-3)" },
+  "شبکه‌های اجتماعی": {
+    label: "شبکه‌های اجتماعی",
+    color: "var(--chart-4)",
+  },
+  ایمیل: { label: "ایمیل", color: "var(--chart-5)" },
+} satisfies ChartConfig;
+
+const topPages = [
+  { path: "/products", views: 12453, change: 12.5 },
+  { path: "/pricing", views: 8234, change: 8.2 },
+  { path: "/about", views: 6123, change: -2.1 },
+  { path: "/blog/guide", views: 4532, change: 15.8 },
+  { path: "/contact", views: 3421, change: 5.4 },
+];
+
+const topUsers = [
+  {
+    name: "سارا احمدی",
+    email: "sara@example.com",
+    sessions: 47,
+    avatar: "/block-media/shadcnblocks/ui/avatar-1.jpg",
+  },
+  {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    sessions: 42,
+    avatar: "/block-media/shadcnblocks/ui/avatar-2.jpg",
+  },
+  {
+    name: "مریم حسینی",
+    email: "maryam@example.com",
+    sessions: 38,
+    avatar: "/block-media/shadcnblocks/ui/avatar-3.jpg",
+  },
+  {
+    name: "محمد کریمی",
+    email: "mohammad@example.com",
+    sessions: 35,
+    avatar: "/block-media/shadcnblocks/ui/avatar-4.jpg",
+  },
+];
+
+const presetRanges = [
+  { label: "امروز", getValue: () => ({ from: new Date(), to: new Date() }) },
+  {
+    label: "این هفته",
+    getValue: () => ({
+      from: startOfWeek(new Date(), { locale: faIR }),
+      to: endOfWeek(new Date(), { locale: faIR }),
+    }),
+  },
+  {
+    label: "این ماه",
+    getValue: () => ({
+      from: startOfMonth(new Date()),
+      to: endOfMonth(new Date()),
+    }),
+  },
+  {
+    label: "۷ روز اخیر",
+    getValue: () => ({ from: subDays(new Date(), 6), to: new Date() }),
+  },
+  {
+    label: "۳۰ روز اخیر",
+    getValue: () => ({ from: subDays(new Date(), 29), to: new Date() }),
+  },
+  {
+    label: "۳ ماه اخیر",
+    getValue: () => ({ from: subMonths(new Date(), 3), to: new Date() }),
+  },
+];
+
+const revenueConfig = {
+  revenue: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const ChartGroup14 = ({ className }: ChartGroup14Props) => {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: subDays(new Date(), 29),
+    to: new Date(),
+  });
+  const [selectedPreset, setSelectedPreset] = useState("۳۰ روز اخیر");
+
+  const filteredData = useMemo(() => {
+    const from = dateRange?.from ?? subDays(new Date(), 29);
+    const to = dateRange?.to ?? new Date();
+    return generateDataForRange(from, to);
+  }, [dateRange]);
+
+  const stats = useMemo(() => {
+    const totalRevenue = filteredData.reduce(
+      (sum, item) => sum + item.revenue,
+      0,
+    );
+    const totalSessions = filteredData.reduce(
+      (sum, item) => sum + item.sessions,
+      0,
+    );
+    const totalConversions = filteredData.reduce(
+      (sum, item) => sum + item.conversions,
+      0,
+    );
+    const avgBounceRate =
+      filteredData.length > 0
+        ? Math.round(
+            filteredData.reduce((sum, item) => sum + item.bounceRate, 0) /
+              filteredData.length,
+          )
+        : 0;
+    const conversionRate =
+      totalSessions > 0 ? (totalConversions / totalSessions) * 100 : 0;
+    return {
+      totalRevenue,
+      totalSessions,
+      totalConversions,
+      avgBounceRate,
+      conversionRate,
+    };
+  }, [filteredData]);
+
+  const handlePresetChange = (value: string) => {
+    const preset = presetRanges.find((p) => p.label === value);
+    if (preset) {
+      setDateRange(preset.getValue());
+      setSelectedPreset(value);
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container space-y-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 className="text-xl font-bold tracking-tight">
+              داشبورد تحلیل‌ها
+            </h2>
+            <p className="text-muted-foreground">
+              بینش لحظه‌ای از کسب‌وکار شما
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Select value={selectedPreset} onValueChange={handlePresetChange}>
+              <SelectTrigger className="w-[160px] text-start">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {presetRanges.map((preset) => (
+                  <SelectItem key={preset.label} value={preset.label}>
+                    {preset.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="min-w-[200px] justify-start text-start font-normal"
+                >
+                  <CalendarIcon className="ms-2 size-4" aria-hidden="true" />
+                  {dateRange?.from ? (
+                    dateRange.to ? (
+                      <>
+                        {formatDate(dateRange.from, "d MMM", { locale: faIR })}{" "}
+                        –{" "}
+                        {formatDate(dateRange.to, "d MMM", { locale: faIR })}
+                      </>
+                    ) : (
+                      formatDate(dateRange.from, "d MMM y", { locale: faIR })
+                    )
+                  ) : (
+                    "انتخاب تاریخ"
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="range"
+                  numberOfMonths={2}
+                  locale={faIR}
+                  selected={dateRange}
+                  onSelect={(range) => {
+                    setDateRange(range);
+                    setSelectedPreset("بازه دلخواه");
+                  }}
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <Card className="text-start">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div className="rounded-lg bg-primary/10 p-2">
+                  <Activity className="size-5 text-primary" />
+                </div>
+                <Badge
+                  variant="secondary"
+                  className="bg-green-100 text-green-700 tabular-nums"
+                >
+                  <TrendingUp className="ms-1 size-3" />
+                  {percentChangeFormatter.format(12.5)}٪
+                </Badge>
+              </div>
+              <div className="mt-3">
+                <p className="text-sm text-muted-foreground">مجموع درآمد</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {currencyFormatter.format(stats.totalRevenue)}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div className="rounded-lg bg-blue-100 p-2">
+                  <Users className="size-5 text-blue-600" />
+                </div>
+                <Badge
+                  variant="secondary"
+                  className="bg-green-100 text-green-700 tabular-nums"
+                >
+                  <TrendingUp className="ms-1 size-3" />
+                  {percentChangeFormatter.format(8.2)}٪
+                </Badge>
+              </div>
+              <div className="mt-3">
+                <p className="text-sm text-muted-foreground">مجموع جلسات</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {numberFormatter.format(stats.totalSessions)}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div className="rounded-lg bg-green-100 p-2">
+                  <Zap className="size-5 text-green-600" />
+                </div>
+                <Badge
+                  variant="secondary"
+                  className="bg-green-100 text-green-700 tabular-nums"
+                >
+                  <TrendingUp className="ms-1 size-3" />
+                  {percentChangeFormatter.format(5.4)}٪
+                </Badge>
+              </div>
+              <div className="mt-3">
+                <p className="text-sm text-muted-foreground">نرخ تبدیل</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {formatPercent(stats.conversionRate)}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div className="rounded-lg bg-orange-100 p-2">
+                  <Globe className="size-5 text-orange-600" />
+                </div>
+                <Badge variant="secondary" className="bg-red-100 text-red-700">
+                  <TrendingDown className="ms-1 size-3" />
+                  {percentChangeFormatter.format(2.1)}٪
+                </Badge>
+              </div>
+              <div className="mt-3">
+                <p className="text-sm text-muted-foreground">نرخ پرش</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {formatPercent(stats.avgBounceRate)}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start md:col-span-2">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">روند درآمد</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer config={revenueConfig} className="h-52 w-full">
+                <AreaChart
+                  data={filteredData}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <defs>
+                    <linearGradient id="revGrad14" x1="0" y1="0" x2="0" y2="1">
+                      <stop
+                        offset="0%"
+                        stopColor="var(--color-revenue)"
+                        stopOpacity={0.3}
+                      />
+                      <stop
+                        offset="100%"
+                        stopColor="var(--color-revenue)"
+                        stopOpacity={0}
+                      />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="dateStr"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={11}
+                    interval="preserveStartEnd"
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={52}
+                    tickFormatter={(v) =>
+                      compactCurrencyFormatter.format(Number(v))
+                    }
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) =>
+                          currencyFormatter.format(Number(value))
+                        }
+                      />
+                    }
+                    cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                  />
+                  <Area
+                    type="monotone"
+                    dataKey="revenue"
+                    stroke="var(--color-revenue)"
+                    strokeWidth={2}
+                    fill="url(#revGrad14)"
+                  />
+                </AreaChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start md:col-span-2">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">کانال‌های ترافیک</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center gap-6">
+                <ChartContainer
+                  config={channelConfig}
+                  className="relative size-32 shrink-0"
+                >
+                  <PieChart>
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          nameKey="name"
+                          hideLabel
+                          formatter={(value) => formatPercent(Number(value))}
+                        />
+                      }
+                      cursor={false}
+                    />
+                    <Pie
+                      data={channelData}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={35}
+                      outerRadius={55}
+                      paddingAngle={2}
+                      dataKey="value"
+                      nameKey="name"
+                      strokeWidth={0}
+                    />
+                  </PieChart>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-lg font-bold tabular-nums">
+                      {numberFormatter.format(stats.totalSessions)}
+                    </span>
+                  </div>
+                </ChartContainer>
+                <div className="flex-1 space-y-2">
+                  {channelData.map((item, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between gap-2 text-sm"
+                    >
+                      <div className="flex min-w-0 items-center gap-2">
+                        <div
+                          className="size-2 shrink-0 rounded-full"
+                          style={{ backgroundColor: item.fill }}
+                        />
+                        <span className="truncate text-muted-foreground">
+                          {item.name}
+                        </span>
+                      </div>
+                      <span className="font-medium tabular-nums">
+                        {formatPercent(item.value)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start md:col-span-2">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-base">پرطرفدارترین صفحات</CardTitle>
+              <Button variant="ghost" size="sm" className="text-xs">
+                مشاهده همه
+                <ChevronLeft className="ms-1 size-3" aria-hidden="true" />
+              </Button>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {topPages.map((page, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between gap-2"
+                  >
+                    <div className="flex min-w-0 items-center gap-3">
+                      <span className="w-5 shrink-0 text-center text-sm text-muted-foreground tabular-nums">
+                        {numberFormatter.format(index + 1)}
+                      </span>
+                      <span className="truncate text-sm font-medium">
+                        {page.path}
+                      </span>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-3">
+                      <span className="text-sm text-muted-foreground tabular-nums">
+                        {numberFormatter.format(page.views)}
+                      </span>
+                      <span
+                        className={cn(
+                          "text-xs tabular-nums",
+                          page.change >= 0 ? "text-green-600" : "text-red-600",
+                        )}
+                      >
+                        {percentChangeFormatter.format(page.change)}٪
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start md:col-span-2">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-base">فعال‌ترین کاربران</CardTitle>
+              <Button variant="ghost" size="sm" className="text-xs">
+                مشاهده همه
+                <ChevronLeft className="ms-1 size-3" aria-hidden="true" />
+              </Button>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {topUsers.map((user, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between gap-2"
+                  >
+                    <div className="flex min-w-0 items-center gap-3">
+                      <Avatar className="size-8 shrink-0">
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback>
+                          {user.name
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0">
+                        <p className="truncate text-sm font-medium">
+                          {user.name}
+                        </p>
+                        <p className="truncate text-xs text-muted-foreground">
+                          {user.email}
+                        </p>
+                      </div>
+                    </div>
+                    <Badge variant="secondary" className="shrink-0 tabular-nums">
+                      {numberFormatter.format(user.sessions)} جلسه
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup14 };
diff --git a/blocks/chart-group15.tsx b/blocks/chart-group15.tsx
new file mode 100644
index 0000000..3ae27c7
--- /dev/null
+++ b/blocks/chart-group15.tsx
@@ -0,0 +1,743 @@
+"use client";
+
+import {
+  addDays,
+  differenceInDays,
+  format as formatDate,
+  startOfDay,
+  subDays,
+} from "date-fns";
+import { faIR } from "date-fns/locale";
+import {
+  CalendarIcon,
+  ChevronLeft,
+  ChevronRight as ChevronRightIcon,
+  Download,
+  MoreHorizontal,
+  RefreshCw,
+  Settings,
+  TrendingDown,
+  TrendingUp,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import type { DateRange } from "react-day-picker";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup15Props {
+  className?: string;
+}
+
+const seededRandom = (seed: number) => {
+  const x = Math.sin(seed) * 10000;
+  return x - Math.floor(x);
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const formatPercent = (value: number) =>
+  `${oneDecimalFormatter.format(value)}٪`;
+
+const formatHour = (hour: number) =>
+  `${new Intl.NumberFormat("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  }).format(hour)}:00`;
+
+const generateDataForRange = (from: Date, to: Date) => {
+  const data = [];
+  let currentDate = new Date(from);
+
+  while (currentDate <= to) {
+    const seed = currentDate.getTime() / 86400000;
+    const baseRevenue = 10000 + Math.sin(seed / 7) * 3000;
+    const baseCost = 6000 + Math.sin(seed / 7) * 1500;
+
+    data.push({
+      date: new Date(currentDate),
+      dateStr: formatDate(currentDate, "d MMM", { locale: faIR }),
+      revenue: Math.floor(baseRevenue + seededRandom(seed * 1) * 2000),
+      cost: Math.floor(baseCost + seededRandom(seed * 2) * 1000),
+      profit: Math.floor(
+        baseRevenue - baseCost + seededRandom(seed * 3) * 1000,
+      ),
+      orders: Math.floor(seededRandom(seed * 4) * 80) + 40,
+      aov: Math.floor(seededRandom(seed * 5) * 50) + 100,
+      newCustomers: Math.floor(seededRandom(seed * 6) * 30) + 10,
+      returning: Math.floor(seededRandom(seed * 7) * 50) + 30,
+    });
+
+    currentDate = addDays(currentDate, 1);
+  }
+  return data;
+};
+
+const hourlyData = Array.from({ length: 24 }, (_, i) => {
+  const seed = i * 1000;
+  return {
+    hour: formatHour(i),
+    visitors:
+      Math.floor(seededRandom(seed) * 500) + (i >= 9 && i <= 17 ? 300 : 50),
+    conversions:
+      Math.floor(seededRandom(seed + 1) * 30) + (i >= 9 && i <= 17 ? 15 : 2),
+  };
+});
+
+const deviceData = [
+  { name: "دسکتاپ", value: 58, fill: "var(--chart-1)" },
+  { name: "موبایل", value: 32, fill: "var(--chart-2)" },
+  { name: "تبلت", value: 10, fill: "var(--chart-3)" },
+];
+
+const deviceConfig = {
+  دسکتاپ: { label: "دسکتاپ", color: "var(--chart-1)" },
+  موبایل: { label: "موبایل", color: "var(--chart-2)" },
+  تبلت: { label: "تبلت", color: "var(--chart-3)" },
+} satisfies ChartConfig;
+
+const revenueConfig = {
+  revenue: { label: "درآمد", color: "var(--chart-1)" },
+  cost: { label: "هزینه", color: "var(--chart-2)" },
+  profit: { label: "سود", color: "var(--chart-3)" },
+  orders: { label: "سفارش‌ها", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const customerConfig = {
+  newCustomers: { label: "جدید", color: "var(--chart-1)" },
+  returning: { label: "بازگشتی", color: "var(--chart-2)" },
+} satisfies ChartConfig;
+
+const hourlyConfig = {
+  visitors: { label: "بازدیدکنندگان", color: "var(--chart-1)" },
+  conversions: { label: "تبدیل‌ها", color: "var(--chart-3)" },
+} satisfies ChartConfig;
+
+const ChartGroup15 = ({ className }: ChartGroup15Props) => {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: subDays(new Date(), 29),
+    to: new Date(),
+  });
+  const [chartView, setChartView] = useState<"revenue" | "profit" | "orders">(
+    "revenue",
+  );
+
+  const filteredData = useMemo(() => {
+    if (!dateRange?.from) {
+      return generateDataForRange(subDays(new Date(), 29), new Date());
+    }
+    const from = startOfDay(dateRange.from);
+    const to = dateRange.to ? startOfDay(dateRange.to) : from;
+    return generateDataForRange(from, to);
+  }, [dateRange]);
+
+  const stats = useMemo(() => {
+    const totalRevenue = filteredData.reduce(
+      (sum, item) => sum + item.revenue,
+      0,
+    );
+    const totalCost = filteredData.reduce((sum, item) => sum + item.cost, 0);
+    const totalProfit = filteredData.reduce(
+      (sum, item) => sum + item.profit,
+      0,
+    );
+    const totalOrders = filteredData.reduce(
+      (sum, item) => sum + item.orders,
+      0,
+    );
+    const profitMargin =
+      totalRevenue > 0 ? (totalProfit / totalRevenue) * 100 : 0;
+    return {
+      totalRevenue,
+      totalCost,
+      totalProfit,
+      totalOrders,
+      profitMargin,
+    };
+  }, [filteredData]);
+
+  const daysDiff =
+    dateRange?.from && dateRange?.to
+      ? differenceInDays(dateRange.to, dateRange.from) + 1
+      : 30;
+
+  const navigateRange = (direction: "prev" | "next") => {
+    if (!dateRange?.from || !dateRange?.to) return;
+    const shift = direction === "prev" ? -daysDiff : daysDiff;
+    setDateRange({
+      from: addDays(dateRange.from, shift),
+      to: addDays(dateRange.to, shift),
+    });
+  };
+
+  const periodSubtitle =
+    dateRange?.from && dateRange?.to
+      ? ` · ${formatDate(dateRange.from, "d MMM", { locale: faIR })} – ${formatDate(dateRange.to, "d MMM y", { locale: faIR })}`
+      : "";
+
+  const statRows = [
+    {
+      label: "درآمد",
+      value: currencyFormatter.format(stats.totalRevenue),
+      change: 12.5,
+    },
+    {
+      label: "هزینه",
+      value: currencyFormatter.format(stats.totalCost),
+      change: 8.2,
+    },
+    {
+      label: "سود",
+      value: currencyFormatter.format(stats.totalProfit),
+      change: 18.3,
+    },
+    {
+      label: "سفارش‌ها",
+      value: numberFormatter.format(stats.totalOrders),
+      change: 5.7,
+    },
+    {
+      label: "حاشیه سود",
+      value: formatPercent(stats.profitMargin),
+      change: 2.1,
+    },
+  ];
+
+  const currencyTooltip = (
+    <ChartTooltipContent
+      formatter={(value) => currencyFormatter.format(Number(value))}
+    />
+  );
+
+  const numberTooltip = (
+    <ChartTooltipContent
+      formatter={(value) => numberFormatter.format(Number(value))}
+    />
+  );
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container space-y-6">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <h2 className="text-xl font-bold tracking-tight">
+              تحلیل کسب‌وکار
+            </h2>
+            <p className="text-muted-foreground">
+              بازه {numberFormatter.format(daysDiff)} روزه انتخاب شده
+              {periodSubtitle}
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="flex items-center rounded-lg border">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="rounded-e-none"
+                onClick={() => navigateRange("prev")}
+                aria-label="بازه قبلی"
+              >
+                <ChevronRightIcon className="size-4" />
+              </Button>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="rounded-none border-x px-3 font-normal"
+                  >
+                    <CalendarIcon className="ms-2 size-4" aria-hidden="true" />
+                    {dateRange?.from
+                      ? formatDate(dateRange.from, "d MMM", { locale: faIR })
+                      : "شروع"}{" "}
+                    –{" "}
+                    {dateRange?.to
+                      ? formatDate(dateRange.to, "d MMM", { locale: faIR })
+                      : "پایان"}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="center">
+                  <Calendar
+                    mode="range"
+                    numberOfMonths={2}
+                    locale={faIR}
+                    selected={dateRange}
+                    onSelect={setDateRange}
+                  />
+                </PopoverContent>
+              </Popover>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="rounded-s-none"
+                onClick={() => navigateRange("next")}
+                aria-label="بازه بعدی"
+              >
+                <ChevronLeft className="size-4" />
+              </Button>
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon" aria-label="گزینه‌های بیشتر">
+                  <MoreHorizontal className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem>
+                  <Download className="ms-2 size-4" />
+                  خروجی جدول
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <RefreshCw className="ms-2 size-4" />
+                  به‌روزرسانی
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Settings className="ms-2 size-4" />
+                  تنظیمات
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+          {statRows.map((stat, index) => (
+            <Card key={index} className="text-start">
+              <CardContent className="pt-6">
+                <p className="text-sm text-muted-foreground">{stat.label}</p>
+                <div className="flex items-baseline justify-between gap-2">
+                  <p className="text-xl font-bold tabular-nums">{stat.value}</p>
+                  <span
+                    className={cn(
+                      "flex shrink-0 items-center text-sm tabular-nums",
+                      stat.change >= 0 ? "text-green-600" : "text-red-600",
+                    )}
+                  >
+                    {stat.change >= 0 ? (
+                      <TrendingUp className="ms-1 size-3" />
+                    ) : (
+                      <TrendingDown className="ms-1 size-3" />
+                    )}
+                    {percentChangeFormatter.format(stat.change)}٪
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-3">
+          <Card className="text-start lg:col-span-2">
+            <Tabs
+              value={chartView}
+              onValueChange={(v) => setChartView(v as typeof chartView)}
+              dir="rtl"
+            >
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <div>
+                  <CardTitle className="text-base">مرور عملکرد</CardTitle>
+                  <CardDescription>
+                    روند درآمد، هزینه و سود
+                  </CardDescription>
+                </div>
+                <TabsList className="h-8">
+                  <TabsTrigger value="revenue" className="text-xs">
+                    درآمد
+                  </TabsTrigger>
+                  <TabsTrigger value="profit" className="text-xs">
+                    سود
+                  </TabsTrigger>
+                  <TabsTrigger value="orders" className="text-xs">
+                    سفارش‌ها
+                  </TabsTrigger>
+                </TabsList>
+              </CardHeader>
+              <CardContent>
+                <TabsContent value="revenue" className="mt-0">
+                  <ChartContainer
+                    config={revenueConfig}
+                    className="h-72 w-full"
+                  >
+                    <AreaChart
+                      data={filteredData}
+                      margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                    >
+                      <defs>
+                        <linearGradient
+                          id="revGrad15"
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="1"
+                        >
+                          <stop
+                            offset="0%"
+                            stopColor="var(--color-revenue)"
+                            stopOpacity={0.3}
+                          />
+                          <stop
+                            offset="100%"
+                            stopColor="var(--color-revenue)"
+                            stopOpacity={0}
+                          />
+                        </linearGradient>
+                      </defs>
+                      <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                      <XAxis
+                        dataKey="dateStr"
+                        axisLine={false}
+                        tickLine={false}
+                        tickMargin={8}
+                        fontSize={11}
+                        interval="preserveStartEnd"
+                      />
+                      <YAxis
+                        axisLine={false}
+                        tickLine={false}
+                        tickMargin={8}
+                        fontSize={10}
+                        width={52}
+                        tickFormatter={(v) =>
+                          compactCurrencyFormatter.format(Number(v))
+                        }
+                      />
+                      <ChartTooltip content={currencyTooltip} />
+                      <ChartLegend content={<ChartLegendContent />} />
+                      <Area
+                        type="monotone"
+                        dataKey="revenue"
+                        stroke="var(--color-revenue)"
+                        strokeWidth={2}
+                        fill="url(#revGrad15)"
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="cost"
+                        stroke="var(--color-cost)"
+                        strokeWidth={2}
+                        dot={false}
+                        strokeDasharray="4 4"
+                      />
+                    </AreaChart>
+                  </ChartContainer>
+                </TabsContent>
+                <TabsContent value="profit" className="mt-0">
+                  <ChartContainer
+                    config={revenueConfig}
+                    className="h-72 w-full"
+                  >
+                    <BarChart
+                      data={filteredData}
+                      margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                      <XAxis
+                        dataKey="dateStr"
+                        axisLine={false}
+                        tickLine={false}
+                        tickMargin={8}
+                        fontSize={11}
+                        interval="preserveStartEnd"
+                      />
+                      <YAxis
+                        axisLine={false}
+                        tickLine={false}
+                        tickMargin={8}
+                        fontSize={10}
+                        width={52}
+                        tickFormatter={(v) =>
+                          compactCurrencyFormatter.format(Number(v))
+                        }
+                      />
+                      <ChartTooltip content={currencyTooltip} />
+                      <Bar
+                        dataKey="profit"
+                        fill="var(--color-profit)"
+                        radius={[4, 4, 0, 0]}
+                      />
+                    </BarChart>
+                  </ChartContainer>
+                </TabsContent>
+                <TabsContent value="orders" className="mt-0">
+                  <ChartContainer
+                    config={revenueConfig}
+                    className="h-72 w-full"
+                  >
+                    <LineChart
+                      data={filteredData}
+                      margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                      <XAxis
+                        dataKey="dateStr"
+                        axisLine={false}
+                        tickLine={false}
+                        tickMargin={8}
+                        fontSize={11}
+                        interval="preserveStartEnd"
+                      />
+                      <YAxis
+                        axisLine={false}
+                        tickLine={false}
+                        tickMargin={8}
+                        fontSize={10}
+                        width={40}
+                        tickFormatter={(v) => numberFormatter.format(Number(v))}
+                      />
+                      <ChartTooltip content={numberTooltip} />
+                      <Line
+                        type="monotone"
+                        dataKey="orders"
+                        stroke="var(--color-revenue)"
+                        strokeWidth={2}
+                        dot={false}
+                      />
+                    </LineChart>
+                  </ChartContainer>
+                </TabsContent>
+              </CardContent>
+            </Tabs>
+          </Card>
+
+          <Card className="text-start">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">تفکیک دستگاه</CardTitle>
+              <CardDescription>ترافیک بر اساس نوع دستگاه</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col items-center gap-4">
+              <ChartContainer
+                config={deviceConfig}
+                className="mx-auto aspect-square h-40"
+              >
+                <PieChart>
+                  <ChartTooltip
+                    cursor={false}
+                    content={
+                      <ChartTooltipContent
+                        hideLabel
+                        nameKey="name"
+                        formatter={(value) => formatPercent(Number(value))}
+                      />
+                    }
+                  />
+                  <Pie
+                    data={deviceData}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={50}
+                    outerRadius={70}
+                    paddingAngle={3}
+                    dataKey="value"
+                    nameKey="name"
+                    strokeWidth={0}
+                  />
+                </PieChart>
+              </ChartContainer>
+              <div className="w-full space-y-2">
+                {deviceData.map((item, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between gap-2"
+                  >
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="size-3 shrink-0 rounded-sm"
+                        style={{ backgroundColor: item.fill }}
+                      />
+                      <span className="text-sm">{item.name}</span>
+                    </div>
+                    <span className="text-sm font-medium tabular-nums">
+                      {formatPercent(item.value)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">انواع مشتری</CardTitle>
+              <CardDescription>مشتریان جدید در برابر بازگشتی</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer config={customerConfig} className="h-48 w-full">
+                <BarChart
+                  data={filteredData.slice(-14)}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="dateStr"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={36}
+                    tickFormatter={(v) => numberFormatter.format(Number(v))}
+                  />
+                  <ChartTooltip content={numberTooltip} />
+                  <Bar
+                    dataKey="newCustomers"
+                    stackId="a"
+                    fill="var(--color-newCustomers)"
+                    radius={[0, 0, 0, 0]}
+                  />
+                  <Bar
+                    dataKey="returning"
+                    stackId="a"
+                    fill="var(--color-returning)"
+                    radius={[4, 4, 0, 0]}
+                  />
+                </BarChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          <Card className="text-start lg:col-span-2">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">ترافیک ساعتی</CardTitle>
+              <CardDescription>
+                بازدیدکنندگان و تبدیل‌ها به تفکیک ساعت (امروز)
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer config={hourlyConfig} className="h-48 w-full">
+                <ComposedChart
+                  data={hourlyData}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="hour"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    interval={2}
+                  />
+                  <YAxis
+                    yAxisId="left"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={40}
+                    tickFormatter={(v) => numberFormatter.format(Number(v))}
+                  />
+                  <YAxis
+                    yAxisId="right"
+                    orientation="right"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={36}
+                    tickFormatter={(v) => numberFormatter.format(Number(v))}
+                  />
+                  <ChartTooltip content={numberTooltip} />
+                  <Bar
+                    yAxisId="left"
+                    dataKey="visitors"
+                    fill="var(--color-visitors)"
+                    radius={[2, 2, 0, 0]}
+                    opacity={0.8}
+                  />
+                  <Line
+                    yAxisId="right"
+                    type="monotone"
+                    dataKey="conversions"
+                    stroke="var(--color-conversions)"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                </ComposedChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup15 };
diff --git a/blocks/chart-group2.tsx b/blocks/chart-group2.tsx
new file mode 100644
index 0000000..77f97fa
--- /dev/null
+++ b/blocks/chart-group2.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup2Props {
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const mainChartData = [
+  { month: monthLabel(0), revenue: 18600, orders: 186 },
+  { month: monthLabel(1), revenue: 30500, orders: 305 },
+  { month: monthLabel(2), revenue: 23700, orders: 237 },
+  { month: monthLabel(3), revenue: 27300, orders: 273 },
+  { month: monthLabel(4), revenue: 20900, orders: 209 },
+  { month: monthLabel(5), revenue: 31400, orders: 314 },
+];
+
+const categoryData = [
+  { name: "الکترونیک", value: 12400 },
+  { name: "پوشاک", value: 8900 },
+  { name: "خانه", value: 6200 },
+  { name: "ورزش", value: 3900 },
+];
+
+const sourceData = [
+  { name: "ارگانیک", value: 4520 },
+  { name: "پولی", value: 3210 },
+  { name: "شبکه‌های اجتماعی", value: 2100 },
+  { name: "ارجاع", value: 1570 },
+];
+
+const mainConfig = {
+  revenue: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const categoryConfig = {
+  value: { label: "فروش", color: "var(--chart-2)" },
+} satisfies ChartConfig;
+
+const sourceConfig = {
+  value: { label: "بازدیدکنندگان", color: "var(--chart-3)" },
+} satisfies ChartConfig;
+
+const ChartGroup2 = ({ className }: ChartGroup2Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container grid gap-4 md:grid-cols-2">
+        <Card className="text-start md:col-span-2">
+          <CardHeader>
+            <CardTitle>مرور درآمد</CardTitle>
+            <CardDescription>عملکرد درآمد ماهانه</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={mainConfig} className="h-64 w-full">
+              <AreaChart
+                data={mainChartData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient id="mainGradient" x1="0" y1="0" x2="0" y2="1">
+                    <stop
+                      offset="0%"
+                      stopColor="var(--color-revenue)"
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--color-revenue)"
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={52}
+                  tickFormatter={(v) =>
+                    compactCurrencyFormatter.format(Number(v))
+                  }
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        currencyFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="revenue"
+                  stroke="var(--color-revenue)"
+                  strokeWidth={2}
+                  fill="url(#mainGradient)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="text-start">
+          <CardHeader>
+            <CardTitle>فروش به تفکیک دسته</CardTitle>
+            <CardDescription>پرفروش‌ترین دسته‌های محصول</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={categoryConfig} className="h-48 w-full">
+              <BarChart
+                data={categoryData}
+                layout="vertical"
+                margin={{ top: 0, right: 10, left: 0, bottom: 0 }}
+              >
+                <XAxis
+                  type="number"
+                  axisLine={false}
+                  tickLine={false}
+                  fontSize={10}
+                  tickFormatter={(v) =>
+                    compactCurrencyFormatter.format(Number(v))
+                  }
+                />
+                <YAxis
+                  type="category"
+                  dataKey="name"
+                  axisLine={false}
+                  tickLine={false}
+                  fontSize={12}
+                  width={88}
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        currencyFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ fillOpacity: 0.05 }}
+                />
+                <Bar
+                  dataKey="value"
+                  fill="var(--color-value)"
+                  radius={[0, 4, 4, 0]}
+                />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="text-start">
+          <CardHeader>
+            <CardTitle>منابع ترافیک</CardTitle>
+            <CardDescription>کانال‌های جذب بازدیدکننده</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={sourceConfig} className="h-48 w-full">
+              <BarChart
+                data={sourceData}
+                layout="vertical"
+                margin={{ top: 0, right: 10, left: 0, bottom: 0 }}
+              >
+                <XAxis
+                  type="number"
+                  axisLine={false}
+                  tickLine={false}
+                  fontSize={10}
+                  tickFormatter={(v) =>
+                    compactNumberFormatter.format(Number(v))
+                  }
+                />
+                <YAxis
+                  type="category"
+                  dataKey="name"
+                  axisLine={false}
+                  tickLine={false}
+                  fontSize={12}
+                  width={100}
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        numberFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ fillOpacity: 0.05 }}
+                />
+                <Bar
+                  dataKey="value"
+                  fill="var(--color-value)"
+                  radius={[0, 4, 4, 0]}
+                />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup2 };
diff --git a/blocks/chart-group3.tsx b/blocks/chart-group3.tsx
new file mode 100644
index 0000000..9c5f0ba
--- /dev/null
+++ b/blocks/chart-group3.tsx
@@ -0,0 +1,270 @@
+"use client";
+
+import { TrendingDown, TrendingUp } from "lucide-react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface Stat {
+  title: string;
+  value: string;
+  change: number;
+  sparklineData: { day: string; value: number }[];
+}
+
+interface ChartGroup3Props {
+  stats?: Stat[];
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  weekday: "short",
+});
+
+const weekdaySparkline = (values: number[]) =>
+  values.map((value, index) => ({
+    day: weekdayFormatter.format(new Date(2025, 0, 6 + index)),
+    value,
+  }));
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const formatPercent = (value: number) =>
+  `${oneDecimalFormatter.format(value)}٪`;
+
+const defaultStats: Stat[] = [
+  {
+    title: "مجموع درآمد",
+    value: currencyFormatter.format(45231),
+    change: 20.1,
+    sparklineData: weekdaySparkline([6200, 5800, 7100, 6900, 8200, 5400, 5631]),
+  },
+  {
+    title: "میانگین ارزش سفارش",
+    value: currencyFormatter.format(142),
+    change: 8.5,
+    sparklineData: weekdaySparkline([128, 135, 142, 138, 155, 148, 142]),
+  },
+  {
+    title: "نرخ تبدیل",
+    value: formatPercent(3.2),
+    change: -2.4,
+    sparklineData: weekdaySparkline([3.8, 3.5, 3.4, 3.6, 3.1, 2.9, 3.2]),
+  },
+];
+
+const chartData = [
+  { month: monthLabel(0), value: 18600 },
+  { month: monthLabel(1), value: 30500 },
+  { month: monthLabel(2), value: 23700 },
+  { month: monthLabel(3), value: 27300 },
+  { month: monthLabel(4), value: 20900 },
+  { month: monthLabel(5), value: 31400 },
+];
+
+const chartConfig = {
+  value: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const ChartGroup3 = ({ stats = defaultStats, className }: ChartGroup3Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container space-y-4">
+        <Card className="text-start">
+          <CardHeader className="pb-2">
+            <CardTitle>روند درآمد</CardTitle>
+            <CardDescription>درآمد ماهانه در طول زمان</CardDescription>
+          </CardHeader>
+          <CardContent className="pb-4">
+            <ChartContainer config={chartConfig} className="h-64 w-full">
+              <AreaChart
+                data={chartData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient
+                    id="chartGradient3"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="0%"
+                      stopColor="var(--color-value)"
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--color-value)"
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={52}
+                  tickFormatter={(v) =>
+                    compactCurrencyFormatter.format(Number(v))
+                  }
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        currencyFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="value"
+                  stroke="var(--color-value)"
+                  strokeWidth={2}
+                  fill="url(#chartGradient3)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          {stats.map((stat, index) => {
+            const isPositive = stat.change >= 0;
+            const sparklineColor = isPositive ? "#22c55e" : "#ef4444";
+            return (
+              <Card key={index} className="overflow-hidden text-start">
+                <CardHeader className="pb-0">
+                  <CardDescription>۷ روز گذشته</CardDescription>
+                  <div className="flex items-center justify-between gap-2">
+                    <CardTitle className="text-base">{stat.title}</CardTitle>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xl font-bold tabular-nums">
+                        {stat.value}
+                      </span>
+                      <div className="flex items-center gap-1 text-sm tabular-nums">
+                        {isPositive ? (
+                          <TrendingUp
+                            className="size-4 text-green-500"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <TrendingDown
+                            className="size-4 text-red-500"
+                            aria-hidden="true"
+                          />
+                        )}
+                        <span
+                          className={
+                            isPositive ? "text-green-500" : "text-red-500"
+                          }
+                        >
+                          {percentChangeFormatter.format(stat.change)}٪
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent className="pb-0">
+                  <div className="h-16 w-full">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <LineChart
+                        data={stat.sparklineData}
+                        margin={{ top: 8, right: 0, left: 0, bottom: 0 }}
+                      >
+                        <XAxis
+                          dataKey="day"
+                          axisLine={false}
+                          tickLine={false}
+                          tick={{ fontSize: 10 }}
+                          tickMargin={4}
+                        />
+                        <Line
+                          type="monotone"
+                          dataKey="value"
+                          stroke={sparklineColor}
+                          strokeWidth={2}
+                          dot={false}
+                        />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup3 };
diff --git a/blocks/chart-group4.tsx b/blocks/chart-group4.tsx
new file mode 100644
index 0000000..d4da84d
--- /dev/null
+++ b/blocks/chart-group4.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup4Props {
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const chartData = [
+  { month: monthLabel(0), revenue: 18600, orders: 186, customers: 145 },
+  { month: monthLabel(1), revenue: 30500, orders: 305, customers: 220 },
+  { month: monthLabel(2), revenue: 23700, orders: 237, customers: 180 },
+  { month: monthLabel(3), revenue: 27300, orders: 273, customers: 195 },
+  { month: monthLabel(4), revenue: 20900, orders: 209, customers: 165 },
+  { month: monthLabel(5), revenue: 31400, orders: 314, customers: 240 },
+];
+
+const metricTabs = [
+  { value: "revenue", label: "درآمد" },
+  { value: "orders", label: "سفارش‌ها" },
+  { value: "customers", label: "مشتریان" },
+] as const;
+
+const revenueConfig = {
+  revenue: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const ordersConfig = {
+  orders: { label: "سفارش‌ها", color: "var(--chart-2)" },
+} satisfies ChartConfig;
+
+const customersConfig = {
+  customers: { label: "مشتریان", color: "var(--chart-3)" },
+} satisfies ChartConfig;
+
+const ChartGroup4 = ({ className }: ChartGroup4Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <Card className="w-full text-start">
+          <CardHeader>
+            <CardTitle>شاخص‌های عملکرد</CardTitle>
+            <CardDescription>
+              مشاهده شاخص‌های مختلف در طول زمان
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs defaultValue="revenue">
+              <TabsList className="mb-4">
+                {metricTabs.map((tab) => (
+                  <TabsTrigger key={tab.value} value={tab.value}>
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+
+              <TabsContent value="revenue">
+                <ChartContainer config={revenueConfig} className="h-64 w-full">
+                  <AreaChart
+                    data={chartData}
+                    margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                  >
+                    <defs>
+                      <linearGradient
+                        id="revenueGrad"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor="var(--color-revenue)"
+                          stopOpacity={0.3}
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor="var(--color-revenue)"
+                          stopOpacity={0}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <XAxis
+                      dataKey="month"
+                      axisLine={false}
+                      tickLine={false}
+                      tickMargin={8}
+                      fontSize={12}
+                    />
+                    <YAxis
+                      axisLine={false}
+                      tickLine={false}
+                      tickMargin={8}
+                      fontSize={10}
+                      width={52}
+                      tickFormatter={(v) =>
+                        compactCurrencyFormatter.format(Number(v))
+                      }
+                    />
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          formatter={(value) =>
+                            currencyFormatter.format(Number(value))
+                          }
+                        />
+                      }
+                      cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                    />
+                    <Area
+                      type="monotone"
+                      dataKey="revenue"
+                      stroke="var(--color-revenue)"
+                      strokeWidth={2}
+                      fill="url(#revenueGrad)"
+                    />
+                  </AreaChart>
+                </ChartContainer>
+              </TabsContent>
+
+              <TabsContent value="orders">
+                <ChartContainer config={ordersConfig} className="h-64 w-full">
+                  <BarChart
+                    data={chartData}
+                    margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                  >
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <XAxis
+                      dataKey="month"
+                      axisLine={false}
+                      tickLine={false}
+                      tickMargin={8}
+                      fontSize={12}
+                    />
+                    <YAxis
+                      axisLine={false}
+                      tickLine={false}
+                      tickMargin={8}
+                      fontSize={10}
+                      width={40}
+                      tickFormatter={(v) =>
+                        compactNumberFormatter.format(Number(v))
+                      }
+                    />
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          formatter={(value) =>
+                            numberFormatter.format(Number(value))
+                          }
+                        />
+                      }
+                      cursor={{ fillOpacity: 0.05 }}
+                    />
+                    <Bar
+                      dataKey="orders"
+                      fill="var(--color-orders)"
+                      radius={[4, 4, 0, 0]}
+                    />
+                  </BarChart>
+                </ChartContainer>
+              </TabsContent>
+
+              <TabsContent value="customers">
+                <ChartContainer
+                  config={customersConfig}
+                  className="h-64 w-full"
+                >
+                  <LineChart
+                    data={chartData}
+                    margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                  >
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <XAxis
+                      dataKey="month"
+                      axisLine={false}
+                      tickLine={false}
+                      tickMargin={8}
+                      fontSize={12}
+                    />
+                    <YAxis
+                      axisLine={false}
+                      tickLine={false}
+                      tickMargin={8}
+                      fontSize={10}
+                      width={40}
+                      tickFormatter={(v) =>
+                        compactNumberFormatter.format(Number(v))
+                      }
+                    />
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          formatter={(value) =>
+                            numberFormatter.format(Number(value))
+                          }
+                        />
+                      }
+                      cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                    />
+                    <Line
+                      type="monotone"
+                      dataKey="customers"
+                      stroke="var(--color-customers)"
+                      strokeWidth={2}
+                      dot={{ fill: "var(--color-customers)", r: 4 }}
+                    />
+                  </LineChart>
+                </ChartContainer>
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup4 };
diff --git a/blocks/chart-group5.tsx b/blocks/chart-group5.tsx
new file mode 100644
index 0000000..4a7e156
--- /dev/null
+++ b/blocks/chart-group5.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup5Props {
+  className?: string;
+}
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const currentData = [
+  { month: monthLabel(0), value: 18600 },
+  { month: monthLabel(1), value: 30500 },
+  { month: monthLabel(2), value: 23700 },
+  { month: monthLabel(3), value: 27300 },
+  { month: monthLabel(4), value: 20900 },
+  { month: monthLabel(5), value: 31400 },
+];
+
+const previoIRRata = [
+  { month: monthLabel(0), value: 15200 },
+  { month: monthLabel(1), value: 24800 },
+  { month: monthLabel(2), value: 21100 },
+  { month: monthLabel(3), value: 22500 },
+  { month: monthLabel(4), value: 19400 },
+  { month: monthLabel(5), value: 26200 },
+];
+
+const combinedData = currentData.map((item, index) => ({
+  month: item.month,
+  current: item.value,
+  previous: previoIRRata[index].value,
+}));
+
+const chartConfig = {
+  current: { label: "امسال", color: "var(--chart-1)" },
+  previous: { label: "سال قبل", color: "var(--chart-4)" },
+} satisfies ChartConfig;
+
+const ChartGroup5 = ({ className }: ChartGroup5Props) => {
+  const currentTotal = currentData.reduce((sum, item) => sum + item.value, 0);
+  const previousTotal = previoIRRata.reduce((sum, item) => sum + item.value, 0);
+  const difference = currentTotal - previousTotal;
+  const growthPercent =
+    ((currentTotal - previousTotal) / previousTotal) * 100;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container grid gap-4 md:grid-cols-3">
+        <Card className="text-start md:col-span-2">
+          <CardHeader>
+            <CardTitle>مقایسه سال به سال</CardTitle>
+            <CardDescription>عملکرد درآمد در برابر سال قبل</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={chartConfig} className="h-64 w-full">
+              <LineChart
+                data={combinedData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={52}
+                  tickFormatter={(v) =>
+                    compactCurrencyFormatter.format(Number(v))
+                  }
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        currencyFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                />
+                <ChartLegend content={<ChartLegendContent />} />
+                <Line
+                  type="monotone"
+                  dataKey="current"
+                  stroke="var(--color-current)"
+                  strokeWidth={2}
+                  dot={{ fill: "var(--color-current)", r: 4 }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="previous"
+                  stroke="var(--color-previous)"
+                  strokeWidth={2}
+                  strokeDasharray="4 4"
+                  dot={{ fill: "var(--color-previous)", r: 4 }}
+                />
+              </LineChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="text-start">
+          <CardHeader className="pb-3">
+            <CardTitle>خلاصه</CardTitle>
+            <CardDescription>مقایسه دوره‌ای</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm">
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">امسال</span>
+              <span className="font-semibold tabular-nums">
+                {currencyFormatter.format(currentTotal)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">سال قبل</span>
+              <span className="text-muted-foreground tabular-nums">
+                {currencyFormatter.format(previousTotal)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">تفاوت</span>
+              <span className="text-green-500 tabular-nums">
+                +{currencyFormatter.format(difference)}
+              </span>
+            </div>
+            <div className="border-t pt-3">
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">رشد</span>
+                <span className="font-semibold text-green-500 tabular-nums">
+                  {percentChangeFormatter.format(growthPercent)}٪
+                </span>
+              </div>
+            </div>
+            <div className="border-t pt-3 text-xs">
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">
+                  میانگین ماهانه (امسال)
+                </span>
+                <span className="tabular-nums">
+                  {currencyFormatter.format(Math.round(currentTotal / 6))}
+                </span>
+              </div>
+              <div className="mt-1 flex items-center justify-between">
+                <span className="text-muted-foreground">
+                  میانگین ماهانه (سال قبل)
+                </span>
+                <span className="text-muted-foreground tabular-nums">
+                  {currencyFormatter.format(Math.round(previousTotal / 6))}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup5 };
diff --git a/blocks/chart-group6.tsx b/blocks/chart-group6.tsx
new file mode 100644
index 0000000..bcb467b
--- /dev/null
+++ b/blocks/chart-group6.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { Bar, BarChart, Pie, PieChart, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup6Props {
+  className?: string;
+}
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const pieData = [
+  { name: "دسکتاپ", value: 4520, fill: "var(--chart-1)" },
+  { name: "موبایل", value: 3210, fill: "var(--chart-2)" },
+  { name: "تبلت", value: 1270, fill: "var(--chart-3)" },
+];
+
+const pieConfig = {
+  دسکتاپ: { label: "دسکتاپ", color: "var(--chart-1)" },
+  موبایل: { label: "موبایل", color: "var(--chart-2)" },
+  تبلت: { label: "تبلت", color: "var(--chart-3)" },
+} satisfies ChartConfig;
+
+const barData = [
+  { name: "Chrome", value: 4200 },
+  { name: "Safari", value: 2800 },
+  { name: "Firefox", value: 1400 },
+  { name: "Edge", value: 980 },
+  { name: "سایر", value: 620 },
+];
+
+const barConfig = {
+  value: { label: "کاربران", color: "var(--chart-4)" },
+} satisfies ChartConfig;
+
+const ChartGroup6 = ({ className }: ChartGroup6Props) => {
+  const total = pieData.reduce((sum, item) => sum + item.value, 0);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container grid gap-4 md:grid-cols-2">
+        <Card className="text-start">
+          <CardHeader>
+            <CardTitle>ترافیک به تفکیک دستگاه</CardTitle>
+            <CardDescription>تفکیک نشست‌های کاربر</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-8">
+              <div className="relative size-40">
+                <ChartContainer config={pieConfig} className="size-full">
+                  <PieChart>
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          nameKey="name"
+                          hideLabel
+                          formatter={(value) =>
+                            numberFormatter.format(Number(value))
+                          }
+                        />
+                      }
+                      cursor={false}
+                    />
+                    <Pie
+                      data={pieData}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={50}
+                      outerRadius={70}
+                      paddingAngle={2}
+                      dataKey="value"
+                      nameKey="name"
+                      strokeWidth={0}
+                    />
+                  </PieChart>
+                </ChartContainer>
+                <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+                  <span className="text-xl font-bold tabular-nums">
+                    {numberFormatter.format(total)}
+                  </span>
+                  <span className="text-xs text-muted-foreground">مجموع</span>
+                </div>
+              </div>
+              <div className="flex-1 space-y-3">
+                {pieData.map((item, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between"
+                  >
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="size-3 rounded-full"
+                        style={{ backgroundColor: item.fill }}
+                      />
+                      <span className="text-sm">{item.name}</span>
+                    </div>
+                    <span className="text-sm font-medium tabular-nums">
+                      {numberFormatter.format(item.value)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="text-start">
+          <CardHeader>
+            <CardTitle>استفاده از مرورگر</CardTitle>
+            <CardDescription>برترین مرورگرها بر اساس کاربر</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={barConfig} className="h-48 w-full">
+              <BarChart
+                data={barData}
+                layout="vertical"
+                margin={{ top: 0, right: 10, left: 0, bottom: 0 }}
+              >
+                <XAxis
+                  type="number"
+                  axisLine={false}
+                  tickLine={false}
+                  fontSize={10}
+                  tickFormatter={(v) =>
+                    compactNumberFormatter.format(Number(v))
+                  }
+                />
+                <YAxis
+                  type="category"
+                  dataKey="name"
+                  axisLine={false}
+                  tickLine={false}
+                  fontSize={12}
+                  width={72}
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        numberFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ fillOpacity: 0.05 }}
+                />
+                <Bar
+                  dataKey="value"
+                  fill="var(--color-value)"
+                  radius={[0, 4, 4, 0]}
+                />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup6 };
diff --git a/blocks/chart-group7.tsx b/blocks/chart-group7.tsx
new file mode 100644
index 0000000..9df50e8
--- /dev/null
+++ b/blocks/chart-group7.tsx
@@ -0,0 +1,269 @@
+"use client";
+
+import {
+  DollarSign,
+  Eye,
+  ShoppingCart,
+  TrendingDown,
+  TrendingUp,
+  Users,
+} from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup7Props {
+  className?: string;
+}
+
+const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  weekday: "short",
+});
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const chartData = [
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 6)),
+    revenue: 4200,
+    orders: 42,
+    visitors: 1200,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 7)),
+    revenue: 5100,
+    orders: 51,
+    visitors: 1450,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 8)),
+    revenue: 4800,
+    orders: 48,
+    visitors: 1380,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 9)),
+    revenue: 6200,
+    orders: 62,
+    visitors: 1720,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 10)),
+    revenue: 7100,
+    orders: 71,
+    visitors: 1980,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 11)),
+    revenue: 5400,
+    orders: 54,
+    visitors: 1540,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 12)),
+    revenue: 4100,
+    orders: 41,
+    visitors: 1180,
+  },
+];
+
+const chartConfig = {
+  revenue: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const stats = [
+  {
+    title: "درآمد",
+    value: currencyFormatter.format(
+      chartData.reduce((sum, d) => sum + d.revenue, 0),
+    ),
+    change: 12.5,
+    icon: DollarSign,
+  },
+  {
+    title: "سفارش‌ها",
+    value: numberFormatter.format(
+      chartData.reduce((sum, d) => sum + d.orders, 0),
+    ),
+    change: 8.2,
+    icon: ShoppingCart,
+  },
+  {
+    title: "بازدیدکنندگان",
+    value: numberFormatter.format(
+      chartData.reduce((sum, d) => sum + d.visitors, 0),
+    ),
+    change: -2.1,
+    icon: Eye,
+  },
+  {
+    title: "مشتریان",
+    value: numberFormatter.format(284),
+    change: 15.3,
+    icon: Users,
+  },
+];
+
+const ChartGroup7 = ({ className }: ChartGroup7Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container space-y-4">
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat, index) => {
+            const Icon = stat.icon;
+            const isPositive = stat.change >= 0;
+            return (
+              <Card key={index} className="p-4 text-start">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Icon
+                      className="size-4 text-muted-foreground"
+                      aria-hidden="true"
+                    />
+                    <p className="text-sm text-muted-foreground">
+                      {stat.title}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-1 text-sm tabular-nums">
+                    {isPositive ? (
+                      <TrendingUp
+                        className="size-4 text-green-500"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <TrendingDown
+                        className="size-4 text-red-500"
+                        aria-hidden="true"
+                      />
+                    )}
+                    <span
+                      className={isPositive ? "text-green-500" : "text-red-500"}
+                    >
+                      {percentChangeFormatter.format(stat.change)}٪
+                    </span>
+                  </div>
+                </div>
+                <p className="mt-1 text-xl font-bold tabular-nums">
+                  {stat.value}
+                </p>
+              </Card>
+            );
+          })}
+        </div>
+
+        <Card className="text-start">
+          <CardHeader>
+            <CardTitle>درآمد هفتگی</CardTitle>
+            <CardDescription>درآمد روزانه در هفته گذشته</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={chartConfig} className="h-64 w-full">
+              <AreaChart
+                data={chartData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient
+                    id="weeklyGradient"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="0%"
+                      stopColor="var(--color-revenue)"
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--color-revenue)"
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="day"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={52}
+                  tickFormatter={(v) =>
+                    compactCurrencyFormatter.format(Number(v))
+                  }
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        currencyFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="revenue"
+                  stroke="var(--color-revenue)"
+                  strokeWidth={2}
+                  fill="url(#weeklyGradient)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup7 };
diff --git a/blocks/chart-group8.tsx b/blocks/chart-group8.tsx
new file mode 100644
index 0000000..2080cc5
--- /dev/null
+++ b/blocks/chart-group8.tsx
@@ -0,0 +1,327 @@
+"use client";
+
+import { TrendingDown, TrendingUp } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup8Props {
+  className?: string;
+}
+
+const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  weekday: "short",
+});
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const formatPercent = (value: number) =>
+  `${percentFormatter.format(value)}٪`;
+
+const weeklyData = [
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 6)),
+    current: 420,
+    previous: 380,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 7)),
+    current: 510,
+    previous: 450,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 8)),
+    current: 480,
+    previous: 420,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 9)),
+    current: 620,
+    previous: 550,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 10)),
+    current: 710,
+    previous: 620,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 11)),
+    current: 540,
+    previous: 480,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 12)),
+    current: 410,
+    previous: 390,
+  },
+];
+
+const performanceData = [
+  { metric: "فروش", value: 87, target: 100, fill: "var(--chart-1)" },
+  { metric: "سرنخ‌ها", value: 65, target: 100, fill: "var(--chart-2)" },
+  { metric: "تبدیل", value: 42, target: 100, fill: "var(--chart-3)" },
+  { metric: "حفظ مشتری", value: 91, target: 100, fill: "var(--chart-4)" },
+];
+
+const weeklyConfig = {
+  current: { label: "این هفته", color: "var(--chart-1)" },
+  previous: { label: "هفته قبل", color: "var(--chart-4)" },
+} satisfies ChartConfig;
+
+const monthlyGoalPercent = 73;
+const monthlyGoalCurrent = 36500;
+const monthlyGoalTarget = 50000;
+
+const quickStats = [
+  {
+    label: "میانگین سفارش",
+    value: currencyFormatter.format(142),
+    change: 8.5,
+  },
+  {
+    label: "مشتریان جدید",
+    value: numberFormatter.format(284),
+    change: 12.3,
+  },
+  {
+    label: "نرخ تکرار",
+    value: formatPercent(34),
+    change: -2.1,
+  },
+];
+
+const ChartGroup8 = ({ className }: ChartGroup8Props) => {
+  const currentTotal = weeklyData.reduce((sum, d) => sum + d.current, 0);
+  const previousTotal = weeklyData.reduce((sum, d) => sum + d.previous, 0);
+  const changePercent =
+    ((currentTotal - previousTotal) / previousTotal) * 100;
+  const isPositive = changePercent >= 0;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card className="text-start lg:col-span-2">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <CardTitle className="text-base">مقایسه هفتگی</CardTitle>
+                <CardDescription>این هفته در برابر هفته قبل</CardDescription>
+              </div>
+              <div>
+                <p className="text-xl font-bold tabular-nums">
+                  {numberFormatter.format(currentTotal)}
+                </p>
+                <div className="flex items-center gap-1 text-sm tabular-nums">
+                  {isPositive ? (
+                    <TrendingUp
+                      className="size-4 text-green-500"
+                      aria-hidden="true"
+                    />
+                  ) : (
+                    <TrendingDown
+                      className="size-4 text-red-500"
+                      aria-hidden="true"
+                    />
+                  )}
+                  <span
+                    className={isPositive ? "text-green-500" : "text-red-500"}
+                  >
+                    {percentChangeFormatter.format(changePercent)}٪
+                  </span>
+                </div>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={weeklyConfig} className="h-52 w-full">
+              <LineChart
+                data={weeklyData}
+                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                <XAxis
+                  dataKey="day"
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={12}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tickMargin={8}
+                  fontSize={10}
+                  width={40}
+                  tickFormatter={(v) => numberFormatter.format(Number(v))}
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) =>
+                        numberFormatter.format(Number(value))
+                      }
+                    />
+                  }
+                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="current"
+                  stroke="var(--color-current)"
+                  strokeWidth={2}
+                  dot={{ fill: "var(--color-current)", r: 4 }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="previous"
+                  stroke="var(--color-previous)"
+                  strokeWidth={2}
+                  strokeDasharray="4 4"
+                  dot={{ fill: "var(--color-previous)", r: 3 }}
+                />
+              </LineChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="text-start">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">هدف ماهانه</CardTitle>
+            <CardDescription>پیشرفت هدف درآمد</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col items-center justify-center">
+            <div className="relative flex size-36 items-center justify-center">
+              <svg className="size-full -rotate-90" viewBox="0 0 100 100">
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="40"
+                  fill="none"
+                  className="stroke-muted"
+                  strokeWidth="8"
+                />
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="40"
+                  fill="none"
+                  className="stroke-chart-1"
+                  strokeWidth="8"
+                  strokeLinecap="round"
+                  strokeDasharray={`${monthlyGoalPercent * 2.51} ${100 * 2.51}`}
+                />
+              </svg>
+              <div className="absolute flex flex-col items-center">
+                <span className="text-xl font-bold tabular-nums">
+                  {formatPercent(monthlyGoalPercent)}
+                </span>
+                <span className="text-xs text-muted-foreground">از هدف</span>
+              </div>
+            </div>
+            <p className="mt-2 text-center text-sm text-muted-foreground tabular-nums">
+              {currencyFormatter.format(monthlyGoalCurrent)} /{" "}
+              {currencyFormatter.format(monthlyGoalTarget)}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="text-start">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">آمار سریع</CardTitle>
+            <CardDescription>نمای کلی شاخص‌های کلیدی</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {quickStats.map((stat, index) => (
+              <div key={index} className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">
+                  {stat.label}
+                </span>
+                <div className="flex items-center gap-2 tabular-nums">
+                  <span className="font-semibold">{stat.value}</span>
+                  <span
+                    className={cn(
+                      "text-xs",
+                      stat.change >= 0 ? "text-green-500" : "text-red-500",
+                    )}
+                  >
+                    {percentChangeFormatter.format(stat.change)}٪
+                  </span>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card className="text-start lg:col-span-4">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">شاخص‌های عملکرد</CardTitle>
+            <CardDescription>
+              پیشرفت نسبت به اهداف سه‌ماهه
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+              {performanceData.map((item, index) => (
+                <div key={index} className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">{item.metric}</span>
+                    <span className="text-sm text-muted-foreground tabular-nums">
+                      {formatPercent(item.value)}
+                    </span>
+                  </div>
+                  <div className="h-2 overflow-hidden rounded-full bg-muted">
+                    <div
+                      className="h-full rounded-full transition-all"
+                      style={{
+                        width: `${item.value}%`,
+                        backgroundColor: item.fill,
+                      }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup8 };
diff --git a/blocks/chart-group9.tsx b/blocks/chart-group9.tsx
new file mode 100644
index 0000000..b96b108
--- /dev/null
+++ b/blocks/chart-group9.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface ChartGroup9Props {
+  className?: string;
+}
+
+const dateLabel = (monthIndex: number, day: number) =>
+  new Intl.DateTimeFormat("fa-IR", {
+    month: "short",
+    day: "numeric",
+  }).format(new Date(2025, monthIndex, day));
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 1,
+});
+
+const formatPercent = (value: number) =>
+  `${oneDecimalFormatter.format(value)}٪`;
+
+const datePoints: [number, number][] = [
+  [0, 1],
+  [0, 8],
+  [0, 15],
+  [0, 22],
+  [0, 29],
+  [1, 5],
+  [1, 12],
+  [1, 19],
+];
+
+const buildSeries = (values: number[]) =>
+  datePoints.map(([month, day], index) => ({
+    date: dateLabel(month, day),
+    value: values[index],
+  }));
+
+const revenueData = buildSeries([
+  4200, 5100, 4800, 6200, 7100, 5400, 6800, 7500,
+]);
+
+const ordersData = buildSeries([42, 51, 48, 62, 71, 54, 68, 75]);
+
+const visitorsData = buildSeries([
+  1200, 1450, 1380, 1720, 1980, 1540, 1850, 2100,
+]);
+
+const totalRevenue = revenueData.reduce((sum, d) => sum + d.value, 0);
+const totalOrders = ordersData.reduce((sum, d) => sum + d.value, 0);
+
+const metricOptions = [
+  { value: "revenue", label: "درآمد" },
+  { value: "orders", label: "سفارش‌ها" },
+  { value: "visitors", label: "بازدیدکنندگان" },
+] as const;
+
+const revenueConfig = {
+  value: { label: "درآمد", color: "var(--chart-1)" },
+} satisfies ChartConfig;
+
+const ordersConfig = {
+  value: { label: "سفارش‌ها", color: "var(--chart-2)" },
+} satisfies ChartConfig;
+
+const visitorsConfig = {
+  value: { label: "بازدیدکنندگان", color: "var(--chart-3)" },
+} satisfies ChartConfig;
+
+const ChartGroup9 = ({ className }: ChartGroup9Props) => {
+  const [metric, setMetric] = useState("revenue");
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <Card className="w-full text-start">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0">
+            <div>
+              <CardTitle>مرور شاخص‌ها</CardTitle>
+              <CardDescription>
+                مشاهده شاخص‌های کلیدی در طول زمان
+              </CardDescription>
+            </div>
+            <Select value={metric} onValueChange={setMetric}>
+              <SelectTrigger className="w-40">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {metricOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </CardHeader>
+          <CardContent>
+            <div className="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
+              <div>
+                <p className="text-sm text-muted-foreground">مجموع درآمد</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {currencyFormatter.format(totalRevenue)}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">مجموع سفارش‌ها</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {numberFormatter.format(totalOrders)}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">
+                  میانگین ارزش سفارش
+                </p>
+                <p className="text-xl font-bold tabular-nums">
+                  {currencyFormatter.format(
+                    Math.round(totalRevenue / totalOrders),
+                  )}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">نرخ تبدیل</p>
+                <p className="text-xl font-bold tabular-nums">
+                  {formatPercent(3.2)}
+                </p>
+              </div>
+            </div>
+
+            {metric === "revenue" && (
+              <ChartContainer config={revenueConfig} className="h-64 w-full">
+                <AreaChart
+                  data={revenueData}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <defs>
+                    <linearGradient id="revGrad9" x1="0" y1="0" x2="0" y2="1">
+                      <stop
+                        offset="0%"
+                        stopColor="var(--color-value)"
+                        stopOpacity={0.3}
+                      />
+                      <stop
+                        offset="100%"
+                        stopColor="var(--color-value)"
+                        stopOpacity={0}
+                      />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="date"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={12}
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={52}
+                    tickFormatter={(v) =>
+                      compactCurrencyFormatter.format(Number(v))
+                    }
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) =>
+                          currencyFormatter.format(Number(value))
+                        }
+                      />
+                    }
+                    cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                  />
+                  <Area
+                    type="monotone"
+                    dataKey="value"
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                    fill="url(#revGrad9)"
+                  />
+                </AreaChart>
+              </ChartContainer>
+            )}
+            {metric === "orders" && (
+              <ChartContainer config={ordersConfig} className="h-64 w-full">
+                <BarChart
+                  data={ordersData}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="date"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={12}
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={40}
+                    tickFormatter={(v) =>
+                      compactNumberFormatter.format(Number(v))
+                    }
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) =>
+                          numberFormatter.format(Number(value))
+                        }
+                      />
+                    }
+                    cursor={{ fillOpacity: 0.05 }}
+                  />
+                  <Bar
+                    dataKey="value"
+                    fill="var(--color-value)"
+                    radius={[4, 4, 0, 0]}
+                  />
+                </BarChart>
+              </ChartContainer>
+            )}
+            {metric === "visitors" && (
+              <ChartContainer config={visitorsConfig} className="h-64 w-full">
+                <LineChart
+                  data={visitorsData}
+                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis
+                    dataKey="date"
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={12}
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickMargin={8}
+                    fontSize={10}
+                    width={40}
+                    tickFormatter={(v) =>
+                      compactNumberFormatter.format(Number(v))
+                    }
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) =>
+                          numberFormatter.format(Number(value))
+                        }
+                      />
+                    }
+                    cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="value"
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                </LineChart>
+              </ChartContainer>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { ChartGroup9 };
diff --git a/blocks/checkout1.tsx b/blocks/checkout1.tsx
new file mode 100644
index 0000000..30c296e
--- /dev/null
+++ b/blocks/checkout1.tsx
@@ -0,0 +1,1145 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Minus, Plus, Trash } from "lucide-react";
+import { useCallback, useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useFieldArray,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import z from "zod";
+
+import {
+  Logo,
+  LogoImageDesktop,
+  LogoImageMobile,
+} from "@/components/shadcnblocks/logo";
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  quantity: number;
+  details: {
+    label: string;
+    value: string;
+  }[];
+};
+
+interface CartItemProps extends CartItem {
+  index: number;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+interface CartProps {
+  cartItems: CartItem[];
+  form: UseFormReturn<CheckoutFormType>;
+}
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+const PAYMENT_METHODS = {
+  creditCard: "creditCard",
+  paypal: "paypal",
+  onlineBankTransfer: "onlineBankTransfer",
+};
+
+type PaymentMethod = keyof typeof PAYMENT_METHODS;
+
+const CreditCardPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.creditCard),
+  cardholderName: z.string(),
+  cardNumber: z.string(),
+  expiryDate: z
+    .string()
+    .regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "فرمت نامعتبر (MM/YY)")
+    .refine((value) => {
+      const [mm, yy] = value.split("/").map(Number);
+
+      const now = new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear() % 100;
+
+      if (yy < currentYear) return false;
+
+      if (yy === currentYear && mm < currentMonth) return false;
+
+      return true;
+    }, "کارت منقضی شده است"),
+  cvc: z.string(),
+});
+
+const PayPalPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.paypal),
+  payPalEmail: z.string(),
+});
+
+const BankTransferPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.onlineBankTransfer),
+  bankName: z.string(),
+  accountNumber: z.string(),
+});
+
+const PaymentSchema = z.discriminatedUnion("method", [
+  CreditCardPayment,
+  PayPalPayment,
+  BankTransferPayment,
+]);
+
+const checkoutFormSchema = z.object({
+  contactInfo: z.object({
+    email: z.string(),
+    subscribe: z.boolean().optional(),
+  }),
+  address: z.object({
+    country: z.string(),
+    firstName: z.string(),
+    lastName: z.string(),
+    address: z.string(),
+    postalCode: z.string(),
+    city: z.string(),
+    phone: z.string(),
+  }),
+  shippingMethod: z.string(),
+  payment: PaymentSchema,
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CheckoutFormType = z.infer<typeof checkoutFormSchema>;
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کفش اسپرت زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+    price: {
+      regular: 354.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      {
+        label: "رنگ",
+        value: "قرمز",
+      },
+      {
+        label: "سایز",
+        value: "36",
+      },
+    ],
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "سوئیشرت دو رنگ با لوگوی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      {
+        label: "رنگ",
+        value: "آبی و سفید",
+      },
+      {
+        label: "سایز",
+        value: "L",
+      },
+    ],
+  },
+  {
+    product_id: "product-4",
+    link: "#",
+    name: "کیف چرمی زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: {
+      regular: 245.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      {
+        label: "رنگ",
+        value: "زرشکی",
+      },
+    ],
+  },
+];
+
+interface Checkout1Props {
+  cartItems?: CartItem[];
+  className?: string;
+}
+
+const Checkout1 = ({ cartItems = CART_ITEMS, className }: Checkout1Props) => {
+  const [activeAccordion, setActiveAccordion] = useState("item-1");
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: item.quantity,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm({
+    resolver: zodResolver(checkoutFormSchema),
+    defaultValues: {
+      payment: {
+        method: PAYMENT_METHODS.creditCard,
+      },
+      products: defaultProducts,
+    },
+  });
+
+  const onSubmit = (data: CheckoutFormType) => {
+    console.log(data);
+  };
+
+  const onContinue = (value: string) => {
+    setActiveAccordion(value);
+  };
+
+  const handleOnValueChange = (value: string) => {
+    setActiveAccordion(value);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-6 pb-8 md:flex-row md:items-center md:justify-between md:gap-8">
+          <div className="flex flex-col gap-4">
+            <Logo url="https://ShadcnBlocks" className="mb-2">
+              <LogoImageDesktop
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.png"
+                alt="لوگو"
+                title="نام فروشگاه"
+              />
+              <LogoImageMobile
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.png"
+                alt="لوگو"
+                title="نام فروشگاه"
+              />
+            </Logo>
+            <div className="flex flex-col gap-2">
+              <h1 className="text-xl font-bold tracking-tight md:text-2xll">
+                تسویه حساب
+              </h1>
+              <p className="text-sm text-muted-foreground md:text-base">
+                اطلاعات زیر را تکمیل کنید تا سفارش شما در کوتاه‌ترین زمان پردازش و ارسال شود.
+                                            </p>
+            </div>
+          </div>
+        </div>
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="grid grid-cols-1 gap-0 lg:grid-cols-2 lg:gap-17.5">
+              <div>
+                <Accordion
+                  type="single"
+                  collapsible
+                  className="w-full"
+                  value={activeAccordion}
+                  onValueChange={handleOnValueChange}
+                >
+                  <AccordionItem value="مرحله ۱">
+                    <AccordionTrigger className="px-1 py-7 text-lg font-semibold hover:no-underline [&>svg:last-child]:hidden [&[data-state=closed]>svg:nth-of-type(2)]:hidden [&[data-state=open]>svg:nth-of-type(1)]:hidden [&[data-state=open]>svg:nth-of-type(2)]:block">
+                      اطلاعات تماس
+                      <Plus className="pointer-events-none size-4 shrink-0 self-center text-muted-foreground" />
+                      <Minus className="pointer-events-none hidden size-4 shrink-0 self-center text-muted-foreground" />
+                    </AccordionTrigger>
+                    <AccordionContent className="px-1 pb-7">
+                      <div className="space-y-7">
+                        <ContactFields />
+                        <Button
+                          type="button"
+                          className="w-full"
+                          variant="secondary"
+                          onClick={() => onContinue("item-2")}
+                        >
+                          ادامه مرحله
+                                                                          </Button>
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                  <AccordionItem value="مرحله ۲">
+                    <AccordionTrigger className="px-1 py-7 text-lg font-semibold hover:no-underline [&>svg:last-child]:hidden [&[data-state=closed]>svg:nth-of-type(2)]:hidden [&[data-state=open]>svg:nth-of-type(1)]:hidden [&[data-state=open]>svg:nth-of-type(2)]:block">
+                      آدرس
+                      <Plus className="pointer-events-none size-4 shrink-0 self-center text-muted-foreground" />
+                      <Minus className="pointer-events-none hidden size-4 shrink-0 self-center text-muted-foreground" />
+                    </AccordionTrigger>
+                    <AccordionContent className="px-1 pb-7">
+                      <div className="space-y-7">
+                        <AddressFields />
+                        <Button
+                          type="button"
+                          className="w-full"
+                          variant="secondary"
+                          onClick={() => onContinue("item-3")}
+                        >
+                          ادامه مرحله
+                                                                          </Button>
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                  <AccordionItem value="مرحله ۳">
+                    <AccordionTrigger className="px-1 py-7 text-lg font-semibold hover:no-underline [&>svg:last-child]:hidden [&[data-state=closed]>svg:nth-of-type(2)]:hidden [&[data-state=open]>svg:nth-of-type(1)]:hidden [&[data-state=open]>svg:nth-of-type(2)]:block">
+                      روش ارسال
+                      <Plus className="pointer-events-none size-4 shrink-0 self-center text-muted-foreground" />
+                      <Minus className="pointer-events-none hidden size-4 shrink-0 self-center text-muted-foreground" />
+                    </AccordionTrigger>
+                    <AccordionContent className="px-1 pb-7">
+                      <div className="space-y-7">
+                        <ShippingMethodFields />
+                        <Button
+                          type="button"
+                          className="w-full"
+                          variant="secondary"
+                          onClick={() => onContinue("item-4")}
+                        >
+                          ادامه مرحله
+                                                                          </Button>
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                  <AccordionItem value="مرحله ۴">
+                    <AccordionTrigger className="px-1 py-7 text-lg font-semibold hover:no-underline [&>svg:last-child]:hidden [&[data-state=closed]>svg:nth-of-type(2)]:hidden [&[data-state=open]>svg:nth-of-type(1)]:hidden [&[data-state=open]>svg:nth-of-type(2)]:block">
+                      پرداخت
+                      <Plus className="pointer-events-none size-4 shrink-0 self-center text-muted-foreground" />
+                      <Minus className="pointer-events-none hidden size-4 shrink-0 self-center text-muted-foreground" />
+                    </AccordionTrigger>
+                    <AccordionContent className="px-1 pb-7">
+                      <div className="space-y-7">
+                        <PaymentFields />
+                        <Button type="submit" className="w-full">
+                          ثبت و پرداخت سفارش
+                                                                          </Button>
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+              <div>
+                <Cart form={form} cartItems={cartItems} />
+              </div>
+            </div>
+          </form>
+        </FormProvider>
+      </div>
+    </section>
+  );
+};
+
+const ContactFields = () => {
+  const form = useFormContext();
+
+  return (
+    <FieldGroup className="gap-3.5">
+      <Controller
+        name="contactInfo.email"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-email"
+            >
+              ایمیل
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-email"
+              type="email"
+              dir="rtl"
+              placeholder="example@email.com"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <Controller
+        name="contactInfo.subscribe"
+        control={form.control}
+        render={({ field }) => (
+          <Field orientation="horizontal">
+            <Checkbox
+              id="checkout-subscribe"
+              name={field.name}
+              // @ts-ignore
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            />
+            <FieldLabel htmlFor="checkout-subscribe" className="font-normal">
+              مایلم از تخفیف‌ها و پیشنهادهای ویژه از طریق ایمیل مطلع شوم.
+                                </FieldLabel>
+          </Field>
+        )}
+      />
+    </FieldGroup>
+  );
+};
+
+const AddressFields = () => {
+  const form = useFormContext();
+
+  return (
+    <FieldGroup className="gap-3.5">
+      <Controller
+        name="address.country"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-country"
+            >
+              کشور
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-country"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <div className="flex gap-3.5 max-sm:flex-col">
+        <Controller
+          name="address.firstName"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-firstName"
+              >
+                نام
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-firstName"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="address.lastName"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-lastName"
+              >
+                نام خانوادگی
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-lastName"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+      <Controller
+        name="address.address"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-address"
+            >
+              آدرس
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-address"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <div className="flex gap-3.5 max-sm:flex-col">
+        <Controller
+          name="address.postalCode"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-postalCode"
+              >
+                کد پستی
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-postalCode"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="address.city"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-city"
+              >
+                شهر
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-city"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+      <Controller
+        name="address.phone"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-phone"
+            >
+              تلفن
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-phone"
+              type="tel"
+              dir="rtl"
+              placeholder="09123456789"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+    </FieldGroup>
+  );
+};
+
+const ShippingMethodFields = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="shippingMethod"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field>
+          <RadioGroup
+            name={field.name}
+            value={field.value}
+            onValueChange={field.onChange}
+            className="flex max-sm:flex-col"
+          >
+            <FieldLabel htmlFor="checkout-shippingMethod-1">
+              <Field orientation="horizontal" data-invalid={fieldState.invalid}>
+                <FieldContent>
+                  <FieldTitle>UPS</FieldTitle>
+                  <FieldDescription>تحویل در اولین روز کاری</FieldDescription>
+                </FieldContent>
+                <div className="flex gap-3.5">
+                  <p className="text-sm tabular-nums">
+                    {formatPrice(10, "IRR")}
+                  </p>
+                  <RadioGroupItem
+                    value="UPS"
+                    id="checkout-shippingMethod-1"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </div>
+              </Field>
+            </FieldLabel>
+            <FieldLabel htmlFor="checkout-shippingMethod-2">
+              <Field orientation="horizontal" data-invalid={fieldState.invalid}>
+                <FieldContent>
+                  <FieldTitle>FedEx</FieldTitle>
+                  <FieldDescription>تحویل طی ۳ تا ۵ روز کاری</FieldDescription>
+                </FieldContent>
+                <div className="flex gap-3.5">
+                  <p className="text-sm tabular-nums">
+                    {formatPrice(2.99, "IRR")}
+                  </p>
+                  <RadioGroupItem
+                    value="FedEx"
+                    id="checkout-shippingMethod-2"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </div>
+              </Field>
+            </FieldLabel>
+          </RadioGroup>
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+const PaymentFields = () => {
+  const form = useFormContext();
+  const paymentMethod = form.watch("payment.method") as PaymentMethod;
+
+  return (
+    <div className="space-y-7">
+      <Controller
+        name="payment.method"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field>
+            <RadioGroup
+              name={field.name}
+              value={field.value}
+              onValueChange={field.onChange}
+            >
+              <FieldLabel htmlFor="checkout-payment-method-1">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                >
+                  <FieldContent className="flex-1">
+                    <FieldTitle>کارت بانکی</FieldTitle>
+                  </FieldContent>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                    alt="کارت بانکی"
+                    className="size-5"
+                  />
+                  <RadioGroupItem
+                    value="creditCard"
+                    id="checkout-payment-method-1"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </Field>
+              </FieldLabel>
+              <FieldLabel htmlFor="checkout-payment-method-2">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                >
+                  <FieldContent className="flex-1">
+                    <FieldTitle>کیف پول دیجیتال</FieldTitle>
+                  </FieldContent>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/paypal-icon.svg"
+                    alt="PayPal"
+                    className="size-5"
+                  />
+                  <RadioGroupItem
+                    value="paypal"
+                    id="checkout-payment-method-2"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </Field>
+              </FieldLabel>
+              <FieldLabel htmlFor="checkout-payment-method-3">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                >
+                  <FieldContent>
+                    <FieldTitle>پرداخت از طریق انتقال بانکی</FieldTitle>
+                  </FieldContent>
+                  <RadioGroupItem
+                    value="onlineBankTransfer"
+                    id="checkout-payment-method-3"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </Field>
+              </FieldLabel>
+            </RadioGroup>
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <PaymentFieldsByMethod method={paymentMethod} />
+    </div>
+  );
+};
+
+const PaymentFieldsByMethod = ({ method }: { method: PaymentMethod }) => {
+  const form = useFormContext();
+
+  if (!method) return;
+
+  switch (method) {
+    case PAYMENT_METHODS.creditCard:
+      return (
+        <div className="space-y-3.5">
+          <Controller
+            name="payment.cardholderName"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-cardholderName"
+                >
+                  نام دارنده کارت
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardholderName"
+                  placeholder="نام و نام خانوادگی"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <Controller
+            name="payment.cardNumber"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-cardNumber"
+                >
+                  شماره کارت
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardNumber"
+                  dir="rtl"
+                  placeholder="1234 1234 1234 1234"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <div className="flex gap-3.5 max-sm:flex-col">
+            <DateInput />
+            <Controller
+              name="payment.cvc"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel
+                    className="text-sm font-normal"
+                    htmlFor="checkout-payment-cvc"
+                  >
+                    کد امنیتی (CVC)
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="checkout-payment-cvc"
+                    dir="rtl"
+                    placeholder="123"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </div>
+        </div>
+      );
+    case PAYMENT_METHODS.paypal:
+      return (
+        <Controller
+          name="payment.payPalEmail"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-payment-payPalEmail"
+              >
+                ایمیل کیف پول دیجیتال
+              </FieldLabel>
+              <Input
+                {...field}
+                type="email"
+                dir="rtl"
+                placeholder="example@email.com"
+                id="checkout-payment-payPalEmail"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      );
+    case PAYMENT_METHODS.onlineBankTransfer:
+      return (
+        <div className="space-y-3.5">
+          <Controller
+            name="payment.bankName"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-bankName"
+                >
+                  نام بانک
+                </FieldLabel>
+                <Input
+                  {...field}
+                  placeholder="نام بانک"
+                  id="checkout-payment-bankName"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <Controller
+            name="payment.accountNumber"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-accountNumber"
+                >
+                  شماره حساب
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-accountNumber"
+                  dir="rtl"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+const DateInput = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="payment.expiryDate"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field data-invalid={fieldState.invalid}>
+          <FieldLabel
+            className="text-sm font-normal"
+            htmlFor="checkout-payment-expiryDate"
+          >
+            تاریخ انقضا
+          </FieldLabel>
+          <Input
+            {...field}
+            onChange={(e) => {
+              let val = e.target.value;
+              val = val.replace(/[^0-9/]/g, "");
+
+              const prev = field.value ?? "";
+              const isDeleting = val.length < prev.length;
+
+              if (!isDeleting) {
+                if (val.length === 2 && !val.includes("/")) {
+                  val = val + "/";
+                }
+              }
+
+              if (val.length > 5) {
+                val = val.slice(0, 5);
+              }
+
+              field.onChange(val);
+            }}
+            pattern="^(0[1-9]|1[0-2])/[0-9]{2}$"
+            placeholder="MM/YY"
+            dir="rtl"
+            id="checkout-payment-expiryDate"
+            aria-invalid={fieldState.invalid}
+          />
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+const Cart = ({ cartItems, form }: CartProps) => {
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const formItems = form.watch("products");
+
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  return (
+    <div>
+      <div className="border-b py-7">
+        <h2 className="text-lg leading-relaxed font-semibold">سبد خرید</h2>
+      </div>
+      <ul className="space-y-12 py-7">
+        {fields.map((field, index) => {
+          return (
+            <li key={field.id}>
+              <CartItem
+                {...(cartItems.find(
+                  (p) => p.product_id === field.product_id,
+                ) as CartItem)}
+                onRemoveClick={() => handleRemove(index)()}
+                onQuantityChange={(newQty: number) =>
+                  handleQuantityChange(index)(newQty)
+                }
+                index={index}
+              />
+            </li>
+          );
+        })}
+      </ul>
+      <div>
+        <div className="space-y-3.5 border-y py-7">
+          <div className="flex justify-between gap-3">
+            <p className="text-sm">جمع سفارش</p>
+            <span className="text-sm tabular-nums">
+              {formatPrice(totalPrice ?? 0, cartItems[0].price.currency)}
+            </span>
+          </div>
+          <div className="flex justify-between gap-3">
+            <p className="text-sm">هزینه ارسال</p>
+            <p className="text-sm">بدون هزینه</p>
+          </div>
+          <div className="flex justify-between gap-3">
+            <p className="text-sm">مالیات و عوارض</p>
+            <p className="text-sm tabular-nums">
+              {formatPrice(35.8, cartItems[0].price.currency)}
+            </p>
+          </div>
+        </div>
+        <div className="py-7">
+          <div className="flex justify-between gap-3">
+            <p className="text-lg leading-tight font-medium">جمع کل</p>
+            <span className="text-xl font-medium tabular-nums">
+              {formatPrice(totalPrice ?? 0, cartItems[0].price.currency)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const CartItem = ({
+  image,
+  name,
+  link,
+  details,
+  price,
+  index,
+  onQuantityChange,
+  onRemoveClick,
+}: CartItemProps) => {
+  const { regular, currency } = price;
+
+  return (
+    <Card className="rounded-none border-none bg-background p-0 shadow-none">
+      <div className="flex w-full gap-3.5 max-sm:flex-col">
+        <div className="shrink-0 basis-25">
+          <AspectRatio ratio={1} className="overflow-hidden rounded-lg">
+            <img
+              src={image}
+              alt={name}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+        </div>
+        <div className="flex-1">
+          <div className="flex flex-col justify-between gap-3">
+            <div className="flex w-full justify-between gap-3">
+              <div className="flex-1">
+                <CardTitle className="text-sm font-medium">
+                  <a href={link}>{name}</a>
+                </CardTitle>
+                <ProductDetails details={details} />
+              </div>
+              <div>
+                <span className="text-sm font-semibold tabular-nums">
+                  {formatPrice(regular, currency)}
+                </span>
+              </div>
+            </div>
+            <div className="flex w-full justify-between gap-3">
+              <QuantityField
+                index={index}
+                onQuantityChange={onQuantityChange}
+              />
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={onRemoveClick}
+                aria-label={`حذف ${name} از سبد`}
+              >
+                <Trash />
+                <span className="sr-only">حذف از سبد</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+const ProductDetails = ({
+  details,
+}: {
+  details?: {
+    label: string;
+    value: string;
+  }[];
+}) => {
+  if (!details) return;
+  return (
+    <ul>
+      {details?.map((item, index) => {
+        const isLast = index === details.length - 1;
+
+        return (
+          <li className="inline" key={`product-details-${index}`}>
+            <dl className="inline text-xs text-muted-foreground">
+              <dt className="inline">{item.label}: </dt>
+              <dd className="inline">{item.value}</dd>
+              {!isLast && <span className="mx-1 text-muted-foreground">/</span>}
+            </dl>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+const QuantityField = ({
+  index,
+  onQuantityChange,
+}: {
+  index: number;
+  onQuantityChange: (n: number) => void;
+}) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={`products.${index}.quantity`}
+      control={control}
+      render={({ field }) => {
+        return (
+          <Field className="w-full max-w-28">
+            <QuantityInput
+              inputProps={field}
+              onValueChange={(newQty) => {
+                field.onChange(newQty);
+                onQuantityChange(newQty);
+              }}
+              className="rounded-none"
+            />
+          </Field>
+        );
+      }}
+    />
+  );
+};
+
+export { Checkout1 };
diff --git a/blocks/checkout2.tsx b/blocks/checkout2.tsx
new file mode 100644
index 0000000..9df0077
--- /dev/null
+++ b/blocks/checkout2.tsx
@@ -0,0 +1,1043 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Building2, Trash } from "lucide-react";
+import { useCallback } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useFieldArray,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import z from "zod";
+
+import { Logo, LogoImage } from "@/components/shadcnblocks/logo";
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  quantity: number;
+  details: {
+    label: string;
+    value: string;
+  }[];
+};
+
+interface CartItemProps extends CartItem {
+  index: number;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+interface CartProps {
+  cartItems: CartItem[];
+  form: UseFormReturn<CheckoutFormType>;
+}
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+const PAYMENT_METHODS = {
+  creditCard: "creditCard",
+  paypal: "paypal",
+  onlineBankTransfer: "onlineBankTransfer",
+};
+
+type PaymentMethod = keyof typeof PAYMENT_METHODS;
+
+const CreditCardPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.creditCard),
+  cardholderName: z.string(),
+  cardNumber: z.string(),
+  expiryDate: z
+    .string()
+    .regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "فرمت نامعتبر (MM/YY)")
+    .refine((value) => {
+      const [mm, yy] = value.split("/").map(Number);
+      const now = new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear() % 100;
+      if (yy < currentYear) return false;
+      if (yy === currentYear && mm < currentMonth) return false;
+      return true;
+    }, "کارت منقضی شده است"),
+  cvc: z.string(),
+});
+
+const PayPalPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.paypal),
+  payPalEmail: z.string(),
+});
+
+const BankTransferPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.onlineBankTransfer),
+  bankName: z.string(),
+  accountNumber: z.string(),
+});
+
+const PaymentSchema = z.discriminatedUnion("method", [
+  CreditCardPayment,
+  PayPalPayment,
+  BankTransferPayment,
+]);
+
+const checkoutFormSchema = z.object({
+  contactInfo: z.object({
+    email: z.string(),
+    subscribe: z.boolean().optional(),
+  }),
+  address: z.object({
+    country: z.string(),
+    firstName: z.string(),
+    lastName: z.string(),
+    address: z.string(),
+    postalCode: z.string(),
+    city: z.string(),
+    phone: z.string(),
+  }),
+  shippingMethod: z.string(),
+  payment: PaymentSchema,
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CheckoutFormType = z.infer<typeof checkoutFormSchema>;
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کفش اسپرت زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+    price: {
+      regular: 354.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      { label: "رنگ", value: "قرمز" },
+      { label: "سایز", value: "36" },
+    ],
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "سوئیشرت دو رنگ با لوگوی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      { label: "رنگ", value: "آبی و سفید" },
+      { label: "سایز", value: "L" },
+    ],
+  },
+  {
+    product_id: "product-4",
+    link: "#",
+    name: "کیف چرمی زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: {
+      regular: 245.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [{ label: "رنگ", value: "زرشکی" }],
+  },
+];
+
+interface Checkout2Props {
+  cartItems?: CartItem[];
+  className?: string;
+}
+
+const Checkout2 = ({ cartItems = CART_ITEMS, className }: Checkout2Props) => {
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: item.quantity,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm({
+    resolver: zodResolver(checkoutFormSchema),
+    defaultValues: {
+      payment: {
+        method: PAYMENT_METHODS.creditCard,
+      },
+      products: defaultProducts,
+    },
+  });
+
+  const onSubmit = (data: CheckoutFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-10">
+          <Logo url="#">
+            <LogoImage
+              src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+              alt="لوگو"
+              className="h-8"
+            />
+          </Logo>
+          <h1 className="mt-6 text-3xl font-bold tracking-tight md:text-xl">
+            تسویه حساب
+          </h1>
+          <p className="mt-2 text-muted-foreground">
+            اطلاعات زیر را تکمیل کنید تا سفارش شما در کوتاه‌ترین زمان پردازش و ارسال شود.
+                                </p>
+        </div>
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="grid grid-cols-1 gap-8 lg:grid-cols-5">
+              <div className="space-y-6 lg:col-span-3">
+                <Card className="shadow-none">
+                  <CardHeader>
+                    <CardTitle>اطلاعات تماس</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <ContactFields />
+                  </CardContent>
+                </Card>
+
+                <Card className="shadow-none">
+                  <CardHeader>
+                    <CardTitle>آدرس ارسال</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <AddressFields />
+                  </CardContent>
+                </Card>
+
+                <Card className="shadow-none">
+                  <CardHeader>
+                    <CardTitle>روش ارسال</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <ShippingMethodFields />
+                  </CardContent>
+                </Card>
+
+                <Card className="shadow-none">
+                  <CardHeader>
+                    <CardTitle>پرداخت</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <PaymentFields />
+                  </CardContent>
+                </Card>
+
+                <Button type="submit" size="lg" className="w-full">
+                  ثبت و پرداخت سفارش
+                                                  </Button>
+              </div>
+
+              <div className="lg:col-span-2">
+                <div className="sticky top-8">
+                  <Cart form={form} cartItems={cartItems} />
+                </div>
+              </div>
+            </div>
+          </form>
+        </FormProvider>
+      </div>
+    </section>
+  );
+};
+
+const ContactFields = () => {
+  const form = useFormContext();
+
+  return (
+    <FieldGroup className="gap-4">
+      <Controller
+        name="contactInfo.email"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-email"
+            >
+              ایمیل
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-email"
+              type="email"
+              dir="rtl"
+              placeholder="example@email.com"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <Controller
+        name="contactInfo.subscribe"
+        control={form.control}
+        render={({ field }) => (
+          <Field orientation="horizontal">
+            <Checkbox
+              id="checkout-subscribe"
+              name={field.name}
+              // @ts-ignore
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            />
+            <FieldLabel htmlFor="checkout-subscribe" className="font-normal">
+              مایلم از تخفیف‌ها و پیشنهادهای ویژه از طریق ایمیل مطلع شوم.
+                                </FieldLabel>
+          </Field>
+        )}
+      />
+    </FieldGroup>
+  );
+};
+
+const AddressFields = () => {
+  const form = useFormContext();
+
+  return (
+    <FieldGroup className="gap-4">
+      <Controller
+        name="address.country"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-country"
+            >
+              کشور
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-country"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <div className="grid gap-4 sm:grid-cols-2">
+        <Controller
+          name="address.firstName"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-firstName"
+              >
+                نام
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-firstName"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="address.lastName"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-lastName"
+              >
+                نام خانوادگی
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-lastName"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+      <Controller
+        name="address.address"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-address"
+            >
+              آدرس
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-address"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <div className="grid gap-4 sm:grid-cols-2">
+        <Controller
+          name="address.postalCode"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-postalCode"
+              >
+                کد پستی
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-postalCode"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="address.city"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-city"
+              >
+                شهر
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-city"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+      <Controller
+        name="address.phone"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-phone"
+            >
+              تلفن
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-phone"
+              type="tel"
+              dir="rtl"
+              placeholder="09123456789"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+    </FieldGroup>
+  );
+};
+
+const ShippingMethodFields = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="shippingMethod"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field>
+          <RadioGroup
+            name={field.name}
+            value={field.value}
+            onValueChange={field.onChange}
+            className="gap-3"
+          >
+            <FieldLabel htmlFor="checkout-shippingMethod-1">
+              <Field
+                orientation="horizontal"
+                data-invalid={fieldState.invalid}
+                className="rounded-lg border p-4"
+              >
+                <RadioGroupItem
+                  value="UPS"
+                  id="checkout-shippingMethod-1"
+                  aria-invalid={fieldState.invalid}
+                />
+                <FieldContent className="flex-1">
+                  <FieldTitle>ارسال سریع</FieldTitle>
+                  <FieldDescription>تحویل در اولین روز کاری</FieldDescription>
+                </FieldContent>
+                <p className="text-sm font-medium tabular-nums">
+                  {formatPrice(10, "IRR")}
+                </p>
+              </Field>
+            </FieldLabel>
+            <FieldLabel htmlFor="checkout-shippingMethod-2">
+              <Field
+                orientation="horizontal"
+                data-invalid={fieldState.invalid}
+                className="rounded-lg border p-4"
+              >
+                <RadioGroupItem
+                  value="FedEx"
+                  id="checkout-shippingMethod-2"
+                  aria-invalid={fieldState.invalid}
+                />
+                <FieldContent className="flex-1">
+                  <FieldTitle>ارسال استاندارد</FieldTitle>
+                  <FieldDescription>
+                    تحویل: ۳ تا ۵ روز کاری
+                  </FieldDescription>
+                </FieldContent>
+                <p className="text-sm font-medium tabular-nums">
+                  {formatPrice(2.99, "IRR")}
+                </p>
+              </Field>
+            </FieldLabel>
+          </RadioGroup>
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+const PaymentFields = () => {
+  const form = useFormContext();
+  const paymentMethod = form.watch("payment.method") as PaymentMethod;
+
+  return (
+    <div className="space-y-6">
+      <Controller
+        name="payment.method"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field>
+            <RadioGroup
+              name={field.name}
+              value={field.value}
+              onValueChange={field.onChange}
+              className="gap-3"
+            >
+              <FieldLabel htmlFor="checkout-payment-method-1">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                  className="rounded-lg border p-4"
+                >
+                  <RadioGroupItem
+                    value="creditCard"
+                    id="checkout-payment-method-1"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldContent className="flex-1">
+                    <FieldTitle>کارت بانکی</FieldTitle>
+                  </FieldContent>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                    alt="کارت بانکی"
+                    className="size-5"
+                  />
+                </Field>
+              </FieldLabel>
+              <FieldLabel htmlFor="checkout-payment-method-2">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                  className="rounded-lg border p-4"
+                >
+                  <RadioGroupItem
+                    value="paypal"
+                    id="checkout-payment-method-2"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldContent className="flex-1">
+                    <FieldTitle>کیف پول دیجیتال</FieldTitle>
+                  </FieldContent>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/paypal-icon.svg"
+                    alt="PayPal"
+                    className="size-5"
+                  />
+                </Field>
+              </FieldLabel>
+              <FieldLabel htmlFor="checkout-payment-method-3">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                  className="rounded-lg border p-4"
+                >
+                  <RadioGroupItem
+                    value="onlineBankTransfer"
+                    id="checkout-payment-method-3"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldContent className="flex-1">
+                    <FieldTitle>انتقال بانکی</FieldTitle>
+                  </FieldContent>
+                  <Building2 className="size-5 text-muted-foreground" />
+                </Field>
+              </FieldLabel>
+            </RadioGroup>
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <PaymentFieldsByMethod method={paymentMethod} />
+    </div>
+  );
+};
+
+const PaymentFieldsByMethod = ({ method }: { method: PaymentMethod }) => {
+  const form = useFormContext();
+
+  if (!method) return null;
+
+  switch (method) {
+    case PAYMENT_METHODS.creditCard:
+      return (
+        <div className="space-y-4">
+          <Controller
+            name="payment.cardholderName"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-cardholderName"
+                >
+                  نام دارنده کارت
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardholderName"
+                  placeholder="نام و نام خانوادگی"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <Controller
+            name="payment.cardNumber"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-cardNumber"
+                >
+                  شماره کارت
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardNumber"
+                  dir="rtl"
+                  placeholder="1234 5678 9012 3456"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <div className="grid gap-4 sm:grid-cols-2">
+            <DateInput />
+            <Controller
+              name="payment.cvc"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel
+                    className="text-sm font-normal"
+                    htmlFor="checkout-payment-cvc"
+                  >
+                    کد امنیتی (CVC)
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="checkout-payment-cvc"
+                    dir="rtl"
+                    placeholder="123"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </div>
+        </div>
+      );
+    case PAYMENT_METHODS.paypal:
+      return (
+        <Controller
+          name="payment.payPalEmail"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-payment-payPalEmail"
+              >
+                ایمیل کیف پول دیجیتال
+              </FieldLabel>
+              <Input
+                {...field}
+                type="email"
+                dir="rtl"
+                placeholder="example@email.com"
+                id="checkout-payment-payPalEmail"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      );
+    case PAYMENT_METHODS.onlineBankTransfer:
+      return (
+        <div className="space-y-4">
+          <Controller
+            name="payment.bankName"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-bankName"
+                >
+                  نام بانک
+                </FieldLabel>
+                <Input
+                  {...field}
+                  placeholder="نام بانک"
+                  id="checkout-payment-bankName"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <Controller
+            name="payment.accountNumber"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-accountNumber"
+                >
+                  شماره حساب
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-accountNumber"
+                  dir="rtl"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+const DateInput = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="payment.expiryDate"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field data-invalid={fieldState.invalid}>
+          <FieldLabel
+            className="text-sm font-normal"
+            htmlFor="checkout-payment-expiryDate"
+          >
+            تاریخ انقضا
+          </FieldLabel>
+          <Input
+            {...field}
+            onChange={(e) => {
+              let val = e.target.value;
+              val = val.replace(/[^0-9/]/g, "");
+              const prev = field.value ?? "";
+              const isDeleting = val.length < prev.length;
+              if (!isDeleting) {
+                if (val.length === 2 && !val.includes("/")) {
+                  val = val + "/";
+                }
+              }
+              if (val.length > 5) {
+                val = val.slice(0, 5);
+              }
+              field.onChange(val);
+            }}
+            pattern="^(0[1-9]|1[0-2])/[0-9]{2}$"
+            placeholder="MM/YY"
+            dir="rtl"
+            id="checkout-payment-expiryDate"
+            aria-invalid={fieldState.invalid}
+          />
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+const Cart = ({ cartItems, form }: CartProps) => {
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const formItems = form.watch("products");
+
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  return (
+    <Card className="shadow-none">
+      <CardHeader>
+        <CardTitle>خلاصه خرید</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <ul className="space-y-4">
+          {fields.map((field, index) => {
+            const cartItem = cartItems.find(
+              (p) => p.product_id === field.product_id,
+            );
+            if (!cartItem) return null;
+            return (
+              <li key={field.id}>
+                <CartItemComponent
+                  {...cartItem}
+                  onRemoveClick={() => handleRemove(index)()}
+                  onQuantityChange={(newQty: number) =>
+                    handleQuantityChange(index)(newQty)
+                  }
+                  index={index}
+                />
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className="space-y-3 border-t pt-4">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">جمع سفارش</span>
+            <span className="tabular-nums">
+              {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+            </span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">هزینه ارسال</span>
+            <span>پس از انتخاب روش ارسال محاسبه می‌شود</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">مالیات و عوارض</span>
+            <span className="tabular-nums">
+              {formatPrice(35.8, cartItems[0]?.price.currency)}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex justify-between border-t pt-4">
+          <span className="text-lg font-semibold">جمع کل</span>
+          <span className="text-lg font-semibold tabular-nums">
+            {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const CartItemComponent = ({
+  image,
+  name,
+  link,
+  details,
+  price,
+  index,
+  onQuantityChange,
+  onRemoveClick,
+}: CartItemProps) => {
+  const { regular, currency } = price;
+
+  return (
+    <div className="flex gap-4">
+      <div className="w-16 shrink-0">
+        <AspectRatio ratio={1} className="overflow-hidden rounded-md bg-muted">
+          <img src={image} alt={name} className="size-full object-cover" />
+        </AspectRatio>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex justify-between gap-2">
+          <div>
+            <a
+              href={link}
+              className="line-clamp-2 text-sm font-medium hover:underline"
+            >
+              {name}
+            </a>
+            <ProductDetails details={details} />
+          </div>
+          <span className="shrink-0 text-sm font-medium tabular-nums">
+            {formatPrice(regular, currency)}
+          </span>
+        </div>
+        <div className="mt-2 flex items-center justify-between gap-2">
+          <QuantityField index={index} onQuantityChange={onQuantityChange} />
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-8"
+            onClick={onRemoveClick}
+            aria-label={`حذف ${name} از سبد`}
+          >
+            <Trash className="size-4" />
+            <span className="sr-only">حذف از سبد</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ProductDetails = ({
+  details,
+}: {
+  details?: { label: string; value: string }[];
+}) => {
+  if (!details) return null;
+  return (
+    <p className="text-xs text-muted-foreground">
+      {details.map((item, index) => (
+        <span key={index}>
+          {item.value}
+          {index < details.length - 1 && " / "}
+        </span>
+      ))}
+    </p>
+  );
+};
+
+const QuantityField = ({
+  index,
+  onQuantityChange,
+}: {
+  index: number;
+  onQuantityChange: (n: number) => void;
+}) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={`products.${index}.quantity`}
+      control={control}
+      render={({ field }) => (
+        <Field className="w-auto">
+          <QuantityInput
+            inputProps={field}
+            onValueChange={(newQty) => {
+              field.onChange(newQty);
+              onQuantityChange(newQty);
+            }}
+            className="h-8 rounded-none"
+          />
+        </Field>
+      )}
+    />
+  );
+};
+
+export { Checkout2 };
diff --git a/blocks/checkout3.tsx b/blocks/checkout3.tsx
new file mode 100644
index 0000000..7373800
--- /dev/null
+++ b/blocks/checkout3.tsx
@@ -0,0 +1,1016 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronDown, Minus, Plus, ShoppingBag, Trash } from "lucide-react";
+import { useCallback, useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useFieldArray,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import z from "zod";
+
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  quantity: number;
+  details: {
+    label: string;
+    value: string;
+  }[];
+};
+
+interface CartItemProps extends CartItem {
+  index: number;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+interface CartProps {
+  cartItems: CartItem[];
+  form: UseFormReturn<CheckoutFormType>;
+}
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+const PAYMENT_METHODS = {
+  creditCard: "creditCard",
+  paypal: "paypal",
+  onlineBankTransfer: "onlineBankTransfer",
+};
+
+type PaymentMethod = keyof typeof PAYMENT_METHODS;
+
+const CreditCardPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.creditCard),
+  cardholderName: z.string(),
+  cardNumber: z.string(),
+  expiryDate: z
+    .string()
+    .regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "فرمت نامعتبر (MM/YY)")
+    .refine((value) => {
+      const [mm, yy] = value.split("/").map(Number);
+      const now = new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear() % 100;
+      if (yy < currentYear) return false;
+      if (yy === currentYear && mm < currentMonth) return false;
+      return true;
+    }, "کارت منقضی شده است"),
+  cvc: z.string(),
+});
+
+const PayPalPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.paypal),
+  payPalEmail: z.string(),
+});
+
+const BankTransferPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.onlineBankTransfer),
+  bankName: z.string(),
+  accountNumber: z.string(),
+});
+
+const PaymentSchema = z.discriminatedUnion("method", [
+  CreditCardPayment,
+  PayPalPayment,
+  BankTransferPayment,
+]);
+
+const checkoutFormSchema = z.object({
+  contactInfo: z.object({
+    email: z.string(),
+    subscribe: z.boolean().optional(),
+  }),
+  address: z.object({
+    country: z.string(),
+    firstName: z.string(),
+    lastName: z.string(),
+    address: z.string(),
+    postalCode: z.string(),
+    city: z.string(),
+    phone: z.string(),
+  }),
+  shippingMethod: z.string(),
+  payment: PaymentSchema,
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CheckoutFormType = z.infer<typeof checkoutFormSchema>;
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کفش اسپرت زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+    price: {
+      regular: 354.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      { label: "رنگ", value: "قرمز" },
+      { label: "سایز", value: "36" },
+    ],
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "سوئیشرت دو رنگ با لوگوی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      { label: "رنگ", value: "آبی و سفید" },
+      { label: "سایز", value: "L" },
+    ],
+  },
+  {
+    product_id: "product-4",
+    link: "#",
+    name: "کیف چرمی زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: {
+      regular: 245.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [{ label: "رنگ", value: "زرشکی" }],
+  },
+];
+
+interface Checkout3Props {
+  cartItems?: CartItem[];
+  className?: string;
+}
+
+const Checkout3 = ({ cartItems = CART_ITEMS, className }: Checkout3Props) => {
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: item.quantity,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm({
+    resolver: zodResolver(checkoutFormSchema),
+    defaultValues: {
+      payment: {
+        method: PAYMENT_METHODS.creditCard,
+      },
+      products: defaultProducts,
+    },
+  });
+
+  const onSubmit = (data: CheckoutFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16 md:py-32", className)}>
+      <div className="container max-w-lg">
+        <div className="mb-8 text-center">
+          <h1 className="text-xl font-bold tracking-tight md:text-3xl">
+            نهایی‌سازی خرید
+                                </h1>
+        </div>
+
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <CollapsibleCart form={form} cartItems={cartItems} />
+
+            <div className="space-y-6">
+              <section>
+                <h2 className="mb-4 text-lg font-semibold">اطلاعات تماس</h2>
+                <ContactFields />
+              </section>
+
+              <Separator />
+
+              <ShippingDeliveryAccordion />
+
+              <Separator />
+
+              <section>
+                <h2 className="mb-4 text-lg font-semibold">پرداخت نهایی</h2>
+                <PaymentFields />
+              </section>
+            </div>
+
+            <Button type="submit" size="lg" className="w-full text-base">
+              ثبت و پرداخت سفارش
+                                      </Button>
+          </form>
+        </FormProvider>
+      </div>
+    </section>
+  );
+};
+
+const ShippingDeliveryAccordion = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <section>
+      <Accordion
+        type="single"
+        collapsible
+        className="w-full"
+        value={isOpen ? "shipping-delivery" : undefined}
+        onValueChange={(value) => setIsOpen(value === "shipping-delivery")}
+      >
+        <AccordionItem value="shipping-delivery">
+          <AccordionTrigger className="py-0 text-lg font-semibold hover:no-underline [&>svg:last-child]:hidden [&[data-state=closed]>svg:nth-of-type(2)]:hidden [&[data-state=open]>svg:nth-of-type(1)]:hidden [&[data-state=open]>svg:nth-of-type(2)]:block">
+            ارسال و تحویل
+            <Plus className="pointer-events-none size-4 shrink-0 self-center text-muted-foreground" />
+            <Minus className="pointer-events-none hidden size-4 shrink-0 self-center text-muted-foreground" />
+          </AccordionTrigger>
+          <AccordionContent className="px-1 pb-4">
+            <div className="space-y-6">
+              <AddressFields />
+              <ShippingMethodFields />
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </section>
+  );
+};
+
+const CollapsibleCart = ({ cartItems, form }: CartProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const formItems = form.watch("products");
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+  const itemCount = formItems?.reduce((sum, p) => sum + p.quantity, 0) || 0;
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger asChild>
+        <Button
+          variant="outline"
+          className="h-auto w-full justify-between py-4"
+        >
+          <div className="flex items-center gap-3">
+            <ShoppingBag className="size-5" />
+            <span className="font-medium">
+              {itemCount.toLocaleString("fa-IR")} کالا
+                                      </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="font-semibold tabular-nums">
+              {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+            </span>
+            <ChevronDown
+              className={cn(
+                "size-4 transition-transform",
+                isOpen && "rotate-180",
+              )}
+            />
+          </div>
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="mt-4 space-y-4 rounded-lg border p-4">
+          <ul className="space-y-4">
+            {fields.map((field, index) => {
+              const cartItem = cartItems.find(
+                (p) => p.product_id === field.product_id,
+              );
+              if (!cartItem) return null;
+              return (
+                <li key={field.id}>
+                  <CartItemComponent
+                    {...cartItem}
+                    onRemoveClick={() => handleRemove(index)()}
+                    onQuantityChange={(newQty: number) =>
+                      handleQuantityChange(index)(newQty)
+                    }
+                    index={index}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+
+          <Separator />
+
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">جمع سفارش</span>
+              <span className="tabular-nums">
+                {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">هزینه ارسال</span>
+              <span>پس از انتخاب روش ارسال محاسبه می‌شود</span>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex justify-between font-medium">
+            <span>جمع کل</span>
+            <span className="tabular-nums">
+              {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+            </span>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+const CartItemComponent = ({
+  image,
+  name,
+  link,
+  details,
+  price,
+  index,
+  onQuantityChange,
+  onRemoveClick,
+}: CartItemProps) => {
+  const { regular, currency } = price;
+
+  return (
+    <div className="flex gap-4">
+      <div className="w-16 shrink-0">
+        <AspectRatio ratio={1} className="overflow-hidden rounded-md bg-muted">
+          <img src={image} alt={name} className="size-full object-cover" />
+        </AspectRatio>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex justify-between gap-2">
+          <div>
+            <a
+              href={link}
+              className="line-clamp-1 text-sm font-medium hover:underline"
+            >
+              {name}
+            </a>
+            <ProductDetails details={details} />
+          </div>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-7 shrink-0"
+            onClick={onRemoveClick}
+            aria-label={`حذف ${name} از سبد`}
+          >
+            <Trash className="size-3.5" />
+            <span className="sr-only">حذف از سبد</span>
+          </Button>
+        </div>
+        <div className="mt-2 flex items-center justify-between">
+          <QuantityField index={index} onQuantityChange={onQuantityChange} />
+          <span className="text-sm font-medium tabular-nums">
+            {formatPrice(regular, currency)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ProductDetails = ({
+  details,
+}: {
+  details?: { label: string; value: string }[];
+}) => {
+  if (!details) return null;
+  return (
+    <p className="text-xs text-muted-foreground">
+      {details.map((item, index) => (
+        <span key={index}>
+          {item.value}
+          {index < details.length - 1 && " / "}
+        </span>
+      ))}
+    </p>
+  );
+};
+
+const QuantityField = ({
+  index,
+  onQuantityChange,
+}: {
+  index: number;
+  onQuantityChange: (n: number) => void;
+}) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={`products.${index}.quantity`}
+      control={control}
+      render={({ field }) => (
+        <Field className="w-30">
+          <QuantityInput
+            inputProps={field}
+            onValueChange={(newQty) => {
+              field.onChange(newQty);
+              onQuantityChange(newQty);
+            }}
+            className="h-8 rounded-none"
+          />
+        </Field>
+      )}
+    />
+  );
+};
+
+const ContactFields = () => {
+  const form = useFormContext();
+
+  return (
+    <FieldGroup className="gap-4">
+      <Controller
+        name="contactInfo.email"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-email"
+            >
+              ایمیل
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-email"
+              type="email"
+              dir="rtl"
+              placeholder="example@email.com"
+              className="h-12"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <Controller
+        name="contactInfo.subscribe"
+        control={form.control}
+        render={({ field }) => (
+          <Field orientation="horizontal">
+            <Checkbox
+              id="checkout-subscribe"
+              name={field.name}
+              // @ts-ignore
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            />
+            <FieldLabel
+              htmlFor="checkout-subscribe"
+              className="text-sm font-normal"
+            >
+              دریافت اخبار و پیشنهادها از طریق ایمیل
+            </FieldLabel>
+          </Field>
+        )}
+      />
+    </FieldGroup>
+  );
+};
+
+const AddressFields = () => {
+  const form = useFormContext();
+
+  return (
+    <FieldGroup className="gap-4">
+      <Controller
+        name="address.country"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-country"
+            >
+              کشور
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-country"
+              className="h-12"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <div className="grid grid-cols-2 gap-4">
+        <Controller
+          name="address.firstName"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-firstName"
+              >
+                نام
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-firstName"
+                className="h-12"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="address.lastName"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-lastName"
+              >
+                نام خانوادگی
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-lastName"
+                className="h-12"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+      <Controller
+        name="address.address"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-address"
+            >
+              آدرس
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-address"
+              className="h-12"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <div className="grid grid-cols-2 gap-4">
+        <Controller
+          name="address.postalCode"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-postalCode"
+              >
+                کد پستی
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-postalCode"
+                dir="rtl"
+                className="h-12"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="address.city"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-city"
+              >
+                شهر
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-city"
+                className="h-12"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+      <Controller
+        name="address.phone"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-phone"
+            >
+              تلفن
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-phone"
+              type="tel"
+              dir="rtl"
+              placeholder="09123456789"
+              className="h-12"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+    </FieldGroup>
+  );
+};
+
+const ShippingMethodFields = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="shippingMethod"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field>
+          <RadioGroup
+            name={field.name}
+            value={field.value}
+            onValueChange={field.onChange}
+            className="gap-3"
+          >
+            <FieldLabel htmlFor="checkout-shippingMethod-1">
+              <Field
+                orientation="horizontal"
+                data-invalid={fieldState.invalid}
+                className="rounded-lg border p-4"
+              >
+                <RadioGroupItem
+                  value="UPS"
+                  id="checkout-shippingMethod-1"
+                  aria-invalid={fieldState.invalid}
+                />
+                <FieldContent className="flex-1">
+                  <FieldTitle>ارسال سریع</FieldTitle>
+                  <FieldDescription>تحویل در اولین روز کاری</FieldDescription>
+                </FieldContent>
+                <p className="text-sm font-medium tabular-nums">
+                  {formatPrice(10, "IRR")}
+                </p>
+              </Field>
+            </FieldLabel>
+            <FieldLabel htmlFor="checkout-shippingMethod-2">
+              <Field
+                orientation="horizontal"
+                data-invalid={fieldState.invalid}
+                className="rounded-lg border p-4"
+              >
+                <RadioGroupItem
+                  value="Standard"
+                  id="checkout-shippingMethod-2"
+                  aria-invalid={fieldState.invalid}
+                />
+                <FieldContent className="flex-1">
+                  <FieldTitle>ارسال عادی</FieldTitle>
+                  <FieldDescription>تحویل طی ۳ تا ۵ روز کاری</FieldDescription>
+                </FieldContent>
+                <p className="text-sm font-medium text-green-600">بدون هزینه</p>
+              </Field>
+            </FieldLabel>
+          </RadioGroup>
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+const PaymentFields = () => {
+  const form = useFormContext();
+  const paymentMethod = form.watch("payment.method") as PaymentMethod;
+
+  return (
+    <div className="space-y-6">
+      <Controller
+        name="payment.method"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field>
+            <RadioGroup
+              name={field.name}
+              value={field.value}
+              onValueChange={field.onChange}
+              className="gap-3"
+            >
+              <FieldLabel htmlFor="checkout-payment-method-1">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                  className="rounded-lg border p-4"
+                >
+                  <RadioGroupItem
+                    value="creditCard"
+                    id="checkout-payment-method-1"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldContent className="flex-1">
+                    <FieldTitle>کارت بانکی</FieldTitle>
+                  </FieldContent>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                    alt="کارت بانکی"
+                    className="size-5"
+                  />
+                </Field>
+              </FieldLabel>
+              <FieldLabel htmlFor="checkout-payment-method-2">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                  className="rounded-lg border p-4"
+                >
+                  <RadioGroupItem
+                    value="paypal"
+                    id="checkout-payment-method-2"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldContent className="flex-1">
+                    <FieldTitle>کیف پول دیجیتال</FieldTitle>
+                  </FieldContent>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/paypal-icon.svg"
+                    alt="PayPal"
+                    className="size-5"
+                  />
+                </Field>
+              </FieldLabel>
+            </RadioGroup>
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <PaymentFieldsByMethod method={paymentMethod} />
+    </div>
+  );
+};
+
+const PaymentFieldsByMethod = ({ method }: { method: PaymentMethod }) => {
+  const form = useFormContext();
+
+  if (!method) return null;
+
+  switch (method) {
+    case PAYMENT_METHODS.creditCard:
+      return (
+        <div className="space-y-4">
+          <Controller
+            name="payment.cardholderName"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-cardholderName"
+                >
+                  نام دارنده کارت
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardholderName"
+                  placeholder="نام و نام خانوادگی"
+                  className="h-12"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <Controller
+            name="payment.cardNumber"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-cardNumber"
+                >
+                  شماره کارت
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardNumber"
+                  dir="rtl"
+                  className="h-12"
+                  placeholder="1234 5678 9012 3456"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <div className="grid grid-cols-2 gap-4">
+            <DateInput />
+            <Controller
+              name="payment.cvc"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel
+                    className="text-sm font-normal"
+                    htmlFor="checkout-payment-cvc"
+                  >
+                    کد امنیتی (CVC)
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="checkout-payment-cvc"
+                    dir="rtl"
+                    className="h-12"
+                    placeholder="123"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </div>
+        </div>
+      );
+    case PAYMENT_METHODS.paypal:
+      return (
+        <Controller
+          name="payment.payPalEmail"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-payment-payPalEmail"
+              >
+                ایمیل کیف پول دیجیتال
+              </FieldLabel>
+              <Input
+                {...field}
+                type="email"
+                dir="rtl"
+                className="h-12"
+                placeholder="example@email.com"
+                id="checkout-payment-payPalEmail"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+const DateInput = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="payment.expiryDate"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field data-invalid={fieldState.invalid}>
+          <FieldLabel
+            className="text-sm font-normal"
+            htmlFor="checkout-payment-expiryDate"
+          >
+            تاریخ انقضا
+          </FieldLabel>
+          <Input
+            {...field}
+            className="h-12"
+            onChange={(e) => {
+              let val = e.target.value;
+              val = val.replace(/[^0-9/]/g, "");
+              const prev = field.value ?? "";
+              const isDeleting = val.length < prev.length;
+              if (!isDeleting) {
+                if (val.length === 2 && !val.includes("/")) {
+                  val = val + "/";
+                }
+              }
+              if (val.length > 5) {
+                val = val.slice(0, 5);
+              }
+              field.onChange(val);
+            }}
+            pattern="^(0[1-9]|1[0-2])/[0-9]{2}$"
+            placeholder="MM/YY"
+            dir="rtl"
+            id="checkout-payment-expiryDate"
+            aria-invalid={fieldState.invalid}
+          />
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+export { Checkout3 };
diff --git a/blocks/checkout4.tsx b/blocks/checkout4.tsx
new file mode 100644
index 0000000..f145693
--- /dev/null
+++ b/blocks/checkout4.tsx
@@ -0,0 +1,640 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Trash } from "lucide-react";
+import { useCallback } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useFieldArray,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import z from "zod";
+
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  quantity: number;
+  details: {
+    label: string;
+    value: string;
+  }[];
+};
+
+interface CartItemProps extends CartItem {
+  index: number;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+interface CartProps {
+  cartItems: CartItem[];
+  form: UseFormReturn<CheckoutFormType>;
+}
+
+interface Checkout4Props {
+  cartItems: CartItem[];
+  className?: string;
+}
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+const PAYMENT_METHODS = {
+  creditCard: "creditCard",
+  paypal: "paypal",
+  onlineBankTransfer: "onlineBankTransfer",
+};
+
+type PaymentMethod = keyof typeof PAYMENT_METHODS;
+
+const CreditCardPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.creditCard),
+  cardholderName: z.string(),
+  cardNumber: z.string(),
+  expiryDate: z
+    .string()
+    .regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "فرمت نامعتبر (MM/YY)")
+    .refine((value) => {
+      const [mm, yy] = value.split("/").map(Number);
+      const now = new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear() % 100;
+      if (yy < currentYear) return false;
+      if (yy === currentYear && mm < currentMonth) return false;
+      return true;
+    }, "کارت منقضی شده است"),
+  cvc: z.string(),
+});
+
+const PayPalPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.paypal),
+  payPalEmail: z.string(),
+});
+
+const BankTransferPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.onlineBankTransfer),
+  bankName: z.string(),
+  accountNumber: z.string(),
+});
+
+const PaymentSchema = z.discriminatedUnion("method", [
+  CreditCardPayment,
+  PayPalPayment,
+  BankTransferPayment,
+]);
+
+const checkoutFormSchema = z.object({
+  email: z.string().email("ایمیل نامعتبر است"),
+  payment: PaymentSchema,
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CheckoutFormType = z.infer<typeof checkoutFormSchema>;
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کفش اسپرت زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+    price: {
+      regular: 354.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      { label: "رنگ", value: "قرمز" },
+      { label: "سایز", value: "36" },
+    ],
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "سوئیشرت دو رنگ با لوگوی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [
+      { label: "رنگ", value: "آبی و سفید" },
+      { label: "سایز", value: "L" },
+    ],
+  },
+  {
+    product_id: "product-4",
+    link: "#",
+    name: "کیف چرمی زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: {
+      regular: 245.0,
+      currency: "IRR",
+    },
+    quantity: 1,
+    details: [{ label: "رنگ", value: "زرشکی" }],
+  },
+];
+
+const Checkout4 = ({ cartItems = CART_ITEMS, className }: Checkout4Props) => {
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: item.quantity,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm({
+    resolver: zodResolver(checkoutFormSchema),
+    defaultValues: {
+      payment: {
+        method: PAYMENT_METHODS.creditCard,
+      },
+      products: defaultProducts,
+    },
+  });
+
+  const onSubmit = (data: CheckoutFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("min-h-screen", className)}>
+      <FormProvider {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="grid min-h-screen lg:grid-cols-2">
+            <div className="order-2 flex items-center bg-muted/30 lg:order-1">
+              <div className="mx-auto w-full max-w-xl p-8 lg:p-12 xl:p-16">
+                <h2 className="mb-8 text-xl font-semibold">خلاصه سفارش</h2>
+                <Cart form={form} cartItems={cartItems} />
+              </div>
+            </div>
+
+            <div className="order-1 flex items-center lg:order-2">
+              <div className="mx-auto w-full max-w-xl p-8 lg:p-12 xl:p-16">
+                <div className="mb-10">
+                  <h1 className="text-3xl font-bold tracking-tight">
+                    پرداخت با کارت بانکی
+                                                        </h1>
+                </div>
+
+                <div className="space-y-6">
+                  <section>
+                    <ContactFields />
+                  </section>
+
+                  <section>
+                    <PaymentFields />
+                  </section>
+
+                  <Button type="submit" size="lg" className="w-full text-base">
+                    پرداخت نهایی
+                                                        </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </FormProvider>
+    </section>
+  );
+};
+
+const Cart = ({ cartItems, form }: CartProps) => {
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const formItems = form.watch("products");
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  return (
+    <div className="space-y-8">
+      <ul className="space-y-6">
+        {fields.map((field, index) => {
+          const cartItem = cartItems.find(
+            (p) => p.product_id === field.product_id,
+          );
+          if (!cartItem) return null;
+          return (
+            <li key={field.id}>
+              <CartItemComponent
+                {...cartItem}
+                onRemoveClick={() => handleRemove(index)()}
+                onQuantityChange={(newQty: number) =>
+                  handleQuantityChange(index)(newQty)
+                }
+                index={index}
+              />
+            </li>
+          );
+        })}
+      </ul>
+
+      <Separator />
+
+      <div className="space-y-3">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">جمع سفارش</span>
+          <span className="tabular-nums">
+            {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+          </span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">هزینه ارسال</span>
+          <span>در مرحله بعد محاسبه می‌شود</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">مالیات تقریبی</span>
+          <span className="tabular-nums">
+            {formatPrice(35.8, cartItems[0]?.price.currency)}
+          </span>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="flex justify-between">
+        <span className="text-xl font-semibold">جمع کل</span>
+        <span className="text-xl font-semibold tabular-nums">
+          {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+const CartItemComponent = ({
+  image,
+  name,
+  link,
+  details,
+  price,
+  index,
+  onQuantityChange,
+  onRemoveClick,
+}: CartItemProps) => {
+  const { regular, currency } = price;
+
+  return (
+    <div className="flex gap-5">
+      <div className="w-24 shrink-0">
+        <AspectRatio
+          ratio={1}
+          className="overflow-hidden rounded-xl bg-background"
+        >
+          <img src={image} alt={name} className="size-full object-cover" />
+        </AspectRatio>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex justify-between gap-3">
+          <div>
+            <a href={link} className="line-clamp-2 font-medium hover:underline">
+              {name}
+            </a>
+            <ProductDetails details={details} />
+          </div>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-8 shrink-0"
+            onClick={onRemoveClick}
+            aria-label={`حذف ${name} از سبد`}
+          >
+            <Trash className="size-4" />
+            <span className="sr-only">حذف از سبد</span>
+          </Button>
+        </div>
+        <div className="mt-3 flex items-center justify-between">
+          <QuantityField index={index} onQuantityChange={onQuantityChange} />
+          <span className="text-lg font-semibold tabular-nums">
+            {formatPrice(regular, currency)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ProductDetails = ({
+  details,
+}: {
+  details?: { label: string; value: string }[];
+}) => {
+  if (!details) return null;
+  return (
+    <p className="mt-1 text-sm text-muted-foreground">
+      {details.map((item, index) => (
+        <span key={index}>
+          {item.label}: {item.value}
+          {index < details.length - 1 && " · "}
+        </span>
+      ))}
+    </p>
+  );
+};
+
+const QuantityField = ({
+  index,
+  onQuantityChange,
+}: {
+  index: number;
+  onQuantityChange: (n: number) => void;
+}) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={`products.${index}.quantity`}
+      control={control}
+      render={({ field }) => (
+        <Field className="w-28">
+          <QuantityInput
+            inputProps={field}
+            onValueChange={(newQty) => {
+              field.onChange(newQty);
+              onQuantityChange(newQty);
+            }}
+            className="rounded-none"
+          />
+        </Field>
+      )}
+    />
+  );
+};
+
+const ContactFields = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="email"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field data-invalid={fieldState.invalid}>
+          <FieldLabel className="text-sm font-medium" htmlFor="checkout-email">
+            ایمیل
+          </FieldLabel>
+          <Input
+            {...field}
+            id="checkout-email"
+            type="email"
+            dir="rtl"
+            placeholder="example@email.com"
+            aria-invalid={fieldState.invalid}
+          />
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+const PaymentFields = () => {
+  const form = useFormContext();
+  const paymentMethod = form.watch("payment.method") as PaymentMethod;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="mb-2 text-sm font-medium">روش پرداخت</h2>
+        <PaymentFieldsByMethod method={paymentMethod} />
+      </div>
+    </div>
+  );
+};
+
+const PaymentFieldsByMethod = ({ method }: { method: PaymentMethod }) => {
+  const form = useFormContext();
+
+  // Default to credit card if no method selected
+  const paymentMethod = method || PAYMENT_METHODS.creditCard;
+
+  switch (paymentMethod) {
+    case PAYMENT_METHODS.creditCard:
+      return (
+        <div className="space-y-5">
+          <Controller
+            name="payment.cardNumber"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <FieldLabel
+                    className="text-sm font-medium text-muted-foreground"
+                    htmlFor="checkout-payment-cardNumber"
+                  >
+                    اطلاعات کارت
+                  </FieldLabel>
+                  <div className="pointer-events-none flex items-center gap-1.5">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                      alt="Visa"
+                      className="size-5 shrink-0"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/mastercard-logo.svg"
+                      alt="Mastercard"
+                      className="size-5 shrink-0"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/american-express-icon.svg"
+                      alt="کارت ویژه"
+                      className="size-5 shrink-0"
+                    />
+                  </div>
+                </div>
+                <Field
+                  data-invalid={fieldState.invalid}
+                  className="relative w-full"
+                >
+                  <Input
+                    {...field}
+                    id="checkout-payment-cardNumber"
+                    dir="rtl"
+                    placeholder="1234 1234 1234 1234"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              </div>
+            )}
+          />
+          <div className="grid gap-5 sm:grid-cols-2">
+            <DateInput />
+            <Controller
+              name="payment.cvc"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <Input
+                    {...field}
+                    id="checkout-payment-cvc"
+                    dir="rtl"
+                    placeholder="CVC"
+                    aria-label="کد امنیتی (CVC)"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </div>
+          <Controller
+            name="payment.cardholderName"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-medium"
+                  htmlFor="checkout-payment-cardholderName"
+                >
+                  نام دارنده کارت
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardholderName"
+                  placeholder="نام و نام خانوادگی روی کارت"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+        </div>
+      );
+    case PAYMENT_METHODS.paypal:
+      return (
+        <div>
+          <Controller
+            name="payment.payPalEmail"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-medium"
+                  htmlFor="checkout-payment-payPalEmail"
+                >
+                  ایمیل کیف پول دیجیتال
+                </FieldLabel>
+                <Input
+                  {...field}
+                  type="email"
+                  dir="rtl"
+                  placeholder="example@email.com"
+                  id="checkout-payment-payPalEmail"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+const DateInput = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="payment.expiryDate"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field data-invalid={fieldState.invalid}>
+          <FieldLabel
+            className="sr-only"
+            htmlFor="checkout-payment-expiryDate"
+          >
+            تاریخ انقضا
+          </FieldLabel>
+          <Input
+            {...field}
+            onChange={(e) => {
+              let val = e.target.value;
+              val = val.replace(/[^0-9/]/g, "");
+              const prev = field.value ?? "";
+              const isDeleting = val.length < prev.length;
+              if (!isDeleting) {
+                if (val.length === 2 && !val.includes("/")) {
+                  val = val + "/";
+                }
+              }
+              if (val.length > 5) {
+                val = val.slice(0, 5);
+              }
+              field.onChange(val);
+            }}
+            pattern="^(0[1-9]|1[0-2])/[0-9]{2}$"
+            placeholder="MM/YY"
+            dir="rtl"
+            id="checkout-payment-expiryDate"
+            aria-invalid={fieldState.invalid}
+          />
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+export { Checkout4 };
diff --git a/blocks/checkout5.tsx b/blocks/checkout5.tsx
new file mode 100644
index 0000000..982d18c
--- /dev/null
+++ b/blocks/checkout5.tsx
@@ -0,0 +1,500 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, Lock } from "lucide-react";
+import React from "react";
+import {
+  Controller,
+  FormProvider,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import z from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  price: number;
+}
+
+interface OrderSummary {
+  companyName: string;
+  items: OrderItem[];
+  currency: string;
+}
+
+interface Checkout5Props {
+  order: OrderSummary;
+  className?: string;
+}
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+const checkoutFormSchema = z.object({
+  email: z.string().email("ایمیل نامعتبر است"),
+  cardNumber: z.string().min(1, "شماره کارت الزامی است"),
+  expiryDate: z
+    .string()
+    .regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "فرمت نامعتبر (MM/YY)")
+    .refine((value) => {
+      const [mm, yy] = value.split("/").map(Number);
+      const now = new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear() % 100;
+      if (yy < currentYear) return false;
+      if (yy === currentYear && mm < currentMonth) return false;
+      return true;
+    }, "کارت منقضی شده است"),
+  cvc: z.string().min(3, "کد امنیتی الزامی است"),
+  cardholderName: z.string().min(1, "نام روی کارت الزامی است"),
+  country: z.string().min(1, "انتخاب کشور الزامی است"),
+  promoCode: z.string().optional(),
+});
+
+type CheckoutFormType = z.infer<typeof checkoutFormSchema>;
+
+const COUNTRIES = [
+  { value: "AU", label: "استرالیا" },
+  { value: "US", label: "ایالات متحده" },
+  { value: "GB", label: "بریتانیا" },
+  { value: "CA", label: "کانادا" },
+  { value: "DE", label: "آلمان" },
+  { value: "FR", label: "فرانسه" },
+  { value: "JP", label: "ژاپن" },
+  { value: "NZ", label: "نیوزیلند" },
+  { value: "SG", label: "سنگاپور" },
+];
+
+const DEFAULT_ORDER: OrderSummary = {
+  companyName: "ShadcnBlocks",
+  items: [
+    {
+      id: "pro-subscription",
+      name: "اشتراک حرفه‌ای (سالانه)",
+      price: 199.0,
+    },
+  ],
+  currency: "IRR",
+};
+
+const Checkout5 = ({ order = DEFAULT_ORDER, className }: Checkout5Props) => {
+  const form = useForm<CheckoutFormType>({
+    resolver: zodResolver(checkoutFormSchema),
+    defaultValues: {
+      email: "",
+      cardNumber: "",
+      expiryDate: "",
+      cvc: "",
+      cardholderName: "",
+      country: "US",
+      promoCode: "",
+    },
+  });
+
+  const onSubmit = (data: CheckoutFormType) => {
+    console.log("Form submitted:", data);
+  };
+
+  const subtotal = order.items.reduce((sum, item) => sum + item.price, 0);
+  const total = subtotal;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("min-h-screen bg-background", className)}
+    >
+      <FormProvider {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="grid min-h-screen lg:grid-cols-2">
+            <div className="border-e border-border bg-muted/20 p-8 pt-32 lg:p-12 lg:pt-40 xl:p-16 xl:pt-48">
+              <div className="mx-auto w-full max-w-md">
+                <div className="mb-8 flex items-center gap-3">
+                  <button
+                    type="button"
+                    className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                    aria-label="بازگشت"
+                  >
+                    <ArrowLeft className="size-4 rtl:rotate-180" />
+                  </button>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                    alt={order.companyName}
+                    className="size-8"
+                  />
+                </div>
+
+                {/* Company and Total */}
+                <div className="mb-8">
+                  <p className="text-muted-foreground">{order.companyName}</p>
+                  <p className="text-xl font-semibold tracking-tight tabular-nums">
+                    {formatPrice(total, order.currency)}
+                  </p>
+                </div>
+
+                {/* Order Items */}
+                <div className="space-y-4">
+                  {order.items.map((item) => (
+                    <div
+                      key={item.id}
+                      className="flex items-center justify-between"
+                    >
+                      <span className="text-sm text-foreground">
+                        {item.name}
+                      </span>
+                      <span className="text-sm tabular-nums text-foreground">
+                        {formatPrice(item.price, order.currency)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+
+                <Separator className="my-4" />
+
+                {/* Subtotal */}
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-foreground">جمع سفارش</span>
+                  <span className="text-sm tabular-nums text-foreground">
+                    {formatPrice(subtotal, order.currency)}
+                  </span>
+                </div>
+
+                {/* Promo Code Button */}
+                <div className="mt-4">
+                  <PromoCodeField />
+                </div>
+
+                <Separator className="my-4" />
+
+                {/* Total */}
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium text-foreground">
+                    جمع کل
+                  </span>
+                  <span className="text-sm font-medium tabular-nums text-foreground">
+                    {formatPrice(total, order.currency)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-8 pt-32 lg:p-12 lg:pt-40 xl:p-16 xl:pt-48">
+              <div className="mx-auto w-full max-w-md">
+                <Button
+                  type="button"
+                  className="h-auto w-full bg-foreground py-1 text-background hover:bg-foreground/90"
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/apple-pay-white.svg"
+                    alt="پرداخت موبایلی"
+                    className="h-12"
+                  />
+                </Button>
+
+                <div className="my-6 flex items-center gap-4">
+                  <Separator className="flex-1" />
+                  <span className="text-sm text-muted-foreground">
+                    یا با کارت بانکی پرداخت کنید
+                                                        </span>
+                  <Separator className="flex-1" />
+                </div>
+
+                <div className="space-y-6">
+                  <EmailField />
+
+                  <div>
+                    <h2 className="mb-4 text-sm font-medium">جزئیات کارت</h2>
+                    <PaymentFields />
+                  </div>
+
+                  <CountryField />
+
+                  <Button
+                    type="submit"
+                    size="lg"
+                    className="h-12 w-full bg-blue-600 text-base text-white hover:bg-blue-700"
+                  >
+                    پرداخت و ثبت سفارش
+                                                        </Button>
+
+                  <p className="text-center text-xs text-muted-foreground">
+                    با ثبت سفارش، شرایط استفاده و سیاست حفظ حریم خصوصی را می‌پذیرید. اطلاعات پرداخت شما با استانداردهای امنیتی محافظت و رمزنگاری می‌شود.
+                                                        </p>
+
+                  <div className="flex items-center justify-center gap-4 pt-4 text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <Lock className="size-3" />
+                      پرداخت امن
+                                                              </span>
+                    <Separator orientation="vertical" className="h-4" />
+                    <a
+                      href="#"
+                      className="hover:text-foreground hover:underline"
+                    >
+                      شرایط استفاده
+                                                              </a>
+                    <a
+                      href="#"
+                      className="hover:text-foreground hover:underline"
+                    >
+                      حریم خصوصی
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </FormProvider>
+    </section>
+  );
+};
+
+const PromoCodeField = () => {
+  const form = useFormContext<CheckoutFormType>();
+  const [showInput, setShowInput] = React.useState(false);
+
+  if (!showInput) {
+    return (
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="h-9 text-sm"
+        onClick={() => setShowInput(true)}
+      >
+        افزودن کد تخفیف
+      </Button>
+    );
+  }
+
+  return (
+    <Controller
+      name="promoCode"
+      control={form.control}
+      render={({ field }) => (
+        <div className="flex gap-2">
+          <Input
+            {...field}
+            dir="rtl"
+            placeholder="کد تخفیف"
+            className="h-9 flex-1 text-sm"
+          />
+          <Button type="button" variant="outline" size="sm" className="h-9">
+            اعمال
+          </Button>
+        </div>
+      )}
+    />
+  );
+};
+
+const EmailField = () => {
+  const form = useFormContext<CheckoutFormType>();
+
+  return (
+    <Controller
+      name="email"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field data-invalid={fieldState.invalid}>
+          <FieldLabel className="text-sm font-medium" htmlFor="checkout-email">
+            ایمیل
+                            </FieldLabel>
+          <Input
+            {...field}
+            id="checkout-email"
+            type="email"
+            dir="rtl"
+            placeholder="example@email.com"
+            aria-invalid={fieldState.invalid}
+          />
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+const PaymentFields = () => {
+  const form = useFormContext<CheckoutFormType>();
+
+  return (
+    <div className="space-y-4">
+      {/* Card Number */}
+      <Controller
+        name="cardNumber"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <FieldLabel
+                className="text-sm text-muted-foreground"
+                htmlFor="checkout-card-number"
+              >
+                شماره کارت
+              </FieldLabel>
+              <div className="flex items-center gap-1">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                  alt="Visa"
+                  className="h-5 w-auto"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/mastercard-logo.svg"
+                  alt="Mastercard"
+                  className="h-5 w-auto"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/american-express-icon.svg"
+                  alt="کارت ویژه"
+                  className="h-5 w-auto"
+                />
+              </div>
+            </div>
+            <Field data-invalid={fieldState.invalid}>
+              <Input
+                {...field}
+                id="checkout-card-number"
+                dir="rtl"
+                placeholder="1234 1234 1234 1234"
+                aria-invalid={fieldState.invalid}
+                className="rounded-b-none border-b-0"
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          </div>
+        )}
+      />
+
+      {/* Expiry and CVC Row */}
+      <div className="-mt-4 grid grid-cols-2">
+        <Controller
+          name="expiryDate"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <Input
+                {...field}
+                onChange={(e) => {
+                  let val = e.target.value;
+                  val = val.replace(/[^0-9/]/g, "");
+                  const prev = field.value ?? "";
+                  const isDeleting = val.length < prev.length;
+                  if (!isDeleting) {
+                    if (val.length === 2 && !val.includes("/")) {
+                      val = val + "/";
+                    }
+                  }
+                  if (val.length > 5) {
+                    val = val.slice(0, 5);
+                  }
+                  field.onChange(val);
+                }}
+                placeholder="MM/YY"
+                dir="rtl"
+                className="rounded-none rounded-bl-md border-r-0"
+                aria-label="تاریخ انقضا"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="cvc"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <Input
+                {...field}
+                dir="rtl"
+                placeholder="CVC"
+                aria-label="کد امنیتی (CVC)"
+                className="rounded-none rounded-br-md"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+
+      {/* Cardholder Name */}
+      <Controller
+        name="cardholderName"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-medium"
+              htmlFor="checkout-cardholder-name"
+            >
+              نام دارنده کارت
+                                </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-cardholder-name"
+              placeholder="نام و نام خانوادگی"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+    </div>
+  );
+};
+
+const CountryField = () => {
+  const form = useFormContext<CheckoutFormType>();
+
+  return (
+    <Controller
+      name="country"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field data-invalid={fieldState.invalid}>
+          <FieldLabel
+            className="text-sm font-medium"
+            htmlFor="checkout-country"
+          >
+            کشور صورتحساب
+          </FieldLabel>
+          <Select value={field.value} onValueChange={field.onChange}>
+            <SelectTrigger id="checkout-country" className="w-full">
+              <SelectValue placeholder="کشور را انتخاب کنید" />
+            </SelectTrigger>
+            <SelectContent>
+              {COUNTRIES.map((country) => (
+                <SelectItem key={country.value} value={country.value}>
+                  {country.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+export { Checkout5 };
diff --git a/blocks/checkout8.tsx b/blocks/checkout8.tsx
new file mode 100644
index 0000000..497b0cd
--- /dev/null
+++ b/blocks/checkout8.tsx
@@ -0,0 +1,1092 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import type { SubmitHandler, UseFormReturn } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useFieldArray,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import z from "zod";
+
+import type { PriceType } from "@/components/shadcnblocks/price";
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: PriceType;
+  details: {
+    label: string;
+    value: string;
+  }[];
+};
+
+const PAYMENT_METHODS = {
+  creditCard: "creditCard",
+  paypal: "paypal",
+  onlineBankTransfer: "onlineBankTransfer",
+};
+
+type PaymentMethod = keyof typeof PAYMENT_METHODS;
+
+const CreditCardPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.creditCard),
+  cardholderName: z.string(),
+  cardNumber: z.string(),
+  expiryDate: z
+    .string()
+    .regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "فرمت نامعتبر (MM/YY)")
+    .refine((value) => {
+      const [mm, yy] = value.split("/").map(Number);
+
+      const now = new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear() % 100;
+
+      if (yy < currentYear) return false;
+
+      if (yy === currentYear && mm < currentMonth) return false;
+
+      return true;
+    }, "کارت منقضی شده است"),
+  cvc: z.string(),
+});
+
+const PayPalPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.paypal),
+  payPalEmail: z.string(),
+});
+
+const BankTransferPayment = z.object({
+  method: z.literal(PAYMENT_METHODS.onlineBankTransfer),
+  bankName: z.string(),
+  accountNumber: z.string(),
+});
+
+const PaymentSchema = z.discriminatedUnion("method", [
+  CreditCardPayment,
+  PayPalPayment,
+  BankTransferPayment,
+]);
+
+const checkoutFormSchema = z.object({
+  contactInfo: z.object({
+    email: z.string(),
+    subscribe: z.boolean().optional(),
+  }),
+  address: z.object({
+    country: z.string(),
+    firstName: z.string(),
+    lastName: z.string(),
+    address: z.string(),
+    postalCode: z.string(),
+    city: z.string(),
+    phone: z.string(),
+  }),
+  payment: PaymentSchema,
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CheckoutFormType = z.infer<typeof checkoutFormSchema>;
+
+type CartItemProps = CartItem;
+
+type CartType = {
+  items: CartItem[];
+  shippingCost: {
+    price: number;
+    currency: string;
+  };
+  discount: {
+    price: number;
+    currency: string;
+  };
+};
+
+interface CartProps {
+  cartData: CartType;
+  form: UseFormReturn<CheckoutFormType>;
+}
+
+interface Checkout8Props {
+  cart: CartType;
+  className?: string;
+}
+
+interface CheckoutFormProps {
+  onSubmit: SubmitHandler<CheckoutFormType>;
+}
+
+const CART = {
+  items: [
+    {
+      product_id: "product-1",
+      link: "#",
+      name: "کفش اسپرت زرشکی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+      price: {
+        regular: 354000.0,
+        currency: "ریال",
+      },
+      details: [
+        {
+          label: "رنگ",
+          value: "قرمز",
+        },
+        {
+          label: "سایز",
+          value: "۳۶",
+        },
+      ],
+    },
+    {
+      product_id: "product-2",
+      link: "#",
+      name: "سویشرت دو‌رنگ با لوگوی گلدوزی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+      price: {
+        regular: 499000.0,
+        currency: "ریال",
+      },
+      details: [
+        {
+          label: "رنگ",
+          value: "آبی و سفید",
+        },
+        {
+          label: "سایز",
+          value: "L",
+        },
+      ],
+    },
+    {
+      product_id: "product-4",
+      link: "#",
+      name: "کیف دستی چرم زرشکی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+      price: {
+        regular: 245000.0,
+        currency: "ریال",
+      },
+      details: [
+        {
+          label: "رنگ",
+          value: "زرشکی",
+        },
+      ],
+    },
+  ],
+  shippingCost: {
+    price: 20000.0,
+    currency: "ریال",
+  },
+  discount: {
+    price: 50000.0,
+    currency: "ریال",
+  },
+};
+
+const Checkout8 = ({ cart = CART, className }: Checkout8Props) => {
+  const defaultProducts = cart.items.map((item) => ({
+    product_id: item.product_id,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm({
+    resolver: zodResolver(checkoutFormSchema),
+    defaultValues: {
+      payment: {
+        method: PAYMENT_METHODS.creditCard,
+      },
+      products: defaultProducts,
+    },
+  });
+
+  const onSubmit: SubmitHandler<CheckoutFormType> = (
+    data: CheckoutFormType,
+  ) => {
+    console.log(data);
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-muted py-32", className)}
+    >
+      <div className="container">
+        <FormProvider {...form}>
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">
+            <div className="col-span-1">
+              <div className="space-y-6">
+                <Cart form={form} cartData={cart} />
+                <PromoCode />
+              </div>
+            </div>
+            <div className="xl:col-span-2">
+              <CheckoutForm onSubmit={onSubmit} />
+            </div>
+          </div>
+        </FormProvider>
+      </div>
+    </section>
+  );
+};
+
+const Cart = ({ cartData, form }: CartProps) => {
+  const { fields } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const formItems = form.watch("products");
+
+  const subTotalPrice = formItems?.reduce((sum, p) => sum + p.price, 0);
+  const totalPrice =
+    subTotalPrice + cartData.shippingCost.price - cartData.discount.price;
+
+  return (
+    <div className="space-y-6 rounded-lg border-border bg-background p-7 shadow-lg">
+      <div>
+        <h2 className="text-xl leading-relaxed font-semibold">سبد خرید</h2>
+        <p className="text-sm font-medium text-muted-foreground">
+          {formItems.length.toLocaleString("fa-IR")} محصول در سبد خرید شما قرار دارد.
+                          </p>
+      </div>
+      <Separator />
+      <ul className="space-y-5">
+        {fields.map((field) => {
+          return (
+            <li key={field.id}>
+              <CartItem
+                {...(cartData.items.find(
+                  (p) => p.product_id === field.product_id,
+                ) as CartItem)}
+              />
+            </li>
+          );
+        })}
+      </ul>
+      <Separator />
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div>جمع سفارش</div>
+          <Price>
+            <PriceValue
+              price={subTotalPrice}
+              currency={cartData.items[0].price.currency}
+            />
+          </Price>
+        </div>
+        <div className="flex items-center justify-between">
+          <div>هزینه ارسال</div>
+          <Price>
+            <PriceValue
+              price={cartData.shippingCost.price}
+              currency={cartData.shippingCost.currency}
+            />
+          </Price>
+        </div>
+        <div className="flex items-center justify-between">
+          <div>تخفیف</div>
+          <Price>
+            <PriceValue
+              price={cartData.discount.price}
+              currency={cartData.discount.currency}
+            />
+          </Price>
+        </div>
+      </div>
+      <Separator />
+      <div className="flex items-center justify-between">
+        <div>جمع کل</div>
+        <Price>
+          <PriceValue
+            price={totalPrice}
+            currency={cartData.discount.currency}
+          />
+        </Price>
+      </div>
+      <Button className="w-full">ثبت و پرداخت سفارش</Button>
+    </div>
+  );
+};
+
+const CartItem = ({ image, name, link, details, price }: CartItemProps) => {
+  const { regular, currency } = price;
+
+  return (
+    <a href={link} className="flex items-center gap-4">
+      <div className="shrink-0 basis-15">
+        <AspectRatio ratio={1} className="overflow-hidden">
+          <img
+            src={image}
+            alt={name}
+            className="block size-full object-cover object-center"
+          />
+        </AspectRatio>
+      </div>
+      <div className="flex flex-1 gap-4 max-sm:flex-col sm:items-center">
+        <div className="flex-1">
+          <h2 className="font-medium">{name}</h2>
+          <ProductDetails details={details} />
+        </div>
+        <Price className="text-sm font-semibold">
+          <PriceValue price={regular} currency={currency} variant="regular" />
+        </Price>
+      </div>
+    </a>
+  );
+};
+
+const ProductDetails = ({
+  details,
+}: {
+  details?: {
+    label: string;
+    value: string;
+  }[];
+}) => {
+  if (!details) return;
+  return (
+    <ul>
+      {details?.map((item, index) => {
+        const isLast = index === details.length - 1;
+
+        return (
+          <li className="inline" key={index}>
+            <dl className="inline text-xs text-muted-foreground">
+              <dt className="inline">{item.label}: </dt>
+              <dd className="inline">{item.value}</dd>
+              {!isLast && <span className="mx-1 text-muted-foreground">/</span>}
+            </dl>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+const promoCodeFormSchema = z.object({
+  promoCode: z.string().trim().min(3),
+});
+
+type promoCodeFormType = z.infer<typeof promoCodeFormSchema>;
+
+const PromoCode = () => {
+  const promoForm = useForm<promoCodeFormType>({
+    resolver: zodResolver(promoCodeFormSchema),
+    defaultValues: {
+      promoCode: "",
+    },
+  });
+
+  const onSubmit = (data: promoCodeFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <div className="rounded-lg border-border bg-background p-7 shadow-lg">
+      <form onSubmit={promoForm.handleSubmit(onSubmit)}>
+        <Controller
+          name="promoCode"
+          control={promoForm.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <div>
+                <FieldLabel
+                  htmlFor="promo-code"
+                  className="text-lg font-semibold"
+                >
+                  کد تخفیف
+                </FieldLabel>
+                <FieldDescription>
+                  کد تخفیف خود را وارد کنید تا مبلغ سفارش به‌صورت خودکار به‌روزرسانی شود.
+                                          </FieldDescription>
+              </div>
+
+              <InputGroup>
+                <InputGroupInput
+                  {...field}
+                  id="promo-code"
+                  placeholder="کد تخفیف"
+                  aria-invalid={fieldState.invalid}
+                />
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton variant="default" className="text-xs">
+                    اعمال تخفیف
+                                                </InputGroupButton>
+                </InputGroupAddon>
+              </InputGroup>
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </form>
+    </div>
+  );
+};
+
+const CheckoutForm = ({ onSubmit }: CheckoutFormProps) => {
+  const [activeAccordion, setActiveAccordion] = useState("item-1");
+  const { handleSubmit } = useFormContext<CheckoutFormType>();
+
+  const handleOnValueChange = (value: string) => {
+    setActiveAccordion(value);
+  };
+
+  const onContinue = (value: string) => {
+    setActiveAccordion(value);
+  };
+
+  const accordionTriggerClasses =
+    "px-5 py-3.5 text-base font-semibold hover:no-underline";
+  const accordionContentClasses = "";
+
+  return (
+    <div className="space-y-6 rounded-lg border-border bg-background p-7 shadow-lg">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Accordion
+          type="single"
+          collapsible
+          className="w-full border"
+          value={activeAccordion}
+          onValueChange={handleOnValueChange}
+        >
+          <AccordionItem value="مرحله ۱">
+            <AccordionTrigger className={accordionTriggerClasses}>
+              اطلاعات تماس
+            </AccordionTrigger>
+            <AccordionContent className={accordionContentClasses}>
+              <div className="space-y-7">
+                <ContactFields />
+                <Button
+                  type="button"
+                  className="w-full"
+                  variant="secondary"
+                  onClick={() => onContinue("item-2")}
+                >
+                  ادامه مرحله
+                                                  </Button>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="مرحله ۲">
+            <AccordionTrigger className={accordionTriggerClasses}>
+              روش ارسال
+            </AccordionTrigger>
+            <AccordionContent className={accordionContentClasses}>
+              <div className="space-y-7">
+                <ShippingMethodFields />
+                <Button
+                  type="button"
+                  className="w-full"
+                  variant="secondary"
+                  onClick={() => onContinue("item-3")}
+                >
+                  ادامه مرحله
+                                                  </Button>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="مرحله ۳">
+            <AccordionTrigger className={accordionTriggerClasses}>
+              پرداخت
+            </AccordionTrigger>
+            <AccordionContent className={accordionContentClasses}>
+              <div className="space-y-7">
+                <PaymentFields />
+                <Button type="submit" className="w-full">
+                  ثبت و پرداخت سفارش
+                                                  </Button>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </form>
+    </div>
+  );
+};
+
+const ContactFields = () => {
+  const form = useFormContext();
+
+  return (
+    <FieldGroup className="gap-3.5">
+      <Controller
+        name="address.country"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-country"
+            >
+              کشور
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-country"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <div className="flex gap-3.5 max-sm:flex-col">
+        <Controller
+          name="address.firstName"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-firstName"
+              >
+                نام
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-firstName"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="address.lastName"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-lastName"
+              >
+                نام خانوادگی
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-lastName"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+      <Controller
+        name="address.address"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-address"
+            >
+              آدرس
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-address"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <div className="flex gap-3.5 max-sm:flex-col">
+        <Controller
+          name="address.postalCode"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-postalCode"
+              >
+                کد پستی
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-postalCode"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Controller
+          name="address.city"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-city"
+              >
+                شهر
+              </FieldLabel>
+              <Input
+                {...field}
+                id="checkout-city"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </div>
+      <Controller
+        name="address.phone"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-phone"
+            >
+              تلفن
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-phone"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <Controller
+        name="contactInfo.email"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel
+              className="text-sm font-normal"
+              htmlFor="checkout-email"
+            >
+              ایمیل
+            </FieldLabel>
+            <Input
+              {...field}
+              id="checkout-email"
+              aria-invalid={fieldState.invalid}
+            />
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <Controller
+        name="contactInfo.subscribe"
+        control={form.control}
+        render={({ field }) => (
+          <Field orientation="horizontal">
+            <Checkbox
+              id="checkout-subscribe"
+              name={field.name}
+              // @ts-ignore
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            />
+            <FieldLabel htmlFor="checkout-subscribe" className="font-normal">
+              مایلم از تخفیف‌ها و پیشنهادهای ویژه مطلع شوم.
+                                </FieldLabel>
+          </Field>
+        )}
+      />
+    </FieldGroup>
+  );
+};
+
+const ShippingMethodFields = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="shippingMethod"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field>
+          <RadioGroup
+            name={field.name}
+            value={field.value}
+            onValueChange={field.onChange}
+            className="flex max-sm:flex-col"
+          >
+            <FieldLabel htmlFor="checkout-shippingMethod-1">
+              <Field orientation="horizontal" data-invalid={fieldState.invalid}>
+                <FieldContent>
+                  <FieldTitle>پست اکسپرس</FieldTitle>
+                  <FieldDescription>تحویل در اولین روز کاری</FieldDescription>
+                </FieldContent>
+                <div className="flex gap-3.5">
+                  <Price className="text-sm">
+                    <PriceValue price={10000} currency="ریال" />
+                  </Price>
+                  <RadioGroupItem
+                    value="UPS"
+                    id="checkout-shippingMethod-1"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </div>
+              </Field>
+            </FieldLabel>
+            <FieldLabel htmlFor="checkout-shippingMethod-2">
+              <Field orientation="horizontal" data-invalid={fieldState.invalid}>
+                <FieldContent>
+                  <FieldTitle>پیک سریع</FieldTitle>
+                  <FieldDescription>تحویل طی ۳ تا ۵ روز کاری</FieldDescription>
+                </FieldContent>
+                <div className="flex gap-3.5">
+                  <Price className="text-sm">
+                    <PriceValue price={2990} currency="ریال" />
+                  </Price>
+                  <RadioGroupItem
+                    value="FedEx"
+                    id="checkout-shippingMethod-2"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </div>
+              </Field>
+            </FieldLabel>
+          </RadioGroup>
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+const PaymentFields = () => {
+  const form = useFormContext();
+  const paymentMethod = form.watch("payment.method") as PaymentMethod;
+
+  return (
+    <div className="space-y-7">
+      <Controller
+        name="payment.method"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field>
+            <RadioGroup
+              name={field.name}
+              value={field.value}
+              onValueChange={field.onChange}
+            >
+              <FieldLabel htmlFor="checkout-payment-method-1">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                >
+                  <FieldContent className="flex-1">
+                    <FieldTitle>کارت بانکی</FieldTitle>
+                  </FieldContent>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                    alt="کارت بانکی"
+                    className="size-5"
+                  />
+                  <RadioGroupItem
+                    value="creditCard"
+                    id="checkout-payment-method-1"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </Field>
+              </FieldLabel>
+              <FieldLabel htmlFor="checkout-payment-method-2">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                >
+                  <FieldContent className="flex-1">
+                    <FieldTitle>پی‌پال</FieldTitle>
+                  </FieldContent>
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/paypal-icon.svg"
+                    alt="پی‌پال"
+                    className="size-5"
+                  />
+                  <RadioGroupItem
+                    value="paypal"
+                    id="checkout-payment-method-2"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </Field>
+              </FieldLabel>
+              <FieldLabel htmlFor="checkout-payment-method-3">
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                >
+                  <FieldContent>
+                    <FieldTitle>پرداخت از طریق انتقال بانکی</FieldTitle>
+                  </FieldContent>
+                  <RadioGroupItem
+                    value="onlineBankTransfer"
+                    id="checkout-payment-method-3"
+                    aria-invalid={fieldState.invalid}
+                  />
+                </Field>
+              </FieldLabel>
+            </RadioGroup>
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+      <PaymentFieldsByMethod method={paymentMethod} />
+    </div>
+  );
+};
+
+const PaymentFieldsByMethod = ({ method }: { method: PaymentMethod }) => {
+  const form = useFormContext();
+
+  if (!method) return;
+
+  switch (method) {
+    case PAYMENT_METHODS.creditCard:
+      return (
+        <div className="space-y-3.5">
+          <Controller
+            name="payment.cardholderName"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-cardholderName"
+                >
+                  نام دارنده کارت
+                                        </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardholderName"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <Controller
+            name="payment.cardNumber"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-cardNumber"
+                >
+                  شماره کارت
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-cardNumber"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <div className="flex gap-3.5 max-sm:flex-col">
+            <DateInput />
+            <Controller
+              name="payment.cvc"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel
+                    className="text-sm font-normal"
+                    htmlFor="checkout-payment-cvc"
+                  >
+                    کد امنیتی (CVC)
+                                            </FieldLabel>
+                  <Input
+                    {...field}
+                    id="checkout-payment-cvc"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </div>
+        </div>
+      );
+    case PAYMENT_METHODS.paypal:
+      return (
+        <Controller
+          name="payment.payPalEmail"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel
+                className="text-sm font-normal"
+                htmlFor="checkout-payment-payPalEmail"
+              >
+                ایمیل پی‌پال
+              </FieldLabel>
+              <Input
+                {...field}
+                type="email"
+                placeholder="example@email.com"
+                id="checkout-payment-payPalEmail"
+                aria-invalid={fieldState.invalid}
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      );
+    case PAYMENT_METHODS.onlineBankTransfer:
+      return (
+        <div className="space-y-3.5">
+          <Controller
+            name="payment.bankName"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-bankName"
+                >
+                  نام بانک
+                </FieldLabel>
+                <Input
+                  {...field}
+                  placeholder="نام بانک"
+                  id="checkout-payment-bankName"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <Controller
+            name="payment.accountNumber"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel
+                  className="text-sm font-normal"
+                  htmlFor="checkout-payment-accountNumber"
+                >
+                  شماره حساب
+                </FieldLabel>
+                <Input
+                  {...field}
+                  id="checkout-payment-accountNumber"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+const DateInput = () => {
+  const form = useFormContext();
+
+  return (
+    <Controller
+      name="payment.expiryDate"
+      control={form.control}
+      render={({ field, fieldState }) => (
+        <Field data-invalid={fieldState.invalid}>
+          <FieldLabel
+            className="text-sm font-normal"
+            htmlFor="checkout-payment-expiryDate"
+          >
+            تاریخ انقضا
+          </FieldLabel>
+          <Input
+            {...field}
+            onChange={(e) => {
+              let val = e.target.value;
+              val = val.replace(/[^0-9/]/g, "");
+
+              const prev = field.value ?? "";
+              const isDeleting = val.length < prev.length;
+
+              if (!isDeleting) {
+                if (val.length === 2 && !val.includes("/")) {
+                  val = val + "/";
+                }
+              }
+
+              if (val.length > 5) {
+                val = val.slice(0, 5);
+              }
+
+              field.onChange(val);
+            }}
+            pattern="^(0[1-9]|1[0-2])/[0-9]{2}$"
+            placeholder="MM/YY"
+            id="checkout-payment-expiryDate"
+            aria-invalid={fieldState.invalid}
+          />
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+};
+
+export { Checkout8 };
diff --git a/blocks/community1.tsx b/blocks/community1.tsx
new file mode 100644
index 0000000..1482b82
--- /dev/null
+++ b/blocks/community1.tsx
@@ -0,0 +1,74 @@
+import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface SocialLink {
+  icon: React.ReactNode;
+  url: string;
+  label: string;
+}
+
+interface Community1Props {
+  logo?: string;
+  heading?: string;
+  headingHighlight?: string;
+  socialLinks?: SocialLink[];
+  className?: string;
+}
+
+const Community1 = ({
+  logo = "/block-media/shadcnblocks/block/block-1.svg",
+  heading = "به جمع متخصصان ما بپیوندید",
+  headingHighlight = "ویژه طراحان، توسعه‌دهندگان و سازندگان محصولات دیجیتال",
+  socialLinks = [
+    {
+      icon: <FaXTwitter />,
+      url: "https://x.com/ShadcnBlocks",
+      label: "ما را در X دنبال کنید و از آخرین اخبار باخبر شوید",
+    },
+    {
+      icon: <FaGithub />,
+      url: "https://github.com/ShadcnBlocks",
+      label: "در گیت‌هاب پروژه‌های ما را دنبال کنید",
+    },
+    {
+      icon: <FaDiscord />,
+      url: "#",
+      label: "به انجمن دیسکورد ما بپیوندید",
+    },
+  ],
+  className,
+}: Community1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-5">
+          <img src={logo} alt="لوگو" className="size-10" />
+          <h2 className="text-center text-3xl font-semibold">
+            {heading}
+            <br />
+            <span className="text-muted-foreground/80">{headingHighlight}</span>
+          </h2>
+          <div className="flex items-center gap-4">
+            {socialLinks.map((link, index) => (
+              <Button key={index} size="lg" variant="outline" asChild>
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={link.label}
+                  className="size-10"
+                >
+                  {link.icon}
+                </a>
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Community1 };
diff --git a/blocks/community2.tsx b/blocks/community2.tsx
new file mode 100644
index 0000000..8df40f0
--- /dev/null
+++ b/blocks/community2.tsx
@@ -0,0 +1,87 @@
+import { ArrowUpRight } from "lucide-react";
+import { FaDiscord, FaGithub, FaLinkedin, FaXTwitter } from "react-icons/fa6";
+
+import { cn } from "@/lib/utils";
+
+interface SocialLink {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  url: string;
+}
+
+interface Community2Props {
+  heading?: string;
+  description?: string;
+  socialLinks?: SocialLink[];
+  className?: string;
+}
+
+const Community2 = ({
+  heading = "به جمع متخصصان ما بپیوندید",
+  description =
+    "با اعضای جامعه ارتباط برقرار کنید، تجربه‌های خود را به اشتراک بگذارید و از تازه‌ترین آموزش‌ها و به‌روزرسانی‌ها مطلع شوید.",
+  socialLinks = [
+    {
+      icon: <FaXTwitter className="size-5" />,
+      title: "X",
+      description: "آخرین اخبار، انتشار نسخه‌ها و اطلاعیه‌های رسمی را دنبال کنید.",
+      url: "https://x.com/ShadcnBlocks",
+    },
+    {
+      icon: <FaLinkedin className="size-5" />,
+      title: "LinkedIn",
+      description: "با تیم ما ارتباط حرفه‌ای برقرار کنید و فرصت‌های همکاری را دنبال کنید.",
+      url: "https://www.linkedin.com/company/ShadcnBlocks",
+    },
+    {
+      icon: <FaGithub className="size-5" />,
+      title: "گیت‌هاب",
+      description: "در توسعه پروژه‌های متن‌باز مشارکت کنید، ایده ارائه دهید و مشکلات را گزارش کنید.",
+      url: "https://github.com/ShadcnBlocks",
+    },
+    {
+      icon: <FaDiscord className="size-5" />,
+      title: "دیسکورد",
+      description:
+        "در دیسکورد با سایر توسعه‌دهندگان گفتگو کنید، سؤال بپرسید و از تجربه اعضای جامعه استفاده کنید.",
+      url: "#",
+    },
+  ],
+  className,
+}: Community2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-5 text-xl font-semibold md:text-3xl">{heading}</h2>
+        <p className="font-medium text-muted-foreground md:text-xl">
+          {description}
+        </p>
+        <div className="mt-10 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
+          {socialLinks.map((link, index) => (
+            <a
+              key={index}
+              className="group rounded-md border border-border p-6"
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="flex items-center justify-between gap-4">
+                {link.icon}
+                <ArrowUpRight className="size-4 translate-x-2 translate-y-2 opacity-0 transition-all group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100 rtl:-translate-x-2 rtl:rotate-180" />
+              </div>
+              <div className="mt-4">
+                <h3 className="mb-1 font-semibold">{link.title}</h3>
+                <p className="text-sm text-muted-foreground">
+                  {link.description}
+                </p>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Community2 };
diff --git a/blocks/community3.tsx b/blocks/community3.tsx
new file mode 100644
index 0000000..c02e1cd
--- /dev/null
+++ b/blocks/community3.tsx
@@ -0,0 +1,95 @@
+import { Users } from "lucide-react";
+import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
+
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Community3Props {
+  className?: string;
+}
+
+const Community3 = ({ className }: Community3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-start pb-10 md:items-center md:pb-14 xl:pb-[60px]">
+          <Badge>
+            <Users className="h-4 w-4" />
+            جامعه
+          </Badge>
+
+          <h4 className="mt-4 text-[28px] leading-[36px] font-semibold tracking-tight text-foreground md:text-center md:text-3xl xl:text-[48px] xl:leading-[56px]">
+            عضوی از جامعه رو‌به‌رشد ما شوید
+                                </h4>
+
+          <p className="mt-2 text-lg text-muted-foreground md:text-center xl:mt-3 xl:text-xl">
+            با طراحان، توسعه‌دهندگان و علاقه‌مندان فناوری{" "}
+            <span className="font-medium text-foreground">همکاری</span> کنید،{" "}
+            <span className="font-medium text-foreground">یادگیری</span> کنید و{" "}
+            <span className="font-medium text-foreground">رشد</span> کنید.
+          </p>
+
+          <div className="mt-6 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:mt-12 xl:gap-6">
+            <Card className="rounded-2xl transition-all hover:shadow-md">
+              <a
+                href="#"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex h-full flex-col items-center p-6 md:p-8 xl:p-10"
+              >
+                <FaXTwitter className="mb-4 h-8 w-8 md:h-12 md:w-12 xl:h-16 xl:w-16" />
+                <div className="space-y-2 text-center">
+                  <h5 className="text-sm font-medium md:text-lg">X</h5>
+                  <p className="text-sm text-balance text-muted-foreground">
+                    آخرین آموزش‌ها، مقالات، نسخه‌ها و اخبار را دریافت کنید.
+                                                        </p>
+                </div>
+              </a>
+            </Card>
+
+            <Card className="rounded-2xl transition-all hover:shadow-md">
+              <a
+                href="#"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex h-full flex-col items-center p-6 md:p-8 xl:p-10"
+              >
+                <FaGithub className="mb-4 h-8 w-8 md:h-12 md:w-12 xl:h-16 xl:w-16" />
+                <div className="space-y-2 text-center">
+                  <h5 className="text-sm font-medium md:text-lg">گیت‌هاب</h5>
+                  <p className="text-sm text-balance text-muted-foreground">
+                    در توسعه پروژه مشارکت کنید، مشکلات را گزارش دهید و پیشنهادهای خود را ارائه کنید.
+                                                        </p>
+                </div>
+              </a>
+            </Card>
+
+            <Card className="rounded-2xl transition-all hover:shadow-md">
+              <a
+                href="#"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex h-full flex-col items-center p-6 md:p-8 xl:p-10"
+              >
+                <FaDiscord className="mb-4 h-8 w-8 md:h-12 md:w-12 xl:h-16 xl:w-16" />
+                <div className="space-y-2 text-center">
+                  <h5 className="text-sm font-medium md:text-lg">دیسکورد</h5>
+                  <p className="text-sm text-balance text-muted-foreground">
+                    با اعضای جامعه گفتگو کنید، تجربه‌های خود را به اشتراک بگذارید و پاسخ پرسش‌های خود را دریافت کنید.
+                                                        </p>
+                </div>
+              </a>
+            </Card>
+          </div>
+
+          <div className="mt-8 hidden max-w-[330px] text-center text-muted-foreground xl:block">
+            در جامعه‌ای فعال حضور داشته باشید که بر پایه یادگیری، همکاری و نوآوری شکل گرفته است.
+                                </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Community3 };
diff --git a/blocks/community4.tsx b/blocks/community4.tsx
new file mode 100644
index 0000000..245d2ec
--- /dev/null
+++ b/blocks/community4.tsx
@@ -0,0 +1,114 @@
+import { ChevronRight } from "lucide-react";
+import { FaFacebook, FaInstagram, FaYoutube } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+
+import { cn } from "@/lib/utils";
+
+interface Community4Props {
+  className?: string;
+}
+
+const Community4 = ({ className }: Community4Props) => {
+  const socialPlatforms = [
+    {
+      name: "Facebook",
+      icon: <FaFacebook className="size-6 text-blue-400/90" />,
+      color: "blue",
+      heading: "به انجمن کاربران ما بپیوندید",
+      description:
+        "ایده‌ها، تجربه‌ها و پروژه‌های خود را با سایر اعضای جامعه به اشتراک بگذارید.",
+      followText: "ما را در فیسبوک دنبال کنید",
+      url: "#",
+    },
+    {
+      name: "Youtube",
+      icon: <FaYoutube className="size-6 text-red-500/90" />,
+      color: "red",
+      heading: "کانال ویدئویی ما را دنبال کنید",
+      description: "آموزش‌ها، معرفی قابلیت‌های جدید و ویدئوهای تخصصی را مشاهده کنید.",
+      followText: "ما را در یوتیوب دنبال کنید",
+      url: "#",
+    },
+    {
+      name: "X",
+      icon: <FaXTwitter className="size-5 text-white" />,
+      color: "zinc",
+      heading: "اخبار و به‌روزرسانی‌ها را دنبال کنید",
+      description: "از آخرین تغییرات محصول، نسخه‌های جدید و اطلاعیه‌های مهم مطلع شوید.",
+      followText: "ما را در X دنبال کنید",
+      url: "#",
+    },
+    {
+      name: "Instagram",
+      icon: <FaInstagram className="size-6 text-pink-400/90" />,
+      color: "pink",
+      heading: "گالری پروژه‌ها را ببینید",
+      description: "نمونه پروژه‌ها، تصاویر و پشت‌صحنه توسعه محصولات را مشاهده کنید.",
+      followText: "ما را در اینستاگرام دنبال کنید",
+      url: "#",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-2.5 text-center">
+          <h2 className="text-xl font-medium md:text-2xll">
+            به جمع متخصصان ما بپیوندید
+                                </h2>
+          <p className="text-muted-foreground md:text-lg">
+            با اعضای جامعه ارتباط برقرار کنید، تجربه‌های خود را به اشتراک بگذارید و از تازه‌ترین آموزش‌ها و به‌روزرسانی‌ها مطلع شوید.
+                                </p>
+        </div>
+        <div className="mx-auto mt-8 grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-4">
+          {socialPlatforms.map((platform) => (
+            <a
+              key={platform.name}
+              href={platform.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                "group relative flex h-full flex-col gap-10 overflow-hidden rounded-xl border bg-radial-[at_80%_14%] from-[-50%] via-zinc-950 via-75% to-zinc-950 p-6",
+                platform.color === "pink" &&
+                  "from-pink-500 dark:border-pink-500/50",
+                platform.color === "blue" &&
+                  "from-blue-500 dark:border-blue-500/50",
+                platform.color === "red" &&
+                  "from-red-500 dark:border-red-500/50",
+                platform.color === "zinc" &&
+                  "from-zinc-500 dark:border-zinc-500/50",
+              )}
+            >
+              <div className="absolute inset-0 h-full w-full shrink-0 bg-[radial-gradient(white_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_at_80%_14%,#000,transparent_40%)] [background-size:3px_3px] opacity-35"></div>
+              <div
+                className={`relative grid size-11 shrink-0 place-items-center rounded-full bg-gradient-to-b from-${platform.color === "zinc" ? "white" : `${platform.color}-500`}/50 via-transparent to-${platform.color === "zinc" ? "white" : `${platform.color}-500`}/50 p-px`}
+              >
+                <div
+                  className={`grid size-full place-items-center rounded-full bg-zinc-950 bg-gradient-to-b from-${platform.color === "zinc" ? "white" : `${platform.color}-500`}/30 via-transparent to-${platform.color === "zinc" ? "white" : `${platform.color}-500`}/30`}
+                >
+                  {platform.icon}
+                </div>
+              </div>
+              <div className="flex h-full flex-col justify-between">
+                <div className="mb-5">
+                  <h3 className="relative text-lg font-semibold text-white">
+                    {platform.heading}
+                  </h3>
+                  <p className="mt-2 text-sm text-white/70">
+                    {platform.description}
+                  </p>
+                </div>
+                <div className="flex items-center gap-1 text-sm font-semibold text-white/90 transition-colors group-hover:text-white">
+                  {platform.followText}
+                  <ChevronRight className="size-4.5 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Community4 };
diff --git a/blocks/community5.tsx b/blocks/community5.tsx
new file mode 100644
index 0000000..423c6d5
--- /dev/null
+++ b/blocks/community5.tsx
@@ -0,0 +1,148 @@
+import { GitBranch, Star, Users } from "lucide-react";
+import { FaDiscord, FaGithub, FaLinkedin, FaXTwitter } from "react-icons/fa6";
+
+import { GridPattern } from "@/components/magicui/grid-pattern";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const GITHUB_PROFILE = {
+  name: "ShadcnBlocks",
+  url: "https://github.com/ShadcnBlocks",
+  description: "مجموعه‌ای از بلاک‌های رابط کاربری متن‌باز برای توسعه سریع‌تر پروژه‌های مدرن.",
+  stats: {
+    stars: "4.2k",
+    forks: "1.1k",
+    contributors: "120+",
+  },
+};
+
+const socials = [
+  {
+    name: "دیسکورد",
+    icon: <FaDiscord className="h-6 w-6" />,
+    url: "#",
+  },
+  {
+    name: "X",
+    icon: <FaXTwitter className="h-6 w-6" />,
+    url: "#",
+  },
+  {
+    name: "LinkedIn",
+    icon: <FaLinkedin className="h-6 w-6" />,
+    url: "#",
+  },
+];
+
+interface Community5Props {
+  className?: string;
+}
+
+const Community5 = ({ className }: Community5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center pb-10 md:pb-14 xl:pb-[60px]">
+          <Badge>
+            <FaGithub className="ms-1 h-4 w-4" />
+            جامعه گیت‌هاب
+          </Badge>
+          <h5 className="mt-4 text-xl leading-7 font-semibold tracking-tight text-foreground md:text-center xl:text-3xl">
+            در توسعه پروژه مشارکت کنید
+                                </h5>
+          <p className="mt-2 text-lg text-muted-foreground md:text-center xl:mt-3 xl:text-lg">
+            مخزن پروژه را بررسی کنید، پیشنهاد ثبت کنید، Pull Request ارسال کنید و در رشد پروژه سهیم باشید.
+                                </p>
+
+          <div className="mx-auto mt-10 flex w-full max-w-2xl flex-col items-center">
+            <Card className="relative flex w-full flex-col items-start gap-6 overflow-hidden rounded-2xl border border-border p-8 shadow-lg md:flex-row lg:items-center">
+              <div className="pointer-events-none absolute end-0 bottom-0 z-0 h-2/3 w-2/3">
+                <GridPattern
+                  className="h-full w-full"
+                  style={{
+                    maskImage:
+                      "radial-gradient(circle at 100% 100%, black 60%, transparent 100%)",
+                    WebkitMaskImage:
+                      "radial-gradient(circle at 100% 100%, black 60%, transparent 100%)",
+                    opacity: 0.4,
+                  }}
+                />
+              </div>
+              <div className="z-10 flex flex-shrink-0 flex-col items-start">
+                <a
+                  href={GITHUB_PROFILE.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="پروفایل مخزن کد ری یو آی"
+                >
+                  <FaGithub className="mb-2 h-16 w-16 text-foreground" />
+                </a>
+                <span className="text-xl font-semibold text-foreground">
+                  {GITHUB_PROFILE.name}
+                </span>
+                <a
+                  href={GITHUB_PROFILE.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mt-1 text-sm text-muted-foreground underline hover:text-foreground"
+                >
+                  {GITHUB_PROFILE.url.replace("https://", "")}
+                </a>
+              </div>
+              <div className="z-10 flex flex-1 flex-col items-start">
+                <p className="mb-4 text-start text-muted-foreground">
+                  {GITHUB_PROFILE.description}
+                </p>
+                <div className="flex flex-col gap-4 text-sm md:flex-row md:gap-6">
+                  <div className="flex items-center gap-1">
+                    <Star className="h-4 w-4 text-yellow-400" />
+                    <span className="font-semibold text-foreground">
+                      {GITHUB_PROFILE.stats.stars}
+                    </span>
+                    <span className="ms-1 text-muted-foreground">ستاره</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <GitBranch className="h-4 w-4 text-muted-foreground" />
+                    <span className="font-semibold text-foreground">
+                      {GITHUB_PROFILE.stats.forks}
+                    </span>
+                    <span className="ms-1 text-muted-foreground">فورک</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Users className="h-4 w-4 text-muted-foreground" />
+                    <span className="font-semibold text-foreground">
+                      {GITHUB_PROFILE.stats.contributors}
+                    </span>
+                    <span className="ms-1 text-muted-foreground">
+                      مشارکت‌کننده
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          <div className="mt-8 flex justify-center gap-4">
+            {socials.map((social) => (
+              <a
+                key={social.name}
+                href={social.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex w-24 flex-col items-center gap-2 rounded-xl border border-border bg-background p-4 transition-all hover:shadow-md"
+              >
+                {social.icon}
+                <span className="text-xs font-medium text-muted-foreground">
+                  {social.name}
+                </span>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Community5 };
diff --git a/blocks/community6.tsx b/blocks/community6.tsx
new file mode 100644
index 0000000..25f7218
--- /dev/null
+++ b/blocks/community6.tsx
@@ -0,0 +1,104 @@
+import {
+  FaDiscord,
+  FaGithub,
+  FaLinkedin,
+  FaSlack,
+  FaXTwitter,
+} from "react-icons/fa6";
+import { SiBluesky } from "react-icons/si";
+
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const iconWrapper =
+  "mb-4 flex items-center justify-center h-16 w-16 rounded-full border-2 border-dotted border-muted-foreground/40 transition-colors duration-200";
+
+interface Community6Props {
+  className?: string;
+}
+
+const Community6 = ({ className }: Community6Props) => {
+  const communityCards = [
+    {
+      icon: <FaXTwitter className="h-8 w-8 text-foreground/80" />,
+      title: "X",
+      description: "آخرین مقالات، آموزش‌ها و به‌روزرسانی‌های محصول را دنبال کنید.",
+      link: "#",
+    },
+    {
+      icon: <FaGithub className="h-8 w-8 text-foreground/80" />,
+      title: "گیت‌هاب",
+      description: "در توسعه مشارکت کنید، Issue ثبت کنید و از پروژه حمایت کنید.",
+      link: "#",
+    },
+    {
+      icon: <FaDiscord className="h-8 w-8 text-foreground/80" />,
+      title: "دیسکورد",
+      description: "با اعضای جامعه گفتگو کنید، تجربه‌های خود را به اشتراک بگذارید و پاسخ پرسش‌های خود را دریافت کنید.",
+      link: "#",
+    },
+    {
+      icon: <FaLinkedin className="h-8 w-8 text-foreground/80" />,
+      title: "LinkedIn",
+      description: "از طریق لینکدین با تیم ما در ارتباط باشید و شبکه حرفه‌ای خود را توسعه دهید.",
+      link: "#",
+    },
+    {
+      icon: <FaSlack className="h-8 w-8 text-foreground/80" />,
+      title: "Slack",
+      description: "برای همکاری سریع و ارتباط مستقیم به فضای پیام‌رسان تیمی ما بپیوندید.",
+      link: "#",
+    },
+    {
+      icon: <SiBluesky className="h-8 w-8 text-foreground/80" />,
+      title: "Bluesky",
+      description: "ما را در Bluesky دنبال کنید و در گفتگوهای جامعه مشارکت داشته باشید.",
+      link: "#",
+    },
+  ];
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative overflow-hidden rounded-3xl bg-background py-32 text-foreground",
+        className,
+      )}
+    >
+      <div className="relative z-10 container flex flex-col items-center justify-center">
+        <h2 className="mb-4 text-center text-xl font-bold tracking-tight md:text-2xll xl:text-2xll">
+          به جامعه حرفه‌ای ما بپیوندید
+                          </h2>
+        <p className="mb-8 max-w-2xl text-center text-lg font-normal text-muted-foreground md:text-xl">
+          با توسعه‌دهندگان، طراحان و متخصصان سراسر جهان ارتباط برقرار کنید، تجربه کسب کنید و پروژه‌های ارزشمند خلق کنید.
+                          </p>
+        <div className="mb-10 grid w-full grid-cols-1 gap-6 md:grid-cols-3 xl:grid-cols-6">
+          {communityCards.map((card) => (
+            <Card
+              key={card.title}
+              className="group flex flex-1 flex-col items-center rounded-2xl bg-background p-8 transition-shadow duration-200 hover:shadow-lg"
+            >
+              <a
+                href={card.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex flex-col items-center"
+              >
+                <span className={`${iconWrapper} group-hover:bg-muted`}>
+                  {card.icon}
+                </span>
+                <h5 className="mb-1 text-lg font-semibold">{card.title}</h5>
+                <p className="mb-2 text-center text-base text-muted-foreground">
+                  {card.description}
+                </p>
+              </a>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Community6 };
diff --git a/blocks/community7.tsx b/blocks/community7.tsx
new file mode 100644
index 0000000..ab2400f
--- /dev/null
+++ b/blocks/community7.tsx
@@ -0,0 +1,116 @@
+import {
+  FaDiscord,
+  FaGithub,
+  FaLinkedin,
+  FaSlack,
+  FaXTwitter,
+} from "react-icons/fa6";
+import { SiBluesky } from "react-icons/si";
+
+import { cn } from "@/lib/utils";
+
+interface Community7Props {
+  className?: string;
+}
+
+const Community7 = ({ className }: Community7Props) => {
+  const communityCards = [
+    {
+      icon: <FaXTwitter className="h-8 w-8 text-foreground/80" />,
+      title: "X",
+      description: "آخرین مقالات، آموزش‌ها و به‌روزرسانی‌های محصول را دنبال کنید.",
+      link: "https://x.com/ShadcnBlocks",
+      status: "online",
+      followers: 12000,
+    },
+    {
+      icon: <FaGithub className="h-8 w-8 text-foreground/80" />,
+      title: "گیت‌هاب",
+      description: "در توسعه مشارکت کنید، Issue ثبت کنید و از پروژه حمایت کنید.",
+      link: "https://github.com/shadcn/blocks",
+      status: "offline",
+      followers: 8000,
+    },
+    {
+      icon: <FaDiscord className="h-8 w-8 text-foreground/80" />,
+      title: "دیسکورد",
+      description: "با اعضای جامعه گفتگو کنید، تجربه‌های خود را به اشتراک بگذارید و پاسخ پرسش‌های خود را دریافت کنید.",
+      link: "https://discord.gg",
+      status: "online",
+      followers: 3500,
+    },
+    {
+      icon: <FaLinkedin className="h-8 w-8 text-foreground/80" />,
+      title: "LinkedIn",
+      description: "از طریق لینکدین با تیم ما در ارتباط باشید و شبکه حرفه‌ای خود را توسعه دهید.",
+      link: "https://www.linkedin.com/company/shadcn",
+      status: "online",
+      followers: 5000,
+    },
+    {
+      icon: <FaSlack className="h-8 w-8 text-foreground/80" />,
+      title: "Slack",
+      description: "برای همکاری سریع و ارتباط مستقیم به فضای پیام‌رسان تیمی ما بپیوندید.",
+      link: "https://slack.com/shadcn",
+      status: "offline",
+      followers: 1200,
+    },
+    {
+      icon: <SiBluesky className="h-8 w-8 text-foreground/80" />,
+      title: "Bluesky",
+      description: "ما را در Bluesky دنبال کنید و در گفتگوهای جامعه مشارکت داشته باشید.",
+      link: "https://bsky.app/profile/shadcn.bsky.social",
+      status: "online",
+      followers: 900,
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center justify-center">
+        <h2 className="mb-4 text-center text-xl font-bold tracking-tight md:text-2xll xl:text-2xll">
+          در شبکه‌های اجتماعی همراه ما باشید
+                          </h2>
+        <p className="mb-8 max-w-2xl text-center text-lg font-normal text-muted-foreground md:text-xl">
+          در شبکه‌های اجتماعی ما را دنبال کنید و از تازه‌ترین محتوا و اخبار مطلع شوید.
+                          </p>
+        <div className="mb-10 grid w-full grid-cols-1 gap-6 md:grid-cols-3">
+          {communityCards.map((card) => (
+            <div
+              key={card.title}
+              className="group flex flex-1 flex-col items-center gap-2 rounded-2xl border-0 bg-background p-8 transition-colors duration-200 hover:bg-muted"
+            >
+              <div className="flex flex-col items-center gap-2">
+                {card.icon}
+                <h5 className="mb-1 text-lg font-semibold">{card.title}</h5>
+                <a
+                  href={card.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mb-1 text-xs break-all underline"
+                >
+                  {card.link}
+                </a>
+                <div className="mt-2 flex items-center justify-center gap-2">
+                  <span
+                    className={`h-2 w-2 rounded-full ${card.status === "online" ? "bg-green-500" : "bg-gray-400"}`}
+                    title={card.status === "online" ? "آنلاین" : "آفلاین"}
+                  />
+                  <span className="text-xs text-muted-foreground">
+                    {card.status === "online" ? "آنلاین" : "آفلاین"}
+                  </span>
+                  <span className="mx-2 text-xs text-muted-foreground">•</span>
+                  <span className="text-xs font-medium text-foreground">
+                    {card.followers.toLocaleString("fa-IR")} دنبال‌کننده
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Community7 };
diff --git a/blocks/companies-create1.tsx b/blocks/companies-create1.tsx
new file mode 100644
index 0000000..1a84b35
--- /dev/null
+++ b/blocks/companies-create1.tsx
@@ -0,0 +1,490 @@
+"use client";
+
+import {
+  Building2,
+  Check,
+  ChevronsUpDown,
+  Globe,
+  RefreshCcw,
+  Share2,
+  TrendingUp,
+} from "lucide-react";
+import { useState } from "react";
+
+import {
+  Tags,
+  TagsContent,
+  TagsEmpty,
+  TagsGroup,
+  TagsInput,
+  TagsItem,
+  TagsList,
+  TagsTrigger,
+  TagsValue,
+} from "@/components/kibo-ui/tags";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface ComboboxOption {
+  label: string;
+  value: string;
+}
+
+interface FormComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: ComboboxOption[];
+  name?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  required?: boolean;
+}
+
+interface FormTagsProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  options: ComboboxOption[];
+  name?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  required?: boolean;
+}
+
+const FormCombobox = ({
+  value,
+  onChange,
+  options,
+  name,
+  searchPlaceholder = "جستجو بر اساس نام...",
+  emptyMessage = "موردی یافت نشد.",
+  required = false,
+}: FormComboboxProps) => {
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = options.find((option) => option.value === value);
+  const displayValue = selectedOption ? selectedOption.label : "";
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger className="w-full outline-none">
+        <div className="relative flex w-full items-center">
+          <Input
+            type="text"
+            name={name}
+            value={displayValue}
+            required={required}
+            onChange={() => {}}
+            onClick={() => setOpen(true)}
+            className={cn(
+              "cursor-pointer bg-background pe-6",
+              !value && "text-muted-foreground",
+            )}
+          />
+          <div className="pointer-events-auto absolute end-2 flex h-full items-center">
+            <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          </div>
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onChange(currentValue === value ? "" : currentValue);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "size-4",
+                      value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const FormTags = ({
+  value = [],
+  onChange,
+  options,
+  name,
+  searchPlaceholder = "جستجوی دسته‌بندی...",
+  emptyMessage = "دسته‌بندی‌ای یافت نشد.",
+  required = false,
+}: FormTagsProps) => {
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = (selectedValue: string) => {
+    const newValue = value.includes(selectedValue)
+      ? value.filter((v) => v !== selectedValue)
+      : [...value, selectedValue];
+    onChange(newValue);
+  };
+
+  const handleRemove = (tagToRemove: string) => {
+    onChange(value.filter((v) => v !== tagToRemove));
+  };
+
+  return (
+    <Tags open={open} onOpenChange={setOpen}>
+      <TagsTrigger>
+        {value.length > 0
+          ? value.map((tagValue) => {
+              const option = options.find((opt) => opt.value === tagValue);
+              return (
+                <TagsValue
+                  key={tagValue}
+                  onRemove={() => handleRemove(tagValue)}
+                >
+                  {option?.label || tagValue}
+                </TagsValue>
+              );
+            })
+          : null}
+      </TagsTrigger>
+      <TagsContent>
+        <TagsInput placeholder={searchPlaceholder} />
+        <TagsList>
+          <TagsEmpty>{emptyMessage}</TagsEmpty>
+          <TagsGroup>
+            {options.map((option) => (
+              <TagsItem
+                key={option.value}
+                value={option.value}
+                onSelect={() => handleSelect(option.value)}
+              >
+                <Check
+                  className={cn(
+                    "me-2 size-4",
+                    value.includes(option.value) ? "opacity-100" : "opacity-0",
+                  )}
+                />
+                {option.label}
+              </TagsItem>
+            ))}
+          </TagsGroup>
+        </TagsList>
+      </TagsContent>
+      {required && value.length === 0 && (
+        <input
+          type="hidden"
+          name={name}
+          value=""
+          required
+          aria-invalid="true"
+        />
+      )}
+      {value.map((tagValue) => (
+        <input key={tagValue} type="hidden" name={name} value={tagValue} />
+      ))}
+    </Tags>
+  );
+};
+
+interface CompaniesCreate1Props {
+  title?: string;
+  className?: string;
+}
+
+const CompaniesCreate1 = ({
+  title = "ایجاد پروفایل شرکت",
+  className,
+}: CompaniesCreate1Props) => {
+  const [formData, setFormData] = useState<Record<string, string | string[]>>(
+    {},
+  );
+
+  const FIELD_SECTIONS = [
+    {
+      title: "اطلاعات پایه",
+      icon: Building2,
+      fields: [
+        {
+          name: "name",
+          label: "نام شرکت",
+          required: true,
+        },
+        {
+          name: "description",
+          label: "معرفی شرکت",
+        },
+        {
+          name: "team",
+          label: "تیم",
+          type: "combobox",
+          searchPlaceholder: "جستجوی اعضا...",
+          emptyMessage: "عضوی یافت نشد.",
+          required: true,
+          options: [
+            {
+              label: "علی",
+              value: "alex",
+            },
+            {
+              label: "محمد",
+              value: "john",
+            },
+            {
+              label: "سارا",
+              value: "jane",
+            },
+          ],
+        },
+        {
+          name: "categories",
+          label: "دسته‌بندی‌ها",
+          type: "tags",
+          searchPlaceholder: "جستجوی دسته‌بندی...",
+          emptyMessage: "دسته‌بندی یافت نشد.",
+          options: [
+            {
+              label: "SaaS",
+              value: "saas",
+            },
+            {
+              label: "تجارت الکترونیک",
+              value: "ecommerce",
+            },
+            {
+              label: "فین‌تک",
+              value: "fintech",
+            },
+            {
+              label: "بهداشت و درمان",
+              value: "healthcare",
+            },
+            {
+              label: "آموزش",
+              value: "education",
+            },
+            {
+              label: "سازمانی",
+              value: "enterprise",
+            },
+            {
+              label: "B2B",
+              value: "b2b",
+            },
+            {
+              label: "B2C",
+              value: "b2c",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: "موقعیت جغرافیایی",
+      icon: Globe,
+      fields: [
+        {
+          name: "location",
+          label: "موقعیت جغرافیایی",
+        },
+      ],
+    },
+    {
+      title: "وب‌سایت و شبکه‌های اجتماعی",
+      icon: Share2,
+      fields: [
+        {
+          name: "angellist",
+          label: "AngelList",
+        },
+        {
+          name: "facebook",
+          label: "Facebook",
+        },
+        {
+          name: "instagram",
+          label: "Instagram",
+        },
+        {
+          name: "linkedin",
+          label: "LinkedIn",
+        },
+        {
+          name: "twitter",
+          label: "Twitter",
+        },
+      ],
+    },
+    {
+      title: "شاخص‌های شرکت",
+      icon: TrendingUp,
+      fields: [
+        {
+          name: "arr",
+          label: "برآورد درآمد تکرارشونده سالانه (ARR)",
+        },
+        {
+          name: "funding",
+          label: "سرمایه جذب‌شده",
+        },
+        {
+          name: "founded_date",
+          label: "تاریخ تأسیس",
+        },
+        {
+          name: "employee_range",
+          label: "محدوده تعداد کارکنان",
+        },
+      ],
+    },
+    {
+      title: "اطلاعات تکمیلی",
+      icon: RefreshCcw,
+      fields: [
+        {
+          name: "workspaces",
+          label: "فضاهای کاری و پروژه‌های مرتبط",
+        },
+      ],
+    },
+  ];
+
+  const handleInputChange = (name: string, value: string | string[]) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  return (
+    <section className="py-32">
+      <div className="container">
+        <div className={cn("flex w-full flex-col gap-8", className)}>
+          <div className="flex flex-col gap-2">
+            <h1 className="text-3xl font-semibold tracking-tight">{title}</h1>
+            <p className="text-sm text-muted-foreground">
+              اطلاعات شرکت را تکمیل کنید تا پروفایل آن در سامانه ایجاد و آماده استفاده شود.
+                                      </p>
+          </div>
+          <form
+            onSubmit={(e) => e.preventDefault()}
+            autoComplete="off"
+            className="flex flex-col gap-8 rounded-lg border bg-muted/50 p-8 shadow-sm"
+          >
+            {FIELD_SECTIONS.map((section, sectionIndex) => (
+              <div
+                key={`section-${sectionIndex}`}
+                className={cn(
+                  "flex flex-col gap-4",
+                  sectionIndex !== FIELD_SECTIONS.length - 1 && "border-b pb-8",
+                )}
+              >
+                <div className="flex items-center gap-2.5">
+                  <div className="flex size-8 items-center justify-center rounded-md bg-background">
+                    <section.icon className="size-4 text-muted-foreground" />
+                  </div>
+                  <h2 className="text-lg font-semibold tracking-tight">
+                    {section.title}
+                  </h2>
+                </div>
+                <div className="grid gap-x-4 gap-y-5 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
+                  {section.fields.map((field, i) => {
+                    const isCombobox = field.type === "combobox";
+                    const isTags = field.type === "tags";
+
+                    return (
+                      <div
+                        key={`companies-create-1-field-${i}-${field.name}`}
+                        className="relative flex w-full flex-col gap-2.5 sm:max-w-xs"
+                      >
+                        <Label
+                          htmlFor={field.name}
+                          className="text-sm font-medium text-foreground"
+                        >
+                          {field.label}
+                          {field.required && (
+                            <span className="ms-1 text-destructive">*</span>
+                          )}
+                        </Label>
+                        {isCombobox && field.options ? (
+                          <FormCombobox
+                            name={field.name}
+                            value={(formData[field.name] as string) || ""}
+                            onChange={(value) =>
+                              handleInputChange(field.name, value)
+                            }
+                            options={field.options}
+                            searchPlaceholder={field.searchPlaceholder}
+                            emptyMessage={field.emptyMessage}
+                            required={field.required}
+                          />
+                        ) : isTags && field.options ? (
+                          <FormTags
+                            name={field.name}
+                            value={(formData[field.name] as string[]) || []}
+                            onChange={(value) =>
+                              handleInputChange(field.name, value)
+                            }
+                            options={field.options}
+                            searchPlaceholder={field.searchPlaceholder}
+                            emptyMessage={field.emptyMessage}
+                            required={field.required}
+                          />
+                        ) : (
+                          <Input
+                            id={field.name}
+                            name={field.name}
+                            value={(formData[field.name] as string) || ""}
+                            onChange={(e) =>
+                              handleInputChange(field.name, e.target.value)
+                            }
+                            required={field.required}
+                            className="bg-background"
+                          />
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+            <div className="flex items-center justify-end gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                className="tracking-tight"
+              >
+                انصراف
+              </Button>
+              <Button type="submit" className="tracking-tight">
+                ثبت اطلاعات و ادامه
+                                            </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CompaniesCreate1 };
diff --git a/blocks/companies-create2.tsx b/blocks/companies-create2.tsx
new file mode 100644
index 0000000..b424f68
--- /dev/null
+++ b/blocks/companies-create2.tsx
@@ -0,0 +1,545 @@
+"use client";
+
+import {
+  Building2,
+  Calendar,
+  Check,
+  ChevronsUpDown,
+  Coins,
+  Facebook,
+  FileText,
+  Instagram,
+  Link,
+  Linkedin,
+  MapPin,
+  Tag,
+  TrendingUp,
+  Twitter,
+  User,
+  Users,
+} from "lucide-react";
+import { useState } from "react";
+
+import {
+  Tags,
+  TagsContent,
+  TagsEmpty,
+  TagsGroup,
+  TagsInput,
+  TagsItem,
+  TagsList,
+  TagsTrigger,
+  TagsValue,
+} from "@/components/kibo-ui/tags";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface ComboboxOption {
+  label: string;
+  value: string;
+}
+
+interface FormComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: ComboboxOption[];
+  name?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  required?: boolean;
+}
+
+interface FormTagsProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  options: ComboboxOption[];
+  name?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  required?: boolean;
+}
+
+const FormCombobox = ({
+  value,
+  onChange,
+  options,
+  name,
+  placeholder = "یک گزینه انتخاب کنید...",
+  searchPlaceholder = "جستجو بر اساس نام...",
+  emptyMessage = "موردی یافت نشد.",
+  required = false,
+}: FormComboboxProps) => {
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = options.find((option) => option.value === value);
+  const displayValue = selectedOption ? selectedOption.label : "";
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger className="w-full outline-none">
+        <div className="relative flex w-full items-center">
+          <Input
+            type="text"
+            name={name}
+            value={displayValue}
+            placeholder={placeholder}
+            required={required}
+            onChange={() => {}}
+            onClick={() => setOpen(true)}
+            className={cn(
+              "cursor-pointer bg-background pe-6",
+              !value && "text-muted-foreground",
+            )}
+          />
+          <div className="pointer-events-auto absolute end-2 flex h-full items-center">
+            <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          </div>
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onChange(currentValue === value ? "" : currentValue);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "me-2 size-4",
+                      value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const FormTags = ({
+  value = [],
+  onChange,
+  options,
+  name,
+  searchPlaceholder = "جستجوی دسته‌بندی...",
+  emptyMessage = "دسته‌بندی‌ای یافت نشد.",
+  required = false,
+}: FormTagsProps) => {
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = (selectedValue: string) => {
+    const newValue = value.includes(selectedValue)
+      ? value.filter((v) => v !== selectedValue)
+      : [...value, selectedValue];
+    onChange(newValue);
+  };
+
+  const handleRemove = (tagToRemove: string) => {
+    onChange(value.filter((v) => v !== tagToRemove));
+  };
+
+  return (
+    <Tags open={open} onOpenChange={setOpen}>
+      <TagsTrigger>
+        {value.length > 0
+          ? value.map((tagValue) => {
+              const option = options.find((opt) => opt.value === tagValue);
+              return (
+                <TagsValue
+                  key={tagValue}
+                  onRemove={() => handleRemove(tagValue)}
+                >
+                  {option?.label || tagValue}
+                </TagsValue>
+              );
+            })
+          : null}
+      </TagsTrigger>
+      <TagsContent>
+        <TagsInput placeholder={searchPlaceholder} />
+        <TagsList>
+          <TagsEmpty>{emptyMessage}</TagsEmpty>
+          <TagsGroup>
+            {options.map((option) => (
+              <TagsItem
+                key={option.value}
+                value={option.value}
+                onSelect={() => handleSelect(option.value)}
+              >
+                <Check
+                  className={cn(
+                    "me-2 size-4",
+                    value.includes(option.value) ? "opacity-100" : "opacity-0",
+                  )}
+                />
+                {option.label}
+              </TagsItem>
+            ))}
+          </TagsGroup>
+        </TagsList>
+      </TagsContent>
+      {required && value.length === 0 && (
+        <input
+          type="hidden"
+          name={name}
+          value=""
+          required
+          aria-invalid="true"
+        />
+      )}
+      {value.map((tagValue) => (
+        <input key={tagValue} type="hidden" name={name} value={tagValue} />
+      ))}
+    </Tags>
+  );
+};
+
+interface CompaniesCreate2Props {
+  title?: string;
+  className?: string;
+}
+
+const CompaniesCreate2 = ({
+  title = "افزودن شرکت",
+  className,
+}: CompaniesCreate2Props) => {
+  const [formData, setFormData] = useState<Record<string, string | string[]>>(
+    {},
+  );
+  const [open, setOpen] = useState(true);
+
+  const companies = [
+    {
+      id: 1,
+      name: "شرکت آکمه",
+      description: "شرکتی پیشرو در ارائه راهکارهای نرم‌افزاری و خدمات دیجیتال",
+      location: "سانفرانسیسکو، آمریکا",
+    },
+    {
+      id: 2,
+      name: "تک‌استارت",
+      description: "فعال در حوزه فناوری، نوآوری و تحول دیجیتال",
+      location: "نیویورک، آمریکا",
+    },
+  ];
+
+  const FIELDS = [
+    {
+      label: "نام شرکت",
+      name: "name",
+      placeholder: "مثال: شرکت فناوری نوآور",
+      icon: Building2,
+      required: true,
+    },
+    {
+      label: "معرفی شرکت",
+      name: "description",
+      placeholder: "معرفی کوتاهی از فعالیت‌ها، محصولات و خدمات شرکت بنویسید...",
+      icon: FileText,
+    },
+    {
+      label: "تیم",
+      name: "team",
+      placeholder: "اعضای مسئول این شرکت را انتخاب کنید...",
+      icon: User,
+      type: "combobox",
+      searchPlaceholder: "جستجوی اعضا...",
+      emptyMessage: "عضوی یافت نشد.",
+      required: true,
+      options: [
+        {
+          label: "علی",
+          value: "alex",
+        },
+        {
+          label: "محمد",
+          value: "john",
+        },
+        {
+          label: "سارا",
+          value: "jane",
+        },
+      ],
+    },
+    {
+      label: "دسته‌بندی‌ها",
+      name: "categories",
+      placeholder: "یک یا چند حوزه فعالیت را انتخاب کنید...",
+      icon: Tag,
+      type: "tags",
+      searchPlaceholder: "جستجوی دسته‌بندی...",
+      emptyMessage: "دسته‌بندی یافت نشد.",
+      options: [
+        {
+          label: "SaaS",
+          value: "saas",
+        },
+        {
+          label: "تجارت الکترونیک",
+          value: "ecommerce",
+        },
+        {
+          label: "فین‌تک",
+          value: "fintech",
+        },
+        {
+          label: "بهداشت و درمان",
+          value: "healthcare",
+        },
+        {
+          label: "آموزش",
+          value: "education",
+        },
+        {
+          label: "سازمانی",
+          value: "enterprise",
+        },
+        {
+          label: "B2B",
+          value: "b2b",
+        },
+        {
+          label: "B2C",
+          value: "b2c",
+        },
+      ],
+    },
+    {
+      label: "موقعیت جغرافیایی",
+      name: "location",
+      placeholder: "مثال: تهران، ایران",
+      icon: MapPin,
+    },
+    {
+      label: "AngelList",
+      name: "angellist",
+      placeholder: "AngelList...",
+      icon: Link,
+    },
+    {
+      label: "Facebook",
+      name: "facebook",
+      placeholder: "Facebook...",
+      icon: Facebook,
+    },
+    {
+      label: "Instagram",
+      name: "instagram",
+      placeholder: "Instagram...",
+      icon: Instagram,
+    },
+    {
+      label: "LinkedIn",
+      name: "linkedin",
+      placeholder: "LinkedIn...",
+      icon: Linkedin,
+    },
+    {
+      label: "Twitter",
+      name: "twitter",
+      placeholder: "Twitter...",
+      icon: Twitter,
+    },
+    {
+      label: "برآورد درآمد تکرارشونده سالانه (ARR)",
+      name: "arr",
+      placeholder: "مثال: ۱۲۰٬۰۰۰ دلار",
+      icon: TrendingUp,
+    },
+    {
+      label: "سرمایه جذب‌شده",
+      name: "funding",
+      placeholder: "مثال: ۱۰ میلیون دلار",
+      icon: Coins,
+    },
+    {
+      label: "تاریخ تأسیس",
+      name: "founded_date",
+      placeholder: "مثال: ۱۳۹۸/۰۶/۱۵",
+      icon: Calendar,
+    },
+    {
+      label: "محدوده تعداد کارکنان",
+      name: "employee_range",
+      placeholder: "مثال: ۵۰ تا ۱۰۰ نفر",
+      icon: Users,
+    },
+  ];
+
+  const handleInputChange = (name: string, value: string | string[]) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  return (
+    <div className="relative min-h-screen">
+      <div className="container py-32">
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold tracking-tight">شرکت‌ها</h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            اطلاعات شرکت‌ها را ثبت، ویرایش و مدیریت کنید.
+                                </p>
+        </div>
+        <div className="mb-6 overflow-hidden rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>نام</TableHead>
+                <TableHead>معرفی شرکت</TableHead>
+                <TableHead>موقعیت جغرافیایی</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {companies.map((company) => (
+                <TableRow key={company.id}>
+                  <TableCell className="font-medium">{company.name}</TableCell>
+                  <TableCell>{company.description}</TableCell>
+                  <TableCell>{company.location}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <Button>ثبت شرکت</Button>
+          </SheetTrigger>
+          <SheetContent
+            side="right"
+            className={cn(
+              "flex h-full w-full flex-col gap-0 overflow-y-auto bg-muted p-0 sm:max-w-lg",
+              className,
+            )}
+          >
+            <SheetHeader className="border-b bg-background px-6 py-4">
+              <SheetTitle className="text-xl font-semibold">
+                {title}
+              </SheetTitle>
+              <SheetDescription className="sr-only">
+                یک شرکت جدید به سامانه اضافه کرده و اطلاعات آن را ثبت کنید.
+                                            </SheetDescription>
+            </SheetHeader>
+            <form
+              autoComplete="off"
+              className="flex flex-1 flex-col gap-2 overflow-y-auto px-6 py-6"
+            >
+              {FIELDS.map((field, i) => {
+                const isCombobox = field.type === "combobox";
+                const isTags = field.type === "tags";
+
+                return (
+                  <div
+                    key={`companies-create-2-field-${i}-${field.label}`}
+                    className="relative grid w-full grid-cols-4 gap-4"
+                  >
+                    <div className="col-span-2 flex h-full items-center gap-2 text-foreground/80 sm:col-span-1">
+                      <field.icon className="size-4 shrink-0" />
+                      <Label
+                        htmlFor={field.name}
+                        className={cn(
+                          "min-w-0 truncate leading-loose",
+                          field.required &&
+                            "after:ms-1 after:text-destructive after:content-['*']",
+                        )}
+                      >
+                        {field.label}
+                      </Label>
+                    </div>
+
+                    <div className="col-span-2 shrink-0 sm:col-span-3">
+                      {isCombobox && field.options ? (
+                        <FormCombobox
+                          name={field.name}
+                          value={(formData[field.name] as string) || ""}
+                          onChange={(value) =>
+                            handleInputChange(field.name, value)
+                          }
+                          options={field.options}
+                          placeholder={field.placeholder}
+                          searchPlaceholder={field.searchPlaceholder}
+                          emptyMessage={field.emptyMessage}
+                          required={field.required}
+                        />
+                      ) : isTags && field.options ? (
+                        <FormTags
+                          name={field.name}
+                          value={(formData[field.name] as string[]) || []}
+                          onChange={(value) =>
+                            handleInputChange(field.name, value)
+                          }
+                          options={field.options}
+                          searchPlaceholder={field.searchPlaceholder}
+                          emptyMessage={field.emptyMessage}
+                          required={field.required}
+                        />
+                      ) : (
+                        <Input
+                          name={field.name}
+                          placeholder={field.placeholder}
+                          value={(formData[field.name] as string) || ""}
+                          onChange={(e) =>
+                            handleInputChange(field.name, e.target.value)
+                          }
+                          required={field.required}
+                          className="bg-background"
+                        />
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+              <div className="mt-6 flex justify-end border-t pt-6">
+                <Button type="submit">ثبت</Button>
+              </div>
+            </form>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </div>
+  );
+};
+
+export { CompaniesCreate2 };
diff --git a/blocks/companies-create3.tsx b/blocks/companies-create3.tsx
new file mode 100644
index 0000000..1ea6ad6
--- /dev/null
+++ b/blocks/companies-create3.tsx
@@ -0,0 +1,555 @@
+"use client";
+
+import {
+  Building2,
+  Calendar,
+  Check,
+  ChevronsUpDown,
+  Coins,
+  Facebook,
+  FileText,
+  Instagram,
+  Link,
+  Linkedin,
+  MapPin,
+  Tag,
+  TrendingUp,
+  Twitter,
+  User,
+  Users,
+} from "lucide-react";
+import { useState } from "react";
+
+import {
+  Tags,
+  TagsContent,
+  TagsEmpty,
+  TagsGroup,
+  TagsInput,
+  TagsItem,
+  TagsList,
+  TagsTrigger,
+  TagsValue,
+} from "@/components/kibo-ui/tags";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface ComboboxOption {
+  label: string;
+  value: string;
+}
+
+interface FormComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: ComboboxOption[];
+  name?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  required?: boolean;
+}
+
+interface FormTagsProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  options: ComboboxOption[];
+  name?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  required?: boolean;
+}
+
+const FormCombobox = ({
+  value,
+  onChange,
+  options,
+  name,
+  placeholder = "یک مورد را انتخاب کنید...",
+  searchPlaceholder = "جستجو بر اساس نام...",
+  emptyMessage = "موردی یافت نشد.",
+  required = false,
+}: FormComboboxProps) => {
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = options.find((option) => option.value === value);
+  const displayValue = selectedOption ? selectedOption.label : "";
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger className="w-full outline-none">
+        <div className="relative flex w-full items-center">
+          <Input
+            type="text"
+            name={name}
+            value={displayValue}
+            placeholder={placeholder}
+            required={required}
+            onChange={() => {}}
+            onClick={() => setOpen(true)}
+            className={cn(
+              "cursor-pointer bg-background pe-6",
+              !value && "text-muted-foreground",
+            )}
+          />
+          <div className="pointer-events-auto absolute end-2 flex h-full items-center">
+            <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          </div>
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onChange(currentValue === value ? "" : currentValue);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "me-2 size-4",
+                      value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const FormTags = ({
+  value = [],
+  onChange,
+  options,
+  name,
+  searchPlaceholder = "جستجوی دسته‌بندی...",
+  emptyMessage = "دسته‌بندی‌ای یافت نشد.",
+  required = false,
+}: FormTagsProps) => {
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = (selectedValue: string) => {
+    const newValue = value.includes(selectedValue)
+      ? value.filter((v) => v !== selectedValue)
+      : [...value, selectedValue];
+    onChange(newValue);
+  };
+
+  const handleRemove = (tagToRemove: string) => {
+    onChange(value.filter((v) => v !== tagToRemove));
+  };
+
+  return (
+    <Tags open={open} onOpenChange={setOpen}>
+      <TagsTrigger>
+        {value.length > 0
+          ? value.map((tagValue) => {
+              const option = options.find((opt) => opt.value === tagValue);
+              return (
+                <TagsValue
+                  key={tagValue}
+                  onRemove={() => handleRemove(tagValue)}
+                >
+                  {option?.label || tagValue}
+                </TagsValue>
+              );
+            })
+          : null}
+      </TagsTrigger>
+      <TagsContent>
+        <TagsInput placeholder={searchPlaceholder} />
+        <TagsList>
+          <TagsEmpty>{emptyMessage}</TagsEmpty>
+          <TagsGroup>
+            {options.map((option) => (
+              <TagsItem
+                key={option.value}
+                value={option.value}
+                onSelect={() => handleSelect(option.value)}
+              >
+                <Check
+                  className={cn(
+                    "me-2 size-4",
+                    value.includes(option.value) ? "opacity-100" : "opacity-0",
+                  )}
+                />
+                {option.label}
+              </TagsItem>
+            ))}
+          </TagsGroup>
+        </TagsList>
+      </TagsContent>
+      {required && value.length === 0 && (
+        <input
+          type="hidden"
+          name={name}
+          value=""
+          required
+          aria-invalid="true"
+        />
+      )}
+      {value.map((tagValue) => (
+        <input key={tagValue} type="hidden" name={name} value={tagValue} />
+      ))}
+    </Tags>
+  );
+};
+
+interface CompaniesCreate3Props {
+  title?: string;
+  className?: string;
+}
+
+const CompaniesCreate3 = ({
+  title = "ثبت شرکت",
+  className,
+}: CompaniesCreate3Props) => {
+  const [formData, setFormData] = useState<Record<string, string | string[]>>(
+    {},
+  );
+  const [open, setOpen] = useState(false);
+
+  const companies = [
+    {
+      id: 1,
+      name: "شرکت آکمه",
+      description: "شرکتی فعال در توسعه راهکارهای نرم‌افزاری و خدمات دیجیتال",
+      location: "سانفرانسیسکو، آمریکا",
+    },
+    {
+      id: 2,
+      name: "تک‌استارت",
+      description: "فعال در حوزه فناوری، نوآوری و تحول دیجیتال",
+      location: "نیویورک، آمریکا",
+    },
+  ];
+
+  const FIELDS = [
+    {
+      label: "نام رسمی شرکت",
+      name: "name",
+      placeholder: "مثال: شرکت فناوری نوآور",
+      icon: Building2,
+      required: true,
+    },
+    {
+      label: "معرفی شرکت",
+      name: "description",
+      placeholder: "معرفی کوتاهی از فعالیت‌ها، محصولات و خدمات شرکت بنویسید...",
+      icon: FileText,
+    },
+    {
+      label: "تیم",
+      name: "team",
+      placeholder: "اعضای مسئول این شرکت را انتخاب کنید...",
+      icon: User,
+      type: "combobox",
+      searchPlaceholder: "جستجوی اعضا...",
+      emptyMessage: "عضو تیمی یافت نشد.",
+      required: true,
+      options: [
+        {
+          label: "علی",
+          value: "alex",
+        },
+        {
+          label: "محمد",
+          value: "john",
+        },
+        {
+          label: "سارا",
+          value: "jane",
+        },
+      ],
+    },
+    {
+      label: "دسته‌بندی‌ها",
+      name: "categories",
+      placeholder: "یک یا چند حوزه فعالیت را انتخاب کنید...",
+      icon: Tag,
+      type: "tags",
+      searchPlaceholder: "جستجوی دسته‌بندی...",
+      emptyMessage: "دسته‌بندی یافت نشد.",
+      options: [
+        {
+          label: "SaaS",
+          value: "saas",
+        },
+        {
+          label: "تجارت الکترونیک",
+          value: "ecommerce",
+        },
+        {
+          label: "فین‌تک",
+          value: "fintech",
+        },
+        {
+          label: "بهداشت و درمان",
+          value: "healthcare",
+        },
+        {
+          label: "آموزش",
+          value: "education",
+        },
+        {
+          label: "سازمانی",
+          value: "enterprise",
+        },
+        {
+          label: "B2B",
+          value: "b2b",
+        },
+        {
+          label: "B2C",
+          value: "b2c",
+        },
+      ],
+    },
+    {
+      label: "موقعیت جغرافیایی",
+      name: "location",
+      placeholder: "مثال: تهران، ایران",
+      icon: MapPin,
+    },
+    {
+      label: "AngelList",
+      name: "angellist",
+      placeholder: "AngelList...",
+      icon: Link,
+    },
+    {
+      label: "Facebook",
+      name: "facebook",
+      placeholder: "Facebook...",
+      icon: Facebook,
+    },
+    {
+      label: "Instagram",
+      name: "instagram",
+      placeholder: "Instagram...",
+      icon: Instagram,
+    },
+    {
+      label: "LinkedIn",
+      name: "linkedin",
+      placeholder: "LinkedIn...",
+      icon: Linkedin,
+    },
+    {
+      label: "Twitter",
+      name: "twitter",
+      placeholder: "Twitter...",
+      icon: Twitter,
+    },
+    {
+      label: "برآورد درآمد تکرارشونده سالانه (ARR)",
+      name: "arr",
+      placeholder: "مثال: ۱۲۰٬۰۰۰ دلار",
+      icon: TrendingUp,
+    },
+    {
+      label: "سرمایه جذب‌شده",
+      name: "funding",
+      placeholder: "مثال: ۱۰ میلیون دلار",
+      icon: Coins,
+    },
+    {
+      label: "تاریخ تأسیس",
+      name: "founded_date",
+      placeholder: "مثال: ۱۳۹۸/۰۶/۱۵",
+      icon: Calendar,
+    },
+    {
+      label: "محدوده تعداد کارکنان",
+      name: "employee_range",
+      placeholder: "مثال: ۵۰ تا ۱۰۰ نفر",
+      icon: Users,
+    },
+  ];
+
+  const handleInputChange = (name: string, value: string | string[]) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  return (
+    <div className="relative min-h-screen">
+      <div className="container py-32">
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold tracking-tight">شرکت‌ها</h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            اطلاعات شرکت‌ها را ثبت، جستجو و مدیریت کنید.
+                                </p>
+        </div>
+        <div className="mb-6 overflow-hidden rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>نام شرکت</TableHead>
+                <TableHead>معرفی شرکت</TableHead>
+                <TableHead>موقعیت جغرافیایی</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {companies.map((company) => (
+                <TableRow key={company.id}>
+                  <TableCell className="font-medium">{company.name}</TableCell>
+                  <TableCell>{company.description}</TableCell>
+                  <TableCell>{company.location}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>ثبت شرکت</Button>
+          </DialogTrigger>
+          <DialogContent
+            className={cn(
+              "max-h-[90vh] max-w-2xl overflow-y-auto bg-muted",
+              className,
+            )}
+          >
+            <DialogHeader>
+              <DialogTitle className="text-xl font-semibold">
+                {title}
+              </DialogTitle>
+              <DialogDescription>
+                اطلاعات یک شرکت جدید را در سامانه ثبت کنید.
+                                            </DialogDescription>
+            </DialogHeader>
+            <form
+              autoComplete="off"
+              className="flex flex-col gap-2 pt-4"
+              onSubmit={(e) => {
+                e.preventDefault();
+                setOpen(false);
+              }}
+            >
+              {FIELDS.map((field, i) => {
+                const isCombobox = field.type === "combobox";
+                const isTags = field.type === "tags";
+
+                return (
+                  <div
+                    key={`companies-create-3-field-${i}-${field.label}`}
+                    className="relative grid w-full grid-cols-4 gap-4"
+                  >
+                    <div className="col-span-2 flex h-full items-center gap-2 text-foreground/80 sm:col-span-1">
+                      <field.icon className="size-4 shrink-0" />
+                      <Label
+                        htmlFor={field.name}
+                        className={cn(
+                          "min-w-0 truncate leading-loose",
+                          field.required &&
+                            "after:ms-1 after:text-destructive after:content-['*']",
+                        )}
+                      >
+                        {field.label}
+                      </Label>
+                    </div>
+
+                    <div className="col-span-2 shrink-0 sm:col-span-3">
+                      {isCombobox && field.options ? (
+                        <FormCombobox
+                          name={field.name}
+                          value={(formData[field.name] as string) || ""}
+                          onChange={(value) =>
+                            handleInputChange(field.name, value)
+                          }
+                          options={field.options}
+                          placeholder={field.placeholder}
+                          searchPlaceholder={field.searchPlaceholder}
+                          emptyMessage={field.emptyMessage}
+                          required={field.required}
+                        />
+                      ) : isTags && field.options ? (
+                        <FormTags
+                          name={field.name}
+                          value={(formData[field.name] as string[]) || []}
+                          onChange={(value) =>
+                            handleInputChange(field.name, value)
+                          }
+                          options={field.options}
+                          searchPlaceholder={field.searchPlaceholder}
+                          emptyMessage={field.emptyMessage}
+                          required={field.required}
+                        />
+                      ) : (
+                        <Input
+                          name={field.name}
+                          placeholder={field.placeholder}
+                          value={(formData[field.name] as string) || ""}
+                          onChange={(e) =>
+                            handleInputChange(field.name, e.target.value)
+                          }
+                          required={field.required}
+                          className="bg-background"
+                        />
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+              <div className="mt-6 flex justify-end gap-3 border-t pt-6">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setOpen(false)}
+                >
+                  انصراف
+                </Button>
+                <Button type="submit">ثبت</Button>
+              </div>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+};
+
+export { CompaniesCreate3 };
diff --git a/blocks/companies-create4.tsx b/blocks/companies-create4.tsx
new file mode 100644
index 0000000..e448960
--- /dev/null
+++ b/blocks/companies-create4.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { AlignLeft, Globe, Mail, MapPin, Phone, Plus } from "lucide-react";
+import { useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface CompaniesCreate4Props {
+  className?: string;
+}
+
+const CompaniesCreate4 = ({ className }: CompaniesCreate4Props) => {
+  const [formData, setFormData] = useState<Record<string, string>>({});
+  const [logo, setLogo] = useState<File | null>(null);
+  const logoInputRef = useRef<HTMLInputElement>(null);
+
+  const FIELDS = [
+    {
+      label: "معرفی شرکت",
+      name: "description",
+      placeholder: "معرفی کوتاهی از فعالیت‌ها، محصولات و خدمات شرکت بنویسید...",
+      icon: AlignLeft,
+      type: "text",
+    },
+    {
+      label: "ایمیل",
+      name: "email",
+      type: "email",
+      placeholder: "info@example.ir",
+      icon: Mail,
+      required: true,
+    },
+    {
+      label: "تلفن",
+      name: "phone",
+      type: "tel",
+      placeholder: "۰۹۱۲ ۳۴۵ ۶۷۸۹",
+      icon: Phone,
+    },
+    {
+      label: "آدرس",
+      name: "address",
+      type: "text",
+      placeholder: "تهران، خیابان ولیعصر، پلاک ۱۲",
+      icon: MapPin,
+    },
+    {
+      label: "وب‌سایت",
+      name: "website",
+      type: "url",
+      placeholder: "https://example.ir",
+      icon: Globe,
+    },
+  ];
+
+  const handleInputChange = (name: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  return (
+    <section className="py-32">
+      <div className="container flex justify-center">
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button>ثبت شرکت</Button>
+          </DialogTrigger>
+          <DialogContent
+            showCloseButton={false}
+            className={cn(
+              "w-full rounded-lg bg-background p-0 sm:max-w-md",
+              className,
+            )}
+          >
+            <DialogTitle className="hidden">ثبت شرکت</DialogTitle>
+            <form autoComplete="off" onSubmit={(e) => e.preventDefault()}>
+              <div className="flex flex-col gap-4 p-4 !pb-0 sm:flex-row sm:items-center">
+                <input
+                  ref={logoInputRef}
+                  type="file"
+                  className="hidden"
+                  accept="image/*"
+                  onChange={(e) => setLogo(e.target.files?.[0] || null)}
+                />
+                <div
+                  role="input"
+                  tabIndex={0}
+                  onClick={() => logoInputRef.current?.click()}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      logoInputRef.current?.click();
+                    }
+                  }}
+                  className="flex size-26 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border text-muted-foreground sm:size-16"
+                >
+                  {!logo ? (
+                    <Plus className="size-8 sm:size-6" />
+                  ) : (
+                    <img
+                      src={URL.createObjectURL(logo)}
+                      alt="لوگوی شرکت"
+                      className="size-full object-cover"
+                    />
+                  )}
+                </div>
+                <Input
+                  type="text"
+                  name="name"
+                  placeholder="نام رسمی شرکت"
+                  onChange={(e) => handleInputChange("name", e.target.value)}
+                  required
+                  className={cn(
+                    "h-auto rounded-none border-x-0 border-t-0 !bg-transparent p-0 py-1.5 shadow-none !ring-0 !outline-none focus:border-b sm:border-b-transparent sm:!text-xl sm:focus:!border-input/70",
+                  )}
+                />
+              </div>
+              <div className="flex flex-col gap-4 p-4">
+                {FIELDS.map((field, i) => {
+                  return (
+                    <div
+                      key={`companies-create-1-field-${i}-${field.label}`}
+                      className="relative grid w-full gap-1"
+                    >
+                      <div className="flex h-full items-center gap-2 text-foreground/80">
+                        <field.icon className="size-4 shrink-0" />
+                        <Label
+                          htmlFor={field.name}
+                          className={cn(
+                            "min-w-0 truncate leading-loose",
+                            field.required &&
+                              "after:ms-1 after:text-destructive after:content-['*']",
+                          )}
+                        >
+                          {field.label}
+                        </Label>
+                      </div>
+
+                      <div className="shrink-0">
+                        <Input
+                          name={field.name}
+                          placeholder={field.placeholder}
+                          value={formData[field.name] || ""}
+                          onChange={(e) =>
+                            handleInputChange(field.name, e.target.value)
+                          }
+                          type={field.type}
+                          required={field.required}
+                          className={cn(
+                            "h-auto rounded-none border-x-0 border-t-0 !bg-transparent p-0 py-1.5 shadow-none !ring-0 !outline-none focus:border-b sm:border-b-transparent sm:focus:!border-input/70",
+                          )}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="flex w-full p-4 sm:justify-end sm:border-t">
+                <Button type="submit">ایجاد پروفایل</Button>
+              </div>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </section>
+  );
+};
+
+export { CompaniesCreate4 };
diff --git a/blocks/companies-create5.tsx b/blocks/companies-create5.tsx
new file mode 100644
index 0000000..7ea205b
--- /dev/null
+++ b/blocks/companies-create5.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface FileInputProps {
+  onChange?: (file: File | null) => void;
+  value?: File | null;
+  alt?: string;
+  className?: string;
+}
+
+const FileInput = ({
+  onChange,
+  value,
+  alt,
+  className,
+  ...props
+}: FileInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        className="hidden"
+        accept="image/*"
+        onChange={(e) => onChange?.(e.target.files?.[0] || null)}
+        {...props}
+      />
+      <div
+        role="input"
+        tabIndex={0}
+        onClick={() => inputRef.current?.click()}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            inputRef.current?.click();
+          }
+        }}
+        className={cn(
+          "flex size-26 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border text-muted-foreground shadow-xs sm:size-34",
+          className,
+        )}
+      >
+        {!value ? (
+          <Plus />
+        ) : (
+          <img
+            src={URL.createObjectURL(value)}
+            alt={alt}
+            className="size-full object-cover"
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+interface CompaniesCreate5Props {
+  className?: string;
+  title?: string;
+}
+
+const CompaniesCreate5 = ({
+  className,
+  title = "ایجاد پروفایل شرکت",
+}: CompaniesCreate5Props) => {
+  const [formData, setFormData] = useState<Record<string, string>>({});
+  const [logo, setLogo] = useState<File | null>(null);
+
+  const FIELDS = [
+    {
+      label: "تلفن",
+      name: "phone",
+      type: "tel",
+      placeholder: "۰۹۱۲ ۳۴۵ ۶۷۸۹",
+    },
+    {
+      label: "آدرس",
+      name: "address",
+      type: "text",
+      placeholder: "تهران، خیابان ولیعصر، پلاک ۱۲",
+    },
+    {
+      label: "وب‌سایت",
+      name: "website",
+      type: "url",
+      placeholder: "https://example.ir",
+    },
+  ];
+
+  const handleInputChange = (name: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  return (
+    <section className="py-32">
+      <div className="container flex justify-center">
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button>ثبت شرکت</Button>
+          </DialogTrigger>
+          <DialogContent
+            showCloseButton={false}
+            className={cn(
+              "w-full rounded-lg bg-background p-0 md:max-w-3xl",
+              className,
+            )}
+          >
+            <DialogTitle className="px-6 pt-6">{title}</DialogTitle>
+            <form
+              autoComplete="off"
+              onSubmit={(e) => e.preventDefault()}
+              className="mt-2"
+            >
+              <div className="flex flex-col gap-6 px-6 md:flex-row md:items-center">
+                <FileInput
+                  onChange={(file) => setLogo(file)}
+                  value={logo}
+                  alt="لوگوی شرکت"
+                />
+                <div className="grid w-full gap-x-6 gap-y-4 md:grid-cols-2">
+                  <div className="relative grid w-full gap-2">
+                    <div className="flex h-full items-center gap-2 text-foreground/80">
+                      <Label
+                        htmlFor="name"
+                        className={cn(
+                          "min-w-0 truncate",
+                          "after:ms-1 after:text-destructive after:content-['*']",
+                        )}
+                      >
+                        نام شرکت
+                                                                    </Label>
+                    </div>
+                    <Input
+                      name="name"
+                      placeholder="نام رسمی شرکت"
+                      value={formData["name"] || ""}
+                      onChange={(e) =>
+                        handleInputChange("name", e.target.value)
+                      }
+                      type="text"
+                      required={true}
+                      className="!bg-transparent"
+                    />
+                  </div>
+                  <div className="relative grid w-full gap-2">
+                    <div className="flex h-full items-center gap-2 text-foreground/80">
+                      <Label
+                        htmlFor="email"
+                        className={cn(
+                          "min-w-0 truncate",
+                          "after:ms-1 after:text-destructive after:content-['*']",
+                        )}
+                      >
+                        ایمیل
+                      </Label>
+                    </div>
+                    <Input
+                      name="email"
+                      placeholder="info@example.ir"
+                      value={formData["email"] || ""}
+                      onChange={(e) =>
+                        handleInputChange("email", e.target.value)
+                      }
+                      type="email"
+                      required={true}
+                      className="!bg-transparent"
+                    />
+                  </div>
+                  <div className="relative grid w-full gap-2 md:col-span-2">
+                    <div className="flex h-full items-center gap-2 text-foreground/80">
+                      <Label htmlFor="description" className="min-w-0 truncate">
+                        معرفی شرکت
+                                                                    </Label>
+                    </div>
+                    <Input
+                      name="description"
+                      placeholder="معرفی کوتاهی از فعالیت‌ها، محصولات و خدمات شرکت بنویسید..."
+                      value={formData["description"] || ""}
+                      onChange={(e) =>
+                        handleInputChange("description", e.target.value)
+                      }
+                      type="text"
+                      className="!bg-transparent"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="grid gap-6 px-6 pt-4 pb-8 md:grid-cols-3">
+                {FIELDS.map((field, i) => {
+                  return (
+                    <div
+                      key={`companies-create-5-field-${i}-${field.label}`}
+                      className="relative grid w-full gap-2"
+                    >
+                      <div className="flex h-full items-center gap-2 text-foreground/80">
+                        <Label
+                          htmlFor={field.name}
+                          className="min-w-0 truncate"
+                        >
+                          {field.label}
+                        </Label>
+                      </div>
+                      <Input
+                        name={field.name}
+                        placeholder={field.placeholder}
+                        value={formData[field.name] || ""}
+                        onChange={(e) =>
+                          handleInputChange(field.name, e.target.value)
+                        }
+                        type={field.type}
+                        className="!bg-transparent"
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="flex w-full px-6 py-4 sm:justify-end sm:border-t">
+                <Button type="submit">ایجاد پروفایل</Button>
+              </div>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </section>
+  );
+};
+
+export { CompaniesCreate5 };
diff --git a/blocks/companies-detail1.tsx b/blocks/companies-detail1.tsx
new file mode 100644
index 0000000..fd8322e
--- /dev/null
+++ b/blocks/companies-detail1.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import type { LucideProps } from "lucide-react";
+import {
+  Globe,
+  IdCard,
+  MapPin,
+  NotepadText,
+  Tag,
+  User,
+  Users,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface Owner {
+  name: string;
+  image: string;
+}
+
+interface Company {
+  id: number;
+  name: string;
+  description: string;
+  location: string;
+  domains: string[];
+  team: number;
+  categories: string[];
+  owner: Owner;
+}
+
+interface CompanyInfo {
+  icon: React.ForwardRefExoticComponent<
+    Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
+  >;
+  label: string;
+  value?: string | string[] | number;
+  cell?: React.ReactNode;
+}
+
+const CompanyInfoItem = ({ label, value, cell }: CompanyInfo) => {
+  return (
+    <div className="hide-scrollbar flex items-center gap-2 overflow-x-auto">
+      {cell ? (
+        cell
+      ) : Array.isArray(value) ? (
+        value.map((it: string, i: number) => {
+          return <Badge key={`badge-${label}-${i}`}>{it}</Badge>;
+        })
+      ) : (
+        <p className="font-medium text-nowrap">{value}</p>
+      )}
+    </div>
+  );
+};
+
+interface CompanyDetailCardProps {
+  company: Company;
+}
+
+const CompanyDetailCard = ({ company }: CompanyDetailCardProps) => {
+  const info: CompanyInfo[] = [
+    {
+      icon: Globe,
+      label: "دامنه‌های اینترنتی",
+      value: company.domains,
+    },
+    {
+      icon: IdCard,
+      label: "نام شرکت",
+      value: company.name,
+    },
+    {
+      icon: NotepadText,
+      label: "معرفی شرکت",
+      value: company.description,
+    },
+    {
+      icon: Users,
+      label: "تیم",
+      value: `${company.team.toLocaleString("fa-IR")} نفر`,
+    },
+    {
+      icon: Tag,
+      label: "دسته‌بندی‌ها",
+      value: company.categories,
+    },
+    {
+      icon: MapPin,
+      label: "موقعیت جغرافیایی",
+      value: company.location,
+    },
+    {
+      icon: User,
+      label: "مدیر مسئول",
+      cell: (
+        <Badge variant="outline">
+          <img
+            src={company.owner.image}
+            alt={company.owner.name}
+            className="size-4 rounded-full"
+          />
+          {company.owner.name}
+        </Badge>
+      ),
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-8 px-4 py-4 md:px-6">
+      <p className="text-lg font-semibold">اطلاعات شرکت</p>
+
+      <ul className="space-y-4">
+        {info.map((item, i) => {
+          return (
+            <li
+              className="flex justify-between gap-6 text-sm"
+              key={`company-detail-card-info-${i}`}
+            >
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <item.icon className="size-4" />
+                <span>{item.label}</span>
+              </div>
+              <CompanyInfoItem {...item} />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+interface CompaniesDetail1Props {
+  className?: string;
+  companies: Company[];
+}
+
+const CompaniesDetail1 = ({
+  companies = [
+    {
+      id: 1,
+      name: "شرکت آکمه",
+      description: "شرکتی فعال در توسعه راهکارهای نرم‌افزاری و خدمات دیجیتال",
+      location: "سانفرانسیسکو، آمریکا",
+      domains: ["acmecorp.com", "acme.io"],
+      team: 125,
+      categories: ["فناوری", "سازمانی"],
+      owner: {
+        name: "محمد احمدی",
+        image: "https://ShadcnBlocks/images/block/avatar-1.webp",
+      },
+    },
+    {
+      id: 2,
+      name: "تک‌استارت",
+      description: "فعال در حوزه فناوری، نوآوری و تحول دیجیتال",
+      location: "نیویورک، آمریکا",
+      domains: ["techstart.com"],
+      team: 45,
+      categories: ["SaaS", "استارتاپ"],
+      owner: {
+        name: "سارا محمدی",
+        image: "https://ShadcnBlocks/images/block/avatar-2.webp",
+      },
+    },
+    {
+      id: 3,
+      name: "کلودناین",
+      description: "ارائه خدمات زیرساخت ابری، DevOps و استقرار سامانه‌ها",
+      location: "سیاتل، آمریکا",
+      domains: ["cloudnine.io", "c9solutions.com"],
+      team: 89,
+      categories: ["ابر", "زیرساخت"],
+      owner: {
+        name: "علی رضایی",
+        image: "https://ShadcnBlocks/images/block/avatar-3.webp",
+      },
+    },
+    {
+      id: 4,
+      name: "گرین‌لف",
+      description: "راهکارهای تحلیل داده و هوش تجاری برای سازمان‌ها",
+      location: "آستین، آمریکا",
+      domains: ["greenleaf.ai"],
+      team: 32,
+      categories: ["تحلیل داده", "پایداری"],
+      owner: {
+        name: "مریم کریمی",
+        image: "https://ShadcnBlocks/images/block/avatar-4.webp",
+      },
+    },
+    {
+      id: 5,
+      name: "نوا دیجیتال",
+      description: "ارائه خدمات جامع بازاریابی دیجیتال و توسعه برند",
+      location: "لس آنجلس، آمریکا",
+      domains: ["novadigital.com", "nova.agency"],
+      team: 67,
+      categories: ["بازاریابی", "آژانس"],
+      owner: {
+        name: "داوود حسینی",
+        image: "https://ShadcnBlocks/images/block/avatar-5.webp",
+      },
+    },
+  ],
+  className,
+}: CompaniesDetail1Props) => {
+  const [selectedCompany, setSelectedCompany] = useState<Company | null>(null);
+
+  return (
+    <section>
+      <div className="container py-32">
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold tracking-tight">شرکت‌ها</h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            اطلاعات شرکت‌ها را ثبت، جستجو و مدیریت کنید.
+                                </p>
+        </div>
+        <div className="mb-6 overflow-hidden rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>نام شرکت</TableHead>
+                <TableHead>معرفی شرکت</TableHead>
+                <TableHead>موقعیت جغرافیایی</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {companies.map((company) => (
+                <TableRow
+                  key={company.id}
+                  className="cursor-pointer"
+                  onClick={() => setSelectedCompany(company)}
+                >
+                  <TableCell className="font-medium">{company.name}</TableCell>
+                  <TableCell>{company.description}</TableCell>
+                  <TableCell>{company.location}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        <Sheet
+          open={!!selectedCompany}
+          onOpenChange={(open) => !open && setSelectedCompany(null)}
+        >
+          <SheetContent
+            side="right"
+            className={cn("bg-muted sm:max-w-lg", className)}
+          >
+            {selectedCompany && (
+              <>
+                <SheetHeader className="sr-only">
+                  <SheetTitle>{selectedCompany.name}</SheetTitle>
+                  <SheetDescription>
+                    مشاهده اطلاعات {selectedCompany.name}
+                  </SheetDescription>
+                </SheetHeader>
+                <CompanyDetailCard company={selectedCompany} />
+              </>
+            )}
+          </SheetContent>
+        </Sheet>
+      </div>
+    </section>
+  );
+};
+
+export { CompaniesDetail1 };
diff --git a/blocks/companies-detail2.tsx b/blocks/companies-detail2.tsx
new file mode 100644
index 0000000..d9cf187
--- /dev/null
+++ b/blocks/companies-detail2.tsx
@@ -0,0 +1,297 @@
+"use client";
+
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface Company {
+  id: number;
+  name: string;
+  logo: string;
+  description: string;
+  headquarters: string;
+  website: string;
+  employees: number;
+  industry: string;
+  founded: number;
+  funding: string;
+  status: string;
+  mission: string;
+  techStack: string[];
+}
+
+interface CompanyInfo {
+  label: string;
+  value?: string | string[] | number;
+  cell?: React.ReactNode;
+}
+
+const CompanyDetailValueCard = ({ label, value, cell }: CompanyInfo) => {
+  return (
+    <div className="hide-scrollbar flex flex-wrap items-center gap-2">
+      {cell ? (
+        cell
+      ) : Array.isArray(value) ? (
+        value.map((it: string, i: number) => {
+          return <Badge key={`badge-${label}-${i}`}>{it}</Badge>;
+        })
+      ) : (
+        <p className="font-medium">{value}</p>
+      )}
+    </div>
+  );
+};
+
+interface CompanyDetailsCardProps {
+  company: Company;
+}
+
+const CompanyDetailsCard = ({ company }: CompanyDetailsCardProps) => {
+  const info: CompanyInfo[] = [
+    {
+      label: "مأموریت",
+      value: company.mission,
+    },
+    {
+      label: "صنعت",
+      value: company.industry,
+    },
+    {
+      label: "وضعیت",
+      cell: (
+        <Badge
+          variant={
+            company.status === "فعال"
+              ? "default"
+              : company.status === "عرضه عمومی"
+                ? "secondary"
+                : "outline"
+          }
+        >
+          {company.status}
+        </Badge>
+      ),
+    },
+    {
+      label: "سال تأسیس",
+      value: company.founded.toLocaleString("fa-IR"),
+    },
+    {
+      label: "دفتر مرکزی",
+      value: company.headquarters,
+    },
+    {
+      label: "وب‌سایت",
+      value: company.website,
+    },
+    {
+      label: "کارکنان",
+      value: `${company.employees.toLocaleString("fa-IR")} نفر`,
+    },
+    {
+      label: "میزان سرمایه‌گذاری",
+      value: company.funding,
+    },
+    {
+      label: "فناوری‌های مورد استفاده",
+      value: company.techStack,
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-8 overflow-y-auto px-4 py-4 md:px-6">
+      <div className="flex gap-4">
+        <img src={company.logo} alt={company.name} className="size-12" />
+        <div>
+          <p className="text-xl font-semibold">{company.name}</p>
+          <p className="text-sm">{company.description}</p>
+        </div>
+      </div>
+
+      <ul className="space-y-8">
+        {info.map((item, i) => {
+          return (
+            <li
+              className="flex flex-col gap-2 text-sm"
+              key={`company-detail-card-info-${i}`}
+            >
+              <p className="text-muted-foreground">{item.label}</p>
+
+              <CompanyDetailValueCard {...item} />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+interface CompaniesDetail2Props {
+  className?: string;
+  companies: Company[];
+}
+
+const CompaniesDetail2 = ({
+  companies = [
+    {
+      id: 1,
+      name: "Vercel",
+      logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      description: "پلتفرم ابری برای توسعه، استقرار و میزبانی سریع برنامه‌های وب",
+      headquarters: "🇺🇸 سانفرانسیسکو، آمریکا",
+      website: "vercel.com",
+      employees: 450,
+      industry: "ابزار توسعه",
+      founded: 2015,
+      funding: "۳۱۳ میلیون دلار",
+      status: "فعال",
+      mission:
+        "ارائه بهترین تجربه توسعه برای ساخت و استقرار وب‌اپلیکیشن‌ها در لبه شبکه.",
+      techStack: ["Next.js", "React", "TypeScript", "Go", "Rust"],
+    },
+    {
+      id: 2,
+      name: "Supabase",
+      logo: "/block-media/shadcnblocks/block/logos/supabase.svg",
+      description: "پلتفرم متن‌باز Backend-as-a-Service برای توسعه سریع‌تر نرم‌افزار",
+      headquarters: "🇸🇬 سنگاپور",
+      website: "supabase.com",
+      employees: 120,
+      industry: "پایگاه داده",
+      founded: 2020,
+      funding: "۱۱۶ میلیون دلار",
+      status: "فعال",
+      mission:
+        "آسان‌سازی ساخت و مقیاس‌پذیری اپلیکیشن‌ها با پلتفرم backend متن‌باز.",
+      techStack: ["PostgreSQL", "Elixir", "TypeScript", "Deno", "Swift"],
+    },
+    {
+      id: 3,
+      name: "Spotify",
+      logo: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+      description: "سرویس پخش موسیقی و پادکست با میلیون‌ها کاربر فعال",
+      headquarters: "🇸🇪 استکهلم، سوئد",
+      website: "spotify.com",
+      employees: 9800,
+      industry: "سرگرمی",
+      founded: 2006,
+      funding: "۲٫۷ میلیارد دلار",
+      status: "عرضه عمومی",
+      mission:
+        "آزاد کردن پتانسیل خلاقیت انسان با فرصت زندگی از هنر برای یک میلیون هنرمند.",
+      techStack: ["Java", "Python", "React", "Kafka", "GCP"],
+    },
+    {
+      id: 4,
+      name: "Slack",
+      logo: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      description: "پلتفرم ارتباط و همکاری تیمی برای سازمان‌ها",
+      headquarters: "🇺🇸 سانفرانسیسکو، آمریکا",
+      website: "slack.com",
+      employees: 2500,
+      industry: "ارتباطات",
+      founded: 2013,
+      funding: "۱٫۴ میلیارد دلار",
+      status: "خریداری‌شده",
+      mission:
+        "ساده‌تر، دلپذیرتر و پربارتر کردن کار با تحول در ارتباطات تیمی.",
+      techStack: ["PHP", "Java", "React", "MySQL", "AWS"],
+    },
+    {
+      id: 5,
+      name: "Notion",
+      logo: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      description: "فضای کاری یکپارچه برای مدیریت دانش، مستندسازی و همکاری تیمی",
+      headquarters: "🇺🇸 سانفرانسیسکو، آمریکا",
+      website: "notion.so",
+      employees: 800,
+      industry: "بهره‌وری",
+      founded: 2016,
+      funding: "۳۴۳ میلیون دلار",
+      status: "فعال",
+      mission:
+        "همه‌گیر کردن ابزارسازی با توانمندسازی همه برای ساخت نرم‌افزار متناسب با نیازشان.",
+      techStack: ["React", "TypeScript", "Kotlin", "PostgreSQL", "Redis"],
+    },
+  ],
+  className,
+}: CompaniesDetail2Props) => {
+  const [selectedCompany, setSelectedCompany] = useState<Company | null>(null);
+
+  return (
+    <section>
+      <div className="container py-32">
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold tracking-tight">شرکت‌ها</h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            اطلاعات شرکت‌ها را ثبت، جستجو و مدیریت کنید.
+                                </p>
+        </div>
+        <div className="mb-6 overflow-hidden rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>نام شرکت</TableHead>
+                <TableHead>صنعت</TableHead>
+                <TableHead>دفتر مرکزی</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {companies.map((company) => (
+                <TableRow
+                  key={company.id}
+                  className="cursor-pointer"
+                  onClick={() => setSelectedCompany(company)}
+                >
+                  <TableCell className="font-medium">{company.name}</TableCell>
+                  <TableCell>{company.industry}</TableCell>
+                  <TableCell>{company.headquarters}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        <Sheet
+          open={!!selectedCompany}
+          onOpenChange={(open) => !open && setSelectedCompany(null)}
+        >
+          <SheetContent
+            side="right"
+            className={cn("bg-background sm:max-w-lg", className)}
+          >
+            {selectedCompany && (
+              <>
+                <SheetHeader className="sr-only">
+                  <SheetTitle>{selectedCompany.name}</SheetTitle>
+                  <SheetDescription>
+                    مشاهده اطلاعات {selectedCompany.name}
+                  </SheetDescription>
+                </SheetHeader>
+                <CompanyDetailsCard company={selectedCompany} />
+              </>
+            )}
+          </SheetContent>
+        </Sheet>
+      </div>
+    </section>
+  );
+};
+
+export { CompaniesDetail2 };
diff --git a/blocks/companies-list1.tsx b/blocks/companies-list1.tsx
new file mode 100644
index 0000000..22df539
--- /dev/null
+++ b/blocks/companies-list1.tsx
@@ -0,0 +1,615 @@
+"use client";
+
+import type {
+  Column,
+  ColumnPinningState,
+  RowSelectionState,
+} from "@tanstack/react-table";
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type FilterFn,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  Clock,
+  DollarSign,
+  Factory,
+  Globe,
+  Link,
+  Linkedin,
+  SlidersHorizontal,
+  Tag,
+  Users,
+  X,
+} from "lucide-react";
+import React, { useMemo, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface Company {
+  name: string;
+  logo: string;
+  categories: string[];
+  linkedin: string;
+  linkedinUsername: string;
+  lastInteraction: string;
+  connectionStrength: string;
+  twitterFollowers: number;
+  employees: number;
+  website: string;
+  industry: string;
+  revenue: string;
+}
+
+const defaultCompanies: Company[] = [
+  {
+    name: "Figma",
+    logo: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    categories: ["طراحی", "SaaS"],
+    linkedin: "https://linkedin.com/company/figma",
+    linkedinUsername: "figma",
+    lastInteraction: "۲ روز پیش",
+    connectionStrength: "قوی",
+    twitterFollowers: 524000,
+    employees: 1200,
+    website: "https://figma.com",
+    industry: "ابزار طراحی",
+    revenue: "بیش از ۵۰۰ میلیون دلار",
+  },
+  {
+    name: "Vercel",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+    categories: ["ابر", "DevOps"],
+    linkedin: "https://linkedin.com/company/vercel",
+    linkedinUsername: "vercel",
+    lastInteraction: "۱ هفته پیش",
+    connectionStrength: "متوسط",
+    twitterFollowers: 312000,
+    employees: 450,
+    website: "https://vercel.com",
+    industry: "زیرساخت ابری",
+    revenue: "بیش از ۱۰۰ میلیون دلار",
+  },
+  {
+    name: "Supabase",
+    logo: "/block-media/shadcnblocks/block/logos/supabase.svg",
+    categories: ["پایگاه داده", "بک‌اند"],
+    linkedin: "https://linkedin.com/company/supabase",
+    linkedinUsername: "supabase",
+    lastInteraction: "۳ روز پیش",
+    connectionStrength: "قوی",
+    twitterFollowers: 156000,
+    employees: 180,
+    website: "https://supabase.com",
+    industry: "پایگاه داده",
+    revenue: "بیش از ۵۰ میلیون دلار",
+  },
+  {
+    name: "GitHub",
+    logo: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    categories: ["ابزار توسعه", "همکاری"],
+    linkedin: "https://linkedin.com/company/github",
+    linkedinUsername: "github",
+    lastInteraction: "دیروز",
+    connectionStrength: "قوی",
+    twitterFollowers: 2400000,
+    employees: 3000,
+    website: "https://github.com",
+    industry: "ابزار توسعه",
+    revenue: "بیش از ۱ میلیارد دلار",
+  },
+  {
+    name: "Notion",
+    logo: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+    categories: ["بهره‌وری", "SaaS"],
+    linkedin: "https://linkedin.com/company/notion",
+    linkedinUsername: "notionhq",
+    lastInteraction: "۵ روز پیش",
+    connectionStrength: "متوسط",
+    twitterFollowers: 890000,
+    employees: 500,
+    website: "https://notion.so",
+    industry: "بهره‌وری",
+    revenue: "بیش از ۲۵۰ میلیون دلار",
+  },
+];
+
+interface IconHeaderProps {
+  icon: React.ReactNode;
+  label: string;
+}
+
+const IconHeader = ({ icon, label }: IconHeaderProps) => {
+  return (
+    <div className="flex items-center gap-1 [&_svg]:size-4">
+      {icon}
+      {label}
+    </div>
+  );
+};
+
+interface HeaderWithSortingProps {
+  column: Column<Company>;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+const HeaderWithSorting = ({ column, label, icon }: HeaderWithSortingProps) => {
+  const sorted = column.getIsSorted();
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+      className="!px-0"
+    >
+      {icon ? <IconHeader icon={icon} label={label} /> : label}
+      {sorted === "asc" ? (
+        <ArrowUp className="ms-2 size-4" />
+      ) : sorted === "desc" ? (
+        <ArrowDown className="ms-2 size-4" />
+      ) : (
+        <ArrowUpDown className="ms-2 size-4" />
+      )}
+    </Button>
+  );
+};
+
+interface FilterCheckboxListProps {
+  options: string[];
+  selectedValues: string[];
+  header: string;
+  onFilterChange: (updatedValues: string[] | undefined) => void;
+}
+
+const FilterCheckboxList = ({
+  options,
+  selectedValues,
+  header,
+  onFilterChange,
+}: FilterCheckboxListProps) => {
+  return (
+    <div className="space-y-2">
+      {options.map((option) => (
+        <div
+          key={option}
+          className="flex max-w-32 items-center gap-2 sm:max-w-full"
+        >
+          <Checkbox
+            id={`${header}-${option}`}
+            checked={selectedValues.includes(option)}
+            onCheckedChange={(checked) => {
+              const updated = checked
+                ? [...selectedValues, option]
+                : selectedValues.filter((v) => v !== option);
+              onFilterChange(updated.length ? updated : undefined);
+            }}
+          />
+          <Label htmlFor={`${header}-${option}`}>{option}</Label>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const categoryIncludesFilter: FilterFn<Company> = (
+  row,
+  columnId,
+  filterValue,
+) => {
+  const value = row.getValue<string[]>(columnId);
+  const filterArray = filterValue as string[];
+  if (!filterArray || filterArray.length === 0) return true;
+  return filterArray.some((filter) => value.includes(filter));
+};
+
+const industryIncludesFilter: FilterFn<Company> = (
+  row,
+  columnId,
+  filterValue,
+) => {
+  const value = row.getValue<string>(columnId);
+  const filterArray = filterValue as string[];
+  if (!filterArray || filterArray.length === 0) return true;
+  return filterArray.includes(value);
+};
+
+const columns: ColumnDef<Company>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <HeaderWithSorting column={column} label="شرکت" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center gap-1">
+        <img
+          src={row.original.logo}
+          alt={row.original.name}
+          className="size-4 rounded-md object-contain dark:invert"
+        />
+        <span className="font-medium">{row.original.name}</span>
+      </div>
+    ),
+    footer: ({ table }) => {
+      const count = table.getRowCount();
+      return (
+        <p className="text-end">
+          {count.toLocaleString("fa-IR")}{" "}
+          <span className="text-muted-foreground">شرکت</span>
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "categories",
+    header: () => <IconHeader icon={<Tag />} label="دسته‌بندی‌ها" />,
+    cell: ({ row }) => (
+      <div className="flex gap-1">
+        {row.original.categories.map((category) => (
+          <Badge key={category} variant="secondary">
+            {category}
+          </Badge>
+        ))}
+      </div>
+    ),
+    filterFn: categoryIncludesFilter,
+  },
+  {
+    accessorKey: "industry",
+    header: () => <IconHeader icon={<Factory />} label="صنعت" />,
+    filterFn: industryIncludesFilter,
+  },
+  {
+    accessorKey: "employees",
+    header: ({ column }) => (
+      <HeaderWithSorting column={column} label="کارکنان" icon={<Users />} />
+    ),
+    cell: ({ row }) => (
+      <span>{row.original.employees.toLocaleString("fa-IR")}</span>
+    ),
+  },
+  {
+    accessorKey: "revenue",
+    header: () => <IconHeader icon={<DollarSign />} label="درآمد" />,
+    cell: ({ row }) => <Badge variant="outline">{row.original.revenue}</Badge>,
+  },
+  {
+    accessorKey: "connectionStrength",
+    header: ({ column }) => (
+      <HeaderWithSorting column={column} label="وضعیت ارتباط" icon={<Link />} />
+    ),
+    cell: ({ row }) => {
+      const strength = row.original.connectionStrength;
+      const variant =
+        strength === "قوی"
+          ? "default"
+          : strength === "متوسط"
+            ? "secondary"
+            : "outline";
+      return (
+        <div>
+          <Badge variant={variant}>{strength}</Badge>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "lastInteraction",
+    header: () => <IconHeader icon={<Clock />} label="آخرین ارتباط" />,
+  },
+  {
+    accessorKey: "twitterFollowers",
+    header: ({ column }) => (
+      <HeaderWithSorting column={column} label="دنبال‌کنندگان" icon={<Users />} />
+    ),
+    cell: ({ row }) => (
+      <span>{row.original.twitterFollowers.toLocaleString("fa-IR")}</span>
+    ),
+  },
+  {
+    accessorKey: "linkedin",
+    header: ({ column }) => (
+      <HeaderWithSorting column={column} label="LinkedIn" icon={<Linkedin />} />
+    ),
+    cell: ({ row }) => (
+      <a href={row.original.linkedin} target="_blank" rel="noopener noreferrer">
+        <span className="text-sm underline">
+          {row.original.linkedinUsername}
+        </span>
+      </a>
+    ),
+  },
+  {
+    accessorKey: "website",
+    header: ({ column }) => (
+      <HeaderWithSorting column={column} label="وب‌سایت" icon={<Globe />} />
+    ),
+    cell: ({ row }) => (
+      <a
+        href={row.original.website}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm underline"
+      >
+        {row.original.website.replace("https://", "")}
+      </a>
+    ),
+  },
+];
+
+interface CompaniesList1Props {
+  className?: string;
+  title?: string;
+  data?: Company[];
+}
+
+const CompaniesList1 = ({
+  className,
+  title = "شرکت‌ها",
+  data = defaultCompanies,
+}: CompaniesList1Props) => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [globalFilter, setGlobalFilter] = useState<string>("");
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
+    left: ["select"],
+  });
+
+  const uniqueCategories = useMemo(() => {
+    const categories = new Set<string>();
+    data.forEach((company) => {
+      company.categories.forEach((cat) => categories.add(cat));
+    });
+    return Array.from(categories).sort();
+  }, [data]);
+
+  const uniqueIndustries = useMemo(() => {
+    const industries = new Set<string>();
+    data.forEach((company) => {
+      industries.add(company.industry);
+    });
+    return Array.from(industries).sort();
+  }, [data]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    onColumnPinningChange: setColumnPinning,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    state: {
+      columnFilters,
+      columnPinning,
+      globalFilter,
+      sorting,
+      rowSelection,
+    },
+  });
+
+  const categoryFilter =
+    (table.getColumn("categories")?.getFilterValue() as string[]) ?? [];
+  const industryFilter =
+    (table.getColumn("industry")?.getFilterValue() as string[]) ?? [];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container space-y-8">
+        <h3 className="text-xl font-bold">{title}</h3>
+
+        <div className="space-y-4">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <div className="flex flex-wrap items-center gap-4">
+              <Input
+                type="text"
+                placeholder="جستجو بر اساس نام شرکت..."
+                value={globalFilter}
+                onChange={(e) => setGlobalFilter(e.target.value)}
+                className="w-full md:w-56"
+              />
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="gap-2">
+                    <SlidersHorizontal className="size-4" />
+                    فیلترها
+                    {categoryFilter.length + industryFilter.length > 0 && (
+                      <Badge variant="secondary">
+                        {categoryFilter.length + industryFilter.length}
+                      </Badge>
+                    )}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                  align="start"
+                  className="w-full max-w-sm space-y-4"
+                >
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label className="text-sm font-medium">دسته‌بندی</Label>
+                      <FilterCheckboxList
+                        options={uniqueCategories}
+                        selectedValues={categoryFilter}
+                        header="category"
+                        onFilterChange={(values) =>
+                          table.getColumn("categories")?.setFilterValue(values)
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label className="text-sm font-medium">صنعت</Label>
+                      <FilterCheckboxList
+                        options={uniqueIndustries}
+                        selectedValues={industryFilter}
+                        header="industry"
+                        onFilterChange={(values) =>
+                          table.getColumn("industry")?.setFilterValue(values)
+                        }
+                      />
+                    </div>
+                  </div>
+                  {categoryFilter.length + industryFilter.length > 0 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setColumnFilters([])}
+                    >
+                      پاک کردن همه فیلترها
+                    </Button>
+                  )}
+                </PopoverContent>
+              </Popover>
+            </div>
+            <div className="flex items-center gap-4">
+              {sorting.length > 0 && (
+                <Button variant="ghost" onClick={() => setSorting([])}>
+                  <X />
+                  حذف مرتب‌سازی
+                </Button>
+              )}
+            </div>
+          </div>
+
+          <div className="overflow-hidden rounded-lg border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => (
+                      <TableHead
+                        key={header.id}
+                        className={cn(
+                          "border-r",
+                          header.column.getIsPinned() &&
+                          "sticky start-0 z-10 bg-background !px-2",
+                        )}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell
+                          key={cell.id}
+                          className={cn(
+                            "border-r",
+                            cell.column.getIsPinned() &&
+                            "sticky start-0 z-10 bg-background",
+                          )}
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={columns.length} className="h-24 px-5">
+                      هیچ شرکتی با این معیارها یافت نشد.
+                                                                  </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+              <TableFooter>
+                {table.getFooterGroups().map((footerGroup) => (
+                  <TableRow key={footerGroup.id}>
+                    {footerGroup.headers.map((header) => (
+                      <TableCell
+                        key={header.id}
+                        className={cn(
+                          "border-r",
+                          header.column.getIsPinned() &&
+                          "sticky start-0 z-10 bg-muted/50",
+                        )}
+                      >
+                        {header.isPlaceholder ? (
+                          <td />
+                        ) : (
+                          flexRender(
+                            header.column.columnDef.footer,
+                            header.getContext(),
+                          )
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableFooter>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CompaniesList1 };
diff --git a/blocks/companies-list2.tsx b/blocks/companies-list2.tsx
new file mode 100644
index 0000000..e37d314
--- /dev/null
+++ b/blocks/companies-list2.tsx
@@ -0,0 +1,540 @@
+"use client";
+
+import type {
+  Column,
+  ColumnPinningState,
+  RowSelectionState,
+} from "@tanstack/react-table";
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type FilterFn,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+  type VisibilityState,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  Mail,
+  Plus,
+  SlidersHorizontal,
+  X,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { FaEyeSlash } from "react-icons/fa";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface Company {
+  name: string;
+  logo: string;
+  email: string;
+  url: string;
+  typeOfPartner: string;
+  tier: string;
+  mainContact: string;
+  employees: number;
+  revenue: string;
+  industry: string;
+}
+
+const defaultCompanies: Company[] = [
+  {
+    name: "Figma",
+    logo: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    email: "partners@figma.com",
+    url: "https://figma.com",
+    typeOfPartner: "فناوری",
+    tier: "پلاتین",
+    mainContact: "سارا محمدی",
+    employees: 1200,
+    revenue: "بیش از ۵۰۰ میلیون دلار",
+    industry: "ابزار طراحی",
+  },
+  {
+    name: "Vercel",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+    email: "partners@vercel.com",
+    url: "https://vercel.com",
+    typeOfPartner: "یکپارچه‌سازی",
+    tier: "طلایی",
+    mainContact: "محمد رضایی",
+    employees: 450,
+    revenue: "بیش از ۱۰۰ میلیون دلار",
+    industry: "زیرساخت ابری",
+  },
+  {
+    name: "Supabase",
+    logo: "/block-media/shadcnblocks/block/logos/supabase.svg",
+    email: "partners@supabase.com",
+    url: "https://supabase.com",
+    typeOfPartner: "فناوری",
+    tier: "نقره‌ای",
+    mainContact: "مریم کریمی",
+    employees: 180,
+    revenue: "بیش از ۵۰ میلیون دلار",
+    industry: "پایگاه داده",
+  },
+  {
+    name: "GitHub",
+    logo: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    email: "partners@github.com",
+    url: "https://github.com",
+    typeOfPartner: "استراتژیک",
+    tier: "پلاتین",
+    mainContact: "علی احمدی",
+    employees: 3000,
+    revenue: "بیش از ۱ میلیارد دلار",
+    industry: "ابزار توسعه",
+  },
+  {
+    name: "Notion",
+    logo: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+    email: "partners@notion.so",
+    url: "https://notion.so",
+    typeOfPartner: "فروشنده",
+    tier: "طلایی",
+    mainContact: "نرگس حسینی",
+    employees: 500,
+    revenue: "بیش از ۲۵۰ میلیون دلار",
+    industry: "بهره‌وری",
+  },
+];
+
+interface HeaderWithSortingProps {
+  column: Column<Company>;
+  label: string;
+}
+
+const HeaderWithSorting = ({ column, label }: HeaderWithSortingProps) => {
+  const sorted = column.getIsSorted();
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+      className="w-full justify-between !px-0"
+    >
+      {label}
+      {sorted === "asc" ? (
+        <ArrowUp />
+      ) : sorted === "desc" ? (
+        <ArrowDown />
+      ) : (
+        <ArrowUpDown />
+      )}
+    </Button>
+  );
+};
+
+interface FilterCheckboxListProps {
+  options: string[];
+  selectedValues: string[];
+  header: string;
+  onFilterChange: (updatedValues: string[] | undefined) => void;
+  labels?: Record<string, string>;
+}
+
+const FilterCheckboxList = ({
+  options,
+  selectedValues,
+  header,
+  onFilterChange,
+  labels,
+}: FilterCheckboxListProps) => {
+  return (
+    <div className="space-y-2">
+      {options.map((option) => (
+        <div
+          key={option}
+          className="flex max-w-32 items-center gap-2 sm:max-w-full"
+        >
+          <Checkbox
+            id={`${header}-${option}`}
+            checked={selectedValues.includes(option)}
+            onCheckedChange={(checked) => {
+              const updated = checked
+                ? [...selectedValues, option]
+                : selectedValues.filter((v) => v !== option);
+              onFilterChange(updated.length ? updated : undefined);
+            }}
+          />
+          <Label htmlFor={`${header}-${option}`}>
+            {labels?.[option] ?? option}
+          </Label>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const stringIncludesFilter: FilterFn<Company> = (
+  row,
+  columnId,
+  filterValue,
+) => {
+  const value = row.getValue<string>(columnId);
+  const filterArray = filterValue as string[];
+  if (!filterArray || filterArray.length === 0) return true;
+  return filterArray.includes(value);
+};
+
+const columns: ColumnDef<Company>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <HeaderWithSorting column={column} label="شرکت" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center gap-1">
+        <img
+          src={row.original.logo}
+          alt={row.original.name}
+          className="size-4 rounded-md object-contain dark:invert"
+        />
+        <span className="font-medium">{row.original.name}</span>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: "ایمیل",
+    cell: ({ row }) => (
+      <a href={`mailto:${row.original.email}`} className="text-sm underline">
+        {row.original.email}
+      </a>
+    ),
+  },
+  {
+    accessorKey: "url",
+    header: ({ column }) => <HeaderWithSorting column={column} label="URL" />,
+    cell: ({ row }) => (
+      <a
+        href={row.original.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm underline"
+      >
+        {row.original.url}
+      </a>
+    ),
+  },
+  {
+    accessorKey: "typeOfPartner",
+    header: "نوع شریک",
+    cell: ({ row }) => (
+      <Badge variant="secondary">{row.original.typeOfPartner}</Badge>
+    ),
+  },
+  {
+    accessorKey: "tier",
+    header: ({ column }) => <HeaderWithSorting column={column} label="سطح همکاری" />,
+    cell: ({ row }) => {
+      const tier = row.original.tier;
+      const variant =
+        tier === "پلاتین"
+          ? "default"
+          : tier === "طلایی"
+            ? "secondary"
+            : "outline";
+      return <Badge variant={variant}>{tier}</Badge>;
+    },
+  },
+  {
+    accessorKey: "mainContact",
+    header: "تماس اصلی",
+  },
+  {
+    accessorKey: "employees",
+    header: ({ column }) => (
+      <HeaderWithSorting column={column} label="کارکنان" />
+    ),
+    cell: ({ row }) => (
+      <span>{row.original.employees.toLocaleString("fa-IR")}</span>
+    ),
+  },
+  {
+    accessorKey: "revenue",
+    header: "درآمد",
+    cell: ({ row }) => <Badge variant="outline">{row.original.revenue}</Badge>,
+  },
+  {
+    accessorKey: "industry",
+    header: "صنعت",
+    filterFn: stringIncludesFilter,
+  },
+];
+
+interface CompaniesList2Props {
+  className?: string;
+  title?: string;
+  data?: Company[];
+}
+
+const CompaniesList2 = ({
+  className,
+  title = "فهرست شرکت‌ها",
+  data = defaultCompanies,
+}: CompaniesList2Props) => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [globalFilter, setGlobalFilter] = useState<string>("");
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
+    left: ["select"],
+  });
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+  const uniqueIndustries = useMemo(() => {
+    const industries = new Set<string>();
+    data.forEach((company) => {
+      industries.add(company.industry);
+    });
+    return Array.from(industries).sort();
+  }, [data]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    onColumnPinningChange: setColumnPinning,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    state: {
+      columnFilters,
+      columnPinning,
+      columnVisibility,
+      globalFilter,
+      sorting,
+      rowSelection,
+    },
+  });
+
+  const industryFilter =
+    (table.getColumn("industry")?.getFilterValue() as string[]) ?? [];
+
+  const columnOptions = table
+    .getAllColumns()
+    .filter((column) => column.getCanHide())
+    .map((column) => column.id);
+  const selectedColumnOptions = table
+    .getAllColumns()
+    .filter((column) => column.getCanHide() && column.getIsVisible())
+    .map((column) => column.id);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container space-y-8">
+        <h3 className="text-xl font-bold">{title}</h3>
+
+        <div className="space-y-4">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <Button variant="outline">
+                <Plus /> ثبت شرکت
+                                            </Button>
+              <Button variant="outline">
+                <Mail /> ارسال ایمیل گروهی
+                                            </Button>
+            </div>
+            <div className="flex items-center gap-2">
+              {sorting.length > 0 && (
+                <Button variant="ghost" onClick={() => setSorting([])}>
+                  <X />
+                  حذف مرتب‌سازی
+                </Button>
+              )}
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="gap-2" size="icon">
+                    <FaEyeSlash />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="end" className="w-full space-y-4">
+                  <div className="space-y-2">
+                    <Label className="text-sm font-medium">
+                      مدیریت نمایش ستون‌ها
+                                                              </Label>
+                    <FilterCheckboxList
+                      options={columnOptions}
+                      selectedValues={selectedColumnOptions}
+                      header="columns"
+                      onFilterChange={(values) => {
+                        const hideableColumns = table
+                          .getAllColumns()
+                          .filter((column) => column.getCanHide());
+                        hideableColumns.forEach((column) => {
+                          column.toggleVisibility(
+                            values?.includes(column.id) ?? false,
+                          );
+                        });
+                      }}
+                      labels={{
+                        name: "شرکت",
+                        email: "ایمیل",
+                        url: "URL",
+                        typeOfPartner: "نوع شریک",
+                        tier: "سطح",
+                        mainContact: "تماس اصلی",
+                        employees: "کارکنان",
+                        revenue: "درآمد",
+                        industry: "صنعت",
+                      }}
+                    />
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="gap-2" size="icon">
+                    <SlidersHorizontal className="size-4" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-full space-y-4">
+                  <div className="space-y-2">
+                    <Label className="text-sm font-medium">صنعت</Label>
+                    <FilterCheckboxList
+                      options={uniqueIndustries}
+                      selectedValues={industryFilter}
+                      header="industry"
+                      onFilterChange={(values) =>
+                        table.getColumn("industry")?.setFilterValue(values)
+                      }
+                    />
+                  </div>
+                  {industryFilter.length > 0 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setColumnFilters([])}
+                    >
+                      پاک کردن همه فیلترها
+                    </Button>
+                  )}
+                </PopoverContent>
+              </Popover>
+              <Input
+                type="text"
+                placeholder="جستجو بر اساس نام شرکت..."
+                value={globalFilter}
+                onChange={(e) => setGlobalFilter(e.target.value)}
+                className="w-full md:w-56"
+              />
+            </div>
+          </div>
+
+          <div className="overflow-hidden border-y">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => (
+                      <TableHead
+                        key={header.id}
+                        className={cn(
+                          "border-r last:border-r-0",
+                          header.column.getIsPinned() &&
+                            "sticky start-0 z-10 bg-background !px-2",
+                        )}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell
+                          key={cell.id}
+                          className={cn(
+                            "border-r last:border-r-0",
+                            cell.column.getIsPinned() &&
+                              "sticky start-0 z-10 bg-background",
+                          )}
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={columns.length} className="h-24 px-5">
+                      هیچ شرکتی با این معیارها یافت نشد.
+                                                                  </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CompaniesList2 };
diff --git a/blocks/compare-products1.tsx b/blocks/compare-products1.tsx
new file mode 100644
index 0000000..ecd1e89
--- /dev/null
+++ b/blocks/compare-products1.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import { Check, X as XIcon } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface ProductSpec {
+  name: string;
+  values: (string | boolean)[];
+}
+
+interface Product {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  originalPrice?: number;
+  rating: number;
+  badge?: string;
+}
+
+interface CompareProducts1Props {
+  products?: Product[];
+  specs?: ProductSpec[];
+  className?: string;
+}
+
+const DEFAULT_PRODUCTS: Product[] = [
+  {
+    id: "1",
+    name: "هدفون بی‌سیم پرو",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+    price: 299,
+    rating: 4.8,
+  },
+  {
+    id: "2",
+    name: "هدفون استودیویی پلاس",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Sleek-Black-Headphones-1.jpeg",
+    price: 249,
+    originalPrice: 279,
+    rating: 4.5,
+  },
+  {
+    id: "3",
+    name: "هدفون سری پایه",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-Headphones-1.jpeg",
+    price: 149,
+    rating: 4.2,
+  },
+];
+
+const DEFAULT_SPECS: ProductSpec[] = [
+  { name: "اندازه درایور", values: ["۴۰ میلی‌متر", "۵۰ میلی‌متر", "۴۰ میلی‌متر"] },
+  {
+    name: "پاسخ فرکانسی",
+    values: ["۲۰Hz–۲۰kHz", "۱۰Hz–۴۰kHz", "۲۰Hz–۲۰kHz"],
+  },
+  { name: "حذف نویز فعال", values: [true, true, false] },
+  { name: "عمر باتری", values: ["۳۰ ساعت", "۲۴ ساعت", "۲۰ ساعت"] },
+  { name: "بی‌سیم", values: [true, true, true] },
+  { name: "نسخه بلوتوث", values: ["۵٫۳", "۵٫۲", "۵٫۰"] },
+  { name: "طراحی تاشو", values: [true, false, true] },
+  { name: "وزن", values: ["۲۵۰ گرم", "۲۸۰ گرم", "۲۲۰ گرم"] },
+  { name: "کیف همراه", values: [true, true, false] },
+  { name: "گارانتی", values: ["۲ سال", "۲ سال", "۱ سال"] },
+];
+
+const formatPrice = (price: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+    maximumFractionDigits: 0,
+  }).format(price);
+
+const formatRating = (rating: number) =>
+  rating.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+const CompareProducts1 = ({
+  products = DEFAULT_PRODUCTS,
+  specs = DEFAULT_SPECS,
+  className,
+}: CompareProducts1Props) => {
+  const renderValue = (value: string | boolean) => {
+    if (typeof value === "boolean") {
+      return value ? (
+        <Check className="size-5 text-emerald-600" aria-label="دارد" />
+      ) : (
+        <XIcon className="size-5 text-muted-foreground" aria-label="ندارد" />
+      );
+    }
+    return value;
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 text-start md:py-24", className)}
+    >
+      <div className="container">
+        <div className="mb-8 text-center">
+          <h2 className="text-xl font-bold tracking-tight md:text-3xl">
+            مقایسه محصولات
+          </h2>
+          <p className="mt-2 text-muted-foreground">
+            ویژگی‌ها، مشخصات فنی و تفاوت محصولات را مقایسه کنید و بهترین انتخاب را داشته باشید.
+                                </p>
+        </div>
+
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow className="border-b-0 hover:bg-transparent">
+                <TableHead className="w-48 border-e" />
+                {products.map((product, index) => (
+                  <TableHead
+                    key={product.id}
+                    className={cn(
+                      "min-w-[200px] text-center",
+                      index < products.length - 1 && "border-e",
+                    )}
+                  >
+                    <div className="pb-4">
+                      <div className="mx-auto size-48 overflow-hidden rounded-lg bg-muted">
+                        <AspectRatio ratio={1}>
+                          <img
+                            src={product.image}
+                            alt={product.name}
+                            className="size-full object-cover"
+                          />
+                        </AspectRatio>
+                      </div>
+                      <div className="-mt-3 flex h-6 items-center justify-center">
+                        {product.badge && (
+                          <Badge className="mx-auto">{product.badge}</Badge>
+                        )}
+                      </div>
+                      <h3 className="mt-2 text-lg leading-tight font-semibold">
+                        {product.name}
+                      </h3>
+                      <div className="flex min-h-[1.5rem] items-center justify-center gap-2">
+                        <span className="text-lg">
+                          {formatPrice(product.price)}
+                        </span>
+                        {product.originalPrice && (
+                          <span className="text-sm text-muted-foreground line-through">
+                            {formatPrice(product.originalPrice)}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center justify-center gap-1">
+                        <span className="text-amber-500" aria-hidden="true">
+                          ★
+                        </span>
+                        <span className="text-sm">
+                          {formatRating(product.rating)}
+                        </span>
+                      </div>
+                      <Button className="mt-4 w-full" size="sm">
+                        افزودن به سبد
+                      </Button>
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {specs.map((spec, index) => (
+                <TableRow key={index}>
+                  <TableCell className="border-e font-medium">
+                    {spec.name}
+                  </TableCell>
+                  {spec.values.map((value, vIndex) => (
+                    <TableCell
+                      key={vIndex}
+                      className={cn(
+                        "text-center",
+                        vIndex < spec.values.length - 1 && "border-e",
+                      )}
+                    >
+                      <div className="flex items-center justify-center">
+                        {renderValue(value)}
+                      </div>
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CompareProducts1 };
diff --git a/blocks/compare-products2.tsx b/blocks/compare-products2.tsx
new file mode 100644
index 0000000..77e05cb
--- /dev/null
+++ b/blocks/compare-products2.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { Check, X as XIcon } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface ProductSpec {
+  name: string;
+  values: (string | boolean)[];
+}
+
+interface Product {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  originalPrice?: number;
+  rating: number;
+  badge?: string;
+}
+
+interface CompareProducts2Props {
+  products?: Product[];
+  specs?: ProductSpec[];
+  className?: string;
+}
+
+const DEFAULT_PRODUCTS: Product[] = [
+  {
+    id: "1",
+    name: "هدفون بی‌سیم پرو",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+    price: 299,
+    rating: 4.8,
+  },
+  {
+    id: "2",
+    name: "هدفون استودیویی پلاس",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Sleek-Black-Headphones-1.jpeg",
+    price: 249,
+    originalPrice: 279,
+    rating: 4.5,
+  },
+];
+
+const DEFAULT_SPECS: ProductSpec[] = [
+  { name: "اندازه درایور", values: ["۴۰ میلی‌متر", "۵۰ میلی‌متر"] },
+  {
+    name: "پاسخ فرکانسی",
+    values: ["۲۰Hz–۲۰kHz", "۱۰Hz–۴۰kHz"],
+  },
+  { name: "حذف نویز فعال", values: [true, true] },
+  { name: "عمر باتری", values: ["۳۰ ساعت", "۲۴ ساعت"] },
+  { name: "بی‌سیم", values: [true, true] },
+  { name: "نسخه بلوتوث", values: ["۵٫۳", "۵٫۲"] },
+  { name: "طراحی تاشو", values: [true, false] },
+  { name: "وزن", values: ["۲۵۰ گرم", "۲۸۰ گرم"] },
+  { name: "کیف همراه", values: [true, true] },
+  { name: "گارانتی", values: ["۲ سال", "۲ سال"] },
+];
+
+const formatPrice = (price: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+    maximumFractionDigits: 0,
+  }).format(price);
+
+const formatRating = (rating: number) =>
+  rating.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+const CompareProducts2 = ({
+  products = DEFAULT_PRODUCTS,
+  specs = DEFAULT_SPECS,
+  className,
+}: CompareProducts2Props) => {
+  const renderValue = (value: string | boolean) => {
+    if (typeof value === "boolean") {
+      return value ? (
+        <Check className="size-4 text-emerald-600" aria-label="دارد" />
+      ) : (
+        <XIcon className="size-4 text-muted-foreground" aria-label="ندارد" />
+      );
+    }
+    return <span className="text-sm font-medium">{value}</span>;
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 text-start md:py-24", className)}
+    >
+      <div className="container max-w-5xl">
+        <div className="mb-12 text-center">
+          <h2 className="text-3xl font-semibold tracking-tight">
+            مقایسه محصولات
+          </h2>
+        </div>
+
+        <div className="overflow-x-auto rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow className="border-b hover:bg-transparent">
+                <TableHead className="w-64 bg-muted/50 px-6 py-8 font-semibold">
+                  <span className="text-sm tracking-wider text-muted-foreground">
+                    مشخصات فنی
+                  </span>
+                </TableHead>
+                {products.map((product, index) => (
+                  <TableHead
+                    key={product.id}
+                    className={cn(
+                      "min-w-[280px] bg-muted/30 px-6 py-8",
+                      index < products.length - 1 && "border-e",
+                    )}
+                  >
+                    <div className="space-y-4">
+                      <div className="flex items-start gap-4">
+                        <div className="size-24 shrink-0 overflow-hidden rounded-md bg-background">
+                          <AspectRatio ratio={1}>
+                            <img
+                              src={product.image}
+                              alt={product.name}
+                              className="size-full object-cover"
+                            />
+                          </AspectRatio>
+                        </div>
+                        <div className="flex-1 space-y-2">
+                          {product.badge && (
+                            <Badge variant="secondary" className="text-xs">
+                              {product.badge}
+                            </Badge>
+                          )}
+                          <h3 className="text-lg leading-tight font-semibold">
+                            {product.name}
+                          </h3>
+                          <div className="flex items-baseline gap-2">
+                            <span className="text-xl font-bold">
+                              {formatPrice(product.price)}
+                            </span>
+                            {product.originalPrice && (
+                              <span className="text-xs text-muted-foreground line-through">
+                                {formatPrice(product.originalPrice)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 text-sm">
+                            <span className="text-amber-500" aria-hidden="true">
+                              ★
+                            </span>
+                            <span className="font-medium">
+                              {formatRating(product.rating)}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <Button className="w-full" size="sm" variant="outline">
+                        افزودن به سبد
+                      </Button>
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {specs.map((spec, index) => (
+                <TableRow
+                  key={index}
+                  className={cn(
+                    "border-b hover:bg-muted/30",
+                    index % 2 === 0 && "bg-muted/20",
+                  )}
+                >
+                  <TableCell className="px-6 py-5 font-medium">
+                    {spec.name}
+                  </TableCell>
+                  {spec.values.map((value, vIndex) => (
+                    <TableCell
+                      key={vIndex}
+                      className={cn(
+                        "px-6 py-5 text-center",
+                        vIndex < spec.values.length - 1 && "border-e",
+                      )}
+                    >
+                      <div className="flex items-center justify-center">
+                        {renderValue(value)}
+                      </div>
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CompareProducts2 };
diff --git a/blocks/compare-products3.tsx b/blocks/compare-products3.tsx
new file mode 100644
index 0000000..bc0fff9
--- /dev/null
+++ b/blocks/compare-products3.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import {
+  ArrowRight,
+  Check,
+  Plus,
+  ShoppingCart,
+  X as XIcon,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Product {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  originalPrice?: number;
+  rating: number;
+  reviews: number;
+  highlights: string[];
+}
+
+interface CompareProducts3Props {
+  products?: Product[];
+  maxProducts?: number;
+  className?: string;
+}
+
+const DEFAULT_PRODUCTS: Product[] = [
+  {
+    id: "1",
+    name: "ایرباد بی‌سیم پریمیوم",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+    price: 199,
+    rating: 4.8,
+    reviews: 2341,
+    highlights: [
+      "حذف نویز فعال",
+      "۳۰ ساعت باتری با کیس",
+      "صدای فضایی",
+      "مقاوم در برابر آب IPX4",
+    ],
+  },
+  {
+    id: "2",
+    name: "ایرباد ورزشی پرو",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Sleek-Black-Headphones-1.jpeg",
+    price: 149,
+    originalPrice: 179,
+    rating: 4.5,
+    reviews: 1892,
+    highlights: [
+      "ماندگاری مطمئن برای ورزش",
+      "۲۴ ساعت باتری با کیس",
+      "ضدآب IPX7",
+      "حالت صدای محیط",
+    ],
+  },
+  {
+    id: "3",
+    name: "ایرباد بی‌سیم سری پایه",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-Headphones-1.jpeg",
+    price: 79,
+    rating: 4.2,
+    reviews: 956,
+    highlights: [
+      "کنترل لمسی",
+      "۱۸ ساعت باتری با کیس",
+      "دستیار صوتی",
+      "طراحی جمع‌وجور",
+    ],
+  },
+];
+
+const formatPrice = (price: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+    maximumFractionDigits: 0,
+  }).format(price);
+
+const formatRating = (rating: number) =>
+  rating.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+const CompareProducts3 = ({
+  products = DEFAULT_PRODUCTS,
+  maxProducts = 4,
+  className,
+}: CompareProducts3Props) => {
+  const [selectedProducts, setSelectedProducts] = useState<Product[]>(products);
+
+  const removeProduct = (id: string) => {
+    setSelectedProducts((prev) => prev.filter((p) => p.id !== id));
+  };
+
+  const canAddMore = selectedProducts.length < maxProducts;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 text-start md:py-24", className)}
+    >
+      <div className="container">
+        <div className="mb-8 flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold tracking-tight md:text-3xl">
+              مقایسه مشخصات محصولات
+                                      </h2>
+            <p className="mt-1 text-muted-foreground">
+              حداکثر ۴{" "}
+              {maxProducts.toLocaleString("fa-IR")} محصول را برای مقایسه انتخاب کنید.
+                                      </p>
+          </div>
+          {selectedProducts.length > 0 && (
+            <Button
+              variant="ghost"
+              onClick={() => setSelectedProducts([])}
+              className="text-destructive hover:text-destructive"
+            >
+              حذف همه موارد
+                                      </Button>
+          )}
+        </div>
+
+        <ScrollArea className="w-full">
+          <div className="flex gap-4 pb-4">
+            {selectedProducts.map((product) => (
+              <Card key={product.id} className="w-72 shrink-0 gap-0 p-0">
+                <CardContent className="p-0">
+                  <div className="relative">
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="absolute start-2 top-2 z-10 size-7"
+                      onClick={() => removeProduct(product.id)}
+                      aria-label={`حذف ${product.name}`}
+                    >
+                      <XIcon className="size-4" />
+                    </Button>
+                    <div className="aspect-square bg-muted">
+                      <img
+                        src={product.image}
+                        alt={product.name}
+                        className="size-full object-cover"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="p-4">
+                    <h3 className="leading-tight font-semibold">
+                      {product.name}
+                    </h3>
+                    <div className="mt-2 flex items-center gap-2">
+                      <span className="text-lg font-bold">
+                        {formatPrice(product.price)}
+                      </span>
+                      {product.originalPrice && (
+                        <span className="text-sm text-muted-foreground line-through">
+                          {formatPrice(product.originalPrice)}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="mt-2 flex items-center gap-1 text-sm">
+                      <span className="text-amber-500" aria-hidden="true">
+                        ★
+                      </span>
+                      <span className="font-medium">
+                        {formatRating(product.rating)}
+                      </span>
+                      <span className="text-muted-foreground">
+                        ({product.reviews.toLocaleString("fa-IR")} دیدگاه)
+                                                          </span>
+                    </div>
+
+                    <Separator className="my-4" />
+
+                    <div className="space-y-2">
+                      {product.highlights.map((highlight, index) => (
+                        <div
+                          key={index}
+                          className="flex items-start gap-2 text-sm"
+                        >
+                          <Check
+                            className="mt-0.5 size-4 shrink-0 text-emerald-600"
+                            aria-hidden="true"
+                          />
+                          <span>{highlight}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <Button className="mt-4 w-full">
+                      <ShoppingCart className="ms-2 size-4" />
+                      افزودن به سبد خرید
+                                                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+
+            {canAddMore && (
+              <Card className="w-72 shrink-0 cursor-pointer gap-0 border-dashed p-0 transition-colors hover:border-primary hover:bg-muted/50">
+                <CardContent className="flex h-full min-h-[400px] flex-col items-center justify-center p-4 text-center">
+                  <div className="mb-3 flex size-16 items-center justify-center rounded-full bg-muted">
+                    <Plus className="size-6 text-muted-foreground" />
+                  </div>
+                  <p className="font-medium">افزودن محصول جدید</p>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    برای مقایسه بهتر، محصول دیگری را نیز انتخاب کنید.
+                                                        </p>
+                  <Button variant="outline" className="mt-4">
+                    مشاهده فهرست محصولات
+                                                          <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+                  </Button>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </div>
+    </section>
+  );
+};
+
+export { CompareProducts3 };
diff --git a/blocks/compare1.tsx b/blocks/compare1.tsx
new file mode 100644
index 0000000..3a299b1
--- /dev/null
+++ b/blocks/compare1.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { CheckCircle2, OctagonX } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const rows = [
+  {
+    label: "راه‌اندازی",
+    lightbox: "۱–۲ روز",
+    freelance: "۳۰ روز",
+  },
+  {
+    label: "محدوده قیمت",
+    lightbox: "۱۰٪",
+    freelance: "۵۰–۶۰٪",
+  },
+  {
+    label: "امتیاز کیفیت",
+    lightbox: "۳٪ برتر",
+    freelance: "متغیر",
+  },
+  {
+    label: "احراز هویت",
+    lightbox: "فرآیند احراز هویت چندمرحله‌ای",
+    freelance: "بررسی پایه",
+    hasIcon: true,
+  },
+  {
+    label: "انطباق‌پذیری",
+    lightbox: "کاملاً انعطاف‌پذیر",
+    freelance: "محدود",
+    hasIcon: true,
+  },
+  {
+    label: "پشتیبانی",
+    lightbox: "تیم اختصاصی ۲۴/۷",
+    freelance: "ساعات محدود",
+    hasIcon: true,
+  },
+];
+
+interface Compare1Props {
+  className?: string;
+}
+
+const Compare1 = ({ className }: Compare1Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <h1 className="mb-8 text-3xl font-bold md:mb-12 md:text-2xll">
+          مقایسه راهکارها
+                          </h1>
+        <div className="-me-4 overflow-x-auto">
+          <div className="min-w-[672px] overflow-hidden">
+            <div className="grid grid-cols-3 [&>:last-child_div]:rounded-b-md [&>div:nth-last-child(-n+3)]:rounded-b-md [&>div:nth-last-child(-n+3)]:border-b-0">
+              <div className="flex items-center p-3 text-base font-medium md:p-4 md:text-lg">
+                ویژگی
+              </div>
+              <div className="flex items-center rounded-t-md bg-green-100 p-3 md:p-4">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg"
+                  alt="لوگوی سرویس اول"
+                  className="h-7 md:h-8"
+                />
+              </div>
+              <div className="flex items-center rounded-t-md bg-red-100 p-3 md:p-4">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg"
+                  alt="لوگوی سرویس دوم"
+                  className="h-7 md:h-8"
+                />
+              </div>
+              {rows.map((row, idx) => (
+                <React.Fragment key={idx}>
+                  <div className="flex items-center border-b p-3 text-base font-medium md:p-4 md:text-lg">
+                    {row.label}
+                  </div>
+                  <div className="border-b bg-green-50 p-3 md:p-6">
+                    <div className="flex items-center gap-2">
+                      {row.hasIcon && (
+                        <CheckCircle2
+                          className="h-5 w-5 shrink-0 text-green-600"
+                          aria-hidden="true"
+                        />
+                      )}
+                      <span className="text-base md:text-lg">
+                        {row.lightbox}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="border-b bg-red-50 p-3 md:p-6">
+                    <div className="flex items-center gap-2">
+                      {row.hasIcon && (
+                        <OctagonX
+                          className="h-5 w-5 shrink-0 text-red-600"
+                          aria-hidden="true"
+                        />
+                      )}
+                      <span className="text-base md:text-lg">
+                        {row.freelance}
+                      </span>
+                    </div>
+                  </div>
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare1 };
diff --git a/blocks/compare10.tsx b/blocks/compare10.tsx
new file mode 100644
index 0000000..2b19586
--- /dev/null
+++ b/blocks/compare10.tsx
@@ -0,0 +1,91 @@
+import { X } from "lucide-react";
+import React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const legacyFeatures = [
+  "گردش‌کارهای یکسان برای همه تیم‌ها، بدون انعطاف متناسب با نیاز سازمان.",
+  "رابط کاربری قدیمی که یادگیری و استفاده از آن زمان‌بر است.",
+  "اطلاعات در چندین سامانه پراکنده است و یکپارچه‌سازی آن‌ها دشوار است.",
+  "وابستگی زیاد به فرایندهای دستی و گزارش‌گیری زمان‌بر.",
+  "مهاجرت‌های کند و پرریسک که تحویل را مختل می‌کنند.",
+  "فناوری کهنه با پشتیبانی محدود از ابر و موبایل.",
+  "قیمت بالا بدون نتیجه قابل اندازه‌گیری.",
+  "هزینه‌های غیرمنتظره برای آموزش، پشتیبانی و یکپارچه‌سازی.",
+];
+
+const newFeatures = [
+  { emoji: "🧭", text: "طراحی‌شده برای تیم‌های محصول، مهندسی و عملیات مدرن." },
+  { emoji: "💡", text: "رابط کاربری ساده، سریع و قابل یادگیری." },
+  { emoji: "📊", text: "تمام اطلاعات در یک فضای کاری متمرکز و یکپارچه نگهداری می‌شود." },
+  { emoji: "⚡", text: "اتوماسیون هوشمند برای کاهش کارهای تکراری و افزایش بهره‌وری." },
+  { emoji: "🧰", text: "مهاجرت‌های هدایت‌شده و کم‌ریسک در بازه چند هفته." },
+  { emoji: "☁️", text: "بومی ابری، امن و همیشه به‌روز." },
+  { emoji: "📈", text: "افزایش سرعت با بازگشت سرمایه شفاف و قابل اثبات." },
+  { emoji: "💬", text: "قیمت‌گذاری ساده و شفاف." },
+];
+
+interface Compare10Props {
+  className?: string;
+}
+
+const Compare10 = ({ className }: Compare10Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <div className="flex flex-col gap-6 text-center md:gap-12">
+          <h2 className="l:text-2xll text-xl font-medium md:text-2xll">
+            <span className="text-muted-foreground">چرا سازمان‌ها </span>
+            <br /> به راهکارهای مدرن مهاجرت می‌کنند
+                                </h2>
+          <p className="text-lg">
+            ابزارهای قدیمی هزینه نگهداری را افزایش داده و سرعت اجرای پروژه‌ها را کاهش می‌دهند.{" "}
+            <br className="hidden md:block" /> راهکارهای مدرن بهره‌وری تیم را افزایش داده و زمان تحویل پروژه را کاهش می‌دهند.
+                                </p>
+        </div>
+        <div className="mt-20 grid gap-12 lg:grid-cols-2 lg:gap-0">
+          <div className="rounded-3xl bg-muted p-6 lg:rounded-e-none lg:p-12">
+            <h3 className="text-xl font-medium">راهکارهای سنتی</h3>
+            <ul className="mt-9 space-y-3">
+              {legacyFeatures.map((feature, idx) => (
+                <React.Fragment key={idx}>
+                  <div className="flex items-center gap-2">
+                    <X
+                      className="my-1.5 size-4 shrink-0 text-muted-foreground"
+                      aria-hidden="true"
+                    />
+                    <li className="text-sm">{feature}</li>
+                  </div>
+                  {idx !== legacyFeatures.length - 1 && <Separator />}
+                </React.Fragment>
+              ))}
+            </ul>
+          </div>
+          <div className="rounded-3xl border border-y p-6 lg:rounded-s-none lg:border-s-0 lg:p-12">
+            <h3 className="text-xl font-medium">راهکارهای مدرن</h3>
+            <ul className="mt-9 space-y-3">
+              {newFeatures.map((feature, idx) => (
+                <React.Fragment key={idx}>
+                  <li className="flex items-center gap-2 text-sm">
+                    <span className="text-lg" aria-hidden="true">
+                      {feature.emoji}
+                    </span>
+                    {feature.text}
+                  </li>
+                  {idx !== newFeatures.length - 1 && <Separator />}
+                </React.Fragment>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare10 };
diff --git a/blocks/compare2.tsx b/blocks/compare2.tsx
new file mode 100644
index 0000000..05b18fd
--- /dev/null
+++ b/blocks/compare2.tsx
@@ -0,0 +1,173 @@
+import { CheckCircle2, CircleMinus } from "lucide-react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Compare2Props {
+  className?: string;
+}
+
+const Compare2 = ({ className }: Compare2Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-muted/50 py-32 text-start", className)}
+    >
+      <div className="container">
+        <div className="text-center">
+          <h1 className="mb-6 text-xl font-semibold md:text-2xll">
+            مقایسه دو راهکار برای انتخابی آگاهانه
+                                </h1>
+          <p className="mx-auto max-w-4xl text-muted-foreground md:text-xl">
+            این مقایسه به شما کمک می‌کند تفاوت قابلیت‌ها، هزینه‌ها، مقیاس‌پذیری و تجربه کاربری دو راهکار را بررسی کرده و متناسب با نیاز کسب‌وکار خود تصمیم بگیرید.
+                                </p>
+        </div>
+        <div className="mt-28">
+          <div className="mx-auto grid max-w-3xl gap-6 md:grid-cols-2">
+            <div className="rounded-xl border bg-background p-6 shadow">
+              <span className="flex items-center justify-center gap-2 font-medium">
+                <img
+                  src="/block-media/shadcnblocks/block/block-1.svg"
+                  alt="لوگوی محصول الف"
+                  className="h-7"
+                />
+                محصول الف
+              </span>
+              <Separator className="my-6" />
+              <ul className="space-y-2">
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  طرح پایه موجود
+                </li>
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  کاربران نامحدود
+                </li>
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  قابلیت‌های پیشرفته
+                </li>
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  برنامه همکاری
+                </li>
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  رویدادهای زنده
+                </li>
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  دسترسی به جامعه کاربری
+                </li>
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  پشتیبانی ویژه
+                </li>
+              </ul>
+            </div>
+            <div className="rounded-xl bg-border/40 p-6">
+              <span className="flex items-center justify-center gap-2 font-medium">
+                <img
+                  src="/block-media/shadcnblocks/block/block-2.svg"
+                  alt="لوگوی محصول ب"
+                  className="h-7"
+                />
+                محصول ب
+              </span>
+              <Separator className="my-6" />
+              <ul className="space-y-2">
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  طرح پایه موجود
+                </li>
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  کاربران نامحدود
+                </li>
+                <li className="flex items-center gap-2">
+                  <CheckCircle2
+                    className="h-5 w-5 shrink-0 text-emerald-700"
+                    aria-hidden="true"
+                  />
+                  قابلیت‌های پایه
+                </li>
+                <li className="flex items-center gap-2 text-muted-foreground line-through">
+                  <CircleMinus
+                    className="h-5 w-5 shrink-0 opacity-50"
+                    aria-hidden="true"
+                  />
+                  برنامه همکاری
+                </li>
+                <li className="flex items-center gap-2 text-muted-foreground line-through">
+                  <CircleMinus
+                    className="h-5 w-5 shrink-0 opacity-50"
+                    aria-hidden="true"
+                  />
+                  رویدادهای زنده
+                </li>
+                <li className="flex items-center gap-2 text-muted-foreground line-through">
+                  <CircleMinus
+                    className="h-5 w-5 shrink-0 opacity-50"
+                    aria-hidden="true"
+                  />
+                  دسترسی به جامعه کاربری
+                </li>
+                <li className="flex items-center gap-2 text-muted-foreground line-through">
+                  <CircleMinus
+                    className="h-5 w-5 shrink-0 opacity-50"
+                    aria-hidden="true"
+                  />
+                  پشتیبانی ویژه
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div className="mx-auto mt-16 max-w-3xl">
+          <h2 className="mb-4 text-3xl font-semibold">
+            چه زمانی انتخاب راهکار ساده‌تر منطقی است؟
+                                </h2>
+          <p className="leading-6 text-muted-foreground md:text-lg">
+            اگر تیم کوچکی دارید و نیازهای شما محدود است، یک راهکار پایه می‌تواند هزینه اولیه را کاهش دهد. اما برای رشد سازمان، معمولاً به امکانات پیشرفته‌تر و قابلیت توسعه نیاز خواهید داشت.
+                                </p>
+          <h2 className="mt-16 mb-4 text-3xl font-semibold">
+            جمع‌بندی مقایسه
+                                </h2>
+          <p className="leading-6 text-muted-foreground md:text-lg">
+            پیش از انتخاب، علاوه بر قیمت، عواملی مانند توسعه‌پذیری، امنیت، کیفیت پشتیبانی، امکان یکپارچه‌سازی و هزینه نگهداری در بلندمدت را نیز ارزیابی کنید.
+                                </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare2 };
diff --git a/blocks/compare3.tsx b/blocks/compare3.tsx
new file mode 100644
index 0000000..76625ce
--- /dev/null
+++ b/blocks/compare3.tsx
@@ -0,0 +1,167 @@
+import {
+  BadgePercent,
+  CheckCircle,
+  CircleMinus,
+  Code2,
+  Headset,
+  LineChart,
+  Users,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Compare3Props {
+  className?: string;
+}
+
+const Compare3 = ({ className }: Compare3Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <div className="flex flex-col items-center gap-4">
+          <Badge variant="outline">مقایسه راهکارها</Badge>
+          <h2 className="mx-auto max-w-2xl text-center text-xl font-semibold sm:text-2xll">
+            مقایسه قابلیت‌های محصول با رقبا
+                                </h2>
+          <p className="mx-auto mt-2 max-w-2xl text-center text-muted-foreground">
+            بررسی تفاوت قابلیت‌ها، تجربه کاربری و ارزش تجاری در مقایسه با راهکارهای مشابه.
+                                </p>
+        </div>
+        <div className="-mx-7 overflow-x-auto">
+          <div className="mt-14 grid min-w-2xl grid-cols-3">
+            <div className="border-b border-border p-5"></div>
+            <div className="flex flex-col items-center gap-2 rounded-t-2xl border-b border-border bg-muted p-5">
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                alt="لوگوی ری یو آی"
+                className="size-8"
+              />
+              <p className="text-lg font-semibold">ری یو آی</p>
+              <p className="mt-1 text-center text-sm text-muted-foreground">
+                طراحی‌شده بر اساس نیازهای واقعی کاربران
+                                            </p>
+            </div>
+            <div className="flex flex-col items-center gap-2 border-b border-border p-5">
+              <img
+                src="/block-media/shadcnblocks/block/block-2.svg"
+                alt="لوگوی Biz"
+                className="size-8"
+              />
+              <p className="text-lg font-semibold">Biz</p>
+              <p className="mt-1 text-center text-sm text-muted-foreground">
+                راهکار متداول بازار
+                                            </p>
+            </div>
+            <div className="flex items-center gap-2 border-b border-border p-5">
+              <Users className="size-4 shrink-0" aria-hidden="true" />
+              <span className="font-semibold">نمای کلی تیم</span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-b border-border bg-muted p-5">
+              <CheckCircle
+                className="size-5 text-green-600"
+                aria-hidden="true"
+              />
+              <span className="text-xs text-muted-foreground">
+                داشبورد جامع
+              </span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-b border-border p-5">
+              <CircleMinus className="size-5 text-red-600" aria-hidden="true" />
+              <span className="text-xs text-muted-foreground">
+                فقط نمای کلی پایه
+              </span>
+            </div>
+            <div className="flex items-center gap-2 border-b border-border p-5">
+              <BadgePercent className="size-4 shrink-0" aria-hidden="true" />
+              <span className="font-semibold">برندسازی سفارشی</span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-b border-border bg-muted p-5">
+              <CheckCircle
+                className="size-5 text-green-600"
+                aria-hidden="true"
+              />
+              <span className="text-xs text-muted-foreground">
+                سفارشی‌سازی کامل
+              </span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-b border-border p-5">
+              <CheckCircle
+                className="size-5 text-green-600"
+                aria-hidden="true"
+              />
+              <span className="text-xs text-muted-foreground">
+                گزینه‌های محدود
+              </span>
+            </div>
+            <div className="flex items-center gap-2 border-b border-border p-5">
+              <Code2 className="size-4 shrink-0" aria-hidden="true" />
+              <span className="font-semibold">دسترسی اتصال هوشمند</span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-b border-border bg-muted p-5">
+              <CheckCircle
+                className="size-5 text-green-600"
+                aria-hidden="true"
+              />
+              <span className="text-xs text-muted-foreground">اتصال هوشمند کامل و مستند</span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-b border-border p-5">
+              <CircleMinus className="size-5 text-red-600" aria-hidden="true" />
+              <span className="text-xs text-muted-foreground">بدون اتصال هوشمند</span>
+            </div>
+            <div className="flex items-center gap-2 border-b border-border p-5">
+              <LineChart className="size-4 shrink-0" aria-hidden="true" />
+              <span className="font-semibold">تحلیل‌های پیشرفته</span>
+              <Badge variant="secondary">به‌زودی</Badge>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-b border-border bg-muted p-5">
+              <CircleMinus className="size-5 text-red-600" aria-hidden="true" />
+              <span className="text-xs text-muted-foreground">
+                در نقشه راه توسعه
+                                            </span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-b border-border p-5">
+              <CheckCircle
+                className="size-5 text-green-600"
+                aria-hidden="true"
+              />
+              <span className="text-xs text-muted-foreground">
+                گزارش‌گیری پایه
+              </span>
+            </div>
+            <div className="flex items-center gap-2 border-border p-5">
+              <Headset className="size-4 shrink-0" aria-hidden="true" />
+              <span className="font-semibold">پشتیبانی مشتری</span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 border-border bg-muted p-5">
+              <CheckCircle
+                className="size-5 text-green-600"
+                aria-hidden="true"
+              />
+              <span className="text-xs text-muted-foreground">
+                پشتیبانی تخصصی ۲۴ ساعته
+                                            </span>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-2 p-5">
+              <CircleMinus className="size-5 text-red-600" aria-hidden="true" />
+              <span className="text-xs text-muted-foreground">
+                فقط پشتیبانی ایمیلی
+              </span>
+            </div>
+            <div className="border-border p-5"></div>
+            <div className="flex items-center justify-center gap-2 rounded-b-2xl border-border bg-muted p-5">
+              <Button className="w-full">درخواست دمو</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare3 };
diff --git a/blocks/compare4.tsx b/blocks/compare4.tsx
new file mode 100644
index 0000000..6c12d0f
--- /dev/null
+++ b/blocks/compare4.tsx
@@ -0,0 +1,162 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  title: string;
+  brick: { value: string; unit?: string; desc: string };
+  ghost: { value: string; unit?: string; desc: string };
+}
+
+interface Compare4Props {
+  className?: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    title: "نیازمندی سرور",
+    brick: {
+      value: "۲۵۰۰",
+      unit: "GB",
+      desc: "سرورهای اختصاصی پرقدرت",
+    },
+    ghost: {
+      value: "۲۵۰",
+      unit: "GB",
+      desc: "زیرساخت بهینه‌شده برای ابر",
+    },
+  },
+  {
+    title: "اندازه تیم (تقریبی)",
+    brick: { value: "۲۰", desc: "تیم توسعه داخلی کامل" },
+    ghost: { value: "۵", desc: "تیم اصلی با گردش‌کار خودکار" },
+  },
+  {
+    title: "زمان توسعه",
+    brick: { value: "۴۸", unit: "هفته", desc: "چرخه توسعه سنتی" },
+    ghost: { value: "۸", unit: "هفته", desc: "چارچوب استقرار سریع" },
+  },
+  {
+    title: "راه‌اندازی اولیه",
+    brick: {
+      value: "۱٫۲",
+      unit: "M$",
+      desc: "هزینه زیرساخت سازمانی",
+    },
+    ghost: { value: "۴۰", unit: "k$*", desc: "مدل پرداخت متناسب با رشد" },
+  },
+  {
+    title: "بازه بازگشت سرمایه",
+    brick: { value: "۴", unit: "سال", desc: "بازه زمانی استاندارد سازمانی" },
+    ghost: { value: "۸", unit: "ماه", desc: "ورود سریع‌تر به بازار" },
+  },
+];
+
+const Compare4 = ({ className }: Compare4Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-muted/30 py-32 text-start", className)}
+    >
+      <div className="container grid grid-cols-4 gap-x-4 gap-y-8 md:grid-cols-8 lg:grid-cols-12">
+        <div className="col-span-4 mb-8 max-w-3xl md:col-span-8 md:mb-12 lg:col-span-10 lg:col-start-2 lg:mb-16">
+          <h2 className="mb-4 text-center text-3xl font-bold sm:text-start md:text-xl lg:text-2xll">
+            مقایسه زیرساخت ابری و محلی
+          </h2>
+        </div>
+
+        <div className="col-span-4 px-4 md:col-span-8 lg:col-span-10 lg:col-start-2">
+          <div className="grid grid-cols-4 items-center gap-4 md:grid-cols-8">
+            <div className="col-span-4 md:col-span-2"></div>
+            <div className="col-span-2 ms-0 md:col-span-3 md:ms-32 lg:ms-40 xl:ms-48 2xl:ms-56">
+              <h4 className="text-xs font-bold tracking-wider text-muted-foreground md:text-sm">
+                سنتی
+              </h4>
+            </div>
+            <div className="col-span-2 ms-0 md:col-span-3 md:ms-32 lg:ms-40 xl:ms-48 2xl:ms-56">
+              <h4 className="text-xs font-bold tracking-wider md:text-sm">
+                بومی ابری
+              </h4>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-span-4 rounded-xl bg-background shadow-sm md:col-span-8 lg:col-span-10 lg:col-start-2">
+          {DATA.map((row, index) => (
+            <div
+              key={index}
+              className="group border-t px-4 transition-colors first:rounded-t-xl first:border-t-0 last:rounded-b-xl hover:bg-muted/50"
+            >
+              <div className="grid grid-cols-4 items-start gap-4 py-6 md:grid-cols-8 md:py-8">
+                <h3 className="col-span-4 mt-2 text-base font-bold md:col-span-2 md:text-lg">
+                  {row.title}
+                </h3>
+
+                <div className="col-span-2 flex flex-col md:col-span-3">
+                  <div className="ms-0 transition-colors group-hover:text-foreground md:ms-32 lg:ms-40 xl:ms-48 2xl:ms-56">
+                    <p className="mb-1 flex items-baseline text-xl font-bold text-foreground md:mb-2 md:text-2xll">
+                      {row.brick.value}
+                      {row.brick.unit && (
+                        <sup className="ms-0.5 text-xs text-foreground md:text-sm">
+                          {row.brick.unit}
+                        </sup>
+                      )}
+                    </p>
+                    <p className="text-xs leading-tight text-muted-foreground md:text-sm md:leading-normal">
+                      {row.brick.desc}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="col-span-2 flex flex-col md:col-span-3">
+                  <div className="ms-0 transition-colors group-hover:text-accent-foreground md:ms-32 lg:ms-40 xl:ms-48 2xl:ms-56">
+                    <p className="mb-1 flex items-baseline text-xl font-bold text-foreground md:mb-2 md:text-2xll">
+                      {row.ghost.value}
+                      {row.ghost.unit && (
+                        <sup className="ms-0.5 text-xs text-foreground md:text-sm">
+                          {row.ghost.unit}
+                        </sup>
+                      )}
+                    </p>
+                    <p className="text-xs leading-tight text-muted-foreground md:text-sm md:leading-normal">
+                      {row.ghost.desc}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="col-span-4 md:col-span-8 lg:col-span-10 lg:col-start-2">
+          <div className="flex flex-col space-y-4">
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground md:text-sm">
+                * بسته به نیازها و پیچیدگی پروژه متغیر است
+              </p>
+              <p className="text-xs text-muted-foreground md:text-sm">
+                ^ زمان استقرار بسته به نیازهای یکپارچه‌سازی ممکن است تغییر کند
+              </p>
+              <p className="text-xs text-muted-foreground md:text-sm">
+                # هزینه‌های اضافی برای قابلیت‌های ویژه ممکن است اعمال شود
+              </p>
+            </div>
+            <div className="flex justify-start">
+              <Button className="rounded-full px-8 transition-transform hover:scale-105">
+                شروع همکاری
+                                              <ArrowRight
+                  className="ms-2 h-4 w-4 rtl:rotate-180"
+                  aria-hidden="true"
+                />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare4 };
diff --git a/blocks/compare5.tsx b/blocks/compare5.tsx
new file mode 100644
index 0000000..f7c0385
--- /dev/null
+++ b/blocks/compare5.tsx
@@ -0,0 +1,78 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Compare5Props {
+  className?: string;
+}
+
+const Compare5 = ({ className }: Compare5Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <div className="text-center">
+          <h2 className="text-3xl font-medium sm:text-xl md:text-2xll lg:text-2xll">
+            مقایسه روش سنتی و مدرن
+                                </h2>
+          <p className="mx-auto mt-4 max-w-3xl text-lg text-muted-foreground sm:mt-6 sm:text-xl">
+            مزایا، محدودیت‌ها و ارزش هر رویکرد را برای انتخاب بهتر بررسی کنید.
+                                </p>
+        </div>
+        <div className="relative mt-8 grid gap-6 sm:mt-10 md:mt-12 lg:grid-cols-2 lg:gap-10 xl:gap-14">
+          <div className="relative h-full">
+            <div className="relative aspect-4/5 min-h-[400px] overflow-hidden rounded-2xl bg-accent sm:aspect-[0.9] sm:min-h-[480px] sm:rounded-3xl md:min-h-[520px]">
+              <img
+                src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
+                alt="تیم متخصص پروژه را برای شما می‌سازد"
+                className="h-full w-full object-cover"
+              />
+              <div className="absolute inset-x-0 bottom-0 h-[40%] bg-linear-to-t from-black via-black/50 to-transparent backdrop-blur-[2px] sm:h-[45%] md:h-[50%]" />
+              <div className="absolute bottom-0 w-full space-y-4 p-4 sm:p-6 lg:p-8 xl:p-10">
+                <h3 className="text-xl font-semibold text-white sm:text-xl lg:text-3xl">
+                  اجرای پروژه توسط تیم متخصص
+                                                  </h3>
+                <p className="mt-2 text-sm text-white/80 sm:text-base">
+                  بگذارید تیم متخصص ما همه‌چیز را برایتان انجام دهد. کل فرآیند
+                  توسعه را از ابتدا تا انتها مدیریت می‌کنیم و راه‌حلی دقیقاً
+                  مطابق نیازهای شما تحویل می‌دهیم.
+                </p>
+                <Button variant="outline">شروع همکاری</Button>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative h-full">
+            <div className="relative aspect-4/5 min-h-[400px] overflow-hidden rounded-2xl sm:aspect-[0.9] sm:min-h-[480px] sm:rounded-3xl md:min-h-[520px]">
+              <img
+                src="/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg"
+                alt="خودتان پروژه را پیش ببرید"
+                className="h-full w-full object-cover"
+              />
+              <div className="absolute inset-x-0 bottom-0 h-[40%] bg-linear-to-t from-black via-black/50 to-transparent backdrop-blur-[2px] sm:h-[45%] md:h-[50%]" />
+              <div className="absolute bottom-0 w-full space-y-4 p-4 sm:p-6 lg:p-8 xl:p-10">
+                <h3 className="text-xl font-semibold text-white sm:text-xl lg:text-3xl">
+                  توسعه مستقل با پلتفرم
+                                                  </h3>
+                <p className="mt-2 text-sm text-white/80 sm:text-base">
+                  کنترل پروژه را با پلتفرم جامع خودخدمات ما در دست بگیرید. به
+                  ابزارها و منابع قدرتمند دسترسی دارید و با راهنمایی متخصص در
+                  صورت نیاز، راه‌حل خود را با سرعت خودتان می‌سازید.
+                </p>
+                <Button variant="outline">شروع همکاری</Button>
+              </div>
+            </div>
+          </div>
+
+          <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background px-4 py-2 text-sm font-bold shadow-lg sm:px-6 sm:py-4 sm:text-base lg:px-8 lg:py-6">
+            یا
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare5 };
diff --git a/blocks/compare6.tsx b/blocks/compare6.tsx
new file mode 100644
index 0000000..fdaa949
--- /dev/null
+++ b/blocks/compare6.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { CircleCheck, CircleMinus, CircleX } from "lucide-react";
+import { useState } from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface Compare6Props {
+  className?: string;
+}
+
+const comparisonData = {
+  features: [
+    "هزینه اولیه",
+    "مقیاس‌پذیری",
+    "عملکرد",
+    "نگهداری",
+    "بازیابی داده",
+    "عمر مفید",
+  ],
+  models: [
+    {
+      name: "SSD",
+      attributes: [
+        { value: "متوسط تا بالا", status: "negative" },
+        { value: "محدود به ظرفیت", status: "neutral" },
+        { value: "بسیار سریع", status: "positive" },
+        { value: "نگهداری کم", status: "positive" },
+        { value: "دشوار", status: "negative" },
+        { value: "۵–۷ سال", status: "neutral" },
+      ],
+    },
+    {
+      name: "فضای ابری",
+      attributes: [
+        { value: "پرداخت بر اساس مصرف", status: "positive" },
+        { value: "مقیاس‌پذیری نامحدود", status: "positive" },
+        { value: "وابسته به اتصال", status: "neutral" },
+        { value: "سرویس مدیریت‌شده", status: "positive" },
+        { value: "وابسته به ارائه‌دهنده", status: "neutral" },
+        { value: "نامحدود", status: "positive" },
+      ],
+    },
+    {
+      name: "NAS",
+      attributes: [
+        { value: "هزینه اولیه بالا", status: "negative" },
+        { value: "قابل گسترش", status: "positive" },
+        { value: "محدود به شبکه", status: "neutral" },
+        { value: "نگهداری منظم", status: "negative" },
+        { value: "افزونگی داخلی", status: "positive" },
+        { value: "۷–۱۰ سال", status: "positive" },
+      ],
+    },
+  ],
+};
+
+const Compare6 = ({ className }: Compare6Props) => {
+  const [selectedTab, setSelectedTab] = useState(comparisonData.models[0].name);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <Tabs
+          defaultValue={comparisonData.models[0].name}
+          onValueChange={setSelectedTab}
+          className="mb-6 block md:hidden"
+        >
+          <TabsList className="w-full">
+            {comparisonData.models.map((model, idx) => (
+              <TabsTrigger key={idx} value={model.name}>
+                {model.name}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+        <div className="[&>div]:overflow-visible">
+          <Table className="table-fixed [&_td]:border [&_th]:border">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="sticky top-0 mb-24 w-1/4 bg-background p-5 text-base font-medium text-primary after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-border">
+                  ویژگی
+                </TableHead>
+                {comparisonData.models.map((model, idx) => (
+                  <TableHead
+                    key={idx}
+                    className={cn(
+                      "sticky top-0 mb-24 w-1/4 bg-background p-5 text-center text-base font-medium text-primary after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-border md:table-cell",
+                      model.name !== selectedTab ? "hidden" : "",
+                    )}
+                  >
+                    {model.name}
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {comparisonData.features.map((feature, rowIdx) => (
+                <TableRow key={rowIdx}>
+                  <TableCell className="p-5 font-semibold whitespace-normal">
+                    {feature}
+                  </TableCell>
+                  {comparisonData.models.map((model, colIdx) => (
+                    <TableCell
+                      key={colIdx}
+                      className={cn(
+                        "p-5 text-center whitespace-normal md:table-cell",
+                        model.name !== selectedTab ? "hidden" : "",
+                      )}
+                    >
+                      <div className="flex flex-col items-center gap-1 text-muted-foreground">
+                        {model.attributes[rowIdx].status === "positive" && (
+                          <span className="flex size-8 items-center justify-center rounded-full border border-green-200 bg-green-100">
+                            <CircleCheck
+                              className="size-4 text-green-700"
+                              aria-hidden="true"
+                            />
+                          </span>
+                        )}
+                        {model.attributes[rowIdx].status === "negative" && (
+                          <span className="flex size-8 items-center justify-center rounded-full border border-red-200 bg-red-100">
+                            <CircleX
+                              className="size-4 text-red-700"
+                              aria-hidden="true"
+                            />
+                          </span>
+                        )}
+                        {model.attributes[rowIdx].status === "neutral" && (
+                          <span className="flex size-8 items-center justify-center rounded-full border border-amber-200 bg-amber-100">
+                            <CircleMinus
+                              className="size-4 text-amber-700"
+                              aria-hidden="true"
+                            />
+                          </span>
+                        )}
+
+                        {model.attributes[rowIdx].value}
+                      </div>
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare6 };
diff --git a/blocks/compare7.tsx b/blocks/compare7.tsx
new file mode 100644
index 0000000..06a3e8e
--- /dev/null
+++ b/blocks/compare7.tsx
@@ -0,0 +1,166 @@
+import React from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface CompareRow {
+  feature: string;
+  primary: string;
+  secondary: string;
+  secondaryTooltip?: {
+    title: string;
+    description: string;
+  };
+}
+
+interface Compare7Props {
+  heading?: string;
+  description?: string;
+  primaryLabel?: string;
+  secondaryLabel?: string;
+  rows?: CompareRow[];
+  className?: string;
+}
+
+const Compare7 = ({
+  heading = "مقایسه راهکارها",
+  description = "مقایسه‌ای شفاف از قابلیت‌ها، مزایا و محدودیت‌های راهکارهای مختلف توسعه وب.",
+  primaryLabel = "Shadcn",
+  secondaryLabel = "Bootstrap",
+  rows = [
+    {
+      feature: "سیستم طراحی",
+      primary: "مدرن، مبتنی بر utility",
+      secondary: "کلاسیک، مبتنی بر کامپوننت",
+    },
+    {
+      feature: "سفارشی‌سازی",
+      primary: "بسیار قابل سفارشی‌سازی",
+      secondary: "محدود به‌صورت پیش‌فرض",
+    },
+    {
+      feature: "حالت تاریک",
+      primary: "داخلی",
+      secondary: "نیاز به پیکربندی اضافه",
+    },
+    {
+      feature: "پشتیبانی TypeScript",
+      primary: "درجه یک",
+      secondary: "جزئی",
+    },
+    {
+      feature: "دسترس‌پذیری",
+      primary: "تمرکز بر دسترس‌پذیری",
+      secondary: "پایه",
+    },
+    {
+      feature: "تعداد کامپوننت",
+      primary: "۳۰+",
+      secondary: "۲۵+",
+    },
+    {
+      feature: "مجوز",
+      primary: "MIT",
+      secondary: "MIT",
+    },
+    {
+      feature: "کامپوننت‌های ویژه",
+      primary: "موجود",
+      secondary: "شامل نمی‌شود",
+      secondaryTooltip: {
+        title: "ویژه نسخه تجاری",
+        description:
+          "برخی قابلیت‌های پیشرفته تنها در نسخه‌های تجاری یا با استفاده از افزونه‌های جانبی قابل استفاده هستند.",
+      },
+    },
+    {
+      feature: "کیت Figma",
+      primary: "بله",
+      secondary: "خیر",
+      secondaryTooltip: {
+        title: "فاقد کیت رسمی طراحی رابط",
+        description:
+          "چارچوب رابط کیت رسمی طراحی رابط ارائه نمی‌کند، اما نمونه‌های توسعه‌یافته توسط جامعه کاربری در دسترس هستند.",
+      },
+    },
+  ],
+  className,
+}: Compare7Props) => {
+  return (
+    <TooltipProvider>
+      <section
+        dir="rtl"
+        lang="fa"
+        className={cn("py-32 text-start", className)}
+      >
+        <div className="container">
+          <h2 className="mb-4 text-center text-xl font-semibold">{heading}</h2>
+          <p className="mb-8 text-center text-muted-foreground">
+            {description}
+          </p>
+          <div className="mx-auto max-w-3xl overflow-x-auto">
+            <Table className="rounded border text-start shadow-lg">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="px-6 py-4 font-semibold">
+                    ویژگی
+                  </TableHead>
+                  <TableHead className="bg-muted px-6 py-4 font-semibold">
+                    {primaryLabel}
+                  </TableHead>
+                  <TableHead className="px-6 py-4 font-semibold">
+                    {secondaryLabel}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody className="text-foreground">
+                {rows.map((row, index) => (
+                  <TableRow key={index}>
+                    <TableCell className="px-6 py-4">{row.feature}</TableCell>
+                    <TableCell className="bg-muted px-6 py-4">
+                      {row.primary}
+                    </TableCell>
+                    <TableCell className="relative px-6 py-4">
+                      {row.secondaryTooltip ? (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="cursor-pointer underline decoration-dotted">
+                              {row.secondary}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent sideOffset={8} className="max-w-xs">
+                            <span className="mb-1 block font-semibold">
+                              {row.secondaryTooltip.title}
+                            </span>
+                            {row.secondaryTooltip.description}
+                          </TooltipContent>
+                        </Tooltip>
+                      ) : (
+                        row.secondary
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </section>
+    </TooltipProvider>
+  );
+};
+
+export { Compare7 };
diff --git a/blocks/compare8.tsx b/blocks/compare8.tsx
new file mode 100644
index 0000000..a4008b3
--- /dev/null
+++ b/blocks/compare8.tsx
@@ -0,0 +1,201 @@
+import {
+  Accessibility,
+  BadgeCheck,
+  Figma,
+  Gem,
+  LayoutDashboard,
+  ListChecks,
+  Moon,
+  Settings2,
+  Type,
+} from "lucide-react";
+import { Check, X } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+type Feature = {
+  icon: React.ReactNode;
+  label: string;
+  description: string;
+  shadcn: true | false | "partial";
+  bootstrap: true | false | "partial";
+  tooltip?: { content: React.ReactNode };
+};
+
+const features: Feature[] = [
+  {
+    icon: <LayoutDashboard className="text-gray-500" aria-hidden="true" />,
+    label: "سیستم طراحی",
+    description: "معماری مدرن و مبتنی بر Utility که انعطاف بیشتری برای توسعه و سفارشی‌سازی فراهم می‌کند.",
+    shadcn: true,
+    bootstrap: true,
+  },
+  {
+    icon: <Settings2 className="text-gray-500" aria-hidden="true" />,
+    label: "سفارشی‌سازی",
+    description: "امکان شخصی‌سازی کامل بدون وابستگی به ساختارهای از پیش تعریف‌شده.",
+    shadcn: true,
+    bootstrap: false,
+  },
+  {
+    icon: <Moon className="text-gray-500" aria-hidden="true" />,
+    label: "حالت تاریک",
+    description: "پشتیبانی داخلی از حالت تیره بدون نیاز به تنظیمات پیچیده.",
+    shadcn: true,
+    bootstrap: false,
+  },
+  {
+    icon: <Type className="text-gray-500" aria-hidden="true" />,
+    label: "پشتیبانی زبان نوع‌ایمن",
+    description: "هماهنگی کامل با زبان نوع‌ایمن برای توسعه پروژه‌های بزرگ.",
+    shadcn: true,
+    bootstrap: "partial",
+  },
+  {
+    icon: <Accessibility className="text-gray-500" aria-hidden="true" />,
+    label: "دسترس‌پذیری",
+    description: "رعایت استانداردهای دسترس‌پذیری برای تجربه کاربری بهتر.",
+    shadcn: true,
+    bootstrap: false,
+  },
+  {
+    icon: <ListChecks className="text-gray-500" aria-hidden="true" />,
+    label: "تعداد کامپوننت",
+    description: "بیش از ۳۰ کامپوننت در برابر بیش از ۲۵ کامپوننت.",
+    shadcn: true,
+    bootstrap: true,
+  },
+  {
+    icon: <BadgeCheck className="text-gray-500" aria-hidden="true" />,
+    label: "مجوز",
+    description: "مجوز MIT برای هر دو.",
+    shadcn: true,
+    bootstrap: true,
+  },
+  {
+    icon: <Gem className="text-gray-500" aria-hidden="true" />,
+    label: "کامپوننت‌های ویژه",
+    description:
+      "کامپوننت‌های پیشرفته به‌صورت آماده ارائه می‌شوند و نیاز به توسعه مجدد را کاهش می‌دهند.",
+    shadcn: true,
+    bootstrap: false,
+    tooltip: {
+      content: (
+        <>
+          <span className="mb-1 block font-semibold">ویژه نسخه تجاری</span>
+          برخی کامپوننت‌های پیشرفته فقط در نسخه‌های پولی در دسترس‌اند یا به
+          کتابخانه‌های شخص ثالث نیاز دارند.
+        </>
+      ),
+    },
+  },
+  {
+    icon: <Figma className="text-gray-500" aria-hidden="true" />,
+    label: "کیت طراحی رابط",
+    description:
+      "کیت رسمی طراحی رابط برای ری یو آی موجود است؛ برای چارچوب رابط ارائه نمی‌شود.",
+    shadcn: true,
+    bootstrap: false,
+    tooltip: {
+      content: (
+        <>
+          <span className="mb-1 block font-semibold">
+            فاقد کیت رسمی طراحی رابط
+                              </span>
+          برای چارچوب رابط کیت رسمی طراحی رابط وجود ندارد، اما نمونه‌های توسعه‌یافته توسط جامعه کاربری قابل استفاده هستند.
+                        </>
+      ),
+    },
+  },
+];
+
+interface Compare8Props {
+  className?: string;
+}
+
+const Compare8 = ({ className }: Compare8Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container">
+        <h2 className="mb-4 text-center text-xl font-semibold">چرا این راهکار را انتخاب کنیم؟</h2>
+        <p className="mb-8 text-center text-muted-foreground">
+          مقایسه‌ای شفاف از قابلیت‌ها، عملکرد و ارزش واقعی هر راهکار.
+                          </p>
+        <div className="mx-auto max-w-4xl divide-y divide-border overflow-x-auto rounded-lg border-border bg-background shadow">
+          <div className="hidden rounded-t-lg bg-muted text-start text-base font-semibold text-foreground sm:flex">
+            <div className="w-16 px-6 py-4"></div>
+            <div className="flex-1 px-6 py-4">ویژگی</div>
+            <div className="w-40 px-6 py-4">ری یو آی</div>
+            <div className="w-40 px-6 py-4">چارچوب رابط</div>
+          </div>
+          {features.map((row) => (
+            <div
+              key={row.label}
+              className="flex flex-col items-start text-start sm:flex-row sm:items-center"
+            >
+              <div className="flex w-full items-center justify-start px-6 pt-4 sm:w-16 sm:justify-center sm:py-4">
+                {row.icon}
+                <span className="ms-3 text-base font-medium sm:hidden">
+                  {row.label}
+                </span>
+              </div>
+              <div className="w-full flex-1 px-6 pb-2 sm:py-4">
+                <div className="hidden font-medium sm:block">{row.label}</div>
+                <div className="mt-2 mb-2 text-sm text-muted-foreground sm:mb-0">
+                  {row.description}
+                </div>
+              </div>
+              <div className="flex w-full items-center justify-start px-6 pb-2 sm:w-40 sm:justify-center sm:py-4">
+                {row.shadcn === true ? (
+                  <Check
+                    className="size-5 text-green-600"
+                    aria-label="دارد"
+                  />
+                ) : row.shadcn === "partial" ? (
+                  <Check
+                    className="size-5 text-yellow-500"
+                    aria-label="جزئی"
+                  />
+                ) : (
+                  <X className="size-5 text-destructive" aria-label="ندارد" />
+                )}
+                <span className="ms-2 text-xs font-medium text-muted-foreground sm:hidden">
+                  ری یو آی
+                </span>
+              </div>
+              <div className="flex w-full items-center justify-start border-border px-6 pb-4 sm:w-40 sm:justify-center sm:border-0 sm:py-4">
+                {row.bootstrap === true ? (
+                  <Check
+                    className="size-5 text-green-600"
+                    aria-label="دارد"
+                  />
+                ) : row.bootstrap === "partial" ? (
+                  <Check
+                    className="size-5 text-yellow-500"
+                    aria-label="جزئی"
+                  />
+                ) : row.bootstrap === false && row.tooltip ? (
+                  <span className="inline-block h-5" aria-hidden="true">
+                    
+                  </span>
+                ) : (
+                  <X className="size-5 text-destructive" aria-label="ندارد" />
+                )}
+                <span className="ms-2 text-xs font-medium text-muted-foreground sm:hidden">
+                  چارچوب رابط
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare8 };
diff --git a/blocks/compare9.tsx b/blocks/compare9.tsx
new file mode 100644
index 0000000..e8da72a
--- /dev/null
+++ b/blocks/compare9.tsx
@@ -0,0 +1,337 @@
+"use client";
+
+import { CheckCircle, Minus, XCircle } from "lucide-react";
+import { useState } from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface Compare9Props {
+  className?: string;
+}
+
+const comparisonData = [
+  {
+    metric: "پنجره زمینه",
+    gpt4: { value: "۱۲۸هزار توکن", status: "worst" },
+    claude: { value: "۲۰۰هزار توکن", status: "neutral" },
+    gemini: { value: "۲ میلیون توکن", status: "best" },
+  },
+  {
+    metric: "سرعت پاسخ",
+    gpt4: { value: "۱٫۲ ثانیه", status: "best" },
+    claude: { value: "۱٫۸ ثانیه", status: "neutral" },
+    gemini: { value: "۲٫۲ ثانیه", status: "worst" },
+  },
+  {
+    metric: "تولید کد",
+    gpt4: { value: "۹۴٪", status: "neutral" },
+    claude: { value: "۹۵٪", status: "best" },
+    gemini: { value: "۸۸٪", status: "worst" },
+  },
+  {
+    metric: "امتیاز استدلال",
+    gpt4: { value: "۹۱ از ۱۰۰", status: "neutral" },
+    claude: { value: "۹۲ از ۱۰۰", status: "best" },
+    gemini: { value: "۸۶ از ۱۰۰", status: "worst" },
+  },
+  {
+    metric: "توکن‌های ورودی",
+    gpt4: { value: "۳٫۵۰ دلار/۱M", status: "worst" },
+    claude: { value: "۳٫۰۰ دلار/۱M", status: "neutral" },
+    gemini: { value: "۱٫۲۵ دلار/۱M", status: "best" },
+  },
+  {
+    metric: "توکن‌های خروجی",
+    gpt4: { value: "۱۴٫۰۰ دلار/۱M", status: "neutral" },
+    claude: { value: "۱۵٫۰۰ دلار/۱M", status: "worst" },
+    gemini: { value: "۵٫۰۰ دلار/۱M", status: "best" },
+  },
+  {
+    metric: "محدودیت نرخ",
+    gpt4: { value: "۵۰هزار RPM", status: "neutral" },
+    claude: { value: "۴۰هزار RPM", status: "worst" },
+    gemini: { value: "۶۰هزار RPM", status: "best" },
+  },
+  {
+    metric: "طرح رایگان",
+    gpt4: { value: "بسیار محدود", status: "worst" },
+    claude: { value: "محدود", status: "neutral" },
+    gemini: { value: "گسترده", status: "best" },
+  },
+];
+
+const Compare9 = ({ className }: Compare9Props) => {
+  const [hoveredModel, setHoveredModel] = useState<string | null>(null);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32 text-start", className)}
+    >
+      <div className="container mx-auto">
+        <div className="relative overflow-hidden p-8">
+          <div className="relative overflow-hidden border border-border/50 bg-background/50 backdrop-blur-sm">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-border/50">
+                  <TableHead className="font-semibold text-foreground">
+                    معیار
+                  </TableHead>
+                  <TableHead className="text-center font-semibold text-foreground">
+                    <div className="flex items-center justify-center gap-2">
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/openai-icon.svg"
+                        alt="OpenAI"
+                        width={16}
+                        height={16}
+                        className="h-4 w-4"
+                      />
+                      مدل هوشمند ۴
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-center font-semibold text-foreground">
+                    <div className="flex items-center justify-center gap-2">
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/claude-icon.svg"
+                        alt="Claude"
+                        width={16}
+                        height={16}
+                        className="h-4 w-4"
+                      />
+                      دستیار هوشمند ۳٫۵
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-center font-semibold text-foreground">
+                    <div className="flex items-center justify-center gap-2">
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/gemini-icon.svg"
+                        alt="Gemini"
+                        width={16}
+                        height={16}
+                        className="h-4 w-4"
+                      />
+                      هوش مصنوعی پیشرفته ۱٫۵
+                    </div>
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {comparisonData.map((row, index) => (
+                  <TableRow
+                    key={index}
+                    className="border-border/30 transition-colors hover:bg-muted/30"
+                  >
+                    <TableCell className="py-4 font-medium text-foreground">
+                      {row.metric}
+                    </TableCell>
+                    <TableCell
+                      className={cn(
+                        "cursor-pointer py-4 text-center font-medium transition-all duration-300",
+                        row.gpt4.status === "best"
+                          ? "bg-green-50 text-green-600 dark:bg-green-950/20"
+                          : row.gpt4.status === "worst"
+                            ? "bg-red-50 text-red-600 dark:bg-red-950/20"
+                            : "bg-muted/50 text-foreground",
+                        hoveredModel === "gpt4" &&
+                          "bg-red-50/80 dark:bg-red-950/30",
+                      )}
+                      onMouseEnter={() => setHoveredModel("gpt4")}
+                      onMouseLeave={() => setHoveredModel(null)}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        {row.gpt4.status === "best" && (
+                          <CheckCircle
+                            className="h-4 w-4 text-green-600"
+                            aria-hidden="true"
+                          />
+                        )}
+                        {row.gpt4.status === "worst" && (
+                          <XCircle
+                            className="h-4 w-4 text-red-600"
+                            aria-hidden="true"
+                          />
+                        )}
+                        {row.gpt4.status === "neutral" && (
+                          <Minus
+                            className="h-4 w-4 text-muted-foreground"
+                            aria-hidden="true"
+                          />
+                        )}
+                        <span>{row.gpt4.value}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell
+                      className={cn(
+                        "cursor-pointer py-4 text-center font-medium transition-all duration-300",
+                        row.claude.status === "best"
+                          ? "bg-green-50 text-green-600 dark:bg-green-950/20"
+                          : row.claude.status === "worst"
+                            ? "bg-red-50 text-red-600 dark:bg-red-950/20"
+                            : "bg-muted/50 text-foreground",
+                        hoveredModel === "claude" &&
+                          "bg-blue-50/80 dark:bg-blue-950/30",
+                      )}
+                      onMouseEnter={() => setHoveredModel("claude")}
+                      onMouseLeave={() => setHoveredModel(null)}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        {row.claude.status === "best" && (
+                          <CheckCircle
+                            className="h-4 w-4 text-green-600"
+                            aria-hidden="true"
+                          />
+                        )}
+                        {row.claude.status === "worst" && (
+                          <XCircle
+                            className="h-4 w-4 text-red-600"
+                            aria-hidden="true"
+                          />
+                        )}
+                        {row.claude.status === "neutral" && (
+                          <Minus
+                            className="h-4 w-4 text-muted-foreground"
+                            aria-hidden="true"
+                          />
+                        )}
+                        <span>{row.claude.value}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell
+                      className={cn(
+                        "cursor-pointer py-4 text-center font-medium transition-all duration-300",
+                        row.gemini.status === "best"
+                          ? "bg-green-50 text-green-600 dark:bg-green-950/20"
+                          : row.gemini.status === "worst"
+                            ? "bg-red-50 text-red-600 dark:bg-red-950/20"
+                            : "bg-muted/50 text-foreground",
+                        hoveredModel === "gemini" &&
+                          "bg-green-50/80 dark:bg-green-950/30",
+                      )}
+                      onMouseEnter={() => setHoveredModel("gemini")}
+                      onMouseLeave={() => setHoveredModel(null)}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        {row.gemini.status === "best" && (
+                          <CheckCircle
+                            className="h-4 w-4 text-green-600"
+                            aria-hidden="true"
+                          />
+                        )}
+                        {row.gemini.status === "worst" && (
+                          <XCircle
+                            className="h-4 w-4 text-red-600"
+                            aria-hidden="true"
+                          />
+                        )}
+                        {row.gemini.status === "neutral" && (
+                          <Minus
+                            className="h-4 w-4 text-muted-foreground"
+                            aria-hidden="true"
+                          />
+                        )}
+                        <span>{row.gemini.value}</span>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          <div className="relative mt-8 border border-border/50 bg-muted/20 p-6">
+            <div className="relative">
+              <h4 className="mb-4 font-mono text-sm font-semibold tracking-wider text-foreground">
+                تحلیل و ارزیابی فنی
+                                            </h4>
+              <div className="space-y-3 font-mono text-xs text-muted-foreground">
+                <div className="grid gap-2 md:grid-cols-3">
+                  <div
+                    className={cn(
+                      "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300",
+                      hoveredModel === "gpt4" &&
+                        "bg-red-50/20 shadow-lg ring-2 ring-red-500/50 dark:bg-red-950/10",
+                    )}
+                  >
+                    <div className="mb-1 font-medium text-foreground">
+                      مدل هوشمند ۴
+                    </div>
+                    <div className="space-y-1">
+                      <div>• تأخیر پاسخ: ۱٫۲ ثانیه (بهترین)</div>
+                      <div>• دقت کد: ۹۴٪ (متوسط)</div>
+                      <div>• امتیاز استدلال: ۹۱ از ۱۰۰ (متوسط)</div>
+                      <div>• هزینه ورودی: ۳٫۵۰ دلار/۱M توکن (ضعیف‌ترین)</div>
+                      <div>• محدودیت نرخ: ۵۰هزار RPM (متوسط)</div>
+                    </div>
+                  </div>
+                  <div
+                    className={cn(
+                      "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300",
+                      hoveredModel === "claude" &&
+                        "bg-blue-50/20 shadow-lg ring-2 ring-blue-500/50 dark:bg-blue-950/10",
+                    )}
+                  >
+                    <div className="mb-1 font-medium text-foreground">
+                      دستیار هوشمند ۳٫۵
+                    </div>
+                    <div className="space-y-1">
+                      <div>• تأخیر پاسخ: ۱٫۸ ثانیه (متوسط)</div>
+                      <div>• دقت کد: ۹۵٪ (بهترین)</div>
+                      <div>• امتیاز استدلال: ۹۲ از ۱۰۰ (بهترین)</div>
+                      <div>• هزینه ورودی: ۳٫۰۰ دلار/۱M توکن (متوسط)</div>
+                      <div>• محدودیت نرخ: ۴۰هزار RPM (ضعیف‌ترین)</div>
+                    </div>
+                  </div>
+                  <div
+                    className={cn(
+                      "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300",
+                      hoveredModel === "gemini" &&
+                        "bg-green-50/20 shadow-lg ring-2 ring-green-500/50 dark:bg-green-950/10",
+                    )}
+                  >
+                    <div className="mb-1 font-medium text-foreground">
+                      هوش مصنوعی پیشرفته ۱٫۵
+                    </div>
+                    <div className="space-y-1">
+                      <div>• پنجره زمینه: ۲ میلیون توکن (بهترین)</div>
+                      <div>• هزینه ورودی: ۱٫۲۵ دلار/۱M توکن (بهترین)</div>
+                      <div>• هزینه خروجی: ۵٫۰۰ دلار/۱M توکن (بهترین)</div>
+                      <div>• محدودیت نرخ: ۶۰هزار RPM (بهترین)</div>
+                      <div>• طرح رایگان: گسترده (بهترین)</div>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-4 rounded border border-border/30 bg-background/50 p-3">
+                  <div className="mb-2 font-medium text-foreground">
+                    جمع‌بندی مقایسه
+                                                        </div>
+                  <div className="space-y-1">
+                    <div>
+                      • مدل هوشمند ۴: مناسب برای پاسخ‌گویی سریع و تولید کد باکیفیت.
+                                                              </div>
+                    <div>
+                      • دستیار هوشمند ۳٫۵: انتخابی مناسب برای تحلیل، استدلال و نگارش دقیق.
+                                                              </div>
+                    <div>
+                      • هوش مصنوعی پیشرفته ۱٫۵: گزینه‌ای اقتصادی با پنجره زمینه بزرگ و هزینه پایین.
+                                                              </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compare9 };
diff --git a/blocks/compliance1.tsx b/blocks/compliance1.tsx
new file mode 100644
index 0000000..ffaca23
--- /dev/null
+++ b/blocks/compliance1.tsx
@@ -0,0 +1,126 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface ComplianceBadge {
+  image: string;
+  alt: string;
+}
+
+interface ComplianceFeature {
+  title: string;
+  description: string;
+  badgeImage: string;
+  badgeAlt: string;
+}
+
+interface Compliance1Props {
+  tagline?: string;
+  heading?: string;
+  description?: string;
+  badges?: ComplianceBadge[];
+  features?: ComplianceFeature[];
+  className?: string;
+}
+
+const Compliance1 = ({
+  tagline = "امنیت و انطباق",
+  heading = "زیرساختی امن و منطبق با استانداردهای بین‌المللی",
+  description =
+    "پلتفرم ما با رعایت استانداردهای بین‌المللی امنیت و حریم خصوصی، به سازمان‌ها کمک می‌کند الزامات قانونی، حفاظت از داده‌ها و فرایندهای ممیزی را با اطمینان مدیریت کنند.",
+  badges = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/compliance/GDPR.svg",
+      alt: "GDPR",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/compliance/CCPA.svg",
+      alt: "CCPA",
+    },
+  ],
+  features = [
+    {
+      title: "ثبت خودکار رویدادها و ممیزی",
+      description:
+        "تمام فعالیت‌های کاربران به‌صورت خودکار ثبت و زمان‌بندی می‌شوند تا گزارش‌های ممیزی دقیق، قابل استناد و غیرقابل تغییر در دسترس باشد.",
+      badgeImage:
+        "/block-media/shadcnblocks/block/compliance/ISO-27001.svg",
+      badgeAlt: "ISO 27001",
+    },
+    {
+      title: "پایش مستمر انطباق",
+      description:
+        "سامانه به‌صورت مداوم وضعیت انطباق با استانداردها و الزامات امنیتی را بررسی کرده و در صورت بروز مغایرت هشدار می‌دهد.",
+      badgeImage:
+        "/block-media/shadcnblocks/block/compliance/ISO-27017.svg",
+      badgeAlt: "ISO 27017",
+    },
+    {
+      title: "گزارش‌های آماده ممیزی",
+      description:
+        "گزارش‌های موردنیاز برای ممیزی، ارزیابی امنیت و الزامات قانونی تنها با چند کلیک تولید می‌شوند.",
+      badgeImage:
+        "/block-media/shadcnblocks/block/compliance/ISO-27018.svg",
+      badgeAlt: "ISO 27018",
+    },
+  ],
+  className,
+}: Compliance1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
+      <div className="container">
+        <div className="grid gap-9 lg:grid-cols-2">
+          <div className="flex flex-col gap-5">
+            <Badge variant="outline" className="gap-1.5 bg-background">
+              <span className="size-1.5 rounded-full bg-green-500" />
+              {tagline}
+            </Badge>
+            <h1 className="text-xl font-medium text-balance lg:text-2xll">
+              {heading}
+            </h1>
+            <p className="text-lg text-muted-foreground">{description}</p>
+            <div className="flex items-center gap-6">
+              {badges.map((badge, index) => (
+                <img
+                  key={index}
+                  src={badge.image}
+                  alt={badge.alt}
+                  className="h-22 opacity-50 grayscale md:h-28 dark:invert"
+                />
+              ))}
+            </div>
+          </div>
+          <div className="rounded-2xl border border-border bg-background">
+            {features.map((feature, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "relative overflow-hidden p-6 lg:px-8 lg:py-11",
+                  index === 0 && "border-b border-border",
+                  index === features.length - 1 && "border-t border-border",
+                )}
+              >
+                <div>
+                  <h2 className="text-xl font-medium lg:text-xl">
+                    {feature.title}
+                  </h2>
+                  <p className="mt-2 w-3/4 pe-10 text-sm text-muted-foreground md:text-base">
+                    {feature.description}
+                  </p>
+                </div>
+                <img
+                  src={feature.badgeImage}
+                  alt={feature.badgeAlt}
+                  className="absolute end-4 -bottom-7 size-24 text-muted-foreground opacity-80 grayscale lg:end-8 lg:size-32 dark:invert"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compliance1 };
diff --git a/blocks/compliance5.tsx b/blocks/compliance5.tsx
new file mode 100644
index 0000000..48a9833
--- /dev/null
+++ b/blocks/compliance5.tsx
@@ -0,0 +1,64 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Compliance5Props {
+  heading?: string;
+  description?: string;
+  ctaLabel?: string;
+  className?: string;
+}
+
+const Compliance5 = ({
+  heading = "انطباق سازمانی مطابق استانداردهای جهانی",
+  description =
+    "با رعایت استانداردهای شناخته‌شده بین‌المللی، امنیت اطلاعات و الزامات قانونی سازمان خود را با اطمینان مدیریت کنید.",
+  ctaLabel = "مشاهده جزئیات",
+  className,
+}: Compliance5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-16">
+          <div className="space-y-4 text-center">
+            <h2 className="text-xl font-bold tracking-tight">{heading}</h2>
+            <p className="mx-auto max-w-2xl text-xl text-muted-foreground">
+              {description}
+            </p>
+          </div>
+          <div className="mx-auto grid w-full max-w-3xl grid-cols-2 place-items-center gap-16 md:grid-cols-4">
+            <img
+              src="/block-media/shadcnblocks/block/compliance/AICPA-SOC.svg"
+              alt="استاندارد امنیت سازمانی"
+              className="max-h-32 dark:invert"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/compliance/ISO-27001.svg"
+              alt="استاندارد امنیت اطلاعات"
+              className="max-h-32 dark:invert"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/compliance/CCPA.svg"
+              alt="CCPA"
+              className="max-h-32 dark:invert"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/compliance/GDPR.svg"
+              alt="GDPR"
+              className="max-h-32 dark:invert"
+            />
+          </div>
+          <div className="flex justify-center">
+            <Button size="lg">
+              {ctaLabel}
+              <ArrowUpRight className="size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compliance5 };
diff --git a/blocks/compliance6.tsx b/blocks/compliance6.tsx
new file mode 100644
index 0000000..587a09c
--- /dev/null
+++ b/blocks/compliance6.tsx
@@ -0,0 +1,140 @@
+import { LockKeyhole, ShieldCheck, Users } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface ComplianceCertification {
+  image: string;
+  alt: string;
+  label: string;
+}
+
+interface ComplianceFeatureCard {
+  title: string;
+  description: string;
+}
+
+interface Compliance6Props {
+  tagline?: string;
+  heading?: string;
+  description?: string;
+  certifications?: ComplianceCertification[];
+  features?: ComplianceFeatureCard[];
+  className?: string;
+}
+
+const defaultCertifications: ComplianceCertification[] = [
+  {
+    image: "/block-media/shadcnblocks/block/compliance/ISO-27001.svg",
+    alt: "استاندارد امنیت اطلاعات",
+    label: "استاندارد امنیت اطلاعات",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/compliance/GDPR.svg",
+    alt: "GDPR",
+    label: "GDPR",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/compliance/CCPA.svg",
+    alt: "CCPA",
+    label: "CCPA",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/compliance/AICPA-SOC.svg",
+    alt: "AICPA SOC",
+    label: "AICPA SOC",
+  },
+];
+
+const defaultFeatures: ComplianceFeatureCard[] = [
+  {
+    title: "گواهی‌ها و استانداردهای امنیتی",
+    description:
+      "تمام فرایندهای سازمان با استفاده از استانداردهای معتبر امنیت اطلاعات محافظت می‌شوند.",
+  },
+  {
+    title: "مالکیت و کنترل کامل داده‌ها",
+    description:
+      "داده‌های شما متعلق به سازمان شماست و دسترسی، نگهداری و اشتراک‌گذاری آن کاملاً تحت کنترل شما قرار دارد.",
+  },
+  {
+    title: "مدیریت دقیق دسترسی کاربران",
+    description:
+      "سطوح دسترسی کاربران، تیم‌ها و سرویس‌ها را متناسب با نقش هر فرد مدیریت کنید.",
+  },
+];
+
+const featureIcons = [LockKeyhole, ShieldCheck, Users] as const;
+
+const Compliance6 = ({
+  tagline = "امنیت و انطباق",
+  heading = "اتوماسیون سازمانی با امنیت و اعتماد",
+  description =
+    "گردش‌کارهای حیاتی سازمان را با امنیت، پایداری و مقیاس‌پذیری بالا اجرا کنید و از حفاظت کامل اطلاعات در تمام مراحل اطمینان داشته باشید.",
+  certifications = defaultCertifications,
+  features = defaultFeatures,
+  className,
+}: Compliance6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-start justify-between gap-8 xl:flex-row">
+          <div className="flex flex-col gap-6 lg:max-w-xl">
+            <div className="flex items-center gap-1">
+              <span className="h-2 w-4 bg-primary" />
+              <span className="text-xs">{tagline}</span>
+            </div>
+            <h2 className="text-xl font-medium md:text-2xll lg:text-2xll">
+              {heading}
+            </h2>
+            <p className="md:text-xl">{description}</p>
+          </div>
+          <div className="grid w-full shrink-0 grid-cols-2 gap-px border border-border bg-border md:w-auto md:grid-cols-4">
+            {certifications.map((cert) => (
+              <div
+                key={cert.label}
+                className="flex flex-col items-center gap-2 bg-background px-6 py-4 md:px-8 md:py-6"
+              >
+                <img
+                  src={cert.image}
+                  alt={cert.alt}
+                  className="w-full max-w-16 md:max-w-24 dark:invert"
+                />
+                <p className="text-center text-sm font-semibold" dir="rtl">
+                  {cert.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mt-20 w-full border border-border">
+          <div className="relative hidden h-16 border-b border-border md:block">
+            <div className="absolute inset-0 h-full w-full bg-[repeating-linear-gradient(-45deg,theme(colors.border)_0_1px,transparent_1px_16px)]"></div>
+          </div>
+          <div className="grid grid-cols-1 gap-px bg-border lg:grid-cols-3">
+            {features.map((feature, index) => {
+              const Icon = featureIcons[index] ?? LockKeyhole;
+              return (
+                <div
+                  key={feature.title}
+                  className="flex flex-col justify-between gap-8 bg-background px-6 py-10 md:gap-16"
+                >
+                  <Icon className="size-8" />
+                  <div className="flex flex-col gap-6 md:gap-10">
+                    <h3 className="text-xl font-medium md:text-3xl">
+                      {feature.title}
+                    </h3>
+                    <p className="text-muted-foreground md:text-lg">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compliance6 };
diff --git a/blocks/compliance7.tsx b/blocks/compliance7.tsx
new file mode 100644
index 0000000..45658c1
--- /dev/null
+++ b/blocks/compliance7.tsx
@@ -0,0 +1,152 @@
+import { DottedGlowBackground } from "@/components/aceternity/dotted-glow-background";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  title: string;
+  description: string;
+}
+
+interface Certification {
+  src: string;
+  alt: string;
+  status: string;
+}
+
+interface Compliance7Props {
+  heading?: string;
+  description?: string;
+  features?: Feature[];
+  certifications?: Certification[];
+  complianceHeading?: string;
+  complianceDescription?: string;
+  className?: string;
+}
+
+const defaultFeatures: Feature[] = [
+  {
+    title: "اتصال‌های امن و توسعه‌پذیر",
+    description:
+      "اتصال‌های مستند و پایدار امکان یکپارچه‌سازی سریع با سامانه‌های داخلی و خارجی را فراهم می‌کنند.",
+  },
+  {
+    title: "پشتیبانی تخصصی ۲۴ ساعته",
+    description:
+      "تیم پشتیبانی در تمام ساعات شبانه‌روز آماده رسیدگی به مسائل فنی و حفظ پایداری سرویس است.",
+  },
+  {
+    title: "زیرساخت امن نگهداری داده",
+    description:
+      "اطلاعات با رمزنگاری، نسخه‌های پشتیبان منظم و زیرساختی قابل اعتماد نگهداری می‌شوند.",
+  },
+  {
+    title: "آماده برای استانداردهای بین‌المللی",
+    description:
+      "معماری سامانه به‌گونه‌ای طراحی شده که پاسخ‌گوی الزامات استانداردهای بین‌المللی امنیت و انطباق باشد.",
+  },
+];
+
+const defaultCertifications: Certification[] = [
+  {
+    src: "/block-media/shadcnblocks/block/compliance/AICPA-SOC.svg",
+    alt: "استاندارد امنیت سازمانی",
+    status: "در حال اخذ",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/compliance/ISO-27001.svg",
+    alt: "استاندارد امنیت اطلاعات",
+    status: "در حال اخذ",
+  },
+];
+
+const FeatureItem = ({ title, description }: Feature) => {
+  return (
+    <div className="flex flex-col gap-2 text-start">
+      <p className="font-semibold">{title}</p>
+      <p className="font-medium text-muted-foreground">{description}</p>
+    </div>
+  );
+};
+
+const Compliance7 = ({
+  heading = "زیرساخت ابری امن برای سازمان‌های بزرگ",
+  description =
+    "راهکاری جامع برای استقرار، مدیریت و توسعه سرویس‌های ابری با تمرکز بر امنیت، پایداری و عملکرد بالا.",
+  features = defaultFeatures,
+  certifications = defaultCertifications,
+  complianceHeading = "امنیت، پایداری و مقیاس‌پذیری",
+  complianceDescription =
+    "زیرساختی طراحی‌شده برای رشد سازمان که با استانداردهای امنیتی بین‌المللی همسو بوده و مسیر دریافت گواهی‌های معتبر را پشتیبانی می‌کند.",
+  className,
+}: Compliance7Props = {}) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative grid lg:grid-cols-2">
+          <div className="absolute top-0 h-5 w-full">
+            <DottedGlowBackground
+              radius={1.2}
+              gap={6}
+              speedMin={0.2}
+              speedMax={5}
+              speedScale={1}
+              darkColor="rgba(255, 255, 255, 0.7)"
+            />
+          </div>
+          <div className="absolute bottom-0 h-5 w-full">
+            <DottedGlowBackground
+              radius={1.2}
+              gap={6}
+              speedMin={0.2}
+              speedMax={5}
+              speedScale={1}
+              darkColor="rgba(255, 255, 255, 0.7)"
+            />
+          </div>
+
+          <div className="flex flex-col">
+            <div className="border border-dashed bg-gradient-to-b from-foreground/10 to-background p-10 sm:p-20">
+              <FeatureItem title={heading} description={description} />
+            </div>
+            <div className="grid gap-10 border border-t-0 border-dashed p-10 sm:p-20 md:grid-cols-2">
+              {features.map((feature) => (
+                <FeatureItem
+                  key={feature.title}
+                  title={feature.title}
+                  description={feature.description}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="flex h-full flex-col items-center justify-center gap-20 border border-s-0 border-dashed bg-gradient-to-tr from-foreground/10 to-background to-30% p-10 sm:p-20 dark:from-foreground/20">
+            <div className="flex items-center gap-4 sm:gap-10">
+              {certifications.map((certification) => {
+                return (
+                  <div
+                    key={certification.alt}
+                    className="flex flex-col items-center justify-center gap-2"
+                  >
+                    <Badge variant="outline">{certification.status}</Badge>
+                    <img
+                      src={certification.src}
+                      alt={certification.alt}
+                      className="size-28 sm:size-34 dark:invert"
+                    />
+                  </div>
+                );
+              })}
+            </div>
+            <div className="flex flex-col gap-2 text-center">
+              <p className="text-xl font-semibold">{complianceHeading}</p>
+              <p className="font-medium text-muted-foreground">
+                {complianceDescription}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Compliance7 };
diff --git a/blocks/contact1.tsx b/blocks/contact1.tsx
new file mode 100644
index 0000000..5b051e3
--- /dev/null
+++ b/blocks/contact1.tsx
@@ -0,0 +1,388 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  fullName: z.string().min(1, "نام و نام خانوادگی الزامی است"),
+  company: z.string().optional(),
+  phone: z.string().min(1, "شماره تلفن الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  country: z.string().optional(),
+  companySize: z.string().optional(),
+  referral: z.string().optional(),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact1Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact1 = ({ className, onSubmit }: Contact1Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      fullName: "",
+      company: "",
+      phone: "",
+      email: "",
+      country: "",
+      companySize: "",
+      referral: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
+      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_15%_at_40%_55%,hsl(var(--accent))_0%,transparent_100%)] lg:bg-[radial-gradient(ellipse_12%_20%_at_60%_45%,hsl(var(--accent))_0%,transparent_100%)]"></div>
+      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_20%_at_70%_75%,hsl(var(--accent))_0%,transparent_80%)] lg:bg-[radial-gradient(ellipse_15%_30%_at_70%_65%,hsl(var(--accent))_0%,transparent_80%)]"></div>
+      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(hsl(var(--accent-foreground)/0.1)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_60%_at_65%_50%,#000_0%,transparent_80%)] [background-size:8px_8px]"></div>
+      <div className="container grid w-full grid-cols-1 gap-x-32 overflow-hidden lg:grid-cols-2">
+        <div className="w-full pb-10 md:space-y-10 md:pb-0">
+          <div className="space-y-4 md:max-w-[40rem]">
+            <h1 className="text-xl font-medium lg:text-2xll">
+              درخواست دمو و مشاوره تخصصی
+                                      </h1>
+            <div className="text-muted-foreground md:text-base lg:text-lg lg:leading-7">
+              در یک جلسه دمو، قابلیت‌های محصول را متناسب با نیازهای سازمان خود بررسی کنید و پاسخ پرسش‌های فنی و تجاری را از کارشناسان ما دریافت کنید.
+                                      </div>
+          </div>
+          <div className="hidden md:block">
+            <div className="space-y-16 pb-20 lg:pb-0">
+              <div className="space-y-6">
+                <div className="mt-16 flex overflow-hidden">
+                  <Avatar className="size-11 border border-border">
+                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                    <AvatarFallback>SB</AvatarFallback>
+                  </Avatar>
+                  <Avatar className="-ms-4 size-11 border border-border">
+                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
+                    <AvatarFallback>RA</AvatarFallback>
+                  </Avatar>
+                  <Avatar className="-ms-4 size-11 border border-border">
+                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
+                    <AvatarFallback>JS</AvatarFallback>
+                  </Avatar>
+                </div>
+                <div className="space-y-4">
+                  <p className="text-sm font-semibold">
+                    در این جلسه چه مواردی بررسی می‌شود؟
+                                                        </p>
+                  <div className="flex items-center gap-2.5">
+                    <Check className="size-5 shrink-0 text-muted-foreground" />
+                    <p className="text-sm">
+                      معرفی قابلیت‌ها بر اساس نیازهای واقعی کسب‌وکار شما
+                                                              </p>
+                  </div>
+                  <div className="flex items-center gap-2.5">
+                    <Check className="size-5 shrink-0 text-muted-foreground" />
+                    <p className="text-sm">
+                      بررسی بهترین راهکار برای پیاده‌سازی و استقرار
+                                                              </p>
+                  </div>
+                  <div className="flex items-center gap-2.5">
+                    <Check className="size-5 shrink-0 text-muted-foreground" />
+                    <p className="text-sm">پاسخ به پرسش‌های فنی، تجاری و اجرایی</p>
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center gap-12">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/astro-wordmark.svg"
+                  alt="لوگوی Astro"
+                  className="h-6 dark:invert"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+                  alt="لوگوی ری یو آی"
+                  className="h-5 dark:invert"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex w-full justify-center lg:mt-2.5">
+          <div className="relative flex w-full max-w-[30rem] min-w-[20rem] flex-col items-center overflow-visible md:min-w-[24rem]">
+            <form
+              onSubmit={form.handleSubmit(handleFormSubmit)}
+              className="z-10 w-full"
+            >
+              <div className="w-full rounded-xl border border-border bg-card px-6 py-8 shadow-sm">
+                {isSubmitted && (
+                  <div
+                    className={cn(
+                      "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                      showSuccess ? "opacity-100" : "opacity-0",
+                    )}
+                  >
+                    <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                      درخواست شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                              </p>
+                  </div>
+                )}
+
+                <FieldGroup className="gap-6">
+                  <Controller
+                    control={form.control}
+                    name="fullName"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام و نام خانوادگی{" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="علی محمدی"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="company"
+                    render={({ field }) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>شرکت</FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          placeholder="نام شرکت یا سازمان"
+                        />
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="phone"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          شماره تلفن{" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="۰۹۱۲ ۳۴۵ ۶۷۸۹"
+                          dir="rtl"
+                          className="text-start"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="email"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          ایمیل (کاری){" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          type="email"
+                          aria-invalid={fieldState.invalid}
+                          placeholder="example@company.com"
+                          dir="rtl"
+                          className="text-start"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="country"
+                    render={({ field }) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>کشور</FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger id={field.name} className="w-full">
+                            <SelectValue placeholder="انتخاب کشور" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="ir">ایران</SelectItem>
+                            <SelectItem value="aus">استرالیا</SelectItem>
+                            <SelectItem value="usa">
+                              ایالات متحده
+                            </SelectItem>
+                            <SelectItem value="uk">بریتانیا</SelectItem>
+                            <SelectItem value="ca">کانادا</SelectItem>
+                            <SelectItem value="de">آلمان</SelectItem>
+                            <SelectItem value="fr">فرانسه</SelectItem>
+                            <SelectItem value="it">ایتالیا</SelectItem>
+                            <SelectItem value="es">اسپانیا</SelectItem>
+                            <SelectItem value="nl">هلند</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="companySize"
+                    render={({ field }) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>
+                          اندازه شرکت
+                        </FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger id={field.name} className="w-full">
+                            <SelectValue placeholder="۱–۱۰ نفر" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="1-10">۱–۱۰ نفر</SelectItem>
+                            <SelectItem value="11-50">۱۱–۵۰ نفر</SelectItem>
+                            <SelectItem value="51-200">۵۱–۲۰۰ نفر</SelectItem>
+                            <SelectItem value="200+">بیش از ۲۰۰ نفر</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="referral"
+                    render={({ field }) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>
+                          چطور با ما آشنا شدید؟
+                        </FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger id={field.name} className="w-full">
+                            <SelectValue placeholder="جستجو در گوگل" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="search">جستجو در گوگل</SelectItem>
+                            <SelectItem value="social">
+                              شبکه‌های اجتماعی
+                            </SelectItem>
+                            <SelectItem value="email">ایمیل</SelectItem>
+                            <SelectItem value="referral">معرفی توسط همکار یا مشتری</SelectItem>
+                            <SelectItem value="other">سایر</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    )}
+                  />
+
+                  {form.formState.errors.root && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.root.message}
+                    </p>
+                  )}
+
+                  <div className="flex w-full flex-col justify-end space-y-3 pt-2">
+                    <Button
+                      type="submit"
+                      disabled={form.formState.isSubmitting}
+                      className="gap-2"
+                    >
+                      {form.formState.isSubmitting ? (
+                        <>
+                          <LoaderIcon className="size-4 animate-spin" />
+                          در حال ثبت...
+                        </>
+                      ) : (
+                        "رزرو دمو"
+                      )}
+                    </Button>
+                    <div className="text-xs text-muted-foreground">
+                      برای آگاهی از نحوه جمع‌آوری، نگهداری و استفاده از اطلاعات شخصی،{" "}
+                      <a href="#" className="underline">
+                        سیاست حریم خصوصی
+                      </a>{" "}
+                      را مطالعه کنید.
+                                                              </div>
+                  </div>
+                </FieldGroup>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact1 };
diff --git a/blocks/contact10.tsx b/blocks/contact10.tsx
new file mode 100644
index 0000000..8f7e4e2
--- /dev/null
+++ b/blocks/contact10.tsx
@@ -0,0 +1,336 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Facebook, Linkedin, LoaderIcon, Twitter } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  fullName: z.string().min(1, "نام و نام خانوادگی الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  company: z.string().optional(),
+  employees: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact10Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact10 = ({ className, onSubmit }: Contact10Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      fullName: "",
+      email: "",
+      company: "",
+      employees: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative mx-2.5 mt-2.5 rounded-t-2xl rounded-b-[36px] bg-linear-to-b from-amber-50 via-background to-background py-32 lg:mx-4 dark:from-amber-950",
+        className,
+      )}
+    >
+      <div className="container max-w-2xl">
+        <h1 className="text-center text-xl font-semibold tracking-tight lg:text-2xll">
+          تماس با ما
+        </h1>
+        <p className="mt-4 text-center leading-snug font-medium text-muted-foreground lg:mx-auto">
+          فرم را تکمیل کنید تا در کوتاه‌ترین زمان ممکن درخواست شما بررسی و پاسخ داده شود.
+                          </p>
+
+        <div className="mt-10 flex justify-between gap-8 max-sm:flex-col md:mt-14 lg:mt-20 lg:gap-12">
+          <div>
+            <h2 className="font-semibold">دفتر مرکزی</h2>
+            <p className="mt-3 text-muted-foreground" dir="rtl">
+              Valiasr St, Tehran 15138
+              <br />
+              Iran
+            </p>
+          </div>
+
+          <div>
+            <h2 className="font-semibold">ارتباط از طریق ایمیل</h2>
+            <div className="mt-3">
+              <div>
+                <p className="text-primary">فرصت‌های شغلی</p>
+                <a
+                  href="mailto:support@example.com"
+                  className="text-muted-foreground hover:text-foreground"
+                  dir="rtl"
+                >
+                  پشتیبانی@نمونه.ایران
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h2 className="font-semibold">ما را دنبال کنید</h2>
+            <div className="mt-3 flex gap-6 lg:gap-10">
+              <a
+                href="#"
+                aria-label="فیسبوک"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <Facebook className="size-5" />
+              </a>
+              <a
+                href="#"
+                aria-label="توییتر"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <Twitter className="size-5" />
+              </a>
+              <a
+                href="#"
+                aria-label="لینکدین"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <Linkedin className="size-5" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <DashedLine className="my-12" />
+
+        <div className="mx-auto">
+          <h2 className="text-lg font-semibold">درخواست‌ها</h2>
+
+          {isSubmitted && (
+            <div
+              className={cn(
+                "mt-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                showSuccess ? "opacity-100" : "opacity-0",
+              )}
+            >
+              <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                پیام شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                            </p>
+            </div>
+          )}
+
+          <form onSubmit={form.handleSubmit(handleFormSubmit)} className="mt-8">
+            <FieldGroup>
+              <Controller
+                control={form.control}
+                name="fullName"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      نام و نام خانوادگی{" "}
+                      <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      placeholder="علی محمدی"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="email"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      ایمیل کاری{" "}
+                      <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      type="email"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="name@company.com"
+                      dir="rtl"
+                      className="text-start"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="company"
+                render={({ field }) => (
+                  <Field>
+                    <FieldLabel htmlFor={field.name}>نام شرکت</FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      placeholder="نام شرکت یا سازمان"
+                    />
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="employees"
+                render={({ field }) => (
+                  <Field>
+                    <FieldLabel htmlFor={field.name}>
+                      تعداد کارمندان
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      placeholder="مثال: ۱۰ تا ۵۰ نفر"
+                    />
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="message"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      شرح درخواست <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Textarea
+                      {...field}
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      placeholder="جزئیات درخواست، سؤال یا پروژه خود را بنویسید."
+                      className="min-h-[120px] resize-none"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              {form.formState.errors.root && (
+                <p className="text-sm text-destructive">
+                  {form.formState.errors.root.message}
+                </p>
+              )}
+
+              <div className="flex justify-start">
+                <Button
+                  size="lg"
+                  type="submit"
+                  className="gap-2"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="size-4 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    "ارسال پیام"
+                  )}
+                </Button>
+              </div>
+            </FieldGroup>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+interface DashedLineProps {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+const DashedLine = ({
+  orientation = "horizontal",
+  className,
+}: DashedLineProps) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <div
+      className={cn(
+        "relative text-muted-foreground",
+        isHorizontal ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          isHorizontal
+            ? [
+                "h-px w-full",
+                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
+              ]
+            : [
+                "h-full w-px",
+                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
+                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
+              ],
+        )}
+      />
+    </div>
+  );
+};
+
+export { Contact10 };
diff --git a/blocks/contact11.tsx b/blocks/contact11.tsx
new file mode 100644
index 0000000..010c9e5
--- /dev/null
+++ b/blocks/contact11.tsx
@@ -0,0 +1,307 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Facebook, Linkedin, LoaderIcon, Twitter } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  fullName: z.string().min(1, "نام و نام خانوادگی الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  company: z.string().optional(),
+  employees: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact11Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact11 = ({ className, onSubmit }: Contact11Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      fullName: "",
+      email: "",
+      company: "",
+      employees: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-4xl">
+        <h1 className="text-center text-xl font-semibold tracking-tight sm:text-2xll">
+          تماس با ما
+        </h1>
+        <p className="mt-4 text-center text-muted-foreground">
+          فرم را تکمیل کنید تا در کوتاه‌ترین زمان ممکن درخواست شما بررسی و پاسخ داده شود.
+                          </p>
+
+        <div className="mt-8 flex gap-10 max-md:flex-col md:mt-12 md:divide-x">
+          <div className="space-y-10 pe-10 md:gap-20">
+            <div>
+              <h2 className="text-lg font-semibold">دفتر مرکزی</h2>
+              <p
+                className="mt-3 font-medium tracking-tight text-muted-foreground"
+                dir="rtl"
+              >
+                Valiasr St, Tehran 15138
+                <br />
+                Iran
+              </p>
+            </div>
+
+            <div>
+              <h2 className="text-lg font-semibold">ارتباط از طریق ایمیل</h2>
+              <div className="mt-3 space-y-2">
+                <div>
+                  <p className="text-primary">فرصت‌های شغلی</p>
+                  <a
+                    href="mailto:careers@example.com"
+                    className="mt-3 tracking-tight text-muted-foreground hover:text-foreground"
+                    dir="rtl"
+                  >
+                    careers@example.com
+                  </a>
+                </div>
+                <div>
+                  <p className="text-primary">رسانه</p>
+                  <a
+                    href="mailto:press@example.com"
+                    className="mt-3 tracking-tight text-muted-foreground hover:text-foreground"
+                    dir="rtl"
+                  >
+                    press@example.com
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h2 className="text-lg font-semibold">ما را دنبال کنید</h2>
+              <div className="mt-3 flex gap-6">
+                <a
+                  href="#"
+                  aria-label="فیسبوک"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <Facebook className="size-6" />
+                </a>
+                <a
+                  href="#"
+                  aria-label="توییتر"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <Twitter className="size-6" />
+                </a>
+                <a
+                  href="#"
+                  aria-label="لینکدین"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <Linkedin className="size-6" />
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex-1 md:ps-10">
+            <h2 className="text-lg font-semibold">درخواست‌ها</h2>
+
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mt-5 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  پیام شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                  </p>
+              </div>
+            )}
+
+            <form
+              onSubmit={form.handleSubmit(handleFormSubmit)}
+              className="mt-5"
+            >
+              <FieldGroup>
+                <Controller
+                  control={form.control}
+                  name="fullName"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        نام و نام خانوادگی{" "}
+                        <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="علی محمدی"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        ایمیل کاری{" "}
+                        <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="name@company.com"
+                        dir="rtl"
+                        className="text-start"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="company"
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel htmlFor={field.name}>نام شرکت</FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        placeholder="نام شرکت یا سازمان"
+                      />
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="employees"
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel htmlFor={field.name}>
+                        تعداد کارمندان
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        placeholder="مثال: ۱۰ تا ۵۰ نفر"
+                      />
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        شرح درخواست <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="جزئیات درخواست، سؤال یا پروژه خود را بنویسید."
+                        className="min-h-[120px] resize-none"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <div className="flex justify-start">
+                  <Button
+                    type="submit"
+                    size="lg"
+                    className="gap-2"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting ? (
+                      <>
+                        <LoaderIcon className="size-4 animate-spin" />
+                        در حال ارسال...
+                      </>
+                    ) : (
+                      "ارسال پیام"
+                    )}
+                  </Button>
+                </div>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact11 };
diff --git a/blocks/contact14.tsx b/blocks/contact14.tsx
new file mode 100644
index 0000000..058dfe4
--- /dev/null
+++ b/blocks/contact14.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  phone: z.string().min(1, "شماره تلفن الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact14Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact14 = ({ className, onSubmit }: Contact14Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      phone: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <Card className="w-full rounded-4xl border-none bg-muted">
+          <CardContent className="relative overflow-hidden py-12 lg:px-18 lg:py-24">
+            <div className="grid grid-cols-1 items-end gap-8 md:grid-cols-2">
+              <div className="flex flex-col justify-center space-y-6">
+                <p className="text-sm font-semibold tracking-tight text-muted-foreground">
+                  وب‌سایت رسمی
+                                                  </p>
+                <div className="relative flex size-30 items-center justify-center rounded-3xl bg-foreground p-2.5 shadow-xl">
+                  <div className="flex size-full items-center justify-center rounded-2xl bg-background p-4">
+                    <Avatar className="size-full">
+                      <AvatarImage
+                        src="/block-media/shadcnblocks/block/avatar-1.webp"
+                        alt="تصویر پروفایل"
+                        className="object-cover"
+                      />
+                      <AvatarFallback>ری یو آی</AvatarFallback>
+                    </Avatar>
+                  </div>
+                </div>
+                <h1 className="text-2xll font-bold tracking-tighter text-foreground">
+                  تماس با ما
+                </h1>
+
+                <ul className="max-w-lg space-y-2 tracking-tight">
+                  <li className="flex items-center gap-2">
+                    <span className="font-bold">ایمیل:</span>
+                    <a
+                      href="mailto:example@ShadcnBlocks"
+                      className="text-foreground/80 underline"
+                      dir="rtl"
+                    >
+                      example@ری یو آی
+                    </a>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <span className="font-bold">تلفن:</span>
+                    <span className="text-foreground/80" dir="rtl">
+                      ۲۱-۱۲۳۴۵۶۷۸
+                    </span>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <span className="font-bold">آدرس:</span>
+                    <span className="text-foreground/80">
+                      تهران، خیابان ولیعصر
+                    </span>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <span className="font-bold">ساعات کاری:</span>
+                    <span className="text-foreground/80">
+                      دوشنبه تا جمعه، ۹ صبح تا ۵ عصر
+                    </span>
+                  </li>
+                </ul>
+              </div>
+              <div className="mt-6 flex h-auto flex-col gap-2 space-y-3 md:ps-3">
+                {isSubmitted && (
+                  <div
+                    className={cn(
+                      "rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                      showSuccess ? "opacity-100" : "opacity-0",
+                    )}
+                  >
+                    <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                      پیام شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                              </p>
+                  </div>
+                )}
+
+                <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+                  <FieldGroup>
+                    <Controller
+                      control={form.control}
+                      name="name"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name} className="sr-only">
+                            نام و نام خانوادگی
+                                                            </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            aria-invalid={fieldState.invalid}
+                            placeholder="نام و نام خانوادگی"
+                            className="bg-background p-6"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="phone"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name} className="sr-only">
+                            شماره تلفن
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            type="tel"
+                            aria-invalid={fieldState.invalid}
+                            placeholder="۰۹۱۲ ۳۴۵ ۶۷۸۹"
+                            dir="rtl"
+                            className="bg-background p-6 text-start"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    {form.formState.errors.root && (
+                      <p className="text-sm text-destructive">
+                        {form.formState.errors.root.message}
+                      </p>
+                    )}
+
+                    <Button
+                      type="submit"
+                      className="h-10 w-fit gap-2"
+                      disabled={form.formState.isSubmitting}
+                    >
+                      {form.formState.isSubmitting ? (
+                        <>
+                          <LoaderIcon className="size-4 animate-spin" />
+                          در حال ارسال...
+                        </>
+                      ) : (
+                        "تماس با ما"
+                      )}
+                    </Button>
+                  </FieldGroup>
+                </form>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { Contact14 };
diff --git a/blocks/contact16.tsx b/blocks/contact16.tsx
new file mode 100644
index 0000000..796a701
--- /dev/null
+++ b/blocks/contact16.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CornerDownLeft, LoaderIcon, Mail, Smartphone } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact16Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact16 = ({ className, onSubmit }: Contact16Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("dark bg-background py-32 text-foreground", className)}
+    >
+      <div className="container">
+        <h1 className="text-2xll font-semibold tracking-tight lg:text-8xl">
+          ارتباط با ما
+          <sup>*</sup>
+        </h1>
+        <div className="mt-20 flex flex-col justify-between gap-10 lg:flex-row">
+          <div className="w-full max-w-md">
+            <p className="tracking-tight text-muted-foreground/50">
+              اگر درباره محصولات، همکاری یا اجرای پروژه پرسشی دارید، فرم را تکمیل کنید یا مستقیماً با ما در ارتباط باشید. پاسخ‌گویی در کوتاه‌ترین زمان انجام خواهد شد.
+                                      </p>
+            <div className="mt-10 flex justify-between gap-4">
+              <a
+                className="flex items-center gap-1 text-foreground/40 hover:text-foreground"
+                href="tel:+982112345678"
+                dir="rtl"
+              >
+                <Smartphone className="h-4 w-4 shrink-0" />
+                ۲۱-۱۲۳۴۵۶۷۸
+              </a>
+              <a
+                className="flex items-center gap-1 text-foreground/40 hover:text-foreground"
+                href="mailto:hello@company.com"
+                dir="rtl"
+              >
+                <Mail className="h-4 w-4 shrink-0" />
+                اطلاعات@نمونه.ایران
+              </a>
+            </div>
+          </div>
+          <form
+            onSubmit={form.handleSubmit(handleFormSubmit)}
+            className="col-span-4 flex w-full flex-col gap-2 lg:ps-30"
+          >
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-4 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  پیام شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                  </p>
+              </div>
+            )}
+
+            <FieldGroup className="gap-0">
+              <Controller
+                control={form.control}
+                name="name"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name} className="sr-only">
+                      نام و نام خانوادگی
+                                                </FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      placeholder="نام و نام خانوادگی"
+                      className="h-19 rounded-none border-0 border-b border-b-foreground/15 !bg-transparent placeholder:text-foreground/20 focus-visible:ring-0"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="email"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name} className="sr-only">
+                      ایمیل
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      type="email"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="ایمیل کاری"
+                      dir="rtl"
+                      className="h-19 rounded-none border-0 border-b border-b-foreground/15 !bg-transparent text-start placeholder:text-foreground/20 focus-visible:ring-0"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="message"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name} className="sr-only">
+                      پیام
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      placeholder="درباره پروژه، نیازها یا درخواست خود بنویسید."
+                      className="h-19 rounded-none border-0 border-b border-b-foreground/15 !bg-transparent placeholder:text-foreground/20 focus-visible:ring-0"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              {form.formState.errors.root && (
+                <p className="text-sm text-destructive">
+                  {form.formState.errors.root.message}
+                </p>
+              )}
+
+              <Button
+                type="submit"
+                variant="ghost"
+                className="mt-15 flex h-15 items-center justify-start gap-2 text-base"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting ? (
+                  <>
+                    <LoaderIcon className="size-6 animate-spin" />
+                    در حال ارسال...
+                  </>
+                ) : (
+                  <>
+                    <CornerDownLeft className="size-6" />
+                    ارسال درخواست
+                                                            </>
+                )}
+              </Button>
+            </FieldGroup>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact16 };
diff --git a/blocks/contact17.tsx b/blocks/contact17.tsx
new file mode 100644
index 0000000..f1be547
--- /dev/null
+++ b/blocks/contact17.tsx
@@ -0,0 +1,388 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  firstName: z.string().min(1, "نام الزامی است"),
+  lastName: z.string().min(1, "نام خانوادگی الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  companySize: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+  referrer: z.string().optional(),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact17Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact17 = ({ className, onSubmit }: Contact17Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      companySize: "",
+      message: "",
+      referrer: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
+      <div className="container">
+        <span className="text-xs text-muted-foreground">شروع همکاری /</span>
+        <div className="mt-8 grid grid-cols-1 gap-8 md:gap-10 lg:grid-cols-2 lg:grid-rows-[min-content_1fr]">
+          <h2 className="order-1 text-xl font-medium tracking-tight md:order-none md:text-2xll">
+            ارسال درخواست
+                                </h2>
+          <div className="order-2 md:order-none md:row-span-2">
+            <div className="rounded-lg border border-border bg-background p-6">
+              {isSubmitted && (
+                <div
+                  className={cn(
+                    "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                    showSuccess ? "opacity-100" : "opacity-0",
+                  )}
+                >
+                  <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                    درخواست شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                        </p>
+                </div>
+              )}
+
+              <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+                <FieldGroup className="grid gap-6 sm:grid-cols-2">
+                  <Controller
+                    control={form.control}
+                    name="firstName"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام و نام خانوادگی <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="علی"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="lastName"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام خانوادگی{" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="محمدی"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="email"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          ایمیل کاری <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          type="email"
+                          aria-invalid={fieldState.invalid}
+                          placeholder="example@email.com"
+                          dir="rtl"
+                          className="text-start"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="companySize"
+                    render={({ field }) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>
+                          بودجه پروژه
+                        </FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger id={field.name} className="w-full">
+                            <SelectValue placeholder="انتخاب بازه بودجه" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="5k-15k">
+                              ۵ تا ۱۵ هزار دلار
+                            </SelectItem>
+                            <SelectItem value="15k-30k">
+                              ۱۵ تا ۳۰ هزار دلار
+                            </SelectItem>
+                            <SelectItem value="30k-50k">
+                              ۳۰ تا ۵۰ هزار دلار
+                            </SelectItem>
+                            <SelectItem value="50k-100k">
+                              ۵۰ تا ۱۰۰ هزار دلار
+                            </SelectItem>
+                            <SelectItem value="100k-250k">
+                              ۱۰۰ تا ۲۵۰ هزار دلار
+                            </SelectItem>
+                            <SelectItem value="250k+">
+                              بیش از ۲۵۰ هزار دلار
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="message"
+                    render={({ field, fieldState }) => (
+                      <Field
+                        data-invalid={fieldState.invalid}
+                        className="sm:col-span-2"
+                      >
+                        <FieldLabel htmlFor={field.name}>
+                          پیام <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Textarea
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="اهداف، نیازها و جزئیات پروژه خود را شرح دهید."
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="referrer"
+                    render={({ field }) => (
+                      <Field className="sm:col-span-2">
+                        <FieldLabel htmlFor={field.name}>
+                          چطور ما را پیدا کردید؟
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          placeholder="مثال: جستجوی گوگل، معرفی یا شبکه‌های اجتماعی"
+                        />
+                      </Field>
+                    )}
+                  />
+
+                  {form.formState.errors.root && (
+                    <p className="text-sm text-destructive sm:col-span-2">
+                      {form.formState.errors.root.message}
+                    </p>
+                  )}
+
+                  <Button
+                    type="submit"
+                    className="gap-2 sm:col-span-2"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting ? (
+                      <>
+                        <LoaderIcon className="size-4 animate-spin" />
+                        در حال ارسال...
+                      </>
+                    ) : (
+                      "ارسال پیام"
+                    )}
+                  </Button>
+
+                  <p className="text-xs text-muted-foreground sm:col-span-2">
+                    با ارسال این فرم، تأیید می‌کنید که{" "}
+                    <a href="#" className="text-primary hover:underline">
+                      حریم خصوصی
+                    </a>{" "}
+                    و{" "}
+                    <a href="#" className="text-primary hover:underline">
+                      شرایط استفاده
+                    </a>{" "}
+                    ما را مطالعه کرده و پذیرفته‌اید.
+                  </p>
+                </FieldGroup>
+              </form>
+            </div>
+          </div>
+          <div className="order-3 my-6 md:order-none">
+            <ul className="space-y-2 font-medium">
+              <li className="flex items-center gap-2">
+                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-background">
+                  <Check className="size-4" />
+                </span>
+                نیازهای کسب‌وکار و اهداف پروژه خود را با ما مطرح کنید.
+                                            </li>
+              <li className="flex items-center gap-2">
+                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-background">
+                  <Check className="size-4" />
+                </span>
+                راهکار و پیشنهاد متناسب با نیاز خود دریافت کنید.
+                                            </li>
+              <li className="flex items-center gap-2">
+                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-background">
+                  <Check className="size-4" />
+                </span>
+                برای بررسی پروژه، جلسه مشاوره تخصصی رزرو کنید.
+                                            </li>
+            </ul>
+            <p className="my-6 font-bold">
+              بیش از ۳۰۰۰ کسب‌وکار به خدمات و راهکارهای ما اعتماد کرده‌اند.
+                                      </p>
+            <div className="grid grid-cols-2 place-items-center gap-8 md:grid-cols-4">
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg"
+                alt="لوگوی مشتری"
+                className="max-w-24 dark:invert"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg"
+                alt="لوگوی مشتری"
+                className="max-w-24 dark:invert"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
+                alt="لوگوی مشتری"
+                className="max-w-24 dark:invert"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg"
+                alt="لوگوی مشتری"
+                className="max-w-24 dark:invert"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg"
+                alt="لوگوی مشتری"
+                className="max-w-24 dark:invert"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg"
+                alt="لوگوی مشتری"
+                className="max-w-24 dark:invert"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg"
+                alt="لوگوی مشتری"
+                className="max-w-24 dark:invert"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg"
+                alt="لوگوی مشتری"
+                className="max-w-24 dark:invert"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="mt-16 grid gap-8 md:gap-12 lg:w-1/2 lg:grid-cols-2">
+          <div>
+            <h3 className="mb-1.5 font-bold">سوالات متداول</h3>
+            <p className="text-sm text-muted-foreground">
+              پاسخ پرسش‌های رایج را در{" "}
+              <a href="#" className="text-primary underline hover:underline">
+                سوالات متداول
+              </a>{" "}
+              مطالعه کنید و با روند همکاری و اجرای پروژه آشنا شوید.
+                                      </p>
+          </div>
+          <div>
+            <h3 className="mb-1.5 font-bold">منابع</h3>
+            <p className="text-sm text-muted-foreground">
+              به مجموعه مقالات، راهنماها و مستندات ما در{" "}
+              <a href="#" className="text-primary underline hover:underline">
+                مرکز منابع
+              </a>{" "}
+              دسترسی داشته باشید و از آموزش‌ها، مقالات و تجربیات تخصصی استفاده کنید.
+                                      </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact17 };
diff --git a/blocks/contact18.tsx b/blocks/contact18.tsx
new file mode 100644
index 0000000..eaac886
--- /dev/null
+++ b/blocks/contact18.tsx
@@ -0,0 +1,268 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronsUp, LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  phone: z.string().optional(),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact18Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact18 = ({ className, onSubmit }: Contact18Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const supportFeatures = [
+    { text: "پشتیبانی تخصصی" },
+    { text: "پاسخ اولیه در کوتاه‌ترین زمان" },
+    { text: "مشاوره تخصصی" },
+    { text: "بررسی اولیه رایگان پروژه" },
+  ];
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      phone: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mt-20 flex max-h-120 flex-col justify-between gap-15 md:gap-10 lg:flex-row">
+          <div className="flex w-full max-w-lg flex-col justify-between gap-15">
+            <div className="relative w-fit">
+              <h1 className="text-2xll font-semibold tracking-tight lg:text-2xll">
+                ارتباط با ما
+              </h1>
+              <Illustration className="absolute -top-2 -end-5 size-5 text-red-500 md:size-6" />
+              <Illustration className="absolute -bottom-2 -start-5 size-5 rotate-180 text-red-500 md:size-6" />
+            </div>
+            <ul className="space-y-6">
+              {supportFeatures.map((feature, index) => (
+                <li
+                  key={index}
+                  className="flex items-center gap-8 text-base text-foreground/50"
+                >
+                  <div className="flex size-6 shrink-0 items-center justify-center bg-red-100 text-red-500">
+                    <ChevronsUp className="size-5" />
+                  </div>
+                  {feature.text}
+                </li>
+              ))}
+            </ul>
+            <a
+              href="mailto:hi@ShadcnBlocks"
+              className="flex items-center gap-4 text-xl font-medium tracking-tighter hover:underline"
+              dir="rtl"
+            >
+              hi@ری یو آی
+            </a>
+          </div>
+          <div className="col-span-4 flex w-full flex-col gap-2 lg:ps-10">
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-4 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  درخواست شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                  </p>
+              </div>
+            )}
+
+            <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+              <FieldGroup className="gap-2">
+                <Controller
+                  control={form.control}
+                  name="name"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        نام و نام خانوادگی
+                                                    </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="نام و نام خانوادگی"
+                        className="h-15 rounded-xl border-0 border-b-foreground/25 bg-muted shadow-none placeholder:text-foreground/20 focus-visible:ring-0"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="phone"
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        شماره تلفن
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="tel"
+                        placeholder="شماره تماس (اختیاری)"
+                        dir="rtl"
+                        className="h-15 rounded-xl border-0 border-b-foreground/25 bg-muted text-start shadow-none placeholder:text-foreground/20 focus-visible:ring-0"
+                      />
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        ایمیل کاری
+                                                    </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="ایمیل کاری"
+                        dir="rtl"
+                        className="h-15 rounded-xl border-0 border-b-foreground/25 bg-muted text-start shadow-none placeholder:text-foreground/20 focus-visible:ring-0"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        پیام
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="درباره پروژه یا درخواست خود بنویسید."
+                        className="min-h-52 rounded-xl border-0 border-b-foreground/25 bg-muted shadow-none placeholder:text-foreground/20 focus-visible:ring-0"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <Button
+                  type="submit"
+                  className="h-15 w-full gap-2 rounded-xl"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="size-4 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    "ارسال پیام"
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact18 };
+
+const Illustration = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="22"
+      height="20"
+      viewBox="0 0 22 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M-0.0078125 0.867188H21.1133V4.89062H2.00391C0.892865 4.89062 -0.0078125 3.98995 -0.0078125 2.87891V0.867188Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.9316 0.867188H21.1133V19.9404H19.0225C17.8677 19.9404 16.9316 19.0043 16.9316 17.8496V0.867188Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/blocks/contact19.tsx b/blocks/contact19.tsx
new file mode 100644
index 0000000..a638407
--- /dev/null
+++ b/blocks/contact19.tsx
@@ -0,0 +1,60 @@
+import { CornerDownLeft } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Contact19Props {
+  className?: string;
+}
+
+const Contact19 = ({ className }: Contact19Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mt-20 flex max-h-120 flex-col justify-between gap-15 md:gap-20 lg:flex-row">
+          <div className="flex w-full max-w-md flex-col justify-between gap-30">
+            <div className="relative w-fit">
+              <h1 className="text-2xll leading-none font-semibold tracking-tight lg:text-2xll">
+                در ارتباط باشید
+              </h1>
+              <p className="mt-10 mb-5 text-foreground/50">
+                اگر درباره محصولات، خدمات یا فرصت‌های همکاری پرسشی دارید، از طریق تلفن یا ایمیل با ما در ارتباط باشید.
+                                            </p>
+
+              <Button variant="ghost" className="group gap-2">
+                <CornerDownLeft className="size-4" />
+                ارسال درخواست
+                                            </Button>
+            </div>
+
+            <div className="space-y-2">
+              <a
+                href="tel:+982112345678"
+                className="flex items-center gap-4 text-xl font-medium tracking-tighter hover:underline"
+                dir="rtl"
+              >
+                ۲۱-۱۲۳۴۵۶۷۸
+              </a>
+              <a
+                href="mailto:hi@ShadcnBlocks"
+                className="flex items-center gap-4 text-xl font-medium tracking-tighter hover:underline"
+                dir="rtl"
+              >
+                hi@ری یو آی
+              </a>
+            </div>
+          </div>
+          <div className="top-0 end-0 flex h-screen w-full flex-col gap-2 lg:absolute lg:w-1/2">
+            <img
+              src="/block-media/shadcnblocks/block/guri4/img11.png"
+              alt="تصویر تماس"
+              className="pointer-events-none h-full w-full object-cover"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact19 };
diff --git a/blocks/contact2.tsx b/blocks/contact2.tsx
new file mode 100644
index 0000000..3315164
--- /dev/null
+++ b/blocks/contact2.tsx
@@ -0,0 +1,297 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { GlobeIcon, LoaderIcon, MailIcon, PhoneIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  firstName: z.string().min(1, "نام الزامی است"),
+  lastName: z.string().min(1, "نام خانوادگی الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  subject: z.string().min(1, "موضوع الزامی است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact2Props {
+  title?: string;
+  description?: string;
+  phone?: string;
+  email?: string;
+  web?: { label: string; url: string };
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact2 = ({
+  title = "تماس با ما",
+  description = "اگر پرسشی درباره محصولات، همکاری یا خدمات دارید، فرم تماس را تکمیل کنید. تیم ما در کوتاه‌ترین زمان پاسخ‌گوی شما خواهد بود.",
+  phone = "۲۱-۱۲۳۴۵۶۷۸",
+  email = "contact@example.com",
+  web = {
+    label: "وب‌سایت رسمی",
+    url: "https://www.ShadcnBlocks",
+  },
+  className,
+  onSubmit,
+}: Contact2Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      subject: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-6xl flex-col gap-16 lg:flex-row lg:gap-24">
+          <div className="flex flex-1 flex-col gap-10">
+            <div>
+              <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+                {title}
+              </h1>
+              <p className="text-muted-foreground">{description}</p>
+            </div>
+            <div className="flex flex-col gap-6">
+              <a
+                href={`tel:${phone}`}
+                className="group flex items-center gap-3"
+              >
+                <PhoneIcon className="size-5 text-muted-foreground" />
+                <span className="group-hover:underline" dir="rtl">
+                  {phone}
+                </span>
+              </a>
+              <a
+                href={`mailto:${email}`}
+                className="group flex items-center gap-3"
+              >
+                <MailIcon className="size-5 text-muted-foreground" />
+                <span className="group-hover:underline" dir="rtl">
+                  {email}
+                </span>
+              </a>
+              <a
+                href={web.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group flex items-center gap-3"
+              >
+                <GlobeIcon className="size-5 text-muted-foreground" />
+                <span className="group-hover:underline" dir="rtl">
+                  {web.label}
+                </span>
+              </a>
+            </div>
+          </div>
+          <div className="flex-1">
+            <form
+              onSubmit={form.handleSubmit(handleFormSubmit)}
+              className="flex flex-col gap-6 rounded-xl bg-muted/50 p-8 md:p-10"
+            >
+              <div>
+                <h2 className="text-xl font-semibold">پیام خود را برای ما ارسال کنید</h2>
+                <p className="text-sm text-muted-foreground">
+                  پاسخ‌گویی در روزهای کاری، حداکثر تا ۲۴ ساعت
+                                                  </p>
+              </div>
+              {isSubmitted && (
+                <div
+                  className={cn(
+                    "rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                    showSuccess ? "opacity-100" : "opacity-0",
+                  )}
+                >
+                  <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                    پیام شما با موفقیت ثبت شد.
+                                                        </p>
+                </div>
+              )}
+              <FieldGroup>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <Controller
+                    control={form.control}
+                    name="firstName"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="علی"
+                          className="bg-background"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                  <Controller
+                    control={form.control}
+                    name="lastName"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام خانوادگی{" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="محمدی"
+                          className="bg-background"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                </div>
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        ایمیل <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="example@email.com"
+                        dir="rtl"
+                        className="bg-background text-start"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+                <Controller
+                  control={form.control}
+                  name="subject"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        موضوع <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="موضوع پیام خود را وارد کنید"
+                        className="bg-background"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        پیام <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="جزئیات درخواست، پروژه یا سؤال خود را بنویسید."
+                        rows={4}
+                        className="bg-background"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+                <Button
+                  size="lg"
+                  className="w-full gap-2"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="size-4 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    "ارسال پیام"
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact2 };
diff --git a/blocks/contact20.tsx b/blocks/contact20.tsx
new file mode 100644
index 0000000..6a18657
--- /dev/null
+++ b/blocks/contact20.tsx
@@ -0,0 +1,312 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CornerDownLeft, LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  phone: z.string().min(1, "شماره تلفن الزامی است"),
+  service: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact20Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact20 = ({ className, onSubmit }: Contact20Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      phone: "",
+      service: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mt-20 flex flex-col justify-between gap-15 md:gap-10 lg:flex-row">
+          <div className="flex w-full max-w-xs flex-col gap-5 lg:gap-12">
+            <h1 className="text-2xll font-semibold tracking-tight lg:text-2xll">
+              تماس با ما
+            </h1>
+            <p className="text-sm text-foreground/50">
+              فرم زیر را تکمیل کنید تا کارشناسان ما در کوتاه‌ترین زمان با شما تماس بگیرند.
+                                      </p>
+          </div>
+          <div className="grid w-full gap-12 lg:grid-cols-3 lg:gap-2 lg:ps-10">
+            <div>
+              <p className="text-sm text-foreground/40">آدرس</p>
+              <p className="mt-1 max-w-50 text-lg leading-snug font-semibold">
+                تهران، خیابان ولیعصر
+              </p>
+            </div>
+            <div className="lg:col-span-2">
+              <p className="text-sm text-foreground/40" dir="rtl">
+                ۲۱-۱۲۳۴۵۶۷۸
+              </p>
+              <a
+                href="mailto:hi@ShadcnBlocks"
+                className="mt-2 block text-xl font-semibold tracking-tight hover:underline"
+                dir="rtl"
+              >
+                hi@ری یو آی
+              </a>
+            </div>
+
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mt-10 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500 lg:col-span-3",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  درخواست شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                  </p>
+              </div>
+            )}
+
+            <form
+              onSubmit={form.handleSubmit(handleFormSubmit)}
+              className="mt-10 grid grid-cols-2 gap-5 lg:col-span-3 lg:grid-cols-3"
+            >
+              <FieldGroup className="contents">
+                <Controller
+                  control={form.control}
+                  name="name"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        نام و نام خانوادگی
+                                                    </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="نام و نام خانوادگی"
+                        className="mt-10 rounded-none border-0 border-b border-b-foreground/10 !bg-transparent p-0 shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        ایمیل کاری
+                                                    </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="ایمیل کاری"
+                        dir="rtl"
+                        className="mt-10 rounded-none border-0 border-b border-b-foreground/10 !bg-transparent p-0 text-start shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="phone"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        شماره تلفن
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="tel"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="۰۹۱۲ ۳۴۵ ۶۷۸۹*"
+                        dir="rtl"
+                        className="mt-10 rounded-none border-0 border-b border-b-foreground/10 !bg-transparent p-0 text-start shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="service"
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        موضوع درخواست
+                                                    </FieldLabel>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger
+                          id={field.name}
+                          className="mt-10 w-full rounded-none border-0 border-b border-b-foreground/10 !bg-transparent p-0 shadow-none focus-visible:ring-0 data-[placeholder]:text-foreground/20 lg:text-base"
+                        >
+                          <SelectValue
+                            placeholder="موضوع درخواست"
+                            className="text-foreground/20"
+                          />
+                        </SelectTrigger>
+                        <SelectContent className="rounded-none shadow-none">
+                          <SelectItem
+                            className="rounded-none py-4"
+                            value="general"
+                          >
+                            پرسش عمومی
+                          </SelectItem>
+                          <SelectItem
+                            className="rounded-none py-4"
+                            value="support"
+                          >
+                            پشتیبانی
+                          </SelectItem>
+                          <SelectItem
+                            className="rounded-none py-4"
+                            value="sales"
+                          >
+                            فروش
+                          </SelectItem>
+                          <SelectItem
+                            className="rounded-none py-4"
+                            value="partnership"
+                          >
+                            همکاری
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field
+                      data-invalid={fieldState.invalid}
+                      className="col-span-2 lg:col-span-3"
+                    >
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        پیام
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="نیازها و جزئیات درخواست خود را بنویسید."
+                        className="col-span-2 mt-10 min-h-42 rounded-none border-0 border-b border-b-foreground/10 !bg-transparent p-0 shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:col-span-3 lg:text-base"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                {form.formState.errors.root && (
+                  <p className="col-span-2 text-sm text-destructive lg:col-span-3">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <Button
+                  type="submit"
+                  variant="ghost"
+                  className="w-fit gap-2 rounded-none"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="size-5 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    <>
+                      <CornerDownLeft className="size-5" />
+                      ارسال پیام
+                    </>
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact20 };
diff --git a/blocks/contact21.tsx b/blocks/contact21.tsx
new file mode 100644
index 0000000..1dae1a3
--- /dev/null
+++ b/blocks/contact21.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CornerDownLeft, LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact21Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact21 = ({ className, onSubmit }: Contact21Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mt-20 flex flex-col justify-between gap-15 md:gap-10 lg:flex-row">
+          <div className="flex w-full max-w-lg flex-col justify-between gap-10">
+            <p className="indent-[22%] text-3xl font-medium tracking-tight text-muted-foreground/50 lg:text-xl">
+              ما با ترکیب تجربه، خلاقیت و دانش فنی به سازمان‌ها کمک می‌کنیم راهکارهایی مؤثر و ماندگار ایجاد کنند.{" "}
+              <span className="text-foreground">آماده پاسخ‌گویی به شما هستیم</span>
+            </p>
+            <div className="mt-5 flex items-center gap-4 lg:mt-20">
+              <img
+                src="/block-media/shadcnblocks/block/guri3/avatar3.png"
+                className="size-12"
+                alt="تصویر پروفایل"
+              />
+              <div>
+                <h3 className="text-lg font-medium tracking-tight">
+                  علی محمدی
+                </h3>
+                <p className="text-sm text-foreground/40">مشاور ارشد پروژه</p>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-4 flex w-full flex-col gap-2 lg:ps-10">
+            <h1 className="mb-7 text-2xll font-semibold tracking-tight lg:text-2xll">
+              ارتباط با ما
+            </h1>
+
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-4 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  درخواست شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                  </p>
+              </div>
+            )}
+
+            <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+              <FieldGroup className="gap-0">
+                <Controller
+                  control={form.control}
+                  name="name"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        نام و نام خانوادگی
+                                                    </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="نام و نام خانوادگی"
+                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        ایمیل کاری
+                                                    </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="ایمیل کاری"
+                        dir="rtl"
+                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent text-start shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name} className="sr-only">
+                        پیام
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="درباره پروژه یا درخواست خود بنویسید."
+                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <Button
+                  type="submit"
+                  className="mt-15 flex items-center justify-start gap-2 rounded-none !px-8 lg:h-12 lg:text-base"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="size-5 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    <>
+                      <CornerDownLeft className="size-5" />
+                      ارسال درخواست
+                                                                  </>
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact21 };
diff --git a/blocks/contact22.tsx b/blocks/contact22.tsx
new file mode 100644
index 0000000..ebee2f2
--- /dev/null
+++ b/blocks/contact22.tsx
@@ -0,0 +1,384 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Location {
+  id: string;
+  name: string;
+  address: string;
+  city: string;
+  phone: string;
+  email: string;
+  mapQuery: string;
+}
+
+interface Contact22Props {
+  title?: string;
+  description?: string;
+  locations?: Location[];
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact22 = ({
+  title = "دفاتر ما",
+  description = "از طریق نزدیک‌ترین دفتر یا فرم تماس با ما در ارتباط باشید. کارشناسان ما آماده پاسخ‌گویی و ارائه مشاوره هستند.",
+  locations = [
+    {
+      id: "tehran",
+      name: "تهران",
+      address: "Valiasr St, District 6",
+      city: "Tehran, Iran",
+      phone: "۲۱-۱۲۳۴۵۶۷۸",
+      email: "tehran@lawfirm.com",
+      mapQuery: "Valiasr Street, Tehran, Iran",
+    },
+    {
+      id: "nyc",
+      name: "نیویورک",
+      address: "350 Fifth Avenue, Suite 4200",
+      city: "New York, NY 10118",
+      phone: "+1 (212) 555-0123",
+      email: "nyc@lawfirm.com",
+      mapQuery: "Empire State Building, New York, NY",
+    },
+    {
+      id: "la",
+      name: "لس آنجلس",
+      address: "633 West 5th Street, Suite 2600",
+      city: "Los Angeles, CA 90071",
+      phone: "+1 (213) 555-0456",
+      email: "la@lawfirm.com",
+      mapQuery: "633 West 5th Street, Los Angeles, CA",
+    },
+    {
+      id: "chicago",
+      name: "شیکاگو",
+      address: "233 South Wacker Drive, Suite 8400",
+      city: "Chicago, IL 60606",
+      phone: "+1 (312) 555-0789",
+      email: "chicago@lawfirm.com",
+      mapQuery: "Willis Tower, Chicago, IL",
+    },
+    {
+      id: "miami",
+      name: "میامی",
+      address: "1395 Brickell Avenue, Suite 800",
+      city: "Miami, FL 33131",
+      phone: "+1 (305) 555-0234",
+      email: "miami@lawfirm.com",
+      mapQuery: "1395 Brickell Avenue, Miami, FL",
+    },
+    {
+      id: "boston",
+      name: "بوستون",
+      address: "100 Federal Street, Suite 2000",
+      city: "Boston, MA 02110",
+      phone: "+1 (617) 555-0567",
+      email: "boston@lawfirm.com",
+      mapQuery: "100 Federal Street, Boston, MA",
+    },
+  ],
+  className,
+  onSubmit,
+}: Contact22Props) => {
+  const [selectedLocation, setSelectedLocation] = useState<Location>(
+    locations[0],
+  );
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-5xl">
+          <div className="mb-16 text-center">
+            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+              {title}
+            </h1>
+            <p className="mx-auto max-w-2xl text-muted-foreground">
+              {description}
+            </p>
+          </div>
+
+          <div className="grid gap-12 lg:grid-cols-5">
+            <div className="space-y-2 lg:col-span-2">
+              {locations.map((location) => (
+                <button
+                  key={location.id}
+                  type="button"
+                  onClick={() => setSelectedLocation(location)}
+                  className={cn(
+                    "w-full rounded-lg p-4 text-start transition-colors",
+                    selectedLocation.id === location.id
+                      ? "bg-primary text-primary-foreground"
+                      : "hover:bg-muted",
+                  )}
+                >
+                  <p className="font-medium">{location.name}</p>
+                  <p
+                    dir="rtl"
+                    className={cn(
+                      "text-start text-sm",
+                      selectedLocation.id === location.id
+                        ? "text-primary-foreground/80"
+                        : "text-muted-foreground",
+                    )}
+                  >
+                    {location.address}
+                  </p>
+                </button>
+              ))}
+            </div>
+
+            <div className="space-y-6 lg:col-span-3">
+              <div className="overflow-hidden rounded-xl">
+                <iframe
+                  title={`نقشه دفتر ${selectedLocation.name}`}
+                  src={`https://www.google.com/maps?q=${encodeURIComponent(selectedLocation.mapQuery)}&output=embed`}
+                  className="aspect-video w-full border-0"
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                />
+              </div>
+
+              <div className="rounded-xl bg-muted/50 p-6">
+                <div className="mb-4 flex items-start justify-between">
+                  <div>
+                    <h2 className="text-lg font-medium">
+                      {selectedLocation.name}
+                    </h2>
+                    <p
+                      className="text-sm text-muted-foreground"
+                      dir="rtl"
+                    >
+                      {selectedLocation.address}
+                    </p>
+                    <p
+                      className="text-sm text-muted-foreground"
+                      dir="rtl"
+                    >
+                      {selectedLocation.city}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-6 border-t pt-4 text-sm">
+                  <a
+                    href={`tel:${selectedLocation.phone}`}
+                    className="flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground"
+                    dir="rtl"
+                  >
+                    <svg
+                      className="size-4 shrink-0"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={1.5}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"
+                      />
+                    </svg>
+                    {selectedLocation.phone}
+                  </a>
+                  <a
+                    href={`mailto:${selectedLocation.email}`}
+                    className="flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground"
+                    dir="rtl"
+                  >
+                    <svg
+                      className="size-4 shrink-0"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={1.5}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
+                      />
+                    </svg>
+                    {selectedLocation.email}
+                  </a>
+                </div>
+              </div>
+
+              <form
+                onSubmit={form.handleSubmit(handleFormSubmit)}
+                className="space-y-4"
+              >
+                {isSubmitted && (
+                  <div
+                    className={cn(
+                      "rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                      showSuccess ? "opacity-100" : "opacity-0",
+                    )}
+                  >
+                    <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                      پیام شما با موفقیت ثبت شد. به‌زودی با شما تماس خواهیم گرفت.
+                                                              </p>
+                  </div>
+                )}
+
+                <FieldGroup>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <Controller
+                      control={form.control}
+                      name="name"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            نام و نام خانوادگی <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            aria-invalid={fieldState.invalid}
+                            placeholder="نام و نام خانوادگی"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="email"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            ایمیل کاری{" "}
+                            <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            type="email"
+                            aria-invalid={fieldState.invalid}
+                            placeholder="example@email.com"
+                            dir="rtl"
+                            className="text-start"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+                  </div>
+
+                  <Controller
+                    control={form.control}
+                    name="message"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          پیام <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Textarea
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="چگونه می‌توانیم به شما کمک کنیم؟"
+                          rows={3}
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  {form.formState.errors.root && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.root.message}
+                    </p>
+                  )}
+
+                  <Button
+                    type="submit"
+                    className="w-full gap-2"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting ? (
+                      <>
+                        <LoaderIcon className="size-4 animate-spin" />
+                        در حال ارسال...
+                      </>
+                    ) : (
+                      "ارسال پیام"
+                    )}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact22 };
diff --git a/blocks/contact23.tsx b/blocks/contact23.tsx
new file mode 100644
index 0000000..95e6d2a
--- /dev/null
+++ b/blocks/contact23.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { ChevronLeft, Clock, MapPin, Phone } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface StoreLocation {
+  id: string;
+  name: string;
+  address: string;
+  city: string;
+  phone: string;
+  hours: string;
+  distance?: string;
+  mapQuery: string;
+}
+
+interface Contact23Props {
+  title?: string;
+  description?: string;
+  locations?: StoreLocation[];
+  defaultMapQuery?: string;
+  className?: string;
+}
+
+const Contact23 = ({
+  title = "یافتن نزدیک‌ترین شعبه",
+  description = "نام شهر یا کد پستی را وارد کنید تا نزدیک‌ترین شعبه یا نمایندگی را پیدا کنید.",
+  locations = [
+    {
+      id: "1",
+      name: "شعبه مرکزی",
+      address: "Valiasr St, District 6",
+      city: "Tehran, Iran",
+      phone: "۲۱-۱۲۳۴۵۶۷۸",
+      hours: "شنبه تا پنج‌شنبه ۱۰ تا ۲۱، جمعه ۱۱ تا ۱۸",
+      distance: "۱۳ کیلومتر",
+      mapQuery: "Valiasr Street, Tehran, Iran",
+    },
+    {
+      id: "2",
+      name: "شعبه ونک",
+      address: "Vanak Square, District 3",
+      city: "Tehran, Iran",
+      phone: "۲۱-۸۸۷۷۶۶۵۵",
+      hours: "شنبه تا پنج‌شنبه ۱۰ تا ۲۰، جمعه ۱۲ تا ۱۸",
+      distance: "۲ کیلومتر",
+      mapQuery: "Vanak Square, Tehran, Iran",
+    },
+    {
+      id: "3",
+      name: "شعبه سعادت‌آباد",
+      address: "Seyyed Khandan St",
+      city: "Tehran, Iran",
+      phone: "۲۱-۴۴۰۱۱۲۲",
+      hours: "شنبه تا پنج‌شنبه ۹ تا ۱۹، جمعه ۱۰ تا ۱۷",
+      distance: "۴.۲ کیلومتر",
+      mapQuery: "Saadat Abad, Tehran, Iran",
+    },
+    {
+      id: "4",
+      name: "شعبه تجریش",
+      address: "Tajrish Square",
+      city: "Tehran, Iran",
+      phone: "۲۱-۲۲۷۷۸۸۹۹",
+      hours: "شنبه تا پنج‌شنبه ۸ تا ۲۰، جمعه ۹ تا ۱۸",
+      distance: "۵.۱ کیلومتر",
+      mapQuery: "Tajrish, Tehran, Iran",
+    },
+  ],
+  defaultMapQuery = "تهران، ایران",
+  className,
+}: Contact23Props) => {
+  const [selectedLocation, setSelectedLocation] =
+    useState<StoreLocation | null>(null);
+  const mapQuery = selectedLocation?.mapQuery || defaultMapQuery;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-10">
+            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+              {title}
+            </h1>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+
+          <div className="mb-8 flex max-w-md gap-3">
+            <Input
+              placeholder="نام شهر یا کد پستی"
+              className="bg-background"
+            />
+            <Button>جستجو</Button>
+          </div>
+
+          <div className="grid gap-8 lg:grid-cols-5">
+            <div className="lg:col-span-2">
+              <div className="space-y-4">
+                {locations.map((location) => (
+                  <div
+                    key={location.id}
+                    onClick={() => setSelectedLocation(location)}
+                    className={cn(
+                      "group cursor-pointer rounded-xl border bg-background p-5 transition-colors hover:border-primary/50 hover:bg-muted/30",
+                      selectedLocation?.id === location.id &&
+                        "border-primary bg-muted/30",
+                    )}
+                  >
+                    <div className="mb-3 flex items-start justify-between">
+                      <div>
+                        <h3 className="font-medium">{location.name}</h3>
+                        {location.distance && (
+                          <span className="text-sm text-muted-foreground">
+                            {location.distance}
+                          </span>
+                        )}
+                      </div>
+                      <ChevronLeft className="size-5 text-muted-foreground transition-transform group-hover:-translate-x-1" />
+                    </div>
+
+                    <div className="space-y-2 text-sm">
+                      <div className="flex items-start gap-2.5">
+                        <MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                        <div dir="rtl" className="text-start">
+                          <p>{location.address}</p>
+                          <p className="text-muted-foreground">
+                            {location.city}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2.5">
+                        <Phone className="size-4 shrink-0 text-muted-foreground" />
+                        <a
+                          href={`tel:${location.phone}`}
+                          className="hover:underline"
+                          dir="rtl"
+                        >
+                          {location.phone}
+                        </a>
+                      </div>
+                      <div className="flex items-start gap-2.5">
+                        <Clock className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                        <span className="text-muted-foreground">
+                          {location.hours}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="mt-4 flex gap-2">
+                      <Button variant="outline" size="sm" className="flex-1">
+                        مسیریابی
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="flex-1"
+                        asChild
+                      >
+                        <a href={`tel:${location.phone}`}>تماس با شعبه</a>
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="lg:col-span-3">
+              <div className="sticky top-8 overflow-hidden rounded-xl">
+                <iframe
+                  title="نقشه موقعیت فروشگاه‌ها"
+                  src={`https://www.google.com/maps?q=${encodeURIComponent(mapQuery)}&output=embed`}
+                  className="aspect-[4/3] w-full border-0 lg:aspect-auto lg:h-[600px]"
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact23 };
diff --git a/blocks/contact24.tsx b/blocks/contact24.tsx
new file mode 100644
index 0000000..a5eb93b
--- /dev/null
+++ b/blocks/contact24.tsx
@@ -0,0 +1,140 @@
+import { ExternalLink, Mail, MapPin, Phone } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Office {
+  id: string;
+  region: string;
+  city: string;
+  address: string;
+  phone: string;
+  email: string;
+  mapImage: string;
+}
+
+interface Contact24Props {
+  title?: string;
+  description?: string;
+  offices?: Office[];
+  className?: string;
+}
+
+const Contact24 = ({
+  title = "دفاتر ما",
+  description = "شبکه دفاتر و نمایندگی‌های ما آماده ارائه خدمات و پشتیبانی به مشتریان در نقاط مختلف است.",
+  offices = [
+    {
+      id: "1",
+      region: "خاورمیانه",
+      city: "تهران",
+      address: "Valiasr St, District 6, Tehran, Iran",
+      phone: "۲۱-۱۲۳۴۵۶۷۸",
+      email: "tehran@company.com",
+      mapImage: "/block-media/shadcnblocks/block/maps/map-2.png",
+    },
+    {
+      id: "2",
+      region: "آمریکای شمالی",
+      city: "نیویورک",
+      address: "350 Fifth Avenue, Suite 4200, New York, NY 10118",
+      phone: "+1 (212) 555-0123",
+      email: "nyc@company.com",
+      mapImage: "/block-media/shadcnblocks/block/maps/map-2.png",
+    },
+    {
+      id: "3",
+      region: "اروپا",
+      city: "لندن",
+      address: "25 Bank Street, Canary Wharf, London E14 5JP",
+      phone: "+44 20 7555 0123",
+      email: "london@company.com",
+      mapImage: "/block-media/shadcnblocks/block/maps/map-3.png",
+    },
+    {
+      id: "4",
+      region: "آسیا و اقیانوسیه",
+      city: "سنگاپور",
+      address: "1 Raffles Place, Tower 2, Singapore 048616",
+      phone: "+65 6555 0123",
+      email: "singapore@company.com",
+      mapImage: "/block-media/shadcnblocks/block/maps/map-4.png",
+    },
+  ],
+  className,
+}: Contact24Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-14 text-center">
+            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+              {title}
+            </h1>
+            <p className="mx-auto max-w-2xl text-muted-foreground">
+              {description}
+            </p>
+          </div>
+
+          <div className="grid gap-6 md:grid-cols-2">
+            {offices.map((office) => (
+              <div
+                key={office.id}
+                className="group overflow-hidden rounded-xl border bg-background"
+              >
+                <div className="relative h-48 overflow-hidden">
+                  <img
+                    src={office.mapImage}
+                    alt={`نقشه دفتر ${office.city}`}
+                    className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />
+                  <div className="absolute bottom-4 start-4">
+                    <p className="text-xs font-medium tracking-wider text-muted-foreground">
+                      {office.region}
+                    </p>
+                    <h3 className="text-xl font-semibold">{office.city}</h3>
+                  </div>
+                </div>
+
+                <div className="p-6">
+                  <div className="mb-5 space-y-3 text-sm">
+                    <div className="flex items-start gap-3">
+                      <MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <span dir="rtl" className="text-start">
+                        {office.address}
+                      </span>
+                    </div>
+                    <a
+                      href={`tel:${office.phone}`}
+                      className="flex items-center gap-3 hover:underline"
+                      dir="rtl"
+                    >
+                      <Phone className="size-4 shrink-0 text-muted-foreground" />
+                      {office.phone}
+                    </a>
+                    <a
+                      href={`mailto:${office.email}`}
+                      className="flex items-center gap-3 hover:underline"
+                      dir="rtl"
+                    >
+                      <Mail className="size-4 shrink-0 text-muted-foreground" />
+                      {office.email}
+                    </a>
+                  </div>
+
+                  <Button variant="outline" className="w-full gap-2">
+                    <ExternalLink className="size-4" />
+                    مشاهده در نقشه
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact24 };
diff --git a/blocks/contact25.tsx b/blocks/contact25.tsx
new file mode 100644
index 0000000..876512e
--- /dev/null
+++ b/blocks/contact25.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon, MailIcon, MessageCircle } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface FAQ {
+  question: string;
+  answer: string;
+}
+
+interface Contact25Props {
+  title?: string;
+  description?: string;
+  faqTitle?: string;
+  faqs?: FAQ[];
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact25 = ({
+  title = "چگونه می‌توانیم به شما کمک کنیم؟",
+  description = "پاسخ پرسش‌های رایج را مشاهده کنید یا در صورت نیاز پیام خود را برای ما ارسال کنید.",
+  faqTitle = "سوالات متداول",
+  faqs = [
+    {
+      question: "ساعات کاری شما چیست؟",
+      answer:
+        "تیم پشتیبانی ما دوشنبه تا جمعه، ۹ صبح تا ۶ عصر در دسترس است. برای موارد فوری خارج از این ساعات، به urgent@company.com ایمیل بزنید.",
+    },
+    {
+      question: "پاسخ‌دهی چقدر طول می‌کشد؟",
+      answer:
+        "معمولاً ظرف ۲۴ ساعت در روزهای کاری به همه درخواست‌ها پاسخ می‌دهیم. درخواست‌های پیچیده ممکن است تا ۴۸ ساعت زمان ببرند.",
+    },
+    {
+      question: "پشتیبانی تلفنی دارید؟",
+      answer:
+        "بله، پشتیبانی تلفنی برای مشترکین طرح حرفه‌ای و سازمانی فعال است. شماره اختصاصی پشتیبانی را در داشبورد حساب خود ببینید.",
+    },
+    {
+      question: "می‌توانم دمو رزرو کنم؟",
+      answer:
+        "حتماً! از طریق وب‌سایت یا تماس مستقیم با تیم فروش می‌توانید دمو شخصی‌سازی‌شده رزرو کنید. هر جلسه معمولاً ۳۰ تا ۴۵ دقیقه طول می‌کشد.",
+    },
+    {
+      question: "در پیام چه اطلاعاتی بنویسم؟",
+      answer:
+        "لطفاً ایمیل حساب (در صورت وجود)، توضیح دقیق سوال یا مشکل، و در صورت نیاز تصویر یا پیام خطا را ارسال کنید.",
+    },
+  ],
+  className,
+  onSubmit,
+}: Contact25Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-14 text-center">
+            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+              {title}
+            </h1>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+
+          <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
+            <div>
+              <div className="mb-6 flex items-center gap-2">
+                <MessageCircle className="size-5 text-muted-foreground" />
+                <h2 className="text-lg font-medium">{faqTitle}</h2>
+              </div>
+              <Accordion type="single" collapsible className="w-full">
+                {faqs.map((faq, index) => (
+                  <AccordionItem key={index} value={`item-${index}`}>
+                    <AccordionTrigger className="text-start">
+                      {faq.question}
+                    </AccordionTrigger>
+                    <AccordionContent className="text-muted-foreground">
+                      {faq.answer}
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </div>
+
+            <div>
+              <div className="mb-6 flex items-center gap-2">
+                <MailIcon className="size-5 text-muted-foreground" />
+                <h2 className="text-lg font-medium">هنوز سوالی دارید؟</h2>
+              </div>
+              <form
+                onSubmit={form.handleSubmit(handleFormSubmit)}
+                className="flex flex-col gap-6 rounded-xl bg-muted/50 p-8"
+              >
+                {isSubmitted && (
+                  <div
+                    className={cn(
+                      "rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                      showSuccess ? "opacity-100" : "opacity-0",
+                    )}
+                  >
+                    <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                      پیام شما ثبت شد و در کوتاه‌ترین زمان پاسخ خواهیم داد.
+                                                              </p>
+                  </div>
+                )}
+
+                <FieldGroup>
+                  <Controller
+                    control={form.control}
+                    name="name"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام و نام خانوادگی <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="نام و نام خانوادگی"
+                          className="bg-background"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="email"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          ایمیل کاری <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          type="email"
+                          aria-invalid={fieldState.invalid}
+                          placeholder="example@email.com"
+                          dir="rtl"
+                          className="bg-background text-start"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="message"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          پیام <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Textarea
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="چگونه می‌توانیم به شما کمک کنیم؟"
+                          rows={4}
+                          className="bg-background"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  {form.formState.errors.root && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.root.message}
+                    </p>
+                  )}
+
+                  <Button
+                    type="submit"
+                    size="lg"
+                    className="w-full gap-2"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting ? (
+                      <>
+                        <LoaderIcon className="size-4 animate-spin" />
+                        در حال ارسال...
+                      </>
+                    ) : (
+                      "ارسال پیام"
+                    )}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact25 };
diff --git a/blocks/contact28.tsx b/blocks/contact28.tsx
new file mode 100644
index 0000000..0804d0d
--- /dev/null
+++ b/blocks/contact28.tsx
@@ -0,0 +1,461 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronLeft, ChevronRight, LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  inquiryType: z.string().min(1, "لطفاً نوع درخواست را انتخاب کنید"),
+  budget: z.string().optional(),
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  company: z.string().optional(),
+  phone: z.string().optional(),
+  message: z.string().min(10, "لطفاً جزئیات بیشتری بنویسید"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+const steps = [
+  { id: 1, name: "نوع درخواست" },
+  { id: 2, name: "اطلاعات شما" },
+  { id: 3, name: "پیام" },
+];
+
+interface Contact28Props {
+  title?: string;
+  subtitle?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact28 = ({
+  title = "شروع کنید",
+  subtitle = "نیازها و اهداف پروژه خود را شرح دهید تا کارشناسان ما حداکثر طی یک روز کاری با شما تماس بگیرند.",
+  className,
+  onSubmit,
+}: Contact28Props) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      inquiryType: "",
+      budget: "",
+      name: "",
+      email: "",
+      company: "",
+      phone: "",
+      message: "",
+    },
+  });
+
+  const validateStep = async (step: number): Promise<boolean> => {
+    let fieldsToValidate: (keyof ContactFormData)[] = [];
+
+    if (step === 1) {
+      fieldsToValidate = ["inquiryType"];
+    } else if (step === 2) {
+      fieldsToValidate = ["name", "email"];
+    } else if (step === 3) {
+      fieldsToValidate = ["message"];
+    }
+
+    const result = await form.trigger(fieldsToValidate);
+    return result;
+  };
+
+  const nextStep = async () => {
+    const isValid = await validateStep(currentStep);
+    if (isValid && currentStep < 3) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  if (isSubmitted) {
+    return (
+      <section
+        dir="rtl"
+        lang="fa"
+        className={cn("relative min-h-screen bg-muted/30", className)}
+      >
+        <div className="container flex min-h-screen flex-col justify-center py-20">
+          <div className="mx-auto max-w-xl text-center">
+            <div className="mx-auto mb-6 flex size-20 items-center justify-center rounded-full bg-green-500/10">
+              <Check className="size-10 text-green-600" />
+            </div>
+            <h2 className="mb-4 text-xl font-medium">درخواست شما ثبت شد</h2>
+            <p className="text-xl text-muted-foreground">
+              پیام شما با موفقیت دریافت شد. نتیجه بررسی حداکثر تا یک روز کاری به شما اطلاع داده خواهد شد.
+                                    </p>
+            <Button
+              className="mt-10"
+              size="lg"
+              variant="outline"
+              onClick={() => {
+                setIsSubmitted(false);
+                setCurrentStep(1);
+                form.reset();
+              }}
+            >
+              ارسال درخواست جدید
+            </Button>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative min-h-screen bg-muted/30", className)}
+    >
+      <div className="container flex min-h-screen flex-col justify-center py-20">
+        <div className="grid gap-16 lg:grid-cols-2 lg:gap-24">
+          <div className="flex flex-col justify-center">
+            <h1 className="mb-6 text-2xll font-medium tracking-tight md:text-2xll lg:text-2xll">
+              {title}
+            </h1>
+            <p className="mb-12 text-xl text-muted-foreground md:text-xl">
+              {subtitle}
+            </p>
+
+            <div className="space-y-4">
+              {steps.map((step) => (
+                <div
+                  key={step.id}
+                  className={cn(
+                    "flex items-center gap-4 rounded-lg p-4 transition-colors",
+                    currentStep === step.id
+                      ? "bg-background shadow-sm"
+                      : currentStep > step.id
+                        ? "text-muted-foreground"
+                        : "text-muted-foreground/50",
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "flex size-10 shrink-0 items-center justify-center rounded-full font-medium transition-colors",
+                      currentStep > step.id
+                        ? "bg-primary text-primary-foreground"
+                        : currentStep === step.id
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-muted text-muted-foreground",
+                    )}
+                  >
+                    {currentStep > step.id ? (
+                      <Check className="size-5" />
+                    ) : (
+                      step.id.toLocaleString("fa-IR")
+                    )}
+                  </div>
+                  <span className="text-lg font-medium">{step.name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex items-center">
+            <form
+              onSubmit={form.handleSubmit(handleFormSubmit)}
+              className="w-full rounded-2xl bg-background p-8 shadow-lg md:p-10"
+            >
+              <h2 className="mb-8 text-xl font-semibold">
+                {steps[currentStep - 1].name}
+              </h2>
+
+              {currentStep === 1 && (
+                <FieldGroup>
+                  <Controller
+                    control={form.control}
+                    name="inquiryType"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نوع درخواست{" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger
+                            id={field.name}
+                            aria-invalid={fieldState.invalid}
+                          >
+                            <SelectValue placeholder="موضوع درخواست را انتخاب کنید" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="general">پرسش عمومی</SelectItem>
+                            <SelectItem value="sales">فروش و قیمت‌گذاری</SelectItem>
+                            <SelectItem value="support">پشتیبانی فنی</SelectItem>
+                            <SelectItem value="partnership">همکاری</SelectItem>
+                            <SelectItem value="demo">درخواست دمو</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="budget"
+                    render={({ field }) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>
+                          بودجه پروژه
+                        </FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger id={field.name}>
+                            <SelectValue placeholder="انتخاب بازه بودجه" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="<5k">
+                              کمتر از ۵ هزار دلار
+                            </SelectItem>
+                            <SelectItem value="5k-15k">
+                              ۵ تا ۱۵ هزار دلار
+                            </SelectItem>
+                            <SelectItem value="15k-50k">
+                              ۱۵ تا ۵۰ هزار دلار
+                            </SelectItem>
+                            <SelectItem value="50k-100k">
+                              ۵۰ تا ۱۰۰ هزار دلار
+                            </SelectItem>
+                            <SelectItem value=">100k">
+                              بیش از ۱۰۰ هزار دلار
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    )}
+                  />
+                </FieldGroup>
+              )}
+
+              {currentStep === 2 && (
+                <FieldGroup>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <Controller
+                      control={form.control}
+                      name="name"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            نام و نام خانوادگی <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            aria-invalid={fieldState.invalid}
+                            placeholder="نام و نام خانوادگی"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="email"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            ایمیل کاری <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            type="email"
+                            aria-invalid={fieldState.invalid}
+                            placeholder="example@email.com"
+                            dir="rtl"
+                            className="text-start"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+                  </div>
+
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <Controller
+                      control={form.control}
+                      name="company"
+                      render={({ field }) => (
+                        <Field>
+                          <FieldLabel htmlFor={field.name}>نام شرکت یا سازمان</FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            placeholder="نام شرکت یا سازمان"
+                          />
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="phone"
+                      render={({ field }) => (
+                        <Field>
+                          <FieldLabel htmlFor={field.name}>
+                            شماره تلفن
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            type="tel"
+                            placeholder="۰۹۱۲ ۳۴۵ ۶۷۸۹"
+                            dir="rtl"
+                            className="text-start"
+                          />
+                        </Field>
+                      )}
+                    />
+                  </div>
+                </FieldGroup>
+              )}
+
+              {currentStep === 3 && (
+                <FieldGroup>
+                  <Controller
+                    control={form.control}
+                    name="message"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          چگونه می‌توانیم به شما کمک کنیم؟{" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Textarea
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="جزئیات پروژه، نیازها یا پرسش‌های خود را با ما در میان بگذارید."
+                          rows={6}
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  {form.formState.errors.root && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.root.message}
+                    </p>
+                  )}
+                </FieldGroup>
+              )}
+
+              <div className="mt-8 flex items-center justify-between">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="gap-1"
+                  onClick={prevStep}
+                  disabled={currentStep === 1}
+                >
+                  <ChevronRight className="size-4" />
+                  بازگشت
+                </Button>
+
+                {currentStep < 3 ? (
+                  <Button
+                    type="button"
+                    size="lg"
+                    className="gap-1"
+                    onClick={nextStep}
+                  >
+                    مرحله بعد
+                                                          <ChevronLeft className="size-4" />
+                  </Button>
+                ) : (
+                  <Button
+                    type="submit"
+                    size="lg"
+                    className="gap-2"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting ? (
+                      <>
+                        <LoaderIcon className="size-4 animate-spin" />
+                        در حال ارسال...
+                      </>
+                    ) : (
+                      "ارسال"
+                    )}
+                  </Button>
+                )}
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact28 };
diff --git a/blocks/contact29.tsx b/blocks/contact29.tsx
new file mode 100644
index 0000000..cc88196
--- /dev/null
+++ b/blocks/contact29.tsx
@@ -0,0 +1,408 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Building2,
+  Check,
+  ChevronRight,
+  HelpCircle,
+  Laptop,
+  LoaderIcon,
+  Rocket,
+  Users,
+} from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  serviceType: z.string().min(1, "لطفاً یک خدمت انتخاب کنید"),
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  company: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+const services = [
+  {
+    id: "consulting",
+    icon: Users,
+    title: "مشاوره تخصصی",
+    description: "مشاوره برای برنامه‌ریزی، تحلیل و تصمیم‌گیری",
+  },
+  {
+    id: "development",
+    icon: Laptop,
+    title: "توسعه نرم‌افزار",
+    description: "طراحی و توسعه راهکارهای نرم‌افزاری متناسب با نیاز شما",
+  },
+  {
+    id: "enterprise",
+    icon: Building2,
+    title: "راهکارهای سازمانی",
+    description: "پیاده‌سازی سامانه‌های سازمانی در مقیاس بزرگ",
+  },
+  {
+    id: "startup",
+    icon: Rocket,
+    title: "استارتاپ‌ها",
+    description: "همراهی در طراحی نسخه اولیه محصول و توسعه کسب‌وکار",
+  },
+  {
+    id: "other",
+    icon: HelpCircle,
+    title: "سایر خدمات",
+    description: "سایر درخواست‌ها و نیازها",
+  },
+];
+
+interface Contact29Props {
+  title?: string;
+  subtitle?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact29 = ({
+  title = "همکاری را آغاز کنیم",
+  subtitle = "حوزه موردنیاز خود را انتخاب کنید و اطلاعات پروژه را برای ما ارسال کنید.",
+  className,
+  onSubmit,
+}: Contact29Props) => {
+  const [step, setStep] = useState<"select" | "form" | "success">("select");
+  const [selectedService, setSelectedService] = useState<string>("");
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      serviceType: "",
+      name: "",
+      email: "",
+      company: "",
+      message: "",
+    },
+  });
+
+  const handleServiceSelect = (serviceId: string) => {
+    setSelectedService(serviceId);
+    form.setValue("serviceType", serviceId);
+  };
+
+  const handleContinue = () => {
+    if (selectedService) {
+      setStep("form");
+    }
+  };
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setStep("success");
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  const resetForm = () => {
+    setStep("select");
+    setSelectedService("");
+    form.reset();
+  };
+
+  if (step === "success") {
+    return (
+      <section
+        dir="rtl"
+        lang="fa"
+        className={cn("relative min-h-screen bg-muted/30", className)}
+      >
+        <div className="container flex min-h-screen flex-col justify-center py-20">
+          <div className="mx-auto max-w-xl text-center">
+            <div className="mx-auto mb-6 flex size-20 items-center justify-center rounded-full bg-green-500/10">
+              <Check className="size-10 text-green-600" />
+            </div>
+            <h2 className="mb-4 text-xl font-medium">پیام شما ارسال شد</h2>
+            <p className="text-xl text-muted-foreground">
+              از اعتماد شما سپاسگزاریم. درخواست شما بررسی شده و حداکثر تا یک روز کاری با شما تماس خواهیم گرفت.
+                                    </p>
+            <Button
+              className="mt-10"
+              size="lg"
+              variant="outline"
+              onClick={resetForm}
+            >
+              ارسال پیام جدید
+            </Button>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative min-h-screen bg-muted/30", className)}
+    >
+      <div className="container flex min-h-screen flex-col justify-center py-20">
+        {step === "select" && (
+          <div className="mx-auto max-w-4xl">
+            <div className="mb-12 text-center">
+              <h1 className="mb-6 text-2xll font-medium tracking-tight md:text-2xll lg:text-2xll">
+                {title}
+              </h1>
+              <p className="text-xl text-muted-foreground md:text-xl">
+                {subtitle}
+              </p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {services.map((service) => {
+                const Icon = service.icon;
+                const isSelected = selectedService === service.id;
+                return (
+                  <button
+                    key={service.id}
+                    type="button"
+                    onClick={() => handleServiceSelect(service.id)}
+                    className={cn(
+                      "relative flex flex-col items-center rounded-2xl p-8 text-center transition-all",
+                      isSelected
+                        ? "bg-background shadow-lg ring-2 ring-primary"
+                        : "bg-background/60 hover:bg-background hover:shadow-md",
+                    )}
+                  >
+                    {isSelected && (
+                      <div className="absolute top-4 end-4 flex size-6 items-center justify-center rounded-full bg-primary">
+                        <Check className="size-4 text-primary-foreground" />
+                      </div>
+                    )}
+                    <div
+                      className={cn(
+                        "mb-4 flex size-14 items-center justify-center rounded-xl",
+                        isSelected ? "bg-primary/10" : "bg-muted",
+                      )}
+                    >
+                      <Icon
+                        className={cn(
+                          "size-7",
+                          isSelected ? "text-primary" : "text-muted-foreground",
+                        )}
+                      />
+                    </div>
+                    <h3 className="mb-2 text-lg font-semibold">
+                      {service.title}
+                    </h3>
+                    <p className="text-muted-foreground">
+                      {service.description}
+                    </p>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div className="mt-12 flex justify-center">
+              <Button
+                size="lg"
+                onClick={handleContinue}
+                disabled={!selectedService}
+              >
+                مرحله بعد
+                                            </Button>
+            </div>
+          </div>
+        )}
+
+        {step === "form" && (
+          <div className="grid gap-16 lg:grid-cols-2 lg:gap-24">
+            <div className="flex flex-col justify-center">
+              <button
+                type="button"
+                onClick={() => setStep("select")}
+                className="mb-8 flex items-center gap-1 text-muted-foreground hover:text-foreground"
+              >
+                <ChevronRight className="size-4" />
+                تغییر انتخاب
+              </button>
+
+              <h1 className="mb-6 text-2xll font-medium tracking-tight md:text-2xll lg:text-2xll">
+                درباره پروژه بیشتر توضیح دهید
+                                            </h1>
+              <p className="mb-12 text-xl text-muted-foreground md:text-xl">
+                هرچه اطلاعات بیشتری از پروژه ارائه دهید، راهکار دقیق‌تر و پیشنهاد مناسب‌تری دریافت خواهید کرد.
+                                            </p>
+
+              <div className="flex items-center gap-4 rounded-xl bg-background p-5 shadow-sm">
+                {(() => {
+                  const service = services.find(
+                    (s) => s.id === selectedService,
+                  );
+                  if (!service) return null;
+                  const Icon = service.icon;
+                  return (
+                    <>
+                      <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10">
+                        <Icon className="size-6 text-primary" />
+                      </div>
+                      <div>
+                        <p className="text-lg font-semibold">{service.title}</p>
+                        <p className="text-muted-foreground">
+                          {service.description}
+                        </p>
+                      </div>
+                    </>
+                  );
+                })()}
+              </div>
+            </div>
+
+            <div className="flex items-center">
+              <form
+                onSubmit={form.handleSubmit(handleFormSubmit)}
+                className="w-full rounded-2xl bg-background p-8 shadow-lg md:p-10"
+              >
+                <h2 className="mb-8 text-xl font-semibold">اطلاعات تماس</h2>
+
+                <FieldGroup>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <Controller
+                      control={form.control}
+                      name="name"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            نام و نام خانوادگی <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            aria-invalid={fieldState.invalid}
+                            placeholder="نام و نام خانوادگی"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="email"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            ایمیل کاری <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            type="email"
+                            aria-invalid={fieldState.invalid}
+                            placeholder="example@email.com"
+                            dir="rtl"
+                            className="text-start"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+                  </div>
+
+                  <Controller
+                    control={form.control}
+                    name="company"
+                    render={({ field }) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>نام شرکت یا سازمان</FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          placeholder="نام شرکت یا سازمان"
+                        />
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="message"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          پیام <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Textarea
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="اهداف، نیازها و جزئیات پروژه خود را شرح دهید."
+                          rows={5}
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  {form.formState.errors.root && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.root.message}
+                    </p>
+                  )}
+
+                  <Button
+                    type="submit"
+                    size="lg"
+                    className="w-full gap-2"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting ? (
+                      <>
+                        <LoaderIcon className="size-4 animate-spin" />
+                        در حال ارسال...
+                      </>
+                    ) : (
+                      "ارسال پیام"
+                    )}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { Contact29 };
diff --git a/blocks/contact3.tsx b/blocks/contact3.tsx
new file mode 100644
index 0000000..97b6410
--- /dev/null
+++ b/blocks/contact3.tsx
@@ -0,0 +1,145 @@
+import {
+  MessageCircleDashed,
+  MessagesSquare,
+  ScanFace,
+  Users,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Contact3Props {
+  className?: string;
+}
+
+const Contact3 = ({ className }: Contact3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <h1 className="mb-7 text-xl font-bold md:text-2xll">تماس با ما</h1>
+          <div className="flex flex-col justify-center gap-2 sm:flex-row">
+            <Button size="lg">درخواست دمو</Button>
+            <Button variant="outline" size="lg">
+              شروع دوره آزمایشی رایگان
+            </Button>
+          </div>
+          <p className="mt-4 text-sm text-muted-foreground">
+            نیازی به وارد کردن اطلاعات پرداخت نیست
+          </p>
+        </div>
+        <div className="mt-28 grid gap-16 md:grid-cols-2">
+          <div>
+            <MessagesSquare className="mb-5 h-8 w-auto" />
+            <p className="mb-2 font-bold md:text-xl">پشتیبانی فنی</p>
+            <p className="mb-6 text-sm text-muted-foreground md:text-base">
+              اگر در استفاده از محصول با مشکلی روبه‌رو شده‌اید، تیم پشتیبانی آماده پاسخ‌گویی و راهنمایی شماست.
+                                      </p>
+            <a href="#" className="font-semibold hover:underline">
+              تماس با پشتیبانی
+            </a>
+          </div>
+          <div>
+            <Users className="mb-5 h-8 w-auto" />
+            <p className="mb-2 font-bold md:text-xl">مشاوره فروش</p>
+            <p className="mb-6 text-sm text-muted-foreground md:text-base">
+              برای دریافت دمو، استعلام قیمت یا انتخاب بهترین پلن، با کارشناسان فروش در ارتباط باشید.
+                                      </p>
+            <a href="#" className="font-semibold hover:underline">
+              صحبت با فروش
+            </a>
+          </div>
+          <div>
+            <MessageCircleDashed className="mb-5 h-8 w-auto" />
+            <p className="mb-2 font-bold md:text-xl">همکاری و ارتباطات</p>
+            <p className="mb-6 text-sm text-muted-foreground md:text-base">
+              برای همکاری، امور رسانه‌ای یا سایر درخواست‌ها از طریق فرم تماس با ما در ارتباط باشید.
+                                      </p>
+            <a href="#" className="font-semibold hover:underline">
+              تماس با ما
+            </a>
+          </div>
+          <div>
+            <ScanFace className="mb-5 h-8 w-auto" />
+            <p className="mb-2 font-bold md:text-xl">تأیید اطلاعات</p>
+            <p className="mb-6 text-sm text-muted-foreground md:text-base">
+              در صورت نیاز به تأیید اطلاعات یا استعلام‌های رسمی، از طریق سامانه احراز هویت اقدام کنید.
+                                      </p>
+            <a href="#" className="font-semibold hover:underline">
+              شروع احراز هویت
+            </a>
+          </div>
+        </div>
+        <div className="mt-28">
+          <h1 className="mb-16 text-center text-xl font-bold md:text-xl">
+            دفاتر و نمایندگی‌های ما
+                                </h1>
+          <div className="mx-auto grid max-w-7xl gap-7 sm:grid-cols-2 md:grid-cols-3 lg:px-14">
+            <div className="rounded-lg border p-5">
+              <div className="mb-2 flex items-center">
+                <div className="ms-2 h-5 w-7 rounded-sm bg-blue-500"></div>
+                <p className="font-bold sm:text-lg">نیویورک، آمریکا</p>
+              </div>
+              <p
+                className="text-sm text-muted-foreground sm:text-base"
+                dir="rtl"
+              >
+                123 5th Ave, New York, NY 10001
+              </p>
+            </div>
+            <div className="rounded-lg border p-5">
+              <div className="mb-2 flex items-center">
+                <div className="ms-2 h-5 w-7 rounded-sm bg-red-500"></div>
+                <p className="font-bold sm:text-lg">لندن، بریتانیا</p>
+              </div>
+              <p
+                className="text-sm text-muted-foreground sm:text-base"
+                dir="rtl"
+              >
+                50 Oxford St, London W1D 1BS, United Kingdom
+              </p>
+            </div>
+            <div className="rounded-lg border p-5">
+              <div className="mb-2 flex items-center">
+                <div className="ms-2 h-5 w-7 rounded-sm bg-green-500"></div>
+                <p className="font-bold sm:text-lg">توکیو، ژاپن</p>
+              </div>
+              <p
+                className="text-sm text-muted-foreground sm:text-base"
+                dir="rtl"
+              >
+                2-7-5 Kyobashi, Chuo-ku, Tokyo 104-0031, Japan
+              </p>
+            </div>
+            <div className="rounded-lg border p-5">
+              <div className="mb-2 flex items-center">
+                <div className="ms-2 h-5 w-7 rounded-sm bg-yellow-500"></div>
+                <p className="font-bold sm:text-lg">سیدنی، استرالیا</p>
+              </div>
+              <p
+                className="text-sm text-muted-foreground sm:text-base"
+                dir="rtl"
+              >
+                100 George St, Sydney NSW 2000, Australia
+              </p>
+            </div>
+            <div className="rounded-lg border p-5">
+              <div className="mb-2 flex items-center">
+                <div className="ms-2 h-5 w-7 rounded-sm bg-purple-500"></div>
+                <p className="font-bold sm:text-lg">برلین، آلمان</p>
+              </div>
+              <p
+                className="text-sm text-muted-foreground sm:text-base"
+                dir="rtl"
+              >
+                Unter den Linden 52, 10117 Berlin, Germany
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact3 };
diff --git a/blocks/contact30.tsx b/blocks/contact30.tsx
new file mode 100644
index 0000000..97df301
--- /dev/null
+++ b/blocks/contact30.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon, Mail, MapPin, Phone } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  phone: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact30Props {
+  title?: string;
+  subtitle?: string;
+  email?: string;
+  phone?: string;
+  address?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact30 = ({
+  title = "گفتگو را آغاز کنیم",
+  subtitle = "اگر برای پروژه، محصول یا کسب‌وکار خود به مشاوره نیاز دارید، تیم ما آماده شنیدن ایده‌های شماست.",
+  email = "hello@company.com",
+  phone = "۲۱-۱۲۳۴۵۶۷۸",
+  address = "تهران، خیابان ولیعصر، پلاک ۱۲۳",
+  className,
+  onSubmit,
+}: Contact30Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      phone: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative min-h-screen bg-muted/30", className)}
+    >
+      <div className="container flex min-h-screen flex-col justify-center py-20">
+        <div className="grid gap-16 lg:grid-cols-2 lg:gap-24">
+          <div className="flex flex-col justify-center">
+            <h1 className="mb-6 text-2xll font-medium tracking-tight md:text-2xll lg:text-2xll">
+              {title}
+            </h1>
+            <p className="mb-12 text-xl text-muted-foreground md:text-xl">
+              {subtitle}
+            </p>
+
+            <div className="space-y-6">
+              <a
+                href={`mailto:${email}`}
+                className="group flex items-center gap-4 text-lg"
+              >
+                <div className="flex size-12 items-center justify-center rounded-full bg-background shadow-sm">
+                  <Mail className="size-5 text-muted-foreground" />
+                </div>
+                <span className="group-hover:underline" dir="rtl">
+                  {email}
+                </span>
+              </a>
+              <a
+                href={`tel:${phone}`}
+                className="group flex items-center gap-4 text-lg"
+              >
+                <div className="flex size-12 items-center justify-center rounded-full bg-background shadow-sm">
+                  <Phone className="size-5 text-muted-foreground" />
+                </div>
+                <span className="group-hover:underline" dir="rtl">
+                  {phone}
+                </span>
+              </a>
+              <div className="flex items-center gap-4 text-lg">
+                <div className="flex size-12 items-center justify-center rounded-full bg-background shadow-sm">
+                  <MapPin className="size-5 text-muted-foreground" />
+                </div>
+                <span className="text-muted-foreground">{address}</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center">
+            <form
+              onSubmit={form.handleSubmit(handleFormSubmit)}
+              className="w-full rounded-2xl bg-background p-8 shadow-lg md:p-10"
+            >
+              <h2 className="mb-8 text-xl font-semibold">ارسال پیام</h2>
+
+              {isSubmitted && (
+                <div
+                  className={cn(
+                    "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                    showSuccess ? "opacity-100" : "opacity-0",
+                  )}
+                >
+                  <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                    پیام شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                        </p>
+                </div>
+              )}
+
+              <FieldGroup>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <Controller
+                    control={form.control}
+                    name="name"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام و نام خانوادگی <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="نام و نام خانوادگی"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="email"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          ایمیل <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          type="email"
+                          aria-invalid={fieldState.invalid}
+                          placeholder="example@email.com"
+                          dir="rtl"
+                          className="text-start"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                </div>
+
+                <Controller
+                  control={form.control}
+                  name="phone"
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel htmlFor={field.name}>تلفن</FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="tel"
+                        placeholder="۰۹۱۲-۳۴۵-۶۷۸۹"
+                        dir="rtl"
+                        className="text-start"
+                      />
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        پیام <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="اهداف، نیازها و جزئیات پروژه خود را شرح دهید."
+                        rows={5}
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <Button
+                  size="lg"
+                  className="w-full gap-2"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="size-4 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    "ارسال پیام"
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact30 };
diff --git a/blocks/contact31.tsx b/blocks/contact31.tsx
new file mode 100644
index 0000000..1782304
--- /dev/null
+++ b/blocks/contact31.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  company: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact31Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact31 = ({
+  title = "تماس با ما",
+  description = "اگر درباره خدمات، تعرفه‌ها یا نحوه همکاری پرسشی دارید، از طریق فرم زیر با ما در ارتباط باشید.",
+  image = "/block-media/shadcnblocks/block/lummi/Modern%20Architectural%20Elegance%20at%20Twilight.png",
+  className,
+  onSubmit,
+}: Contact31Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      company: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto grid max-w-6xl overflow-hidden rounded-2xl bg-muted/50 lg:grid-cols-2">
+          <div className="relative hidden lg:block">
+            <img
+              src={image}
+              alt="تماس با ما"
+              className="absolute inset-0 size-full object-cover"
+            />
+          </div>
+
+          <div className="p-8 md:p-12 lg:p-16">
+            <div className="mb-8">
+              <h1 className="mb-4 text-3xl font-medium tracking-tight md:text-xl">
+                {title}
+              </h1>
+              <p className="text-muted-foreground">{description}</p>
+            </div>
+
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  درخواست شما با موفقیت ثبت شد. به‌زودی با شما تماس خواهیم گرفت.
+                                                  </p>
+              </div>
+            )}
+
+            <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+              <FieldGroup>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <Controller
+                    control={form.control}
+                    name="name"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام و نام خانوادگی <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="نام و نام خانوادگی"
+                          className="bg-background"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="email"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          ایمیل <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          type="email"
+                          aria-invalid={fieldState.invalid}
+                          placeholder="example@email.com"
+                          dir="rtl"
+                          className="bg-background text-start"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                </div>
+
+                <Controller
+                  control={form.control}
+                  name="company"
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel htmlFor={field.name}>شرکت</FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        placeholder="نام شرکت یا سازمان"
+                        className="bg-background"
+                      />
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        پیام <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="موضوع یا درخواست خود را بنویسید."
+                        rows={5}
+                        className="bg-background"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <Button
+                  size="lg"
+                  className="w-full gap-2"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="size-4 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    "ارسال پیام"
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact31 };
diff --git a/blocks/contact32.tsx b/blocks/contact32.tsx
new file mode 100644
index 0000000..e9d4102
--- /dev/null
+++ b/blocks/contact32.tsx
@@ -0,0 +1,276 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, LoaderIcon, Mail, Phone } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  firstName: z.string().min(1, "نام الزامی است"),
+  lastName: z.string().min(1, "نام خانوادگی الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact32Props {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  email?: string;
+  phone?: string;
+  image?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact32 = ({
+  title = "تماس با ما",
+  subtitle = "همکاری را از همین امروز آغاز کنیم",
+  description = "فرم را تکمیل کنید تا کارشناسان ما حداکثر تا یک روز کاری با شما تماس بگیرند.",
+  email = "hello@studio.com",
+  phone = "۲۱-۱۲۳۴۵۶۷۸",
+  image = "/block-media/shadcnblocks/block/lummi/Modern%20Architectural%20Elegance%20at%20Twilight.png",
+  className,
+  onSubmit,
+}: Contact32Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative", className)}>
+      <div className="grid min-h-screen lg:grid-cols-2">
+        {/* Image Side */}
+        <div className="relative hidden lg:block">
+          <img
+            src={image}
+            alt="تماس با ما"
+            className="absolute inset-0 size-full object-cover"
+          />
+          <div className="absolute inset-0 bg-black/40" />
+          <div className="relative flex h-full flex-col justify-end p-12 text-white">
+            <p className="mb-2 text-sm tracking-widest uppercase opacity-80">
+              راه‌های ارتباط با ما
+                                      </p>
+            <h2 className="text-xl font-medium">{subtitle}</h2>
+          </div>
+        </div>
+
+        {/* Form Side */}
+        <div className="flex flex-col justify-center px-6 py-16 md:px-12 lg:px-16">
+          <div className="mx-auto w-full max-w-md">
+            <div className="mb-10">
+              <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+                {title}
+              </h1>
+              <p className="text-muted-foreground">{description}</p>
+            </div>
+
+            <div className="mb-10 flex flex-col gap-4 sm:flex-row sm:gap-8">
+              <a
+                href={`mailto:${email}`}
+                className="group flex items-center gap-2 text-sm"
+              >
+                <Mail className="size-4 text-muted-foreground" />
+                <span className="group-hover:underline" dir="rtl">
+                  {email}
+                </span>
+              </a>
+              <a
+                href={`tel:${phone}`}
+                className="group flex items-center gap-2 text-sm"
+              >
+                <Phone className="size-4 text-muted-foreground" />
+                <span className="group-hover:underline" dir="rtl">
+                  {phone}
+                </span>
+              </a>
+            </div>
+
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  پیام شما با موفقیت دریافت شد. نتیجه بررسی در کوتاه‌ترین زمان اطلاع‌رسانی خواهد شد.
+                                                  </p>
+              </div>
+            )}
+
+            <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+              <FieldGroup>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <Controller
+                    control={form.control}
+                    name="firstName"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام و نام خانوادگی <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="علی"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="lastName"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام خانوادگی{" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="محمدی"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                </div>
+
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        ایمیل <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="example@email.com"
+                        dir="rtl"
+                        className="text-start"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        پیام <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="اهداف، نیازها و جزئیات پروژه خود را شرح دهید."
+                        rows={5}
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <Button
+                  size="lg"
+                  className="w-full gap-2"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="size-4 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    <>
+                      ارسال پیام
+                      <ArrowLeft className="size-4" />
+                    </>
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact32 };
diff --git a/blocks/contact33.tsx b/blocks/contact33.tsx
new file mode 100644
index 0000000..8a74eee
--- /dev/null
+++ b/blocks/contact33.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  subject: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact33Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact33 = ({
+  title = "شروع همکاری",
+  description = "ایده‌ها، نیازها و اهداف خود را با ما در میان بگذارید تا بهترین راهکار را پیشنهاد دهیم.",
+  image = "/block-media/shadcnblocks/block/lummi/Modern%20Architectural%20Elegance%20at%20Twilight.png",
+  className,
+  onSubmit,
+}: Contact33Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      subject: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl">
+          <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
+            {/* Form Side */}
+            <div>
+              <div className="mb-10">
+                <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+                  {title}
+                </h1>
+                <p className="text-lg text-muted-foreground">{description}</p>
+              </div>
+
+              {isSubmitted && (
+                <div
+                  className={cn(
+                    "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                    showSuccess ? "opacity-100" : "opacity-0",
+                  )}
+                >
+                  <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                    درخواست شما با موفقیت ثبت شد. به‌زودی با شما تماس خواهیم گرفت.
+                                                        </p>
+                </div>
+              )}
+
+              <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+                <FieldGroup>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <Controller
+                      control={form.control}
+                      name="name"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            نام و نام خانوادگی <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            aria-invalid={fieldState.invalid}
+                            placeholder="نام و نام خانوادگی"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="email"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            ایمیل <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            type="email"
+                            aria-invalid={fieldState.invalid}
+                            placeholder="example@email.com"
+                            dir="rtl"
+                            className="text-start"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+                  </div>
+
+                  <Controller
+                    control={form.control}
+                    name="subject"
+                    render={({ field }) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>موضوع</FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger id={field.name}>
+                            <SelectValue placeholder="موضوع درخواست را انتخاب کنید" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="general">پرسش عمومی</SelectItem>
+                            <SelectItem value="project">پروژه جدید</SelectItem>
+                            <SelectItem value="collaboration">همکاری</SelectItem>
+                            <SelectItem value="press">رسانه و مطبوعات</SelectItem>
+                            <SelectItem value="other">سایر</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="message"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          پیام <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Textarea
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="جزئیات پروژه، نیازها یا درخواست خود را برای ما بنویسید."
+                          rows={6}
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  {form.formState.errors.root && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.root.message}
+                    </p>
+                  )}
+
+                  <Button
+                    size="lg"
+                    className="w-full gap-2 sm:w-auto"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting ? (
+                      <>
+                        <LoaderIcon className="size-4 animate-spin" />
+                        در حال ارسال...
+                      </>
+                    ) : (
+                      "ارسال پیام"
+                    )}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </div>
+
+            {/* Image Side */}
+            <div className="hidden lg:block">
+              <div className="h-full overflow-hidden rounded-2xl">
+                <img src={image} alt="تماس با ما" className="size-full object-cover" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact33 };
diff --git a/blocks/contact34.tsx b/blocks/contact34.tsx
new file mode 100644
index 0000000..7531f46
--- /dev/null
+++ b/blocks/contact34.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowUpLeft, LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact34Props {
+  title?: string;
+  tagline?: string;
+  email?: string;
+  phone?: string;
+  address?: string;
+  image?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact34 = ({
+  title = "برای ساخت آینده‌ای بهتر کنار هم باشیم",
+  tagline = "تماس",
+  email = "studio@example.com",
+  phone = "۲۱-۱۲۳۴۵۶۷۸",
+  address = "تهران، خیابان ولیعصر، پلاک ۱۲۳",
+  image = "/block-media/shadcnblocks/block/lummi/Modern%20Architectural%20Elegance%20at%20Twilight.png",
+  className,
+  onSubmit,
+}: Contact34Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl">
+          <div className="grid gap-12 lg:grid-cols-5 lg:gap-16">
+            {/* Image Side */}
+            <div className="relative lg:col-span-3">
+              <div className="overflow-hidden rounded-3xl">
+                <img
+                  src={image}
+                  alt="تماس با ما"
+                  className="aspect-[4/3] w-full object-cover lg:aspect-[3/4]"
+                />
+              </div>
+              <div className="absolute right-6 bottom-6 left-6 rounded-2xl bg-background/95 p-6 shadow-lg backdrop-blur-sm lg:right-8 lg:bottom-8 lg:left-8 lg:p-8">
+                <div className="grid gap-4 sm:grid-cols-3">
+                  <div>
+                    <p className="mb-1 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                      ایمیل
+                    </p>
+                    <a
+                      href={`mailto:${email}`}
+                      className="text-sm hover:underline"
+                      dir="rtl"
+                    >
+                      {email}
+                    </a>
+                  </div>
+                  <div>
+                    <p className="mb-1 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                      تلفن
+                    </p>
+                    <a
+                      href={`tel:${phone}`}
+                      className="text-sm hover:underline"
+                      dir="rtl"
+                    >
+                      {phone}
+                    </a>
+                  </div>
+                  <div>
+                    <p className="mb-1 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                      آدرس
+                    </p>
+                    <p className="text-sm">{address}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Form Side */}
+            <div className="flex flex-col justify-center lg:col-span-2">
+              <div className="mb-8">
+                <p className="mb-3 text-sm font-medium tracking-wider text-muted-foreground uppercase">
+                  {tagline}
+                </p>
+                <h1 className="text-3xl font-medium tracking-tight md:text-xl">
+                  {title}
+                </h1>
+              </div>
+
+              {isSubmitted && (
+                <div
+                  className={cn(
+                    "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                    showSuccess ? "opacity-100" : "opacity-0",
+                  )}
+                >
+                  <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                    پیام شما با موفقیت ارسال شد.
+                                                        </p>
+                </div>
+              )}
+
+              <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+                <FieldGroup>
+                  <Controller
+                    control={form.control}
+                    name="name"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          نام و نام خانوادگی <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="نام و نام خانوادگی"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="email"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          ایمیل <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          type="email"
+                          aria-invalid={fieldState.invalid}
+                          placeholder="example@email.com"
+                          dir="rtl"
+                          className="text-start"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="message"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          پیام <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Textarea
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="اهداف، نیازها و جزئیات پروژه خود را شرح دهید."
+                          rows={5}
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  {form.formState.errors.root && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.root.message}
+                    </p>
+                  )}
+
+                  <Button
+                    size="lg"
+                    className="w-full gap-2"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting ? (
+                      <>
+                        <LoaderIcon className="size-4 animate-spin" />
+                        در حال ارسال...
+                      </>
+                    ) : (
+                      <>
+                        ارسال پیام
+                        <ArrowUpLeft className="size-4" />
+                      </>
+                    )}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact34 };
diff --git a/blocks/contact35.tsx b/blocks/contact35.tsx
new file mode 100644
index 0000000..051525e
--- /dev/null
+++ b/blocks/contact35.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  phone: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact35Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact35 = ({
+  title = "تماس با ما",
+  description = "اگر درباره محصولات، خدمات یا همکاری پرسشی دارید، از طریق فرم تماس با ما در ارتباط باشید.",
+  image = "/block-media/shadcnblocks/block/lummi/Modern%20Architectural%20Elegance%20at%20Twilight.png",
+  className,
+  onSubmit,
+}: Contact35Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      phone: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative min-h-screen", className)}
+    >
+      <img
+        src={image}
+        alt="تماس با ما"
+        className="absolute inset-0 size-full object-cover"
+      />
+      <div className="absolute inset-0 bg-black/50" />
+
+      <div className="relative container flex min-h-screen flex-col items-center justify-center py-20">
+        <div className="w-full max-w-lg">
+          <form
+            onSubmit={form.handleSubmit(handleFormSubmit)}
+            className="rounded-2xl bg-background p-8 shadow-2xl md:p-10"
+          >
+            <div className="mb-8 text-center">
+              <h1 className="mb-3 text-3xl font-semibold tracking-tight md:text-xl">
+                {title}
+              </h1>
+              <p className="text-muted-foreground">{description}</p>
+            </div>
+
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  پیام شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                  </p>
+              </div>
+            )}
+
+            <FieldGroup>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <Controller
+                  control={form.control}
+                  name="name"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        نام و نام خانوادگی <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="نام و نام خانوادگی"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        ایمیل <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="example@email.com"
+                        dir="rtl"
+                        className="text-start"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+              </div>
+
+              <Controller
+                control={form.control}
+                name="phone"
+                render={({ field }) => (
+                  <Field>
+                    <FieldLabel htmlFor={field.name}>تلفن</FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      type="tel"
+                      placeholder="۰۹۱۲-۳۴۵-۶۷۸۹"
+                      dir="rtl"
+                      className="text-start"
+                    />
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="message"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      پیام <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Textarea
+                      {...field}
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      placeholder="اهداف، نیازها و جزئیات پروژه خود را شرح دهید."
+                      rows={5}
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              {form.formState.errors.root && (
+                <p className="text-sm text-destructive">
+                  {form.formState.errors.root.message}
+                </p>
+              )}
+
+              <Button
+                size="lg"
+                className="w-full gap-2"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting ? (
+                  <>
+                    <LoaderIcon className="size-4 animate-spin" />
+                    در حال ارسال...
+                  </>
+                ) : (
+                  "ارسال پیام"
+                )}
+              </Button>
+            </FieldGroup>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact35 };
diff --git a/blocks/contact4.tsx b/blocks/contact4.tsx
new file mode 100644
index 0000000..5eb4b46
--- /dev/null
+++ b/blocks/contact4.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import Fade from "embla-carousel-fade";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Contact4Props {
+  className?: string;
+}
+
+const Contact4 = ({ className }: Contact4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="max-w-xl">
+          <h1 className="mb-3 text-xl font-medium text-muted-foreground">
+            تماس با ما
+          </h1>
+          <p className="text-xl font-medium text-balance md:text-2xll">
+            برای دریافت مشاوره یا اطلاعات بیشتر با ما در ارتباط باشید.
+                                </p>
+        </div>
+        <div className="mt-10 grid gap-4 md:mt-20 md:grid-cols-3 md:gap-8">
+          <div className="flex flex-col justify-between gap-6 rounded-lg border p-6">
+            <div>
+              <h2 className="mb-4 text-xl font-medium md:text-xl">فروش</h2>
+              <p className="text-muted-foreground">
+                اگر به دمو، استعلام قیمت یا معرفی قابلیت‌های محصول نیاز دارید، کارشناسان فروش آماده پاسخ‌گویی هستند.
+                                            </p>
+            </div>
+            <a href="#" className="hover:underline">
+              درخواست دمو
+            </a>
+          </div>
+          <div className="flex flex-col justify-between gap-6 rounded-lg border p-6">
+            <div>
+              <h2 className="mb-4 text-xl font-medium md:text-xl">پشتیبانی فنی</h2>
+              <p className="text-muted-foreground">
+                در صورت بروز مشکل یا نیاز به راهنمایی، تیم پشتیبانی آماده پاسخ‌گویی و رفع مسائل شماست.
+                                            </p>
+            </div>
+            <a href="#" className="hover:underline">
+              دریافت پشتیبانی
+            </a>
+          </div>
+          <div className="flex flex-col justify-between gap-6 rounded-lg border p-6">
+            <div>
+              <h2 className="mb-4 text-xl font-medium md:text-xl">
+                همکاری و ارتباطات
+                                            </h2>
+              <p className="text-muted-foreground">
+                برای همکاری، امور رسانه‌ای یا سایر درخواست‌ها از طریق فرم تماس با ما ارتباط برقرار کنید.
+                                            </p>
+            </div>
+            <a href="#" className="hover:underline">
+              تماس با ما
+            </a>
+          </div>
+        </div>
+        <div className="mt-7">
+          <Carousel
+            plugins={[Fade()]}
+            opts={{
+              loop: true,
+            }}
+          >
+            <CarouselContent>
+              <CarouselItem>
+                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/maps/map-1.png"
+                    alt="نقشه موقعیت دفاتر"
+                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
+                  />
+                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
+                    <div>
+                      <h2 className="mb-4 text-xl font-medium md:text-xl">
+                        دفاتر و نمایندگی‌های بین‌المللی
+                                                                    </h2>
+                      <p className="text-muted-foreground">
+                        تیم ما از طریق دفاتر و نمایندگی‌های بین‌المللی به مشتریان در نقاط مختلف جهان خدمات ارائه می‌دهد.
+                                                                    </p>
+                    </div>
+                    <a href="#" className="hover:underline">
+                      مشاهده اطلاعات
+                                                              </a>
+                  </div>
+                </div>
+              </CarouselItem>
+              <CarouselItem>
+                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/maps/map-2.png"
+                    alt="نقشه دفتر نیویورک"
+                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
+                  />
+                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
+                    <div>
+                      <h2 className="mb-4 text-xl font-medium md:text-xl">
+                        نیویورک، آمریکا
+                      </h2>
+                      <p className="text-muted-foreground" dir="rtl">
+                        1 Liberty Plaza, 165 Broadway, New York, NY 10006
+                      </p>
+                    </div>
+                    <a href="#" className="hover:underline">
+                      مشاهده در نقشه
+                    </a>
+                  </div>
+                </div>
+              </CarouselItem>
+              <CarouselItem>
+                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/maps/map-3.png"
+                    alt="نقشه دفتر پاریس"
+                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
+                  />
+                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
+                    <div>
+                      <h2 className="mb-4 text-xl font-medium md:text-xl">
+                        پاریس، فرانسه
+                      </h2>
+                      <p className="text-muted-foreground" dir="rtl">
+                        10 Rue de la Paix, 75002 Paris
+                      </p>
+                    </div>
+                    <a href="#" className="hover:underline">
+                      مشاهده در نقشه
+                    </a>
+                  </div>
+                </div>
+              </CarouselItem>
+              <CarouselItem>
+                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/maps/map-4.png"
+                    alt="نقشه دفتر کی‌یف"
+                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
+                  />
+                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
+                    <div>
+                      <h2 className="mb-4 text-xl font-medium md:text-xl">
+                        کی‌یف، اوکراین
+                      </h2>
+                      <p className="text-muted-foreground" dir="rtl">
+                        1A Sportyvna Square, 01023 Kyiv
+                      </p>
+                    </div>
+                    <a href="#" className="hover:underline">
+                      مشاهده در نقشه
+                    </a>
+                  </div>
+                </div>
+              </CarouselItem>
+              <CarouselItem>
+                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/maps/map-5.png"
+                    alt="نقشه دفتر سنگاپور"
+                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
+                  />
+                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
+                    <div>
+                      <h2 className="mb-4 text-xl font-medium md:text-xl">
+                        سنگاپور
+                      </h2>
+                      <p className="text-muted-foreground" dir="rtl">
+                        One Raffles Place, Singapore 048616
+                      </p>
+                    </div>
+                    <a href="#" className="hover:underline">
+                      مشاهده در نقشه
+                    </a>
+                  </div>
+                </div>
+              </CarouselItem>
+            </CarouselContent>
+            <div className="absolute end-6 bottom-2 flex gap-4 md:end-10 md:bottom-5">
+              <CarouselPrevious className="static" />
+              <CarouselNext className="static" />
+            </div>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact4 };
diff --git a/blocks/contact5.tsx b/blocks/contact5.tsx
new file mode 100644
index 0000000..ce097f6
--- /dev/null
+++ b/blocks/contact5.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  firstName: z.string().min(1, "نام الزامی است"),
+  lastName: z.string().min(1, "نام خانوادگی الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  phone: z.string().min(1, "شماره تلفن الزامی است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact5Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact5 = ({ className, onSubmit }: Contact5Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      phone: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-14 text-center">
+          <h1 className="mt-1 mb-3 text-3xl font-semibold md:text-xl">
+            تماس با ما
+          </h1>
+        </div>
+
+        {isSubmitted && (
+          <div
+            className={cn(
+              "mx-auto mb-6 max-w-lg rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+              showSuccess ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <p className="text-sm font-medium text-green-600 dark:text-green-400">
+              درخواست شما با موفقیت ثبت شد. به‌زودی با شما تماس خواهیم گرفت.
+                                      </p>
+          </div>
+        )}
+
+        <form
+          onSubmit={form.handleSubmit(handleFormSubmit)}
+          className="mx-auto flex max-w-lg flex-col"
+        >
+          <FieldGroup>
+            <Controller
+              control={form.control}
+              name="firstName"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>
+                    نام <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    type="text"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="علی"
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="lastName"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>
+                    نام خانوادگی{" "}
+                    <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    type="text"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="محمدی"
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>
+                    ایمیل <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    type="email"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="example@email.com"
+                    dir="rtl"
+                    className="text-start"
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="phone"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>
+                    شماره تلفن <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id={field.name}
+                    type="tel"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="۰۹۱۲ ۳۴۵ ۶۷۸۹"
+                    dir="rtl"
+                    className="text-start"
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="message"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>
+                    پیام <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <Textarea
+                    {...field}
+                    id={field.name}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="جزئیات درخواست، سؤال یا پروژه خود را بنویسید."
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            {form.formState.errors.root && (
+              <p className="text-sm text-destructive">
+                {form.formState.errors.root.message}
+              </p>
+            )}
+
+            <Button
+              type="submit"
+              className="w-full gap-2"
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? (
+                <>
+                  <LoaderIcon className="size-4 animate-spin" />
+                  در حال ارسال...
+                </>
+              ) : (
+                "ارسال پیام"
+              )}
+            </Button>
+          </FieldGroup>
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export { Contact5 };
diff --git a/blocks/contact6.tsx b/blocks/contact6.tsx
new file mode 100644
index 0000000..272f0c9
--- /dev/null
+++ b/blocks/contact6.tsx
@@ -0,0 +1,421 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon, Mail, MapPin, MessagesSquare, Phone } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface ContactInfo {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  value: string;
+  href: string;
+  badge?: string;
+}
+
+const contactInfo: ContactInfo[] = [
+  {
+    icon: <Mail className="size-6" />,
+    title: "ایمیل",
+    description: "پاسخ‌گویی در روزهای کاری، حداکثر تا ۲۴ ساعت",
+    value: "hello@company.com",
+    href: "mailto:hello@company.com",
+    badge: "پیشنهادی",
+  },
+  {
+    icon: <MessagesSquare className="size-6" />,
+    title: "چت زنده",
+    description: "کارشناسان پشتیبانی آماده پاسخ‌گویی هستند.",
+    value: "شروع گفتگو",
+    href: "#",
+    badge: "آنلاین",
+  },
+  {
+    icon: <Phone className="size-6" />,
+    title: "تلفن",
+    description: "دوشنبه تا جمعه، ۹ صبح تا ۶ عصر",
+    value: "۲۱-۱۲۳۴۵۶۷۸",
+    href: "tel:+982112345678",
+  },
+  {
+    icon: <MapPin className="size-6" />,
+    title: "دفتر",
+    description: "برای برگزاری جلسه حضوری، پیش از مراجعه هماهنگ کنید.",
+    value: "تهران، خیابان ولیعصر",
+    href: "#",
+  },
+];
+
+const contactFormSchema = z.object({
+  firstName: z.string().min(1, "نام الزامی است"),
+  lastName: z.string().min(1, "نام خانوادگی الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  company: z.string().optional(),
+  message: z.string().min(1, "پیام الزامی است"),
+  // @ts-ignore
+  agreeToTerms: z.literal(true, {
+    errorMap: () => ({ message: "برای ادامه، لازم است شرایط استفاده را بپذیرید." }),
+  }),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact6Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact6 = ({ className, onSubmit }: Contact6Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      company: "",
+      message: "",
+      agreeToTerms: undefined,
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-24", className)}>
+      <div className="container px-4 md:px-6">
+        <div className="mx-auto max-w-4xl">
+          <div className="mb-16 text-center">
+            <h1 className="mb-4 text-3xl font-bold tracking-tight sm:text-xl md:text-2xll">
+              تماس با ما
+            </h1>
+            <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+              اگر قصد شروع پروژه جدید یا توسعه کسب‌وکار خود را دارید، کارشناسان ما آماده‌اند تا بهترین راهکار را متناسب با نیاز شما ارائه دهند.
+                                      </p>
+          </div>
+
+          <div className="grid gap-12 lg:grid-cols-2">
+            <div className="space-y-6">
+              <div className="space-y-4">
+                {contactInfo.map((info, index) => (
+                  <Card key={index} className="border-0 bg-muted shadow-none">
+                    <CardContent>
+                      <div className="flex items-start gap-4">
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+                          {info.icon}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="mb-1 flex items-center gap-2">
+                            <h3 className="font-semibold">{info.title}</h3>
+                          </div>
+                          <p className="mb-2 text-sm text-muted-foreground">
+                            {info.description}
+                          </p>
+                          <a
+                            href={info.href}
+                            className="text-sm font-medium transition-colors hover:underline"
+                            dir={
+                              info.title === "ایمیل" || info.title === "تلفن"
+                                ? "ltr"
+                                : undefined
+                            }
+                          >
+                            {info.value}
+                          </a>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+
+            <Card className="border-0 shadow-none">
+              <CardHeader>
+                <CardTitle>پیام خود را برای ما ارسال کنید</CardTitle>
+                <p className="text-sm text-muted-foreground">
+                  فرم زیر را تکمیل کنید تا در کوتاه‌ترین زمان ممکن با شما تماس بگیریم.
+                                                  </p>
+              </CardHeader>
+              <CardContent>
+                {isSubmitted && (
+                  <div
+                    className={cn(
+                      "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                      showSuccess ? "opacity-100" : "opacity-0",
+                    )}
+                  >
+                    <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                      پیام شما با موفقیت ارسال شد!
+                    </p>
+                  </div>
+                )}
+
+                <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+                  <FieldGroup>
+                    <div className="grid grid-cols-2 gap-4">
+                      <Controller
+                        control={form.control}
+                        name="firstName"
+                        render={({ field, fieldState }) => (
+                          <Field data-invalid={fieldState.invalid}>
+                            <FieldLabel htmlFor={field.name}>
+                              نام{" "}
+                              <span className="text-destructive">*</span>
+                            </FieldLabel>
+                            <Input
+                              {...field}
+                              id={field.name}
+                              aria-invalid={fieldState.invalid}
+                              placeholder="علی"
+                            />
+                            {fieldState.invalid && (
+                              <FieldError errors={[fieldState.error]} />
+                            )}
+                          </Field>
+                        )}
+                      />
+
+                      <Controller
+                        control={form.control}
+                        name="lastName"
+                        render={({ field, fieldState }) => (
+                          <Field data-invalid={fieldState.invalid}>
+                            <FieldLabel htmlFor={field.name}>
+                              نام خانوادگی{" "}
+                              <span className="text-destructive">*</span>
+                            </FieldLabel>
+                            <Input
+                              {...field}
+                              id={field.name}
+                              aria-invalid={fieldState.invalid}
+                              placeholder="محمدی"
+                            />
+                            {fieldState.invalid && (
+                              <FieldError errors={[fieldState.error]} />
+                            )}
+                          </Field>
+                        )}
+                      />
+                    </div>
+
+                    <Controller
+                      control={form.control}
+                      name="email"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            ایمیل{" "}
+                            <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            type="email"
+                            aria-invalid={fieldState.invalid}
+                            placeholder="example@company.com"
+                            dir="rtl"
+                            className="text-start"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="company"
+                      render={({ field }) => (
+                        <Field>
+                          <FieldLabel htmlFor={field.name}>شرکت</FieldLabel>
+                          <Input
+                            {...field}
+                            id={field.name}
+                            placeholder="نام شرکت یا سازمان"
+                          />
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="message"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel htmlFor={field.name}>
+                            پیام <span className="text-destructive">*</span>
+                          </FieldLabel>
+                          <Textarea
+                            {...field}
+                            id={field.name}
+                            aria-invalid={fieldState.invalid}
+                            placeholder="نیازها، اهداف یا جزئیات پروژه خود را برای ما شرح دهید."
+                            rows={4}
+                            className="resize-none"
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      control={form.control}
+                      name="agreeToTerms"
+                      render={({ field, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <div className="flex items-start gap-3">
+                            <Checkbox
+                              id={field.name}
+                              // @ts-ignore
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                              aria-invalid={fieldState.invalid}
+                            />
+                            <label
+                              htmlFor={field.name}
+                              className="text-sm leading-relaxed text-muted-foreground"
+                            >
+                              موافقم با{" "}
+                              <a
+                                href="#"
+                                className="font-medium text-foreground hover:underline"
+                              >
+                                شرایط استفاده
+                              </a>{" "}
+                              و{" "}
+                              <a
+                                href="#"
+                                className="font-medium text-foreground hover:underline"
+                              >
+                                حریم خصوصی
+                              </a>
+                            </label>
+                          </div>
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+
+                    {form.formState.errors.root && (
+                      <p className="text-sm text-destructive">
+                        {form.formState.errors.root.message}
+                      </p>
+                    )}
+
+                    <Button
+                      type="submit"
+                      className="w-full gap-2"
+                      disabled={form.formState.isSubmitting}
+                    >
+                      {form.formState.isSubmitting ? (
+                        <>
+                          <LoaderIcon className="size-4 animate-spin" />
+                          در حال ارسال...
+                        </>
+                      ) : (
+                        "ارسال پیام"
+                      )}
+                    </Button>
+                  </FieldGroup>
+                </form>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="mt-12">
+            <Separator className="mb-8" />
+            <Card className="border-0 bg-muted shadow-none">
+              <CardContent className="p-6">
+                <div className="grid gap-8 md:grid-cols-2">
+                  <div className="space-y-4">
+                    <h3 className="text-lg font-semibold">ساعات کاری</h3>
+                    <div className="space-y-2 text-sm text-muted-foreground">
+                      <div className="flex justify-between gap-4">
+                        <span>دوشنبه تا جمعه</span>
+                        <span dir="rtl">۹:۰۰ - ۱۸:۰۰</span>
+                      </div>
+                      <div className="flex justify-between gap-4">
+                        <span>شنبه</span>
+                        <span dir="rtl">۱۰:۰۰ - ۱۶:۰۰</span>
+                      </div>
+                      <div className="flex justify-between gap-4">
+                        <span>یکشنبه</span>
+                        <span>تعطیل</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="space-y-4">
+                    <h3 className="text-lg font-semibold">اطلاعات تماس</h3>
+                    <div className="space-y-2 text-sm text-muted-foreground">
+                      <div className="flex justify-between gap-4">
+                        <span>ایمیل</span>
+                        <span dir="rtl">اطلاعات@نمونه.ایران</span>
+                      </div>
+                      <div className="flex justify-between gap-4">
+                        <span>تلفن</span>
+                        <span dir="rtl">۲۱-۱۲۳۴۵۶۷۸</span>
+                      </div>
+                      <div className="flex justify-between gap-4">
+                        <span>آدرس</span>
+                        <span>تهران، خیابان ولیعصر</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact6 };
diff --git a/blocks/contact7.tsx b/blocks/contact7.tsx
new file mode 100644
index 0000000..10cc6bc
--- /dev/null
+++ b/blocks/contact7.tsx
@@ -0,0 +1,102 @@
+import { Mail, MapPin, MessageCircle, Phone } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Contact7Props {
+  title?: string;
+  description?: string;
+  emailLabel?: string;
+  emailDescription?: string;
+  email?: string;
+  officeLabel?: string;
+  officeDescription?: string;
+  officeAddress?: string;
+  phoneLabel?: string;
+  phoneDescription?: string;
+  phone?: string;
+  chatLabel?: string;
+  chatDescription?: string;
+  chatLink?: string;
+  className?: string;
+}
+
+const Contact7 = ({
+  title = "تماس با ما",
+  description = "سوال دارید یا به کمک نیاز دارید؟ از طریق هر یک از راه‌های زیر با ما در ارتباط باشید.",
+  emailLabel = "ایمیل",
+  emailDescription = "در روزهای کاری، حداکثر تا ۲۴ ساعت به ایمیل‌ها پاسخ می‌دهیم.",
+  email = "hello@example.com",
+  officeLabel = "دفتر",
+  officeDescription = "برای برگزاری جلسه حضوری، با هماهنگی قبلی به دفتر مراجعه کنید.",
+  officeAddress = "تهران، خیابان ولیعصر",
+  phoneLabel = "تلفن",
+  phoneDescription = "در روزهای کاری از ساعت ۹ تا ۱۷ پاسخ‌گوی تماس‌های شما هستیم.",
+  phone = "۲۱-۱۲۳۴۵۶۷۸",
+  chatLabel = "چت زنده",
+  chatDescription = "برای دریافت راهنمایی فوری با کارشناسان پشتیبانی گفتگو کنید.",
+  chatLink = "شروع گفتگو",
+  className,
+}: Contact7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-14">
+            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+              {title}
+            </h1>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="rounded-xl bg-muted/50 p-8">
+              <Mail className="mb-4 size-5 text-muted-foreground" />
+              <p className="mb-1 font-medium">{emailLabel}</p>
+              <p className="mb-4 text-sm text-muted-foreground">
+                {emailDescription}
+              </p>
+              <a
+                href={`mailto:${email}`}
+                className="hover:underline"
+                dir="rtl"
+              >
+                {email}
+              </a>
+            </div>
+            <div className="rounded-xl bg-muted/50 p-8">
+              <MapPin className="mb-4 size-5 text-muted-foreground" />
+              <p className="mb-1 font-medium">{officeLabel}</p>
+              <p className="mb-4 text-sm text-muted-foreground">
+                {officeDescription}
+              </p>
+              <a href="#" className="hover:underline">
+                {officeAddress}
+              </a>
+            </div>
+            <div className="rounded-xl bg-muted/50 p-8">
+              <Phone className="mb-4 size-5 text-muted-foreground" />
+              <p className="mb-1 font-medium">{phoneLabel}</p>
+              <p className="mb-4 text-sm text-muted-foreground">
+                {phoneDescription}
+              </p>
+              <a href={`tel:${phone}`} className="hover:underline" dir="rtl">
+                {phone}
+              </a>
+            </div>
+            <div className="rounded-xl bg-muted/50 p-8">
+              <MessageCircle className="mb-4 size-5 text-muted-foreground" />
+              <p className="mb-1 font-medium">{chatLabel}</p>
+              <p className="mb-4 text-sm text-muted-foreground">
+                {chatDescription}
+              </p>
+              <a href="#" className="hover:underline">
+                {chatLink}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact7 };
diff --git a/blocks/contact8.tsx b/blocks/contact8.tsx
new file mode 100644
index 0000000..a9f71a3
--- /dev/null
+++ b/blocks/contact8.tsx
@@ -0,0 +1,71 @@
+import { cn } from "@/lib/utils";
+
+interface Contact8Props {
+  className?: string;
+}
+
+const Contact8 = ({ className }: Contact8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <h1 className="mb-3 text-2xll font-bold">تماس</h1>
+          <p className="text-lg text-muted-foreground">
+            برای انتخاب بهترین راهکار با ما در ارتباط باشید.
+                                </p>
+        </div>
+        <div className="mx-auto mt-24 grid max-w-7xl gap-4 md:grid-cols-2">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر تماس"
+            className="h-full rounded-lg object-cover"
+          />
+          <div className="flex flex-col gap-2 rounded-lg bg-accent p-2">
+            <div className="flex h-full flex-col justify-between gap-6 rounded-lg bg-background p-6">
+              <p className="text-xl">ایمیل</p>
+              <div className="flex flex-col">
+                <a
+                  href="mailto:help@example.com"
+                  className="hover:underline"
+                  dir="rtl"
+                >
+                  راهنما@نمونه.ایران
+                </a>
+                <a
+                  href="mailto:support@example.com"
+                  className="hover:underline"
+                  dir="rtl"
+                >
+                  پشتیبانی@نمونه.ایران
+                </a>
+              </div>
+            </div>
+            <div className="flex h-full flex-col justify-between gap-6 rounded-md bg-background p-6">
+              <p className="text-xl">دفاتر</p>
+              <div className="grid gap-8 md:grid-cols-2 md:gap-4">
+                <div>
+                  <p className="mb-2 text-xl text-muted-foreground md:mb-4">
+                    نیویورک
+                  </p>
+                  <p dir="rtl" className="text-start">
+                    123 6th St. Melbourne, FL 32904, USA
+                  </p>
+                </div>
+                <div>
+                  <p className="mb-2 text-xl text-muted-foreground md:mb-4">
+                    لندن
+                  </p>
+                  <p dir="rtl" className="text-start">
+                    123 3rd St. London, TL 32904, UK
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact8 };
diff --git a/blocks/contact9.tsx b/blocks/contact9.tsx
new file mode 100644
index 0000000..14d1b05
--- /dev/null
+++ b/blocks/contact9.tsx
@@ -0,0 +1,302 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Building, ChevronLeft, LoaderIcon, Mail, Phone } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactMethods = [
+  {
+    icon: Mail,
+    title: "ایمیل",
+    description:
+      "برای دریافت اطلاعات، مشاوره یا پشتیبانی، از طریق ایمیل با ما در ارتباط باشید. در روزهای کاری حداکثر تا ۲۴ ساعت پاسخ خواهیم داد.",
+    contact: "hello@relative.io",
+    ltr: true,
+  },
+  {
+    icon: Phone,
+    title: "تلفن",
+    description:
+      "اگر ترجیح می‌دهید تلفنی گفتگو کنید، کارشناسان ما در روزهای کاری از ساعت ۹ تا ۱۷ پاسخ‌گوی شما هستند.",
+    contact: "۲۱-۱۲۳۴۵۶۷۸",
+    ltr: true,
+  },
+  {
+    icon: Building,
+    title: "دفتر",
+    description: "برای برگزاری جلسه حضوری، با هماهنگی قبلی به دفتر مرکزی مراجعه کنید.",
+    contact: (
+      <a
+        href="#"
+        className="inline-flex items-center gap-1 text-sm font-medium text-foreground hover:underline"
+      >
+        مسیریابی
+        <ChevronLeft className="size-4" />
+      </a>
+    ),
+    ltr: false,
+  },
+];
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, "نام الزامی است"),
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+  message: z.string().min(1, "پیام الزامی است"),
+  // @ts-ignore
+  agreeToTerms: z.literal(true, {
+    errorMap: () => ({ message: "برای ادامه، لازم است شرایط استفاده را بپذیرید." }),
+  }),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface Contact9Props {
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Contact9 = ({ className, onSubmit }: Contact9Props) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      name: "",
+      email: "",
+      message: "",
+      agreeToTerms: undefined,
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-6 py-4 lg:py-8">
+          <Badge
+            variant="outline"
+            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <Mail className="size-4" />
+            <span>تماس با ما</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
+            ارتباط با ما
+          </h2>
+          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
+            اگر پرسشی درباره محصولات، خدمات یا همکاری دارید، از طریق فرم زیر با ما در ارتباط باشید.
+                                </p>
+        </div>
+
+        <div className="flex justify-between gap-10 py-12 max-md:flex-col">
+          <form
+            onSubmit={form.handleSubmit(handleFormSubmit)}
+            className="flex flex-1 flex-col"
+          >
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  پیام شما با موفقیت ثبت شد. کارشناسان ما در اولین فرصت با شما تماس خواهند گرفت.
+                                                  </p>
+              </div>
+            )}
+
+            <FieldGroup>
+              <Controller
+                control={form.control}
+                name="name"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      نام و نام خانوادگی <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      placeholder="علی محمدی"
+                      className="border-border bg-card"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="email"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      ایمیل <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      type="email"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="example@email.com"
+                      dir="rtl"
+                      className="border-border bg-card text-start"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="message"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      پیام <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Textarea
+                      {...field}
+                      id={field.name}
+                      aria-invalid={fieldState.invalid}
+                      placeholder="جزئیات درخواست، سؤال یا پروژه خود را بنویسید."
+                      rows={4}
+                      className="border-border bg-card"
+                    />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              <Controller
+                control={form.control}
+                name="agreeToTerms"
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id={field.name}
+                        // @ts-ignore
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        aria-invalid={fieldState.invalid}
+                      />
+                      <label
+                        htmlFor={field.name}
+                        className="text-sm font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        موافقم با{" "}
+                        <a href="/terms" className="underline">
+                          شرایط استفاده
+                        </a>
+                      </label>
+                    </div>
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
+                  </Field>
+                )}
+              />
+
+              {form.formState.errors.root && (
+                <p className="text-sm text-destructive">
+                  {form.formState.errors.root.message}
+                </p>
+              )}
+
+              <Button
+                type="submit"
+                className="gap-2"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting ? (
+                  <>
+                    <LoaderIcon className="size-4 animate-spin" />
+                    در حال ارسال...
+                  </>
+                ) : (
+                  "ارسال پیام"
+                )}
+              </Button>
+            </FieldGroup>
+          </form>
+
+          <div className="grid flex-1 gap-6 self-start lg:grid-cols-2">
+            {contactMethods.map((method, index) => (
+              <div key={index} className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <method.icon className="size-5" />
+                  <h3 className="text-xl tracking-[-0.96px]">
+                    {method.title}
+                  </h3>
+                </div>
+                <div className="space-y-2 tracking-[-0.32px]">
+                  <p className="text-sm text-muted-foreground">
+                    {method.description}
+                  </p>
+                  <div className="text-sm text-muted-foreground">
+                    {method.ltr ? (
+                      <span dir="rtl">{method.contact}</span>
+                    ) : (
+                      method.contact
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact9 };
diff --git a/blocks/content1.tsx b/blocks/content1.tsx
new file mode 100644
index 0000000..5797493
--- /dev/null
+++ b/blocks/content1.tsx
@@ -0,0 +1,264 @@
+"use client";
+
+import {
+  AlignLeft,
+  GalleryVerticalEnd,
+  Lightbulb,
+  ListChecks,
+  RefreshCcw,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Content1Props {
+  className?: string;
+}
+
+const faNum = (value: number) => value.toLocaleString("fa-IR");
+
+const Content1 = ({ className }: Content1Props) => {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLElement>>({});
+
+  useEffect(() => {
+    const sections = Object.keys(sectionRefs.current);
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      observerCallback,
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1,
+      },
+    );
+
+    sections.forEach((sectionId) => {
+      const element = sectionRefs.current[sectionId];
+      if (element) {
+        observer?.observe(element);
+      }
+    });
+
+    return () => {
+      observer?.disconnect();
+      observer = null;
+    };
+  }, []);
+
+  const addSectionRef = (id: string, ref: HTMLElement | null) => {
+    if (ref) {
+      sectionRefs.current[id] = ref;
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-7xl">
+        <div className="relative grid-cols-3 gap-20 lg:grid">
+          <div className="lg:col-span-2">
+            <div>
+              <Badge variant="outline">خودکارسازی بازاریابی</Badge>
+              <h1 className="mt-3 text-3xl font-extrabold">چگونه نرخ تبدیل لیدها را با اتوماسیون ایمیل افزایش دهید</h1>
+              <p className="mt-2 text-lg text-muted-foreground">
+                تیم‌های فروش B2B با پیاده‌سازی جریان‌های ایمیل هدفمند و امتیازدهی لید، میانگین نرخ تبدیل خود را تا ۳۵٪ بهبود داده‌اند. این راهنما مراحل عملی راه‌اندازی را توضیح می‌دهد.
+              </p>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر مقاله"
+                className="my-8 aspect-video w-full rounded-md object-cover"
+              />
+            </div>
+            <section
+              id="section1"
+              ref={(ref) => addSectionRef("section1", ref)}
+              className="prose mb-8 text-start dark:prose-invert"
+            >
+              <h2>راه‌اندازی جریان ایمیل</h2>
+              <div className="ms-3.5">
+                <div className="relative flex items-start pb-2">
+                  <div className="absolute top-[2.75rem] h-[calc(100%-2.75rem)] w-px bg-border/70"></div>
+                  <div className="absolute -ms-3.5 py-2">
+                    <div className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted">
+                      <RefreshCcw className="h-3.5 w-3.5" />
+                    </div>
+                  </div>
+                  <div className="ps-12">
+                    <h3 className="mt-2 text-base font-semibold">
+                      بخش‌بندی مخاطبان
+                    </h3>
+                    <p>
+                      لیدها را بر اساس صنعت، اندازه شرکت و مرحله قیف فروش دسته‌بندی کنید تا هر گروه پیام متناسب دریافت کند.
+                    </p>
+                  </div>
+                </div>
+                <div className="relative flex items-start pb-2">
+                  <div className="absolute top-[2.75rem] h-[calc(100%-2.75rem)] w-px bg-border/70"></div>
+                  <div className="absolute -ms-3.5 py-2">
+                    <div className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted">
+                      <GalleryVerticalEnd className="h-3.5 w-3.5" />
+                    </div>
+                  </div>
+                  <div className="ps-12">
+                    <h3 className="mt-2 text-base font-semibold">
+                      طراحی دنباله ایمیل
+                    </h3>
+                    <p>
+                      برای هر بخش، دنباله‌ای از ۳ تا ۵ ایمیل با فاصله زمانی مشخص طراحی کنید؛ از معرفی محصول تا دعوت به دمو زنده.
+                    </p>
+                  </div>
+                </div>
+                <div className="relative flex items-start pb-2">
+                  <div className="absolute top-[2.75rem] h-[calc(100%-2.75rem)] w-px bg-border/70"></div>
+                  <div className="absolute -ms-3.5 py-2">
+                    <div className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted">
+                      <ListChecks className="h-3.5 w-3.5" />
+                    </div>
+                  </div>
+                  <div className="ps-12">
+                    <h3 className="mt-2 text-base font-semibold">فعال‌سازی و پایش</h3>
+                    <p>
+                      جریان را فعال کنید و نرخ باز شدن، کلیک و تبدیل را در داشبورد CRM روزانه بررسی کنید.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section
+              id="section2"
+              ref={(ref) => addSectionRef("section2", ref)}
+              className="prose mb-8 text-start dark:prose-invert"
+            >
+              <h2>نتایج کمپین</h2>
+              <p>
+                پس از ۹۰ روز اجرای جریان ایمیل، تیم فروش CloudStar شاهد بهبود قابل‌توجهی در معیارهای کلیدی بود.
+              </p>
+              <div>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>تعداد لید</th>
+                      <th>نرخ تبدیل</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>{faNum(120)}</td>
+                      <td>{faNum(8)}٪</td>
+                    </tr>
+                    <tr className="m-0 border-t p-0 even:bg-muted">
+                      <td>{faNum(340)}</td>
+                      <td>{faNum(14)}٪</td>
+                    </tr>
+                    <tr className="m-0 border-t p-0 even:bg-muted">
+                      <td>{faNum(520)}</td>
+                      <td>{faNum(22)}٪</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <p>
+                لیدهایی که حداقل ۳ ایمیل از دنباله را باز کرده بودند، ۲.۸ برابر بیشتر احتمال تبدیل به مشتری داشتند.
+              </p>
+              <Alert>
+                <Lightbulb className="h-4 w-4" />
+                <AlertTitle>نکته عملی</AlertTitle>
+                <AlertDescription>
+                  ایمیل‌های با موضوع شخصی‌سازی‌شده (نام شرکت مخاطب) نرخ باز شدن ۴۲٪ بالاتری نسبت به قالب‌های عمومی داشتند.
+                </AlertDescription>
+              </Alert>
+            </section>
+
+            <section
+              id="section3"
+              ref={(ref) => addSectionRef("section3", ref)}
+              className="prose mb-8 text-start dark:prose-invert"
+            >
+              <h2>امتیازدهی لید</h2>
+              <p>
+                تیم بازاریابی CloudStar با{" "}
+                <a href="#">مدل امتیازدهی رفتاری</a> لیدهای آماده خرید را شناسایی کرد.
+              </p>
+              <blockquote>
+                لیدهایی که صفحه قیمت را بازدید کرده و وایت‌پیپر را دانلود کرده‌اند، اولویت تماس فروش را دریافت می‌کنند.
+              </blockquote>
+              <p>
+                معیارهای امتیازدهی بر اساس تعامل دیجیتال تعریف شد:
+              </p>
+              <ul>
+                <li>بازدید صفحه قیمت: {faNum(15)} امتیاز</li>
+                <li>دانلود وایت‌پیپر: {faNum(10)} امتیاز</li>
+                <li>شرکت در وبینار: {faNum(25)} امتیاز</li>
+              </ul>
+              <p>
+                لیدهایی با امتیاز بالای {faNum(30)} به‌صورت خودکار به نماینده فروش اختصاص داده می‌شوند و زمان پاسخ‌گویی به کمتر از ۲ ساعت رسید.
+              </p>
+            </section>
+          </div>
+          <div className="sticky top-8 hidden h-fit lg:block">
+            <span className="flex items-center gap-2 text-sm">
+              <AlignLeft className="h-4 w-4" />
+              در این صفحه
+            </span>
+            <nav className="mt-2 text-sm" aria-label="فهرست مطالب">
+              <ul>
+                <li>
+                  <a
+                    href="#section1"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section1"
+                        ? "font-medium text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    راه‌اندازی جریان ایمیل
+                                                        </a>
+                </li>
+                <li>
+                  <a
+                    href="#section2"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section2"
+                        ? "font-medium text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    نتایج کمپین
+                                                        </a>
+                </li>
+                <li>
+                  <a
+                    href="#section3"
+                    className={cn(
+                      "block py-1 transition-colors duration-200",
+                      activeSection === "section3"
+                        ? "font-medium text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    امتیازدهی لید
+                                                        </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Content1 };
diff --git a/blocks/content2.tsx b/blocks/content2.tsx
new file mode 100644
index 0000000..4abf03f
--- /dev/null
+++ b/blocks/content2.tsx
@@ -0,0 +1,171 @@
+import {
+  BookOpen,
+  Calendar,
+  FileSpreadsheetIcon,
+  Images,
+  Lightbulb,
+  Plus,
+  Share2,
+  ShoppingBag,
+} from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Content2Props {
+  className?: string;
+}
+
+const Content2 = ({ className }: Content2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-5xl">
+        <div>
+          <div>
+            <Badge variant="outline">ویژگی‌ها</Badge>
+            <h1 className="mt-3 text-3xl font-extrabold">مدیریت و انتشار محتوا</h1>
+            <p className="mt-2 text-lg text-muted-foreground">
+              با یک سامانه مدیریت محتوا می‌توانید مقالات، محصولات، نمونه‌کارها و سایر اطلاعات را به‌صورت متمرکز مدیریت و منتشر کنید.
+                                      </p>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر مقاله"
+              className="my-8 aspect-video w-full rounded-md object-cover"
+            />
+          </div>
+          <section className="mb-8">
+            <h2 className="mb-6 text-xl font-bold">انواع محتوا</h2>
+            <div className="grid gap-4 md:grid-cols-2">
+              <a
+                href="#"
+                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
+              >
+                <FileSpreadsheetIcon className="h-6 w-6 shrink-0" />
+                <div>
+                  <h2 className="font-semibold">پروژه‌ها</h2>
+                  <p className="text-sm text-muted-foreground">
+                    نمونه پروژه‌ها و دستاوردهای خود را با توضیحات کامل منتشر کنید.
+                                                        </p>
+                </div>
+              </a>
+
+              <a
+                href="#"
+                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
+              >
+                <ShoppingBag className="h-6 w-6 shrink-0" />
+                <div>
+                  <h2 className="font-semibold">محصولات</h2>
+                  <p className="text-sm text-muted-foreground">
+                    محصولات و خدمات خود را همراه با مشخصات و تصاویر معرفی کنید.
+                                                        </p>
+                </div>
+              </a>
+              <a
+                href="#"
+                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
+              >
+                <Images className="h-6 w-6 shrink-0" />
+                <div>
+                  <h2 className="font-semibold">گالری</h2>
+                  <p className="text-sm text-muted-foreground">
+                    گالری تصاویر و محتوای چندرسانه‌ای را به‌سادگی مدیریت کنید.
+                                                        </p>
+                </div>
+              </a>
+              <a
+                href="#"
+                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
+              >
+                <Calendar className="h-6 w-6 shrink-0" />
+                <div>
+                  <h2 className="font-semibold">رویدادها</h2>
+                  <p className="text-sm text-muted-foreground">
+                    همایش‌ها، وبینارها و رویدادهای آینده را اطلاع‌رسانی کنید.
+                                                        </p>
+                </div>
+              </a>
+              <a
+                href="#"
+                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
+              >
+                <Share2 className="h-6 w-6 shrink-0" />
+                <div>
+                  <h2 className="font-semibold">شبکه‌های اجتماعی</h2>
+                  <p className="text-sm text-muted-foreground">
+                    کاربران را به کانال‌ها و شبکه‌های اجتماعی رسمی هدایت کنید.
+                                                        </p>
+                </div>
+              </a>
+              <a
+                href="#"
+                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
+              >
+                <BookOpen className="h-6 w-6 shrink-0" />
+                <div>
+                  <h2 className="font-semibold">وبلاگ</h2>
+                  <p className="text-sm text-muted-foreground">
+                    مقالات آموزشی، اخبار و اطلاعیه‌های جدید را منتشر کنید.
+                                                        </p>
+                </div>
+              </a>
+              <a
+                href="#"
+                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
+              >
+                <Plus className="h-6 w-6 shrink-0" />
+                <div>
+                  <h2 className="font-semibold">سفارشی</h2>
+                  <p className="text-sm text-muted-foreground">
+                    هر نوع محتوای سفارشی یا پیوند به منابع خارجی را اضافه کنید.
+                                                        </p>
+                </div>
+              </a>
+            </div>
+          </section>
+
+          <section className="prose mb-8 text-start dark:prose-invert">
+            <h2>افزودن محتوا</h2>
+            <ol>
+              <li>
+                به بخش <strong>محتوا</strong> بروید و روی <strong>جدید</strong>{" "}
+                در بالای صفحه کلیک کنید.
+              </li>
+              <li>نوع محتوا را انتخاب کنید و اطلاعات لازم را پر کنید.</li>
+              <li>
+                توضیحات را بنویسید، در صورت نیاز رسانه بارگذاری کنید و روی{" "}
+                <strong>ذخیره</strong> بزنید.
+              </li>
+            </ol>
+            <Alert>
+              <Lightbulb className="h-4 w-4" />
+              <AlertTitle>نکته</AlertTitle>
+              <AlertDescription>
+                با استفاده از قالب‌های آماده و بارگذاری گروهی، سرعت تولید و انتشار محتوا را افزایش دهید.
+                                            </AlertDescription>
+            </Alert>
+          </section>
+          <section className="prose mb-8 text-start dark:prose-invert">
+            <h2>مدیریت و انتشار محتوا</h2>
+            <ol>
+              <li>
+                به بخش <strong>محتوا</strong> بروید و موردی را که می‌خواهید
+                ویرایش کنید پیدا کنید.
+              </li>
+              <li>
+                روی <strong>منوی گزینه‌ها</strong> (سه‌نقطه) کلیک کنید و{" "}
+                <strong>ویرایش</strong> را انتخاب کنید.
+              </li>
+              <li>
+                اطلاعات را به‌روزرسانی کنید و روی <strong>ذخیره</strong> بزنید.
+              </li>
+            </ol>
+          </section>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Content2 };
diff --git a/blocks/content3.tsx b/blocks/content3.tsx
new file mode 100644
index 0000000..ab71ecb
--- /dev/null
+++ b/blocks/content3.tsx
@@ -0,0 +1,319 @@
+"use client";
+
+import { Lightbulb } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Content3Props {
+  className?: string;
+}
+
+const lastUpdatedLabel = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+}).format(new Date("2024-04-15"));
+
+const Content3 = ({ className }: Content3Props) => {
+  const [activeHeadings, setActiveHeadings] = useState<string[]>([]);
+  const sectionRefs = useRef<Record<string, HTMLElement>>({});
+
+  useEffect(() => {
+    const sections = Object.keys(sectionRefs.current);
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        const id = entry.target.id;
+
+        if (entry.isIntersecting) {
+          setActiveHeadings((prev) =>
+            prev.includes(id) ? prev : [...prev, id],
+          );
+        } else {
+          setActiveHeadings((prev) => prev.filter((heading) => heading !== id));
+        }
+      });
+    };
+
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      observerCallback,
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1,
+      },
+    );
+
+    sections.forEach((sectionId) => {
+      const element = sectionRefs.current[sectionId];
+      if (element) {
+        observer?.observe(element);
+      }
+    });
+
+    return () => {
+      observer?.disconnect();
+      observer = null;
+    };
+  }, []);
+
+  const addSectionRef = (id: string, ref: HTMLElement | null) => {
+    if (ref) {
+      sectionRefs.current[id] = ref;
+    }
+  };
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">خانه</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">وبلاگ</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>باغبانی شهری</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <h1 className="mt-10 text-start text-xl font-bold text-balance md:text-2xll lg:text-2xll">
+          راهنمای کامل باغبانی شهری در فضاهای کوچک
+                          </h1>
+        <p className="mt-5 max-w-2xl text-start text-xl font-medium text-balance">
+          یاد بگیرید چگونه با کمترین فضا و امکانات، یک باغچه خانگی زیبا، کاربردی و پربازده ایجاد کنید.
+                          </p>
+        <div className="mt-8 flex items-center gap-3">
+          <Button size="lg">مطالعه راهنما</Button>
+          <Button variant="outline" size="lg">
+            مشاهده آموزش‌ها
+                                </Button>
+        </div>
+        <div className="relative mt-16 grid gap-10 lg:mt-28 lg:grid-cols-5">
+          <aside className="top-10 flex h-fit w-full max-w-56 flex-col gap-5 text-start lg:sticky">
+            <div>
+              <h2 className="font-semibold">موضوعات</h2>
+              <ul className="mt-2 flex flex-col gap-2">
+                <li>
+                  <p className="text-sm text-muted-foreground">باغچه گلدانی</p>
+                </li>
+                <li>
+                  <p className="text-sm text-muted-foreground">
+                    سیستم‌های عمودی
+                  </p>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h2 className="font-semibold">آخرین به‌روزرسانی</h2>
+              <time
+                dateTime="2024-04-15"
+                className="text-sm text-muted-foreground"
+              >
+                {lastUpdatedLabel}
+              </time>
+            </div>
+          </aside>
+          <div className="gap-6 lg:col-span-3">
+            <div className="max-w-prose lg:mx-auto">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر نمونه"
+                className="aspect-video rounded-2xl border border-border object-cover"
+              />
+              <div className="prose mt-12 text-start dark:prose-invert prose-h3:mt-14 prose-h3:scroll-mt-14 prose-h3:text-lg">
+                <h2 className="text-xl font-semibold">راهنمای مبتدیان</h2>
+                <h3
+                  id="heading1"
+                  ref={(ref) => addSectionRef("heading1", ref)}
+                  className="text-xl font-semibold"
+                >
+                  نمای کلی
+                </h3>
+                <p>
+                  با انتخاب گیاهان مناسب، مدیریت نور و آبیاری و استفاده بهینه از فضا، می‌توانید حتی در یک بالکن کوچک نیز باغچه‌ای سالم و پربار داشته باشید.
+                                                  </p>
+                <h3 id="heading2" ref={(ref) => addSectionRef("heading2", ref)}>
+                  شروع کار
+                </h3>
+                <p>
+                  قبل از شروع، محل مناسب، میزان نور، نوع خاک و برنامه آبیاری را مشخص کنید تا گیاهان از همان ابتدا شرایط رشد مطلوبی داشته باشند.
+                                                  </p>
+                <ul>
+                  <li>
+                    لوازم پایه برای باغچه اولیه:
+                    <ul>
+                      <li>
+                        <code>گلدان</code> با سوراخ زهکشی مناسب
+                      </li>
+                      <li>
+                        <code>خاک</code> مخصوص کاشت در گلدان
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    شرایط نوری مناسب{" "}
+                    <a href="#">مشاهده راهنمای نور</a>
+                  </li>
+                  <li>برنامه و روش‌های منظم آبیاری</li>
+                  <li>بافت باکیفیت با مواد مغذی متعادل</li>
+                </ul>
+
+                <h3 id="heading3" ref={(ref) => addSectionRef("heading3", ref)}>
+                  انتخاب گیاهان
+                </h3>
+                <p>
+                  انتخاب گیاه متناسب با میزان نور، دمای محیط و فضای در دسترس، مهم‌ترین عامل موفقیت در باغبانی خانگی است.
+                                                  </p>
+                <div>
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>شرایط نور</th>
+                        <th>گیاهان پیشنهادی</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>آفتاب کامل</td>
+                        <td>گوجه‌فرنگی، فلفل، ریحان</td>
+                      </tr>
+                      <tr className="m-0 border-t p-0 even:bg-muted">
+                        <td>آفتاب جزئی</td>
+                        <td>کاهو، کلم پیچ، نعنا</td>
+                      </tr>
+                      <tr className="m-0 border-t p-0 even:bg-muted">
+                        <td>سایه</td>
+                        <td>سرخس، هاستا، ایمپاتیانس</td>
+                      </tr>
+                      <tr className="m-0 border-t p-0 even:bg-muted">
+                        <td>نور غیرمستقیم</td>
+                        <td>ارکیده، لیلی صلح</td>
+                      </tr>
+                      <tr className="m-0 border-t p-0 even:bg-muted">
+                        <td>نور کم</td>
+                        <td>سانسوریا، گیاه دعا</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <p>
+                  هماهنگی نیاز نوری گیاه با محل نگهداری، رشد سالم‌تر، گل‌دهی بهتر و محصول بیشتر را به همراه خواهد داشت.
+                                                  </p>
+                <Alert>
+                  <Lightbulb className="h-4 w-4" />
+                  <AlertTitle>نکته حرفه‌ای!</AlertTitle>
+                  <AlertDescription>
+                    گیاهانی با نیاز آبی مشابه را در کنار یکدیگر قرار دهید تا برنامه آبیاری ساده‌تر و احتمال آسیب به ریشه‌ها کمتر شود.
+                                                        </AlertDescription>
+                </Alert>
+
+                <h3 id="heading4" ref={(ref) => addSectionRef("heading4", ref)}>
+                  راه‌حل‌های عمودی
+                </h3>
+                <p>
+                  اگر فضای کافی روی زمین ندارید، از دیوارها و سازه‌های عمودی برای افزایش ظرفیت کاشت استفاده کنید.{" "}
+                  <a href="#">تکنیک‌های باغبانی عمودی</a> به شما کمک می‌کند بدون اشغال فضای بیشتر، تعداد گیاهان قابل کشت را چند برابر افزایش دهید.
+                                                  </p>
+                <blockquote>
+                  «بزرگ‌ترین محدودیت در باغبانی شهری فضا نیست  تخیل است»،
+                  می‌گوید ماریا چن، کشاورز شهری نامدار.
+                </blockquote>
+                <p>
+                  با توجه به فضای در دسترس، این گزینه‌های عمودی را در نظر
+                  بگیرید:
+                </p>
+                <ul>
+                  <li>گلدان‌های دیواری جیبی: مناسب برای گیاهان دارویی</li>
+                  <li>استند طبقه‌ای: ایده‌آل برای گلدان‌های کوچک</li>
+                  <li>
+                    خرک برای گیاهان رونده: عالی برای لوبیا، نخود و خیار
+                  </li>
+                </ul>
+                <p>
+                  با رعایت این اصول، حتی کوچک‌ترین فضاهای شهری نیز می‌توانند به باغچه‌ای سرسبز، زیبا و پربازده تبدیل شوند.
+                                                  </p>
+              </div>
+            </div>
+          </div>
+          <nav
+            className="sticky top-10 hidden h-fit lg:block"
+            aria-label="فهرست مطالب"
+          >
+            <p className="text-sm text-muted-foreground">در این صفحه</p>
+            <ul className="mt-1.5 text-xs text-muted-foreground">
+              <li>
+                <a
+                  className={cn(
+                    "block border-s border-border py-1 ps-2.5 transition-colors duration-200",
+                    activeHeadings.includes("heading1")
+                      ? "border-primary font-medium text-primary"
+                      : "text-muted-foreground hover:text-primary",
+                  )}
+                  href="#heading1"
+                >
+                  نمای کلی
+                </a>
+              </li>
+              <li>
+                <a
+                  className={cn(
+                    "block border-s border-border py-1 ps-2.5 transition-colors duration-200",
+                    activeHeadings.includes("heading2")
+                      ? "border-primary font-medium text-primary"
+                      : "text-muted-foreground hover:text-primary",
+                  )}
+                  href="#heading2"
+                >
+                  شروع کار
+                </a>
+              </li>
+              <li>
+                <a
+                  className={cn(
+                    "block border-s border-border py-1 ps-2.5 transition-colors duration-200",
+                    activeHeadings.includes("heading3")
+                      ? "border-primary font-medium text-primary"
+                      : "text-muted-foreground hover:text-primary",
+                  )}
+                  href="#heading3"
+                >
+                  انتخاب گیاهان
+                </a>
+              </li>
+              <li>
+                <a
+                  className={cn(
+                    "block border-s border-border py-1 ps-2.5 transition-colors duration-200",
+                    activeHeadings.includes("heading4")
+                      ? "border-primary font-medium text-primary"
+                      : "text-muted-foreground hover:text-primary",
+                  )}
+                  href="#heading4"
+                >
+                  راه‌حل‌های عمودی
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Content3 };
diff --git a/blocks/content4.tsx b/blocks/content4.tsx
new file mode 100644
index 0000000..7c192a6
--- /dev/null
+++ b/blocks/content4.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import { ArrowUp } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Content4Props {
+  className?: string;
+}
+
+const publishedAtLabel = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+}).format(new Date("2024-06-15"));
+
+const Content4 = ({ className }: Content4Props) => {
+  const [activeHeader, setActiveHeader] = useState<string | null>(null);
+  const headerRefs = useRef<Record<string, HTMLElement>>({});
+  const [showBackToTop, setShowBackToTop] = useState(false);
+
+  useEffect(() => {
+    const headers = Object.keys(headerRefs.current);
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveHeader(entry.target.id);
+        }
+      });
+    };
+
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      observerCallback,
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1,
+      },
+    );
+
+    headers.forEach((headerId) => {
+      const element = headerRefs.current[headerId];
+      if (element) {
+        observer?.observe(element);
+      }
+    });
+
+    return () => {
+      observer?.disconnect();
+      observer = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 1000) {
+        setShowBackToTop(true);
+      } else {
+        setShowBackToTop(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const addHeaderRef = (id: string, ref: HTMLElement | null) => {
+    if (ref) {
+      headerRefs.current[id] = ref;
+    }
+  };
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">وبلاگ</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>کاوش افق‌های تازه</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div className="mt-9 flex flex-col gap-12 md:gap-20">
+          <h1 className="max-w-3xl text-start text-xl font-semibold text-balance md:text-2xll">
+            روندهای نوین در توسعه وب
+                                </h1>
+          <div className="flex items-center gap-3">
+            <Avatar className="border border-border">
+              <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+            </Avatar>
+            <p className="text-sm tracking-tight md:text-base">
+              <span className="font-semibold">جین اسمیت</span>
+              <span className="ms-1 font-medium text-muted-foreground">
+                · {publishedAtLabel}
+              </span>
+            </p>
+          </div>
+        </div>
+        <div className="relative flex max-w-6xl flex-col-reverse gap-6 lg:mt-32 lg:grid lg:grid-cols-10">
+          <div className="lg:col-span-6">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر نمونه"
+              className="max-h-96 w-full rounded-xl border border-border object-cover"
+            />
+            <div className="prose mt-6 text-start dark:prose-invert prose-h2:scroll-m-10">
+              <p>
+                فناوری‌های توسعه وب با سرعت زیادی در حال تغییر هستند و آشنایی با ابزارها و رویکردهای جدید، نقش مهمی در موفقیت پروژه‌های نرم‌افزاری دارد.
+                                            </p>
+              <h2 id="header-1" ref={(ref) => addHeaderRef("header-1", ref)}>
+                تحول فریم‌ورک‌های فرانت‌اند
+              </h2>
+              <p>
+                فریم‌ورک‌های مدرن با ارائه معماری‌های استاندارد، توسعه رابط کاربری را سریع‌تر، ساختاریافته‌تر و قابل نگهداری‌تر کرده‌اند.
+                                            </p>
+              <p>
+                امکاناتی مانند معماری کامپوننت‌محور، رندر سمت سرور، مدیریت وضعیت و بهینه‌سازی عملکرد، کیفیت توسعه محصولات مدرن را به شکل محسوسی افزایش داده‌اند.
+                                            </p>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="تصویر نمونه"
+                className="max-h-96 w-full rounded-xl border border-border object-cover"
+              />
+              <p>
+                انتخاب فناوری مناسب باید بر اساس نیازهای پروژه، تجربه تیم، مقیاس‌پذیری و هزینه نگهداری انجام شود.
+                                            </p>
+              <ul>
+                <li>
+                  <p>
+                    معماری مبتنی بر کامپوننت، قابلیت استفاده مجدد و نگهداری
+                    بهتر در پروژه‌های بزرگ را ممکن می‌سازد.
+                  </p>
+                </li>
+                <li>
+                  <p>
+                    راه‌حل‌های مدیریت state به کنترل جریان داده در اپلیکیشن‌های
+                    پیچیده به‌شکل مؤثر و قابل پیش‌بینی کمک می‌کنند.
+                  </p>
+                </li>
+              </ul>
+              <h2 id="header-2" ref={(ref) => addHeaderRef("header-2", ref)}>
+                فناوری‌های بک‌اند و اثر آن‌ها
+              </h2>
+              <p>
+                تحولات حوزه بک‌اند باعث شده توسعه سرویس‌های امن، مقیاس‌پذیر و پرسرعت ساده‌تر از گذشته باشد.
+                                            </p>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt="تصویر نمونه"
+                className="max-h-96 w-full rounded-xl border border-border object-cover"
+              />
+              <ul>
+                <li>
+                  <p>
+                    <strong>معماری میکروسرویس </strong>
+                    با تقسیم اپلیکیشن به سرویس‌های کوچک و مستقل، ساخت سیستم‌های
+                    مقیاس‌پذیر و تاب‌آور را ممکن می‌سازد.
+                  </p>
+                </li>
+                <li>
+                  <p>
+                    <strong>محاسبات بدون سرور </strong>
+                    اجرای کد بک‌اند بدون مدیریت سرور، هزینه عملیاتی را کم و
+                    مقیاس‌پذیری خودکار را فراهم می‌کند.
+                  </p>
+                </li>
+                <li>
+                  <p>
+                    <strong>نوآوری‌های پایگاه داده</strong> از جمله پایگاه داده انعطاف‌پذیر و
+                    پایگاه داده مدرن، راه‌حل‌های ذخیره‌سازی انعطاف‌پذیر و مقیاس‌پذیر برای
+                    اپلیکیشن‌های مدرن ارائه می‌دهند.
+                  </p>
+                </li>
+              </ul>
+              <h2 id="header-3" ref={(ref) => addHeaderRef("header-3", ref)}>
+                روندهای آینده در توسعه
+              </h2>
+              <p>
+                هوش مصنوعی، اجرای سریع مرورگر، پردازش لبه و برنامه‌های وب پیش‌رونده از مهم‌ترین فناوری‌هایی هستند که آینده توسعه وب را شکل خواهند داد.
+                                            </p>
+              <p>
+                سرمایه‌گذاری روی فناوری‌های نوین، علاوه بر افزایش کیفیت محصول، مسیر توسعه و رقابت‌پذیری کسب‌وکارها را نیز هموارتر می‌کند.
+                                            </p>
+            </div>
+          </div>
+
+          <nav
+            className="top-6 h-fit lg:sticky lg:col-span-3 lg:col-start-8"
+            aria-label="فهرست مطالب"
+          >
+            <Separator className="my-10 block lg:hidden" />
+            <div className="flex flex-col gap-1.5 text-start text-sm lg:text-xs">
+              <p className="text-xs text-muted-foreground">در این صفحه</p>
+              <ul>
+                <li className="py-1.5 transition-colors duration-200">
+                  <a
+                    href="#header-1"
+                    className={cn(
+                      "block transition-colors duration-200",
+                      activeHeader === "header-1"
+                        ? "text-muted-foreground lg:text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    تحول فریم‌ورک‌های فرانت‌اند
+                  </a>
+                </li>
+                <li className="py-1.5 transition-colors duration-200">
+                  <a
+                    href="#header-2"
+                    className={cn(
+                      "block transition-colors duration-200",
+                      activeHeader === "header-2"
+                        ? "text-muted-foreground lg:text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    فناوری‌های بک‌اند و اثر آن‌ها
+                  </a>
+                </li>
+                <li className="py-1.5 transition-colors duration-200">
+                  <a
+                    href="#header-3"
+                    className={cn(
+                      "block transition-colors duration-200",
+                      activeHeader === "header-3"
+                        ? "text-muted-foreground lg:text-primary"
+                        : "text-muted-foreground hover:text-primary",
+                    )}
+                  >
+                    روندهای آینده در توسعه
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div
+              className={cn(
+                "hidden opacity-0 transition-opacity duration-200 lg:block",
+                showBackToTop && "opacity-100",
+              )}
+            >
+              <Separator className="my-3" />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+                className="gap-1 text-xs text-muted-foreground"
+                aria-label="بازگشت به بالای صفحه"
+              >
+                <ArrowUp className="size-3.5" />
+                بازگشت به بالا
+              </Button>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Content4 };
diff --git a/blocks/cta1.tsx b/blocks/cta1.tsx
new file mode 100644
index 0000000..c88312b
--- /dev/null
+++ b/blocks/cta1.tsx
@@ -0,0 +1,42 @@
+import { ArrowRight, Sparkles } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Cta1Props {
+  className?: string;
+}
+
+const Cta1 = ({ className }: Cta1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Card className="flex flex-col justify-between border-muted pb-0 md:flex-row md:py-6">
+          <div className="p-6 text-start md:max-w-96">
+            <div className="mb-2 flex items-center gap-2">
+              <span className="flex size-7 items-center justify-center rounded-full bg-muted">
+                <Sparkles className="size-4" strokeWidth={1.5} />
+              </span>
+              <h4 className="text-xl font-bold">همین امروز شروع کنید</h4>
+            </div>
+            <p className="text-muted-foreground">
+              با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.
+                                      </p>
+            <Button className="mt-8">
+              شروع رایگان
+                                        <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر معرفی محصول"
+            className="aspect-video object-cover md:max-w-96"
+          />
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { Cta1 };
diff --git a/blocks/cta10.tsx b/blocks/cta10.tsx
new file mode 100644
index 0000000..b8380cc
--- /dev/null
+++ b/blocks/cta10.tsx
@@ -0,0 +1,61 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta10Props {
+  heading?: string;
+  description?: string;
+  buttons?: {
+    primary?: {
+      text: string;
+      url: string;
+    };
+    secondary?: {
+      text: string;
+      url: string;
+    };
+  };
+  className?: string;
+}
+
+const Cta10 = ({
+  heading = "همین امروز شروع کنید",
+  description = "با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.",
+  buttons = {
+    primary: {
+      text: "شروع همکاری",
+      url: "https://www.ShadcnBlocks",
+    },
+  },
+  className,
+}: Cta10Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col gap-16 overflow-hidden rounded-lg bg-accent p-8 md:rounded-xl lg:flex-row lg:items-center lg:p-12">
+          <div className="flex-1 text-start">
+            <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+              {heading}
+            </h3>
+            <p className="max-w-xl text-muted-foreground lg:text-lg">
+              {description}
+            </p>
+          </div>
+          <div className="flex shrink-0 flex-col gap-2 sm:flex-row">
+            {buttons.primary && (
+              <Button asChild variant="default" size="lg">
+                <a href={buttons.primary.url}>{buttons.primary.text}</a>
+              </Button>
+            )}
+            {buttons.secondary && (
+              <Button variant="outline" asChild>
+                <a href={buttons.secondary.url}>{buttons.secondary.text}</a>
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta10 };
diff --git a/blocks/cta11.tsx b/blocks/cta11.tsx
new file mode 100644
index 0000000..8e4d05e
--- /dev/null
+++ b/blocks/cta11.tsx
@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils";
+
+interface Cta11Props {
+  heading?: string;
+  description?: string;
+  imageSrc?: string;
+  imageAlt?: string;
+  buttonText?: string;
+  buttonHref?: string;
+  className?: string;
+}
+
+const Cta11 = ({
+  heading = "همین امروز شروع کنید",
+  description = "با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.",
+  imageSrc = "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  imageAlt = "تصویر معرفی محصول",
+  className,
+}: Cta11Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col gap-16 overflow-hidden rounded-lg bg-accent p-8 md:rounded-xl lg:flex-row lg:items-center lg:p-12">
+          <div className="flex-1 text-start">
+            <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+              {heading}
+            </h3>
+            <p className="max-w-xl text-muted-foreground lg:text-lg">
+              {description}
+            </p>
+          </div>
+          <div className="shrink-0">
+            <div className="flex flex-col justify-center gap-4 sm:flex-row sm:items-center">
+              <div className="relative h-32 w-32 overflow-hidden rounded-lg sm:h-40 sm:w-40">
+                <img
+                  src={imageSrc}
+                  alt={imageAlt}
+                  className="size-full object-cover"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta11 };
diff --git a/blocks/cta12.tsx b/blocks/cta12.tsx
new file mode 100644
index 0000000..4de6c10
--- /dev/null
+++ b/blocks/cta12.tsx
@@ -0,0 +1,71 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta12Props {
+  heading?: string;
+  description?: string;
+  buttons?: {
+    primary?: {
+      text: string;
+      url: string;
+      className?: string;
+    };
+    secondary?: {
+      text: string;
+      url: string;
+    };
+  };
+  className?: string;
+}
+
+const Cta12 = ({
+  heading = "همین امروز شروع کنید",
+  description = "با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.",
+  buttons = {
+    primary: {
+      text: "شروع همکاری",
+      url: "https://www.ShadcnBlocks",
+    },
+    secondary: {
+      text: "تماس با ما",
+      url: "https://www.ShadcnBlocks",
+    },
+  },
+  className,
+}: Cta12Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="rounded-lg bg-accent p-8 md:rounded-xl lg:p-12">
+          <div className="mx-auto max-w-4xl text-center">
+            <h3 className="mb-4 text-3xl font-semibold md:text-2xll lg:mb-6 lg:text-2xll">
+              {heading}
+            </h3>
+            <p className="mb-8 text-lg font-medium text-muted-foreground lg:text-xl">
+              {description}
+            </p>
+            <div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4">
+              {buttons.primary && (
+                <Button size="lg" className="w-full sm:w-auto" asChild>
+                  <a href={buttons.primary.url}>{buttons.primary.text}</a>
+                </Button>
+              )}
+              {buttons.secondary && (
+                <Button
+                  variant="outline"
+                  size="lg"
+                  className="w-full sm:w-auto"
+                  asChild
+                >
+                  <a href={buttons.secondary.url}>{buttons.secondary.text}</a>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta12 };
diff --git a/blocks/cta13.tsx b/blocks/cta13.tsx
new file mode 100644
index 0000000..8754e98
--- /dev/null
+++ b/blocks/cta13.tsx
@@ -0,0 +1,71 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta13Props {
+  heading?: string;
+  description?: string;
+  buttons?: {
+    primary?: {
+      text: string;
+      url: string;
+      className?: string;
+    };
+    secondary?: {
+      text: string;
+      url: string;
+    };
+  };
+  className?: string;
+}
+
+const Cta13 = ({
+  heading = "همین امروز شروع کنید",
+  description = "با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.",
+  buttons = {
+    primary: {
+      text: "شروع همکاری",
+      url: "https://www.ShadcnBlocks",
+    },
+    secondary: {
+      text: "تماس با ما",
+      url: "https://www.ShadcnBlocks",
+    },
+  },
+  className,
+}: Cta13Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="rounded-lg bg-accent p-8 md:rounded-xl lg:p-12">
+          <div className="max-w-4xl text-start">
+            <h3 className="mb-4 text-3xl font-semibold md:text-2xll lg:mb-6 lg:text-2xll">
+              {heading}
+            </h3>
+            <p className="mb-8 text-lg font-medium text-muted-foreground lg:text-xl">
+              {description}
+            </p>
+            <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
+              {buttons.primary && (
+                <Button size="lg" className="w-full sm:w-auto" asChild>
+                  <a href={buttons.primary.url}>{buttons.primary.text}</a>
+                </Button>
+              )}
+              {buttons.secondary && (
+                <Button
+                  variant="outline"
+                  size="lg"
+                  className="w-full sm:w-auto"
+                  asChild
+                >
+                  <a href={buttons.secondary.url}>{buttons.secondary.text}</a>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta13 };
diff --git a/blocks/cta16.tsx b/blocks/cta16.tsx
new file mode 100644
index 0000000..64fe0dc
--- /dev/null
+++ b/blocks/cta16.tsx
@@ -0,0 +1,42 @@
+import { Zap } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta16Props {
+  className?: string;
+}
+
+const Cta16 = ({ className }: Cta16Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="flex h-[620px] items-center justify-center bg-[linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url('/block-media/shadcnblocks/block/photos/simone-hutsch-xOLhD-qfoRI-unsplash.jpg')] bg-cover bg-center">
+        <div className="container">
+          <div className="flex flex-col gap-8 p-4 text-center text-primary-foreground">
+            <div className="flex items-center justify-center gap-2 text-xl font-medium">
+              <Zap className="h-full w-7 shrink-0" />
+              سریع‌تر توسعه دهید
+                                      </div>
+            <h2 className="text-2xll font-bold text-balance">
+              وب‌سایت حرفه‌ای خود را در زمان کمتر راه‌اندازی کنید
+                                      </h2>
+            <div className="flex flex-col justify-center gap-2 sm:flex-row">
+              <Button size="lg" variant="secondary">
+                شروع رایگان
+                                            </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-0 bg-background/20 backdrop-blur-sm hover:bg-background/30 hover:text-primary-foreground"
+              >
+                مشاهده جزئیات
+                                            </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta16 };
diff --git a/blocks/cta27.tsx b/blocks/cta27.tsx
new file mode 100644
index 0000000..9fe39a5
--- /dev/null
+++ b/blocks/cta27.tsx
@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta27Props {
+  className?: string;
+}
+
+const Cta27 = ({ className }: Cta27Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="text-start text-2xll font-bold md:text-2xll">
+          با خلاقیت بیشتر طراحی کنید
+                          </h2>
+        <div className="mt-14 grid gap-8 lg:grid-cols-2">
+          <div className="rounded-xl bg-muted/50">
+            <div className="mx-8 mt-6 mb-12 flex flex-col gap-5 text-start">
+              <h3 className="text-xl font-semibold md:text-2xll">کیت طراحی رابط کاربری</h3>
+              <div className="flex flex-wrap gap-3">
+                <Button size="lg">شروع رایگان</Button>
+                <Button size="lg" variant="outline">
+                  مشاهده نمونه‌ها
+                                                  </Button>
+              </div>
+            </div>
+            <div className="relative max-h-96 overflow-hidden ps-32">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر معرفی محصول"
+                className="max-h-96 w-full rounded-ss-xl border-t border-s border-border object-cover"
+              />
+              <div className="absolute -bottom-16 start-10 isolate">
+                <div className="h-full max-h-96 w-full">
+                  <img
+                    src="/block-media/shadcnblocks/block/mockups/phone-1.png"
+                    alt="نمایش نسخه موبایل"
+                    className="max-h-[60vw] sm:max-h-96 lg:max-h-80 xl:max-h-96"
+                  />
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
+                    alt="تصویر معرفی محصول"
+                    className="absolute top-0 start-0 -z-10 h-full w-full rounded-4xl"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="rounded-xl bg-muted/50">
+            <div className="mx-8 mt-6 mb-12 flex flex-col gap-5 text-start">
+              <h3 className="text-xl font-semibold md:text-2xll">
+                استودیو طراحی برند
+                                            </h3>
+              <div className="flex flex-wrap gap-3">
+                <Button size="lg">شروع رایگان</Button>
+                <Button size="lg" variant="outline">
+                  مشاهده نمونه‌ها
+                                                  </Button>
+              </div>
+            </div>
+            <div className="relative max-h-96 overflow-hidden ps-32">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="تصویر معرفی محصول"
+                className="max-h-96 w-full rounded-ss-xl border-t border-s border-border object-cover"
+              />
+              <div className="absolute -bottom-16 start-10 isolate">
+                <div className="h-full max-h-96 w-full">
+                  <img
+                    src="/block-media/shadcnblocks/block/mockups/phone-1.png"
+                    alt="نمایش نسخه موبایل"
+                    className="max-h-[60vw] sm:max-h-96 lg:max-h-80 xl:max-h-96"
+                  />
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
+                    alt="تصویر معرفی محصول"
+                    className="absolute top-0 start-0 -z-10 h-full w-full rounded-4xl"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta27 };
diff --git a/blocks/cta3.tsx b/blocks/cta3.tsx
new file mode 100644
index 0000000..9fcebf6
--- /dev/null
+++ b/blocks/cta3.tsx
@@ -0,0 +1,70 @@
+import { ArrowRight, Book, ChevronRight, File } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Cta3Props {
+  className?: string;
+}
+
+const Cta3 = ({ className }: Cta3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 flex-col gap-10 rounded-lg border p-6 shadow-sm lg:grid-cols-2 lg:px-20 lg:py-16">
+          <div className="text-start">
+            <h4 className="mb-2 text-xl font-bold lg:text-xl">
+              همین امروز شروع کنید
+                                      </h4>
+            <p className="text-muted-foreground">
+              با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.
+                                      </p>
+            <div className="mt-8 flex flex-col items-center gap-2 sm:flex-row">
+              <Button className="w-full sm:w-auto">
+                شروع رایگان
+                                              <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+              </Button>
+              <Button variant="outline" className="w-full sm:w-auto">
+                درخواست مشاوره
+                                            </Button>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <a href="#">
+              <Card className="flex flex-row items-center justify-between gap-2 px-6 py-4 shadow-none hover:bg-accent">
+                <div className="flex items-start gap-2 text-start">
+                  <File className="size-4 shrink-0" />
+                  <div>
+                    <h5 className="mb-2 leading-4 font-medium">مستندات فنی</h5>
+                    <p className="text-sm text-muted-foreground">
+                      راهنماهای کاربردی، مستندات اتصال هوشمند و نمونه‌کدها برای پیاده‌سازی سریع‌تر در اختیار شماست.
+                                                              </p>
+                  </div>
+                </div>
+                <ChevronRight className="size-6 shrink-0 rtl:rotate-180" />
+              </Card>
+            </a>
+            <a href="#">
+              <Card className="flex flex-row items-center justify-between gap-2 px-6 py-4 shadow-none hover:bg-accent">
+                <div className="flex items-start gap-2 text-start">
+                  <Book className="size-4 shrink-0" />
+                  <div>
+                    <h5 className="mb-2 leading-4 font-medium">آموزش شروع سریع</h5>
+                    <p className="text-sm text-muted-foreground">
+                      در چند مرحله ساده اولین پروژه خود را ایجاد و راه‌اندازی کنید.
+                                                              </p>
+                  </div>
+                </div>
+                <ChevronRight className="size-6 shrink-0 rtl:rotate-180" />
+              </Card>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta3 };
diff --git a/blocks/cta4.tsx b/blocks/cta4.tsx
new file mode 100644
index 0000000..e9b748c
--- /dev/null
+++ b/blocks/cta4.tsx
@@ -0,0 +1,65 @@
+import { ArrowRight, Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta4Props {
+  title?: string;
+  description?: string;
+  buttonText?: string;
+  buttonUrl?: string;
+  items?: string[];
+  className?: string;
+}
+
+const defaultItems = [
+  "یکپارچه‌سازی سریع با سرویس‌ها",
+  "پشتیبانی تخصصی",
+  "شخصی‌سازی کامل رابط کاربری",
+  "آماده رشد کسب‌وکار",
+  "صدها کامپوننت آماده",
+];
+
+const Cta4 = ({
+  title = "همین امروز شروع کنید",
+  description = "با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.",
+  buttonText = "شروع رایگان",
+  buttonUrl = "https://ShadcnBlocks",
+  items = defaultItems,
+  className,
+}: Cta4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto">
+        <div className="flex justify-center">
+          <div className="max-w-5xl">
+            <div className="flex flex-col items-start justify-between gap-8 rounded-lg bg-muted px-6 py-10 md:flex-row lg:px-20 lg:py-16">
+              <div className="text-start md:w-1/2">
+                <h4 className="mb-1 text-xl font-bold md:text-3xl">{title}</h4>
+                <p className="text-muted-foreground">{description}</p>
+                <Button className="mt-6" asChild>
+                  <a href={buttonUrl} target="_blank">
+                    {buttonText}
+                    <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+                  </a>
+                </Button>
+              </div>
+              <div className="md:w-1/3">
+                <ul className="flex flex-col space-y-2 text-sm font-medium">
+                  {items.map((item, idx) => (
+                    <li className="flex items-center" key={idx}>
+                      <Check className="me-4 size-4 shrink-0" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta4 };
diff --git a/blocks/cta5.tsx b/blocks/cta5.tsx
new file mode 100644
index 0000000..1100a86
--- /dev/null
+++ b/blocks/cta5.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta5Props {
+  className?: string;
+}
+
+const Cta5 = ({ className }: Cta5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col overflow-hidden rounded-lg bg-muted md:rounded-xl lg:flex-row lg:items-center">
+          <div className="w-full shrink-0 self-stretch lg:w-1/2">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+              alt="تصویر معرفی محصول"
+              className="aspect-3/2 w-full rounded-t-md object-cover md:rounded-t-none md:rounded-e-md"
+            />
+          </div>
+          <div className="w-full shrink-0 px-4 py-6 text-start md:p-8 lg:w-1/2 lg:px-16">
+            <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+              همین امروز شروع کنید
+                                      </h3>
+            <p className="mb-8 text-muted-foreground lg:text-lg">
+              با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.
+                                      </p>
+            <Button>شروع رایگان</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta5 };
diff --git a/blocks/cta6.tsx b/blocks/cta6.tsx
new file mode 100644
index 0000000..d5ec245
--- /dev/null
+++ b/blocks/cta6.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta6Props {
+  className?: string;
+}
+
+const Cta6 = ({ className }: Cta6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="max-w-full overflow-hidden border-y border-border bg-accent pt-10 md:pt-16 lg:pt-20">
+        <div className="relative container flex flex-col md:flex-row md:gap-12">
+          <div className="mb-[18rem] text-start md:mb-28 md:w-2/3 lg:shrink-0 xl:mb-20 xl:w-1/2">
+            <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-2xll lg:mb-6">
+              همین امروز شروع کنید
+                                      </h3>
+            <p className="mb-8 text-muted-foreground lg:text-lg">
+              با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.
+                                      </p>
+            <Button>شروع رایگان</Button>
+          </div>
+          <div className="absolute bottom-0 left-1/2 h-min w-[110%] max-w-md -translate-x-1/2 md:-end-36 md:w-3/4 md:max-w-xl md:translate-x-0 lg:mt-auto xl:relative xl:end-0 xl:h-full xl:w-full xl:max-w-full">
+            <div className="relative aspect-8/5 h-full min-h-[16rem] w-full">
+              <div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 -translate-x-[24%] translate-y-[24%] -rotate-[30deg] justify-center overflow-clip rounded-3xl bg-background shadow-lg shadow-foreground/20 md:max-xl:-translate-x-[8%] md:max-xl:translate-y-[16%] rtl:translate-x-[24%] rtl:rotate-[30deg] md:max-xl:rtl:translate-x-[8%]"></div>
+              <div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 -translate-x-[16%] translate-y-[8%] -rotate-[15deg] justify-center overflow-clip rounded-3xl bg-background shadow-xl shadow-foreground/20 md:max-xl:-translate-x-[6%] md:max-xl:translate-y-[6%] rtl:translate-x-[16%] rtl:rotate-[15deg] md:max-xl:rtl:translate-x-[6%]"></div>
+              <div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 items-center justify-center overflow-clip rounded-3xl bg-background shadow-2xl shadow-foreground/20"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta6 };
diff --git a/blocks/cta7.tsx b/blocks/cta7.tsx
new file mode 100644
index 0000000..c6ebfa6
--- /dev/null
+++ b/blocks/cta7.tsx
@@ -0,0 +1,80 @@
+import { Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Cta7Props {
+  className?: string;
+}
+
+const Cta7 = ({ className }: Cta7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative rounded-xl border border-border bg-accent px-6 py-8 2xl:grid 2xl:grid-cols-2 2xl:px-14 2xl:py-10">
+          <div aria-hidden="true" className="absolute inset-0 overflow-hidden">
+            <svg
+              fill="none"
+              width={404}
+              height={384}
+              viewBox="0 0 404 384"
+              aria-hidden="true"
+              className="absolute top-full end-full -translate-x-2/3 -translate-y-1/2 rotate-[60deg] rtl:translate-x-2/3 rtl:-rotate-[60deg]"
+            >
+              <defs>
+                <pattern
+                  x={0}
+                  y={0}
+                  id="dots"
+                  width={16}
+                  height={16}
+                  patternUnits="userSpaceOnUse"
+                >
+                  <circle
+                    cx={2}
+                    cy={2}
+                    r={2}
+                    fill="currentColor"
+                    className="text-border"
+                  />
+                </pattern>
+              </defs>
+              <rect fill="url(#dots)" width={400} height={400} />
+            </svg>
+          </div>
+          <div className="relative mb-12 text-start 2xl:mb-0">
+            <h3 className="mb-6 text-xl font-semibold md:mb-8 md:text-xl lg:mb-12">
+              همین امروز شروع کنید
+                                      </h3>
+            <p className="mb-6 text-xs tracking-widest text-muted-foreground uppercase">
+              تفاوت را در عمل تجربه کنید.
+                                      </p>
+            <ul className="grid gap-x-8 gap-y-4 text-muted-foreground md:grid-cols-2">
+              <li className="flex items-center gap-2">
+                <Check className="size-5 shrink-0 text-foreground" />
+                یکپارچه‌سازی سریع با سرویس‌ها
+                                            </li>
+              <li className="flex items-center gap-2">
+                <Check className="size-5 shrink-0 text-foreground" />
+                پشتیبانی تخصصی
+                                            </li>
+              <li className="flex items-center gap-2">
+                <Check className="size-5 shrink-0 text-foreground" />
+                شخصی‌سازی کامل رابط کاربری
+                                            </li>
+              <li className="flex items-center gap-2">
+                <Check className="size-5 shrink-0 text-foreground" />
+                به‌روزرسانی و توسعه مستمر
+                                            </li>
+            </ul>
+          </div>
+          <div className="relative flex items-end 2xl:justify-end">
+            <Button size="lg">شروع رایگان</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Cta7 };
diff --git a/blocks/dashboard1.tsx b/blocks/dashboard1.tsx
new file mode 100644
index 0000000..e82f895
--- /dev/null
+++ b/blocks/dashboard1.tsx
@@ -0,0 +1,1971 @@
+"use client";
+
+import {
+  Activity,
+  ArrowDownRight,
+  ArrowUpRight,
+  BarChart3,
+  Bell,
+  Building2,
+  ChevronRight,
+  ChevronsUpDown,
+  CircleDollarSign,
+  CreditCard,
+  Download,
+  FileText,
+  Layers,
+  LayoutDashboard,
+  LineChart as LineChartIcon,
+  LogOut,
+  MoreHorizontal,
+  Receipt,
+  Search,
+  Settings,
+  TrendingDown,
+  User,
+  UserPlus,
+  Users,
+  Zap,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipContentProps } from "recharts";
+import {
+  Area,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ComposedChart,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ReferenceLine,
+  Sector,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+    href: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type StatItem = {
+  title: string;
+  previousValue: number;
+  value: number;
+  changePercent: number;
+  isPositive: boolean;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  format: "currency" | "number";
+};
+
+// ============================================================================
+// Formatting Helpers
+// ============================================================================
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 0,
+});
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+/** `font-mono tabular-nums` for large hero KPI values only; smaller figures stay sans (see `tabular-nums` where alignment helps). */
+const numericMonoClass = "font-mono tabular-nums";
+
+const chartCurrencyTickProps = {
+  fontSize: 10,
+  fontFamily:
+    "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+} as const;
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+// ============================================================================
+// Chart Palette (color-mix from primary)
+// ============================================================================
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان‌بلاکس",
+    title: "ShadcnBlocks",
+    description: "پلتفرم سامانه ابری",
+    href: "https://www.ShadcnBlocks",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "تحلیل‌ها", icon: BarChart3, href: "#" },
+        { label: "فعالیت", icon: Activity, href: "#" },
+      ],
+    },
+    {
+      title: "کاربران",
+      defaultOpen: true,
+      items: [
+        {
+          label: "فهرست",
+          icon: Users,
+          href: "#",
+          children: [
+            { label: "همه کاربران", icon: User, href: "#" },
+            { label: "فضاهای کاری", icon: Building2, href: "#" },
+          ],
+        },
+        { label: "دعوت‌ها", icon: UserPlus, href: "#" },
+      ],
+    },
+    {
+      title: "صورتحساب",
+      defaultOpen: false,
+      items: [
+        { label: "اشتراک‌ها", icon: CreditCard, href: "#" },
+        { label: "مصرف", icon: Zap, href: "#" },
+        { label: "فاکتورها", icon: Receipt, href: "#" },
+      ],
+    },
+    {
+      title: "گزارش‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "گزارش‌های ذخیره‌شده", icon: FileText, href: "#" },
+        { label: "خروجی‌ها", icon: Download, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "مریم الیس",
+    email: "morgan.ellis@northwind.app",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+  },
+};
+
+/** Highlights for the welcome line (growth + revenue health). */
+const dashboardHighlights = {
+  signupsThisWeek: 86,
+  trialsEndingSoon: 14,
+} as const;
+
+const headerNotificationItems = [
+  {
+    id: "1",
+    title: "پرداخت دریافت شد",
+    body: "شرکت آکمه فاکتور ۱۰۴۲ را (۲٬۴۰۰ دلار) پرداخت کرد.",
+    time: "۲ دقیقه پیش",
+  },
+  {
+    id: "2",
+    title: "هشدار سقف صندلی",
+    body: "نورث‌ویند به ۹۰٪ صندلی‌های مجاز رسیده است.",
+    time: "۱ ساعت پیش",
+  },
+  {
+    id: "3",
+    title: "پایان دوره آزمایشی",
+    body: "۳ فضای کاری ظرف ۴۸ ساعت دوره آزمایشی‌شان تمام می‌شود.",
+    time: "۳ ساعت پیش",
+  },
+  {
+    id: "4",
+    title: "گزارش هفتگی آماده است",
+    body: "خلاصه MRR هفته گذشته در دسترس است.",
+    time: "دیروز",
+  },
+] as const;
+
+const unreadNotificationCount = headerNotificationItems.length;
+
+const statsData: StatItem[] = [
+  {
+    title: "درآمد ماهانه (درآمد ماهانه تکرارشونده)",
+    previousValue: 148_230.4,
+    value: 189_540.75,
+    changePercent: 27.86,
+    isPositive: true,
+    icon: CircleDollarSign,
+    format: "currency",
+  },
+  {
+    title: "کاربران فعال ماهانه",
+    previousValue: 45_890,
+    value: 52_340,
+    changePercent: 14.06,
+    isPositive: true,
+    icon: Users,
+    format: "number",
+  },
+  {
+    title: "مشتریان پرداخت‌کننده",
+    previousValue: 1_842,
+    value: 2_047,
+    changePercent: 11.13,
+    isPositive: true,
+    icon: Building2,
+    format: "number",
+  },
+  {
+    title: "درآمد ماهانه تکرارشونده از دست‌رفته",
+    previousValue: 11_234.56,
+    value: 9_847.23,
+    changePercent: 12.35,
+    isPositive: true,
+    icon: TrendingDown,
+    format: "currency",
+  },
+];
+
+const channelRevenueData = [
+  {
+    month: monthLabel(0),
+    starter: 18_200,
+    pro: 28_640,
+    enterprise: 31_850,
+    addOns: 10_520,
+  },
+  {
+    month: monthLabel(1),
+    starter: 17_410,
+    pro: 29_450,
+    enterprise: 33_720,
+    addOns: 9_380,
+  },
+  {
+    month: monthLabel(2),
+    starter: 19_840,
+    pro: 30_920,
+    enterprise: 34_240,
+    addOns: 8_900,
+  },
+  {
+    month: monthLabel(3),
+    starter: 18_970,
+    pro: 31_880,
+    enterprise: 35_910,
+    addOns: 10_140,
+  },
+  {
+    month: monthLabel(4),
+    starter: 20_620,
+    pro: 32_510,
+    enterprise: 36_680,
+    addOns: 11_290,
+  },
+  {
+    month: monthLabel(5),
+    starter: 21_190,
+    pro: 33_340,
+    enterprise: 38_620,
+    addOns: 11_740,
+  },
+];
+
+const fullYearData = [
+  { month: monthLabel(0), thisYear: 41_280, prevYear: 38_450 },
+  { month: monthLabel(1), thisYear: 37_920, prevYear: 44_680 },
+  { month: monthLabel(2), thisYear: 52_140, prevYear: 41_230 },
+  { month: monthLabel(3), thisYear: 45_890, prevYear: 47_520 },
+  { month: monthLabel(4), thisYear: 57_640, prevYear: 43_910 },
+  { month: monthLabel(5), thisYear: 41_580, prevYear: 51_240 },
+  { month: monthLabel(6), thisYear: 54_720, prevYear: 46_880 },
+  { month: monthLabel(7), thisYear: 48_310, prevYear: 52_690 },
+  { month: monthLabel(8), thisYear: 61_050, prevYear: 49_420 },
+  { month: monthLabel(9), thisYear: 53_880, prevYear: 57_910 },
+  { month: monthLabel(10), thisYear: 66_420, prevYear: 52_340 },
+  { month: monthLabel(11), thisYear: 70_890, prevYear: 60_760 },
+];
+
+/**
+ * Weekly buckets for “This month” total revenue (same unit scale as `fullYearData` months).
+ * Sums match March vs February `thisYear` in `fullYearData` so MTD stays below full-year total.
+ */
+const revenueMonthTimelineData = [
+  { label: "هفته ۱", current: 12_600, previous: 9_200 },
+  { label: "هفته ۲", current: 13_050, previous: 9_600 },
+  { label: "هفته ۳", current: 13_200, previous: 9_450 },
+  { label: "هفته ۴", current: 13_290, previous: 9_670 },
+];
+
+const chartDates = Array.from({ length: 28 }, (_, index) =>
+  new Intl.DateTimeFormat("fa-IR", { day: "numeric", month: "short" }).format(
+    new Date(2025, 1, index + 1),
+  ),
+);
+
+const aovValues = [
+  687, 918, 763, 1036, 824, 1174, 719, 983, 1116, 742, 957, 1083, 704, 938,
+  1194, 862, 778, 1157, 827, 1094, 976, 764, 1253, 883, 1138, 963, 1216, 1077,
+];
+
+const aovData = chartDates.map((date, index) => ({
+  date,
+  value: aovValues[index],
+}));
+
+const chartDates90 = Array.from(
+  { length: 90 },
+  (_, i) => `روز ${(i + 1).toLocaleString("fa-IR")}`,
+);
+const aovValues90 = Array.from({ length: 90 }, (_, i) => {
+  const base = aovValues[i % aovValues.length];
+  return Math.round(base + ((i * 19) % 47) - 23);
+});
+const aovData90 = chartDates90.map((date, index) => ({
+  date,
+  value: aovValues90[index],
+}));
+const aovAverage90 =
+  aovValues90.reduce((total, value) => total + value, 0) / aovValues90.length;
+
+const aovAverage =
+  aovValues.reduce((total, value) => total + value, 0) / aovValues.length;
+
+const averageSalesThisMonth = [
+  6380, 7240, 6820, 7360, 7930, 8170, 7580, 7030, 7820, 8470, 8320, 7880, 7630,
+  7180, 7970, 8760, 8360, 8230, 8580, 8970, 8720, 9070, 9470, 9820, 9960, 10180,
+  9770, 10340,
+];
+
+const averageSalesLastMonth = [
+  5620, 5970, 5920, 6180, 6430, 6970, 6620, 6280, 6530, 7170, 7360, 7030, 6770,
+  6630, 6920, 7380, 7080, 7020, 7280, 7580, 7420, 7760, 8170, 8470, 8680, 8870,
+  8580, 8940,
+];
+
+const averageSalesData = chartDates.map((date, index) => ({
+  date,
+  thisMonth: averageSalesThisMonth[index],
+  lastMonth: averageSalesLastMonth[index],
+}));
+
+type PlanMixRow = {
+  name: string;
+  value: number;
+  color: string;
+};
+
+const channelMixBase: PlanMixRow[] = [
+  { name: "رایگان", value: 44.2, color: palette.primary },
+  {
+    name: "حرفه‌ای",
+    value: 28.6,
+    color: `color-mix(in oklch, var(--primary) 80%, ${mixBase})`,
+  },
+  {
+    name: "سازمانی",
+    value: 19.8,
+    color: `color-mix(in oklch, var(--primary) 60%, ${mixBase})`,
+  },
+  {
+    name: "تیمی",
+    value: 7.4,
+    color: `color-mix(in oklch, var(--primary) 42%, ${mixBase})`,
+  },
+];
+
+const channelMixByWindow: Record<"7d" | "28d" | "90d", PlanMixRow[]> = {
+  "7d": [
+    { ...channelMixBase[0], value: 41.2 },
+    { ...channelMixBase[1], value: 29.4 },
+    { ...channelMixBase[2], value: 20.1 },
+    { ...channelMixBase[3], value: 9.3 },
+  ],
+  "28d": channelMixBase,
+  "90d": [
+    { ...channelMixBase[0], value: 46.8 },
+    { ...channelMixBase[1], value: 26.2 },
+    { ...channelMixBase[2], value: 18.9 },
+    { ...channelMixBase[3], value: 8.1 },
+  ],
+};
+
+// ============================================================================
+// Chart Configs
+// ============================================================================
+
+const revenueFlowChartConfig = {
+  thisYear: { label: "امسال", color: palette.primary },
+  prevYear: { label: "سال قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const revenueMonthChartConfig = {
+  current: { label: "این ماه", color: palette.primary },
+  previous: { label: "ماه قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const aovChartConfig = {
+  value: { label: "ARPU", color: palette.primary },
+  reference: { label: "میانگین", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const averageSalesChartConfig = {
+  thisMonth: { label: "این ماه", color: palette.primary },
+  lastMonth: { label: "ماه قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const channelChartConfig = {
+  starter: { label: "پایه", color: palette.primary },
+  pro: { label: "حرفه‌ای", theme: palette.secondary },
+  enterprise: { label: "سازمانی", theme: palette.tertiary },
+  addOns: { label: "افزونه‌ها", theme: palette.quaternary },
+} satisfies ChartConfig;
+
+const channelMixChartConfig = {
+  free: { label: "رایگان", color: palette.primary },
+  pro: { label: "حرفه‌ای", theme: palette.secondary },
+  enterprise: { label: "سازمانی", theme: palette.tertiary },
+  team: { label: "تیمی", theme: palette.quaternary },
+} satisfies ChartConfig;
+
+// ============================================================================
+// Sidebar Components
+// ============================================================================
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title} asChild>
+          <a
+            href={logo.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="min-w-0"
+          >
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={logo.src}
+                alt={logo.alt}
+                width={24}
+                height={24}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            <div className="flex min-w-0 flex-col gap-0.5 leading-none">
+              <span className="truncate font-medium">{logo.title}</span>
+              <span className="truncate text-xs text-muted-foreground">
+                {logo.description}
+              </span>
+            </div>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  const userAvatar = (
+    <Avatar className="size-8 rounded-lg">
+      <AvatarImage src={user.avatar} alt={user.name} />
+      <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
+    </Avatar>
+  );
+
+  const userInfo = (
+    <div className="grid flex-1 text-start text-sm leading-tight">
+      <span className="truncate font-medium">{user.name}</span>
+      <span className="truncate text-xs text-muted-foreground">
+        {user.email}
+      </span>
+    </div>
+  );
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              {userAvatar}
+              {userInfo}
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                {userAvatar}
+                {userInfo}
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+// ============================================================================
+// Dashboard Header
+// ============================================================================
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <LayoutDashboard className="size-5" aria-hidden="true" />
+      <h1 className="text-base font-medium">داشبورد</h1>
+
+      <div className="ms-auto flex items-center gap-2">
+        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
+          <Search
+            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            name="header-search"
+            inputMode="search"
+            autoComplete="off"
+            aria-label="جستجو در داشبورد"
+            placeholder="جستجوی کاربران، فضاهای کاری…"
+            className="h-9 w-full pe-14 ps-9 text-sm"
+          />
+          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 rounded-md border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
+            {"\u2318"}
+            {"\u00a0"}K
+          </kbd>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="relative size-9"
+              aria-label={`اعلان‌ها، ${unreadNotificationCount.toLocaleString("fa-IR")} خوانده‌نشده`}
+            >
+              <Bell className="size-4" aria-hidden="true" />
+              <span className="absolute -top-1 -end-1 flex size-[18px] items-center justify-center rounded-full bg-red-600 text-[10px] leading-none font-semibold text-white ring-2 ring-background">
+                {unreadNotificationCount.toLocaleString("fa-IR")}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-80 sm:w-96">
+            <DropdownMenuLabel className="text-base font-medium">
+              اعلان‌ها
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {headerNotificationItems.map((item) => (
+              <DropdownMenuItem
+                key={item.id}
+                className="cursor-default flex-col items-start gap-1 py-3"
+                onSelect={(event: Event) => event.preventDefault()}
+              >
+                <span className="font-medium text-foreground">
+                  {item.title}
+                </span>
+                <span className="text-xs leading-snug font-normal text-muted-foreground">
+                  {item.body}
+                </span>
+                <span className="text-[10px] text-muted-foreground/80">
+                  {item.time}
+                </span>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="justify-center text-center font-medium">
+              علامت‌گذاری همه به‌عنوان خوانده‌شده
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+};
+
+// ============================================================================
+// Welcome Section
+// ============================================================================
+
+const WelcomeSection = () => {
+  const [inviteOpen, setInviteOpen] = React.useState(false);
+  const [inviteEmail, setInviteEmail] = React.useState("");
+
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
+      <p className="hidden text-sm text-muted-foreground lg:block lg:text-base">
+        <span className="font-medium text-foreground">
+          {dashboardHighlights.signupsThisWeek.toLocaleString("fa-IR")} ثبت‌نام
+        </span>{" "}
+        این هفته ·{" "}
+        <span className="font-medium text-foreground">
+          {dashboardHighlights.trialsEndingSoon.toLocaleString("fa-IR")} دوره
+          آزمایشی
+        </span>{" "}
+        در ۷ روز آینده منقضی می‌شود
+      </p>
+
+      <div className="flex flex-wrap items-center gap-2 sm:ms-auto sm:gap-3 lg:ms-0">
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-2 sm:h-9"
+          aria-label="خروجی"
+        >
+          <Download className="size-4" aria-hidden="true" />
+          <span className="hidden sm:inline">خروجی</span>
+        </Button>
+        <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+          <DialogTrigger asChild>
+            <Button
+              size="sm"
+              className="h-8 gap-2 sm:h-9"
+              aria-label="دعوت کاربر"
+            >
+              <UserPlus className="size-4" aria-hidden="true" />
+              <span className="hidden sm:inline">دعوت</span>
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>دعوت افراد</DialogTitle>
+              <DialogDescription>
+                دعوت‌نامه را با ایمیل ارسال کنید. آن‌ها لینک پیوستن به فضای
+                کاری شما را دریافت می‌کنند.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-2">
+              <div className="grid gap-2">
+                <Label htmlFor="dashboard-invite-email">ایمیل</Label>
+                <Input
+                  id="dashboard-invite-email"
+                  type="email"
+                  name="invite-email"
+                  autoComplete="email"
+                  placeholder="colleague@company.com"
+                  value={inviteEmail}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setInviteEmail(e.target.value)
+                  }
+                />
+              </div>
+            </div>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type="button" variant="outline">
+                  انصراف
+                </Button>
+              </DialogClose>
+              <Button
+                type="button"
+                onClick={() => {
+                  setInviteOpen(false);
+                  setInviteEmail("");
+                }}
+              >
+                ارسال دعوت
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// Stats Cards
+// ============================================================================
+
+const StatsCards = () => {
+  return (
+    <div className="grid grid-cols-2 gap-3 rounded-xl border bg-card p-4 sm:gap-4 sm:p-5 lg:grid-cols-4 lg:gap-6 lg:p-6">
+      {statsData.map((stat, index) => {
+        const formatter =
+          stat.format === "currency" ? currencyFormatter : numberFormatter;
+
+        return (
+          <div key={stat.title} className="flex items-start">
+            <div className="flex-1 space-y-1 sm:space-y-2 lg:space-y-3">
+              <div className="flex items-center gap-1.5 text-muted-foreground sm:gap-2">
+                <stat.icon className="size-3.5 sm:size-4" aria-hidden="true" />
+                <span className="truncate text-[10px] font-medium sm:text-xs lg:text-sm">
+                  {stat.title}
+                </span>
+              </div>
+              <p className="hidden text-[10px] text-muted-foreground/70 tabular-nums sm:block sm:text-xs">
+                {formatter.format(stat.previousValue)} ماه قبل
+              </p>
+              <p
+                className={cn(
+                  "text-xl leading-tight font-semibold tracking-tight sm:text-xl lg:text-[28px]",
+                  numericMonoClass,
+                )}
+              >
+                {formatter.format(stat.value)}
+              </p>
+              <div className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[10px] sm:text-xs">
+                {stat.isPositive ? (
+                  <ArrowUpRight
+                    className="size-3 shrink-0 text-emerald-600 sm:size-3.5"
+                    aria-hidden="true"
+                  />
+                ) : (
+                  <ArrowDownRight
+                    className="size-3 shrink-0 text-red-600 sm:size-3.5"
+                    aria-hidden="true"
+                  />
+                )}
+                <span
+                  className={cn(
+                    "whitespace-nowrap tabular-nums",
+                    stat.isPositive ? "text-emerald-600" : "text-red-600",
+                  )}
+                >
+                  {stat.isPositive ? "+" : "-"}
+                  {Math.round(stat.changePercent).toLocaleString("fa-IR")}٪
+                </span>
+                <span className="whitespace-nowrap text-muted-foreground">
+                  نسبت به ماه قبل
+                </span>
+              </div>
+            </div>
+            {index < statsData.length - 1 && (
+              <div className="mx-4 hidden h-full w-px bg-border lg:block xl:mx-6" />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+// ============================================================================
+// Channel Revenue Chart
+// ============================================================================
+
+function ChannelTooltip({
+  active,
+  payload,
+  label,
+}: TooltipContentProps) {
+  if (!active || !payload?.length) return null;
+
+  const total = payload.reduce(
+    (sum, entry) => sum + Number(entry.value ?? 0),
+    0,
+  );
+
+  return (
+    <div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
+      <p className="mb-1.5 text-xs font-medium text-foreground">{label}</p>
+      <div className="space-y-1">
+        {payload.map((entry) => {
+          const dataKey = String(
+            entry.dataKey ?? "",
+          ) as keyof typeof channelChartConfig;
+          const label =
+            channelChartConfig[dataKey]?.label ?? entry.name ?? dataKey;
+          return (
+            <div key={`${entry.dataKey ?? entry.name ?? label}`} className="flex items-center gap-2">
+              <div
+                className="size-2 rounded-full"
+                style={{ backgroundColor: String(entry.color) }}
+              />
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {label}:
+              </span>
+              <span className="text-[10px] font-medium text-foreground tabular-nums sm:text-xs">
+                {compactCurrencyFormatter.format(Number(entry.value))}
+              </span>
+            </div>
+          );
+        })}
+        <div className="border-t border-border pt-1">
+          <span className="text-[10px] font-medium text-foreground tabular-nums sm:text-xs">
+            جمع: {compactCurrencyFormatter.format(total)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ChannelRevenueChart = () => {
+  const [mrrRange, setMrrRange] = React.useState<"3m" | "6m" | "ytd">("6m");
+
+  const mrrChartData = React.useMemo(() => {
+    if (mrrRange === "3m") return channelRevenueData.slice(-3);
+    if (mrrRange === "ytd") return channelRevenueData.slice(0, 4);
+    return channelRevenueData;
+  }, [mrrRange]);
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-col rounded-xl border bg-card xl:w-[410px]">
+      <div className="flex min-h-14 shrink-0 flex-col gap-2 border-b px-4 py-2 sm:flex-row sm:items-center sm:justify-between sm:px-5">
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 shrink-0 sm:size-8"
+            aria-label="درآمد ماهانه تکرارشونده بر اساس پلن"
+          >
+            <BarChart3
+              className="size-4 text-muted-foreground sm:size-[18px]"
+              aria-hidden="true"
+            />
+          </Button>
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            درآمد ماهانه تکرارشونده بر اساس پلن
+          </h2>
+        </div>
+        <Select
+          value={mrrRange}
+          onValueChange={(v: string) => setMrrRange(v as "3m" | "6m" | "ytd")}
+        >
+          <SelectTrigger
+            size="sm"
+            className="h-8 w-full text-xs sm:w-[148px]"
+            aria-label="بازه زمانی درآمد ماهانه تکرارشونده"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent align="end" position="popper">
+            <SelectItem value="3m">۳ ماه اخیر</SelectItem>
+            <SelectItem value="6m">۶ ماه اخیر</SelectItem>
+            <SelectItem value="ytd">از ابتدای سال</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 p-4 sm:p-5">
+        <div className="flex w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 sm:gap-x-5">
+          {[
+            { label: channelChartConfig.starter.label, color: palette.primary },
+            { label: channelChartConfig.pro.label, color: palette.secondary.light },
+            {
+              label: channelChartConfig.enterprise.label,
+              color: palette.tertiary.light,
+            },
+            { label: channelChartConfig.addOns.label, color: palette.quaternary.light },
+          ].map((item) => (
+            <div key={item.label} className="flex items-center gap-1.5">
+              <div
+                className="size-2 rounded-full sm:size-2.5"
+                style={{ backgroundColor: item.color }}
+              />
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {item.label}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex w-full justify-center">
+          <div className="h-[240px] w-full max-w-[min(100%,380px)] min-w-0 sm:h-[280px]">
+            <ChartContainer
+              config={channelChartConfig}
+              className="h-full w-full"
+            >
+              <BarChart
+                layout="vertical"
+                data={mrrChartData}
+                barSize={24}
+                margin={{ top: 8, right: 12, bottom: 8, left: 8 }}
+              >
+                <XAxis
+                  type="number"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={chartCurrencyTickProps}
+                  tickFormatter={(v) => compactCurrencyFormatter.format(v)}
+                />
+                <YAxis
+                  type="category"
+                  dataKey="month"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10 }}
+                  width={36}
+                />
+                <Tooltip content={ChannelTooltip} cursor={{ fillOpacity: 0.05 }} />
+                <Bar
+                  dataKey="starter"
+                  stackId="channel"
+                  fill="var(--color-starter)"
+                  radius={[4, 0, 0, 4]}
+                />
+                <Bar
+                  dataKey="pro"
+                  stackId="channel"
+                  fill="var(--color-pro)"
+                  radius={[0, 0, 0, 0]}
+                />
+                <Bar
+                  dataKey="enterprise"
+                  stackId="channel"
+                  fill="var(--color-enterprise)"
+                  radius={[0, 0, 0, 0]}
+                />
+                <Bar
+                  dataKey="addOns"
+                  stackId="channel"
+                  fill="var(--color-addOns)"
+                  radius={[0, 4, 4, 0]}
+                />
+              </BarChart>
+            </ChartContainer>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// Total Revenue Chart (from Dashboard9)
+// ============================================================================
+
+function RevenueTooltip({
+  active,
+  payload,
+  label,
+  colors,
+  variant,
+  primaryLabel,
+  secondaryLabel,
+  comparisonPhrase,
+}: TooltipContentProps & {
+  colors: { primary: string; secondary: string };
+  variant: "year" | "month";
+  primaryLabel: string;
+  secondaryLabel: string;
+  comparisonPhrase: string;
+}) {
+  if (!active || !payload?.length) return null;
+
+  const primaryKey = variant === "year" ? "thisYear" : "current";
+  const secondaryKey = variant === "year" ? "prevYear" : "previous";
+  const primaryVal = payload.find((p) => p.dataKey === primaryKey)?.value ?? 0;
+  const secondaryVal =
+    payload.find((p) => p.dataKey === secondaryKey)?.value ?? 0;
+  const diff = Number(primaryVal) - Number(secondaryVal);
+  const percentage = secondaryVal ? diff / Number(secondaryVal) : 0;
+  const currentYear = new Date().getFullYear().toLocaleString("fa-IR");
+  const formattedDelta = `${diff >= 0 ? "+" : ""}${percentFormatter.format(
+    Math.abs(percentage),
+  )}`;
+
+  const title =
+    variant === "year"
+      ? `${label}, ${currentYear}`
+      : `${label} · ${currentYear}`;
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {title}
+      </p>
+      <div className="space-y-1 sm:space-y-1.5">
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.primary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            {primaryLabel}:
+          </span>
+          <span className="text-[10px] font-medium text-foreground tabular-nums sm:text-sm">
+            {currencyFormatter.format(Number(primaryVal))}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.secondary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            {secondaryLabel}:
+          </span>
+          <span className="text-[10px] font-medium text-foreground tabular-nums sm:text-sm">
+            {currencyFormatter.format(Number(secondaryVal))}
+          </span>
+        </div>
+        <div className="mt-1 border-t border-border pt-1">
+          <span
+            className={cn(
+              "text-[10px] font-medium tabular-nums sm:text-xs",
+              diff >= 0 ? "text-emerald-500" : "text-red-500",
+            )}
+          >
+            {formattedDelta} {comparisonPhrase}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const TotalRevenueChart = () => {
+  const [timeline, setTimeline] = React.useState<"year" | "month">("year");
+
+  const isYear = timeline === "year";
+  const chartData = isYear ? fullYearData : revenueMonthTimelineData;
+  const xKey = isYear ? "month" : "label";
+  const lineKey = isYear ? "thisYear" : "current";
+  const areaKey = isYear ? "prevYear" : "previous";
+  const chartConfig = isYear ? revenueFlowChartConfig : revenueMonthChartConfig;
+  const lineColorVar = isYear
+    ? "ارزش افزوده(--color-thisYear)"
+    : "ارزش افزوده(--color-current)";
+  const areaColorVar = isYear
+    ? "ارزش افزوده(--color-prevYear)"
+    : "ارزش افزوده(--color-previous)";
+
+  const totalRevenue = isYear
+    ? fullYearData.reduce((acc, item) => acc + item.thisYear, 0)
+    : revenueMonthTimelineData.reduce((acc, item) => acc + item.current, 0);
+
+  const legendDotClass = "size-2 rounded-full sm:size-2.5";
+  const primaryLegend = isYear ? "امسال" : "این ماه";
+  const secondaryLegend = isYear ? "سال قبل" : "ماه قبل";
+  const subtitle = isYear
+    ? "امسال در برابر سال قبل"
+    : "این ماه در برابر ماه قبل";
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col rounded-xl border bg-card">
+      <div className="flex min-h-14 flex-col gap-2 border-b px-4 py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:px-5">
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 shrink-0 sm:size-8"
+            aria-label="درآمد کل"
+          >
+            <LineChartIcon
+              className="size-4 text-muted-foreground sm:size-[18px]"
+              aria-hidden="true"
+            />
+          </Button>
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            درآمد کل
+          </h2>
+        </div>
+        <div className="flex min-w-0 flex-nowrap items-center justify-start gap-3 sm:justify-end sm:gap-4">
+          <div className="hidden shrink-0 flex-nowrap items-center gap-3 lg:flex lg:gap-4">
+            <div className="flex items-center gap-1.5 whitespace-nowrap">
+              <div
+                className={legendDotClass}
+                style={{ backgroundColor: palette.primary }}
+              />
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {primaryLegend}
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5 whitespace-nowrap">
+              <div
+                className={legendDotClass}
+                style={{ backgroundColor: palette.secondary.light }}
+              />
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {secondaryLegend}
+              </span>
+            </div>
+          </div>
+          <Select
+            value={timeline}
+            onValueChange={(v: string) => setTimeline(v as "year" | "month")}
+          >
+            <SelectTrigger
+              size="sm"
+              className="h-8 w-[130px] shrink-0 text-xs sm:w-[140px]"
+              aria-label="بازه درآمد کل"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent align="end" position="popper">
+              <SelectItem value="month">این ماه</SelectItem>
+              <SelectItem value="year">امسال</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4 p-4 sm:gap-5 sm:p-5">
+        <div className="flex flex-col gap-1">
+          <p
+            className={cn(
+              "text-xl leading-tight font-semibold tracking-tight sm:text-xl",
+              numericMonoClass,
+            )}
+          >
+            {currencyFormatter.format(totalRevenue)}
+          </p>
+          <p className="text-[10px] tracking-wider text-muted-foreground uppercase sm:text-xs">
+            {subtitle}
+          </p>
+        </div>
+        <div className="h-[200px] w-full min-w-0 sm:h-[240px] lg:h-[280px]">
+          <ChartContainer config={chartConfig} className="h-full w-full">
+            <ComposedChart data={chartData as any[]}>
+              <CartesianGrid strokeDasharray="0" vertical={false} />
+              <XAxis
+                dataKey={xKey}
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+                dy={8}
+              />
+              <YAxis
+                axisLine={false}
+                tickLine={false}
+                tick={{ ...chartCurrencyTickProps, dx: -5 }}
+                tickFormatter={(v) => compactCurrencyFormatter.format(v)}
+                width={40}
+              />
+              <Tooltip
+                content={(props) => (
+                  <RevenueTooltip
+                    {...props}
+                    variant={isYear ? "year" : "month"}
+                    primaryLabel={primaryLegend}
+                    secondaryLabel={secondaryLegend}
+                    comparisonPhrase={
+                      isYear ? "نسبت به سال قبل" : "نسبت به دوره مشابه ماه قبل"
+                    }
+                    colors={{
+                      primary: lineColorVar,
+                      secondary: areaColorVar,
+                    }}
+                  />
+                )}
+                cursor={{ strokeOpacity: 0.2 }}
+              />
+              <Line
+                type="linear"
+                dataKey={lineKey}
+                stroke={lineColorVar}
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                dot={{ fill: lineColorVar, strokeWidth: 0, r: 2 }}
+                activeDot={{ r: 3.5, fill: lineColorVar }}
+              />
+              <Area
+                type="linear"
+                dataKey={areaKey}
+                stroke={areaColorVar}
+                strokeWidth={1.5}
+                strokeOpacity={0.5}
+                fill={areaColorVar}
+                fillOpacity={0.08}
+              />
+            </ComposedChart>
+          </ChartContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// Mini Chart Cards
+// ============================================================================
+
+const standardChartMenuLabels = [
+  "مشاهده جزئیات",
+  "خروجی جدول",
+  "باز کردن در تحلیل‌ها",
+] as const;
+
+type MiniChartCardProps = {
+  title: string;
+  value: string;
+  changePercent: number;
+  isPositive: boolean;
+  helper: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  legend?: React.ReactNode;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+  toolbar?: React.ReactNode;
+  menuLabels?: readonly string[];
+};
+
+const MiniChartCard = ({
+  title,
+  value,
+  changePercent,
+  isPositive,
+  helper,
+  icon: Icon,
+  legend,
+  footer,
+  children,
+  toolbar,
+  menuLabels = standardChartMenuLabels,
+}: MiniChartCardProps) => {
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border bg-card p-4 sm:p-5">
+      <div className="flex min-h-[64px] items-start justify-between gap-2">
+        <div className="flex min-w-0 flex-1 items-start gap-3">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted/40">
+            <Icon className="size-4 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <div className="min-w-0 space-y-1">
+            <p className="text-xs font-medium text-muted-foreground">{title}</p>
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+              <span
+                className={cn(
+                  "text-lg font-semibold text-foreground",
+                  numericMonoClass,
+                )}
+              >
+                {value}
+              </span>
+              <span
+                className={cn(
+                  "flex items-center gap-1 text-xs font-medium tabular-nums",
+                  isPositive ? "text-emerald-600" : "text-red-600",
+                )}
+              >
+                {isPositive ? (
+                  <ArrowUpRight className="size-3" aria-hidden="true" />
+                ) : (
+                  <ArrowDownRight className="size-3" aria-hidden="true" />
+                )}
+                {Math.round(Math.abs(changePercent)).toLocaleString("fa-IR")}٪
+              </span>
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {helper}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {toolbar}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label={`عملیات ${title}`}
+              >
+                <MoreHorizontal className="size-4" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              {menuLabels.map((label) => (
+                <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {legend && (
+        <div className="flex min-h-[20px] items-center gap-4 overflow-x-auto text-[10px] whitespace-nowrap text-muted-foreground sm:text-xs">
+          {legend}
+        </div>
+      )}
+
+      <div className="min-h-[144px] w-full flex-1">{children}</div>
+
+      {footer ? (
+        <div className="min-h-[20px] text-[10px] text-muted-foreground sm:text-xs">
+          {footer}
+        </div>
+      ) : (
+        <div className="flex min-h-[20px] items-center justify-between text-[10px] text-muted-foreground sm:text-xs">
+          <span>{chartDates[0]}</span>
+          <span>{chartDates[chartDates.length - 1]}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const renderActiveShape = (props: unknown) => {
+  const p = props as {
+    cx: number;
+    cy: number;
+    innerRadius: number;
+    outerRadius: number;
+    startAngle: number;
+    endAngle: number;
+    fill: string;
+  };
+  return (
+    <g>
+      <Sector
+        cx={p.cx}
+        cy={p.cy}
+        innerRadius={p.innerRadius}
+        outerRadius={p.outerRadius + 6}
+        startAngle={p.startAngle}
+        endAngle={p.endAngle}
+        fill={p.fill}
+      />
+    </g>
+  );
+};
+
+const MiniChartsSection = () => {
+  const [activeSlice, setActiveSlice] = React.useState<number | null>(null);
+  const [planWindow, setPlanWindow] = React.useState<"7d" | "28d" | "90d">(
+    "28d",
+  );
+  const [arpuRange, setArpuRange] = React.useState<"28d" | "90d">("28d");
+  const [dauWindow, setDauWindow] = React.useState<"14d" | "28d">("28d");
+
+  const planMix = channelMixByWindow[planWindow];
+  const topPlan = planMix.reduce((top, item) =>
+    item.value > top.value ? item : top,
+  );
+
+  const arpuChartData = arpuRange === "90d" ? aovData90 : aovData;
+  const arpuRefAverage = arpuRange === "90d" ? aovAverage90 : aovAverage;
+  const arpuHeadline = Math.round(
+    (arpuRange === "90d" ? aovValues90 : aovValues).reduce((a, b) => a + b, 0) /
+    (arpuRange === "90d" ? aovValues90.length : aovValues.length),
+  );
+
+  const dauChartData = React.useMemo(
+    () => averageSalesData.slice(-(dauWindow === "14d" ? 14 : 28)),
+    [dauWindow],
+  );
+  const dauHeadline = Math.round(
+    dauChartData.reduce((acc, row) => acc + row.thisMonth, 0) /
+    Math.max(dauChartData.length, 1),
+  );
+
+  const planMixCaption =
+    planWindow === "7d"
+      ? "۷ روز اخیر"
+      : planWindow === "90d"
+        ? "۹۰ روز اخیر"
+        : "۲۸ روز اخیر";
+
+  const arpuToolbar = (
+    <Select
+      value={arpuRange}
+      onValueChange={(v: string) => setArpuRange(v as "28d" | "90d")}
+    >
+      <SelectTrigger
+        size="sm"
+        className="h-8 w-[112px] text-xs"
+        aria-label="بازه میانگین درآمد هر کاربر"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent align="end" position="popper">
+        <SelectItem value="28d">۲۸ روز اخیر</SelectItem>
+        <SelectItem value="90d">۹۰ روز اخیر</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+
+  const dauToolbar = (
+    <Select
+      value={dauWindow}
+      onValueChange={(v: string) => setDauWindow(v as "14d" | "28d")}
+    >
+      <SelectTrigger
+        size="sm"
+        className="h-8 w-[104px] text-xs"
+        aria-label="بازه کاربران فعال روزانه"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent align="end" position="popper">
+        <SelectItem value="14d">۱۴ روز اخیر</SelectItem>
+        <SelectItem value="28d">۲۸ روز اخیر</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-3">
+      <MiniChartCard
+        title="ARPU"
+        value={currencyFormatter.format(arpuHeadline)}
+        changePercent={2.4}
+        isPositive
+        helper="نسبت به ماه قبل"
+        icon={CircleDollarSign}
+        toolbar={arpuToolbar}
+        footer={
+          <>
+            {arpuChartData[0]?.date} –{" "}
+            {arpuChartData[arpuChartData.length - 1]?.date}
+          </>
+        }
+      >
+        <ChartContainer config={aovChartConfig} className="h-full w-full">
+          <BarChart data={arpuChartData}>
+            <CartesianGrid strokeDasharray="4 4" vertical={false} />
+            <XAxis dataKey="date" hide />
+            <YAxis hide />
+            <ReferenceLine
+              y={arpuRefAverage}
+              stroke="var(--color-reference)"
+              strokeDasharray="4 4"
+            />
+            <Tooltip
+              content={({ active, payload, label }) => {
+                if (!active || !payload?.length) return null;
+                const value = payload[0].value as number;
+                const diff = value - arpuRefAverage;
+                const diffPercent = Math.round((diff / arpuRefAverage) * 100);
+                return (
+                  <div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
+                    <p className="mb-1 text-xs font-medium text-foreground">
+                      {label}
+                    </p>
+                    <p className="text-sm font-semibold text-foreground tabular-nums">
+                      {currencyFormatter.format(value)}
+                    </p>
+                    <p className="text-[10px] text-muted-foreground">
+                      {diff >= 0 ? "+" : ""}
+                      {diffPercent.toLocaleString("fa-IR")}٪ نسبت به میانگین
+                    </p>
+                  </div>
+                );
+              }}
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <Bar
+              dataKey="value"
+              fill="var(--color-value)"
+              fillOpacity={1}
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </MiniChartCard>
+
+      <MiniChartCard
+        title="کاربران فعال روزانه"
+        value={numberFormatter.format(dauHeadline)}
+        changePercent={1.3}
+        isPositive
+        helper="نسبت به ماه قبل"
+        icon={BarChart3}
+        toolbar={dauToolbar}
+        legend={
+          <>
+            <span className="flex items-center gap-1">
+              <span
+                className="size-2 rounded-full"
+                style={{ backgroundColor: palette.primary }}
+              />
+              {averageSalesChartConfig.thisMonth.label}
+            </span>
+            <span className="flex items-center gap-1">
+              <span
+                className="size-2 rounded-full"
+                style={{ backgroundColor: palette.secondary.light }}
+              />
+              {averageSalesChartConfig.lastMonth.label}
+            </span>
+          </>
+        }
+        footer={
+          <>
+            {dauChartData[0]?.date} –{" "}
+            {dauChartData[dauChartData.length - 1]?.date}
+          </>
+        }
+      >
+        <ChartContainer
+          config={averageSalesChartConfig}
+          className="h-full w-full"
+        >
+          <LineChart data={dauChartData}>
+            <XAxis dataKey="date" hide />
+            <YAxis hide />
+            <Tooltip
+              content={({ active, payload, label }) => {
+                if (!active || !payload?.length) return null;
+                const thisMonth = payload.find((p) => p.dataKey === "thisMonth")
+                  ?.value as number;
+                const lastMonth = payload.find((p) => p.dataKey === "lastMonth")
+                  ?.value as number;
+                const diff = thisMonth - lastMonth;
+                const diffPercent = Math.round((diff / lastMonth) * 100);
+                return (
+                  <div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
+                    <p className="mb-1.5 text-xs font-medium text-foreground">
+                      {label}
+                    </p>
+                    <div className="flex flex-col gap-1">
+                      <div className="flex items-center gap-1.5 text-[10px]">
+                        <span
+                          className="size-2 rounded-full"
+                          style={{ backgroundColor: palette.primary }}
+                        />
+                        <span className="text-muted-foreground">
+                          {averageSalesChartConfig.thisMonth.label}:
+                        </span>
+                        <span className="font-medium text-foreground tabular-nums">
+                          {numberFormatter.format(thisMonth)}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[10px]">
+                        <span
+                          className="size-2 rounded-full"
+                          style={{ backgroundColor: palette.secondary.light }}
+                        />
+                        <span className="text-muted-foreground">
+                          {averageSalesChartConfig.lastMonth.label}:
+                        </span>
+                        <span className="font-medium text-foreground tabular-nums">
+                          {numberFormatter.format(lastMonth)}
+                        </span>
+                      </div>
+                    </div>
+                    <p className="mt-1.5 text-[10px] text-muted-foreground">
+                      {diff >= 0 ? "+" : ""}
+                      {diffPercent.toLocaleString("fa-IR")}٪ تغییر
+                    </p>
+                  </div>
+                );
+              }}
+              cursor={{ strokeOpacity: 0.2 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="thisMonth"
+              stroke="var(--color-thisMonth)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              type="monotone"
+              dataKey="lastMonth"
+              stroke="var(--color-lastMonth)"
+              strokeWidth={2}
+              strokeOpacity={0.5}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </MiniChartCard>
+
+      <div className="flex flex-col gap-3 rounded-xl border bg-card p-4 sm:p-5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-3">
+            <div className="flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted/40">
+              <Layers
+                className="size-4 text-muted-foreground"
+                aria-hidden="true"
+              />
+            </div>
+            <span className="text-sm font-medium">کاربران بر اساس پلن</span>
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            <Select
+              value={planWindow}
+              onValueChange={(v: string) =>
+                setPlanWindow(v as "7d" | "28d" | "90d")
+              }
+            >
+              <SelectTrigger
+                size="sm"
+                className="h-8 w-[118px] text-xs"
+                aria-label="بازه کاربران بر اساس پلن"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent align="end" position="popper">
+                <SelectItem value="7d">۷ روز اخیر</SelectItem>
+                <SelectItem value="28d">۲۸ روز اخیر</SelectItem>
+                <SelectItem value="90d">۹۰ روز اخیر</SelectItem>
+              </SelectContent>
+            </Select>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="عملیات کاربران بر اساس پلن"
+                >
+                  <MoreHorizontal className="size-4" aria-hidden="true" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                {standardChartMenuLabels.map((label) => (
+                  <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <div className="flex flex-1 items-center justify-center gap-4 sm:gap-6">
+          <div className="relative size-[170px] shrink-0 sm:size-[190px]">
+            <ChartContainer
+              config={channelMixChartConfig}
+              className="h-full w-full"
+            >
+              <PieChart>
+                <Pie
+                  data={planMix}
+                  dataKey="value"
+                  nameKey="name"
+                  innerRadius="38%"
+                  outerRadius="68%"
+                  paddingAngle={3}
+                  strokeWidth={0}
+                  {...({
+                    activeIndex: activeSlice !== null ? activeSlice : undefined,
+                  } as any)}
+                  activeShape={renderActiveShape}
+                  onMouseEnter={(_: unknown, index: number) =>
+                    setActiveSlice(index)
+                  }
+                  onMouseLeave={() => setActiveSlice(null)}
+                >
+                  {planMix.map((entry) => (
+                    <Cell key={entry.name} fill={entry.color} />
+                  ))}
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+            <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+              <span className={cn("text-lg font-semibold", numericMonoClass)}>
+                {Math.round(topPlan.value).toLocaleString("fa-IR")}٪
+              </span>
+              <span className="text-[9px] text-muted-foreground">
+                {topPlan.name}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2.5">
+            {planMix.map((item, index) => (
+              <div
+                key={item.name}
+                className={cn(
+                  "flex cursor-pointer items-center gap-2.5 transition-opacity",
+                  activeSlice !== null && activeSlice !== index && "opacity-50",
+                )}
+                onMouseEnter={() => setActiveSlice(index)}
+                onMouseLeave={() => setActiveSlice(null)}
+              >
+                <div
+                  className="h-4 w-1 shrink-0 rounded-sm"
+                  style={{ backgroundColor: item.color }}
+                />
+                <span className="flex-1 text-xs text-muted-foreground">
+                  {item.name}
+                </span>
+                <span className="text-xs font-semibold tabular-nums">
+                  {Math.round(item.value).toLocaleString("fa-IR")}٪
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="text-[10px] text-muted-foreground sm:text-xs">
+          {planMixCaption}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// Dashboard Content
+// ============================================================================
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6"
+    >
+      <WelcomeSection />
+      <StatsCards />
+      <div className="flex flex-col gap-4 sm:gap-6 xl:flex-row xl:items-stretch">
+        <TotalRevenueChart />
+        <ChannelRevenueChart />
+      </div>
+      <MiniChartsSection />
+    </div>
+  );
+};
+
+// ============================================================================
+// Main Dashboard Component
+// ============================================================================
+
+const Dashboard1 = ({ className }: { className?: string }) => {
+  return (
+    <TooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+};
+
+export { Dashboard1 };
diff --git a/blocks/dashboard10.tsx b/blocks/dashboard10.tsx
new file mode 100644
index 0000000..78d102b
--- /dev/null
+++ b/blocks/dashboard10.tsx
@@ -0,0 +1,2080 @@
+"use client";
+
+import {
+  BarChart3,
+  Bell,
+  Box,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  FileText,
+  Globe,
+  LayoutDashboard,
+  LineChart,
+  LogOut,
+  Menu,
+  MessageSquare,
+  Minus,
+  Package,
+  RefreshCw,
+  RotateCcw,
+  Search,
+  Settings,
+  ShoppingCart,
+  Star,
+  Tag,
+  TrendingDown,
+  TrendingUp,
+  Truck,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+  ZAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type ShellData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user: UserData;
+};
+
+type RichMetricStatItem = {
+  title: string;
+  value: number;
+  trendValue: number;
+  footerDelta: number;
+  footerSubtextCount: number;
+};
+
+type DailyMetric = {
+  day: string;
+  orderCount: number;
+  avgOrderValue: number;
+  totalRevenue: number;
+};
+
+type ChannelRevenue = {
+  month: string;
+  online: number;
+  inStore: number;
+  wholesale: number;
+  marketplace: number;
+};
+
+type ActivityEvent = {
+  id: string;
+  type: "order" | "refund" | "stock" | "review" | "shipment";
+  message: string;
+  timestamp: Date;
+};
+
+type OrderStatus = "Processing" | "Shipped" | "Delivered" | "Cancelled";
+
+type Order = {
+  id: string;
+  orderNumber: string;
+  customer: string;
+  total: number;
+  status: OrderStatus;
+  date: string;
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 0,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+});
+
+const trendPercentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  maximumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+
+const shortDateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+});
+
+const timeFormatter = new Intl.DateTimeFormat("fa-IR", {
+  hour: "numeric",
+  minute: "2-digit",
+});
+
+const formatTrendValue = (trendValue: number) => {
+  if (trendValue === 0) return "۰٪";
+  return trendPercentFormatter.format(trendValue / 100);
+};
+
+const orderStatusLabels: Record<OrderStatus, string> = {
+  Processing: "در حال پردازش",
+  Shipped: "ارسال‌شده",
+  Delivered: "تحویل‌شده",
+  Cancelled: "لغوشده",
+};
+
+const mixBase = "transparent";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+const shellData: ShellData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+  },
+  navGroups: [
+    {
+      title: "داشبورد",
+      items: [
+        {
+          label: "نمای کلی",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "بلادرنگ", icon: RefreshCw, href: "#" },
+        { label: "گزارش‌ها", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "سفارش‌ها",
+      items: [
+        { label: "همه سفارش‌ها", icon: ClipboardList, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+        { label: "ارسال", icon: Truck, href: "#" },
+        { label: "تکمیل", icon: Package, href: "#" },
+      ],
+    },
+    {
+      title: "محصولات",
+      items: [
+        {
+          label: "کاتالوگ",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: FileText, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: FileText, href: "#" },
+          ],
+        },
+        { label: "موجودی", icon: Package, href: "#" },
+        { label: "قیمت‌گذاری", icon: Tag, href: "#" },
+      ],
+    },
+    {
+      title: "مشتریان",
+      items: [
+        { label: "همه مشتریان", icon: Users, href: "#" },
+        { label: "بخش‌ها", icon: BarChart3, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      items: [
+        { label: "تحلیل فروش", icon: LineChart, href: "#" },
+        { label: "ترافیک", icon: Globe, href: "#" },
+        { label: "تبدیل", icon: TrendingUp, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "john@acme.store",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+  },
+};
+
+const richMetricStats: RichMetricStatItem[] = [
+  {
+    title: "درآمد کل",
+    value: 1_284_350,
+    trendValue: 8.2,
+    footerDelta: 97_420,
+    footerSubtextCount: 18_450,
+  },
+  {
+    title: "سفارش‌های امروز",
+    value: 342,
+    trendValue: 12.5,
+    footerDelta: 38,
+    footerSubtextCount: 342,
+  },
+  {
+    title: "میانگین ارزش سفارش",
+    value: 127.45,
+    trendValue: -2.3,
+    footerDelta: -3.05,
+    footerSubtextCount: 9_800,
+  },
+  {
+    title: "نرخ تبدیل",
+    value: 3.42,
+    trendValue: 0.8,
+    footerDelta: 0.03,
+    footerSubtextCount: 145_000,
+  },
+];
+
+const dailyMetrics: DailyMetric[] = [
+  { day: "Jan 1", orderCount: 142, avgOrderValue: 89, totalRevenue: 12638 },
+  { day: "Jan 2", orderCount: 198, avgOrderValue: 112, totalRevenue: 22176 },
+  { day: "Jan 3", orderCount: 167, avgOrderValue: 95, totalRevenue: 15865 },
+  { day: "Jan 4", orderCount: 245, avgOrderValue: 78, totalRevenue: 19110 },
+  { day: "Jan 5", orderCount: 289, avgOrderValue: 134, totalRevenue: 38726 },
+  { day: "Jan 6", orderCount: 112, avgOrderValue: 156, totalRevenue: 17472 },
+  { day: "Jan 7", orderCount: 178, avgOrderValue: 102, totalRevenue: 18156 },
+  { day: "Jan 8", orderCount: 234, avgOrderValue: 88, totalRevenue: 20592 },
+  { day: "Jan 9", orderCount: 156, avgOrderValue: 145, totalRevenue: 22620 },
+  { day: "Jan 10", orderCount: 267, avgOrderValue: 110, totalRevenue: 29370 },
+  { day: "Jan 11", orderCount: 189, avgOrderValue: 167, totalRevenue: 31563 },
+  { day: "Jan 12", orderCount: 145, avgOrderValue: 92, totalRevenue: 13340 },
+  { day: "Jan 13", orderCount: 278, avgOrderValue: 125, totalRevenue: 34750 },
+  { day: "Jan 14", orderCount: 201, avgOrderValue: 138, totalRevenue: 27738 },
+  { day: "Jan 15", orderCount: 134, avgOrderValue: 176, totalRevenue: 23584 },
+  { day: "Jan 16", orderCount: 256, avgOrderValue: 99, totalRevenue: 25344 },
+  { day: "Jan 17", orderCount: 187, avgOrderValue: 142, totalRevenue: 26554 },
+  { day: "Jan 18", orderCount: 223, avgOrderValue: 85, totalRevenue: 18955 },
+  { day: "Jan 19", orderCount: 165, avgOrderValue: 118, totalRevenue: 19470 },
+  { day: "Jan 20", orderCount: 298, avgOrderValue: 105, totalRevenue: 31290 },
+  { day: "Jan 21", orderCount: 176, avgOrderValue: 162, totalRevenue: 28512 },
+  { day: "Jan 22", orderCount: 210, avgOrderValue: 94, totalRevenue: 19740 },
+  { day: "Jan 23", orderCount: 243, avgOrderValue: 128, totalRevenue: 31104 },
+  { day: "Jan 24", orderCount: 159, avgOrderValue: 151, totalRevenue: 24009 },
+  { day: "Jan 25", orderCount: 281, avgOrderValue: 87, totalRevenue: 24447 },
+  { day: "Jan 26", orderCount: 195, avgOrderValue: 143, totalRevenue: 27885 },
+  { day: "Jan 27", orderCount: 128, avgOrderValue: 189, totalRevenue: 24192 },
+  { day: "Jan 28", orderCount: 267, avgOrderValue: 96, totalRevenue: 25632 },
+  { day: "Jan 29", orderCount: 214, avgOrderValue: 131, totalRevenue: 28034 },
+  { day: "Jan 30", orderCount: 183, avgOrderValue: 117, totalRevenue: 21411 },
+];
+
+const dayLabelFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+});
+dailyMetrics.forEach((entry, index) => {
+  entry.day = dayLabelFormatter.format(new Date(2025, 0, index + 1));
+});
+
+const monthFormatter = new Intl.DateTimeFormat("fa-IR", { month: "short" });
+const monthLabel = (monthIndex: number) =>
+  monthFormatter.format(new Date(2025, monthIndex, 1));
+
+const channelRevenueData: ChannelRevenue[] = [
+  {
+    month: monthLabel(0),
+    online: 42000,
+    inStore: 18000,
+    wholesale: 12000,
+    marketplace: 8000,
+  },
+  {
+    month: monthLabel(1),
+    online: 38000,
+    inStore: 21000,
+    wholesale: 14000,
+    marketplace: 9500,
+  },
+  {
+    month: monthLabel(2),
+    online: 51000,
+    inStore: 19000,
+    wholesale: 11000,
+    marketplace: 7200,
+  },
+  {
+    month: monthLabel(3),
+    online: 45000,
+    inStore: 22000,
+    wholesale: 15000,
+    marketplace: 10800,
+  },
+  {
+    month: monthLabel(4),
+    online: 58000,
+    inStore: 24000,
+    wholesale: 13000,
+    marketplace: 11500,
+  },
+  {
+    month: monthLabel(5),
+    online: 62000,
+    inStore: 20000,
+    wholesale: 16000,
+    marketplace: 12300,
+  },
+];
+
+const GAP_OFFSET = 2500;
+
+const fullYearData = [
+  {
+    quarter: "س۱ '۲۱",
+    thisYear: 28000,
+    lastYear: -18000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۲ '۲۱",
+    thisYear: 35000,
+    lastYear: -22000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۳ '۲۱",
+    thisYear: 32000,
+    lastYear: -20000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۱ '۲۲",
+    thisYear: 42000,
+    lastYear: -25000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۲ '۲۲",
+    thisYear: 48000,
+    lastYear: -28000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۳ '۲۲",
+    thisYear: 45000,
+    lastYear: -24000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۱ '۲۳",
+    thisYear: 55000,
+    lastYear: -30000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۲ '۲۳",
+    thisYear: 62000,
+    lastYear: -32000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۳ '۲۳",
+    thisYear: 58000,
+    lastYear: -27000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۱ '۲۴",
+    thisYear: 65000,
+    lastYear: -35000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۲ '۲۴",
+    thisYear: 70000,
+    lastYear: -33000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+  {
+    quarter: "س۳ '۲۴",
+    thisYear: 68000,
+    lastYear: -30000,
+    gapUp: GAP_OFFSET,
+    gapDown: -GAP_OFFSET,
+  },
+];
+
+const revenueDomainMax =
+  Math.ceil(
+    Math.max(
+      ...fullYearData.map((entry) =>
+        Math.max(
+          Math.abs(entry.thisYear) + GAP_OFFSET,
+          Math.abs(entry.lastYear) + GAP_OFFSET,
+        ),
+      ),
+    ) / 5000,
+  ) * 5000;
+
+const activityEvents: ActivityEvent[] = [
+  {
+    id: "1",
+    type: "order",
+    message: "سفارش جدید #ORD-4892 توسط مریم J. ثبت شد",
+    timestamp: new Date(2025, 0, 31, 14, 32),
+  },
+  {
+    id: "2",
+    type: "shipment",
+    message: "سفارش #ORD-4888 با FedEx ارسال شد",
+    timestamp: new Date(2025, 0, 31, 13, 15),
+  },
+  {
+    id: "3",
+    type: "review",
+    message: "امتیاز ۵ ستاره برای Wireless Headphones حرفه‌ای",
+    timestamp: new Date(2025, 0, 31, 12, 48),
+  },
+  {
+    id: "4",
+    type: "refund",
+    message: "بازپرداخت سفارش #ORD-4870 انجام شد",
+    timestamp: new Date(2025, 0, 31, 11, 22),
+  },
+  {
+    id: "5",
+    type: "stock",
+    message: "هشدار موجودی کم: USB-C Charger (۱۲ عدد)",
+    timestamp: new Date(2025, 0, 31, 10, 55),
+  },
+  {
+    id: "6",
+    type: "order",
+    message: "سفارش جدید #ORD-4891 توسط Michael C. ثبت شد",
+    timestamp: new Date(2025, 0, 31, 10, 10),
+  },
+  {
+    id: "7",
+    type: "shipment",
+    message: "سفارش #ORD-4885 با موفقیت تحویل شد",
+    timestamp: new Date(2025, 0, 31, 9, 45),
+  },
+  {
+    id: "8",
+    type: "review",
+    message: "امتیاز ۴ ستاره برای Organic Cotton Tee",
+    timestamp: new Date(2025, 0, 31, 9, 20),
+  },
+  {
+    id: "9",
+    type: "stock",
+    message: "هشدار موجودی کم: Yoga Mat Premium (۵ عدد)",
+    timestamp: new Date(2025, 0, 31, 8, 30),
+  },
+  {
+    id: "10",
+    type: "order",
+    message: "سفارش جدید #ORD-4890 توسط Emma W. ثبت شد",
+    timestamp: new Date(2025, 0, 31, 8, 5),
+  },
+  {
+    id: "11",
+    type: "refund",
+    message: "درخواست بازپرداخت برای سفارش #ORD-4862",
+    timestamp: new Date(2025, 0, 31, 7, 40),
+  },
+  {
+    id: "12",
+    type: "shipment",
+    message: "سفارش #ORD-4882 در مسیر تحویل است",
+    timestamp: new Date(2025, 0, 31, 7, 15),
+  },
+];
+
+const activityIcons: Record<
+  ActivityEvent["type"],
+  React.ComponentType<React.SVGProps<SVGSVGElement>>
+> = {
+  order: ShoppingCart,
+  refund: RotateCcw,
+  stock: Package,
+  review: Star,
+  shipment: Truck,
+};
+
+const activityColors: Record<ActivityEvent["type"], string> = {
+  order:
+    "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-900/30",
+  refund: "text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-900/30",
+  stock: "text-amber-600 bg-amber-50 dark:text-amber-400 dark:bg-amber-900/30",
+  review: "text-blue-600 bg-blue-50 dark:text-blue-400 dark:bg-blue-900/30",
+  shipment:
+    "text-violet-600 bg-violet-50 dark:text-violet-400 dark:bg-violet-900/30",
+};
+
+const orderStatuses: OrderStatus[] = [
+  "Processing",
+  "Shipped",
+  "Delivered",
+  "Cancelled",
+];
+
+const statusStyles: Record<OrderStatus, string> = {
+  Processing:
+    "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/20",
+  Shipped:
+    "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20",
+  Delivered:
+    "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/20",
+  Cancelled:
+    "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20",
+};
+
+const orders: Order[] = [
+  {
+    id: "1",
+    orderNumber: "ORD-2025-001",
+    customer: "Sarah Johnson",
+    status: "Delivered",
+    total: 2499.0,
+    date: "2025-01-31",
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-2025-002",
+    customer: "Michael Chen",
+    status: "Shipped",
+    total: 1348.0,
+    date: "2025-01-30",
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-2025-003",
+    customer: "Emma Wilson",
+    status: "Processing",
+    total: 1198.0,
+    date: "2025-01-30",
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-2025-004",
+    customer: "James Rodriguez",
+    status: "Delivered",
+    total: 799.0,
+    date: "2025-01-29",
+  },
+  {
+    id: "5",
+    orderNumber: "ORD-2025-005",
+    customer: "Lisa Park",
+    status: "Cancelled",
+    total: 599.0,
+    date: "2025-01-29",
+  },
+  {
+    id: "6",
+    orderNumber: "ORD-2025-006",
+    customer: "David Kim",
+    status: "Shipped",
+    total: 5498.0,
+    date: "2025-01-28",
+  },
+  {
+    id: "7",
+    orderNumber: "ORD-2025-007",
+    customer: "Anna Martinez",
+    status: "Delivered",
+    total: 1199.0,
+    date: "2025-01-28",
+  },
+  {
+    id: "8",
+    orderNumber: "ORD-2025-008",
+    customer: "Robert Taylor",
+    status: "Processing",
+    total: 1128.0,
+    date: "2025-01-27",
+  },
+  {
+    id: "9",
+    orderNumber: "ORD-2025-009",
+    customer: "Jennifer Lee",
+    status: "Shipped",
+    total: 449.0,
+    date: "2025-01-27",
+  },
+  {
+    id: "10",
+    orderNumber: "ORD-2025-010",
+    customer: "William Brown",
+    status: "Delivered",
+    total: 2199.0,
+    date: "2025-01-26",
+  },
+  {
+    id: "11",
+    orderNumber: "ORD-2025-011",
+    customer: "Sophia Davis",
+    status: "Cancelled",
+    total: 349.0,
+    date: "2025-01-26",
+  },
+  {
+    id: "12",
+    orderNumber: "ORD-2025-012",
+    customer: "Daniel Garcia",
+    status: "Processing",
+    total: 899.0,
+    date: "2025-01-25",
+  },
+  {
+    id: "13",
+    orderNumber: "ORD-2025-013",
+    customer: "Olivia White",
+    status: "Delivered",
+    total: 3250.0,
+    date: "2025-01-25",
+  },
+  {
+    id: "14",
+    orderNumber: "ORD-2025-014",
+    customer: "Thomas Harris",
+    status: "Shipped",
+    total: 742.0,
+    date: "2025-01-24",
+  },
+  {
+    id: "15",
+    orderNumber: "ORD-2025-015",
+    customer: "Rachel Clark",
+    status: "Processing",
+    total: 1875.0,
+    date: "2025-01-24",
+  },
+  {
+    id: "16",
+    orderNumber: "ORD-2025-016",
+    customer: "Kevin Lewis",
+    status: "Delivered",
+    total: 564.0,
+    date: "2025-01-23",
+  },
+  {
+    id: "17",
+    orderNumber: "ORD-2025-017",
+    customer: "Amanda Robinson",
+    status: "Cancelled",
+    total: 2100.0,
+    date: "2025-01-23",
+  },
+  {
+    id: "18",
+    orderNumber: "ORD-2025-018",
+    customer: "Chris Walker",
+    status: "Shipped",
+    total: 1450.0,
+    date: "2025-01-22",
+  },
+  {
+    id: "19",
+    orderNumber: "ORD-2025-019",
+    customer: "Natalie Young",
+    status: "Delivered",
+    total: 890.0,
+    date: "2025-01-22",
+  },
+  {
+    id: "20",
+    orderNumber: "ORD-2025-020",
+    customer: "Brian Allen",
+    status: "Processing",
+    total: 3675.0,
+    date: "2025-01-21",
+  },
+];
+
+const PAGE_SIZE_OPTIONS = [10, 25, 50];
+
+const scatterChartConfig = {
+  scatter: { label: "شاخص‌های روزانه", color: palette.primary },
+} satisfies ChartConfig;
+
+const channelChartConfig = {
+  online: { label: "آنلاین", color: palette.primary },
+  inStore: { label: "حضوری", theme: palette.secondary },
+  wholesale: { label: "عمده‌فروشی", theme: palette.tertiary },
+  marketplace: { label: "مارکت‌پلیس", theme: palette.quaternary },
+} satisfies ChartConfig;
+
+const revenueChartConfig = {
+  thisYear: { label: "امسال", color: palette.primary },
+  lastYear: { label: "سال قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const chartHeaderClass =
+  "flex h-14 items-center justify-between border-b px-4 sm:px-5";
+const chartIconBtnClass = "size-7 sm:size-8";
+const chartIconClass = "size-4 text-muted-foreground sm:size-[18px]";
+const chartTitleClass = "text-sm font-medium text-pretty sm:text-base";
+const tooltipLabelClass = "text-[10px] text-muted-foreground sm:text-xs";
+const tooltipValueClass = "text-[10px] font-medium text-foreground sm:text-xs";
+
+const NavDropdown = ({
+  group,
+  isActive,
+  onSelect,
+}: {
+  group: NavGroup;
+  isActive: boolean;
+  onSelect: () => void;
+}) => {
+  return (
+    <Button
+      variant="ghost"
+      className={cn("gap-1", isActive && "bg-muted")}
+      onClick={onSelect}
+    >
+      {group.title}
+    </Button>
+  );
+};
+
+const SubNav = ({
+  group,
+  activeItem,
+  onSelectItem,
+}: {
+  group: NavGroup;
+  activeItem: NavItem | null;
+  onSelectItem: (item: NavItem) => void;
+}) => {
+  return (
+    <div className="border-b bg-muted/30">
+      <div className="mx-auto flex h-10 w-full max-w-7xl items-center gap-1 px-4 lg:px-6">
+        {group.items.map((item) => {
+          const Icon = item.icon;
+          const isActive = activeItem?.label === item.label;
+          const hasChildren = item.children && item.children.length > 0;
+
+          if (hasChildren) {
+            return (
+              <DropdownMenu key={item.label}>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className={cn(
+                      "h-7 gap-1.5 text-sm",
+                      isActive && "bg-accent text-accent-foreground",
+                    )}
+                  >
+                    <Icon className="size-4" aria-hidden="true" />
+                    {item.label}
+                    <ChevronDown className="size-3" aria-hidden="true" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  {item.children!.map((child) => {
+                    const ChildIcon = child.icon;
+                    return (
+                      <DropdownMenuItem key={child.label} asChild>
+                        <a
+                          href={child.href}
+                          className="flex items-center gap-2"
+                        >
+                          <ChildIcon className="size-4" aria-hidden="true" />
+                          {child.label}
+                        </a>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            );
+          }
+
+          return (
+            <Button
+              key={item.label}
+              variant="ghost"
+              size="sm"
+              className={cn(
+                "h-7 gap-1.5 text-sm",
+                isActive && "bg-accent text-accent-foreground",
+              )}
+              onClick={() => onSelectItem(item)}
+            >
+              <Icon className="size-4" aria-hidden="true" />
+              {item.label}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const MobileNav = ({
+  activeGroupIndex,
+  onSelectGroup,
+}: {
+  activeGroupIndex: number;
+  onSelectGroup: (index: number) => void;
+}) => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          aria-label="باز کردن منوی ناوبری"
+        >
+          <Menu className="size-5" aria-hidden="true" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-72">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <img
+              src={shellData.logo.src}
+              alt={shellData.logo.alt}
+              className="size-6"
+            />
+            {shellData.logo.title}
+          </SheetTitle>
+        </SheetHeader>
+        <nav className="mt-6 flex flex-col gap-4">
+          {shellData.navGroups.map((group, index) => (
+            <div key={group.title}>
+              <button
+                onClick={() => onSelectGroup(index)}
+                className={cn(
+                  "mb-2 text-xs font-medium tracking-wider uppercase",
+                  index === activeGroupIndex
+                    ? "text-foreground"
+                    : "text-muted-foreground",
+                )}
+              >
+                {group.title}
+              </button>
+              {index === activeGroupIndex && (
+                <div className="flex flex-col gap-1">
+                  {group.items.map((item) => {
+                    const Icon = item.icon;
+                    return (
+                      <React.Fragment key={item.label}>
+                        <a
+                          href={item.href}
+                          className={cn(
+                            "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted",
+                            item.isActive && "bg-muted font-medium",
+                          )}
+                        >
+                          <Icon className="size-4" aria-hidden="true" />
+                          {item.label}
+                        </a>
+                        {item.children?.map((child) => {
+                          const ChildIcon = child.icon;
+                          return (
+                            <a
+                              key={child.label}
+                              href={child.href}
+                              className="flex items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm hover:bg-muted"
+                            >
+                              <ChildIcon
+                                className="size-4"
+                                aria-hidden="true"
+                              />
+                              {child.label}
+                            </a>
+                          );
+                        })}
+                      </React.Fragment>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          ))}
+          <div className="mt-auto border-t pt-4">
+            {shellData.footerGroup.items.map((item) => {
+              const Icon = item.icon;
+              return (
+                <a
+                  key={item.label}
+                  href={item.href}
+                  className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-muted"
+                >
+                  <Icon className="size-4" aria-hidden="true" />
+                  {item.label}
+                </a>
+              );
+            })}
+          </div>
+        </nav>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="gap-2 px-2">
+          <Avatar className="size-8">
+            <AvatarImage src={user.avatar} alt={user.name} />
+            <AvatarFallback>
+              {user.name
+                .split(" ")
+                .map((n) => n[0])
+                .join("")}
+            </AvatarFallback>
+          </Avatar>
+          <span className="hidden text-sm font-medium md:inline">
+            {user.name}
+          </span>
+          <ChevronsUpDown
+            className="hidden size-4 md:block"
+            aria-hidden="true"
+          />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium">{user.name}</p>
+            <p className="text-xs text-muted-foreground">{user.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <User className="me-2 size-4" aria-hidden="true" />
+          حساب کاربری
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="me-2 size-4" aria-hidden="true" />
+          خروج
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <h1 className="text-lg font-semibold sm:text-xl">صبح بخیر، جیمز.</h1>
+      <p className="text-sm text-muted-foreground">
+        وضعیت فروشگاه شما در امروز:
+      </p>
+    </div>
+  );
+};
+
+const StatCards = () => {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      {richMetricStats.map((stat) => {
+        const isPositive = stat.trendValue > 0;
+        const isNeutral = stat.trendValue === 0;
+
+        const Icon = isNeutral ? Minus : isPositive ? TrendingUp : TrendingDown;
+
+        const trendClass = isNeutral
+          ? "text-foreground bg-muted"
+          : isPositive
+            ? "text-success border-success/20 bg-success/10"
+            : "text-destructive border-destructive/20 bg-destructive/10";
+
+        const formattedTrend = formatTrendValue(stat.trendValue);
+
+        let formattedValue: string;
+        if (stat.title === "نرخ تبدیل") {
+          formattedValue = `${oneDecimalFormatter.format(stat.value)}٪`;
+        } else if (stat.title === "سفارش‌های امروز") {
+          formattedValue = numberFormatter.format(stat.value);
+        } else {
+          formattedValue = currencyFormatter.format(stat.value);
+        }
+
+        let footerLabel: string;
+        if (stat.title === "نرخ تبدیل") {
+          const deltaPrefix = stat.footerDelta > 0 ? "+" : "";
+          footerLabel = `${deltaPrefix}${oneDecimalFormatter.format(stat.footerDelta)}٪ نسبت به ماه قبل`;
+        } else if (stat.title === "سفارش‌های امروز") {
+          const deltaPrefix = stat.footerDelta > 0 ? "+" : "";
+          footerLabel = `${deltaPrefix}${numberFormatter.format(stat.footerDelta)} نسبت به دیروز`;
+        } else {
+          const deltaPrefix =
+            stat.footerDelta > 0 ? "+" : stat.footerDelta < 0 ? "-" : "";
+          footerLabel = `${deltaPrefix}${currencyFormatter.format(Math.abs(stat.footerDelta))} نسبت به ماه قبل`;
+        }
+
+        const footerSubtext = `بر اساس ${numberFormatter.format(stat.footerSubtextCount)} ${stat.title === "نرخ تبدیل" ? "بازدید" : "سفارش"}`;
+
+        return (
+          <Card key={stat.title} className="@container/card shadow-none">
+            <CardHeader className="flex items-start justify-between gap-2">
+              <div>
+                <CardDescription className="font-medium">
+                  {stat.title}
+                </CardDescription>
+                <CardTitle className="text-xl font-bold @[600px]/card:text-xl @[800px]/card:text-2xll">
+                  {formattedValue}
+                </CardTitle>
+              </div>
+              <span
+                className={cn(
+                  "inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs font-medium",
+                  trendClass,
+                )}
+              >
+                <Icon className="size-3" aria-hidden="true" />
+                {formattedTrend}
+              </span>
+            </CardHeader>
+
+            <CardFooter className="flex-col items-start gap-1 text-sm">
+              <div className="line-clamp-1 flex items-center gap-1.5 font-medium">
+                <span
+                  className={
+                    isNeutral
+                      ? ""
+                      : isPositive
+                        ? "text-success"
+                        : "text-destructive"
+                  }
+                >
+                  {footerLabel}
+                </span>
+                <Icon
+                  className={cn(
+                    "size-3.5",
+                    isNeutral
+                      ? "text-muted-foreground"
+                      : isPositive
+                        ? "text-success"
+                        : "text-destructive",
+                  )}
+                  aria-hidden="true"
+                />
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {footerSubtext}
+              </div>
+            </CardFooter>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};
+
+function ScatterTooltip({ active, payload }: any) {
+  if (!active || !payload?.length) return null;
+  const data = payload[0]?.payload as DailyMetric | undefined;
+  if (!data) return null;
+
+  return (
+    <div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
+      <p className="mb-1.5 text-xs font-medium text-foreground">{data.day}</p>
+      <div className="space-y-1">
+        <div className="flex items-center justify-between gap-4">
+          <span className={tooltipLabelClass}>سفارش‌ها:</span>
+          <span className={tooltipValueClass}>
+            {numberFormatter.format(data.orderCount)}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-4">
+          <span className={tooltipLabelClass}>میانگین سفارش:</span>
+          <span className={tooltipValueClass}>
+            {currencyFormatter.format(data.avgOrderValue)}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-4 border-t border-border pt-1">
+          <span className={tooltipLabelClass}>درآمد:</span>
+          <span className={tooltipValueClass}>
+            {currencyFormatter.format(data.totalRevenue)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const AOVScatterChart = () => {
+  const totalOrders = dailyMetrics.reduce((s, d) => s + d.orderCount, 0);
+  const totalRevenue = dailyMetrics.reduce((s, d) => s + d.totalRevenue, 0);
+  const avgAOV = totalOrders === 0 ? 0 : totalRevenue / totalOrders;
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col rounded-xl border bg-card">
+      <div className={chartHeaderClass}>
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className={chartIconBtnClass}
+            aria-label="میانگین سفارش در برابر حجم سفارش"
+          >
+            <BarChart3 className={chartIconClass} aria-hidden="true" />
+          </Button>
+          <h2 className={chartTitleClass}>میانگین سفارش در برابر حجم</h2>
+        </div>
+        <span className={tooltipLabelClass}>۳۰ روز اخیر</span>
+      </div>
+
+      <div className="flex flex-col gap-4 p-4 sm:gap-5 sm:p-5">
+        <div className="flex items-center gap-6">
+          <div className="flex flex-col gap-1">
+            <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+              {currencyFormatter.format(avgAOV)}
+            </p>
+            <p className="text-[10px] tracking-wider text-muted-foreground uppercase sm:text-xs">
+              میانگین سفارش
+            </p>
+          </div>
+          <div className="w-px self-stretch bg-border" />
+          <div className="flex flex-col gap-1">
+            <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+              {numberFormatter.format(totalOrders)}
+            </p>
+            <p className="text-[10px] tracking-wider text-muted-foreground uppercase sm:text-xs">
+              مجموع سفارش‌ها
+            </p>
+          </div>
+          <div className="w-px self-stretch bg-border" />
+          <div className="flex flex-col gap-1">
+            <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+              {compactCurrencyFormatter.format(totalRevenue)}
+            </p>
+            <p className="text-[10px] tracking-wider text-muted-foreground uppercase sm:text-xs">
+              درآمد کل
+            </p>
+          </div>
+        </div>
+        <div className="h-[240px] w-full min-w-0 sm:h-[280px]">
+          <ChartContainer
+            config={scatterChartConfig}
+            className="aspect-auto h-full w-full"
+          >
+            <ScatterChart margin={{ top: 8, right: 8, bottom: 0, left: 0 }}>
+              <CartesianGrid strokeDasharray="0" />
+              <XAxis
+                type="number"
+                dataKey="orderCount"
+                name="سفارش‌ها"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+              />
+              <YAxis
+                type="number"
+                dataKey="avgOrderValue"
+                name="میانگین سفارش"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+                width={50}
+                tickFormatter={(v) => currencyFormatter.format(v)}
+              />
+              <ZAxis
+                type="number"
+                dataKey="totalRevenue"
+                range={[40, 400]}
+                name="درآمد"
+              />
+              <Tooltip
+                content={<ScatterTooltip />}
+                cursor={{ strokeDasharray: "3 3" }}
+              />
+              <Scatter
+                data={dailyMetrics}
+                fill="var(--color-scatter)"
+                fillOpacity={0.6}
+                strokeWidth={0}
+              />
+            </ScatterChart>
+          </ChartContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function ChannelTooltip({
+  active,
+  payload,
+  label,
+}: any) {
+  if (!active || !payload?.length) return null;
+
+  const total = payload.reduce(
+    (sum: number, entry: any) => sum + Number(entry.value ?? 0),
+    0,
+  );
+
+  return (
+    <div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
+      <p className="mb-1.5 text-xs font-medium text-foreground">{label}</p>
+      <div className="space-y-1">
+        {payload.map((entry: any) => {
+          const dataKey = String(entry.dataKey ?? "");
+          const label =
+            channelChartConfig[dataKey as keyof typeof channelChartConfig]
+              ?.label ?? entry.name ?? dataKey;
+          return (
+            <div key={`${entry.dataKey ?? entry.name ?? label}`} className="flex items-center gap-2">
+              <div
+                className="size-2 rounded-full"
+                style={{ backgroundColor: String(entry.color) }}
+              />
+              <span className={tooltipLabelClass}>{label}:</span>
+              <span className={tooltipValueClass}>
+                {compactCurrencyFormatter.format(Number(entry.value))}
+              </span>
+            </div>
+          );
+        })}
+        <div className="border-t border-border pt-1">
+          <span className={tooltipValueClass}>
+            مجموع: {compactCurrencyFormatter.format(total)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ChannelRevenueChart = () => {
+  return (
+    <div className="flex min-w-0 flex-col rounded-xl border bg-card">
+      <div className={chartHeaderClass}>
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className={chartIconBtnClass}
+            aria-label="درآمد بر اساس کانال"
+          >
+            <BarChart3 className={chartIconClass} aria-hidden="true" />
+          </Button>
+          <h2 className={chartTitleClass}>درآمد بر اساس کانال</h2>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2 p-4 sm:p-5">
+        <div className="flex flex-wrap items-center gap-3 sm:gap-5">
+          {[
+            { label: "آنلاین", color: palette.primary },
+            { label: "حضوری", color: palette.secondary.light },
+            { label: "عمده‌فروشی", color: palette.tertiary.light },
+            { label: "مارکت‌پلیس", color: palette.quaternary.light },
+          ].map((item) => (
+            <div key={item.label} className="flex items-center gap-1.5">
+              <div
+                className="size-2 rounded-full sm:size-2.5"
+                style={{ backgroundColor: item.color }}
+              />
+              <span className={tooltipLabelClass}>{item.label}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="h-[240px] w-full min-w-0 sm:h-[280px]">
+          <ChartContainer config={channelChartConfig} className="h-full w-full">
+            <BarChart
+              layout="vertical"
+              data={channelRevenueData}
+              barSize={24}
+              margin={{ top: 0, right: 0, bottom: 0, left: -9 }}
+            >
+              <XAxis
+                type="number"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+                tickFormatter={(v) => compactCurrencyFormatter.format(v)}
+              />
+              <YAxis
+                type="category"
+                dataKey="month"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+                width={36}
+              />
+              <Tooltip
+                content={<ChannelTooltip />}
+                cursor={{ fillOpacity: 0.05 }}
+              />
+              <Bar
+                dataKey="online"
+                stackId="channel"
+                fill="var(--color-online)"
+                radius={[4, 0, 0, 4]}
+              />
+              <Bar
+                dataKey="inStore"
+                stackId="channel"
+                fill="var(--color-inStore)"
+                radius={[0, 0, 0, 0]}
+              />
+              <Bar
+                dataKey="wholesale"
+                stackId="channel"
+                fill="var(--color-wholesale)"
+                radius={[0, 0, 0, 0]}
+              />
+              <Bar
+                dataKey="marketplace"
+                stackId="channel"
+                fill="var(--color-marketplace)"
+                radius={[0, 4, 4, 0]}
+              />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function RevenueTooltip({
+  active,
+  payload,
+  label,
+}: any) {
+  if (!active || !payload?.length) return null;
+
+  const visiblePayload = payload.filter(
+    (entry: any) => entry.dataKey !== "gapUp" && entry.dataKey !== "gapDown",
+  );
+
+  if (!visiblePayload.length) return null;
+
+  return (
+    <div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
+      <p className="mb-1.5 text-xs font-medium text-foreground">{label}</p>
+      <div className="space-y-1">
+        {visiblePayload.map((entry: any) => {
+          const dataKey = String(entry.dataKey ?? "");
+          const cfgLabel =
+            revenueChartConfig[dataKey as keyof typeof revenueChartConfig]
+              ?.label ?? dataKey;
+          return (
+            <div key={`${entry.dataKey ?? cfgLabel}`} className="flex items-center gap-2">
+              <div
+                className="size-2 rounded-full"
+                style={{ backgroundColor: String(entry.color) }}
+              />
+              <span className={tooltipLabelClass}>{cfgLabel}:</span>
+              <span className={tooltipValueClass}>
+                {currencyFormatter.format(Math.abs(Number(entry.value)))}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const RevenueOverviewChart = () => {
+  const totalThisYear = fullYearData.reduce(
+    (sum, entry) => sum + entry.thisYear,
+    0,
+  );
+  const totalLastYear = fullYearData.reduce(
+    (sum, entry) => sum + Math.abs(entry.lastYear),
+    0,
+  );
+  const changePercent =
+    totalLastYear === 0
+      ? 0
+      : ((totalThisYear - totalLastYear) / totalLastYear) * 100;
+  const isPositive = changePercent >= 0;
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col rounded-xl border bg-card">
+      <div className={chartHeaderClass}>
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className={chartIconBtnClass}
+            aria-label="نمای کلی درآمد"
+          >
+            <BarChart3 className={chartIconClass} aria-hidden="true" />
+          </Button>
+          <h2 className={chartTitleClass}>نمای کلی درآمد</h2>
+        </div>
+        <div className="flex items-center gap-3 sm:gap-5">
+          {[
+            { label: "امسال", color: palette.primary },
+            { label: "سال قبل", color: palette.secondary.light },
+          ].map((item) => (
+            <div key={item.label} className="flex items-center gap-1.5">
+              <div
+                className="size-2 rounded-full sm:size-2.5"
+                style={{ backgroundColor: item.color }}
+              />
+              <span className={tooltipLabelClass}>{item.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4 p-4 sm:gap-5 sm:p-5">
+        <div className="flex flex-col gap-1">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(totalThisYear)}
+          </p>
+          <p
+            className={cn(
+              "text-[10px] tracking-wider uppercase sm:text-xs",
+              isPositive ? "text-emerald-600" : "text-red-600",
+            )}
+          >
+            {isPositive ? "+" : "-"}
+            {Math.abs(changePercent).toLocaleString("fa-IR", {
+              maximumFractionDigits: 1,
+            })}
+            ٪ نسبت به سال قبل
+          </p>
+        </div>
+        <div className="h-[240px] w-full min-w-0 sm:h-[280px]">
+          <ChartContainer config={revenueChartConfig} className="h-full w-full">
+            <BarChart data={fullYearData} stackOffset="sign">
+              <CartesianGrid vertical={false} strokeDasharray="0" />
+              <XAxis
+                dataKey="quarter"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+              />
+              <YAxis
+                orientation="right"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+                width={50}
+                domain={[-revenueDomainMax, revenueDomainMax]}
+                tickCount={9}
+                tickFormatter={(v: number) =>
+                  compactCurrencyFormatter.format(Math.abs(v))
+                }
+              />
+
+              <Tooltip
+                content={<RevenueTooltip />}
+                cursor={{ fillOpacity: 0.05 }}
+              />
+              {/* Invisible spacer pushes thisYear bars above zero line */}
+              <Bar
+                dataKey="gapUp"
+                stackId="revenue"
+                fill="transparent"
+                barSize={22}
+                isAnimationActive={false}
+              />
+              <Bar
+                dataKey="thisYear"
+                stackId="revenue"
+                fill="var(--color-thisYear)"
+                radius={6}
+                barSize={22}
+              />
+              {/* Invisible spacer pushes lastYear bars below zero line */}
+              <Bar
+                dataKey="gapDown"
+                stackId="revenue"
+                fill="transparent"
+                barSize={22}
+                isAnimationActive={false}
+              />
+              <Bar
+                dataKey="lastYear"
+                stackId="revenue"
+                fill="var(--color-lastYear)"
+                fillOpacity={0.4}
+                radius={6}
+                barSize={22}
+              />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ActivityFeed = () => {
+  return (
+    <div className="flex flex-col rounded-xl border bg-card">
+      <div className={chartHeaderClass}>
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className={chartIconBtnClass}
+            aria-label="فعالیت‌های اخیر"
+          >
+            <Bell className={chartIconClass} aria-hidden="true" />
+          </Button>
+          <h2 className={chartTitleClass}>فعالیت‌های اخیر</h2>
+        </div>
+      </div>
+
+      <ScrollArea className="h-[340px] sm:h-[370px]">
+        <div className="divide-y px-4 sm:px-5">
+          {activityEvents.map((event) => {
+            const Icon = activityIcons[event.type];
+            const colorClass = activityColors[event.type];
+
+            return (
+              <div key={event.id} className="flex items-start gap-3 py-3">
+                <div
+                  className={cn(
+                    "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full",
+                    colorClass,
+                  )}
+                >
+                  <Icon className="size-3.5" aria-hidden="true" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="text-xs text-foreground sm:text-sm">
+                    {event.message}
+                  </p>
+                  <p className="mt-0.5 text-[10px] text-muted-foreground sm:text-xs">
+                    {shortDateFormatter.format(event.timestamp)},{" "}
+                    {timeFormatter.format(event.timestamp)}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+const RecentOrdersTable = () => {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState<OrderStatus | "all">(
+    "all",
+  );
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(10);
+  const [isHydrated, setIsHydrated] = React.useState(false);
+
+  // Hydrate from URL on mount
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+
+    const q = params.get("q");
+    if (q) setSearchQuery(q);
+
+    const nextStatus = params.get("status");
+    if (
+      nextStatus &&
+      (nextStatus === "all" ||
+        orderStatuses.includes(nextStatus as OrderStatus))
+    ) {
+      setStatusFilter(nextStatus as OrderStatus | "all");
+    }
+
+    const nextPage = Number(params.get("page"));
+    if (!Number.isNaN(nextPage) && nextPage > 0) {
+      setCurrentPage(nextPage);
+    }
+
+    const nextPageSize = Number(params.get("pageSize"));
+    if (PAGE_SIZE_OPTIONS.includes(nextPageSize)) {
+      setPageSize(nextPageSize);
+    }
+
+    setIsHydrated(true);
+  }, []);
+
+  const filteredOrders = React.useMemo(() => {
+    return orders.filter((order) => {
+      const matchesSearch =
+        order.customer.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesStatus =
+        statusFilter === "all" || order.status === statusFilter;
+      return matchesSearch && matchesStatus;
+    });
+  }, [searchQuery, statusFilter]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredOrders.length / pageSize));
+
+  const paginatedOrders = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredOrders.slice(startIndex, startIndex + pageSize);
+  }, [filteredOrders, currentPage, pageSize]);
+
+  // Reset page when filters change
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, statusFilter, pageSize]);
+
+  // Sync state to URL
+  React.useEffect(() => {
+    if (!isHydrated || typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+
+    if (searchQuery) {
+      params.set("q", searchQuery);
+    } else {
+      params.delete("q");
+    }
+
+    if (statusFilter !== "all") {
+      params.set("status", statusFilter);
+    } else {
+      params.delete("status");
+    }
+
+    if (currentPage > 1) {
+      params.set("page", String(currentPage));
+    } else {
+      params.delete("page");
+    }
+
+    if (pageSize !== PAGE_SIZE_OPTIONS[0]) {
+      params.set("pageSize", String(pageSize));
+    } else {
+      params.delete("pageSize");
+    }
+
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [searchQuery, statusFilter, currentPage, pageSize, isHydrated]);
+
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  const startRow = filteredOrders.length ? (currentPage - 1) * pageSize + 1 : 0;
+  const endRow = Math.min(currentPage * pageSize, filteredOrders.length);
+
+  return (
+    <div className="rounded-xl border bg-card">
+      <div className="flex flex-col gap-3 px-4 pt-4 sm:flex-row sm:items-center sm:gap-4 sm:px-6">
+        <div className="flex items-center gap-2">
+          <h2 className={chartTitleClass}>سفارش‌های اخیر</h2>
+          <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
+            {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex flex-1 flex-wrap items-center gap-2 sm:justify-end">
+          <div className="relative flex-1 sm:flex-none">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <Input
+              placeholder="جستجوی سفارش‌ها…"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              name="order-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی سفارش‌ها"
+              className="h-8 w-full ps-9 text-sm sm:h-9 sm:w-[200px]"
+            />
+          </div>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 gap-1.5 sm:h-9 sm:gap-2"
+                aria-label="فیلتر بر اساس وضعیت"
+              >
+                <span className="text-xs sm:text-sm">
+                  {statusFilter === "all"
+                    ? "همه وضعیت‌ها"
+                    : orderStatusLabels[statusFilter]}
+                </span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[180px]">
+              <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem
+                checked={statusFilter === "all"}
+                onCheckedChange={() => setStatusFilter("all")}
+              >
+                همه وضعیت‌ها
+              </DropdownMenuCheckboxItem>
+              {orderStatuses.map((status) => (
+                <DropdownMenuCheckboxItem
+                  key={status}
+                  checked={statusFilter === status}
+                  onCheckedChange={() => setStatusFilter(status)}
+                >
+                  {orderStatusLabels[status]}
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      <div className="px-4 pt-3 pb-4 sm:px-6">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className="text-xs font-medium text-muted-foreground sm:text-sm">
+                مرجع سفارش
+              </TableHead>
+              <TableHead className="text-xs font-medium text-muted-foreground sm:text-sm">
+                مشتری
+              </TableHead>
+              <TableHead className="hidden text-xs font-medium text-muted-foreground sm:table-cell sm:text-sm">
+                تاریخ
+              </TableHead>
+              <TableHead className="text-xs font-medium text-muted-foreground sm:text-sm">
+                مجموع
+              </TableHead>
+              <TableHead className="text-xs font-medium text-muted-foreground sm:text-sm">
+                وضعیت
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedOrders.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={5}
+                  className="h-20 text-center text-sm text-muted-foreground"
+                >
+                  سفارشی یافت نشد.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedOrders.map((order) => (
+                <TableRow key={order.id}>
+                  <TableCell className="text-xs font-medium text-muted-foreground sm:text-sm">
+                    {order.orderNumber}
+                  </TableCell>
+                  <TableCell className="text-xs text-foreground sm:text-sm">
+                    {order.customer}
+                  </TableCell>
+                  <TableCell className="hidden text-xs text-muted-foreground sm:table-cell sm:text-sm">
+                    {shortDateFormatter.format(new Date(order.date))}
+                  </TableCell>
+                  <TableCell className="text-xs text-foreground tabular-nums sm:text-sm">
+                    {currencyFormatter.format(order.total)}
+                  </TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        "inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium sm:text-xs",
+                        statusStyles[order.status],
+                      )}
+                    >
+                      {orderStatusLabels[order.status]}
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-col items-center justify-between gap-3 border-t px-4 py-3 sm:flex-row sm:px-6">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground sm:text-sm">
+          <span className="hidden sm:inline">ردیف در هر صفحه:</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={(value) => setPageSize(Number(value))}
+          >
+            <SelectTrigger className="h-8 w-[70px]" aria-label="ردیف در هر صفحه">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PAGE_SIZE_OPTIONS.map((size) => (
+                <SelectItem key={size} value={size.toString()}>
+                  {size.toLocaleString("fa-IR")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span>
+            {filteredOrders.length === 0
+              ? "۰"
+              : `${startRow.toLocaleString("fa-IR")}-${endRow.toLocaleString("fa-IR")}`}{" "}
+            از {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه قبل"
+          >
+            <ChevronLeft className="size-3.5 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه بعد"
+          >
+            <ChevronRight className="size-3.5 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="mx-auto w-full max-w-7xl flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6"
+    >
+      <DashboardHeader />
+      <StatCards />
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-[3fr_2fr]">
+        <RevenueOverviewChart />
+        <AOVScatterChart />
+      </div>
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-[2fr_1fr]">
+        <ChannelRevenueChart />
+        <ActivityFeed />
+      </div>
+      <RecentOrdersTable />
+    </div>
+  );
+};
+
+const getDefaultActiveItem = (group: NavGroup): NavItem | null => {
+  return group.items.find((item) => item.isActive) || group.items[0] || null;
+};
+
+const Dashboard10 = ({ className }: { className?: string }) => {
+  const [activeGroupIndex, setActiveGroupIndex] = React.useState(0);
+  const activeGroup = shellData.navGroups[activeGroupIndex];
+
+  const [activeItem, setActiveItem] = React.useState<NavItem | null>(
+    getDefaultActiveItem(activeGroup),
+  );
+
+  // Update activeItem when group changes
+  React.useEffect(() => {
+    setActiveItem(getDefaultActiveItem(activeGroup));
+  }, [activeGroupIndex]);
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("flex min-h-svh flex-col bg-background", className)}
+    >
+      <a
+        href="#dashboard-main"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+      >
+        رفتن به محتوای اصلی
+      </a>
+
+      <header className="sticky top-0 z-50 bg-background">
+        <div className="border-b">
+          <div className="mx-auto flex h-14 w-full max-w-7xl items-center gap-4 px-4 lg:px-6">
+            <MobileNav
+              activeGroupIndex={activeGroupIndex}
+              onSelectGroup={setActiveGroupIndex}
+            />
+
+            <a href="#" className="flex items-center gap-2">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={shellData.logo.src}
+                  alt={shellData.logo.alt}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <span className="font-semibold">{shellData.logo.title}</span>
+            </a>
+
+            <nav
+              className="ms-4 hidden items-center gap-1 md:flex"
+              aria-label="ناوبری اصلی"
+            >
+              {shellData.navGroups.map((group, index) => (
+                <NavDropdown
+                  key={group.title}
+                  group={group}
+                  isActive={index === activeGroupIndex}
+                  onSelect={() => setActiveGroupIndex(index)}
+                />
+              ))}
+            </nav>
+
+            <div className="ms-auto flex items-center gap-2">
+              <div className="relative hidden md:block">
+                <Search
+                  className="absolute top-1/2 start-2.5 size-4 -translate-y-1/2 text-muted-foreground"
+                  aria-hidden="true"
+                />
+                <Input
+                  type="search"
+                  placeholder="جستجو…"
+                  className="h-9 w-64 ps-8"
+                  aria-label="جستجو"
+                />
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="md:hidden"
+                aria-label="جستجو"
+              >
+                <Search className="size-5" aria-hidden="true" />
+              </Button>
+              <NavUser user={shellData.user} />
+            </div>
+          </div>
+        </div>
+
+        <SubNav
+          group={activeGroup}
+          activeItem={activeItem}
+          onSelectItem={setActiveItem}
+        />
+      </header>
+
+      <DashboardContent />
+    </div>
+  );
+};
+
+export { Dashboard10 };
diff --git a/blocks/dashboard11.tsx b/blocks/dashboard11.tsx
new file mode 100644
index 0000000..e15c442
--- /dev/null
+++ b/blocks/dashboard11.tsx
@@ -0,0 +1,1591 @@
+"use client";
+
+import { useMotionValueEvent, useSpring } from "framer-motion";
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  BarChart3,
+  Bell,
+  Box,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Facebook,
+  Globe,
+  HelpCircle,
+  Instagram,
+  LayoutDashboard,
+  LogOut,
+  MessageSquare,
+  Package,
+  RotateCcw,
+  Search,
+  Settings,
+  Truck,
+  Twitter,
+  User,
+  Users,
+  Wallet,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ReferenceLine,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarInset,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Tooltip as ShadTooltip,
+  TooltipContent as ShadTooltipContent,
+  TooltipProvider as ShadTooltipProvider,
+  TooltipTrigger as ShadTooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Color Palette
+// ============================================================================
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+  quinary: {
+    light: `color-mix(in oklch, var(--primary) 25%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 30%, ${mixBase})`,
+  },
+};
+
+const getRetentionColor = (percent: number): string => {
+  const mix = Math.max(5, Math.round(percent * 0.85));
+  return `color-mix(in oklch, var(--primary) ${mix}%, ${mixBase})`;
+};
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  user?: UserData;
+};
+
+type KPIStat = {
+  title: string;
+  value: number;
+  change: number;
+  format: "currency" | "percent" | "number";
+};
+
+type Segment = {
+  name: string;
+  value: number;
+  color: string;
+  change: number;
+};
+
+type Channel = {
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  name: string;
+  count: number;
+  change: number;
+};
+
+type CohortRow = {
+  label: string;
+  retentionByMonth: number[];
+};
+
+// ============================================================================
+// Formatters
+// ============================================================================
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 2,
+});
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  maximumFractionDigits: 1,
+});
+
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+});
+
+const monthFormatter = new Intl.DateTimeFormat("fa-IR", { month: "short" });
+
+const monthLabel = (monthIndex: number) =>
+  monthFormatter.format(new Date(2025, monthIndex, 1));
+
+const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  weekday: "short",
+});
+
+const formatChangePercent = (change: number, signed = true) => {
+  const formatted = Math.abs(change).toLocaleString("fa-IR", {
+    minimumFractionDigits: change % 1 !== 0 ? 1 : 0,
+    maximumFractionDigits: 1,
+  });
+  if (!signed) return `${formatted}٪`;
+  return `${change >= 0 ? "+" : "-"}${formatted}٪`;
+};
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+function useHoverHighlight<T extends string | number>() {
+  const [active, setActive] = React.useState<T | null>(null);
+
+  const handleHover = React.useCallback((value: T | null) => {
+    setActive(value);
+  }, []);
+
+  return { active, handleHover };
+}
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+    description: "داشبورد",
+  },
+  navGroups: [
+    {
+      title: "اصلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+      ],
+    },
+    {
+      title: "کاتالوگ",
+      defaultOpen: true,
+      items: [
+        {
+          label: "محصولات",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: Package, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
+            { label: "موجودی", icon: Package, href: "#" },
+          ],
+        },
+        { label: "ارسال", icon: Truck, href: "#" },
+      ],
+    },
+    {
+      title: "مشتریان",
+      defaultOpen: false,
+      items: [
+        { label: "همه مشتریان", icon: Users, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "نمای کلی", icon: Globe, href: "#" },
+        { label: "گزارش‌ها", icon: BarChart3, href: "#" },
+        { label: "مالی", icon: Wallet, href: "#" },
+      ],
+    },
+    {
+      title: "تنظیمات",
+      defaultOpen: false,
+      items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+    },
+  ],
+  user: {
+    name: "علی رضایی",
+    email: "john@acmestore.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+  },
+};
+
+const kpiStats: KPIStat[] = [
+  { title: "درآمد کل", value: 485000, change: -12.5, format: "currency" },
+  { title: "نرخ تبدیل", value: 18.5, change: -12.5, format: "percent" },
+  { title: "کل سفارش‌ها", value: 92, change: 25, format: "number" },
+  { title: "مشتریان فعال", value: 38, change: 25, format: "number" },
+  { title: "مشتریان جدید", value: 12, change: 25, format: "number" },
+];
+
+const monthlyRevenueData = [
+  { month: monthLabel(0), revenue: 72000 },
+  { month: monthLabel(1), revenue: 128000 },
+  { month: monthLabel(2), revenue: 103000 },
+  { month: monthLabel(3), revenue: 176000 },
+  { month: monthLabel(4), revenue: 230000 },
+  { month: monthLabel(5), revenue: 142000 },
+  { month: monthLabel(6), revenue: 310000 },
+  { month: monthLabel(7), revenue: 640000 },
+  { month: monthLabel(8), revenue: 410000 },
+  { month: monthLabel(9), revenue: 210000 },
+  { month: monthLabel(10), revenue: 98000 },
+  { month: monthLabel(11), revenue: 260000 },
+];
+
+const segments: Segment[] = [
+  { name: "سازمانی", value: 1074, color: palette.primary, change: 3.2 },
+  { name: "کسب‌وکار متوسط", value: 836, color: palette.secondary.light, change: -1.5 },
+  {
+    name: "شخصی",
+    value: 478,
+    color: palette.tertiary.light,
+    change: 5.8,
+  },
+];
+
+const customerTrendData = [
+  { day: weekdayFormatter.format(new Date(2025, 0, 6)), customers: 1850 },
+  { day: weekdayFormatter.format(new Date(2025, 0, 7)), customers: 2150 },
+  { day: weekdayFormatter.format(new Date(2025, 0, 8)), customers: 1720 },
+  { day: weekdayFormatter.format(new Date(2025, 0, 9)), customers: 2480 },
+  { day: weekdayFormatter.format(new Date(2025, 0, 10)), customers: 1890 },
+  { day: weekdayFormatter.format(new Date(2025, 0, 11)), customers: 2320 },
+  { day: weekdayFormatter.format(new Date(2025, 0, 12)), customers: 2388 },
+];
+
+const channelsData: Channel[] = [
+  { icon: Facebook, name: "فیس‌بوک", count: 2341, change: 25 },
+  { icon: Twitter, name: "توییتر", count: 1231, change: -25 },
+  { icon: Globe, name: "گوگل", count: 1123, change: -25 },
+  { icon: Instagram, name: "اینستاگرام", count: 125, change: 25 },
+];
+
+const cohortRetentionData: CohortRow[] = [
+  { label: monthLabel(5), retentionByMonth: [100, 65, 51, 43, 37, 32, 28] },
+  { label: monthLabel(6), retentionByMonth: [100, 71, 59, 50, 43, 37] },
+  { label: monthLabel(7), retentionByMonth: [100, 73, 60, 51, 44] },
+  { label: monthLabel(8), retentionByMonth: [100, 69, 55, 46] },
+  { label: monthLabel(9), retentionByMonth: [100, 75, 62] },
+  { label: monthLabel(10), retentionByMonth: [100, 67] },
+  { label: monthLabel(11), retentionByMonth: [100] },
+];
+
+const storeVisitsData = [
+  { date: monthLabel(0), visits: 245 },
+  { date: monthLabel(1), visits: 654 },
+  { date: monthLabel(2), visits: 387 },
+  { date: monthLabel(3), visits: 521 },
+  { date: monthLabel(4), visits: 412 },
+  { date: monthLabel(5), visits: 598 },
+  { date: monthLabel(6), visits: 312 },
+  { date: monthLabel(7), visits: 743 },
+  { date: monthLabel(8), visits: 489 },
+  { date: monthLabel(9), visits: 476 },
+  { date: monthLabel(10), visits: 687 },
+  { date: monthLabel(11), visits: 198 },
+];
+
+// ============================================================================
+// Chart Configs
+// ============================================================================
+
+const revenueChartConfig = {
+  revenue: {
+    label: "درآمد",
+    color: palette.secondary.light,
+  },
+} satisfies ChartConfig;
+
+const visitsChartConfig = {
+  visits: {
+    label: "بازدید",
+    color: palette.secondary.light,
+  },
+} satisfies ChartConfig;
+
+const customerChartConfig = {
+  customers: {
+    label: "مشتریان",
+    color: palette.secondary.light,
+  },
+} satisfies ChartConfig;
+
+// ============================================================================
+// Sidebar Components
+// ============================================================================
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              width={24}
+              height={24}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton
+                  asChild
+                  isActive={child.isActive}
+                  className={
+                    child.isActive
+                      ? "relative overflow-visible before:absolute before:top-0 before:-start-2.5 before:z-10 before:h-full before:w-px before:bg-primary before:content-['']"
+                      : ""
+                  }
+                >
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  const userAvatar = (
+    <Avatar className="size-8 rounded-none">
+      <AvatarImage src={user.avatar} alt={user.name} />
+      <AvatarFallback className="rounded-none">{initials}</AvatarFallback>
+    </Avatar>
+  );
+
+  const userInfo = (
+    <div className="grid flex-1 text-start text-sm leading-tight">
+      <span className="truncate font-medium">{user.name}</span>
+      <span className="truncate text-xs text-muted-foreground">
+        {user.email}
+      </span>
+    </div>
+  );
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              {userAvatar}
+              {userInfo}
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-none"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                {userAvatar}
+                {userInfo}
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <ScrollArea className="h-full">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+// ============================================================================
+// Dashboard Header
+// ============================================================================
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <LayoutDashboard className="size-5" aria-hidden="true" />
+      <h1 className="text-base font-medium text-pretty">داشبورد</h1>
+
+      <div className="ms-auto flex items-center gap-2">
+        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
+          <Search
+            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            name="header-search"
+            inputMode="search"
+            autoComplete="off"
+            aria-label="جستجوی داشبورد"
+            placeholder="جستجو…"
+            className="h-9 w-full pe-14 ps-9 text-sm"
+          />
+          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
+            {"\u2318"}
+            {"\u00a0"}K
+          </kbd>
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="اعلان‌ها"
+        >
+          <Bell className="size-4" aria-hidden="true" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="راهنما"
+        >
+          <HelpCircle className="size-4" aria-hidden="true" />
+        </Button>
+      </div>
+    </header>
+  );
+};
+
+// ============================================================================
+// Dashboard Content Components
+// ============================================================================
+
+// Growth section component (vertical layout for SalesRevenueCard header)
+const GrowthSection = ({
+  label,
+  change,
+}: {
+  label: string;
+  change: number;
+}) => {
+  const isPositive = change >= 0;
+  return (
+    <div className="flex items-center gap-1.5 border bg-muted/30 px-2 py-1">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span
+        className={cn(
+          "font-mono",
+          "flex items-center gap-0.5 text-xs font-medium",
+          isPositive ? "text-emerald-600" : "text-red-600",
+        )}
+      >
+        {isPositive ? (
+          <ArrowUpRight className="size-3" aria-hidden="true" />
+        ) : (
+          <ArrowDownRight className="size-3" aria-hidden="true" />
+        )}
+        {formatChangePercent(change)}
+      </span>
+    </div>
+  );
+};
+
+// KPI Stat Card
+const KPIStatCard = ({ stat }: { stat: KPIStat }) => {
+  const isPositive = stat.change >= 0;
+
+  const formatValue = (value: number, format: KPIStat["format"]) => {
+    switch (format) {
+      case "currency":
+        return currencyFormatter.format(value);
+      case "percent":
+        return percentFormatter.format(value / 100);
+      case "number":
+        return numberFormatter.format(value);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-1 border bg-card p-4">
+      <span className="text-xs text-muted-foreground">{stat.title}</span>
+      <div className="flex items-baseline gap-2">
+        <span className={cn("font-mono", "text-xl font-semibold")}>
+          {formatValue(stat.value, stat.format)}
+        </span>
+      </div>
+      <div className="flex items-center gap-1 text-xs">
+        {isPositive ? (
+          <ArrowUpRight
+            className="size-3.5 text-emerald-600"
+            aria-hidden="true"
+          />
+        ) : (
+          <ArrowDownRight
+            className="size-3.5 text-red-600"
+            aria-hidden="true"
+          />
+        )}
+        <span
+          className={cn(
+            "font-mono",
+            isPositive ? "text-emerald-600" : "text-red-600",
+          )}
+        >
+          {formatChangePercent(stat.change)}
+        </span>
+        <span className="text-muted-foreground">نسبت به ماه قبل</span>
+      </div>
+    </div>
+  );
+};
+
+// KPI Stats Row
+const KPIStatsRow = () => {
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+      {kpiStats.map((stat) => (
+        <KPIStatCard key={stat.title} stat={stat} />
+      ))}
+    </div>
+  );
+};
+
+// ============================================================================
+// Animated Reference Line Components
+// ============================================================================
+
+interface CustomReferenceLabelProps {
+  viewBox?: { x?: number; y?: number };
+  value: number;
+}
+
+const CustomReferenceLabel: React.FC<CustomReferenceLabelProps> = (props) => {
+  const { viewBox, value } = props;
+  const y = viewBox?.y ?? 0;
+
+  const width = React.useMemo(() => {
+    const characterWidth = 8;
+    const padding = 10;
+    return value.toString().length * characterWidth + padding;
+  }, [value]);
+
+  return (
+    <>
+      <rect
+        x={0}
+        y={y - 9}
+        width={width}
+        height={18}
+        fill="var(--secondary-foreground)"
+        rx={0}
+      />
+      <text
+        className="font-mono"
+        fontWeight={600}
+        x={6}
+        y={y + 4}
+        fill="var(--primary-foreground)"
+      >
+        {compactCurrencyFormatter.format(value)}
+      </text>
+    </>
+  );
+};
+
+// Revenue Bar Chart Tooltip
+function RevenueBarTooltip({
+  active,
+  payload,
+  label,
+}: any) {
+  if (!active || !payload?.length) return null;
+
+  const value = payload[0]?.value || 0;
+
+  return (
+    <div className="border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}
+      </p>
+      <div className="flex items-center gap-1.5 sm:gap-2">
+        <div className="size-2 rounded-full bg-primary sm:size-2.5" />
+        <span className="text-[10px] text-muted-foreground sm:text-sm">
+          درآمد:
+        </span>
+        <span
+          className={cn(
+            "font-mono",
+            "text-[10px] font-medium text-foreground sm:text-sm",
+          )}
+        >
+          {currencyFormatter.format(Number(value))}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function CustomersAreaTooltip({
+  active,
+  payload,
+  label,
+}: any) {
+  if (!active || !payload?.length) return null;
+
+  const value = Number(payload[0]?.value ?? 0);
+  const pointIndex = customerTrendData.findIndex(
+    (entry) => entry.day === label,
+  );
+  const previousValue =
+    pointIndex > 0 ? customerTrendData[pointIndex - 1].customers : value;
+  const delta =
+    previousValue === 0 ? 0 : ((value - previousValue) / previousValue) * 100;
+  const isPositive = delta >= 0;
+
+  return (
+    <div className="border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}
+      </p>
+      <div className="flex items-center gap-1.5 sm:gap-2">
+        <div
+          className="size-2 rounded-full sm:size-2.5"
+          style={{ backgroundColor: "var(--color-customers)" }}
+        />
+        <span className="text-[10px] text-muted-foreground sm:text-sm">
+          مشتریان:
+        </span>
+        <span
+          className={cn(
+            "font-mono",
+            "text-[10px] font-medium text-foreground sm:text-sm",
+          )}
+        >
+          {numberFormatter.format(value)}
+        </span>
+      </div>
+      <p
+        className={cn(
+          "font-mono",
+          "mt-1.5 text-[10px] sm:text-xs",
+          isPositive ? "text-emerald-600" : "text-red-600",
+        )}
+      >
+        {formatChangePercent(delta)}
+      </p>
+    </div>
+  );
+}
+
+// Sales Revenue Card with Animated Value Line Bar Chart
+const SalesRevenueCard = () => {
+  const changePercent = 8.2;
+
+  // Track which bar is being hovered
+  const [activeIndex, setActiveIndex] = React.useState<number | undefined>(
+    undefined,
+  );
+
+  // Calculate the currently tracked value (hovered bar or max bar)
+  const maxValueData = React.useMemo(() => {
+    if (activeIndex !== undefined) {
+      return {
+        index: activeIndex,
+        value: monthlyRevenueData[activeIndex].revenue,
+      };
+    }
+    return monthlyRevenueData.reduce(
+      (max, data, index) =>
+        data.revenue > max.value ? { index, value: data.revenue } : max,
+      { index: 0, value: 0 },
+    );
+  }, [activeIndex]);
+
+  const isPositive = changePercent >= 0;
+
+  // Spring animation for the reference line value
+  const valueSpring = useSpring(maxValueData.value, {
+    stiffness: 100,
+    damping: 20,
+  });
+  const [springyValue, setSpringyValue] = React.useState(maxValueData.value);
+
+  useMotionValueEvent(valueSpring, "change", (latest) => {
+    setSpringyValue(Number(latest.toFixed(0)));
+  });
+
+  React.useEffect(() => {
+    valueSpring.set(maxValueData.value);
+  }, [maxValueData.value, valueSpring]);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 border bg-card p-4 sm:gap-5 sm:p-5 lg:col-span-2">
+      <div className="flex items-start justify-between gap-4">
+        {/* Left: Title + Value + Change */}
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">درآمد فروش</span>
+          <span
+            className={cn(
+              "font-mono",
+              "text-xl font-semibold tabular-nums sm:text-3xl",
+            )}
+          >
+            {currencyFormatter.format(maxValueData.value)}
+          </span>
+          <div className="flex items-center gap-1">
+            <span
+              className={cn(
+                "font-mono",
+                "text-sm font-medium",
+                isPositive ? "text-emerald-600" : "text-red-600",
+              )}
+            >
+              {formatChangePercent(changePercent)}
+            </span>
+            {isPositive ? (
+              <ArrowUpRight
+                className="size-3.5 text-emerald-600"
+                aria-hidden="true"
+              />
+            ) : (
+              <ArrowDownRight
+                className="size-3.5 text-red-600"
+                aria-hidden="true"
+              />
+            )}
+            <span className="text-sm text-muted-foreground">نسبت به ماه قبل</span>
+          </div>
+        </div>
+
+        {/* Right: Growth sections */}
+        <div className="flex flex-wrap gap-2">
+          <GrowthSection label="۴ هفته" change={11.6} />
+          <GrowthSection label="۱۳ هفته" change={7.9} />
+          <GrowthSection label="۱۲ ماه" change={-3.4} />
+        </div>
+      </div>
+
+      <div className="h-[180px] w-full min-w-0 sm:h-[220px]">
+        <ChartContainer
+          config={revenueChartConfig}
+          className="aspect-auto h-full w-full"
+        >
+          <BarChart
+            data={monthlyRevenueData}
+            onMouseLeave={() => setActiveIndex(undefined)}
+          >
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis hide />
+            <Tooltip
+              content={<RevenueBarTooltip />}
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <Bar dataKey="revenue" radius={0}>
+              {monthlyRevenueData.map((_, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  className="duration-200"
+                  opacity={index === maxValueData.index ? 1 : 0.2}
+                  fill={
+                    index === maxValueData.index
+                      ? palette.secondary.light
+                      : palette.tertiary.light
+                  }
+                  onMouseEnter={() => setActiveIndex(index)}
+                />
+              ))}
+            </Bar>
+            <ReferenceLine
+              opacity={0.4}
+              y={springyValue}
+              stroke="var(--secondary-foreground)"
+              strokeWidth={1}
+              strokeDasharray="3 3"
+              label={<CustomReferenceLabel value={maxValueData.value} />}
+            />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+// Segmentation Card (Conversion Rate Style)
+const SegmentationCard = () => {
+  const [activeCustomerIndex, setActiveCustomerIndex] = React.useState<
+    number | undefined
+  >(undefined);
+
+  const trackedCustomerPoint = React.useMemo(() => {
+    if (
+      activeCustomerIndex !== undefined &&
+      activeCustomerIndex >= 0 &&
+      activeCustomerIndex < customerTrendData.length
+    ) {
+      return {
+        index: activeCustomerIndex,
+        ...customerTrendData[activeCustomerIndex],
+      };
+    }
+
+    const fallbackIndex = customerTrendData.length - 1;
+    return { index: fallbackIndex, ...customerTrendData[fallbackIndex] };
+  }, [activeCustomerIndex]);
+
+  const previousCustomerPoint = React.useMemo(() => {
+    const previousIndex = Math.max(0, trackedCustomerPoint.index - 1);
+    return customerTrendData[previousIndex];
+  }, [trackedCustomerPoint.index]);
+
+  const totalCustomers = trackedCustomerPoint.customers;
+  const totalChange =
+    previousCustomerPoint.customers === 0
+      ? 0
+      : ((totalCustomers - previousCustomerPoint.customers) /
+        previousCustomerPoint.customers) *
+      100;
+  const comparisonLabel =
+    trackedCustomerPoint.index === 0
+      ? "نسبت به ابتدای هفته"
+      : `نسبت به ${previousCustomerPoint.day}`;
+  const isPositive = totalChange >= 0;
+
+  return (
+    <div className="flex min-w-0 flex-col gap-4 border bg-card p-4 sm:gap-5 sm:p-5">
+      {/* Header - matches Sales Revenue layout */}
+      <div className="flex items-start justify-between gap-4">
+        {/* Left: Label + Value + Change */}
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">کل مشتریان</span>
+          <span
+            className={cn(
+              "font-mono",
+              "text-xl font-semibold tabular-nums sm:text-3xl",
+            )}
+          >
+            {numberFormatter.format(totalCustomers)}
+          </span>
+          <span
+            className={cn(
+              "font-mono",
+              "text-[11px] tracking-wide text-muted-foreground uppercase",
+            )}
+          >
+            {trackedCustomerPoint.day}
+          </span>
+          <div className="flex items-center gap-1">
+            <span
+              className={cn(
+                "font-mono",
+                "text-sm font-medium",
+                isPositive ? "text-emerald-600" : "text-red-600",
+              )}
+            >
+              {formatChangePercent(totalChange)}
+            </span>
+            {isPositive ? (
+              <ArrowUpRight
+                className="size-3.5 text-emerald-600"
+                aria-hidden="true"
+              />
+            ) : (
+              <ArrowDownRight
+                className="size-3.5 text-red-600"
+                aria-hidden="true"
+              />
+            )}
+            <span className="text-sm text-muted-foreground">
+              {comparisonLabel}
+            </span>
+          </div>
+        </div>
+
+        {/* Right: Details button */}
+        <Button variant="outline" size="sm" className="h-7 px-2 text-xs">
+          جزئیات
+        </Button>
+      </div>
+
+      {/* Segment metrics rows */}
+      <div className="flex flex-col gap-3">
+        {segments.map((segment) => {
+          const isPositive = segment.change >= 0;
+          return (
+            <div
+              key={segment.name}
+              className="flex items-center justify-between"
+            >
+              <span className="text-sm text-muted-foreground">
+                {segment.name}
+              </span>
+              <div className="flex items-center gap-4">
+                <span
+                  className={cn(
+                    "font-mono",
+                    "text-sm font-medium tabular-nums",
+                  )}
+                >
+                  {numberFormatter.format(segment.value)}
+                </span>
+                <div
+                  className={cn(
+                    "font-mono",
+                    "flex items-center gap-0.5 text-xs",
+                    isPositive ? "text-emerald-600" : "text-red-600",
+                  )}
+                >
+                  {isPositive ? (
+                    <ArrowUpRight className="size-3" aria-hidden="true" />
+                  ) : (
+                    <ArrowDownRight className="size-3" aria-hidden="true" />
+                  )}
+                  {formatChangePercent(segment.change)}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Area chart */}
+      <div className="h-[120px] w-full">
+        <ChartContainer config={customerChartConfig} className="h-full w-full">
+          <AreaChart
+            data={customerTrendData}
+            onMouseMove={(state) => {
+              if (typeof state.activeTooltipIndex === "number") {
+                setActiveCustomerIndex(state.activeTooltipIndex);
+              }
+            }}
+            onMouseLeave={() => setActiveCustomerIndex(undefined)}
+          >
+            <defs>
+              <linearGradient id="customerGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-customers)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-customers)"
+                  stopOpacity={0.05}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              vertical={true}
+              horizontal={true}
+              stroke="hsl(var(--muted-foreground) / 0.3)"
+            />
+            <XAxis
+              dataKey="day"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={5}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 9 }}
+              width={30}
+              tickFormatter={(v) => compactNumberFormatter.format(v)}
+            />
+            <Tooltip
+              content={<CustomersAreaTooltip />}
+              cursor={{
+                stroke: "var(--color-customers)",
+                strokeDasharray: "3 3",
+                strokeOpacity: 0.35,
+              }}
+            />
+            <ReferenceLine
+              x={trackedCustomerPoint.day}
+              stroke="var(--color-customers)"
+              strokeDasharray="3 3"
+              strokeOpacity={0.2}
+            />
+            <Area
+              type="linear"
+              dataKey="customers"
+              stroke="var(--color-customers)"
+              strokeWidth={1}
+              fill="url(#customerGradient)"
+              activeDot={{
+                r: 3.5,
+                fill: "var(--color-customers)",
+                strokeWidth: 0,
+              }}
+            />
+          </AreaChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+// User Retention Cohort Heatmap Card
+const UserRetentionCard = () => {
+  const maxMonths = 7;
+
+  return (
+    <div className="flex min-w-0 flex-col gap-4 border bg-card p-4 sm:gap-5 sm:p-5">
+      {/* Header */}
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">نگهداشت کاربر</span>
+          <span
+            className={cn("font-mono", "text-xl font-semibold sm:text-3xl")}
+          >
+            {percentFormatter.format(0.24)}
+          </span>
+          <div className="flex items-center gap-1">
+            <span
+              className={cn(
+                "font-mono",
+                "text-sm font-medium text-emerald-600",
+              )}
+            >
+              {formatChangePercent(2.0)}
+            </span>
+            <ArrowUpRight
+              className="size-3.5 text-emerald-600"
+              aria-hidden="true"
+            />
+          </div>
+        </div>
+        <Button variant="outline" size="sm" className="h-7 px-2 text-xs">
+          جزئیات
+        </Button>
+      </div>
+
+      {/* Heatmap */}
+      <div className="flex flex-col gap-px">
+        {cohortRetentionData.map((cohort) => (
+          <div
+            key={cohort.label}
+            className="grid gap-px"
+            style={{
+              gridTemplateColumns: `repeat(${maxMonths}, minmax(0, 1fr))`,
+            }}
+          >
+            {cohort.retentionByMonth.map((value, monthIndex) => (
+              <ShadTooltipProvider key={monthIndex}>
+                <ShadTooltip>
+                  <ShadTooltipTrigger asChild>
+                    <div
+                      className="h-5 cursor-default transition-shadow hover:ring-1 hover:ring-foreground/20"
+                      style={{
+                        backgroundColor: getRetentionColor(value),
+                      }}
+                    />
+                  </ShadTooltipTrigger>
+                  <ShadTooltipContent>
+                    <span className={cn("font-mono", "text-xs")}>
+                      {cohort.label}  ماه{" "}
+                      {(monthIndex + 1).toLocaleString("fa-IR")}:{" "}
+                      {value.toLocaleString("fa-IR")}٪
+                    </span>
+                  </ShadTooltipContent>
+                </ShadTooltip>
+              </ShadTooltipProvider>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* X-axis labels */}
+      <div
+        className="grid gap-px"
+        style={{
+          gridTemplateColumns: `repeat(${maxMonths}, minmax(0, 1fr))`,
+        }}
+      >
+        {Array.from({ length: maxMonths }, (_, i) => (
+          <span
+            key={i}
+            className={cn(
+              "font-mono",
+              "text-center text-[10px] text-muted-foreground",
+            )}
+          >
+            {(i + 1).toLocaleString("fa-IR")}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const StoreVisitsTargetLineChart = () => {
+  const chartWrapperRef = React.useRef<HTMLDivElement>(null);
+  const [chartWidth, setChartWidth] = React.useState(0);
+  const [axis, setAxis] = React.useState(0);
+
+  const lastVisitValue =
+    storeVisitsData[storeVisitsData.length - 1]?.visits ?? 0;
+
+  const axisSpring = useSpring(0, {
+    stiffness: 100,
+    damping: 30,
+  });
+  const valueSpring = useSpring(lastVisitValue, {
+    stiffness: 100,
+    damping: 30,
+  });
+  const [springyValue, setSpringyValue] = React.useState(lastVisitValue);
+
+  useMotionValueEvent(axisSpring, "change", (latest) => {
+    setAxis(Number(latest));
+  });
+
+  useMotionValueEvent(valueSpring, "change", (latest) => {
+    setSpringyValue(Number(Number(latest).toFixed(0)));
+  });
+
+  React.useEffect(() => {
+    const el = chartWrapperRef.current;
+    if (!el) return;
+
+    const updateWidth = () => {
+      const nextWidth = Math.max(
+        0,
+        Math.floor(el.getBoundingClientRect().width),
+      );
+      setChartWidth(nextWidth);
+      setAxis((prev) => (prev === 0 ? nextWidth : prev));
+    };
+
+    updateWidth();
+    const ro = new ResizeObserver(updateWidth);
+    ro.observe(el);
+
+    return () => {
+      ro.disconnect();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    valueSpring.set(lastVisitValue);
+  }, [lastVisitValue, valueSpring]);
+
+  const safeAxis =
+    chartWidth > 0 ? Math.min(Math.max(axis, 0), chartWidth) : axis;
+  const rightInset = chartWidth > 0 ? Math.max(0, chartWidth - safeAxis) : 0;
+  const clipPath =
+    chartWidth > 0 ? `inset(0px ${rightInset}px 0px 0px)` : undefined;
+
+  const tagWidth = 56;
+  const tagHeight = 18;
+  const tagHalfWidth = tagWidth / 2;
+  const tagX =
+    chartWidth > 0
+      ? Math.min(Math.max(safeAxis - tagWidth, 0), chartWidth - tagWidth)
+      : 0;
+  const textX =
+    chartWidth > 0
+      ? Math.min(
+        Math.max(safeAxis - tagHalfWidth, tagHalfWidth),
+        chartWidth - tagHalfWidth,
+      )
+      : 0;
+
+  return (
+    <div ref={chartWrapperRef} className="h-full w-full min-w-0">
+      <ChartContainer config={visitsChartConfig} className="h-full w-full">
+        <AreaChart
+          className="overflow-visible"
+          data={storeVisitsData}
+          margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+          onMouseMove={(state: any) => {
+            const x = state.activeCoordinate?.x;
+            const dataValue = state.activePayload?.[0]?.value;
+            if (typeof x === "number" && dataValue !== undefined) {
+              axisSpring.set(x);
+              valueSpring.set(Number(dataValue));
+            }
+          }}
+          onMouseLeave={() => {
+            if (chartWidth > 0) axisSpring.set(chartWidth);
+            valueSpring.set(lastVisitValue);
+          }}
+        >
+          <defs>
+            <linearGradient id="visitsGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset="0%"
+                stopColor="var(--color-visits)"
+                stopOpacity={0.3}
+              />
+              <stop
+                offset="100%"
+                stopColor="var(--color-visits)"
+                stopOpacity={0.05}
+              />
+            </linearGradient>
+          </defs>
+          <XAxis
+            dataKey="date"
+            axisLine={false}
+            tickLine={false}
+            tick={{ fontSize: 10 }}
+            dy={8}
+            interval={0}
+            padding={{ left: 12, right: 12 }}
+          />
+
+          <Area
+            type="monotone"
+            dataKey="visits"
+            stroke="var(--color-visits)"
+            strokeWidth={1}
+            fill="url(#visitsGradient)"
+            fillOpacity={0.4}
+            clipPath={clipPath}
+          />
+          <line
+            x1={safeAxis}
+            y1={0}
+            x2={safeAxis}
+            y2="85%"
+            stroke="var(--color-visits)"
+            strokeDasharray="3 3"
+            strokeLinecap="round"
+            strokeOpacity={0.2}
+          />
+          <rect
+            x={tagX}
+            y={0}
+            width={tagWidth}
+            height={tagHeight}
+            fill="var(--secondary-foreground)"
+          />
+          <text
+            x={textX}
+            fontWeight={600}
+            y={13}
+            textAnchor="middle"
+            fill="var(--primary-foreground)"
+          >
+            {compactNumberFormatter.format(springyValue)}
+          </text>
+          <Area
+            type="monotone"
+            dataKey="visits"
+            stroke="var(--color-visits)"
+            strokeOpacity={0.1}
+            fill="none"
+          />
+        </AreaChart>
+      </ChartContainer>
+    </div>
+  );
+};
+
+// Store Visits Card with Area Chart
+const StoreVisitsCard = () => {
+  const totalVisits = 701340000;
+  const changePercent = -12.5;
+
+  return (
+    <div className="flex min-w-0 flex-col gap-4 border bg-card p-4 sm:gap-5 sm:p-5 lg:col-span-2">
+      <div className="flex items-start justify-between gap-4">
+        {/* Left: Title + Value + Change */}
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">بازدید فروشگاه</span>
+          <span
+            className={cn("font-mono", "text-xl font-semibold sm:text-3xl")}
+          >
+            {compactNumberFormatter.format(totalVisits)}
+          </span>
+          <div className="flex items-center gap-1">
+            <span
+              className={cn("font-mono", "text-sm font-medium text-red-600")}
+            >
+              {formatChangePercent(changePercent, false)}
+            </span>
+            <ArrowDownRight
+              className="size-3.5 text-red-600"
+              aria-hidden="true"
+            />
+            <span className="text-sm text-muted-foreground">نسبت به ماه قبل</span>
+          </div>
+        </div>
+
+        {/* Right: Growth sections */}
+        <div className="flex flex-wrap gap-2">
+          <GrowthSection label="۳ ماه" change={25} />
+          <GrowthSection label="۶ ماه" change={25} />
+          <GrowthSection label="۱ سال" change={-12.5} />
+        </div>
+      </div>
+
+      <div className="h-[140px] w-full min-w-0 sm:h-[160px]">
+        <StoreVisitsTargetLineChart />
+      </div>
+    </div>
+  );
+};
+
+// Main Dashboard Content
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      className="flex h-full w-full flex-1 flex-col gap-4 overflow-auto p-4 sm:gap-6 sm:p-6"
+    >
+      {/* KPI Stats Row */}
+      <KPIStatsRow />
+
+      {/* Middle Row: Sales Revenue + Segmentation */}
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-3">
+        <SalesRevenueCard />
+        <SegmentationCard />
+      </div>
+
+      {/* Bottom Row: User Retention + Store Visits */}
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-3">
+        <UserRetentionCard />
+        <StoreVisitsCard />
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// Main Dashboard Component
+// ============================================================================
+
+const Dashboard11 = ({ className }: { className?: string }) => {
+  return (
+    <ShadTooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </ShadTooltipProvider>
+  );
+};
+
+export { Dashboard11 };
diff --git a/blocks/dashboard12.tsx b/blocks/dashboard12.tsx
new file mode 100644
index 0000000..20822c6
--- /dev/null
+++ b/blocks/dashboard12.tsx
@@ -0,0 +1,1806 @@
+"use client";
+
+import DottedMap from "dotted-map/without-countries";
+import { useMotionValueEvent, useSpring } from "framer-motion";
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  BarChart3,
+  Box,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Facebook,
+  Globe,
+  Instagram,
+  LayoutDashboard,
+  LogOut,
+  MessageSquare,
+  Package,
+  RotateCcw,
+  Search,
+  Settings,
+  Truck,
+  Twitter,
+  User,
+  Users,
+  Wallet,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import { Bar, BarChart, ReferenceLine, Tooltip, XAxis, YAxis } from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarInset,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Color Palette
+// ============================================================================
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+  quinary: {
+    light: `color-mix(in oklch, var(--primary) 25%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 30%, ${mixBase})`,
+  },
+};
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  user?: UserData;
+};
+
+type KPIStat = {
+  title: string;
+  value: number;
+  change: number;
+  format: "currency" | "percent" | "number";
+};
+
+type CustomerSegment = {
+  name: string;
+  percentage: number;
+  customers: number;
+  change: number;
+  color: string;
+};
+
+type Channel = {
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  name: string;
+  count: number;
+  change: number;
+};
+
+type GeographyCountry = {
+  name: string;
+  flag: string;
+  lat: number;
+  lng: number;
+  users: number;
+  demographics: { men: number; women: number; other: number };
+};
+
+// ============================================================================
+// Formatters
+// ============================================================================
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+  maximumFractionDigits: 2,
+});
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  maximumFractionDigits: 1,
+});
+
+const monthFormatter = new Intl.DateTimeFormat("fa-IR", { month: "short" });
+
+const monthLabel = (monthIndex: number) =>
+  monthFormatter.format(new Date(2025, monthIndex, 1));
+
+const formatChangePercent = (change: number, signed = true) => {
+  const formatted = Math.abs(change).toLocaleString("fa-IR", {
+    minimumFractionDigits: change % 1 !== 0 ? 1 : 0,
+    maximumFractionDigits: 1,
+  });
+  if (!signed) return `${formatted}٪`;
+  return `${change >= 0 ? "+" : "-"}${formatted}٪`;
+};
+
+type OrderStatus = "Delivered" | "Processing" | "Cancelled";
+
+const orderStatusLabels: Record<OrderStatus, string> = {
+  Delivered: "تحویل‌شده",
+  Processing: "در حال پردازش",
+  Cancelled: "لغوشده",
+};
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+function useHoverHighlight<T extends string | number>() {
+  const [active, setActive] = React.useState<T | null>(null);
+
+  const handleHover = React.useCallback((value: T | null) => {
+    setActive(value);
+  }, []);
+
+  return { active, handleHover };
+}
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+    description: "داشبورد",
+  },
+  navGroups: [
+    {
+      title: "اصلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+      ],
+    },
+    {
+      title: "کاتالوگ",
+      defaultOpen: true,
+      items: [
+        {
+          label: "محصولات",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: Package, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
+            { label: "موجودی", icon: Package, href: "#" },
+          ],
+        },
+        { label: "ارسال", icon: Truck, href: "#" },
+      ],
+    },
+    {
+      title: "مشتریان",
+      defaultOpen: false,
+      items: [
+        { label: "همه مشتریان", icon: Users, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "نمای کلی", icon: Globe, href: "#" },
+        { label: "گزارش‌ها", icon: BarChart3, href: "#" },
+        { label: "مالی", icon: Wallet, href: "#" },
+      ],
+    },
+    {
+      title: "تنظیمات",
+      defaultOpen: false,
+      items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+    },
+  ],
+  user: {
+    name: "علی رضایی",
+    email: "john@acmestore.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+  },
+};
+
+const kpiStats: KPIStat[] = [
+  { title: "درآمد کل", value: 485000, change: -12.5, format: "currency" },
+  { title: "نرخ تبدیل", value: 18.5, change: -12.5, format: "percent" },
+  { title: "کل سفارش‌ها", value: 92, change: 25, format: "number" },
+  { title: "مشتریان فعال", value: 38, change: 25, format: "number" },
+];
+
+const monthlyRevenueData = [
+  { month: monthLabel(0), revenue: 72000 },
+  { month: monthLabel(1), revenue: 128000 },
+  { month: monthLabel(2), revenue: 103000 },
+  { month: monthLabel(3), revenue: 176000 },
+  { month: monthLabel(4), revenue: 230000 },
+  { month: monthLabel(5), revenue: 142000 },
+  { month: monthLabel(6), revenue: 310000 },
+  { month: monthLabel(7), revenue: 640000 },
+  { month: monthLabel(8), revenue: 410000 },
+  { month: monthLabel(9), revenue: 210000 },
+  { month: monthLabel(10), revenue: 98000 },
+  { month: monthLabel(11), revenue: 260000 },
+];
+
+const customerSegmentsData: CustomerSegment[] = [
+  {
+    name: "سازمانی",
+    percentage: 45,
+    customers: 1074,
+    color: palette.primary,
+    change: 3.2,
+  },
+  {
+    name: "کسب‌وکار متوسط",
+    percentage: 35,
+    customers: 836,
+    color: palette.secondary.light,
+    change: -1.5,
+  },
+  {
+    name: "شخصی",
+    percentage: 20,
+    customers: 478,
+    color: palette.tertiary.light,
+    change: 5.8,
+  },
+];
+const totalCustomers = 2388;
+const totalCustomersChange = 4.2;
+
+const channelsData: Channel[] = [
+  { icon: Facebook, name: "فیس‌بوک", count: 2341, change: 25 },
+  { icon: Twitter, name: "توییتر", count: 1231, change: -25 },
+  { icon: Globe, name: "گوگل", count: 1123, change: -25 },
+  { icon: Instagram, name: "اینستاگرام", count: 125, change: 25 },
+];
+
+const geographyCountries: GeographyCountry[] = [
+  {
+    name: "ایالات متحده",
+    flag: "\u{1F1FA}\u{1F1F8}",
+    lat: 38.9,
+    lng: -77.0,
+    users: 12400,
+    demographics: { men: 38, women: 54, other: 8 },
+  },
+  {
+    name: "بریتانیا",
+    flag: "\u{1F1EC}\u{1F1E7}",
+    lat: 51.5,
+    lng: -0.1,
+    users: 8200,
+    demographics: { men: 35, women: 57, other: 8 },
+  },
+  {
+    name: "هند",
+    flag: "\u{1F1EE}\u{1F1F3}",
+    lat: 20.6,
+    lng: 79.0,
+    users: 6500,
+    demographics: { men: 42, women: 50, other: 8 },
+  },
+  {
+    name: "برزیل",
+    flag: "\u{1F1E7}\u{1F1F7}",
+    lat: -14.2,
+    lng: -51.9,
+    users: 4200,
+    demographics: { men: 30, women: 62, other: 8 },
+  },
+  {
+    name: "ژاپن",
+    flag: "\u{1F1EF}\u{1F1F5}",
+    lat: 36.2,
+    lng: 139.7,
+    users: 3400,
+    demographics: { men: 32, women: 60, other: 8 },
+  },
+];
+const totalGeographyUsers = geographyCountries.reduce(
+  (sum, c) => sum + c.users,
+  0,
+);
+
+// Inline pre-computed dotted map grid (from dotted-map/without-countries)
+// prettier-ignore
+const mapJsonData = { "points": { "11;0": { "x": 11.5, "y": 0 }, "12;0": { "x": 12.5, "y": 0 }, "16;0": { "x": 16.5, "y": 0 }, "17;0": { "x": 17.5, "y": 0 }, "18;0": { "x": 18.5, "y": 0 }, "22;0": { "x": 22.5, "y": 0 }, "23;0": { "x": 23.5, "y": 0 }, "24;0": { "x": 24.5, "y": 0 }, "25;0": { "x": 25.5, "y": 0 }, "26;0": { "x": 26.5, "y": 0 }, "27;0": { "x": 27.5, "y": 0 }, "36;0": { "x": 36.5, "y": 0 }, "41;0": { "x": 41.5, "y": 0 }, "43;0": { "x": 43.5, "y": 0 }, "44;0": { "x": 44.5, "y": 0 }, "45;0": { "x": 45.5, "y": 0 }, "46;0": { "x": 46.5, "y": 0 }, "47;0": { "x": 47.5, "y": 0 }, "48;0": { "x": 48.5, "y": 0 }, "49;0": { "x": 49.5, "y": 0 }, "50;0": { "x": 50.5, "y": 0 }, "51;0": { "x": 51.5, "y": 0 }, "52;0": { "x": 52.5, "y": 0 }, "53;0": { "x": 53.5, "y": 0 }, "55;0": { "x": 55.5, "y": 0 }, "56;0": { "x": 56.5, "y": 0 }, "57;0": { "x": 57.5, "y": 0 }, "3;1": { "x": 3, "y": 0.8660254037844386 }, "4;1": { "x": 4, "y": 0.8660254037844386 }, "5;1": { "x": 5, "y": 0.8660254037844386 }, "6;1": { "x": 6, "y": 0.8660254037844386 }, "7;1": { "x": 7, "y": 0.8660254037844386 }, "8;1": { "x": 8, "y": 0.8660254037844386 }, "9;1": { "x": 9, "y": 0.8660254037844386 }, "10;1": { "x": 10, "y": 0.8660254037844386 }, "12;1": { "x": 12, "y": 0.8660254037844386 }, "13;1": { "x": 13, "y": 0.8660254037844386 }, "14;1": { "x": 14, "y": 0.8660254037844386 }, "15;1": { "x": 15, "y": 0.8660254037844386 }, "17;1": { "x": 17, "y": 0.8660254037844386 }, "19;1": { "x": 19, "y": 0.8660254037844386 }, "23;1": { "x": 23, "y": 0.8660254037844386 }, "24;1": { "x": 24, "y": 0.8660254037844386 }, "25;1": { "x": 25, "y": 0.8660254037844386 }, "26;1": { "x": 26, "y": 0.8660254037844386 }, "27;1": { "x": 27, "y": 0.8660254037844386 }, "35;1": { "x": 35, "y": 0.8660254037844386 }, "36;1": { "x": 36, "y": 0.8660254037844386 }, "37;1": { "x": 37, "y": 0.8660254037844386 }, "44;1": { "x": 44, "y": 0.8660254037844386 }, "45;1": { "x": 45, "y": 0.8660254037844386 }, "46;1": { "x": 46, "y": 0.8660254037844386 }, "47;1": { "x": 47, "y": 0.8660254037844386 }, "48;1": { "x": 48, "y": 0.8660254037844386 }, "49;1": { "x": 49, "y": 0.8660254037844386 }, "50;1": { "x": 50, "y": 0.8660254037844386 }, "51;1": { "x": 51, "y": 0.8660254037844386 }, "52;1": { "x": 52, "y": 0.8660254037844386 }, "53;1": { "x": 53, "y": 0.8660254037844386 }, "54;1": { "x": 54, "y": 0.8660254037844386 }, "55;1": { "x": 55, "y": 0.8660254037844386 }, "56;1": { "x": 56, "y": 0.8660254037844386 }, "57;1": { "x": 57, "y": 0.8660254037844386 }, "58;1": { "x": 58, "y": 0.8660254037844386 }, "59;1": { "x": 59, "y": 0.8660254037844386 }, "60;1": { "x": 60, "y": 0.8660254037844386 }, "61;1": { "x": 61, "y": 0.8660254037844386 }, "62;1": { "x": 62, "y": 0.8660254037844386 }, "0;2": { "x": 0.5, "y": 1.7320508075688772 }, "3;2": { "x": 3.5, "y": 1.7320508075688772 }, "4;2": { "x": 4.5, "y": 1.7320508075688772 }, "5;2": { "x": 5.5, "y": 1.7320508075688772 }, "6;2": { "x": 6.5, "y": 1.7320508075688772 }, "7;2": { "x": 7.5, "y": 1.7320508075688772 }, "8;2": { "x": 8.5, "y": 1.7320508075688772 }, "9;2": { "x": 9.5, "y": 1.7320508075688772 }, "10;2": { "x": 10.5, "y": 1.7320508075688772 }, "11;2": { "x": 11.5, "y": 1.7320508075688772 }, "12;2": { "x": 12.5, "y": 1.7320508075688772 }, "13;2": { "x": 13.5, "y": 1.7320508075688772 }, "14;2": { "x": 14.5, "y": 1.7320508075688772 }, "15;2": { "x": 15.5, "y": 1.7320508075688772 }, "16;2": { "x": 16.5, "y": 1.7320508075688772 }, "19;2": { "x": 19.5, "y": 1.7320508075688772 }, "22;2": { "x": 22.5, "y": 1.7320508075688772 }, "23;2": { "x": 23.5, "y": 1.7320508075688772 }, "24;2": { "x": 24.5, "y": 1.7320508075688772 }, "25;2": { "x": 25.5, "y": 1.7320508075688772 }, "34;2": { "x": 34.5, "y": 1.7320508075688772 }, "35;2": { "x": 35.5, "y": 1.7320508075688772 }, "36;2": { "x": 36.5, "y": 1.7320508075688772 }, "37;2": { "x": 37.5, "y": 1.7320508075688772 }, "38;2": { "x": 38.5, "y": 1.7320508075688772 }, "39;2": { "x": 39.5, "y": 1.7320508075688772 }, "40;2": { "x": 40.5, "y": 1.7320508075688772 }, "41;2": { "x": 41.5, "y": 1.7320508075688772 }, "42;2": { "x": 42.5, "y": 1.7320508075688772 }, "43;2": { "x": 43.5, "y": 1.7320508075688772 }, "45;2": { "x": 45.5, "y": 1.7320508075688772 }, "46;2": { "x": 46.5, "y": 1.7320508075688772 }, "47;2": { "x": 47.5, "y": 1.7320508075688772 }, "48;2": { "x": 48.5, "y": 1.7320508075688772 }, "49;2": { "x": 49.5, "y": 1.7320508075688772 }, "50;2": { "x": 50.5, "y": 1.7320508075688772 }, "51;2": { "x": 51.5, "y": 1.7320508075688772 }, "52;2": { "x": 52.5, "y": 1.7320508075688772 }, "53;2": { "x": 53.5, "y": 1.7320508075688772 }, "54;2": { "x": 54.5, "y": 1.7320508075688772 }, "55;2": { "x": 55.5, "y": 1.7320508075688772 }, "56;2": { "x": 56.5, "y": 1.7320508075688772 }, "57;2": { "x": 57.5, "y": 1.7320508075688772 }, "58;2": { "x": 58.5, "y": 1.7320508075688772 }, "59;2": { "x": 59.5, "y": 1.7320508075688772 }, "60;2": { "x": 60.5, "y": 1.7320508075688772 }, "61;2": { "x": 61.5, "y": 1.7320508075688772 }, "62;2": { "x": 62.5, "y": 1.7320508075688772 }, "1;3": { "x": 1, "y": 2.598076211353316 }, "2;3": { "x": 2, "y": 2.598076211353316 }, "3;3": { "x": 3, "y": 2.598076211353316 }, "4;3": { "x": 4, "y": 2.598076211353316 }, "5;3": { "x": 5, "y": 2.598076211353316 }, "6;3": { "x": 6, "y": 2.598076211353316 }, "7;3": { "x": 7, "y": 2.598076211353316 }, "8;3": { "x": 8, "y": 2.598076211353316 }, "9;3": { "x": 9, "y": 2.598076211353316 }, "10;3": { "x": 10, "y": 2.598076211353316 }, "11;3": { "x": 11, "y": 2.598076211353316 }, "12;3": { "x": 12, "y": 2.598076211353316 }, "13;3": { "x": 13, "y": 2.598076211353316 }, "14;3": { "x": 14, "y": 2.598076211353316 }, "15;3": { "x": 15, "y": 2.598076211353316 }, "16;3": { "x": 16, "y": 2.598076211353316 }, "19;3": { "x": 19, "y": 2.598076211353316 }, "20;3": { "x": 20, "y": 2.598076211353316 }, "23;3": { "x": 23, "y": 2.598076211353316 }, "24;3": { "x": 24, "y": 2.598076211353316 }, "28;3": { "x": 28, "y": 2.598076211353316 }, "34;3": { "x": 34, "y": 2.598076211353316 }, "35;3": { "x": 35, "y": 2.598076211353316 }, "36;3": { "x": 36, "y": 2.598076211353316 }, "37;3": { "x": 37, "y": 2.598076211353316 }, "39;3": { "x": 39, "y": 2.598076211353316 }, "40;3": { "x": 40, "y": 2.598076211353316 }, "41;3": { "x": 41, "y": 2.598076211353316 }, "42;3": { "x": 42, "y": 2.598076211353316 }, "43;3": { "x": 43, "y": 2.598076211353316 }, "44;3": { "x": 44, "y": 2.598076211353316 }, "45;3": { "x": 45, "y": 2.598076211353316 }, "46;3": { "x": 46, "y": 2.598076211353316 }, "47;3": { "x": 47, "y": 2.598076211353316 }, "48;3": { "x": 48, "y": 2.598076211353316 }, "49;3": { "x": 49, "y": 2.598076211353316 }, "50;3": { "x": 50, "y": 2.598076211353316 }, "51;3": { "x": 51, "y": 2.598076211353316 }, "52;3": { "x": 52, "y": 2.598076211353316 }, "53;3": { "x": 53, "y": 2.598076211353316 }, "54;3": { "x": 54, "y": 2.598076211353316 }, "55;3": { "x": 55, "y": 2.598076211353316 }, "56;3": { "x": 56, "y": 2.598076211353316 }, "57;3": { "x": 57, "y": 2.598076211353316 }, "58;3": { "x": 58, "y": 2.598076211353316 }, "59;3": { "x": 59, "y": 2.598076211353316 }, "60;3": { "x": 60, "y": 2.598076211353316 }, "61;3": { "x": 61, "y": 2.598076211353316 }, "62;3": { "x": 62, "y": 2.598076211353316 }, "1;4": { "x": 1.5, "y": 3.4641016151377544 }, "3;4": { "x": 3.5, "y": 3.4641016151377544 }, "4;4": { "x": 4.5, "y": 3.4641016151377544 }, "5;4": { "x": 5.5, "y": 3.4641016151377544 }, "6;4": { "x": 6.5, "y": 3.4641016151377544 }, "7;4": { "x": 7.5, "y": 3.4641016151377544 }, "8;4": { "x": 8.5, "y": 3.4641016151377544 }, "9;4": { "x": 9.5, "y": 3.4641016151377544 }, "10;4": { "x": 10.5, "y": 3.4641016151377544 }, "11;4": { "x": 11.5, "y": 3.4641016151377544 }, "12;4": { "x": 12.5, "y": 3.4641016151377544 }, "13;4": { "x": 13.5, "y": 3.4641016151377544 }, "14;4": { "x": 14.5, "y": 3.4641016151377544 }, "15;4": { "x": 15.5, "y": 3.4641016151377544 }, "16;4": { "x": 16.5, "y": 3.4641016151377544 }, "22;4": { "x": 22.5, "y": 3.4641016151377544 }, "23;4": { "x": 23.5, "y": 3.4641016151377544 }, "33;4": { "x": 33.5, "y": 3.4641016151377544 }, "34;4": { "x": 34.5, "y": 3.4641016151377544 }, "35;4": { "x": 35.5, "y": 3.4641016151377544 }, "36;4": { "x": 36.5, "y": 3.4641016151377544 }, "37;4": { "x": 37.5, "y": 3.4641016151377544 }, "38;4": { "x": 38.5, "y": 3.4641016151377544 }, "39;4": { "x": 39.5, "y": 3.4641016151377544 }, "40;4": { "x": 40.5, "y": 3.4641016151377544 }, "41;4": { "x": 41.5, "y": 3.4641016151377544 }, "42;4": { "x": 42.5, "y": 3.4641016151377544 }, "43;4": { "x": 43.5, "y": 3.4641016151377544 }, "44;4": { "x": 44.5, "y": 3.4641016151377544 }, "45;4": { "x": 45.5, "y": 3.4641016151377544 }, "46;4": { "x": 46.5, "y": 3.4641016151377544 }, "47;4": { "x": 47.5, "y": 3.4641016151377544 }, "48;4": { "x": 48.5, "y": 3.4641016151377544 }, "49;4": { "x": 49.5, "y": 3.4641016151377544 }, "50;4": { "x": 50.5, "y": 3.4641016151377544 }, "51;4": { "x": 51.5, "y": 3.4641016151377544 }, "52;4": { "x": 52.5, "y": 3.4641016151377544 }, "53;4": { "x": 53.5, "y": 3.4641016151377544 }, "54;4": { "x": 54.5, "y": 3.4641016151377544 }, "55;4": { "x": 55.5, "y": 3.4641016151377544 }, "56;4": { "x": 56.5, "y": 3.4641016151377544 }, "57;4": { "x": 57.5, "y": 3.4641016151377544 }, "58;4": { "x": 58.5, "y": 3.4641016151377544 }, "59;4": { "x": 59.5, "y": 3.4641016151377544 }, "60;4": { "x": 60.5, "y": 3.4641016151377544 }, "61;4": { "x": 61.5, "y": 3.4641016151377544 }, "62;4": { "x": 62.5, "y": 3.4641016151377544 }, "3;5": { "x": 3, "y": 4.330127018922193 }, "4;5": { "x": 4, "y": 4.330127018922193 }, "6;5": { "x": 6, "y": 4.330127018922193 }, "7;5": { "x": 7, "y": 4.330127018922193 }, "8;5": { "x": 8, "y": 4.330127018922193 }, "9;5": { "x": 9, "y": 4.330127018922193 }, "10;5": { "x": 10, "y": 4.330127018922193 }, "11;5": { "x": 11, "y": 4.330127018922193 }, "12;5": { "x": 12, "y": 4.330127018922193 }, "13;5": { "x": 13, "y": 4.330127018922193 }, "14;5": { "x": 14, "y": 4.330127018922193 }, "18;5": { "x": 18, "y": 4.330127018922193 }, "23;5": { "x": 23, "y": 4.330127018922193 }, "33;5": { "x": 33, "y": 4.330127018922193 }, "34;5": { "x": 34, "y": 4.330127018922193 }, "36;5": { "x": 36, "y": 4.330127018922193 }, "37;5": { "x": 37, "y": 4.330127018922193 }, "38;5": { "x": 38, "y": 4.330127018922193 }, "39;5": { "x": 39, "y": 4.330127018922193 }, "40;5": { "x": 40, "y": 4.330127018922193 }, "41;5": { "x": 41, "y": 4.330127018922193 }, "42;5": { "x": 42, "y": 4.330127018922193 }, "43;5": { "x": 43, "y": 4.330127018922193 }, "44;5": { "x": 44, "y": 4.330127018922193 }, "45;5": { "x": 45, "y": 4.330127018922193 }, "46;5": { "x": 46, "y": 4.330127018922193 }, "47;5": { "x": 47, "y": 4.330127018922193 }, "48;5": { "x": 48, "y": 4.330127018922193 }, "49;5": { "x": 49, "y": 4.330127018922193 }, "50;5": { "x": 50, "y": 4.330127018922193 }, "51;5": { "x": 51, "y": 4.330127018922193 }, "52;5": { "x": 52, "y": 4.330127018922193 }, "53;5": { "x": 53, "y": 4.330127018922193 }, "54;5": { "x": 54, "y": 4.330127018922193 }, "55;5": { "x": 55, "y": 4.330127018922193 }, "56;5": { "x": 56, "y": 4.330127018922193 }, "57;5": { "x": 57, "y": 4.330127018922193 }, "58;5": { "x": 58, "y": 4.330127018922193 }, "59;5": { "x": 59, "y": 4.330127018922193 }, "61;5": { "x": 61, "y": 4.330127018922193 }, "3;6": { "x": 3.5, "y": 5.196152422706632 }, "7;6": { "x": 7.5, "y": 5.196152422706632 }, "8;6": { "x": 8.5, "y": 5.196152422706632 }, "9;6": { "x": 9.5, "y": 5.196152422706632 }, "10;6": { "x": 10.5, "y": 5.196152422706632 }, "11;6": { "x": 11.5, "y": 5.196152422706632 }, "12;6": { "x": 12.5, "y": 5.196152422706632 }, "13;6": { "x": 13.5, "y": 5.196152422706632 }, "14;6": { "x": 14.5, "y": 5.196152422706632 }, "18;6": { "x": 18.5, "y": 5.196152422706632 }, "32;6": { "x": 32.5, "y": 5.196152422706632 }, "33;6": { "x": 33.5, "y": 5.196152422706632 }, "36;6": { "x": 36.5, "y": 5.196152422706632 }, "37;6": { "x": 37.5, "y": 5.196152422706632 }, "38;6": { "x": 38.5, "y": 5.196152422706632 }, "39;6": { "x": 39.5, "y": 5.196152422706632 }, "40;6": { "x": 40.5, "y": 5.196152422706632 }, "41;6": { "x": 41.5, "y": 5.196152422706632 }, "42;6": { "x": 42.5, "y": 5.196152422706632 }, "43;6": { "x": 43.5, "y": 5.196152422706632 }, "44;6": { "x": 44.5, "y": 5.196152422706632 }, "45;6": { "x": 45.5, "y": 5.196152422706632 }, "46;6": { "x": 46.5, "y": 5.196152422706632 }, "47;6": { "x": 47.5, "y": 5.196152422706632 }, "48;6": { "x": 48.5, "y": 5.196152422706632 }, "49;6": { "x": 49.5, "y": 5.196152422706632 }, "50;6": { "x": 50.5, "y": 5.196152422706632 }, "51;6": { "x": 51.5, "y": 5.196152422706632 }, "52;6": { "x": 52.5, "y": 5.196152422706632 }, "53;6": { "x": 53.5, "y": 5.196152422706632 }, "54;6": { "x": 54.5, "y": 5.196152422706632 }, "55;6": { "x": 55.5, "y": 5.196152422706632 }, "9;7": { "x": 9, "y": 6.06217782649107 }, "10;7": { "x": 10, "y": 6.06217782649107 }, "11;7": { "x": 11, "y": 6.06217782649107 }, "12;7": { "x": 12, "y": 6.06217782649107 }, "13;7": { "x": 13, "y": 6.06217782649107 }, "14;7": { "x": 14, "y": 6.06217782649107 }, "15;7": { "x": 15, "y": 6.06217782649107 }, "16;7": { "x": 16, "y": 6.06217782649107 }, "18;7": { "x": 18, "y": 6.06217782649107 }, "19;7": { "x": 19, "y": 6.06217782649107 }, "20;7": { "x": 20, "y": 6.06217782649107 }, "33;7": { "x": 33, "y": 6.06217782649107 }, "34;7": { "x": 34, "y": 6.06217782649107 }, "36;7": { "x": 36, "y": 6.06217782649107 }, "37;7": { "x": 37, "y": 6.06217782649107 }, "38;7": { "x": 38, "y": 6.06217782649107 }, "39;7": { "x": 39, "y": 6.06217782649107 }, "40;7": { "x": 40, "y": 6.06217782649107 }, "41;7": { "x": 41, "y": 6.06217782649107 }, "42;7": { "x": 42, "y": 6.06217782649107 }, "43;7": { "x": 43, "y": 6.06217782649107 }, "44;7": { "x": 44, "y": 6.06217782649107 }, "45;7": { "x": 45, "y": 6.06217782649107 }, "46;7": { "x": 46, "y": 6.06217782649107 }, "47;7": { "x": 47, "y": 6.06217782649107 }, "48;7": { "x": 48, "y": 6.06217782649107 }, "49;7": { "x": 49, "y": 6.06217782649107 }, "50;7": { "x": 50, "y": 6.06217782649107 }, "51;7": { "x": 51, "y": 6.06217782649107 }, "52;7": { "x": 52, "y": 6.06217782649107 }, "53;7": { "x": 53, "y": 6.06217782649107 }, "54;7": { "x": 54, "y": 6.06217782649107 }, "55;7": { "x": 55, "y": 6.06217782649107 }, "59;7": { "x": 59, "y": 6.06217782649107 }, "60;7": { "x": 60, "y": 6.06217782649107 }, "9;8": { "x": 9.5, "y": 6.928203230275509 }, "10;8": { "x": 10.5, "y": 6.928203230275509 }, "11;8": { "x": 11.5, "y": 6.928203230275509 }, "12;8": { "x": 12.5, "y": 6.928203230275509 }, "13;8": { "x": 13.5, "y": 6.928203230275509 }, "14;8": { "x": 14.5, "y": 6.928203230275509 }, "15;8": { "x": 15.5, "y": 6.928203230275509 }, "16;8": { "x": 16.5, "y": 6.928203230275509 }, "18;8": { "x": 18.5, "y": 6.928203230275509 }, "19;8": { "x": 19.5, "y": 6.928203230275509 }, "20;8": { "x": 20.5, "y": 6.928203230275509 }, "21;8": { "x": 21.5, "y": 6.928203230275509 }, "31;8": { "x": 31.5, "y": 6.928203230275509 }, "32;8": { "x": 32.5, "y": 6.928203230275509 }, "33;8": { "x": 33.5, "y": 6.928203230275509 }, "34;8": { "x": 34.5, "y": 6.928203230275509 }, "35;8": { "x": 35.5, "y": 6.928203230275509 }, "36;8": { "x": 36.5, "y": 6.928203230275509 }, "37;8": { "x": 37.5, "y": 6.928203230275509 }, "38;8": { "x": 38.5, "y": 6.928203230275509 }, "39;8": { "x": 39.5, "y": 6.928203230275509 }, "40;8": { "x": 40.5, "y": 6.928203230275509 }, "41;8": { "x": 41.5, "y": 6.928203230275509 }, "42;8": { "x": 42.5, "y": 6.928203230275509 }, "43;8": { "x": 43.5, "y": 6.928203230275509 }, "44;8": { "x": 44.5, "y": 6.928203230275509 }, "45;8": { "x": 45.5, "y": 6.928203230275509 }, "46;8": { "x": 46.5, "y": 6.928203230275509 }, "47;8": { "x": 47.5, "y": 6.928203230275509 }, "48;8": { "x": 48.5, "y": 6.928203230275509 }, "49;8": { "x": 49.5, "y": 6.928203230275509 }, "50;8": { "x": 50.5, "y": 6.928203230275509 }, "51;8": { "x": 51.5, "y": 6.928203230275509 }, "52;8": { "x": 52.5, "y": 6.928203230275509 }, "53;8": { "x": 53.5, "y": 6.928203230275509 }, "54;8": { "x": 54.5, "y": 6.928203230275509 }, "55;8": { "x": 55.5, "y": 6.928203230275509 }, "56;8": { "x": 56.5, "y": 6.928203230275509 }, "59;8": { "x": 59.5, "y": 6.928203230275509 }, "9;9": { "x": 9, "y": 7.794228634059947 }, "10;9": { "x": 10, "y": 7.794228634059947 }, "11;9": { "x": 11, "y": 7.794228634059947 }, "12;9": { "x": 12, "y": 7.794228634059947 }, "13;9": { "x": 13, "y": 7.794228634059947 }, "14;9": { "x": 14, "y": 7.794228634059947 }, "15;9": { "x": 15, "y": 7.794228634059947 }, "16;9": { "x": 16, "y": 7.794228634059947 }, "17;9": { "x": 17, "y": 7.794228634059947 }, "18;9": { "x": 18, "y": 7.794228634059947 }, "19;9": { "x": 19, "y": 7.794228634059947 }, "32;9": { "x": 32, "y": 7.794228634059947 }, "33;9": { "x": 33, "y": 7.794228634059947 }, "34;9": { "x": 34, "y": 7.794228634059947 }, "35;9": { "x": 35, "y": 7.794228634059947 }, "36;9": { "x": 36, "y": 7.794228634059947 }, "37;9": { "x": 37, "y": 7.794228634059947 }, "38;9": { "x": 38, "y": 7.794228634059947 }, "39;9": { "x": 39, "y": 7.794228634059947 }, "40;9": { "x": 40, "y": 7.794228634059947 }, "41;9": { "x": 41, "y": 7.794228634059947 }, "42;9": { "x": 42, "y": 7.794228634059947 }, "43;9": { "x": 43, "y": 7.794228634059947 }, "44;9": { "x": 44, "y": 7.794228634059947 }, "45;9": { "x": 45, "y": 7.794228634059947 }, "46;9": { "x": 46, "y": 7.794228634059947 }, "47;9": { "x": 47, "y": 7.794228634059947 }, "48;9": { "x": 48, "y": 7.794228634059947 }, "49;9": { "x": 49, "y": 7.794228634059947 }, "50;9": { "x": 50, "y": 7.794228634059947 }, "51;9": { "x": 51, "y": 7.794228634059947 }, "52;9": { "x": 52, "y": 7.794228634059947 }, "53;9": { "x": 53, "y": 7.794228634059947 }, "54;9": { "x": 54, "y": 7.794228634059947 }, "55;9": { "x": 55, "y": 7.794228634059947 }, "56;9": { "x": 56, "y": 7.794228634059947 }, "10;10": { "x": 10.5, "y": 8.660254037844386 }, "11;10": { "x": 11.5, "y": 8.660254037844386 }, "12;10": { "x": 12.5, "y": 8.660254037844386 }, "13;10": { "x": 13.5, "y": 8.660254037844386 }, "14;10": { "x": 14.5, "y": 8.660254037844386 }, "15;10": { "x": 15.5, "y": 8.660254037844386 }, "16;10": { "x": 16.5, "y": 8.660254037844386 }, "17;10": { "x": 17.5, "y": 8.660254037844386 }, "18;10": { "x": 18.5, "y": 8.660254037844386 }, "19;10": { "x": 19.5, "y": 8.660254037844386 }, "31;10": { "x": 31.5, "y": 8.660254037844386 }, "32;10": { "x": 32.5, "y": 8.660254037844386 }, "33;10": { "x": 33.5, "y": 8.660254037844386 }, "34;10": { "x": 34.5, "y": 8.660254037844386 }, "35;10": { "x": 35.5, "y": 8.660254037844386 }, "36;10": { "x": 36.5, "y": 8.660254037844386 }, "37;10": { "x": 37.5, "y": 8.660254037844386 }, "38;10": { "x": 38.5, "y": 8.660254037844386 }, "39;10": { "x": 39.5, "y": 8.660254037844386 }, "41;10": { "x": 41.5, "y": 8.660254037844386 }, "42;10": { "x": 42.5, "y": 8.660254037844386 }, "43;10": { "x": 43.5, "y": 8.660254037844386 }, "44;10": { "x": 44.5, "y": 8.660254037844386 }, "45;10": { "x": 45.5, "y": 8.660254037844386 }, "46;10": { "x": 46.5, "y": 8.660254037844386 }, "47;10": { "x": 47.5, "y": 8.660254037844386 }, "48;10": { "x": 48.5, "y": 8.660254037844386 }, "49;10": { "x": 49.5, "y": 8.660254037844386 }, "50;10": { "x": 50.5, "y": 8.660254037844386 }, "51;10": { "x": 51.5, "y": 8.660254037844386 }, "52;10": { "x": 52.5, "y": 8.660254037844386 }, "53;10": { "x": 53.5, "y": 8.660254037844386 }, "54;10": { "x": 54.5, "y": 8.660254037844386 }, "55;10": { "x": 55.5, "y": 8.660254037844386 }, "56;10": { "x": 56.5, "y": 8.660254037844386 }, "10;11": { "x": 10, "y": 9.526279441628825 }, "11;11": { "x": 11, "y": 9.526279441628825 }, "12;11": { "x": 12, "y": 9.526279441628825 }, "13;11": { "x": 13, "y": 9.526279441628825 }, "14;11": { "x": 14, "y": 9.526279441628825 }, "15;11": { "x": 15, "y": 9.526279441628825 }, "16;11": { "x": 16, "y": 9.526279441628825 }, "17;11": { "x": 17, "y": 9.526279441628825 }, "18;11": { "x": 18, "y": 9.526279441628825 }, "19;11": { "x": 19, "y": 9.526279441628825 }, "30;11": { "x": 30, "y": 9.526279441628825 }, "32;11": { "x": 32, "y": 9.526279441628825 }, "35;11": { "x": 35, "y": 9.526279441628825 }, "36;11": { "x": 36, "y": 9.526279441628825 }, "39;11": { "x": 39, "y": 9.526279441628825 }, "41;11": { "x": 41, "y": 9.526279441628825 }, "42;11": { "x": 42, "y": 9.526279441628825 }, "43;11": { "x": 43, "y": 9.526279441628825 }, "44;11": { "x": 44, "y": 9.526279441628825 }, "45;11": { "x": 45, "y": 9.526279441628825 }, "46;11": { "x": 46, "y": 9.526279441628825 }, "47;11": { "x": 47, "y": 9.526279441628825 }, "48;11": { "x": 48, "y": 9.526279441628825 }, "49;11": { "x": 49, "y": 9.526279441628825 }, "50;11": { "x": 50, "y": 9.526279441628825 }, "51;11": { "x": 51, "y": 9.526279441628825 }, "52;11": { "x": 52, "y": 9.526279441628825 }, "53;11": { "x": 53, "y": 9.526279441628825 }, "54;11": { "x": 54, "y": 9.526279441628825 }, "55;11": { "x": 55, "y": 9.526279441628825 }, "57;11": { "x": 57, "y": 9.526279441628825 }, "10;12": { "x": 10.5, "y": 10.392304845413264 }, "11;12": { "x": 11.5, "y": 10.392304845413264 }, "12;12": { "x": 12.5, "y": 10.392304845413264 }, "13;12": { "x": 13.5, "y": 10.392304845413264 }, "14;12": { "x": 14.5, "y": 10.392304845413264 }, "15;12": { "x": 15.5, "y": 10.392304845413264 }, "16;12": { "x": 16.5, "y": 10.392304845413264 }, "17;12": { "x": 17.5, "y": 10.392304845413264 }, "30;12": { "x": 30.5, "y": 10.392304845413264 }, "35;12": { "x": 35.5, "y": 10.392304845413264 }, "36;12": { "x": 36.5, "y": 10.392304845413264 }, "37;12": { "x": 37.5, "y": 10.392304845413264 }, "38;12": { "x": 38.5, "y": 10.392304845413264 }, "39;12": { "x": 39.5, "y": 10.392304845413264 }, "41;12": { "x": 41.5, "y": 10.392304845413264 }, "42;12": { "x": 42.5, "y": 10.392304845413264 }, "43;12": { "x": 43.5, "y": 10.392304845413264 }, "44;12": { "x": 44.5, "y": 10.392304845413264 }, "45;12": { "x": 45.5, "y": 10.392304845413264 }, "46;12": { "x": 46.5, "y": 10.392304845413264 }, "47;12": { "x": 47.5, "y": 10.392304845413264 }, "48;12": { "x": 48.5, "y": 10.392304845413264 }, "49;12": { "x": 49.5, "y": 10.392304845413264 }, "50;12": { "x": 50.5, "y": 10.392304845413264 }, "51;12": { "x": 51.5, "y": 10.392304845413264 }, "52;12": { "x": 52.5, "y": 10.392304845413264 }, "53;12": { "x": 53.5, "y": 10.392304845413264 }, "11;13": { "x": 11, "y": 11.258330249197702 }, "12;13": { "x": 12, "y": 11.258330249197702 }, "13;13": { "x": 13, "y": 11.258330249197702 }, "14;13": { "x": 14, "y": 11.258330249197702 }, "15;13": { "x": 15, "y": 11.258330249197702 }, "16;13": { "x": 16, "y": 11.258330249197702 }, "17;13": { "x": 17, "y": 11.258330249197702 }, "18;13": { "x": 18, "y": 11.258330249197702 }, "32;13": { "x": 32, "y": 11.258330249197702 }, "33;13": { "x": 33, "y": 11.258330249197702 }, "38;13": { "x": 38, "y": 11.258330249197702 }, "39;13": { "x": 39, "y": 11.258330249197702 }, "40;13": { "x": 40, "y": 11.258330249197702 }, "41;13": { "x": 41, "y": 11.258330249197702 }, "42;13": { "x": 42, "y": 11.258330249197702 }, "43;13": { "x": 43, "y": 11.258330249197702 }, "44;13": { "x": 44, "y": 11.258330249197702 }, "45;13": { "x": 45, "y": 11.258330249197702 }, "46;13": { "x": 46, "y": 11.258330249197702 }, "47;13": { "x": 47, "y": 11.258330249197702 }, "48;13": { "x": 48, "y": 11.258330249197702 }, "49;13": { "x": 49, "y": 11.258330249197702 }, "50;13": { "x": 50, "y": 11.258330249197702 }, "51;13": { "x": 51, "y": 11.258330249197702 }, "52;13": { "x": 52, "y": 11.258330249197702 }, "54;13": { "x": 54, "y": 11.258330249197702 }, "56;13": { "x": 56, "y": 11.258330249197702 }, "11;14": { "x": 11.5, "y": 12.12435565298214 }, "12;14": { "x": 12.5, "y": 12.12435565298214 }, "13;14": { "x": 13.5, "y": 12.12435565298214 }, "14;14": { "x": 14.5, "y": 12.12435565298214 }, "15;14": { "x": 15.5, "y": 12.12435565298214 }, "16;14": { "x": 16.5, "y": 12.12435565298214 }, "30;14": { "x": 30.5, "y": 12.12435565298214 }, "31;14": { "x": 31.5, "y": 12.12435565298214 }, "32;14": { "x": 32.5, "y": 12.12435565298214 }, "33;14": { "x": 33.5, "y": 12.12435565298214 }, "35;14": { "x": 35.5, "y": 12.12435565298214 }, "38;14": { "x": 38.5, "y": 12.12435565298214 }, "39;14": { "x": 39.5, "y": 12.12435565298214 }, "40;14": { "x": 40.5, "y": 12.12435565298214 }, "41;14": { "x": 41.5, "y": 12.12435565298214 }, "42;14": { "x": 42.5, "y": 12.12435565298214 }, "43;14": { "x": 43.5, "y": 12.12435565298214 }, "44;14": { "x": 44.5, "y": 12.12435565298214 }, "45;14": { "x": 45.5, "y": 12.12435565298214 }, "46;14": { "x": 46.5, "y": 12.12435565298214 }, "47;14": { "x": 47.5, "y": 12.12435565298214 }, "48;14": { "x": 48.5, "y": 12.12435565298214 }, "49;14": { "x": 49.5, "y": 12.12435565298214 }, "50;14": { "x": 50.5, "y": 12.12435565298214 }, "51;14": { "x": 51.5, "y": 12.12435565298214 }, "52;14": { "x": 52.5, "y": 12.12435565298214 }, "54;14": { "x": 54.5, "y": 12.12435565298214 }, "13;15": { "x": 13, "y": 12.990381056766578 }, "14;15": { "x": 14, "y": 12.990381056766578 }, "17;15": { "x": 17, "y": 12.990381056766578 }, "30;15": { "x": 30, "y": 12.990381056766578 }, "31;15": { "x": 31, "y": 12.990381056766578 }, "32;15": { "x": 32, "y": 12.990381056766578 }, "33;15": { "x": 33, "y": 12.990381056766578 }, "34;15": { "x": 34, "y": 12.990381056766578 }, "35;15": { "x": 35, "y": 12.990381056766578 }, "36;15": { "x": 36, "y": 12.990381056766578 }, "37;15": { "x": 37, "y": 12.990381056766578 }, "38;15": { "x": 38, "y": 12.990381056766578 }, "39;15": { "x": 39, "y": 12.990381056766578 }, "40;15": { "x": 40, "y": 12.990381056766578 }, "41;15": { "x": 41, "y": 12.990381056766578 }, "42;15": { "x": 42, "y": 12.990381056766578 }, "43;15": { "x": 43, "y": 12.990381056766578 }, "44;15": { "x": 44, "y": 12.990381056766578 }, "45;15": { "x": 45, "y": 12.990381056766578 }, "46;15": { "x": 46, "y": 12.990381056766578 }, "47;15": { "x": 47, "y": 12.990381056766578 }, "48;15": { "x": 48, "y": 12.990381056766578 }, "49;15": { "x": 49, "y": 12.990381056766578 }, "50;15": { "x": 50, "y": 12.990381056766578 }, "51;15": { "x": 51, "y": 12.990381056766578 }, "52;15": { "x": 52, "y": 12.990381056766578 }, "13;16": { "x": 13.5, "y": 13.856406460551018 }, "29;16": { "x": 29.5, "y": 13.856406460551018 }, "30;16": { "x": 30.5, "y": 13.856406460551018 }, "31;16": { "x": 31.5, "y": 13.856406460551018 }, "32;16": { "x": 32.5, "y": 13.856406460551018 }, "33;16": { "x": 33.5, "y": 13.856406460551018 }, "34;16": { "x": 34.5, "y": 13.856406460551018 }, "35;16": { "x": 35.5, "y": 13.856406460551018 }, "36;16": { "x": 36.5, "y": 13.856406460551018 }, "37;16": { "x": 37.5, "y": 13.856406460551018 }, "38;16": { "x": 38.5, "y": 13.856406460551018 }, "39;16": { "x": 39.5, "y": 13.856406460551018 }, "40;16": { "x": 40.5, "y": 13.856406460551018 }, "41;16": { "x": 41.5, "y": 13.856406460551018 }, "44;16": { "x": 44.5, "y": 13.856406460551018 }, "45;16": { "x": 45.5, "y": 13.856406460551018 }, "46;16": { "x": 46.5, "y": 13.856406460551018 }, "47;16": { "x": 47.5, "y": 13.856406460551018 }, "48;16": { "x": 48.5, "y": 13.856406460551018 }, "49;16": { "x": 49.5, "y": 13.856406460551018 }, "50;16": { "x": 50.5, "y": 13.856406460551018 }, "51;16": { "x": 51.5, "y": 13.856406460551018 }, "14;17": { "x": 14, "y": 14.722431864335457 }, "16;17": { "x": 16, "y": 14.722431864335457 }, "19;17": { "x": 19, "y": 14.722431864335457 }, "29;17": { "x": 29, "y": 14.722431864335457 }, "30;17": { "x": 30, "y": 14.722431864335457 }, "31;17": { "x": 31, "y": 14.722431864335457 }, "32;17": { "x": 32, "y": 14.722431864335457 }, "33;17": { "x": 33, "y": 14.722431864335457 }, "34;17": { "x": 34, "y": 14.722431864335457 }, "35;17": { "x": 35, "y": 14.722431864335457 }, "36;17": { "x": 36, "y": 14.722431864335457 }, "37;17": { "x": 37, "y": 14.722431864335457 }, "38;17": { "x": 38, "y": 14.722431864335457 }, "39;17": { "x": 39, "y": 14.722431864335457 }, "40;17": { "x": 40, "y": 14.722431864335457 }, "41;17": { "x": 41, "y": 14.722431864335457 }, "45;17": { "x": 45, "y": 14.722431864335457 }, "46;17": { "x": 46, "y": 14.722431864335457 }, "49;17": { "x": 49, "y": 14.722431864335457 }, "50;17": { "x": 50, "y": 14.722431864335457 }, "16;18": { "x": 16.5, "y": 15.588457268119894 }, "29;18": { "x": 29.5, "y": 15.588457268119894 }, "30;18": { "x": 30.5, "y": 15.588457268119894 }, "31;18": { "x": 31.5, "y": 15.588457268119894 }, "32;18": { "x": 32.5, "y": 15.588457268119894 }, "33;18": { "x": 33.5, "y": 15.588457268119894 }, "34;18": { "x": 34.5, "y": 15.588457268119894 }, "35;18": { "x": 35.5, "y": 15.588457268119894 }, "36;18": { "x": 36.5, "y": 15.588457268119894 }, "37;18": { "x": 37.5, "y": 15.588457268119894 }, "38;18": { "x": 38.5, "y": 15.588457268119894 }, "39;18": { "x": 39.5, "y": 15.588457268119894 }, "45;18": { "x": 45.5, "y": 15.588457268119894 }, "49;18": { "x": 49.5, "y": 15.588457268119894 }, "50;18": { "x": 50.5, "y": 15.588457268119894 }, "17;19": { "x": 17, "y": 16.454482671904334 }, "19;19": { "x": 19, "y": 16.454482671904334 }, "20;19": { "x": 20, "y": 16.454482671904334 }, "30;19": { "x": 30, "y": 16.454482671904334 }, "31;19": { "x": 31, "y": 16.454482671904334 }, "32;19": { "x": 32, "y": 16.454482671904334 }, "33;19": { "x": 33, "y": 16.454482671904334 }, "34;19": { "x": 34, "y": 16.454482671904334 }, "35;19": { "x": 35, "y": 16.454482671904334 }, "36;19": { "x": 36, "y": 16.454482671904334 }, "37;19": { "x": 37, "y": 16.454482671904334 }, "38;19": { "x": 38, "y": 16.454482671904334 }, "39;19": { "x": 39, "y": 16.454482671904334 }, "40;19": { "x": 40, "y": 16.454482671904334 }, "45;19": { "x": 45, "y": 16.454482671904334 }, "49;19": { "x": 49, "y": 16.454482671904334 }, "50;19": { "x": 50, "y": 16.454482671904334 }, "18;20": { "x": 18.5, "y": 17.32050807568877 }, "19;20": { "x": 19.5, "y": 17.32050807568877 }, "20;20": { "x": 20.5, "y": 17.32050807568877 }, "21;20": { "x": 21.5, "y": 17.32050807568877 }, "33;20": { "x": 33.5, "y": 17.32050807568877 }, "34;20": { "x": 34.5, "y": 17.32050807568877 }, "35;20": { "x": 35.5, "y": 17.32050807568877 }, "36;20": { "x": 36.5, "y": 17.32050807568877 }, "37;20": { "x": 37.5, "y": 17.32050807568877 }, "38;20": { "x": 38.5, "y": 17.32050807568877 }, "39;20": { "x": 39.5, "y": 17.32050807568877 }, "48;20": { "x": 48.5, "y": 17.32050807568877 }, "49;20": { "x": 49.5, "y": 17.32050807568877 }, "18;21": { "x": 18, "y": 18.186533479473212 }, "19;21": { "x": 19, "y": 18.186533479473212 }, "20;21": { "x": 20, "y": 18.186533479473212 }, "21;21": { "x": 21, "y": 18.186533479473212 }, "22;21": { "x": 22, "y": 18.186533479473212 }, "34;21": { "x": 34, "y": 18.186533479473212 }, "35;21": { "x": 35, "y": 18.186533479473212 }, "36;21": { "x": 36, "y": 18.186533479473212 }, "37;21": { "x": 37, "y": 18.186533479473212 }, "38;21": { "x": 38, "y": 18.186533479473212 }, "51;21": { "x": 51, "y": 18.186533479473212 }, "52;21": { "x": 52, "y": 18.186533479473212 }, "55;21": { "x": 55, "y": 18.186533479473212 }, "17;22": { "x": 17.5, "y": 19.05255888325765 }, "18;22": { "x": 18.5, "y": 19.05255888325765 }, "19;22": { "x": 19.5, "y": 19.05255888325765 }, "20;22": { "x": 20.5, "y": 19.05255888325765 }, "21;22": { "x": 21.5, "y": 19.05255888325765 }, "22;22": { "x": 22.5, "y": 19.05255888325765 }, "23;22": { "x": 23.5, "y": 19.05255888325765 }, "24;22": { "x": 24.5, "y": 19.05255888325765 }, "34;22": { "x": 34.5, "y": 19.05255888325765 }, "35;22": { "x": 35.5, "y": 19.05255888325765 }, "36;22": { "x": 36.5, "y": 19.05255888325765 }, "37;22": { "x": 37.5, "y": 19.05255888325765 }, "56;22": { "x": 56.5, "y": 19.05255888325765 }, "18;23": { "x": 18, "y": 19.918584287042087 }, "19;23": { "x": 19, "y": 19.918584287042087 }, "20;23": { "x": 20, "y": 19.918584287042087 }, "21;23": { "x": 21, "y": 19.918584287042087 }, "22;23": { "x": 22, "y": 19.918584287042087 }, "23;23": { "x": 23, "y": 19.918584287042087 }, "24;23": { "x": 24, "y": 19.918584287042087 }, "25;23": { "x": 25, "y": 19.918584287042087 }, "34;23": { "x": 34, "y": 19.918584287042087 }, "35;23": { "x": 35, "y": 19.918584287042087 }, "36;23": { "x": 36, "y": 19.918584287042087 }, "37;23": { "x": 37, "y": 19.918584287042087 }, "38;23": { "x": 38, "y": 19.918584287042087 }, "60;23": { "x": 60, "y": 19.918584287042087 }, "18;24": { "x": 18.5, "y": 20.784609690826528 }, "19;24": { "x": 19.5, "y": 20.784609690826528 }, "20;24": { "x": 20.5, "y": 20.784609690826528 }, "21;24": { "x": 21.5, "y": 20.784609690826528 }, "22;24": { "x": 22.5, "y": 20.784609690826528 }, "23;24": { "x": 23.5, "y": 20.784609690826528 }, "24;24": { "x": 24.5, "y": 20.784609690826528 }, "34;24": { "x": 34.5, "y": 20.784609690826528 }, "35;24": { "x": 35.5, "y": 20.784609690826528 }, "36;24": { "x": 36.5, "y": 20.784609690826528 }, "37;24": { "x": 37.5, "y": 20.784609690826528 }, "38;24": { "x": 38.5, "y": 20.784609690826528 }, "53;24": { "x": 53.5, "y": 20.784609690826528 }, "54;24": { "x": 54.5, "y": 20.784609690826528 }, "56;24": { "x": 56.5, "y": 20.784609690826528 }, "20;25": { "x": 20, "y": 21.650635094610966 }, "21;25": { "x": 21, "y": 21.650635094610966 }, "22;25": { "x": 22, "y": 21.650635094610966 }, "23;25": { "x": 23, "y": 21.650635094610966 }, "24;25": { "x": 24, "y": 21.650635094610966 }, "34;25": { "x": 34, "y": 21.650635094610966 }, "35;25": { "x": 35, "y": 21.650635094610966 }, "36;25": { "x": 36, "y": 21.650635094610966 }, "37;25": { "x": 37, "y": 21.650635094610966 }, "40;25": { "x": 40, "y": 21.650635094610966 }, "53;25": { "x": 53, "y": 21.650635094610966 }, "54;25": { "x": 54, "y": 21.650635094610966 }, "55;25": { "x": 55, "y": 21.650635094610966 }, "56;25": { "x": 56, "y": 21.650635094610966 }, "57;25": { "x": 57, "y": 21.650635094610966 }, "19;26": { "x": 19.5, "y": 22.516660498395403 }, "20;26": { "x": 20.5, "y": 22.516660498395403 }, "21;26": { "x": 21.5, "y": 22.516660498395403 }, "22;26": { "x": 22.5, "y": 22.516660498395403 }, "34;26": { "x": 34.5, "y": 22.516660498395403 }, "35;26": { "x": 35.5, "y": 22.516660498395403 }, "36;26": { "x": 36.5, "y": 22.516660498395403 }, "37;26": { "x": 37.5, "y": 22.516660498395403 }, "39;26": { "x": 39.5, "y": 22.516660498395403 }, "51;26": { "x": 51.5, "y": 22.516660498395403 }, "52;26": { "x": 52.5, "y": 22.516660498395403 }, "53;26": { "x": 53.5, "y": 22.516660498395403 }, "54;26": { "x": 54.5, "y": 22.516660498395403 }, "55;26": { "x": 55.5, "y": 22.516660498395403 }, "56;26": { "x": 56.5, "y": 22.516660498395403 }, "57;26": { "x": 57.5, "y": 22.516660498395403 }, "19;27": { "x": 19, "y": 23.38268590217984 }, "20;27": { "x": 20, "y": 23.38268590217984 }, "21;27": { "x": 21, "y": 23.38268590217984 }, "22;27": { "x": 22, "y": 23.38268590217984 }, "35;27": { "x": 35, "y": 23.38268590217984 }, "36;27": { "x": 36, "y": 23.38268590217984 }, "37;27": { "x": 37, "y": 23.38268590217984 }, "52;27": { "x": 52, "y": 23.38268590217984 }, "53;27": { "x": 53, "y": 23.38268590217984 }, "54;27": { "x": 54, "y": 23.38268590217984 }, "55;27": { "x": 55, "y": 23.38268590217984 }, "56;27": { "x": 56, "y": 23.38268590217984 }, "57;27": { "x": 57, "y": 23.38268590217984 }, "58;27": { "x": 58, "y": 23.38268590217984 }, "19;28": { "x": 19.5, "y": 24.24871130596428 }, "20;28": { "x": 20.5, "y": 24.24871130596428 }, "21;28": { "x": 21.5, "y": 24.24871130596428 }, "35;28": { "x": 35.5, "y": 24.24871130596428 }, "52;28": { "x": 52.5, "y": 24.24871130596428 }, "55;28": { "x": 55.5, "y": 24.24871130596428 }, "56;28": { "x": 56.5, "y": 24.24871130596428 }, "57;28": { "x": 57.5, "y": 24.24871130596428 }, "19;29": { "x": 19, "y": 25.11473670974872 }, "20;29": { "x": 20, "y": 25.11473670974872 }, "21;29": { "x": 21, "y": 25.11473670974872 }, "57;29": { "x": 57, "y": 25.11473670974872 }, "18;30": { "x": 18.5, "y": 25.980762113533157 }, "19;30": { "x": 19.5, "y": 25.980762113533157 }, "57;30": { "x": 57.5, "y": 25.980762113533157 }, "62;30": { "x": 62.5, "y": 25.980762113533157 }, "19;31": { "x": 19, "y": 26.846787517317598 }, "18;32": { "x": 18.5, "y": 27.712812921102035 }, "19;32": { "x": 19.5, "y": 27.712812921102035 }, "19;33": { "x": 19, "y": 28.578838324886473 }, "19;34": { "x": 19.5, "y": 29.444863728670914 } }, "X_MIN": -19926188.85199597, "Y_MIN": -7558415.656081783, "X_MAX": 19926188.85199597, "Y_MAX": 11402272.159297233, "X_RANGE": 39852377.70399194, "Y_RANGE": 18960687.815379016, "region": { "lat": { "min": -56, "max": 71 }, "lng": { "min": -179, "max": 179 } }, "grid": "diagonal", "height": 30, "width": 63, "ystep": 0.8660254037844386 };
+
+// Pre-compute dotted map data at module scope
+
+const dottedMap = new DottedMap({ map: mapJsonData as any });
+const geographyPinPositions = geographyCountries.map((country) =>
+  dottedMap.addPin({
+    lat: country.lat,
+    lng: country.lng,
+    svgOptions: { color: "transparent", radius: 0 },
+  }),
+);
+const mapBasePoints = dottedMap.getPoints();
+
+const SPOTLIGHT_RADIUS = 4;
+const spotlightMaps: Map<number, number>[] = geographyPinPositions.map(
+  (pin) => {
+    const dotMap = new Map<number, number>();
+    mapBasePoints.forEach((dot, dotIndex) => {
+      const dx = dot.x - pin.x;
+      const dy = dot.y - pin.y;
+      const distSq = dx * dx + dy * dy;
+      const radiusSq = SPOTLIGHT_RADIUS * SPOTLIGHT_RADIUS;
+      if (distSq <= radiusSq) {
+        const dist = Math.sqrt(distSq);
+        const t = dist / SPOTLIGHT_RADIUS;
+        dotMap.set(dotIndex, 0.35 - t * (0.35 - 0.12));
+      }
+    });
+    return dotMap;
+  },
+);
+
+const orderStatuses = {
+  Delivered: "text-emerald-600 bg-emerald-600/10",
+  Processing: "text-amber-500 bg-amber-500/10",
+  Cancelled: "text-red-600 bg-red-600/10",
+};
+
+const recentOrders = [
+  {
+    customer: { name: "سارا احمدی", avatar: "سا" },
+    orderId: "#ORD-7821",
+    product: "هدفون بی‌سیم",
+    status: "Delivered" as const,
+    amount: 129.99,
+    date: "۲۳ دقیقه پیش",
+  },
+  {
+    customer: { name: "محمد کریمی", avatar: "مک" },
+    orderId: "#ORD-7820",
+    product: "کفش دویدن",
+    status: "Processing" as const,
+    amount: 89.95,
+    date: "۱ ساعت پیش",
+  },
+  {
+    customer: { name: "نازنین موسوی", avatar: "نم" },
+    orderId: "#ORD-7819",
+    product: "کرم صورت ارگانیک",
+    status: "Delivered" as const,
+    amount: 34.5,
+    date: "۲ ساعت پیش",
+  },
+  {
+    customer: { name: "رضا نوری", avatar: "رن" },
+    orderId: "#ORD-7818",
+    product: "اسپیکر بلوتوث",
+    status: "Cancelled" as const,
+    amount: 199.0,
+    date: "۳ ساعت پیش",
+  },
+  {
+    customer: { name: "فاطمه رحیمی", avatar: "فر" },
+    orderId: "#ORD-7817",
+    product: "مت یوگا حرفه‌ای",
+    status: "Delivered" as const,
+    amount: 45.0,
+    date: "۵ ساعت پیش",
+  },
+];
+
+const secondaryNavigation = [
+  { name: "نمای کلی", href: "#", current: true },
+  { name: "سفارش‌ها", href: "#", current: false },
+  { name: "محصولات", href: "#", current: false },
+  { name: "مشتریان", href: "#", current: false },
+  { name: "تحلیل‌ها", href: "#", current: false },
+];
+
+// ============================================================================
+// Chart Configs
+// ============================================================================
+
+const revenueChartConfig = {
+  revenue: {
+    label: "درآمد",
+    color: palette.secondary.light,
+  },
+} satisfies ChartConfig;
+
+// ============================================================================
+// Sidebar Components
+// ============================================================================
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              width={24}
+              height={24}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton
+                  asChild
+                  isActive={child.isActive}
+                  className={
+                    child.isActive
+                      ? "relative overflow-visible before:absolute before:top-0 before:-start-2.5 before:z-10 before:h-full before:w-px before:bg-primary before:content-['']"
+                      : ""
+                  }
+                >
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  const userAvatar = (
+    <Avatar className="size-8 rounded-none">
+      <AvatarImage src={user.avatar} alt={user.name} />
+      <AvatarFallback className="rounded-none">{initials}</AvatarFallback>
+    </Avatar>
+  );
+
+  const userInfo = (
+    <div className="grid flex-1 text-start text-sm leading-tight">
+      <span className="truncate font-medium">{user.name}</span>
+      <span className="truncate text-xs text-muted-foreground">
+        {user.email}
+      </span>
+    </div>
+  );
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              {userAvatar}
+              {userInfo}
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-none"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                {userAvatar}
+                {userInfo}
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <ScrollArea className="h-full">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+// ============================================================================
+// Dashboard Header
+// ============================================================================
+
+const DashboardHeader = () => {
+  return (
+    <header className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-4 border-b bg-background px-4 sm:px-6">
+      <div className="flex flex-1 gap-4 self-stretch">
+        <form className="grid flex-1 grid-cols-1">
+          <input
+            name="search"
+            type="search"
+            placeholder="جستجو…"
+            aria-label="جستجوی داشبورد"
+            autoComplete="off"
+            className="col-start-1 row-start-1 block size-full bg-transparent ps-9 text-sm text-foreground outline-hidden placeholder:text-muted-foreground"
+          />
+          <Search
+            aria-hidden="true"
+            className="pointer-events-none col-start-1 row-start-1 size-4 self-center justify-self-start ms-3 text-muted-foreground"
+          />
+        </form>
+      </div>
+    </header>
+  );
+};
+
+// ============================================================================
+// Secondary Navigation
+// ============================================================================
+
+const SecondaryNav = () => {
+  return (
+    <nav className="flex overflow-x-auto border-b bg-background py-4">
+      <ul
+        role="list"
+        className="flex min-w-full flex-none gap-x-6 px-4 text-sm/6 font-semibold text-muted-foreground sm:px-6"
+      >
+        {secondaryNavigation.map((item) => (
+          <li key={item.name}>
+            <a href={item.href} className={item.current ? "text-primary" : ""}>
+              {item.name}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+// ============================================================================
+// Dashboard Heading
+// ============================================================================
+
+const DashboardHeading = () => {
+  return (
+    <div className="border-b px-4 py-4 sm:px-6">
+      <h1 className="flex gap-x-3 text-base/7">
+        <span className="font-semibold text-foreground">ری یو آی Store</span>
+        <span className="text-muted-foreground/60">/</span>
+        <span className="font-semibold text-foreground">نمای کلی</span>
+      </h1>
+      <p className="mt-2 text-xs/6 text-muted-foreground">
+        تحلیل فروشگاه آنلاین و شاخص‌های عملکرد
+      </p>
+    </div>
+  );
+};
+
+// ============================================================================
+// Dashboard Content Components
+// ============================================================================
+
+// Growth section component (vertical layout for SalesRevenueCard header)
+const GrowthSection = ({
+  label,
+  change,
+}: {
+  label: string;
+  change: number;
+}) => {
+  const isPositive = change >= 0;
+  return (
+    <div className="flex items-center gap-1.5 border bg-muted/30 px-2 py-1">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span
+        className={cn(
+          "font-mono",
+          "flex items-center gap-0.5 text-xs font-medium",
+          isPositive ? "text-emerald-600" : "text-red-600",
+        )}
+      >
+        {isPositive ? (
+          <ArrowUpRight className="size-3" aria-hidden="true" />
+        ) : (
+          <ArrowDownRight className="size-3" aria-hidden="true" />
+        )}
+        {formatChangePercent(change)}
+      </span>
+    </div>
+  );
+};
+
+// KPI Stat Card
+const KPIStatCard = ({ stat }: { stat: KPIStat }) => {
+  const isPositive = stat.change >= 0;
+
+  const formatValue = (value: number, format: KPIStat["format"]) => {
+    switch (format) {
+      case "currency":
+        return currencyFormatter.format(value);
+      case "percent":
+        return percentFormatter.format(value / 100);
+      case "number":
+        return numberFormatter.format(value);
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-2 border-b bg-card px-4 py-6 sm:px-6">
+      <span className="text-xs text-muted-foreground">{stat.title}</span>
+      <div className="flex items-baseline gap-2">
+        <span className={cn("font-mono", "text-xl font-semibold")}>
+          {formatValue(stat.value, stat.format)}
+        </span>
+      </div>
+      <div className="flex items-center gap-1 text-xs">
+        {isPositive ? (
+          <ArrowUpRight
+            className="size-3.5 text-emerald-600"
+            aria-hidden="true"
+          />
+        ) : (
+          <ArrowDownRight
+            className="size-3.5 text-red-600"
+            aria-hidden="true"
+          />
+        )}
+        <span
+          className={cn(
+            "font-mono",
+            isPositive ? "text-emerald-600" : "text-red-600",
+          )}
+        >
+          {formatChangePercent(stat.change)}
+        </span>
+        <span className="text-muted-foreground">نسبت به ماه قبل</span>
+      </div>
+    </div>
+  );
+};
+
+// KPI Stats Row
+const KPIStatsRow = () => {
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-4 [&>*]:border-e [&>*:last-child]:border-e-0">
+      {kpiStats.map((stat) => (
+        <KPIStatCard key={stat.title} stat={stat} />
+      ))}
+    </div>
+  );
+};
+
+// ============================================================================
+// Animated Reference Line Components
+// ============================================================================
+
+interface CustomReferenceLabelProps {
+  viewBox?: { x?: number; y?: number };
+  value: number;
+}
+
+const CustomReferenceLabel: React.FC<CustomReferenceLabelProps> = (props) => {
+  const { viewBox, value } = props;
+  const y = viewBox?.y ?? 0;
+
+  const width = React.useMemo(() => {
+    const characterWidth = 8;
+    const padding = 10;
+    return value.toString().length * characterWidth + padding;
+  }, [value]);
+
+  return (
+    <>
+      <rect
+        x={0}
+        y={y - 9}
+        width={width}
+        height={18}
+        fill="var(--secondary-foreground)"
+        rx={0}
+      />
+      <text
+        className="font-mono"
+        fontWeight={600}
+        x={6}
+        y={y + 4}
+        fill="var(--primary-foreground)"
+      >
+        {compactCurrencyFormatter.format(value)}
+      </text>
+    </>
+  );
+};
+
+// Revenue Bar Chart Tooltip
+function RevenueBarTooltip({
+  active,
+  payload,
+  label,
+}: any) {
+  if (!active || !payload?.length) return null;
+
+  const value = payload[0]?.value || 0;
+
+  return (
+    <div className="border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}
+      </p>
+      <div className="flex items-center gap-1.5 sm:gap-2">
+        <div className="size-2 rounded-full bg-primary sm:size-2.5" />
+        <span className="text-[10px] text-muted-foreground sm:text-sm">
+          درآمد:
+        </span>
+        <span
+          className={cn(
+            "font-mono",
+            "text-[10px] font-medium text-foreground sm:text-sm",
+          )}
+        >
+          {currencyFormatter.format(Number(value))}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// Custom gradient bar shape for Sales Revenue chart
+const CustomGradientBar = (
+  props: React.SVGProps<SVGRectElement> & {
+    index?: number;
+    activeIndex: number | undefined;
+    setActiveIndex: (index: number | undefined) => void;
+    maxValueIndex: number;
+  },
+) => {
+  const {
+    fill,
+    x,
+    y,
+    width,
+    height,
+    index,
+    activeIndex,
+    setActiveIndex,
+    maxValueIndex,
+  } = props;
+  const highlightedIndex =
+    activeIndex !== undefined ? activeIndex : maxValueIndex;
+  const isActive = index === highlightedIndex;
+  const gradientId = `revenue-gradient-${index}`;
+  const barFill = isActive ? palette.secondary.light : palette.tertiary.light;
+
+  return (
+    <g onMouseEnter={() => setActiveIndex(index)}>
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop
+            offset="0%"
+            stopColor={barFill}
+            stopOpacity={isActive ? 0.6 : 0.15}
+          />
+          <stop offset="100%" stopColor={barFill} stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      {/* Gradient body */}
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        fill={`url(#${gradientId})`}
+        stroke="none"
+      />
+      {/* 2px solid cap at top */}
+      <rect x={x} y={y} width={width} height={2} fill={barFill} stroke="none" />
+    </g>
+  );
+};
+
+// Sales Revenue Card with Animated Value Line Bar Chart
+const SalesRevenueCard = () => {
+  const changePercent = 8.2;
+
+  // Track which bar is being hovered
+  const [activeIndex, setActiveIndex] = React.useState<number | undefined>(
+    undefined,
+  );
+
+  // Calculate the currently tracked value (hovered bar or max bar)
+  const maxValueData = React.useMemo(() => {
+    if (activeIndex !== undefined) {
+      return {
+        index: activeIndex,
+        value: monthlyRevenueData[activeIndex].revenue,
+      };
+    }
+    return monthlyRevenueData.reduce(
+      (max, data, index) =>
+        data.revenue > max.value ? { index, value: data.revenue } : max,
+      { index: 0, value: 0 },
+    );
+  }, [activeIndex]);
+
+  const isPositive = changePercent >= 0;
+
+  // Spring animation for the reference line value
+  const valueSpring = useSpring(maxValueData.value, {
+    stiffness: 100,
+    damping: 20,
+  });
+  const [springyValue, setSpringyValue] = React.useState(maxValueData.value);
+
+  useMotionValueEvent(valueSpring, "change", (latest) => {
+    setSpringyValue(Number(latest.toFixed(0)));
+  });
+
+  React.useEffect(() => {
+    valueSpring.set(maxValueData.value);
+  }, [maxValueData.value, valueSpring]);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 bg-card p-4 sm:gap-5 sm:p-5">
+      <div className="flex items-start justify-between gap-4">
+        {/* Left: Title + Value + Change */}
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">درآمد فروش</span>
+          <span
+            className={cn(
+              "font-mono",
+              "text-xl font-semibold tabular-nums sm:text-3xl",
+            )}
+          >
+            {currencyFormatter.format(maxValueData.value)}
+          </span>
+          <div className="flex items-center gap-1">
+            <span
+              className={cn(
+                "font-mono",
+                "text-sm font-medium",
+                isPositive ? "text-emerald-600" : "text-red-600",
+              )}
+            >
+              {formatChangePercent(changePercent)}
+            </span>
+            {isPositive ? (
+              <ArrowUpRight
+                className="size-3.5 text-emerald-600"
+                aria-hidden="true"
+              />
+            ) : (
+              <ArrowDownRight
+                className="size-3.5 text-red-600"
+                aria-hidden="true"
+              />
+            )}
+            <span className="text-sm text-muted-foreground">نسبت به ماه قبل</span>
+          </div>
+        </div>
+
+        {/* Right: Growth sections */}
+        <div className="flex flex-wrap gap-2">
+          <GrowthSection label="۴ هفته" change={11.6} />
+          <GrowthSection label="۱۳ هفته" change={7.9} />
+          <GrowthSection label="۱۲ ماه" change={-3.4} />
+        </div>
+      </div>
+
+      <div className="h-[180px] w-full min-w-0 sm:h-[220px]">
+        <ChartContainer
+          config={revenueChartConfig}
+          className="aspect-auto h-full w-full"
+        >
+          <BarChart
+            data={monthlyRevenueData}
+            onMouseLeave={() => setActiveIndex(undefined)}
+          >
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis hide />
+            <Tooltip content={<RevenueBarTooltip />} cursor={false} />
+            <Bar
+              dataKey="revenue"
+              radius={0}
+              shape={
+                <CustomGradientBar
+                  activeIndex={activeIndex}
+                  setActiveIndex={setActiveIndex}
+                  maxValueIndex={maxValueData.index}
+                />
+              }
+            />
+            <ReferenceLine
+              opacity={0.4}
+              y={springyValue}
+              stroke="var(--secondary-foreground)"
+              strokeWidth={1}
+              strokeDasharray="3 3"
+              label={<CustomReferenceLabel value={maxValueData.value} />}
+            />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+// Proportional Bubble Chart (Pure SVG)
+const ProportionalBubbleChart = ({
+  activeIndex,
+  onHover,
+}: {
+  activeIndex: number | null;
+  onHover: (index: number | null) => void;
+}) => {
+  const maxPct = Math.max(...customerSegmentsData.map((r) => r.percentage));
+  const maxRadius = 70;
+  const positions = [
+    { cx: 180, cy: 105 },
+    { cx: 75, cy: 130 },
+    { cx: 100, cy: 55 },
+  ];
+
+  return (
+    <svg
+      viewBox="0 0 280 200"
+      preserveAspectRatio="xMidYMid meet"
+      className="h-full w-full font-mono"
+      onMouseLeave={() => onHover(null)}
+    >
+      {customerSegmentsData.map((segment, i) => {
+        const baseR = Math.sqrt(segment.percentage / maxPct) * maxRadius;
+        const isActive = activeIndex === i;
+        const isDimmed = activeIndex !== null && activeIndex !== i;
+        const r = isActive ? baseR * 1.08 : baseR;
+        const { cx, cy } = positions[i];
+        return (
+          <g
+            key={segment.name}
+            onMouseEnter={() => onHover(i)}
+            style={{ transition: "opacity 150ms ease-out" }}
+          >
+            <circle
+              cx={cx}
+              cy={cy}
+              r={r}
+              fill={segment.color}
+              fillOpacity={isActive ? 0.4 : isDimmed ? 0.12 : 0.25}
+              stroke={segment.color}
+              strokeWidth={1}
+              strokeOpacity={isActive ? 0.7 : isDimmed ? 0.2 : 0.4}
+              style={{ transition: "all 150ms ease-out" }}
+            />
+            <text
+              x={cx}
+              y={isActive ? cy - 8 : cy}
+              textAnchor="middle"
+              dominantBaseline="central"
+              fill="currentColor"
+              fontSize={14}
+              fontWeight={600}
+              style={{
+                opacity: isDimmed ? 0.4 : 1,
+                transition: "all 150ms ease-out",
+              }}
+            >
+              {segment.percentage.toLocaleString("fa-IR")}٪
+            </text>
+            {isActive && (
+              <text
+                x={cx}
+                y={cy + 10}
+                textAnchor="middle"
+                dominantBaseline="central"
+                fill="currentColor"
+                fontSize={10}
+                style={{
+                  opacity: 0.6,
+                  transition: "opacity 150ms ease-out",
+                }}
+              >
+                {segment.name}
+              </text>
+            )}
+          </g>
+        );
+      })}
+    </svg>
+  );
+};
+
+// Customer Segments Card
+const CustomerSegmentsCard = () => {
+  const isPositive = totalCustomersChange >= 0;
+  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
+
+  return (
+    <div
+      className="flex min-w-0 flex-col gap-4 bg-card p-4 sm:gap-5 sm:p-5"
+      onMouseLeave={() => setActiveIndex(null)}
+    >
+      {/* Header - matches SalesRevenueCard pattern */}
+      <div className="flex items-start justify-between gap-4">
+        {/* Left: Title + Value + Change */}
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">کل مشتریان</span>
+          <span
+            className={cn("font-mono", "text-xl font-semibold tabular-nums")}
+          >
+            {numberFormatter.format(totalCustomers)}
+          </span>
+          <div className="flex items-center gap-1">
+            <span
+              className={cn(
+                "font-mono",
+                "text-sm font-medium",
+                isPositive ? "text-emerald-600" : "text-red-600",
+              )}
+            >
+              {formatChangePercent(totalCustomersChange)}
+            </span>
+            {isPositive ? (
+              <ArrowUpRight
+                className="size-3.5 text-emerald-600"
+                aria-hidden="true"
+              />
+            ) : (
+              <ArrowDownRight
+                className="size-3.5 text-red-600"
+                aria-hidden="true"
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Right: Details button */}
+        <Button variant="outline" size="sm" className="h-7 px-2 text-xs">
+          جزئیات
+        </Button>
+      </div>
+
+      {/* Bubble chart */}
+      <div className="h-[160px]">
+        <ProportionalBubbleChart
+          activeIndex={activeIndex}
+          onHover={setActiveIndex}
+        />
+      </div>
+
+      {/* Legend rows */}
+      <div className="flex flex-col gap-3">
+        {customerSegmentsData.map((segment, i) => {
+          const segmentPositive = segment.change >= 0;
+          const isActive = activeIndex === i;
+          const isDimmed = activeIndex !== null && activeIndex !== i;
+          return (
+            <div
+              key={segment.name}
+              className="flex items-center justify-between"
+              style={{
+                opacity: isDimmed ? 0.4 : 1,
+                transition: "opacity 150ms ease-out",
+              }}
+              onMouseEnter={() => setActiveIndex(i)}
+              onMouseLeave={() => setActiveIndex(null)}
+            >
+              <div className="flex items-center gap-2">
+                <div
+                  className="h-2 w-2 rounded-full"
+                  style={{ backgroundColor: segment.color }}
+                />
+                <span
+                  className={cn(
+                    "text-sm text-muted-foreground",
+                    isActive && "font-medium text-foreground",
+                  )}
+                  style={{ transition: "all 150ms ease-out" }}
+                >
+                  {segment.name}
+                </span>
+              </div>
+              <div className="flex items-center gap-4">
+                <span
+                  className={cn(
+                    "font-mono",
+                    "text-sm font-medium tabular-nums",
+                  )}
+                >
+                  {numberFormatter.format(segment.customers)}
+                </span>
+                <div
+                  className={cn(
+                    "font-mono",
+                    "flex items-center gap-0.5 text-xs tabular-nums",
+                    segmentPositive ? "text-emerald-600" : "text-red-600",
+                  )}
+                >
+                  {segmentPositive ? (
+                    <ArrowUpRight className="size-3" aria-hidden="true" />
+                  ) : (
+                    <ArrowDownRight className="size-3" aria-hidden="true" />
+                  )}
+                  {formatChangePercent(segment.change)}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+// Dotted World Map (Pure SVG)
+const DottedWorldMap = ({
+  activeIndex,
+  onSelect,
+  hoveredIndex,
+  onHover,
+}: {
+  activeIndex: number | null;
+  onSelect: (index: number | null) => void;
+  hoveredIndex: number | null;
+  onHover: (index: number | null) => void;
+}) => {
+  const maxUsers = Math.max(...geographyCountries.map((c) => c.users));
+  const minRadius = 1.2;
+  const maxRadius = 2.8;
+
+  return (
+    <svg
+      viewBox="0 0 63 30"
+      preserveAspectRatio="xMidYMid meet"
+      className="h-full w-full"
+      onMouseLeave={() => onHover(null)}
+    >
+      <defs>
+        <style>{`
+          @keyframes mapMarkerPulse {
+            0% { opacity: 1.0; }
+            50% { opacity: 0.65; }
+            100% { opacity: 1.0; }
+          }
+        `}</style>
+      </defs>
+      {mapBasePoints.map((point, i) => {
+        let dotOpacity = 0.12;
+        if (hoveredIndex !== null) {
+          const boosted = spotlightMaps[hoveredIndex].get(i);
+          dotOpacity = boosted !== undefined ? boosted : 0.12;
+        }
+        return (
+          <circle
+            key={i}
+            cx={point.x}
+            cy={point.y}
+            r={0.35}
+            fill="currentColor"
+            opacity={dotOpacity}
+            style={{ transition: "opacity 300ms ease-out" }}
+          />
+        );
+      })}
+
+      {geographyPinPositions.map((pin, i) => {
+        const isActive = activeIndex === i;
+        const isHovered = hoveredIndex === i;
+        const isDimmed =
+          (activeIndex !== null || hoveredIndex !== null) &&
+          !isActive &&
+          !isHovered;
+        const ratio = geographyCountries[i].users / maxUsers;
+        const baseR = minRadius + ratio * (maxRadius - minRadius);
+        const r = isActive ? baseR * 1.15 : isHovered ? baseR * 1.08 : baseR;
+
+        const markerFill = isActive
+          ? palette.primary
+          : isHovered
+            ? palette.secondary.light
+            : palette.tertiary.light;
+        const markerOpacity = isActive
+          ? 0.7
+          : isHovered
+            ? 0.6
+            : isDimmed
+              ? 0.2
+              : 0.5;
+        const isIdle = !isActive && !isHovered && !isDimmed;
+
+        return (
+          <g
+            key={geographyCountries[i].name}
+            onClick={() => onSelect(isActive ? null : i)}
+            onMouseEnter={() => onHover(i)}
+            style={{
+              cursor: "pointer",
+              animation: isIdle
+                ? `mapMarkerPulse 3s ease-in-out ${i * 0.6}s infinite`
+                : "none",
+            }}
+          >
+            {isActive && (
+              <circle
+                cx={pin.x}
+                cy={pin.y}
+                r={r * 2.5}
+                fill={palette.primary}
+                fillOpacity={0.08}
+                stroke={palette.primary}
+                strokeWidth={0.3}
+                strokeOpacity={0.15}
+                style={{ transition: "all 150ms ease-out" }}
+              />
+            )}
+            {isHovered && !isActive && (
+              <circle
+                cx={pin.x}
+                cy={pin.y}
+                r={r * 2.0}
+                fill={palette.tertiary.light}
+                fillOpacity={0.06}
+                stroke={palette.tertiary.light}
+                strokeWidth={0.2}
+                strokeOpacity={0.12}
+                style={{ transition: "all 150ms ease-out" }}
+              />
+            )}
+            <circle
+              cx={pin.x}
+              cy={pin.y}
+              r={r}
+              fill={markerFill}
+              fillOpacity={markerOpacity}
+              stroke={markerFill}
+              strokeWidth={0.4}
+              strokeOpacity={
+                isActive ? 0.9 : isHovered ? 0.6 : isDimmed ? 0.1 : 0.4
+              }
+              style={{ transition: "all 150ms ease-out" }}
+            />
+          </g>
+        );
+      })}
+    </svg>
+  );
+};
+
+// Geography Card
+const GeographyCard = () => {
+  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
+  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);
+
+  const selected =
+    activeIndex !== null ? geographyCountries[activeIndex] : null;
+  const hovered =
+    hoveredIndex !== null ? geographyCountries[hoveredIndex] : null;
+  const previewCountry = hovered ?? selected;
+
+  const globalDemographics = {
+    men: Math.round(
+      geographyCountries.reduce((s, c) => s + c.demographics.men * c.users, 0) /
+      totalGeographyUsers,
+    ),
+    women: Math.round(
+      geographyCountries.reduce(
+        (s, c) => s + c.demographics.women * c.users,
+        0,
+      ) / totalGeographyUsers,
+    ),
+    other: Math.round(
+      geographyCountries.reduce(
+        (s, c) => s + c.demographics.other * c.users,
+        0,
+      ) / totalGeographyUsers,
+    ),
+  };
+
+  const displayUsers = previewCountry
+    ? previewCountry.users
+    : totalGeographyUsers;
+  const displayDemographics = previewCountry
+    ? previewCountry.demographics
+    : globalDemographics;
+  const displayLabel = previewCountry
+    ? { flag: previewCountry.flag, name: previewCountry.name }
+    : null;
+
+  const tooltipCountry = hovered;
+  const tooltipPin =
+    hoveredIndex !== null ? geographyPinPositions[hoveredIndex] : null;
+
+  const viewBoxW = 63;
+  const viewBoxH = 30;
+
+  let tooltipLeft = 0;
+  let tooltipTop = 0;
+  let tooltipAbove = false;
+  if (tooltipPin) {
+    tooltipLeft = (tooltipPin.x / viewBoxW) * 100;
+    tooltipTop = (tooltipPin.y / viewBoxH) * 100;
+    tooltipAbove = tooltipPin.y > viewBoxH / 2;
+  }
+
+  const tooltipTranslateX =
+    tooltipLeft < 20 ? "0%" : tooltipLeft > 80 ? "-100%" : "-50%";
+
+  return (
+    <div className="flex min-w-0 flex-col gap-4 bg-card p-4 sm:gap-5 sm:p-5">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">جغرافیا</span>
+          <div className="flex items-baseline gap-2">
+            <span
+              className={cn("font-mono", "text-xl font-semibold tabular-nums")}
+            >
+              {numberFormatter.format(displayUsers)}
+            </span>
+            {displayLabel && (
+              <span className="flex items-center gap-1 border bg-muted/30 px-1.5 py-0.5 text-xs text-muted-foreground">
+                {displayLabel.flag} {displayLabel.name}
+              </span>
+            )}
+          </div>
+        </div>
+        <Button variant="outline" size="sm" className="h-7 px-2 text-xs">
+          جزئیات
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="flex h-1.5 flex-1 overflow-hidden">
+          <div
+            style={{
+              width: `${displayDemographics.men}%`,
+              backgroundColor: palette.primary,
+              transition: "width 150ms ease-out",
+            }}
+            className="h-full"
+          />
+          <div
+            style={{
+              width: `${displayDemographics.women}%`,
+              backgroundColor: palette.tertiary.light,
+              transition: "width 150ms ease-out",
+            }}
+            className="h-full"
+          />
+          <div
+            style={{
+              width: `${displayDemographics.other}%`,
+              backgroundColor: palette.quinary.light,
+              transition: "width 150ms ease-out",
+            }}
+            className="h-full"
+          />
+        </div>
+      </div>
+      <div className="flex items-center gap-3 text-xs text-muted-foreground">
+        <span className="flex items-center gap-1">
+          <span
+            className="inline-block h-1.5 w-1.5 rounded-full"
+            style={{ backgroundColor: palette.primary }}
+          />
+          مرد {displayDemographics.men.toLocaleString("fa-IR")}٪
+        </span>
+        <span className="flex items-center gap-1">
+          <span
+            className="inline-block h-1.5 w-1.5 rounded-full"
+            style={{ backgroundColor: palette.tertiary.light }}
+          />
+          زن {displayDemographics.women.toLocaleString("fa-IR")}٪
+        </span>
+        <span className="flex items-center gap-1">
+          <span
+            className="inline-block h-1.5 w-1.5 rounded-full"
+            style={{ backgroundColor: palette.quinary.light }}
+          />
+          سایر {displayDemographics.other.toLocaleString("fa-IR")}٪
+        </span>
+      </div>
+
+      <div className="relative h-[200px]">
+        <DottedWorldMap
+          activeIndex={activeIndex}
+          onSelect={setActiveIndex}
+          hoveredIndex={hoveredIndex}
+          onHover={setHoveredIndex}
+        />
+
+        {tooltipCountry && tooltipPin && (
+          <div
+            className="pointer-events-none absolute z-10 flex flex-col gap-1.5 border border-border bg-popover px-3 py-2 shadow-lg"
+            style={{
+              left: `${tooltipLeft}%`,
+              top: tooltipAbove ? `${tooltipTop}%` : `${tooltipTop}%`,
+              transform: `${tooltipTranslateX !== "-50%" ? `translateX(${tooltipTranslateX})` : "translateX(-50%)"} ${tooltipAbove ? "translateY(calc(-100% - 12px))" : "translateY(12px)"}`,
+              opacity: 1,
+              transition: "opacity 150ms ease-out, transform 150ms ease-out",
+            }}
+          >
+            <div className="flex items-center gap-1.5 text-xs font-medium text-foreground">
+              <span>{tooltipCountry.flag}</span>
+              <span>{tooltipCountry.name}</span>
+            </div>
+            <span
+              className={cn(
+                "font-mono",
+                "text-sm font-semibold text-foreground tabular-nums",
+              )}
+            >
+              {numberFormatter.format(tooltipCountry.users)}
+            </span>
+            <div className="flex h-1 w-full overflow-hidden">
+              <div
+                style={{
+                  width: `${tooltipCountry.demographics.men}%`,
+                  backgroundColor: palette.primary,
+                }}
+                className="h-full"
+              />
+              <div
+                style={{
+                  width: `${tooltipCountry.demographics.women}%`,
+                  backgroundColor: palette.tertiary.light,
+                }}
+                className="h-full"
+              />
+              <div
+                style={{
+                  width: `${tooltipCountry.demographics.other}%`,
+                  backgroundColor: palette.quinary.light,
+                }}
+                className="h-full"
+              />
+            </div>
+            <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+              <span>م {tooltipCountry.demographics.men.toLocaleString("fa-IR")}٪</span>
+              <span>ز {tooltipCountry.demographics.women.toLocaleString("fa-IR")}٪</span>
+              <span>س {tooltipCountry.demographics.other.toLocaleString("fa-IR")}٪</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Recent Orders Card (activity table)
+function RecentOrdersCard() {
+  return (
+    <div className="flex flex-col bg-card">
+      <div className="px-4 pt-5 sm:px-6">
+        <h2 className="text-sm font-medium text-foreground">سفارش‌های اخیر</h2>
+      </div>
+      <div className="mt-4">
+        <table className="w-full text-start">
+          <colgroup>
+            <col className="w-full sm:w-4/12" />
+            <col className="sm:w-2/12" />
+            <col className="sm:w-2/12" />
+            <col className="sm:w-2/12" />
+            <col className="sm:w-2/12" />
+          </colgroup>
+          <thead className="border-b border-border text-xs text-muted-foreground">
+            <tr>
+              <th scope="col" className="py-2 pe-3 ps-4 font-medium sm:ps-6">
+                مشتری
+              </th>
+              <th
+                scope="col"
+                className="hidden px-3 py-2 font-medium sm:table-cell"
+              >
+                سفارش
+              </th>
+              <th scope="col" className="px-3 py-2 font-medium">
+                وضعیت
+              </th>
+              <th scope="col" className="px-3 py-2 text-end font-medium">
+                مبلغ
+              </th>
+              <th
+                scope="col"
+                className="hidden py-2 pe-4 ps-3 text-end font-medium sm:table-cell sm:pe-6"
+              >
+                زمان
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {recentOrders.map((order) => (
+              <tr key={order.orderId}>
+                <td className="py-3 pe-3 ps-4 sm:ps-6">
+                  <div className="flex items-center gap-x-3">
+                    <div className="flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+                      {order.customer.avatar}
+                    </div>
+                    <span className="text-sm font-medium text-foreground">
+                      {order.customer.name}
+                    </span>
+                  </div>
+                </td>
+                <td className="hidden px-3 py-3 sm:table-cell">
+                  <span className="font-mono text-xs text-muted-foreground">
+                    {order.orderId}
+                  </span>
+                </td>
+                <td className="px-3 py-3">
+                  <span
+                    className={`inline-flex items-center gap-x-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${orderStatuses[order.status]}`}
+                  >
+                    <span className="size-1.5 rounded-full bg-current" />
+                    {orderStatusLabels[order.status]}
+                  </span>
+                </td>
+                <td className="px-3 py-3 text-end">
+                  <span className="font-mono text-sm text-foreground">
+                    {currencyFormatter.format(order.amount)}
+                  </span>
+                </td>
+                <td className="hidden py-3 pe-4 ps-3 text-end sm:table-cell sm:pe-6">
+                  <span className="text-xs text-muted-foreground">
+                    {order.date}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// Main Dashboard Content
+const DashboardContent = () => {
+  return (
+    <div id="dashboard-main" className="flex w-full flex-1 flex-col bg-card">
+      {/* Heading */}
+      <DashboardHeading />
+
+      {/* KPI Stats Row */}
+      <KPIStatsRow />
+
+      {/* Middle Row: Sales Revenue + Segmentation */}
+      <div className="grid lg:grid-cols-3">
+        <div className="border-b lg:col-span-2 lg:border-e">
+          <SalesRevenueCard />
+        </div>
+        <div className="border-b">
+          <CustomerSegmentsCard />
+        </div>
+      </div>
+
+      {/* Bottom Row: Geography + Recent Orders */}
+      <div className="grid lg:grid-cols-3">
+        <div className="border-b lg:border-e">
+          <GeographyCard />
+        </div>
+        <div className="border-b lg:col-span-2">
+          <RecentOrdersCard />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// Main Dashboard Component
+// ============================================================================
+
+const Dashboard12 = ({ className }: { className?: string }) => {
+  return (
+    <TooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+        style={{ "--sidebar-width": "18rem" } as React.CSSProperties}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-auto md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <SecondaryNav />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+};
+
+export { Dashboard12 };
diff --git a/blocks/dashboard2.tsx b/blocks/dashboard2.tsx
new file mode 100644
index 0000000..1fbbae6
--- /dev/null
+++ b/blocks/dashboard2.tsx
@@ -0,0 +1,2472 @@
+"use client";
+
+import {
+  Activity,
+  ArrowDownRight,
+  ArrowUpRight,
+  BarChart3,
+  Bell,
+  Building2,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  CircleDollarSign,
+  Clock,
+  Copy,
+  CreditCard,
+  Download,
+  Eye,
+  FileText,
+  Filter,
+  LayoutDashboard,
+  LogOut,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Receipt,
+  RotateCcw,
+  Search,
+  Settings,
+  ShoppingCart,
+  User,
+  UserPlus,
+  Users,
+  Wallet,
+  X,
+  XCircle,
+  Zap,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+    href: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type TransactionStatus = "completed" | "pending" | "failed" | "refunded";
+
+type TransactionType = "Sale" | "Refund" | "Subscription";
+
+type Transaction = {
+  id: string;
+  txnId: string;
+  amount: number;
+  customerName: string;
+  customerInitials: string;
+  type: TransactionType;
+  paymentMethod: "Credit Card" | "Debit Card" | "PayPal" | "Bank Transfer";
+  date: string;
+  status: TransactionStatus;
+};
+
+type PeriodKey = "30days" | "3months" | "1year";
+
+type RevenueDataPoint = {
+  month: string;
+  revenue: number;
+};
+
+type CostDataPoint = {
+  month: string;
+  cogs: number;
+  operatingExpenses: number;
+};
+
+type PeriodSummary = {
+  total: number;
+  change: number;
+  isPositive: boolean;
+};
+
+type StatItem = {
+  title: string;
+  previousValue: number;
+  value: number;
+  changePercent: number;
+  isPositive: boolean;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  format: "currency" | "percentage";
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 0,
+});
+
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const formatTransactionDate = (date: string): string => {
+  if (date === "Today") return "امروز";
+  const dayAgoMatch = date.match(/^(\d+) day ago$/);
+  if (dayAgoMatch) {
+    return `${Number(dayAgoMatch[1]).toLocaleString("fa-IR")} روز پیش`;
+  }
+  const daysAgoMatch = date.match(/^(\d+) days ago$/);
+  if (daysAgoMatch) {
+    return `${Number(daysAgoMatch[1]).toLocaleString("fa-IR")} روز پیش`;
+  }
+  return date;
+};
+
+const transactionTypeLabels: Record<TransactionType, string> = {
+  Sale: "فروش",
+  Refund: "بازپرداخت",
+  Subscription: "اشتراک",
+};
+
+const paymentMethodLabels: Record<Transaction["paymentMethod"], string> = {
+  "Credit Card": "کارت اعتباری",
+  "Debit Card": "کارت نقدی",
+  PayPal: "پی‌پال",
+  "Bank Transfer": "انتقال بانکی",
+};
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+};
+
+const revenueChartConfig = {
+  revenue: { label: "درآمد", color: palette.primary },
+} satisfies ChartConfig;
+
+const costsChartConfig = {
+  cogs: { label: "بهای تمام‌شده", color: palette.primary },
+  operatingExpenses: {
+    label: "هزینه‌های عملیاتی",
+    theme: palette.secondary,
+  },
+} satisfies ChartConfig;
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان‌بلاکس",
+    title: "ShadcnBlocks",
+    description: "پلتفرم سامانه ابری",
+    href: "https://www.ShadcnBlocks",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "تحلیل‌ها", icon: BarChart3, href: "#" },
+        { label: "فعالیت", icon: Activity, href: "#" },
+      ],
+    },
+    {
+      title: "کاربران",
+      defaultOpen: true,
+      items: [
+        {
+          label: "فهرست",
+          icon: Users,
+          href: "#",
+          children: [
+            { label: "همه کاربران", icon: User, href: "#" },
+            { label: "فضاهای کاری", icon: Building2, href: "#" },
+          ],
+        },
+        { label: "دعوت‌ها", icon: UserPlus, href: "#" },
+      ],
+    },
+    {
+      title: "صورتحساب",
+      defaultOpen: false,
+      items: [
+        { label: "اشتراک‌ها", icon: CreditCard, href: "#" },
+        { label: "مصرف", icon: Zap, href: "#" },
+        { label: "فاکتورها", icon: Receipt, href: "#" },
+      ],
+    },
+    {
+      title: "گزارش‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "گزارش‌های ذخیره‌شده", icon: FileText, href: "#" },
+        { label: "خروجی‌ها", icon: Download, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "مریم الیس",
+    email: "morgan.ellis@northwind.app",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+  },
+};
+
+const headerNotificationItems = [
+  {
+    id: "1",
+    title: "فید بانکی همگام شد",
+    body: "۴۲ تراکنش جدید از حساب جاری نورث‌ویند وارد شد.",
+    time: "۴ دقیقه پیش",
+  },
+  {
+    id: "2",
+    title: "آستانه بودجه",
+    body: "هزینه بازاریابی به ۸۸٪ سقف فصلی رسیده است.",
+    time: "۱ ساعت پیش",
+  },
+  {
+    id: "3",
+    title: "یادآوری تطبیق",
+    body: "۳ حساب برای بستن پایان ماه نیاز به بررسی دارند.",
+    time: "۳ ساعت پیش",
+  },
+  {
+    id: "4",
+    title: "گزارش CFO آماده است",
+    body: "صورت سود و زیان یکپارچه ماه گذشته برای خروجی در دسترس است.",
+    time: "دیروز",
+  },
+] as const;
+
+const unreadNotificationCount = headerNotificationItems.length;
+
+const revenueData: Record<PeriodKey, RevenueDataPoint[]> = {
+  "30days": [
+    { month: "هفته ۱", revenue: 87500 },
+    { month: "هفته ۲", revenue: 95200 },
+    { month: "هفته ۳", revenue: 102800 },
+    { month: "هفته ۴", revenue: 91400 },
+    { month: "هفته ۵", revenue: 110600 },
+  ],
+  "3months": [
+    { month: monthLabel(9), revenue: 342000 },
+    { month: monthLabel(10), revenue: 378000 },
+    { month: monthLabel(11), revenue: 456000 },
+    { month: monthLabel(0), revenue: 398000 },
+    { month: monthLabel(1), revenue: 412000 },
+    { month: monthLabel(2), revenue: 445000 },
+  ],
+  "1year": [
+    { month: monthLabel(0), revenue: 285000 },
+    { month: monthLabel(1), revenue: 312000 },
+    { month: monthLabel(2), revenue: 338000 },
+    { month: monthLabel(3), revenue: 356000 },
+    { month: monthLabel(4), revenue: 342000 },
+    { month: monthLabel(5), revenue: 378000 },
+    { month: monthLabel(6), revenue: 395000 },
+    { month: monthLabel(7), revenue: 418000 },
+    { month: monthLabel(8), revenue: 432000 },
+    { month: monthLabel(9), revenue: 456000 },
+    { month: monthLabel(10), revenue: 478000 },
+    { month: monthLabel(11), revenue: 512000 },
+  ],
+};
+
+const costsData: Record<PeriodKey, CostDataPoint[]> = {
+  "30days": [
+    { month: "هفته ۱", cogs: 31500, operatingExpenses: 18200 },
+    { month: "هفته ۲", cogs: 34100, operatingExpenses: 19800 },
+    { month: "هفته ۳", cogs: 37000, operatingExpenses: 20500 },
+    { month: "هفته ۴", cogs: 32800, operatingExpenses: 19100 },
+    { month: "هفته ۵", cogs: 39800, operatingExpenses: 21600 },
+  ],
+  "3months": [
+    { month: monthLabel(9), cogs: 123100, operatingExpenses: 68400 },
+    { month: monthLabel(10), cogs: 136100, operatingExpenses: 75600 },
+    { month: monthLabel(11), cogs: 164200, operatingExpenses: 91200 },
+    { month: monthLabel(0), cogs: 143300, operatingExpenses: 79600 },
+    { month: monthLabel(1), cogs: 148300, operatingExpenses: 82400 },
+    { month: monthLabel(2), cogs: 160200, operatingExpenses: 89000 },
+  ],
+  "1year": [
+    { month: monthLabel(0), cogs: 102600, operatingExpenses: 57000 },
+    { month: monthLabel(1), cogs: 112300, operatingExpenses: 62400 },
+    { month: monthLabel(2), cogs: 121700, operatingExpenses: 67600 },
+    { month: monthLabel(3), cogs: 128200, operatingExpenses: 71200 },
+    { month: monthLabel(4), cogs: 123100, operatingExpenses: 68400 },
+    { month: monthLabel(5), cogs: 136100, operatingExpenses: 75600 },
+    { month: monthLabel(6), cogs: 142200, operatingExpenses: 79000 },
+    { month: monthLabel(7), cogs: 150500, operatingExpenses: 83600 },
+    { month: monthLabel(8), cogs: 155500, operatingExpenses: 86400 },
+    { month: monthLabel(9), cogs: 164200, operatingExpenses: 91200 },
+    { month: monthLabel(10), cogs: 172100, operatingExpenses: 95600 },
+    { month: monthLabel(11), cogs: 184300, operatingExpenses: 102400 },
+  ],
+};
+
+const revenueSummary: Record<PeriodKey, PeriodSummary> = {
+  "30days": { total: 487500, change: 14.2, isPositive: true },
+  "3months": { total: 2431000, change: 11.8, isPositive: true },
+  "1year": { total: 4702000, change: 18.5, isPositive: true },
+};
+
+const costsSummary: Record<PeriodKey, PeriodSummary> = {
+  "30days": { total: 274400, change: 8.6, isPositive: false },
+  "3months": { total: 1361400, change: 9.3, isPositive: false },
+  "1year": { total: 2705800, change: 12.1, isPositive: false },
+};
+
+const statsData: StatItem[] = [
+  {
+    title: "درآمد ناخالص",
+    previousValue: 426800,
+    value: 487500,
+    changePercent: 14.2,
+    isPositive: true,
+    icon: CircleDollarSign,
+    format: "currency",
+  },
+  {
+    title: "سود خالص",
+    previousValue: 168200,
+    value: 213100,
+    changePercent: 26.7,
+    isPositive: true,
+    icon: Wallet,
+    format: "currency",
+  },
+  {
+    title: "نرخ بازپرداخت",
+    previousValue: 0.042,
+    value: 0.031,
+    changePercent: 26.2,
+    isPositive: true,
+    icon: RotateCcw,
+    format: "percentage",
+  },
+  {
+    title: "میانگین تراکنش",
+    previousValue: 68.4,
+    value: 74.2,
+    changePercent: 8.5,
+    isPositive: true,
+    icon: CreditCard,
+    format: "currency",
+  },
+];
+
+const transactionRecords: Transaction[] = [
+  {
+    id: "1",
+    txnId: "TXN-100201",
+    amount: 129.99,
+    customerName: "Sarah Johnson",
+    customerInitials: "SJ",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "Today",
+    status: "completed",
+  },
+  {
+    id: "2",
+    txnId: "TXN-100202",
+    amount: 84.5,
+    customerName: "Michael Chen",
+    customerInitials: "MC",
+    type: "Sale",
+    paymentMethod: "PayPal",
+    date: "Today",
+    status: "completed",
+  },
+  {
+    id: "3",
+    txnId: "TXN-100203",
+    amount: 249.0,
+    customerName: "Emma Wilson",
+    customerInitials: "EW",
+    type: "Subscription",
+    paymentMethod: "Credit Card",
+    date: "Today",
+    status: "pending",
+  },
+  {
+    id: "4",
+    txnId: "TXN-100204",
+    amount: 45.99,
+    customerName: "James Rodriguez",
+    customerInitials: "JR",
+    type: "Refund",
+    paymentMethod: "Debit Card",
+    date: "Today",
+    status: "refunded",
+  },
+  {
+    id: "5",
+    txnId: "TXN-100205",
+    amount: 312.0,
+    customerName: "Lisa Park",
+    customerInitials: "LP",
+    type: "Sale",
+    paymentMethod: "Bank Transfer",
+    date: "Today",
+    status: "failed",
+  },
+  {
+    id: "6",
+    txnId: "TXN-100206",
+    amount: 67.25,
+    customerName: "David Kim",
+    customerInitials: "DK",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "1 day ago",
+    status: "completed",
+  },
+  {
+    id: "7",
+    txnId: "TXN-100207",
+    amount: 189.99,
+    customerName: "Anna Martinez",
+    customerInitials: "AM",
+    type: "Subscription",
+    paymentMethod: "PayPal",
+    date: "1 day ago",
+    status: "completed",
+  },
+  {
+    id: "8",
+    txnId: "TXN-100208",
+    amount: 95.0,
+    customerName: "Robert Taylor",
+    customerInitials: "RT",
+    type: "Sale",
+    paymentMethod: "Debit Card",
+    date: "1 day ago",
+    status: "pending",
+  },
+  {
+    id: "9",
+    txnId: "TXN-100209",
+    amount: 156.5,
+    customerName: "Jennifer Lee",
+    customerInitials: "JL",
+    type: "Refund",
+    paymentMethod: "Credit Card",
+    date: "1 day ago",
+    status: "refunded",
+  },
+  {
+    id: "10",
+    txnId: "TXN-100210",
+    amount: 78.99,
+    customerName: "William Brown",
+    customerInitials: "WB",
+    type: "Sale",
+    paymentMethod: "PayPal",
+    date: "2 days ago",
+    status: "completed",
+  },
+  {
+    id: "11",
+    txnId: "TXN-100211",
+    amount: 425.0,
+    customerName: "Sophia Davis",
+    customerInitials: "SD",
+    type: "Subscription",
+    paymentMethod: "Credit Card",
+    date: "2 days ago",
+    status: "completed",
+  },
+  {
+    id: "12",
+    txnId: "TXN-100212",
+    amount: 34.99,
+    customerName: "Daniel Garcia",
+    customerInitials: "DG",
+    type: "Sale",
+    paymentMethod: "Debit Card",
+    date: "2 days ago",
+    status: "failed",
+  },
+  {
+    id: "13",
+    txnId: "TXN-100213",
+    amount: 210.0,
+    customerName: "Olivia White",
+    customerInitials: "OW",
+    type: "Sale",
+    paymentMethod: "Bank Transfer",
+    date: "3 days ago",
+    status: "completed",
+  },
+  {
+    id: "14",
+    txnId: "TXN-100214",
+    amount: 149.99,
+    customerName: "Thomas Anderson",
+    customerInitials: "TA",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "3 days ago",
+    status: "completed",
+  },
+  {
+    id: "15",
+    txnId: "TXN-100215",
+    amount: 62.5,
+    customerName: "Emily Thompson",
+    customerInitials: "ET",
+    type: "Refund",
+    paymentMethod: "PayPal",
+    date: "3 days ago",
+    status: "refunded",
+  },
+  {
+    id: "16",
+    txnId: "TXN-100216",
+    amount: 299.0,
+    customerName: "Christopher Moore",
+    customerInitials: "CM",
+    type: "Subscription",
+    paymentMethod: "Credit Card",
+    date: "4 days ago",
+    status: "completed",
+  },
+  {
+    id: "17",
+    txnId: "TXN-100217",
+    amount: 88.75,
+    customerName: "Isabella Jackson",
+    customerInitials: "IJ",
+    type: "Sale",
+    paymentMethod: "Debit Card",
+    date: "4 days ago",
+    status: "pending",
+  },
+  {
+    id: "18",
+    txnId: "TXN-100218",
+    amount: 175.0,
+    customerName: "Matthew Harris",
+    customerInitials: "MH",
+    type: "Sale",
+    paymentMethod: "Bank Transfer",
+    date: "5 days ago",
+    status: "completed",
+  },
+  {
+    id: "19",
+    txnId: "TXN-100219",
+    amount: 42.99,
+    customerName: "Ava Clark",
+    customerInitials: "AC",
+    type: "Sale",
+    paymentMethod: "PayPal",
+    date: "5 days ago",
+    status: "failed",
+  },
+  {
+    id: "20",
+    txnId: "TXN-100220",
+    amount: 520.0,
+    customerName: "Joshua Lewis",
+    customerInitials: "JL",
+    type: "Subscription",
+    paymentMethod: "Credit Card",
+    date: "5 days ago",
+    status: "completed",
+  },
+  {
+    id: "21",
+    txnId: "TXN-100221",
+    amount: 37.5,
+    customerName: "Mia Robinson",
+    customerInitials: "MR",
+    type: "Refund",
+    paymentMethod: "Debit Card",
+    date: "6 days ago",
+    status: "refunded",
+  },
+  {
+    id: "22",
+    txnId: "TXN-100222",
+    amount: 165.0,
+    customerName: "Ethan Walker",
+    customerInitials: "EW",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "6 days ago",
+    status: "completed",
+  },
+  {
+    id: "23",
+    txnId: "TXN-100223",
+    amount: 99.99,
+    customerName: "Charlotte Hall",
+    customerInitials: "CH",
+    type: "Sale",
+    paymentMethod: "PayPal",
+    date: "7 days ago",
+    status: "pending",
+  },
+  {
+    id: "24",
+    txnId: "TXN-100224",
+    amount: 284.0,
+    customerName: "Alexander Young",
+    customerInitials: "AY",
+    type: "Sale",
+    paymentMethod: "Bank Transfer",
+    date: "7 days ago",
+    status: "completed",
+  },
+  {
+    id: "25",
+    txnId: "TXN-100225",
+    amount: 55.99,
+    customerName: "Amelia King",
+    customerInitials: "AK",
+    type: "Sale",
+    paymentMethod: "Debit Card",
+    date: "8 days ago",
+    status: "completed",
+  },
+  {
+    id: "26",
+    txnId: "TXN-100226",
+    amount: 399.0,
+    customerName: "Benjamin Wright",
+    customerInitials: "BW",
+    type: "Subscription",
+    paymentMethod: "Credit Card",
+    date: "8 days ago",
+    status: "completed",
+  },
+  {
+    id: "27",
+    txnId: "TXN-100227",
+    amount: 72.25,
+    customerName: "Harper Lopez",
+    customerInitials: "HL",
+    type: "Refund",
+    paymentMethod: "PayPal",
+    date: "9 days ago",
+    status: "refunded",
+  },
+  {
+    id: "28",
+    txnId: "TXN-100228",
+    amount: 198.0,
+    customerName: "Lucas Hill",
+    customerInitials: "LH",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "10 days ago",
+    status: "failed",
+  },
+  {
+    id: "29",
+    txnId: "TXN-100229",
+    amount: 145.5,
+    customerName: "Evelyn Scott",
+    customerInitials: "ES",
+    type: "Sale",
+    paymentMethod: "Debit Card",
+    date: "10 days ago",
+    status: "completed",
+  },
+  {
+    id: "30",
+    txnId: "TXN-100230",
+    amount: 89.99,
+    customerName: "Henry Green",
+    customerInitials: "HG",
+    type: "Sale",
+    paymentMethod: "Bank Transfer",
+    date: "12 days ago",
+    status: "completed",
+  },
+  {
+    id: "31",
+    txnId: "TXN-100231",
+    amount: 349.0,
+    customerName: "Abigail Adams",
+    customerInitials: "AA",
+    type: "Subscription",
+    paymentMethod: "Credit Card",
+    date: "12 days ago",
+    status: "completed",
+  },
+  {
+    id: "32",
+    txnId: "TXN-100232",
+    amount: 27.99,
+    customerName: "Sebastian Baker",
+    customerInitials: "SB",
+    type: "Sale",
+    paymentMethod: "PayPal",
+    date: "14 days ago",
+    status: "pending",
+  },
+  {
+    id: "33",
+    txnId: "TXN-100233",
+    amount: 462.0,
+    customerName: "Ella Nelson",
+    customerInitials: "EN",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "14 days ago",
+    status: "completed",
+  },
+  {
+    id: "34",
+    txnId: "TXN-100234",
+    amount: 58.5,
+    customerName: "Jack Carter",
+    customerInitials: "JC",
+    type: "Refund",
+    paymentMethod: "Debit Card",
+    date: "15 days ago",
+    status: "refunded",
+  },
+  {
+    id: "35",
+    txnId: "TXN-100235",
+    amount: 225.0,
+    customerName: "Scarlett Mitchell",
+    customerInitials: "SM",
+    type: "Sale",
+    paymentMethod: "Bank Transfer",
+    date: "16 days ago",
+    status: "completed",
+  },
+  {
+    id: "36",
+    txnId: "TXN-100236",
+    amount: 134.75,
+    customerName: "Owen Perez",
+    customerInitials: "OP",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "16 days ago",
+    status: "completed",
+  },
+  {
+    id: "37",
+    txnId: "TXN-100237",
+    amount: 499.0,
+    customerName: "Grace Roberts",
+    customerInitials: "GR",
+    type: "Subscription",
+    paymentMethod: "PayPal",
+    date: "18 days ago",
+    status: "completed",
+  },
+  {
+    id: "38",
+    txnId: "TXN-100238",
+    amount: 82.0,
+    customerName: "Liam Turner",
+    customerInitials: "LT",
+    type: "Sale",
+    paymentMethod: "Debit Card",
+    date: "18 days ago",
+    status: "failed",
+  },
+  {
+    id: "39",
+    txnId: "TXN-100239",
+    amount: 178.5,
+    customerName: "Chloe Phillips",
+    customerInitials: "CP",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "20 days ago",
+    status: "completed",
+  },
+  {
+    id: "40",
+    txnId: "TXN-100240",
+    amount: 93.99,
+    customerName: "Noah Campbell",
+    customerInitials: "NC",
+    type: "Refund",
+    paymentMethod: "Bank Transfer",
+    date: "20 days ago",
+    status: "refunded",
+  },
+  {
+    id: "41",
+    txnId: "TXN-100241",
+    amount: 267.0,
+    customerName: "Lily Parker",
+    customerInitials: "LP",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "22 days ago",
+    status: "completed",
+  },
+  {
+    id: "42",
+    txnId: "TXN-100242",
+    amount: 149.0,
+    customerName: "Mason Evans",
+    customerInitials: "ME",
+    type: "Subscription",
+    paymentMethod: "PayPal",
+    date: "22 days ago",
+    status: "completed",
+  },
+  {
+    id: "43",
+    txnId: "TXN-100243",
+    amount: 41.25,
+    customerName: "Zoe Edwards",
+    customerInitials: "ZE",
+    type: "Sale",
+    paymentMethod: "Debit Card",
+    date: "25 days ago",
+    status: "pending",
+  },
+  {
+    id: "44",
+    txnId: "TXN-100244",
+    amount: 315.0,
+    customerName: "Aiden Collins",
+    customerInitials: "AC",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "25 days ago",
+    status: "completed",
+  },
+  {
+    id: "45",
+    txnId: "TXN-100245",
+    amount: 68.99,
+    customerName: "Nora Stewart",
+    customerInitials: "NS",
+    type: "Sale",
+    paymentMethod: "Bank Transfer",
+    date: "28 days ago",
+    status: "completed",
+  },
+  {
+    id: "46",
+    txnId: "TXN-100246",
+    amount: 599.0,
+    customerName: "Logan Sanchez",
+    customerInitials: "LS",
+    type: "Subscription",
+    paymentMethod: "Credit Card",
+    date: "28 days ago",
+    status: "completed",
+  },
+  {
+    id: "47",
+    txnId: "TXN-100247",
+    amount: 112.5,
+    customerName: "Aria Morris",
+    customerInitials: "AM",
+    type: "Refund",
+    paymentMethod: "PayPal",
+    date: "30 days ago",
+    status: "refunded",
+  },
+  {
+    id: "48",
+    txnId: "TXN-100248",
+    amount: 246.0,
+    customerName: "Carter Rogers",
+    customerInitials: "CR",
+    type: "Sale",
+    paymentMethod: "Debit Card",
+    date: "30 days ago",
+    status: "failed",
+  },
+  {
+    id: "49",
+    txnId: "TXN-100249",
+    amount: 79.99,
+    customerName: "Penelope Reed",
+    customerInitials: "PR",
+    type: "Sale",
+    paymentMethod: "Credit Card",
+    date: "33 days ago",
+    status: "completed",
+  },
+  {
+    id: "50",
+    txnId: "TXN-100250",
+    amount: 189.0,
+    customerName: "Caleb Cook",
+    customerInitials: "CC",
+    type: "Sale",
+    paymentMethod: "Bank Transfer",
+    date: "36 days ago",
+    status: "completed",
+  },
+];
+
+const PAGE_SIZE_OPTIONS = [5, 10, 20];
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title} asChild>
+          <a
+            href={logo.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="min-w-0"
+          >
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={logo.src}
+                alt={logo.alt}
+                width={24}
+                height={24}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            <div className="flex min-w-0 flex-col gap-0.5 leading-none">
+              <span className="truncate font-medium">{logo.title}</span>
+              <span className="truncate text-xs text-muted-foreground">
+                {logo.description}
+              </span>
+            </div>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              aria-hidden="true"
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <LayoutDashboard className="size-5" aria-hidden="true" />
+      <h1 className="text-base font-medium">داشبورد</h1>
+
+      <div className="ms-auto flex items-center gap-2">
+        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
+          <Search
+            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            name="header-search"
+            inputMode="search"
+            autoComplete="off"
+            aria-label="جستجو در داشبورد"
+            placeholder="جستجوی کاربران، فضاهای کاری…"
+            className="h-9 w-full pe-14 ps-9 text-sm"
+          />
+          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 rounded-md border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
+            {"\u2318"}
+            {"\u00a0"}K
+          </kbd>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="relative size-9"
+              aria-label={`اعلان‌ها، ${unreadNotificationCount.toLocaleString("fa-IR")} خوانده‌نشده`}
+            >
+              <Bell className="size-4" aria-hidden="true" />
+              <span className="absolute -top-1 -end-1 flex size-[18px] items-center justify-center rounded-full bg-red-600 text-[10px] leading-none font-semibold text-white ring-2 ring-background">
+                {unreadNotificationCount.toLocaleString("fa-IR")}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-80 sm:w-96">
+            <DropdownMenuLabel className="text-base font-medium">
+              اعلان‌ها
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {headerNotificationItems.map((item) => (
+              <DropdownMenuItem
+                key={item.id}
+                className="cursor-default flex-col items-start gap-1 py-3"
+                onSelect={(event: Event) => event.preventDefault()}
+              >
+                <span className="font-medium text-foreground">
+                  {item.title}
+                </span>
+                <span className="text-xs leading-snug font-normal text-muted-foreground">
+                  {item.body}
+                </span>
+                <span className="text-[10px] text-muted-foreground/80">
+                  {item.time}
+                </span>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="justify-center text-center font-medium">
+              علامت‌گذاری همه به‌عنوان خوانده‌شده
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+};
+
+const periodLabels: Record<PeriodKey, string> = {
+  "1year": "۱ سال",
+  "3months": "۳ ماه",
+  "30days": "۳۰ روز",
+};
+
+const PeriodTabs = ({
+  activePeriod,
+  onPeriodChange,
+}: {
+  activePeriod: PeriodKey;
+  onPeriodChange: (period: PeriodKey) => void;
+}) => {
+  return (
+    <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
+      {(Object.keys(periodLabels) as PeriodKey[]).map((key) => (
+        <button
+          key={key}
+          onClick={() => onPeriodChange(key)}
+          className={cn(
+            "rounded-md px-3 py-1.5 text-xs font-medium transition-all sm:text-sm",
+            activePeriod === key
+              ? "bg-card text-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          {periodLabels[key]}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+function RevenueTooltip({
+  active,
+  payload,
+  label,
+}: any) {
+  if (!active || !payload?.length) return null;
+
+  const value = payload[0]?.value || 0;
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}
+      </p>
+      <div className="flex items-center gap-1.5 sm:gap-2">
+        <div className="size-2 rounded-full bg-foreground sm:size-2.5" />
+        <span className="text-[10px] text-muted-foreground sm:text-sm">
+          {revenueChartConfig.revenue.label}:
+        </span>
+        <span className="text-[10px] font-medium text-foreground sm:text-sm">
+          {currencyFormatter.format(Number(value))}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+const RevenueChart = ({ period }: { period: PeriodKey }) => {
+  const data = revenueData[period];
+  const summary = revenueSummary[period];
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:gap-5 sm:p-5">
+      <div className="flex flex-col gap-1">
+        <p className="text-xs text-muted-foreground sm:text-sm">
+          نمای کلی درآمد
+        </p>
+        <div className="flex items-center gap-2">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(summary.total)}
+          </p>
+          <div className="flex items-center gap-0.5">
+            {summary.isPositive ? (
+              <ArrowUpRight
+                className="size-3.5 text-emerald-600"
+                aria-hidden="true"
+              />
+            ) : (
+              <ArrowDownRight
+                className="size-3.5 text-red-600"
+                aria-hidden="true"
+              />
+            )}
+            <span
+              className={cn(
+                "text-xs font-medium",
+                summary.isPositive ? "text-emerald-600" : "text-red-600",
+              )}
+            >
+              {summary.isPositive ? "+" : "-"}
+              {summary.change.toLocaleString("fa-IR")}٪
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="h-[180px] w-full min-w-0 sm:h-[220px]">
+        <ChartContainer config={revenueChartConfig} className="h-full w-full">
+          <AreaChart data={data}>
+            <defs>
+              <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-revenue)"
+                  stopOpacity={0.15}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-revenue)"
+                  stopOpacity={0.02}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="0" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              tickFormatter={(value) => compactCurrencyFormatter.format(value)}
+              width={40}
+            />
+            <Tooltip
+              content={<RevenueTooltip />}
+              cursor={{ strokeOpacity: 0.2 }}
+            />
+            <Area
+              type="monotone"
+              dataKey="revenue"
+              stroke="var(--color-revenue)"
+              strokeWidth={2}
+              fill="url(#revenueGradient)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+function CostsTooltip({
+  active,
+  payload,
+  label,
+  colors,
+}: any & {
+  colors: { primary: string; secondary: string };
+}) {
+  if (!active || !payload?.length) return null;
+
+  const cogs = payload.find((p: any) => p.dataKey === "cogs")?.value || 0;
+  const operatingExpenses =
+    payload.find((p: any) => p.dataKey === "operatingExpenses")?.value || 0;
+  const total = Number(cogs) + Number(operatingExpenses);
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}
+      </p>
+      <div className="space-y-1 sm:space-y-1.5">
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.primary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            {costsChartConfig.cogs.label}:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(cogs))}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.secondary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            هزینه عملیاتی:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(operatingExpenses))}
+          </span>
+        </div>
+        <div className="mt-1 border-t border-border pt-1">
+          <span className="text-[10px] font-medium text-foreground sm:text-xs">
+            جمع: {currencyFormatter.format(total)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const CostsChart = ({ period }: { period: PeriodKey }) => {
+  const data = costsData[period];
+  const summary = costsSummary[period];
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:gap-5 sm:p-5">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-muted-foreground sm:text-sm">
+            تفکیک هزینه‌ها
+          </p>
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1.5">
+              <div
+                className="size-2 rounded-full"
+                style={{ backgroundColor: "var(--color-cogs)" }}
+              />
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {costsChartConfig.cogs.label}
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div
+                className="size-2 rounded-full"
+                style={{ backgroundColor: "var(--color-operatingExpenses)" }}
+              />
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {costsChartConfig.operatingExpenses.label}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(summary.total)}
+          </p>
+          <div className="flex items-center gap-0.5">
+            {summary.isPositive ? (
+              <ArrowUpRight
+                className="size-3.5 text-emerald-600"
+                aria-hidden="true"
+              />
+            ) : (
+              <ArrowDownRight
+                className="size-3.5 text-red-600"
+                aria-hidden="true"
+              />
+            )}
+            <span
+              className={cn(
+                "text-xs font-medium",
+                summary.isPositive ? "text-emerald-600" : "text-red-600",
+              )}
+            >
+              {summary.isPositive ? "+" : "-"}
+              {summary.change.toLocaleString("fa-IR")}٪
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="h-[180px] w-full min-w-0 sm:h-[220px]">
+        <ChartContainer config={costsChartConfig} className="h-full w-full">
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="0" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              tickFormatter={(value) => compactCurrencyFormatter.format(value)}
+              width={40}
+            />
+            <Tooltip
+              content={
+                <CostsTooltip
+                  colors={{
+                    primary: "var(--color-cogs)",
+                    secondary: "var(--color-operatingExpenses)",
+                  }}
+                />
+              }
+              cursor={{ fillOpacity: 0.05 }}
+            />
+            <Bar
+              dataKey="cogs"
+              stackId="costs"
+              fill="var(--color-cogs)"
+              radius={[0, 0, 0, 0]}
+            />
+            <Bar
+              dataKey="operatingExpenses"
+              stackId="costs"
+              fill="var(--color-operatingExpenses)"
+              radius={[3, 3, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const StatsCards = () => {
+  return (
+    <div className="grid grid-cols-2 gap-3 rounded-xl border bg-card p-4 sm:gap-4 sm:p-5 lg:grid-cols-4 lg:gap-6 lg:p-6">
+      {statsData.map((stat, index) => {
+        const formatter =
+          stat.format === "currency" ? currencyFormatter : percentFormatter;
+
+        return (
+          <div key={stat.title} className="flex items-start">
+            <div className="flex-1 space-y-1 sm:space-y-2 lg:space-y-3">
+              <div className="flex items-center gap-1.5 text-muted-foreground sm:gap-2">
+                <stat.icon className="size-3.5 sm:size-4" aria-hidden="true" />
+                <span className="truncate text-[10px] font-medium sm:text-xs lg:text-sm">
+                  {stat.title}
+                </span>
+              </div>
+              <p className="hidden text-[10px] text-muted-foreground/70 sm:block sm:text-xs">
+                {formatter.format(stat.previousValue)} ماه قبل
+              </p>
+              <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl lg:text-[28px]">
+                {formatter.format(stat.value)}
+              </p>
+              <div className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[10px] sm:text-xs">
+                {stat.isPositive ? (
+                  <ArrowUpRight
+                    className="size-3 shrink-0 text-emerald-600 sm:size-3.5"
+                    aria-hidden="true"
+                  />
+                ) : (
+                  <ArrowDownRight
+                    className="size-3 shrink-0 text-red-600 sm:size-3.5"
+                    aria-hidden="true"
+                  />
+                )}
+                <span
+                  className={cn(
+                    "whitespace-nowrap",
+                    stat.isPositive ? "text-emerald-600" : "text-red-600",
+                  )}
+                >
+                  {stat.isPositive ? "+" : "-"}
+                  {stat.changePercent.toLocaleString("fa-IR", {
+                    minimumFractionDigits: 1,
+                    maximumFractionDigits: 1,
+                  })}
+                  ٪
+                </span>
+                <span className="whitespace-nowrap text-muted-foreground">
+                  نسبت به ماه قبل
+                </span>
+              </div>
+            </div>
+            {index < statsData.length - 1 && (
+              <div className="mx-4 hidden h-full w-px bg-border lg:block xl:mx-6" />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const transactionStatusStyles: Record<TransactionStatus, string> = {
+  completed:
+    "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/20",
+  pending:
+    "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/20",
+  failed:
+    "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20",
+  refunded:
+    "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20",
+};
+
+const transactionStatusIcons: Record<
+  TransactionStatus,
+  React.ComponentType<React.SVGProps<SVGSVGElement>>
+> = {
+  completed: CheckCircle2,
+  pending: Clock,
+  failed: XCircle,
+  refunded: RotateCcw,
+};
+
+const transactionStatusLabels: Record<TransactionStatus, string> = {
+  completed: "تکمیل‌شده",
+  pending: "در انتظار",
+  failed: "ناموفق",
+  refunded: "بازپرداخت‌شده",
+};
+
+const allTransactionStatuses: TransactionStatus[] = [
+  "completed",
+  "pending",
+  "failed",
+  "refunded",
+];
+
+const allPaymentMethods = [
+  "Credit Card",
+  "Debit Card",
+  "PayPal",
+  "Bank Transfer",
+] as const;
+
+const dateFilterOptions = [
+  { label: "همه", value: "all" },
+  { label: "امروز", value: "today" },
+  { label: "دیروز", value: "yesterday" },
+  { label: "۷ روز اخیر", value: "7days" },
+  { label: "۳۰ روز اخیر", value: "30days" },
+];
+
+const filterChipClassName =
+  "inline-flex h-5 cursor-pointer items-center gap-1 rounded-md bg-gray-50 px-2 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 sm:h-6 sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20";
+
+const TransactionsTable = () => {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState<string>("all");
+  const [dateFilter, setDateFilter] = React.useState<string>("all");
+  const [paymentMethodFilter, setPaymentMethodFilter] =
+    React.useState<string>("all");
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(10);
+  const [isHydrated, setIsHydrated] = React.useState(false);
+
+  const hasActiveFilters =
+    statusFilter !== "all" ||
+    dateFilter !== "all" ||
+    paymentMethodFilter !== "all";
+
+  const clearFilters = () => {
+    setStatusFilter("all");
+    setDateFilter("all");
+    setPaymentMethodFilter("all");
+  };
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    setSearchQuery(params.get("q") ?? "");
+
+    const nextStatus = params.get("status");
+    if (
+      nextStatus &&
+      (nextStatus === "all" ||
+        allTransactionStatuses.includes(nextStatus as TransactionStatus))
+    ) {
+      setStatusFilter(nextStatus);
+    }
+
+    const nextDate = params.get("date");
+    if (
+      nextDate &&
+      dateFilterOptions.some((option) => option.value === nextDate)
+    ) {
+      setDateFilter(nextDate);
+    }
+
+    const nextPayment = params.get("payment");
+    if (
+      nextPayment &&
+      (nextPayment === "all" ||
+        allPaymentMethods.includes(
+          nextPayment as (typeof allPaymentMethods)[number],
+        ))
+    ) {
+      setPaymentMethodFilter(nextPayment);
+    }
+
+    const nextPage = Number(params.get("page"));
+    if (!Number.isNaN(nextPage) && nextPage > 0) {
+      setCurrentPage(nextPage);
+    }
+
+    const nextPageSize = Number(params.get("pageSize"));
+    if (
+      !Number.isNaN(nextPageSize) &&
+      PAGE_SIZE_OPTIONS.includes(nextPageSize)
+    ) {
+      setPageSize(nextPageSize);
+    }
+
+    setIsHydrated(true);
+  }, []);
+
+  const filteredTransactions = React.useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return transactionRecords.filter((txn) => {
+      const matchesSearch =
+        txn.txnId.toLowerCase().includes(query) ||
+        txn.customerName.toLowerCase().includes(query);
+
+      const matchesStatus =
+        statusFilter === "all" || txn.status === statusFilter;
+
+      const matchesPaymentMethod =
+        paymentMethodFilter === "all" ||
+        txn.paymentMethod === paymentMethodFilter;
+
+      let matchesDate = true;
+      const pd = txn.date.toLowerCase();
+      switch (dateFilter) {
+        case "today":
+          matchesDate = pd === "today";
+          break;
+        case "yesterday":
+          matchesDate = pd === "1 day ago";
+          break;
+        case "7days":
+          matchesDate =
+            pd === "today" ||
+            pd.includes("day ago") ||
+            (pd.includes("days ago") && parseInt(pd) <= 7);
+          break;
+        case "30days":
+          matchesDate =
+            pd === "today" ||
+            pd.includes("day ago") ||
+            (pd.includes("days ago") && parseInt(pd) <= 30);
+          break;
+      }
+
+      return (
+        matchesSearch && matchesStatus && matchesPaymentMethod && matchesDate
+      );
+    });
+  }, [searchQuery, statusFilter, dateFilter, paymentMethodFilter]);
+
+  const totalPages = Math.ceil(filteredTransactions.length / pageSize);
+
+  const paginatedTransactions = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return filteredTransactions.slice(startIndex, endIndex);
+  }, [filteredTransactions, currentPage, pageSize]);
+
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, statusFilter, dateFilter, paymentMethodFilter, pageSize]);
+
+  React.useEffect(() => {
+    if (!isHydrated || typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+
+    if (searchQuery) {
+      params.set("q", searchQuery);
+    } else {
+      params.delete("q");
+    }
+
+    if (statusFilter !== "all") {
+      params.set("status", statusFilter);
+    } else {
+      params.delete("status");
+    }
+
+    if (dateFilter !== "all") {
+      params.set("date", dateFilter);
+    } else {
+      params.delete("date");
+    }
+
+    if (paymentMethodFilter !== "all") {
+      params.set("payment", paymentMethodFilter);
+    } else {
+      params.delete("payment");
+    }
+
+    if (currentPage > 1) {
+      params.set("page", String(currentPage));
+    } else {
+      params.delete("page");
+    }
+
+    if (pageSize !== PAGE_SIZE_OPTIONS[0]) {
+      params.set("pageSize", String(pageSize));
+    } else {
+      params.delete("pageSize");
+    }
+
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [
+    searchQuery,
+    statusFilter,
+    dateFilter,
+    paymentMethodFilter,
+    currentPage,
+    pageSize,
+    isHydrated,
+  ]);
+
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  return (
+    <div className="rounded-xl border bg-card">
+      <div className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center sm:gap-4 sm:px-6 sm:py-3.5">
+        <div className="flex flex-1 items-center gap-2 sm:gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 shrink-0 sm:size-8"
+            aria-label="تراکنش‌ها"
+          >
+            <ShoppingCart className="size-4 text-muted-foreground sm:size-[18px]" />
+          </Button>
+          <span className="text-sm font-medium sm:text-base">تراکنش‌ها</span>
+          <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
+            {filteredTransactions.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="relative flex-1 sm:flex-none">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground sm:size-5"
+              aria-hidden="true"
+            />
+            <Input
+              type="search"
+              name="transactions-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی تراکنش‌ها"
+              placeholder="جستجوی تراکنش… (مثلاً تراکنش-100201)"
+              value={searchQuery}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setSearchQuery(e.target.value)
+              }
+              className="h-8 w-full ps-9 text-sm sm:h-9 sm:w-[160px] sm:ps-10 lg:w-[200px]"
+            />
+          </div>
+
+          <Select value={dateFilter} onValueChange={setDateFilter}>
+            <SelectTrigger
+              className="h-8 w-[120px] text-xs sm:h-9 sm:w-[140px] sm:text-sm"
+              aria-label="فیلتر بر اساس تاریخ"
+            >
+              <SelectValue placeholder="تاریخ" />
+            </SelectTrigger>
+            <SelectContent>
+              {dateFilterOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn(
+                  "h-8 gap-1.5 sm:h-9 sm:gap-2",
+                  statusFilter !== "all" && "border-primary",
+                )}
+                aria-label="فیلتر بر اساس وضعیت"
+              >
+                <Filter className="size-3.5 sm:size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">وضعیت</span>
+                {statusFilter !== "all" && (
+                  <span className="size-1.5 rounded-full bg-primary sm:size-2" />
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[180px]">
+              <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem
+                checked={statusFilter === "all"}
+                onCheckedChange={() => setStatusFilter("all")}
+              >
+                همه وضعیت‌ها
+              </DropdownMenuCheckboxItem>
+              {allTransactionStatuses.map((status) => (
+                <DropdownMenuCheckboxItem
+                  key={status}
+                  checked={statusFilter === status}
+                  onCheckedChange={() => setStatusFilter(status)}
+                >
+                  {transactionStatusLabels[status]}
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn(
+                  "h-8 gap-1.5 sm:h-9 sm:gap-2",
+                  paymentMethodFilter !== "all" && "border-primary",
+                )}
+                aria-label="فیلتر بر اساس روش پرداخت"
+              >
+                <Wallet className="size-3.5 sm:size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">روش</span>
+                {paymentMethodFilter !== "all" && (
+                  <span className="size-1.5 rounded-full bg-primary sm:size-2" />
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[200px]">
+              <DropdownMenuLabel>روش پرداخت</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem
+                checked={paymentMethodFilter === "all"}
+                onCheckedChange={() => setPaymentMethodFilter("all")}
+              >
+                همه روش‌ها
+              </DropdownMenuCheckboxItem>
+              {allPaymentMethods.map((method) => (
+                <DropdownMenuCheckboxItem
+                  key={method}
+                  checked={paymentMethodFilter === method}
+                  onCheckedChange={() => setPaymentMethodFilter(method)}
+                >
+                  {paymentMethodLabels[method]}
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {hasActiveFilters && (
+        <div className="flex flex-wrap items-center gap-2 px-3 pb-3 sm:px-6">
+          <span className="text-[10px] text-muted-foreground sm:text-xs">
+            فیلترها:
+          </span>
+          {statusFilter !== "all" && (
+            <button
+              type="button"
+              className={filterChipClassName}
+              onClick={() => setStatusFilter("all")}
+              aria-label={`حذف فیلتر ${transactionStatusLabels[statusFilter as TransactionStatus]}`}
+            >
+              {transactionStatusLabels[statusFilter as TransactionStatus]}
+              <X className="size-2.5 sm:size-3" aria-hidden="true" />
+            </button>
+          )}
+          {dateFilter !== "all" && (
+            <button
+              type="button"
+              className={filterChipClassName}
+              onClick={() => setDateFilter("all")}
+              aria-label={`حذف فیلتر ${dateFilterOptions.find((o) => o.value === dateFilter)?.label}`}
+            >
+              {dateFilterOptions.find((o) => o.value === dateFilter)?.label}
+              <X className="size-2.5 sm:size-3" aria-hidden="true" />
+            </button>
+          )}
+          {paymentMethodFilter !== "all" && (
+            <button
+              type="button"
+              className={filterChipClassName}
+              onClick={() => setPaymentMethodFilter("all")}
+              aria-label={`حذف فیلتر ${paymentMethodLabels[paymentMethodFilter as Transaction["paymentMethod"]]}`}
+            >
+              {paymentMethodLabels[paymentMethodFilter as Transaction["paymentMethod"]]}
+              <X className="size-2.5 sm:size-3" aria-hidden="true" />
+            </button>
+          )}
+          <button
+            onClick={clearFilters}
+            className="text-[10px] text-destructive hover:underline sm:text-xs"
+          >
+            پاک کردن همه
+          </button>
+        </div>
+      )}
+
+      <div className="overflow-x-auto px-3 pb-3 sm:px-6 sm:pb-4">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className="min-w-[100px] text-xs font-medium text-muted-foreground sm:text-sm">
+                شناسه تراکنش
+              </TableHead>
+              <TableHead className="hidden min-w-[140px] text-xs font-medium text-muted-foreground sm:text-sm md:table-cell">
+                مشتری
+              </TableHead>
+              <TableHead className="min-w-[100px] text-xs font-medium text-muted-foreground sm:text-sm">
+                مبلغ
+              </TableHead>
+              <TableHead className="hidden min-w-[100px] text-xs font-medium text-muted-foreground sm:text-sm lg:table-cell">
+                نوع
+              </TableHead>
+              <TableHead className="hidden min-w-[120px] text-xs font-medium text-muted-foreground sm:text-sm md:table-cell">
+                روش پرداخت
+              </TableHead>
+              <TableHead className="hidden text-xs font-medium text-muted-foreground sm:table-cell sm:text-sm">
+                تاریخ
+              </TableHead>
+              <TableHead className="min-w-[100px] text-xs font-medium text-muted-foreground sm:text-sm">
+                وضعیت
+              </TableHead>
+              <TableHead className="w-[40px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedTransactions.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={8}
+                  className="h-24 text-center text-sm text-muted-foreground"
+                >
+                  تراکنشی با این فیلترها یافت نشد.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedTransactions.map((txn) => {
+                const StatusIcon = transactionStatusIcons[txn.status];
+                return (
+                  <TableRow key={txn.id}>
+                    <TableCell className="text-xs font-medium sm:text-sm">
+                      {txn.txnId}
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      <div className="flex items-center gap-2">
+                        <Avatar className="size-6 bg-muted">
+                          <AvatarFallback className="text-[8px] font-semibold text-muted-foreground uppercase">
+                            {txn.customerInitials}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="text-xs text-muted-foreground sm:text-sm">
+                          {txn.customerName}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-xs text-foreground tabular-nums sm:text-sm">
+                      {currencyFormatter.format(txn.amount)}
+                    </TableCell>
+                    <TableCell className="hidden lg:table-cell">
+                      <span className="inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-normal text-muted-foreground sm:text-xs">
+                        {transactionTypeLabels[txn.type]}
+                      </span>
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      <span className="inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-normal text-muted-foreground sm:text-xs">
+                        {paymentMethodLabels[txn.paymentMethod]}
+                      </span>
+                    </TableCell>
+                    <TableCell className="hidden text-xs text-muted-foreground sm:table-cell sm:text-sm">
+                      {formatTransactionDate(txn.date)}
+                    </TableCell>
+                    <TableCell>
+                      <span
+                        className={cn(
+                          "inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium sm:text-xs",
+                          transactionStatusStyles[txn.status],
+                        )}
+                      >
+                        <StatusIcon className="size-3" aria-hidden="true" />
+                        {transactionStatusLabels[txn.status]}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-7 text-muted-foreground hover:text-foreground sm:size-8"
+                            aria-label={`باز کردن عملیات ${txn.txnId}`}
+                          >
+                            <MoreHorizontal className="size-3.5 sm:size-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>
+                            <Eye className="me-2 size-4" aria-hidden="true" />
+                            مشاهده جزئیات
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <Pencil
+                              className="me-2 size-4"
+                              aria-hidden="true"
+                            />
+                            ویرایش تراکنش
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <Copy className="me-2 size-4" aria-hidden="true" />
+                            تکثیر
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-destructive"
+                            onSelect={(event: Event) => {
+                              event.preventDefault();
+                              if (typeof window === "undefined") return;
+                              window.confirm(
+                                "این تراکنش باطل شود؟ این عمل قابل بازگشت نیست.",
+                              );
+                            }}
+                          >
+                            <X className="me-2 size-4" aria-hidden="true" />
+                            باطل کردن تراکنش
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-col items-center justify-between gap-3 border-t px-3 py-3 sm:flex-row sm:px-6">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground sm:text-sm">
+          <span className="hidden sm:inline">ردیف در هر صفحه:</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={(value: string) => setPageSize(Number(value))}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PAGE_SIZE_OPTIONS.map((size) => (
+                <SelectItem key={size} value={size.toString()}>
+                  {size.toLocaleString("fa-IR")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-muted-foreground">
+            {filteredTransactions.length === 0
+              ? "۰"
+              : `${((currentPage - 1) * pageSize + 1).toLocaleString("fa-IR")}-${Math.min(
+                currentPage * pageSize,
+                filteredTransactions.length,
+              ).toLocaleString("fa-IR")}`}{" "}
+            از {filteredTransactions.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه اول"
+          >
+            <ChevronsLeft className="size-4 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه قبل"
+          >
+            <ChevronLeft className="size-4 rtl:rotate-180" />
+          </Button>
+
+          <div className="flex items-center gap-1 px-2">
+            {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+              let pageNum: number;
+              if (totalPages <= 5) {
+                pageNum = i + 1;
+              } else if (currentPage <= 3) {
+                pageNum = i + 1;
+              } else if (currentPage >= totalPages - 2) {
+                pageNum = totalPages - 4 + i;
+              } else {
+                pageNum = currentPage - 2 + i;
+              }
+
+              return (
+                <Button
+                  key={pageNum}
+                  variant={currentPage === pageNum ? "default" : "ghost"}
+                  size="icon"
+                  className="size-8"
+                  onClick={() => goToPage(pageNum)}
+                >
+                  {pageNum.toLocaleString("fa-IR")}
+                </Button>
+              );
+            })}
+          </div>
+
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages || totalPages === 0}
+            aria-label="رفتن به صفحه بعد"
+          >
+            <ChevronRight className="size-4 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(totalPages)}
+            disabled={currentPage === totalPages || totalPages === 0}
+            aria-label="رفتن به صفحه آخر"
+          >
+            <ChevronsRight className="size-4 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  const [period, setPeriod] = React.useState<PeriodKey>("1year");
+  const [newTxnOpen, setNewTxnOpen] = React.useState(false);
+  const [txnNote, setTxnNote] = React.useState("");
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextPeriod = params.get("period");
+    if (
+      nextPeriod === "1year" ||
+      nextPeriod === "3months" ||
+      nextPeriod === "30days"
+    ) {
+      setPeriod(nextPeriod);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (period !== "1year") {
+      params.set("period", period);
+    } else {
+      params.delete("period");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [period]);
+
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6"
+    >
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <PeriodTabs activePeriod={period} onPeriodChange={setPeriod} />
+        <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 gap-2 sm:h-9"
+            aria-label="خروجی"
+          >
+            <Download className="size-4" aria-hidden="true" />
+            <span className="hidden sm:inline">خروجی</span>
+          </Button>
+          <Dialog open={newTxnOpen} onOpenChange={setNewTxnOpen}>
+            <DialogTrigger asChild>
+              <Button
+                size="sm"
+                className="h-8 gap-2 sm:h-9"
+                aria-label="تراکنش جدید"
+              >
+                <Plus className="size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">تراکنش جدید</span>
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-md">
+              <DialogHeader>
+                <DialogTitle>ثبت تراکنش</DialogTitle>
+                <DialogDescription>
+                  یادداشت سریعی برای چک‌لیست بستن حساب‌ها ثبت کنید. این
+                  نمایش آزمایشی داده را ذخیره نمی‌کند.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-4 py-2">
+                <div className="grid gap-2">
+                  <Label htmlFor="dashboard2-txn-note">توضیحات</Label>
+                  <Input
+                    id="dashboard2-txn-note"
+                    name="txn-note"
+                    value={txnNote}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setTxnNote(e.target.value)
+                    }
+                    placeholder="مثلاً حواله  پرداخت مالیات فصل اول"
+                  />
+                </div>
+              </div>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="outline">
+                    انصراف
+                  </Button>
+                </DialogClose>
+                <Button
+                  type="button"
+                  onClick={() => {
+                    setNewTxnOpen(false);
+                    setTxnNote("");
+                  }}
+                >
+                  ذخیره پیش‌نویس
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4 sm:gap-6 lg:flex-row">
+        <RevenueChart period={period} />
+        <CostsChart period={period} />
+      </div>
+
+      <StatsCards />
+
+      <TransactionsTable />
+    </div>
+  );
+};
+
+const Dashboard2 = ({ className }: { className?: string }) => {
+  return (
+    <TooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+};
+
+export { Dashboard2 };
diff --git a/blocks/dashboard3.tsx b/blocks/dashboard3.tsx
new file mode 100644
index 0000000..009dba2
--- /dev/null
+++ b/blocks/dashboard3.tsx
@@ -0,0 +1,1362 @@
+"use client";
+
+import {
+  Activity,
+  BarChart3,
+  Bell,
+  Building2,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  CircleDollarSign,
+  CreditCard,
+  Download,
+  FileText,
+  LayoutDashboard,
+  LogOut,
+  MoreHorizontal,
+  Receipt,
+  Search,
+  Settings,
+  User,
+  UserPlus,
+  Users,
+  Zap,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+    href: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type TimePeriod = "6months" | "year";
+
+type StatCardItem = {
+  title: string;
+  value: number;
+  format: "currency" | "number";
+  changePercent: number;
+  isPositive: boolean;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  sparklineData: number[];
+};
+
+type OrderStatus = "Processing" | "Shipped" | "Delivered" | "Cancelled";
+
+type Order = {
+  id: string;
+  orderNumber: string;
+  customer: string;
+  total: number;
+  status: OrderStatus;
+};
+
+type ActivityItem = {
+  title: string;
+  detail: string;
+  minutesAgo: number;
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+const relativeTimeFormatter = new Intl.RelativeTimeFormat("fa-IR", {
+  numeric: "auto",
+});
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const orderStatusLabels: Record<OrderStatus, string> = {
+  Processing: "در حال پردازش",
+  Shipped: "ارسال‌شده",
+  Delivered: "تحویل‌شده",
+  Cancelled: "لغوشده",
+};
+
+const formatRelativeTime = (minutesAgo: number) => {
+  if (minutesAgo < 60) {
+    return relativeTimeFormatter.format(-minutesAgo, "minute");
+  }
+  const hours = Math.round(minutesAgo / 60);
+  if (hours < 24) {
+    return relativeTimeFormatter.format(-hours, "hour");
+  }
+  const days = Math.round(hours / 24);
+  return relativeTimeFormatter.format(-days, "day");
+};
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+const revenueChartConfig = {
+  thisYear: { label: "امسال", color: palette.primary },
+  prevYear: { label: "سال قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const sparklinePositiveConfig = {
+  value: {
+    label: "مقدار",
+    theme: {
+      light: "oklch(0.55 0.18 155)",
+      dark: "oklch(0.72 0.15 155)",
+    },
+  },
+} satisfies ChartConfig;
+
+const sparklineNegativeConfig = {
+  value: {
+    label: "مقدار",
+    theme: {
+      light: "oklch(0.55 0.18 25)",
+      dark: "oklch(0.72 0.15 25)",
+    },
+  },
+} satisfies ChartConfig;
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان‌بلاکس",
+    title: "ShadcnBlocks",
+    description: "پلتفرم سامانه ابری",
+    href: "https://www.ShadcnBlocks",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "تحلیل‌ها", icon: BarChart3, href: "#" },
+        { label: "فعالیت", icon: Activity, href: "#" },
+      ],
+    },
+    {
+      title: "کاربران",
+      defaultOpen: true,
+      items: [
+        {
+          label: "فهرست",
+          icon: Users,
+          href: "#",
+          children: [
+            { label: "همه کاربران", icon: User, href: "#" },
+            { label: "فضاهای کاری", icon: Building2, href: "#" },
+          ],
+        },
+        { label: "دعوت‌ها", icon: UserPlus, href: "#" },
+      ],
+    },
+    {
+      title: "صورتحساب",
+      defaultOpen: false,
+      items: [
+        { label: "اشتراک‌ها", icon: CreditCard, href: "#" },
+        { label: "مصرف", icon: Zap, href: "#" },
+        { label: "فاکتورها", icon: Receipt, href: "#" },
+      ],
+    },
+    {
+      title: "گزارش‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "گزارش‌های ذخیره‌شده", icon: FileText, href: "#" },
+        { label: "خروجی‌ها", icon: Download, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "مریم الیس",
+    email: "morgan.ellis@northwind.app",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+  },
+};
+
+const headerNotificationItems = [
+  {
+    id: "1",
+    title: "افزایش مصرف",
+    body: "حجم API در فضای کاری شما ۲۴٪ بالاتر از میانگین ۷ روز است.",
+    time: "۶ دقیقه پیش",
+  },
+  {
+    id: "2",
+    title: "فاکتور پرداخت شد",
+    body: "نورث‌ویند فاکتور INV-2041 را (۱۲٬۸۰۰ دلار) با ACH پرداخت کرد.",
+    time: "۴۲ دقیقه پیش",
+  },
+  {
+    id: "3",
+    title: "تمدید نزدیک است",
+    body: "۲ قرارداد سالانه ظرف ۱۴ روز آینده تمدید می‌شوند.",
+    time: "۲ ساعت پیش",
+  },
+  {
+    id: "4",
+    title: "خلاصه هفتگی",
+    body: "خلاصه درآمد و ریزش برای تیم شما آماده است.",
+    time: "دیروز",
+  },
+] as const;
+
+const unreadNotificationCount = headerNotificationItems.length;
+
+const fullYearData = [
+  { month: monthLabel(0), thisYear: 42000, prevYear: 38000 },
+  { month: monthLabel(1), thisYear: 38000, prevYear: 45000 },
+  { month: monthLabel(2), thisYear: 52000, prevYear: 41000 },
+  { month: monthLabel(3), thisYear: 45000, prevYear: 48000 },
+  { month: monthLabel(4), thisYear: 58000, prevYear: 44000 },
+  { month: monthLabel(5), thisYear: 41000, prevYear: 52000 },
+  { month: monthLabel(6), thisYear: 55000, prevYear: 47000 },
+  { month: monthLabel(7), thisYear: 48000, prevYear: 53000 },
+  { month: monthLabel(8), thisYear: 62000, prevYear: 49000 },
+  { month: monthLabel(9), thisYear: 54000, prevYear: 58000 },
+  { month: monthLabel(10), thisYear: 67000, prevYear: 52000 },
+  { month: monthLabel(11), thisYear: 71000, prevYear: 61000 },
+];
+
+const periodLabels: Record<TimePeriod, string> = {
+  "6months": "۶ ماه اخیر",
+  year: "۱۲ ماه",
+};
+
+function getDataForPeriod(period: TimePeriod) {
+  if (period === "6months") return fullYearData.slice(0, 6);
+  return fullYearData;
+}
+
+const statsCardData: StatCardItem[] = [
+  {
+    title: "درآمد خالص",
+    value: 82450,
+    format: "currency",
+    changePercent: 20,
+    isPositive: true,
+    icon: CircleDollarSign,
+    sparklineData: [32, 40, 35, 50, 49, 60, 70, 65, 72, 80],
+  },
+  {
+    title: "حساب‌های فعال",
+    value: 3670,
+    format: "number",
+    changePercent: -4.2,
+    isPositive: false,
+    icon: Users,
+    sparklineData: [45, 42, 48, 40, 38, 36, 34, 35, 33, 32],
+  },
+  {
+    title: "ARPU",
+    value: 56.2,
+    format: "currency",
+    changePercent: 4.5,
+    isPositive: true,
+    icon: CreditCard,
+    sparklineData: [20, 25, 22, 30, 28, 35, 40, 38, 42, 45],
+  },
+];
+
+const orderStatuses: OrderStatus[] = [
+  "Processing",
+  "Shipped",
+  "Delivered",
+  "Cancelled",
+];
+
+const orders: Order[] = [
+  {
+    id: "1",
+    orderNumber: "ORD-2024-001",
+    customer: "Sarah Johnson",
+    status: "Delivered",
+    total: 2499.0,
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-2024-002",
+    customer: "Michael Chen",
+    status: "Shipped",
+    total: 1348.0,
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-2024-003",
+    customer: "Emma Wilson",
+    status: "Processing",
+    total: 1198.0,
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-2024-004",
+    customer: "James Rodriguez",
+    status: "Delivered",
+    total: 799.0,
+  },
+  {
+    id: "5",
+    orderNumber: "ORD-2024-005",
+    customer: "Lisa Park",
+    status: "Cancelled",
+    total: 599.0,
+  },
+  {
+    id: "6",
+    orderNumber: "ORD-2024-006",
+    customer: "David Kim",
+    status: "Shipped",
+    total: 5498.0,
+  },
+  {
+    id: "7",
+    orderNumber: "ORD-2024-007",
+    customer: "Anna Martinez",
+    status: "Delivered",
+    total: 1199.0,
+  },
+  {
+    id: "8",
+    orderNumber: "ORD-2024-008",
+    customer: "Robert Taylor",
+    status: "Processing",
+    total: 1128.0,
+  },
+  {
+    id: "9",
+    orderNumber: "ORD-2024-009",
+    customer: "Jennifer Lee",
+    status: "Shipped",
+    total: 449.0,
+  },
+  {
+    id: "10",
+    orderNumber: "ORD-2024-010",
+    customer: "William Brown",
+    status: "Delivered",
+    total: 2199.0,
+  },
+  {
+    id: "11",
+    orderNumber: "ORD-2024-011",
+    customer: "Sophia Davis",
+    status: "Cancelled",
+    total: 349.0,
+  },
+  {
+    id: "12",
+    orderNumber: "ORD-2024-012",
+    customer: "Daniel Garcia",
+    status: "Processing",
+    total: 899.0,
+  },
+];
+
+const tableHeadClassName =
+  "text-xs font-medium text-muted-foreground sm:text-sm";
+
+const statusStyles: Record<OrderStatus, string> = {
+  Processing:
+    "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/20",
+  Shipped:
+    "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20",
+  Delivered:
+    "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/20",
+  Cancelled:
+    "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20",
+};
+
+const recentActivity: ActivityItem[] = [
+  { title: "ثبت‌نام کاربر جدید", detail: "الکس مورگان", minutesAgo: 2 },
+  { title: "ایجاد فضای کاری", detail: "نورث‌ویند لبز", minutesAgo: 2 },
+  { title: "دریافت پرداخت", detail: "INV-2044 · ۴٬۲۰۰ دلار", minutesAgo: 2 },
+  { title: "ارسال فاکتور", detail: "جیمی لی", minutesAgo: 6 },
+  { title: "ارتقای پلن", detail: "نوح رابرتس", minutesAgo: 12 },
+  { title: "ثبت اعتبار", detail: "الیویا وایت", minutesAgo: 18 },
+  { title: "بازنشانی رمز", detail: "ایتن پارکر", minutesAgo: 24 },
+  { title: "نظر روی گزارش", detail: "سوفیا دیویس", minutesAgo: 32 },
+  { title: "بستن تیکت پشتیبانی", detail: "مایکل چن", minutesAgo: 45 },
+  { title: "پردازش تسویه", detail: "اما ویلسون", minutesAgo: 60 },
+];
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title} asChild>
+          <a
+            href={logo.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="min-w-0"
+          >
+            <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+              <img
+                src={logo.src}
+                alt={logo.alt}
+                width={24}
+                height={24}
+                className="size-6 text-primary-foreground invert dark:invert-0"
+              />
+            </div>
+            <div className="flex min-w-0 flex-col gap-0.5 leading-none">
+              <span className="truncate font-medium">{logo.title}</span>
+              <span className="truncate text-xs text-muted-foreground">
+                {logo.description}
+              </span>
+            </div>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <LayoutDashboard className="size-5" aria-hidden="true" />
+      <h1 className="text-base font-medium text-pretty">داشبورد</h1>
+
+      <div className="ms-auto flex items-center gap-2">
+        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
+          <Search
+            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            name="header-search"
+            inputMode="search"
+            autoComplete="off"
+            aria-label="جستجوی داشبورد"
+            placeholder="جستجوی کاربران، فضاهای کاری…"
+            className="h-9 w-full pe-14 ps-9 text-sm"
+          />
+          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 rounded-md border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
+            {"\u2318"}
+            {"\u00a0"}K
+          </kbd>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="relative size-9"
+              aria-label={`اعلان‌ها، ${unreadNotificationCount.toLocaleString("fa-IR")} خوانده‌نشده`}
+            >
+              <Bell className="size-4" aria-hidden="true" />
+              <span className="absolute -top-1 -end-1 flex size-[18px] items-center justify-center rounded-full bg-red-600 text-[10px] leading-none font-semibold text-white ring-2 ring-background">
+                {unreadNotificationCount}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-80 sm:w-96">
+            <DropdownMenuLabel className="text-base font-medium">
+              اعلان‌ها
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {headerNotificationItems.map((item) => (
+              <DropdownMenuItem
+                key={item.id}
+                className="cursor-default flex-col items-start gap-1 py-3"
+                onSelect={(event: Event) => event.preventDefault()}
+              >
+                <span className="font-medium text-foreground">
+                  {item.title}
+                </span>
+                <span className="text-xs leading-snug font-normal text-muted-foreground">
+                  {item.body}
+                </span>
+                <span className="text-[10px] text-muted-foreground/80">
+                  {item.time}
+                </span>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="justify-center text-center font-medium">
+              علامت‌گذاری همه به‌عنوان خوانده‌شده
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+};
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+  colors,
+}: any & {
+  colors: { primary: string; secondary: string };
+}) {
+  if (!active || !payload?.length) return null;
+
+  const thisYear = payload.find((p: any) => p.dataKey === "thisYear")?.value || 0;
+  const prevYear = payload.find((p: any) => p.dataKey === "prevYear")?.value || 0;
+  const diff = Number(thisYear) - Number(prevYear);
+  const percentage = prevYear ? Math.round((diff / Number(prevYear)) * 100) : 0;
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}، {currentYear.toLocaleString("fa-IR")}
+      </p>
+      <div className="space-y-1 sm:space-y-1.5">
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.primary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            امسال:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(thisYear))}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.secondary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            سال قبل:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(prevYear))}
+          </span>
+        </div>
+        <div className="mt-1 border-t border-border pt-1">
+          <span
+            className={cn(
+              "text-[10px] font-medium sm:text-xs",
+              diff >= 0 ? "text-emerald-500" : "text-red-500",
+            )}
+          >
+            {diff >= 0 ? "+" : ""}
+            {percentage.toLocaleString("fa-IR")}٪ نسبت به سال قبل
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const RevenueFlowChart = () => {
+  const [period, setPeriod] = React.useState<TimePeriod>("6months");
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextPeriod = params.get("period");
+    if (nextPeriod === "6months" || nextPeriod === "year") {
+      setPeriod(nextPeriod);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (period !== "6months") {
+      params.set("period", period);
+    } else {
+      params.delete("period");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [period]);
+
+  const chartData = getDataForPeriod(period);
+  const totalRevenue = chartData.reduce((acc, item) => acc + item.thisYear, 0);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:gap-6 sm:p-6">
+      <div className="flex flex-wrap items-center gap-2 sm:gap-4">
+        <div className="flex flex-1 flex-col gap-1">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(totalRevenue)}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            درآمد کل ({periodLabels[period]})
+          </p>
+        </div>
+        <div className="hidden items-center gap-3 sm:flex sm:gap-5">
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2.5 rounded-full sm:size-3"
+              style={{ backgroundColor: palette.primary }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              امسال
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2.5 rounded-full sm:size-3"
+              style={{ backgroundColor: palette.secondary.light }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              سال قبل
+            </span>
+          </div>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7 sm:size-8"
+              aria-label="انتخاب بازه زمانی"
+            >
+              <MoreHorizontal className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>بازه زمانی</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {(Object.keys(periodLabels) as TimePeriod[]).map((key) => (
+              <DropdownMenuCheckboxItem
+                key={key}
+                checked={period === key}
+                onCheckedChange={() => setPeriod(key)}
+              >
+                {periodLabels[key]}
+              </DropdownMenuCheckboxItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={(event: Event) => event.preventDefault()}
+            >
+              خروجی داده نمودار
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={(event: Event) => event.preventDefault()}
+            >
+              باز کردن در گزارش‌گیری
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="h-[200px] w-full min-w-0 sm:h-[240px] lg:h-[280px]">
+        <ChartContainer config={revenueChartConfig} className="h-full w-full">
+          <BarChart data={chartData} barGap={2}>
+            <CartesianGrid strokeDasharray="0" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              tickFormatter={(value) => compactCurrencyFormatter.format(value)}
+              width={40}
+            />
+            <Tooltip
+              content={
+                <CustomTooltip
+                  colors={{
+                    primary: "var(--color-thisYear)",
+                    secondary: "var(--color-prevYear)",
+                  }}
+                />
+              }
+              cursor={{ fillOpacity: 0.05, radius: 4 }}
+            />
+            <Bar
+              dataKey="thisYear"
+              fill="var(--color-thisYear)"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={24}
+            />
+            <Bar
+              dataKey="prevYear"
+              fill="var(--color-prevYear)"
+              fillOpacity={0.4}
+              radius={[4, 4, 0, 0]}
+              maxBarSize={24}
+            />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const StatsCardsVertical = () => {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:flex xl:w-[360px] xl:flex-col xl:justify-between">
+      {statsCardData.map((stat) => {
+        const sparkData = stat.sparklineData.map((v, i) => ({
+          idx: i,
+          value: v,
+        }));
+        const chartConfig = stat.isPositive
+          ? sparklinePositiveConfig
+          : sparklineNegativeConfig;
+        const sparkColor = stat.isPositive ? "#16a34a" : "#dc2626";
+        const gradientId = `sparkFill-${stat.title.replace(/\s+/g, "-")}`;
+
+        return (
+          <div
+            key={stat.title}
+            className="flex flex-col gap-3 rounded-xl border bg-card p-4 sm:p-5"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col gap-1">
+                <span className="text-xs text-muted-foreground sm:text-sm">
+                  {stat.title}
+                </span>
+                <span className="text-lg font-semibold tracking-tight sm:text-xl">
+                  {stat.format === "currency"
+                    ? currencyFormatter.format(stat.value)
+                    : numberFormatter.format(stat.value)}
+                </span>
+              </div>
+
+              <div className="h-10 w-24">
+                <ChartContainer config={chartConfig} className="h-full w-full">
+                  <AreaChart data={sparkData}>
+                    <defs>
+                      <linearGradient
+                        id={gradientId}
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor={sparkColor}
+                          stopOpacity={0.25}
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor={sparkColor}
+                          stopOpacity={0.02}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <Tooltip
+                      content={({ active, payload }) => {
+                        if (!active || !payload?.length) return null;
+                        const value = payload[0].value as number;
+                        const formatted =
+                          stat.format === "currency"
+                            ? currencyFormatter.format(value)
+                            : numberFormatter.format(value);
+                        return (
+                          <div className="rounded-md border border-border bg-popover px-2 py-1 shadow-lg">
+                            <p className="text-xs font-medium text-foreground">
+                              {formatted}
+                            </p>
+                          </div>
+                        );
+                      }}
+                      cursor={{ strokeOpacity: 0.2 }}
+                    />
+                    <Area
+                      type="monotone"
+                      dataKey="value"
+                      stroke={sparkColor}
+                      strokeWidth={1.5}
+                      fill={`url(#${gradientId})`}
+                      dot={false}
+                    />
+                  </AreaChart>
+                </ChartContainer>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 text-[10px] sm:text-xs">
+              <span
+                className={cn(
+                  "font-medium",
+                  stat.isPositive
+                    ? "text-emerald-600 dark:text-emerald-400"
+                    : "text-red-600 dark:text-red-400",
+                )}
+              >
+                {stat.isPositive ? "+" : ""}
+                {stat.changePercent.toLocaleString("fa-IR", {
+                  minimumFractionDigits: 1,
+                  maximumFractionDigits: 1,
+                })}
+                ٪
+              </span>
+              <span className="flex items-center gap-2 text-muted-foreground">
+                <span className="size-1 rounded-full bg-muted-foreground" />
+                <span>نسبت به ماه قبل</span>
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const RecentTransactionsTable = ({ className }: { className?: string }) => {
+  const [statusFilter, setStatusFilter] = React.useState<OrderStatus | "all">(
+    "all",
+  );
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [isHydrated, setIsHydrated] = React.useState(false);
+  const pageSize = 6;
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextStatus = params.get("status");
+    if (
+      nextStatus &&
+      (nextStatus === "all" ||
+        orderStatuses.includes(nextStatus as OrderStatus))
+    ) {
+      setStatusFilter(nextStatus as OrderStatus | "all");
+    }
+    const nextPage = Number(params.get("page"));
+    if (!Number.isNaN(nextPage) && nextPage > 0) {
+      setCurrentPage(nextPage);
+    }
+    setIsHydrated(true);
+  }, []);
+
+  const filteredOrders = React.useMemo(() => {
+    if (statusFilter === "all") return orders;
+    return orders.filter((order) => order.status === statusFilter);
+  }, [statusFilter]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredOrders.length / pageSize));
+
+  const paginatedOrders = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredOrders.slice(startIndex, startIndex + pageSize);
+  }, [filteredOrders, currentPage, pageSize]);
+
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [statusFilter]);
+
+  React.useEffect(() => {
+    if (!isHydrated || typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (statusFilter !== "all") {
+      params.set("status", statusFilter);
+    } else {
+      params.delete("status");
+    }
+    if (currentPage > 1) {
+      params.set("page", String(currentPage));
+    } else {
+      params.delete("page");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [statusFilter, currentPage, isHydrated]);
+
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  const startRow = filteredOrders.length ? (currentPage - 1) * pageSize + 1 : 0;
+  const endRow = Math.min(currentPage * pageSize, filteredOrders.length);
+
+  return (
+    <div className={cn("rounded-xl border bg-card", className)}>
+      <div className="flex items-center justify-between gap-3 px-4 pt-4 sm:px-6">
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            تراکنش‌های اخیر
+          </h2>
+          <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
+            {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1.5 sm:h-9 sm:gap-2"
+            >
+              <span className="text-xs sm:text-sm">
+                {statusFilter === "all"
+                  ? "همه"
+                  : orderStatusLabels[statusFilter]}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-[180px]">
+            <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem
+              checked={statusFilter === "all"}
+              onCheckedChange={() => setStatusFilter("all")}
+            >
+              همه وضعیت‌ها
+            </DropdownMenuCheckboxItem>
+            {orderStatuses.map((status) => (
+              <DropdownMenuCheckboxItem
+                key={status}
+                checked={statusFilter === status}
+                onCheckedChange={() => setStatusFilter(status)}
+              >
+                {orderStatusLabels[status]}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="px-4 pt-3 pb-4 sm:px-6">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className={tableHeadClassName}>شماره سفارش</TableHead>
+              <TableHead className={tableHeadClassName}>خریدار</TableHead>
+              <TableHead className={tableHeadClassName}>مجموع</TableHead>
+              <TableHead className={tableHeadClassName}>وضعیت</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedOrders.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="h-20 text-center text-sm text-muted-foreground"
+                >
+                  تراکنشی یافت نشد.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedOrders.map((order) => (
+                <TableRow key={order.id}>
+                  <TableCell className="text-xs font-medium text-muted-foreground sm:text-sm">
+                    {order.orderNumber}
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground sm:text-sm">
+                    {order.customer}
+                  </TableCell>
+                  <TableCell className="text-xs text-foreground tabular-nums sm:text-sm">
+                    {currencyFormatter.format(order.total)}
+                  </TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        "inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium sm:text-xs",
+                        statusStyles[order.status],
+                      )}
+                    >
+                      {orderStatusLabels[order.status]}
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between border-t px-4 py-3 text-[10px] text-muted-foreground sm:px-6 sm:text-xs">
+        <span>
+          {filteredOrders.length === 0
+            ? "۰"
+            : `${startRow.toLocaleString("fa-IR")}-${endRow.toLocaleString("fa-IR")}`}{" "}
+          از {filteredOrders.length.toLocaleString("fa-IR")}
+        </span>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه قبل"
+          >
+            <ChevronLeft className="size-3.5 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه بعد"
+          >
+            <ChevronRight className="size-3.5 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const RecentActivity = ({ className }: { className?: string }) => {
+  return (
+    <div className={cn("rounded-xl border bg-card", className)}>
+      <div className="flex items-center justify-between gap-3 px-4 pt-4 sm:px-6">
+        <h2 className="text-sm font-medium text-pretty sm:text-base">
+          فعالیت‌های اخیر
+        </h2>
+      </div>
+
+      <ScrollArea className="h-[360px] px-4 pt-2 pb-4 text-xs sm:px-6 sm:text-sm">
+        <div className="divide-y">
+          {recentActivity.map((item) => (
+            <div key={`${item.title}-${item.minutesAgo}`} className="py-3">
+              <div className="flex min-w-0 items-center justify-between gap-3">
+                <span className="min-w-0 truncate font-medium text-foreground">
+                  {item.title}
+                </span>
+                <span className="shrink-0 text-[10px] text-muted-foreground sm:text-xs">
+                  {formatRelativeTime(item.minutesAgo)}
+                </span>
+              </div>
+              <span className="text-[10px] break-words text-muted-foreground sm:text-xs">
+                {item.detail}
+              </span>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:p-4 md:p-6"
+    >
+      <div className="flex flex-col gap-4 xl:flex-row">
+        <RevenueFlowChart />
+        <StatsCardsVertical />
+      </div>
+      <div className="flex flex-col gap-4 xl:flex-row">
+        <RecentTransactionsTable className="flex-1" />
+        <RecentActivity className="xl:w-[360px]" />
+      </div>
+    </div>
+  );
+};
+
+const Dashboard3 = ({ className }: { className?: string }) => {
+  return (
+    <TooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+};
+
+export { Dashboard3 };
diff --git a/blocks/dashboard4.tsx b/blocks/dashboard4.tsx
new file mode 100644
index 0000000..adfce32
--- /dev/null
+++ b/blocks/dashboard4.tsx
@@ -0,0 +1,1850 @@
+"use client";
+
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  BarChart3,
+  Bell,
+  Banknote,
+  Box,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  CircleDollarSign,
+  ClipboardList,
+  Copy,
+  Eye,
+  Filter,
+  Globe,
+  HelpCircle,
+  LayoutDashboard,
+  LayoutGrid,
+  LineChart,
+  LogOut,
+  MessageSquare,
+  MoreHorizontal,
+  Package,
+  Pencil,
+  RotateCcw,
+  Search,
+  Settings,
+  Truck,
+  User,
+  Users,
+  X,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip as ShadTooltip,
+  TooltipContent as ShadTooltipContent,
+  TooltipProvider as ShadTooltipProvider,
+  TooltipTrigger as ShadTooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type StatItem = {
+  title: string;
+  previousValue: number;
+  value: number;
+  changePercent: number;
+  isPositive: boolean;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  format: "currency" | "number";
+};
+
+type Segment = {
+  name: string;
+  value: number;
+  color: string;
+};
+
+type CategoryBreakdownRow = {
+  name: string;
+  orderCount: number;
+  changePercent: number;
+  isPositive: boolean;
+};
+
+type OrderStatus = "Processing" | "Shipped" | "Delivered" | "Cancelled";
+
+type Order = {
+  id: string;
+  orderNumber: string;
+  customer: string;
+  customerInitials: string;
+  category: string;
+  products: string[];
+  productCount: number;
+  status: OrderStatus;
+  total: number;
+  date: string;
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 0,
+});
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const orderStatusLabels: Record<OrderStatus, string> = {
+  Processing: "در حال پردازش",
+  Shipped: "ارسال‌شده",
+  Delivered: "تحویل‌شده",
+  Cancelled: "لغوشده",
+};
+
+const categoryLabels: Record<string, string> = {
+  "Computers & tablets": "رایانه و تبلت",
+  Mobile: "موبایل",
+  "Wearables & audio": "پوشیدنی و صوتی",
+  "Home & TV": "خانه و تلویزیون",
+};
+
+const formatOrderDate = (dateStr: string) => {
+  const parsed = new Date(dateStr);
+  if (Number.isNaN(parsed.getTime())) return dateStr;
+  return new Intl.DateTimeFormat("fa-IR", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(parsed);
+};
+
+/**
+ * Custom hook for hover highlight interaction.
+ * Provides stable callback to prevent unnecessary re-renders in chart components.
+ */
+function useHoverHighlight<T extends string | number>() {
+  const [active, setActive] = React.useState<T | null>(null);
+
+  const handleHover = React.useCallback((value: T | null) => {
+    setActive(value);
+  }, []);
+
+  return { active, handleHover };
+}
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+    description: "فروشگاه آنلاین",
+  },
+  navGroups: [
+    {
+      title: "اصلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+      ],
+    },
+    {
+      title: "کاتالوگ",
+      defaultOpen: true,
+      items: [
+        {
+          label: "محصولات",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: Package, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
+            { label: "موجودی", icon: Package, href: "#" },
+          ],
+        },
+        { label: "ارسال", icon: Truck, href: "#" },
+      ],
+    },
+    {
+      title: "مشتریان",
+      defaultOpen: false,
+      items: [
+        { label: "همه مشتریان", icon: Users, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "نمای کلی", icon: Globe, href: "#" },
+        { label: "گزارش‌ها", icon: BarChart3, href: "#" },
+        { label: "فروش", icon: LineChart, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "john@acme.store",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+  },
+};
+
+const statsData: StatItem[] = [
+  {
+    title: "فروش ناخالص (ماه جاری)",
+    previousValue: 148230,
+    value: 189541,
+    changePercent: 27.9,
+    isPositive: true,
+    icon: CircleDollarSign,
+    format: "currency",
+  },
+  {
+    title: "سفارش‌های تکمیل‌شده",
+    previousValue: 18452,
+    value: 21847,
+    changePercent: 18.4,
+    isPositive: true,
+    icon: ClipboardList,
+    format: "number",
+  },
+  {
+    title: "مشتریان جدید",
+    previousValue: 4120,
+    value: 4975,
+    changePercent: 20.8,
+    isPositive: true,
+    icon: Users,
+    format: "number",
+  },
+  {
+    title: "مبلغ بازپرداخت",
+    previousValue: 9821,
+    value: 8473,
+    changePercent: 13.7,
+    isPositive: false,
+    icon: Banknote,
+    format: "currency",
+  },
+];
+
+const segments: Segment[] = [
+  { name: "رایانه و تبلت", value: 78000, color: palette.primary },
+  { name: "موبایل", value: 52000, color: palette.secondary.light },
+  { name: "پوشیدنی و صوتی", value: 35000, color: palette.tertiary.light },
+  { name: "خانه و تلویزیون", value: 24541, color: palette.quaternary.light },
+];
+
+const categoryBreakdown: CategoryBreakdownRow[] = [
+  {
+    name: "رایانه و تبلت",
+    orderCount: 8420,
+    changePercent: 14.2,
+    isPositive: true,
+  },
+  { name: "موبایل", orderCount: 5340, changePercent: 19.1, isPositive: true },
+  {
+    name: "پوشیدنی و صوتی",
+    orderCount: 2980,
+    changePercent: 7.4,
+    isPositive: true,
+  },
+  {
+    name: "خانه و تلویزیون",
+    orderCount: 1240,
+    changePercent: 4.2,
+    isPositive: false,
+  },
+];
+
+const fullYearData = [
+  { month: monthLabel(0), thisYear: 42000, prevYear: 38000 },
+  { month: monthLabel(1), thisYear: 38000, prevYear: 45000 },
+  { month: monthLabel(2), thisYear: 52000, prevYear: 41000 },
+  { month: monthLabel(3), thisYear: 45000, prevYear: 48000 },
+  { month: monthLabel(4), thisYear: 58000, prevYear: 44000 },
+  { month: monthLabel(5), thisYear: 41000, prevYear: 52000 },
+  { month: monthLabel(6), thisYear: 55000, prevYear: 47000 },
+  { month: monthLabel(7), thisYear: 48000, prevYear: 53000 },
+  { month: monthLabel(8), thisYear: 62000, prevYear: 49000 },
+  { month: monthLabel(9), thisYear: 54000, prevYear: 58000 },
+  { month: monthLabel(10), thisYear: 67000, prevYear: 52000 },
+  { month: monthLabel(11), thisYear: 71000, prevYear: 61000 },
+];
+
+type TimePeriod = "6months" | "year";
+
+const periodLabels: Record<TimePeriod, string> = {
+  "6months": "۶ ماه اخیر",
+  year: "۱۲ ماه",
+};
+
+function getDataForPeriod(period: TimePeriod) {
+  if (period === "6months") {
+    return fullYearData.slice(0, 6);
+  }
+  return fullYearData;
+}
+
+const orderStatuses: OrderStatus[] = [
+  "Processing",
+  "Shipped",
+  "Delivered",
+  "Cancelled",
+];
+
+const orders: Order[] = [
+  {
+    id: "1",
+    orderNumber: "ORD-2024-001",
+    customer: "Sarah Johnson",
+    customerInitials: "SJ",
+    category: "Computers & tablets",
+    products: ["MacBook Pro 14", "Magic Mouse"],
+    productCount: 2,
+    status: "Delivered",
+    total: 2499.0,
+    date: "Jan 28, 2024",
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-2024-002",
+    customer: "Michael Chen",
+    customerInitials: "MC",
+    category: "Mobile",
+    products: ["iPhone 15 Pro", "AirPods Pro"],
+    productCount: 2,
+    status: "Shipped",
+    total: 1348.0,
+    date: "Jan 27, 2024",
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-2024-003",
+    customer: "Emma Wilson",
+    customerInitials: "EW",
+    category: "Computers & tablets",
+    products: ["iPad Air", "Apple Pencil", "Smart Keyboard"],
+    productCount: 3,
+    status: "Processing",
+    total: 1198.0,
+    date: "Jan 27, 2024",
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-2024-004",
+    customer: "James Rodriguez",
+    customerInitials: "JR",
+    category: "Wearables & audio",
+    products: ["Apple Watch Ultra"],
+    productCount: 1,
+    status: "Delivered",
+    total: 799.0,
+    date: "Jan 26, 2024",
+  },
+  {
+    id: "5",
+    orderNumber: "ORD-2024-005",
+    customer: "Lisa Park",
+    customerInitials: "LP",
+    category: "Computers & tablets",
+    products: ["Mac Mini M2"],
+    productCount: 1,
+    status: "Cancelled",
+    total: 599.0,
+    date: "Jan 26, 2024",
+  },
+  {
+    id: "6",
+    orderNumber: "ORD-2024-006",
+    customer: "David Kim",
+    customerInitials: "DK",
+    category: "Computers & tablets",
+    products: ["Studio Display", "Mac Studio"],
+    productCount: 2,
+    status: "Shipped",
+    total: 5498.0,
+    date: "Jan 25, 2024",
+  },
+  {
+    id: "7",
+    orderNumber: "ORD-2024-007",
+    customer: "Anna Martinez",
+    customerInitials: "AM",
+    category: "Computers & tablets",
+    products: ["MacBook Air M2"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1199.0,
+    date: "Jan 25, 2024",
+  },
+  {
+    id: "8",
+    orderNumber: "ORD-2024-008",
+    customer: "Robert Taylor",
+    customerInitials: "RT",
+    category: "Mobile",
+    products: ["iPhone 15", "MagSafe Charger"],
+    productCount: 2,
+    status: "Processing",
+    total: 878.0,
+    date: "Jan 24, 2024",
+  },
+  {
+    id: "9",
+    orderNumber: "ORD-2024-009",
+    customer: "Jennifer Lee",
+    customerInitials: "JL",
+    category: "Wearables & audio",
+    products: ["AirPods Max"],
+    productCount: 1,
+    status: "Shipped",
+    total: 549.0,
+    date: "Jan 24, 2024",
+  },
+  {
+    id: "10",
+    orderNumber: "ORD-2024-010",
+    customer: "William Brown",
+    customerInitials: "WB",
+    category: "Computers & tablets",
+    products: ["iPad Pro 12.9", "Magic Keyboard"],
+    productCount: 2,
+    status: "Delivered",
+    total: 1648.0,
+    date: "Jan 23, 2024",
+  },
+  {
+    id: "11",
+    orderNumber: "ORD-2024-011",
+    customer: "Sophia Davis",
+    customerInitials: "SD",
+    category: "Computers & tablets",
+    products: ["MacBook Pro 16"],
+    productCount: 1,
+    status: "Processing",
+    total: 2499.0,
+    date: "Jan 23, 2024",
+  },
+  {
+    id: "12",
+    orderNumber: "ORD-2024-012",
+    customer: "Daniel Garcia",
+    customerInitials: "DG",
+    category: "Home & TV",
+    products: ["Apple TV 4K", "HomePod mini"],
+    productCount: 2,
+    status: "Cancelled",
+    total: 278.0,
+    date: "Jan 22, 2024",
+  },
+  {
+    id: "13",
+    orderNumber: "ORD-2024-013",
+    customer: "Olivia White",
+    customerInitials: "OW",
+    category: "Mobile",
+    products: ["iPhone 15 Pro Max"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1199.0,
+    date: "Jan 22, 2024",
+  },
+  {
+    id: "14",
+    orderNumber: "ORD-2024-014",
+    customer: "Thomas Anderson",
+    customerInitials: "TA",
+    category: "Computers & tablets",
+    products: ["Mac Pro", "Pro Display XDR"],
+    productCount: 2,
+    status: "Shipped",
+    total: 12498.0,
+    date: "Jan 21, 2024",
+  },
+  {
+    id: "15",
+    orderNumber: "ORD-2024-015",
+    customer: "Emily Thompson",
+    customerInitials: "ET",
+    category: "Computers & tablets",
+    products: ["iPad mini", "Apple Pencil"],
+    productCount: 2,
+    status: "Delivered",
+    total: 648.0,
+    date: "Jan 21, 2024",
+  },
+  {
+    id: "16",
+    orderNumber: "ORD-2024-016",
+    customer: "Christopher Moore",
+    customerInitials: "CM",
+    category: "Wearables & audio",
+    products: ["AirPods Pro 2"],
+    productCount: 1,
+    status: "Processing",
+    total: 249.0,
+    date: "Jan 20, 2024",
+  },
+  {
+    id: "17",
+    orderNumber: "ORD-2024-017",
+    customer: "Isabella Jackson",
+    customerInitials: "IJ",
+    category: "Wearables & audio",
+    products: ["Apple Watch Series 9"],
+    productCount: 1,
+    status: "Shipped",
+    total: 399.0,
+    date: "Jan 20, 2024",
+  },
+  {
+    id: "18",
+    orderNumber: "ORD-2024-018",
+    customer: "Matthew Harris",
+    customerInitials: "MH",
+    category: "Computers & tablets",
+    products: ["MacBook Air 15"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1299.0,
+    date: "Jan 19, 2024",
+  },
+  {
+    id: "19",
+    orderNumber: "ORD-2024-019",
+    customer: "Ava Clark",
+    customerInitials: "AC",
+    category: "Mobile",
+    products: ["iPhone SE", "EarPods"],
+    productCount: 2,
+    status: "Cancelled",
+    total: 448.0,
+    date: "Jan 19, 2024",
+  },
+  {
+    id: "20",
+    orderNumber: "ORD-2024-020",
+    customer: "Joshua Lewis",
+    customerInitials: "JL",
+    category: "Computers & tablets",
+    products: ["Mac Mini M2 Pro"],
+    productCount: 1,
+    status: "Processing",
+    total: 1299.0,
+    date: "Jan 18, 2024",
+  },
+];
+
+const PAGE_SIZE_OPTIONS = [10, 25, 50];
+
+const revenueChartConfig = {
+  thisYear: { label: "فروش ناخالص", color: palette.primary },
+  prevYear: { label: "سال قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              width={24}
+              height={24}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = (item.children?.length ?? 0) > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <LayoutDashboard className="size-5" aria-hidden="true" />
+      <h1 className="text-base font-medium">داشبورد</h1>
+
+      <div className="ms-auto flex items-center gap-2">
+        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
+          <Search
+            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            name="header-search"
+            inputMode="search"
+            autoComplete="off"
+            aria-label="جستجوی داشبورد"
+            placeholder="جستجوی سفارش‌ها، مشتریان…"
+            className="h-9 w-full pe-14 ps-9 text-sm"
+          />
+          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 rounded-md border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
+            {"\u2318"}
+            {"\u00a0"}K
+          </kbd>
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="اعلان‌ها"
+        >
+          <Bell className="size-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="راهنما"
+        >
+          <HelpCircle className="size-4" />
+        </Button>
+      </div>
+    </header>
+  );
+};
+
+const StatsCards = () => {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-4 lg:gap-6">
+      {statsData.map((stat) => {
+        const formatter =
+          stat.format === "currency" ? currencyFormatter : numberFormatter;
+
+        return (
+          <div
+            key={stat.title}
+            className="flex flex-col gap-3 rounded-xl border bg-card p-4 sm:p-5 lg:p-6"
+          >
+            <div className="flex items-center gap-1.5 text-muted-foreground sm:gap-2">
+              <stat.icon className="size-3.5 sm:size-4" aria-hidden="true" />
+              <span className="truncate text-[10px] font-medium sm:text-xs lg:text-sm">
+                {stat.title}
+              </span>
+            </div>
+            <p className="hidden text-[10px] text-muted-foreground/70 sm:block sm:text-xs">
+              {formatter.format(stat.previousValue)} ماه قبل
+            </p>
+            <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl lg:text-[28px]">
+              {formatter.format(stat.value)}
+            </p>
+            <div className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[10px] sm:text-xs">
+              {stat.isPositive ? (
+                <ArrowUpRight className="size-3 shrink-0 text-emerald-600 sm:size-3.5" />
+              ) : (
+                <ArrowDownRight className="size-3 shrink-0 text-red-600 sm:size-3.5" />
+              )}
+              <span
+                className={cn(
+                  "whitespace-nowrap",
+                  stat.isPositive ? "text-emerald-600" : "text-red-600",
+                )}
+              >
+                {stat.isPositive ? "+" : "-"}
+                {stat.changePercent.toLocaleString("fa-IR", {
+                  minimumFractionDigits: 1,
+                  maximumFractionDigits: 1,
+                })}
+                ٪
+              </span>
+              <span className="whitespace-nowrap text-muted-foreground">
+                نسبت به ماه قبل
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const SegmentationPanel = () => {
+  const { active: activeSegment, handleHover } = useHoverHighlight<string>();
+  const totalSegmentSales = segments.reduce((sum, s) => sum + s.value, 0);
+
+  return (
+    <div className="flex min-w-0 flex-col rounded-xl border bg-card xl:w-[410px]">
+      <div className="flex h-14 items-center px-4 sm:px-5">
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 sm:size-8"
+            aria-label="فروش بر اساس دسته"
+          >
+            <LayoutGrid
+              className="size-4 text-muted-foreground sm:size-[18px]"
+              aria-hidden="true"
+            />
+          </Button>
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            فروش بر اساس دسته
+          </h2>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4 p-4 sm:p-5">
+        <div className="flex items-baseline gap-2">
+          <span className="text-xl font-semibold sm:text-3xl">
+            {compactCurrencyFormatter.format(totalSegmentSales)}
+          </span>
+          <span className="text-sm text-muted-foreground">فروش ناخالص ماه جاری</span>
+        </div>
+
+        <div className="flex h-2.5 gap-1 sm:h-3">
+          {segments.map((segment, index) => (
+            <ShadTooltipProvider key={segment.name}>
+              <ShadTooltip>
+                <ShadTooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className={cn(
+                      "h-full border-0 p-0 transition-opacity duration-200 motion-reduce:transition-none",
+                      index === 0 && "rounded-s-full",
+                      index === segments.length - 1 && "rounded-e-full",
+                      activeSegment !== null &&
+                      activeSegment !== segment.name &&
+                      "opacity-40",
+                    )}
+                    style={{
+                      flex: segment.value,
+                      backgroundColor: segment.color,
+                    }}
+                    onPointerEnter={() => handleHover(segment.name)}
+                    onPointerLeave={() => handleHover(null)}
+                    onFocus={() => handleHover(segment.name)}
+                    onBlur={() => handleHover(null)}
+                    aria-label={`${segment.name}: ${currencyFormatter.format(segment.value)} (${Math.round((segment.value / totalSegmentSales) * 100).toLocaleString("fa-IR")}٪)`}
+                  />
+                </ShadTooltipTrigger>
+                <ShadTooltipContent
+                  side="top"
+                  sideOffset={8}
+                  className="px-3 py-2"
+                >
+                  <div className="grid gap-1">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="size-2 rounded-full"
+                        style={{ backgroundColor: segment.color }}
+                      />
+                      <span className="font-medium">{segment.name}</span>
+                      <span className="text-muted-foreground tabular-nums">
+                        {Math.round(
+                          (segment.value / totalSegmentSales) * 100,
+                        ).toLocaleString("fa-IR")}
+                        ٪
+                      </span>
+                    </div>
+                    <span className="text-muted-foreground tabular-nums">
+                      {currencyFormatter.format(segment.value)}
+                    </span>
+                  </div>
+                </ShadTooltipContent>
+              </ShadTooltip>
+            </ShadTooltipProvider>
+          ))}
+        </div>
+
+        <div className="flex flex-wrap gap-3 sm:gap-5">
+          {segments.map((segment) => (
+            <ShadTooltipProvider key={segment.name}>
+              <ShadTooltip>
+                <ShadTooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className={cn(
+                      "flex items-center gap-1.5 border-0 bg-transparent p-0 transition-opacity duration-200 motion-reduce:transition-none",
+                      activeSegment !== null &&
+                      activeSegment !== segment.name &&
+                      "opacity-40",
+                    )}
+                    onPointerEnter={() => handleHover(segment.name)}
+                    onPointerLeave={() => handleHover(null)}
+                    onFocus={() => handleHover(segment.name)}
+                    onBlur={() => handleHover(null)}
+                  >
+                    <span
+                      className="size-2 rounded-full sm:size-2.5"
+                      style={{ backgroundColor: segment.color }}
+                    />
+                    <span className="text-xs text-muted-foreground">
+                      {segment.name}
+                    </span>
+                  </button>
+                </ShadTooltipTrigger>
+                <ShadTooltipContent
+                  side="top"
+                  sideOffset={8}
+                  className="px-3 py-2"
+                >
+                  <div className="grid gap-1">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="size-2 rounded-full"
+                        style={{ backgroundColor: segment.color }}
+                      />
+                      <span className="font-medium">{segment.name}</span>
+                      <span className="text-muted-foreground tabular-nums">
+                        {Math.round(
+                          (segment.value / totalSegmentSales) * 100,
+                        ).toLocaleString("fa-IR")}
+                        ٪
+                      </span>
+                    </div>
+                    <span className="text-muted-foreground tabular-nums">
+                      {currencyFormatter.format(segment.value)}
+                    </span>
+                  </div>
+                </ShadTooltipContent>
+              </ShadTooltip>
+            </ShadTooltipProvider>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-[1fr_auto_auto] items-center gap-4">
+          <span className="text-xs text-muted-foreground">دسته</span>
+          <span className="text-xs text-muted-foreground">سفارش‌ها</span>
+          <span className="text-xs text-muted-foreground">نسبت به قبل</span>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          {categoryBreakdown.map((row) => (
+            <div
+              key={row.name}
+              className="grid grid-cols-[1fr_auto_auto] items-center gap-4"
+            >
+              <div className="flex min-w-0 items-center gap-2.5">
+                <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {row.name[0]}
+                  </span>
+                </div>
+                <span className="truncate text-sm font-medium">{row.name}</span>
+              </div>
+              <span className="text-sm tabular-nums">
+                {numberFormatter.format(row.orderCount)}
+              </span>
+              <div
+                className={cn(
+                  "flex items-center gap-0.5 text-xs",
+                  row.isPositive ? "text-emerald-600" : "text-red-600",
+                )}
+              >
+                {row.isPositive ? (
+                  <ArrowUpRight className="size-3.5" />
+                ) : (
+                  <ArrowDownRight className="size-3.5" />
+                )}
+                {row.changePercent.toLocaleString("fa-IR")}٪
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+  colors,
+}: any & {
+  colors: { primary: string; secondary: string };
+}) {
+  if (!active || !payload?.length) return null;
+
+  const thisYear = payload.find((p: any) => p.dataKey === "thisYear")?.value || 0;
+  const prevYear = payload.find((p: any) => p.dataKey === "prevYear")?.value || 0;
+  const diff = Number(thisYear) - Number(prevYear);
+  const percentage = prevYear ? Math.round((diff / Number(prevYear)) * 100) : 0;
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}، {currentYear.toLocaleString("fa-IR")}
+      </p>
+      <div className="space-y-1 sm:space-y-1.5">
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.primary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            فروش ناخالص:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(thisYear))}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.secondary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            سال قبل:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(prevYear))}
+          </span>
+        </div>
+        <div className="mt-1 border-t border-border pt-1">
+          <span
+            className={cn(
+              "text-[10px] font-medium sm:text-xs",
+              diff >= 0 ? "text-emerald-500" : "text-red-500",
+            )}
+          >
+            {diff >= 0 ? "+" : ""}
+            {percentage.toLocaleString("fa-IR")}٪ نسبت به سال قبل
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const RevenueFlowChart = () => {
+  const [period, setPeriod] = React.useState<TimePeriod>("6months");
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextPeriod = params.get("period");
+    if (nextPeriod === "6months" || nextPeriod === "year") {
+      setPeriod(nextPeriod);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (period !== "6months") {
+      params.set("period", period);
+    } else {
+      params.delete("period");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [period]);
+
+  const chartData = getDataForPeriod(period);
+  const totalGrossSales = chartData.reduce(
+    (acc, item) => acc + item.thisYear,
+    0,
+  );
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:gap-6 sm:p-6">
+      <div className="flex flex-wrap items-center gap-2 sm:gap-4">
+        <div className="flex flex-1 flex-col gap-1">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(totalGrossSales)}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            فروش ناخالص ({periodLabels[period]})
+          </p>
+        </div>
+        <div className="hidden items-center gap-3 sm:flex sm:gap-5">
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2.5 rounded-full sm:size-3"
+              style={{ backgroundColor: palette.primary }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              فروش ناخالص
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2.5 rounded-full sm:size-3"
+              style={{ backgroundColor: palette.secondary.light }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              سال قبل
+            </span>
+          </div>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7 sm:size-8"
+              aria-label="انتخاب بازه زمانی"
+            >
+              <MoreHorizontal className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>بازه زمانی</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {(Object.keys(periodLabels) as TimePeriod[]).map((key) => (
+              <DropdownMenuCheckboxItem
+                key={key}
+                checked={period === key}
+                onCheckedChange={() => setPeriod(key)}
+              >
+                {periodLabels[key]}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="h-[200px] w-full min-w-0 sm:h-[240px] lg:h-[280px]">
+        <ChartContainer config={revenueChartConfig} className="h-full w-full">
+          <BarChart data={chartData} barGap={2}>
+            <CartesianGrid strokeDasharray="0" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              tickFormatter={(value) => compactCurrencyFormatter.format(value)}
+              width={40}
+            />
+            <Tooltip
+              content={
+                <CustomTooltip
+                  colors={{
+                    primary: "var(--color-thisYear)",
+                    secondary: "var(--color-prevYear)",
+                  }}
+                />
+              }
+              cursor={{ fillOpacity: 0.05, radius: 4 }}
+            />
+            <Bar
+              dataKey="thisYear"
+              fill="var(--color-thisYear)"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={24}
+            />
+            <Bar
+              dataKey="prevYear"
+              fill="var(--color-prevYear)"
+              fillOpacity={0.4}
+              radius={[4, 4, 0, 0]}
+              maxBarSize={24}
+            />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const statusStyles: Record<OrderStatus, string> = {
+  Processing:
+    "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/20",
+  Shipped:
+    "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20",
+  Delivered:
+    "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/20",
+  Cancelled:
+    "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20",
+};
+
+const RecentOrdersTable = () => {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState<string>("all");
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(10);
+  const [isHydrated, setIsHydrated] = React.useState(false);
+  const skipNextReset = React.useRef(true);
+
+  const hasActiveFilters = statusFilter !== "all";
+
+  const clearFilters = () => {
+    setStatusFilter("all");
+  };
+
+  const filteredOrders = React.useMemo(() => {
+    return orders.filter((order) => {
+      const q = searchQuery.toLowerCase();
+      const matchesSearch =
+        order.orderNumber.toLowerCase().includes(q) ||
+        order.customer.toLowerCase().includes(q) ||
+        order.category.toLowerCase().includes(q);
+
+      const matchesStatus =
+        statusFilter === "all" || order.status === statusFilter;
+
+      return matchesSearch && matchesStatus;
+    });
+  }, [searchQuery, statusFilter]);
+
+  const totalPages = Math.ceil(filteredOrders.length / pageSize);
+
+  const paginatedOrders = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return filteredOrders.slice(startIndex, endIndex);
+  }, [filteredOrders, currentPage, pageSize]);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const params = new URLSearchParams(window.location.search);
+    const statusParam = params.get("status");
+    const pageParam = Number.parseInt(params.get("page") ?? "", 10);
+    const pageSizeParam = Number.parseInt(params.get("pageSize") ?? "", 10);
+
+    setSearchQuery(params.get("q") ?? "");
+    setStatusFilter(
+      statusParam && orderStatuses.includes(statusParam as OrderStatus)
+        ? statusParam
+        : "all",
+    );
+    setCurrentPage(Number.isFinite(pageParam) && pageParam > 0 ? pageParam : 1);
+    setPageSize(PAGE_SIZE_OPTIONS.includes(pageSizeParam) ? pageSizeParam : 10);
+    setIsHydrated(true);
+  }, []);
+
+  React.useEffect(() => {
+    if (!isHydrated) return;
+    if (skipNextReset.current) {
+      skipNextReset.current = false;
+      return;
+    }
+    setCurrentPage(1);
+  }, [searchQuery, statusFilter, pageSize, isHydrated]);
+
+  React.useEffect(() => {
+    if (!isHydrated) return;
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+
+    if (searchQuery) {
+      params.set("q", searchQuery);
+    } else {
+      params.delete("q");
+    }
+
+    if (statusFilter !== "all") {
+      params.set("status", statusFilter);
+    } else {
+      params.delete("status");
+    }
+
+    if (currentPage > 1) {
+      params.set("page", String(currentPage));
+    } else {
+      params.delete("page");
+    }
+
+    if (pageSize !== PAGE_SIZE_OPTIONS[0]) {
+      params.set("pageSize", String(pageSize));
+    } else {
+      params.delete("pageSize");
+    }
+
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [searchQuery, statusFilter, currentPage, pageSize, isHydrated]);
+
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  return (
+    <div className="rounded-xl border bg-card">
+      <div className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center sm:gap-4 sm:px-6 sm:py-3.5">
+        <div className="flex flex-1 items-center gap-2 sm:gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 shrink-0 sm:size-8"
+            aria-label="سفارش‌های اخیر"
+          >
+            <ClipboardList className="size-4 text-muted-foreground sm:size-[18px]" />
+          </Button>
+          <span className="text-sm font-medium sm:text-base">
+            سفارش‌های اخیر
+          </span>
+          <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
+            {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="relative flex-1 sm:flex-none">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground sm:size-5"
+              aria-hidden="true"
+            />
+            <Input
+              placeholder="جستجوی سفارش، مشتری، دسته…"
+              value={searchQuery}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setSearchQuery(e.target.value)
+              }
+              name="orders-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی سفارش‌ها"
+              className="h-8 w-full ps-9 text-sm sm:h-9 sm:w-[160px] sm:ps-10 lg:w-[200px]"
+            />
+          </div>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn(
+                  "h-8 gap-1.5 sm:h-9 sm:gap-2",
+                  hasActiveFilters && "border-primary",
+                )}
+                aria-label="فیلتر سفارش‌ها"
+              >
+                <Filter className="size-3.5 sm:size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">فیلتر</span>
+                {hasActiveFilters && (
+                  <span className="size-1.5 rounded-full bg-primary sm:size-2" />
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[180px]">
+              <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem
+                checked={statusFilter === "all"}
+                onCheckedChange={() => setStatusFilter("all")}
+              >
+                همه وضعیت‌ها
+              </DropdownMenuCheckboxItem>
+              {orderStatuses.map((status) => (
+                <DropdownMenuCheckboxItem
+                  key={status}
+                  checked={statusFilter === status}
+                  onCheckedChange={() => setStatusFilter(status)}
+                >
+                  {orderStatusLabels[status]}
+                </DropdownMenuCheckboxItem>
+              ))}
+
+              {hasActiveFilters && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={clearFilters}
+                    className="text-destructive"
+                  >
+                    <X className="me-2 size-4" aria-hidden="true" />
+                    پاک کردن فیلترها
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {hasActiveFilters && (
+        <div className="flex flex-wrap items-center gap-2 px-3 pb-3 sm:px-6">
+          <span className="text-[10px] text-muted-foreground sm:text-xs">
+            فیلترها:
+          </span>
+          {statusFilter !== "all" && (
+            <button
+              type="button"
+              className="inline-flex cursor-pointer items-center gap-1 rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20"
+              onClick={() => setStatusFilter("all")}
+              aria-label={`حذف فیلتر ${orderStatusLabels[statusFilter as OrderStatus]}`}
+            >
+              {orderStatusLabels[statusFilter as OrderStatus]}
+              <X className="size-2.5 sm:size-3" />
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className="overflow-x-auto px-3 pb-3 sm:px-6 sm:pb-4">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className="w-[40px] text-xs font-medium text-muted-foreground sm:text-sm">
+                #
+              </TableHead>
+              <TableHead className="min-w-[160px] text-xs font-medium text-muted-foreground sm:text-sm">
+                سفارش
+              </TableHead>
+              <TableHead className="hidden min-w-[128px] text-xs font-medium text-muted-foreground sm:table-cell sm:text-sm">
+                دسته
+              </TableHead>
+              <TableHead className="hidden min-w-[140px] text-xs font-medium text-muted-foreground sm:text-sm md:table-cell">
+                مشتری
+              </TableHead>
+              <TableHead className="min-w-[100px] text-xs font-medium text-muted-foreground sm:text-sm">
+                وضعیت
+              </TableHead>
+              <TableHead className="min-w-[90px] text-xs font-medium text-muted-foreground sm:text-sm">
+                مجموع سفارش
+              </TableHead>
+              <TableHead className="hidden text-xs font-medium text-muted-foreground sm:table-cell sm:text-sm">
+                تاریخ
+              </TableHead>
+              <TableHead className="w-[40px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedOrders.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={8}
+                  className="h-24 text-center text-sm text-muted-foreground"
+                >
+                  سفارشی با این فیلترها یافت نشد.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedOrders.map((order, index) => (
+                <TableRow key={order.id}>
+                  <TableCell className="text-xs font-medium sm:text-sm">
+                    {((currentPage - 1) * pageSize + index + 1).toLocaleString(
+                      "fa-IR",
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="min-w-0">
+                      <span className="block truncate text-xs font-medium sm:text-sm">
+                        {order.orderNumber}
+                      </span>
+                      <span className="text-[10px] text-muted-foreground sm:text-xs">
+                        {order.productCount.toLocaleString("fa-IR")} قلم
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden max-w-[160px] truncate text-xs text-muted-foreground sm:table-cell sm:text-sm">
+                    {categoryLabels[order.category] ?? order.category}
+                  </TableCell>
+                  <TableCell className="hidden md:table-cell">
+                    <div className="flex items-center gap-2">
+                      <Avatar className="size-6 bg-muted">
+                        <AvatarFallback className="text-[8px] font-semibold text-muted-foreground uppercase">
+                          {order.customerInitials}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-xs text-muted-foreground sm:text-sm">
+                        {order.customer}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        "inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium sm:text-xs",
+                        statusStyles[order.status],
+                      )}
+                    >
+                      {orderStatusLabels[order.status]}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-xs text-foreground tabular-nums sm:text-sm">
+                    {currencyFormatter.format(order.total)}
+                  </TableCell>
+                  <TableCell className="hidden text-xs text-muted-foreground sm:table-cell sm:text-sm">
+                    {formatOrderDate(order.date)}
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7 text-muted-foreground hover:text-foreground sm:size-8"
+                          aria-label={`عملیات ${order.orderNumber}`}
+                        >
+                          <MoreHorizontal className="size-3.5 sm:size-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>
+                          <Eye className="me-2 size-4" aria-hidden="true" />
+                          مشاهده جزئیات
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Pencil className="me-2 size-4" aria-hidden="true" />
+                          ویرایش سفارش
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Copy className="me-2 size-4" aria-hidden="true" />
+                          تکثیر
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="text-destructive"
+                          onSelect={(event: Event) => {
+                            event.preventDefault();
+                            if (typeof window === "undefined") return;
+                            window.confirm(
+                              "این سفارش لغو شود؟ این عمل قابل بازگشت نیست.",
+                            );
+                          }}
+                        >
+                          <X className="me-2 size-4" aria-hidden="true" />
+                          لغو سفارش
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-col items-center justify-between gap-3 border-t px-3 py-3 sm:flex-row sm:px-6">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground sm:text-sm">
+          <span className="hidden sm:inline">ردیف در هر صفحه:</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={(value: string) => setPageSize(Number(value))}
+          >
+            <SelectTrigger className="h-8 w-[70px]" aria-label="ردیف در هر صفحه">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PAGE_SIZE_OPTIONS.map((size) => (
+                <SelectItem key={size} value={size.toString()}>
+                  {size.toLocaleString("fa-IR")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-muted-foreground">
+            {filteredOrders.length === 0
+              ? "۰"
+              : `${((currentPage - 1) * pageSize + 1).toLocaleString("fa-IR")}-${Math.min(
+                  currentPage * pageSize,
+                  filteredOrders.length,
+                ).toLocaleString("fa-IR")}`}{" "}
+            از {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه اول"
+          >
+            <ChevronsLeft className="size-4 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه قبل"
+          >
+            <ChevronLeft className="size-4 rtl:rotate-180" />
+          </Button>
+
+          <div className="flex items-center gap-1 px-2">
+            {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+              let pageNum: number;
+              if (totalPages <= 5) {
+                pageNum = i + 1;
+              } else if (currentPage <= 3) {
+                pageNum = i + 1;
+              } else if (currentPage >= totalPages - 2) {
+                pageNum = totalPages - 4 + i;
+              } else {
+                pageNum = currentPage - 2 + i;
+              }
+
+              return (
+                <Button
+                  key={pageNum}
+                  variant={currentPage === pageNum ? "default" : "ghost"}
+                  size="icon"
+                  className="size-8"
+                  onClick={() => goToPage(pageNum)}
+                >
+                  {pageNum.toLocaleString("fa-IR")}
+                </Button>
+              );
+            })}
+          </div>
+
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه بعد"
+          >
+            <ChevronRight className="size-4 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(totalPages)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه آخر"
+          >
+            <ChevronsRight className="size-4 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6"
+    >
+      <StatsCards />
+      <div className="flex flex-col gap-4 sm:gap-6 xl:flex-row">
+        <RevenueFlowChart />
+        <SegmentationPanel />
+      </div>
+      <RecentOrdersTable />
+    </div>
+  );
+};
+
+const Dashboard4 = ({ className }: { className?: string }) => {
+  return (
+    <ShadTooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </ShadTooltipProvider>
+  );
+};
+
+export { Dashboard4 };
diff --git a/blocks/dashboard5.tsx b/blocks/dashboard5.tsx
new file mode 100644
index 0000000..106b5ae
--- /dev/null
+++ b/blocks/dashboard5.tsx
@@ -0,0 +1,1907 @@
+"use client";
+
+import {
+  ArrowUpRight,
+  BarChart3,
+  Bell,
+  Box,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  CircleDollarSign,
+  ClipboardList,
+  CreditCard,
+  Download,
+  Filter,
+  Globe,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  MessageSquare,
+  MoreHorizontal,
+  Package,
+  PieChartIcon,
+  Plus,
+  RotateCcw,
+  Search,
+  Settings,
+  ShoppingCart,
+  Truck,
+  User,
+  Users,
+  Wallet,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  Sector,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { PieSectorDataItem } from "recharts/types/polar/Pie";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip as ShadTooltip,
+  TooltipContent as ShadTooltipContent,
+  TooltipProvider as ShadTooltipProvider,
+  TooltipTrigger as ShadTooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type StatItem = {
+  title: string;
+  previousValue: number;
+  value: number;
+  changePercent: number;
+  isPositive: boolean;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  format: "currency" | "number";
+};
+
+type SalesCategoryItem = {
+  name: string;
+  value: number;
+  percent: number;
+  color: string;
+};
+
+type RevenueFlowColors = {
+  thisYear: string;
+  prevYear: string;
+};
+
+type OrderStatus = "Processing" | "Shipped" | "Delivered" | "Cancelled";
+
+type Order = {
+  id: string;
+  orderNumber: string;
+  customer: string;
+  customerInitials: string;
+  products: string[];
+  productCount: number;
+  status: OrderStatus;
+  total: number;
+  date: string;
+};
+
+type ActivityItem = {
+  title: string;
+  detail: string;
+  time: string;
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 0,
+});
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const orderStatusLabels: Record<OrderStatus, string> = {
+  Processing: "در حال پردازش",
+  Shipped: "ارسال‌شده",
+  Delivered: "تحویل‌شده",
+  Cancelled: "لغوشده",
+};
+
+/**
+ * Custom hook for hover highlight interaction.
+ * Provides stable callback to prevent unnecessary re-renders in chart components.
+ */
+function useHoverHighlight<T extends string | number>() {
+  const [active, setActive] = React.useState<T | null>(null);
+
+  const handleHover = React.useCallback((value: T | null) => {
+    setActive(value);
+  }, []);
+
+  return { active, handleHover };
+}
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+const salesCategoryChartConfig = {
+  electronics: { label: "الکترونیک", color: palette.primary },
+  accessories: { label: "لوازم جانبی", theme: palette.secondary },
+  software: { label: "نرم‌افزار", theme: palette.tertiary },
+  other: { label: "سایر", theme: palette.quaternary },
+} satisfies ChartConfig;
+
+const revenueFlowChartConfig = {
+  thisYear: { label: "امسال", color: palette.primary },
+  prevYear: { label: "سال قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+    description: "فروشگاه آنلاین",
+  },
+  navGroups: [
+    {
+      title: "اصلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+      ],
+    },
+    {
+      title: "کاتالوگ",
+      defaultOpen: true,
+      items: [
+        {
+          label: "محصولات",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: Package, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
+            { label: "موجودی", icon: Package, href: "#" },
+          ],
+        },
+        { label: "ارسال", icon: Truck, href: "#" },
+      ],
+    },
+    {
+      title: "مشتریان",
+      defaultOpen: false,
+      items: [
+        { label: "همه مشتریان", icon: Users, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "نمای کلی", icon: Globe, href: "#" },
+        { label: "گزارش‌ها", icon: BarChart3, href: "#" },
+        { label: "مالی", icon: Wallet, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "john@acme.store",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+};
+
+const statsData: StatItem[] = [
+  {
+    title: "درآمد ماهانه",
+    previousValue: 148230,
+    value: 189540.75,
+    changePercent: 27.86,
+    isPositive: true,
+    icon: CircleDollarSign,
+    format: "currency",
+  },
+  {
+    title: "سفارش‌های تکمیل‌شده",
+    previousValue: 18452,
+    value: 21847,
+    changePercent: 18.4,
+    isPositive: true,
+    icon: ClipboardList,
+    format: "number",
+  },
+  {
+    title: "مشتریان جدید",
+    previousValue: 4120,
+    value: 4975,
+    changePercent: 20.8,
+    isPositive: true,
+    icon: Users,
+    format: "number",
+  },
+  {
+    title: "بازپرداخت‌ها",
+    previousValue: 9821,
+    value: 8473,
+    changePercent: 13.73,
+    isPositive: false,
+    icon: CreditCard,
+    format: "currency",
+  },
+];
+
+const fullYearData = [
+  { month: monthLabel(0), thisYear: 42000, prevYear: 38000 },
+  { month: monthLabel(1), thisYear: 38000, prevYear: 45000 },
+  { month: monthLabel(2), thisYear: 52000, prevYear: 41000 },
+  { month: monthLabel(3), thisYear: 45000, prevYear: 48000 },
+  { month: monthLabel(4), thisYear: 58000, prevYear: 44000 },
+  { month: monthLabel(5), thisYear: 41000, prevYear: 52000 },
+  { month: monthLabel(6), thisYear: 55000, prevYear: 47000 },
+  { month: monthLabel(7), thisYear: 48000, prevYear: 53000 },
+  { month: monthLabel(8), thisYear: 62000, prevYear: 49000 },
+  { month: monthLabel(9), thisYear: 54000, prevYear: 58000 },
+  { month: monthLabel(10), thisYear: 67000, prevYear: 52000 },
+  { month: monthLabel(11), thisYear: 71000, prevYear: 61000 },
+];
+
+type TimePeriod = "6months" | "year";
+
+const periodLabels: Record<TimePeriod, string> = {
+  "6months": "۶ ماه اخیر",
+  year: "۱۲ ماه",
+};
+
+function getDataForPeriod(period: TimePeriod) {
+  if (period === "6months") return fullYearData.slice(0, 6);
+  return fullYearData;
+}
+
+const orderStatIRRata = {
+  total: 1247,
+  processing: { count: 156, percent: 12.5 },
+  shipped: { count: 423, percent: 33.9 },
+  delivered: { count: 668, percent: 53.6 },
+};
+
+const salesCategoryData: SalesCategoryItem[] = [
+  {
+    name: "الکترونیک",
+    value: 145200,
+    percent: 58,
+    color: palette.primary,
+  },
+  {
+    name: "لوازم جانبی",
+    value: 62400,
+    percent: 25,
+    color: `color-mix(in oklch, var(--primary) 80%, ${mixBase})`,
+  },
+  {
+    name: "نرم‌افزار",
+    value: 32500,
+    percent: 13,
+    color: `color-mix(in oklch, var(--primary) 60%, ${mixBase})`,
+  },
+  {
+    name: "سایر",
+    value: 10000,
+    percent: 4,
+    color: `color-mix(in oklch, var(--primary) 42%, ${mixBase})`,
+  },
+];
+
+const orderStatuses: OrderStatus[] = [
+  "Processing",
+  "Shipped",
+  "Delivered",
+  "Cancelled",
+];
+
+const orders: Order[] = [
+  {
+    id: "1",
+    orderNumber: "ORD-2024-001",
+    customer: "Sarah Johnson",
+    customerInitials: "SJ",
+    products: ["MacBook Pro 14", "Magic Mouse"],
+    productCount: 2,
+    status: "Delivered",
+    total: 2499.0,
+    date: "Jan 28, 2024",
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-2024-002",
+    customer: "Michael Chen",
+    customerInitials: "MC",
+    products: ["iPhone 15 Pro", "AirPods Pro"],
+    productCount: 2,
+    status: "Shipped",
+    total: 1348.0,
+    date: "Jan 27, 2024",
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-2024-003",
+    customer: "Emma Wilson",
+    customerInitials: "EW",
+    products: ["iPad Air", "Apple Pencil", "Smart Keyboard"],
+    productCount: 3,
+    status: "Processing",
+    total: 1198.0,
+    date: "Jan 27, 2024",
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-2024-004",
+    customer: "James Rodriguez",
+    customerInitials: "JR",
+    products: ["Apple Watch Ultra"],
+    productCount: 1,
+    status: "Delivered",
+    total: 799.0,
+    date: "Jan 26, 2024",
+  },
+  {
+    id: "5",
+    orderNumber: "ORD-2024-005",
+    customer: "Lisa Park",
+    customerInitials: "LP",
+    products: ["Mac Mini M2"],
+    productCount: 1,
+    status: "Cancelled",
+    total: 599.0,
+    date: "Jan 26, 2024",
+  },
+  {
+    id: "6",
+    orderNumber: "ORD-2024-006",
+    customer: "David Kim",
+    customerInitials: "DK",
+    products: ["Studio Display", "Mac Studio"],
+    productCount: 2,
+    status: "Shipped",
+    total: 5498.0,
+    date: "Jan 25, 2024",
+  },
+  {
+    id: "7",
+    orderNumber: "ORD-2024-007",
+    customer: "Anna Martinez",
+    customerInitials: "AM",
+    products: ["MacBook Air M2"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1199.0,
+    date: "Jan 25, 2024",
+  },
+  {
+    id: "8",
+    orderNumber: "ORD-2024-008",
+    customer: "Robert Taylor",
+    customerInitials: "RT",
+    products: ["iPhone 15", "MagSafe Charger"],
+    productCount: 2,
+    status: "Processing",
+    total: 878.0,
+    date: "Jan 24, 2024",
+  },
+  {
+    id: "9",
+    orderNumber: "ORD-2024-009",
+    customer: "Jennifer Lee",
+    customerInitials: "JL",
+    products: ["AirPods Max"],
+    productCount: 1,
+    status: "Shipped",
+    total: 549.0,
+    date: "Jan 24, 2024",
+  },
+  {
+    id: "10",
+    orderNumber: "ORD-2024-010",
+    customer: "William Brown",
+    customerInitials: "WB",
+    products: ["iPad Pro 12.9", "Magic Keyboard"],
+    productCount: 2,
+    status: "Delivered",
+    total: 1648.0,
+    date: "Jan 23, 2024",
+  },
+  {
+    id: "11",
+    orderNumber: "ORD-2024-011",
+    customer: "Sophia Davis",
+    customerInitials: "SD",
+    products: ["MacBook Pro 16"],
+    productCount: 1,
+    status: "Processing",
+    total: 2499.0,
+    date: "Jan 23, 2024",
+  },
+  {
+    id: "12",
+    orderNumber: "ORD-2024-012",
+    customer: "Daniel Garcia",
+    customerInitials: "DG",
+    products: ["Apple TV 4K", "HomePod mini"],
+    productCount: 2,
+    status: "Cancelled",
+    total: 278.0,
+    date: "Jan 22, 2024",
+  },
+  {
+    id: "13",
+    orderNumber: "ORD-2024-013",
+    customer: "Olivia White",
+    customerInitials: "OW",
+    products: ["iPhone 15 Pro Max"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1199.0,
+    date: "Jan 22, 2024",
+  },
+  {
+    id: "14",
+    orderNumber: "ORD-2024-014",
+    customer: "Thomas Anderson",
+    customerInitials: "TA",
+    products: ["Mac Pro", "Pro Display XDR"],
+    productCount: 2,
+    status: "Shipped",
+    total: 12498.0,
+    date: "Jan 21, 2024",
+  },
+  {
+    id: "15",
+    orderNumber: "ORD-2024-015",
+    customer: "Emily Thompson",
+    customerInitials: "ET",
+    products: ["iPad mini", "Apple Pencil"],
+    productCount: 2,
+    status: "Delivered",
+    total: 648.0,
+    date: "Jan 21, 2024",
+  },
+  {
+    id: "16",
+    orderNumber: "ORD-2024-016",
+    customer: "Christopher Moore",
+    customerInitials: "CM",
+    products: ["AirPods Pro 2"],
+    productCount: 1,
+    status: "Processing",
+    total: 249.0,
+    date: "Jan 20, 2024",
+  },
+  {
+    id: "17",
+    orderNumber: "ORD-2024-017",
+    customer: "Isabella Jackson",
+    customerInitials: "IJ",
+    products: ["Apple Watch Series 9"],
+    productCount: 1,
+    status: "Shipped",
+    total: 399.0,
+    date: "Jan 20, 2024",
+  },
+  {
+    id: "18",
+    orderNumber: "ORD-2024-018",
+    customer: "Matthew Harris",
+    customerInitials: "MH",
+    products: ["MacBook Air 15"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1299.0,
+    date: "Jan 19, 2024",
+  },
+  {
+    id: "19",
+    orderNumber: "ORD-2024-019",
+    customer: "Ava Clark",
+    customerInitials: "AC",
+    products: ["iPhone SE", "EarPods"],
+    productCount: 2,
+    status: "Cancelled",
+    total: 448.0,
+    date: "Jan 19, 2024",
+  },
+  {
+    id: "20",
+    orderNumber: "ORD-2024-020",
+    customer: "Joshua Lewis",
+    customerInitials: "JL",
+    products: ["Mac Mini M2 Pro"],
+    productCount: 1,
+    status: "Processing",
+    total: 1299.0,
+    date: "Jan 18, 2024",
+  },
+];
+
+const recentActivity: ActivityItem[] = [
+  {
+    title: "ثبت‌نام کاربر جدید",
+    detail: "الکس مورگان",
+    time: "۲ دقیقه پیش",
+  },
+  {
+    title: "ثبت سفارش جدید",
+    detail: "الکس مورگان",
+    time: "۲ دقیقه پیش",
+  },
+  {
+    title: "دریافت پرداخت",
+    detail: "الکس مورگان",
+    time: "۲ دقیقه پیش",
+  },
+  {
+    title: "ارسال فاکتور",
+    detail: "جیمی لی",
+    time: "۶ دقیقه پیش",
+  },
+  {
+    title: "ارتقای اشتراک",
+    detail: "نوح رابرتس",
+    time: "۱۲ دقیقه پیش",
+  },
+  {
+    title: "صدور بازپرداخت",
+    detail: "الیویا وایت",
+    time: "۱۸ دقیقه پیش",
+  },
+  {
+    title: "بازنشانی رمز",
+    detail: "ایتن پارکر",
+    time: "۲۴ دقیقه پیش",
+  },
+  {
+    title: "نظر جدید",
+    detail: "سوفیا دیویس",
+    time: "۳۲ دقیقه پیش",
+  },
+  {
+    title: "بستن تیکت پشتیبانی",
+    detail: "مایکل چن",
+    time: "۴۵ دقیقه پیش",
+  },
+  {
+    title: "پردازش تسویه",
+    detail: "اما ویلسون",
+    time: "۱ ساعت پیش",
+  },
+];
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              width={24}
+              height={24}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <LayoutDashboard className="size-5" aria-hidden="true" />
+      <h1 className="text-base font-medium">داشبورد</h1>
+
+      <div className="ms-auto flex items-center gap-2">
+        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
+          <Search
+            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            name="header-search"
+            inputMode="search"
+            autoComplete="off"
+            aria-label="جستجوی داشبورد"
+            placeholder="جستجوی سفارش‌ها، مشتریان…"
+            className="h-9 w-full pe-14 ps-9 text-sm"
+          />
+          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 rounded-md border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
+            {"\u2318"}
+            {"\u00a0"}K
+          </kbd>
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="اعلان‌ها"
+        >
+          <Bell className="size-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="راهنما"
+        >
+          <HelpCircle className="size-4" />
+        </Button>
+      </div>
+    </header>
+  );
+};
+
+const WelcomeSection = () => {
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between sm:gap-6">
+      <div className="space-y-2 sm:space-y-5">
+        <h2 className="text-lg leading-relaxed font-semibold sm:text-[22px]">
+          خوش برگشتید، علی!
+        </h2>
+        <p className="text-sm text-muted-foreground sm:text-base">
+          امروز{" "}
+          <span className="font-medium text-foreground">۱۲ سفارش</span> برای
+          ارسال و{" "}
+          <span className="font-medium text-foreground">۳ مرجوعی</span> در
+          انتظار دارید
+        </p>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-2 sm:h-9"
+          aria-label="خروجی"
+        >
+          <Download className="size-4" aria-hidden="true" />
+          <span className="hidden sm:inline">خروجی</span>
+        </Button>
+        <Button size="sm" className="h-8 gap-2 sm:h-9" aria-label="افزودن محصول">
+          <Plus className="size-4" aria-hidden="true" />
+          <span className="hidden sm:inline">افزودن محصول</span>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const StatsCards = () => {
+  return (
+    <div className="rounded-xl border bg-card">
+      <div className="grid grid-cols-1 divide-x-0 divide-y divide-border sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-4 lg:divide-x">
+        {statsData.map((stat) => {
+          const formatter =
+            stat.format === "currency" ? currencyFormatter : numberFormatter;
+
+          return (
+            <div key={stat.title} className="space-y-4 p-4 sm:p-6">
+              <div className="flex items-center gap-1.5 text-muted-foreground">
+                <stat.icon
+                  className="size-4 sm:size-[18px]"
+                  aria-hidden="true"
+                />
+                <span className="text-xs font-medium sm:text-sm">
+                  {stat.title}
+                </span>
+              </div>
+              <p className="text-xl font-semibold tracking-tight sm:text-[28px]">
+                {formatter.format(stat.value)}
+              </p>
+              <div className="flex flex-wrap items-center gap-2 text-[10px] sm:text-xs xl:flex-nowrap">
+                <span
+                  className={cn(
+                    "font-medium",
+                    stat.isPositive
+                      ? "text-emerald-600 dark:text-emerald-400"
+                      : "text-red-600 dark:text-red-400",
+                  )}
+                >
+                  {stat.isPositive ? "+" : "-"}
+                  {stat.changePercent.toLocaleString("fa-IR", {
+                    minimumFractionDigits: 1,
+                    maximumFractionDigits: 1,
+                  })}
+                  ٪
+                  <span className="hidden sm:inline">
+                    (
+                    {formatter.format(
+                      Math.abs(stat.value - stat.previousValue),
+                    )}
+                    )
+                  </span>
+                </span>
+                <span className="hidden items-center gap-2 text-muted-foreground sm:inline-flex">
+                  <span className="size-1 rounded-full bg-muted-foreground" />
+                  <span className="xl:whitespace-nowrap">نسبت به ماه قبل</span>
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const OrderStatusChart = () => {
+  const { active: activeSegment, handleHover } = useHoverHighlight<number>();
+
+  const orderStatusItems = [
+    {
+      key: "processing",
+      label: orderStatusLabels.Processing,
+      ...orderStatIRRata.processing,
+      color: palette.primary,
+    },
+    {
+      key: "shipped",
+      label: orderStatusLabels.Shipped,
+      ...orderStatIRRata.shipped,
+      color: palette.secondary.light,
+    },
+    {
+      key: "delivered",
+      label: orderStatusLabels.Delivered,
+      ...orderStatIRRata.delivered,
+      color: palette.tertiary.light,
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border bg-card p-4 sm:p-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 sm:gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 sm:size-8"
+            aria-label="وضعیت سفارش‌ها"
+          >
+            <ShoppingCart className="size-4 text-muted-foreground sm:size-[18px]" />
+          </Button>
+          <div>
+            <span className="text-sm font-medium sm:text-base">
+              وضعیت سفارش‌ها
+            </span>
+            <p className="text-[10px] text-muted-foreground sm:text-xs">
+              {numberFormatter.format(orderStatIRRata.total)} سفارش این ماه
+            </p>
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 sm:size-8"
+          aria-label="گزینه‌های بیشتر"
+        >
+          <MoreHorizontal className="size-4 text-muted-foreground" />
+        </Button>
+      </div>
+
+      <div className="space-y-3">
+        <div className="flex h-3 w-full overflow-hidden rounded-full sm:h-4">
+          {orderStatusItems.map((item, index) => (
+            <ShadTooltipProvider key={item.key}>
+              <ShadTooltip>
+                <ShadTooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className={cn(
+                      "h-full border-0 p-0 transition-opacity duration-200 motion-reduce:transition-none",
+                      activeSegment !== null &&
+                      activeSegment !== index &&
+                      "opacity-40",
+                    )}
+                    style={{
+                      width: `${item.percent}%`,
+                      backgroundColor: item.color,
+                    }}
+                    onPointerEnter={() => handleHover(index)}
+                    onPointerLeave={() => handleHover(null)}
+                    onFocus={() => handleHover(index)}
+                    onBlur={() => handleHover(null)}
+                    aria-label={`${item.label}: ${numberFormatter.format(item.count)} سفارش (${item.percent.toLocaleString("fa-IR")}٪)`}
+                  />
+                </ShadTooltipTrigger>
+                <ShadTooltipContent
+                  side="top"
+                  sideOffset={8}
+                  className="px-3 py-2"
+                >
+                  <div className="grid gap-1">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="size-2 rounded-full"
+                        style={{ backgroundColor: item.color }}
+                      />
+                      <span className="font-medium">{item.label}</span>
+                      <span className="text-muted-foreground tabular-nums">
+                        {item.percent.toLocaleString("fa-IR")}٪
+                      </span>
+                    </div>
+                    <span className="text-muted-foreground tabular-nums">
+                      {numberFormatter.format(item.count)} سفارش
+                    </span>
+                  </div>
+                </ShadTooltipContent>
+              </ShadTooltip>
+            </ShadTooltipProvider>
+          ))}
+        </div>
+
+        <div className="flex items-center justify-between text-[10px] sm:text-xs">
+          {orderStatusItems.map((item, index) => (
+            <span
+              key={item.key}
+              className={cn(
+                "text-muted-foreground tabular-nums transition-opacity duration-200 motion-reduce:transition-none",
+                activeSegment !== null &&
+                activeSegment !== index &&
+                "opacity-40",
+              )}
+            >
+              {item.percent.toLocaleString("fa-IR")}٪
+            </span>
+          ))}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3 sm:gap-4">
+          {orderStatusItems.map((item, index) => (
+            <ShadTooltipProvider key={item.key}>
+              <ShadTooltip>
+                <ShadTooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className={cn(
+                      "flex items-center gap-1.5 border-0 bg-transparent p-0 transition-opacity duration-200 motion-reduce:transition-none",
+                      activeSegment !== null &&
+                      activeSegment !== index &&
+                      "opacity-40",
+                    )}
+                    onPointerEnter={() => handleHover(index)}
+                    onPointerLeave={() => handleHover(null)}
+                    onFocus={() => handleHover(index)}
+                    onBlur={() => handleHover(null)}
+                  >
+                    <span
+                      className="size-2.5 rounded-full sm:size-3"
+                      style={{ backgroundColor: item.color }}
+                    />
+                    <span className="text-[10px] text-muted-foreground sm:text-xs">
+                      {item.label}
+                    </span>
+                  </button>
+                </ShadTooltipTrigger>
+                <ShadTooltipContent
+                  side="top"
+                  sideOffset={8}
+                  className="px-3 py-2"
+                >
+                  <div className="grid gap-1">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="size-2 rounded-full"
+                        style={{ backgroundColor: item.color }}
+                      />
+                      <span className="font-medium">{item.label}</span>
+                      <span className="text-muted-foreground tabular-nums">
+                        {item.percent.toLocaleString("fa-IR")}٪
+                      </span>
+                    </div>
+                    <span className="text-muted-foreground tabular-nums">
+                      {numberFormatter.format(item.count)} سفارش
+                    </span>
+                  </div>
+                </ShadTooltipContent>
+              </ShadTooltip>
+            </ShadTooltipProvider>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const renderActiveShape = (props: PieSectorDataItem) => {
+  const {
+    cx = 0,
+    cy = 0,
+    innerRadius = 0,
+    outerRadius = 0,
+    startAngle = 0,
+    endAngle = 0,
+    fill = "currentColor",
+  } = props;
+  return (
+    <g>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius + 6}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+    </g>
+  );
+};
+
+const SalesByCategoryChart = () => {
+  const { active: activeSlice, handleHover: setHoveredSlice } =
+    useHoverHighlight<number>();
+  const totalSales = salesCategoryData.reduce(
+    (acc, item) => acc + item.value,
+    0,
+  );
+
+  return (
+    <div className="flex flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:p-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 sm:gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 sm:size-8"
+            aria-label="فروش بر اساس دسته"
+          >
+            <PieChartIcon className="size-4 text-muted-foreground sm:size-[18px]" />
+          </Button>
+          <div>
+            <span className="text-sm font-medium sm:text-base">
+              فروش بر اساس دسته
+            </span>
+            <p className="flex items-center gap-1 text-[10px] text-muted-foreground sm:text-xs">
+              <ArrowUpRight
+                className="size-3 text-emerald-600"
+                aria-hidden="true"
+              />
+              <span className="text-emerald-600">+۸.۴٪</span>
+              <span>نسبت به ماه قبل</span>
+            </p>
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 sm:size-8"
+          aria-label="گزینه‌های بیشتر"
+        >
+          <MoreHorizontal className="size-4 text-muted-foreground" />
+        </Button>
+      </div>
+
+      <div className="flex flex-1 items-center gap-4 sm:gap-6">
+        <div className="relative size-[100px] shrink-0 sm:size-[120px]">
+          <ChartContainer
+            config={salesCategoryChartConfig}
+            className="h-full w-full"
+          >
+            <PieChart>
+              <Pie
+                data={salesCategoryData}
+                cx="50%"
+                cy="50%"
+                innerRadius="55%"
+                outerRadius="90%"
+                paddingAngle={2}
+                dataKey="value"
+                strokeWidth={0}
+                {...({ activeIndex: activeSlice ?? undefined } as any)}
+                activeShape={renderActiveShape}
+                onMouseEnter={(_: unknown, index: number) =>
+                  setHoveredSlice(index)
+                }
+                onMouseLeave={() => setHoveredSlice(null)}
+              >
+                {salesCategoryData.map((entry) => (
+                  <Cell key={entry.name} fill={entry.color} />
+                ))}
+              </Pie>
+            </PieChart>
+          </ChartContainer>
+          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+            <span className="text-sm font-semibold sm:text-base">
+              {compactCurrencyFormatter.format(totalSales)}
+            </span>
+            <span className="text-[8px] text-muted-foreground sm:text-[10px]">
+              مجموع
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-1 flex-col gap-2 sm:gap-3">
+          {salesCategoryData.map((item, index) => (
+            <div
+              key={item.name}
+              className={cn(
+                "flex items-center justify-between gap-2 transition-opacity duration-200 motion-reduce:transition-none",
+                activeSlice !== null && activeSlice !== index && "opacity-50",
+              )}
+              onMouseEnter={() => setHoveredSlice(index)}
+              onMouseLeave={() => setHoveredSlice(null)}
+            >
+              <div className="flex items-center gap-2">
+                <div
+                  className="size-2 rounded-full sm:size-2.5"
+                  style={{ backgroundColor: item.color }}
+                />
+                <span className="text-[10px] text-muted-foreground sm:text-xs">
+                  {item.name}
+                </span>
+              </div>
+              <div className="flex items-center gap-2 text-[10px] sm:text-xs">
+                <span className="font-medium tabular-nums">
+                  {compactCurrencyFormatter.format(item.value)}
+                </span>
+                <span className="text-muted-foreground tabular-nums">
+                  {item.percent.toLocaleString("fa-IR")}٪
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SideChartsSection = () => {
+  return (
+    <div className="flex w-full flex-col gap-4 xl:w-[410px]">
+      <OrderStatusChart />
+      <SalesByCategoryChart />
+    </div>
+  );
+};
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+  colors,
+}: any & { colors: RevenueFlowColors }) {
+  if (!active || !payload?.length) return null;
+
+  const thisYear = payload.find((p: any) => p.dataKey === "thisYear")?.value || 0;
+  const prevYear = payload.find((p: any) => p.dataKey === "prevYear")?.value || 0;
+  const diff = Number(thisYear) - Number(prevYear);
+  const percentage = prevYear ? Math.round((diff / Number(prevYear)) * 100) : 0;
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}، {currentYear.toLocaleString("fa-IR")}
+      </p>
+      <div className="space-y-1 sm:space-y-1.5">
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.thisYear }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            امسال:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(thisYear))}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.prevYear }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            سال قبل:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(prevYear))}
+          </span>
+        </div>
+        <div className="mt-1 border-t border-border pt-1">
+          <span
+            className={cn(
+              "text-[10px] font-medium sm:text-xs",
+              diff >= 0 ? "text-emerald-500" : "text-red-500",
+            )}
+          >
+            {diff >= 0 ? "+" : ""}
+            {percentage.toLocaleString("fa-IR")}٪ نسبت به سال قبل
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const RevenueFlowChart = () => {
+  const [period, setPeriod] = React.useState<TimePeriod>("6months");
+  const { active: activeSeries, handleHover } = useHoverHighlight<
+    "thisYear" | "prevYear"
+  >();
+
+  const legendItems = [
+    { key: "thisYear", label: "امسال", color: palette.primary },
+    { key: "prevYear", label: "سال قبل", color: palette.secondary.light },
+  ] as const;
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextPeriod = params.get("period");
+    if (nextPeriod === "6months" || nextPeriod === "year") {
+      setPeriod(nextPeriod);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (period !== "6months") {
+      params.set("period", period);
+    } else {
+      params.delete("period");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [period]);
+
+  const chartData = getDataForPeriod(period);
+  const totalRevenue = chartData.reduce((acc, item) => acc + item.thisYear, 0);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:gap-6 sm:p-6">
+      <div className="flex flex-wrap items-center gap-2 sm:gap-4">
+        <div className="flex flex-1 flex-col gap-1">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(totalRevenue)}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            درآمد کل ({periodLabels[period]})
+          </p>
+        </div>
+        <div className="hidden items-center gap-3 sm:flex sm:gap-5">
+          {legendItems.map((item) => (
+            <div
+              key={item.key}
+              className={cn(
+                "flex items-center gap-1.5 transition-opacity duration-200 motion-reduce:transition-none",
+                activeSeries !== null &&
+                activeSeries !== item.key &&
+                "opacity-40",
+              )}
+              onMouseEnter={() => handleHover(item.key)}
+              onMouseLeave={() => handleHover(null)}
+            >
+              <div
+                className="size-2.5 rounded-full sm:size-3"
+                style={{ backgroundColor: item.color }}
+              />
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {item.label}
+              </span>
+            </div>
+          ))}
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7 sm:size-8"
+              aria-label="انتخاب بازه زمانی"
+            >
+              <MoreHorizontal className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>بازه زمانی</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {(Object.keys(periodLabels) as TimePeriod[]).map((key) => (
+              <DropdownMenuCheckboxItem
+                key={key}
+                checked={period === key}
+                onCheckedChange={() => setPeriod(key)}
+              >
+                {periodLabels[key]}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="h-[200px] w-full min-w-0 sm:h-[240px] lg:h-[280px]">
+        <ChartContainer
+          config={revenueFlowChartConfig}
+          className="h-full w-full"
+        >
+          <AreaChart data={chartData}>
+            <defs>
+              <linearGradient id="thisYearGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-thisYear)"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-thisYear)"
+                  stopOpacity={0.05}
+                />
+              </linearGradient>
+              <linearGradient id="prevYearGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-prevYear)"
+                  stopOpacity={0.2}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-prevYear)"
+                  stopOpacity={0.02}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="0" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              tickFormatter={(value) => compactCurrencyFormatter.format(value)}
+              width={40}
+            />
+            <Tooltip
+              content={
+                <CustomTooltip
+                  colors={{
+                    thisYear: "var(--color-thisYear)",
+                    prevYear: "var(--color-prevYear)",
+                  }}
+                />
+              }
+              cursor={{ strokeOpacity: 0.2 }}
+            />
+            <Area
+              type="monotone"
+              dataKey="thisYear"
+              stroke="var(--color-thisYear)"
+              strokeWidth={activeSeries === "thisYear" ? 3 : 2}
+              fill="url(#thisYearGradient)"
+              fillOpacity={
+                activeSeries === null || activeSeries === "thisYear" ? 1 : 0.3
+              }
+              strokeOpacity={
+                activeSeries === null || activeSeries === "thisYear" ? 1 : 0.3
+              }
+            />
+            <Area
+              type="monotone"
+              dataKey="prevYear"
+              stroke="var(--color-prevYear)"
+              strokeWidth={activeSeries === "prevYear" ? 3 : 2}
+              fill="url(#prevYearGradient)"
+              fillOpacity={
+                activeSeries === null || activeSeries === "prevYear" ? 1 : 0.3
+              }
+              strokeOpacity={
+                activeSeries === null || activeSeries === "prevYear" ? 1 : 0.3
+              }
+            />
+          </AreaChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const statusStyles: Record<OrderStatus, string> = {
+  Processing:
+    "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/20",
+  Shipped:
+    "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20",
+  Delivered:
+    "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/20",
+  Cancelled:
+    "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20",
+};
+
+const RecentTransactionsTable = ({ className }: { className?: string }) => {
+  const [statusFilter, setStatusFilter] = React.useState<OrderStatus | "all">(
+    "all",
+  );
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [isHydrated, setIsHydrated] = React.useState(false);
+  const pageSize = 6;
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextStatus = params.get("status");
+    if (
+      nextStatus &&
+      (nextStatus === "all" ||
+        orderStatuses.includes(nextStatus as OrderStatus))
+    ) {
+      setStatusFilter(nextStatus as OrderStatus | "all");
+    }
+    const nextPage = Number(params.get("page"));
+    if (!Number.isNaN(nextPage) && nextPage > 0) {
+      setCurrentPage(nextPage);
+    }
+    setIsHydrated(true);
+  }, []);
+
+  const filteredOrders = React.useMemo(() => {
+    if (statusFilter === "all") return orders;
+    return orders.filter((order) => order.status === statusFilter);
+  }, [statusFilter]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredOrders.length / pageSize));
+
+  const paginatedOrders = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredOrders.slice(startIndex, startIndex + pageSize);
+  }, [filteredOrders, currentPage, pageSize]);
+
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [statusFilter]);
+
+  React.useEffect(() => {
+    if (!isHydrated || typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (statusFilter !== "all") {
+      params.set("status", statusFilter);
+    } else {
+      params.delete("status");
+    }
+    if (currentPage > 1) {
+      params.set("page", String(currentPage));
+    } else {
+      params.delete("page");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [statusFilter, currentPage, isHydrated]);
+
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  const startRow = filteredOrders.length ? (currentPage - 1) * pageSize + 1 : 0;
+  const endRow = Math.min(currentPage * pageSize, filteredOrders.length);
+
+  return (
+    <div className={cn("rounded-xl border bg-card", className)}>
+      <div className="flex items-center justify-between gap-3 px-4 pt-4 sm:px-6">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 shrink-0 sm:size-8"
+            aria-label="تراکنش‌های اخیر"
+          >
+            <ClipboardList className="size-4 text-muted-foreground sm:size-[18px]" />
+          </Button>
+          <span className="text-sm font-medium sm:text-base">
+            تراکنش‌های اخیر
+          </span>
+          <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
+            {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1.5 sm:h-9 sm:gap-2"
+            >
+              <Filter className="size-3.5 sm:size-4" aria-hidden="true" />
+              <span className="hidden sm:inline">فیلتر</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-[180px]">
+            <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem
+              checked={statusFilter === "all"}
+              onCheckedChange={() => setStatusFilter("all")}
+            >
+              همه وضعیت‌ها
+            </DropdownMenuCheckboxItem>
+            {orderStatuses.map((status) => (
+              <DropdownMenuCheckboxItem
+                key={status}
+                checked={statusFilter === status}
+                onCheckedChange={() => setStatusFilter(status)}
+              >
+                {orderStatusLabels[status]}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="px-4 pt-3 pb-4 sm:px-6">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className="text-xs font-medium text-muted-foreground sm:text-sm">
+                شماره سفارش
+              </TableHead>
+              <TableHead className="text-xs font-medium text-muted-foreground sm:text-sm">
+                خریدار
+              </TableHead>
+              <TableHead className="text-xs font-medium text-muted-foreground sm:text-sm">
+                مجموع
+              </TableHead>
+              <TableHead className="text-xs font-medium text-muted-foreground sm:text-sm">
+                وضعیت
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedOrders.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="h-20 text-center text-sm text-muted-foreground"
+                >
+                  تراکنشی یافت نشد.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedOrders.map((order) => (
+                <TableRow key={order.id}>
+                  <TableCell className="text-xs font-medium text-muted-foreground sm:text-sm">
+                    {order.orderNumber}
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground sm:text-sm">
+                    {order.customer}
+                  </TableCell>
+                  <TableCell className="text-xs text-foreground tabular-nums sm:text-sm">
+                    {currencyFormatter.format(order.total)}
+                  </TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        "inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium sm:text-xs",
+                        statusStyles[order.status],
+                      )}
+                    >
+                      {orderStatusLabels[order.status]}
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between border-t px-4 py-3 text-[10px] text-muted-foreground sm:px-6 sm:text-xs">
+        <span>
+          {filteredOrders.length === 0
+            ? "۰"
+            : `${startRow.toLocaleString("fa-IR")}-${endRow.toLocaleString("fa-IR")}`}{" "}
+          از {filteredOrders.length.toLocaleString("fa-IR")}
+        </span>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه قبل"
+          >
+            <ChevronLeft className="size-3.5 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه بعد"
+          >
+            <ChevronRight className="size-3.5 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const RecentActivity = ({ className }: { className?: string }) => {
+  return (
+    <div className={cn("rounded-xl border bg-card", className)}>
+      <div className="flex items-center justify-between gap-3 px-4 pt-4 sm:px-6">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 shrink-0 sm:size-8"
+            aria-label="فعالیت‌های اخیر"
+          >
+            <Bell className="size-4 text-muted-foreground sm:size-[18px]" />
+          </Button>
+          <span className="text-sm font-medium sm:text-base">
+            فعالیت‌های اخیر
+          </span>
+        </div>
+      </div>
+
+      <ScrollArea className="h-[360px] px-4 pt-2 pb-4 text-xs sm:px-6 sm:text-sm">
+        <div className="divide-y">
+          {recentActivity.map((item) => (
+            <div key={`${item.title}-${item.time}`} className="py-3">
+              <div className="flex items-center justify-between gap-3">
+                <span className="font-medium text-foreground">
+                  {item.title}
+                </span>
+                <span className="text-[10px] text-muted-foreground sm:text-xs">
+                  {item.time}
+                </span>
+              </div>
+              <span className="text-[10px] text-muted-foreground sm:text-xs">
+                {item.detail}
+              </span>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6"
+    >
+      <WelcomeSection />
+      <StatsCards />
+      <div className="flex flex-col gap-4 sm:gap-6 xl:flex-row">
+        <RevenueFlowChart />
+        <SideChartsSection />
+      </div>
+      <div className="flex flex-col gap-4 xl:flex-row">
+        <RecentTransactionsTable className="flex-1" />
+        <RecentActivity className="xl:w-[360px]" />
+      </div>
+    </div>
+  );
+};
+
+const Dashboard5 = ({ className }: { className?: string }) => {
+  return (
+    <ShadTooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </ShadTooltipProvider>
+  );
+};
+
+export { Dashboard5 };
diff --git a/blocks/dashboard6.tsx b/blocks/dashboard6.tsx
new file mode 100644
index 0000000..ed56008
--- /dev/null
+++ b/blocks/dashboard6.tsx
@@ -0,0 +1,1357 @@
+"use client";
+
+import {
+  BarChart3,
+  Bell,
+  Box,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Globe,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  MessageSquare,
+  MoreHorizontal,
+  Package,
+  RotateCcw,
+  Search,
+  Settings,
+  Truck,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type TimePeriod = "6months" | "year";
+
+type StatGridItem = {
+  label: string;
+  value: number;
+  format: "currency" | "number" | "percent" | "days" | "compact";
+  change: number;
+  invertColor: boolean;
+};
+
+type FulfillmentItem = {
+  order: string;
+  shipped: Date;
+  progress: number;
+  segments: number[];
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+});
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  maximumFractionDigits: 1,
+});
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+});
+const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  weekday: "short",
+});
+const monthDayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+});
+const shippedDateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+
+const monthLabel = (monthIndex: number) =>
+  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
+    new Date(2025, monthIndex, 1),
+  );
+
+const formatStatValue = (stat: StatGridItem) => {
+  switch (stat.format) {
+    case "currency":
+      return currencyFormatter.format(stat.value);
+    case "percent":
+      return percentFormatter.format(stat.value);
+    case "days":
+      return `${oneDecimalFormatter.format(stat.value)} روز`;
+    case "compact":
+      return compactNumberFormatter.format(stat.value);
+    default:
+      return numberFormatter.format(stat.value);
+  }
+};
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+const revenueChartConfig = {
+  thisYear: { label: "امسال", color: palette.primary },
+  prevYear: { label: "سال قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+    description: "فروشگاه آنلاین",
+  },
+  navGroups: [
+    {
+      title: "اصلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
+        {
+          label: "محصولات",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: Package, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
+            { label: "موجودی", icon: Package, href: "#" },
+          ],
+        },
+        { label: "مشتریان", icon: Users, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      defaultOpen: true,
+      items: [
+        { label: "تحلیل‌ها", icon: BarChart3, href: "#" },
+        { label: "گزارش‌ها", icon: Globe, href: "#" },
+      ],
+    },
+    {
+      title: "سایر",
+      defaultOpen: false,
+      items: [
+        { label: "ارسال", icon: Truck, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "john@acme.store",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+  },
+};
+
+const fullYearData = [
+  { month: monthLabel(0), thisYear: 42000, prevYear: 38000 },
+  { month: monthLabel(1), thisYear: 38000, prevYear: 45000 },
+  { month: monthLabel(2), thisYear: 52000, prevYear: 41000 },
+  { month: monthLabel(3), thisYear: 45000, prevYear: 48000 },
+  { month: monthLabel(4), thisYear: 58000, prevYear: 44000 },
+  { month: monthLabel(5), thisYear: 41000, prevYear: 52000 },
+  { month: monthLabel(6), thisYear: 55000, prevYear: 47000 },
+  { month: monthLabel(7), thisYear: 48000, prevYear: 53000 },
+  { month: monthLabel(8), thisYear: 62000, prevYear: 49000 },
+  { month: monthLabel(9), thisYear: 54000, prevYear: 58000 },
+  { month: monthLabel(10), thisYear: 67000, prevYear: 52000 },
+  { month: monthLabel(11), thisYear: 71000, prevYear: 61000 },
+];
+
+const periodLabels: Record<TimePeriod, string> = {
+  "6months": "۶ ماه اخیر",
+  year: "۱۲ ماه",
+};
+
+function getDataForPeriod(period: TimePeriod) {
+  if (period === "6months") return fullYearData.slice(0, 6);
+  return fullYearData;
+}
+
+const statsGridData: StatGridItem[] = [
+  {
+    label: "درآمد کل",
+    value: 1_800_000,
+    format: "currency",
+    change: 12.0,
+    invertColor: false,
+  },
+  {
+    label: "میانگین تکمیل",
+    value: 2.4,
+    format: "days",
+    change: -5.0,
+    invertColor: false,
+  },
+  {
+    label: "سفارش‌ها",
+    value: 9420,
+    format: "number",
+    change: 18.0,
+    invertColor: false,
+  },
+  {
+    label: "نرخ تبدیل",
+    value: 0.042,
+    format: "percent",
+    change: 1.2,
+    invertColor: false,
+  },
+  {
+    label: "نرخ مرجوعی",
+    value: 0.031,
+    format: "percent",
+    change: -11.0,
+    invertColor: true,
+  },
+  {
+    label: "بازدید صفحات",
+    value: 184_000,
+    format: "compact",
+    change: 22.0,
+    invertColor: false,
+  },
+];
+
+const categoryWeekData = [
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 6)),
+    electronics: 180,
+    clothing: 220,
+    homeGarden: 280,
+    sports: 350,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 7)),
+    electronics: 420,
+    clothing: 550,
+    homeGarden: 380,
+    sports: 280,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 8)),
+    electronics: 280,
+    clothing: 380,
+    homeGarden: 520,
+    sports: 450,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 9)),
+    electronics: 550,
+    clothing: 280,
+    homeGarden: 420,
+    sports: 620,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 10)),
+    electronics: 323,
+    clothing: 729,
+    homeGarden: 506,
+    sports: 490,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 11)),
+    electronics: 480,
+    clothing: 420,
+    homeGarden: 280,
+    sports: 380,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 12)),
+    electronics: 220,
+    clothing: 550,
+    homeGarden: 450,
+    sports: 320,
+  },
+];
+
+const categoryMonthData = [
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 1)),
+    electronics: 180,
+    clothing: 220,
+    homeGarden: 280,
+    sports: 350,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 5)),
+    electronics: 420,
+    clothing: 550,
+    homeGarden: 380,
+    sports: 280,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 9)),
+    electronics: 280,
+    clothing: 380,
+    homeGarden: 520,
+    sports: 450,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 13)),
+    electronics: 550,
+    clothing: 280,
+    homeGarden: 420,
+    sports: 620,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 15)),
+    electronics: 323,
+    clothing: 729,
+    homeGarden: 506,
+    sports: 490,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 17)),
+    electronics: 480,
+    clothing: 420,
+    homeGarden: 280,
+    sports: 380,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 21)),
+    electronics: 220,
+    clothing: 550,
+    homeGarden: 450,
+    sports: 320,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 25)),
+    electronics: 380,
+    clothing: 320,
+    homeGarden: 580,
+    sports: 480,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 30)),
+    electronics: 520,
+    clothing: 450,
+    homeGarden: 350,
+    sports: 420,
+  },
+];
+
+const categoryChartConfig = {
+  electronics: { label: "الکترونیک", color: palette.primary },
+  clothing: {
+    label: "پوشاک",
+    theme: palette.secondary,
+  },
+  homeGarden: {
+    label: "خانه و باغ",
+    theme: palette.tertiary,
+  },
+  sports: {
+    label: "ورزشی",
+    theme: palette.quaternary,
+  },
+} satisfies ChartConfig;
+
+const fulfillmentData: FulfillmentItem[] = [
+  {
+    order: "ORD-4821",
+    shipped: new Date(2025, 0, 27),
+    progress: 92,
+    segments: [
+      0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.5, 0.8, 0.9, 1.0, 0.6, 0.7, 0.8,
+      0.9, 1.0, 0.5, 0.7, 0.8, 0.9, 0.6, 1.0, 0.8, 0.7, 0.3, 0.2, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4819",
+    shipped: new Date(2025, 0, 26),
+    progress: 78,
+    segments: [
+      0.8, 0.6, 0.9, 0.7, 1.0, 0.5, 0.8, 0.9, 0.6, 0.7, 1.0, 0.8, 0.5, 0.9, 0.7,
+      0.6, 0.8, 1.0, 0.7, 0.5, 0.2, 0.1, 0.15, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+      0.1,
+    ],
+  },
+  {
+    order: "ORD-4815",
+    shipped: new Date(2025, 0, 25),
+    progress: 100,
+    segments: [
+      1.0, 0.9, 0.8, 1.0, 0.7, 0.9, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0,
+      0.6, 0.8, 0.9, 1.0, 0.7, 0.9, 0.8, 1.0, 0.6, 0.9, 0.7, 1.0, 0.8, 0.9, 1.0,
+    ],
+  },
+  {
+    order: "ORD-4812",
+    shipped: new Date(2025, 0, 24),
+    progress: 65,
+    segments: [
+      0.9, 1.0, 0.7, 0.8, 0.6, 0.9, 0.5, 0.8, 1.0, 0.7, 0.9, 0.6, 0.8, 0.5, 0.7,
+      1.0, 0.6, 0.9, 0.8, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4808",
+    shipped: new Date(2025, 0, 23),
+    progress: 43,
+    segments: [
+      0.8, 0.7, 1.0, 0.6, 0.9, 0.8, 0.5, 0.7, 1.0, 0.9, 0.6, 0.8, 0.7, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4805",
+    shipped: new Date(2025, 0, 22),
+    progress: 100,
+    segments: [
+      0.9, 0.8, 1.0, 0.7, 0.9, 0.6, 1.0, 0.8, 0.7, 0.9, 1.0, 0.8, 0.6, 0.9, 0.7,
+      1.0, 0.8, 0.9, 0.7, 1.0, 0.8, 0.9, 0.6, 1.0, 0.7, 0.8, 0.9, 1.0, 0.8, 0.9,
+    ],
+  },
+  {
+    order: "ORD-4801",
+    shipped: new Date(2025, 0, 21),
+    progress: 88,
+    segments: [
+      1.0, 0.8, 0.7, 0.9, 0.6, 1.0, 0.8, 0.5, 0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 0.7,
+      0.8, 1.0, 0.6, 0.5, 0.3, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4798",
+    shipped: new Date(2025, 0, 20),
+    progress: 55,
+    segments: [
+      0.7, 0.9, 1.0, 0.6, 0.8, 0.9, 0.7, 1.0, 0.5, 0.8, 0.6, 0.9, 0.1, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4794",
+    shipped: new Date(2025, 0, 19),
+    progress: 100,
+    segments: [
+      0.8, 1.0, 0.9, 0.7, 0.8, 1.0, 0.6, 0.9, 0.8, 1.0, 0.7, 0.9, 0.8, 1.0, 0.6,
+      0.9, 0.7, 1.0, 0.8, 0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0,
+    ],
+  },
+  {
+    order: "ORD-4790",
+    shipped: new Date(2025, 0, 18),
+    progress: 71,
+    segments: [
+      0.9, 0.6, 0.8, 1.0, 0.7, 0.9, 0.5, 0.8, 1.0, 0.6, 0.9, 0.7, 0.8, 0.5, 0.3,
+      0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4786",
+    shipped: new Date(2025, 0, 17),
+    progress: 35,
+    segments: [
+      1.0, 0.8, 0.9, 0.7, 0.6, 0.8, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4782",
+    shipped: new Date(2025, 0, 16),
+    progress: 96,
+    segments: [
+      0.8, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0, 0.6, 0.8, 0.9, 1.0, 0.7, 0.9, 0.8, 1.0,
+      0.6, 0.9, 0.7, 1.0, 0.8, 0.9, 0.6, 1.0, 0.8, 0.7, 0.9, 1.0, 0.8, 0.3, 0.1,
+    ],
+  },
+];
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              width={24}
+              height={24}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <LayoutDashboard className="size-5" aria-hidden="true" />
+      <h1 className="text-base font-medium text-pretty">داشبورد</h1>
+
+      <div className="ms-auto flex items-center gap-2">
+        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
+          <Search
+            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            name="header-search"
+            inputMode="search"
+            autoComplete="off"
+            aria-label="جستجوی داشبورد"
+            placeholder="جستجوی سفارش‌ها، مشتریان…"
+            className="h-9 w-full pe-14 ps-9 text-sm"
+          />
+          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 rounded-md border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
+            {"\u2318"}
+            {"\u00a0"}K
+          </kbd>
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="اعلان‌ها"
+        >
+          <Bell className="size-4" aria-hidden="true" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="راهنما"
+        >
+          <HelpCircle className="size-4" aria-hidden="true" />
+        </Button>
+      </div>
+    </header>
+  );
+};
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+  colors,
+}: any & {
+  colors: { primary: string; secondary: string };
+}) {
+  if (!active || !payload?.length) return null;
+
+  const thisYear = payload.find((p: any) => p.dataKey === "thisYear")?.value || 0;
+  const prevYear = payload.find((p: any) => p.dataKey === "prevYear")?.value || 0;
+  const diff = Number(thisYear) - Number(prevYear);
+  const percentage = prevYear ? Math.round((diff / Number(prevYear)) * 100) : 0;
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}، {currentYear.toLocaleString("fa-IR")}
+      </p>
+      <div className="space-y-1 sm:space-y-1.5">
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.primary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            امسال:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(thisYear))}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.secondary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            سال قبل:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(prevYear))}
+          </span>
+        </div>
+        <div className="mt-1 border-t border-border pt-1">
+          <span
+            className={cn(
+              "text-[10px] font-medium sm:text-xs",
+              diff >= 0 ? "text-emerald-500" : "text-red-500",
+            )}
+          >
+            {diff >= 0 ? "+" : ""}
+            {percentage.toLocaleString("fa-IR")}٪ نسبت به سال قبل
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const RevenueFlowChart = () => {
+  const [period, setPeriod] = React.useState<TimePeriod>("6months");
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextPeriod = params.get("period");
+    if (nextPeriod === "6months" || nextPeriod === "year") {
+      setPeriod(nextPeriod);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (period !== "6months") {
+      params.set("period", period);
+    } else {
+      params.delete("period");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [period]);
+
+  const chartData = getDataForPeriod(period);
+  const totalRevenue = chartData.reduce((acc, item) => acc + item.thisYear, 0);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:gap-6 sm:p-6">
+      <div className="flex flex-wrap items-center gap-2 sm:gap-4">
+        <div className="flex flex-1 flex-col gap-1">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(totalRevenue)}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            درآمد کل ({periodLabels[period]})
+          </p>
+        </div>
+        <div className="hidden items-center gap-3 sm:flex sm:gap-5">
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2.5 rounded-full sm:size-3"
+              style={{ backgroundColor: palette.primary }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              امسال
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2.5 rounded-full sm:size-3"
+              style={{ backgroundColor: palette.secondary.light }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              سال قبل
+            </span>
+          </div>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7 sm:size-8"
+              aria-label="انتخاب بازه زمانی"
+            >
+              <MoreHorizontal className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>بازه زمانی</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {(Object.keys(periodLabels) as TimePeriod[]).map((key) => (
+              <DropdownMenuCheckboxItem
+                key={key}
+                checked={period === key}
+                onCheckedChange={() => setPeriod(key)}
+              >
+                {periodLabels[key]}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="h-[200px] w-full min-w-0 sm:h-[240px] lg:h-[280px]">
+        <ChartContainer config={revenueChartConfig} className="h-full w-full">
+          <BarChart data={chartData} barGap={2}>
+            <CartesianGrid strokeDasharray="0" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              tickFormatter={(value) => compactCurrencyFormatter.format(value)}
+              width={40}
+            />
+            <Tooltip
+              content={
+                <CustomTooltip
+                  colors={{
+                    primary: "var(--color-thisYear)",
+                    secondary: "var(--color-prevYear)",
+                  }}
+                />
+              }
+              cursor={{ fillOpacity: 0.05, radius: 4 }}
+            />
+            <Bar
+              dataKey="thisYear"
+              fill="var(--color-thisYear)"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={24}
+            />
+            <Bar
+              dataKey="prevYear"
+              fill="var(--color-prevYear)"
+              fillOpacity={0.4}
+              radius={[4, 4, 0, 0]}
+              maxBarSize={24}
+            />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const StatsCardsGrid = () => {
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:w-[420px] xl:grid-cols-2">
+      {statsGridData.map((stat) => {
+        const isPositive = stat.invertColor ? stat.change < 0 : stat.change > 0;
+
+        return (
+          <div
+            key={stat.label}
+            className="flex flex-col rounded-xl border bg-card p-4 sm:p-5"
+          >
+            <div className="flex items-start justify-between">
+              <span className="text-xs text-muted-foreground sm:text-sm">
+                {stat.label}
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="-mt-1 -me-2 size-6 text-muted-foreground"
+                aria-label={`گزینه‌های بیشتر برای ${stat.label}`}
+              >
+                <MoreHorizontal className="size-3.5" aria-hidden="true" />
+              </Button>
+            </div>
+            <span className="mt-3 text-lg font-semibold tracking-tight sm:text-xl">
+              {formatStatValue(stat)}
+            </span>
+            <div className="mt-1 flex items-center gap-2 text-[10px] sm:text-xs">
+              <span
+                className={cn(
+                  "font-medium",
+                  isPositive
+                    ? "text-emerald-600 dark:text-emerald-400"
+                    : "text-red-600 dark:text-red-400",
+                )}
+              >
+                {stat.change > 0 ? "+" : ""}
+                {stat.change.toLocaleString("fa-IR", {
+                  minimumFractionDigits: 1,
+                  maximumFractionDigits: 1,
+                })}
+                ٪
+              </span>
+              <span className="text-muted-foreground">نسبت به ماه قبل</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const CategoryPerformanceChart = () => {
+  const [tab, setTab] = React.useState<"week" | "month">("week");
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextTab = params.get("categoryTab");
+    if (nextTab === "week" || nextTab === "month") {
+      setTab(nextTab);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (tab !== "week") {
+      params.set("categoryTab", tab);
+    } else {
+      params.delete("categoryTab");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [tab]);
+
+  const chartData = tab === "week" ? categoryWeekData : categoryMonthData;
+  const totalOrders = chartData.reduce(
+    (acc, item) =>
+      acc + item.electronics + item.clothing + item.homeGarden + item.sports,
+    0,
+  );
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-5">
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-sm font-medium text-pretty">
+            عملکرد دسته‌ها
+          </h2>
+          <span className="text-xl font-bold tracking-tight">
+            {numberFormatter.format(totalOrders)}
+          </span>
+          <div className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1">
+            {Object.entries(categoryChartConfig).map(([key, config]) => (
+              <div key={key} className="flex items-center gap-1.5">
+                <div
+                  className="size-2 rounded-full"
+                  style={{
+                    backgroundColor:
+                      "color" in config ? config.color : config.theme.light,
+                  }}
+                />
+                <span className="text-[10px] text-muted-foreground">
+                  {config.label}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="flex items-center gap-0.5 rounded-lg border bg-muted/50 p-0.5">
+          {(
+            [
+              { value: "week" as const, label: "هفته" },
+              { value: "month" as const, label: "ماه" },
+            ] as const
+          ).map(({ value, label }) => (
+            <button
+              key={value}
+              onClick={() => setTab(value)}
+              className={cn(
+                "rounded-md px-3 py-1 text-xs font-medium transition-colors",
+                tab === value
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="h-[240px] w-full min-w-0 sm:h-[280px]">
+        <ChartContainer config={categoryChartConfig} className="h-full w-full">
+          <LineChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="day"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              domain={[0, 1000]}
+              width={32}
+            />
+            <Tooltip
+              content={({ active, payload, label }) => {
+                if (!active || !payload?.length) return null;
+                return (
+                  <div className="rounded-lg border border-border bg-popover p-2 shadow-lg">
+                    <p className="mb-1 text-xs font-medium text-foreground">
+                      {label}
+                    </p>
+                    {payload.map((entry) => (
+                      <div
+                        key={`${entry.dataKey ?? entry.name ?? "revenue"}`}
+                        className="flex items-center gap-1.5 text-[10px]"
+                      >
+                        <div
+                          className="size-2 rounded-full"
+                          style={{ backgroundColor: entry.color }}
+                        />
+                        <span className="text-muted-foreground">
+                          {categoryChartConfig[
+                            entry.dataKey as keyof typeof categoryChartConfig
+                          ]?.label ?? entry.dataKey}
+                          :
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {numberFormatter.format(Number(entry.value))}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                );
+              }}
+            />
+            <Line
+              type="monotone"
+              dataKey="electronics"
+              stroke="var(--color-electronics)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="clothing"
+              stroke="var(--color-clothing)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="homeGarden"
+              stroke="var(--color-homeGarden)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="sports"
+              stroke="var(--color-sports)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const FulfillmentPanel = () => {
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border bg-card p-5 xl:w-[420px]">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-sm font-medium text-pretty">تکمیل سفارش</h2>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7"
+            aria-label="بروزرسانی"
+          >
+            <RotateCcw className="size-3.5" aria-hidden="true" />
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                aria-label="گزینه‌ها"
+              >
+                <MoreHorizontal className="size-3.5" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>خروجی جدول</DropdownMenuItem>
+              <DropdownMenuItem>مشاهده همه سفارش‌ها</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      <div>
+        <div className="flex items-center border-b pe-3 pb-2 text-[10px] text-muted-foreground">
+          <span className="w-20 shrink-0">سفارش</span>
+          <span className="w-24 shrink-0">ارسال</span>
+          <span className="flex-1">وضعیت</span>
+          <span className="w-8 shrink-0 text-end">تحویل٪</span>
+        </div>
+        <ScrollArea className="h-[280px]">
+          <div className="divide-y pe-3">
+            {fulfillmentData.map((row) => (
+              <div
+                key={row.order}
+                className="flex items-center gap-2 py-2.5 text-xs"
+              >
+                <span className="w-20 shrink-0 font-medium">{row.order}</span>
+                <span className="w-24 shrink-0 text-muted-foreground">
+                  {shippedDateFormatter.format(row.shipped)}
+                </span>
+                <div className="flex min-w-0 flex-1 items-center gap-px overflow-hidden">
+                  {row.segments.slice(0, 15).map((opacity, i) => {
+                    const filled = i < Math.round((row.progress / 100) * 15);
+                    return (
+                      <div
+                        key={i}
+                        className="h-2 w-1.5 shrink-0 rounded-[1px]"
+                        style={{
+                          backgroundColor: filled
+                            ? palette.primary
+                            : "var(--muted)",
+                          opacity: filled ? opacity : 0.2,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+                <span className="w-8 shrink-0 text-end font-medium">
+                  {row.progress.toLocaleString("fa-IR")}
+                </span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:p-4 md:p-6"
+    >
+      <div className="flex flex-col gap-4 xl:flex-row">
+        <RevenueFlowChart />
+        <StatsCardsGrid />
+      </div>
+      <div className="flex flex-col gap-4 xl:flex-row">
+        <CategoryPerformanceChart />
+        <FulfillmentPanel />
+      </div>
+    </div>
+  );
+};
+
+const Dashboard6 = ({ className }: { className?: string }) => {
+  return (
+    <TooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+};
+
+export { Dashboard6 };
diff --git a/blocks/dashboard7.tsx b/blocks/dashboard7.tsx
new file mode 100644
index 0000000..2c2a4ac
--- /dev/null
+++ b/blocks/dashboard7.tsx
@@ -0,0 +1,1893 @@
+"use client";
+
+import {
+  BarChart3,
+  Bell,
+  Box,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Copy,
+  Eye,
+  Filter,
+  Globe,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  MessageSquare,
+  MoreHorizontal,
+  Package,
+  Pencil,
+  RotateCcw,
+  Search,
+  Settings,
+  Truck,
+  User,
+  Users,
+  X,
+} from "lucide-react";
+import * as React from "react";
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type StatGridItem = {
+  label: string;
+  value: number;
+  format: "currency" | "number" | "percent" | "days" | "compact";
+  change: number;
+  invertColor: boolean;
+};
+
+type FulfillmentItem = {
+  order: string;
+  shipped: Date;
+  progress: number;
+  segments: number[];
+};
+
+type OrderStatus = "Processing" | "Shipped" | "Delivered" | "Cancelled";
+
+type Order = {
+  id: string;
+  orderNumber: string;
+  customer: string;
+  customerInitials: string;
+  products: string[];
+  productCount: number;
+  status: OrderStatus;
+  total: number;
+  date: Date;
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
+  notation: "compact",
+});
+const percentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  maximumFractionDigits: 1,
+});
+const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  maximumFractionDigits: 1,
+});
+const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  weekday: "short",
+});
+const monthDayFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+});
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+
+const orderStatusLabels: Record<OrderStatus, string> = {
+  Processing: "در حال پردازش",
+  Shipped: "ارسال‌شده",
+  Delivered: "تحویل‌شده",
+  Cancelled: "لغوشده",
+};
+
+const formatStatValue = (stat: StatGridItem) => {
+  switch (stat.format) {
+    case "currency":
+      return currencyFormatter.format(stat.value);
+    case "percent":
+      return percentFormatter.format(stat.value);
+    case "days":
+      return `${oneDecimalFormatter.format(stat.value)} روز`;
+    case "compact":
+      return compactNumberFormatter.format(stat.value);
+    default:
+      return numberFormatter.format(stat.value);
+  }
+};
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+    description: "فروشگاه آنلاین",
+  },
+  navGroups: [
+    {
+      title: "اصلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
+        {
+          label: "محصولات",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: Package, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
+            { label: "موجودی", icon: Package, href: "#" },
+          ],
+        },
+        { label: "مشتریان", icon: Users, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      defaultOpen: true,
+      items: [
+        { label: "تحلیل‌ها", icon: BarChart3, href: "#" },
+        { label: "گزارش‌ها", icon: Globe, href: "#" },
+      ],
+    },
+    {
+      title: "سایر",
+      defaultOpen: false,
+      items: [
+        { label: "ارسال", icon: Truck, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "john@acme.store",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+  },
+};
+
+const statsGridData: StatGridItem[] = [
+  {
+    label: "درآمد کل",
+    value: 1_800_000,
+    format: "currency",
+    change: 12.0,
+    invertColor: false,
+  },
+  {
+    label: "میانگین تکمیل",
+    value: 2.4,
+    format: "days",
+    change: -5.0,
+    invertColor: false,
+  },
+  {
+    label: "سفارش‌ها",
+    value: 9420,
+    format: "number",
+    change: 18.0,
+    invertColor: false,
+  },
+  {
+    label: "نرخ تبدیل",
+    value: 0.042,
+    format: "percent",
+    change: 1.2,
+    invertColor: false,
+  },
+  {
+    label: "نرخ مرجوعی",
+    value: 0.031,
+    format: "percent",
+    change: -11.0,
+    invertColor: true,
+  },
+  {
+    label: "بازدید صفحات",
+    value: 184_000,
+    format: "compact",
+    change: 22.0,
+    invertColor: false,
+  },
+];
+
+const categoryWeekData = [
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 6)),
+    electronics: 180,
+    clothing: 220,
+    homeGarden: 280,
+    sports: 350,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 7)),
+    electronics: 420,
+    clothing: 550,
+    homeGarden: 380,
+    sports: 280,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 8)),
+    electronics: 280,
+    clothing: 380,
+    homeGarden: 520,
+    sports: 450,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 9)),
+    electronics: 550,
+    clothing: 280,
+    homeGarden: 420,
+    sports: 620,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 10)),
+    electronics: 323,
+    clothing: 729,
+    homeGarden: 506,
+    sports: 490,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 11)),
+    electronics: 480,
+    clothing: 420,
+    homeGarden: 280,
+    sports: 380,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 12)),
+    electronics: 220,
+    clothing: 550,
+    homeGarden: 450,
+    sports: 320,
+  },
+];
+
+const categoryMonthData = [
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 1)),
+    electronics: 180,
+    clothing: 220,
+    homeGarden: 280,
+    sports: 350,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 5)),
+    electronics: 420,
+    clothing: 550,
+    homeGarden: 380,
+    sports: 280,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 9)),
+    electronics: 280,
+    clothing: 380,
+    homeGarden: 520,
+    sports: 450,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 13)),
+    electronics: 550,
+    clothing: 280,
+    homeGarden: 420,
+    sports: 620,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 15)),
+    electronics: 323,
+    clothing: 729,
+    homeGarden: 506,
+    sports: 490,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 17)),
+    electronics: 480,
+    clothing: 420,
+    homeGarden: 280,
+    sports: 380,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 21)),
+    electronics: 220,
+    clothing: 550,
+    homeGarden: 450,
+    sports: 320,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 25)),
+    electronics: 380,
+    clothing: 320,
+    homeGarden: 580,
+    sports: 480,
+  },
+  {
+    day: monthDayFormatter.format(new Date(2025, 0, 30)),
+    electronics: 520,
+    clothing: 450,
+    homeGarden: 350,
+    sports: 420,
+  },
+];
+
+const categoryChartConfig = {
+  electronics: { label: "الکترونیک", color: palette.primary },
+  clothing: {
+    label: "پوشاک",
+    theme: palette.secondary,
+  },
+  homeGarden: {
+    label: "خانه و باغ",
+    theme: palette.tertiary,
+  },
+  sports: {
+    label: "ورزشی",
+    theme: palette.quaternary,
+  },
+} satisfies ChartConfig;
+
+function getCategoryColor(
+  config: (typeof categoryChartConfig)[keyof typeof categoryChartConfig],
+): string {
+  if ("color" in config && config.color) return config.color;
+  if ("theme" in config && config.theme) {
+    const theme = config.theme as { light: string; dark: string };
+    return theme.light;
+  }
+  return "var(--primary)";
+}
+
+const fulfillmentData: FulfillmentItem[] = [
+  {
+    order: "ORD-4821",
+    shipped: new Date(2025, 0, 27),
+    progress: 92,
+    segments: [
+      0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.5, 0.8, 0.9, 1.0, 0.6, 0.7, 0.8,
+      0.9, 1.0, 0.5, 0.7, 0.8, 0.9, 0.6, 1.0, 0.8, 0.7, 0.3, 0.2, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4819",
+    shipped: new Date(2025, 0, 26),
+    progress: 78,
+    segments: [
+      0.8, 0.6, 0.9, 0.7, 1.0, 0.5, 0.8, 0.9, 0.6, 0.7, 1.0, 0.8, 0.5, 0.9, 0.7,
+      0.6, 0.8, 1.0, 0.7, 0.5, 0.2, 0.1, 0.15, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+      0.1,
+    ],
+  },
+  {
+    order: "ORD-4815",
+    shipped: new Date(2025, 0, 25),
+    progress: 100,
+    segments: [
+      1.0, 0.9, 0.8, 1.0, 0.7, 0.9, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0,
+      0.6, 0.8, 0.9, 1.0, 0.7, 0.9, 0.8, 1.0, 0.6, 0.9, 0.7, 1.0, 0.8, 0.9, 1.0,
+    ],
+  },
+  {
+    order: "ORD-4812",
+    shipped: new Date(2025, 0, 24),
+    progress: 65,
+    segments: [
+      0.9, 1.0, 0.7, 0.8, 0.6, 0.9, 0.5, 0.8, 1.0, 0.7, 0.9, 0.6, 0.8, 0.5, 0.7,
+      1.0, 0.6, 0.9, 0.8, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4808",
+    shipped: new Date(2025, 0, 23),
+    progress: 43,
+    segments: [
+      0.8, 0.7, 1.0, 0.6, 0.9, 0.8, 0.5, 0.7, 1.0, 0.9, 0.6, 0.8, 0.7, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4805",
+    shipped: new Date(2025, 0, 22),
+    progress: 100,
+    segments: [
+      0.9, 0.8, 1.0, 0.7, 0.9, 0.6, 1.0, 0.8, 0.7, 0.9, 1.0, 0.8, 0.6, 0.9, 0.7,
+      1.0, 0.8, 0.9, 0.7, 1.0, 0.8, 0.9, 0.6, 1.0, 0.7, 0.8, 0.9, 1.0, 0.8, 0.9,
+    ],
+  },
+  {
+    order: "ORD-4801",
+    shipped: new Date(2025, 0, 21),
+    progress: 88,
+    segments: [
+      1.0, 0.8, 0.7, 0.9, 0.6, 1.0, 0.8, 0.5, 0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 0.7,
+      0.8, 1.0, 0.6, 0.5, 0.3, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4798",
+    shipped: new Date(2025, 0, 20),
+    progress: 55,
+    segments: [
+      0.7, 0.9, 1.0, 0.6, 0.8, 0.9, 0.7, 1.0, 0.5, 0.8, 0.6, 0.9, 0.1, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4794",
+    shipped: new Date(2025, 0, 19),
+    progress: 100,
+    segments: [
+      0.8, 1.0, 0.9, 0.7, 0.8, 1.0, 0.6, 0.9, 0.8, 1.0, 0.7, 0.9, 0.8, 1.0, 0.6,
+      0.9, 0.7, 1.0, 0.8, 0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0,
+    ],
+  },
+  {
+    order: "ORD-4790",
+    shipped: new Date(2025, 0, 18),
+    progress: 71,
+    segments: [
+      0.9, 0.6, 0.8, 1.0, 0.7, 0.9, 0.5, 0.8, 1.0, 0.6, 0.9, 0.7, 0.8, 0.5, 0.3,
+      0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4786",
+    shipped: new Date(2025, 0, 17),
+    progress: 35,
+    segments: [
+      1.0, 0.8, 0.9, 0.7, 0.6, 0.8, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4782",
+    shipped: new Date(2025, 0, 16),
+    progress: 96,
+    segments: [
+      0.8, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0, 0.6, 0.8, 0.9, 1.0, 0.7, 0.9, 0.8, 1.0,
+      0.6, 0.9, 0.7, 1.0, 0.8, 0.9, 0.6, 1.0, 0.8, 0.7, 0.9, 1.0, 0.8, 0.3, 0.1,
+    ],
+  },
+];
+
+const orderStatuses: OrderStatus[] = [
+  "Processing",
+  "Shipped",
+  "Delivered",
+  "Cancelled",
+];
+
+const orders: Order[] = [
+  {
+    id: "1",
+    orderNumber: "ORD-2024-001",
+    customer: "Sarah Johnson",
+    customerInitials: "SJ",
+    products: ["MacBook Pro 14", "Magic Mouse"],
+    productCount: 2,
+    status: "Delivered",
+    total: 2499.0,
+    date: new Date(2024, 0, 28),
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-2024-002",
+    customer: "Michael Chen",
+    customerInitials: "MC",
+    products: ["iPhone 15 Pro", "AirPods Pro"],
+    productCount: 2,
+    status: "Shipped",
+    total: 1348.0,
+    date: new Date(2024, 0, 27),
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-2024-003",
+    customer: "Emma Wilson",
+    customerInitials: "EW",
+    products: ["iPad Air", "Apple Pencil", "Smart Keyboard"],
+    productCount: 3,
+    status: "Processing",
+    total: 1198.0,
+    date: new Date(2024, 0, 27),
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-2024-004",
+    customer: "James Rodriguez",
+    customerInitials: "JR",
+    products: ["Apple Watch Ultra"],
+    productCount: 1,
+    status: "Delivered",
+    total: 799.0,
+    date: new Date(2024, 0, 26),
+  },
+  {
+    id: "5",
+    orderNumber: "ORD-2024-005",
+    customer: "Lisa Park",
+    customerInitials: "LP",
+    products: ["Mac Mini M2"],
+    productCount: 1,
+    status: "Cancelled",
+    total: 599.0,
+    date: new Date(2024, 0, 26),
+  },
+  {
+    id: "6",
+    orderNumber: "ORD-2024-006",
+    customer: "David Kim",
+    customerInitials: "DK",
+    products: ["Studio Display", "Mac Studio"],
+    productCount: 2,
+    status: "Shipped",
+    total: 5498.0,
+    date: new Date(2024, 0, 25),
+  },
+  {
+    id: "7",
+    orderNumber: "ORD-2024-007",
+    customer: "Anna Martinez",
+    customerInitials: "AM",
+    products: ["MacBook Air M2"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1199.0,
+    date: new Date(2024, 0, 25),
+  },
+  {
+    id: "8",
+    orderNumber: "ORD-2024-008",
+    customer: "Robert Taylor",
+    customerInitials: "RT",
+    products: ["iPhone 15", "MagSafe Charger"],
+    productCount: 2,
+    status: "Processing",
+    total: 878.0,
+    date: new Date(2024, 0, 24),
+  },
+  {
+    id: "9",
+    orderNumber: "ORD-2024-009",
+    customer: "Jennifer Lee",
+    customerInitials: "JL",
+    products: ["AirPods Max"],
+    productCount: 1,
+    status: "Shipped",
+    total: 549.0,
+    date: new Date(2024, 0, 24),
+  },
+  {
+    id: "10",
+    orderNumber: "ORD-2024-010",
+    customer: "William Brown",
+    customerInitials: "WB",
+    products: ["iPad Pro 12.9", "Magic Keyboard"],
+    productCount: 2,
+    status: "Delivered",
+    total: 1648.0,
+    date: new Date(2024, 0, 23),
+  },
+  {
+    id: "11",
+    orderNumber: "ORD-2024-011",
+    customer: "Sophia Davis",
+    customerInitials: "SD",
+    products: ["MacBook Pro 16"],
+    productCount: 1,
+    status: "Processing",
+    total: 2499.0,
+    date: new Date(2024, 0, 23),
+  },
+  {
+    id: "12",
+    orderNumber: "ORD-2024-012",
+    customer: "Daniel Garcia",
+    customerInitials: "DG",
+    products: ["Apple TV 4K", "HomePod mini"],
+    productCount: 2,
+    status: "Cancelled",
+    total: 278.0,
+    date: new Date(2024, 0, 22),
+  },
+  {
+    id: "13",
+    orderNumber: "ORD-2024-013",
+    customer: "Olivia White",
+    customerInitials: "OW",
+    products: ["iPhone 15 Pro Max"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1199.0,
+    date: new Date(2024, 0, 22),
+  },
+  {
+    id: "14",
+    orderNumber: "ORD-2024-014",
+    customer: "Thomas Anderson",
+    customerInitials: "TA",
+    products: ["Mac Pro", "Pro Display XDR"],
+    productCount: 2,
+    status: "Shipped",
+    total: 12498.0,
+    date: new Date(2024, 0, 21),
+  },
+  {
+    id: "15",
+    orderNumber: "ORD-2024-015",
+    customer: "Emily Thompson",
+    customerInitials: "ET",
+    products: ["iPad mini", "Apple Pencil"],
+    productCount: 2,
+    status: "Delivered",
+    total: 648.0,
+    date: new Date(2024, 0, 21),
+  },
+  {
+    id: "16",
+    orderNumber: "ORD-2024-016",
+    customer: "Christopher Moore",
+    customerInitials: "CM",
+    products: ["AirPods Pro 2"],
+    productCount: 1,
+    status: "Processing",
+    total: 249.0,
+    date: new Date(2024, 0, 20),
+  },
+  {
+    id: "17",
+    orderNumber: "ORD-2024-017",
+    customer: "Isabella Jackson",
+    customerInitials: "IJ",
+    products: ["Apple Watch Series 9"],
+    productCount: 1,
+    status: "Shipped",
+    total: 399.0,
+    date: new Date(2024, 0, 20),
+  },
+  {
+    id: "18",
+    orderNumber: "ORD-2024-018",
+    customer: "Matthew Harris",
+    customerInitials: "MH",
+    products: ["MacBook Air 15"],
+    productCount: 1,
+    status: "Delivered",
+    total: 1299.0,
+    date: new Date(2024, 0, 19),
+  },
+  {
+    id: "19",
+    orderNumber: "ORD-2024-019",
+    customer: "Ava Clark",
+    customerInitials: "AC",
+    products: ["iPhone SE", "EarPods"],
+    productCount: 2,
+    status: "Cancelled",
+    total: 448.0,
+    date: new Date(2024, 0, 19),
+  },
+  {
+    id: "20",
+    orderNumber: "ORD-2024-020",
+    customer: "Joshua Lewis",
+    customerInitials: "JL",
+    products: ["Mac Mini M2 Pro"],
+    productCount: 1,
+    status: "Processing",
+    total: 1299.0,
+    date: new Date(2024, 0, 18),
+  },
+];
+
+const PAGE_SIZE_OPTIONS = [10, 25, 50];
+
+function readRecentOrdersTableState() {
+  const defaults = {
+    searchQuery: "",
+    statusFilter: "all",
+    currentPage: 1,
+    pageSize: 10,
+  };
+
+  if (typeof window === "undefined") return defaults;
+
+  const params = new URLSearchParams(window.location.search);
+  const statusParam = params.get("status");
+  const pageParam = Number.parseInt(params.get("page") ?? "", 10);
+  const pageSizeParam = Number.parseInt(params.get("pageSize") ?? "", 10);
+
+  return {
+    searchQuery: params.get("q") ?? "",
+    statusFilter:
+      statusParam && orderStatuses.includes(statusParam as OrderStatus)
+        ? statusParam
+        : "all",
+    currentPage: Number.isFinite(pageParam) && pageParam > 0 ? pageParam : 1,
+    pageSize: PAGE_SIZE_OPTIONS.includes(pageSizeParam) ? pageSizeParam : 10,
+  };
+}
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              width={24}
+              height={24}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <LayoutDashboard className="size-5" aria-hidden="true" />
+      <h1 className="text-base font-medium text-pretty">داشبورد</h1>
+
+      <div className="ms-auto flex items-center gap-2">
+        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
+          <Search
+            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            name="header-search"
+            inputMode="search"
+            autoComplete="off"
+            aria-label="جستجوی داشبورد"
+            placeholder="جستجوی سفارش‌ها، مشتریان…"
+            className="h-9 w-full pe-14 ps-9 text-sm"
+          />
+          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 rounded-md border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
+            {"\u2318"}
+            {"\u00a0"}K
+          </kbd>
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="اعلان‌ها"
+        >
+          <Bell className="size-4" aria-hidden="true" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-9"
+          aria-label="راهنما"
+        >
+          <HelpCircle className="size-4" aria-hidden="true" />
+        </Button>
+      </div>
+    </header>
+  );
+};
+
+const StatsCardsGrid = () => {
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+      {statsGridData.map((stat) => {
+        const isPositive = stat.invertColor ? stat.change < 0 : stat.change > 0;
+
+        return (
+          <div
+            key={stat.label}
+            className="flex flex-col rounded-xl border bg-card p-4 sm:p-5"
+          >
+            <span className="text-xl font-semibold tracking-tight sm:text-3xl">
+              {formatStatValue(stat)}
+            </span>
+            <div className="mt-2 flex items-center gap-2">
+              <span className="text-xs text-muted-foreground sm:text-sm">
+                {stat.label}
+              </span>
+              <span
+                className={cn(
+                  "text-[10px] font-medium sm:text-xs",
+                  isPositive
+                    ? "text-emerald-600 dark:text-emerald-400"
+                    : "text-red-600 dark:text-red-400",
+                )}
+              >
+                {stat.change > 0 ? "+" : ""}
+                {stat.change.toLocaleString("fa-IR", {
+                  minimumFractionDigits: 1,
+                  maximumFractionDigits: 1,
+                })}
+                ٪
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const CategoryPerformanceChart = () => {
+  const subscribeToCategoryTab = React.useCallback((onStoreChange: () => void) => {
+    if (typeof window === "undefined") return () => {};
+    window.addEventListener("popstate", onStoreChange);
+    return () => window.removeEventListener("popstate", onStoreChange);
+  }, []);
+
+  const readCategoryTabParam = React.useCallback((): "week" | "month" => {
+    if (typeof window === "undefined") return "week";
+    const nextTab = new URLSearchParams(window.location.search).get(
+      "categoryTab",
+    );
+    return nextTab === "month" ? "month" : "week";
+  }, []);
+
+  const tab = React.useSyncExternalStore(
+    subscribeToCategoryTab,
+    readCategoryTabParam,
+    () => "week" as const,
+  );
+
+  const setTab = React.useCallback((next: "week" | "month") => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (next !== "week") {
+      params.set("categoryTab", next);
+    } else {
+      params.delete("categoryTab");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }, []);
+
+  const chartData = tab === "week" ? categoryWeekData : categoryMonthData;
+  const totalOrders = chartData.reduce(
+    (acc, item) =>
+      acc + item.electronics + item.clothing + item.homeGarden + item.sports,
+    0,
+  );
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-5">
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-sm font-medium text-pretty">
+            عملکرد دسته‌ها
+          </h2>
+          <span className="text-xl font-bold tracking-tight">
+            {numberFormatter.format(totalOrders)}
+          </span>
+          <div className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1">
+            {Object.entries(categoryChartConfig).map(([key, config]) => (
+              <div key={key} className="flex items-center gap-1.5">
+                <div
+                  className="size-2 rounded-full"
+                  style={{ backgroundColor: getCategoryColor(config) }}
+                  aria-hidden="true"
+                />
+                <span className="text-[10px] text-muted-foreground">
+                  {config.label}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div
+          className="flex items-center gap-0.5 rounded-lg border bg-muted/50 p-0.5"
+          role="group"
+          aria-label="بازه زمانی عملکرد دسته‌ها"
+        >
+          <button
+            type="button"
+            onClick={() => setTab("week")}
+            className={cn(
+              "rounded-md px-3 py-1 text-xs font-medium transition-colors",
+              tab === "week"
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+            aria-label="نمایش هفتگی"
+          >
+            هفته
+          </button>
+          <button
+            type="button"
+            onClick={() => setTab("month")}
+            className={cn(
+              "rounded-md px-3 py-1 text-xs font-medium transition-colors",
+              tab === "month"
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+            aria-label="نمایش ماهانه"
+          >
+            ماه
+          </button>
+        </div>
+      </div>
+
+      <div
+        id="category-chart-panel"
+        className="h-[240px] w-full min-w-0 sm:h-[280px]"
+      >
+        <ChartContainer config={categoryChartConfig} className="h-full w-full">
+          <LineChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis
+              dataKey="day"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              domain={[0, 1000]}
+              width={32}
+            />
+            <Tooltip
+              content={({ active, payload, label }) => {
+                if (!active || !payload?.length) return null;
+                return (
+                  <div className="rounded-lg border border-border bg-popover p-2 shadow-lg">
+                    <p className="mb-1 text-xs font-medium text-foreground">
+                      {label}
+                    </p>
+                    {payload.map((entry) => (
+                      <div
+                        key={`${entry.dataKey ?? entry.name ?? "segment"}`}
+                        className="flex items-center gap-1.5 text-[10px]"
+                      >
+                        <div
+                          className="size-2 rounded-full"
+                          style={{ backgroundColor: entry.color }}
+                        />
+                        <span className="text-muted-foreground">
+                          {categoryChartConfig[
+                            entry.dataKey as keyof typeof categoryChartConfig
+                          ]?.label ?? entry.dataKey}
+                          :
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {numberFormatter.format(Number(entry.value))}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                );
+              }}
+            />
+            <Line
+              type="linear"
+              dataKey="electronics"
+              stroke="var(--color-electronics)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+            <Line
+              type="linear"
+              dataKey="clothing"
+              stroke="var(--color-clothing)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+            <Line
+              type="linear"
+              dataKey="homeGarden"
+              stroke="var(--color-homeGarden)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+            <Line
+              type="linear"
+              dataKey="sports"
+              stroke="var(--color-sports)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const FulfillmentPanel = () => {
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border bg-card p-5 xl:w-[420px]">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-sm font-medium text-pretty">تکمیل سفارش</h2>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7"
+            aria-label="بروزرسانی"
+          >
+            <RotateCcw className="size-3.5" aria-hidden="true" />
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                aria-label="گزینه‌ها"
+              >
+                <MoreHorizontal className="size-3.5" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>خروجی جدول</DropdownMenuItem>
+              <DropdownMenuItem>مشاهده همه سفارش‌ها</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      <div>
+        <div className="flex items-center border-b pe-3 pb-2 text-[10px] text-muted-foreground">
+          <span className="w-20 shrink-0">سفارش</span>
+          <span className="w-24 shrink-0">ارسال</span>
+          <span className="flex-1">وضعیت</span>
+          <span className="w-8 shrink-0 text-end">تحویل٪</span>
+        </div>
+        <ScrollArea className="h-[280px]">
+          <div className="divide-y pe-3">
+            {fulfillmentData.map((row) => (
+              <div
+                key={row.order}
+                className="flex items-center gap-2 py-2.5 text-xs"
+              >
+                <span className="w-20 shrink-0 font-medium">{row.order}</span>
+                <span className="w-24 shrink-0 text-muted-foreground">
+                  {dateFormatter.format(row.shipped)}
+                </span>
+                <div className="flex min-w-0 flex-1 items-center gap-px overflow-hidden">
+                  {row.segments.slice(0, 15).map((opacity, i) => {
+                    const filled = i < Math.round((row.progress / 100) * 15);
+                    return (
+                      <div
+                        key={i}
+                        className="h-2 w-1.5 shrink-0 rounded-[1px]"
+                        style={{
+                          backgroundColor: filled
+                            ? palette.primary
+                            : "var(--muted)",
+                          opacity: filled ? opacity : 0.2,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+                <span className="w-8 shrink-0 text-end font-medium">
+                  {row.progress.toLocaleString("fa-IR")}
+                </span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};
+
+const tableHeadClass = "text-xs font-medium text-muted-foreground sm:text-sm";
+
+const statusStyles: Record<OrderStatus, string> = {
+  Processing:
+    "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/20",
+  Shipped:
+    "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20",
+  Delivered:
+    "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/20",
+  Cancelled:
+    "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20",
+};
+
+const RecentOrdersTable = () => {
+  const [searchQuery, setSearchQuery] = React.useState(
+    () => readRecentOrdersTableState().searchQuery,
+  );
+  const [statusFilter, setStatusFilter] = React.useState<string>(
+    () => readRecentOrdersTableState().statusFilter,
+  );
+  const [currentPage, setCurrentPage] = React.useState(
+    () => readRecentOrdersTableState().currentPage,
+  );
+  const [pageSize, setPageSize] = React.useState(
+    () => readRecentOrdersTableState().pageSize,
+  );
+  const isHydrated = typeof window !== "undefined";
+  const skipNextReset = React.useRef(true);
+
+  const hasActiveFilters = statusFilter !== "all";
+
+  const clearFilters = () => {
+    setStatusFilter("all");
+  };
+
+  const filteredOrders = React.useMemo(() => {
+    return orders.filter((order) => {
+      const matchesSearch =
+        order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        order.customer.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesStatus =
+        statusFilter === "all" || order.status === statusFilter;
+
+      return matchesSearch && matchesStatus;
+    });
+  }, [searchQuery, statusFilter]);
+
+  const totalPages = Math.ceil(filteredOrders.length / pageSize);
+
+  const paginatedOrders = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return filteredOrders.slice(startIndex, endIndex);
+  }, [filteredOrders, currentPage, pageSize]);
+
+  React.useEffect(() => {
+    if (!isHydrated) return;
+    if (skipNextReset.current) {
+      skipNextReset.current = false;
+      return;
+    }
+    setCurrentPage(1);
+  }, [searchQuery, statusFilter, pageSize, isHydrated]);
+
+  React.useEffect(() => {
+    if (!isHydrated) return;
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+
+    if (searchQuery) {
+      params.set("q", searchQuery);
+    } else {
+      params.delete("q");
+    }
+
+    if (statusFilter !== "all") {
+      params.set("status", statusFilter);
+    } else {
+      params.delete("status");
+    }
+
+    if (currentPage > 1) {
+      params.set("page", String(currentPage));
+    } else {
+      params.delete("page");
+    }
+
+    if (pageSize !== PAGE_SIZE_OPTIONS[0]) {
+      params.set("pageSize", String(pageSize));
+    } else {
+      params.delete("pageSize");
+    }
+
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [searchQuery, statusFilter, currentPage, pageSize, isHydrated]);
+
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  return (
+    <div className="rounded-xl border bg-card">
+      <div className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center sm:gap-4 sm:px-6 sm:py-3.5">
+        <div className="flex flex-1 items-center gap-2 sm:gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 shrink-0 sm:size-8"
+            aria-label="سفارش‌های اخیر"
+          >
+            <ClipboardList
+              className="size-4 text-muted-foreground sm:size-[18px]"
+              aria-hidden="true"
+            />
+          </Button>
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            سفارش‌های اخیر
+          </h2>
+          <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
+            {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="relative flex-1 sm:flex-none">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground sm:size-5"
+              aria-hidden="true"
+            />
+            <Input
+              placeholder="جستجوی سفارش… (مثلاً سفارش-۱۴۰۳-002)"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              name="orders-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی سفارش‌ها"
+              className="h-8 w-full ps-9 text-sm sm:h-9 sm:w-[160px] sm:ps-10 lg:w-[200px]"
+            />
+          </div>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn(
+                  "h-8 gap-1.5 sm:h-9 sm:gap-2",
+                  hasActiveFilters && "border-primary",
+                )}
+                aria-label="فیلتر سفارش‌ها"
+              >
+                <Filter className="size-3.5 sm:size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">فیلتر</span>
+                {hasActiveFilters && (
+                  <span className="size-1.5 rounded-full bg-primary sm:size-2" />
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[180px]">
+              <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem
+                checked={statusFilter === "all"}
+                onCheckedChange={() => setStatusFilter("all")}
+              >
+                همه وضعیت‌ها
+              </DropdownMenuCheckboxItem>
+              {orderStatuses.map((status) => (
+                <DropdownMenuCheckboxItem
+                  key={status}
+                  checked={statusFilter === status}
+                  onCheckedChange={() => setStatusFilter(status)}
+                >
+                  {orderStatusLabels[status]}
+                </DropdownMenuCheckboxItem>
+              ))}
+
+              {hasActiveFilters && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={clearFilters}
+                    className="text-destructive"
+                  >
+                    <X className="me-2 size-4" aria-hidden="true" />
+                    پاک کردن فیلترها
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {hasActiveFilters && (
+        <div className="flex flex-wrap items-center gap-2 px-3 pb-3 sm:px-6">
+          <span className="text-[10px] text-muted-foreground sm:text-xs">
+            فیلترها:
+          </span>
+          {statusFilter !== "all" && (
+            <button
+              type="button"
+              className="inline-flex cursor-pointer items-center gap-1 rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20"
+              onClick={() => setStatusFilter("all")}
+              aria-label={`حذف فیلتر ${orderStatusLabels[statusFilter as OrderStatus]}`}
+            >
+              {orderStatusLabels[statusFilter as OrderStatus]}
+              <X className="size-2.5 sm:size-3" aria-hidden="true" />
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className="overflow-x-auto px-3 pb-3 sm:px-6 sm:pb-4">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className={cn("w-[40px]", tableHeadClass)}>
+                #
+              </TableHead>
+              <TableHead className={cn("min-w-[160px]", tableHeadClass)}>
+                سفارش
+              </TableHead>
+              <TableHead
+                className={cn(
+                  "hidden min-w-[140px] md:table-cell",
+                  tableHeadClass,
+                )}
+              >
+                مشتری
+              </TableHead>
+              <TableHead className={cn("min-w-[100px]", tableHeadClass)}>
+                وضعیت
+              </TableHead>
+              <TableHead className={cn("min-w-[90px]", tableHeadClass)}>
+                مجموع
+              </TableHead>
+              <TableHead className={cn("hidden sm:table-cell", tableHeadClass)}>
+                تاریخ
+              </TableHead>
+              <TableHead className="w-[40px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedOrders.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={7}
+                  className="h-24 text-center text-sm text-muted-foreground"
+                >
+                  سفارشی با این فیلترها یافت نشد.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedOrders.map((order, index) => (
+                <TableRow key={order.id}>
+                  <TableCell className="text-xs font-medium sm:text-sm">
+                    {((currentPage - 1) * pageSize + index + 1).toLocaleString(
+                      "fa-IR",
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="min-w-0">
+                      <span className="block truncate text-xs font-medium sm:text-sm">
+                        {order.orderNumber}
+                      </span>
+                      <span className="text-[10px] text-muted-foreground sm:text-xs">
+                        {order.productCount.toLocaleString("fa-IR")} قلم
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden md:table-cell">
+                    <div className="flex items-center gap-2">
+                      <Avatar className="size-6 bg-muted">
+                        <AvatarFallback className="text-[8px] font-semibold text-muted-foreground uppercase">
+                          {order.customerInitials}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-xs text-muted-foreground sm:text-sm">
+                        {order.customer}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        "inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium sm:text-xs",
+                        statusStyles[order.status],
+                      )}
+                    >
+                      {orderStatusLabels[order.status]}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-xs text-foreground tabular-nums sm:text-sm">
+                    {currencyFormatter.format(order.total)}
+                  </TableCell>
+                  <TableCell className="hidden text-xs text-muted-foreground sm:table-cell sm:text-sm">
+                    {dateFormatter.format(order.date)}
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7 text-muted-foreground hover:text-foreground sm:size-8"
+                          aria-label={`عملیات ${order.orderNumber}`}
+                        >
+                          <MoreHorizontal
+                            className="size-3.5 sm:size-4"
+                            aria-hidden="true"
+                          />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>
+                          <Eye className="me-2 size-4" aria-hidden="true" />
+                          مشاهده جزئیات
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Pencil className="me-2 size-4" aria-hidden="true" />
+                          ویرایش سفارش
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Copy className="me-2 size-4" aria-hidden="true" />
+                          تکثیر
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="text-destructive"
+                          onSelect={(event) => {
+                            event.preventDefault();
+                            if (typeof window === "undefined") return;
+                            window.confirm(
+                              "این سفارش لغو شود؟ این عمل قابل بازگشت نیست.",
+                            );
+                          }}
+                        >
+                          <X className="me-2 size-4" aria-hidden="true" />
+                          لغو سفارش
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-col items-center justify-between gap-3 border-t px-3 py-3 sm:flex-row sm:px-6">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground sm:text-sm">
+          <span className="hidden sm:inline">ردیف در هر صفحه:</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={(value) => setPageSize(Number(value))}
+          >
+            <SelectTrigger className="h-8 w-[70px]" aria-label="ردیف در هر صفحه">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PAGE_SIZE_OPTIONS.map((size) => (
+                <SelectItem key={size} value={size.toString()}>
+                  {size.toLocaleString("fa-IR")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-muted-foreground">
+            {filteredOrders.length === 0
+              ? "۰"
+              : `${((currentPage - 1) * pageSize + 1).toLocaleString("fa-IR")}-${Math.min(
+                  currentPage * pageSize,
+                  filteredOrders.length,
+                ).toLocaleString("fa-IR")}`}{" "}
+            از {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه اول"
+          >
+            <ChevronsLeft className="size-4 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه قبل"
+          >
+            <ChevronLeft className="size-4 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+
+          <div className="flex items-center gap-1 px-2">
+            {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+              let pageNum: number;
+              if (totalPages <= 5) {
+                pageNum = i + 1;
+              } else if (currentPage <= 3) {
+                pageNum = i + 1;
+              } else if (currentPage >= totalPages - 2) {
+                pageNum = totalPages - 4 + i;
+              } else {
+                pageNum = currentPage - 2 + i;
+              }
+
+              return (
+                <Button
+                  key={pageNum}
+                  variant={currentPage === pageNum ? "default" : "ghost"}
+                  size="icon"
+                  className="size-8"
+                  onClick={() => goToPage(pageNum)}
+                  aria-label={`رفتن به صفحه ${pageNum.toLocaleString("fa-IR")}`}
+                  aria-current={currentPage === pageNum ? "page" : undefined}
+                >
+                  {pageNum.toLocaleString("fa-IR")}
+                </Button>
+              );
+            })}
+          </div>
+
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه بعد"
+          >
+            <ChevronRight className="size-4 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(totalPages)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه آخر"
+          >
+            <ChevronsRight className="size-4 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:p-4 md:p-6"
+    >
+      <StatsCardsGrid />
+      <div className="flex flex-col gap-4 xl:flex-row">
+        <CategoryPerformanceChart />
+        <FulfillmentPanel />
+      </div>
+      <RecentOrdersTable />
+    </div>
+  );
+};
+
+const Dashboard7 = ({ className }: { className?: string }) => {
+  return (
+    <TooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+};
+
+export { Dashboard7 };
diff --git a/blocks/dashboard8.tsx b/blocks/dashboard8.tsx
new file mode 100644
index 0000000..8e26b27
--- /dev/null
+++ b/blocks/dashboard8.tsx
@@ -0,0 +1,2304 @@
+"use client";
+
+import {
+  ArrowUpDown,
+  BarChart3,
+  Bell,
+  Box,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Download,
+  Filter,
+  Globe,
+  Grid3x3,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  MessageSquare,
+  Minus,
+  Package,
+  RotateCcw,
+  Search,
+  Settings,
+  TrendingDown,
+  TrendingUp,
+  Truck,
+  User,
+  Users,
+  Wallet,
+  X,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  Radar,
+  RadarChart,
+  Sector,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { PieSectorDataItem } from "recharts/types/polar/Pie";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip as ShadTooltip,
+  TooltipContent as ShadTooltipContent,
+  TooltipProvider as ShadTooltipProvider,
+  TooltipTrigger as ShadTooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type InvoicePriority = "High" | "Medium" | "Low";
+type InvoiceStatus = "Paid" | "Pending" | "Overdue" | "Draft";
+
+type Invoice = {
+  id: string;
+  invoiceId: string;
+  customer: string;
+  customerInitials: string;
+  date: string;
+  amount: number;
+  priority: InvoicePriority;
+  status: InvoiceStatus;
+};
+
+type InvoiceSortKey = "customer" | "invoiceId" | "date" | "amount";
+
+type RichMetricStatItem = {
+  title: string;
+  value: number;
+  trendValue: number;
+  footerDelta: number;
+  footerSubtextCount: number;
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 0,
+});
+
+const compactCurrencyOneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const invoiceDateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+});
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+
+const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", { weekday: "short" });
+const monthFormatter = new Intl.DateTimeFormat("fa-IR", { month: "short" });
+const dashboardRangeFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+const dashboardRangeStart = new Date(2025, 0, 1);
+const dashboardRangeEnd = new Date(2025, 0, 31);
+const dashboardDateRangeLabel =
+  typeof dashboardRangeFormatter.formatRange === "function"
+    ? dashboardRangeFormatter.formatRange(
+      dashboardRangeStart,
+      dashboardRangeEnd,
+    )
+    : `${dashboardRangeFormatter.format(
+      dashboardRangeStart,
+    )} – ${dashboardRangeFormatter.format(dashboardRangeEnd)}`;
+
+const invoiceStatusLabels: Record<InvoiceStatus, string> = {
+  Paid: "پرداخت‌شده",
+  Pending: "در انتظار",
+  Overdue: "سررسید گذشته",
+  Draft: "پیش‌نویس",
+};
+
+const invoicePriorityLabels: Record<InvoicePriority, string> = {
+  High: "بالا",
+  Medium: "متوسط",
+  Low: "پایین",
+};
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+    description: "فروشگاه آنلاین",
+  },
+  navGroups: [
+    {
+      title: "اصلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+      ],
+    },
+    {
+      title: "کاتالوگ",
+      defaultOpen: true,
+      items: [
+        {
+          label: "محصولات",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: Package, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
+            { label: "موجودی", icon: Package, href: "#" },
+          ],
+        },
+        { label: "ارسال", icon: Truck, href: "#" },
+      ],
+    },
+    {
+      title: "مشتریان",
+      defaultOpen: false,
+      items: [
+        { label: "همه مشتریان", icon: Users, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "نمای کلی", icon: Globe, href: "#" },
+        { label: "گزارش‌ها", icon: BarChart3, href: "#" },
+        { label: "امور مالی", icon: Wallet, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "john@acme.store",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+  },
+};
+
+const richMetricStats: RichMetricStatItem[] = [
+  {
+    title: "فروش حضوری",
+    value: 7820.75,
+    trendValue: 4.3,
+    footerDelta: 322.5,
+    footerSubtextCount: 5000,
+  },
+  {
+    title: "فروش آنلاین",
+    value: 985_937.45,
+    trendValue: 12.5,
+    footerDelta: 109_500,
+    footerSubtextCount: 21_000,
+  },
+  {
+    title: "عمده‌فروشی",
+    value: 124_650,
+    trendValue: 6.8,
+    footerDelta: 7_935,
+    footerSubtextCount: 890,
+  },
+  {
+    title: "مرجوعی‌ها",
+    value: 15_503,
+    trendValue: -3.1,
+    footerDelta: -498,
+    footerSubtextCount: 6000,
+  },
+];
+
+const weeklyRevenueData = [
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 6)),
+    revenue: 1200,
+    expenses: 800,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 7)),
+    revenue: 1500,
+    expenses: 600,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 8)),
+    revenue: 1800,
+    expenses: 1100,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 9)),
+    revenue: 1100,
+    expenses: 900,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 10)),
+    revenue: 1600,
+    expenses: 1200,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 11)),
+    revenue: 800,
+    expenses: 400,
+  },
+  {
+    day: weekdayFormatter.format(new Date(2025, 0, 12)),
+    revenue: 900,
+    expenses: 500,
+  },
+];
+
+const revenueChartConfig = {
+  revenue: { label: "درآمد", color: palette.primary },
+  expenses: { label: "هزینه", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const monthLabel = (monthIndex: number) =>
+  monthFormatter.format(new Date(2025, monthIndex, 1));
+
+const salesPipelineData: Record<
+  string,
+  { week: string; month: string; orders: number; sales: number }[]
+> = {
+  q1: [
+    { week: "W1", month: monthLabel(0), orders: 220, sales: 5100 },
+    { week: "W2", month: monthLabel(0), orders: 480, sales: 11200 },
+    { week: "W3", month: monthLabel(0), orders: 390, sales: 9400 },
+    { week: "W4", month: monthLabel(0), orders: 150, sales: 3600 },
+    { week: "W5", month: monthLabel(1), orders: 310, sales: 7400 },
+    { week: "W6", month: monthLabel(1), orders: 540, sales: 13100 },
+    { week: "W7", month: monthLabel(1), orders: 460, sales: 10800 },
+    { week: "W8", month: monthLabel(1), orders: 200, sales: 4700 },
+    { week: "W9", month: monthLabel(2), orders: 130, sales: 3100 },
+    { week: "W10", month: monthLabel(2), orders: 420, sales: 10200 },
+    { week: "W11", month: monthLabel(2), orders: 510, sales: 12400 },
+    { week: "W12", month: monthLabel(2), orders: 350, sales: 8500 },
+  ],
+  q2: [
+    { week: "W1", month: monthLabel(3), orders: 410, sales: 9800 },
+    { week: "W2", month: monthLabel(3), orders: 280, sales: 6700 },
+    { week: "W3", month: monthLabel(3), orders: 120, sales: 2900 },
+    { week: "W4", month: monthLabel(3), orders: 350, sales: 8400 },
+    { week: "W5", month: monthLabel(4), orders: 520, sales: 12600 },
+    { week: "W6", month: monthLabel(4), orders: 470, sales: 11300 },
+    { week: "W7", month: monthLabel(4), orders: 190, sales: 4500 },
+    { week: "W8", month: monthLabel(4), orders: 100, sales: 2400 },
+    { week: "W9", month: monthLabel(5), orders: 330, sales: 7900 },
+    { week: "W10", month: monthLabel(5), orders: 490, sales: 11800 },
+    { week: "W11", month: monthLabel(5), orders: 540, sales: 13000 },
+    { week: "W12", month: monthLabel(5), orders: 260, sales: 6200 },
+  ],
+  q3: [
+    { week: "W1", month: monthLabel(6), orders: 180, sales: 4200 },
+    { week: "W2", month: monthLabel(6), orders: 520, sales: 12800 },
+    { week: "W3", month: monthLabel(6), orders: 480, sales: 11500 },
+    { week: "W4", month: monthLabel(6), orders: 120, sales: 2800 },
+    { week: "W5", month: monthLabel(7), orders: 90, sales: 2100 },
+    { week: "W6", month: monthLabel(7), orders: 450, sales: 10500 },
+    { week: "W7", month: monthLabel(7), orders: 510, sales: 12200 },
+    { week: "W8", month: monthLabel(7), orders: 480, sales: 11000 },
+    { week: "W9", month: monthLabel(8), orders: 200, sales: 4800 },
+    { week: "W10", month: monthLabel(8), orders: 150, sales: 3500 },
+    { week: "W11", month: monthLabel(8), orders: 380, sales: 9200 },
+    { week: "W12", month: monthLabel(8), orders: 420, sales: 10100 },
+  ],
+  q4: [
+    { week: "W1", month: monthLabel(9), orders: 300, sales: 7200 },
+    { week: "W2", month: monthLabel(9), orders: 160, sales: 3800 },
+    { week: "W3", month: monthLabel(9), orders: 440, sales: 10600 },
+    { week: "W4", month: monthLabel(9), orders: 530, sales: 12900 },
+    { week: "W5", month: monthLabel(10), orders: 380, sales: 9100 },
+    { week: "W6", month: monthLabel(10), orders: 140, sales: 3400 },
+    { week: "W7", month: monthLabel(10), orders: 250, sales: 6000 },
+    { week: "W8", month: monthLabel(10), orders: 500, sales: 12100 },
+    { week: "W9", month: monthLabel(11), orders: 550, sales: 13300 },
+    { week: "W10", month: monthLabel(11), orders: 470, sales: 11400 },
+    { week: "W11", month: monthLabel(11), orders: 210, sales: 5000 },
+    { week: "W12", month: monthLabel(11), orders: 340, sales: 8200 },
+  ],
+};
+
+const pipelineOrdersConfig = {
+  orders: { label: "سفارش‌ها", color: palette.primary },
+} satisfies ChartConfig;
+
+const pipelineSalesConfig = {
+  sales: { label: "فروش", theme: palette.tertiary },
+} satisfies ChartConfig;
+
+const incomeCategoryData = [
+  { category: "الکترونیک", value: 8200 },
+  { category: "پوشاک", value: 5400 },
+  { category: "خانه و باغ", value: 3800 },
+  { category: "ورزشی", value: 4100 },
+  { category: "زیبایی", value: 2900 },
+];
+
+const radarChartConfig = {
+  value: { label: "فروش", color: palette.primary },
+} satisfies ChartConfig;
+
+type HeatmapCell = {
+  value: number;
+  isCurrentWeek: boolean;
+};
+
+type TrafficSource = {
+  name: string;
+  total: string;
+  weeks: HeatmapCell[];
+};
+
+const trafficSourcesData: TrafficSource[] = [
+  {
+    name: "",
+    total: "6k",
+    weeks: [
+      { value: 0, isCurrentWeek: false },
+      { value: 0, isCurrentWeek: false },
+      { value: 0, isCurrentWeek: false },
+      { value: 0, isCurrentWeek: false },
+    ],
+  },
+  {
+    name: "تبلیغات گوگل",
+    total: "5k",
+    weeks: [
+      { value: 0.5, isCurrentWeek: false },
+      { value: 0.95, isCurrentWeek: true },
+      { value: 0.2, isCurrentWeek: false },
+      { value: 0.55, isCurrentWeek: false },
+    ],
+  },
+  {
+    name: "فیسبوک",
+    total: "4k",
+    weeks: [
+      { value: 0.25, isCurrentWeek: false },
+      { value: 0.6, isCurrentWeek: false },
+      { value: 0.15, isCurrentWeek: false },
+      { value: 0.5, isCurrentWeek: false },
+    ],
+  },
+  {
+    name: "ارگانیک",
+    total: "2k",
+    weeks: [
+      { value: 0.2, isCurrentWeek: false },
+      { value: 0.9, isCurrentWeek: true },
+      { value: 0.1, isCurrentWeek: false },
+      { value: 0.15, isCurrentWeek: false },
+    ],
+  },
+  {
+    name: "ایمیل",
+    total: "3k",
+    weeks: [
+      { value: 0.45, isCurrentWeek: false },
+      { value: 0.95, isCurrentWeek: true },
+      { value: 0.85, isCurrentWeek: true },
+      { value: 0.2, isCurrentWeek: false },
+    ],
+  },
+  {
+    name: "مستقیم",
+    total: "4.5k",
+    weeks: [
+      { value: 0.4, isCurrentWeek: false },
+      { value: 0.9, isCurrentWeek: true },
+      { value: 0.8, isCurrentWeek: true },
+      { value: 0.25, isCurrentWeek: false },
+    ],
+  },
+];
+
+const weekLabels = ["هفته ۱", "هفته ۲", "هفته ۳", "هفته ۴"];
+
+const orderStatIRRata = [
+  { key: "fulfilled", label: "تکمیل‌شده", value: 3200 },
+  { key: "pending", label: "در انتظار", value: 850 },
+];
+
+const orderStatusChartConfig = {
+  fulfilled: { label: "تکمیل‌شده", color: palette.primary },
+  pending: { label: "در انتظار", theme: palette.tertiary },
+} satisfies ChartConfig;
+
+const invoiceStatuses: InvoiceStatus[] = [
+  "Paid",
+  "Pending",
+  "Overdue",
+  "Draft",
+];
+
+const INVOICE_PAGE_SIZE_OPTIONS = [5, 10, 20];
+
+const invoices: Invoice[] = [
+  {
+    id: "1",
+    invoiceId: "INV-00001",
+    customer: "James Brown",
+    customerInitials: "JB",
+    date: "2025-01-05",
+    amount: 1250.0,
+    priority: "High",
+    status: "Paid",
+  },
+  {
+    id: "2",
+    invoiceId: "INV-00002",
+    customer: "Sarah Miller",
+    customerInitials: "SM",
+    date: "2025-01-08",
+    amount: 3420.5,
+    priority: "Medium",
+    status: "Pending",
+  },
+  {
+    id: "3",
+    invoiceId: "INV-00003",
+    customer: "Michael Chen",
+    customerInitials: "MC",
+    date: "2025-01-12",
+    amount: 890.0,
+    priority: "Low",
+    status: "Paid",
+  },
+  {
+    id: "4",
+    invoiceId: "INV-00004",
+    customer: "Emily Davis",
+    customerInitials: "ED",
+    date: "2025-01-15",
+    amount: 4750.0,
+    priority: "High",
+    status: "Overdue",
+  },
+  {
+    id: "5",
+    invoiceId: "INV-00005",
+    customer: "Robert Wilson",
+    customerInitials: "RW",
+    date: "2025-01-18",
+    amount: 567.25,
+    priority: "Low",
+    status: "Draft",
+  },
+  {
+    id: "6",
+    invoiceId: "INV-00006",
+    customer: "Lisa Anderson",
+    customerInitials: "LA",
+    date: "2025-01-22",
+    amount: 2100.0,
+    priority: "Medium",
+    status: "Paid",
+  },
+  {
+    id: "7",
+    invoiceId: "INV-00007",
+    customer: "David Martinez",
+    customerInitials: "DM",
+    date: "2025-02-01",
+    amount: 1875.75,
+    priority: "High",
+    status: "Pending",
+  },
+  {
+    id: "8",
+    invoiceId: "INV-00008",
+    customer: "Jennifer Taylor",
+    customerInitials: "JT",
+    date: "2025-02-05",
+    amount: 45.0,
+    priority: "Low",
+    status: "Paid",
+  },
+  {
+    id: "9",
+    invoiceId: "INV-00009",
+    customer: "Chris Thompson",
+    customerInitials: "CT",
+    date: "2025-02-10",
+    amount: 3200.0,
+    priority: "Medium",
+    status: "Overdue",
+  },
+  {
+    id: "10",
+    invoiceId: "INV-00010",
+    customer: "Amanda White",
+    customerInitials: "AW",
+    date: "2025-02-14",
+    amount: 980.5,
+    priority: "High",
+    status: "Pending",
+  },
+  {
+    id: "11",
+    invoiceId: "INV-00011",
+    customer: "Kevin Harris",
+    customerInitials: "KH",
+    date: "2025-02-18",
+    amount: 4200.0,
+    priority: "Medium",
+    status: "Paid",
+  },
+  {
+    id: "12",
+    invoiceId: "INV-00012",
+    customer: "Rachel Clark",
+    customerInitials: "RC",
+    date: "2025-02-22",
+    amount: 1560.0,
+    priority: "Low",
+    status: "Draft",
+  },
+  {
+    id: "13",
+    invoiceId: "INV-00013",
+    customer: "Thomas Lewis",
+    customerInitials: "TL",
+    date: "2025-03-01",
+    amount: 2890.0,
+    priority: "High",
+    status: "Overdue",
+  },
+  {
+    id: "14",
+    invoiceId: "INV-00014",
+    customer: "Maria Robinson",
+    customerInitials: "MR",
+    date: "2025-03-05",
+    amount: 725.0,
+    priority: "Low",
+    status: "Paid",
+  },
+  {
+    id: "15",
+    invoiceId: "INV-00015",
+    customer: "Daniel Walker",
+    customerInitials: "DW",
+    date: "2025-03-10",
+    amount: 5000.0,
+    priority: "High",
+    status: "Pending",
+  },
+  {
+    id: "16",
+    invoiceId: "INV-00016",
+    customer: "Sophie Hall",
+    customerInitials: "SH",
+    date: "2025-03-14",
+    amount: 1340.0,
+    priority: "Medium",
+    status: "Paid",
+  },
+  {
+    id: "17",
+    invoiceId: "INV-00017",
+    customer: "Nathan Young",
+    customerInitials: "NY",
+    date: "2025-03-18",
+    amount: 2675.5,
+    priority: "Medium",
+    status: "Draft",
+  },
+  {
+    id: "18",
+    invoiceId: "INV-00018",
+    customer: "Olivia King",
+    customerInitials: "OK",
+    date: "2025-03-22",
+    amount: 460.0,
+    priority: "Low",
+    status: "Pending",
+  },
+];
+
+const badgeClassName =
+  "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset";
+
+const invoiceStatusStyles: Record<InvoiceStatus, string> = {
+  Paid: "ring-emerald-500/30 text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10",
+  Pending:
+    "ring-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10",
+  Overdue:
+    "ring-red-500/30 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10",
+  Draft:
+    "ring-zinc-500/30 text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-500/10",
+};
+
+const invoicePriorityStyles: Record<InvoicePriority, string> = {
+  High: "ring-red-500/30 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10",
+  Medium:
+    "ring-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10",
+  Low: "ring-zinc-500/30 text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-500/10",
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              width={24}
+              height={24}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <div className="flex flex-col gap-0.5">
+        <h1 className="text-base font-medium text-pretty">
+          نمای کلی داشبورد
+        </h1>
+        <p className="hidden text-xs text-muted-foreground sm:block">
+          خلاصه‌ای از خریدها، فروش‌ها و سایر شاخص‌ها
+        </p>
+      </div>
+
+      <div className="ms-auto flex items-center gap-2">
+        <span className="hidden text-xs text-muted-foreground lg:inline">
+          {dashboardDateRangeLabel}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-1.5 text-xs"
+          aria-label="همه پلتفرم‌ها"
+        >
+          <Globe className="size-3.5" aria-hidden="true" />
+          <span className="hidden sm:inline">همه پلتفرم‌ها</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-1.5 text-xs"
+          aria-label="همه محصولات"
+        >
+          <span className="hidden sm:inline">همه محصولات</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-1.5 text-xs"
+          aria-label="خروجی"
+        >
+          <Download className="size-3.5" aria-hidden="true" />
+          <span className="hidden sm:inline">خروجی</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8"
+          aria-label="اعلان‌ها"
+        >
+          <Bell className="size-4" aria-hidden="true" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8"
+          aria-label="راهنما"
+        >
+          <HelpCircle className="size-4" aria-hidden="true" />
+        </Button>
+      </div>
+    </header>
+  );
+};
+
+const AccountingStatsCards = () => {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      {richMetricStats.map((stat) => {
+        const isPositive = stat.trendValue > 0;
+        const isNeutral = stat.trendValue === 0;
+
+        const Icon = isNeutral ? Minus : isPositive ? TrendingUp : TrendingDown;
+
+        const deltaPrefix =
+          stat.footerDelta > 0 ? "+" : stat.footerDelta < 0 ? "-" : "";
+        const footerLabel = `${deltaPrefix}${currencyFormatter.format(
+          Math.abs(stat.footerDelta),
+        )} نسبت به ماه قبل`;
+        const footerSubtext = `بر اساس ${numberFormatter.format(
+          stat.footerSubtextCount,
+        )} سفارش`;
+
+        return (
+          <Card key={stat.title} className="@container/card shadow-none">
+            <CardHeader>
+              <CardDescription className="font-medium">
+                {stat.title}
+              </CardDescription>
+              <CardTitle className="text-xl font-bold @[600px]/card:text-xl @[800px]/card:text-2xll">
+                {currencyFormatter.format(stat.value)}
+              </CardTitle>
+            </CardHeader>
+
+            <CardFooter className="flex-col items-start gap-1 text-sm">
+              <div className="flex min-w-0 items-center gap-1.5 truncate font-medium">
+                <span
+                  className={
+                    isNeutral
+                      ? ""
+                      : isPositive
+                        ? "text-success"
+                        : "text-destructive"
+                  }
+                >
+                  {footerLabel}
+                </span>
+                <Icon
+                  className={cn(
+                    "size-3.5 shrink-0",
+                    isNeutral
+                      ? "text-muted-foreground"
+                      : isPositive
+                        ? "text-success"
+                        : "text-destructive",
+                  )}
+                  aria-hidden="true"
+                />
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {footerSubtext}
+              </div>
+            </CardFooter>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};
+
+const RevenueChartTooltip = ({
+  active,
+  payload,
+  label,
+}: any) => {
+  if (!active || !payload?.length) return null;
+
+  const revenue = payload.find((p: any) => p.dataKey === "revenue")?.value ?? 0;
+  const expenses = payload.find((p: any) => p.dataKey === "expenses")?.value ?? 0;
+  const total = Number(revenue) + Number(expenses);
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}
+      </p>
+      <div className="space-y-1 sm:space-y-1.5">
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: "var(--color-revenue)" }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            درآمد:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(revenue))}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: "var(--color-expenses)" }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            هزینه:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(expenses))}
+          </span>
+        </div>
+        <div className="mt-1 border-t border-border pt-1">
+          <span className="text-[10px] font-medium text-foreground sm:text-xs">
+            مجموع: {currencyFormatter.format(total)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const RevenueChart = () => {
+  const totalRevenue = weeklyRevenueData.reduce((sum, d) => sum + d.revenue, 0);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col rounded-xl border bg-card">
+      <div className="flex h-14 items-center justify-between border-b px-4 sm:px-5">
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 sm:size-8"
+            aria-label="درآمد"
+          >
+            <BarChart3
+              className="size-4 text-muted-foreground sm:size-[18px]"
+              aria-hidden="true"
+            />
+          </Button>
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            درآمد
+          </h2>
+        </div>
+        <div className="flex items-center gap-3 sm:gap-5">
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2 rounded-full sm:size-2.5"
+              style={{ backgroundColor: palette.primary }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              درآمد
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2 rounded-full sm:size-2.5"
+              style={{ backgroundColor: palette.secondary.light }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              هزینه
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4 p-4 sm:gap-5 sm:p-5">
+        <div className="flex flex-col gap-1">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(totalRevenue)}
+          </p>
+          <p className="text-[10px] tracking-wider text-muted-foreground uppercase sm:text-xs">
+            این هفته در برابر هفته قبل
+          </p>
+        </div>
+
+        <div className="h-[180px] w-full min-w-0 sm:h-[220px]">
+          <ChartContainer config={revenueChartConfig} className="h-full w-full">
+            <BarChart data={weeklyRevenueData}>
+              <CartesianGrid strokeDasharray="0" vertical={false} />
+              <XAxis
+                dataKey="day"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+                dy={8}
+              />
+              <YAxis
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10 }}
+                dx={-5}
+                tickFormatter={(value) =>
+                  compactCurrencyFormatter.format(value)
+                }
+                width={40}
+              />
+              <Tooltip
+                content={<RevenueChartTooltip />}
+                cursor={{ fillOpacity: 0.05 }}
+              />
+              <Bar
+                dataKey="revenue"
+                stackId="revenue"
+                fill="var(--color-revenue)"
+                radius={[0, 0, 0, 0]}
+              />
+              <Bar
+                dataKey="expenses"
+                stackId="revenue"
+                fill="var(--color-expenses)"
+                radius={[3, 3, 0, 0]}
+              />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SalesPipelineChart = () => {
+  const [searchParams, setSearchParams] = React.useState(
+    () =>
+      new URLSearchParams(
+        typeof window !== "undefined" ? window.location.search : "",
+      ),
+  );
+
+  const quarter = searchParams.get("quarter") ?? "q3";
+
+  const handleQuarterChange = (value: string) => {
+    const next = new URLSearchParams(searchParams);
+    next.set("quarter", value);
+    setSearchParams(next);
+    window.history.replaceState(null, "", `?${next.toString()}`);
+  };
+
+  const data = salesPipelineData[quarter] ?? salesPipelineData.q3;
+  const totalOrders = data.reduce((sum, d) => sum + d.orders, 0);
+  const totalSales = data.reduce((sum, d) => sum + d.sales, 0);
+
+  const pipelineLabelFormatter = (
+    value: React.ReactNode,
+    payload: ReadonlyArray<{ payload?: { week?: string } }> | undefined,
+  ) => {
+    const week = payload?.[0]?.payload?.week;
+    if (!week) return value;
+    return `${value} · ${week}`;
+  };
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col rounded-xl border bg-card">
+      <div className="flex h-14 items-center justify-between border-b px-4 sm:px-5">
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 sm:size-8"
+            aria-label="قیف فروش"
+          >
+            <BarChart3
+              className="size-4 text-muted-foreground sm:size-[18px]"
+              aria-hidden="true"
+            />
+          </Button>
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            قیف فروش
+          </h2>
+        </div>
+
+        <Select value={quarter} onValueChange={handleQuarterChange}>
+          <SelectTrigger
+            className="h-7 w-[120px] text-xs"
+            aria-label="انتخاب سه‌ماهه"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="q1">سه‌ماهه ۱</SelectItem>
+            <SelectItem value="q2">سه‌ماهه ۲</SelectItem>
+            <SelectItem value="q3">سه‌ماهه ۳</SelectItem>
+            <SelectItem value="q4">سه‌ماهه ۴</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid flex-1 grid-cols-1 gap-4 p-4 sm:grid-cols-[1fr_auto_1fr] sm:p-5">
+        <div className="flex min-h-0 flex-col gap-2">
+          <div>
+            <p className="text-lg font-semibold tracking-tight">
+              {numberFormatter.format(totalOrders)}
+            </p>
+            <p className="text-[10px] tracking-wider text-muted-foreground uppercase">
+              مجموع سفارش‌ها
+            </p>
+          </div>
+          <div className="min-h-0 w-full flex-1">
+            <ChartContainer
+              config={pipelineOrdersConfig}
+              className="h-full w-full"
+            >
+              <AreaChart data={data} accessibilityLayer>
+                <defs>
+                  <linearGradient
+                    id="pipelineGradientOrders"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="0%"
+                      stopColor="var(--color-orders)"
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--color-orders)"
+                      stopOpacity={0.05}
+                    />
+                  </linearGradient>
+                </defs>
+                <XAxis
+                  dataKey="month"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10 }}
+                  interval={3}
+                  dy={4}
+                />
+                <YAxis hide domain={["dataMin - 50", "dataMax + 50"]} />
+                <ChartTooltip
+                  cursor={false}
+                  content={
+                    <ChartTooltipContent
+                      indicator="line"
+                      labelFormatter={pipelineLabelFormatter}
+                      formatter={(value, name) => {
+                        const numericValue = Number(value);
+                        const formatted = numberFormatter.format(
+                          Number.isFinite(numericValue) ? numericValue : 0,
+                        );
+
+                        return (
+                          <div className="flex w-full items-center gap-2">
+                            <div
+                              className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                              style={{
+                                backgroundColor:
+                                  name === "orders"
+                                    ? "var(--color-orders)"
+                                    : "var(--color-sales)",
+                              }}
+                            />
+                            <span className="text-muted-foreground">
+                              سفارش‌ها
+                            </span>
+                            <span className="ms-auto font-mono font-medium text-foreground tabular-nums">
+                              {formatted}
+                            </span>
+                          </div>
+                        );
+                      }}
+                    />
+                  }
+                />
+                <Area
+                  type="step"
+                  dataKey="orders"
+                  stroke="var(--color-orders)"
+                  strokeWidth={2}
+                  fill="url(#pipelineGradientOrders)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </div>
+        </div>
+
+        <div className="h-px w-full bg-border sm:h-auto sm:w-px sm:self-stretch" />
+
+        <div className="flex min-h-0 flex-col gap-2">
+          <div>
+            <p className="text-lg font-semibold tracking-tight">
+              {compactCurrencyOneDecimalFormatter.format(totalSales)}
+            </p>
+            <p className="text-[10px] tracking-wider text-muted-foreground uppercase">
+              مجموع فروش
+            </p>
+          </div>
+          <div className="min-h-0 w-full flex-1">
+            <ChartContainer
+              config={pipelineSalesConfig}
+              className="h-full w-full"
+            >
+              <AreaChart data={data} accessibilityLayer>
+                <defs>
+                  <linearGradient
+                    id="pipelineGradientSales"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="0%"
+                      stopColor="var(--color-sales)"
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="var(--color-sales)"
+                      stopOpacity={0.05}
+                    />
+                  </linearGradient>
+                </defs>
+                <XAxis
+                  dataKey="month"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10 }}
+                  interval={3}
+                  dy={4}
+                />
+                <YAxis hide domain={["dataMin - 50", "dataMax + 50"]} />
+                <ChartTooltip
+                  cursor={false}
+                  content={
+                    <ChartTooltipContent
+                      indicator="line"
+                      labelFormatter={pipelineLabelFormatter}
+                      formatter={(value, name) => {
+                        const numericValue = Number(value);
+                        const formatted = currencyFormatter.format(
+                          Number.isFinite(numericValue) ? numericValue : 0,
+                        );
+
+                        return (
+                          <div className="flex w-full items-center gap-2">
+                            <div
+                              className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                              style={{
+                                backgroundColor:
+                                  name === "orders"
+                                    ? "var(--color-orders)"
+                                    : "var(--color-sales)",
+                              }}
+                            />
+                            <span className="text-muted-foreground">فروش</span>
+                            <span className="ms-auto font-mono font-medium text-foreground tabular-nums">
+                              {formatted}
+                            </span>
+                          </div>
+                        );
+                      }}
+                    />
+                  }
+                />
+                <Area
+                  type="step"
+                  dataKey="sales"
+                  stroke="var(--color-sales)"
+                  strokeWidth={2}
+                  fill="url(#pipelineGradientSales)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const IncomeByCategoryChart = () => {
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border bg-card p-4 sm:p-5">
+      <div className="flex items-center gap-2.5">
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-7 sm:size-8"
+          aria-label="فروش بر اساس دسته"
+        >
+          <Grid3x3
+            className="size-4 text-muted-foreground sm:size-[18px]"
+            aria-hidden="true"
+          />
+        </Button>
+        <h2 className="text-sm font-medium text-pretty sm:text-base">
+          فروش بر اساس دسته
+        </h2>
+      </div>
+
+      <div className="mx-auto aspect-square max-h-[250px] w-full">
+        <ChartContainer config={radarChartConfig} className="h-full w-full">
+          <RadarChart data={incomeCategoryData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="category" tick={{ fontSize: 11 }} />
+            <PolarGrid />
+            <Radar
+              dataKey="value"
+              fill="var(--color-value)"
+              fillOpacity={0.5}
+              stroke="var(--color-value)"
+              strokeWidth={2}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const TrafficSourcesHeatmap = () => {
+  return (
+    <div className="flex h-full min-w-0 flex-col rounded-xl border bg-card">
+      <div className="flex h-14 items-center justify-between px-4 sm:px-5">
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 sm:size-8"
+            aria-label="منابع ترافیک"
+          >
+            <Grid3x3
+              className="size-4 text-muted-foreground sm:size-[18px]"
+              aria-hidden="true"
+            />
+          </Button>
+          <div className="flex items-center gap-2">
+            <h2 className="text-sm font-medium text-pretty sm:text-base">
+              منابع ترافیک
+            </h2>
+            <span className="text-xs font-medium text-success">+30%</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col justify-center gap-4 px-4 py-4 sm:px-5">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-1.5">
+            <div className="size-2.5 rounded-full bg-primary" />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              زیاد
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="size-2.5 rounded-full bg-primary/40" />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              متوسط
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="size-2.5 rounded-full bg-primary/15" />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              کم
+            </span>
+          </div>
+        </div>
+        <div className="grid grid-cols-[auto_repeat(4,1fr)] gap-0.5 sm:gap-1">
+          {trafficSourcesData.map((source) => (
+            <React.Fragment key={source.name}>
+              <div className="flex items-center pe-2">
+                <span className="text-[11px] font-medium text-muted-foreground">
+                  {source.total}
+                </span>
+              </div>
+              {source.weeks.map((cell, weekIndex) => {
+                const intensity = cell.isCurrentWeek
+                  ? Math.round(cell.value * 30 + 65)
+                  : Math.round(cell.value * 35 + 15);
+                const tooltipTitle = source.name || "کل";
+                const weekLabel =
+                  weekLabels[weekIndex] ??
+                  `هفته ${(weekIndex + 1).toLocaleString("fa-IR")}`;
+                const strength = Math.round(cell.value * 100);
+
+                return (
+                  <ShadTooltipProvider key={weekIndex}>
+                    <ShadTooltip>
+                      <ShadTooltipTrigger asChild>
+                        <button
+                          type="button"
+                          className="h-5 w-full rounded-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:h-6"
+                          style={{
+                            backgroundColor: `color-mix(in oklch, var(--primary) ${intensity}%, ${mixBase})`,
+                          }}
+                          aria-label={`${tooltipTitle} ${weekLabel}: ${strength}%`}
+                        />
+                      </ShadTooltipTrigger>
+                      <ShadTooltipContent side="top" sideOffset={8}>
+                        <div className="grid gap-1">
+                          <div className="font-medium">{tooltipTitle}</div>
+                          <div className="text-muted-foreground">
+                            {weekLabel}
+                            {cell.isCurrentWeek ? " · جاری" : ""}
+                          </div>
+                          <div className="tabular-nums">
+                            {strength.toLocaleString("fa-IR")}٪
+                          </div>
+                        </div>
+                      </ShadTooltipContent>
+                    </ShadTooltip>
+                  </ShadTooltipProvider>
+                );
+              })}
+            </React.Fragment>
+          ))}
+
+          <div className="pt-2" />
+          {weekLabels.map((label) => (
+            <div
+              key={label}
+              className="pt-2 text-center text-[10px] text-muted-foreground"
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const OrderStatusChart = () => {
+  const total = orderStatIRRata.reduce((sum, d) => sum + d.value, 0);
+  const sliceColors = [palette.primary, palette.tertiary.light];
+  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border bg-card p-4 sm:p-5">
+      <div className="flex items-center gap-2.5">
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-7 sm:size-8"
+          aria-label="وضعیت سفارش"
+        >
+          <Users
+            className="size-4 text-muted-foreground sm:size-[18px]"
+            aria-hidden="true"
+          />
+        </Button>
+        <h2 className="text-sm font-medium text-pretty sm:text-base">
+          وضعیت سفارش
+        </h2>
+      </div>
+
+      <div className="relative mx-auto w-full max-w-[220px] sm:max-w-[240px]">
+        <ChartContainer
+          config={orderStatusChartConfig}
+          className="aspect-square w-full"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={orderStatIRRata}
+              dataKey="value"
+              nameKey="key"
+              innerRadius="60%"
+              outerRadius="85%"
+              paddingAngle={2}
+              strokeWidth={0}
+              {...({ activeIndex: activeIndex ?? undefined } as any)}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <Sector {...props} outerRadius={outerRadius + 8} />
+              )}
+              onMouseEnter={(_, index) => setActiveIndex(index)}
+              onMouseLeave={() => setActiveIndex(null)}
+              onClick={(_, index) =>
+                setActiveIndex((current) => (current === index ? null : index))
+              }
+            >
+              {orderStatIRRata.map((entry, index) => (
+                <Cell
+                  key={entry.key}
+                  fill={sliceColors[index]}
+                  fillOpacity={
+                    activeIndex !== null && activeIndex !== index ? 0.4 : 1
+                  }
+                />
+              ))}
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+          <span className="text-[10px] tracking-wider text-muted-foreground uppercase">
+            سفارش‌ها
+          </span>
+          <span className="text-lg font-semibold">
+            {numberFormatter.format(total)}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-center gap-6">
+        {orderStatIRRata.map((item, index) => (
+          <button
+            key={item.key}
+            type="button"
+            className={cn(
+              "flex items-center gap-2 rounded-md px-1 py-0.5 transition-opacity duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none motion-reduce:transition-none",
+              activeIndex !== null && activeIndex !== index && "opacity-50",
+            )}
+            onPointerEnter={() => setActiveIndex(index)}
+            onPointerLeave={() => setActiveIndex(null)}
+            onFocus={() => setActiveIndex(index)}
+            onBlur={() => setActiveIndex(null)}
+            onClick={() =>
+              setActiveIndex((current) => (current === index ? null : index))
+            }
+            aria-label={`${item.label}: ${numberFormatter.format(item.value)} سفارش`}
+          >
+            <span
+              className="size-2.5 rounded-full"
+              style={{ backgroundColor: sliceColors[index] }}
+            />
+            <span className="text-xs text-muted-foreground">{item.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const RecentInvoicesTable = () => {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState<string>("all");
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(5);
+  const [sortKey, setSortKey] = React.useState<InvoiceSortKey | "">("");
+  const [sortDir, setSortDir] = React.useState<"asc" | "desc">("asc");
+  const [isHydrated, setIsHydrated] = React.useState(false);
+  const skipNextReset = React.useRef(true);
+
+  const hasActiveFilters = statusFilter !== "all";
+
+  const clearFilters = () => {
+    setStatusFilter("all");
+  };
+
+  // Hydrate from URL params on mount
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const params = new URLSearchParams(window.location.search);
+    const statusParam = params.get("invoiceStatus");
+    const pageParam = Number.parseInt(params.get("page") ?? "", 10);
+    const pageSizeParam = Number.parseInt(params.get("pageSize") ?? "", 10);
+    const sortKeyParam = params.get("sortKey") as InvoiceSortKey | null;
+    const sortDirParam = params.get("sortDir");
+
+    setSearchQuery(params.get("q") ?? "");
+    setStatusFilter(
+      statusParam && invoiceStatuses.includes(statusParam as InvoiceStatus)
+        ? statusParam
+        : "all",
+    );
+    setCurrentPage(Number.isFinite(pageParam) && pageParam > 0 ? pageParam : 1);
+    setPageSize(
+      INVOICE_PAGE_SIZE_OPTIONS.includes(pageSizeParam) ? pageSizeParam : 5,
+    );
+    if (
+      sortKeyParam &&
+      ["customer", "invoiceId", "date", "amount"].includes(sortKeyParam)
+    ) {
+      setSortKey(sortKeyParam);
+      setSortDir(sortDirParam === "desc" ? "desc" : "asc");
+    }
+    setIsHydrated(true);
+  }, []);
+
+  // Reset page to 1 when filters change
+  React.useEffect(() => {
+    if (!isHydrated) return;
+    if (skipNextReset.current) {
+      skipNextReset.current = false;
+      return;
+    }
+    setCurrentPage(1);
+  }, [searchQuery, statusFilter, pageSize, isHydrated]);
+
+  // Sync state to URL
+  React.useEffect(() => {
+    if (!isHydrated) return;
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+
+    if (searchQuery) {
+      params.set("q", searchQuery);
+    } else {
+      params.delete("q");
+    }
+
+    if (statusFilter !== "all") {
+      params.set("invoiceStatus", statusFilter);
+    } else {
+      params.delete("invoiceStatus");
+    }
+
+    if (currentPage > 1) {
+      params.set("page", String(currentPage));
+    } else {
+      params.delete("page");
+    }
+
+    if (pageSize !== INVOICE_PAGE_SIZE_OPTIONS[0]) {
+      params.set("pageSize", String(pageSize));
+    } else {
+      params.delete("pageSize");
+    }
+
+    if (sortKey) {
+      params.set("sortKey", sortKey);
+      params.set("sortDir", sortDir);
+    } else {
+      params.delete("sortKey");
+      params.delete("sortDir");
+    }
+
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [
+    searchQuery,
+    statusFilter,
+    currentPage,
+    pageSize,
+    sortKey,
+    sortDir,
+    isHydrated,
+  ]);
+
+  const handleSort = (key: InvoiceSortKey) => {
+    if (sortKey === key) {
+      setSortDir((prev) => (prev === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+
+  const filteredInvoices = React.useMemo(() => {
+    return invoices.filter((invoice) => {
+      const matchesSearch =
+        invoice.customer.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        invoice.invoiceId.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesStatus =
+        statusFilter === "all" || invoice.status === statusFilter;
+
+      return matchesSearch && matchesStatus;
+    });
+  }, [searchQuery, statusFilter]);
+
+  const sortedInvoices = React.useMemo(() => {
+    if (!sortKey) return filteredInvoices;
+
+    return [...filteredInvoices].sort((a, b) => {
+      let cmp = 0;
+      switch (sortKey) {
+        case "customer":
+          cmp = a.customer.localeCompare(b.customer);
+          break;
+        case "invoiceId":
+          cmp = a.invoiceId.localeCompare(b.invoiceId);
+          break;
+        case "date":
+          cmp = a.date.localeCompare(b.date);
+          break;
+        case "amount":
+          cmp = a.amount - b.amount;
+          break;
+      }
+      return sortDir === "desc" ? -cmp : cmp;
+    });
+  }, [filteredInvoices, sortKey, sortDir]);
+
+  const totalPages = Math.max(1, Math.ceil(sortedInvoices.length / pageSize));
+
+  const paginatedInvoices = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return sortedInvoices.slice(startIndex, startIndex + pageSize);
+  }, [sortedInvoices, currentPage, pageSize]);
+
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  const sortableHeader = (
+    label: string,
+    key: InvoiceSortKey,
+    className?: string,
+  ) => (
+    <TableHead
+      className={cn(
+        "text-xs font-medium text-muted-foreground sm:text-sm",
+        className,
+      )}
+      aria-sort={
+        sortKey === key
+          ? sortDir === "asc"
+            ? "ascending"
+            : "descending"
+          : undefined
+      }
+    >
+      <button
+        type="button"
+        className="inline-flex cursor-pointer items-center gap-1"
+        onClick={() => handleSort(key)}
+      >
+        {label}
+        <ArrowUpDown
+          className="size-3 text-muted-foreground/60"
+          aria-hidden="true"
+        />
+      </button>
+    </TableHead>
+  );
+
+  return (
+    <div>
+      <div className="flex flex-col gap-3 py-3 sm:flex-row sm:items-center sm:gap-4 sm:py-3.5">
+        <div className="flex flex-1 flex-col gap-0.5">
+          <div className="flex items-center gap-2.5">
+            <h2 className="text-sm font-medium text-pretty sm:text-base">
+              فاکتورهای اخیر
+            </h2>
+            <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
+              {sortedInvoices.length.toLocaleString("fa-IR")}
+            </span>
+          </div>
+          <p className="hidden text-xs text-muted-foreground sm:block">
+            فاکتورهای اخیر در جدول زیر نمایش داده می‌شوند.
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="relative flex-1 sm:flex-none">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <Input
+              placeholder="جستجوی فاکتور… (مثلاً فاکتور-00012)"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              name="invoice-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی فاکتورها"
+              className="h-8 w-full pe-12 ps-9 text-sm sm:h-9 sm:w-[180px] lg:w-[220px]"
+            />
+            <kbd className="pointer-events-none absolute top-1/2 end-2.5 hidden -translate-y-1/2 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground select-none sm:inline-block">
+              ⌘1
+            </kbd>
+          </div>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn(
+                  "h-8 gap-1.5 sm:h-9 sm:gap-2",
+                  hasActiveFilters && "border-primary",
+                )}
+                aria-label="فیلتر فاکتورها"
+              >
+                <Filter className="size-3.5 sm:size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">فیلتر</span>
+                {hasActiveFilters && (
+                  <span className="size-1.5 rounded-full bg-primary sm:size-2" />
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[180px]">
+              <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem
+                checked={statusFilter === "all"}
+                onCheckedChange={() => setStatusFilter("all")}
+              >
+                همه وضعیت‌ها
+              </DropdownMenuCheckboxItem>
+              {invoiceStatuses.map((status) => (
+                <DropdownMenuCheckboxItem
+                  key={status}
+                  checked={statusFilter === status}
+                  onCheckedChange={() => setStatusFilter(status)}
+                >
+                  {invoiceStatusLabels[status]}
+                </DropdownMenuCheckboxItem>
+              ))}
+
+              {hasActiveFilters && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={clearFilters}
+                    className="text-destructive"
+                  >
+                    <X className="me-2 size-4" aria-hidden="true" />
+                    پاک کردن فیلترها
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 text-xs sm:h-9 sm:text-sm"
+          >
+            مشاهده همه
+          </Button>
+        </div>
+      </div>
+
+      {hasActiveFilters && (
+        <div className="flex flex-wrap items-center gap-2 pb-3">
+          <span className="text-[10px] text-muted-foreground sm:text-xs">
+            فیلترها:
+          </span>
+          {statusFilter !== "all" && (
+            <button
+              type="button"
+              className="inline-flex cursor-pointer items-center gap-1 rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20"
+              onClick={() => setStatusFilter("all")}
+              aria-label={`حذف فیلتر ${invoiceStatusLabels[statusFilter as InvoiceStatus]}`}
+            >
+              {invoiceStatusLabels[statusFilter as InvoiceStatus]}
+              <X className="size-2.5 sm:size-3" aria-hidden="true" />
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className="overflow-x-auto pb-3 sm:pb-4">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              {sortableHeader("مشتری", "customer", "min-w-[160px]")}
+              {sortableHeader("شناسه فاکتور", "invoiceId", "min-w-[120px]")}
+              {sortableHeader(
+                "تاریخ",
+                "date",
+                "hidden min-w-[100px] sm:table-cell",
+              )}
+              {sortableHeader("مبلغ", "amount", "min-w-[90px]")}
+              <TableHead className="min-w-[80px] text-xs font-medium text-muted-foreground sm:text-sm">
+                اولویت
+              </TableHead>
+              <TableHead className="min-w-[80px] text-xs font-medium text-muted-foreground sm:text-sm">
+                وضعیت
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedInvoices.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={6}
+                  className="h-24 text-center text-sm text-muted-foreground"
+                >
+                  فاکتوری با این فیلترها یافت نشد.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedInvoices.map((invoice) => (
+                <TableRow key={invoice.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <Avatar className="size-8">
+                        <AvatarFallback className="text-xs">
+                          {invoice.customerInitials}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-xs font-medium sm:text-sm">
+                        {invoice.customer}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground tabular-nums sm:text-sm">
+                    {invoice.invoiceId}
+                  </TableCell>
+                  <TableCell className="hidden text-xs text-muted-foreground sm:table-cell sm:text-sm">
+                    {invoiceDateFormatter.format(new Date(invoice.date))}
+                  </TableCell>
+                  <TableCell className="text-xs font-medium text-foreground tabular-nums sm:text-sm">
+                    {currencyFormatter.format(invoice.amount)}
+                  </TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        badgeClassName,
+                        invoicePriorityStyles[invoice.priority],
+                      )}
+                    >
+                      {invoicePriorityLabels[invoice.priority]}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        badgeClassName,
+                        invoiceStatusStyles[invoice.status],
+                      )}
+                    >
+                      {invoiceStatusLabels[invoice.status]}
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-col items-center justify-between gap-3 border-t py-3 sm:flex-row">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground sm:text-sm">
+          <span className="hidden sm:inline">ردیف در هر صفحه:</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={(value) => setPageSize(Number(value))}
+          >
+            <SelectTrigger className="h-8 w-[70px]" aria-label="ردیف در هر صفحه">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {INVOICE_PAGE_SIZE_OPTIONS.map((size) => (
+                <SelectItem key={size} value={size.toString()}>
+                  {size.toLocaleString("fa-IR")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-muted-foreground">
+            {sortedInvoices.length === 0
+              ? "۰"
+              : `${((currentPage - 1) * pageSize + 1).toLocaleString("fa-IR")}-${Math.min(
+                  currentPage * pageSize,
+                  sortedInvoices.length,
+                ).toLocaleString("fa-IR")}`}{" "}
+            از {sortedInvoices.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه اول"
+          >
+            <ChevronsLeft className="size-4 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه قبل"
+          >
+            <ChevronLeft className="size-4 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+
+          <div className="flex items-center gap-1 px-2">
+            {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+              let pageNum: number;
+              if (totalPages <= 5) {
+                pageNum = i + 1;
+              } else if (currentPage <= 3) {
+                pageNum = i + 1;
+              } else if (currentPage >= totalPages - 2) {
+                pageNum = totalPages - 4 + i;
+              } else {
+                pageNum = currentPage - 2 + i;
+              }
+
+              return (
+                <Button
+                  key={pageNum}
+                  variant={currentPage === pageNum ? "default" : "ghost"}
+                  size="icon"
+                  className="size-8"
+                  onClick={() => goToPage(pageNum)}
+                  aria-label={`رفتن به صفحه ${pageNum.toLocaleString("fa-IR")}`}
+                  aria-current={currentPage === pageNum ? "page" : undefined}
+                >
+                  {pageNum.toLocaleString("fa-IR")}
+                </Button>
+              );
+            })}
+          </div>
+
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه بعد"
+          >
+            <ChevronRight className="size-4 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => goToPage(totalPages)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه آخر"
+          >
+            <ChevronsRight className="size-4 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6"
+    >
+      <AccountingStatsCards />
+
+      <div className="flex flex-col gap-4 sm:gap-6 xl:flex-row">
+        <RevenueChart />
+        <SalesPipelineChart />
+      </div>
+
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-3">
+        <IncomeByCategoryChart />
+        <TrafficSourcesHeatmap />
+        <OrderStatusChart />
+      </div>
+      <RecentInvoicesTable />
+    </div>
+  );
+};
+
+const Dashboard8 = ({ className }: { className?: string }) => {
+  return (
+    <ShadTooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </ShadTooltipProvider>
+  );
+};
+
+export { Dashboard8 };
diff --git a/blocks/dashboard9.tsx b/blocks/dashboard9.tsx
new file mode 100644
index 0000000..427430d
--- /dev/null
+++ b/blocks/dashboard9.tsx
@@ -0,0 +1,1714 @@
+"use client";
+
+import {
+  BarChart3,
+  Bell,
+  Box,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Download,
+  Globe,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  MessageSquare,
+  Minus,
+  MoreHorizontal,
+  Package,
+  RotateCcw,
+  Settings,
+  TrendingDown,
+  TrendingUp,
+  Truck,
+  User,
+  Users,
+  Wallet,
+} from "lucide-react";
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+  user?: UserData;
+};
+
+type RichMetricStatItem = {
+  title: string;
+  value: number;
+  trendValue: number;
+  footerDelta: number;
+  footerSubtextCount: number;
+};
+
+type OrderStatus = "Processing" | "Shipped" | "Delivered" | "Cancelled";
+
+type Order = {
+  id: string;
+  orderNumber: string;
+  customer: string;
+  total: number;
+  status: OrderStatus;
+};
+
+type FulfillmentItem = {
+  order: string;
+  shipped: Date;
+  progress: number;
+  segments: number[];
+};
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const numberFormatter = new Intl.NumberFormat("fa-IR");
+const trendPercentFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "percent",
+  maximumFractionDigits: 1,
+  signDisplay: "exceptZero",
+});
+const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+  notation: "compact",
+  maximumFractionDigits: 0,
+});
+const monthFormatter = new Intl.DateTimeFormat("fa-IR", { month: "short" });
+const dashboardRangeFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+const dashboardRangeStart = new Date(2025, 0, 1);
+const dashboardRangeEnd = new Date(2025, 0, 31);
+const dashboardDateRangeLabel =
+  typeof dashboardRangeFormatter.formatRange === "function"
+    ? dashboardRangeFormatter.formatRange(
+      dashboardRangeStart,
+      dashboardRangeEnd,
+    )
+    : `${dashboardRangeFormatter.format(
+      dashboardRangeStart,
+    )} – ${dashboardRangeFormatter.format(dashboardRangeEnd)}`;
+
+const shippedDateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+
+const orderStatusLabels: Record<OrderStatus, string> = {
+  Processing: "در حال پردازش",
+  Shipped: "ارسال‌شده",
+  Delivered: "تحویل‌شده",
+  Cancelled: "لغوشده",
+};
+
+const formatTrendValue = (trendValue: number) => {
+  return trendPercentFormatter.format(trendValue / 100);
+};
+
+const mixBase = "var(--background)";
+
+const palette = {
+  primary: "var(--primary)",
+  secondary: {
+    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
+  },
+  tertiary: {
+    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
+  },
+  quaternary: {
+    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
+    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
+  },
+};
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "فروشگاه آکمه",
+    title: "ری یو آی Store",
+    description: "فروشگاه آنلاین",
+  },
+  navGroups: [
+    {
+      title: "اصلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
+        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
+      ],
+    },
+    {
+      title: "کاتالوگ",
+      defaultOpen: true,
+      items: [
+        {
+          label: "محصولات",
+          icon: Box,
+          href: "#",
+          children: [
+            { label: "همه محصولات", icon: Package, href: "#" },
+            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
+            { label: "موجودی", icon: Package, href: "#" },
+          ],
+        },
+        { label: "ارسال", icon: Truck, href: "#" },
+      ],
+    },
+    {
+      title: "مشتریان",
+      defaultOpen: false,
+      items: [
+        { label: "همه مشتریان", icon: Users, href: "#" },
+        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
+      ],
+    },
+    {
+      title: "تحلیل‌ها",
+      defaultOpen: false,
+      items: [
+        { label: "نمای کلی", icon: Globe, href: "#" },
+        { label: "گزارش‌ها", icon: BarChart3, href: "#" },
+        { label: "امور مالی", icon: Wallet, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "تنظیمات",
+    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "john@acme.store",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+  },
+};
+
+const richMetricStats: RichMetricStatItem[] = [
+  {
+    title: "فروش حضوری",
+    value: 7820.75,
+    trendValue: 4.3,
+    footerDelta: 322.5,
+    footerSubtextCount: 5000,
+  },
+  {
+    title: "فروش آنلاین",
+    value: 985_937.45,
+    trendValue: 12.5,
+    footerDelta: 109_500,
+    footerSubtextCount: 21_000,
+  },
+  {
+    title: "عمده‌فروشی",
+    value: 124_650,
+    trendValue: 6.8,
+    footerDelta: 7_935,
+    footerSubtextCount: 890,
+  },
+];
+
+const monthLabel = (monthIndex: number) =>
+  monthFormatter.format(new Date(2025, monthIndex, 1));
+
+const salesPipelineData: Record<
+  string,
+  { week: string; month: string; orders: number; sales: number }[]
+> = {
+  q1: [
+    { week: "W1", month: monthLabel(0), orders: 220, sales: 5100 },
+    { week: "W2", month: monthLabel(0), orders: 480, sales: 11200 },
+    { week: "W3", month: monthLabel(0), orders: 390, sales: 9400 },
+    { week: "W4", month: monthLabel(0), orders: 150, sales: 3600 },
+    { week: "W5", month: monthLabel(1), orders: 310, sales: 7400 },
+    { week: "W6", month: monthLabel(1), orders: 540, sales: 13100 },
+    { week: "W7", month: monthLabel(1), orders: 460, sales: 10800 },
+    { week: "W8", month: monthLabel(1), orders: 200, sales: 4700 },
+    { week: "W9", month: monthLabel(2), orders: 130, sales: 3100 },
+    { week: "W10", month: monthLabel(2), orders: 420, sales: 10200 },
+    { week: "W11", month: monthLabel(2), orders: 510, sales: 12400 },
+    { week: "W12", month: monthLabel(2), orders: 350, sales: 8500 },
+  ],
+  q2: [
+    { week: "W1", month: monthLabel(3), orders: 410, sales: 9800 },
+    { week: "W2", month: monthLabel(3), orders: 280, sales: 6700 },
+    { week: "W3", month: monthLabel(3), orders: 120, sales: 2900 },
+    { week: "W4", month: monthLabel(3), orders: 350, sales: 8400 },
+    { week: "W5", month: monthLabel(4), orders: 520, sales: 12600 },
+    { week: "W6", month: monthLabel(4), orders: 470, sales: 11300 },
+    { week: "W7", month: monthLabel(4), orders: 190, sales: 4500 },
+    { week: "W8", month: monthLabel(4), orders: 100, sales: 2400 },
+    { week: "W9", month: monthLabel(5), orders: 330, sales: 7900 },
+    { week: "W10", month: monthLabel(5), orders: 490, sales: 11800 },
+    { week: "W11", month: monthLabel(5), orders: 540, sales: 13000 },
+    { week: "W12", month: monthLabel(5), orders: 260, sales: 6200 },
+  ],
+  q3: [
+    { week: "W1", month: monthLabel(6), orders: 180, sales: 4200 },
+    { week: "W2", month: monthLabel(6), orders: 520, sales: 12800 },
+    { week: "W3", month: monthLabel(6), orders: 480, sales: 11500 },
+    { week: "W4", month: monthLabel(6), orders: 120, sales: 2800 },
+    { week: "W5", month: monthLabel(7), orders: 90, sales: 2100 },
+    { week: "W6", month: monthLabel(7), orders: 450, sales: 10500 },
+    { week: "W7", month: monthLabel(7), orders: 510, sales: 12200 },
+    { week: "W8", month: monthLabel(7), orders: 480, sales: 11000 },
+    { week: "W9", month: monthLabel(8), orders: 200, sales: 4800 },
+    { week: "W10", month: monthLabel(8), orders: 150, sales: 3500 },
+    { week: "W11", month: monthLabel(8), orders: 380, sales: 9200 },
+    { week: "W12", month: monthLabel(8), orders: 420, sales: 10100 },
+  ],
+  q4: [
+    { week: "W1", month: monthLabel(9), orders: 300, sales: 7200 },
+    { week: "W2", month: monthLabel(9), orders: 160, sales: 3800 },
+    { week: "W3", month: monthLabel(9), orders: 440, sales: 10600 },
+    { week: "W4", month: monthLabel(9), orders: 530, sales: 12900 },
+    { week: "W5", month: monthLabel(10), orders: 380, sales: 9100 },
+    { week: "W6", month: monthLabel(10), orders: 140, sales: 3400 },
+    { week: "W7", month: monthLabel(10), orders: 250, sales: 6000 },
+    { week: "W8", month: monthLabel(10), orders: 500, sales: 12100 },
+    { week: "W9", month: monthLabel(11), orders: 550, sales: 13300 },
+    { week: "W10", month: monthLabel(11), orders: 470, sales: 11400 },
+    { week: "W11", month: monthLabel(11), orders: 210, sales: 5000 },
+    { week: "W12", month: monthLabel(11), orders: 340, sales: 8200 },
+  ],
+};
+
+const fullYearData = [
+  { monthIndex: 0, thisYear: 42000, prevYear: 38000 },
+  { monthIndex: 1, thisYear: 38000, prevYear: 45000 },
+  { monthIndex: 2, thisYear: 52000, prevYear: 41000 },
+  { monthIndex: 3, thisYear: 45000, prevYear: 48000 },
+  { monthIndex: 4, thisYear: 58000, prevYear: 44000 },
+  { monthIndex: 5, thisYear: 41000, prevYear: 52000 },
+  { monthIndex: 6, thisYear: 55000, prevYear: 47000 },
+  { monthIndex: 7, thisYear: 48000, prevYear: 53000 },
+  { monthIndex: 8, thisYear: 62000, prevYear: 49000 },
+  { monthIndex: 9, thisYear: 54000, prevYear: 58000 },
+  { monthIndex: 10, thisYear: 67000, prevYear: 52000 },
+  { monthIndex: 11, thisYear: 71000, prevYear: 61000 },
+].map(({ monthIndex, ...entry }) => ({
+  month: monthLabel(monthIndex),
+  ...entry,
+}));
+
+type TimePeriod = "6months" | "year";
+
+const periodLabels: Record<TimePeriod, string> = {
+  "6months": "۶ ماه اخیر",
+  year: "سال گذشته",
+};
+
+function getDataForPeriod(period: TimePeriod) {
+  if (period === "6months") {
+    return fullYearData.slice(0, 6);
+  }
+  return fullYearData;
+}
+
+const orderStatuses: OrderStatus[] = [
+  "Processing",
+  "Shipped",
+  "Delivered",
+  "Cancelled",
+];
+
+const statusStyles: Record<OrderStatus, string> = {
+  Processing:
+    "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/20",
+  Shipped:
+    "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20",
+  Delivered:
+    "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/20",
+  Cancelled:
+    "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20",
+};
+
+const orders: Order[] = [
+  {
+    id: "1",
+    orderNumber: "ORD-2024-001",
+    customer: "Sarah Johnson",
+    status: "Delivered",
+    total: 2499.0,
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-2024-002",
+    customer: "Michael Chen",
+    status: "Shipped",
+    total: 1348.0,
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-2024-003",
+    customer: "Emma Wilson",
+    status: "Processing",
+    total: 1198.0,
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-2024-004",
+    customer: "James Rodriguez",
+    status: "Delivered",
+    total: 799.0,
+  },
+  {
+    id: "5",
+    orderNumber: "ORD-2024-005",
+    customer: "Lisa Park",
+    status: "Cancelled",
+    total: 599.0,
+  },
+  {
+    id: "6",
+    orderNumber: "ORD-2024-006",
+    customer: "David Kim",
+    status: "Shipped",
+    total: 5498.0,
+  },
+  {
+    id: "7",
+    orderNumber: "ORD-2024-007",
+    customer: "Anna Martinez",
+    status: "Delivered",
+    total: 1199.0,
+  },
+  {
+    id: "8",
+    orderNumber: "ORD-2024-008",
+    customer: "Robert Taylor",
+    status: "Processing",
+    total: 1128.0,
+  },
+  {
+    id: "9",
+    orderNumber: "ORD-2024-009",
+    customer: "Jennifer Lee",
+    status: "Shipped",
+    total: 449.0,
+  },
+  {
+    id: "10",
+    orderNumber: "ORD-2024-010",
+    customer: "William Brown",
+    status: "Delivered",
+    total: 2199.0,
+  },
+  {
+    id: "11",
+    orderNumber: "ORD-2024-011",
+    customer: "Sophia Davis",
+    status: "Cancelled",
+    total: 349.0,
+  },
+  {
+    id: "12",
+    orderNumber: "ORD-2024-012",
+    customer: "Daniel Garcia",
+    status: "Processing",
+    total: 899.0,
+  },
+];
+
+const fulfillmentData: FulfillmentItem[] = [
+  {
+    order: "ORD-4821",
+    shipped: new Date(2025, 0, 27),
+    progress: 92,
+    segments: [
+      0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.5, 0.8, 0.9, 1.0, 0.6, 0.7, 0.8,
+      0.9, 1.0, 0.5, 0.7, 0.8, 0.9, 0.6, 1.0, 0.8, 0.7, 0.3, 0.2, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4819",
+    shipped: new Date(2025, 0, 26),
+    progress: 78,
+    segments: [
+      0.8, 0.6, 0.9, 0.7, 1.0, 0.5, 0.8, 0.9, 0.6, 0.7, 1.0, 0.8, 0.5, 0.9, 0.7,
+      0.6, 0.8, 1.0, 0.7, 0.5, 0.2, 0.1, 0.15, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+      0.1,
+    ],
+  },
+  {
+    order: "ORD-4815",
+    shipped: new Date(2025, 0, 25),
+    progress: 100,
+    segments: [
+      1.0, 0.9, 0.8, 1.0, 0.7, 0.9, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0,
+      0.6, 0.8, 0.9, 1.0, 0.7, 0.9, 0.8, 1.0, 0.6, 0.9, 0.7, 1.0, 0.8, 0.9, 1.0,
+    ],
+  },
+  {
+    order: "ORD-4812",
+    shipped: new Date(2025, 0, 24),
+    progress: 65,
+    segments: [
+      0.9, 1.0, 0.7, 0.8, 0.6, 0.9, 0.5, 0.8, 1.0, 0.7, 0.9, 0.6, 0.8, 0.5, 0.7,
+      1.0, 0.6, 0.9, 0.8, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4808",
+    shipped: new Date(2025, 0, 23),
+    progress: 43,
+    segments: [
+      0.8, 0.7, 1.0, 0.6, 0.9, 0.8, 0.5, 0.7, 1.0, 0.9, 0.6, 0.8, 0.7, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4805",
+    shipped: new Date(2025, 0, 22),
+    progress: 100,
+    segments: [
+      0.9, 0.8, 1.0, 0.7, 0.9, 0.6, 1.0, 0.8, 0.7, 0.9, 1.0, 0.8, 0.6, 0.9, 0.7,
+      1.0, 0.8, 0.9, 0.7, 1.0, 0.8, 0.9, 0.6, 1.0, 0.7, 0.8, 0.9, 1.0, 0.8, 0.9,
+    ],
+  },
+  {
+    order: "ORD-4801",
+    shipped: new Date(2025, 0, 21),
+    progress: 88,
+    segments: [
+      1.0, 0.8, 0.7, 0.9, 0.6, 1.0, 0.8, 0.5, 0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 0.7,
+      0.8, 1.0, 0.6, 0.5, 0.3, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4798",
+    shipped: new Date(2025, 0, 20),
+    progress: 55,
+    segments: [
+      0.7, 0.9, 1.0, 0.6, 0.8, 0.9, 0.7, 1.0, 0.5, 0.8, 0.6, 0.9, 0.1, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4794",
+    shipped: new Date(2025, 0, 19),
+    progress: 100,
+    segments: [
+      0.8, 1.0, 0.9, 0.7, 0.8, 1.0, 0.6, 0.9, 0.8, 1.0, 0.7, 0.9, 0.8, 1.0, 0.6,
+      0.9, 0.7, 1.0, 0.8, 0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0,
+    ],
+  },
+  {
+    order: "ORD-4790",
+    shipped: new Date(2025, 0, 18),
+    progress: 71,
+    segments: [
+      0.9, 0.6, 0.8, 1.0, 0.7, 0.9, 0.5, 0.8, 1.0, 0.6, 0.9, 0.7, 0.8, 0.5, 0.3,
+      0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4786",
+    shipped: new Date(2025, 0, 17),
+    progress: 35,
+    segments: [
+      1.0, 0.8, 0.9, 0.7, 0.6, 0.8, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+      0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
+    ],
+  },
+  {
+    order: "ORD-4782",
+    shipped: new Date(2025, 0, 16),
+    progress: 96,
+    segments: [
+      0.8, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0, 0.6, 0.8, 0.9, 1.0, 0.7, 0.9, 0.8, 1.0,
+      0.6, 0.9, 0.7, 1.0, 0.8, 0.9, 0.6, 1.0, 0.8, 0.7, 0.9, 1.0, 0.8, 0.3, 0.1,
+    ],
+  },
+];
+
+const ordersBarConfig = {
+  orders: { label: "سفارش‌ها", color: palette.primary },
+} satisfies ChartConfig;
+
+const salesBarConfig = {
+  sales: { label: "فروش", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const createHighlightBarShape = (fill: string) => (props: unknown) => {
+  const { x, y, width, height, index } = props as {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    index: number;
+  };
+  const isHighlight = index === 5;
+  return (
+    <rect
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      fill={fill}
+      opacity={isHighlight ? 1 : 0.45}
+      rx={4}
+      ry={4}
+    />
+  );
+};
+
+const revenueFlowChartConfig = {
+  thisYear: { label: "امسال", color: palette.primary },
+  prevYear: { label: "سال قبل", theme: palette.secondary },
+} satisfies ChartConfig;
+
+const tableHeadClass = "text-xs font-medium text-muted-foreground sm:text-sm";
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" tooltip={logo.title}>
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              width={24}
+              height={24}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible asChild defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" aria-hidden="true" />
+            <span>{item.label}</span>
+            <ChevronRight
+              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
+              aria-hidden="true"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" aria-hidden="true" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" aria-hidden="true" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
+          <SidebarLogo logo={sidebarData.logo} />
+          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const DashboardHeader = () => {
+  return (
+    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
+      <div className="flex flex-col gap-0.5">
+        <h1 className="text-base font-medium text-pretty">
+          نمای کلی داشبورد
+        </h1>
+        <p className="hidden text-xs text-muted-foreground sm:block">
+          خلاصه‌ای از خریدها، فروش‌ها و سایر شاخص‌ها
+        </p>
+      </div>
+
+      <div className="ms-auto flex items-center gap-2">
+        <span className="hidden text-xs text-muted-foreground lg:inline">
+          {dashboardDateRangeLabel}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-1.5 text-xs"
+          aria-label="همه پلتفرم‌ها"
+        >
+          <Globe className="size-3.5" aria-hidden="true" />
+          <span className="hidden sm:inline">همه پلتفرم‌ها</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-1.5 text-xs"
+          aria-label="همه محصولات"
+        >
+          <span className="hidden sm:inline">همه محصولات</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-1.5 text-xs"
+          aria-label="خروجی"
+        >
+          <Download className="size-3.5" aria-hidden="true" />
+          <span className="hidden sm:inline">خروجی</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8"
+          aria-label="اعلان‌ها"
+        >
+          <Bell className="size-4" aria-hidden="true" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8"
+          aria-label="راهنما"
+        >
+          <HelpCircle className="size-4" aria-hidden="true" />
+        </Button>
+      </div>
+    </header>
+  );
+};
+
+const AccountingStatsCards = () => {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {richMetricStats.map((stat) => {
+        const isPositive = stat.trendValue > 0;
+        const isNeutral = stat.trendValue === 0;
+
+        const Icon = isNeutral ? Minus : isPositive ? TrendingUp : TrendingDown;
+
+        const trendClass = isNeutral
+          ? "text-foreground bg-muted"
+          : isPositive
+            ? "text-success border-success/20 bg-success/10"
+            : "text-destructive border-destructive/20 bg-destructive/10";
+
+        const formattedTrend = formatTrendValue(stat.trendValue);
+        const deltaPrefix =
+          stat.footerDelta > 0 ? "+" : stat.footerDelta < 0 ? "-" : "";
+        const footerLabel = `${deltaPrefix}${currencyFormatter.format(
+          Math.abs(stat.footerDelta),
+        )} نسبت به ماه قبل`;
+        const footerSubtext = `بر اساس ${numberFormatter.format(
+          stat.footerSubtextCount,
+        )} سفارش`;
+
+        return (
+          <Card key={stat.title} className="@container/card shadow-none">
+            <CardHeader className="flex items-start justify-between gap-2">
+              <div>
+                <CardDescription className="font-medium">
+                  {stat.title}
+                </CardDescription>
+                <CardTitle className="text-xl font-bold @[600px]/card:text-xl @[800px]/card:text-2xll">
+                  {currencyFormatter.format(stat.value)}
+                </CardTitle>
+              </div>
+              <Badge
+                variant="outline"
+                className={cn("gap-1 px-1.5 py-0.5", trendClass)}
+              >
+                <Icon className="size-3" aria-hidden="true" />
+                {formattedTrend}
+              </Badge>
+            </CardHeader>
+
+            <CardFooter className="flex-col items-start gap-1 text-sm">
+              <div className="line-clamp-1 flex items-center gap-1.5 font-medium">
+                <span
+                  className={
+                    isNeutral
+                      ? ""
+                      : isPositive
+                        ? "text-success"
+                        : "text-destructive"
+                  }
+                >
+                  {footerLabel}
+                </span>
+                <Icon
+                  className={cn(
+                    "size-3.5",
+                    isNeutral
+                      ? "text-muted-foreground"
+                      : isPositive
+                        ? "text-success"
+                        : "text-destructive",
+                  )}
+                  aria-hidden="true"
+                />
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {footerSubtext}
+              </div>
+            </CardFooter>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};
+
+function PipelineTooltip({
+  active,
+  payload,
+  label,
+  valueFormatter,
+}: any & {
+  valueFormatter: (v: number) => string;
+}) {
+  if (!active || !payload?.length) return null;
+  const entry = payload[0];
+  return (
+    <div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
+      <p className="mb-1 text-xs font-medium text-foreground">{label}</p>
+      <p className="text-sm font-semibold text-foreground">
+        {valueFormatter(Number(entry.value))}
+      </p>
+    </div>
+  );
+}
+
+const SalesPipelineChart = () => {
+  const [searchParams, setSearchParams] = React.useState(
+    () =>
+      new URLSearchParams(
+        typeof window !== "undefined" ? window.location.search : "",
+      ),
+  );
+
+  const quarter = searchParams.get("quarter") ?? "q1";
+
+  const handleQuarterChange = (value: string) => {
+    const next = new URLSearchParams(searchParams);
+    next.set("quarter", value);
+    setSearchParams(next);
+    window.history.replaceState(null, "", `?${next.toString()}`);
+  };
+
+  const data = salesPipelineData[quarter] ?? salesPipelineData.q1;
+  const totalOrders = data.reduce((sum, d) => sum + d.orders, 0);
+  const totalSales = data.reduce((sum, d) => sum + d.sales, 0);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col rounded-xl border bg-card">
+      <div className="flex h-14 items-center justify-between border-b px-4 sm:px-5">
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 sm:size-8"
+            aria-label="قیف فروش"
+          >
+            <BarChart3
+              className="size-4 text-muted-foreground sm:size-[18px]"
+              aria-hidden="true"
+            />
+          </Button>
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            قیف فروش
+          </h2>
+        </div>
+
+        <Select value={quarter} onValueChange={handleQuarterChange}>
+          <SelectTrigger
+            className="h-7 w-[120px] text-xs"
+            aria-label="انتخاب سه‌ماهه"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="q1">سه‌ماهه ۱</SelectItem>
+            <SelectItem value="q2">سه‌ماهه ۲</SelectItem>
+            <SelectItem value="q3">سه‌ماهه ۳</SelectItem>
+            <SelectItem value="q4">سه‌ماهه ۴</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid flex-1 grid-cols-1 gap-4 p-4 sm:grid-cols-[1fr_auto_1fr] sm:p-5">
+        <div className="flex min-h-0 min-w-0 flex-col gap-3 overflow-hidden">
+          <div>
+            <p className="text-lg font-semibold tracking-tight">
+              {numberFormatter.format(totalOrders)}
+            </p>
+            <p className="text-[10px] tracking-wider text-muted-foreground uppercase">
+              مجموع سفارش‌ها
+            </p>
+          </div>
+          <div className="min-h-0 w-full min-w-0 flex-1">
+            <ChartContainer config={ordersBarConfig} className="h-full w-full">
+              <BarChart data={data}>
+                <CartesianGrid strokeDasharray="0" vertical={false} />
+                <XAxis
+                  dataKey="week"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10 }}
+                  dy={8}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10 }}
+                  dx={-5}
+                  width={40}
+                />
+                <Tooltip
+                  cursor={{ fillOpacity: 0.05 }}
+                  content={
+                    <PipelineTooltip
+                      valueFormatter={(v: number) => numberFormatter.format(v)}
+                    />
+                  }
+                />
+                <Bar
+                  dataKey="orders"
+                  radius={[4, 4, 0, 0]}
+                  fill="var(--color-orders)"
+                  shape={createHighlightBarShape("var(--color-orders)")}
+                />
+              </BarChart>
+            </ChartContainer>
+          </div>
+        </div>
+
+        <div className="hidden w-px self-stretch bg-border sm:block" />
+
+        <div className="flex min-h-0 min-w-0 flex-col gap-3 overflow-hidden">
+          <div>
+            <p className="text-lg font-semibold tracking-tight">
+              {compactCurrencyFormatter.format(totalSales)}
+            </p>
+            <p className="text-[10px] tracking-wider text-muted-foreground uppercase">
+              مجموع فروش
+            </p>
+          </div>
+          <div className="min-h-0 w-full min-w-0 flex-1">
+            <ChartContainer config={salesBarConfig} className="h-full w-full">
+              <BarChart data={data}>
+                <CartesianGrid strokeDasharray="0" vertical={false} />
+                <XAxis
+                  dataKey="week"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10 }}
+                  dy={8}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10 }}
+                  dx={-5}
+                  width={40}
+                />
+                <Tooltip
+                  cursor={{ fillOpacity: 0.05 }}
+                  content={
+                    <PipelineTooltip
+                      valueFormatter={(v: number) => currencyFormatter.format(v)}
+                    />
+                  }
+                />
+                <Bar
+                  dataKey="sales"
+                  radius={[4, 4, 0, 0]}
+                  fill="var(--color-sales)"
+                  shape={createHighlightBarShape("var(--color-sales)")}
+                />
+              </BarChart>
+            </ChartContainer>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+  colors,
+}: any & {
+  colors: { primary: string; secondary: string };
+}) {
+  if (!active || !payload?.length) return null;
+
+  const thisYear = payload.find((p: any) => p.dataKey === "thisYear")?.value || 0;
+  const prevYear = payload.find((p: any) => p.dataKey === "prevYear")?.value || 0;
+  const diff = Number(thisYear) - Number(prevYear);
+  const percentage = prevYear ? Math.round((diff / Number(prevYear)) * 100) : 0;
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
+      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
+        {label}, {currentYear}
+      </p>
+      <div className="space-y-1 sm:space-y-1.5">
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.primary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            امسال:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(thisYear))}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <div
+            className="size-2 rounded-full sm:size-2.5"
+            style={{ backgroundColor: colors.secondary }}
+          />
+          <span className="text-[10px] text-muted-foreground sm:text-sm">
+            سال قبل:
+          </span>
+          <span className="text-[10px] font-medium text-foreground sm:text-sm">
+            {currencyFormatter.format(Number(prevYear))}
+          </span>
+        </div>
+        <div className="mt-1 border-t border-border pt-1">
+          <span
+            className={cn(
+              "text-[10px] font-medium sm:text-xs",
+              diff >= 0 ? "text-emerald-500" : "text-red-500",
+            )}
+          >
+            {diff >= 0 ? "+" : ""}
+            {percentage.toLocaleString("fa-IR")}٪ نسبت به سال قبل
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const RevenueFlowChart = () => {
+  const [period, setPeriod] = React.useState<TimePeriod>("year");
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextPeriod = params.get("period");
+    if (nextPeriod === "6months" || nextPeriod === "year") {
+      setPeriod(nextPeriod);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (period !== "year") {
+      params.set("period", period);
+    } else {
+      params.delete("period");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [period]);
+
+  const chartData = getDataForPeriod(period);
+  const totalRevenue = chartData.reduce((acc, item) => acc + item.thisYear, 0);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:gap-6 sm:p-6">
+      <div className="flex flex-wrap items-center gap-2 sm:gap-4">
+        <div className="flex flex-1 flex-col gap-1">
+          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
+            {currencyFormatter.format(totalRevenue)}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            درآمد کل ({periodLabels[period]})
+          </p>
+        </div>
+        <div className="hidden items-center gap-3 sm:flex sm:gap-5">
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2.5 rounded-full sm:size-3"
+              style={{ backgroundColor: palette.primary }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              امسال
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div
+              className="size-2.5 rounded-full sm:size-3"
+              style={{ backgroundColor: palette.secondary.light }}
+            />
+            <span className="text-[10px] text-muted-foreground sm:text-xs">
+              سال قبل
+            </span>
+          </div>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7 sm:size-8"
+              aria-label="انتخاب بازه زمانی"
+            >
+              <MoreHorizontal className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>بازه زمانی</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {(Object.keys(periodLabels) as TimePeriod[]).map((key) => (
+              <DropdownMenuCheckboxItem
+                key={key}
+                checked={period === key}
+                onCheckedChange={() => setPeriod(key)}
+              >
+                {periodLabels[key]}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="h-[200px] w-full min-w-0 sm:h-[240px] lg:h-[280px]">
+        <ChartContainer
+          config={revenueFlowChartConfig}
+          className="h-full w-full"
+        >
+          <LineChart data={chartData}>
+            <CartesianGrid strokeDasharray="0" vertical={false} />
+            <XAxis
+              dataKey="month"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dy={8}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 10 }}
+              dx={-5}
+              tickFormatter={(value) => compactCurrencyFormatter.format(value)}
+              width={40}
+            />
+            <Tooltip
+              content={
+                <CustomTooltip
+                  colors={{
+                    primary: "var(--color-thisYear)",
+                    secondary: "var(--color-prevYear)",
+                  }}
+                />
+              }
+              cursor={{ strokeOpacity: 0.2 }}
+            />
+            <Line
+              type="linear"
+              dataKey="thisYear"
+              stroke="var(--color-thisYear)"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              dot={{ fill: "var(--color-thisYear)", strokeWidth: 0, r: 2 }}
+              activeDot={{ r: 3.5, fill: "var(--color-thisYear)" }}
+            />
+            <Line
+              type="linear"
+              dataKey="prevYear"
+              stroke="var(--color-prevYear)"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeOpacity={0.5}
+              dot={{
+                fill: "var(--color-prevYear)",
+                fillOpacity: 0.5,
+                strokeWidth: 0,
+                r: 2,
+              }}
+              activeDot={{
+                r: 3.5,
+                fill: "var(--color-prevYear)",
+                fillOpacity: 0.5,
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+};
+
+const RecentOrdersTable = () => {
+  const [statusFilter, setStatusFilter] = React.useState<OrderStatus | "all">(
+    "all",
+  );
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [isHydrated, setIsHydrated] = React.useState(false);
+  const pageSize = 6;
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const nextStatus = params.get("status");
+    if (
+      nextStatus &&
+      (nextStatus === "all" ||
+        orderStatuses.includes(nextStatus as OrderStatus))
+    ) {
+      setStatusFilter(nextStatus as OrderStatus | "all");
+    }
+    const nextPage = Number(params.get("page"));
+    if (!Number.isNaN(nextPage) && nextPage > 0) {
+      setCurrentPage(nextPage);
+    }
+    setIsHydrated(true);
+  }, []);
+
+  const filteredOrders = React.useMemo(() => {
+    if (statusFilter === "all") return orders;
+    return orders.filter((order) => order.status === statusFilter);
+  }, [statusFilter]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredOrders.length / pageSize));
+
+  const paginatedOrders = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredOrders.slice(startIndex, startIndex + pageSize);
+  }, [filteredOrders, currentPage, pageSize]);
+
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [statusFilter]);
+
+  React.useEffect(() => {
+    if (!isHydrated || typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (statusFilter !== "all") {
+      params.set("status", statusFilter);
+    } else {
+      params.delete("status");
+    }
+    if (currentPage > 1) {
+      params.set("page", String(currentPage));
+    } else {
+      params.delete("page");
+    }
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery
+      ? `${window.location.pathname}?${nextQuery}`
+      : window.location.pathname;
+    window.history.replaceState(null, "", nextUrl);
+  }, [statusFilter, currentPage, isHydrated]);
+
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  const startRow = filteredOrders.length ? (currentPage - 1) * pageSize + 1 : 0;
+  const endRow = Math.min(currentPage * pageSize, filteredOrders.length);
+
+  return (
+    <div className="rounded-xl border bg-card">
+      <div className="flex items-center justify-between gap-3 px-4 pt-4 sm:px-6">
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm font-medium text-pretty sm:text-base">
+            سفارش‌های اخیر
+          </h2>
+          <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
+            {filteredOrders.length.toLocaleString("fa-IR")}
+          </span>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1.5 sm:h-9 sm:gap-2"
+              aria-label="فیلتر وضعیت سفارش"
+            >
+              <span className="text-xs sm:text-sm">
+                {statusFilter === "all"
+                  ? "همه"
+                  : orderStatusLabels[statusFilter]}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-[180px]">
+            <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem
+              checked={statusFilter === "all"}
+              onCheckedChange={() => setStatusFilter("all")}
+            >
+              همه وضعیت‌ها
+            </DropdownMenuCheckboxItem>
+            {orderStatuses.map((status) => (
+              <DropdownMenuCheckboxItem
+                key={status}
+                checked={statusFilter === status}
+                onCheckedChange={() => setStatusFilter(status)}
+              >
+                {orderStatusLabels[status]}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="px-4 pt-3 pb-4 sm:px-6">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className={tableHeadClass}>مرجع سفارش</TableHead>
+              <TableHead className={tableHeadClass}>خریدار</TableHead>
+              <TableHead className={tableHeadClass}>مجموع</TableHead>
+              <TableHead className={tableHeadClass}>وضعیت</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedOrders.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="h-20 text-center text-sm text-muted-foreground"
+                >
+                  سفارشی یافت نشد.
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedOrders.map((order) => (
+                <TableRow key={order.id}>
+                  <TableCell className="text-xs font-medium text-muted-foreground sm:text-sm">
+                    {order.orderNumber}
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground sm:text-sm">
+                    {order.customer}
+                  </TableCell>
+                  <TableCell className="text-xs text-foreground tabular-nums sm:text-sm">
+                    {currencyFormatter.format(order.total)}
+                  </TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        "inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium sm:text-xs",
+                        statusStyles[order.status],
+                      )}
+                    >
+                      {orderStatusLabels[order.status]}
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between border-t px-4 py-3 text-[10px] text-muted-foreground sm:px-6 sm:text-xs">
+        <span>
+          {filteredOrders.length === 0
+            ? "۰"
+            : `${startRow.toLocaleString("fa-IR")}-${endRow.toLocaleString("fa-IR")}`}{" "}
+          از {filteredOrders.length.toLocaleString("fa-IR")}
+        </span>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="رفتن به صفحه قبل"
+          >
+            <ChevronLeft className="size-3.5 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            aria-label="رفتن به صفحه بعد"
+          >
+            <ChevronRight className="size-3.5 rtl:rotate-180" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const FulfillmentPanel = () => {
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border bg-card p-5">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-sm font-medium text-pretty">تکمیل سفارش</h2>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7"
+            aria-label="بروزرسانی"
+          >
+            <RotateCcw className="size-3.5" aria-hidden="true" />
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                aria-label="گزینه‌ها"
+              >
+                <MoreHorizontal className="size-3.5" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>خروجی جدول</DropdownMenuItem>
+              <DropdownMenuItem>مشاهده همه سفارش‌ها</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      <div>
+        <div className="flex items-center border-b pe-3 pb-2 text-[10px] text-muted-foreground">
+          <span className="w-20 shrink-0">سفارش</span>
+          <span className="flex-1">وضعیت</span>
+          <span className="w-8 shrink-0 text-end">تحویل٪</span>
+        </div>
+        <ScrollArea className="h-[280px]">
+          <div className="divide-y pe-3">
+            {fulfillmentData.map((row) => (
+              <div
+                key={row.order}
+                className="flex items-center gap-2 py-2.5 text-xs"
+              >
+                <span className="w-20 shrink-0 font-medium">{row.order}</span>
+                <div className="flex min-w-0 flex-1 items-center gap-px overflow-hidden">
+                  {row.segments.slice(0, 15).map((opacity, i) => {
+                    const filled = i < Math.round((row.progress / 100) * 15);
+                    return (
+                      <div
+                        key={i}
+                        className="h-2.5 w-2 shrink-0 rounded-[1px]"
+                        style={{
+                          backgroundColor: filled
+                            ? palette.primary
+                            : "var(--muted)",
+                          opacity: filled ? opacity : 0.2,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+                <span className="w-8 shrink-0 text-end font-medium">
+                  {row.progress.toLocaleString("fa-IR")}
+                </span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};
+
+const DashboardContent = () => {
+  return (
+    <div
+      id="dashboard-main"
+      tabIndex={-1}
+      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6"
+    >
+      <AccountingStatsCards />
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-[3fr_2fr]">
+        <SalesPipelineChart />
+        <RevenueFlowChart />
+      </div>
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-[2fr_1fr]">
+        <RecentOrdersTable />
+        <FulfillmentPanel />
+      </div>
+    </div>
+  );
+};
+
+const Dashboard9 = ({ className }: { className?: string }) => {
+  return (
+    <TooltipProvider>
+      <SidebarProvider
+        dir="rtl"
+        lang="fa"
+        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
+      >
+        <a
+          href="#dashboard-main"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
+        >
+          رفتن به محتوای اصلی
+        </a>
+        <AppSidebar />
+        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
+          <DashboardHeader />
+          <DashboardContent />
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+};
+
+export { Dashboard9 };
diff --git a/blocks/data-table1.tsx b/blocks/data-table1.tsx
new file mode 100644
index 0000000..5720c55
--- /dev/null
+++ b/blocks/data-table1.tsx
@@ -0,0 +1,357 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const { data, columns, getRowId, initialSorting = [] } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable1 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول داده پایه
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده‌ای ساده و تمیز با قابلیت مرتب‌سازی و طراحی واکنش‌گرا.
+              مناسب برای نمایش داده‌های ساختاریافته با حداقل استایل.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} className="px-0">
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table10.tsx b/blocks/data-table10.tsx
new file mode 100644
index 0000000..976774b
--- /dev/null
+++ b/blocks/data-table10.tsx
@@ -0,0 +1,704 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  Settings2,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialFilters = [],
+    initialGlobalFilter = "",
+    initialVisibility = {},
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(initialFilters);
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>(initialVisibility);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting, columnFilters, globalFilter, columnVisibility },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnVisibilityChange: setColumnVisibility,
+  });
+
+  return {
+    table,
+    columnFilters,
+    setColumnFilters,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    columnVisibility,
+    setColumnVisibility,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+  pageSizeOptions?: number[];
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  const relevantPageSizes = pageSizeOptions.filter(
+    (size) => size <= totalRows || size === pageSize,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 text-center text-sm text-muted-foreground sm:text-start">
+        <span className="font-medium">
+          {totalRows === 0 ? (
+            "نتیجه‌ای یافت نشد"
+          ) : (
+            <>
+              نمایش {formatNumber(startRow)} تا {formatNumber(endRow)} از{" "}
+              {formatNumber(totalRows)} ردیف
+            </>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">تعداد در هر صفحه</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+            disabled={totalRows === 0}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {relevantPageSizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {formatNumber(size)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="text-sm font-medium whitespace-nowrap">
+            صفحه {formatNumber(currentPage + 1)} از {formatNumber(pageCount)}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={currentPage === 0 || totalRows === 0}
+              aria-label="رفتن به صفحه اول"
+            >
+              <ChevronsLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="رفتن به صفحه قبلی"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="رفتن به صفحه بعدی"
+            >
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(pageCount - 1)}
+              disabled={currentPage === pageCount - 1 || totalRows === 0}
+              aria-label="رفتن به صفحه آخر"
+            >
+              <ChevronsRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface DataTableViewOptionsProps<TData> {
+  table: TableType<TData>;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  const columns = table.getAllColumns().filter((column) => column.getCanHide());
+
+  const hiddenCount = columns.filter((col) => !col.getIsVisible()).length;
+  const hasHiddenColumns = hiddenCount > 0;
+
+  const handleResetColumns = () => {
+    table.resetColumnVisibility();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 gap-2">
+          <Settings2 className="h-4 w-4" />
+          <span className="hidden sm:inline">نمایش</span>
+          {hasHiddenColumns && (
+            <Badge
+              variant="secondary"
+              className="ms-1 h-5 w-5 rounded-full p-0 text-xs"
+            >
+              {formatNumber(hiddenCount)}
+            </Badge>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[200px]">
+        <DropdownMenuLabel className="flex items-center justify-between">
+          <span>نمایش ستون‌ها</span>
+          {hasHiddenColumns && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleResetColumns}
+              className="h-auto p-1 text-xs"
+            >
+              بازنشانی
+            </Button>
+          )}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.length === 0 ? (
+          <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+            ستونی در دسترس نیست
+          </div>
+        ) : (
+          columns.map((column) => {
+            const label =
+              (column.columnDef.meta as { label?: string })?.label || column.id;
+
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {label}
+              </DropdownMenuCheckboxItem>
+            );
+          })
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface DataTableToolbarProps<TData> extends React.ComponentProps<"div"> {
+  table: TableType<TData>;
+  showViewOptions?: boolean;
+}
+
+export const DataTableToolbar = <TData,>({
+  table,
+  children,
+  className,
+  showViewOptions = true,
+  ...props
+}: DataTableToolbarProps<TData>) => {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-1 flex-wrap items-center gap-2">{children}</div>
+      {showViewOptions && <DataTableViewOptions table={table} />}
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-011",
+    item: "بوت روزمره",
+    type: "کفش",
+    stock: true,
+    sku: "CB-011",
+    price: 276.15,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-012",
+    item: "کفش پاشنه‌بلند",
+    type: "پوشاک",
+    stock: true,
+    sku: "HH-012",
+    price: 85.47,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-013",
+    item: "صندل ساحلی",
+    type: "کفش",
+    stock: true,
+    sku: "BS-013",
+    price: 41.25,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-014",
+    item: "گردنبند طلا",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "GN-014",
+    price: 201.47,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-015",
+    item: "اسپیکر بلوتوث",
+    type: "الکترونیک",
+    stock: true,
+    sku: "BS-015",
+    price: 297.37,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: true,
+    meta: {
+      label: "کد کالا",
+    },
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+    meta: {
+      label: "نام محصول",
+    },
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: true,
+    meta: {
+      label: "دسته‌بندی",
+    },
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: true,
+    meta: {
+      label: "وضعیت موجودی",
+    },
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: true,
+    meta: {
+      label: "قیمت",
+    },
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: true,
+    meta: {
+      label: "دسترس‌پذیری",
+    },
+  },
+];
+
+export const DataTable10 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const Toolbar = (
+    <DataTableToolbar table={table}>
+      <Input
+        placeholder="جستجو در همه ستون‌ها..."
+        value={(table.getState().globalFilter as string) ?? ""}
+        onChange={(event) => table.setGlobalFilter(event.target.value)}
+        className="h-8 w-[150px] lg:w-[250px]"
+      />
+    </DataTableToolbar>
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با ستون‌های قابل مخفی‌سازی
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با مرتب‌سازی، جستجوی سراسری، امکان مخفی کردن ستون‌ها و
+              کنترل‌های کامل صفحه‌بندی با طراحی واکنش‌گرا.
+            </p>
+          </div>
+          {Toolbar}
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} className="px-0">
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table11.tsx b/blocks/data-table11.tsx
new file mode 100644
index 0000000..d90a927
--- /dev/null
+++ b/blocks/data-table11.tsx
@@ -0,0 +1,1024 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+} from "@tanstack/react-table";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  Download,
+  Settings2,
+  Trash2,
+  X,
+} from "lucide-react";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  enableRowSelection?: boolean;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialFilters = [],
+    initialGlobalFilter = "",
+    initialVisibility = {},
+    initialSelection = {},
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(initialFilters);
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>(initialVisibility);
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      columnVisibility,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnVisibilityChange: setColumnVisibility,
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    columnFilters,
+    setColumnFilters,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    columnVisibility,
+    setColumnVisibility,
+    rowSelection,
+    setRowSelection,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+  pageSizeOptions?: number[];
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  const relevantPageSizes = pageSizeOptions.filter(
+    (size) => size <= totalRows || size === pageSize,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 text-center text-sm text-muted-foreground sm:text-start">
+        <span className="font-medium">
+          {totalRows === 0 ? (
+            "نتیجه‌ای یافت نشد"
+          ) : (
+            <>
+              نمایش {formatNumber(startRow)} تا {formatNumber(endRow)} از{" "}
+              {formatNumber(totalRows)} ردیف
+            </>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">تعداد در هر صفحه</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+            disabled={totalRows === 0}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {relevantPageSizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {formatNumber(size)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="text-sm font-medium whitespace-nowrap">
+            صفحه {formatNumber(currentPage + 1)} از {formatNumber(pageCount)}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={currentPage === 0 || totalRows === 0}
+              aria-label="رفتن به صفحه اول"
+            >
+              <ChevronsLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="رفتن به صفحه قبلی"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="رفتن به صفحه بعدی"
+            >
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(pageCount - 1)}
+              disabled={currentPage === pageCount - 1 || totalRows === 0}
+              aria-label="رفتن به صفحه آخر"
+            >
+              <ChevronsRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface DataTableViewOptionsProps<TData> {
+  table: TableType<TData>;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  const columns = table.getAllColumns().filter((column) => column.getCanHide());
+
+  const hiddenCount = columns.filter((col) => !col.getIsVisible()).length;
+  const hasHiddenColumns = hiddenCount > 0;
+
+  const handleResetColumns = () => {
+    table.resetColumnVisibility();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 gap-2">
+          <Settings2 className="h-4 w-4" />
+          <span className="hidden sm:inline">نمایش</span>
+          {hasHiddenColumns && (
+            <Badge
+              variant="secondary"
+              className="ms-1 h-5 w-5 rounded-full p-0 text-xs"
+            >
+              {formatNumber(hiddenCount)}
+            </Badge>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[200px]">
+        <DropdownMenuLabel className="flex items-center justify-between">
+          <span>نمایش ستون‌ها</span>
+          {hasHiddenColumns && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleResetColumns}
+              className="h-auto p-1 text-xs"
+            >
+              بازنشانی
+            </Button>
+          )}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.length === 0 ? (
+          <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+            ستونی در دسترس نیست
+          </div>
+        ) : (
+          columns.map((column) => {
+            const label =
+              (column.columnDef.meta as { label?: string })?.label || column.id;
+
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {label}
+              </DropdownMenuCheckboxItem>
+            );
+          })
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface DataTableActionBarProps<TData> extends React.ComponentProps<
+  typeof motion.div
+> {
+  table: TableType<TData>;
+  visible?: boolean;
+  container?: Element | DocumentFragment | null;
+  position?: "top" | "bottom"; // Add this prop
+}
+
+function DataTableActionBar<TData>({
+  table,
+  visible: visibleProp,
+  container: containerProp,
+  position = "bottom",
+  children,
+  className,
+  ...props
+}: DataTableActionBarProps<TData>) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+
+  React.useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false);
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [table]);
+
+  const container =
+    containerProp ?? (mounted ? globalThis.document?.body : null);
+
+  if (!container) return null;
+
+  const visible =
+    visibleProp ?? table.getFilteredSelectedRowModel().rows.length > 0;
+
+  const variants = {
+    top: {
+      position: "top-12",
+      animation: {
+        initial: { opacity: 0, y: -20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -20 },
+      },
+      extraClasses: "shadow-sm",
+    },
+    bottom: {
+      position: "bottom-6",
+      animation: {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 20 },
+      },
+      extraClasses: "shadow-sm",
+    },
+  };
+
+  const currentVariant = variants[position];
+
+  return ReactDOM.createPortal(
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          role="toolbar"
+          aria-orientation="horizontal"
+          initial={currentVariant.animation.initial}
+          animate={currentVariant.animation.animate}
+          exit={currentVariant.animation.exit}
+          transition={{ duration: 0.2, ease: "easeInOut" }}
+          className={cn(
+            "fixed inset-x-0 z-50 mx-auto flex w-fit flex-wrap items-center justify-center gap-2 rounded-lg border bg-background p-2 text-foreground",
+            currentVariant.position,
+            currentVariant.extraClasses,
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    container,
+  );
+}
+
+interface DataTableActionBarActionProps extends React.ComponentProps<
+  typeof Button
+> {
+  tooltip?: string;
+  isPending?: boolean;
+}
+
+function DataTableActionBarAction({
+  size = "sm",
+  tooltip,
+  isPending,
+  disabled,
+  className,
+  children,
+  ...props
+}: DataTableActionBarActionProps) {
+  const trigger = (
+    <Button
+      variant="secondary"
+      size={size}
+      className={cn(
+        "gap-2 border [&>svg]:size-3.5",
+        size === "icon" ? "size-7" : "h-7",
+        className,
+      )}
+      disabled={disabled || isPending}
+      {...props}
+    >
+      {isPending ? <Spinner /> : children}
+    </Button>
+  );
+
+  if (!tooltip) return trigger;
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+        <TooltipContent
+          sideOffset={6}
+          className="border bg-popover font-semibold text-popover-foreground [&>span]:hidden"
+        >
+          <p>{tooltip}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+interface DataTableActionBarSelectionProps<TData> {
+  table: TableType<TData>;
+}
+
+function DataTableActionBarSelection<TData>({
+  table,
+}: DataTableActionBarSelectionProps<TData>) {
+  const onClearSelection = React.useCallback(() => {
+    table.toggleAllRowsSelected(false);
+  }, [table]);
+
+  return (
+    <div className="flex h-7 items-center rounded-md border pe-1 ps-2.5">
+      <span className="text-xs whitespace-nowrap">
+        {formatNumber(table.getFilteredSelectedRowModel().rows.length)} مورد
+        انتخاب شده
+      </span>
+      <Separator
+        orientation="vertical"
+        className="me-1 ms-2 data-[orientation=vertical]:h-4"
+      />
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-5"
+              onClick={onClearSelection}
+            >
+              <X className="size-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent
+            sideOffset={10}
+            className="flex items-center gap-2 border bg-popover px-2 py-1 font-semibold text-popover-foreground [&>span]:hidden"
+          >
+            <p>پاک کردن انتخاب</p>
+            <kbd className="rounded border bg-background px-1.5 py-px font-mono text-[0.7rem] font-normal text-foreground shadow-xs select-none">
+              <abbr title="خروج" className="no-underline">
+                Esc
+              </abbr>
+            </kbd>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+}
+
+interface DataTableToolbarProps<TData> extends React.ComponentProps<"div"> {
+  table: TableType<TData>;
+  showViewOptions?: boolean;
+}
+
+export const DataTableToolbar = <TData,>({
+  table,
+  children,
+  className,
+  showViewOptions = true,
+  ...props
+}: DataTableToolbarProps<TData>) => {
+  return (
+    <div
+      className={cn(
+        "flex flex-row items-center justify-between gap-2 py-4",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-1 flex-wrap items-center gap-2">{children}</div>
+      <div>{showViewOptions && <DataTableViewOptions table={table} />}</div>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-011",
+    item: "بوت روزمره",
+    type: "کفش",
+    stock: true,
+    sku: "CB-011",
+    price: 276.15,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-012",
+    item: "کفش پاشنه‌بلند",
+    type: "پوشاک",
+    stock: true,
+    sku: "HH-012",
+    price: 85.47,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-013",
+    item: "صندل ساحلی",
+    type: "کفش",
+    stock: true,
+    sku: "BS-013",
+    price: 41.25,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-014",
+    item: "گردنبند طلا",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "GN-014",
+    price: 201.47,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-015",
+    item: "اسپیکر بلوتوث",
+    type: "الکترونیک",
+    stock: true,
+    sku: "BS-015",
+    price: 297.37,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: true,
+    meta: {
+      label: "کد کالا",
+    },
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+    meta: {
+      label: "نام محصول",
+    },
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: true,
+    meta: {
+      label: "دسته‌بندی",
+    },
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: true,
+    meta: {
+      label: "وضعیت موجودی",
+    },
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: true,
+    meta: {
+      label: "قیمت",
+    },
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: true,
+    meta: {
+      label: "دسترس‌پذیری",
+    },
+  },
+];
+
+const _actions = ["export", "delete"] as const;
+
+type Action = (typeof _actions)[number];
+
+interface DataTable11ActionBarProps {
+  table: TableType<z.infer<typeof schema>>;
+}
+
+export function DataTable11ActionBar({ table }: DataTable11ActionBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows;
+  const [isPending, startTransition] = React.useTransition();
+  const [currentAction, setCurrentAction] = React.useState<Action | null>(null);
+
+  const visible = rows.length > 0;
+
+  const getIsActionPending = React.useCallback(
+    (action: Action) => isPending && currentAction === action,
+    [isPending, currentAction],
+  );
+
+  const onProductExport = React.useCallback(() => {
+    setCurrentAction("export");
+    startTransition(async () => {
+      // Simulate export action - replace with actual export logic
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      toast.success("محصولات با موفقیت صادر شد");
+      table.toggleAllRowsSelected(false);
+    });
+  }, [table]);
+
+  const onProductDelete = React.useCallback(() => {
+    setCurrentAction("delete");
+    startTransition(async () => {
+      // Simulate delete action - replace with actual delete logic
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      toast.success("محصولات با موفقیت حذف شد");
+      table.toggleAllRowsSelected(false);
+    });
+  }, [table]);
+
+  return (
+    <DataTableActionBar table={table} visible={visible} position="top">
+      <DataTableActionBarSelection table={table} />
+      <Separator
+        orientation="vertical"
+        className="hidden data-[orientation=vertical]:h-5 sm:block"
+      />
+      <div className="flex items-center gap-2">
+        <DataTableActionBarAction
+          size="icon"
+          tooltip="صادر کردن محصولات"
+          isPending={getIsActionPending("export")}
+          onClick={onProductExport}
+        >
+          <Download />
+        </DataTableActionBarAction>
+
+        <DataTableActionBarAction
+          size="icon"
+          tooltip="حذف محصولات"
+          isPending={getIsActionPending("delete")}
+          onClick={onProductDelete}
+        >
+          <Trash2 />
+        </DataTableActionBarAction>
+      </div>
+    </DataTableActionBar>
+  );
+}
+
+export const DataTable11 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const hasSelectedRows = table.getFilteredSelectedRowModel().rows.length > 0;
+
+  const Toolbar = (
+    <DataTableToolbar table={table}>
+      <Input
+        placeholder="جستجو در همه ستون‌ها..."
+        value={(table.getState().globalFilter as string) ?? ""}
+        onChange={(event) => table.setGlobalFilter(event.target.value)}
+        className="h-8 w-full lg:w-[250px]"
+      />
+    </DataTableToolbar>
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با انتخاب ردیف و نوار عملیات
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با مرتب‌سازی، جستجوی سراسری، مخفی‌سازی ستون‌ها، انتخاب
+              چند ردیف و نوار عملیات شناور. شامل کنترل‌های کامل صفحه‌بندی با
+              طراحی واکنش‌گرا.
+            </p>
+          </div>
+          {Toolbar}
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+          {hasSelectedRows && <DataTable11ActionBar table={table} />}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table12.tsx b/blocks/data-table12.tsx
new file mode 100644
index 0000000..4479457
--- /dev/null
+++ b/blocks/data-table12.tsx
@@ -0,0 +1,1113 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  Check,
+  CheckCheckIcon,
+  CheckCircle,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  Clock,
+  Footprints,
+  LoaderIcon,
+  Package,
+  PackageIcon,
+  PieChart,
+  PlusCircle,
+  RefreshCcw,
+  Settings2,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  enableRowSelection?: boolean;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialFilters = [],
+    initialGlobalFilter = "",
+    initialVisibility = {},
+    initialSelection = {},
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(initialFilters);
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>(initialVisibility);
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      columnVisibility,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnVisibilityChange: setColumnVisibility,
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    columnFilters,
+    setColumnFilters,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    columnVisibility,
+    setColumnVisibility,
+    rowSelection,
+    setRowSelection,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+  pageSizeOptions?: number[];
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  const relevantPageSizes = pageSizeOptions.filter(
+    (size) => size <= totalRows || size === pageSize,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 text-center text-sm text-muted-foreground sm:text-start">
+        <span className="font-medium">
+          {totalRows === 0 ? (
+            "نتیجه‌ای یافت نشد"
+          ) : (
+            <>
+              نمایش {formatNumber(startRow)} تا {formatNumber(endRow)} از{" "}
+              {formatNumber(totalRows)} ردیف
+            </>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">تعداد در هر صفحه</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+            disabled={totalRows === 0}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {relevantPageSizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {formatNumber(size)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="text-sm font-medium whitespace-nowrap">
+            صفحه {formatNumber(currentPage + 1)} از {formatNumber(pageCount)}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={currentPage === 0 || totalRows === 0}
+              aria-label="رفتن به صفحه اول"
+            >
+              <ChevronsLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="رفتن به صفحه قبلی"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="رفتن به صفحه بعدی"
+            >
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(pageCount - 1)}
+              disabled={currentPage === pageCount - 1 || totalRows === 0}
+              aria-label="رفتن به صفحه آخر"
+            >
+              <ChevronsRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface DataTableViewOptionsProps<TData> {
+  table: TableType<TData>;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  const columns = table.getAllColumns().filter((column) => column.getCanHide());
+
+  const hiddenCount = columns.filter((col) => !col.getIsVisible()).length;
+  const hasHiddenColumns = hiddenCount > 0;
+
+  const handleResetColumns = () => {
+    table.resetColumnVisibility();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 gap-2">
+          <Settings2 className="h-4 w-4" />
+          <span className="hidden sm:inline">نمایش</span>
+          {hasHiddenColumns && (
+            <Badge
+              variant="secondary"
+              className="ms-1 h-5 w-5 rounded-full p-0 text-xs"
+            >
+              {formatNumber(hiddenCount)}
+            </Badge>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[200px]">
+        <DropdownMenuLabel className="flex items-center justify-between">
+          <span>نمایش ستون‌ها</span>
+          {hasHiddenColumns && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleResetColumns}
+              className="h-auto p-1 text-xs"
+            >
+              بازنشانی
+            </Button>
+          )}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.length === 0 ? (
+          <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+            ستونی در دسترس نیست
+          </div>
+        ) : (
+          columns.map((column) => {
+            const label =
+              (column.columnDef.meta as { label?: string })?.label || column.id;
+
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {label}
+              </DropdownMenuCheckboxItem>
+            );
+          })
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue() as string[]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircle />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {formatNumber(selectedValues.size)}
+              </Badge>
+              <div className="hidden gap-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {formatNumber(selectedValues.size)} مورد انتخاب شده
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>نتیجه‌ای یافت نشد.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined,
+                      );
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "flex size-4 items-center justify-center rounded-[4px] border",
+                        isSelected
+                          ? "border-primary bg-primary text-primary-foreground"
+                          : "border-input [&_svg]:invisible",
+                      )}
+                    >
+                      <Check className="size-3.5 text-primary-foreground" />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="size-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ms-auto flex size-4 items-center justify-center font-mono text-xs text-muted-foreground">
+                        {formatNumber(facets.get(option.value)!)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    پاک کردن فیلترها
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DataTableToolbarProps<TData> extends React.ComponentProps<"div"> {
+  table: TableType<TData>;
+  showViewOptions?: boolean;
+}
+
+export const DataTableToolbar = <TData,>({
+  table,
+  children,
+  className,
+  showViewOptions = true,
+  ...props
+}: DataTableToolbarProps<TData>) => {
+  return (
+    <div
+      className={cn(
+        "flex flex-row items-center justify-between gap-2 py-4",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-1 flex-wrap items-center gap-2">{children}</div>
+      <div className="mb-auto flex sm:mb-0 sm:items-center">
+        {showViewOptions && <DataTableViewOptions table={table} />}
+      </div>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  order_status: z.string(),
+  customer: z.string(),
+  payment_method: z.string(),
+  payment_status: z.string(),
+  items: z.number(),
+});
+
+const data = [
+  {
+    id: "#301456",
+    purchased: "کاپشن چرمی",
+    order_status: "آماده تحویل",
+    customer: "سارا احمدی",
+    payment_method: "****7321",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#789123",
+    purchased: "کفش اسپرت آبی",
+    order_status: "تحویل‌شده",
+    customer: "رضا محمدی",
+    payment_method: "****4509",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#654321",
+    purchased: "هودی قرمز",
+    order_status: "تحویل‌شده",
+    customer: "نیلوفر حسینی",
+    payment_method: "****9812",
+    payment_status: "در انتظار",
+    items: 4,
+  },
+  {
+    id: "#987654",
+    purchased: "عینک آفتابی مشکی",
+    order_status: "تحویل‌نشده",
+    customer: "داوود کریمی",
+    payment_method: "****6734",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#432187",
+    purchased: "کوله‌پشتی سبز",
+    order_status: "تحویل‌شده",
+    customer: "لیلا رحیمی",
+    payment_method: "****2901",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#567890",
+    purchased: "ساعت نقره‌ای",
+    order_status: "آماده تحویل",
+    customer: "امیر نوری",
+    payment_method: "****8456",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#234567",
+    purchased: "شال خاکستری",
+    order_status: "تحویل‌شده",
+    customer: "راحله موسوی",
+    payment_method: "****1234",
+    payment_status: "مسترد شده",
+    items: 3,
+  },
+  {
+    id: "#876543",
+    purchased: "پیراهن بنفش",
+    order_status: "تحویل‌نشده",
+    customer: "توماس علوی",
+    payment_method: "****5678",
+    payment_status: "مسترد جزئی",
+    items: 2,
+  },
+  {
+    id: "#345678",
+    purchased: "کلاه سفید",
+    order_status: "آماده تحویل",
+    customer: "آنا رحیمی",
+    payment_method: "****9012",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#456789",
+    purchased: "بوت قهوه‌ای",
+    order_status: "تحویل‌شده",
+    customer: "حامد سنگری",
+    payment_method: "****3456",
+    payment_status: "پرداخت‌شده",
+    items: 4,
+  },
+  {
+    id: "#678901",
+    purchased: "کیف دوشی زرد",
+    order_status: "تحویل‌شده",
+    customer: "سوفیا تهرانی",
+    payment_method: "****7890",
+    payment_status: "در انتظار",
+    items: 2,
+  },
+  {
+    id: "#890123",
+    purchased: "دستکش نارنجی",
+    order_status: "تحویل‌نشده",
+    customer: "هانیه کلارک",
+    payment_method: "****2345",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#123456",
+    purchased: "پلیور صورتی",
+    order_status: "آماده تحویل",
+    customer: "گلناز ایوانس",
+    payment_method: "****6789",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#543210",
+    purchased: "کمربند مشکی",
+    order_status: "تحویل‌شده",
+    customer: "دانیال میرزایی",
+    payment_method: "****1122",
+    payment_status: "مسترد شده",
+    items: 1,
+  },
+  {
+    id: "#765432",
+    purchased: "کاپشن فیروزه‌ای",
+    order_status: "تحویل‌نشده",
+    customer: "الهام سفید",
+    payment_method: "****5566",
+    payment_status: "مسترد جزئی",
+    items: 2,
+  },
+  {
+    id: "#987012",
+    purchased: "شلوارک سرمه‌ای",
+    order_status: "آماده تحویل",
+    customer: "ایمان خاکپور",
+    payment_method: "****9900",
+    payment_status: "در انتظار",
+    items: 5,
+  },
+  {
+    id: "#210987",
+    purchased: "گردنبند طلا",
+    order_status: "تحویل‌شده",
+    customer: "مریم اسکات",
+    payment_method: "****3344",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#432109",
+    purchased: "شلوار زیتونی",
+    order_status: "تحویل‌شده",
+    customer: "یاسین تپل",
+    payment_method: "****7788",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#6543210",
+    purchased: "کلاه قرمز",
+    order_status: "تحویل‌نشده",
+    customer: "کلوئه یونگ",
+    payment_method: "****1122",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#8765432",
+    purchased: "جین آبی",
+    order_status: "آماده تحویل",
+    customer: "نوح لوئیس",
+    payment_method: "****5566",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#109876",
+    purchased: "پیراهن سبز",
+    order_status: "تحویل‌شده",
+    customer: "آوا شاهی",
+    payment_method: "****9900",
+    payment_status: "مسترد شده",
+    items: 4,
+  },
+  {
+    id: "#321098",
+    purchased: "دامن بنفش",
+    order_status: "تحویل‌نشده",
+    customer: "لیام آدامز",
+    payment_method: "****3344",
+    payment_status: "مسترد جزئی",
+    items: 1,
+  },
+  {
+    id: "#5432109",
+    purchased: "کیف پول مشکی",
+    order_status: "آماده تحویل",
+    customer: "ایزابلا بکر",
+    payment_method: "****7788",
+    payment_status: "در انتظار",
+    items: 2,
+  },
+  {
+    id: "#7654321",
+    purchased: "شال زرد",
+    order_status: "تحویل‌شده",
+    customer: "مازیار سبز",
+    payment_method: "****1122",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#9876543",
+    purchased: "کفش سفید",
+    order_status: "تحویل‌شده",
+    customer: "الا مارتینز",
+    payment_method: "****5566",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+];
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const productTypes = [
+  {
+    value: "electronics",
+    label: "الکترونیک",
+    icon: Smartphone,
+  },
+  {
+    value: "accessories",
+    label: "لوازم جانبی",
+    icon: ShoppingBag,
+  },
+  {
+    value: "clothing",
+    label: "پوشاک",
+    icon: Shirt,
+  },
+  {
+    value: "footwear",
+    label: "کفش",
+    icon: Footprints,
+  },
+  {
+    value: "shoes",
+    label: "کفش ورزشی",
+    icon: PackageIcon,
+  },
+];
+
+export const orderStatuses: StatusOption[] = [
+  { label: "تحویل‌شده", value: "تحویل‌شده", icon: CheckCircle },
+  { label: "آماده تحویل", value: "آماده تحویل", icon: Package },
+  { label: "تحویل‌نشده", value: "تحویل‌نشده", icon: Clock },
+];
+
+export const paymentStatuses: StatusOption[] = [
+  { label: "پرداخت‌شده", value: "پرداخت‌شده", icon: CheckCheckIcon },
+  { label: "در انتظار", value: "در انتظار", icon: LoaderIcon },
+  { label: "مسترد شده", value: "مسترد شده", icon: RefreshCcw },
+  {
+    label: "مسترد جزئی",
+    value: "مسترد جزئی",
+    icon: PieChart,
+  },
+];
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+const paymentStatusLookup = createStatusLookup(paymentStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+
+export const getPaymentStatusMeta = (status: string) =>
+  paymentStatusLookup[status];
+
+export const getStatusVariant = (status: string) => {
+  switch (status) {
+    case "تحویل‌شده":
+      return "default";
+    case "آماده تحویل":
+      return "secondary";
+    case "تحویل‌نشده":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const getPaymentVariant = (status: string) => {
+  switch (status) {
+    case "پرداخت‌شده":
+      return "default";
+    case "در انتظار":
+      return "secondary";
+    case "مسترد شده":
+      return "outline";
+    case "مسترد جزئی":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "order",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[100px] font-mono">{row.original.id}</div>
+    ),
+    enableHiding: false,
+    meta: {
+      label: "سفارش",
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="خریداری‌شده" />
+    ),
+    cell: ({ row }) => {
+      const items = row.original.items;
+
+      return (
+        <div className="flex gap-2">
+          <div className="max-w-[500px] truncate font-medium">
+            {row.original.purchased}
+          </div>
+          {items && <Badge variant="outline">{formatNumber(items)}</Badge>}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      label: "خریداری‌شده",
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[150px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      label: "مشتری",
+    },
+  },
+  {
+    accessorKey: "order_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت سفارش" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.order_status;
+      const statusMeta = getOrderStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getStatusVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon && <StatusIcon className="size-3" />}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+    meta: {
+      label: "وضعیت سفارش",
+    },
+  },
+  {
+    accessorKey: "payment_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت پرداخت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.payment_status;
+      const statusMeta = getPaymentStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getPaymentVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon && <StatusIcon className="size-3" />}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+    meta: {
+      label: "وضعیت پرداخت",
+    },
+  },
+
+  {
+    accessorKey: "payment_method",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="روش پرداخت" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-mono text-sm">{row.original.payment_method}</div>
+    ),
+    enableSorting: false,
+    meta: {
+      label: "روش پرداخت",
+    },
+  },
+];
+
+export const DataTable12 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const Toolbar = (
+    <DataTableToolbar table={table}>
+      <Input
+        placeholder="جستجو در همه ستون‌ها..."
+        value={(table.getState().globalFilter as string) ?? ""}
+        onChange={(event) => table.setGlobalFilter(event.target.value)}
+        className="h-8 w-full lg:w-[250px]"
+      />
+      {table.getColumn("order_status") && (
+        <DataTableFacetedFilter
+          column={table.getColumn("order_status")}
+          title="وضعیت سفارش"
+          options={orderStatuses}
+        />
+      )}
+
+      {table.getColumn("payment_status") && (
+        <DataTableFacetedFilter
+          column={table.getColumn("payment_status")}
+          title="وضعیت پرداخت"
+          options={paymentStatuses}
+        />
+      )}
+    </DataTableToolbar>
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با فیلترهای دسته‌ای
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول سفارشات با مرتب‌سازی، جستجوی سراسری، ستون‌های قابل پنهان‌سازی،
+              فیلترهای دسته‌ای و کنترل‌های کامل صفحه‌بندی با طراحی واکنش‌گرا.
+            </p>
+          </div>
+          {Toolbar}
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table13.tsx b/blocks/data-table13.tsx
new file mode 100644
index 0000000..8d5822a
--- /dev/null
+++ b/blocks/data-table13.tsx
@@ -0,0 +1,955 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  RowSelectionState,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  CheckCheckIcon,
+  CheckCircle,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  Clock,
+  Footprints,
+  LoaderIcon,
+  Package,
+  PackageIcon,
+  PieChart,
+  RefreshCcw,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  enableRowSelection?: boolean;
+};
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialFilters = [],
+    initialGlobalFilter = "",
+    initialVisibility = {},
+    initialSelection = {},
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(initialFilters);
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>(initialVisibility);
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      columnVisibility,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnVisibilityChange: setColumnVisibility,
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    columnFilters,
+    setColumnFilters,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    columnVisibility,
+    setColumnVisibility,
+    rowSelection,
+    setRowSelection,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+  pageSizeOptions?: number[];
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  const relevantPageSizes = pageSizeOptions.filter(
+    (size) => size <= totalRows || size === pageSize,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 text-center text-sm text-muted-foreground sm:text-start">
+        <span className="font-medium">
+          {totalRows === 0 ? (
+            "نتیجه‌ای یافت نشد"
+          ) : (
+            <>
+              نمایش {formatNumber(startRow)} تا {formatNumber(endRow)} از{" "}
+              {formatNumber(totalRows)} ردیف
+            </>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">تعداد در هر صفحه</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+            disabled={totalRows === 0}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {relevantPageSizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {formatNumber(size)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="text-sm font-medium whitespace-nowrap">
+            صفحه {formatNumber(currentPage + 1)} از {formatNumber(pageCount)}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={currentPage === 0 || totalRows === 0}
+              aria-label="رفتن به صفحه اول"
+            >
+              <ChevronsLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="رفتن به صفحه قبلی"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="رفتن به صفحه بعدی"
+            >
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(pageCount - 1)}
+              disabled={currentPage === pageCount - 1 || totalRows === 0}
+              aria-label="رفتن به صفحه آخر"
+            >
+              <ChevronsRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface DataTableTabbarProps<TData> extends React.ComponentProps<"div"> {
+  _table: TableType<TData>;
+  search?: React.ReactNode;
+  filter?: React.ReactNode;
+}
+export function DataTableTabbar<TData>({
+  _table,
+  children,
+  search,
+  filter,
+  className,
+  ...props
+}: DataTableTabbarProps<TData>) {
+  return (
+    <div
+      className={cn("flex items-center justify-between py-4", className)}
+      {...props}
+    >
+      <div className="flex flex-1 items-center gap-2">{children}</div>
+      <div className="flex w-full items-center gap-2 sm:w-auto">
+        {search}
+        {filter}
+      </div>
+    </div>
+  );
+}
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  order_status: z.string(),
+  customer: z.string(),
+  payment_method: z.string(),
+  payment_status: z.string(),
+  items: z.number(),
+});
+
+const data = [
+  {
+    id: "#301456",
+    purchased: "کاپشن چرمی",
+    order_status: "آماده تحویل",
+    customer: "سارا احمدی",
+    payment_method: "****7321",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#789123",
+    purchased: "کفش اسپرت آبی",
+    order_status: "تحویل‌شده",
+    customer: "رضا محمدی",
+    payment_method: "****4509",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#654321",
+    purchased: "هودی قرمز",
+    order_status: "تحویل‌شده",
+    customer: "نیلوفر حسینی",
+    payment_method: "****9812",
+    payment_status: "در انتظار",
+    items: 4,
+  },
+  {
+    id: "#987654",
+    purchased: "عینک آفتابی مشکی",
+    order_status: "تحویل‌نشده",
+    customer: "داوود کریمی",
+    payment_method: "****6734",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#432187",
+    purchased: "کوله‌پشتی سبز",
+    order_status: "تحویل‌شده",
+    customer: "لیلا رحیمی",
+    payment_method: "****2901",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#567890",
+    purchased: "ساعت نقره‌ای",
+    order_status: "آماده تحویل",
+    customer: "امیر نوری",
+    payment_method: "****8456",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#234567",
+    purchased: "شال خاکستری",
+    order_status: "تحویل‌شده",
+    customer: "راحله موسوی",
+    payment_method: "****1234",
+    payment_status: "مسترد شده",
+    items: 3,
+  },
+  {
+    id: "#876543",
+    purchased: "پیراهن بنفش",
+    order_status: "تحویل‌نشده",
+    customer: "توماس علوی",
+    payment_method: "****5678",
+    payment_status: "مسترد جزئی",
+    items: 2,
+  },
+  {
+    id: "#345678",
+    purchased: "کلاه سفید",
+    order_status: "آماده تحویل",
+    customer: "آنا رحیمی",
+    payment_method: "****9012",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#456789",
+    purchased: "بوت قهوه‌ای",
+    order_status: "تحویل‌شده",
+    customer: "حامد سنگری",
+    payment_method: "****3456",
+    payment_status: "پرداخت‌شده",
+    items: 4,
+  },
+  {
+    id: "#678901",
+    purchased: "کیف دوشی زرد",
+    order_status: "تحویل‌شده",
+    customer: "سوفیا تهرانی",
+    payment_method: "****7890",
+    payment_status: "در انتظار",
+    items: 2,
+  },
+  {
+    id: "#890123",
+    purchased: "دستکش نارنجی",
+    order_status: "تحویل‌نشده",
+    customer: "هانیه کلارک",
+    payment_method: "****2345",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#123456",
+    purchased: "پلیور صورتی",
+    order_status: "آماده تحویل",
+    customer: "گلناز ایوانس",
+    payment_method: "****6789",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#543210",
+    purchased: "کمربند مشکی",
+    order_status: "تحویل‌شده",
+    customer: "دانیال میرزایی",
+    payment_method: "****1122",
+    payment_status: "مسترد شده",
+    items: 1,
+  },
+  {
+    id: "#765432",
+    purchased: "کاپشن فیروزه‌ای",
+    order_status: "تحویل‌نشده",
+    customer: "الهام سفید",
+    payment_method: "****5566",
+    payment_status: "مسترد جزئی",
+    items: 2,
+  },
+  {
+    id: "#987012",
+    purchased: "شلوارک سرمه‌ای",
+    order_status: "آماده تحویل",
+    customer: "ایمان خاکپور",
+    payment_method: "****9900",
+    payment_status: "در انتظار",
+    items: 5,
+  },
+  {
+    id: "#210987",
+    purchased: "گردنبند طلا",
+    order_status: "تحویل‌شده",
+    customer: "مریم اسکات",
+    payment_method: "****3344",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#432109",
+    purchased: "شلوار زیتونی",
+    order_status: "تحویل‌شده",
+    customer: "یاسین تپل",
+    payment_method: "****7788",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#6543210",
+    purchased: "کلاه قرمز",
+    order_status: "تحویل‌نشده",
+    customer: "کلوئه یونگ",
+    payment_method: "****1122",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#8765432",
+    purchased: "جین آبی",
+    order_status: "آماده تحویل",
+    customer: "نوح لوئیس",
+    payment_method: "****5566",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#109876",
+    purchased: "پیراهن سبز",
+    order_status: "تحویل‌شده",
+    customer: "آوا شاهی",
+    payment_method: "****9900",
+    payment_status: "مسترد شده",
+    items: 4,
+  },
+  {
+    id: "#321098",
+    purchased: "دامن بنفش",
+    order_status: "تحویل‌نشده",
+    customer: "لیام آدامز",
+    payment_method: "****3344",
+    payment_status: "مسترد جزئی",
+    items: 1,
+  },
+  {
+    id: "#5432109",
+    purchased: "کیف پول مشکی",
+    order_status: "آماده تحویل",
+    customer: "ایزابلا بکر",
+    payment_method: "****7788",
+    payment_status: "در انتظار",
+    items: 2,
+  },
+  {
+    id: "#7654321",
+    purchased: "شال زرد",
+    order_status: "تحویل‌شده",
+    customer: "مازیار سبز",
+    payment_method: "****1122",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#9876543",
+    purchased: "کفش سفید",
+    order_status: "تحویل‌شده",
+    customer: "الا مارتینز",
+    payment_method: "****5566",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+];
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const productTypes = [
+  {
+    value: "electronics",
+    label: "الکترونیک",
+    icon: Smartphone,
+  },
+  {
+    value: "accessories",
+    label: "لوازم جانبی",
+    icon: ShoppingBag,
+  },
+  {
+    value: "clothing",
+    label: "پوشاک",
+    icon: Shirt,
+  },
+  {
+    value: "footwear",
+    label: "کفش",
+    icon: Footprints,
+  },
+  {
+    value: "shoes",
+    label: "کفش ورزشی",
+    icon: PackageIcon,
+  },
+];
+
+export const orderStatuses: StatusOption[] = [
+  { label: "تحویل‌شده", value: "تحویل‌شده", icon: CheckCircle },
+  { label: "آماده تحویل", value: "آماده تحویل", icon: Package },
+  { label: "تحویل‌نشده", value: "تحویل‌نشده", icon: Clock },
+];
+
+export const paymentStatuses: StatusOption[] = [
+  { label: "پرداخت‌شده", value: "پرداخت‌شده", icon: CheckCheckIcon },
+  { label: "در انتظار", value: "در انتظار", icon: LoaderIcon },
+  { label: "مسترد شده", value: "مسترد شده", icon: RefreshCcw },
+  {
+    label: "مسترد جزئی",
+    value: "مسترد جزئی",
+    icon: PieChart,
+  },
+];
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+const paymentStatusLookup = createStatusLookup(paymentStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+
+export const getPaymentStatusMeta = (status: string) =>
+  paymentStatusLookup[status];
+
+export const getStatusVariant = (status: string) => {
+  switch (status) {
+    case "تحویل‌شده":
+      return "default";
+    case "آماده تحویل":
+      return "secondary";
+    case "تحویل‌نشده":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const getPaymentVariant = (status: string) => {
+  switch (status) {
+    case "پرداخت‌شده":
+      return "default";
+    case "در انتظار":
+      return "secondary";
+    case "مسترد شده":
+      return "outline";
+    case "مسترد جزئی":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+type OrderStatusTab = "all" | string;
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "order",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[100px] font-mono">{row.original.id}</div>
+    ),
+    enableHiding: false,
+    meta: {
+      label: "سفارش",
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="خریداری‌شده" />
+    ),
+    cell: ({ row }) => {
+      const items = row.original.items;
+
+      return (
+        <div className="flex gap-2">
+          <div className="max-w-[500px] truncate font-medium">
+            {row.original.purchased}
+          </div>
+          {items && (
+            <Badge variant="outline">{formatNumber(items)}</Badge>
+          )}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      label: "خریداری‌شده",
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[150px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      label: "مشتری",
+    },
+  },
+  {
+    accessorKey: "order_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت سفارش" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.order_status;
+      const statusMeta = getOrderStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getStatusVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon && <StatusIcon className="size-3" />}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+    meta: {
+      label: "وضعیت سفارش",
+    },
+  },
+  {
+    accessorKey: "payment_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت پرداخت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.payment_status;
+      const statusMeta = getPaymentStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getPaymentVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon && <StatusIcon className="size-3" />}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+    meta: {
+      label: "وضعیت پرداخت",
+    },
+  },
+
+  {
+    accessorKey: "payment_method",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="روش پرداخت" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-mono text-sm">{row.original.payment_method}</div>
+    ),
+    enableSorting: false,
+    meta: {
+      label: "روش پرداخت",
+    },
+  },
+];
+
+export const DataTable13 = ({ className }: { className?: string }) => {
+  const { table, setColumnFilters } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const orderStatusColumn = table.getColumn("order_status");
+
+  const [orderStatusTab, setOrderStatusTab] =
+    React.useState<OrderStatusTab>("all");
+
+  const orderStatusCounts = React.useMemo(
+    () => orderStatusColumn?.getFacetedUniqueValues(),
+    [orderStatusColumn],
+  );
+
+  const allOrdersCount = React.useMemo(() => {
+    if (!orderStatusCounts?.size) {
+      return table.getPreFilteredRowModel().rows.length;
+    }
+    return Array.from(orderStatusCounts.values()).reduce(
+      (acc, count) => acc + Number(count),
+      0,
+    );
+  }, [orderStatusCounts, table]);
+
+  // Single unified handler for status tab changes
+  const handleStatusTabChange = React.useCallback(
+    (value: string) => {
+      setOrderStatusTab(value);
+      setColumnFilters((prev) => {
+        const filtered = prev.filter((f) => f.id !== "order_status");
+        return value === "all"
+          ? filtered
+          : [...filtered, { id: "order_status", value: [value] }];
+      });
+    },
+    [setColumnFilters],
+  );
+
+  const Search = (
+    <Input
+      placeholder="جستجو در همه ستون‌ها..."
+      value={(table.getState().globalFilter as string) ?? ""}
+      onChange={(event) => table.setGlobalFilter(event.target.value)}
+      className="h-8 w-full lg:w-[224px]"
+    />
+  );
+
+  const Toolbar = (
+    <DataTableTabbar
+      _table={table}
+      search={Search}
+      className="flex-wrap gap-y-2"
+    >
+      {orderStatusColumn && (
+        <Tabs
+          value={orderStatusTab}
+          onValueChange={handleStatusTabChange}
+          className="w-full min-w-[260px] sm:w-auto"
+        >
+          <TabsList
+            className="flex w-full flex-wrap justify-start gap-1 group-data-horizontal/tabs:h-auto"
+            role="tablist"
+            aria-label="فیلتر سفارش‌ها بر اساس وضعیت"
+          >
+            <TabsTrigger value="all" className="w-fit flex-none gap-1.5">
+              <span>همه</span>
+              <Badge variant="secondary" className="rounded-sm px-1.5">
+                {formatNumber(allOrdersCount)}
+              </Badge>
+            </TabsTrigger>
+            {orderStatuses.map((status) => {
+              const StatusIcon = status.icon;
+              const count = orderStatusCounts?.get(status.value) ?? 0;
+              return (
+                <TabsTrigger
+                  key={status.value}
+                  value={status.value}
+                  className="w-fit flex-none gap-1.5"
+                >
+                  {StatusIcon && <StatusIcon className="size-3" />}
+                  <span className="hidden text-xs md:inline">
+                    {status.label}
+                  </span>
+                  <Badge variant="secondary" className="rounded-sm px-1.5">
+                    {formatNumber(count)}
+                  </Badge>
+                </TabsTrigger>
+              );
+            })}
+          </TabsList>
+        </Tabs>
+      )}
+    </DataTableTabbar>
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("w-full py-32 lg:w-auto", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با فیلترهای تب‌دار
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول سفارشات با مرتب‌سازی، جستجوی سراسری، فیلتر وضعیت از طریق
+              تب‌ها و کنترل‌های کامل صفحه‌بندی با طراحی واکنش‌گرا.
+            </p>
+          </div>
+          {Toolbar}
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table14.tsx b/blocks/data-table14.tsx
new file mode 100644
index 0000000..dc7d7f3
--- /dev/null
+++ b/blocks/data-table14.tsx
@@ -0,0 +1,1146 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  RowSelectionState,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  CheckCheckIcon,
+  CheckCircle,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  Clock,
+  Footprints,
+  ListFilterIcon,
+  LoaderIcon,
+  Package,
+  PackageIcon,
+  PieChart,
+  RefreshCcw,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  enableRowSelection?: boolean;
+};
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialFilters = [],
+    initialGlobalFilter = "",
+    initialVisibility = {},
+    initialSelection = {},
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(initialFilters);
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>(initialVisibility);
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      columnVisibility,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnVisibilityChange: setColumnVisibility,
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    columnFilters,
+    setColumnFilters,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    columnVisibility,
+    setColumnVisibility,
+    rowSelection,
+    setRowSelection,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+  pageSizeOptions?: number[];
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  const relevantPageSizes = pageSizeOptions.filter(
+    (size) => size <= totalRows || size === pageSize,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 text-center text-sm text-muted-foreground sm:text-start">
+        <span className="font-medium">
+          {totalRows === 0 ? (
+            "نتیجه‌ای یافت نشد"
+          ) : (
+            <>
+              نمایش {formatNumber(startRow)} تا {formatNumber(endRow)} از{" "}
+              {formatNumber(totalRows)} ردیف
+            </>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">تعداد در هر صفحه</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+            disabled={totalRows === 0}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {relevantPageSizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {formatNumber(size)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="text-sm font-medium whitespace-nowrap">
+            صفحه {formatNumber(currentPage + 1)} از {formatNumber(pageCount)}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={currentPage === 0 || totalRows === 0}
+              aria-label="رفتن به صفحه اول"
+            >
+              <ChevronsLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="رفتن به صفحه قبلی"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="رفتن به صفحه بعدی"
+            >
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(pageCount - 1)}
+              disabled={currentPage === pageCount - 1 || totalRows === 0}
+              aria-label="رفتن به صفحه آخر"
+            >
+              <ChevronsRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface DataTableButtonFilterOption {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+interface DataTableButtonFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: DataTableButtonFilterOption[];
+  align?: "start" | "center" | "end";
+}
+
+export function DataTableButtonFilter<TData, TValue>({
+  column,
+  title = "فیلتر",
+  options,
+  align = "start",
+}: DataTableButtonFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+
+  const facetCounts = React.useMemo(() => {
+    if (!facets || !column) return null;
+    const map = new Map<string, number>();
+    facets.forEach((count, key) => {
+      const numeric = Number(count);
+      const stringKey = String(key);
+      map.set(stringKey, numeric);
+      map.set(stringKey.toLowerCase(), numeric);
+    });
+    return map;
+  }, [facets, column]);
+
+  const filterValue = column?.getFilterValue();
+  const selectedValues = React.useMemo(() => {
+    if (filterValue == null) return new Set<string>();
+    const values = Array.isArray(filterValue)
+      ? filterValue.filter(Boolean).map(String)
+      : [String(filterValue)];
+    return new Set(values.map((value) => value.toLowerCase()));
+  }, [filterValue]);
+  const selectedCount = selectedValues.size;
+
+  const handleValueChange = React.useCallback(
+    (value: string, checked: boolean) => {
+      if (!column) return;
+      const currentValue = column.getFilterValue();
+      const raw = Array.isArray(currentValue)
+        ? currentValue.map(String)
+        : currentValue
+          ? [String(currentValue)]
+          : [];
+      const next = new Set(raw);
+
+      if (checked) {
+        next.add(value);
+      } else {
+        next.delete(value);
+      }
+
+      column.setFilterValue(next.size ? Array.from(next) : undefined);
+    },
+    [column],
+  );
+
+  const clearFilters = React.useCallback(() => {
+    if (!column) return;
+    column.setFilterValue(undefined);
+  }, [column]);
+
+  if (!column) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn("h-8 gap-2 px-3", selectedCount > 0 && "bg-primary/5")}
+        >
+          <ListFilterIcon className="size-4" />
+          <span className="text-sm font-medium">فیلتر</span>
+          {selectedCount > 0 && (
+            <Badge
+              variant="secondary"
+              className="rounded-sm px-1 text-[11px] font-normal"
+            >
+              {formatNumber(selectedCount)}
+            </Badge>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align={align}
+        className="w-auto min-w-36 space-y-3"
+        sideOffset={8}
+      >
+        <div className="space-y-3">
+          <p className="text-xs font-semibold text-muted-foreground/70">
+            {title}
+          </p>
+          <div className="space-y-2">
+            {options.map((option, index) => {
+              const checkboxId = `${column.id ?? "filter"}-${index}`;
+              const isSelected = selectedValues.has(option.value.toLowerCase());
+              const OptionIcon = option.icon;
+              const count =
+                facetCounts?.get(option.value) ??
+                facetCounts?.get(option.value.toLowerCase());
+
+              return (
+                <div
+                  key={option.value}
+                  className={cn(
+                    "flex items-center gap-3 rounded-lg px-2 py-1.5 transition-colors",
+                    isSelected ? "bg-muted" : "hover:bg-muted/70",
+                  )}
+                >
+                  <Checkbox
+                    id={checkboxId}
+                    checked={isSelected}
+                    onCheckedChange={(checked) =>
+                      handleValueChange(option.value, Boolean(checked))
+                    }
+                    aria-label={`انتخاب ${option.label}`}
+                  />
+                  <Label
+                    htmlFor={checkboxId}
+                    className="flex w-full items-center justify-between gap-3 text-sm"
+                  >
+                    <span className="flex items-center gap-2">
+                      {OptionIcon && (
+                        <OptionIcon className="size-3.5 text-muted-foreground" />
+                      )}
+                      {option.label}
+                    </span>
+                    {typeof count === "number" && !Number.isNaN(count) && (
+                      <span className="text-xs text-muted-foreground">
+                        {formatNumber(count)}
+                      </span>
+                    )}
+                  </Label>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          type="button"
+          className={cn(
+            "h-8 w-full justify-center rounded-md border-dashed bg-muted/40 text-xs font-semibold tracking-wide text-muted-foreground",
+            selectedCount === 0 &&
+            "border-muted/40 bg-muted/10 text-muted-foreground/70",
+          )}
+          onClick={clearFilters}
+          disabled={selectedCount === 0}
+        >
+          پاک کردن فیلترها
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DataTableTabbarProps<TData> extends React.ComponentProps<"div"> {
+  _table: TableType<TData>;
+  search?: React.ReactNode;
+  filter?: React.ReactNode;
+}
+export function DataTableTabbar<TData>({
+  _table,
+  children,
+  search,
+  filter,
+  className,
+  ...props
+}: DataTableTabbarProps<TData>) {
+  return (
+    <div
+      className={cn("flex items-center justify-between py-4", className)}
+      {...props}
+    >
+      <div className="flex flex-1 items-center gap-2">{children}</div>
+      <div className="flex w-full items-center gap-2 sm:w-auto">
+        {search}
+        {filter}
+      </div>
+    </div>
+  );
+}
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  order_status: z.string(),
+  customer: z.string(),
+  payment_method: z.string(),
+  payment_status: z.string(),
+  items: z.number(),
+});
+
+const data = [
+  {
+    id: "#301456",
+    purchased: "کاپشن چرمی",
+    order_status: "آماده تحویل",
+    customer: "سارا احمدی",
+    payment_method: "****7321",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#789123",
+    purchased: "کفش اسپرت آبی",
+    order_status: "تحویل‌شده",
+    customer: "رضا محمدی",
+    payment_method: "****4509",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#654321",
+    purchased: "هودی قرمز",
+    order_status: "تحویل‌شده",
+    customer: "نیلوفر حسینی",
+    payment_method: "****9812",
+    payment_status: "در انتظار",
+    items: 4,
+  },
+  {
+    id: "#987654",
+    purchased: "عینک آفتابی مشکی",
+    order_status: "تحویل‌نشده",
+    customer: "داوود کریمی",
+    payment_method: "****6734",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#432187",
+    purchased: "کوله‌پشتی سبز",
+    order_status: "تحویل‌شده",
+    customer: "لیلا رحیمی",
+    payment_method: "****2901",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#567890",
+    purchased: "ساعت نقره‌ای",
+    order_status: "آماده تحویل",
+    customer: "امیر نوری",
+    payment_method: "****8456",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#234567",
+    purchased: "شال خاکستری",
+    order_status: "تحویل‌شده",
+    customer: "راحله موسوی",
+    payment_method: "****1234",
+    payment_status: "مسترد شده",
+    items: 3,
+  },
+  {
+    id: "#876543",
+    purchased: "پیراهن بنفش",
+    order_status: "تحویل‌نشده",
+    customer: "توماس علوی",
+    payment_method: "****5678",
+    payment_status: "مسترد جزئی",
+    items: 2,
+  },
+  {
+    id: "#345678",
+    purchased: "کلاه سفید",
+    order_status: "آماده تحویل",
+    customer: "آنا رحیمی",
+    payment_method: "****9012",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#456789",
+    purchased: "بوت قهوه‌ای",
+    order_status: "تحویل‌شده",
+    customer: "حامد سنگری",
+    payment_method: "****3456",
+    payment_status: "پرداخت‌شده",
+    items: 4,
+  },
+  {
+    id: "#678901",
+    purchased: "کیف دوشی زرد",
+    order_status: "تحویل‌شده",
+    customer: "سوفیا تهرانی",
+    payment_method: "****7890",
+    payment_status: "در انتظار",
+    items: 2,
+  },
+  {
+    id: "#890123",
+    purchased: "دستکش نارنجی",
+    order_status: "تحویل‌نشده",
+    customer: "هانیه کلارک",
+    payment_method: "****2345",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#123456",
+    purchased: "پلیور صورتی",
+    order_status: "آماده تحویل",
+    customer: "گلناز ایوانس",
+    payment_method: "****6789",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#543210",
+    purchased: "کمربند مشکی",
+    order_status: "تحویل‌شده",
+    customer: "دانیال میرزایی",
+    payment_method: "****1122",
+    payment_status: "مسترد شده",
+    items: 1,
+  },
+  {
+    id: "#765432",
+    purchased: "کاپشن فیروزه‌ای",
+    order_status: "تحویل‌نشده",
+    customer: "الهام سفید",
+    payment_method: "****5566",
+    payment_status: "مسترد جزئی",
+    items: 2,
+  },
+  {
+    id: "#987012",
+    purchased: "شلوارک سرمه‌ای",
+    order_status: "آماده تحویل",
+    customer: "ایمان خاکپور",
+    payment_method: "****9900",
+    payment_status: "در انتظار",
+    items: 5,
+  },
+  {
+    id: "#210987",
+    purchased: "گردنبند طلا",
+    order_status: "تحویل‌شده",
+    customer: "مریم اسکات",
+    payment_method: "****3344",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#432109",
+    purchased: "شلوار زیتونی",
+    order_status: "تحویل‌شده",
+    customer: "یاسین تپل",
+    payment_method: "****7788",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+  {
+    id: "#6543210",
+    purchased: "کلاه قرمز",
+    order_status: "تحویل‌نشده",
+    customer: "کلوئه یونگ",
+    payment_method: "****1122",
+    payment_status: "در انتظار",
+    items: 1,
+  },
+  {
+    id: "#8765432",
+    purchased: "جین آبی",
+    order_status: "آماده تحویل",
+    customer: "نوح لوئیس",
+    payment_method: "****5566",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+  },
+  {
+    id: "#109876",
+    purchased: "پیراهن سبز",
+    order_status: "تحویل‌شده",
+    customer: "آوا شاهی",
+    payment_method: "****9900",
+    payment_status: "مسترد شده",
+    items: 4,
+  },
+  {
+    id: "#321098",
+    purchased: "دامن بنفش",
+    order_status: "تحویل‌نشده",
+    customer: "لیام آدامز",
+    payment_method: "****3344",
+    payment_status: "مسترد جزئی",
+    items: 1,
+  },
+  {
+    id: "#5432109",
+    purchased: "کیف پول مشکی",
+    order_status: "آماده تحویل",
+    customer: "ایزابلا بکر",
+    payment_method: "****7788",
+    payment_status: "در انتظار",
+    items: 2,
+  },
+  {
+    id: "#7654321",
+    purchased: "شال زرد",
+    order_status: "تحویل‌شده",
+    customer: "مازیار سبز",
+    payment_method: "****1122",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+  },
+  {
+    id: "#9876543",
+    purchased: "کفش سفید",
+    order_status: "تحویل‌شده",
+    customer: "الا مارتینز",
+    payment_method: "****5566",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+  },
+];
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const productTypes = [
+  {
+    value: "electronics",
+    label: "الکترونیک",
+    icon: Smartphone,
+  },
+  {
+    value: "accessories",
+    label: "لوازم جانبی",
+    icon: ShoppingBag,
+  },
+  {
+    value: "clothing",
+    label: "پوشاک",
+    icon: Shirt,
+  },
+  {
+    value: "footwear",
+    label: "کفش",
+    icon: Footprints,
+  },
+  {
+    value: "shoes",
+    label: "کفش ورزشی",
+    icon: PackageIcon,
+  },
+];
+
+export const orderStatuses: StatusOption[] = [
+  { label: "تحویل‌شده", value: "تحویل‌شده", icon: CheckCircle },
+  { label: "آماده تحویل", value: "آماده تحویل", icon: Package },
+  { label: "تحویل‌نشده", value: "تحویل‌نشده", icon: Clock },
+];
+
+export const paymentStatuses: StatusOption[] = [
+  { label: "پرداخت‌شده", value: "پرداخت‌شده", icon: CheckCheckIcon },
+  { label: "در انتظار", value: "در انتظار", icon: LoaderIcon },
+  { label: "مسترد شده", value: "مسترد شده", icon: RefreshCcw },
+  {
+    label: "مسترد جزئی",
+    value: "مسترد جزئی",
+    icon: PieChart,
+  },
+];
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+const paymentStatusLookup = createStatusLookup(paymentStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+
+export const getPaymentStatusMeta = (status: string) =>
+  paymentStatusLookup[status];
+
+export const getStatusVariant = (status: string) => {
+  switch (status) {
+    case "تحویل‌شده":
+      return "default";
+    case "آماده تحویل":
+      return "secondary";
+    case "تحویل‌نشده":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const getPaymentVariant = (status: string) => {
+  switch (status) {
+    case "پرداخت‌شده":
+      return "default";
+    case "در انتظار":
+      return "secondary";
+    case "مسترد شده":
+      return "outline";
+    case "مسترد جزئی":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+type OrderStatusTab = "all" | string;
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "order",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[100px] font-mono">{row.original.id}</div>
+    ),
+    enableHiding: false,
+    meta: {
+      label: "سفارش",
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="خریداری‌شده" />
+    ),
+    cell: ({ row }) => {
+      const items = row.original.items;
+
+      return (
+        <div className="flex gap-2">
+          <div className="max-w-[500px] truncate font-medium">
+            {row.original.purchased}
+          </div>
+          {items && (
+            <Badge variant="outline">{formatNumber(items)}</Badge>
+          )}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      label: "خریداری‌شده",
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[150px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      label: "مشتری",
+    },
+  },
+  {
+    accessorKey: "order_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت سفارش" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.order_status;
+      const statusMeta = getOrderStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getStatusVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon && <StatusIcon className="size-3" />}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id)).toLowerCase();
+      return value
+        .map(String)
+        .some((entry) => entry.toLowerCase() === rowValue);
+    },
+    enableSorting: false,
+    meta: {
+      label: "وضعیت سفارش",
+    },
+  },
+  {
+    accessorKey: "payment_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت پرداخت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.payment_status;
+      const statusMeta = getPaymentStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getPaymentVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon && <StatusIcon className="size-3" />}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id)).toLowerCase();
+      return value
+        .map(String)
+        .some((entry) => entry.toLowerCase() === rowValue);
+    },
+    enableSorting: false,
+    meta: {
+      label: "وضعیت پرداخت",
+    },
+  },
+
+  {
+    accessorKey: "payment_method",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="روش پرداخت" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-mono text-sm">{row.original.payment_method}</div>
+    ),
+    enableSorting: false,
+    meta: {
+      label: "روش پرداخت",
+    },
+  },
+];
+
+export const DataTable14 = ({ className }: { className?: string }) => {
+  const { table, setColumnFilters } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const orderStatusColumn = table.getColumn("order_status");
+  const paymentStatusColumn = table.getColumn("payment_status");
+
+  const [orderStatusTab, setOrderStatusTab] =
+    React.useState<OrderStatusTab>("all");
+
+  const orderStatusCounts = React.useMemo(
+    () => orderStatusColumn?.getFacetedUniqueValues(),
+    [orderStatusColumn],
+  );
+
+  const allOrdersCount = React.useMemo(() => {
+    if (!orderStatusCounts?.size) {
+      return table.getPreFilteredRowModel().rows.length;
+    }
+    return Array.from(orderStatusCounts.values()).reduce(
+      (acc, count) => acc + Number(count),
+      0,
+    );
+  }, [orderStatusCounts, table]);
+
+  // Single unified handler for status tab changes
+  const handleStatusTabChange = React.useCallback(
+    (value: string) => {
+      setOrderStatusTab(value);
+      setColumnFilters((prev) => {
+        const filtered = prev.filter((f) => f.id !== "order_status");
+        return value === "all"
+          ? filtered
+          : [...filtered, { id: "order_status", value: [value] }];
+      });
+    },
+    [setColumnFilters],
+  );
+
+  const PaymentStatusFilter = paymentStatusColumn ? (
+    <DataTableButtonFilter
+      column={paymentStatusColumn}
+      options={paymentStatuses}
+      title="وضعیت پرداخت"
+      align="start"
+    />
+  ) : null;
+
+  const Search = (
+    <Input
+      placeholder="جستجو در همه ستون‌ها..."
+      value={(table.getState().globalFilter as string) ?? ""}
+      onChange={(event) => table.setGlobalFilter(event.target.value)}
+      className="h-8 w-full lg:w-[250px]"
+    />
+  );
+
+  const Toolbar = (
+    <DataTableTabbar
+      _table={table}
+      search={Search}
+      filter={PaymentStatusFilter}
+      className="flex-wrap gap-y-2"
+    >
+      {orderStatusColumn && (
+        <Tabs
+          value={orderStatusTab}
+          onValueChange={handleStatusTabChange}
+          className="w-full min-w-[260px] sm:w-auto"
+        >
+          <TabsList
+            className="flex w-full flex-wrap justify-start gap-1 group-data-horizontal/tabs:h-auto"
+            role="tablist"
+            aria-label="فیلتر سفارش‌ها بر اساس وضعیت"
+          >
+            <TabsTrigger value="all" className="gap-2">
+              <span>همه</span>
+              <Badge variant="secondary" className="rounded-sm px-1.5">
+                {formatNumber(allOrdersCount)}
+              </Badge>
+            </TabsTrigger>
+            {orderStatuses.map((status) => {
+              const StatusIcon = status.icon;
+              const count = orderStatusCounts?.get(status.value) ?? 0;
+              return (
+                <TabsTrigger
+                  key={status.value}
+                  value={status.value}
+                  className="gap-2"
+                >
+                  {StatusIcon && <StatusIcon className="size-3" />}
+                  <span className="hidden text-xs md:inline">
+                    {status.label}
+                  </span>
+                  <Badge variant="secondary" className="rounded-sm px-1.5">
+                    {formatNumber(count)}
+                  </Badge>
+                </TabsTrigger>
+              );
+            })}
+          </TabsList>
+        </Tabs>
+      )}
+    </DataTableTabbar>
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("w-full py-32 lg:w-auto", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با فیلتر تب‌دار و دکمه فیلتر
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول سفارشات با مرتب‌سازی، جستجوی سراسری، فیلتر وضعیت از طریق
+              تب‌ها، فیلتر وضعیت پرداخت با دکمه و کنترل‌های کامل صفحه‌بندی.
+            </p>
+          </div>
+          {Toolbar}
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table15.tsx b/blocks/data-table15.tsx
new file mode 100644
index 0000000..2a961e4
--- /dev/null
+++ b/blocks/data-table15.tsx
@@ -0,0 +1,1057 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  ColumnPinningState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  CheckCheckIcon,
+  CheckCircle,
+  ChevronsUpDown,
+  Clock,
+  LoaderIcon,
+  MoreHorizontal,
+  Package,
+  PieChart,
+  RefreshCcw,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const DATA_URL =
+  "https://raw.githubusercontent.com/zerostaticthemes/ری یو آی-library-data/refs/heads/main/data/orders-ecommerce-sample.json";
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  initialColumnPinning?: ColumnPinningState;
+
+  enableRowSelection?: boolean;
+};
+
+type ColumnStyleMeta = {
+  align?: "left" | "center" | "right";
+  headerClassName?: string;
+  cellClassName?: string;
+  className?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+};
+
+type ColumnWithPinning = {
+  getIsPinned?: () => "left" | "right" | false;
+  getIsLastColumn?: (position: "left" | "right") => boolean;
+  getIsFirstColumn?: (position: "left" | "right") => boolean;
+  getStart?: (position: "left" | "right") => number;
+  getAfter?: (position: "left" | "right") => number;
+  getSize?: () => number;
+};
+
+function getColumnLayoutStyles(
+  meta: ColumnStyleMeta,
+  columnWithPinning: ColumnWithPinning,
+) {
+  const baseStyle: CSSProperties = {};
+  if (meta.width !== undefined) {
+    baseStyle.width =
+      typeof meta.width === "number" ? `${meta.width}px` : meta.width;
+  }
+  if (meta.minWidth !== undefined) {
+    baseStyle.minWidth =
+      typeof meta.minWidth === "number" ? `${meta.minWidth}px` : meta.minWidth;
+  }
+  if (meta.maxWidth !== undefined) {
+    baseStyle.maxWidth =
+      typeof meta.maxWidth === "number" ? `${meta.maxWidth}px` : meta.maxWidth;
+  }
+  if (
+    baseStyle.width === undefined &&
+    typeof columnWithPinning.getSize === "function"
+  ) {
+    const computedWidth = columnWithPinning.getSize();
+    if (typeof computedWidth === "number" && Number.isFinite(computedWidth)) {
+      baseStyle.width = `${computedWidth}px`;
+    }
+  }
+
+  const pinned = columnWithPinning.getIsPinned?.() ?? false;
+  const pinnedStyle: CSSProperties = {};
+  let lastPinned: "left" | "right" | undefined;
+
+  if (pinned) {
+    pinnedStyle.position = "sticky";
+    pinnedStyle.zIndex = 1;
+
+    if (pinned === "left") {
+      const start = columnWithPinning.getStart?.("left") ?? 0;
+      pinnedStyle.left = `${start}px`;
+      if (columnWithPinning.getIsLastColumn?.("left")) {
+        lastPinned = "left";
+      }
+    }
+
+    if (pinned === "right") {
+      const after = columnWithPinning.getAfter?.("right") ?? 0;
+      pinnedStyle.right = `${after}px`;
+      if (columnWithPinning.getIsFirstColumn?.("right")) {
+        lastPinned = "right";
+      }
+    }
+
+    const resolvedWidth =
+      baseStyle.width ??
+      (typeof columnWithPinning.getSize === "function"
+        ? columnWithPinning.getSize()
+        : undefined);
+    if (resolvedWidth !== undefined) {
+      pinnedStyle.width =
+        typeof resolvedWidth === "number"
+          ? `${resolvedWidth}px`
+          : resolvedWidth;
+    }
+  }
+
+  const alignClass =
+    meta.align === "center"
+      ? "text-center"
+      : meta.align === "right"
+        ? "text-end"
+        : meta.align === "left"
+          ? "text-start"
+          : undefined;
+
+  return { baseStyle, pinnedStyle, pinned, lastPinned, alignClass };
+}
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+
+    initialSelection = {},
+    enableRowSelection = true,
+    initialColumnPinning = {},
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+  const [columnPinning, setColumnPinning] =
+    React.useState<ColumnPinningState>(initialColumnPinning);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+
+      columnPinning,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    onColumnPinningChange: setColumnPinning,
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    rowSelection,
+    setRowSelection,
+    columnPinning,
+    setColumnPinning,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  schema: z.ZodSchema;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  schema,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = schema.parse(row.original) as TData;
+  const handleCopy = async () => {
+    const itemRecord = item as Record<string, unknown>;
+    const value = itemRecord[idField] ?? itemRecord.id;
+    if (!value) {
+      return;
+    }
+    if (
+      typeof navigator === "undefined" ||
+      !navigator.clipboard ||
+      typeof navigator.clipboard.writeText !== "function"
+    ) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(String(value));
+    } catch (error) {
+      console.error("Could not copy to clipboard", error);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem onClick={handleCopy}>
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  items: z.number(),
+  customer: z.string(),
+  customer_email: z.string(),
+  customer_segment: z.string(),
+  fulfillment_channel: z.string(),
+  shipping_service: z.string(),
+  warehouse: z.string(),
+  order_status: z.string(),
+  payment_status: z.string(),
+  payment_method: z.string(),
+  tracking_number: z.string(),
+  assigned_to: z.string(),
+  return_status: z.string(),
+  coupon_code: z.string().nullable(),
+  gift: z.boolean(),
+  notes: z.string(),
+});
+
+export type Order = z.infer<typeof schema>;
+
+const orderStatusMap: Record<string, string> = {
+  Fulfilled: "تحویل‌شده",
+  "Ready for pickup": "آماده تحویل",
+  Unfulfilled: "تحویل‌نشده",
+};
+
+const paymentStatusMap: Record<string, string> = {
+  Paid: "پرداخت‌شده",
+  Pending: "در انتظار",
+  Refunded: "مسترد شده",
+  "Partially refunded": "مسترد جزئی",
+};
+
+const customerSegmentMap: Record<string, string> = {
+  Wholesale: "عمده‌فروشی",
+  Marketplace: "بازارچه",
+  VIP: "ویژه",
+  Enterprise: "سازمانی",
+  Retail: "خرده‌فروشی",
+};
+
+const fulfillmentChannelMap: Record<string, string> = {
+  FBA: "FBA",
+  "3PL": "شخص ثالث",
+  Dropship: "دراپ‌شیپ",
+  "Merchant Fulfilled": "ارسال فروشنده",
+};
+
+const shippingServiceMap: Record<string, string> = {
+  "Expedited Air": "هوایی سریع",
+  "Prime 1-Day": "تحویل یک‌روزه",
+  "Prime 2-Day": "تحویل دو‌روزه",
+  "Standard Ground": "ارسال عادی",
+  "Same-Day Local": "تحویل همان‌روز",
+};
+
+const returnStatusMap: Record<string, string> = {
+  Authorized: "تأیید‌شده",
+  Requested: "درخواست‌شده",
+  Received: "دریافت‌شده",
+  None: "ندارد",
+};
+
+const purchasedMap: Record<string, string> = {
+  "Leather Jacket": "کاپشن چرمی",
+  "Blue Sneakers": "کفش اسپرت آبی",
+  "Red Hoodie": "هودی قرمز",
+  "Black Sunglasses": "عینک آفتابی مشکی",
+  "Green Backpack": "کوله‌پشتی سبز",
+  "Silver Watch": "ساعت نقره‌ای",
+  "Gray Scarf": "شال خاکستری",
+  "Purple Dress": "پیراهن بنفش",
+  "White Hat": "کلاه سفید",
+  "Brown Boots": "بوت قهوه‌ای",
+  "Yellow Tote Bag": "کیف دوشی زرد",
+  "Orange Gloves": "دستکش نارنجی",
+  "Pink Sweater": "پلیور صورتی",
+  "Black Belt": "کمربند مشکی",
+  "Teal Jacket": "کاپشن فیروزه‌ای",
+  "Navy Shorts": "شلوارک سرمه‌ای",
+  "Gold Necklace": "گردنبند طلا",
+  "Olive Pants": "شلوار زیتونی",
+  "Red Cap": "کلاه قرمز",
+  "Blue Jeans": "جین آبی",
+  "Green Shirt": "پیراهن سبز",
+  "Purple Skirt": "دامن بنفش",
+  "Black Wallet": "کیف پول مشکی",
+  "Yellow Scarf": "شال زرد",
+  "White Sneakers": "کفش سفید",
+};
+
+const customerMap: Record<string, string> = {
+  "#301456": "سارا احمدی",
+  "#789123": "رضا محمدی",
+  "#654321": "نیلوفر حسینی",
+  "#987654": "داوود کریمی",
+  "#432187": "لیلا رحیمی",
+  "#567890": "امیر نوری",
+  "#234567": "راحله موسوی",
+  "#876543": "توماس علوی",
+  "#345678": "آنا رحیمی",
+  "#456789": "حامد سنگری",
+  "#678901": "سوفیا تهرانی",
+  "#890123": "هانیه کلارک",
+  "#123456": "گلناز ایوانس",
+  "#543210": "دانیال میرزایی",
+  "#765432": "الهام سفید",
+  "#987012": "ایمان خاکپور",
+  "#210987": "مریم اسکات",
+  "#432109": "یاسین تپل",
+  "#6543210": "کلوئه یونگ",
+  "#8765432": "نوح لوئیس",
+  "#109876": "آوا شاهی",
+  "#321098": "لیام آدامز",
+  "#5432109": "ایزابلا بکر",
+  "#7654321": "مازیار سبز",
+  "#9876543": "الا مارتینز",
+};
+
+const assignedToMap: Record<string, string> = {
+  "Morgan Blythe": "مژگان بیت",
+  "Harper Singh": "هستی سینگ",
+  "Riley Nguyen": "رایلی نگوین",
+  "Taylor Chen": "تیلور چن",
+  "Jordan Patel": "جردن پاتل",
+};
+
+const mapValue = (map: Record<string, string>, value: string) =>
+  map[value] ?? value;
+
+export const localizeOrder = (order: Order): Order => {
+  const customer = customerMap[order.id] ?? order.customer;
+  const shippingService = mapValue(shippingServiceMap, order.shipping_service);
+
+  return {
+    ...order,
+    purchased: mapValue(purchasedMap, order.purchased),
+    customer,
+    customer_segment: mapValue(customerSegmentMap, order.customer_segment),
+    fulfillment_channel: mapValue(
+      fulfillmentChannelMap,
+      order.fulfillment_channel,
+    ),
+    shipping_service: shippingService,
+    order_status: mapValue(orderStatusMap, order.order_status),
+    payment_status: mapValue(paymentStatusMap, order.payment_status),
+    assigned_to: mapValue(assignedToMap, order.assigned_to),
+    return_status: mapValue(returnStatusMap, order.return_status),
+    notes: `${customer} ارسال ${shippingService} را ترجیح می‌دهد.`,
+  };
+};
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const orderStatuses: StatusOption[] = [
+  { label: "تحویل‌شده", value: "تحویل‌شده", icon: CheckCircle },
+  { label: "آماده تحویل", value: "آماده تحویل", icon: Package },
+  { label: "تحویل‌نشده", value: "تحویل‌نشده", icon: Clock },
+];
+
+export const paymentStatuses: StatusOption[] = [
+  { label: "پرداخت‌شده", value: "پرداخت‌شده", icon: CheckCheckIcon },
+  { label: "در انتظار", value: "در انتظار", icon: LoaderIcon },
+  { label: "مسترد شده", value: "مسترد شده", icon: RefreshCcw },
+  {
+    label: "مسترد جزئی",
+    value: "مسترد جزئی",
+    icon: PieChart,
+  },
+];
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+const paymentStatusLookup = createStatusLookup(paymentStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+
+export const getPaymentStatusMeta = (status: string) =>
+  paymentStatusLookup[status];
+
+export const getStatusVariant = (status: string) => {
+  switch (status) {
+    case "تحویل‌شده":
+      return "default";
+    case "آماده تحویل":
+      return "secondary";
+    case "تحویل‌نشده":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const getPaymentVariant = (status: string) => {
+  switch (status) {
+    case "پرداخت‌شده":
+      return "default";
+    case "در انتظار":
+      return "secondary";
+    case "مسترد شده":
+      return "outline";
+    case "مسترد جزئی":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[120px] font-mono">{row.original.id}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="خریداری‌شده" />
+    ),
+    cell: ({ row }) => {
+      const items = row.original.items;
+
+      return (
+        <div className="flex gap-2">
+          <div className="max-w-[320px] truncate font-medium">
+            {row.original.purchased}
+          </div>
+          {items ? (
+            <Badge variant="outline">{formatNumber(items)}</Badge>
+          ) : null}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[180px] truncate">{row.original.customer}</div>
+    ),
+  },
+  {
+    accessorKey: "customer_email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="ایمیل مشتری" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.customer_email}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "customer_segment",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="بخش" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">{row.original.customer_segment}</Badge>
+    ),
+    meta: { className: "whitespace-nowrap" },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "fulfillment_channel",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کانال ارسال" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.fulfillment_channel}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap" },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "shipping_service",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سرویس حمل" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.shipping_service}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "warehouse",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="انبار" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.warehouse}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap" },
+  },
+  {
+    accessorKey: "order_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت سفارش" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.order_status;
+      const statusMeta = getOrderStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getStatusVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon ? <StatusIcon className="size-3" /> : null}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+  },
+  {
+    accessorKey: "payment_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت پرداخت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.payment_status;
+      const statusMeta = getPaymentStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getPaymentVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon ? <StatusIcon className="size-3" /> : null}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+  },
+  {
+    accessorKey: "payment_method",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="روش پرداخت" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-mono text-xs sm:text-sm">
+        {row.original.payment_method}
+      </div>
+    ),
+  },
+
+  {
+    accessorKey: "items",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تعداد" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs tabular-nums sm:text-sm">
+        {formatNumber(row.original.items)}
+      </span>
+    ),
+    meta: { align: "center", className: "tabular-nums" },
+  },
+
+  {
+    accessorKey: "tracking_number",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="رهگیری" />
+    ),
+    cell: ({ row }) => (
+      <span className="font-mono text-xs sm:text-sm">
+        {row.original.tracking_number}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap" },
+  },
+  {
+    accessorKey: "assigned_to",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مسئول" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.assigned_to}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap" },
+  },
+  {
+    accessorKey: "return_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت مرجوعی" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">{row.original.return_status}</Badge>
+    ),
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+
+  {
+    accessorKey: "coupon_code",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد تخفیف" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs sm:text-sm">
+        {row.original.coupon_code ?? ""}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "gift",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="هدیه" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant={row.original.gift ? "secondary" : "outline"}>
+        {row.original.gift ? "بله" : "خیر"}
+      </Badge>
+    ),
+  },
+
+  {
+    accessorKey: "notes",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="یادداشت" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.notes}
+      </span>
+    ),
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <DataTableRowActions
+        row={row}
+        schema={schema}
+        itemName="سفارش"
+        idField="id"
+      />
+    ),
+  },
+];
+
+export const DataTable15 = ({ className }: { className?: string }) => {
+  const [data, setData] = React.useState<Order[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let active = true;
+
+    const fetchData = async () => {
+      setError(null);
+      setIsLoading(true);
+      try {
+        const res = await fetch(DATA_URL);
+        if (!res.ok) {
+          const message = `خطا در دریافت داده‌های سفارش (${res.status})`;
+          console.error(message, res.statusText);
+          if (active) setError(message);
+          return;
+        }
+        const json = await res.json();
+        const parsed = schema.array().parse(json).map(localizeOrder);
+        if (active) {
+          setData(parsed);
+        }
+      } catch (error) {
+        console.error("Error fetching orders data", error);
+        if (active) setError("خطا در دریافت داده‌های سفارش");
+      } finally {
+        if (active) setIsLoading(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    getRowId: (row) => row.id.toString(),
+    initialColumnPinning: { right: ["select"], left: ["actions"] },
+  });
+  const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1);
+  const visibleColumnIds = table
+    .getVisibleLeafColumns()
+    .map((column) => column.id);
+  const rightPinnedColumnIdSet = new Set(
+    table.getState().columnPinning.right ?? [],
+  );
+  const firstRightPinnedIndex = visibleColumnIds.findIndex((columnId) =>
+    rightPinnedColumnIdSet.has(columnId),
+  );
+  const rightStickyDividerTargetId =
+    firstRightPinnedIndex > 0
+      ? visibleColumnIds[firstRightPinnedIndex - 1]
+      : null;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با ستون‌های ثابت
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با ستون‌های انتخاب و عملیات ثابت هنگام اسکرول افقی.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-lg border-2">
+            <div className="relative">
+              {isLoading ? (
+                <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+                  <div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                    <span>در حال بارگذاری سفارش‌ها…</span>
+                  </div>
+                </div>
+              ) : null}
+              <Table className="border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:hover_td[data-pinned]]:bg-muted/50 [&_tr:not(:last-child)_td]:border-b [&_tr[data-state=selected]_td[data-pinned]]:bg-muted [&_tr[data-state=selected]:hover_td[data-pinned]]:bg-muted">
+                <TableHeader className="bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const meta =
+                          (header.column.columnDef.meta as ColumnStyleMeta) ??
+                          {};
+                        const columnWithPinning =
+                          header.column as unknown as ColumnWithPinning;
+                        const {
+                          baseStyle,
+                          pinnedStyle,
+                          pinned,
+                          lastPinned,
+                          alignClass,
+                        } = getColumnLayoutStyles(meta, columnWithPinning);
+
+                        return (
+                          <TableHead
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            style={{ ...baseStyle, ...pinnedStyle }}
+                            className={cn(
+                              "relative h-11 truncate border-e px-3 text-sm font-medium last:border-e-0 data-[pinned]:bg-muted/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=right][data-last-col=right]]:border-s",
+                              header.column.id === rightStickyDividerTargetId &&
+                              "!border-e-0",
+                              meta.className,
+                              meta.headerClassName,
+                              alignClass,
+                            )}
+                            data-pinned={pinned || undefined}
+                            data-last-col={lastPinned || undefined}
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {error ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-destructive"
+                      >
+                        {error}
+                      </TableCell>
+                    </TableRow>
+                  ) : table.getRowModel().rows?.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        data-state={row.getIsSelected() && "selected"}
+                        className="border-b last:border-b-0"
+                      >
+                        {row.getVisibleCells().map((cell) => {
+                          const meta =
+                            (cell.column.columnDef.meta as ColumnStyleMeta) ??
+                            {};
+                          const columnWithPinning =
+                            cell.column as unknown as ColumnWithPinning;
+                          const {
+                            baseStyle,
+                            pinnedStyle,
+                            pinned,
+                            lastPinned,
+                            alignClass,
+                          } = getColumnLayoutStyles(meta, columnWithPinning);
+
+                          return (
+                            <TableCell
+                              key={cell.id}
+                              style={{ ...baseStyle, ...pinnedStyle }}
+                              className={cn(
+                                "truncate border-e p-3 py-2 text-sm last:border-e-0 data-[pinned]:bg-background/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=right][data-last-col=right]]:border-s",
+                                cell.column.id === rightStickyDividerTargetId &&
+                                "!border-e-0",
+                                meta.className,
+                                meta.cellClassName,
+                                alignClass,
+                              )}
+                              data-pinned={pinned || undefined}
+                              data-last-col={lastPinned || undefined}
+                            >
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext(),
+                              )}
+                            </TableCell>
+                          );
+                        })}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        نتیجه‌ای یافت نشد
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table16.tsx b/blocks/data-table16.tsx
new file mode 100644
index 0000000..cb5ec31
--- /dev/null
+++ b/blocks/data-table16.tsx
@@ -0,0 +1,972 @@
+"use client";
+
+import type {
+  Column,
+  ColumnDef,
+  Row,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  Calendar,
+  CheckCheckIcon,
+  CheckCircle,
+  ChevronLeft,
+  ChevronsUpDown,
+  Clock,
+  LoaderIcon,
+  MapPin,
+  MoreHorizontal,
+  Package,
+  PieChart,
+  RefreshCcw,
+  User,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialSelection?: RowSelectionState;
+  enableRowSelection?: boolean;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialGlobalFilter = "",
+    initialSelection = {},
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      globalFilter,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    rowSelection,
+    setRowSelection,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  schema: z.ZodSchema;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  schema,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = schema.parse(row.original) as TData;
+  const itemRecord = item as Record<string, unknown>;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem
+          onClick={() =>
+            navigator.clipboard.writeText(
+              String(itemRecord[idField] || itemRecord.id),
+            )
+          }
+        >
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+// Customer details schema
+const CustomerSchema = z.object({
+  name: z.string(),
+  email: z.string(),
+  segment: z.string(),
+});
+
+// Shipping details schema
+const ShippingSchema = z.object({
+  service: z.string(),
+  fulfillment_channel: z.string(),
+  warehouse: z.string(),
+  delivery_eta: z.string(),
+  tracking_number: z.string(),
+  assigned_to: z.string(),
+});
+
+// Order details schema
+const OrderDetailsSchema = z.object({
+  payment_method: z.string(),
+  items: z.number(),
+  coupon_code: z.string().nullable(),
+  gift: z.boolean(),
+  return_status: z.string(),
+  notes: z.string(),
+});
+
+export const Orderschema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  order_status: z.string(),
+  payment_status: z.string(),
+  order_total: z.number(),
+  currency: z.string(),
+  priority: z.string(),
+  order_date: z.string(),
+  last_updated: z.string(),
+  risk_level: z.string(),
+  customer: CustomerSchema,
+  shipping: ShippingSchema,
+  orderDetails: OrderDetailsSchema,
+});
+
+type Order = z.infer<typeof Orderschema>;
+
+export const data = [
+  {
+    id: "#301456",
+    purchased: "کاپشن چرمی",
+    order_status: "آماده تحویل",
+    customer: "سارا احمدی",
+    payment_method: "****7321",
+    payment_status: "پرداخت‌شده",
+    items: 3,
+    order_date: "2025-10-24T08:28:33.060Z",
+    delivery_eta: "2025-10-31T08:28:33.060Z",
+    fulfillment_channel: "FBA",
+    shipping_service: "هوایی سریع",
+    warehouse: "ORD-4",
+    order_total: 243.4,
+    currency: "IRR",
+    customer_email: "sarah.johnson@example.com",
+    customer_segment: "عمده‌فروشی",
+    priority: "کم",
+    coupon_code: "WELCOME10",
+    gift: false,
+    return_status: "تأیید‌شده",
+    assigned_to: "مژگان بیت",
+    risk_level: "کم",
+    tracking_number: "TRK5817960062",
+    last_updated: "2025-10-24T10:28:33.060Z",
+    notes: "سارا احمدی ارسال هوایی سریع را ترجیح می‌دهد.",
+  },
+  {
+    id: "#789123",
+    purchased: "کفش اسپرت آبی",
+    order_status: "تحویل‌شده",
+    customer: "رضا محمدی",
+    payment_method: "****4509",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+    order_date: "2025-10-22T20:28:33.060Z",
+    delivery_eta: "2025-10-25T20:28:33.060Z",
+    fulfillment_channel: "شخص ثالث",
+    shipping_service: "تحویل یک‌روزه",
+    warehouse: "DFW-2",
+    order_total: 119.96,
+    currency: "IRR",
+    customer_email: "michael.brown@example.com",
+    customer_segment: "بازارچه",
+    priority: "عادی",
+    coupon_code: "VIPONLY",
+    gift: false,
+    return_status: "تأیید‌شده",
+    assigned_to: "هستی سینگ",
+    risk_level: "کم",
+    tracking_number: "TRK3189925655",
+    last_updated: "2025-10-22T22:28:33.060Z",
+    notes: "رضا محمدی ارسال تحویل یک‌روزه را ترجیح می‌دهد.",
+  },
+  {
+    id: "#654321",
+    purchased: "هودی قرمز",
+    order_status: "تحویل‌شده",
+    customer: "نیلوفر حسینی",
+    payment_method: "****9812",
+    payment_status: "در انتظار",
+    items: 4,
+    order_date: "2025-10-21T08:28:33.060Z",
+    delivery_eta: "2025-10-28T08:28:33.060Z",
+    fulfillment_channel: "FBA",
+    shipping_service: "هوایی سریع",
+    warehouse: "ATL-1",
+    order_total: 354.63,
+    currency: "IRR",
+    customer_email: "emily.davis@example.com",
+    customer_segment: "ویژه",
+    priority: "فوری",
+    coupon_code: "VIPONLY",
+    gift: false,
+    return_status: "درخواست‌شده",
+    assigned_to: "هستی سینگ",
+    risk_level: "متوسط",
+    tracking_number: "TRK2861732425",
+    last_updated: "2025-10-21T10:28:33.060Z",
+    notes: "نیلوفر حسینی ارسال هوایی سریع را ترجیح می‌دهد.",
+  },
+  {
+    id: "#987654",
+    purchased: "عینک آفتابی مشکی",
+    order_status: "تحویل‌نشده",
+    customer: "داوود کریمی",
+    payment_method: "****6734",
+    payment_status: "در انتظار",
+    items: 1,
+    order_date: "2025-10-19T20:28:33.060Z",
+    delivery_eta: "2025-10-22T20:28:33.060Z",
+    fulfillment_channel: "شخص ثالث",
+    shipping_service: "تحویل یک‌روزه",
+    warehouse: "LAX-5",
+    order_total: 119.73,
+    currency: "IRR",
+    customer_email: "david.lee@example.com",
+    customer_segment: "بازارچه",
+    priority: "کم",
+    coupon_code: "WELCOME10",
+    gift: false,
+    return_status: "دریافت‌شده",
+    assigned_to: "رایلی نگوین",
+    risk_level: "کم",
+    tracking_number: "TRK5254503688",
+    last_updated: "2025-10-19T22:28:33.060Z",
+    notes: "داوود کریمی ارسال تحویل یک‌روزه را ترجیح می‌دهد.",
+  },
+  {
+    id: "#432187",
+    purchased: "کوله‌پشتی سبز",
+    order_status: "تحویل‌شده",
+    customer: "لیلا رحیمی",
+    payment_method: "****2901",
+    payment_status: "پرداخت‌شده",
+    items: 2,
+    order_date: "2025-10-18T08:28:33.060Z",
+    delivery_eta: "2025-10-23T08:28:33.060Z",
+    fulfillment_channel: "دراپ‌شیپ",
+    shipping_service: "تحویل دو‌روزه",
+    warehouse: "ATL-1",
+    order_total: 359.28,
+    currency: "IRR",
+    customer_email: "lisa.wang@example.com",
+    customer_segment: "سازمانی",
+    priority: "بالا",
+    coupon_code: "WELCOME10",
+    gift: false,
+    return_status: "تأیید‌شده",
+    assigned_to: "هستی سینگ",
+    risk_level: "کم",
+    tracking_number: "TRK2835974731",
+    last_updated: "2025-10-18T10:28:33.060Z",
+    notes: "لیلا رحیمی ارسال تحویل دو‌روزه را ترجیح می‌دهد.",
+  },
+  {
+    id: "#567890",
+    purchased: "ساعت نقره‌ای",
+    order_status: "آماده تحویل",
+    customer: "امیر نوری",
+    payment_method: "****8456",
+    payment_status: "در انتظار",
+    items: 1,
+    order_date: "2025-10-16T20:28:33.060Z",
+    delivery_eta: "2025-10-22T20:28:33.060Z",
+    fulfillment_channel: "دراپ‌شیپ",
+    shipping_service: "ارسال عادی",
+    warehouse: "ATL-1",
+    order_total: 381.57,
+    currency: "IRR",
+    customer_email: "james.carter@example.com",
+    customer_segment: "سازمانی",
+    priority: "کم",
+    coupon_code: "VIPONLY",
+    gift: false,
+    return_status: "تأیید‌شده",
+    assigned_to: "مژگان بیت",
+    risk_level: "بالا",
+    tracking_number: "TRK1516495925",
+    last_updated: "2025-10-16T22:28:33.060Z",
+    notes: "امیر نوری ارسال عادی را ترجیح می‌دهد.",
+  },
+  {
+    id: "#234567",
+    purchased: "شال خاکستری",
+    order_status: "تحویل‌شده",
+    customer: "راحله موسوی",
+    payment_method: "****1234",
+    payment_status: "مسترد شده",
+    items: 3,
+    order_date: "2025-10-15T08:28:33.060Z",
+    delivery_eta: "2025-10-18T08:28:33.060Z",
+    fulfillment_channel: "شخص ثالث",
+    shipping_service: "تحویل دو‌روزه",
+    warehouse: "JFK-3",
+    order_total: 398.12,
+    currency: "IRR",
+    customer_email: "rachel.kim@example.com",
+    customer_segment: "سازمانی",
+    priority: "فوری",
+    coupon_code: "SPRING24",
+    gift: false,
+    return_status: "تأیید‌شده",
+    assigned_to: "رایلی نگوین",
+    risk_level: "متوسط",
+    tracking_number: "TRK2114884757",
+    last_updated: "2025-10-15T10:28:33.060Z",
+    notes: "راحله موسوی ارسال تحویل دو‌روزه را ترجیح می‌دهد.",
+  },
+  {
+    id: "#876543",
+    purchased: "پیراهن بنفش",
+    order_status: "تحویل‌نشده",
+    customer: "توماس علوی",
+    payment_method: "****5678",
+    payment_status: "مسترد جزئی",
+    items: 2,
+    order_date: "2025-10-13T20:28:33.060Z",
+    delivery_eta: "2025-10-19T20:28:33.060Z",
+    fulfillment_channel: "دراپ‌شیپ",
+    shipping_service: "تحویل یک‌روزه",
+    warehouse: "ORD-4",
+    order_total: 337.01,
+    currency: "IRR",
+    customer_email: "thomas.allen@example.com",
+    customer_segment: "عمده‌فروشی",
+    priority: "بالا",
+    coupon_code: null,
+    gift: false,
+    return_status: "درخواست‌شده",
+    assigned_to: "مژگان بیت",
+    risk_level: "متوسط",
+    tracking_number: "TRK0992177244",
+    last_updated: "2025-10-13T22:28:33.060Z",
+    notes: "توماس علوی ارسال تحویل یک‌روزه را ترجیح می‌دهد.",
+  },
+  {
+    id: "#345678",
+    purchased: "کلاه سفید",
+    order_status: "آماده تحویل",
+    customer: "آنا رحیمی",
+    payment_method: "****9012",
+    payment_status: "پرداخت‌شده",
+    items: 1,
+    order_date: "2025-10-12T08:28:33.060Z",
+    delivery_eta: "2025-10-18T08:28:33.060Z",
+    fulfillment_channel: "دراپ‌شیپ",
+    shipping_service: "ارسال عادی",
+    warehouse: "LAX-5",
+    order_total: 277.54,
+    currency: "IRR",
+    customer_email: "anna.patel@example.com",
+    customer_segment: "سازمانی",
+    priority: "فوری",
+    coupon_code: "WELCOME10",
+    gift: false,
+    return_status: "تأیید‌شده",
+    assigned_to: "هستی سینگ",
+    risk_level: "بالا",
+    tracking_number: "TRK8458630889",
+    last_updated: "2025-10-12T10:28:33.060Z",
+    notes: "آنا رحیمی ارسال عادی را ترجیح می‌دهد.",
+  },
+  {
+    id: "#456789",
+    purchased: "بوت قهوه‌ای",
+    order_status: "تحویل‌شده",
+    customer: "حامد سنگری",
+    payment_method: "****3456",
+    payment_status: "پرداخت‌شده",
+    items: 4,
+    order_date: "2025-10-10T20:28:33.060Z",
+    delivery_eta: "2025-10-13T20:28:33.060Z",
+    fulfillment_channel: "ارسال فروشنده",
+    shipping_service: "ارسال عادی",
+    warehouse: "ATL-1",
+    order_total: 377.76,
+    currency: "IRR",
+    customer_email: "robert.singh@example.com",
+    customer_segment: "بازارچه",
+    priority: "کم",
+    coupon_code: "WELCOME10",
+    gift: false,
+    return_status: "ندارد",
+    assigned_to: "رایلی نگوین",
+    risk_level: "متوسط",
+    tracking_number: "TRK1335228617",
+    last_updated: "2025-10-10T22:28:33.060Z",
+    notes: "حامد سنگری ارسال عادی را ترجیح می‌دهد.",
+  },
+];
+
+// Define the raw data interface
+interface RawOrderData {
+  id: string;
+  purchased: string;
+  order_status: string;
+  customer: string;
+  payment_method: string;
+  payment_status: string;
+  items: number;
+  order_date: string;
+  delivery_eta: string;
+  fulfillment_channel: string;
+  shipping_service: string;
+  warehouse: string;
+  order_total: number;
+  currency: string;
+  customer_email: string;
+  customer_segment: string;
+  priority: string;
+  coupon_code: string | null;
+  gift: boolean;
+  return_status: string;
+  assigned_to: string;
+  risk_level: string;
+  tracking_number: string;
+  last_updated: string;
+  notes: string;
+}
+
+// Transform flat data into nested structure
+export const transformedData = data.map((item: RawOrderData) => ({
+  id: item.id,
+  purchased: item.purchased,
+  order_status: item.order_status,
+  payment_status: item.payment_status,
+  order_total: item.order_total,
+  currency: item.currency,
+  priority: item.priority,
+  order_date: item.order_date,
+  last_updated: item.last_updated,
+  risk_level: item.risk_level,
+  customer: {
+    name: item.customer,
+    email: item.customer_email,
+    segment: item.customer_segment,
+  },
+  shipping: {
+    service: item.shipping_service,
+    fulfillment_channel: item.fulfillment_channel,
+    warehouse: item.warehouse,
+    delivery_eta: item.delivery_eta,
+    tracking_number: item.tracking_number,
+    assigned_to: item.assigned_to,
+  },
+  orderDetails: {
+    payment_method: item.payment_method,
+    items: item.items,
+    coupon_code: item.coupon_code,
+    gift: item.gift,
+    return_status: item.return_status,
+    notes: item.notes,
+  },
+}));
+
+export const validatedData = Orderschema.array().parse(transformedData);
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  dateStyle: "medium",
+});
+
+const formatDate = (value: string) => {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : dateFormatter.format(date);
+};
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const orderStatuses: StatusOption[] = [
+  { label: "تحویل‌شده", value: "تحویل‌شده", icon: CheckCircle },
+  { label: "آماده تحویل", value: "آماده تحویل", icon: Package },
+  { label: "تحویل‌نشده", value: "تحویل‌نشده", icon: Clock },
+];
+
+export const paymentStatuses: StatusOption[] = [
+  { label: "پرداخت‌شده", value: "پرداخت‌شده", icon: CheckCheckIcon },
+  { label: "در انتظار", value: "در انتظار", icon: LoaderIcon },
+  { label: "مسترد شده", value: "مسترد شده", icon: RefreshCcw },
+  {
+    label: "مسترد جزئی",
+    value: "مسترد جزئی",
+    icon: PieChart,
+  },
+];
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+
+export const getStatusVariant = (status: string) => {
+  switch (status) {
+    case "تحویل‌شده":
+      return "default";
+    case "آماده تحویل":
+      return "secondary";
+    case "تحویل‌نشده":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const columns: ColumnDef<Order>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[100px] font-mono text-sm">{row.original.id}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[200px] truncate text-sm font-medium">
+        {row.original.purchased}
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+
+  {
+    accessorKey: "order_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.order_status;
+      const statusMeta = getOrderStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <Badge variant={getStatusVariant(status)} className="gap-1">
+          {StatusIcon ? <StatusIcon className="size-3" /> : null}
+          <span className="text-xs">{statusMeta?.label ?? status}</span>
+        </Badge>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    accessorKey: "order_total",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مجموع" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-sm font-medium tabular-nums">
+        {formatPrice(row.original.order_total)}
+      </span>
+    ),
+    meta: { align: "right", className: "tabular-nums" },
+    enableSorting: true,
+  },
+
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="جزئیات سفارش" />
+    ),
+    cell: ({ row }) => {
+      const expandHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        row.toggleExpanded();
+      };
+
+      return (
+        <div className="relative">
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "group w-full justify-start gap-2 transition-colors",
+              "cursor-pointer border-primary/20 hover:bg-primary/5",
+            )}
+            onClick={expandHandler}
+          >
+            <div className="truncate text-sm font-medium">
+              {row.original.customer.name}
+            </div>
+            <div className="truncate text-xs text-muted-foreground">
+              {row.original.customer.segment}
+            </div>
+
+            <ChevronLeft
+              className={cn(
+                "ms-auto h-4 w-4 text-primary transition-transform duration-200 rtl:rotate-180",
+                row.getIsExpanded() && "rotate-90 transform",
+              )}
+            />
+          </Button>
+        </div>
+      );
+    },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <div className="flex justify-center">
+        <DataTableRowActions
+          row={row}
+          schema={Orderschema}
+          itemName="سفارش"
+          idField="id"
+        />
+      </div>
+    ),
+  },
+];
+
+export function DataTable16({ className }: { className?: string }) {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با ردیف گسترش‌یافته
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با ردیف گسترش‌یافته که در عرض ستون والد محدود می‌شود.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} colSpan={header.colSpan}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <React.Fragment key={row.id}>
+                      <TableRow data-state={row.getIsSelected() && "selected"}>
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                      {row.getIsExpanded() && (
+                        <TableRow className="bg-muted/50 transition-colors">
+                          <TableCell className="p-0" colSpan={5} />
+                          <TableCell className="py-4" colSpan={1}>
+                            <div className="rounded-lg border border-border/50 bg-card p-4 shadow-sm">
+                              <div className="grid grid-cols-2 gap-4">
+                                {/* Left Column */}
+                                <div className="space-y-3">
+                                  <div className="flex items-center gap-3">
+                                    <div className="rounded-md bg-primary/10 p-2">
+                                      <Package className="h-4 w-4 text-primary" />
+                                    </div>
+                                    <div>
+                                      <p className="text-xs text-muted-foreground">
+                                        سرویس حمل
+                                      </p>
+                                      <p className="text-sm font-medium">
+                                        {row.original.shipping.service}
+                                      </p>
+                                    </div>
+                                  </div>
+
+                                  <div className="flex items-center gap-3">
+                                    <div className="rounded-md bg-muted p-2">
+                                      <MapPin className="h-4 w-4 text-muted-foreground" />
+                                    </div>
+                                    <div>
+                                      <p className="text-xs text-muted-foreground">
+                                        رهگیری
+                                      </p>
+                                      <p className="rounded bg-muted px-2 py-1 font-mono text-sm font-medium">
+                                        {row.original.shipping.tracking_number}
+                                      </p>
+                                    </div>
+                                  </div>
+
+                                  <div className="flex items-center gap-3">
+                                    <div className="rounded-md bg-muted p-2">
+                                      <Calendar className="h-4 w-4 text-muted-foreground" />
+                                    </div>
+                                    <div>
+                                      <p className="text-xs text-muted-foreground">
+                                        تحویل
+                                      </p>
+                                      <p className="text-sm font-medium">
+                                        {formatDate(
+                                          row.original.shipping.delivery_eta,
+                                        )}
+                                      </p>
+                                    </div>
+                                  </div>
+                                </div>
+
+                                {/* Right Column */}
+                                <div className="space-y-3">
+                                  <div className="flex items-center gap-3">
+                                    <div className="rounded-md bg-muted p-2">
+                                      <Package className="h-4 w-4 text-muted-foreground" />
+                                    </div>
+                                    <div>
+                                      <p className="text-xs text-muted-foreground">
+                                        انبار
+                                      </p>
+                                      <p className="text-sm font-medium">
+                                        {row.original.shipping.warehouse}
+                                      </p>
+                                    </div>
+                                  </div>
+
+                                  <div className="flex items-center gap-3">
+                                    <div className="rounded-md bg-muted p-2">
+                                      <Package className="h-4 w-4 text-muted-foreground" />
+                                    </div>
+                                    <div>
+                                      <p className="text-xs text-muted-foreground">
+                                        کانال ارسال
+                                      </p>
+                                      <Badge
+                                        variant="outline"
+                                        className="text-xs"
+                                      >
+                                        {
+                                          row.original.shipping
+                                            .fulfillment_channel
+                                        }
+                                      </Badge>
+                                    </div>
+                                  </div>
+
+                                  <div className="flex items-center gap-3">
+                                    <div className="rounded-md bg-muted p-2">
+                                      <User className="h-4 w-4 text-muted-foreground" />
+                                    </div>
+                                    <div>
+                                      <p className="text-xs text-muted-foreground">
+                                        مسئول
+                                      </p>
+                                      <p className="text-sm font-medium">
+                                        {row.original.shipping.assigned_to}
+                                      </p>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </TableCell>
+                          <TableCell className="p-0" colSpan={1} />
+                        </TableRow>
+                      )}
+                    </React.Fragment>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table17.tsx b/blocks/data-table17.tsx
new file mode 100644
index 0000000..ab4981c
--- /dev/null
+++ b/blocks/data-table17.tsx
@@ -0,0 +1,640 @@
+"use client";
+
+import type {
+  DragEndEvent,
+  DraggableAttributes,
+  DraggableSyntheticListeners,
+} from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type {
+  Column,
+  ColumnDef,
+  Row,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronsUpDown,
+  Footprints,
+  GripVertical,
+  PackageIcon,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialSelection?: RowSelectionState;
+  enableRowSelection?: boolean;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialGlobalFilter = "",
+    initialSelection = {},
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      globalFilter,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    rowSelection,
+    setRowSelection,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+type Product = z.infer<typeof schema>;
+
+export const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const productTypes = [
+  {
+    value: "الکترونیک",
+    label: "الکترونیک",
+    icon: Smartphone,
+  },
+  {
+    value: "لوازم جانبی",
+    label: "لوازم جانبی",
+    icon: ShoppingBag,
+  },
+  {
+    value: "پوشاک",
+    label: "پوشاک",
+    icon: Shirt,
+  },
+  {
+    value: "کفش",
+    label: "کفش",
+    icon: Footprints,
+  },
+  {
+    value: "کفش ورزشی",
+    label: "کفش ورزشی",
+    icon: PackageIcon,
+  },
+];
+
+export const columns: ColumnDef<Product>[] = [
+  {
+    id: "drag",
+    header: () => <span className="sr-only">مرتب‌سازی</span>,
+    cell: () => null,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    cell: ({ row }) => <div className="w-[80px]">{row.original.sku}</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+
+    cell: ({ row }) => (
+      <div className="max-w-[500px] truncate font-medium">
+        {row.original.item}
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    cell: ({ row }) => {
+      const productType = productTypes.find(
+        (type) => type.value === row.original.type,
+      );
+
+      if (!productType) {
+        return null;
+      }
+
+      return (
+        <div className="flex w-[120px] items-center gap-2">
+          {productType.icon && (
+            <productType.icon className="size-4 text-muted-foreground" />
+          )}
+          <span>{productType.label}</span>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.some((type) => String(type) === rowValue);
+    },
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+  },
+
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+  },
+];
+
+type DragHandleProps = {
+  attributes: DraggableAttributes;
+  listeners?: DraggableSyntheticListeners;
+  interactive: boolean;
+};
+
+const DragHandle = React.forwardRef<HTMLButtonElement, DragHandleProps>(
+  ({ attributes, listeners, interactive }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      className="flex size-5 items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors hover:border-border hover:bg-muted"
+      {...(interactive ? attributes : {})}
+      {...(interactive ? (listeners ?? {}) : {})}
+      tabIndex={interactive ? 0 : -1}
+      aria-hidden={interactive ? undefined : true}
+    >
+      <GripVertical className="size-3" />
+      <span className="sr-only">کشیدن برای مرتب‌سازی ردیف</span>
+    </button>
+  ),
+);
+
+DragHandle.displayName = "DragHandle";
+
+function SortableProductRow({
+  row,
+  interactive,
+}: {
+  row: Row<Product>;
+  interactive: boolean;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: row.original.id,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <TableRow
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        isDragging && "bg-muted/60",
+        "hover:bg-muted/30 data-[state=selected]:bg-muted/40",
+      )}
+      data-state={row.getIsSelected() && "selected"}
+    >
+      {row.getVisibleCells().map((cell) => {
+        const isDragCell = cell.column.id === "drag";
+
+        return (
+          <TableCell
+            key={cell.id}
+            className={cn("p-2", isDragCell && "w-[48px]")}
+          >
+            {isDragCell ? (
+              <DragHandle
+                attributes={attributes}
+                listeners={listeners}
+                interactive={interactive}
+              />
+            ) : (
+              flexRender(cell.column.columnDef.cell, cell.getContext())
+            )}
+          </TableCell>
+        );
+      })}
+    </TableRow>
+  );
+}
+
+export function DataTable17({ className }: { className?: string }) {
+  const [tableData, setTableData] = React.useState(validatedData);
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 150,
+        tolerance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragEnd = React.useCallback(
+    ({ active, over }: DragEndEvent) => {
+      if (!over || active.id === over.id) {
+        return;
+      }
+
+      setTableData((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+
+        if (oldIndex === -1 || newIndex === -1) {
+          return items;
+        }
+
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    },
+    [setTableData],
+  );
+
+  const { table } = useDataTable({
+    data: tableData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const rows = table.getRowModel().rows;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با ردیف‌های قابل جابجایی
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با قابلیت کشیدن و رها کردن ردیف‌ها با dnd-kit و
+              TanStack Table.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              modifiers={[restrictToVerticalAxis]}
+              onDragEnd={handleDragEnd}
+            >
+              <Table>
+                <TableHeader className="bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <TableHead
+                          key={header.id}
+                          colSpan={header.colSpan}
+                          className="px-2"
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {rows.length ? (
+                    <SortableContext
+                      items={rows.map((row) => row.original.id)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      {rows.map((row) => (
+                        <SortableProductRow
+                          key={row.id}
+                          row={row}
+                          interactive={isMounted}
+                        />
+                      ))}
+                    </SortableContext>
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        colSpan={table.getAllColumns().length}
+                        className="h-24 text-center"
+                      >
+                        نتیجه‌ای یافت نشد
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </DndContext>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table18.tsx b/blocks/data-table18.tsx
new file mode 100644
index 0000000..2865e81
--- /dev/null
+++ b/blocks/data-table18.tsx
@@ -0,0 +1,643 @@
+"use client";
+
+import type {
+  DragEndEvent,
+  DraggableAttributes,
+  DraggableSyntheticListeners,
+} from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type {
+  Cell,
+  Column,
+  ColumnDef,
+  Header,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronsUpDown,
+  Footprints,
+  GripVerticalIcon,
+  PackageIcon,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialSelection?: RowSelectionState;
+  initialColumnOrder?: string[];
+  enableRowSelection?: boolean;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialGlobalFilter = "",
+    initialSelection = {},
+    initialColumnOrder = [],
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const [columnOrder, setColumnOrder] =
+    React.useState<string[]>(initialColumnOrder);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      globalFilter,
+      rowSelection,
+      columnOrder,
+    },
+    columnResizeMode: "onChange",
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onColumnOrderChange: setColumnOrder,
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    rowSelection,
+    setRowSelection,
+    columnOrder,
+    setColumnOrder,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+type Product = z.infer<typeof schema>;
+
+export const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const productTypes = [
+  {
+    value: "الکترونیک",
+    label: "الکترونیک",
+    icon: Smartphone,
+  },
+  {
+    value: "لوازم جانبی",
+    label: "لوازم جانبی",
+    icon: ShoppingBag,
+  },
+  {
+    value: "پوشاک",
+    label: "پوشاک",
+    icon: Shirt,
+  },
+  {
+    value: "کفش",
+    label: "کفش",
+    icon: Footprints,
+  },
+  {
+    value: "کفش ورزشی",
+    label: "کفش ورزشی",
+    icon: PackageIcon,
+  },
+];
+
+export const columns: ColumnDef<Product>[] = [
+  {
+    id: "sku",
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    cell: ({ row }) => <div className="w-[80px]">{row.original.sku}</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    id: "item",
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+
+    cell: ({ row }) => (
+      <div className="max-w-[500px] truncate font-medium">
+        {row.original.item}
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    id: "type",
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    cell: ({ row }) => {
+      const productType = productTypes.find(
+        (type) => type.value === row.original.type,
+      );
+
+      if (!productType) {
+        return null;
+      }
+
+      return (
+        <div className="flex w-[120px] items-center gap-2">
+          {productType.icon && (
+            <productType.icon className="size-4 text-muted-foreground" />
+          )}
+          <span>{productType.label}</span>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.some((type) => String(type) === rowValue);
+    },
+  },
+  {
+    id: "stock",
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+  },
+
+  {
+    id: "price",
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+  },
+  {
+    id: "availability",
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+  },
+];
+
+type DragHandleProps = {
+  attributes: DraggableAttributes;
+  listeners?: DraggableSyntheticListeners;
+  interactive: boolean;
+};
+
+const DragHandle = React.forwardRef<HTMLButtonElement, DragHandleProps>(
+  ({ attributes, listeners, interactive }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      className="flex size-5 items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors hover:border-border hover:bg-muted"
+      {...(interactive ? attributes : {})}
+      {...(interactive ? (listeners ?? {}) : {})}
+      tabIndex={interactive ? 0 : -1}
+      aria-hidden={interactive ? undefined : true}
+    >
+      <GripVerticalIcon className="opacity-70" size={16} aria-hidden="true" />
+      <span className="sr-only">کشیدن برای مرتب‌سازی ستون</span>
+    </button>
+  ),
+);
+
+DragHandle.displayName = "DragHandle";
+
+const DraggableTableHeader = ({
+  header,
+  interactive,
+}: {
+  header: Header<Product, unknown>;
+  interactive: boolean;
+}) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: header.column.id,
+  });
+
+  const style: React.CSSProperties = {
+    opacity: isDragging ? 0.7 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  return (
+    <TableHead
+      ref={setNodeRef}
+      className="relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent"
+      style={style}
+    >
+      <div className="flex items-center justify-between">
+        <span className="grow truncate">
+          {header.isPlaceholder
+            ? null
+            : flexRender(header.column.columnDef.header, header.getContext())}
+        </span>
+
+        <DragHandle
+          attributes={attributes}
+          listeners={listeners}
+          interactive={interactive}
+        />
+      </div>
+    </TableHead>
+  );
+};
+
+const DraggableRowCell = ({ cell }: { cell: Cell<Product, unknown> }) => {
+  const { isDragging, setNodeRef, transform, transition } = useSortable({
+    id: cell.column.id,
+  });
+
+  const style: React.CSSProperties = {
+    opacity: isDragging ? 0.7 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    width: cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  return (
+    <TableCell ref={setNodeRef} className="truncate" style={style}>
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </TableCell>
+  );
+};
+
+export function DataTable18({ className }: { className?: string }) {
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 150,
+        tolerance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const { table, setColumnOrder, columnOrder } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+    initialColumnOrder: columns.map((column) => column.id as string),
+  });
+
+  const handleDragEnd = React.useCallback(
+    ({ active, over }: DragEndEvent) => {
+      if (!active || !over || active.id === over.id) {
+        return;
+      }
+
+      setColumnOrder((columnOrder) => {
+        const oldIndex = columnOrder.indexOf(active.id as string);
+        const newIndex = columnOrder.indexOf(over.id as string);
+
+        if (oldIndex === -1 || newIndex === -1) {
+          return columnOrder;
+        }
+
+        return arrayMove(columnOrder, oldIndex, newIndex);
+      });
+    },
+    [setColumnOrder],
+  );
+
+  const rows = table.getRowModel().rows;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با ستون‌های قابل جابجایی
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با قابلیت کشیدن و رها کردن ستون‌ها با dnd-kit و
+              TanStack Table.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <DndContext
+              id={React.useId()}
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              modifiers={[restrictToHorizontalAxis]}
+              onDragEnd={handleDragEnd}
+            >
+              <Table>
+                <TableHeader className="bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      <SortableContext
+                        items={columnOrder}
+                        strategy={horizontalListSortingStrategy}
+                      >
+                        {headerGroup.headers.map((header) => (
+                          <DraggableTableHeader
+                            key={header.id}
+                            header={header}
+                            interactive={isMounted}
+                          />
+                        ))}
+                      </SortableContext>
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {rows?.length ? (
+                    rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        data-state={row.getIsSelected() && "selected"}
+                        className="hover:bg-muted/30 data-[state=selected]:bg-muted/40"
+                      >
+                        <SortableContext
+                          items={columnOrder}
+                          strategy={horizontalListSortingStrategy}
+                        >
+                          {row.getVisibleCells().map((cell) => (
+                            <DraggableRowCell key={cell.id} cell={cell} />
+                          ))}
+                        </SortableContext>
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        colSpan={columns.length}
+                        className="h-24 text-center"
+                      >
+                        نتیجه‌ای یافت نشد
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </DndContext>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table19.tsx b/blocks/data-table19.tsx
new file mode 100644
index 0000000..f31e437
--- /dev/null
+++ b/blocks/data-table19.tsx
@@ -0,0 +1,695 @@
+"use client";
+
+import type { DragEndEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type {
+  Cell,
+  Column,
+  ColumnDef,
+  Header,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  Footprints,
+  GripVerticalIcon,
+  PackageIcon,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialSelection?: RowSelectionState;
+  initialColumnOrder?: string[];
+  enableRowSelection?: boolean;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialGlobalFilter = "",
+    initialSelection = {},
+    initialColumnOrder = [],
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const [columnOrder, setColumnOrder] =
+    React.useState<string[]>(initialColumnOrder);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      globalFilter,
+      rowSelection,
+      columnOrder,
+    },
+    columnResizeMode: "onChange",
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onColumnOrderChange: setColumnOrder,
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    rowSelection,
+    setRowSelection,
+    columnOrder,
+    setColumnOrder,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+  columnId: string;
+  columnOrder: string[];
+  onMoveColumn: (columnId: string, direction: "left" | "right") => void;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+  columnId,
+  columnOrder,
+  onMoveColumn,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+  const currentIndex = columnOrder.indexOf(columnId);
+  const isFirst = currentIndex === 0;
+  const isLast = currentIndex === columnOrder.length - 1;
+
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <span className="truncate text-sm font-medium">{title}</span>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0 hover:bg-muted"
+          >
+            {sorted === "desc" ? (
+              <ArrowDown className="h-4 w-4" />
+            ) : sorted === "asc" ? (
+              <ArrowUp className="h-4 w-4" />
+            ) : (
+              <ChevronsUpDown className="h-4 w-4 opacity-50" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-40">
+          {canSort && (
+            <>
+              <DropdownMenuItem
+                onClick={() => column.toggleSorting(false)}
+                className="flex items-center gap-2"
+              >
+                <ArrowUp className="h-4 w-4" />
+                <span>صعودی</span>
+                {sorted === "asc" && <span className="ms-auto">✓</span>}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => column.toggleSorting(true)}
+                className="flex items-center gap-2"
+              >
+                <ArrowDown className="h-4 w-4" />
+                <span>نزولی</span>
+                {sorted === "desc" && <span className="ms-auto">✓</span>}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
+          <DropdownMenuItem
+            onClick={() => onMoveColumn(columnId, "left")}
+            disabled={isFirst}
+            className="flex items-center gap-2"
+          >
+            <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            <span>انتقال به راست</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onMoveColumn(columnId, "right")}
+            disabled={isLast}
+            className="flex items-center gap-2"
+          >
+            <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            <span>انتقال به چپ</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+type Product = z.infer<typeof schema>;
+
+export const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const productTypes = [
+  {
+    value: "الکترونیک",
+    label: "الکترونیک",
+    icon: Smartphone,
+  },
+  {
+    value: "لوازم جانبی",
+    label: "لوازم جانبی",
+    icon: ShoppingBag,
+  },
+  {
+    value: "پوشاک",
+    label: "پوشاک",
+    icon: Shirt,
+  },
+  {
+    value: "کفش",
+    label: "کفش",
+    icon: Footprints,
+  },
+  {
+    value: "کفش ورزشی",
+    label: "کفش ورزشی",
+    icon: PackageIcon,
+  },
+];
+
+export const columns: ColumnDef<Product>[] = [
+  {
+    id: "sku",
+    accessorKey: "sku",
+    header: "کد کالا",
+    cell: ({ row }) => <div className="w-[80px]">{row.original.sku}</div>,
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    id: "item",
+    accessorKey: "item",
+    header: "محصول",
+    cell: ({ row }) => (
+      <div className="max-w-[500px] truncate font-medium">
+        {row.original.item}
+      </div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    id: "type",
+    accessorKey: "type",
+    header: "دسته‌بندی",
+    cell: ({ row }) => {
+      const productType = productTypes.find(
+        (type) => type.value === row.original.type,
+      );
+
+      if (!productType) {
+        return null;
+      }
+
+      return (
+        <div className="flex w-[120px] items-center gap-2">
+          {productType.icon && (
+            <productType.icon className="size-4 text-muted-foreground" />
+          )}
+          <span>{productType.label}</span>
+        </div>
+      );
+    },
+    enableSorting: true,
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.some((type) => String(type) === rowValue);
+    },
+  },
+  {
+    id: "stock",
+    accessorKey: "stock",
+    header: "موجود در انبار",
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: true,
+  },
+  {
+    id: "price",
+    accessorKey: "price",
+    header: "قیمت",
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+  },
+  {
+    id: "availability",
+    accessorKey: "availability",
+    header: "دسترس‌پذیر در",
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+  },
+];
+
+const DraggableTableHeader = ({
+  header,
+  interactive,
+  columnOrder,
+  onMoveColumn,
+}: {
+  header: Header<Product, unknown>;
+  interactive: boolean;
+  columnOrder: string[];
+  onMoveColumn: (columnId: string, direction: "left" | "right") => void;
+}) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: header.column.id,
+  });
+
+  const style: React.CSSProperties = {
+    opacity: isDragging ? 0.7 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  return (
+    <TableHead
+      ref={setNodeRef}
+      className="relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent"
+      style={style}
+    >
+      <div className="flex items-center gap-2">
+        {interactive && (
+          <button
+            type="button"
+            className="flex size-5 shrink-0 cursor-grab items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted active:cursor-grabbing"
+            {...attributes}
+            {...listeners}
+          >
+            <GripVerticalIcon className="opacity-70" size={14} />
+            <span className="sr-only">کشیدن برای مرتب‌سازی ستون</span>
+          </button>
+        )}
+        <div className="min-w-0 flex-1">
+          {header.isPlaceholder ? null : typeof header.column.columnDef
+            .header === "string" ? (
+            <DataTableColumnHeader
+              column={header.column}
+              title={header.column.columnDef.header}
+              columnId={header.column.id}
+              columnOrder={columnOrder}
+              onMoveColumn={onMoveColumn}
+            />
+          ) : (
+            flexRender(header.column.columnDef.header, header.getContext())
+          )}
+        </div>
+      </div>
+    </TableHead>
+  );
+};
+
+const DraggableRowCell = ({ cell }: { cell: Cell<Product, unknown> }) => {
+  const { isDragging, setNodeRef, transform, transition } = useSortable({
+    id: cell.column.id,
+  });
+
+  const style: React.CSSProperties = {
+    opacity: isDragging ? 0.7 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    width: cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  return (
+    <TableCell ref={setNodeRef} className="truncate" style={style}>
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </TableCell>
+  );
+};
+
+export function DataTable19({ className }: { className?: string }) {
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 150,
+        tolerance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const { table, setColumnOrder, columnOrder } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+    initialColumnOrder: columns.map((column) => column.id as string),
+  });
+
+  const handleDragEnd = React.useCallback(
+    ({ active, over }: DragEndEvent) => {
+      if (!active || !over || active.id === over.id) {
+        return;
+      }
+
+      setColumnOrder((columnOrder) => {
+        const oldIndex = columnOrder.indexOf(active.id as string);
+        const newIndex = columnOrder.indexOf(over.id as string);
+
+        if (oldIndex === -1 || newIndex === -1) {
+          return columnOrder;
+        }
+
+        return arrayMove(columnOrder, oldIndex, newIndex);
+      });
+    },
+    [setColumnOrder],
+  );
+
+  const handleMoveColumn = React.useCallback(
+    (columnId: string, direction: "left" | "right") => {
+      setColumnOrder((currentOrder) => {
+        const currentIndex = currentOrder.indexOf(columnId);
+        if (currentIndex === -1) return currentOrder;
+
+        const newIndex =
+          direction === "left" ? currentIndex - 1 : currentIndex + 1;
+
+        // Bounds check
+        if (newIndex < 0 || newIndex >= currentOrder.length) {
+          return currentOrder;
+        }
+
+        return arrayMove(currentOrder, currentIndex, newIndex);
+      });
+    },
+    [setColumnOrder],
+  );
+
+  const rows = table.getRowModel().rows;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با ستون‌های قابل جابجایی و کنترل‌شونده
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با مرتب‌سازی ستون‌ها از طریق منو و جابجایی با کشیدن.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <DndContext
+              id={React.useId()}
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              modifiers={[restrictToHorizontalAxis]}
+              onDragEnd={handleDragEnd}
+            >
+              <Table>
+                <TableHeader className="bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      <SortableContext
+                        items={columnOrder}
+                        strategy={horizontalListSortingStrategy}
+                      >
+                        {headerGroup.headers.map((header) => (
+                          <DraggableTableHeader
+                            key={header.id}
+                            header={header}
+                            interactive={isMounted}
+                            columnOrder={columnOrder}
+                            onMoveColumn={handleMoveColumn}
+                          />
+                        ))}
+                      </SortableContext>
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {rows?.length ? (
+                    rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        data-state={row.getIsSelected() && "selected"}
+                        className="hover:bg-muted/30 data-[state=selected]:bg-muted/40"
+                      >
+                        <SortableContext
+                          items={columnOrder}
+                          strategy={horizontalListSortingStrategy}
+                        >
+                          {row.getVisibleCells().map((cell) => (
+                            <DraggableRowCell key={cell.id} cell={cell} />
+                          ))}
+                        </SortableContext>
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        colSpan={columns.length}
+                        className="h-24 text-center"
+                      >
+                        نتیجه‌ای یافت نشد
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </DndContext>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table2.tsx b/blocks/data-table2.tsx
new file mode 100644
index 0000000..9a096cb
--- /dev/null
+++ b/blocks/data-table2.tsx
@@ -0,0 +1,363 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const { data, columns, getRowId, initialSorting = [] } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center px-2 text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable2 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول داده با حاشیه
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول پیشرفته با حاشیه‌های واضح و جداسازی بین سلول‌ها. مناسب برای
+              نمایش جزئیات داده‌ای که هر سلول به مرز مشخص نیاز دارد.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-lg border-1 border-border">
+            <Table className="border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b">
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead
+                          key={header.id}
+                          className="border-e px-0 last:border-e-0"
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell
+                          key={cell.id}
+                          className="border-e last:border-e-0"
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 border-e text-center last:border-e-0"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table20.tsx b/blocks/data-table20.tsx
new file mode 100644
index 0000000..d97f1c7
--- /dev/null
+++ b/blocks/data-table20.tsx
@@ -0,0 +1,436 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const { data, columns, getRowId, initialSorting = [] } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting },
+    columnResizeMode: "onChange",
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    defaultColumn: {
+      size: 150,
+      minSize: 50,
+      maxSize: 500,
+    },
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center pe-4 text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 w-full items-center justify-between gap-2 px-0 pe-4 text-sm font-medium text-foreground hover:bg-transparent"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span className="truncate">{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4 shrink-0" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4 shrink-0" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+const COLUMN_SIZES = {
+  sku: { default: 100, min: 80, max: 150 },
+  item: { default: 200, min: 100, max: 400 },
+  type: { default: 120, min: 80, max: 200 },
+  stock: { default: 100, min: 80, max: 150 },
+  price: { default: 120, min: 100, max: 200 },
+  availability: { default: 180, min: 120, max: 300 },
+} as const;
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    size: COLUMN_SIZES.sku.default,
+    minSize: COLUMN_SIZES.sku.min,
+    maxSize: COLUMN_SIZES.sku.max,
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="truncate font-medium">{row.getValue("item")}</div>
+    ),
+    size: COLUMN_SIZES.item.default,
+    minSize: COLUMN_SIZES.item.min,
+    maxSize: COLUMN_SIZES.item.max,
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    size: COLUMN_SIZES.type.default,
+    minSize: COLUMN_SIZES.type.min,
+    maxSize: COLUMN_SIZES.type.max,
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock = row.getValue("stock") as boolean;
+      return inStock ? "بله" : "خیر";
+    },
+    size: COLUMN_SIZES.stock.default,
+    minSize: COLUMN_SIZES.stock.min,
+    maxSize: COLUMN_SIZES.stock.max,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = row.getValue("price") as number;
+      return (
+        <div className="truncate font-medium tabular-nums">
+          {formatPrice(price)}
+        </div>
+      );
+    },
+    size: COLUMN_SIZES.price.default,
+    minSize: COLUMN_SIZES.price.min,
+    maxSize: COLUMN_SIZES.price.max,
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability = row.getValue("availability") as (
+        | "فروشگاه"
+        | "آنلاین"
+      )[];
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary" className="shrink-0">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    size: COLUMN_SIZES.availability.default,
+    minSize: COLUMN_SIZES.availability.min,
+    maxSize: COLUMN_SIZES.availability.max,
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable20 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با ستون‌های قابل تغییر اندازه
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده ساده با مرتب‌سازی و امکان تغییر عرض ستون‌ها.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <div className="overflow-x-auto">
+              <Table
+                className="relative w-full table-fixed"
+                style={{
+                  minWidth: table.getCenterTotalSize(),
+                }}
+              >
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id} className="bg-muted/50">
+                      {headerGroup.headers.map((header) => {
+                        return (
+                          <TableHead
+                            key={header.id}
+                            className="relative px-2 select-none"
+                            style={{
+                              width: `${header.getSize()}px`,
+                            }}
+                            aria-sort={
+                              header.column.getIsSorted() === "asc"
+                                ? "ascending"
+                                : header.column.getIsSorted() === "desc"
+                                  ? "descending"
+                                  : "none"
+                            }
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                            {header.column.getCanResize() && (
+                              <div
+                                onDoubleClick={() => header.column.resetSize()}
+                                onMouseDown={header.getResizeHandler()}
+                                onTouchStart={header.getResizeHandler()}
+                                className="group/resize absolute top-0 -end-2 z-10 flex h-full w-4 cursor-col-resize touch-none justify-center select-none before:absolute before:inset-y-0 before:w-px before:bg-border before:transition-colors hover:before:bg-primary active:before:bg-primary"
+                                role="separator"
+                                aria-label="تغییر اندازه ستون"
+                              />
+                            )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows?.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        data-state={row.getIsSelected() && "selected"}
+                        className="transition-colors hover:bg-muted/50"
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell
+                            key={cell.id}
+                            className="truncate"
+                            style={{
+                              width: `${cell.column.getSize()}px`,
+                              maxWidth: `${cell.column.getSize()}px`,
+                            }}
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        colSpan={columns.length}
+                        className="h-24 text-center"
+                      >
+                        <div className="flex flex-col items-center justify-center gap-2">
+                          <p className="text-muted-foreground">
+                            محصولی یافت نشد
+                          </p>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table21.tsx b/blocks/data-table21.tsx
new file mode 100644
index 0000000..356a8a9
--- /dev/null
+++ b/blocks/data-table21.tsx
@@ -0,0 +1,762 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  type ColumnPinningState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+  type VisibilityState,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Columns3,
+  EyeOff,
+  Footprints,
+  PackageIcon,
+  Pin,
+  PinOff,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialColumnPinning?: ColumnPinningState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialColumnPinning = {},
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [columnOrder, setColumnOrder] = React.useState<string[]>(
+    columns.map((col) => col.id as string),
+  );
+  const [columnPinning, setColumnPinning] =
+    React.useState<ColumnPinningState>(initialColumnPinning);
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnOrder,
+      columnPinning,
+      columnVisibility,
+    },
+    onSortingChange: setSorting,
+    onColumnOrderChange: setColumnOrder,
+    onColumnPinningChange: setColumnPinning,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    columnOrder,
+    setColumnOrder,
+    columnPinning,
+    setColumnPinning,
+    columnVisibility,
+    setColumnVisibility,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+  columnId: string;
+  columnOrder: string[];
+  allColumns: Column<TData, unknown>[];
+  onMoveColumn: (columnId: string, direction: "left" | "right") => void;
+  onPinColumn: (columnId: string, position: "left" | "right" | false) => void;
+  onHideColumn: (columnId: string) => void;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+  columnId,
+  columnOrder,
+  allColumns,
+  onMoveColumn,
+  onPinColumn,
+  onHideColumn,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+  const currentIndex = columnOrder.indexOf(columnId);
+  const isFirst = currentIndex === 0;
+  const isLast = currentIndex === columnOrder.length - 1;
+  const isPinned = column.getIsPinned();
+
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <span className="truncate text-sm font-medium">{title}</span>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0 hover:bg-muted data-[state=open]:bg-muted"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-48">
+          {canSort && (
+            <>
+              <DropdownMenuItem
+                onClick={() => column.toggleSorting(false)}
+                className="flex items-center gap-2"
+              >
+                <ArrowUp className="h-4 w-4" />
+                <span>صعودی</span>
+                {sorted === "asc" && (
+                  <span className="ms-auto text-primary">✓</span>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => column.toggleSorting(true)}
+                className="flex items-center gap-2"
+              >
+                <ArrowDown className="h-4 w-4" />
+                <span>نزولی</span>
+                {sorted === "desc" && (
+                  <span className="ms-auto text-primary">✓</span>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
+
+          <DropdownMenuItem
+            onClick={() => onPinColumn(columnId, "left")}
+            className="flex items-center gap-2"
+          >
+            <Pin className="h-4 w-4 rotate-[-45deg]" />
+            <span>ثابت در چپ</span>
+            {isPinned === "left" && (
+              <span className="ms-auto text-primary">✓</span>
+            )}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onPinColumn(columnId, "right")}
+            className="flex items-center gap-2"
+          >
+            <Pin className="h-4 w-4 rotate-45" />
+            <span>ثابت در راست</span>
+            {isPinned === "right" && (
+              <span className="ms-auto text-primary">✓</span>
+            )}
+          </DropdownMenuItem>
+          {isPinned && (
+            <DropdownMenuItem
+              onClick={() => onPinColumn(columnId, false)}
+              className="flex items-center gap-2"
+            >
+              <PinOff className="h-4 w-4" />
+              <span>لغو ثابت‌سازی</span>
+            </DropdownMenuItem>
+          )}
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            onClick={() => onMoveColumn(columnId, "left")}
+            disabled={isFirst}
+            className="flex items-center gap-2"
+          >
+            <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            <span>انتقال به راست</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onMoveColumn(columnId, "right")}
+            disabled={isLast}
+            className="flex items-center gap-2"
+          >
+            <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            <span>انتقال به چپ</span>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger className="flex items-center gap-2">
+              <Columns3 className="h-4 w-4" />
+              <span>ستون‌ها</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent className="w-48">
+              {allColumns
+                .filter((col) => col.getCanHide())
+                .map((col) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={col.id}
+                      checked={col.getIsVisible()}
+                      onCheckedChange={(value) => col.toggleVisibility(!!value)}
+                    >
+                      {typeof col.columnDef.header === "string"
+                        ? col.columnDef.header
+                        : col.id}
+                    </DropdownMenuCheckboxItem>
+                  );
+                })}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+
+          <DropdownMenuItem
+            onClick={() => onHideColumn(columnId)}
+            className="flex items-center gap-2"
+          >
+            <EyeOff className="h-4 w-4" />
+            <span>مخفی کردن ستون</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+type Product = z.infer<typeof schema>;
+
+export const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const productTypes = [
+  {
+    value: "الکترونیک",
+    label: "الکترونیک",
+    icon: Smartphone,
+  },
+  {
+    value: "لوازم جانبی",
+    label: "لوازم جانبی",
+    icon: ShoppingBag,
+  },
+  {
+    value: "پوشاک",
+    label: "پوشاک",
+    icon: Shirt,
+  },
+  {
+    value: "کفش",
+    label: "کفش",
+    icon: Footprints,
+  },
+  {
+    value: "کفش ورزشی",
+    label: "کفش ورزشی",
+    icon: PackageIcon,
+  },
+];
+
+export const columns: ColumnDef<Product>[] = [
+  {
+    id: "sku",
+    accessorKey: "sku",
+    header: "کد کالا",
+    cell: ({ row }) => <div className="w-[80px]">{row.original.sku}</div>,
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    id: "item",
+    accessorKey: "item",
+    header: "محصول",
+    cell: ({ row }) => (
+      <div className="max-w-[500px] truncate font-medium">
+        {row.original.item}
+      </div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    id: "type",
+    accessorKey: "type",
+    header: "دسته‌بندی",
+    cell: ({ row }) => {
+      const productType = productTypes.find(
+        (type) => type.value === row.original.type,
+      );
+
+      if (!productType) {
+        return null;
+      }
+
+      return (
+        <div className="flex w-[120px] items-center gap-2">
+          {productType.icon && (
+            <productType.icon className="size-4 text-muted-foreground" />
+          )}
+          <span>{productType.label}</span>
+        </div>
+      );
+    },
+    enableSorting: true,
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.some((type) => String(type) === rowValue);
+    },
+  },
+  {
+    id: "stock",
+    accessorKey: "stock",
+    header: "موجود در انبار",
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: true,
+  },
+  {
+    id: "price",
+    accessorKey: "price",
+    header: "قیمت",
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+  },
+  {
+    id: "availability",
+    accessorKey: "availability",
+    header: "دسترس‌پذیر در",
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+  },
+];
+
+export function DataTable21({ className }: { className?: string }) {
+  const { table, columnOrder, setColumnOrder } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const handleMoveColumn = React.useCallback(
+    (columnId: string, direction: "left" | "right") => {
+      setColumnOrder((currentOrder) => {
+        const currentIndex = currentOrder.indexOf(columnId);
+        if (currentIndex === -1) return currentOrder;
+
+        const newIndex =
+          direction === "left" ? currentIndex - 1 : currentIndex + 1;
+
+        if (newIndex < 0 || newIndex >= currentOrder.length) {
+          return currentOrder;
+        }
+
+        const newOrder = [...currentOrder];
+        const [removed] = newOrder.splice(currentIndex, 1);
+        newOrder.splice(newIndex, 0, removed);
+
+        return newOrder;
+      });
+    },
+    [setColumnOrder],
+  );
+
+  const handlePinColumn = React.useCallback(
+    (columnId: string, position: "left" | "right" | false) => {
+      table.getColumn(columnId)?.pin(position);
+    },
+    [table],
+  );
+
+  const handleHideColumn = React.useCallback(
+    (columnId: string) => {
+      table.getColumn(columnId)?.toggleVisibility(false);
+    },
+    [table],
+  );
+
+  const allColumns = table.getAllColumns();
+  const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1);
+  const visibleColumnIds = table
+    .getVisibleLeafColumns()
+    .map((column) => column.id);
+  const rightPinnedColumnIdSet = new Set(
+    table.getState().columnPinning.right ?? [],
+  );
+  const firstRightPinnedIndex = visibleColumnIds.findIndex((columnId) =>
+    rightPinnedColumnIdSet.has(columnId),
+  );
+  const rightStickyDividerTargetId =
+    firstRightPinnedIndex > 0
+      ? visibleColumnIds[firstRightPinnedIndex - 1]
+      : null;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با کنترل‌های ستون
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با کنترل کامل ستون‌ها شامل مرتب‌سازی، ثابت‌سازی،
+              جابجایی و مدیریت نمایش.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-lg border-2">
+            <Table className="border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:hover_td[data-pinned]]:bg-muted/50 [&_tr:not(:last-child)_td]:border-b [&_tr[data-state=selected]_td[data-pinned]]:bg-muted [&_tr[data-state=selected]:hover_td[data-pinned]]:bg-muted">
+              <TableHeader className="bg-muted/50">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      const columnWithPinning = header.column as unknown as {
+                        getIsPinned?: () => "left" | "right" | false;
+                        getIsLastColumn?: (
+                          position: "left" | "right",
+                        ) => boolean;
+                        getIsFirstColumn?: (
+                          position: "left" | "right",
+                        ) => boolean;
+                        getStart?: (position: "left" | "right") => number;
+                        getAfter?: (position: "left" | "right") => number;
+                        getSize?: () => number;
+                      };
+
+                      const pinned = columnWithPinning.getIsPinned?.();
+                      const pinnedStyle: CSSProperties = {};
+                      let lastPinned: "left" | "right" | undefined;
+
+                      if (pinned) {
+                        pinnedStyle.position = "sticky";
+                        pinnedStyle.zIndex = 1;
+
+                        if (pinned === "left") {
+                          const start =
+                            columnWithPinning.getStart?.("left") ?? 0;
+                          pinnedStyle.left = `${start}px`;
+                          if (columnWithPinning.getIsLastColumn?.("left")) {
+                            lastPinned = "left";
+                          }
+                        }
+
+                        if (pinned === "right") {
+                          const after =
+                            columnWithPinning.getAfter?.("right") ?? 0;
+                          pinnedStyle.right = `${after}px`;
+                          if (columnWithPinning.getIsFirstColumn?.("right")) {
+                            lastPinned = "right";
+                          }
+                        }
+
+                        const pinnedWidth = columnWithPinning.getSize?.();
+                        if (
+                          typeof pinnedWidth === "number" &&
+                          Number.isFinite(pinnedWidth)
+                        ) {
+                          pinnedStyle.width = pinnedWidth;
+                        }
+                      }
+
+                      return (
+                        <TableHead
+                          key={header.id}
+                          colSpan={header.colSpan}
+                          style={pinnedStyle}
+                          className={cn(
+                            "relative h-11 truncate border-e px-3 text-sm font-medium last:border-e-0 data-[pinned]:bg-muted/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=right][data-last-col=right]]:border-s",
+                            header.column.id === rightStickyDividerTargetId &&
+                            "!border-e-0",
+                          )}
+                          data-pinned={pinned || undefined}
+                          data-last-col={lastPinned || undefined}
+                        >
+                          {header.isPlaceholder ? null : typeof header.column
+                            .columnDef.header === "string" ? (
+                            <DataTableColumnHeader
+                              column={header.column}
+                              title={header.column.columnDef.header}
+                              columnId={header.column.id}
+                              columnOrder={columnOrder}
+                              allColumns={allColumns}
+                              onMoveColumn={handleMoveColumn}
+                              onPinColumn={handlePinColumn}
+                              onHideColumn={handleHideColumn}
+                            />
+                          ) : (
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )
+                          )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      className="transition-colors hover:bg-muted/50"
+                    >
+                      {row.getVisibleCells().map((cell) => {
+                        const columnWithPinning = cell.column as unknown as {
+                          getIsPinned?: () => "left" | "right" | false;
+                          getIsLastColumn?: (
+                            position: "left" | "right",
+                          ) => boolean;
+                          getIsFirstColumn?: (
+                            position: "left" | "right",
+                          ) => boolean;
+                          getStart?: (position: "left" | "right") => number;
+                          getAfter?: (position: "left" | "right") => number;
+                          getSize?: () => number;
+                        };
+
+                        const pinned = columnWithPinning.getIsPinned?.();
+                        const pinnedStyle: CSSProperties = {};
+                        let lastPinned: "left" | "right" | undefined;
+
+                        if (pinned) {
+                          pinnedStyle.position = "sticky";
+                          pinnedStyle.zIndex = 1;
+
+                          if (pinned === "left") {
+                            const start =
+                              columnWithPinning.getStart?.("left") ?? 0;
+                            pinnedStyle.left = `${start}px`;
+                            if (columnWithPinning.getIsLastColumn?.("left")) {
+                              lastPinned = "left";
+                            }
+                          }
+
+                          if (pinned === "right") {
+                            const after =
+                              columnWithPinning.getAfter?.("right") ?? 0;
+                            pinnedStyle.right = `${after}px`;
+                            if (columnWithPinning.getIsFirstColumn?.("right")) {
+                              lastPinned = "right";
+                            }
+                          }
+
+                          const pinnedWidth = columnWithPinning.getSize?.();
+                          if (
+                            typeof pinnedWidth === "number" &&
+                            Number.isFinite(pinnedWidth)
+                          ) {
+                            pinnedStyle.width = pinnedWidth;
+                          }
+                        }
+
+                        return (
+                          <TableCell
+                            key={cell.id}
+                            style={pinnedStyle}
+                            className={cn(
+                              "truncate border-e p-3 py-2 text-sm last:border-e-0 data-[pinned]:bg-background/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=right][data-last-col=right]]:border-s",
+                              cell.column.id === rightStickyDividerTargetId &&
+                              "!border-e-0",
+                            )}
+                            data-pinned={pinned || undefined}
+                            data-last-col={lastPinned || undefined}
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={visibleColumnCount}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table22.tsx b/blocks/data-table22.tsx
new file mode 100644
index 0000000..95d8515
--- /dev/null
+++ b/blocks/data-table22.tsx
@@ -0,0 +1,1609 @@
+"use client";
+
+import type {
+  Column,
+  ColumnDef,
+  PaginationState,
+  Row,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  CheckCircle,
+  ChevronsUpDown,
+  Clock,
+  LoaderIcon,
+  MoreHorizontal,
+  SquareMinusIcon,
+  SquarePlusIcon,
+  Truck,
+  XCircle,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialSelection?: RowSelectionState;
+  enableRowSelection?: boolean;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialGlobalFilter = "",
+    initialSelection = {},
+    enableRowSelection = true,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      globalFilter,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableRowSelection,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+    rowSelection,
+    setRowSelection,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  schema: z.ZodSchema;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  schema,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = schema.parse(row.original) as TData;
+  const itemRecord = item as Record<string, unknown>;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem
+          onClick={() =>
+            navigator.clipboard.writeText(
+              String(itemRecord[idField] || itemRecord.id),
+            )
+          }
+        >
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+type StatusVariant = "info" | "primary" | "success" | "warning" | "destructive";
+
+const OrderItemSchema = z.object({
+  id: z.string(),
+  productName: z.string(),
+  category: z.string(),
+  price: z.number(),
+  quantity: z.number(),
+});
+
+const OrderStatusSchema = z.object({
+  label: z.string(),
+  variant: z.enum(["info", "primary", "success", "warning", "destructive"]),
+});
+
+export const CustomerRecordSchema = z.object({
+  id: z.string(),
+  latestOrder: z.string(),
+  customer: z.object({
+    name: z.string(),
+    email: z.string(),
+    avatar: z.string(),
+  }),
+  total: z.number(),
+  totalItems: z.number(),
+  status: OrderStatusSchema,
+  items: z.array(OrderItemSchema),
+});
+
+type CustomerRecord = z.infer<typeof CustomerRecordSchema>;
+type OrderItem = z.infer<typeof OrderItemSchema>;
+
+type RawOrder = {
+  id: string;
+  orderNumber: string;
+  customer: string;
+  customerEmail: string;
+  customerAvatar: string;
+  total: string;
+  status: {
+    label: string;
+    variant: StatusVariant;
+  };
+  items: Array<{
+    id: string;
+    productName: string;
+    category: string;
+    price: string;
+    quantity: number;
+  }>;
+};
+
+const rawOrders: RawOrder[] = [
+  {
+    id: "1",
+    orderNumber: "ORD-2401",
+    customer: "Marcus Chen",
+    customerEmail: "marcus.chen@email.com",
+    customerAvatar: "1.png",
+    total: "$384.92",
+    status: {
+      label: "Processing",
+      variant: "info",
+    },
+    items: [
+      {
+        id: "1-1",
+        productName: "USB-C Hub",
+        category: "Electronics",
+        price: "$49.99",
+        quantity: 1,
+      },
+      {
+        id: "1-2",
+        productName: "Laptop Bag",
+        category: "Accessories",
+        price: "$79.99",
+        quantity: 1,
+      },
+      {
+        id: "1-3",
+        productName: "Portable SSD",
+        category: "Electronics",
+        price: "$129.99",
+        quantity: 1,
+      },
+      {
+        id: "1-4",
+        productName: "Cable Sleeve",
+        category: "Accessories",
+        price: "$14.99",
+        quantity: 2,
+      },
+      {
+        id: "1-5",
+        productName: "Webcam Cover",
+        category: "Accessories",
+        price: "$9.99",
+        quantity: 3,
+      },
+      {
+        id: "1-6",
+        productName: "Laptop Stand",
+        category: "Office",
+        price: "$54.99",
+        quantity: 1,
+      },
+      {
+        id: "1-7",
+        productName: "USB Cable Pack",
+        category: "Electronics",
+        price: "$19.99",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-2402",
+    customer: "Nina Patel",
+    customerEmail: "nina.patel@email.com",
+    customerAvatar: "2.png",
+    total: "$567.45",
+    status: {
+      label: "Shipped",
+      variant: "primary",
+    },
+    items: [
+      {
+        id: "2-1",
+        productName: "Air Purifier",
+        category: "Home",
+        price: "$189.99",
+        quantity: 1,
+      },
+      {
+        id: "2-2",
+        productName: "Essential Oil Set",
+        category: "Home",
+        price: "$44.99",
+        quantity: 1,
+      },
+      {
+        id: "2-3",
+        productName: "Humidifier",
+        category: "Home",
+        price: "$69.99",
+        quantity: 1,
+      },
+      {
+        id: "2-4",
+        productName: "Room Spray",
+        category: "Home",
+        price: "$24.99",
+        quantity: 2,
+      },
+      {
+        id: "2-5",
+        productName: "Aromatherapy Diffuser",
+        category: "Home",
+        price: "$39.99",
+        quantity: 1,
+      },
+      {
+        id: "2-6",
+        productName: "Scented Candles",
+        category: "Home",
+        price: "$34.99",
+        quantity: 3,
+      },
+      {
+        id: "2-7",
+        productName: "Pillow Spray",
+        category: "Home",
+        price: "$16.99",
+        quantity: 1,
+      },
+      {
+        id: "2-8",
+        productName: "Room Thermometer",
+        category: "Home",
+        price: "$19.99",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-2403",
+    customer: "Oliver Martinez",
+    customerEmail: "oliver.martinez@email.com",
+    customerAvatar: "3.png",
+    total: "$892.34",
+    status: {
+      label: "Delivered",
+      variant: "success",
+    },
+    items: [
+      {
+        id: "3-1",
+        productName: "Digital Camera",
+        category: "Electronics",
+        price: "$449.99",
+        quantity: 1,
+      },
+      {
+        id: "3-2",
+        productName: "Camera Bag",
+        category: "Accessories",
+        price: "$89.99",
+        quantity: 1,
+      },
+      {
+        id: "3-3",
+        productName: "Memory Card 128GB",
+        category: "Electronics",
+        price: "$34.99",
+        quantity: 2,
+      },
+      {
+        id: "3-4",
+        productName: "Tripod",
+        category: "Accessories",
+        price: "$79.99",
+        quantity: 1,
+      },
+      {
+        id: "3-5",
+        productName: "Camera Lens",
+        category: "Electronics",
+        price: "$199.99",
+        quantity: 1,
+      },
+      {
+        id: "3-6",
+        productName: "Lens Cleaning Kit",
+        category: "Accessories",
+        price: "$12.99",
+        quantity: 1,
+      },
+      {
+        id: "3-7",
+        productName: "Extra Battery",
+        category: "Electronics",
+        price: "$44.99",
+        quantity: 2,
+      },
+      {
+        id: "3-8",
+        productName: "Camera Strap",
+        category: "Accessories",
+        price: "$24.99",
+        quantity: 1,
+      },
+      {
+        id: "3-9",
+        productName: "Lens Filter",
+        category: "Accessories",
+        price: "$29.99",
+        quantity: 1,
+      },
+      {
+        id: "3-10",
+        productName: "Remote Shutter",
+        category: "Electronics",
+        price: "$19.99",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-2404",
+    customer: "Sophia Kim",
+    customerEmail: "sophia.kim@email.com",
+    customerAvatar: "4.png",
+    total: "$246.78",
+    status: {
+      label: "Pending",
+      variant: "warning",
+    },
+    items: [
+      {
+        id: "4-1",
+        productName: "Art Supplies Set",
+        category: "Art",
+        price: "$89.99",
+        quantity: 1,
+      },
+      {
+        id: "4-2",
+        productName: "Sketchbook",
+        category: "Art",
+        price: "$24.99",
+        quantity: 2,
+      },
+      {
+        id: "4-3",
+        productName: "Colored Pencils",
+        category: "Art",
+        price: "$39.99",
+        quantity: 1,
+      },
+      {
+        id: "4-4",
+        productName: "Watercolor Set",
+        category: "Art",
+        price: "$44.99",
+        quantity: 1,
+      },
+      {
+        id: "4-5",
+        productName: "Paint Brushes",
+        category: "Art",
+        price: "$29.99",
+        quantity: 1,
+      },
+      {
+        id: "4-6",
+        productName: "Canvas Pack",
+        category: "Art",
+        price: "$34.99",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "5",
+    orderNumber: "ORD-2405",
+    customer: "Jackson Wu",
+    customerEmail: "jackson.wu@email.com",
+    customerAvatar: "5.png",
+    total: "$1,234.56",
+    status: {
+      label: "Processing",
+      variant: "info",
+    },
+    items: [
+      {
+        id: "5-1",
+        productName: "Electric Bike",
+        category: "Sports",
+        price: "$899.99",
+        quantity: 1,
+      },
+      {
+        id: "5-2",
+        productName: "Bike Helmet",
+        category: "Sports",
+        price: "$79.99",
+        quantity: 1,
+      },
+      {
+        id: "5-3",
+        productName: "Bike Lock",
+        category: "Accessories",
+        price: "$49.99",
+        quantity: 1,
+      },
+      {
+        id: "5-4",
+        productName: "Bike Lights",
+        category: "Accessories",
+        price: "$39.99",
+        quantity: 1,
+      },
+      {
+        id: "5-5",
+        productName: "Water Bottle Holder",
+        category: "Accessories",
+        price: "$14.99",
+        quantity: 1,
+      },
+      {
+        id: "5-6",
+        productName: "Bike Phone Mount",
+        category: "Accessories",
+        price: "$24.99",
+        quantity: 1,
+      },
+      {
+        id: "5-7",
+        productName: "Repair Kit",
+        category: "Tools",
+        price: "$29.99",
+        quantity: 1,
+      },
+      {
+        id: "5-8",
+        productName: "Bike Pump",
+        category: "Tools",
+        price: "$34.99",
+        quantity: 1,
+      },
+      {
+        id: "5-9",
+        productName: "Bike Bell",
+        category: "Accessories",
+        price: "$9.99",
+        quantity: 1,
+      },
+      {
+        id: "5-10",
+        productName: "Reflective Vest",
+        category: "Clothing",
+        price: "$19.99",
+        quantity: 1,
+      },
+      {
+        id: "5-11",
+        productName: "Cycling Gloves",
+        category: "Clothing",
+        price: "$24.99",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "6",
+    orderNumber: "ORD-2406",
+    customer: "Emma Thompson",
+    customerEmail: "emma.thompson@email.com",
+    customerAvatar: "6.png",
+    total: "$678.90",
+    status: {
+      label: "Shipped",
+      variant: "primary",
+    },
+    items: [
+      {
+        id: "6-1",
+        productName: "Robot Vacuum",
+        category: "Home",
+        price: "$299.99",
+        quantity: 1,
+      },
+      {
+        id: "6-2",
+        productName: "Vacuum Filters",
+        category: "Home",
+        price: "$19.99",
+        quantity: 3,
+      },
+      {
+        id: "6-3",
+        productName: "Cleaning Solution",
+        category: "Home",
+        price: "$24.99",
+        quantity: 2,
+      },
+      {
+        id: "6-4",
+        productName: "Microfiber Cloths",
+        category: "Home",
+        price: "$14.99",
+        quantity: 2,
+      },
+      {
+        id: "6-5",
+        productName: "Dustpan Set",
+        category: "Home",
+        price: "$29.99",
+        quantity: 1,
+      },
+      {
+        id: "6-6",
+        productName: "Mop System",
+        category: "Home",
+        price: "$79.99",
+        quantity: 1,
+      },
+      {
+        id: "6-7",
+        productName: "Broom",
+        category: "Home",
+        price: "$34.99",
+        quantity: 1,
+      },
+      {
+        id: "6-8",
+        productName: "Trash Bags",
+        category: "Home",
+        price: "$19.99",
+        quantity: 2,
+      },
+      {
+        id: "6-9",
+        productName: "Gloves Pack",
+        category: "Home",
+        price: "$12.99",
+        quantity: 1,
+      },
+      {
+        id: "6-10",
+        productName: "Sponge Set",
+        category: "Home",
+        price: "$9.99",
+        quantity: 1,
+      },
+      {
+        id: "6-11",
+        productName: "Air Freshener",
+        category: "Home",
+        price: "$16.99",
+        quantity: 2,
+      },
+      {
+        id: "6-12",
+        productName: "Duster",
+        category: "Home",
+        price: "$19.99",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "7",
+    orderNumber: "ORD-2407",
+    customer: "Lucas Gonzalez",
+    customerEmail: "lucas.gonzalez@email.com",
+    customerAvatar: "7.png",
+    total: "$423.67",
+    status: {
+      label: "Delivered",
+      variant: "success",
+    },
+    items: [
+      {
+        id: "7-1",
+        productName: "Mechanical Keyboard",
+        category: "Electronics",
+        price: "$149.99",
+        quantity: 1,
+      },
+      {
+        id: "7-2",
+        productName: "Keycap Set",
+        category: "Accessories",
+        price: "$59.99",
+        quantity: 1,
+      },
+      {
+        id: "7-3",
+        productName: "Keyboard Wrist Rest",
+        category: "Accessories",
+        price: "$29.99",
+        quantity: 1,
+      },
+      {
+        id: "7-4",
+        productName: "Switch Puller",
+        category: "Tools",
+        price: "$9.99",
+        quantity: 1,
+      },
+      {
+        id: "7-5",
+        productName: "Stabilizers",
+        category: "Parts",
+        price: "$19.99",
+        quantity: 1,
+      },
+      {
+        id: "7-6",
+        productName: "Keyboard Cable",
+        category: "Accessories",
+        price: "$39.99",
+        quantity: 1,
+      },
+      {
+        id: "7-7",
+        productName: "Cleaning Brush",
+        category: "Tools",
+        price: "$7.99",
+        quantity: 1,
+      },
+      {
+        id: "7-8",
+        productName: "Lubricant",
+        category: "Tools",
+        price: "$14.99",
+        quantity: 1,
+      },
+      {
+        id: "7-9",
+        productName: "Extra Switches",
+        category: "Parts",
+        price: "$44.99",
+        quantity: 2,
+      },
+    ],
+  },
+  {
+    id: "8",
+    orderNumber: "ORD-2408",
+    customer: "Ava Robinson",
+    customerEmail: "ava.robinson@email.com",
+    customerAvatar: "8.png",
+    total: "$789.23",
+    status: {
+      label: "Cancelled",
+      variant: "destructive",
+    },
+    items: [
+      {
+        id: "8-1",
+        productName: "Standing Desk",
+        category: "Furniture",
+        price: "$399.99",
+        quantity: 1,
+      },
+      {
+        id: "8-2",
+        productName: "Desk Converter",
+        category: "Furniture",
+        price: "$149.99",
+        quantity: 1,
+      },
+      {
+        id: "8-3",
+        productName: "Monitor Arm",
+        category: "Accessories",
+        price: "$119.99",
+        quantity: 1,
+      },
+      {
+        id: "8-4",
+        productName: "Cable Tray",
+        category: "Accessories",
+        price: "$24.99",
+        quantity: 1,
+      },
+      {
+        id: "8-5",
+        productName: "Desk Pad",
+        category: "Office",
+        price: "$29.99",
+        quantity: 1,
+      },
+      {
+        id: "8-6",
+        productName: "Footrest",
+        category: "Office",
+        price: "$39.99",
+        quantity: 1,
+      },
+      {
+        id: "8-7",
+        productName: "LED Desk Light",
+        category: "Lighting",
+        price: "$64.99",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "9",
+    orderNumber: "ORD-2409",
+    customer: "Ethan Foster",
+    customerEmail: "ethan.foster@email.com",
+    customerAvatar: "9.png",
+    total: "$534.12",
+    status: {
+      label: "Processing",
+      variant: "info",
+    },
+    items: [
+      {
+        id: "9-1",
+        productName: "Espresso Machine",
+        category: "Kitchen",
+        price: "$299.99",
+        quantity: 1,
+      },
+      {
+        id: "9-2",
+        productName: "Coffee Grinder",
+        category: "Kitchen",
+        price: "$89.99",
+        quantity: 1,
+      },
+      {
+        id: "9-3",
+        productName: "Milk Pitcher",
+        category: "Kitchen",
+        price: "$24.99",
+        quantity: 1,
+      },
+      {
+        id: "9-4",
+        productName: "Coffee Beans",
+        category: "Food",
+        price: "$29.99",
+        quantity: 2,
+      },
+      {
+        id: "9-5",
+        productName: "Tamper",
+        category: "Tools",
+        price: "$39.99",
+        quantity: 1,
+      },
+      {
+        id: "9-6",
+        productName: "Cleaning Tablets",
+        category: "Kitchen",
+        price: "$14.99",
+        quantity: 1,
+      },
+      {
+        id: "9-7",
+        productName: "Descaling Solution",
+        category: "Kitchen",
+        price: "$19.99",
+        quantity: 1,
+      },
+      {
+        id: "9-8",
+        productName: "Knock Box",
+        category: "Kitchen",
+        price: "$34.99",
+        quantity: 1,
+      },
+      {
+        id: "9-9",
+        productName: "Thermometer",
+        category: "Tools",
+        price: "$24.99",
+        quantity: 1,
+      },
+      {
+        id: "9-10",
+        productName: "Scale",
+        category: "Tools",
+        price: "$49.99",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "10",
+    orderNumber: "ORD-2410",
+    customer: "Isabella Hayes",
+    customerEmail: "isabella.hayes@email.com",
+    customerAvatar: "10.png",
+    total: "$312.45",
+    status: {
+      label: "Shipped",
+      variant: "primary",
+    },
+    items: [
+      {
+        id: "10-1",
+        productName: "Plant Pots Set",
+        category: "Garden",
+        price: "$49.99",
+        quantity: 1,
+      },
+      {
+        id: "10-2",
+        productName: "Potting Soil",
+        category: "Garden",
+        price: "$24.99",
+        quantity: 2,
+      },
+      {
+        id: "10-3",
+        productName: "Garden Tools",
+        category: "Garden",
+        price: "$39.99",
+        quantity: 1,
+      },
+      {
+        id: "10-4",
+        productName: "Watering Can",
+        category: "Garden",
+        price: "$29.99",
+        quantity: 1,
+      },
+      {
+        id: "10-5",
+        productName: "Plant Food",
+        category: "Garden",
+        price: "$19.99",
+        quantity: 2,
+      },
+      {
+        id: "10-6",
+        productName: "Garden Gloves",
+        category: "Garden",
+        price: "$14.99",
+        quantity: 1,
+      },
+      {
+        id: "10-7",
+        productName: "Plant Labels",
+        category: "Garden",
+        price: "$9.99",
+        quantity: 1,
+      },
+      {
+        id: "10-8",
+        productName: "Spray Bottle",
+        category: "Garden",
+        price: "$12.99",
+        quantity: 1,
+      },
+      {
+        id: "10-9",
+        productName: "Pruning Shears",
+        category: "Garden",
+        price: "$34.99",
+        quantity: 1,
+      },
+      {
+        id: "10-10",
+        productName: "Kneeling Pad",
+        category: "Garden",
+        price: "$19.99",
+        quantity: 1,
+      },
+    ],
+  },
+];
+
+const parseCurrency = (value: string) =>
+  Number(value.replace(/[^0-9.-]+/g, "")) || 0;
+
+const customerNameMap: Record<string, string> = {
+  "1": "مانی چن",
+  "2": "نینا پاتل",
+  "3": "اولیور مارتینز",
+  "4": "سوفیا کیم",
+  "5": "جکسون",
+  "6": "اما تامپسون",
+  "7": "لوقاس گونزالز",
+  "8": "آوا رابینسون",
+  "9": "ایتان فاستر",
+  "10": "ایزابلا هایز",
+};
+
+const statusLabelMap: Record<string, string> = {
+  Processing: "در حال پردازش",
+  Shipped: "ارسال‌شده",
+  Delivered: "تحویل‌شده",
+  Pending: "در انتظار",
+  Cancelled: "لغو‌شده",
+};
+
+const categoryMap: Record<string, string> = {
+  Electronics: "الکترونیک",
+  Accessories: "لوازم جانبی",
+  Home: "خانه",
+  Office: "اداری",
+  Art: "هنر",
+  Sports: "ورزشی",
+  Tools: "ابزار",
+  Clothing: "پوشاک",
+  Furniture: "مبلمان",
+  Lighting: "روشنایی",
+  Kitchen: "آشپزخانه",
+  Food: "مواد غذایی",
+  Garden: "باغبانی",
+  Parts: "قطعات",
+};
+
+const productNameMap: Record<string, string> = {
+  "1-1": "هاب USB-C",
+  "1-2": "کیف لپ‌تاپ",
+  "1-3": "SSD قابل حمل",
+  "1-4": "روکش کابل",
+  "1-5": "پوشش وب‌کم",
+  "1-6": "پایه لپ‌تاپ",
+  "1-7": "بسته کابل USB",
+  "2-1": "تصفیه‌کننده هوا",
+  "2-2": "ست روغن‌های ضروری",
+  "2-3": "رطوبت‌ساز",
+  "2-4": "اسپری اتاق",
+  "2-5": "پخش‌کننده رایحه",
+  "2-6": "شمع‌های معطر",
+  "2-7": "اسپری بالش",
+  "2-8": "دماسنج اتاق",
+  "3-1": "دوربین دیجیتال",
+  "3-2": "کیف دوربین",
+  "3-3": "کارت حافظه ۱۲۸ گیگ",
+  "3-4": "سه‌پایه",
+  "3-5": "لنز دوربین",
+  "3-6": "کیت تمیزکننده لنز",
+  "3-7": "باتری یدک",
+  "3-8": "بند دوربین",
+  "3-9": "فیلتر لنز",
+  "3-10": "ریموت شاتر",
+  "4-1": "ست لوازم هنری",
+  "4-2": "دفتر طراحی",
+  "4-3": "مداد رنگی",
+  "4-4": "ست آبرنگ",
+  "4-5": "قلم‌مو",
+  "4-6": "بسته بوم",
+  "5-1": "دوچرخه برقی",
+  "5-2": "کلاه ایمنی دوچرخه",
+  "5-3": "قفل دوچرخه",
+  "5-4": "چراغ دوچرخه",
+  "5-5": "نگهدارنده بطری",
+  "5-6": "پایه نگهدارنده گوشی",
+  "5-7": "کیت تعمیر",
+  "5-8": "پمپ دوچرخه",
+  "5-9": "زنگ دوچرخه",
+  "5-10": "جلیقه بازتابنده",
+  "5-11": "دستکش دوچرخه‌سواری",
+  "6-1": "جاروبرقی رباتیک",
+  "6-2": "فیلتر جاروبرقی",
+  "6-3": "محلول تمیزکننده",
+  "6-4": "دستمال میکروفایبر",
+  "6-5": "ست جارو و خاک‌انداز",
+  "6-6": "سیستم تی",
+  "6-7": "جارو",
+  "6-8": "کیسه زباله",
+  "6-9": "بسته دستکش",
+  "6-10": "ست اسفنج",
+  "6-11": "خوشبوکننده هوا",
+  "6-12": "گردگیر",
+  "7-1": "کیبورد مکانیکی",
+  "7-2": "ست کلید",
+  "7-3": "پد مچ دست",
+  "7-4": "کشنده سوئیچ",
+  "7-5": "ثبات‌دهنده",
+  "7-6": "کابل کیبورد",
+  "7-7": "برس تمیزکننده",
+  "7-8": "روغن روان‌کننده",
+  "7-9": "سوئیچ یدک",
+  "8-1": "میز ایستاده",
+  "8-2": "تبدیل‌کننده میز",
+  "8-3": "بازوی مانیتور",
+  "8-4": "سینی کابل",
+  "8-5": "پد میز",
+  "8-6": "پاورقی",
+  "8-7": "چراغ LED میز",
+  "9-1": "دستگاه اسپرسو",
+  "9-2": "آسیاب قهوه",
+  "9-3": "پیچر شیر",
+  "9-4": "دانه قهوه",
+  "9-5": "تمپر",
+  "9-6": "قرص تمیزکننده",
+  "9-7": "محلول رسوب‌زدا",
+  "9-8": "جعبه ضربه",
+  "9-9": "دماسنج",
+  "9-10": "ترازو",
+  "10-1": "ست گلدان",
+  "10-2": "خاک گلدان",
+  "10-3": "ابزار باغبانی",
+  "10-4": "آبپاش",
+  "10-5": "کود گیاه",
+  "10-6": "دستکش باغبانی",
+  "10-7": "برچسب گیاه",
+  "10-8": "اسپری آب",
+  "10-9": "قیچی هرس",
+  "10-10": "زانوبند",
+};
+
+export const validatedData = CustomerRecordSchema.array().parse(
+  rawOrders.map((order) => {
+    const parsedItems = order.items.map((item) => ({
+      ...item,
+      productName: productNameMap[item.id] ?? item.productName,
+      category: categoryMap[item.category] ?? item.category,
+      price: parseCurrency(item.price),
+    }));
+    const totalItems = parsedItems.reduce(
+      (acc, item) => acc + item.quantity,
+      0,
+    );
+
+    return {
+      id: order.id,
+      latestOrder: order.orderNumber,
+      customer: {
+        name: customerNameMap[order.id] ?? order.customer,
+        email: order.customerEmail,
+        avatar: order.customerAvatar,
+      },
+      total: parseCurrency(order.total),
+      totalItems,
+      status: {
+        ...order.status,
+        label: statusLabelMap[order.status.label] ?? order.status.label,
+      },
+      items: parsedItems,
+    };
+  }),
+);
+
+const statusBadgeClassMap: Record<StatusVariant, string> = {
+  info: "border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-500/40 dark:bg-sky-500/10 dark:text-sky-400",
+  primary:
+    "border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/40 dark:bg-violet-500/10 dark:text-violet-400",
+  success:
+    "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-400",
+  warning:
+    "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-400",
+  destructive:
+    "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/40 dark:bg-rose-500/10 dark:text-rose-400",
+};
+
+const getStatusBadgeClasses = (variant: StatusVariant) =>
+  statusBadgeClassMap[variant] ?? statusBadgeClassMap.info;
+
+const avatarColorClasses = [
+  "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
+  "bg-emerald-100 text-emerald-700 dark:bg-emerald-800 dark:text-emerald-300",
+  "bg-indigo-100 text-indigo-700 dark:bg-indigo-800 dark:text-indigo-300",
+  "bg-amber-100 text-amber-700 dark:bg-amber-800 dark:text-amber-300",
+  "bg-rose-100 text-rose-700 dark:bg-rose-800 dark:text-rose-300",
+  "bg-sky-100 text-sky-700 dark:bg-sky-800 dark:text-sky-300",
+];
+
+const getAvatarColor = (value: string) => {
+  const hash = value
+    .split("")
+    .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+
+  return avatarColorClasses[hash % avatarColorClasses.length];
+};
+
+const getInitials = (name: string) => {
+  const parts = name.trim().split(" ");
+  const first = parts[0]?.charAt(0) ?? "";
+  const second = parts[1]?.charAt(0) ?? parts[0]?.charAt(1) ?? "";
+  return `${first}${second}`;
+};
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const orderStatuses: StatusOption[] = [
+  { label: "در حال پردازش", value: "در حال پردازش", icon: LoaderIcon },
+  { label: "ارسال‌شده", value: "ارسال‌شده", icon: Truck },
+  { label: "تحویل‌شده", value: "تحویل‌شده", icon: CheckCircle },
+  { label: "در انتظار", value: "در انتظار", icon: Clock },
+  { label: "لغو‌شده", value: "لغو‌شده", icon: XCircle },
+];
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+
+// Sub-table component for order items
+function OrderItemsSubTable({ items }: { items: OrderItem[] }) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+
+  const columns = React.useMemo<ColumnDef<OrderItem>[]>(
+    () => [
+      {
+        accessorKey: "productName",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="محصول" />
+        ),
+        cell: (info) => (
+          <span className="text-sm font-medium">
+            {info.getValue() as string}
+          </span>
+        ),
+        enableSorting: true,
+      },
+      {
+        accessorKey: "category",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="دسته‌بندی" />
+        ),
+        cell: (info) => (
+          <span className="text-sm text-muted-foreground">
+            {info.getValue() as string}
+          </span>
+        ),
+        enableSorting: true,
+      },
+      {
+        accessorKey: "quantity",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="تعداد" />
+        ),
+        cell: (info) => (
+          <span className="text-sm font-medium tabular-nums">
+            {formatNumber(info.getValue() as number)}
+          </span>
+        ),
+        meta: { align: "right", className: "tabular-nums" },
+        enableSorting: true,
+      },
+      {
+        accessorKey: "price",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="قیمت" />
+        ),
+        cell: (info) => (
+          <span className="text-sm font-semibold tabular-nums">
+            {formatPrice(info.getValue() as number)}
+          </span>
+        ),
+        meta: { align: "right", className: "tabular-nums" },
+        enableSorting: true,
+      },
+    ],
+    [],
+  );
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    pageCount: Math.ceil(items.length / pagination.pageSize),
+    state: {
+      sorting,
+      pagination,
+    },
+    onSortingChange: setSorting,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowId: (row: OrderItem) => row.id,
+  });
+
+  return (
+    <div className="rounded-lg bg-muted/30 p-4">
+      <div className="mb-3 flex items-center justify-between">
+        <h4 className="text-sm font-semibold">اقلام سفارش</h4>
+        <Badge variant="outline" className="text-xs">
+          {formatNumber(items.length)} مورد
+        </Badge>
+      </div>
+      <div className="rounded-md border bg-background">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="bg-muted/50">
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id} className="h-9">
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  className="transition-colors hover:bg-muted/50"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id} className="py-2">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-16 text-center text-sm text-muted-foreground"
+                >
+                  اقلامی یافت نشد
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {items.length > pagination.pageSize && (
+        <div className="mt-3 flex items-center justify-between px-2">
+          <div className="text-xs text-muted-foreground">
+            نمایش {formatNumber(table.getRowModel().rows.length)} از{" "}
+            {formatNumber(items.length)} مورد
+          </div>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="صفحه قبلی"
+            >
+              قبلی
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="صفحه بعدی"
+            >
+              بعدی
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const columns: ColumnDef<CustomerRecord>[] = [
+  {
+    id: "expand",
+    cell: ({ row }) => {
+      const toggleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        row.toggleExpanded();
+      };
+      return (
+        <div className="flex justify-center">
+          <Button
+            variant="ghost"
+            size="icon"
+            data-state={row.getIsExpanded() ? "open" : "closed"}
+            onClick={toggleExpand}
+            aria-label={row.getIsExpanded() ? "بستن جزئیات" : "نمایش جزئیات"}
+          >
+            {row.getIsExpanded() ? <SquareMinusIcon /> : <SquarePlusIcon />}
+          </Button>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => {
+      const { name, email, avatar } = row.original.customer;
+
+      return (
+        <div className="flex items-center gap-3">
+          <Avatar className="size-10 border border-border/60">
+            <AvatarFallback
+              className={cn(
+                "text-xs font-semibold uppercase",
+                getAvatarColor(avatar || name),
+              )}
+            >
+              {getInitials(name)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col items-start gap-0.5">
+            <span className="text-sm font-medium">{name}</span>
+          </div>
+          <span className="text-xs text-muted-foreground">{email}</span>
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "total",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مجموع" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-sm font-semibold tabular-nums">
+        {formatPrice(row.original.total)}
+      </span>
+    ),
+    meta: { align: "right", className: "tabular-nums" },
+    enableSorting: true,
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.status;
+      const statusMeta = getOrderStatusMeta(status.label);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <Badge
+          variant="outline"
+          className={cn("gap-1", getStatusBadgeClasses(status.variant))}
+        >
+          {StatusIcon ? <StatusIcon className="size-3" /> : null}
+          <span className="text-xs font-medium">{status.label}</span>
+        </Badge>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    accessorKey: "totalItems",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تعداد" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-sm text-muted-foreground">
+        {formatNumber(row.original.totalItems)} مورد
+      </span>
+    ),
+    meta: { align: "right" },
+    enableSorting: true,
+  },
+];
+
+export function DataTable22({ className }: { className?: string }) {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id,
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با زیرجدول
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده مشتریان با جزئیات اقلام سفارش در ردیف گسترش‌یافته.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} colSpan={header.colSpan}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <React.Fragment key={row.id}>
+                      <TableRow data-state={row.getIsSelected() && "selected"}>
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                      {row.getIsExpanded() && (
+                        <TableRow className="bg-muted/30 transition-colors">
+                          <TableCell className="p-0" colSpan={columns.length}>
+                            <OrderItemsSubTable items={row.original.items} />
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </React.Fragment>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table23.tsx b/blocks/data-table23.tsx
new file mode 100644
index 0000000..768e765
--- /dev/null
+++ b/blocks/data-table23.tsx
@@ -0,0 +1,343 @@
+"use client";
+
+import type { ColumnDef, Row, SortingState } from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import * as React from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+type Person = {
+  name: string;
+  title: string;
+  email: string;
+  role: string;
+};
+
+type EmploymentGroup = {
+  type: string;
+  people: Person[];
+};
+
+type FlattenedPerson = Person & {
+  employmentType: string;
+};
+
+type ColumnMeta = {
+  headerClassName?: string;
+  cellClassName?: string;
+};
+
+const employmentGroups: EmploymentGroup[] = [
+  {
+    type: "تمام‌وقت",
+    people: [
+      {
+        name: "امیلیا هاکینز",
+        title: "مدیر ارشد محصول",
+        email: "amelia.hawkins@example.com",
+        role: "مالک",
+      },
+      {
+        name: "الیاس پاتل",
+        title: "معمار نرم‌افزار",
+        email: "elias.patel@example.com",
+        role: "مدیر",
+      },
+      {
+        name: "مژگان رید",
+        title: "سرپرست موفقیت مشتری",
+        email: "morgan.reed@example.com",
+        role: "عضو",
+      },
+    ],
+  },
+  {
+    type: "قراردادی",
+    people: [
+      {
+        name: "ایلا بنت",
+        title: "استراتژیست برند",
+        email: "isla.bennett@example.com",
+        role: "مدیر",
+      },
+      {
+        name: "نوح کیم",
+        title: "مشاور امنیت",
+        email: "noah.kim@example.com",
+        role: "عضو",
+      },
+    ],
+  },
+  {
+    type: "کارآموزی",
+    people: [
+      {
+        name: "نیلوفر Sharma",
+        title: "کارآموز طراحی محصول",
+        email: "priya.sharma@example.com",
+        role: "کارآموز",
+      },
+      {
+        name: "دانیال Brooks",
+        title: "کارآموز بازاریابی",
+        email: "caleb.brooks@example.com",
+        role: "کارآموز",
+      },
+    ],
+  },
+  {
+    type: "پاره‌وقت",
+    people: [
+      {
+        name: "لیلا Alvarez",
+        title: "نویسنده فنی",
+        email: "sofia.alvarez@example.com",
+        role: "عضو",
+      },
+    ],
+  },
+];
+
+export function DataTable23({ className }: { className?: string }) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+
+  const flatData = React.useMemo(() => {
+    const result: FlattenedPerson[] = [];
+
+    employmentGroups.forEach((group) => {
+      group.people.forEach((person) =>
+        result.push({
+          ...person,
+          employmentType: group.type,
+        }),
+      );
+    });
+
+    return result;
+  }, []);
+
+  const columns = React.useMemo<ColumnDef<FlattenedPerson>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: "نام",
+        cell: ({ row }) => (
+          <div className="text-sm font-semibold text-foreground">
+            {row.original.name}
+          </div>
+        ),
+        meta: {
+          headerClassName: "ps-6 pe-3 text-start text-sm sm:ps-4",
+          cellClassName: "py-4 ps-6 pe-3 text-start sm:ps-4",
+        },
+      },
+      {
+        accessorKey: "title",
+        header: "سمت",
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {row.original.title}
+          </span>
+        ),
+        meta: {
+          headerClassName: "px-3 text-start text-sm",
+          cellClassName: "px-3 py-4",
+        },
+      },
+      {
+        accessorKey: "email",
+        header: "ایمیل",
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {row.original.email}
+          </span>
+        ),
+        meta: {
+          headerClassName: "px-3 text-start text-sm",
+          cellClassName: "px-3 py-4",
+        },
+      },
+      {
+        accessorKey: "role",
+        header: "نقش",
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {row.original.role}
+          </span>
+        ),
+        meta: {
+          headerClassName: "px-3 text-start text-sm",
+          cellClassName: "px-3 py-4",
+        },
+      },
+    ],
+    [],
+  );
+
+  const table = useReactTable({
+    data: flatData,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.email,
+  });
+
+  const rowModelRows = table.getRowModel().rows;
+
+  const groupedRows = React.useMemo(() => {
+    if (!rowModelRows.length) {
+      return [];
+    }
+
+    const groups: Array<{
+      employmentType: string;
+      rows: Row<FlattenedPerson>[];
+    }> = [];
+
+    let currentEmploymentType = "";
+    let currentGroup: Row<FlattenedPerson>[] = [];
+
+    rowModelRows.forEach((row) => {
+      if (row.original.employmentType !== currentEmploymentType) {
+        if (currentGroup.length > 0) {
+          groups.push({
+            employmentType: currentEmploymentType,
+            rows: currentGroup,
+          });
+        }
+        currentEmploymentType = row.original.employmentType;
+        currentGroup = [row];
+      } else {
+        currentGroup.push(row);
+      }
+    });
+
+    if (currentGroup.length > 0) {
+      groups.push({
+        employmentType: currentEmploymentType,
+        rows: currentGroup,
+      });
+    }
+
+    return groups;
+  }, [rowModelRows]);
+
+  const columnCount = columns.length;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با ردیف‌های گروه‌بندی‌شده
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با ردیف‌های گروه‌بندی‌شده برای تفکیک انواع مختلف
+              همکاری در یک جدول.
+            </p>
+          </div>
+
+          <div className="rounded-md bg-background">
+            <Table>
+              <TableHeader className="">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      const meta = header.column.columnDef.meta as
+                        | ColumnMeta
+                        | undefined;
+
+                      return (
+                        <TableHead
+                          key={header.id}
+                          className={cn(
+                            "py-3.5 text-start text-sm font-semibold text-muted-foreground",
+                            meta?.headerClassName,
+                          )}
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+
+              <TableBody>
+                {groupedRows.length ? (
+                  groupedRows.map((group) => (
+                    <React.Fragment key={group.employmentType}>
+                      <TableRow className="bg-muted/30 hover:bg-muted/30">
+                        <TableCell
+                          colSpan={columnCount}
+                          className="text-xs font-semibold tracking-wide text-muted-foreground"
+                        >
+                          {group.employmentType}
+                        </TableCell>
+                      </TableRow>
+                      {group.rows.map((row) => (
+                        <TableRow key={row.id}>
+                          {row.getVisibleCells().map((cell) => {
+                            const meta =
+                              (cell.column.columnDef.meta as ColumnMeta) ?? {};
+
+                            return (
+                              <TableCell
+                                key={cell.id}
+                                className={cn(
+                                  "align-middle text-sm text-muted-foreground",
+                                  meta.cellClassName,
+                                )}
+                              >
+                                {flexRender(
+                                  cell.column.columnDef.cell,
+                                  cell.getContext(),
+                                )}
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      ))}
+                    </React.Fragment>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columnCount}
+                      className="h-24 text-center text-sm text-muted-foreground"
+                    >
+                      نتیجه‌ای یافت نشد
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table24.tsx b/blocks/data-table24.tsx
new file mode 100644
index 0000000..318caa8
--- /dev/null
+++ b/blocks/data-table24.tsx
@@ -0,0 +1,357 @@
+"use client";
+
+import type { ColumnDef, Row, SortingState } from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import * as React from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type ColumnMeta = {
+  cellClassName?: string;
+};
+
+type Transaction = {
+  id: number;
+  invoiceNumber: string;
+  href: string;
+  amount: number;
+  tax?: number;
+  client: string;
+  description: string;
+};
+
+type DayGroup = {
+  date: string;
+  dateTime: string;
+  transactions: Transaction[];
+};
+
+const days: DayGroup[] = [
+  {
+    date: "امروز",
+    dateTime: "2024-05-20",
+    transactions: [
+      {
+        id: 101,
+        invoiceNumber: "ORD-48392",
+        href: "/orders/ORD-48392",
+        amount: 1248.5,
+        tax: 98.5,
+        client: "خانه آرورا",
+        description: "۳ ست ملحفه کتان + بسته‌بندی هدیه",
+      },
+      {
+        id: 102,
+        invoiceNumber: "PAYOUT-2298",
+        href: "/payouts/PAYOUT-2298",
+        amount: 4830,
+        client: "بازارچه مسیرهای وحشی",
+        description: "پرداخت هفتگی فروشنده",
+      },
+      {
+        id: 103,
+        invoiceNumber: "ORD-48310",
+        href: "/orders/ORD-48310",
+        amount: 312,
+        tax: 23.8,
+        client: "نیلا گرین",
+        description: "بازپرداخت در حال بررسی",
+      },
+    ],
+  },
+  {
+    date: "دیروز",
+    dateTime: "2024-05-19",
+    transactions: [
+      {
+        id: 104,
+        invoiceNumber: "ORD-48277",
+        href: "/orders/ORD-48277",
+        amount: 2940,
+        tax: 201.3,
+        client: "شرکت ترک شهری",
+        description: "۱۲ عدد عصای کوهنوردی کربنی",
+      },
+      {
+        id: 105,
+        invoiceNumber: "ORD-48261",
+        href: "/orders/ORD-48261",
+        amount: 864,
+        client: "مایا پاتل",
+        description: "پیش‌سفارش کفش اسپرت نسخه محدود",
+      },
+      {
+        id: 106,
+        invoiceNumber: "PAYOUT-2297",
+        href: "/payouts/PAYOUT-2297",
+        amount: 1980,
+        client: "لوازم خانگی لومن",
+        description: "درخواست پرداخت فوری",
+      },
+    ],
+  },
+  {
+    date: "یکشنبه",
+    dateTime: "2024-05-18",
+    transactions: [
+      {
+        id: 107,
+        invoiceNumber: "ORD-48190",
+        href: "/orders/ORD-48190",
+        amount: 490,
+        tax: 34.3,
+        client: "تأمین اطلس",
+        description: "سفارش نمونه فروش سازمانی",
+      },
+      {
+        id: 108,
+        invoiceNumber: "ORD-48175",
+        href: "/orders/ORD-48175",
+        amount: 156,
+        client: "جیمی لی",
+        description: "پرداخت تقسیمی انجام نشده",
+      },
+    ],
+  },
+];
+
+type FlatTransaction = Transaction & { dayDate: string; dayDateTime: string };
+
+function flattenDays(src: DayGroup[]): FlatTransaction[] {
+  const out: FlatTransaction[] = [];
+  for (const d of src) {
+    for (const t of d.transactions) {
+      out.push({ ...t, dayDate: d.date, dayDateTime: d.dateTime });
+    }
+  }
+  return out;
+}
+
+export function DataTable24({ className }: { className?: string }) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const data = React.useMemo(() => flattenDays(days), []);
+
+  const columns = React.useMemo<ColumnDef<FlatTransaction>[]>(
+    () => [
+      {
+        id: "invoice",
+        header: "فاکتور",
+        cell: ({ row }) => {
+          const t = row.original;
+          return (
+            <div className="flex flex-col gap-1">
+              <a href={t.href} className="text-sm font-semibold">
+                {t.invoiceNumber}
+              </a>
+            </div>
+          );
+        },
+        meta: {
+          cellClassName: "py-5 pe-6",
+        },
+      },
+      {
+        id: "amount-status",
+        header: "مبلغ",
+        cell: ({ row }) => {
+          const t = row.original;
+          return (
+            <>
+              <div className="flex gap-6">
+                <div className="flex-auto">
+                  <div className="flex items-start gap-3">
+                    <div className="text-sm/6 font-medium text-foreground">
+                      {formatPrice(t.amount)}
+                    </div>
+                    {t.tax ? (
+                      <div className="mt-1 text-xs/5 text-muted-foreground">
+                        + {formatPrice(t.tax)} مالیات
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+              <div className="absolute end-full bottom-0 h-px w-screen bg-border" />
+              <div className="absolute bottom-0 start-0 h-px w-screen bg-border" />
+            </>
+          );
+        },
+        meta: {
+          cellClassName: "relative py-5 pe-6",
+        },
+      },
+      {
+        id: "client-desc",
+        header: "مشتری",
+        cell: ({ row }) => {
+          const t = row.original;
+          return (
+            <>
+              <div className="text-sm/6 text-foreground">{t.client}</div>
+            </>
+          );
+        },
+        meta: {
+          cellClassName: "hidden py-5 pe-6 sm:table-cell",
+        },
+      },
+      {
+        id: "description",
+        header: "توضیحات",
+        cell: ({ row }) => {
+          const t = row.original;
+          return <div className="text-sm text-foreground">{t.description}</div>;
+        },
+        meta: {
+          cellClassName: "py-5 pe-6",
+        },
+      },
+    ],
+    [],
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (r) => String(r.id),
+  });
+
+  const rowModelRows = table.getRowModel().rows;
+
+  const grouped = React.useMemo(() => {
+    const byDay = new Map<
+      string,
+      { date: string; dateTime: string; rows: Row<FlatTransaction>[] }
+    >();
+    for (const r of rowModelRows) {
+      const key = r.original.dayDateTime;
+      if (!byDay.has(key)) {
+        byDay.set(key, {
+          date: r.original.dayDate,
+          dateTime: r.original.dayDateTime,
+          rows: [],
+        });
+      }
+      byDay.get(key)!.rows.push(r);
+    }
+    return days.map((d) => byDay.get(d.dateTime)).filter(Boolean) as Array<{
+      date: string;
+      dateTime: string;
+      rows: Row<FlatTransaction>[];
+    }>;
+  }, [rowModelRows]);
+
+  const columnCount = columns.length;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با سرستون‌های مخفی
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول تراکنش‌ها با سرستون‌های مخفی و ردیف‌های گروه‌بندی‌شده بر
+              اساس تاریخ.
+            </p>
+          </div>
+
+          <div className="overflow-hidden border-t border-border">
+            <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
+              <div className="[&>div]:overflow-visible">
+                <Table className="w-full text-start text-sm">
+                  <TableHeader className="sr-only [&_*]:border-0 [&_tr]:border-0">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow key={headerGroup.id} className="border-0">
+                        {headerGroup.headers.map((header) => (
+                          <TableHead
+                            key={header.id}
+                            scope="col"
+                            className="p-0 text-start"
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableHeader>
+
+                  <TableBody>
+                    {grouped.map((group) => (
+                      <React.Fragment key={group.dateTime}>
+                        <TableRow className="text-sm/6 text-foreground">
+                          <TableHead
+                            scope="colgroup"
+                            colSpan={columnCount}
+                            className="relative isolate border-0 py-2 text-start font-semibold text-foreground"
+                          >
+                            <time dateTime={group.dateTime}>{group.date}</time>
+                            <div className="absolute inset-y-0 end-full -z-10 w-screen border-b border-border bg-muted" />
+                            <div className="absolute inset-y-0 start-0 -z-10 w-screen border-b border-border bg-muted" />
+                          </TableHead>
+                        </TableRow>
+
+                        {group.rows.map((row) => (
+                          <TableRow key={row.id} className="border-0">
+                            {row.getVisibleCells().map((cell) => {
+                              const meta =
+                                (cell.column.columnDef.meta as ColumnMeta) ??
+                                {};
+                              return (
+                                <TableCell
+                                  key={cell.id}
+                                  className={cn(
+                                    "border-0 p-0 text-start align-top",
+                                    meta.cellClassName,
+                                  )}
+                                >
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        ))}
+                      </React.Fragment>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table25.tsx b/blocks/data-table25.tsx
new file mode 100644
index 0000000..3d61e2d
--- /dev/null
+++ b/blocks/data-table25.tsx
@@ -0,0 +1,319 @@
+"use client";
+
+import type { ColumnDef, SortingState } from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import * as React from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type LineItem = {
+  id: number;
+  sku: string;
+  name: string;
+  description: string;
+  quantity: number;
+  unitPrice: number;
+};
+
+type LineItemColumnMeta = {
+  headerClassName?: string;
+  cellClassName?: string;
+};
+
+const lineItems: LineItem[] = [
+  {
+    id: 1,
+    sku: "RBK-32-MN",
+    name: "کوله‌پشتی ریج‌وی",
+    description: "سرمه‌ای تیره · ظرفیت ۳۲ لیتر",
+    quantity: 2,
+    unitPrice: 145,
+  },
+  {
+    id: 2,
+    sku: "EVB-20-SL",
+    name: "بطری روزمره ۲۰ اونسی",
+    description: "خاکستری · استیل سه‌لایه",
+    quantity: 3,
+    unitPrice: 28,
+  },
+  {
+    id: 3,
+    sku: "DBH-FT-NV",
+    name: "هودی پشمی سپیده‌دم",
+    description: "پارچه فرنچ تری · رنگ شب‌افت",
+    quantity: 1,
+    unitPrice: 95,
+  },
+  {
+    id: 4,
+    sku: "TRV-ORG-SET",
+    name: "ست نظم‌دهنده سفر",
+    description: "کیسه‌های مشبک · بسته ۴ عددی",
+    quantity: 1,
+    unitPrice: 72,
+  },
+  {
+    id: 5,
+    sku: "EXP-90-OLV",
+    name: "کیف دوشی اکسپدیشن ۹۰ لیتر",
+    description: "ریپ‌استاپ ضدآب · زیتونی",
+    quantity: 1,
+    unitPrice: 260,
+  },
+];
+
+const lineTotal = (item: LineItem) => item.quantity * item.unitPrice;
+
+export function DataTable25({ className }: { className?: string }) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+
+  const columns = React.useMemo<ColumnDef<LineItem>[]>(
+    () => [
+      {
+        id: "product",
+        header: "محصول",
+        cell: ({ row }) => {
+          const item = row.original;
+          return (
+            <div className="text-sm">
+              <div className="font-medium text-foreground">{item.name}</div>
+              <div className="mt-1 truncate text-muted-foreground">
+                {item.description}
+              </div>
+              <div className="mt-1 text-xs tracking-wide text-muted-foreground">
+                کد کالا: {item.sku}
+              </div>
+            </div>
+          );
+        },
+        meta: {
+          headerClassName:
+            "py-3.5 ps-4 pe-3 text-start text-sm font-semibold text-foreground sm:ps-0 h-auto",
+          cellClassName:
+            "max-w-0 py-5 ps-4 pe-3 align-top text-sm sm:ps-0 text-foreground",
+        },
+      },
+      {
+        accessorKey: "quantity",
+        header: "تعداد",
+        cell: ({ row }) => formatNumber(row.original.quantity),
+        meta: {
+          headerClassName:
+            "hidden px-3 py-3.5 text-end text-sm font-semibold text-foreground sm:table-cell",
+          cellClassName:
+            "hidden px-3 py-5 text-end text-sm text-muted-foreground sm:table-cell",
+        },
+      },
+      {
+        accessorKey: "unitPrice",
+        header: "قیمت واحد",
+        cell: ({ row }) => formatPrice(row.original.unitPrice),
+        meta: {
+          headerClassName:
+            "hidden px-3 py-3.5 text-end text-sm font-semibold text-foreground sm:table-cell",
+          cellClassName:
+            "hidden px-3 py-5 text-end text-sm text-muted-foreground sm:table-cell",
+        },
+      },
+      {
+        id: "total",
+        header: "جمع",
+        cell: ({ row }) => formatPrice(lineTotal(row.original)),
+        meta: {
+          headerClassName:
+            "py-3.5 ps-3 pe-4 text-end text-sm font-semibold text-foreground sm:pe-0 h-auto",
+          cellClassName:
+            "py-5 ps-3 pe-4 text-end text-sm text-muted-foreground sm:pe-0",
+        },
+      },
+    ],
+    [],
+  );
+
+  const table = useReactTable({
+    data: lineItems,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => String(row.id),
+  });
+
+  const subtotalAmount = lineItems.reduce(
+    (sum, item) => sum + lineTotal(item),
+    0,
+  );
+  const taxAmount = 64.08;
+  const totalAmount = subtotalAmount + taxAmount;
+
+  const subtotal = formatPrice(subtotalAmount);
+  const tax = formatPrice(taxAmount);
+  const total = formatPrice(totalAmount);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول داده با ردیف‌های جمع‌بندی
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با ردیف‌های خلاصه، مناسب نمایش فاکتورها
+            </p>
+          </div>
+        </div>
+        <div className="overflow-x-auto">
+          <Table className="min-w-full">
+            <colgroup>
+              <col className="w-full sm:w-1/2" />
+              <col className="sm:w-1/6" />
+              <col className="sm:w-1/6" />
+              <col className="sm:w-1/6" />
+            </colgroup>
+
+            <TableHeader className="text-foreground [&_tr]:border-border/60">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow
+                  key={headerGroup.id}
+                  className="border-0 hover:bg-transparent"
+                >
+                  {headerGroup.headers.map((header) => {
+                    const meta =
+                      (header.column.columnDef.meta as LineItemColumnMeta) ??
+                      {};
+                    return (
+                      <TableHead
+                        key={header.id}
+                        scope="col"
+                        className={cn(
+                          "h-auto bg-transparent text-sm font-semibold",
+                          meta.headerClassName,
+                        )}
+                      >
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+
+            <TableBody>
+              {table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  className="border-border/60 hover:bg-transparent"
+                >
+                  {row.getVisibleCells().map((cell) => {
+                    const meta =
+                      (cell.column.columnDef.meta as LineItemColumnMeta) ?? {};
+                    return (
+                      <TableCell
+                        key={cell.id}
+                        className={cn(meta.cellClassName)}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableBody>
+
+            <TableFooter className="!border-0 !bg-transparent !font-normal">
+              <TableRow className="border-0 hover:bg-transparent">
+                <TableHead
+                  scope="row"
+                  colSpan={3}
+                  className="hidden h-auto border-0 pt-6 pe-3 ps-4 text-end text-sm font-normal text-muted-foreground sm:table-cell sm:ps-0"
+                >
+                  جمع جزء
+                </TableHead>
+                <TableHead
+                  scope="row"
+                  className="h-auto border-0 pt-6 pe-3 ps-4 text-start text-sm font-normal text-muted-foreground sm:hidden"
+                >
+                  جمع جزء
+                </TableHead>
+                <TableCell className="border-0 pt-6 pe-4 ps-3 text-end text-sm text-muted-foreground sm:pe-0">
+                  {subtotal}
+                </TableCell>
+              </TableRow>
+
+              <TableRow className="border-0 hover:bg-transparent">
+                <TableHead
+                  scope="row"
+                  colSpan={3}
+                  className="hidden h-auto border-0 pt-4 pe-3 ps-4 text-end text-sm font-normal text-muted-foreground sm:table-cell sm:ps-0"
+                >
+                  مالیات
+                </TableHead>
+                <TableHead
+                  scope="row"
+                  className="h-auto border-0 pt-4 pe-3 ps-4 text-start text-sm font-normal text-muted-foreground sm:hidden"
+                >
+                  مالیات
+                </TableHead>
+                <TableCell className="border-0 pt-4 pe-4 ps-3 text-end text-sm text-muted-foreground sm:pe-0">
+                  {tax}
+                </TableCell>
+              </TableRow>
+
+              <TableRow className="border-0 hover:bg-transparent">
+                <TableHead
+                  scope="row"
+                  colSpan={3}
+                  className="hidden h-auto border-0 pt-4 pe-3 ps-4 text-end text-sm font-semibold text-foreground sm:table-cell sm:ps-0"
+                >
+                  جمع کل
+                </TableHead>
+                <TableHead
+                  scope="row"
+                  className="h-auto border-0 pt-4 pe-3 ps-4 text-start text-sm font-semibold text-foreground sm:hidden"
+                >
+                  جمع کل
+                </TableHead>
+                <TableCell className="border-0 pt-4 pe-4 ps-3 text-end text-sm font-semibold text-foreground sm:pe-0">
+                  {total}
+                </TableCell>
+              </TableRow>
+            </TableFooter>
+          </Table>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/data-table26.tsx b/blocks/data-table26.tsx
new file mode 100644
index 0000000..168baaa
--- /dev/null
+++ b/blocks/data-table26.tsx
@@ -0,0 +1,1186 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type RowSelectionState,
+  type SortingState,
+  type Table as ReactTable,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  ChevronsUpDown,
+  MoreHorizontal,
+} from "lucide-react";
+import * as React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+type TransactionStatus =
+  | "posted"
+  | "pending"
+  | "review"
+  | "excluded"
+  | "completed";
+
+type Transaction = {
+  id: string;
+  date: string;
+  name: string;
+  description: string;
+  amount: number;
+  taxAmount: number;
+  category: string;
+  counterparty: string;
+  tags: string[];
+  account: string;
+  method: string;
+  assigned: string | null;
+  status: TransactionStatus;
+};
+
+type ColumnMeta = {
+  headerClassName?: string;
+  cellClassName?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+};
+
+type UseTableScrollOptions = {
+  scrollAmount?: number;
+  useColumnWidths?: boolean;
+  startFromColumn?: number;
+};
+
+type UseStickyColumnsOptions<TData> = {
+  table?: ReactTable<TData>;
+};
+
+type HorizontalPaginationProps = {
+  canScrollLeft: boolean;
+  canScrollRight: boolean;
+  onScrollLeft: () => void;
+  onScrollRight: () => void;
+  className?: string;
+};
+
+const formatCurrency = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  dateStyle: "medium",
+});
+
+const formatDate = (value: string) => {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : dateFormatter.format(date);
+};
+
+const statusLabels: Record<TransactionStatus, string> = {
+  posted: "ثبت‌شده",
+  pending: "در انتظار",
+  review: "نیاز به بررسی",
+  excluded: "مستثنا",
+  completed: "تکمیل‌شده",
+};
+
+const methodLabels: Record<string, string> = {
+  Transfer: "انتقال",
+  Card: "کارت",
+  Wire: "حواله",
+  ACH: "ACH",
+  Manual: "دستی",
+};
+
+const statusStyles: Record<TransactionStatus, string> = {
+  posted:
+    "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10",
+  pending:
+    "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/40 dark:bg-amber-500/10",
+  review:
+    "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-500/40 dark:bg-slate-500/10",
+  excluded:
+    "border-rose-200 bg-rose-50 text-rose-600 dark:border-rose-500/40 dark:bg-rose-500/10",
+  completed:
+    "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10",
+};
+
+const transactions: Transaction[] = [
+  {
+    id: "txn-2082",
+    date: "2024-05-14",
+    name: "واریز درگاه پرداخت",
+    description: "درآمد اشتراک برای دوره آوریل",
+    amount: 14825.32,
+    taxAmount: 0,
+    category: "درآمد",
+    counterparty: "Stripe Payments",
+    tags: ["اشتراک", "تکرارشونده"],
+    account: "حساب جاری بنیان‌گذاران · ۰۴۲۱",
+    method: "Transfer",
+    assigned: "حنا لی",
+    status: "posted",
+  },
+  {
+    id: "txn-2081",
+    date: "2024-05-13",
+    name: "Linear",
+    description: "اشتراک فضای کاری تیم محصول",
+    amount: -320,
+    taxAmount: 26.4,
+    category: "نرم‌افزار",
+    counterparty: "Linear HQ",
+    tags: ["محصول", "SaaS"],
+    account: "کارت کپیتال وان · ۵۵۲۲",
+    method: "Card",
+    assigned: "مارکوس لین",
+    status: "pending",
+  },
+  {
+    id: "txn-2080",
+    date: "2024-05-12",
+    name: "ری یو آی FX",
+    description: "تبدیل IRR به EUR برای فاکتورهای برلین",
+    amount: -184.35,
+    taxAmount: 0,
+    category: "کارمزد بانکی",
+    counterparty: "Mercury Bank",
+    tags: ["بین‌المللی"],
+    account: "خزانه · ۱۱۸۹",
+    method: "Wire",
+    assigned: "نوح پاتل",
+    status: "review",
+  },
+  {
+    id: "txn-2079",
+    date: "2024-05-10",
+    name: "حقوق Gusto",
+    description: "دوره ۴۲ · مهندسی و بازاریابی",
+    amount: -48600,
+    taxAmount: 8123.45,
+    category: "حقوق و دستمزد",
+    counterparty: "Gusto",
+    tags: ["حقوق", "آمریکا"],
+    account: "عملیاتی · ۷۷۳۰",
+    method: "ACH",
+    assigned: null,
+    status: "completed",
+  },
+  {
+    id: "txn-2078",
+    date: "2024-05-09",
+    name: "AWS",
+    description: "مصرف آوریل در کلاسترهای لبه و استنتاج",
+    amount: -9832.11,
+    taxAmount: 0,
+    category: "زیرساخت",
+    counterparty: "Amazon Web Services",
+    tags: ["زیرساخت", "مصرف"],
+    account: "خزانه · ۱۱۸۹",
+    method: "Transfer",
+    assigned: "حنا لی",
+    status: "posted",
+  },
+  {
+    id: "txn-2077",
+    date: "2024-05-08",
+    name: "Ramp",
+    description: "پرواز و هتل برای اردوی تیم",
+    amount: -6120.88,
+    taxAmount: 531.83,
+    category: "سفر",
+    counterparty: "Ramp Corporate",
+    tags: ["اردو", "Q2"],
+    account: "کارت کپیتال وان · ۵۵۲۲",
+    method: "Card",
+    assigned: "ایزابلا چو",
+    status: "review",
+  },
+  {
+    id: "txn-2076",
+    date: "2024-05-07",
+    name: "Notion",
+    description: "پلن سازمانی برای تیم GTM",
+    amount: -850,
+    taxAmount: 72.25,
+    category: "نرم‌افزار",
+    counterparty: "Notion Labs",
+    tags: ["GTM", "قرارداد"],
+    account: "عملیاتی · ۷۷۳۰",
+    method: "Card",
+    assigned: null,
+    status: "pending",
+  },
+  {
+    id: "txn-2075",
+    date: "2024-05-06",
+    name: "تعدیل دستی",
+    description: "تطبیق تعویض سخت‌افزار",
+    amount: 0,
+    taxAmount: 0,
+    category: "تطبیق",
+    counterparty: "داخلی",
+    tags: [],
+    account: "حساب جاری بنیان‌گذاران · ۰۴۲۱",
+    method: "Manual",
+    assigned: "مارکوس لین",
+    status: "excluded",
+  },
+];
+
+const columns: ColumnDef<Transaction>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="انتخاب همه ردیف‌ها"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="انتخاب ردیف"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 48,
+      minWidth: 48,
+      headerClassName: "!px-0 !border-r-0",
+      cellClassName: "!px-0 !border-r-0",
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "date",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تاریخ" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex flex-col">
+        <span className="font-medium text-foreground">
+          {formatDate(row.original.date)}
+        </span>
+        <span className="text-xs text-muted-foreground">{row.original.id}</span>
+      </div>
+    ),
+    meta: {
+      width: 140,
+      minWidth: 140,
+      headerClassName:
+        "!border-r-0 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60",
+      cellClassName:
+        "!border-r-0 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60",
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "description",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="شرح" />
+    ),
+    cell: ({ row }) => (
+      <div className="relative flex flex-col gap-1">
+        <span className="font-medium text-foreground">{row.original.name}</span>
+        <span className="text-[0.8125rem] text-muted-foreground">
+          {row.original.description}
+        </span>
+      </div>
+    ),
+    meta: {
+      width: 320,
+      minWidth: 320,
+      headerClassName:
+        "!border-r-0 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60 after:absolute after:right-0 after:top-0 after:bottom-0 after:w-[0.5px] after:bg-border/60",
+      cellClassName:
+        "!border-r-0 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60 after:absolute after:right-0 after:top-0 after:bottom-0 after:w-[0.5px] after:bg-border/60",
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "amount",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مبلغ" />
+    ),
+    cell: ({ row }) => (
+      <span
+        className={cn(
+          "font-semibold",
+          row.original.amount > 0
+            ? "text-emerald-600 dark:text-emerald-400"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(row.original.amount)}
+      </span>
+    ),
+    meta: {
+      width: 150,
+      minWidth: 150,
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "taxAmount",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مالیات" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-muted-foreground">
+        {row.original.taxAmount ? formatCurrency(row.original.taxAmount) : ""}
+      </span>
+    ),
+    meta: {
+      width: 130,
+      minWidth: 130,
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "category",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline" className="font-medium">
+        {row.original.category}
+      </Badge>
+    ),
+    meta: {
+      width: 200,
+      minWidth: 200,
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "counterparty",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="از / به" />
+    ),
+    cell: ({ row }) => (
+      <div>
+        <p className="text-[0.8125rem] font-medium">
+          {row.original.counterparty}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          {methodLabels[row.original.method] ?? row.original.method}
+        </p>
+      </div>
+    ),
+    meta: {
+      width: 220,
+      minWidth: 220,
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "tags",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="برچسب‌ها" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex flex-wrap gap-2">
+        {row.original.tags.length ? (
+          row.original.tags.map((tag) => (
+            <Badge key={tag} variant="secondary" className="rounded-full">
+              {tag}
+            </Badge>
+          ))
+        ) : (
+          <span className="text-xs text-muted-foreground">بدون برچسب</span>
+        )}
+      </div>
+    ),
+    enableSorting: false,
+    meta: {
+      width: 260,
+      minWidth: 260,
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "account",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="حساب" />
+    ),
+    cell: ({ row }) => <span>{row.original.account}</span>,
+    meta: {
+      width: 220,
+      minWidth: 220,
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "method",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="روش پرداخت" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">
+        {methodLabels[row.original.method] ?? row.original.method}
+      </Badge>
+    ),
+    meta: {
+      width: 160,
+      minWidth: 160,
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "assigned",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مسئول" />
+    ),
+    cell: ({ row }) =>
+      row.original.assigned ? (
+        <span className="font-medium">{row.original.assigned}</span>
+      ) : (
+        <Badge variant="outline" className="text-muted-foreground">
+          بدون مسئول
+        </Badge>
+      ),
+    meta: {
+      width: 200,
+      minWidth: 200,
+    } satisfies ColumnMeta,
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline" className={statusStyles[row.original.status]}>
+        {statusLabels[row.original.status]}
+      </Badge>
+    ),
+    meta: {
+      width: 160,
+      minWidth: 160,
+    } satisfies ColumnMeta,
+  },
+  {
+    id: "actions",
+    header: () => <span className="sr-only">عملیات</span>,
+    cell: () => (
+      <div className="flex items-center justify-center">
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <MoreHorizontal className="h-4 w-4" />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 48,
+      minWidth: 48,
+      headerClassName:
+        "!px-0 md:sticky md:right-0 z-20 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60",
+      cellClassName:
+        "!px-0 md:sticky md:right-0 z-20 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60",
+    } satisfies ColumnMeta,
+  },
+];
+
+function useStickyColumns<TData>({ table }: UseStickyColumnsOptions<TData>) {
+  const isVisible = React.useCallback(
+    (id: string) =>
+      table
+        ?.getAllLeafColumns()
+        .some((column) => column.id === id && column.getIsVisible()) ?? true,
+    [table],
+  );
+
+  const stickyPositions = React.useMemo(() => {
+    let position = 0;
+    const positions: Record<string, number> = {};
+
+    positions.select = position;
+    position += 48;
+
+    if (isVisible("date")) {
+      positions.date = position;
+      position += 140;
+    }
+
+    if (isVisible("description")) {
+      positions.description = position;
+      position += 320;
+    }
+
+    return positions;
+  }, [isVisible]);
+
+  const getStickyStyle = React.useCallback(
+    (columnId: string) => {
+      const left = stickyPositions[columnId];
+      if (left === undefined) return undefined;
+      return {
+        "--stick-left": `${left}px`,
+      } as React.CSSProperties;
+    },
+    [stickyPositions],
+  );
+
+  const getStickyClassName = React.useCallback(
+    (columnId: string, baseClassName?: string, isHeader = false) => {
+      const stickyColumns = ["select", "date", "description"];
+      const isSticky = stickyColumns.includes(columnId);
+      return cn(
+        baseClassName,
+        isSticky && "md:sticky md:left-[var(--stick-left)]",
+        isSticky && "isolate",
+        isSticky && (isHeader ? "z-30" : "z-20"),
+      );
+    },
+    [],
+  );
+
+  return {
+    getStickyStyle,
+    getStickyClassName,
+  };
+}
+
+function useTableScroll(options: UseTableScrollOptions = {}) {
+  const {
+    scrollAmount = 120,
+    useColumnWidths = false,
+    startFromColumn = 0,
+  } = options;
+
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(false);
+  const [isScrollable, setIsScrollable] = React.useState(false);
+  const currentColumnIndex = React.useRef(startFromColumn);
+  const isScrollingProgrammatically = React.useRef(false);
+  const scrollTimeoutRef = React.useRef<number | undefined>(undefined);
+
+  const getColumnPositions = React.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return [];
+
+    const table = container.querySelector("table");
+    if (!table) return [];
+
+    const headerRow = table.querySelector("thead tr");
+    if (!headerRow) return [];
+
+    const columns = Array.from(headerRow.querySelectorAll("th"));
+    const positions: number[] = [];
+    let currentPosition = 0;
+
+    for (const column of columns) {
+      positions.push(currentPosition);
+      currentPosition += (column as HTMLElement).offsetWidth;
+    }
+
+    return positions;
+  }, []);
+
+  const syncColumnIndex = React.useCallback(() => {
+    const container = containerRef.current;
+    if (!container || !useColumnWidths || isScrollingProgrammatically.current)
+      return;
+
+    const allColumnPositions = getColumnPositions();
+    if (allColumnPositions.length === 0) return;
+
+    const currentScrollLeft = container.scrollLeft;
+    const maxScrollLeft = container.scrollWidth - container.clientWidth;
+
+    if (currentScrollLeft <= 10) {
+      currentColumnIndex.current = startFromColumn;
+      return;
+    }
+    if (currentScrollLeft >= maxScrollLeft - 10) {
+      currentColumnIndex.current = allColumnPositions.length - 1;
+      return;
+    }
+
+    let accumulatedDistance = 0;
+    let detectedColumn = startFromColumn;
+
+    for (let i = startFromColumn; i < allColumnPositions.length - 1; i++) {
+      const columnStart = allColumnPositions[i] ?? 0;
+      const columnEnd = allColumnPositions[i + 1] ?? 0;
+      const columnWidth = columnEnd - columnStart;
+      const nextDistance = accumulatedDistance + columnWidth;
+
+      if (
+        Math.abs(currentScrollLeft - accumulatedDistance) <=
+        Math.abs(currentScrollLeft - nextDistance)
+      ) {
+        detectedColumn = i;
+        break;
+      }
+
+      accumulatedDistance = nextDistance;
+      detectedColumn = i + 1;
+    }
+
+    currentColumnIndex.current = Math.max(
+      startFromColumn,
+      Math.min(detectedColumn, allColumnPositions.length - 1),
+    );
+  }, [useColumnWidths, startFromColumn, getColumnPositions]);
+
+  const checkScrollability = React.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const { scrollWidth, clientWidth } = container;
+    const isScrollableTable = scrollWidth > clientWidth;
+
+    if (useColumnWidths) {
+      syncColumnIndex();
+
+      const allColumnPositions = getColumnPositions();
+      const maxColumnIndex = allColumnPositions.length - 1;
+
+      const newCanScrollLeft =
+        currentColumnIndex.current > startFromColumn ||
+        container.scrollLeft > 10;
+      const newCanScrollRight = currentColumnIndex.current < maxColumnIndex;
+
+      setIsScrollable(isScrollableTable);
+      setCanScrollLeft(newCanScrollLeft);
+      setCanScrollRight(newCanScrollRight);
+    } else {
+      const { scrollLeft } = container;
+      setIsScrollable(isScrollableTable);
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
+    }
+  }, [useColumnWidths, startFromColumn, getColumnPositions, syncColumnIndex]);
+
+  const scrollLeft = React.useCallback(
+    (smooth = true) => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      if (useColumnWidths) {
+        const allColumnPositions = getColumnPositions();
+        if (allColumnPositions.length === 0) return;
+
+        if (
+          currentColumnIndex.current <= startFromColumn &&
+          container.scrollLeft <= 0
+        ) {
+          return;
+        }
+
+        if (
+          currentColumnIndex.current <= startFromColumn &&
+          container.scrollLeft > 0
+        ) {
+          isScrollingProgrammatically.current = true;
+          container.scrollTo({
+            left: 0,
+            behavior: "smooth",
+          });
+
+          window.setTimeout(() => {
+            isScrollingProgrammatically.current = false;
+            syncColumnIndex();
+            checkScrollability();
+          }, 500);
+          return;
+        }
+
+        const originalColumnIndex = currentColumnIndex.current;
+        currentColumnIndex.current = currentColumnIndex.current - 1;
+
+        const currentScrollLeft = container.scrollLeft;
+        const maxScrollLeft = container.scrollWidth - container.clientWidth;
+
+        let targetScrollLeft: number;
+
+        if (Math.abs(currentScrollLeft - maxScrollLeft) < 10) {
+          const lastColumnStart = allColumnPositions[originalColumnIndex] ?? 0;
+          const lastColumnEnd =
+            allColumnPositions[originalColumnIndex + 1] ??
+            lastColumnStart + 150;
+          const lastColumnWidth = lastColumnEnd - lastColumnStart;
+
+          targetScrollLeft = Math.max(0, currentScrollLeft - lastColumnWidth);
+        } else {
+          targetScrollLeft = 0;
+          for (let i = startFromColumn; i < currentColumnIndex.current; i++) {
+            const columnStart = allColumnPositions[i] ?? 0;
+            const columnEnd = allColumnPositions[i + 1] ?? 0;
+            const columnWidth = columnEnd - columnStart;
+            targetScrollLeft += columnWidth;
+          }
+        }
+
+        isScrollingProgrammatically.current = true;
+
+        container.scrollTo({
+          left: targetScrollLeft,
+          behavior: "smooth",
+        });
+
+        window.setTimeout(() => {
+          isScrollingProgrammatically.current = false;
+          syncColumnIndex();
+          checkScrollability();
+        }, 500);
+      } else {
+        container.scrollBy({
+          left: -scrollAmount,
+          behavior: smooth ? "smooth" : "auto",
+        });
+      }
+    },
+    [
+      checkScrollability,
+      getColumnPositions,
+      scrollAmount,
+      startFromColumn,
+      syncColumnIndex,
+      useColumnWidths,
+    ],
+  );
+
+  const scrollRight = React.useCallback(
+    (smooth = true) => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      if (useColumnWidths) {
+        const allColumnPositions = getColumnPositions();
+        if (allColumnPositions.length === 0) return;
+        const maxColumnIndex = allColumnPositions.length - 1;
+
+        if (currentColumnIndex.current >= maxColumnIndex) {
+          return;
+        }
+
+        currentColumnIndex.current = currentColumnIndex.current + 1;
+
+        isScrollingProgrammatically.current = true;
+
+        if (currentColumnIndex.current === maxColumnIndex) {
+          container.scrollTo({
+            left: container.scrollWidth - container.clientWidth,
+            behavior: "smooth",
+          });
+        } else {
+          let targetScrollLeft = 0;
+          for (let i = startFromColumn; i < currentColumnIndex.current; i++) {
+            const columnStart = allColumnPositions[i] ?? 0;
+            const columnEnd = allColumnPositions[i + 1] ?? 0;
+            targetScrollLeft += columnEnd - columnStart;
+          }
+
+          container.scrollTo({
+            left: targetScrollLeft,
+            behavior: "smooth",
+          });
+        }
+
+        window.setTimeout(() => {
+          isScrollingProgrammatically.current = false;
+          syncColumnIndex();
+          checkScrollability();
+        }, 500);
+      } else {
+        container.scrollBy({
+          left: scrollAmount,
+          behavior: smooth ? "smooth" : "auto",
+        });
+      }
+    },
+    [
+      checkScrollability,
+      getColumnPositions,
+      scrollAmount,
+      startFromColumn,
+      syncColumnIndex,
+      useColumnWidths,
+    ],
+  );
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    currentColumnIndex.current = startFromColumn;
+    checkScrollability();
+
+    const handleScroll = () => {
+      if (isScrollingProgrammatically.current) return;
+
+      if (scrollTimeoutRef.current !== undefined) {
+        window.clearTimeout(scrollTimeoutRef.current);
+      }
+
+      scrollTimeoutRef.current = window.setTimeout(() => {
+        checkScrollability();
+      }, 100);
+    };
+
+    const handleResize = () => {
+      currentColumnIndex.current = startFromColumn;
+      checkScrollability();
+    };
+
+    container.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleResize);
+
+    let resizeObserver: ResizeObserver | undefined;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        currentColumnIndex.current = startFromColumn;
+        checkScrollability();
+      });
+
+      resizeObserver.observe(container);
+    }
+
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      if (scrollTimeoutRef.current !== undefined) {
+        window.clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [checkScrollability, startFromColumn]);
+
+  return {
+    containerRef,
+    canScrollLeft,
+    canScrollRight,
+    isScrollable,
+    scrollLeft,
+    scrollRight,
+  };
+}
+
+const HorizontalPagination = ({
+  canScrollLeft,
+  canScrollRight,
+  onScrollLeft,
+  onScrollRight,
+  className,
+}: HorizontalPaginationProps) => {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <Button
+        variant="outline"
+        size="icon"
+        disabled={!canScrollLeft}
+        className="h-7 w-7"
+        onClick={onScrollLeft}
+        aria-label="پیمایش به ستون‌های قبلی"
+      >
+        <ArrowLeft
+          className={cn(
+            "h-3.5 w-3.5",
+            canScrollLeft ? "text-primary" : "text-muted-foreground",
+          )}
+        />
+      </Button>
+      <Button
+        variant="outline"
+        size="icon"
+        disabled={!canScrollRight}
+        className="h-7 w-7"
+        onClick={onScrollRight}
+        aria-label="پیمایش به ستون‌های بعدی"
+      >
+        <ArrowRight
+          className={cn(
+            "h-3.5 w-3.5",
+            canScrollRight ? "text-primary" : "text-muted-foreground",
+          )}
+        />
+      </Button>
+    </div>
+  );
+};
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <div className="flex items-center gap-1.5 text-[0.8125rem] text-muted-foreground">
+        <span>{title}</span>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex w-full items-center justify-between gap-1.5",
+        "py-2 text-[0.8125rem]",
+        "text-muted-foreground hover:text-foreground",
+        "cursor-pointer transition-colors outline-none",
+      )}
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      <span className="ms-2 flex h-3.5 w-3.5 items-center justify-center">
+        {sorted === "desc" ? (
+          <ArrowDown className="h-3 w-3" />
+        ) : sorted === "asc" ? (
+          <ArrowUp className="h-3 w-3" />
+        ) : (
+          <ChevronsUpDown className="h-3 w-3 opacity-70" />
+        )}
+      </span>
+    </button>
+  );
+};
+
+export const DataTable26 = ({ className }: { className?: string }) => {
+  const [sorting, setSorting] = React.useState<SortingState>([
+    { id: "date", desc: true },
+  ]);
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+  const table = useReactTable({
+    data: transactions,
+    columns,
+    state: {
+      sorting,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  });
+
+  const { getStickyStyle, getStickyClassName } = useStickyColumns({ table });
+
+  const tableScroll = useTableScroll({
+    useColumnWidths: true,
+    startFromColumn: 3,
+  });
+
+  const visibleColumnCount = table.getVisibleLeafColumns().length;
+  const visibleColumnIds = table
+    .getVisibleLeafColumns()
+    .map((column) => column.id);
+  const actionsColumnIndex = visibleColumnIds.indexOf("actions");
+  const rightStickyDividerTargetId =
+    actionsColumnIndex > 0 ? visibleColumnIds[actionsColumnIndex - 1] : null;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 text-start">
+          <h2 className="text-xl font-bold tracking-tight">
+            جدول تراکنش‌ها با کنترل‌های افقی
+          </h2>
+          <p className="mt-2 max-w-2xl text-muted-foreground">
+            ستون‌های اول چسبان، کنترل‌های پیمایش و نوار عملیات واکنش‌گرا، مرور
+            داده‌های مالی متراکم را آسان می‌کنند.
+          </p>
+        </div>
+
+        <div className="overflow-hidden rounded-lg border border-border/60 bg-card [--dt-cell-bg:var(--background)] [--dt-header-bg:var(--muted)] [--dt-row-hover-bg:color-mix(in_oklab,var(--background)_98%,var(--foreground)_2%)] [--dt-row-selected-bg:color-mix(in_oklab,var(--background)_98%,var(--foreground)_2%)] [--dt-row-selected-hover-bg:color-mix(in_oklab,var(--background)_96%,var(--foreground)_4%)] dark:[--dt-header-bg:var(--card)] dark:[--dt-row-hover-bg:var(--muted)] dark:[--dt-row-selected-bg:var(--muted)] dark:[--dt-row-selected-hover-bg:color-mix(in_oklab,var(--muted)_80%,var(--foreground)_20%)]">
+          <div
+            ref={tableScroll.containerRef}
+            className="overflow-x-auto overscroll-x-none"
+          >
+            <table className="w-full min-w-[1200px] caption-bottom text-[0.8125rem]">
+              <TableHeader className="sticky top-0 z-10 border-b-[0.5px] border-border/60 bg-[var(--dt-header-bg)]">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow
+                    key={headerGroup.id}
+                    className="!border-0 hover:bg-transparent"
+                  >
+                    {headerGroup.headers.map((header) => {
+                      const meta =
+                        (header.column.columnDef.meta as ColumnMeta) ?? {};
+                      const sizeStyle: React.CSSProperties = {};
+                      if (meta.width !== undefined) {
+                        sizeStyle.width =
+                          typeof meta.width === "number"
+                            ? `${meta.width}px`
+                            : meta.width;
+                      }
+                      if (meta.minWidth !== undefined) {
+                        sizeStyle.minWidth =
+                          typeof meta.minWidth === "number"
+                            ? `${meta.minWidth}px`
+                            : meta.minWidth;
+                      }
+                      if (meta.maxWidth !== undefined) {
+                        sizeStyle.maxWidth =
+                          typeof meta.maxWidth === "number"
+                            ? `${meta.maxWidth}px`
+                            : meta.maxWidth;
+                      }
+                      const baseClassName = cn(
+                        "relative !h-11 border-r-[0.5px] border-border/60 bg-[var(--dt-header-bg)] !px-3 text-start align-middle !text-[0.8125rem] font-medium !text-muted-foreground whitespace-nowrap last:border-r-0",
+                        header.column.id === rightStickyDividerTargetId &&
+                        "!border-r-0",
+                        meta.headerClassName,
+                      );
+
+                      const stickyStyle =
+                        header.column.id === "actions"
+                          ? undefined
+                          : getStickyStyle(header.column.id);
+
+                      return (
+                        <TableHead
+                          key={header.id}
+                          colSpan={header.colSpan}
+                          className={getStickyClassName(
+                            header.column.id,
+                            baseClassName,
+                            true,
+                          )}
+                          style={{ ...sizeStyle, ...(stickyStyle ?? {}) }}
+                        >
+                          {header.isPlaceholder ? null : header.column.id ===
+                            "description" ? (
+                            <div className="flex items-center justify-between gap-2">
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                              <HorizontalPagination
+                                canScrollLeft={tableScroll.canScrollLeft}
+                                canScrollRight={tableScroll.canScrollRight}
+                                onScrollLeft={tableScroll.scrollLeft}
+                                onScrollRight={tableScroll.scrollRight}
+                                className="hidden md:flex"
+                              />
+                            </div>
+                          ) : (
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )
+                          )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                      className="group h-11 !border-b-[0.5px] border-border/60 bg-[var(--dt-row-bg)] transition-colors [--dt-row-bg:var(--dt-cell-bg)] last:border-b-0 hover:[--dt-row-bg:var(--dt-row-hover-bg)] data-[state=selected]:[--dt-row-bg:var(--dt-row-selected-bg)] data-[state=selected]:hover:[--dt-row-bg:var(--dt-row-selected-hover-bg)]"
+                    >
+                      {row.getVisibleCells().map((cell) => {
+                        const meta =
+                          (cell.column.columnDef.meta as ColumnMeta) ?? {};
+                        const sizeStyle: React.CSSProperties = {};
+                        if (meta.width !== undefined) {
+                          sizeStyle.width =
+                            typeof meta.width === "number"
+                              ? `${meta.width}px`
+                              : meta.width;
+                        }
+                        if (meta.minWidth !== undefined) {
+                          sizeStyle.minWidth =
+                            typeof meta.minWidth === "number"
+                              ? `${meta.minWidth}px`
+                              : meta.minWidth;
+                        }
+                        if (meta.maxWidth !== undefined) {
+                          sizeStyle.maxWidth =
+                            typeof meta.maxWidth === "number"
+                              ? `${meta.maxWidth}px`
+                              : meta.maxWidth;
+                        }
+                        const baseClassName = cn(
+                          "relative h-11 border-r-[0.5px] border-border/60 bg-[var(--dt-row-bg)] !px-3 !py-2 align-middle !text-[0.8125rem] text-foreground whitespace-nowrap last:border-r-0",
+                          cell.column.id === rightStickyDividerTargetId &&
+                          "!border-r-0",
+                          meta.cellClassName,
+                        );
+
+                        const stickyStyle =
+                          cell.column.id === "actions"
+                            ? undefined
+                            : getStickyStyle(cell.column.id);
+
+                        return (
+                          <TableCell
+                            key={cell.id}
+                            className={getStickyClassName(
+                              cell.column.id,
+                              baseClassName,
+                              false,
+                            )}
+                            style={{ ...sizeStyle, ...(stickyStyle ?? {}) }}
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={visibleColumnCount}
+                      className="h-24 text-center text-[0.8125rem] text-muted-foreground"
+                    >
+                      تراکنشی یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table27.tsx b/blocks/data-table27.tsx
new file mode 100644
index 0000000..86fb0d4
--- /dev/null
+++ b/blocks/data-table27.tsx
@@ -0,0 +1,1194 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  ColumnPinningState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ArrowDown,
+  ArrowUp,
+  CheckCheckIcon,
+  CheckCircle,
+  ChevronsUpDown,
+  Clock,
+  LoaderIcon,
+  MoreHorizontal,
+  Package,
+  PieChart,
+  RefreshCcw,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_ROW_HEIGHT = 56;
+const DEFAULT_OVERSCAN = 8;
+const DATA_URL =
+  "https://raw.githubusercontent.com/zerostaticthemes/ShadcnBlocks-library-data/refs/heads/main/data/orders-ecommerce-1000.json";
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  initialColumnPinning?: ColumnPinningState;
+
+  enableRowSelection?: boolean;
+  rowHeight?: number;
+  overscan?: number;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+
+    initialSelection = {},
+    enableRowSelection = true,
+    initialColumnPinning = {},
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    overscan = DEFAULT_OVERSCAN,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+  const [columnPinning, setColumnPinning] =
+    React.useState<ColumnPinningState>(initialColumnPinning);
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+
+      columnPinning,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    onColumnPinningChange: setColumnPinning,
+    enableRowSelection,
+  });
+
+  const rowVirtualizer = useVirtualizer({
+    count: table.getRowModel().rows.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+    measureElement:
+      typeof window !== "undefined" &&
+        navigator.userAgent.indexOf("Firefox") === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    rowSelection,
+    setRowSelection,
+    columnPinning,
+    setColumnPinning,
+    tableContainerRef,
+    rowVirtualizer,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  schema: z.ZodSchema;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  schema,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = schema.parse(row.original) as TData;
+  const itemRecord = item as Record<string, unknown>;
+  const handleCopy = async () => {
+    const value = itemRecord[idField] ?? itemRecord.id;
+    if (!value) {
+      toast.error("شناسه‌ای برای کپی موجود نیست");
+      return;
+    }
+    if (
+      typeof navigator === "undefined" ||
+      !navigator.clipboard ||
+      typeof navigator.clipboard.writeText !== "function"
+    ) {
+      toast.error("کلیپ‌بورد در این مرورگر در دسترس نیست");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(String(value));
+      toast.success("شناسه در کلیپ‌بورد کپی شد");
+    } catch (error) {
+      console.error("Failed to copy ID", error);
+      toast.error("کپی در کلیپ‌بورد انجام نشد");
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem onClick={handleCopy}>
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  items: z.number(),
+  customer: z.string(),
+  customer_email: z.string(),
+  customer_segment: z.string(),
+  fulfillment_channel: z.string(),
+  shipping_service: z.string(),
+  warehouse: z.string(),
+  order_status: z.string(),
+  payment_status: z.string(),
+  payment_method: z.string(),
+  tracking_number: z.string(),
+  assigned_to: z.string(),
+  return_status: z.string(),
+  coupon_code: z.string().nullable(),
+  gift: z.boolean(),
+  notes: z.string(),
+});
+
+export type Order = z.infer<typeof schema>;
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const orderStatuses: StatusOption[] = [
+  { label: "تحویل‌شده", value: "Fulfilled", icon: CheckCircle },
+  { label: "آماده تحویل", value: "Ready for pickup", icon: Package },
+  { label: "تحویل‌نشده", value: "Unfulfilled", icon: Clock },
+];
+
+export const paymentStatuses: StatusOption[] = [
+  { label: "پرداخت‌شده", value: "Paid", icon: CheckCheckIcon },
+  { label: "در انتظار", value: "Pending", icon: LoaderIcon },
+  { label: "مسترد شده", value: "Refunded", icon: RefreshCcw },
+  {
+    label: "مسترد جزئی",
+    value: "Partially refunded",
+    icon: PieChart,
+  },
+];
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const segmentLabels: Record<string, string> = {
+  Enterprise: "سازمانی",
+  Marketplace: "بازارچه",
+  Retail: "خرده‌فروشی",
+  VIP: "ویژه",
+  Wholesale: "عمده‌فروشی",
+};
+
+const fulfillmentLabels: Record<string, string> = {
+  "3PL": "لجستیک شخص ثالث",
+  Dropship: "دراپ‌شیپ",
+  FBA: "FBA",
+  "Merchant Fulfilled": "ارسال توسط فروشنده",
+};
+
+const shippingLabels: Record<string, string> = {
+  "Expedited Air": "هوایی سریع",
+  "Prime 1-Day": "پرایم ۱ روزه",
+  "Prime 2-Day": "پرایم ۲ روزه",
+  "Same-Day Local": "تحویل همان‌روز",
+  "Standard Ground": "ارسال عادی",
+};
+
+const returnStatusLabels: Record<string, string> = {
+  Authorized: "تأیید‌شده",
+  None: "ندارد",
+  Received: "دریافت‌شده",
+  Requested: "درخواست‌شده",
+};
+
+const translateLabel = (map: Record<string, string>, value: string) =>
+  map[value] ?? value;
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+const paymentStatusLookup = createStatusLookup(paymentStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+
+export const getPaymentStatusMeta = (status: string) =>
+  paymentStatusLookup[status];
+
+export const getStatusVariant = (status: string) => {
+  switch (status) {
+    case "Fulfilled":
+      return "default";
+    case "Ready for pickup":
+      return "secondary";
+    case "Unfulfilled":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const getPaymentVariant = (status: string) => {
+  switch (status) {
+    case "Paid":
+      return "default";
+    case "Pending":
+      return "secondary";
+    case "Refunded":
+      return "outline";
+    case "Partially refunded":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[120px] font-mono">{row.original.id}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+    meta: {
+      width: 120,
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => {
+      const items = row.original.items;
+
+      return (
+        <div className="flex gap-2">
+          <div className="max-w-[320px] truncate font-medium">
+            {row.original.purchased}
+          </div>
+          {items ? (
+            <Badge variant="outline">{formatNumber(items)}</Badge>
+          ) : null}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 280,
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[180px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      width: 200,
+    },
+  },
+  {
+    accessorKey: "customer_email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="ایمیل مشتری" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.customer_email}
+      </span>
+    ),
+    meta: {
+      width: 240,
+    },
+  },
+  {
+    accessorKey: "customer_segment",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="بخش مشتری" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">
+        {translateLabel(segmentLabels, row.original.customer_segment)}
+      </Badge>
+    ),
+    meta: { className: "whitespace-nowrap", width: 160 },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "fulfillment_channel",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تحویل" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {translateLabel(fulfillmentLabels, row.original.fulfillment_channel)}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 160 },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "shipping_service",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سرویس ارسال" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {translateLabel(shippingLabels, row.original.shipping_service)}
+      </span>
+    ),
+    meta: { width: 220 },
+  },
+  {
+    accessorKey: "warehouse",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="انبار" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.warehouse}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 140 },
+  },
+  {
+    accessorKey: "order_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت سفارش" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.order_status;
+      const statusMeta = getOrderStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getStatusVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon ? <StatusIcon className="size-3" /> : null}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+    meta: { width: 200 },
+  },
+  {
+    accessorKey: "payment_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت پرداخت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.payment_status;
+      const statusMeta = getPaymentStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getPaymentVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon ? <StatusIcon className="size-3" /> : null}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+    meta: { width: 200 },
+  },
+  {
+    accessorKey: "payment_method",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="روش پرداخت" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-mono text-xs sm:text-sm">
+        {row.original.payment_method}
+      </div>
+    ),
+    meta: { width: 180 },
+  },
+
+  {
+    accessorKey: "items",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تعداد" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs tabular-nums sm:text-sm">
+        {formatNumber(row.original.items)}
+      </span>
+    ),
+    meta: { align: "center", className: "tabular-nums", width: 100 },
+  },
+
+  {
+    accessorKey: "tracking_number",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="پیگیری" />
+    ),
+    cell: ({ row }) => (
+      <span className="font-mono text-xs sm:text-sm">
+        {row.original.tracking_number}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 200 },
+  },
+  {
+    accessorKey: "assigned_to",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مسئول" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.assigned_to}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 180 },
+  },
+  {
+    accessorKey: "return_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت مرجوعی" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">
+        {translateLabel(returnStatusLabels, row.original.return_status)}
+      </Badge>
+    ),
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+    meta: { width: 180 },
+  },
+
+  {
+    accessorKey: "coupon_code",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد تخفیف" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs sm:text-sm">
+        {row.original.coupon_code ?? ""}
+      </span>
+    ),
+    meta: { width: 140 },
+  },
+  {
+    accessorKey: "gift",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="هدیه" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant={row.original.gift ? "secondary" : "outline"}>
+        {row.original.gift ? "بله" : "خیر"}
+      </Badge>
+    ),
+    meta: { width: 120 },
+  },
+
+  {
+    accessorKey: "notes",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="یادداشت" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.notes}
+      </span>
+    ),
+    meta: { width: 260 },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <DataTableRowActions
+        row={row}
+        schema={schema}
+        itemName="سفارش"
+        idField="id"
+      />
+    ),
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+];
+
+export const DataTable27 = ({ className }: { className?: string }) => {
+  const [data, setData] = React.useState<Order[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let active = true;
+
+    const fetchData = async () => {
+      setError(null);
+      setIsLoading(true);
+      try {
+        const res = await fetch(DATA_URL);
+        if (!res.ok) {
+          const message = `بارگذاری داده سفارش‌ها ناموفق بود (${res.status})`;
+          console.error(message, res.statusText);
+          if (active) setError(message);
+          return;
+        }
+        const json = await res.json();
+        const parsed = schema.array().parse(json);
+        if (active) {
+          setData(parsed);
+        }
+      } catch (error) {
+        console.error("Error fetching orders data", error);
+        if (active) setError("خطا در بارگذاری داده سفارش‌ها");
+      } finally {
+        if (active) setIsLoading(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const { table, tableContainerRef, rowVirtualizer } = useDataTable({
+    data,
+    columns,
+    getRowId: (row) => row.id.toString(),
+    initialColumnPinning: { left: ["select"], right: ["actions"] },
+  });
+  const visibleColumns = table.getVisibleLeafColumns();
+  const visibleColumnCount = Math.max(visibleColumns.length, 1);
+  const visibleColumnIds = visibleColumns.map((column) => column.id);
+  const rightPinnedColumnIdSet = new Set(
+    table.getState().columnPinning.right ?? [],
+  );
+  const firstRightPinnedIndex = visibleColumnIds.findIndex((columnId) =>
+    rightPinnedColumnIdSet.has(columnId),
+  );
+  const rightStickyDividerTargetId =
+    firstRightPinnedIndex > 0
+      ? visibleColumnIds[firstRightPinnedIndex - 1]
+      : null;
+  const rowModel = table.getRowModel().rows;
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)
+      : 0;
+  const hasRows = rowModel.length > 0;
+  const lastLoggedRowIndexRef = React.useRef<number>(-1);
+
+  // Demo-only logging: surface which virtualized rows get rendered as you scroll.
+  // Remove this if you don't need console noise in production.
+  React.useEffect(() => {
+    if (!hasRows || virtualRows.length === 0) return;
+
+    const currentMaxIndex = virtualRows[virtualRows.length - 1]?.index ?? -1;
+    if (currentMaxIndex > lastLoggedRowIndexRef.current) {
+      const start = Math.max(lastLoggedRowIndexRef.current + 1, 0);
+      const end = Math.min(currentMaxIndex, rowModel.length - 1);
+      const newlyLoadedRows = rowModel
+        .slice(start, end + 1)
+        .map((row) => row.original);
+
+      console.log(
+        `[DataTable27] Loaded virtualized rows ${start}–${end}`,
+        newlyLoadedRows,
+      );
+
+      lastLoggedRowIndexRef.current = currentMaxIndex;
+    }
+  }, [hasRows, rowModel, virtualRows]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول داده با مجازی‌سازی
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با ردیف‌های مجازی برای نمایش مجموعه داده بزرگ. با
+              پیمایش، ردیف‌های بیشتری بارگذاری می‌شوند؛ کنسول مرورگر نشان
+              می‌دهد کدام ردیف‌ها رندر شده‌اند.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-lg border-2">
+            <div
+              ref={tableContainerRef}
+              className="relative max-h-[600px] overflow-auto"
+            >
+              {isLoading ? (
+                <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+                  <div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                    <span>در حال بارگذاری سفارش‌ها…</span>
+                  </div>
+                </div>
+              ) : null}
+              <table className="w-full table-fixed caption-bottom border-separate border-spacing-0 text-sm [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:hover_td[data-pinned]]:bg-muted/50 [&_tr:not(:last-child)_td]:border-b [&_tr[data-state=selected]_td[data-pinned]]:bg-muted [&_tr[data-state=selected]:hover_td[data-pinned]]:bg-muted">
+                <TableHeader className="sticky top-0 z-20 bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const meta =
+                          (header.column.columnDef.meta as {
+                            align?: "left" | "center" | "right";
+                            headerClassName?: string;
+                            className?: string;
+                            width?: number | string;
+                            minWidth?: number | string;
+                            maxWidth?: number | string;
+                          }) ?? {};
+                        const columnWithPinning = header.column as unknown as {
+                          getIsPinned?: () => "left" | "right" | false;
+                          getIsLastColumn?: (
+                            position: "left" | "right",
+                          ) => boolean;
+                          getIsFirstColumn?: (
+                            position: "left" | "right",
+                          ) => boolean;
+                          getStart?: (position: "left" | "right") => number;
+                          getAfter?: (position: "left" | "right") => number;
+                          getSize?: () => number;
+                        };
+
+                        const baseStyle: CSSProperties = {};
+                        if (meta.width !== undefined) {
+                          baseStyle.width =
+                            typeof meta.width === "number"
+                              ? `${meta.width}px`
+                              : meta.width;
+                        }
+                        if (meta.minWidth !== undefined) {
+                          baseStyle.minWidth =
+                            typeof meta.minWidth === "number"
+                              ? `${meta.minWidth}px`
+                              : meta.minWidth;
+                        }
+                        if (meta.maxWidth !== undefined) {
+                          baseStyle.maxWidth =
+                            typeof meta.maxWidth === "number"
+                              ? `${meta.maxWidth}px`
+                              : meta.maxWidth;
+                        }
+                        if (
+                          baseStyle.width === undefined &&
+                          typeof columnWithPinning.getSize === "function"
+                        ) {
+                          const computedWidth = columnWithPinning.getSize();
+                          if (
+                            typeof computedWidth === "number" &&
+                            Number.isFinite(computedWidth)
+                          ) {
+                            baseStyle.width = `${computedWidth}px`;
+                          }
+                        }
+
+                        const pinned = columnWithPinning.getIsPinned?.();
+                        const pinnedStyle: CSSProperties = {};
+                        let lastPinned: "left" | "right" | undefined;
+
+                        if (pinned) {
+                          pinnedStyle.position = "sticky";
+                          pinnedStyle.zIndex = 1;
+
+                          if (pinned === "left") {
+                            const start =
+                              columnWithPinning.getStart?.("left") ?? 0;
+                            pinnedStyle.left = `${start}px`;
+                            if (columnWithPinning.getIsLastColumn?.("left")) {
+                              lastPinned = "left";
+                            }
+                          }
+
+                          if (pinned === "right") {
+                            const after =
+                              columnWithPinning.getAfter?.("right") ?? 0;
+                            pinnedStyle.right = `${after}px`;
+                            if (columnWithPinning.getIsFirstColumn?.("right")) {
+                              lastPinned = "right";
+                            }
+                          }
+
+                          const resolvedWidth =
+                            baseStyle.width ??
+                            (typeof columnWithPinning.getSize === "function"
+                              ? columnWithPinning.getSize()
+                              : undefined);
+                          if (resolvedWidth !== undefined) {
+                            pinnedStyle.width =
+                              typeof resolvedWidth === "number"
+                                ? `${resolvedWidth}px`
+                                : resolvedWidth;
+                          }
+                        }
+
+                        const alignClass =
+                          meta.align === "center"
+                            ? "text-center"
+                            : meta.align === "right"
+                              ? "text-end"
+                              : meta.align === "left"
+                                ? "text-start"
+                                : undefined;
+
+                        return (
+                          <TableHead
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            style={{ ...baseStyle, ...pinnedStyle }}
+                            className={cn(
+                              "relative h-11 truncate border-r px-3 text-sm font-medium last:border-r-0 data-[pinned]:bg-muted/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                              header.column.id === rightStickyDividerTargetId &&
+                              "!border-r-0",
+                              meta.className,
+                              meta.headerClassName,
+                              alignClass,
+                            )}
+                            data-pinned={pinned || undefined}
+                            data-last-col={lastPinned || undefined}
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        <div className="inline-flex items-center gap-2">
+                          <LoaderIcon className="h-4 w-4 animate-spin" />
+                          <span>در حال بارگذاری سفارش‌ها…</span>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ) : error ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-destructive"
+                      >
+                        {error}
+                      </TableCell>
+                    </TableRow>
+                  ) : hasRows ? (
+                    <>
+                      {paddingTop > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingTop }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-top-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                      {virtualRows.map((virtualRow) => {
+                        const row = rowModel[virtualRow.index];
+                        if (!row) return null;
+
+                        return (
+                          <TableRow
+                            key={row.id}
+                            data-state={row.getIsSelected() && "selected"}
+                            className="border-b last:border-b-0"
+                            style={{ height: virtualRow.size }}
+                          >
+                            {row.getVisibleCells().map((cell) => {
+                              const meta =
+                                (cell.column.columnDef.meta as {
+                                  align?: "left" | "center" | "right";
+                                  cellClassName?: string;
+                                  className?: string;
+                                  width?: number | string;
+                                  minWidth?: number | string;
+                                  maxWidth?: number | string;
+                                }) ?? {};
+                              const columnWithPinning =
+                                cell.column as unknown as {
+                                  getIsPinned?: () => "left" | "right" | false;
+                                  getIsLastColumn?: (
+                                    position: "left" | "right",
+                                  ) => boolean;
+                                  getIsFirstColumn?: (
+                                    position: "left" | "right",
+                                  ) => boolean;
+                                  getStart?: (
+                                    position: "left" | "right",
+                                  ) => number;
+                                  getAfter?: (
+                                    position: "left" | "right",
+                                  ) => number;
+                                  getSize?: () => number;
+                                };
+
+                              const baseStyle: CSSProperties = {};
+                              if (meta.width !== undefined) {
+                                baseStyle.width =
+                                  typeof meta.width === "number"
+                                    ? `${meta.width}px`
+                                    : meta.width;
+                              }
+                              if (meta.minWidth !== undefined) {
+                                baseStyle.minWidth =
+                                  typeof meta.minWidth === "number"
+                                    ? `${meta.minWidth}px`
+                                    : meta.minWidth;
+                              }
+                              if (meta.maxWidth !== undefined) {
+                                baseStyle.maxWidth =
+                                  typeof meta.maxWidth === "number"
+                                    ? `${meta.maxWidth}px`
+                                    : meta.maxWidth;
+                              }
+                              if (
+                                baseStyle.width === undefined &&
+                                typeof columnWithPinning.getSize === "function"
+                              ) {
+                                const computedWidth =
+                                  columnWithPinning.getSize();
+                                if (
+                                  typeof computedWidth === "number" &&
+                                  Number.isFinite(computedWidth)
+                                ) {
+                                  baseStyle.width = `${computedWidth}px`;
+                                }
+                              }
+
+                              const pinned = columnWithPinning.getIsPinned?.();
+                              const pinnedStyle: CSSProperties = {};
+                              let lastPinned: "left" | "right" | undefined;
+
+                              if (pinned) {
+                                pinnedStyle.position = "sticky";
+                                pinnedStyle.zIndex = 1;
+
+                                if (pinned === "left") {
+                                  const start =
+                                    columnWithPinning.getStart?.("left") ?? 0;
+                                  pinnedStyle.left = `${start}px`;
+                                  if (
+                                    columnWithPinning.getIsLastColumn?.("left")
+                                  ) {
+                                    lastPinned = "left";
+                                  }
+                                }
+
+                                if (pinned === "right") {
+                                  const after =
+                                    columnWithPinning.getAfter?.("right") ?? 0;
+                                  pinnedStyle.right = `${after}px`;
+                                  if (
+                                    columnWithPinning.getIsFirstColumn?.(
+                                      "right",
+                                    )
+                                  ) {
+                                    lastPinned = "right";
+                                  }
+                                }
+
+                                const resolvedWidth =
+                                  baseStyle.width ??
+                                  (typeof columnWithPinning.getSize ===
+                                    "function"
+                                    ? columnWithPinning.getSize()
+                                    : undefined);
+                                if (resolvedWidth !== undefined) {
+                                  pinnedStyle.width =
+                                    typeof resolvedWidth === "number"
+                                      ? `${resolvedWidth}px`
+                                      : resolvedWidth;
+                                }
+                              }
+
+                              const alignClass =
+                                meta.align === "center"
+                                  ? "text-center"
+                                  : meta.align === "right"
+                                    ? "text-end"
+                                    : meta.align === "left"
+                                      ? "text-start"
+                                      : undefined;
+
+                              return (
+                                <TableCell
+                                  key={cell.id}
+                                  style={{ ...baseStyle, ...pinnedStyle }}
+                                  className={cn(
+                                    "truncate border-r p-3 py-2 text-sm last:border-r-0 data-[pinned]:bg-background/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                                    cell.column.id ===
+                                    rightStickyDividerTargetId &&
+                                    "!border-r-0",
+                                    meta.className,
+                                    meta.cellClassName,
+                                    alignClass,
+                                  )}
+                                  data-pinned={pinned || undefined}
+                                  data-last-col={lastPinned || undefined}
+                                >
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                      {paddingBottom > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingBottom }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-bottom-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                    </>
+                  ) : (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        نتیجه‌ای یافت نشد.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table28.tsx b/blocks/data-table28.tsx
new file mode 100644
index 0000000..c5936bf
--- /dev/null
+++ b/blocks/data-table28.tsx
@@ -0,0 +1,1524 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  ColumnPinningState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ArrowDown,
+  ArrowUp,
+  CheckCheckIcon,
+  CheckCircle,
+  ChevronsUpDown,
+  Clock,
+  LoaderIcon,
+  MoreHorizontal,
+  Package,
+  PieChart,
+  RefreshCcw,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_ROW_HEIGHT = 56;
+const DEFAULT_OVERSCAN = 8;
+const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
+const DATA_URL =
+  "https://raw.githubusercontent.com/zerostaticthemes/ShadcnBlocks-library-data/refs/heads/main/data/orders-ecommerce-1000.json";
+
+type ColumnMeta = {
+  align?: "left" | "center" | "right";
+  headerClassName?: string;
+  cellClassName?: string;
+  className?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+};
+
+type ColumnWithPinning = {
+  getIsPinned?: () => "left" | "right" | false;
+  getIsLastColumn?: (position: "left" | "right") => boolean;
+  getIsFirstColumn?: (position: "left" | "right") => boolean;
+  getStart?: (position: "left" | "right") => number;
+  getAfter?: (position: "left" | "right") => number;
+  getSize?: () => number;
+};
+
+type ComputedColumnStyles = {
+  baseStyle: CSSProperties;
+  pinnedStyle: CSSProperties;
+  pinned: "left" | "right" | false;
+  lastPinned?: "left" | "right";
+  alignClass?: string;
+};
+
+function computeColumnStyles(
+  meta: ColumnMeta,
+  columnWithPinning: ColumnWithPinning,
+): ComputedColumnStyles {
+  const baseStyle: CSSProperties = {};
+
+  if (meta.width !== undefined) {
+    baseStyle.width =
+      typeof meta.width === "number" ? `${meta.width}px` : meta.width;
+  }
+  if (meta.minWidth !== undefined) {
+    baseStyle.minWidth =
+      typeof meta.minWidth === "number" ? `${meta.minWidth}px` : meta.minWidth;
+  }
+  if (meta.maxWidth !== undefined) {
+    baseStyle.maxWidth =
+      typeof meta.maxWidth === "number" ? `${meta.maxWidth}px` : meta.maxWidth;
+  }
+  if (
+    baseStyle.width === undefined &&
+    typeof columnWithPinning.getSize === "function"
+  ) {
+    const computedWidth = columnWithPinning.getSize();
+    if (typeof computedWidth === "number" && Number.isFinite(computedWidth)) {
+      baseStyle.width = `${computedWidth}px`;
+    }
+  }
+
+  const pinned = columnWithPinning.getIsPinned?.() ?? false;
+  const pinnedStyle: CSSProperties = {};
+  let lastPinned: "left" | "right" | undefined;
+
+  if (pinned) {
+    pinnedStyle.position = "sticky";
+    pinnedStyle.zIndex = 20;
+
+    if (pinned === "left") {
+      const start = columnWithPinning.getStart?.("left") ?? 0;
+      pinnedStyle.left = `${start}px`;
+      if (columnWithPinning.getIsLastColumn?.("left")) {
+        lastPinned = "left";
+      }
+    }
+
+    if (pinned === "right") {
+      const after = columnWithPinning.getAfter?.("right") ?? 0;
+      pinnedStyle.right = `${after}px`;
+      if (columnWithPinning.getIsFirstColumn?.("right")) {
+        lastPinned = "right";
+      }
+    }
+
+    const resolvedWidth =
+      baseStyle.width ??
+      (typeof columnWithPinning.getSize === "function"
+        ? columnWithPinning.getSize()
+        : undefined);
+    if (resolvedWidth !== undefined) {
+      pinnedStyle.width =
+        typeof resolvedWidth === "number"
+          ? `${resolvedWidth}px`
+          : resolvedWidth;
+    }
+  }
+
+  const alignClass =
+    meta.align === "center"
+      ? "text-center"
+      : meta.align === "right"
+        ? "text-end"
+        : meta.align === "left"
+          ? "text-start"
+          : undefined;
+
+  return {
+    baseStyle,
+    pinnedStyle,
+    pinned,
+    lastPinned,
+    alignClass,
+  };
+}
+
+type CellPosition = {
+  rowIndex: number;
+  columnId: string;
+};
+
+type SelectionRange = {
+  start: CellPosition;
+  end: CellPosition;
+};
+
+type SelectionState = {
+  selectedCells: Set<string>;
+  selectionRange: SelectionRange | null;
+};
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  initialColumnPinning?: ColumnPinningState;
+  enableRowSelection?: boolean;
+  rowHeight?: number;
+  overscan?: number;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+
+    initialSelection = {},
+    enableRowSelection = true,
+    initialColumnPinning = {},
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    overscan = DEFAULT_OVERSCAN,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+  const [columnPinning, setColumnPinning] =
+    React.useState<ColumnPinningState>(initialColumnPinning);
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+  const [focusedCell, setFocusedCell] = React.useState<CellPosition | null>(
+    null,
+  );
+  const [selectionState, setSelectionState] = React.useState<SelectionState>({
+    selectedCells: new Set(),
+    selectionRange: null,
+  });
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnPinning,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    onColumnPinningChange: setColumnPinning,
+    enableRowSelection,
+  });
+
+  const rowVirtualizer = useVirtualizer({
+    count: table.getRowModel().rows.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+    measureElement:
+      typeof window !== "undefined" &&
+        navigator.userAgent.indexOf("Firefox") === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+  });
+
+  const columnIds = React.useMemo(() => {
+    return columns
+      .map((column) => {
+        if (column.id) return column.id;
+        if ("accessorKey" in column && column.accessorKey) {
+          return column.accessorKey.toString();
+        }
+        return undefined;
+      })
+      .filter((id): id is string => Boolean(id));
+  }, [columns]);
+
+  const navigableColumnIds = React.useMemo(() => {
+    return columnIds.filter((id) => !NON_NAVIGABLE_COLUMN_IDS.includes(id));
+  }, [columnIds]);
+
+  const getCellKey = React.useCallback(
+    (rowIndex: number, columnId: string) => `${rowIndex}:${columnId}`,
+    [],
+  );
+
+  const clearSelection = React.useCallback(() => {
+    setSelectionState({ selectedCells: new Set(), selectionRange: null });
+  }, []);
+
+  const selectSingleCell = React.useCallback(
+    (position: CellPosition) => {
+      const cellKey = getCellKey(position.rowIndex, position.columnId);
+      setSelectionState({
+        selectedCells: new Set([cellKey]),
+        selectionRange: {
+          start: { ...position },
+          end: { ...position },
+        },
+      });
+    },
+    [getCellKey],
+  );
+
+  const selectRange = React.useCallback(
+    (start: CellPosition, end: CellPosition) => {
+      const startIndex = columnIds.indexOf(start.columnId);
+      const endIndex = columnIds.indexOf(end.columnId);
+      if (startIndex === -1 || endIndex === -1) return;
+
+      const minRow = Math.min(start.rowIndex, end.rowIndex);
+      const maxRow = Math.max(start.rowIndex, end.rowIndex);
+      const minCol = Math.min(startIndex, endIndex);
+      const maxCol = Math.max(startIndex, endIndex);
+
+      const selected = new Set<string>();
+      for (let row = minRow; row <= maxRow; row++) {
+        for (let col = minCol; col <= maxCol; col++) {
+          const columnId = columnIds[col];
+          if (!columnId) continue;
+          selected.add(getCellKey(row, columnId));
+        }
+      }
+
+      setSelectionState({
+        selectedCells: selected,
+        selectionRange: { start: { ...start }, end: { ...end } },
+      });
+    },
+    [columnIds, getCellKey],
+  );
+
+  const toggleCellSelection = React.useCallback(
+    (position: CellPosition) => {
+      const cellKey = getCellKey(position.rowIndex, position.columnId);
+      setSelectionState((prev) => {
+        const next = new Set(prev.selectedCells);
+        if (next.has(cellKey)) {
+          next.delete(cellKey);
+        } else {
+          next.add(cellKey);
+        }
+        return {
+          selectedCells: next,
+          selectionRange: {
+            start: { ...position },
+            end: { ...position },
+          },
+        };
+      });
+    },
+    [getCellKey],
+  );
+
+  const focusCell = React.useCallback(
+    (rowIndex: number, columnId: string) => {
+      setFocusedCell({ rowIndex, columnId });
+      rowVirtualizer.scrollToIndex(rowIndex, { align: "auto" });
+    },
+    [rowVirtualizer],
+  );
+
+  const isCellSelected = React.useCallback(
+    (rowIndex: number, columnId: string) => {
+      return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
+    },
+    [selectionState.selectedCells, getCellKey],
+  );
+
+  const ensureContainerFocus = React.useCallback(() => {
+    const el = tableContainerRef.current;
+    if (el && document.activeElement !== el) {
+      el.focus();
+    }
+  }, []);
+
+  const escapeCsvValue = React.useCallback((value: unknown) => {
+    if (value === null || value === undefined) return "";
+    const str = typeof value === "string" ? value : String(value);
+    if (/[",\n]/.test(str)) {
+      return `"${str.replace(/"/g, '""')}"`;
+    }
+    return str;
+  }, []);
+
+  const copySelectionToClipboard = React.useCallback(async () => {
+    const selectedKeys = Array.from(selectionState.selectedCells);
+    if (selectedKeys.length === 0) {
+      toast("یک یا چند سلول انتخاب کنید تا کپی شود.");
+      return;
+    }
+
+    const parsed = selectedKeys
+      .map((key) => {
+        const [rowIndexStr, columnId] = key.split(":");
+        const rowIndex = Number.parseInt(rowIndexStr, 10);
+        return Number.isFinite(rowIndex) && columnId
+          ? { rowIndex, columnId }
+          : null;
+      })
+      .filter((entry): entry is { rowIndex: number; columnId: string } =>
+        Boolean(entry),
+      );
+
+    if (parsed.length === 0) {
+      toast("یک یا چند سلول انتخاب کنید تا کپی شود.");
+      return;
+    }
+
+    const rowModel = table.getRowModel().rows;
+    const selectedRowIndexes = Array.from(
+      new Set(parsed.map((item) => item.rowIndex)),
+    ).sort((a, b) => a - b);
+    const selectedColumnIds = columnIds.filter((id) =>
+      parsed.some((item) => item.columnId === id),
+    );
+
+    if (selectedRowIndexes.length === 0 || selectedColumnIds.length === 0) {
+      toast("یک یا چند سلول انتخاب کنید تا کپی شود.");
+      return;
+    }
+
+    const headerRow = selectedColumnIds.join(",");
+    const dataRows = selectedRowIndexes
+      .map((rowIndex) => {
+        const row = rowModel[rowIndex];
+        if (!row) return null;
+
+        const values = selectedColumnIds.map((columnId) => {
+          const value = row.getValue(columnId);
+          return escapeCsvValue(value);
+        });
+
+        return values.join(",");
+      })
+      .filter((row): row is string => Boolean(row));
+
+    const جدول = [headerRow, ...dataRows].join("\n");
+
+    try {
+      if (
+        typeof navigator === "undefined" ||
+        !navigator.clipboard ||
+        typeof navigator.clipboard.writeText !== "function"
+      ) {
+        toast.error("کلیپ‌بورد در این مرورگر در دسترس نیست");
+        return;
+      }
+      await navigator.clipboard.writeText(جدول);
+      toast.success(
+        `${selectedKeys.length.toLocaleString("fa-IR")} سلول انتخاب‌شده به‌صورت CSV کپی شد`,
+      );
+    } catch (error) {
+      console.error("Failed to copy selection", error);
+      toast.error("کپی سلول‌ها در کلیپ‌بورد انجام نشد");
+    }
+  }, [selectionState.selectedCells, table, columnIds, escapeCsvValue]);
+
+  const handleCellClick = React.useCallback(
+    (
+      rowIndex: number,
+      columnId: string,
+      event?: React.MouseEvent<HTMLTableCellElement>,
+    ) => {
+      const position = { rowIndex, columnId };
+      ensureContainerFocus();
+      focusCell(position.rowIndex, position.columnId);
+
+      if (event?.shiftKey) {
+        const start = selectionState.selectionRange?.start ||
+          focusedCell || { ...position };
+        selectRange(start, position);
+        return;
+      }
+
+      if (event?.metaKey || event?.ctrlKey) {
+        toggleCellSelection(position);
+        return;
+      }
+
+      selectSingleCell(position);
+    },
+    [
+      ensureContainerFocus,
+      focusCell,
+      selectionState.selectionRange,
+      focusedCell,
+      selectRange,
+      toggleCellSelection,
+      selectSingleCell,
+    ],
+  );
+
+  const navigateCell = React.useCallback(
+    (direction: "up" | "down" | "left" | "right" | "home" | "end") => {
+      if (!focusedCell) return null;
+      const rowCount = table.getRowModel().rows.length;
+      const currentColIndex = navigableColumnIds.indexOf(focusedCell.columnId);
+
+      let nextRow = focusedCell.rowIndex;
+      let nextColId = focusedCell.columnId;
+
+      switch (direction) {
+        case "up":
+          nextRow = Math.max(0, focusedCell.rowIndex - 1);
+          break;
+        case "down":
+          nextRow = Math.min(rowCount - 1, focusedCell.rowIndex + 1);
+          break;
+        case "left":
+          if (currentColIndex > 0) {
+            nextColId = navigableColumnIds[currentColIndex - 1] ?? nextColId;
+          }
+          break;
+        case "right":
+          if (currentColIndex < navigableColumnIds.length - 1) {
+            nextColId = navigableColumnIds[currentColIndex + 1] ?? nextColId;
+          }
+          break;
+        case "home":
+          if (navigableColumnIds.length > 0) {
+            nextColId = navigableColumnIds[0]!;
+          }
+          break;
+        case "end":
+          if (navigableColumnIds.length > 0) {
+            nextColId = navigableColumnIds[navigableColumnIds.length - 1]!;
+          }
+          break;
+      }
+
+      return { rowIndex: nextRow, columnId: nextColId };
+    },
+    [focusedCell, navigableColumnIds, table],
+  );
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key.toLowerCase() === "c" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        copySelectionToClipboard();
+        return;
+      }
+
+      if (!focusedCell) return;
+
+      const { key, shiftKey } = event;
+      let direction: Parameters<typeof navigateCell>[0] | null = null;
+
+      switch (key) {
+        case "ArrowUp":
+          direction = "up";
+          break;
+        case "ArrowDown":
+          direction = "down";
+          break;
+        case "ArrowLeft":
+          direction = "left";
+          break;
+        case "ArrowRight":
+          direction = "right";
+          break;
+        case "Home":
+          direction = "home";
+          break;
+        case "End":
+          direction = "end";
+          break;
+        case "Escape":
+          clearSelection();
+          return;
+        default:
+          return;
+      }
+
+      if (!direction) return;
+
+      const next = navigateCell(direction);
+      if (!next) return;
+
+      event.preventDefault();
+      focusCell(next.rowIndex, next.columnId);
+
+      if (shiftKey) {
+        const start =
+          selectionState.selectionRange?.start || focusedCell || next;
+        selectRange(start, next);
+      } else {
+        selectSingleCell(next);
+      }
+    },
+    [
+      copySelectionToClipboard,
+      focusedCell,
+      navigateCell,
+      focusCell,
+      selectRange,
+      selectionState.selectionRange,
+      selectSingleCell,
+      clearSelection,
+    ],
+  );
+
+  React.useEffect(() => {
+    if (
+      !focusedCell &&
+      table.getRowModel().rows.length > 0 &&
+      navigableColumnIds.length > 0
+    ) {
+      const firstColumnId = navigableColumnIds[0];
+      focusCell(0, firstColumnId);
+      selectSingleCell({ rowIndex: 0, columnId: firstColumnId });
+    }
+  }, [focusedCell, table, navigableColumnIds, focusCell, selectSingleCell]);
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    rowSelection,
+    setRowSelection,
+    columnPinning,
+    setColumnPinning,
+    tableContainerRef,
+    rowVirtualizer,
+    focusedCell,
+    handleCellClick,
+    handleKeyDown,
+    isCellSelected,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  schema: z.ZodSchema;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  schema,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = schema.parse(row.original) as TData;
+  const itemRecord = item as Record<string, unknown>;
+  const handleCopy = async () => {
+    const value = itemRecord[idField] ?? itemRecord.id;
+    if (!value) {
+      toast.error("شناسه‌ای برای کپی موجود نیست");
+      return;
+    }
+    if (
+      typeof navigator === "undefined" ||
+      !navigator.clipboard ||
+      typeof navigator.clipboard.writeText !== "function"
+    ) {
+      toast.error("کلیپ‌بورد در این مرورگر در دسترس نیست");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(String(value));
+      toast.success("شناسه در کلیپ‌بورد کپی شد");
+    } catch (error) {
+      console.error("Error copying to clipboard", error);
+      toast.error("کپی در کلیپ‌بورد انجام نشد");
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem onClick={handleCopy}>
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  items: z.number(),
+  customer: z.string(),
+  customer_email: z.string(),
+  customer_segment: z.string(),
+  fulfillment_channel: z.string(),
+  shipping_service: z.string(),
+  warehouse: z.string(),
+  order_status: z.string(),
+  payment_status: z.string(),
+  payment_method: z.string(),
+  tracking_number: z.string(),
+  assigned_to: z.string(),
+  return_status: z.string(),
+  coupon_code: z.string().nullable(),
+  gift: z.boolean(),
+  notes: z.string(),
+});
+
+export type Order = z.infer<typeof schema>;
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const orderStatuses: StatusOption[] = [
+  { label: "تحویل‌شده", value: "Fulfilled", icon: CheckCircle },
+  { label: "آماده تحویل", value: "Ready for pickup", icon: Package },
+  { label: "تحویل‌نشده", value: "Unfulfilled", icon: Clock },
+];
+
+export const paymentStatuses: StatusOption[] = [
+  { label: "پرداخت‌شده", value: "Paid", icon: CheckCheckIcon },
+  { label: "در انتظار", value: "Pending", icon: LoaderIcon },
+  { label: "مسترد شده", value: "Refunded", icon: RefreshCcw },
+  {
+    label: "مسترد جزئی",
+    value: "Partially refunded",
+    icon: PieChart,
+  },
+];
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const segmentLabels: Record<string, string> = {
+  Enterprise: "سازمانی",
+  Marketplace: "بازارچه",
+  Retail: "خرده‌فروشی",
+  VIP: "ویژه",
+  Wholesale: "عمده‌فروشی",
+};
+
+const fulfillmentLabels: Record<string, string> = {
+  "3PL": "لجستیک شخص ثالث",
+  Dropship: "دراپ‌شیپ",
+  FBA: "FBA",
+  "Merchant Fulfilled": "ارسال توسط فروشنده",
+};
+
+const shippingLabels: Record<string, string> = {
+  "Expedited Air": "هوایی سریع",
+  "Prime 1-Day": "پرایم ۱ روزه",
+  "Prime 2-Day": "پرایم ۲ روزه",
+  "Same-Day Local": "تحویل همان‌روز",
+  "Standard Ground": "ارسال عادی",
+};
+
+const returnStatusLabels: Record<string, string> = {
+  Authorized: "تأیید‌شده",
+  None: "ندارد",
+  Received: "دریافت‌شده",
+  Requested: "درخواست‌شده",
+};
+
+const translateLabel = (map: Record<string, string>, value: string) =>
+  map[value] ?? value;
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+const paymentStatusLookup = createStatusLookup(paymentStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+
+export const getPaymentStatusMeta = (status: string) =>
+  paymentStatusLookup[status];
+
+export const getStatusVariant = (status: string) => {
+  switch (status) {
+    case "Fulfilled":
+      return "default";
+    case "Ready for pickup":
+      return "secondary";
+    case "Unfulfilled":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const getPaymentVariant = (status: string) => {
+  switch (status) {
+    case "Paid":
+      return "default";
+    case "Pending":
+      return "secondary";
+    case "Refunded":
+      return "outline";
+    case "Partially refunded":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[120px] font-mono">{row.original.id}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+    meta: {
+      width: 120,
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => {
+      const items = row.original.items;
+
+      return (
+        <div className="flex gap-2">
+          <div className="max-w-[320px] truncate font-medium">
+            {row.original.purchased}
+          </div>
+          {items ? (
+            <Badge variant="outline">{formatNumber(items)}</Badge>
+          ) : null}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 280,
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[180px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      width: 200,
+    },
+  },
+  {
+    accessorKey: "customer_email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="ایمیل مشتری" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.customer_email}
+      </span>
+    ),
+    meta: {
+      width: 240,
+    },
+  },
+  {
+    accessorKey: "customer_segment",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="بخش مشتری" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">
+        {translateLabel(segmentLabels, row.original.customer_segment)}
+      </Badge>
+    ),
+    meta: { className: "whitespace-nowrap", width: 160 },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "fulfillment_channel",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تحویل" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {translateLabel(fulfillmentLabels, row.original.fulfillment_channel)}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 160 },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "shipping_service",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سرویس ارسال" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {translateLabel(shippingLabels, row.original.shipping_service)}
+      </span>
+    ),
+    meta: { width: 220 },
+  },
+  {
+    accessorKey: "warehouse",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="انبار" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.warehouse}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 140 },
+  },
+  {
+    accessorKey: "order_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت سفارش" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.order_status;
+      const statusMeta = getOrderStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getStatusVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon ? <StatusIcon className="size-3" /> : null}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+    meta: { width: 200 },
+  },
+  {
+    accessorKey: "payment_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت پرداخت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.payment_status;
+      const statusMeta = getPaymentStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getPaymentVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon ? <StatusIcon className="size-3" /> : null}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) {
+        return true;
+      }
+      const rowValue = String(row.getValue(id));
+      return value.includes(rowValue);
+    },
+    enableSorting: false,
+    meta: { width: 200 },
+  },
+  {
+    accessorKey: "payment_method",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="روش پرداخت" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-mono text-xs sm:text-sm">
+        {row.original.payment_method}
+      </div>
+    ),
+    meta: { width: 180 },
+  },
+
+  {
+    accessorKey: "items",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تعداد" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs tabular-nums sm:text-sm">
+        {formatNumber(row.original.items)}
+      </span>
+    ),
+    meta: { align: "center", className: "tabular-nums", width: 100 },
+  },
+
+  {
+    accessorKey: "tracking_number",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="پیگیری" />
+    ),
+    cell: ({ row }) => (
+      <span className="font-mono text-xs sm:text-sm">
+        {row.original.tracking_number}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 200 },
+  },
+  {
+    accessorKey: "assigned_to",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مسئول" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.assigned_to}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 180 },
+  },
+  {
+    accessorKey: "return_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت مرجوعی" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">
+        {translateLabel(returnStatusLabels, row.original.return_status)}
+      </Badge>
+    ),
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+    meta: { width: 180 },
+  },
+
+  {
+    accessorKey: "coupon_code",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد تخفیف" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs sm:text-sm">
+        {row.original.coupon_code ?? ""}
+      </span>
+    ),
+    meta: { width: 140 },
+  },
+  {
+    accessorKey: "gift",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="هدیه" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant={row.original.gift ? "secondary" : "outline"}>
+        {row.original.gift ? "بله" : "خیر"}
+      </Badge>
+    ),
+    meta: { width: 120 },
+  },
+
+  {
+    accessorKey: "notes",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="یادداشت" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.notes}
+      </span>
+    ),
+    meta: { width: 260 },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <DataTableRowActions
+        row={row}
+        schema={schema}
+        itemName="سفارش"
+        idField="id"
+      />
+    ),
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+];
+
+export const DataTable28 = ({ className }: { className?: string }) => {
+  const [data, setData] = React.useState<Order[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let active = true;
+
+    const fetchData = async () => {
+      setError(null);
+      setIsLoading(true);
+      try {
+        const res = await fetch(DATA_URL);
+        if (!res.ok) {
+          const message = `بارگذاری داده سفارش‌ها ناموفق بود (${res.status})`;
+          console.error(message, res.statusText);
+          if (active) setError(message);
+          return;
+        }
+        const json = await res.json();
+        const parsed = schema.array().parse(json);
+        if (active) {
+          setData(parsed);
+        }
+      } catch (error) {
+        console.error("Error fetching orders data", error);
+        if (active) setError("خطا در بارگذاری داده سفارش‌ها");
+      } finally {
+        if (active) setIsLoading(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const {
+    table,
+    tableContainerRef,
+    rowVirtualizer,
+    focusedCell,
+    handleCellClick,
+    handleKeyDown,
+    isCellSelected,
+  } = useDataTable({
+    data,
+    columns,
+    getRowId: (row) => row.id.toString(),
+    initialColumnPinning: { left: ["select"], right: ["actions"] },
+  });
+  const visibleColumns = table.getVisibleLeafColumns();
+  const visibleColumnCount = Math.max(visibleColumns.length, 1);
+  const visibleColumnIds = visibleColumns.map((column) => column.id);
+  const rightPinnedColumnIdSet = new Set(
+    table.getState().columnPinning.right ?? [],
+  );
+  const firstRightPinnedIndex = visibleColumnIds.findIndex((columnId) =>
+    rightPinnedColumnIdSet.has(columnId),
+  );
+  const rightStickyDividerTargetId =
+    firstRightPinnedIndex > 0
+      ? visibleColumnIds[firstRightPinnedIndex - 1]
+      : null;
+  const rowModel = table.getRowModel().rows;
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)
+      : 0;
+  const hasRows = rowModel.length > 0;
+  const lastLoggedRowIndexRef = React.useRef<number>(-1);
+
+  // Demo-only logging: surface which virtualized rows get rendered as you scroll.
+  // Remove this if you don't need console noise in production.
+  React.useEffect(() => {
+    if (!hasRows || virtualRows.length === 0) return;
+
+    const currentMaxIndex = virtualRows[virtualRows.length - 1]?.index ?? -1;
+    if (currentMaxIndex > lastLoggedRowIndexRef.current) {
+      const start = Math.max(lastLoggedRowIndexRef.current + 1, 0);
+      const end = Math.min(currentMaxIndex, rowModel.length - 1);
+      const newlyLoadedRows = rowModel
+        .slice(start, end + 1)
+        .map((row) => row.original);
+
+      console.log(
+        `[DataTable28] Loaded virtualized rows ${start}–${end}`,
+        newlyLoadedRows,
+      );
+
+      lastLoggedRowIndexRef.current = currentMaxIndex;
+    }
+  }, [hasRows, rowModel, virtualRows]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول مجازی با پیمایش شبکه‌ای از طریق صفحه‌کلید
+            </h2>
+            <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
+              روی هر سلول کلیک کنید (یا Tab بزنید تا شبکه فوکوس بگیرد)، سپس با
+              کلیدهای جهت‌دار، Home/End و Shift+جهت‌دار فوکوس را جابه‌جا کنید و
+              انتخاب چندسلولی بسازید. Cmd/Ctrl+کلیک سلول‌ها را تغییر می‌دهد،
+              Cmd/Ctrl+C انتخاب فعلی را به‌صورت جدول در کلیپ‌بورد کپی می‌کند
+              (با اعلان)، و Escape انتخاب را پاک می‌کند.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-lg border-2">
+            <div
+              ref={tableContainerRef}
+              tabIndex={0}
+              onKeyDown={handleKeyDown}
+              className="relative max-h-[600px] overflow-auto focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {isLoading ? (
+                <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+                  <div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                    <span>در حال بارگذاری سفارش‌ها…</span>
+                  </div>
+                </div>
+              ) : null}
+              <table className="w-full table-fixed caption-bottom border-separate border-spacing-0 text-sm [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:hover_td[data-pinned]]:bg-muted/50 [&_tr:not(:last-child)_td]:border-b [&_tr[data-state=selected]_td[data-pinned]]:bg-muted [&_tr[data-state=selected]:hover_td[data-pinned]]:bg-muted">
+                <TableHeader className="sticky top-0 z-20 bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const meta =
+                          (header.column.columnDef.meta as ColumnMeta) ?? {};
+                        const columnWithPinning =
+                          header.column as unknown as ColumnWithPinning;
+                        const {
+                          baseStyle,
+                          pinnedStyle,
+                          pinned,
+                          lastPinned,
+                          alignClass,
+                        } = computeColumnStyles(meta, columnWithPinning);
+
+                        return (
+                          <TableHead
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            style={{ ...baseStyle, ...pinnedStyle }}
+                            className={cn(
+                              "relative h-11 truncate border-r px-3 text-sm font-medium last:border-r-0 data-[pinned]:bg-muted/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                              header.column.id === rightStickyDividerTargetId &&
+                              "!border-r-0",
+                              meta.className,
+                              meta.headerClassName,
+                              alignClass,
+                            )}
+                            data-pinned={pinned || undefined}
+                            data-last-col={lastPinned || undefined}
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        <div className="inline-flex items-center gap-2">
+                          <LoaderIcon className="h-4 w-4 animate-spin" />
+                          <span>در حال بارگذاری سفارش‌ها…</span>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ) : error ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-destructive"
+                      >
+                        {error}
+                      </TableCell>
+                    </TableRow>
+                  ) : hasRows ? (
+                    <>
+                      {paddingTop > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingTop }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-top-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                      {virtualRows.map((virtualRow) => {
+                        const row = rowModel[virtualRow.index];
+                        if (!row) return null;
+
+                        return (
+                          <TableRow
+                            key={row.id}
+                            data-state={row.getIsSelected() && "selected"}
+                            className="border-b last:border-b-0"
+                            style={{ height: virtualRow.size }}
+                          >
+                            {row.getVisibleCells().map((cell) => {
+                              const meta =
+                                (cell.column.columnDef.meta as ColumnMeta) ??
+                                {};
+                              const columnWithPinning =
+                                cell.column as unknown as ColumnWithPinning;
+                              const {
+                                baseStyle,
+                                pinnedStyle,
+                                pinned,
+                                lastPinned,
+                                alignClass,
+                              } = computeColumnStyles(meta, columnWithPinning);
+
+                              const isFocused =
+                                focusedCell?.rowIndex === virtualRow.index &&
+                                focusedCell?.columnId === cell.column.id;
+                              const selected = isCellSelected(
+                                virtualRow.index,
+                                cell.column.id,
+                              );
+                              const isNavigable =
+                                !NON_NAVIGABLE_COLUMN_IDS.includes(
+                                  cell.column.id,
+                                );
+
+                              return (
+                                <TableCell
+                                  key={cell.id}
+                                  style={{ ...baseStyle, ...pinnedStyle }}
+                                  className={cn(
+                                    "truncate border-r p-3 py-2 text-sm transition-colors duration-75 last:border-r-0 data-[pinned]:bg-background/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                                    cell.column.id ===
+                                    rightStickyDividerTargetId &&
+                                    "!border-r-0",
+                                    isNavigable &&
+                                    "cursor-cell hover:bg-muted/40",
+                                    "data-[selected=true]:bg-muted/70 data-[selected=true]:text-foreground data-[selected=true]:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.06)] dark:data-[selected=true]:bg-muted/40",
+                                    "dark[data-[focused=true]:shadow-[inset_0_0_0_2px_rgba(129,140,248,0.8)] data-[focused=true]:relative data-[focused=true]:z-10 data-[focused=true]:bg-background data-[focused=true]:shadow-[inset_0_0_0_2px_rgba(99,102,241,0.8)]",
+                                    meta.className,
+                                    meta.cellClassName,
+                                    alignClass,
+                                  )}
+                                  data-pinned={pinned || undefined}
+                                  data-last-col={lastPinned || undefined}
+                                  data-focused={isFocused || undefined}
+                                  data-selected={selected || undefined}
+                                  onClick={(event) =>
+                                    handleCellClick(
+                                      virtualRow.index,
+                                      cell.column.id,
+                                      event,
+                                    )
+                                  }
+                                >
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                      {paddingBottom > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingBottom }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-bottom-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                    </>
+                  ) : (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        نتیجه‌ای یافت نشد.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table29.tsx b/blocks/data-table29.tsx
new file mode 100644
index 0000000..0bb17a9
--- /dev/null
+++ b/blocks/data-table29.tsx
@@ -0,0 +1,1714 @@
+"use client";
+
+import type {
+  ColumnPinningState,
+  Row,
+  RowSelectionState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ArrowDown,
+  ArrowUp,
+  CheckCheckIcon,
+  CheckCircle,
+  ChevronsUpDown,
+  Clock,
+  Copy,
+  LoaderIcon,
+  MoreHorizontal,
+  Package,
+  PieChart,
+  RefreshCcw,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_ROW_HEIGHT = 56;
+const DEFAULT_OVERSCAN = 8;
+const DATA_URL =
+  "https://raw.githubusercontent.com/zerostaticthemes/ShadcnBlocks-library-data/refs/heads/main/data/orders-ecommerce-1000.json";
+
+type TextEditorConfig = {
+  type: "text";
+  multiline?: boolean;
+  placeholder?: string;
+};
+
+type NumberEditorConfig = {
+  type: "number";
+  min?: number;
+  max?: number;
+  step?: number;
+  allowEmpty?: boolean;
+};
+
+type SelectOption = {
+  label: string;
+  value: string;
+};
+
+type SelectEditorConfig = {
+  type: "select";
+  options: Array<SelectOption>;
+  placeholder?: string;
+};
+
+type BooleanEditorConfig = {
+  type: "boolean";
+};
+
+type ColumnEditorConfig =
+  | TextEditorConfig
+  | NumberEditorConfig
+  | SelectEditorConfig
+  | BooleanEditorConfig;
+
+type DataTableColumnMeta = {
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  headerClassName?: string;
+  cellClassName?: string;
+  className?: string;
+  align?: "left" | "center" | "right";
+  editor?: ColumnEditorConfig;
+  clearValue?: unknown;
+};
+
+type ColumnWithPinning = {
+  getIsPinned?: () => "left" | "right" | false;
+  getIsLastColumn?: (position: "left" | "right") => boolean;
+  getIsFirstColumn?: (position: "left" | "right") => boolean;
+  getStart?: (position: "left" | "right") => number;
+  getAfter?: (position: "left" | "right") => number;
+  getSize?: () => number;
+};
+
+type ColumnStyleResult = {
+  style: CSSProperties;
+  pinned: "left" | "right" | false;
+  lastPinned?: "left" | "right";
+};
+
+const getColumnStyles = (
+  meta: DataTableColumnMeta,
+  column: ColumnWithPinning,
+): ColumnStyleResult => {
+  const baseStyle: CSSProperties = {};
+
+  if (meta.width !== undefined) {
+    baseStyle.width =
+      typeof meta.width === "number" ? `${meta.width}px` : meta.width;
+  }
+  if (meta.minWidth !== undefined) {
+    baseStyle.minWidth =
+      typeof meta.minWidth === "number" ? `${meta.minWidth}px` : meta.minWidth;
+  }
+  if (meta.maxWidth !== undefined) {
+    baseStyle.maxWidth =
+      typeof meta.maxWidth === "number" ? `${meta.maxWidth}px` : meta.maxWidth;
+  }
+  if (baseStyle.width === undefined && typeof column.getSize === "function") {
+    const computedWidth = column.getSize();
+    if (typeof computedWidth === "number" && Number.isFinite(computedWidth)) {
+      baseStyle.width = `${computedWidth}px`;
+    }
+  }
+
+  const pinned = column.getIsPinned?.() ?? false;
+  const pinnedStyle: CSSProperties = {};
+  let lastPinned: "left" | "right" | undefined;
+
+  if (pinned) {
+    pinnedStyle.position = "sticky";
+    pinnedStyle.zIndex = 1;
+
+    if (pinned === "left") {
+      const start = column.getStart?.("left") ?? 0;
+      pinnedStyle.left = `${start}px`;
+      if (column.getIsLastColumn?.("left")) {
+        lastPinned = "left";
+      }
+    }
+
+    if (pinned === "right") {
+      const after = column.getAfter?.("right") ?? 0;
+      pinnedStyle.right = `${after}px`;
+      if (column.getIsFirstColumn?.("right")) {
+        lastPinned = "right";
+      }
+    }
+
+    const resolvedWidth =
+      baseStyle.width ??
+      (typeof column.getSize === "function" ? column.getSize() : undefined);
+    if (resolvedWidth !== undefined) {
+      pinnedStyle.width =
+        typeof resolvedWidth === "number"
+          ? `${resolvedWidth}px`
+          : resolvedWidth;
+    }
+  }
+
+  return { style: { ...baseStyle, ...pinnedStyle }, pinned, lastPinned };
+};
+
+type CellPosition = {
+  rowId: string;
+  columnId: string;
+};
+
+type ContextMenuState = {
+  open: boolean;
+  x: number;
+  y: number;
+  cell: CellPosition | null;
+};
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialSelection?: RowSelectionState;
+  initialColumnPinning?: ColumnPinningState;
+  enableRowSelection?: boolean;
+  rowHeight?: number;
+  overscan?: number;
+  onUpdateCells?: (
+    updates: Array<{ rowId: string; columnId: string; value: unknown }>,
+  ) => void;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialSelection = {},
+    enableRowSelection = true,
+    initialColumnPinning = {},
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    overscan = DEFAULT_OVERSCAN,
+    onUpdateCells,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+  const [columnPinning, setColumnPinning] =
+    React.useState<ColumnPinningState>(initialColumnPinning);
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const [editingCell, setEditingCell] = React.useState<CellPosition | null>(
+    null,
+  );
+  const [editingValue, setEditingValue] = React.useState<unknown>("");
+  const [editingConfig, setEditingConfig] =
+    React.useState<ColumnEditorConfig | null>(null);
+  const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
+    open: false,
+    x: 0,
+    y: 0,
+    cell: null,
+  });
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnPinning,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    onColumnPinningChange: setColumnPinning,
+    enableRowSelection,
+  });
+
+  const columnMetaMap = React.useMemo(() => {
+    const map = new Map<string, DataTableColumnMeta>();
+    columns.forEach((column) => {
+      const id =
+        column.id ??
+        ("accessorKey" in column && typeof column.accessorKey === "string"
+          ? column.accessorKey
+          : undefined);
+      if (!id) return;
+      map.set(id, (column.meta as DataTableColumnMeta) ?? {});
+    });
+    return map;
+  }, [columns]);
+
+  const getEditorConfig = React.useCallback(
+    (columnId: string) => columnMetaMap.get(columnId)?.editor,
+    [columnMetaMap],
+  );
+
+  const getInitialEditorValue = React.useCallback(
+    (editor: ColumnEditorConfig | undefined, value: unknown) => {
+      if (!editor) {
+        return value === undefined || value === null ? "" : String(value);
+      }
+      switch (editor.type) {
+        case "number":
+          if (value === undefined || value === null) return "";
+          return typeof value === "number" ? value.toString() : String(value);
+        case "boolean":
+          return Boolean(value);
+        case "select":
+          return typeof value === "string" ? value : "";
+        case "text":
+        default:
+          return value === undefined || value === null ? "" : String(value);
+      }
+    },
+    [],
+  );
+
+  const coerceEditorValue = React.useCallback(
+    (
+      editor: ColumnEditorConfig | null,
+      draft: unknown,
+    ): { value: unknown; valid: boolean } => {
+      if (!editor) {
+        return {
+          value: draft === undefined || draft === null ? "" : draft,
+          valid: true,
+        };
+      }
+      switch (editor.type) {
+        case "number": {
+          const raw =
+            typeof draft === "number"
+              ? draft.toString()
+              : draft === undefined || draft === null
+                ? ""
+                : String(draft);
+          const trimmed = raw.trim();
+          if (trimmed === "") {
+            if (editor.allowEmpty) {
+              return { value: null, valid: true };
+            }
+            return { value: 0, valid: true };
+          }
+          const parsed = Number(trimmed);
+          if (Number.isNaN(parsed)) {
+            return { value: draft, valid: false };
+          }
+          return { value: parsed, valid: true };
+        }
+        case "boolean":
+          return { value: Boolean(draft), valid: true };
+        case "select":
+          return {
+            value: typeof draft === "string" ? draft : "",
+            valid: true,
+          };
+        case "text":
+        default:
+          return {
+            value: draft === undefined || draft === null ? "" : String(draft),
+            valid: true,
+          };
+      }
+    },
+    [],
+  );
+
+  const rowVirtualizer = useVirtualizer({
+    count: table.getRowModel().rows.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+    measureElement:
+      typeof window !== "undefined" &&
+        navigator.userAgent.indexOf("Firefox") === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+  });
+
+  const applyRowUpdates = React.useCallback(
+    (updates: Array<{ rowId: string; columnId: string; value: unknown }>) => {
+      if (!onUpdateCells) return;
+      const existingRowIds = new Set(
+        table.getRowModel().rows.map((row) => row.id),
+      );
+      const normalized = updates.filter(({ rowId }) =>
+        existingRowIds.has(rowId),
+      );
+      if (normalized.length > 0) {
+        onUpdateCells(normalized);
+      }
+    },
+    [table, onUpdateCells],
+  );
+
+  const startEditing = React.useCallback(
+    (rowId: string, columnId: string) => {
+      const editor = getEditorConfig(columnId);
+      if (!editor) return;
+      const rows = table.getRowModel().rows;
+      const row = rows.find((item) => item.id === rowId);
+      if (!row) return;
+      const cell = row.getVisibleCells().find((c) => c.column.id === columnId);
+      const value = cell?.getValue();
+      setEditingCell({ rowId, columnId });
+      setEditingConfig(editor);
+      setEditingValue(getInitialEditorValue(editor, value));
+    },
+    [table, getEditorConfig, getInitialEditorValue],
+  );
+
+  const cancelEditing = React.useCallback(() => {
+    setEditingCell(null);
+    setEditingValue("");
+    setEditingConfig(null);
+  }, []);
+
+  const commitEditing = React.useCallback(
+    (draftValue?: unknown) => {
+      if (!editingCell) return;
+      const { value: nextValue, valid } = coerceEditorValue(
+        editingConfig,
+        draftValue ?? editingValue,
+      );
+      if (!valid) {
+        return;
+      }
+      applyRowUpdates([
+        {
+          rowId: editingCell.rowId,
+          columnId: editingCell.columnId,
+          value: nextValue,
+        },
+      ]);
+      setEditingCell(null);
+      setEditingValue("");
+      setEditingConfig(null);
+    },
+    [
+      editingCell,
+      editingValue,
+      editingConfig,
+      applyRowUpdates,
+      coerceEditorValue,
+    ],
+  );
+
+  const copyCellToClipboard = React.useCallback(
+    async (cell: CellPosition) => {
+      const row = table
+        .getRowModel()
+        .rows.find((item) => item.id === cell.rowId);
+      if (!row) {
+        return;
+      }
+
+      if (
+        typeof navigator === "undefined" ||
+        !navigator.clipboard ||
+        typeof navigator.clipboard.writeText !== "function"
+      ) {
+        toast.error("کلیپ‌بورد در این مرورگر در دسترس نیست");
+        return;
+      }
+
+      const value = row.getValue(cell.columnId);
+      const text =
+        value === null || value === undefined
+          ? ""
+          : typeof value === "string"
+            ? value
+            : String(value);
+
+      try {
+        await navigator.clipboard.writeText(text);
+        toast.success("مقدار سلول در کلیپ‌بورد کپی شد");
+      } catch (error) {
+        console.error("Failed to copy cell", error);
+        toast.error("کپی در کلیپ‌بورد انجام نشد");
+      }
+    },
+    [table],
+  );
+
+  const handleCellDoubleClick = React.useCallback(
+    (rowId: string, columnId: string) => {
+      startEditing(rowId, columnId);
+    },
+    [startEditing],
+  );
+
+  const handleCellContextMenu = React.useCallback(
+    (
+      rowId: string,
+      columnId: string,
+      event: React.MouseEvent<HTMLTableCellElement>,
+    ) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (editingCell) {
+        commitEditing();
+      }
+      setContextMenu({
+        open: true,
+        x: event.clientX,
+        y: event.clientY,
+        cell: { rowId, columnId },
+      });
+    },
+    [editingCell, commitEditing],
+  );
+
+  const closeContextMenu = React.useCallback(() => {
+    setContextMenu((prev) => ({ ...prev, open: false }));
+  }, []);
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    rowSelection,
+    setRowSelection,
+    columnPinning,
+    setColumnPinning,
+    tableContainerRef,
+    rowVirtualizer,
+    editingCell,
+    editingValue,
+    setEditingValue,
+    handleCellDoubleClick,
+    commitEditing,
+    cancelEditing,
+    handleCellContextMenu,
+    contextMenu,
+    closeContextMenu,
+    copyCellToClipboard,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+interface DataTableRowActionsProps<TData extends Record<string, unknown>> {
+  row: Row<TData>;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData extends Record<string, unknown>>({
+  row,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = row.original as Record<string, unknown>;
+  const resolvedId =
+    (item[idField] as string | number | undefined) ??
+    (item.id as string | number | undefined);
+  const idText = resolvedId != null ? String(resolvedId) : "";
+  const handleCopy = async () => {
+    if (!idText) {
+      toast.error("شناسه‌ای برای کپی موجود نیست");
+      return;
+    }
+    if (
+      typeof navigator === "undefined" ||
+      !navigator.clipboard ||
+      typeof navigator.clipboard.writeText !== "function"
+    ) {
+      toast.error("کلیپ‌بورد در این مرورگر در دسترس نیست");
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(idText);
+      toast.success("شناسه در کلیپ‌بورد کپی شد");
+    } catch (error) {
+      console.error("Failed to copy ID", error);
+      toast.error("کپی در کلیپ‌بورد انجام نشد");
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem disabled={!idText} onClick={handleCopy}>
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  items: z.number(),
+  customer: z.string(),
+  customer_email: z.string(),
+  customer_segment: z.string(),
+  fulfillment_channel: z.string(),
+  shipping_service: z.string(),
+  warehouse: z.string(),
+  order_status: z.string(),
+  payment_status: z.string(),
+  tracking_number: z.string(),
+  assigned_to: z.string(),
+  return_status: z.string(),
+  coupon_code: z.string().nullable(),
+  gift: z.boolean(),
+  notes: z.string(),
+});
+
+export type Order = z.infer<typeof schema>;
+
+export type StatusOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+export const orderStatuses: StatusOption[] = [
+  { label: "تحویل‌شده", value: "Fulfilled", icon: CheckCircle },
+  { label: "آماده تحویل", value: "Ready for pickup", icon: Package },
+  { label: "تحویل‌نشده", value: "Unfulfilled", icon: Clock },
+];
+
+export const paymentStatuses: StatusOption[] = [
+  { label: "پرداخت‌شده", value: "Paid", icon: CheckCheckIcon },
+  { label: "در انتظار", value: "Pending", icon: LoaderIcon },
+  { label: "مسترد شده", value: "Refunded", icon: RefreshCcw },
+  { label: "مسترد جزئی", value: "Partially refunded", icon: PieChart },
+];
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const segmentLabels: Record<string, string> = {
+  Enterprise: "سازمانی",
+  Marketplace: "بازارچه",
+  Retail: "خرده‌فروشی",
+  VIP: "ویژه",
+  Wholesale: "عمده‌فروشی",
+};
+
+const fulfillmentLabels: Record<string, string> = {
+  "3PL": "لجستیک شخص ثالث",
+  Dropship: "دراپ‌شیپ",
+  FBA: "FBA",
+  "Merchant Fulfilled": "ارسال توسط فروشنده",
+};
+
+const shippingLabels: Record<string, string> = {
+  "Expedited Air": "هوایی سریع",
+  "Prime 1-Day": "پرایم ۱ روزه",
+  "Prime 2-Day": "پرایم ۲ روزه",
+  "Same-Day Local": "تحویل همان‌روز",
+  "Standard Ground": "ارسال عادی",
+};
+
+const returnStatusLabels: Record<string, string> = {
+  Authorized: "تأیید‌شده",
+  None: "ندارد",
+  Received: "دریافت‌شده",
+  Requested: "درخواست‌شده",
+};
+
+const translateLabel = (map: Record<string, string>, value: string) =>
+  map[value] ?? value;
+
+const createStatusLookup = (options: StatusOption[]) =>
+  options.reduce<Record<string, StatusOption>>((acc, option) => {
+    acc[option.value] = option;
+    return acc;
+  }, {});
+
+const orderStatusLookup = createStatusLookup(orderStatuses);
+const paymentStatusLookup = createStatusLookup(paymentStatuses);
+
+export const getOrderStatusMeta = (status: string) => orderStatusLookup[status];
+export const getPaymentStatusMeta = (status: string) =>
+  paymentStatusLookup[status];
+
+export const getStatusVariant = (status: string) => {
+  switch (status) {
+    case "Fulfilled":
+      return "default";
+    case "Ready for pickup":
+      return "secondary";
+    case "Unfulfilled":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const getPaymentVariant = (status: string) => {
+  switch (status) {
+    case "Paid":
+      return "default";
+    case "Pending":
+      return "secondary";
+    case "Refunded":
+      return "outline";
+    case "Partially refunded":
+      return "outline";
+    default:
+      return "outline";
+  }
+};
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[120px] font-mono">{row.original.id}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+    meta: {
+      width: 120,
+      editor: { type: "text" },
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex gap-2">
+          <div className="max-w-[320px] truncate font-medium">
+            {row.original.purchased}
+          </div>
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 280,
+      editor: { type: "text" },
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[180px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      width: 200,
+      editor: { type: "text" },
+    },
+  },
+  {
+    accessorKey: "customer_email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="ایمیل مشتری" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.customer_email}
+      </span>
+    ),
+    meta: {
+      width: 240,
+      editor: { type: "text" },
+    },
+  },
+  {
+    accessorKey: "customer_segment",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="بخش مشتری" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">
+        {translateLabel(segmentLabels, row.original.customer_segment)}
+      </Badge>
+    ),
+    meta: {
+      className: "whitespace-nowrap",
+      width: 160,
+      editor: {
+        type: "select",
+        options: [
+          { label: "عمده‌فروشی", value: "Wholesale" },
+          { label: "خرده‌فروشی", value: "Retail" },
+          { label: "سازمانی", value: "Enterprise" },
+          { label: "بازارچه", value: "Marketplace" },
+          { label: "ویژه", value: "VIP" },
+        ],
+        placeholder: "انتخاب کنید…",
+      },
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "fulfillment_channel",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تحویل" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {translateLabel(fulfillmentLabels, row.original.fulfillment_channel)}
+      </span>
+    ),
+    meta: {
+      className: "whitespace-nowrap",
+      width: 160,
+      editor: { type: "text" },
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "shipping_service",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سرویس ارسال" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {translateLabel(shippingLabels, row.original.shipping_service)}
+      </span>
+    ),
+    meta: { width: 220, editor: { type: "text" } },
+  },
+  {
+    accessorKey: "warehouse",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="انبار" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.warehouse}
+      </span>
+    ),
+    meta: {
+      className: "whitespace-nowrap",
+      width: 140,
+      editor: { type: "text" },
+    },
+  },
+  {
+    accessorKey: "order_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت سفارش" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.order_status;
+      const statusMeta = getOrderStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getStatusVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon ? <StatusIcon className="size-3" /> : null}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+    enableSorting: false,
+    meta: {
+      width: 200,
+      editor: {
+        type: "select",
+        options: orderStatuses.map((status) => ({
+          label: status.label,
+          value: status.value,
+        })),
+      },
+    },
+  },
+  {
+    accessorKey: "payment_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت پرداخت" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.payment_status;
+      const statusMeta = getPaymentStatusMeta(status);
+      const StatusIcon = statusMeta?.icon;
+
+      return (
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={getPaymentVariant(status)}
+            className="gap-1 whitespace-nowrap"
+          >
+            {StatusIcon ? <StatusIcon className="size-3" /> : null}
+            <span>{statusMeta?.label ?? status}</span>
+          </Badge>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+    enableSorting: false,
+    meta: {
+      width: 200,
+      editor: {
+        type: "select",
+        options: paymentStatuses.map((status) => ({
+          label: status.label,
+          value: status.value,
+        })),
+      },
+    },
+  },
+
+  {
+    accessorKey: "items",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تعداد" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs tabular-nums sm:text-sm">
+        {formatNumber(row.original.items)}
+      </span>
+    ),
+    meta: {
+      align: "center",
+      className: "tabular-nums",
+      width: 100,
+      editor: { type: "number", min: 0, step: 1 },
+    },
+  },
+  {
+    accessorKey: "tracking_number",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="پیگیری" />
+    ),
+    cell: ({ row }) => (
+      <span className="font-mono text-xs sm:text-sm">
+        {row.original.tracking_number}
+      </span>
+    ),
+    meta: {
+      className: "whitespace-nowrap",
+      width: 200,
+      editor: { type: "text" },
+    },
+  },
+  {
+    accessorKey: "assigned_to",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مسئول" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {row.original.assigned_to}
+      </span>
+    ),
+    meta: {
+      className: "whitespace-nowrap",
+      width: 180,
+      editor: { type: "text" },
+    },
+  },
+  {
+    accessorKey: "return_status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="وضعیت مرجوعی" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">
+        {translateLabel(returnStatusLabels, row.original.return_status)}
+      </Badge>
+    ),
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+    meta: {
+      width: 180,
+      editor: { type: "text" },
+    },
+  },
+  {
+    accessorKey: "coupon_code",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد تخفیف" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs sm:text-sm">
+        {row.original.coupon_code ?? ""}
+      </span>
+    ),
+    meta: { width: 140, editor: { type: "text" } },
+  },
+  {
+    accessorKey: "gift",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="هدیه" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant={row.original.gift ? "secondary" : "outline"}>
+        {row.original.gift ? "بله" : "خیر"}
+      </Badge>
+    ),
+    meta: { width: 120, editor: { type: "boolean" } },
+  },
+  {
+    accessorKey: "notes",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="یادداشت" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.notes}
+      </span>
+    ),
+    meta: {
+      width: 260,
+      editor: { type: "text", multiline: true },
+    },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <DataTableRowActions row={row} itemName="سفارش" idField="id" />
+    ),
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+];
+
+type CellEditorProps = {
+  editor: ColumnEditorConfig;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  onCommit: (value?: unknown) => void;
+  onCancel: () => void;
+};
+
+const CellEditor = React.memo(function CellEditor({
+  editor,
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+}: CellEditorProps) {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    e.stopPropagation();
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  if (editor.type === "number") {
+    return (
+      <Input
+        type="number"
+        autoFocus
+        min={editor.min}
+        max={editor.max}
+        step={editor.step}
+        className="h-8"
+        value={
+          typeof value === "string"
+            ? value
+            : value === undefined || value === null
+              ? ""
+              : String(value)
+        }
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={() => onCommit()}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          handleKeyDown(e);
+          if (e.key === "Enter") {
+            e.preventDefault();
+            onCommit();
+          }
+        }}
+      />
+    );
+  }
+
+  if (editor.type === "select") {
+    return (
+      <Select
+        value={typeof value === "string" ? value : ""}
+        onValueChange={(newValue) => {
+          onChange(newValue);
+          onCommit(newValue);
+        }}
+      >
+        <SelectTrigger
+          autoFocus
+          className="h-8 w-full"
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={handleKeyDown}
+        >
+          <SelectValue placeholder={editor.placeholder ?? "انتخاب کنید…"} />
+        </SelectTrigger>
+        <SelectContent>
+          {editor.options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+
+  if (editor.type === "boolean") {
+    const boolValue = Boolean(value);
+    return (
+      <div className="flex items-center gap-2">
+        <Checkbox
+          checked={boolValue}
+          onCheckedChange={(checked) => {
+            const nextValue = Boolean(checked);
+            onChange(nextValue);
+            onCommit(nextValue);
+          }}
+        />
+        <span className="text-sm">{boolValue ? "بله" : "خیر"}</span>
+      </div>
+    );
+  }
+
+  if (editor.type === "text" && editor.multiline) {
+    return (
+      <Textarea
+        autoFocus
+        rows={3}
+        className="min-h-[60px] resize-none"
+        value={
+          typeof value === "string"
+            ? value
+            : value === undefined || value === null
+              ? ""
+              : String(value)
+        }
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={() => onCommit()}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          handleKeyDown(e);
+          if (e.key === "Enter" && e.metaKey) {
+            e.preventDefault();
+            onCommit();
+          }
+        }}
+      />
+    );
+  }
+
+  return (
+    <Input
+      type="text"
+      autoFocus
+      className="h-8"
+      value={
+        typeof value === "string"
+          ? value
+          : value === undefined || value === null
+            ? ""
+            : String(value)
+      }
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={() => onCommit()}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        handleKeyDown(e);
+        if (e.key === "Enter") {
+          e.preventDefault();
+          onCommit();
+        }
+      }}
+    />
+  );
+});
+
+export const DataTable29 = ({ className }: { className?: string }) => {
+  const [data, setData] = React.useState<Order[]>([]);
+  const initialDataRef = React.useRef<Order[]>([]);
+  const contextMenuRef = React.useRef<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const replaceData = React.useCallback((rows: Order[]) => {
+    setData(rows);
+    initialDataRef.current = rows;
+  }, []);
+
+  React.useEffect(() => {
+    let active = true;
+
+    const fetchData = async () => {
+      setError(null);
+      setIsLoading(true);
+      try {
+        const res = await fetch(DATA_URL);
+        if (!res.ok) {
+          const message = `بارگذاری داده سفارش‌ها ناموفق بود (${res.status})`;
+          console.error(message, res.statusText);
+          if (active) setError(message);
+          return;
+        }
+        const json = await res.json();
+        const parsed = schema.array().parse(json);
+        if (active) {
+          replaceData(parsed);
+        }
+      } catch (error) {
+        console.error("Error fetching orders data", error);
+        if (active) setError("خطا در بارگذاری داده سفارش‌ها");
+      } finally {
+        if (active) setIsLoading(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      active = false;
+    };
+  }, [replaceData]);
+
+  const handleUpdateCells = React.useCallback(
+    (updates: Array<{ rowId: string; columnId: string; value: unknown }>) => {
+      setData((previous) => {
+        const updateMap = updates.reduce((acc, update) => {
+          const existing = acc.get(update.rowId) ?? [];
+          existing.push(update);
+          acc.set(update.rowId, existing);
+          return acc;
+        }, new Map<string, Array<{ columnId: string; value: unknown }>>());
+
+        return previous.map((row) => {
+          const rowUpdates = updateMap.get(row.id);
+          if (!rowUpdates || rowUpdates.length === 0) return row;
+          const nextRow: Order = { ...row };
+          rowUpdates.forEach(({ columnId, value }) => {
+            (nextRow as Record<string, unknown>)[columnId] = value;
+          });
+          return nextRow;
+        });
+      });
+    },
+    [],
+  );
+
+  const {
+    table,
+    tableContainerRef,
+    rowVirtualizer,
+    editingCell,
+    editingValue,
+    setEditingValue,
+    handleCellDoubleClick,
+    commitEditing,
+    cancelEditing,
+    handleCellContextMenu,
+    contextMenu,
+    closeContextMenu,
+    copyCellToClipboard,
+  } = useDataTable({
+    data,
+    columns,
+    getRowId: (row) => row.id.toString(),
+    initialColumnPinning: { left: ["select"], right: ["actions"] },
+    onUpdateCells: handleUpdateCells,
+  });
+
+  const handleResetCell = React.useCallback(
+    (cell: CellPosition) => {
+      const originalRow = initialDataRef.current.find(
+        (row) => row.id === cell.rowId,
+      );
+      if (!originalRow) return;
+      const nextValue = (originalRow as Record<string, unknown>)[cell.columnId];
+      handleUpdateCells([
+        {
+          rowId: cell.rowId,
+          columnId: cell.columnId,
+          value: nextValue,
+        },
+      ]);
+    },
+    [handleUpdateCells],
+  );
+
+  const handleContextMenuGlobalEvents = React.useCallback(
+    (event: Event) => {
+      if (event.type === "mousedown") {
+        const target = event.target as Node | null;
+        if (target && contextMenuRef.current?.contains(target)) {
+          return;
+        }
+      }
+      closeContextMenu();
+    },
+    [closeContextMenu],
+  );
+
+  React.useEffect(() => {
+    if (!contextMenu.open) return;
+
+    window.addEventListener("mousedown", handleContextMenuGlobalEvents);
+    window.addEventListener("resize", handleContextMenuGlobalEvents);
+    window.addEventListener("scroll", handleContextMenuGlobalEvents, true);
+
+    return () => {
+      window.removeEventListener("mousedown", handleContextMenuGlobalEvents);
+      window.removeEventListener("resize", handleContextMenuGlobalEvents);
+      window.removeEventListener("scroll", handleContextMenuGlobalEvents, true);
+    };
+  }, [contextMenu.open, handleContextMenuGlobalEvents]);
+
+  const visibleColumns = table.getVisibleLeafColumns();
+  const visibleColumnCount = Math.max(visibleColumns.length, 1);
+  const visibleColumnIds = visibleColumns.map((column) => column.id);
+  const rightPinnedColumnIdSet = new Set(
+    table.getState().columnPinning.right ?? [],
+  );
+  const firstRightPinnedIndex = visibleColumnIds.findIndex((columnId) =>
+    rightPinnedColumnIdSet.has(columnId),
+  );
+  const rightStickyDividerTargetId =
+    firstRightPinnedIndex > 0
+      ? visibleColumnIds[firstRightPinnedIndex - 1]
+      : null;
+  const rowModel = table.getRowModel().rows;
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)
+      : 0;
+  const hasRows = rowModel.length > 0;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول مجازی با ویرایش سلول
+            </h2>
+            <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
+              این جدول از ویرایش درون‌خطی سلول پشتیبانی می‌کند. برای ویرایش
+              مقدار، روی هر سلول دوبار کلیک کنید. راست‌کلیک برای کپی و بازنشانی
+              مقدار است. Escape برای لغو و اینتر برای ذخیره.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-lg border">
+            <div
+              ref={tableContainerRef}
+              className="relative max-h-[600px] overflow-auto"
+            >
+              {isLoading ? (
+                <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+                  <div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                    <span>در حال بارگذاری سفارش‌ها…</span>
+                  </div>
+                </div>
+              ) : null}
+              <table className="w-full table-fixed caption-bottom border-separate border-spacing-0 text-sm [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:hover_td[data-pinned]]:bg-muted/50 [&_tr:not(:last-child)_td]:border-b [&_tr[data-state=selected]_td[data-pinned]]:bg-muted [&_tr[data-state=selected]:hover_td[data-pinned]]:bg-muted">
+                <TableHeader className="sticky top-0 z-20 bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const meta =
+                          (header.column.columnDef
+                            .meta as DataTableColumnMeta) ?? {};
+                        const columnWithPinning =
+                          header.column as unknown as ColumnWithPinning;
+                        const {
+                          style: columnStyle,
+                          pinned,
+                          lastPinned,
+                        } = getColumnStyles(meta, columnWithPinning);
+
+                        const alignClass =
+                          meta.align === "center"
+                            ? "text-center"
+                            : meta.align === "right"
+                              ? "text-end"
+                              : meta.align === "left"
+                                ? "text-start"
+                                : undefined;
+
+                        return (
+                          <TableHead
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            style={columnStyle}
+                            className={cn(
+                              "relative h-11 truncate border-r px-3 text-sm font-medium last:border-r-0 data-[pinned]:bg-muted/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                              header.column.id === rightStickyDividerTargetId &&
+                              "!border-r-0",
+                              meta.className,
+                              meta.headerClassName,
+                              alignClass,
+                            )}
+                            data-pinned={pinned || undefined}
+                            data-last-col={lastPinned || undefined}
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        <div className="inline-flex items-center gap-2">
+                          <LoaderIcon className="h-4 w-4 animate-spin" />
+                          <span>در حال بارگذاری سفارش‌ها…</span>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ) : error ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-destructive"
+                      >
+                        {error}
+                      </TableCell>
+                    </TableRow>
+                  ) : hasRows ? (
+                    <>
+                      {paddingTop > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingTop }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-top-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                      {virtualRows.map((virtualRow) => {
+                        const row = rowModel[virtualRow.index];
+                        if (!row) return null;
+
+                        return (
+                          <TableRow
+                            key={row.id}
+                            data-state={row.getIsSelected() && "selected"}
+                            className="border-b last:border-b-0"
+                            style={{ height: virtualRow.size }}
+                          >
+                            {row.getVisibleCells().map((cell) => {
+                              const meta =
+                                (cell.column.columnDef
+                                  .meta as DataTableColumnMeta) ?? {};
+                              const columnWithPinning =
+                                cell.column as unknown as ColumnWithPinning;
+                              const {
+                                style: columnStyle,
+                                pinned,
+                                lastPinned,
+                              } = getColumnStyles(meta, columnWithPinning);
+
+                              const editor = meta.editor;
+                              const isEditingCell =
+                                editingCell?.rowId === row.id &&
+                                editingCell?.columnId === cell.column.id &&
+                                Boolean(editor);
+
+                              const alignClass =
+                                meta.align === "center"
+                                  ? "text-center"
+                                  : meta.align === "right"
+                                    ? "text-end"
+                                    : meta.align === "left"
+                                      ? "text-start"
+                                      : undefined;
+
+                              return (
+                                <TableCell
+                                  key={cell.id}
+                                  style={columnStyle}
+                                  className={cn(
+                                    "border-r p-3 py-2 text-sm last:border-r-0 data-[pinned]:bg-background/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                                    cell.column.id ===
+                                    rightStickyDividerTargetId &&
+                                    "!border-r-0",
+                                    meta.className,
+                                    meta.cellClassName,
+                                    alignClass,
+                                    isEditingCell
+                                      ? "overflow-visible"
+                                      : "truncate",
+                                  )}
+                                  data-pinned={pinned || undefined}
+                                  data-last-col={lastPinned || undefined}
+                                  onDoubleClick={() =>
+                                    handleCellDoubleClick(
+                                      row.id,
+                                      cell.column.id,
+                                    )
+                                  }
+                                  onContextMenu={(event) =>
+                                    handleCellContextMenu(
+                                      row.id,
+                                      cell.column.id,
+                                      event,
+                                    )
+                                  }
+                                >
+                                  {isEditingCell && editor ? (
+                                    <CellEditor
+                                      editor={editor}
+                                      value={editingValue}
+                                      onChange={setEditingValue}
+                                      onCommit={commitEditing}
+                                      onCancel={cancelEditing}
+                                    />
+                                  ) : (
+                                    flexRender(
+                                      cell.column.columnDef.cell,
+                                      cell.getContext(),
+                                    )
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                      {paddingBottom > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingBottom }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-bottom-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                    </>
+                  ) : (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        نتیجه‌ای یافت نشد.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      {contextMenu.open && contextMenu.cell ? (
+        <div
+          className="fixed z-50 min-w-[180px] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md fade-in-0 zoom-in-95"
+          ref={contextMenuRef}
+          style={{ top: contextMenu.y, left: contextMenu.x }}
+        >
+          <button
+            className="relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+            onClick={async () => {
+              await copyCellToClipboard(contextMenu.cell!);
+              closeContextMenu();
+            }}
+          >
+            <Copy className="size-4" />
+            کپی مقدار سلول
+          </button>
+          <button
+            className="relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+            onClick={() => {
+              handleResetCell(contextMenu.cell!);
+              closeContextMenu();
+            }}
+          >
+            <RefreshCcw className="size-4" />
+            بازنشانی مقدار سلول
+          </button>
+        </div>
+      ) : null}
+    </section>
+  );
+};
diff --git a/blocks/data-table3.tsx b/blocks/data-table3.tsx
new file mode 100644
index 0000000..9ef6a3a
--- /dev/null
+++ b/blocks/data-table3.tsx
@@ -0,0 +1,362 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const { data, columns, getRowId, initialSorting = [] } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable3 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول داده راه‌راه
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با رنگ‌بندی متناوب سطرها برای خوانایی بهتر. شامل
+              سرستون برجسته و الگوی راه‌راه برای مرور آسان‌تر داده‌ها.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id} className="bg-muted/40">
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead
+                          key={header.id}
+                          colSpan={header.colSpan}
+                          className="bg-muted/40 px-0"
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                      className="even:bg-muted/30"
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table30.tsx b/blocks/data-table30.tsx
new file mode 100644
index 0000000..e64be5a
--- /dev/null
+++ b/blocks/data-table30.tsx
@@ -0,0 +1,1153 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  ColumnPinningState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronsUpDown,
+  LoaderIcon,
+  MoreHorizontal,
+  Search,
+  X,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_ROW_HEIGHT = 56;
+const DEFAULT_OVERSCAN = 8;
+const SEARCH_SHORTCUT_KEY = "k";
+const DATA_URL =
+  "https://raw.githubusercontent.com/zerostaticthemes/ShadcnBlocks-library-data/refs/heads/main/data/orders-ecommerce-1000.json";
+
+type CellMatch = {
+  rowIndex: number;
+  columnId: string;
+};
+
+type ColumnStyleMeta = {
+  align?: "left" | "center" | "right";
+  headerClassName?: string;
+  cellClassName?: string;
+  className?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+};
+
+type ColumnWithPinning = {
+  getIsPinned?: () => "left" | "right" | false;
+  getIsLastColumn?: (position: "left" | "right") => boolean;
+  getIsFirstColumn?: (position: "left" | "right") => boolean;
+  getStart?: (position: "left" | "right") => number;
+  getAfter?: (position: "left" | "right") => number;
+  getSize?: () => number;
+};
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  initialColumnPinning?: ColumnPinningState;
+  enableRowSelection?: boolean;
+  rowHeight?: number;
+  overscan?: number;
+};
+
+function getColumnLayoutStyles(
+  meta: ColumnStyleMeta,
+  columnWithPinning: ColumnWithPinning,
+) {
+  const baseStyle: CSSProperties = {};
+  if (meta.width !== undefined) {
+    baseStyle.width =
+      typeof meta.width === "number" ? `${meta.width}px` : meta.width;
+  }
+  if (meta.minWidth !== undefined) {
+    baseStyle.minWidth =
+      typeof meta.minWidth === "number" ? `${meta.minWidth}px` : meta.minWidth;
+  }
+  if (meta.maxWidth !== undefined) {
+    baseStyle.maxWidth =
+      typeof meta.maxWidth === "number" ? `${meta.maxWidth}px` : meta.maxWidth;
+  }
+  if (
+    baseStyle.width === undefined &&
+    typeof columnWithPinning.getSize === "function"
+  ) {
+    const computedWidth = columnWithPinning.getSize();
+    if (typeof computedWidth === "number" && Number.isFinite(computedWidth)) {
+      baseStyle.width = `${computedWidth}px`;
+    }
+  }
+
+  const pinned = columnWithPinning.getIsPinned?.();
+  const pinnedStyle: CSSProperties = {};
+  let lastPinned: "left" | "right" | undefined;
+
+  if (pinned) {
+    pinnedStyle.position = "sticky";
+    pinnedStyle.zIndex = 1;
+
+    if (pinned === "left") {
+      const start = columnWithPinning.getStart?.("left") ?? 0;
+      pinnedStyle.left = `${start}px`;
+      if (columnWithPinning.getIsLastColumn?.("left")) {
+        lastPinned = "left";
+      }
+    }
+
+    if (pinned === "right") {
+      const after = columnWithPinning.getAfter?.("right") ?? 0;
+      pinnedStyle.right = `${after}px`;
+      if (columnWithPinning.getIsFirstColumn?.("right")) {
+        lastPinned = "right";
+      }
+    }
+
+    const resolvedWidth =
+      baseStyle.width ??
+      (typeof columnWithPinning.getSize === "function"
+        ? columnWithPinning.getSize()
+        : undefined);
+    if (resolvedWidth !== undefined) {
+      pinnedStyle.width =
+        typeof resolvedWidth === "number"
+          ? `${resolvedWidth}px`
+          : resolvedWidth;
+    }
+  }
+
+  return { baseStyle, pinnedStyle, pinned, lastPinned };
+}
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+
+    initialSelection = {},
+    enableRowSelection = true,
+    initialColumnPinning = {},
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    overscan = DEFAULT_OVERSCAN,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+  const [columnPinning, setColumnPinning] =
+    React.useState<ColumnPinningState>(initialColumnPinning);
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [searchMatches, setSearchMatches] = React.useState<CellMatch[]>([]);
+  const [matchIndex, setMatchIndex] = React.useState(-1);
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnPinning,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    onColumnPinningChange: setColumnPinning,
+    enableRowSelection,
+  });
+
+  const rowVirtualizer = useVirtualizer({
+    count: table.getRowModel().rows.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+    measureElement:
+      typeof window !== "undefined" &&
+        navigator.userAgent.indexOf("Firefox") === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+  });
+
+  const tableState = table.getState();
+  const tableSorting = tableState.sorting;
+  const tableColumnFilters = tableState.columnFilters;
+  const tableColumnVisibility = tableState.columnVisibility;
+
+  const searchMatchKey = React.useCallback(
+    (rowIndex: number, columnId: string) => `${rowIndex}::${columnId}`,
+    [],
+  );
+
+  React.useEffect(() => {
+    if (!searchQuery.trim()) {
+      setSearchMatches([]);
+      setMatchIndex(-1);
+      return;
+    }
+
+    const lowerQuery = searchQuery.toLowerCase();
+    const rows = table.getRowModel().rows;
+    const matches: CellMatch[] = [];
+
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+      const row = rows[rowIndex];
+      if (!row) continue;
+
+      const cells = row.getVisibleCells();
+      for (let i = 0; i < cells.length; i++) {
+        const cell = cells[i];
+        const value = cell.getValue();
+        const stringValue =
+          value === undefined || value === null ? "" : String(value);
+
+        if (stringValue.toLowerCase().includes(lowerQuery)) {
+          matches.push({ rowIndex, columnId: cell.column.id });
+        }
+      }
+    }
+
+    setSearchMatches(matches);
+    setMatchIndex(matches.length > 0 ? 0 : -1);
+
+    if (matches.length > 0) {
+      const firstMatch = matches[0];
+      requestAnimationFrame(() => {
+        rowVirtualizer.scrollToIndex(firstMatch.rowIndex, {
+          align: "center",
+        });
+      });
+    }
+  }, [
+    searchQuery,
+    table,
+    rowVirtualizer,
+    data,
+    tableSorting,
+    tableColumnFilters,
+    tableColumnVisibility,
+  ]);
+
+  const openSearch = React.useCallback(() => {
+    setSearchOpen(true);
+  }, []);
+
+  const closeSearch = React.useCallback(() => {
+    setSearchOpen(false);
+    setSearchQuery("");
+    setSearchMatches([]);
+    setMatchIndex(-1);
+  }, []);
+
+  const goToMatch = React.useCallback(
+    (targetIndex: number) => {
+      const match = searchMatches[targetIndex];
+      if (!match) return;
+
+      setMatchIndex(targetIndex);
+      rowVirtualizer.scrollToIndex(match.rowIndex, { align: "center" });
+    },
+    [rowVirtualizer, searchMatches],
+  );
+
+  const goToNextMatch = React.useCallback(() => {
+    if (searchMatches.length === 0) return;
+    const nextIndex = (matchIndex + 1) % searchMatches.length;
+    goToMatch(nextIndex);
+  }, [goToMatch, matchIndex, searchMatches.length]);
+
+  const goToPrevMatch = React.useCallback(() => {
+    if (searchMatches.length === 0) return;
+    const prevIndex =
+      matchIndex - 1 < 0 ? searchMatches.length - 1 : matchIndex - 1;
+    goToMatch(prevIndex);
+  }, [goToMatch, matchIndex, searchMatches.length]);
+
+  const searchMatchSet = React.useMemo(() => {
+    const set = new Set<string>();
+    for (const match of searchMatches) {
+      set.add(searchMatchKey(match.rowIndex, match.columnId));
+    }
+    return set;
+  }, [searchMatches, searchMatchKey]);
+
+  const activeMatchKey = React.useMemo(() => {
+    if (matchIndex < 0 || !searchMatches[matchIndex]) return null;
+    const match = searchMatches[matchIndex];
+    return searchMatchKey(match.rowIndex, match.columnId);
+  }, [matchIndex, searchMatches, searchMatchKey]);
+
+  const isSearchMatch = React.useCallback(
+    (rowIndex: number, columnId: string) =>
+      searchMatchSet.has(searchMatchKey(rowIndex, columnId)),
+    [searchMatchKey, searchMatchSet],
+  );
+
+  const isActiveSearchMatch = React.useCallback(
+    (rowIndex: number, columnId: string) =>
+      activeMatchKey === searchMatchKey(rowIndex, columnId),
+    [activeMatchKey, searchMatchKey],
+  );
+
+  const updateSearchQuery = React.useCallback((value: string) => {
+    setSearchQuery(value);
+  }, []);
+
+  React.useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      const { key, ctrlKey, metaKey, shiftKey } = event;
+      const isCmdOrCtrl = ctrlKey || metaKey;
+      const isSearchShortcut =
+        isCmdOrCtrl && key.toLowerCase() === SEARCH_SHORTCUT_KEY;
+      const target = event.target as HTMLElement | null;
+      const container = tableContainerRef.current;
+      const isInsideTable = container?.contains(target) ?? false;
+      const isInsideSearch =
+        target?.closest("[data-table-search-overlay]") !== null;
+      const isInputLike =
+        target?.tagName === "INPUT" ||
+        target?.tagName === "TEXTAREA" ||
+        target?.isContentEditable;
+
+      if (isSearchShortcut) {
+        if (isInsideTable || isInsideSearch || !isInputLike) {
+          event.preventDefault();
+          openSearch();
+        }
+        return;
+      }
+
+      if (!searchOpen) return;
+
+      if (key === "Escape") {
+        event.preventDefault();
+        closeSearch();
+        return;
+      }
+
+      if (key === "Enter") {
+        const isWithinSearchContext = isInsideSearch || isInsideTable;
+        if (!isWithinSearchContext) return;
+        event.preventDefault();
+        if (shiftKey) {
+          goToPrevMatch();
+        } else {
+          goToNextMatch();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [
+    closeSearch,
+    goToNextMatch,
+    goToPrevMatch,
+    openSearch,
+    searchOpen,
+    tableContainerRef,
+  ]);
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    rowSelection,
+    setRowSelection,
+    columnPinning,
+    setColumnPinning,
+    tableContainerRef,
+    rowVirtualizer,
+    searchOpen,
+    searchQuery,
+    searchMatches,
+    matchIndex,
+    openSearch,
+    closeSearch,
+    goToNextMatch,
+    goToPrevMatch,
+    updateSearchQuery,
+    isSearchMatch,
+    isActiveSearchMatch,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  schema: z.ZodSchema;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  schema,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = schema.parse(row.original) as TData;
+  const itemRecord = item as Record<string, unknown>;
+  const handleCopy = async () => {
+    const value = itemRecord[idField] ?? itemRecord.id;
+    if (!value) {
+      toast.error("شناسه‌ای برای کپی موجود نیست");
+      return;
+    }
+    if (!navigator.clipboard?.writeText) {
+      toast.error("کلیپ‌بورد در این مرورگر در دسترس نیست");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(String(value));
+      toast.success("شناسه در کلیپ‌بورد کپی شد");
+    } catch (error) {
+      console.error("Error copying to clipboard", error);
+      toast.error("کپی در کلیپ‌بورد انجام نشد");
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem onClick={handleCopy}>
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+type SearchOverlayProps = {
+  searchOpen: boolean;
+  searchQuery: string;
+  matchIndex: number;
+  totalMatches: number;
+  onSearchQueryChange: (value: string) => void;
+  onClose: () => void;
+  onNextMatch: () => void;
+  onPrevMatch: () => void;
+  className?: string;
+};
+
+const SearchOverlay = ({
+  searchOpen,
+  searchQuery,
+  matchIndex,
+  totalMatches,
+  onSearchQueryChange,
+  onClose,
+  onNextMatch,
+  onPrevMatch,
+  className,
+}: SearchOverlayProps) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const hasMatches = totalMatches > 0;
+
+  React.useEffect(() => {
+    if (searchOpen) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [searchOpen]);
+
+  if (!searchOpen) return null;
+
+  return (
+    <div
+      data-table-search-overlay
+      className={cn(
+        "absolute z-30 flex items-center gap-3 rounded-md border border-border bg-background/95 px-3 py-2 text-foreground shadow-lg backdrop-blur",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <Input
+          ref={inputRef}
+          value={searchQuery}
+          onChange={(event) => onSearchQueryChange(event.target.value)}
+          placeholder="جستجو در جدول"
+          className="h-8 w-52"
+          role="searchbox"
+        />
+        <span className="text-xs whitespace-nowrap text-muted-foreground tabular-nums">
+          {hasMatches
+            ? `${(matchIndex + 1).toLocaleString("fa-IR")} / ${totalMatches.toLocaleString("fa-IR")}`
+            : "۰ / ۰"}
+        </span>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={onPrevMatch}
+          disabled={!hasMatches}
+        >
+          <ArrowUp className="h-4 w-4" />
+          <span className="sr-only">مورد قبلی</span>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={onNextMatch}
+          disabled={!hasMatches}
+        >
+          <ArrowDown className="h-4 w-4" />
+          <span className="sr-only">مورد بعدی</span>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={onClose}
+        >
+          <X className="h-4 w-4" />
+          <span className="sr-only">بستن جستجو</span>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  items: z.number(),
+  customer: z.string(),
+  customer_email: z.string(),
+  fulfillment_channel: z.string(),
+  notes: z.string(),
+});
+
+export type Order = z.infer<typeof schema>;
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const fulfillmentLabels: Record<string, string> = {
+  "3PL": "لجستیک شخص ثالث",
+  Dropship: "دراپ‌شیپ",
+  FBA: "FBA",
+  "Merchant Fulfilled": "ارسال توسط فروشنده",
+};
+
+const translateLabel = (map: Record<string, string>, value: string) =>
+  map[value] ?? value;
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[120px] font-mono">{row.original.id}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+    meta: {
+      width: 120,
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex gap-2">
+        <div className="max-w-[320px] truncate font-medium">
+          {row.original.purchased}
+        </div>
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 280,
+    },
+  },
+
+  {
+    accessorKey: "items",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تعداد" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs tabular-nums sm:text-sm">
+        {formatNumber(row.original.items)}
+      </span>
+    ),
+    meta: { align: "center", className: "tabular-nums", width: 100 },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[180px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      width: 200,
+    },
+  },
+  {
+    accessorKey: "customer_email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="ایمیل مشتری" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.customer_email}
+      </span>
+    ),
+    meta: {
+      width: 240,
+    },
+  },
+
+  {
+    accessorKey: "fulfillment_channel",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تحویل" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {translateLabel(fulfillmentLabels, row.original.fulfillment_channel)}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 160 },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+
+  {
+    accessorKey: "notes",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="یادداشت" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.notes}
+      </span>
+    ),
+    meta: { width: 260 },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <DataTableRowActions
+        row={row}
+        schema={schema}
+        itemName="سفارش"
+        idField="id"
+      />
+    ),
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+];
+
+export const DataTable30 = ({ className }: { className?: string }) => {
+  const [data, setData] = React.useState<Order[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+  const openSearchRef = React.useRef<(() => void) | null>(null);
+  const columnsWithSearch: ColumnDef<Order, unknown>[] = React.useMemo(
+    () =>
+      columns.map(
+        (column): ColumnDef<Order, unknown> =>
+          column.id === "actions"
+            ? {
+              ...column,
+              id: column.id ?? "actions",
+              header: () => (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="mx-auto size-8"
+                  onClick={() => openSearchRef.current?.()}
+                  aria-label="باز کردن جستجوی جدول"
+                >
+                  <Search className="h-4 w-4" />
+                </Button>
+              ),
+            }
+            : column,
+      ),
+    [],
+  );
+
+  React.useEffect(() => {
+    let active = true;
+
+    const fetchData = async () => {
+      setError(null);
+      setIsLoading(true);
+      try {
+        const res = await fetch(DATA_URL);
+        if (!res.ok) {
+          const message = `بارگذاری داده سفارش‌ها ناموفق بود (${res.status})`;
+          console.error(message, res.statusText);
+          if (active) setError(message);
+          return;
+        }
+        const json = await res.json();
+        const parsed = schema.array().parse(json);
+        if (active) {
+          setData(parsed);
+        }
+      } catch (error) {
+        console.error("Error fetching orders data", error);
+        if (active) setError("خطا در بارگذاری داده سفارش‌ها");
+      } finally {
+        if (active) setIsLoading(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const {
+    table,
+    tableContainerRef,
+    rowVirtualizer,
+    searchOpen,
+    searchQuery,
+    searchMatches,
+    matchIndex,
+    updateSearchQuery,
+    closeSearch,
+    goToNextMatch,
+    goToPrevMatch,
+    isSearchMatch,
+    isActiveSearchMatch,
+    openSearch,
+  } = useDataTable({
+    data,
+    columns: columnsWithSearch,
+    getRowId: (row) => row.id.toString(),
+    initialColumnPinning: { left: ["select"], right: ["actions"] },
+  });
+  React.useEffect(() => {
+    openSearchRef.current = openSearch;
+  }, [openSearch]);
+  const visibleColumns = table.getVisibleLeafColumns();
+  const visibleColumnCount = Math.max(visibleColumns.length, 1);
+  const visibleColumnIds = visibleColumns.map((column) => column.id);
+  const rightPinnedColumnIdSet = new Set(
+    table.getState().columnPinning.right ?? [],
+  );
+  const firstRightPinnedIndex = visibleColumnIds.findIndex((columnId) =>
+    rightPinnedColumnIdSet.has(columnId),
+  );
+  const rightStickyDividerTargetId =
+    firstRightPinnedIndex > 0
+      ? visibleColumnIds[firstRightPinnedIndex - 1]
+      : null;
+  const rowModel = table.getRowModel().rows;
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)
+      : 0;
+  const hasRows = rowModel.length > 0;
+  const totalMatches = searchMatches.length;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول مجازی با جستجو
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              با Cmd/Ctrl+K یا آیکن جستجو، در جدول جستجو کنید و نتایج برجسته
+              می‌شوند. با اینتر یا Shift+اینتر بین نتایج جابه‌جا شوید.
+            </p>
+          </div>
+          <div className="relative overflow-visible rounded-lg border-2">
+            <SearchOverlay
+              searchOpen={searchOpen}
+              searchQuery={searchQuery}
+              matchIndex={matchIndex}
+              totalMatches={totalMatches}
+              onSearchQueryChange={updateSearchQuery}
+              onClose={closeSearch}
+              onNextMatch={goToNextMatch}
+              onPrevMatch={goToPrevMatch}
+              className="-top-3 end-3 -translate-y-full"
+            />
+            <div
+              ref={tableContainerRef}
+              className="relative max-h-[600px] overflow-auto"
+              tabIndex={0}
+            >
+              <table className="w-full table-fixed caption-bottom border-separate border-spacing-0 text-sm [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:hover_td[data-pinned]]:bg-muted/50 [&_tr:not(:last-child)_td]:border-b [&_tr[data-state=selected]_td[data-pinned]]:bg-muted [&_tr[data-state=selected]:hover_td[data-pinned]]:bg-muted">
+                <TableHeader className="sticky top-0 z-20 bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const meta =
+                          (header.column.columnDef.meta as ColumnStyleMeta) ??
+                          {};
+                        const columnWithPinning =
+                          header.column as unknown as ColumnWithPinning;
+                        const { baseStyle, pinnedStyle, pinned, lastPinned } =
+                          getColumnLayoutStyles(meta, columnWithPinning);
+
+                        const alignClass =
+                          meta.align === "center"
+                            ? "text-center"
+                            : meta.align === "right"
+                              ? "text-end"
+                              : meta.align === "left"
+                                ? "text-start"
+                                : undefined;
+
+                        return (
+                          <TableHead
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            style={{ ...baseStyle, ...pinnedStyle }}
+                            className={cn(
+                              "relative h-11 truncate border-r px-3 text-sm font-medium last:border-r-0 data-[pinned]:bg-muted/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                              header.column.id === rightStickyDividerTargetId &&
+                              "!border-r-0",
+                              meta.className,
+                              meta.headerClassName,
+                              alignClass,
+                            )}
+                            data-pinned={pinned || undefined}
+                            data-last-col={lastPinned || undefined}
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        <div className="inline-flex items-center gap-2">
+                          <LoaderIcon className="h-4 w-4 animate-spin" />
+                          <span>در حال بارگذاری سفارش‌ها…</span>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ) : error ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-destructive"
+                      >
+                        {error}
+                      </TableCell>
+                    </TableRow>
+                  ) : hasRows ? (
+                    <>
+                      {paddingTop > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingTop }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-top-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                      {virtualRows.map((virtualRow) => {
+                        const row = rowModel[virtualRow.index];
+                        if (!row) return null;
+
+                        return (
+                          <TableRow
+                            key={row.id}
+                            data-state={row.getIsSelected() && "selected"}
+                            className="border-b last:border-b-0"
+                            style={{ height: virtualRow.size }}
+                          >
+                            {row.getVisibleCells().map((cell) => {
+                              const meta =
+                                (cell.column.columnDef
+                                  .meta as ColumnStyleMeta) ?? {};
+                              const columnWithPinning =
+                                cell.column as unknown as ColumnWithPinning;
+
+                              const {
+                                baseStyle,
+                                pinnedStyle,
+                                pinned,
+                                lastPinned,
+                              } = getColumnLayoutStyles(
+                                meta,
+                                columnWithPinning,
+                              );
+
+                              const isMatch = isSearchMatch(
+                                virtualRow.index,
+                                cell.column.id,
+                              );
+                              const isActiveMatch = isActiveSearchMatch(
+                                virtualRow.index,
+                                cell.column.id,
+                              );
+                              const highlightClass = isActiveMatch
+                                ? "bg-amber-200/90 text-foreground dark:bg-amber-300/30"
+                                : isMatch
+                                  ? "bg-amber-100/80 text-foreground dark:bg-amber-200/20"
+                                  : undefined;
+
+                              const alignClass =
+                                meta.align === "center"
+                                  ? "text-center"
+                                  : meta.align === "right"
+                                    ? "text-end"
+                                    : meta.align === "left"
+                                      ? "text-start"
+                                      : undefined;
+
+                              return (
+                                <TableCell
+                                  key={cell.id}
+                                  style={{ ...baseStyle, ...pinnedStyle }}
+                                  className={cn(
+                                    "truncate border-r p-3 py-2 text-sm last:border-r-0 data-[pinned]:bg-background/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                                    cell.column.id ===
+                                    rightStickyDividerTargetId &&
+                                    "!border-r-0",
+                                    meta.className,
+                                    meta.cellClassName,
+                                    alignClass,
+                                  )}
+                                  data-pinned={pinned || undefined}
+                                  data-last-col={lastPinned || undefined}
+                                  data-search-match={isMatch || undefined}
+                                  data-search-active={
+                                    isActiveMatch || undefined
+                                  }
+                                >
+                                  <div
+                                    className={cn(
+                                      "inline-flex max-w-full min-w-0 items-center gap-1 rounded px-1 py-0.5 transition-colors",
+                                      highlightClass,
+                                    )}
+                                  >
+                                    {flexRender(
+                                      cell.column.columnDef.cell,
+                                      cell.getContext(),
+                                    )}
+                                  </div>
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                      {paddingBottom > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingBottom }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-bottom-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                    </>
+                  ) : (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        نتیجه‌ای یافت نشد.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table31.tsx b/blocks/data-table31.tsx
new file mode 100644
index 0000000..19b61cc
--- /dev/null
+++ b/blocks/data-table31.tsx
@@ -0,0 +1,1020 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  ColumnPinningState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronsUpDown,
+  LoaderIcon,
+  MoreHorizontal,
+  Plus,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_ROW_HEIGHT = 56;
+const DEFAULT_OVERSCAN = 8;
+const FOOTER_HEIGHT = DEFAULT_ROW_HEIGHT;
+const DATA_URL =
+  "https://raw.githubusercontent.com/zerostaticthemes/ShadcnBlocks-library-data/refs/heads/main/data/orders-ecommerce-1000.json";
+
+type ColumnStyleMeta = {
+  align?: "left" | "center" | "right";
+  headerClassName?: string;
+  cellClassName?: string;
+  className?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+};
+
+type ColumnWithPinning = {
+  getIsPinned?: () => "left" | "right" | false;
+  getIsLastColumn?: (position: "left" | "right") => boolean;
+  getIsFirstColumn?: (position: "left" | "right") => boolean;
+  getStart?: (position: "left" | "right") => number;
+  getAfter?: (position: "left" | "right") => number;
+  getSize?: () => number;
+};
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  initialColumnPinning?: ColumnPinningState;
+
+  enableRowSelection?: boolean;
+  rowHeight?: number;
+  overscan?: number;
+};
+
+function getColumnLayoutStyles(
+  meta: ColumnStyleMeta,
+  columnWithPinning: ColumnWithPinning,
+) {
+  const baseStyle: CSSProperties = {};
+  if (meta.width !== undefined) {
+    baseStyle.width =
+      typeof meta.width === "number" ? `${meta.width}px` : meta.width;
+  }
+  if (meta.minWidth !== undefined) {
+    baseStyle.minWidth =
+      typeof meta.minWidth === "number" ? `${meta.minWidth}px` : meta.minWidth;
+  }
+  if (meta.maxWidth !== undefined) {
+    baseStyle.maxWidth =
+      typeof meta.maxWidth === "number" ? `${meta.maxWidth}px` : meta.maxWidth;
+  }
+  if (
+    baseStyle.width === undefined &&
+    typeof columnWithPinning.getSize === "function"
+  ) {
+    const computedWidth = columnWithPinning.getSize();
+    if (typeof computedWidth === "number" && Number.isFinite(computedWidth)) {
+      baseStyle.width = `${computedWidth}px`;
+    }
+  }
+
+  const pinned = columnWithPinning.getIsPinned?.();
+  const pinnedStyle: CSSProperties = {};
+  let lastPinned: "left" | "right" | undefined;
+
+  if (pinned) {
+    pinnedStyle.position = "sticky";
+    pinnedStyle.zIndex = 1;
+
+    if (pinned === "left") {
+      const start = columnWithPinning.getStart?.("left") ?? 0;
+      pinnedStyle.left = `${start}px`;
+      if (columnWithPinning.getIsLastColumn?.("left")) {
+        lastPinned = "left";
+      }
+    }
+
+    if (pinned === "right") {
+      const after = columnWithPinning.getAfter?.("right") ?? 0;
+      pinnedStyle.right = `${after}px`;
+      if (columnWithPinning.getIsFirstColumn?.("right")) {
+        lastPinned = "right";
+      }
+    }
+
+    const resolvedWidth =
+      baseStyle.width ??
+      (typeof columnWithPinning.getSize === "function"
+        ? columnWithPinning.getSize()
+        : undefined);
+    if (resolvedWidth !== undefined) {
+      pinnedStyle.width =
+        typeof resolvedWidth === "number"
+          ? `${resolvedWidth}px`
+          : resolvedWidth;
+    }
+  }
+
+  return { baseStyle, pinnedStyle, pinned, lastPinned };
+}
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialSelection = {},
+    enableRowSelection = true,
+    initialColumnPinning = {},
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    overscan = DEFAULT_OVERSCAN,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+  const [columnPinning, setColumnPinning] =
+    React.useState<ColumnPinningState>(initialColumnPinning);
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      columnPinning,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    onColumnPinningChange: setColumnPinning,
+    enableRowSelection,
+  });
+
+  const rowVirtualizer = useVirtualizer({
+    count: table.getRowModel().rows.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+    measureElement:
+      typeof window !== "undefined" &&
+        navigator.userAgent.indexOf("Firefox") === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    rowSelection,
+    setRowSelection,
+    columnPinning,
+    setColumnPinning,
+    tableContainerRef,
+    rowVirtualizer,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  schema: z.ZodSchema;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  schema,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = schema.parse(row.original) as TData;
+  const itemRecord = item as Record<string, unknown>;
+  const handleCopy = async () => {
+    const value = itemRecord[idField] ?? itemRecord.id;
+    if (!value) {
+      toast.error("شناسه‌ای برای کپی موجود نیست");
+      return;
+    }
+    if (!navigator.clipboard?.writeText) {
+      toast.error("کلیپ‌بورد در این مرورگر در دسترس نیست");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(String(value));
+      toast.success("شناسه در کلیپ‌بورد کپی شد");
+    } catch (error) {
+      console.error("Error copying to clipboard", error);
+      toast.error("کپی در کلیپ‌بورد انجام نشد");
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem onClick={handleCopy}>
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  items: z.number(),
+  customer: z.string(),
+  customer_email: z.string(),
+  fulfillment_channel: z.string(),
+  notes: z.string(),
+});
+
+export type Order = z.infer<typeof schema>;
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const fulfillmentLabels: Record<string, string> = {
+  "3PL": "لجستیک شخص ثالث",
+  Dropship: "دراپ‌شیپ",
+  FBA: "FBA",
+  "Merchant Fulfilled": "ارسال توسط فروشنده",
+};
+
+const translateLabel = (map: Record<string, string>, value: string) =>
+  map[value] ?? value;
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[120px] font-mono">{row.original.id}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+    meta: {
+      width: 120,
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex gap-2">
+        <div className="max-w-[320px] truncate font-medium">
+          {row.original.purchased}
+        </div>
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 280,
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[180px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      width: 200,
+    },
+  },
+  {
+    accessorKey: "customer_email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="ایمیل مشتری" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.customer_email}
+      </span>
+    ),
+    meta: {
+      width: 240,
+    },
+  },
+  {
+    accessorKey: "fulfillment_channel",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تحویل" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {translateLabel(fulfillmentLabels, row.original.fulfillment_channel)}
+      </span>
+    ),
+    meta: { className: "whitespace-nowrap", width: 160 },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "items",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تعداد" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs tabular-nums sm:text-sm">
+        {formatNumber(row.original.items)}
+      </span>
+    ),
+    meta: { align: "center", className: "tabular-nums", width: 100 },
+  },
+  {
+    accessorKey: "notes",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="یادداشت" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.notes}
+      </span>
+    ),
+    meta: { width: 260 },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <DataTableRowActions
+        row={row}
+        schema={schema}
+        itemName="سفارش"
+        idField="id"
+      />
+    ),
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+];
+
+export const DataTable31 = ({ className }: { className?: string }) => {
+  const [data, setData] = React.useState<Order[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let active = true;
+
+    const fetchData = async () => {
+      setError(null);
+      setIsLoading(true);
+      try {
+        const res = await fetch(DATA_URL);
+        if (!res.ok) {
+          const message = `بارگذاری داده سفارش‌ها ناموفق بود (${res.status})`;
+          console.error(message, res.statusText);
+          if (active) setError(message);
+          return;
+        }
+        const json = await res.json();
+        const parsed = schema.array().parse(json);
+        if (active) {
+          setData(parsed);
+        }
+      } catch (error) {
+        console.error("Error fetching orders data", error);
+        if (active) setError("خطا در بارگذاری داده سفارش‌ها");
+      } finally {
+        if (active) setIsLoading(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const { table, tableContainerRef, rowVirtualizer } = useDataTable({
+    data,
+    columns,
+    getRowId: (row) => row.id.toString(),
+    initialColumnPinning: { left: ["select"], right: ["actions"] },
+  });
+  const editableColumnOrder = React.useMemo(() => {
+    const collected: string[] = [];
+    for (const col of columns) {
+      if ("id" in col && col.id) {
+        collected.push(String(col.id));
+        continue;
+      }
+      const withAccessor = col as { accessorKey?: unknown };
+      if (typeof withAccessor.accessorKey === "string") {
+        collected.push(withAccessor.accessorKey);
+      }
+    }
+    return collected.filter((id) => id && id !== "select" && id !== "actions");
+  }, []);
+  const firstEditableColumnId = editableColumnOrder[0];
+  const pendingAddRef = React.useRef(false);
+  const pendingAddedRowIdRef = React.useRef<string | null>(null);
+  const rowRefs = React.useRef(new Map<string, HTMLTableRowElement>());
+  const editingCellRef = React.useRef<HTMLDivElement | null>(null);
+  const [editingRowId, setEditingRowId] = React.useState<string | null>(null);
+
+  const addRow = React.useCallback(() => {
+    editingCellRef.current = null;
+    const newRowId = `#${String(Math.floor(Math.random() * 900000) + 100000)}`;
+    const newRow: Order = {
+      id: newRowId,
+      purchased: "",
+      items: 0,
+      customer: "",
+      customer_email: "",
+      fulfillment_channel: "",
+      notes: "",
+    };
+    pendingAddRef.current = true;
+    pendingAddedRowIdRef.current = newRowId;
+    setEditingRowId(newRowId);
+    setData((prev) => [...prev, newRow]);
+  }, [setEditingRowId]);
+
+  const deleteSelectedRows = React.useCallback(() => {
+    const selectedRows = table.getSelectedRowModel().rows;
+    if (selectedRows.length === 0) return;
+
+    const selectedIds = new Set(selectedRows.map((row) => row.original.id));
+    setData((prev) => prev.filter((row) => !selectedIds.has(row.id)));
+    table.resetRowSelection();
+  }, [table]);
+
+  const onContainerKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Delete" || event.key === "Backspace") {
+        if (table.getSelectedRowModel().rows.length > 0) {
+          event.preventDefault();
+          deleteSelectedRows();
+        }
+      }
+    },
+    [deleteSelectedRows, table],
+  );
+
+  React.useEffect(() => {
+    editingCellRef.current = null;
+  }, [editingRowId]);
+
+  React.useEffect(() => {
+    if (!pendingAddRef.current || !pendingAddedRowIdRef.current) return;
+    const addedRowId = pendingAddedRowIdRef.current;
+
+    pendingAddRef.current = false;
+    pendingAddedRowIdRef.current = null;
+
+    const rows = table.getRowModel().rows;
+    const targetIndex = rows.findIndex((row) => row.original.id === addedRowId);
+    if (targetIndex === -1) return;
+
+    rowVirtualizer.scrollToIndex(targetIndex, { align: "center" });
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const editableCell = editingCellRef.current;
+        if (editableCell) {
+          editableCell.focus();
+          return;
+        }
+
+        const rowEl = rowRefs.current.get(addedRowId);
+        if (rowEl) {
+          rowEl.focus({ preventScroll: true });
+          return;
+        }
+
+        const container = tableContainerRef.current;
+        if (container) {
+          container.focus({ preventScroll: true });
+        }
+      });
+    });
+  }, [data.length, rowVirtualizer, table, tableContainerRef]);
+
+  const coerceEditableValue = React.useCallback(
+    (columnId: string, rawValue: string, prevRow: Order) => {
+      const trimmed = rawValue.trim();
+
+      switch (columnId) {
+        case "id": {
+          if (!trimmed) return prevRow.id;
+          const normalized = trimmed.startsWith("#")
+            ? trimmed
+            : `#${trimmed.replace(/^#*/, "")}`;
+          return normalized;
+        }
+        case "items": {
+          const parsed = Number.parseInt(trimmed, 10);
+          return Number.isFinite(parsed) ? parsed : prevRow.items;
+        }
+
+        default:
+          return trimmed;
+      }
+    },
+    [],
+  );
+
+  const visibleColumns = table.getVisibleLeafColumns();
+  const visibleColumnCount = Math.max(visibleColumns.length, 1);
+  const visibleColumnIds = visibleColumns.map((column) => column.id);
+  const rightPinnedColumnIdSet = new Set(
+    table.getState().columnPinning.right ?? [],
+  );
+  const firstRightPinnedIndex = visibleColumnIds.findIndex((columnId) =>
+    rightPinnedColumnIdSet.has(columnId),
+  );
+  const rightStickyDividerTargetId =
+    firstRightPinnedIndex > 0
+      ? visibleColumnIds[firstRightPinnedIndex - 1]
+      : null;
+  const rowModel = table.getRowModel().rows;
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)
+      : 0;
+  const hasRows = rowModel.length > 0;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول مجازی با افزودن ردیف
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              از نوار پایین چسبان ردیف جدید اضافه کنید، بلافاصله هر سلول را
+              درون‌خطی ویرایش کنید، و ردیف‌های انتخاب‌شده را با Delete یا
+              Backspace حذف کنید؛ پیمایش مجازی روان می‌ماند.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-lg border-2">
+            <div
+              ref={tableContainerRef}
+              className="relative max-h-[600px] overflow-auto"
+              tabIndex={0}
+              onKeyDown={onContainerKeyDown}
+              style={{
+                scrollPaddingBottom: FOOTER_HEIGHT,
+              }}
+            >
+              {isLoading ? (
+                <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+                  <div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                    <span>در حال بارگذاری سفارش‌ها…</span>
+                  </div>
+                </div>
+              ) : null}
+              <table className="w-full table-fixed caption-bottom border-separate border-spacing-0 text-sm [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:hover_td[data-pinned]]:bg-muted/50 [&_tr:not(:last-child)_td]:border-b [&_tr[data-state=selected]_td[data-pinned]]:bg-muted [&_tr[data-state=selected]:hover_td[data-pinned]]:bg-muted">
+                <TableHeader className="sticky top-0 z-20 bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const meta =
+                          (header.column.columnDef.meta as ColumnStyleMeta) ??
+                          {};
+                        const columnWithPinning =
+                          header.column as unknown as ColumnWithPinning;
+                        const { baseStyle, pinnedStyle, pinned, lastPinned } =
+                          getColumnLayoutStyles(meta, columnWithPinning);
+
+                        const alignClass =
+                          meta.align === "center"
+                            ? "text-center"
+                            : meta.align === "right"
+                              ? "text-end"
+                              : meta.align === "left"
+                                ? "text-start"
+                                : undefined;
+
+                        return (
+                          <TableHead
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            style={{ ...baseStyle, ...pinnedStyle }}
+                            className={cn(
+                              "relative h-11 truncate border-r px-3 text-sm font-medium last:border-r-0 data-[pinned]:bg-muted/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                              header.column.id === rightStickyDividerTargetId &&
+                              "!border-r-0",
+                              meta.className,
+                              meta.headerClassName,
+                              alignClass,
+                            )}
+                            data-pinned={pinned || undefined}
+                            data-last-col={lastPinned || undefined}
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        <div className="inline-flex items-center gap-2">
+                          <LoaderIcon className="h-4 w-4 animate-spin" />
+                          <span>در حال بارگذاری سفارش‌ها…</span>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ) : error ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-destructive"
+                      >
+                        {error}
+                      </TableCell>
+                    </TableRow>
+                  ) : hasRows ? (
+                    <>
+                      {paddingTop > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingTop }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-top-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                      {virtualRows.map((virtualRow) => {
+                        const row = rowModel[virtualRow.index];
+                        if (!row) return null;
+
+                        const isEditingRow = editingRowId === row.original.id;
+
+                        return (
+                          <TableRow
+                            key={row.id}
+                            ref={(node) => {
+                              if (node) {
+                                rowRefs.current.set(row.id, node);
+                              } else {
+                                rowRefs.current.delete(row.id);
+                              }
+                            }}
+                            data-state={row.getIsSelected() && "selected"}
+                            className="border-b last:border-b-0"
+                            tabIndex={-1}
+                            style={{ height: virtualRow.size }}
+                          >
+                            {row.getVisibleCells().map((cell) => {
+                              const isEditableCell =
+                                isEditingRow &&
+                                cell.column.id !== "select" &&
+                                cell.column.id !== "actions";
+                              const isPrimaryEditableCell =
+                                isEditableCell &&
+                                firstEditableColumnId &&
+                                cell.column.id === firstEditableColumnId &&
+                                !editingCellRef.current;
+                              const editableRef = isPrimaryEditableCell
+                                ? (node: HTMLDivElement | null) => {
+                                  if (node) {
+                                    editingCellRef.current = node;
+                                  }
+                                }
+                                : undefined;
+                              const handleEditableBlur = (
+                                event: React.FocusEvent<HTMLDivElement>,
+                              ) => {
+                                const nextValue =
+                                  event.currentTarget.textContent ?? "";
+                                const coercedValue = coerceEditableValue(
+                                  cell.column.id,
+                                  nextValue,
+                                  row.original,
+                                );
+                                setData((prev) =>
+                                  prev.map((rowData) =>
+                                    rowData.id === row.original.id
+                                      ? {
+                                        ...rowData,
+                                        [cell.column.id]: coercedValue,
+                                      }
+                                      : rowData,
+                                  ),
+                                );
+                                if (
+                                  cell.column.id === "id" &&
+                                  typeof coercedValue === "string"
+                                ) {
+                                  setEditingRowId(coercedValue);
+                                }
+                              };
+                              const handleEditableKeyDown = (
+                                event: React.KeyboardEvent<HTMLDivElement>,
+                              ) => {
+                                if (event.key === "Enter") {
+                                  event.preventDefault();
+                                  event.currentTarget.blur();
+                                } else if (event.key === "Escape") {
+                                  event.preventDefault();
+                                  event.currentTarget.textContent =
+                                    displayValue;
+                                  setEditingRowId(null);
+                                  event.currentTarget.blur();
+                                }
+                              };
+                              const meta =
+                                (cell.column.columnDef
+                                  .meta as ColumnStyleMeta) ?? {};
+                              const columnWithPinning =
+                                cell.column as unknown as ColumnWithPinning;
+
+                              const {
+                                baseStyle,
+                                pinnedStyle,
+                                pinned,
+                                lastPinned,
+                              } = getColumnLayoutStyles(
+                                meta,
+                                columnWithPinning,
+                              );
+
+                              const alignClass =
+                                meta.align === "center"
+                                  ? "text-center"
+                                  : meta.align === "right"
+                                    ? "text-end"
+                                    : meta.align === "left"
+                                      ? "text-start"
+                                      : undefined;
+                              const rawValue =
+                                row.original[cell.column.id as keyof Order];
+                              const displayValue =
+                                rawValue === null || rawValue === undefined
+                                  ? ""
+                                  : String(rawValue);
+
+                              return (
+                                <TableCell
+                                  key={cell.id}
+                                  style={{ ...baseStyle, ...pinnedStyle }}
+                                  className={cn(
+                                    "truncate border-r p-3 py-2 text-sm last:border-r-0 data-[pinned]:bg-background/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                                    cell.column.id ===
+                                    rightStickyDividerTargetId &&
+                                    "!border-r-0",
+                                    meta.className,
+                                    meta.cellClassName,
+                                    alignClass,
+                                  )}
+                                  data-pinned={pinned || undefined}
+                                  data-last-col={lastPinned || undefined}
+                                >
+                                  {isEditableCell ? (
+                                    <div
+                                      ref={editableRef}
+                                      role="textbox"
+                                      data-editable-cell={cell.column.id}
+                                      contentEditable
+                                      suppressContentEditableWarning
+                                      className="min-h-[1.5rem] outline-none"
+                                      onBlur={handleEditableBlur}
+                                      onKeyDown={handleEditableKeyDown}
+                                    >
+                                      {displayValue}
+                                    </div>
+                                  ) : (
+                                    flexRender(
+                                      cell.column.columnDef.cell,
+                                      cell.getContext(),
+                                    )
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                      {paddingBottom > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingBottom }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-bottom-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                    </>
+                  ) : (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        نتیجه‌ای یافت نشد.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+                <tfoot className="sticky bottom-0 z-20 border-t bg-background">
+                  <tr>
+                    <td
+                      colSpan={visibleColumnCount}
+                      className="p-0"
+                      style={{
+                        width: table.getTotalSize(),
+                        minWidth: table.getTotalSize(),
+                      }}
+                    >
+                      <button
+                        type="button"
+                        className="relative flex h-14 w-full items-center gap-2 bg-muted/30 px-4 text-start text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+                        onClick={addRow}
+                      >
+                        <div className="sticky start-0 flex items-center gap-2">
+                          <Plus className="h-4 w-4" />
+                          <span>افزودن ردیف</span>
+                        </div>
+                      </button>
+                    </td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table32.tsx b/blocks/data-table32.tsx
new file mode 100644
index 0000000..316a006
--- /dev/null
+++ b/blocks/data-table32.tsx
@@ -0,0 +1,1060 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  ColumnPinningState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  type ColumnSort,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortDirection,
+  type SortingState,
+  type Table,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ArrowDown,
+  ArrowDownUp,
+  ArrowUp,
+  ChevronsUpDown,
+  LoaderIcon,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_ROW_HEIGHT = 56;
+const DEFAULT_OVERSCAN = 8;
+const DATA_URL =
+  "https://raw.githubusercontent.com/zerostaticthemes/ShadcnBlocks-library-data/refs/heads/main/data/orders-ecommerce-1000.json";
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+  initialVisibility?: VisibilityState;
+  initialSelection?: RowSelectionState;
+  initialColumnPinning?: ColumnPinningState;
+  enableRowSelection?: boolean;
+  rowHeight?: number;
+  overscan?: number;
+};
+
+type ColumnStyleMeta = {
+  align?: "left" | "center" | "right";
+  headerClassName?: string;
+  cellClassName?: string;
+  className?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+};
+
+type ColumnWithPinning = {
+  getIsPinned?: () => "left" | "right" | false;
+  getIsLastColumn?: (position: "left" | "right") => boolean;
+  getIsFirstColumn?: (position: "left" | "right") => boolean;
+  getStart?: (position: "left" | "right") => number;
+  getAfter?: (position: "left" | "right") => number;
+  getSize?: () => number;
+};
+
+function getColumnLayoutStyles(
+  meta: ColumnStyleMeta,
+  columnWithPinning: ColumnWithPinning,
+) {
+  const baseStyle: CSSProperties = {};
+  if (meta.width !== undefined) {
+    baseStyle.width =
+      typeof meta.width === "number" ? `${meta.width}px` : meta.width;
+  }
+  if (meta.minWidth !== undefined) {
+    baseStyle.minWidth =
+      typeof meta.minWidth === "number" ? `${meta.minWidth}px` : meta.minWidth;
+  }
+  if (meta.maxWidth !== undefined) {
+    baseStyle.maxWidth =
+      typeof meta.maxWidth === "number" ? `${meta.maxWidth}px` : meta.maxWidth;
+  }
+  if (
+    baseStyle.width === undefined &&
+    typeof columnWithPinning.getSize === "function"
+  ) {
+    const computedWidth = columnWithPinning.getSize();
+    if (typeof computedWidth === "number" && Number.isFinite(computedWidth)) {
+      baseStyle.width = `${computedWidth}px`;
+    }
+  }
+
+  const pinned = columnWithPinning.getIsPinned?.();
+  const pinnedStyle: CSSProperties = {};
+  let lastPinned: "left" | "right" | undefined;
+
+  if (pinned) {
+    pinnedStyle.position = "sticky";
+    pinnedStyle.zIndex = 1;
+
+    if (pinned === "left") {
+      const start = columnWithPinning.getStart?.("left") ?? 0;
+      pinnedStyle.left = `${start}px`;
+      if (columnWithPinning.getIsLastColumn?.("left")) {
+        lastPinned = "left";
+      }
+    }
+
+    if (pinned === "right") {
+      const after = columnWithPinning.getAfter?.("right") ?? 0;
+      pinnedStyle.right = `${after}px`;
+      if (columnWithPinning.getIsFirstColumn?.("right")) {
+        lastPinned = "right";
+      }
+    }
+
+    const resolvedWidth =
+      baseStyle.width ??
+      (typeof columnWithPinning.getSize === "function"
+        ? columnWithPinning.getSize()
+        : undefined);
+    if (resolvedWidth !== undefined) {
+      pinnedStyle.width =
+        typeof resolvedWidth === "number"
+          ? `${resolvedWidth}px`
+          : resolvedWidth;
+    }
+  }
+
+  return { baseStyle, pinnedStyle, pinned, lastPinned };
+}
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialSelection = {},
+    enableRowSelection = true,
+    initialColumnPinning = {},
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    overscan = DEFAULT_OVERSCAN,
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const [rowSelection, setRowSelection] =
+    React.useState<RowSelectionState>(initialSelection);
+  const [columnPinning, setColumnPinning] =
+    React.useState<ColumnPinningState>(initialColumnPinning);
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    initialState: {
+      sorting: initialSorting,
+    },
+    state: {
+      sorting,
+      columnPinning,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    onColumnPinningChange: setColumnPinning,
+    enableRowSelection,
+  });
+
+  const rowVirtualizer = useVirtualizer({
+    count: table.getRowModel().rows.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+    measureElement:
+      typeof window !== "undefined" &&
+        navigator.userAgent.indexOf("Firefox") === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+    rowSelection,
+    setRowSelection,
+    columnPinning,
+    setColumnPinning,
+    tableContainerRef,
+    rowVirtualizer,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={(event) =>
+        column.toggleSorting(
+          undefined,
+          event.metaKey || event.ctrlKey || event.shiftKey,
+        )
+      }
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTableSortMenuProps<TData> = {
+  table: Table<TData>;
+};
+
+const SORT_DIRECTIONS: Array<{ label: string; value: SortDirection }> = [
+  { label: "صعودی", value: "asc" },
+  { label: "نزولی", value: "desc" },
+];
+
+export function DataTableSortMenu<TData>({
+  table,
+}: DataTableSortMenuProps<TData>) {
+  const [open, setOpen] = React.useState(false);
+  const sorting = table.getState().sorting;
+  const onSortingChange = table.setSorting;
+
+  const sortableColumns = React.useMemo(
+    () => table.getAllColumns().filter((column) => column.getCanSort()),
+    [table],
+  );
+
+  const sortedColumnIds = React.useMemo(
+    () => new Set(sorting.map((sort) => sort.id)),
+    [sorting],
+  );
+
+  const availableColumns = React.useMemo(
+    () => sortableColumns.filter((column) => !sortedColumnIds.has(column.id)),
+    [sortableColumns, sortedColumnIds],
+  );
+
+  const getColumnLabel = React.useCallback(
+    (id: string) => {
+      const column = sortableColumns.find((col) => col.id === id);
+      if (!column) return id;
+
+      const metaLabel = (column.columnDef.meta as { label?: string })?.label;
+      if (metaLabel) return metaLabel;
+
+      const header = column.columnDef.header;
+      if (typeof header === "string") return header;
+
+      return column.id;
+    },
+    [sortableColumns],
+  );
+
+  const onSortAdd = React.useCallback(() => {
+    const firstAvailable = availableColumns[0];
+    if (!firstAvailable) return;
+
+    onSortingChange((prev) => [
+      ...prev,
+      { id: firstAvailable.id, desc: false },
+    ]);
+  }, [availableColumns, onSortingChange]);
+
+  const onSortUpdate = React.useCallback(
+    (sortId: string, updates: Partial<ColumnSort>) => {
+      onSortingChange((prevSorting) =>
+        prevSorting.map((sort) =>
+          sort.id === sortId ? { ...sort, ...updates } : sort,
+        ),
+      );
+    },
+    [onSortingChange],
+  );
+
+  const onSortRemove = React.useCallback(
+    (sortId: string) => {
+      onSortingChange((prevSorting) =>
+        prevSorting.filter((sort) => sort.id !== sortId),
+      );
+    },
+    [onSortingChange],
+  );
+
+  const onSortMove = React.useCallback(
+    (sortId: string, delta: number) => {
+      onSortingChange((prevSorting) => {
+        const index = prevSorting.findIndex((sort) => sort.id === sortId);
+        const targetIndex = index + delta;
+
+        if (
+          index === -1 ||
+          targetIndex < 0 ||
+          targetIndex >= prevSorting.length
+        )
+          return prevSorting;
+
+        const next = [...prevSorting];
+        const [item] = next.splice(index, 1);
+        next.splice(targetIndex, 0, item);
+        return next;
+      });
+    },
+    [onSortingChange],
+  );
+
+  const onSortingReset = React.useCallback(() => {
+    onSortingChange(table.initialState?.sorting ?? []);
+  }, [onSortingChange, table.initialState?.sorting]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="font-normal">
+          <ArrowDownUp className="ms-2 h-4 w-4 text-muted-foreground" />
+          مرتب‌سازی
+          {sorting.length > 0 ? (
+            <Badge
+              variant="secondary"
+              className="me-2 rounded px-1.5 font-mono text-[10px]"
+            >
+              {sorting.length.toLocaleString("fa-IR")}
+            </Badge>
+          ) : null}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[440px] max-w-[calc(100vw-2rem)] space-y-3">
+        <div className="space-y-2">
+          {sorting.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              مرتب‌سازی اعمال نشده است.
+            </p>
+          ) : (
+            sorting.map((sort, index) => {
+              const usedByOthers = new Set(
+                sorting.filter((s) => s.id !== sort.id).map((item) => item.id),
+              );
+
+              const columnOptions = sortableColumns.filter(
+                (column) =>
+                  column.id === sort.id || !usedByOthers.has(column.id),
+              );
+
+              return (
+                <div
+                  key={sort.id}
+                  className="flex w-full flex-wrap items-center gap-2 rounded-md border border-border/60 p-2"
+                >
+                  <Select
+                    value={sort.id}
+                    onValueChange={(value) =>
+                      onSortUpdate(sort.id, { id: value })
+                    }
+                  >
+                    <SelectTrigger className="min-w-[180px] flex-1">
+                      <SelectValue placeholder="ستون" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {columnOptions.map((column) => (
+                        <SelectItem key={column.id} value={column.id}>
+                          {getColumnLabel(column.id)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Select
+                    value={sort.desc ? "desc" : "asc"}
+                    onValueChange={(value: SortDirection) =>
+                      onSortUpdate(sort.id, { desc: value === "desc" })
+                    }
+                  >
+                    <SelectTrigger className="w-[136px] min-w-[120px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {SORT_DIRECTIONS.map((direction) => (
+                        <SelectItem
+                          key={direction.value}
+                          value={direction.value}
+                        >
+                          {direction.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      disabled={index === 0}
+                      onClick={() => onSortMove(sort.id, -1)}
+                      aria-label="انتقال مرتب‌سازی به بالا"
+                    >
+                      <ArrowUp className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      disabled={index === sorting.length - 1}
+                      onClick={() => onSortMove(sort.id, 1)}
+                      aria-label="انتقال مرتب‌سازی به پایین"
+                    >
+                      <ArrowDown className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      onClick={() => onSortRemove(sort.id)}
+                      aria-label="حذف مرتب‌سازی"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            className="rounded"
+            onClick={onSortAdd}
+            disabled={availableColumns.length === 0}
+          >
+            افزودن مرتب‌سازی
+          </Button>
+          {sorting.length > 0 ? (
+            <Button
+              size="sm"
+              variant="outline"
+              className="rounded"
+              onClick={onSortingReset}
+            >
+              بازنشانی
+            </Button>
+          ) : null}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  schema: z.ZodSchema;
+  itemName: string;
+  idField?: string;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  schema,
+  itemName,
+  idField = "id",
+}: DataTableRowActionsProps<TData>) {
+  const item = schema.parse(row.original) as TData;
+  const itemRecord = item as Record<string, unknown>;
+  const handleCopy = async () => {
+    const value = itemRecord[idField] ?? itemRecord.id;
+    if (!value) {
+      toast.error("شناسه‌ای برای کپی موجود نیست");
+      return;
+    }
+    if (!navigator.clipboard?.writeText) {
+      toast.error("کلیپ‌بورد در این مرورگر در دسترس نیست");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(String(value));
+      toast.success("شناسه در کلیپ‌بورد کپی شد");
+    } catch (error) {
+      console.error("Error copying to clipboard", error);
+      toast.error("کپی در کلیپ‌بورد انجام نشد");
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">باز کردن منو</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[160px]">
+        <DropdownMenuLabel>عملیات</DropdownMenuLabel>
+        <DropdownMenuItem onClick={handleCopy}>
+          کپی شناسه {itemName}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>ویرایش {itemName}</DropdownMenuItem>
+        <DropdownMenuItem>مشاهده جزئیات</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const schema = z.object({
+  id: z.string(),
+  purchased: z.string(),
+  items: z.number(),
+  customer: z.string(),
+  customer_email: z.string(),
+  fulfillment_channel: z.string(),
+  notes: z.string(),
+});
+
+export type Order = z.infer<typeof schema>;
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const fulfillmentLabels: Record<string, string> = {
+  "3PL": "لجستیک شخص ثالث",
+  Dropship: "دراپ‌شیپ",
+  FBA: "FBA",
+  "Merchant Fulfilled": "ارسال توسط فروشنده",
+};
+
+const translateLabel = (map: Record<string, string>, value: string) =>
+  map[value] ?? value;
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="سفارش" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[120px] font-mono">{row.original.id}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+    meta: {
+      width: 120,
+      label: "سفارش",
+    },
+  },
+  {
+    accessorKey: "purchased",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex gap-2">
+        <div className="max-w-[320px] truncate font-medium">
+          {row.original.purchased}
+        </div>
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      width: 280,
+      label: "محصول",
+    },
+  },
+  {
+    accessorKey: "customer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="مشتری" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[180px] truncate">{row.original.customer}</div>
+    ),
+    meta: {
+      width: 200,
+      label: "مشتری",
+    },
+  },
+  {
+    accessorKey: "customer_email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="ایمیل مشتری" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.customer_email}
+      </span>
+    ),
+    meta: {
+      width: 240,
+      label: "ایمیل مشتری",
+    },
+  },
+  {
+    accessorKey: "fulfillment_channel",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تحویل" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs whitespace-nowrap sm:text-sm">
+        {translateLabel(fulfillmentLabels, row.original.fulfillment_channel)}
+      </span>
+    ),
+    meta: {
+      className: "whitespace-nowrap",
+      width: 160,
+      label: "تحویل",
+    },
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value) || value.length === 0) return true;
+      return value.includes(String(row.getValue(id)));
+    },
+  },
+  {
+    accessorKey: "items",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="تعداد" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-xs tabular-nums sm:text-sm">
+        {formatNumber(row.original.items)}
+      </span>
+    ),
+    meta: {
+      align: "center",
+      className: "tabular-nums",
+      width: 100,
+      label: "تعداد",
+    },
+  },
+
+  {
+    accessorKey: "notes",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="یادداشت" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[240px] truncate text-xs sm:text-sm">
+        {row.original.notes}
+      </span>
+    ),
+    meta: { width: 260, label: "یادداشت" },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <DataTableRowActions
+        row={row}
+        schema={schema}
+        itemName="سفارش"
+        idField="id"
+      />
+    ),
+    meta: {
+      width: 56,
+      minWidth: 48,
+      headerClassName: "px-2",
+      cellClassName: "px-2",
+      align: "center",
+    },
+  },
+];
+
+export const DataTable32 = ({ className }: { className?: string }) => {
+  const [data, setData] = React.useState<Order[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let active = true;
+
+    const fetchData = async () => {
+      setError(null);
+      setIsLoading(true);
+      try {
+        const res = await fetch(DATA_URL);
+        if (!res.ok) {
+          const message = `بارگذاری داده سفارش‌ها ناموفق بود (${res.status})`;
+          console.error(message, res.statusText);
+          if (active) setError(message);
+          return;
+        }
+        const json = await res.json();
+        const parsed = schema.array().parse(json);
+        if (active) {
+          setData(parsed);
+        }
+      } catch (error) {
+        console.error("Error fetching orders data", error);
+        if (active) setError("خطا در بارگذاری داده سفارش‌ها");
+      } finally {
+        if (active) setIsLoading(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const { table, tableContainerRef, rowVirtualizer } = useDataTable({
+    data,
+    columns,
+    getRowId: (row) => row.id.toString(),
+    initialColumnPinning: { left: ["select"], right: ["actions"] },
+  });
+  const visibleColumns = table.getVisibleLeafColumns();
+  const visibleColumnCount = Math.max(visibleColumns.length, 1);
+  const visibleColumnIds = visibleColumns.map((column) => column.id);
+  const rightPinnedColumnIdSet = new Set(
+    table.getState().columnPinning.right ?? [],
+  );
+  const firstRightPinnedIndex = visibleColumnIds.findIndex((columnId) =>
+    rightPinnedColumnIdSet.has(columnId),
+  );
+  const rightStickyDividerTargetId =
+    firstRightPinnedIndex > 0
+      ? visibleColumnIds[firstRightPinnedIndex - 1]
+      : null;
+  const rowModel = table.getRowModel().rows;
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)
+      : 0;
+  const hasRows = rowModel.length > 0;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول مجازی با مرتب‌سازی چندگانه
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              از منوی مرتب‌سازی برای چیدن چند ستون، تغییر اولویت و بازنشانی
+              استفاده کنید؛ با Shift/Cmd/Ctrl+کلیک روی سرستون‌ها مرتب‌سازی را
+              اضافه کنید نه جایگزین  پیمایش مجازی مجموعه داده بزرگ را روان
+              نگه می‌دارد.
+            </p>
+          </div>
+          <div className="mb-4 flex items-center justify-start">
+            <DataTableSortMenu table={table} />
+          </div>
+          <div className="overflow-hidden rounded-lg border-2">
+            <div
+              ref={tableContainerRef}
+              className="relative max-h-[600px] overflow-auto"
+            >
+              {isLoading ? (
+                <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+                  <div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                    <span>در حال بارگذاری سفارش‌ها…</span>
+                  </div>
+                </div>
+              ) : null}
+              <table className="w-full table-fixed caption-bottom border-separate border-spacing-0 text-sm [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:hover_td[data-pinned]]:bg-muted/50 [&_tr:not(:last-child)_td]:border-b [&_tr[data-state=selected]_td[data-pinned]]:bg-muted [&_tr[data-state=selected]:hover_td[data-pinned]]:bg-muted">
+                <TableHeader className="sticky top-0 z-20 bg-muted">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const meta =
+                          (header.column.columnDef.meta as ColumnStyleMeta) ??
+                          {};
+                        const columnWithPinning =
+                          header.column as unknown as ColumnWithPinning;
+                        const { baseStyle, pinnedStyle, pinned, lastPinned } =
+                          getColumnLayoutStyles(meta, columnWithPinning);
+
+                        const alignClass =
+                          meta.align === "center"
+                            ? "text-center"
+                            : meta.align === "right"
+                              ? "text-end"
+                              : meta.align === "left"
+                                ? "text-start"
+                                : undefined;
+
+                        return (
+                          <TableHead
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            style={{ ...baseStyle, ...pinnedStyle }}
+                            className={cn(
+                              "relative h-11 truncate border-r px-3 text-sm font-medium last:border-r-0 data-[pinned]:bg-muted/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                              header.column.id === rightStickyDividerTargetId &&
+                              "!border-r-0",
+                              meta.className,
+                              meta.headerClassName,
+                              alignClass,
+                            )}
+                            data-pinned={pinned || undefined}
+                            data-last-col={lastPinned || undefined}
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        <div className="inline-flex items-center gap-2">
+                          <LoaderIcon className="h-4 w-4 animate-spin" />
+                          <span>در حال بارگذاری سفارش‌ها…</span>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ) : error ? (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-destructive"
+                      >
+                        {error}
+                      </TableCell>
+                    </TableRow>
+                  ) : hasRows ? (
+                    <>
+                      {paddingTop > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingTop }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-top-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                      {virtualRows.map((virtualRow) => {
+                        const row = rowModel[virtualRow.index];
+                        if (!row) return null;
+
+                        return (
+                          <TableRow
+                            key={row.id}
+                            data-state={row.getIsSelected() && "selected"}
+                            className="border-b last:border-b-0"
+                            style={{ height: virtualRow.size }}
+                          >
+                            {row.getVisibleCells().map((cell) => {
+                              const meta =
+                                (cell.column.columnDef
+                                  .meta as ColumnStyleMeta) ?? {};
+                              const columnWithPinning =
+                                cell.column as unknown as ColumnWithPinning;
+                              const {
+                                baseStyle,
+                                pinnedStyle,
+                                pinned,
+                                lastPinned,
+                              } = getColumnLayoutStyles(
+                                meta,
+                                columnWithPinning,
+                              );
+
+                              const alignClass =
+                                meta.align === "center"
+                                  ? "text-center"
+                                  : meta.align === "right"
+                                    ? "text-end"
+                                    : meta.align === "left"
+                                      ? "text-start"
+                                      : undefined;
+
+                              return (
+                                <TableCell
+                                  key={cell.id}
+                                  style={{ ...baseStyle, ...pinnedStyle }}
+                                  className={cn(
+                                    "truncate border-r p-3 py-2 text-sm last:border-r-0 data-[pinned]:bg-background/90 data-[pinned]:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l",
+                                    cell.column.id ===
+                                    rightStickyDividerTargetId &&
+                                    "!border-r-0",
+                                    meta.className,
+                                    meta.cellClassName,
+                                    alignClass,
+                                  )}
+                                  data-pinned={pinned || undefined}
+                                  data-last-col={lastPinned || undefined}
+                                >
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                      {paddingBottom > 0 ? (
+                        <TableRow
+                          className="pointer-events-none border-none"
+                          aria-hidden="true"
+                          style={{ height: paddingBottom }}
+                        >
+                          {visibleColumns.map((column) => (
+                            <TableCell
+                              key={`pad-bottom-${column.id}`}
+                              className="border-none p-0"
+                            />
+                          ))}
+                        </TableRow>
+                      ) : null}
+                    </>
+                  ) : (
+                    <TableRow className="border-b last:border-b-0">
+                      <TableCell
+                        colSpan={visibleColumnCount}
+                        className="h-24 text-center text-sm text-muted-foreground"
+                      >
+                        نتیجه‌ای یافت نشد.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table4.tsx b/blocks/data-table4.tsx
new file mode 100644
index 0000000..6a34388
--- /dev/null
+++ b/blocks/data-table4.tsx
@@ -0,0 +1,409 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const { data, columns, getRowId, initialSorting = [] } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-xs font-medium text-foreground sm:text-sm">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-xs font-medium text-foreground sm:text-sm"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-3 w-3 sm:h-4 sm:w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-3 w-3 sm:h-4 sm:w-4" />
+      ) : (
+        <ChevronsUpDown className="h-3 w-3 opacity-50 sm:h-4 sm:w-4" />
+      )}
+    </Button>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    cell: ({ row }) => {
+      const sku = row.getValue("sku") as string;
+      return (
+        <span className="font-mono text-xs tracking-wide whitespace-nowrap text-muted-foreground uppercase">
+          {sku}
+        </span>
+      );
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[180px] truncate font-medium sm:max-w-[220px]">
+        {row.getValue("item")}
+      </div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    cell: ({ row }) => {
+      const type = row.getValue("type") as string;
+      return (
+        <span className="text-xs whitespace-nowrap text-muted-foreground sm:text-sm">
+          {type}
+        </span>
+      );
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return (
+        <div className="flex justify-start">
+          <span className="inline-flex min-w-[3rem] justify-center rounded-full border px-2 py-1 text-xs font-semibold whitespace-nowrap">
+            {inStock ? "بله" : "خیر"}
+          </span>
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return (
+        <div className="font-medium whitespace-nowrap tabular-nums">
+          {formatPrice(price)}
+        </div>
+      );
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge
+              key={location}
+              variant="secondary"
+              className="text-xs whitespace-nowrap"
+            >
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable4 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24", className)}>
+      <div className="container px-4 sm:px-6 lg:px-8">
+        <div className="w-full overflow-hidden">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول واکنش‌گرای مینیمال
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول کاملاً واکنش‌گرا با اسکرول افقی، استایل سفارشی سلول‌ها و
+              تایپوگرافی تطبیقی. بهینه‌شده برای موبایل با ژesture لمسی و
+              راهنمای کشیدن.
+            </p>
+          </div>
+          {/* Wrap in ScrollArea for horizontal scroll */}
+          <ScrollArea className="w-full whitespace-nowrap">
+            <div className="min-w-[800px]">
+              <Table className="table-fixed border-separate border-spacing-0 [&_tr:not(:last-child)_td]:border-b">
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow
+                      key={headerGroup.id}
+                      className="hover:bg-transparent"
+                    >
+                      {headerGroup.headers.map((header) => {
+                        return (
+                          <TableHead
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            className="relative h-12 border-y border-border bg-muted/50 px-3 text-start text-xs font-medium select-none first:rounded-ss-lg first:border-s first:ps-3 last:rounded-se-lg last:border-e last:pe-3 sm:px-4 sm:text-sm sm:first:ps-5 sm:last:pe-5"
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows?.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        data-state={row.getIsSelected() && "selected"}
+                        className="border-0 hover:bg-muted/50 [&:first-child>td:first-child]:rounded-ss-lg [&:first-child>td:last-child]:rounded-se-lg [&:last-child>td:first-child]:rounded-es-lg [&:last-child>td:last-child]:rounded-ee-lg"
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell
+                            key={cell.id}
+                            className="px-3 py-2 text-xs first:ps-3 last:pe-3 sm:px-4 sm:py-3 sm:text-sm sm:first:ps-5 sm:last:pe-5"
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow className="border-0 [&>td:first-child]:rounded-ss-lg [&>td:first-child]:rounded-es-lg [&>td:last-child]:rounded-se-lg [&>td:last-child]:rounded-ee-lg">
+                      <TableCell
+                        colSpan={columns.length}
+                        className="h-24 px-4 text-center text-sm text-muted-foreground"
+                      >
+                        نتیجه‌ای یافت نشد.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </div>
+        {/* Optional: Mobile scroll hint */}
+        <p className="mt-2 text-center text-xs text-muted-foreground sm:hidden">
+          ← برای دیدن ستون‌های بیشتر بکشید →
+        </p>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table5.tsx b/blocks/data-table5.tsx
new file mode 100644
index 0000000..13d13b4
--- /dev/null
+++ b/blocks/data-table5.tsx
@@ -0,0 +1,394 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const { data, columns, getRowId, initialSorting = [] } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    cell: ({ row }) => {
+      const sku = row.getValue("sku") as string;
+      return (
+        <span className="font-mono text-xs tracking-wide text-muted-foreground uppercase">
+          {sku}
+        </span>
+      );
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[220px] truncate font-medium">
+        {row.getValue("item")}
+      </div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    cell: ({ row }) => {
+      const type = row.getValue("type") as string;
+      return <span className="text-sm text-muted-foreground">{type}</span>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return (
+        <div className="flex justify-start">
+          <span className="inline-flex min-w-[3rem] justify-center rounded-full border px-2 py-1 text-xs font-semibold">
+            {inStock ? "بله" : "خیر"}
+          </span>
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium tabular-nums">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable5 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24", className)}>
+      <div className="container px-4 sm:px-6 lg:px-8">
+        <div className="mb-8 text-start">
+          <h2 className="text-xl font-bold tracking-tight">
+            جدول با سرستون ثابت
+          </h2>
+          <p className="mt-2 text-muted-foreground">
+            جدول با ارتفاع ثابت و اسکرول عمودی و افقی، با سرستون چسبنده که
+            هنگام اسکرول قابل مشاهده می‌ماند. مناسب برای نمایش مجموعه‌داده‌های
+            بزرگ در فضای محدود.
+          </p>
+        </div>
+        <div className="relative h-[300px] w-full overflow-hidden sm:h-[420px]">
+          <ScrollArea className="h-full w-full">
+            <table className="w-full min-w-[800px] table-fixed caption-bottom border-separate border-spacing-0 text-sm [&_tr:not(:last-child)_td]:border-b">
+              <TableHeader className="sticky top-0 z-20 bg-background">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow
+                    key={headerGroup.id}
+                    className="hover:bg-transparent"
+                  >
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead
+                          key={header.id}
+                          colSpan={header.colSpan}
+                          className="relative h-12 border-y border-border bg-muted/50 px-4 text-start text-sm font-medium select-none first:rounded-ss-lg first:border-s first:ps-5 last:rounded-se-lg last:border-e last:pe-5"
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                      className="border-0 hover:bg-muted/50"
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell
+                          key={cell.id}
+                          className="px-3 py-2 text-xs first:ps-3 last:pe-3 sm:px-4 sm:py-3 sm:text-sm sm:first:ps-5 sm:last:pe-5"
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow className="border-0">
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 px-4 text-center text-sm text-muted-foreground"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </table>
+            <ScrollBar orientation="vertical" />
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </div>
+        {/* Optional: Add a hint for mobile users */}
+        <p className="mt-2 text-center text-xs text-muted-foreground sm:hidden">
+          ← برای دیدن ستون‌های بیشتر بکشید →
+        </p>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table6.tsx b/blocks/data-table6.tsx
new file mode 100644
index 0000000..19130bd
--- /dev/null
+++ b/blocks/data-table6.tsx
@@ -0,0 +1,453 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+const formatNumber = (value: number) =>
+  value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const { data, columns, getRowId, initialSorting = [] } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getRowCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  return (
+    <div className="flex items-center justify-end gap-2 py-4">
+      <div className="flex-1 text-sm text-muted-foreground">
+        <span>
+          {formatNumber(startRow)}–{formatNumber(endRow)}
+        </span>{" "}
+        از <span>{formatNumber(totalRows)}</span>
+      </div>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          قبلی
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          بعدی
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-011",
+    item: "بوت روزمره",
+    type: "کفش",
+    stock: true,
+    sku: "CB-011",
+    price: 276.15,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-012",
+    item: "کفش پاشنه‌بلند",
+    type: "پوشاک",
+    stock: true,
+    sku: "HH-012",
+    price: 85.47,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-013",
+    item: "صندل ساحلی",
+    type: "کفش",
+    stock: true,
+    sku: "BS-013",
+    price: 41.25,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-014",
+    item: "گردنبند طلا",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "GN-014",
+    price: 201.47,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-015",
+    item: "اسپیکر بلوتوث",
+    type: "الکترونیک",
+    stock: true,
+    sku: "BS-015",
+    price: 297.37,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable6 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با صفحه‌بندی مینیمال
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با قابلیت مرتب‌سازی، کنترل‌های صفحه‌بندی و طراحی
+              واکنش‌گرا. مناسب برای نمایش مجموعه‌داده‌های بزرگ با ناوبری
+              بهتر.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} className="px-0">
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table7.tsx b/blocks/data-table7.tsx
new file mode 100644
index 0000000..4e85922
--- /dev/null
+++ b/blocks/data-table7.tsx
@@ -0,0 +1,535 @@
+"use client";
+
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const { data, columns, getRowId, initialSorting = [] } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  return {
+    table,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+  pageSizeOptions?: number[];
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  const relevantPageSizes = pageSizeOptions.filter(
+    (size) => size <= totalRows || size === pageSize,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 text-center text-sm text-muted-foreground sm:text-start">
+        <span className="font-medium">
+          {totalRows === 0 ? (
+            "نتیجه‌ای یافت نشد"
+          ) : (
+            <>
+              نمایش {formatNumber(startRow)} تا {formatNumber(endRow)} از{" "}
+              {formatNumber(totalRows)} ردیف
+            </>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">تعداد در هر صفحه</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+            disabled={totalRows === 0}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {relevantPageSizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {formatNumber(size)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="text-sm font-medium whitespace-nowrap">
+            صفحه {formatNumber(currentPage + 1)} از {formatNumber(pageCount)}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={currentPage === 0 || totalRows === 0}
+              aria-label="رفتن به صفحه اول"
+            >
+              <ChevronsLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="رفتن به صفحه قبلی"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="رفتن به صفحه بعدی"
+            >
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(pageCount - 1)}
+              disabled={currentPage === pageCount - 1 || totalRows === 0}
+              aria-label="رفتن به صفحه آخر"
+            >
+              <ChevronsRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-011",
+    item: "بوت روزمره",
+    type: "کفش",
+    stock: true,
+    sku: "CB-011",
+    price: 276.15,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-012",
+    item: "کفش پاشنه‌بلند",
+    type: "پوشاک",
+    stock: true,
+    sku: "HH-012",
+    price: 85.47,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-013",
+    item: "صندل ساحلی",
+    type: "کفش",
+    stock: true,
+    sku: "BS-013",
+    price: 41.25,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-014",
+    item: "گردنبند طلا",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "GN-014",
+    price: 201.47,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-015",
+    item: "اسپیکر بلوتوث",
+    type: "الکترونیک",
+    stock: true,
+    sku: "BS-015",
+    price: 297.37,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable7 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با صفحه‌بندی کامل
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با مرتب‌سازی، انتخاب تعداد ردیف در هر صفحه، نمایش
+              شماره صفحه و دکمه‌های ناوبری کامل. مناسب برای مجموعه‌داده‌های
+              بزرگ با کنترل دقیق صفحه‌بندی.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} className="px-0">
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table8.tsx b/blocks/data-table8.tsx
new file mode 100644
index 0000000..f319019
--- /dev/null
+++ b/blocks/data-table8.tsx
@@ -0,0 +1,583 @@
+"use client";
+
+import type { ColumnFiltersState } from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialFilters?: ColumnFiltersState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialFilters = [],
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(initialFilters);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting, columnFilters },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  return {
+    table,
+    columnFilters,
+    setColumnFilters,
+    sorting,
+    setSorting,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+  pageSizeOptions?: number[];
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  const relevantPageSizes = pageSizeOptions.filter(
+    (size) => size <= totalRows || size === pageSize,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 text-center text-sm text-muted-foreground sm:text-start">
+        <span className="font-medium">
+          {totalRows === 0 ? (
+            "نتیجه‌ای یافت نشد"
+          ) : (
+            <>
+              نمایش {formatNumber(startRow)} تا {formatNumber(endRow)} از{" "}
+              {formatNumber(totalRows)} ردیف
+            </>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">تعداد در هر صفحه</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+            disabled={totalRows === 0}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {relevantPageSizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {formatNumber(size)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="text-sm font-medium whitespace-nowrap">
+            صفحه {formatNumber(currentPage + 1)} از {formatNumber(pageCount)}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={currentPage === 0 || totalRows === 0}
+              aria-label="رفتن به صفحه اول"
+            >
+              <ChevronsLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="رفتن به صفحه قبلی"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="رفتن به صفحه بعدی"
+            >
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(pageCount - 1)}
+              disabled={currentPage === pageCount - 1 || totalRows === 0}
+              aria-label="رفتن به صفحه آخر"
+            >
+              <ChevronsRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface DataTableToolbarProps<TData> extends React.ComponentProps<"div"> {
+  _table: TableType<TData>;
+}
+export const DataTableToolbar = <TData,>({
+  _table,
+  children,
+  className,
+  ...props
+}: DataTableToolbarProps<TData>) => {
+  return (
+    <div
+      className={cn("flex items-center justify-between py-4", className)}
+      {...props}
+    >
+      <div className="flex flex-1 items-center gap-2">{children}</div>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-011",
+    item: "بوت روزمره",
+    type: "کفش",
+    stock: true,
+    sku: "CB-011",
+    price: 276.15,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-012",
+    item: "کفش پاشنه‌بلند",
+    type: "پوشاک",
+    stock: true,
+    sku: "HH-012",
+    price: 85.47,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-013",
+    item: "صندل ساحلی",
+    type: "کفش",
+    stock: true,
+    sku: "BS-013",
+    price: 41.25,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-014",
+    item: "گردنبند طلا",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "GN-014",
+    price: 201.47,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-015",
+    item: "اسپیکر بلوتوث",
+    type: "الکترونیک",
+    stock: true,
+    sku: "BS-015",
+    price: 297.37,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable8 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const Toolbar = (
+    <DataTableToolbar _table={table}>
+      <Input
+        placeholder="جستجوی محصول..."
+        value={(table.getColumn("item")?.getFilterValue() as string) ?? ""}
+        onChange={(event) =>
+          table.getColumn("item")?.setFilterValue(event.target.value)
+        }
+        className="h-8 w-[150px] lg:w-[250px]"
+      />
+    </DataTableToolbar>
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با فیلتر تک‌ستونه
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با قابلیت مرتب‌سازی و فیلتر روی ستون محصول، همراه با
+              کنترل‌های کامل صفحه‌بندی و طراحی واکنش‌گرا.
+            </p>
+          </div>
+          {Toolbar}
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} className="px-0">
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/data-table9.tsx b/blocks/data-table9.tsx
new file mode 100644
index 0000000..c1b7e34
--- /dev/null
+++ b/blocks/data-table9.tsx
@@ -0,0 +1,588 @@
+"use client";
+
+import type { ColumnFiltersState } from "@tanstack/react-table";
+import {
+  type Column,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  type Table as TableType,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+} from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+type UseDataTableOptions<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  getRowId?: (row: TData) => string;
+  initialSorting?: SortingState;
+  initialGlobalFilter?: string;
+  initialFilters?: ColumnFiltersState;
+};
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    initialSorting = [],
+    initialFilters = [],
+    initialGlobalFilter = "",
+  } = options;
+
+  const [sorting, setSorting] = React.useState<SortingState>(initialSorting);
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(initialFilters);
+  const [globalFilter, setGlobalFilter] =
+    React.useState<string>(initialGlobalFilter);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state: { sorting, columnFilters, globalFilter },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+  });
+
+  return {
+    table,
+    columnFilters,
+    setColumnFilters,
+    sorting,
+    setSorting,
+    globalFilter,
+    setGlobalFilter,
+  };
+}
+
+type DataTableColumnHeaderProps<TData, TValue> = {
+  column: Column<TData, TValue>;
+  title: string;
+};
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const canSort = column.getCanSort();
+  const sorted = column.getIsSorted();
+
+  if (!canSort) {
+    return (
+      <span className="flex h-8 items-center text-sm font-medium text-foreground">
+        {title}
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="flex h-8 items-center gap-2 px-0 text-sm font-medium text-foreground"
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-4 w-4" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-4 w-4" />
+      ) : (
+        <ChevronsUpDown className="h-4 w-4 opacity-50" />
+      )}
+    </Button>
+  );
+};
+
+type DataTablePaginationProps<TData> = {
+  table: TableType<TData>;
+  pageSizeOptions?: number[];
+};
+
+export const DataTablePagination = <TData,>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) => {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageCount = table.getPageCount();
+
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+
+  const relevantPageSizes = pageSizeOptions.filter(
+    (size) => size <= totalRows || size === pageSize,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 text-center text-sm text-muted-foreground sm:text-start">
+        <span className="font-medium">
+          {totalRows === 0 ? (
+            "نتیجه‌ای یافت نشد"
+          ) : (
+            <>
+              نمایش {formatNumber(startRow)} تا {formatNumber(endRow)} از{" "}
+              {formatNumber(totalRows)} ردیف
+            </>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">تعداد در هر صفحه</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+            disabled={totalRows === 0}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {relevantPageSizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {formatNumber(size)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="text-sm font-medium whitespace-nowrap">
+            صفحه {formatNumber(currentPage + 1)} از {formatNumber(pageCount)}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={currentPage === 0 || totalRows === 0}
+              aria-label="رفتن به صفحه اول"
+            >
+              <ChevronsLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="رفتن به صفحه قبلی"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="رفتن به صفحه بعدی"
+            >
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="hidden size-8 lg:flex"
+              onClick={() => table.setPageIndex(pageCount - 1)}
+              disabled={currentPage === pageCount - 1 || totalRows === 0}
+              aria-label="رفتن به صفحه آخر"
+            >
+              <ChevronsRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface DataTableToolbarProps<TData> extends React.ComponentProps<"div"> {
+  _table: TableType<TData>;
+}
+export const DataTableToolbar = <TData,>({
+  _table,
+  children,
+  className,
+  ...props
+}: DataTableToolbarProps<TData>) => {
+  return (
+    <div
+      className={cn("flex items-center justify-between py-4", className)}
+      {...props}
+    >
+      <div className="flex flex-1 items-center gap-2">{children}</div>
+    </div>
+  );
+};
+
+export const schema = z.object({
+  id: z.string(),
+  item: z.string(),
+  type: z.string(),
+  stock: z.boolean(),
+  sku: z.string(),
+  price: z.number(),
+  availability: z.array(z.enum(["فروشگاه", "آنلاین"])),
+});
+
+const data = [
+  {
+    id: "prod-001",
+    item: "قاب تبلت",
+    type: "الکترونیک",
+    stock: true,
+    sku: "TC-001",
+    price: 83.24,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-002",
+    item: "ساعت هوشمند",
+    type: "الکترونیک",
+    stock: true,
+    sku: "SW-002",
+    price: 246.27,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-003",
+    item: "پلیور پشمی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "WS-003",
+    price: 168.27,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-004",
+    item: "هدفون بی‌سیم",
+    type: "الکترونیک",
+    stock: true,
+    sku: "WE-004",
+    price: 107.75,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-005",
+    item: "کاور لپ‌تاپ",
+    type: "الکترونیک",
+    stock: true,
+    sku: "LS-005",
+    price: 248.02,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-006",
+    item: "کفش دویدن",
+    type: "کفش",
+    stock: true,
+    sku: "RS-006",
+    price: 208.26,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-007",
+    item: "کاپشن زمستانی",
+    type: "پوشاک",
+    stock: true,
+    sku: "WJ-007",
+    price: 148.06,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-008",
+    item: "قاب گوشی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "PC-008",
+    price: 298.08,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-009",
+    item: "ردیاب تناسب اندام",
+    type: "پوشاک",
+    stock: true,
+    sku: "FT-009",
+    price: 222.09,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-010",
+    item: "عینک آفتابی",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "SG-010",
+    price: 60.17,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-011",
+    item: "بوت روزمره",
+    type: "کفش",
+    stock: true,
+    sku: "CB-011",
+    price: 276.15,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-012",
+    item: "کفش پاشنه‌بلند",
+    type: "پوشاک",
+    stock: true,
+    sku: "HH-012",
+    price: 85.47,
+    availability: ["فروشگاه"],
+  },
+  {
+    id: "prod-013",
+    item: "صندل ساحلی",
+    type: "کفش",
+    stock: true,
+    sku: "BS-013",
+    price: 41.25,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-014",
+    item: "گردنبند طلا",
+    type: "لوازم جانبی",
+    stock: true,
+    sku: "GN-014",
+    price: 201.47,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+  {
+    id: "prod-015",
+    item: "اسپیکر بلوتوث",
+    type: "الکترونیک",
+    stock: true,
+    sku: "BS-015",
+    price: 297.37,
+    availability: ["فروشگاه", "آنلاین"],
+  },
+];
+
+export const validatedData = schema.array().parse(data);
+
+export const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    accessorKey: "sku",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="کد کالا" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "item",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="محصول" />
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("item")}</div>
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسته‌بندی" />
+    ),
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "stock",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="موجود در انبار" />
+    ),
+    cell: ({ row }) => {
+      const inStock: boolean = row.getValue("stock");
+      return inStock ? "بله" : "خیر";
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "price",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="قیمت" />
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue("price"));
+      return <div className="font-medium">{formatPrice(price)}</div>;
+    },
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "availability",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="دسترس‌پذیر در" />
+    ),
+    cell: ({ row }) => {
+      const availability: ("فروشگاه" | "آنلاین")[] =
+        row.getValue("availability");
+      return (
+        <div className="flex gap-2">
+          {availability.map((location) => (
+            <Badge key={location} variant="secondary">
+              {location}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+];
+
+export const DataTable9 = ({ className }: { className?: string }) => {
+  const { table } = useDataTable({
+    data: validatedData,
+    columns,
+    getRowId: (row) => row.id.toString(),
+  });
+
+  const Toolbar = (
+    <DataTableToolbar _table={table}>
+      <Input
+        placeholder="جستجو در همه ستون‌ها..."
+        value={(table.getState().globalFilter as string) ?? ""}
+        onChange={(event) => table.setGlobalFilter(event.target.value)}
+        className="h-8 w-[150px] lg:w-[250px]"
+      />
+    </DataTableToolbar>
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full">
+          <div className="mb-8 text-start">
+            <h2 className="text-xl font-bold tracking-tight">
+              جدول با فیلتر سراسری
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              جدول داده با قابلیت مرتب‌سازی و جستجوی سراسری در تمام ستون‌ها،
+              همراه با کنترل‌های کامل صفحه‌بندی و طراحی واکنش‌گرا.
+            </p>
+          </div>
+          {Toolbar}
+          <div className="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} className="px-0">
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      نتیجه‌ای یافت نشد.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <DataTablePagination table={table} />
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/download1.tsx b/blocks/download1.tsx
new file mode 100644
index 0000000..bc31375
--- /dev/null
+++ b/blocks/download1.tsx
@@ -0,0 +1,165 @@
+import { Download, Monitor, Smartphone, Tablet } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Download1Props {
+  heading?: string;
+  description?: string;
+
+  platforms?: {
+    desktop?: {
+      title: string;
+      subtitle: string;
+      description: string;
+      buttonText: string;
+      url: string;
+    };
+    ios?: {
+      title: string;
+      subtitle: string;
+      description: string;
+      url: string;
+    };
+    android?: {
+      title: string;
+      subtitle: string;
+      description: string;
+      url: string;
+    };
+  };
+  className?: string;
+}
+
+const Download1 = ({
+  heading = "اپلیکیشن ما را دانلود کنید",
+  description =
+    "اپلیکیشن را روی هر پلتفرمی نصب کنید و با قابلیت‌های همگام و همکاری زنده، گردش کار خود را سریع‌تر کنید.",
+  platforms = {
+    desktop: {
+      title: "دسکتاپ",
+      subtitle: "PC/Mac",
+      description:
+        "با نسخه کامل دسکتاپ، از تمام امکانات و قدرت اپلیکیشن بهره ببرید.",
+      buttonText: "دانلود",
+      url: "#",
+    },
+    ios: {
+      title: "گوشی همراه",
+      subtitle: "iOS",
+      description:
+        "با اپ موبایل بهینه‌شده برای موبایل اپل، کار خود را همراه ببرید و از تعامل لمسی روان لذت ببرید.",
+      url: "#",
+    },
+    android: {
+      title: "گوشی همراه / تبلت",
+      subtitle: "Android",
+      description:
+        "روی گوشی و تبلت اندروید، تجربه‌ای یکپارچه و بهینه‌شده برای هر اندازه صفحه داشته باشید.",
+      url: "#",
+    },
+  },
+  className,
+}: Download1Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-muted/30 py-32", className)}
+    >
+      <div className="container">
+        <div className="mb-16 text-center">
+          <h2 className="mb-6 text-xl font-bold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
+            {description}
+          </p>
+        </div>
+
+        <div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-3">
+          <Card className="flex flex-col border-0 bg-muted p-6 text-foreground">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-foreground/10">
+              <Monitor className="h-6 w-6" />
+            </div>
+            <div className="mb-4 flex-1">
+              <p className="mb-1 text-sm">{platforms.desktop?.title}</p>
+              <h3 className="mb-3 text-xl font-bold" dir="rtl">
+                {platforms.desktop?.subtitle}
+              </h3>
+              <p className="text-sm leading-relaxed">
+                {platforms.desktop?.description}
+              </p>
+            </div>
+            <div>
+              <Button className="w-auto" size="lg" asChild>
+                <a
+                  href={platforms.desktop?.url}
+                  className="inline-flex items-center gap-2"
+                >
+                  {platforms.desktop?.buttonText}
+                  <Download className="h-4 w-4" />
+                </a>
+              </Button>
+            </div>
+          </Card>
+
+          <Card className="flex flex-col border-border bg-background p-6">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+              <Smartphone className="h-6 w-6" />
+            </div>
+            <div className="mb-6 flex-1">
+              <p className="mb-1 text-sm text-muted-foreground">
+                {platforms.ios?.title}
+              </p>
+              <h3 className="mb-3 text-xl font-bold" dir="rtl">
+                {platforms.ios?.subtitle}
+              </h3>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                {platforms.ios?.description}
+              </p>
+            </div>
+            <div>
+              <a href={platforms.ios?.url}>
+                <img
+                  src="/block-media/shadcnblocks/block/badges/appstore.png"
+                  alt="دانلود از اپ استور"
+                  className="h-10"
+                />
+              </a>
+            </div>
+          </Card>
+
+          <Card className="flex flex-col border-border bg-background p-6">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+              <Tablet className="h-6 w-6" />
+            </div>
+            <div className="mb-6 flex-1">
+              <p className="mb-1 text-sm text-muted-foreground">
+                {platforms.android?.title}
+              </p>
+              <h3 className="mb-3 text-xl font-bold" dir="rtl">
+                {platforms.android?.subtitle}
+              </h3>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                {platforms.android?.description}
+              </p>
+            </div>
+            <div>
+              <a href={platforms.android?.url}>
+                <img
+                  src="/block-media/shadcnblocks/block/badges/googleplay.png"
+                  alt="دانلود از گوگل پلی"
+                  className="h-10"
+                />
+              </a>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download1 };
diff --git a/blocks/download10.tsx b/blocks/download10.tsx
new file mode 100644
index 0000000..46f3b86
--- /dev/null
+++ b/blocks/download10.tsx
@@ -0,0 +1,125 @@
+import {
+  FaApple,
+  FaChrome,
+  FaFirefox,
+  FaSafari,
+  FaWindows,
+} from "react-icons/fa";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Download10Props {
+  className?: string;
+}
+
+const Download10 = ({ className }: Download10Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-6 text-center">
+          <h1 className="text-2xll font-semibold md:text-2xll">
+            همین امروز شروع کنید
+          </h1>
+          <p className="max-w-2xl text-lg text-muted-foreground md:text-xl">
+            گردش کار خود را با ابزارهای قدرتمند متحول کنید؛ برای افزایش
+            بهره‌وری، ساده‌سازی همکاری و رسیدن سریع‌تر به اهداف طراحی شده‌اند.
+          </p>
+        </div>
+        <div className="mx-auto mt-20 grid max-w-5xl grid-cols-1 place-items-center gap-6 lg:grid-cols-3">
+          <div className="flex h-full w-full max-w-md flex-col justify-between gap-6 rounded-xl border border-border p-8">
+            <div className="flex flex-col gap-2">
+              <h2 className="text-xl font-semibold">اپ دسکتاپ</h2>
+              <p className="text-muted-foreground">
+                قدرت کامل پلتفرم را روی همه دستگاه‌های خود تجربه کنید
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <Button
+                variant="outline"
+                size="lg"
+                className="inline-flex items-center gap-2"
+              >
+                دانلود برای <span dir="rtl">Mac</span>
+                <FaApple />
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="inline-flex items-center gap-2"
+              >
+                دانلود برای <span dir="rtl">Windows</span>
+                <FaWindows />
+              </Button>
+            </div>
+          </div>
+          <div className="flex h-full w-full max-w-md flex-col justify-between gap-6 rounded-xl border border-border p-8">
+            <div className="flex w-full flex-col gap-2">
+              <h2 className="text-xl font-semibold">اپ موبایل</h2>
+              <p className="text-muted-foreground">
+                بهره‌وری را با اپ موبایل همراه خود ببرید
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="text-sm text-muted-foreground">
+                در فروشگاه‌های اپ محبوب شما:
+              </p>
+              <div className="grid grid-cols-2 gap-2">
+                <a href="#">
+                  <img
+                    src="/block-media/shadcnblocks/block/badges/appstore.png"
+                    alt="دانلود از اپ استور"
+                    className="h-auto w-full"
+                  />
+                </a>
+                <a href="#">
+                  <img
+                    src="/block-media/shadcnblocks/block/badges/googleplay.png"
+                    alt="دانلود از گوگل پلی"
+                    className="h-auto w-full"
+                  />
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="flex h-full w-full max-w-md flex-col justify-between gap-6 rounded-xl border border-border p-8">
+            <div className="flex flex-col gap-2">
+              <h2 className="text-xl font-semibold">افزونه وب</h2>
+              <p className="text-muted-foreground">
+                مستقیماً از مرورگر وب به ابزارهای ما دسترسی داشته باشید
+              </p>
+            </div>
+            <div className="flex justify-center gap-2">
+              <Button
+                variant="outline"
+                size="lg"
+                className="h-19 w-20 flex-col p-3"
+              >
+                <FaChrome className="size-6" />
+                <span dir="rtl">Chrome</span>
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="h-19 w-20 flex-col p-3"
+              >
+                <FaFirefox className="size-6" />
+                <span dir="rtl">Firefox</span>
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="h-19 w-20 flex-col p-3"
+              >
+                <FaSafari className="size-6" />
+                <span dir="rtl">Safari</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download10 };
diff --git a/blocks/download11.tsx b/blocks/download11.tsx
new file mode 100644
index 0000000..fa15d94
--- /dev/null
+++ b/blocks/download11.tsx
@@ -0,0 +1,80 @@
+import { BorderBeam } from "@/components/magicui/border-beam";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Download11Props {
+  className?: string;
+}
+
+const Download11 = ({ className }: Download11Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-10 md:gap-14 lg:flex-row lg:items-stretch">
+          <div className="flex max-w-md flex-col items-start justify-between gap-8 text-center lg:text-start">
+            <div className="flex flex-col items-start gap-6">
+              <div className="flex flex-col gap-4">
+                <h1 className="text-2xll font-bold">دانلود برای ویندوز</h1>
+                <p className="text-muted-foreground lg:text-xl">
+                  با اپ دسکتاپ ما، بهره‌وری فقط یک کلیک فاصله دارد.
+                </p>
+              </div>
+              <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
+                <Button size="lg" className="w-full" dir="rtl">
+                  دانلود .MSI
+                </Button>
+                <Button variant="outline" size="lg" className="w-full" dir="rtl">
+                  دانلود .EXE
+                </Button>
+                <Button
+                  variant="link"
+                  size="lg"
+                  className="w-full px-0 sm:col-span-2 lg:justify-start"
+                >
+                  دانلود از{" "}
+                  <span dir="rtl" className="inline-block">
+                    فروشگاه نرم‌افزار
+                  </span>
+                </Button>
+              </div>
+            </div>
+            <div className="flex w-full flex-col gap-2 text-sm text-muted-foreground">
+              <p>
+                سازگار با{" "}
+                <span dir="rtl" className="inline-block">
+                  Windows 7, 8, 10 and 11
+                </span>
+              </p>
+              <p>
+                نسخه{" "}
+                <span dir="rtl" className="inline-block">
+                  4.2.0
+                </span>
+                {"  "}
+                <a href="#" className="text-primary hover:underline">
+                  مشاهده یادداشت انتشار
+                </a>
+              </p>
+            </div>
+          </div>
+          <div className="relative overflow-hidden rounded-lg border border-border p-1">
+            <img
+              src="/block-media/shadcnblocks/block/dashboard/dashboard-1.png"
+              alt="پیش‌نمایش داشبورد"
+              className="rounded-lg dark:hidden"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/dashboard/dashboard-dark-1.png"
+              alt="پیش‌نمایش داشبورد"
+              className="hidden dark:block"
+            />
+            <BorderBeam duration={8} size={400} />
+            <BorderBeam duration={8} delay={3} size={400} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download11 };
diff --git a/blocks/download13.tsx b/blocks/download13.tsx
new file mode 100644
index 0000000..a90a12c
--- /dev/null
+++ b/blocks/download13.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { ArrowRight, Check, Copy, Download } from "lucide-react";
+import { useState } from "react";
+import { FaWindows } from "react-icons/fa";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Download13Props {
+  className?: string;
+}
+
+const Download13 = ({ className }: Download13Props) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText("winget install Example.App");
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <span className="mx-auto grid size-28 place-items-center rounded-4xl bg-primary p-4 md:size-32">
+          <img
+            src="/block-media/shadcnblocks/block/block-1.svg"
+            alt="لوگو"
+            className="size-16 invert dark:invert-0"
+          />
+        </span>
+        <h1 className="mt-10 text-center text-xl font-semibold md:text-2xll">
+          دانلود نسخه دسکتاپ
+        </h1>
+        <p className="mx-auto mt-4 max-w-5xl text-center text-muted-foreground md:mt-6 md:text-xl">
+          با اپ دسکتاپ، بهره‌وری بی‌درنگ را تجربه کنید. با به‌روزرسانی خودکار و
+          پشتیبانی چندپلتفرمی در چند دقیقه شروع کنید.
+        </p>
+        <div className="mt-10 flex flex-col items-center gap-4 md:mt-20">
+          <FaWindows className="size-14" />
+          <Button className="inline-flex items-center gap-2">
+            دانلود برای <span dir="rtl">Windows</span>
+            <Download />
+          </Button>
+          <div
+            className="flex items-center gap-1.5 rounded-lg border py-1 ps-4 pe-2"
+            dir="rtl"
+          >
+            <span className="font-mono text-sm">
+              winget install Example.App
+            </span>
+            <Button
+              variant="link"
+              size="icon"
+              onClick={handleCopy}
+              className="relative"
+            >
+              <span
+                className={`absolute inset-0 grid place-items-center transition-all duration-250 ${
+                  copied
+                    ? "scale-75 opacity-0 blur-xs"
+                    : "blur-0 scale-100 opacity-100"
+                }`}
+              >
+                <Copy />
+              </span>
+              <span
+                className={`absolute inset-0 grid place-items-center transition-all duration-250 ${
+                  copied
+                    ? "blur-0 scale-100 opacity-100"
+                    : "scale-75 opacity-0 blur-xs"
+                }`}
+              >
+                <Check className="text-emerald-600" />
+              </span>
+            </Button>
+          </div>
+          <a
+            href="#"
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:underline"
+          >
+            روش‌های نصب دیگر
+            <ArrowRight className="size-3 rtl:rotate-180" />
+          </a>
+          <div className="mt-10 flex flex-col items-center gap-2 md:mt-20">
+            <p className="text-sm font-medium text-muted-foreground">
+              همه دانلودهای ویندوز:
+            </p>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" size="sm" dir="rtl">
+                x64
+              </Button>
+              <Button variant="outline" size="sm" dir="rtl">
+                Arm64
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download13 };
diff --git a/blocks/download2.tsx b/blocks/download2.tsx
new file mode 100644
index 0000000..893744f
--- /dev/null
+++ b/blocks/download2.tsx
@@ -0,0 +1,141 @@
+import { Download, Monitor, Smartphone, Tablet } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Download2Props {
+  heading?: string;
+  description?: string;
+  platforms?: {
+    desktop?: {
+      title: string;
+      subtitle: string;
+      description: string;
+      buttonText: string;
+      url: string;
+    };
+    ios?: {
+      title: string;
+      subtitle: string;
+      description: string;
+      url: string;
+    };
+    android?: {
+      title: string;
+      subtitle: string;
+      description: string;
+      url: string;
+    };
+  };
+  className?: string;
+}
+
+const Download2 = ({
+  heading = "دانلود",
+  description =
+    "پلتفرم خود را انتخاب کنید و همین حالا از اپلیکیشن ما استفاده کنید. روی همه دستگاه‌ها و سیستم‌عامل‌های رایج در دسترس است.",
+  platforms = {
+    desktop: {
+      title: "دسکتاپ",
+      subtitle: "PC/Mac",
+      description: "راه‌حل کامل برای دسکتاپ.",
+      buttonText: "دانلود",
+      url: "https://www.ShadcnBlocks",
+    },
+    ios: {
+      title: "گوشی همراه",
+      subtitle: "iOS",
+      description: "طراحی‌شده مخصوص دستگاه‌های موبایل اپل.",
+      url: "#",
+    },
+    android: {
+      title: "گوشی همراه / تبلت",
+      subtitle: "Android",
+      description: "بهینه‌شده برای اکوسیستم اندروید.",
+      url: "#",
+    },
+  },
+  className,
+}: Download2Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-muted/50 py-32", className)}
+    >
+      <div className="container">
+        <div className="mb-20 text-center">
+          <h2 className="mb-6 text-xl font-bold tracking-tight sm:text-2xll lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="mx-auto mb-12 max-w-2xl text-lg text-muted-foreground">
+            {description}
+          </p>
+        </div>
+
+        <div className="mx-auto grid max-w-4xl gap-12 md:grid-cols-3">
+          <div className="text-center">
+            <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-background shadow-sm">
+              <Monitor className="h-10 w-10" />
+            </div>
+            <h3 className="mb-2 text-xl font-semibold" dir="rtl">
+              {platforms.desktop?.subtitle}
+            </h3>
+            <p className="mb-6 text-sm text-muted-foreground">
+              {platforms.desktop?.description}
+            </p>
+            <Button size="lg" asChild>
+              <a
+                href={platforms.desktop?.url}
+                className="inline-flex items-center gap-2"
+              >
+                {platforms.desktop?.buttonText}
+                <Download className="h-4 w-4" />
+              </a>
+            </Button>
+          </div>
+
+          <div className="text-center">
+            <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-background shadow-sm">
+              <Smartphone className="h-10 w-10" />
+            </div>
+            <h3 className="mb-2 text-xl font-semibold" dir="rtl">
+              {platforms.ios?.subtitle}
+            </h3>
+            <p className="mb-6 text-sm text-muted-foreground">
+              {platforms.ios?.description}
+            </p>
+            <a href={platforms.ios?.url} className="mx-auto block w-fit">
+              <img
+                src="/block-media/shadcnblocks/block/badges/appstore.png"
+                alt="دانلود از اپ استور"
+                className="h-10"
+              />
+            </a>
+          </div>
+
+          <div className="text-center">
+            <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-background shadow-sm">
+              <Tablet className="h-10 w-10" />
+            </div>
+            <h3 className="mb-2 text-xl font-semibold" dir="rtl">
+              {platforms.android?.subtitle}
+            </h3>
+            <p className="mb-6 text-sm text-muted-foreground">
+              {platforms.android?.description}
+            </p>
+            <a href={platforms.android?.url} className="mx-auto block w-fit">
+              <img
+                src="/block-media/shadcnblocks/block/badges/googleplay.png"
+                alt="دانلود از گوگل پلی"
+                className="h-10"
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download2 };
diff --git a/blocks/download3.tsx b/blocks/download3.tsx
new file mode 100644
index 0000000..101a8d3
--- /dev/null
+++ b/blocks/download3.tsx
@@ -0,0 +1,127 @@
+import { CheckCircle, Download } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Download3Props {
+  heading?: string;
+  description?: string;
+  version?: string;
+  fileSize?: string;
+  requirements?: string[];
+  downloadButton?: {
+    text: string;
+    url: string;
+    className?: string;
+  };
+  secondaryButton?: {
+    text: string;
+    url: string;
+  };
+  className?: string;
+}
+
+const Download3 = ({
+  heading = "دانلود نسخه دسکتاپ",
+  description =
+    "تجربه کامل دسکتاپ را با اپلیکیشن قدرتمند ما داشته باشید. سازگار با رومیزی، macOS و آزاد.",
+  version = "نسخه ۲۱۰",
+  fileSize = "۱۴۵ مگابایت",
+  requirements = [
+    "رومیزی ۱۰+ / macOS 10.15+ / اوبونتو 18.04+",
+    "حداقل ۴ گیگابایت رم",
+    "۱ گیگابایت فضای خالی دیسک",
+    "اتصال اینترنت لازم است",
+  ],
+  downloadButton = {
+    text: "همین حالا دانلود کنید",
+    url: "#",
+  },
+  secondaryButton = {
+    text: "مشاهده یادداشت انتشار",
+    url: "#",
+  },
+  className,
+}: Download3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-2xl text-center">
+          <div className="mb-12 flex flex-col items-center gap-4">
+            <img
+              src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+              alt="لوگوی اپلیکیشن"
+              className="h-14"
+            />
+            <h2 className="mb-4 text-xl font-bold tracking-tight sm:text-2xll lg:text-2xll">
+              {heading}
+            </h2>
+            <p className="text-lg text-muted-foreground">{description}</p>
+          </div>
+
+          <Card className="p-8 text-start">
+            <div className="mb-6 flex items-center justify-between">
+              <div>
+                <h3 className="text-xl font-semibold">اپلیکیشن دسکتاپ</h3>
+                <p className="text-muted-foreground" dir="rtl">
+                  PC / Mac / Linux
+                </p>
+              </div>
+              <div className="text-end">
+                <p className="text-sm font-medium">{version}</p>
+                <p className="text-sm text-muted-foreground">{fileSize}</p>
+              </div>
+            </div>
+
+            <div className="mb-2">
+              <h4 className="mb-4 font-semibold">نیازمندی‌های سیستم:</h4>
+              <div className="space-y-2">
+                {requirements.map((requirement, index) => (
+                  <div key={index} className="flex items-center gap-3">
+                    <CheckCircle className="h-4 w-4 shrink-0 text-green-500" />
+                    <span
+                      className="text-sm text-muted-foreground"
+                      dir={/[A-Za-z]/.test(requirement) ? "ltr" : undefined}
+                    >
+                      {requirement}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-3 sm:flex-row">
+              <Button size="lg" className="flex-1" asChild>
+                <a
+                  href={downloadButton.url}
+                  className="inline-flex items-center justify-center gap-2"
+                >
+                  {downloadButton.text}
+                  <Download className="h-5 w-5" />
+                </a>
+              </Button>
+              <Button variant="outline" size="lg" className="flex-1" asChild>
+                <a href={secondaryButton.url}>{secondaryButton.text}</a>
+              </Button>
+            </div>
+
+            <div className="mt-4 text-center">
+              <p className="text-sm text-muted-foreground">
+                دانلود رایگان • بدون نیاز به ثبت‌نام • ۳۰ روز آزمایشی رایگان
+              </p>
+            </div>
+          </Card>
+
+          <div className="mt-4 text-center">
+            <p className="text-sm text-muted-foreground">
+              مورد اعتماد بیش از ۵۰٬۰۰۰ متخصص در سراسر جهان
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download3 };
diff --git a/blocks/download4.tsx b/blocks/download4.tsx
new file mode 100644
index 0000000..ec898d0
--- /dev/null
+++ b/blocks/download4.tsx
@@ -0,0 +1,152 @@
+import { Download, Monitor, Shield, Users, Zap } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Download4Props {
+  heading?: string;
+  description?: string;
+  version?: string;
+  fileSize?: string;
+  features?: string[];
+  downloadButton?: {
+    text: string;
+    url: string;
+  };
+  learnMoreButton?: {
+    text: string;
+    url: string;
+  };
+  className?: string;
+}
+
+const Download4 = ({
+  heading = "مجموعه حرفه‌ای دسکتاپ",
+  description =
+    "اپلیکیشن کامل دسکتاپ را با امکانات سطح سازمانی و دسترسی نامحدود دانلود کنید.",
+  version = "نسخه ۳.۲۱",
+  fileSize = "۲۳۰ مگابایت",
+  features = [
+    "تحلیل و گزارش‌گیری پیشرفته",
+    "امنیت و رمزنگاری سطح سازمانی",
+    "مدیریت نامحدود پروژه",
+    "پشتیبانی اولویت‌دار ۲۴/۷",
+  ],
+  downloadButton = {
+    text: "دانلود رایگان",
+    url: "#",
+  },
+  learnMoreButton = {
+    text: "مستندات",
+    url: "#",
+  },
+  className,
+}: Download4Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-muted/30 py-32", className)}
+    >
+      <div className="container">
+        <div className="mx-auto max-w-4xl">
+          <div className="mb-12 text-center">
+            <Badge variant="secondary" className="mb-4">
+              آخرین نسخه
+            </Badge>
+            <h2 className="mb-4 text-xl font-bold tracking-tight sm:text-2xll lg:text-2xll">
+              {heading}
+            </h2>
+            <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+              {description}
+            </p>
+          </div>
+
+          <Card className="border bg-background p-0 shadow-lg">
+            <div className="grid gap-8 p-8 lg:grid-cols-2 lg:items-center">
+              <div>
+                <div className="mb-6 flex items-center gap-4">
+                  <div>
+                    <h3 className="text-xl font-bold">اپلیکیشن دسکتاپ</h3>
+                    <p className="text-muted-foreground" dir="rtl">
+                      Windows • macOS • Linux
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  {features.map((feature, index) => {
+                    const icons = [Shield, Zap, Users, Monitor];
+                    const Icon = icons[index % icons.length];
+                    return (
+                      <div key={index} className="flex items-center gap-3">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted">
+                          <Icon className="h-4 w-4 text-foreground" />
+                        </div>
+                        <span className="text-sm font-medium">{feature}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div className="lg:ps-8">
+                <div className="rounded-2xl border bg-muted/50 p-6">
+                  <div className="mb-6 text-center">
+                    <div className="mb-2 flex items-center justify-center gap-4">
+                      <span className="text-xl font-bold">{version}</span>
+                      <span className="text-muted-foreground">•</span>
+                      <span className="font-medium text-muted-foreground">
+                        {fileSize}
+                      </span>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      آخرین نسخه پایدار
+                    </p>
+                  </div>
+
+                  <div className="space-y-3">
+                    <Button size="lg" className="w-full" asChild>
+                      <a
+                        href={downloadButton.url}
+                        className="inline-flex items-center justify-center gap-2"
+                      >
+                        {downloadButton.text}
+                        <Download className="h-5 w-5" />
+                      </a>
+                    </Button>
+
+                    <Button
+                      variant="outline"
+                      size="lg"
+                      className="w-full"
+                      asChild
+                    >
+                      <a href={learnMoreButton.url}>{learnMoreButton.text}</a>
+                    </Button>
+                  </div>
+
+                  <div className="mt-4 text-center">
+                    <p className="text-xs text-muted-foreground">
+                      بدون ثبت‌نام • دانلود فوری • ۳۰ روز آزمایشی
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          <div className="mt-8 text-center">
+            <p className="text-sm text-muted-foreground">
+              بیش از ۱۰۰٬۰۰۰ تیم از اپلیکیشن دسکتاپ ما استفاده می‌کنند
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download4 };
diff --git a/blocks/download5.tsx b/blocks/download5.tsx
new file mode 100644
index 0000000..ee9ec25
--- /dev/null
+++ b/blocks/download5.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { Download, ExternalLink } from "lucide-react";
+import { useState } from "react";
+import { FaLinux, FaWindows } from "react-icons/fa";
+
+import {
+  Snippet,
+  SnippetCopyButton,
+  SnippetHeader,
+  SnippetTabsContent,
+  SnippetTabsList,
+  SnippetTabsTrigger,
+} from "@/components/kibo-ui/snippet";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { TabsContent } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface Download5Props {
+  className?: string;
+}
+
+const Download5 = ({ className }: Download5Props) => {
+  const [linuxVersion, setLinuxVersion] = useState("stable");
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-16 md:flex-row md:items-start">
+          <div className="rounded-lg border border-border bg-background p-1.5">
+            <div className="rounded-md border border-border bg-primary p-8">
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                alt="لوگو"
+                className="w-32 invert"
+              />
+            </div>
+          </div>
+          <div className="flex flex-1 flex-col gap-4">
+            <div>
+              <div className="flex flex-col gap-1">
+                <h1 className="text-3xl font-medium tracking-tighter">
+                  دانلود نسخه ۲۲۵
+                </h1>
+                <time
+                  dateTime="2025-08-22"
+                  className="text-sm text-muted-foreground"
+                >
+                  ۲۲ آگوست ۲۲۵
+                </time>
+              </div>
+            </div>
+            <div className="grid gap-4 lg:grid-cols-2">
+              <div className="grid gap-2">
+                <div className="flex items-center gap-2">
+                  <FaLinux />
+                  <p className="text-sm" dir="rtl">
+                    Linux
+                  </p>
+                </div>
+                <Snippet
+                  defaultValue="stable"
+                  value={linuxVersion}
+                  onValueChange={setLinuxVersion}
+                >
+                  <SnippetHeader>
+                    <SnippetTabsList>
+                      <SnippetTabsTrigger value="stable">
+                        <span>پایدار</span>
+                      </SnippetTabsTrigger>
+                      <SnippetTabsTrigger value="preview">
+                        <span>پیش‌نمایش</span>
+                      </SnippetTabsTrigger>
+                    </SnippetTabsList>
+                    <SnippetCopyButton
+                      onCopy={() =>
+                        console.log(
+                          'دستور "curl -f https://ری یو آی/install.sh | bash" در حافظه کپی شد',
+                        )
+                      }
+                      onError={() =>
+                        console.error(
+                          'کپی دستور "curl -f https://ری یو آی/install.sh | bash" ناموفق بود',
+                        )
+                      }
+                      value={
+                        linuxVersion === "stable"
+                          ? "curl -f https://ShadcnBlocks/install.sh | bash"
+                          : "curl -f https://ShadcnBlocks/preview.sh | bash"
+                      }
+                    />
+                  </SnippetHeader>
+                  <SnippetTabsContent value="stable" dir="rtl">
+                    curl -f https://ری یو آی/install.sh | bash
+                  </SnippetTabsContent>
+                  <SnippetTabsContent value="preview" dir="rtl">
+                    curl -f https://ری یو آی/preview.sh | bash
+                  </SnippetTabsContent>
+                </Snippet>
+                <p className="text-xs text-muted-foreground">
+                  همچنین می‌توانید بسته را{" "}
+                  <a href="https://ShadcnBlocks" className="underline">
+                    دستی
+                  </a>{" "}
+                  دانلود کنید.
+                </p>
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center gap-2">
+                  <img
+                    src="/block-media/shadcnblocks/block/platforms/macos.png"
+                    alt="macOS"
+                    className="h-4 w-4 grayscale"
+                  />
+                  <p className="text-sm" dir="rtl">
+                    macOS
+                  </p>
+                </div>
+                <Snippet defaultValue="apple-silicon">
+                  <SnippetHeader>
+                    <SnippetTabsList>
+                      <SnippetTabsTrigger value="apple-silicon">
+                        <span dir="rtl">پردازنده جدید</span>
+                      </SnippetTabsTrigger>
+                      <SnippetTabsTrigger value="intel">
+                        <span dir="rtl">پردازنده کلاسیک</span>
+                      </SnippetTabsTrigger>
+                    </SnippetTabsList>
+                  </SnippetHeader>
+                  <TabsContent
+                    value="apple-silicon"
+                    className="mt-0 bg-background text-sm"
+                  >
+                    <button className="flex h-[52px] w-full items-center justify-between px-4 text-start transition-colors hover:bg-accent">
+                      <div className="flex flex-col">
+                        <p className="font-bold">همین حالا دانلود کنید</p>
+                        <p className="text-xs" dir="rtl">
+                          پردازنده جدید
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <p className="text-xs">۱۲ گیگابایت</p>
+                        <Download className="size-4" />
+                      </div>
+                    </button>
+                  </TabsContent>
+                  <TabsContent
+                    value="intel"
+                    className="mt-0 bg-background text-sm"
+                  >
+                    <button className="flex h-[52px] w-full items-center justify-between px-4 text-start transition-colors hover:bg-accent">
+                      <div className="flex flex-col">
+                        <p className="font-bold">همین حالا دانلود کنید</p>
+                        <p className="text-xs" dir="rtl">
+                          پردازنده کلاسیک
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <p className="text-xs">۱۲ گیگابایت</p>
+                        <Download className="size-4" />
+                      </div>
+                    </button>
+                  </TabsContent>
+                </Snippet>
+                <p className="text-xs text-muted-foreground">
+                  نیاز به نسخه{" "}
+                  <span dir="rtl" className="inline-block">
+                    10.15
+                  </span>{" "}
+                  یا جدیدتر
+                </p>
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center gap-2">
+                  <FaWindows />
+                  <p className="text-sm" dir="rtl">
+                    Windows
+                  </p>
+                </div>
+                <Button variant="outline" className="w-full justify-between">
+                  ثبت‌نام در لیست انتظار
+                  <ExternalLink className="size-3.5" />
+                </Button>
+                <p className="text-xs text-muted-foreground">
+                  یا می‌توانید از{" "}
+                  <a href="#" className="underline">
+                    کد منبع
+                  </a>{" "}
+                  بسازید.
+                </p>
+              </div>
+            </div>
+            <div>
+              <Separator />
+              <p className="mt-4 text-xs text-muted-foreground">
+                با دانلود و استفاده از نرم‌افزار ما، با{" "}
+                <a href="#" className="underline">
+                  شرایط و ضوابط
+                </a>{" "}
+                آن موافقت می‌کنید.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download5 };
diff --git a/blocks/download6.tsx b/blocks/download6.tsx
new file mode 100644
index 0000000..884c564
--- /dev/null
+++ b/blocks/download6.tsx
@@ -0,0 +1,148 @@
+import { Download } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const downloads = [
+  {
+    version: "2.0.1",
+    platforms: [
+      {
+        name: "macOS",
+        variant: "Mac Universal",
+        link: "#",
+      },
+      {
+        name: "macOS",
+        variant: "Mac Arm64",
+        link: "#",
+      },
+      {
+        name: "macOS",
+        variant: "Mac x64",
+        link: "#",
+      },
+      {
+        name: "Windows",
+        variant: "Windows 10/11 (Arm64)",
+        link: "#",
+      },
+      {
+        name: "Windows",
+        variant: "Windows 10/11 (x64)",
+        link: "#",
+      },
+      {
+        name: "Linux",
+        variant: "AppImage (Arm64)",
+        link: "#",
+      },
+      {
+        name: "Linux",
+        variant: "AppImage (x64)",
+        link: "#",
+      },
+    ],
+  },
+  {
+    version: "1.2.3",
+    platforms: [
+      {
+        name: "macOS",
+        variant: "Mac Universal",
+        link: "#",
+      },
+      {
+        name: "macOS",
+        variant: "Mac Arm64",
+        link: "#",
+      },
+      {
+        name: "macOS",
+        variant: "Mac x64",
+        link: "#",
+      },
+      {
+        name: "Windows",
+        variant: "Windows 10/11 (Arm64)",
+        link: "#",
+      },
+      {
+        name: "Windows",
+        variant: "Windows 10/11 (x64)",
+        link: "#",
+      },
+      {
+        name: "Linux",
+        variant: "AppImage (Arm64)",
+        link: "#",
+      },
+      {
+        name: "Linux",
+        variant: "AppImage (x64)",
+        link: "#",
+      },
+    ],
+  },
+];
+
+interface Download6Props {
+  className?: string;
+}
+
+const Download6 = ({ className }: Download6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-4">
+          <h1 className="text-xl font-semibold md:text-2xll">دانلود</h1>
+          <p className="text-muted-foreground md:text-lg">
+            سیستم‌عامل خود را انتخاب کنید تا به جدیدترین نسخه دسترسی داشته
+            باشید.
+          </p>
+        </div>
+        <div className="mt-12 space-y-8 md:mt-16">
+          {downloads.map((download, idx) => (
+            <div key={idx}>
+              <h2 className="mb-4 flex items-center gap-2 text-xl font-semibold">
+                <span>
+                  نسخه{" "}
+                  <span dir="rtl" className="inline-block">
+                    {download.version}
+                  </span>
+                </span>
+                {idx === 0 && <Badge variant="outline">آخرین</Badge>}
+              </h2>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                {download.platforms.map((platform, platformIdx) => (
+                  <a
+                    href={platform.link}
+                    key={platformIdx}
+                    className="group flex justify-between rounded-lg border border-border p-4 transition-all duration-200 hover:border-primary hover:bg-muted"
+                  >
+                    <div>
+                      <h3 className="text-lg font-semibold" dir="rtl">
+                        {platform.name}
+                      </h3>
+                      <p
+                        className="font-mono text-sm text-muted-foreground"
+                        dir="rtl"
+                      >
+                        {platform.variant}
+                      </p>
+                    </div>
+                    <div>
+                      <Download className="size-4 transition-transform duration-200 group-hover:translate-y-1" />
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download6 };
diff --git a/blocks/download7.tsx b/blocks/download7.tsx
new file mode 100644
index 0000000..9c5588f
--- /dev/null
+++ b/blocks/download7.tsx
@@ -0,0 +1,69 @@
+import { Iphone } from "@/components/magicui/iphone";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Download7Props {
+  className?: string;
+}
+
+const Download7 = ({ className }: Download7Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container border-b border-border">
+        <div className="flex flex-col items-center gap-10">
+          <Badge variant="outline">شروع کنید</Badge>
+          <h1 className="text-center text-2xll font-bold text-balance md:text-2xll">
+            اپلیکیشن ما را دانلود کنید و از همین امروز گردش کار خود را متحول
+            کنید
+          </h1>
+        </div>
+        <div className="mt-16 flex flex-col items-center justify-center gap-6 sm:flex-row">
+          <a href="#">
+            <img
+              src="/block-media/shadcnblocks/block/badges/appstore.svg"
+              alt="دانلود از اپ استور"
+            />
+          </a>
+          <a href="#">
+            <img
+              src="/block-media/shadcnblocks/block/badges/googleplay.svg"
+              alt="دانلود از گوگل پلی"
+            />
+          </a>
+        </div>
+        <div className="mt-28 flex items-end justify-center gap-4">
+          <div className="order-2 h-[600px] w-full max-w-sm overflow-hidden md:h-[350px] lg:h-[450px] xl:h-[600px]">
+            <div className="relative">
+              <Iphone
+                className="dark"
+                src="/block-media/shadcnblocks/block/placeholder-phone-1.svg"
+              />
+            </div>
+          </div>
+          <div className="order-1 hidden h-[250px] w-full max-w-sm overflow-hidden md:block lg:h-[350px] xl:h-[450px]">
+            <div className="relative">
+              <Iphone
+                className="dark size-full"
+                src="/block-media/shadcnblocks/block/placeholder-phone-2.svg"
+              />
+            </div>
+          </div>
+          <div className="order-3 hidden h-[250px] w-full max-w-sm overflow-hidden md:block lg:h-[350px] xl:h-[450px]">
+            <div className="relative">
+              <Iphone
+                className="dark size-full"
+                src="/block-media/shadcnblocks/block/placeholder-phone-3.svg"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download7 };
diff --git a/blocks/download8.tsx b/blocks/download8.tsx
new file mode 100644
index 0000000..d8f5fc3
--- /dev/null
+++ b/blocks/download8.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Download } from "lucide-react";
+import { FaApple, FaGooglePlay, FaLinux, FaWindows } from "react-icons/fa";
+import { SiDebian } from "react-icons/si";
+
+import { GlareCard } from "@/components/aceternity/glare-card";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const platformLabels: Record<string, { label: string; dir?: "ltr" }> = {
+  ios: { label: "iOS", dir: "ltr" },
+  android: { label: "اندروید" },
+  windows: { label: "Windows", dir: "ltr" },
+  mac: { label: "macOS", dir: "ltr" },
+  linux: { label: "Linux", dir: "ltr" },
+};
+
+type DownloadVariant = {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  dir?: "ltr";
+};
+
+const downloadData: Record<string, DownloadVariant[]> = {
+  ios: [{ icon: FaApple, label: "اپ استور" }],
+  android: [
+    { icon: FaGooglePlay, label: "گوگل پلی" },
+    { icon: Download, label: "APK مستقیم", dir: "ltr" },
+  ],
+  windows: [
+    { icon: FaWindows, label: "نصب‌کننده (.exe)", dir: "ltr" },
+    { icon: Download, label: "نسخه قابل حمل (.zip)", dir: "ltr" },
+  ],
+  mac: [
+    { icon: FaApple, label: "DMG", dir: "ltr" },
+    { icon: Download, label: "Universal (.zip)", dir: "ltr" },
+  ],
+  linux: [
+    { icon: FaLinux, label: "AppImage", dir: "ltr" },
+    { icon: SiDebian, label: "Debian (.deb)", dir: "ltr" },
+    { icon: Download, label: "Tarball (.tar.gz)", dir: "ltr" },
+  ],
+};
+
+interface Download8Props {
+  className?: string;
+}
+
+const Download8 = ({ className }: Download8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-11">
+          <div className="[&>div]:aspect-square [&>div]:size-56 sm:[&>div]:size-64 [&>div>div]:border-border">
+            <GlareCard className="flex flex-col items-center justify-center bg-primary dark:bg-background">
+              <div className="absolute inset-0 flex h-full w-full items-center justify-center p-8">
+                <img
+                  className="object-cover opacity-85 invert"
+                  alt="لوگو"
+                  src="/block-media/shadcnblocks/block/block-1.svg"
+                />
+              </div>
+            </GlareCard>
+          </div>
+          <h1 className="text-xl font-semibold sm:text-2xll" dir="rtl">
+            ری یو آی
+          </h1>
+        </div>
+        <div className="mt-11 flex flex-col items-center justify-center gap-4">
+          <Button size="lg" className="inline-flex items-center gap-2">
+            دانلود (تشخیص خودکار)
+            <Download />
+          </Button>
+          <p className="text-sm text-muted-foreground">
+            آخرین به‌روزرسانی: ۲۳ سپتامبر ۲۲۵
+          </p>
+        </div>
+        <div className="mt-8">
+          <div className="mx-auto max-w-2xl">
+            <div className="divide-y divide-border rounded-lg border border-border">
+              {Object.entries(downloadData).map(([platform, variants]) => {
+                const platformMeta = platformLabels[platform];
+                return (
+                  <div
+                    key={platform}
+                    className="grid grid-cols-2 gap-4 px-4 py-3"
+                  >
+                    <span
+                      className="text-sm font-medium"
+                      dir={platformMeta?.dir}
+                    >
+                      {platformMeta?.label ?? platform}
+                    </span>
+                    <div className="flex flex-col gap-2">
+                      {variants.map((variant, variantIdx) => {
+                        const IconComponent = variant.icon;
+                        return (
+                          <Button
+                            key={variantIdx}
+                            size="sm"
+                            variant="outline"
+                            dir={variant.dir}
+                            className="inline-flex cursor-pointer items-center gap-2"
+                          >
+                            {variant.label}
+                            <IconComponent className="size-4 shrink-0" />
+                          </Button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download8 };
diff --git a/blocks/download9.tsx b/blocks/download9.tsx
new file mode 100644
index 0000000..8bd7ee1
--- /dev/null
+++ b/blocks/download9.tsx
@@ -0,0 +1,130 @@
+import { Check } from "lucide-react";
+import {
+  FaAndroid,
+  FaApple,
+  FaAppStoreIos,
+  FaChrome,
+  FaEdge,
+  FaFirefoxBrowser,
+  FaLinux,
+  FaWindows,
+} from "react-icons/fa";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const platforms = [
+  {
+    name: "Windows",
+    icon: FaWindows,
+    link: "#",
+  },
+  {
+    name: "macOS",
+    icon: FaApple,
+    link: "#",
+  },
+  {
+    name: "Linux",
+    icon: FaLinux,
+    link: "#",
+  },
+  {
+    name: "Android",
+    icon: FaAndroid,
+    link: "#",
+  },
+  {
+    name: "iOS",
+    icon: FaAppStoreIos,
+    link: "#",
+  },
+  {
+    name: "Chrome",
+    icon: FaChrome,
+    link: "#",
+  },
+  {
+    name: "Firefox",
+    icon: FaFirefoxBrowser,
+    link: "#",
+  },
+  {
+    name: "Edge",
+    icon: FaEdge,
+    link: "#",
+  },
+];
+
+interface Download9Props {
+  className?: string;
+}
+
+const Download9 = ({ className }: Download9Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-10 lg:grid-cols-2">
+          <div className="flex flex-col gap-6">
+            <h1 className="text-xl font-semibold">دانلود نرم‌افزار</h1>
+            <p className="max-w-md text-muted-foreground">
+              طرح‌های حرفه‌ای بسازید، بدون درز همکاری کنید و ایده‌هایتان را روی
+              هر دستگاهی زنده کنید. با پلتفرم طراحی بصری ما در چند ثانیه طراحی
+              را شروع کنید.
+            </p>
+            <ul className="space-y-2">
+              <li className="flex items-center gap-2">
+                <Check className="size-4 shrink-0" />
+                با ابزارهای برداری پیشرفته، طرح‌های حرفه‌ای بسازید
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="size-4 shrink-0" />
+                همکاری بی‌درنگ با تیم طراحی
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="size-4 shrink-0" />
+                خروجی چندفرمتی با انتشار یک‌کلیکی
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="size-4 shrink-0" />
+                فضای ابری نامحدود برای همه پروژه‌ها
+              </li>
+            </ul>
+            <div className="flex w-full flex-col items-center gap-2 sm:flex-row">
+              <Button size="lg" className="w-full sm:w-auto">
+                خرید فوری
+              </Button>
+              <Button variant="outline" size="lg" className="w-full sm:w-auto">
+                دانلود
+              </Button>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="پیش‌نمایش اپلیکیشن"
+            className="w-full max-w-lg rounded-lg border border-border"
+          />
+        </div>
+        <div className="mt-16 flex items-center gap-10 md:mt-20 md:gap-20">
+          <hr className="h-px w-full bg-muted" />
+          <span className="text-sm whitespace-nowrap">در دسترس روی</span>
+          <hr className="h-px w-full bg-muted" />
+        </div>
+        <div className="mt-8 flex flex-wrap items-center justify-center gap-5 md:mt-10">
+          {platforms.map((platform, idx) => (
+            <a
+              href={platform.link}
+              key={idx}
+              className="flex w-20 flex-col items-center gap-2 rounded-lg p-2 text-sm hover:bg-muted"
+            >
+              <platform.icon className="size-5" />
+              <span dir="rtl">{platform.name}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Download9 };
diff --git a/blocks/ecommerce-footer1.tsx b/blocks/ecommerce-footer1.tsx
new file mode 100644
index 0000000..cb8e503
--- /dev/null
+++ b/blocks/ecommerce-footer1.tsx
@@ -0,0 +1,401 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { LucideIcon } from "lucide-react";
+import { Clock, MapPin, Phone } from "lucide-react";
+import { Fragment } from "react";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldError } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type NewsletterData = {
+  title?: string;
+  description?: string;
+};
+
+type NewsletterFormProps = NewsletterData;
+
+type FooterLink = {
+  text: string;
+  link: string;
+};
+
+type FooterLinksSectionData = {
+  title: string;
+  items: FooterLink[];
+};
+
+interface FooterLinksSectionProps {
+  sections: FooterLinksSectionData[];
+}
+
+type SocialIcon = {
+  title: string;
+  src: string;
+  className?: string;
+};
+
+type SocialLink = {
+  link: string;
+  icon: SocialIcon;
+};
+
+type ContactLink = {
+  icon: LucideIcon;
+  text: string;
+  type: LinkTypes;
+  link?: string;
+};
+
+type ContactLinks = {
+  contactDetails: ContactLink[];
+  socialMedia: SocialLink[];
+};
+
+interface ContactSectionProps {
+  links: ContactLinks;
+}
+
+interface EcommerceFooter1Props {
+  newsletter: NewsletterData;
+  footerLinks: FooterLinksSectionData[];
+  contactLinks: ContactLinks;
+  className?: string;
+}
+
+const LINK_TYPES = {
+  NO_LINK: "NO_LINK",
+  PHONE_LINK: "PHONE_LINK",
+  EMAIL_LINK: "EMAIL_LINK",
+};
+
+type LinkTypes = keyof typeof LINK_TYPES;
+
+const NEWSLETTER_DATA = {
+  title: "خبرنامه",
+  description:
+    "در خبرنامه ما عضو شوید و از پیشنهادهای ویژه، نکات فنی، معرفی محصولات جدید و دسترسی زودهنگام به جدیدترین لوازم الکترونیکی باخبر شوید.",
+};
+
+const FOOTER_LINKS: FooterLinksSectionData[] = [
+  {
+    title: "اطلاعات",
+    items: [
+      {
+        text: "شرایط و ضوابط",
+        link: "#",
+      },
+      {
+        text: "حریم خصوصی",
+        link: "#",
+      },
+      {
+        text: "سیاست ضمانت",
+        link: "#",
+      },
+      {
+        text: "شرایط استفاده",
+        link: "#",
+      },
+    ],
+  },
+  {
+    title: "مجموعه‌ها",
+    items: [
+      {
+        text: "تازه‌ها",
+        link: "#",
+      },
+      {
+        text: "پرفروش‌ترین‌ها",
+        link: "#",
+      },
+      {
+        text: "پیشنهادهای فصلی",
+        link: "#",
+      },
+      {
+        text: "محصولات ضروری",
+        link: "#",
+      },
+    ],
+  },
+];
+
+const SOCIAL_ICONS = {
+  facebook: {
+    title: "Facebook",
+    src: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+  },
+  x: {
+    title: "X",
+    src: "/block-media/shadcnblocks/block/logos/x.svg",
+    className: "dark:invert",
+  },
+  instagram: {
+    title: "Instagram",
+    src: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+};
+
+const CONTACT_LINKS: ContactLinks = {
+  contactDetails: [
+    {
+      icon: MapPin,
+      text: "support@store.com",
+      link: "support@store.com",
+      type: LINK_TYPES.EMAIL_LINK as LinkTypes,
+    },
+    {
+      icon: Phone,
+      text: "+12345678910",
+      link: "+12345678910",
+      type: LINK_TYPES.PHONE_LINK as LinkTypes,
+    },
+    {
+      icon: Clock,
+      text: "شنبه تا پنج‌شنبه، ۹ صبح تا ۹ شب",
+      type: LINK_TYPES.NO_LINK as LinkTypes,
+    },
+  ],
+  socialMedia: [
+    {
+      icon: SOCIAL_ICONS.facebook,
+      link: "#",
+    },
+    {
+      icon: SOCIAL_ICONS.x,
+      link: "#",
+    },
+    {
+      icon: SOCIAL_ICONS.instagram,
+      link: "#",
+    },
+  ],
+};
+
+const EcommerceFooter1 = ({
+  newsletter = NEWSLETTER_DATA,
+  footerLinks = FOOTER_LINKS,
+  contactLinks = CONTACT_LINKS,
+  className,
+}: EcommerceFooter1Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("pt-8 pb-8 xl:pt-12", className)}
+    >
+      <div className="container space-y-10">
+        <div className="grid grid-cols-1 gap-x-16 gap-y-8 md:grid-cols-2 xl:grid-cols-4">
+          <div>
+            <NewsletterSection {...newsletter} />
+          </div>
+          <FooterLinksSection sections={footerLinks} />
+          <ContactSection links={contactLinks} />
+        </div>
+        <div>
+          <div className="flex items-center justify-between gap-4 md:gap-12.5">
+            <Separator className="flex-1" />
+            <div className="basis-10 md:basis-10">
+              <a href="https://ShadcnBlocks">
+                <img
+                  className="block size-10 dark:hidden"
+                  src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                  alt="لوگو"
+                />
+                <img
+                  className="hidden size-10 dark:block"
+                  src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon-white.svg"
+                  alt="لوگو"
+                />
+              </a>
+            </div>
+            <Separator className="flex-1" />
+          </div>
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <p className="text-muted-foreground max-md:text-xs">
+            © ۲۲۶ ری یو آی. تمامی حقوق محفوظ است.
+          </p>
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <img
+                src="/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg"
+                alt="Visa"
+                className="h-6"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg"
+                alt="Mastercard"
+                className="h-6"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/ecommerce/payment-methods/amex.svg"
+                alt="کارت ویژه"
+                className="h-6"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg"
+                alt="PayPal"
+                className="h-6"
+              />
+            </div>
+            <Select defaultValue="farsi">
+              <SelectTrigger className="h-8 w-24 text-xs">
+                <SelectValue placeholder="انتخاب زبان..." />
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectGroup>
+                  <SelectItem value="farsi">فارسی</SelectItem>
+                  <SelectItem value="english">انگلیسی</SelectItem>
+                  <SelectItem value="arabic">العربية</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const newsletterFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+});
+
+type newsletterFormType = z.infer<typeof newsletterFormSchema>;
+
+const NewsletterSection = ({ title, description }: NewsletterFormProps) => {
+  const form = useForm({
+    resolver: zodResolver(newsletterFormSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit = (data: newsletterFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h3 className="font-serif text-3xl leading-none font-medium">
+          {title}
+        </h3>
+        <p className="leading-normal font-light">{description}</p>
+      </div>
+      <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
+        <Controller
+          name="email"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <Input
+                {...field}
+                aria-invalid={fieldState.invalid}
+                placeholder="آدرس ایمیل"
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <Button className="w-full">عضویت</Button>
+      </form>
+    </div>
+  );
+};
+
+const FooterLinksSection = ({ sections }: FooterLinksSectionProps) => {
+  return (
+    <Fragment>
+      {sections.map(({ title, items }) => (
+        <div key={crypto.randomUUID()}>
+          <h2 className="mb-6 text-sm leading-tight font-medium text-muted-foreground uppercase">
+            {title}
+          </h2>
+          <ul className="space-y-3">
+            {items.map(({ text, link }) => (
+              <li key={crypto.randomUUID()}>
+                <a href={link} className="underline-offset-4 hover:underline">
+                  {text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </Fragment>
+  );
+};
+
+const ContactSection = ({ links }: ContactSectionProps) => {
+  const { socialMedia, contactDetails } = links;
+
+  return (
+    <div>
+      <h2 className="mb-6 text-sm leading-tight font-medium text-muted-foreground uppercase">
+        تماس با ما
+      </h2>
+      <div className="space-y-6">
+        <ul className="space-y-3">
+          {contactDetails.map((item) => (
+            <li className="flex items-center gap-3" key={crypto.randomUUID()}>
+              <item.icon className="size-4 shrink-0 basis-4" />
+              <div className="flex-1">
+                {item.type === LINK_TYPES.NO_LINK ? (
+                  <p>{item.text}</p>
+                ) : (
+                  <a
+                    href={
+                      item.type === LINK_TYPES.EMAIL_LINK
+                        ? `mailto:${item.link}`
+                        : `tel:${item.link}`
+                    }
+                    className="underline-offset-4 hover:underline"
+                  >
+                    {item.text}
+                  </a>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+        <ul className="flex flex-wrap gap-3">
+          {socialMedia.map(({ icon, link }) => (
+            <li key={crypto.randomUUID()}>
+              <Button size="icon-lg" variant="outline" asChild>
+                <a href={link}>
+                  <img
+                    className={cn("size-5", icon.className)}
+                    alt={icon.title}
+                    src={icon.src}
+                  />
+                </a>
+              </Button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export { EcommerceFooter1 };
diff --git a/blocks/ecommerce-footer18.tsx b/blocks/ecommerce-footer18.tsx
new file mode 100644
index 0000000..92c0190
--- /dev/null
+++ b/blocks/ecommerce-footer18.tsx
@@ -0,0 +1,554 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Mail } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError } from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type FooterLink = {
+  title?: string;
+  text: string;
+  href?: string;
+};
+
+type SocialIcon = {
+  title: string;
+  light: string;
+  dark: string;
+};
+
+type SocialLink = {
+  link: string;
+  icon: SocialIcon;
+};
+
+type FooterLinksSection = {
+  title: string;
+  id: string;
+  links?: FooterLink[];
+  items?: FooterLink[];
+  socialMediaLinks?: SocialLink[];
+};
+
+type ContactForm = {
+  title?: string;
+  text?: string;
+};
+
+type HomeLink = {
+  logo: {
+    light: string;
+    dark: string;
+  };
+  link: string;
+};
+
+type FooterData = {
+  sections: FooterLinksSection[];
+  contactForm: ContactForm;
+  submenu?: FooterLink[];
+  paymentMethods?: string[];
+  copyrightCaption?: string;
+  homeLink: HomeLink;
+  image: string;
+};
+
+type ContactFormProps = ContactForm;
+
+interface FooterLinksProps {
+  links?: FooterLink[];
+}
+
+interface FooterContactInfoProps {
+  items?: FooterLink[];
+  socialMediaLinks?: SocialLink[];
+}
+
+interface SocialMediaSectionProps {
+  links?: SocialLink[];
+}
+
+interface EcommerceFooter18Props extends FooterData {
+  className?: string;
+}
+
+const SOCIAL_ICONS = {
+  facebook: {
+    title: "Facebook",
+    light:
+      "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+  },
+  x: {
+    title: "X",
+    light:
+      "/block-media/shadcnblocks/block/logos/x.svg",
+    dark: "/block-media/shadcnblocks/block/logos/x.svg",
+  },
+  instagram: {
+    title: "Instagram",
+    light:
+      "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+} as const;
+
+const FOOTER_DATA: FooterData = {
+  homeLink: {
+    logo: {
+      light:
+        "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
+      dark: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark-white.svg",
+    },
+    link: "#",
+  },
+  sections: [
+    {
+      title: "تماس با ما",
+      id: "contact_us",
+      items: [
+        {
+          title: "پشتیبانی مشتریان",
+          text: "شنبه تا پنج‌شنبه، ۹ صبح تا ۷ شب",
+        },
+        {
+          title: "با ما تماس بگیرید",
+          text: "+1 855-987-4420 (رایگان)",
+          href: "tel:+18559874420",
+        },
+        {
+          title: "به ما ایمیل بزنید",
+          text: "support@lumiskin.co",
+          href: "mailto:support@lumiskin.co",
+        },
+        {
+          title: "آدرس",
+          text: "خیابان گلستان، پلاک ۱۲۵، واحد ۲۱۰، تهران",
+        },
+      ],
+      socialMediaLinks: [
+        {
+          icon: SOCIAL_ICONS.facebook,
+          link: "#",
+        },
+        {
+          icon: SOCIAL_ICONS.x,
+          link: "#",
+        },
+        {
+          icon: SOCIAL_ICONS.instagram,
+          link: "#",
+        },
+      ],
+    },
+    {
+      title: "فروشگاه",
+      id: "shop",
+      links: [
+        {
+          text: "محصولات جدید",
+          href: "#",
+        },
+        {
+          text: "پرفروش‌ترین‌ها",
+          href: "#",
+        },
+        {
+          text: "روتین پوست",
+          href: "#",
+        },
+        {
+          text: "هدیه و ست‌ها",
+          href: "#",
+        },
+      ],
+    },
+    {
+      title: "پشتیبانی",
+      id: "support",
+      links: [
+        {
+          text: "تماس با ما",
+          href: "#",
+        },
+        {
+          text: "سؤالات متداول",
+          href: "#",
+        },
+        {
+          text: "پیگیری سفارش",
+          href: "#",
+        },
+        {
+          text: "مرجوعی و تعویض",
+          href: "#",
+        },
+      ],
+    },
+    {
+      title: "درباره ما",
+      id: "about",
+      links: [
+        {
+          text: "درباره ما",
+          href: "#",
+        },
+        {
+          text: "مواد تشکیل‌دهنده",
+          href: "#",
+        },
+        {
+          text: "پایداری",
+          href: "#",
+        },
+        {
+          text: "مطبوعات",
+          href: "#",
+        },
+      ],
+    },
+  ],
+  contactForm: {
+    title: "جایی که مد روز با راحتی پیوند می‌خورد",
+    text: "لباس‌هایی طراحی می‌کنیم که به زنان کمک می‌کند با جزئیات دقیق، برش‌های مناسب و پایه‌های باکیفیت، شخصیت خود را بیان کنند.",
+  },
+  submenu: [
+    {
+      text: "سیاست مرجوعی",
+      href: "#",
+    },
+    {
+      text: "شرایط استفاده",
+      href: "#",
+    },
+    {
+      text: "حریم خصوصی",
+      href: "#",
+    },
+  ],
+  paymentMethods: [
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/amazonpay.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/applepay.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/discover.svg",
+  ],
+  copyrightCaption: "© ۲۲۶ ساخته‌شده با ❤️ توسط ShadcnBlocks",
+  image:
+    "/block-media/shadcnblocks/block/ecommerce/promotional/Neatly-Organized-Clothing-Selection-2.png",
+};
+
+const EcommerceFooter18 = ({
+  className,
+  sections = FOOTER_DATA.sections,
+  contactForm = FOOTER_DATA.contactForm,
+  homeLink = FOOTER_DATA.homeLink,
+  paymentMethods = FOOTER_DATA.paymentMethods,
+  image = FOOTER_DATA.image,
+  copyrightCaption = FOOTER_DATA.copyrightCaption,
+  submenu = FOOTER_DATA.submenu,
+}: EcommerceFooter18Props) => {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const allAccordionIds = sections.map(({ id }) => id);
+
+  const [activeAccordionItem, setActiveAccordionItem] =
+    useState<string[]>(allAccordionIds);
+
+  const handleOnChange = (ids: string[]) => {
+    setActiveAccordionItem(ids);
+  };
+
+  return (
+    <footer dir="rtl" lang="fa" className={cn("relative", className)}>
+      <div className="relative z-20 bg-background">
+        <div className="container">
+          <div className="pt-9 pb-12.5">
+            <div className="grid-cols-2 space-y-5 lg:grid lg:gap-x-5 lg:gap-y-5 xl:grid-cols-7">
+              <Accordion
+                value={activeAccordionItem}
+                disabled={isDesktop}
+                type="multiple"
+                onValueChange={handleOnChange}
+                className="lg:contents"
+              >
+                {sections.map(
+                  ({ title, links, items, id, socialMediaLinks }) => (
+                    <AccordionItem
+                      value={id}
+                      key={id}
+                      className="border-none xl:first:col-span-2"
+                    >
+                      <AccordionTrigger className="text-lg leading-snug font-semibold hover:no-underline disabled:opacity-100 lg:pt-0 lg:text-xl lg:[&>svg]:hidden">
+                        {title}
+                      </AccordionTrigger>
+                      <AccordionContent>
+                        <FooterLinks links={links} />
+                        <FooterContactInfo
+                          items={items}
+                          socialMediaLinks={socialMediaLinks}
+                        />
+                      </AccordionContent>
+                    </AccordionItem>
+                  ),
+                )}
+              </Accordion>
+              <div className="xl:col-span-2">
+                <ContactFormSection
+                  title={contactForm.title}
+                  text={contactForm.text}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="grid grid-cols-1 items-center justify-center gap-4 border-y py-4 lg:grid-cols-3">
+            <div className="max-lg:justify-self-center">
+              <Select defaultValue="farsi">
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="انتخاب زبان" />
+                </SelectTrigger>
+                <SelectContent align="start">
+                  <SelectGroup>
+                    <SelectItem value="farsi">فارسی</SelectItem>
+                    <SelectItem value="english">انگلیسی</SelectItem>
+                    <SelectItem value="arabic">العربية</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="justify-self-center">
+              <a href={homeLink.link} className="inline-block w-full max-w-55">
+                <img
+                  className="w-full dark:hidden"
+                  src={homeLink.logo.light}
+                  alt="لوگو"
+                />
+                <img
+                  className="hidden w-full dark:inline-block"
+                  src={homeLink.logo.dark}
+                  alt="لوگو"
+                />
+              </a>
+            </div>
+            <div className="lg:justify-self-end">
+              <PaymentMethods cards={paymentMethods} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="relative z-20 rounded-b-xl bg-background py-4">
+        <div className="container flex flex-col items-center justify-between gap-2 lg:flex-row">
+          <p className="text-xs max-lg:text-center">{copyrightCaption}</p>
+          <FooterSubMenu links={submenu} />
+        </div>
+      </div>
+      <div className="sticky bottom-0 -mt-2.5 h-30 overflow-hidden lg:aspect-[8.458] lg:h-auto">
+        <img
+          src={image}
+          alt="تصویر فوتر"
+          className="block size-full object-cover object-center"
+        />
+      </div>
+    </footer>
+  );
+};
+
+const newsletterFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+});
+
+type newsletterFormType = z.infer<typeof newsletterFormSchema>;
+
+const ContactFormSection = ({ title, text }: ContactFormProps) => {
+  const form = useForm({
+    resolver: zodResolver(newsletterFormSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit = (data: newsletterFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-3">
+        <h3 className="text-lg leading-snug font-semibold lg:text-xl">
+          {title}
+        </h3>
+        <p className="text-sm leading-relaxed">{text}</p>
+      </div>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="space-y-4">
+          <Controller
+            name="email"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <InputGroup>
+                  <InputGroupInput
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="آدرس ایمیل"
+                  />
+                  <InputGroupAddon>
+                    <Mail />
+                  </InputGroupAddon>
+                </InputGroup>
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <Button variant="secondary">عضویت</Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const FooterLinks = ({ links }: FooterLinksProps) => {
+  if (!links) return;
+
+  return (
+    <ul className="space-y-1.5">
+      {links.map(({ href, text }, index) => (
+        <li key={index}>
+          <a
+            href={href}
+            className="text-sm underline-offset-2 transition-all hover:underline hover:opacity-80"
+          >
+            {text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const FooterContactInfo = ({
+  items,
+  socialMediaLinks,
+}: FooterContactInfoProps) => {
+  if (!items) return;
+
+  return (
+    <div className="space-y-4">
+      <dl className="space-y-2.5 sm:space-y-1.5">
+        {items.map(({ text, href, title }, index) => (
+          <div
+            className="flex flex-col items-start gap-2 text-sm sm:flex-row"
+            key={index}
+          >
+            <dt>{title}:</dt>
+            {href ? (
+              <dd>
+                <a
+                  className="break-all text-muted-foreground underline"
+                  href={href}
+                >
+                  {text}
+                </a>
+              </dd>
+            ) : (
+              <dd>{text}</dd>
+            )}
+          </div>
+        ))}
+      </dl>
+      <SocialMediaSection links={socialMediaLinks} />
+    </div>
+  );
+};
+
+const PaymentMethods = ({ cards }: { cards?: string[] }) => {
+  if (!cards) return;
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs font-light max-lg:text-center">روش‌های پرداخت</p>
+      <ul className="flex flex-wrap items-center justify-center gap-3">
+        {cards.map((card) => (
+          <li key={crypto.randomUUID()}>
+            <img className="w-8" src={card} alt="روش پرداخت" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+const SocialMediaSection = ({ links }: SocialMediaSectionProps) => {
+  if (!links) return;
+
+  return (
+    <ul className="flex flex-wrap items-center gap-0.5">
+      {links.map(({ icon, link }) => (
+        <li key={crypto.randomUUID()}>
+          <Button size="icon-sm" asChild className="rounded-full">
+            <a href={link}>
+              <img
+                className="size-3.5 dark:hidden"
+                alt={icon.title}
+                src={icon.light}
+              />
+              <img
+                className="hidden size-3.5 dark:block"
+                alt={icon.title}
+                src={icon.dark}
+              />
+            </a>
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const FooterSubMenu = ({ links }: { links?: FooterLink[] }) => {
+  if (!links) return;
+
+  return (
+    <ul className="flex flex-wrap gap-x-5 gap-y-1 max-lg:justify-center">
+      {links.map(({ href, text }) => (
+        <li key={crypto.randomUUID()}>
+          <a href={href} className="text-xs">
+            {text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export { EcommerceFooter18 };
diff --git a/blocks/ecommerce-footer19.tsx b/blocks/ecommerce-footer19.tsx
new file mode 100644
index 0000000..8f4a54a
--- /dev/null
+++ b/blocks/ecommerce-footer19.tsx
@@ -0,0 +1,580 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { LucideIcon } from "lucide-react";
+import { MapPin, MessageSquareMore, Phone, Plus, Send } from "lucide-react";
+import { Fragment } from "react";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Field, FieldError } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type NewsletterData = {
+  title?: string;
+  description?: string;
+};
+
+type InfoItem = {
+  text: string;
+  title: string;
+  link?: string;
+  icon: LucideIcon;
+};
+
+type FooterLink = {
+  text: string;
+  link?: string;
+};
+
+type SocialIcon = {
+  title: string;
+  light: string;
+  dark: string;
+};
+
+type SocialLink = {
+  link: string;
+  icon: SocialIcon;
+};
+
+type FooterLinksSection = {
+  title: string;
+  id: string;
+  items: FooterLink[];
+};
+
+type FooterDetailsType = {
+  image: {
+    src: string;
+    alt: string;
+  };
+  homeLink: {
+    logo: {
+      light: string;
+      dark: string;
+    };
+    link: string;
+  };
+  title: string;
+  description: string;
+};
+
+type NewsletterFormProps = NewsletterData;
+
+interface EcommerceFooter19Props {
+  newsletter: NewsletterData;
+  infoSectionList: InfoItem[];
+  footerLinks: FooterLinksSection[];
+  footerDetails: FooterDetailsType;
+  paymentMethods: string[];
+  socialLinks: SocialLink[];
+  submenuLinks: {
+    text: string;
+    link: string;
+  }[];
+  className?: string;
+}
+
+interface FooterLinksSectionProps {
+  sections: FooterLinksSection[];
+}
+
+interface SocialMediaSectionProps {
+  links: SocialLink[];
+}
+
+const NEWSLETTER_DATA: NewsletterData = {
+  title: "خبرنامه",
+  description:
+    "در خبرنامه ما عضو شوید و نکات مراقبت از پوست، روتین‌های پوستی، پیشنهادهای ویژه و دسترسی زودهنگام به جدیدترین محصولات زیبایی باخبر شوید.",
+};
+
+const INFO_SECTION_DATA: InfoItem[] = [
+  {
+    title: "پشتیبانی مشتریان",
+    text: "شنبه تا پنج‌شنبه، ۹ صبح تا ۷ شب",
+    icon: MessageSquareMore,
+  },
+  {
+    title: "با ما تماس بگیرید",
+    text: "+1 855-987-4420 (رایگان)",
+    link: "tel:+18559874420",
+    icon: Phone,
+  },
+  {
+    title: "به ما ایمیل بزنید",
+    text: "support@lumiskin.co",
+    link: "mailto:support@lumiskin.co",
+    icon: Send,
+  },
+  {
+    title: "آدرس",
+    text: "خیابان گلستان، پلاک ۱۲۵، واحد ۲۱۰، تهران",
+    icon: MapPin,
+  },
+];
+
+const FOOTER_LINKS: FooterLinksSection[] = [
+  {
+    title: "فروشگاه",
+    id: "shop",
+    items: [
+      {
+        text: "محصولات جدید",
+        link: "#",
+      },
+      {
+        text: "پرفروش‌ترین‌ها",
+        link: "#",
+      },
+      {
+        text: "روتین پوست",
+        link: "#",
+      },
+      {
+        text: "هدیه و ست‌ها",
+        link: "#",
+      },
+    ],
+  },
+  {
+    title: "پشتیبانی",
+    id: "support",
+    items: [
+      {
+        text: "تماس با ما",
+        link: "#",
+      },
+      {
+        text: "سؤالات متداول",
+        link: "#",
+      },
+      {
+        text: "پیگیری سفارش",
+        link: "#",
+      },
+      {
+        text: "مرجوعی و تعویض",
+        link: "#",
+      },
+    ],
+  },
+  {
+    title: "درباره ما",
+    id: "about",
+    items: [
+      {
+        text: "درباره ما",
+        link: "#",
+      },
+      {
+        text: "مواد تشکیل‌دهنده",
+        link: "#",
+      },
+      {
+        text: "پایداری",
+        link: "#",
+      },
+      {
+        text: "مطبوعات",
+        link: "#",
+      },
+    ],
+  },
+];
+
+const FOOTER_DETAILS = {
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/promotional/Luxurious-Cosmetic-Display-2.png",
+    alt: "نمایش لوازم آرایشی",
+  },
+  homeLink: {
+    logo: {
+      light:
+        "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
+      dark: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark-white.svg",
+    },
+    link: "#",
+  },
+  title: "جایی که مد روز با راحتی پیوند می‌خورد",
+  description:
+    "لباس‌هایی طراحی می‌کنیم که به زنان کمک می‌کند با جزئیات دقیق، برش‌های مناسب و پایه‌های باکیفیت، شخصیت خود را بیان کنند.",
+};
+
+const PAYMENT_METHODS = [
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/amazonpay.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/applepay.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/discover.svg",
+];
+
+const SOCIAL_ICONS = {
+  facebook: {
+    title: "Facebook",
+    light:
+      "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+  },
+  x: {
+    title: "X",
+    light:
+      "/block-media/shadcnblocks/block/logos/x.svg",
+    dark: "/block-media/shadcnblocks/block/logos/x.svg",
+  },
+  instagram: {
+    title: "Instagram",
+    light:
+      "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+};
+
+const SOCIAL_MEDIA_LINKS = [
+  {
+    icon: SOCIAL_ICONS.facebook,
+    link: "#",
+  },
+  {
+    icon: SOCIAL_ICONS.x,
+    link: "#",
+  },
+  {
+    icon: SOCIAL_ICONS.instagram,
+    link: "#",
+  },
+];
+
+const SUBMENU = [
+  {
+    text: "سیاست ارسال",
+    link: "#",
+  },
+  {
+    text: "سیاست مرجوعی",
+    link: "#",
+  },
+  {
+    text: "شرایط استفاده",
+    link: "#",
+  },
+  {
+    text: "حریم خصوصی",
+    link: "#",
+  },
+];
+
+const EcommerceFooter19 = ({
+  newsletter = NEWSLETTER_DATA,
+  infoSectionList = INFO_SECTION_DATA,
+  footerLinks = FOOTER_LINKS,
+  footerDetails = FOOTER_DETAILS,
+  paymentMethods = PAYMENT_METHODS,
+  socialLinks = SOCIAL_MEDIA_LINKS,
+  submenuLinks = SUBMENU,
+  className,
+}: EcommerceFooter19Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("pt-12.5 pb-30", className)}>
+      <div className="container space-y-10">
+        <div className="grid items-center gap-x-20 gap-y-5 lg:grid-cols-2">
+          <div>
+            <AspectRatio ratio={2} className="overflow-hidden rounded-2xl">
+              <img
+                className="block size-full object-cover object-center"
+                src={footerDetails.image.src}
+                alt={footerDetails.image.alt}
+              />
+            </AspectRatio>
+          </div>
+          <div>
+            <NewsletterSection {...newsletter} />
+          </div>
+        </div>
+        <InfoSection list={infoSectionList} />
+        <div className="grid grid-cols-1 gap-7.5 lg:grid-cols-5 xl:grid-cols-2">
+          <div className="space-y-5 lg:max-xl:col-span-2">
+            <a
+              href={footerDetails.homeLink.link}
+              className="inline-block w-full max-w-80"
+            >
+              <img
+                className="w-full dark:hidden"
+                src={footerDetails.homeLink.logo.light}
+                alt="لوگو"
+              />
+              <img
+                className="hidden w-full dark:inline-block"
+                src={footerDetails.homeLink.logo.dark}
+                alt="لوگو"
+              />
+            </a>
+            <p className="max-w-100 text-sm leading-relaxed text-muted-foreground">
+              {footerDetails.description}
+            </p>
+          </div>
+          <div className="lg:max-xl:col-span-3">
+            <FooterLinksSection sections={footerLinks} />
+          </div>
+        </div>
+        <div className="flex flex-wrap justify-between gap-6">
+          <div className="space-y-5">
+            <Select defaultValue="farsi">
+              <SelectTrigger className="w-28">
+                <SelectValue placeholder="انتخاب زبان..." />
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectGroup>
+                  <SelectItem value="farsi">فارسی</SelectItem>
+                  <SelectItem value="english">انگلیسی</SelectItem>
+                  <SelectItem value="arabic">العربية</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <PaymentMethods cards={paymentMethods} />
+          </div>
+          <div>
+            <SocialMediaSection links={socialLinks} />
+          </div>
+        </div>
+        <div className="flex flex-wrap justify-between gap-6">
+          <p className="text-sm">© ۲۲۶ ساخته‌شده با ❤️ توسط ری یو آی</p>
+          <FooterSubMenu links={submenuLinks} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const newsletterFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+});
+
+type newsletterFormType = z.infer<typeof newsletterFormSchema>;
+
+const NewsletterSection = ({ title, description }: NewsletterFormProps) => {
+  const form = useForm({
+    resolver: zodResolver(newsletterFormSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit = (data: newsletterFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-3">
+        <h3 className="text-xl leading-snug font-semibold">{title}</h3>
+        <p className="leading-normal">{description}</p>
+      </div>
+      <div className="space-y-4">
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="flex items-start gap-4">
+            <Controller
+              name="email"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field className="flex-1" data-invalid={fieldState.invalid}>
+                  <Input
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="آدرس ایمیل"
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            <Button>عضویت</Button>
+          </div>
+        </form>
+        <p className="text-sm text-muted-foreground">
+          با عضویت، با{" "}
+          <a className="underline underline-offset-2" href="#">
+            شرایط استفاده
+          </a>{" "}
+          و{" "}
+          <a className="underline underline-offset-2" href="#">
+            حریم خصوصی
+          </a>{" "}
+          موافقت می‌کنید.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const InfoSection = ({ list }: { list: InfoItem[] }) => {
+  if (!list) return;
+
+  return (
+    <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
+      {list.map(({ icon: Icon, title, link, text }) => (
+        <Card className="rounded-lg px-5 py-6" key={crypto.randomUUID()}>
+          <CardContent className="flex items-start gap-3 p-0">
+            <div className="shrink-0 basis-7">
+              <Icon />
+            </div>
+            <div className="flex-1 space-y-1">
+              <div className="text-sm leading-relaxed">
+                <CardTitle className="text-base leading-relaxed font-semibold">
+                  {title}
+                </CardTitle>
+                {link ? (
+                  <a
+                    className="break-all text-muted-foreground underline"
+                    href={link}
+                  >
+                    {text}
+                  </a>
+                ) : (
+                  <p className="text-muted-foreground">{text}</p>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+const FooterLinksSection = ({ sections }: FooterLinksSectionProps) => {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+  if (!sections) return;
+
+  const allAccordionIds = sections.map(({ id }) => id);
+
+  if (isDesktop) {
+    return (
+      <Accordion
+        value={allAccordionIds}
+        type="multiple"
+        className="grid grid-cols-3 gap-4"
+      >
+        <AccordionItems sections={sections} />
+      </Accordion>
+    );
+  } else {
+    return (
+      <Accordion type="multiple">
+        <AccordionItems sections={sections} />
+      </Accordion>
+    );
+  }
+};
+
+const AccordionItems = ({ sections }: { sections: FooterLinksSection[] }) => {
+  return (
+    <Fragment>
+      {sections.map(({ id, title, items }) => (
+        <AccordionItem
+          key={id}
+          value={id}
+          className="border-b lg:border-transparent"
+        >
+          <AccordionTrigger className="cursor-auto rounded-none pt-0 pb-4 text-base leading-normal font-bold hover:no-underline max-lg:py-4 [&>svg]:hidden">
+            {title}
+            <div className="lg:hidden">
+              <Plus className="size-5" />
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="pb-1 max-lg:py-4">
+            <ul className="space-y-4 lg:space-y-3">
+              {items.map(({ link, text }) => (
+                <li
+                  className="text-sm leading-tight font-light"
+                  key={crypto.randomUUID()}
+                >
+                  <a
+                    href={link}
+                    className="hover:underline hover:underline-offset-3"
+                  >
+                    {text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Fragment>
+  );
+};
+
+const PaymentMethods = ({ cards }: { cards: string[] }) => {
+  return (
+    <ul className="flex flex-wrap items-center gap-3">
+      {cards.map((card) => (
+        <li key={crypto.randomUUID()}>
+          <img className="w-9.5" src={card} alt="روش پرداخت" />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const SocialMediaSection = ({ links }: SocialMediaSectionProps) => {
+  return (
+    <ul className="flex flex-wrap gap-4">
+      {links.map(({ icon, link }) => (
+        <li key={crypto.randomUUID()}>
+          <Button size="icon-lg" asChild className="rounded-full">
+            <a href={link}>
+              <img
+                className="size-4.5 invert dark:invert-0"
+                alt={icon.title}
+                src={icon.light}
+              />
+            </a>
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const FooterSubMenu = ({ links }: { links: FooterLink[] }) => {
+  return (
+    <ul className="flex flex-wrap gap-x-6 gap-y-4">
+      {links.map(({ link, text }) => (
+        <li key={crypto.randomUUID()}>
+          <a href={link} className="text-sm font-light">
+            {text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export { EcommerceFooter19 };
diff --git a/blocks/ecommerce-footer2.tsx b/blocks/ecommerce-footer2.tsx
new file mode 100644
index 0000000..2c3cf55
--- /dev/null
+++ b/blocks/ecommerce-footer2.tsx
@@ -0,0 +1,398 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRight, Plus } from "lucide-react";
+import { Fragment, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldTitle,
+} from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type NewsletterData = {
+  title?: string;
+  description?: string;
+};
+
+type NewsletterFormProps = NewsletterData;
+
+type FooterLink = {
+  text: string;
+  type?: string;
+  link?: string;
+  email?: string;
+};
+
+type FooterLinksSection = {
+  title: string;
+  id: string;
+  items: FooterLink[];
+};
+
+type SocialIcon = {
+  title: string;
+  light: string;
+  dark: string;
+};
+
+type SocialLink = {
+  link: string;
+  icon: SocialIcon;
+};
+
+interface EcommerceFooter2Props {
+  newsletter: NewsletterData;
+  footerLinks: FooterLinksSection[];
+  socialLinks: SocialLink[];
+  description: string;
+  className?: string;
+}
+
+interface FooterLinksSectionProps {
+  sections: FooterLinksSection[];
+}
+
+interface SocialMediaSectionProps {
+  links: SocialLink[];
+}
+
+const NEWSLETTER_DATA = {
+  title: "عضویت در خبرنامه و ۱۰٪ تخفیف برای اولین خرید",
+  description:
+    "در خبرنامه ما عضو شوید و از پیشنهادهای ویژه، نکات فنی، معرفی محصولات جدید و دسترسی زودهنگام به جدیدترین لوازم الکترونیکی باخبر شوید.",
+};
+
+const FOOTER_LINKS: FooterLinksSection[] = [
+  {
+    title: "برند",
+    id: "the-brand",
+    items: [
+      {
+        text: "درباره ما",
+        link: "#",
+      },
+      {
+        text: "پایداری",
+        link: "#",
+      },
+      {
+        text: "نظرات مشتریان",
+        link: "#",
+      },
+      {
+        text: "یافتن فروشگاه",
+        link: "#",
+      },
+      {
+        text: "معرفی به دوستان",
+        link: "#",
+      },
+    ],
+  },
+  {
+    title: "راهنما",
+    id: "help",
+    items: [
+      {
+        text: "تماس با ما",
+        link: "#",
+      },
+      {
+        text: "سؤالات متداول",
+        link: "#",
+      },
+      {
+        text: "ارسال و پیگیری",
+        link: "#",
+      },
+      {
+        text: "مرجوعی و تعویض",
+        link: "#",
+      },
+    ],
+  },
+  {
+    title: "اطلاعات",
+    id: "information",
+    items: [
+      {
+        text: "شرایط و ضوابط",
+        link: "#",
+      },
+      {
+        text: "حریم خصوصی",
+        link: "#",
+      },
+      {
+        text: "سیاست ضمانت",
+        link: "#",
+      },
+      {
+        text: "شرایط استفاده",
+        link: "#",
+      },
+    ],
+  },
+  {
+    title: "تماس",
+    id: "contact",
+    items: [
+      {
+        type: "email",
+        text: "support@techstore.com",
+        email: "support@techstore.com",
+      },
+    ],
+  },
+];
+
+const SOCIAL_ICONS = {
+  facebook: {
+    title: "Facebook",
+    light:
+      "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+  },
+  x: {
+    title: "X",
+    light:
+      "/block-media/shadcnblocks/block/logos/x.svg",
+    dark: "/block-media/shadcnblocks/block/logos/x.svg",
+  },
+  instagram: {
+    title: "Instagram",
+    light:
+      "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+};
+
+const SOCIAL_MEDIA_LINKS = [
+  {
+    icon: SOCIAL_ICONS.facebook,
+    link: "#",
+  },
+  {
+    icon: SOCIAL_ICONS.x,
+    link: "#",
+  },
+  {
+    icon: SOCIAL_ICONS.instagram,
+    link: "#",
+  },
+];
+
+const DESCRIPTION =
+  "جدیدترین اخبار فناوری، تخفیف‌های ویژه، معرفی محصولات و نکات تخصصی را مستقیم در ایمیل خود دریافت کنید. همیشه یک قدم جلوتر از بقیه باشید.";
+
+const EcommerceFooter2 = ({
+  newsletter = NEWSLETTER_DATA,
+  footerLinks = FOOTER_LINKS,
+  socialLinks = SOCIAL_MEDIA_LINKS,
+  description = DESCRIPTION,
+  className,
+}: EcommerceFooter2Props) => {
+  return (
+    <footer
+      dir="rtl"
+      lang="fa"
+      className={cn("px-0 py-10 md:px-7.5 md:py-12 lg:px-20", className)}
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 gap-12.5 lg:grid-cols-2 xl:grid-cols-3">
+          <div>
+            <NewsletterSection {...newsletter} />
+          </div>
+          <div>
+            <FooterLinksSection sections={footerLinks} />
+          </div>
+          <div className="space-y-10">
+            <p className="leading-normal font-light max-lg:text-center">
+              {description}
+            </p>
+            <SocialMediaSection links={socialLinks} />
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+const newsletterFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+});
+
+type newsletterFormType = z.infer<typeof newsletterFormSchema>;
+
+const NewsletterSection = ({ title, description }: NewsletterFormProps) => {
+  const form = useForm({
+    resolver: zodResolver(newsletterFormSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit = (data: newsletterFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <Controller
+        name="email"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <div className="space-y-5">
+              <div className="space-y-4">
+                <FieldTitle className="text-lg leading-none font-bold">
+                  {title}
+                </FieldTitle>
+                <FieldDescription className="text-sm leading-normal font-light">
+                  {description}
+                </FieldDescription>
+              </div>
+              <InputGroup
+                aria-invalid={fieldState.invalid}
+                className="rounded-full"
+              >
+                <InputGroupInput
+                  {...field}
+                  aria-invalid={fieldState.invalid}
+                  placeholder="آدرس ایمیل"
+                />
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton
+                    type="submit"
+                    size="icon-xs"
+                    variant="default"
+                    className="rounded-full"
+                  >
+                    <ArrowRight className="rtl:rotate-180" />
+                  </InputGroupButton>
+                </InputGroupAddon>
+              </InputGroup>
+            </div>
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        )}
+      />
+    </form>
+  );
+};
+
+const FooterLinksSection = ({ sections }: FooterLinksSectionProps) => {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const [value, setValue] = useState("");
+
+  if (!sections) return;
+
+  const allAccordionIds = sections.map(({ id }) => id);
+  const handleOnValueChange = (value: string) => {
+    setValue(value);
+  };
+
+  if (isDesktop) {
+    return (
+      <Accordion
+        value={allAccordionIds}
+        type="multiple"
+        className="lg:grid lg:grid-cols-2 lg:gap-x-17 lg:gap-y-4"
+      >
+        <AccordionItems sections={sections} />
+      </Accordion>
+    );
+  } else {
+    return (
+      <Accordion
+        value={value}
+        type="single"
+        collapsible={true}
+        onValueChange={handleOnValueChange}
+        className="lg:grid lg:grid-cols-2 lg:gap-x-17 lg:gap-y-4"
+      >
+        <AccordionItems sections={sections} />
+      </Accordion>
+    );
+  }
+};
+
+const AccordionItems = ({ sections }: { sections: FooterLinksSection[] }) => {
+  return (
+    <Fragment>
+      {sections.map(({ id, title, items }) => (
+        <AccordionItem key={id} value={id} className="border-none">
+          <AccordionTrigger className="cursor-auto rounded-none pt-0 text-lg leading-none font-bold hover:no-underline max-lg:border-b max-lg:py-4 [&>svg]:hidden">
+            {title}
+            <div className="lg:hidden">
+              <Plus className="size-5" />
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="pb-0 max-lg:py-4 max-lg:ps-4">
+            <ul className="space-y-4 lg:space-y-2">
+              {items.map(({ link, text, type, email }) => (
+                <li
+                  className="text-sm leading-tight font-light"
+                  key={crypto.randomUUID()}
+                >
+                  {type === "email" && <p className="mb-1.5">ایمیل ما:</p>}
+                  <a
+                    data-type={type}
+                    href={type === "email" ? `mailto:${email}` : link}
+                    className="data-[type=email]:underline data-[type=email]:underline-offset-2"
+                  >
+                    {text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Fragment>
+  );
+};
+
+const SocialMediaSection = ({ links }: SocialMediaSectionProps) => {
+  return (
+    <ul className="flex flex-wrap gap-4 max-lg:justify-center">
+      {links.map(({ icon, link }) => (
+        <li key={crypto.randomUUID()}>
+          <Button size="icon-lg" asChild className="rounded-full">
+            <a href={link}>
+              <img
+                className="size-5 invert dark:invert-0"
+                alt={icon.title}
+                src={icon.light}
+              />
+            </a>
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export { EcommerceFooter2 };
diff --git a/blocks/ecommerce-footer20.tsx b/blocks/ecommerce-footer20.tsx
new file mode 100644
index 0000000..db04d3d
--- /dev/null
+++ b/blocks/ecommerce-footer20.tsx
@@ -0,0 +1,500 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRight, Plus } from "lucide-react";
+import { Fragment, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError } from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { Separator } from "@/components/ui/separator";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type NewsletterData = {
+  title?: string;
+};
+
+type NewsletterFormProps = NewsletterData;
+
+type SocialIcon = {
+  title: string;
+  light: string;
+  dark: string;
+};
+
+type SocialLink = {
+  link: string;
+  icon: SocialIcon;
+};
+
+type FooterLink = {
+  text: string;
+  link?: string;
+};
+
+type FooterLinksSection = {
+  title: string;
+  id: string;
+  items: FooterLink[];
+};
+
+interface SocialMediaSectionProps {
+  links: SocialLink[];
+}
+
+interface FooterLinksSectionProps {
+  sections: FooterLinksSection[];
+}
+
+interface EcommerceFooter20Props {
+  newsletter: NewsletterData;
+  socialLinks: SocialLink[];
+  footerLinks: FooterLinksSection[];
+  paymentMethods: string[];
+  submenuLinks: {
+    text: string;
+    link: string;
+  }[];
+  footerData: {
+    image: {
+      src: string;
+      alt: string;
+    };
+    homeLink: {
+      logo: {
+        light: string;
+        dark: string;
+      };
+      link: string;
+    };
+    title: string;
+    description: string;
+  };
+  className?: string;
+}
+
+const NEWSLETTER_DATA = {
+  title: "از پیشنهادها و محصولات جدید باخبر شوید و ۲۰٪ تخفیف برای اولین سفارش دریافت کنید",
+};
+
+const SOCIAL_ICONS = {
+  facebook: {
+    title: "Facebook",
+    light:
+      "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+  },
+  x: {
+    title: "X",
+    light:
+      "/block-media/shadcnblocks/block/logos/x.svg",
+    dark: "/block-media/shadcnblocks/block/logos/x.svg",
+  },
+  instagram: {
+    title: "Instagram",
+    light:
+      "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+};
+
+const SOCIAL_MEDIA_LINKS = [
+  {
+    icon: SOCIAL_ICONS.facebook,
+    link: "#",
+  },
+  {
+    icon: SOCIAL_ICONS.x,
+    link: "#",
+  },
+  {
+    icon: SOCIAL_ICONS.instagram,
+    link: "#",
+  },
+];
+
+const FOOTER_LINKS: FooterLinksSection[] = [
+  {
+    title: "مجموعه‌ها",
+    id: "collections",
+    items: [
+      {
+        text: "تازه‌ها",
+        link: "#",
+      },
+      {
+        text: "پرفروش‌ترین‌ها",
+        link: "#",
+      },
+      {
+        text: "پیشنهادهای فصلی",
+        link: "#",
+      },
+      {
+        text: "محصولات ضروری",
+        link: "#",
+      },
+    ],
+  },
+  {
+    title: "راهنما",
+    id: "help",
+    items: [
+      {
+        text: "تماس با ما",
+        link: "#",
+      },
+      {
+        text: "سؤالات متداول",
+        link: "#",
+      },
+      {
+        text: "ارسال و پیگیری",
+        link: "#",
+      },
+      {
+        text: "مرجوعی و تعویض",
+        link: "#",
+      },
+    ],
+  },
+  {
+    title: "اطلاعات",
+    id: "information",
+    items: [
+      {
+        text: "شرایط و ضوابط",
+        link: "#",
+      },
+      {
+        text: "حریم خصوصی",
+        link: "#",
+      },
+      {
+        text: "سیاست ضمانت",
+        link: "#",
+      },
+      {
+        text: "شرایط استفاده",
+        link: "#",
+      },
+    ],
+  },
+];
+
+const SUBMENU = [
+  {
+    text: "سیاست ارسال",
+    link: "#",
+  },
+  {
+    text: "سیاست مرجوعی",
+    link: "#",
+  },
+  {
+    text: "شرایط استفاده",
+    link: "#",
+  },
+  {
+    text: "حریم خصوصی",
+    link: "#",
+  },
+  {
+    text: "پایداری",
+    link: "#",
+  },
+];
+
+const FOOTER_DATA = {
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Portrait-of-a-Woman-and-Man-2.png",
+    alt: "پرتره مدرن زن و مرد",
+  },
+  homeLink: {
+    logo: {
+      light:
+        "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
+      dark: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark-white.svg",
+    },
+    link: "#",
+  },
+  title: "جایی که مد روز با راحتی پیوند می‌خورد",
+  description:
+    "لباس‌هایی طراحی می‌کنیم که به زنان کمک می‌کند با جزئیات دقیق، برش‌های مناسب و پایه‌های باکیفیت، شخصیت خود را بیان کنند.",
+};
+
+const PAYMENT_METHODS = [
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/amazonpay.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/applepay.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg",
+  "/block-media/shadcnblocks/block/ecommerce/payment-methods/discover.svg",
+];
+
+const EcommerceFooter20 = ({
+  newsletter = NEWSLETTER_DATA,
+  socialLinks = SOCIAL_MEDIA_LINKS,
+  footerLinks = FOOTER_LINKS,
+  paymentMethods = PAYMENT_METHODS,
+  submenuLinks = SUBMENU,
+  footerData = FOOTER_DATA,
+  className,
+}: EcommerceFooter20Props) => {
+  return (
+    <footer dir="rtl" lang="fa" className={cn("bg-muted", className)}>
+      <div className="grid grid-cols-1 lg:grid-cols-2">
+        <div className="overflow-hidden max-lg:aspect-square">
+          <img
+            className="block size-full object-cover object-center"
+            src={footerData.image.src}
+            alt={footerData.image.alt}
+          />
+        </div>
+        <div>
+          <div className="px-6 py-8 md:p-12 lg:px-20 lg:pt-8 lg:pb-20">
+            <div className="space-y-12">
+              <div className="mt-12 max-w-125">
+                <NewsletterSection {...newsletter} />
+              </div>
+              <div className="space-y-6">
+                <a href="#" className="block">
+                  <img
+                    className="h-12 w-auto dark:hidden"
+                    src={footerData.homeLink.logo.light}
+                    alt="لوگو"
+                  />
+                  <img
+                    className="hidden h-12 w-auto dark:inline-block"
+                    src={footerData.homeLink.logo.dark}
+                    alt="لوگو"
+                  />
+                </a>
+                <div className="space-y-1">
+                  <h3 className="font-bold">{footerData.title}</h3>
+                  <p className="leading-relaxed text-balance">
+                    {footerData.description}
+                  </p>
+                </div>
+              </div>
+              <SocialMediaSection links={socialLinks} />
+              <Separator className="max-lg:hidden" />
+              <FooterLinksSection sections={footerLinks} />
+              <Separator className="max-lg:hidden" />
+              <PaymentMethods cards={paymentMethods} />
+              <Separator />
+              <div className="space-y-8">
+                <FooterSubMenu links={submenuLinks} />
+                <p className="text-sm font-light">
+                  © ۲۲۶ ری یو آی. تمامی حقوق محفوظ است.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="px-6 py-10 lg:px-20">
+        <img
+          className="w-full dark:hidden"
+          src={footerData.homeLink.logo.light}
+          alt="لوگو"
+        />
+        <img
+          className="hidden w-full dark:inline-block"
+          src={footerData.homeLink.logo.dark}
+          alt="لوگو"
+        />
+      </div>
+    </footer>
+  );
+};
+
+const newsletterFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+});
+
+type newsletterFormType = z.infer<typeof newsletterFormSchema>;
+
+const NewsletterSection = ({ title }: NewsletterFormProps) => {
+  const form = useForm({
+    resolver: zodResolver(newsletterFormSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit = (data: newsletterFormType) => {
+    console.log(data);
+  };
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-light">{title}</h2>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Controller
+          name="email"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <InputGroup
+                className="rounded-none border-x-0 border-t-0 !border-b border-foreground shadow-none"
+                aria-invalid={fieldState.invalid}
+              >
+                <InputGroupInput
+                  {...field}
+                  aria-invalid={fieldState.invalid}
+                  placeholder="آدرس ایمیل"
+                />
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton type="submit" size="icon-xs">
+                    <ArrowRight className="rtl:rotate-180" />
+                  </InputGroupButton>
+                </InputGroupAddon>
+              </InputGroup>
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </form>
+    </div>
+  );
+};
+
+const SocialMediaSection = ({ links }: SocialMediaSectionProps) => {
+  return (
+    <ul className="flex flex-wrap gap-4">
+      {links.map(({ icon, link }) => (
+        <li key={crypto.randomUUID()}>
+          <Button size="icon" variant="ghost" asChild className="rounded-full">
+            <a href={link}>
+              <img
+                className="size-6 dark:invert"
+                alt={icon.title}
+                src={icon.light}
+              />
+            </a>
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const FooterLinksSection = ({ sections }: FooterLinksSectionProps) => {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const [value, setValue] = useState("");
+
+  if (!sections) return;
+
+  const allAccordionIds = sections.map(({ id }) => id);
+  const handleOnValueChange = (value: string) => {
+    setValue(value);
+  };
+
+  if (isDesktop) {
+    return (
+      <Accordion
+        value={allAccordionIds}
+        type="multiple"
+        className="grid grid-cols-3 gap-4"
+      >
+        <AccordionItems sections={sections} />
+      </Accordion>
+    );
+  } else {
+    return (
+      <Accordion
+        value={value}
+        type="single"
+        collapsible={true}
+        onValueChange={handleOnValueChange}
+        className="border-y"
+      >
+        <AccordionItems sections={sections} />
+      </Accordion>
+    );
+  }
+};
+
+const AccordionItems = ({ sections }: { sections: FooterLinksSection[] }) => {
+  return (
+    <Fragment>
+      {sections.map(({ id, title, items }) => (
+        <AccordionItem
+          key={id}
+          value={id}
+          className="border-b lg:border-transparent"
+        >
+          <AccordionTrigger className="cursor-auto rounded-none pt-0 pb-2 text-base leading-normal font-bold hover:no-underline max-lg:py-4 [&>svg]:hidden">
+            {title}
+            <div className="lg:hidden">
+              <Plus className="size-5" />
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="pb-1 max-lg:py-4">
+            <ul className="space-y-4 lg:space-y-2">
+              {items.map(({ link, text }) => (
+                <li
+                  className="text-sm leading-tight font-light"
+                  key={crypto.randomUUID()}
+                >
+                  <a
+                    href={link}
+                    className="hover:underline hover:underline-offset-3"
+                  >
+                    {text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Fragment>
+  );
+};
+
+const PaymentMethods = ({ cards }: { cards: string[] }) => {
+  return (
+    <ul className="flex flex-wrap items-center gap-3">
+      {cards.map((card) => (
+        <li key={crypto.randomUUID()}>
+          <img className="w-9.5" src={card} alt="روش پرداخت" />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const FooterSubMenu = ({ links }: { links: FooterLink[] }) => {
+  return (
+    <ul className="flex flex-wrap gap-x-6 gap-y-4">
+      {links.map(({ link, text }) => (
+        <li key={crypto.randomUUID()}>
+          <a href={link} className="text-sm font-light">
+            {text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export { EcommerceFooter20 };
diff --git a/blocks/ecommerce-footer9.tsx b/blocks/ecommerce-footer9.tsx
new file mode 100644
index 0000000..47b3f4a
--- /dev/null
+++ b/blocks/ecommerce-footer9.tsx
@@ -0,0 +1,440 @@
+import { ChevronRight } from "lucide-react";
+import { Fragment } from "react/jsx-runtime";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type FooterLink = {
+  text: string;
+  link?: string;
+};
+
+type SocialIcon = {
+  title: string;
+  light: string;
+  dark: string;
+};
+
+type SocialLink = {
+  link: string;
+  icon: SocialIcon;
+};
+
+type HomeLink = {
+  logo: {
+    light: string;
+    dark?: string;
+  };
+  link: string;
+  alt?: string;
+};
+
+type StoreLink = {
+  name: string;
+  link: string;
+  address?: string;
+};
+
+type FooterLinksSection = {
+  title: string;
+  items: FooterLink[];
+};
+
+type AppSection = {
+  title?: string;
+  description?: string;
+  links?: {
+    link: string;
+    badge: string;
+    alt?: string;
+  }[];
+};
+
+interface FooterHomeSectionProps {
+  home: HomeLink;
+  description?: string;
+  socialMediaLinks?: SocialLink[];
+}
+
+type AppPromoSectionProps = AppSection;
+
+interface EcommerceFooter9Props {
+  className?: string;
+  stores?: StoreLink[];
+  home: HomeLink;
+  description?: string;
+  socialMediaLinks?: SocialLink[];
+  links?: FooterLinksSection[];
+  app?: AppSection;
+  paymentMethods: string[];
+}
+
+const FOOTER_DATA = {
+  stores: [
+    {
+      name: "شعبه پرچمدار تهران",
+      link: "#",
+      address: "میدان ونک، خیابان ملاصدرا، تهران",
+    },
+    {
+      name: "شعبه اصفهان",
+      link: "#",
+      address: "خیابان چهارباغ عباسی، اصفهان",
+    },
+    {
+      name: "شعبه شیراز",
+      link: "#",
+      address: "خیابان زند، شیراز",
+    },
+    {
+      name: "شعبه مشهد",
+      link: "#",
+      address: "بلوار سجاد، مشهد",
+    },
+  ],
+  home: {
+    logo: {
+      light:
+        "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
+      dark: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark-white.svg",
+    },
+    alt: "لوگو",
+    link: "#",
+  },
+  description:
+    "محصولاتی با طراحی دقیق برای ارتقای زندگی روزمره. مواد باکیفیت، استایل ماندگار و راحتی بی‌دردسر.",
+  links: [
+    {
+      title: "مجموعه‌ها",
+      items: [
+        {
+          text: "تازه‌ها",
+          link: "#",
+        },
+        {
+          text: "پرفروش‌ترین‌ها",
+          link: "#",
+        },
+        {
+          text: "پیشنهادهای فصلی",
+          link: "#",
+        },
+        {
+          text: "محصولات ضروری",
+          link: "#",
+        },
+      ],
+    },
+    {
+      title: "راهنما",
+      items: [
+        {
+          text: "تماس با ما",
+          link: "#",
+        },
+        {
+          text: "سؤالات متداول",
+          link: "#",
+        },
+        {
+          text: "ارسال و پیگیری",
+          link: "#",
+        },
+        {
+          text: "مرجوعی و تعویض",
+          link: "#",
+        },
+      ],
+    },
+    {
+      title: "اطلاعات",
+      items: [
+        {
+          text: "شرایط و ضوابط",
+          link: "#",
+        },
+        {
+          text: "حریم خصوصی",
+          link: "#",
+        },
+        {
+          text: "سیاست ضمانت",
+          link: "#",
+        },
+        {
+          text: "شرایط استفاده",
+          link: "#",
+        },
+      ],
+    },
+  ],
+  paymentMethods: [
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/amazonpay.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/applepay.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg",
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/discover.svg",
+  ],
+  app: {
+    title: "خرید در هر مکان",
+    description:
+      "اپلیکیشن ما را دانلود کنید تا از پیشنهادهای ویژه، دسترسی زودهنگام به محصولات جدید و پرداخت آسان بهره‌مند شوید.",
+    links: [
+      {
+        link: "#",
+        badge:
+          "/block-media/shadcnblocks/block/badges/googleplay.svg",
+        alt: "گوگل پلی",
+      },
+      {
+        link: "#",
+        badge:
+          "/block-media/shadcnblocks/block/badges/appstore.svg",
+        alt: "اپ استور",
+      },
+    ],
+  },
+  socialMediaLinks: (() => {
+    const SOCIAL_ICONS = {
+      facebook: {
+        title: "Facebook",
+        light:
+          "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+        dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+      },
+      x: {
+        title: "X",
+        light:
+          "/block-media/shadcnblocks/block/logos/x.svg",
+        dark: "/block-media/shadcnblocks/block/logos/x.svg",
+      },
+      instagram: {
+        title: "Instagram",
+        light:
+          "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+        dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+      },
+    } as const;
+    return [
+      { icon: SOCIAL_ICONS.facebook, link: "#" },
+      { icon: SOCIAL_ICONS.x, link: "#" },
+      { icon: SOCIAL_ICONS.instagram, link: "#" },
+    ];
+  })(),
+};
+
+const EcommerceFooter9 = ({
+  className,
+  stores = FOOTER_DATA.stores,
+  home = FOOTER_DATA.home,
+  description = FOOTER_DATA.description,
+  socialMediaLinks = FOOTER_DATA.socialMediaLinks,
+  links = FOOTER_DATA.links,
+  app = FOOTER_DATA.app,
+  paymentMethods = FOOTER_DATA.paymentMethods,
+}: EcommerceFooter9Props) => {
+  return (
+    <footer dir="rtl" lang="fa" className={cn("py-10", className)}>
+      <div className="container">
+        <div className="py-10">
+          <FooterStoresLinks links={stores} />
+        </div>
+        <Separator />
+        <div className="py-10">
+          <div className="grid grid-cols-1 gap-7.5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-7">
+            <div className="sm:col-span-2">
+              <FooterHomeSection
+                home={home}
+                description={description}
+                socialMediaLinks={socialMediaLinks}
+              />
+            </div>
+            <FooterLinksSection links={links} />
+            <div className="lg:col-span-2">
+              <AppPromoSection
+                title={app.title}
+                description={app.description}
+                links={app.links}
+              />
+            </div>
+          </div>
+        </div>
+        <Separator />
+        <div className="flex flex-col items-center justify-between gap-5 py-5 md:flex-row">
+          <p className="text-xs text-muted-foreground">
+            © ۲۲۶ ساخته‌شده با ❤️ توسط <b>ری یو آی</b>
+          </p>
+          <PaymentMethods cards={paymentMethods} />
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+const FooterHomeSection = ({
+  home,
+  description,
+  socialMediaLinks,
+}: FooterHomeSectionProps) => {
+  return (
+    <div className="space-y-5">
+      <HomeLink home={home} />
+      {description && (
+        <p className="text-sm leading-relaxed text-balance text-muted-foreground">
+          {description}
+        </p>
+      )}
+      <div className="space-y-2.5">
+        <div className="text-xl leading-relaxed font-semibold">ما را دنبال کنید</div>
+        <SocialMediaSection links={socialMediaLinks} />
+      </div>
+    </div>
+  );
+};
+
+const FooterStoresLinks = ({ links }: { links: StoreLink[] }) => {
+  if (!links) return;
+
+  return (
+    <ul className="grid grid-cols-1 gap-7.5 md:grid-cols-2 lg:grid-cols-4">
+      {links.map(({ name, address, link }, index) => (
+        <li key={index} className="space-y-1">
+          <Button
+            asChild
+            className="gap-4 p-0 text-base hover:bg-background"
+            variant="ghost"
+          >
+            <a href={link}>
+              {name}
+              <div className="flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                <ChevronRight className="rtl:rotate-180" />
+              </div>
+            </a>
+          </Button>
+          <p className="text-sm text-muted-foreground">{address}</p>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const HomeLink = ({ home }: { home: HomeLink }) => {
+  return (
+    <a href={home.link} className="inline-block">
+      <div className="max-w-50">
+        <img
+          className="w-full dark:hidden"
+          src={home.logo.light}
+          alt={home.alt ?? "لوگو"}
+        />
+        {home.logo.dark && (
+          <img
+            className="hidden w-full dark:inline-block"
+            src={home.logo.dark}
+            alt={home.alt ?? "لوگو"}
+          />
+        )}
+      </div>
+    </a>
+  );
+};
+
+const SocialMediaSection = ({ links }: { links?: SocialLink[] }) => {
+  if (!links) return;
+
+  return (
+    <ul className="flex flex-wrap gap-4">
+      {links.map(({ icon, link }) => (
+        <li key={crypto.randomUUID()}>
+          <Button size="icon-sm" asChild className="rounded-full">
+            <a href={link}>
+              <img
+                className="size-3.5 dark:hidden"
+                alt={icon.title}
+                src={icon.light}
+              />
+              <img
+                className="hidden size-3.5 dark:block"
+                alt={icon.title}
+                src={icon.dark}
+              />
+            </a>
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const FooterLinksSection = ({ links }: { links?: FooterLinksSection[] }) => {
+  if (!links) return;
+
+  return (
+    <Fragment>
+      {links.map(({ title, items }, i) => (
+        <div key={i} className="space-y-4">
+          <h2 className="text-base leading-normal font-semibold">{title}</h2>
+          <div>
+            {items.map(({ link, text }, j) => (
+              <a
+                key={`${i}-${j}`}
+                className="block py-2 text-sm leading-normal text-muted-foreground"
+                href={link}
+              >
+                {text}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+    </Fragment>
+  );
+};
+
+const AppPromoSection = ({
+  title,
+  description,
+  links,
+}: AppPromoSectionProps) => {
+  if (!links) return;
+
+  return (
+    <div className="space-y-5">
+      {title && (
+        <h2 className="text-base leading-normal font-semibold">{title}</h2>
+      )}
+      {description && (
+        <p className="text-sm leading-relaxed text-balance text-muted-foreground">
+          {description}
+        </p>
+      )}
+      <div className="flex flex-wrap items-center gap-3">
+        {links.map(({ link, badge, alt }, index) => (
+          <a
+            className="block flex-1 shrink-0 grow-0 basis-33"
+            href={link}
+            key={index}
+          >
+            <img src={badge} alt={alt} />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const PaymentMethods = ({ cards }: { cards: string[] }) => {
+  return (
+    <ul className="flex flex-wrap items-center gap-3">
+      {cards.map((card) => (
+        <li key={crypto.randomUUID()}>
+          <img className="w-9.5" src={card} alt="روش پرداخت" />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export { EcommerceFooter9 };
diff --git a/blocks/ecommerce-hero1.tsx b/blocks/ecommerce-hero1.tsx
new file mode 100644
index 0000000..020ca39
--- /dev/null
+++ b/blocks/ecommerce-hero1.tsx
@@ -0,0 +1,199 @@
+"use client";
+import Autoplay from "embla-carousel-autoplay";
+
+import type { PriceType } from "@/components/shadcnblocks/price";
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface EcommerceHero1Props {
+  className?: string;
+  carouselItems?: HeroSlideItem[][];
+}
+
+interface Product {
+  name: string;
+  description: string;
+  image: string;
+  link: string;
+  price: PriceType;
+}
+
+interface HeroSlideItem {
+  image: string;
+  title: string;
+  product: Product;
+}
+
+const CAROUSEL_ITEMS: HeroSlideItem[][] = [
+  [
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/Green-Glass-Vase-with-Pink-Flowers-2.png",
+      title: "جلوه‌های گل تازه",
+      product: {
+        name: "گلدان شیشه‌ای سبز",
+        description: "گلدان شیشه‌ای دست‌ساز با استایل گل‌های لطیف",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/other/Elegant-Vase-with-Pink-Flowers-1.png",
+        link: "#",
+        price: {
+          regular: 100,
+          currency: "IRR",
+        },
+      },
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/Serene-Teapot-Still-Life-2.png",
+      title: "لحظات آرام چای",
+      product: {
+        name: "قوری سرامیکی مینیمال",
+        description: "قوری ظریف طراحی‌شده برای دم‌کردن روزانه",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/other/Serene-Teapot-Still-Life-1.png",
+        link: "#",
+        price: {
+          regular: 100,
+          currency: "IRR",
+        },
+      },
+    },
+  ],
+  [
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/pexels-alejandro-aznar-155337093-29269636-2.jpg",
+      title: "دکور مدرن خانه",
+      product: {
+        name: "گلدان سفالی میز",
+        description: "گلدان سرامیکی مدرن برای قفسه یا میز",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/other/pexels-alejandro-aznar-155337093-29269637-1.jpg",
+        link: "#",
+        price: {
+          regular: 100,
+          currency: "IRR",
+        },
+      },
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410293-2.jpg",
+      title: "سرامیک‌های ماندگار",
+      product: {
+        name: "کاسه سرامیکی دست‌ساز",
+        description: "کاسه دست‌ساز با بافت‌های طبیعی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg",
+        link: "#",
+        price: {
+          regular: 100,
+          currency: "IRR",
+        },
+      },
+    },
+  ],
+];
+
+const EcommerceHero1 = ({
+  className,
+  carouselItems = CAROUSEL_ITEMS,
+}: EcommerceHero1Props) => {
+  return (
+    <header dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="rounded-xl bg-primary px-5 py-4 max-lg:p-2">
+          <Carousel
+            opts={{
+              loop: true,
+              direction: "rtl",
+            }}
+            plugins={[
+              Autoplay({
+                delay: 6000,
+              }),
+            ]}
+          >
+            <CarouselContent className="m-0">
+              {carouselItems.map((slide, index) => (
+                <CarouselItem key={index} className="p-0">
+                  <div className="flex h-full flex-col gap-4 lg:flex-row lg:gap-8">
+                    {slide.map((item, index) => (
+                      <div className="lg:flex-1" key={index}>
+                        <div className="space-y-4">
+                          <div className="relative size-full h-80 overflow-hidden rounded-xl before:absolute before:inset-0 before:block before:bg-black/25 sm:h-100 lg:h-140">
+                            <img
+                              src={item.image}
+                              alt={item.title}
+                              className="block size-full object-cover object-center"
+                            />
+                            <div className="absolute inset-x-3 bottom-3 lg:start-6 lg:bottom-6">
+                              <ProductCard product={item.product} />
+                            </div>
+                          </div>
+                          <h2 className="text-start text-xl font-bold text-primary-foreground max-md:text-center">
+                            {item.title}
+                          </h2>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+const ProductCard = ({ product }: { product: Product }) => {
+  const { regular, sale, currency } = product.price;
+
+  return (
+    <Card className="relative w-full flex-row gap-0 overflow-hidden p-0 max-sm:bg-background/40 max-sm:backdrop-blur-md md:h-64 md:w-45 md:flex-col lg:h-80 lg:w-50">
+      <a href={product.link} className="absolute inset-0 z-10 rounded-xl"></a>
+      <CardHeader className="gap-0 p-0 max-sm:hidden">
+        <div className="aspect-[1.4] overflow-hidden lg:aspect-square">
+          <img
+            src={product.image}
+            alt={product.name}
+            className="block size-full object-cover object-center"
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="flex h-full flex-col justify-between px-4 py-2.5 text-start">
+        <div>
+          <CardTitle className="line-clamp-2 text-base font-bold text-shadow-sm">
+            {product.name}
+          </CardTitle>
+          <CardDescription className="my-1.5 line-clamp-1 max-sm:text-foreground">
+            {product.description}
+          </CardDescription>
+        </div>
+        <Price
+          onSale={sale != null}
+          className="flex-nowrap text-lg font-semibold"
+        >
+          <PriceValue price={sale} currency={currency} variant="sale" />
+          <PriceValue price={regular} currency={currency} variant="regular" />
+        </Price>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { EcommerceHero1 };
diff --git a/blocks/ecommerce-hero2.tsx b/blocks/ecommerce-hero2.tsx
new file mode 100644
index 0000000..a3b1640
--- /dev/null
+++ b/blocks/ecommerce-hero2.tsx
@@ -0,0 +1,174 @@
+import { ShoppingBag } from "lucide-react";
+
+import {
+  Price,
+  type PriceType,
+  PriceValue,
+} from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type MediaType = {
+  src: string;
+  alt: string;
+};
+
+type Product = {
+  image: string;
+  name: string;
+  href: string;
+  price: PriceType;
+};
+
+type HeroData = {
+  title?: string;
+  cta?: {
+    label: string;
+    href: string;
+  };
+  product?: Product;
+  image?: MediaType;
+  video?: MediaType;
+}[];
+
+type ProductCardProps = Product;
+
+interface EcommerceHero2Props {
+  className?: string;
+  heroData: HeroData;
+}
+
+const HERO_DATA: HeroData = [
+  {
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+      alt: "عکس لایف‌استایل هودی راحت",
+    },
+    title: "راحتی روزمره، استایل مدرن",
+    cta: {
+      label: "خرید هودی",
+      href: "#",
+    },
+  },
+  {
+    video: {
+      src: "/block-media/shadcnblocks/block/3888261-hd_720_1366_50fps.mp4",
+      alt: "مدل در حال حرکت با پالتو مدرن",
+    },
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+      price: {
+        regular: 780,
+        sale: 420,
+        currency: "IRR",
+      },
+      name: "پالتو مدرن دوخت‌دار",
+      href: "#",
+    },
+  },
+];
+
+const EcommerceHero2 = ({
+  className,
+  heroData = HERO_DATA,
+}: EcommerceHero2Props) => {
+  return (
+    <header dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="h-dvh grid-cols-2 md:grid md:max-h-160 xl:max-h-200">
+        {heroData.map(({ image, video, title, cta, product }, index) => (
+          <div key={index} className="aspect-[0.7] md:aspect-auto">
+            <div className="relative flex size-full flex-col justify-end p-6 after:absolute after:inset-0 after:size-full after:bg-black/20">
+              {image && (
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="absolute inset-0 block size-full object-cover object-center"
+                />
+              )}
+              {video && (
+                <video
+                  src={video.src}
+                  loop
+                  muted
+                  autoPlay
+                  className="absolute inset-0 block size-full object-cover object-center"
+                />
+              )}
+              <div className="relative z-10 space-y-6">
+                {title && (
+                  <h1 className="max-w-78 text-start text-2xll tracking-tighter text-balance text-white">
+                    {title}
+                  </h1>
+                )}
+                {cta && (
+                  <Button asChild variant="outline" size="lg">
+                    <a href={cta.href}>{cta.label}</a>
+                  </Button>
+                )}
+                {product && <ProductCard {...product} />}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </header>
+  );
+};
+
+const ProductCard = ({ image, name, price, href }: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Card className="group max-w-86 flex-row gap-0 gap-4 rounded-none border-none p-0">
+      <CardHeader className="block basis-22.5 gap-0 px-0">
+        <div className="min-w-18">
+          <AspectRatio className="overflow-hidden">
+            <img
+              src={image}
+              alt={name}
+              className="block size-full origin-center object-cover object-center transition-transform duration-500 group-hover:scale-110"
+            />
+          </AspectRatio>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 px-0 py-3 pe-4 text-start">
+        <div className="flex h-full items-center gap-3">
+          <div className="flex-1 space-y-2">
+            <CardTitle className="line-clamp-1 text-base leading-tight font-medium">
+              <a href={href}>{name}</a>
+            </CardTitle>
+            <Price onSale={sale != null} className="text-xs font-semibold">
+              <PriceValue
+                price={sale}
+                currency={currency}
+                variant="sale"
+                className="text-rose-600"
+              />
+              <PriceValue
+                price={regular}
+                currency={currency}
+                variant="regular"
+                className="text-muted-foreground"
+              />
+            </Price>
+          </div>
+          <Button
+            asChild
+            size="icon-sm"
+            variant="ghost"
+            className="shrink-0 self-center rounded-full"
+          >
+            <a href={href} aria-label={`افزودن ${name} به سبد خرید`}>
+              <ShoppingBag />
+            </a>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { EcommerceHero2 };
diff --git a/blocks/ecommerce-hero3.tsx b/blocks/ecommerce-hero3.tsx
new file mode 100644
index 0000000..fb3cd6e
--- /dev/null
+++ b/blocks/ecommerce-hero3.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import Autoplay from "embla-carousel-autoplay";
+
+import {
+  Price,
+  type PriceType,
+  PriceValue,
+} from "@/components/shadcnblocks/price";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type Product = {
+  image: string;
+  name: string;
+  href: string;
+  price: PriceType;
+};
+
+interface HeroData {
+  backgroundImage: string;
+  title: string;
+  subtitle: string;
+  description: string;
+  products: Product[];
+  cta: {
+    label: string;
+    href: string;
+  };
+}
+
+type ProductCardProps = Product;
+
+interface EcommerceHero3Props extends HeroData {
+  className?: string;
+}
+
+const HERO_DATA: HeroData = {
+  backgroundImage:
+    "/block-media/shadcnblocks/block/ecommerce/furniture/Cozy-Christmas-Living-Room-2.png",
+  title: "گرما و استایل برای هر فضای زندگی",
+  subtitle: "مجموعه مبلمان",
+  description:
+    "مبلمان و روشنایی با طراحی دقیق را کشف کنید که راحتی، تعادل و ظرافت مدرن را به خانه‌تان می‌آورند.",
+  cta: {
+    label: "مشاهده مجموعه",
+    href: "#",
+  },
+  products: [
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-1.png",
+      name: "چراغ رومیزی هنری مدرن",
+      href: "#",
+      price: {
+        regular: 100,
+        currency: "IRR",
+      },
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Wooden-Sideboard-1.png",
+      name: "کنسول چوبی مینیمال",
+      href: "#",
+      price: {
+        regular: 100,
+        currency: "IRR",
+      },
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Interior-with-Sculptural-Element-1.png",
+      name: "چراغ تزئینی مجسمه‌ای",
+      href: "#",
+      price: {
+        regular: 100,
+        currency: "IRR",
+      },
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Wooden-Cabinet-1.png",
+      name: "کابینت چوبی مدرن",
+      href: "#",
+      price: {
+        regular: 100,
+        currency: "IRR",
+      },
+    },
+  ],
+};
+
+const EcommerceHero3 = ({
+  className,
+  backgroundImage = HERO_DATA.backgroundImage,
+  products = HERO_DATA.products,
+  title = HERO_DATA.title,
+  subtitle = HERO_DATA.subtitle,
+  description = HERO_DATA.description,
+  cta = HERO_DATA.cta,
+}: EcommerceHero3Props) => {
+  return (
+    <header dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div
+          style={{
+            backgroundImage: `url(${backgroundImage})`,
+          }}
+          className="relative w-full overflow-hidden rounded-lg bg-cover bg-center bg-no-repeat py-10 after:absolute after:inset-0 after:block after:bg-black/35 lg:h-190 xl:h-210 xl:py-20"
+        >
+          <div className="relative z-10 flex h-full flex-col gap-10 px-6 sm:px-20 lg:flex-row">
+            <div className="flex flex-1 items-center">
+              <div className="flex flex-col justify-between gap-4 lg:h-132">
+                <div className="space-y-2 text-start">
+                  <div className="flex items-center gap-2 after:block after:h-px after:w-15 after:bg-white">
+                    <p className="text-xs font-bold text-white uppercase">
+                      {subtitle}
+                    </p>
+                  </div>
+                  <h1 className="text-xl leading-tight text-white md:text-xl xl:text-2xll">
+                    {title}
+                  </h1>
+                </div>
+                <div className="space-y-6 text-start">
+                  <p className="max-w-110 text-lg text-white">{description}</p>
+                  <Button asChild>
+                    <a href={cta.href}>{cta.label}</a>
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="basis-80 self-center xl:basis-130">
+              <div className="mx-auto max-w-70 xl:max-w-95">
+                <Carousel
+                  opts={{
+                    loop: true,
+                  }}
+                  plugins={[
+                    Autoplay({
+                      delay: 6000,
+                    }),
+                  ]}
+                >
+                  <CarouselContent>
+                    {products.map((product, index) => (
+                      <CarouselItem key={index}>
+                        <ProductCard {...product} />
+                      </CarouselItem>
+                    ))}
+                  </CarouselContent>
+                  <div className="hidden sm:contents">
+                    <CarouselPrevious className="rtl:rotate-180" />
+                    <CarouselNext className="rtl:rotate-180" />
+                  </div>
+                </Carousel>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+const ProductCard = ({ image, name, price }: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Card className="gap-0 overflow-hidden p-0">
+      <CardHeader className="relative gap-0 p-0">
+        <img
+          src={image}
+          alt={name}
+          className="block aspect-square size-full object-cover object-center"
+        />
+        <div className="absolute inset-x-5 bottom-5">
+          <Button variant="secondary" className="w-full">
+            مشاهده سریع
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="flex px-9 py-7 text-start">
+          <div className="flex-1 space-y-1">
+            <CardTitle className="line-clamp-1 text-lg">{name}</CardTitle>
+            <Price onSale={sale != null} className="text-sm font-semibold">
+              <PriceValue
+                price={sale}
+                currency={currency}
+                variant="sale"
+                className="text-muted-foreground"
+              />
+              <PriceValue
+                price={regular}
+                currency={currency}
+                variant="regular"
+                className="text-muted-foreground"
+              />
+            </Price>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { EcommerceHero3 };
diff --git a/blocks/ecommerce-hero6.tsx b/blocks/ecommerce-hero6.tsx
new file mode 100644
index 0000000..f517c8f
--- /dev/null
+++ b/blocks/ecommerce-hero6.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import Autoplay from "embla-carousel-autoplay";
+import { Eye, Share2 } from "lucide-react";
+
+import {
+  Price,
+  type PriceType,
+  PriceValue,
+} from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type Product = {
+  image: string;
+  name: string;
+  collection?: string;
+  href: string;
+  price: PriceType;
+};
+
+interface HeroData {
+  title: string;
+  cta: {
+    label: string;
+    href: string;
+  };
+  products: Product[];
+  image: string;
+}
+
+type ProductCardProps = Product;
+
+interface EcommerceHero6Props extends HeroData {
+  className?: string;
+}
+const HERO_DATA: HeroData = {
+  title: "سرامیک دست‌ساز برای آیین‌های روزمره",
+  image:
+    "/block-media/shadcnblocks/block/ecommerce/other/Ceramic-Mug-in-Sunlight-2.png",
+  cta: {
+    label: "خرید سرامیک",
+    href: "#",
+  },
+  products: [
+    {
+      name: "بشقاب شام دست‌ساز",
+      price: {
+        regular: 99.0,
+        sale: 89.0,
+        currency: "IRR",
+      },
+      collection: "گل و هنر",
+      href: "#",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
+    },
+    {
+      name: "ماگ قهوه سفالی",
+      price: {
+        regular: 5.99,
+        currency: "IRR",
+      },
+      collection: "خط کوزه‌گری",
+      href: "#",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
+    },
+    {
+      name: "فنجان سرامیکی مینیمال",
+      price: {
+        regular: 19.0,
+        currency: "IRR",
+      },
+      href: "#",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
+    },
+    {
+      name: "فنجان قهوه لعاب‌دار دستی",
+      price: {
+        regular: 19.0,
+        currency: "IRR",
+      },
+      href: "#",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/hosseinqs-vlmuRQjADE4-unsplash-3.jpg",
+    },
+    {
+      name: "کتری چای دست‌ساز",
+      price: {
+        regular: 299.0,
+        currency: "IRR",
+      },
+      href: "#",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/pexels-alejandro-aznar-155337093-29269636-3.jpg",
+    },
+    {
+      name: "ماگ سرامیکی مینیمال",
+      price: {
+        regular: 19.0,
+        currency: "IRR",
+      },
+      href: "#",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8534237-3.jpg",
+    },
+    {
+      name: "گلدان سرامیکی تزئینی",
+      price: {
+        regular: 19.0,
+        currency: "IRR",
+      },
+      href: "#",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/cindy-bartillon-THtfRdrK0nI-unsplash-3.jpg",
+    },
+  ],
+};
+
+const EcommerceHero6 = ({
+  className,
+  title = HERO_DATA.title,
+  image = HERO_DATA.image,
+  cta = HERO_DATA.cta,
+  products = HERO_DATA.products,
+}: EcommerceHero6Props) => {
+  const isDesktop = useMediaQuery("(max-width: 1024px)");
+  return (
+    <header dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container lg:grid lg:grid-cols-3 lg:grid-rows-[43.75rem] lg:gap-5">
+        <div className="h-85 lg:col-span-2 lg:h-auto">
+          <div
+            style={{
+              backgroundImage: `url(${image})`,
+            }}
+            className="relative flex size-full flex-col justify-end overflow-hidden rounded-md bg-cover bg-center bg-no-repeat p-5 after:absolute after:inset-0 after:block after:bg-black/20 sm:p-10"
+          >
+            <div className="relative z-10 space-y-4 text-start">
+              <h1 className="max-w-120 text-3xl tracking-tight text-white md:text-2xll lg:text-2xll">
+                {title}
+              </h1>
+              <Button asChild variant="secondary" size="lg">
+                <a href={cta.href}>{cta.label}</a>
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="max-lg:mt-5">
+          <div className="size-full rounded-md border bg-primary px-4 py-5 sm:py-7.5 md:px-8 lg:py-0 xl:px-18">
+            <Carousel
+              opts={{
+                loop: true,
+              }}
+              plugins={[
+                Autoplay({
+                  delay: 6000,
+                }),
+              ]}
+              className=""
+              orientation={isDesktop ? "horizontal" : "vertical"}
+            >
+              <CarouselContent className="lg:h-178.5">
+                {products.map((product, index) => (
+                  <CarouselItem key={index} className="sm:basis-1/2">
+                    <div className="">
+                      <ProductCard {...product} />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+const ProductCard = ({ image, name, price, href }: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Card className="gap-4 rounded-none p-0">
+      <CardHeader className="relative gap-0 p-0">
+        <a href={href}>
+          <AspectRatio ratio={1.2}>
+            <img
+              src={image}
+              alt={name}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+        </a>
+        <div className="absolute end-3 top-3">
+          <div className="flex flex-col items-center gap-2">
+            <Button variant="secondary" size="icon-sm" aria-label="مشاهده سریع">
+              <Eye />
+            </Button>
+            <Button variant="secondary" size="icon-sm" aria-label="اشتراک‌گذاری">
+              <Share2 />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-5 pb-4 text-start">
+        <div className="space-y-1">
+          <Price onSale={sale != null} className="font-bold">
+            <PriceValue price={sale} currency={currency} variant="sale" />
+            <PriceValue price={regular} currency={currency} variant="regular" />
+          </Price>
+          <CardTitle>
+            <a className="hover:underline" href={href}>
+              {name}
+            </a>
+          </CardTitle>
+        </div>
+        <Button className="w-full" variant="outline">
+          مشاهده سریع
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { EcommerceHero6 };
diff --git a/blocks/ecommerce-hero7.tsx b/blocks/ecommerce-hero7.tsx
new file mode 100644
index 0000000..2784aaa
--- /dev/null
+++ b/blocks/ecommerce-hero7.tsx
@@ -0,0 +1,460 @@
+"use client";
+
+import Autoplay from "embla-carousel-autoplay";
+import { ChevronLeft, ChevronRight, Heart, ShoppingBag } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import {
+  Price,
+  type PriceType,
+  PriceValue,
+} from "@/components/shadcnblocks/price";
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardAction, CardContent, CardTitle } from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type Image = {
+  src: string;
+  srcset?: string;
+  sizes?: string;
+  alt: string;
+};
+
+interface Reviews {
+  rate: number;
+  totalReviewers: string;
+}
+
+type Product = {
+  name: string;
+  category: {
+    label: string;
+    link: string;
+  };
+  images: Array<Image>;
+  link: string;
+  price: PriceType;
+  reviews: Reviews;
+  badges?: Array<string>;
+};
+
+type ProductCardProps = Product;
+
+interface HeroCarouselItem {
+  media: {
+    type: "image" | "video";
+    src: string;
+    alt?: string;
+  };
+  title?: string;
+  description?: string;
+  cta?: {
+    label: string;
+    href: string;
+  };
+  product?: Product;
+}
+
+interface EcommerceHero7Props {
+  className?: string;
+  carouselItems: HeroCarouselItem[];
+}
+const HERO_CAROUSEL: HeroCarouselItem[] = [
+  {
+    title: "آبرسانی عمیق، درخشش محسوس",
+    description:
+      "کرمی سبک روزانه که رطوبت را بازمی‌گرداند، بافت پوست را نرم می‌کند و درخشش طبیعی به پوست می‌بخشد.",
+    media: {
+      type: "video",
+      src: "/block-media/shadcnblocks/block/4153586-hd_1366_720_50fps.mp4",
+    },
+    cta: {
+      label: "خرید کنید",
+      href: "#",
+    },
+    product: {
+      name: "کرم آبرسان لوماگلو",
+      category: {
+        label: "کرم صورت",
+        link: "#",
+      },
+      badges: ["پرفروش", "جدید"],
+      reviews: {
+        rate: 4.5,
+        totalReviewers: "۵٫۸ هزار",
+      },
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-1.jpg 640w",
+          alt: "کرم آبرسان صورت در بسته‌بندی مینیمال",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/onela-ymeri-vaQgJjd9TUY-unsplash-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/skin-care-product/onela-ymeri-vaQgJjd9TUY-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/onela-ymeri-vaQgJjd9TUY-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/onela-ymeri-vaQgJjd9TUY-unsplash-1.jpg 640w",
+          alt: "جزئیات بافت و استفاده از کرم",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      ],
+      link: "#",
+      price: {
+        regular: 49.0,
+        currency: "IRR",
+      },
+    },
+  },
+  {
+    title: "روتین کامل درخشندگی شما",
+    description:
+      "ست مراقبت پوستی منتخب برای پاکسازی، آبرسانی و بازسازی؛ برای پوستی متعادل و درخشان.",
+    media: {
+      type: "image",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-amelie-chen-243775000-12352170-3.jpg",
+      alt: "ست کامل مراقبت پوست",
+    },
+    cta: {
+      label: "خرید کنید",
+      href: "#",
+    },
+    product: {
+      name: "ست روتین درخشندگی",
+      category: {
+        label: "ست مراقبت پوست",
+        link: "#",
+      },
+      badges: ["پرفروش", "جدید"],
+      reviews: {
+        rate: 5,
+        totalReviewers: "۵٫۸ هزار",
+      },
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-amelie-chen-243775000-12352170-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-amelie-chen-243775000-12352170-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-amelie-chen-243775000-12352170-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-amelie-chen-243775000-12352170-1.jpg 640w",
+          alt: "ست کامل مراقبت پوست روی پس‌زمینه خنثی",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/ibnu-ihza-Z7u2bpbE65Q-unsplash-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/skin-care-product/ibnu-ihza-Z7u2bpbE65Q-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/ibnu-ihza-Z7u2bpbE65Q-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/ibnu-ihza-Z7u2bpbE65Q-unsplash-1.jpg 640w",
+          alt: "بطری‌های مراقبت پوست برای روتین روزانه",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      ],
+      link: "#",
+      price: {
+        regular: 499.0,
+        sale: 389.0,
+        currency: "IRR",
+      },
+    },
+  },
+  {
+    title: "درخشش را حفظ کنید",
+    description:
+      "اسپری تازه‌کننده‌ای که رطوبت را قفل می‌کند، درخشش را تقویت می‌کند و پوست را تمام روز شاداب نگه می‌دارد.",
+    media: {
+      type: "image",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-rdne-8903695-3.jpg",
+      alt: "اسپری صورت برای آبرسانی",
+    },
+    cta: {
+      label: "خرید کنید",
+      href: "#",
+    },
+    product: {
+      name: "اسپری حفظ درخشندگی",
+      category: {
+        label: "اسپری صورت",
+        link: "#",
+      },
+      badges: ["جدید"],
+      reviews: {
+        rate: 5,
+        totalReviewers: "۵٫۸ هزار",
+      },
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-rdne-8903695-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-rdne-8903695-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-rdne-8903695-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-rdne-8903695-1.jpg 640w",
+          alt: "استفاده از اسپری صورت برای آبرسانی",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/nora-hutton-AjU6Z5k_uBI-unsplash-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/skin-care-product/nora-hutton-AjU6Z5k_uBI-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/nora-hutton-AjU6Z5k_uBI-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/nora-hutton-AjU6Z5k_uBI-unsplash-1.jpg 640w",
+          alt: "بطری اسپری در نور طبیعی ملایم",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      ],
+      link: "#",
+      price: {
+        regular: 69.0,
+        currency: "IRR",
+      },
+    },
+  },
+];
+
+const EcommerceHero7 = ({
+  className,
+  carouselItems = HERO_CAROUSEL,
+}: EcommerceHero7Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(1);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = (api: CarouselApi) => {
+      if (!api) return;
+      setCurrent(api?.selectedScrollSnap());
+    };
+    api.on("reInit", updateCurrent).on("select", updateCurrent);
+
+    return () => {
+      api.off("reInit", updateCurrent).off("select", updateCurrent);
+    };
+  }, [api]);
+
+  return (
+    <header dir="rtl" lang="fa" className={cn("", className)}>
+      <div className="relative">
+        <Carousel
+          opts={{
+            loop: true,
+          }}
+          plugins={[
+            Autoplay({
+              delay: 6000,
+            }),
+          ]}
+          setApi={setApi}
+        >
+          <CarouselContent className="m-0">
+            {carouselItems.map(
+              ({ title, description, media, product, cta }, index) => (
+                <CarouselItem className="group h-dvh min-h-170 p-0" key={index}>
+                  <div className="relative flex size-full flex-col items-center justify-end px-4 py-25 after:absolute after:inset-0 after:block after:bg-black/20 lg:px-40">
+                    <div
+                      className={cn(
+                        "relative z-10 w-full",
+                        "flex flex-col gap-13 md:flex-row",
+                        "md:items-end md:group-odd:flex-row-reverse",
+                      )}
+                    >
+                      <div className="flex flex-1 flex-col gap-4 text-start md:group-even:items-end md:group-even:justify-end">
+                        <h1 className="font-serif text-2xll text-white md:text-2xll md:group-even:text-start lg:text-2xll">
+                          {title}
+                        </h1>
+                        <p className="max-w-130 text-lg text-white md:group-even:text-start">
+                          {description}
+                        </p>
+                        {cta && (
+                          <Button
+                            asChild
+                            variant="secondary"
+                            className="mt-1 self-start rounded-full md:group-even:self-end"
+                          >
+                            <a href={cta.href}>{cta.label}</a>
+                          </Button>
+                        )}
+                      </div>
+                      {product && (
+                        <div className="md:basis-80">
+                          <ProductCard {...product} />
+                        </div>
+                      )}
+                    </div>
+                    <div className="absolute inset-0">
+                      {media.type === "image" ? (
+                        <img
+                          src={media.src}
+                          alt={media.alt}
+                          className="block size-full object-cover object-center"
+                        />
+                      ) : (
+                        <video
+                          loop
+                          muted
+                          autoPlay
+                          src={media.src}
+                          className="block size-full object-cover object-center"
+                        ></video>
+                      )}
+                    </div>
+                  </div>
+                </CarouselItem>
+              ),
+            )}
+          </CarouselContent>
+          <div className="pointer-events-none absolute bottom-12.5 contents flex w-full translate-y-1/2 items-center justify-between px-2 lg:top-1/2 lg:-translate-y-1/2 lg:px-12">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="pointer-events-auto size-12 rounded-full text-white"
+              onClick={() => api?.scrollPrev()}
+              aria-label="اسلاید قبلی"
+            >
+              <ChevronLeft className="size-11 stroke-1 rtl:rotate-180" />
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => api?.scrollNext()}
+              className="pointer-events-auto size-12 rounded-full text-white"
+              aria-label="اسلاید بعدی"
+            >
+              <ChevronRight className="size-11 stroke-1 rtl:rotate-180" />
+            </Button>
+          </div>
+        </Carousel>
+        <div className="absolute inset-x-0 bottom-12.5 translate-y-1/2">
+          <ol className="flex items-center justify-center gap-3">
+            {api?.scrollSnapList().map((_, index) => (
+              <button
+                key={index}
+                onClick={() => api?.scrollTo(index)}
+                data-state={current === index ? "active" : "inactive"}
+                aria-label={`رفتن به اسلاید ${(index + 1).toLocaleString("fa-IR")}`}
+                className="block size-2.5 rounded-full border border-primary data-[state=active]:bg-primary"
+              ></button>
+            ))}
+          </ol>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+const ProductCard = ({
+  images,
+  link,
+  name,
+  category,
+  price,
+  badges,
+  reviews,
+}: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Card className="group w-full rounded-none border-none bg-background p-0 shadow-none md:max-w-[57.5rem]">
+      <CardContent className="flex flex-row p-0 md:flex-col">
+        <div className="relative basis-30 self-stretch overflow-hidden md:basis-auto">
+          <div className="absolute inset-x-0 top-0 z-20 max-md:hidden">
+            {badges && (
+              <ul className="flex flex-col gap-2 p-4">
+                {badges.map((text, index) => (
+                  <Badge
+                    variant="secondary"
+                    className="uppercase"
+                    key={`product-list-13-card-badge-${index}`}
+                  >
+                    {text}
+                  </Badge>
+                ))}
+              </ul>
+            )}
+          </div>
+          <div className="size-full overflow-hidden md:aspect-[0.8]">
+            {images.map((img, index) => (
+              <img
+                key={`product-list-13-card-img-${index}`}
+                srcSet={img.srcset}
+                src={img.src}
+                sizes={img.sizes}
+                alt={img.alt}
+                className="absolute inset-0 size-full origin-center object-cover object-center transition-all duration-500 group-hover:scale-105 first:opacity-100 group-hover:first:not-only:opacity-0 nth-2:opacity-0 group-hover:nth-2:opacity-100"
+              />
+            ))}
+          </div>
+          <div className="absolute inset-x-0 bottom-0 z-10 overflow-hidden max-md:hidden">
+            <div className="flex gap-4 p-4">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="rounded-full duration-350 lg:translate-y-[calc(100%+1rem)] lg:transition-transform lg:group-hover:translate-y-0"
+                aria-label="افزودن به سبد خرید"
+              >
+                <ShoppingBag />
+              </Button>
+              <CardAction className="flex-1 translate-y-[calc(100%+1rem)] transition-transform duration-350 group-hover:translate-y-0">
+                <Button
+                  size="lg"
+                  variant="secondary"
+                  className="w-full rounded-full"
+                >
+                  مشاهده سریع
+                </Button>
+              </CardAction>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="rounded-full"
+                aria-label="افزودن به علاقه‌مندی‌ها"
+              >
+                <Heart />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="px-2 py-4 text-start">
+          <a
+            href={category.link}
+            className="mb-2 text-sm leading-normal font-light uppercase"
+          >
+            {category.label}
+          </a>
+          <div className="flex items-start justify-between gap-4 max-md:flex-col">
+            <CardTitle className="flex-1">
+              <a href={link} className="leading-normal font-medium">
+                {name}
+              </a>
+            </CardTitle>
+            <Price onSale={sale != null} className="gap-1 text-lg">
+              <PriceValue price={sale} currency={currency} variant="sale" />
+              <PriceValue
+                price={regular}
+                currency={currency}
+                variant="regular"
+              />
+            </Price>
+          </div>
+          <div className="mt-1.5 flex flex-wrap items-center gap-2.5">
+            <Rating
+              className="[&_svg]:size-3.5 [&>div]:size-3.5"
+              rate={reviews.rate}
+            />
+            <p className="text-xs leading-relaxed text-muted-foreground">
+              {reviews.totalReviewers} نظر
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { EcommerceHero7 };
diff --git a/blocks/ecommerce-hero8.tsx b/blocks/ecommerce-hero8.tsx
new file mode 100644
index 0000000..2093dcc
--- /dev/null
+++ b/blocks/ecommerce-hero8.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import Autoplay from "embla-carousel-autoplay";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type Product = {
+  name: string;
+  image: string;
+  href: string;
+};
+
+interface HeroCarouselItem {
+  image: string;
+  title?: string;
+  description?: string;
+  cta?: {
+    label: string;
+    href: string;
+  };
+  product?: Product;
+}
+
+const HERO_CAROUSEL = [
+  {
+    title: "ظرافت بی‌دردسر مو",
+    description:
+      "اکسسوری‌های مو با طراحی ظریف که با لمس طلایی، استایل روزمره را ارتقا می‌دهند.",
+    cta: {
+      label: "خرید اکسسوری مو",
+      href: "#",
+    },
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Blonde-Hairstyle-2.png",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Golden-Hair-Clip-Close-Up-2.png",
+      href: "#",
+      name: "گیره مو طلایی",
+    },
+  },
+  {
+    title: "استایل خیابانی ماندگار",
+    description:
+      "سیلوئت‌های کلاسیک و تن‌های خنثی برای استایلی مدرن و باوقار.",
+    cta: {
+      label: "خرید کلاه",
+      href: "#",
+    },
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Fashionable-Pose-2.png",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Beige-Fedora-1.png",
+      href: "#",
+      name: "کلاه فدورا بژ",
+    },
+  },
+  {
+    title: "جزئیات چشمگیر",
+    description:
+      "جواهرات ظریف که به هر لباسی شخصیت و اعتماد به نفس می‌بخشد.",
+    cta: {
+      label: "مشاهده جواهرات",
+      href: "#",
+    },
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Seated-Portrait-2.png",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Hand-Jewelry-1.png",
+      href: "#",
+      name: "زیورآلات زنجیر دست",
+    },
+  },
+  {
+    title: "جسور و براق",
+    description:
+      "عینک آفتابی شیک برای ظاهری تیز و محافظت در برابر نور روز.",
+    cta: {
+      label: "خرید عینک آفتابی",
+      href: "#",
+    },
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Woman-Portrait-2.png",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Sunglasses-Close-Up-2.png",
+      href: "#",
+      name: "عینک آفتابی مدرن",
+    },
+  },
+  {
+    title: "پوشش راحتی مدرن",
+    description:
+      "برش‌های راحت و خطوط تمیز برای لباس پوشیدن روزمره بی‌دردسر.",
+    cta: {
+      label: "خرید پوشاک",
+      href: "#",
+    },
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-m-2.png",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-2.png",
+      href: "#",
+      name: "ست استایل راحتی",
+    },
+  },
+];
+
+interface EcommerceHero8Props {
+  className?: string;
+  carouselItems: HeroCarouselItem[];
+}
+
+const EcommerceHero8 = ({
+  className,
+  carouselItems = HERO_CAROUSEL,
+}: EcommerceHero8Props) => {
+  const [mainCarouselApi, setMainCarouselApi] = useState<CarouselApi>();
+  const [secondaryCarouselApi, setSecondaryCarouselApi] =
+    useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    if (!mainCarouselApi) return;
+
+    const updateCurrent = (api: CarouselApi) => {
+      if (!api) return;
+      setCurrent(api?.selectedScrollSnap());
+      secondaryCarouselApi?.scrollTo(api?.selectedScrollSnap());
+    };
+    mainCarouselApi.on("reInit", updateCurrent).on("select", updateCurrent);
+
+    return () => {
+      mainCarouselApi.off("reInit", updateCurrent).off("select", updateCurrent);
+    };
+  }, [mainCarouselApi, secondaryCarouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("", className)}>
+      <div className="relative space-y-5">
+        <Carousel
+          setApi={setMainCarouselApi}
+          opts={{
+            loop: true,
+          }}
+          plugins={[Autoplay()]}
+        >
+          <CarouselContent className="m-0">
+            {carouselItems.map(({ title, image, description, cta }, index) => (
+              <CarouselItem
+                key={index}
+                className="h-dvh min-h-150 bg-muted p-0"
+              >
+                <div
+                  style={{
+                    backgroundImage: `url(${image})`,
+                  }}
+                  data-state={current === index ? "active" : "inactive"}
+                  className="group relative size-full bg-cover bg-center bg-no-repeat after:absolute after:inset-0 after:bg-black/40"
+                >
+                  <div className="relative z-10 flex size-full flex-col justify-end px-5 pb-50 lg:py-15">
+                    <div className="flex">
+                      <div className="space-y-7.5 text-start lg:basis-[calc(100%-620px)]">
+                        <h2 className="max-w-100 font-serif text-2xll text-white delay-500 duration-600 group-data-[state=active]:animate-in group-data-[state=active]:slide-in-from-bottom-30 group-data-[state=active]:fade-in group-data-[state=inactive]:opacity-0">
+                          {title}
+                        </h2>
+                        <p className="max-w-100 text-lg text-balance text-white duration-800 group-data-[state=active]:animate-in group-data-[state=active]:slide-in-from-bottom-60 group-data-[state=active]:fade-in">
+                          {description}
+                        </p>
+                        {cta && (
+                          <div className="duration-1000 group-data-[state=active]:animate-in group-data-[state=active]:slide-in-from-bottom-80 group-data-[state=active]:fade-in">
+                            <Button asChild size="lg" variant="outline">
+                              <a href={cta?.href}>{cta?.label}</a>
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        <div className="lg:absolute lg:end-0 lg:bottom-5">
+          <div className="space-y-4.5 ps-5">
+            <h3 className="text-start font-light lg:text-white">
+              کشف مجموعه ما
+            </h3>
+            <Carousel
+              opts={{
+                align: "start",
+                loop: true,
+              }}
+              setApi={setSecondaryCarouselApi}
+              className="lg:max-w-150"
+            >
+              <CarouselContent>
+                {carouselItems.map(({ product }, index) => (
+                  <CarouselItem
+                    key={index}
+                    className="basis-[75%] lg:basis-[60%]"
+                  >
+                    <a
+                      href={product?.href}
+                      className="group relative block aspect-[1.4] overflow-hidden p-3 after:absolute after:inset-0 after:bg-black/30"
+                    >
+                      <div className="relative z-10 flex size-full flex-col justify-end text-start">
+                        <h3 className="font-serif text-xl font-semibold text-white sm:text-xl">
+                          {product?.name}
+                        </h3>
+                      </div>
+
+                      <div className="absolute inset-0">
+                        <img
+                          src={product?.image}
+                          alt={product?.name}
+                          className="block size-full origin-center object-cover object-center transition-transform duration-500 group-hover:scale-110"
+                        />
+                      </div>
+                    </a>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { EcommerceHero8 };
diff --git a/blocks/ecommerce-navbar1.tsx b/blocks/ecommerce-navbar1.tsx
new file mode 100644
index 0000000..3080856
--- /dev/null
+++ b/blocks/ecommerce-navbar1.tsx
@@ -0,0 +1,1018 @@
+"use client";
+import clsx from "clsx";
+import {
+  ChevronLeft,
+  ChevronRight,
+  CircleUserRound,
+  type LucideIcon,
+  Menu,
+  Phone,
+  Search,
+  Send,
+  ShoppingBag,
+  X,
+} from "lucide-react";
+import { type CSSProperties, Fragment, useState } from "react";
+
+import {
+  Logo,
+  LogoImage,
+  LogoTextDesktop,
+} from "@/components/shadcnblocks/logo";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { useIsMobile } from "@/hooks/use-mobile";
+import usePreventScrollLock from "@/hooks/usePreventScrollLock";
+import { cn } from "@/lib/utils";
+
+type MegaMenuSectionType = {
+  label: string;
+  href: string;
+  id: string;
+  imageSrc: string;
+  items: {
+    label: string;
+    href: string;
+  }[];
+};
+
+type FeaturedItemType = {
+  imageSrc: string;
+  href: string;
+  label: string;
+};
+
+type MenuItemType = {
+  label: string;
+  href?: string;
+  accentColor?: string;
+  id?: string;
+  megaMenu?: {
+    sections?: MegaMenuSectionType[];
+    featuredItems?: FeaturedItemType[];
+  };
+};
+
+type SocialIcon = {
+  title: string;
+  light: string;
+  dark: string;
+};
+
+type SocialLink = {
+  href: string;
+  icon: SocialIcon;
+};
+
+type HelpfullLink = {
+  href: string;
+  label: string;
+};
+
+type ContactInfoItem = {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+type HomeLink = {
+  href: string;
+  logo: {
+    src: string;
+    alt: string;
+  };
+};
+
+type MenuItemProps = MenuItemType;
+
+interface EcommerceNavbar1Props {
+  menu: MenuItemType[];
+  socialLinks?: SocialLink[];
+  helpfulLinks?: HelpfullLink[];
+  contactInfo?: ContactInfoItem[];
+  home: HomeLink;
+  className?: string;
+}
+
+interface MenuLinksListProps {
+  lists?: MegaMenuSectionType[];
+}
+
+interface MenuFeaturedLinksProps {
+  lists?: FeaturedItemType[];
+}
+
+interface MenuLinksProps {
+  list: MegaMenuSectionType;
+}
+
+interface MobileNavProps {
+  menu: MenuItemType[];
+  socialLinks?: SocialLink[];
+  helpfulLinks?: HelpfullLink[];
+  contactInfo?: ContactInfoItem[];
+}
+
+type MenuFeaturedLinkProps = FeaturedItemType;
+
+interface MegaMenuMobileProps {
+  menuItem?: MenuItemType;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  openSubMenu: boolean;
+  handleOnSubMenuClick: (id?: string) => void;
+  linkStyle?: string;
+  closeAll: () => void;
+}
+
+interface SubMenuMobileProps {
+  subMenu?: MegaMenuSectionType;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  linkStyle?: string;
+  closeAll: () => void;
+}
+
+interface SocialMediaSectionProps {
+  links?: SocialLink[];
+}
+
+interface HelpfullLinksProps {
+  links?: HelpfullLink[];
+}
+
+interface ContactInfoListProps {
+  links?: ContactInfoItem[];
+}
+
+const HELPFULL_LINKS = [
+  {
+    label: "مرجوعی و تعویض",
+    href: "#",
+  },
+  {
+    label: "ارسال و پیگیری",
+    href: "#",
+  },
+  {
+    label: "شرایط و ضوابط",
+    href: "#",
+  },
+];
+
+const CONTACT_INFO = [
+  {
+    label: "+1 855-987-4420",
+    href: "tel:+18559874420",
+    icon: Phone,
+  },
+  {
+    label: "support@fashion.co",
+    href: "mailto:support@fashion.co",
+    icon: Send,
+  },
+];
+
+const SOCIAL_ICONS = {
+  facebook: {
+    title: "Facebook",
+    light:
+      "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+  },
+  x: {
+    title: "X",
+    light:
+      "/block-media/shadcnblocks/block/logos/x.svg",
+    dark: "/block-media/shadcnblocks/block/logos/x.svg",
+  },
+  instagram: {
+    title: "Instagram",
+    light:
+      "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+} as const;
+
+const SOCIAL_MEDIA_LINKS = [
+  { icon: SOCIAL_ICONS.facebook, href: "#" },
+  { icon: SOCIAL_ICONS.x, href: "#" },
+  { icon: SOCIAL_ICONS.instagram, href: "#" },
+];
+
+const MENU = [
+  {
+    id: "store",
+    label: "فروشگاه",
+    href: "#",
+    megaMenu: {
+      sections: [
+        {
+          label: "اکسسوری",
+          href: "#",
+          id: "accessories",
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Watch-on-Womans-Wrist-2.png",
+          items: [
+            { label: "کیف و کوله", href: "#" },
+            { label: "کلاه", href: "#" },
+            { label: "کمربند", href: "#" },
+            { label: "جواهرات", href: "#" },
+            { label: "عینک آفتابی", href: "#" },
+            { label: "ساعت", href: "#" },
+          ],
+        },
+        {
+          label: "مردانه",
+          href: "#",
+          id: "men",
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764036-2.jpg",
+          items: [
+            { label: "تازه‌ها", href: "#" },
+            { label: "تی‌شرت", href: "#" },
+            { label: "پیراهن", href: "#" },
+            { label: "کت و کاپشن", href: "#" },
+            { label: "شلوار", href: "#" },
+            { label: "کفش", href: "#" },
+          ],
+        },
+        {
+          label: "زنانه",
+          href: "#",
+          id: "women",
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881454-2.jpg",
+          items: [
+            { label: "تازه‌ها", href: "#" },
+            { label: "لباس", href: "#" },
+            { label: "تاپ و بلوز", href: "#" },
+            { label: "پوشاک بیرونی", href: "#" },
+            { label: "دامن", href: "#" },
+            { label: "کفش", href: "#" },
+          ],
+        },
+      ],
+      featuredItems: [
+        {
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Summer-Fashion-Duo-2.png",
+          href: "#",
+          label: "پیشنهاد تابستانه",
+        },
+        {
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Contemplative-Casual-Chic-2.png",
+          href: "#",
+          label: "پرفروش‌ترین‌ها",
+        },
+      ],
+    },
+  },
+  {
+    id: "collections",
+    label: "مجموعه‌ها",
+    href: "#",
+    megaMenu: {
+      sections: [
+        {
+          label: "بر اساس سبک",
+          href: "#",
+          id: "by-style",
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+          items: [
+            { label: "مینیمال", href: "#" },
+            { label: "کلاسیک", href: "#" },
+            { label: "مدرن", href: "#" },
+            { label: "راحتی", href: "#" },
+            { label: "رسمی", href: "#" },
+            { label: "ورزشی", href: "#" },
+          ],
+        },
+        {
+          label: "بر اساس مناسبت",
+          href: "#",
+          id: "by-occasion",
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png",
+          items: [
+            { label: "کار و اداری", href: "#" },
+            { label: "آخر هفته", href: "#" },
+            { label: "مهمانی", href: "#" },
+            { label: "سفر", href: "#" },
+            { label: "روزمره", href: "#" },
+            { label: "فصل جدید", href: "#" },
+          ],
+        },
+        {
+          label: "مجموعه‌های ویژه",
+          href: "#",
+          id: "curated",
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Fashion-Portrait-2.png",
+          items: [
+            { label: "محصولات ضروری", href: "#" },
+            { label: "پرفروش‌ترین‌ها", href: "#" },
+            { label: "نسخه محدود", href: "#" },
+            { label: "ست‌های آماده", href: "#" },
+            { label: "هدایای منتخب", href: "#" },
+            { label: "همکاری‌های ویژه", href: "#" },
+          ],
+        },
+      ],
+      featuredItems: [
+        {
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+          href: "#",
+          label: "محصولات ضروری",
+        },
+        {
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+          href: "#",
+          label: "کلاسیک مینیمال",
+        },
+        {
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+          href: "#",
+          label: "لباس کار مدرن",
+        },
+        {
+          imageSrc:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+          href: "#",
+          label: "لباس آخر هفته",
+        },
+      ],
+    },
+  },
+  {
+    label: "حراج",
+    href: "#",
+    accentColor: "oklch(58.6% 0.253 17.585)",
+  },
+  {
+    label: "وبلاگ",
+    href: "#",
+  },
+];
+
+const HOME = {
+  href: "https://ShadcnBlocks",
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+  },
+};
+
+const EcommerceNavbar1 = ({
+  menu = MENU,
+  home = HOME,
+  helpfulLinks = HELPFULL_LINKS,
+  socialLinks = SOCIAL_MEDIA_LINKS,
+  contactInfo = CONTACT_INFO,
+  className,
+}: EcommerceNavbar1Props) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <div dir="rtl" lang="fa" className={cn("relative w-full overflow-visible text-start", className)}>
+      {isMobile ? (
+        <div className="md:hidden">
+          <MobileNav
+            menu={menu}
+            helpfulLinks={helpfulLinks}
+            socialLinks={socialLinks}
+            contactInfo={contactInfo}
+          />
+        </div>
+      ) : (
+        <NavigationMenu
+          dir="rtl"
+          viewport={false}
+          className="relative z-50 w-full max-w-full overflow-visible border-b max-md:hidden [&>div]:w-full"
+        >
+          <NavigationMenuList asChild className="h-fit min-h-17.5 px-7.5">
+            <div className="flex items-center gap-6 overflow-visible">
+              <div>
+                <Logo url={home.href}>
+                  <LogoImage
+                    src={home.logo.src}
+                    alt={home.logo.alt}
+                    className="size-8 dark:invert"
+                  />
+                  <LogoTextDesktop className="font-medium text-foreground">
+                    ری یو آی
+                  </LogoTextDesktop>
+                </Logo>
+              </div>
+              <div className="flex items-center gap-1">
+                {menu.map((item, index) => (
+                  <NavigationMenuItem key={index} className="static">
+                    <MenuItem {...item} />
+                  </NavigationMenuItem>
+                ))}
+              </div>
+              <div className="ms-auto flex items-center gap-4">
+                <CountrySelector />
+                <SecondaryNav />
+              </div>
+            </div>
+          </NavigationMenuList>
+        </NavigationMenu>
+      )}
+    </div>
+  );
+};
+
+const MenuItem = ({ label, href, megaMenu, accentColor }: MenuItemProps) => {
+  const menuLinkStyle = "text-xs font-semibold px-4";
+  if (!megaMenu) {
+    return (
+      <NavigationMenuLink
+        asChild
+        style={{
+          color: accentColor,
+        }}
+        className={menuLinkStyle}
+      >
+        <a href={href}>{label}</a>
+      </NavigationMenuLink>
+    );
+  }
+
+  return (
+    <Fragment>
+      <NavigationMenuTrigger
+        style={{
+          color: accentColor,
+        }}
+        className={menuLinkStyle}
+      >
+        {label}
+      </NavigationMenuTrigger>
+      <NavigationMenuContent
+        className={clsx(
+          "inset-x-0 start-0 end-0",
+          "z-50 mt-0! h-auto max-h-none min-h-0 rounded-none! p-0",
+          "!overflow-visible shadow-md",
+          "group-data-[viewport=false]/navigation-menu:!overflow-visible",
+          "group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-none! group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-none!",
+        )}
+      >
+        <div className="mx-auto w-full max-w-7xl px-7.5 py-10.5">
+          <div className="relative flex items-start justify-center gap-6 overflow-visible">
+            {megaMenu?.sections && (
+              <div
+                className={clsx(
+                  "relative z-10 min-w-0",
+                  megaMenu?.featuredItems && "basis-[60%]",
+                )}
+              >
+                <MenuLinksList lists={megaMenu?.sections} />
+              </div>
+            )}
+            {megaMenu?.featuredItems && (
+              <div
+                className={clsx(
+                  "relative z-0 shrink-0",
+                  megaMenu?.sections ? "basis-[40%]" : "flex-1",
+                )}
+              >
+                <MenuFeaturedLinks lists={megaMenu?.featuredItems} />
+              </div>
+            )}
+          </div>
+        </div>
+      </NavigationMenuContent>
+    </Fragment>
+  );
+};
+
+const MenuLinksList = ({ lists }: MenuLinksListProps) => {
+  if (!lists) return;
+
+  return (
+    <ul className="relative z-10 flex gap-7.5">
+      {lists.map((list, index) => (
+        <li key={index} className="basis-1/3">
+          <MenuLinks list={list} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const MenuLinks = ({ list }: MenuLinksProps) => {
+  const { label, href, items } = list;
+
+  return (
+    <div className="space-y-1.5">
+      <h2 className="px-1 text-xs leading-relaxed font-semibold">
+        <a href={href}>{label}</a>
+      </h2>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            <a
+              className="block w-full rounded-sm px-1 py-0.5 text-xs leading-normal text-muted-foreground hover:bg-muted"
+              href={item.href}
+            >
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+const MenuFeaturedLinks = ({ lists }: MenuFeaturedLinksProps) => {
+  if (!lists) return;
+
+  return (
+    <div className="relative z-0 flex gap-7.5">
+      {lists.map((item, index) => (
+        <div className="flex-1" key={index}>
+          <MenuFeaturedLink {...item} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const MenuFeaturedLink = ({ href, imageSrc, label }: MenuFeaturedLinkProps) => {
+  return (
+    <a href={href} className="group/feat-link relative z-0 block space-y-3">
+      <AspectRatio className="relative overflow-hidden">
+        <img
+          src={imageSrc}
+          alt={label}
+          className="block size-full object-cover object-center transition-all duration-500 group-hover/feat-link:scale-105 group-hover/feat-link:opacity-80"
+        />
+      </AspectRatio>
+      <div className="text-center text-xs leading-relaxed font-semibold">
+        {label}
+      </div>
+    </a>
+  );
+};
+
+const SecondaryNav = () => {
+  return (
+    <div className="flex items-center gap-1">
+      <Button variant="ghost" size="icon" aria-label="حساب کاربری">
+        <CircleUserRound />
+      </Button>
+      <div className="relative">
+        <Button variant="ghost" size="icon" aria-label="سبد خرید">
+          <ShoppingBag />
+        </Button>
+        <div className="absolute -top-4 start-1/2 -translate-x-1/2">
+          <Badge className="text-[0.5rem]">۰</Badge>
+        </div>
+      </div>
+      <Button variant="ghost" size="icon" aria-label="جستجو">
+        <Search />
+      </Button>
+    </div>
+  );
+};
+
+const CountrySelector = ({ className }: { className?: string }) => {
+  return (
+    <Select defaultValue="IR">
+      <SelectTrigger
+        className={cn(
+          "w-42 border-none text-xs leading-relaxed font-semibold text-muted-foreground shadow-none",
+          className,
+        )}
+      >
+        <SelectValue placeholder="انتخاب کشور" />
+      </SelectTrigger>
+      <SelectContent align="start">
+        <SelectItem value="IR">ایران (تومان)</SelectItem>
+        <SelectItem value="US">آمریکا (دلار)</SelectItem>
+        <SelectItem value="FR">فرانسه (یورو)</SelectItem>
+        <SelectItem value="AUS">استرالیا (دلار)</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+};
+
+const MobileNav = ({
+  menu,
+  socialLinks,
+  helpfulLinks,
+  contactInfo,
+}: MobileNavProps) => {
+  const [open, setOpen] = useState(false);
+  const [openMegaMenu, setOpenMegaMenu] = useState(false);
+  const [openSubMenu, setOpenSubMenu] = useState(false);
+
+  const [menuItem, setMenuItem] = useState<MenuItemType>();
+  const [subMenu, setSubMenu] = useState<MegaMenuSectionType>();
+
+  usePreventScrollLock(open);
+
+  const closeAll = () => {
+    setOpen(false);
+    setOpenMegaMenu(false);
+    setOpenSubMenu(false);
+  };
+
+  const handleMegaMenu = (value: boolean) => {
+    setOpenMegaMenu(value);
+  };
+
+  const handleSheet = () => {
+    setOpen((state) => !state);
+  };
+
+  const handleOnMenuItemClick = (id?: string) => {
+    const foundMenu = menu.find((item) => item.id === id);
+
+    setMenuItem(foundMenu);
+    setOpenMegaMenu(true);
+  };
+
+  const handleSubMenu = (value: boolean) => {
+    setOpenSubMenu(value);
+  };
+
+  const handleOnSubMenuClick = (id?: string) => {
+    const foundMenu = menuItem?.megaMenu?.sections?.find(
+      (item) => item.id === id,
+    );
+
+    setSubMenu(foundMenu);
+    setOpenSubMenu(true);
+  };
+
+  const linkStyle =
+    "flex w-full py-4 px-2 justify-between hover:bg-inherit rounded-none h-fit border-b font-semibold hover:no-underline text-sm leading-relaxed";
+
+  return (
+    <Fragment>
+      <nav className="h-15 border-b bg-background">
+        <div className="flex h-full items-center gap-4 px-4">
+          <Logo url="https://ShadcnBlocks">
+            <LogoImage
+              src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+              alt="لوگو"
+              className="size-8 dark:invert"
+            />
+          </Logo>
+          <div className="ms-auto flex items-center gap-2">
+            <SecondaryNav />
+            <Button onClick={handleSheet} size="icon" variant="ghost" aria-label="باز کردن منو">
+              <Menu />
+            </Button>
+          </div>
+        </div>
+      </nav>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent
+          style={
+            {
+              "--padding-top": "1.25rem",
+              "--header-height": "2.25rem",
+              "--footer-height": "4rem",
+              "--sheet-width": "27.75rem",
+            } as CSSProperties
+          }
+          side="right"
+          className="w-full sm:max-w-[var(--sheet-width)] [&>button]:hidden"
+          aria-describedby={undefined}
+          onInteractOutside={(e: Event) => {
+            if (openMegaMenu) {
+              e.preventDefault();
+            }
+          }}
+        >
+          <div className="h-full pt-5">
+            <SheetHeader className="h-9 p-0 px-6">
+              <SheetTitle className="sr-only">منوی موبایل</SheetTitle>
+              <div className="flex items-center justify-between gap-5">
+                <SheetClose asChild>
+                  <Button size="icon" variant="ghost" aria-label="بستن منو">
+                    <X />
+                  </Button>
+                </SheetClose>
+                <Button variant="ghost">
+                  <CircleUserRound />
+                  ورود
+                </Button>
+              </div>
+            </SheetHeader>
+            <div className="h-[calc(100dvh-var(--padding-top)-var(--header-height)-var(--footer-height))] overflow-auto">
+              <div className="px-6 py-5">
+                <div>
+                  {menu.map(
+                    ({ megaMenu, id, label, accentColor, href }, index) =>
+                      megaMenu ? (
+                        <Button
+                          key={index}
+                          className={linkStyle}
+                          variant="ghost"
+                          onClick={() => handleOnMenuItemClick(id)}
+                        >
+                          {label}
+                          <ChevronRight className="rtl:rotate-180" />
+                        </Button>
+                      ) : (
+                        <a
+                          style={{
+                            color: accentColor,
+                          }}
+                          className={linkStyle}
+                          href={href}
+                          key={index}
+                        >
+                          {label}
+                        </a>
+                      ),
+                  )}
+                </div>
+                <div className="mt-6 space-y-5">
+                  <HelpfullLinks links={helpfulLinks} />
+                  <div>
+                    <ContactInfoList links={contactInfo} />
+                    <SocialMediaSection links={socialLinks} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <SheetFooter className="absolute inset-x-0 bottom-0 border-t bg-background px-6 py-4">
+            <CountrySelector className="w-full" />
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+      <MegaMenuMobile
+        menuItem={menuItem}
+        open={openMegaMenu}
+        onOpenChange={handleMegaMenu}
+        openSubMenu={openSubMenu}
+        handleOnSubMenuClick={handleOnSubMenuClick}
+        linkStyle={linkStyle}
+        closeAll={closeAll}
+      />
+      <SubMenuMobile
+        subMenu={subMenu}
+        onOpenChange={handleSubMenu}
+        open={openSubMenu}
+        linkStyle={linkStyle}
+        closeAll={closeAll}
+      />
+    </Fragment>
+  );
+};
+
+const MegaMenuMobile = ({
+  menuItem,
+  open,
+  onOpenChange,
+  openSubMenu,
+  handleOnSubMenuClick,
+  linkStyle,
+  closeAll,
+}: MegaMenuMobileProps) => {
+  if (!menuItem) return;
+
+  return (
+    <Fragment>
+      <Sheet open={open} onOpenChange={onOpenChange} modal={false}>
+        <SheetContent
+          side="right"
+          aria-describedby={undefined}
+          className="w-full gap-0 overflow-auto px-6 pt-5 pb-10 sm:max-w-[27.75rem] [&>button]:hidden"
+          onInteractOutside={(e: Event) => {
+            if (openSubMenu) {
+              e.preventDefault();
+            }
+          }}
+        >
+          <SheetHeader className="p-0">
+            <div className="flex items-center justify-between gap-5">
+              <Button onClick={closeAll} size="icon" variant="ghost" aria-label="بستن منو">
+                <X />
+              </Button>
+            </div>
+            <div className="flex items-center py-4">
+              <Button
+                onClick={(e: React.MouseEvent) => {
+                  e.stopPropagation();
+                  onOpenChange(false);
+                }}
+                variant="ghost"
+                aria-label="بازگشت"
+              >
+                <ChevronLeft className="rtl:rotate-180" />
+              </Button>
+              <SheetTitle className="flex-1 text-center text-sm">
+                {menuItem.label}
+              </SheetTitle>
+            </div>
+          </SheetHeader>
+          <div className="space-y-6">
+            <div>
+              {menuItem?.megaMenu?.sections?.map(({ label, id }, index) => (
+                <Button
+                  onClick={() => {
+                    handleOnSubMenuClick(id);
+                  }}
+                  key={index}
+                  className={linkStyle}
+                  variant="ghost"
+                >
+                  {label}
+                  <ChevronRight className="rtl:rotate-180" />
+                </Button>
+              ))}
+            </div>
+            <div className="grid grid-cols-2 gap-4.5">
+              {menuItem?.megaMenu?.featuredItems?.map((item, index) => (
+                <MenuFeaturedLink key={index} {...item} />
+              ))}
+            </div>
+            <Button size="lg" className="w-full" variant="outline">
+              <a href={menuItem?.href}>مشاهده {menuItem?.label}</a>
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </Fragment>
+  );
+};
+
+const SubMenuMobile = ({
+  subMenu,
+  open,
+  onOpenChange,
+  linkStyle,
+  closeAll,
+}: SubMenuMobileProps) => {
+  if (!subMenu) return;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange} modal={false}>
+      <SheetContent
+        side="right"
+        aria-describedby={undefined}
+        className="w-full gap-0 overflow-auto sm:max-w-[27.75rem] [&>button]:hidden"
+      >
+        <div>
+          <AspectRatio ratio={1.77} className="overflow-hidden">
+            <img
+              src={subMenu.imageSrc}
+              alt={subMenu.label}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+        </div>
+        <div className="px-6 pt-5 pb-10">
+          <SheetHeader className="p-0">
+            <div className="flex items-center justify-between gap-5">
+              <Button onClick={closeAll} size="icon" variant="ghost" aria-label="بستن منو">
+                <X />
+              </Button>
+            </div>
+            <div className="flex items-center py-4">
+              <Button
+                onClick={(e: React.MouseEvent) => {
+                  e.stopPropagation();
+                  onOpenChange(false);
+                }}
+                variant="ghost"
+                aria-label="بازگشت"
+              >
+                <ChevronLeft className="rtl:rotate-180" />
+              </Button>
+              <SheetTitle className="flex-1 text-center text-sm">
+                {subMenu.label}
+              </SheetTitle>
+            </div>
+          </SheetHeader>
+          <div className="space-y-6">
+            <div>
+              {subMenu?.items?.map(({ label, href }, index) => (
+                <Button
+                  asChild
+                  key={index}
+                  className={linkStyle}
+                  variant="ghost"
+                >
+                  <a href={href}>
+                    {label}
+                    <ChevronRight className="rtl:rotate-180" />
+                  </a>
+                </Button>
+              ))}
+            </div>
+            <Button size="lg" className="w-full" variant="outline">
+              <a href={subMenu?.href}>مشاهده {subMenu?.label}</a>
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const SocialMediaSection = ({ links }: SocialMediaSectionProps) => {
+  if (!links) return;
+
+  return (
+    <ul className="flex flex-wrap">
+      {links.map(({ icon, href }) => (
+        <li key={crypto.randomUUID()}>
+          <Button size="icon" variant="ghost" asChild className="rounded-full">
+            <a href={href}>
+              <img
+                className="hidden size-4 dark:block"
+                alt={icon.title}
+                src={icon.dark}
+              />
+              <img
+                className="size-4 dark:hidden"
+                alt={icon.title}
+                src={icon.light}
+              />
+            </a>
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const HelpfullLinks = ({ links }: HelpfullLinksProps) => {
+  if (!links) return;
+
+  return (
+    <ul className="flex flex-col">
+      {links.map(({ href, label }, index) => (
+        <Button
+          asChild
+          key={index}
+          className="justify-start px-1 text-xs font-semibold text-muted-foreground"
+          variant="ghost"
+        >
+          <a href={href}>{label}</a>
+        </Button>
+      ))}
+    </ul>
+  );
+};
+
+const ContactInfoList = ({ links }: ContactInfoListProps) => {
+  if (!links) return;
+
+  return (
+    <ul className="flex flex-col">
+      {links.map((item, index) => (
+        <Button
+          asChild
+          key={index}
+          className="justify-start px-1 text-xs font-semibold text-muted-foreground"
+          variant="ghost"
+        >
+          <a href={item.href}>
+            <item.icon />
+            {item.label}
+          </a>
+        </Button>
+      ))}
+    </ul>
+  );
+};
+
+export { EcommerceNavbar1 };
diff --git a/blocks/ecommerce-navbar2.tsx b/blocks/ecommerce-navbar2.tsx
new file mode 100644
index 0000000..076d27a
--- /dev/null
+++ b/blocks/ecommerce-navbar2.tsx
@@ -0,0 +1,1013 @@
+"use client";
+import {
+  Bell,
+  Bookmark,
+  Bug,
+  ChevronDown,
+  CreditCard,
+  FileQuestion,
+  Heart,
+  HeartHandshake,
+  HelpCircle,
+  History,
+  LayoutGrid,
+  LifeBuoy,
+  LogOut,
+  type LucideIcon,
+  Menu,
+  MessageCircleHeart,
+  Search,
+  Settings,
+  ShoppingCart,
+  Star,
+  ThumbsUp,
+  User,
+} from "lucide-react";
+import {
+  type CSSProperties,
+  Fragment,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+import {
+  Logo,
+  LogoImage,
+  LogoTextDesktop,
+} from "@/components/shadcnblocks/logo";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+type HomeLink = {
+  href: string;
+  logo: {
+    src: string;
+    alt: string;
+  };
+};
+
+type Link = {
+  label: string;
+  href: string;
+};
+
+interface SideMenuItem extends Link {
+  icon: LucideIcon;
+}
+
+type HelpfullLinkGroup = {
+  group: string;
+  links: Link[];
+};
+
+type SideMenuType = Array<SideMenuItem[]>;
+
+type MegaMenuSectionType = {
+  label: string;
+  href: string;
+  id: string;
+  items: {
+    label: string;
+    href: string;
+  }[];
+};
+
+type MenuItemType = {
+  label: string;
+  href?: string;
+  id?: string;
+  sections?: MegaMenuSectionType[];
+};
+
+type MenuType = MenuItemType[];
+
+interface HelpfullLinksDropdownProps {
+  groups?: HelpfullLinkGroup[];
+}
+
+interface SecondaryMenuProps {
+  menu: MenuType;
+}
+
+interface SecondaryMenuMobileProps {
+  menu: MenuType;
+}
+
+type DesktopMenuDropdownItemProps = MenuItemType;
+
+interface MobileMenuProps {
+  menu: SideMenuType;
+  homeLink: HomeLink;
+}
+
+interface EcommerceNavbar2Props {
+  home: HomeLink;
+  helpfullLinks?: HelpfullLinkGroup[];
+  menu: MenuType;
+  sideMenu: SideMenuType;
+  className?: string;
+}
+
+const HOME = {
+  href: "https://ShadcnBlocks",
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon-white.svg",
+    alt: "لوگو",
+  },
+};
+
+const HELPFUL_LINKS = [
+  {
+    group: "پشتیبانی",
+    links: [
+      { label: "پشتیبانی مشتریان", href: "#" },
+      { label: "تماس با ما", href: "#" },
+      { label: "سؤالات متداول", href: "#" },
+      { label: "راهنمای محصول", href: "#" },
+      { label: "گارانتی و تعمیر", href: "#" },
+    ],
+  },
+  {
+    group: "سفارش و ارسال",
+    links: [
+      { label: "پیگیری سفارش", href: "#" },
+      { label: "اطلاعات ارسال", href: "#" },
+      { label: "مرجوعی و بازپرداخت", href: "#" },
+      { label: "لغو سفارش", href: "#" },
+    ],
+  },
+  {
+    group: "ابزارهای خرید",
+    links: [
+      { label: "یافتن فروشگاه", href: "#" },
+      { label: "کارت هدیه", href: "#" },
+      { label: "تخفیف دانشجویی", href: "#" },
+      { label: "پیشنهادها و تخفیف‌ها", href: "#" },
+    ],
+  },
+  {
+    group: "شرکت و قوانین",
+    links: [
+      { label: "درباره ما", href: "#" },
+      { label: "فرصت‌های شغلی", href: "#" },
+      { label: "حریم خصوصی", href: "#" },
+      { label: "شرایط و ضوابط", href: "#" },
+      { label: "دسترسی‌پذیری", href: "#" },
+    ],
+  },
+];
+
+const MENU = [
+  {
+    id: "shop",
+    label: "فروشگاه",
+    href: "#",
+    sections: [
+      {
+        label: "صورت",
+        id: "face",
+        href: "#",
+        items: [
+          "پاک‌کننده‌ها",
+          "پاک‌کننده‌های روغنی",
+          "پاک‌کننده‌های فومی",
+          "تونرها",
+          "اسنس‌ها",
+          "سرم‌ها",
+          "مرطوب‌کننده‌ها",
+          "کرم دور چشم",
+          "روغن‌های صورت",
+          "ماسک صورت",
+          "لایه‌بردارها",
+          "درمان لک",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "بدن",
+        id: "body",
+        href: "#",
+        items: [
+          "شوینده بدن",
+          "اسکراب بدن",
+          "لوسیون بدن",
+          "کرم بدن",
+          "روغن بدن",
+          "کرم دست",
+          "مراقبت پا",
+          "درمان سفت‌کننده",
+          "ملزومات حمام",
+          "مراقبت پس از آفتاب",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "محافظت در برابر آفتاب",
+        id: "sun",
+        href: "#",
+        items: [
+          "SPF روزانه",
+          "ضدآفتاب معدنی",
+          "ضدآفتاب شیمیایی",
+          "SPF رنگی",
+          "استیک SPF",
+          "ضدآفتاب صورت",
+          "ضدآفتاب بدن",
+          "SPF لب",
+          "مراقبت پس از آفتاب",
+          "اسپری ضدآفتاب",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "پاکسازی",
+        id: "cleansing",
+        href: "#",
+        items: [
+          "میسلار واتر",
+          "پاک‌کننده ژلی",
+          "پاک‌کننده کرمی",
+          "مرهم پاک‌کننده",
+          "روغن پاک‌کننده",
+          "پاک‌کننده آرایش",
+          "پاک‌کننده لایه‌بردار",
+          "پاک‌کننده پوست حساس",
+          "سایز مسافرتی",
+          "بسته‌های شارژ",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "درمان‌ها",
+        id: "treatments",
+        href: "#",
+        items: [
+          "درمان آکنه",
+          "درمان روشن‌کننده",
+          "درمان ضدپیری",
+          "تقویت‌کننده آبرسانی",
+          "پیلینگ",
+          "ماسک شبانه",
+          "آمپول",
+          "سرم اصلاحی",
+          "درمان آرام‌بخش",
+          "درمان ترمیمی",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "ابزار و دستگاه",
+        id: "tools",
+        href: "#",
+        items: [
+          "غلتک صورت",
+          "گua شا",
+          "ماسک LED",
+          "برس پاکسازی",
+          "ماساژور صورت",
+          "غلتک یخی",
+          "ابزار منافذ",
+          "دستگاه میکروجریان",
+          "سرهای یدکی",
+          "ابزار مسافرتی",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "ماسک‌ها",
+        id: "masks",
+        href: "#",
+        items: [
+          "ماسک ورقه‌ای",
+          "ماسک رس",
+          "ماسک خواب",
+          "ماسک لایه‌ای",
+          "ماسک آبرسان",
+          "ماسک پاک‌کننده",
+          "ماسک آرام‌بخش",
+          "ماسک روشن‌کننده",
+          "ماسک لایه‌بردار",
+          "ست مولتی‌ماسک",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "مراقبت چشم و لب",
+        id: "eye-lip",
+        href: "#",
+        items: [
+          "کرم دور چشم",
+          "سرم دور چشم",
+          "ماسک چشم",
+          "مرهم لب",
+          "ماسک لب",
+          "اسکراب لب",
+          "درمان پف چشم",
+          "مراقبت تیرگی دور چشم",
+          "SPF لب",
+          "مراقبت شبانه لب",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "مو و پوست سر",
+        id: "hair",
+        href: "#",
+        items: [
+          "درمان پوست سر",
+          "اسکراب پوست سر",
+          "سرم مو",
+          "روغن مو",
+          "ماسک مو",
+          "ضدآفتاب مو",
+          "مراقبت شوره",
+          "درمان رشد مو",
+          "مراقبت بدون آبکشی",
+          "ابزار مو",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "حمام و سلامتی",
+        id: "wellness",
+        href: "#",
+        items: [
+          "روغن حمام",
+          "نمک حمام",
+          "محلول‌های حمام",
+          "رایحه‌درمانی",
+          "آرام‌بخش بدن",
+          "کاهش استرس",
+          "مراقبت خواب",
+          "روغن ماساژ",
+          "ست مراقبت شخصی",
+          "هدایای سلامتی",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "مراقبت آقایان",
+        id: "men",
+        href: "#",
+        items: [
+          "شوینده صورت",
+          "مرطوب‌کننده",
+          "پس از اصلاح",
+          "مراقبت ریش",
+          "کرم دور چشم",
+          "ضدپیری",
+          "کنترل چربی",
+          "مراقبت بدن",
+          "کیت مسافرتی",
+          "ست اصلاح",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "مراقبت پوست نوجوان",
+        id: "teen",
+        href: "#",
+        items: [
+          "پاک‌کننده ملایم",
+          "مراقبت آکنه",
+          "کنترل چربی",
+          "مرطوب‌کننده آرام‌بخش",
+          "درمان لک",
+          "SPF",
+          "کیت شروع",
+          "پوست حساس",
+          "سایز مسافرتی",
+          "ملزومات روزانه",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "سایز مسافرتی",
+        id: "travel",
+        href: "#",
+        items: [
+          "پاک‌کننده کوچک",
+          "سرم کوچک",
+          "مرطوب‌کننده کوچک",
+          "ماسک کوچک",
+          "کیت مسافرتی",
+          "ظرف قابل شارژ",
+          "مناسب کابین",
+          "ست نمونه",
+          "کیت آخر هفته",
+          "مراقبت در مسیر",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "هدیه و ست‌ها",
+        id: "gifts",
+        href: "#",
+        items: [
+          "ست هدیه",
+          "کیت شروع",
+          "بسته روتین",
+          "پرفروش‌ترین‌ها",
+          "ست مناسبتی",
+          "نسخه محدود",
+          "ست کوچک",
+          "هدایای لوکس",
+          "زیر ۵۰ دلار",
+          "زیر ۱۰۰ دلار",
+        ].map((label) => ({ label, href: "#" })),
+      },
+    ],
+  },
+
+  {
+    id: "collections",
+    label: "مجموعه‌ها",
+    href: "#",
+    sections: [
+      {
+        label: "بر اساس مشکل پوست",
+        id: "concerns",
+        href: "#",
+        items: [
+          "آکنه",
+          "خشکی",
+          "حساسیت",
+          "خطوط ریز",
+          "چین و چروک",
+          "لک",
+          "قرمزی",
+          "کدری",
+          "بافت ناهمگن",
+          "منافذ باز",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "بر اساس نوع پوست",
+        id: "skin-type",
+        href: "#",
+        items: [
+          "نرمال",
+          "خشک",
+          "چرب",
+          "مختلط",
+          "حساس",
+          "بالغ",
+          "آکنه‌ای",
+          "کم‌آب",
+          "واکنش‌پذیر",
+          "همه انواع پوست",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "بر اساس ماده فعال",
+        id: "ingredients",
+        href: "#",
+        items: [
+          "هیالورونیک اسید",
+          "ویتامین C",
+          "رتینول",
+          "نیاسینامید",
+          "سرامید",
+          "پپتید",
+          "سالیسیلیک اسید",
+          "AHA و BHA",
+          "باکوچیول",
+          "سنتلا آسیاتica",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "بر اساس روتین",
+        id: "routine",
+        href: "#",
+        items: [
+          "روتین صبح",
+          "روتین شب",
+          "روتین مینیمال",
+          "روتین پیشرفته",
+          "درمان‌های هفتگی",
+          "روتین مسافرتی",
+          "مراقبت پس از درمان",
+          "مراقبت فصلی",
+          "آیین‌های مراقبت شخصی",
+          "الهام‌گرفته از حرفه‌ای‌ها",
+        ].map((label) => ({ label, href: "#" })),
+      },
+      {
+        label: "زیبایی پاک و مسئولانه",
+        id: "clean",
+        href: "#",
+        items: [
+          "زیبایی پاک",
+          "وگان",
+          "بدون تست حیوانی",
+          "بدون بو",
+          "تست‌شده توسط متخصص پوست",
+          "مناسب پوست حساس",
+          "بسته‌بندی زیست‌محیطی",
+          "قابل بازیافت",
+          "قابل شارژ",
+          "برندهای پایدار",
+        ].map((label) => ({ label, href: "#" })),
+      },
+    ],
+  },
+
+  { label: "آزمون پوست", href: "#" },
+  { label: "درباره ما", href: "#" },
+  { label: "وبلاگ", href: "#" },
+  { label: "حراج", href: "#" },
+];
+
+const SIDE_MENU = [
+  [
+    {
+      label: "حساب کاربری",
+      href: "#",
+      icon: User,
+    },
+    {
+      label: "سوابق خرید",
+      href: "#",
+      icon: History,
+    },
+    {
+      label: "روش‌های پرداخت",
+      href: "#",
+      icon: CreditCard,
+    },
+    {
+      label: "تنظیمات حساب",
+      href: "#",
+      icon: Settings,
+    },
+    {
+      label: "خروج",
+      href: "#",
+      icon: LogOut,
+    },
+  ],
+  [
+    {
+      label: "راهنما",
+      href: "#",
+      icon: HeartHandshake,
+    },
+    {
+      label: "راهنمای کاربران",
+      href: "#",
+      icon: HelpCircle,
+    },
+    {
+      label: "سؤالات متداول",
+      href: "#",
+      icon: FileQuestion,
+    },
+    {
+      label: "تیکت پشتیبانی",
+      href: "#",
+      icon: LifeBuoy,
+    },
+  ],
+  [
+    {
+      label: "علاقه‌مندی‌ها",
+      href: "#",
+      icon: Heart,
+    },
+    {
+      label: "ذخیره‌شده‌ها",
+      href: "#",
+      icon: Bookmark,
+    },
+    {
+      label: "هشدار موجود شدن",
+      href: "#",
+      icon: Bell,
+    },
+    {
+      label: "اخیراً مشاهده‌شده",
+      href: "#",
+      icon: Star,
+    },
+  ],
+  [
+    {
+      label: "بازخورد",
+      href: "#",
+      icon: MessageCircleHeart,
+    },
+    {
+      label: "امتیازدهی به تجربه",
+      href: "#",
+      icon: ThumbsUp,
+    },
+    {
+      label: "گزارش مشکل",
+      href: "#",
+      icon: Bug,
+    },
+  ],
+];
+
+const EcommerceNavbar2 = ({
+  home = HOME,
+  helpfullLinks = HELPFUL_LINKS,
+  menu = MENU,
+  sideMenu = SIDE_MENU,
+  className,
+}: EcommerceNavbar2Props) => {
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      "--primary-nav-height",
+      "5.25rem",
+    );
+    document.documentElement.style.setProperty(
+      "--secondary-nav-height",
+      "3.25rem",
+    );
+  }, []);
+
+  return (
+    <header
+      dir="rtl"
+      lang="fa"
+      className={cn("fixed inset-x-0 top-0 isolate z-50 text-start", className)}
+    >
+      <div className="flex h-[var(--primary-nav-height)] items-center gap-3 bg-primary px-6 py-4 text-primary-foreground">
+        <Logo url={home.href} className="shrink-0 p-2">
+          <LogoImage
+            src={home.logo.src}
+            alt={home.logo.alt}
+            className="size-8"
+          />
+          <LogoTextDesktop className="font-medium text-primary-foreground">
+            ری یو آی
+          </LogoTextDesktop>
+        </Logo>
+        <div className="ms-auto flex items-center gap-3">
+          <div className="hidden lg:contents">
+            <HelpfullLinksDropdown groups={helpfullLinks} />
+            <Button
+              variant="ghost"
+              className="text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground"
+            >
+              <Heart />
+              علاقه‌مندی‌ها
+            </Button>
+            <Button
+              variant="ghost"
+              className="text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground"
+            >
+              <User />
+              حساب کاربری
+            </Button>
+          </div>
+          <SearchForm />
+          <div className="relative size-fit">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground"
+              aria-label="سبد خرید"
+            >
+              <ShoppingCart />
+            </Button>
+            <Badge className="absolute top-0 end-0 translate-x-1/2 -translate-y-1/2 bg-amber-500 text-[0.625rem] font-medium text-foreground">
+              ۰
+            </Badge>
+          </div>
+          <div className="contents lg:hidden">
+            <MobileMenu menu={sideMenu} homeLink={home} />
+          </div>
+        </div>
+      </div>
+      <div className="relative h-[var(--secondary-nav-height)] overflow-visible">
+        <SecondaryMenu menu={menu} />
+      </div>
+    </header>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <Button
+      size="icon"
+      variant="ghost"
+      className="text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground"
+      aria-label="جستجو"
+    >
+      <Search />
+    </Button>
+  );
+};
+
+const HelpfullLinksDropdown = ({ groups }: HelpfullLinksDropdownProps) => {
+  if (!groups) return;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground data-[state=open]:bg-primary-foreground/10 data-[state=open]:text-primary-foreground"
+        >
+          <HeartHandshake className="size-4" />
+          راهنما و پشتیبانی
+          <ChevronDown className="rtl:rotate-180" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-56 !border-primary-foreground/20 !bg-primary !text-primary-foreground"
+        align="start"
+      >
+        {groups.map(({ group, links }, index) => (
+          <DropdownMenuSub key={index}>
+            <DropdownMenuSubTrigger className="**:!text-primary-foreground focus:bg-primary-foreground/10 focus:!text-primary-foreground data-[state=open]:bg-primary-foreground/10 data-[state=open]:!text-primary-foreground">
+              {group}
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent className="!border-primary-foreground/20 !bg-primary !text-primary-foreground">
+                {links.map(({ label, href }, index) => (
+                  <DropdownMenuItem
+                    asChild
+                    key={`${label}-${index}`}
+                    className="focus:bg-primary-foreground/10 focus:text-primary-foreground"
+                  >
+                    <a href={href}>{label}</a>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const MobileMenu = ({ menu, homeLink }: MobileMenuProps) => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className="text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground focus:bg-primary-foreground/10 focus:text-primary-foreground data-[state=open]:bg-primary-foreground/10 data-[state=open]:text-primary-foreground"
+          aria-label="باز کردن منو"
+        >
+          <Menu />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="hide-scrollbar overflow-auto">
+        <div className="px-4">
+          <SheetHeader>
+            <Logo url={homeLink.href} className="max-h-fit shrink-0 basis-11">
+              <LogoImage
+                src={homeLink.logo.src}
+                alt={homeLink.logo.alt}
+                className="size-11 shrink-0 invert dark:invert-0"
+              />
+            </Logo>
+          </SheetHeader>
+          {menu.map((group, index) => (
+            <div key={index} className="py-6 not-last:border-b">
+              {group.map(({ href, label, icon: Icon }, index) => (
+                <Button
+                  asChild
+                  variant="ghost"
+                  className="w-full justify-start text-start"
+                  key={`side-menu-item-${index}`}
+                >
+                  <a href={href}>
+                    <Icon />
+                    {label}
+                  </a>
+                </Button>
+              ))}
+            </div>
+          ))}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const SecondaryMenu = ({ menu }: SecondaryMenuProps) => {
+  return (
+    <div className="relative overflow-visible bg-accent px-6 py-2">
+      <div className="hidden lg:contents">
+        <NavigationMenu
+          dir="rtl"
+          viewport={false}
+          className="relative z-50 justify-start overflow-visible text-start [&_a]:bg-transparent [&_a]:hover:bg-accent-foreground/10 [&_button]:bg-transparent [&_button]:hover:bg-accent-foreground/10"
+        >
+          <NavigationMenuList className="gap-3.5">
+            {menu.map(({ sections, ...item }, index) => (
+              <NavigationMenuItem value={`${index}`} key={index} className="static">
+                {sections ? (
+                  <DesktopMenuDropdownItem sections={sections} {...item} />
+                ) : (
+                  <NavigationMenuLink
+                    asChild
+                    className={cn(
+                      navigationMenuTriggerStyle(),
+                      "bg-transparent hover:bg-accent-foreground/10",
+                    )}
+                  >
+                    <a href={item.href}>{item.label}</a>
+                  </NavigationMenuLink>
+                )}
+              </NavigationMenuItem>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+      <div className="lg:hidden">
+        <SecondaryMenuMobile menu={menu} />
+      </div>
+    </div>
+  );
+};
+
+const SecondaryMenuMobile = ({ menu }: SecondaryMenuMobileProps) => {
+  if (!menu) return;
+
+  return (
+    <Sheet modal={false}>
+      <SheetTrigger asChild>
+        <Button variant="secondary">
+          <LayoutGrid />
+          دسته‌بندی‌ها
+        </Button>
+      </SheetTrigger>
+      <SheetContent
+        side="top"
+        className="!top-[calc(var(--primary-nav-height)+var(--secondary-nav-height))] z-40 !h-[calc(100dvh-var(--primary-nav-height)-var(--secondary-nav-height))] overflow-hidden [&>button]:hidden"
+      >
+        <div className="min-h-0 flex-1 touch-pan-y overflow-y-auto overscroll-contain pb-10">
+          <div className="p-6">
+            {menu.map(({ sections, label, href }, index) => (
+              <div key={index}>
+                <h2 className="border-b py-4 text-lg leading-normal font-bold">
+                  {href ? <a href={href}>{label}</a> : <span>{label}</span>}
+                </h2>
+                {sections && (
+                  <Accordion type="multiple">
+                    {sections.map(({ id, label, items }) => (
+                      <AccordionItem value={id} key={`menu-section-${id}`}>
+                        <AccordionTrigger>{label}</AccordionTrigger>
+                        <AccordionContent>
+                          <div className="flex flex-col">
+                            {items.map(({ href, label }, index) => (
+                              <Button
+                                className="w-full justify-start"
+                                asChild
+                                variant="ghost"
+                                size="sm"
+                                key={`menu-item-${index}`}
+                              >
+                                <a href={href}>{label}</a>
+                              </Button>
+                            ))}
+                          </div>
+                        </AccordionContent>
+                      </AccordionItem>
+                    ))}
+                  </Accordion>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const DesktopMenuDropdownItem = ({
+  sections,
+  label,
+  href,
+}: DesktopMenuDropdownItemProps) => {
+  const [activeSectionId, setActiveSectionId] = useState<string>();
+
+  const sharedClasses = "h-full space-y-2 overflow-auto pt-6 pb-2";
+
+  const MenuItemClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const selectedSectionId =
+      e.currentTarget.getAttribute("data-id") ?? undefined;
+
+    setActiveSectionId(selectedSectionId);
+  };
+
+  const MenuItemMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const selectedSectionId =
+      e.currentTarget.getAttribute("data-id") ?? undefined;
+
+    setActiveSectionId(selectedSectionId);
+  };
+
+  const activeSectionData = useMemo(
+    () => sections?.find((section) => section.id === activeSectionId),
+    [sections, activeSectionId],
+  );
+
+  if (!sections) return;
+
+  return (
+    <Fragment>
+      <NavigationMenuTrigger>{label}</NavigationMenuTrigger>
+      <NavigationMenuContent
+        dir="rtl"
+        className="start-0 end-auto z-50 !overflow-visible p-0"
+      >
+        <div
+          style={
+            {
+              "--menu-margin-bottom": "5rem",
+            } as CSSProperties
+          }
+          className="relative flex min-w-max items-stretch overflow-visible max-h-[calc(100dvh-var(--secondary-nav-height)-var(--primary-nav-height)-var(--menu-margin-bottom))]"
+        >
+          <div className="relative z-0 shrink-0">
+            <div className={cn("w-60", sharedClasses)}>
+              <h2 className="px-6 text-sm font-bold">
+                <a href={href}>{label}</a>
+              </h2>
+              <ol>
+                {sections.map((section, index) => (
+                  <li key={index}>
+                    <Button
+                      variant="ghost"
+                      data-id={section.id}
+                      data-state={
+                        section.id === activeSectionId ? "active" : "inactive"
+                      }
+                      onClick={MenuItemClick}
+                      onMouseEnter={MenuItemMouseEnter}
+                      className={cn(
+                        "relative w-full justify-start rounded-none px-6 text-start font-normal",
+                        "data-[state=active]:bg-accent",
+                        "transition-opacity after:absolute after:inset-y-0 after:start-0 after:h-full after:w-1 after:bg-primary data-[state=inactive]:after:opacity-0",
+                      )}
+                    >
+                      {section.label}
+                    </Button>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          </div>
+          {activeSectionData && (
+            <div className="relative z-10 shrink-0">
+              <div
+                className={cn(
+                  "w-50 border-s bg-popover shadow-sm",
+                  sharedClasses,
+                )}
+              >
+                <h2 className="px-6 text-sm font-bold">
+                  {activeSectionData.label}
+                </h2>
+                <ol>
+                  {activeSectionData.items.map((item, index) => (
+                    <li key={index}>
+                      <NavigationMenuLink
+                        className="px-6 hover:underline"
+                        asChild
+                      >
+                        <a href={item.href}>{item.label}</a>
+                      </NavigationMenuLink>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+            </div>
+          )}
+        </div>
+      </NavigationMenuContent>
+    </Fragment>
+  );
+};
+
+export { EcommerceNavbar2 };
diff --git a/blocks/experience1.tsx b/blocks/experience1.tsx
new file mode 100644
index 0000000..4201ad9
--- /dev/null
+++ b/blocks/experience1.tsx
@@ -0,0 +1,108 @@
+import { Download } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ExperienceItem {
+  period: string;
+  title: string;
+  description: string;
+  company: string;
+  logo: string;
+}
+
+interface Experience1Props {
+  heading?: string;
+  buttonText?: string;
+  buttonUrl?: string;
+  experience?: ExperienceItem[];
+  className?: string;
+}
+
+const Experience1 = ({
+  heading = "سابقه کاری",
+  buttonText = "دانلود رزومه",
+  buttonUrl = "#",
+  experience = [
+    {
+      period: "۱۴۰۴ - تاکنون",
+      title: "مهندس ارشد نرم‌افزار",
+      description:
+        "رهبری توسعه وب‌اپلیکیشن‌های مقیاس‌پذیر با رابط کاربری، زبان نوع‌ایمن و سرور برنامه. راهنمایی توسعه‌دهندگان تازه‌کار و پیاده‌سازی بهترین شیوه‌ها.",
+      company: "گوگل",
+      logo: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    },
+    {
+      period: "۱۴۲ - ۱۴۰۴",
+      title: "توسعه‌دهنده فول‌استک",
+      description:
+        "ساخت و نگهداری چندین وب‌سایت مشتری و پلتفرم تجارت الکترونیک. همکاری با تیم طراحی برای پیاده‌سازی رابط کاربری/تجربه کاربری دقیق.",
+      company: "مایکروسافت",
+      logo: "/block-media/shadcnblocks/block/logos/microsoft-icon.svg",
+    },
+    {
+      period: "۱۳۹۹ - ۱۴۱",
+      title: "توسعه‌دهنده فرانت‌اند",
+      description:
+        "توسعه وب‌اپلیکیشن‌های واکنش‌گرا با فریم‌ورک‌های مدرن برنامه‌نویسی وب. بهینه‌سازی عملکرد و دسترس‌پذیری در پروژه‌های متعدد.",
+      company: "اپل",
+      logo: "/block-media/shadcnblocks/block/logos/apple-icon.svg",
+    },
+    {
+      period: "۱۳۹۸ - ۱۳۹۹",
+      title: "توسعه‌دهنده تازه‌کار",
+      description:
+        "همکاری در ساخت وب‌اپلیکیشن‌ها و یادگیری شیوه‌های مدرن توسعه. مشارکت در پروژه‌های تیمی و بازبینی کد.",
+      company: "نتفلیکس",
+      logo: "/block-media/shadcnblocks/block/logos/netflix-icon.svg",
+    },
+  ],
+  className,
+}: Experience1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container space-y-10 lg:space-y-20">
+        <div className="flex w-full items-end justify-between">
+          <h1 className="text-2xll font-semibold tracking-tighter lg:text-2xll">
+            {heading}
+          </h1>
+          <Button asChild variant="ghost" size="lg" className="font-semibold">
+            <a href={buttonUrl}>
+              {buttonText} <Download className="size-4" />
+            </a>
+          </Button>
+        </div>
+
+        <ul>
+          {experience.map((exp, index) => (
+            <li
+              key={index}
+              className="flex flex-col justify-between border-b py-10 md:flex-row"
+            >
+              <div className="max-w-lg text-xl tracking-tighter lg:w-1/3">
+                {exp.period}
+              </div>
+              <div className="lg:w-1/3">
+                <h2 className="mb-4 text-xl font-semibold tracking-tighter">
+                  {exp.title}
+                </h2>
+                <p className="text-foreground/50">{exp.description}</p>
+              </div>
+              <div className="flex items-start justify-start gap-3 text-start lg:w-1/4">
+                <img
+                  src={exp.logo}
+                  alt={exp.company}
+                  className="size-6 dark:invert"
+                />
+                {exp.company}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Experience1 };
diff --git a/blocks/experience2.tsx b/blocks/experience2.tsx
new file mode 100644
index 0000000..356bbca
--- /dev/null
+++ b/blocks/experience2.tsx
@@ -0,0 +1,96 @@
+import { ArrowUpRight } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Experience2Props {
+  className?: string;
+}
+
+const Experience2 = ({ className }: Experience2Props) => {
+  const experience = [
+    {
+      period: "۱۴۰۴ - تاکنون",
+      title: "مهندس ارشد نرم‌افزار",
+      description:
+        "رهبری توسعه وب‌اپلیکیشن‌های مقیاس‌پذیر با رابط کاربری، زبان نوع‌ایمن و سرور برنامه. راهنمایی توسعه‌دهندگان تازه‌کار و پیاده‌سازی بهترین شیوه‌ها.",
+      company: "گوگل",
+    },
+    {
+      period: "۱۴۲ - ۱۴۰۴",
+      title: "توسعه‌دهنده فول‌استک",
+      description:
+        "ساخت و نگهداری چندین وب‌سایت مشتری و پلتفرم تجارت الکترونیک. همکاری با تیم طراحی برای پیاده‌سازی رابط کاربری/تجربه کاربری دقیق.",
+      company: "مایکروسافت",
+    },
+    {
+      period: "۱۳۹۹ - ۱۴۱",
+      title: "توسعه‌دهنده فرانت‌اند",
+      description:
+        "توسعه وب‌اپلیکیشن‌های واکنش‌گرا با فریم‌ورک‌های مدرن برنامه‌نویسی وب. بهینه‌سازی عملکرد و دسترس‌پذیری در پروژه‌های متعدد.",
+      company: "اپل",
+    },
+    {
+      period: "۱۳۹۸ - ۱۳۹۹",
+      title: "توسعه‌دهنده تازه‌کار",
+      description:
+        "همکاری در ساخت وب‌اپلیکیشن‌ها و یادگیری شیوه‌های مدرن توسعه. مشارکت در پروژه‌های تیمی و بازبینی کد.",
+      company: "نتفلیکس",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
+          <div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
+            <h1 className="text-2xll font-medium tracking-tight">
+              سابقه کاری
+              <sup className="align-top text-sm tracking-tight text-foreground/40">
+                ۴ سال تجربه
+              </sup>
+            </h1>
+            <p className="text-base text-foreground/50">
+              مسیر حرفه‌ای من در توسعه وب، از یادگیری اصول تا رهبری تیم‌های
+              فنی و ساخت محصولات مقیاس‌پذیر با تکنولوژی‌های مدرن.
+            </p>
+
+            <Button
+              variant="secondary"
+              className="group h-12 rounded-full pe-2"
+            >
+              تماس بگیرید
+              <span className="rounded-full bg-orange-500 p-2 text-white">
+                <ArrowUpRight className="size-4 transition-transform duration-300 rtl:rotate-180 group-hover:rotate-45 rtl:group-hover:rotate-[-135deg]" />
+              </span>
+            </Button>
+          </div>
+          <ul className="relative col-span-4 w-full">
+            {experience.map((exp, index) => (
+              <li
+                key={index}
+                className="flex flex-col justify-between gap-10 border-b py-10 md:flex-row lg:items-center lg:py-15"
+              >
+                <div className="lg:w-2/3">
+                  <h2 className="mb-4 font-medium tracking-tighter lg:text-xl">
+                    {exp.company}
+                  </h2>
+                  <h3 className="mb-4 text-xl font-semibold tracking-tighter lg:text-3xl">
+                    {exp.title}
+                  </h3>
+                  <p className="text-foreground/50">{exp.description}</p>
+                </div>
+                <div className="w-fit rounded-full bg-muted px-4 py-1 tracking-tighter">
+                  {exp.period}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Experience2 };
diff --git a/blocks/experience3.tsx b/blocks/experience3.tsx
new file mode 100644
index 0000000..c2d605d
--- /dev/null
+++ b/blocks/experience3.tsx
@@ -0,0 +1,107 @@
+import { Download } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Experience3Props {
+  className?: string;
+}
+
+const Experience3 = ({ className }: Experience3Props) => {
+  const experience = [
+    {
+      period: "۱۴۰۴ - تاکنون",
+      title: "مهندس ارشد نرم‌افزار",
+      description:
+        "رهبری توسعه وب‌اپلیکیشن‌های مقیاس‌پذیر با رابط کاربری، زبان نوع‌ایمن و سرور برنامه. راهنمایی توسعه‌دهندگان تازه‌کار و پیاده‌سازی بهترین شیوه‌ها.",
+      company: "گوگل",
+    },
+    {
+      period: "۱۴۲ - ۱۴۰۴",
+      title: "توسعه‌دهنده فول‌استک",
+      description:
+        "ساخت و نگهداری چندین وب‌سایت مشتری و پلتفرم تجارت الکترونیک. همکاری با تیم طراحی برای پیاده‌سازی رابط کاربری/تجربه کاربری دقیق.",
+      company: "مایکروسافت",
+    },
+    {
+      period: "۱۳۹۹ - ۱۴۱",
+      title: "توسعه‌دهنده فرانت‌اند",
+      description:
+        "توسعه وب‌اپلیکیشن‌های واکنش‌گرا با فریم‌ورک‌های مدرن برنامه‌نویسی وب. بهینه‌سازی عملکرد و دسترس‌پذیری در پروژه‌های متعدد.",
+      company: "اپل",
+    },
+    {
+      period: "۱۳۹۸ - ۱۳۹۹",
+      title: "توسعه‌دهنده تازه‌کار",
+      description:
+        "همکاری در ساخت وب‌اپلیکیشن‌ها و یادگیری شیوه‌های مدرن توسعه. مشارکت در پروژه‌های تیمی و بازبینی کد.",
+      company: "نتفلیکس",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex h-fit w-fit w-full flex-col justify-between gap-10 lg:flex-row lg:items-center">
+          <div className="max-w-xl">
+            <p className="tracking-loose text-foreground/30">
+              مسیر حرفه‌ای
+            </p>
+            <h1 className="mt-2 text-xl font-semibold tracking-tight lg:text-2xll">
+              سابقه کاری
+            </h1>
+            <p className="mt-10 text-lg text-foreground/50">
+              از اولین خط کد تا رهبری پروژه‌های بزرگ؛ مروری بر نقش‌ها و
+              دستاوردهای حرفه‌ای در مسیر توسعه نرم‌افزار.
+            </p>
+          </div>
+          <div className="flex w-fit max-w-lg flex-col gap-4 lg:items-center">
+            <Button
+              variant="secondary"
+              className="group h-12 rounded-full pe-2"
+            >
+              دانلود رزومه
+              <span className="rounded-full bg-orange-500 p-2 text-white">
+                <Download className="size-4" />
+              </span>
+            </Button>
+            <p className="text-sm text-foreground/50">
+              آخرین به‌روزرسانی: ۱۴۰۴/۰۶/۱۲
+            </p>
+          </div>
+        </div>
+        <ul className="relative w-full">
+          <li className="flex justify-between gap-10 border-b pt-15 pb-2 text-sm tracking-tight text-foreground/40 lg:text-base">
+            <p>شرح</p>
+            <p>دوره</p>
+          </li>
+          {experience.map((exp, index) => (
+            <li
+              key={index}
+              className="flex justify-between gap-10 border-b py-10 lg:py-15"
+            >
+              <div className="max-w-2xl">
+                <h3 className="mb-4 text-xl font-semibold tracking-tighter lg:text-xl lg:text-3xl">
+                  (
+                  {(experience.length - index).toLocaleString("fa-IR", {
+                    minimumIntegerDigits: 2,
+                  })}
+                  ) {exp.title}
+                </h3>
+                <p className="text-sm text-foreground/50 lg:text-base">
+                  {exp.description}
+                </p>
+              </div>
+              <p className="w-fit min-w-20 text-start text-sm text-foreground/50 lg:text-base">
+                {exp.period}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Experience3 };
diff --git a/blocks/experience5.tsx b/blocks/experience5.tsx
new file mode 100644
index 0000000..f578ba5
--- /dev/null
+++ b/blocks/experience5.tsx
@@ -0,0 +1,99 @@
+import { cn } from "@/lib/utils";
+
+interface ExperienceItem {
+  title: string;
+  details: string;
+  period: string;
+  company: string;
+  logo: string;
+  description: string;
+  className?: string;
+}
+
+interface Experience5Props {
+  title?: string;
+  experience?: ExperienceItem[];
+  className?: string;
+}
+
+const Experience5 = ({
+  title = "سابقه کاری",
+  experience = [
+    {
+      title: "توسعه‌دهنده ارشد فول‌استک",
+      details: "تمام‌وقت · دورکاری · San Francisco",
+      period: "۱۴۱ - تاکنون",
+      company: "Anthropic",
+      logo: "/block-media/shadcnblocks/block/logos/claude-icon.svg",
+      description:
+        "رهبری توسعه وب‌اپلیکیشن‌های مقیاس‌پذیر با رابط کاربری، سرور برنامه و PostgreSQL. طراحی زیرساخت میکروسرویس برای بیش از ۱۰۰ هزار کاربر. راهنمایی توسعه‌دهندگان تازه‌کار و تعریف استانداردهای کدنویسی.",
+    },
+    {
+      title: "مهندس فرانت‌اند",
+      details: "تمام‌وقت · حضوری · Austin",
+      period: "۱۳۹۸ - ۱۴۰۰",
+      company: "Vercel",
+      logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      description:
+        "توسعه اپلیکیشن‌های توسعه کامل با برنامه‌نویسی وب، Python و MySQL. مشارکت در فرایند چابک و بازبینی کد. همکاری در پروژه‌های متن‌باز و ابزارهای داخلی.",
+    },
+    {
+      title: "توسعه‌دهنده تازه‌کار وب",
+      details: "تمام‌وقت · حضوری · Denver",
+      period: "۱۳۹۷ - ۱۳۹۸",
+      company: "Figma",
+      logo: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      description:
+        "ساخت وب‌سایت‌های واکنش‌گرا با استاندارد وب، استایل‌دهی و برنامه‌نویسی وب. کار با WordPress و PHP برای مدیریت محتوا. کمک در دیباگ و تست وب‌اپلیکیشن‌ها.",
+    },
+  ],
+  className,
+}: Experience5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16 md:py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-7xl">
+          <h2 className="mb-12 font-serif text-xl leading-tight font-medium md:text-2xll">
+            {title}
+          </h2>
+
+          <div className="space-y-8">
+            {experience.map(
+              ({ title, details, period, company, logo, description }, idx) => (
+                <div
+                  key={idx}
+                  className="border-b border-border pb-6 last:border-b-0"
+                >
+                  <div className="flex flex-col gap-4 md:flex-row md:items-start">
+                    <div className="md:w-2/3">
+                      <div className="mb-2 flex items-center gap-3">
+                        <img
+                          src={logo}
+                          alt={`لوگوی ${company}`}
+                          className="h-5 object-contain"
+                        />
+                        <h3 className="text-xl">{title}</h3>
+                      </div>
+                      <p className="mb-3 text-sm text-muted-foreground">
+                        {details}
+                      </p>
+                      <p className="text-sm leading-relaxed text-muted-foreground">
+                        {description}
+                      </p>
+                    </div>
+                    <div className="text-start md:w-1/3">
+                      <p className="mb-1 text-sm font-medium">{period}</p>
+                      <p className="text-sm text-muted-foreground">{company}</p>
+                    </div>
+                  </div>
+                </div>
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Experience5 };
diff --git a/blocks/faq1.tsx b/blocks/faq1.tsx
new file mode 100644
index 0000000..9c70a77
--- /dev/null
+++ b/blocks/faq1.tsx
@@ -0,0 +1,93 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+interface FaqItem {
+  id: string;
+  question: string;
+  answer: string;
+  className?: string;
+}
+
+interface Faq1Props {
+  heading?: string;
+  items?: FaqItem[];
+  className?: string;
+}
+
+const Faq1 = ({
+  heading = "پرسش‌های متداول",
+  items = [
+    {
+      id: "faq-1",
+      question: "این بخش چه کاربردی دارد؟",
+      answer:
+        "در این بخش، پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، محصولات و نحوه استفاده از سامانه ارائه شده تا بدون نیاز به تماس با پشتیبانی، پاسخ خود را پیدا کنید.",
+    },
+    {
+      id: "faq-2",
+      question: "چرا این بخش برای کاربران مفید است؟",
+      answer:
+        "هدف این بخش کاهش زمان جستجوی اطلاعات، افزایش رضایت کاربران و دسترسی سریع به پاسخ پرسش‌های متداول است.",
+    },
+    {
+      id: "faq-3",
+      question: "چگونه یک بخش پرسش‌های متداول مؤثر طراحی کنیم؟",
+      answer:
+        "پرسش‌های پرتکرار کاربران را جمع‌آوری کنید، برای هرکدام پاسخی دقیق و شفاف بنویسید و آن‌ها را بر اساس موضوع دسته‌بندی کنید.",
+    },
+    {
+      id: "faq-4",
+      question: "وجود این بخش چه مزایایی دارد؟",
+      answer:
+        "این بخش باعث کاهش حجم درخواست‌های پشتیبانی، افزایش سرعت پاسخ‌گویی و بهبود تجربه کاربری می‌شود.",
+    },
+    {
+      id: "faq-5",
+      question: "چگونه پرسش‌ها را دسته‌بندی کنیم؟",
+      answer:
+        "پرسش‌ها را براساس موضوعاتی مانند حساب کاربری، خرید، پرداخت، ارسال، پشتیبانی و تنظیمات گروه‌بندی کنید تا کاربران سریع‌تر پاسخ خود را بیابند.",
+    },
+    {
+      id: "faq-6",
+      question: "پاسخ‌ها باید چه میزان جزئیات داشته باشند؟",
+      answer:
+        "پاسخ‌ها باید کوتاه، دقیق و کاربردی باشند؛ در صورت نیاز می‌توان لینک راهنما یا مستندات تکمیلی را نیز ارائه کرد.",
+    },
+    {
+      id: "faq-7",
+      question: "آیا ارجاع به راهنماهای بیشتر مفید است؟",
+      answer:
+        "بله، لینک به مستندات، آموزش‌ها یا مقالات مرتبط به کاربران کمک می‌کند اطلاعات کامل‌تری دریافت کنند.",
+    },
+  ],
+  className,
+}: Faq1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-3xl">
+        <h1 className="mb-4 text-center text-3xl font-semibold md:mb-11 md:text-xl">
+          {heading}
+        </h1>
+        <Accordion type="single" collapsible className="w-full text-start">
+          {items.map((item, index) => (
+            <AccordionItem key={index} value={`item-${index}`}>
+              <AccordionTrigger className="font-semibold hover:no-underline">
+                {item.question}
+              </AccordionTrigger>
+              <AccordionContent className="text-muted-foreground">
+                {item.answer}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </section>
+  );
+};
+
+export { Faq1 };
diff --git a/blocks/faq10.tsx b/blocks/faq10.tsx
new file mode 100644
index 0000000..8e7efb4
--- /dev/null
+++ b/blocks/faq10.tsx
@@ -0,0 +1,99 @@
+import { MessageCircleQuestion } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const DATA = [
+  {
+    question: "آیا امکان استفاده رایگان وجود دارد؟",
+    answer:
+      "بله، نسخه رایگان برای شروع در دسترس است و در صورت نیاز می‌توانید به پلن‌های حرفه‌ای ارتقا دهید.",
+  },
+  {
+    question: "چه سرویس‌هایی پشتیبانی می‌شوند؟",
+    answer:
+      "امکان اتصال به طیف گسترده‌ای از سرویس‌ها و APIها وجود دارد و امکانات هر پلن ممکن است متفاوت باشد.",
+  },
+  {
+    question: "هوش مصنوعی چه کمکی می‌کند؟",
+    answer:
+      "هوش مصنوعی با تحلیل داده‌ها، ارائه پیشنهادهای هوشمند و خودکارسازی وظایف تکراری به افزایش بهره‌وری کمک می‌کند.",
+  },
+  {
+    question: "آیا استفاده تیمی امکان‌پذیر است؟",
+    answer:
+      "بله، امکان تعریف اعضای تیم، مدیریت دسترسی‌ها و همکاری هم‌زمان روی پروژه‌ها وجود دارد.",
+  },
+  {
+    question: "اطلاعات من چگونه محافظت می‌شود؟",
+    answer:
+      "تمام اطلاعات با استفاده از استانداردهای امنیتی روز رمزنگاری و در زیرساختی امن نگهداری می‌شوند.",
+  },
+  {
+    question: "چگونه پلن اشتراک را مدیریت کنم؟",
+    answer:
+      "از طریق پنل کاربری می‌توانید پلن، تمدید، پرداخت و تنظیمات اشتراک خود را مدیریت کنید.",
+  },
+];
+
+interface Faq10Props {
+  className?: string;
+}
+
+const Faq10 = ({ className }: Faq10Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container mx-auto flex max-w-3xl flex-col gap-6 border-x py-4 text-center max-lg:border-x lg:py-8">
+          <Badge
+            variant="outline"
+            className="mx-auto w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <MessageCircleQuestion className="size-4" />
+
+            <span>پرسش‌های متداول</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
+            هر آنچه باید بدانید
+          </h2>
+          <p className="mx-auto max-w-[600px] tracking-[-0.32px] text-muted-foreground">
+            به دنبال پاسخ سریع هستید؟{" "}
+            <span className="underline">بخش پرسش‌های متداول</span> را مطالعه کنید.
+                                </p>
+        </div>
+      </div>
+
+      <div className="container mx-auto max-w-3xl">
+        <div className="pt-8 pb-4 md:pb-8 lg:pt-[3.75rem] lg:pb-[50px]">
+          <Accordion type="single" collapsible className="space-y-4 text-start">
+            {DATA.map((item, index) => (
+              <AccordionItem
+                key={index}
+                value={`item-${index}`}
+                className="rounded-[7px] border px-6 text-primary data-[state=open]:pb-2"
+              >
+                <AccordionTrigger className="py-5 text-start text-base tracking-[-0.32px]">
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent className="text-base tracking-[-0.32px] text-muted-foreground">
+                  {item.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container mx-auto h-full max-w-3xl border-x"></div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq10 };
diff --git a/blocks/faq11.tsx b/blocks/faq11.tsx
new file mode 100644
index 0000000..ab02f91
--- /dev/null
+++ b/blocks/faq11.tsx
@@ -0,0 +1,119 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+const categories = [
+  {
+    title: "پشتیبانی",
+    questions: [
+      {
+        question: "چطور حساب کاربری‌ام را بدون دردسر به‌روز کنم؟",
+        answer:
+          "از بخش تنظیمات حساب کاربری می‌توانید اطلاعات خود را به‌روزرسانی کنید. همه تغییرات به‌صورت خودکار ذخیره می‌شوند.",
+      },
+      {
+        question: "آیا پشتیبانی رایگان است یا باید همه چیز را خودم جستجو کنم؟",
+        answer:
+          "پشتیبانی رایگان برای همه کاربران فعال است. تیم ما آماده پاسخگویی به پرسش‌های شماست.",
+      },
+      {
+        question: "آیا قرار است همه چیز جایگزین هوش مصنوعی شود؟",
+        answer:
+          "ما از هوش مصنوعی به‌عنوان ابزار کمکی استفاده می‌کنیم، اما تصمیم‌گیری‌ها و پشتیبانی انسانی همچنان در مرکز خدمات ما قرار دارد.",
+      },
+    ],
+  },
+  {
+    title: "حساب کاربری",
+    questions: [
+      {
+        question: "چطور رمز عبور خود را تغییر دهم؟",
+        answer:
+          "در بخش امنیت حساب کاربری، گزینه تغییر رمز عبور را انتخاب کنید و مراحل را دنبال کنید.",
+      },
+      {
+        question: "آیا می‌توانم حساب خود را حذف کنم؟",
+        answer:
+          "بله، از بخش تنظیمات حساب می‌توانید درخواست حذف دائمی حساب را ثبت کنید. این عمل غیرقابل بازگشت است.",
+      },
+    ],
+  },
+  {
+    title: "سایر پرسش‌ها",
+    questions: [
+      {
+        question: "آیا داده‌های من با دیگران به اشتراک گذاشته می‌شود؟",
+        answer:
+          "خیر. داده‌های شما محرمانه باقی می‌ماند و بدون رضایت شما با شخص ثالث به اشتراک گذاشته نمی‌شود.",
+      },
+      {
+        question: "چطور می‌توانم پیشنهاد یا بازخورد بدهم؟",
+        answer:
+          "از طریق فرم تماس یا ایمیل پشتیبانی می‌توانید پیشنهادها و بازخوردهای خود را برای ما ارسال کنید.",
+      },
+    ],
+  },
+];
+
+interface Faq11Props {
+  className?: string;
+}
+
+const Faq11 = ({ className }: Faq11Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative mx-2.5 mt-2.5 rounded-t-2xl rounded-b-[36px] bg-linear-to-b from-background via-background to-slate-100 lg:mx-4 dark:to-slate-900",
+        className,
+      )}
+    >
+      <section className="py-32">
+        <div className="container mx-auto grid max-w-5xl gap-16 lg:grid-cols-2">
+          <div className="space-y-4 text-start">
+            <h2 className="text-xl font-semibold tracking-tight md:text-xl lg:text-2xll">
+              سوالی دارید؟
+            </h2>
+
+            <p className="max-w-md leading-snug font-medium text-muted-foreground">
+              اگر پاسخ مورد نظرتان را پیدا نکردید،{" "}
+              <a href="#" className="underline underline-offset-4">
+                تماس بگیرید
+              </a>
+              .
+            </p>
+          </div>
+
+          <div className="grid gap-6 text-start">
+            {categories.map((category, categoryIndex) => (
+              <div key={category.title} className="">
+                <h3 className="border-b py-4 font-medium text-muted-foreground">
+                  {category.title}
+                </h3>
+                <Accordion type="single" collapsible className="w-full">
+                  {category.questions.map((item, i) => (
+                    <AccordionItem key={i} value={`${categoryIndex}-${i}`}>
+                      <AccordionTrigger className="text-start">
+                        {item.question}
+                      </AccordionTrigger>
+                      <AccordionContent className="text-muted-foreground">
+                        {item.answer}
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </section>
+  );
+};
+
+export { Faq11 };
diff --git a/blocks/faq12.tsx b/blocks/faq12.tsx
new file mode 100644
index 0000000..cf03232
--- /dev/null
+++ b/blocks/faq12.tsx
@@ -0,0 +1,322 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type Category = "Support" | "Account" | "Features" | "Security" | "Other";
+
+interface FAQItem {
+  question: string;
+  answer: string;
+  category: Category;
+}
+
+const categoryLabels: Record<Category, string> = {
+  Support: "پشتیبانی",
+  Account: "حساب کاربری",
+  Features: "امکانات",
+  Security: "امنیت",
+  Other: "سایر",
+};
+
+const faqItems: FAQItem[] = [
+  {
+    category: "Support",
+    question: "آیا امکان استفاده رایگان وجود دارد؟",
+    answer:
+      "بله، نسخه رایگان با امکانات پایه در اختیار شما قرار دارد و در هر زمان می‌توانید متناسب با نیاز خود به پلن‌های حرفه‌ای ارتقا دهید.",
+  },
+  {
+    category: "Support",
+    question: "آیا پشتیبانی رایگان است یا باید همه چیز را خودم جستجو کنم؟",
+    answer:
+      "تیم پشتیبانی از طریق تیکت، ایمیل و مستندات در کنار شماست تا در کوتاه‌ترین زمان ممکن پاسخ‌گوی پرسش‌ها باشد.",
+  },
+  {
+    category: "Support",
+    question: "اگر کمک فوری نیاز داشته باشم چه؟",
+    answer:
+      "درخواست‌های فوری در سریع‌ترین زمان ممکن توسط تیم پشتیبانی بررسی و پاسخ داده می‌شوند.",
+  },
+  {
+    category: "Account",
+    question: "چگونه اطلاعات حساب کاربری را ویرایش کنم؟",
+    answer:
+      "از بخش تنظیمات حساب کاربری می‌توانید اطلاعات شخصی، رمز عبور و تنظیمات امنیتی را به‌سادگی ویرایش کنید.",
+  },
+  {
+    category: "Account",
+    question: "آیا ویرایش اطلاعات حساب کاربری آسان است؟",
+    answer: "بله، تنها با چند کلیک می‌توانید اطلاعات حساب خود را به‌روزرسانی کنید.",
+  },
+  {
+    category: "Account",
+    question: "اگر رمز عبورم را فراموش کنم چه می‌شود؟",
+    answer: "از گزینه «فراموشی رمز عبور» استفاده کنید تا لینک بازیابی برای شما ارسال شود.",
+  },
+  {
+    category: "Features",
+    question: "آیا قرار است همه چیز جایگزین هوش مصنوعی شود؟",
+    answer:
+      "هوش مصنوعی نقش دستیار را دارد و تصمیم‌های نهایی همچنان توسط کاربران انجام می‌شود.",
+  },
+  {
+    category: "Features",
+    question: "چه چیزی پلتفرم شما را منحصربه‌فرد می‌کند؟",
+    answer:
+      "ترکیب قابلیت‌های هوش مصنوعی، اتوماسیون و یکپارچه‌سازی، بهره‌وری سازمان را افزایش می‌دهد.",
+  },
+  {
+    category: "Features",
+    question: "آیا یکپارچه‌سازی با ابزارهای دیگر پشتیبانی می‌شود؟",
+    answer: "امکان اتصال به سرویس‌ها، APIها و ابزارهای متداول از طریق یکپارچه‌سازی فراهم است.",
+  },
+  {
+    category: "Security",
+    question: "داده‌های من چقدر امن هستند؟",
+    answer:
+      "داده‌ها با رمزنگاری، کنترل دسترسی و استانداردهای امنیتی محافظت می‌شوند.",
+  },
+  {
+    category: "Security",
+    question: "در صورت نشت داده چه می‌شود؟",
+    answer:
+      "در صورت بروز رخداد امنیتی، مطابق سیاست‌های اطلاع‌رسانی و مدیریت بحران اقدام خواهد شد.",
+  },
+  {
+    category: "Security",
+    question: "آیا سیستم پشتیبان دارید؟",
+    answer:
+      "نسخه‌های پشتیبان به‌صورت منظم و در زیرساخت‌های امن نگهداری می‌شوند.",
+  },
+  {
+    category: "Other",
+    question: "چرا قیمت‌گذاری‌تان این‌قدر پیچیده است؟",
+    answer:
+      "ساختار قیمت‌گذاری بر اساس امکانات، تعداد کاربران و نیازهای هر کسب‌وکار طراحی شده است.",
+  },
+  {
+    category: "Other",
+    question: "آیا بازپرداخت ارائه می‌دهید؟",
+    answer: "در صورت احراز شرایط مندرج در قوانین بازگشت وجه، امکان ثبت درخواست بازپرداخت وجود دارد.",
+  },
+  {
+    category: "Other",
+    question: "نقشه راه شما چطور است؟",
+    answer: "نقشه راه محصول به‌صورت مستمر بر اساس بازخورد کاربران و برنامه توسعه به‌روزرسانی می‌شود.",
+  },
+];
+
+const categories: Category[] = [
+  "Support",
+  "Account",
+  "Features",
+  "Security",
+  "Other",
+];
+
+const TOP_PADDING = 300;
+
+interface Faq12Props {
+  className?: string;
+}
+
+const Faq12 = ({ className }: Faq12Props) => {
+  const [activeCategory, setActiveCategory] = useState<Category>("Support");
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const isScrollingRef = useRef(false);
+  const categoryRefs = useRef<Record<Category, HTMLDivElement | null>>({
+    Support: null,
+    Account: null,
+    Features: null,
+    Security: null,
+    Other: null,
+  });
+
+  const setupObserver = useCallback(() => {
+    observerRef.current?.disconnect();
+
+    let debounceTimeout: NodeJS.Timeout;
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        if (isScrollingRef.current) return;
+
+        if (debounceTimeout) {
+          clearTimeout(debounceTimeout);
+        }
+
+        debounceTimeout = setTimeout(() => {
+          const intersectingEntries = entries.filter(
+            (entry) => entry.isIntersecting,
+          );
+
+          const entry = intersectingEntries.reduce(
+            (closest, current) => {
+              const rect = current.boundingClientRect;
+              const distanceFromThreshold = Math.abs(rect.top - TOP_PADDING);
+              const closestDistance = closest
+                ? Math.abs(closest.boundingClientRect.top - TOP_PADDING)
+                : Infinity;
+
+              return distanceFromThreshold < closestDistance
+                ? current
+                : closest;
+            },
+            null as IntersectionObserverEntry | null,
+          );
+
+          if (entry) {
+            const category = entry.target.getAttribute(
+              "data-category",
+            ) as Category;
+            if (category) {
+              setActiveCategory(category);
+            }
+          }
+        }, 150);
+      },
+      {
+        root: null,
+        rootMargin: `-${TOP_PADDING}px 0px -100% 0px`,
+        threshold: [0, 0.25, 0.5, 0.75, 1],
+      },
+    );
+
+    Object.entries(categoryRefs.current).forEach(([category, element]) => {
+      if (element) {
+        element.setAttribute("data-category", category);
+        observerRef.current?.observe(element);
+      }
+    });
+
+    return () => {
+      if (debounceTimeout) {
+        clearTimeout(debounceTimeout);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const cleanup = setupObserver();
+    return () => {
+      cleanup();
+      observerRef.current?.disconnect();
+    };
+  }, [setupObserver]);
+
+  const handleCategoryClick = (category: Category) => {
+    setActiveCategory(category);
+    isScrollingRef.current = true;
+
+    const element = document.getElementById(`faq-${category.toLowerCase()}`);
+    if (element) {
+      element.style.scrollMargin = `${TOP_PADDING}px`;
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+
+      setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 1000);
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "min-h-screen bg-[#F2F2F2] py-32 dark:bg-[#24242B]",
+        className,
+      )}
+    >
+      <div className="container mx-auto max-w-4xl">
+        <div className="text-center">
+          <h1 className="text-center text-xl font-semibold tracking-tight sm:text-2xll">
+            پاسخ پرسش‌های شما اینجاست
+                                </h1>
+          <p className="mx-auto mt-4 max-w-xl text-center text-balance text-muted-foreground">
+            اگر پاسخ موردنظر خود را پیدا نکردید، می‌توانید از مستندات یا تیم پشتیبانی کمک بگیرید.
+                                </p>
+        </div>
+
+        <div className="mx-auto mt-8 grid max-w-5xl gap-8 md:mt-12 md:grid-cols-[200px_1fr] md:gap-12 lg:mt-16">
+          <div className="sticky top-24 flex h-fit flex-col gap-4 max-md:hidden">
+            {categories.map((category) => (
+              <Button
+                variant="ghost"
+                key={category}
+                onClick={() => handleCategoryClick(category)}
+                className={`justify-start text-start text-xl transition-colors ${
+                  activeCategory === category
+                    ? "font-semibold"
+                    : "font-normal hover:opacity-75"
+                }`}
+              >
+                {categoryLabels[category]}
+              </Button>
+            ))}
+          </div>
+
+          <div className="space-y-6 text-start">
+            {categories.map((category) => {
+              const categoryItems = faqItems.filter(
+                (item) => item.category === category,
+              );
+
+              return (
+                <div
+                  key={category}
+                  id={`faq-${category.toLowerCase()}`}
+                  ref={(el) => {
+                    categoryRefs.current[category] = el;
+                  }}
+                  className={cn(
+                    "rounded-xl px-6",
+                    activeCategory === category
+                      ? "bg-background"
+                      : "bg-background md:bg-background/40",
+                  )}
+                  style={{
+                    scrollMargin: `${TOP_PADDING}px`,
+                  }}
+                >
+                  <Accordion
+                    type="single"
+                    collapsible
+                    defaultValue={`${categories[0]}-0`}
+                    className="w-full"
+                  >
+                    {categoryItems.map((item, i) => (
+                      <AccordionItem
+                        key={i}
+                        value={`${category}-${i}`}
+                        className="border-b border-muted last:border-0"
+                      >
+                        <AccordionTrigger className="text-start text-base font-medium hover:no-underline">
+                          {item.question}
+                        </AccordionTrigger>
+                        <AccordionContent className="text-base font-medium text-muted-foreground">
+                          {item.answer}
+                        </AccordionContent>
+                      </AccordionItem>
+                    ))}
+                  </Accordion>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq12 };
diff --git a/blocks/faq14.tsx b/blocks/faq14.tsx
new file mode 100644
index 0000000..b7108df
--- /dev/null
+++ b/blocks/faq14.tsx
@@ -0,0 +1,162 @@
+import { type SVGProps, useId } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+const FAQ_ITEMS = [
+  {
+    category: "پشتیبانی",
+    items: [
+      {
+        question: "آیا امکان استفاده رایگان وجود دارد؟",
+        answer:
+          "بله، نسخه رایگان برای شروع در دسترس است و در صورت نیاز می‌توانید به پلن‌های حرفه‌ای ارتقا دهید.",
+      },
+      {
+        question: "چگونه اطلاعات حساب کاربری را ویرایش کنم؟",
+        answer:
+          "از بخش تنظیمات حساب کاربری می‌توانید اطلاعات شخصی، تنظیمات امنیتی و رمز عبور خود را به‌سادگی مدیریت کنید.",
+      },
+      {
+        question: "آیا پشتیبانی برای همه کاربران در دسترس است؟",
+        answer:
+          "تمام کاربران به خدمات پشتیبانی دسترسی دارند و کارشناسان ما از طریق تیکت، ایمیل یا سایر کانال‌های ارتباطی آماده پاسخ‌گویی هستند.",
+      },
+      {
+        question: "هوش مصنوعی چه نقشی در این پلتفرم دارد؟",
+        answer:
+          "هوش مصنوعی برای افزایش سرعت، دقت و خودکارسازی فرایندها استفاده می‌شود، اما تصمیم‌گیری نهایی و کنترل کسب‌وکار همچنان در اختیار کاربران است.",
+      },
+    ],
+  },
+  {
+    category: "حساب کاربری",
+    items: [
+      {
+        question: "آیا پشتیبانی برای همه کاربران در دسترس است؟",
+        answer:
+          "تمام کاربران به خدمات پشتیبانی دسترسی دارند و کارشناسان ما از طریق تیکت، ایمیل یا سایر کانال‌های ارتباطی آماده پاسخ‌گویی هستند.",
+      },
+      {
+        question: "هوش مصنوعی چه نقشی در این پلتفرم دارد؟",
+        answer:
+          "هوش مصنوعی برای افزایش سرعت، دقت و خودکارسازی فرایندها استفاده می‌شود، اما تصمیم‌گیری نهایی و کنترل کسب‌وکار همچنان در اختیار کاربران است.",
+      },
+    ],
+  },
+  {
+    category: "سایر پرسش‌ها",
+    items: [
+      {
+        question: "آیا پشتیبانی برای همه کاربران در دسترس است؟",
+        answer:
+          "تمام کاربران به خدمات پشتیبانی دسترسی دارند و کارشناسان ما از طریق تیکت، ایمیل یا سایر کانال‌های ارتباطی آماده پاسخ‌گویی هستند.",
+      },
+      {
+        question: "هوش مصنوعی چه نقشی در این پلتفرم دارد؟",
+        answer:
+          "هوش مصنوعی برای افزایش سرعت، دقت و خودکارسازی فرایندها استفاده می‌شود، اما تصمیم‌گیری نهایی و کنترل کسب‌وکار همچنان در اختیار کاربران است.",
+      },
+    ],
+  },
+];
+
+export function Faq14() {
+  return (
+    <section dir="rtl" lang="fa" className="relative py-32">
+      <div className="container mx-auto max-w-3xl">
+        <div className="text-center">
+          <h1 className="text-xl font-semibold tracking-tight md:text-2xll lg:text-2xll">
+            پرسش‌های متداول
+                                </h1>
+          <p className="mt-4 text-xl text-muted-foreground md:text-3xl">
+            پاسخ پرسش‌های متداول کاربران
+                                </p>
+        </div>
+
+        <div className="mx-auto mt-8 max-w-2xl space-y-12 text-start md:mt-12 lg:mt-20">
+          {FAQ_ITEMS.map((category) => (
+            <Card key={category.category} className="border-hidden bg-muted">
+              <CardHeader className="pb-0">
+                <h3 className="border-b pb-4 font-mono text-sm font-medium tracking-widest text-accent-foreground uppercase">
+                  {category.category}
+                </h3>
+              </CardHeader>
+              <CardContent>
+                <Accordion type="single" collapsible className="w-full">
+                  {category.items.map((item, i) => (
+                    <AccordionItem
+                      key={i}
+                      value={`${category.category}-${i}`}
+                      className="border-b border-muted last:border-0"
+                    >
+                      <AccordionTrigger className="text-start text-base font-medium hover:no-underline">
+                        {item.question}
+                      </AccordionTrigger>
+                      <AccordionContent className="text-base font-medium text-muted-foreground">
+                        {item.answer}
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+      <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
+        <PlusSigns className="h-full w-full text-foreground/[0.05]" />
+      </div>
+    </section>
+  );
+}
+
+interface PlusSignsProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
+  const GAP = 16;
+  const STROKE_WIDTH = 1;
+  const PLUS_SIZE = 6;
+  const id = useId();
+  const patternId = `${id}`;
+
+  return (
+    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          x="0"
+          y="0"
+          width={GAP}
+          height={GAP}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1={GAP / 2}
+            y1={(GAP - PLUS_SIZE) / 2}
+            x2={GAP / 2}
+            y2={(GAP + PLUS_SIZE) / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+          <line
+            x1={(GAP - PLUS_SIZE) / 2}
+            y1={GAP / 2}
+            x2={(GAP + PLUS_SIZE) / 2}
+            y2={GAP / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+};
diff --git a/blocks/faq15.tsx b/blocks/faq15.tsx
new file mode 100644
index 0000000..2fbbedb
--- /dev/null
+++ b/blocks/faq15.tsx
@@ -0,0 +1,74 @@
+import type { LucideIcon } from "lucide-react";
+import { Clock, Heart, Home, Wallet } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface FaqItem {
+  icon: LucideIcon;
+  heading: string;
+  description: string;
+}
+
+interface Faq15Props {
+  title?: string;
+  items?: FaqItem[];
+  className?: string;
+}
+
+const defaultItems: FaqItem[] = [
+  {
+    icon: Heart,
+    heading: "یک جان را نجات دهید، یک دوست پیدا کنید",
+    description:
+      "با انتخاب به‌سرپرستی، به حیوانی شایسته فرصت دوم برای خوشبختی می‌دهید و در عوض یک همراه وفادار پیدا می‌کنید که شادی را به زندگی‌تان می‌آورد.",
+  },
+  {
+    icon: Wallet,
+    heading: "مقرون‌به‌صرفه‌تر از خرید",
+    description:
+      "هزینه به‌سرپرستی معمولاً شامل واکسیناسیون، میکروچیپ و عقیم‌سازی است و از خرید از پرورش‌دهنده مقرون‌به‌صرفه‌تر است.",
+  },
+  {
+    icon: Clock,
+    heading: "از مرحله توله‌سگی بگذرید",
+    description:
+      "بسیاری از حیوانات پناهگاه از قبل نظافت و دستورات پایه را یاد گرفته‌اند و زمان و تلاش کمتری برای آموزش نیاز دارید.",
+  },
+  {
+    icon: Home,
+    heading: "از پناهگاه‌های محلی حمایت کنید",
+    description:
+      "به‌سرپرستی شما به کار مهم پناهگاه‌های محلی کمک می‌کند تا به نجات و مراقبت از حیوانات نیازمند ادامه دهند.",
+  },
+];
+
+const Faq15 = ({
+  title = "چرا باید حیوان خانگی‌تان را از پناهگاه محلی به‌سرپرستی بگیرید؟",
+  items = defaultItems,
+  className,
+}: Faq15Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-3xl">
+        <h2 className="text-center text-3xl font-semibold md:text-2xll">
+          {title}
+        </h2>
+        <ul className="mt-12 grid grid-cols-1 gap-8 text-start md:grid-cols-2 md:gap-10">
+          {items.map((item, idx) => (
+            <li className="flex flex-col gap-2.5" key={idx}>
+              <div className="flex items-center gap-2 md:gap-2.5">
+                <item.icon className="size-5 shrink-0 md:size-6" />
+                <h3 className="font-semibold md:text-lg">{item.heading}</h3>
+              </div>
+              <p className="text-sm text-muted-foreground md:text-base">
+                {item.description}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Faq15 };
diff --git a/blocks/faq16.tsx b/blocks/faq16.tsx
new file mode 100644
index 0000000..cf3be0f
--- /dev/null
+++ b/blocks/faq16.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+const FAQ_QUESTIONS = [
+  {
+    question: "این بخش چه کاربردی دارد؟",
+    answer:
+      "در این بخش پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات و امکانات سامانه ارائه شده است.",
+  },
+  {
+    question: "هدف این بخش چیست؟",
+    answer:
+      "هدف این بخش کاهش نیاز به تماس با پشتیبانی و دسترسی سریع کاربران به اطلاعات موردنیاز است.",
+  },
+  {
+    question: "چگونه پرسش‌های متداول را طراحی کنیم؟",
+    answer:
+      "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و پاسخ‌هایی کوتاه، دقیق و شفاف برای هرکدام آماده کنید.",
+  },
+  {
+    question: "مزیت وجود این بخش چیست؟",
+    answer:
+      "این بخش باعث افزایش رضایت کاربران، کاهش درخواست‌های پشتیبانی و دسترسی سریع‌تر به اطلاعات می‌شود.",
+  },
+  {
+    question: "این بخش چه کاربردی دارد؟",
+    answer:
+      "در این بخش پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات و امکانات سامانه ارائه شده است.",
+  },
+  {
+    question: "هدف این بخش چیست؟",
+    answer:
+      "هدف این بخش کاهش نیاز به تماس با پشتیبانی و دسترسی سریع کاربران به اطلاعات موردنیاز است.",
+  },
+  {
+    question: "چگونه پرسش‌های متداول را طراحی کنیم؟",
+    answer:
+      "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و پاسخ‌هایی کوتاه، دقیق و شفاف برای هرکدام آماده کنید.",
+  },
+  {
+    question: "مزیت وجود این بخش چیست؟",
+    answer:
+      "این بخش باعث افزایش رضایت کاربران، کاهش درخواست‌های پشتیبانی و دسترسی سریع‌تر به اطلاعات می‌شود.",
+  },
+];
+
+interface Faq16Props {
+  className?: string;
+}
+
+const Faq16 = ({ className }: Faq16Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-32", className)}
+    >
+      <div className="container mx-auto max-w-3xl">
+        <h1 className="mb-10 text-center text-2xll font-bold tracking-tighter text-foreground">
+          پرسش‌های متداول
+                          </h1>
+        <div className="z-20 mx-auto max-w-2xl rounded-2xl border border-border bg-background p-3">
+          <Accordion
+            type="single"
+            collapsible
+            className="flex w-full flex-col items-center justify-center gap-3 text-start"
+          >
+            {FAQ_QUESTIONS.map((item, index) => (
+              <AccordionItem
+                value={index.toString()}
+                key={index}
+                className="m-0 w-full rounded-xl bg-muted px-4 py-2"
+              >
+                <AccordionTrigger className="flex flex-1 justify-between text-start font-semibold transition-all hover:no-underline">
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent className="mt-2 text-muted-foreground">
+                  {item.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq16 };
diff --git a/blocks/faq17.tsx b/blocks/faq17.tsx
new file mode 100644
index 0000000..7af0062
--- /dev/null
+++ b/blocks/faq17.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { ArrowUpRight } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+interface ProfileInfo {
+  name: string;
+  title: string;
+  image: string;
+}
+
+interface Faq17Props {
+  heading?: string;
+  profileInfo?: ProfileInfo;
+  contactSection?: {
+    title: string;
+    description: string;
+    linkText: string;
+    className?: string;
+  };
+  items?: FaqItem[];
+  showBottomButtons?: boolean;
+  className?: string;
+}
+
+const Faq17 = ({
+  heading = "پرسش‌های متداول",
+  profileInfo = {
+    name: "سارا احمدی",
+    title: "مدیر موفقیت مشتری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+  },
+  contactSection = {
+    title: "هنوز سوالی دارید؟",
+    description:
+      "اگر پاسخ پرسش خود را پیدا نکردید، از طریق فرم تماس یا تیم پشتیبانی با ما در ارتباط باشید تا در کوتاه‌ترین زمان راهنمایی لازم را دریافت کنید.",
+    linkText: "تماس با ما",
+  },
+  items = [
+    {
+      question: "چه خدمات و راهکارهایی ارائه می‌کنید؟",
+      answer:
+        "خدمات ما شامل مشاوره، طراحی، پیاده‌سازی، توسعه و پشتیبانی راهکارهای نرم‌افزاری متناسب با نیاز سازمان‌ها است.",
+    },
+    {
+      question: "چگونه همکاری را آغاز کنم؟",
+      answer:
+        "کافی است درخواست خود را ثبت کنید تا پس از بررسی نیازها، جلسه مشاوره و مسیر اجرای پروژه با شما هماهنگ شود.",
+    },
+    {
+      question: "پلن‌ها و قیمت‌گذاری چگونه است؟",
+      answer:
+        "قیمت خدمات بر اساس امکانات، مقیاس پروژه و نیازهای سازمان تعیین می‌شود و پس از بررسی درخواست، پیشنهاد دقیق ارائه خواهد شد.",
+    },
+    {
+      question: "آیا پس از اتمام پروژه پشتیبانی ارائه می‌دهید؟",
+      answer:
+        "حتماً! ما به ساخت روابط بلندمدت با مشتریان اعتقاد داریم. پشتیبانی و نگهداری مستمر ارائه می‌دهیم و همیشه برای هر پرسش یا نیاز اضافه‌ای پس از اتمام پروژه در دسترس هستیم.",
+    },
+    {
+      question: "مزیت رقابتی شما چیست؟",
+      answer:
+        "تمرکز بر کیفیت، پشتیبانی مستمر، توسعه‌پذیری و ارائه راهکارهای متناسب با نیاز هر کسب‌وکار، مهم‌ترین مزیت خدمات ماست.",
+    },
+  ],
+  className,
+}: Faq17Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-5xl">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-5 lg:gap-12 xl:grid-cols-12 xl:gap-16">
+          <div className="flex flex-col justify-between text-start lg:col-span-2 xl:col-span-4">
+            <div>
+              <div className="mb-8 flex items-start gap-3 sm:gap-4 lg:mb-12">
+                <div className="h-12 w-12 shrink-0 overflow-hidden rounded-xl sm:h-16 sm:w-16">
+                  <img
+                    src={profileInfo.image}
+                    alt={profileInfo.name}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+                <div className="min-w-0">
+                  <h2 className="mb-1 text-lg leading-tight font-semibold sm:text-xl">
+                    {profileInfo.name}
+                  </h2>
+                  <p className="text-sm sm:text-base">{profileInfo.title}</p>
+                </div>
+              </div>
+
+              <div className="space-y-4 lg:space-y-6">
+                <h3 className="text-lg leading-tight font-semibold sm:text-xl">
+                  {contactSection.title}
+                </h3>
+                <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
+                  {contactSection.description}
+                </p>
+              </div>
+            </div>
+            <div className="py-4">
+              <div className="group flex h-auto p-0 text-start text-base font-medium hover:bg-transparent sm:text-xl">
+                <span className="border-b-2 border-border pb-0.5 transition-colors">
+                  {contactSection.linkText}
+                </span>
+                <ArrowUpRight className="ms-1 h-6 w-5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 rtl:rotate-180" />
+              </div>
+            </div>
+          </div>
+
+          <div className="lg:col-span-3 xl:col-span-8">
+            <div className="mb-8 text-center lg:mb-16 lg:text-start">
+              <h1 className="text-xl leading-none font-medium tracking-tight sm:text-2xll">
+                {heading}
+              </h1>
+            </div>
+            <div className="max-w-none">
+              <Accordion
+                type="single"
+                collapsible
+                defaultValue="item-0"
+                className="space-y-0 text-start"
+              >
+                {items.map((item, index) => (
+                  <AccordionItem
+                    key={index}
+                    value={`item-${index}`}
+                    className={cn(
+                      "border-0",
+                      index !== items.length - 1 && "border-b border-border",
+                    )}
+                  >
+                    <AccordionTrigger className="justify-between py-6 text-start text-lg font-semibold hover:no-underline sm:text-xl lg:py-8 lg:text-xl">
+                      <span className="ps-4">{item.question}</span>
+                    </AccordionTrigger>
+                    <AccordionContent className="pt-0 pb-6 ps-8 text-sm leading-relaxed text-muted-foreground sm:text-base lg:pb-8">
+                      {item.answer}
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq17 };
diff --git a/blocks/faq2.tsx b/blocks/faq2.tsx
new file mode 100644
index 0000000..8787e2e
--- /dev/null
+++ b/blocks/faq2.tsx
@@ -0,0 +1,74 @@
+import { cn } from "@/lib/utils";
+
+interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+interface Faq2Props {
+  heading?: string;
+  items?: FaqItem[];
+  className?: string;
+}
+
+const Faq2 = ({
+  heading = "پرسش‌های متداول",
+  items = [
+    {
+      question: "این بخش چه کاربردی دارد؟",
+      answer:
+        "در این بخش، پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، محصولات و نحوه استفاده از سامانه ارائه شده تا بدون نیاز به تماس با پشتیبانی، پاسخ خود را پیدا کنید.",
+    },
+    {
+      question: "چرا این بخش برای کاربران مفید است؟",
+      answer:
+        "هدف این بخش کاهش زمان جستجوی اطلاعات، افزایش رضایت کاربران و دسترسی سریع به پاسخ پرسش‌های متداول است.",
+    },
+    {
+      question: "چگونه یک بخش پرسش‌های متداول مؤثر طراحی کنیم؟",
+      answer:
+        "پرسش‌های پرتکرار کاربران را جمع‌آوری کنید، برای هرکدام پاسخی دقیق و شفاف بنویسید و آن‌ها را بر اساس موضوع دسته‌بندی کنید.",
+    },
+    {
+      question: "وجود این بخش چه مزایایی دارد؟",
+      answer:
+        "این بخش باعث کاهش حجم درخواست‌های پشتیبانی، افزایش سرعت پاسخ‌گویی و بهبود تجربه کاربری می‌شود.",
+    },
+    {
+      question: "چگونه پرسش‌ها را دسته‌بندی کنیم؟",
+      answer:
+        "پرسش‌ها را براساس موضوعاتی مانند حساب کاربری، خرید، پرداخت، ارسال، پشتیبانی و تنظیمات گروه‌بندی کنید تا کاربران سریع‌تر پاسخ خود را بیابند.",
+    },
+    {
+      question: "پاسخ‌ها باید چه میزان جزئیات داشته باشند؟",
+      answer:
+        "پاسخ‌ها باید کوتاه، دقیق و کاربردی باشند؛ در صورت نیاز می‌توان لینک راهنما یا مستندات تکمیلی را نیز ارائه کرد.",
+    },
+    {
+      question: "آیا ارجاع به راهنماهای بیشتر مفید است؟",
+      answer:
+        "بله، لینک به مستندات، آموزش‌ها یا مقالات مرتبط به کاربران کمک می‌کند اطلاعات کامل‌تری دریافت کنند.",
+    },
+  ],
+  className,
+}: Faq2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-3xl">
+        <h1 className="mb-4 text-center text-3xl font-semibold md:mb-11 md:text-xl">
+          {heading}
+        </h1>
+        <div className="space-y-8 text-start">
+          {items.map((item, index) => (
+            <div key={index} className="border-b pb-6">
+              <h3 className="mb-2 font-semibold">{item.question}</h3>
+              <p className="text-muted-foreground">{item.answer}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq2 };
diff --git a/blocks/faq20.tsx b/blocks/faq20.tsx
new file mode 100644
index 0000000..be93fbf
--- /dev/null
+++ b/blocks/faq20.tsx
@@ -0,0 +1,134 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+interface Question {
+  question: string;
+  answer: string;
+}
+
+interface Category {
+  title: string;
+  questions: Question[];
+}
+
+interface Faq20Props {
+  heading?: string;
+  description?: string;
+  contactLinkText?: string;
+  contactLinkHref?: string;
+  categories?: Category[];
+  className?: string;
+}
+
+const Faq20 = ({
+  heading = "پاسخ پرسش خود را پیدا نکردید؟",
+  description = "اگر پاسخ پرسش خود را پیدا نکردید،",
+  contactLinkText = "با ما تماس بگیرید",
+  contactLinkHref = "/contact",
+  categories = [
+    {
+      title: "پشتیبانی",
+      questions: [
+        {
+          question: "چطور تنظیمات حساب کاربری‌ام را به‌روز کنم؟",
+          answer:
+            "می‌توانید از صفحه تنظیمات در داشبورد، پروفایل، ترجیحات اعلان و تنظیمات امنیتی را تغییر دهید.",
+        },
+        {
+          question: "آیا پشتیبانی در همه طرح‌ها گنجانده شده است؟",
+          answer:
+            "بله، همه طرح‌ها شامل دسترسی به تیم پشتیبانی هستند. طرح‌های پریمیوم شامل پشتیبانی اولویت‌دار با زمان پاسخ‌گویی سریع‌تر و مدیر حساب اختصاصی است.",
+        },
+        {
+          question: "ساعات پاسخ‌گویی پشتیبانی چگونه است؟",
+          answer:
+            "تیم پشتیبانی در ساعات کاری پاسخ‌گو است و مشتریان سازمانی بر اساس سطح خدمات، امکان دریافت پشتیبانی ویژه را نیز دارند.",
+        },
+      ],
+    },
+    {
+      title: "حساب کاربری",
+      questions: [
+        {
+          question: "چطور رمز عبورم را بازنشانی کنم؟",
+          answer:
+            "روی لینک «فراموشی رمز عبور» در صفحه ورود کلیک کنید و ایمیل خود را وارد کنید. ظرف چند دقیقه لینک بازنشانی دریافت می‌کنید.",
+        },
+        {
+          question: "آیا می‌توانم آدرس ایمیلم را تغییر دهم؟",
+          answer:
+            "بله، از تنظیمات حساب می‌توانید ایمیل را تغییر دهید. قبل از اعمال تغییر باید ایمیل جدید را تأیید کنید.",
+        },
+      ],
+    },
+    {
+      title: "سایر پرسش‌ها",
+      questions: [
+        {
+          question: "آیا بازپرداخت ارائه می‌دهید؟",
+          answer:
+            "ما ۳۰ روز ضمانت بازگشت وجه برای همه طرح‌ها داریم. اگر راضی نیستید، با تیم پشتیبانی تماس بگیرید.",
+        },
+        {
+          question: "آیا می‌توانم طرح خود را ارتقا یا تنزل دهم؟",
+          answer:
+            "بله، هر زمان می‌توانید طرح را تغییر دهید. ارتقا فوراً اعمال می‌شود و تنزل از دوره صورتحساب بعدی.",
+        },
+      ],
+    },
+  ],
+  className,
+}: Faq20Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-28 lg:py-32", className)}>
+      <div className="container mx-auto max-w-5xl">
+        <div className="grid gap-16 lg:grid-cols-2">
+          <div className="space-y-4 text-start">
+            <h2 className="text-xl tracking-tight md:text-xl lg:text-2xll">
+              {heading}
+            </h2>
+            <p className="max-w-md leading-snug text-muted-foreground">
+              {description}{" "}
+              <a
+                href={contactLinkHref}
+                className="underline underline-offset-4"
+              >
+                {contactLinkText}
+              </a>
+              .
+            </p>
+          </div>
+
+          <div className="grid gap-6 text-start">
+            {categories.map((category, categoryIndex) => (
+              <div key={category.title}>
+                <h3 className="border-b py-4 text-muted-foreground">
+                  {category.title}
+                </h3>
+                <Accordion type="single" collapsible className="w-full">
+                  {category.questions.map((item, i) => (
+                    <AccordionItem key={i} value={`${categoryIndex}-${i}`}>
+                      <AccordionTrigger className="text-start">
+                        {item.question}
+                      </AccordionTrigger>
+                      <AccordionContent className="text-muted-foreground">
+                        {item.answer}
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq20 };
diff --git a/blocks/faq3.tsx b/blocks/faq3.tsx
new file mode 100644
index 0000000..c877ecd
--- /dev/null
+++ b/blocks/faq3.tsx
@@ -0,0 +1,111 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+interface FaqItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+interface Faq3Props {
+  heading: string;
+  description: string;
+  items?: FaqItem[];
+  supportHeading: string;
+  supportDescription: string;
+  supportButtonText: string;
+  supportButtonUrl: string;
+  className?: string;
+}
+
+const faqItems = [
+  {
+    id: "faq-1",
+    question: "این بخش چه کاربردی دارد؟",
+    answer:
+      "در این بخش، پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، محصولات و نحوه استفاده از سامانه ارائه شده تا بدون نیاز به تماس با پشتیبانی، پاسخ خود را پیدا کنید.",
+  },
+  {
+    id: "faq-2",
+    question: "چرا این بخش برای کاربران مفید است؟",
+    answer:
+      "هدف این بخش کاهش زمان جستجوی اطلاعات، افزایش رضایت کاربران و دسترسی سریع به پاسخ پرسش‌های متداول است.",
+  },
+  {
+    id: "faq-3",
+    question: "چگونه یک بخش پرسش‌های متداول مؤثر طراحی کنیم؟",
+    answer:
+      "پرسش‌های پرتکرار کاربران را جمع‌آوری کنید، برای هرکدام پاسخی دقیق و شفاف بنویسید و آن‌ها را بر اساس موضوع دسته‌بندی کنید.",
+  },
+  {
+    id: "faq-4",
+    question: "وجود این بخش چه مزایایی دارد؟",
+    answer:
+      "این بخش باعث کاهش حجم درخواست‌های پشتیبانی، افزایش سرعت پاسخ‌گویی و بهبود تجربه کاربری می‌شود.",
+  },
+  {
+    id: "faq-5",
+    question: "چگونه پرسش‌ها را دسته‌بندی کنیم؟",
+    answer:
+      "پرسش‌ها را براساس موضوعاتی مانند حساب کاربری، خرید، پرداخت، ارسال، پشتیبانی و تنظیمات گروه‌بندی کنید تا کاربران سریع‌تر پاسخ خود را بیابند.",
+  },
+  {
+    id: "faq-6",
+    question: "پاسخ‌ها باید چه میزان جزئیات داشته باشند؟",
+    answer:
+      "پاسخ‌ها باید کوتاه، دقیق و کاربردی باشند؛ در صورت نیاز می‌توان لینک راهنما یا مستندات تکمیلی را نیز ارائه کرد.",
+  },
+  {
+    id: "faq-7",
+    question: "آیا ارجاع به راهنماهای بیشتر مفید است؟",
+    answer:
+      "بله، لینک به مستندات، آموزش‌ها یا مقالات مرتبط به کاربران کمک می‌کند اطلاعات کامل‌تری دریافت کنند.",
+  },
+];
+
+const Faq3 = ({
+  heading = "پرسش‌های متداول",
+  description = "پاسخ پرسش‌های رایج درباره محصولات ما را اینجا بیابید. جوابی پیدا نکردید؟ با تیم پشتیبانی ما تماس بگیرید.",
+  items = faqItems,
+  className,
+}: Faq3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-3xl space-y-16">
+        <div className="flex flex-col text-center">
+          <h2 className="mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-xl">
+            {heading}
+          </h2>
+          <p className="text-muted-foreground lg:text-lg">{description}</p>
+        </div>
+        <Accordion
+          type="single"
+          collapsible
+          className="w-full text-start"
+        >
+          {items.map((item) => (
+            <AccordionItem key={item.id} value={item.id}>
+              <AccordionTrigger className="transition-opacity duration-200 hover:no-underline hover:opacity-60">
+                <div className="font-medium sm:py-1 lg:py-2 lg:text-lg">
+                  {item.question}
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="sm:mb-1 lg:mb-2">
+                <div className="text-muted-foreground lg:text-lg">
+                  {item.answer}
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </section>
+  );
+};
+
+export { Faq3 };
diff --git a/blocks/faq4.tsx b/blocks/faq4.tsx
new file mode 100644
index 0000000..ad74bce
--- /dev/null
+++ b/blocks/faq4.tsx
@@ -0,0 +1,109 @@
+import { ChevronRight } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const faqs = [
+  {
+    question: "سوالات متداول چیست و چرا اهمیت دارد؟",
+    answer:
+      "سوالات متداول فهرستی است که پاسخ پرسش‌های رایج کاربران درباره یک محصول، خدمت یا موضوع خاص را ارائه می‌دهد. داشتن بخش سوالات متداول ساختاریافته مهم است چون به کاربران امکان می‌دهد بدون تماس با پشتیبانی، سریع اطلاعات مورد نیازشان را پیدا کنند.",
+  },
+  {
+    question: "چرا باید در وب‌سایت یا اپلیکیشن خود سوالات متداول داشته باشم؟",
+    answer:
+      "بخش سوالات متداول راهی عملی برای ارائه کمک فوری به کاربران یا مشتریان است. به‌جای انتظار برای پاسخ پشتیبانی، می‌توانند پاسخ پرسش‌های رایج را به‌سرعت بیابند.",
+  },
+  {
+    question: "چطور یک بخش سوالات متداول مؤثر بسازم؟",
+    answer:
+      "ساخت بخش سوالات متداول با جمع‌آوری پرتکرارترین پرسش‌های کاربران یا مشتریان آغاز می‌شود. سپس باید برای هر پرسش پاسخ‌هایی روشن، کامل و مفید بنویسید.",
+  },
+  {
+    question: "مزایای داشتن بخش سوالات متداول منظم چیست؟",
+    answer:
+      "نگهداری منظم بخش سوالات متداول مزایای زیادی دارد. اولاً پاسخ فوری به پرسش‌های رایج ارائه می‌دهد و تجربه کاربری را بهبود می‌بخشد. ثانیاً تعداد تیکت‌ها و درخواست‌های پشتیبانی را کاهش می‌دهد و زمان تیم پشتیبانی را برای موارد پیچیده‌تر آزاد می‌کند.",
+  },
+  {
+    question: "چطور سوالات متداول را برای بهترین تجربه کاربری سازماندهی کنم؟",
+    answer:
+      "سازماندهی منطقی سوالات متداول برای کاربری آسان حیاتی است. پرسش‌های مشابه را در دسته‌هایی مثل «صورتحساب»، «راه‌اندازی حساب» یا «پشتیبانی فنی» گروه‌بندی کنید تا کاربران سریع بخش مرتبط با نیازشان را پیدا کنند.",
+  },
+  {
+    question: "چند وقت یک‌بار باید سوالات متداول را به‌روز کنم و چرا؟",
+    answer:
+      "به‌روزرسانی منظم سوالات متداول برای حفظ دقت و مرتبط بودن اطلاعات ضروری است. با تغییر محصول یا خدمت شما، نوع پرسش‌های کاربران نیز تغییر می‌کند.",
+  },
+  {
+    question: "آیا می‌توانم بخش سوالات متداول را متناسب با برند خود شخصی‌سازی کنم؟",
+    answer:
+      "بله، بخش سوالات متداول باید با هویت برند شما هماهنگ باشد. این شامل طراحی بصری  فونت، رنگ و چیدمان  هم‌راستا با بقیه سایت یا اپلیکیشن است. می‌توانید با تصاویر، ویدیوها یا لینک به منابع مرتبط نیز آن را غنی‌تر کنید.",
+  },
+  {
+    question: "چطور مطمئن شوم کاربران از بخش سوالات متداول باخبر می‌شوند؟",
+    answer:
+      "معرفی بخش سوالات متداول کلیدی است تا کاربران از آن استفاده کنند. می‌توانید لینک آن را در نوار ناوبری، فوتر یا صفحات راهنمای وب‌سایت قرار دهید.",
+  },
+];
+
+interface Faq4Props {
+  className?: string;
+}
+
+const Faq4 = ({ className }: Faq4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-3xl">
+        <div className="text-center">
+          <Badge className="text-xs font-medium">پرسش‌های متداول</Badge>
+          <h1 className="mt-4 text-xl font-semibold">
+            پاسخ پرسش‌های پرتکرار
+                                </h1>
+          <p className="mt-6 font-medium text-muted-foreground">
+            پاسخ متداول‌ترین پرسش‌های کاربران درباره امکانات، خدمات و نحوه استفاده از پلتفرم را در این بخش مشاهده کنید.
+                                </p>
+        </div>
+        <div className="mt-12">
+          <Accordion type="single" collapsible className="text-start">
+            {faqs.map((faq, index) => (
+              <AccordionItem
+                key={index}
+                value={`item-${index}`}
+                className="border-b-0"
+              >
+                <AccordionTrigger className="hover:text-foreground/60 hover:no-underline">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent>{faq.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+        <Separator className="my-12" />
+        <div className="flex flex-col justify-between gap-12 text-start md:flex-row md:items-end">
+          <div className="lg:col-span-2">
+            <h1 className="mt-4 text-xl font-semibold">پاسخ خود را پیدا نکردید؟</h1>
+            <p className="mt-6 font-medium text-muted-foreground">
+              کارشناسان ما آماده‌اند تا به پرسش‌های شما پاسخ دهند و در انتخاب بهترین راهکار همراهتان باشند.
+                                      </p>
+          </div>
+          <div className="flex md:justify-end">
+            <a href="#" className="flex items-center gap-2 hover:underline">
+              ارتباط با تیم پشتیبانی
+                                        <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq4 };
diff --git a/blocks/faq5.tsx b/blocks/faq5.tsx
new file mode 100644
index 0000000..a6d1489
--- /dev/null
+++ b/blocks/faq5.tsx
@@ -0,0 +1,77 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+export interface Faq5Props {
+  badge?: string;
+  heading?: string;
+  description?: string;
+  faqs?: FaqItem[];
+  className?: string;
+}
+
+const defaultFaqs: FaqItem[] = [
+  {
+    question: "سوالات متداول چیست و چرا اهمیت دارد؟",
+    answer:
+      "سوالات متداول فهرستی است که پاسخ پرسش‌های رایج کاربران درباره یک محصول، خدمت یا موضوع خاص را ارائه می‌دهد.",
+  },
+  {
+    question: "چرا باید در وب‌سایت یا اپلیکیشن خود سوالات متداول داشته باشم؟",
+    answer:
+      "بخش سوالات متداول راهی عملی برای ارائه کمک فوری به کاربران یا مشتریان است. به‌جای انتظار برای پاسخ پشتیبانی، می‌توانند پاسخ پرسش‌های رایج را به‌سرعت بیابند.",
+  },
+  {
+    question: "چطور یک بخش سوالات متداول مؤثر بسازم؟",
+    answer:
+      "ساخت بخش سوالات متداول با جمع‌آوری پرتکرارترین پرسش‌های کاربران یا مشتریان آغاز می‌شود. سپس باید برای هر پرسش پاسخ‌هایی روشن، کامل و مفید بنویسید.",
+  },
+  {
+    question: "مزایای داشتن بخش سوالات متداول منظم چیست؟",
+    answer:
+      "نگهداری منظم بخش سوالات متداول مزایای زیادی دارد. اولاً پاسخ فوری به پرسش‌های رایج ارائه می‌دهد و تجربه کاربری را بهبود می‌بخشد.",
+  },
+];
+
+const Faq5 = ({
+  badge = "پرسش‌های متداول",
+  heading = "پاسخ پرسش‌های پرتکرار",
+  description = "پاسخ متداول‌ترین پرسش‌های کاربران درباره امکانات، خدمات و نحوه استفاده از پلتفرم را در این بخش مشاهده کنید.",
+  faqs = defaultFaqs,
+  className,
+}: Faq5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-3xl">
+        <div className="text-center">
+          <Badge className="text-xs font-medium">{badge}</Badge>
+          <h1 className="mt-4 text-xl font-semibold">{heading}</h1>
+          <p className="mt-6 font-medium text-muted-foreground">
+            {description}
+          </p>
+        </div>
+        <div className="mx-auto mt-14 max-w-xl text-start">
+          {faqs.map((faq, index) => (
+            <div key={index} className="mb-8 flex gap-4">
+              <span className="flex size-6 shrink-0 items-center justify-center rounded-sm bg-secondary font-mono text-xs text-primary">
+                {(index + 1).toLocaleString("fa-IR")}
+              </span>
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <h3 className="font-medium">{faq.question}</h3>
+                </div>
+                <p className="text-sm text-muted-foreground">{faq.answer}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq5 };
diff --git a/blocks/faq6.tsx b/blocks/faq6.tsx
new file mode 100644
index 0000000..d9e9936
--- /dev/null
+++ b/blocks/faq6.tsx
@@ -0,0 +1,74 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const faqs = [
+  {
+    question: "سوالات متداول چیست و چرا اهمیت دارد؟",
+    answer:
+      "سوالات متداول فهرستی است که پاسخ پرسش‌های رایج کاربران درباره یک محصول، خدمت یا موضوع خاص را ارائه می‌دهد.",
+  },
+  {
+    question: "چرا باید در وب‌سایت یا اپلیکیشن خود سوالات متداول داشته باشم؟",
+    answer:
+      "بخش سوالات متداول راهی عملی برای ارائه کمک فوری به کاربران یا مشتریان است. به‌جای انتظار برای پاسخ پشتیبانی، می‌توانند پاسخ پرسش‌های رایج را به‌سرعت بیابند.",
+  },
+  {
+    question: "چطور یک بخش سوالات متداول مؤثر بسازم؟",
+    answer:
+      "ساخت بخش سوالات متداول با جمع‌آوری پرتکرارترین پرسش‌های کاربران یا مشتریان آغاز می‌شود. سپس باید برای هر پرسش پاسخ‌هایی روشن، کامل و مفید بنویسید.",
+  },
+  {
+    question: "مزایای داشتن بخش سوالات متداول منظم چیست؟",
+    answer:
+      "نگهداری منظم بخش سوالات متداول مزایای زیادی دارد. اولاً پاسخ فوری به پرسش‌های رایج ارائه می‌دهد و تجربه کاربری را بهبود می‌بخشد.",
+  },
+  {
+    question: "چطور سوالات متداول را برای بهترین تجربه کاربری سازماندهی کنم؟",
+    answer:
+      "سازماندهی منطقی سوالات متداول برای کاربری آسان حیاتی است. پرسش‌های مشابه را در دسته‌هایی مثل «صورتحساب»، «راه‌اندازی حساب» یا «پشتیبانی فنی» گروه‌بندی کنید تا کاربران سریع بخش مرتبط با نیازشان را پیدا کنند.",
+  },
+  {
+    question: "چند وقت یک‌بار باید سوالات متداول را به‌روز کنم و چرا؟",
+    answer:
+      "به‌روزرسانی منظم سوالات متداول برای حفظ دقت و مرتبط بودن اطلاعات ضروری است. با تغییر محصول یا خدمت شما، نوع پرسش‌های کاربران نیز تغییر می‌کند.",
+  },
+];
+
+interface Faq6Props {
+  className?: string;
+}
+
+const Faq6 = ({ className }: Faq6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-3xl">
+        <div className="text-center">
+          <Badge className="text-xs font-medium">پرسش‌های متداول</Badge>
+          <h1 className="mt-4 text-xl font-semibold">
+            پاسخ پرسش‌های پرتکرار
+                                </h1>
+          <p className="mt-6 font-medium text-muted-foreground">
+            پاسخ متداول‌ترین پرسش‌های کاربران درباره امکانات، خدمات و نحوه استفاده از پلتفرم را در این بخش مشاهده کنید.
+                                </p>
+        </div>
+        <div className="mx-auto mt-14 grid gap-8 text-start md:grid-cols-2 md:gap-12">
+          {faqs.map((faq, index) => (
+            <div key={index} className="flex gap-4">
+              <span className="flex size-6 shrink-0 items-center justify-center rounded-sm bg-secondary font-mono text-xs text-primary">
+                {(index + 1).toLocaleString("fa-IR")}
+              </span>
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <h3 className="font-medium">{faq.question}</h3>
+                </div>
+                <p className="text-sm text-muted-foreground">{faq.answer}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq6 };
diff --git a/blocks/faq7.tsx b/blocks/faq7.tsx
new file mode 100644
index 0000000..40c0f8e
--- /dev/null
+++ b/blocks/faq7.tsx
@@ -0,0 +1,82 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const faqs = [
+  {
+    question: "سوالات متداول چیست و چرا اهمیت دارد؟",
+    answer:
+      "سوالات متداول فهرستی است که پاسخ پرسش‌های رایج کاربران درباره یک محصول، خدمت یا موضوع خاص را ارائه می‌دهد.",
+  },
+  {
+    question: "چرا باید در وب‌سایت یا اپلیکیشن خود سوالات متداول داشته باشم؟",
+    answer:
+      "بخش سوالات متداول راهی عملی برای ارائه کمک فوری به کاربران یا مشتریان است. به‌جای انتظار برای پاسخ پشتیبانی، می‌توانند پاسخ پرسش‌های رایج را به‌سرعت بیابند.",
+  },
+  {
+    question: "چطور یک بخش سوالات متداول مؤثر بسازم؟",
+    answer:
+      "ساخت بخش سوالات متداول با جمع‌آوری پرتکرارترین پرسش‌های کاربران یا مشتریان آغاز می‌شود. سپس باید برای هر پرسش پاسخ‌هایی روشن، کامل و مفید بنویسید.",
+  },
+  {
+    question: "مزایای داشتن بخش سوالات متداول منظم چیست؟",
+    answer:
+      "نگهداری منظم بخش سوالات متداول مزایای زیادی دارد. اولاً پاسخ فوری به پرسش‌های رایج ارائه می‌دهد و تجربه کاربری را بهبود می‌بخشد.",
+  },
+  {
+    question: "چطور یک بخش سوالات متداول مؤثر بسازم؟",
+    answer:
+      "ساخت بخش سوالات متداول با جمع‌آوری پرتکرارترین پرسش‌های کاربران یا مشتریان آغاز می‌شود. سپس باید برای هر پرسش پاسخ‌هایی روشن، کامل و مفید بنویسید.",
+  },
+];
+
+interface Faq7Props {
+  className?: string;
+}
+
+const Faq7 = ({ className }: Faq7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-5xl">
+        <div className="grid gap-10 md:grid-cols-2">
+          <div className="flex flex-col gap-6 text-start">
+            <h2 className="text-xl font-semibold">
+              به راهنمایی بیشتری نیاز دارید؟
+                                        <br />
+              <span className="text-muted-foreground/70">
+                تیم ما آماده پاسخ‌گویی به شماست.
+                                            </span>
+            </h2>
+            <p className="text-lg text-muted-foreground md:text-xl">
+              اگر پاسخ پرسش خود را پیدا نکردید، با
+                                        <a href="#" className="mx-1 whitespace-nowrap underline">
+                تیم پشتیبانی
+              </a>
+              در ارتباط باشید.
+                                      </p>
+            <Button size="lg" variant="outline" className="w-fit">
+              مشاهده همه پرسش‌ها
+                                      </Button>
+          </div>
+          <Accordion type="multiple" className="text-start">
+            {faqs.map((faq, index) => (
+              <AccordionItem key={index} value={`item-${index}`}>
+                <AccordionTrigger className="text-start">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent>{faq.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq7 };
diff --git a/blocks/faq8.tsx b/blocks/faq8.tsx
new file mode 100644
index 0000000..fb0173d
--- /dev/null
+++ b/blocks/faq8.tsx
@@ -0,0 +1,103 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+const faqs = {
+  general: [
+    {
+      question: "این بخش چه کاربردی دارد؟",
+      answer:
+        "در این بخش پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، امکانات و نحوه استفاده از سامانه ارائه شده است.",
+    },
+    {
+      question: "چرا وجود این بخش ضروری است؟",
+      answer:
+        "کاربران بدون نیاز به ثبت تیکت یا تماس با پشتیبانی می‌توانند پاسخ بسیاری از پرسش‌های خود را در همین بخش پیدا کنند.",
+    },
+    {
+      question: "چگونه یک بخش پرسش‌های متداول مؤثر ایجاد کنیم؟",
+      answer:
+        "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و برای هر مورد پاسخی کوتاه، دقیق و کاربردی تهیه کنید.",
+    },
+    {
+      question: "مزیت به‌روزرسانی منظم این بخش چیست؟",
+      answer:
+        "به‌روزرسانی مداوم این بخش باعث افزایش رضایت کاربران، کاهش درخواست‌های پشتیبانی و دسترسی سریع‌تر به اطلاعات می‌شود.",
+    },
+    {
+      question: "چگونه یک بخش پرسش‌های متداول مؤثر ایجاد کنیم؟",
+      answer:
+        "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و برای هر مورد پاسخی کوتاه، دقیق و کاربردی تهیه کنید.",
+    },
+  ],
+  billing: [
+    {
+      question: "چگونه اطلاعات پرداخت یا صورتحساب را ویرایش کنم؟",
+      answer:
+        "از بخش «حساب کاربری» و سپس «پرداخت و صورتحساب» می‌توانید اطلاعات مالی خود را ویرایش کنید.",
+    },
+    {
+      question: "چگونه اشتراک خود را لغو یا تغییر دهم؟",
+      answer:
+        "از طریق تنظیمات اشتراک در حساب کاربری می‌توانید پلن خود را لغو یا تغییر دهید.",
+    },
+    {
+      question: "شرایط بازگشت وجه چگونه است؟",
+      answer:
+        "در صورت واجد شرایط بودن، می‌توانید طبق قوانین بازگشت وجه، درخواست خود را حداکثر تا ۳۰ روز پس از خرید ثبت کنید.",
+    },
+    {
+      question: "چگونه روش پرداخت را تغییر دهم؟",
+      answer:
+        "در بخش پرداخت، امکان افزودن، حذف یا ویرایش روش‌های پرداخت در هر زمان وجود دارد.",
+    },
+  ],
+};
+
+interface Faq8Props {
+  className?: string;
+}
+
+const Faq8 = ({ className }: Faq8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-5xl">
+        <h2 className="mb-8 text-center text-3xl font-semibold md:mb-11 md:text-2xll">
+          پرسش‌های متداول
+                          </h2>
+        <div className="grid gap-4 border-t pt-4 text-start md:grid-cols-3 md:gap-10">
+          <h3 className="text-xl font-medium">عمومی</h3>
+          <Accordion type="multiple" className="md:col-span-2">
+            {faqs.general.map((faq, index) => (
+              <AccordionItem key={index} value={`general-${index}`}>
+                <AccordionTrigger className="text-start">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent>{faq.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+        <div className="mt-10 grid gap-4 border-t pt-4 text-start md:grid-cols-3 md:gap-10">
+          <h3 className="text-xl font-medium">صورتحساب</h3>
+          <Accordion type="multiple" className="md:col-span-2">
+            {faqs.billing.map((faq, index) => (
+              <AccordionItem key={index} value={`billing-${index}`}>
+                <AccordionTrigger className="text-start">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent>{faq.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq8 };
diff --git a/blocks/faq9.tsx b/blocks/faq9.tsx
new file mode 100644
index 0000000..b522cc6
--- /dev/null
+++ b/blocks/faq9.tsx
@@ -0,0 +1,67 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+const faqs = [
+  {
+    question: "این بخش چه کاربردی دارد؟",
+    answer:
+      "در این بخش پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، امکانات و نحوه استفاده از سامانه ارائه شده است.",
+  },
+  {
+    question: "چرا وجود این بخش ضروری است؟",
+    answer:
+      "کاربران بدون نیاز به ثبت تیکت یا تماس با پشتیبانی می‌توانند پاسخ بسیاری از پرسش‌های خود را در همین بخش پیدا کنند.",
+  },
+  {
+    question: "چگونه یک بخش پرسش‌های متداول مؤثر ایجاد کنیم؟",
+    answer:
+      "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و برای هر مورد پاسخی کوتاه، دقیق و کاربردی تهیه کنید.",
+  },
+  {
+    question: "مزیت به‌روزرسانی منظم این بخش چیست؟",
+    answer:
+      "به‌روزرسانی مداوم این بخش باعث افزایش رضایت کاربران، کاهش درخواست‌های پشتیبانی و دسترسی سریع‌تر به اطلاعات می‌شود.",
+  },
+  {
+    question: "چگونه یک بخش پرسش‌های متداول مؤثر ایجاد کنیم؟",
+    answer:
+      "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و برای هر مورد پاسخی کوتاه، دقیق و کاربردی تهیه کنید.",
+  },
+];
+
+interface Faq9Props {
+  className?: string;
+}
+
+const Faq9 = ({ className }: Faq9Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto max-w-3xl">
+        <h2 className="mt-2 mb-12 text-center text-3xl font-bold md:text-2xll">
+          پرسش‌های متداول
+                          </h2>
+        <Accordion type="multiple" className="text-start">
+          {faqs.map((faq, index) => (
+            <AccordionItem
+              key={index}
+              value={`item-${index}`}
+              className="mb-2 rounded-md border-b-0 bg-muted px-5 py-2 md:mb-4"
+            >
+              <AccordionTrigger className="text-start">
+                {faq.question}
+              </AccordionTrigger>
+              <AccordionContent>{faq.answer}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </section>
+  );
+};
+
+export { Faq9 };
diff --git a/blocks/feature1.tsx b/blocks/feature1.tsx
new file mode 100644
index 0000000..da4c417
--- /dev/null
+++ b/blocks/feature1.tsx
@@ -0,0 +1,72 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature1Props {
+  title: string;
+  description?: string;
+  imageSrc: string;
+  imageAlt: string;
+  buttonPrimary: {
+    text: string;
+    href: string;
+  };
+  buttonSecondary: {
+    text: string;
+    href: string;
+  };
+  className?: string;
+}
+
+const Feature1 = ({
+  title = "هر سرنخ را تا قرارداد دنبال کنید",
+  description = "تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.",
+  imageSrc = "/block-media/shadcnblocks/block/placeholder-1.svg",
+  imageAlt = "داشبورد مدیریت ارتباط با مشتری",
+  buttonPrimary = {
+    text: "شروع کنید",
+    href: "https://ShadcnBlocks",
+  },
+  buttonSecondary = {
+    text: "بیشتر بدانید",
+    href: "https://ShadcnBlocks",
+  },
+  className,
+}: Feature1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-8 lg:grid-cols-2">
+          <div className="flex flex-col items-center text-center lg:items-start lg:text-start">
+            <h2 className="my-6 mt-0 text-xl font-semibold text-balance lg:text-2xll">
+              {title}
+            </h2>
+            {description && (
+              <p className="mb-8 max-w-xl text-muted-foreground lg:text-lg">
+                {description}
+              </p>
+            )}
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              <Button asChild>
+                <a href={buttonPrimary.href} target="_blank">
+                  {buttonPrimary.text}
+                </a>
+              </Button>
+              <Button variant="outline" asChild>
+                <a href={buttonSecondary.href} target="_blank">
+                  {buttonSecondary.text}
+                </a>
+              </Button>
+            </div>
+          </div>
+          <img
+            src={imageSrc}
+            alt={imageAlt}
+            className="max-h-96 w-full rounded-md object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature1 };
diff --git a/blocks/feature10.tsx b/blocks/feature10.tsx
new file mode 100644
index 0000000..bda867b
--- /dev/null
+++ b/blocks/feature10.tsx
@@ -0,0 +1,75 @@
+import type { LucideIcon } from "lucide-react";
+import { PersonStanding, Timer, Zap, ZoomIn } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const features: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}[] = [
+  {
+    icon: Timer,
+    title: "پیشنهاد عنوان",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+  },
+  {
+    icon: Zap,
+    title: "تحلیل کلمه کلیدی",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+  },
+  {
+    icon: ZoomIn,
+    title: "ممیزی فنی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+  },
+  {
+    icon: PersonStanding,
+    title: "ردیابی رتبه",
+    description:
+      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+  },
+];
+
+interface Feature10Props {
+  className?: string;
+}
+
+const Feature10 = ({ className }: Feature10Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <p className="mb-4 text-xs text-muted-foreground">ترافیک ارگانیک</p>
+        <h2 className="text-3xl font-medium lg:text-xl">
+          رتبه کلمات کلیدی را پیگیری کنید
+        </h2>
+        <div className="mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4">
+          {features.map(({ icon: Icon, title, description }) => (
+            <div
+              key={title}
+              className="relative flex gap-3 rounded-lg border-dashed md:block md:border-s md:p-5"
+            >
+              <span className="mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12">
+                <Icon className="size-5 md:size-6" />
+              </span>
+              <div>
+                <h3 className="font-medium md:mb-2 md:text-xl">
+                  {title}
+                  <span className="absolute -start-px hidden h-6 w-px bg-primary md:inline-block"></span>
+                </h3>
+                <p className="text-sm text-muted-foreground md:text-base">
+                  {description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature10 };
diff --git a/blocks/feature101.tsx b/blocks/feature101.tsx
new file mode 100644
index 0000000..3a58100
--- /dev/null
+++ b/blocks/feature101.tsx
@@ -0,0 +1,83 @@
+import { Blocks, ChartPie, Filter, UsersRound } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const smallCards = [
+  {
+    title: "تحلیل احساس",
+    description: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    icon: Filter,
+  },
+  {
+    title: "دستیار گفتگو",
+    description: "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    icon: ChartPie,
+  },
+  {
+    title: "خلاصه‌سازی هوشمند",
+    description: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    icon: UsersRound,
+  },
+];
+
+interface Feature101Props {
+  className?: string;
+}
+
+const Feature101 = ({ className }: Feature101Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-xl flex-col justify-center gap-4 text-center">
+          <h1 className="text-xl font-bold md:text-2xll">با هوش مصنوعی سریع‌تر تصمیم بگیرید</h1>
+          <p className="text-xl text-muted-foreground">
+            کارهای تکراری را به AI بسپارید
+          </p>
+        </div>
+        <div className="mx-auto mt-20 grid max-w-6xl gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="flex flex-col justify-between gap-6 rounded-lg bg-muted/70 p-8 md:col-span-2 lg:row-span-2">
+            <div>
+              <Blocks className="mb-6 h-auto w-11" strokeWidth={1.5} />
+              <h2 className="mb-1 text-xl font-medium">پیشنهادهایی که واقعاً مفیدند</h2>
+              <p className="text-muted-foreground">
+                داده را به بینش عملی تبدیل کنید
+              </p>
+            </div>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
+              alt="دستیار هوش مصنوعی"
+              className="ms-auto max-h-80 w-full rounded-lg object-cover transition-transform duration-300 hover:-translate-y-3 sm:w-11/12"
+            />
+          </div>
+          {smallCards.map((card) => (
+            <div
+              key={card.title}
+              className="flex h-80 flex-col justify-between gap-4 rounded-lg bg-muted/70 p-8"
+            >
+              <card.icon className="mb-6 h-auto w-11" strokeWidth={1.5} />
+              <div>
+                <h2 className="mb-1 text-xl font-medium">{card.title}</h2>
+                <p className="text-muted-foreground">{card.description}</p>
+              </div>
+            </div>
+          ))}
+          <div className="flex h-80 flex-col-reverse justify-between gap-4 rounded-lg bg-muted/70 p-8 lg:col-span-2 lg:grid lg:grid-cols-2">
+            <div className="lg:self-end">
+              <h2 className="mb-1 text-xl font-medium">تیم را با دستیار هوشمند تقویت کنید</h2>
+              <p className="text-muted-foreground">
+                فرایندها را با AI بهینه کنید
+              </p>
+            </div>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
+              alt="پیشنهادهای هوشمند"
+              className="h-full min-h-0 rounded-lg object-cover transition-transform duration-300 hover:-translate-y-3"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature101 };
diff --git a/blocks/feature102.tsx b/blocks/feature102.tsx
new file mode 100644
index 0000000..80b7aa9
--- /dev/null
+++ b/blocks/feature102.tsx
@@ -0,0 +1,113 @@
+import { cn } from "@/lib/utils";
+
+const steps = [
+  {
+    title: "نقش و دسترسی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    alt: "تقویم تیم",
+    imageClassName:
+      "z-10 aspect-video w-full rounded-xl border object-cover min-[960px]:max-h-56 min-[960px]:w-auto",
+  },
+  {
+    title: "چک‌لیست تحویل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    alt: "فضای همکاری تیمی",
+    imageClassName:
+      "z-10 max-h-56 w-full rounded-xl border object-cover min-[960px]:aspect-video min-[960px]:w-auto",
+  },
+  {
+    title: "گزارش پیشرفت",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    alt: "برد مدیریت پروژه",
+    imageClassName:
+      "z-10 max-h-56 w-full rounded-xl border object-cover min-[960px]:aspect-video min-[960px]:w-auto",
+  },
+];
+
+function StepConnector({ index }: { index: number }) {
+  if (index === 0) {
+    return (
+      <div className="flex flex-col items-center justify-between gap-1">
+        <span className="h-20 shrink-0" />
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
+          {(index + 1).toLocaleString("fa-IR")}
+        </span>
+        <span className="h-20 w-[3px] shrink-0 bg-linear-to-b from-transparent to-primary opacity-70" />
+      </div>
+    );
+  }
+
+  if (index === steps.length - 1) {
+    return (
+      <div className="flex flex-col items-center justify-between gap-1">
+        <span className="h-20 w-[3px] shrink-0 bg-linear-to-t from-transparent to-primary opacity-70" />
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
+          {(index + 1).toLocaleString("fa-IR")}
+        </span>
+        <span className="h-20 shrink-0" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex flex-col items-center justify-between gap-1">
+      <span className="absolute -top-8 mx-auto h-8 w-[3px] shrink-0 bg-primary opacity-70" />
+      <span className="absolute -bottom-8 mx-auto h-8 w-[3px] shrink-0 bg-primary opacity-70" />
+      <span className="h-20 w-[3px] shrink-0 bg-primary opacity-70" />
+      <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
+        {(index + 1).toLocaleString("fa-IR")}
+      </span>
+      <span className="h-20 w-[3px] shrink-0 bg-primary opacity-70" />
+    </div>
+  );
+}
+
+interface Feature102Props {
+  className?: string;
+}
+
+const Feature102 = ({ className }: Feature102Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col justify-center gap-7 md:text-center">
+          <h2 className="text-xl md:text-xl">همکاری از راه دور را ساده کنید</h2>
+          <p className="text-sm text-muted-foreground md:text-base">
+            هر عضو بداند چه زمانی چه کاری دارد
+          </p>
+        </div>
+        <div className="mx-auto mt-14 flex max-w-5xl flex-col gap-4 lg:px-16">
+          {steps.map((step, index) => (
+            <div
+              key={step.title}
+              className="flex flex-col items-center justify-between min-[960px]:flex-row min-[960px]:gap-10"
+            >
+              <div className="flex gap-4 min-[960px]:max-w-md">
+                <StepConnector index={index} />
+                <div className="flex flex-col justify-center gap-5 px-0 min-[960px]:gap-6 min-[960px]:px-4 min-[960px]:py-4">
+                  <h3 className="text-xl min-[960px]:text-xl">{step.title}</h3>
+                  <p className="text-sm text-muted-foreground min-[960px]:text-base">
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+              <img
+                src={step.image}
+                alt={step.alt}
+                className={step.imageClassName}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature102 };
diff --git a/blocks/feature103.tsx b/blocks/feature103.tsx
new file mode 100644
index 0000000..35f64cb
--- /dev/null
+++ b/blocks/feature103.tsx
@@ -0,0 +1,95 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const topFeatures = [
+  {
+    title: "موجودی انبار",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+  },
+  {
+    title: "بازگشت مشتری",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+  },
+];
+
+const bottomFeatures = [
+  {
+    title: "صفحه فرود",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+  },
+  {
+    title: "گزارش فروش",
+    description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+  },
+  {
+    title: "مدیریت محصول",
+    description: "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+  },
+];
+
+function FeatureLink({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <a
+      href="#"
+      className="flex flex-col gap-4 rounded-xl border p-6 hover:border-primary"
+    >
+      <div className="flex items-center justify-between gap-4">
+        <h3 className="text-lg font-medium">{title}</h3>
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-full border">
+          <ArrowRight className="h-auto w-4 rtl:rotate-180" />
+        </span>
+      </div>
+      <p className="text-muted-foreground">{description}</p>
+    </a>
+  );
+}
+
+interface Feature103Props {
+  className?: string;
+}
+
+const Feature103 = ({ className }: Feature103Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-3">
+          <Badge variant="outline" className="w-fit">
+            فروش آنلاین
+          </Badge>
+          <h2 className="text-xl md:text-xl">فروش آنلاین را مقیاس‌پذیر کنید</h2>
+        </div>
+        <div className="mt-10 grid gap-6 md:grid-cols-2">
+          {topFeatures.map((feature) => (
+            <FeatureLink
+              key={feature.title}
+              title={feature.title}
+              description={feature.description}
+            />
+          ))}
+          <div className="grid gap-6 md:col-span-2 md:grid-cols-3">
+            {bottomFeatures.map((feature) => (
+              <FeatureLink
+                key={feature.title}
+                title={feature.title}
+                description={feature.description}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature103 };
diff --git a/blocks/feature104.tsx b/blocks/feature104.tsx
new file mode 100644
index 0000000..38733f3
--- /dev/null
+++ b/blocks/feature104.tsx
@@ -0,0 +1,124 @@
+import {
+  ChartArea,
+  ChartNoAxesCombined,
+  Layout,
+  Medal,
+  Monitor,
+  Target,
+  TrendingUp,
+  type LucideIcon,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const leftFeatures = [
+  {
+    title: "بهینه‌سازی محتوا",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: Target,
+  },
+  {
+    title: "تحلیل رقیب",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: Layout,
+  },
+  {
+    title: "لینک داخلی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    icon: ChartArea,
+  },
+];
+
+const rightFeatures = [
+  {
+    title: "گزارش Core Web Vitals",
+    description:
+      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+    icon: TrendingUp,
+  },
+  {
+    title: "پیشنهاد عنوان",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: ChartNoAxesCombined,
+  },
+  {
+    title: "تحلیل کلمه کلیدی",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: Monitor,
+  },
+];
+
+function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+}: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="flex flex-col gap-3 rounded-lg border p-6">
+      <div className="flex items-center gap-2.5">
+        <span className="flex size-12 items-center justify-center rounded-md bg-muted">
+          <Icon className="h-auto w-6" />
+        </span>
+        <h3 className="font-medium">{title}</h3>
+      </div>
+      <p className="text-sm text-muted-foreground md:text-base">{description}</p>
+    </div>
+  );
+}
+
+interface Feature104Props {
+  className?: string;
+}
+
+const Feature104 = ({ className }: Feature104Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4">
+          <Badge
+            variant="outline"
+            className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
+          >
+            <Medal className="h-auto w-4" />
+            ترافیک ارگانیک
+          </Badge>
+          <h2 className="text-center text-3xl font-semibold lg:text-xl">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h2>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            با SEO دقیق‌تر رشد کنید
+          </p>
+        </div>
+        <div className="mt-14 grid gap-2.5 lg:grid-cols-3">
+          <div className="flex flex-col gap-2.5">
+            {leftFeatures.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="داشبورد SEO"
+            className="hidden h-full rounded-lg object-cover lg:block"
+          />
+          <div className="flex flex-col gap-2.5">
+            {rightFeatures.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature104 };
diff --git a/blocks/feature105.tsx b/blocks/feature105.tsx
new file mode 100644
index 0000000..7126797
--- /dev/null
+++ b/blocks/feature105.tsx
@@ -0,0 +1,123 @@
+import {
+  FileSpreadsheet,
+  Flag,
+  Layout,
+  type LucideIcon,
+  MessagesSquare,
+  Settings,
+  Target,
+  Timer,
+  Wand,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const TABS = [
+  {
+    label: "یکپارچگی",
+    icon: Target,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    label: "عملیات",
+    icon: Layout,
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    label: "مدیریت سازمان",
+    icon: Wand,
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    label: "ERP",
+    icon: FileSpreadsheet,
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    label: "ERP",
+    icon: Timer,
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    label: "ERP",
+    icon: MessagesSquare,
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    label: "ERP",
+    icon: Settings,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+] satisfies { icon: LucideIcon; label: string; image: string }[];
+
+const DEFAULT_TAB = TABS.findIndex((tab) => tab.label === "ERP").toString();
+
+interface Feature105Props {
+  className?: string;
+}
+
+const Feature105 = ({ className }: Feature105Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4">
+          <Badge
+            variant="outline"
+            className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
+          >
+            <Flag className="h-auto w-4" />
+            ERP
+          </Badge>
+          <h2 className="text-center text-3xl font-semibold tracking-tight text-balance lg:text-xl">
+            عملیات سازمان را یکپارچه کنید
+          </h2>
+          <p className="text-center text-pretty text-muted-foreground lg:text-lg">
+            گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+          </p>
+        </div>
+        <div className="mx-auto mt-14 max-w-7xl">
+          <Tabs defaultValue={DEFAULT_TAB}>
+            <div className="max-w-[100vw-4rem] overflow-x-auto overflow-y-hidden">
+              <TabsList
+                variant="line"
+                className="!h-auto w-full justify-start gap-0 rounded-none border-b border-border bg-transparent p-0"
+              >
+                {TABS.map(({ icon: Icon, label }, index) => (
+                  <TabsTrigger
+                    key={label}
+                    value={index.toString()}
+                    className="group -mb-px flex flex-col items-center justify-start gap-1.5 rounded-none border-0 bg-transparent px-1 pb-3.5 shadow-none ring-0 data-[state=active]:after:opacity-100"
+                  >
+                    <span className="flex size-12 items-center justify-center rounded-md bg-muted transition-colors duration-300 group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground">
+                      <Icon className="size-6" />
+                    </span>
+                    <p className="text-sm text-muted-foreground">{label}</p>
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+            <div className="mt-5">
+              {TABS.map(({ image, label }, index) => (
+                <TabsContent
+                  key={label}
+                  value={index.toString()}
+                  className="aspect-video"
+                >
+                  <img
+                    src={image}
+                    alt={`نمای ${label}`}
+                    className="h-full w-full rounded-xl border object-cover"
+                  />
+                </TabsContent>
+              ))}
+            </div>
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature105 };
diff --git a/blocks/feature106.tsx b/blocks/feature106.tsx
new file mode 100644
index 0000000..f690ee0
--- /dev/null
+++ b/blocks/feature106.tsx
@@ -0,0 +1,187 @@
+import {
+  Blocks,
+  ChartPie,
+  ChevronRight,
+  Layout,
+  Target,
+  type LucideIcon,
+} from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const features: {
+  id: number;
+  header: string;
+  excerpt: string;
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  image: string;
+}[] = [
+  {
+    id: 1,
+    header: "داده سازمانی",
+    excerpt:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    icon: Target,
+    title: "گزارش‌ساز",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: 2,
+    header: "هوش تجاری",
+    excerpt:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    icon: Layout,
+    title: "Pivot تعاملی",
+    description:
+      "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: 3,
+    header: "گزارش‌گیری",
+    excerpt:
+      "تحلیل پیشرفته",
+    icon: Blocks,
+    title: "داشبورد مدیریتی",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    id: 4,
+    header: "داده سازمانی",
+    excerpt:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    icon: ChartPie,
+    title: "اتصال منبع",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+];
+
+interface Feature106Props {
+  className?: string;
+}
+
+const Feature106 = ({ className }: Feature106Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Accordion
+          type="single"
+          collapsible
+          defaultValue="1"
+          dir="rtl"
+          className="overflow-hidden rounded-xl border lg:hidden"
+        >
+          {features.map((feature, index) => (
+            <AccordionItem
+              key={feature.id}
+              value={feature.id.toString()}
+              className={cn(
+                "border-0 bg-muted/50 px-6 py-4 data-[state=open]:bg-background",
+                index !== features.length - 1 && "border-b",
+              )}
+            >
+              <AccordionTrigger className="items-start text-right hover:no-underline">
+                <div className="flex flex-col gap-2 text-right">
+                  <div className="flex items-center gap-1.5">
+                    <feature.icon className="h-auto w-5" />
+                    <span className="text-base font-semibold">
+                      {feature.header}
+                    </span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {feature.excerpt}
+                  </p>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="!h-auto pt-4 [&>div]:!h-auto">
+                <div className="flex flex-col gap-5 rounded-xl border bg-muted/50 p-5 text-right">
+                  <div>
+                    <h2 className="mb-2 font-medium">{feature.title}</h2>
+                    <p className="text-sm text-muted-foreground">
+                      {feature.description}
+                    </p>
+                  </div>
+                  <img
+                    src={feature.image}
+                    alt={`نمای ${feature.header}`}
+                    className="aspect-video max-h-[450px] rounded-xl border object-cover"
+                  />
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+        <Tabs
+          dir="rtl"
+          defaultValue="1"
+          className="hidden grid-cols-3 overflow-hidden rounded-xl border lg:grid"
+        >
+          <TabsList
+            variant="line"
+            className="!h-auto !w-full flex-col !gap-0 !rounded-none !border-e !border-border !bg-muted/50 !p-0"
+          >
+            {features.map((feature, index) => (
+              <TabsTrigger
+                key={feature.id}
+                value={feature.id.toString()}
+                className={cn(
+                  "group relative !h-auto !w-full !flex-col !items-start !justify-start gap-2.5 !rounded-none !border-0 !bg-muted/50 !px-6 !py-6 !whitespace-normal !text-foreground !shadow-none !ring-0 transition-colors duration-300 after:!hidden after:!bg-transparent after:!opacity-0 data-[state=active]:!border-0 data-[state=active]:!bg-background data-[state=active]:!shadow-none data-[state=active]:!ring-0 data-[state=active]:after:!hidden data-[state=active]:after:!bg-transparent data-[state=active]:after:!opacity-0",
+                  index !== features.length - 1 &&
+                    "!border-b-[1px] !border-b-border data-[state=active]:!border-b-[1px] data-[state=active]:!border-b-border",
+                )}
+              >
+                <span className="absolute start-0 top-0 bottom-0 h-full w-[3px] bg-primary transition-opacity duration-300 group-data-[state=inactive]:opacity-0" />
+                <div className="flex w-full items-center justify-between gap-2">
+                  <div className="flex items-center gap-1.5">
+                    <feature.icon className="h-auto w-5" />
+                    <span className="text-base font-semibold">
+                      {feature.header}
+                    </span>
+                  </div>
+                  <ChevronRight className="h-auto w-4 shrink-0 rtl:rotate-180" />
+                </div>
+                <p className="w-full text-right text-sm text-muted-foreground">
+                  {feature.excerpt}
+                </p>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {features.map((feature) => (
+            <TabsContent
+              value={feature.id.toString()}
+              key={feature.id}
+              className="col-span-2 flex flex-col gap-7 bg-background p-10 text-right data-[state=inactive]:hidden"
+            >
+              <div>
+                <h2 className="mb-2 text-xl font-medium">{feature.title}</h2>
+                <p className="text-muted-foreground">{feature.description}</p>
+              </div>
+              <img
+                src={feature.image}
+                alt={`نمای ${feature.header}`}
+                className="aspect-video max-h-[450px] rounded-xl object-cover"
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature106 };
diff --git a/blocks/feature107.tsx b/blocks/feature107.tsx
new file mode 100644
index 0000000..12fa2b5
--- /dev/null
+++ b/blocks/feature107.tsx
@@ -0,0 +1,109 @@
+import { ArrowRight, GitCompare } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    description: "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+  },
+  {
+    title: "اتوماسیون مراحل فروش",
+    description: "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+  },
+  {
+    title: "پیش‌بینی درآمد",
+    description: "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+  },
+  {
+    title: "یادآور پیگیری هوشمند",
+    description: "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
+    image: "/block-media/shadcnblocks/block/block-4.svg",
+  },
+  {
+    title: "تقسیم خودکار سرنخ",
+    description: "سرنخ‌ها را بر اساس منطقه، اندازه یا صنعت به نماینده مناسب اختصاص دهید.",
+    image: "/block-media/shadcnblocks/block/block-5.svg",
+  },
+  {
+    title: "گزارش عملکرد فروش",
+    description: "عملکرد هر نماینده و نرخ تبدیل هر مرحله را در یک داشبورد مقایسه کنید.",
+    image: "/block-media/shadcnblocks/block/block-6.svg",
+  },
+];
+
+function IntegrationCard({
+  title,
+  description,
+  image,
+}: {
+  title: string;
+  description: string;
+  image: string;
+}) {
+  return (
+    <a
+      href="#"
+      className="flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60"
+    >
+      <div className="flex items-center justify-between">
+        <span className="grid size-12 shrink-0 place-content-center rounded-md border">
+          <img
+            src={image}
+            alt={`لوگوی ${title}`}
+            className="h-auto w-7"
+          />
+        </span>
+        <span className="flex items-center gap-1 rounded-full border px-3 py-2.5 text-sm">
+          هر سرنخ را تا قرارداد دنبال کنید
+          <ArrowRight className="h-auto w-4 shrink-0 transition-all rtl:rotate-180" />
+        </span>
+      </div>
+      <div>
+        <h3 className="font-medium md:text-lg">{title}</h3>
+        <p className="text-sm text-muted-foreground md:text-base">
+          {description}
+        </p>
+      </div>
+    </a>
+  );
+}
+
+interface Feature107Props {
+  className?: string;
+}
+
+const Feature107 = ({ className }: Feature107Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <div className="mx-auto flex flex-col gap-4 md:col-span-2">
+            <Badge
+              variant="outline"
+              className="flex w-fit gap-1 px-2.5 py-1.5 text-sm"
+            >
+              <GitCompare className="h-auto w-4" />
+              فروش تیم‌تان را یکجا مدیریت کنید
+            </Badge>
+            <h2 className="text-3xl font-semibold lg:text-xl">
+              روابط مشتری را در یک نگاه ببینید
+            </h2>
+            <p className="text-muted-foreground">
+              پایپ‌لاین فروش را شفاف کنید
+            </p>
+          </div>
+          {integrations.map((integration) => (
+            <IntegrationCard key={integration.title} {...integration} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature107 };
diff --git a/blocks/feature108.tsx b/blocks/feature108.tsx
new file mode 100644
index 0000000..26da2d8
--- /dev/null
+++ b/blocks/feature108.tsx
@@ -0,0 +1,157 @@
+import { Layout, Pointer, Zap, type LucideIcon } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface TabContent {
+  badge: string;
+  title: string;
+  description: string;
+  buttonText: string;
+  imageSrc: string;
+  imageAlt: string;
+}
+
+interface Tab {
+  value: string;
+  icon: LucideIcon;
+  label: string;
+  content: TabContent;
+}
+
+interface Feature108Props {
+  badge?: string;
+  heading?: string;
+  description?: string;
+  tabs?: Tab[];
+  className?: string;
+}
+
+const Feature108 = ({
+  badge = "افزایش فروش",
+  heading = "پیش‌بینی درآمد را دقیق‌تر کنید",
+  description = "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
+  tabs = [
+    {
+      value: "tab-1",
+      icon: Zap,
+      label: "تیم فروش",
+      content: {
+        badge: "بستن معامله",
+        title: "همکاری فروش و بازاریابی",
+        description:
+          "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+        buttonText: "بستن معامله",
+        imageSrc:
+          "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+        imageAlt: "صف اولویت سرنخ‌ها",
+      },
+    },
+    {
+      value: "tab-2",
+      icon: Pointer,
+      label: "رشد درآمد",
+      content: {
+        badge: "افزایش فروش",
+        title: "اولویت‌بندی سرنخ",
+        description:
+          "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+        buttonText: "قالب پیشنهاد فروش",
+        imageSrc:
+          "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+        imageAlt: "داشبورد عملکرد فروش",
+      },
+    },
+    {
+      value: "tab-3",
+      icon: Layout,
+      label: "تیم فروش",
+      content: {
+        badge: "بستن معامله",
+        title: "قالب پیشنهاد فروش",
+        description:
+          "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+        buttonText: "بستن معامله",
+        imageSrc:
+          "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+        imageAlt: "نمودار نرخ تبدیل",
+      },
+    },
+  ],
+  className,
+}: Feature108Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto">
+        <div className="flex flex-col items-center gap-4 text-center">
+          <Badge variant="outline">{badge}</Badge>
+          <h1 className="max-w-2xl text-3xl font-semibold md:text-xl">
+            {heading}
+          </h1>
+          <p className="text-muted-foreground">{description}</p>
+        </div>
+        <Tabs
+          dir="rtl"
+          defaultValue={
+            tabs.find((tab) => tab.label === "رشد درآمد")?.value ??
+            tabs[0].value
+          }
+          className="mt-8"
+        >
+          <div
+            dir="rtl"
+            className="flex justify-center overflow-x-auto overflow-y-hidden"
+          >
+            <TabsList className="container">
+              {tabs.map((tab) => (
+                <TabsTrigger key={tab.value} value={tab.value} className="">
+                  <tab.icon className="h-auto w-4 shrink-0" /> {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </div>
+          <div className="mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16">
+            <div className="relative">
+              {tabs.map((tab) => (
+                <TabsContent
+                  key={tab.value}
+                  value={tab.value}
+                  dir="rtl"
+                  className="grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10"
+                >
+                  <div className="flex flex-col items-start gap-5 text-right">
+                    <Badge variant="outline" className="w-fit bg-background">
+                      {tab.content.badge}
+                    </Badge>
+                    <h3 className="text-3xl font-semibold lg:text-2xll">
+                      {tab.content.title}
+                    </h3>
+                    <p className="text-muted-foreground lg:text-lg">
+                      {tab.content.description}
+                    </p>
+                    <Button className="mt-2.5 w-fit gap-2" size="lg">
+                      {tab.content.buttonText}
+                    </Button>
+                  </div>
+                  <div className="relative h-[300px] w-full lg:h-[400px]">
+                    <img
+                      src={tab.content.imageSrc}
+                      alt={tab.content.imageAlt}
+                      className="h-full w-full rounded-xl object-cover"
+                      width={600}
+                      height={400}
+                    />
+                  </div>
+                </TabsContent>
+              ))}
+            </div>
+          </div>
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature108 };
diff --git a/blocks/feature109.tsx b/blocks/feature109.tsx
new file mode 100644
index 0000000..e6c347a
--- /dev/null
+++ b/blocks/feature109.tsx
@@ -0,0 +1,66 @@
+import { ChevronRight, Menu } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature109Props {
+  className?: string;
+}
+
+const Feature109 = ({ className }: Feature109Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid place-items-center gap-10 lg:grid-cols-2">
+          <div className="flex flex-col gap-5 text-start">
+            <Badge variant="outline" className="w-fit bg-background">
+              کمپین
+            </Badge>
+            <h3 className="text-3xl font-semibold lg:text-2xll">
+              ردیابی UTM
+            </h3>
+            <p className="text-muted-foreground lg:text-lg">
+              گزارش ROI
+            </p>
+            <Button className="mt-2.5 w-fit gap-2" size="lg">
+              با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+              <Menu className="h-auto w-4" />
+            </Button>
+          </div>
+          <div className="relative rounded-xl">
+            <img
+              src="/block-media/external/unsplash/photo-1567320743368-9db24e12ebf0.jpg"
+              alt="تحلیل عملکرد کمپین"
+              className="rounded-xl object-cover md:aspect-video lg:aspect-auto"
+            />
+            <div className="absolute inset-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent" />
+            <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
+              <span className="ms-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm">
+                <Avatar className="size-7 rounded-full">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-1.webp"
+                    alt="نمودار ROI"
+                  />
+                </Avatar>
+                رشد برند
+              </span>
+              <div className="flex flex-col gap-5 text-background">
+                <h4 className="text-lg font-semibold lg:text-3xl">
+                  مدیریت کمپین
+                </h4>
+                <a href="#" className="flex items-center gap-1 font-medium">
+                  سگمنت‌بندی مخاطب
+                  <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature109 };
diff --git a/blocks/feature11.tsx b/blocks/feature11.tsx
new file mode 100644
index 0000000..f6f60ab
--- /dev/null
+++ b/blocks/feature11.tsx
@@ -0,0 +1,48 @@
+import { ChevronRight, CircleCheckBig } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const highlights = ["یکپارچگی", "عملیات", "مدیریت سازمان", "ERP"];
+
+interface Feature11Props {
+  className?: string;
+}
+
+const Feature11 = ({ className }: Feature11Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-6xl">
+        <div className="flex flex-col gap-12 md:flex-row">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="گزارش مالی یکپارچه"
+            className="max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2"
+          />
+          <div className="lg:p-10">
+            <h2 className="text-3xl font-medium text-balance md:text-2xll">
+              عملیات سازمان را یکپارچه کنید
+            </h2>
+            <p className="mt-1 text-muted-foreground md:mt-6">
+              ERP
+            </p>
+            <Button variant="outline" className="mt-6">
+              بیشتر بدانید
+              <ChevronRight className="ms-2 size-4 rtl:rotate-180" />
+            </Button>
+            <ul className="mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0">
+              {highlights.map((item) => (
+                <li key={item} className="flex items-center gap-3">
+                  <CircleCheckBig className="size-4 shrink-0" />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature11 };
diff --git a/blocks/feature110.tsx b/blocks/feature110.tsx
new file mode 100644
index 0000000..6532916
--- /dev/null
+++ b/blocks/feature110.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import { Atom, ChevronRight, ShieldCheck, Star, Zap } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const traitBadges = [
+  { label: "فرایند هوشمند", icon: Zap },
+  { label: "اتوماسیون", icon: ShieldCheck },
+  { label: "گردش‌کار", icon: Atom },
+];
+
+const avatars = Array.from(
+  { length: 7 },
+  (_, index) =>
+    `/block-media/shadcnblocks/block/avatar-${index + 1}.webp`,
+);
+
+interface Feature110Props {
+  className?: string;
+}
+
+const Feature110 = ({ className }: Feature110Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-xl flex-col items-center gap-5 text-center">
+          <Badge variant="outline">صرفه‌جویی زمان</Badge>
+          <h2 className="text-3xl font-semibold md:text-2xll">
+            فرایندها را استاندارد و سریع کنید
+          </h2>
+          <p className="text-muted-foreground md:text-lg">
+            اتوماسیون را در کل سازمان یکپارچه کنید
+          </p>
+        </div>
+        <div className="mx-auto mt-12 grid max-w-5xl gap-7 md:grid-cols-2">
+          <div className="flex flex-col gap-7">
+            <div className="rounded-xl border bg-muted p-8 md:p-10">
+              <div className="mb-7 flex flex-wrap items-center gap-2.5">
+                {traitBadges.map(({ label, icon: Icon }) => (
+                  <Badge
+                    key={label}
+                    variant="outline"
+                    className="flex items-center gap-1 bg-background px-2.5 py-1.5 text-sm font-semibold"
+                  >
+                    <Icon className="h-auto w-4" />
+                    {label}
+                  </Badge>
+                ))}
+              </div>
+              <h3 className="mb-2.5 font-semibold md:text-xl">لاگ اجرا</h3>
+              <p className="text-sm text-muted-foreground md:text-base">
+                قالب آماده
+              </p>
+              <a
+                href="#"
+                className="mt-5 flex items-center gap-1 text-sm font-medium md:text-base"
+              >
+                فرایند هوشمند
+                <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+              </a>
+            </div>
+            <div className="rounded-xl border bg-muted pb-8 md:pb-10">
+              <div className="p-8 md:p-10">
+                <div className="mb-2.5 flex items-center justify-between">
+                  <h3 className="font-semibold md:text-xl">اتصال ابزار</h3>
+                  <Badge variant="outline" className="bg-background">
+                    سازنده گردش‌کار
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground md:text-base">
+                  قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+                </p>
+              </div>
+
+              <Carousel
+                opts={{
+                  loop: true,
+                  direction: "rtl",
+                }}
+                plugins={[
+                  AutoScroll({
+                    speed: 0.8,
+                  }),
+                ]}
+                className="relative max-w-[calc(100vw-64px)] overflow-hidden"
+              >
+                <CarouselContent>
+                  {avatars.map((src, index) => (
+                    <CarouselItem
+                      key={src}
+                      className="w-fit basis-auto sm:basis-1/5"
+                    >
+                      <Avatar className="size-14 rounded-full ring-1 ring-input">
+                        <AvatarImage
+                          src={src}
+                          alt={`تصویر پروفایل ${(index + 1).toLocaleString("fa-IR")}`}
+                        />
+                      </Avatar>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <div className="absolute inset-0 bg-linear-to-l from-muted via-transparent to-muted" />
+              </Carousel>
+            </div>
+          </div>
+          <div className="flex flex-col gap-7">
+            <div className="rounded-xl border bg-muted p-8 md:p-10">
+              <div className="mb-2.5 flex items-center gap-1">
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <Star key={index} className="h-auto w-5 fill-primary" />
+                ))}
+              </div>
+              <p className="mb-7 text-sm text-muted-foreground">
+                از بیش از {(15000).toLocaleString("fa-IR")} کاربر
+              </p>
+              <h3 className="mb-2.5 font-semibold md:text-xl">
+                تریگر رویداد
+              </h3>
+              <p className="text-sm text-muted-foreground md:text-base">
+                شرط هوشمند
+              </p>
+            </div>
+            <div className="rounded-xl border bg-muted p-8 md:p-10">
+              <div className="mb-14 flex justify-start">
+                <Badge variant="outline" className="bg-background">
+                  اتوماسیون
+                </Badge>
+              </div>
+              <h3 className="mb-2.5 font-semibold md:text-xl">اعلان خودکار</h3>
+              <p className="text-sm text-muted-foreground md:text-base">
+                تأیید چندمرحله‌ای
+              </p>
+              <a
+                href="#"
+                className="mt-5 flex items-center gap-1 text-sm font-medium md:text-base"
+              >
+                گردش‌کار
+                <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature110 };
diff --git a/blocks/feature111.tsx b/blocks/feature111.tsx
new file mode 100644
index 0000000..6397f78
--- /dev/null
+++ b/blocks/feature111.tsx
@@ -0,0 +1,86 @@
+import { ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const cards = [
+  {
+    badge: "تحلیل داده",
+    title: "گزارش زمان‌بندی‌شده",
+    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    linkText: "ثبت‌نام",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    badge: "داشبورد",
+    title: "تحلیل کوHORT",
+    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    linkText: "شروع کنید",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+];
+
+interface Feature111Props {
+  className?: string;
+}
+
+const Feature111 = ({ className }: Feature111Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-xl flex-col items-center gap-5 text-center">
+          <Badge variant="outline">شاخص کلیدی</Badge>
+          <h2 className="text-3xl font-semibold md:text-2xll">
+            داده پراکنده را به تصمیم تبدیل کنید
+          </h2>
+          <p className="text-muted-foreground md:text-lg">
+            شاخص‌های کلیدی را یکجا ببینید
+          </p>
+          <a
+            href="#"
+            className="flex items-center gap-1 text-sm font-medium md:text-base"
+          >
+            بینش لحظه‌ای
+            <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+          </a>
+        </div>
+        <div className="mt-20 grid gap-10 md:grid-cols-2">
+          {cards.map((card) => (
+            <div
+              key={card.title}
+              className="-mx-7 rounded-lg bg-muted px-14 pt-7 md:mx-0"
+            >
+              <div className="mx-auto flex flex-col items-center gap-2.5 text-center md:gap-5">
+                <Badge variant="outline" className="bg-background">
+                  {card.badge}
+                </Badge>
+                <h2 className="text-lg font-semibold md:text-3xl">
+                  {card.title}
+                </h2>
+                <p className="text-muted-foreground md:text-lg">
+                  {card.description}
+                </p>
+                <a
+                  href="#"
+                  className="flex items-center gap-1 text-sm font-medium md:text-base"
+                >
+                  {card.linkText}
+                  <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+                </a>
+                <img
+                  src={card.image}
+                  alt={card.imageAlt}
+                  className="mt-5 max-h-[400px] rounded-t-lg"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature111 };
diff --git a/blocks/feature112.tsx b/blocks/feature112.tsx
new file mode 100644
index 0000000..60c907c
--- /dev/null
+++ b/blocks/feature112.tsx
@@ -0,0 +1,71 @@
+import { ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const cards = [
+  {
+    title: "پاسخ آماده",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "مدیریت تیکت",
+  },
+  {
+    title: "SLA هوشمند",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد رضایت",
+  },
+  {
+    title: "نظرسنجی رضایت",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "مرکز پشتیبانی مشتری",
+  },
+];
+
+interface Feature112Props {
+  className?: string;
+}
+
+const Feature112 = ({ className }: Feature112Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-xl flex-col items-center gap-5 text-center">
+          <Badge variant="outline">زمان حل مسئله را کوتاه کنید</Badge>
+          <h2 className="text-3xl font-semibold md:text-2xll">
+            کیفیت پاسخگویی را قابل اندازه‌گیری کنید
+          </h2>
+          <p className="text-muted-foreground md:text-lg">
+            تیم پشتیبانی را هوشمندتر کنید
+          </p>
+          <a
+            href="#"
+            className="flex items-center gap-1 text-sm font-medium md:text-base"
+          >
+            تیکت
+            <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+          </a>
+        </div>
+        <div className="mt-20 grid gap-6 md:grid-cols-3 lg:gap-10">
+          {cards.map((card) => (
+            <div key={card.title} className="flex flex-col rounded-lg border">
+              <img
+                src={card.image}
+                alt={card.imageAlt}
+                className="aspect-video size-full rounded-t-lg object-cover"
+              />
+              <div className="p-6">
+                <h3 className="mb-2.5 font-semibold md:text-xl">{card.title}</h3>
+                <a href="#" className="flex items-center gap-1 text-sm">
+                  بیشتر بدانید
+                  <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature112 };
diff --git a/blocks/feature113.tsx b/blocks/feature113.tsx
new file mode 100644
index 0000000..b214c34
--- /dev/null
+++ b/blocks/feature113.tsx
@@ -0,0 +1,145 @@
+import {
+  CreditCard,
+  Layout,
+  Menu,
+  Pointer,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const tabs: {
+  value: string;
+  label: string;
+  icon: LucideIcon;
+  content: {
+    badge: string;
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonIcon: LucideIcon;
+    image: string;
+    imageAlt: string;
+  };
+}[] = [
+  {
+    value: "tab-1",
+    label: "اتوماسیون AI",
+    icon: Zap,
+    content: {
+      badge: "دستیار کسب‌وکار",
+      title: "طبقه‌بندی خودکار",
+      description:
+        "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+      buttonText: "پیش‌بینی ریزش",
+      buttonIcon: CreditCard,
+      image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+      imageAlt: "دستیار هوش مصنوعی",
+    },
+  },
+  {
+    value: "tab-2",
+    label: "هوش مصنوعی",
+    icon: Pointer,
+    content: {
+      badge: "پیشنهاد هوشمند",
+      title: "پیش‌بینی ریزش",
+      description:
+        "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+      buttonText: "پیشنهاد هوشمند",
+      buttonIcon: Menu,
+      image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+      imageAlt: "پیشنهادهای هوشمند",
+    },
+  },
+  {
+    value: "tab-3",
+    label: "پیشرفته",
+    icon: Layout,
+    content: {
+      badge: "اتوماسیون AI",
+      title: "جستجوی معنایی",
+      description:
+        "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+      buttonText: "اتوماسیون AI",
+      buttonIcon: Zap,
+      image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+      imageAlt: "تحلیل با AI",
+    },
+  },
+];
+
+interface Feature113Props {
+  className?: string;
+}
+
+const Feature113 = ({ className }: Feature113Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div>
+        <div className="container flex flex-col items-center gap-4 text-center">
+          <Badge variant="outline">دستیار کسب‌وکار</Badge>
+          <h2 className="text-3xl font-semibold md:text-xl">با هوش مصنوعی سریع‌تر تصمیم بگیرید</h2>
+          <p className="text-muted-foreground">
+            کارهای تکراری را به AI بسپارید
+          </p>
+        </div>
+        <div>
+          <Tabs dir="rtl" defaultValue="tab-1" className="mt-14">
+            <div dir="rtl" className="container flex justify-center">
+              <TabsList>
+                {tabs.map((tab) => (
+                  <TabsTrigger
+                    key={tab.value}
+                    value={tab.value}
+                    className="flex items-center gap-2"
+                  >
+                    <tab.icon className="hidden h-auto w-4 shrink-0 sm:block" />
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+            <div className="container mt-10 max-w-7xl rounded-2xl bg-muted/70 p-8 md:mt-14 lg:p-16">
+              {tabs.map((tab) => (
+                <TabsContent
+                  key={tab.value}
+                  value={tab.value}
+                  dir="rtl"
+                  className="mt-0 grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10"
+                >
+                  <div className="flex flex-col items-start gap-5 text-right">
+                    <Badge variant="outline" className="w-fit bg-background">
+                      {tab.content.badge}
+                    </Badge>
+                    <h3 className="text-3xl font-semibold lg:text-2xll">
+                      {tab.content.title}
+                    </h3>
+                    <p className="text-muted-foreground lg:text-lg">
+                      {tab.content.description}
+                    </p>
+                    <Button className="mt-2.5 w-fit gap-2" size="lg">
+                      {tab.content.buttonText}
+                      <tab.content.buttonIcon className="h-auto w-4" />
+                    </Button>
+                  </div>
+                  <img
+                    src={tab.content.image}
+                    alt={tab.content.imageAlt}
+                    className="max-h-96 rounded-xl"
+                  />
+                </TabsContent>
+              ))}
+            </div>
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature113 };
diff --git a/blocks/feature114.tsx b/blocks/feature114.tsx
new file mode 100644
index 0000000..d411e42
--- /dev/null
+++ b/blocks/feature114.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import {
+  Globe,
+  MessagesSquare,
+  MoveRight,
+  PanelsTopLeft,
+  PenTool,
+  ScissorsLineDashed,
+  ShieldCheck,
+  Users,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const avatars = [
+  "/block-media/shadcnblocks/block/avatar-1.webp",
+  "/block-media/shadcnblocks/block/avatar-6.webp",
+  "/block-media/shadcnblocks/block/avatar-3.webp",
+];
+
+const features: {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+}[] = [
+  {
+    title: "تقویم تیمی",
+    description: "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    icon: ScissorsLineDashed,
+  },
+  {
+    title: "اشتراک فایل",
+    description: "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    icon: Globe,
+  },
+  {
+    title: "منشن و بحث",
+    description: "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    icon: PanelsTopLeft,
+  },
+  {
+    title: "ردیابی زمان",
+    description: "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+    icon: PenTool,
+  },
+  {
+    title: "نقش و دسترسی",
+    description: "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    icon: Zap,
+  },
+  {
+    title: "چک‌لیست تحویل",
+    description: "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    icon: ShieldCheck,
+  },
+  {
+    title: "گزارش پیشرفت",
+    description: "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    icon: MessagesSquare,
+  },
+  {
+    title: "برد Kanban",
+    description: "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+    icon: Users,
+  },
+];
+
+function FeatureCard({
+  title,
+  description,
+  icon: Icon,
+  className,
+}: (typeof features)[number] & { className?: string }) {
+  return (
+    <div className={cn("flex flex-col rounded-xl border p-5 md:p-7", className)}>
+      <Icon className="h-auto w-8 md:w-12" />
+      <h3 className="mt-5 mb-2.5 font-semibold md:text-xl">{title}</h3>
+      <p className="text-sm text-muted-foreground md:text-base">{description}</p>
+    </div>
+  );
+}
+
+interface Feature114Props {
+  className?: string;
+}
+
+const Feature114 = ({ className }: Feature114Props) => {
+  const firstHalf = features.slice(0, features.length / 2);
+  const secondHalf = features.slice(features.length / 2);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-20 md:grid-cols-2">
+          <div className="flex flex-col items-center gap-5 text-center md:items-start md:text-start">
+            <span className="inline-flex items-center -space-x-4 rtl:space-x-reverse">
+              {avatars.map((src, index) => (
+                <Avatar key={src} className="size-11 border lg:size-16">
+                  <AvatarImage
+                    src={src}
+                    alt={`تصویر پروفایل ${(index + 1).toLocaleString("fa-IR")}`}
+                  />
+                </Avatar>
+              ))}
+            </span>
+            <h1 className="text-3xl font-semibold md:text-2xll">
+              همکاری از راه دور را ساده کنید
+            </h1>
+            <p className="text-muted-foreground md:text-lg">
+              هر عضو بداند چه زمانی چه کاری دارد
+            </p>
+            <Button size="lg" className="w-fit gap-2">
+              اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
+              <MoveRight className="h-auto w-5 rtl:rotate-180" />
+            </Button>
+            <div className="grid grid-cols-2 justify-between gap-4 pt-10 text-start md:gap-20">
+              <div className="flex flex-col gap-1">
+                <h2 className="text-3xl font-semibold md:text-2xll">
+                  {(85).toLocaleString("fa-IR")}٪
+                </h2>
+                <p className="text-muted-foreground md:text-lg">
+                  تصمیم‌ها را سریع‌تر هماهنگ کنید
+                </p>
+              </div>
+              <div className="flex flex-col gap-1">
+                <h2 className="text-3xl font-semibold md:text-2xll">
+                  {(25000).toLocaleString("fa-IR")}+
+                </h2>
+                <p className="text-muted-foreground md:text-lg">تیم‌ها را در یک فضای مشترک هم‌راستا کنید</p>
+              </div>
+            </div>
+          </div>
+          <div className="grid gap-4 md:gap-7 lg:grid-cols-2">
+            <Carousel
+              opts={{
+                loop: true,
+                align: "start",
+              }}
+              plugins={[
+                AutoScroll({
+                  speed: 0.7,
+                }),
+              ]}
+              orientation="vertical"
+              className="pointer-events-none relative lg:hidden"
+            >
+              <CarouselContent className="max-h-[600px]">
+                {features.map((feature) => (
+                  <CarouselItem key={feature.title}>
+                    <FeatureCard {...feature} />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-background" />
+            </Carousel>
+            <Carousel
+              opts={{
+                loop: true,
+                align: "start",
+              }}
+              plugins={[
+                AutoScroll({
+                  speed: 0.7,
+                }),
+              ]}
+              orientation="vertical"
+              className="pointer-events-none relative hidden lg:block"
+            >
+              <CarouselContent className="max-h-[600px]">
+                {firstHalf.map((feature) => (
+                  <CarouselItem key={feature.title}>
+                    <FeatureCard {...feature} className="p-4 md:p-7" />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-background" />
+            </Carousel>
+            <Carousel
+              opts={{
+                loop: true,
+                align: "start",
+              }}
+              plugins={[
+                AutoScroll({
+                  speed: 0.7,
+                }),
+              ]}
+              orientation="vertical"
+              className="pointer-events-none relative hidden lg:block"
+            >
+              <CarouselContent className="max-h-[600px]">
+                {secondHalf.map((feature) => (
+                  <CarouselItem key={feature.title}>
+                    <FeatureCard {...feature} className="p-4 md:p-7" />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-background" />
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature114 };
diff --git a/blocks/feature115.tsx b/blocks/feature115.tsx
new file mode 100644
index 0000000..e1b930f
--- /dev/null
+++ b/blocks/feature115.tsx
@@ -0,0 +1,103 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "مدیریت محصول",
+    category: "فروش آنلاین",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+      alt: "مدیریت سفارش",
+    },
+  },
+  {
+    title: "پرداخت امن",
+    category: "فروشگاه",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+      alt: "داشبورد فروش",
+    },
+  },
+  {
+    title: "ردیابی سفارش",
+    category: "تبدیل خرید",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+      alt: "پنل فروشگاه آنلاین",
+    },
+  },
+  {
+    title: "تخفیف هوشمند",
+    category: "مدیریت سفارش",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+      alt: "مدیریت سفارش",
+    },
+  },
+  {
+    title: "موجودی انبار",
+    category: "فروش آنلاین",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+      alt: "داشبورد فروش",
+    },
+  },
+  {
+    title: "بازگشت مشتری",
+    category: "فروشگاه",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+      alt: "پنل فروشگاه آنلاین",
+    },
+  },
+];
+
+interface Feature115Props {
+  className?: string;
+}
+
+const Feature115 = ({ className }: Feature115Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-4 text-center">
+          <Badge variant="outline">تبدیل خرید</Badge>
+          <h1 className="text-3xl font-semibold md:text-2xll">فروش آنلاین را مقیاس‌پذیر کنید</h1>
+          <p className="max-w-2xl text-muted-foreground md:text-lg">
+            تجربه خرید را روان‌تر بسازید
+          </p>
+        </div>
+        <div className="mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature) => (
+            <Card key={feature.title} className="border-none bg-muted/60">
+              <CardHeader className="text-center">
+                <CardTitle className="text-lg font-semibold md:text-xl">
+                  {feature.title}
+                </CardTitle>
+                <CardDescription className="text-muted-foreground md:text-lg">
+                  {feature.category}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="px-7 pb-7">
+                <img
+                  src={feature.image.src}
+                  alt={feature.image.alt}
+                  className="w-full rounded-xl object-cover"
+                />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature115 };
diff --git a/blocks/feature116.tsx b/blocks/feature116.tsx
new file mode 100644
index 0000000..8ee0a55
--- /dev/null
+++ b/blocks/feature116.tsx
@@ -0,0 +1,103 @@
+import { Atom, ChevronRight, Settings, Zap } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Feature116Props {
+  className?: string;
+}
+
+const Feature116 = ({ className }: Feature116Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="mb-4 text-center text-xl font-semibold">
+          رتبه کلمات کلیدی را پیگیری کنید
+        </h1>
+        <p className="text-center text-muted-foreground">
+          با SEO دقیق‌تر رشد کنید
+        </p>
+        <div className="grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0">
+          <a
+            href="#"
+            className="group relative col-span-2 row-span-3 overflow-hidden rounded-xl"
+          >
+            <img
+              src="/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg"
+              alt="داشبورد SEO"
+              className="h-full max-h-[580px] w-full rounded-xl object-cover object-center"
+            />
+            <div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
+            <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
+              <span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
+                <Atom className="h-auto w-6" />
+                ترافیک ارگانیک
+              </span>
+              <div className="flex flex-col gap-5 text-background">
+                <h4 className="text-xl font-semibold lg:text-3xl">
+                  پیشنهاد عنوان
+                </h4>
+                <p className="flex items-center gap-1 font-medium">
+                  تحلیل کلمه کلیدی
+                  <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+                </p>
+              </div>
+            </div>
+          </a>
+          <div className="grid gap-y-5 xl:row-span-2">
+            <a href="#" className="group relative overflow-hidden rounded-xl">
+              <img
+                src="/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg"
+                alt="تحلیل کلمات کلیدی"
+                className="h-full max-h-44 w-full rounded-xl object-cover object-center"
+              />
+              <div className="absolute inset-0 translate-y-10 rounded-xl bg-linear-to-t from-primary to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" />
+              <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
+                <span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
+                  <Settings className="h-auto w-6" />
+                  رتبه‌بندی
+                </span>
+                <div className="flex flex-col gap-5 text-background">
+                  <h4 className="text-xl font-semibold lg:text-3xl">
+                    ممیزی فنی
+                  </h4>
+                  <p className="flex items-center gap-1 font-medium">
+                    ردیابی رتبه
+                    <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+                  </p>
+                </div>
+              </div>
+            </a>
+            <a
+              href="#"
+              className="group relative row-span-2 overflow-hidden rounded-xl"
+            >
+              <img
+                src="/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg"
+                alt="گزارش رتبه جستجو"
+                className="h-full max-h-96 w-full rounded-xl object-cover object-center"
+              />
+              <div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
+              <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
+                <span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
+                  <Zap className="h-auto w-6 fill-background" />
+                  محتوای SEO
+                </span>
+                <div className="flex flex-col gap-5 text-background">
+                  <h4 className="text-xl font-semibold lg:text-3xl">
+                    بهینه‌سازی محتوا
+                  </h4>
+                  <p className="flex items-center gap-1 font-medium">
+                    تحلیل رقیب
+                    <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+                  </p>
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature116 };
diff --git a/blocks/feature117.tsx b/blocks/feature117.tsx
new file mode 100644
index 0000000..22cce94
--- /dev/null
+++ b/blocks/feature117.tsx
@@ -0,0 +1,121 @@
+import { ChevronRight, Zap } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+const cards = [
+  {
+    image:
+      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
+    imageAlt: "گزارش مالی یکپارچه",
+    badge: "یکپارچگی",
+    badgeVariant: "primary" as const,
+    title: "مدیریت دارایی",
+    linkText: "عملیات",
+  },
+  {
+    image:
+      "/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
+    imageAlt: "داشبورد ERP",
+    badge: "مدیریت سازمان",
+    badgeVariant: "avatar" as const,
+    title: "بودجه‌بندی",
+    linkText: "ERP",
+  },
+  {
+    image:
+      "/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg",
+    imageAlt: "مدیریت عملیات",
+    badge: "ERP",
+    badgeVariant: "default" as const,
+    title: "مدیریت مالی",
+    linkText: "ERP",
+  },
+];
+
+function CardBadge({
+  variant,
+  label,
+}: {
+  variant: (typeof cards)[number]["badgeVariant"];
+  label: string;
+}) {
+  if (variant === "avatar") {
+    return (
+      <span className="ms-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm">
+        <Avatar className="size-7 rounded-full">
+          <AvatarImage
+            src="/block-media/shadcnblocks/block/avatar-1.webp"
+            alt="گزارش مالی یکپارچه"
+          />
+        </Avatar>
+        {label}
+      </span>
+    );
+  }
+
+  if (variant === "primary") {
+    return (
+      <span className="ms-auto flex w-fit items-center gap-1 rounded-full bg-primary px-4 py-2.5 text-sm font-semibold text-background">
+        <Zap className="h-auto w-6 fill-background" />
+        {label}
+      </span>
+    );
+  }
+
+  return (
+    <span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
+      <Zap className="h-auto w-6 fill-background" />
+      {label}
+    </span>
+  );
+}
+
+interface Feature117Props {
+  className?: string;
+}
+
+const Feature117 = ({ className }: Feature117Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="mb-4 text-center text-xl font-semibold">
+          عملیات سازمان را یکپارچه کنید
+        </h1>
+        <p className="text-center text-muted-foreground">
+          از خرید تا فروش در یک سیستم
+        </p>
+        <div className="grid gap-5 pt-14 xl:grid-cols-3">
+          {cards.map((card) => (
+            <a
+              key={card.title}
+              href="#"
+              className="group relative overflow-hidden rounded-xl"
+            >
+              <img
+                src={card.image}
+                alt={card.imageAlt}
+                className="h-full max-h-[450px] w-full rounded-xl object-cover object-center"
+              />
+              <div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
+              <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
+                <CardBadge variant={card.badgeVariant} label={card.badge} />
+                <div className="flex flex-col gap-5 text-background">
+                  <h4 className="text-xl font-semibold lg:text-3xl">
+                    {card.title}
+                  </h4>
+                  <p className="flex items-center gap-1 font-medium">
+                    {card.linkText}
+                    <ChevronRight className="h-auto w-4 rtl:rotate-180" />
+                  </p>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature117 };
diff --git a/blocks/feature118.tsx b/blocks/feature118.tsx
new file mode 100644
index 0000000..62e6c76
--- /dev/null
+++ b/blocks/feature118.tsx
@@ -0,0 +1,122 @@
+import {
+  CheckCircle2,
+  LucideGitGraph,
+  MessageSquare,
+  Star,
+  Zap,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const collaborationItems = [
+  "داده سازمانی",
+  "هوش تجاری",
+  "گزارش‌گیری",
+];
+
+interface Feature118Props {
+  className?: string;
+}
+
+const Feature118 = ({ className }: Feature118Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/60 py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-10">
+          <div className="mx-auto flex max-w-xl flex-col gap-2.5 text-center">
+            <h1 className="text-xl font-semibold md:text-2xll">
+              تصمیم استراتژیک را داده‌محور کنید
+            </h1>
+            <p className="text-muted-foreground">
+              هر تیم داشبورد خودش را داشته باشد
+            </p>
+          </div>
+          <div className="grid grid-cols-1 gap-y-12 lg:grid-cols-3 lg:gap-12">
+            <div className="col-span-2 grid gap-7 rounded-lg bg-background p-7 md:grid-cols-2">
+              <div className="flex h-full flex-col justify-between gap-3 text-start">
+                <div>
+                  <span className="flex size-14 items-center justify-center rounded-full bg-muted">
+                    <LucideGitGraph className="h-auto w-5" />
+                  </span>
+                  <h2 className="mt-5 text-xl font-semibold lg:text-3xl">
+                    روندها را زودتر از رقبا ببینید
+                  </h2>
+                </div>
+                <p className="text-muted-foreground">
+                  داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+                </p>
+              </div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="گزارش‌ساز"
+                className="aspect-video h-full w-full rounded-xl object-cover md:aspect-auto"
+              />
+            </div>
+            <div className="rounded-lg bg-background p-7">
+              <div className="flex h-full flex-col justify-between gap-6 text-start">
+                <div>
+                  <span className="flex size-14 items-center justify-center rounded-full bg-muted">
+                    <Zap className="h-auto w-5" />
+                  </span>
+                  <h2 className="mt-5 text-xl font-semibold lg:text-3xl">
+                    گزارش‌هایی که مدیران واقعاً استفاده می‌کنند
+                  </h2>
+                </div>
+                <ul className="flex flex-col gap-5">
+                  {collaborationItems.map((item) => (
+                    <li key={item} className="flex gap-2">
+                      <CheckCircle2 className="shrink-0" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div className="grid items-center gap-12 rounded-lg bg-background p-7 md:p-10 lg:grid-cols-3">
+            <h2 className="text-start text-xl font-semibold lg:text-3xl">
+              داده سازمان را به بینش تبدیل کنید
+            </h2>
+            <div className="flex items-center gap-5">
+              <span className="text-xl font-semibold md:text-2xll">
+                {(99).toLocaleString("fa-IR")}٪
+              </span>
+              <p className="text-muted-foreground">
+                هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.
+              </p>
+            </div>
+            <div className="flex items-center gap-5">
+              <span className="text-xl font-semibold md:text-2xll">
+                {(5).toLocaleString("fa-IR", {
+                  minimumFractionDigits: 1,
+                  maximumFractionDigits: 1,
+                })}
+              </span>
+              <div className="flex flex-col gap-2 text-start">
+                <div className="flex gap-1">
+                  {Array.from({ length: 5 }).map((_, index) => (
+                    <Star key={index} className="fill-primary" />
+                  ))}
+                </div>
+                <p className="text-muted-foreground">
+                  داده خام از منابع مختلف جمع و مدل‌سازی می‌شود. کاربران غیرفنی هم می‌توانند گزارش بسازند و به پاسخ برسند.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            <MessageSquare className="h-auto w-4" />
+            <p className="text-center">
+              داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+            </p>
+            <a href="#" className="underline">
+              گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature118 };
diff --git a/blocks/feature119.tsx b/blocks/feature119.tsx
new file mode 100644
index 0000000..a3ed9b7
--- /dev/null
+++ b/blocks/feature119.tsx
@@ -0,0 +1,60 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const steps = [
+  {
+    title: "تقسیم خودکار سرنخ",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+  },
+  {
+    title: "گزارش عملکرد فروش",
+    description:
+      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+  },
+  {
+    title: "مدیریت قرارداد",
+    description: "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+  },
+];
+
+interface Feature119Props {
+  className?: string;
+}
+
+const Feature119 = ({ className }: Feature119Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-12">
+          <div className="flex flex-col items-center gap-2.5">
+            <Badge variant="outline">مدیریت فروش</Badge>
+            <h2 className="text-center text-xl md:text-2xll">هر سرنخ را تا قرارداد دنبال کنید</h2>
+          </div>
+          <div className="grid gap-7 md:grid-cols-2 md:gap-12 lg:grid-cols-3">
+            {steps.map((step, index) => (
+              <div key={step.title} className="flex gap-4">
+                <span className="text-md flex size-11 shrink-0 items-center justify-center rounded-full bg-muted font-mono">
+                  {(index + 1).toLocaleString("fa-IR", {
+                    minimumIntegerDigits: 2,
+                  })}
+                </span>
+                <div className="flex flex-col gap-1 text-start">
+                  <h3 className="text-xl font-semibold">{step.title}</h3>
+                  <p className="text-muted-foreground">{step.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
+            alt="داشبورد مدیریت ارتباط با مشتری"
+            className="aspect-video w-full rounded-xl object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature119 };
diff --git a/blocks/feature12.tsx b/blocks/feature12.tsx
new file mode 100644
index 0000000..7669298
--- /dev/null
+++ b/blocks/feature12.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import {
+  ArrowDownToLine,
+  ArrowUpDown,
+  Code,
+  Redo,
+  Repeat,
+  Scaling,
+  Scan,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const slides = [
+  {
+    title: "سطح دسترسی",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    icon: <Code className="size-4" />,
+  },
+  {
+    title: "تحلیل پیش‌بین",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    icon: <ArrowUpDown className="size-4" />,
+  },
+  {
+    title: "اشتراک گزارش",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    icon: <Redo className="size-4" />,
+  },
+  {
+    title: "مدل داده",
+    description:
+      "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+    icon: <ArrowDownToLine className="size-4" />,
+  },
+  {
+    title: "گزارش‌ساز",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    icon: <Repeat className="size-4" />,
+  },
+  {
+    title: "Pivot تعاملی",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    icon: <Scan className="size-4" />,
+  },
+  {
+    title: "داشبورد مدیریتی",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    icon: <Scaling className="size-4" />,
+  },
+];
+
+interface Feature12Props {
+  className?: string;
+}
+
+const Feature12 = ({ className }: Feature12Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [progress, setProgress] = useState(1 / slides.length);
+  const [currentSlide, setCurrentSlide] = useState(1);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    const updateProgress = () => {
+      setProgress(
+        Math.max(1 / slides.length, Math.min(1, api.scrollProgress())),
+      );
+    };
+
+    const updateCurrentSlide = () => {
+      setCurrentSlide(api.selectedScrollSnap() + 1);
+    };
+
+    updateProgress();
+    updateCurrentSlide();
+
+    api.on("scroll", updateProgress);
+    api.on("select", updateCurrentSlide);
+    api.on("reInit", updateCurrentSlide);
+
+    return () => {
+      api.off("scroll", updateProgress);
+      api.off("select", updateCurrentSlide);
+      api.off("reInit", updateCurrentSlide);
+    };
+  }, [api]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-7xl">
+        <div className="mb-10 flex flex-col items-center gap-6 md:mb-20">
+          <Badge variant="outline">داده سازمانی</Badge>
+          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h2>
+        </div>
+        <Carousel
+          className="w-full"
+          setApi={setApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+        >
+          <div className="mb-4 flex justify-between px-1 md:mb-5">
+            <p className="font-medium">داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</p>
+            <div className="flex items-center gap-2">
+              <div className="me-2 hidden items-center gap-3 text-xs text-muted-foreground md:flex">
+                <span>
+                  {currentSlide.toLocaleString("fa-IR").padStart(2, "۰")}
+                </span>
+                <div className="h-[2px] w-52 overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full origin-start bg-primary transition-transform"
+                    style={{ transform: `scaleX(${progress})` }}
+                  />
+                </div>
+                <span>
+                  {slides.length.toLocaleString("fa-IR").padStart(2, "۰")}
+                </span>
+              </div>
+              <CarouselPrevious className="static translate-y-0 rtl:rotate-180" />
+              <CarouselNext className="static translate-y-0 rtl:rotate-180" />
+            </div>
+          </div>
+          <CarouselContent>
+            {slides.map((slide, index) => (
+              <CarouselItem
+                key={index}
+                className="basis-full md:basis-1/2 lg:basis-1/3"
+              >
+                <div className="p-1">
+                  <Card>
+                    <CardContent className="flex flex-col justify-center p-6">
+                      <div>
+                        <span className="mb-5 flex size-8 items-center justify-center rounded-full bg-accent lg:size-10">
+                          {slide.icon}
+                        </span>
+                        <p className="text-xl font-semibold md:text-xl lg:text-xl">
+                          {slide.title}
+                        </p>
+                        <p className="pt-2 text-muted-foreground">
+                          {slide.description}
+                        </p>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Feature12 };
diff --git a/blocks/feature120.tsx b/blocks/feature120.tsx
new file mode 100644
index 0000000..13796a0
--- /dev/null
+++ b/blocks/feature120.tsx
@@ -0,0 +1,93 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const team = [
+  {
+    name: "تیم فروش",
+    role: "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+    avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    alt: "صف اولویت سرنخ‌ها",
+  },
+  {
+    name: "Michael Lee",
+    role: "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+    avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
+    alt: "داشبورد عملکرد فروش",
+  },
+];
+
+const stats = [
+  {
+    value: `${(20).toLocaleString("fa-IR")}+`,
+    description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+  },
+  {
+    value: `${(100).toLocaleString("fa-IR")}+`,
+    description: "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+  },
+  {
+    value: (25).toLocaleString("fa-IR"),
+    description: "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+  },
+  {
+    value: `>${(30000).toLocaleString("fa-IR")}`,
+    description: "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+  },
+];
+
+interface Feature120Props {
+  className?: string;
+}
+
+const Feature120 = ({ className }: Feature120Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-10 md:gap-20 lg:grid-cols-2">
+          <div className="flex flex-col gap-2.5 py-8 text-start">
+            <h1 className="text-xl font-bold lg:text-2xll">
+              پیش‌بینی درآمد را دقیق‌تر کنید
+            </h1>
+            <p className="text-muted-foreground">
+              هر فرصت فروش را از دست ندهید
+            </p>
+            <div className="flex flex-col gap-6 py-10 sm:flex-row sm:gap-16">
+              {team.map((member) => (
+                <div key={member.name} className="flex gap-4 leading-5">
+                  <Avatar className="size-9 rounded-full ring-1 ring-input">
+                    <AvatarImage src={member.avatar} alt={member.alt} />
+                  </Avatar>
+                  <div className="text-sm">
+                    <p className="font-medium">{member.name}</p>
+                    <p className="text-muted-foreground">{member.role}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <Button className="w-fit">با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.</Button>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="نمودار نرخ تبدیل"
+            className="h-full max-h-[420px] w-full rounded-xl object-cover"
+          />
+        </div>
+        <Separator className="my-12" />
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat) => (
+            <div key={stat.description} className="text-start">
+              <h2 className="mb-2 text-xl font-semibold md:text-2xll">
+                {stat.value}
+              </h2>
+              <p className="text-muted-foreground">{stat.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature120 };
diff --git a/blocks/feature121.tsx b/blocks/feature121.tsx
new file mode 100644
index 0000000..ee720b1
--- /dev/null
+++ b/blocks/feature121.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  DollarSign,
+  MessagesSquare,
+  PersonStanding,
+  Timer,
+  Zap,
+  ZoomIn,
+  type LucideIcon,
+} from "lucide-react";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+}
+
+const features: Feature[] = [
+  {
+    title: "تحلیل کانال",
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    icon: Timer,
+  },
+  {
+    title: "اتوماسیون ایمیل",
+    description:
+      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    icon: Zap,
+  },
+  {
+    title: "A/B تست",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    icon: ZoomIn,
+  },
+  {
+    title: "تقویم محتوا",
+    description:
+      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+    icon: PersonStanding,
+  },
+  {
+    title: "ردیابی UTM",
+    description:
+      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    icon: DollarSign,
+  },
+  {
+    title: "گزارش ROI",
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    icon: MessagesSquare,
+  },
+];
+
+interface Feature121Props {
+  className?: string;
+}
+
+const Feature121 = ({ className }: Feature121Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative container py-32", className)}
+    >
+      <div className="m-auto grid w-full gap-px overflow-hidden rounded-md bg-border sm:max-w-[600px] sm:grid-cols-2">
+        {features.map((feature) => (
+          <Block key={feature.title} {...feature} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Feature121 };
+
+function Block({ title, description, icon: Icon }: Feature) {
+  const [isBlockHover, setBlockHover] = useState(false);
+  const [isBlockClick, setBlockClick] = useState(false);
+
+  return (
+    <section
+      className="relative aspect-square h-auto cursor-pointer overflow-hidden bg-accent px-6 py-3.5 text-start transition duration-300 hover:bg-[#e9e9e9] sm:aspect-auto sm:h-[300px]"
+      onMouseOver={() => setBlockHover(true)}
+      onMouseOut={() => setBlockHover(false)}
+      onClick={() => setBlockClick((prev) => !prev)}
+      aria-label={title}
+    >
+      <p className="ms-auto text-lg text-balance">{title}</p>
+
+      <div
+        className={cn(
+          "absolute inset-0 m-auto flex size-36 min-h-36 min-w-36 shrink-0 items-center justify-center rounded-full bg-primary transition duration-300 sm:h-28 sm:min-h-28 sm:w-28 sm:min-w-28 md:size-12",
+          isBlockHover && "scale-110 shadow-xl",
+          isBlockClick && "-translate-y-40 opacity-0",
+        )}
+      >
+        <Icon className="size-8 invert md:size-10" />
+      </div>
+
+      <p
+        className={cn(
+          "absolute inset-0 m-auto h-fit translate-y-40 px-6 py-3.5 opacity-0 transition duration-300",
+          isBlockClick && "translate-y-0! opacity-100!",
+        )}
+      >
+        {description}
+      </p>
+    </section>
+  );
+}
diff --git a/blocks/feature122.tsx b/blocks/feature122.tsx
new file mode 100644
index 0000000..3ee311d
--- /dev/null
+++ b/blocks/feature122.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import {
+  ArrowRight,
+  Blocks,
+  Fingerprint,
+  LayoutPanelTop,
+  MessageCircleMore,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const features: {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+}[] = [
+  {
+    title: "تریگر رویداد",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    icon: MessageCircleMore,
+  },
+  {
+    title: "شرط هوشمند",
+    description: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    icon: Blocks,
+  },
+  {
+    title: "اعلان خودکار",
+    description: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    icon: Users,
+  },
+  {
+    title: "تأیید چندمرحله‌ای",
+    description: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    icon: LayoutPanelTop,
+  },
+  {
+    title: "لاگ اجرا",
+    description: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    icon: Fingerprint,
+  },
+];
+
+interface Feature122Props {
+  className?: string;
+}
+
+const Feature122 = ({ className }: Feature122Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("container py-40", className)}>
+      <div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-3 md:grid-rows-3">
+        {features.map((feature) => (
+          <DataBlock key={feature.title} {...feature} />
+        ))}
+        <div className="flex w-full grow flex-col gap-6 rounded-lg bg-accent/80 p-6 transition-all hover:bg-accent md:col-span-2 md:col-start-2 md:row-span-2 md:row-start-2 lg:p-10">
+          <div className="flex flex-col items-start justify-between gap-5 md:flex-row md:items-center">
+            <h3 className="max-w-[85%] text-start text-xl font-bold tracking-tight md:max-w-[60%] lg:text-3xl">
+              قالب آماده
+            </h3>
+            <Button className="w-full sm:w-auto" size="lg">
+              شروع کنید
+            </Button>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+            alt="سازنده گردش‌کار"
+            className="aspect-square h-full w-full rounded-lg object-cover md:aspect-[3]"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature122 };
+
+function DataBlock({
+  title,
+  description,
+  icon: Icon,
+}: (typeof features)[number]) {
+  const [isBlockHover, setBlockHover] = useState(false);
+
+  return (
+    <a
+      href="#"
+      className="flex w-full cursor-pointer flex-col rounded-lg bg-accent/80 p-6 text-start transition-all hover:bg-accent lg:p-8"
+      onMouseOver={() => setBlockHover(true)}
+      onMouseOut={() => setBlockHover(false)}
+    >
+      <h3
+        className={cn(
+          "mb-3 w-fit border-b border-solid border-transparent text-lg font-bold tracking-tight transition lg:text-xl",
+          isBlockHover && "border-primary/80!",
+        )}
+      >
+        {title}
+      </h3>
+      <p className="mb-5 text-sm text-muted-foreground/90 lg:text-base">
+        {description}
+      </p>
+      <div className="mt-auto flex items-end justify-between">
+        <Icon className="size-10 text-primary/90 md:size-12" strokeWidth={1.5} />
+        <ArrowRight
+          className={cn(
+            "size-5 h-fit text-primary/80 transition-all rtl:rotate-180",
+            isBlockHover && "translate-x-1.5 rtl:-translate-x-1.5",
+          )}
+          strokeWidth={1.5}
+        />
+      </div>
+    </a>
+  );
+}
diff --git a/blocks/feature123.tsx b/blocks/feature123.tsx
new file mode 100644
index 0000000..48aaf1f
--- /dev/null
+++ b/blocks/feature123.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    title: "داشبورد سفارشی",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+  },
+  {
+    title: "فیلتر پیشرفته",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+  },
+  {
+    title: "نمودار روند",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+  },
+  {
+    title: "هشدار آستانه",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+  },
+];
+
+interface Feature123Props {
+  className?: string;
+}
+
+const Feature123 = ({ className }: Feature123Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "container mx-auto flex flex-col gap-20 py-32 lg:flex-row",
+        className,
+      )}
+    >
+      <div className="w-full max-w-[400px] text-start">
+        <span className="text-sm text-muted-foreground">گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.</span>
+        <h2 className="mt-4 mb-8 text-3xl font-extrabold">
+          داده پراکنده را به تصمیم تبدیل کنید
+        </h2>
+        <p className="text-xl text-muted-foreground">
+          شاخص‌های کلیدی را یکجا ببینید
+        </p>
+      </div>
+      <div className="flex flex-col gap-14 lg:gap-20">
+        {items.map((item) => (
+          <div className="relative ps-4 text-start" key={item.title}>
+            <div className="absolute start-0 top-0 h-full w-1 bg-linear-to-b from-blue-500 to-purple-500" />
+            <p className="mb-1 text-xl font-medium">{item.title}</p>
+            <p className="text-base">{item.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Feature123 };
diff --git a/blocks/feature124.tsx b/blocks/feature124.tsx
new file mode 100644
index 0000000..2c49cbf
--- /dev/null
+++ b/blocks/feature124.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Check, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const checkedItems = [
+  "زمان حل مسئله را کوتاه کنید",
+  "تیکت",
+  "رضایت مشتری",
+];
+
+interface Feature124Props {
+  className?: string;
+}
+
+const Feature124 = ({ className }: Feature124Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "container mx-auto flex flex-col items-start gap-20 py-32 md:flex-row md:items-center",
+        className,
+      )}
+    >
+      <div className="w-full text-start lg:w-[40%]">
+        <h2 className="mb-8 text-3xl font-bold">
+          کیفیت پاسخگویی را قابل اندازه‌گیری کنید
+        </h2>
+        <p className="mb-10">
+          تیم پشتیبانی را هوشمندتر کنید
+        </p>
+        <ul className="mb-8 flex flex-col gap-2 text-muted-foreground">
+          {checkedItems.map((item) => (
+            <li className="flex items-center gap-2" key={item}>
+              <Check className="size-5 shrink-0" />
+              {item}
+            </li>
+          ))}
+        </ul>
+        <Button variant="outline">
+          مرکز تماس
+          <ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+        </Button>
+      </div>
+      <div className="relative flex h-[430px] w-full p-4 before:absolute before:inset-0 before:bg-primary/20 before:[mask-image:url(/block-media/shadcnblocks/block/patterns/cross-pattern.svg)] before:[mask-size:32px_32px] before:[mask-repeat:repeat]">
+        <div className="absolute inset-0 z-1 bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-transparent to-background opacity-30" />
+        <div className="relative z-10 m-auto w-[80%]">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="مدیریت تیکت"
+            className="max-h-[350px] w-full rounded-md object-cover"
+          />
+        </div>
+        <div className="absolute inset-0 z-5 bg-linear-to-l from-background/50 via-transparent to-background/50" />
+        <div className="absolute inset-0 z-5 bg-linear-to-t from-background/50 via-transparent to-background/50" />
+      </div>
+    </section>
+  );
+};
+
+export { Feature124 };
diff --git a/blocks/feature125.tsx b/blocks/feature125.tsx
new file mode 100644
index 0000000..30ea29d
--- /dev/null
+++ b/blocks/feature125.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Check, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const checkedItems = [
+  "با هوش مصنوعی سریع‌تر تصمیم بگیرید",
+  "اتوماسیون AI",
+  "دستیار کسب‌وکار",
+];
+
+interface Feature125Props {
+  className?: string;
+}
+
+const Feature125 = ({ className }: Feature125Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "container mx-auto flex flex-col items-start gap-20 py-32 md:flex-row md:items-center",
+        className,
+      )}
+    >
+      <div className="w-full text-start lg:w-[40%]">
+        <h2 className="mb-8 text-3xl font-bold">
+          کارهای تکراری را به AI بسپارید
+        </h2>
+        <p className="mb-10">
+          پیشنهادهایی که واقعاً مفیدند
+        </p>
+        <ul className="mb-8 flex flex-col gap-2 text-muted-foreground">
+          {checkedItems.map((item) => (
+            <li className="flex items-center gap-2" key={item}>
+              <Check className="size-5 shrink-0" />
+              {item}
+            </li>
+          ))}
+        </ul>
+        <Button variant="outline">
+          هوش مصنوعی
+          <ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+        </Button>
+      </div>
+      <div className="relative flex h-[430px] w-full pt-4 pe-4 before:absolute before:inset-0 before:bg-primary/10 before:[mask-image:url('/block-media/shadcnblocks/block/patterns/cross-pattern.svg')] before:[mask-size:32px_32px] before:[mask-repeat:repeat]">
+        <div className="absolute inset-0 z-1 bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-transparent to-background opacity-70" />
+        <div className="relative mt-auto ms-auto w-[80%]">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="دستیار هوش مصنوعی"
+            className="z-40 max-h-[350px] w-full rounded-md object-cover"
+          />
+        </div>
+        <div className="absolute inset-0 z-50 bg-linear-to-l from-background via-transparent via-15%" />
+        <div className="absolute inset-0 z-50 bg-linear-to-t from-background via-transparent via-15%" />
+      </div>
+    </section>
+  );
+};
+
+export { Feature125 };
diff --git a/blocks/feature126.tsx b/blocks/feature126.tsx
new file mode 100644
index 0000000..5063e81
--- /dev/null
+++ b/blocks/feature126.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { MoveRight } from "lucide-react";
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const tabsData = [
+  {
+    id: 1,
+    title: "نقش و دسترسی",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+  },
+  {
+    id: 2,
+    title: "چک‌لیست تحویل",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+  },
+  {
+    id: 3,
+    title: "گزارش پیشرفت",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+  },
+  {
+    id: 4,
+    title: "برد Kanban",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    description:
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+  },
+  {
+    id: 5,
+    title: "تقویم تیمی",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+  },
+  {
+    id: 6,
+    title: "اشتراک فایل",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+  },
+];
+
+interface Feature126Props {
+  className?: string;
+}
+
+const Feature126 = ({ className }: Feature126Props) => {
+  const [activeTabId, setActiveTabId] = useState<number | null>(null);
+  const [activeImage, setActiveImage] = useState<string>(tabsData[0].imageSrc);
+  const activeTab =
+    tabsData.find((tab) => tab.imageSrc === activeImage) ?? tabsData[0];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <span className="text-sm text-muted-foreground">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</span>
+        <h2 className="mt-4 mb-5 text-start text-3xl font-extrabold">
+          همکاری از راه دور را ساده کنید
+        </h2>
+        <div className="mb-20 flex flex-col items-start gap-1 md:flex-row md:items-center md:gap-8">
+          <a
+            href="#"
+            className="group flex items-center gap-2 text-muted-foreground hover:cursor-pointer"
+          >
+            وظایف، فایل‌ها و گفتگوها در یک محیط کاری متمرکز می‌شود. تیم‌ها کمتر در پیگیری وضعیت وقت می‌گذارند و بیشتر روی تحویل تمرکز می‌کنند.
+            <span className="transform transition-transform duration-300 group-hover:translate-x-2 rtl:group-hover:-translate-x-2">
+              <MoveRight className="size-4 rtl:rotate-180" />
+            </span>
+          </a>
+          <a
+            href="#"
+            className="group flex items-center gap-2 text-muted-foreground hover:cursor-pointer"
+          >
+            نمای Kanban و Timeline به مدیران کمک می‌کند ظرفیت تیم را ببینند و اولویت‌ها را به‌موقع تنظیم کنند.
+            <span className="transform transition-transform duration-300 group-hover:translate-x-2 rtl:group-hover:-translate-x-2">
+              <MoveRight className="size-4 rtl:rotate-180" />
+            </span>
+          </a>
+        </div>
+
+        <div className="mb-12 flex w-full items-center justify-between gap-28">
+          <div className="w-full md:max-w-[400px]">
+            <Accordion type="single" className="w-full" defaultValue="item-1">
+              {tabsData.map((tab) => (
+                <AccordionItem
+                  key={tab.id}
+                  value={`item-${tab.id}`}
+                  className={cn(
+                    "border-t-2 border-b-0 px-2 transition hover:bg-accent",
+                    tab.id === activeTabId && "border-foreground",
+                  )}
+                >
+                  <AccordionTrigger
+                    onClick={() => {
+                      setActiveImage(tab.imageSrc);
+                      setActiveTabId(tab.id);
+                    }}
+                    className="cursor-pointer py-5 text-start no-underline! transition"
+                  >
+                    <h6
+                      className={cn(
+                        "text-xl font-semibold",
+                        tab.id === activeTabId
+                          ? "text-foreground"
+                          : "text-muted-foreground",
+                      )}
+                    >
+                      {tab.title}
+                    </h6>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <p className="mt-3 text-start text-muted-foreground">
+                      {tab.description}
+                    </p>
+                    <div className="mt-4 md:hidden">
+                      <img
+                        src={tab.imageSrc}
+                        alt={`نمای ${tab.title}`}
+                        className="h-full max-h-80 w-full rounded-md object-cover"
+                      />
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+          <div className="relative m-auto hidden w-[calc(100%-100px)] max-w-[1266px] overflow-hidden md:block">
+            <div className="absolute inset-x-0 bottom-0 z-2 h-[100px] bg-[linear-gradient(to_top,white_0%,rgba(255,255,255,0)_100%)]" />
+            <img
+              src={activeImage}
+              alt={`نمای ${activeTab.title}`}
+              className="max-h-[490px] w-full rounded-md object-cover transition-opacity duration-300"
+            />
+          </div>
+        </div>
+
+        <Button variant="outline">مشاهده همه</Button>
+      </div>
+    </section>
+  );
+};
+
+export { Feature126 };
diff --git a/blocks/feature127.tsx b/blocks/feature127.tsx
new file mode 100644
index 0000000..51b663d
--- /dev/null
+++ b/blocks/feature127.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import {
+  Blocks,
+  ChevronRight,
+  Infinity as InfinityIcon,
+  Laptop,
+  ListEnd,
+  type LucideIcon,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const itemsData: {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  imageSrc: string;
+}[] = [
+  {
+    title: "موجودی انبار",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    icon: Blocks,
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    title: "بازگشت مشتری",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    icon: Laptop,
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    title: "صفحه فرود",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    icon: ListEnd,
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    title: "گزارش فروش",
+    description:
+      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    icon: InfinityIcon,
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+];
+
+const gridItems = [
+  {
+    id: 1,
+    row: 3,
+    col: 3,
+    imgSrc: "/block-media/shadcnblocks/block/block-1.svg",
+    alt: "مدیریت سفارش",
+  },
+  {
+    id: 2,
+    row: 4,
+    col: 4,
+    imgSrc: "/block-media/shadcnblocks/block/block-2.svg",
+    alt: "داشبورد فروش",
+  },
+  {
+    id: 3,
+    row: 4,
+    col: 7,
+    imgSrc: "/block-media/shadcnblocks/block/block-2.svg",
+    alt: "پنل فروشگاه آنلاین",
+  },
+];
+
+interface Feature127Props {
+  className?: string;
+}
+
+const Feature127 = ({ className }: Feature127Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-[1200px]">
+        <div className="flex gap-6">
+          <div className="w-full text-start">
+            <span className="text-base text-muted-foreground">
+              مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+            </span>
+            <h2 className="my-4 text-3xl font-medium">
+              فروش آنلاین را مقیاس‌پذیر کنید
+            </h2>
+
+            <p className="text-lg text-muted-foreground">
+              تجربه خرید را روان‌تر بسازید
+            </p>
+          </div>
+
+          <div className="relative hidden w-full lg:block">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,var(--tw-gradient-stops))] from-transparent to-background" />
+
+            <div className="grid w-full grid-cols-8 grid-rows-4 gap-2">
+              {Array.from({ length: 32 - gridItems.length }).map((_, index) => (
+                <div
+                  key={index}
+                  className="flex w-full rounded-md bg-muted p-3"
+                />
+              ))}
+              {gridItems.map((item) => (
+                <div
+                  key={item.id}
+                  className={`col-start-${item.col} rounded-md row-start-${item.row} bg-muted p-3`}
+                >
+                  <img
+                    src={item.imgSrc}
+                    alt={item.alt}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-2 grid grid-cols-1 gap-6 md:grid-cols-2">
+          {itemsData.map((item) => (
+            <div key={item.title} className="rounded-lg border p-12 pb-0 text-start">
+              <div className="mb-8 flex items-center justify-between">
+                <div className="flex size-12 items-center justify-center rounded-lg bg-muted">
+                  <item.icon className="size-6" />
+                </div>
+                <Button variant="outline" className="size-10 p-0" aria-label={`بیشتر درباره ${item.title}`}>
+                  <ChevronRight className="size-4 rtl:rotate-180" />
+                </Button>
+              </div>
+
+              <h4 className="mb-4 text-xl font-medium">{item.title}</h4>
+              <p className="mb-8 text-muted-foreground">{item.description}</p>
+              <div className="relative m-auto mt-4 w-full overflow-hidden">
+                <div className="absolute inset-x-0 bottom-0 z-2 h-[100px] bg-[linear-gradient(to_top,white_0%,rgba(255,255,255,0)_100%)]" />
+                <img
+                  src={item.imageSrc}
+                  alt={`نمای ${item.title}`}
+                  className="max-h-[270px] w-full rounded-md object-cover"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature127 };
diff --git a/blocks/feature128.tsx b/blocks/feature128.tsx
new file mode 100644
index 0000000..301b962
--- /dev/null
+++ b/blocks/feature128.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  Blocks,
+  Infinity as InfinityIcon,
+  Laptop,
+  ListEnd,
+  Zap,
+  ZoomIn,
+  type LucideIcon,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const items: { icon: LucideIcon; description: string }[] = [
+  {
+    icon: ZoomIn,
+    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+  },
+  {
+    icon: Blocks,
+    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+  },
+  {
+    icon: Laptop,
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+  },
+  {
+    icon: ListEnd,
+    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+  },
+  {
+    icon: Zap,
+    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+  },
+  {
+    icon: InfinityIcon,
+    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+  },
+];
+
+interface Feature128Props {
+  className?: string;
+}
+
+const Feature128 = ({ className }: Feature128Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("container py-32", className)}>
+      <div className="m-auto rounded-3xl bg-muted px-8 pt-14 pb-8 text-center md:px-16 md:pt-24 md:pb-16">
+        <h2 className="mx-auto mb-4 max-w-96 text-3xl font-normal md:max-w-xl md:text-2xll">
+          ترافیک ارگانیک را با{" "}
+          <span className="italic">تحلیل دقیق کلمات کلیدی</span> پایدار رشد دهید
+        </h2>
+        <p className="mx-auto max-w-xl text-sm font-normal text-muted-foreground">
+          تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+        </p>
+        <div className="mt-16 grid w-full grid-cols-2 gap-px bg-muted-foreground md:grid-cols-3">
+          {items.map((item) => (
+            <div
+              key={item.description}
+              className="flex w-full flex-col items-center justify-center gap-6 bg-muted px-3 py-4 md:gap-8 md:px-6 md:py-8"
+            >
+              <div className="flex size-12 items-center justify-center rounded-xl border border-primary/10 bg-background drop-shadow-lg">
+                <item.icon className="size-6" />
+              </div>
+              <p>{item.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature128 };
diff --git a/blocks/feature129.tsx b/blocks/feature129.tsx
new file mode 100644
index 0000000..18f313d
--- /dev/null
+++ b/blocks/feature129.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const tabs = [
+  {
+    id: 1,
+    tabName: "یکپارچگی",
+    tabDescription:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+  },
+  {
+    id: 2,
+    tabName: "عملیات",
+    tabDescription:
+      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+  },
+  {
+    id: 3,
+    tabName: "مدیریت سازمان",
+    tabDescription:
+      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+  },
+  {
+    id: 4,
+    tabName: "ERP",
+    tabDescription:
+      "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/block-4.svg",
+  },
+];
+
+interface Feature129Props {
+  className?: string;
+}
+
+const Feature129 = ({ className }: Feature129Props) => {
+  const [activeTab, setActiveTab] = useState("4");
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
+          <h2 className="text-center text-xl font-semibold tracking-tight text-balance md:mb-4 md:text-2xll">
+            عملیات سازمان را یکپارچه کنید
+          </h2>
+          <p className="text-center text-lg text-pretty text-muted-foreground md:text-xl">
+            گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+          </p>
+        </div>
+        <div className="mt-12">
+          <Tabs
+            defaultValue="4"
+            className="mx-auto flex w-full flex-col items-center gap-8"
+            value={activeTab}
+            onValueChange={setActiveTab}
+          >
+            <TabsList className="flex !h-auto flex-wrap">
+              {tabs.map((tab) => (
+                <TabsTrigger
+                  key={tab.id}
+                  value={tab.id.toString()}
+                  className={cn(
+                    "border border-solid border-transparent px-4 py-2 text-sm font-semibold transition",
+                    activeTab === tab.id.toString() &&
+                      "border border-solid border-border shadow-sm",
+                  )}
+                >
+                  {tab.tabName}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            {tabs.map((tab) => (
+              <TabsContent
+                value={tab.id.toString()}
+                key={tab.id}
+                className="mt-0 w-full overflow-hidden rounded-2xl bg-accent px-14 pt-6 md:px-20 md:pt-8"
+              >
+                <div className="flex flex-col justify-between">
+                  <div className="mb-8 flex flex-col items-center justify-center gap-2 md:flex-row">
+                    <p className="text-center text-sm md:text-right">
+                      {tab.tabDescription}
+                    </p>
+                    <a
+                      href={tab.link}
+                      className="border-b-2 border-solid border-border text-sm font-semibold whitespace-nowrap"
+                    >
+                      بیشتر بدانید
+                    </a>
+                  </div>
+
+                  <div className="flex w-full items-center justify-center rounded-t-2xl bg-background">
+                    <img
+                      src={tab.image}
+                      alt={`لوگوی ${tab.tabName}`}
+                      className="order-first w-full max-w-52 object-contain px-4 py-8 md:order-last md:max-w-64"
+                    />
+                  </div>
+                </div>
+              </TabsContent>
+            ))}
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature129 };
diff --git a/blocks/feature13.tsx b/blocks/feature13.tsx
new file mode 100644
index 0000000..1eaafc3
--- /dev/null
+++ b/blocks/feature13.tsx
@@ -0,0 +1,112 @@
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  id: string;
+  heading: string;
+  label: string;
+  description: string;
+  image: string;
+  url: string;
+}
+
+interface Feature13Props {
+  title?: string;
+  features?: Feature[];
+  className?: string;
+}
+
+const Feature13 = ({
+  title = "هر سرنخ را تا قرارداد دنبال کنید",
+  features = [
+    {
+      id: "feature-1",
+      heading: "تقسیم خودکار سرنخ",
+      label: "مدیریت فروش",
+      description:
+        "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+      url: "https://ShadcnBlocks",
+    },
+    {
+      id: "feature-2",
+      heading: "گزارش عملکرد فروش",
+      label: "سامانه CRM",
+      description:
+        "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+      url: "https://ShadcnBlocks",
+    },
+    {
+      id: "feature-3",
+      heading: "مدیریت قرارداد",
+      label: "ارتباط با مشتری",
+      description:
+        "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+      url: "https://ShadcnBlocks",
+    },
+    {
+      id: "feature-4",
+      heading: "تاریخچه تعاملات",
+      label: "پایپ‌لاین فروش",
+      description:
+        "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
+      url: "https://ShadcnBlocks",
+    },
+  ],
+  className,
+}: Feature13Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        {title && (
+          <div className="mx-auto mb-16 max-w-3xl text-center">
+            <h2 className="text-xl font-medium text-pretty lg:text-2xll">
+              {title}
+            </h2>
+          </div>
+        )}
+        <div className="grid gap-8 lg:grid-cols-2">
+          {features.map((feature) => (
+            <div
+              key={feature.id}
+              className="flex flex-col justify-between rounded-lg bg-muted"
+            >
+              <div className="flex justify-between gap-10 border-b">
+                <div className="flex flex-col justify-between gap-8 py-6 ps-4 md:gap-14 md:py-10 md:ps-8 lg:justify-normal">
+                  <span className="font-mono text-xs text-muted-foreground">
+                    {feature.label}
+                  </span>
+                  <a href={feature.url}>
+                    <h3 className="text-xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-xl">
+                      {feature.heading}
+                    </h3>
+                  </a>
+                </div>
+                <div className="md:1/3 w-2/5 shrink-0 rounded-s-lg border-s">
+                  <a href={feature.url}>
+                    <img
+                      src={feature.image}
+                      alt={feature.heading}
+                      className="h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80"
+                    />
+                  </a>
+                </div>
+              </div>
+              <p className="p-4 text-muted-foreground md:p-8">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature13 };
diff --git a/blocks/feature130.tsx b/blocks/feature130.tsx
new file mode 100644
index 0000000..5b953ec
--- /dev/null
+++ b/blocks/feature130.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { Code, MessageCircle, Text } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Feature130Props {
+  className?: string;
+}
+
+const Feature130 = ({ className }: Feature130Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("container py-32", className)}>
+      <h2 className="text-start text-xl font-semibold md:text-xl">
+        تصمیم استراتژیک را داده‌محور کنید
+      </h2>
+      <div className="mt-12 mb-6 flex flex-col gap-6 xl:flex-row">
+        <div className="flex w-full flex-col justify-between overflow-hidden rounded-2xl border bg-card px-12 pt-12 text-card-foreground shadow-sm">
+          <div className="mb-12 flex flex-col gap-3 text-start">
+            <Code className="size-6" />
+            <h4 className="text-xl font-semibold">گزارش‌ساز</h4>
+            <p className="text-base font-normal text-muted-foreground">
+              Pivot تعاملی
+            </p>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="گزارش‌ساز"
+            className="max-h-52 w-full rounded-ts-md object-cover shadow-[0_0_10px_rgb(0,0,0,0.2)]"
+          />
+        </div>
+        <div className="w-full overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm">
+          <div className="px-12 xl:ps-0 xl:pe-12">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="تحلیل داده سازمان"
+              className="max-h-48 w-full rounded-be-md object-cover shadow-[0_0_10px_rgb(0,0,0,0.2)]"
+            />
+          </div>
+          <div className="flex flex-col gap-3 p-12 text-start">
+            <Text className="size-6" />
+            <h4 className="text-xl font-semibold">
+              {(100).toLocaleString("fa-IR")}٪ قابل سفارشی‌سازی
+            </h4>
+            <p className="text-base font-normal text-muted-foreground">
+              داشبورد مدیریتی
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="flex w-full flex-col items-center justify-center gap-6 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm md:flex-row">
+        <div className="flex w-full flex-col p-12 text-start md:gap-3">
+          <MessageCircle className="size-6" />
+          <h4 className="text-xl font-semibold">اتصال منبع</h4>
+          <p className="text-base font-normal text-muted-foreground">
+            سطح دسترسی
+          </p>
+        </div>
+        <div className="w-full ps-12 md:pt-12">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-3.svg"
+            alt="داشبورد هوش تجاری"
+            className="max-h-96 w-full rounded-ts-md object-cover shadow-[0_0_10px_rgb(0,0,0,0.2)]"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature130 };
diff --git a/blocks/feature131.tsx b/blocks/feature131.tsx
new file mode 100644
index 0000000..60319a3
--- /dev/null
+++ b/blocks/feature131.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+const tabsData = [
+  {
+    id: 1,
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+  },
+  {
+    id: 2,
+    title: "اتوماسیون مراحل فروش",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    description:
+      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+  },
+  {
+    id: 3,
+    title: "پیش‌بینی درآمد",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    description:
+      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+  },
+];
+
+interface Feature131Props {
+  className?: string;
+}
+
+const Feature131 = ({ className }: Feature131Props) => {
+  const [activeTabId, setActiveTabId] = useState<number>(1);
+  const [activeImage, setActiveImage] = useState<string>(tabsData[0].imageSrc);
+  const activeTab =
+    tabsData.find((tab) => tab.id === activeTabId) ?? tabsData[0];
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24 lg:py-32", className)}
+    >
+      <div className="container">
+        <div className="flex w-full flex-col items-start justify-between gap-8 md:flex-row lg:gap-16">
+          <div className="w-full md:max-w-[400px]">
+            <h2 className="mb-8 text-start text-3xl font-semibold tracking-tight md:mb-12 md:text-xl">
+              هر سرنخ را تا قرارداد دنبال کنید
+            </h2>
+            <Accordion
+              type="single"
+              defaultValue="item-1"
+              className="w-full"
+              onValueChange={(value) => {
+                const id = parseInt(value.split("-")[1]);
+                setActiveTabId(id);
+                setActiveImage(
+                  tabsData.find((tab) => tab.id === id)?.imageSrc ??
+                    tabsData[0].imageSrc,
+                );
+              }}
+            >
+              {tabsData.map((tab) => (
+                <AccordionItem
+                  key={tab.id}
+                  value={`item-${tab.id}`}
+                  className={cn(
+                    "border-t-2 border-b-0 px-2 transition-all duration-300",
+                    tab.id === activeTabId
+                      ? "border-primary bg-accent/40"
+                      : "border-muted hover:bg-accent/20",
+                  )}
+                >
+                  <AccordionTrigger className="cursor-pointer py-5 text-start no-underline! transition-all">
+                    <h6
+                      className={cn(
+                        "text-xl font-semibold transition-colors duration-300",
+                        tab.id === activeTabId
+                          ? "text-primary"
+                          : "text-muted-foreground",
+                      )}
+                    >
+                      {tab.title}
+                    </h6>
+                  </AccordionTrigger>
+                  <AccordionContent className="animate-accordion-down">
+                    <p className="mt-3 text-start leading-relaxed text-muted-foreground">
+                      {tab.description}
+                    </p>
+                    <div className="mt-6 md:hidden">
+                      <img
+                        src={tab.imageSrc}
+                        alt={`نمای ${tab.title}`}
+                        className="h-full max-h-80 w-full rounded-md object-cover transition-transform duration-300"
+                      />
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+          <div className="relative hidden w-full overflow-hidden rounded-md bg-accent/30 md:block">
+            <div className="pointer-events-none absolute inset-0 bg-linear-to-bl from-primary/5 to-transparent" />
+            <div className="pt-12 ps-12">
+              <img
+                src={activeImage}
+                alt={`نمای ${activeTab.title}`}
+                className="max-h-[490px] w-full rounded-ts-md object-cover transition-all duration-500 ease-in-out"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature131 };
diff --git a/blocks/feature132.tsx b/blocks/feature132.tsx
new file mode 100644
index 0000000..9c9d5e5
--- /dev/null
+++ b/blocks/feature132.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+const itemsData = [
+  {
+    id: 1,
+    title: "همکاری فروش و بازاریابی",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    description:
+      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+  },
+  {
+    id: 2,
+    title: "اولویت‌بندی سرنخ",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    description:
+      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+  },
+  {
+    id: 3,
+    title: "قالب پیشنهاد فروش",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    description:
+      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+  },
+  {
+    id: 4,
+    title: "ردیابی کووت",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    description:
+      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+  },
+];
+
+interface Feature132Props {
+  className?: string;
+}
+
+const Feature132 = ({ className }: Feature132Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-6 text-center text-2xll font-semibold">
+          پیش‌بینی درآمد را دقیق‌تر کنید
+        </h2>
+        <p className="m-auto max-w-3xl text-center text-xl text-muted-foreground">
+          هر فرصت فروش را از دست ندهید
+        </p>
+        <a
+          className="mx-auto mt-8 block w-fit rounded-full border-2 border-muted bg-background px-6 py-4 text-sm font-semibold transition hover:border-muted-foreground"
+          href="#"
+        >
+          شروع کنید
+        </a>
+        <div className="mx-auto mt-16 flex flex-col gap-6 md:flex-row">
+          {itemsData.map((item) => (
+            <a className="block text-start" href="#" key={item.title}>
+              <img
+                src={item.imageSrc}
+                alt={`نمای ${item.title}`}
+                className="mb-6 h-full max-h-72 w-full rounded-2xl object-cover transition hover:brightness-90 lg:max-h-96"
+              />
+              <h6 className="mb-3 text-lg font-semibold">{item.title}</h6>
+              <p className="text-sm text-muted-foreground">{item.description}</p>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature132 };
diff --git a/blocks/feature133.tsx b/blocks/feature133.tsx
new file mode 100644
index 0000000..64324e9
--- /dev/null
+++ b/blocks/feature133.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { Code, MessageCircle, Text } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Feature133Props {
+  className?: string;
+}
+
+const Feature133 = ({ className }: Feature133Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("container py-32", className)}>
+      <h2 className="text-start text-xl font-semibold md:text-xl">
+        کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+      </h2>
+
+      <div className="mt-12 flex flex-col gap-6 md:flex-row">
+        <div className="flex w-full flex-col justify-between overflow-hidden rounded-2xl border bg-card px-12 pt-12 text-card-foreground shadow-sm">
+          <div className="mb-12 flex flex-col gap-3 text-start">
+            <Code className="size-6" />
+            <h4 className="text-xl font-semibold">ردیابی UTM</h4>
+            <p className="text-base font-normal text-muted-foreground">
+              گزارش ROI
+            </p>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تحلیل عملکرد کمپین"
+            className="max-h-52 w-full rounded-ts-md object-cover shadow-lg"
+          />
+        </div>
+        <div className="flex w-full flex-col gap-6">
+          <div className="w-full overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm">
+            <div className="flex flex-col gap-3 p-12 text-start">
+              <Text className="size-6" />
+              <h4 className="text-xl font-semibold">
+                {(100).toLocaleString("fa-IR")}٪ قابل سفارشی‌سازی
+              </h4>
+              <p className="text-base font-normal text-muted-foreground">
+                مدیریت کمپین
+              </p>
+            </div>
+          </div>
+
+          <div className="flex w-full flex-col items-center justify-center gap-6 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm md:flex-row">
+            <div className="flex w-full flex-col p-12 text-start md:gap-3">
+              <MessageCircle className="size-6" />
+              <h4 className="text-xl font-semibold">سگمنت‌بندی مخاطب</h4>
+              <p className="text-base font-normal text-muted-foreground">
+                تحلیل کانال
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature133 };
diff --git a/blocks/feature134.tsx b/blocks/feature134.tsx
new file mode 100644
index 0000000..9e26692
--- /dev/null
+++ b/blocks/feature134.tsx
@@ -0,0 +1,113 @@
+import { ArrowRight, Flame } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const cards = [
+  {
+    title: "لاگ اجرا",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    wide: false,
+  },
+  {
+    title: "قالب آماده",
+    description: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    wide: true,
+  },
+  {
+    title: "اتصال ابزار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    wide: false,
+  },
+  {
+    title: "سازنده گردش‌کار",
+    description: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    wide: false,
+  },
+  {
+    title: "تریگر رویداد",
+    description: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    wide: false,
+  },
+];
+
+function FeatureCard({
+  title,
+  description,
+  image,
+  wide,
+}: (typeof cards)[number]) {
+  return (
+    <a
+      href="#"
+      className={cn(
+        "flex flex-col rounded-lg border",
+        wide && "justify-between lg:col-span-2",
+      )}
+    >
+      <div className="flex justify-between p-6">
+        <div className="flex flex-col gap-1 text-start">
+          <h3 className="font-medium md:text-lg">{title}</h3>
+          <p className="text-sm text-muted-foreground md:text-base">
+            {description}
+          </p>
+        </div>
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-full border">
+          <ArrowRight className="h-auto w-4 -rotate-45 rtl:rotate-[135deg]" />
+        </span>
+      </div>
+      <div className="rounded-lg p-1">
+        <img
+          src={image}
+          alt={`نمای ${title}`}
+          className={cn(
+            "max-h-72 rounded-lg border object-cover",
+            wide ? "h-full w-full" : "size-full",
+          )}
+        />
+      </div>
+    </a>
+  );
+}
+
+interface Feature134Props {
+  className?: string;
+}
+
+const Feature134 = ({ className }: Feature134Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4">
+          <Badge
+            variant="outline"
+            className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
+          >
+            <Flame className="h-auto w-4" />
+            فرایند هوشمند
+          </Badge>
+          <h2 className="text-center text-3xl font-semibold lg:text-xl">
+            فرایندها را استاندارد و سریع کنید
+          </h2>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            اتوماسیون را در کل سازمان یکپارچه کنید
+          </p>
+        </div>
+        <div className="mt-14 grid gap-5 lg:grid-cols-3">
+          {cards.map((card) => (
+            <FeatureCard key={card.title} {...card} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature134 };
diff --git a/blocks/feature135.tsx b/blocks/feature135.tsx
new file mode 100644
index 0000000..956b7fa
--- /dev/null
+++ b/blocks/feature135.tsx
@@ -0,0 +1,118 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Calendar,
+  Check,
+  Infinity as InfinityIcon,
+  ListChecks,
+  MessagesSquare,
+  Star,
+  Users,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const highlights = [
+  "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+  "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+  "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+  "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+];
+
+const features: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}[] = [
+  {
+    icon: Calendar,
+    title: "گزارش زمان‌بندی‌شده",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+  },
+  {
+    icon: MessagesSquare,
+    title: "تحلیل کوHORT",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+  },
+  {
+    icon: InfinityIcon,
+    title: "مقایسه دوره‌ای",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+  },
+  {
+    icon: Users,
+    title: "خروجی گزارش",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+  },
+  {
+    icon: ListChecks,
+    title: "داشبورد سفارشی",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+  },
+];
+
+interface Feature135Props {
+  className?: string;
+}
+
+const Feature135 = ({ className }: Feature135Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative grid gap-10 lg:grid-cols-2">
+          <div className="top-10 mx-auto flex h-fit max-w-3xl flex-col items-center gap-4 lg:sticky lg:items-start">
+            <Badge
+              variant="outline"
+              className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
+            >
+              <Star className="h-auto w-4" />
+              تحلیل داده
+            </Badge>
+            <h2 className="text-center text-3xl font-semibold lg:text-start lg:text-xl">
+              داده پراکنده را به تصمیم تبدیل کنید
+            </h2>
+            <p className="text-center text-muted-foreground lg:text-start lg:text-lg">
+              گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+            </p>
+            <div className="mt-6 flex flex-col gap-4">
+              {highlights.map((highlight) => (
+                <div key={highlight} className="flex items-center gap-2">
+                  <Check className="h-auto w-4 shrink-0" />
+                  <span className="text-muted-foreground">{highlight}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flex flex-col gap-4">
+            {features.map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <div
+                  key={feature.title}
+                  className="flex flex-col gap-3 rounded-lg border p-7"
+                >
+                  <div className="flex flex-col items-center gap-2.5 lg:flex-row">
+                    <span className="flex size-12 items-center justify-center rounded-md bg-muted">
+                      <Icon className="h-auto w-6" />
+                    </span>
+                    <h3 className="text-lg font-medium">{feature.title}</h3>
+                  </div>
+                  <p className="text-center text-sm text-muted-foreground md:text-base lg:text-start">
+                    {feature.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature135 };
diff --git a/blocks/feature136.tsx b/blocks/feature136.tsx
new file mode 100644
index 0000000..c42865e
--- /dev/null
+++ b/blocks/feature136.tsx
@@ -0,0 +1,135 @@
+import { Calendar, Target, Trophy, Users, type LucideIcon } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const stats = [
+  {
+    value: `${(4.2).toLocaleString("fa-IR")}M+`,
+    label: "تیکت",
+  },
+  {
+    value: `${(221).toLocaleString("fa-IR")}هزار+`,
+    label: "رضایت مشتری",
+  },
+  {
+    value: (4.9).toLocaleString("fa-IR", {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+    }),
+    label: "مرکز تماس",
+  },
+  {
+    value: `${(40).toLocaleString("fa-IR")}+`,
+    label: "پشتیبانی مشتری",
+  },
+];
+
+const cards: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}[] = [
+  {
+    icon: Calendar,
+    title: "پاسخ آماده",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+  },
+  {
+    icon: Target,
+    title: "SLA هوشمند",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+  },
+  {
+    icon: Users,
+    title: "نظرسنجی رضایت",
+    description: "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+  },
+];
+
+interface Feature136Props {
+  className?: string;
+}
+
+const Feature136 = ({ className }: Feature136Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid place-content-center gap-10 lg:grid-cols-2">
+          <div className="mx-auto flex max-w-3xl flex-col items-center justify-center gap-4 lg:items-start">
+            <Badge
+              variant="outline"
+              className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
+            >
+              <Trophy className="h-auto w-4" />
+              تیکت
+            </Badge>
+            <h2 className="text-center text-3xl font-semibold lg:text-start lg:text-xl">
+              زمان حل مسئله را کوتاه کنید
+            </h2>
+            <p className="text-center text-muted-foreground lg:text-start lg:text-lg">
+              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+            </p>
+
+            <div className="mt-9 flex w-full flex-col justify-center gap-6 md:flex-row lg:justify-start">
+              <div className="flex justify-between gap-6">
+                <div className="mx-auto text-center lg:text-start">
+                  <p className="mb-1.5 text-3xl font-bold">{stats[0].value}</p>
+                  <p className="text-muted-foreground">{stats[0].label}</p>
+                </div>
+                <Separator orientation="vertical" className="h-auto" />
+                <div className="mx-auto text-center lg:text-start">
+                  <p className="mb-1.5 text-3xl font-bold">{stats[1].value}</p>
+                  <p className="text-muted-foreground">{stats[1].label}</p>
+                </div>
+              </div>
+              <Separator
+                orientation="vertical"
+                className="hidden h-auto md:block"
+              />
+              <Separator orientation="horizontal" className="block md:hidden" />
+              <div className="flex justify-between gap-6">
+                <div className="mx-auto text-center lg:text-start">
+                  <p className="mb-1.5 text-3xl font-bold">{stats[2].value}</p>
+                  <p className="text-muted-foreground">{stats[2].label}</p>
+                </div>
+                <Separator orientation="vertical" className="h-auto" />
+                <div className="mx-auto text-center lg:text-start">
+                  <p className="mb-1.5 text-3xl font-bold">{stats[3].value}</p>
+                  <p className="text-muted-foreground">{stats[3].label}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="مدیریت تیکت"
+            className="ms-auto max-h-[450px] w-full rounded-xl object-cover"
+          />
+        </div>
+        <div className="mt-10 grid gap-6 md:grid-cols-3">
+          {cards.map((card) => (
+            <div key={card.title} className="flex flex-col gap-4">
+              <div className="flex flex-col gap-3 rounded-lg border p-6">
+                <div className="flex flex-col items-center gap-2 lg:flex-row">
+                  <card.icon className="h-auto w-6 shrink-0" />
+                  <h3 className="text-center text-lg font-medium lg:text-start">
+                    {card.title}
+                  </h3>
+                </div>
+                <p className="text-center text-sm text-muted-foreground md:text-base lg:text-start">
+                  {card.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature136 };
diff --git a/blocks/feature137.tsx b/blocks/feature137.tsx
new file mode 100644
index 0000000..72afb63
--- /dev/null
+++ b/blocks/feature137.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import {
+  Infinity as InfinityIcon,
+  Laptop,
+  Zap,
+  ZoomIn,
+  type LucideIcon,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const items1 = [
+  {
+    title: "طبقه‌بندی خودکار",
+    description: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    title: "پیش‌بینی ریزش",
+    description: "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+  },
+  {
+    title: "جستجوی معنایی",
+    description: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+  },
+  {
+    title: "تولید محتوا",
+    description: "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+];
+
+const items2: {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+}[] = [
+  {
+    title: "تحلیل احساس",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    icon: InfinityIcon,
+  },
+  {
+    title: "دستیار گفتگو",
+    description:
+      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    icon: Laptop,
+  },
+  {
+    title: "خلاصه‌سازی هوشمند",
+    description: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    icon: Zap,
+  },
+  {
+    title: "پیشنهاد پاسخ",
+    description:
+      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    icon: ZoomIn,
+  },
+];
+
+interface Feature137Props {
+  className?: string;
+}
+
+const Feature137 = ({ className }: Feature137Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="text-start text-xl font-semibold">با هوش مصنوعی سریع‌تر تصمیم بگیرید</h2>
+
+        <div className="mt-12 grid grid-cols-1 gap-10 sm:grid-cols-2">
+          {items1.map((item) => (
+            <div
+              className="overflow-hidden rounded-2xl bg-muted pb-8"
+              key={item.title}
+            >
+              <img
+                src={item.imgSrc}
+                alt={`نمای ${item.title}`}
+                className="h-40 w-full object-cover"
+              />
+              <p className="mt-8 mb-4 px-10 text-start text-xl font-semibold">
+                {item.title}
+              </p>
+              <p className="px-10 text-start text-base text-muted-foreground">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12">
+          {items2.map((item, index) => (
+            <div
+              key={item.title}
+              className={cn(
+                "flex flex-col items-center justify-between gap-4 rounded-2xl p-8 sm:flex-row sm:gap-10",
+                index % 2 !== 0 && "bg-muted",
+              )}
+            >
+              <div className="flex w-full items-center gap-4 text-start">
+                <item.icon className="size-8 shrink-0" />
+                <p className="text-base font-semibold">{item.title}</p>
+              </div>
+              <p className="w-full text-start text-base text-muted-foreground">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature137 };
diff --git a/blocks/feature138.tsx b/blocks/feature138.tsx
new file mode 100644
index 0000000..b4fb39a
--- /dev/null
+++ b/blocks/feature138.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { MoveRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "تقویم تیمی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "تقویم تیم",
+    imageFirst: true,
+  },
+  {
+    title: "اشتراک فایل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    imageAlt: "فضای همکاری تیمی",
+    imageFirst: false,
+  },
+  {
+    title: "منشن و بحث",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    imageAlt: "برد مدیریت پروژه",
+    imageFirst: true,
+  },
+];
+
+function FeatureRow({
+  title,
+  description,
+  image,
+  imageAlt,
+  imageFirst,
+}: (typeof sections)[number]) {
+  const imageBlock = (
+    <div className="flex w-full items-center bg-muted md:w-1/2">
+      <img
+        src={image}
+        alt={imageAlt}
+        className="max-h-64 w-full object-cover"
+      />
+    </div>
+  );
+
+  const textBlock = (
+    <div className="flex w-full flex-col justify-center gap-6 px-8 py-7 text-start md:w-1/2 md:px-12 md:py-10">
+      <h6 className="text-lg font-semibold md:text-xl">{title}</h6>
+      <div className="h-px w-full bg-muted-foreground" />
+      <p className="text-muted-foreground">{description}</p>
+      <a
+        href="#"
+        className="inline-flex items-center font-medium hover:underline"
+      >
+        <span>بیشتر بدانید</span>
+        <MoveRight strokeWidth={2} className="ms-2 size-4 rtl:rotate-180" />
+      </a>
+    </div>
+  );
+
+  return (
+    <div className="mt-16 flex flex-col overflow-hidden rounded-2xl bg-muted md:flex-row">
+      {imageFirst ? (
+        <>
+          {imageBlock}
+          {textBlock}
+        </>
+      ) : (
+        <>
+          {textBlock}
+          {imageBlock}
+        </>
+      )}
+    </div>
+  );
+}
+
+interface Feature138Props {
+  className?: string;
+}
+
+const Feature138 = ({ className }: Feature138Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="text-start text-xl font-semibold">
+          همکاری از راه دور را ساده کنید
+        </h2>
+        <p className="mt-3 text-start text-xl font-medium text-muted-foreground">
+          هر عضو بداند چه زمانی چه کاری دارد
+        </p>
+
+        {sections.map((section) => (
+          <FeatureRow key={section.title} {...section} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Feature138 };
diff --git a/blocks/feature139.tsx b/blocks/feature139.tsx
new file mode 100644
index 0000000..9645f99
--- /dev/null
+++ b/blocks/feature139.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    title: "Slack",
+    description: "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    number: 400,
+  },
+  {
+    title: "مدیریت محصول",
+    description: "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    number: 4000,
+  },
+  {
+    title: "Dropbox",
+    description: "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    number: 7000,
+  },
+  {
+    title: "GitHub",
+    description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    number: 850,
+  },
+];
+
+interface Feature139Props {
+  className?: string;
+}
+
+const Feature139 = ({ className }: Feature139Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="rounded-lg border bg-card p-10 shadow-sm">
+          <div className="flex w-full flex-col items-center justify-between gap-4 md:flex-row">
+            <div className="w-full max-w-md text-start">
+              <Badge
+                variant="outline"
+                className="px-3 py-2 text-muted-foreground"
+              >
+                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+              </Badge>
+              <h2 className="my-5 text-xl font-medium lg:text-xl">
+                فروش آنلاین را مقیاس‌پذیر کنید
+              </h2>
+              <p className="text-sm text-muted-foreground lg:text-base">
+                تجربه خرید را روان‌تر بسازید
+              </p>
+            </div>
+            <div className="w-full max-w-lg">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="مدیریت سفارش"
+                className="max-h-[420px] w-full rounded-lg object-cover"
+              />
+            </div>
+          </div>
+
+          <div className="mt-24 grid grid-cols-1 justify-between gap-12 sm:grid-cols-2 md:grid-cols-4">
+            {items.map((item) => (
+              <div key={item.title} className="text-start">
+                <p className="text-xl text-muted-foreground">
+                  {item.number.toLocaleString("fa-IR")}+
+                </p>
+                <h6 className="mt-5 mb-3 font-semibold">{item.title}</h6>
+                <p className="text-sm text-muted-foreground">
+                  {item.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature139 };
diff --git a/blocks/feature14.tsx b/blocks/feature14.tsx
new file mode 100644
index 0000000..e716733
--- /dev/null
+++ b/blocks/feature14.tsx
@@ -0,0 +1,82 @@
+import { CheckCircle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Feature14Props {
+  className?: string;
+}
+
+const Feature14 = ({ className }: Feature14Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="space-y-10 rounded-lg border py-10 md:px-4">
+          <div className="grid rounded-lg border md:grid-cols-2">
+            <div className="flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20">
+              <h3 className="mb-3 text-xl font-medium sm:mb-5 md:text-3xl lg:text-xl">
+                تحلیل باخت معامله
+              </h3>
+              <div className="mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base">
+                با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+              </div>
+              <ul className="mt-auto space-y-2 sm:space-y-3">
+                <li className="flex gap-x-3">
+                  <CheckCircle className="mt-0.5 size-4 shrink-0 sm:mt-1" />
+                  <p className="text-sm md:text-base">
+                    چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
+                  </p>
+                </li>
+                <li className="flex gap-x-3">
+                  <CheckCircle className="mt-0.5 size-4 shrink-0 sm:mt-1" />
+                  <p className="text-sm md:text-base">
+                    الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.
+                  </p>
+                </li>
+              </ul>
+            </div>
+            <div className="relative order-first max-h-80 md:order-last md:max-h-[500px]">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="صف اولویت سرنخ‌ها"
+                className="h-full w-full object-cover"
+              />
+              <span className="absolute top-5 inset-s-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:inset-s-10">
+                ۱
+              </span>
+            </div>
+          </div>
+          <div className="grid rounded-lg border md:grid-cols-2">
+            <div className="flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20">
+              <h3 className="mb-3 text-xl font-medium sm:mb-5 md:text-3xl lg:text-xl">
+                هدف‌گذاری تیمی
+              </h3>
+              <div className="mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base">
+                با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+              </div>
+              <ul className="mt-auto space-y-2 sm:space-y-3">
+                <li className="flex gap-x-3">
+                  <CheckCircle className="mt-0.5 size-4 shrink-0 sm:mt-1" />
+                  <p className="text-sm md:text-base">
+                    چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
+                  </p>
+                </li>
+              </ul>
+            </div>
+            <div className="relative order-first max-h-80 md:order-last md:max-h-[500px]">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="داشبورد عملکرد فروش"
+                className="h-full w-full object-cover"
+              />
+              <span className="absolute top-5 inset-s-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:inset-s-10">
+                ۲
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature14 };
diff --git a/blocks/feature140.tsx b/blocks/feature140.tsx
new file mode 100644
index 0000000..6a43f0e
--- /dev/null
+++ b/blocks/feature140.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    title: "پیشنهاد عنوان",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    title: "تحلیل کلمه کلیدی",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+  },
+  {
+    title: "ممیزی فنی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+  },
+];
+
+interface Feature140Props {
+  className?: string;
+}
+
+const Feature140 = ({ className }: Feature140Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Carousel
+          className="relative w-full"
+          opts={{
+            direction: "rtl",
+          }}
+        >
+          <CarouselContent className="ease-in">
+            {items.map((item) => (
+              <CarouselItem key={item.title}>
+                <div className="flex flex-col items-center justify-between gap-4 rounded-2xl bg-muted py-20 ps-8 md:flex-row md:ps-16">
+                  <div className="w-full pe-2 text-start md:max-w-xs md:pe-0">
+                    <h2 className="mb-6 text-xl font-medium sm:text-xl md:text-2xll">
+                      {item.title}
+                    </h2>
+                    <p className="text-sm text-muted-foreground md:text-base">
+                      {item.description}
+                    </p>
+                  </div>
+                  <div className="w-full max-w-2xl">
+                    <img
+                      src={item.imgSrc}
+                      alt={`نمای ${item.title}`}
+                      className="h-80 max-h-[560px] w-full rounded-s-2xl object-cover md:h-full"
+                    />
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="absolute bottom-16 start-16 md:bottom-11">
+            <CarouselPrevious className="size-14" />
+          </div>
+          <div className="absolute end-16 bottom-16 md:bottom-11">
+            <CarouselNext className="size-14" />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Feature140 };
diff --git a/blocks/feature141.tsx b/blocks/feature141.tsx
new file mode 100644
index 0000000..3ad18e7
--- /dev/null
+++ b/blocks/feature141.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Feature141Props {
+  className?: string;
+}
+
+const Feature141 = ({ className }: Feature141Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="text-center text-2xll">عملیات سازمان را یکپارچه کنید</h2>
+        <p className="mt-3 text-center text-xl text-muted-foreground">
+          از خرید تا فروش در یک سیستم
+        </p>
+
+        <div className="mt-20 flex flex-col items-center justify-center gap-16 md:flex-row">
+          <div className="grid w-full max-w-md grid-cols-[1fr_2fr_1fr] grid-rows-[1fr_2fr_1fr] rounded-lg bg-linear-to-br from-red-100 to-blue-100 md:max-w-xl">
+            <div className="border-e-2 border-b-2 border-muted-foreground/30 p-4" />
+            <div className="border-b-2 border-muted-foreground/30 p-4" />
+            <div className="border-b-2 border-s-2 border-muted-foreground/30 p-4" />
+            <div className="border-e-2 border-muted-foreground/30 p-4" />
+            <div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="گزارش مالی یکپارچه"
+                className="max-h-[740px] w-full rounded-xl object-cover"
+              />
+            </div>
+            <div className="border-s-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-e-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-s-2 border-muted-foreground/30 p-4" />
+          </div>
+
+          <div className="w-full max-w-sm text-start">
+            <h6 className="text-3xl">
+              درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.
+            </h6>
+            <Badge variant="outline" className="mt-8 bg-muted px-3 py-2">
+              یکپارچگی
+            </Badge>
+
+            <div className="mt-16 mb-4 h-px w-full bg-muted-foreground" />
+
+            <p className="mb-10 text-lg text-muted-foreground">
+              گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+            </p>
+
+            <p className="text-lg">مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.</p>
+            <p className="text-lg text-muted-foreground">
+              ERP
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature141 };
diff --git a/blocks/feature142.tsx b/blocks/feature142.tsx
new file mode 100644
index 0000000..b7332ea
--- /dev/null
+++ b/blocks/feature142.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const items = [
+  "تصمیم استراتژیک را داده‌محور کنید",
+  "داده سازمانی",
+  "هوش تجاری",
+  "هر تیم داشبورد خودش را داشته باشد",
+];
+
+interface Feature142Props {
+  className?: string;
+}
+
+const Feature142 = ({ className }: Feature142Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mt-20 flex flex-col items-center justify-center gap-16 md:flex-row">
+          <div className="relative grid w-full max-w-md grid-cols-[1fr_6fr_1fr] grid-rows-[1fr_2fr_1fr_7fr] rounded-lg bg-linear-to-br from-red-100 to-blue-100 sm:max-h-[700px] md:max-w-xl">
+            <div className="border-e-2 border-b-2 border-muted-foreground/30 p-4" />
+            <div className="border-b-2 border-muted-foreground/30 p-4" />
+            <div className="border-b-2 border-s-2 border-muted-foreground/30 p-4" />
+            <div className="border-e-2 border-muted-foreground/30 p-4" />
+            <div className="flex items-center justify-center rounded-xl bg-background p-2 md:p-3">
+              <p className="text-center text-xs text-muted-foreground sm:text-sm md:text-base">
+                گزارش‌گیری
+              </p>
+            </div>
+            <div className="border-s-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-e-2 border-b-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-b-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-b-2 border-s-2 border-muted-foreground/30 p-4" />
+            <div className="border-e-2 border-muted-foreground/30 p-4" />
+            <div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="گزارش‌ساز"
+                className="h-full w-full rounded-ts-xl object-cover"
+              />
+            </div>
+            <div className="border-s-2 border-muted-foreground/30 p-4" />
+          </div>
+
+          <div className="w-full max-w-sm text-start">
+            <h6 className="text-3xl">
+              گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
+            </h6>
+            <Badge variant="outline" className="mt-8 bg-muted px-3 py-2">
+              تحلیل پیشرفته
+            </Badge>
+
+            <div className="mt-16 mb-4 h-px w-full bg-muted-foreground" />
+
+            <ul className="flex flex-col gap-2">
+              {items.map((item) => (
+                <li className="flex items-center gap-2 text-lg" key={item}>
+                  <ArrowRight className="size-5 shrink-0 rtl:rotate-180" />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature142 };
diff --git a/blocks/feature143.tsx b/blocks/feature143.tsx
new file mode 100644
index 0000000..604fbb4
--- /dev/null
+++ b/blocks/feature143.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const items = [
+  "هر سرنخ را تا قرارداد دنبال کنید",
+  "مدیریت فروش",
+  "سامانه CRM",
+  "فروش تیم‌تان را یکجا مدیریت کنید",
+];
+
+interface Feature143Props {
+  className?: string;
+}
+
+const Feature143 = ({ className }: Feature143Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mt-20 flex flex-col items-center justify-center gap-16 md:flex-row">
+          <div className="w-full max-w-sm text-start">
+            <h6 className="text-3xl">
+              تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.
+            </h6>
+            <Badge variant="outline" className="mt-8 bg-muted px-3 py-2">
+              ارتباط با مشتری
+            </Badge>
+
+            <div className="mt-16 mb-4 h-px w-full bg-muted-foreground" />
+
+            <ul className="flex flex-col gap-2">
+              {items.map((item) => (
+                <li className="flex items-center gap-2 text-lg" key={item}>
+                  <ArrowRight className="size-5 shrink-0 rtl:rotate-180" />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="grid w-full max-w-md grid-cols-[1fr_4fr_1fr] grid-rows-[1fr_4fr_1fr] rounded-lg bg-linear-to-br from-red-100 to-blue-100 md:max-w-xl">
+            <div className="border-e-2 border-b-2 border-muted-foreground/30 p-4" />
+            <div className="border-b-2 border-muted-foreground/30 p-4" />
+            <div className="border-b-2 border-s-2 border-muted-foreground/30 p-4" />
+            <div className="border-e-2 border-muted-foreground/30 p-4" />
+            <div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="داشبورد مدیریت ارتباط با مشتری"
+                className="max-h-[740px] w-full rounded-xl object-cover"
+              />
+            </div>
+            <div className="border-s-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-e-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-muted-foreground/30 p-4" />
+            <div className="border-t-2 border-s-2 border-muted-foreground/30 p-4" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature143 };
diff --git a/blocks/feature144.tsx b/blocks/feature144.tsx
new file mode 100644
index 0000000..d1c663e
--- /dev/null
+++ b/blocks/feature144.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const topCard = {
+  title: "تحلیل باخت معامله",
+  badge: "تیم فروش",
+  image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  imageAlt: "صف اولویت سرنخ‌ها",
+};
+
+const bottomCards = [
+  {
+    title: "هدف‌گذاری تیمی",
+    badge: "بستن معامله",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد عملکرد فروش",
+  },
+  {
+    title: "اتوماسیون پیگیری",
+    badge: "رشد درآمد",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "نمودار نرخ تبدیل",
+  },
+];
+
+interface Feature144Props {
+  className?: string;
+}
+
+const Feature144 = ({ className }: Feature144Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="text-center text-xl">
+          پیش‌بینی درآمد را دقیق‌تر کنید
+        </h2>
+        <p className="mx-auto mt-3 max-w-3xl text-center text-xl text-muted-foreground">
+          هر فرصت فروش را از دست ندهید
+        </p>
+
+        <Card className="mt-20 flex flex-col gap-6 p-6 md:flex-row md:gap-8 md:p-8">
+          <div className="flex w-full flex-col justify-between text-start">
+            <h6 className="text-xl md:text-3xl">{topCard.title}</h6>
+            <Badge
+              variant="outline"
+              className="mt-4 w-fit bg-muted px-4 py-3 md:text-base"
+            >
+              {topCard.badge}
+            </Badge>
+          </div>
+          <div className="w-full">
+            <img
+              src={topCard.image}
+              alt={topCard.imageAlt}
+              className="max-h-80 w-full rounded-lg object-cover"
+            />
+          </div>
+        </Card>
+
+        <div className="mt-6 flex flex-col gap-6 md:mt-8 md:flex-row md:gap-8">
+          {bottomCards.map((card) => (
+            <Card
+              key={card.title}
+              className="flex w-full flex-col gap-6 p-6 md:gap-8 md:p-8"
+            >
+              <div className="w-full">
+                <img
+                  src={card.image}
+                  alt={card.imageAlt}
+                  className="max-h-80 w-full rounded-lg object-cover"
+                />
+              </div>
+
+              <div className="flex w-full flex-col justify-between text-start">
+                <h6 className="text-xl md:text-3xl">{card.title}</h6>
+                <Badge
+                  variant="outline"
+                  className="mt-10 w-fit bg-muted px-4 py-3 md:text-base"
+                >
+                  {card.badge}
+                </Badge>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature144 };
diff --git a/blocks/feature145.tsx b/blocks/feature145.tsx
new file mode 100644
index 0000000..36cb3e7
--- /dev/null
+++ b/blocks/feature145.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+const tabsData = [
+  {
+    id: 1,
+    title: "تحلیل کانال",
+    imageSrc: [
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    ],
+    description:
+      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+  },
+  {
+    id: 2,
+    title: "اتوماسیون ایمیل",
+    imageSrc: [
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    ],
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+  },
+  {
+    id: 3,
+    title: "A/B تست",
+    imageSrc: [
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+    ],
+    description:
+      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+  },
+];
+
+interface Feature145Props {
+  className?: string;
+}
+
+const Feature145 = ({ className }: Feature145Props) => {
+  const [activeTabId, setActiveTabId] = useState<number | null>(null);
+  const [activeImage, setActiveImage] = useState<string[]>(
+    tabsData[0].imageSrc,
+  );
+  const activeTab =
+    tabsData.find((tab) => tab.imageSrc === activeImage) ?? tabsData[0];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="m-auto mb-24 max-w-xl">
+          <h2 className="mb-6 text-center text-3xl font-semibold lg:text-2xll">
+            <span className="text-muted-foreground">کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند</span>{" "}
+            و هر کانال را از یک داشبورد بسنجید.
+          </h2>
+          <p className="m-auto max-w-3xl text-center text-lg lg:text-xl">
+            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+          </p>
+          <a
+            className="mx-auto mt-8 block w-fit rounded-full border-2 border-muted bg-background px-6 py-4 text-sm font-semibold transition hover:border-muted-foreground"
+            href="#"
+          >
+            شروع کنید
+          </a>
+        </div>
+        <div className="mb-12 flex w-full items-start justify-between gap-28">
+          <div className="w-full md:w-1/2">
+            <Accordion type="single" className="w-full" defaultValue="item-1">
+              {tabsData.map((tab) => (
+                <AccordionItem
+                  key={tab.id}
+                  value={`item-${tab.id}`}
+                  className={cn(
+                    "border-t-2 border-b-0 px-2 transition hover:bg-accent",
+                    tab.id === activeTabId && "border-foreground",
+                  )}
+                >
+                  <AccordionTrigger
+                    onClick={() => {
+                      setActiveImage(tab.imageSrc);
+                      setActiveTabId(tab.id);
+                    }}
+                    className="cursor-pointer py-5 text-start no-underline! transition"
+                  >
+                    <h6
+                      className={cn(
+                        "text-xl font-semibold",
+                        tab.id === activeTabId
+                          ? "text-foreground"
+                          : "text-muted-foreground",
+                      )}
+                    >
+                      {tab.title}
+                    </h6>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <p className="mt-3 text-start text-muted-foreground">
+                      {tab.description}
+                    </p>
+                    <div className="mt-4 md:hidden">
+                      <img
+                        src={tab.imageSrc[0]}
+                        alt={`نمای ${tab.title}`}
+                        className="h-full max-h-80 w-full rounded-md object-cover"
+                      />
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+          <div className="relative m-auto hidden w-1/2 overflow-hidden rounded-xl bg-muted-foreground/5 px-10 py-12 before:absolute before:inset-0 before:z-[-1] before:bg-primary/50 before:[mask-image:url('/block-media/shadcnblocks/block/patterns/dot-pattern.svg')] before:[mask-size:15px] before:[mask-repeat:repeat] md:block">
+            <div className="flex min-h-96 w-full items-center justify-center px-3">
+              <img
+                src={activeImage[0]}
+                alt={`نمای ${activeTab.title}`}
+                className="aspect-[1.2] w-1/2 rounded-md object-cover ps-4"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature145 };
diff --git a/blocks/feature146.tsx b/blocks/feature146.tsx
new file mode 100644
index 0000000..dc5472b
--- /dev/null
+++ b/blocks/feature146.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+const cardsData = [
+  {
+    title: "تریگر رویداد",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "سازنده گردش‌کار",
+    imageClassName: "aspect-[1.45] h-full w-full object-cover",
+  },
+  {
+    title: "شرط هوشمند",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمای اتوماسیون فرایند",
+    imageClassName:
+      "aspect-[1.5] h-full w-full object-cover lg:aspect-[2.4]",
+  },
+  {
+    title: "اعلان خودکار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "لاگ اجرای خودکار",
+    imageClassName: "aspect-[1.7] h-full w-full object-cover lg:w-2/3",
+  },
+];
+
+interface Feature146Props {
+  className?: string;
+}
+
+const Feature146 = ({ className }: Feature146Props) => {
+  const [card1, card2, card3] = cardsData;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-24 flex flex-col items-center justify-between gap-6 lg:flex-row">
+          <div className="text-3xl font-medium md:w-1/2 lg:w-3/5 lg:text-center lg:text-2xll">
+            <h1 className="text-muted-foreground">فرایندها را استاندارد و سریع کنید</h1>
+            <h1>اتوماسیون را در کل سازمان یکپارچه کنید</h1>
+          </div>
+          <div className="text-start text-lg font-medium md:w-1/2 lg:w-2/5 lg:text-xl">
+            خطای انسانی را در کارهای روزمره کم کنید
+          </div>
+        </div>
+        <div className="flex justify-center">
+          <div className="relative flex w-full flex-col border border-solid border-muted-foreground/30 md:w-1/2 lg:w-full">
+            <div className="relative flex flex-col lg:flex-row">
+              <div className="absolute top-0 start-[-50px] h-px w-12 border-b border-dashed border-b-muted-foreground/30" />
+              <div className="absolute top-[-50px] start-0 h-12 w-px border-e border-dashed border-e-muted-foreground/30" />
+              <div className="absolute top-0 end-[-50px] h-px w-12 border-b border-dashed border-b-muted-foreground/30" />
+              <div className="absolute top-[-50px] end-0 h-12 w-px border-e border-dashed border-e-muted-foreground/30" />
+              <div className="flex flex-col justify-between gap-8 border-b border-solid border-muted-foreground/30 p-10 lg:w-2/5 lg:border-e lg:border-b-0">
+                <div>
+                  <h2 className="font-semibold">{card1.title}</h2>
+                  <p className="text-muted-foreground">{card1.description}</p>
+                </div>
+
+                <img
+                  src={card1.image}
+                  alt={card1.imageAlt}
+                  className={card1.imageClassName}
+                />
+              </div>
+              <div className="flex flex-col justify-between gap-8 p-10 lg:w-3/5">
+                <div>
+                  <h2 className="font-semibold">{card2.title}</h2>
+                  <p className="text-muted-foreground">{card2.description}</p>
+                </div>
+
+                <img
+                  src={card2.image}
+                  alt={card2.imageAlt}
+                  className={card2.imageClassName}
+                />
+              </div>
+            </div>
+            <div className="relative border-t border-solid border-muted-foreground/30">
+              <div className="absolute bottom-0 start-[-50px] h-px w-12 border-b border-dashed border-b-muted-foreground/30" />
+              <div className="absolute bottom-[-50px] start-0 h-12 w-px border-e border-dashed border-e-muted-foreground/30" />
+              <div className="absolute end-[-50px] bottom-0 h-px w-12 border-b border-dashed border-b-muted-foreground/30" />
+              <div className="absolute end-0 bottom-[-50px] h-12 w-px border-e border-dashed border-e-muted-foreground/30" />
+              <div className="flex flex-col gap-8 p-10 lg:flex-row lg:items-center">
+                <div className="lg:w-1/3">
+                  <h2 className="font-semibold">{card3.title}</h2>
+                  <p className="text-muted-foreground">{card3.description}</p>
+                </div>
+
+                <img
+                  src={card3.image}
+                  alt={card3.imageAlt}
+                  className={card3.imageClassName}
+                />
+              </div>
+            </div>
+            <img
+              src="/block-media/shadcnblocks/block/patterns/cross-pattern.svg"
+              alt="سازنده گردش‌کار"
+              className="absolute top-[-4px] start-[-6px] w-3"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/patterns/cross-pattern.svg"
+              alt="نمای اتوماسیون فرایند"
+              className="absolute top-[-4px] end-[-6px] w-3"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/patterns/cross-pattern.svg"
+              alt="لاگ اجرای خودکار"
+              className="absolute bottom-[-8px] start-[-6px] w-3"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/patterns/cross-pattern.svg"
+              alt="سازنده گردش‌کار"
+              className="absolute end-[-6px] bottom-[-8px] w-3"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature146 };
diff --git a/blocks/feature147.tsx b/blocks/feature147.tsx
new file mode 100644
index 0000000..8f9a45a
--- /dev/null
+++ b/blocks/feature147.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    title: "Outreach",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+  },
+  {
+    title: "Typeform",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+  },
+  {
+    title: "Slack",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+  },
+  {
+    title: "Mailchimp",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    image: "/block-media/shadcnblocks/block/block-4.svg",
+  },
+  {
+    title: "Mixmax",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    image: "/block-media/shadcnblocks/block/block-5.svg",
+  },
+  {
+    title: "Webhooks",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/block-6.svg",
+  },
+];
+
+interface Feature147Props {
+  className?: string;
+}
+
+const Feature147 = ({ className }: Feature147Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-24 flex flex-col items-center justify-between gap-6 lg:flex-row lg:gap-x-12">
+          <div className="w-full text-center text-3xl font-medium lg:w-1/2 lg:text-start lg:text-2xll">
+            <span className="text-muted-foreground">گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.</span> داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
+          </div>
+          <div className="w-full text-center text-lg font-medium lg:w-1/2 lg:text-start lg:text-xl">
+            تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.
+          </div>
+        </div>
+        <ul className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+          {integrations.map((integration) => (
+            <li key={integration.title}>
+              <Card className="p-6">
+                <img
+                  src={integration.image}
+                  alt={`لوگوی ${integration.title}`}
+                  className="w-14"
+                />
+                <h3 className="mt-4 mb-1 text-lg font-medium">
+                  {integration.title}
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  {integration.description}
+                </p>
+              </Card>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Feature147 };
diff --git a/blocks/feature148.tsx b/blocks/feature148.tsx
new file mode 100644
index 0000000..428fcc2
--- /dev/null
+++ b/blocks/feature148.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const utilities = [
+  {
+    title: "تاریخچه مشتری",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "مدیریت تیکت",
+  },
+  {
+    title: "صندوق یکپارچه",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد رضایت",
+  },
+  {
+    title: "اولویت‌بندی تیکت",
+    description:
+      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "مرکز پشتیبانی مشتری",
+  },
+  {
+    title: "پایگاه دانش",
+    description:
+      "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "مدیریت تیکت",
+  },
+  {
+    title: "پاسخ آماده",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "داشبورد رضایت",
+  },
+  {
+    title: "SLA هوشمند",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "مرکز پشتیبانی مشتری",
+  },
+];
+
+interface Feature148Props {
+  className?: string;
+}
+
+const Feature148 = ({ className }: Feature148Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="m-auto mb-24 max-w-xl text-center">
+          <h2 className="mb-6 text-3xl font-semibold lg:text-2xll">
+            زمان حل مسئله را کوتاه کنید
+          </h2>
+          <p className="m-auto max-w-3xl text-lg lg:text-xl">
+            کیفیت پاسخگویی را قابل اندازه‌گیری کنید
+          </p>
+          <Button asChild className="mt-8 rounded-xl" size="lg">
+            <a href="#">تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.</a>
+          </Button>
+        </div>
+        <div className="mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {utilities.map((utility) => (
+            <Card key={utility.title} className="border-0 pt-0">
+              <img
+                src={utility.image}
+                alt={utility.imageAlt}
+                className="aspect-video w-full rounded-t-xl object-cover"
+              />
+              <div className="p-5 text-start">
+                <p className="mb-1 font-medium">{utility.title}</p>
+                <p className="text-muted-foreground">{utility.description}</p>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature148 };
diff --git a/blocks/feature149.tsx b/blocks/feature149.tsx
new file mode 100644
index 0000000..1423020
--- /dev/null
+++ b/blocks/feature149.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature149Props {
+  className?: string;
+}
+
+const Feature149 = ({ className }: Feature149Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative isolate flex flex-col md:flex-row md:gap-0">
+          <img
+            src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
+            alt="دستیار هوش مصنوعی"
+            className="absolute top-0 start-0 z-[-1] h-full w-full rounded-2xl object-cover"
+          />
+
+          <div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-start gap-6 p-6 md:h-[600px] md:w-1/2 md:p-10 md:transition-[width] hover:md:w-2/3">
+            <div className="md:backdrop-blur-0 md:group-hover:backdrop-blur-0 absolute top-0 start-0 z-[-1] h-full w-full rounded-t-[20px] bg-linear-to-b from-black/40 to-black/30 backdrop-filter transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/20 group-hover:backdrop-blur-[2px] md:rounded-2xl md:from-black/40 md:to-black/30 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40" />
+            <Button
+              variant="outline"
+              className="rounded-full border-white/20 bg-background/10 text-white hover:bg-background/20"
+            >
+              درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.
+            </Button>
+            <h1 className="text-3xl font-bold text-white md:text-2xll">
+              با هوش مصنوعی سریع‌تر تصمیم بگیرید
+            </h1>
+            <p className="max-w-md text-start text-white/90">
+              کارهای تکراری را به AI بسپارید
+            </p>
+          </div>
+
+          <div className="relative hidden h-[600px] w-5 bg-background md:block">
+            <div className="absolute top-0 start-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[-10px_-10px_0_0_var(--background)]" />
+            <div className="absolute top-0 end-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[10px_-10px_0_0_var(--background)]" />
+            <div className="absolute bottom-0 start-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[-10px_10px_0_0_var(--background)]" />
+            <div className="absolute end-[-40px] bottom-0 h-[40px] w-[40px] rounded-[1rem] shadow-[10px_10px_0_0_var(--background)]" />
+          </div>
+
+          <div
+            className="group relative flex h-[300px] w-full cursor-pointer flex-col items-start gap-6 p-6 md:h-[600px] md:w-1/2 md:p-10 md:transition-[width] hover:md:w-2/3"
+            onClick={() => {
+              console.log("click");
+            }}
+          >
+            <div className="md:backdrop-blur-0 md:group-hover:backdrop-blur-0 absolute top-0 start-0 z-[-1] h-full w-full rounded-b-[20px] bg-linear-to-t from-black/40 to-black/30 backdrop-filter transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/20 group-hover:backdrop-blur-[2px] md:rounded-2xl md:from-black/40 md:to-black/30 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40" />
+            <Button
+              variant="outline"
+              className="rounded-full border-white/20 bg-background/10 text-white hover:bg-background/20"
+            >
+              اتوماسیون AI
+            </Button>
+            <h1 className="text-3xl font-bold text-white md:text-2xll">
+              پیشنهادهایی که واقعاً مفیدند
+            </h1>
+            <p className="max-w-md text-start text-white/90">
+              داده را به بینش عملی تبدیل کنید
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature149 };
diff --git a/blocks/feature15.tsx b/blocks/feature15.tsx
new file mode 100644
index 0000000..4d4b4f2
--- /dev/null
+++ b/blocks/feature15.tsx
@@ -0,0 +1,82 @@
+import {
+  Infinity as InfinityIcon,
+  MessagesSquare,
+  Zap,
+  ZoomIn,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const feature = [
+  {
+    title: "تحلیل کانال",
+    description:
+      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    icon: <ZoomIn className="size-6" />,
+  },
+  {
+    title: "اتوماسیون ایمیل",
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    icon: <Zap className="size-6" />,
+  },
+  {
+    title: "A/B تست",
+    description:
+      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    icon: <MessagesSquare className="size-6" />,
+  },
+  {
+    title: "تقویم محتوا",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    icon: <InfinityIcon className="size-6" />,
+  },
+];
+
+interface Feature15Props {
+  className?: string;
+}
+
+const Feature15 = ({ className }: Feature15Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col items-center">
+          <div className="flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center">
+            <p className="text-sm text-muted-foreground">با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.</p>
+            <h2 className="text-3xl font-medium md:text-2xll">
+              کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+            </h2>
+
+            <p className="text-muted-foreground md:max-w-2xl">
+              بازاریابی را با داده هدایت کنید
+            </p>
+          </div>
+        </div>
+        <div className="mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2">
+          {feature.map((item, idx) => (
+            <div
+              className="flex flex-col justify-between rounded-lg bg-accent p-6 md:min-h-[300px] md:p-8"
+              key={idx}
+            >
+              <span className="mb-6 flex size-11 items-center justify-center rounded-full bg-background">
+                {item.icon}
+              </span>
+              <div>
+                <h3 className="text-lg font-medium md:text-xl">
+                  {item.title}
+                </h3>
+                <p className="mt-2 text-muted-foreground">
+                  {item.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature15 };
diff --git a/blocks/feature150.tsx b/blocks/feature150.tsx
new file mode 100644
index 0000000..51c7e18
--- /dev/null
+++ b/blocks/feature150.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    title: "نقش و دسترسی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    image:
+      "/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg",
+    imageAlt: "تقویم تیم",
+    buttonTitle: "بیشتر بدانید",
+  },
+  {
+    title: "چک‌لیست تحویل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    image:
+      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
+    imageAlt: "فضای همکاری تیمی",
+    buttonTitle: "شروع کنید",
+  },
+];
+
+interface Feature150Props {
+  className?: string;
+}
+
+const Feature150 = ({ className }: Feature150Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="grid min-h-[400px] grid-cols-1 gap-1 lg:grid-cols-2">
+        {integrations.map((item, index) => (
+          <a
+            key={item.title}
+            className={cn(
+              "group relative flex cursor-pointer items-center justify-start bg-muted-foreground/10 p-10",
+              index === 0 ? "lg:justify-center" : "lg:justify-start",
+            )}
+          >
+            <img
+              src={item.image}
+              alt={item.imageAlt}
+              className="absolute top-0 start-0 z-[-1] h-full w-full object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+            />
+
+            <div className="flex max-w-sm flex-col items-start justify-center gap-10 text-start">
+              <div className="flex flex-col gap-3">
+                <h1 className="text-3xl text-black duration-500 group-hover:text-white">
+                  {item.title}
+                </h1>
+                <p className="text-lg text-black duration-500 group-hover:text-white">
+                  {item.description}
+                </p>
+              </div>
+              <Button
+                variant="outline"
+                className="rounded-full transition-all duration-300 outline-none group-hover:bg-transparent group-hover:text-white"
+              >
+                {item.buttonTitle}
+                <ArrowUpRight
+                  strokeWidth="1"
+                  className="ms-2 size-4 rtl:rotate-180"
+                />
+              </Button>
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Feature150 };
diff --git a/blocks/feature152.tsx b/blocks/feature152.tsx
new file mode 100644
index 0000000..4bd0c5a
--- /dev/null
+++ b/blocks/feature152.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const IconElem = ({ image, title }: { image: string; title: string }) => (
+  <div className="flex flex-col items-center">
+    <img
+      src={image}
+      alt={`لوگوی ${title}`}
+      className="mb-3 hidden h-14 w-14 rounded-lg object-cover p-2 shadow-[rgba(50,50,105,0.15)_0px_2px_5px_0px,rgba(0,0,0,0.05)_0px_1px_1px_0px] md:block dark:invert"
+    />
+    <Badge variant="secondary" className="font-mono text-xs font-semibold">
+      {title}
+    </Badge>
+  </div>
+);
+
+interface Feature152Props {
+  className?: string;
+}
+
+const Feature152 = ({ className }: Feature152Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-16 flex flex-col items-center md:mb-6">
+          <Badge variant="secondary" className="mb-6 bg-muted">
+            فروش آنلاین
+          </Badge>
+          <h1 className="mb-3 max-w-md text-center text-xl font-medium md:text-xl">
+            تجربه خرید را روان‌تر بسازید
+          </h1>
+          <p className="mb-3 max-w-80 text-center">
+            هر سفارش را از انبار تا تحویل ببینید
+          </p>
+          <Button variant="link" asChild className="text-blue-700">
+            <a href="#">
+              نرخ تبدیل فروشگاه را بالا ببرید
+              <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+            </a>
+          </Button>
+        </div>
+        <div className="relative mx-auto flex max-w-3xl flex-col gap-5 overflow-hidden pb-8 md:gap-0">
+          <div className="flex justify-around md:mb-[-30px]">
+            <IconElem
+              image="/block-media/shadcnblocks/block/block-1.svg"
+              title="فروش آنلاین را مقیاس‌پذیر کنید"
+            />
+            <IconElem
+              image="/block-media/shadcnblocks/block/block-2.svg"
+              title="تجربه خرید را روان‌تر بسازید"
+            />
+          </div>
+          <div className="flex justify-center md:mb-[-30px]">
+            <IconElem
+              image="/block-media/shadcnblocks/block/block-3.svg"
+              title="هر سفارش را از انبار تا تحویل ببینید"
+            />
+          </div>
+          <div className="flex justify-evenly md:mb-[-30px]">
+            <IconElem
+              image="/block-media/shadcnblocks/block/block-4.svg"
+              title="نرخ تبدیل فروشگاه را بالا ببرید"
+            />
+            <IconElem
+              image="/block-media/shadcnblocks/block/block-5.svg"
+              title="موجودی و سفارش را یکجا مدیریت کنید"
+            />
+          </div>
+          <div className="flex justify-between">
+            <IconElem
+              image="/block-media/shadcnblocks/block/block-6.svg"
+              title="مشتری را به خرید دوباره برگردانید"
+            />
+            <IconElem
+              image="/block-media/shadcnblocks/block/block-1.svg"
+              title="فروش آنلاین را مقیاس‌پذیر کنید"
+            />
+          </div>
+
+          {[...Array(11)].map((_, index) => (
+            <div
+              key={index}
+              className="absolute -bottom-2 start-1/2 z-[-2] aspect-square rounded-full border border-indigo-200"
+              style={{
+                width: 60 + 80 * index + "px",
+                opacity: 0.5,
+                filter: "saturate(10%)",
+                transform: "translateX(-50%) translateY(50%)",
+              }}
+            />
+          ))}
+          <div className="absolute inset-0 z-[-1] bg-linear-to-b from-background via-transparent to-transparent" />
+          <div className="absolute inset-0 z-[-1] bg-linear-to-s from-background via-transparent to-transparent" />
+          <div className="absolute inset-0 z-[-1] bg-linear-to-e from-background via-transparent to-transparent" />
+          <div className="absolute bottom-0 start-0 z-[-2] h-px w-full bg-indigo-200 opacity-50" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature152 };
diff --git a/blocks/feature153.tsx b/blocks/feature153.tsx
new file mode 100644
index 0000000..d62899c
--- /dev/null
+++ b/blocks/feature153.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { useState } from "react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
+    title: "بهینه‌سازی محتوا",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    info: [
+      {
+        title: "تحلیل رقیب",
+        text: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+      },
+      {
+        title: "لینک داخلی",
+        text: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+      },
+      {
+        title: "گزارش Core Web Vitals",
+        text: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+      },
+    ],
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    title: "Figma",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    info: [
+      {
+        title: "پیشنهاد عنوان",
+        text: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+      },
+      {
+        title: "تحلیل کلمه کلیدی",
+        text: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+      },
+      {
+        title: "ممیزی فنی",
+        text: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+      },
+    ],
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+    title: "Tailwind",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    info: [
+      {
+        title: "ردیابی رتبه",
+        text: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+      },
+      {
+        title: "بهینه‌سازی محتوا",
+        text: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+      },
+    ],
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    title: "Google",
+    description:
+      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+    info: [
+      {
+        title: "تحلیل رقیب",
+        text: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+      },
+      {
+        title: "لینک داخلی",
+        text: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+      },
+      {
+        title: "گزارش Core Web Vitals",
+        text: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+      },
+    ],
+  },
+];
+
+interface Feature153Props {
+  className?: string;
+}
+
+const Feature153 = ({ className }: Feature153Props) => {
+  const [startIndex, setStartIndex] = useState(0);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Carousel
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+          className="w-full"
+        >
+          <div className="mb-6 flex flex-col items-center gap-8 sm:flex-row sm:items-center">
+            <h1 className="text-center text-xl font-medium sm:text-start">
+              رتبه کلمات کلیدی را پیگیری کنید
+            </h1>
+            <div className="mb-[-32px] flex items-center gap-3">
+              <CarouselPrevious
+                onClick={() => setStartIndex(startIndex - 1)}
+                disabled={startIndex === 0}
+                className="static"
+              />
+              <CarouselNext
+                onClick={() => setStartIndex(startIndex + 1)}
+                disabled={startIndex === integrations.length - 1}
+                className="static"
+              />
+            </div>
+          </div>
+          <div className="relative">
+            <CarouselContent
+              className="ms-6 pt-[5px] pb-5 transition-all duration-300"
+              style={{
+                transform: `translateX(${startIndex * 100}%)`,
+              }}
+            >
+              {integrations.map((item) => (
+                <CarouselItem
+                  key={item.title}
+                  className="flex basis-full md:basis-1/2 xl:basis-1/3"
+                >
+                  <div className="flex h-full flex-col justify-between rounded-xl py-14 pe-20 ps-11 text-start shadow-[0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_rgba(16,25,36,0.1),0px_5px_20px_rgba(16,25,36,0.1)]">
+                    <div className="mb-6 flex items-center gap-2">
+                      <img
+                        src={item.image}
+                        alt={`لوگوی ${item.title}`}
+                        className="h-7"
+                      />
+                      <h2 className="font-semibold">{item.title}</h2>
+                    </div>
+                    <div className="mb-4">{item.description}</div>
+                    <div className="mb-10 flex items-center text-sm text-indigo-400">
+                      بیشتر بدانید
+                      <ArrowRight className="ms-2 h-4 rtl:rotate-180" />
+                    </div>
+                    <div className="mt-auto flex flex-col gap-4">
+                      {item.info.map((infoItem) => (
+                        <div key={infoItem.title}>
+                          <h3 className="font-medium">{infoItem.title}</h3>
+                          <p className="text-xs text-muted-foreground">
+                            {infoItem.text}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <div className="pointer-events-none absolute inset-0 start-0 z-10 w-[30px] bg-linear-to-e from-background from-10% to-transparent" />
+            <div className="pointer-events-none absolute inset-0 z-10 bg-linear-to-s from-background via-transparent to-transparent" />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Feature153 };
diff --git a/blocks/feature154.tsx b/blocks/feature154.tsx
new file mode 100644
index 0000000..139861b
--- /dev/null
+++ b/blocks/feature154.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  Activity,
+  ArrowDownToLine,
+  ArrowUpDown,
+  Bell,
+  Brain,
+  CheckCircle,
+  Clock,
+  Code,
+  Database,
+  FileText,
+  GitBranch,
+  Redo,
+  Repeat,
+  Rocket,
+  Scaling,
+  Scan,
+  Zap,
+} from "lucide-react";
+
+import { Marquee } from "@/components/magicui/marquee";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const badges = [
+  {
+    title: "خرید و تأمین",
+    icon: <Code className="size-4" />,
+  },
+  {
+    title: "فاکتور و پرداخت",
+    icon: <ArrowUpDown className="size-4" />,
+  },
+  {
+    title: "گردش تأیید",
+    icon: <GitBranch className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <Zap className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <Clock className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <Activity className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <Brain className="size-4" />,
+  },
+  {
+    title: "گزارش مدیریتی",
+    icon: <Database className="size-4" />,
+  },
+  {
+    title: "مدیریت دارایی",
+    icon: <Bell className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <Rocket className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <CheckCircle className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <FileText className="size-4" />,
+  },
+  {
+    title: "بودجه‌بندی",
+    icon: <Redo className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <ArrowDownToLine className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <Repeat className="size-4" />,
+  },
+  {
+    title: "ERP",
+    icon: <Scan className="size-4" />,
+  },
+  {
+    title: "مدیریت مالی",
+    icon: <Scaling className="size-4" />,
+  },
+];
+
+interface Feature154Props {
+  className?: string;
+}
+
+const Feature154 = ({ className }: Feature154Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center justify-center gap-6 text-center">
+          <Badge variant="outline">ERP</Badge>
+          <h1 className="text-xl font-semibold text-balance md:text-2xll">
+            عملیات سازمان را یکپارچه کنید
+          </h1>
+          <p className="mx-auto max-w-3xl text-lg text-pretty text-muted-foreground">
+            گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+          </p>
+        </div>
+        <div className="relative mt-10">
+          <Marquee className="[--duration:30s]">
+            {badges.map((badge) => (
+              <div
+                key={badge.title}
+                className="flex items-center gap-2 rounded-full bg-muted px-4 py-2"
+              >
+                {badge.icon}
+                {badge.title}
+              </div>
+            ))}
+          </Marquee>
+          <Marquee reverse className="[--duration:30s]">
+            {badges.map((badge) => (
+              <div
+                key={badge.title}
+                className="flex items-center gap-2 rounded-full bg-muted px-4 py-2"
+              >
+                {badge.icon}
+                {badge.title}
+              </div>
+            ))}
+          </Marquee>
+          <div className="pointer-events-none absolute inset-y-0 start-0 w-1/4 bg-linear-to-e from-background" />
+          <div className="pointer-events-none absolute inset-y-0 end-0 w-1/4 bg-linear-to-s from-background" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature154 };
diff --git a/blocks/feature156.tsx b/blocks/feature156.tsx
new file mode 100644
index 0000000..15ac4fc
--- /dev/null
+++ b/blocks/feature156.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    id: "1",
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+    title: "گزارش‌ساز",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    imageAlt: "گزارش‌ساز",
+  },
+  {
+    id: "2",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+    title: "Pivot تعاملی",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    imageAlt: "تحلیل داده سازمان",
+  },
+  {
+    id: "3",
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+    title: "داشبورد مدیریتی",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    imageAlt: "داشبورد هوش تجاری",
+  },
+];
+
+interface Feature156Props {
+  className?: string;
+}
+
+const Feature156 = ({ className }: Feature156Props) => {
+  const [cardNumber, setCardNumber] = useState(0);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative overflow-hidden py-24 lg:py-32", className)}
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 h-full w-full bg-[linear-gradient(to_left,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-size-[2rem_2rem]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_800px_at_50%_50%,transparent,white)]" />
+      </div>
+
+      <div className="relative container">
+        <div className="mb-16 flex flex-col items-center gap-8">
+          <h1 className="max-w-3xl text-center text-xl font-bold tracking-tight text-balance md:text-2xll lg:text-2xll">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h1>
+        </div>
+        <Tabs dir="rtl" defaultValue={cardNumber.toString()} className="space-y-16">
+          <div className="relative flex h-[480px] items-center justify-center overflow-hidden rounded-2xl bg-muted backdrop-blur-sm">
+            {integrations.map((item, index) => (
+              <TabsContent
+                value={index.toString()}
+                key={item.id}
+                className="absolute inset-0 h-full w-full"
+              >
+                <div className="flex h-full w-full items-center justify-center p-8">
+                  <img
+                    src={item.image}
+                    alt={item.imageAlt}
+                    className="h-auto max-h-full w-auto max-w-full object-contain dark:invert"
+                  />
+                </div>
+              </TabsContent>
+            ))}
+          </div>
+          <TabsList className="grid !h-auto w-full grid-cols-1 gap-8 bg-transparent p-0 lg:grid-cols-3 lg:gap-14">
+            {integrations.map((item, index) => (
+              <TabsTrigger
+                value={index.toString()}
+                key={item.id}
+                className="group flex !h-auto flex-col items-start rounded-xl border border-muted bg-background/50 p-8 text-right whitespace-normal shadow-sm transition-all hover:bg-muted/50 hover:shadow-md data-[state=active]:border-primary/20 data-[state=active]:bg-muted/50 data-[state=active]:shadow-md"
+                onClick={() => setCardNumber(index)}
+              >
+                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 font-mono text-primary group-hover:bg-primary/20 group-data-[state=active]:bg-primary/20">
+                  {(index + 1).toLocaleString("fa-IR")}
+                </div>
+                <h3 className="mb-3 text-xl font-semibold tracking-tight text-foreground/90 group-hover:text-foreground group-data-[state=active]:text-foreground">
+                  {item.title}
+                </h3>
+                <p className="text-right text-sm text-pretty text-muted-foreground/80 group-hover:text-muted-foreground group-data-[state=active]:text-muted-foreground">
+                  {item.description}
+                </p>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature156 };
diff --git a/blocks/feature157.tsx b/blocks/feature157.tsx
new file mode 100644
index 0000000..f2cc123
--- /dev/null
+++ b/blocks/feature157.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg",
+    title: "Indigo Technology",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg",
+    title: "Rapid Financial",
+    description:
+      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+];
+
+interface Feature157Props {
+  className?: string;
+}
+
+const Feature157 = ({ className }: Feature157Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h4 className="mb-4 text-center text-muted-foreground/50">پروفایل ۳۶۰ درجه مشتری</h4>
+        <h1 className="mx-auto mb-12 max-w-3xl text-center text-xl font-semibold text-balance sm:text-2xll lg:text-[56px]">
+          هر سرنخ را تا قرارداد دنبال کنید
+        </h1>
+        <div className="flex flex-col items-center justify-between gap-12 lg:flex-row">
+          {integrations.map((item) => (
+            <a
+              key={item.title}
+              className="relative flex-auto basis-1 text-start transition-opacity delay-150 duration-300 hover:opacity-80"
+              href="#"
+            >
+              <img
+                src={item.image}
+                alt={item.imageAlt}
+                className="mb-6 aspect-[1.5] w-full rounded-2xl object-cover"
+              />
+              <div className="mb-2 text-xl font-semibold">{item.title}</div>
+              <div className="text-pretty">{item.description}</div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature157 };
diff --git a/blocks/feature158.tsx b/blocks/feature158.tsx
new file mode 100644
index 0000000..f6fa313
--- /dev/null
+++ b/blocks/feature158.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    id: "1",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    text: "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
+    imageAlt: "صف اولویت سرنخ‌ها",
+  },
+  {
+    id: "2",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    text: "چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.",
+    imageAlt: "داشبورد عملکرد فروش",
+  },
+  {
+    id: "3",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    text: "الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.",
+    imageAlt: "نمودار نرخ تبدیل",
+  },
+];
+
+interface Feature158Props {
+  className?: string;
+}
+
+const Feature158 = ({ className }: Feature158Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-12 flex flex-col items-center">
+          <h4 className="mb-4 text-muted-foreground/50">
+            همکاری فروش و بازاریابی
+          </h4>
+          <h1 className="mb-6 text-center text-xl font-semibold text-balance sm:text-2xll lg:text-[56px]">
+            پیش‌بینی درآمد را دقیق‌تر کنید
+          </h1>
+          <h3 className="text-center text-xl text-pretty">
+            اولویت‌بندی سرنخ
+          </h3>
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="mb-16 flex flex-col items-center justify-between gap-12 md:flex-row">
+            {integrations.map((item) => (
+              <div key={item.id} className="text-center">
+                <img
+                  src={item.image}
+                  alt={item.imageAlt}
+                  className="mb-8 aspect-[1.6] w-full rounded-2xl border border-dashed object-cover"
+                />
+                <p className="text-sm text-pretty">{item.text}</p>
+              </div>
+            ))}
+          </div>
+          <Button>با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature158 };
diff --git a/blocks/feature159.tsx b/blocks/feature159.tsx
new file mode 100644
index 0000000..749e630
--- /dev/null
+++ b/blocks/feature159.tsx
@@ -0,0 +1,62 @@
+import { Code, GitBranch, List, Sparkles } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    icon: <Code className="h-5 w-5" />,
+    title: "ردیابی UTM",
+    text: "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+  },
+  {
+    icon: <GitBranch className="h-5 w-5" />,
+    title: "گزارش ROI",
+    text: "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+  },
+  {
+    icon: <List className="h-5 w-5" />,
+    title: "مدیریت کمپین",
+    text: "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+  },
+  {
+    icon: <Sparkles className="h-5 w-5" />,
+    title: "سگمنت‌بندی مخاطب",
+    text: "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+  },
+];
+
+interface Feature159Props {
+  className?: string;
+}
+
+const Feature159 = ({ className }: Feature159Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-wrap items-start justify-between border-b pb-16">
+          {integrations.map((item, index, arr) => (
+            <div
+              key={item.title}
+              className="flex shrink grow basis-full flex-col items-start justify-between p-6 text-start md:basis-1/2 lg:basis-1/4"
+            >
+              <div className="mb-3 flex items-center justify-start gap-3">
+                {item.icon}
+                <h2 className="text-lg font-semibold">{item.title}</h2>
+              </div>
+              <p className="text-sm text-pretty text-muted-foreground/50">
+                {item.text}
+              </p>
+              {arr.length - 1 === index && (
+                <div className="mt-5 w-auto cursor-pointer self-start border-b text-sm">
+                  مشاهده همه
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature159 };
diff --git a/blocks/feature16.tsx b/blocks/feature16.tsx
new file mode 100644
index 0000000..d0972bb
--- /dev/null
+++ b/blocks/feature16.tsx
@@ -0,0 +1,59 @@
+import type { LucideIcon } from "lucide-react";
+import { Timer, Zap, ZoomIn } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const values: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}[] = [
+  {
+    icon: Timer,
+    title: "تریگر رویداد",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+  },
+  {
+    icon: ZoomIn,
+    title: "شرط هوشمند",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+  },
+  {
+    icon: Zap,
+    title: "اعلان خودکار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+  },
+];
+
+interface Feature16Props {
+  className?: string;
+}
+
+const Feature16 = ({ className }: Feature16Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <p className="mb-4 text-sm text-muted-foreground lg:text-base">
+          قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+        </p>
+        <h2 className="text-3xl font-medium lg:text-xl">فرایندها را استاندارد و سریع کنید</h2>
+        <div className="mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3">
+          {values.map(({ icon: Icon, title, description }) => (
+            <div key={title} className="rounded-lg bg-accent p-5">
+              <span className="mb-8 flex size-12 items-center justify-center rounded-full bg-background">
+                <Icon className="size-6" />
+              </span>
+              <h3 className="mb-2 text-xl font-medium">{title}</h3>
+              <p className="leading-7 text-muted-foreground">{description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature16 };
diff --git a/blocks/feature160.tsx b/blocks/feature160.tsx
new file mode 100644
index 0000000..668dd27
--- /dev/null
+++ b/blocks/feature160.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { Code, GitBranch, List, WandSparkles } from "lucide-react";
+import { useState } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    id: "build",
+    image:
+      "/block-media/shadcnblocks/block/photos/tim-van-der-kuip-CPs2X8JYmS8-unsplash.jpg",
+    logo: <Code strokeWidth={1} className="h-5 w-5" />,
+    title: "لاگ اجرا",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    imageAlt: "سازنده گردش‌کار",
+  },
+  {
+    id: "refine",
+    image:
+      "/block-media/shadcnblocks/block/photos/vitaly-gariev-y7xUr3aDLXc-unsplash.jpg",
+    logo: <GitBranch strokeWidth={1} className="h-5 w-5" />,
+    title: "قالب آماده",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    imageAlt: "نمای اتوماسیون فرایند",
+  },
+  {
+    id: "work",
+    image:
+      "/block-media/shadcnblocks/block/photos/annie-spratt-hCb3lIB8L8E-unsplash.jpg",
+    logo: <List strokeWidth={1} className="h-5 w-5" />,
+    title: "اتصال ابزار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    imageAlt: "لاگ اجرای خودکار",
+  },
+  {
+    id: "report",
+    image:
+      "/block-media/shadcnblocks/block/photos/akson-1K8pIbIrhkQ-unsplash.jpg",
+    logo: <WandSparkles strokeWidth={1} className="h-5 w-5" />,
+    title: "سازنده گردش‌کار",
+    description:
+      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    imageAlt: "سازنده گردش‌کار",
+  },
+];
+
+interface Feature160Props {
+  className?: string;
+}
+
+const Feature160 = ({ className }: Feature160Props) => {
+  const [cardNumber, setCardNumber] = useState(0);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-20 max-w-lg text-right">
+          <h1 className="mb-4 text-2xll font-bold text-balance lg:text-[52px]">
+            فرایندها را استاندارد و سریع کنید
+          </h1>
+          <h3 className="text-xl text-pretty">
+            اتوماسیون را در کل سازمان یکپارچه کنید
+          </h3>
+        </div>
+        <Tabs
+          dir="rtl"
+          className="rounded-3xl border border-gray-200 px-5 pt-4 sm:px-10 sm:pt-9"
+          defaultValue="0"
+        >
+          <TabsList className="mb-14 grid !h-full grid-cols-1 gap-x-8 gap-y-6 bg-transparent p-0 md:grid-cols-2 lg:grid-cols-4">
+            {integrations.map((item, index) => (
+              <TabsTrigger
+                key={item.id}
+                value={index.toString()}
+                onClick={() => setCardNumber(index)}
+                className={cn(
+                  "block cursor-pointer border-0 text-right whitespace-normal transition-all duration-500 hover:opacity-80 data-[state=active]:shadow-none!",
+                  index === cardNumber ? "opacity-100" : "opacity-50",
+                )}
+              >
+                <div className="mb-2 flex items-center gap-2">
+                  {item.logo}
+                  <h4 className="text-lg font-semibold">{item.title}</h4>
+                </div>
+                <p className="text-right text-base font-medium text-pretty">
+                  {item.description}
+                </p>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          <div className="rounded-t-[28px] p-1 pb-0">
+            {integrations.map((item, index) => (
+              <TabsContent
+                value={index.toString()}
+                key={item.id}
+                className="m-0"
+              >
+                <img
+                  src={item.image}
+                  alt={item.imageAlt}
+                  className="h-full max-h-[400px] w-full rounded-t-[28px] object-cover object-bottom transition-all duration-500"
+                />
+              </TabsContent>
+            ))}
+          </div>
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature160 };
diff --git a/blocks/feature161.tsx b/blocks/feature161.tsx
new file mode 100644
index 0000000..c3c3242
--- /dev/null
+++ b/blocks/feature161.tsx
@@ -0,0 +1,82 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const logos = [
+  {
+    src: "/block-media/shadcnblocks/block/logos/ph-daily.svg",
+    alt: "گزارش عملکرد",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/ph-weekly.svg",
+    alt: "داشبورد تحلیل داده",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/ph-kitty.svg",
+    alt: "نمودار شاخص کلیدی",
+  },
+];
+
+interface Feature161Props {
+  className?: string;
+}
+
+const Feature161 = ({ className }: Feature161Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative grid grid-cols-1 grid-rows-2 border border-muted-foreground/25 lg:grid-cols-2 lg:grid-rows-1">
+          <div className="absolute top-[-16px] start-[-1px] h-4 w-px bg-muted-foreground/25" />
+          <div className="absolute top-[-1px] start-[-16px] h-px w-4 bg-muted-foreground/25" />
+          <div className="absolute bottom-[-16px] start-[-1px] h-4 w-px bg-muted-foreground/25" />
+          <div className="absolute bottom-0 start-[-16px] h-px w-4 bg-muted-foreground/25" />
+          <div className="relative border-b border-muted-foreground/25 p-6 text-start md:p-16 lg:border-e lg:border-b-0">
+            <div className="absolute top-[-16px] end-[-1px] hidden h-4 w-px bg-muted-foreground/25 lg:block" />
+            <div className="absolute end-[-1px] bottom-[-16px] h-4 w-px bg-muted-foreground/25" />
+            <h1 className="text-xl font-bold text-balance">
+              داده پراکنده را به تصمیم تبدیل کنید
+            </h1>
+            <h3 className="mt-2 mb-6 text-xl text-pretty text-muted-foreground">
+              شاخص‌های کلیدی را یکجا ببینید
+            </h3>
+            <div className="flex items-center gap-3">
+              <Button>شروع کنید</Button>
+              <Button variant="outline">تحلیل داده</Button>
+            </div>
+          </div>
+          <div className="grid grid-cols-1 grid-rows-7">
+            <div className="row-start-1 row-end-2 flex justify-evenly">
+              <div className="h-full w-px bg-muted-foreground/25" />
+              <div className="h-full w-px bg-muted-foreground/25" />
+              <div className="h-full w-px bg-muted-foreground/25" />
+              <div className="h-full w-px bg-muted-foreground/25" />
+            </div>
+            <div className="row-start-2 row-end-7 flex items-center justify-center gap-8 border-t border-b border-muted-foreground/25">
+              <div className="flex flex-col items-center gap-8 py-12 md:flex-row">
+                {logos.map((logo) => (
+                  <img
+                    key={logo.alt}
+                    src={logo.src}
+                    alt={logo.alt}
+                    className="h-14 object-cover"
+                  />
+                ))}
+              </div>
+            </div>
+            <div className="row-start-7 row-end-8 flex justify-evenly">
+              <div className="h-full w-px bg-muted-foreground/25" />
+              <div className="h-full w-px bg-muted-foreground/25" />
+              <div className="h-full w-px bg-muted-foreground/25" />
+              <div className="h-full w-px bg-muted-foreground/25" />
+            </div>
+          </div>
+          <div className="absolute top-[-16px] end-[-1px] h-4 w-px bg-muted-foreground/25" />
+          <div className="absolute top-[-1px] end-[-16px] h-px w-4 bg-muted-foreground/25" />
+          <div className="absolute end-[-1px] bottom-[-16px] h-4 w-px bg-muted-foreground/25" />
+          <div className="absolute end-[-16px] bottom-[-1px] h-px w-4 bg-muted-foreground/25" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature161 };
diff --git a/blocks/feature162.tsx b/blocks/feature162.tsx
new file mode 100644
index 0000000..3560147
--- /dev/null
+++ b/blocks/feature162.tsx
@@ -0,0 +1,53 @@
+import { cn } from "@/lib/utils";
+
+interface Feature162Props {
+  className?: string;
+}
+
+const Feature162 = ({ className }: Feature162Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-4 flex flex-col gap-16 rounded-[36px] border border-gray-200 pt-10 ps-10 md:flex-row">
+          <div className="max-w-96 text-start text-lg text-pretty">
+            <span className="font-semibold">پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.</span>{" "}
+            داده‌های مشتری، فروش و پشتیبانی را در یک منبع واحد یکپارچه کنید و
+            تصمیم‌گیری سریع‌تر داشته باشید.
+          </div>
+          <div className="w-full rounded-ts-[36px] rounded-ee-[36px] p-1 pe-0 pb-0">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="مدیریت تیکت"
+              className="max-h-[450px] w-full rounded-ts-[36px] rounded-ee-[36px] object-cover object-bottom transition-all duration-500"
+            />
+          </div>
+        </div>
+        <div className="grid grid-cols-1 grid-rows-2 gap-4 md:grid-cols-2 md:grid-rows-1">
+          <div className="flex flex-col rounded-[36px] border border-gray-200">
+            <div className="p-10 text-start text-lg text-pretty">
+              <span className="font-semibold">همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.</span> پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+            </div>
+            <div className="flex-1 basis-auto">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="داشبورد رضایت"
+                className="h-full w-full rounded-b-[36px] object-cover transition-all duration-500"
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-4">
+            <div className="flex-1 basis-auto rounded-[36px]">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt="مرکز پشتیبانی مشتری"
+                className="h-full w-full rounded-[36px] object-cover transition-all duration-500"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature162 };
diff --git a/blocks/feature163.tsx b/blocks/feature163.tsx
new file mode 100644
index 0000000..b135710
--- /dev/null
+++ b/blocks/feature163.tsx
@@ -0,0 +1,68 @@
+import { cn } from "@/lib/utils";
+
+interface Feature163Props {
+  className?: string;
+}
+
+const Feature163 = ({ className }: Feature163Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 grid-rows-4 gap-4 lg:grid-cols-5 lg:grid-rows-2">
+          <div className="col-span-1 row-span-1 flex flex-col rounded-[36px] border border-gray-200 lg:col-span-3">
+            <div className="max-w-md px-10 pt-10 pb-16 text-start text-lg text-pretty">
+              <span className="font-semibold">درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.</span> مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+            </div>
+            <div className="ms-10 flex-1 basis-auto rounded-ts-[36px] rounded-ee-[36px] p-1 pe-0 pb-0">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="دستیار هوش مصنوعی"
+                className="h-full w-full rounded-ts-[36px] rounded-ee-[36px] object-cover object-bottom transition-all duration-500"
+              />
+            </div>
+          </div>
+          <div className="col-span-1 row-span-1 flex flex-col rounded-[36px] border border-gray-200 lg:col-span-2">
+            <div className="max-w-md p-10 text-start text-lg text-pretty">
+              <span className="font-semibold">مشتریان در معرض ریزش را زودتر شناسایی کنید.</span> متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.
+            </div>
+            <div className="mx-20 flex-1 basis-auto rounded-t-[36px] p-1 pb-0">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="پیشنهادهای هوشمند"
+                className="h-full w-full rounded-t-[36px] object-cover object-bottom transition-all duration-500"
+              />
+            </div>
+          </div>
+          <div className="col-span-1 row-span-1 flex flex-col rounded-[36px] border border-gray-200 lg:col-span-2">
+            <div className="max-w-md px-10 pt-10 pb-16 text-start text-lg text-pretty">
+              <span className="font-semibold">بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.</span> درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.
+            </div>
+            <div className="me-10 flex-1 basis-auto rounded-te-[36px] rounded-es-[36px] p-1 pb-0 ps-0">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt="تحلیل با AI"
+                className="h-full w-full rounded-te-[36px] rounded-es-[36px] object-cover object-bottom transition-all duration-500"
+              />
+            </div>
+          </div>
+          <div className="col-span-1 row-span-1 flex flex-col rounded-[36px] border border-gray-200 lg:col-span-3">
+            <div className="max-w-md px-10 pt-10 pb-16 text-start text-lg text-pretty">
+              <span className="font-semibold">مشتریان در معرض ریزش را زودتر شناسایی کنید.</span>{" "}
+              یادداشت‌ها و پیش‌نویس‌ها را ذخیره کنید تا هیچ جزئیاتی در گردش کار
+              از قلم نیفتد.
+            </div>
+            <div className="mx-10 mb-10 flex-1 basis-auto rounded-[36px] p-1">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                alt="دستیار هوش مصنوعی"
+                className="h-full w-full rounded-[36px] object-cover object-bottom transition-all duration-500"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature163 };
diff --git a/blocks/feature164.tsx b/blocks/feature164.tsx
new file mode 100644
index 0000000..c10df9e
--- /dev/null
+++ b/blocks/feature164.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    id: "sales",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    title: "تقویم تیمی",
+    imageAlt: "تقویم تیم",
+  },
+  {
+    id: "revenue",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    title: "اشتراک فایل",
+    imageAlt: "فضای همکاری تیمی",
+  },
+  {
+    id: "plg",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    title: "منشن و بحث",
+    imageAlt: "برد مدیریت پروژه",
+  },
+];
+
+interface Feature164Props {
+  className?: string;
+}
+
+const Feature164 = ({ className }: Feature164Props) => {
+  const [cardNumber, setCardNumber] = useState(0);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col justify-between lg:flex-row">
+          <Tabs className="lg:w-1/2" defaultValue="0">
+            <div className="mb-8">
+              {integrations.map((item, index) => (
+                <TabsContent key={item.id} value={index.toString()}>
+                  <img
+                    src={item.image}
+                    className="aspect-square rounded-3xl object-cover"
+                    alt={item.imageAlt}
+                  />
+                </TabsContent>
+              ))}
+            </div>
+            <TabsList className="flex h-full items-center justify-center gap-2 bg-transparent p-0">
+              {integrations.map((item, index) => (
+                <TabsTrigger
+                  key={item.id}
+                  value={index.toString()}
+                  className={cn(
+                    "rounded-xl border px-3 py-2 text-xs sm:text-base",
+                    index === cardNumber && "border-primary",
+                  )}
+                  onClick={() => setCardNumber(index)}
+                >
+                  {item.title}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+          <div className="flex flex-col justify-center lg:w-1/2 lg:items-start">
+            <div className="max-w-md text-start">
+              <h1 className="mb-4 text-3xl font-semibold text-balance sm:text-2xll">
+                <span className="text-muted-foreground/50">همکاری از راه دور را ساده کنید</span>{" "}
+                گزارش‌دهی پویا.
+              </h1>
+              <p className="mb-6 text-xl text-pretty">
+                اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
+              </p>
+              <Button>بیشتر بدانید</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature164 };
diff --git a/blocks/feature166.tsx b/blocks/feature166.tsx
new file mode 100644
index 0000000..af13617
--- /dev/null
+++ b/blocks/feature166.tsx
@@ -0,0 +1,121 @@
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+}
+
+interface Feature166Props {
+  title?: string;
+  description?: string;
+  feature1?: Feature;
+  feature2?: Feature;
+  feature3?: Feature;
+  feature4?: Feature;
+  className?: string;
+}
+
+const Feature166 = ({
+  title = "فروش آنلاین را مقیاس‌پذیر کنید",
+  description = "مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.",
+  feature1 = {
+    title: "مدیریت محصول",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "مدیریت سفارش",
+  },
+  feature2 = {
+    title: "پرداخت امن",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد فروش",
+  },
+  feature3 = {
+    title: "ردیابی سفارش",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پنل فروشگاه آنلاین",
+  },
+  feature4 = {
+    title: "تخفیف هوشمند",
+    description:
+      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "مدیریت سفارش",
+  },
+  className,
+}: Feature166Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-24 flex flex-col items-center gap-6">
+          <h1 className="text-center text-3xl font-semibold text-balance lg:max-w-3xl lg:text-2xll">
+            {title}
+          </h1>
+          <p className="text-center text-lg font-medium text-pretty text-muted-foreground md:max-w-4xl lg:text-xl">
+            {description}
+          </p>
+        </div>
+        <div className="relative flex justify-center">
+          <div className="border-muted2 relative flex w-full flex-col border md:w-1/2 lg:w-full">
+            <div className="relative flex flex-col lg:flex-row">
+              <div className="border-muted2 flex flex-col justify-between border-b border-solid p-10 text-start lg:w-3/5 lg:border-e lg:border-b-0">
+                <h2 className="text-xl font-semibold">{feature1.title}</h2>
+                <p className="text-pretty text-muted-foreground">
+                  {feature1.description}
+                </p>
+                <img
+                  src={feature1.image}
+                  alt={feature1.imageAlt}
+                  className="mt-8 aspect-[1.5] h-full w-full object-cover lg:aspect-[2.4]"
+                />
+              </div>
+              <div className="flex flex-col justify-between p-10 text-start lg:w-2/5">
+                <h2 className="text-xl font-semibold">{feature2.title}</h2>
+                <p className="text-pretty text-muted-foreground">
+                  {feature2.description}
+                </p>
+                <img
+                  src={feature2.image}
+                  alt={feature2.imageAlt}
+                  className="mt-8 aspect-[1.45] h-full w-full object-cover"
+                />
+              </div>
+            </div>
+            <div className="border-muted2 relative flex flex-col border-t border-solid lg:flex-row">
+              <div className="border-muted2 flex flex-col justify-between border-b border-solid p-10 text-start lg:w-2/5 lg:border-e lg:border-b-0">
+                <h2 className="text-xl font-semibold">{feature3.title}</h2>
+                <p className="text-pretty text-muted-foreground">
+                  {feature3.description}
+                </p>
+                <img
+                  src={feature3.image}
+                  alt={feature3.imageAlt}
+                  className="mt-8 aspect-[1.45] h-full w-full object-cover"
+                />
+              </div>
+              <div className="flex flex-col justify-between p-10 text-start lg:w-3/5">
+                <h2 className="text-xl font-semibold">{feature4.title}</h2>
+                <p className="text-pretty text-muted-foreground">
+                  {feature4.description}
+                </p>
+                <img
+                  src={feature4.image}
+                  alt={feature4.imageAlt}
+                  className="mt-8 aspect-[1.5] h-full w-full object-cover lg:aspect-[2.4]"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature166 };
diff --git a/blocks/feature167.tsx b/blocks/feature167.tsx
new file mode 100644
index 0000000..79a499e
--- /dev/null
+++ b/blocks/feature167.tsx
@@ -0,0 +1,121 @@
+import {
+  Blocks,
+  CalendarClock,
+  ChartNoAxesCombined,
+  SquarePen,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const FEATURES_DATA = [
+  {
+    title: "پیشنهاد عنوان",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: SquarePen,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد SEO",
+  },
+  {
+    title: "تحلیل کلمه کلیدی",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: CalendarClock,
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "تحلیل کلمات کلیدی",
+  },
+  {
+    title: "ممیزی فنی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    icon: ChartNoAxesCombined,
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "گزارش رتبه جستجو",
+  },
+];
+
+interface Feature167Props {
+  className?: string;
+}
+
+const Feature167 = ({ className }: Feature167Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container flex flex-col gap-6 border-x py-4 text-right max-lg:border-x lg:py-8">
+          <Badge variant="outline" className="w-fit gap-1">
+            <Blocks />
+            ترافیک ارگانیک
+          </Badge>
+
+          <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h2>
+          <p className="max-w-[600px] text-pretty text-muted-foreground">
+            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+          </p>
+        </div>
+      </div>
+
+      <div className="container border-x px-0">
+        <Tabs
+          dir="rtl"
+          defaultValue={FEATURES_DATA[0].title}
+          className="flex flex-col items-stretch gap-0 divide-y rounded-none lg:flex-row! lg:divide-x lg:divide-y-0"
+        >
+          <TabsList className="flex h-auto! w-full flex-col rounded-none border-b bg-transparent p-0 lg:w-1/3 lg:border-e lg:border-b-0">
+            {FEATURES_DATA.map((item, index, array) => (
+              <TabsTrigger
+                key={item.title}
+                value={item.title}
+                className={cn(
+                  "group relative flex w-full rounded-none px-8 py-4 text-right whitespace-normal data-[state=active]:shadow-none! lg:px-6 lg:py-5",
+                  index !== array.length - 1 && "border-b",
+                )}
+              >
+                <div className="absolute start-0 bottom-[-1px] z-10 h-[2px] w-0 bg-linear-to-e from-blue-600 via-sky-300 to-transparent transition-all duration-300 group-data-[state=active]:w-1/2" />
+                <div className="flex w-full flex-col text-right">
+                  <div className="flex items-center gap-1.5">
+                    <item.icon className="size-4" />
+                    <h3 className="text-lg tracking-tight">{item.title}</h3>
+                  </div>
+                  <p className="mt-2.5 text-right text-sm text-pretty text-muted-foreground">
+                    {item.description}
+                  </p>
+                </div>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          <div className="relative flex-1">
+            <div className="h-[300px] lg:h-[400px]">
+              {FEATURES_DATA.map((item) => (
+                <TabsContent
+                  key={item.title}
+                  value={item.title}
+                  className="absolute inset-0 m-0 rounded-none p-6 transition-all duration-500 data-[state=inactive]:pointer-events-none data-[state=inactive]:opacity-0"
+                >
+                  <div className="flex h-full">
+                    <img
+                      src={item.image}
+                      alt={item.imageAlt}
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                </TabsContent>
+              ))}
+            </div>
+          </div>
+        </Tabs>
+      </div>
+
+      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container h-full w-full border-x" />
+      </div>
+    </section>
+  );
+};
+
+export { Feature167 };
diff --git a/blocks/feature168.tsx b/blocks/feature168.tsx
new file mode 100644
index 0000000..e716d42
--- /dev/null
+++ b/blocks/feature168.tsx
@@ -0,0 +1,92 @@
+import { PocketKnife } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const DATA = [
+  {
+    title: "مدیریت دارایی",
+    description:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    icon: "CircleHelp",
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+    imageAlt: "گزارش مالی یکپارچه",
+  },
+  {
+    title: "بودجه‌بندی",
+    description:
+      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+    icon: "Volume2",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+    imageAlt: "داشبورد ERP",
+  },
+  {
+    title: "مدیریت مالی",
+    description:
+      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+    icon: "Lightbulb",
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+    imageAlt: "مدیریت عملیات",
+  },
+];
+
+interface Feature168Props {
+  className?: string;
+}
+
+const Feature168 = ({ className }: Feature168Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
+          <Badge
+            variant="outline"
+            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <PocketKnife className="size-4" />
+            <span>گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
+            عملیات سازمان را یکپارچه کنید
+          </h2>
+          <p className="max-w-[600px] text-pretty tracking-[-0.32px] text-muted-foreground">
+            مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.
+          </p>
+        </div>
+      </div>
+      <div className="container border-x lg:px-0!">
+        <div className="items-center">
+          <div className="grid flex-1 bg-border max-lg:divide-y max-lg:border-x lg:grid-cols-3 lg:gap-px">
+            {DATA.map((item) => (
+              <div
+                key={item.title}
+                className="relative isolate flex flex-col bg-background pt-5 text-start lg:pt-20"
+              >
+                <div className="flex-1 border-b border-border">
+                  <h3 className="mt-2 px-4 text-lg font-semibold tracking-tight lg:px-8">
+                    {item.title}
+                  </h3>
+                  <p className="px-4 pt-2 pb-6 text-pretty text-muted-foreground lg:px-8">
+                    {item.description}
+                  </p>
+                </div>
+                <div className="bg-muted">
+                  <img
+                    src={item.image}
+                    alt={item.imageAlt}
+                    className="p-12 dark:invert"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container h-full w-full border-x" />
+      </div>
+    </section>
+  );
+};
+
+export { Feature168 };
diff --git a/blocks/feature169.tsx b/blocks/feature169.tsx
new file mode 100644
index 0000000..10fffde
--- /dev/null
+++ b/blocks/feature169.tsx
@@ -0,0 +1,106 @@
+import { CircleHelp, Eye, Lightbulb, Volume2 } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const DATA = [
+  {
+    title: "سطح دسترسی",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    icon: CircleHelp,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "گزارش‌ساز",
+  },
+  {
+    title: "تحلیل پیش‌بین",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    icon: Volume2,
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "تحلیل داده سازمان",
+  },
+  {
+    title: "اشتراک گزارش",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    icon: Lightbulb,
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "داشبورد هوش تجاری",
+  },
+];
+
+interface Feature169Props {
+  className?: string;
+}
+
+const Feature169 = ({ className }: Feature169Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container flex flex-col gap-6 py-4 text-right max-md:mx-0 max-md:max-w-none md:mx-8 md:mx-auto md:border-x lg:py-8">
+          <Badge variant="outline">
+            <Eye className="size-4" />
+            <span>داده سازمانی</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h2>
+          <p className="max-w-[600px] text-pretty text-muted-foreground">
+            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+          </p>
+        </div>
+      </div>
+      <div className="container overflow-hidden px-0 max-md:mx-0 max-md:max-w-none md:mx-8 md:mx-auto md:border-x">
+        <Tabs dir="rtl" defaultValue={DATA[0].title}>
+          <TabsList
+            variant="line"
+            className="relative grid h-auto! w-full grid-cols-1 justify-between gap-px! rounded-none! border-b! bg-border! p-0! md:grid-cols-3"
+          >
+            {DATA.map((item) => (
+              <TabsTrigger
+                key={item.title}
+                value={item.title}
+                className="group relative h-full! w-full! flex-col! items-start! rounded-none! border-0! bg-background! p-6! text-right! whitespace-normal! text-foreground! shadow-none! ring-0 after:hidden! data-[state=inactive]:opacity-60! lg:p-8!"
+              >
+                <div className="flex items-center gap-2 text-lg font-medium tracking-tight lg:text-xl">
+                  <span className="grid size-6 place-items-center rounded-full bg-muted">
+                    <item.icon className="size-4" />
+                  </span>
+                  {item.title}
+                </div>
+                <p className="mt-2.5 text-right text-sm text-pretty text-muted-foreground lg:text-base">
+                  {item.description}
+                </p>
+                <span className="absolute -top-1 -start-1 hidden size-2 rounded-full border border-border bg-background md:block" />
+                <span className="absolute -bottom-1 -start-1 z-10 hidden size-2 rounded-full border border-border bg-background md:block" />
+                <div className="absolute start-0 -bottom-px h-px w-0 bg-linear-to-e from-blue-600 via-sky-300 to-transparent transition-all duration-300 group-data-[state=active]:w-full" />
+              </TabsTrigger>
+            ))}
+            <span className="absolute -end-1 -bottom-1 hidden size-2 rounded-full border border-border bg-background lg:block" />
+            <span className="absolute -top-1 -end-1 size-2 rounded-full border border-border bg-background" />
+          </TabsList>
+          {DATA.map((item) => (
+            <TabsContent
+              key={item.title}
+              value={item.title}
+              className="p-6 lg:p-10"
+            >
+              <img
+                src={item.image}
+                alt={item.imageAlt}
+                className="aspect-video h-full w-full rounded-sm border border-border object-cover"
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container size-full md:border-x" />
+      </div>
+    </section>
+  );
+};
+
+export { Feature169 };
diff --git a/blocks/feature17.tsx b/blocks/feature17.tsx
new file mode 100644
index 0000000..e098563
--- /dev/null
+++ b/blocks/feature17.tsx
@@ -0,0 +1,115 @@
+import type { ReactNode } from "react";
+import {
+  BatteryCharging,
+  GitPullRequest,
+  Layers,
+  RadioTower,
+  SquareKanban,
+  WandSparkles,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  heading: string;
+  description: string;
+  icon: ReactNode;
+}
+
+interface Feature17Props {
+  label?: string;
+  title?: string;
+  features: Feature[];
+  buttonText?: string;
+  buttonUrl?: string;
+  className?: string;
+}
+
+const Feature17 = ({
+  label = "تحلیل داده",
+  title = "داده پراکنده را به تصمیم تبدیل کنید",
+  features = [
+    {
+      heading: "داشبورد سفارشی",
+      description:
+        "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+      icon: <GitPullRequest className="size-4 md:size-6" />,
+    },
+    {
+      heading: "فیلتر پیشرفته",
+      description:
+        "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+      icon: <SquareKanban className="size-4 md:size-6" />,
+    },
+    {
+      heading: "نمودار روند",
+      description:
+        "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+      icon: <RadioTower className="size-4 md:size-6" />,
+    },
+    {
+      heading: "هشدار آستانه",
+      description:
+        "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+      icon: <WandSparkles className="size-4 md:size-6" />,
+    },
+    {
+      heading: "گزارش زمان‌بندی‌شده",
+      description:
+        "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+      icon: <Layers className="size-4 md:size-6" />,
+    },
+    {
+      heading: "تحلیل کوHORT",
+      description:
+        "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+      icon: <BatteryCharging className="size-4 md:size-6" />,
+    },
+  ],
+  buttonText = "داشبورد سفارشی",
+  buttonUrl = "https://ShadcnBlocks",
+  className,
+}: Feature17Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        {(label || title) && (
+          <div className="mb-12 flex max-w-3xl flex-col gap-4">
+            <Badge variant="secondary">{label}</Badge>
+            <h2 className="text-3xl font-medium md:text-xl lg:text-2xll">
+              {title}
+            </h2>
+          </div>
+        )}
+        <div className="grid gap-12 md:grid-cols-2">
+          {features.map((feature, idx) => (
+            <div className="flex gap-6 space-y-4 rounded-lg md:block" key={idx}>
+              <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12">
+                {feature.icon}
+              </span>
+              <div>
+                <h3 className="font-medium md:mb-2 md:text-xl">
+                  {feature.heading}
+                </h3>
+                <p className="text-sm text-muted-foreground md:text-base">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+        {buttonUrl && (
+          <div className="mt-16 flex justify-center">
+            <Button size="lg" asChild>
+              <a href={buttonUrl}>{buttonText}</a>
+            </Button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { Feature17 };
diff --git a/blocks/feature170.tsx b/blocks/feature170.tsx
new file mode 100644
index 0000000..b90ed30
--- /dev/null
+++ b/blocks/feature170.tsx
@@ -0,0 +1,77 @@
+import { ArrowRight, Heart, Lightbulb, Shield, UserPen } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const values = [
+  {
+    title: "تقسیم خودکار سرنخ",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    icon: UserPen,
+  },
+  {
+    title: "گزارش عملکرد فروش",
+    description:
+      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    icon: Lightbulb,
+  },
+  {
+    title: "مدیریت قرارداد",
+    description:
+      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+    icon: Shield,
+  },
+];
+
+interface Feature170Props {
+  className?: string;
+}
+
+const Feature170 = ({ className }: Feature170Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-6 py-4 text-start lg:py-8">
+          <Badge
+            variant="outline"
+            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <Heart className="size-4" />
+            <span>مدیریت فروش</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
+            هر سرنخ را تا قرارداد دنبال کنید
+          </h2>
+          <div className="flex flex-col gap-2">
+            <p className="text-pretty text-muted-foreground">
+              تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+            </p>
+            <p className="inline-flex items-center gap-1 text-primary">
+              <span className="underline">بیشتر بدانید</span>
+              <ArrowRight className="size-4 rtl:rotate-180" />
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 grid gap-8 sm:grid-cols-2 md:mt-14 lg:grid-cols-3">
+          {values.map((value) => (
+            <div className="flex gap-2.5 text-start" key={value.title}>
+              <value.icon className="mt-0.5 size-[18px] shrink-0" />
+              <div>
+                <h3 className="text-lg leading-none! tracking-[-0.96px] lg:text-xl">
+                  {value.title}
+                </h3>
+                <p className="mt-2.5 text-sm tracking-[-0.36px] text-pretty text-muted-foreground">
+                  {value.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature170 };
diff --git a/blocks/feature171.tsx b/blocks/feature171.tsx
new file mode 100644
index 0000000..f8d33a3
--- /dev/null
+++ b/blocks/feature171.tsx
@@ -0,0 +1,128 @@
+import { ArrowDownRight } from "lucide-react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    title: "تحلیل باخت معامله",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "صف اولویت سرنخ‌ها",
+  },
+  {
+    title: "هدف‌گذاری تیمی",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد عملکرد فروش",
+  },
+  {
+    title: "اتوماسیون پیگیری",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "نمودار نرخ تبدیل",
+  },
+];
+
+interface Feature171Props {
+  className?: string;
+}
+
+const Feature171 = ({ className }: Feature171Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-secondary py-32", className)}>
+      <div className="container">
+        <div className="relative flex items-center justify-center">
+          <DashedLine className="text-muted-foreground" />
+          <span className="absolute bg-secondary px-3 font-mono text-sm font-medium tracking-wide text-muted-foreground max-lg:hidden">
+            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+          </span>
+        </div>
+
+        <div className="mx-auto mt-10 grid max-w-5xl gap-3 text-start lg:mt-24 lg:grid-cols-2">
+          <h2 className="text-xl font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
+            پیش‌بینی درآمد را دقیق‌تر کنید
+          </h2>
+          <p className="leading-snug font-medium text-pretty text-muted-foreground">
+            چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
+          </p>
+        </div>
+
+        <Card className="mt-8 overflow-hidden rounded-2xl md:mt-12 lg:mt-20">
+          <CardContent className="flex p-0 max-lg:flex-col">
+            {items.map((item, i) => (
+              <div key={item.title} className="flex flex-1 max-lg:flex-col">
+                <div className="ps-6 pt-6 lg:ps-8 lg:pt-8">
+                  <div className="relative ps-4">
+                    <img
+                      src={item.image}
+                      alt={item.imageAlt}
+                      className="aspect-[1.28/1] overflow-hidden rounded-ts-xl object-cover"
+                    />
+                    <div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent" />
+                  </div>
+                  <a
+                    href="#"
+                    className="group flex items-center justify-between gap-4 p-6 ps-0! lg:p-8"
+                  >
+                    <h3 className="text-xl leading-tight font-semibold tracking-tight">
+                      {item.title}
+                    </h3>
+                    <ArrowDownRight className="size-6 shrink-0 rtl:rotate-180" />
+                  </a>
+                </div>
+                {i < items.length - 1 && (
+                  <div className="relative hidden lg:block">
+                    <DashedLine orientation="vertical" />
+                  </div>
+                )}
+                {i < items.length - 1 && (
+                  <div className="relative block lg:hidden">
+                    <DashedLine orientation="horizontal" />
+                  </div>
+                )}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { Feature171 };
+
+interface DashedLineProps {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+const DashedLine = ({
+  orientation = "horizontal",
+  className,
+}: DashedLineProps) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <div
+      className={cn(
+        "relative text-muted-foreground",
+        isHorizontal ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          isHorizontal
+            ? [
+                "h-px w-full",
+                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_45%,transparent)]",
+              ]
+            : [
+                "h-full w-px",
+                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
+                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_45%,transparent)]",
+              ],
+        )}
+      />
+    </div>
+  );
+};
diff --git a/blocks/feature172.tsx b/blocks/feature172.tsx
new file mode 100644
index 0000000..7dec957
--- /dev/null
+++ b/blocks/feature172.tsx
@@ -0,0 +1,292 @@
+import { cn } from "@/lib/utils";
+
+const topItems = [
+  {
+    title: "تحلیل کانال",
+    description:
+      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+        alt: "تحلیل عملکرد کمپین",
+        className: "aspect-495/186 max-w-lg rounded-xl",
+      },
+    ],
+    className:
+      "flex-1 [&>.title-container]:mb-5 md:[&>.title-container]:mb-8 xl:[&>.image-container]:translate-x-6 rtl:xl:[&>.image-container]:-translate-x-6 [&>.image-container]:translate-x-2 rtl:[&>.image-container]:-translate-x-2",
+    fade: [""] as string[],
+  },
+  {
+    title: "اتوماسیون ایمیل",
+    description: "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+        alt: "نمودار ROI",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/linkedin-icon.svg",
+        alt: "داشبورد بازاریابی دیجیتال",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/producthunt-icon.svg",
+        alt: "تحلیل عملکرد کمپین",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
+        alt: "نمودار ROI",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+        alt: "داشبورد بازاریابی دیجیتال",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+        alt: "تحلیل عملکرد کمپین",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+        alt: "نمودار ROI",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+        alt: "داشبورد بازاریابی دیجیتال",
+      },
+    ],
+    className:
+      "flex-1 [&>.title-container]:mb-5 md:[&>.title-container]:mb-8 md:[&>.title-container]:translate-x-2 rtl:md:[&>.title-container]:-translate-x-2 xl:[&>.title-container]:translate-x-4 rtl:xl:[&>.title-container]:-translate-x-4 [&>.title-container]:translate-x-0",
+    fade: [],
+  },
+];
+
+const bottomItems = [
+  {
+    title: "A/B تست",
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-4.svg",
+        alt: "تحلیل عملکرد کمپین",
+        className: "aspect-305/280 rounded-ts-xl max-w-[305px]",
+      },
+    ],
+    className:
+      "[&>.title-container]:mb-5 md:[&>.title-container]:mb-8 xl:[&>.image-container]:translate-x-6 rtl:xl:[&>.image-container]:-translate-x-6 [&>.image-container]:translate-x-2 rtl:[&>.image-container]:-translate-x-2",
+    fade: ["bottom"] as string[],
+  },
+  {
+    title: "تقویم محتوا",
+    description:
+      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-5.svg",
+        alt: "نمودار ROI",
+        className: "aspect-320/103 rounded-xl",
+      },
+    ],
+    className:
+      "justify-normal [&>.title-container]:mb-5 md:[&>.title-container]:mb-0 [&>.image-container]:flex-1 md:[&>.image-container]:place-items-center md:[&>.image-container]:-translate-y-3",
+    fade: [""],
+  },
+  {
+    title: "ردیابی UTM",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-6.svg",
+        alt: "داشبورد بازاریابی دیجیتال",
+        className: "aspect-305/280 rounded-ts-xl max-w-[305px]",
+      },
+    ],
+    className:
+      "[&>.title-container]:mb-5 md:[&>.title-container]:mb-8 xl:[&>.image-container]:translate-x-6 rtl:xl:[&>.image-container]:-translate-x-6 [&>.image-container]:translate-x-2 rtl:[&>.image-container]:-translate-x-2",
+    fade: ["bottom"],
+  },
+];
+
+interface Feature172Props {
+  className?: string;
+}
+
+function Feature172({ className }: Feature172Props) {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="text-center text-3xl font-semibold tracking-tight text-balance sm:text-xl md:text-2xll lg:text-2xll">
+          کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+        </h2>
+
+        <div className="mt-8 md:mt-12 lg:mt-20">
+          <DashedLine orientation="horizontal" className="scale-x-105" />
+
+          <div className="relative flex max-md:flex-col">
+            {topItems.map((item, i) => (
+              <Item key={item.title} item={item} isLast={i === topItems.length - 1} />
+            ))}
+          </div>
+          <DashedLine
+            orientation="horizontal"
+            className="max-w-7xl scale-x-110"
+          />
+
+          <div className="relative grid max-w-7xl md:grid-cols-3">
+            {bottomItems.map((item, i) => (
+              <Item
+                key={item.title}
+                item={item}
+                isLast={i === bottomItems.length - 1}
+                className="md:pb-0"
+              />
+            ))}
+          </div>
+        </div>
+        <DashedLine
+          orientation="horizontal"
+          className="max-w-7xl scale-x-110"
+        />
+      </div>
+    </section>
+  );
+}
+
+interface ItemProps {
+  item: {
+    title: string;
+    description: string;
+    images: { src: string; alt: string; className?: string }[];
+    className?: string;
+    fade: string[];
+  };
+  isLast?: boolean;
+  className?: string;
+}
+
+const Item = ({ item, isLast, className }: ItemProps) => {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col px-0 py-6 md:px-6 md:py-8",
+        className,
+        item.className,
+      )}
+    >
+      <div className="title-container max-w-md text-start text-balance">
+        <h3 className="inline font-semibold">{item.title} </h3>
+        <span className="font-medium text-pretty text-muted-foreground">
+          {" "}
+          {item.description}
+        </span>
+      </div>
+
+      {item.fade.includes("bottom") && (
+        <div className="absolute inset-0 z-10 bg-linear-to-t from-background/80 via-transparent to-transparent md:hidden" />
+      )}
+      {item.images.length > 4 ? (
+        <div className="relative overflow-hidden">
+          <div className="flex flex-col gap-5">
+            <div className="flex translate-x-4 justify-end gap-5 rtl:-translate-x-4 rtl:justify-start">
+              {item.images.slice(0, 4).map((image) => (
+                <div
+                  key={image.alt}
+                  className="grid aspect-square size-16 place-items-center rounded-xl bg-muted/40 p-2 lg:size-20"
+                >
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="size-8 object-contain object-top-start lg:size-12"
+                  />
+                  <div className="absolute inset-y-0 end-0 z-10 w-16 bg-linear-to-s from-background/80 to-transparent" />
+                </div>
+              ))}
+            </div>
+            <div className="flex -translate-x-4 gap-5 rtl:translate-x-4">
+              {item.images.slice(4).map((image) => (
+                <div
+                  key={image.alt}
+                  className="grid aspect-square size-16 place-items-center rounded-xl bg-muted/40 lg:size-20"
+                >
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="size-8 object-contain object-top-start lg:size-12"
+                  />
+                  <div className="absolute inset-y-0 start-0 bottom-0 z-10 w-14 bg-linear-to-e from-background/80 to-transparent" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="image-container grid grid-cols-1 gap-4">
+          {item.images.map((image) => (
+            <img
+              key={image.alt}
+              src={image.src}
+              alt={image.alt}
+              className={cn(
+                "w-full overflow-hidden object-cover",
+                image.className,
+              )}
+            />
+          ))}
+        </div>
+      )}
+
+      {!isLast && (
+        <>
+          <DashedLine
+            orientation="vertical"
+            className="absolute top-0 end-0 max-md:hidden"
+          />
+          <DashedLine
+            orientation="horizontal"
+            className="absolute inset-x-0 bottom-0 md:hidden"
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+interface DashedLineProps {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+const DashedLine = ({
+  orientation = "horizontal",
+  className,
+}: DashedLineProps) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <div
+      className={cn(
+        "relative text-muted-foreground",
+        isHorizontal ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          isHorizontal
+            ? [
+                "h-px w-full",
+                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
+              ]
+            : [
+                "h-full w-px",
+                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
+                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
+              ],
+        )}
+      />
+    </div>
+  );
+};
+
+export { Feature172 };
diff --git a/blocks/feature173.tsx b/blocks/feature173.tsx
new file mode 100644
index 0000000..6fff2c3
--- /dev/null
+++ b/blocks/feature173.tsx
@@ -0,0 +1,69 @@
+import { Bell, Bug, Sparkles } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ITEMS = [
+  {
+    value: "فرایند هوشمند",
+    label: "اتوماسیون",
+    icon: Bug,
+  },
+  {
+    value: "گردش‌کار",
+    label: "صرفه‌جویی زمان",
+    icon: Bell,
+  },
+  {
+    value: "فرایند هوشمند",
+    label: "اتوماسیون",
+    icon: Sparkles,
+  },
+];
+
+interface Feature173Props {
+  className?: string;
+}
+
+const Feature173 = ({ className }: Feature173Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex gap-3 text-start max-md:flex-col">
+          <h2 className="flex-1 text-3xl leading-tight font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
+            فرایندها را استاندارد و سریع کنید
+          </h2>
+          <p className="flex-1 self-end text-lg font-medium text-pretty text-muted-foreground">
+            قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+          </p>
+        </div>
+
+        <div className="mt-8 grid gap-5 sm:grid-cols-2 md:mt-12 lg:mt-20 lg:grid-cols-3">
+          {ITEMS.map((metric) => (
+            <div
+              key={metric.label}
+              className="relative flex aspect-[3.5/2.6] flex-col justify-between overflow-hidden rounded-[24px] bg-linear-to-b from-muted to-[#D6E3DF] md:aspect-[3.8/5] dark:to-[#2A3633]"
+            >
+              <div className="p-8 pb-2">
+                <metric.icon className="size-10 fill-primary" />
+              </div>
+              <div className="p-6 text-start">
+                <div className="text-2xll font-semibold tracking-tight">
+                  {metric.value}
+                </div>
+                <div className="text-xl font-semibold tracking-tight">
+                  {metric.label}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-6 text-start text-sm text-muted-foreground">
+          فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature173 };
diff --git a/blocks/feature174.tsx b/blocks/feature174.tsx
new file mode 100644
index 0000000..f7bdc39
--- /dev/null
+++ b/blocks/feature174.tsx
@@ -0,0 +1,156 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type FadeDirection = "right" | "bottom" | "top";
+
+type ItemType = {
+  title: string;
+  description: string;
+  image: { src: string; alt: string; className: string };
+  fade: FadeDirection[];
+  containerClassName?: string;
+};
+
+const ITEMS: ItemType[] = [
+  {
+    title: "داشبورد سفارشی",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    containerClassName: "flex-1",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "گزارش عملکرد",
+      className:
+        "translate-x-6 rounded-be-none md:translate-x-10 lg:translate-x-20 rtl:-translate-x-6 rtl:md:-translate-x-10 rtl:lg:-translate-x-20",
+    },
+    fade: ["right"],
+  },
+  {
+    title: "فیلتر پیشرفته",
+    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      alt: "داشبورد تحلیل داده",
+      className:
+        "translate-x-6 md:translate-x-10 lg:translate-x-20 rtl:-translate-x-6 rtl:md:-translate-x-10 rtl:lg:-translate-x-20",
+    },
+    fade: ["right", "bottom"],
+  },
+  {
+    title: "نمودار روند",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    containerClassName:
+      "mb-10 translate-x-6 md:translate-x-10 rtl:-translate-x-6 rtl:md:-translate-x-10",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      alt: "نمودار شاخص کلیدی",
+      className: "",
+    },
+    fade: ["right", "top"],
+  },
+  {
+    title: "هشدار آستانه",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    containerClassName: "mx-10 my-6 aspect-280/83",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-4.svg",
+      alt: "گزارش عملکرد",
+      className: "",
+    },
+    fade: [],
+  },
+  {
+    title: "گزارش زمان‌بندی‌شده",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    containerClassName: "mb-10 mx-10 lg:mx-20 aspect-230/124",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-5.svg",
+      alt: "داشبورد تحلیل داده",
+      className: "",
+    },
+    fade: [],
+  },
+];
+
+interface Feature174Props {
+  className?: string;
+}
+
+const Feature174 = ({ className }: Feature174Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted py-32", className)}>
+      <div className="container">
+        <h2 className="text-center text-3xl font-semibold tracking-tight text-balance sm:text-xl md:text-2xll lg:text-2xll">
+          داده پراکنده را به تصمیم تبدیل کنید
+        </h2>
+
+        <div className="mt-8 grid grid-cols-1 gap-4 md:mt-12 md:max-h-[800px] md:grid-cols-6 md:grid-rows-5 lg:mt-20">
+          {ITEMS.map((item, i) => {
+            const gridClasses = {
+              0: "md:col-span-3 md:row-span-3",
+              1: "md:col-span-3 md:row-span-3 md:col-start-4",
+              2: "md:col-span-2 md:row-span-2 md:row-start-4",
+              3: "md:col-span-2 md:row-span-2 md:col-start-3 md:row-start-4",
+              4: "md:col-span-2 md:row-span-2 md:col-start-5 md:row-start-4",
+            }[i];
+            return <Item key={item.title} {...item} className={gridClasses} />;
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const Item = ({
+  title,
+  description,
+  image,
+  fade = [],
+  className,
+  containerClassName,
+}: ItemType & { className?: string }) => {
+  return (
+    <Card
+      className={cn(
+        "relative flex max-h-[400px] flex-col overflow-hidden border-none px-0 text-lg shadow-none md:max-h-none",
+        className,
+      )}
+    >
+      <CardHeader className="mb-2 text-start">
+        <h3 className="inline leading-tight font-semibold text-balance">
+          {title}{" "}
+          <span className="font-medium text-pretty text-muted-foreground">
+            {description}
+          </span>
+        </h3>
+      </CardHeader>
+
+      <CardContent
+        className={cn("relative flex overflow-hidden p-0", containerClassName)}
+      >
+        {fade.includes("right") && (
+          <div className="absolute inset-0 z-10 bg-linear-to-e from-transparent via-transparent to-background" />
+        )}
+        {fade.includes("bottom") && (
+          <div className="absolute inset-0 z-10 bg-linear-to-b from-transparent via-transparent to-background" />
+        )}
+        {fade.includes("top") && (
+          <div className="absolute inset-0 z-10 bg-linear-to-t from-transparent via-transparent to-background" />
+        )}
+        <img
+          src={image.src}
+          alt={image.alt}
+          className={cn(
+            "flex-1 rounded-xl border object-cover",
+            image.className,
+          )}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+
+export { Feature174 };
diff --git a/blocks/feature175.tsx b/blocks/feature175.tsx
new file mode 100644
index 0000000..5315643
--- /dev/null
+++ b/blocks/feature175.tsx
@@ -0,0 +1,142 @@
+import type { LucideIcon } from "lucide-react";
+import { Blend, ChartNoAxesColumn, CircleDot, Diamond } from "lucide-react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+type FeatureContent = {
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  className?: string;
+};
+
+const MAINLINE_DESCRIPTION =
+  "پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.";
+
+const FEATURES: Array<{
+  title: string;
+  description: string;
+  content: FeatureContent;
+  icon: LucideIcon;
+}> = [
+  {
+    title: "تاریخچه مشتری",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    content: {
+      title: "صندوق یکپارچه",
+      description: MAINLINE_DESCRIPTION,
+      image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      imageAlt: "مدیریت تیکت",
+    },
+    icon: CircleDot,
+  },
+  {
+    title: "اولویت‌بندی تیکت",
+    description: "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    content: {
+      title: "پایگاه دانش",
+      description: MAINLINE_DESCRIPTION,
+      image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      imageAlt: "داشبورد رضایت",
+    },
+    icon: Blend,
+  },
+  {
+    title: "پاسخ آماده",
+    description: "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+    content: {
+      title: "SLA هوشمند",
+      description: MAINLINE_DESCRIPTION,
+      image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      imageAlt: "مرکز پشتیبانی مشتری",
+    },
+    icon: Diamond,
+  },
+  {
+    title: "نظرسنجی رضایت",
+    description: "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
+    content: {
+      title: "تخصیص خودکار",
+      description: MAINLINE_DESCRIPTION,
+      image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+      imageAlt: "مدیریت تیکت",
+    },
+    icon: ChartNoAxesColumn,
+  },
+];
+
+interface Feature175Props {
+  className?: string;
+}
+
+const Feature175 = ({ className }: Feature175Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex gap-3 text-right max-md:flex-col">
+          <h2 className="flex-1 text-3xl leading-tight font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
+            زمان حل مسئله را کوتاه کنید
+          </h2>
+          <p className="flex-1 self-end text-lg font-medium text-pretty text-muted-foreground">
+            رضایت مشتری و زمان حل را پیگیری کنید تا نقاط ضعف فرایند پشتیبانی را بهبود دهید.
+          </p>
+        </div>
+
+        <Tabs
+          dir="rtl"
+          defaultValue={FEATURES[0].title}
+          orientation="vertical"
+          className="border-muted2 mt-8 grid grid-cols-1 gap-4 rounded-xl border p-4 md:mt-12 lg:mt-20 lg:grid-cols-4"
+        >
+          <TabsList className="flex h-auto w-full flex-col justify-start rounded-xl bg-muted p-1.5">
+            {FEATURES.map((feature) => (
+              <TabsTrigger
+                key={feature.title}
+                value={feature.title}
+                className="w-full justify-start rounded-lg px-4 py-3 text-right whitespace-normal text-foreground/80 transition-colors duration-300 data-[state=active]:text-foreground data-[state=active]:shadow-xl lg:px-6 lg:py-4 dark:text-muted-foreground dark:data-[state=active]:text-foreground"
+              >
+                <div className="text-right">
+                  <feature.icon className="size-7 md:size-8 lg:size-9" />
+                  <h3 className="mt-3 font-semibold">{feature.title}</h3>
+                  <p className="mt-1 text-right text-sm text-pretty text-muted-foreground">
+                    {feature.description}
+                  </p>
+                </div>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          {FEATURES.map((feature) => (
+            <TabsContent
+              className={cn(
+                "col-span-1 m-0 overflow-hidden rounded-xl bg-background lg:col-span-3",
+                feature.content.className,
+              )}
+              key={feature.title}
+              value={feature.title}
+            >
+              <div className="max-w-2xl pb-4 text-right text-balance">
+                <h4 className="inline font-semibold">
+                  {feature.content.title}{" "}
+                </h4>
+                <span className="mt-2 font-medium text-pretty text-muted-foreground">
+                  {feature.content.description}
+                </span>
+              </div>
+              <img
+                src={feature.content.image}
+                alt={feature.content.imageAlt}
+                className="h-[420px] w-full rounded-lg object-cover lg:h-[512px] lg:flex-1"
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature175 };
diff --git a/blocks/feature176.tsx b/blocks/feature176.tsx
new file mode 100644
index 0000000..ffe717d
--- /dev/null
+++ b/blocks/feature176.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import {
+  ArrowUp,
+  ArrowUpRight,
+  ChartCandlestick,
+  ChartNoAxesColumnIncreasing,
+  Share,
+  X,
+} from "lucide-react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { ChartConfig } from "@/components/ui/chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+const chartData = [
+  { month: "اتوماسیون AI", desktop: 40, mobile: 30 },
+  { month: "دستیار کسب‌وکار", desktop: 60, mobile: 30 },
+  { month: "هوش مصنوعی", desktop: 70, mobile: 35 },
+  { month: "پیشنهاد هوشمند", desktop: 50, mobile: 25 },
+  { month: "مه", desktop: 40, mobile: 20 },
+  { month: "اتوماسیون AI", desktop: 30, mobile: 15 },
+  { month: "دستیار کسب‌وکار", desktop: 70, mobile: 35 },
+  { month: "هوش مصنوعی", desktop: 50, mobile: 25 },
+  { month: "مه", desktop: 40, mobile: 20 },
+  { month: "پیشنهاد هوشمند", desktop: 30, mobile: 15 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "اتوماسیون AI",
+  },
+  mobile: {
+    label: "دستیار کسب‌وکار",
+  },
+} satisfies ChartConfig;
+
+interface Feature176Props {
+  className?: string;
+}
+
+const Feature176 = ({ className }: Feature176Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
+      <div className="absolute inset-0">
+        <div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_0.5px,transparent_0.5px)] bg-size-[16px_16px] opacity-20" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,hsl(var(--background))_70%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_left,hsl(var(--muted-foreground)/10)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground)/10)_1px,transparent_1px)] mask-[radial-gradient(circle_at_center,transparent_50%,hsl(var(--background))_100%)] bg-size-[32px_32px] opacity-20" />
+      </div>
+      <div className="relative z-10 container mx-auto px-4">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          <div className="flex h-fit flex-col gap-4 rounded-lg bg-background/50 p-4">
+            <div className="flex flex-row items-center gap-x-2 rounded-lg border bg-card p-4 shadow-sm">
+              <ChartNoAxesColumnIncreasing className="size-6" />
+              <h1 className="truncate text-xl font-bold sm:text-xl">
+                با هوش مصنوعی سریع‌تر تصمیم بگیرید
+              </h1>
+              <span className="ms-auto shrink-0 font-mono text-sm text-muted-foreground">
+                Data/logs/3201927
+              </span>
+            </div>
+
+            <div className="rounded-lg border bg-card p-4 text-start shadow-sm">
+              <div className="flex flex-row items-center">
+                <h2 className="font-semibold">کارهای تکراری را به AI بسپارید</h2>
+                <Badge className="ms-auto bg-green-300 text-green-600 hover:bg-green-300/80">
+                  پیشنهادهایی که واقعاً مفیدند
+                </Badge>
+              </div>
+              <div className="my-4">
+                <span className="text-xs text-pretty text-muted-foreground">
+                  هوش مصنوعی
+                </span>
+              </div>
+              <div className="flex flex-row items-center">
+                <h2 className="font-semibold">داده را به بینش عملی تبدیل کنید</h2>
+              </div>
+              <div className="my-4 flex flex-row flex-wrap items-center gap-3">
+                <Badge variant="secondary">تیم را با دستیار هوشمند تقویت کنید</Badge>
+                <Badge variant="secondary">پیشنهاد هوشمند</Badge>
+                <Badge variant="secondary">اتوماسیون AI</Badge>
+              </div>
+              <div>
+                <div className="flex flex-row items-center">
+                  <h2 className="font-semibold">فرایندها را با AI بهینه کنید</h2>
+                  <Progress
+                    value={60}
+                    className="ms-auto max-w-32 rounded-sm"
+                  />
+                </div>
+
+                <div className="my-4 space-y-2">
+                  <Skeleton className="h-1 w-full" />
+                  <Skeleton className="h-1 w-full" />
+                  <Skeleton className="h-1 w-full" />
+                </div>
+              </div>
+              <div className="mt-12 mb-4 flex items-center justify-between bg-card">
+                <div className="flex gap-4">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="border-success text-success hover:bg-success/10"
+                  >
+                    دستیار کسب‌وکار
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="border-destructive text-destructive hover:bg-destructive/10 hover:text-red-600"
+                  >
+                    هوش مصنوعی
+                  </Button>
+                </div>
+
+                <div className="flex gap-2">
+                  <Button size="icon" variant="outline" className="size-8">
+                    <X className="size-4" />
+                  </Button>
+                  <Button size="icon" variant="outline" className="size-8">
+                    <Share className="size-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div className="mt-24 flex flex-col gap-4 rounded-lg bg-background/50 p-4">
+              <div className="flex flex-row items-center gap-x-2 rounded-lg border bg-card p-4 shadow-sm">
+                <ChartNoAxesColumnIncreasing className="size-6" />
+                <h1 className="truncate text-xl font-bold sm:text-xl">
+                  با هوش مصنوعی سریع‌تر تصمیم بگیرید
+                </h1>
+                <span className="ms-auto shrink-0 font-mono text-sm text-muted-foreground">
+                  Data/logs/182620
+                </span>
+              </div>
+
+              <Card>
+                <CardHeader className="flex flex-row items-center text-start">
+                  <CardTitle className="text-xl">پیشنهاد هوشمند</CardTitle>
+                  <CardDescription className="ms-auto">
+                    <Badge className="bg-green-300 text-green-600 hover:bg-green-300/80">
+                      اتوماسیون AI
+                    </Badge>
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ChartContainer
+                    config={chartConfig}
+                    className="h-[196px] w-full"
+                  >
+                    <BarChart accessibilityLayer data={chartData}>
+                      <CartesianGrid vertical={false} />
+                      <XAxis
+                        dataKey="month"
+                        tickLine={false}
+                        tickMargin={10}
+                        axisLine={false}
+                        tickFormatter={(value) => String(value).slice(0, 3)}
+                      />
+                      <ChartTooltip
+                        cursor={false}
+                        content={<ChartTooltipContent indicator="dashed" />}
+                      />
+                      <Bar dataKey="desktop" radius={4} />
+                      <Bar dataKey="mobile" radius={4} />
+                    </BarChart>
+                  </ChartContainer>
+                </CardContent>
+              </Card>
+
+              <div className="mt-4 flex flex-col rounded-lg border bg-background/50 p-4 text-start shadow-sm">
+                <div className="flex flex-row items-center">
+                  <ChartCandlestick className="size-6 text-foreground/60" />
+                  <span className="ms-4 text-sm text-muted-foreground">
+                    مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+                  </span>
+                </div>
+                <div className="mt-4 grid gap-4 md:grid-cols-3">
+                  <div className="rounded-lg border bg-card p-4 shadow-sm">
+                    <div className="flex items-start justify-between">
+                      <h2 className="text-3xl font-bold">کارهای تکراری را به AI بسپارید</h2>
+                      <ArrowUpRight className="size-6 text-success rtl:rotate-180" />
+                    </div>
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم می‌کند و کیفیت خروجی را بالا می‌برد.
+                    </p>
+                  </div>
+
+                  <div className="rounded-lg border bg-card p-4 shadow-sm">
+                    <div className="flex items-start justify-between">
+                      <h2 className="text-3xl font-bold">پیشنهادهایی که واقعاً مفیدند</h2>
+                      <ArrowUpRight className="size-6 text-success rtl:rotate-180" />
+                    </div>
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      سیستم با داده سازمان شما یاد می‌گیرد و هر بار پیشنهادهای دقیق‌تری برای بهبود نتیجه ارائه می‌دهد.
+                    </p>
+                  </div>
+
+                  <div className="rounded-lg border bg-card p-4 shadow-sm">
+                    <div className="flex items-start justify-between">
+                      <h2 className="text-3xl font-bold">داده را به بینش عملی تبدیل کنید</h2>
+                      <ArrowUp className="size-6 text-success" />
+                    </div>
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature176 };
diff --git a/blocks/feature18.tsx b/blocks/feature18.tsx
new file mode 100644
index 0000000..71de794
--- /dev/null
+++ b/blocks/feature18.tsx
@@ -0,0 +1,105 @@
+import {
+  Blocks,
+  ChevronRight,
+  Infinity as InfinityIcon,
+  Laptop,
+  ListEnd,
+  Zap,
+  ZoomIn,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "تاریخچه مشتری",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    icon: <ZoomIn className="size-6" />,
+    link: "#",
+  },
+  {
+    title: "صندوق یکپارچه",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    icon: <Blocks className="size-6" />,
+    link: "#",
+  },
+  {
+    title: "اولویت‌بندی تیکت",
+    description:
+      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+    icon: <Laptop className="size-6" />,
+    link: "#",
+  },
+  {
+    title: "پایگاه دانش",
+    description:
+      "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
+    icon: <ListEnd className="size-6" />,
+    link: "#",
+  },
+  {
+    title: "پاسخ آماده",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    icon: <Zap className="size-6" />,
+    link: "#",
+  },
+  {
+    title: "SLA هوشمند",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    icon: <InfinityIcon className="size-6" />,
+    link: "#",
+  },
+];
+
+interface Feature18Props {
+  className?: string;
+}
+
+const Feature18 = ({ className }: Feature18Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative py-32 before:absolute before:inset-0 before:bg-primary/10 before:[mask-image:url('/block-media/shadcnblocks/block/patterns/waves.svg')] before:[mask-size:64px_32px] before:[mask-repeat:repeat]",
+        className,
+      )}
+    >
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-transparent to-background"></div>
+      <div className="relative container">
+        <h2 className="mb-8 max-w-xl text-xl font-semibold text-balance lg:text-xl">
+          زمان حل مسئله را کوتاه کنید
+        </h2>
+        <div className="z-30 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className="flex flex-col gap-10 rounded-lg border bg-background p-8"
+            >
+              <div>
+                {feature.icon}
+                <h3 className="mt-6 mb-2 font-medium">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+              <a
+                href={feature.link}
+                className="flex items-center gap-2 text-sm font-medium"
+              >
+                بیشتر بدانید
+                <ChevronRight className="size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature18 };
diff --git a/blocks/feature180.tsx b/blocks/feature180.tsx
new file mode 100644
index 0000000..946ea63
--- /dev/null
+++ b/blocks/feature180.tsx
@@ -0,0 +1,113 @@
+import {
+  BarChart,
+  Bell,
+  Bot,
+  Check,
+  List,
+  MessageCircleOff,
+  MessageSquare,
+  Target,
+  Users,
+  X,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const withoutItems = [
+  {
+    icon: Users,
+    text: "فیلتر بر اساس مسئول",
+  },
+  {
+    icon: MessageSquare,
+    text: "پیوست چندرسانه‌ای",
+  },
+  {
+    icon: MessageCircleOff,
+    text: "قالب پروژه آماده",
+  },
+  {
+    icon: List,
+    text: "اولویت‌بندی کار",
+  },
+];
+
+const withItems = [
+  {
+    icon: Target,
+    text: "گزارش بار کاری",
+  },
+  {
+    icon: Bot,
+    text: "اعلان تغییر وضعیت",
+  },
+  {
+    icon: Bell,
+    text: "فیلتر بر اساس مسئول",
+  },
+  {
+    icon: BarChart,
+    text: "پیوست چندرسانه‌ای",
+  },
+];
+
+interface Feature180Props {
+  className?: string;
+}
+
+const Feature180 = ({ className }: Feature180Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-xl flex-col items-center gap-5 pb-20 text-center">
+          <Badge variant="outline">کار گروهی</Badge>
+          <h1 className="text-3xl font-medium text-pretty md:text-2xll">
+            همکاری از راه دور را ساده کنید
+          </h1>
+          <p className="text-pretty text-muted-foreground">
+            هر عضو بداند چه زمانی چه کاری دارد
+          </p>
+        </div>
+        <div className="grid gap-8 md:grid-cols-2 md:gap-5">
+          <div className="flex flex-col items-center gap-5 md:gap-9">
+            <div className="flex items-center gap-3">
+              <X className="h-6 text-red-400" />
+              <p className="text-xl font-medium">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
+            </div>
+            <div className="h-full w-full rounded-md border p-9">
+              <ul className="flex flex-col gap-8 text-start font-medium text-primary/70">
+                {withoutItems.map((item) => (
+                  <li key={item.text} className="flex items-start gap-4">
+                    <item.icon className="h-6 shrink-0" />
+                    <p className="text-pretty">{item.text}</p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+          <div className="flex flex-col items-center gap-5 md:gap-9">
+            <div className="flex items-center gap-3">
+              <Check className="h-6 text-lime-400" />
+              <p className="text-xl font-medium">وظایف، فایل‌ها و گفتگوها در یک محیط کاری متمرکز می‌شود. تیم‌ها کمتر در پیگیری وضعیت وقت می‌گذارند و بیشتر روی تحویل تمرکز می‌کنند.</p>
+            </div>
+            <div className="w-full rounded-md bg-linear-to-br from-primary via-primary/20 via-30% to-primary p-0.5">
+              <div className="rounded-sm bg-background p-9">
+                <ul className="flex flex-col gap-8 text-start font-medium">
+                  {withItems.map((item) => (
+                    <li key={item.text} className="flex items-start gap-4">
+                      <item.icon className="h-6 shrink-0" />
+                      <p className="text-pretty">{item.text}</p>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature180 };
diff --git a/blocks/feature181.tsx b/blocks/feature181.tsx
new file mode 100644
index 0000000..31e305e
--- /dev/null
+++ b/blocks/feature181.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import {
+  ArrowRight,
+  BadgeCheck,
+  Clock,
+  Pyramid,
+  Sparkle,
+  Zap,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  title: string;
+  description: string;
+  image: string;
+  icon: React.ReactNode;
+}
+
+const DATA: DataItem[] = [
+  {
+    title: "موجودی انبار",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    icon: <Zap className="size-5" />,
+  },
+  {
+    title: "بازگشت مشتری",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    icon: <Pyramid className="size-5" />,
+  },
+  {
+    title: "صفحه فرود",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    icon: <Sparkle className="size-5" />,
+  },
+  {
+    title: "گزارش فروش",
+    description:
+      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    icon: <BadgeCheck className="size-5" />,
+  },
+];
+
+interface Feature181Props {
+  className?: string;
+}
+
+const Feature181 = ({ className }: Feature181Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-start">
+          <h2 className="mb-6 text-3xl font-semibold text-balance lg:text-xl">
+            فروش آنلاین را مقیاس‌پذیر کنید
+          </h2>
+          <Button className="me-4 rounded-full">
+            شروع کنید
+            <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+          </Button>
+        </div>
+
+        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-4">
+          {DATA.map((feature, index) => (
+            <div
+              key={feature.title}
+              className="mt-0 flex flex-col border-s px-6 sm:mt-4 md:mt-6"
+            >
+              <div className="relative">
+                <h1 className="mb-16 bg-linear-to-e from-white to-transparent bg-clip-text text-9xl">
+                  {(index + 1).toLocaleString("fa-IR", {
+                    minimumIntegerDigits: 2,
+                  })}
+                </h1>
+                <div className="absolute inset-0 bg-linear-to-e from-white to-transparent opacity-100" />
+              </div>
+
+              <p className="text-md mt-4 mb-2 font-semibold">{feature.title}</p>
+              <p className="text-md mb-6 text-pretty text-muted-foreground">
+                {feature.description}
+              </p>
+              <Badge variant="outline" className="w-fit gap-2 py-2">
+                <Clock className="size-4" />
+                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+              </Badge>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature181 };
diff --git a/blocks/feature182.tsx b/blocks/feature182.tsx
new file mode 100644
index 0000000..673d018
--- /dev/null
+++ b/blocks/feature182.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { ArrowRight, BadgeCheck, Pyramid, Sparkle, Zap } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  icon: React.ReactNode;
+}
+
+const DATA: DataItem[] = [
+  {
+    title: "بهینه‌سازی محتوا",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد SEO",
+    icon: <Zap className="size-6" />,
+  },
+  {
+    title: "تحلیل رقیب",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "تحلیل کلمات کلیدی",
+    icon: <Pyramid className="size-6" />,
+  },
+  {
+    title: "لینک داخلی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "گزارش رتبه جستجو",
+    icon: <Sparkle className="size-6" />,
+  },
+];
+
+interface Feature182Props {
+  className?: string;
+}
+
+const Feature182 = ({ className }: Feature182Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <h2 className="mb-6 text-xl font-semibold text-balance sm:mb-9 sm:text-3xl lg:mb-14 lg:text-xl">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h2>
+          <div className="flex flex-col justify-center gap-4 sm:flex-row">
+            <Button className="w-full gap-2 sm:w-auto">
+              ترافیک ارگانیک
+              <ArrowRight className="size-4 rtl:rotate-180" />
+            </Button>
+            <Button variant="outline" className="w-full gap-2 shadow-sm sm:w-auto">
+              شروع کنید
+              <BadgeCheck className="size-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="mt-12 grid gap-6 sm:gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+          {DATA.map((feature) => (
+            <div key={feature.title} className="flex flex-col text-start">
+              <img
+                src={feature.image}
+                alt={feature.imageAlt}
+                className="h-64 w-full rounded-lg object-cover"
+              />
+              <p className="mt-4 mb-2 text-xl font-bold">{feature.title}</p>
+              <p className="mb-6 text-sm text-pretty text-muted-foreground">
+                {feature.description}
+              </p>
+              <div className="w-fit rounded-lg border p-2 shadow-sm">
+                {feature.icon}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature182 };
diff --git a/blocks/feature183.tsx b/blocks/feature183.tsx
new file mode 100644
index 0000000..b03526d
--- /dev/null
+++ b/blocks/feature183.tsx
@@ -0,0 +1,181 @@
+import { Plus } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  title: string;
+  value: string;
+  description: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    title: "خرید و تأمین",
+    value: "یکپارچگی",
+    description: "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+  },
+  {
+    title: "فاکتور و پرداخت",
+    value: "ERP",
+    description: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+  },
+  {
+    title: "ERP",
+    value: "۹۵",
+    description: "ERP",
+  },
+];
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  description: string;
+  className?: string;
+}
+
+const StatCard = ({ title, value, description, className }: StatCardProps) => {
+  return (
+    <div className={cn("flex max-w-52 flex-col gap-4 text-start", className)}>
+      <span className="font-medium">{title}</span>
+      <div className="text-2xll font-bold">
+        {value}
+        <span className="text-muted-foreground">+</span>
+      </div>
+      <p className="text-pretty text-muted-foreground">{description}</p>
+    </div>
+  );
+};
+
+interface Feature183Props {
+  className?: string;
+}
+
+const Feature183 = ({ className }: Feature183Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="w-full shrink-0">
+          <div className="relative mx-auto h-96 w-full rounded-3xl bg-muted bg-cover bg-center bg-no-repeat sm:h-96">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="100%"
+              height="100%"
+              viewBox="0 0 4200 1080"
+              fill="none"
+              className="absolute inset-0 z-0 mask-[linear-gradient(to_bottom,transparent,white,transparent,transparent)] opacity-50"
+              aria-hidden="true"
+            >
+              <g clipPath="url(#clip0_4_5)">
+                <rect width="100%" height="1080" fill="none" />
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <line
+                    key={`horizontal-${index}`}
+                    y1={(index + 1) * 200 - 0.5}
+                    x2="100%"
+                    y2={(index + 1) * 200 - 0.5}
+                    className="stroke-muted-foreground"
+                    strokeWidth="1"
+                  />
+                ))}
+                {Array.from({ length: 4000 }).map((_, index) => (
+                  <line
+                    key={`vertical-${index}`}
+                    x1={(index + 1) * 200 - 0.5}
+                    y1="0"
+                    x2={(index + 1) * 200 - 0.5}
+                    y2="1080"
+                    className="stroke-muted-foreground"
+                    strokeWidth="1"
+                  />
+                ))}
+              </g>
+              <defs>
+                <clipPath id="clip0_4_5">
+                  <rect width="100%" height="1080" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+
+            <div className="absolute -top-32 start-1/2 bottom-0 z-10 mt-12 w-[12.5rem] -translate-x-1/2 transform overflow-hidden sm:w-[18.75rem]">
+              <img
+                src="/block-media/shadcnblocks/block/hero108/iphone.png"
+                alt="گزارش مالی یکپارچه"
+                className="absolute top-0 z-20 block w-full"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
+                alt="داشبورد ERP"
+                className="absolute top-0 block w-full rounded-[50px]"
+              />
+            </div>
+
+            <div className="absolute top-12 end-1/4 z-20 hidden w-60 transform rounded-2xl border bg-background p-4 text-start shadow-md md:-rotate-12 lg:block">
+              <div className="flex flex-row">
+                <h3 className="text-lg font-semibold">گردش تأیید</h3>
+                <Badge variant="secondary" className="ms-auto rounded-sm">
+                  ERP
+                </Badge>
+              </div>
+              <div className="mt-4">
+                <p className="text-sm text-pretty text-muted-foreground">
+                  گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+                </p>
+              </div>
+            </div>
+
+            <div className="absolute top-12 start-1/4 z-20 hidden w-60 transform rounded-lg border bg-background p-4 text-start shadow-md lg:block">
+              <div className="flex flex-row border-b pb-4">
+                <h3 className="text-lg font-semibold">ERP</h3>
+                <div className="relative ms-auto">
+                  <Badge variant="secondary" className="rounded-sm px-1">
+                    <Plus className="size-4" />
+                  </Badge>
+                </div>
+              </div>
+              <div className="mt-4 flex flex-col gap-4">
+                <Select>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="عملیات" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="category1">ERP</SelectItem>
+                    <SelectItem value="category2">ERP</SelectItem>
+                    <SelectItem value="category3">ERP</SelectItem>
+                  </SelectContent>
+                </Select>
+                <div className="flex flex-col gap-2">
+                  <Select>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="ERP" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="sm">ERP</SelectItem>
+                      <SelectItem value="md">ERP</SelectItem>
+                      <SelectItem value="xl">مدیریت سازمان</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-14 flex flex-col items-center justify-center gap-x-24 gap-y-8 lg:flex-row">
+          {DATA.map((item) => (
+            <StatCard key={item.title} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature183 };
diff --git a/blocks/feature184.tsx b/blocks/feature184.tsx
new file mode 100644
index 0000000..ce50f86
--- /dev/null
+++ b/blocks/feature184.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { ChevronUp, Flag, Pyramid, Users, Workflow, Zap } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    title: "گزارش‌ساز",
+    description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "گزارش‌ساز",
+    icon: <Workflow />,
+  },
+  {
+    title: "Pivot تعاملی",
+    description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "تحلیل داده سازمان",
+    icon: <Users />,
+  },
+  {
+    title: "داشبورد مدیریتی",
+    description: "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "داشبورد هوش تجاری",
+    icon: <Flag />,
+  },
+];
+
+interface Feature184Props {
+  className?: string;
+}
+
+const Feature184 = ({ className }: Feature184Props) => {
+  const [activeTab, setActiveTab] = useState(FEATURES[0].title);
+
+  const activeFeature = FEATURES.find((f) => f.title === activeTab);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-20 md:py-32", className)}>
+      <div className="container mx-auto flex flex-col items-center px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 max-w-3xl text-center">
+          <h2 className="text-xl leading-tight font-semibold tracking-tight text-balance sm:text-3xl md:text-xl lg:text-2xll">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h2>
+        </div>
+
+        <div className="grid gap-8 lg:grid-cols-2">
+          <div className="relative h-[300px] overflow-hidden rounded-xl sm:h-[420px]">
+            <img
+              src={activeFeature?.image}
+              alt={activeFeature?.imageAlt ?? activeTab}
+              className="h-full w-full object-cover"
+            />
+          </div>
+
+          <div className="relative flex flex-col justify-between">
+            <Tabs
+              defaultValue={FEATURES[0].title}
+              onValueChange={(value) => setActiveTab(value)}
+              className="h-full w-full"
+            >
+              <TabsList className="flex !h-full w-full flex-col gap-4 rounded-xl border-none bg-transparent p-0">
+                {FEATURES.map((feature) => (
+                  <TabsTrigger
+                    key={feature.title}
+                    value={feature.title}
+                    className={cn(
+                      "group relative flex h-full w-full flex-col items-start rounded-xl p-6 text-start transition-all",
+                      "border border-border/50 bg-card hover:border-primary/50",
+                      "data-[state=active]:z-20 data-[state=active]:scale-[1.02] data-[state=active]:border-primary data-[state=active]:bg-primary/95 data-[state=active]:shadow-lg",
+                    )}
+                  >
+                    <div className="flex w-full items-center justify-between">
+                      <div className="flex items-center gap-6">
+                        <div
+                          className={cn(
+                            "rounded-lg bg-muted p-4 transition-colors",
+                            "group-data-[state=active]:bg-background",
+                          )}
+                        >
+                          {feature.icon}
+                        </div>
+                        <div className="flex flex-col gap-2 text-start">
+                          <h3
+                            className={cn(
+                              "text-xl font-medium",
+                              "group-data-[state=active]:text-primary-foreground",
+                            )}
+                          >
+                            {feature.title}
+                          </h3>
+                          <span
+                            className={cn(
+                              "text-sm text-muted-foreground transition-colors",
+                              "group-data-[state=active]:text-primary-foreground/90",
+                            )}
+                          >
+                            {feature.description}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="ps-8">
+                        <ChevronUp
+                          className={cn(
+                            "size-5 text-muted-foreground transition-all duration-300",
+                            "group-data-[state=active]:rotate-180 group-data-[state=active]:text-primary-foreground",
+                          )}
+                        />
+                      </div>
+                    </div>
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          </div>
+        </div>
+
+        <div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
+          <Button className="w-full gap-2 sm:w-auto">
+            <Zap className="size-4" />
+            شروع کنید
+          </Button>
+          <Button variant="outline" className="w-full gap-2 sm:w-auto">
+            <Pyramid className="size-4" />
+            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature184 };
diff --git a/blocks/feature186.tsx b/blocks/feature186.tsx
new file mode 100644
index 0000000..900dbd8
--- /dev/null
+++ b/blocks/feature186.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { Database, LockKeyhole, Sparkles } from "lucide-react";
+import React, { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: string;
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  icon: React.ReactNode;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: "feature-1",
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+    icon: <Sparkles className="h-6 w-6 text-white" />,
+  },
+  {
+    id: "feature-2",
+    title: "اتوماسیون مراحل فروش",
+    description: "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+    icon: <Database className="h-6 w-6 text-white" />,
+  },
+  {
+    id: "feature-3",
+    title: "پیش‌بینی درآمد",
+    description:
+      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+    icon: <LockKeyhole className="h-6 w-6 text-white" />,
+  },
+];
+
+interface Feature186Props {
+  className?: string;
+}
+
+const Feature186 = ({ className }: Feature186Props) => {
+  const [selection, setSelection] = useState(DATA[0].id);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative py-16 md:py-32", className)}>
+      <div
+        className="absolute top-0 right-0 left-0 z-0 h-[800px] w-screen [mask-image:radial-gradient(ellipse_at_center,white_20%,transparent_70%)] bg-repeat opacity-30"
+        style={{
+          backgroundImage:
+            "url('/block-media/shadcnblocks/block/patterns/architect.svg')",
+          backgroundSize: "60px",
+        }}
+      />
+      <div className="relative z-10 container">
+        <div className="text-right">
+          <h2 className="text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
+            هر سرنخ را تا قرارداد دنبال کنید
+          </h2>
+          <p className="mt-4 text-pretty text-muted-foreground md:text-lg">
+            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+          </p>
+
+          <div className="mt-4 lg:mt-8">
+            <Tabs dir="rtl" value={selection} onValueChange={setSelection}>
+              <div className="relative">
+                <div className="overflow-auto">
+                  <div
+                    dir="rtl"
+                    className="flex min-w-fit flex-col items-start overflow-y-hidden lg:mb-8"
+                  >
+                    <TabsList className="gap-4 bg-transparent">
+                      {DATA.map((feature) => (
+                        <TabsTrigger key={feature.id} value={feature.id}>
+                          {feature.title}
+                        </TabsTrigger>
+                      ))}
+                    </TabsList>
+                  </div>
+                  <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_left,hsl(var(--background))_0%,transparent_10%,transparent_90%,hsl(var(--background))_100%)] md:hidden" />
+                </div>
+              </div>
+
+              <div className="relative w-full overflow-hidden">
+                {DATA.map((feature) => (
+                  <TabsContent
+                    key={feature.id}
+                    value={feature.id}
+                    className="relative z-20"
+                  >
+                    <div className="aspect-3/2 w-full rounded-lg bg-accent p-6 md:p-14 md:px-24">
+                      <div className="max-w-full text-right md:max-w-md">
+                        <div className="flex size-12 items-center justify-center rounded-full bg-black">
+                          {feature.icon}
+                        </div>
+                        <div className="my-4 md:my-8">
+                          <h3 className="text-lg font-bold sm:text-xl lg:text-xl">
+                            {feature.title}
+                          </h3>
+                          <p className="text-base text-pretty text-muted-foreground sm:text-lg lg:text-xl">
+                            {feature.description}
+                          </p>
+                        </div>
+                      </div>
+                      <img
+                        src={feature.image}
+                        alt={feature.imageAlt}
+                        className="mt-4 h-full w-full rounded-lg object-cover object-center md:mt-0"
+                      />
+                    </div>
+                  </TabsContent>
+                ))}
+              </div>
+
+              <div className="flex justify-center py-3 md:hidden">
+                {DATA.map((feature) => (
+                  <Button
+                    key={feature.id}
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setSelection(feature.id);
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "size-2 rounded-full",
+                        feature.id === selection ? "bg-primary" : "bg-input",
+                      )}
+                    />
+                  </Button>
+                ))}
+              </div>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature186 };
diff --git a/blocks/feature187.tsx b/blocks/feature187.tsx
new file mode 100644
index 0000000..323dba3
--- /dev/null
+++ b/blocks/feature187.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+type DataItem = {
+  id: number;
+  title: string;
+  description: string;
+};
+
+const DATA: DataItem[] = [
+  {
+    id: 1,
+    title: "همکاری فروش و بازاریابی",
+    description:
+      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+  },
+  {
+    id: 2,
+    title: "اولویت‌بندی سرنخ",
+    description:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+  },
+  {
+    id: 3,
+    title: "قالب پیشنهاد فروش",
+    description:
+      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+  },
+];
+
+type StepItemProps = {
+  step: DataItem;
+  isLast: boolean;
+  className?: string;
+};
+
+const StepItem: React.FC<StepItemProps> = ({ step, isLast, className }) => {
+  return (
+    <div className={cn("max-lg:flex max-lg:gap-4", className)}>
+      <div className="relative lg:py-6">
+        <div
+          className={cn(
+            "absolute h-full w-1 -translate-x-1/2 translate-y-11 bg-muted/50 bg-linear-to-b max-lg:start-1/2 lg:top-1/2 lg:h-1 lg:w-full lg:translate-x-6 lg:-translate-y-1/2 lg:bg-linear-to-r",
+            "rtl:lg:-translate-x-6 rtl:lg:bg-linear-to-l",
+            isLast && "from-muted/50 to-background",
+          )}
+        />
+        <div className="relative z-0 grid size-11 place-content-center rounded-full border-4 bg-background">
+          <p className="text-lg font-bold">
+            {step.id.toLocaleString("fa-IR")}
+          </p>
+        </div>
+      </div>
+      <div className="max-lg:mt-2 text-start">
+        <p className="text-lg font-semibold">{step.title}</p>
+        <p className="mt-2 text-pretty text-muted-foreground">
+          {step.description}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+interface Feature187Props {
+  className?: string;
+}
+
+const Feature187 = ({ className }: Feature187Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div>
+          <h2 className="text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
+            پیش‌بینی درآمد را دقیق‌تر کنید
+          </h2>
+          <p className="mt-8 text-pretty text-muted-foreground md:text-lg">
+            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+          </p>
+        </div>
+        <div className="mt-12 grid gap-10 lg:grid-cols-3 lg:gap-6">
+          {DATA.map((step, index) => (
+            <StepItem
+              key={step.id}
+              step={step}
+              isLast={index === DATA.length - 1}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature187 };
diff --git a/blocks/feature188.tsx b/blocks/feature188.tsx
new file mode 100644
index 0000000..091b366
--- /dev/null
+++ b/blocks/feature188.tsx
@@ -0,0 +1,86 @@
+import { ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RESOURCES = [
+  {
+    title: "ردیابی UTM",
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    href: "#",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
+    imageAlt: "تحلیل عملکرد کمپین",
+  },
+  {
+    title: "گزارش ROI",
+    description:
+      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    href: "#",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
+    imageAlt: "نمودار ROI",
+  },
+  {
+    title: "مدیریت کمپین",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    href: "#",
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-8-wide.svg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+  },
+];
+
+interface Feature188Props {
+  className?: string;
+}
+
+const Feature188 = ({ className }: Feature188Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="text-center text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
+          کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+        </h2>
+
+        <div className="mx-auto mt-12 max-w-5xl rounded-2xl border">
+          {RESOURCES.map((resource, index) => (
+            <div
+              key={resource.title}
+              className={cn(index !== RESOURCES.length - 1 && "border-b")}
+            >
+              <a
+                href={resource.href}
+                className="flex flex-col p-4 md:flex-row md:items-center md:justify-between lg:p-6"
+              >
+                <div className="flex items-center">
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted p-2 lg:h-14 lg:w-14">
+                    <ArrowRight className="h-6 w-6 text-muted-foreground rtl:rotate-180" />
+                  </div>
+                  <div className="ms-6 text-start">
+                    <h3 className="text-lg font-semibold lg:text-xl">
+                      {resource.title}
+                    </h3>
+                    <p className="text-sm text-pretty text-muted-foreground lg:text-lg">
+                      {resource.description}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="mt-4 shrink-0 md:mt-0 md:w-60">
+                  <div className="aspect-w-16 aspect-h-9 rounded-lg bg-muted">
+                    <img
+                      src={resource.imageSrc}
+                      alt={resource.imageAlt}
+                      className="h-full w-full rounded-md object-cover"
+                    />
+                  </div>
+                </div>
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature188 };
diff --git a/blocks/feature189.tsx b/blocks/feature189.tsx
new file mode 100644
index 0000000..0365c68
--- /dev/null
+++ b/blocks/feature189.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    title: "لاگ اجرا",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+  },
+  {
+    title: "قالب آماده",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+  },
+  {
+    title: "اتصال ابزار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+  },
+];
+
+interface Feature189Props {
+  className?: string;
+}
+
+const Feature189 = ({ className }: Feature189Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-12 lg:grid-cols-2">
+          <div className="relative mb-8 lg:mb-0">
+            <div className="relative -top-12 z-10 mx-auto w-[50%] sm:w-[35%]">
+              <img
+                alt="سازنده گردش‌کار"
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                className="h-[200px] rounded-lg object-cover shadow-lg sm:h-[300px]"
+              />
+            </div>
+            <div className="absolute top-8 start-0 z-0 w-[50%] -rotate-12 rtl:rotate-12 sm:w-[35%]">
+              <img
+                alt="نمای اتوماسیون فرایند"
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                className="h-[200px] rounded-lg object-cover shadow-lg sm:h-[300px]"
+              />
+            </div>
+            <div className="absolute top-8 end-0 z-20 w-[50%] rotate-12 rtl:-rotate-12 sm:w-[35%]">
+              <img
+                alt="لاگ اجرای خودکار"
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                className="h-[200px] rounded-lg object-cover shadow-lg sm:h-[300px]"
+              />
+            </div>
+          </div>
+
+          <div className="max-w-xl text-start max-lg:mx-auto lg:ms-auto">
+            <h2 className="text-xl font-medium text-balance sm:text-3xl md:text-xl lg:max-w-[80%]">
+              فرایندها را استاندارد و سریع کنید
+            </h2>
+
+            <div className="mt-6 grid gap-6 sm:mt-10 sm:gap-10">
+              {FEATURES.map((feature) => (
+                <div key={feature.title} className="flex items-start gap-4">
+                  <div>
+                    <p className="font-semibold">{feature.title}</p>
+                    <p className="mt-1 text-sm text-pretty text-muted-foreground sm:text-base">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <Button
+              variant="secondary"
+              className="mt-6 flex items-center gap-1 sm:mt-10"
+            >
+              بیشتر بدانید
+              <ArrowRight className="size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature189 };
diff --git a/blocks/feature19.tsx b/blocks/feature19.tsx
new file mode 100644
index 0000000..3bef524
--- /dev/null
+++ b/blocks/feature19.tsx
@@ -0,0 +1,171 @@
+import { ArrowRight, CheckCircle2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const slides = [
+  {
+    id: 1,
+    tabName: "اتوماسیون AI",
+    title: "تحلیل احساس",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    features: [
+      "یادگیری از داده سازمان",
+      "پیشنهاد اقدام بعدی",
+      "خلاصه گزارش خودکار",
+      "تشخیص نیت کاربر",
+    ],
+    exploreLabel: "دستیار کسب‌وکار",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: 2,
+    tabName: "هوش مصنوعی",
+    title: "دستیار گفتگو",
+    description:
+      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    features: [
+      "اولویت‌بندی هوشمند",
+      "بهبود مستمر مدل",
+      "یادگیری از داده سازمان",
+      "پیشنهاد اقدام بعدی",
+    ],
+    exploreLabel: "پیشنهاد هوشمند",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: 3,
+    tabName: "اتوماسیون AI",
+    title: "خلاصه‌سازی هوشمند",
+    description:
+      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    features: [
+      "خلاصه گزارش خودکار",
+      "تشخیص نیت کاربر",
+      "اولویت‌بندی هوشمند",
+      "بهبود مستمر مدل",
+    ],
+    exploreLabel: "دستیار کسب‌وکار",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    id: 4,
+    tabName: "هوش مصنوعی",
+    title: "پیشنهاد پاسخ",
+    description:
+      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    features: [
+      "یادگیری از داده سازمان",
+      "پیشنهاد اقدام بعدی",
+      "خلاصه گزارش خودکار",
+      "تشخیص نیت کاربر",
+    ],
+    exploreLabel: "پیشنهاد هوشمند",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    id: 5,
+    tabName: "اتوماسیون AI",
+    title: "طبقه‌بندی خودکار",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    features: [
+      "اولویت‌بندی هوشمند",
+      "بهبود مستمر مدل",
+      "یادگیری از داده سازمان",
+      "پیشنهاد اقدام بعدی",
+    ],
+    exploreLabel: "دستیار کسب‌وکار",
+    link: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+];
+
+interface Feature19Props {
+  className?: string;
+}
+
+const Feature19 = ({ className }: Feature19Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
+          <h2 className="text-center text-3xl font-semibold lg:text-2xll">
+            با هوش مصنوعی سریع‌تر تصمیم بگیرید
+          </h2>
+          <p className="text-center text-balance text-muted-foreground lg:text-xl">
+            مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+          </p>
+        </div>
+        <div className="mt-12 flex justify-start">
+          <Tabs
+            dir="rtl"
+            defaultValue="1"
+            className="flex w-full max-w-5xl flex-col items-start gap-8 md:gap-12"
+          >
+            <div
+              dir="rtl"
+              className="flex w-full justify-start overflow-x-auto overflow-y-hidden"
+            >
+              <TabsList className="w-max whitespace-nowrap">
+                {slides.map((slide) => (
+                  <TabsTrigger key={slide.id} value={slide.id.toString()}>
+                    {slide.tabName}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+            {slides.map((slide) => (
+              <TabsContent
+                value={slide.id.toString()}
+                key={slide.id}
+                className="w-full"
+              >
+                <div
+                  dir="rtl"
+                  className="grid grid-cols-1 items-center gap-10 md:grid-cols-2"
+                >
+                  <div className="flex flex-col items-start text-right">
+                    <h2 className="mb-4 text-xl font-semibold lg:text-xl">
+                      {slide.title}
+                    </h2>
+                    <p className="text-muted-foreground lg:text-xl">
+                      {slide.description}
+                    </p>
+                    <ul className="mt-8 grid w-full grid-cols-1 gap-2 lg:grid-cols-2">
+                      {slide.features.map((feature) => (
+                        <li key={feature} className="flex items-center gap-2">
+                          <CheckCircle2 className="size-4 shrink-0" />
+                          <span className="font-medium">{feature}</span>
+                        </li>
+                      ))}
+                    </ul>
+                    <Button variant="outline" size="sm" className="mt-8" asChild>
+                      <a href={slide.link}>
+                        {slide.exploreLabel}
+                        <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+                      </a>
+                    </Button>
+                  </div>
+                  <img
+                    src={slide.image}
+                    alt={slide.title}
+                    className="order-first max-h-[400px] w-full rounded-lg object-cover md:order-0"
+                  />
+                </div>
+              </TabsContent>
+            ))}
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature19 };
diff --git a/blocks/feature190.tsx b/blocks/feature190.tsx
new file mode 100644
index 0000000..2ecb6bc
--- /dev/null
+++ b/blocks/feature190.tsx
@@ -0,0 +1,129 @@
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  id: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  imageAlt: string;
+}
+
+const DATA: Feature[] = [
+  {
+    id: "analytics-dashboard",
+    title: "گزارش زمان‌بندی‌شده",
+    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-1.svg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "team-collaboration",
+    title: "تحلیل کوHORT",
+    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-2.svg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "third-party-integrations",
+    title: "مقایسه دوره‌ای",
+    description: "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-3.svg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    id: "customizable-templates",
+    title: "خروجی گزارش",
+    description: "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-4.svg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "automated-workflows",
+    title: "داشبورد سفارشی",
+    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-5.svg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "data-security",
+    title: "فیلتر پیشرفته",
+    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-6.svg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    id: "customer-support",
+    title: "نمودار روند",
+    description: "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-3.svg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "mobile-app",
+    title: "هشدار آستانه",
+    description: "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-1.svg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "scalable-infrastructure",
+    title: "گزارش زمان‌بندی‌شده",
+    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    imageUrl: "/block-media/shadcnblocks/block/block-4.svg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+];
+
+interface Feature190Props {
+  className?: string;
+}
+
+const Feature190 = ({ className }: Feature190Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center text-center">
+          <h2 className="mb-4 text-xl font-semibold tracking-tight text-balance sm:text-2xll">
+            داده پراکنده را به تصمیم تبدیل کنید
+          </h2>
+          <p className="mb-8 max-w-3xl text-lg text-pretty text-muted-foreground sm:text-xl">
+            گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3">
+          {DATA.map((feature) => (
+            <Card
+              key={feature.id}
+              className="mt-6 flex items-center rounded-none border-0 border-b border-muted pb-6 shadow-none"
+            >
+              <a href="#" className="shrink-0 hover:opacity-70">
+                <img
+                  src={feature.imageUrl}
+                  alt={feature.imageAlt}
+                  className="me-4 h-16 w-16 rounded-md bg-muted object-contain p-2"
+                />
+              </a>
+              <div className="min-w-0 grow text-start">
+                <h3 className="text-md font-semibold">{feature.title}</h3>
+                <p className="mt-1 text-xs text-pretty text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-12 text-center">
+          <Button variant="secondary" size="lg">
+            داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature190 };
diff --git a/blocks/feature191.tsx b/blocks/feature191.tsx
new file mode 100644
index 0000000..0dd963d
--- /dev/null
+++ b/blocks/feature191.tsx
@@ -0,0 +1,102 @@
+import { Calendar } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: number;
+  number: string;
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: 1,
+    number: "۱",
+    title: "پاسخ آماده",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "مدیریت تیکت",
+  },
+  {
+    id: 2,
+    number: "۲",
+    title: "SLA هوشمند",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "داشبورد رضایت",
+  },
+  {
+    id: 3,
+    number: "۰۳",
+    title: "نظرسنجی رضایت",
+    description:
+      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "مرکز پشتیبانی مشتری",
+  },
+];
+
+interface Feature191Props {
+  className?: string;
+}
+
+const Feature191 = ({ className }: Feature191Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-accent py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center pb-4 text-center">
+          <div>
+            <span className="my-3 mb-4 flex items-center justify-center">
+              <Badge variant="outline" className="gap-2 bg-background px-3 py-1">
+                <Calendar className="h-4 w-4" />
+                <span className="text-xs">تیکت</span>
+              </Badge>
+            </span>
+          </div>
+          <h2 className="pb-3 text-xl font-semibold text-balance sm:text-3xl md:text-xl lg:text-2xll">
+            رضایت مشتری
+          </h2>
+          <p className="max-w-md text-sm text-pretty text-muted-foreground lg:max-w-2xl lg:text-lg">
+            پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+          </p>
+        </div>
+
+        <div className="mt-4 grid grid-cols-1 gap-4 px-4 sm:px-6 md:grid-cols-2 md:px-8 lg:grid-cols-3 lg:px-12">
+          {DATA.map((feature) => (
+            <div
+              key={feature.id}
+              className="grid grid-cols-1 rounded-2xl border bg-background shadow-sm"
+            >
+              <div className="p-6 text-start">
+                <Badge className="rounded-sm bg-muted-foreground py-2 font-mono">
+                  {feature.number}
+                </Badge>
+                <p className="text-md my-4 font-semibold">{feature.title}</p>
+                <p className="text-pretty text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+              <div className="mt-auto flex min-h-[200px] justify-center rounded-b-2xl">
+                <div className="h-[200px] w-full">
+                  <img
+                    src={feature.image}
+                    alt={feature.imageAlt}
+                    className="h-full w-full rounded-b-2xl object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature191 };
diff --git a/blocks/feature192.tsx b/blocks/feature192.tsx
new file mode 100644
index 0000000..72f15e1
--- /dev/null
+++ b/blocks/feature192.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { type SVGProps, useId } from "react";
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const FEATURES = [
+  {
+    id: "move-money",
+    title: "طبقه‌بندی خودکار",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "دستیار هوش مصنوعی",
+  },
+  {
+    id: "card-program",
+    title: "پیش‌بینی ریزش",
+    description:
+      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "پیشنهادهای هوشمند",
+  },
+  {
+    id: "lend-money",
+    title: "جستجوی معنایی",
+    description:
+      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "تحلیل با AI",
+  },
+  {
+    id: "data-analytics",
+    title: "تولید محتوا",
+    description:
+      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "دستیار هوش مصنوعی",
+  },
+  {
+    id: "compliance",
+    title: "تحلیل احساس",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "پیشنهادهای هوشمند",
+  },
+];
+
+export function Feature192() {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  return (
+    <section dir="rtl" lang="fa" className="container max-w-5xl py-32">
+      <div className="relative overflow-hidden rounded-3xl border bg-linear-to-bl from-gradient-1/20 to-transparent rtl:bg-linear-to-br py-5 sm:py-6 lg:py-8">
+        <div className="absolute inset-0 z-[-1]">
+          <PlusSigns className="h-full w-full text-foreground/[0.05]" />
+        </div>
+        <div className="sm:px-6 lg:px-8">
+          <div className="px-5 text-start sm:px-0">
+            <h3 className="font-mono text-sm font-semibold text-accent-foreground">
+              دستیار گفتگو
+            </h3>
+            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-xl lg:text-2xll">
+              با هوش مصنوعی سریع‌تر تصمیم بگیرید
+            </h2>
+          </div>
+          <div className="mt-10 flex gap-12 overflow-hidden sm:mt-16 lg:mt-20">
+            <Accordion
+              type="single"
+              className="flex-1"
+              defaultValue="0"
+              onValueChange={(value) => setSelectedIndex(Number(value))}
+            >
+              {FEATURES.map((feature, index) => (
+                <AccordionItem
+                  key={feature.id}
+                  value={index.toString()}
+                  className="border-black/20 dark:border-white/20"
+                >
+                  <AccordionTrigger className="px-5 text-start hover:no-underline sm:px-0">
+                    <span className="text-xl font-bold opacity-80">
+                      {feature.title}
+                    </span>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <p className="px-5 text-pretty leading-relaxed font-medium text-muted-foreground sm:px-0">
+                      {feature.description}
+                    </p>
+                    <div className="relative mt-4 translate-x-5 rtl:-translate-x-5 sm:hidden">
+                      <img
+                        src={feature.image}
+                        alt={feature.imageAlt}
+                        className="h-[240px] w-full rounded-2xl object-cover shadow-lg"
+                      />
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+            <div className="relative hidden sm:block sm:flex-1">
+              <img
+                src={FEATURES[selectedIndex].image}
+                alt={FEATURES[selectedIndex].imageAlt}
+                className="rounded-2xl object-cover shadow-lg"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+interface PlusSignsProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
+  const GAP = 16;
+  const STROKE_WIDTH = 1;
+  const PLUS_SIZE = 6;
+  const id = useId();
+  const patternId = `plus-pattern-${id}`;
+
+  return (
+    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          x="0"
+          y="0"
+          width={GAP}
+          height={GAP}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1={GAP / 2}
+            y1={(GAP - PLUS_SIZE) / 2}
+            x2={GAP / 2}
+            y2={(GAP + PLUS_SIZE) / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+          <line
+            x1={(GAP - PLUS_SIZE) / 2}
+            y1={GAP / 2}
+            x2={(GAP + PLUS_SIZE) / 2}
+            y2={GAP / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+};
diff --git a/blocks/feature193.tsx b/blocks/feature193.tsx
new file mode 100644
index 0000000..abaa292
--- /dev/null
+++ b/blocks/feature193.tsx
@@ -0,0 +1,207 @@
+import { type ReactNode, type SVGProps, useId } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type FeatureItem = {
+  id: string;
+  title: ReactNode;
+  description: string[];
+  image: {
+    src: string;
+    alt: string;
+    className?: string;
+  };
+  imagePosition: "content" | "header";
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+};
+
+const ITEMS: FeatureItem[] = [
+  {
+    id: "var-flexibility-hero",
+    title: (
+      <>
+        مدیریت پروژه
+        <br />
+        هم‌راستایی
+      </>
+    ),
+    description: [
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    ],
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "تقویم تیم",
+    },
+    imagePosition: "content",
+    className:
+      "flex flex-col gap-6 overflow-hidden py-6 ps-6 md:col-span-3 md:flex-row md:gap-12",
+    headerClassName: "flex-2 p-0 text-start md:flex-1",
+    contentClassName:
+      "relative w-full self-start overflow-hidden rounded-s-xl border p-0 md:flex-1",
+  },
+  {
+    id: "var-flexibility-flow",
+    title: "تقویم تیمی",
+    description: [
+      "کار گروهی",
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    ],
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "فضای همکاری تیمی",
+      className: "aspect-[2/1.1] rounded-xl",
+    },
+    className: "flex flex-col justify-center md:col-span-2",
+    contentClassName: "flex items-center justify-center",
+    imagePosition: "content",
+  },
+  {
+    id: "var-flexibility-diagram",
+    title: "اشتراک فایل",
+    description: [
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+    ],
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "برد مدیریت پروژه",
+      className: "mb-6 aspect-2/1 flex-1 self-center rounded-xl",
+    },
+    className: "md:col-span-2",
+    headerClassName: "h-full text-start",
+    imagePosition: "header",
+  },
+  {
+    id: "var-flexibility-transfer",
+    title: "منشن و بحث",
+    description: [
+      "همکاری تیمی",
+    ],
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "تقویم تیم",
+    },
+    imagePosition: "content",
+    className: "overflow-hidden md:col-span-3",
+    headerClassName: "text-start",
+    contentClassName:
+      "relative mt-4 ms-8 aspect-[2/1.25] w-full overflow-hidden rounded-t-xl p-0 md:mx-auto md:max-w-[400px] lg:max-w-[500px]",
+  },
+];
+
+export const Feature193 = () => {
+  return (
+    <section dir="rtl" lang="fa" className="relative overflow-hidden py-32">
+      <h3 className="container font-mono text-sm font-semibold text-accent-foreground">
+        ردیابی زمان
+      </h3>
+
+      <div className="relative z-10 container mt-8 grid grid-cols-1 gap-6 md:grid-cols-5">
+        {ITEMS.map((item) => (
+          <Card
+            key={item.id}
+            className={cn("col-span-1 shadow-xl", item.className)}
+          >
+            <CardHeader className={item.headerClassName}>
+              {item.imagePosition === "header" && (
+                <img
+                  src={item.image.src}
+                  alt={item.image.alt}
+                  className={cn("object-cover", item.image.className)}
+                />
+              )}
+              <CardTitle className="mt-0! text-3xl text-balance">
+                {item.title}
+              </CardTitle>
+              {item.description.map((desc) => (
+                <CardDescription
+                  key={desc}
+                  className="mt-3 text-base leading-snug font-medium text-pretty"
+                >
+                  {desc}
+                </CardDescription>
+              ))}
+            </CardHeader>
+            <CardContent className={item.contentClassName}>
+              {item.imagePosition === "content" && (
+                <img
+                  src={item.image.src}
+                  alt={item.image.alt}
+                  className={cn(
+                    "self-center object-cover",
+                    item.image.className,
+                  )}
+                />
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <>
+        <div className="absolute inset-0">
+          <div className="absolute top-1/2 size-[700px] -translate-y-1/2 rounded-full bg-gradient-1/30 blur-[300px] will-change-transform" />
+          <div className="absolute top-1/2 end-0 size-[700px] -translate-y-1/2 -rotate-12 rounded-full bg-gradient-2/15 blur-[300px] will-change-transform rtl:rotate-12" />
+          <div className="absolute end-20 bottom-10 h-[500px] w-[800px] -rotate-12 rounded-full bg-gradient-3/[0.06] blur-[100px] will-change-transform rtl:rotate-12" />
+        </div>
+        <div className="absolute -inset-x-20 top-0 [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_85%)]">
+          <PlusSigns className="h-full w-full text-foreground/[0.05]" />
+        </div>
+      </>
+    </section>
+  );
+};
+
+interface PlusSignsProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
+  const GAP = 16;
+  const STROKE_WIDTH = 1;
+  const PLUS_SIZE = 6;
+  const id = useId();
+  const patternId = `plus-pattern-${id}`;
+
+  return (
+    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          x="0"
+          y="0"
+          width={GAP}
+          height={GAP}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1={GAP / 2}
+            y1={(GAP - PLUS_SIZE) / 2}
+            x2={GAP / 2}
+            y2={(GAP + PLUS_SIZE) / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+          <line
+            x1={(GAP - PLUS_SIZE) / 2}
+            y1={GAP / 2}
+            x2={(GAP + PLUS_SIZE) / 2}
+            y2={GAP / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+};
diff --git a/blocks/feature194.tsx b/blocks/feature194.tsx
new file mode 100644
index 0000000..bcd7f50
--- /dev/null
+++ b/blocks/feature194.tsx
@@ -0,0 +1,94 @@
+import { Calendar, ChevronRight, Terminal, Timer, Wallet } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from "@/components/ui/card";
+
+const FEATURES = [
+  {
+    id: "wire-speed",
+    description: "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    srLabel: "فروش آنلاین",
+    icon: Timer,
+    href: "/pricing",
+  },
+  {
+    id: "fednow",
+    description: "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    srLabel: "FedNow",
+    icon: Wallet,
+    href: "/pricing",
+  },
+  {
+    id: "api-speed",
+    description: "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    srLabel: "فروشگاه",
+    icon: Terminal,
+    href: "/pricing",
+  },
+  {
+    id: "settlement",
+    description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    srLabel: "تبدیل خرید",
+    icon: Calendar,
+    href: "/pricing",
+  },
+];
+
+export function Feature194() {
+  return (
+    <section dir="rtl" lang="fa" className="relative py-32">
+      <div className="container max-w-5xl">
+        <div className="text-center">
+          <h3 className="font-mono text-sm font-semibold text-accent-foreground">
+            مدیریت محصول
+          </h3>
+
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-balance md:text-2xll lg:text-2xll">
+            فروش آنلاین را مقیاس‌پذیر کنید
+          </h2>
+          <p className="mt-3 text-xl font-medium text-pretty text-muted-foreground md:text-xl">
+            مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+          </p>
+        </div>
+
+        <div className="mt-8 grid grid-cols-2 gap-2.5 md:mt-12 lg:mt-20 lg:grid-cols-4 lg:gap-6">
+          {FEATURES.map((feature) => {
+            const Icon = feature.icon;
+
+            return (
+              <Card key={feature.id} className="flex flex-col text-start">
+                <CardHeader className="max-md:p-3">
+                  <Icon className="size-8 text-primary" />
+                  <CardDescription className="mt-4 font-medium text-pretty text-foreground">
+                    {feature.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="mt-auto max-md:p-3">
+                  <Button
+                    variant="outline"
+                    asChild
+                    className="group w-[min(100%,300px)] gap-1 border-border"
+                  >
+                    <a href={feature.href}>
+                      بیشتر بدانید
+                      <span className="sr-only">
+                        {" "}
+                        درباره {feature.srLabel}
+                      </span>
+                      <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+                    </a>
+                  </Button>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/blocks/feature195.tsx b/blocks/feature195.tsx
new file mode 100644
index 0000000..e0485a1
--- /dev/null
+++ b/blocks/feature195.tsx
@@ -0,0 +1,124 @@
+import { Check, ChevronRight } from "lucide-react";
+import { type SVGProps, useId } from "react";
+
+import { Button } from "@/components/ui/button";
+
+const PLAN_FEATURES = [
+  "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+  "Mainline AI",
+  "ترافیک ارگانیک",
+];
+
+export function Feature195() {
+  return (
+    <section dir="rtl" lang="fa" className="py-32 text-background md:container md:max-w-5xl">
+      <div className="relative isolate container grid items-center overflow-hidden bg-linear-to-r from-primary to-primary/75 py-8 max-lg:gap-10 max-md:gap-6 md:rounded-3xl lg:grid-cols-2 lg:px-8 rtl:bg-linear-to-l">
+        <div className="absolute inset-0 -z-10 [mask-image:linear-gradient(to_left,black_50%,transparent_100%)] rtl:[mask-image:linear-gradient(to_right,black_50%,transparent_100%)]">
+          <PlusSigns className="h-full w-full text-background/[0.05]" />
+        </div>
+        <div className="border-background/20 text-start lg:border-s lg:py-16 lg:pe-20">
+          <h2 className="text-3xl font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h2>
+          <p className="mt-3 text-sm font-medium text-pretty text-background/70">
+            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-4 max-md:hidden">
+            <Button size="lg" variant="secondary" className="group gap-1" asChild>
+              <a href="/signup">
+                رتبه‌بندی
+                <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+              </a>
+            </Button>
+            <Button size="lg" className="group gap-1 bg-secondary-foreground" asChild>
+              <a href="/">
+                محتوای SEO
+                <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+              </a>
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-6 text-start lg:py-10 lg:ps-20">
+          <div>
+            <h3 className="text-3xl font-semibold text-background md:text-xl lg:text-2xll">
+              <span dir="rtl" className="inline-block">
+                پیشنهاد عنوان
+              </span>
+            </h3>
+            <p className="mt-1 text-xl font-medium text-background/70">
+              گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
+            </p>
+          </div>
+          <ul className="space-y-3 text-sm text-background/70">
+            {PLAN_FEATURES.map((feature) => (
+              <li key={feature} className="flex items-center gap-2">
+                <Check className="size-4 shrink-0" />
+                <span className="text-pretty">{feature}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="mt-10 flex flex-wrap gap-4 md:hidden">
+            <Button size="lg" variant="secondary" className="group w-full" asChild>
+              <a href="/signup" className="flex items-center gap-2">
+                بهینه‌سازی جستجو
+                <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+              </a>
+            </Button>
+            <Button size="lg" className="group w-full bg-secondary-foreground" asChild>
+              <a href="/" className="flex items-center gap-2">
+                ترافیک ارگانیک
+                <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+interface PlusSignsProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
+  const GAP = 16;
+  const STROKE_WIDTH = 1;
+  const PLUS_SIZE = 6;
+  const id = useId();
+  const patternId = `plus-pattern-${id}`;
+
+  return (
+    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          x="0"
+          y="0"
+          width={GAP}
+          height={GAP}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1={GAP / 2}
+            y1={(GAP - PLUS_SIZE) / 2}
+            x2={GAP / 2}
+            y2={(GAP + PLUS_SIZE) / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+          <line
+            x1={(GAP - PLUS_SIZE) / 2}
+            y1={GAP / 2}
+            x2={(GAP + PLUS_SIZE) / 2}
+            y2={GAP / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+};
diff --git a/blocks/feature197.tsx b/blocks/feature197.tsx
new file mode 100644
index 0000000..41236bd
--- /dev/null
+++ b/blocks/feature197.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+interface FeatureItem {
+  id: number;
+  title: string;
+  image: string;
+  imageAlt: string;
+  description: string;
+}
+
+const DEFAULT_FEATURES: FeatureItem[] = [
+  {
+    id: 1,
+    title: "مدیریت دارایی",
+    image: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+    imageAlt: "گزارش مالی یکپارچه",
+    description:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+  },
+  {
+    id: 2,
+    title: "بودجه‌بندی",
+    image: "/block-media/shadcnblocks/block/lummi/bw15.jpeg",
+    imageAlt: "داشبورد ERP",
+    description:
+      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+  },
+  {
+    id: 3,
+    title: "مدیریت مالی",
+    image: "/block-media/shadcnblocks/block/lummi/bw20.jpeg",
+    imageAlt: "مدیریت عملیات",
+    description:
+      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+  },
+  {
+    id: 4,
+    title: "کنترل موجودی",
+    image: "/block-media/shadcnblocks/block/lummi/bw21.jpeg",
+    imageAlt: "گزارش مالی یکپارچه",
+    description:
+      "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
+  },
+];
+
+interface Feature197Props {
+  features?: FeatureItem[];
+  className?: string;
+}
+
+const Feature197 = ({
+  features = DEFAULT_FEATURES,
+  className,
+}: Feature197Props) => {
+  const [activeTabId, setActiveTabId] = useState<number | null>(1);
+  const [activeImage, setActiveImage] = useState(features[0].image);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto">
+        <h2 className="mb-12 text-3xl font-semibold text-balance md:text-xl">
+          عملیات سازمان را یکپارچه کنید
+        </h2>
+        <div className="flex w-full items-start justify-between gap-12">
+          <div className="w-full md:w-1/2">
+            <Accordion
+              type="single"
+              collapsible
+              className="w-full"
+              defaultValue="item-1"
+            >
+              {features.map((tab) => (
+                <AccordionItem
+                  key={tab.id}
+                  value={`item-${tab.id}`}
+                  className="transition-opacity hover:opacity-80"
+                >
+                  <AccordionTrigger
+                    onClick={() => {
+                      setActiveImage(tab.image);
+                      setActiveTabId(tab.id);
+                    }}
+                    className="cursor-pointer py-5 text-start no-underline! transition"
+                  >
+                    <span
+                      className={cn(
+                        "text-xl",
+                        tab.id === activeTabId
+                          ? "text-foreground"
+                          : "text-muted-foreground",
+                      )}
+                    >
+                      {tab.title}
+                    </span>
+                  </AccordionTrigger>
+                  <AccordionContent className="pb-2">
+                    <p className="text-base text-pretty text-muted-foreground">
+                      {tab.description}
+                    </p>
+                    <div className="mt-4 md:hidden">
+                      <img
+                        src={tab.image}
+                        alt={tab.imageAlt}
+                        className="h-full max-h-80 w-full rounded-md object-cover"
+                      />
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+          <div className="relative hidden w-1/2 overflow-hidden rounded-xl bg-muted md:block">
+            <div className="relative aspect-4/3">
+              {features.map((feature) => (
+                <img
+                  key={feature.id}
+                  src={feature.image}
+                  alt={feature.imageAlt}
+                  className={cn(
+                    "absolute inset-0 h-full w-full rounded-md object-cover transition-opacity duration-500",
+                    activeImage === feature.image ? "opacity-100" : "opacity-0",
+                  )}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature197 };
diff --git a/blocks/feature198.tsx b/blocks/feature198.tsx
new file mode 100644
index 0000000..7996c22
--- /dev/null
+++ b/blocks/feature198.tsx
@@ -0,0 +1,113 @@
+import type { ReactNode } from "react";
+import { Cable, Workflow, Wrench } from "lucide-react";
+
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: string;
+  title: string;
+  description: string;
+  icon: ReactNode;
+  className?: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: "simplify-workflow",
+    title: "سطح دسترسی",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    icon: <Workflow />,
+    className: "absolute top-0.5 cursor-pointer",
+  },
+  {
+    id: "eliminate-clunky-tools",
+    title: "تحلیل پیش‌بین",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    icon: <Wrench />,
+    className:
+      "absolute -end-4 top-5 cursor-pointer xl:end-5 xl:top-0",
+  },
+  {
+    id: "connect-workflows",
+    title: "اشتراک گزارش",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    icon: <Cable />,
+    className: "absolute bottom-2 start-[25%] cursor-pointer",
+  },
+];
+
+const CardComponent = ({
+  title,
+  description,
+  icon,
+  className,
+}: {
+  title: string;
+  description: string;
+  icon: ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={className}>
+      <Card className="flex max-w-lg transform items-center gap-4 rounded-2xl p-6 text-start shadow-lg transition-transform hover:scale-105">
+        <div className="shrink-0 rounded-full bg-muted p-3.5">{icon}</div>
+        <div className="font-semibold">
+          <p>{title}</p>
+          <p className="text-pretty text-muted-foreground">{description}</p>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+interface Feature198Props {
+  className?: string;
+}
+
+const Feature198 = ({ className }: Feature198Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative py-20 md:py-24 lg:py-28">
+          <h2 className="mx-auto max-w-5xl text-center text-2xll font-medium text-balance sm:text-2xll lg:text-2xll xl:text-[85px]">
+            <span className="text-muted-foreground">
+              ابزارهای شما باید با کسب‌وکار شما سازگار شوند.{" "}
+            </span>
+            <span>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</span>
+          </h2>
+
+          <div className="lg:hidden">
+            <div className="grid translate-y-4 justify-items-center gap-2">
+              {DATA.map((card) => (
+                <CardComponent
+                  key={card.id}
+                  title={card.title}
+                  description={card.description}
+                  icon={card.icon}
+                />
+              ))}
+            </div>
+          </div>
+
+          <div className="absolute inset-0 max-lg:hidden">
+            {DATA.map((card) => (
+              <CardComponent
+                key={card.id}
+                title={card.title}
+                description={card.description}
+                icon={card.icon}
+                className={card.className}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature198 };
diff --git a/blocks/feature199.tsx b/blocks/feature199.tsx
new file mode 100644
index 0000000..6d47f10
--- /dev/null
+++ b/blocks/feature199.tsx
@@ -0,0 +1,297 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "ai-analytics",
+    title: "تقسیم خودکار سرنخ",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "cloud-integration",
+    title: "گزارش عملکرد فروش",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "real-time-monitoring",
+    title: "مدیریت قرارداد",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "data-visualization",
+    title: "تاریخچه تعاملات",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "automated-workflows",
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "team-collaboration",
+    title: "اتوماسیون مراحل فروش",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "api-integration",
+    title: "پیش‌بینی درآمد",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "custom-dashboards",
+    title: "یادآور پیگیری هوشمند",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "security-features",
+    title: "تقسیم خودکار سرنخ",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "performance-metrics",
+    title: "گزارش عملکرد فروش",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "machine-learning",
+    title: "مدیریت قرارداد",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "data-encryption",
+    title: "تاریخچه تعاملات",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "automated-testing",
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "cicd-pipeline",
+    title: "اتوماسیون مراحل فروش",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "version-control",
+    title: "پیش‌بینی درآمد",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "code-analysis",
+    title: "یادآور پیگیری هوشمند",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "database-management",
+    title: "تقسیم خودکار سرنخ",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "load-balancing",
+    title: "گزارش عملکرد فروش",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "container-orchestration",
+    title: "مدیریت قرارداد",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "microservices",
+    title: "تاریخچه تعاملات",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "edge-computing",
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "serverless-functions",
+    title: "اتوماسیون مراحل فروش",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "devops-tools",
+    title: "پیش‌بینی درآمد",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "infrastructure-as-code",
+    title: "یادآور پیگیری هوشمند",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "authentication-services",
+    title: "تقسیم خودکار سرنخ",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "message-queues",
+    title: "گزارش عملکرد فروش",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "service-discovery",
+    title: "مدیریت قرارداد",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "api-gateway",
+    title: "تاریخچه تعاملات",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+  {
+    id: "caching-solutions",
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+  },
+  {
+    id: "event-streaming",
+    title: "اتوماسیون مراحل فروش",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+  },
+  {
+    id: "graphql-support",
+    title: "پیش‌بینی درآمد",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  },
+];
+
+interface Feature199Props {
+  className?: string;
+}
+
+const Feature199 = ({ className }: Feature199Props) => {
+  const [activeFeature, setActiveFeature] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  useEffect(() => {
+    if (!isMobile || !containerRef.current) return;
+
+    const handleScroll = () => {
+      const container = containerRef.current;
+      if (!container) return;
+      const items = container.getElementsByClassName("feature-item");
+      const containerMiddle = window.innerHeight * 0.6;
+
+      let closestItem: number | null = null;
+      let closestDistance = Infinity;
+
+      Array.from(items).forEach((item, index) => {
+        const rect = item.getBoundingClientRect();
+        const distance = Math.abs(rect.top + rect.height / 2 - containerMiddle);
+
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closestItem = index;
+        }
+      });
+
+      if (closestItem !== null) {
+        setActiveFeature(closestItem);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [isMobile]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-10 text-xl font-bold text-balance md:text-2xll lg:mb-20 lg:text-2xll">
+          هر سرنخ را تا قرارداد دنبال کنید
+        </h2>
+        <div className="relative gap-6 pb-72 md:grid md:grid-cols-5 md:pb-0">
+          <div className="col-span-3 pb-4 text-start" ref={containerRef}>
+            <Separator />
+            {FEATURES.map((feature, index) => (
+              <React.Fragment key={feature.id}>
+                <div
+                  className="feature-item py-3"
+                  onMouseEnter={() => !isMobile && setActiveFeature(index)}
+                >
+                  <div className="flex items-center gap-7 md:gap-16 lg:gap-28">
+                    <span
+                      className={cn(
+                        "invisible size-2.5 shrink-0 rounded-full bg-primary md:size-3",
+                        activeFeature === index && "visible",
+                      )}
+                    />
+                    <p
+                      className={cn(
+                        "text-[clamp(1.65rem,3vw,2.15rem)] font-bold text-muted-foreground",
+                        activeFeature === index && "text-primary",
+                      )}
+                    >
+                      {feature.title}
+                    </p>
+                  </div>
+                </div>
+                <Separator />
+              </React.Fragment>
+            ))}
+          </div>
+          <div className="sticky bottom-3 start-3 col-span-2 h-72 w-fit border md:top-20 md:h-fit">
+            <img
+              src={FEATURES[activeFeature].image}
+              alt={FEATURES[activeFeature].imageAlt}
+              className="h-72 md:h-auto"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature199 };
diff --git a/blocks/feature2.tsx b/blocks/feature2.tsx
new file mode 100644
index 0000000..f3c71de
--- /dev/null
+++ b/blocks/feature2.tsx
@@ -0,0 +1,72 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature2Props {
+  title: string;
+  description?: string;
+  imageSrc: string;
+  imageAlt: string;
+  buttonPrimary: {
+    text: string;
+    href: string;
+  };
+  buttonSecondary: {
+    text: string;
+    href: string;
+  };
+  className?: string;
+}
+
+const Feature2 = ({
+  title = "پیش‌بینی درآمد را دقیق‌تر کنید",
+  description = "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
+  imageSrc = "/block-media/shadcnblocks/block/placeholder-1.svg",
+  imageAlt = "صف اولویت سرنخ‌ها",
+  buttonPrimary = {
+    text: "شروع کنید",
+    href: "https://ShadcnBlocks",
+  },
+  buttonSecondary = {
+    text: "بیشتر بدانید",
+    href: "https://ShadcnBlocks",
+  },
+  className,
+}: Feature2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-8 md:gap-16 lg:grid-cols-2">
+          <img
+            src={imageSrc}
+            alt={imageAlt}
+            className="max-h-96 w-full rounded-md object-cover"
+          />
+          <div className="flex flex-col items-center text-center lg:items-start lg:text-start">
+            <h2 className="my-6 mt-0 text-xl font-semibold text-balance lg:text-2xll">
+              {title}
+            </h2>
+            {description && (
+              <p className="mb-8 max-w-xl text-muted-foreground lg:text-lg">
+                {description}
+              </p>
+            )}
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              <Button asChild>
+                <a href={buttonPrimary.href} target="_blank">
+                  {buttonPrimary.text}
+                </a>
+              </Button>
+              <Button variant="outline" asChild>
+                <a href={buttonSecondary.href} target="_blank">
+                  {buttonSecondary.text}
+                </a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature2 };
diff --git a/blocks/feature20.tsx b/blocks/feature20.tsx
new file mode 100644
index 0000000..162caea
--- /dev/null
+++ b/blocks/feature20.tsx
@@ -0,0 +1,93 @@
+import { ChevronRight, SquareDashedMousePointer } from "lucide-react";
+
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const utilities = [
+  {
+    title: "نقش و دسترسی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    title: "چک‌لیست تحویل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    title: "گزارش پیشرفت",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    title: "برد Kanban",
+    description:
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    title: "تقویم تیمی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    title: "اشتراک فایل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+];
+
+interface Feature20Props {
+  className?: string;
+}
+
+const Feature20 = ({ className }: Feature20Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-7xl">
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center gap-1 text-muted-foreground">
+            <SquareDashedMousePointer className="size-5 text-primary" />
+            <p>اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
+          </div>
+          <a href="#" className="hover:text-primary hover:underline">
+            بیشتر بدانید
+            <ChevronRight className="ms-2 inline-block size-4 rtl:rotate-180" />
+          </a>
+        </div>
+        <Separator className="mt-3 mb-8" />
+        <div className="flex flex-col justify-between gap-6 md:flex-row">
+          <h2 className="text-3xl font-medium md:w-1/2">
+            همکاری از راه دور را ساده کنید
+          </h2>
+          <p className="text-muted-foreground md:w-1/2">
+            هر عضو بداند چه زمانی چه کاری دارد
+          </p>
+        </div>
+        <div className="mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {utilities.map((utility, index) => (
+            <Card key={index} className="overflow-hidden pt-0">
+              <img
+                src={utility.image}
+                alt={`نمای ${utility.title}`}
+                className="aspect-video w-full object-cover"
+              />
+              <div className="p-5">
+                <p className="mb-1 font-medium">{utility.title}</p>
+                <p className="text-muted-foreground">{utility.description}</p>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature20 };
diff --git a/blocks/feature200.tsx b/blocks/feature200.tsx
new file mode 100644
index 0000000..b878134
--- /dev/null
+++ b/blocks/feature200.tsx
@@ -0,0 +1,102 @@
+import { BarChart, Check, Shield, Zap } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "cloud-storage",
+    title: "تحلیل باخت معامله",
+    icon: Zap,
+    iconColor: "text-purple-400/90",
+    bgGradient: "from-purple-500",
+    items: [
+      "یادآور پیگیری خودکار",
+      "پیش‌بینی درآمد ماهانه",
+      "مقایسه عملکرد نمایندگان",
+    ],
+  },
+  {
+    id: "performance-scaling",
+    title: "هدف‌گذاری تیمی",
+    icon: BarChart,
+    iconColor: "text-teal-400/90",
+    bgGradient: "from-teal-500",
+    items: [
+      "ثبت دلیل باخت معامله",
+      "قالب ایمیل فروش آماده",
+      "گزارش نرخ تبدیل هر مرحله",
+    ],
+  },
+  {
+    id: "security-protection",
+    title: "اتوماسیون پیگیری",
+    icon: Shield,
+    iconColor: "text-red-400/90",
+    bgGradient: "from-red-500",
+    items: [
+      "گزارش نرخ تبدیل هر مرحله",
+      "یادآور پیگیری خودکار",
+      "پیش‌بینی درآمد ماهانه",
+    ],
+  },
+];
+
+interface Feature200Props {
+  className?: string;
+}
+
+const Feature200 = ({ className }: Feature200Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mt-8 grid max-w-5xl grid-cols-1 gap-2 lg:grid-cols-3">
+          {FEATURES.map((feature) => {
+            const Icon = feature.icon;
+
+            return (
+              <div
+                key={feature.id}
+                className={cn(
+                  "relative h-full overflow-hidden rounded-xl bg-radial-[at_80%_14%] from-[-50%] via-zinc-950 via-75% to-zinc-950 p-6",
+                  feature.bgGradient,
+                )}
+              >
+                <div className="absolute inset-0 h-full w-full bg-[radial-gradient(white_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_at_80%_14%,#000,transparent_40%)] [background-size:3px_3px] opacity-35" />
+                <div
+                  className={cn(
+                    "relative grid size-11 place-items-center rounded-full bg-gradient-to-b via-transparent p-[2px]",
+                    `${feature.bgGradient}/50`,
+                    `to-${feature.bgGradient.split("-")[1]}/50`,
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "grid size-full place-items-center rounded-full bg-zinc-950 bg-gradient-to-b via-transparent",
+                      `${feature.bgGradient}/30`,
+                      `to-${feature.bgGradient.split("-")[1]}/30`,
+                    )}
+                  >
+                    <Icon className={feature.iconColor} />
+                  </div>
+                </div>
+                <h3 className="relative mt-10 text-lg font-semibold text-background dark:text-primary">
+                  {feature.title}
+                </h3>
+                <ul className="relative mt-4 space-y-3.5 text-sm text-background/70 dark:text-primary/70">
+                  {feature.items.map((item) => (
+                    <li key={item} className="flex items-center gap-2 text-start">
+                      <Check className="mt-0.5 size-4 shrink-0" />
+                      <span className="text-pretty">{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature200 };
diff --git a/blocks/feature202.tsx b/blocks/feature202.tsx
new file mode 100644
index 0000000..330ac1b
--- /dev/null
+++ b/blocks/feature202.tsx
@@ -0,0 +1,148 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Building2,
+  CircleDot,
+  Compass,
+  Home,
+  Landmark,
+  LayoutGrid,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type CardItem = {
+  id: string;
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  icon: LucideIcon;
+  wide?: boolean;
+};
+
+const CARDS: CardItem[] = [
+  {
+    id: "sustainable-design",
+    title: "تحلیل کانال",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    image:
+      "/block-media/external/unsplash/photo-1647517649469-ba454dc72896.jpg",
+    imageAlt: "تحلیل عملکرد کمپین",
+    icon: Building2,
+    wide: true,
+  },
+  {
+    id: "urban-planning",
+    title: "اتوماسیون ایمیل",
+    description:
+      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+    image:
+      "/block-media/external/unsplash/photo-1698516923132-b0236bc8f3ef.jpg",
+    imageAlt: "نمودار ROI",
+    icon: Landmark,
+  },
+  {
+    id: "digital-integration",
+    title: "A/B تست",
+    description:
+      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    image:
+      "/block-media/external/unsplash/photo-1586869871566-d8e41dd50318.jpg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+    icon: LayoutGrid,
+  },
+  {
+    id: "bim-solutions",
+    title: "تقویم محتوا",
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    image:
+      "/block-media/external/unsplash/photo-1588742415209-69dbb64791b6.jpg",
+    imageAlt: "تحلیل عملکرد کمپین",
+    icon: Compass,
+    wide: true,
+  },
+  {
+    id: "heritage-preservation",
+    title: "ردیابی UTM",
+    description:
+      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    image:
+      "/block-media/external/unsplash/photo-1587278163304-99d65f6a58f0.jpg",
+    imageAlt: "نمودار ROI",
+    icon: Home,
+    wide: true,
+  },
+  {
+    id: "interior-innovation",
+    title: "گزارش ROI",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    image:
+      "/block-media/external/unsplash/photo-1589100787575-fad1dcaa9d17.jpg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+    icon: CircleDot,
+  },
+];
+
+interface Feature202Props {
+  className?: string;
+}
+
+const Feature202 = ({ className }: Feature202Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl text-center">
+          <div className="text-xs text-muted-foreground md:text-sm">کمپین</div>
+          <h2 className="mt-4 mb-8 text-xl font-semibold text-balance md:text-2xll">
+            رشد برند
+          </h2>
+          <p className="text-base text-pretty text-muted-foreground md:text-lg">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </p>
+        </div>
+        <div className="mt-8 grid gap-4 lg:grid-cols-3">
+          {CARDS.map((card) => {
+            const Icon = card.icon;
+
+            return (
+              <a
+                key={card.id}
+                href="#"
+                className={cn(
+                  "group relative isolate h-80 overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5",
+                  card.wide && "lg:col-span-2",
+                )}
+              >
+                <div className="absolute inset-0 -z-10 bg-linear-to-t from-primary to-transparent" />
+                <img
+                  src={card.image}
+                  alt={card.imageAlt}
+                  className="absolute inset-0 -z-20 size-full rounded-2xl object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
+                />
+                <div className="flex h-full flex-col justify-between p-10">
+                  <span className="flex size-12 items-center justify-center rounded-xl border border-background/20 bg-background/15 backdrop-blur-sm">
+                    <Icon
+                      className="size-5 text-background"
+                      strokeWidth={1.5}
+                    />
+                  </span>
+                  <div className="text-start">
+                    <h3 className="font-medium text-background">{card.title}</h3>
+                    <p className="mt-2 text-pretty text-background/70">
+                      {card.description}
+                    </p>
+                  </div>
+                </div>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature202 };
diff --git a/blocks/feature203.tsx b/blocks/feature203.tsx
new file mode 100644
index 0000000..739da78
--- /dev/null
+++ b/blocks/feature203.tsx
@@ -0,0 +1,125 @@
+import {
+  BoxesIcon,
+  CheckIcon,
+  HeadphonesIcon,
+  PuzzleIcon,
+  ShieldCheckIcon,
+} from "lucide-react";
+import { Fragment } from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const CARDS = [
+  {
+    id: "product-features",
+    title: "تریگر رویداد",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    icon: BoxesIcon,
+    features: [
+      "ارسال خودکار ایمیل",
+      "ایجاد خودکار تسک",
+      "گزارش خطای اجرا",
+      "اجرای خودکار وظایف",
+      "تأخیر زمان‌بندی‌شده",
+      "شرط بر اساس فیلد",
+      "ارسال خودکار ایمیل",
+    ],
+  },
+  {
+    id: "security",
+    title: "شرط هوشمند",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    icon: ShieldCheckIcon,
+    features: [
+      "ایجاد خودکار تسک",
+      "گزارش خطای اجرا",
+      "اجرای خودکار وظایف",
+      "تأخیر زمان‌بندی‌شده",
+      "شرط بر اساس فیلد",
+      "ارسال خودکار ایمیل",
+      "ایجاد خودکار تسک",
+    ],
+  },
+  {
+    id: "integration-apis",
+    title: "اعلان خودکار",
+    description: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    icon: PuzzleIcon,
+    features: [
+      "گزارش خطای اجرا",
+      "اجرای خودکار وظایف",
+      "تأخیر زمان‌بندی‌شده",
+      "شرط بر اساس فیلد",
+      "ارسال خودکار ایمیل",
+      "ایجاد خودکار تسک",
+    ],
+  },
+  {
+    id: "support-resources",
+    title: "تأیید چندمرحله‌ای",
+    description:
+      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    icon: HeadphonesIcon,
+    features: [
+      "گزارش خطای اجرا",
+      "اجرای خودکار وظایف",
+      "تأخیر زمان‌بندی‌شده",
+      "شرط بر اساس فیلد",
+      "ارسال خودکار ایمیل",
+      "ایجاد خودکار تسک",
+    ],
+  },
+];
+
+interface Feature203Props {
+  className?: string;
+}
+
+const Feature203 = ({ className }: Feature203Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto grid max-w-3xl gap-9 md:grid-cols-2">
+          {CARDS.map((card) => {
+            const Icon = card.icon;
+
+            return (
+              <div
+                key={card.id}
+                className="flex flex-col gap-8 rounded-xl bg-muted p-9 text-start"
+              >
+                <div className="flex flex-col gap-6">
+                  <span className="flex size-10 items-center justify-center rounded-xl bg-primary">
+                    <Icon className="size-5 text-background" />
+                  </span>
+                  <div className="flex flex-col gap-2.5">
+                    <h3 className="text-xl font-semibold">{card.title}</h3>
+                    <p className="text-sm text-pretty text-muted-foreground">
+                      {card.description}
+                    </p>
+                  </div>
+                </div>
+                <ul className="flex flex-col gap-3.5">
+                  {card.features.map((feature) => (
+                    <Fragment key={feature}>
+                      <Separator />
+                      <li className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <CheckIcon className="size-4 shrink-0 text-primary" />
+                        <span className="text-pretty">{feature}</span>
+                      </li>
+                    </Fragment>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature203 };
diff --git a/blocks/feature204.tsx b/blocks/feature204.tsx
new file mode 100644
index 0000000..ac40fda
--- /dev/null
+++ b/blocks/feature204.tsx
@@ -0,0 +1,77 @@
+import { Combine, Gauge, Zap } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "integration",
+    title: "داشبورد سفارشی",
+    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    icon: Combine,
+  },
+  {
+    id: "performance",
+    title: "فیلتر پیشرفته",
+    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    icon: Gauge,
+  },
+];
+
+interface Feature204Props {
+  className?: string;
+}
+
+const Feature204 = ({ className }: Feature204Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-10 md:gap-24 lg:flex-row lg:items-stretch">
+          <div className="grid w-full max-w-lg place-items-center rounded-2xl bg-[url('/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg')] bg-cover bg-center bg-no-repeat px-8 py-10 sm:px-16 sm:py-20">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="گزارش عملکرد"
+              className="rounded-2xl"
+            />
+          </div>
+          <div className="flex max-w-2xl flex-col justify-between gap-10">
+            <div className="text-center lg:text-start">
+              <h2 className="text-2xll font-medium text-balance lg:text-2xll">
+                داده پراکنده را به تصمیم تبدیل کنید
+              </h2>
+              <p className="mt-6 text-lg text-pretty text-muted-foreground">
+                گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+              </p>
+              <Button size="lg" className="mt-8 gap-2">
+                داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
+                <Zap className="size-4" />
+              </Button>
+            </div>
+            <div className="grid gap-7 sm:grid-cols-2">
+              {FEATURES.map((feature) => {
+                const Icon = feature.icon;
+
+                return (
+                  <div
+                    key={feature.id}
+                    className="text-center lg:text-start"
+                  >
+                    <Icon className="mx-auto size-8 lg:ms-0 lg:me-auto" />
+                    <h3 className="mt-4 mb-2 text-lg font-semibold">
+                      {feature.title}
+                    </h3>
+                    <p className="text-pretty text-muted-foreground">
+                      {feature.description}
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature204 };
diff --git a/blocks/feature205.tsx b/blocks/feature205.tsx
new file mode 100644
index 0000000..ca358a5
--- /dev/null
+++ b/blocks/feature205.tsx
@@ -0,0 +1,136 @@
+import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
+import { ScrollBar } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const TABS = [
+  {
+    value: "efficiency",
+    label: "تیکت",
+    title: "تاریخچه مشتری",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    image:
+      "/block-media/shadcnblocks/block/photos/annie-spratt-hCb3lIB8L8E-unsplash.jpg",
+    imageAlt: "مدیریت تیکت",
+    stats: [
+      { value: "رضایت مشتری", label: "مرکز تماس" },
+      {
+        value: "پشتیبانی مشتری",
+        label: "تیکت",
+      },
+    ],
+  },
+  {
+    value: "collaboration",
+    label: "رضایت مشتری",
+    title: "صندوق یکپارچه",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    image:
+      "/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg",
+    imageAlt: "داشبورد رضایت",
+    stats: [
+      { value: "۳×", label: "مرکز تماس" },
+      { value: "پشتیبانی مشتری", label: "تیکت" },
+    ],
+  },
+  {
+    value: "insights",
+    label: "رضایت مشتری",
+    title: "اولویت‌بندی تیکت",
+    description:
+      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg",
+    imageAlt: "مرکز پشتیبانی مشتری",
+    stats: [
+      { value: "مرکز تماس", label: "پشتیبانی مشتری" },
+      { value: "تیکت", label: "رضایت مشتری" },
+    ],
+  },
+] as const;
+
+interface Feature205Props {
+  className?: string;
+}
+
+const Feature205 = ({ className }: Feature205Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Tabs
+          dir="rtl"
+          defaultValue="efficiency"
+          className="grid grid-cols-1 gap-8 rounded-4xl border border-border p-4 lg:grid-cols-2 lg:p-8 xl:gap-20"
+        >
+          <div className="flex flex-col-reverse justify-between gap-8 lg:flex-col">
+            <div className="text-right">
+              {TABS.map((tab) => (
+                <TabsContent
+                  key={tab.value}
+                  value={tab.value}
+                  className="flex animate-in flex-col gap-6 duration-300 fade-in"
+                >
+                  <span className="text-xs text-muted-foreground">{tab.label}</span>
+                  <div className="flex flex-col gap-4">
+                    <h2 className="text-3xl font-medium text-balance">
+                      {tab.title}
+                    </h2>
+                    <p className="text-pretty text-muted-foreground">
+                      {tab.description}
+                    </p>
+                  </div>
+                </TabsContent>
+              ))}
+            </div>
+            <ScrollableTabsList>
+              <TabsList className="mx-auto h-12 overflow-y-hidden rounded-full lg:ms-0 lg:me-auto">
+                {TABS.map((tab) => (
+                  <TabsTrigger
+                    key={tab.value}
+                    value={tab.value}
+                    className="h-full rounded-full px-4 py-2"
+                  >
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              <ScrollBar orientation="horizontal" className="h-2" />
+            </ScrollableTabsList>
+          </div>
+          <div>
+            {TABS.map((tab) => (
+              <TabsContent
+                key={tab.value}
+                value={tab.value}
+                className="animate-in duration-300 fade-in"
+              >
+                <div className="relative">
+                  <img
+                    src={tab.image}
+                    alt={tab.imageAlt}
+                    className="h-[440px] w-full rounded-3xl object-cover lg:h-[540px]"
+                  />
+                  <div className="absolute inset-0 rounded-3xl bg-linear-to-tr from-primary/80 via-transparent to-transparent rtl:bg-linear-to-tl" />
+                  <div className="absolute bottom-0 start-0 flex flex-col justify-center gap-8 p-6 text-right text-background">
+                    {tab.stats.map((stat) => (
+                      <div key={stat.label} className="flex flex-col gap-1.5">
+                        <p className="text-xl font-medium lg:text-2xll">
+                          {stat.value}
+                        </p>
+                        <p className="font-medium">{stat.label}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </TabsContent>
+            ))}
+          </div>
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature205 };
diff --git a/blocks/feature206.tsx b/blocks/feature206.tsx
new file mode 100644
index 0000000..d5052d6
--- /dev/null
+++ b/blocks/feature206.tsx
@@ -0,0 +1,183 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+type GridImage = {
+  id: string;
+  type: "image";
+  src: string;
+  alt: string;
+  orderClass: string;
+};
+
+type GridCard = {
+  id: string;
+  type: "card";
+  title: string;
+  description: string;
+  linkLabel: string;
+  orderClass: string;
+  variant: "muted" | "accent" | "accent-muted";
+};
+
+type GridItem = GridImage | GridCard;
+
+const GRID_ITEMS: GridItem[] = [
+  {
+    id: "image-1",
+    type: "image",
+    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-ee1-cRqJQtA-unsplash.jpg",
+    alt: "دستیار هوش مصنوعی",
+    orderClass: "md:order-1 xl:order-1",
+  },
+  {
+    id: "smart-solutions",
+    type: "card",
+    title: "تحلیل احساس",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    linkLabel: "اتوماسیون AI",
+    orderClass: "md:order-2 xl:order-2",
+    variant: "muted",
+  },
+  {
+    id: "image-2",
+    type: "image",
+    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-Ych4LcKFA5E-unsplash.jpg",
+    alt: "پیشنهادهای هوشمند",
+    orderClass: "md:order-4 xl:order-3",
+  },
+  {
+    id: "advanced-analytics",
+    type: "card",
+    title: "دستیار گفتگو",
+    description:
+      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    linkLabel: "دستیار کسب‌وکار",
+    orderClass: "md:order-3 xl:order-4",
+    variant: "accent",
+  },
+  {
+    id: "image-3",
+    type: "image",
+    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-8FIN2qa2vQM-unsplash.jpg",
+    alt: "تحلیل با AI",
+    orderClass: "md:order-5 xl:order-6",
+  },
+  {
+    id: "custom-integration",
+    type: "card",
+    title: "خلاصه‌سازی هوشمند",
+    description:
+      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    linkLabel: "هوش مصنوعی",
+    orderClass: "md:order-6 xl:order-5",
+    variant: "accent-muted",
+  },
+  {
+    id: "expert-support",
+    type: "card",
+    title: "پیشنهاد پاسخ",
+    description:
+      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    linkLabel: "پیشنهاد هوشمند",
+    orderClass: "md:order-7",
+    variant: "muted",
+  },
+  {
+    id: "image-4",
+    type: "image",
+    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-ZXLGP2Qh3Mo-unsplash.jpg",
+    alt: "دستیار هوش مصنوعی",
+    orderClass: "md:order-8",
+  },
+];
+
+const cardVariantClasses: Record<
+  GridCard["variant"],
+  { container: string; title: string; description: string; link: string }
+> = {
+  muted: {
+    container: "bg-muted/50",
+    title: "",
+    description: "text-muted-foreground",
+    link: "",
+  },
+  accent: {
+    container: "bg-[#d1efef]",
+    title: "text-white",
+    description: "text-white/80",
+    link: "text-white/80",
+  },
+  "accent-muted": {
+    container: "bg-[#d1efef]",
+    title: "",
+    description: "text-muted-foreground",
+    link: "",
+  },
+};
+
+interface Feature206Props {
+  className?: string;
+}
+
+const Feature206 = ({ className }: Feature206Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6 text-center">
+          <Badge variant="outline" className="rounded-full">
+            اتوماسیون AI
+          </Badge>
+          <h2 className="text-xl font-medium text-balance md:text-2xll">
+            با هوش مصنوعی سریع‌تر تصمیم بگیرید
+          </h2>
+          <p className="max-w-2xl text-lg text-pretty text-muted-foreground">
+            مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
+          {GRID_ITEMS.map((item) => {
+            if (item.type === "image") {
+              return (
+                <img
+                  key={item.id}
+                  src={item.src}
+                  alt={item.alt}
+                  className={cn(
+                    "aspect-square size-full rounded-2xl object-cover",
+                    item.orderClass,
+                  )}
+                />
+              );
+            }
+
+            const styles = cardVariantClasses[item.variant];
+
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  "flex flex-col justify-between gap-20 rounded-2xl p-12 text-start md:gap-32",
+                  styles.container,
+                  item.orderClass,
+                )}
+              >
+                <h3 className={cn("text-xl", styles.title)}>{item.title}</h3>
+                <div>
+                  <p className={cn("mb-8 text-pretty", styles.description)}>
+                    {item.description}
+                  </p>
+                  <a href="#" className={cn("text-sm underline", styles.link)}>
+                    {item.linkLabel}
+                  </a>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature206 };
diff --git a/blocks/feature207.tsx b/blocks/feature207.tsx
new file mode 100644
index 0000000..3070eae
--- /dev/null
+++ b/blocks/feature207.tsx
@@ -0,0 +1,66 @@
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const STEPS = [
+  {
+    id: "vision-preparation",
+    number: "۱",
+    title: "نقش و دسترسی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+  },
+  {
+    id: "shooting-direction",
+    number: "۲",
+    title: "چک‌لیست تحویل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+  },
+  {
+    id: "editing-delivery",
+    number: "۰۳",
+    title: "گزارش پیشرفت",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+  },
+];
+
+interface Feature207Props {
+  className?: string;
+}
+
+const Feature207 = ({ className }: Feature207Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <p className="text-sm font-light">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
+        <h2 className="mt-2 text-3xl font-medium text-balance md:text-2xll">
+          همکاری از راه دور را ساده کنید
+        </h2>
+        <div className="mt-14">
+          <Separator />
+          {STEPS.map((step) => (
+            <div key={step.id}>
+              <div className="py-8">
+                <div className="flex gap-4 md:items-center">
+                  <span className="mt-0.5 shrink-0 font-mono text-muted-foreground md:mt-0">
+                    {step.number}
+                  </span>
+                  <div className="grid items-center gap-3 text-start md:grid-cols-2 md:gap-8">
+                    <h3 className="text-xl">{step.title}</h3>
+                    <p className="text-pretty text-muted-foreground">
+                      {step.description}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <Separator />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature207 };
diff --git a/blocks/feature209.tsx b/blocks/feature209.tsx
new file mode 100644
index 0000000..7e01c42
--- /dev/null
+++ b/blocks/feature209.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg",
+    alt: "مدیریت سفارش",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-fyEcdETa5mc-unsplash.jpg",
+    alt: "داشبورد فروش",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg",
+    alt: "پنل فروشگاه آنلاین",
+  },
+];
+
+interface Feature209Props {
+  className?: string;
+}
+
+const Feature209 = ({ className }: Feature209Props) => {
+  const [selectedImage, setSelectedImage] = useState(IMAGES[0].src);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("border-border py-32", className)}>
+      <div className="border-y">
+        <div className="relative container overflow-hidden">
+          <div className="border-x border-border">
+            <div className="flex h-full flex-col-reverse xl:flex-row">
+              <div className="flex items-center bg-background p-8 xl:w-1/2">
+                <div className="flex h-fit flex-col gap-6 py-16 ps-16 text-start">
+                  <h2 className="text-xl font-medium tracking-tight text-balance">
+                    فروش آنلاین را مقیاس‌پذیر کنید
+                  </h2>
+                  <div className="flex gap-4">
+                    {IMAGES.map((image) => (
+                      <button
+                        key={image.src}
+                        type="button"
+                        className={cn(
+                          "max-h-24 max-w-32 rounded-md border border-transparent p-1 shadow-sm transition-all duration-150",
+                          selectedImage === image.src &&
+                            "border border-foreground/10 shadow-md",
+                        )}
+                        onClick={() => setSelectedImage(image.src)}
+                      >
+                        <img
+                          src={image.src}
+                          alt={image.alt}
+                          className="size-full rounded-md object-cover"
+                        />
+                      </button>
+                    ))}
+                  </div>
+                  <p className="font-medium text-pretty text-muted-foreground">
+                    مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+                  </p>
+                  <div className="flex gap-4 font-medium">
+                    <Button variant="outline" asChild>
+                      <a href="#" className="group flex items-center gap-1">
+                        فروش آنلاین
+                        <ChevronRight className="mt-0.5 size-4 transition-all duration-150 group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+                      </a>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <Separator
+                orientation="vertical"
+                className="hidden self-stretch data-[orientation=vertical]:h-auto xl:block"
+              />
+              <div className="relative size-full p-8 md:p-16">
+                <div className="relative h-[300px] sm:h-[540px]">
+                  {IMAGES.map((image) => (
+                    <img
+                      key={image.src}
+                      src={image.src}
+                      alt={image.alt}
+                      className={cn(
+                        "absolute inset-0 h-[300px] w-full origin-center scale-[1.05] rounded-lg object-cover opacity-0 shadow-lg transition-none sm:h-[540px]",
+                        selectedImage === image.src &&
+                          "scale-100 opacity-100 transition-all duration-500 ease-out",
+                      )}
+                    />
+                  ))}
+                </div>
+                <div className="pointer-events-none absolute inset-0 -z-10 h-full w-full bg-[url('/block-media/shadcnblocks/block/patterns/tiny-checkers.svg')] [background-size:4px_4px] bg-repeat opacity-10" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature209 };
diff --git a/blocks/feature21.tsx b/blocks/feature21.tsx
new file mode 100644
index 0000000..ee50f8e
--- /dev/null
+++ b/blocks/feature21.tsx
@@ -0,0 +1,115 @@
+import { Sparkles, SquareDashedMousePointer } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Feature21Props {
+  className?: string;
+}
+
+const Feature21 = ({ className }: Feature21Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-gray-50 py-32 dark:bg-background", className)}
+    >
+      <div className="container max-w-7xl">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <SquareDashedMousePointer className="size-5" />
+          <p className="text-sm">مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.</p>
+        </div>
+        <Separator className="mt-3 mb-8" />
+        <div className="flex flex-col justify-between gap-6 md:flex-row">
+          <h2 className="text-3xl font-medium md:w-1/2">
+            فروش آنلاین را مقیاس‌پذیر کنید
+          </h2>
+          <p className="text-muted-foreground md:w-1/2">
+            تجربه خرید را روان‌تر بسازید
+          </p>
+        </div>
+        <div className="mt-11 flex flex-col gap-6 md:flex-row">
+          <div className="flex w-full flex-col gap-6">
+            <Card className="p-6">
+              <p className="mb-1 font-medium">گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید.</p>
+              <p className="text-muted-foreground">
+                محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.
+              </p>
+            </Card>
+            <Card className="overflow-hidden pt-0">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="مدیریت سفارش"
+                className="aspect-video w-full object-cover"
+              />
+              <div className="p-6">
+                <p className="mb-1 font-medium">مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.</p>
+                <p className="text-muted-foreground">
+                  گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید.
+                </p>
+              </div>
+            </Card>
+            <Card className="p-6">
+              <p className="mb-1 font-medium">محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.</p>
+              <p className="text-muted-foreground">
+                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+              </p>
+            </Card>
+            <Card className="p-6">
+              <p className="mb-1 flex items-center gap-2 font-medium">
+                گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید. <Sparkles className="size-4" />
+              </p>
+              <p className="text-muted-foreground">
+                محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.
+              </p>
+            </Card>
+          </div>
+          <div className="flex w-full flex-col gap-6">
+            <Card className="overflow-hidden pt-0">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="داشبورد فروش"
+                className="aspect-video w-full object-cover"
+              />
+              <div className="p-6">
+                <p className="mb-1 flex items-center gap-2 font-medium">
+                  مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد. <Sparkles className="size-4" />
+                </p>
+                <p className="text-muted-foreground">
+                  گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید.
+                </p>
+              </div>
+            </Card>
+            <Card className="p-6">
+              <p className="mb-1 font-medium">محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.</p>
+              <p className="text-muted-foreground">
+                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+              </p>
+            </Card>
+            <Card className="p-6">
+              <p className="mb-1 flex items-center gap-2 font-medium">
+                گزارش فروش، مرجوعی و رضایت به شما کمک می‌کند کاتالوگ و قیمت‌گذاری را دقیق‌تر تنظیم کنید. <Sparkles className="size-4" />
+              </p>
+              <p className="text-muted-foreground">
+                محصول، موجودی و سفارش در یک پنل مدیریت می‌شود. تیم فروش آنلاین با داده لحظه‌ای، سریع‌تر تصمیم می‌گیرد و تجربه خرید بهتری می‌سازد.
+              </p>
+            </Card>
+            <Card className="border-dashed bg-transparent p-6 shadow-none">
+              <div className="mb-1 flex items-center gap-2 font-medium">
+                فروش آنلاین
+                <Badge variant="outline">فروشگاه</Badge>
+              </div>
+              <p className="text-muted-foreground">
+                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+              </p>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature21 };
diff --git a/blocks/feature210.tsx b/blocks/feature210.tsx
new file mode 100644
index 0000000..eefcc60
--- /dev/null
+++ b/blocks/feature210.tsx
@@ -0,0 +1,165 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  ChevronRight,
+  ClipboardCheck,
+  Component,
+  Files,
+  FormInput,
+  KeyRound,
+  LayoutDashboard,
+  Mail,
+  Megaphone,
+  Newspaper,
+  Rocket,
+  ScrollText,
+  Sparkles,
+  Users,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const FEATURES: {
+  id: string;
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  link: string;
+}[] = [
+  {
+    id: "blog-templates",
+    title: "بهینه‌سازی محتوا",
+    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: Newspaper,
+    link: "#",
+  },
+  {
+    id: "portfolio",
+    title: "تحلیل رقیب",
+    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: Files,
+    link: "#",
+  },
+  {
+    id: "dashboard-ui",
+    title: "لینک داخلی",
+    description: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    icon: LayoutDashboard,
+    link: "#",
+  },
+  {
+    id: "landing-pages",
+    title: "گزارش Core Web Vitals",
+    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+    icon: Rocket,
+    link: "#",
+  },
+  {
+    id: "documentation",
+    title: "پیشنهاد عنوان",
+    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: ClipboardCheck,
+    link: "#",
+  },
+  {
+    id: "authentication",
+    title: "تحلیل کلمه کلیدی",
+    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: KeyRound,
+    link: "#",
+  },
+  {
+    id: "marketing-sites",
+    title: "ممیزی فنی",
+    description: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    icon: Megaphone,
+    link: "#",
+  },
+  {
+    id: "social-media",
+    title: "ردیابی رتبه",
+    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+    icon: Users,
+    link: "#",
+  },
+  {
+    id: "forms",
+    title: "بهینه‌سازی محتوا",
+    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: FormInput,
+    link: "#",
+  },
+  {
+    id: "email-templates",
+    title: "تحلیل رقیب",
+    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: Mail,
+    link: "#",
+  },
+  {
+    id: "components",
+    title: "لینک داخلی",
+    description: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    icon: Component,
+    link: "#",
+  },
+  {
+    id: "animations",
+    title: "گزارش Core Web Vitals",
+    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+    icon: Sparkles,
+    link: "#",
+  },
+];
+
+interface Feature210Props {
+  className?: string;
+}
+
+const Feature210 = ({ className }: Feature210Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-6xl flex-col justify-between gap-3 md:flex-row md:items-end md:gap-12">
+          <div className="flex basis-1/2 flex-col gap-3 text-start">
+            <div className="flex items-center gap-2">
+              <ScrollText className="size-4" />
+              <p className="text-sm font-medium">تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.</p>
+            </div>
+            <h2 className="text-3xl font-medium text-balance md:text-xl">
+              رتبه کلمات کلیدی را پیگیری کنید
+            </h2>
+          </div>
+          <p className="w-fit basis-1/2 text-pretty font-medium text-muted-foreground">
+            گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
+          </p>
+        </div>
+        <div className="mx-auto mt-16 grid max-w-6xl gap-6 sm:grid-cols-2 sm:gap-8 md:mt-32 md:gap-y-6 lg:grid-cols-3 lg:gap-x-4 lg:gap-y-10 xl:grid-cols-4">
+          {FEATURES.map((feature) => {
+            const Icon = feature.icon;
+
+            return (
+              <a
+                key={feature.id}
+                href={feature.link}
+                className="group flex flex-col gap-1 rounded-lg text-start transition-colors md:p-4 md:hover:bg-muted"
+              >
+                <div className="flex items-center gap-2">
+                  <Icon className="size-4 shrink-0" />
+                  <div className="flex items-center gap-1">
+                    <p className="text-sm font-medium">{feature.title}</p>
+                    <ChevronRight className="size-4 shrink-0 transition-transform md:group-hover:translate-x-0.5 rtl:rotate-180 rtl:md:group-hover:-translate-x-0.5" />
+                  </div>
+                </div>
+                <p className="text-sm text-pretty text-muted-foreground">
+                  {feature.description}
+                </p>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature210 };
diff --git a/blocks/feature211.tsx b/blocks/feature211.tsx
new file mode 100644
index 0000000..33dc278
--- /dev/null
+++ b/blocks/feature211.tsx
@@ -0,0 +1,290 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import type { LucideIcon } from "lucide-react";
+import { ArrowRight, Eye, ScanFace, Users, View } from "lucide-react";
+
+import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+type ImageType = {
+  src: string;
+  alt: string;
+};
+
+type VariantType = "1" | "2" | "3" | "4";
+
+interface TabItem {
+  id: string;
+  icon: LucideIcon;
+  title: string;
+  tabName: string;
+  summary: string;
+  imageComponent: VariantType;
+  images: ImageType[];
+  link?: {
+    name: string;
+    href: string;
+  };
+}
+
+const TAB_LIST: TabItem[] = [
+  {
+    id: "active-speaker",
+    icon: ScanFace,
+    title: "خرید و تأمین",
+    tabName: "یکپارچگی",
+    summary:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    imageComponent: "1",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+        alt: "گزارش مالی یکپارچه",
+      },
+    ],
+  },
+  {
+    id: "eye-contact",
+    icon: Eye,
+    title: "فاکتور و پرداخت",
+    tabName: "ERP",
+    summary:
+      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+    imageComponent: "2",
+    link: {
+      name: "بیشتر بدانید",
+      href: "",
+    },
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+        alt: "داشبورد ERP",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+        alt: "مدیریت عملیات",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+        alt: "گزارش مالی یکپارچه",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
+        alt: "داشبورد ERP",
+      },
+    ],
+  },
+  {
+    id: "green-screen",
+    icon: View,
+    title: "ERP",
+    tabName: "ERP",
+    summary:
+      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+    imageComponent: "3",
+    link: {
+      name: "بیشتر بدانید",
+      href: "",
+    },
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+        alt: "مدیریت عملیات",
+      },
+    ],
+  },
+  {
+    id: "multicam",
+    icon: Users,
+    title: "ERP",
+    tabName: "عملیات",
+    summary:
+      "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
+    imageComponent: "4",
+    link: {
+      name: "بیشتر بدانید",
+      href: "",
+    },
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+        alt: "گزارش مالی یکپارچه",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+        alt: "داشبورد ERP",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+        alt: "مدیریت عملیات",
+      },
+    ],
+  },
+];
+
+interface ImagesProps {
+  images: ImageType[];
+  variant?: VariantType;
+}
+
+const POSITIONS: CSSProperties[] = [
+  { top: "12%", insetInlineEnd: "36%", rotate: "2.6deg" },
+  { top: "12%", insetInlineEnd: "70%", rotate: "-2.4deg" },
+  { bottom: "16%", insetInlineEnd: "35%", rotate: "1.6deg" },
+  { bottom: "15%", insetInlineEnd: "2%", rotate: "-1.5deg" },
+];
+
+const Images = ({ images, variant = "1" }: ImagesProps) => {
+  switch (variant) {
+    case "1":
+      return (
+        <div className="ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-ts-[0.5rem] rounded-bs-[0.5rem]">
+          <img
+            className="block size-full object-cover object-center"
+            src={images[0].src}
+            alt={images[0].alt}
+          />
+        </div>
+      );
+    case "2":
+      return (
+        <div className="size-full ps-4">
+          <div className="relative ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-[0.625rem]">
+            {images.map((img, i) => (
+              <div
+                style={POSITIONS[i]}
+                className="absolute aspect-[0.845360825] w-[30%] overflow-hidden rounded-[0.5rem] shadow-md"
+                key={`img-${variant}-${img.src}`}
+              >
+                <img
+                  src={img.src}
+                  alt={img.alt}
+                  className="block size-full object-cover object-center"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    case "3":
+      return (
+        <div className="relative ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-[0.625rem]">
+          <div className="absolute start-[5%] top-1/2 aspect-[1.586206897] w-[120%] -translate-y-1/2 overflow-hidden rounded-2xl shadow-xl xl:end-[-22%]">
+            <img
+              src={images[0].src}
+              alt={images[0].alt}
+              className="block size-full object-cover object-center"
+            />
+          </div>
+        </div>
+      );
+
+    default:
+      return (
+        <div className="ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden ps-4 xl:ps-0">
+          <div className="grid size-full grid-cols-2 grid-rows-2 gap-[3%]">
+            <div className="col-start-1 col-end-2 row-start-1 row-end-2 overflow-hidden rounded-[0.625rem]">
+              <img
+                src={images[0].src}
+                alt={images[0].alt}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+            <div className="col-start-1 col-end-2 row-start-2 row-end-3 overflow-hidden rounded-[0.625rem]">
+              <img
+                src={images[1].src}
+                alt={images[1].alt}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+            <div className="col-start-2 col-end-3 row-start-1 row-end-3 overflow-hidden rounded-ts-[0.625rem] rounded-bs-[0.625rem]">
+              <img
+                src={images[2].src}
+                alt={images[2].alt}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+          </div>
+        </div>
+      );
+  }
+};
+
+interface Feature211Props {
+  className?: string;
+}
+
+const Feature211 = ({ className }: Feature211Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="rounded-xl bg-muted py-11">
+          <Tabs
+            dir="rtl"
+            defaultValue={TAB_LIST[0].tabName}
+            className="flex-col-reverse gap-10"
+          >
+            <ScrollableTabsList>
+              <TabsList
+                dir="rtl"
+                className="mx-auto flex !h-auto justify-start overflow-y-hidden bg-muted px-2 lg:w-max lg:items-center lg:justify-center lg:rounded-full"
+              >
+                {TAB_LIST.map((tab) => (
+                  <TabsTrigger
+                    className="shrink-0 rounded-full px-4 py-2 text-sm leading-tight font-medium"
+                    key={tab.id}
+                    value={tab.tabName}
+                  >
+                    {tab.tabName}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </ScrollableTabsList>
+            {TAB_LIST.map((tab) => {
+              const Icon = tab.icon;
+
+              return (
+                <TabsContent
+                  value={tab.tabName}
+                  dir="rtl"
+                  className="grid w-full grid-cols-1 items-center gap-8 xl:grid-cols-[37.5rem_1fr]"
+                  key={tab.id}
+                >
+                  <div className="flex flex-col items-start gap-4 px-8 text-right xl:ps-18">
+                    <div className="flex size-8 rounded-lg bg-primary text-primary-foreground">
+                      <Icon className="m-auto size-4" />
+                    </div>
+                    <h2 className="font-serif text-2xll text-balance xl:text-2xll">
+                      {tab.title}
+                    </h2>
+                    <p className="mt-4 text-xl text-pretty text-foreground">
+                      {tab.summary}
+                    </p>
+                    <div>
+                      {tab.link && (
+                        <Button asChild size="lg" className="w-full gap-2 md:w-fit">
+                          <a href={tab.link.href}>
+                            {tab.link.name}
+                            <ArrowRight className="size-4 rtl:rotate-180" />
+                          </a>
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                  <div className="h-full w-full justify-self-end ps-4 md:ps-0">
+                    <Images variant={tab.imageComponent} images={tab.images} />
+                  </div>
+                </TabsContent>
+              );
+            })}
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature211 };
diff --git a/blocks/feature213.tsx b/blocks/feature213.tsx
new file mode 100644
index 0000000..78734c8
--- /dev/null
+++ b/blocks/feature213.tsx
@@ -0,0 +1,110 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface TabItem {
+  id: string;
+  title: string;
+  value: string;
+  summary: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+}
+
+const LIST: TabItem[] = [
+  {
+    id: "edit-by-text",
+    title: "گزارش‌ساز",
+    value: "1",
+    summary:
+      "داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "گزارش‌ساز",
+    },
+  },
+  {
+    id: "clear-audio",
+    title: "Pivot تعاملی",
+    value: "2",
+    summary:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      alt: "تحلیل داده سازمان",
+    },
+  },
+  {
+    id: "green-screen",
+    title: "داشبورد مدیریتی",
+    value: "3",
+    summary:
+      "داده سازمانی",
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      alt: "داشبورد هوش تجاری",
+    },
+  },
+];
+
+interface Feature213Props {
+  className?: string;
+}
+
+const Feature213 = ({ className }: Feature213Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-8 flex max-w-[52.5rem] flex-col items-center justify-between gap-6 md:mb-20">
+          <h2 className="text-center text-2xll tracking-tight text-balance text-foreground lg:text-2xll">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h2>
+        </div>
+        <div>
+          <Tabs
+            dir="rtl"
+            defaultValue={LIST[0].value}
+            className="flex gap-14 xl:!flex-row"
+          >
+            <TabsList className="!h-fit w-fit flex-col gap-2.5 bg-transparent p-0">
+              {LIST.map((item) => (
+                <TabsTrigger
+                  className="flex-col items-start rounded-[0.75rem] p-5 text-right whitespace-normal data-[state=active]:bg-muted xl:max-w-[34.0625rem]"
+                  key={item.id}
+                  value={item.value}
+                >
+                  <div className="leading-normal font-bold">{item.title}</div>
+                  <div className="leading-normal text-pretty text-muted-foreground">
+                    {item.summary}
+                  </div>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            {LIST.map((item) => (
+              <TabsContent
+                className="w-full"
+                key={item.id}
+                value={item.value}
+              >
+                <AspectRatio
+                  ratio={16 / 9}
+                  className="overflow-hidden rounded-[0.75rem]"
+                >
+                  <img
+                    src={item.image.src}
+                    alt={item.image.alt}
+                    className="block size-full object-cover object-center"
+                  />
+                </AspectRatio>
+              </TabsContent>
+            ))}
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature213 };
diff --git a/blocks/feature214.tsx b/blocks/feature214.tsx
new file mode 100644
index 0000000..222978a
--- /dev/null
+++ b/blocks/feature214.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  AudioLines,
+  Captions,
+  Eye,
+  Languages,
+  ListMinus,
+  ScanFace,
+  TextQuote,
+} from "lucide-react";
+import { useRef } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface CarouselCardItem {
+  id: string;
+  video: string;
+  Icon: LucideIcon;
+  title: string;
+  link: string;
+  summary: string;
+}
+
+const CARDS: CarouselCardItem[] = [
+  {
+    id: "code-analysis",
+    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    Icon: Eye,
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    link: "#",
+    summary:
+      "تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.",
+  },
+  {
+    id: "multi-language",
+    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    Icon: Languages,
+    title: "اتوماسیون مراحل فروش",
+    link: "#",
+    summary:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+  },
+  {
+    id: "refactoring",
+    video: "/block-media/shadcnblocks/block/video-7-640_360_30fps.mp4",
+    Icon: AudioLines,
+    title: "پیش‌بینی درآمد",
+    link: "#",
+    summary:
+      "از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.",
+  },
+  {
+    id: "code-cleanup",
+    video: "/block-media/shadcnblocks/block/video-5.mp4",
+    Icon: ListMinus,
+    title: "یادآور پیگیری هوشمند",
+    link: "#",
+    summary:
+      "پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.",
+  },
+  {
+    id: "security-scanner",
+    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    Icon: ScanFace,
+    title: "تقسیم خودکار سرنخ",
+    link: "#",
+    summary:
+      "تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.",
+  },
+  {
+    id: "documentation",
+    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    Icon: TextQuote,
+    title: "گزارش عملکرد فروش",
+    link: "#",
+    summary:
+      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+  },
+  {
+    id: "code-suggestions",
+    video: "/block-media/shadcnblocks/block/video-7-640_360_30fps.mp4",
+    Icon: Captions,
+    title: "مدیریت قرارداد",
+    link: "#",
+    summary:
+      "از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.",
+  },
+];
+
+const CarouselCard = ({ video, Icon, title, link, summary }: CarouselCardItem) => {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  return (
+    <a
+      href={link}
+      className="group block h-full"
+      onMouseEnter={() => {
+        if (videoRef.current) {
+          videoRef.current.play();
+        }
+      }}
+      onMouseLeave={() => {
+        if (videoRef.current) {
+          videoRef.current.pause();
+          videoRef.current.currentTime = 0;
+        }
+      }}
+    >
+      <Card className="min-h-[39.75rem] bg-muted p-8 shadow-none transition-all group-hover:shadow-md">
+        <CardContent className="p-0">
+          <div className="relative">
+            <div className="h-[20rem] w-full overflow-hidden rounded-[0.5rem]">
+              <video
+                src={video}
+                className="block size-full object-cover object-center"
+                ref={videoRef}
+                controls={false}
+                muted
+                aria-label={title}
+              />
+            </div>
+            <div className="absolute -start-2 -top-3 flex size-9 rounded-[0.5rem] bg-primary">
+              <Icon className="m-auto size-4 stroke-primary-foreground" />
+            </div>
+          </div>
+          <div className="mt-8 flex flex-col gap-2 text-start">
+            <CardTitle className="text-xl leading-[130%] font-normal tracking-[-0.48px] text-foreground">
+              {title}
+            </CardTitle>
+            <CardDescription className="text-lg leading-[150%] tracking-[-0.36px] text-pretty">
+              {summary}
+            </CardDescription>
+          </div>
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+interface Feature214Props {
+  className?: string;
+}
+
+const Feature214 = ({ className }: Feature214Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-16 flex max-w-[47.5rem] flex-col gap-6">
+          <h2 className="text-center font-serif text-xl text-balance md:text-2xll xl:text-2xll">
+            هر سرنخ را تا قرارداد دنبال کنید
+          </h2>
+          <p className="text-center text-xl text-pretty">
+            پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.
+          </p>
+        </div>
+        <Carousel
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+          className="w-full"
+        >
+          <CarouselContent className="py-4">
+            {CARDS.map((item) => (
+              <CarouselItem
+                key={item.id}
+                className="basis-full sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
+              >
+                <CarouselCard {...item} />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="mt-8 flex w-full justify-end gap-4">
+            <CarouselPrevious className="static size-12" />
+            <CarouselNext className="static size-12" />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Feature214 };
diff --git a/blocks/feature215.tsx b/blocks/feature215.tsx
new file mode 100644
index 0000000..d97bfef
--- /dev/null
+++ b/blocks/feature215.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  AudioLines,
+  Captions,
+  Eye,
+  Languages,
+  ListMinus,
+  ScanFace,
+  TextQuote,
+} from "lucide-react";
+import { useRef } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface CarouselCardItem {
+  id: string;
+  video: string;
+  Icon: LucideIcon;
+  title: string;
+  link: string;
+  summary: string;
+}
+
+const CARDS: CarouselCardItem[] = [
+  {
+    id: "design-system",
+    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    Icon: Eye,
+    title: "همکاری فروش و بازاریابی",
+    link: "#",
+    summary:
+      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+  },
+  {
+    id: "framework-agnostic",
+    video: "/block-media/shadcnblocks/block/video-2.mp4",
+    Icon: Languages,
+    title: "اولویت‌بندی سرنخ",
+    link: "#",
+    summary:
+      "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
+  },
+  {
+    id: "interactive",
+    video: "/block-media/shadcnblocks/block/video-3.mp4",
+    Icon: AudioLines,
+    title: "قالب پیشنهاد فروش",
+    link: "#",
+    summary:
+      "چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.",
+  },
+  {
+    id: "minimal-setup",
+    video: "/block-media/shadcnblocks/block/video-4.mp4",
+    Icon: ListMinus,
+    title: "ردیابی کووت",
+    link: "#",
+    summary:
+      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+  },
+  {
+    id: "accessibility",
+    video: "/block-media/shadcnblocks/block/video-5.mp4",
+    Icon: ScanFace,
+    title: "تحلیل باخت معامله",
+    link: "#",
+    summary:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+  },
+  {
+    id: "documentation",
+    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    Icon: TextQuote,
+    title: "هدف‌گذاری تیمی",
+    link: "#",
+    summary:
+      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+  },
+  {
+    id: "typescript",
+    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    Icon: Captions,
+    title: "اتوماسیون پیگیری",
+    link: "#",
+    summary:
+      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+  },
+];
+
+const CarouselCard = ({ video, Icon, title, link, summary }: CarouselCardItem) => {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  return (
+    <a
+      href={link}
+      className="group block h-full"
+      onMouseEnter={() => {
+        if (videoRef.current) {
+          videoRef.current.play();
+        }
+      }}
+      onMouseLeave={() => {
+        if (videoRef.current) {
+          videoRef.current.pause();
+          videoRef.current.currentTime = 0;
+        }
+      }}
+    >
+      <Card className="h-full min-h-[24rem] bg-muted p-8 shadow-none transition-all group-hover:shadow-md">
+        <CardContent className="p-0">
+          <div className="relative">
+            <AspectRatio
+              ratio={16 / 9}
+              className="overflow-hidden rounded-[0.5rem]"
+            >
+              <video
+                src={video}
+                className="block size-full object-cover object-center"
+                ref={videoRef}
+                controls={false}
+                muted
+                aria-label={title}
+              />
+            </AspectRatio>
+            <div className="absolute -start-2 -top-3 flex size-9 rounded-[0.5rem] bg-primary">
+              <Icon className="m-auto size-4 stroke-primary-foreground" />
+            </div>
+          </div>
+          <div className="mt-8 flex flex-col gap-2 text-start">
+            <CardTitle className="text-xl leading-[130%] font-normal tracking-[-0.48px] text-foreground">
+              {title}
+            </CardTitle>
+            <CardDescription className="text-sm leading-[150%] tracking-[-0.36px] text-pretty">
+              {summary}
+            </CardDescription>
+          </div>
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+interface Feature215Props {
+  className?: string;
+}
+
+const Feature215 = ({ className }: Feature215Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-16 flex max-w-[47.5rem] flex-col gap-6">
+          <h2 className="text-center text-xl font-semibold text-balance xl:text-2xll">
+            پیش‌بینی درآمد را دقیق‌تر کنید
+          </h2>
+          <p className="text-center text-xl text-pretty text-muted-foreground">
+            الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.
+          </p>
+        </div>
+        <Carousel
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+          className="w-full"
+        >
+          <CarouselContent className="py-4">
+            {CARDS.map((item) => (
+              <CarouselItem
+                key={item.id}
+                className="basis-full md:basis-1/2 lg:basis-1/3"
+              >
+                <CarouselCard {...item} />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="mt-8 flex w-full justify-center gap-4">
+            <CarouselPrevious className="static size-12" />
+            <CarouselNext className="static size-12" />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Feature215 };
diff --git a/blocks/feature215a.tsx b/blocks/feature215a.tsx
new file mode 100644
index 0000000..96cc51c
--- /dev/null
+++ b/blocks/feature215a.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  AudioLines,
+  Eye,
+  Languages,
+  ListMinus,
+  ScanFace,
+  TextQuote,
+} from "lucide-react";
+import { useRef } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface GridCardItem {
+  id: string;
+  video: string;
+  Icon: LucideIcon;
+  title: string;
+  link: string;
+  summary: string;
+}
+
+const CARDS: GridCardItem[] = [
+  {
+    id: "design-system",
+    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    Icon: Eye,
+    title: "ردیابی UTM",
+    link: "#",
+    summary:
+      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+  },
+  {
+    id: "framework-agnostic",
+    video: "/block-media/shadcnblocks/block/video-2.mp4",
+    Icon: Languages,
+    title: "گزارش ROI",
+    link: "#",
+    summary:
+      "با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.",
+  },
+  {
+    id: "interactive",
+    video: "/block-media/shadcnblocks/block/video-3.mp4",
+    Icon: AudioLines,
+    title: "مدیریت کمپین",
+    link: "#",
+    summary:
+      "گزارش لحظه‌ای هزینه، کلیک و تبدیل به شما کمک می‌کند بودجه را از کانال‌های ضعیف به کانال‌های پربازده منتقل کنید.",
+  },
+  {
+    id: "minimal-setup",
+    video: "/block-media/shadcnblocks/block/video-4.mp4",
+    Icon: ListMinus,
+    title: "سگمنت‌بندی مخاطب",
+    link: "#",
+    summary:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+  },
+  {
+    id: "accessibility",
+    video: "/block-media/shadcnblocks/block/video-5.mp4",
+    Icon: ScanFace,
+    title: "تحلیل کانال",
+    link: "#",
+    summary:
+      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+  },
+  {
+    id: "documentation",
+    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    Icon: TextQuote,
+    title: "اتوماسیون ایمیل",
+    link: "#",
+    summary:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+  },
+];
+
+const GridCard = ({ video, Icon, title, link, summary }: GridCardItem) => {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  return (
+    <a
+      href={link}
+      className="group block"
+      onMouseEnter={() => {
+        if (videoRef.current) {
+          videoRef.current.play();
+        }
+      }}
+      onMouseLeave={() => {
+        if (videoRef.current) {
+          videoRef.current.pause();
+          videoRef.current.currentTime = 0;
+        }
+      }}
+    >
+      <Card className="h-full bg-muted transition-all duration-200 hover:shadow-lg">
+        <CardContent>
+          <div className="relative mb-4">
+            <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md">
+              <video
+                src={video}
+                className="block size-full object-cover object-center"
+                ref={videoRef}
+                controls={false}
+                muted
+                aria-label={title}
+              />
+            </AspectRatio>
+          </div>
+          <div className="flex flex-col gap-2 text-start">
+            <CardTitle className="flex items-center gap-2 text-lg font-medium text-foreground">
+              <Icon className="size-6 shrink-0 rounded-sm bg-primary stroke-primary-foreground p-1" />
+              {title}
+            </CardTitle>
+            <CardDescription className="text-sm leading-relaxed text-pretty">
+              {summary}
+            </CardDescription>
+          </div>
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+interface Feature215aProps {
+  className?: string;
+}
+
+const Feature215a = ({ className }: Feature215aProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24", className)}>
+      <div className="container">
+        <div className="mx-auto mb-16 flex max-w-[47.5rem] flex-col gap-4 text-center">
+          <h2 className="text-3xl font-bold text-balance xl:text-2xll">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </h2>
+          <p className="text-lg text-pretty text-muted-foreground">
+            کمپین‌ها، محتوا و عملکرد کانال‌ها در یک پنل واحد دیده می‌شود. تیم بازاریابی سریع‌تر تست می‌کند، بهینه می‌کند و ROI هر فعالیت را شفاف گزارش می‌دهد.
+          </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {CARDS.map((item) => (
+            <GridCard key={item.id} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature215a };
diff --git a/blocks/feature215b.tsx b/blocks/feature215b.tsx
new file mode 100644
index 0000000..12156da
--- /dev/null
+++ b/blocks/feature215b.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  AudioLines,
+  Eye,
+  Languages,
+  ListMinus,
+  ScanFace,
+  TextQuote,
+} from "lucide-react";
+import { useRef } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface HorizontalCardItem {
+  id: string;
+  video: string;
+  Icon: LucideIcon;
+  title: string;
+  link: string;
+  summary: string;
+}
+
+const CARDS: HorizontalCardItem[] = [
+  {
+    id: "design-system",
+    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    Icon: Eye,
+    title: "لاگ اجرا",
+    link: "#",
+    summary:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+  },
+  {
+    id: "framework-agnostic",
+    video: "/block-media/shadcnblocks/block/video-2.mp4",
+    Icon: Languages,
+    title: "قالب آماده",
+    link: "#",
+    summary:
+      "قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.",
+  },
+  {
+    id: "interactive",
+    video: "/block-media/shadcnblocks/block/video-3.mp4",
+    Icon: AudioLines,
+    title: "اتصال ابزار",
+    link: "#",
+    summary:
+      "فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.",
+  },
+  {
+    id: "minimal-setup",
+    video: "/block-media/shadcnblocks/block/video-4.mp4",
+    Icon: ListMinus,
+    title: "سازنده گردش‌کار",
+    link: "#",
+    summary:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+  },
+  {
+    id: "accessibility",
+    video: "/block-media/shadcnblocks/block/video-5.mp4",
+    Icon: ScanFace,
+    title: "تریگر رویداد",
+    link: "#",
+    summary:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+  },
+  {
+    id: "documentation",
+    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    Icon: TextQuote,
+    title: "شرط هوشمند",
+    link: "#",
+    summary:
+      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+  },
+];
+
+const HorizontalCard = ({
+  video,
+  Icon,
+  title,
+  link,
+  summary,
+}: HorizontalCardItem) => {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  return (
+    <div
+      className="group flex flex-col gap-6 border-b border-border py-8 last:border-b-0 md:flex-row md:items-center"
+      onMouseEnter={() => {
+        if (videoRef.current) {
+          videoRef.current.play();
+        }
+      }}
+      onMouseLeave={() => {
+        if (videoRef.current) {
+          videoRef.current.pause();
+          videoRef.current.currentTime = 0;
+        }
+      }}
+    >
+      <div className="md:w-1/3">
+        <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg">
+          <video
+            src={video}
+            className="block size-full object-cover object-center"
+            ref={videoRef}
+            controls={false}
+            muted
+            aria-label={title}
+          />
+        </AspectRatio>
+      </div>
+
+      <div className="flex flex-1 flex-col gap-4 text-start md:ps-6">
+        <div className="flex items-center gap-3">
+          <div className="flex size-8 shrink-0 rounded-md bg-primary">
+            <Icon className="m-auto size-4 text-primary-foreground" />
+          </div>
+          <h3 className="text-xl font-semibold">{title}</h3>
+        </div>
+
+        <p className="leading-relaxed text-pretty text-muted-foreground">
+          {summary}
+        </p>
+
+        <div>
+          <Button variant="outline" size="sm" asChild>
+            <a href={link}>بیشتر بدانید</a>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface Feature215bProps {
+  className?: string;
+}
+
+const Feature215b = ({ className }: Feature215bProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-20", className)}>
+      <div className="container">
+        <div className="mx-auto mb-12 max-w-3xl text-center">
+          <h2 className="mb-4 text-3xl font-bold text-balance xl:text-2xll">
+            فرایندها را استاندارد و سریع کنید
+          </h2>
+          <p className="text-lg text-pretty text-muted-foreground">
+            اتوماسیون را در کل سازمان یکپارچه کنید
+          </p>
+        </div>
+
+        <div className="mx-auto max-w-4xl">
+          {CARDS.map((item) => (
+            <HorizontalCard key={item.id} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature215b };
diff --git a/blocks/feature216.tsx b/blocks/feature216.tsx
new file mode 100644
index 0000000..a0cd454
--- /dev/null
+++ b/blocks/feature216.tsx
@@ -0,0 +1,297 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Brain,
+  Circle,
+  ClipboardList,
+  MessageSquare,
+  Rocket,
+  Share2,
+  Users,
+} from "lucide-react";
+import { startTransition, useEffect, useRef, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const TAB_ITEMS = [
+  {
+    id: "team-sync",
+    value: "team_sync",
+    name: "داده پراکنده را به تصمیم تبدیل کنید",
+    icon: Users,
+    color: "#2563EB",
+    image: {
+      src: "/block-media/shadcnblocks/block/photos/redd-f-5U_28ojjgms-unsplash.jpg",
+      alt: "گزارش عملکرد",
+    },
+    summary: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    link: "#",
+  },
+  {
+    id: "discussions",
+    value: "discussions",
+    name: "تحلیل داده",
+    icon: MessageSquare,
+    color: "#F97316",
+    image: {
+      src: "/block-media/shadcnblocks/block/photos/annie-spratt-hCb3lIB8L8E-unsplash.jpg",
+      alt: "داشبورد تحلیل داده",
+    },
+    summary: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    link: "#",
+  },
+  {
+    id: "knowledge-share",
+    value: "knowledge_share",
+    name: "داشبورد",
+    icon: Share2,
+    color: "#A855F7",
+    image: {
+      src: "/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg",
+      alt: "نمودار شاخص کلیدی",
+    },
+    summary: "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    link: "#",
+  },
+  {
+    id: "brainstorming",
+    value: "brainstorming",
+    name: "شاخص کلیدی",
+    icon: Brain,
+    color: "#10B981",
+    image: {
+      src: "/block-media/shadcnblocks/block/photos/dylan-gillis-KdeqA3aTnBY-unsplash.jpg",
+      alt: "گزارش عملکرد",
+    },
+    summary: "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    link: "#",
+  },
+  {
+    id: "task-tracking",
+    value: "task_tracking",
+    name: "بینش لحظه‌ای",
+    icon: ClipboardList,
+    color: "#EF4444",
+    image: {
+      src: "/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg",
+      alt: "داشبورد تحلیل داده",
+    },
+    summary: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    link: "#",
+  },
+  {
+    id: "launch-prep",
+    value: "launch_prep",
+    name: "تحلیل داده",
+    icon: Rocket,
+    color: "#EAB308",
+    image: {
+      src: "/block-media/shadcnblocks/block/photos/annie-spratt-vGgn0xLdy8s-unsplash.jpg",
+      alt: "نمودار شاخص کلیدی",
+    },
+    summary: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    link: "#",
+  },
+] as const;
+
+type TabValue = (typeof TAB_ITEMS)[number]["value"];
+
+interface TabLabelProps {
+  value: string;
+}
+
+const TabLabel = ({ value }: TabLabelProps) => {
+  const [label, setLabel] = useState<{
+    name: string;
+    icon: LucideIcon;
+    color: string;
+  }>({
+    name: "",
+    icon: Circle,
+    color: "",
+  });
+
+  useEffect(() => {
+    const tab = TAB_ITEMS.find((trigger) => trigger.value === value);
+    if (!tab) return;
+
+    startTransition(() => {
+      setLabel({
+        name: tab.name,
+        icon: tab.icon,
+        color: tab.color,
+      });
+    });
+  }, [value]);
+
+  const Icon = label.icon;
+
+  return (
+    <div className="mb-8 flex items-center justify-center gap-6 xl:hidden">
+      <div
+        className="flex size-8 rounded-md"
+        style={{ backgroundColor: label.color }}
+      >
+        <Icon className="m-auto stroke-white" />
+      </div>
+      <div className="text-lg">{label.name}</div>
+    </div>
+  );
+};
+
+interface Feature216Props {
+  className?: string;
+}
+
+const Feature216 = ({ className }: Feature216Props) => {
+  const [buttonPosition, setButtonPosition] = useState<number>(0);
+  const [tabValue, setTabValue] = useState<TabValue>(TAB_ITEMS[0].value);
+  const triggerRefs = useRef<HTMLButtonElement[]>([]);
+  const imageRef = useRef<HTMLDivElement | null>(null);
+
+  const updateBottom = () => {
+    if (imageRef.current) {
+      const height = imageRef.current.getBoundingClientRect().height / 2;
+      startTransition(() => {
+        setButtonPosition(height);
+      });
+    }
+  };
+
+  useEffect(() => {
+    updateBottom();
+    window.addEventListener("resize", updateBottom);
+    return () => {
+      window.removeEventListener("resize", updateBottom);
+    };
+  }, []);
+
+  const getCurrentTabIndex = () => {
+    return TAB_ITEMS.findIndex((elem) => elem.value === tabValue);
+  };
+
+  const handleTabNavigation = (direction: "next" | "prev") => {
+    triggerRefs.current.forEach((ref) => {
+      ref.classList.add("grayscale-[1]", "opacity-[0.2]");
+    });
+
+    const currentIndex = getCurrentTabIndex();
+    if (currentIndex === -1) return;
+
+    const nextIndex =
+      direction === "next" ? currentIndex + 1 : currentIndex - 1;
+
+    const isInBounds = nextIndex >= 0 && nextIndex < TAB_ITEMS.length;
+
+    if (isInBounds) {
+      setTabValue(TAB_ITEMS[nextIndex].value);
+    }
+  };
+
+  const onValueChange = (value: string) => {
+    setTabValue(value as TabValue);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-10 text-center text-3xl font-light text-balance md:text-xl">
+          شاخص‌های کلیدی را یکجا ببینید
+        </h2>
+        <Tabs value={tabValue} onValueChange={onValueChange} className="w-full">
+          <TabsList className="hidden !h-auto w-full items-end gap-12 bg-transparent pb-10 xl:flex">
+            {TAB_ITEMS.map((trigger, index) => {
+              const Icon = trigger.icon;
+
+              return (
+                <TabsTrigger
+                  ref={(el) => {
+                    if (el) {
+                      triggerRefs.current[index] = el;
+                    } else {
+                      delete triggerRefs.current[index];
+                    }
+                  }}
+                  className="flex !h-auto flex-col items-center gap-5 !border-none !bg-transparent p-0 opacity-[0.2] !shadow-none grayscale-[1] hover:!bg-transparent hover:opacity-[0.5] hover:grayscale-[0] data-[state=active]:!bg-transparent data-[state=active]:opacity-100 data-[state=active]:!shadow-none data-[state=active]:grayscale-0 dark:!bg-transparent dark:data-[state=active]:!bg-transparent"
+                  key={trigger.id}
+                  value={trigger.value}
+                  data-index={index}
+                >
+                  <div
+                    className="flex size-8 rounded-md"
+                    style={{ backgroundColor: trigger.color }}
+                  >
+                    <Icon className="m-auto stroke-white" />
+                  </div>
+                  <div className="text-xl font-normal">{trigger.name}</div>
+                </TabsTrigger>
+              );
+            })}
+          </TabsList>
+          <div className="relative">
+            {TAB_ITEMS.map((tab) => (
+              <TabsContent
+                key={tab.id}
+                value={tab.value}
+                className="animate-in duration-300 ease-in-out fade-in"
+              >
+                <TabLabel value={tab.value} />
+                <div className="w-full" ref={imageRef}>
+                  <AspectRatio
+                    ratio={1.847058824}
+                    className="w-full overflow-hidden rounded-lg border shadow-xl"
+                  >
+                    <img
+                      src={tab.image.src}
+                      alt={tab.image.alt}
+                      className="block size-full object-cover object-center"
+                    />
+                  </AspectRatio>
+                </div>
+                <p className="mt-4 text-center text-sm text-pretty text-muted-foreground">
+                  {tab.summary}
+                </p>
+              </TabsContent>
+            ))}
+            <div
+              className="absolute start-0 translate-y-1/2"
+              style={{ bottom: buttonPosition }}
+            >
+              <Button
+                variant="secondary"
+                disabled={getCurrentTabIndex() === 0}
+                onClick={() => handleTabNavigation("prev")}
+                size="lg"
+                className="size-12 -translate-x-1/2 rounded-full border shadow-lg rtl:translate-x-1/2"
+              >
+                <ArrowLeft className="rtl:rotate-180" />
+              </Button>
+            </div>
+            <div
+              className="absolute end-0 translate-y-1/2"
+              style={{ bottom: buttonPosition }}
+            >
+              <Button
+                variant="secondary"
+                disabled={getCurrentTabIndex() === TAB_ITEMS.length - 1}
+                onClick={() => handleTabNavigation("next")}
+                size="lg"
+                className="size-12 translate-x-1/2 rounded-full border shadow-lg rtl:-translate-x-1/2"
+              >
+                <ArrowRight className="rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature216 };
diff --git a/blocks/feature217.tsx b/blocks/feature217.tsx
new file mode 100644
index 0000000..158bb72
--- /dev/null
+++ b/blocks/feature217.tsx
@@ -0,0 +1,104 @@
+import type { LucideIcon } from "lucide-react";
+import { Eye, Keyboard, Volume2 } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { cn } from "@/lib/utils";
+
+interface Item {
+  id: string;
+  title: string;
+  summary: string;
+  icon: LucideIcon;
+}
+
+const FEATURES: Item[] = [
+  {
+    id: "keyboard-navigation",
+    title: "پاسخ آماده",
+    summary:
+      "پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.",
+    icon: Keyboard,
+  },
+  {
+    id: "screen-reader",
+    title: "SLA هوشمند",
+    summary:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    icon: Volume2,
+  },
+  {
+    id: "color-contrast",
+    title: "نظرسنجی رضایت",
+    summary:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    icon: Eye,
+  },
+];
+
+const FeatureItem = ({ title, summary, icon: Icon }: Item) => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <Icon className="size-7 stroke-muted-foreground" />
+      <div className="max-w-xs text-center text-xl font-semibold text-balance">
+        {title}
+      </div>
+      <div className="max-w-lg text-center text-base text-pretty text-muted-foreground">
+        {summary}
+      </div>
+    </div>
+  );
+};
+
+interface Feature217Props {
+  className?: string;
+}
+
+const Feature217 = ({ className }: Feature217Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn(className)}>
+      <div
+        className="relative bg-cover bg-center bg-no-repeat py-10 after:absolute after:inset-0 after:z-10 after:block after:size-full after:bg-black/40 after:content-[''] md:py-16 xl:px-6 xl:py-28"
+        style={{
+          backgroundImage:
+            "url('/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png')",
+        }}
+      >
+        <div className="relative z-20 container">
+          <div className="grid items-start justify-start gap-14 xl:grid-cols-2 xl:items-center xl:justify-center">
+            <div className="flex flex-col gap-8 text-start">
+              <h2 className="text-xl tracking-tight text-balance text-white md:text-2xll">
+                زمان حل مسئله را کوتاه کنید
+              </h2>
+              <p className="text-lg font-medium tracking-tight text-pretty text-white">
+                رضایت مشتری و زمان حل را پیگیری کنید تا نقاط ضعف فرایند پشتیبانی را بهبود دهید.
+              </p>
+            </div>
+            <div className="flex items-center justify-end">
+              <div className="max-w-xl xl:w-full">
+                <AspectRatio
+                  ratio={0.80239521}
+                  className="w-full overflow-hidden rounded-xl shadow-xl"
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                    alt="مدیریت تیکت"
+                    className="block size-full object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container">
+        <div className="grid items-start gap-16 py-20 lg:grid-cols-3">
+          {FEATURES.map((item) => (
+            <FeatureItem key={item.id} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature217 };
diff --git a/blocks/feature217a.tsx b/blocks/feature217a.tsx
new file mode 100644
index 0000000..23b7b92
--- /dev/null
+++ b/blocks/feature217a.tsx
@@ -0,0 +1,102 @@
+import type { LucideIcon } from "lucide-react";
+import { Eye, Keyboard, Volume2 } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { cn } from "@/lib/utils";
+
+interface Item {
+  id: string;
+  title: string;
+  summary: string;
+  icon: LucideIcon;
+}
+
+const FEATURES: Item[] = [
+  {
+    id: "keyboard-navigation",
+    title: "طبقه‌بندی خودکار",
+    summary:
+      "مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.",
+    icon: Keyboard,
+  },
+  {
+    id: "screen-reader",
+    title: "پیش‌بینی ریزش",
+    summary:
+      "از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم می‌کند و کیفیت خروجی را بالا می‌برد.",
+    icon: Volume2,
+  },
+  {
+    id: "color-contrast",
+    title: "جستجوی معنایی",
+    summary:
+      "سیستم با داده سازمان شما یاد می‌گیرد و هر بار پیشنهادهای دقیق‌تری برای بهبود نتیجه ارائه می‌دهد.",
+    icon: Eye,
+  },
+];
+
+const FeatureItem = ({ title, summary, icon: Icon }: Item) => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <Icon className="size-7 stroke-muted-foreground" />
+      <div className="max-w-xs text-center text-xl font-semibold text-balance">
+        {title}
+      </div>
+      <div className="max-w-lg text-center text-base text-pretty text-muted-foreground">
+        {summary}
+      </div>
+    </div>
+  );
+};
+
+interface Feature217aProps {
+  className?: string;
+}
+
+const Feature217a = ({ className }: Feature217aProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn(className)}>
+      <div
+        className="relative bg-cover bg-center bg-no-repeat py-10 after:absolute after:inset-0 after:z-10 after:block after:size-full after:bg-black/40 after:content-[''] md:py-16 xl:px-6 xl:py-28"
+        style={{
+          backgroundImage:
+            "url('/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png')",
+        }}
+      >
+        <div className="relative z-20 container">
+          <div className="flex flex-col items-center justify-center gap-12 text-center">
+            <div className="flex max-w-4xl flex-col gap-5">
+              <h2 className="text-xl tracking-tight text-balance text-white md:text-2xll">
+                با هوش مصنوعی سریع‌تر تصمیم بگیرید
+              </h2>
+              <p className="text-lg font-medium tracking-tight text-pretty text-white">
+                مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+              </p>
+            </div>
+            <div className="max-w-xl">
+              <AspectRatio
+                ratio={0.80239521}
+                className="w-full overflow-hidden rounded-xl shadow-xl"
+              >
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                  alt="دستیار هوش مصنوعی"
+                  className="block size-full object-cover object-center"
+                />
+              </AspectRatio>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container">
+        <div className="grid items-start gap-8 py-20 lg:grid-cols-3">
+          {FEATURES.map((item) => (
+            <FeatureItem key={item.id} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature217a };
diff --git a/blocks/feature217b.tsx b/blocks/feature217b.tsx
new file mode 100644
index 0000000..3e93204
--- /dev/null
+++ b/blocks/feature217b.tsx
@@ -0,0 +1,89 @@
+import type { LucideIcon } from "lucide-react";
+import { Eye, Keyboard, Volume2 } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Item {
+  id: string;
+  title: string;
+  summary: string;
+  icon: LucideIcon;
+}
+
+const FEATURES: Item[] = [
+  {
+    id: "keyboard-navigation",
+    title: "تقویم تیمی",
+    summary:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    icon: Keyboard,
+  },
+  {
+    id: "screen-reader",
+    title: "اشتراک فایل",
+    summary:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    icon: Volume2,
+  },
+  {
+    id: "color-contrast",
+    title: "منشن و بحث",
+    summary:
+      "کار گروهی",
+    icon: Eye,
+  },
+];
+
+interface Feature217bProps {
+  className?: string;
+}
+
+const Feature217b = ({ className }: Feature217bProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn(className)}>
+      <div
+        className="relative bg-cover bg-center bg-no-repeat py-20 after:absolute after:inset-0 after:z-10 after:block after:size-full after:bg-black/50 after:content-[''] md:py-24 xl:py-32"
+        style={{
+          backgroundImage:
+            "url('/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png')",
+        }}
+      >
+        <div className="relative z-20 container">
+          <div className="flex flex-col gap-16">
+            <div className="mx-auto max-w-4xl text-center">
+              <h2 className="mb-6 text-xl tracking-tight text-balance text-white md:text-2xll">
+                همکاری از راه دور را ساده کنید
+              </h2>
+              <p className="text-lg font-medium tracking-tight text-pretty text-white">
+                اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
+              </p>
+            </div>
+
+            <div className="grid items-stretch gap-8 lg:grid-cols-3">
+              {FEATURES.map((item) => {
+                const Icon = item.icon;
+
+                return (
+                  <div
+                    key={item.id}
+                    className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur-sm"
+                  >
+                    <Icon className="size-8 stroke-white" />
+                    <div className="max-w-sm text-center text-xl font-medium text-balance text-white">
+                      {item.title}
+                    </div>
+                    <div className="max-w-sm text-center text-sm text-pretty text-white/70">
+                      {item.summary}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature217b };
diff --git a/blocks/feature218.tsx b/blocks/feature218.tsx
new file mode 100644
index 0000000..ba3c429
--- /dev/null
+++ b/blocks/feature218.tsx
@@ -0,0 +1,54 @@
+import { ArrowRight } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature218Props {
+  className?: string;
+}
+
+const Feature218 = ({ className }: Feature218Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="border-b">
+        <div className="container flex w-full flex-col gap-6">
+          <h2 className="font-serif text-2xll leading-[1.1] tracking-tight text-balance text-foreground md:text-2xll lg:text-8xl">
+            فروش آنلاین را مقیاس‌پذیر کنید
+          </h2>
+          <div className="grid w-full gap-4 xl:grid-cols-[.33fr_.66fr]">
+            <div className="flex flex-col gap-11 text-start">
+              <p className="text-xl leading-[1.6] text-pretty text-muted-foreground">
+                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+              </p>
+              <div>
+                <Button asChild size="lg" className="w-full gap-2 md:w-fit">
+                  <a href="#">
+                    ارتقا به حرفه‌ای
+                    <ArrowRight className="size-4 rtl:rotate-180" />
+                  </a>
+                </Button>
+              </div>
+            </div>
+            <div className="pt-10 xl:pt-20">
+              <div className="relative ms-auto w-full max-w-[50rem] after:absolute after:top-0 after:end-0 after:z-20 after:block after:h-full after:w-1/3 after:rounded-te-2xl after:bg-linear-90 after:from-transparent after:to-background after:content-[''] rtl:after:bg-linear-270">
+                <AspectRatio
+                  ratio={1.932}
+                  className="w-full overflow-hidden rounded-ts-2xl rounded-te-2xl"
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                    alt="مدیریت سفارش"
+                    className="block size-full object-cover object-[50%_0%]"
+                  />
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature218 };
diff --git a/blocks/feature219.tsx b/blocks/feature219.tsx
new file mode 100644
index 0000000..86d4cc7
--- /dev/null
+++ b/blocks/feature219.tsx
@@ -0,0 +1,200 @@
+import type { LucideIcon } from "lucide-react";
+import { AudioLines, AudioWaveform } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { cn } from "@/lib/utils";
+
+type ImageItem = {
+  src: string;
+  alt: string;
+};
+
+type ImageVariant = "1" | "2" | "3";
+
+interface Item {
+  id: string;
+  title: string;
+  summary: string;
+  number?: string;
+  images: ImageItem[];
+  Icon?: LucideIcon;
+  variant: ImageVariant;
+}
+
+interface CardImageProps {
+  variant: ImageVariant;
+  images: ImageItem[];
+  Icon?: LucideIcon;
+}
+
+const LIST: Item[] = [
+  {
+    id: "file-upload",
+    title: "پیشنهاد عنوان",
+    summary:
+      "تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
+        alt: "داشبورد SEO",
+      },
+    ],
+    Icon: AudioWaveform,
+    variant: "1",
+  },
+  {
+    id: "secure-fast",
+    title: "تحلیل کلمه کلیدی",
+    summary:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/photos/ivan-bandura-3QqzCTIfUJI-unsplash.jpg",
+        alt: "تحلیل کلمات کلیدی",
+      },
+    ],
+    variant: "2",
+  },
+  {
+    id: "manage-files",
+    title: "ممیزی فنی",
+    summary:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg",
+        alt: "گزارش رتبه جستجو",
+      },
+    ],
+    Icon: AudioLines,
+    variant: "3",
+  },
+];
+
+const CardImage = ({ variant, images, Icon }: CardImageProps) => {
+  switch (variant) {
+    case "1":
+      return (
+        <div className="absolute end-[30%] bottom-[3.75rem]">
+          <div className="aspect-[1.645714286] w-[25rem]">
+            <div className="flex size-full items-center -space-x-[10%] rtl:flex-row-reverse rtl:space-x-reverse">
+              <div className="w-full shrink-0">
+                <AspectRatio
+                  className="overflow-hidden rounded-2xl"
+                  ratio={1.558095238}
+                >
+                  <img
+                    src={images[0].src}
+                    alt={images[0].alt}
+                    className="block size-full object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="w-[16%] shrink-0">
+                <AspectRatio
+                  className="w-full overflow-hidden rounded-lg shadow"
+                  ratio={1}
+                >
+                  <div className="flex size-full bg-background">
+                    {Icon && (
+                      <Icon className="m-auto size-[65%] stroke-muted-foreground/80 stroke-1" />
+                    )}
+                  </div>
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    case "2":
+      return (
+        <div className="absolute end-1/6 -bottom-[5%]">
+          <div className="aspect-video w-[31.25rem] overflow-hidden rounded-2xl shadow-2xl sm:w-[42.5rem]">
+            <img
+              src={images[0].src}
+              alt={images[0].alt}
+              className="block size-full object-cover object-center"
+            />
+          </div>
+        </div>
+      );
+    default:
+      return (
+        <div className="absolute end-1/6 -bottom-[5%]">
+          <div className="relative aspect-[1.195592287] w-[21.25rem] sm:w-[25rem]">
+            <div className="absolute bottom-0 aspect-[1.287833828] w-full overflow-hidden rounded-2xl">
+              <img
+                src={images[0].src}
+                alt={images[0].alt}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+            <div className="absolute end-0 top-0 flex aspect-square w-[20%] translate-x-1/2 overflow-hidden rounded-lg bg-background shadow rtl:-translate-x-1/2">
+              {Icon && (
+                <Icon className="m-auto size-[65%] stroke-muted-foreground/80 stroke-1" />
+              )}
+            </div>
+          </div>
+        </div>
+      );
+  }
+};
+
+const Card = ({ title, summary, images, Icon, number, variant }: Item) => {
+  const numberBorderColor = "var(--muted-foreground)";
+
+  return (
+    <div
+      className="relative flex h-full min-h-[39.375rem] w-full max-w-[34rem] flex-col justify-between gap-4 overflow-hidden rounded-[0.75rem] bg-muted"
+      style={{
+        backgroundImage:
+          "url('/block-media/shadcnblocks/block/patterns/p6.png')",
+      }}
+    >
+      <div className="flex w-full flex-col gap-4 p-10 pe-[3.75rem] pb-0 text-start md:p-[3.75rem]">
+        <h3 className="text-xl leading-none">{title}</h3>
+        <p className="text-xl leading-normal text-pretty">{summary}</p>
+      </div>
+      <div className="relative size-full min-h-[21.875rem]">
+        <CardImage images={images} Icon={Icon} variant={variant} />
+      </div>
+      <div
+        className="absolute end-5 top-5 size-fit text-2xll leading-none font-light text-muted opacity-25"
+        style={{
+          textShadow: `
+            2px 0 ${numberBorderColor}, -2px 0 ${numberBorderColor}, 
+            0 2px ${numberBorderColor}, 0 -2px ${numberBorderColor},
+            1px 1px ${numberBorderColor}, -1px -1px ${numberBorderColor}, 
+            1px -1px ${numberBorderColor}, -1px 1px ${numberBorderColor}
+          `,
+        }}
+      >
+        {number}
+      </div>
+    </div>
+  );
+};
+
+interface Feature219Props {
+  className?: string;
+}
+
+const Feature219 = ({ className }: Feature219Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center justify-center gap-6 xl:grid-cols-3">
+          {LIST.map((item, index) => (
+            <Card
+              key={item.id}
+              number={(index + 1).toLocaleString("fa-IR")}
+              {...item}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature219 };
diff --git a/blocks/feature22.tsx b/blocks/feature22.tsx
new file mode 100644
index 0000000..81833c6
--- /dev/null
+++ b/blocks/feature22.tsx
@@ -0,0 +1,205 @@
+import { Check, ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Feature22Props {
+  className?: string;
+}
+
+const Feature22 = ({ className }: Feature22Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16 sm:py-24 md:py-32", className)}>
+      <div className="container">
+        <div className="grid gap-4 sm:grid-cols-2 sm:gap-8 md:gap-12 lg:grid-cols-3 lg:gap-16">
+          <h2 className="mb-4 text-3xl font-medium sm:col-span-2 sm:text-xl md:mb-0 lg:col-span-1">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h2>
+          <ul className="flex flex-col gap-3 text-muted-foreground sm:gap-4">
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> ترافیک ارگانیک
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> رتبه‌بندی
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> با SEO دقیق‌تر رشد کنید
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> محتوای SEO
+            </li>
+          </ul>
+          <ul className="flex flex-col gap-4 text-muted-foreground">
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> فرصت‌های جستجوی جدید را پیدا کنید
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> در نتایج جستجو دیده شوید
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> بهینه‌سازی جستجو
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-4 text-primary" /> ترافیک ارگانیک را پایدار رشد دهید
+            </li>
+          </ul>
+        </div>
+        <div className="mt-12 grid gap-4 sm:mt-16 sm:grid-cols-2 sm:gap-6 md:mt-20 md:gap-8 lg:grid-cols-3">
+          <div className="rounded-lg border">
+            <div className="relative p-1">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="placeholder"
+                className="max-h-96 w-full rounded-t-lg object-cover sm:max-h-72 md:max-h-64"
+              />
+              <Badge
+                variant="outline"
+                className="absolute top-5 inset-s-5 bg-primary-foreground"
+              >
+                ترافیک ارگانیک
+              </Badge>
+            </div>
+            <div>
+              <div className="mb-3 px-4 pt-5 sm:px-5 md:px-6 md:pt-6">
+                <h3 className="font-medium">بهینه‌سازی محتوا</h3>
+                <p className="text-muted-foreground">
+                  تحلیل رقیب
+                </p>
+              </div>
+              <div className="h-px border-t border-dashed"></div>
+              <ul className="text-muted-foreground">
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  با چک‌لیست بهینه‌سازی، صفحات جدید را از ابتدا برای جستجو آماده منتشر کنید.
+                </li>
+                <li aria-hidden="true" className="h-px border-t border-dashed"></li>
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.
+                </li>
+                <li aria-hidden="true" className="h-px border-t border-dashed"></li>
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.
+                </li>
+              </ul>
+              <div className="h-px border-t border-dashed"></div>
+              <a
+                href="#"
+                className="my-3 flex items-center gap-2 px-4 font-medium sm:my-4 sm:px-5 md:px-6"
+              >
+                رتبه‌بندی
+                <ChevronRight className="mt-0.5 size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+
+          <div className="rounded-lg border">
+            <div className="relative p-1">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="placeholder"
+                className="max-h-96 w-full rounded-t-lg object-cover sm:max-h-72 md:max-h-64"
+              />
+              <Badge
+                variant="outline"
+                className="absolute top-5 inset-s-5 bg-primary-foreground"
+              >
+                محتوا را برای جستجو بهینه کنید
+              </Badge>
+            </div>
+            <div>
+              <div className="mb-3 px-4 pt-5 sm:px-5 md:px-6 md:pt-6">
+                <h3 className="font-medium">لینک داخلی</h3>
+                <p className="text-muted-foreground">
+                  گزارش Core Web Vitals
+                </p>
+              </div>
+              <div className="h-px border-t border-dashed"></div>
+              <ul className="text-muted-foreground">
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+                </li>
+                <li aria-hidden="true" className="h-px border-t border-dashed"></li>
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.
+                </li>
+                <li aria-hidden="true" className="h-px border-t border-dashed"></li>
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.
+                </li>
+              </ul>
+              <div className="h-px border-t border-dashed"></div>
+              <a
+                href="#"
+                className="my-3 flex items-center gap-2 px-4 font-medium sm:my-4 sm:px-5 md:px-6"
+              >
+                محتوای SEO
+                <ChevronRight className="mt-0.5 size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+          <div className="rounded-lg border">
+            <div className="relative p-1">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt="placeholder"
+                className="max-h-96 w-full rounded-t-lg object-cover sm:max-h-72 md:max-h-64"
+              />
+              <Badge
+                variant="outline"
+                className="absolute top-5 inset-s-5 bg-primary-foreground"
+              >
+                بهینه‌سازی جستجو
+              </Badge>
+            </div>
+            <div>
+              <div className="mb-3 px-4 pt-5 sm:px-5 md:px-6 md:pt-6">
+                <h3 className="font-medium">پیشنهاد عنوان</h3>
+                <p className="text-muted-foreground">
+                  تحلیل کلمه کلیدی
+                </p>
+              </div>
+              <div className="h-px border-t border-dashed"></div>
+              <ul className="text-muted-foreground">
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
+                </li>
+                <li aria-hidden="true" className="h-px border-t border-dashed"></li>
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.
+                </li>
+                <li aria-hidden="true" className="h-px border-t border-dashed"></li>
+                <li className="flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6">
+                  <Check className="mt-1 size-4 shrink-0 text-primary" />
+                  کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.
+                </li>
+              </ul>
+              <div className="h-px border-t border-dashed"></div>
+              <a
+                href="#"
+                className="my-3 flex items-center gap-2 px-4 font-medium sm:my-4 sm:px-5 md:px-6"
+              >
+                ترافیک ارگانیک
+                <ChevronRight className="mt-0.5 size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature22 };
diff --git a/blocks/feature220.tsx b/blocks/feature220.tsx
new file mode 100644
index 0000000..50fa3c8
--- /dev/null
+++ b/blocks/feature220.tsx
@@ -0,0 +1,91 @@
+import { ArrowRight } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const STATS = [
+  {
+    id: "retention",
+    number: "یکپارچگی",
+    text: "کنترل بودجه بخش",
+  },
+  {
+    id: "development-time",
+    number: "عملیات",
+    text: "ردیابی دارایی",
+  },
+  {
+    id: "adoption",
+    number: "مدیریت سازمان",
+    text: "گزارش سود و زیان",
+  },
+];
+
+interface Feature220Props {
+  className?: string;
+}
+
+const Feature220 = ({ className }: Feature220Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-20",
+        className,
+      )}
+    >
+      <div className="container flex flex-wrap-reverse gap-12 lg:grid lg:grid-cols-[1fr_1.5fr] lg:gap-[7.5rem]">
+        <div className="flex flex-col justify-between gap-20">
+          <div className="mt-10 flex flex-col gap-5 text-start">
+            <h2 className="text-xl leading-none font-semibold tracking-tight text-balance md:text-2xll">
+              از خرید تا فروش در یک سیستم
+            </h2>
+            <p className="text-lg leading-[1.4] font-medium text-pretty text-muted-foreground md:text-xl">
+              گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+            </p>
+            <div>
+              <Button size="lg" className="gap-2 px-8 py-6 text-lg">
+                ERP
+                <ArrowRight className="size-4 rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+          <div>
+            <div className="group flex w-full max-w-[30rem] flex-col gap-10 rounded-[.5rem] bg-background p-5 text-start transition-shadow hover:shadow-[0_0_2px_theme('colors.gray.300')]">
+              <div className="flex w-full flex-col gap-8 sm:flex-row">
+                {STATS.map((item) => (
+                  <div className="flex flex-col gap-1" key={item.id}>
+                    <div className="text-xl font-semibold">{item.number}</div>
+                    <div className="text-sm font-medium text-pretty text-muted-foreground">
+                      {item.text}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="w-full max-w-[46.5rem]">
+          <AspectRatio
+            ratio={0.873239437}
+            className="overflow-hidden rounded-2xl"
+          >
+            <video
+              src="/block-media/shadcnblocks/block/video-8.mp4"
+              className="block size-full object-cover object-center"
+              loop
+              autoPlay
+              muted
+              controls={false}
+              aria-label="عملیات سازمان را یکپارچه کنید"
+            />
+          </AspectRatio>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature220 };
diff --git a/blocks/feature220a.tsx b/blocks/feature220a.tsx
new file mode 100644
index 0000000..ecc3b9a
--- /dev/null
+++ b/blocks/feature220a.tsx
@@ -0,0 +1,91 @@
+import { ArrowRight } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const STATS = [
+  {
+    id: "retention",
+    number: "داده سازمانی",
+    text: "دسترسی مبتنی بر نقش",
+  },
+  {
+    id: "development-time",
+    number: "هوش تجاری",
+    text: "به‌روزرسانی زمان‌بندی‌شده",
+  },
+  {
+    id: "adoption",
+    number: "گزارش‌گیری",
+    text: "فیلتر چندسطحی",
+  },
+];
+
+interface Feature220aProps {
+  className?: string;
+}
+
+const Feature220a = ({ className }: Feature220aProps) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-24",
+        className,
+      )}
+    >
+      <div className="container max-w-5xl">
+        <div className="mb-16 text-center">
+          <Badge variant="secondary" className="mb-6 px-4 py-2">
+            هر تیم داشبورد خودش را داشته باشد
+          </Badge>
+          <h2 className="leading-tighter mb-6 text-2xll font-semibold tracking-tight text-balance lg:text-2xll">
+            روندها را زودتر از رقبا ببینید
+            <span className="block text-primary">گزارش‌هایی که مدیران واقعاً استفاده می‌کنند</span>
+          </h2>
+          <p className="mx-auto mb-8 max-w-3xl text-xl leading-relaxed font-medium text-pretty text-muted-foreground">
+            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+          </p>
+          <Button size="lg" className="gap-2 px-8 py-6 text-lg">
+            گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
+            <ArrowRight className="size-4 rtl:rotate-180" />
+          </Button>
+        </div>
+
+        <div className="mb-16">
+          <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-3xl">
+            <video
+              src="/block-media/shadcnblocks/block/video-8.mp4"
+              className="block size-full object-cover object-center"
+              loop
+              autoPlay
+              muted
+              controls={false}
+              aria-label="تصمیم استراتژیک را داده‌محور کنید"
+            />
+          </AspectRatio>
+        </div>
+
+        <div className="rounded-2xl bg-card p-8">
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-3">
+            {STATS.map((item) => (
+              <div className="text-center" key={item.id}>
+                <div className="mb-2 text-xl font-bold text-primary">
+                  {item.number}
+                </div>
+                <div className="text-sm font-medium text-pretty text-muted-foreground">
+                  {item.text}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature220a };
diff --git a/blocks/feature220b.tsx b/blocks/feature220b.tsx
new file mode 100644
index 0000000..10ce122
--- /dev/null
+++ b/blocks/feature220b.tsx
@@ -0,0 +1,91 @@
+import { ArrowRight } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const STATS = [
+  {
+    id: "retention",
+    number: "مدیریت فروش",
+    text: "ثبت خودکار فعالیت‌های فروش",
+  },
+  {
+    id: "development-time",
+    number: "سامانه CRM",
+    text: "امتیازدهی هوشمند سرنخ",
+  },
+  {
+    id: "adoption",
+    number: "ارتباط با مشتری",
+    text: "گزارش عملکرد هر نماینده",
+  },
+];
+
+interface Feature220bProps {
+  className?: string;
+}
+
+const Feature220b = ({ className }: Feature220bProps) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-20",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="mb-20 flex flex-wrap justify-center gap-12">
+          {STATS.map((item) => (
+            <div key={item.id} className="min-w-48 text-center">
+              <div className="mb-2 text-xl font-semibold md:text-2xll">
+                {item.number}
+              </div>
+              <div className="text-sm font-medium text-pretty text-muted-foreground">
+                {item.text}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid items-center gap-16 lg:grid-cols-2">
+          <div className="order-2 lg:order-1 rtl:lg:order-2">
+            <AspectRatio
+              ratio={0.873239437}
+              className="overflow-hidden rounded-2xl"
+            >
+              <video
+                src="/block-media/shadcnblocks/block/video-8.mp4"
+                className="block size-full object-cover object-center"
+                loop
+                autoPlay
+                muted
+                controls={false}
+                aria-label="هر سرنخ را تا قرارداد دنبال کنید"
+              />
+            </AspectRatio>
+          </div>
+
+          <div className="order-1 space-y-6 text-start lg:order-2 rtl:lg:order-1">
+            <h2 className="text-xl leading-none font-semibold tracking-tight text-balance md:text-2xll">
+              فروش تیم‌تان را یکجا مدیریت کنید
+            </h2>
+            <p className="text-lg leading-[1.4] font-medium text-pretty text-muted-foreground md:text-xl">
+              تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+            </p>
+            <div className="pt-4">
+              <Button size="lg" className="gap-2 px-8 py-6 text-lg">
+                پایپ‌لاین فروش
+                <ArrowRight className="size-4 rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature220b };
diff --git a/blocks/feature221.tsx b/blocks/feature221.tsx
new file mode 100644
index 0000000..b0e67dc
--- /dev/null
+++ b/blocks/feature221.tsx
@@ -0,0 +1,138 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface FeatureItem {
+  id: string;
+  title: string;
+  description: string;
+  link: string;
+  gradient: string;
+}
+
+const FEATURES: FeatureItem[] = [
+  {
+    id: "meeting-assistant",
+    title: "تحلیل باخت معامله",
+    description:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+    link: "#",
+    gradient: "bg-linear-to-r from-[#00C9FF] to-[#92FE9D]",
+  },
+  {
+    id: "cdn-optimization",
+    title: "هدف‌گذاری تیمی",
+    description:
+      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+    link: "#",
+    gradient: "bg-linear-to-r from-[#f8ff00] to-[#3ad59f]",
+  },
+  {
+    id: "user-analytics",
+    title: "اتوماسیون پیگیری",
+    description:
+      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+    link: "#",
+    gradient: "bg-linear-to-r from-[#d53369] to-[#daae51]",
+  },
+  {
+    id: "data-cleaning",
+    title: "داشبورد مدیر فروش",
+    description:
+      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+    link: "#",
+    gradient: "bg-linear-to-r from-[#FC466B] to-[#3F5EFB]",
+  },
+];
+
+interface Feature221Props {
+  className?: string;
+}
+
+const Feature221 = ({ className }: Feature221Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-32",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="flex w-full flex-col items-start justify-between gap-4 pb-16 lg:flex-row lg:items-end">
+          <div className="flex w-full max-w-lg flex-1 flex-col items-start gap-5 text-start">
+            <h2 className="text-[2rem] leading-none font-bold tracking-tight text-balance md:text-[2.75rem] lg:text-2xll">
+              پیش‌بینی درآمد را دقیق‌تر کنید
+            </h2>
+            <p className="w-full max-w-[30rem] text-[1.15rem] leading-normal font-medium text-pretty text-muted-foreground sm:text-xl">
+              با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+            </p>
+          </div>
+          <div>
+            <Button className="gap-2 rounded-full">
+              چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
+              <ArrowRight className="size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+        <div className="grid w-full grid-cols-1 grid-rows-[auto] gap-10 md:grid-cols-2">
+          {FEATURES.map((feature) => (
+            <Card
+              key={feature.id}
+              className="flex w-full flex-col justify-between gap-10 rounded-lg border bg-background p-5"
+            >
+              <CardHeader className="flex w-full flex-col justify-between gap-4 p-0 lg:flex-row lg:items-center">
+                <CardTitle className="flex w-fit items-center justify-start gap-2.5">
+                  <h3 className="text-[1.75rem] leading-none font-bold tracking-tight text-balance">
+                    {feature.title}
+                  </h3>
+                </CardTitle>
+                <Badge className="bg-muted">
+                  <p className="text-sm text-foreground">الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.</p>
+                </Badge>
+              </CardHeader>
+              <CardContent className="p-0 text-start">
+                <p className="max-w-80 text-base leading-[1.4] font-medium text-pretty text-muted-foreground">
+                  {feature.description}
+                </p>
+              </CardContent>
+              <CardFooter className="flex w-full items-end justify-between gap-5 p-0 lg:flex-row">
+                <div className="flex-1">
+                  <Button size="sm" className="rounded-full">
+                    <a
+                      href={feature.link}
+                      className="flex items-center gap-2"
+                    >
+                      بیشتر بدانید
+                      <ArrowRight className="size-4 rtl:rotate-180" />
+                    </a>
+                  </Button>
+                </div>
+                <div className="size-8 shrink-0">
+                  <div
+                    className={cn(
+                      "size-full rounded-full",
+                      feature.gradient,
+                    )}
+                  />
+                </div>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature221 };
diff --git a/blocks/feature222.tsx b/blocks/feature222.tsx
new file mode 100644
index 0000000..841882c
--- /dev/null
+++ b/blocks/feature222.tsx
@@ -0,0 +1,165 @@
+"use client";
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface StatItem {
+  id: string;
+  number: string;
+  text: string;
+}
+
+interface CardData {
+  id: string;
+  title: string;
+  link: string;
+  background: string;
+  imageAlt: string;
+  stats: StatItem[];
+}
+
+const LIST: CardData[] = [
+  {
+    id: "techcorp-ai",
+    title: "تحلیل کانال",
+    link: "#",
+    background:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
+    imageAlt: "تحلیل عملکرد کمپین",
+    stats: [
+      {
+        id: "processing-speed",
+        number: "کمپین",
+        text: "اتصال به شبکه‌های اجتماعی",
+      },
+    ],
+  },
+  {
+    id: "greentech-carbon",
+    title: "اتوماسیون ایمیل",
+    link: "#",
+    background:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-o9F8dRoSucM-unsplash.jpg",
+    imageAlt: "نمودار ROI",
+    stats: [
+      {
+        id: "carbon-emissions",
+        number: "رشد برند",
+        text: "تحلیل رفتار صفحه فرود",
+      },
+    ],
+  },
+  {
+    id: "finserve-blockchain",
+    title: "A/B تست",
+    link: "#",
+    background:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-K1W9OjEgacI-unsplash.jpg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+    stats: [
+      {
+        id: "fraud-cases",
+        number: "بازاریابی دیجیتال",
+        text: "برچسب‌گذاری خودکار سرنخ",
+      },
+    ],
+  },
+  {
+    id: "eduworld-vr",
+    title: "تقویم محتوا",
+    link: "#",
+    background:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-gDmVqxZt1hg-unsplash.jpg",
+    imageAlt: "تحلیل عملکرد کمپین",
+    stats: [
+      {
+        id: "student-engagement",
+        number: "جذب مخاطب",
+        text: "داشبورد عملکرد محتوا",
+      },
+    ],
+  },
+  {
+    id: "healthplus-telemedicine",
+    title: "ردیابی UTM",
+    link: "#",
+    background:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-sutfgh5DNIU-unsplash.jpg",
+    imageAlt: "نمودار ROI",
+    stats: [
+      {
+        id: "patient-satisfaction",
+        number: "کمپین",
+        text: "گزارش هزینه هر سرنخ",
+      },
+    ],
+  },
+  {
+    id: "ecolands-land",
+    title: "گزارش ROI",
+    link: "#",
+    background:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-ZXLGP2Qh3Mo-unsplash.jpg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+    stats: [
+      {
+        id: "land-productivity",
+        number: "رشد برند",
+        text: "ردیابی مسیر تبدیل",
+      },
+    ],
+  },
+];
+
+const Card = ({ link, background, title, imageAlt, stats }: CardData) => {
+  return (
+    <a
+      href={link}
+      aria-label={title}
+      style={{ backgroundImage: `url(${background})` }}
+      className="before:content-[] relative min-h-auto w-full overflow-hidden rounded-lg bg-black/80 bg-cover bg-center bg-no-repeat p-5 transition-all duration-300 before:absolute before:start-0 before:top-0 before:z-10 before:block before:size-full before:bg-black/50 before:transition-all before:duration-300 hover:before:bg-black/30 sm:aspect-square md:aspect-auto md:min-h-120 md:max-w-120"
+    >
+      <span className="sr-only">{imageAlt}</span>
+      <div className="relative z-20 flex size-full flex-col justify-between gap-20 text-start md:gap-16">
+        <div className="text-xl leading-[1.2] font-normal text-balance text-white md:text-3xl">
+          {title}
+        </div>
+        <div className="flex w-full flex-col gap-8">
+          <div className="flex gap-8 text-white">
+            {stats.map((item) => (
+              <div key={item.id} className="flex flex-col gap-1">
+                <div className="text-[1.15rem] md:text-xl">{item.number}</div>
+                <div className="text-sm text-pretty opacity-80">{item.text}</div>
+              </div>
+            ))}
+          </div>
+          <Button variant="outline" size="sm" className="w-fit gap-2">
+            بازاریابی دیجیتال
+            <ArrowRight className="size-3.5 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </a>
+  );
+};
+
+interface Feature222Props {
+  className?: string;
+}
+
+const Feature222 = ({ className }: Feature222Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+          {LIST.map((item) => (
+            <Card key={item.id} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature222 };
diff --git a/blocks/feature224.tsx b/blocks/feature224.tsx
new file mode 100644
index 0000000..1314b8d
--- /dev/null
+++ b/blocks/feature224.tsx
@@ -0,0 +1,214 @@
+"use client";
+import type { LucideIcon } from "lucide-react";
+import {
+  Globe,
+  Lock,
+  ShieldCheck,
+  SlidersHorizontal,
+  Sparkles,
+  Workflow,
+} from "lucide-react";
+import { startTransition, useEffect, useState } from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface FeatureItem {
+  id: string;
+  title: string;
+  label: string;
+  icon: LucideIcon;
+  description: string;
+  background: string;
+  imageAlt: string;
+}
+
+const FEATURES: FeatureItem[] = [
+  {
+    id: "natural-patterns",
+    title: "تریگر رویداد",
+    label: "فرایند هوشمند",
+    icon: Workflow,
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    background:
+      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+    imageAlt: "سازنده گردش‌کار",
+  },
+  {
+    id: "natural-security",
+    title: "شرط هوشمند",
+    label: "اتوماسیون",
+    icon: Lock,
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    background:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+    imageAlt: "نمای اتوماسیون فرایند",
+  },
+  {
+    id: "ecology-safeguards",
+    title: "اعلان خودکار",
+    label: "گردش‌کار",
+    icon: ShieldCheck,
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    background:
+      "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+    imageAlt: "لاگ اجرای خودکار",
+  },
+  {
+    id: "natural-communication",
+    title: "تأیید چندمرحله‌ای",
+    label: "صرفه‌جویی زمان",
+    icon: SlidersHorizontal,
+    description:
+      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    background:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
+    imageAlt: "سازنده گردش‌کار",
+  },
+  {
+    id: "multilingual-ecology",
+    title: "لاگ اجرا",
+    label: "فرایند هوشمند",
+    icon: Globe,
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    background:
+      "/block-media/shadcnblocks/block/photos/vasilis-karkalas-LadCWrSL7X8-unsplash.jpg",
+    imageAlt: "نمای اتوماسیون فرایند",
+  },
+];
+
+interface Feature224Props {
+  className?: string;
+}
+
+const Feature224 = ({ className }: Feature224Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    startTransition(() => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+
+    api.on("select", () => {
+      startTransition(() => {
+        setCurrent(api.selectedScrollSnap() + 1);
+      });
+    });
+  }, [api]);
+
+  const goToSlide = (index: number) => {
+    if (api) {
+      api.scrollTo(index);
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col items-center justify-center gap-4">
+          <h2 className="mx-auto max-w-87.5 text-center text-xl leading-none font-medium text-balance md:max-w-112.5 md:text-2xll lg:max-w-140 lg:text-2xll">
+            فرایندها را استاندارد و سریع کنید
+          </h2>
+        </div>
+        <Carousel
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+          className="w-full"
+          setApi={setApi}
+        >
+          <CarouselContent className="-ms-8 pt-20">
+            {FEATURES.map((card) => (
+              <CarouselItem
+                key={card.id}
+                className="ps-8 md:basis-1/2 lg:basis-1/3"
+              >
+                <div className="p-1">
+                  <Card className="border-0 py-0 shadow-none dark:bg-background">
+                    <CardContent className="flex flex-col p-0">
+                      <div
+                        style={{ backgroundImage: `url("${card.background}")` }}
+                        className="relative flex aspect-[0.935802469] w-full flex-col items-center justify-between overflow-hidden rounded-2xl bg-cover bg-center bg-no-repeat p-7"
+                        role="img"
+                        aria-label={card.imageAlt}
+                      >
+                        <div className="flex size-full flex-1" />
+                        <div className="h-12 w-full">
+                          <div className="mx-auto mb-8 flex w-full max-w-60 items-center gap-4 rounded-full bg-primary px-3 py-2.5 shadow-xl dark:bg-background">
+                            <div className="shrink-0">
+                              <div className="flex -space-x-2 rtl:space-x-reverse">
+                                <div className="flex size-7 rounded-full border border-black bg-background dark:bg-primary">
+                                  <Sparkles className="m-auto size-4 dark:text-background" />
+                                </div>
+                                <div className="flex size-7 rounded-full border border-black bg-background dark:bg-primary">
+                                  <card.icon className="m-auto size-4 dark:text-background" />
+                                </div>
+                              </div>
+                            </div>
+                            <div className="text-sm font-medium text-white">
+                              {card.label}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex w-full flex-col gap-1 pt-6 text-start">
+                        <h3 className="text-xl font-medium text-balance text-foreground">
+                          {card.title}
+                        </h3>
+                        <p className="text-sm text-pretty text-muted-foreground">
+                          {card.description}
+                        </p>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="mt-8 hidden items-center justify-center gap-4 md:flex">
+            <CarouselPrevious className="static size-12 translate-y-0" />
+            <CarouselNext className="static size-12 translate-y-0" />
+          </div>
+          <div className="mt-6 flex w-full items-center gap-2 md:hidden">
+            {Array.from({ length: FEATURES.length }).map((_, i) => (
+              <button
+                type="button"
+                onClick={() => goToSlide(i % FEATURES.length)}
+                key={`carousel-btn-${i}`}
+                aria-label={`رفتن به اسلاید ${i + 1}`}
+                className="h-4 w-full"
+              >
+                <div
+                  className={cn(
+                    "my-auto h-1 w-full rounded-full",
+                    current === i + 1 ? "bg-primary" : "bg-muted",
+                  )}
+                />
+              </button>
+            ))}
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Feature224 };
diff --git a/blocks/feature225.tsx b/blocks/feature225.tsx
new file mode 100644
index 0000000..c2b4b8d
--- /dev/null
+++ b/blocks/feature225.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import {
+  Eye,
+  FileText,
+  Languages,
+  Mic,
+  MonitorSmartphone,
+  Scissors,
+  Subtitles,
+  XCircle,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface FeatureItem {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  image?: string;
+  imageAlt: string;
+}
+
+const FEATURES: FeatureItem[] = [
+  {
+    id: "clips",
+    title: "داشبورد سفارشی",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    icon: <Scissors className="size-5" />,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "translation",
+    title: "فیلتر پیشرفته",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    icon: <Languages className="size-5" />,
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "eye-contact",
+    title: "نمودار روند",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    icon: <Eye className="size-5" />,
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    id: "studio-sound",
+    title: "هشدار آستانه",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    icon: <Mic className="size-5" />,
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "remove-filler",
+    title: "گزارش زمان‌بندی‌شده",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    icon: <XCircle className="size-5" />,
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "green-screen",
+    title: "تحلیل کوHORT",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    icon: <MonitorSmartphone className="size-5" />,
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    id: "transcription",
+    title: "مقایسه دوره‌ای",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    icon: <FileText className="size-5" />,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "captions",
+    title: "خروجی گزارش",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    icon: <Subtitles className="size-5" />,
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+];
+
+interface Feature225Props {
+  className?: string;
+}
+
+const Feature225 = ({ className }: Feature225Props) => {
+  const [activeTab, setActiveTab] = useState<string>(FEATURES[0].id);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-background py-12 md:py-24 lg:py-32", className)}
+    >
+      <div className="container px-4 md:px-6">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          <h2 className="text-3xl font-bold tracking-tighter text-balance sm:text-xl md:text-2xll">
+            داده پراکنده را به تصمیم تبدیل کنید
+          </h2>
+          <p className="max-w-[700px] text-pretty text-muted-foreground md:text-xl/relaxed">
+            گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+          </p>
+        </div>
+
+        <div className="mt-16">
+          <Tabs
+            defaultValue={FEATURES[0].id}
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className="w-full"
+          >
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+              {FEATURES.map((feature) => (
+                <Card
+                  key={feature.id}
+                  className={cn(
+                    "cursor-pointer overflow-hidden transition-all hover:shadow-md",
+                    activeTab === feature.id ? "ring-2 ring-primary" : "",
+                  )}
+                  onClick={() => setActiveTab(feature.id)}
+                >
+                  <CardContent className="p-6">
+                    <div className="flex flex-col items-start space-y-2 text-start">
+                      <div className="flex items-center gap-2">
+                        <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
+                          {feature.icon}
+                        </div>
+                        <h3 className="text-lg font-semibold text-balance">
+                          {feature.title}
+                        </h3>
+                      </div>
+                      <p className="text-sm text-pretty text-muted-foreground">
+                        {feature.description}
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            <div className="sr-only">
+              <TabsList>
+                {FEATURES.map((feature) => (
+                  <TabsTrigger key={feature.id} value={feature.id}>
+                    {feature.title}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+
+            <div className="mt-8">
+              {FEATURES.map((feature) => (
+                <TabsContent
+                  key={feature.id}
+                  value={feature.id}
+                  className="mt-0 rounded-lg border bg-card p-0 shadow-sm"
+                >
+                  <div className="aspect-video w-full overflow-hidden rounded-t-lg">
+                    {feature.image ? (
+                      <img
+                        src={feature.image}
+                        alt={feature.imageAlt}
+                        className="size-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex size-full items-center justify-center bg-muted">
+                        <p className="text-muted-foreground">داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.</p>
+                      </div>
+                    )}
+                  </div>
+                </TabsContent>
+              ))}
+            </div>
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature225 };
diff --git a/blocks/feature227.tsx b/blocks/feature227.tsx
new file mode 100644
index 0000000..00a0241
--- /dev/null
+++ b/blocks/feature227.tsx
@@ -0,0 +1,54 @@
+import { CircleCheckBig } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  { id: "design-templates", label: "تیکت" },
+  { id: "collaborative-editing", label: "رضایت مشتری" },
+  { id: "resource-libraries", label: "مرکز تماس" },
+  { id: "feedback-tools", label: "پشتیبانی مشتری" },
+  { id: "asset-export", label: "تیکت" },
+  { id: "version-history", label: "رضایت مشتری" },
+] as const;
+
+interface Feature227Props {
+  className?: string;
+}
+
+const Feature227 = ({ className }: Feature227Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-10 lg:grid-cols-2">
+          <div className="text-start">
+            <h2 className="mb-5 text-2xll font-medium text-balance lg:text-2xll">
+              زمان حل مسئله را کوتاه کنید
+            </h2>
+            <p className="mb-12 text-lg text-pretty text-muted-foreground">
+              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+            </p>
+            <ul className="grid max-w-xl gap-5 sm:grid-cols-2">
+              {FEATURES.map((feature) => (
+                <li key={feature.id} className="flex items-center gap-1.5">
+                  <CircleCheckBig className="size-5 shrink-0" />
+                  <p className="text-sm font-medium">{feature.label}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="relative">
+            <div className="absolute inset-0 bg-linear-to-t from-background to-transparent to-30%" />
+            <div className="absolute inset-0 bg-linear-to-l from-background to-transparent to-30% rtl:bg-linear-to-r" />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="مدیریت تیکت"
+              className="max-h-[500px] w-full rounded-2xl border border-border object-cover lg:max-h-none"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature227 };
diff --git a/blocks/feature228.tsx b/blocks/feature228.tsx
new file mode 100644
index 0000000..05e8179
--- /dev/null
+++ b/blocks/feature228.tsx
@@ -0,0 +1,116 @@
+import { Lightbulb, ShieldCheck } from "lucide-react";
+import { FaApple } from "react-icons/fa";
+import { FcGoogle } from "react-icons/fc";
+
+import { cn } from "@/lib/utils";
+
+interface Feature228Props {
+  className?: string;
+}
+
+const Feature228 = ({ className }: Feature228Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-0">
+          <div className="text-start lg:pe-16">
+            <h2 className="mb-5 text-2xll text-balance md:text-2xll md:leading-20">
+              با هوش مصنوعی سریع‌تر تصمیم بگیرید
+              <br />
+              کارهای تکراری را به AI بسپارید
+            </h2>
+            <p className="text-lg text-pretty text-muted-foreground">
+              مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+            </p>
+            <div className="mt-12 grid gap-8 sm:grid-cols-2 sm:gap-10">
+              <div>
+                <span className="mb-4 grid size-12 place-items-center rounded-lg bg-muted-foreground/10">
+                  <Lightbulb />
+                </span>
+                <h3 className="mb-2.5 text-sm font-semibold">تحلیل احساس</h3>
+                <p className="text-sm text-pretty text-muted-foreground">
+                  دستیار گفتگو
+                </p>
+              </div>
+              <div>
+                <span className="mb-4 grid size-12 place-items-center rounded-lg bg-muted-foreground/10">
+                  <ShieldCheck />
+                </span>
+                <h3 className="mb-2.5 text-sm font-semibold">خلاصه‌سازی هوشمند</h3>
+                <p className="text-sm text-pretty text-muted-foreground">
+                  پیشنهاد پاسخ
+                </p>
+              </div>
+              <div>
+                <div className="mb-4 flex gap-4">
+                  <span className="grid size-12 place-items-center rounded-lg border border-border bg-primary">
+                    <FaApple className="size-6 text-background" />
+                  </span>
+                  <span className="grid size-12 place-items-center rounded-lg border border-border bg-background">
+                    <FcGoogle className="size-6" />
+                  </span>
+                </div>
+                <h3 className="mb-2.5 text-sm font-semibold">
+                  طبقه‌بندی خودکار
+                </h3>
+                <p className="text-sm text-pretty text-muted-foreground">
+                  پیش‌بینی ریزش
+                </p>
+              </div>
+              <div>
+                <div className="mb-4 flex gap-4">
+                  <span className="grid size-12 place-items-center rounded-lg border border-border bg-background">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/x.svg"
+                      alt="دستیار هوش مصنوعی"
+                      className="size-6"
+                    />
+                  </span>
+                  <span className="grid size-12 place-items-center rounded-lg border border-border bg-background">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
+                      alt="پیشنهادهای هوشمند"
+                      className="size-6"
+                    />
+                  </span>
+                </div>
+                <h3 className="mb-2.5 text-sm font-semibold">جستجوی معنایی</h3>
+                <p className="text-sm text-pretty text-muted-foreground">
+                  تولید محتوا
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex h-full flex-col gap-6 sm:max-h-[440px] sm:flex-row xl:max-h-[550px]">
+            <div className="flex flex-col gap-6">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="تحلیل با AI"
+                className="aspect-video rounded-2xl border border-border object-cover"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt="دستیار هوش مصنوعی"
+                className="ms-auto aspect-video flex-1 rounded-2xl border border-border object-cover sm:aspect-auto sm:w-2/3"
+              />
+            </div>
+            <div className="min-h-[580px] rounded-4xl border border-border p-2 sm:min-h-0 sm:max-w-56 sm:shrink-0 xl:max-w-72">
+              <div className="flex h-full flex-col rounded-3xl border border-border bg-background px-1.5 pt-3 pb-1.5">
+                <div className="mx-auto mb-3 h-4 w-16 rounded-full bg-muted-foreground/15 xl:h-5 xl:w-20" />
+                <div className="flex-1">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="پیشنهادهای هوشمند"
+                    className="h-full rounded-2xl object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature228 };
diff --git a/blocks/feature229.tsx b/blocks/feature229.tsx
new file mode 100644
index 0000000..b1b478f
--- /dev/null
+++ b/blocks/feature229.tsx
@@ -0,0 +1,94 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  CheckIcon,
+  HeadphonesIcon,
+  PuzzleIcon,
+  ShieldCheckIcon,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface FeatureGroup {
+  id: string;
+  title: string;
+  icon: LucideIcon;
+  features: { id: string; label: string }[];
+}
+
+const FEATURE_GROUPS: FeatureGroup[] = [
+  {
+    id: "security",
+    title: "نقش و دسترسی",
+    icon: ShieldCheckIcon,
+    features: [
+      { id: "two-factor", label: "کار گروهی" },
+      { id: "encryption", label: "همکاری تیمی" },
+      { id: "audits", label: "مدیریت پروژه" },
+      { id: "rbac", label: "هم‌راستایی" },
+      { id: "backup", label: "کار گروهی" },
+    ],
+  },
+  {
+    id: "integration",
+    title: "چک‌لیست تحویل",
+    icon: PuzzleIcon,
+    features: [
+      { id: "rest-api", label: "همکاری تیمی" },
+      { id: "webhook", label: "مدیریت پروژه" },
+      { id: "third-party", label: "هم‌راستایی" },
+      { id: "custom-endpoints", label: "کار گروهی" },
+      { id: "docs", label: "همکاری تیمی" },
+    ],
+  },
+  {
+    id: "support",
+    title: "گزارش پیشرفت",
+    icon: HeadphonesIcon,
+    features: [
+      { id: "email-support", label: "مدیریت پروژه" },
+      { id: "tutorials", label: "هم‌راستایی" },
+      { id: "knowledge-base", label: "کار گروهی" },
+      { id: "forums", label: "همکاری تیمی" },
+      { id: "webinars", label: "مدیریت پروژه" },
+    ],
+  },
+];
+
+interface Feature229Props {
+  className?: string;
+}
+
+const Feature229 = ({ className }: Feature229Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="max-w-5xl text-start text-xl text-balance md:text-2xll">
+          همکاری از راه دور را ساده کنید
+        </h2>
+        <div className="mt-16 grid gap-16 md:mt-20 md:grid-cols-3 md:gap-6">
+          {FEATURE_GROUPS.map((group) => (
+            <div key={group.id} className="text-start">
+              <span className="flex size-12 items-center justify-center rounded-xl bg-muted">
+                <group.icon className="size-5" />
+              </span>
+              <h3 className="my-6 font-semibold">{group.title}</h3>
+              <ul className="space-y-4">
+                {group.features.map((feature) => (
+                  <li
+                    key={feature.id}
+                    className="flex items-center gap-2 text-pretty"
+                  >
+                    <CheckIcon className="size-4 shrink-0" />
+                    {feature.label}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature229 };
diff --git a/blocks/feature23.tsx b/blocks/feature23.tsx
new file mode 100644
index 0000000..bf4f22f
--- /dev/null
+++ b/blocks/feature23.tsx
@@ -0,0 +1,91 @@
+import { ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Feature23Props {
+  className?: string;
+}
+
+const Feature23 = ({ className }: Feature23Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-xl flex-col items-center gap-6 text-center">
+          <Badge variant="outline">عملیات سازمان را یکپارچه کنید</Badge>
+          <h2 className="text-xl font-medium">
+            از خرید تا فروش در یک سیستم
+          </h2>
+          <p className="text-lg text-muted-foreground">
+            فرایندهای پشت‌صحنه را شفاف کنید
+          </p>
+        </div>
+        <div className="mt-20 grid gap-10 lg:grid-cols-3 xl:gap-20">
+          <div className="flex flex-col lg:block">
+            <div className="h-full max-h-[500px] rounded-lg border bg-muted p-3">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt="گزارش مالی یکپارچه"
+                className="h-full w-full rounded-lg object-cover"
+              />
+            </div>
+            <div className="p-6">
+              <div className="mb-1 font-semibold">هزینه عملیاتی را کنترل کنید</div>
+              <p className="text-muted-foreground">
+                گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+              </p>
+              <a href="#" className="mt-4 flex items-center gap-2 font-medium">
+                بیشتر بدانید
+                <ChevronRight className="size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col lg:block">
+            <div className="h-full max-h-[500px] rounded-lg border bg-muted p-3">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                alt="داشبورد ERP"
+                className="h-full w-full rounded-lg object-cover"
+              />
+            </div>
+            <div className="p-6">
+              <p className="mb-1 flex items-center gap-2 font-semibold">
+                مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.
+              </p>
+              <p className="text-muted-foreground">
+                گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند و خطا را قبل از ثبت نهایی کاهش می‌دهد.
+              </p>
+              <a href="#" className="mt-4 flex items-center gap-2 font-medium">
+                بیشتر بدانید
+                <ChevronRight className="size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col lg:block">
+            <div className="h-full max-h-[500px] rounded-lg border bg-muted p-3">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+                alt="مدیریت عملیات"
+                className="h-full w-full rounded-lg object-cover"
+              />
+            </div>
+            <div className="p-6">
+              <p className="mb-1 flex items-center gap-2 font-semibold">
+                گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+              </p>
+              <p className="text-muted-foreground">
+                ERP
+              </p>
+              <a href="#" className="mt-4 flex items-center gap-2 font-medium">
+                بیشتر بدانید
+                <ChevronRight className="size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature23 };
diff --git a/blocks/feature230.tsx b/blocks/feature230.tsx
new file mode 100644
index 0000000..04bdf76
--- /dev/null
+++ b/blocks/feature230.tsx
@@ -0,0 +1,84 @@
+import type { LucideIcon } from "lucide-react";
+import { Cpu, Database, Globe, ShieldCheck } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface FeatureItem {
+  id: string;
+  title: string;
+  description: string;
+  icon: LucideIcon;
+}
+
+const FEATURES: FeatureItem[] = [
+  {
+    id: "global-distribution",
+    title: "موجودی انبار",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    icon: Globe,
+  },
+  {
+    id: "scalable-compute",
+    title: "بازگشت مشتری",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    icon: Cpu,
+  },
+  {
+    id: "managed-databases",
+    title: "صفحه فرود",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    icon: Database,
+  },
+  {
+    id: "layered-security",
+    title: "گزارش فروش",
+    description:
+      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    icon: ShieldCheck,
+  },
+];
+
+interface Feature230Props {
+  className?: string;
+}
+
+const Feature230 = ({ className }: Feature230Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("overflow-hidden py-32", className)}>
+      <div className="relative container">
+        <div className="absolute -top-px left-1/2 h-px w-screen -translate-x-1/2 bg-border" />
+        <img
+          src="/block-media/shadcnblocks/block/placeholder-1.svg"
+          alt="مدیریت سفارش"
+          className="relative left-1/2 aspect-video max-h-[680px] w-screen max-w-none -translate-x-1/2 rounded-b-xl border-b border-border object-cover lg:static lg:max-w-full lg:translate-x-0 lg:border-x"
+        />
+        <div className="mt-20 grid gap-8 lg:grid-cols-10">
+          <div className="text-start lg:col-span-4">
+            <h2 className="mb-8 text-2xll font-medium text-balance md:text-2xll">
+              فروش آنلاین را مقیاس‌پذیر کنید
+            </h2>
+            <p className="text-xl text-pretty text-muted-foreground">
+              مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+            </p>
+          </div>
+          <div className="grid gap-8 sm:grid-cols-2 lg:col-span-6">
+            {FEATURES.map((feature) => (
+              <div key={feature.id} className="text-start">
+                <feature.icon className="size-6" />
+                <h3 className="mt-4 text-lg font-medium">{feature.title}</h3>
+                <p className="mt-2 text-pretty text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature230 };
diff --git a/blocks/feature231.tsx b/blocks/feature231.tsx
new file mode 100644
index 0000000..2defab0
--- /dev/null
+++ b/blocks/feature231.tsx
@@ -0,0 +1,101 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "modern",
+    number: "۱",
+    title: "بهینه‌سازی محتوا",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+  },
+  {
+    id: "responsive",
+    number: "۲",
+    title: "تحلیل رقیب",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+  },
+  {
+    id: "customizable",
+    number: "۳",
+    title: "لینک داخلی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+  },
+  {
+    id: "accessible",
+    number: "۴",
+    title: "گزارش Core Web Vitals",
+    description:
+      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+  },
+] as const;
+
+interface Feature231Props {
+  className?: string;
+}
+
+const Feature231 = ({ className }: Feature231Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative overflow-hidden bg-background py-24 md:py-32",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
+          <div className="space-y-8 text-start">
+            <h1 className="text-2xll font-semibold tracking-tight text-balance sm:text-2xll">
+              <span className="mb-2 block text-muted-foreground">
+                رتبه کلمات کلیدی را پیگیری کنید
+              </span>
+              <span className="mb-2 block text-primary">تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.</span>
+              <span className="block">ترافیک ارگانیک</span>
+            </h1>
+
+            <hr className="w-24 border-t-2 border-border" />
+
+            <p className="max-w-md text-lg text-pretty text-muted-foreground">
+              گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
+            </p>
+
+            <div className="flex gap-4">
+              <Button size="lg" className="gap-2">
+                شروع کنید
+                <ArrowRight className="size-4 rtl:rotate-180" />
+              </Button>
+              <Button size="lg" variant="outline">
+                بیشتر بدانید
+              </Button>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 sm:gap-8">
+            {FEATURES.map((feature) => (
+              <div
+                key={feature.id}
+                className="rounded-lg border border-border bg-card p-6 text-start shadow-sm transition-all"
+              >
+                <div className="mb-4 flex size-8 items-center justify-center rounded-full bg-primary/10">
+                  <span className="font-bold text-primary">{feature.number}</span>
+                </div>
+                <h3 className="mb-2 text-xl font-semibold">{feature.title}</h3>
+                <p className="text-sm text-pretty text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature231 };
diff --git a/blocks/feature234.tsx b/blocks/feature234.tsx
new file mode 100644
index 0000000..ec9becf
--- /dev/null
+++ b/blocks/feature234.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature234Props {
+  className?: string;
+}
+
+const Feature234 = ({ className }: Feature234Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container flex flex-col items-center">
+        <h1 className="font-inter mx-auto max-w-4xl text-center text-[70px] leading-[65px] font-semibold tracking-tighter text-balance lg:text-[85px] lg:leading-[86px]">
+          عملیات سازمان را یکپارچه کنید
+        </h1>
+        <CardsContainer />
+        <p className="font-inter mx-auto max-w-xl text-center text-lg font-medium text-pretty text-black">
+          گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+        </p>
+        <div className="mt-10 flex items-center gap-2">
+          <Button
+            asChild
+            variant="default"
+            className="block h-fit w-fit rounded-full px-6 py-2 text-sm leading-loose"
+          >
+            <a href="#">از خرید تا فروش در یک سیستم</a>
+          </Button>
+          <Button
+            asChild
+            variant="secondary"
+            className="block h-fit w-fit rounded-full px-6 py-2 text-sm leading-loose"
+          >
+            <a href="#">یکپارچگی</a>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature234 };
+
+interface CardItem {
+  id: string;
+  imageAlt: string;
+  rotate: number;
+  isDark: boolean;
+  image: string;
+}
+
+const CARDS: CardItem[] = [
+  {
+    id: "card-1",
+    imageAlt: "گزارش مالی یکپارچه",
+    rotate: -10.87,
+    isDark: false,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: "card-2",
+    imageAlt: "داشبورد ERP",
+    rotate: -7.95,
+    isDark: true,
+    image: "/block-media/shadcnblocks/block/placeholder-black-1.svg",
+  },
+  {
+    id: "card-3",
+    imageAlt: "مدیریت عملیات",
+    rotate: -4.5,
+    isDark: false,
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    id: "card-4",
+    imageAlt: "گزارش مالی یکپارچه",
+    rotate: 0,
+    isDark: false,
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    id: "card-5",
+    imageAlt: "داشبورد ERP",
+    rotate: 4.5,
+    isDark: false,
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    id: "card-6",
+    imageAlt: "مدیریت عملیات",
+    rotate: 7.95,
+    isDark: false,
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    id: "card-7",
+    imageAlt: "گزارش مالی یکپارچه",
+    rotate: 10.87,
+    isDark: true,
+    image: "/block-media/shadcnblocks/block/placeholder-black-1.svg",
+  },
+];
+
+const CardsContainer = () => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <div className="my-16 ms-[50px] flex items-center justify-center lg:ms-0">
+      {CARDS.map((card, index) => {
+        const yOffset = Math.pow(Math.abs(index - 3), 1.2) * 12;
+        const isHovered = hoveredIndex === index;
+        const visibilityClasses =
+          (index === 0 || index === 1 || index === 5 || index === 6
+            ? " hidden sm:hidden "
+            : "") +
+          (index === 0 || index === 6 ? "md:hidden " : "md:block ") +
+          "lg:block";
+
+        return (
+          <motion.div
+            className={visibilityClasses}
+            key={card.id}
+            onMouseEnter={() => setHoveredIndex(index)}
+            onMouseLeave={() => setHoveredIndex(null)}
+            initial={{ y: yOffset }}
+            animate={{
+              y: isHovered ? yOffset - 20 : yOffset,
+              zIndex: isHovered ? 10 : 0,
+            }}
+            transition={{ duration: 0.3 }}
+          >
+            <div
+              className={cn(
+                "relative h-[176px] w-[177px] overflow-hidden rounded-3xl border",
+                card.isDark
+                  ? "mb-14 border-[#8b8b8b] bg-black shadow-2xl"
+                  : "border-[#cecece] bg-[#f5f5f5] shadow-lg",
+              )}
+              style={{
+                transform: `rotate(${card.rotate}deg)`,
+                marginInlineStart: index === 0 ? "0px" : "-50px",
+              }}
+            >
+              <img
+                src={card.image}
+                alt={card.imageAlt}
+                className="size-full object-cover object-center"
+              />
+            </div>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/blocks/feature235.tsx b/blocks/feature235.tsx
new file mode 100644
index 0000000..f085e86
--- /dev/null
+++ b/blocks/feature235.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { ArrowRight, Donut } from "lucide-react";
+
+import { ShineBorder } from "@/components/magicui/shine-border";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const GALLERY_IMAGES = [
+  {
+    id: "block-1",
+    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "گزارش‌ساز",
+    delayClass: "animation-delay-0",
+  },
+  {
+    id: "block-2",
+    src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "تحلیل داده سازمان",
+    delayClass: "animation-delay-500",
+  },
+  {
+    id: "block-3",
+    src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "داشبورد هوش تجاری",
+    delayClass: "animation-delay-1000",
+  },
+  {
+    id: "block-4",
+    src: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "گزارش‌ساز",
+    delayClass: "animation-delay-1500",
+  },
+  {
+    id: "block-5",
+    src: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "تحلیل داده سازمان",
+    delayClass: "animation-delay-2000",
+  },
+  {
+    id: "block-6",
+    src: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "داشبورد هوش تجاری",
+    delayClass: "animation-delay-2500",
+  },
+] as const;
+
+interface Feature235Props {
+  className?: string;
+}
+
+const Feature235 = ({ className }: Feature235Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <style jsx global>{`
+        :root {
+          --shine-color-1: #48e5c7;
+          --shine-color-2: #48e54d;
+          --shine-color-3: #e5dc48;
+        }
+        @keyframes flicker {
+          0%,
+          100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.3;
+          }
+        }
+        .animate-flicker {
+          animation: flicker 3s ease-in-out infinite;
+        }
+        .animation-delay-0 {
+          animation-delay: 0s;
+        }
+        .animation-delay-500 {
+          animation-delay: 500ms;
+        }
+        .animation-delay-1000 {
+          animation-delay: 1000ms;
+        }
+        .animation-delay-1500 {
+          animation-delay: 1500ms;
+        }
+        .animation-delay-2000 {
+          animation-delay: 2000ms;
+        }
+        .animation-delay-2500 {
+          animation-delay: 2500ms;
+        }
+      `}</style>
+      <div className="container flex flex-col items-center justify-center gap-10 md:justify-between lg:max-w-6xl lg:flex-row">
+        <div className="z-10 flex max-w-lg flex-col gap-12 text-start">
+          <div>
+            <Button
+              variant="ghost"
+              className="relative flex gap-3 rounded-full border-2 border-dashed border-muted p-5 text-base font-semibold text-foreground transition-all ease-in-out hover:gap-5"
+            >
+              داده سازمانی
+              <Donut />
+            </Button>
+          </div>
+          <h1 className="text-2xll font-semibold tracking-tighter text-balance text-foreground">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h1>
+          <p className="text-xl font-normal tracking-tight text-pretty text-muted-foreground">
+            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+          </p>
+          <div>
+            <Button
+              variant="outline"
+              className="relative flex gap-3 rounded-full border-2 border-dashed border-muted p-5 text-base font-semibold text-foreground transition-all ease-in-out hover:gap-5"
+            >
+              هوش تجاری
+              <ArrowRight className="size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+        <div className="relative max-w-3xl">
+          <div className="relative z-10 inline-flex items-center justify-start gap-2 rounded-3xl border border-border bg-muted p-2">
+            <div className="inline-flex w-76 flex-col items-center justify-start gap-5">
+              <div className="relative gap-2 rounded-2xl bg-background p-1.5">
+                <ShineBorder
+                  borderWidth={2}
+                  shineColor={[
+                    "var(--shine-color-1)",
+                    "var(--shine-color-2)",
+                    "var(--shine-color-3)",
+                  ]}
+                />
+                <div className="flex flex-1 flex-wrap content-center items-center justify-center gap-1">
+                  {GALLERY_IMAGES.map((image) => (
+                    <div
+                      key={image.id}
+                      className="relative h-24 w-36 overflow-hidden rounded-2xl"
+                    >
+                      <img
+                        src={image.src}
+                        alt={image.imageAlt}
+                        className={cn(
+                          "animate-flicker size-full object-cover",
+                          image.delayClass,
+                        )}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+          <svg
+            width="583"
+            height="455"
+            className="absolute end-48 bottom-[-60]"
+            viewBox="0 0 583 455"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M2.55487 322.329V453L305.639 451.57V341.935C305.639 312.547 329.463 288.723 358.851 288.723H542.008C563.381 288.723 580.707 271.397 580.707 250.024V40.8934C580.707 19.5203 563.381 2.19406 542.008 2.19406H332.877C311.504 2.19406 294.178 19.5203 294.178 40.8934V230.418C294.178 259.806 270.354 283.629 240.966 283.629H41.2542C19.8812 283.629 2.55487 300.956 2.55487 322.329Z"
+              fill="url(#paint0_linear_1_801)"
+              stroke="url(#paint1_linear_1_801)"
+              strokeOpacity="0.18"
+              strokeWidth="3.22494"
+              strokeLinecap="round"
+              strokeDasharray="9.67 9.67"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_1_801"
+                x1="407.667"
+                y1="36.7886"
+                x2="264.86"
+                y2="511.534"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#F3F3F3" />
+                <stop offset="1" stopColor="#F9F9F9" stopOpacity="0" />
+              </linearGradient>
+              <linearGradient
+                id="paint1_linear_1_801"
+                x1="340.7"
+                y1="99.5801"
+                x2="237.281"
+                y2="508.087"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#666666" />
+                <stop offset="1" stopColor="white" stopOpacity="0" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature235 };
diff --git a/blocks/feature236.tsx b/blocks/feature236.tsx
new file mode 100644
index 0000000..2f60131
--- /dev/null
+++ b/blocks/feature236.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight, ArrowUpRight, Group } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { ShineBorder } from "@/components/magicui/shine-border";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature236Props {
+  className?: string;
+}
+
+const Feature236 = ({ className }: Feature236Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container flex flex-col items-center gap-10 md:gap-0">
+        <Button
+          variant="outline"
+          className="flex items-center justify-center gap-5 rounded-full px-5! py-5 text-sm font-medium text-muted-foreground"
+        >
+          <Group />
+          تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+          <ArrowUpRight className="rtl:rotate-180" />
+        </Button>
+        <BracketedBorder>
+          <div className="mb-7 flex items-center justify-center gap-5 tracking-tight">
+            <div className="relative flex items-center justify-center">
+              <span className="absolute inline-block size-2 rounded-full bg-green-300" />
+              <span className="absolute inline-block size-3 animate-ping rounded-full bg-green-300" />
+            </div>
+            <p>از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.</p>
+          </div>
+          <h1 className="max-w-xl px-4 text-center text-2xll font-semibold tracking-tighter text-balance text-foreground md:text-[90px] md:leading-22">
+            هر سرنخ را تا قرارداد دنبال کنید
+          </h1>
+        </BracketedBorder>
+        <h2 className="text-3xl font-medium tracking-tighter text-foreground">
+          فروش تیم‌تان را یکجا مدیریت کنید
+        </h2>
+        <p className="max-w-2xl px-10 text-center text-pretty text-muted-foreground sm:mt-5 lg:text-xl">
+          پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.
+        </p>
+        <div className="flex flex-col gap-4 sm:mt-8 md:flex-row">
+          <Button className="h-11 w-full rounded-xl sm:w-auto">
+            روابط مشتری را در یک نگاه ببینید
+          </Button>
+          <Button
+            variant="outline"
+            className="h-11 w-full gap-2 rounded-xl sm:w-auto"
+          >
+            پایپ‌لاین فروش را شفاف کنید
+            <ArrowRight className="size-4 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const BracketedBorder = ({ children }: { children: ReactNode }) => (
+  <motion.div
+    initial={{ width: 0, opacity: 0 }}
+    className="relative flex flex-col items-center justify-center sm:my-10 md:h-[500px] md:overflow-hidden"
+    whileInView={{ width: "65vw", opacity: 1 }}
+    viewport={{ once: true }}
+    transition={{
+      width: {
+        type: "spring",
+        stiffness: 50,
+        damping: 20,
+        mass: 1,
+      },
+      opacity: { duration: 0.5 },
+    }}
+  >
+    <div className="absolute inset-0 hidden border border-foreground/10 md:block">
+      <ShineBorder
+        duration={10}
+        borderWidth={2}
+        shineColor={["oklch(87.1% 0.15 154.449)"]}
+      />
+      <Vector className="absolute start-1 top-1 rotate-90" />
+      <Vector className="absolute end-1 top-1 -rotate-180" />
+      <Vector className="absolute start-1 bottom-1" />
+      <Vector className="absolute end-1 bottom-1 -rotate-90" />
+    </div>
+    <div className="flex h-full w-screen flex-col items-center justify-center">
+      {children}
+    </div>
+  </motion.div>
+);
+
+export { Feature236 };
+
+const Vector = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    width="12"
+    height="12"
+    viewBox="0 0 21 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M0.7718 20.3821L0.771792 0.265381C3.72131 0.262685 6.1138 2.65299 6.1138 5.6025V15.1587H15.5512C18.436 15.1587 20.7746 17.4973 20.7746 20.3821H0.7718Z"
+      fill="black"
+    />
+  </svg>
+);
diff --git a/blocks/feature237.tsx b/blocks/feature237.tsx
new file mode 100644
index 0000000..fe591ef
--- /dev/null
+++ b/blocks/feature237.tsx
@@ -0,0 +1,387 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  ArrowUpRight,
+  ChartBarIcon,
+  ChartNetwork,
+  CheckCircle2,
+  Clock,
+  Cpu,
+  DollarSign,
+  LocateFixed,
+  Server,
+  Settings,
+  UserIcon,
+  Zap,
+} from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const ENVIRONMENT_LABELS = {
+  production: "تیم فروش",
+  staging: "بستن معامله",
+  development: "رشد درآمد",
+} as const;
+
+interface CardData {
+  id: string;
+  icon: React.ElementType;
+  title: string;
+  description: string;
+  href: string;
+  metrics: {
+    value: string;
+    label: string;
+    trend: number;
+    secondaryMetric?: {
+      value: string;
+      label: string;
+    };
+  };
+  status: {
+    label: string;
+    color: "text-green-500" | "text-yellow-500" | "text-blue-500";
+    icon: LucideIcon;
+    lastUpdated: string;
+  };
+  performance: {
+    cpu: string;
+    memory: string;
+    latency: string;
+  };
+  deployment: {
+    version: string;
+    environment: keyof typeof ENVIRONMENT_LABELS;
+    region: string;
+  };
+}
+
+const CARDS: CardData[] = [
+  {
+    id: "revenue",
+    icon: DollarSign,
+    title: "همکاری فروش و بازاریابی",
+    description:
+      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+    href: "#revenue",
+    metrics: {
+      value: "افزایش فروش",
+      label: "تیم فروش",
+      trend: 12.5,
+      secondaryMetric: {
+        value: "بستن معامله",
+        label: "رشد درآمد",
+      },
+    },
+    status: {
+      label: "افزایش فروش",
+      color: "text-green-500",
+      icon: CheckCircle2,
+      lastUpdated: "2024-03-21T15:30:00Z",
+    },
+    performance: {
+      cpu: "تیم فروش",
+      memory: "2.8GB",
+      latency: "120ms",
+    },
+    deployment: {
+      version: "v2.3.4",
+      environment: "production",
+      region: "us-west-2",
+    },
+  },
+  {
+    id: "analytics",
+    icon: ChartBarIcon,
+    title: "اولویت‌بندی سرنخ",
+    description:
+      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+    href: "#analytics",
+    metrics: {
+      value: "بستن معامله",
+      label: "رشد درآمد",
+      trend: -8.3,
+      secondaryMetric: {
+        value: "افزایش فروش",
+        label: "تیم فروش",
+      },
+    },
+    status: {
+      label: "بستن معامله",
+      color: "text-blue-500",
+      icon: Zap,
+      lastUpdated: "2024-03-21T15:28:00Z",
+    },
+    performance: {
+      cpu: "رشد درآمد",
+      memory: "12.4GB",
+      latency: "1.2ms",
+    },
+    deployment: {
+      version: "v3.1.0",
+      environment: "production",
+      region: "eu-west-1",
+    },
+  },
+  {
+    id: "architecture",
+    icon: Settings,
+    title: "قالب پیشنهاد فروش",
+    description:
+      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+    href: "#architecture",
+    metrics: {
+      value: "افزایش فروش",
+      label: "تیم فروش",
+      trend: 2.1,
+      secondaryMetric: {
+        value: "۱۲",
+        label: "بستن معامله",
+      },
+    },
+    status: {
+      label: "رشد درآمد",
+      color: "text-green-500",
+      icon: CheckCircle2,
+      lastUpdated: "2024-03-21T15:25:00Z",
+    },
+    performance: {
+      cpu: "افزایش فروش",
+      memory: "32GB",
+      latency: "85ms",
+    },
+    deployment: {
+      version: "v2.8.1",
+      environment: "production",
+      region: "global",
+    },
+  },
+  {
+    id: "security",
+    icon: UserIcon,
+    title: "ردیابی کووت",
+    description:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+    href: "#security",
+    metrics: {
+      value: "تیم فروش",
+      label: "بستن معامله",
+      trend: -15.7,
+      secondaryMetric: {
+        value: "رشد درآمد",
+        label: "افزایش فروش",
+      },
+    },
+    status: {
+      label: "تیم فروش",
+      color: "text-yellow-500",
+      icon: Clock,
+      lastUpdated: "2024-03-21T15:15:00Z",
+    },
+    performance: {
+      cpu: "بستن معامله",
+      memory: "4.2GB",
+      latency: "50ms",
+    },
+    deployment: {
+      version: "v1.9.3",
+      environment: "staging",
+      region: "us-east-1",
+    },
+  },
+  {
+    id: "network",
+    icon: ChartNetwork,
+    title: "تحلیل باخت معامله",
+    description:
+      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+    href: "#network",
+    metrics: {
+      value: "رشد درآمد",
+      label: "افزایش فروش",
+      trend: 25.4,
+      secondaryMetric: {
+        value: "تیم فروش",
+        label: "بستن معامله",
+      },
+    },
+    status: {
+      label: "رشد درآمد",
+      color: "text-green-500",
+      icon: CheckCircle2,
+      lastUpdated: "2024-03-21T15:29:00Z",
+    },
+    performance: {
+      cpu: "افزایش فروش",
+      memory: "128GB",
+      latency: "5ms",
+    },
+    deployment: {
+      version: "v4.2.0",
+      environment: "production",
+      region: "multi-region",
+    },
+  },
+  {
+    id: "location",
+    icon: LocateFixed,
+    title: "هدف‌گذاری تیمی",
+    description:
+      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+    href: "#location",
+    metrics: {
+      value: "تیم فروش",
+      label: "بستن معامله",
+      trend: 5.8,
+      secondaryMetric: {
+        value: "رشد درآمد",
+        label: "افزایش فروش",
+      },
+    },
+    status: {
+      label: "تیم فروش",
+      color: "text-blue-500",
+      icon: Zap,
+      lastUpdated: "2024-03-21T15:20:00Z",
+    },
+    performance: {
+      cpu: "بستن معامله",
+      memory: "16GB",
+      latency: "150ms",
+    },
+    deployment: {
+      version: "v2.4.5",
+      environment: "production",
+      region: "global",
+    },
+  },
+];
+
+interface Feature237Props {
+  className?: string;
+}
+
+const Feature237 = ({ className }: Feature237Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-balance text-foreground lg:text-2xll">
+          پیش‌بینی درآمد را دقیق‌تر کنید
+        </h1>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          {CARDS.map((card) => (
+            <a key={card.id} href={card.href} className="group block h-full">
+              <div className="flex h-full flex-col rounded-xl border bg-card p-6 text-start transition-all duration-200 hover:border-primary hover:shadow-lg">
+                <div className="flex h-full flex-col justify-between space-y-4">
+                  <div>
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <h3 className="text-xl text-balance text-foreground transition-colors duration-200 group-hover:text-primary">
+                          {card.title}
+                        </h3>
+                        <div className="flex items-center gap-2">
+                          <card.status.icon
+                            className={cn("size-4", card.status.color)}
+                          />
+                          <span
+                            className={cn(
+                              "font-mono text-sm",
+                              card.status.color,
+                            )}
+                          >
+                            {card.status.label}
+                          </span>
+                          <span className="font-mono text-xs text-muted-foreground">
+                            [
+                            {new Date(card.status.lastUpdated).toLocaleTimeString(
+                              "fa-IR",
+                            )}
+                            ]
+                          </span>
+                        </div>
+                      </div>
+                      <ArrowUpRight className="size-5 text-muted-foreground transition-transform duration-200 group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-primary rtl:rotate-180" />
+                    </div>
+
+                    <p className="mt-4 text-pretty text-muted-foreground">
+                      {card.description}
+                    </p>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <div className="font-mono text-xl font-bold">
+                          {card.metrics.value}
+                        </div>
+                        <div className="font-mono text-sm text-muted-foreground">
+                          {card.metrics.label}
+                        </div>
+                        <div
+                          className={cn(
+                            "font-mono text-sm",
+                            card.metrics.trend > 0
+                              ? "text-green-500"
+                              : "text-red-500",
+                          )}
+                        >
+                          {card.metrics.trend > 0 ? "+" : ""}
+                          {card.metrics.trend.toLocaleString("fa-IR")}٪
+                        </div>
+                      </div>
+                      {card.metrics.secondaryMetric && (
+                        <div>
+                          <div className="font-mono text-xl font-bold">
+                            {card.metrics.secondaryMetric.value}
+                          </div>
+                          <div className="font-mono text-sm text-muted-foreground">
+                            {card.metrics.secondaryMetric.label}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="grid grid-cols-3 gap-2 border-t pt-4">
+                      <div className="flex items-center gap-2">
+                        <Cpu className="size-4 text-muted-foreground" />
+                        <span className="font-mono text-xs">
+                          {card.performance.cpu}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Server className="size-4 text-muted-foreground" />
+                        <span className="font-mono text-xs">
+                          {card.performance.memory}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Zap className="size-4 text-muted-foreground" />
+                        <span className="font-mono text-xs">
+                          {card.performance.latency}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="border-t pt-4">
+                      <div className="flex items-center gap-2 font-mono text-xs text-muted-foreground">
+                        <span>{card.deployment.version}</span>
+                        <span>•</span>
+                        <span>
+                          {ENVIRONMENT_LABELS[card.deployment.environment]}
+                        </span>
+                        <span>•</span>
+                        <span>{card.deployment.region}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature237 };
diff --git a/blocks/feature238.tsx b/blocks/feature238.tsx
new file mode 100644
index 0000000..e68a669
--- /dev/null
+++ b/blocks/feature238.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ChevronRightIcon } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Feature238Props {
+  className?: string;
+}
+
+const Feature238 = ({ className }: Feature238Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <div className="mb-4 flex items-center justify-center gap-2">
+          <img
+            className="size-6"
+            alt="تحلیل عملکرد کمپین"
+            src="/block-media/shadcnblocks/block/block-1.svg"
+          />
+          <h2 className="text-center text-xl font-semibold tracking-tight text-foreground">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </h2>
+        </div>
+
+        <h1 className="text-center text-2xll font-bold tracking-tighter text-balance text-foreground md:text-[100px]">
+          بازاریابی را با داده هدایت کنید
+          <br />
+          هر کانال را از یک داشبورد بسنجید
+        </h1>
+
+        <p className="mx-auto mt-6 max-w-3xl text-center text-xl text-pretty text-muted-foreground">
+          با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+        </p>
+
+        <div className="relative mt-8 flex flex-col items-center justify-center">
+          <Button className="w-75 rounded-2xl px-2 py-6 shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40]">
+            ثبت‌نام رایگان
+          </Button>
+          <a
+            href="#"
+            className="group relative z-12 flex w-75 items-center justify-center rounded-2xl py-6 text-muted-foreground hover:bg-none"
+          >
+            گزارش لحظه‌ای هزینه، کلیک و تبدیل به شما کمک می‌کند بودجه را از کانال‌های ضعیف به کانال‌های پربازده منتقل کنید.
+            <ChevronRightIcon className="ms-1 size-4 transition-all ease-in-out group-hover:ms-4 rtl:rotate-180" />
+          </a>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 100 }}
+          transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
+          className="relative mt-22 h-100"
+        >
+          <motion.div
+            initial={{ y: 250 }}
+            animate={{ y: 0 }}
+            whileHover={{ y: -50 }}
+            transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
+            className="absolute top-20 start-0 z-8 hidden h-[350px] w-[550px] flex-col items-center justify-center rounded-3xl border border-border bg-muted p-2 md:flex"
+          >
+            <Card className="relative h-full w-full rounded-2xl border">
+              <CardContent className="flex h-full w-full items-center justify-center p-0">
+                <div className="absolute start-4 top-4 flex items-center gap-2">
+                  <div className="size-3.5 rounded-full bg-red-500" />
+                  <div className="size-3.5 rounded-full bg-yellow-500" />
+                  <div className="size-3.5 rounded-full bg-green-500" />
+                </div>
+                <img
+                  className="size-30"
+                  alt="نمودار ROI"
+                  src="/block-media/shadcnblocks/block/block-1.svg"
+                />
+              </CardContent>
+            </Card>
+          </motion.div>
+          <motion.div
+            initial={{ y: 250 }}
+            animate={{ y: 0 }}
+            whileHover={{ y: -50 }}
+            transition={{
+              ease: [0, 0.71, 0.2, 1.01],
+              duration: 0.8,
+              delay: 0.05,
+            }}
+            className="absolute top-0 left-1/2 z-10 flex h-[350px] w-full max-w-[550px] -translate-x-1/2 flex-col items-center justify-center rounded-3xl border border-border bg-muted p-2"
+          >
+            <Card className="relative h-full w-full rounded-2xl border bg-foreground">
+              <CardContent className="flex h-full w-full items-center justify-center p-0">
+                <div className="absolute start-4 top-4 flex items-center gap-2">
+                  <div className="size-3.5 rounded-full bg-red-500" />
+                  <div className="size-3.5 rounded-full bg-yellow-500" />
+                  <div className="size-3.5 rounded-full bg-green-500" />
+                </div>
+                <img
+                  className="size-30"
+                  alt="داشبورد بازاریابی دیجیتال"
+                  src="/block-media/shadcnblocks/block/block-white-1.svg"
+                />
+              </CardContent>
+            </Card>
+          </motion.div>
+          <motion.div
+            initial={{ y: 250 }}
+            animate={{ y: 0 }}
+            whileHover={{ y: -50 }}
+            transition={{
+              ease: [0, 0.71, 0.2, 1.01],
+              duration: 0.8,
+              delay: 0.1,
+            }}
+            className="absolute -top-18 end-0 z-11 hidden h-[350px] w-[550px] flex-col items-center justify-center rounded-3xl border border-border bg-muted p-2 md:flex"
+          >
+            <Card className="relative h-full w-full rounded-2xl border">
+              <CardContent className="flex h-full w-full items-center justify-center p-0">
+                <div className="absolute start-4 top-4 flex items-center gap-2">
+                  <div className="size-3.5 rounded-full bg-red-500" />
+                  <div className="size-3.5 rounded-full bg-yellow-500" />
+                  <div className="size-3.5 rounded-full bg-green-500" />
+                </div>
+                <img
+                  className="size-30"
+                  alt="تحلیل عملکرد کمپین"
+                  src="/block-media/shadcnblocks/block/block-1.svg"
+                />
+              </CardContent>
+            </Card>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature238 };
diff --git a/blocks/feature239.tsx b/blocks/feature239.tsx
new file mode 100644
index 0000000..0c0daa5
--- /dev/null
+++ b/blocks/feature239.tsx
@@ -0,0 +1,116 @@
+import { ArrowUpRight, ChevronRight, ChevronUp } from "lucide-react";
+import React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const Feature239 = () => {
+  return (
+    <section dir="rtl" lang="fa" className="bg-background py-32">
+      <div className="relative container flex flex-col items-center px-0! lg:pt-8">
+        <DottedDiv>
+          <div className="grid lg:grid-cols-2">
+            <div className="flex w-full flex-col gap-8 px-10 py-20 text-start md:px-14">
+              <Badge
+                variant="outline"
+                className="flex w-fit cursor-pointer items-center gap-4 rounded-full px-6 py-2 transition-all ease-in-out hover:gap-6"
+              >
+                <span className="text-sm font-medium tracking-tight text-muted-foreground">
+                  قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+                </span>
+                <ChevronRight className="size-4! rtl:rotate-180" />
+              </Badge>
+              <h1 className="text-2xll font-semibold tracking-tighter text-balance md:text-2xll">
+                فرایندها را استاندارد و سریع کنید
+                <br />
+                اتوماسیون را در کل سازمان یکپارچه کنید
+                <br />
+                خطای انسانی را در کارهای روزمره کم کنید
+              </h1>
+              <p className="tracking-tight text-pretty text-muted-foreground md:text-xl">
+                فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
+              </p>
+              <div className="flex w-full gap-2">
+                <Button className="text-md h-12 w-fit rounded-full bg-primary px-10 text-primary-foreground">
+                  شروع کنید
+                </Button>
+                <Button
+                  variant="outline"
+                  className="text-md h-12 w-12 rounded-full transition-all ease-in-out hover:rotate-45"
+                >
+                  <ArrowUpRight className="rtl:rotate-180" />
+                </Button>
+              </div>
+            </div>
+            <DottedDiv className="group size-full place-self-end p-4 lg:w-4/6">
+              <div className="relative size-full bg-muted/50 p-4 transition-all ease-in-out group-hover:bg-muted">
+                <div className="relative size-full overflow-hidden rounded-3xl">
+                  <img
+                    src="/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg"
+                    alt="سازنده گردش‌کار"
+                    className="size-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-linear-to-t from-black/70 to-transparent" />
+                </div>
+
+                <div className="absolute top-4 -ms-4 flex size-full flex-col items-center justify-between p-10">
+                  <p className="flex w-full items-center text-xl tracking-tighter text-background">
+                    با اتصال ابزارهای موجود، داده بین سیستم‌ها خودکار جریان پیدا می‌کند و نیاز به کپی دستی از بین می‌رود.
+                    <span className="mx-2 h-2.5 w-px bg-background" />
+                    قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+                  </p>
+                  <div className="flex flex-col items-center justify-center">
+                    <h2 className="text-center text-2xll font-semibold tracking-tight text-balance text-background">
+                      کارهای تکراری را خودکار کنید
+                      <br />
+                      گردش‌کار تیم را بدون کد بسازید
+                    </h2>
+                    <div className="mt-2 h-1 w-6 rounded-full bg-background" />
+                    <p className="mt-10 max-w-sm px-2 text-center text-lg leading-5 font-light tracking-tighter text-pretty text-background/80">
+                      فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
+                    </p>
+                  </div>
+                  <a
+                    href="#"
+                    className="group mb-6 flex cursor-pointer flex-col items-center justify-center text-background"
+                  >
+                    <ChevronUp
+                      size={30}
+                      className="transition-all ease-in-out group-hover:-translate-y-2"
+                    />
+                    <p className="text-xl tracking-tight text-background">
+                      مشاهده همه
+                    </p>
+                  </a>
+                </div>
+              </div>
+            </DottedDiv>
+          </div>
+        </DottedDiv>
+      </div>
+    </section>
+  );
+};
+
+export { Feature239 };
+
+const DottedDiv = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div className={cn("relative", className)}>
+    <div className="absolute top-4 -start-25 h-px w-[115%] bg-muted" />
+    <div className="absolute bottom-4 -start-25 h-px w-[115%] bg-muted" />
+    <div className="absolute -top-25 start-4 h-[130%] w-px bg-muted" />
+    <div className="absolute -top-25 end-4 h-[130%] w-px bg-muted" />
+    <div className="absolute start-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute end-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute start-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute end-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    {children}
+  </div>
+);
diff --git a/blocks/feature24.tsx b/blocks/feature24.tsx
new file mode 100644
index 0000000..2c7b9ef
--- /dev/null
+++ b/blocks/feature24.tsx
@@ -0,0 +1,47 @@
+import { ChevronRight, LayoutTemplate } from "lucide-react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Feature24Props {
+  className?: string;
+}
+
+const Feature24 = ({ className }: Feature24Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("mb-32 border-b pt-32", className)}
+    >
+      <div className="container max-w-7xl">
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center gap-1 text-muted-foreground">
+            <LayoutTemplate className="size-5 text-primary" />
+            <p>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</p>
+          </div>
+          <a href="#" className="hover:text-primary hover:underline">
+            بیشتر بدانید
+            <ChevronRight className="ms-2 inline-block size-4 rtl:rotate-180" />
+          </a>
+        </div>
+        <Separator className="mt-3 mb-8" />
+        <div className="flex flex-col justify-between gap-6 md:flex-row">
+          <h2 className="text-3xl font-medium md:w-1/2">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h2>
+          <p className="leading-7 text-muted-foreground md:w-1/2">
+            هر تیم داشبورد خودش را داشته باشد
+          </p>
+        </div>
+        <img
+          src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
+          alt="گزارش‌ساز"
+          className="mt-10 aspect-video w-full rounded-t-lg object-cover lg:mt-16"
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Feature24 };
diff --git a/blocks/feature240.tsx b/blocks/feature240.tsx
new file mode 100644
index 0000000..e5ee7f7
--- /dev/null
+++ b/blocks/feature240.tsx
@@ -0,0 +1,166 @@
+import { ChevronUp } from "lucide-react";
+import React from "react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const CAROUSEL_ITEMS = [
+  {
+    id: "performance",
+    year: "تحلیل داده",
+    month: "داشبورد",
+    title: "گزارش زمان‌بندی‌شده",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "react",
+    year: "شاخص کلیدی",
+    month: "بینش لحظه‌ای",
+    title: "تحلیل کوHORT",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "frontend",
+    year: "تحلیل داده",
+    month: "داشبورد",
+    title: "مقایسه دوره‌ای",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-xYFl3Q9am1E-unsplash.jpg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    id: "ui-ux",
+    year: "شاخص کلیدی",
+    month: "مه",
+    title: "خروجی گزارش",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "components",
+    year: "بینش لحظه‌ای",
+    month: "تحلیل داده",
+    title: "داشبورد سفارشی",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-majMgWtrF48-unsplash.jpg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+] as const;
+
+const Feature240 = () => {
+  return (
+    <section dir="rtl" lang="fa" className="bg-background py-32">
+      <div className="relative container">
+        <h1 className="z-10 mb-10 text-center text-2xll font-bold tracking-tighter text-balance text-foreground">
+          داده پراکنده را به تصمیم تبدیل کنید
+        </h1>
+
+        <Carousel
+          opts={{
+            align: "start",
+            loop: true,
+            direction: "rtl",
+          }}
+          className="w-full"
+        >
+          <CarouselContent className="py-5">
+            {CAROUSEL_ITEMS.map((item) => (
+              <CarouselItem
+                key={item.id}
+                className="select-none text-background md:basis-1/2 lg:basis-1/3 dark:text-foreground"
+              >
+                <DottedDiv className="group h-150 w-full place-self-end p-4">
+                  <div className="relative size-full bg-muted/50 p-4 transition-all ease-in-out group-hover:bg-muted">
+                    <div className="relative size-full overflow-hidden rounded-3xl">
+                      <img
+                        src={item.imageSrc}
+                        alt={item.imageAlt}
+                        className="size-full object-cover transition-all ease-in-out group-hover:scale-125"
+                      />
+                      <div className="absolute inset-0 bg-linear-to-t from-black/80 via-transparent to-transparent" />
+                    </div>
+
+                    <div className="absolute top-4 -ms-4 flex size-full flex-col items-center justify-between p-10">
+                      <p className="flex w-full items-center text-xl tracking-tighter">
+                        {item.year}
+                        <span className="mx-2 h-2.5 w-px bg-background dark:bg-foreground" />
+                        {item.month}
+                      </p>
+                      <div className="flex flex-col items-center justify-center">
+                        <h2 className="text-center text-xl font-semibold tracking-tight text-balance xl:text-2xll">
+                          {item.title}
+                        </h2>
+                        <div className="mt-2 h-1 w-6 rounded-full bg-background" />
+                        <p className="mt-10 max-w-sm px-2 text-center text-pretty leading-5 font-light tracking-tighter text-background/80 dark:text-foreground/80">
+                          {item.description}
+                        </p>
+                      </div>
+                      <a
+                        href="#"
+                        className="group mb-6 flex cursor-pointer flex-col items-center justify-center"
+                      >
+                        <ChevronUp
+                          size={30}
+                          className="transition-all ease-in-out group-hover:-translate-y-2"
+                        />
+                        <p className="text-xl tracking-tight">مشاهده همه</p>
+                      </a>
+                    </div>
+                  </div>
+                </DottedDiv>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+
+          <div className="mt-5 flex justify-end gap-3">
+            <CarouselPrevious className="static size-12" />
+            <CarouselNext variant="default" className="static size-12" />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Feature240 };
+
+const DottedDiv = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div className={cn("relative", className)}>
+    <div className="absolute top-4 -start-[28px] h-px w-full bg-muted" />
+    <div className="absolute bottom-4 -start-[28px] h-px w-full bg-muted" />
+    <div className="absolute -top-25 start-4 h-[130%] w-px bg-muted" />
+    <div className="absolute -top-25 end-4 h-[130%] w-px bg-muted" />
+    <div className="absolute start-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute end-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute start-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute end-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    {children}
+  </div>
+);
diff --git a/blocks/feature241.tsx b/blocks/feature241.tsx
new file mode 100644
index 0000000..2eca62f
--- /dev/null
+++ b/blocks/feature241.tsx
@@ -0,0 +1,120 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  ArrowUpRight,
+  AudioLines,
+  Box,
+  Fingerprint,
+  LocateFixed,
+} from "lucide-react";
+import React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface TeamFeature {
+  id: string;
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  href: string;
+}
+
+const TEAM_FEATURES: TeamFeature[] = [
+  {
+    id: "openai-scaling",
+    icon: LocateFixed,
+    title:
+      "پاسخ آماده",
+    description: "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    href: "#",
+  },
+  {
+    id: "collaborative-innovation",
+    icon: AudioLines,
+    title: "SLA هوشمند",
+    description: "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    href: "#",
+  },
+  {
+    id: "agile-development",
+    icon: Box,
+    title: "نظرسنجی رضایت",
+    description: "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+    href: "#",
+  },
+  {
+    id: "cross-functional",
+    icon: Fingerprint,
+    title: "تخصیص خودکار",
+    description: "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
+    href: "#",
+  },
+];
+
+interface Feature241Props {
+  className?: string;
+}
+
+const Feature241 = ({ className }: Feature241Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden bg-background py-32", className)}
+    >
+      <div className="container">
+        <div className="relative">
+          <header className="mb-15 max-w-2xl text-start">
+            <h1 className="mb-8 text-2xll font-bold tracking-tighter text-balance text-foreground lg:text-2xll">
+              زمان حل مسئله را کوتاه کنید
+            </h1>
+            <p className="text-lg leading-relaxed tracking-tight text-pretty text-muted-foreground md:text-xl">
+              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+            </p>
+          </header>
+          <div className="absolute -top-15 -end-10 hidden transition-all ease-in-out group-hover:-rotate-0 lg:block">
+            <img
+              src="/block-media/shadcnblocks/block/illustrations/tokyo-browser-window-with-tab-bars.svg"
+              className="size-150 md:size-100"
+              alt="مدیریت تیکت"
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          {TEAM_FEATURES.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <a
+                key={feature.id}
+                href={feature.href}
+                className="block transition-all duration-500 ease-in-out"
+              >
+                <Card className="group relative rounded-none! border border-border bg-background p-6 shadow-none transition-all duration-500 ease-in-out hover:bg-linear-to-l hover:from-transparent hover:to-muted rtl:hover:bg-linear-to-r">
+                  <CardContent className="flex h-full flex-col justify-between p-0 text-start">
+                    <div className="flex size-15 items-center justify-center border border-border bg-muted transition-colors duration-500 ease-in-out group-hover:bg-background">
+                      <Icon
+                        size={30}
+                        className="transition-all duration-500 ease-in-out"
+                      />
+                    </div>
+
+                    <h3 className="mt-4 text-xl leading-tight font-semibold tracking-tight text-balance text-foreground transition-all duration-500 ease-in-out md:text-xl lg:pe-30 lg:text-3xl">
+                      {feature.title}
+                    </h3>
+
+                    <div className="absolute end-6 bottom-6 flex size-12 items-center justify-center border border-border bg-muted opacity-0 transition-all duration-500 ease-in-out group-hover:opacity-100">
+                      <ArrowUpRight className="size-[27px] text-foreground transition-all duration-500 ease-in-out group-hover:rotate-45 rtl:rotate-180" />
+                    </div>
+                  </CardContent>
+                </Card>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature241 };
diff --git a/blocks/feature242.tsx b/blocks/feature242.tsx
new file mode 100644
index 0000000..068adc1
--- /dev/null
+++ b/blocks/feature242.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { ChevronRight, Plus } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const TESTIMONIALS = [
+  {
+    id: "copy-paste",
+    title: "طبقه‌بندی خودکار",
+    imageAlt: "دستیار هوش مصنوعی",
+    imgSrc:
+      "/block-media/shadcnblocks/block/illustrations/tokyo-exchange-between-the-user-and-the-global-network.svg",
+    href: "#",
+  },
+  {
+    id: "modern-ui",
+    title: "پیش‌بینی ریزش",
+    imageAlt: "پیشنهادهای هوشمند",
+    imgSrc:
+      "/block-media/shadcnblocks/block/illustrations/tokyo-letters-and-arrows-flying-out-of-a-black-hole.svg",
+    href: "#",
+  },
+  {
+    id: "workflow",
+    title: "جستجوی معنایی",
+    imageAlt: "تحلیل با AI",
+    imgSrc:
+      "/block-media/shadcnblocks/block/illustrations/tokyo-loading-the-next-page.svg",
+    href: "#",
+  },
+  {
+    id: "collaborate",
+    title: "تولید محتوا",
+    imageAlt: "دستیار هوش مصنوعی",
+    imgSrc:
+      "/block-media/shadcnblocks/block/illustrations/tokyo-many-browser-windows-with-different-information.svg",
+    href: "#",
+  },
+] as const;
+
+const Feature242 = () => {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const [current, setCurrent] = React.useState(0);
+  const [count, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(TESTIMONIALS.length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  const formatSlideNumber = (value: number) =>
+    value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });
+
+  return (
+    <section dir="rtl" lang="fa" className="overflow-hidden py-32">
+      <div className="relative container flex flex-col items-center md:px-0 lg:pt-8">
+        <div className="relative z-10 w-full items-center justify-between text-start lg:flex">
+          <h1 className="max-w-2xl text-2xll font-semibold tracking-tighter text-balance md:text-2xll">
+            با هوش مصنوعی سریع‌تر تصمیم بگیرید
+          </h1>
+          <p className="mt-8 max-w-lg tracking-tight text-pretty text-muted-foreground/80 md:text-xl lg:mt-0">
+            مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند.
+            تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.{" "}
+            <span className="group inline-flex cursor-pointer items-center font-medium text-foreground transition-all ease-in-out">
+              اتوماسیون AI
+              <ChevronRight
+                size={17}
+                className="mt-px ms-1 transition-all ease-in-out group-hover:ms-2 rtl:rotate-180"
+              />
+            </span>
+          </p>
+        </div>
+        <DottedDiv className="mt-8 flex w-full items-center justify-center px-2 py-10">
+          <Carousel
+            opts={{
+              align: "center",
+              loop: true,
+              direction: "rtl",
+            }}
+            className="w-full"
+            setApi={setApi}
+          >
+            <CarouselContent className="m-0 flex w-full">
+              {TESTIMONIALS.map((item) => (
+                <CarouselItem
+                  key={item.id}
+                  className="px-2 md:basis-1/2 lg:basis-1/3"
+                >
+                  <div className="group relative flex h-full max-h-96 w-full flex-col items-start justify-between rounded-3xl bg-muted p-5 text-ellipsis">
+                    <img
+                      className="max-h-72 w-full opacity-100 transition-all ease-in-out group-hover:scale-90 group-hover:opacity-60"
+                      src={item.imgSrc}
+                      alt={item.imageAlt}
+                    />
+                    <div className="flex w-full items-center justify-between gap-4">
+                      <h5 className="text-xl leading-7 font-medium tracking-tighter text-balance transition-all ease-in-out group-hover:translate-x-4 rtl:group-hover:-translate-x-4">
+                        {item.title}
+                      </h5>
+                      <a
+                        href={item.href}
+                        className="relative z-10 shrink-0 cursor-pointer"
+                        aria-label={`بیشتر درباره ${item.title}`}
+                      >
+                        <Button
+                          variant="outline"
+                          className="size-12 rounded-full bg-transparent transition-all ease-in-out hover:bg-muted"
+                        >
+                          <Plus className="scale-150" />
+                        </Button>
+                      </a>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+
+            <div className="mt-8 flex w-full items-center justify-between px-4">
+              <div className="flex items-center gap-2 font-medium">
+                <span className="text-lg">{formatSlideNumber(current)}</span>
+                <span className="text-muted-foreground">/</span>
+                <span className="text-muted-foreground">
+                  {formatSlideNumber(count)}
+                </span>
+              </div>
+
+              <div className="relative me-10 flex gap-2">
+                <CarouselPrevious className="size-10" />
+                <CarouselNext variant="default" className="size-10" />
+              </div>
+            </div>
+          </Carousel>
+        </DottedDiv>
+      </div>
+    </section>
+  );
+};
+
+export { Feature242 };
+
+const DottedDiv = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div className={cn("relative", className)}>
+    <div className="absolute top-4 -start-[12.5px] h-px w-[110%] bg-muted md:-start-20" />
+    <div className="absolute bottom-4 -start-[12.5px] h-px w-[110%] bg-muted md:-start-20" />
+    <div className="absolute -top-4 start-0 h-[110%] w-px bg-muted" />
+    <div className="absolute -top-4 end-0 h-[110%] w-px bg-muted" />
+    <div className="absolute start-[-3px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute end-[-3px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute start-[-3px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute end-[-3px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    {children}
+  </div>
+);
diff --git a/blocks/feature243.tsx b/blocks/feature243.tsx
new file mode 100644
index 0000000..f8dc20f
--- /dev/null
+++ b/blocks/feature243.tsx
@@ -0,0 +1,117 @@
+import { Cog, Gem, Landmark, LocateFixed } from "lucide-react";
+import React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Step {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+const STEPS: Step[] = [
+  {
+    id: "initialization",
+    title: "تقویم تیمی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    icon: (
+      <LocateFixed className="size-10 stroke-white transition-all ease-in-out group-hover:rotate-90" />
+    ),
+  },
+  {
+    id: "optimization",
+    title: "اشتراک فایل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    icon: (
+      <Cog className="size-10 stroke-white transition-all ease-in-out group-hover:rotate-90" />
+    ),
+  },
+  {
+    id: "efficiency",
+    title: "منشن و بحث",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    icon: (
+      <Gem className="size-10 stroke-white transition-all ease-in-out group-hover:size-12" />
+    ),
+  },
+  {
+    id: "finalization",
+    title: "ردیابی زمان",
+    description:
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+    icon: (
+      <Landmark className="size-10 stroke-white transition-all ease-in-out group-hover:size-12" />
+    ),
+  },
+];
+
+interface Feature243Props {
+  className?: string;
+}
+
+const Feature243 = ({ className }: Feature243Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background", className)}>
+      <div className="container py-32">
+        <header className="relative z-10 flex flex-col items-center justify-center gap-6 bg-background text-center">
+          <h1 className="text-2xll font-bold tracking-tighter text-balance text-foreground lg:text-2xll">
+            همکاری از راه دور را ساده کنید
+          </h1>
+
+          <p className="mt-2 mb-4 max-w-xl text-lg text-pretty text-muted-foreground md:text-xl">
+            اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
+          </p>
+        </header>
+
+        <div className="mt-24 flex flex-wrap items-center justify-center gap-18 sm:mt-68 sm:gap-6">
+          <div className="absolute top-40 left-1/2 h-55 w-0.5 rounded-full bg-muted lg:h-58" />
+          {STEPS.map((step, index) => (
+            <div
+              key={step.id}
+              className="relative flex w-fit flex-col items-center"
+            >
+              <div
+                className={cn(
+                  "absolute -top-[174px] left-1/2 h-0.5 w-[109%] rounded-full bg-muted",
+                  index === 3 ? "hidden" : "",
+                  index === 2 ? "hidden 2xl:block" : "",
+                  index === 1 ? "hidden lg:block" : "",
+                  index === 0 ? "hidden sm:block" : "",
+                )}
+              />
+              <div className="absolute -top-[174px] left-1/2 h-full w-0.5 rounded-full bg-muted" />
+              <div className="relative z-10 flex h-8 w-5 items-center justify-center rounded-full bg-background p-1 pb-5">
+                <div className="relative z-10 size-3 rounded-full bg-foreground" />
+              </div>
+
+              <Card className="group relative z-10 h-full w-full overflow-hidden rounded-4xl border-none bg-muted shadow-none sm:w-64 md:w-72">
+                <CardContent className="flex h-full flex-col items-center gap-5 p-0 pt-10 pb-5">
+                  <div className="flex size-20 items-center justify-center rounded-3xl bg-foreground">
+                    {step.icon}
+                  </div>
+
+                  <div className="flex w-full flex-col items-center gap-4 px-4 pt-5 pb-3">
+                    <h3 className="w-full text-center text-3xl font-semibold tracking-tighter text-balance text-foreground">
+                      {step.title}
+                    </h3>
+
+                    <p className="w-full max-w-sm text-center text-pretty font-medium text-muted-foreground/70">
+                      {step.description}
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature243 };
diff --git a/blocks/feature244.tsx b/blocks/feature244.tsx
new file mode 100644
index 0000000..c1c443e
--- /dev/null
+++ b/blocks/feature244.tsx
@@ -0,0 +1,129 @@
+import React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "collaboration",
+    title: "مدیریت محصول",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
+    imageAlt: "مدیریت سفارش",
+  },
+  {
+    id: "interface",
+    title: "پرداخت امن",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
+    imageAlt: "داشبورد فروش",
+  },
+  {
+    id: "integrations",
+    title: "ردیابی سفارش",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
+    imageAlt: "پنل فروشگاه آنلاین",
+  },
+  {
+    id: "analytics",
+    title: "تخفیف هوشمند",
+    description:
+      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-xYFl3Q9am1E-unsplash.jpg",
+    imageAlt: "مدیریت سفارش",
+  },
+] as const;
+
+const Feature244 = () => {
+  return (
+    <section dir="rtl" lang="fa" className="bg-background">
+      <div className="container py-32">
+        <div className="mb-16 max-w-2xl space-y-8 ps-4 text-start">
+          <h2 className="text-2xll font-bold tracking-tighter text-balance text-foreground md:text-2xll">
+            فروش آنلاین را مقیاس‌پذیر کنید
+          </h2>
+          <p className="text-lg tracking-tight text-pretty text-muted-foreground md:text-xl">
+            مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+          </p>
+        </div>
+
+        <Carousel
+          opts={{
+            align: "start",
+            loop: true,
+            direction: "rtl",
+          }}
+          className="w-full"
+        >
+          <CarouselContent className="p-2">
+            {FEATURES.map((item) => (
+              <CarouselItem key={item.id} className="md:basis-1/2 lg:basis-1/3">
+                <DottedDiv className="group h-[500px] place-self-end p-4">
+                  <Card className="size-full shrink-0 rounded-lg border border-border bg-muted">
+                    <CardContent className="relative flex h-full flex-col items-center justify-center gap-6 p-6">
+                      <img
+                        src={item.image}
+                        alt={item.imageAlt}
+                        className="mb-4 size-40 rounded-lg object-cover"
+                      />
+                      <h3 className="mb-2 text-center text-xl font-medium tracking-tighter text-balance text-foreground md:text-3xl">
+                        {item.title}
+                      </h3>
+                      <p className="text-center text-base tracking-tight text-pretty text-muted-foreground md:text-lg">
+                        {item.description}
+                      </p>
+                    </CardContent>
+                  </Card>
+                </DottedDiv>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="my-3 flex justify-end gap-3 pe-5">
+            <CarouselPrevious className="static m-0 size-12 translate-y-0 p-0" />
+            <CarouselNext
+              variant="default"
+              className="static size-12 translate-y-0"
+            />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Feature244 };
+
+const DottedDiv = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div className={cn("relative", className)}>
+    <div className="absolute top-4 -start-0 h-px w-[115%] bg-muted" />
+    <div className="absolute bottom-4 -start-0 h-px w-[115%] bg-muted" />
+    <div className="absolute -top-25 start-4 h-[130%] w-px bg-muted" />
+    <div className="absolute -top-25 end-4 h-[130%] w-px bg-muted" />
+    <div className="absolute start-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute end-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute start-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute end-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    {children}
+  </div>
+);
diff --git a/blocks/feature245.tsx b/blocks/feature245.tsx
new file mode 100644
index 0000000..76ae9d0
--- /dev/null
+++ b/blocks/feature245.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const handwrittenTextClasses =
+  "flex gap-3 font-handwriting text-xs tracking-tight md:text-xl";
+
+const FEATURES = [
+  { id: "dark-mode", label: "ترافیک ارگانیک" },
+  { id: "realtime", label: "رتبه‌بندی" },
+  { id: "auth", label: "محتوای SEO" },
+  { id: "drag-drop", label: "بهینه‌سازی جستجو" },
+  { id: "api", label: "ترافیک ارگانیک" },
+  { id: "rbac", label: "رتبه‌بندی" },
+  { id: "i18n", label: "محتوای SEO" },
+  { id: "autosave", label: "بهینه‌سازی جستجو" },
+] as const;
+
+const Line1 = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="61"
+    {...props}
+    height="26"
+    viewBox="0 0 61 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.9646 1.91797C17.3747 7.75772 32.6529 11.57 48.5386 15.7286C49.4358 15.9635 58.8632 18.2083 58.5163 17.679C55.5766 13.1937 48.1816 12.4253 45.0204 8.60143C41.6482 4.52239 53.6346 15.2056 58.7437 16.5867C60.5905 17.0859 54.584 17.7874 53.7729 17.9579C48.9299 18.9758 45.2528 21.6554 41.1771 24.3266"
+      stroke="#1C1C1C"
+      strokeWidth="2.46548"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+const Line2 = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    width="74"
+    height="32"
+    viewBox="0 0 74 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M49.8383 29.7093C56.0593 26.3815 62.2923 22.5754 68.9255 20.0624C69.9895 19.6593 71.3535 19.2757 72.2604 18.5417C73.5246 17.5184 64.9285 11.3625 63.8012 10.4351C62.8289 9.63523 51.4736 -1.49746 51.3055 1.71016C51.2106 3.52199 50.914 11.4552 48.9691 11.3533C42.6504 11.0222 9.82535 6.12723 3.49897 5.79571C1.55368 5.69377 1.32727 12.2958 1.22636 14.2215C1.14589 15.7572 0.522713 17.2364 2.41951 17.3358C6.59008 17.5543 37.3937 21.733 41.5643 21.9516C42.201 21.9849 51.105 21.6355 51.1608 22.5901C51.2617 24.32 49.404 28.8174 48.589 30.2542"
+      stroke="#1C1C1C"
+      strokeWidth="1.90473"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+const Line3 = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    width="63"
+    height="32"
+    viewBox="0 0 63 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.4458 14.4424C4.99614 10.5607 8.34323 6.53007 13.0964 4.11905C14.5444 3.38458 19.3389 0.639317 21.0232 1.57508C25.6159 4.12659 18.5671 16.2199 17.5207 19.0879C14.8301 26.4621 15.6961 32.2209 25.0788 29.9273C35.1999 27.4533 47.485 21.5318 55.7907 15.1429C57.9879 13.4527 63.8769 11.1241 58.3715 11.1241C56.3948 11.1241 48.074 10.9476 54.5003 11.7509C55.0729 11.8225 61.5422 11.6344 61.5422 11.9353C61.5422 12.6635 58.6285 15.4157 58.1872 16.3964C57.4223 18.0961 56.5281 19.1618 56.5281 21.0788"
+      stroke="#1C1C1C"
+      strokeWidth="2.24706"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+const Line4 = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    width="82"
+    height="45"
+    viewBox="0 0 82 45"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.07928 1.78438C14.4865 20.4361 33.245 54.8532 60.3785 38.9569C67.0254 35.0628 69.6429 28.8775 72.9705 22.292C73.1143 22.0075 75.3857 14.886 74.4369 15.319C71.8963 16.4786 56.8203 23.0816 66.5539 18.7069C67.5836 18.244 74.045 13.9211 75.102 14.4551C77.9817 15.9102 79.704 30.0755 80.7698 33.3184"
+      stroke="#1C1C1C"
+      strokeWidth="2.40332"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+const LINE_COMPONENTS = [Line1, Line2, Line3, Line4] as const;
+
+interface Feature245Props {
+  className?: string;
+}
+
+const Feature245 = ({ className }: Feature245Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background", className)}>
+      <div className="relative container flex flex-col items-center overflow-hidden py-32">
+        <div className="mx-auto max-w-3xl text-center">
+          <h1 className="text-2xll font-semibold tracking-tighter text-balance text-foreground md:text-2xll">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h1>
+          <p className="my-4 tracking-tighter text-pretty text-muted-foreground/60 md:text-xl">
+            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+          </p>
+        </div>
+        <div className="relative z-10 mx-auto mt-12 min-h-full max-w-3xl md:w-1/2">
+          <div className="absolute -start-52 z-10 hidden h-full flex-col items-end justify-between md:flex lg:-start-62">
+            {[0, 1, 2, 3].map((i) => (
+              <motion.div
+                key={FEATURES[i].id}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{
+                  ease: [0.33, 1, 0.68, 1],
+                  duration: 0.7,
+                  delay: 0.7 + i * 0.18,
+                }}
+                className={handwrittenTextClasses}
+              >
+                {FEATURES[i].label}{" "}
+                {React.createElement(LINE_COMPONENTS[i], {
+                  className: "mt-4 w-10 md:w-16",
+                  "aria-hidden": true,
+                })}
+              </motion.div>
+            ))}
+          </div>
+          <div className="absolute -end-58 z-10 hidden h-full flex-col justify-between md:flex lg:-end-64">
+            {[4, 5, 6, 7].map((i) => (
+              <motion.div
+                key={FEATURES[i].id}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{
+                  ease: [0.33, 1, 0.68, 1],
+                  duration: 0.7,
+                  delay: 0.7 + (i - 4) * 0.18,
+                }}
+                className={handwrittenTextClasses}
+              >
+                {React.createElement(LINE_COMPONENTS[i - 4], {
+                  className: "mt-4 w-10 scale-x-[-1] md:w-16",
+                  "aria-hidden": true,
+                })}{" "}
+                {FEATURES[i].label}
+              </motion.div>
+            ))}
+          </div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 200 }}
+            animate={{ opacity: 100, y: 0 }}
+            transition={{ ease: [0.33, 1, 0.68, 1], duration: 0.8 }}
+            className="relative z-0"
+          >
+            <Card className="group h-130 w-full rounded-4xl border border-border bg-background p-2 shadow-none lg:p-3">
+              <CardContent className="size-full rounded-3xl border-2 border-background bg-muted">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  className="size-full object-cover"
+                  alt="داشبورد SEO"
+                />
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature245 };
diff --git a/blocks/feature246.tsx b/blocks/feature246.tsx
new file mode 100644
index 0000000..bbf16b9
--- /dev/null
+++ b/blocks/feature246.tsx
@@ -0,0 +1,65 @@
+import { BadgeCheck } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const BENEFITS = [
+  { id: "global", label: "یکپارچگی" },
+  { id: "no-spam", label: "عملیات" },
+  { id: "no-junk", label: "مدیریت سازمان" },
+  { id: "explore", label: "ERP" },
+] as const;
+
+interface Feature246Props {
+  className?: string;
+}
+
+const Feature246 = ({ className }: Feature246Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background", className)}>
+      <div className="container flex flex-col justify-between overflow-hidden py-32 lg:flex-row">
+        <div className="flex w-full flex-col items-start gap-20 text-start lg:me-2">
+          <h1 className="text-2xll font-semibold tracking-tighter text-balance text-foreground md:text-2xll">
+            ERP
+            <br />
+            از خرید تا فروش در یک سیستم
+          </h1>
+          <div className="space-y-5">
+            {BENEFITS.map((benefit) => (
+              <div key={benefit.id} className="flex items-center gap-4">
+                <div className="flex size-7 items-center justify-center">
+                  <BadgeCheck className="h-20" />
+                </div>
+                <span className="text-xl tracking-tight text-foreground">
+                  {benefit.label}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div className="flex w-full items-center overflow-hidden rounded-full border border-border p-2">
+            <Input
+              type="email"
+              dir="rtl"
+              className="h-full border-none ps-6 text-start text-lg! tracking-tight shadow-none outline-none focus-visible:ring-0 focus-visible:outline-none"
+              placeholder="عملیات سازمان را یکپارچه کنید"
+            />
+            <Button className="h-15 shrink-0 rounded-full bg-foreground px-10 text-lg font-medium tracking-tight text-background transition-all ease-in-out hover:px-12">
+              ثبت‌نام
+            </Button>
+          </div>
+        </div>
+        <div className="relative flex h-auto w-full items-center justify-end rounded-none">
+          <img
+            src="/block-media/shadcnblocks/block/illustrations/tokyo-letters-and-arrows-flying-out-of-a-black-hole.svg"
+            className="start-40 scale-x-[-1] object-fit rtl:scale-x-100 lg:absolute"
+            alt="گزارش مالی یکپارچه"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature246 };
diff --git a/blocks/feature247.tsx b/blocks/feature247.tsx
new file mode 100644
index 0000000..960be77
--- /dev/null
+++ b/blocks/feature247.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import type { MotionValue } from "motion/react";
+import { motion, useScroll, useTransform } from "motion/react";
+import type { ComponentPropsWithoutRef, FC, ReactNode } from "react";
+import React from "react";
+import { useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+const REVEAL_TEXT =
+  "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.";
+
+const Feature247 = () => {
+  return (
+    <section dir="rtl" lang="fa" className="py-32">
+      <div className="container flex flex-col items-center justify-center">
+        <div className="flex max-w-4xl">
+          <TextReveal
+            title="تصمیم استراتژیک را داده‌محور کنید"
+            className="items-center justify-center text-center"
+          >
+            {REVEAL_TEXT}
+          </TextReveal>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature247 };
+
+interface TextRevealProps extends ComponentPropsWithoutRef<"div"> {
+  children: string;
+  title?: string;
+  maxWidth?: string;
+}
+
+const TextReveal: FC<TextRevealProps> = ({
+  children,
+  title,
+  className,
+  maxWidth,
+}) => {
+  const targetRef = useRef<HTMLDivElement | null>(null);
+  const { scrollYProgress } = useScroll({
+    target: targetRef,
+  });
+
+  const words = children.split(" ");
+
+  return (
+    <div
+      ref={targetRef}
+      className={cn("relative z-0 h-[200vh]", className)}
+      style={{ maxWidth: maxWidth || "56rem" }}
+    >
+      <div className="sticky top-0 mx-auto flex h-[50%] items-center bg-transparent px-4 py-20">
+        <div className="flex flex-col justify-center">
+          <span className="text-center text-lg font-medium tracking-tight text-foreground">
+            {title}
+          </span>
+          <span
+            className={cn(
+              "flex flex-wrap p-5 text-xl font-semibold text-balance text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-xl xl:text-2xll dark:text-white/20",
+              className,
+            )}
+          >
+            {words.map((word, i) => {
+              const start = i / words.length;
+              const end = start + 1 / words.length;
+              return (
+                <Word key={`${word}-${i}`} progress={scrollYProgress} range={[start, end]}>
+                  {word}
+                </Word>
+              );
+            })}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface WordProps {
+  children: ReactNode;
+  progress: MotionValue<number>;
+  range: [number, number];
+}
+
+const Word: FC<WordProps> = ({ children, progress, range }) => {
+  const opacity = useTransform(progress, range, [0, 1]);
+  return (
+    <span className="relative mx-1 lg:mx-1.5">
+      <span className="absolute opacity-30">{children}</span>
+      <motion.span
+        style={{ opacity }}
+        className="text-black dark:text-white"
+      >
+        {children}
+      </motion.span>
+    </span>
+  );
+};
diff --git a/blocks/feature248.tsx b/blocks/feature248.tsx
new file mode 100644
index 0000000..b9ea6b9
--- /dev/null
+++ b/blocks/feature248.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import type { MotionValue } from "motion/react";
+import { motion, useScroll, useTransform } from "motion/react";
+import type { ComponentPropsWithoutRef, FC, ReactNode } from "react";
+import React from "react";
+import { useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+const REVEAL_TEXT =
+  "تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.";
+
+const Feature248 = () => {
+  return (
+    <section dir="rtl" lang="fa" className="dark bg-background py-32">
+      <div className="container flex flex-col items-center justify-center">
+        <TextReveal className="font-medium xl:text-3xl" maxWidth="86rem">
+          {REVEAL_TEXT}
+        </TextReveal>
+      </div>
+    </section>
+  );
+};
+
+export { Feature248 };
+
+// Below is the modified component from Magic UI
+// Original source: https://magicui.design/docs/components/text-reveal
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+interface TextRevealProps extends ComponentPropsWithoutRef<"div"> {
+  children: string;
+  title?: string;
+  maxWidth?: string;
+}
+
+const TextReveal: FC<TextRevealProps> = ({
+  children,
+  title,
+  className,
+  maxWidth,
+}) => {
+  const targetRef = useRef<HTMLDivElement | null>(null);
+  const { scrollYProgress } = useScroll({
+    target: targetRef,
+  });
+
+  const words = children.split(" ");
+
+  return (
+    <div
+      ref={targetRef}
+      className={cn("relative z-0 h-[200vh]", className)}
+      style={{ maxWidth: maxWidth || "56rem" }}
+    >
+      <div className="sticky top-0 mx-auto flex h-[50%] items-center bg-transparent px-4 py-20">
+        <div className="flex flex-col justify-center">
+          {title ? (
+            <span className="text-center text-lg font-medium tracking-tight text-foreground">
+              {title}
+            </span>
+          ) : null}
+          <span
+            className={cn(
+              "flex flex-wrap p-5 text-xl font-semibold text-balance text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-xl xl:text-2xll dark:text-white/20",
+              className,
+            )}
+          >
+            {words.map((word, i) => {
+              const start = i / words.length;
+              const end = start + 1 / words.length;
+              return (
+                <Word key={`${word}-${i}`} progress={scrollYProgress} range={[start, end]}>
+                  {word}
+                </Word>
+              );
+            })}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface WordProps {
+  children: ReactNode;
+  progress: MotionValue<number>;
+  range: [number, number];
+}
+
+const Word: FC<WordProps> = ({ children, progress, range }) => {
+  const opacity = useTransform(progress, range, [0, 1]);
+  return (
+    <span className="relative mx-1 lg:mx-1.5">
+      <span className="absolute opacity-30">{children}</span>
+      <motion.span style={{ opacity }} className="text-black dark:text-white">
+        {children}
+      </motion.span>
+    </span>
+  );
+};
diff --git a/blocks/feature249.tsx b/blocks/feature249.tsx
new file mode 100644
index 0000000..331978f
--- /dev/null
+++ b/blocks/feature249.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import type { MotionValue } from "motion/react";
+import { motion, useScroll, useTransform } from "motion/react";
+import React, { useRef } from "react";
+
+import { AuroraText } from "@/components/magicui/aurora-text";
+import { cn } from "@/lib/utils";
+
+interface Feature249Props {
+  className?: string;
+}
+
+const Feature249 = ({ className }: Feature249Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <ContainerScroll
+          titleComponent={
+            <>
+              <p className="mx-auto mb-4 text-pretty text-muted-foreground md:text-xl">
+                با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+              </p>
+              <h1 className="text-2xll font-semibold tracking-tighter text-balance md:text-8xl xl:text-[10rem]">
+                <span className="pe-6 text-muted-foreground/40">پیش‌بینی درآمد را دقیق‌تر کنید</span>
+                <AuroraText
+                  colors={["#ff6449", "#ff6449", "#6248fe", "#6248fe"]}
+                >
+                  چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
+                </AuroraText>
+              </h1>
+            </>
+          }
+        >
+          <img
+            src="/block-media/shadcnblocks/block/dashboard/admin-dashboard-1.png"
+            alt="صف اولویت سرنخ‌ها"
+            height={720}
+            width={1400}
+            className="mx-auto size-full rounded-2xl object-cover object-start-top"
+            draggable={false}
+          />
+        </ContainerScroll>
+      </div>
+    </section>
+  );
+};
+
+export { Feature249 };
+
+// Below is the modified component from Aceternity UI
+// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/container-scroll-animation.json
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+export const ContainerScroll = ({
+  titleComponent,
+  children,
+}: {
+  titleComponent: string | React.ReactNode;
+  children: React.ReactNode;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+  });
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+
+  const scaleDimensions = () => {
+    return isMobile ? [0.7, 0.9] : [1.05, 1];
+  };
+
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
+  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
+
+  return (
+    <div
+      className="relative flex h-[60rem] items-center justify-center"
+      ref={containerRef}
+    >
+      <div
+        className="relative w-full"
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <Header translate={translate} titleComponent={titleComponent} />
+        <Card rotate={rotate} translate={translate} scale={scale}>
+          {children}
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export const Header = ({
+  translate,
+  titleComponent,
+}: {
+  translate: MotionValue<number>;
+  titleComponent: React.ReactNode;
+}) => {
+  return (
+    <motion.div
+      style={{
+        translateY: translate,
+      }}
+      className="div mx-auto max-w-5xl text-center"
+    >
+      {titleComponent}
+    </motion.div>
+  );
+};
+
+export const Card = ({
+  rotate,
+  scale,
+  children,
+}: {
+  rotate: MotionValue<number>;
+  scale: MotionValue<number>;
+  translate: MotionValue<number>;
+  children: React.ReactNode;
+}) => {
+  return (
+    <motion.div
+      style={{
+        rotateX: rotate,
+        scale,
+      }}
+      className="-4 mx-auto -mt-12 h-[30rem] w-full max-w-5xl rounded-[30px] p-2 shadow-2xl md:h-[40rem] md:p-6"
+    >
+      <div className="size-full overflow-hidden rounded-2xl bg-gray-100 md:rounded-2xl md:p-4 dark:bg-zinc-900">
+        {children}
+      </div>
+    </motion.div>
+  );
+};
diff --git a/blocks/feature25.tsx b/blocks/feature25.tsx
new file mode 100644
index 0000000..1e7b7c9
--- /dev/null
+++ b/blocks/feature25.tsx
@@ -0,0 +1,97 @@
+import { Check } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    items: [
+      "ثبت خودکار فعالیت‌های فروش",
+      "امتیازدهی هوشمند سرنخ",
+      "گزارش عملکرد هر نماینده",
+      "همگام‌سازی با ایمیل و تقویم",
+      "ردیابی مرحله هر معامله",
+      "هشدار معاملات در معرض ریسک",
+      "ثبت خودکار فعالیت‌های فروش",
+      "امتیازدهی هوشمند سرنخ",
+      "گزارش عملکرد هر نماینده",
+    ],
+  },
+  {
+    title: "اتوماسیون مراحل فروش",
+    items: [
+      "همگام‌سازی با ایمیل و تقویم",
+      "ردیابی مرحله هر معامله",
+      "هشدار معاملات در معرض ریسک",
+      "ثبت خودکار فعالیت‌های فروش",
+      "امتیازدهی هوشمند سرنخ",
+      "گزارش عملکرد هر نماینده",
+      "همگام‌سازی با ایمیل و تقویم",
+      "ردیابی مرحله هر معامله",
+      "هشدار معاملات در معرض ریسک",
+    ],
+  },
+  {
+    title: "پیش‌بینی درآمد",
+    items: [
+      "ثبت خودکار فعالیت‌های فروش",
+      "امتیازدهی هوشمند سرنخ",
+      "گزارش عملکرد هر نماینده",
+      "همگام‌سازی با ایمیل و تقویم",
+      "ردیابی مرحله هر معامله",
+      "هشدار معاملات در معرض ریسک",
+      "ثبت خودکار فعالیت‌های فروش",
+      "امتیازدهی هوشمند سرنخ",
+      "گزارش عملکرد هر نماینده",
+    ],
+  },
+];
+
+interface Feature25Props {
+  className?: string;
+}
+
+const Feature25 = ({ className }: Feature25Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
+          <Badge variant="outline">هر سرنخ را تا قرارداد دنبال کنید</Badge>
+          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-xl">
+            فروش تیم‌تان را یکجا مدیریت کنید
+          </h2>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+          </p>
+        </div>
+        <div className="flex flex-col items-center justify-center">
+          {sections.map((section, idx) => (
+            <div key={idx} className="w-full max-w-96 lg:max-w-none">
+              <Separator className="my-16 w-full" />
+              <div className="mx-auto inline-block w-full gap-x-10 lg:grid lg:grid-cols-4">
+                <h3 className="mb-4 text-xl font-semibold lg:text-3xl">
+                  {section.title}
+                </h3>
+                <ul className="col-span-3 grid gap-x-10 gap-y-4 lg:grid-cols-3">
+                  {section.items.map((item, itemIdx) => (
+                    <li
+                      key={itemIdx}
+                      className="flex items-center gap-2 text-muted-foreground"
+                    >
+                      <Check className="size-4 shrink-0" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature25 };
diff --git a/blocks/feature250.tsx b/blocks/feature250.tsx
new file mode 100644
index 0000000..58626b2
--- /dev/null
+++ b/blocks/feature250.tsx
@@ -0,0 +1,445 @@
+"use client";
+
+import { Cpu, Zap } from "lucide-react";
+import { motion } from "motion/react";
+import type { RefObject } from "react";
+import React, { useRef } from "react";
+import { useEffect, useId, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Feature250Props {
+  className?: string;
+}
+
+const Feature250 = ({ className }: Feature250Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <p className="mx-auto mb-4 max-w-sm text-center text-pretty text-muted-foreground md:text-xl">
+          با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+        </p>
+        <h1 className="mx-auto -mb-12 max-w-3xl text-center text-xl font-medium tracking-tighter text-balance md:text-2xll lg:mb-5 lg:text-2xll">
+          کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+        </h1>
+        <AnimatedBeamIllustration />
+      </div>
+    </section>
+  );
+};
+
+export { Feature250 };
+
+const REVERSE = false;
+const DURATION = 4;
+
+function AnimatedBeamIllustration() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const div1Ref = useRef<HTMLDivElement>(null);
+  const div2Ref = useRef<HTMLDivElement>(null);
+  const div3Ref = useRef<HTMLDivElement>(null);
+  const div4Ref = useRef<HTMLDivElement>(null);
+  const div5Ref = useRef<HTMLDivElement>(null);
+  const div6Ref = useRef<HTMLDivElement>(null);
+  const div7Ref = useRef<HTMLDivElement>(null);
+  return (
+    <div
+      className="relative flex w-full items-center justify-center overflow-hidden p-10"
+      ref={containerRef}
+    >
+      <div className="flex w-full flex-col items-center justify-between gap-10 lg:flex-row">
+        <div className="relative z-10 flex h-100 w-full items-center justify-center rounded-3xl lg:w-0">
+          <div
+            ref={div1Ref}
+            className="absolute start-0 top-40 z-10 flex size-18 -translate-y-1/2 items-center justify-center rounded-full bg-background p-1 lg:start-0 lg:top-1/2"
+          >
+            <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
+              <div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
+                <Cpu size={16} />
+              </div>
+            </div>
+          </div>
+          <div
+            ref={div2Ref}
+            className="absolute end-0 top-40 z-10 flex size-18 -translate-y-1/2 items-center justify-center rounded-full bg-background p-1 lg:start-20 lg:top-20"
+          >
+            <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
+              <div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
+                <Cpu size={16} />
+              </div>
+            </div>
+          </div>
+          <div
+            ref={div3Ref}
+            className="absolute start-6 bottom-0 z-10 flex size-18 -translate-y-1/2 items-center justify-center rounded-full bg-background p-1 lg:start-20 lg:bottom-2"
+          >
+            <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
+              <div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
+                <Cpu size={16} />
+              </div>
+            </div>
+          </div>
+          <div
+            ref={div4Ref}
+            className="absolute end-6 bottom-0 z-10 flex size-18 -translate-y-1/2 items-center justify-center rounded-full bg-background p-1 lg:start-50 lg:top-0"
+          >
+            <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
+              <div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
+                <Cpu size={16} />
+              </div>
+            </div>
+          </div>
+          <div
+            ref={div5Ref}
+            className="absolute top-20 z-10 flex size-18 -translate-y-1/2 items-center justify-center rounded-full bg-background p-1 lg:start-50 lg:top-100"
+          >
+            <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
+              <div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
+                <Cpu size={16} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          ref={div6Ref}
+          className="z-10 flex size-32 items-center justify-center rounded-3xl border bg-muted lg:size-42"
+        >
+          <img
+            src="/block-media/shadcnblocks/block/block-1.svg"
+            className="size-14 lg:size-18 dark:invert"
+            alt="تحلیل عملکرد کمپین"
+          />
+        </div>
+        <div
+          ref={div7Ref}
+          className="z-10 mt-40 flex size-15 items-center justify-center rounded-xl border bg-muted lg:mt-0"
+        >
+          <Zap fill="currentColor" />
+        </div>
+      </div>
+
+      <div className="block lg:hidden">
+        <AnimatedBeam
+          duration={DURATION}
+          containerRef={containerRef}
+          fromRef={div3Ref}
+          toRef={div6Ref}
+          reverse={REVERSE}
+        />
+        <AnimatedBeam
+          duration={DURATION}
+          endYOffset={-60}
+          endXOffset={-10}
+          curvature={10}
+          containerRef={containerRef}
+          fromRef={div1Ref}
+          toRef={div6Ref}
+          reverse={REVERSE}
+        />
+        <AnimatedBeam
+          duration={DURATION}
+          containerRef={containerRef}
+          fromRef={div5Ref}
+          toRef={div6Ref}
+          direction="vertical"
+          reverse={REVERSE}
+        />
+        <AnimatedBeam
+          duration={DURATION}
+          endYOffset={-60}
+          endXOffset={10}
+          curvature={10}
+          containerRef={containerRef}
+          fromRef={div2Ref}
+          toRef={div6Ref}
+          reverse={!REVERSE}
+        />
+        <AnimatedBeam
+          duration={DURATION}
+          containerRef={containerRef}
+          fromRef={div4Ref}
+          toRef={div6Ref}
+          reverse={!REVERSE}
+        />
+        <AnimatedBeam
+          duration={DURATION}
+          containerRef={containerRef}
+          fromRef={div6Ref}
+          toRef={div7Ref}
+          direction="vertical"
+          reverse={REVERSE}
+        />
+      </div>
+
+      <div className="hidden lg:block">
+        <AnimatedBeam
+          duration={DURATION}
+          containerRef={containerRef}
+          fromRef={div1Ref}
+          toRef={div6Ref}
+          reverse={REVERSE}
+        />
+        <AnimatedBeam
+          endYOffset={-30}
+          endXOffset={60}
+          duration={DURATION}
+          curvature={-140}
+          containerRef={containerRef}
+          fromRef={div2Ref}
+          toRef={div6Ref}
+          reverse={REVERSE}
+        />
+        <AnimatedBeam
+          duration={DURATION}
+          endYOffset={30}
+          curvature={140}
+          containerRef={containerRef}
+          fromRef={div3Ref}
+          toRef={div6Ref}
+          reverse={REVERSE}
+        />
+        <AnimatedBeam
+          duration={DURATION}
+          endYOffset={-30}
+          endXOffset={-60}
+          curvature={-180}
+          containerRef={containerRef}
+          fromRef={div4Ref}
+          toRef={div6Ref}
+          reverse={REVERSE}
+        />
+
+        <AnimatedBeam
+          duration={DURATION}
+          endXOffset={-60}
+          endYOffset={30}
+          curvature={180}
+          containerRef={containerRef}
+          fromRef={div5Ref}
+          toRef={div6Ref}
+          reverse={REVERSE}
+        />
+        <AnimatedBeam
+          duration={DURATION}
+          containerRef={containerRef}
+          fromRef={div6Ref}
+          toRef={div7Ref}
+          reverse={REVERSE}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* 
+  animated-beam.tsx with direction support.
+  The original code is from https://magicui.design/docs/components/animated-beam which doesn't support vertical animations. This is a modified version of the original code to support that.
+*/
+
+export interface AnimatedBeamProps {
+  className?: string;
+  containerRef: RefObject<HTMLElement | null>; // Container ref
+  fromRef: RefObject<HTMLElement | null>;
+  toRef: RefObject<HTMLElement | null>;
+  curvature?: number;
+  reverse?: boolean;
+  direction?: "horizontal" | "vertical";
+  pathColor?: string;
+  pathWidth?: number;
+  pathOpacity?: number;
+  gradientStartColor?: string;
+  gradientStopColor?: string;
+  delay?: number;
+  duration?: number;
+  startXOffset?: number;
+  startYOffset?: number;
+  endXOffset?: number;
+  endYOffset?: number;
+}
+
+const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
+  className,
+  containerRef,
+  fromRef,
+  toRef,
+  curvature = 0,
+  reverse = false, // Include the reverse prop
+  direction = "horizontal",
+  duration = Math.random() * 3 + 4,
+  delay = 0,
+  pathColor = "gray",
+  pathWidth = 2,
+  pathOpacity = 0.2,
+  gradientStartColor = "#ffaa40",
+  gradientStopColor = "#9c40ff",
+  startXOffset = 0,
+  startYOffset = 0,
+  endXOffset = 0,
+  endYOffset = 0,
+}) => {
+  const id = useId();
+  const [pathD, setPathD] = useState("");
+  const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
+
+  // Calculate the gradient coordinates based on the direction and reverse prop
+  const gradientCoordinates =
+    direction === "vertical"
+      ? reverse
+        ? {
+            x1: ["0%", "0%"],
+            x2: ["0%", "0%"],
+            y1: ["90%", "-10%"],
+            y2: ["100%", "0%"],
+          }
+        : {
+            x1: ["0%", "0%"],
+            x2: ["0%", "0%"],
+            y1: ["10%", "110%"],
+            y2: ["0%", "100%"],
+          }
+      : reverse
+        ? {
+            x1: ["90%", "-10%"],
+            x2: ["100%", "0%"],
+            y1: ["0%", "0%"],
+            y2: ["0%", "0%"],
+          }
+        : {
+            x1: ["10%", "110%"],
+            x2: ["0%", "100%"],
+            y1: ["0%", "0%"],
+            y2: ["0%", "0%"],
+          };
+
+  useEffect(() => {
+    const updatePath = () => {
+      if (containerRef.current && fromRef.current && toRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const rectA = fromRef.current.getBoundingClientRect();
+        const rectB = toRef.current.getBoundingClientRect();
+
+        const svgWidth = containerRect.width;
+        const svgHeight = containerRect.height;
+        setSvgDimensions({ width: svgWidth, height: svgHeight });
+
+        const startX =
+          rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+        const startY =
+          rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+        const endX =
+          rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+        const endY =
+          rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+
+        let d: string;
+        if (direction === "vertical") {
+          const controlX = startX - curvature;
+          d = `M ${startX},${startY} Q ${controlX},${
+            (startY + endY) / 2
+          } ${endX},${endY}`;
+        } else {
+          const controlY = startY - curvature;
+          d = `M ${startX},${startY} Q ${
+            (startX + endX) / 2
+          },${controlY} ${endX},${endY}`;
+        }
+        setPathD(d);
+      }
+    };
+
+    // Initialize ResizeObserver
+    const resizeObserver = new ResizeObserver((entries) => {
+      // For all entries, recalculate the path
+      for (const _ of entries) {
+        updatePath();
+      }
+    });
+
+    // Observe the container element
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    // Call the updatePath initially to set the initial path
+    updatePath();
+
+    // Clean up the observer on component unmount
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    containerRef,
+    fromRef,
+    toRef,
+    curvature,
+    startXOffset,
+    startYOffset,
+    endXOffset,
+    endYOffset,
+    direction,
+  ]);
+
+  return (
+    <svg
+      fill="none"
+      width={svgDimensions.width}
+      height={svgDimensions.height}
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(
+        "pointer-events-none absolute start-0 top-0 transform-gpu stroke-2",
+        className,
+      )}
+      viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
+    >
+      <path
+        d={pathD}
+        stroke={pathColor}
+        strokeWidth={pathWidth}
+        strokeOpacity={pathOpacity}
+        strokeLinecap="round"
+      />
+      <path
+        d={pathD}
+        strokeWidth={pathWidth}
+        stroke={`url(#${id})`}
+        strokeOpacity="1"
+        strokeLinecap="round"
+      />
+      <defs>
+        <motion.linearGradient
+          className="transform-gpu"
+          id={id}
+          gradientUnits="userSpaceOnUse"
+          initial={{
+            x1: "0%",
+            x2: "0%",
+            y1: "0%",
+            y2: "0%",
+          }}
+          animate={{
+            x1: gradientCoordinates.x1,
+            x2: gradientCoordinates.x2,
+            y1: gradientCoordinates.y1,
+            y2: gradientCoordinates.y2,
+          }}
+          transition={{
+            delay,
+            duration,
+            ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo
+            repeat: Infinity,
+            repeatDelay: 0,
+          }}
+        >
+          <stop stopColor={gradientStartColor} stopOpacity="0"></stop>
+          <stop stopColor={gradientStartColor}></stop>
+          <stop offset="32.5%" stopColor={gradientStopColor}></stop>
+          <stop
+            offset="100%"
+            stopColor={gradientStopColor}
+            stopOpacity="0"
+          ></stop>
+        </motion.linearGradient>
+      </defs>
+    </svg>
+  );
+};
diff --git a/blocks/feature251.tsx b/blocks/feature251.tsx
new file mode 100644
index 0000000..f0f22af
--- /dev/null
+++ b/blocks/feature251.tsx
@@ -0,0 +1,463 @@
+"use client";
+
+import { motion } from "motion/react";
+import type { RefObject } from "react";
+import React, { useRef } from "react";
+import { useEffect, useId, useState } from "react";
+
+import { Globe } from "@/components/magicui/globe";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Feature251Props {
+  className?: string;
+}
+
+const Feature251 = ({ className }: Feature251Props) => {
+  const containerRef1 = useRef<HTMLDivElement>(null);
+  const containerRef2 = useRef<HTMLDivElement>(null);
+  const div1Ref = useRef<HTMLDivElement>(null);
+  const div2Ref = useRef<HTMLDivElement>(null);
+  const div3Ref = useRef<HTMLDivElement>(null);
+  const div4Ref = useRef<HTMLDivElement>(null);
+  const div5Ref = useRef<HTMLDivElement>(null);
+  const div6Ref = useRef<HTMLDivElement>(null);
+  const div7Ref = useRef<HTMLDivElement>(null);
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-5">
+          <Card className="relative h-96 w-166 rounded-3xl border">
+            <CardHeader className="text-start">
+              <h3 className="text-xl font-semibold tracking-tight text-balance">
+                تریگر رویداد
+              </h3>
+              <p className="mt-2 text-pretty text-muted-foreground/70">
+                شرط هوشمند
+              </p>
+            </CardHeader>
+            <CardContent ref={containerRef1} className="relative ms-5">
+              <IconCard
+                ref={div1Ref as React.RefObject<HTMLDivElement>}
+                src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                imageAlt="سازنده گردش‌کار"
+                className="mb-3"
+              />
+              <IconCard
+                ref={div2Ref as React.RefObject<HTMLDivElement>}
+                src="/block-media/shadcnblocks/block/logos/figma-icon.svg"
+                imageAlt="نمای اتوماسیون فرایند"
+                className="translate-x-32 rtl:-translate-x-32"
+              />
+              <IconCard
+                ref={div3Ref as React.RefObject<HTMLDivElement>}
+                src="/block-media/shadcnblocks/block/logos/notion-icon.svg"
+                imageAlt="لاگ اجرای خودکار"
+                className="mt-3"
+              />
+              <IconCard
+                ref={div5Ref as React.RefObject<HTMLDivElement>}
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                imageAlt="سازنده گردش‌کار"
+                className="absolute end-12 top-1/2 -translate-y-1/2"
+              />
+              <div
+                ref={div4Ref as React.RefObject<HTMLDivElement>}
+                className="absolute top-1/2 left-1/2 z-99 h-4 w-4 -translate-y-1/2 rounded-full border bg-muted"
+              />
+              <AnimatedBeam
+                duration={3}
+                containerRef={containerRef1}
+                fromRef={div1Ref}
+                curvature={40}
+                toRef={div4Ref}
+              />
+              <AnimatedBeam
+                duration={3}
+                containerRef={containerRef1}
+                fromRef={div2Ref}
+                toRef={div4Ref}
+              />
+              <AnimatedBeam
+                duration={3}
+                containerRef={containerRef1}
+                fromRef={div3Ref}
+                curvature={-40}
+                toRef={div4Ref}
+              />
+              <AnimatedBeam
+                duration={3}
+                containerRef={containerRef1}
+                fromRef={div4Ref}
+                toRef={div5Ref}
+              />
+            </CardContent>
+          </Card>
+
+          <Card className="h-96 w-full rounded-3xl border md:w-83">
+            <CardHeader className="text-start">
+              <h3 className="text-xl font-semibold tracking-tight text-balance">
+                اعلان خودکار
+              </h3>
+              <p className="text-pretty text-muted-foreground/70">
+                تأیید چندمرحله‌ای
+              </p>
+            </CardHeader>
+            <CardContent
+              ref={containerRef2}
+              className="relative flex h-full flex-col items-center justify-between"
+            >
+              <IconCard
+                ref={div6Ref as React.RefObject<HTMLDivElement>}
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                imageAlt="نمای اتوماسیون فرایند"
+                className="mb-3"
+              />
+
+              <IconCard
+                ref={div7Ref as React.RefObject<HTMLDivElement>}
+                src="/block-media/shadcnblocks/block/logos/g2-icon.svg"
+                imageAlt="لاگ اجرای خودکار"
+                className="mt-3"
+              />
+
+              <AnimatedBeam
+                duration={3}
+                containerRef={containerRef2}
+                fromRef={div6Ref as React.RefObject<HTMLDivElement>}
+                direction="vertical"
+                curvature={40}
+                toRef={div7Ref as React.RefObject<HTMLDivElement>}
+              />
+            </CardContent>
+          </Card>
+
+          <Card className="relative flex h-96 w-full flex-col rounded-3xl border md:w-[330px]">
+            <CardContent>
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                className="mt-5 size-32"
+                alt="سازنده گردش‌کار"
+              />
+            </CardContent>
+            <CardHeader className="mt-auto text-start">
+              <h3 className="text-xl font-semibold tracking-tight text-balance">
+                لاگ اجرا
+              </h3>
+              <p className="text-pretty text-muted-foreground/70">
+                قالب آماده
+              </p>
+            </CardHeader>
+          </Card>
+          <Card className="relative flex h-96 w-166 flex-col overflow-hidden rounded-3xl border">
+            <CardHeader className="relative z-10 shrink-0 text-start">
+              <h3 className="text-xl font-semibold tracking-tight text-balance">
+                اتصال ابزار
+              </h3>
+              <p className="text-pretty text-muted-foreground/70">
+                سازنده گردش‌کار
+              </p>
+            </CardHeader>
+
+            <div className="relative mt-auto h-56 w-full overflow-hidden">
+              <Globe className="-top-8" />
+            </div>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature251 };
+
+const IconCard = ({
+  src,
+  imageAlt,
+  className,
+  ref,
+}: {
+  src: string;
+  imageAlt: string;
+  className?: string;
+  ref: React.RefObject<HTMLDivElement>;
+}) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative z-10 flex size-14 items-center justify-center rounded-xl bg-muted",
+        className,
+      )}
+    >
+      <img src={src} alt={imageAlt} className="size-5" />
+      <HandleIcon
+        aria-hidden
+        className="absolute -top-3 left-1/2 size-6 -translate-x-1/2"
+      />
+      <HandleIcon
+        aria-hidden
+        className="absolute -bottom-3 left-1/2 size-6 -translate-x-1/2"
+      />
+      <HandleIcon
+        aria-hidden
+        className="absolute top-1/2 -start-3 size-6 -translate-y-1/2 rotate-90"
+      />
+      <HandleIcon
+        aria-hidden
+        className="absolute top-1/2 -end-3 size-6 -translate-y-1/2 rotate-90"
+      />
+    </div>
+  );
+};
+
+const HandleIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      width="14"
+      height="5"
+      viewBox="0 0 14 5"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="0.543457"
+        y1="0.972656"
+        x2="0.543457"
+        y2="4.625"
+        stroke="black"
+        strokeOpacity="0.2"
+      />
+      <line
+        x1="4.54346"
+        y1="0.972656"
+        x2="4.54346"
+        y2="4.625"
+        stroke="black"
+        strokeOpacity="0.2"
+      />
+      <line
+        x1="8.54346"
+        y1="0.972656"
+        x2="8.54346"
+        y2="4.625"
+        stroke="black"
+        strokeOpacity="0.2"
+      />
+      <line
+        x1="12.5435"
+        y1="0.972656"
+        x2="12.5435"
+        y2="4.625"
+        stroke="black"
+        strokeOpacity="0.2"
+      />
+    </svg>
+  );
+};
+
+// Below is the modified component from Magic UI
+// Original source: https://magicui.design/docs/components/animated-beam
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+export interface AnimatedBeamProps {
+  className?: string;
+  containerRef: RefObject<HTMLElement | null>; // Container ref
+  fromRef: RefObject<HTMLElement | null>;
+  toRef: RefObject<HTMLElement | null>;
+  curvature?: number;
+  reverse?: boolean;
+  pathColor?: string;
+  pathWidth?: number;
+  pathOpacity?: number;
+  gradientStartColor?: string;
+  gradientStopColor?: string;
+  delay?: number;
+  duration?: number;
+  startXOffset?: number;
+  startYOffset?: number;
+  endXOffset?: number;
+  endYOffset?: number;
+  direction?: "horizontal" | "vertical";
+}
+
+export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
+  className,
+  containerRef,
+  fromRef,
+  toRef,
+  curvature = 0,
+  reverse = false, // Include the reverse prop
+  duration = Math.random() * 3 + 4,
+  delay = 0,
+  pathColor = "gray",
+  pathWidth = 2,
+  pathOpacity = 0.2,
+  gradientStartColor = "#ffaa40",
+  gradientStopColor = "#9c40ff",
+  startXOffset = 0,
+  startYOffset = 0,
+  endXOffset = 0,
+  endYOffset = 0,
+  direction = "horizontal",
+}) => {
+  const id = useId();
+  const [pathD, setPathD] = useState("");
+  const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
+
+  // Calculate the gradient coordinates based on the reverse prop
+  const gradientCoordinates =
+    direction === "vertical"
+      ? reverse
+        ? {
+            x1: ["0%", "0%"],
+            x2: ["0%", "0%"],
+            y1: ["90%", "-10%"],
+            y2: ["100%", "0%"],
+          }
+        : {
+            x1: ["0%", "0%"],
+            x2: ["0%", "0%"],
+            y1: ["10%", "110%"],
+            y2: ["0%", "100%"],
+          }
+      : reverse
+        ? {
+            // Horizontal (existing logic)
+            x1: ["90%", "-10%"],
+            x2: ["100%", "0%"],
+            y1: ["0%", "0%"],
+            y2: ["0%", "0%"],
+          }
+        : {
+            x1: ["10%", "110%"],
+            x2: ["0%", "100%"],
+            y1: ["0%", "0%"],
+            y2: ["0%", "0%"],
+          };
+
+  useEffect(() => {
+    const updatePath = () => {
+      if (containerRef.current && fromRef.current && toRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const rectA = fromRef.current.getBoundingClientRect();
+        const rectB = toRef.current.getBoundingClientRect();
+
+        const svgWidth = containerRect.width;
+        const svgHeight = containerRect.height;
+        setSvgDimensions({ width: svgWidth, height: svgHeight });
+
+        const startX =
+          rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+        const startY =
+          rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+        const endX =
+          rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+        const endY =
+          rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+
+        const controlY = startY - curvature;
+        const d = `M ${startX},${startY} Q ${
+          (startX + endX) / 2
+        },${controlY} ${endX},${endY}`;
+        setPathD(d);
+      }
+    };
+
+    // Initialize ResizeObserver
+    const resizeObserver = new ResizeObserver((entries) => {
+      // For all entries, recalculate the path
+      for (const _entry of entries) {
+        updatePath();
+      }
+    });
+
+    // Observe the container element
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    // Call the updatePath initially to set the initial path
+    updatePath();
+
+    // Clean up the observer on component unmount
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    containerRef,
+    fromRef,
+    toRef,
+    curvature,
+    startXOffset,
+    startYOffset,
+    endXOffset,
+    endYOffset,
+  ]);
+
+  return (
+    <svg
+      fill="none"
+      width={svgDimensions.width}
+      height={svgDimensions.height}
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(
+        "pointer-events-none absolute start-0 top-0 transform-gpu stroke-2",
+        className,
+      )}
+      viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
+    >
+      <path
+        d={pathD}
+        stroke={pathColor}
+        strokeWidth={pathWidth}
+        strokeOpacity={pathOpacity}
+        strokeLinecap="round"
+      />
+      <path
+        d={pathD}
+        strokeWidth={pathWidth}
+        stroke={`url(#${id})`}
+        strokeOpacity="1"
+        strokeLinecap="round"
+      />
+      <defs>
+        <motion.linearGradient
+          className="transform-gpu"
+          id={id}
+          gradientUnits="userSpaceOnUse"
+          initial={{
+            x1: "0%",
+            x2: "0%",
+            y1: "0%",
+            y2: "0%",
+          }}
+          animate={{
+            x1: gradientCoordinates.x1,
+            x2: gradientCoordinates.x2,
+            y1: gradientCoordinates.y1,
+            y2: gradientCoordinates.y2,
+          }}
+          transition={{
+            delay,
+            duration,
+            ease: [0.16, 1, 0.3, 1],
+            repeat: Infinity,
+            repeatDelay: 0,
+          }}
+        >
+          <stop stopColor={gradientStartColor} stopOpacity="0"></stop>
+          <stop stopColor={gradientStartColor}></stop>
+          <stop offset="32.5%" stopColor={gradientStopColor}></stop>
+          <stop
+            offset="100%"
+            stopColor={gradientStopColor}
+            stopOpacity="0"
+          ></stop>
+        </motion.linearGradient>
+      </defs>
+    </svg>
+  );
+};
diff --git a/blocks/feature252.tsx b/blocks/feature252.tsx
new file mode 100644
index 0000000..cafebc6
--- /dev/null
+++ b/blocks/feature252.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+import { Ripple } from "@/components/magicui/ripple";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature252Props {
+  className?: string;
+}
+
+const Feature252 = ({ className }: Feature252Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted py-32", className)}>
+      <div className="container">
+        <div className="relative h-92 w-full overflow-hidden rounded-4xl border bg-background p-4">
+          <svg
+            className="absolute start-0 top-0 size-full p-4"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <rect
+              opacity="0.2"
+              width="100%"
+              height="100%"
+              rx="22"
+              strokeWidth="2"
+              stroke="currentColor"
+              strokeDasharray="7 12"
+            />
+          </svg>
+          <div className="relative flex size-full items-center justify-center overflow-hidden rounded-3xl text-center">
+            <div className="flex flex-col items-center gap-4">
+              <p className="mx-auto max-w-sm text-pretty text-muted-foreground lg:text-xl">
+                گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+              </p>
+              <h1 className="text-2xll font-medium tracking-tighter text-balance lg:text-2xll">
+                داده پراکنده را به تصمیم تبدیل کنید
+              </h1>
+              <Button
+                variant="secondary"
+                className="relative z-99 mb-20 w-fit rounded-none! border px-10"
+              >
+                شروع کنید
+              </Button>
+            </div>
+
+            <Ripple mainCircleSize={550} className="absolute -bottom-220" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature252 };
diff --git a/blocks/feature253.tsx b/blocks/feature253.tsx
new file mode 100644
index 0000000..4c57544
--- /dev/null
+++ b/blocks/feature253.tsx
@@ -0,0 +1,41 @@
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { Globe } from "@/components/magicui/globe";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature253Props {
+  className?: string;
+}
+
+const Feature253 = ({ className }: Feature253Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative flex h-92 w-full flex-col justify-between overflow-hidden rounded-4xl border bg-muted p-8 md:flex-row">
+          <div className="flex h-full max-w-lg flex-col justify-center gap-4 text-start">
+            <h1 className="text-xl font-medium tracking-tighter text-balance md:text-2xll">
+              زمان حل مسئله را کوتاه کنید
+            </h1>
+            <p className="text-pretty text-muted-foreground/70">
+              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+            </p>
+            <Button
+              variant="default"
+              className="group relative z-99 w-fit rounded-full! border border-none bg-background px-10 tracking-tighter text-foreground shadow-none! hover:bg-background"
+            >
+              تیکت
+              <ArrowRight className="ms-2 -rotate-45 rounded-full bg-foreground p-px text-background transition-all ease-in-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-180" />
+            </Button>
+          </div>
+          <div className="relative size-full">
+            <Globe className="absolute top-0 md:-end-100 md:top-10 md:scale-150" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature253 };
diff --git a/blocks/feature254.tsx b/blocks/feature254.tsx
new file mode 100644
index 0000000..91a9845
--- /dev/null
+++ b/blocks/feature254.tsx
@@ -0,0 +1,148 @@
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const CIRCLE_1_IMAGES = [
+  {
+    id: "inner-1",
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    imageAlt: "دستیار هوش مصنوعی",
+  },
+  {
+    id: "inner-2",
+    src: "/block-media/shadcnblocks/block/lummi/person4.jpeg",
+    imageAlt: "پیشنهادهای هوشمند",
+  },
+  {
+    id: "inner-3",
+    src: "/block-media/shadcnblocks/block/lummi/person5.jpeg",
+    imageAlt: "تحلیل با AI",
+  },
+] as const;
+
+const CIRCLE_2_IMAGES = [
+  {
+    id: "middle-1",
+    src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    imageAlt: "دستیار هوش مصنوعی",
+  },
+  {
+    id: "middle-2",
+    src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    imageAlt: "پیشنهادهای هوشمند",
+  },
+  {
+    id: "middle-3",
+    src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    imageAlt: "تحلیل با AI",
+  },
+] as const;
+
+const CIRCLE_3_IMAGES = [
+  {
+    id: "outer-1",
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpeg",
+    imageAlt: "دستیار هوش مصنوعی",
+  },
+  {
+    id: "outer-2",
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpeg",
+    imageAlt: "پیشنهادهای هوشمند",
+  },
+  {
+    id: "outer-3",
+    src: "/block-media/shadcnblocks/block/lummi/person3.jpeg",
+    imageAlt: "تحلیل با AI",
+  },
+  {
+    id: "outer-4",
+    src: "/block-media/shadcnblocks/block/lummi/person4.jpeg",
+    imageAlt: "دستیار هوش مصنوعی",
+  },
+  {
+    id: "outer-5",
+    src: "/block-media/shadcnblocks/block/lummi/person5.jpeg",
+    imageAlt: "پیشنهادهای هوشمند",
+  },
+] as const;
+
+interface Feature254Props {
+  className?: string;
+}
+
+const Feature254 = ({ className }: Feature254Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="relative">
+        <div className="flex w-full items-center justify-center">
+          <div className="absolute z-99 flex size-full flex-col items-center justify-center gap-4">
+            <div className="pointer-events-none absolute inset-y-0 top-1/2 left-1/2 h-1/3 w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 bg-background blur-2xl" />
+            <h1 className="z-10 text-center text-2xll font-medium tracking-tighter text-balance sm:text-2xll">
+              با هوش مصنوعی سریع‌تر تصمیم بگیرید
+            </h1>
+            <p className="z-10 max-w-2xl text-center text-pretty text-muted-foreground/70">
+              مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+            </p>
+
+            <Button
+              variant="default"
+              className="group relative z-10 w-fit gap-2 rounded-full! px-10 tracking-tighter shadow-none!"
+            >
+              اتوماسیون AI
+              <ArrowRight className="-rotate-45 transition-all ease-in-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-180" />
+            </Button>
+          </div>
+          <div className="relative flex h-[620px] w-full flex-col items-center justify-center overflow-hidden">
+            <OrbitingCircles iconSize={40} radius={130} speed={2}>
+              {CIRCLE_1_IMAGES.map((item) => (
+                <div
+                  key={item.id}
+                  className="size-10 overflow-hidden rounded-full"
+                >
+                  <img
+                    src={item.src}
+                    className="size-full object-cover"
+                    alt={item.imageAlt}
+                  />
+                </div>
+              ))}
+            </OrbitingCircles>
+            <OrbitingCircles iconSize={40} radius={200} reverse speed={2}>
+              {CIRCLE_2_IMAGES.map((item) => (
+                <div
+                  key={item.id}
+                  className="size-10 overflow-hidden rounded-full"
+                >
+                  <img
+                    src={item.src}
+                    className="size-full object-cover"
+                    alt={item.imageAlt}
+                  />
+                </div>
+              ))}
+            </OrbitingCircles>
+            <OrbitingCircles iconSize={40} radius={280} speed={1}>
+              {CIRCLE_3_IMAGES.map((item) => (
+                <div
+                  key={item.id}
+                  className="size-10 overflow-hidden rounded-full"
+                >
+                  <img
+                    src={item.src}
+                    className="size-full object-cover"
+                    alt={item.imageAlt}
+                  />
+                </div>
+              ))}
+            </OrbitingCircles>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature254 };
diff --git a/blocks/feature255.tsx b/blocks/feature255.tsx
new file mode 100644
index 0000000..325c64f
--- /dev/null
+++ b/blocks/feature255.tsx
@@ -0,0 +1,109 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const CONTRIBUTORS = [
+  {
+    id: "sarah",
+    name: "کار گروهی",
+    image: "/block-media/shadcnblocks/block/avatar-1.webp",
+    imageAlt: "تقویم تیم",
+    title: "نقش و دسترسی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+  },
+  {
+    id: "marcus",
+    name: "همکاری تیمی",
+    image: "/block-media/shadcnblocks/block/avatar-2.webp",
+    imageAlt: "فضای همکاری تیمی",
+    title: "چک‌لیست تحویل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+  },
+  {
+    id: "emily",
+    name: "مدیریت پروژه",
+    image: "/block-media/shadcnblocks/block/avatar-3.webp",
+    imageAlt: "برد مدیریت پروژه",
+    title: "گزارش پیشرفت",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+  },
+  {
+    id: "david",
+    name: "هم‌راستایی",
+    image: "/block-media/shadcnblocks/block/avatar-4.webp",
+    imageAlt: "تقویم تیم",
+    title: "برد Kanban",
+    description:
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+  },
+  {
+    id: "luna",
+    name: "کار گروهی",
+    image: "/block-media/shadcnblocks/block/avatar-3.webp",
+    imageAlt: "فضای همکاری تیمی",
+    title: "تقویم تیمی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+  },
+  {
+    id: "alex",
+    name: "همکاری تیمی",
+    image: "/block-media/shadcnblocks/block/avatar-6.webp",
+    imageAlt: "برد مدیریت پروژه",
+    title: "اشتراک فایل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+  },
+] as const;
+
+interface Feature255Props {
+  className?: string;
+}
+
+const Feature255 = ({ className }: Feature255Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-4xl">
+          <div className="flex items-center justify-between gap-4">
+            <p className="text-lg font-medium">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
+            <Button variant="outline">مشاهده همه</Button>
+          </div>
+          <div className="mt-7">
+            <div className="flex flex-col gap-10">
+              {CONTRIBUTORS.map((contributor) => (
+                <div key={contributor.id}>
+                  <div className="flex gap-3 text-start md:gap-4">
+                    <img
+                      src={contributor.image}
+                      alt={contributor.imageAlt}
+                      className="size-10 shrink-0 rounded-lg border border-border md:size-12"
+                    />
+                    <div>
+                      <p className="flex flex-col font-medium md:flex-row md:items-center md:gap-1 md:text-lg">
+                        {contributor.name}
+                        <span className="text-sm whitespace-nowrap text-muted-foreground md:text-base md:font-normal">
+                          {contributor.title}
+                        </span>
+                      </p>
+                      <p className="hidden text-pretty text-muted-foreground md:block">
+                        {contributor.description}
+                      </p>
+                    </div>
+                  </div>
+                  <p className="mt-2 text-sm text-pretty text-muted-foreground md:hidden md:text-base">
+                    {contributor.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature255 };
diff --git a/blocks/feature256.tsx b/blocks/feature256.tsx
new file mode 100644
index 0000000..671ee5c
--- /dev/null
+++ b/blocks/feature256.tsx
@@ -0,0 +1,132 @@
+import { CardSpotlight } from "@/components/aceternity/card-spotlight";
+import { cn } from "@/lib/utils";
+
+const TOOLS = [
+  {
+    id: "shadcn-ui",
+    name: "فروش آنلاین",
+    image:
+      "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
+    className: "h-20",
+  },
+  {
+    id: "tailwind",
+    name: "فروشگاه",
+    image:
+      "/block-media/shadcnblocks/block/logos/tailwind-icon-black.svg",
+    className: "h-14",
+  },
+  {
+    id: "v0",
+    name: "V0",
+    image: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
+    className: "h-20",
+  },
+  {
+    id: "react",
+    name: "React",
+    image:
+      "/block-media/shadcnblocks/block/logos/react-icon-black.svg",
+    className: "h-20",
+  },
+  {
+    id: "astro",
+    name: "Astro",
+    image: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+    className: "h-20",
+  },
+  {
+    id: "nextjs",
+    name: "Next.js",
+    image:
+      "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+    className: "h-19",
+  },
+] as const;
+
+const GUIDES = [
+  {
+    id: "platform",
+    name: "تبدیل خرید",
+    title: "موجودی انبار",
+  },
+  {
+    id: "ui-framework",
+    name: "مدیریت سفارش",
+    title: "بازگشت مشتری",
+  },
+  {
+    id: "icons",
+    name: "فروش آنلاین",
+    title: "صفحه فرود",
+  },
+  {
+    id: "tooling",
+    name: "فروشگاه",
+    title: "گزارش فروش",
+  },
+] as const;
+
+interface Feature256Props {
+  className?: string;
+}
+
+const Feature256 = ({ className }: Feature256Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 sm:py-20 md:py-32", className)}
+    >
+      <div className="container flex flex-col gap-16 sm:gap-20 md:gap-24">
+        <section>
+          <div className="flex flex-col items-start gap-8 text-start md:justify-between lg:flex-row">
+            <h2 className="text-3xl font-light tracking-wide text-balance sm:text-xl md:text-2xll lg:w-1/3">
+              فروش آنلاین را مقیاس‌پذیر کنید
+            </h2>
+            <div className="grid w-full grid-cols-2 gap-4 lg:w-2/3 lg:grid-cols-3">
+              {TOOLS.map((logo) => (
+                <CardSpotlight
+                  key={logo.id}
+                  className="group flex h-40 w-full items-center justify-center rounded-md border-muted bg-accent transition-all duration-300 hover:border-white/20 hover:bg-black sm:h-44 md:h-48"
+                >
+                  <img
+                    src={logo.image}
+                    alt={`لوگوی ${logo.name}`}
+                    className={cn(
+                      "object-contain transition-all duration-300 group-hover:brightness-0 group-hover:invert",
+                      logo.className,
+                    )}
+                  />
+                </CardSpotlight>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className="flex flex-col gap-8 text-start md:items-start md:justify-between lg:flex-row">
+          <h2 className="text-3xl font-light tracking-wide text-balance sm:text-xl md:text-2xll lg:w-1/3">
+            تجربه خرید را روان‌تر بسازید
+          </h2>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:w-2/3">
+            {GUIDES.map((item) => (
+              <CardSpotlight
+                className="group flex h-52 flex-col justify-between rounded-md border-muted bg-accent p-6 text-start transition-all duration-300 hover:border-white/20 hover:bg-black sm:h-64"
+                key={item.id}
+              >
+                <div className="w-fit rounded-2xl border border-border px-4 py-2 text-center text-sm transition-all duration-300 group-hover:border-white/30 group-hover:text-white">
+                  {item.name}
+                </div>
+                <div className="text-xl font-medium text-balance transition-all duration-300 group-hover:text-white sm:text-xl">
+                  {item.title}
+                </div>
+              </CardSpotlight>
+            ))}
+          </div>
+        </section>
+      </div>
+    </section>
+  );
+};
+
+export { Feature256 };
diff --git a/blocks/feature257.tsx b/blocks/feature257.tsx
new file mode 100644
index 0000000..ab593ed
--- /dev/null
+++ b/blocks/feature257.tsx
@@ -0,0 +1,110 @@
+import { CardSpotlight } from "@/components/aceternity/card-spotlight";
+import { cn } from "@/lib/utils";
+
+interface ToolItem {
+  id: string;
+  category: string;
+  name: string;
+  logo: string;
+  imageAlt: string;
+}
+
+const TOOLS: ToolItem[] = [
+  {
+    id: "astro",
+    category: "ترافیک ارگانیک",
+    name: "Astro",
+    logo: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+    imageAlt: "داشبورد SEO",
+  },
+  {
+    id: "gatsby",
+    category: "رتبه‌بندی",
+    name: "Gatsby",
+    logo: "/block-media/shadcnblocks/block/logos/gatsby-icon-black.svg",
+    imageAlt: "تحلیل کلمات کلیدی",
+  },
+  {
+    id: "github",
+    category: "محتوای SEO",
+    name: "GitHub",
+    logo: "/block-media/shadcnblocks/block/logos/github-icon-black.svg",
+    imageAlt: "گزارش رتبه جستجو",
+  },
+  {
+    id: "nextjs",
+    category: "بهینه‌سازی جستجو",
+    name: "Next.js",
+    logo: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+    imageAlt: "داشبورد SEO",
+  },
+  {
+    id: "figma",
+    category: "ترافیک ارگانیک",
+    name: "Figma",
+    logo: "/block-media/shadcnblocks/block/logos/figma.svg",
+    imageAlt: "تحلیل کلمات کلیدی",
+  },
+  {
+    id: "remix",
+    category: "رتبه‌بندی",
+    name: "Remix",
+    logo: "/block-media/shadcnblocks/block/logos/remix-icon-black.svg",
+    imageAlt: "گزارش رتبه جستجو",
+  },
+  {
+    id: "vercel",
+    category: "محتوای SEO",
+    name: "Vercel",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+    imageAlt: "داشبورد SEO",
+  },
+  {
+    id: "tailwind",
+    category: "رتبه کلمات کلیدی را پیگیری کنید",
+    name: "بهینه‌سازی جستجو",
+    logo: "/block-media/shadcnblocks/block/logos/tailwind-icon-black.svg",
+    imageAlt: "تحلیل کلمات کلیدی",
+  },
+];
+
+interface Feature257Props {
+  className?: string;
+}
+
+const ToolCard = ({ tool }: { tool: ToolItem }) => (
+  <CardSpotlight className="group flex h-96 flex-col items-start justify-between rounded-md border border-border bg-background p-2 text-start transition-all duration-300 hover:bg-black hover:text-white md:p-4">
+    <div className="z-10 rounded-md border border-border px-2 py-1 text-xs font-medium transition-colors duration-300 group-hover:border-white md:px-4 md:py-2 md:text-sm">
+      {tool.category}
+    </div>
+    <img
+      src={tool.logo}
+      alt={tool.imageAlt}
+      className="mx-auto mb-4 h-24 object-contain [filter:brightness(0)] transition-all duration-300 group-hover:[filter:brightness(1)_invert(1)] dark:invert"
+    />
+    <h2 className="z-10 text-xl font-normal transition-colors duration-300 lg:text-3xl">
+      {tool.name}
+    </h2>
+  </CardSpotlight>
+);
+
+const Feature257 = ({ className }: Feature257Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted py-16 sm:py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          {TOOLS.slice(0, 2).map((tool) => (
+            <ToolCard key={tool.id} tool={tool} />
+          ))}
+        </div>
+        <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {TOOLS.slice(2, 9).map((tool) => (
+            <ToolCard key={tool.id} tool={tool} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature257 };
diff --git a/blocks/feature26.tsx b/blocks/feature26.tsx
new file mode 100644
index 0000000..2d49dd3
--- /dev/null
+++ b/blocks/feature26.tsx
@@ -0,0 +1,88 @@
+import {
+  Code,
+  Infinity as InfinityIcon,
+  Lock,
+  MessageCircle,
+  Text,
+  Upload,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "همکاری فروش و بازاریابی",
+    description:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+    icon: <Lock className="size-5" />,
+  },
+  {
+    title: "اولویت‌بندی سرنخ",
+    description:
+      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+    icon: <MessageCircle className="size-5" />,
+  },
+  {
+    title: "قالب پیشنهاد فروش",
+    description:
+      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+    icon: <InfinityIcon className="size-5" />,
+  },
+  {
+    title: "ردیابی کووت",
+    description:
+      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+    icon: <Text className="size-5" />,
+  },
+  {
+    title: "تحلیل باخت معامله",
+    description:
+      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+    icon: <Code className="size-5" />,
+  },
+  {
+    title: "هدف‌گذاری تیمی",
+    description:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+    icon: <Upload className="size-5" />,
+  },
+];
+
+interface Feature26Props {
+  className?: string;
+}
+
+const Feature26 = ({ className }: Feature26Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Badge className="mb-6" variant="outline">
+          تیم فروش
+        </Badge>
+        <h2 className="text-3xl font-medium">
+          پیش‌بینی درآمد را دقیق‌تر کنید
+        </h2>
+        <Separator className="my-16" />
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature, idx) => (
+            <div key={idx} className="flex gap-3">
+              <span className="flex size-11 shrink-0 items-center justify-center rounded-full bg-accent">
+                {feature.icon}
+              </span>
+              <div>
+                <h3 className="text-lg font-medium">{feature.title}</h3>
+                <p className="leading-7 text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature26 };
diff --git a/blocks/feature261.tsx b/blocks/feature261.tsx
new file mode 100644
index 0000000..a5a29ad
--- /dev/null
+++ b/blocks/feature261.tsx
@@ -0,0 +1,160 @@
+import { Clock, Zap } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const AVATAR_IDS = ["1", "2", "3", "4", "5"] as const;
+
+interface Feature261Props {
+  className?: string;
+}
+
+const Feature261 = ({ className }: Feature261Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12">
+          <div className="relative h-60 overflow-hidden rounded-3xl md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
+            <img
+              src="/block-media/shadcnblocks/block/photos/Minimalist Concrete Wall with Shadows.jpeg"
+              alt="گزارش مالی یکپارچه"
+              className="absolute inset-0 size-full object-cover"
+            />
+            <div className="absolute inset-0" />
+            <div className="absolute start-6 bottom-6 z-10 text-white">
+              <p className="text-lg font-medium text-balance">
+                گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+              </p>
+            </div>
+            <div className="absolute end-6 top-6 z-10">
+              <div className="flex size-10 items-center justify-center rounded-full bg-white/20">
+                <Zap className="size-5 text-white" />
+              </div>
+            </div>
+          </div>
+
+          <div className="relative h-60 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="داشبورد ERP"
+              className="absolute inset-0 size-full object-cover"
+            />
+            <div className="absolute start-6 end-6 bottom-6 z-10 text-start">
+              <h2 className="text-sm leading-tight font-medium text-balance md:text-base lg:text-xl">
+                عملیات سازمان را یکپارچه کنید
+              </h2>
+            </div>
+          </div>
+
+          <Card className="col-span-1 rounded-3xl md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
+            <CardContent className="flex h-full flex-col justify-center p-4 text-start md:p-6">
+              <div className="mb-2 text-xl font-bold md:text-xl lg:text-2xll">
+                ۹۵
+                <span className="align-top text-xl md:text-xl lg:text-3xl">
+                  ٪
+                </span>
+              </div>
+              <p className="text-sm leading-tight text-pretty md:text-sm">
+                مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.
+                <br />
+                گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند و خطا را قبل از ثبت نهایی کاهش می‌دهد.
+              </p>
+            </CardContent>
+          </Card>
+
+          <div className="relative col-span-1 h-60 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="مدیریت عملیات"
+              className="absolute inset-0 size-full object-cover"
+            />
+          </div>
+
+          <Card className="col-span-1 rounded-3xl bg-muted md:col-span-4 md:row-span-1 md:h-[300px] lg:col-span-4">
+            <CardContent className="h-full p-4 text-start md:p-5">
+              <div className="flex h-full flex-col justify-end">
+                <div className="space-y-2">
+                  <div className="text-xl font-normal md:text-2xll lg:text-2xll">
+                    یکپارچگی
+                  </div>
+                  <div className="text-muted-foreground">
+                    گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+                  </div>
+                  <Button>مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.</Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="col-span-1 rounded-3xl md:col-span-2 md:row-span-1 md:h-[300px] lg:col-span-3">
+            <CardContent className="flex h-full flex-col justify-center p-4 text-start md:p-5">
+              <div className="mb-3">
+                <span className="text-xl font-bold md:text-3xl lg:text-2xll">
+                  ERP
+                </span>
+                <span className="align-top text-xl font-bold md:text-xl lg:text-3xl">
+                  +
+                </span>
+              </div>
+              <p className="mb-4 text-sm md:text-sm">ERP</p>
+              <div className="flex -space-x-2 rtl:space-x-reverse">
+                {AVATAR_IDS.map((id) => (
+                  <Avatar
+                    key={id}
+                    className="size-8 border-2 border-border md:size-8 lg:size-10"
+                  >
+                    <AvatarImage
+                      src={`/block-media/shadcnblocks/block/avatar-${id}.webp`}
+                      alt={`نمای عضو تیم ${id}`}
+                    />
+                    <AvatarFallback>ت{id}</AvatarFallback>
+                  </Avatar>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="relative col-span-1 h-60 overflow-hidden rounded-3xl md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-5">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-3.svg"
+              alt="گزارش مالی یکپارچه"
+              className="absolute inset-0 size-full object-cover"
+            />
+          </Card>
+
+          <Card className="relative col-span-1 h-60 overflow-hidden rounded-3xl md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-4">
+            <img
+              src="/block-media/shadcnblocks/block/photos/Geometric Staircase and Concrete Wall.jpeg"
+              alt="داشبورد ERP"
+              className="absolute inset-0 size-full object-cover"
+            />
+            <div className="absolute inset-0 bg-linear-to-r from-black/60 via-black/30 to-transparent rtl:bg-linear-to-l" />
+            <div className="absolute inset-0 z-10 flex items-center justify-start p-4 md:p-6">
+              <div className="text-start text-white">
+                <div className="mb-2 flex items-center gap-2 md:gap-3">
+                  <div className="flex size-6 items-center justify-center rounded-full bg-white/20 md:size-7">
+                    <Clock className="size-3 md:size-4" />
+                  </div>
+                  <span className="text-base font-semibold md:text-lg">
+                    ERP
+                  </span>
+                </div>
+                <p className="text-sm text-pretty opacity-90 md:text-sm">
+                  گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند و خطا را قبل از ثبت نهایی کاهش می‌دهد.
+                  <br />
+                  <span className="text-sm font-semibold md:text-sm">
+                    از خرید تا فروش در یک سیستم
+                  </span>
+                </p>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature261 };
diff --git a/blocks/feature266.tsx b/blocks/feature266.tsx
new file mode 100644
index 0000000..204b915
--- /dev/null
+++ b/blocks/feature266.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import type { Variants } from "framer-motion";
+import { motion } from "framer-motion";
+
+import { Card } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const SERVICES = [
+  {
+    id: "01",
+    number: "۱",
+    title: "گزارش‌ساز",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    imageAlt: "گزارش‌ساز",
+  },
+  {
+    id: "02",
+    number: "۲",
+    title: "Pivot تعاملی",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    imageAlt: "تحلیل داده سازمان",
+  },
+  {
+    id: "03",
+    number: "۰۳",
+    title: "داشبورد مدیریتی",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    image: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
+    imageAlt: "داشبورد هوش تجاری",
+  },
+  {
+    id: "04",
+    number: "۰۴",
+    title: "اتصال منبع",
+    description:
+      "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+    image: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    imageAlt: "گزارش‌ساز",
+  },
+  {
+    id: "05",
+    number: "۰۵",
+    title: "سطح دسترسی",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    imageAlt: "تحلیل داده سازمان",
+  },
+  {
+    id: "06",
+    number: "۰۶",
+    title: "تحلیل پیش‌بین",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/lummi/person5.jpeg",
+    imageAlt: "داشبورد هوش تجاری",
+  },
+] as const;
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 },
+  },
+};
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
+};
+
+interface Feature266Props {
+  className?: string;
+}
+
+const Feature266 = ({ className }: Feature266Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <motion.div
+          className="mb-16 text-center"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        >
+          <p className="mb-4 text-sm tracking-widest text-muted-foreground">
+            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+          </p>
+          <h1 className="text-xl font-light tracking-wide text-balance md:text-2xll">
+            تصمیم استراتژیک را داده‌محور کنید
+            <br />
+            هر تیم داشبورد خودش را داشته باشد
+          </h1>
+        </motion.div>
+
+        <motion.div
+          className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {SERVICES.map((service) => (
+            <motion.div
+              key={service.id}
+              variants={cardVariants}
+              className="group cursor-pointer"
+            >
+              <Card className="border-border/20 bg-card/5 p-8 backdrop-blur-sm transition-colors duration-300 hover:bg-card/10">
+                <p className="mb-8 text-xs tracking-widest text-muted-foreground">
+                  {service.number}
+                </p>
+
+                <div className="relative mb-8 flex h-40 items-center justify-center">
+                  <TooltipProvider delayDuration={0}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className="h-32 w-24 overflow-hidden rounded-lg border border-border/30 bg-linear-to-br from-primary/30 to-secondary/30 shadow-lg">
+                          <img
+                            src={service.image}
+                            alt={service.imageAlt}
+                            className="size-full object-cover"
+                          />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent side="top" align="center" className="p-2">
+                        <img
+                          src={service.image}
+                          alt={`${service.imageAlt}  بزرگ`}
+                          className="h-60 w-40 rounded-md object-cover"
+                        />
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+
+                <h3 className="mb-2 text-center text-lg font-light tracking-wide text-balance transition-colors duration-300 group-hover:text-primary">
+                  {service.title}
+                </h3>
+                <p className="text-center text-sm text-pretty text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80">
+                  {service.description}
+                </p>
+              </Card>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature266 };
diff --git a/blocks/feature267.tsx b/blocks/feature267.tsx
new file mode 100644
index 0000000..61a2019
--- /dev/null
+++ b/blocks/feature267.tsx
@@ -0,0 +1,73 @@
+import { Sparkles } from "lucide-react";
+import React from "react";
+
+import { ThreeDMarquee } from "@/components/aceternity/3d-marquee";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const MARQUEE_IMAGES = [
+  ...Array.from(
+    { length: 27 },
+    (_, i) =>
+      `/block-media/shadcnblocks/block/guri3/img${i + 1}.jpeg`,
+  ),
+  ...Array.from(
+    { length: 9 },
+    (_, i) =>
+      `/block-media/shadcnblocks/block/guri3/img${i + 1}.jpeg`,
+  ),
+];
+
+interface Feature267Props {
+  className?: string;
+}
+
+const Feature267 = ({ className }: Feature267Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative h-full w-screen overflow-hidden py-32",
+        className,
+      )}
+    >
+      <div className="container grid grid-cols-1 items-center gap-5 lg:grid-cols-2">
+        <div className="flex h-full flex-col justify-center text-start">
+          <div className="flex items-center gap-2">
+            <Sparkles className="size-5 fill-foreground" />
+            <p className="w-fit rounded-full py-1 font-medium tracking-tight">
+              تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+            </p>
+          </div>
+          <h1 className="mt-3 mb-8 max-w-xl text-2xll font-semibold tracking-tighter text-balance lg:max-w-3xl lg:text-2xll">
+            فروش تیم‌تان را یکجا مدیریت کنید
+          </h1>
+          <p className="max-w-xl text-pretty text-muted-foreground">
+            از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.
+          </p>
+          <div className="mt-10 gap-4">
+            <div className="flex h-15 w-full max-w-md items-center rounded-full border p-1">
+              <Input
+                type="email"
+                dir="rtl"
+                className="w-full rounded-full border-none text-start shadow-none ring-0 focus-visible:ring-0 focus-visible:outline-none active:ring-0 active:outline-0"
+                placeholder="هر سرنخ را تا قرارداد دنبال کنید"
+              />
+              <Button className="h-full shrink-0 rounded-full">
+                روابط مشتری را در یک نگاه ببینید
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="items-center justify-center">
+          <ThreeDMarquee className="rounded-none" images={MARQUEE_IMAGES} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature267 };
diff --git a/blocks/feature268.tsx b/blocks/feature268.tsx
new file mode 100644
index 0000000..c5d1638
--- /dev/null
+++ b/blocks/feature268.tsx
@@ -0,0 +1,137 @@
+import { ArrowRight, Check } from "lucide-react";
+import React from "react";
+
+import {
+  CardBody,
+  CardContainer,
+  CardItem,
+} from "@/components/aceternity/3d-card";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "instant",
+    title: "همکاری فروش و بازاریابی",
+    description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+  },
+  {
+    id: "one-time",
+    title: "اولویت‌بندی سرنخ",
+    description: "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+  },
+  {
+    id: "developer",
+    title: "قالب پیشنهاد فروش",
+    description:
+      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+  },
+  {
+    id: "responsive",
+    title: "ردیابی کووت",
+    description:
+      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+  },
+  {
+    id: "production",
+    title: "تحلیل باخت معامله",
+    description:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+  },
+] as const;
+
+interface Feature268Props {
+  className?: string;
+}
+
+const Feature268 = ({ className }: Feature268Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-full w-screen overflow-hidden py-32", className)}
+    >
+      <div className="relative container flex h-full flex-col items-start justify-between gap-10 lg:flex-row">
+        <div className="w-full space-y-5 text-start lg:w-3/5">
+          <h1 className="mt-3 w-full max-w-2xl text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
+            پیش‌بینی درآمد را دقیق‌تر کنید
+          </h1>
+          <p className="max-w-xl text-pretty text-muted-foreground">
+            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+          </p>
+          <div className="mt-10 mb-29 flex gap-2">
+            <Button className="rounded-full">شروع کنید</Button>
+            <Button variant="secondary" className="rounded-full">
+              بیشتر بدانید
+            </Button>
+          </div>
+          <ul className="space-y-4">
+            <li className="mb-3">
+              <p className="font-semibold tracking-tight opacity-50">
+                چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
+              </p>
+            </li>
+            {FEATURES.map((feature) => (
+              <li key={feature.id} className="flex gap-4 lg:items-center">
+                <Check className="size-4 shrink-0" />
+                <p className="font-medium tracking-tight text-pretty">
+                  {feature.title}
+                  <span className="ps-2 opacity-30">{feature.description}</span>
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <CardContainer
+          className="w-full"
+          containerClassName="h-full w-full p-0 m-0 lg:w-2/5"
+        >
+          <CardBody className="group/card flex h-full w-full! flex-col items-center justify-center rounded-3xl bg-muted/70 px-5 py-15">
+            <CardItem
+              translateZ="60"
+              className="mb-2 max-w-xs text-center text-3xl leading-none font-semibold tracking-tight text-balance"
+            >
+              هر فرصت فروش را از دست ندهید
+            </CardItem>
+            <CardItem
+              as="p"
+              translateZ="25"
+              className="my-4 flex w-full max-w-sm items-center justify-center text-sm tracking-tight"
+            >
+              <span className="ms-2 opacity-50">تیم فروش</span>
+              <span className="font-semibold">بستن معامله</span>
+            </CardItem>
+            <CardItem translateZ="60" className="mt-4 w-full max-w-[1000px]">
+              <img
+                src="/block-media/shadcnblocks/block/guri3/img27.jpeg"
+                height="1000"
+                width="1000"
+                className="h-82 w-full rounded-3xl object-cover group-hover/card:shadow-xl lg:h-60"
+                alt="صف اولویت سرنخ‌ها"
+              />
+            </CardItem>
+
+            <div className="flex w-full flex-col items-center justify-center">
+              <CardItem translateZ="100">
+                <Button
+                  variant="ghost"
+                  className="my-5 gap-2 tracking-tight opacity-50"
+                >
+                  رشد درآمد
+                  <ArrowRight className="size-4 rtl:rotate-180" />
+                </Button>
+              </CardItem>
+              <img
+                className="w-30"
+                src="/images/block/logos/ph-daily.svg"
+                alt="داشبورد عملکرد فروش"
+              />
+            </div>
+          </CardBody>
+        </CardContainer>
+      </div>
+    </section>
+  );
+};
+
+export { Feature268 };
diff --git a/blocks/feature269.tsx b/blocks/feature269.tsx
new file mode 100644
index 0000000..8cf9915
--- /dev/null
+++ b/blocks/feature269.tsx
@@ -0,0 +1,93 @@
+import { BadgeCheck } from "lucide-react";
+import React from "react";
+
+import {
+  CardBody,
+  CardContainer,
+  CardItem,
+} from "@/components/aceternity/3d-card";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  { id: "instant", label: "کمپین" },
+  { id: "one-time", label: "رشد برند" },
+  { id: "developer", label: "بازاریابی دیجیتال" },
+  { id: "responsive", label: "جذب مخاطب" },
+  { id: "production", label: "کمپین" },
+  { id: "support", label: "رشد برند" },
+  { id: "updates", label: "بازاریابی دیجیتال" },
+  { id: "customizable", label: "جذب مخاطب" },
+  { id: "performance", label: "کمپین" },
+  { id: "accessibility", label: "رشد برند" },
+  { id: "cross-browser", label: "بازاریابی دیجیتال" },
+  { id: "docs", label: "جذب مخاطب" },
+] as const;
+
+interface Feature269Props {
+  className?: string;
+}
+
+const Feature269 = ({ className }: Feature269Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-full w-screen overflow-hidden py-32", className)}
+    >
+      <div className="relative container flex h-full flex-col items-start justify-between gap-10 lg:flex-row">
+        <div className="w-full space-y-5 text-start lg:w-3/5">
+          <h1 className="mx-auto mb-15 w-full max-w-lg text-center text-2xll font-semibold tracking-tighter text-balance lg:mx-0 lg:text-start lg:text-2xll">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </h1>
+          <div className="mb-18 flex items-center gap-4 px-5 lg:max-w-md">
+            <span className="h-px w-full bg-muted-foreground/20" />
+            <p className="text-sm text-muted-foreground/50">با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.</p>
+            <span className="h-px w-full bg-muted-foreground/20" />
+          </div>
+          <ul className="grid grid-cols-2 gap-3 lg:max-w-md">
+            {FEATURES.map((feature) => (
+              <li key={feature.id} className="flex gap-2 lg:items-center">
+                <BadgeCheck className="size-4 shrink-0 text-muted-foreground/80" />
+                <p className="tracking-tight text-pretty text-muted-foreground/80">
+                  {feature.label}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <CardContainer
+          className="w-full"
+          containerClassName="h-full w-full p-0 m-0 lg:w-2/5"
+        >
+          <CardBody className="group/card flex h-full w-full! flex-col items-center justify-center rounded-3xl bg-muted/70 p-5">
+            <CardItem
+              translateZ="60"
+              className="mt-10 mb-2 max-w-xs text-center text-3xl leading-none font-semibold tracking-tighter text-balance"
+            >
+              ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.
+            </CardItem>
+            <CardItem
+              as="p"
+              translateZ="25"
+              className="my-4 flex w-full max-w-sm items-center justify-center text-sm tracking-tight"
+            >
+              <span className="ms-2 opacity-50">کمپین</span>
+              <span className="font-semibold">رشد برند</span>
+            </CardItem>
+            <CardItem translateZ="60" className="mt-4 w-full max-w-[1000px]">
+              <img
+                src="/block-media/shadcnblocks/block/guri3/img7.jpeg"
+                height="1000"
+                width="1000"
+                className="h-70 w-full rounded-3xl object-cover group-hover/card:shadow-xl"
+                alt="تحلیل عملکرد کمپین"
+              />
+            </CardItem>
+          </CardBody>
+        </CardContainer>
+      </div>
+    </section>
+  );
+};
+
+export { Feature269 };
diff --git a/blocks/feature27.tsx b/blocks/feature27.tsx
new file mode 100644
index 0000000..d25f082
--- /dev/null
+++ b/blocks/feature27.tsx
@@ -0,0 +1,67 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Feature27Props {
+  className?: string;
+}
+
+const Feature27 = ({ className }: Feature27Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
+          <Badge variant="outline">کمپین</Badge>
+          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-xl">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </h2>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+          </p>
+        </div>
+        <div className="mt-20 grid gap-10 md:grid-cols-2">
+          <div>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تحلیل عملکرد کمپین"
+              className="rounded-lg border"
+            />
+            <div className="px-4 pt-10">
+              <h3 className="font-medium">ردیابی UTM</h3>
+              <p className="text-muted-foreground">
+                گزارش ROI
+              </p>
+            </div>
+          </div>
+          <div>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="نمودار ROI"
+              className="rounded-lg border"
+            />
+            <div className="px-4 pt-10">
+              <h3 className="font-medium">مدیریت کمپین</h3>
+              <p className="text-muted-foreground">
+                سگمنت‌بندی مخاطب
+              </p>
+            </div>
+          </div>
+          <div className="md:col-span-2">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-3.svg"
+              alt="داشبورد بازاریابی دیجیتال"
+              className="aspect-video max-h-[480px] w-full rounded-lg border bg-muted"
+            />
+            <div className="px-4 pt-10">
+              <h3 className="font-medium">تحلیل کانال</h3>
+              <p className="text-muted-foreground">
+                اتوماسیون ایمیل
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature27 };
diff --git a/blocks/feature270.tsx b/blocks/feature270.tsx
new file mode 100644
index 0000000..bb324e5
--- /dev/null
+++ b/blocks/feature270.tsx
@@ -0,0 +1,258 @@
+"use client";
+import { motion } from "motion/react";
+import React, { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "instant",
+    number: "۱",
+    title: "لاگ اجرا",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    image: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    imageAlt: "سازنده گردش‌کار",
+    imageOrder: "order-1",
+    contentOrder: "order-2",
+  },
+  {
+    id: "one-time",
+    number: "۲",
+    title: "قالب آماده",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    image: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+    imageAlt: "نمای اتوماسیون فرایند",
+    imageOrder: "order-2",
+    contentOrder: "order-1",
+  },
+  {
+    id: "developer",
+    number: "۰۳",
+    title: "اتصال ابزار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    image: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
+    imageAlt: "لاگ اجرای خودکار",
+    imageOrder: "order-1",
+    contentOrder: "order-2",
+  },
+] as const;
+
+const Feature270 = () => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className="h-full w-screen overflow-hidden py-32"
+    >
+      <div className="relative container">
+        <div className="w-full space-y-5 text-start lg:w-3/5">
+          <h1 className="mb-6 w-full max-w-lg text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
+            فرایندها را استاندارد و سریع کنید
+          </h1>
+          <p className="max-w-2xl text-pretty opacity-50 md:mb-20">
+            قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+          </p>
+        </div>
+        <div className="relative grid h-[95rem] items-center justify-between gap-3 md:h-[68rem] md:grid-cols-2 lg:h-[32rem] lg:grid-cols-3">
+          {FEATURES.map((feature) => (
+            <PinContainer
+              key={feature.id}
+              title="بیشتر بدانید"
+              href="https://www.ShadcnBlocks/blocks"
+              className="w-full rounded-3xl bg-muted/70! p-4"
+            >
+              <div className="flex flex-col text-start">
+                <div className={feature.imageOrder}>
+                  <img
+                    src={feature.image}
+                    height="1000"
+                    width="1000"
+                    className="h-70 w-full rounded-3xl object-cover group-hover/card:shadow-xl"
+                    alt={feature.imageAlt}
+                  />
+                </div>
+                <div className={cn("mt-4 w-full p-3", feature.contentOrder)}>
+                  <p className="leading-none tracking-tighter opacity-50">
+                    {feature.number}
+                  </p>
+                  <h2 className="my-3 text-3xl leading-none font-semibold tracking-tighter text-balance">
+                    {feature.title}
+                  </h2>
+                  <p className="text-pretty leading-5 opacity-50">
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            </PinContainer>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature270 };
+
+// Below is the modified component from Aceternity UI
+// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/3d-pin.json
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+export const PinContainer = ({
+  children,
+  title,
+  href,
+  className,
+  containerClassName,
+}: {
+  children: React.ReactNode;
+  title?: string;
+  href?: string;
+  className?: string;
+  containerClassName?: string;
+}) => {
+  const [transform, setTransform] = useState(
+    "translate(-50%,-50%) rotateX(0deg)",
+  );
+
+  const onMouseEnter = () => {
+    setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)");
+  };
+  const onMouseLeave = () => {
+    setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)");
+  };
+
+  return (
+    <a
+      className={cn(
+        "group/pin relative z-50 cursor-pointer",
+        containerClassName,
+      )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      href={href || "/"}
+    >
+      <div
+        style={{
+          perspective: "1000px",
+          transform: "rotateX(70deg) translateZ(0deg)",
+        }}
+        className="absolute top-1/2 left-1/2 mt-4 ml-[0.09375rem] w-full -translate-x-1/2 -translate-y-1/2"
+      >
+        <div
+          style={{
+            transform: transform,
+          }}
+          className="absolute top-1/2 left-1/2 flex w-full items-start justify-start overflow-hidden rounded-2xl transition duration-700"
+        >
+          <div className={cn("relative z-50", className)}>{children}</div>
+        </div>
+      </div>
+      <PinPerspective title={title} />
+    </a>
+  );
+};
+
+export const PinPerspective = ({
+  title,
+}: {
+  title?: string;
+  href?: string;
+}) => {
+  return (
+    <motion.div className="pointer-events-none z-[60] flex h-80 w-96 items-center justify-center opacity-0 transition duration-500 group-hover/pin:opacity-100">
+      <div className="inset-0 -mt-7 h-full w-full flex-none">
+        <div className="absolute inset-x-0 top-0 flex justify-center">
+          <span className="relative z-10 flex items-center gap-2 rounded-full bg-zinc-950 px-4 py-0.5 ring-1 ring-white/10">
+            <span className="relative z-20 inline-block py-0.5 text-xs font-bold text-white">
+              {title}
+            </span>
+
+            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>
+          </span>
+        </div>
+
+        <div
+          style={{
+            perspective: "1000px",
+            transform: "rotateX(70deg) translateZ(0)",
+          }}
+          className="absolute top-1/2 left-1/2 mt-4 ml-[0.09375rem] -translate-x-1/2 -translate-y-1/2"
+        >
+          <>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 0,
+              }}
+              className="absolute top-1/2 left-1/2 h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 2,
+              }}
+              className="absolute top-1/2 left-1/2 h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 4,
+              }}
+              className="absolute top-1/2 left-1/2 h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+          </>
+        </div>
+
+        <>
+          <motion.div className="absolute right-1/2 bottom-1/2 h-20 w-px translate-y-[14px] bg-gradient-to-b from-transparent to-cyan-500 blur-[2px] group-hover/pin:h-40" />
+          <motion.div className="absolute right-1/2 bottom-1/2 h-20 w-px translate-y-[14px] bg-gradient-to-b from-transparent to-cyan-500 group-hover/pin:h-40" />
+          <motion.div className="absolute right-1/2 bottom-1/2 z-40 h-[4px] w-[4px] translate-x-[1.5px] translate-y-[14px] rounded-full bg-cyan-600 blur-[3px]" />
+          <motion.div className="absolute right-1/2 bottom-1/2 z-40 h-[2px] w-[2px] translate-x-[0.5px] translate-y-[14px] rounded-full bg-cyan-300" />
+        </>
+      </div>
+    </motion.div>
+  );
+};
diff --git a/blocks/feature271.tsx b/blocks/feature271.tsx
new file mode 100644
index 0000000..549fc2b
--- /dev/null
+++ b/blocks/feature271.tsx
@@ -0,0 +1,128 @@
+import { BadgeCheck } from "lucide-react";
+import type { ReactNode } from "react";
+import type React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  { id: "instant", label: "تحلیل داده" },
+  { id: "one-time", label: "داشبورد" },
+  { id: "developer", label: "شاخص کلیدی" },
+  { id: "responsive", label: "بینش لحظه‌ای" },
+  { id: "production", label: "تحلیل داده" },
+  { id: "support", label: "داشبورد" },
+  { id: "updates", label: "شاخص کلیدی" },
+  { id: "customizable", label: "بینش لحظه‌ای" },
+  { id: "performance", label: "تحلیل داده" },
+  { id: "accessibility", label: "داشبورد" },
+  { id: "cross-browser", label: "شاخص کلیدی" },
+  { id: "docs", label: "بینش لحظه‌ای" },
+] as const;
+
+interface Feature271Props {
+  className?: string;
+}
+
+const Feature271 = ({ className }: Feature271Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-full w-screen overflow-hidden", className)}
+    >
+      <AuroraBackground>
+        <div className="relative container flex h-full flex-col items-center justify-center gap-15 text-center">
+          <div className="flex flex-col items-center justify-center">
+            <Badge
+              variant="outline"
+              className="mb-5 w-fit rounded-full bg-background/70 px-4 py-1 text-sm tracking-tight"
+            >
+              تحلیل داده
+            </Badge>
+            <h1 className="w-full max-w-xl text-center text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
+              داده پراکنده را به تصمیم تبدیل کنید
+            </h1>
+          </div>
+          <div className="flex w-full max-w-lg items-center gap-4 px-5">
+            <span className="h-px w-full bg-muted-foreground/20" />
+            <p className="text-sm text-muted-foreground/50">گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.</p>
+            <span className="h-px w-full bg-muted-foreground/20" />
+          </div>
+          <ul className="grid grid-cols-2 gap-3 text-start">
+            {FEATURES.map((feature) => (
+              <li key={feature.id} className="flex gap-2 lg:items-center">
+                <BadgeCheck className="size-4 shrink-0 text-primary" />
+                <p className="tracking-tight text-pretty text-muted-foreground/80">
+                  {feature.label}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </AuroraBackground>
+    </section>
+  );
+};
+
+export { Feature271 };
+
+// Below is the modified component from Aceternity UI
+// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/aurora-background.json
+// Modified so we could change the aurora animate class and colors
+
+interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+  showRadialGradient?: boolean;
+}
+
+export const AuroraBackground = ({
+  className,
+  children,
+  showRadialGradient = true,
+  ...props
+}: AuroraBackgroundProps) => {
+  return (
+    <main>
+      <div
+        className={cn(
+          "transition-bg relative flex h-[100vh] flex-col items-center justify-center bg-zinc-50 text-slate-950 dark:bg-zinc-900",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className="absolute inset-0 overflow-hidden"
+          style={
+            {
+              "--aurora":
+                "repeating-linear-gradient(100deg,#000_10%,#666_15%,#ccc_20%,#fff_25%,#333_30%)",
+              "--dark-gradient":
+                "repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
+              "--white-gradient":
+                "repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",
+
+              "--gray-200": "#ccc",
+              "--gray-400": "#666",
+              "--gray-800": "#333",
+              "--black": "#000",
+              "--white": "#fff",
+              "--transparent": "transparent",
+            } as React.CSSProperties
+          }
+        >
+          <div
+            //   I'm sorry but this is what peak developer performance looks like // trigger warning
+            className={cn(
+              `pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--black)_10%,var(--gray-400)_15%,var(--gray-200)_20%,var(--white)_25%,var(--gray-800)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:animate-aurora-background after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
+
+              showRadialGradient &&
+                `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
+            )}
+          ></div>
+        </div>
+        {children}
+      </div>
+    </main>
+  );
+};
diff --git a/blocks/feature272.tsx b/blocks/feature272.tsx
new file mode 100644
index 0000000..2db8616
--- /dev/null
+++ b/blocks/feature272.tsx
@@ -0,0 +1,79 @@
+import { ArrowRight } from "lucide-react";
+
+import { BackgroundBeams } from "@/components/aceternity/background-beams";
+import { cn } from "@/lib/utils";
+
+const STEPS = [
+  {
+    id: "copy-cli",
+    title: "پاسخ آماده",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+  },
+  {
+    id: "paste-cli",
+    title: "SLA هوشمند",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+  },
+  {
+    id: "edit",
+    title: "نظرسنجی رضایت",
+    description:
+      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+  },
+] as const;
+
+interface Feature272Props {
+  className?: string;
+}
+
+const Feature272 = ({ className }: Feature272Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "dark h-full w-screen overflow-hidden bg-background py-32 text-foreground",
+        className,
+      )}
+    >
+      <div className="relative z-20 container flex h-full flex-col items-center justify-center gap-10">
+        <p className="text-sm tracking-wide text-muted-foreground">
+          پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+        </p>
+        <h2 className="text-center text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
+          زمان حل مسئله را کوتاه کنید
+        </h2>
+        <p className="max-w-3xl text-center text-pretty text-muted-foreground">
+          رضایت مشتری و زمان حل را پیگیری کنید تا نقاط ضعف فرایند پشتیبانی را بهبود دهید.
+        </p>
+        <div className="relative grid grid-cols-1 md:grid-cols-3">
+          {STEPS.map((step, index) => (
+            <div
+              key={step.id}
+              className="relative space-y-5 border p-10 text-start"
+            >
+              <h3 className="text-xl font-semibold tracking-tighter">
+                {step.title}
+              </h3>
+              <p className="text-pretty text-muted-foreground">
+                {step.description}
+              </p>
+              {index < STEPS.length - 1 && (
+                <div className="absolute start-1/2 -bottom-5 z-10 flex size-10 translate-x-1/2 rotate-90 items-center justify-center gap-2 rounded-full border bg-background md:top-1/2 md:-end-5 md:translate-x-0 md:-translate-y-1/2 md:rotate-0">
+                  <ArrowRight className="size-6 rtl:rotate-180" />
+                </div>
+              )}
+            </div>
+          ))}
+          <div className="absolute start-0 z-99 h-full w-10 bg-gradient-to-r from-background to-transparent rtl:bg-gradient-to-l" />
+          <div className="absolute end-0 z-99 h-full w-10 bg-gradient-to-l from-background to-transparent rtl:bg-gradient-to-r" />
+        </div>
+      </div>
+      <BackgroundBeams className="dark bg-background text-foreground" />
+    </section>
+  );
+};
+
+export { Feature272 };
diff --git a/blocks/feature274.tsx b/blocks/feature274.tsx
new file mode 100644
index 0000000..266b001
--- /dev/null
+++ b/blocks/feature274.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import React from "react";
+
+import { CanvasRevealEffect } from "@/components/aceternity/canvas-reveal-effect";
+import { cn } from "@/lib/utils";
+
+const STATS = [
+  {
+    id: "success-rate",
+    defaultText: "اتوماسیون AI",
+    revealText: "دستیار کسب‌وکار",
+    animationSpeed: 5.1,
+    containerClassName: "bg-emerald-900",
+  },
+  {
+    id: "active-users",
+    defaultText: "هوش مصنوعی",
+    revealText: "پیشنهاد هوشمند",
+    animationSpeed: 3,
+    colors: [
+      [236, 72, 153],
+      [232, 121, 249],
+    ],
+    dotSize: 2,
+  },
+  {
+    id: "downloads",
+    defaultText: "اتوماسیون AI",
+    revealText: "دستیار کسب‌وکار",
+    animationSpeed: 3,
+    containerClassName: "bg-sky-600",
+    colors: [[125, 211, 252]],
+  },
+  {
+    id: "total-raised",
+    defaultText: `${(1.2).toLocaleString("fa-IR")}M$`,
+    revealText: "هوش مصنوعی",
+    animationSpeed: 4,
+    containerClassName: "bg-orange-600",
+    colors: [[249, 115, 22]],
+    dotSize: 3,
+  },
+] satisfies Array<{
+  id: string;
+  defaultText: string;
+  revealText: string;
+  animationSpeed: number;
+  containerClassName?: string;
+  colors?: number[][];
+  dotSize?: number;
+}>;
+
+interface Feature274Props {
+  className?: string;
+}
+
+const Feature274 = ({ className }: Feature274Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance md:py-7 lg:text-2xll">
+          با هوش مصنوعی سریع‌تر تصمیم بگیرید
+        </h2>
+        <p className="text-md mx-auto max-w-xl text-center text-pretty text-muted-foreground lg:text-lg">
+          مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+        </p>
+
+        <div className="mt-10 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {STATS.map((stat) => (
+            <Card
+              key={stat.id}
+              defaultText={stat.defaultText}
+              revealText={stat.revealText}
+              animationSpeed={stat.animationSpeed}
+              containerClassName={stat.containerClassName}
+              colors={stat.colors}
+              dotSize={stat.dotSize}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature274 };
+
+const Card = ({
+  defaultText,
+  revealText,
+  animationSpeed = 3,
+  containerClassName = "bg-primary",
+  colors = [[255, 255, 255]],
+  dotSize = 1,
+  hasRadialGradient = false,
+}: {
+  defaultText: string;
+  revealText: string;
+  animationSpeed?: number;
+  containerClassName?: string;
+  colors?: number[][];
+  dotSize?: number;
+  hasRadialGradient?: boolean;
+}) => {
+  const [hovered, setHovered] = React.useState(false);
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className="group/canvas-card relative mx-auto flex h-[25rem] w-full max-w-sm items-center justify-center border border-border p-4"
+    >
+      <BorderIllustration className="absolute -top-3 -start-3 h-6 w-6 text-foreground" />
+      <BorderIllustration className="absolute -bottom-3 -start-3 h-6 w-6 text-foreground" />
+      <BorderIllustration className="absolute -top-3 -end-3 h-6 w-6 text-foreground" />
+      <BorderIllustration className="absolute -end-3 -bottom-3 h-6 w-6 text-foreground" />
+
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="absolute inset-0 h-full w-full"
+          >
+            <CanvasRevealEffect
+              animationSpeed={animationSpeed}
+              containerClassName={containerClassName}
+              colors={colors}
+              dotSize={dotSize}
+            />
+            {hasRadialGradient && (
+              <div className="absolute inset-0 bg-muted/50 [mask-image:radial-gradient(400px_at_center,white,transparent)]" />
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="relative z-20">
+        <div className="absolute mx-auto flex w-full items-center justify-center text-center text-2xll font-semibold tracking-tight transition duration-200 group-hover/canvas-card:-translate-y-4 group-hover/canvas-card:opacity-0">
+          {defaultText}
+        </div>
+        <div className="absolute relative z-10 mt-4 text-center text-xl font-bold tracking-tight text-foreground opacity-0 transition duration-200 group-hover/canvas-card:-translate-y-2 group-hover/canvas-card:text-white group-hover/canvas-card:opacity-100">
+          {defaultText}
+          <br />
+          {revealText}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const BorderIllustration = ({
+  className,
+  ...rest
+}: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className={className}
+      {...rest}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+    </svg>
+  );
+};
diff --git a/blocks/feature275.tsx b/blocks/feature275.tsx
new file mode 100644
index 0000000..5dc6967
--- /dev/null
+++ b/blocks/feature275.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import React from "react";
+
+import { CanvasRevealEffect } from "@/components/aceternity/canvas-reveal-effect";
+import { cn } from "@/lib/utils";
+
+const PRINCIPLES = [
+  {
+    id: "consistent-work",
+    defaultText: "۱",
+    revealText: "کار گروهی",
+    revealDesc:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    animationSpeed: 5.1,
+    containerClassName: "bg-emerald-900",
+    hasRadialGradient: true,
+  },
+  {
+    id: "focused-mind",
+    defaultText: "۲",
+    revealText: "همکاری تیمی",
+    revealDesc:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    animationSpeed: 3,
+    containerClassName: "bg-black",
+    colors: [
+      [236, 72, 153],
+      [232, 121, 249],
+    ],
+    dotSize: 2,
+    hasRadialGradient: true,
+  },
+  {
+    id: "positive-mindset",
+    defaultText: "۰۳",
+    revealText: "مدیریت پروژه",
+    revealDesc:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    animationSpeed: 3,
+    containerClassName: "bg-sky-600",
+    colors: [[125, 211, 252]],
+    hasRadialGradient: true,
+  },
+] satisfies Array<{
+  id: string;
+  defaultText: string;
+  revealText: string;
+  revealDesc: string;
+  animationSpeed: number;
+  containerClassName?: string;
+  colors?: number[][];
+  dotSize?: number;
+  hasRadialGradient?: boolean;
+}>;
+
+interface Feature275Props {
+  className?: string;
+}
+
+const Feature275 = ({ className }: Feature275Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance md:py-7 lg:text-2xll">
+          همکاری از راه دور را ساده کنید
+        </h2>
+        <p className="text-md mx-auto max-w-xl text-center text-pretty text-muted-foreground lg:text-lg">
+          اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
+        </p>
+
+        <div className="mt-10 grid w-full max-w-4xl grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {PRINCIPLES.map((principle) => (
+            <Card
+              key={principle.id}
+              defaultText={principle.defaultText}
+              revealText={principle.revealText}
+              revealDesc={principle.revealDesc}
+              animationSpeed={principle.animationSpeed}
+              containerClassName={principle.containerClassName}
+              colors={principle.colors}
+              dotSize={principle.dotSize}
+              hasRadialGradient={principle.hasRadialGradient}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature275 };
+
+const Card = ({
+  defaultText,
+  revealText,
+  revealDesc,
+  animationSpeed = 3,
+  containerClassName = "bg-black",
+  colors = [[255, 255, 255]],
+  dotSize = 1,
+  hasRadialGradient = false,
+}: {
+  defaultText: string;
+  revealText: string;
+  revealDesc: string;
+  animationSpeed?: number;
+  containerClassName?: string;
+  colors?: number[][];
+  dotSize?: number;
+  hasRadialGradient?: boolean;
+}) => {
+  const [hovered, setHovered] = React.useState(false);
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className="group/canvas-card relative mx-auto flex h-[22rem] w-full max-w-sm items-center justify-center overflow-hidden rounded-3xl bg-muted"
+    >
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="absolute inset-0 h-full w-full"
+          >
+            <CanvasRevealEffect
+              animationSpeed={animationSpeed}
+              containerClassName={containerClassName}
+              colors={colors}
+              dotSize={dotSize}
+            />
+            {hasRadialGradient && (
+              <div className="absolute inset-0 bg-black/50 [mask-image:radial-gradient(400px_at_center,white,transparent)] dark:bg-black/90" />
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="relative z-20 flex h-full items-center justify-center">
+        <div className="absolute mx-auto flex w-full max-w-[10rem] flex-col items-center justify-center gap-5 text-center text-2xll leading-none tracking-tight text-muted-foreground/80 transition duration-200 group-hover/canvas-card:-translate-y-4 group-hover/canvas-card:opacity-0">
+          {defaultText}
+        </div>
+        <div className="absolute relative z-10 mt-4 flex h-full flex-col justify-between border p-7 text-start tracking-tight text-black opacity-0 transition duration-200 group-hover/canvas-card:-translate-y-2 group-hover/canvas-card:text-white group-hover/canvas-card:opacity-100 dark:text-white">
+          <p className="font-semibold">{revealText}</p>
+          <p className="text-pretty text-sm leading-relaxed">{revealDesc}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/blocks/feature276.tsx b/blocks/feature276.tsx
new file mode 100644
index 0000000..69f89af
--- /dev/null
+++ b/blocks/feature276.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  BrushCleaning,
+  Clock,
+  CodeXml,
+  Plug2,
+  Snowflake,
+  Zap,
+} from "lucide-react";
+import React, { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "plug-play",
+    title: "مدیریت محصول",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    icon: Plug2,
+  },
+  {
+    id: "customizable",
+    title: "پرداخت امن",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    icon: CodeXml,
+  },
+  {
+    id: "design-control",
+    title: "ردیابی سفارش",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    icon: Snowflake,
+  },
+  {
+    id: "updates",
+    title: "تخفیف هوشمند",
+    description:
+      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    icon: Clock,
+  },
+  {
+    id: "clean-code",
+    title: "موجودی انبار",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    icon: BrushCleaning,
+  },
+  {
+    id: "performance",
+    title: "بازگشت مشتری",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    icon: Zap,
+  },
+] as const;
+
+interface Feature276Props {
+  className?: string;
+}
+
+const Feature276 = ({ className }: Feature276Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <p className="rounded-full bg-muted px-4 py-1 text-xs">
+          فروش آنلاین
+        </p>
+        <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance md:py-7 lg:text-2xll">
+          فروشگاه
+        </h2>
+        <p className="text-md mx-auto max-w-xl text-center text-pretty text-muted-foreground lg:text-lg">
+          مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+        </p>
+
+        <div className="relative mt-10 grid w-full max-w-4xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map((item, idx) => (
+            <div
+              key={item.id}
+              className="group relative block h-full w-full p-2"
+              onMouseEnter={() => setHoveredIndex(idx)}
+              onMouseLeave={() => setHoveredIndex(null)}
+            >
+              <AnimatePresence mode="wait" initial={false}>
+                {hoveredIndex === idx && (
+                  <motion.span
+                    className="absolute inset-0 block h-full w-full rounded-2xl bg-muted-foreground/20"
+                    layoutId="hoverBackground"
+                    key={item.id}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.3 }}
+                  />
+                )}
+              </AnimatePresence>
+
+              <Card
+                title={item.title}
+                description={item.description}
+                icon={item.icon}
+                className="flex flex-col items-center justify-center"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature276 };
+
+const Card = ({
+  className,
+  title,
+  description,
+  icon: Icon,
+}: {
+  className?: string;
+  title: string;
+  description: string;
+  icon: React.ComponentType<{ className?: string }>;
+}) => {
+  return (
+    <div
+      className={cn(
+        "relative z-20 flex h-full flex-col items-center justify-center gap-4 rounded-2xl bg-muted p-5 text-center",
+        className,
+      )}
+    >
+      <Icon className="mt-3 size-8 stroke-1 text-muted-foreground" />
+      <h3 className="text-xl font-semibold tracking-tight">{title}</h3>
+      <p className="text-pretty text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+};
diff --git a/blocks/feature277.tsx b/blocks/feature277.tsx
new file mode 100644
index 0000000..5fb35da
--- /dev/null
+++ b/blocks/feature277.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  ArrowRight,
+  BadgeDollarSign,
+  CodeXml,
+  Plug2,
+  Snowflake,
+} from "lucide-react";
+import React, { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "realtime-tracking",
+    title: "پیشنهاد عنوان",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: Plug2,
+    color: "text-pink-500",
+    bgColor: "bg-pink-500/10",
+  },
+  {
+    id: "customizable",
+    title: "تحلیل کلمه کلیدی",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: CodeXml,
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+  },
+  {
+    id: "design-control",
+    title: "ممیزی فنی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    icon: Snowflake,
+    color: "text-sky-500",
+    bgColor: "bg-sky-500/10",
+  },
+  {
+    id: "pricing",
+    title: "ردیابی رتبه",
+    description:
+      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+    icon: BadgeDollarSign,
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+  },
+] as const;
+
+interface Feature277Props {
+  className?: string;
+}
+
+const Feature277 = ({ className }: Feature277Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <p className="rounded-full bg-muted px-4 py-1 text-xs">
+          ترافیک ارگانیک
+        </p>
+        <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance md:py-7 lg:text-2xll">
+          رتبه‌بندی
+        </h2>
+        <p className="text-md mx-auto max-w-xl text-center text-pretty text-muted-foreground lg:text-lg">
+          تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+        </p>
+
+        <div className="relative mt-10 grid w-full max-w-5xl grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+          {FEATURES.map((item, idx) => (
+            <div
+              key={item.id}
+              className="group relative block h-full w-full p-2"
+              onMouseEnter={() => setHoveredIndex(idx)}
+              onMouseLeave={() => setHoveredIndex(null)}
+            >
+              <AnimatePresence mode="wait" initial={false}>
+                {hoveredIndex === idx && (
+                  <motion.span
+                    className={cn(
+                      "absolute inset-0 block h-full w-full rounded-2xl bg-muted-foreground/20",
+                      item.bgColor,
+                    )}
+                    layoutId="hoverBackground"
+                    key={item.id}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.3 }}
+                  />
+                )}
+              </AnimatePresence>
+
+              <Card
+                title={item.title}
+                description={item.description}
+                icon={item.icon}
+                color={item.color}
+                className="flex flex-col items-center justify-center"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature277 };
+
+const Card = ({
+  className,
+  title,
+  description,
+  icon: Icon,
+  color,
+}: {
+  className?: string;
+  title: string;
+  description: string;
+  icon: React.ComponentType<{ className?: string }>;
+  color: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "relative z-20 flex h-full flex-col items-center justify-center gap-2 rounded-3xl bg-muted p-5 text-center",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "mt-4 mb-4 flex size-15 items-center justify-center rounded-full bg-background p-2",
+          color,
+        )}
+      >
+        <Icon />
+      </div>
+      <h3 className="text-xl font-medium tracking-tight">{title}</h3>
+      <p className="text-pretty text-center text-sm text-muted-foreground">
+        {description}
+      </p>
+
+      <Button
+        variant="ghost"
+        className="group/btn mt-8 w-full hover:opacity-50"
+        asChild
+      >
+        <a href="#">
+          محتوای SEO
+          <ArrowRight className="ms-2 size-4 transition-transform group-hover/btn:translate-x-1 rtl:rotate-180 rtl:group-hover/btn:-translate-x-1" />
+        </a>
+      </Button>
+    </div>
+  );
+};
diff --git a/blocks/feature278.tsx b/blocks/feature278.tsx
new file mode 100644
index 0000000..f153ac5
--- /dev/null
+++ b/blocks/feature278.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import React, { useState } from "react";
+import {
+  FaCog,
+  FaDollarSign,
+  FaPalette,
+  FaRocket,
+  FaShieldAlt,
+  FaUsers,
+} from "react-icons/fa";
+
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "performance",
+    title: "مدیریت دارایی",
+    description: "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    icon: FaRocket,
+    color: "text-pink-500",
+    bgColor: "bg-pink-500/10",
+  },
+  {
+    id: "setup",
+    title: "بودجه‌بندی",
+    description: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+    icon: FaCog,
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+  },
+  {
+    id: "design",
+    title: "مدیریت مالی",
+    description: "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+    icon: FaPalette,
+    color: "text-sky-500",
+    bgColor: "bg-sky-500/10",
+  },
+  {
+    id: "value",
+    title: "ERP",
+    description: "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
+    icon: FaDollarSign,
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+  },
+  {
+    id: "security",
+    title: "ERP",
+    description: "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    icon: FaShieldAlt,
+    color: "text-purple-500",
+    bgColor: "bg-purple-500/10",
+  },
+  {
+    id: "support",
+    title: "ERP",
+    description: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+    icon: FaUsers,
+    color: "text-orange-500",
+    bgColor: "bg-orange-500/10",
+  },
+] as const;
+
+interface Feature278Props {
+  className?: string;
+}
+
+const Feature278 = ({ className }: Feature278Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("min-h-screen overflow-hidden bg-muted py-32", className)}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <div className="max-w-5xl">
+          <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance md:py-7">
+            ویژگی‌هایی که{" "}
+            <br className="hidden lg:block" />
+            <span className="opacity-50">ERP</span>
+          </h2>
+
+          <div className="relative grid w-full max-w-3xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+            {FEATURES.map((item, idx) => (
+              <div
+                key={item.id}
+                className="group relative block h-full w-full p-2"
+                onMouseEnter={() => setHoveredIndex(idx)}
+                onMouseLeave={() => setHoveredIndex(null)}
+              >
+                <AnimatePresence mode="wait" initial={false}>
+                  {hoveredIndex === idx && (
+                    <motion.span
+                      className={cn(
+                        "absolute inset-0 block h-full w-full rounded-2xl",
+                        item.bgColor,
+                      )}
+                      layoutId="hoverBackground"
+                      key={item.id}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      transition={{ duration: 0.3 }}
+                    />
+                  )}
+                </AnimatePresence>
+
+                <Card
+                  title={item.title}
+                  description={item.description}
+                  icon={item.icon}
+                  color={item.color}
+                  bgColor={item.bgColor}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature278 };
+
+const Card = ({
+  className,
+  title,
+  description,
+  bgColor,
+  icon: Icon,
+  color,
+}: {
+  className?: string;
+  title: string;
+  description: string;
+  icon: React.ComponentType<{ className?: string }>;
+  bgColor: string;
+  color: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "relative z-20 flex h-full flex-col items-start justify-start gap-2 rounded-3xl bg-background p-5 text-start",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "mb-12 flex size-15 items-center justify-center rounded-2xl bg-background",
+          color,
+          bgColor,
+        )}
+      >
+        <Icon className="size-5" />
+      </div>
+      <h3 className="text-xl font-medium tracking-tight">{title}</h3>
+      <p className="text-pretty text-sm text-muted-foreground/50">
+        {description}
+      </p>
+    </div>
+  );
+};
diff --git a/blocks/feature28.tsx b/blocks/feature28.tsx
new file mode 100644
index 0000000..48045f7
--- /dev/null
+++ b/blocks/feature28.tsx
@@ -0,0 +1,67 @@
+import { ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Feature28Props {
+  className?: string;
+}
+
+const Feature28 = ({ className }: Feature28Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-gray-50 py-32 dark:bg-background", className)}
+    >
+      <div className="container">
+        <div className="grid gap-10 lg:grid-cols-2 lg:gap-20">
+          <div>
+            <div className="rounded-lg border bg-muted p-4 md:p-6">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt="سازنده گردش‌کار"
+                className="aspect-video max-h-[500px] w-full rounded-lg object-cover"
+              />
+            </div>
+            <div className="p-6">
+              <div className="mb-1 flex items-center gap-2 font-semibold">
+                فرایندها را استاندارد و سریع کنید <Badge>فرایند هوشمند</Badge>
+              </div>
+              <p className="text-muted-foreground">
+                قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+              </p>
+              <a href="#" className="mt-4 flex items-center gap-2 font-medium">
+                بیشتر بدانید
+                <ChevronRight className="size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+          <div>
+            <div className="rounded-lg border bg-muted p-4 md:p-6">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt="نمای اتوماسیون فرایند"
+                className="aspect-video max-h-[500px] w-full rounded-lg object-cover"
+              />
+            </div>
+            <div className="p-6">
+              <p className="mb-1 flex items-center gap-2 font-semibold">
+                فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
+              </p>
+              <p className="text-muted-foreground">
+                با اتصال ابزارهای موجود، داده بین سیستم‌ها خودکار جریان پیدا می‌کند و نیاز به کپی دستی از بین می‌رود.
+              </p>
+              <a href="#" className="mt-4 flex items-center gap-2 font-medium">
+                بیشتر بدانید
+                <ChevronRight className="size-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature28 };
diff --git a/blocks/feature280.tsx b/blocks/feature280.tsx
new file mode 100644
index 0000000..a76fe6a
--- /dev/null
+++ b/blocks/feature280.tsx
@@ -0,0 +1,118 @@
+import { BadgeCheck } from "lucide-react";
+import React from "react";
+
+import { CardStack } from "@/components/aceternity/card-stack";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  { id: "instant", label: "داده سازمانی" },
+  { id: "one-time", label: "هوش تجاری" },
+  { id: "developer", label: "گزارش‌گیری" },
+  { id: "responsive", label: "تحلیل پیشرفته" },
+  { id: "production", label: "داده سازمانی" },
+  { id: "support", label: "هوش تجاری" },
+  { id: "updates", label: "گزارش‌گیری" },
+  { id: "customizable", label: "تحلیل پیشرفته" },
+  { id: "performance", label: "داده سازمانی" },
+  { id: "accessibility", label: "هوش تجاری" },
+  { id: "cross-browser", label: "گزارش‌گیری" },
+  { id: "docs", label: "تحلیل پیشرفته" },
+] as const;
+
+export const Highlight = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <span
+      className={cn(
+        "bg-emerald-100 px-1 py-0.5 font-bold text-emerald-700 dark:bg-emerald-700/[0.2] dark:text-emerald-500",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+};
+
+const CARDS = [
+  {
+    id: 0,
+    name: "داده سازمانی",
+    designation: "هوش تجاری",
+    content: (
+      <p className="text-pretty">
+        پیاده‌سازی فوق‌العاده روان بود.{" "}
+        <Highlight>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</Highlight> گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
+      </p>
+    ),
+  },
+  {
+    id: 1,
+    name: "گزارش‌گیری",
+    designation: "تحلیل پیشرفته",
+    content: (
+      <p className="text-pretty">
+        به‌عنوان مدیر عملیات، گزارش‌های قابل اقدام برایم حیاتی است.{" "}
+        <Highlight>هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.</Highlight> داده خام از منابع مختلف جمع و مدل‌سازی می‌شود. کاربران غیرفنی هم می‌توانند گزارش بسازند و به پاسخ برسند.
+      </p>
+    ),
+  },
+  {
+    id: 2,
+    name: "داده سازمانی",
+    designation: "هوش تجاری",
+    content: (
+      <p className="text-pretty">
+        امکانات دسترس‌پذیری عالی است.{" "}
+        <Highlight>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</Highlight> ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.
+      </p>
+    ),
+  },
+];
+
+interface Feature280Props {
+  className?: string;
+}
+
+const Feature280 = ({ className }: Feature280Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-full w-screen overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full max-w-6xl flex-col items-center justify-between lg:flex-row">
+        <div className="relative flex h-full flex-col items-center justify-center gap-15 text-center lg:items-start lg:text-start">
+          <h1 className="w-full max-w-md text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h1>
+
+          <div className="flex w-full max-w-lg items-center gap-4 px-5">
+            <span className="h-px w-full bg-muted-foreground/20" />
+            <p className="text-sm text-muted-foreground/50">هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.</p>
+            <span className="h-px w-full bg-muted-foreground/20" />
+          </div>
+          <ul className="grid grid-cols-2 gap-3 text-start">
+            {FEATURES.map((feature) => (
+              <li key={feature.id} className="flex gap-2 lg:items-center">
+                <BadgeCheck className="size-4 shrink-0 text-muted-foreground/80" />
+                <p className="tracking-tight text-pretty text-muted-foreground/80">
+                  {feature.label}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="mt-24 flex items-center justify-center lg:mt-0">
+          <CardStack items={CARDS} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature280 };
diff --git a/blocks/feature281.tsx b/blocks/feature281.tsx
new file mode 100644
index 0000000..ee3cb98
--- /dev/null
+++ b/blocks/feature281.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  FaApple,
+  FaGoogle,
+  FaLinkedin,
+  FaMicrosoft,
+  FaTwitter,
+} from "react-icons/fa";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export const Highlight = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <motion.span
+      className={cn(
+        "bg-emerald-100 px-1 py-0.5 font-bold text-emerald-700 dark:bg-emerald-700/[0.2] dark:text-emerald-500",
+        className,
+      )}
+    >
+      {children}
+    </motion.span>
+  );
+};
+
+const CARDS = [
+  {
+    id: 0,
+    name: "مدیریت فروش",
+    designation: "سامانه CRM",
+    userImage: "/block-media/shadcnblocks/block/guri3/avatar1.png",
+    companyIcon: FaApple,
+    content: (
+      <p className="text-pretty">
+        پیاده‌سازی فوق‌العاده روان بود.{" "}
+        <Highlight>تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.</Highlight> از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.
+      </p>
+    ),
+  },
+  {
+    id: 1,
+    name: "ارتباط با مشتری",
+    designation: "پایپ‌لاین فروش",
+    userImage: "/block-media/shadcnblocks/block/guri3/avatar2.png",
+    companyIcon: FaLinkedin,
+    content: (
+      <p className="text-pretty">
+        به‌عنوان مدیر فروش، دید لحظه‌ای پایپ‌لاین برایم تعیین‌کننده است.{" "}
+        <Highlight>پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.</Highlight> تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+      </p>
+    ),
+  },
+  {
+    id: 2,
+    name: "مدیریت فروش",
+    designation: "سامانه CRM",
+    userImage: "/block-media/shadcnblocks/block/guri3/avatar3.png",
+    companyIcon: FaTwitter,
+    content: (
+      <p className="text-pretty">
+        امکانات دسترس‌پذیری عالی است.{" "}
+        <Highlight>از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.</Highlight> پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.
+      </p>
+    ),
+  },
+  {
+    id: 3,
+    name: "هر سرنخ را تا قرارداد دنبال کنید",
+    designation: "فروش تیم‌تان را یکجا مدیریت کنید",
+    userImage: "/block-media/shadcnblocks/block/guri3/avatar4.png",
+    companyIcon: FaGoogle,
+    content: (
+      <p className="text-pretty">
+        عملکرد استثنایی است.{" "}
+        <Highlight>تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.</Highlight> از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.
+      </p>
+    ),
+  },
+  {
+    id: 4,
+    name: "روابط مشتری را در یک نگاه ببینید",
+    designation: "پایپ‌لاین فروش را شفاف کنید",
+    userImage: "/block-media/shadcnblocks/block/guri3/avatar5.png",
+    companyIcon: FaMicrosoft,
+    content: (
+      <p className="text-pretty">
+        برای نیازهای سازمانی ما عالی است.{" "}
+        <Highlight>پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.</Highlight> تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+      </p>
+    ),
+  },
+];
+
+type Card = {
+  id: number;
+  name: string;
+  designation: string;
+  userImage: string;
+  companyIcon: React.ComponentType<{ className?: string }>;
+  content: React.ReactNode;
+};
+
+interface Feature281Props {
+  className?: string;
+}
+
+const Feature281 = ({ className }: Feature281Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-full w-screen overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full max-w-6xl flex-col items-center justify-center">
+        <div className="relative flex h-full flex-col items-center justify-center gap-8 text-center">
+          <p className="rounded-full bg-muted px-4 py-1 text-xs font-medium">
+            ارتباط با مشتری
+          </p>
+          <h1 className="w-full text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
+            پایپ‌لاین فروش
+          </h1>
+        </div>
+        <div className="mt-24 flex items-center justify-center">
+          <CardStack items={CARDS} />
+        </div>
+        <Button variant="ghost" className="group/btn mt-8 w-fit" asChild>
+          <a href="#">
+            مدیریت فروش
+            <ArrowRight className="ms-2 size-4 transition-transform group-hover/btn:translate-x-1 rtl:rotate-180 rtl:group-hover/btn:-translate-x-1" />
+          </a>
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export { Feature281 };
+
+// Below is the modified component from Aceternity UI
+// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/card-stack.json
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+const CardStack = ({
+  items,
+  offset,
+  scaleFactor,
+}: {
+  items: Card[];
+  offset?: number;
+  scaleFactor?: number;
+}) => {
+  const intervalRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const CARD_OFFSET = offset || 10;
+  const SCALE_FACTOR = scaleFactor || 0.06;
+  const [cards, setCards] = useState<Card[]>(items);
+
+  const startFlipping = useCallback(() => {
+    intervalRef.current = setInterval(() => {
+      setCards((prevCards: Card[]) => {
+        const newArray = [...prevCards];
+        newArray.unshift(newArray.pop()!);
+        return newArray;
+      });
+    }, 5000);
+  }, []);
+
+  useEffect(() => {
+    startFlipping();
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [startFlipping]);
+
+  return (
+    <div className="relative h-60 w-96">
+      {cards.map((card, index) => {
+        const CompanyIcon = card.companyIcon;
+        return (
+          <motion.div
+            key={card.id}
+            className="absolute flex h-60 w-96 flex-col justify-between rounded-3xl border border-neutral-200 bg-white p-4 text-start shadow-xl shadow-black/[0.1] dark:border-white/[0.1] dark:bg-black dark:shadow-white/[0.05]"
+            style={{
+              transformOrigin: "top center",
+            }}
+            animate={{
+              top: index * -CARD_OFFSET,
+              scale: 1 - index * SCALE_FACTOR,
+              zIndex: cards.length - index,
+            }}
+            transition={{
+              duration: 0.5,
+              type: "spring",
+              bounce: 0.3,
+            }}
+          >
+            <div className="font-normal text-neutral-700 dark:text-neutral-200">
+              {card.content}
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Avatar key={index} className="size-12">
+                  <AvatarImage src={card.userImage} alt={card.name} />
+                </Avatar>
+                <div>
+                  <p className="font-medium">{card.name}</p>
+                  <p className="text-muted-foreground/80">{card.designation}</p>
+                </div>
+              </div>
+              <div className="flex size-10 items-center justify-center rounded-full bg-muted-foreground/15">
+                <CompanyIcon className="size-5" />
+              </div>
+            </div>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/blocks/feature282.tsx b/blocks/feature282.tsx
new file mode 100644
index 0000000..ed61b5a
--- /dev/null
+++ b/blocks/feature282.tsx
@@ -0,0 +1,69 @@
+import { EvervaultCard } from "@/components/aceternity/evervault-card";
+import { cn } from "@/lib/utils";
+
+const SECURITY_FEATURES = [
+  { id: "keys", label: "تیم فروش" },
+  { id: "e2e", label: "بستن معامله" },
+  { id: "zero-knowledge", label: "رشد درآمد" },
+] as const;
+
+interface Feature282Props {
+  className?: string;
+}
+
+const Feature282 = ({ className }: Feature282Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-screen overflow-hidden py-32", className)}
+    >
+      <div className="container grid h-full w-full grid-cols-1 gap-12 md:grid-cols-2">
+        <div>
+          <div className="mx-auto flex h-full w-full flex-col gap-4 rounded-lg border border-primary/20 bg-primary p-4 md:max-w-sm">
+            <div className="h-full w-full rounded-md border border-border/50 bg-background p-4">
+              <EvervaultCard
+                text="یادآور پیگیری خودکار"
+                className="w-full text-center text-xl font-medium tracking-tight"
+              />
+            </div>
+            <div className="space-y-2 p-4 text-start">
+              <p className="font-mono text-sm text-muted-foreground">
+                با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+              </p>
+              <p className="text-lg font-semibold text-primary-foreground">
+                چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="text-start">
+          <p className="mb-2 font-mono text-sm text-muted-foreground">
+            الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.
+          </p>
+          <h2 className="text-3xl font-semibold tracking-tight text-balance md:max-w-lg">
+            پیش‌بینی درآمد را دقیق‌تر کنید
+          </h2>
+          <p className="mt-6 leading-relaxed text-pretty text-muted-foreground md:max-w-lg">
+            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+          </p>
+          <p className="mt-4 leading-relaxed text-pretty text-muted-foreground md:max-w-lg">
+            چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
+          </p>
+          <ul className="mt-8 space-y-3">
+            {SECURITY_FEATURES.map((feature) => (
+              <li key={feature.id} className="flex items-center gap-3">
+                <div className="size-2 shrink-0 rounded-full bg-primary" />
+                <span className="font-mono text-sm text-muted-foreground">
+                  {feature.label}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature282 };
diff --git a/blocks/feature283.tsx b/blocks/feature283.tsx
new file mode 100644
index 0000000..6495c8b
--- /dev/null
+++ b/blocks/feature283.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Forward } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    id: "side-start-main",
+    src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    imageAlt: "تحلیل عملکرد کمپین",
+    className:
+      "absolute -start-10 top-1/2 h-52 w-40 -translate-y-1/2 translate-x-full overflow-hidden rounded-2xl",
+  },
+  {
+    id: "corner-start-top",
+    src: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    imageAlt: "نمودار ROI",
+    className:
+      "absolute -top-3 start-10 size-28 -translate-y-full translate-x-full overflow-hidden rounded-2xl",
+  },
+  {
+    id: "corner-start-bottom",
+    src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+    className:
+      "absolute -bottom-3 start-10 size-32 translate-x-full translate-y-full overflow-hidden rounded-2xl",
+  },
+  {
+    id: "side-end-main",
+    src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+    imageAlt: "تحلیل عملکرد کمپین",
+    className:
+      "absolute -end-10 top-1/2 h-52 w-45 -translate-x-full -translate-y-1/2 overflow-hidden rounded-2xl",
+  },
+  {
+    id: "corner-end-top",
+    src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+    imageAlt: "نمودار ROI",
+    className:
+      "absolute -top-3 end-10 size-28 -translate-x-full -translate-y-full overflow-hidden rounded-2xl",
+  },
+  {
+    id: "corner-end-bottom",
+    src: "/block-media/shadcnblocks/block/guri3/img3.jpeg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+    className:
+      "absolute -bottom-3 end-10 size-32 -translate-x-full translate-y-full overflow-hidden rounded-2xl",
+  },
+] as const;
+
+interface Feature283Props {
+  className?: string;
+}
+
+const Feature283 = ({ className }: Feature283Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen overflow-hidden py-32", className)}
+    >
+      <div className="container flex h-full w-full flex-col items-center justify-center px-4">
+        <div className="relative flex flex-col items-center justify-center">
+          <h2 className="relative py-2 text-center font-sans text-xl font-semibold tracking-tighter text-balance md:text-2xll">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </h2>
+          <p className="mx-auto mt-2 max-w-xl px-5 text-center text-pretty text-sm text-muted-foreground/50 md:text-base">
+            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+          </p>
+          <Button className="mt-10 h-10 gap-2 rounded-xl">
+            گزارش لحظه‌ای هزینه، کلیک و تبدیل به شما کمک می‌کند بودجه را از کانال‌های ضعیف به کانال‌های پربازده منتقل کنید.
+            <Forward className="size-4 rtl:rotate-180" />
+          </Button>
+          <div>
+            {IMAGES.map((image, index) => (
+              <motion.div
+                drag
+                key={image.id}
+                initial={{ y: "50%", opacity: 0, scale: 0.8 }}
+                whileInView={{ y: 0, opacity: 1, scale: 1 }}
+                transition={{
+                  duration: 0.2,
+                  ease: "easeOut",
+                  delay: index * 0.1 + 0.5,
+                }}
+                animate={{
+                  filter:
+                    hoveredIndex !== null && hoveredIndex !== index
+                      ? "blur(10px)"
+                      : "blur(0px)",
+                  scale: hoveredIndex === index ? 1.05 : 1,
+                  transition: {
+                    duration: 0.3,
+                    ease: "easeOut",
+                    delay: 0,
+                  },
+                }}
+                onHoverStart={() => setHoveredIndex(index)}
+                onHoverEnd={() => setHoveredIndex(null)}
+                className={image.className}
+              >
+                <img
+                  src={image.src}
+                  alt={image.imageAlt}
+                  className="pointer-events-none size-full object-cover"
+                />
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature283 };
diff --git a/blocks/feature284.tsx b/blocks/feature284.tsx
new file mode 100644
index 0000000..d256bb8
--- /dev/null
+++ b/blocks/feature284.tsx
@@ -0,0 +1,105 @@
+import { HelpCircleIcon } from "lucide-react";
+
+import { GlowingEffect } from "@/components/aceternity/glowing-effect";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "quality",
+    title: "تریگر رویداد",
+    desc: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    imageAlt: "سازنده گردش‌کار",
+    img: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    badgeTitle: "فرایند هوشمند",
+    gridClass: "md:col-span-1",
+  },
+  {
+    id: "innovation-wide",
+    title: "شرط هوشمند",
+    desc: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    imageAlt: "نمای اتوماسیون فرایند",
+    img: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    badgeTitle: "اتوماسیون",
+    gridClass: "lg:col-span-2",
+  },
+  {
+    id: "performance",
+    title: "اعلان خودکار",
+    desc: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    imageAlt: "لاگ اجرای خودکار",
+    img: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    badgeTitle: "گردش‌کار",
+    gridClass: "md:col-span-1 lg:row-span-2",
+  },
+  {
+    id: "creativity",
+    title: "تأیید چندمرحله‌ای",
+    desc: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    imageAlt: "سازنده گردش‌کار",
+    img: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
+    badgeTitle: "صرفه‌جویی زمان",
+    gridClass: "lg:col-span-2",
+  },
+  {
+    id: "reliability",
+    title: "لاگ اجرا",
+    desc: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    imageAlt: "نمای اتوماسیون فرایند",
+    img: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
+    badgeTitle: "فرایند هوشمند",
+    gridClass: "md:col-span-1",
+  },
+] as const;
+
+interface Feature284Props {
+  className?: string;
+}
+
+const Feature284 = ({ className }: Feature284Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-full overflow-hidden py-32", className)}
+    >
+      <div className="container flex h-full w-full items-center justify-center">
+        <div className="grid w-full max-w-6xl grid-cols-1 grid-rows-2 gap-4 md:grid-cols-2 lg:h-[800px] lg:grid-cols-4">
+          {FEATURES.map((feature) => (
+            <div
+              key={feature.id}
+              className={cn(
+                "relative flex flex-col gap-2 rounded-3xl border p-4 text-start",
+                feature.gridClass,
+              )}
+            >
+              <GlowingEffect
+                spread={40}
+                glow={true}
+                disabled={false}
+                proximity={64}
+                inactiveZone={0.01}
+              />
+              <div className="flex w-full items-center justify-between">
+                <p className="text-muted-foreground">{feature.badgeTitle}</p>
+                <HelpCircleIcon className="size-4 shrink-0 text-muted-foreground" />
+              </div>
+              <div className="w-full flex-1 overflow-hidden rounded-3xl bg-muted">
+                <img
+                  src={feature.img}
+                  alt={feature.imageAlt}
+                  className="pointer-events-none h-full w-full object-cover"
+                />
+              </div>
+              <h3 className="mt-4 text-xl font-semibold tracking-tight">
+                {feature.title}
+              </h3>
+              <p className="text-pretty text-muted-foreground">{feature.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature284 };
diff --git a/blocks/feature285.tsx b/blocks/feature285.tsx
new file mode 100644
index 0000000..6ea1701
--- /dev/null
+++ b/blocks/feature285.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Forward } from "lucide-react";
+import { useState } from "react";
+
+import { Marquee } from "@/components/magicui/marquee";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    id: "img11-a",
+    src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "img1-a",
+    src: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "img7-a",
+    src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    id: "img12-a",
+    src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "img13-a",
+    src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "img3-a",
+    src: "/block-media/shadcnblocks/block/guri3/img3.jpeg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    id: "img11-b",
+    src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    id: "img1-b",
+    src: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    id: "img7-b",
+    src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    id: "img12-b",
+    src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+    imageAlt: "گزارش عملکرد",
+  },
+] as const;
+
+const BRAND = {
+  url: "https://www.ShadcnBlocks",
+  src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+  alt: "داشبورد تحلیل داده",
+  title: "آنالیتیکس",
+} as const;
+
+interface Feature285Props {
+  className?: string;
+}
+
+const Feature285 = ({ className }: Feature285Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-full overflow-hidden py-32 lg:h-screen", className)}
+    >
+      <div className="container flex h-full w-full items-center justify-center">
+        <div className="grid h-full w-full max-w-7xl grid-cols-1 overflow-hidden rounded-4xl bg-muted lg:grid-cols-2">
+          <div className="relative flex flex-col justify-between p-15 text-start">
+            <a href={BRAND.url} className="flex items-center gap-2">
+              <img src={BRAND.src} className="max-h-8 w-8" alt={BRAND.alt} />
+              <span className="text-xl font-semibold tracking-tight">
+                {BRAND.title}
+              </span>
+            </a>
+            <div>
+              <h2 className="relative mt-12 font-sans text-xl font-semibold tracking-tighter text-balance md:text-2xll lg:mt-0 xl:text-2xll">
+                داده پراکنده را به تصمیم تبدیل کنید
+              </h2>
+              <p className="text-md mx-auto mt-2 mb-10 max-w-2xl text-pretty text-muted-foreground/50 md:text-lg">
+                گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+              </p>
+            </div>
+            <Button className="h-12 w-fit gap-2 rounded-xl !px-5">
+              شروع کنید
+              <Forward className="size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+          <div className="relative me-3 flex h-120 flex-row items-center justify-end overflow-hidden lg:h-full">
+            <Marquee pauseOnHover vertical className="[--duration:20s]">
+              {IMAGES.map((image, index) => (
+                <motion.img
+                  onMouseEnter={() => setHoveredIndex(index)}
+                  onMouseLeave={() => setHoveredIndex(null)}
+                  transition={{
+                    duration: 0.2,
+                    ease: "easeOut",
+                    delay: index * 0.1 + 0.5,
+                  }}
+                  animate={{
+                    filter:
+                      hoveredIndex !== null && hoveredIndex !== index
+                        ? "blur(10px)"
+                        : "blur(0px)",
+                    transition: {
+                      duration: 0.3,
+                      ease: "easeOut",
+                      delay: 0,
+                    },
+                  }}
+                  key={`marquee1-${image.id}`}
+                  src={image.src}
+                  alt={image.imageAlt}
+                  className="w-full rounded-3xl object-cover lg:h-60"
+                />
+              ))}
+            </Marquee>
+            <Marquee reverse pauseOnHover vertical className="[--duration:20s]">
+              {IMAGES.map((image, index) => (
+                <motion.img
+                  onMouseEnter={() => setHoveredIndex(index)}
+                  onMouseLeave={() => setHoveredIndex(null)}
+                  transition={{
+                    duration: 0.2,
+                    ease: "easeOut",
+                    delay: index * 0.1 + 0.5,
+                  }}
+                  animate={{
+                    filter:
+                      hoveredIndex !== null && hoveredIndex !== index
+                        ? "blur(10px)"
+                        : "blur(0px)",
+                    transition: {
+                      duration: 0.3,
+                      ease: "easeOut",
+                      delay: 0,
+                    },
+                  }}
+                  key={`marquee2-${image.id}`}
+                  src={image.src}
+                  alt={image.imageAlt}
+                  className="w-full rounded-3xl object-cover lg:h-60"
+                />
+              ))}
+            </Marquee>
+            <div className="pointer-events-none absolute inset-x-0 top-0 block h-1/4 bg-gradient-to-b from-muted lg:hidden" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature285 };
diff --git a/blocks/feature286.tsx b/blocks/feature286.tsx
new file mode 100644
index 0000000..f2194ac
--- /dev/null
+++ b/blocks/feature286.tsx
@@ -0,0 +1,96 @@
+import { ShoppingCartIcon } from "lucide-react";
+
+import { GlowingStarsBackgroundCard } from "@/components/aceternity/glowing-stars";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const COLLECTIONS = [
+  {
+    id: "june",
+    title: "تاریخچه مشتری",
+    price: `${(129).toLocaleString("fa-IR")}$`,
+    link: "#",
+    className: "md:col-span-1",
+  },
+  {
+    id: "summer",
+    title: "صندوق یکپارچه",
+    price: `${(89).toLocaleString("fa-IR")}$`,
+    link: "#",
+    className: "md:col-span-1",
+  },
+  {
+    id: "premium",
+    title: "اولویت‌بندی تیکت",
+    price: `${(199).toLocaleString("fa-IR")}$`,
+    link: "#",
+    className: "md:col-span-1",
+  },
+] as const;
+
+interface Feature286Props {
+  className?: string;
+}
+
+const Feature286 = ({ className }: Feature286Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "dark overflow-hidden bg-background py-32 text-foreground",
+        className,
+      )}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">
+          تیکت
+        </p>
+        <h2 className="relative py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
+          رضایت مشتری
+        </h2>
+        <p className="text-md mx-auto mt-5 max-w-xl px-5 text-center text-pretty text-muted-foreground lg:text-lg">
+          پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+        </p>
+
+        <div className="mt-10 grid w-full max-w-5xl grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+          {COLLECTIONS.map((card) => (
+            <div
+              key={card.id}
+              className="flex flex-col rounded-3xl bg-muted/60 p-4 text-start"
+            >
+              <GlowingStarsBackgroundCard className="h-55 border-none !bg-none" />
+
+              <div className="mt-3 flex items-center justify-start gap-3">
+                <h3 className="text-xl font-semibold tracking-tighter">
+                  {card.title}
+                </h3>
+                <span className="inline-block rounded-xl bg-muted-foreground/20 px-3 text-sm text-foreground/60">
+                  مرکز تماس
+                </span>
+              </div>
+              <div className="mt-5 flex items-center justify-between">
+                <div className="flex h-full items-center justify-center gap-2 rounded-full bg-muted-foreground/20 px-7 text-sm">
+                  پشتیبانی مشتری
+                  <ShoppingCartIcon className="size-4 shrink-0" />
+                </div>
+                <div className="text-end">
+                  <span className="text-xs text-muted-foreground">تیکت</span>
+                  <p className="-mt-1 text-xl font-semibold tracking-tight">
+                    {card.price}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <Button variant="secondary" className="mt-10 h-10 rounded-full !px-5">
+          رضایت مشتری
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export { Feature286 };
diff --git a/blocks/feature287.tsx b/blocks/feature287.tsx
new file mode 100644
index 0000000..33a09bb
--- /dev/null
+++ b/blocks/feature287.tsx
@@ -0,0 +1,80 @@
+import { GlowingStarsBackgroundCard } from "@/components/aceternity/glowing-stars";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const COLLECTIONS = [
+  {
+    id: "june",
+    title: "تحلیل احساس",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+  },
+  {
+    id: "summer",
+    title: "دستیار گفتگو",
+    description:
+      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+  },
+  {
+    id: "premium",
+    title: "خلاصه‌سازی هوشمند",
+    description:
+      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+  },
+  {
+    id: "new-arrivals",
+    title: "پیشنهاد پاسخ",
+    description:
+      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+  },
+] as const;
+
+interface Feature287Props {
+  className?: string;
+}
+
+const Feature287 = ({ className }: Feature287Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "dark overflow-hidden bg-background py-32 text-foreground",
+        className,
+      )}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <h2 className="relative mt-4 w-full max-w-7xl py-2 text-xl font-semibold tracking-tighter text-balance lg:text-2xll">
+          با هوش مصنوعی سریع‌تر تصمیم بگیرید
+          <br />
+          <span className="text-muted-foreground">مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.</span>
+        </h2>
+        <div className="mt-10 grid w-full max-w-7xl grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {COLLECTIONS.map((card) => (
+            <div
+              key={card.id}
+              className="flex flex-col rounded-3xl bg-muted/60 p-4 text-start"
+            >
+              <GlowingStarsBackgroundCard className="h-55 max-w-full border-none !bg-muted-foreground" />
+
+              <div className="mt-3 flex items-center justify-start gap-3">
+                <h3 className="text-xl font-semibold tracking-tighter">
+                  {card.title}
+                </h3>
+              </div>
+              <p className="mt-1 text-pretty text-sm text-muted-foreground/70">
+                {card.description}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <Button variant="secondary" className="mt-10 h-10 rounded-full !px-5">
+          اتوماسیون AI
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export { Feature287 };
diff --git a/blocks/feature288.tsx b/blocks/feature288.tsx
new file mode 100644
index 0000000..71d08f8
--- /dev/null
+++ b/blocks/feature288.tsx
@@ -0,0 +1,53 @@
+import { LinkPreview } from "@/components/shadcnblocks/link-preview";
+import { cn } from "@/lib/utils";
+
+interface Feature288Props {
+  className?: string;
+}
+
+const Feature288 = ({ className }: Feature288Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container w-full">
+        <h1 className="mt-10 text-center text-3xl font-semibold tracking-tight text-balance text-muted-foreground/40 md:text-xl">
+          تیم‌ها را در یک فضای مشترک هم‌راستا کنید با{" "}
+          <LinkPreview url="https://ShadcnBlocks" className="px-1">
+            همکاری تیمی
+          </LinkPreview>{" "}
+          که برای سازمان‌های در حال رشد طراحی شده. چه از{" "}
+          <LinkPreview url="https://tailwindcss.com" className="px-1">
+            مدیریت پروژه
+          </LinkPreview>
+          و{" "}
+          <LinkPreview url="https://www.typescriptlang.org" className="px-1">
+            ردیابی وظایف
+          </LinkPreview>{" "}
+          استفاده کنید و چه{" "}
+          <LinkPreview url="https://www.framer.com/motion" className="px-1">
+            اشتراک فایل
+          </LinkPreview>{" "}
+          را یکپارچه کنید،
+          <br />
+          <br />
+          <span className="text-pretty">
+            همه‌چیز در یک محیط کاری متمرکز جمع می‌شود؛ از{" "}
+            <LinkPreview url="https://nextjs.org" className="px-1">
+              برنامه‌ریزی
+            </LinkPreview>{" "}
+            تا{" "}
+            <LinkPreview url="https://ui.shadcn.com" className="px-1">
+              گزارش پیشرفت
+            </LinkPreview>
+            ، ابزاری که با تیم شما بزرگ می‌شود.
+          </span>
+        </h1>
+      </div>
+    </section>
+  );
+};
+
+export { Feature288 };
diff --git a/blocks/feature289.tsx b/blocks/feature289.tsx
new file mode 100644
index 0000000..945500c
--- /dev/null
+++ b/blocks/feature289.tsx
@@ -0,0 +1,86 @@
+import { ArrowRightIcon } from "lucide-react";
+
+import { LinkPreview } from "@/components/shadcnblocks/link-preview";
+import { cn } from "@/lib/utils";
+
+const TECH_STACK = [
+  {
+    id: "payment",
+    label: "درگاه پرداخت",
+    url: "https://ShadcnBlocks",
+  },
+  {
+    id: "shipping",
+    label: "شرکت حمل",
+    url: "https://ui.shadcn.com",
+  },
+  {
+    id: "inventory",
+    label: "مدیریت موجودی",
+    url: "https://tailwindcss.com",
+  },
+  {
+    id: "crm",
+    label: "مدیریت مشتری",
+    url: "https://www.framer.com/motion",
+  },
+  {
+    id: "analytics",
+    label: "تحلیل فروش",
+    url: "https://nextjs.org",
+  },
+  {
+    id: "email",
+    label: "ایمیل مارکتینگ",
+    url: "https://www.typescriptlang.org",
+  },
+] as const;
+
+interface Feature289Props {
+  className?: string;
+}
+
+const Feature289 = ({ className }: Feature289Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="relative z-20 container flex w-full flex-col items-center justify-between gap-10 md:flex-row">
+        <div className="text-start">
+          <h1 className="text-2xll font-semibold tracking-tighter text-balance md:text-2xll lg:text-8xl">
+            فروش آنلاین را مقیاس‌پذیر کنید
+            <br />
+            تجربه خرید را روان‌تر بسازید
+          </h1>
+
+          <div className="mt-18 max-w-md">
+            <div className="mb-2 h-px w-full bg-foreground" />
+            <div className="flex items-center justify-between">
+              <p className="text-lg text-foreground">بیشتر بدانید</p>
+              <ArrowRightIcon className="size-5 stroke-1 rtl:rotate-180" />
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-5 text-lg lg:gap-10">
+          <p className="shrink-0 font-semibold">یکپارچگی با ابزارهای فروش</p>
+          <ul className="text-start">
+            {TECH_STACK.map((item) => (
+              <li key={item.id}>
+                <LinkPreview
+                  url={item.url}
+                  className="opacity-40 hover:opacity-100"
+                >
+                  {item.label}
+                </LinkPreview>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature289 };
diff --git a/blocks/feature29.tsx b/blocks/feature29.tsx
new file mode 100644
index 0000000..3e4748b
--- /dev/null
+++ b/blocks/feature29.tsx
@@ -0,0 +1,65 @@
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Feature29Props {
+  className?: string;
+}
+
+const Feature29 = ({ className }: Feature29Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto grid max-w-5xl gap-10 md:grid-cols-2">
+          <div className="order-1 flex flex-col gap-2 rounded-lg border p-2">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="گزارش عملکرد"
+              className="aspect-video w-full rounded-lg border object-cover"
+            />
+            <Separator />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="داشبورد تحلیل داده"
+              className="aspect-video w-full rounded-lg border object-cover"
+            />
+          </div>
+          <div className="order-3 rounded-lg border p-2">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-3.svg"
+              alt="نمودار شاخص کلیدی"
+              className="h-full w-full rounded-lg border object-cover"
+            />
+          </div>
+          <div className="order-2 -mt-6 max-w-[412px] md:order-3">
+            <p className="mb-6 text-sm text-muted-foreground md:mb-12">
+              گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+            </p>
+            <h3 className="mb-3 text-xl font-medium md:mb-6">گزارش زمان‌بندی‌شده</h3>
+            <p className="mb-6 text-muted-foreground">
+              تحلیل کوHORT
+            </p>
+            <a href="#" className="font-medium hover:underline">
+              داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
+            </a>
+          </div>
+          <div className="order-4 -mt-6 max-w-[412px] md:order-3">
+            <p className="mb-6 text-sm text-muted-foreground md:mb-12">
+              شاخص‌های مهم را شخصی‌سازی کنید و تغییرات غیرعادی را زودتر تشخیص دهید. تیم‌ها با دید مشترک، سریع‌تر هم‌راستا می‌شوند.
+            </p>
+            <h3 className="mb-3 text-xl font-medium md:mb-6">
+              مقایسه دوره‌ای
+            </h3>
+            <p className="mb-6 text-muted-foreground">
+              خروجی گزارش
+            </p>
+            <a href="#" className="font-medium hover:underline">
+              گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature29 };
diff --git a/blocks/feature292.tsx b/blocks/feature292.tsx
new file mode 100644
index 0000000..d5cdbdf
--- /dev/null
+++ b/blocks/feature292.tsx
@@ -0,0 +1,67 @@
+import { ArrowRight } from "lucide-react";
+
+import { PointerHighlight } from "@/components/aceternity/pointer-highlight";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Feature292Props {
+  className?: string;
+}
+
+const Feature292 = ({ className }: Feature292Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative grid w-screen overflow-hidden py-32", className)}
+    >
+      <div className="relative z-10 container h-full grid-cols-1 items-center justify-center gap-6 lg:grid lg:grid-cols-2">
+        <div className="flex flex-col items-center justify-center text-center lg:items-start lg:text-start">
+          <div className="mb-12 flex items-center justify-center gap-3 rounded-full bg-muted-foreground/5 p-1 pe-4 text-sm font-medium tracking-tight text-muted-foreground">
+            <div className="flex items-center gap-3 rounded-full bg-muted-foreground/10 px-4 py-1.5">
+              <span className="inline-block size-2 shrink-0 rounded-full bg-blue-500" />
+              <span>ترافیک ارگانیک</span>
+            </div>
+            <div className="flex items-center gap-2">
+              رتبه‌بندی
+              <ArrowRight className="size-4 shrink-0 rtl:rotate-180" />
+            </div>
+          </div>
+          <h1 className="text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
+            رتبه جستجو را با{" "}
+            <PointerHighlight containerClassName="inline-block">
+              <span>تحلیل یکپارچه</span>
+            </PointerHighlight>{" "}
+            بهبود دهید
+          </h1>
+          <p className="mt-10 max-w-lg text-pretty text-muted-foreground">
+            گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
+          </p>
+
+          <div className="mt-10 flex w-full max-w-lg gap-2">
+            <Input
+              type="email"
+              dir="rtl"
+              className="h-13 w-full rounded-full"
+              placeholder="رتبه کلمات کلیدی را پیگیری کنید"
+            />
+            <Button className="h-13 gap-2 rounded-full">
+              شروع کنید
+              <ArrowRight className="-rotate-45 rtl:rotate-[135deg]" />
+            </Button>
+          </div>
+        </div>
+        <div className="relative mt-10 flex h-[80vh] w-full items-center justify-center overflow-hidden rounded-4xl border lg:mt-0 lg:h-[70vh]">
+          <img
+            src="/block-media/shadcnblocks/block/guri3/img7.jpeg"
+            alt="داشبورد SEO"
+            className="size-full object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature292 };
diff --git a/blocks/feature293.tsx b/blocks/feature293.tsx
new file mode 100644
index 0000000..0c5ba5b
--- /dev/null
+++ b/blocks/feature293.tsx
@@ -0,0 +1,65 @@
+import { ArrowRight } from "lucide-react";
+
+import { SparklesCore } from "@/components/shadcnblocks/sparkles";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Feature293Props {
+  className?: string;
+}
+
+const Feature293 = ({ className }: Feature293Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "dark relative h-screen w-screen overflow-hidden bg-background py-32 text-foreground",
+        className,
+      )}
+    >
+      <div className="relative container flex h-full flex-col items-center justify-center">
+        <div className="w-full max-w-lg text-center">
+          <h1 className="relative z-20 text-center text-2xll font-semibold tracking-tighter text-balance md:text-2xll lg:text-2xll">
+            از خرید تا فروش در یک سیستم
+          </h1>
+          <p className="mt-4 text-pretty text-muted-foreground/50">
+            گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+          </p>
+          <div className="mt-10 flex w-full max-w-lg gap-2">
+            <Input
+              type="email"
+              dir="rtl"
+              className="h-11 w-full rounded-2xl border-none lg:h-13"
+              placeholder="عملیات سازمان را یکپارچه کنید"
+            />
+            <Button className="h-11 gap-2 rounded-2xl !px-4 lg:h-13">
+              یکپارچگی
+              <ArrowRight className="size-4 shrink-0 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+        <div className="relative mt-5 h-40 w-[40rem]">
+          <div className="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm" />
+          <div className="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent" />
+          <div className="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm" />
+          <div className="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
+
+          <SparklesCore
+            background="transparent"
+            minSize={0.4}
+            maxSize={1}
+            particleDensity={1200}
+            className="h-full w-full"
+            particleColor="#FFFFFF"
+          />
+
+          <div className="absolute inset-0 h-full w-full bg-background [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature293 };
diff --git a/blocks/feature294.tsx b/blocks/feature294.tsx
new file mode 100644
index 0000000..f4539e1
--- /dev/null
+++ b/blocks/feature294.tsx
@@ -0,0 +1,104 @@
+import { AudioLines, Box, Globe, ShieldUser, Users } from "lucide-react";
+
+import { SparklesCore } from "@/components/shadcnblocks/sparkles";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "developer-friendly",
+    icon: Globe,
+    title: "گزارش‌ساز",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+  },
+  {
+    id: "fast",
+    icon: Box,
+    title: "Pivot تعاملی",
+    description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+  },
+  {
+    id: "secure",
+    icon: ShieldUser,
+    title: "داشبورد مدیریتی",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+  },
+  {
+    id: "collaboration",
+    icon: Users,
+    title: "اتصال منبع",
+    description:
+      "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+  },
+  {
+    id: "voice",
+    icon: AudioLines,
+    title: "سطح دسترسی",
+    description: "دسترسی مبتنی بر نقش را برای هر گزارش و داشبورد تنظیم کنید.",
+  },
+] as const;
+
+interface Feature294Props {
+  className?: string;
+}
+
+const Feature294 = ({ className }: Feature294Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "dark relative w-screen overflow-hidden bg-background py-32 text-foreground",
+        className,
+      )}
+    >
+      <div className="relative container flex h-full flex-col items-center justify-center">
+        <div className="w-full max-w-lg text-center">
+          <h1 className="relative z-20 text-center text-2xll font-semibold tracking-tighter text-balance md:text-2xll lg:text-2xll">
+            تصمیم استراتژیک را داده‌محور کنید
+          </h1>
+          <p className="mt-4 text-pretty text-muted-foreground/50">
+            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+          </p>
+        </div>
+        <div className="relative mt-5 mb-10 h-40 w-[40rem]">
+          <div className="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm" />
+          <div className="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent" />
+          <div className="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm" />
+          <div className="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
+
+          <SparklesCore
+            background="transparent"
+            minSize={0.4}
+            maxSize={1}
+            particleDensity={500}
+            className="h-full w-full"
+            particleColor="#FFFFFF"
+          />
+
+          <div className="absolute inset-0 h-full w-full bg-background [mask-image:radial-gradient(350px_130px_at_top,transparent_20%,white)]" />
+        </div>
+
+        <div className="grid w-full max-w-5xl grid-cols-1 gap-15 md:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map((feature) => {
+            const IconComponent = feature.icon;
+            return (
+              <div key={feature.id} className="flex gap-4 text-start">
+                <IconComponent className="w-12 shrink-0 stroke-1 text-sky-500" />
+                <div className="space-y-2">
+                  <h3 className="text-xl font-medium">{feature.title}</h3>
+                  <p className="text-pretty text-muted-foreground/30">
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature294 };
diff --git a/blocks/feature295.tsx b/blocks/feature295.tsx
new file mode 100644
index 0000000..5f15f9c
--- /dev/null
+++ b/blocks/feature295.tsx
@@ -0,0 +1,326 @@
+"use client";
+
+import { GitPullRequest, Star } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+const CATEGORIES = [
+  "React",
+  "TailwindCSS",
+  "TypeScript",
+  "Express",
+  "MongoDB",
+  "Python",
+] as const;
+
+const ROLE_LABELS = {
+  author: "مدیریت فروش",
+  contributor: "سامانه CRM",
+} as const;
+
+interface Project {
+  id: string;
+  title: string;
+  description: string;
+  category: string[];
+  link: string;
+  stars: number;
+  contributions: number;
+  pullRequests: number;
+  role: "author" | "contributor";
+}
+
+const PROJECTS: Project[] = [
+  {
+    id: "react-portfolio",
+    title: "react-portfolio",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    category: ["React", "TailwindCSS", "TypeScript"],
+    link: "#",
+    stars: 5,
+    contributions: 2,
+    pullRequests: 15,
+    role: "author",
+  },
+  {
+    id: "ai-chatbot",
+    title: "ai-chatbot",
+    description: "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    category: ["React", "TailwindCSS", "TypeScript", "Python"],
+    link: "#",
+    stars: 86,
+    contributions: 12,
+    pullRequests: 43,
+    role: "contributor",
+  },
+  {
+    id: "task-manager-app",
+    title: "task-manager-app",
+    description:
+      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+    category: ["React", "Express", "MongoDB", "TypeScript"],
+    link: "#",
+    stars: 34,
+    contributions: 8,
+    pullRequests: 27,
+    role: "contributor",
+  },
+  {
+    id: "data-visualization-dashboard",
+    title: "data-visualization-dashboard",
+    description: "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
+    category: ["React", "TypeScript", "Python"],
+    link: "#",
+    stars: 92,
+    contributions: 15,
+    pullRequests: 56,
+    role: "author",
+  },
+  {
+    id: "e-commerce-platform",
+    title: "e-commerce-platform",
+    description: "سرنخ‌ها را بر اساس منطقه، اندازه یا صنعت به نماینده مناسب اختصاص دهید.",
+    category: ["React", "Express", "MongoDB", "TypeScript"],
+    link: "#",
+    stars: 127,
+    contributions: 23,
+    pullRequests: 89,
+    role: "contributor",
+  },
+  {
+    id: "social-media-analyzer",
+    title: "social-media-analyzer",
+    description: "عملکرد هر نماینده و نرخ تبدیل هر مرحله را در یک داشبورد مقایسه کنید.",
+    category: ["Python", "React", "MongoDB"],
+    link: "#",
+    stars: 73,
+    contributions: 9,
+    pullRequests: 31,
+    role: "author",
+  },
+  {
+    id: "weather-forecast-app",
+    title: "weather-forecast-app",
+    description: "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    category: ["React", "TypeScript", "Python"],
+    link: "#",
+    stars: 45,
+    contributions: 7,
+    pullRequests: 22,
+    role: "author",
+  },
+  {
+    id: "inventory-management-system",
+    title: "inventory-management-system",
+    description: "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    category: ["React", "Express", "MongoDB", "TypeScript"],
+    link: "#",
+    stars: 156,
+    contributions: 28,
+    pullRequests: 94,
+    role: "contributor",
+  },
+  {
+    id: "fitness-tracking-platform",
+    title: "fitness-tracking-platform",
+    description: "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+    category: ["React", "TailwindCSS", "MongoDB"],
+    link: "#",
+    stars: 112,
+    contributions: 18,
+    pullRequests: 67,
+    role: "author",
+  },
+  {
+    id: "recipe-sharing-network",
+    title: "recipe-sharing-network",
+    description: "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
+    category: ["React", "Express", "MongoDB"],
+    link: "#",
+    stars: 89,
+    contributions: 14,
+    pullRequests: 41,
+    role: "contributor",
+  },
+  {
+    id: "budget-tracker",
+    title: "budget-tracker",
+    description: "سرنخ‌ها را بر اساس منطقه، اندازه یا صنعت به نماینده مناسب اختصاص دهید.",
+    category: ["React", "TypeScript", "MongoDB"],
+    link: "#",
+    stars: 67,
+    contributions: 11,
+    pullRequests: 35,
+    role: "author",
+  },
+  {
+    id: "learning-management-system",
+    title: "learning-management-system",
+    description: "عملکرد هر نماینده و نرخ تبدیل هر مرحله را در یک داشبورد مقایسه کنید.",
+    category: ["React", "Express", "TypeScript", "MongoDB"],
+    link: "#",
+    stars: 143,
+    contributions: 25,
+    pullRequests: 78,
+    role: "contributor",
+  },
+];
+
+interface Feature295Props {
+  className?: string;
+}
+
+const Feature295 = ({ className }: Feature295Props) => {
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [selectedRole, setSelectedRole] = useState<string>("all");
+  const [showAllProjects, setShowAllProjects] = useState(false);
+
+  const filteredProjects = PROJECTS.filter((project) => {
+    const matchesCategory =
+      selectedCategory === null || project.category.includes(selectedCategory);
+
+    const matchesRole = selectedRole === "all" || project.role === selectedRole;
+
+    return matchesCategory && matchesRole;
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
+      <div className="container">
+        <h1 className="text-center text-3xl font-medium text-balance md:text-2xll">
+          پایپ‌لاین فروش را شفاف کنید
+        </h1>
+        <div className="mt-10">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <div
+              className="-mx-8 flex items-center gap-2 overflow-x-auto px-8"
+              style={{
+                scrollbarWidth: "none",
+              }}
+            >
+              <Badge
+                variant={selectedCategory === null ? "default" : "outline"}
+                onClick={() => setSelectedCategory(null)}
+                className={cn(
+                  "cursor-pointer",
+                  selectedCategory !== null && "bg-background",
+                )}
+              >
+                معاملات را سریع‌تر به قرارداد برسانید
+              </Badge>
+              {CATEGORIES.map((category) => (
+                <Badge
+                  key={category}
+                  variant={
+                    selectedCategory === category ? "default" : "outline"
+                  }
+                  onClick={() => setSelectedCategory(category)}
+                  className={cn(
+                    "cursor-pointer",
+                    selectedCategory !== category && "bg-background",
+                  )}
+                >
+                  {category}
+                </Badge>
+              ))}
+            </div>
+            <Select
+              defaultValue={selectedRole}
+              onValueChange={(value) => setSelectedRole(value)}
+            >
+              <SelectTrigger className="bg-background md:max-w-40 lg:max-w-96">
+                <SelectValue placeholder="هر سرنخ را تا قرارداد دنبال کنید" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">داده مشتری را در یک منبع واحد جمع کنید</SelectItem>
+                <SelectItem value="author">ارتباط با مشتری</SelectItem>
+                <SelectItem value="contributor">هر سرنخ را تا قرارداد دنبال کنید</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {filteredProjects.length > 0 ? (
+            <>
+              <div className="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+                {showAllProjects
+                  ? filteredProjects.map((project) => (
+                      <ProjectCard key={project.id} project={project} />
+                    ))
+                  : filteredProjects
+                      .slice(0, 9)
+                      .map((project) => (
+                        <ProjectCard key={project.id} project={project} />
+                      ))}
+              </div>
+              {filteredProjects.length > 9 && (
+                <div className="mt-10 flex justify-center">
+                  <Button
+                    variant="outline"
+                    onClick={() => setShowAllProjects(!showAllProjects)}
+                  >
+                    {showAllProjects
+                      ? "فروش تیم‌تان را یکجا مدیریت کنید"
+                      : "روابط مشتری را در یک نگاه ببینید"}
+                  </Button>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="mt-16 flex flex-col items-center justify-center text-center">
+              <h3 className="text-xl font-medium">پروفایل ۳۶۰ درجه مشتری</h3>
+              <p className="mt-2 max-w-md text-pretty text-muted-foreground">
+                اتوماسیون مراحل فروش
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature295 };
+
+const ProjectCard = ({ project }: { project: Project }) => {
+  return (
+    <a
+      href={project.link}
+      className="flex flex-col justify-between gap-8 rounded-lg border border-border bg-background p-5 text-start"
+    >
+      <div>
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="text-lg font-medium" dir="rtl">
+            {project.title}
+          </h3>
+          <span className="flex items-center gap-1 text-sm">
+            <Star className="size-4 shrink-0 fill-yellow-500 text-yellow-500" />
+            {project.stars.toLocaleString("fa-IR")}
+          </span>
+        </div>
+        <p className="mt-2 text-pretty text-muted-foreground">
+          {project.description}
+        </p>
+      </div>
+      <div className="flex items-center justify-between gap-2">
+        <Badge variant="outline">{ROLE_LABELS[project.role]}</Badge>
+        <span className="flex items-center gap-3 text-sm text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <GitPullRequest className="size-4 shrink-0" />
+            {project.pullRequests.toLocaleString("fa-IR")}
+          </span>
+        </span>
+      </div>
+    </a>
+  );
+};
diff --git a/blocks/feature297.tsx b/blocks/feature297.tsx
new file mode 100644
index 0000000..7ab0eb4
--- /dev/null
+++ b/blocks/feature297.tsx
@@ -0,0 +1,74 @@
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "privacy",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/photos/kevin-chin-qk4S-s0IX68-unsplash.jpg",
+    imageAlt: "صف اولویت سرنخ‌ها",
+    number: "۰۱",
+    title: "همکاری فروش و بازاریابی",
+  },
+  {
+    id: "multitouch",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/photos/simon-lee-BRHLD4L1Hag-unsplash.jpg",
+    imageAlt: "داشبورد عملکرد فروش",
+    number: "۰۲",
+    title: "اولویت‌بندی سرنخ",
+  },
+  {
+    id: "engine",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/photos/simon-lee-R_6A6CovgIM-unsplash.jpg",
+    imageAlt: "نمودار نرخ تبدیل",
+    number: "تیم فروش",
+    title: "قالب پیشنهاد فروش",
+  },
+] as const;
+
+interface Feature297Props {
+  className?: string;
+}
+
+const Feature297 = ({ className }: Feature297Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "py-32 font-handwriting text-background dark:text-foreground",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="grid gap-4 md:grid-cols-3">
+          {FEATURES.map((feature) => (
+            <a
+              key={feature.id}
+              href={feature.href}
+              className="group relative overflow-hidden rounded-sm"
+            >
+              <img
+                src={feature.image}
+                alt={feature.imageAlt}
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+              />
+              <div className="absolute inset-0 flex flex-col justify-between p-6 text-start">
+                <span className="text-xl tracking-wide">{feature.number}</span>
+                <h2 className="text-xl font-medium tracking-tight text-balance">
+                  {feature.title}
+                </h2>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature297 };
diff --git a/blocks/feature299.tsx b/blocks/feature299.tsx
new file mode 100644
index 0000000..e2cc5d3
--- /dev/null
+++ b/blocks/feature299.tsx
@@ -0,0 +1,73 @@
+import { Box, Globe, Rocket, ShieldUser, User, Users } from "lucide-react";
+
+import { Safari } from "@/components/magicui/safari";
+import { cn } from "@/lib/utils";
+
+const FEATURES = [
+  {
+    id: "repository",
+    title: "ردیابی UTM",
+    icon: Globe,
+  },
+  {
+    id: "contributors",
+    title: "گزارش ROI",
+    icon: User,
+  },
+  {
+    id: "archives",
+    title: "مدیریت کمپین",
+    icon: Box,
+  },
+  {
+    id: "destinations",
+    title: "سگمنت‌بندی مخاطب",
+    icon: Rocket,
+  },
+  {
+    id: "authorization",
+    title: "تحلیل کانال",
+    icon: ShieldUser,
+  },
+  {
+    id: "partnership",
+    title: "اتوماسیون ایمیل",
+    icon: Users,
+  },
+] as const;
+
+interface Feature299Props {
+  className?: string;
+}
+
+const Feature299 = ({ className }: Feature299Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-10 md:gap-16">
+        <p className="mx-auto max-w-5xl text-center text-xl text-pretty md:text-xl">
+          با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+        </p>
+        <ul className="mx-auto grid grid-cols-1 gap-x-10 gap-y-4 text-start md:grid-cols-2">
+          {FEATURES.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <li key={feature.id} className="flex gap-2">
+                <Icon className="mt-1 size-4 shrink-0" />
+                <h3 className="text-pretty">{feature.title}</h3>
+              </li>
+            );
+          })}
+        </ul>
+        <div className="mx-auto w-full max-w-5xl">
+          <Safari
+            url="https://www.ShadcnBlocks"
+            mode="simple"
+            imageSrc="/block-media/shadcnblocks/block/dashboard/dashboard-1.png"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature299 };
diff --git a/blocks/feature3.tsx b/blocks/feature3.tsx
new file mode 100644
index 0000000..bd780ec
--- /dev/null
+++ b/blocks/feature3.tsx
@@ -0,0 +1,104 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Code,
+  GitBranch,
+  List,
+  Play,
+  Sparkles,
+  WandSparkles,
+} from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const cards: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  imageAlt: string;
+}[] = [
+  {
+    icon: Code,
+    title: "ردیابی UTM",
+    description: "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    imageAlt: "تحلیل عملکرد کمپین",
+  },
+  {
+    icon: Play,
+    title: "گزارش ROI",
+    description: "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+    imageAlt: "نمودار ROI",
+  },
+  {
+    icon: GitBranch,
+    title: "مدیریت کمپین",
+    description: "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+  },
+  {
+    icon: List,
+    title: "سگمنت‌بندی مخاطب",
+    description: "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    imageAlt: "تحلیل عملکرد کمپین",
+  },
+  {
+    icon: WandSparkles,
+    title: "تحلیل کانال",
+    description: "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    imageAlt: "نمودار ROI",
+  },
+  {
+    icon: Sparkles,
+    title: "اتوماسیون ایمیل",
+    description: "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+  },
+];
+
+interface Feature3Props {
+  className?: string;
+}
+
+const Feature3 = ({ className }: Feature3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
+          <h1 className="mb-6 text-xl font-semibold text-pretty lg:text-2xll">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </h1>
+
+          <div className="mt-10 grid grid-cols-1 place-items-center gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {cards.map(({ icon: Icon, title, description, imageAlt }) => (
+              <Card key={title}>
+                <CardHeader className="pb-1">
+                  <Icon className="size-4" strokeWidth={1} />
+                </CardHeader>
+                <CardContent className="text-start">
+                  <h2 className="mb-1 text-lg font-semibold">{title}</h2>
+                  <p className="leading-snug text-muted-foreground">
+                    {description}
+                  </p>
+                </CardContent>
+                <CardFooter className="justify-end pe-0 pb-0">
+                  <img
+                    className="h-40 w-full rounded-ts-md object-cover object-center"
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt={imageAlt}
+                  />
+                </CardFooter>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature3 };
diff --git a/blocks/feature30.tsx b/blocks/feature30.tsx
new file mode 100644
index 0000000..ce49f7c
--- /dev/null
+++ b/blocks/feature30.tsx
@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+
+interface Feature30Props {
+  className?: string;
+}
+
+const Feature30 = ({ className }: Feature30Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-16 md:grid md:grid-cols-3 md:gap-10">
+          <div className="order-1 flex h-full items-end rounded-lg bg-muted pt-10 pe-5 md:pt-20 md:pe-10">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+              alt="مدیریت تیکت"
+              className="h-full w-full rounded-te-lg object-cover"
+            />
+          </div>
+          <div className="order-3 rounded-lg bg-muted pt-10 ps-5 md:order-2 md:col-span-2 md:pt-20 md:ps-10">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-8.svg"
+              alt="داشبورد رضایت"
+              className="max-h-[500px] w-full rounded-ts-lg object-cover"
+            />
+          </div>
+          <div className="order-2 -mt-6 md:order-3">
+            <p className="mb-6 text-sm text-muted-foreground md:mb-12">
+              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+            </p>
+            <h3 className="mb-3 text-xl font-medium md:mb-6">پاسخ آماده</h3>
+            <p className="text-muted-foreground">
+              SLA هوشمند
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature30 };
diff --git a/blocks/feature31.tsx b/blocks/feature31.tsx
new file mode 100644
index 0000000..c674cef
--- /dev/null
+++ b/blocks/feature31.tsx
@@ -0,0 +1,68 @@
+import { cn } from "@/lib/utils";
+
+interface Feature31Props {
+  className?: string;
+}
+
+const Feature31 = ({ className }: Feature31Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-20 max-w-3xl text-center">
+          <h1 className="mb-6 text-xl font-medium md:mb-11 md:text-2xll">
+            با هوش مصنوعی سریع‌تر تصمیم بگیرید
+          </h1>
+          <p className="font-medium text-muted-foreground md:text-lg">
+            کارهای تکراری را به AI بسپارید
+          </p>
+        </div>
+        <div className="mx-auto grid max-w-5xl gap-10 md:grid-cols-2">
+          <div className="order-1 flex h-full items-center rounded-lg bg-muted">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+              alt="دستیار هوش مصنوعی"
+              className="aspect-video w-full object-cover"
+            />
+          </div>
+          <div className="order-3 h-full rounded-lg bg-muted md:px-10 md:pt-10">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+              alt="پیشنهادهای هوشمند"
+              className="h-full rounded-t-lg object-cover"
+            />
+          </div>
+          <div className="order-2 -mt-6 max-w-[412px] md:order-3">
+            <p className="mb-6 text-sm text-muted-foreground md:mb-12">
+              مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+            </p>
+            <h3 className="mb-3 text-xl font-medium md:mb-6">
+              طبقه‌بندی خودکار
+            </h3>
+            <p className="mb-6 text-muted-foreground">
+              پیش‌بینی ریزش
+            </p>
+            <a href="#" className="font-medium hover:underline">
+              از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم می‌کند و کیفیت خروجی را بالا می‌برد.
+            </a>
+          </div>
+          <div className="order-4 -mt-6 max-w-[412px] md:order-3">
+            <p className="mb-6 text-sm text-muted-foreground md:mb-12">
+              سیستم با داده سازمان شما یاد می‌گیرد و هر بار پیشنهادهای دقیق‌تری برای بهبود نتیجه ارائه می‌دهد.
+            </p>
+            <h3 className="mb-3 text-xl font-medium md:mb-6">
+              جستجوی معنایی
+            </h3>
+            <p className="mb-6 text-muted-foreground">
+              تولید محتوا
+            </p>
+            <a href="#" className="font-medium hover:underline">
+              مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature31 };
diff --git a/blocks/feature312.tsx b/blocks/feature312.tsx
new file mode 100644
index 0000000..6134cf0
--- /dev/null
+++ b/blocks/feature312.tsx
@@ -0,0 +1,148 @@
+import { CirclePlus } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type StatCard = {
+  value: string;
+  label: string;
+  description?: string;
+  logos?: string[];
+};
+
+interface Feature312Props {
+  sectionLabel?: string;
+  heading: string;
+  subheading?: string;
+  descriptionHeading?: string;
+  description?: string;
+  image: string;
+  imageAlt?: string;
+  stats: StatCard[];
+  className?: string;
+}
+
+const Feature312 = ({
+  sectionLabel = "فرایند هوشمند",
+  heading = "فرایندها را استاندارد و سریع کنید",
+  subheading = "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+  descriptionHeading = "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+  description = "قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.",
+  image = "/block-media/shadcnblocks/block/guri3/img9.jpeg",
+  imageAlt = "سازنده گردش‌کار",
+  stats = [
+    {
+      value: "اتوماسیون",
+      label: "گردش‌کار",
+      description:
+        "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    },
+    {
+      value: "صرفه‌جویی زمان",
+      label: "فرایند هوشمند",
+      logos: [
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      ],
+    },
+  ],
+  className,
+}: Feature312Props) => {
+  const logoAlts = ["اتوماسیون را در کل سازمان یکپارچه کنید", "اتوماسیون", "گردش‌کار"];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted py-24", className)}>
+      <div className="container mx-auto flex max-w-7xl flex-col gap-2 md:gap-30">
+        <div className="flex flex-col gap-2 md:grid md:auto-rows-[minmax(0,1fr)] md:grid-cols-[repeat(4,minmax(50px,1fr))] md:grid-rows-[repeat(1,minmax(0,1fr))] md:gap-8">
+          <div className="flex items-center gap-2 text-xs font-bold md:text-sm">
+            <CirclePlus size={20} className="shrink-0" />
+            <span>{sectionLabel}</span>
+          </div>
+
+          <div className="col-span-3 max-w-3xl text-right">
+            <h2 className="text-xl leading-tight font-bold tracking-tight text-balance md:text-xl">
+              {heading}
+              <span className="block font-semibold text-muted-foreground">
+                {subheading}
+              </span>
+            </h2>
+          </div>
+        </div>
+
+        <div className="relative flex flex-col gap-4 md:grid md:auto-rows-[minmax(0,1fr)] md:grid-cols-[repeat(4,minmax(50px,1fr))] md:grid-rows-[repeat(1,minmax(0,1fr))] md:gap-10">
+          <div className="relative h-full w-full overflow-hidden rounded-2xl border-2 border-muted bg-background md:col-span-2">
+            <img
+              src={image}
+              alt={imageAlt}
+              className="aspect-video h-full w-full object-cover"
+            />
+            <div className="absolute top-10 end-10">
+              <CirclePlus size={20} />
+            </div>
+          </div>
+
+          <div className="col-span-2 flex flex-col gap-16">
+            <div className="w-5/6">
+              <p className="col-span-3 text-right text-xl font-medium text-pretty">
+                {descriptionHeading}
+                <span className="text-muted-foreground">{description}</span>
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 gap-1 md:grid-cols-2">
+              <div className="order-1 rounded-2xl bg-background p-8 md:order-1">
+                <div className="flex items-start justify-between">
+                  <div className="text-xs text-muted-foreground">۱</div>
+                  <div className="text-3xl font-bold md:text-2xll">
+                    {stats[0]?.value}
+                  </div>
+                </div>
+              </div>
+
+              <div className="order-3 rounded-2xl bg-background p-8 md:order-2">
+                <div className="flex items-start justify-between">
+                  <div className="text-xs text-muted-foreground">۲</div>
+                  <div className="text-3xl font-bold md:text-2xll">
+                    {stats[1]?.value}
+                  </div>
+                </div>
+              </div>
+
+              <div className="order-2 flex min-h-80 flex-col justify-between gap-16 rounded-2xl bg-background p-8 md:order-3">
+                <div className="text-right">
+                  <div className="text-lg font-bold text-pretty md:w-3/4">
+                    {stats[0]?.label}
+                  </div>
+                </div>
+                <div className="text-right text-pretty text-muted-foreground">
+                  {stats[0]?.description}
+                </div>
+              </div>
+
+              <div className="order-4 flex h-80 h-full flex-col justify-between gap-16 rounded-2xl bg-background p-8 md:order-4">
+                <div className="text-right">
+                  <div className="text-lg font-bold text-pretty md:w-3/4">
+                    {stats[1]?.label}
+                  </div>
+                </div>
+                <div className="flex justify-start gap-3 text-muted-foreground">
+                  {stats[1]?.logos?.map((logo, index) => (
+                    <div key={logo}>
+                      <img
+                        src={logo}
+                        alt={logoAlts[index] ?? `لوگوی شرکت همکار ${index + 1}`}
+                        className="h-6 w-14"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature312 };
diff --git a/blocks/feature313.tsx b/blocks/feature313.tsx
new file mode 100644
index 0000000..b6e16a8
--- /dev/null
+++ b/blocks/feature313.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Play } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+interface Feature313Props {
+  className?: string;
+  imageSrc: string;
+  imageAlt: string;
+  videoUrl?: string;
+  videoCaption: string;
+  videoSecondaryCaption: string;
+  cards: {
+    id: string;
+    title: string;
+    image: string;
+    className?: string;
+  }[];
+}
+
+const Feature313 = ({
+  className,
+  imageSrc = "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+  imageAlt = "گزارش عملکرد",
+  videoUrl = "/block-media/shadcnblocks/block/man-1.mp4",
+  videoCaption = "داده پراکنده را به تصمیم تبدیل کنید",
+  videoSecondaryCaption = "تحلیل داده",
+  cards = [
+    {
+      id: "growth",
+      title: "گزارش زمان‌بندی‌شده",
+      image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    },
+    {
+      id: "design",
+      title: "تحلیل کوHORT",
+      image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    },
+    {
+      id: "support",
+      title: "مقایسه دوره‌ای",
+      image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    },
+    {
+      id: "partnerships",
+      title: "خروجی گزارش",
+      image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    },
+  ],
+}: Feature313Props) => {
+  const getYouTubeVideoId = (url: string) => {
+    const regExp =
+      /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    const match = url.match(regExp);
+    return match && match[2].length === 11 ? match[2] : null;
+  };
+
+  const youtubeId = videoUrl ? getYouTubeVideoId(videoUrl) : null;
+  const isYouTube = !!youtubeId;
+  const isMobile = useIsMobile();
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted py-24", className)}>
+      <div className="container flex flex-col gap-2">
+        <div className="grid grid-cols-1 gap-1 lg:grid-cols-4">
+          {cards.map((card, index) => (
+            <Card key={card.id} className="border-none p-10 text-start shadow-none">
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex gap-1">
+                  {cards.map((_, circleIndex) => (
+                    <div
+                      key={circleIndex}
+                      className={`${index >= circleIndex ? "bg-primary" : "bg-muted"} size-2 rounded-full`}
+                    />
+                  ))}
+                </div>
+                <div className="text-sm font-medium text-muted-foreground">
+                  {(index + 1).toLocaleString("fa-IR").padStart(2, "۰")}
+                </div>
+              </div>
+              <div className="flex flex-col gap-4 md:flex-row md:justify-between">
+                <div className="aspect-square size-12 shrink-0">
+                  <img
+                    src={card.image}
+                    alt={card.title}
+                    className="aspect-square h-full w-full rounded-lg object-cover"
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <h3 className="text-md leading-tight font-medium text-pretty">
+                    {card.title}
+                  </h3>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        <Dialog>
+          <DialogTrigger asChild>
+            <motion.div
+              className="group relative aspect-video min-h-72 cursor-pointer overflow-hidden rounded-lg"
+              whileHover="hover"
+              initial="initial"
+            >
+              <motion.div
+                className="absolute inset-0"
+                variants={{
+                  initial: { filter: "blur(0px)" },
+                  hover: { filter: "blur(4px)" },
+                }}
+                transition={{ duration: 0.3, ease: "easeOut" }}
+              >
+                <motion.img
+                  src={imageSrc}
+                  alt={imageAlt}
+                  className="h-full w-full rounded-lg object-cover"
+                  variants={{
+                    initial: { scale: 1 },
+                    hover: { scale: 1.1 },
+                  }}
+                  transition={{ duration: 0.3, ease: "easeOut" }}
+                />
+              </motion.div>
+              <div className="bg-opacity-20 absolute inset-0 flex items-center justify-center">
+                <motion.div
+                  className="flex flex-col items-center justify-center gap-2 md:flex-row"
+                  variants={{
+                    initial: { gap: "0.5rem" },
+                    hover: { gap: "0rem" },
+                  }}
+                  transition={{ duration: 0.3, ease: "easeOut" }}
+                >
+                  <motion.div
+                    variants={{
+                      initial: { x: 0, scale: 1 },
+                      hover: {
+                        x: isMobile ? 0 : "-75%",
+                        scale: 1.2,
+                      },
+                    }}
+                    transition={{ duration: 0.3, ease: "easeOut" }}
+                  >
+                    <Button
+                      size="lg"
+                      className="size-14 rounded-full bg-secondary hover:bg-secondary lg:size-20"
+                    >
+                      <Play className="ms-0.5 size-5 text-primary md:size-7" />
+                      <span className="sr-only">{videoCaption}</span>
+                    </Button>
+                  </motion.div>
+
+                  <motion.div
+                    className="text-center md:text-start"
+                    variants={{
+                      initial: { opacity: 1 },
+                      hover: { opacity: 0, transform: "-translate-y-3" },
+                    }}
+                    transition={{ duration: 0.3, ease: "easeOut" }}
+                  >
+                    <div className="px-4 py-2">
+                      <p className="text-lg font-bold text-secondary">
+                        {videoCaption}
+                      </p>
+                      <p className="text-lg font-medium text-muted-foreground">
+                        {videoSecondaryCaption}
+                      </p>
+                    </div>
+                  </motion.div>
+                </motion.div>
+              </div>
+            </motion.div>
+          </DialogTrigger>
+          <DialogContent className="w-full border-none bg-black p-0 md:max-w-6xl md:p-1">
+            <DialogTitle className="sr-only">{videoCaption}</DialogTitle>
+            <DialogDescription className="sr-only">
+              {videoSecondaryCaption}  {videoCaption}
+            </DialogDescription>
+            <div className="aspect-video w-full">
+              {isYouTube ? (
+                <iframe
+                  className="h-full w-full"
+                  src={`https://www.youtube.com/embed/${youtubeId}?autoplay=1`}
+                  title="شاخص‌های کلیدی را یکجا ببینید"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                />
+              ) : (
+                <video
+                  className="h-full w-full rounded-lg"
+                  controls
+                  autoPlay
+                  src={videoUrl}
+                >
+                  ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.
+                </video>
+              )}
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </section>
+  );
+};
+
+export { Feature313 };
diff --git a/blocks/feature314.tsx b/blocks/feature314.tsx
new file mode 100644
index 0000000..ed8940c
--- /dev/null
+++ b/blocks/feature314.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { ArrowUpRight, Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Feature314Props {
+  smallCards: {
+    id: string;
+    image: string;
+    topNote: string;
+    title: string;
+    summary: string;
+    url: string;
+  }[];
+  bigCard: {
+    image: string;
+    label: string;
+    title: string;
+    url: string;
+  };
+  heading: string;
+  secondaryHeading?: string;
+  description?: string;
+  button: {
+    text: string;
+    url: string;
+  };
+  className?: string;
+}
+
+const Feature314 = ({
+  heading = "زمان حل مسئله را کوتاه کنید",
+  button = {
+    text: "اعلان تیم",
+    url: "#",
+  },
+  smallCards = [
+    {
+      id: "ux-2025",
+      image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      topNote: "تیکت",
+      title: "پاسخ آماده",
+      summary:
+        "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+      url: "#",
+    },
+    {
+      id: "design-systems",
+      image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      topNote: "رضایت مشتری",
+      title: "SLA هوشمند",
+      summary:
+        "پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.",
+      url: "#",
+    },
+  ],
+  bigCard = {
+    image:
+      "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
+    label: "studio®",
+    title: "نظرسنجی رضایت",
+    url: "#",
+  },
+  className,
+}: Feature314Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-muted py-32 dark:bg-background", className)}
+    >
+      <div className="container">
+        <div className="flex flex-col gap-12">
+          <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end md:gap-8">
+            <h2 className="max-w-lg flex-1 text-3xl font-bold whitespace-pre-line text-balance md:text-2xll">
+              {heading}
+            </h2>
+            <Button asChild className="gap-2">
+              <a href={button.url}>
+                {button.text}
+                <ArrowUpRight className="size-4 shrink-0 rtl:-scale-x-100" />
+              </a>
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-4">
+            {smallCards.map((card) => (
+              <Card
+                key={card.id}
+                className="col-span-1 rounded-xl border-0 p-4 text-start shadow-none"
+              >
+                <div className="flex h-full w-full flex-col justify-between gap-4">
+                  <div className="relative w-full">
+                    <img
+                      src={card.image}
+                      alt={card.title}
+                      className="size-24 rounded-xl lg:size-32 dark:invert"
+                    />
+                    <div className="absolute top-0 end-0 flex items-start justify-end">
+                      <p className="flex items-center gap-2 text-sm font-bold">
+                        <Plus
+                          size={20}
+                          className="rounded-full bg-secondary p-0.5"
+                        />
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-4">
+                    <div>
+                      <span className="text-xs text-muted-foreground">
+                        {card.topNote}
+                      </span>
+                      <h3 className="mt-0.5 text-xl font-medium md:text-xl">
+                        {card.title}
+                      </h3>
+                    </div>
+                    <p className="text-pretty text-sm text-muted-foreground">
+                      {card.summary}
+                    </p>
+                  </div>
+                </div>
+              </Card>
+            ))}
+            <Card className="min-h-[30rem] rounded-xl border-0 py-0 pt-0 shadow-none md:col-span-2 md:min-h-[32rem]">
+              <a href={bigCard.url} target="_blank" className="block h-full">
+                <div className="relative h-full w-full overflow-hidden rounded-xl">
+                  <img
+                    src={bigCard.image}
+                    alt={bigCard.title}
+                    className="aspect-4/3 h-full w-full object-cover transition-transform duration-300 ease-out hover:scale-105"
+                  />
+                  <div className="absolute top-0 flex w-full items-center justify-between p-8">
+                    <div className="text-lg font-bold">{bigCard.label}</div>
+                    <Plus
+                      size={20}
+                      className="rounded-full bg-secondary p-0.5"
+                    />
+                  </div>
+                  <div className="absolute bottom-0 flex w-full items-end justify-end bg-gradient-to-t from-black/80 via-black/40 to-transparent p-10 text-end">
+                    <h3 className="w-2/3 text-xl font-semibold text-white text-balance md:text-3xl lg:text-xl">
+                      {bigCard.title}
+                    </h3>
+                  </div>
+                </div>
+              </a>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature314 };
diff --git a/blocks/feature32.tsx b/blocks/feature32.tsx
new file mode 100644
index 0000000..4ef9781
--- /dev/null
+++ b/blocks/feature32.tsx
@@ -0,0 +1,66 @@
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    quote:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    name: "کار گروهی",
+    role: "همکاری تیمی",
+  },
+  {
+    quote:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    name: "مدیریت پروژه",
+    role: "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+  },
+  {
+    quote:
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+    name: "هم‌راستایی",
+    role: "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+  },
+];
+
+interface Feature32Props {
+  className?: string;
+}
+
+const Feature32 = ({ className }: Feature32Props) => {
+  const [featured, ...rest] = testimonials;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-14 text-center text-xl font-medium lg:text-2xll">
+          همکاری از راه دور را ساده کنید
+        </h2>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <div className="rounded-lg bg-accent p-16 md:col-span-2 lg:col-span-2 lg:row-span-2">
+            <div className="flex h-full flex-col justify-between gap-14">
+              <q className="pt-8 text-xl font-medium lg:pt-14 lg:text-xl">
+                {featured.quote}
+              </q>
+              <div className="text-sm">
+                <p className="font-semibold">{featured.name}</p>
+                <p className="text-muted-foreground">{featured.role}</p>
+              </div>
+            </div>
+          </div>
+          {rest.map((item) => (
+            <div key={item.name} className="rounded-lg bg-accent p-10">
+              <div className="flex flex-col gap-14">
+                <q className="text-lg font-medium">{item.quote}</q>
+                <div className="text-sm">
+                  <p className="font-semibold">{item.name}</p>
+                  <p className="text-muted-foreground">{item.role}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature32 };
diff --git a/blocks/feature322.tsx b/blocks/feature322.tsx
new file mode 100644
index 0000000..66732d5
--- /dev/null
+++ b/blocks/feature322.tsx
@@ -0,0 +1,363 @@
+"use client";
+
+import type { MotionValue } from "framer-motion";
+import {
+  AnimatePresence,
+  motion,
+  useScroll,
+  useTransform,
+} from "framer-motion";
+import React, { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const getAnimationRange = (index: number, totalFeatures: number) => {
+  const cardPosition = index / totalFeatures;
+
+  const range = [0, cardPosition, 1];
+
+  return range;
+};
+
+interface Statistics {
+  value: string;
+  label: string;
+}
+
+interface Feature {
+  id: string;
+  title: string;
+  subtitle: string;
+  statistics: Statistics;
+  visual: string;
+}
+
+interface Testimonial {
+  quote: string;
+  companyLogo: string;
+  author: string;
+  designation: string;
+}
+
+interface AnimationWrapperProps {
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+  duration?: number;
+}
+
+const AnimationWrapper = ({
+  children,
+  delay = 0,
+  className,
+  duration = 0.3,
+}: AnimationWrapperProps) => {
+  return (
+    <motion.div
+      initial={{
+        x: -10,
+        opacity: 0,
+      }}
+      animate={{
+        x: 0,
+        opacity: 1,
+      }}
+      exit={{
+        x: 10,
+        opacity: 0,
+      }}
+      transition={{
+        duration: duration,
+        ease: "easeOut",
+        delay: delay,
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface TestimonialCardProps {
+  testimonial: Testimonial;
+}
+
+const TestimonialCard = ({ testimonial }: TestimonialCardProps) => {
+  return (
+    <div className="hidden h-96 flex-1/2 shrink-0 flex-col items-start justify-end rounded-lg border bg-muted p-6 text-start sm:flex lg:h-full">
+      <img
+        src={testimonial.companyLogo}
+        alt={testimonial.author}
+        className="h-8 dark:invert"
+      />
+      <p className="mt-8 text-lg leading-tight text-pretty">
+        «{testimonial.quote}»
+      </p>
+      <p className="mt-4 text-sm font-medium">
+         {testimonial.author}{" "}
+        <span className="font-light">{testimonial.designation}</span>
+      </p>
+    </div>
+  );
+};
+
+interface ScrollProgressIndicatorProps {
+  totalFeatures: number;
+  activeIndex: number;
+  scrollYProgress: MotionValue<number>;
+}
+
+const ScrollProgressIndicator = ({
+  totalFeatures,
+  activeIndex,
+  scrollYProgress,
+}: ScrollProgressIndicatorProps) => {
+  const range = getAnimationRange(
+    Math.max(0, activeIndex - 0.5),
+    totalFeatures,
+  );
+  const nextRange = getAnimationRange(
+    Math.min(totalFeatures, activeIndex + 0.5),
+    totalFeatures,
+  );
+
+  const currentRange = [range[1], nextRange[1]];
+
+  const width = useTransform(scrollYProgress, currentRange, ["0%", "100%"]);
+
+  return (
+    <div className="mt-14 hidden w-fit items-center justify-center gap-3 rounded-full bg-muted px-6 py-4 lg:flex">
+      {Array.from({ length: totalFeatures }).map((_, index) => {
+        return (
+          <div
+            key={`scroll-progress-indicator-${index}`}
+            className={cn(
+              "relative h-1.5 w-1.5 rounded-full bg-foreground/20",
+              activeIndex === index && "w-10",
+              activeIndex > index && "bg-foreground",
+            )}
+          >
+            {activeIndex === index && (
+              <motion.div
+                style={{
+                  width,
+                }}
+                className="absolute top-0 start-0 h-full rounded-full bg-foreground"
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+interface FeatureCardProps {
+  feature: Feature;
+  index: number;
+  testimonial: Testimonial;
+  totalFeatures: number;
+  scrollYProgress: MotionValue<number>;
+}
+
+const FeatureCard = ({
+  feature,
+  index,
+  testimonial,
+  totalFeatures,
+  scrollYProgress,
+}: FeatureCardProps) => {
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col-reverse justify-between gap-8 px-10 py-4 text-start lg:absolute lg:top-1/2 lg:start-1/2 lg:h-full lg:-translate-x-1/2 lg:-translate-y-1/2 lg:flex-row lg:items-center lg:border-s",
+      )}
+    >
+      <div className="flex flex-2/5 flex-col gap-8 lg:h-full lg:gap-0">
+        <div className="flex flex-col gap-1">
+          <AnimationWrapper>
+            <p className="text-xl font-semibold">{feature.title}</p>
+          </AnimationWrapper>
+          <AnimationWrapper delay={0.15}>
+            <p className="font-light text-pretty">{feature.subtitle}</p>
+          </AnimationWrapper>
+        </div>
+
+        <ScrollProgressIndicator
+          totalFeatures={totalFeatures}
+          activeIndex={index}
+          scrollYProgress={scrollYProgress}
+        />
+
+        <div className="flex flex-col gap-1 lg:mt-auto">
+          <AnimationWrapper delay={0.3}>
+            <p className="text-2xll font-medium">{feature.statistics.value}</p>
+          </AnimationWrapper>
+          <AnimationWrapper delay={0.45}>
+            <p className="text-sm font-light">{feature.statistics.label}</p>
+          </AnimationWrapper>
+        </div>
+      </div>
+
+      <AnimationWrapper
+        duration={0.6}
+        className="flex h-96 w-full flex-3/5 items-center gap-6 lg:h-full"
+      >
+        <img
+          src={feature.visual}
+          alt={feature.title}
+          className={cn(
+            "h-96 w-full overflow-hidden rounded-lg border object-cover lg:h-full",
+            index === 0 && "flex-1/2",
+          )}
+        />
+
+        {index === 0 && <TestimonialCard testimonial={testimonial} />}
+      </AnimationWrapper>
+    </div>
+  );
+};
+
+interface Feature322Props {
+  features?: Feature[];
+  testimonial?: Testimonial;
+  className?: string;
+}
+
+const DEFAULT_FEATURES: Feature[] = [
+  {
+    id: "performance",
+    title: "طبقه‌بندی خودکار",
+    subtitle: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    statistics: {
+      value: "اتوماسیون AI",
+      label: "دستیار کسب‌وکار",
+    },
+    visual:
+      "/block-media/shadcnblocks/block/photos/christopher-gower-vjMgqUkS8q8-unsplash.jpg",
+  },
+  {
+    id: "security",
+    title: "پیش‌بینی ریزش",
+    subtitle: "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    statistics: {
+      value: "هوش مصنوعی",
+      label: "پیشنهاد هوشمند",
+    },
+    visual:
+      "/block-media/shadcnblocks/block/photos/daniel-leone-g30P1zcOzXo-unsplash.jpg",
+  },
+  {
+    id: "analytics",
+    title: "جستجوی معنایی",
+    subtitle: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    statistics: {
+      value: "اتوماسیون AI",
+      label: "دستیار کسب‌وکار",
+    },
+    visual:
+      "/block-media/shadcnblocks/block/photos/jason-leung-6uoj7DL6BFk-unsplash.jpg",
+  },
+  {
+    id: "integration",
+    title: "تولید محتوا",
+    subtitle: "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    statistics: {
+      value: "هوش مصنوعی",
+      label: "پیشنهاد هوشمند",
+    },
+    visual:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
+  },
+];
+
+const DEFAULT_TESTIMONIAL: Testimonial = {
+  quote:
+    "مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.",
+  companyLogo:
+    "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+  author: "اتوماسیون AI",
+  designation: "با هوش مصنوعی سریع‌تر تصمیم بگیرید",
+};
+
+const Feature322 = ({
+  className,
+  features = DEFAULT_FEATURES,
+  testimonial = DEFAULT_TESTIMONIAL,
+}: Feature322Props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    container: ref,
+  });
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    const unsubscribe = scrollYProgress.on("change", (latest) => {
+      let minDistance = Infinity;
+      let temp = 0;
+      features.forEach((_, index) => {
+        const range = getAnimationRange(index, features.length);
+        const position = range[1];
+        const distance = Math.abs(latest - position);
+        if (distance < minDistance) {
+          minDistance = distance;
+          temp = index;
+        }
+      });
+      setActiveIndex(temp);
+    });
+
+    return () => unsubscribe();
+  }, [features, scrollYProgress]);
+
+  return (
+    <section
+      ref={ref}
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen overflow-y-auto", className)}
+    >
+      <div className="container">
+        <div className="sticky top-0 hidden h-screen w-full flex-col items-center justify-center gap-10 lg:flex">
+          <div className="relative h-full w-full lg:h-1/2">
+            <AnimatePresence mode="popLayout">
+              <FeatureCard
+                key={features[activeIndex]?.id ?? `feature-${activeIndex}`}
+                index={activeIndex}
+                feature={features[activeIndex]}
+                testimonial={testimonial}
+                totalFeatures={features.length}
+                scrollYProgress={scrollYProgress}
+              />
+            </AnimatePresence>
+          </div>
+        </div>
+        <div className="flex w-full flex-col items-center justify-center gap-10 overflow-y-auto py-32 lg:hidden">
+          <div className="relative h-full w-full lg:h-1/2">
+            {features.map((feature, index) => {
+              return (
+                <FeatureCard
+                  key={feature.id}
+                  index={index}
+                  feature={feature}
+                  testimonial={testimonial}
+                  totalFeatures={features.length}
+                  scrollYProgress={scrollYProgress}
+                />
+              );
+            })}
+          </div>
+        </div>
+
+        <div
+          style={{
+            height: `${features.length * 75}vh`,
+          }}
+          className="hidden lg:block"
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Feature322 };
diff --git a/blocks/feature323.tsx b/blocks/feature323.tsx
new file mode 100644
index 0000000..1ddf9e8
--- /dev/null
+++ b/blocks/feature323.tsx
@@ -0,0 +1,440 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  PlusCircle,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+interface FeatureItem {
+  id: string;
+  image: string;
+  title: string;
+  description: string;
+}
+
+interface ControlsProps {
+  handleNext: () => void;
+  handlePrevious: () => void;
+  isPrevioIRRisabled: boolean;
+  isNextDisabled: boolean;
+}
+
+const Controls = ({
+  handleNext,
+  handlePrevious,
+  isPrevioIRRisabled,
+  isNextDisabled,
+}: ControlsProps) => {
+  return (
+    <div className="hidden flex-col items-start gap-8 lg:flex">
+      <Button
+        variant="outline"
+        size="icon"
+        className="rounded-full !bg-background/50 hover:!bg-background/100 [&_svg:not([class*='size-'])]:size-6"
+        onClick={handlePrevious}
+        disabled={isPrevioIRRisabled}
+      >
+        <ChevronUp />
+      </Button>
+      <Button
+        variant="outline"
+        size="icon"
+        className="rounded-full !bg-background/50 hover:!bg-background/100 [&_svg:not([class*='size-'])]:size-6"
+        onClick={handleNext}
+        disabled={isNextDisabled}
+      >
+        <ChevronDown />
+      </Button>
+    </div>
+  );
+};
+
+interface FeatureCardProps {
+  feature: FeatureItem;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+const FeatureCard = ({ feature, isActive, onClick }: FeatureCardProps) => {
+  const variants = {
+    initial: {
+      opacity: 0,
+    },
+    animate: {
+      opacity: 1,
+    },
+    exit: {
+      opacity: 0,
+    },
+  };
+
+  return (
+    <AnimatePresence mode="popLayout">
+      <motion.div
+        layout
+        transition={{
+          layout: {
+            duration: 0.4,
+            ease: "easeOut",
+          },
+        }}
+        style={{
+          borderRadius: "24px",
+        }}
+        className="flex cursor-pointer items-start gap-4 overflow-hidden bg-background text-start md:w-fit md:max-w-sm"
+        onClick={onClick}
+      >
+        {isActive ? (
+          <motion.div
+            layout
+            variants={variants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            key={`feature-description-active-${feature.id}`}
+            transition={{
+              duration: 0.4,
+              delay: 0.3,
+              ease: "easeOut",
+            }}
+            className="p-6 text-sm md:p-8 md:text-base"
+          >
+            <p className="text-pretty">
+              <span className="font-semibold">{feature.title}.</span>{" "}
+              <span>{feature.description}</span>
+            </p>
+          </motion.div>
+        ) : (
+          <motion.div
+            layout
+            variants={variants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            key={`feature-description-inactive-${feature.id}`}
+            transition={{
+              duration: 0.4,
+              delay: 0.2,
+              ease: "easeOut",
+            }}
+            className={cn(
+              "flex h-fit shrink-0 items-center gap-4 text-sm md:py-3.5 md:ps-3 md:pe-6 md:text-base",
+              !isActive && "h-0 w-0 md:h-auto md:w-auto",
+            )}
+            style={{
+              height: "auto",
+              lineHeight: "normal",
+            }}
+          >
+            <PlusCircle strokeWidth={1.5} className="shrink-0" />
+            <p className="shrink-0 font-semibold">{feature.title}</p>
+          </motion.div>
+        )}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+interface FeaturesDesktopProps {
+  features: FeatureItem[];
+  handleNext: () => void;
+  handlePrevious: () => void;
+  activeIndex: number;
+  handleFeatureClick: (index: number) => void;
+  isPrevioIRRisabled: boolean;
+  isNextDisabled: boolean;
+}
+
+const FeaturesDesktop = ({
+  features,
+  handleNext,
+  handlePrevious,
+  activeIndex,
+  handleFeatureClick,
+  isPrevioIRRisabled,
+  isNextDisabled,
+}: FeaturesDesktopProps) => {
+  return (
+    <div className="relative z-10 hidden items-center gap-8 md:flex">
+      <Controls
+        handleNext={handleNext}
+        handlePrevious={handlePrevious}
+        isPrevioIRRisabled={isPrevioIRRisabled}
+        isNextDisabled={isNextDisabled}
+      />
+      <div className="flex flex-col gap-4">
+        {features.map((feature, index) => {
+          return (
+            <FeatureCard
+              key={feature.id}
+              feature={feature}
+              isActive={index === activeIndex}
+              onClick={() => handleFeatureClick(index)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+interface FeatureMobileProps {
+  features: FeatureItem[];
+  handleNext: () => void;
+  handlePrevious: () => void;
+  activeIndex: number;
+  direction: 1 | -1;
+  isPrevioIRRisabled: boolean;
+  isNextDisabled: boolean;
+}
+
+const FeaturesMobile = ({
+  features,
+  handleNext,
+  handlePrevious,
+  activeIndex,
+  direction,
+  isPrevioIRRisabled,
+  isNextDisabled,
+}: FeatureMobileProps) => {
+  const variants = {
+    initial: (dir: 1 | -1) => ({
+      opacity: 0,
+      scale: 0.6,
+      x: `${dir * -50}%`,
+    }),
+    animate: {
+      opacity: 1,
+      scale: 1,
+      x: 0,
+    },
+    exit: (dir: 1 | -1) => ({
+      opacity: 0,
+      scale: 0.6,
+      x: `${dir * 50}%`,
+    }),
+  };
+
+  return (
+    <div className="absolute bottom-6 start-0 z-10 flex w-full items-end justify-between gap-6 px-6 md:hidden">
+      <Button
+        variant="outline"
+        size="icon"
+        className="rounded-full !bg-background/100 [&_svg:not([class*='size-'])]:size-6"
+        onClick={handlePrevious}
+        disabled={isPrevioIRRisabled}
+      >
+        <ChevronLeft className="rtl:rotate-180" />
+      </Button>
+      <AnimatePresence mode="popLayout" custom={direction}>
+        <motion.div
+          key={`feature-mobile-${features[activeIndex]?.id}`}
+          variants={variants}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          custom={direction}
+          transition={{
+            duration: 0.2,
+            ease: "easeOut",
+          }}
+          className="h-full w-full object-cover"
+        >
+          <FeatureCard
+            feature={features[activeIndex]}
+            isActive={true}
+            onClick={() => {}}
+          />
+        </motion.div>
+      </AnimatePresence>
+
+      <Button
+        variant="outline"
+        size="icon"
+        className="rounded-full !bg-background/100 [&_svg:not([class*='size-'])]:size-6"
+        onClick={handleNext}
+        disabled={isNextDisabled}
+      >
+        <ChevronRight className="rtl:rotate-180" />
+      </Button>
+    </div>
+  );
+};
+
+const DEFAULT_FEATURES: FeatureItem[] = [
+  {
+    id: "smart-watches",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/klim-musalimov-DAGss-dkVOs-unsplash-2.jpg",
+    title: "تقویم تیمی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+  },
+  {
+    id: "fitness-tracking",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/klim-musalimov-IGO10LkxP_g-unsplash-2.jpg",
+    title: "اشتراک فایل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+  },
+  {
+    id: "gaming-consoles",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/dennis-cortes-cL7xovIO7sw-unsplash-3.jpg",
+    title: "منشن و بحث",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+  },
+  {
+    id: "premium-laptops",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Sleek-Laptop-Silhouette-1.png",
+    title: "ردیابی زمان",
+    description:
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+  },
+  {
+    id: "phone-accessories",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-fCO3tBcnkhg-unsplash-1.jpg",
+    title: "نقش و دسترسی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+  },
+  {
+    id: "work-anywhere",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Hands-Typing-on-Laptop-1.png",
+    title: "چک‌لیست تحویل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+  },
+];
+
+interface Feature323Props {
+  heading?: string;
+  features?: FeatureItem[];
+  className?: string;
+}
+
+const Feature323 = ({
+  className,
+  heading = "همکاری از راه دور را ساده کنید",
+  features = DEFAULT_FEATURES,
+}: Feature323Props) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [direction, setDirection] = useState<1 | -1>(1);
+
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
+  const handleNext = () => {
+    setDirection(1);
+    if (activeIndex !== features.length - 1) {
+      setActiveIndex((prevIndex) => prevIndex + 1);
+    }
+  };
+
+  const handlePrevious = () => {
+    setDirection(-1);
+    if (activeIndex !== 0) {
+      setActiveIndex((prevIndex) => prevIndex - 1);
+    }
+  };
+
+  const handleFeatureClick = (index: number) => {
+    setDirection(index > activeIndex ? 1 : -1);
+    setActiveIndex(index);
+  };
+
+  const xOffset = !isMobile ? 50 : 15;
+  const yOffset = !isMobile ? 15 : 5;
+  const scale = !isMobile ? 0.6 : 0.8;
+
+  const variants = {
+    initial: (dir: 1 | -1) => ({
+      opacity: 0,
+      scale: scale,
+      filter: "blur(20px)",
+      x: `${dir * -xOffset}%`,
+      y: `${dir * yOffset}%`,
+    }),
+    animate: {
+      opacity: 1,
+      scale: 1,
+      filter: "blur(0px)",
+      x: 0,
+      y: 0,
+    },
+    exit: (dir: 1 | -1) => ({
+      opacity: 0,
+      scale: scale,
+      x: `${dir * xOffset}%`,
+      y: `${dir * -yOffset}%`,
+      filter: "blur(20px)",
+    }),
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container space-y-20">
+        <div className="relative start-1/2 max-w-5xl -translate-x-1/2">
+          <h2 className="text-xl font-semibold text-balance sm:text-2xll">
+            {heading}
+          </h2>
+        </div>
+        <div className="relative h-full min-h-[60vh] w-full overflow-hidden rounded-4xl bg-muted px-8 py-8 md:min-h-full md:py-20">
+          <FeaturesDesktop
+            features={features}
+            handleNext={handleNext}
+            handlePrevious={handlePrevious}
+            activeIndex={activeIndex}
+            handleFeatureClick={handleFeatureClick}
+            isPrevioIRRisabled={activeIndex === 0}
+            isNextDisabled={activeIndex === features.length - 1}
+          />
+          <FeaturesMobile
+            features={features}
+            handleNext={handleNext}
+            handlePrevious={handlePrevious}
+            activeIndex={activeIndex}
+            direction={direction}
+            isPrevioIRRisabled={activeIndex === 0}
+            isNextDisabled={activeIndex === features.length - 1}
+          />
+
+          <div className="absolute top-0 end-0 z-0 flex h-full w-full items-center justify-center lg:w-2/3 lg:mask-[linear-gradient(to_left,_transparent,_black_30%,_black)]">
+            <AnimatePresence mode="popLayout" custom={direction}>
+              <motion.img
+                key={`feature-image-${features[activeIndex]?.id}`}
+                variants={variants}
+                initial="initial"
+                animate="animate"
+                exit="exit"
+                custom={direction}
+                transition={{
+                  duration: 0.4,
+                  ease: "easeOut",
+                }}
+                src={features[activeIndex].image}
+                alt={features[activeIndex].title}
+                className="h-full w-full object-cover"
+              />
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature323 };
diff --git a/blocks/feature33.tsx b/blocks/feature33.tsx
new file mode 100644
index 0000000..6fb380a
--- /dev/null
+++ b/blocks/feature33.tsx
@@ -0,0 +1,84 @@
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "مدیریت محصول",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    linkText: "فروش آنلاین",
+    linkHref: "#",
+  },
+  {
+    title: "پرداخت امن",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    linkText: "فروشگاه",
+    linkHref: "#",
+  },
+  {
+    title: "ردیابی سفارش",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    linkText: "تبدیل خرید",
+    linkHref: "#",
+  },
+];
+
+interface Feature33Props {
+  className?: string;
+}
+
+const Feature33 = ({ className }: Feature33Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-14 max-w-2xl text-center">
+          <h2 className="mb-8 text-xl font-semibold lg:mb-12 lg:text-2xll">
+            فروش آنلاین را مقیاس‌پذیر کنید
+          </h2>
+          <p className="font-medium text-muted-foreground lg:text-lg">
+            تجربه خرید را روان‌تر بسازید
+          </p>
+        </div>
+        <div className="mx-auto max-w-7xl rounded-lg bg-muted pt-10 pe-10 lg:pt-28 lg:pe-32">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+            alt="مدیریت سفارش"
+            className="h-full max-h-[600px] w-full rounded-te-lg rounded-be-lg object-cover"
+          />
+        </div>
+        <div className="mx-auto mt-14 grid max-w-7xl gap-11 md:grid-cols-2 lg:grid-cols-3 lg:gap-20">
+          {features.map((feature, index) => (
+            <Card key={index} className="border-0 py-3 shadow-none">
+              <CardHeader className="px-0">
+                <CardTitle className="text-xl font-medium">
+                  {feature.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="px-0">
+                <p className="text-muted-foreground">{feature.description}</p>
+              </CardContent>
+              <CardFooter className="px-0">
+                <a
+                  href={feature.linkHref}
+                  className="font-semibold hover:underline"
+                >
+                  {feature.linkText}
+                </a>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature33 };
diff --git a/blocks/feature34.tsx b/blocks/feature34.tsx
new file mode 100644
index 0000000..be92da1
--- /dev/null
+++ b/blocks/feature34.tsx
@@ -0,0 +1,111 @@
+import { cn } from "@/lib/utils";
+
+interface Feature34Props {
+  className?: string;
+}
+
+const Feature34 = ({ className }: Feature34Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-20 max-w-3xl text-center">
+          <h1 className="mb-6 text-xl font-medium lg:text-2xll">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h1>
+          <p className="font-medium text-muted-foreground">
+            با SEO دقیق‌تر رشد کنید
+          </p>
+        </div>
+        <div className="mx-auto grid gap-10 lg:grid-cols-3">
+          <div className="order-1 flex h-full items-center rounded-lg bg-muted p-4 lg:order-none">
+            <div className="mx-auto max-w-80 rounded-lg bg-background p-6">
+              <div className="mb-2 flex items-center gap-2">
+                <img
+                  src="/block-media/shadcnblocks/block/block-1.svg"
+                  alt="داشبورد SEO"
+                  className="h-7"
+                />
+                <span className="text-lg font-semibold">ترافیک ارگانیک</span>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+              </p>
+            </div>
+          </div>
+          <div className="order-3 flex h-full items-center rounded-lg bg-muted lg:order-none">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تحلیل کلمات کلیدی"
+              className="aspect-video h-full w-full rounded-lg object-cover"
+            />
+          </div>
+          <div className="order-5 grid h-full grid-cols-3 gap-4 rounded-lg bg-muted p-4 lg:order-none">
+            <div className="flex items-center justify-center self-stretch rounded-lg bg-background text-xl font-medium">
+              ۱
+            </div>
+            <div className="col-span-2 flex items-center justify-center self-stretch rounded-lg bg-background p-6 text-xl font-medium">
+              <img
+                src="/block-media/shadcnblocks/block/block-3.svg"
+                alt="گزارش رتبه جستجو"
+                className="max-h-16"
+              />
+            </div>
+
+            <div className="col-span-3 flex items-center justify-center self-stretch rounded-lg bg-background p-6 text-xl font-medium">
+              <img
+                src="/block-media/shadcnblocks/block/block-4.svg"
+                alt="داشبورد SEO"
+                className="max-h-44"
+              />
+            </div>
+            <div className="col-span-2 flex items-center justify-center self-stretch rounded-lg bg-background p-6 text-xl font-medium">
+              <img
+                src="/block-media/shadcnblocks/block/block-5.svg"
+                alt="تحلیل کلمات کلیدی"
+                className="max-h-16"
+              />
+            </div>
+            <div className="flex items-center justify-center self-stretch rounded-lg bg-background text-xl font-medium">
+              ۱۰
+            </div>
+          </div>
+          <div className="order-2 -mt-6 max-w-[412px] lg:order-none">
+            <p className="mb-6 text-sm text-muted-foreground lg:mb-12">
+              گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
+            </p>
+            <h3 className="mb-3 text-xl font-medium lg:mb-6">
+              پیشنهاد عنوان
+            </h3>
+            <p className="mb-6 text-muted-foreground">
+              تحلیل کلمه کلیدی
+            </p>
+          </div>
+          <div className="order-4 -mt-6 max-w-[412px] lg:order-none">
+            <p className="mb-6 text-sm text-muted-foreground lg:mb-12">
+              با چک‌لیست بهینه‌سازی، صفحات جدید را از ابتدا برای جستجو آماده منتشر کنید.
+            </p>
+            <h3 className="mb-3 text-xl font-medium lg:mb-6">
+              ممیزی فنی
+            </h3>
+            <p className="mb-6 text-muted-foreground">
+              ردیابی رتبه
+            </p>
+          </div>
+          <div className="order-6 -mt-6 max-w-[412px] lg:order-none">
+            <p className="mb-6 text-sm text-muted-foreground lg:mb-12">
+              تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+            </p>
+            <h3 className="mb-3 text-xl font-medium lg:mb-6">
+              بهینه‌سازی محتوا
+            </h3>
+            <p className="mb-6 text-muted-foreground">
+              تحلیل رقیب
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature34 };
diff --git a/blocks/feature342.tsx b/blocks/feature342.tsx
new file mode 100644
index 0000000..c4971d1
--- /dev/null
+++ b/blocks/feature342.tsx
@@ -0,0 +1,155 @@
+import { ChevronRight } from "lucide-react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface DashedLineProps {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+const DashedLine = ({
+  orientation = "horizontal",
+  className,
+}: DashedLineProps) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <div
+      className={cn(
+        "relative text-muted-foreground",
+        isHorizontal ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          isHorizontal
+            ? [
+                "h-px w-full",
+                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
+              ]
+            : [
+                "h-full w-px",
+                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
+              ],
+        )}
+      />
+    </div>
+  );
+};
+
+interface FeatureItem {
+  id: string;
+  title: string;
+  image: string;
+  imageAlt?: string;
+  href?: string;
+}
+
+const DEFAULT_ITEMS: FeatureItem[] = [
+  {
+    id: "product-development",
+    title: "مدیریت محصول",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "مدیریت سفارش",
+    href: "#",
+  },
+  {
+    id: "end-to-end",
+    title: "پرداخت امن",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد فروش",
+    href: "#",
+  },
+  {
+    id: "momentum",
+    title: "ردیابی سفارش",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پنل فروشگاه آنلاین",
+    href: "#",
+  },
+];
+
+interface Feature342Props {
+  tagline?: string;
+  heading?: string;
+  description?: string;
+  items?: FeatureItem[];
+  className?: string;
+}
+
+const Feature342 = ({
+  tagline = "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+  heading = "فروش آنلاین را مقیاس‌پذیر کنید",
+  description = "مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.",
+  items = DEFAULT_ITEMS,
+  className,
+}: Feature342Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("pb-28 lg:pb-32", className)}>
+      <div className="container">
+        <div className="relative flex items-center justify-center">
+          <DashedLine className="text-muted-foreground" />
+          <span className="absolute bg-muted px-3 font-mono text-sm font-medium tracking-wide text-muted-foreground max-md:hidden">
+            {tagline}
+          </span>
+        </div>
+
+        <div className="mx-auto mt-10 grid max-w-4xl items-center gap-3 text-start md:gap-0 lg:mt-24 lg:grid-cols-2">
+          <h2 className="text-xl tracking-tight text-balance md:text-xl lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="leading-snug text-pretty text-muted-foreground">
+            {description}
+          </p>
+        </div>
+
+        <Card className="mt-8 rounded-3xl md:mt-12 lg:mt-20">
+          <CardContent className="flex p-0 max-md:flex-col">
+            {items.map((item, i) => (
+              <div key={item.id} className="flex flex-1 max-md:flex-col">
+                <div className="flex-1 p-4 pe-0 md:p-6">
+                  <div className="relative aspect-[1.28/1] overflow-hidden">
+                    <img
+                      src={item.image}
+                      alt={item.imageAlt ?? `${item.title} - نمای رابط کاربری`}
+                      className="absolute inset-0 size-full object-cover object-start-top ps-4 pt-2"
+                    />
+                    <div className="absolute inset-0 z-10 bg-linear-to-t from-background via-transparent to-transparent" />
+                  </div>
+
+                  <a
+                    href={item.href || "#"}
+                    className="group flex items-center justify-between gap-4 pe-4 pt-4 md:pe-6 md:pt-6"
+                  >
+                    <h3 className="max-w-60 text-xl leading-tight font-bold tracking-tight text-pretty">
+                      {item.title}
+                    </h3>
+                    <div className="rounded-full border p-2">
+                      <ChevronRight className="size-6 shrink-0 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:size-9" />
+                    </div>
+                  </a>
+                </div>
+                {i < items.length - 1 && (
+                  <div className="relative hidden md:block">
+                    <DashedLine orientation="vertical" />
+                  </div>
+                )}
+                {i < items.length - 1 && (
+                  <div className="relative block md:hidden">
+                    <DashedLine orientation="horizontal" />
+                  </div>
+                )}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { Feature342 };
diff --git a/blocks/feature343.tsx b/blocks/feature343.tsx
new file mode 100644
index 0000000..83b7f52
--- /dev/null
+++ b/blocks/feature343.tsx
@@ -0,0 +1,270 @@
+import { cn } from "@/lib/utils";
+
+interface DashedLineProps {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+const DashedLine = ({
+  orientation = "horizontal",
+  className,
+}: DashedLineProps) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <div
+      className={cn(
+        "relative text-muted-foreground",
+        isHorizontal ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          isHorizontal
+            ? [
+                "h-px w-full",
+                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
+              ]
+            : [
+                "h-full w-px",
+                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
+              ],
+        )}
+      />
+    </div>
+  );
+};
+
+interface FeatureImage {
+  src: string;
+  alt: string;
+}
+
+interface FeatureItem {
+  id: string;
+  title: string;
+  description: string;
+  images: FeatureImage[];
+  isIconGrid?: boolean;
+}
+
+const DEFAULT_TOP_ITEMS: FeatureItem[] = [
+  {
+    id: "templates",
+    title: "پیشنهاد عنوان",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+        alt: "داشبورد SEO",
+      },
+    ],
+  },
+  {
+    id: "stack",
+    title: "تحلیل کلمه کلیدی",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/logos/jira.svg",
+        alt: "تحلیل کلمات کلیدی",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/notion.svg",
+        alt: "گزارش رتبه جستجو",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/asana.svg",
+        alt: "داشبورد SEO",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/drive.svg",
+        alt: "تحلیل کلمات کلیدی",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/excel.svg",
+        alt: "گزارش رتبه جستجو",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/logos/word.svg",
+        alt: "داشبورد SEO",
+      },
+    ],
+    isIconGrid: true,
+  },
+];
+
+const DEFAULT_BOTTOM_ITEMS: FeatureItem[] = [
+  {
+    id: "archive",
+    title: "ممیزی فنی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+        alt: "تحلیل کلمات کلیدی",
+      },
+    ],
+  },
+  {
+    id: "discussions",
+    title: "ردیابی رتبه",
+    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+        alt: "گزارش رتبه جستجو",
+      },
+    ],
+  },
+  {
+    id: "notifications",
+    title: "بهینه‌سازی محتوا",
+    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/placeholder-4.svg",
+        alt: "داشبورد SEO",
+      },
+    ],
+  },
+];
+
+interface Feature343Props {
+  heading?: string;
+  topItems?: FeatureItem[];
+  bottomItems?: FeatureItem[];
+  className?: string;
+}
+
+const Feature343 = ({
+  heading = "رتبه کلمات کلیدی را پیگیری کنید",
+  topItems = DEFAULT_TOP_ITEMS,
+  bottomItems = DEFAULT_BOTTOM_ITEMS,
+  className,
+}: Feature343Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden pb-28 lg:pb-32", className)}
+    >
+      <div>
+        <h2 className="container text-center text-3xl tracking-tight text-balance sm:text-xl md:text-2xll lg:text-2xll">
+          {heading}
+        </h2>
+
+        <div className="mt-8 md:mt-12 lg:mt-20">
+          <DashedLine
+            orientation="horizontal"
+            className="container scale-x-105"
+          />
+
+          <div className="relative container flex max-md:flex-col">
+            {topItems.map((item, i) => (
+              <FeatureCard
+                key={item.id}
+                item={item}
+                isLast={i === topItems.length - 1}
+              />
+            ))}
+          </div>
+          <DashedLine
+            orientation="horizontal"
+            className="container max-w-7xl scale-x-110"
+          />
+
+          <div className="relative container grid max-w-7xl md:grid-cols-3">
+            {bottomItems.map((item, i) => (
+              <FeatureCard
+                key={item.id}
+                item={item}
+                isLast={i === bottomItems.length - 1}
+                className="md:pb-0"
+              />
+            ))}
+          </div>
+        </div>
+        <DashedLine
+          orientation="horizontal"
+          className="container max-w-7xl scale-x-110"
+        />
+      </div>
+    </section>
+  );
+};
+
+interface FeatureCardProps {
+  item: FeatureItem;
+  isLast?: boolean;
+  className?: string;
+}
+
+const FeatureCard = ({ item, isLast, className }: FeatureCardProps) => {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-1 flex-col justify-between px-0 py-6 text-start md:px-6 md:py-8",
+        className,
+      )}
+    >
+      <div className="mb-5 text-balance md:mb-8">
+        <h3 className="inline font-semibold">{item.title} </h3>
+        <span className="text-pretty text-muted-foreground">
+          {item.description}
+        </span>
+      </div>
+
+      {item.isIconGrid ? (
+        <div className="relative overflow-hidden">
+          <div className="flex flex-wrap gap-4">
+            {item.images.map((image) => (
+              <div
+                key={image.src}
+                className="grid aspect-square size-14 place-items-center rounded-xl bg-background p-2 lg:size-16"
+              >
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="size-8 object-contain lg:size-10"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4">
+          {item.images.map((image) => (
+            <img
+              key={image.src}
+              src={image.src}
+              alt={image.alt}
+              className="h-auto max-h-64 w-auto max-w-full object-contain object-start-top"
+            />
+          ))}
+        </div>
+      )}
+
+      {!isLast && (
+        <>
+          <DashedLine
+            orientation="vertical"
+            className="absolute top-0 end-0 max-md:hidden"
+          />
+          <DashedLine
+            orientation="horizontal"
+            className="absolute inset-x-0 bottom-0 md:hidden"
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export { Feature343 };
diff --git a/blocks/feature35.tsx b/blocks/feature35.tsx
new file mode 100644
index 0000000..1863784
--- /dev/null
+++ b/blocks/feature35.tsx
@@ -0,0 +1,63 @@
+import { MoveRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const columns = [
+  {
+    title: "مدیریت دارایی",
+    description:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    link: true,
+  },
+  {
+    title: "بودجه‌بندی",
+    description:
+      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+    link: true,
+  },
+  {
+    title: "مدیریت مالی",
+    description:
+      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+    link: false,
+  },
+];
+
+interface Feature35Props {
+  className?: string;
+}
+
+const Feature35 = ({ className }: Feature35Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-10 lg:grid-cols-4 lg:gap-20">
+          <h2 className="row-span-2 text-3xl font-semibold">
+            عملیات سازمان را یکپارچه کنید
+          </h2>
+          {columns.map((column) => (
+            <div key={column.title} className="flex flex-col gap-6">
+              <div>
+                <h3 className="mb-2 text-lg font-semibold lg:mb-8">
+                  {column.title}
+                </h3>
+                <p className="text-muted-foreground">{column.description}</p>
+              </div>
+              {column.link && (
+                <a href="#" className="inline-flex items-center hover:underline">
+                  <span>بیشتر بدانید</span>
+                  <MoveRight
+                    strokeWidth={1}
+                    className="ms-2 size-4 rtl:rotate-180"
+                  />
+                </a>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature35 };
diff --git a/blocks/feature36.tsx b/blocks/feature36.tsx
new file mode 100644
index 0000000..0f5ae1e
--- /dev/null
+++ b/blocks/feature36.tsx
@@ -0,0 +1,111 @@
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const caseStudies = [
+  {
+    featured: true,
+    title:
+      "سطح دسترسی",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    linkText: "داده سازمانی",
+    href: "#",
+  },
+  {
+    featured: false,
+    title: "تحلیل پیش‌بین",
+    linkText: "هوش تجاری",
+    href: "#",
+  },
+  {
+    featured: false,
+    title: "اشتراک گزارش",
+    linkText: "گزارش‌گیری",
+    href: "#",
+  },
+  {
+    featured: false,
+    title: "مدل داده",
+    linkText: "تحلیل پیشرفته",
+    href: "#",
+  },
+  {
+    featured: false,
+    title: "گزارش‌ساز",
+    linkText: "داده سازمانی",
+    href: "#",
+  },
+  {
+    featured: false,
+    title: "Pivot تعاملی",
+    linkText: "هوش تجاری",
+    href: "#",
+  },
+];
+
+interface Feature36Props {
+  className?: string;
+}
+
+const Feature36 = ({ className }: Feature36Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
+          {caseStudies.map((study, index) => (
+            <a
+              key={index}
+              className={cn(
+                "group",
+                study.featured && "lg:col-span-2 lg:row-span-2",
+              )}
+              href={study.href}
+            >
+              <Card
+                className={cn(
+                  "h-full items-start border border-transparent bg-accent p-12 hover:cursor-pointer hover:border-primary",
+                  study.featured && "lg:p-20",
+                )}
+              >
+                <div className="flex flex-col gap-8">
+                  {study.featured && (
+                    <Badge className="w-fit">گزارش‌گیری</Badge>
+                  )}
+                  <div className="flex flex-col gap-6">
+                    <p
+                      className={cn(
+                        "text-muted-foreground",
+                        study.featured && "text-base lg:text-lg lg:font-medium",
+                      )}
+                    >
+                      داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
+                    </p>
+                    <h3
+                      className={cn(
+                        "text-xl font-medium",
+                        study.featured && "lg:text-2xll",
+                      )}
+                    >
+                      {study.title}
+                    </h3>
+                    {study.description && (
+                      <p className="text-muted-foreground lg:text-lg lg:font-medium">
+                        {study.description}
+                      </p>
+                    )}
+                  </div>
+                  <p className="font-medium group-hover:underline">
+                    {study.linkText}
+                  </p>
+                </div>
+              </Card>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature36 };
diff --git a/blocks/feature37.tsx b/blocks/feature37.tsx
new file mode 100644
index 0000000..1849cca
--- /dev/null
+++ b/blocks/feature37.tsx
@@ -0,0 +1,72 @@
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+    title: "تقسیم خودکار سرنخ",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    colSpan: "md:col-span-2",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
+    title: "گزارش عملکرد فروش",
+    description:
+      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    colSpan: "md:col-span-3",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
+    title: "مدیریت قرارداد",
+    description:
+      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+    colSpan: "md:col-span-3",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+    title: "تاریخچه تعاملات",
+    description:
+      "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
+    colSpan: "md:col-span-2",
+  },
+];
+
+interface Feature37Props {
+  className?: string;
+}
+
+const Feature37 = ({ className }: Feature37Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-5">
+          {items.map((item) => (
+            <div
+              key={item.title}
+              className={cn(
+                "flex flex-col justify-between rounded-lg bg-accent",
+                item.colSpan,
+              )}
+            >
+              <img
+                src={item.image}
+                alt={item.imageAlt}
+                className="aspect-video h-full max-h-72 w-full object-cover"
+              />
+              <div className="p-6">
+                <p className="mb-3 text-lg font-semibold">{item.title}</p>
+                <p className="text-muted-foreground">{item.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature37 };
diff --git a/blocks/feature38.tsx b/blocks/feature38.tsx
new file mode 100644
index 0000000..227610e
--- /dev/null
+++ b/blocks/feature38.tsx
@@ -0,0 +1,63 @@
+import { Globe, Hash, NotebookText } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const highlights = [
+  {
+    icon: NotebookText,
+    text: "یادآور پیگیری خودکار",
+  },
+  {
+    icon: Globe,
+    text: "پیش‌بینی درآمد ماهانه",
+  },
+  {
+    icon: Hash,
+    text: "مقایسه عملکرد نمایندگان",
+  },
+];
+
+interface Feature38Props {
+  className?: string;
+}
+
+const Feature38 = ({ className }: Feature38Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col-reverse items-center justify-between gap-10 lg:flex-row">
+          <div className="lg:max-w-md">
+            <span className="flex size-14 items-center justify-center rounded-full bg-accent">
+              <NotebookText className="size-6 text-primary" />
+            </span>
+            <h1 className="mt-8 mb-2 text-xl font-bold text-pretty lg:text-xl">
+              پیش‌بینی درآمد را دقیق‌تر کنید
+            </h1>
+            <p className="mb-5 text-muted-foreground">
+              هر فرصت فروش را از دست ندهید
+            </p>
+            <Button>شروع رایگان</Button>
+            <Separator className="my-7" />
+            <ul className="space-y-4">
+              {highlights.map(({ icon: Icon, text }) => (
+                <li key={text} className="flex items-center gap-3">
+                  <Icon className="size-5 shrink-0 text-primary" />
+                  <p className="font-bold">{text}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="صف اولویت سرنخ‌ها"
+            className="max-h-96 w-full rounded-md object-cover lg:max-h-none lg:w-1/2"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature38 };
diff --git a/blocks/feature39.tsx b/blocks/feature39.tsx
new file mode 100644
index 0000000..d84df91
--- /dev/null
+++ b/blocks/feature39.tsx
@@ -0,0 +1,64 @@
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "تحلیل عملکرد کمپین",
+    title: "تحلیل کانال",
+    description:
+      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+    href: "#",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمودار ROI",
+    title: "اتوماسیون ایمیل",
+    description:
+      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    href: "#",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+    title: "A/B تست",
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    href: "#",
+  },
+];
+
+interface Feature39Props {
+  className?: string;
+}
+
+const Feature39 = ({ className }: Feature39Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-9 text-3xl font-semibold lg:mb-14 lg:text-xl">
+          کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+        </h2>
+        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-6">
+          {features.map((feature) => (
+            <div key={feature.title}>
+              <img
+                src={feature.image}
+                alt={feature.imageAlt}
+                className="aspect-video max-h-96 w-full rounded-lg object-cover"
+              />
+              <p className="mt-8 mb-2 text-lg font-semibold">{feature.title}</p>
+              <p className="mb-4 text-muted-foreground">
+                {feature.description}
+              </p>
+              <a href={feature.href} className="font-medium underline">
+                بیشتر بدانید
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature39 };
diff --git a/blocks/feature4.tsx b/blocks/feature4.tsx
new file mode 100644
index 0000000..95bc658
--- /dev/null
+++ b/blocks/feature4.tsx
@@ -0,0 +1,92 @@
+import { Code, GitBranch } from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Feature4Props {
+  className?: string;
+}
+
+const Feature4 = ({ className }: Feature4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto xl:px-36">
+          <h1 className="mx-auto mb-16 max-w-xl text-center text-xl font-semibold text-pretty lg:text-2xll">
+            فرایندها را استاندارد و سریع کنید
+          </h1>
+
+          <div className="mt-10 flex flex-col gap-6">
+            <Card>
+              <CardHeader className="pb-1">
+                <Code className="size-5" strokeWidth={1.5} />
+              </CardHeader>
+              <CardContent className="text-start">
+                <h2 className="mb-1 text-lg font-semibold">
+                  اتوماسیون را در کل سازمان یکپارچه کنید
+                </h2>
+                <p className="leading-snug text-muted-foreground">
+                  خطای انسانی را در کارهای روزمره کم کنید
+                </p>
+              </CardContent>
+              <CardFooter className="justify-end pb-0">
+                <img
+                  className="h-[500px] w-full rounded-t-md object-cover object-center"
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="سازنده گردش‌کار"
+                />
+              </CardFooter>
+            </Card>
+            <div className="flex flex-col gap-6 md:flex-row">
+              <Card className="w-full">
+                <CardHeader className="pb-1">
+                  <GitBranch className="size-5" strokeWidth={1.5} />
+                </CardHeader>
+                <CardContent className="text-start">
+                  <h2 className="mb-1 text-lg font-semibold">
+                    کارهای تکراری را خودکار کنید
+                  </h2>
+                  <p className="leading-snug text-muted-foreground">
+                    گردش‌کار تیم را بدون کد بسازید
+                  </p>
+                </CardContent>
+                <CardFooter className="justify-end pe-0 pb-0">
+                  <img
+                    className="h-full max-h-96 w-full rounded-ts-md object-cover object-center"
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="نمای اتوماسیون فرایند"
+                  />
+                </CardFooter>
+              </Card>
+              <Card className="flex w-full flex-col justify-between gap-10 md:gap-20">
+                <CardHeader className="items-start pb-1">
+                  <img
+                    className="h-6 dark:invert"
+                    src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+                    alt="لاگ اجرای خودکار"
+                  />
+                </CardHeader>
+                <CardContent className="text-start">
+                  <q className="text-xl md:text-3xl">
+                    قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+                  </q>
+                </CardContent>
+                <CardFooter className="flex-col items-start text-xs">
+                  <p className="font-semibold">فرایند هوشمند</p>
+                  <p className="text-muted-foreground">اتوماسیون</p>
+                </CardFooter>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature4 };
diff --git a/blocks/feature41.tsx b/blocks/feature41.tsx
new file mode 100644
index 0000000..66aa8c2
--- /dev/null
+++ b/blocks/feature41.tsx
@@ -0,0 +1,70 @@
+import { cn } from "@/lib/utils";
+
+const offices = [
+  {
+    color: "bg-red-600",
+    city: "فرایند هوشمند",
+    country: "اتوماسیون",
+    address: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    postal: "گردش‌کار",
+  },
+  {
+    color: "bg-green-600",
+    city: "صرفه‌جویی زمان",
+    country: "فرایند هوشمند",
+    address: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    postal: "اتوماسیون",
+  },
+  {
+    color: "bg-blue-600",
+    city: "گردش‌کار",
+    country: "صرفه‌جویی زمان",
+    address: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    postal: "فرایند هوشمند",
+  },
+  {
+    color: "bg-amber-600",
+    city: "اتوماسیون",
+    country: "گردش‌کار",
+    address: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    postal: "صرفه‌جویی زمان",
+  },
+];
+
+interface Feature41Props {
+  className?: string;
+}
+
+const Feature41 = ({ className }: Feature41Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-10 md:grid-cols-5 md:gap-0">
+          <h2 className="col-span-2 text-start text-xl font-semibold lg:text-2xll">
+            فرایندها را استاندارد و سریع کنید
+          </h2>
+          <div className="col-span-3 grid gap-10 sm:grid-cols-2">
+            {offices.map((office) => (
+              <div key={office.city}>
+                <div
+                  className={cn("h-5 w-7 rounded-sm", office.color)}
+                  aria-hidden
+                />
+                <h3 className="my-2 text-xl font-semibold">
+                  {office.city}، {office.country}
+                </h3>
+                <p className="text-muted-foreground">
+                  {office.address}
+                  <br />
+                  کد پستی: {office.postal}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature41 };
diff --git a/blocks/feature42.tsx b/blocks/feature42.tsx
new file mode 100644
index 0000000..3b92407
--- /dev/null
+++ b/blocks/feature42.tsx
@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+
+const values = [
+  {
+    title: "داشبورد سفارشی",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+  },
+  {
+    title: "فیلتر پیشرفته",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+  },
+  {
+    title: "نمودار روند",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+  },
+  {
+    title: "هشدار آستانه",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+  },
+];
+
+interface Feature42Props {
+  className?: string;
+}
+
+const Feature42 = ({ className }: Feature42Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-8 lg:grid-cols-3">
+          <h2 className="row-span-2 text-start text-3xl font-semibold lg:text-2xll">
+            داده پراکنده را به تصمیم تبدیل کنید
+          </h2>
+          {values.map((value) => (
+            <div key={value.title}>
+              <h3 className="mb-2 text-xl font-medium">{value.title}</h3>
+              <p className="text-muted-foreground">{value.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature42 };
diff --git a/blocks/feature43.tsx b/blocks/feature43.tsx
new file mode 100644
index 0000000..cec3882
--- /dev/null
+++ b/blocks/feature43.tsx
@@ -0,0 +1,105 @@
+import type { ReactNode } from "react";
+import {
+  BatteryCharging,
+  GitPullRequest,
+  Layers,
+  RadioTower,
+  SquareKanban,
+  WandSparkles,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  heading: string;
+  description: string;
+  icon: ReactNode;
+}
+
+interface Feature43Props {
+  title?: string;
+  features?: Feature[];
+  buttonText?: string;
+  buttonUrl?: string;
+  className?: string;
+}
+
+const Feature43 = ({
+  title = "زمان حل مسئله را کوتاه کنید",
+  features = [
+    {
+      heading: "تاریخچه مشتری",
+      description:
+        "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+      icon: <GitPullRequest className="size-6" />,
+    },
+    {
+      heading: "صندوق یکپارچه",
+      description:
+        "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+      icon: <SquareKanban className="size-6" />,
+    },
+    {
+      heading: "اولویت‌بندی تیکت",
+      description:
+        "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+      icon: <RadioTower className="size-6" />,
+    },
+    {
+      heading: "پایگاه دانش",
+      description:
+        "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
+      icon: <WandSparkles className="size-6" />,
+    },
+    {
+      heading: "پاسخ آماده",
+      description:
+        "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+      icon: <Layers className="size-6" />,
+    },
+    {
+      heading: "SLA هوشمند",
+      description:
+        "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+      icon: <BatteryCharging className="size-6" />,
+    },
+  ],
+  buttonText = "رضایت مشتری",
+  buttonUrl = "https://ShadcnBlocks",
+  className,
+}: Feature43Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        {title && (
+          <div className="mx-auto mb-16 max-w-3xl text-center">
+            <h2 className="text-xl font-medium text-pretty lg:text-2xll">
+              {title}
+            </h2>
+          </div>
+        )}
+        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature, i) => (
+            <div key={i} className="flex flex-col">
+              <div className="mb-5 flex size-16 items-center justify-center rounded-full bg-accent">
+                {feature.icon}
+              </div>
+              <h3 className="mb-2 text-xl font-semibold">{feature.heading}</h3>
+              <p className="text-muted-foreground">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+        {buttonUrl && (
+          <div className="mt-16 flex justify-center">
+            <Button size="lg" asChild>
+              <a href={buttonUrl}>{buttonText}</a>
+            </Button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { Feature43 };
diff --git a/blocks/feature44.tsx b/blocks/feature44.tsx
new file mode 100644
index 0000000..ba67879
--- /dev/null
+++ b/blocks/feature44.tsx
@@ -0,0 +1,93 @@
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    title: "Slack",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+  },
+  {
+    title: "تحلیل احساس",
+    description:
+      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+  },
+  {
+    title: "Dropbox",
+    description:
+      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+  },
+  {
+    title: "GitHub",
+    description:
+      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    image: "/block-media/shadcnblocks/block/block-4.svg",
+  },
+  {
+    title: "Figma",
+    description:
+      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    image: "/block-media/shadcnblocks/block/block-5.svg",
+  },
+  {
+    title: "Trello",
+    description:
+      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    image: "/block-media/shadcnblocks/block/block-6.svg",
+  },
+  {
+    title: "Asana",
+    description:
+      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+  },
+  {
+    title: "Jira",
+    description:
+      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+  },
+];
+
+interface Feature44Props {
+  className?: string;
+}
+
+const Feature44 = ({ className }: Feature44Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-4 text-xl font-semibold lg:text-xl">
+          با هوش مصنوعی سریع‌تر تصمیم بگیرید
+        </h2>
+        <p className="text-muted-foreground lg:text-lg">
+          کارهای تکراری را به AI بسپارید
+        </p>
+        <ul className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+          {integrations.map((integration) => (
+            <li key={integration.title}>
+              <Card className="p-6">
+                <img
+                  src={integration.image}
+                  alt={`لوگوی ${integration.title}`}
+                  className="w-14"
+                />
+                <h3 className="mt-4 mb-1 text-lg font-medium">
+                  {integration.title}
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  {integration.description}
+                </p>
+              </Card>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Feature44 };
diff --git a/blocks/feature5.tsx b/blocks/feature5.tsx
new file mode 100644
index 0000000..0a794fe
--- /dev/null
+++ b/blocks/feature5.tsx
@@ -0,0 +1,55 @@
+import { AppWindowMac, Zap } from "lucide-react";
+
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Feature5Props {
+  className?: string;
+}
+
+const Feature5 = ({ className }: Feature5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <Card className="p-6 lg:col-span-2">
+            <div className="text-start">
+              <AppWindowMac className="mb-1 w-7" />
+              <h2 className="mt-4 mb-1 text-lg font-semibold">
+                داده پراکنده را به تصمیم تبدیل کنید
+              </h2>
+              <p className="text-muted-foreground">
+                شاخص‌های کلیدی را یکجا ببینید
+              </p>
+            </div>
+            <div className="mt-7">
+              <img
+                className="aspect-square max-h-[500px] w-full rounded-t-md object-cover object-center"
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="گزارش عملکرد"
+              />
+            </div>
+          </Card>
+          <Card className="flex flex-col justify-between p-6">
+            <div className="text-start">
+              <Zap className="mb-1 w-7" />
+              <h2 className="mt-4 mb-1 text-lg font-semibold">
+                روند رشد را قبل از دیگران ببینید
+              </h2>
+              <p className="text-muted-foreground">
+                گزارش‌هایی که واقعاً قابل اقدام هستند
+              </p>
+            </div>
+            <img
+              className="mt-7 aspect-square rounded-t-md object-cover lg:aspect-auto lg:h-full"
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="داشبورد تحلیل داده"
+            />
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature5 };
diff --git a/blocks/feature50.tsx b/blocks/feature50.tsx
new file mode 100644
index 0000000..65bb35b
--- /dev/null
+++ b/blocks/feature50.tsx
@@ -0,0 +1,114 @@
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature50Props {
+  className?: string;
+}
+
+const Feature50 = ({ className }: Feature50Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
+          <h2 className="mb-2 text-center text-3xl font-semibold text-balance lg:text-2xll">
+            همکاری از راه دور را ساده کنید
+          </h2>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
+          </p>
+          <Button variant="outline" className="mt-6">
+            شروع رایگان
+            <ChevronRight className="ms-1 size-4 rtl:rotate-180" />
+          </Button>
+        </div>
+        <div className="mx-auto mt-20 flex max-w-5xl grid-cols-1 flex-col gap-6 lg:grid lg:grid-cols-7">
+          <a
+            href="#"
+            className="col-span-7 grid overflow-hidden rounded-lg bg-muted sm:grid-cols-2"
+          >
+            <div className="flex flex-col justify-between p-8 lg:p-12">
+              <div>
+                <div className="mb-4 text-xs text-muted-foreground">
+                  کار گروهی
+                </div>
+                <h3 className="mb-2 text-xl font-medium lg:text-xl">
+                  تیم‌ها را در یک فضای مشترک هم‌راستا کنید
+                </h3>
+                <p className="text-sm text-muted-foreground lg:text-base">
+                  هر عضو فقط به بخش‌های مرتبط با نقش خود دسترسی دارد.
+                </p>
+              </div>
+              <div className="mt-6 sm:mt-8">
+                <Button variant="outline">
+                  بیشتر بدانید
+                  <ChevronRight className="ms-1 size-4 rtl:rotate-180" />
+                </Button>
+              </div>
+            </div>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+              alt="تقویم تیم"
+              className="order-first aspect-video h-full max-h-96 w-full border-b object-cover sm:order-last sm:aspect-auto lg:max-h-none lg:border-b-0 lg:border-s"
+            />
+          </a>
+          <a
+            href="#"
+            className="group relative overflow-hidden rounded-lg bg-muted lg:col-span-3"
+          >
+            <Button
+              variant="outline"
+              size="sm"
+              aria-label="بیشتر بدانید"
+              className="absolute top-7 end-10 transition-all duration-200 group-hover:opacity-100 lg:translate-y-2 lg:opacity-0 lg:group-hover:translate-y-0"
+            >
+              <ChevronRight className="size-4 rtl:rotate-180" />
+            </Button>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+              alt="فضای همکاری تیمی"
+              className="max-h-72 w-full border-b object-cover"
+            />
+            <div className="p-8 lg:p-12">
+              <div className="mb-4 text-xs text-muted-foreground">
+                مدیریت پروژه
+              </div>
+              <h3 className="mb-2 text-xl font-medium lg:text-xl">
+                برد Kanban
+              </h3>
+            </div>
+          </a>
+          <a
+            href="#"
+            className="grid overflow-hidden rounded-lg bg-muted sm:grid-cols-2 lg:col-span-4"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+              alt="برد مدیریت پروژه"
+              className="aspect-video h-full max-h-96 w-full border-b object-cover sm:aspect-auto lg:max-h-none lg:border-e lg:border-b-0"
+            />
+            <div className="flex flex-col justify-between p-8 lg:p-12">
+              <div>
+                <div className="mb-4 text-xs text-muted-foreground">
+                  کار گروهی
+                </div>
+                <h3 className="mb-2 text-xl font-medium lg:text-xl">
+                  تیم‌ها را در یک فضای مشترک هم‌راستا کنید
+                </h3>
+              </div>
+              <div className="mt-6 sm:mt-8">
+                <Button variant="outline">
+                  بیشتر بدانید
+                  <ChevronRight className="ms-1 size-4 rtl:rotate-180" />
+                </Button>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature50 };
diff --git a/blocks/feature51.tsx b/blocks/feature51.tsx
new file mode 100644
index 0000000..9a85fe2
--- /dev/null
+++ b/blocks/feature51.tsx
@@ -0,0 +1,113 @@
+import type { ReactNode } from "react";
+import { Cog, Lightbulb, ListChecks } from "lucide-react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  id: string;
+  icon: ReactNode;
+  heading: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  url: string;
+  isDefault: boolean;
+}
+
+const defaultFeatures: Feature[] = [
+  {
+    id: "feature-1",
+    heading: "موجودی انبار",
+    icon: <Lightbulb className="size-4" />,
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "مدیریت سفارش",
+    url: "https://ShadcnBlocks",
+    isDefault: true,
+  },
+  {
+    id: "feature-2",
+    icon: <ListChecks className="size-4" />,
+    heading: "بازگشت مشتری",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "داشبورد فروش",
+    url: "https://ShadcnBlocks",
+    isDefault: false,
+  },
+  {
+    id: "feature-3",
+    icon: <Cog className="size-4" />,
+    heading: "صفحه فرود",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پنل فروشگاه آنلاین",
+    url: "https://ShadcnBlocks",
+    isDefault: false,
+  },
+];
+
+interface Feature51Props {
+  features?: Feature[];
+  className?: string;
+}
+
+const Feature51 = ({
+  features = defaultFeatures,
+  className,
+}: Feature51Props) => {
+  const defaultTab =
+    features.find((tab) => tab.isDefault)?.id || features[0].id;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Tabs defaultValue={defaultTab} className="p-0" dir="rtl">
+          <TabsList className="flex w-full flex-col gap-2 bg-background p-0 group-data-horizontal/tabs:h-auto md:flex-row">
+            {features.map((tab) => (
+              <TabsTrigger
+                key={tab.id}
+                value={tab.id}
+                aria-label={tab.heading}
+                className="group flex w-full flex-col items-start justify-start gap-1 rounded-md border border-border p-4 text-start whitespace-normal shadow-none transition-opacity duration-200 hover:border group-data-[variant=default]/tabs-list:data-active:border-primary group-data-[variant=default]/tabs-list:data-active:shadow-none"
+              >
+                <div className="flex items-center gap-2 md:flex-col md:items-start lg:gap-4">
+                  {tab.icon && (
+                    <span className="flex size-8 items-center justify-center rounded-full bg-muted text-muted-foreground lg:size-10">
+                      {tab.icon}
+                    </span>
+                  )}
+                  <p className="text-lg font-semibold transition-opacity duration-200">
+                    {tab.heading}
+                  </p>
+                </div>
+                <p className="font-normal text-muted-foreground transition-opacity duration-200 md:block">
+                  {tab.description}
+                </p>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {features.map((tab) => (
+            <TabsContent
+              key={tab.id}
+              value={tab.id}
+              className="transition-opacity duration-300"
+            >
+              <img
+                src={tab.image}
+                alt={tab.imageAlt}
+                className="aspect-video w-full rounded-md border border-border object-cover transition-opacity duration-300"
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature51 };
diff --git a/blocks/feature52.tsx b/blocks/feature52.tsx
new file mode 100644
index 0000000..ba514ea
--- /dev/null
+++ b/blocks/feature52.tsx
@@ -0,0 +1,105 @@
+import {
+  Blocks,
+  Fingerprint,
+  LayoutPanelTop,
+  MessageCircleMore,
+  Users,
+  Workflow,
+} from "lucide-react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const tabs = [
+  {
+    title: "بهینه‌سازی محتوا",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    icon: (
+      <MessageCircleMore
+        className="size-6 text-primary lg:size-8"
+        strokeWidth={1.5}
+      />
+    ),
+  },
+  {
+    title: "تحلیل رقیب",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    icon: (
+      <Blocks className="size-6 text-primary lg:size-8" strokeWidth={1.5} />
+    ),
+  },
+  {
+    title: "لینک داخلی",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    icon: <Users className="size-6 text-primary lg:size-8" strokeWidth={1.5} />,
+  },
+  {
+    title: "گزارش Core Web Vitals",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    icon: (
+      <Workflow className="size-6 text-primary lg:size-8" strokeWidth={1.5} />
+    ),
+  },
+  {
+    title: "پیشنهاد عنوان",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    icon: (
+      <LayoutPanelTop
+        className="size-6 text-primary lg:size-8"
+        strokeWidth={1.5}
+      />
+    ),
+  },
+  {
+    title: "تحلیل کلمه کلیدی",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    icon: (
+      <Fingerprint
+        className="size-6 text-primary lg:size-8"
+        strokeWidth={1.5}
+      />
+    ),
+  },
+];
+
+interface Feature52Props {
+  className?: string;
+}
+
+const Feature52 = ({ className }: Feature52Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Tabs defaultValue="feature-1">
+          <TabsList className="flex w-full flex-wrap justify-between gap-2 bg-background p-0 group-data-horizontal/tabs:h-full">
+            {tabs.map((tab, index) => (
+              <TabsTrigger
+                key={index}
+                value={`feature-${index + 1}`}
+                className="flex flex-1 flex-col items-start justify-start gap-2 rounded-md border border-border bg-muted px-2 py-4 text-start whitespace-normal text-primary hover:border lg:py-6 group-data-[variant=default]/tabs-list:data-active:border-primary group-data-[variant=default]/tabs-list:data-active:shadow-none"
+              >
+                <div className="flex w-full flex-col items-center gap-4">
+                  {tab.icon}
+                  <p className="text-sm font-semibold lg:text-base">
+                    {tab.title}
+                  </p>
+                </div>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {tabs.map((tab, index) => (
+            <TabsContent key={index} value={`feature-${index + 1}`}>
+              <img
+                src={tab.image}
+                alt={`نمای ${tab.title}`}
+                className="aspect-video w-full rounded-md object-cover"
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Feature52 };
diff --git a/blocks/feature53.tsx b/blocks/feature53.tsx
new file mode 100644
index 0000000..a462167
--- /dev/null
+++ b/blocks/feature53.tsx
@@ -0,0 +1,128 @@
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    title: "Next.js",
+    image: (
+      <img
+        src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
+        alt="گزارش مالی یکپارچه"
+        className="mt-2.5 max-h-12 lg:mt-0 dark:invert"
+      />
+    ),
+  },
+  {
+    title: "React",
+    image: (
+      <img
+        src="/block-media/shadcnblocks/block/logos/react-wordmark.svg"
+        alt="داشبورد ERP"
+        className="mt-2.5 max-h-9 lg:mt-0 lg:max-h-12"
+      />
+    ),
+  },
+  {
+    title: "Shadcn/ui",
+    image: (
+      <img
+        src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+        alt="مدیریت عملیات"
+        className="mt-2.5 max-h-5 lg:mt-0 lg:max-h-7 dark:invert"
+      />
+    ),
+  },
+  {
+    title: "Supabase",
+    image: (
+      <>
+        <img
+          src="/block-media/shadcnblocks/block/logos/supabase-wordmark.svg"
+          alt="گزارش مالی یکپارچه"
+          className="mt-2.5 max-h-6 lg:mt-0 lg:max-h-9 dark:hidden"
+        />
+        <img
+          src="/block-media/shadcnblocks/block/logos/supabase-wordmark-dark.svg"
+          alt="داشبورد ERP"
+          className="mt-2.5 hidden max-h-6 lg:mt-0 lg:max-h-9 dark:block"
+        />
+      </>
+    ),
+  },
+  {
+    title: "Vercel",
+    image: (
+      <img
+        src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
+        className="mt-2.5 max-h-5 lg:mt-0 lg:max-h-8 dark:invert"
+        alt="مدیریت عملیات"
+      />
+    ),
+  },
+  {
+    title: "Tailwind",
+    image: (
+      <>
+        <img
+          src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
+          alt="گزارش مالی یکپارچه"
+          className="mt-2.5 max-h-5 lg:mt-0 lg:max-h-6 dark:hidden"
+        />
+        <img
+          src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
+          alt="داشبورد ERP"
+          className="mt-2.5 hidden max-h-5 lg:mt-0 lg:max-h-6 dark:block"
+        />
+      </>
+    ),
+  },
+  {
+    title: "Astro",
+    image: (
+      <img
+        src="/block-media/shadcnblocks/block/logos/astro-wordmark.svg"
+        alt="مدیریت عملیات"
+        className="mt-2.5 max-h-7 lg:mt-0 lg:max-h-9 dark:invert"
+      />
+    ),
+  },
+  {
+    title: "GitHub",
+    image: (
+      <img
+        src="/block-media/shadcnblocks/block/logos/github-wordmark.svg"
+        alt="گزارش مالی یکپارچه"
+        className="mt-2.5 max-h-6 lg:mt-0 lg:max-h-9 dark:invert"
+      />
+    ),
+  },
+];
+
+interface Feature53Props {
+  className?: string;
+}
+
+const Feature53 = ({ className }: Feature53Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-2 gap-px border border-border bg-border md:grid-cols-4">
+          {items.map((item, index) => (
+            <div key={index} className="bg-background">
+              <div className="relative mx-4 flex min-h-[150px] flex-col items-center justify-center lg:min-h-[280px]">
+                <p className="absolute top-4 inset-s-0 font-mono text-xs">
+                  <span>
+                    {(index + 1).toLocaleString("fa-IR").padStart(2, "۰")}
+                  </span>
+                  <span className="ms-2">{item.title}</span>
+                </p>
+                {item.image}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature53 };
diff --git a/blocks/feature54.tsx b/blocks/feature54.tsx
new file mode 100644
index 0000000..222b889
--- /dev/null
+++ b/blocks/feature54.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    title: "گزارش‌ساز",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    subfeatures: [
+      {
+        id: "subfeature-1",
+        title: "Pivot تعاملی",
+        description:
+          "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+      },
+      {
+        id: "subfeature-2",
+        title: "داشبورد مدیریتی",
+        description:
+          "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+      },
+      {
+        id: "subfeature-3",
+        title: "اتصال منبع",
+        description:
+          "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+      },
+    ],
+  },
+  {
+    id: "feature-2",
+    title: "سطح دسترسی",
+    description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    subfeatures: [
+      {
+        id: "subfeature-1",
+        title: "تحلیل پیش‌بین",
+        description:
+          "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+      },
+      {
+        id: "subfeature-2",
+        title: "اشتراک گزارش",
+        description:
+          "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+      },
+      {
+        id: "subfeature-3",
+        title: "مدل داده",
+        description:
+          "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+      },
+    ],
+  },
+  {
+    id: "feature-3",
+    title: "گزارش‌ساز",
+    description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    subfeatures: [
+      {
+        id: "subfeature-1",
+        title: "Pivot تعاملی",
+        description:
+          "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+      },
+      {
+        id: "subfeature-2",
+        title: "داشبورد مدیریتی",
+        description:
+          "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+      },
+      {
+        id: "subfeature-3",
+        title: "اتصال منبع",
+        description:
+          "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+      },
+    ],
+  },
+  {
+    id: "feature-4",
+    title: "سطح دسترسی",
+    description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    subfeatures: [
+      {
+        id: "subfeature-1",
+        title: "تحلیل پیش‌بین",
+        description:
+          "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+      },
+      {
+        id: "subfeature-2",
+        title: "اشتراک گزارش",
+        description:
+          "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+      },
+      {
+        id: "subfeature-3",
+        title: "مدل داده",
+        description:
+          "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+      },
+    ],
+  },
+  {
+    id: "feature-5",
+    title: "گزارش‌ساز",
+    description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    subfeatures: [
+      {
+        id: "subfeature-1",
+        title: "Pivot تعاملی",
+        description:
+          "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+      },
+      {
+        id: "subfeature-2",
+        title: "داشبورد مدیریتی",
+        description:
+          "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+      },
+      {
+        id: "subfeature-3",
+        title: "اتصال منبع",
+        description:
+          "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
+      },
+    ],
+  },
+];
+
+interface Feature54Props {
+  className?: string;
+}
+
+const Feature54 = ({ className }: Feature54Props) => {
+  const [selection, setSelection] = useState("feature-5");
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="flex flex-col items-center md:gap-y-4 lg:px-16">
+        <div className="container flex flex-col items-center">
+          <h3 className="mb-3 text-center text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
+            سطح دسترسی
+          </h3>
+        </div>
+        <div className="w-full text-center">
+          <Tabs value={selection} onValueChange={setSelection}>
+            <div className="relative">
+              <div className="container mb-6 hidden min-w-fit flex-col items-center md:flex lg:mb-8 lg:max-w-5xl">
+                <TabsList className="gap-x-2">
+                  {features.map((feature) => (
+                    <TabsTrigger key={feature.id} value={feature.id}>
+                      {feature.title}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </div>
+              <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_left,var(--color-background)_0%,transparent_10%,transparent_90%,var(--color-background)_100%)] md:hidden" />
+            </div>
+            <div className="container w-full lg:max-w-5xl">
+              {features.map((feature) => (
+                <TabsContent key={feature.id} value={feature.id}>
+                  <div className="">
+                    <div className="aspect-[1.67] w-full overflow-hidden rounded-lg border border-border bg-accent">
+                      <img
+                        src={feature.image}
+                        alt={`نمای ${feature.title}`}
+                        className="h-full w-full object-cover object-center"
+                      />
+                    </div>
+                    <div
+                      dir="rtl"
+                      className="hidden grid-cols-3 gap-6 py-6 md:grid"
+                    >
+                      {feature.subfeatures.map((subfeature) => (
+                        <div
+                          key={subfeature.id}
+                          className="flex flex-col items-start text-right"
+                        >
+                          <p className="mb-2 text-xs font-semibold">
+                            {subfeature.title}
+                          </p>
+                          <p className="mb-8 text-xs text-muted-foreground">
+                            {subfeature.description}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </TabsContent>
+              ))}
+            </div>
+            <div className="flex justify-center py-3 md:hidden">
+              {features.map((feature) => (
+                <Button
+                  key={feature.id}
+                  variant="ghost"
+                  size="sm"
+                  aria-label={feature.title}
+                  onClick={() => {
+                    setSelection(feature.id);
+                  }}
+                >
+                  <div
+                    className={`size-2 rounded-full ${feature.id === selection ? "bg-primary" : "bg-input"}`}
+                  />
+                </Button>
+              ))}
+            </div>
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature54 };
diff --git a/blocks/feature55.tsx b/blocks/feature55.tsx
new file mode 100644
index 0000000..d8bb0bb
--- /dev/null
+++ b/blocks/feature55.tsx
@@ -0,0 +1,26 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature55Props {
+  className?: string;
+}
+
+const Feature55 = ({ className }: Feature55Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center text-center">
+          <h3 className="my-6 text-3xl font-semibold text-pretty md:text-xl lg:max-w-3xl lg:text-2xll">
+            پروفایل ۳۶۰ درجه مشتری
+          </h3>
+          <p className="mb-8 text-muted-foreground lg:max-w-3xl lg:text-lg">
+            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+          </p>
+          <Button variant="outline">بیشتر بدانید</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature55 };
diff --git a/blocks/feature56.tsx b/blocks/feature56.tsx
new file mode 100644
index 0000000..4f9e0a0
--- /dev/null
+++ b/blocks/feature56.tsx
@@ -0,0 +1,83 @@
+import { cn } from "@/lib/utils";
+
+const heroFeature = {
+  title: "همکاری فروش و بازاریابی",
+  description:
+    "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+  image: "/block-media/shadcnblocks/block/placeholder-dark-8-wide.svg",
+  imageAlt: "صف اولویت سرنخ‌ها",
+};
+
+const subFeatures = [
+  {
+    title: "اولویت‌بندی سرنخ",
+    description:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "داشبورد عملکرد فروش",
+  },
+  {
+    title: "قالب پیشنهاد فروش",
+    description:
+      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    imageAlt: "نمودار نرخ تبدیل",
+  },
+  {
+    title: "ردیابی کووت",
+    description:
+      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    imageAlt: "صف اولویت سرنخ‌ها",
+  },
+];
+
+interface Feature56Props {
+  className?: string;
+}
+
+const Feature56 = ({ className }: Feature56Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-6 lg:px-32">
+        <div className="flex flex-col rounded-lg border border-border bg-accent p-8">
+          <p className="mb-2 text-sm font-semibold md:text-base">
+            {heroFeature.title}
+          </p>
+          <p className="mb-8 text-sm text-muted-foreground md:text-base">
+            {heroFeature.description}
+          </p>
+          <img
+            src={heroFeature.image}
+            alt={heroFeature.imageAlt}
+            className="rounded-md lg:mt-auto lg:w-full"
+          />
+        </div>
+        <div className="grid gap-6 lg:grid-cols-3">
+          {subFeatures.map((feature) => (
+            <div
+              key={feature.title}
+              className="grid-cols-2 gap-x-20 rounded-lg border border-border bg-accent p-6 md:grid md:p-8 lg:flex lg:flex-col"
+            >
+              <div className="flex flex-col">
+                <p className="mb-2 text-sm font-semibold md:text-base">
+                  {feature.title}
+                </p>
+                <p className="mb-8 text-sm text-muted-foreground md:text-base">
+                  {feature.description}
+                </p>
+              </div>
+              <img
+                src={feature.image}
+                alt={feature.imageAlt}
+                className="rounded-md lg:mt-auto lg:w-full"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature56 };
diff --git a/blocks/feature57.tsx b/blocks/feature57.tsx
new file mode 100644
index 0000000..80433b7
--- /dev/null
+++ b/blocks/feature57.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import { Bolt, Cloud, MessagesSquare, Star } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    title: "ردیابی UTM",
+    description:
+      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
+    icon: Cloud,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: "feature-2",
+    title: "گزارش ROI",
+    description:
+      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    icon: Star,
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: "feature-3",
+    title: "مدیریت کمپین",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    icon: Bolt,
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    id: "feature-4",
+    title: "سگمنت‌بندی مخاطب",
+    description:
+      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+    icon: MessagesSquare,
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+];
+
+interface Feature57Props {
+  className?: string;
+}
+
+const Feature57 = ({ className }: Feature57Props) => {
+  const [selection, setSelection] = useState(0);
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+
+  const handleSelection = (index: number) => {
+    carouselApi?.scrollTo(index);
+  };
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setSelection(carouselApi.selectedScrollSnap());
+    };
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-12 md:py-24 lg:py-32", className)}
+    >
+      <div className="container mx-auto px-4">
+        <div className="mb-8 text-center md:mb-12">
+          <Badge variant="outline" className="mb-3">
+            کمپین
+          </Badge>
+          <h2 className="text-3xl leading-tight font-bold md:text-xl lg:text-2xll">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </h2>
+          <p className="mx-auto mt-3 max-w-2xl text-sm text-muted-foreground md:mt-4 md:text-base">
+            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+          </p>
+        </div>
+        <div>
+          <div className="mx-auto flex max-w-6xl flex-col-reverse gap-6 md:flex-row md:gap-8 lg:gap-16">
+            <div className="md:w-1/2 lg:w-2/5">
+              <ul className="grid grid-cols-1 gap-3 md:flex md:flex-col md:gap-2">
+                {features.map((feature, i) => {
+                  const isSelected = selection === i;
+                  return (
+                    <li
+                      key={feature.id}
+                      className={`group relative flex cursor-pointer rounded-xl border px-4 py-3 transition-all duration-300 md:px-5 md:py-4 ${
+                        isSelected
+                          ? "border-border bg-accent shadow-sm"
+                          : "border-transparent hover:border-border hover:bg-accent/30"
+                      }`}
+                      data-open={isSelected ? "true" : undefined}
+                      onClick={() => handleSelection(i)}
+                    >
+                      <div className="flex w-full items-start gap-3 md:gap-4">
+                        <div
+                          className={`flex aspect-square w-9 shrink-0 items-center justify-center rounded-lg transition-colors md:w-10 ${
+                            isSelected
+                              ? "bg-primary text-primary-foreground"
+                              : "bg-muted text-muted-foreground"
+                          }`}
+                        >
+                          <feature.icon className="size-4 md:size-5" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <h3
+                            className={`mb-1 text-sm font-semibold transition-colors md:text-base lg:text-lg ${
+                              isSelected
+                                ? "text-foreground"
+                                : "text-muted-foreground"
+                            }`}
+                          >
+                            {feature.title}
+                          </h3>
+                          <p className="line-clamp-2 text-xs text-muted-foreground transition-all md:text-sm md:group-data-open:opacity-100 lg:text-sm">
+                            {feature.description}
+                          </p>
+                        </div>
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+
+            <div className="relative md:w-1/2 lg:w-3/5">
+              <div className="overflow-hidden rounded-xl border border-border shadow-sm">
+                <Carousel
+                  setApi={setCarouselApi}
+                  className="aspect-4/5 max-h-[500px] w-full md:aspect-3/4 lg:aspect-4/5 [&>div]:h-full"
+                  opts={{
+                    loop: true,
+                    direction: "rtl",
+                  }}
+                >
+                  <CarouselContent className="mx-0 h-full w-full">
+                    {features.map((feature) => (
+                      <CarouselItem key={feature.id} className="px-0">
+                        <div className="relative h-full w-full overflow-hidden">
+                          <img
+                            src={feature.image}
+                            alt={`نمای ${feature.title}`}
+                            className="h-full w-full object-cover object-center transition-transform duration-500"
+                          />
+                          <div className="absolute inset-x-0 bottom-0 bg-linear-to-t from-background/80 via-background/40 to-transparent p-6">
+                            <div className="flex items-start gap-3">
+                              <div className="flex aspect-square w-10 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                                <feature.icon className="size-5" />
+                              </div>
+                              <div>
+                                <h3 className="text-xl font-semibold text-foreground">
+                                  {feature.title}
+                                </h3>
+                                <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                                  {feature.description}
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </CarouselItem>
+                    ))}
+                  </CarouselContent>
+                </Carousel>
+              </div>
+
+              <div className="mt-5 flex justify-center gap-2">
+                {features.map((feature, i) => (
+                  <button
+                    key={feature.id}
+                    className={`size-2 rounded-full transition-all ${
+                      selection === i
+                        ? "w-6 bg-primary"
+                        : "bg-muted hover:bg-muted-foreground/50"
+                    }`}
+                    onClick={() => handleSelection(i)}
+                    aria-label={feature.title}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature57 };
diff --git a/blocks/feature58.tsx b/blocks/feature58.tsx
new file mode 100644
index 0000000..5569028
--- /dev/null
+++ b/blocks/feature58.tsx
@@ -0,0 +1,66 @@
+import { Bolt, Cloud, Star } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    title: "لاگ اجرا",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    icon: Cloud,
+  },
+  {
+    id: "feature-2",
+    title: "قالب آماده",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    icon: Star,
+  },
+  {
+    id: "feature-3",
+    title: "اتصال ابزار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    icon: Bolt,
+  },
+];
+
+interface Feature58Props {
+  className?: string;
+}
+
+const Feature58 = ({ className }: Feature58Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-x-20 rounded-lg border border-border bg-accent p-6 md:grid-cols-2 md:p-8 lg:p-16">
+          <div className="mb-8 flex justify-center lg:justify-start xl:mb-0">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+              alt="سازنده گردش‌کار"
+              className="aspect-square h-full w-full rounded-md object-cover object-center"
+            />
+          </div>
+          <ul className="flex flex-col justify-center gap-y-8">
+            {features.map((feature) => (
+              <li key={feature.id} className="flex">
+                <feature.icon className="ms-3 size-5 shrink-0 lg:ms-6 lg:size-6" />
+                <div>
+                  <div className="mb-3 h-5 text-sm font-semibold text-accent-foreground md:text-base">
+                    {feature.title}
+                  </div>
+                  <div className="text-sm font-medium text-muted-foreground md:text-base">
+                    {feature.description}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature58 };
diff --git a/blocks/feature59.tsx b/blocks/feature59.tsx
new file mode 100644
index 0000000..25abe6e
--- /dev/null
+++ b/blocks/feature59.tsx
@@ -0,0 +1,99 @@
+import { cn } from "@/lib/utils";
+
+const heroFeature = {
+  title: "گزارش زمان‌بندی‌شده",
+  description:
+    "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+  image: "/block-media/shadcnblocks/block/placeholder-dark-8-wide.svg",
+  imageAlt: "گزارش عملکرد",
+};
+
+const tallFeature = {
+  title: "تحلیل کوHORT",
+  description:
+    "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+  image: "/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg",
+  imageAlt: "داشبورد تحلیل داده",
+};
+
+const subFeatures = [
+  {
+    title: "مقایسه دوره‌ای",
+    description:
+      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+  {
+    title: "خروجی گزارش",
+    description:
+      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "گزارش عملکرد",
+  },
+];
+
+interface Feature59Props {
+  className?: string;
+}
+
+const Feature59 = ({ className }: Feature59Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-6 lg:px-64">
+        <div className="grid gap-6 lg:grid-cols-2">
+          <div className="flex flex-col rounded-lg border border-border bg-accent p-8 lg:col-span-2">
+            <p className="mb-2 text-sm font-semibold md:text-base">
+              {heroFeature.title}
+            </p>
+            <p className="mb-8 text-sm text-muted-foreground md:text-base">
+              {heroFeature.description}
+            </p>
+            <img
+              src={heroFeature.image}
+              alt={heroFeature.imageAlt}
+              className="rounded-md lg:mt-auto lg:w-full"
+            />
+          </div>
+          <div className="grid-cols-2 gap-x-20 rounded-lg border border-border bg-accent p-6 md:grid md:p-8 lg:row-span-2 lg:flex lg:flex-col">
+            <div className="flex flex-col items-start">
+              <p className="mb-2 text-sm font-semibold md:text-base">
+                {tallFeature.title}
+              </p>
+              <p className="mb-8 text-sm text-muted-foreground md:text-base">
+                {tallFeature.description}
+              </p>
+            </div>
+            <img
+              src={tallFeature.image}
+              alt={tallFeature.imageAlt}
+              className="rounded-md lg:mt-auto lg:w-full"
+            />
+          </div>
+          {subFeatures.map((feature) => (
+            <div
+              key={feature.title}
+              className="grid-cols-2 gap-x-20 rounded-lg border border-border bg-accent p-6 md:grid md:p-8 lg:flex lg:flex-col"
+            >
+              <div className="flex flex-col">
+                <p className="mb-2 text-sm font-semibold md:text-base">
+                  {feature.title}
+                </p>
+                <p className="mb-8 text-sm text-muted-foreground md:text-base">
+                  {feature.description}
+                </p>
+              </div>
+              <img
+                src={feature.image}
+                alt={feature.imageAlt}
+                className="rounded-md lg:mt-auto lg:w-full"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature59 };
diff --git a/blocks/feature6.tsx b/blocks/feature6.tsx
new file mode 100644
index 0000000..3503ff9
--- /dev/null
+++ b/blocks/feature6.tsx
@@ -0,0 +1,53 @@
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Feature6Props {
+  className?: string;
+}
+
+const Feature6 = ({ className }: Feature6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-8 lg:grid-cols-2">
+          <div className="flex flex-col lg:items-start lg:text-start">
+            <h1 className="my-6 text-3xl font-semibold text-pretty lg:text-2xll">
+              زمان حل مسئله را کوتاه کنید
+            </h1>
+            <p className="mb-8 max-w-xl text-muted-foreground lg:text-lg">
+              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+            </p>
+            <ul className="ms-4 space-y-4 text-start">
+              <li className="flex items-center gap-3">
+                <Check className="size-5 shrink-0" />
+                <p className="text-muted-foreground">
+                  ردیابی زمان پاسخ و نرخ رضایت
+                </p>
+              </li>
+              <li className="flex items-center gap-3">
+                <Check className="size-5 shrink-0" />
+                <p className="text-muted-foreground">
+                  صندوق ورودی یکپارچه برای ایمیل و چت
+                </p>
+              </li>
+              <li className="flex items-center gap-3">
+                <Check className="size-5 shrink-0" />
+                <p className="text-muted-foreground">
+                  پاسخ‌های آماده برای تیکت‌های پرتکرار
+                </p>
+              </li>
+            </ul>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="مدیریت تیکت"
+            className="max-h-96 w-full rounded-md object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature6 };
diff --git a/blocks/feature60.tsx b/blocks/feature60.tsx
new file mode 100644
index 0000000..d6d573e
--- /dev/null
+++ b/blocks/feature60.tsx
@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+
+interface Feature60Props {
+  className?: string;
+}
+
+const Feature60 = ({ className }: Feature60Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="lg:flex">
+          <div className="lg:w-1/2">
+            <div className="mb-6 md:mb-8 lg:mb-0">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="مدیریت تیکت"
+                className="aspect-4/3 w-full rounded-md border border-border object-cover"
+              />
+            </div>
+          </div>
+          <div className="lg:flex lg:w-1/2 lg:items-center lg:ps-24 2xl:ps-32">
+            <div className="lg:text-start">
+              <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+                پاسخ آماده
+              </h3>
+              <p className="text-muted-foreground lg:text-lg">
+                SLA هوشمند
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature60 };
diff --git a/blocks/feature61.tsx b/blocks/feature61.tsx
new file mode 100644
index 0000000..7730e08
--- /dev/null
+++ b/blocks/feature61.tsx
@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+
+interface Feature61Props {
+  className?: string;
+}
+
+const Feature61 = ({ className }: Feature61Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex-row-reverse lg:flex">
+          <div className="lg:w-1/2">
+            <div className="mb-6 md:mb-8 lg:mb-0">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="دستیار هوش مصنوعی"
+                className="aspect-4/3 w-full rounded-md border border-border object-cover"
+              />
+            </div>
+          </div>
+          <div className="lg:flex lg:w-1/2 lg:items-center lg:pe-24 2xl:pe-32">
+            <div className="lg:text-start">
+              <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+                طبقه‌بندی خودکار
+              </h3>
+              <p className="text-muted-foreground lg:text-lg">
+                پیش‌بینی ریزش
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature61 };
diff --git a/blocks/feature62.tsx b/blocks/feature62.tsx
new file mode 100644
index 0000000..8dacad9
--- /dev/null
+++ b/blocks/feature62.tsx
@@ -0,0 +1,75 @@
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    reversed: false,
+    title: "تقویم تیمی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    imageAlt: "تقویم تیم",
+  },
+  {
+    reversed: true,
+    title: "اشتراک فایل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    imageAlt: "فضای همکاری تیمی",
+  },
+  {
+    reversed: false,
+    title: "منشن و بحث",
+    description:
+      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
+    imageAlt: "برد مدیریت پروژه",
+  },
+];
+
+interface Feature62Props {
+  className?: string;
+}
+
+const Feature62 = ({ className }: Feature62Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col space-y-10 md:space-y-16">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className={cn("lg:flex lg:gap-x-4", feature.reversed && "flex-row-reverse")}
+            >
+              <div className="lg:w-1/2">
+                <div className="mb-6 md:mb-8 lg:mb-0">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt={feature.imageAlt}
+                    className="aspect-4/3 w-full rounded-md border border-border object-cover"
+                  />
+                </div>
+              </div>
+              <div
+                className={cn(
+                  "lg:flex lg:w-1/2 lg:items-center",
+                  feature.reversed
+                    ? "lg:pe-24 2xl:pe-32"
+                    : "lg:ps-24 2xl:ps-32",
+                )}
+              >
+                <div className="lg:text-start">
+                  <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+                    {feature.title}
+                  </h3>
+                  <p className="text-muted-foreground lg:text-lg">
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature62 };
diff --git a/blocks/feature63.tsx b/blocks/feature63.tsx
new file mode 100644
index 0000000..ce8dcde
--- /dev/null
+++ b/blocks/feature63.tsx
@@ -0,0 +1,91 @@
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    title: "مدیریت محصول",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: "feature-2",
+    title: "پرداخت امن",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: "feature-3",
+    title: "ردیابی سفارش",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    id: "feature-4",
+    title: "تخفیف هوشمند",
+    description:
+      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    id: "feature-5",
+    title: "موجودی انبار",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    id: "feature-6",
+    title: "بازگشت مشتری",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+];
+
+interface Feature63Props {
+  className?: string;
+}
+
+const Feature63 = ({ className }: Feature63Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center gap-16 lg:px-16">
+        <div className="text-center">
+          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
+            صفحه فرود
+          </h3>
+          <p className="text-muted-foreground lg:max-w-3xl lg:text-lg">
+            مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+          </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature) => (
+            <div
+              key={feature.id}
+              className="rounded-lg border border-border bg-accent p-6 md:p-8"
+            >
+              <img
+                src={feature.image}
+                alt={`نمای ${feature.title}`}
+                className="mb-6 aspect-16/9 md:mb-8 lg:w-full"
+              />
+              <div className="flex flex-col">
+                <p className="mb-2 text-sm font-semibold md:text-base">
+                  {feature.title}
+                </p>
+                <p className="text-sm text-muted-foreground md:text-base">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature63 };
diff --git a/blocks/feature64.tsx b/blocks/feature64.tsx
new file mode 100644
index 0000000..f653b27
--- /dev/null
+++ b/blocks/feature64.tsx
@@ -0,0 +1,74 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "پیشنهاد عنوان",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد SEO",
+    colSpan: "lg:col-span-4",
+  },
+  {
+    title: "تحلیل کلمه کلیدی",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "تحلیل کلمات کلیدی",
+    colSpan: "lg:col-span-3",
+  },
+];
+
+interface Feature64Props {
+  className?: string;
+}
+
+const Feature64 = ({ className }: Feature64Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center gap-16 lg:px-16">
+        <div className="text-center">
+          <Badge variant="outline" className="mb-6">
+            ترافیک ارگانیک
+          </Badge>
+          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
+            ممیزی فنی
+          </h3>
+          <p className="text-muted-foreground lg:max-w-3xl lg:text-lg">
+            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+          </p>
+        </div>
+        <div className="grid w-full gap-6 lg:grid-cols-7">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className={cn(
+                "flex flex-col rounded-lg border border-border bg-accent p-6 md:p-8",
+                feature.colSpan,
+              )}
+            >
+              <div className="flex justify-center">
+                <img
+                  src={feature.image}
+                  alt={feature.imageAlt}
+                  className="mb-6 aspect-4/3 sm:max-h-64 md:mb-8 lg:w-full"
+                />
+              </div>
+              <div className="mt-auto flex flex-col">
+                <p className="mb-2 text-sm font-semibold md:text-base">
+                  {feature.title}
+                </p>
+                <p className="text-sm text-muted-foreground md:text-base">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature64 };
diff --git a/blocks/feature65.tsx b/blocks/feature65.tsx
new file mode 100644
index 0000000..e0e5118
--- /dev/null
+++ b/blocks/feature65.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import clsx from "clsx";
+import {
+  ChevronDown,
+  ChevronUp,
+  GanttChartSquareIcon,
+  GitBranch,
+  Sparkles,
+  SwatchBook,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    title: "مدیریت دارایی",
+    description:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    image: <SwatchBook className="h-8 w-8" />,
+    color: "bg-red-400",
+    tags: [
+      "یکپارچگی",
+      "عملیات",
+      "عملیات سازمان را یکپارچه کنید",
+      "ERP",
+      "از خرید تا فروش در یک سیستم",
+    ],
+  },
+  {
+    title: "ERP",
+    description:
+      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+    image: <GitBranch className="h-8 w-8" />,
+    color: "bg-blue-400",
+    tags: [
+      "ERP",
+      "مدیریت سازمان",
+      "ERP",
+      "ERP",
+      "ERP",
+      "ERP",
+    ],
+  },
+  {
+    title: "بودجه‌بندی",
+    description:
+      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+    image: <Sparkles className="h-8 w-8" />,
+    color: "bg-yellow-400",
+    tags: [
+      "ERP",
+      "ERP",
+      "فرایندهای پشت‌صحنه را شفاف کنید",
+      "ERP",
+      "ERP",
+    ],
+  },
+  {
+    title: "مدیریت مالی",
+    description:
+      "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
+    image: <GanttChartSquareIcon className="h-8 w-8" />,
+    color: "bg-green-400",
+    tags: [
+      "ERP",
+      "ERP",
+      "ERP",
+      "ERP",
+      "ERP",
+    ],
+  },
+];
+
+interface Feature65Props {
+  className?: string;
+}
+
+const Feature65 = ({ className }: Feature65Props) => {
+  const [activeTabId, setActiveTabId] = useState<number | null>(null);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-2 lg:grid-cols-4">
+          {integrations.map((item, index) => (
+            <div
+              key={item.title}
+              className="flex h-full flex-col justify-between gap-2"
+            >
+              <div className="flex items-center justify-between rounded-xl bg-muted-foreground/5 p-6">
+                <div className="flex items-center gap-3">
+                  <div className={clsx("h-16 w-3 rounded-md", item.color)} />
+                  <h3 className="text-xl font-bold">{item.title}</h3>
+                </div>
+                <div className="flex items-center gap-6">
+                  {item.image}
+                  <button
+                    type="button"
+                    className="flex h-12 w-12 items-center justify-center rounded-lg bg-background lg:hidden"
+                    aria-label={
+                      activeTabId === index
+                        ? `بستن ${item.title}`
+                        : `باز کردن ${item.title}`
+                    }
+                    onClick={() =>
+                      setActiveTabId(activeTabId === index ? null : index)
+                    }
+                  >
+                    {activeTabId === index ? (
+                      <ChevronUp className="h-8" />
+                    ) : (
+                      <ChevronDown className="h-8" />
+                    )}
+                  </button>
+                </div>
+              </div>
+              <div
+                className={` ${activeTabId === index ? "flex" : "hidden"} h-full flex-col items-start justify-between gap-64 rounded-xl bg-muted-foreground/5 p-6 transition-all duration-300 lg:flex`}
+              >
+                <div className="text-xl font-medium text-muted-foreground/90">
+                  {item.description}
+                </div>
+                <div className="flex flex-col items-start gap-4">
+                  {item.tags.map((tag, tagIndex) => (
+                    <Badge
+                      variant="outline"
+                      className={`${tagIndex === 0 ? "bg-muted/5" : "bg-background"} rounded-2xl border-0 px-4 py-3 text-base font-medium`}
+                      key={tag}
+                    >
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature65 };
diff --git a/blocks/feature66.tsx b/blocks/feature66.tsx
new file mode 100644
index 0000000..acb55d4
--- /dev/null
+++ b/blocks/feature66.tsx
@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils";
+
+const cards = [
+  {
+    href: "#",
+    image:
+      "/block-media/external/unsplash/photo-1548324215-9133768e4094.jpg",
+    imageAlt: "گزارش‌ساز",
+    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+    logoAlt: "داده سازمانی",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    cardClassName: "bg-red-100",
+  },
+  {
+    href: "#",
+    image:
+      "/block-media/external/unsplash/photo-1550070881-a5d71eda5800.jpg",
+    imageAlt: "تحلیل داده سازمان",
+    logo: "/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg",
+    logoAlt: "هوش تجاری",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    cardClassName: "",
+  },
+];
+
+interface Feature66Props {
+  className?: string;
+}
+
+const Feature66 = ({ className }: Feature66Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-start gap-8 lg:gap-12 lg:px-16">
+        <h3 className="text-3xl font-semibold text-pretty md:text-xl lg:max-w-3xl lg:text-2xll">
+          سطح دسترسی
+        </h3>
+        <div className="grid w-full grid-cols-1 gap-4 max-md:grid-rows-[1fr_1fr] md:grid-cols-2 lg:gap-6">
+          {cards.map((card) => (
+            <a key={card.logoAlt} href={card.href} className="h-full">
+              <div
+                className={cn(
+                  "group relative h-full min-h-[27rem] max-w-full overflow-hidden rounded-xl md:aspect-5/4 lg:aspect-16/9",
+                  card.cardClassName,
+                )}
+              >
+                <img
+                  src={card.image}
+                  alt={card.imageAlt}
+                  className="absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+                />
+                <div className="absolute inset-x-0 bottom-0 mt-auto max-h-[50%] min-h-[50%] bg-[linear-gradient(transparent,var(--primary)_80%)] mix-blend-multiply" />
+                <div className="absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-primary-foreground md:p-8">
+                  <img
+                    src={card.logo}
+                    alt={card.logoAlt}
+                    className="mb-3 h-8 invert"
+                  />
+                  <p className="text-xl font-semibold text-white">
+                    {card.description}
+                  </p>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature66 };
diff --git a/blocks/feature67.tsx b/blocks/feature67.tsx
new file mode 100644
index 0000000..2b0cb72
--- /dev/null
+++ b/blocks/feature67.tsx
@@ -0,0 +1,91 @@
+import {
+  Bolt,
+  Building,
+  Cloud,
+  MessagesSquare,
+  Rocket,
+  Star,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    title: "تقسیم خودکار سرنخ",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    icon: Cloud,
+  },
+  {
+    id: "feature-2",
+    title: "گزارش عملکرد فروش",
+    description:
+      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    icon: Star,
+  },
+  {
+    id: "feature-3",
+    title: "مدیریت قرارداد",
+    description:
+      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+    icon: Bolt,
+  },
+  {
+    id: "feature-4",
+    title: "تاریخچه تعاملات",
+    description:
+      "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
+    icon: MessagesSquare,
+  },
+  {
+    id: "feature-5",
+    title: "پروفایل ۳۶۰ درجه مشتری",
+    description:
+      "سرنخ‌ها را بر اساس منطقه، اندازه یا صنعت به نماینده مناسب اختصاص دهید.",
+    icon: Rocket,
+  },
+  {
+    id: "feature-6",
+    title: "اتوماسیون مراحل فروش",
+    description:
+      "عملکرد هر نماینده و نرخ تبدیل هر مرحله را در یک داشبورد مقایسه کنید.",
+    icon: Building,
+  },
+];
+
+interface Feature67Props {
+  className?: string;
+}
+
+const Feature67 = ({ className }: Feature67Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-start gap-8 lg:gap-12 lg:px-16 xl:flex-row xl:gap-32">
+        <h3 className="text-3xl font-semibold md:shrink-0 md:text-xl lg:max-w-1/3 lg:max-w-3xl lg:text-2xll">
+          پیش‌بینی درآمد
+        </h3>
+        <div className="grid w-full gap-6 md:grid-cols-2">
+          {features.map((feature) => (
+            <div
+              key={feature.id}
+              className="flex rounded-lg border border-border bg-accent p-6 md:p-8"
+            >
+              <feature.icon className="ms-3 size-5 shrink-0 lg:ms-6 lg:size-6" />
+              <div>
+                <div className="mb-3 h-5 text-sm font-semibold text-accent-foreground md:text-base">
+                  {feature.title}
+                </div>
+                <div className="text-sm font-medium text-muted-foreground md:text-base">
+                  {feature.description}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature67 };
diff --git a/blocks/feature68.tsx b/blocks/feature68.tsx
new file mode 100644
index 0000000..8b3a3a8
--- /dev/null
+++ b/blocks/feature68.tsx
@@ -0,0 +1,77 @@
+import { CloudLightning, Compass, Gift, Shield, Star, Zap } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "تحلیل باخت معامله",
+    description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+    icon: Star,
+  },
+  {
+    title: "هدف‌گذاری تیمی",
+    description: "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+    icon: Zap,
+  },
+  {
+    title: "اتوماسیون پیگیری",
+    description: "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+    icon: Shield,
+  },
+  {
+    title: "داشبورد مدیر فروش",
+    description: "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
+    icon: Compass,
+  },
+  {
+    title: "همکاری فروش و بازاریابی",
+    description: "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+    icon: CloudLightning,
+  },
+  {
+    title: "اولویت‌بندی سرنخ",
+    description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+    icon: Gift,
+  },
+];
+
+interface Feature68Props {
+  className?: string;
+}
+
+const Feature68 = ({ className }: Feature68Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-4">
+          <h2 className="text-xl font-bold tracking-tight md:text-3xl lg:text-xl">
+            پیش‌بینی درآمد را دقیق‌تر کنید
+          </h2>
+          <p className="max-w-prose text-base text-muted-foreground md:text-lg">
+            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
+          </p>
+        </div>
+
+        <div className="mt-8 rounded-xl border border-border bg-card/50 px-6 py-8 md:px-10 md:py-12">
+          <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {features.map((feature) => (
+              <li key={feature.title} className="flex items-start gap-3">
+                <div className="flex size-10 shrink-0 items-center justify-center rounded-sm bg-primary/10 p-2">
+                  <feature.icon className="size-5" />
+                </div>
+                <div>
+                  <p className="font-medium">{feature.title}</p>
+                  <p className="text-sm text-muted-foreground">
+                    {feature.description}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature68 };
diff --git a/blocks/feature69.tsx b/blocks/feature69.tsx
new file mode 100644
index 0000000..7fa6486
--- /dev/null
+++ b/blocks/feature69.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { ArrowRight, ChevronDown } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    title: "تحلیل کانال",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    href: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: "feature-2",
+    title: "اتوماسیون ایمیل",
+    description:
+      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+    href: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: "feature-3",
+    title: "A/B تست",
+    description:
+      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    href: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+];
+
+interface Feature69Props {
+  className?: string;
+}
+
+const Feature69 = ({ className }: Feature69Props) => {
+  const [selection, setSelection] = useState(0);
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.scrollTo(selection);
+  }, [carouselApi, selection]);
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setSelection(carouselApi.selectedScrollSnap());
+    };
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-8 md:flex-row-reverse">
+          <div className="aspect-5/6 overflow-clip rounded-3xl bg-accent">
+            <Carousel
+              setApi={setCarouselApi}
+              className="h-full w-full [&>div]:h-full"
+              opts={{ direction: "rtl" }}
+            >
+              <CarouselContent className="mx-0 h-full w-full">
+                {features.map((feature) => (
+                  <CarouselItem key={feature.id} className="px-0">
+                    <img
+                      src={feature.image}
+                      alt={`نمای ${feature.title}`}
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+          <div className="flex shrink-0 flex-col md:w-1/2 md:ps-8 lg:ps-24 lg:text-start 2xl:ps-32">
+            <h2 className="mb-6 text-3xl font-bold text-pretty lg:text-2xll">
+              کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+            </h2>
+            <p className="mb-16 text-muted-foreground lg:text-xl">
+              با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+            </p>
+            <ul className="space-y-2">
+              {features.map((feature, i) => (
+                <li
+                  key={feature.id}
+                  className="group relative w-full cursor-pointer px-6 py-3 transition data-open:bg-accent"
+                  data-open={selection === i ? "true" : undefined}
+                  onClick={() => setSelection(i)}
+                >
+                  <div className="flex items-center justify-between gap-x-2">
+                    <div className="text-sm font-semibold text-accent-foreground">
+                      {feature.title}
+                    </div>
+                    <div className="flex size-8 items-center justify-center rounded-full bg-accent text-accent-foreground group-hover:bg-primary group-hover:text-primary-foreground group-data-open:bg-primary group-data-open:text-primary-foreground">
+                      <ChevronDown className="size-4 shrink-0 transition-transform duration-200 group-data-open:rotate-180" />
+                    </div>
+                  </div>
+                  <div className="hidden text-sm font-medium group-data-open:block">
+                    <p className="my-4 text-muted-foreground lg:my-6">
+                      {feature.description}
+                    </p>
+                    <a
+                      href={feature.href}
+                      className="group/link flex items-center pb-3 text-sm text-accent-foreground"
+                    >
+                      بیشتر بدانید
+                      <ArrowRight className="ms-2 size-4 transition-transform group-hover/link:translate-x-1 rtl:rotate-180 rtl:group-hover/link:-translate-x-1" />
+                    </a>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature69 };
diff --git a/blocks/feature7.tsx b/blocks/feature7.tsx
new file mode 100644
index 0000000..5958ca0
--- /dev/null
+++ b/blocks/feature7.tsx
@@ -0,0 +1,53 @@
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Feature7Props {
+  className?: string;
+}
+
+const Feature7 = ({ className }: Feature7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-8 lg:grid-cols-2">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="دستیار هوش مصنوعی"
+            className="order-2 max-h-96 w-full rounded-md object-cover lg:order-1"
+          />
+          <div className="order-1 flex flex-col lg:order-2 lg:items-start lg:text-start">
+            <h1 className="my-6 text-3xl font-semibold text-pretty lg:text-2xll">
+              با هوش مصنوعی سریع‌تر تصمیم بگیرید
+            </h1>
+            <p className="mb-8 max-w-xl text-muted-foreground lg:text-lg">
+              مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+            </p>
+            <ul className="ms-4 space-y-4 text-start">
+              <li className="flex items-center gap-3">
+                <Check className="size-5 shrink-0" />
+                <p className="text-muted-foreground">
+                  از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم می‌کند و کیفیت خروجی را بالا می‌برد.
+                </p>
+              </li>
+              <li className="flex items-center gap-3">
+                <Check className="size-5 shrink-0" />
+                <p className="text-muted-foreground">
+                  سیستم با داده سازمان شما یاد می‌گیرد و هر بار پیشنهادهای دقیق‌تری برای بهبود نتیجه ارائه می‌دهد.
+                </p>
+              </li>
+              <li className="flex items-center gap-3">
+                <Check className="size-5 shrink-0" />
+                <p className="text-muted-foreground">
+                  مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+                </p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature7 };
diff --git a/blocks/feature70.tsx b/blocks/feature70.tsx
new file mode 100644
index 0000000..e97141d
--- /dev/null
+++ b/blocks/feature70.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { ArrowRight, ChevronDown } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    title: "تریگر رویداد",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    href: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: "feature-2",
+    title: "شرط هوشمند",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    href: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: "feature-3",
+    title: "اعلان خودکار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    href: "#",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+];
+
+interface Feature70Props {
+  className?: string;
+}
+
+const Feature70 = ({ className }: Feature70Props) => {
+  const [selection, setSelection] = useState(0);
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.scrollTo(selection);
+  }, [carouselApi, selection]);
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setSelection(carouselApi.selectedScrollSnap());
+    };
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-8 md:flex-row">
+          <div className="aspect-5/6 overflow-clip rounded-3xl bg-accent">
+            <Carousel
+              setApi={setCarouselApi}
+              className="h-full w-full [&>div]:h-full"
+              opts={{ direction: "rtl" }}
+            >
+              <CarouselContent className="mx-0 h-full w-full">
+                {features.map((feature) => (
+                  <CarouselItem key={feature.id} className="px-0">
+                    <img
+                      src={feature.image}
+                      alt={`نمای ${feature.title}`}
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+          <div className="flex shrink-0 flex-col md:w-1/2 md:pe-8 lg:pe-24 lg:text-start 2xl:pe-32">
+            <h2 className="mb-6 text-3xl font-bold text-pretty lg:text-2xll">
+              فرایندها را استاندارد و سریع کنید
+            </h2>
+            <p className="mb-16 text-muted-foreground lg:text-xl">
+              اتوماسیون را در کل سازمان یکپارچه کنید
+            </p>
+            <ul className="space-y-2">
+              {features.map((feature, i) => (
+                <li
+                  key={feature.id}
+                  className="group relative w-full cursor-pointer px-6 py-3 transition data-open:bg-accent"
+                  data-open={selection === i ? "true" : undefined}
+                  onClick={() => setSelection(i)}
+                >
+                  <div className="flex items-center justify-between gap-x-2">
+                    <div className="text-sm font-semibold text-accent-foreground">
+                      {feature.title}
+                    </div>
+                    <div className="flex size-8 items-center justify-center rounded-full bg-accent text-accent-foreground group-hover:bg-primary group-hover:text-primary-foreground group-data-open:bg-primary group-data-open:text-primary-foreground">
+                      <ChevronDown className="size-4 shrink-0 transition-transform duration-200 group-data-open:rotate-180" />
+                    </div>
+                  </div>
+                  <div className="hidden text-sm font-medium group-data-open:block">
+                    <p className="my-4 text-muted-foreground lg:my-6">
+                      {feature.description}
+                    </p>
+                    <a
+                      href={feature.href}
+                      className="group/link flex items-center pb-3 text-sm text-accent-foreground"
+                    >
+                      بیشتر بدانید
+                      <ArrowRight className="ms-2 size-4 transition-transform group-hover/link:translate-x-1 rtl:rotate-180 rtl:group-hover/link:-translate-x-1" />
+                    </a>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature70 };
diff --git a/blocks/feature71.tsx b/blocks/feature71.tsx
new file mode 100644
index 0000000..c67ff95
--- /dev/null
+++ b/blocks/feature71.tsx
@@ -0,0 +1,112 @@
+import { ArrowDown, ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const metrics = [
+  { value: "تحلیل داده", label: "داشبورد" },
+  { value: "۵", label: "شاخص کلیدی" },
+  { value: "بینش لحظه‌ای", label: "تحلیل داده" },
+  { value: "۱۰", label: "داشبورد" },
+];
+
+interface Feature71Props {
+  className?: string;
+}
+
+const Feature71 = ({ className }: Feature71Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center gap-16 lg:px-16">
+        <div className="text-center">
+          <p className="mb-6 text-xs font-medium tracking-wider uppercase">
+            شاخص کلیدی
+          </p>
+          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
+            داشبورد سفارشی
+          </h3>
+          <p className="mb-8 text-muted-foreground lg:max-w-2xl lg:text-lg">
+            گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+          </p>
+          <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
+            <Button className="w-full sm:w-auto">
+              <ArrowDown className="size-4" />
+              بینش لحظه‌ای
+            </Button>
+            <Button variant="outline" className="w-full sm:w-auto">
+              همین حالا شروع کنید
+            </Button>
+          </div>
+        </div>
+        <div className="grid w-full grid-cols-2 gap-4 sm:gap-6 lg:grid-cols-4 lg:gap-8">
+          <a
+            href="#"
+            className="group relative col-span-2 overflow-clip rounded-lg sm:max-lg:col-span-1"
+          >
+            <img
+              src="/block-media/external/unsplash/photo-1548324215-9133768e4094.jpg"
+              alt="گزارش عملکرد"
+              className="absolute h-full w-full object-cover object-center"
+            />
+            <div className="relative flex h-full w-full flex-col items-start justify-between bg-black/60 p-4 transition-colors hover:bg-black/70 sm:aspect-3/2 md:p-6 lg:p-10">
+              <img
+                src="/block-media/shadcnblocks/block/logos/astro-wordmark.svg"
+                alt="داشبورد تحلیل داده"
+                className="mb-12 h-8 invert md:h-12 dark:invert"
+              />
+              <div className="flex items-center text-xs font-medium text-white md:text-base lg:text-lg">
+                تحلیل داده
+                <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </div>
+            </div>
+          </a>
+          {metrics.slice(0, 2).map((metric) => (
+            <div
+              key={metric.label}
+              className="flex flex-col justify-between rounded-lg bg-accent p-4 sm:justify-end md:p-6 lg:p-10"
+            >
+              <div className="mb-8 text-3xl sm:mb-2 lg:text-2xll">
+                {metric.value}
+              </div>
+              <div className="text-xs md:text-base lg:text-lg">{metric.label}</div>
+            </div>
+          ))}
+          {metrics.slice(2).map((metric) => (
+            <div
+              key={metric.label}
+              className="flex flex-col justify-between rounded-lg bg-accent p-4 md:p-6 lg:p-10"
+            >
+              <div className="mb-8 text-3xl lg:text-2xll">{metric.value}</div>
+              <div className="text-xs md:text-base lg:text-lg">{metric.label}</div>
+            </div>
+          ))}
+          <a
+            href="#"
+            className="group relative col-span-2 overflow-clip rounded-lg sm:max-lg:col-span-1"
+          >
+            <img
+              src="/block-media/external/unsplash/photo-1550070881-a5d71eda5800.jpg"
+              alt="نمودار شاخص کلیدی"
+              className="absolute h-full w-full object-cover object-center"
+            />
+            <div className="relative flex h-full w-full flex-col items-start justify-between gap-4 bg-black/50 p-4 transition-colors hover:bg-black/70 sm:aspect-2/1 md:flex-row md:items-end md:p-6 lg:p-10">
+              <div>
+                <img
+                  src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+                  alt="گزارش عملکرد"
+                  className="mb-8 h-7 invert md:mb-0 dark:invert"
+                />
+              </div>
+              <div className="flex shrink-0 items-center text-xs font-medium text-white md:text-base lg:text-lg">
+                داشبورد
+                <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature71 };
diff --git a/blocks/feature72.tsx b/blocks/feature72.tsx
new file mode 100644
index 0000000..e7123bd
--- /dev/null
+++ b/blocks/feature72.tsx
@@ -0,0 +1,117 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  id: string;
+  heading: string;
+  description: string;
+  image: string;
+  url: string;
+}
+
+interface Feature72Props {
+  title: string;
+  description?: string;
+  buttonUrl?: string;
+  buttonText?: string;
+  features?: Feature[];
+  className?: string;
+}
+
+const Feature72 = ({
+  title = "زمان حل مسئله را کوتاه کنید",
+  description = "پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.",
+  buttonUrl = "https://ShadcnBlocks",
+  buttonText = "رضایت مشتری",
+  features = [
+    {
+      id: "feature-1",
+      heading: "تاریخچه مشتری",
+      description:
+        "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+      image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      url: "https://ShadcnBlocks",
+    },
+    {
+      id: "feature-2",
+      heading: "صندوق یکپارچه",
+      description:
+        "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+      image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      url: "https://ShadcnBlocks",
+    },
+    {
+      id: "feature-3",
+      heading: "اولویت‌بندی تیکت",
+      description:
+        "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+      image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      url: "https://ShadcnBlocks",
+    },
+    {
+      id: "feature-4",
+      heading: "پایگاه دانش",
+      description:
+        "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
+      image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+      url: "https://ShadcnBlocks",
+    },
+  ],
+  className,
+}: Feature72Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 lg:max-w-sm">
+          <h2 className="mb-3 text-3xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+            {title}
+          </h2>
+          {description && (
+            <p className="mb-8 text-muted-foreground lg:text-lg">
+              {description}
+            </p>
+          )}
+          {buttonUrl && (
+            <Button variant="link" asChild>
+              <a
+                href={buttonUrl}
+                className="group flex items-center gap-2 font-medium md:text-base lg:text-lg"
+              >
+                {buttonText}
+                <ArrowRight className="size-4 rtl:rotate-180" />
+              </a>
+            </Button>
+          )}
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:gap-8">
+          {features.map((feature) => (
+            <div
+              key={feature.id}
+              className="flex flex-col overflow-clip rounded-xl border border-border"
+            >
+              <a href={feature.url}>
+                <img
+                  src={feature.image}
+                  alt={`نمای ${feature.heading}`}
+                  className="aspect-16/9 h-full w-full object-cover object-center transition-opacity hover:opacity-80"
+                />
+              </a>
+              <div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+                <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+                  {feature.heading}
+                </h3>
+                <p className="text-muted-foreground lg:text-lg">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature72 };
diff --git a/blocks/feature73.tsx b/blocks/feature73.tsx
new file mode 100644
index 0000000..f2666b4
--- /dev/null
+++ b/blocks/feature73.tsx
@@ -0,0 +1,109 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  id: string;
+  heading: string;
+  description: string;
+  image: string;
+  url: string;
+}
+
+interface Feature73Props {
+  title: string;
+  description?: string;
+  buttonUrl?: string;
+  buttonText?: string;
+  features?: Feature[];
+  className?: string;
+}
+
+const Feature73 = ({
+  title = "با هوش مصنوعی سریع‌تر تصمیم بگیرید",
+  description = "مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.",
+  buttonUrl = "https://ShadcnBlocks",
+  buttonText = "تحلیل احساس",
+  features = [
+    {
+      id: "feature-1",
+      heading: "تحلیل احساس",
+      description:
+        "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+      image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      url: "https://ShadcnBlocks",
+    },
+    {
+      id: "feature-2",
+      heading: "دستیار گفتگو",
+      description:
+        "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+      image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      url: "https://ShadcnBlocks",
+    },
+    {
+      id: "feature-3",
+      heading: "خلاصه‌سازی هوشمند",
+      description:
+        "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+      image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      url: "https://ShadcnBlocks",
+    },
+  ],
+  className,
+}: Feature73Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 lg:max-w-sm">
+          <h2 className="mb-3 text-3xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+            {title}
+          </h2>
+          {description && (
+            <p className="mb-8 text-muted-foreground lg:text-lg">
+              {description}
+            </p>
+          )}
+          {buttonUrl && (
+            <Button variant="link" asChild>
+              <a
+                href={buttonUrl}
+                className="group flex items-center gap-2 font-medium md:text-base lg:text-lg"
+              >
+                {buttonText}
+                <ArrowRight className="size-4 rtl:rotate-180" />
+              </a>
+            </Button>
+          )}
+        </div>
+        <div className="grid gap-6 md:grid-cols-3 lg:gap-8">
+          {features.map((feature) => (
+            <div
+              key={feature.id}
+              className="flex flex-col overflow-clip rounded-xl border border-border"
+            >
+              <a href={feature.url}>
+                <img
+                  src={feature.image}
+                  alt={`نمای ${feature.heading}`}
+                  className="aspect-16/9 h-full w-full object-cover object-center transition-opacity hover:opacity-80"
+                />
+              </a>
+              <div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+                <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+                  {feature.heading}
+                </h3>
+                <p className="text-muted-foreground lg:text-lg">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature73 };
diff --git a/blocks/feature74.tsx b/blocks/feature74.tsx
new file mode 100644
index 0000000..bea21e1
--- /dev/null
+++ b/blocks/feature74.tsx
@@ -0,0 +1,97 @@
+import { ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "نقش و دسترسی",
+    description:
+      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "تقویم تیم",
+    reversed: false,
+  },
+  {
+    title: "چک‌لیست تحویل",
+    description:
+      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "فضای همکاری تیمی",
+    reversed: true,
+  },
+];
+
+interface Feature74Props {
+  className?: string;
+}
+
+const Feature74 = ({ className }: Feature74Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-16 lg:px-16">
+        <div className="lg:max-w-sm">
+          <h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+            همکاری از راه دور را ساده کنید
+          </h2>
+          <p className="mb-8 text-muted-foreground lg:text-lg">
+            هر عضو بداند چه زمانی چه کاری دارد
+          </p>
+          <a
+            href="#"
+            className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
+          >
+            کار گروهی
+            <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+          </a>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:gap-8">
+          {features.map((feature) => {
+            const image = (
+              <div className="md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]">
+                <img
+                  src={feature.image}
+                  alt={feature.imageAlt}
+                  className="aspect-16/9 h-full w-full object-cover object-center"
+                />
+              </div>
+            );
+            const content = (
+              <div className="flex flex-col justify-center px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+                <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+                  {feature.title}
+                </h3>
+                <p className="text-muted-foreground lg:text-lg">
+                  {feature.description}
+                </p>
+              </div>
+            );
+
+            return (
+              <div
+                key={feature.title}
+                className={cn(
+                  "flex overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8",
+                  feature.reversed ? "flex-col-reverse" : "flex-col",
+                )}
+              >
+                {feature.reversed ? (
+                  <>
+                    {content}
+                    {image}
+                  </>
+                ) : (
+                  <>
+                    {image}
+                    {content}
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature74 };
diff --git a/blocks/feature75.tsx b/blocks/feature75.tsx
new file mode 100644
index 0000000..cb70648
--- /dev/null
+++ b/blocks/feature75.tsx
@@ -0,0 +1,67 @@
+import { ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const cards = [
+  {
+    href: "#",
+    tag: "فروش آنلاین",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+  },
+  {
+    href: "#",
+    tag: "فروشگاه",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+  },
+  {
+    href: "#",
+    tag: "تبدیل خرید",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+  },
+];
+
+interface Feature75Props {
+  className?: string;
+}
+
+const Feature75 = ({ className }: Feature75Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container grid gap-y-12 md:grid-cols-12 md:gap-x-6 md:gap-y-0">
+        <div className="md:col-span-6 lg:col-span-5">
+          <h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+            فروش آنلاین را مقیاس‌پذیر کنید
+          </h2>
+          <p className="mb-8 text-muted-foreground lg:text-lg">
+            تجربه خرید را روان‌تر بسازید
+          </p>
+        </div>
+        <div className="grid gap-y-5 md:col-span-6 md:gap-y-[1.875rem] lg:col-start-7">
+          {cards.map((card) => (
+            <a
+              key={card.tag}
+              href={card.href}
+              className="group flex flex-col justify-center overflow-clip rounded-2xl bg-accent px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12"
+            >
+              <p className="mb-3 text-xs font-medium tracking-wider">
+                {card.tag}
+              </p>
+              <p className="mb-12 font-semibold text-muted-foreground lg:text-xl">
+                {card.description}
+              </p>
+              <div className="flex w-fit items-center gap-4 rounded-full border border-primary px-6 py-4 group-hover:bg-primary group-hover:text-primary-foreground">
+                بیشتر بدانید
+                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature75 };
diff --git a/blocks/feature76.tsx b/blocks/feature76.tsx
new file mode 100644
index 0000000..e987a48
--- /dev/null
+++ b/blocks/feature76.tsx
@@ -0,0 +1,81 @@
+import { Blocks, BookOpen, Palette, Zap } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    title: "بهینه‌سازی محتوا",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: <Blocks className="size-10" strokeWidth={1.5} />,
+  },
+  {
+    id: "feature-2",
+    title: "تحلیل رقیب",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: <Palette className="size-10" strokeWidth={1.5} />,
+  },
+  {
+    id: "feature-3",
+    title: "لینک داخلی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    icon: <Zap className="size-10" strokeWidth={1.5} />,
+  },
+  {
+    id: "feature-4",
+    title: "گزارش Core Web Vitals",
+    description:
+      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
+    icon: <BookOpen className="size-10" strokeWidth={1.5} />,
+  },
+];
+
+interface Feature76Props {
+  className?: string;
+}
+
+const Feature76 = ({ className }: Feature76Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative pt-32", className)}>
+      <div className="relative z-10 container flex flex-col space-y-14">
+        <h2 className="px-6 text-3xl font-semibold md:mb-4 md:text-2xll lg:mb-6 lg:max-w-md lg:px-10">
+          رتبه کلمات کلیدی را پیگیری کنید
+        </h2>
+        <div className="relative mt-6 md:mt-10">
+          <div className="absolute inset-x-0 top-0 h-px bg-border" />
+          <div className="grid divide-border md:grid-cols-4 md:divide-s">
+            {features.map((feature) => (
+              <div
+                key={feature.id}
+                className="relative px-6 pb-20 md:pb-10 lg:px-10"
+              >
+                <div className="absolute inset-x-0 top-0 h-px bg-border md:hidden" />
+                <div className="relative -mt-6 mb-10 flex aspect-square w-12 items-center justify-center bg-background md:-mt-10 md:mb-10 md:w-20">
+                  {feature.icon}
+                </div>
+                <div>
+                  <h3 className="mb-3 max-w-xs text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+                    {feature.title}
+                  </h3>
+                  <p className="text-muted-foreground">{feature.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="absolute inset-x-0 bottom-0 h-px bg-border" />
+        </div>
+      </div>
+      <div className="absolute inset-0 container hidden h-full md:block">
+        <div className="relative h-full">
+          <div className="absolute inset-y-0 start-0 h-full w-px bg-border" />
+          <div className="absolute inset-y-0 end-0 h-full w-px bg-border" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature76 };
diff --git a/blocks/feature77.tsx b/blocks/feature77.tsx
new file mode 100644
index 0000000..0e64ad6
--- /dev/null
+++ b/blocks/feature77.tsx
@@ -0,0 +1,80 @@
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    href: "#",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+    imageAlt: "گزارش مالی یکپارچه",
+    title: "خرید و تأمین",
+    description:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+  },
+  {
+    href: "#",
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+    imageAlt: "داشبورد ERP",
+    title: "فاکتور و پرداخت",
+    description:
+      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+  },
+];
+
+interface Feature77Props {
+  className?: string;
+}
+
+const Feature77 = ({ className }: Feature77Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center">
+        <div className="text-center">
+          <h3 className="text-xl font-semibold text-pretty md:mb-4 lg:mb-6 lg:max-w-3xl lg:text-2xll">
+            گردش تأیید
+          </h3>
+        </div>
+      </div>
+      <div className="container mt-16">
+        <div className="relative">
+          <div className="grid border md:grid-cols-2 md:divide-s">
+            {features.map((feature) => (
+              <a
+                key={feature.title}
+                href={feature.href}
+                className="group relative flex flex-col items-center border-border pt-8 pb-8 text-center transition-all duration-200 md:border-t md:px-8 md:pt-12 md:pb-12 lg:px-12 lg:pt-16 lg:pb-20"
+              >
+                <div className="absolute top-0 h-px w-full bg-border md:hidden" />
+                <div className="mb-8 flex aspect-1/1 w-16 items-center justify-center md:w-[6.25rem] lg:mb-[3.25rem]">
+                  <img
+                    src={feature.image}
+                    alt={feature.imageAlt}
+                    className="h-full w-full object-contain object-center"
+                  />
+                </div>
+                <h2 className="mb-4 text-xl font-semibold md:mb-5">
+                  {feature.title}
+                </h2>
+                <p className="mb-auto text-muted-foreground">
+                  {feature.description}
+                </p>
+              </a>
+            ))}
+          </div>
+          <div className="absolute -start-[5px] -top-[5px]">
+            <div className="size-[12px] rounded-full bg-primary" />
+          </div>
+          <div className="absolute -end-[5px] -top-[5px]">
+            <div className="size-[12px] rounded-full bg-primary" />
+          </div>
+          <div className="absolute -start-[5px] -bottom-[5px]">
+            <div className="size-[12px] rounded-full bg-primary" />
+          </div>
+          <div className="absolute -end-[5px] -bottom-[5px]">
+            <div className="size-[12px] rounded-full bg-primary" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature77 };
diff --git a/blocks/feature78.tsx b/blocks/feature78.tsx
new file mode 100644
index 0000000..39ccc7c
--- /dev/null
+++ b/blocks/feature78.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { useState } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    id: "feature-1",
+    tabLabel: "داده سازمانی",
+    title: "گزارش‌ساز",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: "feature-2",
+    tabLabel: "هوش تجاری",
+    title: "Pivot تعاملی",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: "feature-3",
+    tabLabel: "گزارش‌گیری",
+    title: "داشبورد مدیریتی",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+];
+
+interface Feature78Props {
+  className?: string;
+}
+
+const Feature78 = ({ className }: Feature78Props) => {
+  const [selection, setSelection] = useState(features[0].id);
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="flex flex-col">
+        <div className="container">
+          <div className="text-right lg:max-w-3xl">
+            <h2 className="mb-2 text-xl font-semibold md:text-xl">
+              تصمیم استراتژیک را داده‌محور کنید
+            </h2>
+            <a
+              href="#"
+              className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
+            >
+              تحلیل پیشرفته
+              <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+            </a>
+          </div>
+        </div>
+        <div>
+          <Tabs dir="rtl" value={selection} onValueChange={setSelection}>
+            <div className="relative mt-6">
+              <div
+                dir="rtl"
+                className="flex justify-start overflow-x-auto overflow-y-hidden"
+              >
+                <div className="container min-w-fit">
+                  <TabsList>
+                    {features.map((feature) => (
+                      <TabsTrigger key={feature.id} value={feature.id}>
+                        {feature.tabLabel}
+                      </TabsTrigger>
+                    ))}
+                  </TabsList>
+                </div>
+                <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_left,var(--color-background)_0%,transparent_10%,transparent_90%,var(--color-background)_100%)] md:hidden" />
+              </div>
+            </div>
+            <div className="container">
+              {features.map((feature) => (
+                <TabsContent key={feature.id} value={feature.id}>
+                  <div
+                    dir="rtl"
+                    className="mt-12 flex flex-col md:grid md:grid-cols-2 md:gap-6 lg:gap-8"
+                  >
+                    <div
+                      className="flex flex-col items-start justify-center py-8 text-right md:px-8 md:py-10 lg:px-10 lg:py-12"
+                    >
+                      <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+                        {feature.title}
+                      </h3>
+                      <p className="text-muted-foreground lg:text-lg">
+                        {feature.description}
+                      </p>
+                    </div>
+                    <div
+                      className="order-first overflow-clip rounded-3xl md:order-2 md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]"
+                    >
+                      <img
+                        src={feature.image}
+                        alt={`نمای ${feature.title}`}
+                        className="aspect-16/9 h-full w-full object-cover object-center"
+                      />
+                    </div>
+                  </div>
+                </TabsContent>
+              ))}
+            </div>
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature78 };
diff --git a/blocks/feature79.tsx b/blocks/feature79.tsx
new file mode 100644
index 0000000..dc8f0c8
--- /dev/null
+++ b/blocks/feature79.tsx
@@ -0,0 +1,96 @@
+import { ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const featuredCard = {
+  href: "#",
+  image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+  imageAlt: "داشبورد مدیریت ارتباط با مشتری",
+  tag: "مدیریت فروش",
+  title: "پروفایل ۳۶۰ درجه مشتری",
+  description:
+    "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+};
+
+const listItems = [
+  {
+    href: "#",
+    title: "اتوماسیون مراحل فروش",
+  },
+  {
+    href: "#",
+    title: "پیش‌بینی درآمد",
+  },
+  {
+    href: "#",
+    title: "یادآور پیگیری هوشمند",
+  },
+];
+
+interface Feature79Props {
+  className?: string;
+}
+
+const Feature79 = ({ className }: Feature79Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center gap-16 sm:gap-20 md:gap-24 lg:px-16">
+        <div className="text-center">
+          <p className="mb-6 text-xs font-medium tracking-wider">
+            سامانه CRM
+          </p>
+          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
+            ارتباط با مشتری
+          </h3>
+          <p className="text-muted-foreground lg:max-w-2xl lg:text-lg">
+            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
+          </p>
+        </div>
+        <div className="flex flex-col gap-y-12 md:col-span-2 md:grid md:grid-cols-2 md:gap-x-6 lg:gap-8">
+          <a
+            href={featuredCard.href}
+            className="group overflow-clip rounded-t-xl border border-border transition-shadow hover:shadow-lg md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]"
+          >
+            <div>
+              <img
+                src={featuredCard.image}
+                alt={featuredCard.imageAlt}
+                className="aspect-16/9 h-full w-full object-cover object-center"
+              />
+            </div>
+            <div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+              <p className="mb-6 text-xs font-medium tracking-wider text-muted-foreground">
+                {featuredCard.tag}
+              </p>
+              <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+                {featuredCard.title}
+              </h3>
+              <p className="mb-8 text-muted-foreground lg:text-lg">
+                {featuredCard.description}
+              </p>
+              <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+            </div>
+          </a>
+          <div className="flex flex-col justify-between gap-y-12 md:px-8 lg:px-10">
+            {listItems.map((item) => (
+              <a
+                key={item.title}
+                href={item.href}
+                className="group flex flex-col justify-between gap-4 border border-border px-8 py-8 md:flex-row md:items-center md:border-0 md:border-b md:px-0 md:py-10 lg:py-12"
+              >
+                <h3 className="mb-3 text-lg font-semibold md:mb-0 md:text-xl">
+                  {item.title}
+                </h3>
+                <div className="flex w-fit items-center rounded-full border-0 border-border transition-transform group-hover:translate-x-1 md:border md:px-6 md:py-3 md:group-hover:bg-primary md:group-hover:text-primary-foreground rtl:group-hover:-translate-x-1">
+                  <ArrowRight className="size-4 rtl:rotate-180" />
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature79 };
diff --git a/blocks/feature8.tsx b/blocks/feature8.tsx
new file mode 100644
index 0000000..2e52e4e
--- /dev/null
+++ b/blocks/feature8.tsx
@@ -0,0 +1,110 @@
+import { ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Feature8Props {
+  className?: string;
+}
+
+const Feature8 = ({ className }: Feature8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-6xl">
+        <div className="flex flex-col items-center gap-4 md:gap-6">
+          <Badge variant="outline">کار گروهی</Badge>
+          <h1 className="max-w-2xl text-center text-3xl font-light md:text-2xll">
+            همکاری از راه دور را ساده کنید
+          </h1>
+        </div>
+        <div className="mt-16 flex flex-col justify-between gap-6 md:flex-row lg:mt-20 lg:gap-10">
+          <Card className="group p-6">
+            <a
+              href="#"
+              className={cn(
+                buttonVariants({ variant: "outline" }),
+                "ms-auto hidden w-fit cursor-pointer transition-all duration-200 group-hover:opacity-100 md:flex lg:translate-y-2 lg:opacity-0 lg:group-hover:translate-y-0",
+              )}
+            >
+              بیشتر بدانید
+              <ChevronRight className="ms-1 h-4 rtl:rotate-180" />
+            </a>
+            <div className="mt-6 flex gap-4">
+              <p className="text-lg font-light lg:text-xl">
+                اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
+              </p>
+              <a
+                href="#"
+                aria-label="بیشتر بدانید"
+                className={cn(
+                  buttonVariants({
+                    variant: "outline",
+                    size: "icon",
+                  }),
+                  "shrink-0 cursor-pointer md:hidden",
+                )}
+              >
+                <ChevronRight className="h-4 rtl:rotate-180" />
+              </a>
+            </div>
+            <div className="mt-10 flex items-center justify-between">
+              <p className="text-sm font-light lg:text-base">وظایف، فایل‌ها و گفتگوها در یک محیط کاری متمرکز می‌شود. تیم‌ها کمتر در پیگیری وضعیت وقت می‌گذارند و بیشتر روی تحویل تمرکز می‌کنند.</p>
+              <img
+                src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+                alt="تقویم تیم"
+                className="h-6 dark:invert"
+              />
+            </div>
+          </Card>
+          <Card className="group p-6">
+            <a
+              href="#"
+              className={cn(
+                buttonVariants({ variant: "outline" }),
+                "ms-auto hidden w-fit cursor-pointer transition-all duration-200 group-hover:opacity-100 md:flex lg:translate-y-2 lg:opacity-0 lg:group-hover:translate-y-0",
+              )}
+            >
+              بیشتر بدانید
+              <ChevronRight className="ms-1 h-4 rtl:rotate-180" />
+            </a>
+            <div className="mt-6 flex gap-4">
+              <p className="text-lg font-light lg:text-xl">
+                نمای Kanban و Timeline به مدیران کمک می‌کند ظرفیت تیم را ببینند و اولویت‌ها را به‌موقع تنظیم کنند.
+              </p>
+              <a
+                href="#"
+                aria-label="بیشتر بدانید"
+                className={cn(
+                  buttonVariants({
+                    variant: "outline",
+                    size: "icon",
+                  }),
+                  "shrink-0 cursor-pointer md:hidden",
+                )}
+              >
+                <ChevronRight className="h-4 rtl:rotate-180" />
+              </a>
+            </div>
+            <div className="mt-10 flex items-center justify-between">
+              <p className="text-sm font-light lg:text-base">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
+              <img
+                src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
+                alt="فضای همکاری تیمی"
+                className="h-4 dark:hidden"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
+                alt="برد مدیریت پروژه"
+                className="hidden h-4 dark:block"
+              />
+            </div>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature8 };
diff --git a/blocks/feature80.tsx b/blocks/feature80.tsx
new file mode 100644
index 0000000..ece55a6
--- /dev/null
+++ b/blocks/feature80.tsx
@@ -0,0 +1,99 @@
+import { ArrowRight, ChevronRight } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+const actionCards = [
+  {
+    href: "#",
+    title: "همکاری فروش و بازاریابی",
+    type: "avatars" as const,
+  },
+  {
+    href: "#",
+    title: "اولویت‌بندی سرنخ",
+    type: "icon" as const,
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+    imageAlt: "صف اولویت سرنخ‌ها",
+  },
+];
+
+interface Feature80Props {
+  className?: string;
+}
+
+const Feature80 = ({ className }: Feature80Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-8 md:flex-row">
+          <div className="aspect-5/6 overflow-clip rounded-3xl bg-accent">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="داشبورد عملکرد فروش"
+              className="h-full w-full object-cover object-center"
+            />
+          </div>
+          <div className="flex shrink-0 flex-col justify-center md:w-1/2 md:py-16 lg:ms-8 lg:ps-24 lg:text-start 2xl:ps-32">
+            <p className="mb-6 text-xs font-medium tracking-wider">
+              تیم فروش
+            </p>
+            <h2 className="mb-6 text-3xl font-bold text-pretty lg:text-2xll">
+              بستن معامله
+            </h2>
+            <p className="mb-6 text-muted-foreground lg:text-xl">
+              پیش‌بینی درآمد را دقیق‌تر کنید
+            </p>
+            <a
+              href="#"
+              className="group mb-12 flex items-center pb-3 text-accent-foreground lg:text-xl"
+            >
+              بیشتر بدانید
+              <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+            </a>
+            <div className="flex flex-col gap-6 md:flex-row">
+              {actionCards.map((card) => (
+                <a
+                  key={card.title}
+                  href={card.href}
+                  className="group flex-1 rounded-xl border border-border p-6"
+                >
+                  <div className="flex items-start justify-between">
+                    {card.type === "avatars" ? (
+                      <div className="flex items-center">
+                        <Avatar className="size-10">
+                          <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                          <AvatarFallback>SB</AvatarFallback>
+                        </Avatar>
+                        <Avatar className="-ms-3 size-10">
+                          <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
+                          <AvatarFallback>RA</AvatarFallback>
+                        </Avatar>
+                        <Avatar className="-ms-3 size-10">
+                          <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
+                          <AvatarFallback>JS</AvatarFallback>
+                        </Avatar>
+                      </div>
+                    ) : (
+                      <div className="flex items-center">
+                        <img
+                          src={card.image}
+                          alt={card.imageAlt}
+                          className="size-12 object-cover object-center"
+                        />
+                      </div>
+                    )}
+                    <ChevronRight className="mt-2 size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                  </div>
+                  <p className="mt-8 font-medium lg:text-lg">{card.title}</p>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature80 };
diff --git a/blocks/feature81.tsx b/blocks/feature81.tsx
new file mode 100644
index 0000000..88ec31a
--- /dev/null
+++ b/blocks/feature81.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    id: "shadcn",
+    title: "shadcn/ui",
+    image:
+      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
+    imageAlt: "تحلیل عملکرد کمپین",
+    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg",
+    logoAlt: "کمپین",
+  },
+  {
+    id: "astro",
+    title: "Astro",
+    image:
+      "/block-media/external/unsplash/photo-1548324215-9133768e4094.jpg",
+    imageAlt: "نمودار ROI",
+    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+    logoAlt: "رشد برند",
+  },
+  {
+    id: "city",
+    title: "ردیابی UTM",
+    image:
+      "/block-media/external/unsplash/photo-1550070881-a5d71eda5800.jpg",
+    imageAlt: "داشبورد بازاریابی دیجیتال",
+  },
+] as const;
+
+interface Feature81Props {
+  className?: string;
+}
+
+const Feature81 = ({ className }: Feature81Props) => {
+  const [activeId, setActiveId] = useState<string>(items[0].id);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center gap-8 md:gap-16 lg:px-16">
+        <div className="flex flex-col items-center text-center">
+          <p className="mb-6 text-xs font-medium tracking-wider">
+            بازاریابی دیجیتال
+          </p>
+          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
+            گزارش ROI
+          </h3>
+          <p className="mb-8 text-muted-foreground lg:text-lg">
+            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+          </p>
+        </div>
+        <div className="flex w-full flex-col gap-4 sm:gap-6 lg:h-80 lg:flex-row lg:gap-8">
+          {items.map((item) => {
+            const isOpen = activeId === item.id;
+
+            return (
+              <button
+                key={item.id}
+                type="button"
+                data-state={isOpen ? "open" : "closed"}
+                aria-label={item.title}
+                onClick={() => setActiveId(item.id)}
+                className={cn(
+                  "group relative cursor-pointer overflow-clip rounded-lg text-start transition-all duration-500 ease-out",
+                  isOpen
+                    ? "min-h-56 flex-2 lg:min-h-0"
+                    : "min-h-28 flex-1 lg:min-h-0",
+                )}
+              >
+                <img
+                  src={item.image}
+                  alt={item.imageAlt}
+                  className="absolute h-full w-full object-cover object-center transition-transform duration-500 group-data-[state=closed]:scale-105"
+                />
+                <div
+                  className={cn(
+                    "relative flex h-full w-full flex-col items-start gap-4 px-4 py-5 transition-colors duration-500 md:p-6 lg:p-8",
+                    isOpen
+                      ? "justify-between bg-black/60 hover:bg-black/65"
+                      : "justify-end bg-black/75 hover:bg-black/80",
+                  )}
+                >
+                  {"logo" in item && item.logo && (
+                    <img
+                      src={item.logo}
+                      alt={item.logoAlt}
+                      className={cn(
+                        "h-6 max-w-48 invert transition-all duration-500 sm:h-8 md:h-10",
+                        isOpen
+                          ? "mb-8 opacity-100"
+                          : "mb-0 h-0 max-h-0 opacity-0",
+                      )}
+                    />
+                  )}
+                  <div
+                    className={cn(
+                      "flex items-center text-xs font-medium text-white transition-all duration-500 md:text-base lg:text-lg",
+                      isOpen
+                        ? "translate-y-0 opacity-100"
+                        : "pointer-events-none h-0 translate-y-2 overflow-hidden opacity-0",
+                    )}
+                  >
+                    جذب مخاطب
+                    <ArrowRight className="ms-2 size-4 shrink-0 transition-transform group-hover:translate-x-1 group-data-[state=open]:group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 rtl:group-data-[state=open]:group-hover:-translate-x-1" />
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature81 };
diff --git a/blocks/feature82.tsx b/blocks/feature82.tsx
new file mode 100644
index 0000000..430c3ac
--- /dev/null
+++ b/blocks/feature82.tsx
@@ -0,0 +1,83 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    title: "Slack",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+  },
+  {
+    title: "لاگ اجرا",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+  },
+  {
+    title: "Dropbox",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+  },
+  {
+    title: "GitHub",
+    description:
+      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    image: "/block-media/shadcnblocks/block/block-4.svg",
+  },
+];
+
+interface Feature82Props {
+  className?: string;
+}
+
+const Feature82 = ({ className }: Feature82Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid place-items-center items-center gap-4 lg:grid-cols-5 lg:gap-16">
+          <h1 className="text-center text-xl font-semibold text-balance lg:col-span-2 lg:text-start lg:text-2xll">
+            فرایندها را استاندارد و سریع کنید
+          </h1>
+          <p className="text-center text-lg text-muted-foreground lg:col-span-2 lg:text-start">
+            قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+          </p>
+          <Button className="mx-auto w-fit lg:mx-0 lg:ms-auto">
+            فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
+          </Button>
+        </div>
+        <Separator className="mt-8 mb-12" />
+        <ul className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-20">
+          {integrations.map((integration) => (
+            <li key={integration.title}>
+              <div>
+                <img
+                  src={integration.image}
+                  alt={`لوگوی ${integration.title}`}
+                  className="h-auto w-16"
+                />
+                <h3 className="my-2 text-xl font-bold">{integration.title}</h3>
+                <p className="text-sm text-muted-foreground">
+                  {integration.description}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
+        <a
+          href="#"
+          className="mt-12 flex items-center justify-center gap-1 text-lg font-semibold underline"
+        >
+          اتوماسیون را در کل سازمان یکپارچه کنید
+          <ArrowRight className="h-auto w-4 rtl:rotate-180" />
+        </a>
+      </div>
+    </section>
+  );
+};
+
+export { Feature82 };
diff --git a/blocks/feature83.tsx b/blocks/feature83.tsx
new file mode 100644
index 0000000..fdd1301
--- /dev/null
+++ b/blocks/feature83.tsx
@@ -0,0 +1,62 @@
+import { HandHelping, Users } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "گزارش زمان‌بندی‌شده",
+    description:
+      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    icon: HandHelping,
+  },
+  {
+    title: "تحلیل کوHORT",
+    description:
+      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    icon: Users,
+  },
+];
+
+interface Feature83Props {
+  className?: string;
+}
+
+const Feature83 = ({ className }: Feature83Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-16 lg:grid-cols-2">
+          <div className="relative order-2 grid gap-4 sm:grid-cols-2 lg:order-none">
+            {features.map((feature) => (
+              <div
+                key={feature.title}
+                className="flex flex-col rounded-md border bg-background p-4"
+              >
+                <div className="mb-6 flex size-12 items-center justify-center rounded-md border">
+                  <feature.icon className="h-auto w-5" />
+                </div>
+                <h3 className="mb-2 font-semibold">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+            <div className="absolute -bottom-28 -z-10 h-full w-full [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_20%,transparent_100%)] [background-size:12px_12px] opacity-25 sm:bg-[radial-gradient(hsl(var(--muted-foreground))_1px,transparent_1px)]" />
+          </div>
+          <div className="order-1 mx-auto flex max-w-3xl flex-col items-center gap-5 text-center lg:order-none lg:items-start lg:text-start">
+            <Badge variant="outline" className="w-fit">
+              تحلیل داده
+            </Badge>
+            <h2 className="text-xl font-bold">داده پراکنده را به تصمیم تبدیل کنید</h2>
+            <p className="text-lg text-muted-foreground">
+              شاخص‌های کلیدی را یکجا ببینید
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature83 };
diff --git a/blocks/feature85.tsx b/blocks/feature85.tsx
new file mode 100644
index 0000000..fff2b21
--- /dev/null
+++ b/blocks/feature85.tsx
@@ -0,0 +1,112 @@
+import {
+  BarChartHorizontal,
+  BatteryCharging,
+  CircleHelp,
+  Layers,
+  WandSparkles,
+  ZoomIn,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const reasons = [
+  {
+    title: "پاسخ آماده",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    icon: ZoomIn,
+  },
+  {
+    title: "SLA هوشمند",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    icon: BarChartHorizontal,
+  },
+  {
+    title: "نظرسنجی رضایت",
+    description:
+      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+    icon: CircleHelp,
+  },
+  {
+    title: "تخصیص خودکار",
+    description:
+      "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
+    icon: WandSparkles,
+  },
+  {
+    title: "تاریخچه مشتری",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    icon: Layers,
+  },
+  {
+    title: "صندوق یکپارچه",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+    icon: BatteryCharging,
+  },
+];
+
+interface Feature85Props {
+  className?: string;
+}
+
+const Feature85 = ({ className }: Feature85Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="border-t">
+        <div>
+          <div className="relative container overflow-hidden border-x border-muted-foreground/20 py-32">
+            <div className="isolate mx-auto flex max-w-3xl flex-col gap-20">
+              <div className="bg absolute -start-px -top-1 -z-10 h-full w-full bg-[linear-gradient(to_left,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_100%_120%_at_50%_50%,transparent_20%,#000_100%)] bg-[size:64px_64px] opacity-20 [clip-path:inset(0px_0px_50%_0px)]" />
+              <h2 className="text-center text-3xl md:text-2xll">
+                زمان حل مسئله را کوتاه کنید
+              </h2>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
+                alt="مدیریت تیکت"
+                className="max-h-64 w-full rounded-xl object-cover"
+              />
+              <p className="text-center text-xl md:text-3xl">
+                پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
+              </p>
+            </div>
+          </div>
+          <div className="border-t border-muted-foreground/20">
+            <div className="container border-x border-muted-foreground/20 px-0">
+              <div className="grid gap-px bg-muted-foreground/20 md:grid-cols-2 lg:grid-cols-3">
+                {reasons.map((reason) => (
+                  <div
+                    key={reason.title}
+                    className="flex gap-4 bg-muted px-6 pt-8 pb-8 md:flex-col md:gap-0 md:px-8 md:pt-16"
+                  >
+                    <reason.icon
+                      className="size-7 shrink-0 md:size-8"
+                      strokeWidth={1.5}
+                    />
+                    <div>
+                      <h3 className="mb-2 md:mt-6 md:text-lg">
+                        {reason.title}
+                      </h3>
+                      <p className="text-muted-foreground">
+                        {reason.description}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="border-x border-t border-muted-foreground/20">
+              <div className="container border-x border-muted-foreground/20 py-16" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature85 };
diff --git a/blocks/feature86.tsx b/blocks/feature86.tsx
new file mode 100644
index 0000000..693863f
--- /dev/null
+++ b/blocks/feature86.tsx
@@ -0,0 +1,53 @@
+import { Play } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Feature86Props {
+  className?: string;
+}
+
+const Feature86 = ({ className }: Feature86Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
+      <div className="pointer-events-none absolute inset-0 z-10 bg-[50%_0] bg-[url('/block-media/shadcnblocks/block/shadow-overlay.png')] bg-no-repeat" />
+      <div className="container p-6 md:p-16">
+        <div className="grid gap-12 lg:grid-cols-3">
+          <div className="flex flex-col justify-between gap-8">
+            <div>
+              <Badge variant="outline">اتوماسیون AI</Badge>
+              <h2 className="my-9 text-3xl font-medium md:text-2xll">
+                با هوش مصنوعی سریع‌تر تصمیم بگیرید
+                <br />
+                <span className="text-muted-foreground">کارهای تکراری را به AI بسپارید</span>
+              </h2>
+              <p className="text-muted-foreground">
+                مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
+              </p>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Separator />
+              <p className="text-muted-foreground">
+                از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم می‌کند و کیفیت خروجی را بالا می‌برد.
+              </p>
+              <a href="#" className="flex items-center gap-1 hover:underline">
+                <Play className="h-auto w-4" />
+                مشاهده دمو
+              </a>
+            </div>
+          </div>
+          <div className="flex aspect-square w-full items-center justify-center bg-muted px-6 md:px-8 lg:col-span-2">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
+              alt="دستیار هوش مصنوعی"
+              className="aspect-video max-h-[464px] w-full rounded-lg object-cover"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature86 };
diff --git a/blocks/feature87.tsx b/blocks/feature87.tsx
new file mode 100644
index 0000000..898e87a
--- /dev/null
+++ b/blocks/feature87.tsx
@@ -0,0 +1,62 @@
+import { CheckCircle, Edit, List, MessagesSquare, Timer } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const capabilities = [
+  { label: "کار گروهی", icon: MessagesSquare },
+  { label: "همکاری تیمی", icon: Edit },
+  { label: "مدیریت پروژه", icon: CheckCircle },
+  { label: "هم‌راستایی", icon: List },
+  { label: "کار گروهی", icon: Timer },
+];
+
+interface Feature87Props {
+  className?: string;
+}
+
+const Feature87 = ({ className }: Feature87Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
+      <div className="pointer-events-none absolute inset-0 z-10 bg-[50%_0] bg-[url('/block-media/shadcnblocks/block/shadow-overlay.png')] bg-no-repeat" />
+      <div className="container p-6 md:p-16">
+        <div className="grid gap-12 lg:grid-cols-3">
+          <div className="flex flex-col justify-between gap-8">
+            <div>
+              <Badge variant="outline">همکاری تیمی</Badge>
+              <h2 className="my-9 text-3xl font-medium md:text-2xll">
+                همکاری از راه دور را ساده کنید
+                <br />
+                <span className="text-muted-foreground">هر عضو بداند چه زمانی چه کاری دارد</span>
+              </h2>
+              <p className="text-muted-foreground">
+                اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
+              </p>
+            </div>
+            <div className="flex flex-col gap-3">
+              {capabilities.map((item) => (
+                <div key={item.label} className="contents">
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <item.icon className="h-auto w-4 shrink-0" />
+                    {item.label}
+                  </div>
+                  <Separator />
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flex aspect-square w-full items-center justify-center overflow-hidden bg-muted px-6 md:px-8 lg:col-span-2">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+              alt="تقویم تیم"
+              className="max-h-[550px] w-full translate-x-1/4 rounded-lg object-cover rtl:-translate-x-1/4"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature87 };
diff --git a/blocks/feature89.tsx b/blocks/feature89.tsx
new file mode 100644
index 0000000..97f886f
--- /dev/null
+++ b/blocks/feature89.tsx
@@ -0,0 +1,89 @@
+import { DollarSign, KeyRound, Timer } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const benefits = [
+  {
+    title: "مدیریت محصول",
+    description:
+      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
+    icon: Timer,
+  },
+  {
+    title: "پرداخت امن",
+    description:
+      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    icon: DollarSign,
+  },
+  {
+    title: "ردیابی سفارش",
+    description:
+      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
+    icon: KeyRound,
+  },
+];
+
+interface Feature89Props {
+  className?: string;
+}
+
+const Feature89 = ({ className }: Feature89Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("overflow-hidden py-32", className)}>
+      <div className="relative container">
+        <div className="pointer-events-none absolute inset-0 -top-20 -z-10 mx-auto hidden h-[500px] w-[500px] bg-[radial-gradient(var(--color-gray-400)_1px,transparent_1px)] [mask-image:radial-gradient(circle_at_center,white_250px,transparent_250px)] [background-size:6px_6px] opacity-25 lg:block" />
+        <div className="relative flex justify-between gap-16">
+          <div className="pointer-events-none absolute inset-0 hidden bg-linear-to-t from-background via-transparent to-transparent lg:block" />
+
+          <div className="w-full max-w-96 shrink-0 justify-between">
+            <p className="font-mono text-xs text-muted-foreground">
+              فروش آنلاین
+            </p>
+            <h2 className="mt-6 mb-3 text-3xl font-medium lg:text-xl">
+              فروشگاه
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              فروش آنلاین را مقیاس‌پذیر کنید
+            </p>
+          </div>
+          <div className="hidden w-full max-w-3xl shrink-0 lg:block">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="مدیریت سفارش"
+              className="max-h-[450px] w-full max-w-3xl min-w-[450px] rounded-lg border object-cover"
+            />
+          </div>
+        </div>
+        <div className="relative mt-8 grid md:grid-cols-3">
+          {benefits.map((benefit) => (
+            <div
+              key={benefit.title}
+              className="flex flex-col gap-y-6 px-2 py-10 md:p-6 lg:p-8"
+            >
+              <benefit.icon className="size-6 shrink-0" />
+              <div>
+                <h3 className="text-lg font-medium">{benefit.title}</h3>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {benefit.description}
+                </p>
+              </div>
+            </div>
+          ))}
+          <div className="absolute -inset-x-4 top-0 h-px bg-input md:hidden" />
+          <div className="absolute -inset-x-4 top-[-0.5px] row-start-2 h-px bg-input md:hidden" />
+          <div className="absolute -inset-x-4 top-[-0.5px] row-start-3 h-px bg-input md:hidden" />
+          <div className="absolute -inset-x-4 bottom-0 row-start-4 h-px bg-input md:hidden" />
+          <div className="absolute -start-2 -top-2 bottom-0 w-px bg-input md:hidden" />
+          <div className="absolute -end-2 -top-2 bottom-0 col-start-2 w-px bg-input md:hidden" />
+          <div className="absolute -inset-x-2 top-0 hidden h-px bg-input md:block" />
+          <div className="absolute -top-2 bottom-0 start-0 hidden w-px bg-input md:block" />
+          <div className="absolute -top-2 -start-px bottom-0 col-start-2 hidden w-px bg-input md:block" />
+          <div className="absolute -top-2 -start-px bottom-0 col-start-3 hidden w-px bg-input md:block" />
+          <div className="absolute -top-2 end-0 bottom-0 hidden w-px bg-input md:block" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature89 };
diff --git a/blocks/feature9.tsx b/blocks/feature9.tsx
new file mode 100644
index 0000000..ef5a8e3
--- /dev/null
+++ b/blocks/feature9.tsx
@@ -0,0 +1,72 @@
+import { ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Feature9Props {
+  className?: string;
+}
+
+const Feature9 = ({ className }: Feature9Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6">
+          <Badge variant="outline">فروش آنلاین</Badge>
+          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
+            فروش آنلاین را مقیاس‌پذیر کنید
+          </h2>
+          <p className="text-muted-foreground lg:text-lg">
+            تجربه خرید را روان‌تر بسازید
+          </p>
+          <div className="mt-6 flex flex-col gap-6 lg:flex-row">
+            <Card className="flex flex-col justify-between gap-5 lg:w-1/3">
+              <CardHeader className="items-start">
+                <Badge variant="outline">فروشگاه</Badge>
+              </CardHeader>
+              <CardContent className="text-lg lg:text-xl">
+                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+              </CardContent>
+              <CardFooter>
+                <Button variant="outline">
+                  تبدیل خرید
+                  <ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+                </Button>
+              </CardFooter>
+            </Card>
+            <div className="lg:w-1/3">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="مدیریت سفارش"
+                className="h-full max-h-96 w-full rounded-md object-cover"
+              />
+            </div>
+            <Card className="flex flex-col justify-between gap-5 lg:w-1/3">
+              <CardHeader className="items-start">
+                <Badge variant="outline">مدیریت سفارش</Badge>
+              </CardHeader>
+              <CardContent className="text-lg lg:text-xl">
+                محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.
+              </CardContent>
+              <CardFooter>
+                <Button variant="outline">
+                  فروش آنلاین
+                  <ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+                </Button>
+              </CardFooter>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature9 };
diff --git a/blocks/feature90.tsx b/blocks/feature90.tsx
new file mode 100644
index 0000000..ece3481
--- /dev/null
+++ b/blocks/feature90.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const logos = [
+  "/block-media/shadcnblocks/block/block-1.svg",
+  "/block-media/shadcnblocks/block/block-2.svg",
+  "/block-media/shadcnblocks/block/block-3.svg",
+  "/block-media/shadcnblocks/block/block-4.svg",
+  "/block-media/shadcnblocks/block/block-5.svg",
+  "/block-media/shadcnblocks/block/block-1.svg",
+  "/block-media/shadcnblocks/block/block-2.svg",
+  "/block-media/shadcnblocks/block/block-3.svg",
+];
+
+interface Feature90Props {
+  className?: string;
+}
+
+const Feature90 = ({ className }: Feature90Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/10 py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
+          <h2 className="mb-2 text-center text-xl font-extrabold text-balance lg:text-2xll">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h2>
+          <p className="text-center text-lg text-muted-foreground lg:text-xl">
+            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+          </p>
+          <Button variant="outline" className="mt-6">
+            ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.
+          </Button>
+        </div>
+        <div className="my-14">
+          <div className="flex justify-center">
+            {logos.map((logo, index) => (
+              <span
+                key={`${logo}-${index}`}
+                className={cn(
+                  "flex aspect-square h-[13vw] min-h-10 shrink-0 items-center justify-center rounded-full border-2 border-background bg-muted md:h-28",
+                  index > 0 && "-ms-4 sm:-ms-5",
+                )}
+              >
+                <img
+                  src={logo}
+                  alt={`لوگوی یکپارچه‌سازی ${(index + 1).toLocaleString("fa-IR")}`}
+                  className="h-auto w-[8vw] max-w-12 md:w-12"
+                />
+              </span>
+            ))}
+          </div>
+        </div>
+        <div className="text-center text-sm">
+          ترافیک ارگانیک
+          <a href="#" className="ms-1 font-bold underline">
+            با SEO دقیق‌تر رشد کنید
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature90 };
diff --git a/blocks/feature91.tsx b/blocks/feature91.tsx
new file mode 100644
index 0000000..77f55e9
--- /dev/null
+++ b/blocks/feature91.tsx
@@ -0,0 +1,138 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  ArrowRight,
+  Atom,
+  Box,
+  GitGraph,
+  Hourglass,
+  Layout,
+  ShieldCheck,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type PanelLink = { href: string; label: string };
+type PanelItem = { icon: LucideIcon; text: string };
+
+const panels: {
+  id: string;
+  title: string;
+  description: string;
+  links: PanelLink[];
+  items: PanelItem[];
+  variant: "light" | "dark";
+}[] = [
+  {
+    id: "team-leads",
+    title: "مدیریت دارایی",
+    description:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    links: [
+      { href: "#", label: "یکپارچگی" },
+      { href: "#", label: "عملیات" },
+    ],
+    items: [
+      {
+        icon: Box,
+        text: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+      },
+      {
+        icon: GitGraph,
+        text: "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+      },
+      {
+        icon: Atom,
+        text: "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
+      },
+    ],
+    variant: "light",
+  },
+  {
+    id: "developers",
+    title: "ERP",
+    description:
+      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
+    links: [
+      { href: "#", label: "ERP" },
+      { href: "#", label: "ERP" },
+    ],
+    items: [
+      {
+        icon: Hourglass,
+        text: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
+      },
+      {
+        icon: Layout,
+        text: "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
+      },
+      {
+        icon: ShieldCheck,
+        text: "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
+      },
+    ],
+    variant: "dark",
+  },
+];
+
+interface Feature91Props {
+  className?: string;
+}
+
+const Feature91 = ({ className }: Feature91Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto grid max-w-7xl gap-y-6 lg:grid-cols-2">
+          {panels.map((panel) => (
+            <div
+              key={panel.id}
+              className={cn(
+                "rounded-md border p-6 md:p-10",
+                panel.variant === "light" &&
+                  "lg:rounded-s-md lg:rounded-e-none lg:border-y lg:border-s lg:border-e-0",
+                panel.variant === "dark" &&
+                  "dark bg-background text-primary lg:rounded-s-none lg:rounded-e-md",
+              )}
+            >
+              <h2 className="mb-6 text-3xl font-semibold md:text-xl">
+                {panel.title}
+              </h2>
+              <p className="mb-6 text-lg text-muted-foreground">
+                {panel.description}
+              </p>
+              <div className="flex flex-col gap-4">
+                {panel.links.map((link) => (
+                  <a
+                    key={link.label}
+                    href={link.href}
+                    className="flex items-center gap-2 text-lg font-medium"
+                  >
+                    {link.label}
+                    <ArrowRight className="h-auto w-4 rtl:rotate-180" />
+                  </a>
+                ))}
+              </div>
+              <div className="mt-10">
+                {panel.items.map((item, index) => (
+                  <div
+                    key={item.text}
+                    className={cn(
+                      "flex items-center gap-7 py-6",
+                      index === 1 &&
+                        "border-y border-dashed border-primary",
+                    )}
+                  >
+                    <item.icon className="h-auto w-8 shrink-0" />
+                    <p>{item.text}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature91 };
diff --git a/blocks/feature92.tsx b/blocks/feature92.tsx
new file mode 100644
index 0000000..c0b047e
--- /dev/null
+++ b/blocks/feature92.tsx
@@ -0,0 +1,90 @@
+import type { IconType } from "react-icons";
+import {
+  FaDiscord,
+  FaLinkedin,
+  FaRedditAlien,
+  FaTelegramPlane,
+  FaTwitter,
+} from "react-icons/fa";
+
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    name: "Figma",
+    logo: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    description:
+      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+  },
+  {
+    name: "TailwindCSS",
+    logo: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+    description:
+      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
+  },
+  {
+    name: "shadcn/ui",
+    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
+    description:
+      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
+  },
+];
+
+const socialPlatforms: { name: string; icon: IconType }[] = [
+  { name: "Discord", icon: FaDiscord },
+  { name: "Reddit", icon: FaRedditAlien },
+  { name: "Twitter", icon: FaTwitter },
+  { name: "Telegram", icon: FaTelegramPlane },
+  { name: "LinkedIn", icon: FaLinkedin },
+];
+
+interface Feature92Props {
+  className?: string;
+}
+
+const Feature92 = ({ className }: Feature92Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("border-y bg-muted/50 py-32", className)}
+    >
+      <div className="container">
+        <div>
+          <h2 className="text-3xl font-bold lg:text-xl">تصمیم استراتژیک را داده‌محور کنید</h2>
+          <p className="text-3xl text-muted-foreground lg:text-xl">
+            هر تیم داشبورد خودش را داشته باشد
+          </p>
+        </div>
+        <div className="mt-10 mb-8 grid gap-7 lg:grid-cols-3">
+          {integrations.map((integration) => (
+            <div key={integration.name} className="flex flex-col gap-2">
+              <div className="flex items-center gap-2 text-xl font-semibold">
+                <img
+                  src={integration.logo}
+                  alt={`لوگوی ${integration.name}`}
+                  className="h-5 w-auto"
+                />
+                {integration.name}
+              </div>
+              <p>{integration.description}</p>
+            </div>
+          ))}
+        </div>
+        <ul className="grid grid-cols-2 items-center gap-7 text-muted-foreground md:grid-cols-3 lg:grid-cols-6">
+          {socialPlatforms.map((platform) => (
+            <li
+              key={platform.name}
+              className="flex items-center gap-2 font-medium"
+            >
+              <platform.icon className="size-6 shrink-0" />
+              {platform.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Feature92 };
diff --git a/blocks/feature93.tsx b/blocks/feature93.tsx
new file mode 100644
index 0000000..529de94
--- /dev/null
+++ b/blocks/feature93.tsx
@@ -0,0 +1,91 @@
+import { Infinity as InfinityIcon, MessagesSquare, Target } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+const avatars = [
+  {
+    src: "/block-media/shadcnblocks/block/avatar-1.webp",
+    alt: "داشبورد مدیریت ارتباط با مشتری",
+    className: "size-16",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/avatar-6.webp",
+    alt: "نمای پایپ‌لاین فروش",
+    className: "size-24",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/avatar-3.webp",
+    alt: "پروفایل یکپارچه مشتری",
+    className: "size-16",
+  },
+];
+
+const features = [
+  {
+    title: "تقسیم خودکار سرنخ",
+    description:
+      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
+    icon: MessagesSquare,
+  },
+  {
+    title: "گزارش عملکرد فروش",
+    description:
+      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
+    icon: Target,
+  },
+  {
+    title: "مدیریت قرارداد",
+    description:
+      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
+    icon: InfinityIcon,
+  },
+];
+
+interface Feature93Props {
+  className?: string;
+}
+
+const Feature93 = ({ className }: Feature93Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <span className="flex items-end justify-center">
+            {avatars.map((avatar, index) => (
+              <Avatar
+                key={avatar.src}
+                className={cn(
+                  "border",
+                  avatar.className,
+                  index > 0 && "-ms-4",
+                )}
+              >
+                <AvatarImage src={avatar.src} alt={avatar.alt} />
+              </Avatar>
+            ))}
+          </span>
+          <h2 className="mt-12 text-xl font-bold lg:text-2xll">
+            هر سرنخ را تا قرارداد دنبال کنید
+          </h2>
+          <div className="mt-20 grid justify-center gap-16 lg:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.title} className="max-w-md">
+                <feature.icon
+                  className="mx-auto mb-6 size-12"
+                  strokeWidth={1.5}
+                />
+                <h3 className="mb-4 text-xl font-medium lg:text-xl">
+                  {feature.title}
+                </h3>
+                <p className="text-muted-foreground">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature93 };
diff --git a/blocks/feature94.tsx b/blocks/feature94.tsx
new file mode 100644
index 0000000..65cbbd7
--- /dev/null
+++ b/blocks/feature94.tsx
@@ -0,0 +1,92 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const cards = [
+  {
+    title: "تحلیل باخت معامله",
+    description:
+      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
+    logos: [
+      "/block-media/shadcnblocks/block/block-1.svg",
+      "/block-media/shadcnblocks/block/block-2.svg",
+    ],
+  },
+  {
+    title: "هدف‌گذاری تیمی",
+    description:
+      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
+    logos: [
+      "/block-media/shadcnblocks/block/block-3.svg",
+      "/block-media/shadcnblocks/block/block-4.svg",
+    ],
+  },
+  {
+    title: "اتوماسیون پیگیری",
+    description:
+      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
+    logos: [
+      "/block-media/shadcnblocks/block/block-5.svg",
+      "/block-media/shadcnblocks/block/block-6.svg",
+    ],
+  },
+  {
+    title: "داشبورد مدیر فروش",
+    description:
+      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
+    logos: [
+      "/block-media/shadcnblocks/block/block-1.svg",
+      "/block-media/shadcnblocks/block/block-2.svg",
+    ],
+  },
+];
+
+interface Feature94Props {
+  className?: string;
+}
+
+const Feature94 = ({ className }: Feature94Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-7xl">
+          <div className="flex flex-col items-center justify-between gap-y-4 md:flex-row">
+            <h2 className="text-center text-xl font-bold md:text-start md:text-xl">
+              پیش‌بینی درآمد را دقیق‌تر کنید
+              <br /> هر فرصت فروش را از دست ندهید
+            </h2>
+            <Button variant="outline" size="lg">
+              عملکرد فروش را لحظه‌ای بسنجید
+            </Button>
+          </div>
+          <div className="mt-16 grid gap-6 md:mt-24 md:grid-cols-2 lg:grid-cols-4">
+            {cards.map((card) => (
+              <div
+                key={card.title}
+                className="rounded-xl border bg-muted p-6"
+              >
+                <div className="mb-6 flex gap-4">
+                  {card.logos.map((logo, index) => (
+                    <img
+                      key={`${card.title}-${index}`}
+                      src={logo}
+                      alt={`لوگوی یکپارچه‌سازی ${card.title}`}
+                      className="h-auto w-16"
+                    />
+                  ))}
+                </div>
+                <h4 className="mb-4 text-xl font-semibold md:text-xl">
+                  {card.title}
+                </h4>
+                <p className="text-lg text-muted-foreground">
+                  {card.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature94 };
diff --git a/blocks/feature95.tsx b/blocks/feature95.tsx
new file mode 100644
index 0000000..b43f5d0
--- /dev/null
+++ b/blocks/feature95.tsx
@@ -0,0 +1,111 @@
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const feature95Tabs = [
+  {
+    title: "تحلیل کانال",
+    description: "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    title: "اتوماسیون ایمیل",
+    description:
+      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+  },
+  {
+    title: "A/B تست",
+    description:
+      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+  },
+  {
+    title: "تقویم محتوا",
+    description:
+      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+] as const;
+
+interface Feature95Props {
+  className?: string;
+}
+
+const Feature95 = ({ className }: Feature95Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-16 max-w-xl text-right">
+          <Badge variant="outline">کمپین</Badge>
+          <h2 className="mt-6 mb-3 text-3xl font-medium tracking-tight text-balance md:text-xl">
+            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
+          </h2>
+          <p className="text-pretty text-muted-foreground">
+            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
+          </p>
+        </div>
+        <div>
+          <Tabs dir="rtl" defaultValue="0" className="flex-col">
+            <TabsList
+              variant="line"
+              className="relative grid !h-auto w-full items-start gap-6 rounded-none p-0 lg:grid-cols-4"
+            >
+              <div className="absolute start-4 end-0 top-7 hidden h-px bg-linear-to-l from-input from-80% to-transparent lg:block" />
+              <div className="absolute start-3.5 top-0 bottom-0 w-px bg-gradient-to-b from-input from-80% to-transparent lg:hidden" />
+              {feature95Tabs.map((tab, index) => (
+                <TabsTrigger
+                  key={tab.title}
+                  value={index.toString()}
+                  className="group pointer-events-none flex !h-auto flex-col items-start rounded-none border-none p-0 whitespace-normal text-foreground after:hidden lg:pointer-events-auto"
+                >
+                  <div className="flex gap-4 rounded-md text-right hover:bg-muted lg:block lg:p-4">
+                    <div className="flex flex-col items-center lg:contents">
+                      <span className="flex size-7 shrink-0 items-center justify-center rounded-full border bg-background font-mono text-xs font-medium lg:group-data-[state=active]:bg-primary lg:group-data-[state=active]:text-background lg:group-data-[state=active]:ring lg:group-data-[state=active]:ring-muted-foreground/40">
+                        {(index + 1).toLocaleString("fa-IR")}
+                      </span>
+                    </div>
+                    <div className="text-right">
+                      <h3 className="mb-1 font-semibold text-foreground lg:mt-4">
+                        {tab.title}
+                      </h3>
+                      <p className="text-foreground-muted text-sm font-normal">
+                        {tab.description}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="mt-6 block rounded-md border bg-muted p-2 lg:hidden">
+                    <div className="aspect-video">
+                      <img
+                        src={tab.image}
+                        alt={`نمای ${tab.title}`}
+                        className="h-full w-full rounded-md border object-cover"
+                      />
+                    </div>
+                  </div>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            {feature95Tabs.map((tab, index) => (
+              <TabsContent
+                key={tab.title}
+                value={index.toString()}
+                className="mt-10 hidden rounded-xl border bg-muted p-3 lg:block"
+              >
+                <div className="aspect-video">
+                  <img
+                    src={tab.image}
+                    alt={`نمای ${tab.title}`}
+                    className="h-full w-full rounded-xl border object-cover shadow"
+                  />
+                </div>
+              </TabsContent>
+            ))}
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature95 };
diff --git a/blocks/feature97.tsx b/blocks/feature97.tsx
new file mode 100644
index 0000000..577eee5
--- /dev/null
+++ b/blocks/feature97.tsx
@@ -0,0 +1,68 @@
+import { BarChart, Heart, Monitor, Plus, TrendingUp } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const highlights = [
+  {
+    title: "تریگر رویداد",
+    description:
+      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
+    icon: Heart,
+  },
+  {
+    title: "شرط هوشمند",
+    description:
+      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
+    icon: BarChart,
+  },
+  {
+    title: "اعلان خودکار",
+    description:
+      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
+    icon: TrendingUp,
+  },
+  {
+    title: "تأیید چندمرحله‌ای",
+    description:
+      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
+    icon: Monitor,
+  },
+];
+
+interface Feature97Props {
+  className?: string;
+}
+
+const Feature97 = ({ className }: Feature97Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-xl flex-col gap-6 text-center">
+          <h2 className="text-xl font-semibold">فرایندها را استاندارد و سریع کنید</h2>
+          <p className="text-lg">
+            اتوماسیون را در کل سازمان یکپارچه کنید
+          </p>
+          <div className="flex flex-col justify-center gap-2 sm:flex-row">
+            <Button variant="outline">فرایند هوشمند</Button>
+            <Button>
+              <Plus className="ms-2 h-auto w-4" />
+              قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+            </Button>
+          </div>
+        </div>
+        <div className="mx-auto mt-20 grid max-w-5xl gap-20 md:grid-cols-2">
+          {highlights.map((item) => (
+            <div key={item.title} className="text-center">
+              <item.icon className="mx-auto h-auto w-7" />
+              <h3 className="mt-4 mb-2 text-xl font-semibold">{item.title}</h3>
+              <p>{item.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature97 };
diff --git a/blocks/feature98.tsx b/blocks/feature98.tsx
new file mode 100644
index 0000000..5d82318
--- /dev/null
+++ b/blocks/feature98.tsx
@@ -0,0 +1,96 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const cards = [
+  {
+    href: "#",
+    title: "داشبورد سفارشی",
+    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
+    image:
+      "/block-media/external/unsplash/photo-1698516923132-b0236bc8f3ef.jpg",
+    imageAlt: "گزارش عملکرد",
+  },
+  {
+    href: "#",
+    title: "فیلتر پیشرفته",
+    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
+    image:
+      "/block-media/external/unsplash/photo-1698402167275-7fbceb30989b.jpg",
+    imageAlt: "داشبورد تحلیل داده",
+  },
+  {
+    href: "#",
+    title: "نمودار روند",
+    description: "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
+    image:
+      "/block-media/external/unsplash/photo-1698402178229-863420a8ecf6.jpg",
+    imageAlt: "نمودار شاخص کلیدی",
+  },
+];
+
+interface Feature98Props {
+  className?: string;
+}
+
+const Feature98 = ({ className }: Feature98Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div>
+        <div className="container">
+          <div className="grid gap-8 lg:grid-cols-5 lg:gap-20">
+            <div className="lg:col-span-3">
+              <p className="text-lg text-muted-foreground">
+                گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
+              </p>
+              <h2 className="mt-6 text-xl lg:text-2xll">
+                داده پراکنده را به تصمیم تبدیل کنید
+              </h2>
+            </div>
+            <div className="lg:col-span-2">
+              <p className="text-lg text-muted-foreground">
+                داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
+              </p>
+              <div className="mt-10 flex gap-2">
+                <Button size="lg">شاخص‌های مهم را شخصی‌سازی کنید و تغییرات غیرعادی را زودتر تشخیص دهید. تیم‌ها با دید مشترک، سریع‌تر هم‌راستا می‌شوند.</Button>
+                <Button size="lg" variant="secondary">
+                  تحلیل داده
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Separator className="mt-24 mb-6" />
+        <div className="container grid gap-8 lg:grid-cols-3">
+          {cards.map((card) => (
+            <a
+              key={card.title}
+              href={card.href}
+              className="group relative grid overflow-hidden sm:grid-cols-2 lg:grid-cols-1"
+            >
+              <div className="absolute start-0 top-0 z-20 flex w-full justify-between gap-2 p-6 text-background sm:bottom-0 sm:start-1/2 sm:w-1/2 sm:flex-col lg:bottom-auto lg:start-0 lg:w-full lg:flex-row lg:items-center">
+                <div>
+                  <h3 className="text-lg font-medium">{card.title}</h3>
+                  <p>{card.description}</p>
+                </div>
+                <span className="flex size-12 shrink-0 items-center justify-center rounded-full bg-background text-primary sm:self-end lg:size-14 lg:self-auto">
+                  <ArrowRight className="rtl:rotate-180" />
+                </span>
+              </div>
+              <img
+                src={card.image}
+                alt={card.imageAlt}
+                className="scale-105 transition-all duration-500 group-hover:scale-[1.1]"
+              />
+              <div className="z-10 bg-primary" />
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature98 };
diff --git a/blocks/feature99.tsx b/blocks/feature99.tsx
new file mode 100644
index 0000000..18ce308
--- /dev/null
+++ b/blocks/feature99.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@/lib/utils";
+
+const steps = [
+  {
+    title: "تاریخچه مشتری",
+    description:
+      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+  },
+  {
+    title: "صندوق یکپارچه",
+    description:
+      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
+  },
+  {
+    title: "اولویت‌بندی تیکت",
+    description:
+      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
+  },
+];
+
+interface Feature99Props {
+  className?: string;
+}
+
+const Feature99 = ({ className }: Feature99Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-8 lg:flex-row lg:gap-20">
+          <div className="flex h-fit items-center gap-2.5 text-lg whitespace-nowrap">
+            <span className="size-3 shrink-0 rounded-full bg-green-500" />
+            شروع کنید
+          </div>
+          <div>
+            <h2 className="mb-11 text-3xl lg:text-2xll">
+              زمان حل مسئله را کوتاه کنید
+            </h2>
+            <div className="grid gap-8 md:grid-cols-3">
+              {steps.map((step, index) => (
+                <div
+                  key={step.title}
+                  className="flex flex-col gap-1 border-s ps-4 pe-4 md:ps-8"
+                >
+                  <span className="font-mono text-xl lg:text-2xll">
+                    {(index + 1).toLocaleString("fa-IR")}
+                  </span>
+                  <h3 className="mt-2 text-xl font-medium">{step.title}</h3>
+                  <p className="text-sm text-muted-foreground">
+                    {step.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Feature99 };
diff --git a/blocks/field-mapping1.tsx b/blocks/field-mapping1.tsx
new file mode 100644
index 0000000..f773dc4
--- /dev/null
+++ b/blocks/field-mapping1.tsx
@@ -0,0 +1,466 @@
+"use client";
+
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Check, ChevronRight, ChevronsUpDown, Plus } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface InputData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  mobile: string;
+  country: string;
+  city: string;
+}
+
+const SOURCE_FIELD_LABELS: Record<keyof InputData, string> = {
+  firstName: "نام",
+  lastName: "نام خانوادگی",
+  email: "ایمیل",
+  mobile: "موبایل",
+  country: "کشور",
+  city: "شهر",
+};
+
+const DUMMY_INPUT_DATA: InputData[] = [
+  {
+    firstName: "علی",
+    lastName: "محمدی",
+    email: "ali.mohammadi@acme.co",
+    mobile: "5551234567",
+    country: "آلمان",
+    city: "برلین",
+  },
+  {
+    firstName: "سارا",
+    lastName: "احمدی",
+    email: "sara.ahmadi@acme.co",
+    mobile: "5559876543",
+    country: "ژاپن",
+    city: "توکیو",
+  },
+  {
+    firstName: "رضا",
+    lastName: "کریمی",
+    email: "reza.karimi@acme.co",
+    mobile: "5552468135",
+    country: "برزیل",
+    city: "سائوپائولو",
+  },
+  {
+    firstName: "مینا",
+    lastName: "حسینی",
+    email: "mina.hosseini@acme.co",
+    mobile: "5551357924",
+    country: "فرانسه",
+    city: "پاریس",
+  },
+  {
+    firstName: "امیر",
+    lastName: "رضایی",
+    email: "amir.rezaei@acme.co",
+    mobile: "5558642097",
+    country: "اسپانیا",
+    city: "بارسلونا",
+  },
+];
+
+interface Column {
+  header: string;
+  accessorKey: string;
+}
+
+const DEFAULT_COLUMNS: Column[] = [
+  {
+    header: "نام",
+    accessorKey: "firstName",
+  },
+  {
+    header: "نام خانوادگی",
+    accessorKey: "lastName",
+  },
+  {
+    header: "ایمیل",
+    accessorKey: "email",
+  },
+  {
+    header: "تلفن",
+    accessorKey: "phone",
+  },
+  {
+    header: "کشور",
+    accessorKey: "country",
+  },
+];
+
+interface FieldComboboxProps {
+  columns: Column[];
+  value: string;
+  onValueChange: (value: string) => void;
+  onCreateField: (fieldName: string) => void;
+  onFocus: () => void;
+}
+
+const FieldCombobox = ({
+  columns,
+  value,
+  onValueChange,
+  onCreateField,
+  onFocus,
+}: FieldComboboxProps) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const handleCreate = () => {
+    if (
+      search &&
+      !columns.find((col) => col.header.toLowerCase() === search.toLowerCase())
+    ) {
+      onCreateField(search);
+      onValueChange(search.toLowerCase().replace(/\s+/g, ""));
+      setOpen(false);
+      setSearch("");
+    }
+  };
+
+  const selectedColumn = columns.find((col) => col.accessorKey === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild onClick={onFocus}>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {selectedColumn ? selectedColumn.header : "انتخاب فیلد"}
+          <ChevronsUpDown className="ms-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0">
+        <Command>
+          <CommandInput
+            placeholder="جستجو یا افزودن فیلد..."
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList>
+            <CommandEmpty>
+              <Button
+                variant="ghost"
+                className="w-full justify-start"
+                onClick={handleCreate}
+              >
+                <Plus className="size-4" />
+                افزودن «{search}»
+              </Button>
+            </CommandEmpty>
+            <CommandGroup>
+              {columns.map((column) => (
+                <CommandItem
+                  key={column.accessorKey}
+                  value={column.accessorKey}
+                  onSelect={(currentValue) => {
+                    onValueChange(currentValue === value ? "" : currentValue);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "size-4",
+                      value !== column.accessorKey && "opacity-0",
+                    )}
+                  />
+                  {column.header}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            {search &&
+              !columns.find(
+                (col) => col.header.toLowerCase() === search.toLowerCase(),
+              ) && (
+                <>
+                  <CommandSeparator />
+                  <CommandGroup>
+                    <CommandItem onSelect={handleCreate}>
+                      <Plus className="size-4" />
+                      افزودن «{search}»
+                    </CommandItem>
+                  </CommandGroup>
+                </>
+              )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+interface DataPreviewListProps {
+  currentFocusedField: string | null;
+}
+
+const DataPreviewList = ({ currentFocusedField }: DataPreviewListProps) => {
+  if (!currentFocusedField) return null;
+  return (
+    <div className="space-y-2 border bg-background p-4 shadow-xs">
+      <p className="text-sm font-semibold">
+        نمونه مقادیر برای{" "}
+        {SOURCE_FIELD_LABELS[currentFocusedField as keyof InputData] ??
+          currentFocusedField}
+      </p>
+      <ul>
+        {DUMMY_INPUT_DATA.map((item) => {
+          return (
+            <li
+              key={item.email}
+              className="border-b py-2 text-sm first:border-t last:border-b-0"
+            >
+              {item[currentFocusedField as keyof typeof item]}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+interface FieldMapping1Props {
+  className?: string;
+}
+
+const FieldMapping1 = ({ className }: FieldMapping1Props) => {
+  const [data, setData] = useState<Record<string, string>[]>([]);
+  const [columns, setColumns] = useState<Column[]>(DEFAULT_COLUMNS);
+  const [open, setOpen] = useState(false);
+  const [currentFocusedField, setCurrentFocusedField] = useState<string | null>(
+    null,
+  );
+  const [mappings, setMappings] = useState<Record<string, string>>({});
+
+  const handleCreateField = (fieldName: string) => {
+    const accessorKey = fieldName.toLowerCase().replace(/\s+/g, "");
+    if (!columns.find((col) => col.accessorKey === accessorKey)) {
+      setColumns([...columns, { header: fieldName, accessorKey }]);
+    }
+  };
+
+  const handleMappingChange = (incomingField: string, destField: string) => {
+    setMappings((prev) => ({
+      ...prev,
+      [incomingField]: destField,
+    }));
+  };
+
+  const handleSave = () => {
+    const transformedData = DUMMY_INPUT_DATA.map((item) => {
+      const newRow: Record<string, string> = {};
+
+      Object.entries(mappings).forEach(([incomingField, destField]) => {
+        if (destField) {
+          newRow[destField] = item[incomingField as keyof InputData];
+        }
+      });
+
+      return newRow;
+    });
+
+    setData(transformedData);
+    setOpen(false);
+  };
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <section className="py-32">
+      <div className="relative container">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length === 0
+              ? Array.from({ length: 10 }).map((_, i) => (
+                  <TableRow key={`empty-${i}`}>
+                    {columns.map((column) => (
+                      <TableCell
+                        key={`empty-${i}-${column.accessorKey}`}
+                        className="h-9"
+                      />
+                    ))}
+                  </TableRow>
+                ))
+              : table.getRowModel().rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+          </TableBody>
+        </Table>
+
+        {data.length === 0 && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/50 backdrop-blur-[1px]">
+            <h3 className="text-center text-lg font-semibold md:text-xl">
+              فایل را اینجا رها کنید یا برای شروع مرور کنید
+            </h3>
+            <Dialog open={open} onOpenChange={setOpen}>
+              <DialogTrigger asChild>
+                <Button>مرور فایل‌ها</Button>
+              </DialogTrigger>
+              <DialogContent
+                className={cn(
+                  "overflow-hidden p-0 md:!max-w-3xl lg:!max-w-6xl",
+                  className,
+                )}
+                showCloseButton={false}
+              >
+                <DialogHeader className="sr-only">
+                  <DialogTitle>پیکربندی نگاشت فیلد</DialogTitle>
+                  <DialogDescription>
+                    ستون‌های داده را با فیلدهای مقصد تطبیق دهید
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div>
+                  <div className="flex items-center justify-between gap-4 border-b px-6 py-4">
+                    <h3 className="text-lg font-semibold md:text-xl">
+                      پیکربندی نگاشت
+                    </h3>
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" onClick={() => setOpen(false)}>
+                        خروج
+                      </Button>
+                      <Button
+                        disabled={Object.keys(mappings).length === 0}
+                        onClick={handleSave}
+                      >
+                        ذخیره
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="grid gap-4 md:grid-cols-9">
+                    <div className="col-span-5 space-y-4 p-6">
+                      <p className="text-sm font-semibold md:text-base">
+                        ستون‌های مبدأ را با فیلدهای مقصد تطبیق دهید
+                      </p>
+
+                      <div className="space-y-4">
+                        <div className="grid grid-cols-2 gap-4 text-xs font-semibold text-muted-foreground">
+                          <p>ستون‌های مبدأ</p>
+                          <p>فیلدهای مقصد</p>
+                        </div>
+
+                        <ul className="space-y-6">
+                          {Object.keys(DUMMY_INPUT_DATA[0]).map((key) => {
+                            return (
+                              <li
+                                key={`incoming-field-${key}`}
+                                className="grid grid-cols-2 gap-4"
+                              >
+                                <div className="flex items-center justify-between">
+                                  <Badge variant="secondary">
+                                    {
+                                      SOURCE_FIELD_LABELS[
+                                        key as keyof InputData
+                                      ]
+                                    }
+                                  </Badge>
+
+                                  <ChevronRight className="size-4 text-muted-foreground" />
+                                </div>
+                                <FieldCombobox
+                                  columns={columns}
+                                  value={mappings[key] || ""}
+                                  onValueChange={(value) =>
+                                    handleMappingChange(key, value)
+                                  }
+                                  onCreateField={handleCreateField}
+                                  onFocus={() => setCurrentFocusedField(key)}
+                                />
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      </div>
+                    </div>
+
+                    <div className="col-span-4 hidden bg-muted p-8 md:block">
+                      <DataPreviewList
+                        currentFocusedField={currentFocusedField}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { FieldMapping1 };
diff --git a/blocks/field-merging1.tsx b/blocks/field-merging1.tsx
new file mode 100644
index 0000000..8b2e5fc
--- /dev/null
+++ b/blocks/field-merging1.tsx
@@ -0,0 +1,378 @@
+"use client";
+
+import type { ColumnDef, RowSelectionState } from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Text } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface User {
+  firstName?: string;
+  lastName?: string;
+  image?: string;
+  company?: string;
+  jobTitle?: string;
+  email?: string;
+}
+
+const DUMMY_USERS: User[] = [
+  {
+    firstName: "الینا",
+    image: "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
+    company: "آکمه",
+    jobTitle: "طراح تجربه کاربری",
+    email: "elina.brooks@acme.com",
+  },
+  {
+    firstName: "ناهید",
+    lastName: "پارسا",
+    image: "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
+    jobTitle: "مهندس بک‌اند",
+  },
+  {
+    firstName: "مایا",
+    lastName: "تهرانی",
+    jobTitle: "مدیر خلاقیت",
+    email: "maya@pixelworks.io",
+  },
+  {
+    firstName: "امیر",
+    lastName: "رضایی",
+    image: "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
+    company: "استریم‌لاین",
+  },
+  {
+    lastName: "احمدی",
+    image: "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
+    company: "کلودنست",
+    jobTitle: "مدیر محصول",
+  },
+  {
+    firstName: "آوا",
+    company: "وندورا",
+    jobTitle: "توسعه‌دهنده فرانت‌اند",
+    email: "ava.wright@vendora.com",
+  },
+];
+
+interface LetterAvatarProps {
+  children: React.ReactNode;
+}
+
+const LetterAvatar = ({ children }: LetterAvatarProps) => {
+  return (
+    <span className="flex size-6 items-center justify-center rounded-md border bg-muted text-xs">
+      {children}
+    </span>
+  );
+};
+
+const columns: ColumnDef<User>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="انتخاب همه"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="انتخاب ردیف"
+      />
+    ),
+  },
+  {
+    header: "نام",
+    accessorKey: "firstName",
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center gap-2">
+          {row.original.image ? (
+            <img
+              src={row.original.image}
+              alt={row.original.firstName ?? row.original.lastName}
+              className="size-6 rounded-md"
+            />
+          ) : (
+            <LetterAvatar>
+              {(row.original.firstName ?? row.original.lastName)
+                ?.charAt(0)
+                .toUpperCase()}
+            </LetterAvatar>
+          )}
+
+          <span className="font-medium">
+            {row.original.firstName} {row.original.lastName}
+          </span>
+        </div>
+      );
+    },
+  },
+  {
+    header: "شرکت",
+    cell: ({ row }) =>
+      row.original.company && (
+        <div className="flex items-center gap-2">
+          <LetterAvatar>
+            {row.original.company?.charAt(0).toUpperCase()}
+          </LetterAvatar>
+          <p>{row.original.company}</p>
+        </div>
+      ),
+  },
+  {
+    header: "نقش",
+    accessorKey: "jobTitle",
+  },
+  {
+    header: "ایمیل",
+    cell: ({ row }) =>
+      row.original.email && (
+        <Badge variant="outline">{row.original.email}</Badge>
+      ),
+  },
+];
+
+interface UserCardProps {
+  user: User;
+  variant?: "merged" | "selected";
+  onSelect?: (key: string, value: string) => void;
+  mergedUser?: User | null;
+}
+
+const UserCard = ({
+  user,
+  variant = "selected",
+  onSelect,
+  mergedUser,
+}: UserCardProps) => {
+  const mergeableKeys = [
+    "firstName",
+    "lastName",
+    "jobTitle",
+    "email",
+    "company",
+  ];
+
+  return (
+    <div className="w-full border bg-background">
+      <div className="flex items-center gap-2 border-b p-3">
+        <div
+          className={cn(
+            "flex size-10 items-center justify-center overflow-hidden rounded-full bg-muted",
+            variant === "merged" ? "text-base" : "text-xs",
+          )}
+        >
+          {user.image ? (
+            <img
+              src={user.image}
+              alt={user.firstName ?? user.lastName}
+              className="size-full"
+            />
+          ) : (
+            <span>
+              {(user.firstName ?? user.lastName)?.charAt(0).toUpperCase()}
+            </span>
+          )}
+        </div>
+        <p className="text-sm font-medium">
+          {user.firstName} {user.lastName}
+        </p>
+      </div>
+      <div className="space-y-3 p-3">
+        {mergeableKeys.map((key) => {
+          const value = user[key as keyof User];
+
+          if (!value) return null;
+
+          const id = `${key}-${value}`;
+
+          if (variant === "selected") {
+            return (
+              <RadioGroup key={id} className="flex items-center gap-2">
+                <RadioGroupItem
+                  checked={mergedUser?.[key as keyof User] === value}
+                  onClick={() => onSelect?.(key, value)}
+                  value={id}
+                  id={id}
+                />
+                <Label htmlFor={id} className="font-normal">
+                  {value}
+                </Label>
+              </RadioGroup>
+            );
+          }
+
+          return (
+            <div key={id} className="flex items-center gap-2 text-sm">
+              <Text className="size-4" />
+              {value}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+interface FieldMerging1Props {
+  className?: string;
+}
+
+const FieldMerging1 = ({ className }: FieldMerging1Props) => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [mergedUser, setMergedUser] = useState<User | null>(null);
+
+  const selectedCount = Object.keys(rowSelection).length;
+
+  useEffect(() => {
+    if (selectedCount === 0) {
+      setMergedUser(null);
+    } else {
+      setMergedUser(DUMMY_USERS[Number(Object.keys(rowSelection)[0])]);
+    }
+  }, [rowSelection, selectedCount]);
+
+  const table = useReactTable({
+    data: DUMMY_USERS,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+    state: {
+      rowSelection,
+    },
+  });
+
+  return (
+    <section className="py-32">
+      <div className={cn("container space-y-6", className)}>
+        <Dialog>
+          <DialogTrigger asChild disabled={selectedCount < 2}>
+            <Button>ادغام کاربران</Button>
+          </DialogTrigger>
+          <DialogContent
+            showCloseButton={false}
+            className="max-h-[95dvh] overflow-y-auto md:!max-w-3xl lg:!max-w-5xl"
+          >
+            <DialogHeader>
+              <DialogTitle>
+                ترکیب {selectedCount.toLocaleString("fa-IR")} رکورد انتخاب‌شده
+              </DialogTitle>
+              <DialogDescription className="sr-only">
+                از هر رکورد فیلدهای مورد نظر را انتخاب کنید تا یک ورودی یکپارچه
+                بسازید
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex w-full flex-col-reverse items-start lg:flex-row">
+              <div className="grid w-full gap-3 bg-muted p-4 lg:flex-2/3 lg:grid-cols-2">
+                {Object.keys(rowSelection).map((key) => {
+                  const user = DUMMY_USERS[Number(key)];
+
+                  return (
+                    <UserCard
+                      key={`user-${key}`}
+                      user={user}
+                      onSelect={(fieldKey, value) =>
+                        setMergedUser((prev) => ({ ...prev, [fieldKey]: value }))
+                      }
+                      mergedUser={mergedUser}
+                    />
+                  );
+                })}
+              </div>
+              {mergedUser && (
+                <div className="w-full space-y-1 border p-6 lg:flex-1/3">
+                  <UserCard user={mergedUser} variant="merged" />
+                  <Button className="w-full">ادغام</Button>
+                </div>
+              )}
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  رکوردی یافت نشد.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </section>
+  );
+};
+
+export { FieldMerging1 };
diff --git a/blocks/footer1.tsx b/blocks/footer1.tsx
new file mode 100644
index 0000000..c03978b
--- /dev/null
+++ b/blocks/footer1.tsx
@@ -0,0 +1,165 @@
+import {
+  FaApple,
+  FaDiscord,
+  FaRedditAlien,
+  FaTelegramPlane,
+  FaTwitter,
+} from "react-icons/fa";
+
+import { Logo, LogoImage, LogoText } from "@/components/shadcnblocks/logo";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "نمای کلی", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "بازار", href: "#" },
+      { name: "ویژگی‌ها", href: "#" },
+      { name: "یکپارچه‌سازی‌ها", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "تیم", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "فرصت‌های شغلی", href: "#" },
+      { name: "تماس", href: "#" },
+      { name: "حریم خصوصی", href: "#" },
+    ],
+  },
+  {
+    title: "منابع",
+    links: [
+      { name: "راهنما", href: "#" },
+      { name: "فروش", href: "#" },
+      { name: "تبلیغات", href: "#" },
+    ],
+  },
+];
+
+interface Footer1Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+    className?: string;
+  };
+  className?: string;
+}
+const Footer1 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "ShadcnBlocks",
+  },
+  className,
+}: Footer1Props) => {
+  return (
+    <section className={cn("py-32 pb-16", className)}>
+      <div className="container">
+        <footer>
+          <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
+            <Logo url="https://ShadcnBlocks">
+              <LogoImage
+                src={logo.src}
+                alt={logo.alt}
+                title={logo.title}
+                className="h-10 dark:invert"
+              />
+              <LogoText className="text-xl">{logo.title}</LogoText>
+            </Logo>
+            <div className="flex flex-col gap-4 md:flex-row md:items-center">
+              <p className="text-lg font-medium">
+                کد را بردارید و برای خودتان بسازید.
+              </p>
+              <div className="flex gap-2">
+                <a
+                  href="#"
+                  className="inline-flex items-center justify-center rounded-lg bg-primary p-2"
+                >
+                  <FaApple className="size-6 text-background" />
+                </a>
+                <a
+                  href="#"
+                  className="inline-flex items-center justify-center rounded-lg bg-primary p-2"
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/google-play-icon.svg"
+                    className="size-6 text-background"
+                    alt="گوگل پلی"
+                  />
+                </a>
+              </div>
+            </div>
+          </div>
+          <Separator className="my-14" />
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+            {sections.map((section, sectionIdx) => (
+              <div key={sectionIdx}>
+                <h3 className="mb-4 font-bold">{section.title}</h3>
+                <ul className="space-y-4 text-muted-foreground">
+                  {section.links.map((link, linkIdx) => (
+                    <li
+                      key={linkIdx}
+                      className="font-medium hover:text-primary"
+                    >
+                      <a href={link.href}>{link.name}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+            <div>
+              <h3 className="mb-4 font-bold">حقوقی</h3>
+              <ul className="space-y-4 text-muted-foreground">
+                <li className="font-medium hover:text-primary">
+                  <a href="#">شرایط و ضوابط</a>
+                </li>
+                <li className="font-medium hover:text-primary">
+                  <a href="#">حریم خصوصی</a>
+                </li>
+              </ul>
+              <h3 className="mt-8 mb-4 font-bold">شبکه‌های اجتماعی</h3>
+              <ul className="flex items-center gap-6 text-muted-foreground">
+                <li className="font-medium hover:text-primary">
+                  <a href="#">
+                    <FaDiscord className="size-6" />
+                  </a>
+                </li>
+                <li className="font-medium hover:text-primary">
+                  <a href="#">
+                    <FaRedditAlien className="size-6" />
+                  </a>
+                </li>
+                <li className="font-medium hover:text-primary">
+                  <a href="#">
+                    <FaTwitter className="size-6" />
+                  </a>
+                </li>
+                <li className="font-medium hover:text-primary">
+                  <a href="#">
+                    <FaTelegramPlane className="size-6" />
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <Separator className="my-14" />
+          <p className="text-sm text-muted-foreground">
+            © ۲۲۴ ری یو آی. تمامی حقوق محفوظ است.
+          </p>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer1 };
diff --git a/blocks/footer10.tsx b/blocks/footer10.tsx
new file mode 100644
index 0000000..5b3727a
--- /dev/null
+++ b/blocks/footer10.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Footer10Props {
+  className?: string;
+}
+
+const Footer10 = ({ className }: Footer10Props) => {
+  const [time, setTime] = useState("");
+
+  useEffect(() => {
+    const updateLondonTime = () => {
+      const options: Intl.DateTimeFormatOptions = {
+        timeZone: "Europe/London",
+        hour: "2-digit" as const,
+        minute: "2-digit" as const,
+        second: "2-digit" as const,
+      };
+      const londonTime = new Intl.DateTimeFormat("fa-IR", options).format(
+        new Date(),
+      );
+      setTime(londonTime);
+    };
+
+    updateLondonTime();
+    const intervalId = setInterval(updateLondonTime, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <footer>
+          <div>
+            <img
+              src="/block-media/shadcnblocks/block/ShadcnBlocks-giant-black-text.svg"
+              alt="پاورقی"
+              className="aspect-[13.7] w-full object-cover"
+            />
+          </div>
+          <div className="flex flex-col items-center justify-between py-12 text-muted-foreground md:flex-row">
+            <div>© ری یو آی ۲۲۴</div>
+            <div>ساعت: {time}</div>
+            <div>example@ری یو آی</div>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer10 };
diff --git a/blocks/footer11.tsx b/blocks/footer11.tsx
new file mode 100644
index 0000000..c6a7e79
--- /dev/null
+++ b/blocks/footer11.tsx
@@ -0,0 +1,131 @@
+import { Instagram, Linkedin, Twitter } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "ویژگی‌ها", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "تقویم", href: "#" },
+      { name: "جلسات آنلاین", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "تماس", href: "#" },
+      { name: "سوالات متداول", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+    ],
+  },
+  {
+    title: "حقوقی",
+    links: [
+      { name: "شرایط و ضوابط", href: "#" },
+      { name: "حریم خصوصی", href: "#" },
+    ],
+  },
+];
+
+interface Footer11Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  className?: string;
+}
+const Footer11 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "ShadcnBlocks",
+  },
+  className,
+}: Footer11Props) => {
+  return (
+    <section className={cn("py-16 md:py-24 lg:py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-start justify-between gap-8 py-4 md:flex-row lg:py-8">
+          {/* Logo */}
+          <div className="w-full md:w-auto">
+            <a href={logo.url} className="flex items-center gap-2">
+              <img
+                src={logo.src}
+                alt={logo.alt}
+                title={logo.title}
+                className="h-8"
+              />
+              <h2 className="text-lg font-semibold">{logo.title}</h2>
+            </a>
+          </div>
+
+          {/* Menu */}
+          <div className="w-full md:w-auto">
+            <div className="grid grid-cols-2 gap-8 sm:grid-cols-4 md:flex md:gap-12 lg:gap-16">
+              {sections.map((section, sectionIdx) => (
+                <div key={sectionIdx} className="min-w-[120px]">
+                  <h3 className="text-muted-foreground-subtle text-sm font-semibold">
+                    {section.title}
+                  </h3>
+                  <ul className="mt-4 space-y-3 text-sm">
+                    {section.links.map((link, linkIdx) => (
+                      <li key={linkIdx} className="hover:text-primary">
+                        <a href={link.href}>{link.name}</a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+
+              <div>
+                <h3 className="text-muted-foreground-subtle text-sm font-semibold">
+                  شبکه‌های اجتماعی
+                </h3>
+
+                <div className="text-muted-foreground-subtle mt-4 flex gap-4">
+                  <a
+                    href="https://instagram.com"
+                    aria-label="اینستاگرام"
+                    className="hover:text-primary"
+                  >
+                    <Instagram size={20} />
+                  </a>
+                  <a
+                    href="https://twitter.com"
+                    aria-label="توییتر"
+                    className="hover:text-primary"
+                  >
+                    <Twitter size={20} />
+                  </a>
+                  <a
+                    href="https://Linkedin.com"
+                    aria-label="لینکدین"
+                    className="hover:text-primary"
+                  >
+                    <Linkedin size={20} />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-12 md:mt-16">
+          <img
+            src="/block-media/shadcnblocks/block/ShadcnBlocks-giant-text.png"
+            className="w-full"
+            alt="لوگوی ری یو آی"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Footer11 };
diff --git a/blocks/footer12.tsx b/blocks/footer12.tsx
new file mode 100644
index 0000000..e90ac2a
--- /dev/null
+++ b/blocks/footer12.tsx
@@ -0,0 +1,76 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Footer12Props {
+  className?: string;
+}
+
+const Footer12 = ({ className }: Footer12Props) => {
+  const navigation = [
+    { name: "محصول", href: "#" },
+    { name: "درباره ما", href: "#" },
+    { name: "قیمت‌گذاری", href: "#" },
+    { name: "سوالات متداول", href: "#" },
+    { name: "تماس", href: "#" },
+  ];
+
+  const social = [
+    { name: "توییتر", href: "#" },
+    { name: "لینکدین", href: "#" },
+  ];
+
+  const legal = [{ name: "حریم خصوصی", href: "#" }];
+
+  return (
+    <section
+      className={cn("flex flex-col items-center gap-14 py-32", className)}
+    >
+      <nav className="container flex flex-col items-center gap-4">
+        <ul className="flex flex-wrap items-center justify-center gap-6">
+          {navigation.map((item) => (
+            <li key={item.name}>
+              <a
+                href={item.href}
+                className="font-medium transition-opacity hover:opacity-75"
+              >
+                {item.name}
+              </a>
+            </li>
+          ))}
+          {social.map((item) => (
+            <li key={item.name}>
+              <a
+                href={item.href}
+                className="flex items-center gap-0.5 font-medium transition-opacity hover:opacity-75"
+              >
+                {item.name} <ArrowUpRight className="size-4 rtl:rotate-180" />
+              </a>
+            </li>
+          ))}
+        </ul>
+        <ul className="flex flex-wrap items-center justify-center gap-6">
+          {legal.map((item) => (
+            <li key={item.name}>
+              <a
+                href={item.href}
+                className="text-sm text-muted-foreground transition-opacity hover:opacity-75"
+              >
+                {item.name}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <img
+        src="/block-media/shadcnblocks/block/ShadcnBlocks-giant-text.png"
+        alt="لوگوی ری یو آی"
+        width={1570}
+        height={375}
+        className="mt-10 md:mt-14 lg:mt-20"
+      />
+    </section>
+  );
+};
+
+export { Footer12 };
diff --git a/blocks/footer13.tsx b/blocks/footer13.tsx
new file mode 100644
index 0000000..af0dad0
--- /dev/null
+++ b/blocks/footer13.tsx
@@ -0,0 +1,174 @@
+import {
+  ArrowRight,
+  Facebook,
+  Instagram,
+  Linkedin,
+  Twitter,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const navigation = [
+  {
+    title: "محصول",
+    links: [
+      { name: "خانه", href: "#" },
+      { name: "ویژگی ۱", href: "#" },
+      { name: "ویژگی ۲", href: "#" },
+      { name: "ویژگی ۳", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+    ],
+  },
+  {
+    title: "پشتیبانی",
+    links: [
+      { name: "سوالات متداول", href: "#" },
+      { name: "تماس", href: "#" },
+    ],
+  },
+  {
+    title: "خدمات",
+    links: [
+      { name: "شرایط و ضوابط", href: "#" },
+      { name: "حریم خصوصی", href: "#" },
+    ],
+  },
+];
+
+const socialLinks = [
+  { icon: Facebook, href: "https://facebook.com", label: "فیسبوک" },
+  { icon: Twitter, href: "https://twitter.com", label: "توییتر" },
+  { icon: Linkedin, href: "https://linkedin.com", label: "لینکدین" },
+  { icon: Instagram, href: "https://instagram.com", label: "اینستاگرام" },
+];
+
+interface Footer13Props {
+  className?: string;
+}
+
+const Footer13 = ({ className }: Footer13Props) => {
+  return (
+    <section
+      className={cn(
+        "bg-primary py-16 text-primary-foreground md:py-24 lg:py-32",
+        className,
+      )}
+    >
+      <div className="container">
+        <footer>
+          <div className="mb-16 rounded-2xl bg-primary-foreground/5 p-8 backdrop-blur-sm md:p-12 lg:p-16">
+            <div className="flex flex-col items-center text-center">
+              <h2 className="max-w-[800px] text-xl leading-tight font-semibold tracking-tight text-balance md:text-2xll lg:text-2xll">
+                همین امروز دوره آزمایشی رایگان را شروع کنید.
+                <span className="text-sand-600 relative inline-block">
+                  آینده منتظر نمی‌ماند.
+                  <span className="bg-sand-600/30 absolute bottom-1 start-0 h-1 w-full rounded-full"></span>
+                </span>
+              </h2>
+              <p className="mt-4 max-w-[600px] text-lg text-primary-foreground/80">
+                به هزاران کاربری بپیوندید که از پلتفرم ما برای دستیابی به
+                نتایج بیشتر استفاده می‌کنند.
+              </p>
+              <div className="mt-8 flex flex-col gap-4 sm:flex-row">
+                <Button asChild variant="secondary" size="lg" className="group">
+                  <a href="/get-started" className="flex items-center gap-2">
+                    شروع کنید  ۷ روز رایگان
+                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Newsletter Section */}
+          <div className="border-sand-600/20 mb-14 border-b pb-14">
+            <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
+              <div>
+                <h3 className="mb-2 text-xl font-medium">در ارتباط بمانید</h3>
+                <p className="max-w-md text-primary-foreground/70">
+                  در خبرنامه ما عضو شوید و از آخرین به‌روزرسانی‌ها، منابع و
+                  پیشنهادهای ویژه باخبر شوید.
+                </p>
+              </div>
+              <div className="flex flex-col gap-3 sm:flex-row">
+                <div className="relative grow">
+                  <Input
+                    type="email"
+                    placeholder="آدرس ایمیل شما"
+                    className="h-12 border-primary-foreground/20 bg-primary-foreground/10 ps-10"
+                  />
+                </div>
+                <Button variant="secondary" type="submit" className="h-12 px-6">
+                  عضویت
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Navigation Section */}
+          <nav className="border-sand-600/20 grid grid-cols-2 gap-x-6 gap-y-10 border-b py-10 sm:grid-cols-4 lg:py-16">
+            {navigation.map((section) => (
+              <div key={section.title}>
+                <h3 className="mb-5 text-lg font-semibold">{section.title}</h3>
+                <ul className="space-y-4">
+                  {section.links.map((link) => (
+                    <li key={link.name}>
+                      <a
+                        href={link.href}
+                        className="inline-block text-primary-foreground/80 transition-colors duration-200 hover:text-primary-foreground"
+                      >
+                        {link.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </nav>
+
+          {/* Bottom Section */}
+          <div className="mx-auto mt-4 py-8">
+            <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
+              <p className="font-medium text-primary-foreground/80">
+                © {new Date().getFullYear().toLocaleString("fa-IR")} Streamline -{" "}
+                <a
+                  href="https://ShadcnBlocks"
+                  className="underline transition-colors hover:text-primary-foreground"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  ری یو آی
+                </a>
+              </p>
+              <div className="flex items-center gap-6">
+                {socialLinks.map((link) => (
+                  <a
+                    aria-label={link.label}
+                    key={link.href}
+                    href={link.href}
+                    className="text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+                  >
+                    <link.icon
+                      size={20}
+                      className="transition-transform hover:scale-110"
+                    />
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer13 };
diff --git a/blocks/footer14.tsx b/blocks/footer14.tsx
new file mode 100644
index 0000000..0079ebf
--- /dev/null
+++ b/blocks/footer14.tsx
@@ -0,0 +1,129 @@
+import { FaFacebook, FaLinkedin, FaXTwitter } from "react-icons/fa6";
+
+const navigation = [
+  {
+    title: "محصولات",
+    links: [
+      { name: "VAR", href: "#" },
+      { name: "انتقال اعتبار", href: "#" },
+      { name: "حساب‌های اعتباری", href: "#" },
+      { name: "صدور وام", href: "#" },
+      { name: "خرید وام", href: "#" },
+    ],
+  },
+  {
+    title: "پشتیبانی",
+    links: [
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "سوالات متداول", href: "#" },
+      { name: "نمایش", href: "#" },
+      { name: "تماس", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "شرایط استفاده", href: "#" },
+      { name: "حریم خصوصی", href: "#" },
+    ],
+  },
+];
+
+const socialLinks = [
+  { name: "توییتر", icon: FaXTwitter, href: "https://twitter.com" },
+  { name: "فیسبوک", icon: FaFacebook, href: "https://facebook.com" },
+  { name: "لینکدین", icon: FaLinkedin, href: "https://linkedin.com" },
+];
+
+export const Footer14 = () => {
+  return (
+    <section className="bg-background py-12 sm:py-16 md:py-24">
+      <div className="container mx-auto max-w-6xl px-5 md:px-6">
+        {/* Logo and newsletter section */}
+        <div className="mb-10 flex flex-col items-start justify-between gap-10 border-b pb-10 sm:mb-16 sm:pb-12 md:flex-row">
+          <div className="w-full max-w-full sm:max-w-sm">
+            <a href="https://ShadcnBlocks">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                alt="لوگوی ری یو آی"
+                className="mb-6 h-8 dark:invert"
+              />
+            </a>
+            <p className="mb-8 text-base text-muted-foreground">
+              راهکارهای مالی برای کسب‌وکارها و افراد در سراسر جهان.
+            </p>
+
+            {/* Newsletter subscription */}
+            <div className="flex w-full max-w-full flex-col gap-3 sm:max-w-md sm:flex-row">
+              <input
+                type="email"
+                placeholder="ایمیل شما"
+                className="flex h-12 flex-1 rounded-md border border-input bg-background px-4 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+              />
+              <button className="inline-flex h-12 items-center justify-center rounded-md bg-primary px-6 py-2 text-base font-medium whitespace-nowrap text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 sm:h-10 sm:px-4 sm:text-sm">
+                عضویت
+              </button>
+            </div>
+          </div>
+
+          {/* Navigation Section */}
+          <div className="w-full border-t pt-8 sm:border-t-0 sm:pt-0">
+            <nav className="grid w-full grid-cols-1 gap-x-12 gap-y-8 sm:grid-cols-2 md:w-auto md:grid-cols-3">
+              {navigation.map((section) => (
+                <div key={section.title} className="min-w-[140px]">
+                  <h2 className="mb-4 text-lg font-semibold">
+                    {section.title}
+                  </h2>
+                  <ul className="space-y-3.5">
+                    {section.links.map((link) => (
+                      <li key={link.name}>
+                        <a
+                          href={link.href}
+                          className="inline-block py-1 text-muted-foreground transition-colors duration-200 hover:text-foreground active:text-primary"
+                        >
+                          {link.name}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </nav>
+          </div>
+        </div>
+
+        {/* Bottom Section */}
+        <div className="flex flex-col items-center justify-between gap-6 md:flex-row">
+          <div className="order-1 mb-6 flex w-full items-center justify-center gap-6 sm:justify-start md:order-2 md:mb-0 md:w-auto">
+            {socialLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                aria-label={`بازدید از صفحه ${link.name} ما`}
+                className="rounded-full p-3 text-muted-foreground transition-all duration-200 hover:bg-accent hover:text-foreground active:bg-accent/70"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <link.icon className="h-6 w-6 sm:h-5 sm:w-5" />
+              </a>
+            ))}
+          </div>
+
+          {/* Copyright - Below on mobile, left on desktop */}
+          <p className="order-2 text-center text-sm text-muted-foreground sm:text-start md:order-1">
+            © {new Date().getFullYear().toLocaleString("fa-IR")} Charter. تمامی حقوق محفوظ است.{" "}
+            <a
+              href="https://ShadcnBlocks"
+              className="text-foreground underline underline-offset-4 transition-colors hover:text-primary"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              ری یو آی
+            </a>
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/footer15.tsx b/blocks/footer15.tsx
new file mode 100644
index 0000000..2df5906
--- /dev/null
+++ b/blocks/footer15.tsx
@@ -0,0 +1,143 @@
+"use client";
+import { Facebook, Github, Linkedin, Twitter } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const SOCIAL_LINKS = [
+  {
+    icon: Github,
+    href: "#",
+  },
+  {
+    icon: Linkedin,
+    href: "#",
+  },
+  {
+    icon: Facebook,
+    href: "#",
+  },
+  {
+    icon: Twitter,
+    href: "#",
+  },
+];
+
+const NAVIGATION = [
+  {
+    title: "پلتفرم",
+    links: [
+      { name: "نمای کلی", href: "#" },
+      { name: "کاربردها", href: "#" },
+    ],
+  },
+  {
+    title: "درباره ما",
+    links: [
+      { name: "تیم", href: "#" },
+      { name: "پشتیبانی", href: "#" },
+      { name: "حقوقی", href: "#" },
+      { name: "امنیت", href: "#" },
+    ],
+  },
+  {
+    title: "یادگیری",
+    links: [
+      { name: "آموزش‌ها", href: "#" },
+      { name: "مستندات اتصال هوشمند", href: "#" },
+      { name: "شروع سریع", href: "#" },
+    ],
+  },
+];
+
+interface Footer15Props {
+  className?: string;
+}
+
+const Footer15 = ({ className }: Footer15Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <footer className="container flex flex-col gap-32">
+        <div className="flex w-full flex-col justify-between gap-y-24 lg:flex-row">
+          <div className="flex shrink-0 grow-0 basis-auto flex-col items-start justify-start gap-6">
+            {/* Logo */}
+            <a href="https://ShadcnBlocks">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg"
+                alt="لوگوی ری یو آی"
+                title="ShadcnBlocks"
+                className="h-10 dark:invert"
+              />
+            </a>
+            <p className="w-full max-w-54 text-base leading-normal text-muted-foreground md:text-lg">
+              تجربه‌های دیجیتال خود را به‌سادگی و در مقیاس بزرگ
+              شخصی‌سازی کنید.
+            </p>
+            <div className="flex w-full items-center justify-start gap-7">
+              {SOCIAL_LINKS.map((item, i) => (
+                <a
+                  href={item.href}
+                  key={`social-link-${i}`}
+                  className="flex size-6 opacity-100 transition-opacity hover:opacity-50"
+                >
+                  <item.icon className="m-auto size-full stroke-foreground" />
+                </a>
+              ))}
+            </div>
+            <div className="pt-6">
+              <Badge className="rounded-full border-muted bg-background p-0 text-foreground">
+                <a href="#" className="flex items-center gap-2 px-3 py-2">
+                  <div className="relative size-[0.4375rem]">
+                    <span className="absolute inset-0 z-10 m-auto size-[0.6875rem] animate-pulse rounded-full bg-green-400/50" />
+                    <span className="absolute inset-0 z-20 m-auto size-full rounded-full bg-green-500" />
+                  </div>
+                  <div className="text-[0.9375rem] leading-none font-normal">
+                    همه سیستم‌ها فعال هستند
+                  </div>
+                </a>
+              </Badge>
+            </div>
+          </div>
+          <div className="flex flex-col gap-24">
+            <nav className="flex flex-wrap gap-24 md:gap-40">
+              {NAVIGATION.map((section, _) => (
+                <div
+                  key={section.title}
+                  className="flex flex-col items-start justify-start gap-4"
+                >
+                  <p className="mb-2 text-sm font-semibold text-foreground md:text-base">
+                    {section.title}
+                  </p>
+                  {section.links.map((link, _) => (
+                    <a
+                      key={link.name}
+                      href={link.href}
+                      className="text-sm leading-none font-medium text-foreground opacity-50 transition-opacity hover:opacity-100"
+                    >
+                      {link.name}
+                    </a>
+                  ))}
+                </div>
+              ))}
+            </nav>
+          </div>
+        </div>
+        <div className="flex flex-col justify-between gap-y-4 md:flex-row">
+          <div className="text-sm font-medium text-muted-foreground">
+            © ۲۲۵ ری یو آی
+          </div>
+          <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+            ساخته‌شده در آمریکا{" "}
+            <img
+              src="/block-media/shadcnblocks/block/flags/united-states.png"
+              alt="پرچم آمریکا"
+              className="h-5 rounded-sm"
+            />
+          </div>
+        </div>
+      </footer>
+    </section>
+  );
+};
+
+export { Footer15 };
diff --git a/blocks/footer16.tsx b/blocks/footer16.tsx
new file mode 100644
index 0000000..2d2d777
--- /dev/null
+++ b/blocks/footer16.tsx
@@ -0,0 +1,151 @@
+import { Facebook, Github, Linkedin, Twitter } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const SOCIAL_LINKS = [
+  {
+    icon: Github,
+    href: "#",
+  },
+  {
+    icon: Linkedin,
+    href: "#",
+  },
+  {
+    icon: Facebook,
+    href: "#",
+  },
+  {
+    icon: Twitter,
+    href: "#",
+  },
+];
+
+const NAVIGATION = [
+  {
+    title: "ابزارها",
+    links: [
+      { name: "طرح‌ها", href: "#" },
+      { name: "امنیت", href: "#" },
+      { name: "همکاران", href: "#" },
+    ],
+  },
+  {
+    title: "مستندات",
+    links: [
+      { name: "راهنما", href: "#" },
+      { name: "API", href: "#" },
+      { name: "راهنمای کاربری", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "به‌روزرسانی‌ها", href: "#" },
+    ],
+  },
+  {
+    title: "حقوقی",
+    links: [
+      { name: "حریم خصوصی", href: "#" },
+      { name: "شرایط و ضوابط", href: "#" },
+      { name: "DPA", href: "#" },
+      { name: "کوکی‌ها", href: "#" },
+      { name: "اعتماد", href: "#" },
+      { name: "تنظیمات", href: "#" },
+    ],
+  },
+];
+
+interface Footer16Props {
+  className?: string;
+}
+
+const Footer16 = ({ className }: Footer16Props) => {
+  return (
+    <section className={cn("dark bg-background pt-32", className)}>
+      <footer className="container">
+        <div className="grid gap-10 pb-6 md:grid-cols-2 md:pb-0">
+          <div className="flex flex-col justify-start gap-8">
+            {/* Logo */}
+            <a href="https://ShadcnBlocks">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark-white.svg"
+                alt="لوگوی ری یو آی"
+                title="ShadcnBlocks"
+                className="h-11"
+              />
+            </a>
+            <div className="flex items-center justify-start gap-4 md:flex-row">
+              {SOCIAL_LINKS.map((item, i) => (
+                <Button
+                  key={`social-link-${i}`}
+                  size="icon"
+                  variant="secondary"
+                >
+                  <a href={item.href}>
+                    <item.icon className="size-4 lg:size-5" />
+                  </a>
+                </Button>
+              ))}
+            </div>
+          </div>
+          <div>
+            <div className="hidden md:flex md:gap-10 lg:gap-24 xl:gap-32">
+              {NAVIGATION.map((section) => (
+                <div className="flex flex-col gap-4" key={section.title}>
+                  <h6 className="mb-2 text-sm font-semibold text-foreground uppercase">
+                    {section.title}
+                  </h6>
+                  {section.links.map((link) => (
+                    <a
+                      className="text-sm font-medium text-muted-foreground transition-colors duration-200 ease-in-out hover:text-foreground"
+                      key={link.name}
+                      href={link.href}
+                    >
+                      {link.name}
+                    </a>
+                  ))}
+                </div>
+              ))}
+            </div>
+            <div className="md:hidden">
+              <Accordion type="single" collapsible className="w-full">
+                {NAVIGATION.map((section, i) => (
+                  <AccordionItem value={`item-${i}`} key={section.title}>
+                    <AccordionTrigger className="py-4 text-sm text-foreground uppercase hover:no-underline">
+                      {section.title}
+                    </AccordionTrigger>
+                    <AccordionContent className="flex flex-col gap-2">
+                      {section.links.map((link) => (
+                        <a
+                          className="text-sm font-medium text-muted-foreground transition-colors duration-200 ease-in-out hover:text-foreground"
+                          key={link.name}
+                          href={link.href}
+                        >
+                          {link.name}
+                        </a>
+                      ))}
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </div>
+          </div>
+        </div>
+        <div className="overflow-hidden">
+          <img
+            className="w-full translate-y-2 opacity-10 md:translate-y-4 lg:translate-y-6 xl:translate-y-8"
+            src="/block-media/shadcnblocks/block/ShadcnBlocks-giant-white-text.svg"
+            alt="لوگوی ری یو آی"
+          />
+        </div>
+      </footer>
+    </section>
+  );
+};
+
+export { Footer16 };
diff --git a/blocks/footer17.tsx b/blocks/footer17.tsx
new file mode 100644
index 0000000..c601976
--- /dev/null
+++ b/blocks/footer17.tsx
@@ -0,0 +1,453 @@
+"use client";
+import {
+  ChevronDown,
+  ExternalLink,
+  Facebook,
+  Github,
+  Linkedin,
+  MonitorCog,
+  Moon,
+  Sun,
+  Twitter,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
+
+type linkType = "DROPDOWN" | "LINK" | "EXTERNAL_LINK";
+
+interface NavigationLink {
+  type?: linkType;
+  name: string;
+  href?: string;
+  links?: Omit<NavigationLink, "type">[];
+}
+
+interface Navigation {
+  title: string;
+  links: NavigationLink[];
+}
+
+const NAVIGATION: Array<Navigation> = [
+  {
+    title: "راهکارها",
+    links: [
+      {
+        type: "LINK",
+        name: "یادگیری ماشین",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "خدمات ابری",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "محاسبات لبه",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "فریم‌ورک‌های وب",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "تحلیل داده",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "CI/CD",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "توازن بار",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "رمزنگاری",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "افزایش عملکرد",
+        href: "#",
+      },
+      {
+        type: "EXTERNAL_LINK",
+        name: "API",
+        href: "#",
+      },
+    ],
+  },
+  {
+    title: "راهنما",
+    links: [
+      {
+        type: "EXTERNAL_LINK",
+        name: "انجمن کاربران",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "مستندات اتصال هوشمند",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "راهنمای راه‌اندازی",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "سوالات متداول",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "همکاران",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "تماس با پشتیبانی",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "اطلاعات قیمت‌گذاری",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "وضعیت سرویس",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "اعلان‌های امنیتی",
+        href: "#",
+      },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      {
+        type: "LINK",
+        name: "درباره ما",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "اتاق خبر",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "فرصت‌های شغلی",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "رویدادها",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "بیانیه‌های مطبوعاتی",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "همکاران",
+        href: "#",
+      },
+      {
+        type: "LINK",
+        name: "روابط سرمایه‌گذاران",
+        href: "#",
+      },
+      {
+        type: "DROPDOWN",
+        name: "حقوقی",
+        links: [
+          {
+            name: "تنظیمات کوکی",
+            href: "#",
+          },
+          {
+            name: "شرایط استفاده",
+            href: "#",
+          },
+          {
+            name: "انطباق مقررات حفاظت از داده",
+            href: "#",
+          },
+          {
+            name: "حفاظت از داده",
+            href: "#",
+          },
+          {
+            name: "بیانیه دسترسی‌پذیری",
+            href: "#",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const SOCIAL_LINKS = [
+  {
+    icon: Github,
+    name: "گیت‌هاب",
+    href: "#",
+  },
+  {
+    icon: Linkedin,
+    name: "لینکدین",
+    href: "#",
+  },
+  {
+    icon: Facebook,
+    name: "فیسبوک",
+    href: "#",
+  },
+  {
+    icon: Twitter,
+    name: "توییتر",
+    href: "#",
+  },
+];
+
+const HOME_LINK = "#";
+
+const getLink = ({ type, href, name, links }: NavigationLink) => {
+  if (type == "EXTERNAL_LINK") {
+    return (
+      <a
+        href={href}
+        className="inline-flex cursor-pointer items-center gap-0.5 text-sm leading-5 text-muted-foreground hover:text-foreground"
+      >
+        <div>{name}</div>
+        <ExternalLink className="size-3.5 rtl:-scale-x-100" />
+      </a>
+    );
+  }
+
+  if (type == "DROPDOWN") {
+    return (
+      <>
+        <div className="block md:hidden">
+          <Drawer>
+            <DrawerTrigger className="inline-flex cursor-pointer items-center gap-0.5 text-sm leading-5 text-muted-foreground hover:text-foreground">
+              {name}
+              <ChevronDown className="size-3.5" />
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerTitle>{name}</DrawerTitle>
+                <div>
+                  {links?.map((link) => (
+                    <a
+                      href={link.href}
+                      className="block cursor-pointer rounded-lg px-2 py-2.5 text-sm! hover:bg-muted"
+                      key={`drawer-footer-1-${link.name}`}
+                    >
+                      {link.name}
+                    </a>
+                  ))}
+                </div>
+              </DrawerHeader>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button variant="outline">بستن</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        </div>
+        <div className="hidden md:block">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="inline-flex cursor-pointer items-center gap-0.5 text-sm leading-5 text-muted-foreground hover:text-foreground">
+                {name}
+                <ChevronDown className="size-3.5" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              {links?.map((link) => (
+                <DropdownMenuItem
+                  className="cursor-pointer rounded-lg py-2.5 text-sm!"
+                  asChild
+                  key={`dropdown-footer-1-${link.name}`}
+                >
+                  <a href={link.href}>{link.name}</a>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <a
+      href={href}
+      className="cursor-pointer text-sm leading-5 text-muted-foreground hover:text-foreground"
+    >
+      {name}
+    </a>
+  );
+};
+
+interface Footer17Props {
+  className?: string;
+}
+
+const Footer17 = ({ className }: Footer17Props) => {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+
+  const onThemeChange = (value: "light" | "dark" | "system") => {
+    if (value == "system") {
+      if (window.matchMedia) {
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+          setTheme("dark");
+        } else {
+          setTheme("light");
+        }
+      }
+    } else {
+      setTheme(value);
+    }
+  };
+
+  return (
+    <section className={cn(`py-32 ${theme} bg-background`, className)}>
+      <footer className="container">
+        <div className="flex w-full flex-col gap-8">
+          <div className="grid w-full grid-cols-[repeat(2,minmax(auto,15rem))] gap-8 md:grid-cols-[repeat(4,1fr)_5rem] md:gap-0">
+            {NAVIGATION.map((section) => (
+              <div key={`${section.title}`}>
+                <h2 className="mb-3 text-sm font-medium text-foreground">
+                  {section.title}
+                </h2>
+                <ul>
+                  {section.links.map((link, i) => (
+                    <li key={`${link.name}-${i}`} className="py-1.5">
+                      {getLink({
+                        name: link.name,
+                        href: link.href,
+                        type: link?.type,
+                        links: link?.links,
+                      })}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+            <div>
+              <h2 className="mb-3 text-sm font-medium text-foreground">
+                شبکه‌های اجتماعی
+              </h2>
+              <ul>
+                {SOCIAL_LINKS.map((link, i) => (
+                  <li className="py-1.5" key={`social-links-footer-${i}`}>
+                    <a
+                      href={link.href}
+                      className="inline-flex cursor-pointer items-center gap-2 text-sm leading-5 text-muted-foreground hover:text-foreground"
+                    >
+                      <link.icon className="size-3.5" />
+                      {link.name}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <a
+              href={HOME_LINK}
+              className="col-[1/3] row-1 block size-9 md:col-[5/6] md:justify-self-end"
+            >
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                alt="لوگو"
+                className="size-full object-cover object-center"
+                style={
+                  theme === "dark" ? { filter: "invert(100%)" } : undefined
+                }
+              />
+            </a>
+          </div>
+          <div className="mt-8 flex w-full flex-wrap items-center justify-between gap-4">
+            <div>
+              <Button asChild variant="ghost" className="text-foreground">
+                <a href="#">
+                  <div className="relative size-[0.4375rem]">
+                    <span className="absolute inset-0 z-10 m-auto size-[0.6875rem] animate-pulse rounded-full bg-green-400/50" />
+                    <span className="absolute inset-0 z-20 m-auto size-full rounded-full bg-green-500" />
+                  </div>
+                  همه سیستم‌ها عادی هستند
+                </a>
+              </Button>
+            </div>
+            <div>
+              <ToggleGroup
+                value={theme}
+                onValueChange={onThemeChange}
+                type="single"
+                className="rounded-full border"
+              >
+                <ToggleGroupItem
+                  value="system"
+                  aria-label="حالت سیستم"
+                  className="size-6 rounded-full!"
+                >
+                  <MonitorCog className="size-3 stroke-foreground" />
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="light"
+                  aria-label="حالت روشن"
+                  className="size-6 rounded-full"
+                >
+                  <Sun className="size-3 stroke-foreground" />
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="dark"
+                  aria-label="حالت تاریک"
+                  className="size-6 rounded-full!"
+                >
+                  <Moon className="size-3 stroke-foreground" />
+                </ToggleGroupItem>
+              </ToggleGroup>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </section>
+  );
+};
+
+export { Footer17 };
diff --git a/blocks/footer18.tsx b/blocks/footer18.tsx
new file mode 100644
index 0000000..54647e0
--- /dev/null
+++ b/blocks/footer18.tsx
@@ -0,0 +1,472 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  ArrowRight,
+  ChevronDown,
+  Cookie,
+  Facebook,
+  Github,
+  Languages,
+  Linkedin,
+  Twitter,
+} from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+interface LanguageOption {
+  label: string;
+  description: string;
+  link: string;
+}
+
+interface CookiesOption {
+  title: string;
+  description: string;
+  id: string;
+}
+
+interface PrivacyDialog {
+  trigger: string;
+  title: string;
+  text: string;
+}
+
+interface LanguagesSelectProps {
+  languages: Array<LanguageOption>;
+}
+
+const HOME_LINK = "https://ShadcnBlocks";
+const LOGO =
+  "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg";
+
+const SOCIAL_LINKS = [
+  {
+    icon: Github,
+    href: "#",
+  },
+  {
+    icon: Linkedin,
+    href: "#",
+  },
+  {
+    icon: Facebook,
+    href: "#",
+  },
+  {
+    icon: Twitter,
+    href: "#",
+  },
+];
+
+const LANGUAGES: Array<LanguageOption> = [
+  {
+    label: "فارسی",
+    description: "فارسی (ایران)",
+    link: "#",
+  },
+  {
+    label: "English",
+    description: "انگلیسی (آمریکا)",
+    link: "#",
+  },
+  {
+    label: "Français (France)",
+    description: "فرانسوی",
+    link: "#",
+  },
+  {
+    label: "Deutsch",
+    description: "آلمانی",
+    link: "#",
+  },
+  {
+    label: "日本語",
+    description: "ژاپنی",
+    link: "#",
+  },
+  {
+    label: "한국어",
+    description: "کره‌ای",
+    link: "#",
+  },
+];
+
+const COOKIES_OPTIONS: Array<CookiesOption> = [
+  {
+    id: "1",
+    title: "ضروری برای عملکرد",
+    description: "برای عملکرد سایت لازم است. همیشه فعال است.",
+  },
+  {
+    id: "2",
+    title: "عملکردی",
+    description: "ترجیحات را ذخیره و قابلیت‌های پیشرفته را فعال می‌کند.",
+  },
+  {
+    id: "3",
+    title: "تحلیلی",
+    description: "برای بهبود تجربه شما، نحوه استفاده را ردیابی می‌کند.",
+  },
+  {
+    id: "4",
+    title: "بازاریابی",
+    description: "تبلیغات شخصی‌سازی‌شده را فعال می‌کند.",
+  },
+];
+
+const NAVIGATION = [
+  {
+    title: "درباره",
+    links: [
+      {
+        name: "درباره ما",
+        href: "#",
+      },
+      {
+        name: "به ما بپیوندید",
+        href: "#",
+      },
+      {
+        name: "اطلاعات امنیتی",
+        href: "#",
+      },
+      {
+        name: "وضعیت سرویس",
+        href: "#",
+      },
+      {
+        name: "حقوقی و حریم خصوصی",
+        href: "#",
+      },
+    ],
+  },
+  {
+    title: "شروع کنید",
+    links: [
+      {
+        name: "موبایل (موبایل اپل و موبایل اندروید)",
+        href: "#",
+      },
+      {
+        name: "دسکتاپ (Mac و Windows)",
+        href: "#",
+      },
+      {
+        name: "افزونه مرورگر",
+        href: "#",
+      },
+    ],
+  },
+  {
+    title: "بیشتر بدانید",
+    links: [
+      {
+        name: "مرکز پشتیبانی",
+        href: "#",
+      },
+      {
+        name: "طرح‌های قیمت‌گذاری",
+        href: "#",
+      },
+      {
+        name: "مقالات",
+        href: "#",
+      },
+      {
+        name: "گروه‌های کاربری",
+        href: "#",
+      },
+      {
+        name: "یکپارچه‌سازی اپ",
+        href: "#",
+      },
+      {
+        name: "منابع طراحی",
+        href: "#",
+      },
+      {
+        name: "برنامه همکاران",
+        href: "#",
+      },
+    ],
+  },
+  {
+    title: "راهکارها برای",
+    links: [
+      {
+        name: "سازمان‌های بزرگ",
+        href: "#",
+      },
+      {
+        name: "کسب‌وکارهای کوچک",
+        href: "#",
+      },
+      {
+        name: "کاربران شخصی",
+        href: "#",
+      },
+    ],
+  },
+];
+
+const PRIVACY_DIALOG: PrivacyDialog = {
+  trigger: "اطلاعات من را نفروشید یا به اشتراک نگذارید",
+  title:
+    "شما تصمیم گرفته‌اید از اشتراک‌گذاری اطلاعات خود با شرکای تبلیغاتی آنلاین ما انصراف دهید.",
+  text: `
+    اپ ما به شرکا اجازه می‌دهد از کوکی‌ها و پیکسل‌ها برای جمع‌آوری داده
+    استفاده کنند تا تبلیغات مرتبط‌تر ارائه شود و عملکرد تبلیغات ردیابی شود.
+    این شیوه‌ها ممکن است تحت قوانین مربوطه به‌عنوان «فروش» یا «اشتراک‌گذاری/پردازش»
+    برای تبلیغات هدفمند طبقه‌بندی شوند. حتی اگر انصراف دهید، ممکن است همچنان
+    تبلیغات مربوط به اپ ما را ببینید، اما به‌اندازه قبل شخصی‌سازی نمی‌شوند.
+  `,
+};
+
+const FormSchema = z.object({
+  cookies: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "",
+  }),
+});
+
+interface CookiesPanelProps {
+  cookiesOptions: Array<CookiesOption>;
+}
+const CookiesPanel = ({ cookiesOptions }: CookiesPanelProps) => {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      cookies: ["1"],
+    },
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    console.log(data.cookies);
+  }
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">
+          <Cookie className="size-4" />
+          تنظیمات کوکی
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="container overflow-auto pb-4"
+        >
+          <DrawerHeader>
+            <div className="flex w-full flex-col items-start justify-between gap-4 md:flex-row md:items-center">
+              <DrawerTitle className="text-sm leading-normal font-normal">
+                ما از کوکی‌ها برای بهبود تجربه شما استفاده می‌کنیم. برای
+                جزئیات بیشتر{" "}
+                <Button
+                  variant="link"
+                  className="px-0 text-sm leading-normal font-normal underline"
+                >
+                  اطلاعیه کوکی
+                </Button>{" "}
+                را ببینید.
+              </DrawerTitle>
+              <DrawerClose asChild className="w-full md:w-fit">
+                <Button type="submit">تمام</Button>
+              </DrawerClose>
+            </div>
+          </DrawerHeader>
+          <Controller
+            control={form.control}
+            name="cookies"
+            render={({ field }) => (
+              <Field className="grid gap-5 pt-4 lg:grid-cols-4">
+                {cookiesOptions.map((opt) => (
+                  <Field
+                    key={opt.id}
+                    className="flex w-full items-start justify-between rounded-xl border bg-background p-3"
+                  >
+                    <FieldLabel className="flex w-full flex-col gap-1">
+                      <p className="text-sm leading-normal font-medium text-foreground">
+                        {opt.title}
+                      </p>
+                      <p className="text-sm leading-normal text-muted-foreground">
+                        {opt.description}
+                      </p>
+                    </FieldLabel>
+                    <Switch
+                      checked={field.value?.includes(opt.id)}
+                      disabled={opt.id == "1"}
+                      onCheckedChange={(checked) => {
+                        return checked
+                          ? field.onChange([...field.value, opt.id])
+                          : field.onChange(
+                              field.value?.filter((value) => value !== opt.id),
+                            );
+                      }}
+                    />
+                  </Field>
+                ))}
+              </Field>
+            )}
+          />
+        </form>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+const LanguagesSelect = ({ languages }: LanguagesSelectProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          <Languages />
+          فارسی
+          <ChevronDown />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start">
+        {languages.map((lang, i) => (
+          <DropdownMenuItem asChild key={`footer-lang-${i}`}>
+            <a
+              href={lang.link}
+              className="flex cursor-pointer flex-col items-start rounded-md px-4 py-2"
+            >
+              <div className="text-base leading-normal text-foreground">
+                {lang.label}
+              </div>
+              <div className="text-sm leading-normal text-muted-foreground">
+                {lang.description}
+              </div>
+            </a>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const PrivacyDialog = ({ trigger, title, text }: PrivacyDialog) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">{trigger}</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[26.5625rem]">
+        <DialogHeader>
+          <DialogTitle className="leading-normal">{title}</DialogTitle>
+          <DialogDescription className="leading-normal">
+            {text}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogClose asChild>
+          <Button variant="outline">تأیید</Button>
+        </DialogClose>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+interface Footer18Props {
+  className?: string;
+}
+
+const Footer18 = ({ className }: Footer18Props) => {
+  return (
+    <section className={cn("py-20", className)}>
+      <footer className="container">
+        <nav className="flex flex-col gap-[2.25rem] lg:flex-row">
+          <div className="flex w-full flex-col gap-9 lg:w-1/4">
+            {/* Logo */}
+            <a href={HOME_LINK}>
+              <img
+                src={LOGO}
+                alt="لوگوی ری یو آی"
+                title="ShadcnBlocks"
+                className="h-11"
+              />
+            </a>
+            <div className="flex w-full flex-col gap-6">
+              <ul className="flex w-full items-center gap-0.5">
+                {SOCIAL_LINKS.map((link, i) => (
+                  <li key={`social-link-${i}`}>
+                    <Button size="icon" className="size-8" variant="ghost">
+                      <link.icon className="size-4.5" />
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-4 flex flex-col items-start gap-2">
+                <CookiesPanel cookiesOptions={COOKIES_OPTIONS} />
+                <LanguagesSelect languages={LANGUAGES} />
+                <PrivacyDialog {...PRIVACY_DIALOG} />
+              </div>
+            </div>
+          </div>
+          <div className="grid w-full grid-cols-2 gap-6 lg:grid-cols-4">
+            {NAVIGATION.map((section) => (
+              <ul
+                key={`${section.title}`}
+                className="flex flex-col items-start gap-[.4rem]"
+              >
+                <li>
+                  <p className="text-[0.9375rem] leading-normal font-semibold text-foreground">
+                    {section.title}
+                  </p>
+                </li>
+                {section.links.map((link) => (
+                  <li key={`${section.title}-${link.name}`}>
+                    <a
+                      href={link.href}
+                      className="text-[0.9375rem] leading-normal text-muted-foreground hover:underline"
+                    >
+                      {link.name}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ))}
+          </div>
+        </nav>
+        <div className="mt-8 flex items-center justify-between gap-4">
+          <div className="flex items-center justify-between gap-4">
+            <p className="text-sm leading-normal font-medium text-foreground">
+              © ۲۲۵ ری یو آی
+            </p>
+          </div>
+          <Button variant="link" className="px-0!">
+            کاوش بیشتر
+            <ArrowRight className="rtl:rotate-180" />
+          </Button>
+        </div>
+      </footer>
+    </section>
+  );
+};
+
+export { Footer18 };
diff --git a/blocks/footer2.tsx b/blocks/footer2.tsx
new file mode 100644
index 0000000..01f2fed
--- /dev/null
+++ b/blocks/footer2.tsx
@@ -0,0 +1,135 @@
+import { Logo, LogoImage, LogoText } from "@/components/shadcnblocks/logo";
+import { cn } from "@/lib/utils";
+
+interface MenuItem {
+  title: string;
+  links: {
+    text: string;
+    url: string;
+  }[];
+}
+
+interface Footer2Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  className?: string;
+  tagline?: string;
+  menuItems?: MenuItem[];
+  copyright?: string;
+  bottomLinks?: {
+    text: string;
+    url: string;
+  }[];
+}
+
+const Footer2 = ({
+  logo = {
+    src: "/block-media/shadcnblocks/block/block-1.svg",
+    alt: "بلاک‌های ری یو آی",
+    title: "ShadcnBlocks",
+    url: "https://www.ShadcnBlocks",
+  },
+  className,
+  tagline = "ساخت کامپوننت آسان شد.",
+  menuItems = [
+    {
+      title: "محصول",
+      links: [
+        { text: "نمای کلی", url: "#" },
+        { text: "قیمت‌گذاری", url: "#" },
+        { text: "بازار", url: "#" },
+        { text: "ویژگی‌ها", url: "#" },
+        { text: "یکپارچه‌سازی‌ها", url: "#" },
+        { text: "قیمت‌گذاری", url: "#" },
+      ],
+    },
+    {
+      title: "شرکت",
+      links: [
+        { text: "درباره ما", url: "#" },
+        { text: "تیم", url: "#" },
+        { text: "وبلاگ", url: "#" },
+        { text: "فرصت‌های شغلی", url: "#" },
+        { text: "تماس", url: "#" },
+        { text: "حریم خصوصی", url: "#" },
+      ],
+    },
+    {
+      title: "منابع",
+      links: [
+        { text: "راهنما", url: "#" },
+        { text: "فروش", url: "#" },
+        { text: "تبلیغات", url: "#" },
+      ],
+    },
+    {
+      title: "شبکه‌های اجتماعی",
+      links: [
+        { text: "توییتر", url: "#" },
+        { text: "اینستاگرام", url: "#" },
+        { text: "لینکدین", url: "#" },
+      ],
+    },
+  ],
+  copyright = "© ۲۲۴ ShadcnBlocks. تمامی حقوق محفوظ است.",
+  bottomLinks = [
+    { text: "شرایط و ضوابط", url: "#" },
+    { text: "حریم خصوصی", url: "#" },
+  ],
+}: Footer2Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <footer>
+          <div className="grid grid-cols-2 gap-8 lg:grid-cols-6">
+            <div className="col-span-2 mb-8 lg:mb-0">
+              <div className="flex items-center gap-2 lg:justify-start">
+                <Logo url="https://ShadcnBlocks">
+                  <LogoImage
+                    src={logo.src}
+                    alt={logo.alt}
+                    title={logo.title}
+                    className="h-10 dark:invert"
+                  />
+                  <LogoText className="text-xl">{logo.title}</LogoText>
+                </Logo>
+              </div>
+              <p className="mt-4 font-bold">{tagline}</p>
+            </div>
+            {menuItems.map((section, sectionIdx) => (
+              <div key={sectionIdx}>
+                <h3 className="mb-4 font-bold">{section.title}</h3>
+                <ul className="space-y-4 text-muted-foreground">
+                  {section.links.map((link, linkIdx) => (
+                    <li
+                      key={linkIdx}
+                      className="font-medium hover:text-primary"
+                    >
+                      <a href={link.url}>{link.text}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center">
+            <p>{copyright}</p>
+            <ul className="flex gap-4">
+              {bottomLinks.map((link, linkIdx) => (
+                <li key={linkIdx} className="underline hover:text-primary">
+                  <a href={link.url}>{link.text}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer2 };
diff --git a/blocks/footer23.tsx b/blocks/footer23.tsx
new file mode 100644
index 0000000..7ff366b
--- /dev/null
+++ b/blocks/footer23.tsx
@@ -0,0 +1,103 @@
+import { Globe } from "@/components/magicui/globe";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "نمای کلی", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "بازار", href: "#" },
+      { name: "ویژگی‌ها", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "تیم", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "فرصت‌های شغلی", href: "#" },
+    ],
+  },
+  {
+    title: "منابع",
+    links: [
+      { name: "راهنما", href: "#" },
+      { name: "فروش", href: "#" },
+      { name: "تبلیغات", href: "#" },
+    ],
+  },
+];
+
+interface Footer23Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  className?: string;
+}
+const Footer23 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "ShadcnBlocks",
+  },
+  className,
+}: Footer23Props) => {
+  return (
+    <section className={cn("", className)}>
+      <div className="container">
+        <footer>
+          <Separator className="my-14" />
+          <div className="flex flex-col items-center justify-between gap-6 lg:flex-row">
+            <div className="lg:max-w-md">
+              <div className="flex items-center justify-start gap-2">
+                <a href="https://ShadcnBlocks">
+                  <img
+                    src={logo.src}
+                    alt={logo.alt}
+                    title={logo.title}
+                    className="h-10"
+                  />
+                </a>
+                <h2 className="text-xl font-semibold tracking-tight">
+                  {logo.title}
+                </h2>
+              </div>
+              <p className="mt-4 text-start text-sm text-muted-foreground">
+                مجموعه‌ای از کامپوننت‌ها برای ساخت تجربه‌های دیجیتال مدرن و
+                مقیاس‌پذیر.
+              </p>
+            </div>
+            <div className="mt-8 flex w-full flex-wrap justify-between gap-12 lg:mt-0 lg:w-fit">
+              {sections.map((section, sectionIdx) => (
+                <div key={sectionIdx} className="mb-4">
+                  <h3 className="mb-4 font-semibold tracking-tight">
+                    {section.title}
+                  </h3>
+                  <ul className="space-y-2 text-sm text-muted-foreground">
+                    {section.links.map((link, linkIdx) => (
+                      <li key={linkIdx} className="hover:text-primary">
+                        <a href={link.href}>{link.name}</a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="relative h-52 overflow-hidden lg:h-82">
+            <Globe className="absolute top-10 md:scale-125 lg:top-16 lg:scale-150" />
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer23 };
diff --git a/blocks/footer24.tsx b/blocks/footer24.tsx
new file mode 100644
index 0000000..0120e09
--- /dev/null
+++ b/blocks/footer24.tsx
@@ -0,0 +1,118 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const footerData = {
+  heading: "ShadcnBlocks",
+  email: {
+    label: "example@ShadcnBlocks",
+    href: "#",
+  },
+  phone: {
+    label: "(۱۲۳) ۴۵۶ ۷۸۹",
+    href: "tel:+1234567890",
+  },
+  socialLinks: [
+    { label: "توییتر", href: "#" },
+    { label: "اینستاگرام", href: "#" },
+    { label: "تیک‌تاک", href: "#" },
+    { label: "فیسبوک", href: "#" },
+  ],
+  navLinks: [
+    { label: "خانه", href: "#" },
+    { label: "عکس‌ها", href: "#" },
+    { label: "ویدیوها", href: "#" },
+    { label: "درباره", href: "#" },
+    { label: "تماس", href: "#" },
+    { label: "حریم خصوصی", href: "#" },
+  ],
+};
+
+interface Footer24Props {
+  className?: string;
+}
+
+const Footer24 = ({ className }: Footer24Props) => {
+  return (
+    <section className={cn("py-16 md:py-32", className)}>
+      <div className="container px-4 md:px-6">
+        <div className="rounded-lg bg-muted p-8 md:p-16">
+          <div className="mb-6 border-b border-border pb-6 text-start md:mb-8 md:pb-8 md:text-center">
+            <h1 className="text-xl font-bold tracking-tight sm:text-2xll md:text-2xll lg:text-8xl xl:text-9xl">
+              {footerData.heading}
+            </h1>
+          </div>
+
+          <div className="mb-12 flex flex-col gap-8 md:mb-16 lg:flex-row lg:justify-between lg:gap-4 xl:gap-8">
+            {/* Email Section */}
+            <div className="flex flex-col items-start gap-4">
+              <h3 className="text-sm font-medium tracking-wide text-primary uppercase">
+                ایمیل
+              </h3>
+              <a
+                href={footerData.email.href}
+                className="flex items-center gap-2 text-base text-muted-foreground transition-colors hover:text-primary md:text-lg"
+              >
+                {footerData.email.label}
+                <ArrowUpRight className="h-4 w-4 rtl:rotate-180" />
+              </a>
+            </div>
+
+            {/* Social Links Section */}
+            <div className="flex flex-col items-start gap-4">
+              <h3 className="text-sm font-medium tracking-wide text-primary uppercase">
+                ما را دنبال کنید
+              </h3>
+              <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+                {footerData.socialLinks.map((link) => (
+                  <a
+                    key={link.label}
+                    href={link.href}
+                    className="text-base text-muted-foreground transition-colors hover:text-primary md:text-lg"
+                  >
+                    {link.label}
+                  </a>
+                ))}
+              </div>
+            </div>
+
+            {/* Phone Section */}
+            <div className="flex flex-col items-start gap-4">
+              <h3 className="text-sm font-medium tracking-wide text-primary uppercase">
+                تلفن
+              </h3>
+              <a
+                href={footerData.phone.href}
+                className="flex items-center gap-2 text-base text-muted-foreground transition-colors hover:text-primary md:text-lg"
+              >
+                {footerData.phone.label}
+                <ArrowUpRight className="h-4 w-4 rtl:rotate-180" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Section */}
+        <div className="flex flex-col gap-6 py-6 md:flex-row md:items-center md:justify-between md:py-4">
+          <nav className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6">
+            {footerData.navLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                className="text-sm text-muted-foreground transition-colors hover:text-primary"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+
+          <div className="text-sm text-muted-foreground md:text-end md:text-xs">
+            طراحی‌شده در <strong>سان فرانسیسکو</strong>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Footer24 };
diff --git a/blocks/footer25.tsx b/blocks/footer25.tsx
new file mode 100644
index 0000000..502c924
--- /dev/null
+++ b/blocks/footer25.tsx
@@ -0,0 +1,129 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const data = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/block-1.svg",
+    alt: "بلاک‌های ری یو آی",
+    title: "ShadcnBlocks",
+    url: "https://www.ShadcnBlocks",
+  },
+  tagline: "در ارتباط باشیم",
+  personalMessage:
+    "علاقه‌مند به ساخت کامپوننت‌های زیبا و کاربردی هستم که پروژه‌های شما را بدرخشد. بیایید با هم ایده‌تان را به واقعیت تبدیل کنیم.",
+  ctaText: "زمان‌بندی تماس",
+  contact: {
+    phone: "+۱ (۵۵۵) ۱۲۳-۴۵۶۷",
+    email: "hello@artiststudio.com",
+    location: "نیویورک",
+    timezone: "EST",
+  },
+  menuItems: [
+    {
+      title: "مطالعات موردی",
+      links: [
+        { text: "نمای کلی", url: "#" },
+        { text: "پروژه‌ها", url: "#" },
+        { text: "قیمت‌گذاری", url: "#" },
+        { text: "درباره", url: "#" },
+      ],
+    },
+    {
+      title: "شبکه‌های اجتماعی",
+      links: [
+        { text: "توییتر", url: "#" },
+        { text: "اینستاگرام", url: "#" },
+        { text: "لینکدین", url: "#" },
+      ],
+    },
+  ],
+  copyright: "© ۲۲۵ ShadcnBlocks. تمامی حقوق محفوظ است.",
+  bottomLinks: [
+    { text: "شرایط و ضوابط", url: "#" },
+    { text: "حریم خصوصی", url: "#" },
+  ],
+};
+
+interface Footer25Props {
+  className?: string;
+}
+
+const Footer25 = ({ className }: Footer25Props) => {
+  return (
+    <section
+      className={cn("bg-cover bg-center bg-no-repeat py-32", className)}
+      style={{
+        backgroundImage:
+          "url('/block-media/shadcnblocks/block/photos/daniel-leone-g30P1zcOzXo-unsplash.jpg')",
+      }}
+    >
+      <div className="container">
+        <div className="mx-auto max-w-7xl rounded-lg bg-background p-8 shadow-lg md:p-12">
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4 lg:gap-12">
+            <div className="lg:col-span-1">
+              <div className="mb-4 flex items-center gap-4">
+                <img
+                  src="/block-media/shadcnblocks/block/avatar/cool-dude.jpg"
+                  alt="تصویر پروفایل"
+                  className="h-16 w-16 rounded-full object-cover"
+                />
+                <h3 className="text-xl font-medium">گفت‌وگو کنیم</h3>
+              </div>
+              <p className="mb-6 text-sm leading-relaxed text-muted-foreground">
+                {data.personalMessage}
+              </p>
+              <Button>{data.ctaText}</Button>
+            </div>
+            {data.menuItems.map((menu, idx) => (
+              <div key={idx}>
+                <h3 className="mb-4 text-sm font-medium tracking-wider text-primary uppercase">
+                  {menu.title}
+                </h3>
+                <ul className="space-y-3">
+                  {menu.links.map((link, index) => (
+                    <li key={index}>
+                      <a
+                        href={link.url}
+                        className="border-b border-transparent text-muted-foreground transition-all duration-300 ease-in-out hover:border-primary hover:text-primary"
+                      >
+                        {link.text}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+            <div>
+              <h3 className="mb-4 text-sm font-medium tracking-wider text-primary uppercase">
+                تماس
+              </h3>
+              <ul className="space-y-3">
+                <li className="text-muted-foreground">{data.contact.phone}</li>
+                <li className="text-muted-foreground">{data.contact.email}</li>
+                <li className="text-muted-foreground">
+                  {data.contact.location} • {data.contact.timezone}
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 md:flex-row">
+            <p className="text-sm text-muted-foreground">{data.copyright}</p>
+            <div className="flex gap-4">
+              {data.bottomLinks.map((link, idx) => (
+                <a
+                  key={idx}
+                  href={link.url}
+                  className="text-sm text-muted-foreground transition-colors hover:text-primary"
+                >
+                  {link.text}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Footer25 };
diff --git a/blocks/footer27.tsx b/blocks/footer27.tsx
new file mode 100644
index 0000000..45aa226
--- /dev/null
+++ b/blocks/footer27.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Footer27Props {
+  className?: string;
+}
+
+const Footer27 = ({ className }: Footer27Props) => {
+  const socialLinks = [
+    { name: "اینستاگرام", href: "#" },
+    { name: "ایکس (توییتر)", href: "#" },
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <footer>
+          <div>
+            <motion.div
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              className="flex flex-col justify-between md:flex-row md:items-center"
+            >
+              <div className="space-y-8">
+                <motion.div variants={itemVariants} className="space-y-6">
+                  <h2 className="text-xl leading-tight font-bold text-foreground lg:text-2xll">
+                    با من در ارتباط باشید
+                  </h2>
+                  <p className="max-w-md text-lg leading-relaxed text-muted-foreground">
+                    بدون تعهد. فقط یک گفت‌وگوی کوتاه تا ببینیم هماهنگ هستیم.
+                  </p>
+                </motion.div>
+
+                <motion.div variants={itemVariants}>
+                  <Button size="lg">تماس بگیرید</Button>
+                </motion.div>
+              </div>
+
+              <div className="mt-5 space-y-8 md:mt-0">
+                <motion.div variants={itemVariants}>
+                  <div className="space-y-6">
+                    {socialLinks.map((link) => (
+                      <motion.div
+                        key={link.name}
+                        variants={itemVariants}
+                        whileHover={{ x: -4 }}
+                        transition={{
+                          type: "spring",
+                          stiffness: 300,
+                          damping: 20,
+                        }}
+                      >
+                        <a
+                          href={link.href}
+                          className="group flex items-center gap-2 py-2 text-foreground transition-colors hover:text-foreground/80"
+                        >
+                          <span className="text-xl font-medium">
+                            {link.name}
+                          </span>
+                          <ArrowUpRight className="h-6 w-6 transition-transform group-hover:-translate-x-0.5 group-hover:-translate-y-0.5 rtl:rotate-180 rtl:group-hover:translate-x-0.5" />
+                        </a>
+                      </motion.div>
+                    ))}
+                  </div>
+                </motion.div>
+              </div>
+            </motion.div>
+
+            <motion.div
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              className="mt-16"
+            >
+              <motion.div variants={itemVariants}>
+                <Separator className="mb-8" />
+              </motion.div>
+
+              <motion.div
+                variants={itemVariants}
+                className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center"
+              >
+                <p className="text-sm text-muted-foreground">
+                  © ۲۲۵. تمامی حقوق محفوظ است.
+                </p>
+
+                <div className="flex items-center gap-6 text-sm">
+                  <span className="text-muted-foreground">
+                    ساخته‌شده توسط{" "}
+                    <motion.a
+                      href="https://x.com/ShadcnBlocks"
+                      className="underline underline-offset-4 transition-colors hover:text-foreground"
+                      whileHover={{ scale: 1.05 }}
+                      transition={{
+                        type: "spring",
+                        stiffness: 300,
+                        damping: 20,
+                      }}
+                    >
+                      ری یو آی
+                    </motion.a>
+                  </span>
+                </div>
+              </motion.div>
+            </motion.div>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer27 };
diff --git a/blocks/footer3.tsx b/blocks/footer3.tsx
new file mode 100644
index 0000000..8691d2a
--- /dev/null
+++ b/blocks/footer3.tsx
@@ -0,0 +1,166 @@
+import {
+  FaDiscord,
+  FaLinkedin,
+  FaRedditAlien,
+  FaTelegramPlane,
+  FaTwitter,
+} from "react-icons/fa";
+
+import { Logo, LogoImage, LogoText } from "@/components/shadcnblocks/logo";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "نمای کلی", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "بازار", href: "#" },
+      { name: "ویژگی‌ها", href: "#" },
+      { name: "یکپارچه‌سازی‌ها", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "تیم", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "فرصت‌های شغلی", href: "#" },
+      { name: "تماس", href: "#" },
+      { name: "حریم خصوصی", href: "#" },
+    ],
+  },
+  {
+    title: "منابع",
+    links: [
+      { name: "راهنما", href: "#" },
+      { name: "فروش", href: "#" },
+      { name: "تبلیغات", href: "#" },
+    ],
+  },
+];
+
+interface Footer3Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  className?: string;
+}
+const Footer3 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "ShadcnBlocks",
+  },
+  className,
+}: Footer3Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <footer>
+          <Logo url="https://ShadcnBlocks">
+            <LogoImage
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10"
+            />
+            <LogoText className="text-xl">{logo.title}</LogoText>
+          </Logo>
+          <div className="mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4">
+            {sections.map((section, sectionIdx) => (
+              <div key={sectionIdx}>
+                <h3 className="mb-4 font-bold">{section.title}</h3>
+                <ul className="space-y-4 text-muted-foreground">
+                  {section.links.map((link, linkIdx) => (
+                    <li
+                      key={linkIdx}
+                      className="font-medium hover:text-primary"
+                    >
+                      <a href={link.href}>{link.name}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+            <div className="lg:col-span-2 xl:col-span-1">
+              <ul className="mb-10 flex items-center gap-2 text-muted-foreground">
+                <li className="font-medium">
+                  <a href="#">
+                    <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                      <FaDiscord className="size-6" />
+                    </span>
+                  </a>
+                </li>
+                <li className="font-medium">
+                  <a href="#">
+                    <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                      <FaRedditAlien className="size-6" />
+                    </span>
+                  </a>
+                </li>
+                <li className="font-medium">
+                  <a href="#">
+                    <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                      <FaTwitter className="size-6" />
+                    </span>
+                  </a>
+                </li>
+                <li className="font-medium">
+                  <a href="#">
+                    <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                      <FaTelegramPlane className="size-6" />
+                    </span>
+                  </a>
+                </li>
+                <li className="font-medium">
+                  <a href="#">
+                    <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                      <FaLinkedin className="size-6" />
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div className="grid w-full max-w-sm items-center gap-1.5">
+                <Label htmlFor="email">در خبرنامه ما عضو شوید</Label>
+                <div className="flex w-full max-w-sm items-center gap-2">
+                  <Input type="email" placeholder="ایمیل" />
+                  <Button type="submit">عضویت</Button>
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  با ارسال،{" "}
+                  <a href="#" className="text-primary hover:underline">
+                    حریم خصوصی
+                  </a>{" "}
+                  ما را می‌پذیرید.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-24 flex flex-col flex-wrap justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center">
+            <p>© ۲۲۴ ری یو آی. تمامی حقوق محفوظ است.</p>
+            <ul className="flex gap-4">
+              <li className="whitespace-nowrap underline hover:text-primary">
+                <a href="#">شرایط و ضوابط</a>
+              </li>
+              <li className="whitespace-nowrap underline hover:text-primary">
+                <a href="#">حریم خصوصی</a>
+              </li>
+            </ul>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer3 };
diff --git a/blocks/footer30.tsx b/blocks/footer30.tsx
new file mode 100644
index 0000000..f395319
--- /dev/null
+++ b/blocks/footer30.tsx
@@ -0,0 +1,106 @@
+import { CircleArrowOutUpRight } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const NAVIGATION = [
+  { label: "خانه", href: "#" },
+  { label: "مجموعه", href: "#" },
+  { label: "پروژه‌ها", href: "#" },
+  { label: "قیمت‌گذاری", href: "#" },
+  { label: "ورود", href: "#" },
+];
+
+const SOCIAL_LINKS = [
+  { label: "لینکدین", href: "#" },
+  { label: "توییتر", href: "#" },
+  { label: "فیسبوک", href: "#" },
+];
+
+const FOOTER_LINKS = [
+  { label: "حریم خصوصی", href: "#" },
+  { label: "شرایط استفاده", href: "#" },
+];
+
+interface Footer30Props {
+  className?: string;
+}
+
+const Footer30 = ({ className }: Footer30Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col justify-between gap-15 lg:flex-row">
+          <div className="flex flex-col gap-2">
+            <a className="font-medium tracking-tight" href="">
+              +۱ (۱۲۰) ۲۳۳-۱۲۳۱
+            </a>
+            <a
+              className="relative text-3xl font-semibold tracking-tight lg:text-xl"
+              href=""
+            >
+              yo@ری یو آی
+            </a>
+          </div>
+          <div className="flex gap-30">
+            <ul className="space-y-1">
+              <li className="mb-5 text-sm font-medium tracking-tight text-foreground/40">
+                ناوبری
+              </li>
+              {NAVIGATION.map((item) => (
+                <li key={item.label}>
+                  <a
+                    href={item.href}
+                    className="text-xl font-semibold tracking-tight"
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <ul className="space-y-1">
+              <li className="mb-5 text-sm font-medium tracking-tight text-foreground/40">
+                شبکه‌های اجتماعی
+              </li>
+              {SOCIAL_LINKS.map((item) => (
+                <li key={item.label}>
+                  <a
+                    href={item.href}
+                    className="group flex items-center gap-2 text-xl font-semibold tracking-tight"
+                  >
+                    {item.label}{" "}
+                    <CircleArrowOutUpRight className="size-3.5 text-muted-foreground/50 group-hover:text-foreground rtl:-scale-x-100" />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div className="mt-10 text-[13vw] font-semibold tracking-tighter lg:text-end lg:text-[10vw]">
+          ری یو آی<sup className="font-light">&reg;</sup>{" "}
+        </div>
+        <div className="dark relative mt-20 flex h-24 w-full flex-col items-center justify-center gap-2 bg-background text-sm tracking-tight text-foreground lg:h-30 lg:flex-row lg:justify-between lg:gap-4 lg:text-base">
+          <div className="relative z-2 flex items-center gap-4 lg:gap-10">
+            <p className="text-foreground/50">
+              &copy;۲۲۵ ری یو آی تمامی حقوق محفوظ است
+            </p>
+          </div>
+          <div className="relative z-2 flex items-center gap-4 lg:gap-10">
+            {FOOTER_LINKS.map((item, index) => (
+              <a
+                href={item.href}
+                className="text-foreground/50 transition-colors hover:text-foreground"
+                key={index}
+              >
+                {item.label}
+              </a>
+            ))}
+          </div>
+          <div className="absolute start-1/2 h-full w-screen -translate-x-1/2 bg-background" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Footer30 };
diff --git a/blocks/footer31.tsx b/blocks/footer31.tsx
new file mode 100644
index 0000000..e107998
--- /dev/null
+++ b/blocks/footer31.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight, ArrowUpRight } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const NAVIGATION = [
+  { label: "خانه", href: "#" },
+  { label: "مجموعه", href: "#" },
+  { label: "پروژه‌ها", href: "#" },
+  { label: "قیمت‌گذاری", href: "#" },
+  { label: "ورود", href: "#" },
+];
+
+const SOCIAL_LINKS = [
+  { label: "لینکدین", href: "#" },
+  { label: "توییتر", href: "#" },
+  { label: "فیسبوک", href: "#" },
+];
+
+const FOOTER_LINKS = [
+  { label: "حریم خصوصی", href: "#" },
+  { label: "شرایط و ضوابط", href: "#" },
+];
+
+interface Footer31Props {
+  className?: string;
+}
+
+const Footer31 = ({ className }: Footer31Props) => {
+  return (
+    <section
+      className={cn("dark bg-background py-32 text-foreground", className)}
+    >
+      <div className="container">
+        <div className="flex flex-col justify-between gap-15 lg:flex-row">
+          <div className="flex flex-col gap-10">
+            <p className="relative text-xl font-medium tracking-tight lg:text-2xll">
+              بیش از ۸۰۰ بلاک را همین حالا باز کنید
+            </p>
+            <div className="space-y-1 text-sm font-light tracking-tight lg:text-base">
+              <p>پشتیبانی:</p>
+              <a href="#">hi@ری یو آی</a>
+            </div>
+          </div>
+          <div className="grid w-full max-w-xs grid-cols-2 gap-10 text-sm font-light lg:text-base">
+            <ul className="space-y-1">
+              {NAVIGATION.map((item) => (
+                <li key={item.label}>
+                  <a
+                    href={item.href}
+                    className="tracking-tight text-foreground hover:text-foreground/30"
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <ul className="space-y-1">
+              {SOCIAL_LINKS.map((item) => (
+                <li key={item.label}>
+                  <a
+                    href={item.href}
+                    className="group flex items-center gap-1 tracking-tight text-foreground hover:text-foreground/30"
+                  >
+                    {item.label}{" "}
+                    <ArrowUpRight className="size-3.5 text-foreground group-hover:text-muted-foreground/50 rtl:-scale-x-100" />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div className="mt-20 flex flex-col justify-between gap-15 lg:flex-row">
+          <div className="flex w-full max-w-md flex-col gap-10">
+            <div className="space-y-1 text-sm font-light tracking-tight lg:text-base">
+              <p>ثبت‌نام در خبرنامه:</p>
+              <form className="flex w-full items-end border-b border-b-foreground/10">
+                <Input
+                  type="text"
+                  placeholder="نام*"
+                  className="mt-10 rounded-none border-0 !bg-transparent p-0 shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                />
+                <Button type="submit" variant="ghost">
+                  <ArrowRight className="rtl:rotate-180" />
+                </Button>
+              </form>
+            </div>
+          </div>
+          <div className="grid w-full max-w-xs grid-cols-2 gap-10 text-sm font-light lg:text-base">
+            <div className="w-32">پنجاب، ۱۴۱۴۲۱ هند، آسیا</div>
+            <ul className="space-y-1">
+              {FOOTER_LINKS.map((item) => (
+                <li key={item.label}>
+                  <a
+                    href={item.href}
+                    className="group flex items-center gap-1 tracking-tight text-foreground hover:text-foreground/30"
+                  >
+                    {item.label}{" "}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div className="mt-20 w-full lg:mt-32">
+          <LogoSvg />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Footer31 };
+
+const LogoSvg = () => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.05,
+        delayChildren: 0.1,
+      },
+    },
+  };
+
+  const pathVariants = {
+    hidden: {
+      y: "100%",
+      opacity: 0,
+    },
+    visible: {
+      y: "0%",
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94] as const,
+      },
+    },
+  };
+
+  return (
+    <motion.svg
+      variants={containerVariants}
+      initial="hidden"
+      whileInView="visible"
+      width="1339"
+      height="370"
+      viewBox="0 0 1339 370"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-full w-full"
+    >
+      <motion.path
+        variants={pathVariants}
+        d="M1333.13 163.608L1274.65 169.988C1272.99 164.08 1270.1 158.527 1265.96 153.329C1261.94 148.13 1256.51 143.936 1249.66 140.745C1242.8 137.555 1234.42 135.96 1224.49 135.96C1211.14 135.96 1199.92 138.855 1190.82 144.644C1181.84 150.434 1177.41 157.937 1177.53 167.152C1177.41 175.068 1180.3 181.508 1186.21 186.47C1192.24 191.432 1202.16 195.509 1215.98 198.699L1262.42 208.624C1288.17 214.177 1307.32 222.979 1319.84 235.03C1332.48 247.082 1338.86 262.855 1338.98 282.35C1338.86 299.482 1333.84 314.606 1323.92 327.72C1314.11 340.717 1300.46 350.878 1282.98 358.204C1265.49 365.529 1245.4 369.192 1222.72 369.192C1189.4 369.192 1162.58 362.221 1142.26 348.279C1121.94 334.219 1109.82 314.665 1105.93 289.617L1168.49 283.591C1171.32 295.879 1177.35 305.153 1186.56 311.415C1195.78 317.678 1207.77 320.809 1222.54 320.809C1237.78 320.809 1250.01 317.678 1259.23 311.415C1268.56 305.153 1273.23 297.415 1273.23 288.199C1273.23 280.401 1270.22 273.961 1264.19 268.881C1258.28 263.8 1249.07 259.901 1236.54 257.184L1190.11 247.436C1164 242.001 1144.68 232.845 1132.16 219.966C1119.63 206.969 1113.43 190.546 1113.55 170.697C1113.43 153.919 1117.98 139.387 1127.19 127.099C1136.53 114.693 1149.46 105.123 1166.01 98.3881C1182.67 91.5353 1201.86 88.1089 1223.6 88.1089C1255.51 88.1089 1280.61 94.9026 1298.93 108.49C1317.36 122.077 1328.76 140.45 1333.13 163.608Z"
+        fill="currentColor"
+      />
+      <motion.path
+        variants={pathVariants}
+        d="M932.249 278.451L932.072 201.003H942.351L1040.18 91.6535H1115.15L994.81 225.637H981.518L932.249 278.451ZM873.764 363.875V0.913086H937.92V363.875H873.764ZM1044.61 363.875L955.997 239.993L999.241 194.8L1121.35 363.875H1044.61Z"
+        fill="currentColor"
+      />
+      <motion.path
+        variants={pathVariants}
+        d="M744.393 369.192C717.218 369.192 693.883 363.225 674.388 351.292C655.011 339.358 640.065 322.876 629.549 301.845C619.152 280.696 613.953 256.357 613.953 228.827C613.953 201.18 619.27 176.782 629.904 155.633C640.537 134.365 655.543 117.824 674.919 106.009C694.414 94.0755 717.454 88.1089 744.038 88.1089C766.132 88.1089 785.687 92.1851 802.7 100.338C819.832 108.372 833.479 119.774 843.64 134.542C853.801 149.193 859.59 166.325 861.008 185.938H799.688C797.206 172.824 791.299 161.895 781.965 153.151C772.749 144.29 760.402 139.859 744.924 139.859C731.809 139.859 720.29 143.404 710.365 150.493C700.44 157.464 692.701 167.507 687.148 180.622C681.713 193.736 678.996 209.451 678.996 227.764C678.996 246.314 681.713 262.264 687.148 275.616C692.583 288.849 700.204 299.069 710.01 306.276C719.935 313.365 731.573 316.91 744.924 316.91C754.376 316.91 762.824 315.137 770.268 311.593C777.829 307.93 784.151 302.672 789.231 295.819C794.312 288.967 797.797 280.637 799.688 270.83H861.008C859.472 290.089 853.801 307.162 843.994 322.049C834.188 336.818 820.837 348.397 803.941 356.786C787.045 365.056 767.196 369.192 744.393 369.192Z"
+        fill="currentColor"
+      />
+      <motion.path
+        variants={pathVariants}
+        d="M480.684 369.192C454.099 369.192 431.06 363.343 411.565 351.646C392.07 339.949 376.946 323.585 366.195 302.554C355.561 281.523 350.244 256.948 350.244 228.827C350.244 200.707 355.561 176.073 366.195 154.924C376.946 133.774 392.07 117.351 411.565 105.654C431.06 93.9574 454.099 88.1089 480.684 88.1089C507.268 88.1089 530.307 93.9574 549.802 105.654C569.297 117.351 584.362 133.774 594.995 154.924C605.747 176.073 611.123 200.707 611.123 228.827C611.123 256.948 605.747 281.523 594.995 302.554C584.362 323.585 569.297 339.949 549.802 351.646C530.307 363.343 507.268 369.192 480.684 369.192ZM481.038 317.796C495.452 317.796 507.504 313.838 517.192 305.921C526.881 297.887 534.088 287.135 538.814 273.666C543.658 260.197 546.08 245.191 546.08 228.65C546.08 211.991 543.658 196.927 538.814 183.457C534.088 169.87 526.881 159.059 517.192 151.025C507.504 142.99 495.452 138.973 481.038 138.973C466.269 138.973 453.981 142.99 444.175 151.025C434.486 159.059 427.22 169.87 422.376 183.457C417.65 196.927 415.287 211.991 415.287 228.65C415.287 245.191 417.65 260.197 422.376 273.666C427.22 287.135 434.486 297.887 444.175 305.921C453.981 313.838 466.269 317.796 481.038 317.796Z"
+        fill="currentColor"
+      />
+      <motion.path
+        variants={pathVariants}
+        d="M335.895 0.913086V363.875H271.738V0.913086H335.895Z"
+        fill="currentColor"
+      />
+      <motion.path
+        variants={pathVariants}
+        d="M0.142578 363.875V0.913086H64.2989V136.669H66.9573C70.2656 130.053 74.9326 123.023 80.9583 115.579C86.984 108.018 95.1365 101.578 105.416 96.2615C115.695 90.8265 128.81 88.109 144.76 88.109C165.791 88.109 184.755 93.4849 201.65 104.237C218.664 114.87 232.133 130.644 242.058 151.556C252.101 172.351 257.122 197.872 257.122 228.119C257.122 258.011 252.219 283.414 242.413 304.326C232.606 325.239 219.255 341.19 202.359 352.178C185.463 363.166 166.323 368.66 144.937 368.66C129.341 368.66 116.404 366.061 106.125 360.862C95.8454 355.663 87.5748 349.401 81.3128 342.076C75.1689 334.632 70.3837 327.602 66.9573 320.986H63.2356V363.875H0.142578ZM63.0583 227.764C63.0583 245.369 65.5395 260.788 70.5019 274.021C75.5824 287.254 82.8487 297.592 92.3009 305.035C101.871 312.361 113.45 316.023 127.037 316.023C141.216 316.023 153.09 312.243 162.66 304.681C172.23 297.001 179.438 286.545 184.282 273.312C189.244 259.961 191.725 244.778 191.725 227.764C191.725 210.869 189.303 195.863 184.459 182.748C179.615 169.634 172.408 159.354 162.837 151.911C153.267 144.467 141.334 140.746 127.037 140.746C113.332 140.746 101.694 144.349 92.1236 151.556C82.5533 158.764 75.287 168.866 70.3247 181.862C65.4804 194.859 63.0583 210.16 63.0583 227.764Z"
+        fill="currentColor"
+      />
+    </motion.svg>
+  );
+};
diff --git a/blocks/footer32.tsx b/blocks/footer32.tsx
new file mode 100644
index 0000000..24c4df8
--- /dev/null
+++ b/blocks/footer32.tsx
@@ -0,0 +1,126 @@
+import { ArrowUpRight, Facebook, Instagram, Twitter } from "lucide-react";
+
+import { RainbowButton } from "@/components/magicui/rainbow-button";
+import { cn } from "@/lib/utils";
+
+interface Footer32Props {
+  preHeading: string;
+  heading1: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+  email: string;
+  socialLinks: {
+    link1: {
+      url: string;
+      label: string;
+    };
+    link2: {
+      url: string;
+      label: string;
+    };
+    link3: {
+      url: string;
+      label: string;
+    };
+  };
+  className?: string;
+}
+
+const Footer32 = ({
+  preHeading = "در ارتباط باشیم",
+  heading1 = "می‌خواهید سریع‌تر رشد کنید؟ همین امروز ShadcnBlocks را امتحان کنید.",
+  description = "به هزاران شرکتی بپیوندید که از پلتفرم ما برای مقیاس‌دهی عملیات خود استفاده می‌کنند.",
+  buttonText = "همین حالا شروع کنید",
+  buttonUrl = "#",
+  email = "hello@company.com",
+  socialLinks = {
+    link1: {
+      url: "#",
+      label: "توییتر",
+    },
+    link2: {
+      url: "#",
+      label: "اینستاگرام",
+    },
+    link3: {
+      url: "#",
+      label: "فیسبوک",
+    },
+  },
+  className,
+}: Footer32Props) => {
+  return (
+    <section className={cn("relative py-32", className)}>
+      <div className="relative z-10 container">
+        <div className="mx-auto flex max-w-3xl flex-col items-center gap-2 text-center">
+          {/* Pre-heading with decorative lines */}
+          <div className="flex w-full items-center gap-4">
+            <div className="h-px flex-1 bg-[linear-gradient(270deg,var(--primary,rgb(255,255,255))_0%,var(--secondary,rgb(0,0,0))_100%)] opacity-50" />
+            <p className="text-sm text-muted-foreground italic md:text-base">
+              {preHeading}
+            </p>
+            <div className="h-px flex-1 bg-[linear-gradient(270deg,var(--secondary,rgb(0,0,0))_0%,var(--primary,rgb(255,255,255))_100%)] opacity-50" />
+          </div>
+
+          {/* Main heading */}
+          <h2 className="md:text-65xl py-6 text-2xll">{heading1}</h2>
+
+          {/* Description */}
+          <p className="max-w-2xl text-base text-muted-foreground md:text-lg">
+            {description}
+          </p>
+
+          <RainbowButton asChild variant="outline">
+            <a
+              href={buttonUrl}
+              className="group relative mt-4 block rounded-lg border bg-white px-8 py-6 text-base transition-all"
+            >
+              <span className="text-secondary-foreground">{buttonText}</span>
+              <ArrowUpRight className="h-4 w-4 text-foreground transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 rtl:rotate-180 rtl:group-hover:translate-x-1" />
+            </a>
+          </RainbowButton>
+
+          {/* Social Media Links */}
+          <div className="flex items-center gap-6 pt-8">
+            <a
+              href={socialLinks.link1.url}
+              className="text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={socialLinks.link1.label}
+            >
+              <Twitter className="h-5 w-5" />
+            </a>
+            <div className="h-4 w-px bg-border" />
+            <a
+              href={socialLinks.link2.url}
+              className="text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={socialLinks.link2.label}
+            >
+              <Instagram className="h-5 w-5" />
+            </a>
+            <div className="h-4 w-px bg-border" />
+            <a
+              href={socialLinks.link3.url}
+              className="text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={socialLinks.link3.label}
+            >
+              <Facebook className="h-5 w-5" />
+            </a>
+          </div>
+
+          {/* Support Email */}
+          <p className="pt-2 text-sm text-muted-foreground md:text-base">
+            <a
+              href={`mailto:${email}`}
+              className="transition-colors hover:text-foreground"
+            >
+              {email}
+            </a>
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Footer32 };
diff --git a/blocks/footer4.tsx b/blocks/footer4.tsx
new file mode 100644
index 0000000..18b0d51
--- /dev/null
+++ b/blocks/footer4.tsx
@@ -0,0 +1,151 @@
+import { FaDiscord, FaTwitter } from "react-icons/fa";
+
+import {
+  Logo,
+  LogoImageDesktop,
+  LogoImageMobile,
+} from "@/components/shadcnblocks/logo";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "نمای کلی", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "بازار", href: "#" },
+      { name: "ویژگی‌ها", href: "#" },
+      { name: "یکپارچه‌سازی‌ها", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "تیم", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "فرصت‌های شغلی", href: "#" },
+      { name: "تماس", href: "#" },
+      { name: "حریم خصوصی", href: "#" },
+    ],
+  },
+  {
+    title: "منابع",
+    links: [
+      { name: "راهنما", href: "#" },
+      { name: "فروش", href: "#" },
+      { name: "تبلیغات", href: "#" },
+    ],
+  },
+];
+
+interface Footer4Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+    srcMobile: string;
+  };
+  className?: string;
+}
+const Footer4 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg",
+    srcMobile:
+      "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "لوگو",
+    title: "ShadcnBlocks",
+  },
+  className,
+}: Footer4Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <footer>
+          <div className="grid grid-cols-2 gap-8 lg:grid-cols-6">
+            <div className="col-span-2 flex h-full items-center justify-between md:items-start lg:col-span-3 lg:flex-col">
+              <Logo url="https://ShadcnBlocks">
+                <LogoImageDesktop
+                  src={logo.src}
+                  alt={logo.alt}
+                  title={logo.title}
+                  className="h-9"
+                />
+                <LogoImageMobile
+                  src={logo.srcMobile}
+                  alt={logo.alt}
+                  title={logo.title}
+                  className="h-8"
+                />
+              </Logo>
+              <ul className="flex items-center gap-6 text-muted-foreground">
+                <li className="font-medium hover:text-primary">
+                  <a href="#">
+                    <FaDiscord className="size-6" />
+                  </a>
+                </li>
+
+                <li className="font-medium hover:text-primary">
+                  <a href="#">
+                    <FaTwitter className="size-6" />
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <Separator className="col-span-2 my-6 lg:hidden" />
+            {sections.map((section, sectionIdx) => (
+              <div key={sectionIdx}>
+                <h3 className="mb-4 font-bold">{section.title}</h3>
+                <ul className="space-y-4 text-muted-foreground">
+                  {section.links.map((link, linkIdx) => (
+                    <li
+                      key={linkIdx}
+                      className="font-medium hover:text-primary"
+                    >
+                      <a href={link.href}>{link.name}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <Separator className="my-14 lg:my-20" />
+          <div className="flex flex-col justify-between gap-8 lg:flex-row lg:items-center">
+            <div>
+              <p className="mb-2 text-3xl font-semibold lg:text-xl">
+                در خبرنامه ما عضو شوید
+              </p>
+              <p className="text-muted-foreground">
+                از اخبار، ویژگی‌ها و به‌روزرسانی‌های اختصاصی باخبر شوید.
+              </p>
+            </div>
+            <div className="flex w-full max-w-sm items-center gap-2">
+              <Input type="email" placeholder="ایمیل" />
+              <Button type="submit">عضویت</Button>
+            </div>
+          </div>
+          <Separator className="my-14 lg:my-20" />
+          <div className="flex flex-col justify-between gap-4 text-sm font-medium text-muted-foreground md:flex-row md:items-center">
+            <ul className="flex gap-4">
+              <li className="underline hover:text-primary">
+                <a href="#"> شرایط و ضوابط</a>
+              </li>
+              <li className="underline hover:text-primary">
+                <a href="#"> حریم خصوصی</a>
+              </li>
+            </ul>
+            <p>© ۲۲۴ ری یو آی. تمامی حقوق محفوظ است.</p>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer4 };
diff --git a/blocks/footer5.tsx b/blocks/footer5.tsx
new file mode 100644
index 0000000..f2fe041
--- /dev/null
+++ b/blocks/footer5.tsx
@@ -0,0 +1,154 @@
+import {
+  FaAndroid,
+  FaApple,
+  FaFacebook,
+  FaInstagram,
+  FaLinkedin,
+  FaRedditAlien,
+  FaTwitter,
+} from "react-icons/fa";
+
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "نمای کلی", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "بازار", href: "#" },
+      { name: "ویژگی‌ها", href: "#" },
+      { name: "یکپارچه‌سازی‌ها", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "تیم", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "فرصت‌های شغلی", href: "#" },
+      { name: "تماس", href: "#" },
+      { name: "حریم خصوصی", href: "#" },
+    ],
+  },
+  {
+    title: "منابع",
+    links: [
+      { name: "راهنما", href: "#" },
+      { name: "فروش", href: "#" },
+      { name: "تبلیغات", href: "#" },
+    ],
+  },
+  {
+    title: "شبکه‌های اجتماعی",
+    links: [
+      { name: "توییتر", href: "#" },
+      { name: "اینستاگرام", href: "#" },
+      { name: "لینکدین", href: "#" },
+    ],
+  },
+];
+
+interface Footer5Props {
+  className?: string;
+}
+
+const Footer5 = ({ className }: Footer5Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <footer>
+          <div className="grid grid-cols-2 gap-8 lg:grid-cols-4">
+            {sections.map((section, sectionIdx) => (
+              <div key={sectionIdx}>
+                <h3 className="mb-4 font-bold">{section.title}</h3>
+                <ul className="space-y-4 text-muted-foreground">
+                  {section.links.map((link, linkIdx) => (
+                    <li
+                      key={linkIdx}
+                      className="font-medium hover:text-primary"
+                    >
+                      <a href={link.href}>{link.name}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="mt-10 gap-10">
+            <div className="grid gap-8 lg:grid-cols-4 lg:flex-row">
+              <div className="col-span-3">
+                <p className="mb-3 font-bold">ما را دنبال کنید</p>
+                <ul className="flex items-center gap-2 text-muted-foreground">
+                  <li className="font-medium">
+                    <a href="#">
+                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                        <FaFacebook className="size-6" />
+                      </span>
+                    </a>
+                  </li>
+                  <li className="font-medium">
+                    <a href="#">
+                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                        <FaRedditAlien className="size-6" />
+                      </span>
+                    </a>
+                  </li>
+                  <li className="font-medium">
+                    <a href="#">
+                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                        <FaTwitter className="size-6" />
+                      </span>
+                    </a>
+                  </li>
+                  <li className="font-medium">
+                    <a href="#">
+                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                        <FaInstagram className="size-6" />
+                      </span>
+                    </a>
+                  </li>
+                  <li className="font-medium">
+                    <a href="#">
+                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                        <FaLinkedin className="size-6" />
+                      </span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <p className="mb-3 font-bold">اپلیکیشن موبایل</p>
+                <ul className="flex items-center gap-2 text-muted-foreground">
+                  <li className="font-medium">
+                    <a href="#">
+                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                        <FaAndroid className="size-6" />
+                      </span>
+                    </a>
+                  </li>
+                  <li className="font-medium">
+                    <a href="#">
+                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
+                        <FaApple className="size-6" />
+                      </span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div className="mt-24 border-t pt-8">
+            <p className="text-center text-sm font-medium text-muted-foreground">
+              © ۲۲۴ ری یو آی. تمامی حقوق محفوظ است.
+            </p>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer5 };
diff --git a/blocks/footer50.tsx b/blocks/footer50.tsx
new file mode 100644
index 0000000..3cbdfda
--- /dev/null
+++ b/blocks/footer50.tsx
@@ -0,0 +1,142 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface NavItem {
+  name: string;
+  href: string;
+}
+
+interface SocialItem {
+  name: string;
+  href: string;
+}
+
+interface Footer50Props {
+  heading?: string;
+  description?: string;
+  ctaText?: string;
+  ctaHref?: string;
+  navigation?: NavItem[];
+  social?: SocialItem[];
+  legal?: NavItem[];
+  brandName?: string;
+  className?: string;
+}
+
+const Footer50 = ({
+  heading = "همین امروز دوره آزمایشی رایگان را شروع کنید",
+  description = "ابزار مناسب برای برنامه‌ریزی و ساخت محصولات نرم‌افزاری مدرن.",
+  ctaText = "شروع کنید",
+  ctaHref = "#",
+  navigation = [
+    { name: "محصول", href: "#" },
+    { name: "درباره ما", href: "/about" },
+    { name: "قیمت‌گذاری", href: "/pricing" },
+    { name: "سوالات متداول", href: "/faq" },
+    { name: "تماس", href: "/contact" },
+  ],
+  social = [
+    { name: "توییتر", href: "#" },
+    { name: "لینکدین", href: "#" },
+  ],
+  legal = [{ name: "حریم خصوصی", href: "/privacy" }],
+  brandName = "mainline",
+  className,
+}: Footer50Props) => {
+  return (
+    <footer
+      className={cn(
+        "flex flex-col items-center gap-14 pt-28 lg:pt-32",
+        className,
+      )}
+    >
+      <div className="container space-y-3 text-center">
+        <h2 className="text-xl tracking-tight md:text-xl lg:text-2xll">
+          {heading}
+        </h2>
+        <p className="mx-auto max-w-xl leading-snug text-balance text-muted-foreground">
+          {description}
+        </p>
+        <div>
+          <Button size="lg" className="mt-4" asChild>
+            <a href={ctaHref}>{ctaText}</a>
+          </Button>
+        </div>
+      </div>
+
+      <nav className="container flex flex-col items-center gap-4">
+        <ul className="flex flex-wrap items-center justify-center gap-6">
+          {navigation.map((item) => (
+            <li key={item.name}>
+              <a
+                href={item.href}
+                className="font-medium transition-opacity hover:opacity-75"
+              >
+                {item.name}
+              </a>
+            </li>
+          ))}
+          {social.map((item) => (
+            <li key={item.name}>
+              <a
+                href={item.href}
+                className="flex items-center gap-0.5 font-medium transition-opacity hover:opacity-75"
+              >
+                {item.name}{" "}
+                <ArrowUpRight className="size-4 rtl:rotate-180" />
+              </a>
+            </li>
+          ))}
+        </ul>
+        <ul className="flex flex-wrap items-center justify-center gap-6">
+          {legal.map((item) => (
+            <li key={item.name}>
+              <a
+                href={item.href}
+                className="text-sm text-muted-foreground transition-opacity hover:opacity-75"
+              >
+                {item.name}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+
+      <div className="mt-10 w-full text-primary md:mt-14 lg:mt-20">
+        <svg
+          width="1570"
+          height="293"
+          viewBox="0 0 1570 293"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="w-full"
+          aria-label={`لوگوی ${brandName}`}
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M642.357 112.457V368.321H677.656V112.457H642.357ZM641.853 45.3953C646.896 50.5539 652.947 53.1332 660.007 53.1332C667.067 53.1332 673.118 50.5539 678.16 45.3953C683.203 40.2368 685.724 33.8746 685.724 26.3087C685.724 18.3989 683.203 12.0366 678.16 7.22198C673.118 2.40733 667.067 0 660.007 0C652.611 0 646.392 2.40733 641.349 7.22198C636.642 12.0366 634.289 18.3989 634.289 26.3087C634.289 33.8746 636.811 40.2368 641.853 45.3953ZM1028.99 368.321V112.457H1064.29V368.321H1028.99ZM1046.64 53.1332C1039.58 53.1332 1033.53 50.5539 1028.48 45.3953C1023.44 40.2368 1020.92 33.8746 1020.92 26.3087C1020.92 18.3989 1023.27 12.0366 1027.98 7.22198C1033.02 2.40733 1039.24 0 1046.64 0C1053.7 0 1059.75 2.40733 1064.79 7.22198C1069.83 12.0366 1072.36 18.3989 1072.36 26.3087C1072.36 33.8746 1069.83 40.2368 1064.79 45.3953C1059.75 50.5539 1053.7 53.1332 1046.64 53.1332ZM1099.76 112.457V368.322H1135.05V235.747C1135.05 214.424 1138.42 196.541 1145.14 182.097C1152.2 167.653 1161.78 156.649 1173.88 149.083C1185.98 141.517 1199.6 137.734 1214.73 137.734C1236.58 137.734 1253.22 144.612 1264.65 158.368C1276.42 172.124 1282.3 193.102 1282.3 221.303V368.322H1317.6V217.176C1317.6 191.727 1313.56 170.921 1305.5 154.757C1297.43 138.25 1286.17 126.041 1271.71 118.131C1257.25 110.222 1240.28 106.267 1220.78 106.267C1201.95 106.267 1185.31 110.565 1170.86 119.163C1156.4 127.761 1144.97 140.141 1136.57 156.305H1135.05L1132.03 112.457H1099.76ZM1391.49 358.004C1409.64 369.009 1430.49 374.512 1454.02 374.512C1473.52 374.512 1490.66 371.073 1505.45 364.195C1520.25 356.973 1532.52 347.171 1542.27 334.791C1552.01 322.41 1558.91 308.482 1562.94 293.007H1528.65C1523.27 308.826 1514.19 321.207 1501.42 330.148C1488.64 339.09 1472.84 343.56 1454.02 343.56C1439.56 343.56 1425.61 339.949 1412.16 332.727C1399.05 325.162 1388.3 313.813 1379.89 298.681C1372.38 284.851 1368.23 268 1367.43 248.127H1569.5C1569.83 243.312 1570 239.014 1570 235.231V224.398C1570 203.763 1565.46 184.505 1556.38 166.622C1547.31 148.739 1534.2 134.295 1517.05 123.29C1499.91 111.941 1479.23 106.267 1455.03 106.267C1431.16 106.267 1409.98 111.769 1391.49 122.774C1373 133.779 1358.54 149.255 1348.12 169.201C1338.04 189.148 1332.99 212.705 1332.99 239.873C1332.99 267.042 1338.21 290.771 1348.63 311.061C1359.05 331.008 1373.34 346.656 1391.49 358.004ZM1367.64 217.176C1368.79 201.865 1372.7 188.797 1379.39 177.971C1387.46 164.558 1398.04 154.413 1411.16 147.535C1424.27 140.657 1438.39 137.218 1453.51 137.218C1476.37 137.218 1495.54 144.268 1511 158.368C1526.46 172.468 1534.7 192.071 1535.71 217.176H1367.64ZM956.449 4.64307V368.322H991.748V4.64307H956.449ZM713.124 368.322V112.457H745.397L748.423 156.305H749.936C758.34 140.141 769.77 127.761 784.226 119.163C798.681 110.565 815.322 106.267 834.148 106.267C853.646 106.267 870.623 110.222 885.079 118.131C899.535 126.041 910.797 138.25 918.865 154.757C926.933 170.921 930.967 191.727 930.967 217.176V368.322H895.669V221.303C895.669 193.102 889.786 172.124 878.019 158.368C866.589 144.612 849.948 137.734 828.097 137.734C812.969 137.734 799.354 141.517 787.251 149.083C775.149 156.649 765.568 167.653 758.508 182.097C751.785 196.541 748.423 214.424 748.423 235.747V368.322H713.124ZM490.55 374.512C469.707 374.512 452.394 370.901 438.61 363.679C424.827 356.113 414.574 346.312 407.85 334.275C401.126 322.238 397.765 309.17 397.765 295.07C397.765 277.187 402.303 262.227 411.38 250.19C420.457 237.81 433.231 228.525 449.704 222.334C466.177 216.144 485.171 213.049 506.686 213.049H575.267C575.267 196.885 572.577 183.129 567.198 171.78C562.156 160.431 554.76 151.834 545.011 145.988C535.261 140.141 523.159 137.218 508.703 137.218C491.222 137.218 476.094 141.861 463.319 151.146C450.545 160.088 442.644 173.328 439.619 190.867H402.303C404.32 172.296 410.539 156.82 420.961 144.44C431.719 131.715 444.83 122.258 460.294 116.068C475.758 109.534 491.894 106.267 508.703 106.267C531.9 106.267 550.894 110.737 565.686 119.679C580.814 128.62 592.076 141.001 599.471 156.82C606.867 172.296 610.565 190.351 610.565 210.985V368.322H578.292L574.762 318.799H573.25C569.888 326.021 565.686 333.071 560.643 339.949C555.6 346.828 549.717 352.846 542.994 358.004C536.606 362.819 529.042 366.774 520.302 369.869C511.561 372.964 501.644 374.512 490.55 374.512ZM494.08 342.529C506.182 342.529 517.108 340.121 526.857 335.307C536.942 330.492 545.515 323.786 552.575 315.188C559.971 306.591 565.517 296.446 569.215 284.753C573.25 272.716 575.267 259.82 575.267 246.064V244H509.208C491.054 244 476.43 246.236 465.336 250.706C454.579 255.177 446.679 261.195 441.636 268.761C436.929 275.983 434.576 284.409 434.576 294.038C434.576 303.668 436.761 312.093 441.132 319.315C445.838 326.537 452.562 332.212 461.302 336.338C470.379 340.465 481.305 342.529 494.08 342.529ZM0 112.457V368.322H35.2987V235.747C35.2987 214.424 38.4924 196.541 44.8798 182.097C51.2671 167.653 60.0078 156.649 71.1017 149.083C82.1955 141.517 94.8022 137.734 108.922 137.734C129.092 137.734 144.725 144.612 155.819 158.368C166.912 172.124 172.459 193.102 172.459 221.303V368.322H207.758V224.914C207.758 205.999 210.952 190.179 217.339 177.455C223.726 164.386 232.467 154.585 243.561 148.051C254.991 141.173 267.598 137.734 281.381 137.734C301.552 137.734 317.184 144.612 328.278 158.368C339.372 172.124 344.919 193.102 344.919 221.303V368.322H380.217V217.176C380.217 191.727 376.015 170.921 367.611 154.757C359.542 138.25 348.449 126.041 334.329 118.131C320.21 110.222 304.073 106.267 285.919 106.267C267.766 106.267 250.789 111.081 234.988 120.711C219.524 129.996 208.262 143.064 201.203 159.916H199.69C193.975 146.159 186.915 135.498 178.511 127.933C170.106 120.023 160.693 114.52 150.272 111.425C139.85 107.986 128.924 106.267 117.494 106.267C98.3321 106.267 82.0274 110.737 68.5803 119.679C55.4694 128.62 45.0479 140.141 37.3158 154.241H35.803L32.2731 112.457H0Z"
+            fill="url(#paint0_linear_footer50)"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_footer50"
+              x1="742.5"
+              y1="0"
+              x2="742.5"
+              y2="218.5"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="currentColor" />
+              <stop offset="1" stopColor="currentColor" stopOpacity="0.2" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    </footer>
+  );
+};
+
+export { Footer50 };
diff --git a/blocks/footer6.tsx b/blocks/footer6.tsx
new file mode 100644
index 0000000..6432cce
--- /dev/null
+++ b/blocks/footer6.tsx
@@ -0,0 +1,116 @@
+import { cn } from "@/lib/utils";
+
+const sitemap = [
+  {
+    title: "شرکت",
+    links: [
+      {
+        title: "درباره ما",
+        href: "#",
+      },
+      {
+        title: "فرصت‌های شغلی",
+        href: "#",
+      },
+      {
+        title: "تماس",
+        href: "#",
+      },
+      {
+        title: "مطبوعات",
+        href: "#",
+      },
+    ],
+  },
+  {
+    title: "پشتیبانی",
+    links: [
+      {
+        title: "راهنمای کاربران",
+        href: "#",
+      },
+      {
+        title: "انجمن",
+        href: "#",
+      },
+      {
+        title: "وضعیت سرویس",
+        href: "#",
+      },
+      {
+        title: "مستندات اتصال هوشمند",
+        href: "#",
+      },
+    ],
+  },
+];
+
+interface Footer6Props {
+  className?: string;
+}
+
+const Footer6 = ({ className }: Footer6Props) => {
+  return (
+    <section className={cn("py-16", className)}>
+      <div className="container">
+        <footer>
+          <div className="relative mb-8 flex w-full flex-col gap-x-28 gap-y-8 md:flex-row md:justify-between md:gap-y-0">
+            <div className="max-w-96">
+              <div className="mb-6 flex items-center gap-3">
+                <div className="flex size-12 items-center justify-center rounded-lg border border-border bg-accent p-2">
+                  <img
+                    src="/block-media/shadcnblocks/block/block-1.svg"
+                    alt="لوگو"
+                    className="size-12 h-full w-full object-contain object-center"
+                  />
+                </div>
+                <h3 className="text-xl font-bold">ری یو آی</h3>
+              </div>
+              <p className="text-base font-medium text-muted-foreground">
+                ساخت کامپوننت آسان شد.
+              </p>
+            </div>
+            <div className="flex flex-col items-start gap-x-20 gap-y-14 xl:flex-row">
+              <div className="inline-grid w-fit grid-cols-1 gap-x-20 gap-y-14 sm:grid-cols-2">
+                {sitemap.map((section) => (
+                  <div key={section.title} className="h-fit w-min">
+                    <h4 className="mb-6 text-base font-semibold whitespace-nowrap">
+                      {section.title}
+                    </h4>
+                    <ul className="space-y-3 text-base font-medium text-muted-foreground">
+                      {section.links.map((link) => (
+                        <li key={link.title}>
+                          <a
+                            href={link.href}
+                            className="text-base whitespace-nowrap hover:text-accent-foreground"
+                          >
+                            {link.title}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col items-baseline justify-between gap-8 border-t border-border pt-8 md:flex-row md:gap-16">
+            <div className="text-xs text-muted-foreground sm:text-sm">
+              &copy; ری یو آی ۲۲۴
+            </div>
+            <div className="flex flex-col items-start gap-4 text-xs text-muted-foreground sm:text-sm md:flex-row lg:items-center">
+              <a href="#" className="hover:text-accent-foreground">
+                شرایط و ضوابط
+              </a>
+              <a href="#" className="hover:text-accent-foreground">
+                حریم خصوصی
+              </a>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer6 };
diff --git a/blocks/footer7.tsx b/blocks/footer7.tsx
new file mode 100644
index 0000000..87ea227
--- /dev/null
+++ b/blocks/footer7.tsx
@@ -0,0 +1,150 @@
+import React from "react";
+import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter } from "react-icons/fa";
+
+import { cn } from "@/lib/utils";
+
+interface Footer7Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  className?: string;
+  sections?: Array<{
+    title: string;
+    links: Array<{ name: string; href: string }>;
+  }>;
+  description?: string;
+  socialLinks?: Array<{
+    icon: React.ReactElement;
+    href: string;
+    label: string;
+  }>;
+  copyright?: string;
+  legalLinks?: Array<{
+    name: string;
+    href: string;
+  }>;
+}
+
+const defaultSections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "نمای کلی", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "بازار", href: "#" },
+      { name: "ویژگی‌ها", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "تیم", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "فرصت‌های شغلی", href: "#" },
+    ],
+  },
+  {
+    title: "منابع",
+    links: [
+      { name: "راهنما", href: "#" },
+      { name: "فروش", href: "#" },
+      { name: "تبلیغات", href: "#" },
+      { name: "حریم خصوصی", href: "#" },
+    ],
+  },
+];
+
+const defaultSocialLinks = [
+  { icon: <FaInstagram className="size-5" />, href: "#", label: "اینستاگرام" },
+  { icon: <FaFacebook className="size-5" />, href: "#", label: "فیسبوک" },
+  { icon: <FaTwitter className="size-5" />, href: "#", label: "توییتر" },
+  { icon: <FaLinkedin className="size-5" />, href: "#", label: "لینکدین" },
+];
+
+const defaultLegalLinks = [
+  { name: "شرایط و ضوابط", href: "#" },
+  { name: "حریم خصوصی", href: "#" },
+];
+
+const Footer7 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "ShadcnBlocks",
+  },
+  sections = defaultSections,
+  description = "مجموعه‌ای از کامپوننت‌ها برای استارتاپ یا پروژه جانبی شما.",
+  socialLinks = defaultSocialLinks,
+  copyright = "© ۲۲۴ ShadcnBlocks. تمامی حقوق محفوظ است.",
+  legalLinks = defaultLegalLinks,
+  className,
+}: Footer7Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col justify-between gap-10 lg:flex-row lg:items-start lg:text-start">
+          <div className="flex w-full flex-col justify-between gap-6 lg:items-start">
+            {/* Logo */}
+            <div className="flex items-center gap-2 lg:justify-start">
+              <a href={logo.url}>
+                <img
+                  src={logo.src}
+                  alt={logo.alt}
+                  title={logo.title}
+                  className="h-8"
+                />
+              </a>
+              <h2 className="text-xl font-semibold">{logo.title}</h2>
+            </div>
+            <p className="max-w-[70%] text-sm text-muted-foreground">
+              {description}
+            </p>
+            <ul className="flex items-center gap-6 text-muted-foreground">
+              {socialLinks.map((social, idx) => (
+                <li key={idx} className="font-medium hover:text-primary">
+                  <a href={social.href} aria-label={social.label}>
+                    {social.icon}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="grid w-full gap-6 md:grid-cols-3 lg:gap-20">
+            {sections.map((section, sectionIdx) => (
+              <div key={sectionIdx}>
+                <h3 className="mb-4 font-bold">{section.title}</h3>
+                <ul className="space-y-3 text-sm text-muted-foreground">
+                  {section.links.map((link, linkIdx) => (
+                    <li
+                      key={linkIdx}
+                      className="font-medium hover:text-primary"
+                    >
+                      <a href={link.href}>{link.name}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium text-muted-foreground md:flex-row md:items-center md:text-start">
+          <p className="order-2 lg:order-1">{copyright}</p>
+          <ul className="order-1 flex flex-col gap-2 md:order-2 md:flex-row">
+            {legalLinks.map((link, idx) => (
+              <li key={idx} className="hover:text-primary">
+                <a href={link.href}> {link.name}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Footer7 };
diff --git a/blocks/footer8.tsx b/blocks/footer8.tsx
new file mode 100644
index 0000000..e9726bc
--- /dev/null
+++ b/blocks/footer8.tsx
@@ -0,0 +1,146 @@
+import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter } from "react-icons/fa";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "نمای کلی", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "بازار", href: "#" },
+      { name: "ویژگی‌ها", href: "#" },
+      { name: "یکپارچه‌سازی‌ها", href: "#" },
+      { name: "بازاریابی", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "تیم", href: "#" },
+      { name: "وبلاگ", href: "#" },
+      { name: "فرصت‌های شغلی", href: "#" },
+      { name: "تماس", href: "#" },
+    ],
+  },
+];
+
+interface Footer8Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  className?: string;
+}
+const Footer8 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "ShadcnBlocks",
+  },
+  className,
+}: Footer8Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <footer>
+          <div className="grid grid-cols-4 justify-between gap-10 lg:grid-cols-6 lg:text-start">
+            <div className="col-span-4 flex w-full flex-col gap-6 lg:col-span-2">
+              {/* Logo */}
+              <div className="flex items-center gap-2 lg:justify-start">
+                <a href="https://ShadcnBlocks">
+                  <img
+                    src={logo.src}
+                    alt={logo.alt}
+                    title={logo.title}
+                    className="h-8"
+                  />
+                </a>
+                <h2 className="text-xl font-semibold">{logo.title}</h2>
+              </div>
+              <p className="text-muted-foreground">
+                بیش از ۱۰۰ قالب استاندارد وب واکنش‌گرا برای کسب‌وکار نوپا یا پروژه جانبی
+                شما.
+              </p>
+              <ul className="flex items-center gap-6">
+                <li className="font-medium duration-200 hover:scale-110 hover:text-muted-foreground">
+                  <a href="#">
+                    <FaInstagram className="size-6" />
+                  </a>
+                </li>
+                <li className="font-medium duration-200 hover:scale-110 hover:text-muted-foreground">
+                  <a href="#">
+                    <FaFacebook className="size-6" />
+                  </a>
+                </li>
+                <li className="font-medium duration-200 hover:scale-110 hover:text-muted-foreground">
+                  <a href="#">
+                    <FaTwitter className="size-6" />
+                  </a>
+                </li>
+                <li className="font-medium duration-200 hover:scale-110 hover:text-muted-foreground">
+                  <a href="#">
+                    <FaLinkedin className="size-6" />
+                  </a>
+                </li>
+              </ul>
+            </div>
+            {sections.map((section, sectionIdx) => (
+              <div key={sectionIdx} className="col-span-2 md:col-span-1">
+                <h3 className="mb-5 font-medium">{section.title}</h3>
+                <ul className="space-y-4 text-sm text-muted-foreground">
+                  {section.links.map((link, linkIdx) => (
+                    <li
+                      key={linkIdx}
+                      className="font-medium hover:text-primary"
+                    >
+                      <a href={link.href}>{link.name}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+            <div className="col-span-4 md:col-span-2">
+              <h3 className="mb-5 font-medium">خبرنامه</h3>
+              <div className="grid gap-1.5">
+                <div className="flex w-full items-center gap-2">
+                  <Input type="email" placeholder="ایمیل" />
+                  <Button type="submit">عضویت</Button>
+                </div>
+              </div>
+              <p className="mt-1 text-xs font-medium text-muted-foreground">
+                با ارسال،{" "}
+                <a href="#" className="text-primary hover:underline">
+                  حریم خصوصی
+                </a>{" "}
+                ما را می‌پذیرید.
+              </p>
+            </div>
+          </div>
+          <div className="mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground lg:flex-row lg:items-center lg:text-start">
+            <p>
+              <span className="me-1 font-bold text-primary">
+                ری یو آی
+              </span>
+              © تمامی حقوق محفوظ است.
+            </p>
+            <p>
+              ساخته‌شده با ❤️ توسط{" "}
+              <a href="https://x.com/ausrobdev" className="text-primary">
+                @ausrobdev
+              </a>
+            </p>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer8 };
diff --git a/blocks/footer9.tsx b/blocks/footer9.tsx
new file mode 100644
index 0000000..4b2ddc7
--- /dev/null
+++ b/blocks/footer9.tsx
@@ -0,0 +1,162 @@
+import { CircleCheck, LifeBuoy, Linkedin } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    title: "محصول",
+    links: [
+      { name: "ویژگی‌ها", href: "#" },
+      { name: "وظایف", href: "#" },
+      { name: "تقویم", href: "#" },
+      { name: "جلسات آنلاین", href: "#" },
+      { name: "صورتحساب", href: "#" },
+      { name: "امنیت", href: "#" },
+    ],
+  },
+  {
+    title: "منابع",
+    links: [
+      { name: "وبلاگ", href: "#" },
+      { name: "قیمت‌گذاری", href: "#" },
+      { name: "نقشه راه", href: "#" },
+      { name: "گزارش تغییرات", href: "#" },
+      { name: "منابع", href: "#" },
+    ],
+  },
+  {
+    title: "مطالعات موردی",
+    links: [
+      { name: "Shadcn", href: "#" },
+      { name: "React", href: "#" },
+      { name: "Tailwind", href: "#" },
+    ],
+  },
+  {
+    title: "یکپارچه‌سازی‌ها",
+    links: [
+      { name: "Hubspot", href: "#" },
+      { name: "Slack", href: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      { name: "درباره ما", href: "#" },
+      { name: "شرکت", href: "#" },
+      { name: "پشتیبانی", href: "#" },
+      { name: "رزرو دمو", href: "#" },
+    ],
+  },
+];
+
+interface Footer9Props {
+  className?: string;
+}
+
+const Footer9 = ({ className }: Footer9Props) => {
+  return (
+    <section className={cn("bg-muted py-32", className)}>
+      <div className="container">
+        <footer>
+          <div className="mb-14 flex flex-col justify-between gap-11 md:items-start xl:flex-row xl:items-center xl:gap-6">
+            <div>
+              <h1 className="mb-4 text-xl font-semibold">
+                کارهای بیشتری انجام دهید.
+              </h1>
+              <p className="mb-8 text-xl text-muted-foreground">
+                ابزارهایی برای مدیریت کار، تیم و پروژه‌ها در یک جا.
+              </p>
+              <div className="flex items-center gap-3">
+                <Button>شروع رایگان</Button>
+                <Button variant="outline">مقایسه طرح‌ها</Button>
+              </div>
+            </div>
+            <div className="flex flex-col justify-between gap-6 rounded-2xl bg-background p-6 shadow-lg md:flex-row">
+              <div className="flex flex-col items-center justify-center p-10">
+                <div className="flex text-2xll font-semibold">
+                  ۰<div className="h-full text-xl">€</div>
+                </div>
+                <div className="text-sm">رایگان برای همیشه</div>
+              </div>
+              <div className="h-[1px] w-full bg-muted-foreground/30 md:h-auto md:w-[1px]" />
+              <ul className="flex flex-col justify-center space-y-3 text-muted-foreground">
+                <li className="flex items-center gap-2 font-medium hover:text-primary">
+                  <CircleCheck className="h-5 w-5 text-primary" />
+                  <p className="text-gray-400">۱ عضو تیم</p>
+                </li>
+                <li className="flex items-center gap-2 font-medium hover:text-primary">
+                  <CircleCheck className="h-5 w-5 text-primary" />
+                  <p className="text-gray-400">دانلود نامحدود</p>
+                </li>
+                <li className="flex items-center gap-2 font-medium hover:text-primary">
+                  <CircleCheck className="h-5 w-5 text-primary" />
+                  <p className="text-gray-400">۱۰۰ گیگابایت فضا</p>
+                </li>
+                <li className="flex items-center gap-2 font-medium hover:text-primary">
+                  <CircleCheck className="h-5 w-5 text-primary" />
+                  <p className="text-gray-400">پشتیبانی پایه</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-8 border-t pt-20 lg:grid-cols-5">
+            {sections.map((section, sectionIdx) => (
+              <div key={sectionIdx}>
+                <h3 className="mb-4 font-bold">{section.title}</h3>
+                <ul className="space-y-4 text-muted-foreground">
+                  {section.links.map((link, linkIdx) => (
+                    <li
+                      key={linkIdx}
+                      className="font-medium hover:text-primary"
+                    >
+                      <a href={link.href}>{link.name}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="mt-20 flex flex-col items-start justify-between gap-4 border-t pt-8 text-center text-sm font-medium text-muted-foreground lg:flex-row lg:items-center">
+            <ul className="flex justify-center gap-4 lg:justify-start">
+              <li className="hover:text-primary">
+                <a href="#">حریم خصوصی</a>
+              </li>
+              <li className="hover:text-primary">
+                <a href="#">شرایط و ضوابط</a>
+              </li>
+              <li className="hover:text-primary">
+                <a href="#">اطلاعات قانونی</a>
+              </li>
+              <li>
+                <p className="text-gray-400">
+                  © ۲۲۴ ری یو آی. تمامی حقوق محفوظ است.
+                </p>
+              </li>
+            </ul>
+            <ul className="flex items-center justify-center gap-4 lg:justify-start">
+              <li>
+                <p className="text-black">ما را دنبال کنید:</p>
+              </li>
+              <li>
+                <Button className="gap-2 rounded-full" variant="outline">
+                  <Linkedin className="h-4 w-4" />
+                  لینکدین
+                </Button>
+              </li>
+              <li>
+                <Button className="gap-2 rounded-full" variant="outline">
+                  <LifeBuoy className="h-4 w-4" />
+                  معرفی محصول
+                </Button>
+              </li>
+            </ul>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export { Footer9 };
diff --git a/blocks/gallery1.tsx b/blocks/gallery1.tsx
new file mode 100644
index 0000000..513f499
--- /dev/null
+++ b/blocks/gallery1.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { ArrowUpRight, Plus } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const data = [
+  {
+    id: "item-1",
+    title: "طراحی هویت بصری",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg",
+    company: "شرکت نوآور",
+    badges: ["تجاری", "برندینگ"],
+  },
+  {
+    id: "item-2",
+    title: "بازطراحی وب‌سایت",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+    company: "استارتاپ آلفا",
+    badges: ["طراحی رابط کاربری", "توسعه وب"],
+  },
+  {
+    id: "item-3",
+    title: "راه‌اندازی فروشگاه آنلاین",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
+    company: "برند پارس",
+    badges: ["فروشگاهی", "چند پلتفرمی"],
+  },
+];
+
+interface Gallery1Props {
+  className?: string;
+}
+
+const Gallery1 = ({ className }: Gallery1Props) => {
+  const [selection, setSelection] = useState(data[0].id);
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row">
+          {data.map((item) => (
+            <div
+              key={item.id}
+              data-state={selection === item.id ? "open" : "closed"}
+              className='group max-lg:w-full max-lg:flex-1 max-md:h-[200px] md:max-lg:aspect-1336/420 lg:transform-gpu lg:transition-all lg:data-[state="closed"]:w-[20%] lg:data-[state="closed"]:duration-500 lg:data-[state="open"]:w-[60%] lg:data-[state="open"]:duration-400'
+              onMouseEnter={() => {
+                setSelection(item.id);
+              }}
+            >
+              <a
+                href={item.href}
+                className="relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card"
+              >
+                <div className='absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm'>
+                  <div className="absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:start-[calc(50%+40px)] start-[50%]">
+                    <div className="h-full w-full overflow-clip rounded-xl">
+                      <img
+                        src={item.image}
+                        alt={item.title}
+                        className="h-full w-full object-cover object-center"
+                      />
+                    </div>
+                  </div>
+                  <div className="absolute inset-y-[25%] end-[50%] flex aspect-389/420 h-[50%] items-center justify-center max-lg:hidden">
+                    <img
+                      src={item.logo}
+                      alt={item.company}
+                      className="h-8 invert"
+                    />
+                  </div>
+                  <div className="absolute top-[50%] start-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-accent max-lg:hidden">
+                    <Plus className="size-8 text-accent-foreground" />
+                  </div>
+                  <div className="absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block"></div>
+                </div>
+                <div className="relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:start-[50%] md:max-lg:w-[50%]">
+                  <div className='flex h-[80px] items-center gap-2 p-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0'>
+                    {item.badges.map((badge) => (
+                      <Badge key={badge} variant="secondary">
+                        {badge}
+                      </Badge>
+                    ))}
+                  </div>
+                  <div className='flex flex-col gap-2 p-4 text-start transition-all delay-200 delay-250 duration-500 lg:group-data-[state="closed"]:translate-y-4 lg:group-data-[state="closed"]:opacity-0'>
+                    <div className="lg:hidden">
+                      <img
+                        src={item.logo}
+                        alt={item.company}
+                        className="h-5 invert lg:h-6"
+                      />
+                    </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="text-base font-medium lg:text-lg">
+                        {item.title}
+                      </div>
+                      <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-background text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 rtl:group-hover:-translate-x-1 rtl:group-hover:translate-y-1 lg:size-10">
+                        <ArrowUpRight className="size-4 rtl:rotate-180 lg:size-5" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery1 };
diff --git a/blocks/gallery10.tsx b/blocks/gallery10.tsx
new file mode 100644
index 0000000..ad6c65a
--- /dev/null
+++ b/blocks/gallery10.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: string;
+  username: string;
+  quote: string;
+  author: string;
+  image: string;
+  bgColor: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: "item-1",
+    username: "@نوآور_تکنولوژی",
+    quote:
+      "تیم آن‌ها دیدگاه ما را به اپلیکیشنی روان و کاربرپسند تبدیل کرد. توجه به جزئیات و تعهد به کیفیت واقعاً بی‌نظیر است!",
+    author: "سارا",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+    bgColor: "bg-green-300",
+  },
+  {
+    id: "item-2",
+    username: "@بنیان‌گذار_استارتاپ",
+    quote:
+      "از ایده تا استقرار، راهکاری مقاوم تحویل دادند که با رشد کسب‌وکار ما مقیاس گرفت. واقعاً شریک مسیر رشد ما بودند.",
+    author: "امیر",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+    bgColor: "bg-orange-300",
+  },
+  {
+    id: "item-3",
+    username: "@مدیر_سازمانی",
+    quote:
+      "تخصص آن‌ها در راهکارهای ابری به ما کمک کرد عملیات را بهینه کنیم و هزینه‌ها را به‌شکل چشمگیری کاهش دهیم. خدماتشان را به‌شدت توصیه می‌کنم!",
+    author: "نیلوفر",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+    bgColor: "bg-purple-300",
+  },
+  {
+    id: "item-4",
+    username: "@مدیر_محصول",
+    quote:
+      "توانایی تیم در درک نیازهای پیچیده و تحویل به‌موقع فوق‌العاده است. فرآیند توسعه را برای ما بدون استرس کردند.",
+    author: "میکائیل",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    bgColor: "bg-green-300",
+  },
+  {
+    id: "item-5",
+    username: "@مدیر_فنی",
+    quote:
+      "رویکرد نوآورانه آن‌ها در توسعه نرم‌افزار برای سازمان ما تحول‌آفرین بود. از نتیجه کار بسیار راضی هستیم!",
+    author: "لیلا",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    bgColor: "bg-orange-300",
+  },
+];
+
+interface Gallery10Props {
+  className?: string;
+}
+
+const Gallery10 = ({ className }: Gallery10Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(true);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+      setCurrentIndex(carouselApi.selectedScrollSnap());
+    };
+
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  const progressWidth = 240;
+  const progressIndicatorWidth = progressWidth / DATA.length;
+  const progressOffset = currentIndex * progressIndicatorWidth;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-start justify-between gap-6 px-4 lg:flex-row lg:px-10">
+          <div className="flex flex-col justify-between text-start lg:h-[460px] lg:w-[445px] lg:pe-10">
+            <div className="flex flex-col gap-4">
+              <h2 className="text-3xl font-semibold lg:text-xl">
+                ساخت آینده، خط به خط کد
+              </h2>
+              <p className="text-lg text-muted-foreground">
+                از استارتاپ‌ها تا سازمان‌های بزرگ، کسب‌وکارها را با راهکارهای
+                نرم‌افزاری پیشرفته توانمند می‌کنیم. نظر مشتریان راضی ما را
+                بخوانید.
+              </p>
+            </div>
+
+            <div className="hidden justify-start gap-4 lg:flex">
+              <Button
+                size="icon"
+                className="rounded-full"
+                variant="outline"
+                onClick={() => carouselApi?.scrollPrev()}
+                disabled={!canScrollPrev}
+              >
+                <ArrowRight className="size-4" />
+                <span className="sr-only">اسلاید قبلی</span>
+              </Button>
+              <Button
+                size="icon"
+                variant="outline"
+                className="rounded-full"
+                onClick={() => carouselApi?.scrollNext()}
+                disabled={!canScrollNext}
+              >
+                <ArrowLeft className="size-4" />
+                <span className="sr-only">اسلاید بعدی</span>
+              </Button>
+            </div>
+          </div>
+
+          <div className="relative w-full overflow-hidden pb-12 lg:flex-1">
+            <Carousel
+              dir="rtl"
+              setApi={setCarouselApi}
+              opts={{
+                align: "start",
+                direction: "rtl",
+                dragFree: true,
+              }}
+            >
+              <CarouselContent className="-ms-4 me-0">
+                {DATA.map((testimonial) => (
+                  <CarouselItem
+                    key={testimonial.id}
+                    className="min-w-[800px] flex-1 ps-4 pe-0"
+                  >
+                    <div className="flex gap-2">
+                      <div className="h-[460px] w-[400px]">
+                        <img
+                          src={testimonial.image}
+                          alt={testimonial.author}
+                          className="aspect-square h-full w-full rounded-2xl object-cover"
+                        />
+                      </div>
+
+                      <div
+                        className={`relative flex h-[460px] w-[400px] flex-col items-start justify-end rounded-2xl p-8 text-start ${testimonial.bgColor}`}
+                      >
+                        <Badge className="mb-auto bg-background px-4 py-2 text-black">
+                          {testimonial.username}
+                        </Badge>
+                        <span className="-rotate-[4deg] text-2xll leading-none">
+                          «
+                        </span>
+                        <p className="text-xl font-semibold">
+                          {testimonial.quote}
+                        </p>
+                        <p className="mt-4 text-lg font-medium">
+                          {testimonial.author}
+                        </p>
+                      </div>
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+
+            <div className="absolute bottom-4 start-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200 rtl:translate-x-1/2">
+              <div
+                className="absolute top-0 h-0.5 rounded bg-primary transition-[inset-inline-start] duration-300 ease-out"
+                style={{
+                  width: `${progressIndicatorWidth}px`,
+                  insetInlineStart: `${progressOffset}px`,
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery10 };
diff --git a/blocks/gallery11.tsx b/blocks/gallery11.tsx
new file mode 100644
index 0000000..10c0ddd
--- /dev/null
+++ b/blocks/gallery11.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: string;
+  title: string;
+  description: string;
+  href: string;
+  image: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: "item-1",
+    title: "کشف آلپ",
+    description: "مناظری بی‌نظیر",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    id: "item-2",
+    title: "بهشت استوایی",
+    description: "استراحت در سواحل بکر",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: "item-3",
+    title: "شگفتی‌های فرهنگی",
+    description: "غوطه‌وری در تاریخ غنی",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: "item-4",
+    title: "مردم دل‌انگیز",
+    description: "آشنایی با افراد شگفت‌انگیز جهان",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+];
+
+interface Gallery11Props {
+  className?: string;
+}
+
+const Gallery11 = ({ className }: Gallery11Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="my-8 flex items-center justify-between px-4 lg:px-10">
+        <h2 className="text-start text-xl md:text-3xl lg:text-xl">
+          کشف مقاصد سفر
+        </h2>
+        <Button variant="outline" className="rounded-full" asChild>
+          <a href="#">
+            مشاهده همه
+            <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+          </a>
+        </Button>
+      </div>
+
+      <div className="relative w-full overflow-hidden px-4 lg:px-10">
+        <Carousel
+          dir="rtl"
+          setApi={setCarouselApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+            dragFree: true,
+          }}
+        >
+          <CarouselContent className="-ms-4 me-0">
+            {DATA.map((item) => (
+              <CarouselItem
+                key={item.id}
+                className="min-w-[350px] flex-1 cursor-pointer ps-4 pe-0"
+              >
+                <a href={item.href} className="group">
+                  <div className="relative overflow-hidden rounded-2xl">
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className="aspect-3/4 h-full w-full object-cover object-center transition-all duration-500 ease-out group-hover:scale-105"
+                    />
+                    <div className="absolute start-6 bottom-6 max-w-[90%] min-w-[75%] rounded-2xl bg-background px-6 py-4 text-start transition-all duration-500 ease-out group-hover:bg-black group-hover:text-white">
+                      <div className="flex flex-col items-start">
+                        <h5 className="text-sm font-semibold md:text-lg">
+                          {item.title}
+                        </h5>
+                        <div className="flex items-center gap-4">
+                          <h4 className="text-sm font-bold md:text-lg lg:text-xl">
+                            {item.description}
+                          </h4>
+                          <ArrowRight className="size-4 shrink-0 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery11 };
diff --git a/blocks/gallery12.tsx b/blocks/gallery12.tsx
new file mode 100644
index 0000000..da793f1
--- /dev/null
+++ b/blocks/gallery12.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import { ArrowLeft, ArrowRight, Sparkles } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: string;
+  title: string;
+  description: string;
+  href: string;
+  image: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: "feature-1",
+    title: "دستیار هوشمند",
+    description:
+      "با مدل‌های زبانی پیشرفته، پرسش‌های پیچیده را پردازش می‌کند، وظایف را خودکار می‌کند و پاسخ‌های هوشمند با دقت بالا ارائه می‌دهد.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/block-2.svg",
+  },
+  {
+    id: "feature-2",
+    title: "تحلیل داده",
+    description:
+      "داده‌های خام را با الگوریتم‌های یادگیری ماشین و تحلیل پیش‌بینی‌کننده به بینش‌های عملی برای تصمیم‌گیری آگاهانه تبدیل کنید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/block-1.svg",
+  },
+  {
+    id: "feature-3",
+    title: "خودکارسازی فرایند",
+    description:
+      "گردش‌کارها را ساده کنید و وظایف تکراری را با خودکارسازی هوشمند انجام دهید؛ کارایی بیشتر و خطای کمتر.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/block-3.svg",
+  },
+  {
+    id: "feature-4",
+    title: "پایگاه دانش",
+    description:
+      "اطلاعات جامع را با پایگاه دانش مبتنی بر هوش مصنوعی مدیریت کنید که از هر تعامل یاد می‌گیرد و بهبود می‌یابد.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/block-4.svg",
+  },
+  {
+    id: "feature-5",
+    title: "یکپارچه‌سازی اتصال هوشمند",
+    description:
+      "با چارچوب اتصال هوشمند قدرتمند ما، بدون درز با سیستم‌های موجود یکپارچه شوید و تبادل داده و گسترش قابلیت‌ها را ساده کنید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/block-5.svg",
+  },
+  {
+    id: "feature-6",
+    title: "امنیت و انطباق",
+    description:
+      "امنیت داده و رعایت استانداردهای صنعتی را با اقدامات و پروتکل‌های امنیتی جامع ما تضمین کنید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/block-6.svg",
+  },
+  {
+    id: "feature-7",
+    title: "داشبوردهای قابل سفارشی‌سازی",
+    description:
+      "داشبوردها را برای نمایش شاخص‌های کلیدی و عملکرد بسازید و سفارشی کنید؛ بینش بلادرنگ در یک نگاه.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/block-4.svg",
+  },
+  {
+    id: "feature-8",
+    title: "ابزارهای همکاری",
+    description:
+      "همکاری تیم را با ابزارهای یکپارچه ارتباط، مدیریت پروژه و اشتراک‌گذاری فایل تقویت کنید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/block-1.svg",
+  },
+];
+
+interface Gallery12Props {
+  className?: string;
+}
+
+const Gallery12 = ({ className }: Gallery12Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-12 flex flex-col items-center text-center">
+          <h2 className="text-3xl font-medium tracking-tight md:text-xl lg:text-2xll">
+            ویژگی‌های ما
+          </h2>
+          <p className="mt-4 max-w-xl text-lg text-muted-foreground">
+            مجموعه‌ای از قابلیت‌های هوش مصنوعی برای خودکارسازی، تحلیل و رشد
+            کسب‌وکار شما.
+          </p>
+        </div>
+
+        <div className="w-full">
+          <Carousel
+            dir="rtl"
+            setApi={setCarouselApi}
+            opts={{
+              align: "start",
+              direction: "rtl",
+              breakpoints: {
+                "(max-width: 768px)": {
+                  active: true,
+                  dragFree: true,
+                },
+                "(min-width: 768px)": {
+                  active: true,
+                },
+                "(min-width: 1024px)": {
+                  active: true,
+                },
+              },
+            }}
+          >
+            <CarouselContent className="-ms-4 me-0">
+              {DATA.map((item) => (
+                <CarouselItem
+                  key={item.id}
+                  className="ps-4 pe-0 sm:basis-1/2 md:basis-1/3 xl:basis-1/4"
+                >
+                  <div className="group flex h-full flex-col justify-between rounded-xl border bg-muted">
+                    <div className="flex aspect-square items-center justify-center overflow-clip rounded-t-xl">
+                      <img
+                        src={item.image}
+                        alt={item.title}
+                        className="h-48 w-48 object-cover object-center md:h-36 md:w-36"
+                      />
+                    </div>
+
+                    <div className="flex h-full flex-col justify-between px-8">
+                      <div className="my-8 text-start">
+                        <div className="mb-2 line-clamp-3 text-lg font-medium break-words md:text-xl lg:text-xl">
+                          {item.title}
+                        </div>
+                        <div className="line-clamp-2 text-sm text-muted-foreground md:text-base">
+                          {item.description}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+
+        <div className="mt-8 flex flex-row items-center justify-between gap-4 md:flex-row">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => {
+              carouselApi?.scrollPrev();
+            }}
+            disabled={!canScrollPrev}
+            className="rounded-full disabled:pointer-events-auto md:ms-12"
+          >
+            <ArrowRight className="size-4" />
+            <span className="sr-only">اسلاید قبلی</span>
+          </Button>
+
+          <div className="flex flex-col items-center gap-4 md:flex-row">
+            <Button size="lg" className="font-bold shadow-lg">
+              <Sparkles className="size-4" />
+              دانلود اکنون
+            </Button>
+          </div>
+
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => {
+              carouselApi?.scrollNext();
+            }}
+            disabled={!canScrollNext}
+            className="rounded-full disabled:pointer-events-auto md:me-12"
+          >
+            <ArrowLeft className="size-4" />
+            <span className="sr-only">اسلاید بعدی</span>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery12 };
diff --git a/blocks/gallery13.tsx b/blocks/gallery13.tsx
new file mode 100644
index 0000000..584bd79
--- /dev/null
+++ b/blocks/gallery13.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import { ArrowLeft, ArrowRight, Palette, Sparkles, Star } from "lucide-react";
+import { startTransition, useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  src: string;
+  title: string;
+  description: string;
+  icon: LucideIcon;
+}
+
+const DATA: DataItem[] = [
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    title: "طراحی ظریف",
+    description:
+      "طراحی‌هایی زیبا و دقیق که استایل و کارایی را در هم می‌آمیزند کشف کنید.",
+    icon: Palette,
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    title: "کیفیت برتر",
+    description:
+      "بهترین مواد و کیفیت ساخت را در هر قطعه تجربه کنید.",
+    icon: Star,
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    title: "زیبایی‌شناسی معاصر",
+    description:
+      "با مجموعه‌های معاصر و ترند از دیگران پیشی بگیرید.",
+    icon: Sparkles,
+  },
+];
+
+interface Gallery13Props {
+  className?: string;
+}
+
+const Gallery13 = ({ className }: Gallery13Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    const updateSelection = () => {
+      startTransition(() => {
+        setActiveIndex(api.selectedScrollSnap());
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+      });
+    };
+
+    updateSelection();
+    api.on("select", updateSelection);
+
+    return () => {
+      api.off("select", updateSelection);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    api.reInit();
+  }, [api]);
+
+  const ActiveIcon = DATA[activeIndex].icon;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Carousel
+          dir="rtl"
+          setApi={setApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+          className="w-full"
+        >
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-5">
+            <div className="md:col-span-2">
+              <div className="flex h-full flex-col gap-8 rounded-lg bg-muted px-8 py-16 text-start">
+                <div className="flex size-12 items-center justify-center rounded-lg bg-background shadow-lg ring-1 ring-gray-200">
+                  <ActiveIcon className="size-6" />
+                </div>
+                <div className="flex flex-col gap-4">
+                  <h2 className="text-3xl font-medium">
+                    {DATA[activeIndex].title}
+                  </h2>
+                  <p className="mb-4 text-base text-muted-foreground">
+                    {DATA[activeIndex].description}
+                  </p>
+                  <div className="flex items-center gap-4">
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="outline"
+                      className="relative size-12 translate-none touch-manipulation transition-all duration-200 hover:bg-black hover:text-white"
+                      disabled={!canScrollPrev}
+                      onClick={() => api?.scrollPrev()}
+                    >
+                      <ArrowRight className="size-4" />
+                      <span className="sr-only">اسلاید قبلی</span>
+                    </Button>
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="outline"
+                      className="relative size-12 translate-none touch-manipulation transition-all duration-200 hover:bg-black hover:text-white"
+                      disabled={!canScrollNext}
+                      onClick={() => api?.scrollNext()}
+                    >
+                      <ArrowLeft className="size-4" />
+                      <span className="sr-only">اسلاید بعدی</span>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="h-full md:col-span-3">
+              <CarouselContent className="-ms-4 me-0">
+                {DATA.map((image, index) => (
+                  <CarouselItem
+                    key={index}
+                    className="h-full basis-full ps-4 pe-0"
+                  >
+                    <div className="aspect-2/1 h-full w-full">
+                      <img
+                        src={image.src}
+                        alt={image.title}
+                        className="h-full w-full rounded-lg object-cover"
+                      />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </div>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery13 };
diff --git a/blocks/gallery14.tsx b/blocks/gallery14.tsx
new file mode 100644
index 0000000..d0035be
--- /dev/null
+++ b/blocks/gallery14.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { startTransition, useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const carouselItems = [
+  {
+    image:
+      "/block-media/external/unsplash/photo-1589100787575-fad1dcaa9d17.jpg",
+    title: "واکنش‌گرا",
+    description:
+      "قالب‌های ما با رویکرد mobile-first ساخته شده‌اند تا وب‌سایت شما در همه دستگاه‌ها و اندازه‌های صفحه زیبا به نظر برسد.",
+  },
+  {
+    image:
+      "/block-media/external/unsplash/photo-1698516923130-8845104b6224.jpg",
+    title: "کد تمیز",
+    description:
+      "هر قالب با کد تمیز و ساختارمند و مطابق بهترین شیوه‌ها طراحی شده تا سفارشی‌سازی و نگهداری ساده باشد.",
+  },
+  {
+    image:
+      "/block-media/external/unsplash/photo-1647517649508-855580038bfd.jpg",
+    title: "کپی و پیست",
+    description:
+      "قالب‌ها برای کپی و پیست آسان طراحی شده‌اند تا بتوانید سریعاً کامپوننت‌ها و قابلیت‌ها را در پروژه‌های خود پیاده کنید.",
+  },
+  {
+    image:
+      "/block-media/external/unsplash/photo-1586869871566-d8e41dd50318.jpg",
+    title: "به‌روزرسانی آسان",
+    description:
+      "به‌روزرسانی و نگهداری منظم تضمین می‌کند قالب شما همیشه با استانداردها و امنیت وب به‌روز بماند.",
+  },
+ 
+];
+
+interface Gallery14Props {
+  className?: string;
+}
+
+const Gallery14 = ({ className }: Gallery14Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(1);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    const updateSelection = () => {
+      startTransition(() => {
+        setCurrent(api.selectedScrollSnap() + 1);
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+      });
+    };
+
+    updateSelection();
+    api.on("select", updateSelection);
+
+    return () => {
+      api.off("select", updateSelection);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    api.reInit();
+  }, [api]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container">
+        <Carousel
+          dir="rtl"
+          setApi={setApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+        >
+          <div className="grid gap-8 md:gap-4 lg:grid-cols-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_0_-100vw_-100vw)]">
+            <div className="text-start">
+              <h2 className="text-xl font-semibold md:text-2xll">
+                کمتر کد بزن. <br />
+                <span className="text-primary/40">سریع‌تر بساز.</span>
+              </h2>
+              <p className="mt-8 text-xl text-primary">
+                با قالب‌های ما شروع کنید و مطابق نیاز خود سفارشی کنید.
+              </p>
+              <div className="mt-8 hidden items-center gap-4 md:flex">
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="outline"
+                  className="static size-12 translate-none touch-manipulation"
+                  disabled={!canScrollPrev}
+                  onClick={() => api?.scrollPrev()}
+                >
+                  <ArrowRight className="size-4" />
+                  <span className="sr-only">اسلاید قبلی</span>
+                </Button>
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="outline"
+                  className="static size-12 translate-none touch-manipulation"
+                  disabled={!canScrollNext}
+                  onClick={() => api?.scrollNext()}
+                >
+                  <ArrowLeft className="size-4" />
+                  <span className="sr-only">اسلاید بعدی</span>
+                </Button>
+              </div>
+            </div>
+
+            <CarouselContent className="me-0 ms-0 max-w-[400px] select-none">
+              {carouselItems.map((item, idx) => (
+                <CarouselItem className="w-fit ps-4 pe-0" key={idx}>
+                  <div className="relative aspect-4/5 max-h-[500px] rounded-2xl">
+                    <div className="absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background" />
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className="size-full rounded-2xl bg-cover"
+                    />
+                    <div className="absolute inset-0 p-8 text-start">
+                      <p className="text-sm font-semibold text-background/50 dark:text-foreground/50">
+                        <span className="me-1 text-background dark:text-foreground">
+                          {item.title}.
+                        </span>
+                        {item.description}
+                      </p>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </div>
+        </Carousel>
+        <div className="mt-8 flex items-center lg:ms-[50%]">
+          {Array.from({ length: carouselItems.length }).map((_, index) => (
+            <button
+              type="button"
+              key={index}
+              className={cn(
+                "flex h-8 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-muted-foreground/15 text-xs font-semibold whitespace-nowrap transition-all duration-300",
+                index + 1 === current ? "w-32" : "m-4 size-4",
+              )}
+              onClick={() => api?.scrollTo(index)}
+              aria-label={`رفتن به ${carouselItems[index].title}`}
+            >
+              <span
+                className={cn(
+                  "inline-block transition-all duration-300",
+                  index + 1 === current
+                    ? "translate-x-0 opacity-100"
+                    : "translate-x-6 opacity-0 rtl:-translate-x-6",
+                )}
+              >
+                {carouselItems[index].title}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery14 };
diff --git a/blocks/gallery15.tsx b/blocks/gallery15.tsx
new file mode 100644
index 0000000..2b980fe
--- /dev/null
+++ b/blocks/gallery15.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface DatItem {
+  id: string;
+  title: string;
+  price: string;
+  image: string;
+  hoverImage: string;
+  tag: string;
+}
+
+const DATA: DatItem[] = [
+  {
+    id: "1",
+    title: "توسعه وب سفارشی",
+    price: "۱٬۵۰۰ دلار",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    hoverImage:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
+    tag: "راهکار سفارشی",
+  },
+  {
+    id: "2",
+    title: "توسعه اپلیکیشن موبایل",
+    price: "۲٬۰۰۰ دلار",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    hoverImage:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
+    tag: "موبایل اپل و موبایل اندروید",
+  },
+  {
+    id: "3",
+    title: "راهکارهای ابری",
+    price: "۳٬۰۰۰ دلار",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+    hoverImage:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-majMgWtrF48-unsplash.jpg",
+    tag: "زیرساخت مقیاس‌پذیر",
+  },
+  {
+    id: "4",
+    title: "طراحی رابط کاربری/تجربه کاربری",
+    price: "۱٬۲۰۰ دلار",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+    hoverImage:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-xYFl3Q9am1E-unsplash.jpg",
+    tag: "طراحی کاربرمحور",
+  },
+  {
+    id: "5",
+    title: "پلتفرم‌های فروشگاهی",
+    price: "۲٬۵۰۰ دلار",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    hoverImage:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
+    tag: "خرید روان",
+  },
+  {
+    id: "6",
+    title: "هوش مصنوعی و یادگیری ماشین",
+    price: "۵٬۰۰۰ دلار",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+    hoverImage:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
+    tag: "خودکارسازی هوشمند",
+  },
+  {
+    id: "7",
+    title: "خدمات DevOps",
+    price: "۲٬۸۰۰ دلار",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    hoverImage:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
+    tag: "گردش‌کار کارآمد",
+  },
+  {
+    id: "8",
+    title: "راهکارهای امنیت سایبری",
+    price: "۴٬۰۰۰ دلار",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+    hoverImage:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-majMgWtrF48-unsplash.jpg",
+    tag: "سیستم‌های امن",
+  },
+];
+
+interface Gallery15Props {
+  className?: string;
+}
+
+const Gallery15 = ({ className }: Gallery15Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(true);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+      setCurrentIndex(carouselApi.selectedScrollSnap());
+    };
+
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  const progressWidth = 240;
+  const progressIndicatorWidth = progressWidth / DATA.length;
+  const progressOffset = currentIndex * progressIndicatorWidth;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="px-4 lg:px-10">
+        <div className="mb-6 flex flex-col justify-between md:flex-row md:items-end">
+          <div className="text-start">
+            <h2 className="text-3xl font-semibold md:text-xl">خدمات ما</h2>
+          </div>
+          <div className="mt-8 flex shrink-0 items-center justify-start gap-2">
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollPrev()}
+              disabled={!canScrollPrev}
+              className="rounded-full"
+            >
+              <ArrowRight className="size-5" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollNext()}
+              disabled={!canScrollNext}
+              className="rounded-full"
+            >
+              <ArrowLeft className="size-5" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative w-full overflow-hidden">
+        <Carousel
+          dir="rtl"
+          setApi={setCarouselApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+        >
+          <CarouselContent className="-ms-4 me-0 px-4 pb-10 lg:px-10">
+            {DATA.map((product) => (
+              <CarouselItem
+                key={product.id}
+                className="min-w-[334px] flex-1 ps-4 pe-0"
+              >
+                <a
+                  href="#"
+                  className="group relative flex h-full flex-col items-start justify-start gap-2 text-start"
+                >
+                  <div className="w-full">
+                    <div className="group relative z-10 overflow-hidden rounded-2xl">
+                      <img
+                        src={product.image}
+                        alt={product.title}
+                        className="aspect-3/4 h-full w-full object-cover transition-opacity duration-500 group-hover:opacity-0"
+                      />
+                      <img
+                        src={product.hoverImage}
+                        alt={product.title}
+                        className="absolute start-0 top-0 z-10 aspect-3/4 h-full w-full rounded-2xl object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                      />
+
+                      <Badge
+                        className="absolute start-4 top-4 bg-background px-4 py-2"
+                        variant="outline"
+                      >
+                        {product.tag}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3>{product.title}</h3>
+                    <span>
+                      شروع از <span>{product.price}</span>
+                    </span>
+                  </div>
+                </a>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+
+        <div className="absolute bottom-0 start-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200 rtl:translate-x-1/2">
+          <div
+            className="absolute top-0 h-0.5 rounded bg-black transition-[inset-inline-start] duration-300 ease-out"
+            style={{
+              width: `${progressIndicatorWidth}px`,
+              insetInlineStart: `${progressOffset}px`,
+            }}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery15 };
diff --git a/blocks/gallery16.tsx b/blocks/gallery16.tsx
new file mode 100644
index 0000000..06645f7
--- /dev/null
+++ b/blocks/gallery16.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    title: (
+      <>
+        <span className="bg-gradient-to-b from-foreground/20 to-muted-foreground bg-clip-text text-transparent">
+          کشف
+        </span>
+        <br />
+        ویژگی‌های اصلی ما
+      </>
+    ),
+    description: (
+      <>
+        به عمق قابلیت‌های قدرتمندی بروید که برای ساده‌سازی گردش کار شما طراحی
+        شده‌اند. از طراحی شهودی، یکپارچه‌سازی روان و گزینه‌های سفارشی‌سازی
+        قدرتمند بهره ببرید.
+        <br />
+        <br />
+        ببینید پلتفرم ما چگونه با نیازهای در حال تغییر شما سازگار می‌شود و
+        ارزش و کارایی بلندمدت را تضمین می‌کند.
+      </>
+    ),
+    note: "مستندات جامع و کانال‌های پشتیبانی اختصاصی برای همراهی با شما در دسترس است.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    category: "ویژگی‌ها",
+  },
+  {
+    title: (
+      <>
+        <span className="bg-gradient-to-b from-foreground/20 to-muted-foreground bg-clip-text text-transparent">
+          راهکار برای
+        </span>
+        <br />
+        هر سناریو
+      </>
+    ),
+    description: (
+      <>
+        <p>
+          ببینید پلتفرم ما چگونه چالش‌های متنوع در حوزه‌های مختلف را پاسخ
+          می‌دهد:
+        </p>
+        <ul className="my-4 ms-6 list-disc">
+          <li>افزایش کارایی همکاری تیمی.</li>
+          <li>بهینه‌سازی تخصیص منابع حیاتی.</li>
+          <li>ساده‌سازی تحلیل داده‌های پیچیده.</li>
+        </ul>
+        <p>ابزارهای سازگار برای بستر منحصربه‌فرد شما ارائه می‌دهیم.</p>
+      </>
+    ),
+    note: "از تخصص ما در یکپارچه‌سازی و توسعه سفارشی برای نیازهای خاص بهره ببرید.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    category: "راهکارها",
+  },
+  {
+    title: (
+      <>
+        <span className="bg-gradient-to-b from-foreground/20 to-muted-foreground bg-clip-text text-transparent">
+          ساخت
+        </span>
+        <br />
+        آینده با هم
+      </>
+    ),
+    description: (
+      <>
+        <p>
+          نگاهی به تعهد مداوم ما به نوآوری و بهبود بیندازید:
+        </p>
+        <ul className="my-4 ms-6 list-disc">
+          <li>طراحی رابط کاربری نسل بعد.</li>
+          <li>عرضه قابلیت‌های تحلیل پیشرفته.</li>
+          <li>گسترش شبکه یکپارچه‌سازی با سرویس‌های شخص ثالث.</li>
+        </ul>
+        <p>
+          ما بر اساس بازخورد کاربران و روندهای صنعت دائماً در حال تکامل
+          هستیم.
+        </p>
+      </>
+    ),
+    note: "تیم تحقیق و توسعه اختصاصی ما بر ارائه راهکارهای پیشرفته متمرکز است.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+    category: "نقشه راه",
+  },
+];
+
+interface Gallery16Props {
+  className?: string;
+}
+
+const Gallery16 = ({ className }: Gallery16Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(items[0].category);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [indicatorStyle, setIndicatorStyle] = useState({
+    width: 0,
+    insetInlineStart: 0,
+  });
+
+  useEffect(() => {
+    const currentIndex = items.findIndex((item) => item.category === current);
+    const activeTab = tabRefs.current[currentIndex];
+
+    if (activeTab) {
+      const { offsetWidth, offsetLeft } = activeTab;
+      setIndicatorStyle({
+        width: offsetWidth,
+        insetInlineStart: offsetLeft,
+      });
+    }
+  }, [current]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    const currentIndex = items.findIndex((item) => item.category === current);
+    api.scrollTo(currentIndex);
+
+    const onSelect = () => {
+      const idx = api.selectedScrollSnap();
+      setCurrent(items[idx].category);
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+    api.on("select", onSelect);
+
+    return () => {
+      api.off("select", onSelect);
+    };
+  }, [api, current]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    api.reInit();
+  }, [api]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container">
+        <Carousel
+          dir="rtl"
+          setApi={setApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+          className="[&>div[data-slot=carousel-content]]:overflow-visible"
+        >
+          <div className="flex items-center justify-between">
+            <Tabs
+              value={current}
+              onValueChange={setCurrent}
+              className="mb-8 flex justify-center"
+              dir="rtl"
+            >
+              <TabsList className="relative h-auto gap-6 bg-background">
+                {items.map((item, idx) => (
+                  <TabsTrigger
+                    key={idx}
+                    ref={(el) => {
+                      tabRefs.current[idx] = el;
+                    }}
+                    value={item.category}
+                    className="border-none !bg-background text-base transition-all duration-700 ease-out [&[data-state=active]]:shadow-none"
+                  >
+                    {item.category}
+                  </TabsTrigger>
+                ))}
+                <div
+                  className="absolute bottom-0 h-0.5 bg-primary transition-all duration-700 ease-out"
+                  style={{
+                    width: `${indicatorStyle.width}px`,
+                    insetInlineStart: `${indicatorStyle.insetInlineStart}px`,
+                  }}
+                />
+              </TabsList>
+            </Tabs>
+            <div className="hidden items-center gap-4 sm:flex">
+              <Button
+                type="button"
+                size="icon"
+                variant="outline"
+                className="static size-10 translate-none touch-manipulation"
+                disabled={!canScrollPrev}
+                onClick={() => api?.scrollPrev()}
+              >
+                <ArrowRight className="size-4" />
+                <span className="sr-only">اسلاید قبلی</span>
+              </Button>
+              <Button
+                type="button"
+                size="icon"
+                variant="outline"
+                className="static size-10 translate-none touch-manipulation"
+                disabled={!canScrollNext}
+                onClick={() => api?.scrollNext()}
+              >
+                <ArrowLeft className="size-4" />
+                <span className="sr-only">اسلاید بعدی</span>
+              </Button>
+            </div>
+          </div>
+          <CarouselContent className="me-0 ms-0 max-w-4xl">
+            {items.map((item, idx) => (
+              <CarouselItem
+                key={idx}
+                className="w-fit max-w-4xl ps-4 pe-0"
+              >
+                <div className="grid h-full max-w-4xl gap-10 rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20">
+                  <div className="flex flex-col justify-between gap-4 text-start">
+                    <div>
+                      <h2 className="text-xl font-medium sm:text-xl">
+                        {item.title}
+                      </h2>
+                      <div className="mt-4 text-sm text-muted-foreground sm:mt-6">
+                        {item.description}
+                      </div>
+                    </div>
+                    <p className="mt-4 text-xs text-muted-foreground sm:mt-6">
+                      {item.note}
+                    </p>
+                  </div>
+                  <div className="rounded-xl border border-border p-2">
+                    <img
+                      src={item.image}
+                      alt={item.category}
+                      className="h-full w-full rounded-xl object-cover"
+                    />
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery16 };
diff --git a/blocks/gallery17.tsx b/blocks/gallery17.tsx
new file mode 100644
index 0000000..3e7a00d
--- /dev/null
+++ b/blocks/gallery17.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { startTransition, useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    alt: "تصویر گالری ۱",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    alt: "تصویر گالری ۲",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    alt: "تصویر گالری ۳",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
+    alt: "تصویر گالری ۴",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-5.svg",
+    alt: "تصویر گالری ۵",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    alt: "تصویر گالری ۶",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    alt: "تصویر گالری ۷",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    alt: "تصویر گالری ۸",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
+    alt: "تصویر گالری ۹",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-5.svg",
+    alt: "تصویر گالری ۱۰",
+  },
+];
+
+interface Gallery17Props {
+  className?: string;
+}
+
+const Gallery17 = ({ className }: Gallery17Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    const updateSelection = () => {
+      startTransition(() => {
+        setCount(api.scrollSnapList().length);
+        setCurrent(api.selectedScrollSnap() + 1);
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+      });
+    };
+
+    updateSelection();
+    api.on("select", updateSelection);
+
+    return () => {
+      api.off("select", updateSelection);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    api.reInit();
+  }, [api]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container md:px-45">
+        <Carousel
+          dir="rtl"
+          className="mx-auto w-full max-w-[50rem] [&>div:nth-child(1)]:md:overflow-visible"
+          setApi={setApi}
+          opts={{
+            startIndex: 1,
+            direction: "rtl",
+          }}
+        >
+          <CarouselContent className="-ms-4 me-0">
+            {IMAGES.map((img, index) => (
+              <CarouselItem
+                key={`carousel-img-${index}`}
+                className="basis-full ps-4 pe-0"
+              >
+                <div
+                  className={cn(
+                    "aspect-[1.333333333] max-w-[50rem] overflow-hidden rounded-[0.75rem] transition-all duration-300",
+                    current === index + 1
+                      ? "scale-100 opacity-100"
+                      : "scale-70 opacity-40",
+                  )}
+                >
+                  <img
+                    className="block size-full object-cover object-center"
+                    src={img.src}
+                    alt={img.alt}
+                  />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="mt-4 hidden md:block">
+            <Button
+              type="button"
+              size="icon"
+              variant="default"
+              className="absolute top-1/2 size-10 -translate-y-1/2 max-[767px]:static max-[767px]:translate-y-0 md:end-[-6.25rem] md:size-14 lg:end-[-9.9375rem] lg:size-14 [&>svg]:size-6!"
+              disabled={!canScrollPrev}
+              onClick={() => api?.scrollPrev()}
+            >
+              <ArrowRight className="size-6" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              type="button"
+              size="icon"
+              variant="default"
+              className="absolute top-1/2 size-10 -translate-y-1/2 max-[767px]:static max-[767px]:translate-y-0 md:start-[-6.25rem] md:size-14 lg:start-[-9.9375rem] lg:size-14 [&>svg]:size-6!"
+              disabled={!canScrollNext}
+              onClick={() => api?.scrollNext()}
+            >
+              <ArrowLeft className="size-6" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </Carousel>
+        <div className="mx-auto mt-10 flex w-full max-w-[33.9375rem] items-center justify-center">
+          {Array.from({ length: count }).map((_, index) => (
+            <button
+              type="button"
+              aria-label={`رفتن به اسلاید ${(index + 1).toLocaleString("fa-IR")}`}
+              key={`carousel-dot-btn-${index}`}
+              className="p-2"
+              onClick={() => {
+                api?.scrollTo(index);
+              }}
+            >
+              <div
+                className={cn(
+                  "size-3 rounded-full",
+                  current === index + 1 ? "bg-black" : "bg-black/10",
+                )}
+              />
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery17 };
diff --git a/blocks/gallery18.tsx b/blocks/gallery18.tsx
new file mode 100644
index 0000000..8df698f
--- /dev/null
+++ b/blocks/gallery18.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import "swiper/css";
+import "swiper/css/effect-cards";
+
+import { useEffect, useRef } from "react";
+import { Autoplay, EffectCards } from "swiper/modules";
+import type { Swiper as SwiperType } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
+    alt: "پرتره سارا احمدی در فضای شهری",
+    name: "سارا احمدی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
+    alt: "پرتره مریم رضایی در نور طبیعی",
+    name: "مریم رضایی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
+    alt: "پرتره نیلوفر کریمی در استودیو",
+    name: "نیلوفر کریمی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
+    alt: "پرتره امیر حسینی در فضای باز",
+    name: "امیر حسینی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
+    alt: "پرتره لیلا محمدی در فضای شهری",
+    name: "لیلا محمدی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
+    alt: "پرتره کامران نظری در نور طبیعی",
+    name: "کامران نظری",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
+    alt: "پرتره فاطمه موسوی در استودیو",
+    name: "فاطمه موسوی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
+    alt: "پرتره پدرام جعفری در فضای باز",
+    name: "پدرام جعفری",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
+    alt: "پرتره سمیه لاری در فضای شهری",
+    name: "سمیه لاری",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
+    alt: "پرتره علی رضایی در نور طبیعی",
+    name: "علی رضایی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
+    alt: "پرتره مایا اکبری در استودیو",
+    name: "مایا اکبری",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
+    alt: "پرتره رضا امجد در فضای باز",
+    name: "رضا امجد",
+  },
+];
+
+const css = `
+.mySwiper18 {
+  width: min(78vw, 260px);
+  height: min(102vw, 340px);
+  margin-inline: auto;
+}
+
+@media (min-width: 640px) {
+  .mySwiper18 {
+    width: 260px;
+    height: 340px;
+  }
+}
+
+.mySwiper18 .swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 25px;
+}
+
+.mySwiper18 .swiper-slide-active {
+  overflow: visible !important;
+}
+`;
+
+interface Gallery18Props {
+  className?: string;
+}
+
+const Gallery18 = ({ className }: Gallery18Props) => {
+  const swiperRef = useRef<SwiperType | null>(null);
+
+  useEffect(() => {
+    swiperRef.current?.update();
+  }, []);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16 sm:py-24 lg:py-32", className)}>
+      <style>{css}</style>
+      <div className="container flex flex-col items-center gap-6 px-4 sm:gap-10">
+        <div className="relative flex w-full justify-center overflow-visible pb-10 sm:pb-12">
+          <Swiper
+            dir="rtl"
+            effect="cards"
+            autoplay={{
+              delay: 1000,
+              disableOnInteraction: false,
+            }}
+            loop={true}
+            grabCursor={true}
+            modules={[EffectCards, Autoplay]}
+            className="mySwiper18"
+            onSwiper={(swiper) => {
+              swiperRef.current = swiper;
+            }}
+          >
+            {IMAGES.map((image, index) => (
+              <SwiperSlide key={`${image.name}-${index}`} className="relative">
+                <img
+                  className="h-full w-full overflow-hidden rounded-3xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+                <div className="absolute inset-x-0 -bottom-10 flex h-10 items-end justify-center text-center font-sans text-[10px] font-light sm:-bottom-12 sm:h-12 sm:text-xs">
+                  <span dir="rtl">
+                    @{image.name.replace(/\s+/g, "_")}
+                  </span>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery18 };
diff --git a/blocks/gallery19.tsx b/blocks/gallery19.tsx
new file mode 100644
index 0000000..9f73916
--- /dev/null
+++ b/blocks/gallery19.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import "swiper/css";
+import "swiper/css/effect-cards";
+import "swiper/css/pagination";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import { useEffect, useRef } from "react";
+import type { Swiper as SwiperType } from "swiper";
+import { Autoplay, EffectCards, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
+    alt: "پرتره سارا احمدی در فضای شهری",
+    name: "سارا احمدی",
+    description:
+      "مدیر محصول با تمرکز بر طراحی داشبورد و تجربه کاربری CRM.",
+    link: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
+    alt: "پرتره مریم رضایی در نور طبیعی",
+    name: "مریم رضایی",
+    description:
+      "تمرکز بر پرتره‌های طبیعی و احساسات خام در محیط‌های باز و آرام.",
+    link: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
+    alt: "پرتره نیلوفر کریمی در استودیو",
+    name: "نیلوفر کریمی",
+    description:
+      "آتلیه خلاق با نورپردازی دقیق برای پرتره‌های حرفه‌ای و مینیمال.",
+    link: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
+    alt: "پرتره امیر حسینی در فضای باز",
+    name: "امیر حسینی",
+    description:
+      "ثبت مقاطع طلایی روز در طبیعت با تاکید بر عمق میدان و رنگ.",
+    link: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
+    alt: "پرتره لیلا محمدی در فضای شهری",
+    name: "علی حسنی ",
+    description:
+      "متخصص بازاریابی دیجیتال با تجربه در اتوماسیون و کمپین‌های ایمیل.",
+    link: "#",
+  }
+];
+
+const css = `
+.mySwiper19 {
+  width: 260px;
+  height: 340px;
+}
+
+.mySwiper19 .swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 25px;
+}
+
+.mySwiper19 .swiper-pagination {
+  bottom: -40px !important;
+}
+
+.mySwiper19 .swiper-pagination-bullet-active {
+  background-color: var(--primary);
+}
+`;
+
+interface Gallery19Props {
+  className?: string;
+}
+
+const Gallery19 = ({ className }: Gallery19Props) => {
+  const swiperRef = useRef<SwiperType | null>(null);
+
+  useEffect(() => {
+    swiperRef.current?.update();
+  }, []);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <style>{css}</style>
+      <div className="container flex flex-col items-center gap-10">
+        <AnimatePresence mode="popLayout">
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="relative w-full"
+          >
+            <Swiper
+              dir="rtl"
+              effect="cards"
+              autoplay={{
+                delay: 1000,
+                disableOnInteraction: false,
+              }}
+              loop={true}
+              grabCursor={true}
+              modules={[EffectCards, Autoplay, Pagination]}
+              pagination={{ clickable: true }}
+              className="mySwiper19"
+              onSwiper={(swiper) => {
+                swiperRef.current = swiper;
+              }}
+            >
+              {IMAGES.map((image, index) => {
+                const [firstName, lastName] = image.name.split(" ");
+
+                return (
+                  <SwiperSlide
+                    key={`${image.name}-${index}`}
+                    className="relative"
+                  >
+                    <img
+                      className="h-full w-full overflow-hidden rounded-3xl object-cover"
+                      src={image.src}
+                      alt={image.alt}
+                    />
+                    <div className="absolute h-full w-full bg-gradient-to-t from-black/80 to-transparent" />
+                    <div className="absolute flex h-full w-full flex-col justify-end p-4 text-start">
+                      <h3 className="text-xl font-bold text-white">
+                        {firstName}
+                        {lastName ? (
+                          <span className="font-playfair italic">
+                            {" "}
+                            {lastName}
+                          </span>
+                        ) : null}
+                      </h3>
+                      <p className="text-xs text-white/50">
+                        {image.description}
+                      </p>
+                      <Button
+                        variant="secondary"
+                        className="mt-4 w-fit rounded-full text-xs"
+                        asChild
+                      >
+                        <a href={image.link}>
+                          بیشتر بدانید
+                          <ArrowRight
+                            size={14}
+                            className="ms-2 -rotate-45 rtl:rotate-[135deg]"
+                          />
+                        </a>
+                      </Button>
+                    </div>
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery19 };
diff --git a/blocks/gallery20.tsx b/blocks/gallery20.tsx
new file mode 100644
index 0000000..57fcc8e
--- /dev/null
+++ b/blocks/gallery20.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface GalleryImage {
+  src: string;
+  alt: string;
+  rotation: number;
+  translateY?: number;
+  translateX?: number;
+  zIndex?: number;
+}
+
+const galleryImages: GalleryImage[] = [
+  {
+    src: "/block-media/shadcnblocks/block/lummi/landscape2.jpeg",
+    alt: "منظره کوهستانی",
+    rotation: 19,
+    translateX: 200,
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/landscape1.jpeg",
+    alt: "منظره طبیعت",
+    rotation: 19,
+    translateY: 2,
+    translateX: 104,
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/landscape3.jpeg",
+    alt: "منظره دریاچه",
+    rotation: 0,
+    translateY: -32,
+    zIndex: 10,
+    translateX: 0,
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/landscape5.jpeg",
+    alt: "منظره جنگل",
+    rotation: -12,
+    translateX: -104,
+    translateY: 2,
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/landscape4.jpeg",
+    alt: "منظره غروب",
+    rotation: -12,
+    translateX: -200,
+  },
+];
+
+interface Gallery20Props {
+  className?: string;
+}
+
+const Gallery20 = ({ className }: Gallery20Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container overflow-x-clip">
+        <motion.div
+          initial={{ opacity: 0, translateY: 100 }}
+          animate={{ opacity: 1, translateY: 0 }}
+          transition={{
+            duration: 0.7,
+            type: "spring",
+            bounce: 0.3,
+          }}
+          className="relative flex h-42 items-center justify-center"
+        >
+          {galleryImages.map((image, index) => (
+            <motion.div
+              initial={{
+                rotate: image.rotation,
+                translateY: image.translateY || 0,
+                translateX: 0,
+                zIndex: image.zIndex || "auto",
+              }}
+              animate={{
+                rotate: image.rotation,
+                translateY: image.translateY || 0,
+                translateX: image.translateX || 0,
+                zIndex: image.zIndex || "auto",
+              }}
+              drag
+              dragSnapToOrigin
+              whileHover={{
+                scale: 1.15,
+                rotate: 0,
+                zIndex: 999,
+                translateY: -20,
+              }}
+              transition={{
+                duration: 0.7,
+                bounce: 0.3,
+                type: "spring",
+                delay: 0.5,
+                translateY: { duration: 0.2 },
+                rotate: { duration: 0.2 },
+                scale: { duration: 0.2 },
+                zIndex: { duration: 0.2 },
+              }}
+              key={image.src}
+              className="absolute size-42 cursor-pointer overflow-hidden rounded-3xl shadow-xl transition-all ease-out"
+            >
+              <img
+                src={image.src}
+                className="pointer-events-none size-full object-cover"
+                alt={image.alt}
+              />
+            </motion.div>
+          ))}
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, translateY: -20 }}
+          animate={{ opacity: 1, translateY: 0 }}
+          transition={{
+            duration: 0.3,
+            delay: 0.5,
+          }}
+          className="mt-10 flex flex-col items-center justify-center"
+        >
+          <h3 className="max-w-md text-center text-xl font-medium tracking-tight">
+            مکان‌های تازه را کشف کنید و خاطراتتان را به اشتراک بگذارید.
+          </h3>
+          <Button className="group mt-10 flex items-center justify-center gap-2 rounded-full border px-4 py-1 tracking-tight">
+            کاوش جهان
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery20 };
diff --git a/blocks/gallery21.tsx b/blocks/gallery21.tsx
new file mode 100644
index 0000000..28a4ad1
--- /dev/null
+++ b/blocks/gallery21.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "swiper/css";
+import "swiper/css/effect-cards";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { Swiper as SwiperType } from "swiper";
+import { Autoplay, EffectCoverflow } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    alt: "اجرای زنده موسیقی در فضای شهری",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+    alt: "نوازنده در استودیو ضبط",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+    alt: "جمعیت در کنسرت روباز",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    alt: "صحنه اجرای موسیقی الکترونیک",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+    alt: "تمرین گروه موسیقی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+    alt: "جشن موسیقی در فضای باز",
+  },
+];
+
+const css = `
+.mySwiper21 {
+  width: 100%;
+  height: 420px;
+  padding-bottom: 50px;
+}
+
+.mySwiper21 .swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 300px;
+}
+
+.mySwiper21 .swiper-slide img {
+  display: block;
+  width: 100%;
+}
+
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: none;
+}
+.swiper-3d .swiper-slide-shadow-right {
+  background: none;
+}
+`;
+
+interface Gallery21Props {
+  className?: string;
+}
+
+const Gallery21 = ({ className }: Gallery21Props) => {
+  const swiperRef = useRef<SwiperType | null>(null);
+  const swiperContainerRef = useRef<HTMLDivElement>(null);
+  const [swiperReady, setSwiperReady] = useState(false);
+
+  useEffect(() => {
+    const swiper = swiperRef.current;
+    if (!swiper || !swiperReady) {
+      return;
+    }
+
+    const updateSwiper = () => {
+      swiper.update();
+      swiper.slideToLoop(swiper.realIndex, 0);
+    };
+
+    updateSwiper();
+
+    const container = swiperContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(updateSwiper);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [swiperReady]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <style>{css}</style>
+      <div className="container">
+        <div className="relative mx-auto flex w-full max-w-4xl flex-col items-center gap-10">
+          <div
+            ref={swiperContainerRef}
+            dir="rtl"
+            className="relative h-[420px] w-full overflow-hidden"
+          >
+            <div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-16 bg-gradient-to-r from-background to-transparent sm:w-24 lg:w-32" />
+            <div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-16 bg-gradient-to-l from-background to-transparent sm:w-24 lg:w-32" />
+
+            <motion.div
+              className="relative mx-auto flex h-full w-full items-center justify-center"
+              initial={{ opacity: 0, translateY: 20 }}
+              animate={{ opacity: 1, translateY: 0 }}
+              transition={{
+                duration: 0.3,
+                delay: 0.5,
+              }}
+            >
+              <Swiper
+                spaceBetween={50}
+                autoplay={{
+                  delay: 1500,
+                  disableOnInteraction: false,
+                }}
+                effect="coverflow"
+                grabCursor={true}
+                centeredSlides={true}
+                centeredSlidesBounds={true}
+                loop={true}
+                slidesPerView={2.447}
+                coverflowEffect={{
+                  rotate: 0,
+                  stretch: 0,
+                  depth: 100,
+                  modifier: 2.5,
+                }}
+                className="mySwiper21"
+                modules={[EffectCoverflow, Autoplay]}
+                onSwiper={(swiper) => {
+                  swiperRef.current = swiper;
+                  setSwiperReady(true);
+                }}
+              >
+                {IMAGES.map((image, index) => (
+                  <SwiperSlide key={`${image.alt}-${index}`}>
+                    <img
+                      className="h-full w-full overflow-hidden rounded-3xl object-cover shadow-lg"
+                      src={image.src}
+                      alt={image.alt}
+                    />
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            </motion.div>
+          </div>
+          <div className="flex flex-col items-center justify-center text-center">
+            <h3 className="max-w-sm px-2 text-xl font-medium tracking-tight">
+              موسیقی را بشنوید: تجربه‌ای بی‌سابقه
+            </h3>
+            <Button
+              variant="secondary"
+              className="group mt-10 flex items-center justify-center gap-2 rounded-full tracking-tight"
+            >
+              کشف موسیقی
+              <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery21 };
diff --git a/blocks/gallery22.tsx b/blocks/gallery22.tsx
new file mode 100644
index 0000000..9529d6d
--- /dev/null
+++ b/blocks/gallery22.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "swiper/css";
+import "swiper/css/effect-cards";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { FaXTwitter } from "react-icons/fa6";
+import type { Swiper as SwiperType } from "swiper";
+import { Autoplay, EffectCoverflow } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { cn } from "@/lib/utils";
+
+const TEAM = [
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
+    alt: "پرتره سارا احمدی در فضای شهری",
+    name: "سارا احمدی",
+    role: "سرپرست طراحی",
+    url: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
+    alt: "پرتره مریم رضایی در نور طبیعی",
+    name: "مریم رضایی",
+    role: "مدیر خلاق",
+    url: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
+    alt: "پرتره نیلوفر کریمی در استودیو",
+    name: "نیلوفر کریمی",
+    role: "مدیر محصول",
+    url: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
+    alt: "پرتره امیر حسینی",
+    name: "امیر حسینی",
+    role: "سرپرست طراحی",
+    url: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
+    alt: "پرتره لیلا محمدی در نور طبیعی",
+    name: "لیلا محمدی",
+    role: "مدیر خلاق",
+    url: "#",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
+    alt: "پرتره کامران نظری در استودیو",
+    name: "کامران نظری",
+    role: "مدیر محصول",
+    url: "#",
+  },
+];
+
+const css = `
+.mySwiper22 {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 350px;
+}
+
+.mySwiper22 .swiper-slide {
+  width: 200px;
+  height: 300px;
+  border-radius: 0;
+  opacity: 0.25;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.mySwiper22 .swiper-slide-active {
+  opacity: 1;
+  z-index: 10;
+}
+
+.mySwiper22 .swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mySwiper22.swiper-3d .swiper-slide-shadow-left,
+.mySwiper22.swiper-3d .swiper-slide-shadow-right {
+  background: none;
+}
+`;
+
+interface Gallery22Props {
+  className?: string;
+}
+
+const Gallery22 = ({ className }: Gallery22Props) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const swiperRef = useRef<SwiperType | null>(null);
+  const swiperContainerRef = useRef<HTMLDivElement>(null);
+  const [swiperReady, setSwiperReady] = useState(false);
+
+  useEffect(() => {
+    const swiper = swiperRef.current;
+    if (!swiper || !swiperReady) {
+      return;
+    }
+
+    const updateSwiper = () => {
+      swiper.update();
+      swiper.slideToLoop(swiper.realIndex, 0);
+    };
+
+    updateSwiper();
+
+    const container = swiperContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(updateSwiper);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [swiperReady]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <style>{css}</style>
+      <div className="container">
+        <div
+          ref={swiperContainerRef}
+          dir="rtl"
+          className="relative mx-auto w-full max-w-3xl"
+        >
+          <div className="pointer-events-none absolute inset-y-0 start-0 z-20 w-16 bg-gradient-to-r from-background to-transparent sm:w-24 lg:w-42" />
+          <div className="pointer-events-none absolute inset-y-0 end-0 z-20 w-16 bg-gradient-to-l from-background to-transparent sm:w-24 lg:w-42" />
+
+          <div className="relative flex w-full justify-center">
+            <Swiper
+              onSwiper={(instance) => {
+                swiperRef.current = instance;
+                setSwiperReady(true);
+              }}
+              autoplay={{
+                delay: 1500,
+                disableOnInteraction: false,
+              }}
+              breakpoints={{
+                0: { spaceBetween: 40 },
+                640: { spaceBetween: 70 },
+                1024: { spaceBetween: 100 },
+              }}
+              effect="coverflow"
+              grabCursor={true}
+              centeredSlides={true}
+              loop={true}
+              slidesPerView="auto"
+              coverflowEffect={{
+                rotate: 0,
+                stretch: 0,
+                depth: 80,
+                modifier: 2.5,
+              }}
+              className="mySwiper22"
+              modules={[EffectCoverflow, Autoplay]}
+              onSlideChange={(instance) => setActiveIndex(instance.realIndex)}
+            >
+              {TEAM.map((member, index) => (
+                <SwiperSlide key={`${member.name}-${index}`} className="relative">
+                  <img
+                    className="mt-4 h-full w-full object-cover shadow-lg"
+                    src={member.src}
+                    alt={member.alt}
+                  />
+                  <a
+                    href={member.url}
+                    className="absolute top-1 -left-2.5 flex size-10 items-center justify-center bg-foreground transition-all duration-300 hover:scale-90 hover:rotate-12"
+                  >
+                    <FaXTwitter className="size-5 text-background" />
+                    <span className="sr-only">{member.name}</span>
+                  </a>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+
+          <div
+            dir="rtl"
+            className="pointer-events-none absolute top-0 left-1/2 z-[1] flex h-[450px] w-[230px] -translate-x-1/2 flex-col justify-end border border-border p-4 text-right"
+          >
+            <div className="pointer-events-auto relative z-20 w-full text-right">
+              <h3 className="mb-2 text-xl leading-7 font-semibold tracking-tighter">
+                {TEAM[activeIndex].name}
+              </h3>
+              <p className="text-sm text-muted-foreground">
+                {TEAM[activeIndex].role}
+              </p>
+            </div>
+            <div className="pointer-events-auto absolute right-0 -bottom-12 z-20 flex gap-2 md:-right-20 md:bottom-0">
+              <button
+                type="button"
+                className="bg-muted p-2 transition-colors hover:bg-muted/80 active:scale-95"
+                aria-label="اسلاید قبلی"
+                onClick={(e) => {
+                  e.preventDefault();
+                  swiperRef.current?.slidePrev();
+                }}
+              >
+                <ChevronRight className="size-4" />
+              </button>
+              <button
+                type="button"
+                className="bg-muted p-2 transition-colors hover:bg-muted/80 active:scale-95"
+                aria-label="اسلاید بعدی"
+                onClick={(e) => {
+                  e.preventDefault();
+                  swiperRef.current?.slideNext();
+                }}
+              >
+                <ChevronLeft className="size-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery22 };
diff --git a/blocks/gallery23.tsx b/blocks/gallery23.tsx
new file mode 100644
index 0000000..2966456
--- /dev/null
+++ b/blocks/gallery23.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowRight, ShoppingCart } from "lucide-react";
+import type { SVGProps } from "react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    id: 1,
+    src: "/block-media/shadcnblocks/block/lummi/random5.jpeg",
+    alt: "لباس‌های مجموعه تابستانه",
+    title: "مجموعه",
+    titleEmphasis: "تابستانه",
+    code: "#۰۰۳۱",
+  },
+  {
+    id: 2,
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    alt: "صحنه جشنواره موسیقی",
+    title: "جشنواره",
+    titleEmphasis: "موسیقی",
+    code: "#۰۰۳۰",
+  },
+  {
+    id: 3,
+    src: "/block-media/shadcnblocks/block/lummi/random13.jpeg",
+    alt: "لباس‌های ویژه فصل زمستان",
+    title: "ویژه",
+    titleEmphasis: "زمستان",
+    code: "#۰۰۳۲",
+  },
+  {
+    id: 4,
+    src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+    alt: "لباس‌های نسخه بهاری",
+    title: "نسخه",
+    titleEmphasis: "بهاری",
+    code: "#۰۰۳۳",
+  },
+  {
+    id: 5,
+    src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+    alt: "لباس‌های کلکسیون بهار",
+    title: "کلکسیون",
+    titleEmphasis: "بهار",
+    code: "#۰۰۳۴",
+  },
+];
+
+interface Gallery23Props {
+  className?: string;
+}
+
+const Gallery23 = ({ className }: Gallery23Props) => {
+  const [activeImage, setActiveImage] = useState(0);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container overflow-hidden p-10">
+        <div className="relative flex flex-col items-center justify-between gap-12 border bg-muted p-10 py-20 md:flex-row">
+          <DashedBorderV className="absolute -top-10 -start-px h-[150%] w-px" />
+          <DashedBorderH className="absolute -top-px -start-10 h-px w-[150%]" />
+          <DashedBorderV className="absolute -top-10 -end-px h-[150%] w-px" />
+          <DashedBorderH className="absolute -bottom-px -start-12 h-px w-[150%]" />
+          <div className="flex h-142 flex-col justify-center text-start">
+            <h1 className="font-calSans max-w-lg text-2xll">
+              به حرف‌ها اعتماد نکنید؛ به نتایج ما اعتماد کنید
+            </h1>
+            <p className="text-md mt-10 max-w-md opacity-55">
+              با تمرکز بر کیفیت، خلاقیت و جزئیات، محصولاتی می‌سازیم که تجربه
+              واقعی مشتریان را بهبود می‌دهد و ارزش پایدار ایجاد می‌کند.
+            </p>
+            <Button
+              variant="default"
+              className="group mt-10 flex w-fit items-center justify-center gap-2 rounded-full tracking-tight"
+            >
+              تماس با ما
+              <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
+            </Button>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-1">
+            {IMAGES.map((image, index) => (
+              <motion.div
+                key={image.id}
+                className="group relative cursor-pointer overflow-hidden rounded-4xl border"
+                initial={{ height: "2.5rem", width: "24rem" }}
+                animate={{
+                  height: activeImage === index ? "24rem" : "2.5rem",
+                }}
+                transition={{ duration: 0.3, ease: "easeInOut" }}
+                onClick={() => setActiveImage(index)}
+                onHoverStart={() => setActiveImage(index)}
+              >
+                <AnimatePresence>
+                  {activeImage === index && (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="absolute h-full w-full bg-gradient-to-t from-black/80 to-transparent"
+                    />
+                  )}
+                </AnimatePresence>
+                <AnimatePresence>
+                  {activeImage === index && (
+                    <motion.div
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 20 }}
+                      className="absolute flex h-full w-full flex-col items-start justify-end px-4 pb-5 text-start"
+                    >
+                      <p className="text-xs text-white/50">{image.code}</p>
+                      <h3 className="text-3xl font-bold text-white">
+                        {image.title}
+                        <span className="font-playfair italic">
+                          {" "}
+                          {image.titleEmphasis}
+                        </span>
+                      </h3>
+                      <Button
+                        variant="secondary"
+                        className="mt-3 flex w-fit items-center justify-center gap-2 rounded-full text-xs"
+                      >
+                        افزودن به سبد
+                        <ShoppingCart size={14} />
+                      </Button>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+                <img
+                  src={image.src}
+                  className="size-full object-cover"
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const DashedBorderH = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <line
+        opacity="0.2"
+        x1="1571.5"
+        y1="0.570312"
+        x2="0.683594"
+        y2="0.570271"
+        stroke="black"
+        strokeDasharray="5 5"
+      />
+    </svg>
+  );
+};
+
+const DashedBorderV = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <line
+        opacity="0.2"
+        x1="0.631348"
+        y1="0.208984"
+        x2="0.631311"
+        y2="828.348"
+        stroke="black"
+        strokeDasharray="5 5"
+      />
+    </svg>
+  );
+};
+
+export { Gallery23 };
diff --git a/blocks/gallery24.tsx b/blocks/gallery24.tsx
new file mode 100644
index 0000000..e2bfefc
--- /dev/null
+++ b/blocks/gallery24.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowRight, ShoppingCart } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    id: 1,
+    src: "/block-media/shadcnblocks/block/lummi/random5.jpeg",
+    alt: "لباس‌های مجموعه تابستانه",
+    title: "مجموعه",
+    titleEmphasis: "تابستانه",
+    code: "#۰۰۳۱",
+  },
+  {
+    id: 2,
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    alt: "صحنه جشنواره موسیقی",
+    title: "جشنواره",
+    titleEmphasis: "موسیقی",
+    code: "#۰۰۳۰",
+  },
+  {
+    id: 3,
+    src: "/block-media/shadcnblocks/block/lummi/random13.jpeg",
+    alt: "لباس‌های ویژه فصل زمستان",
+    title: "ویژه",
+    titleEmphasis: "زمستان",
+    code: "#۰۰۳۲",
+  },
+  {
+    id: 4,
+    src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+    alt: "لباس‌های نسخه بهاری",
+    title: "نسخه",
+    titleEmphasis: "بهاری",
+    code: "#۰۰۳۳",
+  },
+  {
+    id: 5,
+    src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+    alt: "لباس‌های کلکسیون بهار",
+    title: "کلکسیون",
+    titleEmphasis: "بهار",
+    code: "#۰۰۳۴",
+  },
+  {
+    id: 6,
+    src: "/block-media/shadcnblocks/block/lummi/random8.jpeg",
+    alt: "لباس‌های خط تابستان",
+    title: "خط",
+    titleEmphasis: "تابستان",
+    code: "#۰۰۳۵",
+  },
+  {
+    id: 7,
+    src: "/block-media/shadcnblocks/block/lummi/random9.jpeg",
+    alt: "لباس‌های بوم نقاشی",
+    title: "بوم",
+    titleEmphasis: "نقاشی",
+    code: "#۰۰۳۶",
+  },
+  {
+    id: 8,
+    src: "/block-media/shadcnblocks/block/lummi/random10.jpeg",
+    alt: "لباس‌های شبکه طراحی",
+    title: "شبکه",
+    titleEmphasis: "طراحی",
+    code: "#۰۰۳۷",
+  },
+];
+
+interface Gallery24Props {
+  className?: string;
+}
+
+const Gallery24 = ({ className }: Gallery24Props) => {
+  const [activeImage, setActiveImage] = useState(0);
+  const isMobile = useIsMobile();
+  const visibleImages = IMAGES.slice(0, isMobile ? 4 : IMAGES.length);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="relative container overflow-x-clip">
+        <div className="flex flex-col items-center justify-center">
+          <h1 className="font-playfair max-w-xl text-center text-2xll tracking-tighter italic md:text-2xll">
+            به حرف‌ها اعتماد نکنید
+          </h1>
+          <p className="text-md my-10 max-w-lg text-center opacity-50">
+            ما نتیجه تحویل می‌دهیم. با تمرکز بر کیفیت و خلاقیت، محصولاتی
+            می‌سازیم که تجربه واقعی مشتریان را بهبود می‌دهد.
+          </p>
+
+          <div className="flex w-full items-center justify-center gap-1">
+            {visibleImages.map((image, index) => (
+              <motion.div
+                key={image.id}
+                className="relative cursor-pointer overflow-hidden rounded-3xl border"
+                initial={{ width: "2.5rem", height: "20rem" }}
+                animate={{
+                  width: activeImage === index ? "24rem" : "5rem",
+                  height: activeImage === index ? "24rem" : "24rem",
+                }}
+                transition={{ duration: 0.3, ease: "easeInOut" }}
+                onClick={() => setActiveImage(index)}
+                onHoverStart={() => setActiveImage(index)}
+              >
+                <AnimatePresence>
+                  {activeImage === index && (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="absolute h-full w-full bg-gradient-to-t from-black/80 to-transparent"
+                    />
+                  )}
+                </AnimatePresence>
+                <AnimatePresence>
+                  {activeImage === index && (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="absolute flex h-full w-full flex-col items-start justify-end px-4 pb-10 text-start"
+                    >
+                      <p className="text-xs text-white/50">{image.code}</p>
+                      <h3 className="w-42 text-3xl font-bold text-white lg:w-fit lg:whitespace-nowrap">
+                        {image.title}
+                        <span className="font-playfair italic">
+                          {" "}
+                          {image.titleEmphasis}
+                        </span>
+                      </h3>
+                      <button
+                        type="button"
+                        className="mt-2 flex w-32 items-center justify-center gap-2 rounded-full bg-background px-4 py-2 text-xs whitespace-nowrap"
+                      >
+                        افزودن به سبد
+                        <ShoppingCart size={14} />
+                      </button>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+                <img
+                  src={image.src}
+                  className="size-full object-cover"
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+          </div>
+          <Button className="group mt-10 flex w-fit items-center justify-center gap-2 rounded-full tracking-tight">
+            تماس با ما
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery24 };
diff --git a/blocks/gallery25.tsx b/blocks/gallery25.tsx
new file mode 100644
index 0000000..e4ccd19
--- /dev/null
+++ b/blocks/gallery25.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Gallery25Props {
+  className?: string;
+}
+
+const Gallery25 = ({ className }: Gallery25Props) => {
+  const column1Images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+      alt: "Gallery Image 1",
+      height: "23rem",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+      alt: "Gallery Image 2",
+      height: "28rem",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+      alt: "Gallery Image 3",
+      height: "12rem",
+    },
+  ];
+
+  const column2Images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+      alt: "Gallery Image 4",
+      height: "13rem",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+      alt: "Gallery Image 5",
+      height: "32rem",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+      alt: "Gallery Image 6",
+      height: "18rem",
+    },
+  ];
+
+  const column3Images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+      alt: "Gallery Image 7",
+      height: "32rem",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+      alt: "Gallery Image 8",
+      height: "32rem",
+    },
+  ];
+
+  const column4Images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+      alt: "Gallery Image 9",
+      height: "13rem",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+      alt: "Gallery Image 10",
+      height: "22.5rem",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
+      alt: "Gallery Image 11",
+      height: "22rem",
+    },
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="relative container">
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          {/* Column 1 */}
+          <div className="grid gap-4">
+            {column1Images.map((image, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  y: 50,
+                }}
+                whileInView={{
+                  opacity: 1,
+                  scale: 1,
+                  y: 0,
+                }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.1,
+                }}
+                key={index}
+                className="w-full overflow-hidden rounded-2xl bg-muted"
+                style={{ height: image.height }}
+              >
+                <img
+                  className="h-full w-full rounded-2xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Column 2 */}
+          <div className="grid gap-4">
+            {column2Images.map((image, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  y: -50,
+                }}
+                whileInView={{
+                  opacity: 1,
+                  scale: 1,
+                  y: 0,
+                }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.1,
+                }}
+                key={index}
+                className="w-full overflow-hidden rounded-2xl bg-muted"
+                style={{ height: image.height }}
+              >
+                <img
+                  className="h-full w-full rounded-2xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Column 3 */}
+          <div className="grid gap-4">
+            {column3Images.map((image, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  y: 50,
+                }}
+                whileInView={{
+                  opacity: 1,
+                  scale: 1,
+                  y: 0,
+                }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.1,
+                }}
+                key={index}
+                className="w-full overflow-hidden rounded-2xl bg-muted"
+                style={{ height: image.height }}
+              >
+                <img
+                  className="h-full w-full rounded-2xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Column 4 */}
+          <div className="grid gap-4">
+            {column4Images.map((image, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  y: -50,
+                }}
+                whileInView={{
+                  opacity: 1,
+                  scale: 1,
+                  y: 0,
+                }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.1,
+                }}
+                key={index}
+                className="w-full overflow-hidden rounded-2xl bg-muted"
+                style={{ height: image.height }}
+              >
+                <img
+                  className="h-full w-full rounded-2xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+            <div className="h-17 w-full rounded-2xl bg-muted"></div>
+          </div>
+        </div>
+        <div className="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4">
+          {/* Column 1 */}
+          <div className="grid gap-4">
+            {column1Images.map((image, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  y: 50,
+                }}
+                whileInView={{
+                  opacity: 1,
+                  scale: 1,
+                  y: 0,
+                }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.1,
+                }}
+                key={index}
+                className="w-full overflow-hidden rounded-2xl bg-muted"
+                style={{ height: image.height }}
+              >
+                <img
+                  className="h-full w-full rounded-2xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Column 2 */}
+          <div className="grid gap-4">
+            {column2Images.map((image, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  y: -50,
+                }}
+                whileInView={{
+                  opacity: 1,
+                  scale: 1,
+                  y: 0,
+                }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.1,
+                }}
+                key={index}
+                className="w-full overflow-hidden rounded-2xl bg-muted"
+                style={{ height: image.height }}
+              >
+                <img
+                  className="h-full w-full rounded-2xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Column 3 */}
+          <div className="grid gap-4">
+            {column3Images.map((image, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  y: 50,
+                }}
+                whileInView={{
+                  opacity: 1,
+                  scale: 1,
+                  y: 0,
+                }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.1,
+                }}
+                key={index}
+                className="w-full overflow-hidden rounded-2xl bg-muted"
+                style={{ height: image.height }}
+              >
+                <img
+                  className="h-full w-full rounded-2xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Column 4 */}
+          <div className="grid gap-4">
+            {column4Images.map((image, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  y: -50,
+                }}
+                whileInView={{
+                  opacity: 1,
+                  scale: 1,
+                  y: 0,
+                }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.1,
+                }}
+                key={index}
+                className="w-full overflow-hidden rounded-2xl bg-muted"
+                style={{ height: image.height }}
+              >
+                <img
+                  className="h-full w-full rounded-2xl object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </motion.div>
+            ))}
+            <div className="h-17 w-full rounded-2xl bg-muted"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery25 };
diff --git a/blocks/gallery26.tsx b/blocks/gallery26.tsx
new file mode 100644
index 0000000..4a4a2b7
--- /dev/null
+++ b/blocks/gallery26.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Gallery26Props {
+  className?: string;
+}
+
+const Gallery26 = ({ className }: Gallery26Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="relative container">
+        <div className="grid grid-cols-5 gap-4">
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-2 h-82 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw13.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-3 h-82 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw8.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-5 h-100 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw12.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-2 h-82 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw9.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-3 h-82 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw13.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-3 h-82 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw8.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-2 h-82 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw13.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-5 h-100 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw12.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-2 h-82 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover"
+              src="/block-media/shadcnblocks/block/lummi/bw9.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+          <BlurVignette
+            radius="24px"
+            inset="10px"
+            transitionLength="100px"
+            blur="15px"
+            className="col-span-3 h-82 rounded-[2.5rem]"
+          >
+            <img
+              width={200}
+              height={200}
+              className="size-full rounded-[2.5rem] object-cover transition-all ease-in-out"
+              src="/block-media/shadcnblocks/block/lummi/bw13.jpeg"
+              alt=""
+            />
+          </BlurVignette>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery26 };
+
+interface BlurVignetteProps {
+  children: React.ReactNode;
+  className?: string;
+  radius?: string;
+  inset?: string;
+  transitionLength?: string;
+  blur?: string;
+}
+
+const BlurVignette = ({
+  children,
+  className = "",
+  radius = "24px",
+  inset = "16px",
+  transitionLength = "32px",
+  blur = "21px",
+}: BlurVignetteProps) => {
+  return (
+    <motion.div
+      initial={{
+        opacity: 0,
+        scale: 0.9,
+        y: -50,
+      }}
+      whileInView={{
+        opacity: 1,
+        scale: 1,
+        y: 0,
+      }}
+      viewport={{ once: true, amount: 0.2 }}
+      className={`group relative cursor-pointer overflow-hidden ${className}`}
+    >
+      <style>
+        {`
+          .blur-vignette {
+            --radius: ${radius};
+            --inset: ${inset};
+            --transition-length: ${transitionLength};
+            --blur: ${blur};
+            position: absolute;
+            inset: 0;
+            -webkit-backdrop-filter: blur(var(--blur));
+            backdrop-filter: blur(var(--blur));
+            --r: max(var(--transition-length), calc(var(--radius) - var(--inset)));
+            --corner-size: calc(var(--r) + var(--inset)) calc(var(--r) + var(--inset));
+            --corner-gradient: transparent 0px,
+              transparent calc(var(--r) - var(--transition-length)), 
+              black var(--r);
+            --fill-gradient: black, 
+              black var(--inset),
+              transparent calc(var(--inset) + var(--transition-length)),
+              transparent calc(100% - var(--transition-length) - var(--inset)),
+              black calc(100% - var(--inset));
+            --fill-narrow-size: calc(100% - (var(--inset) + var(--r)) * 2);
+            --fill-farther-position: calc(var(--inset) + var(--r));
+            -webkit-mask-image: linear-gradient(to right, var(--fill-gradient)),
+              linear-gradient(to bottom, var(--fill-gradient)),
+              radial-gradient(at bottom right, var(--corner-gradient)),
+              radial-gradient(at bottom left, var(--corner-gradient)),
+              radial-gradient(at top left, var(--corner-gradient)),
+              radial-gradient(at top right, var(--corner-gradient));
+            -webkit-mask-size: 100% var(--fill-narrow-size), 
+              var(--fill-narrow-size) 100%,
+              var(--corner-size), 
+              var(--corner-size), 
+              var(--corner-size),
+              var(--corner-size);
+            -webkit-mask-position: 0 var(--fill-farther-position), 
+              var(--fill-farther-position) 0,
+              0 0, 
+              100% 0, 
+              100% 100%, 
+              0 100%;
+            -webkit-mask-repeat: no-repeat;
+            opacity: 0;
+            transition: opacity 0.3s ease;    
+        }
+
+        .blur-vignette.active {
+        opacity: 1;
+        }
+
+        .group:hover .blur-vignette {
+        opacity: 0;
+        }
+        `}
+      </style>
+      <div className="blur-vignette active }" />
+      {children}
+    </motion.div>
+  );
+};
diff --git a/blocks/gallery27.tsx b/blocks/gallery27.tsx
new file mode 100644
index 0000000..62f9dd7
--- /dev/null
+++ b/blocks/gallery27.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const TEAM_MEMBERS = [
+  {
+    id: "member-1",
+    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
+    alt: "پرتره مریم رضایی",
+    name: "مریم رضایی",
+    role: "مدیر خلاق",
+  },
+  {
+    id: "member-2",
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
+    alt: "پرتره امیر حسینی",
+    name: "امیر حسینی",
+    role: "توسعه‌دهنده ارشد",
+  },
+  {
+    id: "member-3",
+    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
+    alt: "پرتره سارا احمدی",
+    name: "سارا احمدی",
+    role: "مدیر پروژه",
+  },
+  {
+    id: "member-4",
+    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
+    alt: "پرتره کامران نظری",
+    name: "کامران نظری",
+    role: "طراح تجربه کاربری",
+  },
+  {
+    id: "member-5",
+    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
+    alt: "پرتره لیلا محمدی",
+    name: "لیلا محمدی",
+    role: "متخصص بازاریابی",
+  },
+];
+
+interface Gallery27Props {
+  className?: string;
+}
+
+const Gallery27 = ({ className }: Gallery27Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex items-end justify-between gap-4">
+          <div>
+            <h1 className="font-calSans text-start text-2xll">
+              تیم پشت موفقیت ما
+            </h1>
+            <p className="mt-3 max-w-xl text-start text-muted-foreground">
+              گروهی از متخصصان خلاق و باانگیزه که با همکاری و تعهد، پروژه‌های
+              باکیفیت را از ایده تا اجرا پیش می‌برند.
+            </p>
+          </div>
+          <div className="flex shrink-0 gap-2">
+            <Button
+              size="icon"
+              variant="default"
+              className="rounded-none"
+              disabled={!canScrollPrev}
+              onClick={() => carouselApi?.scrollPrev()}
+            >
+              <ArrowRight className="size-4" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              size="icon"
+              variant="default"
+              className="rounded-none"
+              disabled={!canScrollNext}
+              onClick={() => carouselApi?.scrollNext()}
+            >
+              <ArrowLeft className="size-4" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </div>
+        <Carousel
+          dir="rtl"
+          setApi={setCarouselApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+            loop: true,
+          }}
+          className="relative w-full pt-15"
+        >
+          <CarouselContent className="-ms-4 me-0">
+            {TEAM_MEMBERS.map((member) => (
+              <CarouselItem
+                key={member.id}
+                className="ps-4 pe-0 md:basis-1/2 lg:basis-1/4"
+              >
+                <div className="group text-start">
+                  <img
+                    src={member.src}
+                    alt={member.alt}
+                    className="h-92 w-full object-cover transition-all duration-300 group-hover:translate-y-[-10px]"
+                  />
+                  <h3 className="mt-4 text-xl font-semibold">{member.name}</h3>
+                  <p className="text-muted-foreground">{member.role}</p>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery27 };
diff --git a/blocks/gallery28.tsx b/blocks/gallery28.tsx
new file mode 100644
index 0000000..2f8c9b2
--- /dev/null
+++ b/blocks/gallery28.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const IMAGES = [
+  {
+    id: "interior-1",
+    src: "/block-media/shadcnblocks/block/photos/alex-tyson-2Fv_otxbGtg-unsplash.jpg",
+    alt: "فضای داخلی مدرن با نور طبیعی",
+  },
+  {
+    id: "interior-2",
+    src: "/block-media/shadcnblocks/block/photos/jason-leung-6uoj7DL6BFk-unsplash.jpg",
+    alt: "طراحی داخلی مینیمال و آرام",
+  },
+  {
+    id: "interior-3",
+    src: "/block-media/shadcnblocks/block/photos/jonathan-borba-UisC7KLAWjs-unsplash.jpg",
+    alt: "اتاق نشیمن با دکوراسیون گرم",
+  },
+  {
+    id: "interior-4",
+    src: "/block-media/shadcnblocks/block/photos/jean-philippe-delberghe-fnIIuaEHvII-unsplash.jpg",
+    alt: "فضای داخلی با معماری مدرن",
+  },
+  {
+    id: "interior-5",
+    src: "/block-media/shadcnblocks/block/photos/jonathan-borba-YdomJdFdbDo-unsplash.jpg",
+    alt: "آشپزخانه با طراحی معاصر",
+  },
+  {
+    id: "interior-6",
+    src: "/block-media/shadcnblocks/block/photos/jose-angel-rios-ux9cu6FLsFE-unsplash.jpg",
+    alt: "فضای نشیمن با نورپردازی نرم",
+  },
+  {
+    id: "interior-7",
+    src: "/block-media/shadcnblocks/block/photos/zhao-yangyang-4uMRVFnJcP4-unsplash.jpg",
+    alt: "طراحی داخلی لوکس و مرتب",
+  },
+];
+
+interface Gallery28Props {
+  className?: string;
+}
+
+const Gallery28 = ({ className }: Gallery28Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="mb-4 text-center text-xl font-semibold">
+          فضاهای داخلی زیبا
+        </h2>
+        <p className="text-center text-sm text-muted-foreground">
+          مجموعه‌ای گزیده از طراحی‌های داخلی چشم‌نواز را کاوش کنید.
+          <br />
+          هر فضا با طراحی آگاهانه و توجه به جزئیات، تجربه کاربری بهینه‌ای دارد.
+        </p>
+        <div className="relative mt-10">
+          <Carousel
+            dir="rtl"
+            setApi={setCarouselApi}
+            opts={{
+              align: "start",
+              direction: "rtl",
+              loop: true,
+            }}
+            className="mx-auto w-full max-w-6xl"
+          >
+            <CarouselContent
+              className="-ms-4 me-0"
+              style={{
+                backfaceVisibility: "hidden",
+              }}
+            >
+              {IMAGES.map((image) => (
+                <CarouselItem
+                  key={image.id}
+                  className="basis-1/2 ps-4 pe-0"
+                >
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="aspect-[3.8/5] w-full rounded-xl object-cover"
+                  />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <Button
+            size="icon"
+            variant="ghost"
+            disabled={!canScrollPrev}
+            className="absolute start-5 top-1/2 z-10 scale-120 -translate-y-1/2 border-none bg-black/30 text-white hover:bg-black/50 hover:text-white dark:bg-black/30 dark:hover:bg-black/50"
+            onClick={() => carouselApi?.scrollPrev()}
+          >
+            <ArrowRight className="size-4" />
+            <span className="sr-only">اسلاید قبلی</span>
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            disabled={!canScrollNext}
+            className="absolute end-5 top-1/2 z-10 scale-120 -translate-y-1/2 border-none bg-black/30 text-white hover:bg-black/50 hover:text-white dark:bg-black/30 dark:hover:bg-black/50"
+            onClick={() => carouselApi?.scrollNext()}
+          >
+            <ArrowLeft className="size-4" />
+            <span className="sr-only">اسلاید بعدی</span>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery28 };
diff --git a/blocks/gallery29.tsx b/blocks/gallery29.tsx
new file mode 100644
index 0000000..7dda489
--- /dev/null
+++ b/blocks/gallery29.tsx
@@ -0,0 +1,96 @@
+import { Marquee } from "@/components/magicui/marquee";
+import { cn } from "@/lib/utils";
+
+const images = [
+  "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/ivan-bandura-3QqzCTIfUJI-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+];
+
+interface Gallery29Props {
+  className?: string;
+}
+
+const Gallery29 = ({ className }: Gallery29Props) => {
+  return (
+    <section
+      className={cn(
+        "dark relative overflow-hidden bg-background py-32",
+        className,
+      )}
+    >
+      <div>
+        <div className="container mb-12 flex flex-col gap-4 text-center">
+          <h2 className="font-instrumentSerif text-2xll font-medium text-primary/80">
+            گالری
+          </h2>
+          <p className="text-lg text-muted-foreground/80">
+            مجموعه‌ای از تصاویر سفرهای ما.
+          </p>
+        </div>
+        <div className="relative">
+          <Marquee repeat={2} className="p-0 opacity-40 [--duration:60s]">
+            {images.map((image, idx) => (
+              <img
+                key={idx}
+                src={image}
+                alt="تصویر گالری"
+                className="aspect-[2/3] max-w-96 rounded-lg object-cover"
+              />
+            ))}
+          </Marquee>
+          <a
+            href="#"
+            className="group absolute inset-0 z-10 container mx-auto flex w-fit scale-105 items-center justify-center overflow-hidden rounded-lg transition-transform duration-500 hover:scale-104"
+          >
+            <div className="relative overflow-hidden rounded-lg">
+              <img
+                src="/block-media/external/unsplash/photo-1637217644936-6b505db635f3.jpg"
+                alt="تصویر برجسته گالری"
+                className="aspect-[2/3] w-full max-w-96 object-cover"
+              />
+
+              <div className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 backdrop-blur-[1px] transition-opacity duration-500 group-hover:opacity-100">
+                <p className="font-instrumentSerif -translate-y-6 border-b border-white/50 bg-gradient-to-b from-white to-white/80 bg-clip-text text-xl font-medium text-transparent transition-transform duration-500 group-hover:translate-y-0">
+                  دنیای ما را کاوش کنید
+                </p>
+              </div>
+            </div>
+          </a>
+        </div>
+        <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background" />
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background" />
+        <div
+          className="pointer-events-none absolute -top-1/2 right-0 bottom-0 hidden w-1/2 min-w-[500px] skew-[-45deg] opacity-5 dark:block"
+          style={{
+            background:
+              "linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 83.9344%, rgba(255, 255, 255, 0) 100%)",
+            mask: "linear-gradient(90deg, rgba(0, 0, 0, 0) 11.3985%, rgb(0, 0, 0) 25.5578%, rgba(0, 0, 0, 0.55) 41.6966%, rgba(0, 0, 0, 0.13) 67.1171%, rgb(0, 0, 0) 78.2306%, rgba(0, 0, 0, 0) 97.2973%)",
+          }}
+        />
+        <div
+          className="pointer-events-none absolute -top-1/2 right-0 bottom-0 hidden w-1/2 min-w-[500px] skew-[-45deg] opacity-5 dark:block"
+          style={{
+            background:
+              "linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 67%, rgba(255, 255, 255, 0) 100%)",
+            mask: "linear-gradient(90deg, rgba(0, 0, 0, 0) 9.81489%, rgb(0, 0, 0) 20.0362%, rgba(0, 0, 0, 0.55) 28.5878%, rgba(0, 0, 0, 0.424) 40.0901%, rgb(0, 0, 0) 48.6486%, rgba(0, 0, 0, 0.267) 54.5045%, rgba(0, 0, 0, 0.13) 78.579%, rgb(0, 0, 0) 88.554%, rgba(0, 0, 0, 0) 97.2973%)",
+          }}
+        />
+        <div
+          className="pointer-events-none absolute -top-1/2 right-0 bottom-0 hidden w-1/2 min-w-[500px] skew-[-45deg] opacity-5 dark:block"
+          style={{
+            background:
+              "linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 83.9344%, rgba(255, 255, 255, 0) 100%)",
+            mask: "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 17.6591%, rgba(0, 0, 0, 0.55) 26.6417%, rgb(0, 0, 0) 35.2302%, rgba(0, 0, 0, 0) 47.6985%, rgba(0, 0, 0, 0.13) 69.1776%, rgb(0, 0, 0) 79.1456%, rgba(0, 0, 0, 0) 97.2973%)",
+          }}
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Gallery29 };
diff --git a/blocks/gallery3.tsx b/blocks/gallery3.tsx
new file mode 100644
index 0000000..c83c3ce
--- /dev/null
+++ b/blocks/gallery3.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const data = [
+  {
+    id: "feature-1",
+    title: "دستیار هوشمند",
+    description:
+      "با مدل‌های زبانی پیشرفته، پرسش‌های پیچیده را پردازش می‌کند، وظایف را خودکار می‌کند و پاسخ‌های هوشمند با دقت بالا ارائه می‌دهد.",
+    label: "هوش مصنوعی",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "feature-2",
+    title: "تحلیل داده",
+    description:
+      "داده‌های خام را با الگوریتم‌های یادگیری ماشین و تحلیل پیش‌بینی‌کننده به بینش‌های عملی برای تصمیم‌گیری آگاهانه تبدیل کنید.",
+    label: "تحلیل",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "feature-3",
+    title: "خودکارسازی فرایند",
+    description:
+      "گردش‌کارها را ساده کنید و وظایف تکراری را با خودکارسازی هوشمند انجام دهید؛ کارایی بیشتر و خطای کمتر.",
+    label: "خودکارسازی",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "feature-4",
+    title: "پایگاه دانش",
+    description:
+      "اطلاعات جامع را با پایگاه دانش مبتنی بر هوش مصنوعی مدیریت کنید که از هر تعامل یاد می‌گیرد و بهبود می‌یابد.",
+    label: "یادگیری",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "feature-5",
+    title: "یکپارچه‌سازی اتصال هوشمند",
+    description:
+      "با چارچوب اتصال هوشمند قدرتمند ما، بدون درز با سیستم‌های موجود یکپارچه شوید و تبادل داده و گسترش قابلیت‌ها را ساده کنید.",
+    label: "یکپارچه‌سازی",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+];
+
+interface Gallery3Props {
+  className?: string;
+}
+
+const Gallery3 = ({ className }: Gallery3Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 flex items-end justify-between md:mb-14 lg:mb-16">
+          <h2 className="text-start text-3xl font-medium tracking-tight md:text-xl lg:text-2xll">
+            مطالعات موردی
+          </h2>
+          <div className="flex shrink-0 gap-2">
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => {
+                carouselApi?.scrollPrev();
+              }}
+              disabled={!canScrollPrev}
+              className="disabled:pointer-events-auto"
+            >
+              <ArrowRight className="size-5" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => {
+                carouselApi?.scrollNext();
+              }}
+              disabled={!canScrollNext}
+              className="disabled:pointer-events-auto"
+            >
+              <ArrowLeft className="size-5" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </div>
+        <Carousel
+          dir="rtl"
+          setApi={setCarouselApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+            breakpoints: {
+              "(max-width: 768px)": {
+                dragFree: true,
+              },
+            },
+          }}
+        >
+          <CarouselContent className="-ms-4 me-0">
+            {data.map((item) => (
+              <CarouselItem
+                key={item.id}
+                className="max-w-[320px] basis-auto ps-4 pe-0 lg:max-w-[360px]"
+              >
+                <a
+                  href={item.href}
+                  className="group flex flex-col justify-between rounded-xl bg-muted p-6 text-start"
+                >
+                  <div>
+                    <div className="flex aspect-3/2 overflow-clip rounded-xl">
+                      <div className="flex-1">
+                        <div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
+                          <img
+                            src={item.image}
+                            alt={item.title}
+                            className="h-full w-full object-cover object-center"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-6">
+                    <Badge>{item.label}</Badge>
+                  </div>
+                  <div className="mb-2 line-clamp-3 pt-4 text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-xl">
+                    {item.title}
+                  </div>
+                  <div className="mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
+                    {item.description}
+                  </div>
+                  <div className="flex items-center text-sm">
+                    بیشتر بخوانید{" "}
+                    <ArrowRight className="ms-2 size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                  </div>
+                </a>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery3 };
diff --git a/blocks/gallery30.tsx b/blocks/gallery30.tsx
new file mode 100644
index 0000000..2113d16
--- /dev/null
+++ b/blocks/gallery30.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useEffect, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface GalleryImage {
+  src: string;
+  alt: string;
+  className: string;
+}
+
+interface Gallery30Props {
+  className?: string;
+}
+
+const IMAGES: GalleryImage[] = [
+  {
+    src: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
+    alt: "پرتره خلاقانه در فضای شهری",
+    className:
+      "md:w-50 size-47 rotate-7 md:rotate-0 z-1 absolute md:-left-10 md:bottom-1/4 lg:left-0 md:h-72",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    alt: "عکس هنری با نور طبیعی",
+    className:
+      "md:w-38 size-47 -rotate-7 md:rotate-0 z-1 md:left-1/5 md:h-45 absolute md:-top-10",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+    alt: "ترکیب‌بندی مدرن در استودیو",
+    className:
+      "md:w-50 size-45 z-1 md:right-2/5 absolute md:-top-40 md:h-52",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/guri3/img5.jpeg",
+    alt: "پرتره با پس‌زمینه مینیمال",
+    className:
+      "hidden md:block size-40 z-1 md:-top-42 md:h-42 absolute md:-right-10 md:w-60",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    alt: "عکاسی فشن در فضای باز",
+    className:
+      "md:w-55 hidden md:block z-1 top-1/5 md:h-65 md:absolute -right-10 lg:right-28",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
+    alt: "صحنه خلاقانه با نورپردازی نرم",
+    className:
+      "md:w-50 hidden md:block z-1 md:h-78 md:absolute -bottom-5 -right-40",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+    alt: "پرتره هنری با کنتراست بالا",
+    className:
+      "hidden md:block z-1 right-1/5 md:absolute -bottom-1/4 md:h-48 md:w-60",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+    alt: "عکس تبلیغاتی با استایل مدرن",
+    className:
+      "hidden md:block z-1 right-3/5 -bottom-1/6 md:absolute md:h-48 md:w-60",
+  },
+];
+
+const shuffleImages = (images: GalleryImage[]) =>
+  [...images]
+    .sort(() => Math.random() - 0.5)
+    .map((image) => ({
+      ...image,
+      delay: Math.random() * 0.4,
+    }));
+
+const Gallery30 = ({ className }: Gallery30Props) => {
+  const images = useMemo(() => IMAGES, []);
+  const [shuffledImages, setShuffledImages] = useState(() =>
+    shuffleImages(images),
+  );
+
+  useEffect(() => {
+    setShuffledImages(shuffleImages(images));
+  }, [images]);
+
+  return (
+    <section
+      lang="fa"
+      className={cn(
+        "relative w-full overflow-x-clip py-32 md:min-h-screen",
+        className,
+      )}
+    >
+      <div className="relative container mx-auto min-h-112 w-full md:min-h-144">
+        <div
+          dir="rtl"
+          className="absolute top-1/2 left-1/2 z-20 flex w-full max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5 px-4 text-center"
+        >
+          <h1 className="text-xl font-medium tracking-tighter lg:text-2xll">
+            بلاک‌های اختصاصی ری یو آی
+          </h1>
+          <p className="text-sm text-muted-foreground/70 lg:text-base">
+            مجموعه‌ای از بلاک‌های طراحی‌شده با دقت برای ساخت رابط‌های مدرن،
+            سریع و چشم‌نواز. هر المان برای الهام و سرعت در پروژه‌های شما
+            آماده شده است.
+          </p>
+        </div>
+        <div dir="rtl" className="relative h-full min-h-112 w-full md:min-h-144">
+          {shuffledImages.map((image) => (
+            <motion.div
+              key={image.src}
+              className={cn(image.className)}
+              drag
+              initial={{ opacity: 0, scale: 0.8, y: 50 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                type: "spring",
+                bounce: 0.2,
+                delay: image.delay,
+              }}
+              whileDrag={{ zIndex: 20 }}
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="pointer-events-none h-full w-full cursor-grab object-cover shadow-lg active:cursor-grabbing"
+              />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+      <Illustration />
+    </section>
+  );
+};
+
+const Illustration = () => {
+  return (
+    <div className="pointer-events-none absolute inset-0">
+      <svg
+        className="h-full w-full"
+        viewBox="0 0 1920 1081"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        <rect
+          x="-356.326"
+          y="-222.305"
+          width="1041.41"
+          height="1041.41"
+          rx="520.707"
+          stroke="#D9D9D9"
+        />
+        <rect
+          x="1362.49"
+          y="391.957"
+          width="1041.41"
+          height="1041.41"
+          rx="520.707"
+          stroke="#D9D9D9"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export { Gallery30 };
diff --git a/blocks/gallery31.tsx b/blocks/gallery31.tsx
new file mode 100644
index 0000000..ac7132a
--- /dev/null
+++ b/blocks/gallery31.tsx
@@ -0,0 +1,97 @@
+import { DirectionAwareHover } from "@/components/aceternity/direction-aware-hover";
+import { cn } from "@/lib/utils";
+
+interface FeatureData {
+  id: string;
+  imgClass: string;
+  imgsrc: string;
+  ptitle: string;
+  price: number;
+}
+
+interface Gallery31Props {
+  featureData?: FeatureData[];
+  className?: string;
+}
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+    maximumFractionDigits: 0,
+  }).format(value);
+
+const defaultFeatureData: FeatureData[] = [
+  {
+    id: "product-1",
+    imgClass: "md:h-70 w-full rounded-3xl md:w-full",
+    imgsrc: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    ptitle: "دسته بازی",
+    price: 199,
+  },
+  {
+    id: "product-2",
+    imgClass: "md:h-70 w-full rounded-3xl md:w-full lg:col-span-2",
+    imgsrc: "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+    ptitle: "هدفون بی‌سیم",
+    price: 189,
+  },
+  {
+    id: "product-3",
+    imgClass:
+      "md:h-70 col-span-1 h-full w-full rounded-3xl md:w-full lg:row-span-2 lg:h-full",
+    imgsrc: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    ptitle: "ساعت هوشمند",
+    price: 249,
+  },
+  {
+    id: "product-4",
+    imgClass: "md:h-70 w-full rounded-3xl md:w-full lg:col-span-2",
+    imgsrc: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
+    ptitle: "اسپیکر بلوتوث",
+    price: 179,
+  },
+  {
+    id: "product-5",
+    imgClass: "md:h-70 w-full rounded-3xl md:w-full",
+    imgsrc: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+    ptitle: "کیبورد مکانیکی",
+    price: 219,
+  },
+];
+
+const Gallery31 = ({
+  featureData = defaultFeatureData,
+  className,
+}: Gallery31Props) => {
+  return (
+    <section lang="fa" className={cn("relative h-full overflow-hidden py-32", className)}>
+      <div className="relative container flex h-full w-full flex-col items-center justify-center">
+        <div className="relative z-10 flex flex-col items-center justify-center gap-5">
+          <p className="rounded-full bg-muted px-2 py-1 text-xs">کاتالوگ</p>
+          <h2 className="font-calSans text-center text-2xll font-medium md:text-2xll">
+            بلاک‌های اختصاصی ری یو آی
+          </h2>
+          <p className="text-center text-muted-foreground">
+            مجموعه‌ای منتخب از محصولات با طراحی مدرن و کیفیت ساخت بالا.
+          </p>
+        </div>
+        <div className="relative mt-[34px] grid w-full grid-cols-1 justify-center gap-[10px] md:grid-cols-2 lg:grid-cols-4">
+          {featureData.map((item) => (
+            <DirectionAwareHover
+              key={item.id}
+              className={item.imgClass}
+              imageUrl={item.imgsrc}
+              childrenClassName="text-end"
+            >
+              <p className="text-xl font-bold">{item.ptitle}</p>
+              <p className="text-sm font-normal">{formatPrice(item.price)}</p>
+            </DirectionAwareHover>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery31 };
diff --git a/blocks/gallery32.tsx b/blocks/gallery32.tsx
new file mode 100644
index 0000000..c87ba30
--- /dev/null
+++ b/blocks/gallery32.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React, { useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Gallery32Props {
+  className?: string;
+}
+
+const Gallery32 = ({ className }: Gallery32Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const dragConstraintsRef = useRef<HTMLDivElement>(null);
+
+  const images = [
+    {
+      className: "size-30 z-1 overflow-hidden rounded-2xl",
+      src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+      alt: "",
+    },
+    {
+      className:
+        "size-30 z-1 absolute bottom-0 left-0 z-10 overflow-hidden rounded-2xl",
+      src: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
+      alt: "",
+    },
+    {
+      className:
+        "size-45 z-1 bottom-1/6 left-1/9 absolute z-10 overflow-hidden rounded-2xl",
+      src: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
+      alt: "",
+    },
+    {
+      className:
+        "size-30 z-1 bottom-3/5 left-15 absolute z-10 overflow-hidden rounded-2xl",
+      src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+      alt: "",
+    },
+    {
+      className:
+        "size-34 z-1 left-1/5 absolute top-0 z-10 overflow-hidden rounded-2xl",
+      src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+      alt: "",
+    },
+    {
+      className:
+        "size-30 z-1 absolute right-0 top-0 z-10 overflow-hidden rounded-2xl",
+      src: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
+      alt: "",
+    },
+    {
+      className:
+        "size-34 z-1 top-1/6 absolute right-[15%] z-10 overflow-hidden rounded-2xl",
+      src: "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+      alt: "",
+    },
+    {
+      className:
+        "size-45 z-1 absolute bottom-[10%] right-[5%] z-10 overflow-hidden rounded-2xl",
+      src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+      alt: "",
+    },
+  ];
+
+  return (
+    <section
+      className={cn(
+        "relative w-full overflow-hidden bg-muted py-32",
+        className,
+      )}
+    >
+      <div className="relative container mx-auto min-h-112 w-full md:min-h-144">
+        <div className="pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-5 lg:z-0">
+          <motion.p
+            initial={{ y: "50%", opacity: 0 }}
+            whileInView={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            className="absolute top-0 left-1/2 max-w-sm -translate-x-[calc(50%-28px)] rounded-3xl bg-background p-5 text-right md:top-4"
+            dir="rtl"
+          >
+            مجموعه گزیده‌ای از عکاسی‌های چشم‌نواز را کشف کنید؛ تصاویری که
+            لحظاتی از زیبایی و الهام را از سراسر جهان ثبت کرده‌اند.
+          </motion.p>
+          <motion.p
+            initial={{ y: "50%", opacity: 0 }}
+            whileInView={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            className="absolute bottom-0 left-1/5 max-w-sm translate-x-28 rounded-3xl bg-background p-5 text-right md:bottom-4"
+            dir="rtl"
+          >
+            گالری ما را مرور کنید و میان تصاویری جستجو کنید که لحظات زیبایی
+            و الهام را از نقاط مختلف جهان به تصویر کشیده‌اند.
+          </motion.p>
+        </div>
+        <div
+          ref={dragConstraintsRef}
+          className="relative flex min-h-112 w-full scale-75 items-center justify-center overflow-hidden md:min-h-144 md:scale-100"
+        >
+          {images.map((image, index) => (
+            <motion.div
+              drag
+              dragConstraints={dragConstraintsRef}
+              dragElastic={0.1}
+              key={index}
+              initial={{ y: "50%", opacity: 0, scale: 0.8 }}
+              whileInView={{ y: 0, opacity: 1, scale: 1 }}
+              transition={{
+                duration: 0.2,
+                ease: "easeOut",
+                delay: index * 0.1 + 0.5,
+              }}
+              animate={{
+                filter:
+                  hoveredIndex !== null && hoveredIndex !== index
+                    ? "blur(10px)"
+                    : "blur(0px)",
+                scale: hoveredIndex === index ? 1.05 : 1,
+                transition: {
+                  duration: 0.3,
+                  ease: "easeOut",
+                  delay: 0,
+                },
+              }}
+              onHoverStart={() => setHoveredIndex(index)}
+              onHoverEnd={() => setHoveredIndex(null)}
+              className={image.className}
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="pointer-events-none h-full w-full object-cover"
+              />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+export { Gallery32 };
diff --git a/blocks/gallery33.tsx b/blocks/gallery33.tsx
new file mode 100644
index 0000000..ad9504b
--- /dev/null
+++ b/blocks/gallery33.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { ArrowRightIcon, HeartIcon } from "lucide-react";
+import React, { useState } from "react";
+
+import { Lens } from "@/components/aceternity/lens";
+import { cn } from "@/lib/utils";
+
+interface CardData {
+  title: string;
+  price: number;
+  image: string;
+  link: string;
+}
+
+interface Gallery33Props {
+  cardData?: CardData[];
+  className?: string;
+}
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+    maximumFractionDigits: 0,
+  }).format(value);
+
+const defaultCardData: CardData[] = [
+  {
+    title: "مجموعه تیر",
+    price: 150,
+    image: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    link: "#",
+  },
+  {
+    title: "ضروریات تابستانی",
+    price: 89,
+    image: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
+    link: "#",
+  },
+  {
+    title: "بسته پریمیوم",
+    price: 299,
+    image: "/block-media/shadcnblocks/block/guri3/img3.jpeg",
+    link: "#",
+  },
+  {
+    title: "تازه‌ها",
+    price: 120,
+    image: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
+    link: "#",
+  },
+  {
+    title: "نسخه محدود",
+    price: 199,
+    image: "/block-media/shadcnblocks/block/guri3/img27.jpeg",
+    link: "#",
+  },
+  {
+    title: "ست اختصاصی",
+    price: 249,
+    image: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+    link: "#",
+  },
+];
+
+const Gallery33 = ({
+  cardData = defaultCardData,
+  className,
+}: Gallery33Props) => {
+  const [hoveredCard, setHoveredCard] = useState<number | null>(null);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container w-full">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {cardData.map((card, index) => (
+            <div
+              key={index}
+              className="relative flex flex-col rounded-4xl bg-muted/60 p-2"
+            >
+              <Lens
+                hovering={hoveredCard === index}
+                setHovering={(hovering) =>
+                  setHoveredCard(hovering ? index : null)
+                }
+              >
+                <img
+                  onMouseEnter={() => setHoveredCard(index)}
+                  onMouseLeave={() => setHoveredCard(null)}
+                  src={card.image}
+                  alt={card.title}
+                  className="h-72 w-full rounded-3xl object-cover"
+                />
+              </Lens>
+              <div className="mt-3 flex items-center justify-between gap-3 px-2 pb-3">
+                <div className="text-right">
+                  <p className="text-sm tracking-tighter text-muted-foreground">
+                    {card.title}
+                  </p>
+                  <h3 className="text-xl font-semibold tracking-tight">
+                    {formatPrice(card.price)}
+                  </h3>
+                </div>
+                <a
+                  href={card.link}
+                  aria-label={`مشاهده ${card.title}`}
+                  className="flex size-12 shrink-0 items-center justify-center gap-2 rounded-full bg-muted-foreground/10 text-sm transition-all duration-300 hover:bg-muted-foreground/20"
+                >
+                  <ArrowRightIcon className="size-7 -rotate-45 stroke-1 rtl:rotate-135" />
+                </a>
+              </div>
+              <div className="absolute top-4 inset-e-4 z-20">
+                <button
+                  type="button"
+                  aria-label={`افزودن ${card.title} به علاقه‌مندی‌ها`}
+                  className="flex size-12 items-center justify-center gap-2 rounded-full bg-background/30 text-sm text-background transition-all duration-300 hover:bg-background/50"
+                >
+                  <HeartIcon className="size-6" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery33 };
diff --git a/blocks/gallery34.tsx b/blocks/gallery34.tsx
new file mode 100644
index 0000000..38540bb
--- /dev/null
+++ b/blocks/gallery34.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+  AudioLines,
+  Globe,
+  Heart,
+  TrophyIcon,
+  type LucideIcon,
+} from "lucide-react";
+import React, { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface FeatureChip {
+  icon: LucideIcon;
+  value: string;
+  label: string;
+}
+
+interface FeatureData {
+  id: number;
+  img: string;
+  link: string;
+  title: string;
+  description: string;
+  chips: FeatureChip[];
+}
+
+interface Gallery34Props {
+  featureData?: FeatureData[];
+  className?: string;
+}
+
+const formatCount = (value: string) => {
+  const match = value.match(/^(\d+)(.*)$/);
+  if (!match) return value;
+  return `${new Intl.NumberFormat("fa-IR").format(Number(match[1]))}${match[2]}`;
+};
+
+const defaultFeatureData: FeatureData[] = [
+  {
+    id: 1,
+    img: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    link: "#",
+    title: "مجموعه گرید چیدمان تیر نسخه ۲",
+    description: "#مجموعه-بلاک-تیر",
+    chips: [
+      { icon: TrophyIcon, value: "50+", label: "جایزه" },
+      { icon: Globe, value: "50+", label: "بازار جهانی" },
+      { icon: AudioLines, value: "50+", label: "محتوای صوتی" },
+    ],
+  },
+  {
+    id: 2,
+    img: "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+    link: "#",
+    title: "بسته کامپوننت‌های رابط مدرن",
+    description: "#کامپوننت-مدرن",
+    chips: [
+      { icon: TrophyIcon, value: "75+", label: "جایزه" },
+      { icon: Globe, value: "60+", label: "بازار جهانی" },
+      { icon: AudioLines, value: "45+", label: "محتوای صوتی" },
+    ],
+  },
+  {
+    id: 3,
+    img: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
+    link: "#",
+    title: "سیستم طراحی واکنش‌گرا",
+    description: "#طراحی-واکنش‌گرا",
+    chips: [
+      { icon: TrophyIcon, value: "90+", label: "جایزه" },
+      { icon: Globe, value: "80+", label: "بازار جهانی" },
+      { icon: AudioLines, value: "65+", label: "محتوای صوتی" },
+    ],
+  },
+  {
+    id: 4,
+    img: "/block-media/shadcnblocks/block/guri3/img25.jpeg",
+    link: "#",
+    title: "کیت انیمیشن تعاملی",
+    description: "#انیمیشن",
+    chips: [
+      { icon: TrophyIcon, value: "40+", label: "جایزه" },
+      { icon: Globe, value: "35+", label: "بازار جهانی" },
+      { icon: AudioLines, value: "55+", label: "محتوای صوتی" },
+    ],
+  },
+  {
+    id: 5,
+    img: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    link: "#",
+    title: "کامپوننت‌های حالت تیره",
+    description: "#حالت-تیره",
+    chips: [
+      { icon: TrophyIcon, value: "65+", label: "جایزه" },
+      { icon: Globe, value: "70+", label: "بازار جهانی" },
+      { icon: AudioLines, value: "50+", label: "محتوای صوتی" },
+    ],
+  },
+  {
+    id: 6,
+    img: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+    link: "#",
+    title: "بسته قالب فروشگاه آنلاین",
+    description: "#فروشگاه-آنلاین",
+    chips: [
+      { icon: TrophyIcon, value: "85+", label: "جایزه" },
+      { icon: Globe, value: "90+", label: "بازار جهانی" },
+      { icon: AudioLines, value: "75+", label: "محتوای صوتی" },
+    ],
+  },
+];
+
+const Gallery34 = ({
+  featureData = defaultFeatureData,
+  className,
+}: Gallery34Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-full overflow-hidden py-32", className)}
+    >
+      <div className="container">
+        <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {featureData.map((item, index) => (
+            <a
+              key={item.id}
+              href={item.link}
+              onMouseEnter={() => setHoveredIndex(index)}
+              onMouseLeave={() => setHoveredIndex(null)}
+              className="relative block overflow-hidden rounded-3xl bg-muted p-2 transition-colors hover:bg-muted/80"
+              aria-label={item.title}
+            >
+              <motion.img
+                transition={{
+                  duration: 0.2,
+                  ease: "easeOut",
+                  delay: index * 0.1 + 0.5,
+                }}
+                animate={{
+                  filter:
+                    hoveredIndex !== null && hoveredIndex !== index
+                      ? "blur(10px)"
+                      : "blur(0px)",
+                  transition: {
+                    duration: 0.3,
+                    ease: "easeOut",
+                    delay: 0,
+                  },
+                  scale: hoveredIndex === index ? 1.02 : 1,
+                }}
+                src={item.img}
+                className="pointer-events-none h-72 w-full rounded-2xl object-cover"
+                alt={item.title}
+              />
+              <div className="absolute top-4 inset-e-4 z-10">
+                <Heart
+                  className="size-6 fill-background/20 text-background"
+                  aria-hidden
+                />
+              </div>
+              <div className="mt-2 p-2 text-right">
+                <h2 className="text-xl font-semibold tracking-tight">
+                  {item.title}
+                </h2>
+                <p className="mt-2 text-sm text-muted-foreground" dir="rtl">
+                  {item.description}
+                </p>
+                <div className="mt-4 flex flex-wrap items-center justify-end gap-2">
+                  {item.chips.map((chip, chipIndex) => {
+                    const IconComponent = chip.icon;
+                    return (
+                      <span
+                        key={chipIndex}
+                        aria-label={`${chip.label}: ${formatCount(chip.value)}`}
+                        className="inline-flex items-center justify-center gap-2 rounded-full bg-background px-2 py-1 text-sm"
+                      >
+                        <IconComponent className="size-4 shrink-0" />
+                        <span dir="rtl">{formatCount(chip.value)}</span>
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery34 };
diff --git a/blocks/gallery35.tsx b/blocks/gallery35.tsx
new file mode 100644
index 0000000..32ac50a
--- /dev/null
+++ b/blocks/gallery35.tsx
@@ -0,0 +1,402 @@
+"use client";
+
+import type { MotionValue } from "framer-motion";
+import {
+  motion,
+  useAnimationControls,
+  useScroll,
+  useTransform,
+} from "framer-motion";
+import { Pause, Play, RotateCcw } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const getTextPositionClassName = (
+  textPosition: "left" | "right" | "top" | "bottom",
+) => {
+  let textPositionClassName = "";
+
+  switch (textPosition) {
+    case "left":
+      textPositionClassName = "md:left-10 md:top-1/3 md:-translate-y-1/3";
+      break;
+    case "right":
+      textPositionClassName = "md:right-10 md:top-1/2 md:-translate-y-1/2";
+      break;
+    case "top":
+      textPositionClassName = "md:top-10 md:left-1/2 md:-translate-x-1/2";
+      break;
+    case "bottom":
+      textPositionClassName = "md:bottom-10 md:left-1/2 md:-translate-x-1/2";
+      break;
+    default:
+      textPositionClassName = "md:left-10 md:top-1/2 md:-translate-y-1/2";
+      break;
+  }
+
+  return textPositionClassName;
+};
+
+const getCardPositions = (total: number, index: number) => {
+  if (total <= 1) {
+    return [0, 0, 0, 1, 1];
+  }
+
+  const step = 1 / total;
+  const center = step * index + step / 2;
+
+  const range = [
+    0,
+    Math.max(0, center - step),
+    center,
+    Math.min(1, center + step),
+    1,
+  ];
+
+  for (let i = 1; i < range.length; i++) {
+    range[i] = Math.max(range[i], range[i - 1]);
+  }
+
+  return range;
+};
+
+interface Visual {
+  text: string;
+  className: string;
+  image: string;
+  textPosition: "left" | "right" | "top" | "bottom";
+}
+
+interface VisualCardProps {
+  visual: Visual;
+  index: number;
+  total: number;
+  scrollXProgress: MotionValue<number>;
+}
+
+const VisualCard = ({
+  visual,
+  index,
+  total,
+  scrollXProgress,
+}: VisualCardProps) => {
+  const textPositionClassName = getTextPositionClassName(visual.textPosition);
+
+  const range = getCardPositions(total, index);
+
+  const opacity = useTransform(scrollXProgress, range, [0, 0, 1, 0, 0]);
+  const x = useTransform(scrollXProgress, range, [
+    "100%",
+    "100%",
+    "0%",
+    "-100%",
+    "-100%",
+  ]);
+
+  return (
+    <motion.div
+      className={cn(
+        "relative h-[75vh] w-[70vw] shrink-0 snap-center overflow-hidden rounded-3xl",
+        visual.className,
+      )}
+      id={`visual-${index}`}
+    >
+      <img
+        src={visual.image}
+        alt={visual.text}
+        className={cn("absolute inset-0 z-0 h-full w-full object-cover")}
+      />
+
+      <span className="absolute inset-0 z-10 bg-black/5" />
+
+      <motion.p
+        style={{
+          opacity,
+          x,
+        }}
+        dir="rtl"
+        className={cn(
+          "absolute z-20 hidden text-right text-xl font-semibold leading-relaxed md:block md:max-w-sm lg:text-xl",
+          textPositionClassName,
+        )}
+      >
+        {visual.text}
+      </motion.p>
+      <motion.p
+        style={{
+          opacity,
+          x,
+        }}
+        dir="rtl"
+        className={cn(
+          "absolute z-20 text-right text-xl font-semibold leading-relaxed md:hidden md:max-w-sm lg:text-xl",
+          "top-10 left-1/2 -translate-x-1/2 px-4",
+        )}
+      >
+        {visual.text}
+      </motion.p>
+    </motion.div>
+  );
+};
+
+const GalleryPaginationDot = ({
+  index,
+  scrollXProgress,
+  total,
+  isPlaying,
+  currentVisualIndex,
+}: {
+  index: number;
+  scrollXProgress: MotionValue<number>;
+  total: number;
+  isPlaying: boolean;
+  currentVisualIndex: number;
+}) => {
+  const range = getCardPositions(total, index);
+
+  const controls = useAnimationControls();
+
+  const width = useTransform(scrollXProgress, range, [8, 8, 50, 8, 8]);
+
+  useEffect(() => {
+    if (isPlaying && currentVisualIndex === index) {
+      controls.set({
+        width: 0,
+      });
+      controls.start({
+        width: "100%",
+      });
+    }
+  }, [currentVisualIndex, isPlaying, index, controls]);
+
+  const handleClick = (index: number) => {
+    document.getElementById(`visual-${index}`)?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+  };
+  return (
+    <motion.button
+      type="button"
+      style={{
+        width,
+      }}
+      onClick={() => handleClick(index)}
+      aria-label={`رفتن به اسلاید ${new Intl.NumberFormat("fa-IR").format(index + 1)}`}
+      className="relative inline-block h-2 rounded-full bg-foreground/50 hover:bg-foreground/70"
+    >
+      {isPlaying && currentVisualIndex === index && (
+        <motion.span
+          animate={controls}
+          transition={{ duration: 2, ease: "linear" }}
+          className="absolute top-0 start-0 z-10 h-full rounded-full bg-foreground"
+        />
+      )}
+    </motion.button>
+  );
+};
+
+interface Gallery35Props {
+  heading?: string;
+  visuals?: Visual[];
+  className?: string;
+}
+
+const defaultVisuals: Visual[] = [
+  {
+    text: "اصول طراحی مدرن رابط‌هایی شهودی می‌سازد که کاربران به آن اعتماد و علاقه دارند.",
+    className: "bg-blue-100 dark:bg-blue-900",
+    image: "/block-media/shadcnblocks/block/guri4/img11.png",
+    textPosition: "left",
+  },
+  {
+    text: "فرایند خلاق نوآوری را با طراحی تکراری و بازخورد کاربر پیش می‌برد.",
+    className: "bg-green-100 dark:bg-green-900",
+    image: "/block-media/shadcnblocks/block/guri3/img5.jpeg",
+    textPosition: "top",
+  },
+  {
+    text: "تحلیل بصری داده‌های پیچیده را به داشبوردهای واضح و قابل‌اقدام تبدیل می‌کند.",
+    className: "bg-purple-100 dark:bg-purple-900",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg",
+    textPosition: "bottom",
+  },
+  {
+    text: "هنر دیجیتال زیبایی‌شناسی کلاسیک را با قابلیت‌های تعاملی مدرن ترکیب می‌کند.",
+    className: "bg-pink-100 dark:bg-pink-900",
+    image: "/block-media/shadcnblocks/block/lummi/bw15.jpeg",
+    textPosition: "top",
+  },
+  {
+    text: "مرکز نوآوری فناوری پیشرفته را با طراحی انسان‌محور در کنار هم قرار می‌دهد.",
+    className: "bg-orange-100 dark:bg-orange-900",
+    image: "/block-media/shadcnblocks/block/guri3/img23.jpeg",
+    textPosition: "left",
+  },
+  {
+    text: "تحلیل تصویری داده‌ها، مسیر مشتری را از آگاهی تا تبدیل در یک نمای بصری نمایش می‌دهد.",
+    className: "bg-indigo-100 dark:bg-indigo-900",
+    image: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
+    textPosition: "top",
+  },
+];
+
+const Gallery35 = ({
+  className,
+  heading = "گالری محصول",
+  visuals = defaultVisuals,
+}: Gallery35Props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentVisualIndex, setCurrentVisualIndex] = useState(0);
+
+  const { scrollXProgress } = useScroll({
+    container: containerRef,
+  });
+
+  useEffect(() => {
+    const unsubscribe = scrollXProgress.on("change", (progress) => {
+      if (isPlaying) return;
+
+      let closestIndex = 0;
+      let minDistance = Infinity;
+
+      visuals.forEach((_, index) => {
+        const range = getCardPositions(visuals.length, index);
+        const visualPosition = range[2];
+        const distance = Math.abs(progress - visualPosition);
+
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestIndex = index;
+        }
+      });
+
+      setCurrentVisualIndex(closestIndex);
+    });
+
+    return () => unsubscribe();
+  }, [scrollXProgress, visuals.length, isPlaying, visuals]);
+
+  useEffect(() => {
+    if (!isPlaying) return;
+
+    const intervalId = setInterval(() => {
+      if (currentVisualIndex === visuals.length - 1) {
+        setIsPlaying(false);
+        return currentVisualIndex;
+      }
+
+      const nextIndex = currentVisualIndex + 1;
+
+      document.getElementById(`visual-${nextIndex}`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+
+      setCurrentVisualIndex(nextIndex);
+    }, 2000);
+
+    return () => clearInterval(intervalId);
+  }, [isPlaying, visuals.length, currentVisualIndex]);
+
+  const restartAnimation = () => {
+    setCurrentVisualIndex(0);
+    document.getElementById(`visual-0`)?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+    setIsPlaying(true);
+  };
+
+  const isLastSlide =
+    currentVisualIndex === visuals.length - 1 && !isPlaying;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container overflow-visible">
+        <div className="flex flex-col gap-14">
+          <h3 className="text-right text-3xl font-semibold tracking-tight md:text-xl lg:text-2xll">
+            {heading}
+          </h3>
+
+          <div className="relative space-y-10">
+            <div
+              ref={containerRef}
+              dir="rtl"
+              className="hide-scrollbar flex snap-x snap-mandatory flex-nowrap items-center gap-10 overflow-x-auto scroll-smooth"
+              style={{
+                scrollSnapType: "x mandatory",
+                scrollBehavior: "smooth",
+                WebkitOverflowScrolling: "touch",
+              }}
+            >
+              {visuals.map((visual, index) => {
+                return (
+                  <VisualCard
+                    key={`visual-${index}`}
+                    visual={visual}
+                    index={index}
+                    total={visuals.length}
+                    scrollXProgress={scrollXProgress}
+                  />
+                );
+              })}
+            </div>
+            <div className="sticky bottom-20 z-20 flex justify-center">
+              <div className="flex h-14 items-center gap-2 overflow-hidden">
+                <div className="flex h-full items-center gap-3 rounded-full bg-muted/50 px-6 backdrop-blur-xl">
+                  {visuals.map((_, index) => {
+                    return (
+                      <GalleryPaginationDot
+                        key={`visual-${index}`}
+                        index={index}
+                        scrollXProgress={scrollXProgress}
+                        total={visuals.length}
+                        isPlaying={isPlaying}
+                        currentVisualIndex={currentVisualIndex}
+                      />
+                    );
+                  })}
+                </div>
+
+                <button
+                  type="button"
+                  onClick={
+                    isLastSlide ? restartAnimation : () => setIsPlaying(!isPlaying)
+                  }
+                  aria-label={
+                    isLastSlide
+                      ? "شروع دوباره گالری"
+                      : isPlaying
+                        ? "توقف پخش خودکار"
+                        : "پخش خودکار گالری"
+                  }
+                  className="flex h-full items-center justify-center rounded-full bg-muted/50 px-6 backdrop-blur-xl [&>svg]:fill-foreground/50 [&>svg]:stroke-foreground/10"
+                >
+                  {isLastSlide ? (
+                    <RotateCcw
+                      strokeWidth={2.2}
+                      className="fill-none! stroke-foreground/50!"
+                    />
+                  ) : isPlaying ? (
+                    <Pause />
+                  ) : (
+                    <Play />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery35 };
diff --git a/blocks/gallery4.tsx b/blocks/gallery4.tsx
new file mode 100644
index 0000000..14ec6d8
--- /dev/null
+++ b/blocks/gallery4.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+export interface Gallery4Item {
+  id: string;
+  title: string;
+  description: string;
+  href: string;
+  image: string;
+}
+
+export interface Gallery4Props {
+  title?: string;
+  description?: string;
+  items?: Gallery4Item[];
+  className?: string;
+}
+
+const data: Gallery4Item[] = [
+  {
+    id: "shadcn-ui",
+    title: "ری یو آی: ساخت کتابخانه مدرن کامپوننت",
+    description:
+      "ببینید ری یو آی چگونه کتابخانه‌های کامپوننت رابط کاربری را با رویکردی یکتا در توزیع و سفارشی‌سازی متحول کرد و ساخت اپلیکیشن‌های زیبا و در دسترس را برای توسعه‌دهندگان ساده‌تر کرد.",
+    href: "https://ui.shadcn.com",
+    image:
+      "/block-media/external/unsplash/2.jpg",
+  },
+  {
+    id: "tailwind",
+    title: "استایل‌دهی مدرن: انقلاب utility-first",
+    description:
+      "کشف کنید استایل‌دهی مدرن چگونه روش استایل‌دهی توسعه‌دهندگان را تغییر داد؛ رویکرد utility-first که سرعت توسعه را بالا می‌برد و انعطاف طراحی را حفظ می‌کند.",
+    href: "https://tailwindcss.com",
+    image:
+      "/block-media/external/unsplash/photo-1551250928-e4a05afaed1e.jpg",
+  },
+  {
+    id: "astro",
+    title: "Astro: فریم‌ورک همه‌کاره وب",
+    description:
+      "بیاموزید معماری Islands و رویکرد zero-JS-by-default در Astro چگونه به توسعه‌دهندگان کمک می‌کند وب‌سایت‌های سریع‌تر بسازند و در عین حال تعامل غنی داشته باشند.",
+    href: "https://astro.build",
+    image:
+      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
+  },
+  {
+    id: "react",
+    title: "رابط کاربری: پیشگام رابط کاربری مبتنی بر کامپوننت",
+    description:
+      "ببینید رابط کاربری با معماری مبتنی بر کامپوننت چگونه همچنان توسعه وب مدرن را شکل می‌دهد و ساخت رابط‌های پیچیده با کد قابل استفاده مجدد را ممکن می‌کند.",
+    href: "https://react.dev",
+    image:
+      "/block-media/external/unsplash/4.jpg",
+  },
+  {
+    id: "nextjs",
+    title: "فریم‌ورک وب: فریم‌ورک رابط کاربری برای پروداکشن",
+    description:
+      "کشف کنید فریم‌ورک وب چگونه به فریم‌ورک اصلی ساخت اپلیکیشن‌های full-stack رابط کاربری تبدیل شده؛ با server component، مسیریابی فایل‌محور و بهینه‌سازی خودکار.",
+    href: "https://nextjs.org",
+    image:
+      "/block-media/external/unsplash/photo-1550070881-a5d71eda5800.jpg",
+  },
+];
+
+const Gallery4 = ({
+  title = "مطالعات موردی",
+  description = "ببینید شرکت‌ها چگونه با پلتفرم CRM و بازاریابی ما درآمد و نرخ تبدیل خود را افزایش داده‌اند. این مطالعات موردی کاربردهای واقعی و نتایج قابل اندازه‌گیری را نشان می‌دهند.",
+  items = data,
+  className,
+}: Gallery4Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+      setCurrentSlide(carouselApi.selectedScrollSnap());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 flex items-end justify-between md:mb-14 lg:mb-16">
+          <div className="flex flex-col gap-4 text-start">
+            <h2 className="text-3xl font-medium md:text-xl lg:text-2xll">
+              {title}
+            </h2>
+            <p className="max-w-xl text-muted-foreground">{description}</p>
+          </div>
+          <div className="hidden shrink-0 gap-2 md:flex">
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => {
+                carouselApi?.scrollPrev();
+              }}
+              disabled={!canScrollPrev}
+              className="disabled:pointer-events-auto"
+            >
+              <ArrowRight className="size-5" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => {
+                carouselApi?.scrollNext();
+              }}
+              disabled={!canScrollNext}
+              className="disabled:pointer-events-auto"
+            >
+              <ArrowLeft className="size-5" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </div>
+        <Carousel
+          dir="rtl"
+          setApi={setCarouselApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+            breakpoints: {
+              "(max-width: 768px)": {
+                dragFree: true,
+              },
+            },
+          }}
+        >
+          <CarouselContent className="-ms-4 me-0">
+            {items.map((item) => (
+              <CarouselItem
+                key={item.id}
+                className="max-w-[320px] basis-auto ps-4 pe-0 lg:max-w-[360px]"
+              >
+                <a href={item.href} className="group rounded-xl">
+                  <div className="group relative h-full min-h-[27rem] max-w-full overflow-hidden rounded-xl md:aspect-5/4 lg:aspect-16/9">
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className="absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+                    />
+                    <div className="absolute inset-0 h-full bg-[linear-gradient(transparent_20%,black_100%)] mix-blend-multiply" />
+                    <div className="absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-start text-white md:p-8">
+                      <div className="mb-2 pt-4 text-xl font-semibold md:mb-3 md:pt-4 lg:pt-4">
+                        {item.title}
+                      </div>
+                      <div className="mb-8 line-clamp-2 md:mb-12 lg:mb-9">
+                        {item.description}
+                      </div>
+                      <div className="flex items-center text-sm">
+                        بیشتر بخوانید{" "}
+                        <ArrowRight className="ms-2 size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                      </div>
+                    </div>
+                  </div>
+                </a>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        <div className="mt-8 flex justify-center gap-2">
+          {items.map((_, index) => (
+            <button
+              key={index}
+              type="button"
+              className={`h-2 w-2 rounded-full transition-colors ${
+                currentSlide === index ? "bg-primary" : "bg-primary/20"
+              }`}
+              onClick={() => carouselApi?.scrollTo(index)}
+              aria-label={`رفتن به اسلاید ${(index + 1).toLocaleString("fa-IR")}`}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery4 };
diff --git a/blocks/gallery5.tsx b/blocks/gallery5.tsx
new file mode 100644
index 0000000..7b550a3
--- /dev/null
+++ b/blocks/gallery5.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import {
+  ArrowLeft,
+  ArrowRight,
+  CheckSquare,
+  Clock,
+  Focus,
+  Target,
+  Users,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
+
+const data = [
+  {
+    id: "item-1",
+    title: "مدیریت وظایف",
+    icon: CheckSquare,
+    description:
+      "وظایف خود را با رابط شهودی ما سازماندهی کنید. ایجاد، اولویت‌بندی و پیگیری پیشرفت را به‌سادگی انجام دهید؛ مهلت تعیین کنید، برچسب بزنید و دیگر مهلت مهمی را از دست ندهید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    id: "item-2",
+    title: "ردیابی زمان",
+    icon: Clock,
+    description:
+      "با تحلیل‌های دقیق ببینید زمان خود را چگونه می‌گذرانید. الگوهای بهره‌وری را شناسایی کنید، فعالیت‌های اتلاف‌زمان را حذف کنید و برنامه روزانه را برای حداکثر کارایی بهینه کنید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: "item-3",
+    title: "همکاری تیمی",
+    icon: Users,
+    description:
+      "با تیم خود در لحظه و بدون اصطکاک کار کنید. وظایف را به اشتراک بگذارید، از طریق چت یکپارچه گفتگو کنید و همه را با اهداف و نقاط عطف مشترک همسو نگه دارید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    id: "item-4",
+    title: "پیگیری اهداف و عادت‌ها",
+    icon: Target,
+    description:
+      "آرزوهای خود را با سیستم ساخت عادت ما به اهداف قابل دستیابی تبدیل کنید. پیشرفت را دنبال کنید، رکورد حفظ کنید و مسیر تغییر رفتار پایدار را دنبال کنید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    id: "item-5",
+    title: "جلسات تمرکز",
+    icon: Focus,
+    description:
+      "با تایمر تمرکز الهام‌گرفته از پومودورو، تمرکز خود را بالا ببرید. حواس‌پرتی‌ها را مسدود کنید، در حالت کار عمیق بمانید و بهره‌وری را با استراحت‌های لازم متعادل کنید.",
+    href: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+];
+
+interface Gallery5Props {
+  className?: string;
+}
+
+const Gallery5 = ({ className }: Gallery5Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const [selection, setSelection] = useState(0);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.scrollTo(selection);
+  }, [carouselApi, selection]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+      setSelection(carouselApi.selectedScrollSnap());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mb-14 flex flex-col gap-16 lg:mb-16">
+        <div className="text-start lg:max-w-lg">
+          <h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+            بهره‌وری خود را چند برابر کنید
+          </h2>
+          <p className="text-muted-foreground lg:text-lg">
+            مجموعه ابزار بهره‌وری ما کمک می‌کند در زمان کمتری کار بیشتری
+            انجام دهید. از مدیریت وظایف تا ساخت عادت، ابزارهای لازم برای
+            بهینه‌سازی گردش کار و دستیابی به اهداف را در اختیار دارید.
+          </p>
+        </div>
+        <div className="flex shrink-0 gap-2 md:hidden">
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => {
+              carouselApi?.scrollPrev();
+            }}
+            disabled={!canScrollPrev}
+            className="disabled:pointer-events-auto"
+          >
+            <ArrowRight className="size-5" />
+            <span className="sr-only">اسلاید قبلی</span>
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => {
+              carouselApi?.scrollNext();
+            }}
+            disabled={!canScrollNext}
+            className="disabled:pointer-events-auto"
+          >
+            <ArrowLeft className="size-5" />
+            <span className="sr-only">اسلاید بعدی</span>
+          </Button>
+        </div>
+        <div className="hidden gap-4 text-center md:flex md:flex-wrap">
+          <ToggleGroup
+            type="single"
+            variant="outline"
+            size="lg"
+            className="flex-wrap"
+            value={data[selection].id}
+            onValueChange={(newValue) => {
+              if (newValue) {
+                setSelection(data.findIndex((item) => item.id === newValue));
+              }
+            }}
+          >
+            {data.map((item) => {
+              const Icon = item.icon;
+              return (
+                <ToggleGroupItem
+                  key={item.id}
+                  value={item.id}
+                  className="flex flex-col items-center p-4 text-center"
+                  aria-label={item.title}
+                >
+                  <Icon className="size-4" />
+                </ToggleGroupItem>
+              );
+            })}
+          </ToggleGroup>
+        </div>
+        <Carousel
+          dir="rtl"
+          setApi={setCarouselApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+            breakpoints: {
+              "(max-width: 768px)": {
+                dragFree: true,
+              },
+            },
+          }}
+        >
+          <CarouselContent className="-ms-4 me-0">
+            {data.map((item) => (
+              <CarouselItem key={item.id} className="basis-full ps-4 pe-0">
+                <a href={item.href} className="group rounded-xl">
+                  <div className="flex flex-col overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8">
+                    <div className="md:order-2 md:min-h-96 lg:min-h-112 xl:min-h-128">
+                      <img
+                        src={item.image}
+                        alt={item.title}
+                        className="aspect-video h-full w-full object-cover object-center"
+                      />
+                    </div>
+                    <div className="flex flex-col justify-center px-6 py-8 text-start md:order-1 md:px-8 md:py-10 lg:px-10 lg:py-12">
+                      {(() => {
+                        const Icon = item.icon;
+                        return <Icon className="mb-4 size-6" />;
+                      })()}
+                      <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+                        {item.title}
+                      </h3>
+                      <p className="text-muted-foreground lg:text-lg">
+                        {item.description}
+                      </p>
+                    </div>
+                  </div>
+                </a>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery5 };
diff --git a/blocks/gallery6.tsx b/blocks/gallery6.tsx
new file mode 100644
index 0000000..6d5986b
--- /dev/null
+++ b/blocks/gallery6.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import { ArrowLeft, ArrowRight, ArrowUpRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface GalleryItem {
+  id: string;
+  title: string;
+  summary: string;
+  url: string;
+  image: string;
+}
+
+interface Gallery6Props {
+  heading?: string;
+  demoUrl?: string;
+  items?: GalleryItem[];
+  className?: string;
+}
+
+const DEFAULT_ITEMS: GalleryItem[] = [
+  {
+    id: "item-1",
+    title: "ساخت رابط‌های مدرن",
+    summary:
+      "با سیستم طراحی جامع ما، رابط‌های کاربری چشمگیر و حرفه‌ای بسازید.",
+    url: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "item-2",
+    title: "فناوری بینایی ماشین",
+    summary:
+      "قابلیت‌های قدرتمند تشخیص و پردازش تصویر که به سیستم‌های هوش مصنوعی امکان می‌دهد اطلاعات بصری دنیا را تحلیل، درک و تفسیر کنند.",
+    url: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "item-3",
+    title: "خودکارسازی یادگیری ماشین",
+    summary:
+      "الگوریتم‌های خودبهبود که از الگوهای داده یاد می‌گیرند تا وظایف پیچیده را خودکار کنند و با حداقل دخالت انسان تصمیم‌های هوشمند بگیرند.",
+    url: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "item-4",
+    title: "تحلیل پیش‌بینی‌کننده",
+    summary:
+      "قابلیت‌های پیشرفته پیش‌بینی که داده‌های تاریخی را تحلیل می‌کنند تا روندها و نتایج آینده را پیش‌بینی کنند و به کسب‌وکارها در تصمیم‌گیری داده‌محور کمک کنند.",
+    url: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    id: "item-5",
+    title: "معماری شبکه عصبی",
+    summary:
+      "مدل‌های پیچیده هوش مصنوعی الهام‌گرفته از ساختار مغز انسان، قادر به حل مسائل پیچیده از طریق یادگیری عمیق و تشخیص الگو.",
+    url: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+];
+
+const Gallery6 = ({
+  heading = "گالری",
+  demoUrl = "#",
+  items = DEFAULT_ITEMS,
+  className,
+}: Gallery6Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-8 flex flex-col justify-between md:mb-14 md:flex-row md:items-end lg:mb-16">
+          <div className="text-start">
+            <h2 className="mb-3 text-3xl font-semibold md:mb-4 md:text-xl lg:mb-6">
+              {heading}
+            </h2>
+            <a
+              href={demoUrl}
+              className="group flex items-center gap-1 text-sm font-medium md:text-base lg:text-lg"
+            >
+              رزرو دمو
+              <ArrowUpRight className="size-4 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 rtl:group-hover:translate-y-1" />
+            </a>
+          </div>
+          <div className="mt-8 flex shrink-0 items-center justify-start gap-2">
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => {
+                carouselApi?.scrollPrev();
+              }}
+              disabled={!canScrollPrev}
+              className="disabled:pointer-events-auto"
+            >
+              <ArrowRight className="size-5" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => {
+                carouselApi?.scrollNext();
+              }}
+              disabled={!canScrollNext}
+              className="disabled:pointer-events-auto"
+            >
+              <ArrowLeft className="size-5" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </div>
+        <Carousel
+          dir="rtl"
+          setApi={setCarouselApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+            breakpoints: {
+              "(max-width: 768px)": {
+                dragFree: true,
+              },
+            },
+          }}
+          className="relative w-full max-w-full"
+        >
+          <CarouselContent className="hide-scrollbar -ms-4 me-0 w-full max-w-full">
+            {items.map((item) => (
+              <CarouselItem
+                key={item.id}
+                className="basis-auto ps-4 pe-0 md:max-w-[452px]"
+              >
+                <a
+                  href={item.url}
+                  className="group flex flex-col justify-between text-start"
+                >
+                  <div>
+                    <div className="flex aspect-3/2 overflow-clip rounded-xl">
+                      <div className="flex-1">
+                        <div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
+                          <img
+                            src={item.image}
+                            alt={item.title}
+                            className="h-full w-full object-cover object-center"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mb-2 line-clamp-3 pt-4 text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-xl">
+                    {item.title}
+                  </div>
+                  <div className="mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
+                    {item.summary}
+                  </div>
+                  <div className="flex items-center text-sm">
+                    بیشتر بخوانید{" "}
+                    <ArrowRight className="ms-2 size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                  </div>
+                </a>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery6 };
diff --git a/blocks/gallery7.tsx b/blocks/gallery7.tsx
new file mode 100644
index 0000000..f27057c
--- /dev/null
+++ b/blocks/gallery7.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import { MoveRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const images = [
+  "/block-media/shadcnblocks/block/placeholder-1.svg",
+  "/block-media/shadcnblocks/block/placeholder-2.svg",
+  "/block-media/shadcnblocks/block/placeholder-3.svg",
+  "/block-media/shadcnblocks/block/placeholder-4.svg",
+  "/block-media/shadcnblocks/block/placeholder-5.svg",
+  "/block-media/shadcnblocks/block/placeholder-6.svg",
+  "/block-media/shadcnblocks/block/placeholder-1.svg",
+  "/block-media/shadcnblocks/block/placeholder-2.svg",
+  "/block-media/shadcnblocks/block/placeholder-3.svg",
+  "/block-media/shadcnblocks/block/placeholder-4.svg",
+  "/block-media/shadcnblocks/block/placeholder-5.svg",
+  "/block-media/shadcnblocks/block/placeholder-6.svg",
+];
+
+interface Gallery7Props {
+  className?: string;
+}
+
+const Gallery7 = ({ className }: Gallery7Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24">
+          <div className="flex flex-col gap-8 text-start md:gap-12">
+            <h1 className="text-3xl font-bold md:text-xl">
+              زندگی بخشیدن به داده‌های شما با قدرت هوش مصنوعی
+            </h1>
+          </div>
+          <p className="text-start text-muted-foreground">
+            ما به قدرت هوش مصنوعی متکی هستیم. تیم ما از باتجربه‌ترین افراد در
+            این حوزه تشکیل شده و دائماً به دنبال روش‌های جدید برای فراتر رفتن
+            از مرزهای ممکن هستیم. ما تیمی از دانشمندان داده هستیم.
+          </p>
+          <a
+            href="#"
+            className="inline-flex items-center font-medium hover:underline md:col-span-2"
+          >
+            کاوش راهکارهای ما
+            <MoveRight className="ms-2 inline size-5 rtl:rotate-180" />
+          </a>
+        </div>
+      </div>
+      <div className="w-full">
+        <div className="max-w-[100vw] overflow-x-hidden">
+          <Carousel
+            dir="rtl"
+            setApi={setCarouselApi}
+            opts={{
+              loop: true,
+              direction: "rtl",
+            }}
+            plugins={[
+              AutoScroll({
+                speed: 0.9,
+              }),
+            ]}
+            className="pointer-events-none"
+          >
+            <CarouselContent className="-ms-4 me-0">
+              {images.map((image, index) => (
+                <CarouselItem key={index} className="basis-auto ps-4 pe-0">
+                  <div className="max-h-80 max-w-60">
+                    <img
+                      src={image}
+                      alt={`تصویر گالری ${(index + 1).toLocaleString("fa-IR")}`}
+                      className={cn(
+                        "mt-7 h-full w-full rounded-md object-cover",
+                        index % 2 === 0 && "mt-16",
+                      )}
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery7 };
diff --git a/blocks/gallery8.tsx b/blocks/gallery8.tsx
new file mode 100644
index 0000000..f0ac7cd
--- /dev/null
+++ b/blocks/gallery8.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { ArrowLeft, ArrowRight, MoveRight } from "lucide-react";
+import { Fragment, useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const resources = [
+  {
+    title: "شروع کار با قالب‌ها",
+    category: "راهنما",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    title: "قیمت‌گذاری و پلن‌های قالب",
+    category: "قیمت‌گذاری",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    title: "معرفی سازنده قالب جدید ما",
+    category: "خبر",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    title: "الگوهای طراحی پیشرفته: ساخت قالب‌های واکنش‌گرا برای ۲۲۵",
+    category: "آموزش",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    title: "راهنمای جامع سفارشی‌سازی قالب",
+    category: "کتاب الکترونیک",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    title: "گزارش‌های موفقیت قالب: مرور یک سال",
+    category: "وبلاگ",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+];
+
+interface Gallery8Props {
+  className?: string;
+}
+
+const Gallery8 = ({ className }: Gallery8Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    carouselApi.reInit();
+  }, [carouselApi]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container">
+        <h2 className="text-start text-xl font-bold text-pretty">
+          شروع ساخت با مجموعه قالب‌های ما
+        </h2>
+        <Carousel
+          dir="rtl"
+          setApi={setCarouselApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+        >
+          <div className="mt-6 grid gap-x-14 gap-y-10 lg:mt-16 lg:grid-cols-3">
+            <div className="order-3 flex flex-col gap-6 text-start lg:order-none">
+              {resources.slice(0, 3).map((resource, idx) => (
+                <Fragment key={idx}>
+                  <div className="flex flex-col gap-1">
+                    <div className="font-mono text-sm text-muted-foreground uppercase">
+                      {resource.category}
+                    </div>
+                    <a
+                      href={resource.link}
+                      className="group flex items-center gap-2 font-semibold"
+                    >
+                      {resource.title}
+                      <MoveRight className="mt-0.5 size-5 shrink-0 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                    </a>
+                  </div>
+                  <Separator />
+                </Fragment>
+              ))}
+              <a
+                href="#"
+                className="group flex items-center gap-2 font-semibold"
+              >
+                مشاهده همه منابع
+                <MoveRight className="mt-0.5 size-5 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </a>
+            </div>
+            <div className="order-1 lg:order-none lg:col-span-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_0_-100vw_-100vw)]">
+              <CarouselContent className="me-0 ms-0 max-w-[min(calc(100vw-4rem),24rem)] select-none sm:max-w-96">
+                {resources.map((item, idx) => (
+                  <CarouselItem
+                    className={cn(
+                      "w-fit border-y border-s border-border ps-0 transition-colors duration-300 hover:bg-muted/50",
+                      idx === resources.length - 1 && "border-e",
+                    )}
+                    key={idx}
+                  >
+                    <a href={item.link} className="block h-full text-start">
+                      <img
+                        src={item.image}
+                        alt={item.title}
+                        className="aspect-video object-cover"
+                      />
+                      <div className="px-6 py-8">
+                        <div className="text-sm text-muted-foreground uppercase">
+                          {item.category}
+                        </div>
+                        <h3 className="mt-2 text-xl font-semibold lg:text-xl">
+                          {item.title}
+                        </h3>
+                      </div>
+                    </a>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </div>
+            <div className="order-2 flex items-center gap-4 lg:order-none lg:col-start-2">
+              <Button
+                type="button"
+                size="icon"
+                variant="outline"
+                className="static size-12 translate-none touch-manipulation"
+                disabled={!canScrollPrev}
+                onClick={() => carouselApi?.scrollPrev()}
+              >
+                <ArrowRight className="size-5" />
+                <span className="sr-only">اسلاید قبلی</span>
+              </Button>
+              <Button
+                type="button"
+                size="icon"
+                variant="outline"
+                className="static size-12 translate-none touch-manipulation"
+                disabled={!canScrollNext}
+                onClick={() => carouselApi?.scrollNext()}
+              >
+                <ArrowLeft className="size-5" />
+                <span className="sr-only">اسلاید بعدی</span>
+              </Button>
+            </div>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery8 };
diff --git a/blocks/gallery9.tsx b/blocks/gallery9.tsx
new file mode 100644
index 0000000..8e01ba8
--- /dev/null
+++ b/blocks/gallery9.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { ArrowLeft, ArrowRight, Code, GitBranch, Sparkle } from "lucide-react";
+import { startTransition, useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    img: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    title: "طراحی",
+    text: "رابط و تجربه کاربری را با تیم طراحی ما از ایده اولیه تا نمونه نهایی بسازید.",
+    logo: <Code className="size-5" />,
+  },
+  {
+    img: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    title: "توسعه",
+    text: "پیاده‌سازی سریع و قابل اعتماد با زیرساخت پیشرفته توسعه و استانداردهای تیم.",
+    logo: <GitBranch className="size-5" />,
+  },
+  {
+    img: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    title: "انتشار",
+    text: "با اطمینان محصول خود را منتشر کنید و به کاربران واقعی تحویل دهید.",
+    logo: <Sparkle className="size-5" />,
+  },
+];
+
+interface Gallery9Props {
+  className?: string;
+}
+
+const Gallery9 = ({ className }: Gallery9Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(1);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = () => {
+      startTransition(() => {
+        setCurrent(api.selectedScrollSnap() + 1);
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+      });
+    };
+
+    startTransition(() => {
+      setCurrent(api.selectedScrollSnap() + 1);
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    });
+
+    api.on("select", updateCurrent);
+
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    api.reInit();
+  }, [api]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-20 flex flex-col items-center justify-center gap-8 text-center">
+          <h1 className="text-xl">
+            زمان بستن حساب‌هایتان را کوتاه کنید
+          </h1>
+
+          <Badge
+            variant="secondary"
+            className="px-5 py-2 text-base font-normal"
+          >
+            راهکاری یکپارچه برای تیم‌های مالی و عملیات
+          </Badge>
+        </div>
+        <Carousel
+          dir="rtl"
+          setApi={setApi}
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+          className="flex flex-col gap-10"
+        >
+          <CarouselContent className="-ms-4 me-0">
+            {sections.map((item, index) => (
+              <CarouselItem
+                className="h-full w-full basis-full ps-4 pe-0"
+                key={index}
+              >
+                <img
+                  src={item.img}
+                  alt={item.title}
+                  className="aspect-square h-full w-full object-cover md:aspect-[2]"
+                />
+                <div className="mt-8 flex cursor-pointer flex-col gap-2 text-start md:hidden">
+                  <div>{item.logo}</div>
+                  <div className="text-lg font-medium">{item.title}</div>
+                  <div className="text-lg text-muted-foreground">
+                    {item.text}
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="mb-8 hidden justify-between gap-8 text-start md:flex">
+            {sections.map((section, index) => (
+              <div
+                key={index}
+                onClick={() => api?.scrollTo(index)}
+                className="flex cursor-pointer flex-col gap-2"
+              >
+                <div>{section.logo}</div>
+                <div className="text-lg font-medium">{section.title}</div>
+                <div
+                  className={cn(
+                    "text-lg hover:text-muted-foreground",
+                    index + 1 === current
+                      ? "text-muted-foreground"
+                      : "text-muted-foreground/50",
+                  )}
+                >
+                  {section.text}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center gap-8">
+            <div>
+              {current.toLocaleString("fa-IR")} /{" "}
+              {sections.length.toLocaleString("fa-IR")}
+            </div>
+            <div className="flex items-center justify-start gap-2">
+              <Button
+                type="button"
+                size="icon"
+                variant="outline"
+                className="static translate-none touch-manipulation"
+                disabled={!canScrollPrev}
+                onClick={() => api?.scrollPrev()}
+              >
+                <ArrowRight className="size-5" />
+                <span className="sr-only">اسلاید قبلی</span>
+              </Button>
+              <Button
+                type="button"
+                size="icon"
+                variant="outline"
+                className="static translate-none touch-manipulation"
+                disabled={!canScrollNext}
+                onClick={() => api?.scrollNext()}
+              >
+                <ArrowLeft className="size-5" />
+                <span className="sr-only">اسلاید بعدی</span>
+              </Button>
+            </div>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Gallery9 };
diff --git a/blocks/help1.tsx b/blocks/help1.tsx
new file mode 100644
index 0000000..6f0f687
--- /dev/null
+++ b/blocks/help1.tsx
@@ -0,0 +1,156 @@
+import {
+  ChevronRight,
+  CreditCard,
+  Package,
+  RotateCcw,
+  ShoppingBag,
+  Truck,
+  User,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface HelpCategory {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  articles: number;
+}
+
+interface PopularTopic {
+  title: string;
+  href: string;
+}
+
+interface Help1Props {
+  title?: string;
+  description?: string;
+  categories?: HelpCategory[];
+  popularTopics?: PopularTopic[];
+  className?: string;
+}
+
+const DEFAULT_CATEGORIES: HelpCategory[] = [
+  {
+    icon: <Package className="size-5" />,
+    title: "سفارش‌ها",
+    description: "پیگیری، ویرایش یا لغو سفارش",
+    articles: 12,
+  },
+  {
+    icon: <Truck className="size-5" />,
+    title: "ارسال",
+    description: "گزینه‌های ارسال و پیگیری مرسوله",
+    articles: 8,
+  },
+  {
+    icon: <RotateCcw className="size-5" />,
+    title: "بازگشت و استرداد",
+    description: "سیاست بازگشت کالا و مراحل",
+    articles: 15,
+  },
+  {
+    icon: <CreditCard className="size-5" />,
+    title: "پرداخت",
+    description: "روش‌های پرداخت و رفع مشکلات",
+    articles: 10,
+  },
+  {
+    icon: <User className="size-5" />,
+    title: "حساب کاربری",
+    description: "پروفایل، رمز عبور و تنظیمات",
+    articles: 7,
+  },
+  {
+    icon: <ShoppingBag className="size-5" />,
+    title: "محصولات",
+    description: "سایزبندی، نگهداری و موجودی",
+    articles: 9,
+  },
+];
+
+const DEFAULT_TOPICS: PopularTopic[] = [
+  { title: "سفارشم کجاست؟", href: "#" },
+  { title: "نحوه بازگشت کالا", href: "#" },
+  { title: "فراموشی رمز عبور", href: "#" },
+  { title: "پرداخت انجام نمی‌شود", href: "#" },
+  { title: "راهنمای سایز", href: "#" },
+  { title: "ارسال به کشور من", href: "#" },
+];
+
+const Help1 = ({
+  title = " راهنمای کاربران",
+  description = "امروز چطور می‌توانیم کمک‌تان کنیم؟",
+  categories = DEFAULT_CATEGORIES,
+  popularTopics = DEFAULT_TOPICS,
+  className,
+}: Help1Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container max-w-4xl">
+        <div className="mb-10 text-center">
+          <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+            {title}
+          </h1>
+          <p className="text-muted-foreground">{description}</p>
+        </div>
+
+        <div className="mb-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {categories.map((category, index) => (
+            <Card
+              key={index}
+              className="group cursor-pointer gap-0 p-0 transition-colors hover:bg-muted/50"
+            >
+              <CardContent className="p-4">
+                <div className="flex items-start gap-3">
+                  <div className="shrink-0 text-muted-foreground">
+                    {category.icon}
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between">
+                      <h3 className="font-medium">{category.title}</h3>
+                      <ChevronRight className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+                    </div>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {category.description}
+                    </p>
+                    <p className="mt-1.5 text-xs text-muted-foreground">
+                      {category.articles.toLocaleString("fa-IR")} مقاله
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="rounded-xl bg-muted/50 p-6">
+          <h2 className="mb-3 text-lg font-medium">موضوعات پرطرفدار</h2>
+          <div className="-mx-2 grid sm:grid-cols-2 lg:grid-cols-3">
+            {popularTopics.map((topic, index) => (
+              <a
+                key={index}
+                href={topic.href}
+                className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-background"
+              >
+                <ChevronRight className="size-4 text-muted-foreground rtl:rotate-180" />
+                {topic.title}
+              </a>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-10 text-center">
+          <p className="text-sm text-muted-foreground">
+            پاسخ خود را پیدا نکردید؟
+          </p>
+          <Button className="mt-3">تماس با پشتیبانی</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Help1 };
diff --git a/blocks/help2.tsx b/blocks/help2.tsx
new file mode 100644
index 0000000..47b9974
--- /dev/null
+++ b/blocks/help2.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { Mail, MessageSquare, Phone, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface FAQ {
+  question: string;
+  answer: string;
+  category: string;
+}
+
+interface Help2Props {
+  title?: string;
+  description?: string;
+  faqs?: FAQ[];
+  contactTitle?: string;
+  contactDescription?: string;
+  className?: string;
+}
+
+const DEFAULT_FAQS: FAQ[] = [
+  {
+    category: "سفارش‌ها",
+    question: "چطور می‌توانم سفارشم را پیگیری کنم؟",
+    answer:
+      "با ورود به حساب کاربری و مشاهده تاریخچه سفارش‌ها می‌توانید وضعیت سفارش را پیگیری کنید. پس از ارسال، به‌روزرسانی‌های پیگیری از طریق ایمیل نیز دریافت می‌کنید.",
+  },
+  {
+    category: "سفارش‌ها",
+    question: "آیا می‌توانم سفارشم را ویرایش یا لغو کنم؟",
+    answer:
+      "تا ۱ ساعت پس از ثبت سفارش، امکان ویرایش یا لغو وجود دارد. پس از آن با تیم پشتیبانی تماس بگیرید تا در صورت امکان کمک کنیم.",
+  },
+  {
+    category: "ارسال",
+    question: "گزینه‌های ارسال شما چیست؟",
+    answer:
+      "ارسال عادی (۵ تا ۷ روز کاری)، ارسال سریع (۲ تا ۳ روز کاری) و تحویل روز بعد در برخی مناطق ارائه می‌شود.",
+  },
+  {
+    category: "ارسال",
+    question: "آیا به خارج از کشور هم ارسال دارید؟",
+    answer:
+      "بله! به بیش از ۵۰ کشور در سراسر جهان ارسال می‌کنیم. هزینه و زمان تحویل بسته به مقصد متفاوت است.",
+  },
+  {
+    category: "بازگشت",
+    question: "سیاست بازگشت کالا چیست؟",
+    answer:
+      "تا ۳۰ روز پس از تحویل، بازگشت رایگان داریم. کالا باید استفاده‌نشده، بدون شست‌وشو و با برچسب اصلی باشد.",
+  },
+  {
+    category: "بازگشت",
+    question: "چطور درخواست بازگشت بدهم؟",
+    answer:
+      "وارد حساب کاربری شوید، به تاریخچه سفارش‌ها بروید، کالای موردنظر را انتخاب کنید و مراحل را دنبال کنید. برچسب ارسال پیش‌پرداخت‌شده از طریق ایمیل برایتان ارسال می‌شود.",
+  },
+];
+
+const Help2 = ({
+  title = "چطور می‌توانیم کمک کنیم؟",
+  description = "پاسخ سوالات رایج را بیابید یا با تیم پشتیبانی تماس بگیرید.",
+  faqs = DEFAULT_FAQS,
+  contactTitle = "هنوز به کمک نیاز دارید؟",
+  contactDescription = "تیم پشتیبانی ما در کنار شماست.",
+  className,
+}: Help2Props) => {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredFaqs = useMemo(() => {
+    if (!searchQuery.trim()) return faqs;
+    const query = searchQuery.toLowerCase();
+    return faqs.filter(
+      (faq) =>
+        faq.question.toLowerCase().includes(query) ||
+        faq.answer.toLowerCase().includes(query),
+    );
+  }, [faqs, searchQuery]);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl">
+          <div className="mb-10 text-center">
+            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+              {title}
+            </h1>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+
+          <div className="relative mb-8">
+            <Search className="absolute top-1/2 start-3 size-5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="جستجو در پاسخ‌ها..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="ps-10"
+            />
+          </div>
+
+          <Accordion type="single" collapsible className="mb-16">
+            {filteredFaqs.length > 0 ? (
+              filteredFaqs.map((faq, index) => (
+                <AccordionItem key={index} value={`item-${index}`}>
+                  <AccordionTrigger className="text-start">
+                    {faq.question}
+                  </AccordionTrigger>
+                  <AccordionContent className="text-muted-foreground">
+                    {faq.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))
+            ) : (
+              <p className="py-8 text-center text-muted-foreground">
+                نتیجه‌ای برای «{searchQuery}» یافت نشد.
+              </p>
+            )}
+          </Accordion>
+
+          <div className="rounded-xl bg-muted/50 p-8">
+            <div className="mb-6 text-center">
+              <h2 className="mb-2 text-xl font-semibold">{contactTitle}</h2>
+              <p className="text-sm text-muted-foreground">
+                {contactDescription}
+              </p>
+            </div>
+            <div className="grid gap-3 sm:grid-cols-3">
+              <Button variant="outline" className="w-full bg-background">
+                <MessageSquare className="me-2 size-4" />
+                چت زنده
+              </Button>
+              <Button variant="outline" className="w-full bg-background">
+                <Mail className="me-2 size-4" />
+                به ما ایمیل بزنید
+              </Button>
+              <Button variant="outline" className="w-full bg-background">
+                <Phone className="me-2 size-4" />
+                با ما تماس بگیرید
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Help2 };
diff --git a/blocks/help3.tsx b/blocks/help3.tsx
new file mode 100644
index 0000000..763992d
--- /dev/null
+++ b/blocks/help3.tsx
@@ -0,0 +1,312 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderIcon, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const contactFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("لطفاً یک ایمیل معتبر وارد کنید"),
+  subject: z.string().min(1, "موضوع الزامی است"),
+  message: z.string().min(1, "پیام الزامی است"),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface FAQ {
+  question: string;
+  answer: string;
+  category?: string;
+}
+
+interface Help3Props {
+  title?: string;
+  description?: string;
+  faqs?: FAQ[];
+  formTitle?: string;
+  formDescription?: string;
+  className?: string;
+  onSubmit?: (data: ContactFormData) => Promise<void>;
+}
+
+const Help3 = ({
+  title = "راهنمای کاربران",
+  description = "در پایگاه دانش جستجو کنید یا درخواست خود را در پایین ثبت کنید.",
+  faqs = [
+    {
+      question: "چطور رمز عبورم را بازنشانی کنم؟",
+      answer:
+        "روی لینک «فراموشی رمز عبور» در صفحه ورود کلیک کنید. ایمیل خود را وارد کنید تا لینک بازنشانی برایتان ارسال شود. این لینک پس از ۲۴ ساعت منقضی می‌شود.",
+      category: "حساب کاربری",
+    },
+    {
+      question: "چطور پلن خود را ارتقا بدهم؟",
+      answer:
+        "به تنظیمات > صورتحساب > تغییر پلن بروید. پلن جدید را انتخاب و تأیید کنید. مابه‌التفاوت به‌صورت تناسبی بلافاصله از کارت شما کسر می‌شود.",
+      category: "صورتحساب",
+    },
+    {
+      question: "آیا می‌توانم داده‌هایم را خروجی بگیرم؟",
+      answer:
+        "بله، به تنظیمات > داده‌ها > خروجی بروید. می‌توانید همه داده‌ها را در قالب CSV یا JSON دریافت کنید. خروجی‌های حجیم ممکن است چند دقیقه زمان ببرند.",
+      category: "حساب کاربری",
+    },
+    {
+      question: "چه روش‌های پرداختی را قبول می‌کنید؟",
+      answer:
+        "کارت‌های اعتباری اصلی (Visa، Mastercard، American Express)، PayPal و برای پلن‌های سالانه بالای ۱٬۰۰۰ دلار، انتقال بانکی را می‌پذیریم.",
+      category: "صورتحساب",
+    },
+    {
+      question: "چطور اشتراکم را لغو کنم؟",
+      answer:
+        "به تنظیمات > صورتحساب > لغو اشتراک بروید. دسترسی شما تا پایان دوره فعلی صورتحساب ادامه دارد و هر زمان می‌توانید دوباره فعال کنید.",
+      category: "صورتحساب",
+    },
+    {
+      question: "آیا داده‌های من امن است؟",
+      answer:
+        "بله، از رمزنگاری استاندارد صنعتی (AES-256) برای داده‌های ذخیره‌شده و TLS 1.3 برای داده‌های در حال انتقال استفاده می‌کنیم. گواهی SOC 2 Type II داریم.",
+      category: "امنیت",
+    },
+  ],
+  formTitle = "پاسخ خود را پیدا نکردید؟",
+  formDescription = "درخواست خود را ثبت کنید؛ تیم ما ظرف ۲۴ ساعت پاسخ می‌دهد.",
+  className,
+  onSubmit,
+}: Help3Props) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const filteredFaqs = useMemo(() => {
+    if (!searchQuery.trim()) return faqs;
+    const query = searchQuery.toLowerCase();
+    return faqs.filter(
+      (faq) =>
+        faq.question.toLowerCase().includes(query) ||
+        faq.answer.toLowerCase().includes(query),
+    );
+  }, [faqs, searchQuery]);
+
+  const form = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      email: "",
+      subject: "",
+      message: "",
+    },
+  });
+
+  const handleFormSubmit = async (data: ContactFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit(data);
+      } else {
+        console.log("Form submitted:", data);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl">
+          <div className="mb-10 text-center">
+            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+              {title}
+            </h1>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+
+          <div className="relative mb-8">
+            <Search className="absolute top-1/2 start-3 size-5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="جستجو در پاسخ‌ها..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="ps-10"
+            />
+          </div>
+
+          <Accordion type="single" collapsible className="mb-16">
+            {filteredFaqs.length > 0 ? (
+              filteredFaqs.map((faq, index) => (
+                <AccordionItem key={index} value={`item-${index}`}>
+                  <AccordionTrigger className="text-start">
+                    <div className="flex items-center gap-3">
+                      {faq.category && (
+                        <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
+                          {faq.category}
+                        </span>
+                      )}
+                      <span>{faq.question}</span>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="text-muted-foreground">
+                    {faq.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))
+            ) : (
+              <p className="py-8 text-center text-muted-foreground">
+                نتیجه‌ای برای «{searchQuery}» یافت نشد.
+              </p>
+            )}
+          </Accordion>
+
+          <div className="rounded-xl bg-muted/50 p-8">
+            <div className="mb-6 text-center">
+              <h2 className="mb-2 text-xl font-semibold">{formTitle}</h2>
+              <p className="text-sm text-muted-foreground">{formDescription}</p>
+            </div>
+
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  درخواست شما ثبت شد. به‌زودی با شما تماس می‌گیریم!
+                </p>
+              </div>
+            )}
+
+            <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+              <FieldGroup>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <Controller
+                    control={form.control}
+                    name="email"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          ایمیل <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          type="email"
+                          aria-invalid={fieldState.invalid}
+                          placeholder="you@example.com"
+                          className="bg-background"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="subject"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          موضوع <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="خلاصه موضوع"
+                          className="bg-background"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                </div>
+
+                <Controller
+                  control={form.control}
+                  name="message"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        پیام <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="مشکل یا پرسش خود را با جزئیات بنویسید..."
+                        rows={5}
+                        className="bg-background"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <Button
+                  size="lg"
+                  className="w-full"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="me-2 size-4 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    "ثبت درخواست"
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Help3 };
diff --git a/blocks/help4.tsx b/blocks/help4.tsx
new file mode 100644
index 0000000..161fe53
--- /dev/null
+++ b/blocks/help4.tsx
@@ -0,0 +1,369 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertCircle, LoaderIcon, Paperclip, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const ticketSchema = z.object({
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("لطفاً یک ایمیل معتبر وارد کنید"),
+  category: z.string().min(1, "لطفاً یک دسته انتخاب کنید"),
+  priority: z.string().min(1, "لطفاً یک اولویت انتخاب کنید"),
+  subject: z.string().min(1, "موضوع الزامی است"),
+  description: z.string().min(10, "توضیحات باید حداقل ۱۰ کاراکتر باشد"),
+});
+
+type TicketFormData = z.infer<typeof ticketSchema>;
+
+interface Category {
+  value: string;
+  label: string;
+}
+
+interface Help4Props {
+  title?: string;
+  description?: string;
+  categories?: Category[];
+  className?: string;
+  onSubmit?: (data: TicketFormData & { files: File[] }) => Promise<void>;
+}
+
+const Help4 = ({
+  title = "ثبت تیکت پشتیبانی",
+  description = "مشکل خود را شرح دهید تا در اسرع وقت پاسخ‌گوییم.",
+  categories = [
+    { value: "technical", label: "مشکل فنی" },
+    { value: "billing", label: "صورتحساب و پرداخت" },
+    { value: "account", label: "دسترسی به حساب" },
+    { value: "feature", label: "درخواست ویژگی" },
+    { value: "bug", label: "گزارش باگ" },
+    { value: "other", label: "سایر" },
+  ],
+  className,
+  onSubmit,
+}: Help4Props) => {
+  const [files, setFiles] = useState<File[]>([]);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const form = useForm<TicketFormData>({
+    resolver: zodResolver(ticketSchema),
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: {
+      email: "",
+      category: "",
+      priority: "",
+      subject: "",
+      description: "",
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = Array.from(e.target.files || []);
+    const maxSize = 10 * 1024 * 1024; // 10MB
+    const validFiles = selectedFiles.filter((file) => file.size <= maxSize);
+    setFiles((prev) => [...prev, ...validFiles].slice(0, 5)); // Max 5 files
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleFormSubmit = async (data: TicketFormData) => {
+    try {
+      if (onSubmit) {
+        await onSubmit({ ...data, files });
+      } else {
+        console.log("Ticket submitted:", { ...data, files });
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      setIsSubmitted(true);
+      setShowSuccess(true);
+      form.reset();
+      setFiles([]);
+      setTimeout(() => setShowSuccess(false), 4500);
+      setTimeout(() => setIsSubmitted(false), 5000);
+    } catch {
+      form.setError("root", {
+        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
+      });
+    }
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes.toLocaleString("fa-IR")} بایت`;
+    if (bytes < 1024 * 1024)
+      return `${(bytes / 1024).toLocaleString("fa-IR", { maximumFractionDigits: 1 })} کیلوبایت`;
+    return `${(bytes / (1024 * 1024)).toLocaleString("fa-IR", { maximumFractionDigits: 1 })} مگابایت`;
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-2xl">
+          <div className="mb-10 text-center">
+            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
+              {title}
+            </h1>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+
+          <div className="rounded-xl border bg-background p-8">
+            {isSubmitted && (
+              <div
+                className={cn(
+                  "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
+                  showSuccess ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <p className="text-sm font-medium text-green-600 dark:text-green-400">
+                  تیکت شما ثبت شد. ایمیل تأیید برایتان ارسال می‌شود.
+                </p>
+              </div>
+            )}
+
+            <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+              <FieldGroup>
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        آدرس ایمیل{" "}
+                        <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        type="email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="you@example.com"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <Controller
+                    control={form.control}
+                    name="category"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          دسته‌بندی{" "}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          defaultValue={field.value}
+                        >
+                          <SelectTrigger id={field.name}>
+                            <SelectValue placeholder="انتخاب دسته" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {categories.map((cat) => (
+                              <SelectItem key={cat.value} value={cat.value}>
+                                {cat.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    control={form.control}
+                    name="priority"
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          اولویت <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          defaultValue={field.value}
+                        >
+                          <SelectTrigger id={field.name}>
+                            <SelectValue placeholder="انتخاب اولویت" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="low">کم</SelectItem>
+                            <SelectItem value="medium">متوسط</SelectItem>
+                            <SelectItem value="high">بالا</SelectItem>
+                            <SelectItem value="urgent">
+                              <span className="flex items-center gap-2">
+                                <AlertCircle className="size-4 text-destructive" />
+                                فوری
+                              </span>
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                </div>
+
+                <Controller
+                  control={form.control}
+                  name="subject"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        موضوع <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="خلاصه‌ای از مشکل خود"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <Controller
+                  control={form.control}
+                  name="description"
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor={field.name}>
+                        توضیحات <span className="text-destructive">*</span>
+                      </FieldLabel>
+                      <Textarea
+                        {...field}
+                        id={field.name}
+                        aria-invalid={fieldState.invalid}
+                        placeholder="لطفاً تا حد امکان جزئیات را بنویسید..."
+                        rows={6}
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <div>
+                  <FieldLabel>پیوست‌ها</FieldLabel>
+                  <p className="mb-3 text-xs text-muted-foreground">
+                    حداکثر ۵ فایل (هر کدام تا ۱۰ مگابایت). فرمت‌های مجاز:
+                    تصویر، پی‌دی‌اف و فایل متنی.
+                  </p>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    onChange={handleFileChange}
+                    accept="image/*,.pdf,.txt,.doc,.docx"
+                    className="hidden"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={files.length >= 5}
+                  >
+                    <Paperclip className="me-2 size-4" />
+                    پیوست فایل
+                  </Button>
+
+                  {files.length > 0 && (
+                    <div className="mt-4 space-y-2">
+                      {files.map((file, index) => (
+                        <div
+                          key={index}
+                          className="flex items-center justify-between rounded-lg border bg-muted/50 px-3 py-2"
+                        >
+                          <div className="flex items-center gap-2 overflow-hidden">
+                            <Paperclip className="size-4 shrink-0 text-muted-foreground" />
+                            <span className="truncate text-sm">
+                              {file.name}
+                            </span>
+                            <span className="shrink-0 text-xs text-muted-foreground">
+                              ({formatFileSize(file.size)})
+                            </span>
+                          </div>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeFile(index)}
+                            className="size-8 p-0"
+                          >
+                            <X className="size-4" />
+                            <span className="sr-only">حذف فایل</span>
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {form.formState.errors.root && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.root.message}
+                  </p>
+                )}
+
+                <Button
+                  size="lg"
+                  className="w-full"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <LoaderIcon className="me-2 size-4 animate-spin" />
+                      در حال ارسال...
+                    </>
+                  ) : (
+                    "ثبت تیکت"
+                  )}
+                </Button>
+              </FieldGroup>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Help4 };
diff --git a/blocks/hero1.tsx b/blocks/hero1.tsx
new file mode 100644
index 0000000..d4595c7
--- /dev/null
+++ b/blocks/hero1.tsx
@@ -0,0 +1,92 @@
+import { ArrowRight, ArrowUpRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero1Props {
+  badge?: string;
+  heading: string;
+  description: string;
+  buttons?: {
+    primary?: {
+      text: string;
+      url: string;
+    };
+    secondary?: {
+      text: string;
+      url: string;
+    };
+  };
+  image: {
+    src: string;
+    alt: string;
+  };
+  className?: string;
+}
+
+const Hero1 = ({
+  badge = "پلتفرم توسعه رابط کاربری",
+  heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه سریع رابط کاربری",
+  description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید بدون نیاز به طراحی از ابتدا، مستقیماً در پروژه‌های خود استفاده کنید.",
+  buttons = {
+    primary: {
+      text: "مشاهده همه بلاک‌ها",
+      url: "https://www.ShadcnBlocks",
+    },
+    secondary: {
+      text: "مشاهده مخزن مخزن کد",
+      url: "https://www.ShadcnBlocks",
+    },
+  },
+  image = {
+    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    alt: "پیش‌نمایش بخش اصلی صفحه",
+  },
+  className,
+}: Hero1Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-6 lg:grid-cols-2 lg:gap-12">
+          <div className="flex flex-col items-center gap-5 text-center lg:items-start lg:text-start">
+            {badge && (
+              <Badge variant="outline">
+                {badge}
+                <ArrowUpRight className="ms-2 size-4" />
+              </Badge>
+            )}
+            <h1 className="text-xl font-bold text-pretty lg:text-2xll">
+              {heading}
+            </h1>
+            <p className="max-w-xl text-muted-foreground lg:text-xl">
+              {description}
+            </p>
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              {buttons.primary && (
+                <Button asChild className="w-full sm:w-auto">
+                  <a href={buttons.primary.url}>{buttons.primary.text}</a>
+                </Button>
+              )}
+              {buttons.secondary && (
+                <Button asChild variant="outline" className="w-full sm:w-auto">
+                  <a href={buttons.secondary.url}>
+                    {buttons.secondary.text}
+                    <ArrowRight className="size-4 rtl:rotate-180" />
+                  </a>
+                </Button>
+              )}
+            </div>
+          </div>
+          <img
+            src={image.src}
+            alt={image.alt}
+            className="aspect-video w-full rounded-md object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero1 };
diff --git a/blocks/hero10.tsx b/blocks/hero10.tsx
new file mode 100644
index 0000000..094e734
--- /dev/null
+++ b/blocks/hero10.tsx
@@ -0,0 +1,81 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+/*
+ * pattern generated at https://www.fffuel.co/ooorganize/
+ */
+
+interface Hero10Props {
+  className?: string;
+}
+
+const Hero10 = ({ className }: Hero10Props) => {
+  return (
+    <section className={cn("relative p-0", className)}>
+      <div className="absolute h-full w-full bg-[url('/block-media/shadcnblocks/block/patterns/grid1.svg')] [mask-image:linear-gradient(to_right,theme(colors.border),transparent,transparent,theme(colors.border))] bg-contain bg-repeat opacity-100 lg:block"></div>
+      <div className="container py-28 md:py-32">
+        <div className="mx-auto flex max-w-5xl flex-col items-center">
+          <div className="z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
+            <Badge variant="outline" className="rounded-sm shadow-sm">
+              نسخه جدید منتشر شد
+                                      </Badge>
+            <div>
+              <h1 className="mb-6 text-xl font-bold tracking-tight text-pretty md:text-2xll lg:text-2xll">
+                همه ابزارهای موردنیاز برای توسعه رابط کاربری
+                                            </h1>
+              <p className="mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl">
+                کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
+                                            </p>
+            </div>
+
+            <div className="mt-6 flex items-center gap-4">
+              <Button>شروع رایگان</Button>
+              <Button variant="outline">آشنایی بیشتر</Button>
+            </div>
+
+            <div className="mt-12 flex flex-col items-center gap-4 lg:mt-16">
+              <p className="text-center text-sm text-muted-foreground">
+                زیرساختی مناسب برای ساخت محصولات مدرن و مقیاس‌پذیر
+                                            </p>
+              <div className="grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+                  alt="لوگوی ری یو آی"
+                  className="h-6 dark:invert"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
+                  alt="لوگوی میزبانی ابری"
+                  className="h-5 dark:invert"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/supabase-wordmark.svg"
+                  alt="لوگوی پایگاه داده ابری"
+                  className="h-6 dark:hidden"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/supabase-wordmark-dark.svg"
+                  alt="لوگوی پایگاه داده ابری"
+                  className="hidden h-6 dark:block"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
+                  alt="لوگوی استایل‌دهی مدرن"
+                  className="h-5 dark:hidden"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
+                  alt="لوگوی استایل‌دهی مدرن"
+                  className="hidden h-5 dark:block"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero10 };
diff --git a/blocks/hero100.tsx b/blocks/hero100.tsx
new file mode 100644
index 0000000..af1a8c7
--- /dev/null
+++ b/blocks/hero100.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero100Props {
+  className?: string;
+}
+
+const Hero100 = ({ className }: Hero100Props) => {
+  return (
+    <section className={cn("overflow-hidden font-sans", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-between gap-10 md:flex-row">
+          <div className="basis-2/4">
+            <div className="mt-10 flex flex-col gap-2">
+              <p className="text-base font-semibold text-muted-foreground">
+                نرم‌افزار مدیریت ارتباط با مشتری
+              </p>
+              <h1 className="mb-2 text-xl leading-snug! font-medium text-black lg:text-2xll">
+                همه اطلاعات مشتریان در یک پلتفرم
+                                            </h1>
+              <p className="mb-2 text-lg text-black/80">
+                سوابق مشتریان، تعاملات، فرصت‌های فروش و اطلاعات سازمانی را به‌صورت یکپارچه مدیریت کنید.
+                                            </p>
+              <Button
+                asChild
+                variant="default"
+                className="block h-fit w-fit rounded-full px-7 py-3 text-base font-semibold transition-transform hover:scale-105"
+              >
+                <a href="#">رایگان امتحان کنید</a>
+              </Button>
+            </div>
+          </div>
+          <div className="relative basis-[42%] py-9 md:py-16">
+            <div className="aspect-square w-full overflow-hidden">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt=""
+                className="relative z-20 h-full w-full object-cover object-center"
+              />
+              <div className="absolute top-0 left-[6.25rem] z-10 aspect-[1.378254211/1] h-full w-[56.25rem] bg-muted" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero100 };
diff --git a/blocks/hero101.tsx b/blocks/hero101.tsx
new file mode 100644
index 0000000..999a840
--- /dev/null
+++ b/blocks/hero101.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { PlayIcon } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero101Props {
+  className?: string;
+}
+
+const Hero101 = ({ className }: Hero101Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState<boolean>(false);
+  return (
+    <>
+      <section
+        className={cn(
+          "relative overflow-hidden border border-b pt-40 pb-10 font-sans shadow-[inset_0_-4px_10px_var(--color-primary)] before:absolute before:-top-[88%] before:left-1/2 before:block before:h-[200%] before:w-[200%] before:-translate-x-1/2 before:bg-[radial-gradient(var(--color-violet-100)_15%,var(--color-transparent)_20%,var(--color-yellow-50)_30%,var(--color-transparent)_50%,var(--color-cyan-50)_60%)] before:bg-cover before:bg-no-repeat before:opacity-55 before:content-['']",
+          className,
+        )}
+      >
+        <div className="relative z-20 container max-w-[84rem]">
+          <div className="mx-auto flex max-w-[54.375rem] flex-col items-center gap-4">
+            <h1 className="text-center text-xl leading-none font-bold text-black sm:text-2xll md:text-[4rem]">
+              مدیریت کاربران و احراز هویت
+                                      </h1>
+            <p className="text-center text-base text-muted-foreground md:text-lg">
+              تمام ابزارهای موردنیاز برای ثبت‌نام، ورود، احراز هویت و مدیریت کاربران را در یک سامانه در اختیار داشته باشید.
+                                      </p>
+            <div className="flex flex-col items-center gap-3 pt-4 md:flex-row">
+              <Button
+                asChild
+                variant="default"
+                className="border px-3 py-1.5 text-sm font-medium"
+              >
+                <a href="#">رایگان شروع کنید</a>
+              </Button>
+              <Button
+                asChild
+                variant="ghost"
+                onClick={() => setIsVideoOpen(true)}
+                className="flex w-fit items-center gap-3 hover:bg-transparent"
+              >
+                <a href="#">
+                  <div className="relative h-7 w-7 rounded-full p-[3px] before:absolute before:top-0 before:left-0 before:block before:h-full before:w-full before:animate-[spin_5s_ease-in-out_infinite] before:rounded-full before:bg-linear-to-r before:from-primary before:to-transparent before:content-['']">
+                    <div className="relative z-20 flex h-full w-full rounded-full bg-background">
+                      <PlayIcon className="m-auto h-3! w-3! fill-primary stroke-primary" />
+                    </div>
+                  </div>
+                  <p className="text-sm/5 font-medium text-primary">
+                    تماشای دمو{" "}
+                    <span className="ms-1 text-xs text-muted-foreground">
+                      ۲ دقیقه
+                    </span>
+                  </p>
+                </a>
+              </Button>
+            </div>
+          </div>
+          <div className="mx-auto mt-20 max-w-[60rem] lg:max-w-full">
+            <div className="flex w-full flex-col items-center justify-between gap-6 md:flex-row">
+              <div className="flex flex-1 flex-wrap items-center justify-center gap-x-6 gap-y-2">
+                {Array(7)
+                  .fill(null)
+                  .map((_, i) => (
+                    <img
+                      key={`hero101-${i}`}
+                      src={`/block-media/shadcnblocks/block/logos/company/fictional-company-logo-$%7B++i}.svg`}
+                      alt=""
+                      className="h-6 w-28 object-contain object-center"
+                    />
+                  ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[50rem]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <AspectRatio ratio={16 / 9}>
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </AspectRatio>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export { Hero101 };
diff --git a/blocks/hero103.tsx b/blocks/hero103.tsx
new file mode 100644
index 0000000..d1b4d23
--- /dev/null
+++ b/blocks/hero103.tsx
@@ -0,0 +1,194 @@
+"use client";
+import AutoScroll from "embla-carousel-auto-scroll";
+import Autoplay from "embla-carousel-autoplay";
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Hero103Props {
+  className?: string;
+}
+
+const Hero103 = ({ className }: Hero103Props) => {
+  return (
+    <section
+      className={cn(
+        "dark bg-background bg-[url('/block-media/shadcnblocks/block/patterns/noise.png')] py-12 font-sans md:py-20",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8">
+          <div>
+            <div className="flex flex-col gap-3">
+              <h1 className="text-xl leading-tight text-foreground md:text-2xll lg:text-[3.5rem]">
+                مدیریت هوشمند صورتحساب و اشتراک
+                                            </h1>
+              <p className="mb-5 text-lg text-foreground">
+                مدل‌های قیمت‌گذاری، اشتراک و صورتحساب را متناسب با رشد محصول خود مدیریت کنید.
+                                            </p>
+              <div>
+                <div className="flex flex-col items-center gap-4 lg:flex-row">
+                  <div className="shrink-0">
+                    <Button
+                      asChild
+                      className="block h-fit w-fit rounded-full px-6 py-3.5 font-mono text-[0.8125rem] leading-4 font-medium tracking-widest uppercase"
+                    >
+                      <a href="#">درخواست دمو</a>
+                    </Button>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    asChild
+                    className="group flex h-fit items-center gap-2"
+                  >
+                    <a href="#">
+                      <p className="font-mono text-sm font-medium text-foreground uppercase">
+                        راهنمای قیمت‌گذاری مبتنی بر مصرف
+                      </p>
+                      <ChevronRight className="h-4 w-4 shrink-0 stroke-foreground transition-transform group-hover:translate-x-2 rtl:rotate-180 rtl:group-hover:-translate-x-2" />
+                    </a>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="relative mr-auto ml-auto aspect-[1.28581291/1] w-full max-w-[37.25rem] lg:mr-0 lg:ml-auto">
+              <div className="relative mx-auto aspect-[1.020365896/1] h-full w-[79.35%] max-w-[29.5625rem] overflow-hidden rounded-3xl">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt=""
+                  className="relative z-10 w-full object-cover"
+                />
+              </div>
+              <div className="absolute top-[19.84%] -left-[-2%] z-30 aspect-[1.765043789/1] w-[30.49%] max-w-[11.875rem] overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+              <div className="absolute top-[55%] left-[0%] z-30 aspect-[1.776555024/1] w-[43.6%] max-w-[16.375rem] overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+              <div className="absolute top-[40%] right-[0%] z-30 aspect-[1.170212766/1] w-[26.48%] max-w-[10.3125rem] overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center gap-8 pt-28">
+        <p className="px-5 text-center font-mono text-sm font-medium text-foreground uppercase">
+          مورد اعتماد سریع‌رشدترین استارتاپ‌ها و شرکت‌ها
+        </p>
+        <Carousel
+          opts={{
+            loop: true,
+            align: "center",
+          }}
+          plugins={[
+            AutoScroll({
+              speed: 1,
+            }),
+            Autoplay({
+              playOnInit: true,
+              delay: 1000,
+            }),
+          ]}
+          className="relative w-full max-w-(--breakpoint-2xl) overflow-hidden"
+        >
+          <CarouselContent className="items-center">
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/react-wordmark-white.svg"
+                alt=""
+                className="h-8 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark-white.svg"
+                alt=""
+                className="h-8 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/supabase-wordmark-white.svg"
+                alt=""
+                className="h-8 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-white.svg"
+                alt=""
+                className="h-6 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/vercel-wordmark-white.svg"
+                alt=""
+                className="h-6 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/react-wordmark-white.svg"
+                alt=""
+                className="h-8 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark-white.svg"
+                alt=""
+                className="h-8 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/supabase-wordmark-white.svg"
+                alt=""
+                className="h-8 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-white.svg"
+                alt=""
+                className="h-6 w-full object-fill"
+              />
+            </CarouselItem>
+            <CarouselItem className="w-fit basis-auto px-7">
+              <img
+                src="/block-media/shadcnblocks/block/logos/vercel-wordmark-white.svg"
+                alt=""
+                className="h-6 w-full object-fill"
+              />
+            </CarouselItem>
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Hero103 };
diff --git a/blocks/hero104.tsx b/blocks/hero104.tsx
new file mode 100644
index 0000000..2d100c3
--- /dev/null
+++ b/blocks/hero104.tsx
@@ -0,0 +1,182 @@
+"use client";
+import { Check, Play, Star, Zap } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero104Props {
+  className?: string;
+}
+
+const Hero104 = ({ className }: Hero104Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <section className={cn("py-12 md:py-20", className)}>
+        <div className="container max-w-[75rem]">
+          <div className="flex gap-8">
+            <div className="mx-auto max-w-[50rem] lg:max-w-full">
+              <h1 className="font-poppins mb-[0.625rem] text-center text-2xll leading-tight font-semibold tracking-[-1px] sm:text-[3.375rem] md:text-[5.625rem] md:leading-[6.18rem] lg:text-start">
+                نتایج بهتر با تلاش کمتر
+                                            </h1>
+              <p className="mb-10 text-center text-xl leading-9 font-medium lg:text-start">
+                کمپین‌های تبلیغاتی را هوشمندانه مدیریت کنید و بازده سرمایه‌گذاری را افزایش دهید.
+                                            </p>
+              <div className="flex flex-col items-center justify-center gap-5 sm:flex-row lg:justify-normal">
+                <Button
+                  variant="default"
+                  asChild
+                  className="h-fit w-full rounded-lg border-2 border-primary px-8 py-4 text-lg font-semibold sm:w-fit"
+                >
+                  <a href="#">رایگان امتحان کنید</a>
+                </Button>
+                <Button
+                  variant="ghost"
+                  asChild
+                  className="h-fit w-full rounded-lg border-2 px-8 py-4 text-lg font-semibold hover:border-primary hover:bg-transparent sm:w-fit"
+                >
+                  <a href="#">رزرو دمو</a>
+                </Button>
+              </div>
+              <div className="mt-6 flex flex-wrap justify-center gap-7 lg:justify-normal">
+                {[
+                  "آزمایش رایگان ۳۰ روزه",
+                  "نیاز به کارت اعتباری نیست",
+                  "لغو در هر زمان",
+                ].map((text, i) => (
+                  <div key={`${i}`} className="flex items-center gap-2">
+                    <Check className="h-3 w-3 stroke-muted-foreground" />
+                    <p className="text-sm text-muted-foreground">{text}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="hidden lg:block">
+              <div className="grid grid-cols-[repeat(2,10.375rem)] grid-rows-[2.4375rem_7.18rem_3.187rem_7.125rem_3.75rem_4.625rem] gap-x-8 gap-y-[1.375rem] bg-[radial-gradient(closest-side,var(--color-gray-300),var(--color-transparent))] bg-[length:100%_100%] bg-center bg-no-repeat">
+                <div className="relative col-[1/2] row-[1/3]">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt=""
+                    className="object-fit h-full w-full rounded-2xl opacity-80 blur-md"
+                  />
+                  <div className="absolute bottom-0 flex min-w-[15rem] gap-3 rounded-2xl bg-background p-3 shadow-2xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/avatar-1.webp"
+                      alt=""
+                      className="object-fit h-11 w-11 rounded-full border object-center opacity-80"
+                    />
+                    <div>
+                      <div className="flex items-center gap-1">
+                        <Zap className="h-4 w-4 fill-violet-600 stroke-violet-600" />
+                        <div className="text-sm font-semibold text-violet-600">
+                          قواعد هوشمند
+                                                                          </div>
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        توقف خودکار تبلیغات کم‌بازده
+                                                                    </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-[2/3] row-[2/4]">
+                  <div className="flex h-full w-full flex-col justify-between rounded-2xl bg-background p-2 shadow-lg">
+                    <div className="h-5 w-5 rounded-full bg-black/10"></div>
+                    <div className="flex h-[9.18rem] w-[9.375rem] rounded-2xl bg-[url('/block-media/shadcnblocks/block/placeholder-2.svg')] bg-cover bg-center bg-no-repeat">
+                      <Button
+                        variant="default"
+                        size="icon"
+                        className="m-auto flex h-10 w-10 rounded-full bg-black"
+                        onClick={() => setIsVideoOpen(true)}
+                      >
+                        <Play className="m-auto fill-white" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-[1/2] row-[3/5]">
+                  <div className="flex h-full w-full flex-col justify-between rounded-2xl bg-background p-2 shadow-lg">
+                    <div className="h-5 w-5 rounded-full bg-black/10"></div>
+                    <div className="flex h-[9.18rem] w-[9.375rem] rounded-2xl bg-[url('/block-media/shadcnblocks/block/placeholder-3.svg')] bg-cover bg-center bg-no-repeat">
+                      <div className="m-2 mx-auto flex h-fit w-fit items-center gap-1 self-end rounded-xl bg-black p-2 text-white">
+                        <Star className="h-4 w-4" />
+                        <div className="text-xs font-semibold">
+                          استفاده‌شده در صدها کمپین
+                                                                          </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-[2/3] row-[4/-2]">
+                  <div className="flex h-full w-full flex-col justify-between rounded-2xl bg-background p-4 shadow-lg">
+                    <div>
+                      <div className="h-2 w-[80%] rounded-2xl bg-black/10"></div>
+                      <div className="mt-2 h-2 w-[50%] rounded-2xl bg-black/10"></div>
+                    </div>
+                    <div className="relative mx-auto h-[7.5rem] w-[7.5rem]">
+                      <svg
+                        width="120"
+                        height="120"
+                        viewBox="0 0 148 148"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          className="fill-violet-200"
+                          d="M148 74C148 114.869 114.869 148 74 148C33.1309 148 0 114.869 0 74C0 33.1309 33.1309 0 74 0C114.869 0 148 33.1309 148 74ZM13.0735 74C13.0735 107.649 40.3512 134.926 74 134.926C107.649 134.926 134.926 107.649 134.926 74C134.926 40.3512 107.649 13.0735 74 13.0735C40.3512 13.0735 13.0735 40.3512 13.0735 74Z"
+                        />
+                        <path
+                          className="fill-violet-400"
+                          d="M74 0C90.6218 1.98213e-07 106.76 5.59609 119.813 15.8865C132.866 26.177 142.075 40.5625 145.955 56.725C149.836 72.8876 148.161 89.8859 141.203 104.981C134.244 120.076 122.405 132.388 107.595 139.934C92.7852 147.481 75.8657 149.821 59.5633 146.578C43.2609 143.335 28.5249 134.698 17.7299 122.059C6.93495 109.42 0.709615 93.5142 0.0570506 76.9052C-0.595514 60.2962 4.3627 43.9512 14.1328 30.5039L24.7069 38.1865C16.6625 49.2586 12.5801 62.7167 13.1174 76.3921C13.6547 90.0675 18.7804 103.164 27.6687 113.571C36.5571 123.977 48.6902 131.089 62.1132 133.759C75.5362 136.429 89.4672 134.502 101.661 128.289C113.856 122.075 123.603 111.938 129.333 99.5088C135.063 87.08 136.441 73.0841 133.246 59.7763C130.051 46.4685 122.469 34.6238 111.721 26.1509C100.973 17.6781 87.6859 13.0704 74 13.0704L74 0Z"
+                        />
+                        <path
+                          className="fill-violet-600"
+                          d="M74 0C85.678 1.39258e-07 97.1901 2.76383 107.595 8.06552C118 13.3672 127.003 21.0562 133.867 30.5039C140.731 39.9516 145.262 50.8896 147.089 62.4238C148.916 73.958 147.987 85.7608 144.378 96.8672C140.769 107.974 134.583 118.068 126.326 126.326C118.068 134.583 107.974 140.769 96.8673 144.378C85.7609 147.987 73.9581 148.916 62.4239 147.089C50.8897 145.262 39.9516 140.731 30.5039 133.867L38.2046 123.268C45.9797 128.917 54.9812 132.646 64.4734 134.149C73.9655 135.652 83.6787 134.888 92.8188 131.918C101.959 128.948 110.266 123.858 117.062 117.062C123.858 110.266 128.948 101.959 131.918 92.8187C134.888 83.6786 135.652 73.9655 134.149 64.4733C132.646 54.9812 128.917 45.9796 123.268 38.2046C117.619 30.4296 110.21 24.1019 101.647 19.7388C93.0845 15.3758 83.6105 13.1013 74 13.1013L74 0Z"
+                        />
+                      </svg>
+                      <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center font-bold text-black">
+                        $5,782
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-[1/2] row-[-1/-3]">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                    alt=""
+                    className="object-fit h-full w-full rounded-2xl blur-md"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero104 };
diff --git a/blocks/hero107.tsx b/blocks/hero107.tsx
new file mode 100644
index 0000000..6f3ff67
--- /dev/null
+++ b/blocks/hero107.tsx
@@ -0,0 +1,89 @@
+import { MoonStar, Sparkles } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero107Props {
+  className?: string;
+}
+
+const Hero107 = ({ className }: Hero107Props) => {
+  return (
+    <section
+      className={cn("bg-muted bg-cover bg-center py-12 md:py-20", className)}
+    >
+      <div className="container">
+        <div className="flex flex-col justify-between gap-12 lg:flex-row lg:gap-8">
+          <div className="mx-auto flex max-w-[43.75rem] flex-col gap-8 lg:mx-0">
+            <div className="flex flex-col gap-6">
+              <div className="m-auto flex w-fit flex-nowrap items-center gap-2 rounded-3xl border px-4 py-2 lg:m-0">
+                <Sparkles className="size-5" />
+                <div className="text-base font-light">
+                  قالب رایگان لندینگ
+                                                  </div>
+              </div>
+              <h1 className="to-muted2 inline-block bg-linear-to-br from-foreground bg-clip-text text-center font-serif text-xl text-transparent md:text-2xll md:leading-snug lg:text-start">
+                همکار مورداعتماد شما برای خدمات دیجیتال
+              </h1>
+            </div>
+            <div>
+              <div className="mx-auto w-fit lg:mx-0">
+                <Button
+                  asChild
+                  className="group relative grid h-fit overflow-hidden rounded-full px-7 py-5 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset]"
+                >
+                  <a href="#">
+                    <span className="spark mask-gradient absolute inset-0 h-[100%] w-[100%] animate-flip-btn overflow-hidden rounded-full [mask:linear-gradient(white,transparent_50%)] before:absolute before:[inset:0_auto_auto_50%] before:aspect-square before:w-[200%] before:[translate:-50%_-15%] before:rotate-[-90deg] before:animate-rotate-btn before:bg-[conic-gradient(from_0deg,transparent_0_340deg,var(--color-muted)_360deg)] before:content-['']" />
+                    <span className="backdrop absolute inset-[2.5px] rounded-full bg-black transition-colors duration-200 group-hover:bg-slate-900" />
+                    <span className="text z-10 text-center font-medium text-white">
+                      مشاهده جزئیات
+                                                              </span>
+                  </a>
+                </Button>
+              </div>
+              <div
+                className="my-9 h-[1px] w-full bg-black"
+                style={{
+                  background:
+                    "linear-gradient(270deg, rgba(234, 232, 225, .2) 0%, rgba(17, 16, 17, .2) 50%, rgba(17, 16, 17, 0) 100%)",
+                }}
+              />
+              <p className="mx-auto w-full max-w-[30rem] text-center text-lg font-light text-foreground lg:mx-0 lg:text-start">
+                به استارتاپ‌ها و برندها در ساخت راه‌حل‌های مؤثر و جذاب برای
+                نیازهای نرم‌افزاری کمک می‌کنیم.
+              </p>
+            </div>
+          </div>
+          <div className="mx-auto w-full max-w-[31.25rem]">
+            <div className="relative mx-auto w-full max-w-full lg:mx-0">
+              <div className="w-full overflow-hidden rounded-3xl">
+                <AspectRatio ratio={1}>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                    alt="تصویر مربعی"
+                    className="size-full object-cover"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="absolute right-0 bottom-0">
+                <Button
+                  asChild
+                  variant="secondary"
+                  className="m-4 flex h-fit items-center gap-2 rounded-xl px-5 py-4 text-xl font-semibold shadow-md"
+                >
+                  <a href="#">
+                    <MoonStar className="size-6!" />
+                    <div>شروع همکاری</div>
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero107 };
diff --git a/blocks/hero108.tsx b/blocks/hero108.tsx
new file mode 100644
index 0000000..e8b7979
--- /dev/null
+++ b/blocks/hero108.tsx
@@ -0,0 +1,97 @@
+import { ArrowRight, Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero108Props {
+  className?: string;
+}
+
+const Hero108 = ({ className }: Hero108Props) => {
+  return (
+    <section
+      className={cn("bg-background py-12 font-sans md:py-20", className)}
+    >
+      <div className="container flex flex-col items-center gap-8 lg:flex-row">
+        <div className="flex flex-col gap-10">
+          <h1 className="text-2xll font-semibold text-foreground md:text-2xll">
+            درآمد غیرفعال{" "}
+            <span className="relative inline-block">
+              <span>کسب کنید</span>
+              <svg
+                width="240"
+                className="pointer-events-none absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform fill-accent md:block"
+                viewBox="0 0 191 75"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M99.7039 69.4796C106.054 68.9325 112.377 68.1885 118.645 67.2402C124.566 66.3358 130.477 65.3219 136.279 64.0016L138.463 63.5275L140.628 63.0023C142.072 62.6449 143.516 62.3093 144.95 61.9373C147.801 61.1568 150.688 60.4201 153.484 59.5594C159.085 57.8744 164.467 55.8977 169.273 53.3374C171.676 52.0609 173.887 50.6167 175.888 49.0192C177.871 47.4364 179.598 45.6858 180.996 43.7528C181.27 43.3589 181.526 42.9504 181.754 42.5419L182.384 41.2873L182.33 41.353C185.089 36.5169 185.738 30.9733 183.179 26.3195C180.685 21.6148 175.276 18.026 169.108 15.5241C165.508 14.0871 161.671 12.92 157.705 11.9864C153.722 11.0892 149.601 10.2649 145.498 9.59385C137.266 8.23712 128.906 7.3764 120.518 7.0044C103.724 6.26038 86.8024 7.47123 70.4198 10.564C69.1315 10.7755 67.6422 11.1183 66.1163 11.4247C64.5904 11.7457 63.0098 12.0082 61.6118 12.2854C58.7976 12.796 56.5316 12.9565 56.2757 12.1541C55.7275 10.5421 61.1366 7.82864 70.3832 6.04885C75.9568 4.94013 81.6309 4.18152 87.3049 3.53963C90.1557 3.28433 92.9974 2.96339 95.8664 2.82479C97.3009 2.74456 98.7262 2.62785 100.161 2.5695L104.455 2.41632C105.89 2.35067 107.315 2.35067 108.749 2.34337C110.184 2.34337 111.609 2.3069 113.044 2.32149C115.904 2.40173 118.764 2.39443 121.624 2.5622C127.334 2.76644 133.008 3.29892 138.664 3.86787L144.841 4.65565L150.971 5.64037L157.057 6.82204C159.085 7.24511 161.123 7.72652 163.133 8.27359C167.144 9.37502 171.119 10.688 174.856 12.4751C175.788 12.9273 176.72 13.3723 177.615 13.8902C178.529 14.3716 179.397 14.9186 180.256 15.4803C181.133 16.0201 181.909 16.6693 182.741 17.2601L183.883 18.2448C184.276 18.5658 184.641 18.9086 184.979 19.2733C187.812 22.0889 189.886 25.488 190.617 29.1205C191.403 32.7385 190.928 36.4221 189.667 39.8358C189.009 41.5353 188.177 43.1838 187.172 44.7667C186.14 46.3349 184.961 47.8303 183.645 49.2453C180.95 52.0682 177.716 54.4534 174.216 56.4885C167.921 60.1575 160.858 62.6157 153.841 64.6873C146.805 66.7151 139.66 68.473 132.405 69.9172C117.905 72.8203 103.012 74.4105 88.0817 74.8919C74.0381 75.2639 59.9945 74.695 46.0332 72.886C42.5246 72.39 39.0343 71.7918 35.5714 71.0187C32.1176 70.2236 28.6911 69.2826 25.3469 68.1156C22.0211 66.912 18.7774 65.4969 15.7257 63.7901C12.683 62.0613 9.89625 59.9825 7.49323 57.6118L6.004 56.0363C5.53802 55.4965 5.12691 54.913 4.69748 54.3513L4.05793 53.5052C3.85692 53.2207 3.69236 52.9144 3.50962 52.6153L2.45896 50.8209C1.18892 48.3627 0.430502 45.7441 0.128981 43.1109C-0.163403 40.4777 0.0557155 37.8372 0.640483 35.2842C1.24352 32.7312 2.23958 30.2657 3.50962 27.917C6.08625 23.2341 9.78674 19.0253 14.2456 15.4584C16.475 13.6713 18.8963 12.0374 21.5003 10.6005C22.7978 9.87833 24.141 9.20726 25.5299 8.58725C26.9187 7.98912 28.2982 7.43476 29.7053 6.88769C35.0413 4.90365 40.9804 3.51045 46.1793 1.96407H46.0789C49.4596 1.76713 52.9773 1.11065 56.5316 0.665699C60.0768 0.191574 63.6219 -0.100196 66.8473 0.308281C69.0767 0.235339 71.3519 0.27181 73.4991 0.155102C83.3761 -0.326318 85.9618 0.300987 82.709 2.20478C81.9963 2.62785 82.8461 3.16033 80.4705 3.47398C80.4613 3.47398 80.2878 3.44481 80.2878 3.44481L80.3607 3.47398C77.0531 4.15964 73.3803 4.39306 69.6067 4.53894C65.8423 4.69212 61.9864 4.77236 58.359 5.1006C49.4687 5.91755 40.7155 7.48581 32.7571 10.4327C31.7429 10.7755 30.7927 11.1913 29.8151 11.5998C28.8283 11.9937 27.8962 12.424 26.9825 12.869C25.1551 13.7662 23.41 14.7946 21.7562 15.9034C18.4486 18.1281 15.5156 20.7103 13.076 23.555C8.22428 29.2227 5.31866 36.0792 6.15926 42.7389C6.36941 44.3947 6.79901 46.0213 7.46601 47.5896L8.0141 48.7493C8.21511 49.1286 8.46179 49.5006 8.68108 49.8799L9.34806 51.0106C9.6039 51.3753 9.88727 51.7254 10.1614 52.0755C12.3268 54.9203 15.2871 57.3857 18.7135 59.4135C22.8982 61.9446 27.8048 63.7755 32.8667 65.2343C37.9468 66.6932 43.2829 67.6779 48.6737 68.3927C59.5559 69.8005 70.6391 70.3914 81.6492 70.3038C87.6887 70.1871 93.7008 69.7713 99.8043 69.4577L99.7039 69.4796Z" />
+              </svg>
+            </span>{" "}
+            بدون نیاز به خرید ملک
+                                </h1>
+          <ul className="flex flex-col gap-4">
+            <li className="flex items-center gap-2">
+              <div className="flex h-7 w-7 rounded-full bg-accent">
+                <Check
+                  className="m-auto size-4 stroke-foreground"
+                  strokeWidth={3}
+                />
+              </div>
+              <div className="text-foreground">
+                میانگین بازده ۹٪ سرمایه‌گذاری
+              </div>
+            </li>
+            <li className="flex items-center gap-2">
+              <div className="flex h-7 w-7 rounded-full bg-accent">
+                <Check
+                  className="m-auto size-4 stroke-foreground"
+                  strokeWidth={3}
+                />
+              </div>
+              <div className="text-foreground">دسترسی فصلی به سرمایه</div>
+            </li>
+            <li className="flex items-center gap-2">
+              <div className="flex h-7 w-7 rounded-full bg-accent">
+                <Check
+                  className="m-auto size-4 stroke-foreground"
+                  strokeWidth={3}
+                />
+              </div>
+              <div className="text-foreground">
+                فرصت‌های سرمایه‌گذاری بررسی‌شده
+                                            </div>
+            </li>
+          </ul>
+          <Button
+            asChild
+            className="flex h-fit w-full items-center justify-center gap-2 rounded-3xl px-6 py-3 font-medium md:w-fit"
+          >
+            <a href="#">
+              <div>همین حالا شروع کنید</div>
+              <ArrowRight className="size-5 rtl:rotate-180" />
+            </a>
+          </Button>
+        </div>
+        <div className="w-full shrink-0 lg:w-1/2">
+          <div className="relative mx-auto h-[27.5rem] w-full max-w-[36.5rem] overflow-hidden rounded-3xl bg-muted bg-cover bg-center bg-no-repeat sm:h-[39.5rem]">
+            <div className="relative mx-auto mt-20 w-[12.5rem] sm:w-[18.75rem]">
+              <img
+                src="/block-media/shadcnblocks/block/hero108/iphone.png"
+                alt=""
+                className="absolute top-0 z-20 block w-full"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
+                alt=""
+                className="absolute top-0 block w-full rounded-[50px]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero108 };
diff --git a/blocks/hero11.tsx b/blocks/hero11.tsx
new file mode 100644
index 0000000..f7184e8
--- /dev/null
+++ b/blocks/hero11.tsx
@@ -0,0 +1,47 @@
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero11Props {
+  className?: string;
+}
+
+const Hero11 = ({ className }: Hero11Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="border-b">
+        <div className="container max-w-7xl">
+          <div className="mx-auto flex max-w-5xl flex-col items-center">
+            <div className="z-10 flex flex-col items-center gap-6 text-center">
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                alt="لوگو"
+                className="h-10 md:h-16"
+              />
+              <div>
+                <h1 className="mb-4 text-3xl font-medium text-pretty lg:text-2xll">
+                  پروژه بعدی خود را سریع‌تر توسعه دهید
+                                                  </h1>
+                <p className="max-w-3xl text-muted-foreground lg:text-xl">
+                  کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
+                                                  </p>
+              </div>
+              <Button>
+                شروع رایگان
+                                              <ChevronRight className="h-4 rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
+            alt="تصویر نمونه"
+            className="mt-20 aspect-video w-full rounded-t-lg object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero11 };
diff --git a/blocks/hero111.tsx b/blocks/hero111.tsx
new file mode 100644
index 0000000..5d15557
--- /dev/null
+++ b/blocks/hero111.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CircleCheck } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const formSchema = z
+  .object({
+    email: z.string().email("آدرس ایمیل نامعتبر"),
+  })
+  .required({ email: true });
+
+function HeroFrom() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
+      <div className="flex flex-col justify-center gap-3 md:flex-row">
+        <div className="w-full">
+          <Controller
+            control={form.control}
+            name="email"
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor={field.name} className="sr-only">
+                  ایمیل
+                </FieldLabel>
+                <Input
+                  {...field}
+                  type="email"
+                  id={field.name}
+                  aria-invalid={fieldState.invalid}
+                  placeholder="ایمیل خود را وارد کنید"
+                  className="block h-fit w-full rounded-full px-6 py-3 placeholder:text-black/60 focus:outline-none sm:py-5"
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+        </div>
+        <div className="shrink-0">
+          <Button
+            type="submit"
+            className="h-fit w-full rounded-full px-6 py-3 text-base font-semibold sm:py-5 md:w-fit"
+          >
+            شروع رایگان
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+interface Hero111Props {
+  className?: string;
+}
+
+const Hero111 = ({ className }: Hero111Props) => {
+  return (
+    <section className={cn("bg-muted py-12 font-sans md:py-20", className)}>
+      <div className="container max-w-[80.5rem]">
+        <div className="mx-auto flex max-w-[24.375rem] flex-col items-center justify-center gap-8 sm:max-w-[31.25rem] md:max-w-[37.5rem] xl:max-w-[43.125rem]">
+          <div className="flex flex-col items-center justify-center gap-5">
+            <h1 className="font-outfit text-center text-3xl leading-tight font-medium text-primary sm:text-xl md:text-2xll xl:text-2xll">
+              مدیریت منابع انسانی و استخدام
+                                      </h1>
+            <p className="text-center text-lg text-primary/80">
+              فرایند جذب، استخدام، اطلاعات کارکنان و ارزیابی عملکرد را از یک داشبورد واحد مدیریت کنید.
+                                      </p>
+          </div>
+          <div className="w-full max-w-[32.5rem]">
+            <HeroFrom />
+          </div>
+          <div className="flex w-full flex-wrap items-center justify-center gap-6">
+            <div className="flex items-center gap-3">
+              <div className="relative h-6 w-6 shrink-0">
+                <CircleCheck className="absolute top-1/2 left-1/2 m-auto h-[108%] w-[108%] -translate-x-1/2 -translate-y-1/2 stroke-primary" />
+              </div>
+              <p className="text-base text-muted-foreground">
+                نیاز به کارت اعتباری نیست
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="relative h-6 w-6 shrink-0">
+                <CircleCheck className="absolute top-1/2 left-1/2 m-auto h-[108%] w-[108%] -translate-x-1/2 -translate-y-1/2 stroke-primary" />
+              </div>
+              <p className="text-base text-muted-foreground">لغو در هر زمان</p>
+            </div>
+          </div>
+        </div>
+        <div className="mt-20 mb-20 flex w-full items-start justify-between md:mt-28">
+          <div className="border-muted2 w-[41.4%] overflow-hidden rounded-lg">
+            <AspectRatio ratio={1.28627451 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt=""
+                className="h-full w-full object-cover"
+              />
+            </AspectRatio>
+          </div>
+          <div className="border-muted2 w-[23.98%] overflow-hidden rounded-lg">
+            <AspectRatio ratio={0.745098039 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                alt=""
+                className="h-full w-full object-cover"
+              />
+            </AspectRatio>
+          </div>
+          <div className="border-muted2 w-[32.82%] overflow-hidden rounded-lg">
+            <AspectRatio ratio={1.019607843 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+                alt=""
+                className="h-full w-full object-cover"
+              />
+            </AspectRatio>
+          </div>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-10">
+          <p className="text-center text-lg text-muted-foreground">
+            مورد اعتماد بیش از ۷ میلیون نفر در شرکت‌هایی مانند
+          </p>
+          <div className="grid grid-cols-3 grid-rows-2 flex-wrap justify-between gap-8 md:grid-cols-6 md:grid-rows-1">
+            {Array(6)
+              .fill(null)
+              .map((_, i) => (
+                <div className="h-9" key={`logos-${i}`}>
+                  <img
+                    src={`/block-media/shadcnblocks/block/logos/company/fictional-company-logo-$%7B++i}.svg`}
+                    alt=""
+                    className="h-full w-full object-contain object-center"
+                  />
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero111 };
diff --git a/blocks/hero112.tsx b/blocks/hero112.tsx
new file mode 100644
index 0000000..d957a6a
--- /dev/null
+++ b/blocks/hero112.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { BookOpen, PenTool, Play } from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero112Props {
+  className?: string;
+}
+
+const Hero112 = ({ className }: Hero112Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+
+  return (
+    <section className={cn("bg-background py-12 md:py-32", className)}>
+      <div className="container max-w-[60rem]">
+        <div className="flex flex-col gap-4 md:flex-row">
+          <div className="flex flex-col gap-6">
+            <h1 className="text-xl font-medium lg:text-2xll">
+              دوره آموزشی مناسب خود را انتخاب کنید
+                                      </h1>
+            <p className="text-lg text-muted-foreground lg:max-w-[80%]">
+              به دوره‌های تخصصی، آموزش‌های ویدیویی و محتوای آموزشی به‌روز دسترسی داشته باشید.
+                                      </p>
+            <div className="relative z-10 flex flex-wrap items-center gap-6">
+              <Button asChild variant="default">
+                <a href="#">مرور دوره‌ها</a>
+              </Button>
+              <Button
+                variant="ghost"
+                className="group flex items-center gap-2 hover:bg-transparent"
+                onClick={() => setIsVideoOpen(true)}
+              >
+                <div className="flex h-10 w-10 rounded-full bg-primary transition-transform group-hover:scale-110">
+                  <Play className="m-auto h-5 w-5 fill-white stroke-white" />
+                </div>
+                <div>ویدیوی دوره</div>
+              </Button>
+            </div>
+          </div>
+          <div>
+            <div className="relative mx-auto mt-28 h-[21.25rem] w-[21.25rem] rounded-full bg-primary md:mx-0 md:mt-0 lg:h-[25rem] lg:w-[25rem]">
+              <div className="absolute bottom-0 w-[21.25rem] overflow-hidden rounded-full lg:h-[25rem] lg:w-[25rem]">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt=""
+                  className="w-full scale-100 object-cover object-center"
+                />
+              </div>
+              <div className="absolute -right-5 bottom-10 flex w-[17.5rem] items-center justify-center gap-1 rounded-full bg-background px-4 py-3 shadow-md">
+                <div className="flex -space-x-[0.875rem]">
+                  {[
+                    {
+                      src: "/block-media/shadcnblocks/block/avatar-1.webp",
+                      fallback: "AB",
+                    },
+                    {
+                      src: "/block-media/shadcnblocks/block/avatar-2.webp",
+                      fallback: "CD",
+                    },
+                    {
+                      src: "/block-media/shadcnblocks/block/avatar-3.webp",
+                      fallback: "EF",
+                    },
+                  ].map(({ src, fallback }, i) => (
+                    <Avatar
+                      key={i}
+                      className="flex h-12 w-12 shrink-0 rounded-full border-4 border-white object-cover"
+                    >
+                      <AvatarImage src={src} alt="" />
+                      <AvatarFallback>{fallback}</AvatarFallback>
+                    </Avatar>
+                  ))}
+                </div>
+                <div className="flex-1 text-sm text-gray-800">
+                  بیش از ۷۰۰۰ نفر قبلاً پیوسته‌اند
+                </div>
+              </div>
+              <div className="absolute top-0 right-0 flex h-[6.25rem] w-[6.25rem] rotate-12 rounded-3xl border-8 border-white bg-primary lg:h-[6.875rem] lg:w-[6.875rem]">
+                <BookOpen className="m-auto h-[2.5rem] w-[2.5rem] stroke-white lg:h-[3.125rem] lg:w-[3.125rem]" />
+              </div>
+              <div className="absolute top-1/3 -left-10 flex h-[6.25rem] w-[6.25rem] -rotate-12 rounded-3xl border-8 border-white bg-primary lg:h-[6.875rem] lg:w-[6.875rem]">
+                <PenTool className="m-auto h-[3.5rem] w-[3.5rem] -rotate-90 fill-white lg:h-[4.5rem] lg:w-[4.5rem]" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-20 rounded-3xl border p-6">
+          <div className="flex w-full flex-col md:flex-row">
+            <div className="flex flex-1 flex-col gap-3 border-b-[1px] p-6 md:border-r-[1px] md:border-b-0">
+              <div className="text-xl font-medium text-primary lg:text-xl">
+                87
+              </div>
+              <div className="text-muted-foreground lg:text-lg">
+                دوره توسط متخصصان
+              </div>
+            </div>
+            <div className="flex flex-1 flex-col gap-3 border-b-[1px] p-6 md:border-r-[1px] md:border-b-0">
+              <div className="text-xl font-medium text-primary lg:text-xl">
+                200+
+              </div>
+              <div className="text-muted-foreground lg:text-lg">
+                ساعت محتوا
+              </div>
+            </div>
+            <div className="flex flex-1 flex-col gap-3 p-6">
+              <div className="text-xl font-medium text-primary lg:text-xl">
+                100%
+              </div>
+              <div className="text-muted-foreground lg:text-lg">
+                رضایت کاربران
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </section>
+  );
+};
+
+export { Hero112 };
diff --git a/blocks/hero115.tsx b/blocks/hero115.tsx
new file mode 100644
index 0000000..ae2267c
--- /dev/null
+++ b/blocks/hero115.tsx
@@ -0,0 +1,82 @@
+import { Wifi, Zap } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero115Props {
+  icon?: React.ReactNode;
+  heading: string;
+  description: string;
+  button: {
+    text: string;
+    icon?: React.ReactNode;
+    url: string;
+    className?: string;
+  };
+  trustText?: string;
+  imageSrc?: string;
+  imageAlt?: string;
+  className?: string;
+}
+
+const Hero115 = ({
+  icon = <Wifi className="size-6" />,
+  heading = "مجموعه بلاک‌های آماده برای رابط کاربری",
+  description = "صدها کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.",
+  button = {
+    text: "مشاهده همه بلاک‌ها",
+    icon: <Zap className="ms-2 size-4" />,
+    url: "https://www.ShadcnBlocks",
+  },
+  trustText = "مورد اعتماد بیش از ۲۵٬۰۰۰ کسب‌وکار در سراسر جهان",
+  imageSrc = "/block-media/shadcnblocks/block/placeholder-1.svg",
+  imageAlt = "تصویر نمونه",
+  className,
+}: Hero115Props) => {
+  return (
+    <section className={cn("overflow-hidden py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-5">
+          <div className="relative flex flex-col gap-5">
+            <div
+              style={{
+                transform: "translate(-50%, -50%)",
+              }}
+              className="absolute top-1/2 left-1/2 -z-10 mx-auto size-[800px] rounded-full border [mask-image:linear-gradient(to_top,transparent,transparent,white,white,white,transparent,transparent)] p-16 md:size-[1300px] md:p-32"
+            >
+              <div className="size-full rounded-full border p-16 md:p-32">
+                <div className="size-full rounded-full border"></div>
+              </div>
+            </div>
+            <span className="mx-auto flex size-16 items-center justify-center rounded-full border md:size-20">
+              {icon}
+            </span>
+            <h2 className="mx-auto max-w-5xl text-center text-3xl font-medium text-balance md:text-2xll">
+              {heading}
+            </h2>
+            <p className="mx-auto max-w-3xl text-center text-muted-foreground md:text-lg">
+              {description}
+            </p>
+            <div className="flex flex-col items-center justify-center gap-3 pt-3 pb-12">
+              <Button size="lg" asChild>
+                <a href={button.url}>
+                  {button.text} {button.icon}
+                </a>
+              </Button>
+              {trustText && (
+                <div className="text-xs text-muted-foreground">{trustText}</div>
+              )}
+            </div>
+          </div>
+          <img
+            src={imageSrc}
+            alt={imageAlt}
+            className="mx-auto h-full max-h-[524px] w-full max-w-5xl rounded-2xl object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero115 };
diff --git a/blocks/hero116.tsx b/blocks/hero116.tsx
new file mode 100644
index 0000000..480b3a7
--- /dev/null
+++ b/blocks/hero116.tsx
@@ -0,0 +1,134 @@
+"use client";
+import { Play } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero116Props {
+  className?: string;
+}
+
+const Hero116 = ({ className }: Hero116Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  return (
+    <Fragment>
+      <section
+        className={cn("font-dm_sans bg-background py-12 md:py-24", className)}
+      >
+        <div className="container max-w-[1440px]">
+          <div className="flex flex-col">
+            <div className="flex flex-col items-center justify-center gap-8">
+              <h1 className="max-w-[1000px] text-center text-[3.125rem] leading-none text-foreground md:text-[4.25rem] lg:text-[5.5rem]">
+                راهکارهای تأثیرگذار برای رشد سریع‌تر نرم‌افزار
+              </h1>
+              <p className="max-w-[53.125rem] text-center text-lg leading-snug text-muted-foreground md:text-xl">
+                در چند دقیقه حساب کاربری خود را ایجاد کنید و به تمام امکانات پلتفرم دسترسی داشته باشید. تیم پشتیبانی در تمام مراحل همراه شماست.
+                                            </p>
+              <div className="flex flex-col items-center justify-center gap-3 md:flex-row">
+                <Button
+                  onClick={() => setIsVideoOpen(true)}
+                  asChild
+                  className="group flex h-fit w-fit items-center gap-2 overflow-hidden rounded-full px-5 py-2 text-base"
+                >
+                  <a href="#">
+                    <span className="block overflow-hidden">
+                      <span
+                        data-text="ببینید چطور کار می‌کند"
+                        className="relative block text-nowrap transition-all group-hover:-translate-y-[110%] after:absolute after:top-[110%] after:left-0 after:h-full after:w-full after:content-[attr(data-text)]"
+                      >
+                        مشاهده دمو
+                                                                    </span>
+                    </span>
+                    <Play className="size-4!" />
+                  </a>
+                </Button>
+                <Button
+                  asChild
+                  variant="outline"
+                  className="group block h-fit w-fit overflow-hidden rounded-full px-5 py-2 text-center text-base text-foreground"
+                >
+                  <a href="#">
+                    <span className="block overflow-hidden">
+                      <span
+                        data-text="همین حالا شروع کنید"
+                        className="relative block text-nowrap transition-all group-hover:-translate-y-[110%] after:absolute after:top-[110%] after:left-0 after:h-full after:w-full after:content-[attr(data-text)]"
+                      >
+                        شروع رایگان
+                                                                    </span>
+                    </span>
+                  </a>
+                </Button>
+              </div>
+            </div>
+            <div className="w-full py-[16%]">
+              <div className="border-muted2 relative aspect-[2.716981132/1] w-full border">
+                <div className="absolute -top-[28%] left-[18%] w-[28.47%] max-w-[25.625rem]">
+                  <AspectRatio ratio={1.11372549 / 1}>
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                      alt="تصویر نمونه"
+                      className="size-full object-cover object-center"
+                    />
+                  </AspectRatio>
+                </div>
+                <div className="absolute -top-[28%] left-[51%] w-[18.75%] max-w-[16.875rem]">
+                  <AspectRatio ratio={0.845559846 / 1}>
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="size-full object-cover object-center"
+                    />
+                  </AspectRatio>
+                </div>
+                <div className="absolute -bottom-[14%] left-[51%] w-[38.19%] max-w-[34.375rem]">
+                  <AspectRatio ratio={1.686153846 / 1}>
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                      alt="تصویر نمونه"
+                      className="size-full object-cover object-center"
+                    />
+                  </AspectRatio>
+                </div>
+                <div className="absolute -bottom-[30%] left-[10.7%] w-[38.19%] max-w-[34.375rem]">
+                  <AspectRatio ratio={1.415041783 / 1}>
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                      alt="تصویر نمونه"
+                      className="size-full object-cover object-center"
+                    />
+                  </AspectRatio>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero116 };
diff --git a/blocks/hero118.tsx b/blocks/hero118.tsx
new file mode 100644
index 0000000..df37963
--- /dev/null
+++ b/blocks/hero118.tsx
@@ -0,0 +1,194 @@
+"use client";
+import AutoScroll from "embla-carousel-auto-scroll";
+import Autoplay from "embla-carousel-autoplay";
+import { ArrowRight, Circle } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const trustedBy = [
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+    name: "شرکت نمونه ۱",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+    name: "شرکت نمونه ۲",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+    name: "شرکت نمونه ۳",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+    name: "شرکت نمونه ۴",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+    name: "شرکت نمونه ۵",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+    name: "شرکت نمونه ۶",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+    name: "شرکت نمونه ۷",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+    name: "شرکت نمونه ۱",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+    name: "شرکت نمونه ۲",
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+    name: "شرکت نمونه ۳",
+  },
+];
+
+interface Hero118Props {
+  className?: string;
+}
+
+const Hero118 = ({ className }: Hero118Props) => {
+  return (
+    <section
+      className={cn(
+        "overflow-hidden bg-background py-12 font-sans md:py-20",
+        className,
+      )}
+    >
+      <div className="container max-w-[76.5rem]">
+        <div className="flex flex-col gap-20">
+          <div className="grid grid-cols-1 items-center justify-center gap-10 xl:grid-cols-2">
+            <div>
+              <div className="mx-auto flex w-full max-w-[52.5rem] flex-col items-start justify-center gap-10 xl:max-w-full">
+                <div className="flex max-w-[42rem] flex-col items-start gap-6 xl:max-w-full">
+                  <div className="mx-auto flex w-fit items-center gap-2 rounded-md bg-muted px-[0.625rem] py-1 md:mx-0">
+                    <Circle className="h-2 w-2 fill-muted-foreground" />
+                    <div className="font-mono text-xs leading-relaxed text-muted-foreground uppercase">
+                      به‌زودی
+                    </div>
+                  </div>
+                  <h1 className="text-center text-xl leading-none font-semibold tracking-tighter text-foreground md:text-start md:text-2xll">
+                    <span className="text-muted-foreground">
+                      بینش‌های هوشمند
+                                                              </span>{" "}
+                    فرصت‌های جدید را کشف کنید
+                                                        </h1>
+                  <div className="text-center text-base leading-snug text-foreground md:text-start md:text-lg">
+                    با تحلیل هوشمند داده‌ها، فرصت‌های رشد را شناسایی کرده و تصمیم‌های دقیق‌تر و سریع‌تری بگیرید.
+                                                        </div>
+                </div>
+                <div className="flex w-full flex-col items-center gap-4 md:flex-row">
+                  <div className="w-full flex-1 xl:w-fit xl:flex-initial">
+                    <Button
+                      asChild
+                      variant="secondary"
+                      className="border-muted2 block h-fit w-full rounded-xl border px-5 py-3 text-center text-[0.9375rem] leading-normal font-medium xl:w-fit"
+                    >
+                      <a href="#">بیشتر بدانید</a>
+                    </Button>
+                  </div>
+                  <div className="w-full flex-1 xl:w-fit xl:flex-initial">
+                    <Button
+                      asChild
+                      className="group flex h-fit w-full items-center justify-center gap-1 rounded-xl py-3 pe-4 ps-5 text-[0.9375rem] leading-normal font-medium transition-all duration-300 hover:pe-7 xl:w-fit"
+                    >
+                      <a href="#">
+                        <div>دسترسی زودهنگام</div>
+                        <ArrowRight className="size-6! transition-transform duration-300 group-hover:translate-x-3 rtl:rotate-180 rtl:group-hover:-translate-x-3" />
+                      </a>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div className="border-muted2 overflow-hidden rounded-[1.25rem] border md:w-[63.4375rem]">
+                <AspectRatio ratio={1.5378787878787878}>
+                  <div className="size-full">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="size-full object-cover object-center"
+                    />
+                    <div className="absolute top-0 left-0 z-20 h-[0.125rem] w-full">
+                      <div className="absolute h-full w-[20%] animate-slide-to-right bg-[linear-gradient(270deg,var(--color-primary)_0%,var(--color-transparent)_85%)] md:w-[14%]"></div>
+                    </div>
+                    <div className="absolute bottom-0 left-0 z-20 h-full w-[0.125rem]">
+                      <div className="absolute h-[24%] w-full animate-slide-to-top bg-[linear-gradient(180deg,var(--color-primary)_0%,var(--color-transparent)_85%)] md:h-[17%]"></div>
+                    </div>
+                  </div>
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-10 w-full bg-[radial-gradient(closest-side,var(--color-background)_54%,transparent)] bg-center py-12">
+        <div className="container">
+          <div className="mx-auto flex max-w-[72.5rem] flex-col gap-4">
+            <p className="text-center text-lg text-foreground">
+              مورد اعتماد رهبران صنعت
+            </p>
+            <div className="py-14">
+              <Carousel
+                opts={{
+                  loop: true,
+                  align: "center",
+                }}
+                plugins={[
+                  AutoScroll({
+                    speed: 1,
+                  }),
+                  Autoplay({
+                    playOnInit: true,
+                    delay: 1000,
+                  }),
+                ]}
+                className="relative w-full max-w-(--breakpoint-2xl) overflow-hidden"
+              >
+                <CarouselContent className="items-center">
+                  {trustedBy.map((item, index) => (
+                    <CarouselItem
+                      key={`${item.name}-${index}`}
+                      className="w-fit basis-auto px-7"
+                    >
+                      <img
+                        src={item.image}
+                        alt={item.name}
+                        className="h-8 w-full object-fill opacity-60"
+                      />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero118 };
diff --git a/blocks/hero12.tsx b/blocks/hero12.tsx
new file mode 100644
index 0000000..57d8aff
--- /dev/null
+++ b/blocks/hero12.tsx
@@ -0,0 +1,115 @@
+import { ExternalLink } from "lucide-react";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero12Props {
+  className?: string;
+}
+
+const Hero12 = ({ className }: Hero12Props) => {
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      <div className="absolute inset-x-0 top-0 flex h-full w-full items-center justify-center opacity-100">
+        <img
+          alt="پس‌زمینه"
+          src="/block-media/shadcnblocks/block/patterns/square-alt-grid.svg"
+          className="[mask-image:radial-gradient(75%_75%_at_center,white,transparent)] opacity-90"
+        />
+      </div>
+      <div className="relative z-10 container">
+        <div className="mx-auto flex max-w-5xl flex-col items-center">
+          <div className="flex flex-col items-center gap-6 text-center">
+            <div className="rounded-xl bg-background/30 p-4 shadow-sm backdrop-blur-sm">
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                alt="لوگو"
+                className="h-16"
+              />
+            </div>
+            <div>
+              <h1 className="mb-6 text-xl font-bold tracking-tight text-pretty lg:text-2xll">
+                پروژه بعدی خود را با{" "}
+                <span className="text-primary">Blocks</span> بلاک‌های آماده بسازید
+                                            </h1>
+              <p className="mx-auto max-w-3xl text-muted-foreground lg:text-xl">
+                کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
+                                            </p>
+            </div>
+            <div className="mt-6 flex justify-center gap-3">
+              <Button className="shadow-sm transition-shadow hover:shadow">
+                شروع رایگان
+                                            </Button>
+              <Button variant="outline" className="group">
+                آشنایی بیشتر{" "}
+                <ExternalLink className="ms-2 h-4 transition-transform group-hover:translate-x-0.5 rtl:group-hover:-translate-x-0.5" />
+              </Button>
+            </div>
+            <div className="mt-20 flex flex-col items-center gap-5">
+              <p className="font-medium text-muted-foreground lg:text-start">
+                بر پایه فناوری‌های متن‌باز و استانداردهای روز
+                                            </p>
+              <div className="flex flex-wrap items-center justify-center gap-4">
+                <a
+                  href="#"
+                  className={cn(
+                    buttonVariants({ variant: "outline" }),
+                    "group flex aspect-square h-12 items-center justify-center p-0",
+                  )}
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg"
+                    alt="ری یو آی logo"
+                    className="h-6 saturate-0 transition-all group-hover:saturate-100"
+                  />
+                </a>
+                <a
+                  href="#"
+                  className={cn(
+                    buttonVariants({ variant: "outline" }),
+                    "group flex aspect-square h-12 items-center justify-center p-0",
+                  )}
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/typescript-icon.svg"
+                    alt="لوگوی زبان نوع‌ایمن"
+                    className="h-6 saturate-0 transition-all group-hover:saturate-100"
+                  />
+                </a>
+
+                <a
+                  href="#"
+                  className={cn(
+                    buttonVariants({ variant: "outline" }),
+                    "group flex aspect-square h-12 items-center justify-center p-0",
+                  )}
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/react-icon.svg"
+                    alt="لوگوی رابط کاربری"
+                    className="h-6 saturate-0 transition-all group-hover:saturate-100"
+                  />
+                </a>
+                <a
+                  href="#"
+                  className={cn(
+                    buttonVariants({ variant: "outline" }),
+                    "group flex aspect-square h-12 items-center justify-center p-0",
+                  )}
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/tailwind-icon.svg"
+                    alt="لوگوی استایل‌دهی مدرن"
+                    className="h-6 saturate-0 transition-all group-hover:saturate-100"
+                  />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero12 };
diff --git a/blocks/hero123.tsx b/blocks/hero123.tsx
new file mode 100644
index 0000000..0760619
--- /dev/null
+++ b/blocks/hero123.tsx
@@ -0,0 +1,54 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero123Props {
+  className?: string;
+}
+
+const Hero123 = ({ className }: Hero123Props) => {
+  return (
+    <section className={cn("bg-muted", className)}>
+      <div className="container py-12 sm:py-32">
+        <div className="relative grid gap-12 lg:grid-cols-2 lg:gap-24">
+          <div className="">
+            <span className="mb-4 block font-mono text-lg font-medium">
+              منابع آموزشی
+                                      </span>
+            <h1 className="text-2xll font-medium tracking-tight text-foreground">
+              راهکار مناسب کسب‌وکار خود را پیدا کنید
+                                      </h1>
+            <p className="pt-10 text-lg leading-8 text-foreground">
+              مجموعه‌ای از ابزارها، آموزش‌ها و راهکارهای کاربردی که به شما کمک می‌کنند پروژه‌های خود را سریع‌تر و حرفه‌ای‌تر اجرا کنید.
+                                      </p>
+            <div className="mt-10 flex items-center gap-x-6">
+              <Button
+                asChild
+                className="h-fit rounded-full px-8 py-4 text-lg font-semibold shadow-sm"
+              >
+                <a href="#">درخواست نسخه نمایشی</a>
+              </Button>
+            </div>
+          </div>
+          <div>
+            {/* images from Figma Apple Widgets UI Kit https://www.figma.com/community/file/857332868558500566 */}
+            <div className="relative mx-auto max-w-[596px] overflow-hidden rounded-lg bg-primary pt-6 ps-6 lg:mx-0">
+              <AspectRatio
+                ratio={0.9104 / 1}
+                className="overflow-hidden rounded-tl-md"
+              >
+                <img
+                  alt="تصویر نمونه"
+                  src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                  className="block size-full object-cover"
+                />
+              </AspectRatio>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero123 };
diff --git a/blocks/hero125.tsx b/blocks/hero125.tsx
new file mode 100644
index 0000000..faef4ba
--- /dev/null
+++ b/blocks/hero125.tsx
@@ -0,0 +1,83 @@
+import { Banknote, Repeat, ShoppingBag, ShoppingCart } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero125Props {
+  className?: string;
+}
+
+const Hero125 = ({ className }: Hero125Props) => {
+  return (
+    <section
+      className={cn(
+        "relative overflow-hidden py-20 font-sans after:absolute after:bottom-0 after:left-0 after:block after:h-20 after:w-full after:bg-[linear-gradient(var(--color-transparent),var(--color-white))] after:content-[''] md:py-40",
+        className,
+      )}
+    >
+      <div className="relative container">
+        <img
+          src="/block-media/shadcnblocks/block/patterns/circles.svg"
+          alt=""
+          className="absolute top-[-68.75rem] right-[-86.25rem] z-[-1] block aspect-square h-auto w-[181.25rem] max-w-none"
+        />
+        <div className="grid grid-cols-1 items-center justify-center gap-16 lg:grid-cols-2">
+          <div className="flex flex-col gap-6">
+            <div className="flex items-center gap-2">
+              <ShoppingCart className="h-6 w-6 fill-primary stroke-primary" />
+              <p className="text-lg font-semibold">مرجوعی‌ها</p>
+            </div>
+            <h1 className="text-2xll leading-tight! font-semibold xl:text-2xll">
+              فرایند مرجوعی کالا را هوشمند و قابل مدیریت کنید.
+                                      </h1>
+            <p className="text-xl leading-snug text-muted-foreground">
+              قوانین بازگشت کالا، تعویض و بازپرداخت را متناسب با سیاست‌های فروش خود مدیریت کنید.
+                                      </p>
+            <Button
+              asChild
+              variant="default"
+              className="block h-fit w-fit rounded-full px-6 py-2 text-base leading-loose font-semibold"
+            >
+              <a href="#">رزرو دمو</a>
+            </Button>
+          </div>
+          <div className="justify-self-center lg:justify-self-end">
+            <div className="flex aspect-[0.955145119/1] flex-col rounded-xl border bg-background p-3 shadow-xl sm:w-[22.625rem]">
+              <AspectRatio
+                ratio={1.110367893 / 1}
+                className="w-full overflow-hidden rounded-lg bg-muted"
+              >
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="تصویر نمونه"
+                  className="block h-full w-full object-cover object-center"
+                />
+              </AspectRatio>
+              <div className="m-auto flex w-full items-center justify-between">
+                <div className="flex items-center gap-1 rounded-md bg-black/5 px-2 py-1">
+                  <Repeat className="h-4" />
+                  <p className="text-xs font-semibold sm:text-sm">تعویض</p>
+                </div>
+                <div className="flex items-center gap-1 rounded-md bg-background px-2 py-1">
+                  <ShoppingBag className="h-4 stroke-black/40" />
+                  <p className="text-xs font-semibold text-black/40 sm:text-sm">
+                    شروع رایگان
+                                                        </p>
+                </div>
+                <div className="flex items-center gap-1 rounded-md bg-background px-2 py-1">
+                  <Banknote className="h-4 stroke-black/40" />
+                  <p className="text-xs font-semibold text-black/40 sm:text-sm">
+                    بازپرداخت
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero125 };
diff --git a/blocks/hero127.tsx b/blocks/hero127.tsx
new file mode 100644
index 0000000..b5d0804
--- /dev/null
+++ b/blocks/hero127.tsx
@@ -0,0 +1,151 @@
+import { ChevronRight, Mail, MoveRight, Plus } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type avatar = {
+  avatar: string;
+  alt: string;
+  avatarFallback: string;
+};
+
+interface AvatarsProps {
+  avatars?: Array<avatar>;
+  className?: string;
+}
+
+function Avatars({ avatars, className }: AvatarsProps) {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      {avatars &&
+        avatars.map(({ avatar, alt, avatarFallback }, i) => (
+          <Avatar
+            key={`avatar-hero-${i}`}
+            className="relative h-14 w-14 shrink-0 overflow-hidden rounded-full border before:absolute before:top-1/2 before:left-1/2 before:block before:h-[85%] before:w-[85%] before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border-2 before:border-black before:bg-transparent before:content-['']"
+          >
+            <AvatarImage
+              src={avatar}
+              alt={alt}
+              className="h-full w-full object-cover object-center"
+            />
+            <AvatarFallback>{avatarFallback}</AvatarFallback>
+          </Avatar>
+        ))}
+      <div className="relative flex h-14 w-14 overflow-hidden rounded-full bg-primary before:absolute before:top-1/2 before:left-1/2 before:block before:h-[85%] before:w-[85%] before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border-2 before:border-white before:bg-transparent before:content-['']">
+        <Plus className="m-auto h-4 w-4 stroke-white" />
+      </div>
+    </div>
+  );
+}
+
+interface Hero127Props {
+  className?: string;
+}
+
+const Hero127 = ({ className }: Hero127Props) => {
+  const avatars: Array<avatar> = [
+    {
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      alt: "تصویر نمونه",
+      avatarFallback: "",
+    },
+    {
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+      alt: "تصویر نمونه",
+      avatarFallback: "",
+    },
+    {
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+      alt: "تصویر نمونه",
+      avatarFallback: "",
+    },
+    {
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-4.webp",
+      alt: "تصویر نمونه",
+      avatarFallback: "",
+    },
+  ];
+
+  return (
+    <section className={cn("font-dm_sans py-12 md:py-20", className)}>
+      <div className="container max-w-[56.25rem] xl:max-w-[66.875rem]">
+        <div className="flex flex-col justify-between gap-12 xl:flex-row">
+          <div className="flex w-full flex-col gap-12 xl:max-w-[37.5rem]">
+            <Button
+              asChild
+              variant="ghost"
+              className="flex w-fit gap-3 rounded-full border p-1 pe-3 hover:bg-transparent"
+            >
+              <a href="#">
+                <Badge className="hover:bg-bg-primary/10 flex items-center gap-[0.375rem] rounded-full bg-primary/10 px-3 py-1">
+                  <Mail className="h-[0.875rem] w-[0.875rem] stroke-primary" />
+                  <div className="text-sm leading-normal font-medium text-primary">
+                    اخبار
+                  </div>
+                </Badge>
+                <div className="flex items-center gap-3 text-sm leading-normal font-medium">
+                  ویژگی‌های جدید را ببینید
+                                                    <MoveRight className="h-4 w-4 stroke-muted-foreground rtl:rotate-180" />
+                </div>
+              </a>
+            </Button>
+            <h1 className="w-[80%] text-2xll leading-[1.2] font-bold text-black md:text-2xll xl:w-full xl:text-2xll">
+              معرفی{" "}
+              <span className="text-primary/50">پلتفرم</span>{" "}
+              <span className="text-primary">بازاریابی</span> برای رشد کسب‌وکار
+                                      </h1>
+            <div className="flex flex-col items-center gap-4 md:flex-row">
+              <Button
+                asChild
+                className="flex h-fit w-full items-center justify-center gap-3 rounded-full border px-8 py-4 text-base font-medium md:w-fit"
+              >
+                <a href="#">
+                  <div>شروع رایگان</div>
+                  <ChevronRight className="h-4 w-4 stroke-white rtl:rotate-180" />
+                </a>
+              </Button>
+              <Button
+                asChild
+                variant="outline"
+                className="flex h-fit w-full items-center justify-center gap-3 rounded-full px-8 py-4 text-base font-medium hover:border-black/40 md:w-fit"
+              >
+                <a href="#">
+                  <Mail className="h-4 w-4" />
+                  <div>درخواست دسترسی</div>
+                </a>
+              </Button>
+            </div>
+          </div>
+          <div className="w-full xl:max-w-[20rem] xl:self-end">
+            <div className="flex flex-col gap-12">
+              <p className="max-w-[39rem] text-lg">
+                پادکست‌های خود را تولید، منتشر و مدیریت کنید و مخاطبان بیشتری جذب کنید.
+                                            </p>
+              <div className="flex flex-col justify-between gap-12 md:flex-row xl:flex-col xl:justify-normal">
+                <div className="flex items-center gap-12">
+                  <div>
+                    <p className="text-sm font-medium">کاربران فعال</p>
+                    <div className="text-3xl font-bold">24 K+</div>
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium">اپیزودها</p>
+                    <div className="text-3xl font-bold">43 K+</div>
+                  </div>
+                </div>
+                <Avatars avatars={avatars} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero127 };
diff --git a/blocks/hero129.tsx b/blocks/hero129.tsx
new file mode 100644
index 0000000..6e0c09d
--- /dev/null
+++ b/blocks/hero129.tsx
@@ -0,0 +1,134 @@
+import { CornerDownLeft, ShoppingCart } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero129Props {
+  className?: string;
+}
+
+const Hero129 = ({ className }: Hero129Props) => {
+  return (
+    <section className={cn("font-manrope px-8 py-12 md:py-20", className)}>
+      <div className="relative mx-auto w-full max-w-[77rem]">
+        <div className="relative z-10 grid grid-cols-1 items-center gap-20 xl:grid-cols-2 xl:grid-rows-[48.875rem] xl:gap-0">
+          <div className="flex flex-col gap-12 lg:gap-20 xl:pe-20">
+            <h1 className="text-[3.375rem] leading-none font-extrabold md:text-2xll lg:text-[5rem]">
+              حضور{" "}
+              <span className="relative after:absolute after:top-[15%] after:left-0 after:z-[-1] after:inline-block after:h-[70%] after:w-[100%] after:bg-muted after:content-['']">
+                دیجیتال
+                                            </span>
+              کسب‌وکار خود را متحول کنید
+                                      </h1>
+            <div className="flex flex-col gap-6">
+              <p className="text-xl">
+                صفحات فرود و وب‌سایت‌های حرفه‌ای را بدون پیچیدگی طراحی و منتشر کنید.
+                                            </p>
+              <div className="flex flex-col items-center gap-2 md:flex-row">
+                <Button
+                  asChild
+                  variant="default"
+                  size="lg"
+                  className="w-full md:w-auto"
+                >
+                  <a href="#">
+                    <ShoppingCart className="h-6 w-6 fill-white" />
+                    <div>شروع رایگان</div>
+                  </a>
+                </Button>
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="w-full md:w-auto"
+                >
+                  <a href="#">مشاهده قالب‌ها</a>
+                </Button>
+              </div>
+              <div>
+                <div className="relative flex -space-x-[0.875rem]">
+                  <Avatar className="relative z-10 flex h-12 w-12 shrink-0 rounded-full border border-4 border-black/20 border-white object-cover">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-1.webp"
+                      alt="تصویر نمونه"
+                    />
+                    <AvatarFallback>AB</AvatarFallback>
+                  </Avatar>
+                  <Avatar className="relative z-20 flex h-12 w-12 shrink-0 rounded-full border border-4 border-black/20 border-white object-cover">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-2.webp"
+                      alt="تصویر نمونه"
+                    />
+                    <AvatarFallback>CD</AvatarFallback>
+                  </Avatar>
+                  <Avatar className="relative z-30 flex h-12 w-12 shrink-0 rounded-full border border-4 border-black/20 border-white object-cover">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-3.webp"
+                      alt="تصویر نمونه"
+                    />
+                    <AvatarFallback>EF</AvatarFallback>
+                  </Avatar>
+                </div>
+                <div className="relative mt-2 w-fit pe-28">
+                  <p className="w-fit text-base font-medium">
+                    مورد اعتماد بیش از ۳۲۰۰ کاربر
+                  </p>
+                  <div className="absolute top-0 right-[10%] flex w-fit -translate-y-2/3 flex-col items-center gap-1">
+                    <p className="font-handwriting text-xl">و بسیاری دیگر</p>
+                    <CornerDownLeft className="h-6 w-6 stroke-black" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="relative aspect-[0.782051282/1] self-stretch justify-self-stretch overflow-hidden bg-accent sm:aspect-auto sm:min-h-[48.875rem] xl:min-h-fit">
+            <div className="absolute top-auto bottom-0 aspect-[0.855555556/1] w-full max-w-[38.5rem] overflow-hidden">
+              <div className="absolute -bottom-[30%] -left-[30%] z-20 w-full max-w-[616px]">
+                <img
+                  src="/block-media/shadcnblocks/block/hero129/phone.png"
+                  alt="تصویر نمونه"
+                  className="relative z-10"
+                />
+                <div className="absolute top-[15%] left-[12%] z-40 aspect-[0.46182266/1] w-[60%] [perspective:4000px]">
+                  <div className="h-full w-full [transform:rotate(48.5deg)_rotateY(40deg)_rotateX(16deg)_skew(19.2deg)] overflow-hidden rounded-3xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="absolute -bottom-[27%] left-[10%] z-10 w-full max-w-[616px]">
+                <img
+                  src="/block-media/shadcnblocks/block/hero129/phone.png"
+                  alt="تصویر نمونه"
+                  className="relative z-10"
+                />
+                <div className="absolute top-[15%] left-[12%] z-40 aspect-[0.46182266/1] w-[60%] [perspective:4000px]">
+                  <div className="h-full w-full [transform:rotate(48.5deg)_rotateY(40deg)_rotateX(16deg)_skew(19.2deg)] overflow-hidden rounded-3xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="absolute top-0 left-0 flex h-full w-full justify-between">
+          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
+          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
+          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
+          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
+          <div className="h-full w-[1px] border-r border-dashed border-black/20" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero129 };
diff --git a/blocks/hero13.tsx b/blocks/hero13.tsx
new file mode 100644
index 0000000..3ff7dfd
--- /dev/null
+++ b/blocks/hero13.tsx
@@ -0,0 +1,46 @@
+import { Bell, PlayCircle } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero13Props {
+  className?: string;
+}
+
+const Hero13 = ({ className }: Hero13Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <Badge
+          variant="outline"
+          className="mb-4 max-w-full text-sm font-normal lg:mb-10 lg:py-2 lg:pr-5 lg:pl-2"
+        >
+          <span className="me-2 flex size-8 shrink-0 items-center justify-center rounded-full bg-accent">
+            <Bell className="size-4" />
+          </span>
+          <p className="truncate whitespace-nowrap">
+            نسخه جدید منتشر شد؛ همکاری تیمی سریع‌تر و مدیریت پروژه‌ها ساده‌تر شده است.
+                                </p>
+        </Badge>
+        <h1 className="mb-6 text-xl leading-none font-bold tracking-tighter md:text-[7vw] lg:text-8xl">
+          همکاری تیمی را هوشمندتر مدیریت کنید
+                          </h1>
+        <p className="max-w-2xl text-muted-foreground md:text-[2vw] lg:text-xl">
+          همه ابزارهای موردنیاز برای برنامه‌ریزی، همکاری، مدیریت وظایف و تحویل پروژه‌ها را در یک پلتفرم در اختیار داشته باشید.
+                          </p>
+        <div className="mt-6 flex flex-col gap-4 sm:flex-row lg:mt-10">
+          <Button size="lg" className="w-full md:w-auto">
+            درخواست نسخه نمایشی
+                                </Button>
+          <Button size="lg" variant="outline" className="w-full md:w-auto">
+            <PlayCircle className="me-2 size-4" />
+            تماشای ویدیو
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero13 };
diff --git a/blocks/hero134.tsx b/blocks/hero134.tsx
new file mode 100644
index 0000000..25659b1
--- /dev/null
+++ b/blocks/hero134.tsx
@@ -0,0 +1,128 @@
+"use client";
+import { Play } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero134Props {
+  className?: string;
+}
+
+const Hero134 = ({ className }: Hero134Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  return (
+    <Fragment>
+      <section className={cn("bg-background py-12 md:py-20", className)}>
+        <div className="overflow-hidden border-b border-muted">
+          <div className="container">
+            <div className="flex flex-col items-center gap-16 md:gap-24">
+              <div className="flex flex-col items-center gap-8">
+                <div className="flex flex-col items-center gap-7">
+                  <h1 className="max-w-[920px] text-center text-xl leading-tight font-semibold text-foreground md:text-2xll lg:text-2xll">
+                    بازدیدکنندگان را به مشتریان وفادار تبدیل کنید
+                                                        </h1>
+                  <p className="max-w-[750px] text-center text-base leading-relaxed font-normal text-muted-foreground md:text-xl">
+                    فروش، موجودی، پرداخت و ارتباط با مشتریان را از هر دستگاهی مدیریت کنید.
+                                                        </p>
+                </div>
+
+                <div className="flex flex-wrap items-center justify-center gap-8">
+                  <Button className="group relative h-fit overflow-hidden rounded-full border-none px-6 py-5 font-semibold text-white max-lg:px-5 max-lg:py-3.5 lg:self-start">
+                    <div className="relative z-10 flex items-center gap-2.5">
+                      <span>شروع آزمایش رایگان</span>
+                    </div>
+                    <div className="absolute bottom-16 -left-16 aspect-square w-16 rounded-full bg-pink-400 transition-all duration-300 group-hover:bottom-1/2 group-hover:-left-5 group-hover:w-[110%] group-hover:translate-y-1/2"></div>
+                  </Button>
+
+                  <Button
+                    variant="ghost"
+                    onClick={() => setIsVideoOpen(true)}
+                    className="flex h-fit w-fit items-center gap-2 text-lg font-semibold uppercase hover:bg-transparent"
+                  >
+                    <div className="flex h-10 w-10 rounded-full bg-primary">
+                      <Play className="m-auto size-4 fill-white stroke-white" />
+                    </div>
+                    <div>پخش ویدیو</div>
+                  </Button>
+                </div>
+              </div>
+              <div className="w-full">
+                <div className="relative h-fit w-full">
+                  <div className="relative z-20 w-full max-w-[82.5rem] overflow-hidden rounded-t-xl md:rounded-t-3xl">
+                    <AspectRatio ratio={2.095238095 / 1}>
+                      <img
+                        src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                        alt="تصویر نمونه"
+                        className="size-full object-cover object-center"
+                      />
+                    </AspectRatio>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="container">
+          <div className="flex flex-col items-center gap-16 py-20">
+            <p className="text-center text-xl font-medium text-primary">
+              مورد اعتماد این برندها و بسیاری دیگر
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-20">
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg"
+                alt="تصویر نمونه"
+                className="w-36 opacity-55"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg"
+                alt="تصویر نمونه"
+                className="w-36 opacity-55"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
+                alt="تصویر نمونه"
+                className="w-36 opacity-55"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg"
+                alt="تصویر نمونه"
+                className="w-36 opacity-55"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg"
+                alt="تصویر نمونه"
+                className="w-36 opacity-55"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero134 };
diff --git a/blocks/hero135.tsx b/blocks/hero135.tsx
new file mode 100644
index 0000000..6572138
--- /dev/null
+++ b/blocks/hero135.tsx
@@ -0,0 +1,98 @@
+"use client";
+import { MessagesSquare, Play } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero135Props {
+  className?: string;
+}
+
+const Hero135 = ({ className }: Hero135Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <section
+        className={cn("bg-primary/5 py-12 font-sans md:py-20", className)}
+      >
+        <div className="container">
+          <div className="flex flex-col justify-center gap-8 lg:flex-row lg:items-center">
+            <div className="flex flex-1 flex-col gap-10">
+              <div className="flex w-fit items-center gap-2 rounded-md bg-muted py-2 pe-3 ps-4">
+                <MessagesSquare className="h-7 w-7 stroke-primary" />
+                <div className="text-lg font-bold text-foreground">
+                  مطالعات موردی
+                </div>
+              </div>
+              <h1 className="max-w-96 text-2xll font-medium text-foreground lg:text-8xl">
+                سفر مشتریان
+              </h1>
+              <p className="max-w-96 text-3xl leading-normal text-muted-foreground lg:text-xl">
+                گزارش موفقیت مشتریانی را بخوانید که با استفاده از پلتفرم ما درآمد خود را افزایش داده‌اند.
+                                            </p>
+            </div>
+            <div className="flex-1">
+              <div className="relative w-full overflow-hidden rounded-3xl">
+                <AspectRatio ratio={1}>
+                  <div className="size-full">
+                    <video
+                      src="/block-media/shadcnblocks/block/man-1.mp4"
+                      muted
+                      autoPlay
+                      loop
+                      className="size-full object-cover object-center"
+                    />
+                    <Button
+                      size="icon"
+                      onClick={() => setIsVideoOpen(true)}
+                      className="absolute bottom-0 left-0 m-10 flex size-fit w-fit items-center gap-4 rounded-full bg-background py-3 pe-8 ps-3 transition-transform hover:scale-105 hover:bg-background"
+                    >
+                      <div className="flex h-20 w-20 rounded-full bg-primary">
+                        <Play className="m-auto size-7! fill-white stroke-white" />
+                      </div>
+                      <div>
+                        <div className="text-start text-base font-semibold text-foreground">
+                          نام مشتری
+                                                                          </div>
+                        <div className="text-start text-base font-medium text-muted-foreground">
+                          مدیرعامل
+                        </div>
+                      </div>
+                    </Button>
+                  </div>
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero135 };
diff --git a/blocks/hero136.tsx b/blocks/hero136.tsx
new file mode 100644
index 0000000..b0fbbd4
--- /dev/null
+++ b/blocks/hero136.tsx
@@ -0,0 +1,99 @@
+import { ArrowRight, Sparkles } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero136Props {
+  className?: string;
+}
+
+const Hero136 = ({ className }: Hero136Props) => {
+  return (
+    <section className={cn("bg-background py-12 md:py-20", className)}>
+      <div className="container max-w-[100rem]">
+        <div className="flex flex-col items-center justify-center gap-5">
+          <div className="mb-3 flex h-20 w-20 rounded-3xl bg-black shadow-[0_-16px_0_-8px_var(--color-gray-300),0_-30px_0_-14px_var(--color-gray-100)]">
+            <Sparkles className="m-auto h-12 w-12 fill-white" />
+          </div>
+          <div className="max-w-[25rem] md:max-w-[31.25rem] lg:max-w-[43.75rem]">
+            <h1 className="mb-6 text-center text-[2.75rem] leading-tight font-semibold text-foreground md:text-[3.5rem] lg:text-[4.375rem]">
+              نمونه‌های برتر طراحی رابط کاربری را بررسی کنید.
+                                      </h1>
+            <p className="text-center text-xl text-muted-foreground">
+              به آرشیوی بزرگ از طراحی‌های وب، موبایل و اپلیکیشن دسترسی داشته باشید که به‌صورت مستمر به‌روزرسانی می‌شود.
+                                      </p>
+          </div>
+          <div>
+            <div className="mt-3 flex items-center justify-center gap-3">
+              <Button
+                asChild
+                className="h-fit rounded-full border border-primary px-4 py-3 text-base font-semibold"
+              >
+                <a href="#">عضویت رایگان</a>
+              </Button>
+              <Button
+                asChild
+                variant="outline"
+                className="flex h-fit items-center justify-center gap-2 rounded-full px-4 py-3 text-base font-semibold"
+              >
+                <a href="#">
+                  <div>مشاهده نمونه‌ها</div>
+                  <span className="flex h-6 w-6 rounded-full bg-zinc-100">
+                    <ArrowRight className="m-auto h-4 w-4 rtl:rotate-180" />
+                  </span>
+                </a>
+              </Button>
+            </div>
+          </div>
+          <div>
+            <div className="py-10 md:py-16">
+              <p className="text-center text-sm text-foreground/60">
+                مورد اعتماد تیم‌های طراحی در
+              </p>
+              <div className="mt-8 flex flex-wrap items-center justify-center gap-5 sm:flex-nowrap">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg"
+                  alt="تصویر نمونه"
+                  className="block h-3.5 w-auto opacity-50 md:h-5"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg"
+                  alt="تصویر نمونه"
+                  className="block h-3.5 w-auto opacity-50 md:h-5"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
+                  alt="تصویر نمونه"
+                  className="block h-3.5 w-auto opacity-50 md:h-5"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg"
+                  alt="تصویر نمونه"
+                  className="block h-3.5 w-auto opacity-50 md:h-5"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg"
+                  alt="تصویر نمونه"
+                  className="hidden h-3.5 w-auto opacity-50 md:block md:h-5"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="w-full xl:px-8">
+        <div className="relative mx-auto aspect-[1.259253731/1] w-full max-w-[96rem] overflow-hidden bg-zinc-950 xl:aspect-[1.896296296/1] xl:rounded-3xl">
+          <div className="absolute -bottom-1 left-[56%] aspect-[1.151758794/-1] w-[100%] -translate-x-1/2 overflow-hidden rounded-tl-2xl bg-background xl:left-1/2 xl:aspect-[1.933988764/1] xl:w-[87.5%] xl:rounded-tr-2xl">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر نمونه"
+              className="w-full object-cover object-top-left"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero136 };
diff --git a/blocks/hero14.tsx b/blocks/hero14.tsx
new file mode 100644
index 0000000..17877a8
--- /dev/null
+++ b/blocks/hero14.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import Autoplay from "embla-carousel-autoplay";
+import { useEffect, useRef, useState } from "react";
+
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const technologies = [
+  {
+    name: "Next",
+    command: "npx create-next-app my-app",
+    image:
+      "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+  },
+  {
+    name: "Vite",
+    command: "npm create vite@latest",
+    image:
+      "/block-media/shadcnblocks/block/logos/vite-icon.svg",
+  },
+  {
+    name: "Remix",
+    command: "npx create-remix@latest my-app",
+    image:
+      "/block-media/shadcnblocks/block/logos/remix-icon.svg",
+  },
+  {
+    name: "Gatsby",
+    command: "npm init gatsby",
+    image:
+      "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+  },
+  {
+    name: "Astro",
+    command: "npm create astro@latest",
+    image:
+      "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+  },
+
+  {
+    name: "Laravel",
+    command: "laravel new my-app ",
+    image:
+      "/block-media/shadcnblocks/block/logos/laravel-icon.svg",
+  },
+  {
+    name: "React",
+    command: "npx create-react-app my-app",
+    image:
+      "/block-media/shadcnblocks/block/logos/react-icon.svg",
+  },
+];
+
+interface Hero14Props {
+  className?: string;
+}
+
+const Hero14 = ({ className }: Hero14Props) => {
+  const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: false }));
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [fadeIn, setFadeIn] = useState(true);
+
+  useEffect(() => {
+    if (!api) return;
+
+    // Set initial selection
+    setCurrent(api.selectedScrollSnap());
+
+    // Create a reusable update function
+    const updateCurrent = () => {
+      // Trigger fade out and then update with fade in
+      setFadeIn(false);
+      setTimeout(() => {
+        setCurrent(api.selectedScrollSnap());
+        setFadeIn(true);
+      }, 200); // Short delay for the fade effect
+    };
+
+    // Add event listeners for both 'select' and 'settle'
+    api.on("select", updateCurrent);
+    api.on("settle", updateCurrent);
+
+    // Clean up event listeners when component unmounts
+    return () => {
+      api.off("select", updateCurrent);
+      api.off("settle", updateCurrent);
+    };
+  }, [api]);
+
+  // Function to manually select a technology
+  const selectTechnology = (index: number) => {
+    if (api) {
+      api.scrollTo(index);
+    }
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col justify-center">
+          <h1 className="mx-auto mb-4 max-w-2xl text-center text-xl font-bold md:text-2xll">
+            راه‌اندازی در چند دقیقه
+                                </h1>
+          <p className="mx-auto mt-4 max-w-xl text-center text-lg text-muted-foreground">
+            بدون پیچیدگی و تنها با چند مرحله ساده، پروژه خود را راه‌اندازی کرده و توسعه را آغاز کنید.
+                                </p>
+          <div className="mx-auto mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md bg-muted px-4 py-2 text-center">
+            <div
+              className={cn(
+                "flex items-center gap-2 transition-opacity duration-300",
+                fadeIn ? "opacity-100" : "opacity-0",
+              )}
+            >
+              <img
+                src={technologies[current]?.image}
+                alt={technologies[current]?.name}
+                className="h-4 md:h-7"
+              />
+
+              <p className="border-l px-2 font-mono text-sm">
+                {technologies[current]?.command}
+              </p>
+            </div>
+          </div>
+        </div>
+        <Carousel
+          setApi={setApi}
+          plugins={[plugin.current]}
+          opts={{
+            loop: true,
+          }}
+          className="relative mx-auto w-full max-w-3xl before:absolute before:top-0 before:bottom-0 before:left-0 before:z-10 before:w-36 before:bg-linear-to-r before:from-background before:to-transparent after:absolute after:top-0 after:right-0 after:bottom-0 after:z-10 after:w-36 after:bg-linear-to-l after:from-background after:to-transparent"
+          onMouseEnter={plugin.current.stop}
+          onMouseLeave={plugin.current.reset}
+        >
+          <CarouselContent>
+            {technologies.map((technology, idx) => (
+              <CarouselItem
+                key={idx}
+                className="basis-1/3 select-none sm:basis-1/4 md:basis-1/6"
+              >
+                <div
+                  className={cn(
+                    "flex cursor-pointer items-center justify-center gap-2 rounded-md border p-6",
+                    idx === current ? "border-input" : "border-transparent",
+                  )}
+                  onClick={() => selectTechnology(idx)}
+                >
+                  <img
+                    className="h-4 shrink-0 md:h-7"
+                    src={technology.image}
+                    alt={technology.name}
+                  />
+                  <p>{technology.name}</p>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Hero14 };
diff --git a/blocks/hero141.tsx b/blocks/hero141.tsx
new file mode 100644
index 0000000..47054bc
--- /dev/null
+++ b/blocks/hero141.tsx
@@ -0,0 +1,60 @@
+import { ChevronRight, Star } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero141Props {
+  className?: string;
+}
+
+const Hero141 = ({ className }: Hero141Props) => {
+  return (
+    <section
+      className={cn(
+        "dark relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-background px-5 font-sans",
+        className,
+      )}
+    >
+      <div className="relative z-10 flex size-full">
+        <div className="m-auto flex max-w-[25rem] flex-col items-center gap-9 sm:max-w-[31.25rem] md:max-w-[50rem]">
+          <h1 className="bg-linear-to-br from-neutral-100 to-neutral-600 bg-clip-text text-center text-xl leading-tight font-semibold text-transparent sm:text-2xll md:text-[4rem]">
+            تماس‌های ناخواسته را مدیریت کنید
+                                </h1>
+          <Button
+            asChild
+            className="flex h-fit w-fit items-center justify-center gap-2 rounded-full px-7 py-3.5 font-medium shadow-[0_0_5px_5px_rgba(255,255,255,.3)] transition-all duration-500 hover:bg-neutral-200 hover:shadow-[0_0_10px_5px_rgba(255,255,255,.5)]"
+          >
+            <a href="#">
+              <p>همین حالا تهیه کنید</p>
+              <ChevronRight className="size-5 rtl:rotate-180" />
+            </a>
+          </Button>
+          <div>
+            <div className="flex items-center justify-center gap-0.5">
+              <Star className="fill-muted2-foreground size-3" />
+              <Star className="fill-muted2-foreground size-3" />
+              <Star className="fill-muted2-foreground size-3" />
+              <Star className="fill-muted2-foreground size-3" />
+              <Star className="fill-muted2-foreground size-3" />
+            </div>
+            <p className="mt-1.5 max-w-40 text-center text-xs leading-snug font-medium text-foreground/60">
+              مورد اعتماد بیش از ۲٬۰۰۰ فرد پرکار
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute inset-0 size-full before:absolute before:inset-0 before:bg-background/85 before:content-['']">
+        <video
+          src="/block-media/shadcnblocks/block/video-1.mp4"
+          muted
+          autoPlay
+          loop
+          controls={false}
+          className="size-full object-cover object-center"
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Hero141 };
diff --git a/blocks/hero143.tsx b/blocks/hero143.tsx
new file mode 100644
index 0000000..e8e347d
--- /dev/null
+++ b/blocks/hero143.tsx
@@ -0,0 +1,114 @@
+import { ArrowRight } from "lucide-react";
+
+import { BorderBeam } from "@/components/ui/border-beam";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero143Props {
+  className?: string;
+}
+
+const Hero143 = ({ className }: Hero143Props) => {
+  return (
+    <section
+      className={cn(
+        "dark relative overflow-hidden bg-background py-12 font-sans md:py-20",
+        className,
+      )}
+    >
+      <div className="relative z-20 container max-w-[51.125rem]">
+        <div className="flex flex-col items-center">
+          <div className="flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52">
+            <div className="max-w-[25rem] sm:max-w-[33.75rem]">
+              <h1 className="text-center text-xl leading-tight font-semibold text-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-2xll md:text-[4rem]">
+                دسترسی سریع به همه ابزارهای موردنیاز
+                                            </h1>
+            </div>
+            <div className="max-w-[22.5rem] md:max-w-full">
+              <p className="text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg">
+                همه ابزارهای روزانه خود را از یک محیط سریع، ساده و قابل شخصی‌سازی مدیریت کنید.
+                                            </p>
+            </div>
+          </div>
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex flex-wrap items-center justify-center gap-4">
+              <Button
+                asChild
+                className="inline-flex h-fit w-full items-center justify-center gap-2 rounded-lg border px-3 py-2 text-sm leading-snug font-medium tracking-tight text-nowrap sm:w-fit"
+              >
+                <a href="#">
+                  <svg
+                    stroke="currentColor"
+                    fill="currentColor"
+                    strokeWidth="0"
+                    viewBox="0 0 384 512"
+                    className="h-5 w-5 fill-gray-900"
+                    height="1em"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path>
+                  </svg>
+                  <p>دانلود برای Mac</p>
+                </a>
+              </Button>
+              <Button
+                asChild
+                variant="outline"
+                className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-white/20 bg-linear-to-b from-white/5 to-white/15 px-3 py-2 text-sm leading-snug font-medium tracking-tight text-nowrap text-white transition-colors hover:border-white/40 sm:w-fit"
+              >
+                <a href="#">
+                  <svg
+                    stroke="currentColor"
+                    fill="currentColor"
+                    strokeWidth="0"
+                    viewBox="0 0 448 512"
+                    className="h-5 w-5 fill-white"
+                    height="1em"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"></path>
+                  </svg>
+                  <p>عضویت در فهرست انتظار ویندوز</p>
+                </a>
+              </Button>
+            </div>
+            <div className="flex gap-6 text-xs text-muted-foreground">
+              <span>v1.87.5</span>
+              <span className="relative before:absolute before:-start-3 before:content-['|']">
+                macOS 12+
+              </span>
+              <span className="relative before:absolute before:-start-3 before:content-['|']">
+                <button>نصب از طریق Homebrew</button>
+              </span>
+            </div>
+          </div>
+          <a
+            href="#"
+            className="group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium text-white"
+          >
+            <span>دانلود برای موبایل اپل</span>
+            <span className="flex items-center gap-1 text-muted-foreground">
+              <span>پیوستن به لیست انتظار</span>
+              <ArrowRight className="h-4 w-4 stroke-muted-foreground rtl:rotate-180" />
+            </span>
+            <BorderBeam colorFrom="#fca5a5" colorTo="#ef4444" duration={3} />
+          </a>
+        </div>
+      </div>
+      <div className="absolute -top-24 z-10 h-full w-full before:absolute before:inset-0 before:size-full before:bg-[radial-gradient(circle_at_center,rgba(10,10,10,.3)_15%,rgba(10,10,10,1)_45%)] before:content-['']">
+        <video
+          src="/block-media/shadcnblocks/block/video-2.mp4"
+          loop
+          muted
+          autoPlay
+          controls={false}
+          className="block size-full object-cover object-center bg-blend-saturation"
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Hero143 };
diff --git a/blocks/hero144.tsx b/blocks/hero144.tsx
new file mode 100644
index 0000000..9046dd3
--- /dev/null
+++ b/blocks/hero144.tsx
@@ -0,0 +1,116 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { cn } from "@/lib/utils";
+
+interface Hero144Props {
+  className?: string;
+}
+
+const Hero144 = ({ className }: Hero144Props) => {
+  return (
+    <section
+      className={cn("dark relative bg-background py-24 md:py-52", className)}
+    >
+      <div className="relative z-20 container">
+        <div className="flex w-full flex-col items-center gap-8">
+          <div className="w-full max-w-[43.125rem]">
+            <div className="flex w-full items-end justify-center gap-[2.8%]">
+              <div className="relative w-full max-w-[8.25rem] origin-bottom scale-[.83] overflow-hidden rounded-[20%] border border-stone-800 bg-stone-900 opacity-70 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] blur-[3px] before:absolute before:top-0 before:left-0 before:z-10 before:block before:size-full before:bg-linear-to-tr before:from-stone-950 before:to-transparent before:content-['']">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/sketch-icon.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="relative w-full max-w-[8.25rem] origin-bottom scale-90 overflow-hidden rounded-[20%] border border-stone-900 bg-stone-900 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tr before:from-black/50 before:to-transparent before:content-['']">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/figma-icon.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center p-3"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="w-full max-w-[8.25rem] overflow-hidden rounded-[20%] border border-stone-800 bg-stone-900 shadow-[inset_0_1px_1px_0_var(--color-stone-700)]">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/notion-icon.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="relative w-full max-w-[8.25rem] origin-bottom scale-90 overflow-hidden rounded-[20%] border border-stone-900 bg-stone-900 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tl before:from-black/50 before:to-transparent before:content-['']">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/spotify-icon.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="relative w-full max-w-[8.25rem] origin-bottom scale-[.83] overflow-hidden rounded-[20%] border border-stone-800 bg-stone-900 opacity-70 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] blur-[3px] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tl before:from-stone-950 before:to-transparent before:content-['']">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/vscode-icon.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+            </div>
+            <div className="flex w-full items-start justify-center gap-[2.8%] pt-[3%]">
+              <div className="relative w-full max-w-[7.625rem] origin-bottom scale-[.83] overflow-hidden rounded-[20%] border border-stone-950 bg-stone-900 opacity-70 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] blur-[3px] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tr before:from-stone-950 before:to-transparent before:content-['']">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="relative w-full max-w-[7.625rem] overflow-hidden rounded-[20%] border border-stone-950 bg-stone-900 opacity-90 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-t before:from-stone-950 before:to-transparent before:content-['']">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/github-icon-white.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="relative w-full max-w-[7.625rem] overflow-hidden rounded-[20%] border border-stone-950 bg-stone-900 opacity-90 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-t before:from-stone-950 before:to-transparent before:content-['']">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/slack-icon.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="relative w-full max-w-[7.625rem] origin-bottom scale-[.83] overflow-hidden rounded-[20%] border border-stone-950 bg-stone-900 opacity-70 shadow-[inset_0_1px_1px_0_var(--color-stone-700)] blur-[3px] before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-full before:w-full before:bg-linear-to-tl before:from-stone-950 before:to-transparent before:content-['']">
+                <AspectRatio ratio={1} className="flex">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/dropbox-icon.svg"
+                    alt="تصویر نمونه"
+                    className="m-auto w-[60%] object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <h1 className="mb-5 text-center font-sans text-2xll leading-tight font-semibold text-foreground md:text-2xll">
+              بیشتر کشف کنید
+            </h1>
+            <p className="max-w-[35rem] text-center font-sans text-xl text-muted-foreground">
+              هزاران اپلیکیشن کاربردی را مرور کنید و ابزار مناسب نیاز خود را پیدا کنید.
+                                      </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero144 };
diff --git a/blocks/hero145.tsx b/blocks/hero145.tsx
new file mode 100644
index 0000000..0b3ad27
--- /dev/null
+++ b/blocks/hero145.tsx
@@ -0,0 +1,81 @@
+import { ArrowDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero145Props {
+  className?: string;
+}
+
+const Hero145 = ({ className }: Hero145Props) => {
+  return (
+    <section
+      className={cn(
+        "dark relative h-svh max-h-[1400px] w-full bg-[url(/block-media/shadcnblocks/block/full-width-backgrounds/andrew-kliatskyi-uBg4k82xnI4-unsplash.jpg)] bg-cover bg-[100%] bg-no-repeat before:absolute before:top-0 before:left-0 before:size-full before:bg-[radial-gradient(circle_at_100%_-100%,transparent_40%,rgba(0,0,0,.75)_85%)] before:content-['']",
+        className,
+      )}
+    >
+      <div className="relative z-10 container flex size-full max-w-[103.125rem] flex-col justify-between pt-24 pb-14 md:justify-end">
+        <div className="flex h-full flex-col justify-between gap-6 md:justify-end">
+          <h1 className="text-xl leading-[2.25rem] font-bold text-foreground lg:text-2xll lg:leading-[3rem]! xl:text-2xll xl:leading-[5.5rem]!">
+            <div className="mb-2">به استخدام برترین</div>
+            <div className="relative h-[calc(2.25rem*3)] md:h-[2.25rem] lg:h-[3rem] xl:h-[5.5rem]">
+              <div className="absolute top-0 left-0 animate-[show-text_14s_ease-in-out_infinite_0s] will-change-[opacity]">
+                نمایندگان فروش امنیت سایبری
+              </div>
+              <div className="absolute top-0 left-0 animate-[show-text_14s_ease-in-out_infinite_2s] opacity-0 will-change-[opacity]">
+                تست‌کنندگان نفوذ
+              </div>
+              <div className="absolute top-0 left-0 animate-[show-text_14s_ease-in-out_infinite_4s] opacity-0 will-change-[opacity]">
+                مهندسان فروش
+              </div>
+              <div className="absolute top-0 left-0 animate-[show-text_14s_ease-in-out_infinite_6s] opacity-0 will-change-[opacity]">
+                معماران IAM
+              </div>
+              <div className="absolute top-0 left-0 animate-[show-text_14s_ease-in-out_infinite_8s] opacity-0 will-change-[opacity]">
+                مدیران ارشد امنیت اطلاعات
+              </div>
+              <div className="absolute top-0 left-0 animate-[show-text_14s_ease-in-out_infinite_10s] opacity-0 will-change-[opacity]">
+                مهندسان امنیت ابری
+              </div>
+              <div className="absolute top-0 left-0 animate-[show-text_14s_ease-in-out_infinite_12s] opacity-0 will-change-[opacity]">
+                مهندسان امنیت اپلیکیشن
+              </div>
+            </div>
+          </h1>
+          <div className="flex flex-col gap-8">
+            <p className="text-lg text-foreground lg:text-xl">
+              فرآیند جذب نیرو را سریع‌تر و هدفمندتر انجام دهید.
+                                      </p>
+            <div className="flex flex-wrap items-center justify-between gap-5">
+              <div className="flex flex-wrap items-center gap-5">
+                <Button
+                  asChild
+                  className="h-fit w-fit rounded-full px-7 py-3.5 text-xs font-semibold text-nowrap uppercase lg:px-9 lg:py-5 lg:text-base"
+                >
+                  <a href="#">عضویت در شبکه متخصصان</a>
+                </Button>
+                <Button
+                  asChild
+                  variant="outline"
+                  className="h-fit w-fit rounded-full border-white bg-transparent px-7 py-3.5 text-xs font-semibold text-nowrap text-white uppercase hover:bg-background/15 lg:px-9 lg:py-5 lg:text-base"
+                >
+                  <a href="#">جذب نیرو</a>
+                </Button>
+              </div>
+              <Button
+                variant="link"
+                className="flex h-fit w-fit items-center gap-2 text-xs font-semibold text-nowrap uppercase hover:no-underline lg:text-base"
+              >
+                <div>برای مشاهده بیشتر اسکرول کنید</div>
+                <ArrowDown className="size-3! stroke-white lg:size-4!" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero145 };
diff --git a/blocks/hero146.tsx b/blocks/hero146.tsx
new file mode 100644
index 0000000..740af24
--- /dev/null
+++ b/blocks/hero146.tsx
@@ -0,0 +1,96 @@
+"use client";
+import { Play } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero146Props {
+  className?: string;
+}
+
+const Hero146 = ({ className }: Hero146Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  return (
+    <Fragment>
+      <section
+        className={cn(
+          "border-muted2 border-b bg-[url(/block-media/shadcnblocks/block/patterns/grid-1.svg)] bg-[length:100%_100%] bg-center bg-no-repeat font-sans",
+          className,
+        )}
+      >
+        <div className="container pt-12 md:pt-24">
+          <div className="flex flex-col items-center gap-5">
+            <h1 className="max-w-[25rem] bg-linear-to-r from-neutral-900 via-neutral-700 to-neutral-800 bg-clip-text py-2 text-center text-xl leading-tight font-semibold tracking-tighter text-transparent md:max-w-[43.75rem] md:text-2xll lg:max-w-[56.25rem] lg:text-[5rem]">
+              عامل‌های هوش مصنوعی سازمانی، در کمترین زمان مستقر می‌شوند
+            </h1>
+            <p className="max-w-[22.5rem] text-center text-base text-muted-foreground md:max-w-[35rem] lg:text-lg">
+              عامل‌های هوش مصنوعی اختصاصی را بدون نیاز به برنامه‌نویسی طراحی، استقرار و به سرویس‌های مختلف متصل کنید.
+                                      </p>
+            <div className="pt-6">
+              <Button className="block h-fit w-fit animate-shadow-ping rounded-md border border-neutral-950 bg-[linear-gradient(180deg,var(--color-neutral-600),var(--color-neutral-700),var(--color-neutral-900))] px-6 py-3.5 text-center text-lg text-white">
+                <a href="#">شروع رایگان</a>
+              </Button>
+            </div>
+          </div>
+          <div className="relative mx-auto w-full max-w-[72rem] after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-20 after:block after:h-[45%] after:w-full after:bg-linear-to-t after:from-white after:to-transparent after:content-['']">
+            <div className="mt-14 flex w-full flex-col items-center gap-5 rounded-2xl border border-neutral-200 bg-neutral-100 p-3">
+              <p className="text-center text-xs font-medium text-foreground sm:text-sm md:text-lg">
+                مشاهده ساخت یک عامل هوش مصنوعی در{" "}
+                <span className="underline">۵ دقیقه</span> چند دقیقه.
+                                            </p>
+              <div className="relative w-full rounded-xl border border-neutral-200 bg-neutral-50">
+                <AspectRatio
+                  ratio={3.002666667 / 1}
+                  className="overflow-hidden"
+                >
+                  <div>
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
+                      alt="تصویر نمونه"
+                      className="w-full object-cover object-top-left"
+                    />
+                    <Button
+                      onClick={() => setIsVideoOpen(true)}
+                      size="icon"
+                      className="absolute top-1/2 left-1/2 z-30 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-500 shadow-[0_0_0_14px_var(--color-neutral-300)] transition-all hover:bg-neutral-600 hover:shadow-[0_0_0_0px_var(--color-neutral-300)] md:h-14 md:w-14 lg:h-20 lg:w-20"
+                    >
+                      <div className="m-auto aspect-square w-[45%]">
+                        <Play className="h-full! w-full! fill-white stroke-white" />
+                      </div>
+                    </Button>
+                  </div>
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero146 };
diff --git a/blocks/hero149.tsx b/blocks/hero149.tsx
new file mode 100644
index 0000000..0c1a651
--- /dev/null
+++ b/blocks/hero149.tsx
@@ -0,0 +1,116 @@
+"use client";
+import { CircleCheck } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero149Props {
+  className?: string;
+}
+
+const Hero149 = ({ className }: Hero149Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  return (
+    <Fragment>
+      <section
+        className={cn(
+          "font-plus_jakarta_sans relative overflow-hidden bg-background py-12 md:py-20",
+          className,
+        )}
+      >
+        <div className="relative z-20 container">
+          <div className="mx-auto flex max-w-[900px] flex-col gap-8">
+            <h1 className="text-center text-3xl leading-tight font-extrabold text-foreground sm:text-xl md:text-2xll">
+              تمام نیازهای طراحی خود را در یک سرویس مدیریت کنید.
+                                      </h1>
+            <p className="mx-auto max-w-[90%] text-center text-base text-foreground md:text-lg">
+              بدون استخدام تیم داخلی، به خدمات طراحی حرفه‌ای و تحویل سریع دسترسی داشته باشید.
+                                      </p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <Button
+                asChild
+                className="block h-fit w-fit rounded-md border-2 border-primary px-10 py-4 text-center text-lg font-bold"
+              >
+                <a href="#">رزرو دمو</a>
+              </Button>
+              <Button
+                asChild
+                variant="outline"
+                onClick={() => setIsVideoOpen(true)}
+                className="block h-fit w-fit rounded-md border-2 bg-transparent px-10 py-4 text-lg font-bold"
+              >
+                <a href="#">نحوه همکاری</a>
+              </Button>
+            </div>
+            <div className="mx-auto flex w-fit max-w-[585px] flex-col flex-wrap items-start justify-center gap-3 sm:w-full sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-2">
+                <CircleCheck className="size-5 fill-primary stroke-muted" />
+                <p className="text-sm font-light text-muted-foreground">
+                  وظایف نامحدود
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <CircleCheck className="size-5 fill-primary stroke-muted" />
+                <p className="text-sm font-light text-muted-foreground">
+                  نتیجه در کمتر از ۴۸ ساعت
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <CircleCheck className="size-5 fill-primary stroke-muted" />
+                <p className="text-sm font-light text-muted-foreground">
+                  لغو در هر زمان
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mx-auto mt-16 w-full max-w-[1000px] overflow-hidden rounded-xl shadow-[4px_2px_3.123rem_rgba(0,0,0,.15)]">
+            <AspectRatio ratio={1.406469761 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر نمونه"
+                className="size-full object-cover object-center"
+              />
+            </AspectRatio>
+          </div>
+        </div>
+        <img
+          src="/block-media/shadcnblocks/block/patterns/line.svg"
+          alt="تصویر نمونه"
+          className="absolute top-auto bottom-[13%] left-[-3%] z-10 block w-full"
+        />
+        <div className="absolute top-auto bottom-[32%] left-[31%] z-10 size-full md:top-[-6%] md:bottom-auto md:left-[13.875rem]">
+          <AspectRatio
+            ratio={1}
+            className="bg-[radial-gradient(closest-side,var(--color-accent),transparent)]"
+          />
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero149 };
diff --git a/blocks/hero15.tsx b/blocks/hero15.tsx
new file mode 100644
index 0000000..fc04cc8
--- /dev/null
+++ b/blocks/hero15.tsx
@@ -0,0 +1,63 @@
+import { ArrowUpRight } from "lucide-react";
+import { BiLogoPlayStore } from "react-icons/bi";
+import { FaApple } from "react-icons/fa";
+import { SiTrustpilot } from "react-icons/si";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero15Props {
+  className?: string;
+}
+
+const Hero15 = ({ className }: Hero15Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex items-center justify-center">
+          <Badge variant="outline" asChild>
+            <a href="#" className="inline-flex items-center py-0">
+              <span className="me-1 py-0.5 font-semibold">جدید</span>
+              <span className="mx-1 w-px self-stretch bg-border"></span>
+              <span className="py-0.5">مشاهده جزئیات</span>
+              <ArrowUpRight className="ms-1 size-3" />
+            </a>
+          </Badge>
+        </div>
+        <h1 className="mx-auto my-4 mb-6 max-w-3xl text-center text-3xl font-bold lg:text-2xll">
+          ابزارهایی برای افزایش بهره‌وری تیم شما
+                          </h1>
+        <p className="mx-auto mb-8 max-w-2xl text-center text-muted-foreground lg:text-xl">
+          فرآیندهای کاری را یکپارچه کنید و با تمرکز بیشتر، پروژه‌ها را سریع‌تر به نتیجه برسانید.
+                          </p>
+        <div className="flex justify-center">
+          <Button
+            size="lg"
+            className="w-full shadow-sm transition-shadow hover:shadow-md sm:w-auto lg:mt-10"
+          >
+            شروع رایگان
+                                </Button>
+        </div>
+        <div className="mt-8 lg:mt-12">
+          <ul className="flex flex-wrap justify-center gap-6 text-sm lg:text-base">
+            <li className="flex items-center gap-2 whitespace-nowrap">
+              <BiLogoPlayStore className="size-5" />
+              امتیاز ۴٫۷ در فروشگاه اندروید
+            </li>
+            <li className="flex items-center gap-2 whitespace-nowrap">
+              <FaApple className="size-5" />
+              امتیاز ۴٫۸ در فروشگاه آی‌اواس
+            </li>
+            <li className="flex items-center gap-2 whitespace-nowrap">
+              <SiTrustpilot className="size-5" />
+              امتیاز ۴٫۹ در سایت نظرسنجی
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero15 };
diff --git a/blocks/hero151.tsx b/blocks/hero151.tsx
new file mode 100644
index 0000000..d109a32
--- /dev/null
+++ b/blocks/hero151.tsx
@@ -0,0 +1,178 @@
+import { AvatarGroup } from "@/components/shadcnblocks/avatar-group";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Testimonial {
+  quote: string;
+  author: string;
+  role: string;
+  company: string;
+  avatars: Array<{
+    image: string;
+    fallback: string;
+  }>;
+}
+
+interface Hero151Props {
+  heading?: string;
+  description?: string;
+  button?: {
+    text: string;
+    url: string;
+    className?: string;
+  };
+  testimonial?: Testimonial;
+  images: {
+    first: string;
+    second: string;
+    third: string;
+    fourth: string;
+  };
+  className?: string;
+}
+
+const Hero151 = ({
+  heading = "مجموعه بلاک‌های آماده رابط کاربری",
+  description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی برای استفاده مستقیم در پروژه‌ها.",
+  button = {
+    text: "شروع رایگان",
+    url: "#",
+  },
+  testimonial = {
+    quote: "استراتژی متمرکز، تحویل سریع",
+    author: "John Doe",
+    role: "مدیرعامل",
+    company: "شرکت",
+    avatars: [
+      {
+        image:
+          "/block-media/shadcnblocks/block/avatar-2.webp",
+        fallback: "AB",
+      },
+      {
+        image:
+          "/block-media/shadcnblocks/block/avatar-2.webp",
+        fallback: "CD",
+      },
+      {
+        image:
+          "/block-media/shadcnblocks/block/avatar-3.webp",
+        fallback: "EF",
+      },
+    ],
+  },
+  images = {
+    first:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    second:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+    third:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+    fourth:
+      "/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg",
+  },
+  className,
+}: Hero151Props) => {
+  return (
+    <section className={cn("py-12 md:py-20", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-8 md:flex-row">
+          <div className="flex-1">
+            <div className="flex flex-col gap-4 lg:gap-8">
+              <h1 className="leading-tighter max-w-[80%] text-xl font-semibold tracking-tight text-foreground lg:text-2xll xl:text-2xll">
+                {heading}
+              </h1>
+              <p className="text-lg leading-relaxed text-muted-foreground xl:text-xl">
+                {description}
+              </p>
+            </div>
+            <div className="my-6 lg:my-10">
+              <Button asChild size="lg">
+                <a href={button.url}>{button.text}</a>
+              </Button>
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              <AvatarGroup className="h-10">
+                {testimonial.avatars.map((avatar, index) => (
+                  <Avatar
+                    key={index}
+                    className="size-10 border-2 border-border"
+                  >
+                    <AvatarImage src={avatar.image} alt="تصویر نمونه" />
+                    <AvatarFallback>{avatar.fallback}</AvatarFallback>
+                  </Avatar>
+                ))}
+              </AvatarGroup>
+              <div>
+                <p className="mb-1 text-sm text-foreground/60 italic">
+                  {testimonial.quote}
+                                                  </p>
+                <p className="text-sm font-medium text-foreground/60">
+                  {testimonial.author}, {testimonial.role} @
+                  {testimonial.company}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="w-full flex-1">
+            <div className="w-full max-w-[50rem]">
+              <AspectRatio ratio={1 / 1} className="h-full w-full">
+                <div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]">
+                  <div className="overflow-hidden rounded-[5.2%] border border-muted bg-muted">
+                    <img
+                      src={images.first}
+                      alt="تصویر نمونه"
+                      className="object-fit h-full w-full object-center"
+                    />
+                  </div>
+                  <div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
+                    <div className="absolute top-1/2 left-[5%] w-[110%] max-w-[25rem] -translate-y-1/2 overflow-hidden rounded-md">
+                      <AspectRatio ratio={1.739130435 / 1}>
+                        <img
+                          src={images.second}
+                          alt="تصویر نمونه"
+                          className="size-full object-cover object-center"
+                        />
+                      </AspectRatio>
+                    </div>
+                  </div>
+                  <div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
+                    <div className="absolute top-[9%] left-[9%] w-[200%] max-w-[37.5rem] overflow-hidden rounded-md">
+                      <AspectRatio ratio={1.6 / 1}>
+                        <img
+                          src={images.third}
+                          alt="تصویر نمونه"
+                          className="size-full object-cover object-center"
+                        />
+                      </AspectRatio>
+                    </div>
+                  </div>
+                  <div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
+                    <div className="relative top-[12%] left-[50%] w-[70%] max-w-[17.5rem] -translate-x-[50%]">
+                      <AspectRatio ratio={0.52 / 1}>
+                        <img
+                          src="/block-media/shadcnblocks/block/mockups/phone-1.png"
+                          alt="تصویر نمونه"
+                          className="absolute z-20 w-full"
+                        />
+                        <img
+                          src={images.fourth}
+                          alt="تصویر نمونه"
+                          className="absolute z-10 w-full rounded-[16%]"
+                        />
+                      </AspectRatio>
+                    </div>
+                  </div>
+                </div>
+              </AspectRatio>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero151 };
diff --git a/blocks/hero152.tsx b/blocks/hero152.tsx
new file mode 100644
index 0000000..a96382e
--- /dev/null
+++ b/blocks/hero152.tsx
@@ -0,0 +1,92 @@
+import { MoveUpRight, Star } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero152Props {
+  className?: string;
+}
+
+const Hero152 = ({ className }: Hero152Props) => {
+  return (
+    <section className={cn("bg-muted pt-12 font-sans md:pt-20", className)}>
+      <div className="mx-auto max-w-[99rem] px-0 sm:px-8">
+        <div className="container px-4">
+          <div className="mx-auto flex max-w-[25rem] flex-col items-center gap-6 sm:max-w-[31.25rem] lg:max-w-[40rem]">
+            <div className="flex items-center justify-center gap-2">
+              <Star className="size-5 fill-black stroke-black" />
+              <p className="text-sm text-nowrap">
+                مورد اعتماد بیش از ۷٬۰۰۰ مشتری
+              </p>
+            </div>
+            <div className="mb-2">
+              <h1 className="text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]">
+                سیستم طراحی که نتیجه می‌دهد
+              </h1>
+            </div>
+            <p className="text-center text-base leading-snug text-balance text-muted-foreground sm:text-xl">
+              رابط‌های کاربری را طراحی، نمونه‌سازی و شخصی‌سازی کنید و در کمترین زمان آماده توسعه نمایید.
+                                      </p>
+            <div className="flex w-full flex-wrap items-center gap-4 md:w-fit">
+              <Button
+                variant="secondary"
+                asChild
+                className="group flex h-fit min-w-[11.25rem] flex-1 items-center justify-center gap-1 rounded-[5rem] border-2 border-black px-4 py-3 text-base font-semibold md:min-w-fit md:flex-none"
+              >
+                <a href="#">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg"
+                    alt="تصویر نمونه"
+                    className="block size-6 shrink-0"
+                  />
+                  <p className="text-nowrap transition-all duration-300 ease-in-out group-hover:text-primary">
+                    پیش‌نمایش
+                  </p>
+                  <MoveUpRight className="size-6 shrink-0 stroke-black transition-all duration-300 ease-in-out group-hover:stroke-primary rtl:rotate-180" />
+                </a>
+              </Button>
+              <Button
+                asChild
+                variant="default"
+                className="group flex h-fit min-w-[11.25rem] flex-1 items-center justify-center gap-1 rounded-[5rem] border-2 border-primary bg-primary px-4 py-3 text-base font-semibold text-nowrap text-white md:min-w-fit md:flex-none"
+              >
+                <a href="#">دریافت کامپوننت‌ها</a>
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="relative mt-16 aspect-[1.2/1] overflow-hidden sm:-right-[10%] sm:right-auto sm:mt-28 sm:aspect-[2.788990826/1]">
+          <div className="absolute top-[11%] left-[8%] z-10 aspect-[0.7/1] w-[80%] sm:left-[4%] sm:w-[45%]">
+            <div className="size-full [transform:rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)]">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt="تصویر نمونه"
+                className="block size-full object-cover object-center"
+              />
+            </div>
+          </div>
+          <div className="absolute top-0 left-[70%] z-20 aspect-[0.7/1] w-[73%] -translate-x-1/2 sm:left-1/2 sm:w-[38%]">
+            <div className="size-full [transform:rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                alt="تصویر نمونه"
+                className="block size-full object-cover object-center"
+              />
+            </div>
+          </div>
+          <div className="absolute top-[3%] -right-[45%] z-30 aspect-[0.7/1] w-[85%] sm:-right-[2%] sm:w-[50%]">
+            <div className="size-full [transform:rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+                alt="تصویر نمونه"
+                className="block size-full object-cover object-center"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero152 };
diff --git a/blocks/hero154.tsx b/blocks/hero154.tsx
new file mode 100644
index 0000000..7c4cf6a
--- /dev/null
+++ b/blocks/hero154.tsx
@@ -0,0 +1,146 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Clock, Send } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const formSchema = z
+  .object({
+    email: z.string().email("آدرس ایمیل نامعتبر است"),
+  })
+  .required({ email: true });
+
+function HeroFrom() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
+      <div className="flex w-full flex-col items-start justify-center gap-2 sm:flex-row">
+        <Controller
+          control={form.control}
+          name="email"
+          render={({ field, fieldState }) => (
+            <Field className="w-full" data-invalid={fieldState.invalid}>
+              <FieldLabel htmlFor={field.name} className="sr-only">
+                ایمیل
+              </FieldLabel>
+              <Input
+                {...field}
+                type="email"
+                id={field.name}
+                aria-invalid={fieldState.invalid}
+                placeholder="ایمیل کاری شما"
+                className="h-12 w-full rounded-lg px-3 py-2 text-center text-sm leading-loose"
+              />
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+        <div className="w-full shrink-0 sm:w-fit">
+          <Button
+            type="submit"
+            className="h-fit w-full rounded-lg px-4 py-2.5 text-sm leading-loose font-medium sm:w-fit"
+          >
+            رایگان شروع کنید
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+interface Hero154Props {
+  className?: string;
+}
+
+const Hero154 = ({ className }: Hero154Props) => {
+  return (
+    <section
+      className={cn(
+        "border-b border-b-primary/50 bg-background pt-12 md:pt-20",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="flex w-full flex-col items-center justify-center gap-16">
+          <div className="flex flex-col justify-center gap-12">
+            <div className="flex w-full max-w-[32.5rem] flex-col gap-6">
+              <h1 className="text-center text-xl font-medium tracking-tighter text-foreground md:text-2xll">
+                کنترل هزینه‌های شرکت خود را به دست بگیرید.
+              </h1>
+              <p className="text-center text-base text-muted-foreground">
+                هزینه‌ها، پرداخت‌ها و گزارش‌های مالی را از یک داشبورد یکپارچه مدیریت کنید.
+                                            </p>
+              <div className="mx-auto w-full max-w-[25.625rem]">
+                <HeroFrom />
+              </div>
+            </div>
+            <div className="flex items-center justify-center gap-8">
+              <div className="flex items-center gap-2">
+                <Clock className="h-4 w-4 stroke-foreground" />
+                <div className="text-xs font-medium text-muted-foreground">
+                  ۴٫۷ در سایت مقایسه
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Send className="h-4 w-4 stroke-foreground" />
+                <div className="text-xs font-medium text-muted-foreground">
+                  ۴٫۸ در سایت مقایسه
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="w-full">
+            <div className="relative mx-auto w-full max-w-[62.5rem] overflow-hidden">
+              <AspectRatio ratio={2.100840336 / 1}>
+                <div className="w-full">
+                  <div className="absolute top-0 left-0 w-[94.2%] overflow-hidden">
+                    <img
+                      src="/block-media/shadcnblocks/block/mockups/desktop-1.png"
+                      alt="تصویر نمونه"
+                      className="relative z-20 h-full w-full"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="absolute top-[3%] left-[2%] z-10 w-full object-contain"
+                    />
+                  </div>
+                  <div className="absolute right-0 -bottom-[35%] z-20 w-[23%] overflow-hidden">
+                    <img
+                      src="/block-media/shadcnblocks/block/mockups/phone-3.png"
+                      alt="تصویر نمونه"
+                      className="relative z-20 h-full w-full"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
+                      alt="تصویر نمونه"
+                      className="absolute top-0 left-1/2 z-10 w-full -translate-x-1/2 rounded-[15px] md:rounded-[30px]"
+                    />
+                  </div>
+                </div>
+              </AspectRatio>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero154 };
diff --git a/blocks/hero157.tsx b/blocks/hero157.tsx
new file mode 100644
index 0000000..efcc7c6
--- /dev/null
+++ b/blocks/hero157.tsx
@@ -0,0 +1,51 @@
+import { MoveUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero157Props {
+  className?: string;
+}
+
+const Hero157 = ({ className }: Hero157Props) => {
+  return (
+    <section
+      className={cn(
+        "dark font-poppins relative h-svh max-h-[1400px] w-full overflow-hidden bg-[url('/block-media/shadcnblocks/block/full-width-backgrounds/andrew-kliatskyi-MaVm_A0xhKk-unsplash.jpg')] bg-cover bg-center bg-no-repeat py-12 after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-black/65 after:content-[''] md:py-20",
+        className,
+      )}
+    >
+      <div className="relative z-20 container h-full w-full max-w-[85rem]">
+        <div className="flex h-full w-full flex-col justify-end gap-12">
+          <div className="flex max-w-[61.375rem] flex-col gap-1">
+            <p className="text-sm leading-none text-muted-foreground uppercase">
+              پیشرو در طراحی معماری
+                                      </p>
+            <h1 className="text-3xl leading-snug! text-foreground md:text-xl lg:text-2xll">
+              طراحی فضاهای متمایز با نوآوری‌های معماری پیشرفته
+            </h1>
+          </div>
+          <div className="flex w-full flex-col justify-between gap-5 sm:flex-row sm:items-center">
+            <p className="max-w-[20.25rem] border-s border-muted-foreground ps-6 text-base text-muted-foreground">
+              پلتفرم CRM و بازاریابی می‌سازیم که به تیم‌های فروش کمک می‌کند درآمد را افزایش دهند.
+                                      </p>
+            <div className="shrink-0">
+              <Button
+                asChild
+                variant="outline"
+                className="group flex h-fit w-fit items-center gap-3 rounded-full border border-muted-foreground/40 bg-transparent px-6 py-4 text-sm text-foreground uppercase hover:bg-transparent"
+              >
+                <a href="#">
+                  <p className="group-hover:underline">پروژه‌های ما</p>
+                  <MoveUpRight className="h-4! w-4! fill-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 rtl:rotate-180" />
+                </a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero157 };
diff --git a/blocks/hero158.tsx b/blocks/hero158.tsx
new file mode 100644
index 0000000..2acb853
--- /dev/null
+++ b/blocks/hero158.tsx
@@ -0,0 +1,81 @@
+import { MoveRight } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero158Props {
+  className?: string;
+}
+
+const Hero158 = ({ className }: Hero158Props) => {
+  return (
+    <section className={cn("bg-primary/5 py-12 font-sans md:py-20", className)}>
+      <div className="container max-w-[87.5rem]">
+        <div className="grid grid-cols-1 gap-[5.625rem] lg:grid-cols-2">
+          <div>
+            <div className="flex flex-col gap-12">
+              <div>
+                <h1 className="mb-3 text-xl font-bold md:text-2xll lg:text-2xll">
+                  چشم‌انداز ما برای آینده‌ای نوآورانه و بهتر را کشف کنید
+                </h1>
+                <p className="text-lg text-muted-foreground">
+                  با راهکارهای نوآورانه، مسیر رشد و تحول دیجیتال را در کنار ما تجربه کنید.
+                                                  </p>
+              </div>
+              <Button
+                asChild
+                className="group flex h-fit w-fit items-center gap-2 rounded-full px-8 py-3"
+              >
+                <a href="#">
+                  <div className="font-medium text-white">شروع رایگان</div>
+                  <div className="relative h-6 w-7 overflow-hidden">
+                    <div className="absolute top-0 left-0 flex -translate-x-1/2 items-center transition-all duration-500 group-hover:translate-x-0">
+                      <MoveRight className="h-6! w-6! fill-white px-1 rtl:rotate-180" />
+                      <MoveRight className="h-6! w-6! fill-white px-1 rtl:rotate-180" />
+                    </div>
+                  </div>
+                </a>
+              </Button>
+            </div>
+          </div>
+          <div>
+            <AspectRatio ratio={1.390658174 / 1}>
+              <div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-5 lg:max-w-[38.9375rem] lg:gap-8">
+                <div className="col-[1/2] row-[1/3]">
+                  <div className="h-full w-full overflow-hidden rounded-xl sm:rounded-2xl xl:rounded-3xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </div>
+                </div>
+                <div className="col-[2/3] row-[1/2]">
+                  <div className="h-full w-full overflow-hidden rounded-xl sm:rounded-2xl xl:rounded-3xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </div>
+                </div>
+                <div className="col-[2/3] row-[2/3]">
+                  <div className="h-full w-full overflow-hidden rounded-xl sm:rounded-2xl xl:rounded-3xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </div>
+                </div>
+              </div>
+            </AspectRatio>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero158 };
diff --git a/blocks/hero159.tsx b/blocks/hero159.tsx
new file mode 100644
index 0000000..87d4e8d
--- /dev/null
+++ b/blocks/hero159.tsx
@@ -0,0 +1,88 @@
+import { MoveRight } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero159Props {
+  className?: string;
+}
+
+const Hero159 = ({ className }: Hero159Props) => {
+  return (
+    <section
+      className={cn(
+        "relative overflow-hidden bg-primary/5 pt-28 pb-12 md:pt-40 md:pb-20 lg:pt-48",
+        className,
+      )}
+    >
+      <div className="relative z-10 container">
+        <div className="grid grid-cols-1 gap-x-20 gap-y-10 md:grid-cols-[1fr_1fr] xl:gap-x-48">
+          <div>
+            <div className="flex h-full flex-col justify-between gap-6 md:gap-24">
+              <div>
+                <h1 className="mb-4 text-2xll leading-tight font-bold text-gray-900 lg:text-[3.625rem] xl:text-2xll">
+                  موفقیت مالی شما را ممکن می‌کنیم
+                </h1>
+                <p className="text-lg text-muted-foreground">
+                  ابزارهای حرفه‌ای مدیریت سرمایه، تحلیل مالی و برنامه‌ریزی را در یک پلتفرم امن در اختیار داشته باشید.
+                                                  </p>
+              </div>
+              <div className="flex flex-wrap items-center gap-5">
+                <Button
+                  asChild
+                  className="group flex h-fit w-fit items-center gap-2 rounded-full px-8 py-3"
+                >
+                  <a href="#">
+                    <div className="font-medium text-white">
+                      شروع رایگان
+                    </div>
+                    <div className="relative h-6 w-7 overflow-hidden">
+                      <div className="absolute top-0 left-0 flex -translate-x-1/2 items-center transition-all duration-500 group-hover:translate-x-0">
+                        <MoveRight className="h-6! w-6! stroke-white px-1 rtl:rotate-180" />
+                        <MoveRight className="h-6! w-6! stroke-white px-1 rtl:rotate-180" />
+                      </div>
+                    </div>
+                  </a>
+                </Button>
+                <p className="text-muted-foreground">
+                  بدون هزینه عضویت اولیه
+                                                  </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative">
+            <div className="h-full w-full md:max-w-[37.5rem]">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt="تصویر نمونه"
+                className="aspect-[1.026845638/1] h-full w-full rounded-xl object-cover object-center lg:aspect-[1.34529148/1]"
+              />
+            </div>
+            <div className="absolute bottom-[4%] left-[4%] w-36 lg:w-56">
+              <AspectRatio
+                ratio={1.140102041 / 1}
+                className="overflow-hidden rounded-lg border shadow-sm"
+              >
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-white-1.svg"
+                  alt="تصویر نمونه"
+                  className="h-full w-full object-cover object-center"
+                />
+              </AspectRatio>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute -top-36 right-0 hidden w-1/2 rounded-bl-[1.875rem] md:block md:h-[34.375rem] xl:h-[41.5625rem]">
+        <img
+          src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
+          alt="تصویر نمونه"
+          className="h-full w-full object-cover object-center"
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Hero159 };
diff --git a/blocks/hero16.tsx b/blocks/hero16.tsx
new file mode 100644
index 0000000..d7eae28
--- /dev/null
+++ b/blocks/hero16.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero16Props {
+  className?: string;
+}
+
+const Hero16 = ({ className }: Hero16Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center text-center">
+        <h1 className="my-3 text-3xl font-bold text-pretty sm:text-xl md:my-6 lg:text-2xll">
+          توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                          </h1>
+        <p className="mb-6 max-w-xl text-muted-foreground lg:mb-12 lg:text-xl">
+          کامپوننت‌ها و بلاک‌های آماده به شما کمک می‌کنند بدون اتلاف زمان، رابط کاربری حرفه‌ای ایجاد کنید.
+                          </p>
+        <div className="mb-6 flex gap-2 lg:mb-12">
+          <Button>شروع رایگان</Button>
+          <Button variant="outline">مشاهده امکانات</Button>
+        </div>
+      </div>
+      <div className="container">
+        <div className="aspect-video [mask-image:linear-gradient(#000_80%,transparent_100%)]">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه قهرمان"
+            className="h-full w-full rounded-md object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero16 };
diff --git a/blocks/hero160.tsx b/blocks/hero160.tsx
new file mode 100644
index 0000000..00c46b3
--- /dev/null
+++ b/blocks/hero160.tsx
@@ -0,0 +1,73 @@
+import { Circle, Trophy } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero160Props {
+  className?: string;
+}
+
+const Hero160 = ({ className }: Hero160Props) => {
+  return (
+    <section
+      className={cn(
+        "dark relative overflow-hidden bg-background py-12 font-sans md:py-28",
+        className,
+      )}
+    >
+      <img
+        src="/block-media/external/unsplash/photo-1637946175559-22c4fe13fc54.jpg"
+        alt="تصویر نمونه"
+        className="absolute top-0 left-0 z-10 aspect-2/1 w-full"
+      />
+      <div className="absolute inset-0 z-20 bg-linear-to-b from-transparent to-black" />
+      <div className="relative z-20 container">
+        <div className="flex flex-col items-center gap-5">
+          <Badge className="mb-2 flex w-fit items-center gap-2 rounded-full border border-muted-foreground bg-background px-4 py-2 hover:bg-background">
+            <Trophy className="h-4 w-4 stroke-muted-foreground" />
+            <p className="text-sm leading-normal font-light text-muted-foreground">
+              برترین استارتاپ سال ۲۲۳
+            </p>
+          </Badge>
+          <h1 className="bg-[linear-gradient(135deg,theme(colors.muted2.DEFAULT)_25%,theme(colors.muted2.foreground))] w-full max-w-[37.5rem] bg-clip-text py-2 text-center text-xl leading-tight font-normal text-transparent md:max-w-[50rem] md:text-2xll xl:max-w-[62.5rem] xl:text-[3.6rem]">
+            پرداخت‌ها را هوشمند مدیریت کنید و فروش خود را افزایش دهید.
+                                </h1>
+          <p className="w-full max-w-[51.875rem] text-center text-xl text-muted-foreground">
+            فرآیندهای مالی و فروش را یکپارچه کنید و با تصمیم‌گیری مبتنی بر داده، رشد پایدارتری تجربه کنید.
+                                </p>
+          <div className="mt-4 flex flex-col items-center gap-4 md:flex-row">
+            <Button asChild>
+              <a href="#">شروع آزمایش رایگان</a>
+            </Button>
+            <Button variant="secondary">
+              <a href="#">درخواست نسخه نمایشی</a>
+            </Button>
+          </div>
+          <div className="flex flex-wrap items-center gap-3 md:flex-row">
+            <p className="text-sm text-muted-foreground">
+              نیاز به کارت اعتباری نیست
+            </p>
+            <Circle className="h-1 w-1 fill-muted-foreground" />
+            <p className="text-sm text-muted-foreground">لغو در هر زمان</p>
+          </div>
+        </div>
+      </div>
+      <div className="relative z-20 mx-auto max-w-[86.5rem] px-8 py-20 md:py-32">
+        <AspectRatio
+          ratio={1.562130178 / 1}
+          className="overflow-hidden rounded-2xl border border-white/15"
+        >
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="h-full w-full object-cover object-center"
+          />
+        </AspectRatio>
+      </div>
+    </section>
+  );
+};
+
+export { Hero160 };
diff --git a/blocks/hero162.tsx b/blocks/hero162.tsx
new file mode 100644
index 0000000..20cc6c8
--- /dev/null
+++ b/blocks/hero162.tsx
@@ -0,0 +1,80 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero162Props {
+  className?: string;
+}
+
+const Hero162 = ({ className }: Hero162Props) => {
+  return (
+    <section
+      className={cn(
+        "dark relative bg-background font-sans lg:h-[62.5rem]",
+        className,
+      )}
+    >
+      <div className="container flex h-full w-full items-center py-20 lg:py-0">
+        <div className="mx-auto grid h-full w-full max-w-[87.5rem] grid-cols-1 items-center gap-20 lg:grid-cols-2">
+          <div>
+            <h1 className="mb-4 text-2xll leading-tight font-medium text-foreground">
+              تعیین استانداردهای تازه صنعت از طریق تعالی
+            </h1>
+            <p className="text-xl text-foreground">
+              خدمات تخصصی سلامت روان با رویکردی علمی و برنامه‌های درمانی متناسب با نیاز هر فرد.
+                                      </p>
+            <div className="mt-10">
+              <Button
+                asChild
+                variant="outline"
+                className="block h-fit w-fit rounded-lg border-2 border-white bg-transparent px-8 py-5 text-lg leading-tight font-medium text-white transition duration-500 hover:scale-105 hover:bg-background hover:text-black"
+              >
+                <a href="#">خدمات ما</a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="top-0 right-0 bottom-0 left-auto m-5 ms-0 w-full px-8 pb-5 lg:absolute lg:max-w-[50%] lg:px-0">
+        <div className="grid h-full w-full grid-cols-1 grid-rows-[18.75rem_13.125rem_10rem] gap-5 md:grid-cols-[3fr_2fr] md:grid-rows-[80%_minmax(20%,9.375rem)]">
+          <div className="row-[1/2] overflow-hidden md:col-[1/3]">
+            <div className="h-full w-full overflow-hidden rounded-3xl bg-muted">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر نمونه"
+                className="h-full w-full object-cover object-center"
+              />
+            </div>
+          </div>
+          <div className="col-[1/2] row-[2/3]">
+            <div className="flex h-full flex-col gap-3 overflow-hidden rounded-3xl bg-muted p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8">
+              <div className="h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-[7.5rem] md:w-[7.5rem]">
+                <img
+                  src="/block-media/shadcnblocks/block/avatar-1.webp"
+                  alt="تصویر نمونه"
+                  className="h-full w-full object-cover object-center"
+                />
+              </div>
+              <div className="flex h-full w-full flex-col justify-between gap-2">
+                <p className="text-lg font-medium text-foreground">
+                  «از زمان شروع جلسات، کیفیت زندگی و آرامش ذهنی من به شکل محسوسی بهتر شده است.»
+                                                  </p>
+                <p className="text-foreground">مراجع</p>
+              </div>
+            </div>
+          </div>
+          <div className="row-[3/4] md:col-[2/3] md:row-[2/3]">
+            <div className="h-full w-full overflow-hidden rounded-3xl bg-muted">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="تصویر نمونه"
+                className="h-full w-full object-cover object-center"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero162 };
diff --git a/blocks/hero163.tsx b/blocks/hero163.tsx
new file mode 100644
index 0000000..c80b2b1
--- /dev/null
+++ b/blocks/hero163.tsx
@@ -0,0 +1,70 @@
+import { cn } from "@/lib/utils";
+
+interface Hero163Props {
+  className?: string;
+}
+
+const Hero163 = ({ className }: Hero163Props) => {
+  return (
+    <section
+      className={cn("dark bg-background py-12 font-sans md:py-20", className)}
+    >
+      <div className="container">
+        <div className="mx-auto mb-24 flex max-w-[900px] flex-col items-center gap-3">
+          <p className="text-center text-foreground">تیم پشتیبانی شما</p>
+          <h1 className="text-center text-xl leading-tight font-medium text-foreground sm:text-2xll md:text-2xll">
+            متخصصان باتجربه متعهد به سلامت روان شما
+          </h1>
+        </div>
+        <div className="grid w-full max-w-[83.125rem] auto-cols-auto grid-cols-2 grid-rows-[auto_auto] justify-center gap-5 md:grid-cols-[repeat(4,1fr)]">
+          <div className="col-[1/2] row-[1/2] w-full">
+            <div className="h-full max-h-[19.375rem] w-full overflow-hidden rounded-2xl">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر نمونه"
+                className="block h-full w-full object-cover object-center"
+              />
+            </div>
+          </div>
+          <div className="col-[2/3] row-[1/2] w-full md:col-[2/3] md:row-[1/2]">
+            <div className="h-full max-h-[19.375rem] w-full overflow-hidden rounded-2xl">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="تصویر نمونه"
+                className="block h-full w-full object-cover object-center"
+              />
+            </div>
+          </div>
+          <div className="col-[1/3] row-[3/4] w-full md:col-[1/3] md:row-[2/3]">
+            <div className="flex h-full min-h-[9.375rem] flex-col gap-3 overflow-hidden rounded-3xl bg-muted p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8">
+              <div className="h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-[7.5rem] md:w-[7.5rem]">
+                <img
+                  src="/block-media/shadcnblocks/block/avatar-1.webp"
+                  alt="تصویر نمونه"
+                  className="h-full w-full object-cover object-center"
+                />
+              </div>
+              <div className="flex h-full w-full flex-col justify-between gap-2">
+                <p className="text-lg font-medium text-foreground">
+                  «از زمان شروع جلسات، کیفیت زندگی و آرامش ذهنی من به شکل محسوسی بهتر شده است.»
+                                                  </p>
+                <p className="text-foreground">مراجع</p>
+              </div>
+            </div>
+          </div>
+          <div className="col-[1/3] row-[2/3] h-[25rem] w-full md:col-[3/5] md:row-[1/3] md:h-auto">
+            <div className="h-full max-h-[32.625rem] w-full overflow-hidden rounded-2xl">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt="تصویر نمونه"
+                className="block h-full w-full object-cover object-center"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero163 };
diff --git a/blocks/hero164.tsx b/blocks/hero164.tsx
new file mode 100644
index 0000000..d8cc5fc
--- /dev/null
+++ b/blocks/hero164.tsx
@@ -0,0 +1,92 @@
+"use client";
+import { Play } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero164Props {
+  className?: string;
+}
+
+const Hero164 = ({ className }: Hero164Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <section className={cn("font-onest py-12 md:py-28", className)}>
+        <div className="container">
+          <div className="grid w-full grid-cols-1 gap-6 lg:grid-cols-2">
+            <div>
+              <div className="flex h-full flex-col justify-between gap-12">
+                <div className="flex max-w-[41.25rem] flex-col gap-9">
+                  <h1 className="text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]">
+                    رشد شغلی با منتورینگ تخصصی
+                  </h1>
+                  <p className="text-lg font-medium text-primary md:text-xl">
+                    با راهنمایی منتورهای باتجربه، مسیر شغلی و مهارت‌های حرفه‌ای خود را با برنامه‌ای متناسب با اهداف شخصی توسعه دهید.
+                                                        </p>
+                  <Button
+                    asChild
+                    variant="default"
+                    className="h-fit w-fit rounded-full px-8 py-4 font-semibold"
+                  >
+                    <a href="#">شروع منتورینگ</a>
+                  </Button>
+                </div>
+                <div className="flex max-w-[24.375rem] flex-col gap-6">
+                  <p className="text-xl text-primary">
+                    ویدیوی معرفی ما را ببینید تا با خدمات ما آشنا شوید
+                  </p>
+                  <Button
+                    variant="ghost"
+                    onClick={() => setIsVideoOpen(true)}
+                    className="group relative flex aspect-video h-full w-full max-w-[24.375rem] overflow-hidden rounded-lg bg-accent bg-[url('/block-media/shadcnblocks/block/placeholder-2.svg')] bg-[length:100%_100%] bg-center bg-no-repeat p-0 transition-all after:absolute after:block after:h-full after:w-full after:bg-background/5 after:content-[''] hover:bg-accent hover:bg-[length:120%_120%] hover:after:bg-black/15"
+                  >
+                    <AspectRatio ratio={16 / 9} className="flex h-full w-full">
+                      <div className="m-auto aspect-square">
+                        <Play className="h-10! w-10! fill-white stroke-white transition-transform group-hover:scale-125" />
+                      </div>
+                    </AspectRatio>
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر نمونه"
+                className="aspect-[4/5] h-full max-h-[62.5rem] w-full rounded-xl object-cover object-center"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[50rem]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero164 };
diff --git a/blocks/hero165.tsx b/blocks/hero165.tsx
new file mode 100644
index 0000000..253078e
--- /dev/null
+++ b/blocks/hero165.tsx
@@ -0,0 +1,60 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { cn } from "@/lib/utils";
+
+interface Hero165Props {
+  className?: string;
+}
+
+const Hero165 = ({ className }: Hero165Props) => {
+  return (
+    <section className={cn("bg-background py-12 md:py-20", className)}>
+      <div className="container max-w-[98.125rem]">
+        <div className="grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2">
+          <div className="w-full max-w-[41.625rem]">
+            <AspectRatio ratio={0.815177479 / 1}>
+              <div className="mx-auto grid h-full w-full grid-cols-[14.7%_47.29%_14.7%_14.7%] grid-rows-[34.7%_26.28%_34.7%] gap-x-[2.85%] gap-y-[2.32%]">
+                <div className="col-[1/3] row-[1/3]">
+                  <div className="h-full w-full overflow-hidden rounded-[2vw] bg-blue-100 lg:rounded-[1.2vw] xl:rounded-2xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </div>
+                </div>
+                <div className="col-[3/5] row-[2/3]">
+                  <div className="h-full w-full overflow-hidden rounded-[2vw] bg-green-100 lg:rounded-[1.2vw] xl:rounded-2xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </div>
+                </div>
+                <div className="col-[2/4] row-[3/4]">
+                  <div className="h-full w-full overflow-hidden rounded-[2vw] bg-pink-100 lg:rounded-[1.2vw] xl:rounded-2xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover object-center"
+                    />
+                  </div>
+                </div>
+              </div>
+            </AspectRatio>
+          </div>
+          <div className="flex w-full max-w-[31.25rem] flex-col gap-14 lg:max-w-full">
+            <h1 className="font-serif text-2xll text-foreground lg:text-2xll xl:text-[5rem]">
+              عملیات کسب‌وکار خود را متحول کنید
+            </h1>
+            <p className="font-montserrat text-xl leading-snug text-foreground lg:text-3xl xl:text-xl">
+              همه ابزارهای موردنیاز برای مدیریت پروژه‌ها، مشتریان و عملیات آژانس را در یک پلتفرم یکپارچه در اختیار داشته باشید.
+                                      </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero165 };
diff --git a/blocks/hero166.tsx b/blocks/hero166.tsx
new file mode 100644
index 0000000..eeb1a34
--- /dev/null
+++ b/blocks/hero166.tsx
@@ -0,0 +1,97 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero166Props {
+  className?: string;
+}
+
+const Hero166 = ({ className }: Hero166Props) => {
+  return (
+    <section className={cn("bg-background py-12 md:py-20", className)}>
+      <div className="container max-w-[111rem]">
+        <div className="grid w-full grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2">
+          <div className="flex w-full max-w-[31.25rem] flex-col gap-8 md:gap-14 lg:max-w-full">
+            <h1 className="font-serif text-2xll text-foreground md:text-2xll lg:text-2xll xl:text-[5rem]">
+              عملیات کسب‌وکار خود را متحول کنید
+            </h1>
+            <p className="font-montserrat text-xl leading-snug text-foreground lg:text-3xl xl:text-xl">
+              همه ابزارهای موردنیاز برای مدیریت پروژه‌ها، مشتریان و عملیات آژانس را در یک پلتفرم یکپارچه در اختیار داشته باشید.
+                                      </p>
+            <Button
+              asChild
+              className="block h-fit w-fit rounded-lg px-7 py-3.5 text-lg font-medium transition-all duration-300 hover:-translate-y-1"
+            >
+              <a href="#">درخواست نسخه نمایشی</a>
+            </Button>
+          </div>
+          <div className="mx-auto w-full max-w-[52.875rem] lg:mx-0">
+            <AspectRatio ratio={1.049627792 / 1}>
+              <div className="grid w-full grid-cols-2 items-center justify-center gap-4">
+                <div className="flex flex-col items-end justify-center gap-4">
+                  <div className="relative animate-[transform1_15s_ease-in-out_infinite] overflow-hidden rounded-lg">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image1_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image2_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                  </div>
+                  <div className="relative animate-[transform2_15s_ease-in-out_infinite] overflow-hidden rounded-lg">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image1_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-5.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image2_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image3_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col items-start justify-center gap-4">
+                  <div className="relative animate-[transform4_15s_ease-in-out_infinite] overflow-hidden rounded-lg">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image3_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                  </div>
+                  <div className="relative animate-[transform3_15s_ease-in-out_infinite] overflow-hidden rounded-lg">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image1_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-5.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image2_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-6.svg"
+                      alt="تصویر نمونه"
+                      className="absolute block h-full w-full animate-[image3_15s_ease-in-out_infinite] object-cover object-center"
+                    />
+                  </div>
+                </div>
+              </div>
+            </AspectRatio>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero166 };
diff --git a/blocks/hero167.tsx b/blocks/hero167.tsx
new file mode 100644
index 0000000..ccdf9d2
--- /dev/null
+++ b/blocks/hero167.tsx
@@ -0,0 +1,84 @@
+import { ArrowRight } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero167Props {
+  className?: string;
+}
+
+const Hero167 = ({ className }: Hero167Props) => {
+  return (
+    <section
+      className={cn("overflow-hidden bg-background py-20 font-sans", className)}
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 gap-x-10 gap-y-16 lg:grid-cols-2">
+          <div className="flex flex-col gap-12">
+            <div className="max-w-[31.25rem]">
+              <h1 className="mb-8 font-sans text-2xll font-semibold text-foreground md:text-2xll">
+                توانایی مراقبت را گسترش دهید
+              </h1>
+              <p className="text-xl text-muted-foreground">
+                ناکارآمدی‌ها را حذف و مراقبت از بیمار را با سیستم جامع بهداشت
+                و درمانی که گردش‌کار شما را یکپارچه و بهینه می‌کند، ارتقا دهید.
+              </p>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Button
+                asChild
+                variant="outline"
+                className="group inline-flex h-fit w-fit flex-wrap items-center gap-2 rounded-full border border-black px-5 py-3 transition-all hover:bg-black hover:shadow-[0_2px_15px_2px_var(--color-muted-foreground)]"
+              >
+                <a href="#">
+                  <p className="text-sm font-medium text-black transition-colors group-hover:text-white">
+                    برترین مراقبت مجازی
+                  </p>
+                  <ArrowRight className="size-4! stroke-black transition-colors group-hover:stroke-white rtl:rotate-180" />
+                </a>
+              </Button>
+              <Button
+                asChild
+                variant="outline"
+                className="group inline-flex h-fit w-fit flex-wrap items-center gap-2 rounded-full border border-black px-5 py-3 transition-all hover:bg-black hover:shadow-[0_2px_15px_2px_var(--color-muted-foreground)]"
+              >
+                <a href="#">
+                  <p className="text-sm font-medium text-black transition-colors group-hover:text-white">
+                    برترین هوش مصنوعی گفتگومحور
+                  </p>
+                  <ArrowRight className="size-4! stroke-black transition-colors group-hover:stroke-white rtl:rotate-180" />
+                </a>
+              </Button>
+            </div>
+          </div>
+          <div className="">
+            <div className="relative -me-8 h-[25rem] min-w-[50vw] rounded-lg bg-linear-to-b from-[#fbf7ec] to-[#e2f1ee] md:h-[45.625rem]">
+              <div className="absolute top-16 left-24 w-[26.25rem] overflow-hidden rounded-lg shadow-lg md:top-32 md:left-40 md:w-[42.5rem] md:rounded-xl lg:left-24 lg:w-[46.25rem]">
+                <AspectRatio ratio={1.466424682 / 1}>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                    className="size-full object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+
+              <div className="absolute bottom-4 left-32 w-full max-w-[8.75rem] overflow-hidden rounded-md shadow-xl md:left-72 md:max-w-[16.5625rem] md:rounded-xl lg:bottom-10 lg:left-52 xl:left-32">
+                <AspectRatio ratio={1.698717949 / 1}>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-4.svg"
+                    alt="تصویر نمونه"
+                    className="size-full object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero167 };
diff --git a/blocks/hero168.tsx b/blocks/hero168.tsx
new file mode 100644
index 0000000..b471ce8
--- /dev/null
+++ b/blocks/hero168.tsx
@@ -0,0 +1,60 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero168Props {
+  className?: string;
+}
+
+const Hero168 = ({ className }: Hero168Props) => {
+  return (
+    <section className={cn("overflow-hidden py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-start justify-between gap-8 md:flex-row xl:gap-20">
+          <div className="flex w-full flex-col items-start text-start">
+            <h1 className="mb-8 text-xl font-normal text-pretty md:text-2xll">
+              راهکارهای هوشمند برای رشد کسب‌وکار
+                                      </h1>
+            <p className="mb-12 max-w-[70%] text-xl font-normal text-muted-foreground">
+              با استفاده از ابزارهای یکپارچه و هوشمند، بهره‌وری تیم را افزایش دهید و فرایندهای کاری را ساده‌تر کنید.
+                                      </p>
+            <div className="flex w-full justify-start md:justify-start">
+              <Button className="px-5 py-3" variant="outline">
+                شروع رایگان <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+          <div className="relative flex h-[600px] w-full rounded-md sm:h-[750px]">
+            <div className="absolute flex h-[600px] w-screen rounded-md bg-linear-to-b from-muted/50 to-muted sm:h-[750px]">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt="تصویر نمونه"
+                className="my-auto ms-20 block h-4/6 w-auto rounded-md object-cover md:w-2/5"
+              />
+              <div className="absolute top-1/2 -left-5 md:-left-20 lg:-left-44">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                  alt="تصویر نمونه"
+                  className="mb-6 h-[134px] w-[230px] rounded-lg object-cover shadow-md lg:h-[142px] lg:w-[265px]"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+                  alt="تصویر نمونه"
+                  className="h-[115px] w-[230px] rounded-lg bg-muted shadow-md lg:h-[122px] lg:w-[265px]"
+                />
+              </div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+                alt="تصویر نمونه"
+                className="absolute bottom-[70%] -left-5 h-[146px] w-[230px] rounded-lg bg-muted shadow-md md:bottom-10 md:left-1/4 lg:h-[156px] lg:w-[265px] 2xl:left-32"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero168 };
diff --git a/blocks/hero170.tsx b/blocks/hero170.tsx
new file mode 100644
index 0000000..0fc3b34
--- /dev/null
+++ b/blocks/hero170.tsx
@@ -0,0 +1,119 @@
+import { FaGithub } from "react-icons/fa6";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero170Props {
+  className?: string;
+}
+
+const Hero170 = ({ className }: Hero170Props) => {
+  return (
+    <section
+      className={cn(
+        "dark overflow-hidden bg-background pt-12 font-sans md:pt-20",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="mx-auto max-w-[48.75rem]">
+          <h1 className="mb-6 text-center text-3xl leading-tight font-bold text-foreground md:text-xl lg:text-2xll">
+            استارتاپ خود را با ابزارهای حرفه‌ای سریع‌تر رشد دهید
+                                </h1>
+          <p className="mx-auto mb-9 max-w-[37.5rem] text-center text-base font-medium text-foreground md:text-lg">
+            داشبوردی یکپارچه برای تحلیل داده‌ها، مدیریت پروژه و همکاری تیمی که تصمیم‌گیری را سریع‌تر و دقیق‌تر می‌کند.
+                                </p>
+          <div className="mb-10 flex flex-wrap items-center justify-center gap-5">
+            <Button
+              asChild
+              className="block h-fit w-fit rounded-md px-7 py-[0.875rem] font-medium"
+            >
+              <a href="#">دانلود رایگان</a>
+            </Button>
+            <Button
+              variant="secondary"
+              asChild
+              className="flex h-fit w-fit items-center gap-4 rounded-md px-7 py-[0.875rem] font-medium"
+            >
+              <a href="#">
+                <FaGithub className="size-6!" />
+                <div>ستاره در مخزن کد</div>
+              </a>
+            </Button>
+          </div>
+          <p className="mb-4 text-center text-muted-foreground">
+            سرویس خود را به ابزارها و اتصال‌های محبوب متصل کنید.
+                                </p>
+          <div className="flex items-center justify-center gap-4">
+            <Button asChild size="icon" variant="ghost" className="block w-fit">
+              <a href="#">
+                <img
+                  src="/block-media/shadcnblocks/block/block-1.svg"
+                  alt="لوگو"
+                  className="size-10 invert"
+                />
+              </a>
+            </Button>
+            <Button asChild size="icon" variant="ghost" className="block w-fit">
+              <a href="#">
+                <img
+                  src="/block-media/shadcnblocks/block/block-2.svg"
+                  alt="لوگو"
+                  className="size-10 invert"
+                />
+              </a>
+            </Button>
+            <Button asChild size="icon" variant="ghost" className="block w-fit">
+              <a href="#">
+                <img
+                  src="/block-media/shadcnblocks/block/block-3.svg"
+                  alt="لوگو"
+                  className="size-10 invert"
+                />
+              </a>
+            </Button>
+            <Button asChild size="icon" variant="ghost" className="block w-fit">
+              <a href="#">
+                <img
+                  src="/block-media/shadcnblocks/block/block-4.svg"
+                  alt="لوگو"
+                  className="size-10 invert"
+                />
+              </a>
+            </Button>
+            <Button asChild size="icon" variant="ghost" className="block w-fit">
+              <a href="#">
+                <img
+                  src="/block-media/shadcnblocks/block/block-5.svg"
+                  alt="لوگو"
+                  className="size-10 invert"
+                />
+              </a>
+            </Button>
+          </div>
+        </div>
+        <div>
+          <div className="relative mx-auto mt-16 w-full max-w-[52.8rem]">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
+              alt="تصویر نمونه"
+              className="relative z-20 -mb-[2px] block w-full rounded-tl-lg rounded-tr-lg"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/patterns/dots.svg"
+              alt="تصویر نمونه"
+              className="absolute top-0 end-0 z-10 h-20 w-20 translate-x-[20%] -translate-y-[30%] sm:h-32 sm:w-32 md:h-40 md:w-40"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/patterns/dots.svg"
+              alt="تصویر نمونه"
+              className="absolute bottom-0 start-0 z-10 h-20 w-20 -translate-x-[30%] translate-y-[30%] sm:h-32 sm:w-32 md:h-40 md:w-40"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero170 };
diff --git a/blocks/hero171.tsx b/blocks/hero171.tsx
new file mode 100644
index 0000000..fbc9bdc
--- /dev/null
+++ b/blocks/hero171.tsx
@@ -0,0 +1,224 @@
+"use client";
+import { AudioLines, Play, Plus, Signal } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero171Props {
+  className?: string;
+}
+
+const Hero171 = ({ className }: Hero171Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  return (
+    <Fragment>
+      <section className={cn("bg-background py-12 md:py-20", className)}>
+        <div className="container">
+          <div className="flex flex-col items-center gap-20 lg:flex-row lg:items-start">
+            <div className="max-w-[28.125rem]">
+              <h1 className="text-2xll font-medium text-foreground lg:text-2xll">
+                مدیریت رزرو را خودکار کنید
+                                            </h1>
+              <p className="mt-6 text-lg text-muted-foreground">
+                فرآیند رزرو، هماهنگی و مدیریت مشتریان را خودکار کنید و زمان بیشتری برای توسعه کسب‌وکار داشته باشید.
+                                            </p>
+              <div className="mt-11 flex gap-5">
+                <Button
+                  asChild
+                  className="group block h-fit w-fit rounded-full px-7 py-6 text-base leading-none font-bold"
+                >
+                  <a href="#">
+                    <span
+                      data-text="امتحان رایگان"
+                      className="text-red relative inline-block origin-[50%_0%] p-0 transition-all [transform-style:preserve-3d] group-hover:[transform:rotateX(90deg)] before:absolute before:top-full before:left-0 before:h-full before:w-full before:origin-[50%_0%] before:[transform:rotateX(-90deg)] before:p-0 before:text-center before:content-[attr(data-text)]"
+                    >
+                      شروع آزمایش رایگان
+                                                              </span>
+                  </a>
+                </Button>
+                <Button
+                  asChild
+                  variant="secondary"
+                  className="group block h-fit w-fit rounded-full px-7 py-6 text-base leading-none font-bold"
+                >
+                  <a href="#">
+                    <span
+                      data-text="تماس با ما"
+                      className="text-red relative inline-block origin-[50%_0%] p-0 transition-all [transform-style:preserve-3d] group-hover:[transform:rotateX(90deg)] before:absolute before:top-full before:left-0 before:h-full before:w-full before:origin-[50%_0%] before:[transform:rotateX(-90deg)] before:p-0 before:text-center before:content-[attr(data-text)]"
+                    >
+                      تماس با ما
+                    </span>
+                  </a>
+                </Button>
+              </div>
+              <div className="border-muted2 mt-12 flex gap-14 border-t">
+                <div className="mt-8">
+                  <div className="relative flex -space-x-5">
+                    <Avatar className="border-muted2 relative h-14 w-14 rounded-full border-2">
+                      <AvatarImage
+                        src="/block-media/shadcnblocks/block/avatar-1.webp"
+                        alt="آواتار ۱"
+                      />
+                      <AvatarFallback>AB</AvatarFallback>
+                    </Avatar>
+                    <Avatar className="border-muted2 relative h-14 w-14 rounded-full border-2">
+                      <AvatarImage
+                        src="/block-media/shadcnblocks/block/avatar-2.webp"
+                        alt="آواتار ۲"
+                      />
+                      <AvatarFallback>AB</AvatarFallback>
+                    </Avatar>
+                    <Avatar className="border-muted2 relative h-14 w-14 rounded-full border-2">
+                      <AvatarImage
+                        src="/block-media/shadcnblocks/block/avatar-3.webp"
+                        alt="آواتار ۳"
+                      />
+                      <AvatarFallback>AB</AvatarFallback>
+                    </Avatar>
+                    <div className="border-muted2 relative flex h-14 w-14 shrink-0 rounded-full border-2 bg-background">
+                      <Plus className="m-auto size-4 fill-slate-900" />
+                    </div>
+                  </div>
+                  <div className="mt-4 flex flex-wrap items-center gap-4">
+                    <div className="text-2xll font-medium text-foreground/60">
+                      97K
+                    </div>
+                    <div className="max-w-28 text-base leading-tight font-light text-foreground/60">
+                      کاربر فعال
+                                                              </div>
+                  </div>
+                </div>
+                <div className="border-muted2 mt-8 border-s ps-12">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={() => setIsVideoOpen(true)}
+                    className="group flex h-14 w-14 rounded-full border border-primary transition hover:scale-110"
+                  >
+                    <Play className="m-auto size-3.5 fill-primary transition" />
+                  </Button>
+                  <p className="mt-4 max-w-28 text-base leading-tight font-light text-foreground/60">
+                    مشاهده معرفی محصول
+                                                        </p>
+                </div>
+              </div>
+            </div>
+            <div className="mx-auto">
+              <div className="grid grid-cols-[4.8rem_5.625rem_10.75rem] grid-rows-[9.3rem_8.68rem_1.125rem_3.875rem] gap-[0.625rem] sm:grid-cols-[5.3rem_6.25rem_12rem] sm:grid-rows-[10.3rem_9.625rem_1.25rem_4.3rem] sm:gap-[0.8rem] xl:grid-cols-[8.5rem_10rem_19.3rem] xl:grid-rows-[16.625rem_15.5rem_1.375rem_6.9rem] xl:gap-[1.25rem]">
+                <div className="col-[2/-1] overflow-hidden rounded-3xl bg-blue-200">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                    className="size-full object-cover object-center"
+                  />
+                </div>
+                <div className="col-[1/2] row-[1/2] self-end">
+                  <svg
+                    className="w-[4.375rem] fill-muted-foreground xl:w-[8rem]"
+                    viewBox="0 0 131 174"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M123.385 5.96661C123.548 6.77895 123.021 7.56919 122.209 7.73166C115.896 8.99415 109.63 9.96037 103.486 10.9077C99.0811 11.5869 94.7393 12.2564 90.4886 13.0183C80.1979 14.8631 70.1037 17.2952 59.8744 21.8151C41.5635 29.906 25.0024 41.8876 14.0337 58.7365C8.37592 67.4273 4.29836 78.5442 3.60483 89.504C2.91206 100.452 5.59556 111.123 13.2956 119.15C17.2013 123.222 22.165 126.554 27.7033 129.043C26.3041 123.491 25.7088 117.6 26.1196 111.355C27.0927 96.5641 39.1649 88.8778 52.0447 87.6439C64.8739 86.4148 79.2577 91.4779 85.4762 102.943C88.8209 109.11 89.0032 115.236 86.7021 120.549C84.4187 125.822 79.7615 130.137 73.7 132.917C63.9444 137.39 51.9845 138.282 40.6769 136.184C37.8771 135.664 35.1075 134.96 32.412 134.076C37.8412 148.683 49.141 160.796 61.9724 170.755C62.6268 171.263 62.7456 172.205 62.2377 172.86C61.7298 173.514 60.7875 173.633 60.133 173.125C46.4556 162.51 34.1037 149.186 28.7723 132.754C22.0105 130.053 15.8772 126.176 11.1305 121.227C2.69861 112.436 -0.119486 100.855 0.610818 89.3145C1.34036 77.7856 5.61055 66.1764 11.5195 57.0997C22.8909 39.6323 39.9827 27.3247 58.6619 19.071C69.1997 14.4148 79.5552 11.9305 89.9592 10.0654C94.3905 9.27105 98.7725 8.59677 103.176 7.91915C109.222 6.98883 115.309 6.05221 121.62 4.78992C122.433 4.62745 123.223 5.15427 123.385 5.96661ZM31.2114 130.479C34.4288 131.674 37.7946 132.598 41.2243 133.234C52.0581 135.245 63.3684 134.354 72.4495 130.19C77.9974 127.646 82.0229 123.805 83.9492 119.357C85.8579 114.95 85.7769 109.79 82.8391 104.373C77.3783 94.3052 64.3988 89.4741 52.3308 90.6302C40.3135 91.7815 29.9547 98.7598 29.1131 111.552C28.6714 118.266 29.4591 124.568 31.2114 130.479Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M114.056 1.72566C114.207 0.911209 114.99 0.373802 115.805 0.525328C115.89 0.541148 116.012 0.563426 116.166 0.591592C117.344 0.806885 120.403 1.36614 123.271 2.01411C124.885 2.37873 126.488 2.78252 127.676 3.18084C128.255 3.37485 128.823 3.59596 129.256 3.84814C129.46 3.96696 129.753 4.15933 129.988 4.44833C130.241 4.75995 130.578 5.40289 130.28 6.16935C129.856 7.25995 128.921 8.03458 128.094 8.58288C127.232 9.15452 126.215 9.65136 125.335 10.0779L125.264 10.1127C124.363 10.5492 123.633 10.9033 123.11 11.2487C122.902 11.386 122.778 11.4897 122.71 11.5572C122.597 12.2744 121.977 12.8231 121.228 12.8231C120.4 12.8231 119.728 12.1516 119.728 11.3231C119.728 10.6196 120.043 10.064 120.366 9.67844C120.683 9.29947 121.082 8.99272 121.457 8.745C122.152 8.28613 123.048 7.85224 123.862 7.45814C123.917 7.43145 123.972 7.40493 124.026 7.3786C124.936 6.93764 125.77 6.52466 126.436 6.08262C126.489 6.04781 126.539 6.01368 126.587 5.98025C125.557 5.64496 124.135 5.28497 122.61 4.94034C119.811 4.30799 116.823 3.76151 115.632 3.54375C115.473 3.5147 115.346 3.49149 115.256 3.47472C114.442 3.32319 113.904 2.54011 114.056 1.72566ZM127.788 6.46672C127.788 6.46675 127.785 6.46476 127.779 6.46068C127.785 6.46465 127.788 6.46669 127.788 6.46672Z"
+                    />
+                  </svg>
+                </div>
+                <div className="col-[1/3] overflow-hidden rounded-3xl bg-muted">
+                  <div className="p-5 xl:p-7">
+                    <div className="flex gap-7">
+                      <div className="text-xl leading-none text-foreground xl:text-2xll">
+                        99%
+                      </div>
+                      <Signal className="h-9 w-9 stroke-foreground xl:h-14 xl:w-14" />
+                    </div>
+                    <p className="mt-3 text-xs text-foreground md:text-sm xl:mt-7 xl:text-xl">
+                      تماس‌های{" "}
+                      <span className="font-bold text-foreground/60">
+                        صوتی و تصویری
+                      </span>{" "}
+                      صدایی شفاف با حذف نویز
+                                                              </p>
+                  </div>
+                </div>
+                <div className="col-[2/3] row-[-3/-1] flex h-full w-full items-center justify-center overflow-hidden rounded-3xl bg-muted">
+                  <AudioLines className="mx-auto size-16 stroke-foreground xl:size-27" />
+                </div>
+                <div className="relative col-[3/4] row-[2/4] rounded-3xl bg-muted">
+                  <div className="h-full w-full overflow-hidden rounded-3xl">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                      alt=""
+                      className="size-full object-cover object-center"
+                    />
+                  </div>
+                  <svg
+                    className="absolute -right-10 -bottom-20 w-12 rotate-45 fill-muted-foreground xl:-right-14 xl:-bottom-24 xl:w-16"
+                    viewBox="0 0 90 184"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M82.3024 182.601C81.9706 183.654 80.8475 184.239 79.794 183.908C61.988 178.3 44.3459 170.161 28.8638 159.628C27.9867 159.032 27.0952 158.433 26.1953 157.829C19.3285 153.217 11.9733 148.278 6.79983 141.399C1.60997 134.499 0.117312 128.254 1.83895 122.43C2.6984 119.522 4.32632 116.846 6.49378 114.34C5.35517 113.106 4.35358 111.733 3.52901 110.202C0.650361 104.857 -0.218529 98.5344 0.0443264 92.3589C0.307769 86.1696 1.71314 79.9869 3.52802 74.7987C6.69986 65.7313 12.4429 58.6702 19.6577 53.195C12.3683 47.5787 9.48814 39.1289 10.8726 29.8393C12.4961 18.9454 20.6761 11.4583 29.4427 6.62192C30.6367 5.96323 31.853 5.36019 33.0898 4.81414C32.6941 4.2623 32.3003 3.71906 31.9081 3.18775C31.2521 2.29908 31.4407 1.04688 32.3294 0.390874C33.218 -0.265116 34.4702 -0.0765027 35.1262 0.812169C35.7502 1.65741 36.3517 2.49315 36.9405 3.3212C40.0542 2.27675 43.2795 1.57898 46.5911 1.24683C46.6891 1.237 46.7946 1.226 46.9069 1.2143C47.9181 1.10892 49.4784 0.946293 50.9907 1.06971C52.6143 1.20221 54.7929 1.707 56.0859 3.59542C57.7733 6.05985 57.6463 9.09276 56.7901 11.555C55.9341 14.0168 54.2062 16.3578 52.0068 17.5835C49.5695 18.9417 47.2092 19.1616 45.0203 18.356C42.9436 17.5916 41.279 15.9963 39.9217 14.2581C38.3955 12.3034 36.9096 10.2152 35.4536 8.1518C34.067 8.73156 32.7065 9.38967 31.3749 10.1243C23.0707 14.7056 16.1837 21.3381 14.8289 30.4289C13.5775 38.8256 16.3089 46.1012 23.1133 50.7625C25.3554 49.2979 27.7094 47.964 30.1477 46.7504C38.4925 42.5968 47.3718 40.5021 56.4215 39.4065L56.6665 39.3768C62.6119 38.6565 70.4082 37.7119 76.8537 39.8042C78.4687 40.3284 80.1229 41.2783 81.2992 42.6776C82.5177 44.1272 83.2123 46.067 82.7269 48.2956C82.2241 50.6043 80.7223 52.4194 79.1373 53.7643C77.5359 55.1229 75.6762 56.1504 74.1276 56.8586C66.8292 60.1963 58.4963 61.2743 50.803 61.3583C41.5426 61.4595 31.7569 60.2088 23.2355 55.5241C15.9695 60.7389 10.3301 67.4678 7.30368 76.1195C5.59322 81.0092 4.28448 86.8017 4.04071 92.5291C3.79633 98.2704 4.62711 103.806 7.05067 108.305C7.66677 109.449 8.41725 110.498 9.28332 111.46C10.7025 110.137 12.2604 108.858 13.9176 107.613C19.0542 103.753 25.1603 101.362 30.9 99.1141C31.9728 98.6939 33.0328 98.2788 34.0713 97.86C44.8345 93.5196 54.5514 90.7828 66.1479 90.2536C73.0985 89.9364 80.1661 91.5085 85.7372 96.3378C87.9729 98.2757 89.3101 100.449 89.7945 102.77C90.2767 105.08 89.8719 107.333 88.9817 109.369C87.2323 113.37 83.5007 116.81 79.8943 119.046C67.1806 126.927 52.1165 127.684 38.0675 125.998C32.5974 125.342 25.6204 124.358 19.2411 122.116C15.756 120.891 12.3561 119.258 9.45526 117.031C7.61589 119.173 6.33377 121.335 5.67485 123.564C4.42421 127.794 5.29376 132.742 9.99659 138.995C14.7347 145.295 21.485 149.836 28.4179 154.501C29.3147 155.104 30.2147 155.71 31.1137 156.321C46.2316 166.606 63.5108 174.586 80.9955 180.092C82.049 180.424 82.6341 181.547 82.3024 182.601ZM12.2732 114.144C14.6418 115.885 17.4723 117.254 20.5675 118.342C26.4986 120.427 33.0943 121.373 38.544 122.027C52.2124 123.667 66.1958 122.831 77.7867 115.646C81.015 113.645 84.0131 110.748 85.3166 107.767C85.9528 106.311 86.1552 104.911 85.8789 103.587C85.6048 102.274 84.8178 100.834 83.1172 99.3603C78.5409 95.3933 72.5898 93.9638 66.3302 94.2495C55.3243 94.7517 46.0648 97.3365 35.5673 101.57C34.451 102.02 33.3389 102.457 32.2355 102.89C26.491 105.145 20.9813 107.309 16.3204 110.811C14.835 111.927 13.4829 113.036 12.2732 114.144ZM27.0739 52.996C34.3044 56.4253 42.561 57.4481 50.7594 57.3586C58.1681 57.2777 65.8758 56.2339 72.4641 53.2209C73.8174 52.6021 75.3239 51.754 76.5494 50.7142C77.7911 49.6606 78.5768 48.5544 78.8186 47.4444C79.0025 46.5997 78.7792 45.8962 78.2372 45.2514C77.6531 44.5565 76.7044 43.9612 75.6187 43.6087C70.0866 41.8129 63.1142 42.6254 56.9023 43.3775C48.1375 44.4386 39.7384 46.4448 31.9301 50.3313C30.2579 51.1636 28.6366 52.0507 27.0739 52.996ZM39.3592 6.74785C40.562 8.44837 41.77 10.1257 43.0745 11.7963C44.2391 13.2879 45.3417 14.2119 46.4019 14.6021C47.3499 14.9511 48.4962 14.9607 50.0597 14.0894C51.2263 13.4392 52.4054 11.9857 53.012 10.2413C53.6183 8.4975 53.5095 6.91275 52.7854 5.85524C52.5467 5.5067 51.9551 5.16172 50.6653 5.05646C49.547 4.9652 48.3598 5.08681 47.3096 5.19439C47.2017 5.20545 47.0952 5.21636 46.9903 5.22687C44.3846 5.48822 41.8363 5.99839 39.3592 6.74785Z"
+                    />
+                  </svg>
+                </div>
+                <div className="col-[-2/-1] row-[-1/-2]">
+                  <div className="flex w-full items-center gap-3">
+                    <div className="h-12 w-12 shrink-0 rounded-full bg-muted"></div>
+                    <div className="flex w-full flex-col gap-1">
+                      <div className="h-6 w-[70%] rounded-lg bg-muted"></div>
+                      <div className="h-3 w-[40%] rounded-lg bg-muted"></div>
+                    </div>
+                  </div>
+                  <div className="mt-3 flex w-full items-center gap-3">
+                    <div className="h-12 w-12 shrink-0 rounded-full bg-muted"></div>
+                    <div className="flex w-full flex-col gap-1">
+                      <div className="h-6 w-[70%] rounded-lg bg-muted"></div>
+                      <div className="h-3 w-[40%] rounded-lg bg-muted"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero171 };
diff --git a/blocks/hero172.tsx b/blocks/hero172.tsx
new file mode 100644
index 0000000..091deb7
--- /dev/null
+++ b/blocks/hero172.tsx
@@ -0,0 +1,227 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, Mail, Star } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const formSchema = z
+  .object({
+    email: z.string().email("آدرس ایمیل نامعتبر است"),
+  })
+  .required({ email: true });
+
+function HeroFrom() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
+      <div className="flex w-full flex-col items-start gap-3 md:flex-row">
+        <div className="w-full flex-1">
+          <Controller
+            control={form.control}
+            name="email"
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor={field.name} className="sr-only">
+                  ایمیل
+                </FieldLabel>
+                <div className="relative w-full">
+                  <Input
+                    {...field}
+                    type="email"
+                    id={field.name}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="ایمیل خود را وارد کنید"
+                    className="block h-fit w-full rounded-lg bg-input py-5 pe-5 ps-11 text-primary"
+                  />
+                  <Mail className="absolute top-1/2 start-5 size-4 -translate-y-1/2 stroke-gray-400" />
+                </div>
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+        </div>
+        <div className="w-full shrink-0 md:w-fit">
+          <Button
+            type="submit"
+            className="h-fit w-full rounded-lg px-8 py-5 font-semibold text-nowrap md:w-fit"
+          >
+            شروع رایگان
+                                </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+interface Hero172Props {
+  className?: string;
+}
+
+const Hero172 = ({ className }: Hero172Props) => {
+  return (
+    <section
+      className={cn("font-dm_sans bg-background py-12 md:py-20", className)}
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 items-center justify-center gap-20 lg:grid-cols-2">
+          <div>
+            <div className="flex max-w-[40.625rem] flex-col gap-8">
+              <h1 className="font-serif text-xl text-foreground lg:text-2xll xl:text-2xll">
+                پشتیبانی مشتریان را هوشمند کنید
+                                            </h1>
+              <p className="text-lg text-balance text-muted-foreground">
+                درخواست‌ها، رزروها و ارتباط با مشتریان را خودکار کنید تا تیم شما روی کارهای مهم‌تر تمرکز کند.
+                                            </p>
+              <HeroFrom />
+
+              <div className="flex flex-col gap-1.5 py-4">
+                <div className="flex items-center gap-2">
+                  <Check className="stroke-muted2-foreground size-4" />
+                  <p className="text-lg font-medium text-foreground/60">
+                    نیاز به کارت اعتباری نیست
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Check className="stroke-muted2-foreground size-4" />
+                  <p className="text-lg font-medium text-foreground/60">
+                    ۱۴ روز آزمایش رایگان
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="relative mx-auto aspect-[0.990343348/1] w-full max-w-[42.5rem]">
+              <div className="absolute top-[5.04%] left-[4.33%] z-20 w-[42.25%]">
+                <AspectRatio
+                  ratio={0.857142857 / 1}
+                  className="overflow-hidden"
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                    className="block size-full object-cover"
+                  />
+                </AspectRatio>
+              </div>
+
+              <div className="absolute right-[8.23%] bottom-[12.87%] z-20 w-[42.25%]">
+                <AspectRatio
+                  ratio={0.789473684 / 1}
+                  className="overflow-hidden"
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                    alt="تصویر نمونه"
+                    className="block size-full object-cover"
+                  />
+                </AspectRatio>
+              </div>
+
+              <div className="absolute bottom-[5%] left-[10.94%] z-30 w-[42.25%]">
+                <AspectRatio
+                  ratio={0.894495413 / 1}
+                  className="overflow-hidden"
+                >
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+                    alt="تصویر نمونه"
+                    className="block size-full object-cover"
+                  />
+                </AspectRatio>
+              </div>
+
+              <Star className="absolute top-[15%] right-[16%] size-[4%] stroke-sky-500" />
+              <svg
+                className="absolute top-[10%] left-0 z-10 w-[70%]"
+                viewBox="0 0 588 655"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M319 645.463C229 659.797 41.4 652.163 11 506.963C-27 325.463 100.5 299.463 177 288.963C253.5 278.463 341.5 307 454.5 288.963C486.365 283.877 585 242.009 583.5 119.009C582.3 20.6093 583 2.5 583 0.498047"
+                  stroke="#5DCA8A"
+                  strokeWidth="8"
+                />
+              </svg>
+              <svg
+                className="absolute bottom-0 left-[5%] z-20 w-[7%]"
+                viewBox="0 0 62 62"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M36 3L18 5.5M42.5 18L2 42M49.5 28.5L32.5 52M58.5 34L56 61"
+                  stroke="#5DCA8A"
+                  strokeWidth="6"
+                />
+              </svg>
+              <svg
+                className="absolute top-0 left-0 size-[6%] stroke-amber-500"
+                viewBox="0 0 153 200"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M72 9C68.4932 44.3333 50.7836 115 8 115"
+                  strokeWidth="15"
+                  strokeLinecap="round"
+                />
+                <path
+                  d="M72 192C76 163.333 96.2 106 145 106"
+                  strokeWidth="15"
+                  strokeLinecap="round"
+                />
+                <path
+                  d="M72 8C76 40.6667 96.2 106 145 106"
+                  strokeWidth="15"
+                  strokeLinecap="round"
+                />
+                <path
+                  d="M72 192C68.4931 166.333 50.7836 115 8 115"
+                  strokeWidth="15"
+                  strokeLinecap="round"
+                />
+              </svg>
+              <svg
+                className="absolute right-[2%] bottom-[3.5%] w-[12%]"
+                viewBox="0 0 111 109"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M80.7298 64.2409C79.8305 65.844 77.5907 69.3884 74.4111 72.8859C71.2651 76.4113 67.183 79.817 63.7301 82.0851C61.7439 83.4125 59.6722 84.6193 57.5273 85.6817C56.4581 86.2136 55.372 86.6747 54.2912 87.1704C53.207 87.652 52.0948 88.0533 51.0005 88.4923C46.5667 90.148 42.0082 91.3659 37.4134 92.2539C28.2113 94.0268 18.9309 94.5091 9.76702 94.6103C6.8995 94.6457 2.04267 94.7689 2.10262 93.2898C2.16332 91.7506 5.38459 90.7806 10.3362 90.6529C16.3325 90.4964 22.3213 90.2577 28.2441 89.5883C34.1657 88.9522 40.0216 87.7984 45.5911 85.9545C49.648 84.5918 53.6182 82.9142 57.3198 80.8988C61.0082 78.8535 64.4708 76.3735 67.5837 73.5299C70.6917 70.6785 73.4641 67.4603 75.7326 63.936C77.9948 60.4103 79.7498 56.5644 80.7419 52.5457C81.6559 48.944 81.912 45.2076 81.5287 41.5417C81.4193 40.612 81.3121 39.7297 81.0978 38.8758C80.8913 38.017 80.636 37.1668 80.31 36.3603C79.6553 34.7599 78.7493 33.288 77.5814 32.3035C76.4385 31.2981 75.0339 30.8071 73.5918 30.9032C72.1463 30.985 70.6396 31.6685 69.3543 32.6921C68.7116 33.2038 68.1224 33.8018 67.6081 34.4509C67.3502 34.7786 67.1114 35.1108 66.9032 35.4837C66.6964 35.8502 66.4531 36.2014 66.2703 36.5803C65.512 38.096 65.1136 39.7902 64.9573 41.5078C64.4395 48.0084 68.1788 54.9143 73.9006 57.7466C76.797 59.2112 80.1285 59.7939 83.4301 59.5928C85.0891 59.5143 86.7238 59.1689 88.3335 58.7306C89.9399 58.2781 91.4783 57.602 92.9569 56.8383C95.4892 55.4384 97.7493 53.6867 99.6167 51.4408C101.478 49.2203 103.027 46.6784 104.105 43.9187C105.206 41.1712 105.924 38.2331 106.219 35.2424C106.396 33.7505 106.409 32.2405 106.39 30.7292C106.316 29.2188 106.207 27.7199 105.943 26.2248C105.727 24.808 105.294 23.2868 104.791 21.7554C104.273 20.2275 103.655 18.6962 103.068 17.2388C102.126 14.8076 100.075 10.9438 98.7361 8.6937C98.1755 7.71813 97.5637 6.70374 96.8779 5.83268C95.2833 3.84388 94.3027 2.57537 94.0608 1.7819C93.8174 0.99478 94.2891 0.697275 95.4958 0.833768C96.0295 0.899034 96.1168 0.243258 97.1261 1.07659C97.1645 1.11242 97.2493 1.17922 97.2877 1.21505C100.523 3.6568 102.459 7.32622 104.389 10.9072C106.78 15.3197 108.617 20.0909 109.571 25.0895C110.536 30.0974 110.528 35.3118 109.46 40.337C108.395 45.3496 106.238 50.2193 102.902 54.2423C101.251 56.2512 99.2665 58.0544 97.0732 59.4938C94.8847 60.941 92.4909 62.0654 89.9862 62.8356C88.4564 63.3329 86.862 63.6208 85.2619 63.8471C83.653 63.9977 82.0272 64.0773 80.4014 63.9293C77.1628 63.6631 73.9157 62.7788 71.0633 61.0701C68.1762 59.3665 65.7929 56.9445 64.0497 54.1641C62.3314 51.3628 61.2107 48.2132 60.801 44.9161C60.6224 43.1131 60.5427 41.2596 60.8632 39.4132C60.9609 38.4853 61.2549 37.5769 61.5206 36.6751C61.6485 36.2164 61.8814 35.7958 62.065 35.3568C62.2676 34.9224 62.4449 34.4819 62.7191 34.0844L62.6852 34.1434C63.5965 32.3757 64.8698 30.7199 66.4387 29.4015C68.0125 28.091 69.9233 27.0271 72.1343 26.6231C74.224 26.2508 76.5556 26.5581 78.461 27.5955C80.4135 28.6038 81.8569 30.1821 82.9297 31.8272C83.9712 33.4917 84.7152 35.2536 85.1957 37.0541C85.4533 37.9517 85.6258 38.8694 85.7744 39.7749C85.8801 40.6635 86.0142 41.5454 86.052 42.4382C86.1891 44.2181 86.165 46.0003 86.0125 47.759C85.8791 49.5221 85.5792 51.2528 85.1871 52.9484C84.4028 56.3397 83.1368 59.5305 81.6016 62.4706C81.3769 62.9133 81.1142 63.5747 80.7298 64.2409Z"
+                  fill="#0F1F2C"
+                />
+                <path
+                  d="M24.1792 97.846C25.5763 98.1411 30.5082 99.2074 33.6818 99.8065C41.0391 101.209 48.3881 102.589 55.6621 104.374C56.7964 104.647 58.7477 105.006 58.4548 106.45C58.1486 107.952 56.6762 108.603 54.6783 108.187C49.8404 107.176 45.0196 105.922 40.1392 105.263C33 104.3 25.9925 102.692 18.9454 101.309C15.7762 100.691 12.619 100.022 9.46478 99.3403C8.66867 99.1664 7.90764 99.0142 7.0574 98.8143C6.215 98.6094 5.32147 98.3658 4.40515 97.9628C3.95016 97.762 3.4851 97.5187 3.03981 97.2198C2.56429 96.9071 2.12907 96.5369 1.74684 96.1122C0.988735 95.2643 0.326901 94.1779 0.20547 92.7297C0.163247 92.1975 0.220304 91.6418 0.371041 91.1147C0.556478 90.4687 0.891585 89.898 1.26776 89.4374C1.64393 88.9768 2.05632 88.6184 2.46013 88.325C3.26625 87.7446 4.05 87.3732 4.76657 87.0596L8.75998 85.3405C11.4035 84.2079 14.0581 83.0846 16.7345 82.0401C21.6012 80.138 26.5945 78.5804 31.5009 76.7948C32.6571 76.3771 33.9361 75.5798 35.199 75.1068C36.2418 74.7159 37.9795 74.0465 39.0506 73.7628C39.5153 73.6377 39.9975 73.5235 40.4181 73.301C42.3249 72.283 43.0467 72.5733 42.9916 74.4018C42.9767 74.8067 43.3284 75.1907 42.9406 75.6151C42.9234 75.6312 42.894 75.6711 42.8768 75.6872C41.7882 77.2123 40.1113 77.367 38.6069 77.9841C31.2247 81.0154 23.8048 83.9507 16.4028 86.9238L9.57737 89.6374L7.87624 90.3221C7.31978 90.5528 6.71442 90.7921 6.22103 91.0108C5.71981 91.2344 5.27083 91.4637 4.94689 91.7022C4.6166 91.9392 4.44904 92.1676 4.42367 92.2755C4.40986 92.3057 4.41808 92.3278 4.41845 92.3546C4.44645 92.4349 4.47855 92.4692 4.58718 92.6622C4.68759 92.8331 4.85222 93.0727 5.03139 93.3358L5.02653 93.328C5.17061 93.4556 5.32066 93.5578 5.49908 93.6534C5.69503 93.7597 5.913 93.8579 6.14516 93.9527C6.6188 94.131 7.16486 94.2862 7.771 94.4422C8.33907 94.5892 8.98439 94.7209 9.6536 94.8649C10.3165 95.0074 10.9745 95.1421 11.6374 95.2846C12.9661 95.5569 14.3012 95.8307 15.6235 96.1016C18.2746 96.6448 20.8974 97.1947 23.4003 97.77C23.6078 97.7987 23.8922 97.7852 24.1792 97.846Z"
+                  fill="#0F1F2C"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero172 };
diff --git a/blocks/hero173.tsx b/blocks/hero173.tsx
new file mode 100644
index 0000000..fb2e97d
--- /dev/null
+++ b/blocks/hero173.tsx
@@ -0,0 +1,123 @@
+"use client";
+import { Play } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface Hero173Props {
+  className?: string;
+}
+
+const Hero173 = ({ className }: Hero173Props) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  return (
+    <Fragment>
+      <section className={cn("font-dm_sans py-12 md:py-20", className)}>
+        <div className="container">
+          <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2">
+            <div className="flex flex-col gap-6">
+              <p className="text-sm font-medium tracking-wider text-muted-foreground uppercase">
+                استودیوی طراحی دیجیتال
+                                            </p>
+              <div className="flex max-w-[40rem] flex-col gap-6">
+                <h1 className="text-xl leading-tight font-medium md:text-2xll xl:text-2xll">
+                  کسب‌وکار خود را با وب‌سایتی تازه تقویت کنید.
+                </h1>
+                <p className="text-xl text-balance text-muted-foreground">
+                  با طراحی رابط کاربری، توسعه محصول و هویت بصری، به رشد کسب‌وکارهای دیجیتال کمک می‌کنیم.
+                                                  </p>
+              </div>
+              <div className="flex flex-wrap gap-4 py-4">
+                <Button
+                  asChild
+                  className="block h-fit w-fit rounded-sm px-5 py-3.5 text-sm font-medium tracking-wider text-nowrap uppercase"
+                >
+                  <a href="#">مشاهده خدمات</a>
+                </Button>
+                <Button
+                  asChild
+                  variant="ghost"
+                  onClick={() => setIsVideoOpen(true)}
+                  className="flex h-fit w-fit flex-nowrap items-center gap-2 rounded-sm bg-transparent px-5 py-3.5 text-sm font-medium tracking-wider text-nowrap uppercase"
+                >
+                  <a href="#">
+                    <Play className="h-3! w-3! fill-neutral-950" />
+                    <p>نحوه همکاری</p>
+                  </a>
+                </Button>
+              </div>
+            </div>
+            <div>
+              <div className="relative mx-auto aspect-[0.789340102/1] max-w-[25rem]">
+                <div className="absolute bottom-0 left-0 z-30 w-[63%]">
+                  <AspectRatio
+                    ratio={0.724137931 / 1}
+                    className="overflow-hidden"
+                  >
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="size-full object-cover object-center"
+                    />
+                  </AspectRatio>
+                </div>
+
+                <div className="absolute top-1/2 left-1/2 z-20 w-[63%] -translate-x-1/2 -translate-y-1/2">
+                  <AspectRatio
+                    ratio={0.724137931 / 1}
+                    className="overflow-hidden"
+                  >
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                      alt="تصویر نمونه"
+                      className="size-full object-cover object-center"
+                    />
+                  </AspectRatio>
+                </div>
+
+                <div className="absolute top-0 right-0 z-10 w-[63%]">
+                  <AspectRatio
+                    ratio={0.724137931 / 1}
+                    className="overflow-hidden"
+                  >
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="size-full object-cover object-center"
+                    />
+                  </AspectRatio>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>ویدیوی معرفی</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              className="h-full w-full"
+              src="https://www.youtube.com/embed/your-video-id"
+              title="ویدیوی معرفی"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export { Hero173 };
diff --git a/blocks/hero174.tsx b/blocks/hero174.tsx
new file mode 100644
index 0000000..b7c2ab8
--- /dev/null
+++ b/blocks/hero174.tsx
@@ -0,0 +1,61 @@
+import { ArrowDown } from "lucide-react";
+import { Fragment } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero174Props {
+  className?: string;
+}
+
+const Hero174 = ({ className }: Hero174Props) => {
+  return (
+    <Fragment>
+      <section
+        className={cn(
+          "font-dm_sans dark relative h-svh max-h-[1400px] min-h-[600px] w-full bg-[url('/block-media/shadcnblocks/block/full-width-backgrounds/andrew-kliatskyi-MaVm_A0xhKk-unsplash.jpg')] bg-cover bg-center bg-no-repeat after:absolute after:inset-0 after:block after:size-full after:bg-zinc-950/50 after:content-['']",
+          className,
+        )}
+      >
+        <div className="relative z-10 mx-auto flex size-full max-w-[125rem] px-4 py-9">
+          <div className="flex w-full flex-col justify-between gap-10">
+            <div className="mx-auto flex max-w-[31.25rem] flex-1 flex-col items-center justify-center gap-7 sm:max-w-[37.5rem] md:max-w-[50rem]">
+              <h1 className="text-center text-xl leading-tight font-medium text-foreground sm:text-2xll md:text-2xll">
+                ایده‌های خود را به محصولات دیجیتال تبدیل کنید
+                                            </h1>
+              <p className="text-center text-lg text-balance text-foreground md:text-xl">
+                راهکارهای دیجیتال مقیاس‌پذیر طراحی می‌کنیم تا کسب‌وکارها سریع‌تر رشد کنند و تجربه‌ای بهتر برای کاربران خود بسازند.
+                                            </p>
+              <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
+                <Button
+                  asChild
+                  className="block h-fit w-fit rounded-sm px-6 py-3.5 text-sm font-semibold tracking-wider text-nowrap uppercase"
+                >
+                  <a href="#">مشاهده پروژه‌ها</a>
+                </Button>
+              </div>
+            </div>
+            <div className="flex items-center justify-between gap-4 rounded-lg bg-black/20 px-6 py-4 backdrop-blur-sm">
+              <div className="flex items-center gap-3">
+                <div className="h-8 w-1 bg-primary"></div>
+                <div className="text-sm font-medium text-muted-foreground">
+                  <p className="text-primary">دفتر مرکزی</p>
+                  <p>دفتر مرکزی شرکت</p>
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="flex size-10 rounded-full border-2 border-primary transition-colors hover:bg-primary/20"
+              >
+                <ArrowDown className="m-auto size-5! stroke-primary" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </Fragment>
+  );
+};
+
+export { Hero174 };
diff --git a/blocks/hero175.tsx b/blocks/hero175.tsx
new file mode 100644
index 0000000..c406990
--- /dev/null
+++ b/blocks/hero175.tsx
@@ -0,0 +1,66 @@
+import { ArrowRight, CirclePlay } from "lucide-react";
+
+import { badgeVariants } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero175Props {
+  className?: string;
+}
+
+const Hero175 = ({ className }: Hero175Props) => {
+  return (
+    <section
+      className={cn(
+        "font-public_sans dark relative bg-background py-12 before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-[15rem] before:w-full before:bg-linear-to-b before:from-muted before:to-transparent before:content-[''] md:py-32",
+        className,
+      )}
+    >
+      <div className="relative z-20 container">
+        <div className="relative z-20 mx-auto flex max-w-[56.25rem] flex-col items-center gap-6">
+          <a
+            href="#"
+            className={`${badgeVariants({ variant: "outline" })} border-muted2 mb-4 flex w-fit items-center gap-1 rounded-full border bg-muted px-2.5 py-1.5 hover:border-primary`}
+          >
+            <p className="text-sm font-semibold text-primary">
+              ویژگی‌های جدید ما را ببینید
+            </p>
+            <ArrowRight className="h-4 w-4 stroke-primary rtl:rotate-180" />
+          </a>
+          <h1 className="w-full text-center text-2xll font-bold text-foreground md:text-2xll">
+            چارچوبی مدرن برای توسعه وب{" "}
+            <span className="text-primary">مناسب توسعه‌دهندگان</span>
+          </h1>
+          <p className="text-center text-lg text-muted-foreground">
+            چارچوبی متن‌باز که توسعه وب را ساده می‌کند و در عین حال قدرتمند
+            است. اپلیکیشن‌ها و وب‌سایت‌های فول‌استک با کارایی بالا و آماده
+            تولید را با اطمینان بسازید.
+          </p>
+          <div className="mt-4 flex items-center gap-2">
+            <Button
+              asChild
+              className="flex h-fit items-center gap-2 rounded-md px-3.5 py-2.5 text-sm font-medium"
+            >
+              <a href="#">
+                <div>شروع رایگان</div>
+                <ArrowRight className="size-5! rtl:rotate-180" />
+              </a>
+            </Button>
+            <Button
+              asChild
+              variant="ghost"
+              className="flex h-fit items-center gap-2 rounded-md px-3.5 py-2.5 text-sm font-medium text-white"
+            >
+              <a href="#">
+                <div>تماشای دمو</div>
+                <CirclePlay className="size-5! stroke-white" />
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero175 };
diff --git a/blocks/hero177.tsx b/blocks/hero177.tsx
new file mode 100644
index 0000000..1f31824
--- /dev/null
+++ b/blocks/hero177.tsx
@@ -0,0 +1,125 @@
+import { CircleCheck, Star } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero177Props {
+  className?: string;
+}
+
+const Hero177 = ({ className }: Hero177Props) => {
+  return (
+    <section className={cn("bg-background py-12 md:py-20", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-[77.5rem] flex-col items-center gap-8">
+          <Badge className="flex w-fit items-center gap-4 rounded-md bg-accent px-4 py-2 hover:bg-accent">
+            <img
+              src="/block-media/shadcnblocks/block/logos/google-play-icon.svg"
+              className="size-5"
+              alt="لوگوی فروشگاه اندروید"
+            ></img>
+            <div className="flex items-center gap-1">
+              <Star className="size-4 fill-yellow-400 stroke-yellow-400" />
+              <Star className="size-4 fill-yellow-400 stroke-yellow-400" />
+              <Star className="size-4 fill-yellow-400 stroke-yellow-400" />
+              <Star className="size-4 fill-yellow-400 stroke-yellow-400" />
+              <Star className="size-4 fill-yellow-400 stroke-yellow-400" />
+            </div>
+            <p className="text-sm text-accent-foreground">امتیاز ۵.۰</p>
+          </Badge>
+          <h1 className="max-w-[54.375rem] text-center text-[2.5rem] leading-[90%] font-bold tracking-[-1.6px] text-foreground transition-[font-size] duration-300 md:text-2xll lg:text-[4.25rem]">
+            مدیریت هزینه‌های ناوگان را در یک پلتفرم یکپارچه انجام دهید.
+                                </h1>
+          <p className="max-w-[54.375rem] text-center text-lg text-muted-foreground md:text-xl">
+            هزینه سوخت، پرداخت‌ها، گزارش‌گیری و مدیریت ناوگان را در یک سامانه هوشمند کنترل کنید.
+                                </p>
+          <ul className="flex flex-col gap-2 text-start md:flex-row md:justify-center md:gap-6 md:text-center">
+            <li className="flex items-center gap-3">
+              <CircleCheck className="size-6 fill-primary stroke-background" />
+              <p className="text-foreground/60">پذیرش گسترده</p>
+            </li>
+            <li className="flex items-center gap-3">
+              <CircleCheck className="size-6 fill-primary stroke-background" />
+              <p className="text-foreground/60">پشتیبانی تخصصی</p>
+            </li>
+            <li className="flex items-center gap-3">
+              <CircleCheck className="size-6 fill-primary stroke-background" />
+              <p className="text-foreground/60">تخفیف و بازگشت وجه</p>
+            </li>
+          </ul>
+          <div className="flex w-full flex-col justify-center gap-4 sm:flex-row md:w-auto lg:justify-start">
+            <Button
+              asChild
+              className="group inline-block h-fit overflow-hidden rounded-md px-6 py-4 text-center text-sm leading-none font-semibold tracking-tight transition"
+            >
+              <a href="#">
+                <div className="relative">
+                  <span className="block text-nowrap transition group-hover:translate-y-[-250%]">
+                    شروع رایگان
+                                                        </span>
+                  <span
+                    aria-hidden="true"
+                    className="absolute top-1/2 left-1/2 block w-full -translate-x-1/2 translate-y-[250%] transition group-hover:-translate-y-1/2"
+                  >
+                    شروع رایگان
+                                                        </span>
+                </div>
+              </a>
+            </Button>
+            <Button
+              asChild
+              variant="secondary"
+              className="group inline-block h-fit overflow-hidden rounded-md border px-6 py-4 text-center text-sm leading-none font-semibold tracking-tight transition"
+            >
+              <a href="#">
+                <div className="relative">
+                  <span className="block text-nowrap transition group-hover:translate-y-[-250%]">
+                    مشاهده دمو تعاملی
+                  </span>
+                  <span
+                    aria-hidden="true"
+                    className="absolute top-1/2 left-1/2 block w-full -translate-x-1/2 translate-y-[250%] transition group-hover:-translate-y-1/2"
+                  >
+                    مشاهده دمو تعاملی
+                  </span>
+                </div>
+              </a>
+            </Button>
+          </div>
+        </div>
+        <div className="mx-auto mt-12 flex w-full max-w-[77.5rem] gap-[1.5%] md:mt-20">
+          <div className="flex-[33.3%]">
+            <AspectRatio
+              ratio={0.741410488 / 1}
+              className="overflow-hidden rounded-lg md:rounded-xl"
+            >
+              <div className="relative h-full w-full bg-amber-100">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="تصویر نمونه"
+                  className="block h-full w-full object-cover object-center"
+                />
+              </div>
+            </AspectRatio>
+          </div>
+          <div className="flex-[66.6%]">
+            <AspectRatio
+              ratio={1.482820976 / 1}
+              className="h-full w-full overflow-hidden rounded-lg bg-muted md:rounded-xl"
+            >
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt=""
+                className="block h-full w-full translate-x-[4%] translate-y-[5.5%] rounded-lg object-cover object-center"
+              />
+            </AspectRatio>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero177 };
diff --git a/blocks/hero178.tsx b/blocks/hero178.tsx
new file mode 100644
index 0000000..bc0419a
--- /dev/null
+++ b/blocks/hero178.tsx
@@ -0,0 +1,68 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { cn } from "@/lib/utils";
+
+interface Hero178Props {
+  className?: string;
+}
+
+const Hero178 = ({ className }: Hero178Props) => {
+  return (
+    <section
+      className={cn(
+        "relative border-b border-muted bg-background pt-10",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2">
+          <div className="flex w-full max-w-[31.25rem] flex-col gap-9 lg:max-w-[37.5rem] lg:py-[20%] xl:py-[26%]">
+            <p className="font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground">
+              پشتیبانی مشتری
+            </p>
+            <h1 className="text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] text-foreground">
+              تجربه
+                                        <br />
+              پشتیبانی مشتری را متحول کنید
+                                      </h1>
+            <p className="text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal text-muted-foreground">
+              درخواست‌ها، گفتگوها و پاسخ‌گویی به مشتریان را از یک محیط یکپارچه مدیریت کنید.
+                                      </p>
+          </div>
+          <div>
+            <div className="relative ms-8 aspect-square w-full max-w-[56.25rem] overflow-hidden lg:absolute lg:end-0 lg:bottom-0 lg:w-1/2">
+              <div className="absolute right-0 bottom-0 w-[85%] overflow-hidden rounded-lg">
+                <AspectRatio ratio={0.918918919 / 1}>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                    className="block size-full object-cover object-top-left"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="absolute bottom-0 left-[0%] w-[70%] overflow-hidden rounded-tl-lg">
+                <AspectRatio ratio={1.9 / 1}>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                    alt="تصویر نمونه"
+                    className="block h-full w-full object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="absolute right-[5%] bottom-0 w-[40%] overflow-hidden rounded-tl-lg rounded-tr-lg shadow-md">
+                <AspectRatio ratio={0.776119403 / 1}>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+                    alt=""
+                    className="block h-full w-full object-cover object-top"
+                  />
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero178 };
diff --git a/blocks/hero179.tsx b/blocks/hero179.tsx
new file mode 100644
index 0000000..c65e2e9
--- /dev/null
+++ b/blocks/hero179.tsx
@@ -0,0 +1,56 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { cn } from "@/lib/utils";
+
+interface Hero179Props {
+  className?: string;
+}
+
+const Hero179 = ({ className }: Hero179Props) => {
+  return (
+    <section
+      className={cn("relative border-b border-muted bg-background", className)}
+    >
+      <div className="container pt-10">
+        <div className="grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2">
+          <div className="flex w-full max-w-[31.25rem] flex-col gap-9 lg:max-w-[37.5rem] lg:py-[20%] xl:py-[26%]">
+            <p className="font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground">
+              صندوق ورودی مشترک
+            </p>
+            <h1 className="text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] text-foreground">
+              صندوق ورودی تیمی
+                                        <br />
+              را سازمان‌دهی کنید
+                                      </h1>
+            <p className="text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal text-muted-foreground">
+              ایمیل‌ها، پیام‌های شبکه‌های اجتماعی و درخواست‌های مشتریان را در یک صندوق ورودی مشترک مدیریت کنید.
+                                      </p>
+          </div>
+          <div>
+            <div className="relative ms-8 aspect-square w-full max-w-[56.25rem] overflow-hidden lg:absolute lg:end-0 lg:bottom-0 lg:w-1/2">
+              <div className="absolute right-0 bottom-0 w-[85%] overflow-hidden rounded-lg">
+                <AspectRatio ratio={0.918918919 / 1}>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                    className="block size-full object-cover object-top-left"
+                  />
+                </AspectRatio>
+              </div>
+              <div className="absolute right-0 bottom-0 w-[93%] overflow-hidden rounded-tl-lg shadow-md">
+                <AspectRatio ratio={1.381308411 / 1}>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                    alt="تصویر نمونه"
+                    className="block size-full object-cover object-center"
+                  />
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero179 };
diff --git a/blocks/hero18.tsx b/blocks/hero18.tsx
new file mode 100644
index 0000000..98eeb7e
--- /dev/null
+++ b/blocks/hero18.tsx
@@ -0,0 +1,142 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero18Props {
+  className?: string;
+}
+
+const Hero18 = ({ className }: Hero18Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center text-center">
+        <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+          توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                          </h1>
+        <p className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
+          بلاک‌های آماده و زیبا برای سرعت بخشیدن به توسعه. کپی، چسباندن و انتشار
+           بدون بازنویسی از صفر.
+        </p>
+        <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
+          <Button className="w-full sm:w-auto">شروع رایگان</Button>
+          <Button variant="outline" className="w-full sm:w-auto">
+            مشاهده امکانات
+                                </Button>
+        </div>
+      </div>
+      <div className="mt-12 aspect-video overflow-clip border-b border-border sm:mt-32 md:aspect-auto md:h-[420px]">
+        <div className="relative mx-auto flex max-w-3xl flex-col">
+          {/* Left icons */}
+          <div className="absolute top-0 right-[calc(100%+63px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-1.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full object-cover object-center p-3 sm:rounded-md dark:invert"
+            />
+          </div>
+          <div className="absolute top-[52px] right-[calc(100%+195px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-2.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[144px] right-[calc(100%+34px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-3.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[164px] right-[calc(100%+268px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-4.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[240px] right-[calc(100%+156px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-5.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[340px] right-[calc(100%+242px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-6.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[366px] right-[calc(100%+66px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-1.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          {/* Right icons */}
+          <div className="absolute top-0 left-[calc(100%+53px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-2.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[34px] left-[calc(100%+202px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-3.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[141px] left-[calc(100%+97px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-4.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[138px] left-[calc(100%+282px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-5.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[262px] left-[calc(100%+42px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-6.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[282px] left-[calc(100%+234px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-1.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          <div className="absolute top-[365px] left-[calc(100%+112px)] hidden size-[64px] rounded-2xl bg-accent ring-1 ring-accent-foreground/10 ring-inset md:block">
+            <img
+              src="/block-media/shadcnblocks/block/block-2.svg"
+              alt="تصویر نمونه قهرمان"
+              className="h-full w-full rounded-md object-cover object-center p-3 dark:invert"
+            />
+          </div>
+          {/* Hero images */}
+          <div className="container mx-auto">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر نمونه قهرمان"
+              className="mt-6 flex aspect-square w-full flex-col items-center overflow-clip rounded-t-xl border border-border bg-accent sm:rounded-xl"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero18 };
diff --git a/blocks/hero180.tsx b/blocks/hero180.tsx
new file mode 100644
index 0000000..3aa1376
--- /dev/null
+++ b/blocks/hero180.tsx
@@ -0,0 +1,81 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero180Props {
+  className?: string;
+}
+
+const Hero180 = ({ className }: Hero180Props) => {
+  return (
+    <section
+      className={cn("bg-background py-12 font-sans md:py-20", className)}
+    >
+      <div className="container">
+        <div className="flex flex-col gap-24">
+          <div>
+            <div className="relative z-10 mx-auto flex max-w-[55rem] flex-col gap-7">
+              <h1 className="text-center text-2xll leading-[1.294] font-semibold text-foreground sm:text-[3.75rem] md:text-[4.25rem]">
+                هوش مکالمات{" "}
+                <span className="relative text-nowrap after:absolute after:top-1/2 after:start-0 after:z-[-1] after:block after:h-[65%] after:w-full after:-translate-y-1/3 after:bg-muted after:content-['']">
+                  در دسترس شما
+                </span>
+              </h1>
+              <p className="text-center text-xl leading-normal text-muted-foreground">
+                ثبت خودکار جلسات، خلاصه‌سازی گفتگوها و استخراج نکات کلیدی را به هوش مصنوعی بسپارید.
+                                            </p>
+              <div className="flex items-center justify-center gap-5">
+                <Button
+                  asChild
+                  className="block h-fit w-fit rounded-full px-6 py-3 text-base leading-normal font-medium"
+                >
+                  <a href="#">رایگان امتحان کنید</a>
+                </Button>
+                <Button
+                  asChild
+                  variant="secondary"
+                  className="block h-fit w-fit rounded-full px-6 py-3 text-base leading-normal font-medium"
+                >
+                  <a href="#">رزرو دمو</a>
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="mx-auto w-full max-w-[81.25rem]">
+              <AspectRatio ratio={1.818181818 / 1}>
+                <div className="relative flex size-full flex-col justify-between">
+                  <AspectRatio
+                    ratio={3.714285714 / 1}
+                    className="w-full rounded-xl bg-[linear-gradient(transparent,var(--color-muted))]"
+                  />
+                  <AspectRatio
+                    ratio={3.714285714 / 1}
+                    className="w-full rounded-xl bg-[linear-gradient(var(--color-muted),transparent)]"
+                  />
+                  <div className="border-muted2 absolute top-1/2 left-1/2 z-10 w-[87.69%] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border">
+                    <AspectRatio ratio={1.594405594 / 1}>
+                      <img
+                        src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                        alt="تصویر نمونه"
+                        className="object-centers size-full object-cover"
+                      />
+                    </AspectRatio>
+                  </div>
+                  <div className="absolute -top-[50%] left-1/2 z-0 w-[60%] -translate-x-1/2">
+                    <AspectRatio
+                      ratio={1}
+                      className="bg-[radial-gradient(closest-side,var(--color-accent),transparent)]"
+                    />
+                  </div>
+                </div>
+              </AspectRatio>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero180 };
diff --git a/blocks/hero183.tsx b/blocks/hero183.tsx
new file mode 100644
index 0000000..e282092
--- /dev/null
+++ b/blocks/hero183.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Hero183Props {
+  className?: string;
+}
+
+const Hero183 = ({ className }: Hero183Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    };
+
+    updateCurrent();
+    api.on("select", updateCurrent);
+
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  return (
+    <section className={cn("overflow-hidden py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-5xl text-center">
+          <Badge variant="outline">پریمیوم</Badge>
+          <h1 className="mt-6 text-xl font-bold md:text-2xll">
+            همه ابزارهای موردنیاز برای مدیریت کسب‌وکار
+                                </h1>
+          <p className="mt-5 text-lg text-muted-foreground md:text-xl lg:px-32">
+            با ابزارهای یکپارچه، فرایندهای کاری را ساده‌تر کنید و بهره‌وری تیم خود را افزایش دهید.
+                                </p>
+          <div className="mt-8 flex justify-center gap-2">
+            <Button size="lg">شروع رایگان</Button>
+            <Button variant="outline" size="lg">
+              بیشتر بدانید
+            </Button>
+          </div>
+        </div>
+        <div className="relative mx-10 mt-16 hidden md:block">
+          <div className="absolute top-0 -right-20 -left-20 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]"></div>
+          <div className="absolute -right-20 bottom-0 -left-20 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]"></div>
+          <div className="relative grid grid-cols-7 grid-rows-11 gap-4 lg:gap-6">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="تصویر نمونه"
+              className="col-span-2 row-span-4 row-start-2 aspect-video h-full rounded-lg border border-border object-cover"
+            />
+            <div className="col-span-3 col-start-3 row-span-full m-px rounded-lg bg-muted p-2.5">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt="تصویر نمونه"
+                className="aspect-video h-full rounded-lg border border-border object-cover"
+              />
+            </div>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-3.svg"
+              alt="تصویر نمونه"
+              className="col-span-2 row-span-5 row-start-2 aspect-video h-full rounded-lg border border-border object-cover"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-4.svg"
+              alt="تصویر نمونه"
+              className="col-span-2 row-span-5 aspect-video h-full rounded-lg border border-border object-cover"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-5.svg"
+              alt="تصویر نمونه"
+              className="col-span-2 row-span-4 aspect-video h-full rounded-lg border border-border object-cover"
+            />
+            <div className="absolute -top-[10%] -bottom-[10%] col-start-3 row-span-full row-start-1 w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_5%,hsl(var(--border))_95%,transparent)]"></div>
+            <div className="absolute -top-[10%] -bottom-[10%] -left-[17px] col-start-6 row-span-full row-start-1 w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_5%,hsl(var(--border))_95%,transparent)] lg:-left-[25px]"></div>
+          </div>
+          <div className="absolute -top-full -bottom-1/2 -left-6 w-px bg-linear-to-b from-transparent via-border via-60% to-transparent"></div>
+          <div className="absolute -top-full -right-6 -bottom-1/2 w-px bg-linear-to-b from-transparent via-border via-60% to-transparent"></div>
+        </div>
+        <div className="mt-16 md:hidden">
+          <Carousel setApi={setApi} className="mx-auto max-w-md">
+            <CarouselContent className="max-h-full">
+              <CarouselItem>
+                <div className="flex flex-col gap-3">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                    alt="تصویر نمونه"
+                    className="aspect-video rounded-lg border border-border object-cover"
+                  />
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                    alt="تصویر نمونه"
+                    className="aspect-4/3 rounded-lg border border-border object-cover"
+                  />
+                </div>
+              </CarouselItem>
+              <CarouselItem>
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt="تصویر نمونه"
+                  className="h-full rounded-lg border border-border object-cover"
+                />
+              </CarouselItem>
+              <CarouselItem>
+                <div className="flex flex-col gap-3">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                    alt="تصویر نمونه"
+                    className="aspect-4/3 rounded-lg border border-border object-cover"
+                  />
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-5.svg"
+                    alt="تصویر نمونه"
+                    className="aspect-video rounded-lg border border-border object-cover"
+                  />
+                </div>
+              </CarouselItem>
+            </CarouselContent>
+            <div className="mt-6 flex justify-center">
+              {Array.from({ length: 3 }).map((_, index) => (
+                <span
+                  key={index}
+                  className={cn(
+                    "mx-1.5 inline-block size-2 cursor-pointer rounded-full bg-muted-foreground/20 transition-colors duration-300",
+                    index + 1 === current && "bg-muted-foreground/60",
+                  )}
+                  onClick={() => api && api.scrollTo(index)}
+                />
+              ))}
+            </div>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero183 };
diff --git a/blocks/hero185.tsx b/blocks/hero185.tsx
new file mode 100644
index 0000000..049e3db
--- /dev/null
+++ b/blocks/hero185.tsx
@@ -0,0 +1,57 @@
+import { cn } from "@/lib/utils";
+
+interface Hero185Props {
+  className?: string;
+}
+
+const Hero185 = ({ className }: Hero185Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="lg:border-y">
+        <div className="container flex flex-col max-lg:divide-y lg:flex-row">
+          <div className="flex-1 lg:border-l">
+            <div className="lg:border-b lg:pr-8 lg:pb-5 lg:pl-2">
+              <h1 className="mx-auto text-[2.5rem] leading-[1.2] tracking-[-1.6px] md:text-[4rem] md:leading-[1.15]! md:tracking-[-4.32px] lg:text-2xll">
+                بهره‌وری هوشمند برای تیم‌های مدرن
+                                            </h1>
+              <p className="mt-6 tracking-[-0.32px] text-muted-foreground">
+                هدف ما ارائه ابزارهایی است که همکاری تیمی را ساده‌تر و انجام کارها را سریع‌تر می‌کنند.
+                                            </p>
+            </div>
+            <div className="relative mt-10 aspect-[3/3.25] overflow-hidden md:mt-14 lg:mr-8 lg:mb-10 lg:ml-2">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر نمونه"
+                className="object-cover"
+              />
+            </div>
+          </div>
+
+          <div className="lg:border-x lg:px-8">
+            <div className="flex justify-center gap-6 lg:gap-8">
+              <div className="relative mt-20 aspect-[1/1.1] h-[200px] overflow-hidden lg:mt-32 lg:h-[296px]">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                  alt="تصویر نمونه"
+                  className="object-cover"
+                />
+              </div>
+              <div className="relative mt-10 aspect-[1/1.1] h-[200px] overflow-hidden lg:mt-16 lg:h-[296px]">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                  alt="تصویر نمونه"
+                  className="object-cover"
+                />
+              </div>
+            </div>
+            <p className="mt-10 px-4 tracking-[-0.32px] text-muted-foreground md:mt-14">
+              ما محصولاتی طراحی می‌کنیم که مدیریت پروژه، ارتباطات و همکاری تیمی را بهبود می‌بخشند تا افراد و سازمان‌ها با تمرکز بیشتر به اهداف خود برسند.
+                                      </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero185 };
diff --git a/blocks/hero186.tsx b/blocks/hero186.tsx
new file mode 100644
index 0000000..a8576da
--- /dev/null
+++ b/blocks/hero186.tsx
@@ -0,0 +1,148 @@
+import {
+  ArrowRight,
+  Blend,
+  ChartNoAxesColumn,
+  CircleDot,
+  Diamond,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const features = [
+  {
+    title: "گردش‌کارهای سفارشی",
+    description: "پیشرفت را در جریان‌های کاری سفارشی تیم خود دنبال کنید.",
+    icon: CircleDot,
+  },
+  {
+    title: "نقاط عطف",
+    description: "پروژه‌ها را به فازهای مشخص تقسیم کنید.",
+    icon: Diamond,
+  },
+  {
+    title: "پروژه‌های بین‌تیمی",
+    description: "همکاری بین تیم‌ها و بخش‌ها.",
+    icon: Blend,
+  },
+  {
+    title: "بینش پیشرفت",
+    description: "دامنه، سرعت و پیشرفت را در طول زمان رصد کنید.",
+    icon: ChartNoAxesColumn,
+  },
+];
+
+interface Hero186Props {
+  className?: string;
+}
+
+const Hero186 = ({ className }: Hero186Props) => {
+  return (
+    <section
+      className={cn(
+        "relative mx-2.5 mt-2.5 rounded-t-2xl rounded-b-[36px] bg-linear-to-b from-background via-background to-background lg:mx-4",
+        className,
+      )}
+    >
+      <div className="py-32">
+        <div className="container flex flex-col justify-between gap-8 md:gap-14 lg:flex-row">
+          {/* Left side - Main content */}
+          <div className="flex-1">
+            <h1 className="text-3xl font-semibold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
+              مجموعه بلاک‌های آماده رابط کاربری
+                                      </h1>
+
+            <p className="mt-5 text-xl text-muted-foreground">
+              صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                      </p>
+
+            <div className="mt-8 flex flex-wrap items-center gap-4">
+              <Button>شروع رایگان</Button>
+              <a href="#">
+                <Button variant="outline" className="h-auto">
+                  <span className="flex items-center gap-2 text-start whitespace-pre-wrap">
+                    مستندات <ArrowRight className="rtl:rotate-180" />
+                  </span>
+                </Button>
+              </a>
+            </div>
+          </div>
+
+          {/* Right side - Features */}
+          <div className="relative flex flex-1 flex-col justify-center space-y-5 max-lg:pt-10 lg:ps-10">
+            <DashedLine
+              orientation="vertical"
+              className="absolute top-0 left-0 max-lg:hidden"
+            />
+            <DashedLine
+              orientation="horizontal"
+              className="absolute top-0 lg:hidden"
+            />
+            {features.map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <div key={feature.title} className="flex gap-2.5 lg:gap-5">
+                  <Icon className="mt-1 size-4 shrink-0 lg:size-5" />
+                  <div>
+                    <h2 className="font-semibold">{feature.title}</h2>
+                    <p className="text-sm text-muted-foreground">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="container mt-12 md:mt-20 lg:mt-24">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-3.svg"
+            alt="تصویر نمونه"
+            className="w-full rounded-2xl object-cover object-center sm:h-[500px] lg:h-[793px]"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+interface DashedLineProps {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+const DashedLine = ({
+  orientation = "horizontal",
+  className,
+}: DashedLineProps) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <div
+      className={cn(
+        "relative text-muted-foreground",
+        isHorizontal ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          isHorizontal
+            ? [
+                "h-px w-full",
+                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
+              ]
+            : [
+                "h-full w-px",
+                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
+                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
+              ],
+        )}
+      />
+    </div>
+  );
+};
+
+export { Hero186 };
diff --git a/blocks/hero187.tsx b/blocks/hero187.tsx
new file mode 100644
index 0000000..967fca3
--- /dev/null
+++ b/blocks/hero187.tsx
@@ -0,0 +1,231 @@
+"use client";
+import Autoplay from "embla-carousel-autoplay";
+import {
+  ArrowRight,
+  Blend,
+  ChartNoAxesColumn,
+  CircleDot,
+  Diamond,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import type { HeroFeatureIconsProps, Image } from "@/lib/hero-feature-icons";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_FEATURES = [
+  {
+    title: "گردش‌کارهای سفارشی",
+    description: "پیشرفت را در جریان‌های کاری سفارشی تیم خود دنبال کنید.",
+    icon: CircleDot,
+  },
+  {
+    title: "نقاط عطف",
+    description: "پروژه‌ها را به فازهای مشخص تقسیم کنید.",
+    icon: Diamond,
+  },
+  {
+    title: "پروژه‌های بین‌تیمی",
+    description: "همکاری بین تیم‌ها و بخش‌ها.",
+    icon: Blend,
+  },
+  {
+    title: "بینش پیشرفت",
+    description: "دامنه، سرعت و پیشرفت را در طول زمان رصد کنید.",
+    icon: ChartNoAxesColumn,
+  },
+];
+
+type HeroImage = Image & { label?: string };
+
+const DEFAULT_IMAGES: [HeroImage, ...HeroImage[]] = [
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    alt: "تصویر نمونه",
+    label: "کانبان",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    alt: "تصویر نمونه",
+    label: "مسائل",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    alt: "تصویر نمونه",
+    label: "افزودن مسئله",
+  },
+];
+
+const Hero187 = ({
+  heading = "مجموعه بلاک‌های آماده رابط کاربری",
+  description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.",
+  buttonPrimary = { text: "شروع رایگان", href: "#" },
+  buttonSecondary = { text: "مستندات", href: "#" },
+  features = DEFAULT_FEATURES,
+  images = DEFAULT_IMAGES,
+  className,
+}: HeroFeatureIconsProps) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [api, setApi] = useState<CarouselApi>();
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    api.on("select", () => {
+      setCurrentSlide(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const activeImages = images ?? DEFAULT_IMAGES;
+
+  return (
+    <section
+      className={cn(
+        "relative overflow-hidden py-32 dark:bg-gray-900",
+        className,
+      )}
+    >
+      {/* Gradient border */}
+      <div className="relative container grid gap-12 lg:grid-cols-[1fr_1.2fr]">
+        <div className="absolute inset-x-0 bottom-0 z-10 h-px bg-linear-to-r from-transparent via-border to-border" />
+        {/* Left side - Content */}
+        <div className="space-y-8 lg:space-y-12">
+          <div>
+            <h1 className="text-3xl font-semibold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
+              {heading}
+            </h1>
+
+            <p className="mt-6 text-xl font-medium text-muted-foreground">
+              {description}
+            </p>
+          </div>
+
+          {/* Features */}
+          <div className="grid grid-cols-2 gap-5">
+            {features?.map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <div key={feature.title} className="flex gap-2.5 lg:gap-5">
+                  <Icon className="mt-1 size-4 shrink-0 lg:size-5" />
+                  <div>
+                    <h2 className="font-semibold">{feature.title}</h2>
+                    <p className="text-sm text-muted-foreground">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-4">
+            {buttonPrimary && (
+              <Button asChild aria-label={buttonPrimary.text}>
+                <a href={buttonPrimary.href}>{buttonPrimary.text}</a>
+              </Button>
+            )}
+            {buttonSecondary && (
+              <Button asChild variant="outline" className="max-sm:hidden">
+                <a href={buttonSecondary.href}>
+                  <span className="flex items-center gap-2 text-start whitespace-pre-wrap">
+                    {buttonSecondary.text}
+                    <ArrowRight className="size-4 rtl:rotate-180" />
+                  </span>
+                </a>
+              </Button>
+            )}
+          </div>
+
+          <SlideIndicator
+            currentSlide={currentSlide}
+            images={activeImages}
+            className="mb-4! max-lg:hidden"
+            api={api}
+          />
+        </div>
+
+        {/* Right side - Carousel */}
+        <div className="relative -mr-[max(2rem,calc((100vw-80rem)/2+2rem))] max-lg:translate-x-10">
+          <Carousel
+            className="size-full [&>div]:size-full"
+            setApi={setApi}
+            opts={{
+              loop: true,
+            }}
+            plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+          >
+            <CarouselContent className="size-full">
+              {activeImages.map((image, index) => (
+                <CarouselItem key={index}>
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="size-full min-h-[30rem] overflow-hidden rounded-t-xl object-contain"
+                  />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+      <SlideIndicator
+        currentSlide={currentSlide}
+        images={activeImages}
+        className="mt-6 mb-8 lg:hidden"
+        api={api}
+      />
+    </section>
+  );
+};
+
+interface SlideIndicatorProps {
+  currentSlide: number;
+  images: HeroImage[];
+  className?: string;
+  api: CarouselApi | null;
+}
+
+const SlideIndicator = ({
+  currentSlide,
+  images,
+  className,
+  api,
+}: SlideIndicatorProps) => {
+  return (
+    <div
+      className={cn("flex flex-col items-center gap-2 font-medium", className)}
+    >
+      <div className="">
+        <span className="text-foreground-700">
+          {currentSlide + 1} از {images.length} {" "}
+        </span>
+        <span className="text-primary">{images[currentSlide].label}</span>
+      </div>
+      <div className="flex gap-2">
+        {images.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => api?.scrollTo(index)}
+            aria-label={`رفتن به اسلاید ${index + 1}`}
+            className={cn(
+              "h-0.5 w-6 rounded-full transition-colors",
+              index === currentSlide
+                ? "bg-primary"
+                : "bg-primary/20 hover:bg-primary/40",
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export { Hero187 };
diff --git a/blocks/hero187a.tsx b/blocks/hero187a.tsx
new file mode 100644
index 0000000..01ecf65
--- /dev/null
+++ b/blocks/hero187a.tsx
@@ -0,0 +1,242 @@
+"use client";
+import Autoplay from "embla-carousel-autoplay";
+import {
+  ArrowRight,
+  Blend,
+  ChartNoAxesColumn,
+  CircleDot,
+  Diamond,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import type { HeroFeatureIconsProps, Image } from "@/lib/hero-feature-icons";
+import { cn } from "@/lib/utils";
+
+// Extended Image type with optional label for carousel indicators
+type ImageWithLabel = Image & { label?: string };
+
+const DEFAULT_FEATURES = [
+  {
+    title: "گردش‌کارهای سفارشی",
+    description:
+      "پیشرفت وظایف را در گردش‌کارهای سفارشی تیم خود مدیریت کنید.",
+    icon: CircleDot,
+  },
+  {
+    title: "نقاط عطف",
+    description: "پروژه‌ها را به فازهای مشخص تقسیم کنید.",
+    icon: Diamond,
+  },
+  {
+    title: "پروژه‌های بین‌تیمی",
+    description: "همکاری میان تیم‌ها و واحدهای مختلف را ساده‌تر کنید.",
+    icon: Blend,
+  },
+  {
+    title: "بینش پیشرفت",
+    description: "وضعیت پروژه، سرعت اجرا و میزان پیشرفت را به‌صورت مستمر بررسی کنید.",
+    icon: ChartNoAxesColumn,
+  },
+];
+
+const DEFAULT_IMAGES: [ImageWithLabel, ...ImageWithLabel[]] = [
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    alt: "پیش‌نمایش کانبان",
+    label: "کانبان",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    alt: "پیش‌نمایش فهرست مسائل",
+    label: "مسائل",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    alt: "پیش‌نمایش افزودن مسئله",
+    label: "افزودن مسئله",
+  },
+];
+
+const Hero187a = ({
+  heading = "بلاک‌های آماده برای پروژه بعدی شما",
+  description =
+    "ابزار مناسب برای برنامه‌ریزی و ساخت محصولات نرم‌افزاری مدرن.",
+  buttonPrimary = { text: "شروع رایگان", href: "#" },
+  buttonSecondary = { text: "مستندات", href: "#" },
+  features = DEFAULT_FEATURES,
+  images = DEFAULT_IMAGES,
+  className,
+}: HeroFeatureIconsProps) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [api, setApi] = useState<CarouselApi>();
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    api.on("select", () => {
+      setCurrentSlide(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const activeImages = images ?? DEFAULT_IMAGES;
+
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      <div className="container">
+        {/* Carousel Section */}
+        <div className="relative mb-16">
+          <Carousel
+            className="mx-auto"
+            setApi={setApi}
+            opts={{
+              loop: true,
+              direction: "rtl",
+              align: "start",
+            }}
+            plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+          >
+            <CarouselContent>
+              {activeImages.map((image, index) => (
+                <CarouselItem key={index}>
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="aspect-video w-full rounded-2xl object-contain"
+                  />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+
+          <SlideIndicator
+            currentSlide={currentSlide}
+            images={activeImages}
+            className="mt-8"
+            api={api}
+          />
+        </div>
+
+        {/* Content Section */}
+        <div className="space-y-12 text-center">
+          <div className="mx-auto max-w-4xl">
+            <h1 className="text-3xl font-semibold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
+              {heading}
+            </h1>
+
+            <p className="mt-6 text-xl font-medium text-muted-foreground lg:text-xl">
+              {description}
+            </p>
+          </div>
+
+          {/* Features */}
+          <div
+            className={cn(
+              "mx-auto grid max-w-6xl gap-8",
+              features?.length === 1 && "max-w-xs grid-cols-1",
+              features?.length === 2 && "max-w-2xl grid-cols-1 md:grid-cols-2",
+              features?.length === 3 && "max-w-4xl grid-cols-1 md:grid-cols-3",
+              features?.length === 4 &&
+                "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+              (features?.length ?? 0) > 4 &&
+                "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+            )}
+          >
+            {features?.map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <div key={feature.title} className="space-y-4 text-center">
+                  <div className="flex justify-center">
+                    <Icon className="size-8 text-primary" />
+                  </div>
+                  <div>
+                    <h2 className="text-lg font-semibold">{feature.title}</h2>
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="flex flex-wrap items-center justify-center gap-4">
+            {buttonPrimary && (
+              <Button asChild size="lg" aria-label={buttonPrimary.text}>
+                <a href={buttonPrimary.href}>{buttonPrimary.text}</a>
+              </Button>
+            )}
+            {buttonSecondary && (
+              <Button
+                asChild
+                aria-label={buttonSecondary.text}
+                variant="outline"
+                size="lg"
+              >
+                <a href={buttonSecondary.href}>
+                  <span className="flex items-center gap-2">
+                    {buttonSecondary.text}
+                    <ArrowRight className="size-4 rtl:rotate-180" />
+                  </span>
+                </a>
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+interface SlideIndicatorProps {
+  currentSlide: number;
+  images: ImageWithLabel[];
+  className?: string;
+  api: CarouselApi | null;
+}
+
+const SlideIndicator = ({
+  currentSlide,
+  images,
+  className,
+  api,
+}: SlideIndicatorProps) => {
+  return (
+    <div
+      className={cn("flex flex-col items-center gap-2 font-medium", className)}
+    >
+      <div className="">
+        <span className="text-foreground-700">
+          {(currentSlide + 1).toLocaleString("fa-IR")} از{" "}
+          {images.length.toLocaleString("fa-IR")} {" "}
+        </span>
+        <span className="text-primary">{images[currentSlide].label}</span>
+      </div>
+      <div className="flex gap-2">
+        {images.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => api?.scrollTo(index)}
+            aria-label={`رفتن به اسلاید ${(index + 1).toLocaleString("fa-IR")}`}
+            className={cn(
+              "h-0.5 w-6 rounded-full transition-colors",
+              index === currentSlide
+                ? "bg-primary"
+                : "bg-primary/20 hover:bg-primary/40",
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export { Hero187a };
diff --git a/blocks/hero187b.tsx b/blocks/hero187b.tsx
new file mode 100644
index 0000000..e037bf6
--- /dev/null
+++ b/blocks/hero187b.tsx
@@ -0,0 +1,240 @@
+"use client";
+import Autoplay from "embla-carousel-autoplay";
+import {
+  ArrowRight,
+  Blend,
+  ChartNoAxesColumn,
+  CircleDot,
+  Diamond,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import type { HeroFeatureIconsProps, Image } from "@/lib/hero-feature-icons";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_FEATURES = [
+  {
+    title: "گردش‌کارهای سفارشی",
+    description:
+      "پیشرفت وظایف را در گردش‌کارهای سفارشی تیم خود مدیریت کنید.",
+    icon: CircleDot,
+  },
+  {
+    title: "نقاط عطف",
+    description: "پروژه‌ها را به فازهای مشخص تقسیم کنید.",
+    icon: Diamond,
+  },
+  {
+    title: "پروژه‌های بین‌تیمی",
+    description: "همکاری میان تیم‌ها و واحدهای مختلف را ساده‌تر کنید.",
+    icon: Blend,
+  },
+  {
+    title: "بینش پیشرفت",
+    description: "وضعیت پروژه، سرعت اجرا و میزان پیشرفت را به‌صورت مستمر بررسی کنید.",
+    icon: ChartNoAxesColumn,
+  },
+];
+
+type HeroImage = Image & { label?: string };
+
+const DEFAULT_IMAGES: [HeroImage, ...HeroImage[]] = [
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    alt: "پیش‌نمایش کانبان",
+    label: "کانبان",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    alt: "پیش‌نمایش فهرست مسائل",
+    label: "مسائل",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    alt: "پیش‌نمایش افزودن مسئله",
+    label: "افزودن مسئله",
+  },
+];
+
+const Hero187b = ({
+  heading = "بلاک‌های آماده برای پروژه بعدی شما",
+  description =
+    "ابزار مناسب برای برنامه‌ریزی و ساخت محصولات نرم‌افزاری مدرن.",
+  buttonPrimary = { text: "شروع رایگان", href: "#" },
+  buttonSecondary = { text: "مستندات", href: "#" },
+  features = DEFAULT_FEATURES,
+  images = DEFAULT_IMAGES,
+  className,
+}: HeroFeatureIconsProps) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [api, setApi] = useState<CarouselApi>();
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    api.on("select", () => {
+      setCurrentSlide(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const activeImages = images ?? DEFAULT_IMAGES;
+
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      <div className="container">
+        <div
+          dir="rtl"
+          className="grid gap-16 lg:grid-cols-[1fr_1.2fr] lg:gap-20"
+        >
+          <div className="relative order-2 lg:order-2">
+            <Carousel
+              className="size-full"
+              setApi={setApi}
+              opts={{
+                loop: true,
+                direction: "rtl",
+                align: "start",
+              }}
+              plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+            >
+              <CarouselContent>
+                {activeImages.map((image, index) => (
+                  <CarouselItem key={index}>
+                    <img
+                      src={image.src}
+                      alt={image.alt}
+                      className="w-full rounded-2xl object-contain"
+                    />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+
+            <SlideIndicator
+              currentSlide={currentSlide}
+              images={activeImages}
+              className="mt-6 lg:hidden"
+              api={api}
+            />
+          </div>
+
+          <div className="order-1 space-y-8 text-start lg:order-1 lg:space-y-10">
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
+                {heading}
+              </h1>
+
+              <p className="mt-6 text-xl leading-relaxed font-medium text-muted-foreground">
+                {description}
+              </p>
+            </div>
+
+            {/* Features */}
+            <div className="space-y-4">
+              {features?.map((feature) => {
+                const Icon = feature.icon;
+                return (
+                  <div key={feature.title} className="flex gap-3">
+                    <div className="shrink-0">
+                      <Icon className="mt-0.5 size-5 text-primary" />
+                    </div>
+                    <div>
+                      <h2 className="font-semibold">{feature.title}</h2>
+                      <p className="text-sm text-muted-foreground">
+                        {feature.description}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="flex flex-wrap items-center gap-4">
+              {buttonPrimary && (
+                <Button asChild size="lg" aria-label={buttonPrimary.text}>
+                  <a href={buttonPrimary.href}>{buttonPrimary.text}</a>
+                </Button>
+              )}
+              {buttonSecondary && (
+                <Button
+                  asChild
+                  aria-label={buttonSecondary.text}
+                  variant="outline"
+                  size="lg"
+                >
+                  <a href={buttonSecondary.href}>
+                    <span className="flex items-center gap-2">
+                      {buttonSecondary.text}
+                      <ArrowRight className="size-4 rtl:rotate-180" />
+                    </span>
+                  </a>
+                </Button>
+              )}
+            </div>
+
+            <SlideIndicator
+              currentSlide={currentSlide}
+              images={activeImages}
+              className="max-lg:hidden"
+              api={api}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+interface SlideIndicatorProps {
+  currentSlide: number;
+  images: HeroImage[];
+  className?: string;
+  api: CarouselApi | null;
+}
+
+const SlideIndicator = ({
+  currentSlide,
+  images,
+  className,
+  api,
+}: SlideIndicatorProps) => {
+  return (
+    <div
+      className={cn("flex flex-col items-start gap-2 font-medium", className)}
+    >
+      <div className="">
+        <span className="text-foreground-700">
+          {(currentSlide + 1).toLocaleString("fa-IR")} از{" "}
+          {images.length.toLocaleString("fa-IR")} {" "}
+        </span>
+        <span className="text-primary">{images[currentSlide].label}</span>
+      </div>
+      <div className="flex gap-2">
+        {images.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => api?.scrollTo(index)}
+            aria-label={`رفتن به اسلاید ${(index + 1).toLocaleString("fa-IR")}`}
+            className={cn(
+              "h-0.5 w-6 rounded-full transition-colors",
+              index === currentSlide
+                ? "bg-primary"
+                : "bg-primary/20 hover:bg-primary/40",
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export { Hero187b };
diff --git a/blocks/hero190.tsx b/blocks/hero190.tsx
new file mode 100644
index 0000000..2c00611
--- /dev/null
+++ b/blocks/hero190.tsx
@@ -0,0 +1,101 @@
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const Hero190 = () => {
+  return (
+    <section className="py-32">
+      <div className="flex border-t">
+        <BorderedSection>
+          <DiagonalPattern />
+        </BorderedSection>
+        <div className="container mx-auto pt-16 pb-12 text-center md:pt-20 lg:pt-28">
+          <h1 className="mx-auto max-w-[500px] text-[2.5rem] leading-[1.2] tracking-[-1.6px] text-balance md:text-[4rem] md:leading-[1.15]! md:tracking-[-4.32px] lg:text-2xll">
+            مدیریت کارها را ساده‌تر کنید
+                                </h1>
+          <p className="mx-auto mt-5 max-w-[500px] leading-[1.5] tracking-[-0.32px] text-muted-foreground md:mt-6">
+            وظایف تکراری را خودکار کنید، اولویت‌ها را مدیریت کنید و با کمک هوش مصنوعی بهره‌وری تیم را افزایش دهید.
+                                </p>
+          <Button asChild className="mt-6 gap-1 md:mt-8 lg:mt-10">
+            <a href="/dashboard">
+              شروع رایگان
+                                        <ChevronRight className="size-4 rtl:rotate-180" />
+            </a>
+          </Button>
+        </div>
+        <BorderedSection className="border-r-0 border-l">
+          <DiagonalPattern />
+        </BorderedSection>
+      </div>
+      <div className="flex h-8 gap-1 max-lg:hidden">
+        <div className="flex-1 border" />
+        <DiagonalPattern className="w-52" />
+        <div className="w-24 border" />
+        <DiagonalPattern className="w-52" />
+        <div className="w-24 border" />
+        <DiagonalPattern className="w-52" />
+        <div className="flex-1 border" />
+      </div>
+      <div className="flex">
+        <BorderedSection />
+        <div className="container pt-0! lg:p-1.5!">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
+            alt="تصویر نمونه"
+            className="rounded-xl border object-contain p-1"
+            style={{
+              boxShadow:
+                "0px 8px 8px 0px rgba(0, 0, 0, 0.06), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 2px 0px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.06)",
+            }}
+          />
+        </div>
+        <BorderedSection className="border-r-0 border-l" />
+      </div>
+      <div className="flex max-lg:hidden">
+        <div className="h-8 flex-1 border" />
+        <div className="h-[96px] w-[min(753px,55vw)] -translate-y-1.5">
+          <DiagonalPattern />
+        </div>
+        <div className="h-8 flex-1 border" />
+      </div>
+    </section>
+  );
+};
+
+export { Hero190 };
+
+const BorderedSection = ({
+  children,
+  className = "",
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => (
+  <div
+    className={cn("relative w-[159px] border-r p-1 max-lg:hidden", className)}
+  >
+    {children}
+  </div>
+);
+
+const DiagonalPattern = ({
+  className,
+  patternColor = "",
+  patternOpacity = 0.15,
+}: {
+  className?: string;
+  patternColor?: string;
+  patternOpacity?: number;
+}) => {
+  const svgPattern = `${patternColor}${patternOpacity}`;
+
+  return (
+    <div
+      className={cn("h-full w-full border-2 border-dashed", className)}
+      style={{
+        backgroundImage: svgPattern,
+      }}
+    />
+  );
+};
diff --git a/blocks/hero192.tsx b/blocks/hero192.tsx
new file mode 100644
index 0000000..f6256dc
--- /dev/null
+++ b/blocks/hero192.tsx
@@ -0,0 +1,54 @@
+import { ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero192Props {
+  className?: string;
+}
+
+const Hero192 = ({ className }: Hero192Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-12 flex max-w-5xl flex-col items-center gap-6">
+          <a
+            href="#"
+            className="flex items-center gap-2 rounded-full bg-muted py-1 pr-4 pl-1"
+          >
+            <Badge variant="outline" className="bg-background">
+              بتا
+            </Badge>
+            <div className="flex items-center gap-1">
+              <p className="text-sm font-semibold">پلتفرم را امتحان کنید</p>
+              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+            </div>
+          </a>
+          <h1 className="text-center text-2xll font-semibold md:text-2xll">
+            شیوه مدیریت کسب‌وکار را متحول کنید
+                                </h1>
+          <p className="text-center text-lg text-muted-foreground md:text-xl">
+            همه فرایندهای کاری، همکاری تیمی و مدیریت پروژه‌ها را در یک پلتفرم یکپارچه انجام دهید.
+                                </p>
+          <div className="flex gap-3">
+            <Button size="lg">شروع رایگان</Button>
+            <Button size="lg" variant="outline">
+              بیشتر بدانید
+            </Button>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            ۱۴ روز استفاده آزمایشی رایگان، بدون نیاز به تعهد.
+                                </p>
+        </div>
+        <img
+          src="/block-media/shadcnblocks/block/placeholder-1.svg"
+          alt="تصویر نمونه"
+          className="mx-auto max-h-[540px] rounded-lg object-cover drop-shadow sm:aspect-video"
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Hero192 };
diff --git a/blocks/hero194.tsx b/blocks/hero194.tsx
new file mode 100644
index 0000000..28d5d68
--- /dev/null
+++ b/blocks/hero194.tsx
@@ -0,0 +1,170 @@
+"use client";
+import AutoScroll from "embla-carousel-auto-scroll";
+import { Command } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+const teamImages = [
+  {
+    src: "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+
+  {
+    src: "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg",
+    alt: "تصویر نمونه",
+  },
+];
+
+const offsets = [0, 2, 4, 6];
+const rotatedTeamImagesArray = offsets.map((offset) =>
+  teamImages.slice(offset).concat(teamImages.slice(0, offset)),
+);
+
+const TeamCarousel = () => {
+  return (
+    <div className="w-full">
+      <div className="relative -top-4 -left-[20%] hidden gap-2 lg:flex">
+        {rotatedTeamImagesArray.map((rotatedTeamImages, index) => (
+          <Carousel
+            opts={{
+              loop: true,
+              align: "center",
+              axis: "y",
+            }}
+            plugins={[
+              AutoScroll({
+                speed: 0.5,
+                direction: index % 2 ? "backward" : "forward",
+              }),
+            ]}
+            orientation="vertical"
+            className="rotate-[7deg]"
+            key={`carousel-1-team-${index}`}
+          >
+            <CarouselContent className="h-full max-h-[40.625rem] w-fit">
+              {rotatedTeamImages.map((t, i) => (
+                <CarouselItem key={`team-image-${i}`} className="-mt-2">
+                  <div className="h-[9rem] w-[7.875rem] overflow-hidden rounded-lg">
+                    <img
+                      src={t.src}
+                      alt={t.alt}
+                      className="size-full object-cover object-center"
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        ))}
+      </div>
+
+      <div className="flex flex-col gap-2.5 pb-12 lg:hidden">
+        {[...Array(2)].map((_, i) => (
+          <Carousel
+            opts={{
+              loop: true,
+              align: "center",
+            }}
+            plugins={[
+              AutoScroll({
+                speed: 0.5,
+                direction: i % 2 ? "backward" : "forward",
+              }),
+            ]}
+            key={`carousel-2-team-${i}`}
+          >
+            <CarouselContent>
+              {teamImages.map((t, i) => (
+                <CarouselItem
+                  key={`team-image-${i}`}
+                  className="h-[9rem] w-full max-w-[7.875rem] pl-2.5"
+                >
+                  <div className="size-full overflow-hidden rounded-lg">
+                    <img
+                      src={t.src}
+                      alt={t.alt}
+                      className="block size-full object-cover object-center"
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface Hero194Props {
+  className?: string;
+}
+
+const Hero194 = ({ className }: Hero194Props) => {
+  return (
+    <section className={cn("container max-w-[1536px] py-20", className)}>
+      <div className="dark relative overflow-hidden rounded-2xl bg-black">
+        <div className="grid h-full w-full grid-cols-1 lg:max-h-[37.5rem] lg:grid-cols-2" dir="rtl">
+          <div className="relative order-2 lg:order-1">
+            <TeamCarousel />
+          </div>
+          <div className="absolute right-1/2 z-10 hidden h-full w-[500px] bg-linear-to-l from-black via-black/95 to-transparent lg:block"></div>
+          <div
+            className="order-1 ms-auto flex w-full max-w-[90%] flex-col justify-center gap-5 py-16 pr-20 pl-10 md:max-w-[70%] lg:order-2 lg:max-w-full lg:py-0"
+            dir="rtl"
+          >
+            <h1 className="text-xl leading-[1.1] text-white md:text-2xll lg:text-xl xl:text-2xll">
+              پردازش هوشمند تصاویر با هوش مصنوعی
+                                      </h1>
+            <p className="text-sm text-muted-foreground md:text-base">
+              با ابزارهای هوش مصنوعی کیفیت تصاویر را بهبود دهید، جزئیات را افزایش دهید و تصاویر حرفه‌ای تولید کنید.
+                                      </p>
+
+            <div className="flex gap-4">
+              <Button variant="secondary">
+                <Command className="size-4" />
+                دانلود
+                                            </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero194 };
diff --git a/blocks/hero195.tsx b/blocks/hero195.tsx
new file mode 100644
index 0000000..6cfeaac
--- /dev/null
+++ b/blocks/hero195.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import {
+  BarChart,
+  Database,
+  Layers,
+  PieChart,
+  SquareKanban,
+} from "lucide-react";
+import { useState } from "react";
+
+import { BorderBeam } from "@/components/magicui/border-beam";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+export interface Tab {
+  title: string;
+  icon: React.ReactNode;
+  image: string;
+}
+
+export interface Hero195Props {
+  title: string;
+  description: string;
+  primaryButtonText: string;
+  secondaryButtonText?: string;
+  primaryButtonUrl: string;
+  secondaryButtonUrl?: string;
+  tabs?: Tab[];
+  className?: string;
+}
+
+const defaultTabs: Tab[] = [
+  {
+    title: "بینش‌ها",
+    icon: <SquareKanban />,
+    image:
+      "/block-media/shadcnblocks/block/dashboard/admin-dashboard-1.png",
+  },
+  {
+    title: "معیارها",
+    icon: <BarChart />,
+    image:
+      "/block-media/shadcnblocks/block/dashboard/admin-dashboard-2.png",
+  },
+  {
+    title: "روندها",
+    icon: <PieChart />,
+    image:
+      "/block-media/shadcnblocks/block/dashboard/admin-dashboard-3.png",
+  },
+  {
+    title: "منابع",
+    icon: <Database />,
+    image:
+      "/block-media/shadcnblocks/block/dashboard/admin-users.png",
+  },
+  {
+    title: "مدل‌ها",
+    icon: <Layers />,
+    image:
+      "/block-media/shadcnblocks/block/dashboard/admin-developer.png",
+  },
+];
+
+const Hero195 = ({
+  title = "مجموعه بلاک‌های آماده رابط کاربری",
+  description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.",
+  primaryButtonText = "دریافت کامپوننت‌ها",
+  primaryButtonUrl = "https://ShadcnBlocks",
+  secondaryButtonUrl,
+  secondaryButtonText,
+  tabs = defaultTabs,
+  className,
+}: Hero195Props) => {
+  const [activeTab, setActiveTab] = useState(tabs[0]?.title || "");
+
+  return (
+    <section className={cn("overflow-hidden", className)}>
+      <div className="container">
+        <div className="border-x border-border py-20">
+          <div className="relative mx-auto max-w-2xl p-2">
+            <h1 className="mx-1 mt-6 text-center text-2xll font-bold tracking-tighter md:text-2xll">
+              {title}
+            </h1>
+            <p className="mx-2 mt-6 max-w-xl text-center text-lg font-medium text-muted-foreground md:text-xl">
+              {description}
+            </p>
+            <div className="mx-2 mt-6 flex justify-center gap-2">
+              <Button asChild>
+                <a href={primaryButtonUrl}>{primaryButtonText}</a>
+              </Button>
+              {secondaryButtonText && (
+                <Button variant="outline" asChild>
+                  <a href={secondaryButtonUrl}>{secondaryButtonText}</a>
+                </Button>
+              )}
+            </div>
+          </div>
+          <div className="mt-16 md:mt-20">
+            <Tabs defaultValue={tabs[0]?.title} onValueChange={setActiveTab}>
+              <div className="px-2">
+                <TabsList className="mx-auto mb-6 flex !h-auto w-fit max-w-xs flex-wrap justify-center gap-2 md:max-w-none">
+                  {tabs.map((tab) => (
+                    <TabsTrigger
+                      key={tab.title}
+                      value={tab.title}
+                      className="font-normal text-muted-foreground"
+                    >
+                      {tab.icon}
+                      {tab.title}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </div>
+              <div className="relative isolate">
+                <div className="relative z-10">
+                  {tabs.map((tab) => (
+                    <TabsContent
+                      key={tab.title}
+                      value={tab.title}
+                      className={cn(
+                        "-mx-px bg-background transition-opacity duration-500",
+                        {
+                          "animate-in opacity-100 fade-in":
+                            activeTab === tab.title,
+                          "opacity-0": activeTab !== tab.title,
+                        },
+                      )}
+                    >
+                      <img
+                        src={tab.image}
+                        alt={tab.title}
+                        className="aspect-[16/10] w-full border border-border object-top shadow-[0_6px_20px_rgb(0,0,0,0.12)]"
+                      />
+                      <BorderBeam duration={8} size={100} />
+                    </TabsContent>
+                  ))}
+                </div>
+                <span className="absolute -inset-x-1/5 top-0 -z-10 h-px bg-border [mask-image:linear-gradient(to_right,transparent_1%,black_10%,black_90%,transparent_99%)]"></span>
+                <span className="absolute -inset-x-1/5 bottom-0 -z-10 h-px bg-border [mask-image:linear-gradient(to_right,transparent_1%,black_10%,black_90%,transparent_99%)]"></span>
+
+                <span className="absolute -inset-x-1/5 top-12 h-px border-t border-dashed border-border [mask-image:linear-gradient(to_right,transparent_1%,black_10%,black_90%,transparent_99%)]"></span>
+                <span className="absolute -inset-x-1/5 bottom-12 h-px border-t border-dashed border-border [mask-image:linear-gradient(to_right,transparent_1%,black_10%,black_90%,transparent_99%)]"></span>
+
+                <span className="absolute -inset-y-1/5 left-1/6 w-px border-r border-dashed border-border [mask-image:linear-gradient(to_bottom,transparent_1%,black_10%,black_90%,transparent_99%)]"></span>
+                <span className="absolute -inset-y-1/5 right-1/6 w-px border-r border-dashed border-border [mask-image:linear-gradient(to_bottom,transparent_1%,black_10%,black_90%,transparent_99%)]"></span>
+              </div>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero195 };
diff --git a/blocks/hero196.tsx b/blocks/hero196.tsx
new file mode 100644
index 0000000..3b70d34
--- /dev/null
+++ b/blocks/hero196.tsx
@@ -0,0 +1,186 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  ArrowRight,
+  Calendar,
+  Route,
+  Text,
+  Waypoints,
+  Workflow,
+} from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface Hero196Props {
+  className?: string;
+}
+
+const TAB_LIST = [
+  {
+    icon: Calendar,
+    title: "زمان‌بندی",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    icon: Route,
+    title: "مسیریابی",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    icon: Workflow,
+    title: "گردش‌کارها",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    icon: Text,
+    title: "فرم‌ها",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    icon: Waypoints,
+    title: "غنی‌سازی",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+];
+
+const formSchema = z
+  .object({
+    email: z.string().email("آدرس ایمیل نامعتبر است"),
+  })
+  .required({ email: true });
+
+const HeroForm = () => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
+      <Controller
+        control={form.control}
+        name="email"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name} className="sr-only">
+              ایمیل
+            </FieldLabel>
+            <div className="w-full">
+              <div className="relative flex w-full flex-col gap-2 lg:block">
+                <Input
+                  {...field}
+                  type="email"
+                  id={field.name}
+                  aria-invalid={fieldState.invalid}
+                  placeholder="ایمیل کاری خود را وارد کنید"
+                  className="h-fit bg-background py-4 pe-5 ps-5 lg:pe-[13.75rem]"
+                />
+                <div className="top-1/2 right-2.5 lg:absolute lg:-translate-y-1/2">
+                  <Button
+                    type="submit"
+                    className="w-full rounded-full lg:w-fit"
+                  >
+                    مشاهده دمو
+                                                    <ArrowRight className="rtl:rotate-180" />
+                  </Button>
+                </div>
+              </div>
+              {fieldState.invalid && (
+                <FieldError errors={[fieldState.error]} className="py-1" />
+              )}
+            </div>
+          </Field>
+        )}
+      />
+    </form>
+  );
+};
+
+const Hero196 = ({ className }: Hero196Props) => {
+  return (
+    <section
+      className={cn(
+        "bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-20",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="flex w-full flex-col gap-14">
+          <div className="flex w-full max-w-[80rem] flex-col items-center gap-6">
+            <Badge
+              asChild
+              variant="outline"
+              className="gap-2.5 rounded-full bg-background px-3 py-2.5 text-sm"
+            >
+              <a href="#">
+                معرفی نسخه ۲۰
+                                              <ArrowRight className="size-base rtl:rotate-180" />
+              </a>
+            </Badge>
+            <h1 className="text-center text-[2.5rem] leading-[.97] font-bold sm:text-[3.5rem] md:text-[4rem]">
+              فرایند جذب و مدیریت درخواست‌ها را هوشمند کنید
+                                      </h1>
+            <div className="flex w-full max-w-[36rem] flex-col items-center justify-center gap-6 pt-5">
+              <p className="text-center text-[1.25rem] leading-snug font-medium text-foreground">
+                با خودکارسازی زمان‌بندی، مسیردهی درخواست‌ها و گردش‌کارها، بهره‌وری تیم فروش و پشتیبانی را افزایش دهید.
+                                            </p>
+              <div className="w-full max-w-[30rem]">
+                <HeroForm />
+              </div>
+            </div>
+          </div>
+          <div>
+            <Tabs
+              defaultValue={TAB_LIST[0].title}
+              className="w-full max-w-[85rem] gap-5 rounded-3xl bg-background p-2.5"
+            >
+              <TabsList className="flex !h-fit w-full max-w-fit items-start justify-start gap-2.5 overflow-auto rounded-2xl bg-muted p-2.5 md:mx-auto md:items-center md:justify-center">
+                {TAB_LIST.map((trigger, i) => (
+                  <TabsTrigger
+                    className="fshrink-0 bg-background px-5 py-2.5"
+                    key={`tab-trigger-${i}`}
+                    value={trigger.title}
+                  >
+                    <trigger.icon />
+                    {trigger.title}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              {TAB_LIST.map((content, i) => (
+                <TabsContent key={`tab-content-${i}`} value={content.title}>
+                  <div className="aspect-[1.696202532] w-full overflow-hidden rounded-3xl">
+                    <img
+                      src={content.image}
+                      alt="تصویر نمونه"
+                      className="block size-full object-cover object-center"
+                    />
+                  </div>
+                </TabsContent>
+              ))}
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero196 };
diff --git a/blocks/hero197.tsx b/blocks/hero197.tsx
new file mode 100644
index 0000000..40d27ce
--- /dev/null
+++ b/blocks/hero197.tsx
@@ -0,0 +1,50 @@
+import { Sparkles } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero197Props {
+  className?: string;
+}
+
+const Hero197 = ({ className }: Hero197Props) => {
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      <div className="container">
+        {/* Background pattern with dots */}
+        <div className="absolute inset-0 -z-10 h-full w-full bg-[radial-gradient(var(--primary)_1px,transparent_1px)] [background-size:20px_20px] opacity-25"></div>
+
+        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+          <div className="max-w-2xl">
+            <Badge
+              variant="outline"
+              className="mb-6 bg-background px-4 py-1.5 text-sm"
+            >
+              به‌زودی <Sparkles className="ms-1 size-3.5" />
+            </Badge>
+
+            <h1 className="bg-linear-to-r from-foreground to-foreground/70 bg-clip-text text-2xll font-bold text-transparent md:text-2xll lg:text-2xll">
+              توسعه نرم‌افزار را سریع‌تر پیش ببرید
+                                      </h1>
+
+            <p className="mt-6 max-w-xl text-xl text-muted-foreground">
+              با خودکارسازی فرایندها، همکاری تیمی و مدیریت توسعه، نرم‌افزارهای باکیفیت را سریع‌تر منتشر کنید.
+                                      </p>
+
+            <div className="mt-8 flex flex-col gap-6 sm:flex-row sm:items-center">
+              <Button size="lg" className="w-full sm:w-auto">
+                رایگان شروع کنید
+              </Button>
+              <Button size="lg" variant="outline" className="w-full sm:w-auto">
+                درخواست نسخه نمایشی
+                                            </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero197 };
diff --git a/blocks/hero2.tsx b/blocks/hero2.tsx
new file mode 100644
index 0000000..4ded884
--- /dev/null
+++ b/blocks/hero2.tsx
@@ -0,0 +1,92 @@
+import { ArrowRight, ArrowUpRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero2Props {
+  badge?: string;
+  heading: string;
+  description: string;
+  buttons?: {
+    primary?: {
+      text: string;
+      url: string;
+    };
+    secondary?: {
+      text: string;
+      url: string;
+    };
+  };
+  image: {
+    src: string;
+    alt: string;
+  };
+  className?: string;
+}
+
+const Hero2 = ({
+  badge = "پلتفرم توسعه رابط کاربری",
+  heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه سریع رابط کاربری",
+  description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید بدون نیاز به طراحی از ابتدا، مستقیماً در پروژه‌های خود استفاده کنید.",
+  buttons = {
+    primary: {
+      text: "مشاهده همه بلاک‌ها",
+      url: "https://www.ShadcnBlocks",
+    },
+    secondary: {
+      text: "مشاهده مخزن مخزن کد",
+      url: "https://www.ShadcnBlocks",
+    },
+  },
+  image = {
+    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    alt: "پیش‌نمایش بخش اصلی صفحه",
+  },
+  className,
+}: Hero2Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-6 lg:grid-cols-2 lg:gap-12">
+          <img
+            src={image.src}
+            alt={image.alt}
+            className="aspect-video w-full rounded-md object-cover"
+          />
+          <div className="flex flex-col items-center gap-5 text-center lg:items-start lg:text-start">
+            {badge && (
+              <Badge variant="outline">
+                {badge}
+                <ArrowUpRight className="ms-2 size-4" />
+              </Badge>
+            )}
+            <h1 className="text-xl font-bold text-pretty lg:text-2xll">
+              {heading}
+            </h1>
+            <p className="max-w-xl text-muted-foreground lg:text-xl">
+              {description}
+            </p>
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              {buttons.primary && (
+                <Button asChild className="w-full sm:w-auto">
+                  <a href={buttons.primary.url}>{buttons.primary.text}</a>
+                </Button>
+              )}
+              {buttons.secondary && (
+                <Button asChild variant="outline" className="w-full sm:w-auto">
+                  <a href={buttons.secondary.url}>
+                    {buttons.secondary.text}
+                    <ArrowRight className="size-4 rtl:rotate-180" />
+                  </a>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero2 };
diff --git a/blocks/hero20.tsx b/blocks/hero20.tsx
new file mode 100644
index 0000000..7256586
--- /dev/null
+++ b/blocks/hero20.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import Fade from "embla-carousel-fade";
+import { CopyCheck, DollarSign, MessagesSquare } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const DURATION = 8000;
+
+const accordions = [
+  {
+    id: "1",
+    question: "آیا می‌توانم برای پروژه‌های تجاری استفاده کنم؟",
+    icon: <CopyCheck className="w-5" />,
+    answer: "بله، تمامی بلاک‌ها و کامپوننت‌ها را می‌توانید در پروژه‌های شخصی و تجاری استفاده کنید.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    id: "2",
+    question: "هزینه پنهانی وجود دارد؟",
+    icon: <DollarSign className="w-5" />,
+    answer: "خیر، هیچ هزینه پنهانی وجود ندارد.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    id: "3",
+    question: "پشتیبانی ارائه می‌دهید؟",
+    icon: <MessagesSquare className="w-5" />,
+    answer: "بله، تیم پشتیبانی از طریق ایمیل و مستندات در کنار شماست.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+];
+
+interface Hero20Props {
+  className?: string;
+}
+
+const Hero20 = ({ className }: Hero20Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [currentAccordion, setCurrentAccordion] = useState("1");
+
+  useEffect(() => {
+    api?.scrollTo(+currentAccordion - 1);
+    const interval = setInterval(() => {
+      setCurrentAccordion((prev) => {
+        const next = parseInt(prev) + 1;
+        return next > 3 ? "1" : next.toString();
+      });
+    }, DURATION);
+
+    return () => clearInterval(interval);
+  }, [api, currentAccordion]);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto grid max-w-5xl gap-20 lg:grid-cols-2">
+          <div>
+            <Badge variant="outline" className="mb-4">
+              پلتفرم
+            </Badge>
+            <h1 className="mb-8 text-3xl font-medium lg:text-2xll">
+              پلتفرم خود را با سرعت توسعه دهید
+                                      </h1>
+            <Accordion
+              type="single"
+              value={currentAccordion}
+              onValueChange={(value) => {
+                setCurrentAccordion(value);
+                console.log(value);
+                api?.scrollTo(+value - 1);
+              }}
+            >
+              {accordions.map((accordion) => (
+                <AccordionItem
+                  key={accordion.id}
+                  value={accordion.id}
+                  className="border-b-0"
+                >
+                  <AccordionTrigger className="text-start data-[state=closed]:text-muted-foreground">
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="flex size-9 items-center justify-center rounded-lg bg-muted">
+                        {accordion.icon}
+                      </span>
+                      <span className="font-medium lg:text-lg">
+                        {accordion.question}
+                      </span>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="text-muted-foreground lg:text-base">
+                    {accordion.answer}
+                    <div className="mt-8 h-px bg-muted">
+                      <div
+                        className="h-px animate-progress bg-primary"
+                        style={{
+                          animationDuration: `${DURATION}ms`,
+                        }}
+                      ></div>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+          <div>
+            <Carousel
+              opts={{
+                duration: 50,
+              }}
+              setApi={setApi}
+              plugins={[Fade()]}
+            >
+              <CarouselContent>
+                {accordions.map((accordion) => (
+                  <CarouselItem key={accordion.id}>
+                    <div>
+                      <img
+                        src={accordion.image}
+                        alt="تصویر نمونه"
+                        className="max-h-96 w-full object-cover lg:max-h-none"
+                      />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero20 };
diff --git a/blocks/hero200.tsx b/blocks/hero200.tsx
new file mode 100644
index 0000000..4bad343
--- /dev/null
+++ b/blocks/hero200.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero200Props {
+  className?: string;
+}
+
+const Hero200 = ({ className }: Hero200Props) => {
+  return (
+    <section className={cn("bg-background py-32", className)}>
+      <div className="border-b border-foreground/40">
+        <div className="container flex flex-col items-center justify-center gap-4 text-center">
+          <h2 className="font-semibold tracking-tighter text-foreground/80 md:text-xl">
+            پلتفرم کامپوننت
+                                </h2>
+          <h1 className="font-playfair text-xl tracking-tighter text-foreground md:text-2xll">
+            مجموعه بلاک‌های آماده مبتنی بر
+                                  <br />
+            رابط کاربری، استایل‌دهی مدرن و ری یو آی
+                                  <br />
+            مستقیماً در پروژه خود استفاده کنید.
+                                </h1>
+          <Button className="my-10 rounded-2xl px-6 py-6 text-background shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40] md:rounded-3xl md:px-12 md:py-8 md:text-lg">
+            <p className="me-1 text-xl text-background md:me-3 md:text-xl">
+              
+            </p>{" "}
+            شروع رایگان
+                                </Button>
+
+          {/* Iphone mockup with content */}
+          <div className="h-[500px] w-full overflow-hidden">
+            <motion.div
+              initial={{ opacity: 0, y: 200, scale: 0.8 }}
+              animate={{ opacity: 100, y: 0, scale: 1 }}
+              transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
+              className="relative mx-auto mt-6 flex h-[850px] w-[400px] items-center justify-center rounded-[75px] bg-black md:mt-12 md:h-[920px] md:w-[450px]"
+            >
+              <img
+                className="absolute z-2 scale-105 object-cover"
+                alt="قاب گوشی"
+                src="/block-media/shadcnblocks/block/mockups/phone-5.png"
+              />
+              <div className="h-full w-full">
+                <div className="mt-20 flex justify-between px-0">
+                  <h1 className="flex items-end gap-2 px-12 text-2xll font-semibold tracking-tight text-background md:text-2xll">
+                    Mon
+                    <div className="mb-2 size-3 rounded-full bg-red-500 md:size-5" />
+                  </h1>
+                  <div className="mt-2 me-8 flex flex-col items-end">
+                    <p className="text-lg tracking-tight text-muted-foreground md:text-xl">
+                      آخرین به‌روزرسانی
+                                                              </p>
+                    <p className="-mt-1 text-xl font-semibold tracking-tighter text-muted-foreground/50 md:text-xl">
+                      2025
+                    </p>
+                  </div>
+                </div>
+                <img
+                  className="z-2 mx-auto mt-20 size-40 object-cover"
+                  alt="قاب گوشی"
+                  src="/block-media/shadcnblocks/block/block-white-1.svg"
+                />
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero200 };
diff --git a/blocks/hero201.tsx b/blocks/hero201.tsx
new file mode 100644
index 0000000..2612954
--- /dev/null
+++ b/blocks/hero201.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ChevronRightIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero201Props {
+  className?: string;
+}
+
+const Hero201 = ({ className }: Hero201Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="relative container overflow-hidden md:py-32">
+        <div className="mb-4 flex items-center justify-center gap-4">
+          <img
+            className="size-6 dark:invert"
+            alt="لوگو"
+            src="/block-media/shadcnblocks/block/block-1.svg"
+          />
+          <h2 className="text-center text-lg font-semibold tracking-tight text-foreground">
+            استفاده بدون پیچیدگی
+                                </h2>
+        </div>
+
+        <h1 className="font-inter mx-auto max-w-4xl text-center text-[70px] leading-[65px] font-semibold tracking-tighter text-foreground md:text-[105px] md:leading-[96px]">
+          کامپوننت‌های آماده و حرفه‌ای
+                          </h1>
+
+        <p className="mx-auto mt-6 max-w-3xl text-center text-xl text-muted-foreground">
+          صدها کامپوننت استاندارد و قابل سفارشی‌سازی را بدون نیاز به طراحی از ابتدا در پروژه خود استفاده کنید.
+                          </p>
+
+        <div className="relative mt-8 flex flex-col items-center justify-center">
+          <Button className="w-75 rounded-2xl px-2 py-6 shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40]">
+            شروع رایگان
+                                </Button>
+          <a
+            href="#"
+            className="group relative z-12 flex w-75 items-center justify-center rounded-2xl py-6 text-muted-foreground hover:bg-none"
+          >
+            درخواست نسخه نمایشی
+                                  <ChevronRightIcon className="ms-1 h-4 w-4 transition-all ease-in-out group-hover:ms-4 rtl:rotate-180" />
+          </a>
+        </div>
+        <motion.div
+          initial={{ opacity: 0, y: -250, scale: 0.6 }}
+          animate={{ opacity: 100, y: 0, scale: 1 }}
+          transition={{ ease: "easeInOut", duration: 0.6 }}
+          className="absolute -top-80 -right-80 -z-10 hidden h-full w-240 items-center justify-center md:flex"
+        >
+          <img
+            className="infinite absolute w-full rotate-12 animate-[spin_15s_linear_infinite] dark:invert"
+            src="/block-media/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
+            alt="تصویر نمونه"
+          />
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 250, scale: 0.6 }}
+          animate={{ opacity: 100, y: 0, scale: 1 }}
+          transition={{ ease: "easeInOut", duration: 0.6 }}
+          className="-bottom-80 -left-80 -z-10 mt-32 -mb-24 flex h-full w-full items-center justify-center md:absolute md:w-240"
+        >
+          <img
+            className="infinite absolute w-full rotate-12 animate-[spin_15s_linear_infinite] dark:invert"
+            src="/block-media/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
+            alt="تصویر نمونه"
+          />
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero201 };
diff --git a/blocks/hero202.tsx b/blocks/hero202.tsx
new file mode 100644
index 0000000..8d8145a
--- /dev/null
+++ b/blocks/hero202.tsx
@@ -0,0 +1,64 @@
+import { ArrowRightIcon } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Hero202Props {
+  className?: string;
+}
+
+const Hero202 = ({ className }: Hero202Props) => {
+  return (
+    <section className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <Card className="group relative w-full overflow-hidden rounded-4xl border border-none bg-muted shadow-none">
+          <CardContent className="py-12 lg:px-18 lg:py-24">
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+              <div className="flex flex-col justify-center space-y-6">
+                <p className="flex items-center gap-2 text-xl font-medium tracking-tight text-foreground">
+                  <img
+                    className="size-6"
+                    alt="آیکون کپی و چسباندن"
+                    src="/block-media/shadcnblocks/block/block-1.svg"
+                  />
+                  بلاک‌های کپی و چسباندن
+                </p>
+
+                <h1 className="mt-3 text-8xl font-bold tracking-tighter text-foreground">
+                  بیایید محصولی
+                                                    <span className="bg-linear-to-b from-background to-foreground bg-clip-text text-transparent">
+                    {" "}
+                    فوق‌العاده بسازیم
+                                                        </span>
+                </h1>
+
+                <div className="mt-4 flex gap-2">
+                  <Button className="h-13 w-fit rounded-full px-8 text-lg">
+                    شروع همکاری
+                                                        </Button>
+                  <Button
+                    variant="outline"
+                    className="size-13 -rotate-45 rounded-full transition-all ease-in-out hover:rotate-0 rtl:rotate-[135deg] rtl:hover:rotate-0"
+                  >
+                    <ArrowRightIcon className="rtl:rotate-180" />
+                  </Button>
+                </div>
+              </div>
+              <div className="absolute -right-70 -bottom-70 -rotate-45 transition-all ease-in-out group-hover:-rotate-0">
+                <img
+                  src="/block-media/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
+                  className="size-150 md:size-220"
+                  alt="تصویر نمونه"
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { Hero202 };
diff --git a/blocks/hero203.tsx b/blocks/hero203.tsx
new file mode 100644
index 0000000..4e22cbb
--- /dev/null
+++ b/blocks/hero203.tsx
@@ -0,0 +1,142 @@
+import { ChevronUp } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const Hero203 = () => {
+  return (
+    <section className="bg-background py-32">
+      <div className="relative container flex flex-col items-center px-0!">
+        <div className="container flex w-full flex-col justify-between px-10 lg:flex-row">
+          <div className="flex w-full flex-col gap-8">
+            <a href="#" className="text-xl font-semibold tracking-tighter">
+              کتابخانه کامپوننت
+                                      </a>
+            <h1 className="bg-re relative z-20 text-2xll font-semibold tracking-tighter md:text-8xl">
+              مجموعه بلاک‌های آماده رابط کاربری
+                                      </h1>
+            <p className="max-w-2xl tracking-tight text-muted-foreground md:text-xl">
+              صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                      </p>
+          </div>
+          <div className="mt-8 flex flex-col items-start md:mt-18 lg:w-5/9 lg:items-center">
+            <Button className="rounded-2xl px-6 py-6 text-background shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40] md:rounded-3xl md:px-12 md:py-8 md:text-lg">
+              شروع رایگان
+                                      </Button>
+          </div>
+        </div>
+        <div className="flex w-full flex-col justify-between md:mt-10 md:flex-row">
+          <DottedDiv className="group h-160 w-full max-w-120 p-4">
+            <div className="relative h-full w-full bg-muted/50 p-4 transition-all ease-in-out group-hover:bg-muted">
+              {/* Bg Image div */}
+              <div className="relative h-full w-full overflow-hidden rounded-3xl">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg"
+                  alt="تصویر نمونه"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-linear-to-t from-black/70 to-transparent"></div>
+              </div>
+              <div className="absolute top-4 -ms-4 flex h-full w-full flex-col items-center justify-between p-10">
+                <p className="flex w-full items-center text-xl tracking-tighter text-background dark:text-foreground">
+                  2025{" "}
+                  <span className="mx-2 h-2.5 w-[1px] bg-background dark:bg-foreground" />
+                  مارس
+                </p>
+                <div className="flex flex-col items-center justify-center">
+                  <h2 className="text-center text-2xll font-semibold tracking-tight text-background dark:text-foreground">
+                    ری یو آی <br />
+                    Carousal
+                  </h2>
+                  <div className="mt-2 h-1 w-6 rounded-full bg-background dark:bg-foreground" />
+                  <p className="mt-10 max-w-sm px-2 text-center text-lg leading-5 font-light tracking-tighter text-background/80 dark:text-foreground/80">
+                    مجموعه‌ای از بلاک‌های آماده برای ساخت رابط کاربری مدرن و
+                    سریع.
+                  </p>
+                </div>
+                <a
+                  href="#"
+                  className="group mb-6 flex cursor-pointer flex-col items-center justify-center text-background dark:text-foreground"
+                >
+                  <ChevronUp
+                    size={30}
+                    className="transition-all ease-in-out group-hover:-translate-y-2"
+                  />
+                  <p className="text-xl tracking-tight text-background dark:text-foreground">
+                    مشاهده همه
+                  </p>
+                </a>
+              </div>
+            </div>
+          </DottedDiv>
+          <DottedDiv className="group h-160 w-full max-w-120 p-4 lg:-mt-60">
+            <div className="relative h-full w-full bg-muted/50 p-4 transition-all ease-in-out group-hover:bg-muted">
+              {/* Bg Image div */}
+              <div className="relative h-full w-full overflow-hidden rounded-3xl">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/simone-hutsch-majMgWtrF48-unsplash.jpg"
+                  alt="تصویر نمونه"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-linear-to-t from-black/70 to-transparent"></div>
+              </div>
+              <div className="absolute top-4 -ms-4 flex h-full w-full flex-col items-center justify-between p-10">
+                <p className="flex w-full items-center text-xl tracking-tighter text-background dark:text-foreground">
+                  2025{" "}
+                  <span className="mx-2 h-2.5 w-[1px] bg-background dark:bg-foreground" />
+                  مارس
+                </p>
+                <div className="flex flex-col items-center justify-center">
+                  <h2 className="text-center text-2xll font-semibold tracking-tight text-background dark:text-foreground">
+                    ری یو آی <br />
+                    Carousal
+                  </h2>
+                  <div className="mt-2 h-1 w-6 rounded-full bg-background dark:bg-foreground" />
+                  <p className="mt-10 max-w-sm px-2 text-center text-lg leading-5 font-light tracking-tighter text-background/80 dark:text-foreground/80">
+                    مجموعه‌ای از بلاک‌های آماده برای ساخت رابط کاربری مدرن و
+                    سریع.
+                  </p>
+                </div>
+                <a
+                  href="#"
+                  className="group mb-6 flex cursor-pointer flex-col items-center justify-center text-background dark:text-foreground"
+                >
+                  <ChevronUp
+                    size={30}
+                    className="transition-all ease-in-out group-hover:-translate-y-2"
+                  />
+                  <p className="text-xl tracking-tight text-background dark:text-foreground">
+                    مشاهده همه
+                  </p>
+                </a>
+              </div>
+            </div>
+          </DottedDiv>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero203 };
+
+const DottedDiv = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div className={cn("relative", className)}>
+    <div className="absolute top-4 -left-25 h-[1.5px] w-[115%] bg-muted" />
+    <div className="absolute bottom-4 -left-25 h-[1.5px] w-[115%] bg-muted" />
+    <div className="absolute -top-25 left-4 h-[130%] w-[1.5px] bg-muted" />
+    <div className="absolute -top-25 right-4 h-[130%] w-[1.5px] bg-muted" />
+    <div className="absolute top-[12.5px] left-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute top-[12.5px] right-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute bottom-[12.5px] left-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    <div className="absolute right-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
+    {children}
+  </div>
+);
diff --git a/blocks/hero204.tsx b/blocks/hero204.tsx
new file mode 100644
index 0000000..ec10c8a
--- /dev/null
+++ b/blocks/hero204.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Hero204Props {
+  className?: string;
+}
+
+const Hero204 = ({ className }: Hero204Props) => {
+  return (
+    <section className={cn("bg-background py-32", className)}>
+      <div className="container flex flex-col items-center justify-center gap-4 text-center">
+        <h2 className="flex text-xl tracking-tighter text-foreground">
+          <Sparkle className="ms-3" /> کتابخانه کامپوننت
+                          </h2>
+        <h1 className="font-playfair max-w-xl text-xl tracking-tighter text-foreground md:text-2xll">
+          کامپوننت‌های آماده برای توسعه سریع رابط کاربری
+                          </h1>
+        <p className="mt-7 max-w-xl text-xl tracking-tight text-muted-foreground">
+          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+
+        <div className="mt-10 flex w-full max-w-xl items-center justify-center rounded-full border p-1">
+          <Input
+            placeholder="ایمیل خود را وارد کنید"
+            className="w-full border-none ps-5 text-xl! tracking-tight shadow-none outline-none focus-visible:ring-0 focus-visible:outline-none"
+          />
+          <Button className="rounded-full px-10 py-7 text-lg text-background transition-all ease-in-out hover:px-12">
+            شروع رایگان
+                                </Button>
+        </div>
+
+        {/* Iphone mockup with content */}
+        <div className="relative mt-12 flex h-[450px] w-screen justify-center overflow-hidden border-b-2 border-border">
+          <motion.div
+            initial={{ opacity: 0, y: 200, scale: 0.8 }}
+            animate={{ opacity: 100, y: 0, scale: 1 }}
+            transition={{ ease: [0, 0.51, 0.2, 1.01], duration: 0.8 }}
+            className="absolute mx-auto mt-6 me-58 hidden h-[850px] w-[400px] -rotate-18 items-center justify-center rounded-[75px] bg-black md:mt-12 md:flex md:h-[840px] md:w-[400px]"
+          >
+            <img
+              className="absolute z-2 scale-105 object-cover"
+              alt="تصویر نمونه"
+              src="/block-media/shadcnblocks/block/mockups/phone-5.png"
+            />
+            <div className="h-full w-full">
+              <div className="mt-20 flex justify-between px-0">
+                <h1 className="flex items-end gap-2 px-12 text-2xll font-semibold tracking-tight text-background md:text-2xll">
+                  کامپوننت‌های رابط کاربری
+                                                    <div className="mb-2 size-3 rounded-full bg-red-500 md:size-5" />
+                </h1>
+                <div className="mt-2 me-8 flex flex-col items-end">
+                  <p className="text-lg tracking-tighter text-muted-foreground md:text-xl">
+                    آخرین به‌روزرسانی
+                                                        </p>
+                  <p className="-mt-1 text-xl font-semibold tracking-tighter text-muted-foreground/50 md:text-xl">
+                    2025
+                  </p>
+                </div>
+              </div>
+              <img
+                className="z-2 mx-auto mt-20 size-40 object-cover"
+                alt="تصویر نمونه"
+                src="/block-media/shadcnblocks/block/block-white-1.svg"
+              />
+            </div>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 200, scale: 0.8 }}
+            animate={{ opacity: 100, y: 0, scale: 1 }}
+            transition={{
+              ease: [0, 0.71, 0.2, 1.01],
+              duration: 0.8,
+            }}
+            className="absolute mx-auto mt-6 flex h-[850px] w-[400px] items-center justify-center rounded-[75px] bg-background md:mt-24 md:ms-58 md:h-[840px] md:w-[400px] md:rotate-20"
+          >
+            <img
+              className="absolute z-2 scale-105 object-cover"
+              alt="تصویر نمونه"
+              src="/block-media/shadcnblocks/block/mockups/phone-5.png"
+            />
+            <div className="h-full w-full">
+              <div className="mt-20 flex justify-between px-0">
+                <h1 className="flex items-end gap-2 px-12 text-2xll font-semibold tracking-tight text-foreground md:text-2xll">
+                  بلاک‌های صفحات
+                                                    <div className="mb-2 size-3 rounded-full bg-red-500 md:size-5" />
+                </h1>
+                <div className="mt-2 me-8 flex flex-col items-end">
+                  <p className="text-lg tracking-tighter text-muted-foreground md:text-xl">
+                    به‌روزرسانی جدید
+                                                        </p>
+                  <p className="-mt-1 text-xl font-semibold tracking-tighter text-muted-foreground/50 md:text-xl">
+                    2025
+                  </p>
+                </div>
+              </div>
+              <img
+                className="z-2 mx-auto mt-20 size-40 object-cover"
+                alt="تصویر نمونه"
+                src="/block-media/shadcnblocks/block/block-1.svg"
+              />
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero204 };
+
+const Sparkle = (params: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...params}
+    width="35"
+    height="24"
+    viewBox="0 0 35 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22.0411 1.18695C22.2971 0.487161 23.287 0.487161 23.5431 1.18695L24.3079 3.27567C24.9078 4.91423 25.8577 6.40229 27.0915 7.63612C28.3254 8.86996 29.8134 9.8199 31.452 10.4197L33.5407 11.1846C34.2416 11.4406 34.2416 12.4306 33.5407 12.6866L31.452 13.4515C29.8134 14.0513 28.3254 15.0013 27.0915 16.2351C25.8577 17.4689 24.9078 18.957 24.3079 20.5955L23.5431 22.6843C23.287 23.3851 22.2971 23.3851 22.0411 22.6843L21.2762 20.5955C20.6763 18.957 19.7264 17.4689 18.4926 16.2351C17.2587 15.0013 15.7707 14.0513 14.1321 13.4515L12.0434 12.6866C11.3436 12.4306 11.3436 11.4406 12.0434 11.1846L14.1321 10.4197C15.7707 9.8199 17.2587 8.86996 18.4926 7.63612C19.7264 6.40229 20.6763 4.91423 21.2762 3.27567L22.0411 1.18695Z"
+      fill="#343433"
+    />
+    <path
+      d="M5.50615 0.924521C5.63416 0.574639 6.12911 0.574639 6.25712 0.924521L6.63954 1.96883C6.93944 2.78808 7.4144 3.53208 8.03129 4.14897C8.64818 4.76587 9.39218 5.24082 10.2114 5.54073L11.2557 5.92314C11.6062 6.05115 11.6062 6.54611 11.2557 6.67411L10.2114 7.05653C9.39218 7.35644 8.64818 7.83139 8.03129 8.44828C7.4144 9.06518 6.93944 9.80917 6.63954 10.6284L6.25712 11.6727C6.12911 12.0232 5.63416 12.0232 5.50615 11.6727L5.12374 10.6284C4.82383 9.80917 4.34888 9.06518 3.73198 8.44828C3.11509 7.83139 2.37109 7.35644 1.55184 7.05653L0.507529 6.67411C0.157647 6.54611 0.157647 6.05115 0.507529 5.92314L1.55184 5.54073C2.37109 5.24082 3.11509 4.76587 3.73198 4.14897C4.34888 3.53208 4.82383 2.78808 5.12374 1.96883L5.50615 0.924521Z"
+      fill="#343433"
+    />
+  </svg>
+);
diff --git a/blocks/hero205.tsx b/blocks/hero205.tsx
new file mode 100644
index 0000000..3926578
--- /dev/null
+++ b/blocks/hero205.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ChevronRightIcon } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Hero205Props {
+  className?: string;
+}
+
+const Hero205 = ({ className }: Hero205Props) => {
+  return (
+    <section className={cn("bg-background", className)}>
+      <div className="container py-32">
+        <div>
+          {/* Header  */}
+          <h1 className="text-2xll leading-tight tracking-tighter md:text-2xll">
+            <span className="font-semibold">معماری </span>
+            <span className="font-playfair italic">
+              اپلیکیشن‌های <br />
+            </span>
+            <span className="font-semibold">کاربرپسند (حرفه‌ای) </span>
+          </h1>
+
+          {/* Professional info */}
+          <div className="mt-8 flex flex-wrap items-center gap-3 tracking-tight md:text-xl">
+            <span>توسعه‌دهنده فرانت‌اند</span>
+            <div className="flex size-8 rotate-14 items-center justify-center rounded-lg bg-foreground shadow-xl">
+              <Flash />
+            </div>
+            <span>ری یو آی</span>
+            <div className="size-2 rounded-full bg-foreground" />
+            <span className="text-muted-foreground">
+              تجربه در طراحی محصول و توسعه رابط کاربری
+                                      </span>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="mt-10 flex flex-col items-start gap-3 md:flex-row">
+            <Button className="flex h-auto gap-3 rounded-full font-medium md:py-3 md:text-lg">
+              <span className="ps-2">تماس بگیرید</span>
+              <ChevronRightIcon className="h-3 w-3 rtl:rotate-180" />
+            </Button>
+            <div className="flex gap-4">
+              <Button
+                variant="outline"
+                className="h-auto rounded-full font-medium md:px-5 md:py-3 md:text-lg"
+              >
+                مشاهده همه کامپوننت‌ها
+                                            </Button>
+              <Line />
+              <p className="-ms-3 tracking-tight">استفاده رایگان</p>
+            </div>
+          </div>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 200 }}
+          animate={{ opacity: 100, y: 0 }}
+          transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
+        >
+          <Card className="group mx-auto mt-24 h-100 w-full rounded-4xl border border-border bg-muted/30 p-2 shadow-none md:h-190 md:p-3">
+            <CardContent className="size-full rounded-3xl border-2 border-background bg-muted">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                className="size-full"
+                alt="تصویر نمونه"
+              />
+            </CardContent>
+          </Card>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero205 };
+
+const Flash = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    width="13"
+    height="15"
+    viewBox="0 0 13 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.55191 6.02443L11.7837 7.65512C12.3525 7.87431 12.4411 8.64213 11.9371 8.98504L4.63357 13.9543C3.81688 14.51 2.7714 13.6807 3.12658 12.759L4.73014 8.59757L0.498337 6.96688C-0.0704765 6.74769 -0.159028 5.97986 0.34496 5.63695L7.64848 0.667678C8.46517 0.112006 9.51065 0.941277 9.15547 1.86301L7.55191 6.02443Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const Line = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    width="83"
+    height="36"
+    viewBox="0 0 83 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M40.54 19.8917L41.3058 20.5348L40.54 19.8917ZM1.63581 24.9844C1.0855 25.0311 0.677219 25.515 0.723883 26.0653L1.48433 35.0331C1.53099 35.5834 2.01493 35.9917 2.56524 35.9451C3.11555 35.8984 3.52384 35.4144 3.47717 34.8641L2.80123 26.8927L10.7726 26.2168C11.3229 26.1701 11.7312 25.6862 11.6845 25.1359C11.6379 24.5856 11.1539 24.1773 10.6036 24.2239L1.63581 24.9844ZM82.2736 5.64287C76.5724 3.44962 72.1116 1.90993 68.3792 1.17068C64.6243 0.426972 61.5404 0.479043 58.619 1.52454C55.7174 2.56298 53.0827 4.54437 50.1573 7.45564C47.236 10.3628 43.9495 14.2763 39.7742 19.2487L41.3058 20.5348C45.5032 15.5361 48.7246 11.703 51.5681 8.87328C54.4074 6.04765 56.7943 4.30177 59.2929 3.40759C61.7717 2.52047 64.4665 2.43457 67.9906 3.13257C71.5372 3.83502 75.8555 5.3167 81.5555 7.50951L82.2736 5.64287ZM39.7742 19.2487C31.6752 28.8938 24.4557 32.0798 18.3123 32.0962C12.1277 32.1127 6.75778 28.9224 2.36514 25.2165L1.07548 26.7451C5.60504 30.5666 11.4303 34.1146 18.3177 34.0962C25.2462 34.0777 32.9755 30.4554 41.3058 20.5348L39.7742 19.2487Z"
+      fill="black"
+    />
+  </svg>
+);
diff --git a/blocks/hero206.tsx b/blocks/hero206.tsx
new file mode 100644
index 0000000..e215af2
--- /dev/null
+++ b/blocks/hero206.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  Plus,
+  RotateCw,
+  Share,
+} from "lucide-react";
+import React from "react";
+
+import { AvatarGroup } from "@/components/shadcnblocks/avatar-group";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { useGoogleFont } from "@/hooks/use-google-font";
+import { cn } from "@/lib/utils";
+
+interface Hero206Props {
+  className?: string;
+}
+
+const Hero206 = ({ className }: Hero206Props) => {
+  useGoogleFont("Antonio");
+  return (
+    <section
+      className={cn("bg-background", className)}
+      style={{ "--font-antonio": "Antonio, sans-serif" } as React.CSSProperties}
+    >
+      <div className="relative container py-32">
+        <header className="mx-auto max-w-3xl text-center">
+          <h1 className="font-antonio text-2xll font-semibold text-foreground uppercase md:text-2xll">
+            کتابخانه کامپوننت <br /> آماده استفاده در پروژه
+                                </h1>
+          <p className="my-7 max-w-3xl font-sans tracking-tight text-muted-foreground md:text-xl">
+            کامپوننت‌های استاندارد را تنها با چند دستور به پروژه خود اضافه کنید و بدون وابستگی اضافی توسعه را آغاز کنید.
+                                </p>
+        </header>
+
+        <Badge
+          variant="outline"
+          className="mx-auto mt-10 flex h-auto cursor-pointer gap-3 p-1.5 pe-4 text-base font-normal transition-all ease-in-out hover:gap-4"
+        >
+          <AvatarGroup spacing="tight" className="h-auto">
+            <Avatar className="size-8 border-2 border-background md:size-10">
+              <AvatarImage
+                src="/block-media/shadcnblocks/block/avatar-2.webp"
+                alt="آواتار"
+              />
+              <AvatarFallback>AB</AvatarFallback>
+            </Avatar>
+            <Avatar className="size-8 border-2 border-background md:size-10">
+              <AvatarImage
+                src="/block-media/shadcnblocks/block/avatar-5.webp"
+                alt="آواتار"
+              />
+              <AvatarFallback>AB</AvatarFallback>
+            </Avatar>
+            <Avatar className="size-8 border-2 border-background md:size-10">
+              <AvatarImage
+                src="/block-media/shadcnblocks/block/avatar-6.webp"
+                alt="آواتار"
+              />
+              <AvatarFallback>AB</AvatarFallback>
+            </Avatar>
+          </AvatarGroup>
+          <p className="tracking-tight capitalize md:text-lg">
+            مورد اعتماد بیش از{" "}
+            <span className="font-bold text-foreground">۱۰٬۰۰۰</span> کاربر.
+          </p>
+        </Badge>
+
+        <div className="relative mt-12 flex h-full w-full flex-col items-center justify-center">
+          <BrowserMockup
+            className="w-full"
+            url="https://ShadcnBlocks/block/hero206"
+            DahboardUrlDesktop="/block-media/shadcnblocks/block/dashboard/dashboard-1.png"
+            DahboardUrlMobile="/block-media/shadcnblocks/block/dashboard/dashboard-mobile-1.png"
+          />
+          <div className="absolute bottom-0 h-2/3 w-full bg-linear-to-t from-white to-transparent" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero206 };
+
+const BrowserMockup = ({
+  className = "",
+  url = "https://ShadcnBlocks/block/hero206",
+  DahboardUrlDesktop = "/block-media/shadcnblocks/block/dashboard/dashboard-1.png",
+  DahboardUrlMobile = "/block-media/shadcnblocks/block/dashboard/dashboard-mobile-1.png",
+}) => (
+  <div
+    className={cn(
+      "relative w-full overflow-hidden rounded-4xl border",
+      className,
+    )}
+  >
+    <div className="flex items-center justify-between gap-10 bg-muted px-8 py-4 lg:gap-25">
+      <div className="flex items-center gap-2">
+        <div className="size-3 rounded-full bg-red-500" />
+        <div className="size-3 rounded-full bg-yellow-500" />
+        <div className="size-3 rounded-full bg-green-500" />
+        <div className="ms-6 hidden items-center gap-2 opacity-40 lg:flex">
+          <ChevronLeft className="size-5 rtl:rotate-180" />
+          <ChevronRight className="size-5 rtl:rotate-180" />
+        </div>
+      </div>
+      <div className="flex w-full items-center justify-center">
+        <p className="relative hidden w-full rounded-full bg-background px-4 py-1 text-center text-sm tracking-tight md:block">
+          {url}
+          <RotateCw className="absolute top-2 right-3 size-3.5" />
+        </p>
+      </div>
+
+      <div className="flex items-center gap-4 opacity-40">
+        <Share className="size-4" />
+        <Plus className="size-4" />
+        <Copy className="size-4" />
+      </div>
+    </div>
+
+    <div className="relative w-full">
+      <img
+        src={DahboardUrlDesktop}
+        alt="تصویر نمونه"
+        className="object-cove hidden aspect-video h-full w-full object-top md:block"
+      />
+      <img
+        src={DahboardUrlMobile}
+        alt="تصویر نمونه"
+        className="block h-full w-full object-cover md:hidden"
+      />
+    </div>
+    <div className="absolute bottom-0 z-10 flex w-full items-center justify-center bg-muted py-3 md:hidden">
+      <p className="relative flex items-center gap-2 rounded-full px-8 py-1 text-center text-sm tracking-tight">
+        {url}
+      </p>
+    </div>
+  </div>
+);
diff --git a/blocks/hero21.tsx b/blocks/hero21.tsx
new file mode 100644
index 0000000..38d17f5
--- /dev/null
+++ b/blocks/hero21.tsx
@@ -0,0 +1,64 @@
+import { ChevronRight, Play } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero21Props {
+  className?: string;
+}
+
+const Hero21 = ({ className }: Hero21Props) => {
+  return (
+    <section className={cn("mb-32 border-b pt-32", className)}>
+      <div className="container">
+        <div className="relative pb-16">
+          <div className="absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center opacity-100" />
+          <a
+            href="#"
+            className="mx-auto flex w-fit items-center gap-2 rounded-lg bg-muted p-3 sm:rounded-full sm:py-1 sm:pr-3 sm:pl-1"
+          >
+            <Badge className="hidden sm:block">نسخه جدید</Badge>
+            <p className="flex items-center gap-1 text-sm">
+              نسخه جدید با امکانات بیشتر منتشر شده است.
+                                        <ChevronRight className="mt-0.5 size-4 shrink-0" />
+            </p>
+          </a>
+          <h1 className="mx-auto my-5 max-w-5xl text-center text-3xl text-balance md:text-2xll">
+            مدیریت هوشمند خانه، ساده و امن
+                                </h1>
+          <p className="mx-auto max-w-3xl text-center text-sm text-muted-foreground md:text-base">
+            روشنایی، امنیت، تجهیزات و سناریوهای هوشمند را از هر مکان و تنها با یک داشبورد مدیریت کنید.
+                                </p>
+          <div className="mt-8 flex items-center justify-center gap-3">
+            <Button>
+              شروع رایگان <ChevronRight className="ms-2 size-4 rtl:rotate-180" />
+            </Button>
+            <Button variant="outline">
+              <Play className="me-2 size-4" />
+              مشاهده دمو
+                                      </Button>
+          </div>
+          <div className="mt-5 flex justify-center">
+            <a
+              href="#"
+              className="flex items-center gap-1 border-b border-dashed text-sm hover:border-solid hover:border-primary"
+            >
+              رزرو جلسه مشاوره
+                                        <ChevronRight className="size-3.5 rtl:rotate-180" />
+            </a>
+          </div>
+        </div>
+        <div className="rounded-t-lg border-x border-t px-1 pt-1">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="max-h-80 w-full rounded-t-lg object-cover md:max-h-[430px]"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero21 };
diff --git a/blocks/hero210.tsx b/blocks/hero210.tsx
new file mode 100644
index 0000000..7435fd8
--- /dev/null
+++ b/blocks/hero210.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "swiper/css";
+import "swiper/css/effect-cards";
+
+import { motion } from "framer-motion";
+import { Autoplay, EffectCoverflow } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero210Props {
+  className?: string;
+}
+
+const Hero210 = ({ className }: Hero210Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+  ];
+
+  const css = `
+  .mySwiperHero210 {
+    width: 100%;
+    height: 420px;
+    padding-bottom: 50px;
+  }
+  
+  .mySwiperHero210 .swiper-slide {
+    background-position: center;
+    background-size: cover;
+    width: 300px;
+  }
+  
+  .mySwiperHero210 .swiper-slide img {
+    display: block;
+    width: 100%;
+  }
+  
+  .swiper-3d .swiper-slide-shadow-left {
+    background-image: none;
+  }
+    
+  .swiper-3d .swiper-slide-shadow-right{
+    background: none;
+  }
+  `;
+  return (
+    <section className={cn("py-32", className)}>
+      <style>{css}</style>
+      <div className="container px-0 sm:px-8">
+        <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-4 px-8 sm:px-0">
+          <h1 className="font-calSans text-center text-2xll lg:text-2xll">
+            تمام عکس‌های شما در یک مکان
+                                </h1>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            عکس‌ها و ویدیوهای خود را به‌صورت امن ذخیره، دسته‌بندی و در هر زمان به آن‌ها دسترسی داشته باشید.
+                                </p>
+        </div>
+
+        <div className="relative mt-12 h-[420px] w-full lg:px-20">
+          <div className="absolute left-0 z-10 h-full w-12 bg-gradient-to-r from-background to-transparent sm:via-background md:w-58 lg:left-16" />
+          <div className="absolute right-0 z-10 h-full w-12 bg-gradient-to-l from-background to-transparent sm:via-background md:w-58 lg:right-16" />
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+            className="w-full"
+          >
+            <Swiper
+              autoplay={{
+                delay: 1500,
+                disableOnInteraction: false,
+              }}
+              effect="coverflow"
+              grabCursor={true}
+              slidesPerView="auto"
+              centeredSlides={true}
+              loop={true}
+              coverflowEffect={{
+                rotate: 50,
+                stretch: 0,
+                depth: 100,
+                modifier: 1,
+                slideShadows: true,
+              }}
+              className="mySwiperHero210"
+              modules={[EffectCoverflow, Autoplay]}
+            >
+              {images.map((image, index) => (
+                <SwiperSlide key={index}>
+                  <img
+                    className="h-full w-full overflow-hidden rounded-3xl object-cover shadow-lg"
+                    src={image.src}
+                    alt={image.alt}
+                  />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </motion.div>
+        </div>
+
+        <div className="relative mx-auto mt-4 flex w-fit justify-center">
+          <Button className="rounded-full px-4 py-2 active:scale-105">
+            شروع رایگان
+                                </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero210 };
diff --git a/blocks/hero211.tsx b/blocks/hero211.tsx
new file mode 100644
index 0000000..07b35f2
--- /dev/null
+++ b/blocks/hero211.tsx
@@ -0,0 +1,292 @@
+"use client";
+
+import "swiper/css";
+import "swiper/css/effect-creative";
+import "swiper/css/pagination";
+import "swiper/css/autoplay";
+
+import { motion, useAnimation, useInView } from "framer-motion";
+import { useEffect, useId, useRef } from "react";
+import React from "react";
+import { Autoplay, EffectCreative, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero211Props {
+  className?: string;
+}
+
+const Hero211 = ({ className }: Hero211Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/person1.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/person2.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/person3.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/person4.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+  ];
+
+  const css = `
+  .swiper {
+  width: 300px;
+  height: 330px;
+  border-radius: 30px;
+}
+
+.swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+  border-radius: 25px;
+  background-color: #000;
+}
+
+.swiper-pagination-bullet {
+  background-color: #fff;
+  opacity: 0.5;
+}
+
+.swiper-pagination-bullet-active {
+  opacity: 1;
+}
+`;
+
+  return (
+    <section className={cn("py-32", className)}>
+      <style>{css}</style>
+      <div className="container">
+        <div className="relative z-10 mx-auto flex max-w-2xl flex-col items-center justify-center gap-4">
+          <h1 className="font-calSans text-center text-2xll lg:text-2xll">
+            کمتر زمان صرف کنید، بیشتر بسازید
+                                </h1>
+          <p className="px-10 text-center text-muted-foreground lg:text-lg">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+        </div>
+
+        <div className="relative mt-16 flex h-full items-center justify-center">
+          <Swiper
+            loop={true}
+            grabCursor={true}
+            className="border bg-muted"
+            autoplay={{
+              delay: 1500,
+              disableOnInteraction: true,
+            }}
+            effect="creative"
+            pagination={{
+              clickable: true,
+            }}
+            creativeEffect={{
+              prev: {
+                shadow: true,
+                origin: "left center",
+                translate: ["-5%", 0, -200],
+                rotate: [0, 100, 0],
+              },
+              next: {
+                origin: "right center",
+                translate: ["5%", 0, -200],
+                rotate: [0, -100, 0],
+              },
+            }}
+            modules={[EffectCreative, Pagination, Autoplay]}
+          >
+            {images.map((image, idx) => (
+              <SwiperSlide key={idx}>
+                <img
+                  className="h-full w-full object-cover"
+                  src={image.src}
+                  alt={image.alt}
+                />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+        <div className="relative z-10 mx-auto mt-10 flex w-fit justify-center">
+          <Button className="rounded-full px-4 py-2 active:scale-105">
+            شروع رایگان
+                                </Button>
+          <motion.div
+            initial={{ opacity: 0, translateY: 20 }}
+            animate={{ opacity: 1, translateY: 0 }}
+            transition={{ duration: 0.3, delay: 1 }}
+            className="absolute top-3 -right-30 h-1"
+          >
+            <p className="font-handwriting text-xl tracking-tight">
+              همین امروز نسخه رایگان را امتحان کنید
+                                      </p>
+            <svg
+              width="82"
+              className="-translate-x-1/2 pe-4"
+              height="45"
+              viewBox="0 0 82 45"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <motion.path
+                initial={{ pathLength: 0 }}
+                animate={{ pathLength: 1 }}
+                transition={{ duration: 1, delay: 1.2 }}
+                d="M80.2759 1.95576C67.8687 20.6075 49.1102 55.0246 21.9767 39.1283C15.3299 35.2342 12.7124 29.0489 9.38472 22.4634C9.24096 22.1789 6.96955 15.0574 7.91833 15.4904C10.4589 16.65 25.535 23.253 15.8013 18.8782C14.7716 18.4154 8.31018 14.0924 7.25323 14.6265C4.37354 16.0816 2.6512 30.2469 1.58546 33.4898"
+                stroke="#1C1C1C"
+                strokeWidth="2.40332"
+                strokeLinecap="round"
+              />
+            </svg>
+          </motion.div>
+        </div>
+        <div className="absolute right-0 bottom-0 left-0">
+          <SkiperUiMarquee />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero211 };
+
+interface MarqueeProps {
+  className?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  children?: React.ReactNode;
+  vertical?: boolean;
+  repeat?: number;
+  [key: string]: unknown;
+}
+
+function Marquee({
+  className,
+  reverse,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
+}: MarqueeProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "group flex [gap:var(--gap)] overflow-hidden p-2 [--gap:1rem]",
+        {
+          "flex-row": !vertical,
+          "flex-col": vertical,
+        },
+        className,
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+              "animate-marquee flex-row ![animation-duration:10s]": !vertical,
+              "animate-marquee-vertical flex-col": vertical,
+              "group-hover:[animation-play-state:paused]": pauseOnHover,
+              "[animation-direction:reverse]": reverse,
+            })}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  );
+}
+
+function Card() {
+  const id = useId();
+  const controls = useAnimation();
+  const ref = useRef(null);
+  const inView = useInView(ref, { once: true });
+
+  useEffect(() => {
+    if (inView) {
+      controls.start({
+        opacity: 1,
+        transition: { delay: Math.random() * 2, ease: "easeOut", duration: 1 },
+      });
+    }
+  }, [controls, inView]);
+
+  return (
+    <motion.div
+      key={id}
+      ref={ref}
+      initial={{ opacity: 0 }}
+      animate={controls}
+      className={cn(
+        "relative size-17 cursor-pointer overflow-hidden rounded-2xl border border-muted p-4",
+        "bg-gradient-to-b from-muted/50 to-background",
+        "dark:bg-transparent dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      )}
+    ></motion.div>
+  );
+}
+
+export function SkiperUiMarquee() {
+  return (
+    <div className="mx-auto px-4 py-12 md:px-8">
+      <div className="flex w-full flex-col items-center justify-center">
+        <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+          {Array.from({ length: 6 }).map((_, idx) => (
+            <div
+              key={idx}
+              className="flex w-full flex-col items-center justify-center"
+            >
+              <Marquee reverse repeat={5}>
+                {Array.from({ length: 5 }).map((_, idx) => (
+                  <Card key={idx} />
+                ))}
+              </Marquee>
+            </div>
+          ))}
+          <div className="absolute right-0 h-full w-24 bg-gradient-to-r from-transparent to-background to-70% dark:to-background" />
+          <div className="absolute left-0 h-full w-24 bg-gradient-to-l from-transparent to-background to-70% dark:to-background" />
+          <div className="absolute bottom-0 h-36 w-full bg-gradient-to-b from-transparent to-background to-70% dark:to-background" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/blocks/hero212.tsx b/blocks/hero212.tsx
new file mode 100644
index 0000000..f5313b4
--- /dev/null
+++ b/blocks/hero212.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import "swiper/css";
+import "swiper/css/effect-creative";
+import "swiper/css/pagination";
+import "swiper/css/autoplay";
+
+import {
+  AnimatePresence,
+  motion,
+  useAnimation,
+  useInView,
+} from "framer-motion";
+import { useEffect, useId, useRef, useState } from "react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero212Props {
+  className?: string;
+}
+
+const Hero212 = ({ className }: Hero212Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+  ];
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, [currentIndex, images.length]);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container overflow-hidden">
+        <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-4">
+          <p className="z-10 px-10 text-center tracking-tight text-muted-foreground/40 lg:text-lg">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی
+                                </p>
+          <h1 className="font-playfair text-center text-2xll tracking-tighter italic lg:text-2xll">
+            تجربه‌ای متفاوت خلق کنید
+                                </h1>
+        </div>
+
+        <div className="relative mt-16 flex h-full flex-col items-center justify-center">
+          <div className="pointer-events-none relative z-20 mx-auto flex h-112 w-80 justify-center overflow-hidden rounded-3xl">
+            <AnimatePresence mode="popLayout">
+              <motion.img
+                key={currentIndex}
+                className="h-full w-full object-cover"
+                src={images[currentIndex].src}
+                alt={images[currentIndex].alt}
+                initial={{ opacity: 0, scale: 1, filter: "blur(4px)" }}
+                animate={{ opacity: 1, scale: 1.1, filter: "blur(0px)" }}
+                exit={{ opacity: 0, scale: 1.2, filter: "blur(4px)" }}
+                transition={{ duration: 1.5 }}
+              />
+            </AnimatePresence>
+          </div>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.5 }}
+            transition={{ duration: 1, delay: 3 }}
+            className="absolute z-10 h-192 w-52 rotate-65 rounded-[100%] bg-yellow-500 blur-2xl"
+          />
+          <div className="relative z-10 mx-auto mt-10 mb-12 flex w-fit justify-center">
+            <Button className="rounded-full px-4 py-2 active:scale-105">
+              شروع رایگان
+                                      </Button>
+            <motion.div
+              initial={{ opacity: 0, translateY: 20 }}
+              animate={{ opacity: 1, translateY: 0 }}
+              transition={{ duration: 0.3, delay: 1 }}
+              className="absolute top-3 -right-30 h-1"
+            >
+              <p className="font-handwriting text-xl tracking-tight">
+                همین امروز نسخه رایگان را امتحان کنید
+                                            </p>
+              <svg
+                width="82"
+                className="-translate-x-1/2 pe-4"
+                height="45"
+                viewBox="0 0 82 45"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <motion.path
+                  initial={{ pathLength: 0 }}
+                  animate={{ pathLength: 1 }}
+                  transition={{ duration: 1, delay: 1.2 }}
+                  d="M80.2759 1.95576C67.8687 20.6075 49.1102 55.0246 21.9767 39.1283C15.3299 35.2342 12.7124 29.0489 9.38472 22.4634C9.24096 22.1789 6.96955 15.0574 7.91833 15.4904C10.4589 16.65 25.535 23.253 15.8013 18.8782C14.7716 18.4154 8.31018 14.0924 7.25323 14.6265C4.37354 16.0816 2.6512 30.2469 1.58546 33.4898"
+                  stroke="#1C1C1C"
+                  strokeWidth="2.40332"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </motion.div>
+          </div>
+          <div
+            className="absolute right-0 bottom-0 left-0 h-125"
+            style={{ clipPath: "inset(0 0 -100% 0)" }}
+          >
+            <div className="absolute top-0 z-2 h-36 w-full bg-gradient-to-t from-transparent to-background to-70% dark:to-background" />
+            <SkiperUiMarquee />
+            <div className="absolute bottom-0 z-2 h-36 w-full bg-gradient-to-b from-transparent to-background to-70% dark:to-background" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero212 };
+
+interface MarqueeProps {
+  className?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  children?: React.ReactNode;
+  vertical?: boolean;
+  repeat?: number;
+  [key: string]: unknown;
+}
+
+function Marquee({
+  className,
+  reverse,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
+}: MarqueeProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "group flex [gap:var(--gap)] overflow-hidden p-2 [--gap:1rem]",
+        {
+          "flex-row": !vertical,
+          "flex-col": vertical,
+        },
+        className,
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+              "animate-marquee flex-row ![animation-duration:10s]": !vertical,
+              "animate-marquee-vertical flex-col": vertical,
+              "group-hover:[animation-play-state:paused]": pauseOnHover,
+              "[animation-direction:reverse]": reverse,
+            })}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  );
+}
+
+function Card() {
+  const id = useId();
+  const controls = useAnimation();
+  const ref = useRef(null);
+  const inView = useInView(ref, { once: true });
+
+  useEffect(() => {
+    if (inView) {
+      controls.start({
+        opacity: 1,
+        transition: { delay: Math.random() * 2, ease: "easeOut", duration: 1 },
+      });
+    }
+  }, [controls, inView]);
+
+  return (
+    <motion.div
+      key={id}
+      ref={ref}
+      initial={{ opacity: 0 }}
+      animate={controls}
+      className={cn(
+        "relative size-17 overflow-hidden rounded-3xl border border-muted p-4",
+        "bg-gradient-to-b from-muted/50 to-background",
+        "dark:bg-transparent dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      )}
+    ></motion.div>
+  );
+}
+
+export function SkiperUiMarquee() {
+  return (
+    <div className="mx-auto rotate-90 px-4 py-12 md:px-8">
+      <div className="flex w-full flex-col items-center justify-center">
+        <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+          {Array.from({ length: 10 }).map((_, idx) => (
+            <div
+              key={idx}
+              className="flex w-full flex-col items-center justify-center"
+            >
+              <Marquee reverse pauseOnHover repeat={4}>
+                {Array.from({ length: 5 }).map((_, idx) => (
+                  <Card key={idx} />
+                ))}
+              </Marquee>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/blocks/hero213.tsx b/blocks/hero213.tsx
new file mode 100644
index 0000000..09c220a
--- /dev/null
+++ b/blocks/hero213.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Figma, GalleryVerticalEnd, Signature } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+type MaskType = "type-1" | "type-2" | "type-3" | "type-4";
+
+interface Hero213Props {
+  className?: string;
+}
+
+const Hero213 = ({ className }: Hero213Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw13.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+  ];
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, [currentIndex, images.length]);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-4">
+          <h1 className="font-calSans text-center text-2xll lg:text-2xll">
+            مجموعه بلاک‌های آماده <br />
+            برای رابط کاربری و استایل‌دهی مدرن
+                                </h1>
+          <p className="px-10 text-center text-muted-foreground lg:text-lg">
+            صدها کامپوننت استاندارد و قابل سفارشی‌سازی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+        </div>
+        <div className="relative mt-4">
+          <div className="relative z-10 mx-auto my-7 flex w-fit cursor-pointer items-center justify-center gap-8 rounded-full bg-muted px-4 py-2 md:my-0 lg:translate-y-12 lg:py-3 xl:px-8 xl:py-4">
+            <GalleryVerticalEnd className="size-4 opacity-40 hover:opacity-100 lg:size-6" />
+            <Signature className="size-4 opacity-40 hover:opacity-100 lg:size-6" />
+            <Figma className="size-4 opacity-40 hover:opacity-100 lg:size-6" />
+          </div>
+          <MaskedDiv maskType="type-3">
+            <AnimatePresence mode="popLayout">
+              <motion.img
+                key={currentIndex}
+                className="h-full w-full object-cover"
+                src={images[currentIndex].src}
+                alt={images[currentIndex].alt}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 1.5 }}
+              />
+            </AnimatePresence>
+          </MaskedDiv>
+
+          <div className="absolute bottom-22 -left-8 hidden h-36 w-32 items-center justify-center overflow-hidden rounded-4xl border lg:flex xl:bottom-28 xl:h-42 2xl:-left-28 2xl:h-52 2xl:w-62 2xl:rounded-[4rem]">
+            <AnimatePresence mode="popLayout">
+              <motion.img
+                key={currentIndex}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 1.5 }}
+                src={images[currentIndex + 1]?.src || images[currentIndex].src}
+                alt={images[currentIndex + 1]?.alt || images[currentIndex].alt}
+                className="h-full w-full object-cover"
+              />
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero213 };
+
+interface SvgPath {
+  path: string;
+  height: number;
+  width: number;
+}
+
+interface MaskedDivProps {
+  children: React.ReactElement<HTMLImageElement | HTMLVideoElement>;
+  maskType?: MaskType;
+  className?: string;
+  backgroundColor?: string;
+  size?: number;
+}
+
+const svgPaths: Record<MaskType, SvgPath> = {
+  "type-1": {
+    path: "M0.928955 40.9769C0.928955 18.9149 18.7917 1.01844 40.8536 0.976903L289.97 0.507853C308.413 0.473128 323.521 15.1483 324.022 33.5845L324.886 65.4007C325.955 104.745 358.022 136.159 397.38 136.417L432.98 136.65C447.818 136.748 459.797 148.799 459.803 163.637L459.982 550.982C459.992 573.08 442.08 591 419.982 591H40.9289C18.8376 591 0.928955 573.091 0.928955 551V40.9769Z",
+    height: 591,
+    width: 460,
+  },
+  "type-2": {
+    path: "M0.811768 77.2118C0.811768 60.4225 14.4222 46.8121 31.2115 46.8121H180.95C192.496 46.8121 201.855 37.4527 201.855 25.9073V25.9073C201.855 11.9565 213.164 0.647217 227.115 0.647217H529.273C548.014 0.647217 563.206 15.8395 563.206 34.5802V34.5802C563.206 50.0897 575.779 62.6626 591.289 62.6626H820.388C837.177 62.6626 850.787 76.273 850.787 93.0623V350.953C850.787 367.742 837.177 381.353 820.388 381.353H366.165C349.852 381.353 336.627 368.128 336.627 351.814V351.814C336.627 335.501 323.402 322.276 307.089 322.276H31.2114C14.4222 322.276 0.811768 308.666 0.811768 291.876V77.2118Z",
+    height: 381,
+    width: 850,
+  },
+  "type-3": {
+    path: "M0.680664 112.659C0.680664 50.805 50.823 0.662672 112.677 0.662672H413.07C456.315 0.662672 497.495 19.1588 526.221 51.4846V51.4846C554.948 83.8104 596.128 102.307 639.373 102.307H711.793C752.427 102.307 790.787 83.5522 815.744 51.4846V51.4846C840.7 19.417 879.06 0.662644 919.695 0.662597L1225.01 0.66224C1286.86 0.662168 1337.01 50.8046 1337.01 112.658V652.815C1337.01 714.668 1286.86 764.811 1225.01 764.811L670 764.811H335.34H278.376C217.423 764.811 168.01 715.399 168.01 654.446V626.747C168.01 580.208 130.283 542.48 83.7437 542.48V542.48C37.8692 542.48 0.680664 505.292 0.680664 459.417V382.737V112.659Z",
+    height: 889,
+    width: 1340,
+  },
+  "type-4": {
+    path: "M0.811768 34.5451C0.811768 15.7441 16.053 0.502808 34.8541 0.502808H816.745C835.546 0.502808 850.787 15.7441 850.787 34.5452V242.977C850.787 261.778 835.546 277.019 816.745 277.019H638.293H550.537C527.035 277.019 504.789 266.407 490.001 248.141L486.211 243.46C453.263 202.765 390.688 204.378 359.881 246.717V246.717C346.027 265.756 323.901 277.019 300.355 277.019H213.306H34.8541C16.0531 277.019 0.811768 261.778 0.811768 242.977V34.5451Z",
+    height: 278,
+    width: 851,
+  },
+};
+
+const MaskedDiv: React.FC<MaskedDivProps> = ({
+  children,
+  maskType = "type-1",
+  className = "",
+  backgroundColor = "transparent",
+  size = 1,
+}) => {
+  const selectedMask = svgPaths[maskType];
+
+  const svgString = `${selectedMask.width}${selectedMask.height}${selectedMask.width} ${selectedMask.height}${selectedMask.path}`;
+
+  const containerStyle: React.CSSProperties = {
+    aspectRatio: `${selectedMask.width}/${selectedMask.height}`,
+    backgroundColor,
+    maskImage: `url("${svgString}")`,
+    WebkitMaskImage: `url("${svgString}")`,
+    maskRepeat: "no-repeat",
+    WebkitMaskRepeat: "no-repeat",
+    maskSize: "contain",
+    WebkitMaskSize: "contain",
+    width: `${size * 100}%`,
+    maxWidth: "100%",
+    margin: "0 auto",
+  };
+
+  return (
+    <section className={`relative ${className}`} style={containerStyle}>
+      {React.cloneElement(children, {
+        className: `w-full h-full object-cover transition-all duration-300 ${
+          children.props.className || ""
+        }`,
+      })}
+    </section>
+  );
+};
diff --git a/blocks/hero214.tsx b/blocks/hero214.tsx
new file mode 100644
index 0000000..b66dffe
--- /dev/null
+++ b/blocks/hero214.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero214Props {
+  className?: string;
+}
+
+const Hero214 = ({ className }: Hero214Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+      alt: "تصویر پرتره",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw13.jpeg",
+      alt: "تصویر پرتره",
+      name: "مریم چناری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
+      alt: "تصویر پرتره",
+      name: "Joanna Doe",
+    },
+  ];
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, [currentIndex, images.length]);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-5 max-w-2xl lg:mb-0">
+          <h1 className="font-playfair text-start text-2xll tracking-tighter lg:text-2xll">
+            خانه ایده‌آل خود را در <br className="hidden md:block" /> شهر خود پیدا کنید
+                                </h1>
+        </div>
+        <div className="relative lg:-translate-y-4">
+          <MaskedDiv maskType="type-5">
+            <AnimatePresence mode="popLayout">
+              <motion.img
+                key={currentIndex}
+                className="h-full w-full object-cover"
+                src={images[currentIndex].src}
+                alt={images[currentIndex].alt}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 1.5 }}
+              />
+            </AnimatePresence>
+          </MaskedDiv>
+
+          <div className="absolute -top-26 right-0 flex gap-6">
+            <motion.div
+              initial={{ opacity: 0, y: 30, scale: 0.9 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 30, scale: 0.9 }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="hidden size-44 -translate-y-4 overflow-hidden rounded-4xl xl:block xl:-translate-0"
+            >
+              <AnimatePresence mode="popLayout">
+                <motion.img
+                  key={currentIndex}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 1.5 }}
+                  src={
+                    images[currentIndex + 1]?.src || images[currentIndex].src
+                  }
+                  alt={
+                    images[currentIndex + 1]?.alt || images[currentIndex].alt
+                  }
+                  className="h-full w-full object-cover"
+                />
+              </AnimatePresence>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, y: -30, scale: 0.9 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 30, scale: 0.9 }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="hidden size-44 -translate-y-4 overflow-hidden rounded-4xl lg:block xl:-translate-0"
+            >
+              <AnimatePresence mode="popLayout">
+                <motion.img
+                  key={currentIndex}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 1.5 }}
+                  src={
+                    images[currentIndex + 2]?.src || images[currentIndex].src
+                  }
+                  alt={
+                    images[currentIndex + 2]?.alt || images[currentIndex].alt
+                  }
+                  className="h-full w-full object-cover"
+                />
+              </AnimatePresence>
+            </motion.div>
+          </div>
+
+          <div className="mt-5 flex w-full gap-6 lg:hidden">
+            <div className="relative h-44 w-full overflow-hidden rounded-4xl">
+              <AnimatePresence mode="popLayout">
+                <motion.img
+                  key={currentIndex}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 1.5 }}
+                  src={
+                    images[currentIndex + 1]?.src || images[currentIndex].src
+                  }
+                  alt={
+                    images[currentIndex + 1]?.alt || images[currentIndex].alt
+                  }
+                  className="h-full w-full object-cover"
+                />
+              </AnimatePresence>
+            </div>{" "}
+            <div className="relative h-44 w-full overflow-hidden rounded-4xl">
+              <AnimatePresence mode="popLayout">
+                <motion.img
+                  key={currentIndex}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 1.5 }}
+                  src={
+                    images[currentIndex + 2]?.src || images[currentIndex].src
+                  }
+                  alt={
+                    images[currentIndex + 2]?.alt || images[currentIndex].alt
+                  }
+                  className="h-full w-full object-cover"
+                />
+              </AnimatePresence>
+            </div>
+          </div>
+
+          <Button
+            variant="secondary"
+            className="group -bottom-5 left-0 mt-3 flex items-center justify-center rounded-full bg-muted px-6 py-2 tracking-tight hover:gap-4 lg:absolute lg:bottom-0 lg:mt-0 xl:bottom-3"
+          >
+            تماس با ما{" "}
+            <ArrowRight className="size-4 -rotate-45 transition-all duration-300 ease-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero214 };
+
+interface SvgPath {
+  path: string;
+  height: number;
+  width: number;
+}
+
+type MaskType = "type-1" | "type-2" | "type-3" | "type-4" | "type-5";
+
+interface MaskedDivProps {
+  children: React.ReactElement<HTMLImageElement | HTMLVideoElement>;
+  maskType?: MaskType;
+  className?: string;
+  backgroundColor?: string;
+  size?: number;
+}
+
+const svgPaths: Record<MaskType, SvgPath> = {
+  "type-1": {
+    path: "M0.928955 40.9769C0.928955 18.9149 18.7917 1.01844 40.8536 0.976903L289.97 0.507853C308.413 0.473128 323.521 15.1483 324.022 33.5845L324.886 65.4007C325.955 104.745 358.022 136.159 397.38 136.417L432.98 136.65C447.818 136.748 459.797 148.799 459.803 163.637L459.982 550.982C459.992 573.08 442.08 591 419.982 591H40.9289C18.8376 591 0.928955 573.091 0.928955 551V40.9769Z",
+    height: 591,
+    width: 460,
+  },
+  "type-2": {
+    path: "M0.811768 77.2118C0.811768 60.4225 14.4222 46.8121 31.2115 46.8121H180.95C192.496 46.8121 201.855 37.4527 201.855 25.9073V25.9073C201.855 11.9565 213.164 0.647217 227.115 0.647217H529.273C548.014 0.647217 563.206 15.8395 563.206 34.5802V34.5802C563.206 50.0897 575.779 62.6626 591.289 62.6626H820.388C837.177 62.6626 850.787 76.273 850.787 93.0623V350.953C850.787 367.742 837.177 381.353 820.388 381.353H366.165C349.852 381.353 336.627 368.128 336.627 351.814V351.814C336.627 335.501 323.402 322.276 307.089 322.276H31.2114C14.4222 322.276 0.811768 308.666 0.811768 291.876V77.2118Z",
+    height: 381,
+    width: 850,
+  },
+  "type-3": {
+    path: "M0.680664 112.659C0.680664 50.805 50.823 0.662672 112.677 0.662672H413.07C456.315 0.662672 497.495 19.1588 526.221 51.4846V51.4846C554.948 83.8104 596.128 102.307 639.373 102.307H711.793C752.427 102.307 790.787 83.5522 815.744 51.4846V51.4846C840.7 19.417 879.06 0.662644 919.695 0.662597L1225.01 0.66224C1286.86 0.662168 1337.01 50.8046 1337.01 112.658V652.815C1337.01 714.668 1286.86 764.811 1225.01 764.811L670 764.811H335.34H278.376C217.423 764.811 168.01 715.399 168.01 654.446V626.747C168.01 580.208 130.283 542.48 83.7437 542.48V542.48C37.8692 542.48 0.680664 505.292 0.680664 459.417V382.737V112.659Z",
+    height: 889,
+    width: 1340,
+  },
+  "type-4": {
+    path: "M0.811768 34.5451C0.811768 15.7441 16.053 0.502808 34.8541 0.502808H816.745C835.546 0.502808 850.787 15.7441 850.787 34.5452V242.977C850.787 261.778 835.546 277.019 816.745 277.019H638.293H550.537C527.035 277.019 504.789 266.407 490.001 248.141L486.211 243.46C453.263 202.765 390.688 204.378 359.881 246.717V246.717C346.027 265.756 323.901 277.019 300.355 277.019H213.306H34.8541C16.0531 277.019 0.811768 261.778 0.811768 242.977V34.5451Z",
+    height: 278,
+    width: 851,
+  },
+  "type-5": {
+    path: "M0.589399 112.279C0.589402 82.1213 25.037 57.6738 55.1946 57.6738H335.688C350.06 57.6738 361.712 46.0226 361.712 31.6502C361.712 14.2835 375.79 0.205078 393.157 0.205078H949.833C983.496 0.205078 1010.78 27.4941 1010.78 61.1568C1010.78 89.0156 1033.37 111.6 1061.23 111.6H1472.74C1502.9 111.6 1527.35 136.047 1527.35 166.205V629.438C1527.35 659.596 1502.9 684.044 1472.74 684.044H639.176C619.635 684.044 603.794 668.203 603.794 648.662C603.794 629.122 587.954 613.281 568.413 613.281H55.1945C25.0369 613.281 0.589358 588.833 0.58936 558.676L0.589399 112.279Z",
+    height: 700,
+    width: 1528,
+  },
+};
+
+const MaskedDiv: React.FC<MaskedDivProps> = ({
+  children,
+  maskType = "type-1",
+  className = "",
+  backgroundColor = "transparent",
+  size = 1,
+}) => {
+  const selectedMask = svgPaths[maskType];
+
+  const svgString = `${selectedMask.width}${selectedMask.height}${selectedMask.width} ${selectedMask.height}${selectedMask.path}`;
+
+  const containerStyle: React.CSSProperties = {
+    aspectRatio: `${selectedMask.width}/${selectedMask.height}`,
+    backgroundColor,
+    maskImage: `url("${svgString}")`,
+    WebkitMaskImage: `url("${svgString}")`,
+    maskRepeat: "no-repeat",
+    WebkitMaskRepeat: "no-repeat",
+    maskSize: "contain",
+    WebkitMaskSize: "contain",
+    width: `${size * 100}%`,
+    maxWidth: "100%",
+    margin: "0 auto",
+  };
+
+  return (
+    <section
+      className={`pointer-events-none relative ${className}`}
+      style={containerStyle}
+    >
+      {React.cloneElement(children, {
+        className: `w-full h-full object-cover  transition-all duration-300 ${children.props.className || ""
+          }`,
+      })}
+    </section>
+  );
+};
diff --git a/blocks/hero215.tsx b/blocks/hero215.tsx
new file mode 100644
index 0000000..cc1fcab
--- /dev/null
+++ b/blocks/hero215.tsx
@@ -0,0 +1,42 @@
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero215Props {
+  className?: string;
+}
+
+const Hero215 = ({ className }: Hero215Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="relative container min-h-[100vh]">
+        <div className="absolute bottom-45 z-10 lg:max-w-xl">
+          <div className="absolute top-0 z-1 size-full bg-background blur-2xl" />
+          <h1 className="font-playfair relative z-20 text-start text-2xll tracking-tighter lg:text-2xll">
+            خانه ایده‌آل خود را در شهرتان پیدا کنید
+          </h1>
+          <p className="relative z-20 mt-8 text-muted-foreground">
+            صدها کامپوننت استاندارد و قابل سفارشی‌سازی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+        </div>
+        <div className="absolute bottom-20 z-10 max-w-xl lg:right-25 lg:bottom-45">
+          <Button className="group mt-10 flex w-fit items-center justify-center gap-2 rounded-full border px-4 py-1 tracking-tight">
+            تماس با ما
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+        </div>
+        <div className="absolute -top-20 right-0 w-[27rem] max-w-xl">
+          <img
+            src="/block-media/shadcnblocks/block/lummi/highRise.jpg"
+            className="animate-fade-in rounded-2xl object-cover"
+            alt="تصویر نمونه"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero215 };
diff --git a/blocks/hero216.tsx b/blocks/hero216.tsx
new file mode 100644
index 0000000..4832001
--- /dev/null
+++ b/blocks/hero216.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { Globe } from "@/components/magicui/globe";
+import { Meteors } from "@/components/magicui/meteors";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero216Props {
+  className?: string;
+}
+
+const Hero216 = ({ className }: Hero216Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center justify-center gap-4 overflow-hidden">
+        <p className="text-muted-foreground">
+          توسعه بهتر، آینده‌ای هوشمندتر
+                          </p>
+        <h1 className="font-calSans max-w-3xl text-center text-2xll md:text-2xll">
+          جامعه‌ای برای توسعه‌دهندگان سراسر جهان
+                          </h1>
+
+        <Meteors number={30} />
+
+        <Button
+          variant="secondary"
+          className="text-md group mt-10 flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+        >
+          شروع رایگان
+                            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+        </Button>
+        <div className="relative h-115 w-full overflow-y-clip">
+          <Globe className="translate-y-40 scale-175" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero216 };
diff --git a/blocks/hero218.tsx b/blocks/hero218.tsx
new file mode 100644
index 0000000..d1a506f
--- /dev/null
+++ b/blocks/hero218.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { Particles } from "@/components/magicui/particles";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero218Props {
+  className?: string;
+}
+
+const Hero218 = ({ className }: Hero218Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center justify-center gap-4 overflow-hidden">
+        <p className="text-muted-foreground">
+          همکاری برای ساخت آینده
+                          </p>
+        <h1 className="realtive z-15 max-w-3xl text-center text-2xll font-medium tracking-tighter md:text-2xll">
+          <span
+            className="overflow-hidden"
+            style={{
+              transformStyle: "preserve-3d",
+              perspective: "600px",
+            }}
+          >
+            {"تنها اپی که برای ماندن بهره‌ور به آن نیاز دارید"
+              .split(" ")
+              .map((word, i) => (
+                <motion.span
+                  className="relative inline-block px-[6px] leading-[none]"
+                  key={i}
+                  initial={{
+                    opacity: 0,
+                    y: "70%",
+                    rotateX: "-28deg",
+                  }}
+                  animate={{
+                    opacity: 1,
+                    y: "0%",
+                    rotateX: "0deg",
+                  }}
+                  transition={{
+                    delay: i * 0.08 + 0.1,
+                    duration: 0.8,
+                    ease: [0.215, 0.61, 0.355, 1],
+                  }}
+                >
+                  {word === "بهره‌ور" ? (
+                    <span className="font-playfair italic">{word}</span>
+                  ) : (
+                    word
+                  )}
+                </motion.span>
+              ))}
+          </span>
+        </h1>
+        <Particles
+          className="absolute inset-0 z-0"
+          quantity={500}
+          ease={80}
+          color="#000000"
+          refresh
+        />
+
+        <div className="relative h-92 w-full -translate-y-15 overflow-hidden">
+          <div className="absolute z-10 h-92 w-full bg-background blur-xl" />
+          <div className="absolute z-13 h-92 w-full -translate-y-62 bg-background blur-2xl" />
+
+          <motion.div
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, ease: "easeOut" }}
+            className="absolute z-12 w-full overflow-hidden"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/lummi/green-shape.svg"
+              className="h-215 w-full -translate-y-90 -rotate-76"
+              alt="تصویر نمونه"
+            />
+          </motion.div>
+        </div>
+        <Button
+          variant="secondary"
+          className="text-md group -mt-15 flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+        >
+          درخواست مشاوره
+                            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export { Hero218 };
diff --git a/blocks/hero219.tsx b/blocks/hero219.tsx
new file mode 100644
index 0000000..69aa979
--- /dev/null
+++ b/blocks/hero219.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { Particles } from "@/components/magicui/particles";
+import { cn } from "@/lib/utils";
+
+const Hero219 = () => {
+  return (
+    <section className="relative py-32">
+      <div className="container flex flex-col items-center justify-center gap-4 overflow-hidden">
+        <p className="text-muted-foreground">
+          همکاری برای ساخت آینده
+                          </p>
+        <h1 className="realtive z-15 max-w-3xl text-center text-2xll font-medium tracking-tighter md:text-2xll">
+          همه ابزارهای موردنیاز شما برای{" "}
+          <span
+            className="overflow-hidden"
+            style={{
+              transformStyle: "preserve-3d",
+              perspective: "600px",
+            }}
+          >
+            {"بهره‌وری ماندگار".split(" ").map((word, i) => (
+              <motion.span
+                className="relative inline-block px-[6px] leading-[none]"
+                key={i}
+                initial={{
+                  opacity: 0,
+                  y: "70%",
+                  rotateX: "-28deg",
+                }}
+                animate={{
+                  opacity: 1,
+                  y: "0%",
+                  rotateX: "0deg",
+                }}
+                transition={{
+                  delay: i * 0.08 + 0.1,
+                  duration: 0.8,
+                  ease: [0.215, 0.61, 0.355, 1],
+                }}
+              >
+                {word === "بهره‌وری" ? (
+                  <span className="font-playfair">{word}</span>
+                ) : (
+                  word
+                )}
+              </motion.span>
+            ))}
+          </span>
+        </h1>
+        <Particles
+          className="absolute inset-0 z-0"
+          quantity={500}
+          ease={80}
+          color="#000000"
+          refresh
+        />
+
+        <motion.div
+          initial={{ opacity: 0, scale: 1.1 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.3, delay: 1 }}
+          className="relative z-20 mt-10 flex items-center justify-center gap-4"
+        >
+          <SkiperUiMarquee
+            showCard={1}
+            className=""
+            reverse={true}
+            src={[
+              "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+              "/block-media/shadcnblocks/block/logos/react-icon.svg",
+              "/block-media/shadcnblocks/block/logos/vue-icon.svg",
+              "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
+            ]}
+          />
+          <SkiperUiMarquee
+            showCard={2}
+            className=""
+            src={[
+              "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+              "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+              "/block-media/shadcnblocks/block/logos/remix-icon.svg",
+              "/block-media/shadcnblocks/block/logos/vite-icon.svg",
+            ]}
+          />
+          <SkiperUiMarquee
+            showCard={3}
+            reverse={true}
+            className=""
+            src={[
+              "/block-media/shadcnblocks/block/logos/github-icon.svg",
+              "/block-media/shadcnblocks/block/logos/laravel-icon.svg",
+              "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+              "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
+            ]}
+          />
+          <SkiperUiMarquee
+            showCard={2}
+            className=""
+            src={[
+              "/block-media/shadcnblocks/block/logos/vite-icon.svg",
+              "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+              "/block-media/shadcnblocks/block/logos/brave-icon.svg",
+              "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+            ]}
+          />
+          <SkiperUiMarquee
+            showCard={3}
+            reverse={true}
+            className=""
+            src={[
+              "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+              "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
+              "/block-media/shadcnblocks/block/logos/nike-icon.svg",
+              "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+            ]}
+          />
+          <SkiperUiMarquee
+            showCard={2}
+            className=""
+            src={[
+              "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+              "/block-media/shadcnblocks/block/logos/linkedin-icon.svg",
+              "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+              "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+            ]}
+          />
+          <SkiperUiMarquee
+            reverse={true}
+            showCard={1}
+            className=""
+            src={[
+              "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+              "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
+              "/block-media/shadcnblocks/block/logos/google-icon.svg",
+              "/block-media/shadcnblocks/block/logos/google-play-icon.svg",
+            ]}
+          />
+        </motion.div>
+
+        <div className="absolute right-0 bottom-20 left-0 h-92 w-full bg-background blur-xl" />
+      </div>
+    </section>
+  );
+};
+
+export { Hero219 };
+
+function Marquee({
+  className,
+  reverse,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
+}: any) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "group flex [gap:var(--gap)] overflow-hidden p-2 [--gap:1rem]",
+        {
+          "flex-row": !vertical,
+          "flex-col": vertical,
+        },
+        className,
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={cn(
+              "flex shrink-0 justify-around [gap:var(--gap)] ![animation-duration:12s] [animation-play-state:running] group-hover:[animation-play-state:paused]",
+              {
+                "animate-marquee flex-row": !vertical,
+                "animate-marquee-vertical flex-col": vertical,
+                "[animation-direction:reverse]": reverse,
+              },
+            )}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  );
+}
+
+interface SkiperUiMarqueeProps {
+  showCard: number;
+  reverse?: boolean;
+  className?: string;
+  src: string[];
+}
+
+export function SkiperUiMarquee({
+  showCard,
+  reverse = false,
+  className,
+  src,
+}: SkiperUiMarqueeProps) {
+  return (
+    <div
+      className={cn("relative overflow-hidden", className)}
+      style={{
+        height: showCard * 113,
+      }}
+    >
+      <Marquee reverse={reverse} vertical={true}>
+        {src.map((item, idx) => (
+          <Card key={idx} src={item} />
+        ))}
+      </Marquee>
+      <div className="absolute top-0 z-10 h-8 w-full bg-gradient-to-b from-background to-transparent" />
+      <div className="absolute bottom-0 z-10 h-8 w-full bg-gradient-to-t from-background to-transparent" />
+    </div>
+  );
+}
+
+function Card({ src }: { src?: string }) {
+  return (
+    <div
+      className={cn(
+        "relative flex size-24 items-center justify-center overflow-hidden rounded-3xl border border-muted p-4",
+        "bg-gradient-to-b from-muted/50 to-background",
+        "dark:bg-transparent dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      )}
+    >
+      <img
+        src={
+          src ||
+          "/block-media/shadcnblocks/block/logos/notion-icon.svg"
+        }
+        alt="لوگو"
+        className="size-8 object-cover"
+      />
+    </div>
+  );
+}
diff --git a/blocks/hero220.tsx b/blocks/hero220.tsx
new file mode 100644
index 0000000..0143f43
--- /dev/null
+++ b/blocks/hero220.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { VideoText } from "@/components/magicui/video-text";
+import { cn } from "@/lib/utils";
+
+interface Hero220Props {
+  className?: string;
+}
+
+const Hero220 = ({ className }: Hero220Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex min-h-screen flex-col items-center justify-center overflow-hidden py-32",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="absolute top-0 left-0 h-screen w-full overflow-hidden bg-[url('/block-media/shadcnblocks/block/lummi/landscape6.jpeg')] bg-cover bg-top bg-no-repeat opacity-20" />
+        <div className="flex flex-col items-center justify-center gap-4">
+          <motion.div
+            initial={{ opacity: 0, scale: 1.1 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3 }}
+            className="relative flex h-[250px] w-full items-center"
+          >
+            <VideoText
+              src="/block-media/shadcnblocks/block/landscape.mp4"
+              className="font-playfair text-[15rem] font-bold tracking-tighter"
+              fontFamily="Playfair Display"
+            >
+              کامپوننت‌ها
+                                      </VideoText>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero220 };
diff --git a/blocks/hero221.tsx b/blocks/hero221.tsx
new file mode 100644
index 0000000..6bdbc80
--- /dev/null
+++ b/blocks/hero221.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { VideoText } from "@/components/magicui/video-text";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero221Props {
+  className?: string;
+}
+
+const Hero221 = ({ className }: Hero221Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-4">
+          <motion.div
+            initial={{ opacity: 0, scale: 1.1 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3 }}
+            className="relative mt-32 flex h-[250px] w-full items-center"
+          >
+            <VideoText
+              src="/block-media/shadcnblocks/block/ocean1080.mov"
+              className="font-playfair text-[15rem] font-bold tracking-tighter"
+              fontFamily="Cal Sans"
+            >
+              کامپوننت‌ها
+                                      </VideoText>
+          </motion.div>
+          <p className="-mt-10 max-w-xl text-center text-lg text-muted-foreground">
+            صدها کامپوننت استاندارد و قابل سفارشی‌سازی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+        </div>
+        <Button
+          variant="secondary"
+          className="text-md group mx-auto mt-24 flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+        >
+          <span>شروع رایگان</span>
+          <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export { Hero221 };
diff --git a/blocks/hero222.tsx b/blocks/hero222.tsx
new file mode 100644
index 0000000..78b7966
--- /dev/null
+++ b/blocks/hero222.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React, { useRef } from "react";
+
+
+import { useMousePosition } from "@/hooks/use-mouse-position";
+import { cn } from "@/lib/utils";
+
+interface Hero222Props {
+  className?: string;
+}
+
+const Hero222 = ({ className }: Hero222Props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { x, y } = useMousePosition(containerRef);
+  return (
+    <section className={cn("py-18", className)}>
+      <div className="container">
+        <div
+          ref={containerRef}
+          className="relative flex h-[85vh] flex-col items-center justify-center gap-4 overflow-hidden bg-[url('/block-media/shadcnblocks/block/lummi/bw15.jpeg')] bg-[position:center_-24rem] xl:bg-cover"
+        >
+          <div className="absolute bottom-10 left-10 flex flex-col mix-blend-exclusion">
+            <p className="text-xs text-secondary"> {Math.round(x)}</p>
+            <p className="text-xs text-secondary"> {Math.round(y)}</p>
+          </div>
+          <div className="relative z-10 h-full w-full mix-blend-exclusion">
+            <div className="mx-auto mt-62 w-fit">
+              <motion.p
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="font-mono text-lg text-white md:ms-3"
+              >
+                نسخه ۱{" "}
+              </motion.p>
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+              >
+                {/* <VariableFontAndCursor
+                  label="BEYOND SPEED"
+                  className="text-2xll tracking-[-5px] text-white sm:text-2xll md:text-9xl md:tracking-[-13px]"
+                  fontVariationMapping={{
+                    y: { name: "wght", min: 100, max: 900 },
+                    x: { name: "slnt", min: 0, max: -10 },
+                  }}
+                  containerRef={containerRef as React.RefObject<HTMLDivElement>}
+                /> */}
+              </motion.div>
+              <div
+                className="absolute top-0 h-screen w-px -translate-x-1/2 bg-background"
+                style={{
+                  left: `${x - 2}px`,
+                }}
+              />
+              <div
+                className="absolute left-0 h-px w-screen -translate-y-1/2 bg-background"
+                style={{
+                  top: `${y - 2}px`,
+                }}
+              />
+              <div
+                className="absolute h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-xs bg-background"
+                style={{
+                  top: `${y - 2}px`,
+                  left: `${x - 2}px`,
+                }}
+              />
+            </div>
+          </div>
+          <button className="group z-99 mb-10 flex items-center gap-2 bg-background px-4 py-2 text-black transition-all duration-300 hover:gap-4">
+            شروع رایگان
+                                  <ArrowRight
+              className="-rotate-45 transition-all duration-300 group-hover:rotate-0 rtl:rotate-180"
+              size={16}
+            />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero222 };
diff --git a/blocks/hero223.tsx b/blocks/hero223.tsx
new file mode 100644
index 0000000..74f3567
--- /dev/null
+++ b/blocks/hero223.tsx
@@ -0,0 +1,128 @@
+"use client";
+import { ArrowRight } from "lucide-react";
+import { motion } from "motion/react";
+import React from "react";
+
+import { LineShadowText } from "@/components/magicui/line-shadow-text";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero223Props {
+  className?: string;
+}
+
+const Hero223 = ({ className }: Hero223Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="relative container flex h-150 w-full flex-col items-center justify-center overflow-hidden">
+        <div className="pointer-events-none absolute inset-0 z-20 h-full w-full bg-background [mask-image:radial-gradient(transparent,white)]" />
+        <Boxes className="scale-150" />
+
+        <h1 className="relative z-99 max-w-4xl text-center text-2xll font-medium tracking-tight md:text-2xll">
+          <span className="ms-3 text-muted-foreground/50">
+            همه ابزارهای لازم برای
+                                </span>
+          <LineShadowText> بهره‌وری </LineShadowText>
+          <span className="text-muted-foreground/50"> در یک پلتفرم</span>
+          <span>.</span>
+        </h1>
+        <p className="relative z-99 mt-4 max-w-xl text-center text-lg text-muted-foreground">
+          صدها کامپوننت استاندارد و قابل سفارشی‌سازی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+        <div className="realtive z-99 mt-10 flex items-center justify-center gap-4">
+          <Button
+            variant="default"
+            className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>مشاهده پلن‌ها</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="secondary"
+            className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>شروع رایگان</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero223 };
+
+// Below is the modified component from Aceternity UI
+// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/background-boxes.json
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
+  const rows = new Array(150).fill(1);
+  const cols = new Array(100).fill(1);
+  const colors = [
+    "#33A1FD",
+    "#2276FF",
+    "#FDCA41",
+    "#2EDCC3",
+    "#FF99CA",
+    "#E5D5C3",
+    "#343433",
+  ];
+  const getRandomColor = () => {
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  return (
+    <div
+      style={{
+        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
+      }}
+      className={cn(
+        "absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4",
+        className,
+      )}
+      {...rest}
+    >
+      {rows.map((_, i) => (
+        <motion.div
+          key={`row` + i}
+          className="relative h-8 w-16 border-l border-muted-foreground/20"
+        >
+          {cols.map((_, j) => (
+            <motion.div
+              whileHover={{
+                backgroundColor: `${getRandomColor()}`,
+                transition: { duration: 0 },
+              }}
+              animate={{
+                transition: { duration: 2 },
+              }}
+              key={`col` + j}
+              className="relative h-8 w-16 border-t border-r border-muted-foreground/20"
+            >
+              {j % 2 === 0 && i % 2 === 0 ? (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth="1.5"
+                  stroke="currentColor"
+                  className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-muted"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 6v12m6-6H6"
+                  />
+                </svg>
+              ) : null}
+            </motion.div>
+          ))}
+        </motion.div>
+      ))}
+    </div>
+  );
+};
+
+export const Boxes = React.memo(BoxesCore);
diff --git a/blocks/hero224.tsx b/blocks/hero224.tsx
new file mode 100644
index 0000000..7f1d265
--- /dev/null
+++ b/blocks/hero224.tsx
@@ -0,0 +1,398 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import React, { startTransition, useEffect, useRef, useState } from "react";
+import { renderToString } from "react-dom/server";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero224Props {
+  className?: string;
+}
+
+const Hero224 = ({ className }: Hero224Props) => {
+  const images = [
+    "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random12.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random13.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/person1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/person2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/person3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random5.jpeg",
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container flex w-full flex-col items-center justify-between md:h-150 md:flex-row md:overflow-hidden">
+        <div>
+          <h1 className="relative z-99 max-w-md text-2xll font-medium tracking-tight md:text-2xll">
+            جستجو، <br /> انتخاب و استفاده
+                                  <br /> بسازید
+          </h1>
+          <p className="relative z-99 mt-4 max-w-lg text-lg text-muted-foreground">
+            صدها کامپوننت استاندارد و قابل سفارشی‌سازی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+          <div className="realtive z-99 mt-10 flex gap-4">
+            <Button
+              variant="default"
+              className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+            >
+              <span>مشاهده پلن‌ها</span>
+              <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="secondary"
+              className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+            >
+              <span>شروع رایگان</span>
+              <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+        <div className="flex h-full w-full items-center justify-center overflow-hidden md:w-1/2">
+          <IconCloud images={images} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero224 };
+
+// Below is the modified component from Magic UI
+// Original source: https://magicui.design/docs/components/icon-cloud
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+interface Icon {
+  x: number;
+  y: number;
+  z: number;
+  scale: number;
+  opacity: number;
+  id: number;
+}
+
+interface IconCloudProps {
+  icons?: React.ReactNode[];
+  images?: string[];
+}
+
+function easeOutCubic(t: number): number {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+export function IconCloud({ icons, images }: IconCloudProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [iconPositions, setIconPositions] = useState<Icon[]>([]);
+  const [rotation, _setRotation] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 });
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [targetRotation, setTargetRotation] = useState<{
+    x: number;
+    y: number;
+    startX: number;
+    startY: number;
+    distance: number;
+    startTime: number;
+    duration: number;
+  } | null>(null);
+  const animationFrameRef = useRef<number>(0);
+  const rotationRef = useRef(rotation);
+  const iconCanvasesRef = useRef<HTMLCanvasElement[]>([]);
+  const imagesLoadedRef = useRef<boolean[]>([]);
+
+  // Create icon canvases once when icons/images change
+  useEffect(() => {
+    if (!icons && !images) return;
+
+    const items = icons || images || [];
+    imagesLoadedRef.current = new Array(items.length).fill(false);
+
+    const newIconCanvases = items.map((item, index) => {
+      const offscreen = document.createElement("canvas");
+      offscreen.width = 40;
+      offscreen.height = 40;
+      const offCtx = offscreen.getContext("2d");
+
+      if (offCtx) {
+        if (images) {
+          // Handle image URLs directly
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          img.src = items[index] as string;
+          img.onload = () => {
+            offCtx.clearRect(0, 0, offscreen.width, offscreen.height);
+
+            // Create circular clipping path
+            offCtx.beginPath();
+            offCtx.arc(20, 20, 20, 0, Math.PI * 2);
+            offCtx.closePath();
+            offCtx.clip();
+
+            // Draw the image
+            offCtx.drawImage(img, 0, 0, 40, 40);
+
+            imagesLoadedRef.current[index] = true;
+          };
+        } else {
+          // Handle SVG icons
+          offCtx.scale(0.4, 0.4);
+          const svgString = renderToString(item as React.ReactElement);
+          const img = new Image();
+          img.src = "data:image/svg+xml;base64," + btoa(svgString);
+          img.onload = () => {
+            offCtx.clearRect(0, 0, offscreen.width, offscreen.height);
+            offCtx.drawImage(img, 0, 0);
+            imagesLoadedRef.current[index] = true;
+          };
+        }
+      }
+      return offscreen;
+    });
+
+    iconCanvasesRef.current = newIconCanvases;
+  }, [icons, images]);
+
+  // Generate initial icon positions on a sphere
+  useEffect(() => {
+    const items = icons || images || [];
+    const newIcons: Icon[] = [];
+    const numIcons = items.length || 20;
+
+    // Fibonacci sphere parameters
+    const offset = 2 / numIcons;
+    const increment = Math.PI * (3 - Math.sqrt(5));
+
+    for (let i = 0; i < numIcons; i++) {
+      const y = i * offset - 1 + offset / 2;
+      const r = Math.sqrt(1 - y * y);
+      const phi = i * increment;
+
+      const x = Math.cos(phi) * r;
+      const z = Math.sin(phi) * r;
+
+      newIcons.push({
+        x: x * 180,
+        y: y * 180,
+        z: z * 180,
+        scale: 1,
+        opacity: 1,
+        id: i,
+      });
+    }
+    startTransition(() => {
+      setIconPositions(newIcons);
+    });
+  }, [icons, images]);
+
+  // Handle mouse events
+  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect || !canvasRef.current) return;
+
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    const ctx = canvasRef.current.getContext("2d");
+    if (!ctx) return;
+
+    iconPositions.forEach((icon) => {
+      const cosX = Math.cos(rotationRef.current.x);
+      const sinX = Math.sin(rotationRef.current.x);
+      const cosY = Math.cos(rotationRef.current.y);
+      const sinY = Math.sin(rotationRef.current.y);
+
+      const rotatedX = icon.x * cosY - icon.z * sinY;
+      const rotatedZ = icon.x * sinY + icon.z * cosY;
+      const rotatedY = icon.y * cosX + rotatedZ * sinX;
+
+      const screenX = canvasRef.current!.width / 2 + rotatedX;
+      const screenY = canvasRef.current!.height / 2 + rotatedY;
+
+      const scale = (rotatedZ + 200) / 300;
+      const radius = 20 * scale;
+      const dx = x - screenX;
+      const dy = y - screenY;
+
+      if (dx * dx + dy * dy < radius * radius) {
+        const targetX = -Math.atan2(
+          icon.y,
+          Math.sqrt(icon.x * icon.x + icon.z * icon.z),
+        );
+        const targetY = Math.atan2(icon.x, icon.z);
+
+        const currentX = rotationRef.current.x;
+        const currentY = rotationRef.current.y;
+        const distance = Math.sqrt(
+          Math.pow(targetX - currentX, 2) + Math.pow(targetY - currentY, 2),
+        );
+
+        const duration = Math.min(2000, Math.max(800, distance * 1000));
+
+        setTargetRotation({
+          x: targetX,
+          y: targetY,
+          startX: currentX,
+          startY: currentY,
+          distance,
+          startTime: performance.now(),
+          duration,
+        });
+        return;
+      }
+    });
+
+    setIsDragging(true);
+    setLastMousePos({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (rect) {
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      setMousePos({ x, y });
+    }
+
+    if (isDragging) {
+      const deltaX = e.clientX - lastMousePos.x;
+      const deltaY = e.clientY - lastMousePos.y;
+
+      rotationRef.current = {
+        x: rotationRef.current.x + deltaY * 0.002,
+        y: rotationRef.current.y + deltaX * 0.002,
+      };
+
+      setLastMousePos({ x: e.clientX, y: e.clientY });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  // Animation and rendering
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
+      const dx = mousePos.x - centerX;
+      const dy = mousePos.y - centerY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      const speed = 0.003 + (distance / maxDistance) * 0.01;
+
+      if (targetRotation) {
+        const elapsed = performance.now() - targetRotation.startTime;
+        const progress = Math.min(1, elapsed / targetRotation.duration);
+        const easedProgress = easeOutCubic(progress);
+
+        rotationRef.current = {
+          x:
+            targetRotation.startX +
+            (targetRotation.x - targetRotation.startX) * easedProgress,
+          y:
+            targetRotation.startY +
+            (targetRotation.y - targetRotation.startY) * easedProgress,
+        };
+
+        if (progress >= 1) {
+          setTargetRotation(null);
+        }
+      } else if (!isDragging) {
+        rotationRef.current = {
+          x: rotationRef.current.x + (dy / canvas.height) * speed,
+          y: rotationRef.current.y + (dx / canvas.width) * speed,
+        };
+      }
+
+      iconPositions.forEach((icon, index) => {
+        const cosX = Math.cos(rotationRef.current.x);
+        const sinX = Math.sin(rotationRef.current.x);
+        const cosY = Math.cos(rotationRef.current.y);
+        const sinY = Math.sin(rotationRef.current.y);
+
+        const rotatedX = icon.x * cosY - icon.z * sinY;
+        const rotatedZ = icon.x * sinY + icon.z * cosY;
+        const rotatedY = icon.y * cosX + rotatedZ * sinX;
+
+        const scale = (rotatedZ + 200) / 300;
+        const opacity = Math.max(0.2, Math.min(1, (rotatedZ + 150) / 200));
+
+        ctx.save();
+        ctx.translate(
+          canvas.width / 2 + rotatedX,
+          canvas.height / 2 + rotatedY,
+        );
+        ctx.scale(scale, scale);
+        ctx.globalAlpha = opacity;
+
+        if (icons || images) {
+          // Only try to render icons/images if they exist
+          if (
+            iconCanvasesRef.current[index] &&
+            imagesLoadedRef.current[index]
+          ) {
+            ctx.drawImage(iconCanvasesRef.current[index], -20, -20, 50, 50);
+          }
+        } else {
+          // Show numbered circles if no icons/images are provided
+          ctx.beginPath();
+          ctx.arc(0, 0, 20, 0, Math.PI * 2);
+          ctx.fillStyle = "#4444ff";
+          ctx.fill();
+          ctx.fillStyle = "white";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.font = "16px Arial";
+          ctx.fillText(`${icon.id + 1}`, 0, 0);
+        }
+
+        ctx.restore();
+      });
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [icons, images, iconPositions, isDragging, mousePos, targetRotation]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={700}
+      height={600}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      className="rounded-lg"
+      aria-label="ابر آیکون سه‌بعدی تعاملی"
+      role="img"
+    />
+  );
+}
diff --git a/blocks/hero225.tsx b/blocks/hero225.tsx
new file mode 100644
index 0000000..d24b0ce
--- /dev/null
+++ b/blocks/hero225.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero225Props {
+  className?: string;
+}
+
+const Hero225 = ({ className }: Hero225Props) => {
+  const circle1Images = [
+    "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+    "/block-media/shadcnblocks/block/logos/react-icon.svg",
+    "/block-media/shadcnblocks/block/logos/vue-icon.svg",
+    "/block-media/shadcnblocks/block/logos/vite-icon.svg",
+    "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+  ];
+
+  const circle2Images = [
+    "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
+    "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+    "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+    "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+  ];
+
+  const circle3Images = [
+    "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+    "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    "/block-media/shadcnblocks/block/logos/laravel-icon.svg",
+  ];
+
+  const circle4Images = [
+    "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+    "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+    "/block-media/shadcnblocks/block/logos/brave-icon.svg",
+    "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
+    "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+    "/block-media/shadcnblocks/block/logos/google-icon.svg",
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-4">
+          <p className="text-lg text-muted-foreground">
+            مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی
+                                </p>
+          <h1 className="font-calSans max-w-5xl text-center text-2xll lg:text-2xll">
+            یک بار تهیه کنید و در تمام پروژه‌های خود استفاده کنید
+                                </h1>
+        </div>
+        <div className="relative h-112 overflow-hidden">
+          <div className="relative flex h-[1200px] w-full flex-col items-center justify-center overflow-hidden">
+            <OrbitingCircles iconSize={40} radius={310} speed={2}>
+              {circle1Images.map((src, index) => (
+                <div key={index} className="size-12">
+                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
+                </div>
+              ))}
+            </OrbitingCircles>
+            <OrbitingCircles iconSize={40} radius={390} reverse speed={2}>
+              {circle2Images.map((src, index) => (
+                <div key={index} className="size-12">
+                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
+                </div>
+              ))}
+            </OrbitingCircles>
+            <OrbitingCircles iconSize={40} radius={470} speed={2}>
+              {circle3Images.map((src, index) => (
+                <div key={index} className="size-12">
+                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
+                </div>
+              ))}
+            </OrbitingCircles>
+            <OrbitingCircles iconSize={40} radius={550} reverse speed={1}>
+              {circle4Images.map((src, index) => (
+                <div key={index} className="size-12">
+                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
+                </div>
+              ))}
+            </OrbitingCircles>
+          </div>
+          <div className="absolute bottom-0 h-24 w-full bg-gradient-to-t from-background to-transparent" />
+          <Button
+            variant="secondary"
+            className="text-md group absolute bottom-0 left-1/2 mx-auto mt-24 flex w-fit -translate-x-1/2 items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>شروع رایگان</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero225 };
diff --git a/blocks/hero226.tsx b/blocks/hero226.tsx
new file mode 100644
index 0000000..3e69d8a
--- /dev/null
+++ b/blocks/hero226.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import Autoplay from "embla-carousel-autoplay";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Hero226Props {
+  className?: string;
+}
+
+const Hero226 = ({ className }: Hero226Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+
+  const Images = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+      title: "خانه رؤیایی خود را با ما بسازید",
+      description: "از طراحی تا اجرا، همراه شما هستیم.",
+      link: "#",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/lummi/bw13.jpeg",
+      title: "خانه‌های هوشمند",
+      description: "فضاهای زندگی هوشمند برای آینده",
+      link: "#",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
+      title: "سازگار با محیط زیست",
+      description: "خانه‌های پایدار و دوستدار محیط زیست",
+      link: "#",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/lummi/bw16.jpeg",
+      title: "ساخت سفارشی",
+      description: "راهکارهای متناسب با دیدگاه منحصربه‌فرد شما",
+      link: "#",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
+      title: "ساخت سفارشی",
+      description: "راهکارهای متناسب با دیدگاه منحصربه‌فرد شما",
+      link: "#",
+    },
+  ];
+
+  useEffect(() => {
+    if (!api) return;
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5 }}
+        className=""
+      >
+        <Carousel
+          setApi={setApi}
+          className="w-full"
+          opts={{
+            loop: true,
+            slidesToScroll: 1,
+          }}
+          plugins={[
+            Autoplay({
+              delay: 2000,
+              stopOnInteraction: true,
+              stopOnMouseEnter: true,
+            }),
+          ]}
+        >
+          <CarouselContent className="flex w-full gap-4">
+            {Images.map((img, index) => (
+              <CarouselItem key={index} className="w-full basis-[91%]">
+                <div className="p-1">
+                  <div
+                    key={index}
+                    className="relative flex h-166 flex-col items-end justify-between bg-muted p-8"
+                  >
+                    <div className="pointer-events-none absolute top-0 left-0 h-full w-full">
+                      <img
+                        src={img.image}
+                        alt="تصویر نمونه"
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                    <div className="z-10 mt-42 text-white">
+                      <h1 className="max-w-lg text-end text-2xll font-medium tracking-tight">
+                        {img.title}
+                      </h1>
+                      <p className="my-6 max-w-lg text-end text-lg">
+                        {img.description}
+                      </p>
+                    </div>
+                    <div className="bg-muted00 z-10 flex w-full justify-between">
+                      <a href={img.link}>
+                        <Button
+                          variant="outline"
+                          className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+                        >
+                          شروع رایگان
+                                                                  <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
+                        </Button>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+
+          {/* Navigation Dots */}
+          <div className="mt-4 flex justify-center gap-2">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <button
+                key={index}
+                onClick={() => api?.scrollTo(index)}
+                className={`h-2.5 w-2.5 rounded-full transition-all ${
+                  current === index
+                    ? "w-4 bg-primary"
+                    : "bg-muted-foreground/50"
+                }`}
+                aria-label={`رفتن به اسلاید ${index + 1}`}
+              />
+            ))}
+          </div>
+        </Carousel>
+      </motion.div>
+    </section>
+  );
+};
+
+export { Hero226 };
+
+export const GRADIENT_ANGLES = {
+  top: 0,
+  right: 90,
+  bottom: 180,
+  left: 270,
+};
diff --git a/blocks/hero227.tsx b/blocks/hero227.tsx
new file mode 100644
index 0000000..3f79366
--- /dev/null
+++ b/blocks/hero227.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Copy, Globe, ShieldCheck } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { useGoogleFont } from "@/hooks/use-google-font";
+import { cn } from "@/lib/utils";
+
+interface Hero227Props {
+  className?: string;
+}
+
+const Hero227 = ({ className }: Hero227Props) => {
+  useGoogleFont("Antonio");
+  return (
+    <section
+      className={cn("bg-background py-32", className)}
+      style={
+        {
+          "--font-antonio": "Antonio",
+        } as React.CSSProperties
+      }
+    >
+      <div className="border-b border-muted-foreground/40">
+        <div className="container flex flex-col items-center justify-center gap-4 text-center">
+          <div className="flex flex-wrap items-center justify-center gap-6">
+            <div className="flex items-center justify-center gap-2 text-xs font-medium tracking-tight text-primary/40 md:text-lg">
+              <Copy className="size-4" />
+              کامپوننت‌های آماده استفاده
+                                      </div>
+            <div className="flex items-center justify-center gap-2 text-xs font-medium tracking-tight text-primary/40 md:text-lg">
+              <ShieldCheck className="size-4" />
+              طراحی‌شده براساس استانداردهای روز
+                                      </div>
+            <div className="flex items-center justify-center gap-2 text-xs font-medium tracking-tight text-primary/40 md:text-lg">
+              <Globe className="size-4 animate-spin" />
+              سازگار با انواع پروژه‌ها
+                                      </div>
+          </div>
+          <div className="relative">
+            <h1 className="font-antonio text-2xll font-extrabold tracking-tight text-foreground uppercase md:text-9xl">
+              {/* <VerticalCutReveal>New ری یو آی</VerticalCutReveal> */}
+            </h1>
+            <Asterisk className="absolute -top-2 -right-6 size-5 md:size-10 lg:-right-14" />
+          </div>
+          <p className="max-w-xl text-muted-foreground/80">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+          <div className="flex rounded-3xl bg-muted-foreground/10 p-1.5">
+            <Button className="text-md flex h-full items-center justify-center rounded-2xl font-medium">
+              شروع رایگان
+                                      </Button>
+            <Button
+              variant="ghost"
+              className="text-md flex h-full items-center justify-center rounded-2xl font-medium opacity-40"
+            >
+              بدون نیاز به کارت بانکی
+                                      </Button>
+          </div>
+
+          {/* Iphone mockup with content */}
+          <div className="relative h-[500px] w-full overflow-hidden">
+            <motion.div
+              initial={{ opacity: 0, y: 200, scale: 0.8 }}
+              animate={{ opacity: 100, y: 0, scale: 1 }}
+              transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
+              className="relative mx-auto mt-6 flex h-[850px] w-[400px] items-center justify-center rounded-[75px] bg-black md:mt-12 md:h-[920px] md:w-[450px]"
+            >
+              <img
+                className="absolute z-2 scale-105 object-cover"
+                alt="تصویر نمونه"
+                src="/block-media/shadcnblocks/block/mockups/phone-5.png"
+              />
+              <div className="h-full w-full">
+                <div className="mt-20 flex justify-between px-0">
+                  <h1 className="flex items-end gap-2 px-12 text-2xll font-semibold tracking-tight text-background md:text-2xll">
+                    کامپوننت‌های رابط کاربری
+                                                          <div className="mb-2 size-3 rounded-full bg-red-500 md:size-5" />
+                  </h1>
+                  <div className="mt-2 me-8 flex flex-col items-end">
+                    <p className="text-lg tracking-tight text-muted-foreground md:text-xl">
+                      آخرین به‌روزرسانی
+                                                              </p>
+                    <p className="-mt-1 text-xl font-semibold tracking-tighter text-muted-foreground/50 md:text-xl">
+                      2025
+                    </p>
+                  </div>
+                </div>
+                <img
+                  className="z-2 mx-auto mt-20 size-40 object-cover"
+                  alt="تصویر نمونه"
+                  src="/block-media/shadcnblocks/block/block-white-1.svg"
+                />
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero227 };
+
+const Asterisk = (props: React.ComponentProps<typeof motion.svg>) => {
+  return (
+    <motion.svg
+      initial={{ opacity: 0, rotate: -45, scale: 0.5 }}
+      animate={{ opacity: 1, rotate: 0, scale: 1 }}
+      transition={{ duration: 0.5, bounce: 0.4, type: "spring", delay: 0.6 }}
+      {...props}
+      viewBox="0 0 45 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.6294 44.8574L18.9282 29.0791L6.44141 38.9536L0.380859 28.5044L14.6963 22.3916L0.380859 16.6968L6.44141 6.24756L18.876 15.5996L16.6294 0.34375H28.7505L26.9219 15.2861L38.9385 6.24756L44.999 16.6968L30.6313 22.3916L44.999 28.5044L38.9385 38.9536L26.8696 29.4448L28.7505 44.8574H16.6294Z"
+        fill="#FF0000"
+      />
+    </motion.svg>
+  );
+};
diff --git a/blocks/hero228.tsx b/blocks/hero228.tsx
new file mode 100644
index 0000000..c3e34a4
--- /dev/null
+++ b/blocks/hero228.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import Autoplay from "embla-carousel-autoplay";
+import { AnimatePresence, motion } from "framer-motion";
+import React, { useMemo } from "react";
+import { useCallback } from "react";
+
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+interface Hero228Props {
+  className?: string;
+}
+
+const Hero228 = ({ className }: Hero228Props) => {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const [current, setCurrent] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!api) return;
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const isMobile = useIsMobile();
+
+  const testimonials = [
+    {
+      id: 1,
+      image:
+        "/block-media/shadcnblocks/block/lummi/person1.jpeg",
+      name: "جان دو",
+    },
+    {
+      id: 2,
+      image:
+        "/block-media/shadcnblocks/block/lummi/person2.jpeg",
+      name: "جین اسمیت",
+    },
+    {
+      id: 3,
+      image:
+        "/block-media/shadcnblocks/block/lummi/person3.jpeg",
+      name: "جان جانسون",
+    },
+    {
+      id: 4,
+      image:
+        "/block-media/shadcnblocks/block/lummi/person4.jpeg",
+      name: "سارا ویلیام",
+    },
+    {
+      id: 5,
+      image:
+        "/block-media/shadcnblocks/block/lummi/person5.jpeg",
+      name: "مایکل براون",
+    },
+    {
+      id: 6,
+      image:
+        "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+      name: "امیلی دیویس",
+    },
+    {
+      id: 7,
+      image:
+        "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
+      name: "جیسون وایت",
+    },
+  ];
+
+  const getRotation = useCallback(
+    (index: number) => {
+      if (index === current)
+        return "md:-rotate-45 md:translate-x-40 md:scale-75 md:relative";
+      if (index === current + 1) return "md:rotate-0 md:z-10 md:relative";
+      if (index === current + 2)
+        return "md:rotate-45 md:-translate-x-40 md:scale-75 md:relative";
+    },
+    [current],
+  );
+
+  const scrollbarBars = useMemo(
+    () =>
+      [...Array(40)].map((_, item) => (
+        <motion.div
+          key={item}
+          initial={{
+            opacity: item % 5 === 0 ? 0.2 : 0.2,
+            filter: "blur(1px)",
+          }}
+          animate={{
+            opacity: item % 5 === 0 ? 1 : 0.2,
+            filter: "blur(0px)",
+          }}
+          transition={{
+            duration: 0.2,
+            delay: item % 5 === 0 ? (item / 5) * 0.05 : 0,
+            ease: "easeOut",
+          }}
+          className={cn(
+            "w-[1px] bg-black",
+            item % 5 === 0 ? "h-[15px]" : "h-[10px]",
+          )}
+        />
+      )),
+    [],
+  );
+
+  return (
+    <section className={cn("bg-background py-32", className)}>
+      <div className="container flex flex-col items-center justify-center gap-4 text-center">
+        <h1 className="max-w-3xl text-2xll font-medium tracking-tighter text-foreground md:px-9 md:text-2xll">
+          <span className="font-playfair italic">همه</span> ابزارهای لازم برای{" "}
+          <span className="font-playfair italic">خلاق و</span> توسعه سریع
+                          </h1>
+        <p className="mt-5 max-w-xl text-muted-foreground/80">
+          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+
+        <Carousel
+          className="max-w-5xl"
+          plugins={[
+            Autoplay({
+              delay: 1000,
+              stopOnInteraction: true,
+            }),
+          ]}
+          setApi={setApi}
+        >
+          <CarouselContent>
+            {Array.from({
+              length: isMobile ? testimonials.length : testimonials.length + 2,
+            }).map((_, index) => (
+              <CarouselItem key={index} className="my-10 md:basis-1/3">
+                <div
+                  className={`h-105 w-full transition-transform duration-500 ease-in-out ${getRotation(index)}`}
+                >
+                  <img
+                    src={
+                      index == testimonials.length
+                        ? testimonials[0].image
+                        : index == testimonials.length + 1
+                          ? testimonials[1].image
+                          : index == testimonials.length + 2
+                            ? testimonials[2].image
+                            : testimonials[index].image
+                    }
+                    className="h-full w-full object-cover"
+                    alt="تصویر نمونه"
+                  />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="absolute right-0 bottom-0 flex w-full translate-y-full flex-col items-center justify-center gap-2">
+            <div className="flex gap-2">{scrollbarBars}</div>
+            <AnimatePresence mode="popLayout" initial={false}>
+              <motion.p
+                key={current}
+                className="w-full text-lg font-medium"
+                initial={{ opacity: 0, y: 20, scale: 0.9, filter: "blur(5px)" }}
+                animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
+                exit={{ opacity: 0, y: -20, scale: 0.9, filter: "blur(5px)" }}
+                transition={{ duration: 0.5 }}
+              >
+                {testimonials[current]?.name}
+              </motion.p>
+            </AnimatePresence>
+            <div className="flex gap-2">{scrollbarBars}</div>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Hero228 };
diff --git a/blocks/hero229.tsx b/blocks/hero229.tsx
new file mode 100644
index 0000000..d6f77f5
--- /dev/null
+++ b/blocks/hero229.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero229Props {
+  className?: string;
+}
+
+const Hero229 = ({ className }: Hero229Props) => {
+  return (
+    <section
+      className={cn(
+        "relative h-[100dvh] w-[100dvw] overflow-hidden border bg-background py-32",
+        className,
+      )}
+    >
+      <div className="relative z-20 container flex flex-col items-center justify-center gap-4 text-center">
+        <Button
+          variant="secondary"
+          className="text-md group mt-42 flex w-fit items-center justify-center gap-3 rounded-full bg-muted/60 px-5 py-1 tracking-tight"
+        >
+          <span className="size-2 rounded-full bg-foreground" />
+          <span>مشاهده پلن‌ها</span>
+        </Button>
+        <h1 className="max-w-3xl text-2xll font-medium tracking-tighter text-foreground md:text-2xll">
+          مجموعه بلاک‌های آماده <br /> برای رابط کاربری و استایل‌دهی مدرن
+                          </h1>
+        <p className="mt-5 max-w-xl text-muted-foreground/80">
+          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+        <div className="flex gap-4">
+          <Button
+            variant="secondary"
+            className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>مشاهده مستندات</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="default"
+            className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>شروع رایگان</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+
+      <Illustration1
+        initial={{ opacity: 0, y: -100 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, ease: [0, 0, 0, 1.12] }}
+        className="absolute top-0 left-1/2 -translate-x-1/2"
+      />
+      <Illustration1
+        initial={{ opacity: 0, y: -100 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, ease: [0, 0, 0, 1.12] }}
+        className="absolute bottom-0 left-1/2 -translate-x-1/2 scale-y-[-1]"
+      />
+      <Illustration2
+        initial={{ opacity: 0, x: -100 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 1, ease: [0, 0, 0, 1.12] }}
+        className="absolute top-1/2 left-0 z-99 hidden -translate-y-1/2 md:block"
+      />
+      <Illustration2
+        initial={{ opacity: 0, x: -100 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 1, ease: [0, 0, 0, 1.12] }}
+        className="absolute top-1/2 right-0 z-99 hidden -translate-y-1/2 scale-x-[-1] md:block"
+      />
+    </section>
+  );
+};
+
+export { Hero229 };
+
+const Illustration1 = (props: any) => {
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={460}
+      height={233}
+      fill="none"
+      {...props}
+    >
+      <path stroke="url(#a)" d="M141.338 232.625V5.075" />
+      <path stroke="url(#b)" d="M176.338 232.625V5.075" />
+      <path stroke="url(#c)" d="M212.338 231.625V4.075" />
+      <path stroke="url(#d)" d="M248.338 230.625V3.075" />
+      <path stroke="url(#e)" d="M284.338 229.625V2.075" />
+      <path stroke="url(#f)" d="M320.338 228.625V1.075" />
+      <path
+        stroke="url(#g)"
+        d="M459.649 152.723 351.613 69.264a11 11 0 0 1-4.275-8.705V.074"
+      />
+      <path
+        stroke="url(#h)"
+        d="m.338 152.723 108.036-83.459a11 11 0 0 0 4.275-8.705V.074"
+      />
+      <defs>
+        <linearGradient
+          id="a"
+          x1={141.838}
+          x2={141.838}
+          y1={232.625}
+          y2={5.074}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset={1} stopColor="#999" />
+        </linearGradient>
+        <linearGradient
+          id="b"
+          x1={176.838}
+          x2={176.838}
+          y1={232.625}
+          y2={5.074}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset={1} stopColor="#999" />
+        </linearGradient>
+        <linearGradient
+          id="c"
+          x1={212.838}
+          x2={212.838}
+          y1={231.625}
+          y2={4.074}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset={1} stopColor="#999" />
+        </linearGradient>
+        <linearGradient
+          id="d"
+          x1={248.838}
+          x2={248.838}
+          y1={230.625}
+          y2={3.074}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset={1} stopColor="#999" />
+        </linearGradient>
+        <linearGradient
+          id="e"
+          x1={284.838}
+          x2={284.838}
+          y1={229.625}
+          y2={2.074}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset={1} stopColor="#999" />
+        </linearGradient>
+        <linearGradient
+          id="f"
+          x1={320.838}
+          x2={320.838}
+          y1={228.625}
+          y2={1.074}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset={1} stopColor="#999" />
+        </linearGradient>
+        <linearGradient
+          id="g"
+          x1={403.494}
+          x2={403.494}
+          y1={152.723}
+          y2={0.074}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset={1} stopColor="#999" />
+        </linearGradient>
+        <linearGradient
+          id="h"
+          x1={56.494}
+          x2={56.494}
+          y1={152.723}
+          y2={0.074}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset={1} stopColor="#999" />
+        </linearGradient>
+      </defs>
+    </motion.svg>
+  );
+};
+
+const Illustration2 = (props: any) => {
+  return (
+    <motion.svg
+      {...props}
+      width="200"
+      height="444"
+      viewBox="0 0 323 444"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 442.957L209.048 442.957C212.366 442.957 215.508 441.458 217.596 438.879L321.802 310.196"
+        stroke="url(#paint0_linear_290_207)"
+      />
+      <path
+        d="M0 1.19531L209.048 1.19557C212.366 1.19558 215.508 2.69391 217.596 5.27302L321.802 133.956"
+        stroke="url(#paint1_linear_290_207)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_290_207"
+          x1="160.901"
+          y1="442.957"
+          x2="160.901"
+          y2="310.196"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#999999" />
+          <stop offset="1" stopColor="white" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_290_207"
+          x1="160.901"
+          y1="1.19531"
+          x2="160.901"
+          y2="133.956"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#999999" />
+          <stop offset="1" stopColor="white" />
+        </linearGradient>
+      </defs>
+    </motion.svg>
+  );
+};
diff --git a/blocks/hero230.tsx b/blocks/hero230.tsx
new file mode 100644
index 0000000..2740e3b
--- /dev/null
+++ b/blocks/hero230.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import Autoplay from "embla-carousel-autoplay";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Hero230Props {
+  className?: string;
+}
+
+const Hero230 = ({ className }: Hero230Props) => {
+  const images = [
+    "/block-media/shadcnblocks/block/lummi/random14.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    "/block-media/shadcnblocks/block/lummi/landscape5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random15.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/person1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/person2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/person3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/random3.jpeg",
+  ];
+  const logos = [
+    {
+      id: "logo-1",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-2",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-3",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-4",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-5",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-6",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto",
+    },
+    {
+      id: "logo-7",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-8",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-1",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-2",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-3",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-4",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-5",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-6",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto",
+    },
+    {
+      id: "logo-7",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-8",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      className: "h-7 w-auto",
+    },
+  ];
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center justify-center gap-4 text-center">
+        <Button
+          variant="secondary"
+          className="group flex w-fit items-center justify-center gap-3 rounded-full bg-muted/70 px-5 py-1"
+        >
+          <span className="size-2.5 rounded-full bg-foreground" />
+          پلن مناسب برای هر تیم
+                          </Button>
+        <h1 className="font-calSans max-w-3xl text-2xll font-medium tracking-tight text-foreground md:text-2xll">
+          مجموعه بلاک‌های آماده <br /> برای رابط کاربری و استایل‌دهی مدرن
+                          </h1>
+        <p className="mt-3 max-w-xl text-muted-foreground/80">
+          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+        <div className="mt-8 mb-12 flex gap-4">
+          <Button
+            variant="secondary"
+            className="group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>مشاهده مستندات</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="default"
+            className="group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>شروع رایگان</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+        </div>
+
+        <div className="relative mx-auto flex items-center justify-center">
+          <Carousel
+            plugins={[AutoScroll({ playOnInit: true })]}
+            opts={{ loop: true, align: "start" }}
+          >
+            <CarouselContent className="ms-0">
+              {logos.map((logo, index) => (
+                <CarouselItem
+                  key={index}
+                  className="relative me-6 flex h-15 basis-1/2 justify-center ps-0 opacity-30 sm:basis-1/4 md:basis-1/3 lg:basis-1/9"
+                >
+                  <div className="flex flex-col items-center justify-center">
+                    <img
+                      src={logo.image}
+                      alt={logo.description}
+                      className={logo.className}
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="bg-gradient-t o-r absolute inset-y-0 left-0 w-32 from-background to-transparent"></div>
+          <div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent"></div>
+        </div>
+        <div className="relative mx-auto -mt-12 flex items-center justify-center">
+          <Carousel
+            plugins={[Autoplay({ delay: 1500 })]}
+            opts={{ loop: true, align: "start" }}
+          >
+            <CarouselContent>
+              {images.map((image, index) => (
+                <CarouselItem
+                  key={index}
+                  className="relative flex basis-1/2 translate-y-18 cursor-grab justify-center active:cursor-grabbing sm:basis-1/4 md:basis-1/3 lg:basis-1/5"
+                >
+                  <div className="easeOut mt-auto w-full overflow-hidden rounded-t-3xl border transition-all hover:-translate-y-18">
+                    <img
+                      src={image}
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero230 };
diff --git a/blocks/hero231.tsx b/blocks/hero231.tsx
new file mode 100644
index 0000000..234ae51
--- /dev/null
+++ b/blocks/hero231.tsx
@@ -0,0 +1,331 @@
+"use client";
+
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "swiper/css";
+import "swiper/css/effect-cards";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import { ArrowRight } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Autoplay, EffectCoverflow, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Hero231Props {
+  className?: string;
+}
+
+const Hero231 = ({ className }: Hero231Props) => {
+  const [domLoaded, setDomLoaded] = useState(false);
+
+  useEffect(() => {
+    setDomLoaded(true);
+  }, []);
+
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joanna Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+      alt: "تصویر نمونه",
+      name: "Joan Doe",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+      alt: "تصویر نمونه",
+      name: "مریم چناری",
+    },
+  ];
+
+  const logos = [
+    {
+      id: "logo-1",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-2",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-3",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-4",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-5",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-6",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto",
+    },
+    {
+      id: "logo-7",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-8",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-1",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-2",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-3",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-4",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-5",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-6",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto",
+    },
+    {
+      id: "logo-7",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-8",
+      description: "لوگوی شریک",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      className: "h-7 w-auto",
+    },
+  ];
+
+  const css = `
+  .mySwiperHero231 {
+    width: 100%;
+    min-width: 750px;
+    height: 100%;
+    padding-bottom: 50px;
+  } 
+
+  .mySwiperHero231 .swiper-slide {
+    background-position: center;
+    background-size: cover;
+    width: 300px;
+    margin-top: 60px;
+    height: 420px;
+  }
+  
+  .mySwiperHero231 .swiper-slide img {
+    display: block;
+    width: 100%;
+  }
+  
+  .swiper-3d .swiper-slide-shadow-left {
+    background-image: none;
+  }
+  .swiper-3d .swiper-slide-shadow-right{
+    background: none;
+  }
+  .swiper-pagination {
+    bottom: 10px !important;
+    width: 100% !important;
+    left: 0% !important;
+  }
+  .swiper-pagination-bullet-active {
+    background-color: var(--primary);
+  }
+
+  @media (min-width: 768px) {
+    .swiper-pagination {
+      width: fit-content !important;
+      left: 80% !important;
+    }
+  }
+
+  `;
+
+  return (
+    <section className={cn("py-32", className)}>
+      <style>{css}</style>
+      <div className="container mt-4 flex flex-col items-center justify-center gap-4 overflow-hidden text-start xl:mt-14 xl:flex-row xl:overflow-visible">
+        <div className="w-full space-y-10 xl:w-1/2">
+          <Button
+            variant="secondary"
+            className="items-left group flex w-fit justify-center gap-3 rounded-full bg-muted/70 px-5 py-1"
+          >
+            <span className="size-2.5 rounded-full bg-foreground" />
+            پلن مناسب برای هر تیم
+                                </Button>
+          <h1 className="font-calSans mt-12 text-2xll font-medium tracking-tight text-foreground md:text-2xll">
+            مجموعه بلاک‌های آماده <br /> برای رابط کاربری و استایل‌دهی مدرن
+                                </h1>
+          <p className="mt-3 max-w-lg text-muted-foreground/80">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+          <div className="flex gap-4 xl:mt-32">
+            <Button
+              variant="secondary"
+              className="group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+            >
+              <span>مشاهده مستندات</span>
+              <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="default"
+              className="group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+            >
+              <span>شروع رایگان</span>
+              <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+        <div className="relative mt-36 h-145 w-full xl:mt-0 xl:w-3/5">
+          <div className="absolute -top-24 mx-auto flex items-center justify-center">
+            <Carousel
+              plugins={[AutoScroll({ playOnInit: true })]}
+              opts={{ loop: true, align: "start" }}
+            >
+              <CarouselContent className="ms-0">
+                {logos.map((logo, index) => (
+                  <CarouselItem
+                    key={index}
+                    className="relative me-6 flex h-15 basis-1/6 justify-center ps-0 opacity-30 xl:me-12"
+                  >
+                    <div className="flex flex-col items-center justify-center">
+                      <img
+                        src={logo.image}
+                        alt={logo.description}
+                        className={logo.className}
+                      />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+            <div className="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-background to-transparent"></div>
+            <div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent"></div>
+          </div>
+          <div className="mx-auto flex h-full items-center justify-center">
+            {domLoaded && (
+              <Swiper
+                spaceBetween={50}
+                autoplay={{
+                  delay: 1500,
+                  disableOnInteraction: false,
+                }}
+                effect="coverflow"
+                grabCursor={true}
+                centeredSlides={true}
+                loop={true}
+                slidesPerView={2.438}
+                coverflowEffect={{
+                  rotate: 0,
+                  stretch: 0,
+                  depth: 100,
+                  modifier: 2.5,
+                }}
+                className="mySwiperHero231"
+                modules={[EffectCoverflow, Autoplay, Pagination]}
+                pagination={{ clickable: true }}
+              >
+                {images.map((image, index) => (
+                  <SwiperSlide key={index}>
+                    <img
+                      className="h-full w-full overflow-hidden rounded-3xl object-cover shadow-lg"
+                      src={image.src}
+                      alt={image.alt}
+                    />
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            )}
+          </div>
+
+          <div className="absolute top-0 right-0 -z-1 h-full w-full rounded-3xl bg-muted xl:top-1/2 xl:mt-4 xl:h-155 xl:w-9/10 xl:-translate-y-1/2" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero231 };
diff --git a/blocks/hero232.tsx b/blocks/hero232.tsx
new file mode 100644
index 0000000..49793d7
--- /dev/null
+++ b/blocks/hero232.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { LineShadowText } from "@/components/magicui/line-shadow-text";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero232Props {
+  className?: string;
+}
+
+const Hero232 = ({ className }: Hero232Props) => {
+  return (
+    <section
+      className={cn(
+        "relative h-screen w-screen bg-background py-32",
+        className,
+      )}
+    >
+      <div className="relative z-20 container flex items-center justify-center">
+        <div className="flex w-fit flex-col items-center justify-center gap-4 bg-background pb-3 text-center">
+          <Button
+            variant="secondary"
+            className="text-md group mt-24 flex w-fit items-center justify-center gap-3 rounded-full bg-muted/60 px-5 py-1 tracking-tight"
+          >
+            <span className="size-2 rounded-full bg-foreground" />
+            <span>پلن مناسب برای هر تیم</span>
+          </Button>
+          <div className="relative flex max-w-4xl items-center justify-center text-center text-2xll font-medium tracking-tight md:text-2xll">
+            <h1 className="relative z-10 tracking-tighter">
+              <span className="ms-3 text-muted-foreground/50">
+                تنها اپی که برای ماندن
+              </span>
+              <LineShadowText> بهره‌وری </LineShadowText>
+              <span className="text-muted-foreground/50"> توسعه سریع</span>
+              <span>.</span>
+            </h1>
+            <div className="absolute z-9 h-[105%] w-[85%] bg-background" />
+          </div>
+          <p className="mt-5 max-w-xl bg-background text-muted-foreground/80">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+          <div className="flex gap-4">
+            <Button
+              variant="secondary"
+              className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+            >
+              <span>مشاهده مستندات</span>
+              <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+            </Button>
+            <Button
+              variant="default"
+              className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+            >
+              <span>شروع رایگان</span>
+              <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <Illustration1
+        initial={{ opacity: 0, y: -100 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, ease: [0, 0, 0, 1.12] }}
+        className="absolute top-6 left-0 hidden text-orange-500 lg:block"
+      />
+
+      <Illustration1
+        initial={{ opacity: 0, y: -100 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, ease: [0, 0, 0, 1.12] }}
+        className="absolute top-32 right-0 hidden scale-x-[-1] scale-y-[-1] text-orange-500 lg:block"
+      />
+    </section>
+  );
+};
+
+export { Hero232 };
+
+const Illustration1 = (props: any) => {
+  return (
+    <svg
+      {...props}
+      width="571"
+      height="560"
+      viewBox="0 0 571 560"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke="#cccccc"
+        strokeWidth="1.9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeOpacity="0.2"
+        d="M166.571 320.89L166.337 320.448L166.571 320.89ZM-185.483 414.753L-185.029 414.961L-185.483 414.753ZM-90.798 550.017L-90.541 550.446L-90.541 550.446L-90.798 550.017ZM251.609 358.688L251.447 358.215L251.447 358.215L251.609 358.688ZM569.859 394.354C570.073 394.528 570.388 394.496 570.562 394.281C570.736 394.067 570.703 393.752 570.489 393.578L569.859 394.354ZM166.571 320.89L166.337 320.448C84.8815 363.503 5.15738 369.122 -58.3672 372.888C-90.1101 374.77 -117.856 376.19 -139.709 381.614C-161.58 387.041 -177.656 396.504 -185.937 414.544L-185.483 414.753L-185.029 414.961C-176.926 397.312 -161.193 387.976 -139.469 382.584C-117.727 377.188 -90.0926 375.77 -58.308 373.886C5.22228 370.12 85.1407 364.497 166.804 321.332L166.571 320.89ZM-185.483 414.753L-185.937 414.544C-213.037 473.573 -201.627 514.972 -177.119 537.918C-152.665 560.814 -115.234 565.241 -90.541 550.446L-90.798 550.017L-91.055 549.588C-115.323 564.129 -152.27 559.813 -176.436 537.188C-200.548 514.612 -212 473.711 -185.029 414.961L-185.483 414.753ZM-90.798 550.017L-90.541 550.446C-58.5271 531.264 -27.9166 512.042 1.68716 493.418C31.2925 474.794 59.8897 456.769 87.8844 439.978C143.875 406.396 197.433 377.763 251.771 359.161L251.609 358.688L251.447 358.215C197.009 376.851 143.38 405.527 87.37 439.121C59.3643 455.918 30.7575 473.949 1.15467 492.572C-28.4497 511.196 -59.0516 530.413 -91.055 549.588L-90.798 550.017ZM251.609 358.688L251.771 359.161C376.455 316.476 485.473 325.788 569.859 394.354L570.174 393.966L570.489 393.578C485.756 324.729 376.346 315.457 251.447 358.215L251.609 358.688ZM-3.19002 2.72941L-3.12782 3.22553C104.974 -10.3276 201.201 40.6009 243.453 109.09C264.574 143.326 272.197 181.928 261.119 219.065C250.041 256.203 220.237 291.959 166.337 320.448L166.571 320.89L166.804 321.332C220.873 292.754 250.903 256.812 262.077 219.351C273.252 181.891 265.545 142.995 244.304 108.565C201.832 39.719 105.21 -11.365 -3.25222 2.23329L-3.19002 2.72941Z"
+      />
+      <motion.path
+        initial={{ pathLength: 0, opacity: 0, pathOffset: 0.3 }}
+        animate={{
+          pathLength: 1,
+          pathOffset: 0,
+          opacity: 1,
+        }}
+        transition={{
+          duration: 2,
+          ease: "easeInOut",
+          opacity: { duration: 0.5 },
+        }}
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M166.571 320.89L166.337 320.448L166.571 320.89ZM-185.483 414.753L-185.029 414.961L-185.483 414.753ZM-90.798 550.017L-90.541 550.446L-90.541 550.446L-90.798 550.017ZM251.609 358.688L251.447 358.215L251.447 358.215L251.609 358.688ZM569.859 394.354C570.073 394.528 570.388 394.496 570.562 394.281C570.736 394.067 570.703 393.752 570.489 393.578L569.859 394.354ZM166.571 320.89L166.337 320.448C84.8815 363.503 5.15738 369.122 -58.3672 372.888C-90.1101 374.77 -117.856 376.19 -139.709 381.614C-161.58 387.041 -177.656 396.504 -185.937 414.544L-185.483 414.753L-185.029 414.961C-176.926 397.312 -161.193 387.976 -139.469 382.584C-117.727 377.188 -90.0926 375.77 -58.308 373.886C5.22228 370.12 85.1407 364.497 166.804 321.332L166.571 320.89ZM-185.483 414.753L-185.937 414.544C-213.037 473.573 -201.627 514.972 -177.119 537.918C-152.665 560.814 -115.234 565.241 -90.541 550.446L-90.798 550.017L-91.055 549.588C-115.323 564.129 -152.27 559.813 -176.436 537.188C-200.548 514.612 -212 473.711 -185.029 414.961L-185.483 414.753ZM-90.798 550.017L-90.541 550.446C-58.5271 531.264 -27.9166 512.042 1.68716 493.418C31.2925 474.794 59.8897 456.769 87.8844 439.978C143.875 406.396 197.433 377.763 251.771 359.161L251.609 358.688L251.447 358.215C197.009 376.851 143.38 405.527 87.37 439.121C59.3643 455.918 30.7575 473.949 1.15467 492.572C-28.4497 511.196 -59.0516 530.413 -91.055 549.588L-90.798 550.017ZM251.609 358.688L251.771 359.161C376.455 316.476 485.473 325.788 569.859 394.354L570.174 393.966L570.489 393.578C485.756 324.729 376.346 315.457 251.447 358.215L251.609 358.688ZM-3.19002 2.72941L-3.12782 3.22553C104.974 -10.3276 201.201 40.6009 243.453 109.09C264.574 143.326 272.197 181.928 261.119 219.065C250.041 256.203 220.237 291.959 166.337 320.448L166.571 320.89L166.804 321.332C220.873 292.754 250.903 256.812 262.077 219.351C273.252 181.891 265.545 142.995 244.304 108.565C201.832 39.719 105.21 -11.365 -3.25222 2.23329L-3.19002 2.72941Z"
+      />
+    </svg>
+  );
+};
diff --git a/blocks/hero233.tsx b/blocks/hero233.tsx
new file mode 100644
index 0000000..1580409
--- /dev/null
+++ b/blocks/hero233.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { LineShadowText } from "@/components/magicui/line-shadow-text";
+import { Button } from "@/components/ui/button";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+interface Hero233Props {
+  className?: string;
+}
+
+const Hero233 = ({ className }: Hero233Props) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <section
+      className={cn(
+        "relative h-screen w-screen overflow-hidden bg-background py-32",
+        className,
+      )}
+    >
+      <div className="relative z-20 container flex flex-col items-center justify-center gap-4 py-10 text-center md:mt-22">
+        <div className="absolute -z-1 size-full max-w-3xl bg-background blur-xl" />
+        <Button
+          variant="secondary"
+          className="text-md group my-16 flex w-fit items-center justify-center gap-3 rounded-full bg-muted/60 px-5 py-1 tracking-tight md:my-5"
+        >
+          <span className="size-2 rounded-full bg-foreground" />
+          <span>پلن مناسب برای هر تیم</span>
+        </Button>
+        <div className="relative flex max-w-4xl items-center justify-center text-center text-2xll font-medium tracking-tight md:text-2xll">
+          <h1 className="relative z-10">
+            <span className="ms-3 text-muted-foreground/50">
+              تنها اپی که برای ماندن
+            </span>
+            <LineShadowText> بهره‌وری </LineShadowText>
+            <span className="text-muted-foreground/50"> توسعه سریع</span>
+            <span>.</span>
+          </h1>
+        </div>
+
+        <p className="mt-5 max-w-xl bg-background text-muted-foreground/80">
+          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+        <div className="my-5 flex gap-4">
+          <Button
+            variant="secondary"
+            className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>مشاهده مستندات</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+          <Button
+            variant="default"
+            className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+          >
+            <span>شروع رایگان</span>
+            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="absolute top-0 flex size-full justify-center">
+        {Array.from({ length: isMobile ? 7 : 18 }).map((_, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "100%" }}
+            transition={{
+              duration: 0.8,
+              delay: i * 0.05,
+              ease: "easeOut",
+            }}
+            className="w-24 border-l bg-gradient-to-b to-transparent transition-all ease-in-out hover:scale-110 hover:from-black/2"
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Hero233 };
diff --git a/blocks/hero234.tsx b/blocks/hero234.tsx
new file mode 100644
index 0000000..b277e0a
--- /dev/null
+++ b/blocks/hero234.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const galleryImages = [
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+  ],
+  [
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+  ],
+];
+
+interface Hero234Props {
+  className?: string;
+}
+
+const Hero234 = ({ className }: Hero234Props) => {
+  return (
+    <section
+      className={cn(
+        "relative min-h-screen overflow-hidden bg-background",
+        className,
+      )}
+    >
+      <div className="absolute inset-0 flex flex-col justify-center gap-4">
+        {galleryImages.map((row, rowIndex) => (
+          <motion.div
+            key={rowIndex}
+            className="flex gap-4 will-change-transform"
+            animate={{
+              x: rowIndex === 1 ? [-1920, 0] : [0, -1920],
+            }}
+            transition={{
+              duration: 30,
+              repeat: Infinity,
+              ease: "linear",
+            }}
+          >
+            {[...row, ...row, ...row].map((image, imageIndex) => (
+              <motion.div
+                key={`${rowIndex}-${imageIndex}`}
+                className="relative flex-shrink-0 overflow-hidden rounded-lg"
+                style={{
+                  width: rowIndex === 1 ? "280px" : "240px",
+                  height: rowIndex === 1 ? "350px" : "300px",
+                }}
+                whileHover={{ scale: 1.05 }}
+                transition={{ duration: 0.3 }}
+              >
+                <img
+                  src={image}
+                  alt="تصویر نمونه"
+                  className="h-full w-full object-cover"
+                />
+              </motion.div>
+            ))}
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Left side masks */}
+      <div className="absolute top-0 left-0 z-10 h-full w-[160px] bg-gradient-to-r from-background to-transparent md:w-[200px]" />
+
+      {/* Right side masks */}
+      <div className="absolute top-0 right-0 z-10 h-full w-[160px] bg-gradient-to-l from-background to-transparent md:w-[200px]" />
+
+      <div className="relative z-20 flex min-h-screen items-center justify-center">
+        <motion.div
+          className="rounded-lg bg-black/60 p-8 backdrop-blur-md md:p-12"
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+        >
+          <motion.h1
+            className="text-3xl leading-tight text-white md:text-2xll lg:text-2xll"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.7 }}
+          >
+            استودیویی برای <br />
+            طراحی دیجیتال <br />
+            می‌آفریند
+                                </motion.h1>
+
+          <motion.div
+            className="mt-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 1 }}
+          >
+            <Button size="lg" variant="secondary">
+              مشاهده مطالعات موردی
+                                      </Button>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero234 };
diff --git a/blocks/hero234a.tsx b/blocks/hero234a.tsx
new file mode 100644
index 0000000..00e5683
--- /dev/null
+++ b/blocks/hero234a.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const galleryImages = [
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+  ],
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+  ],
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+  ],
+];
+
+interface Hero234aProps {
+  className?: string;
+}
+
+const Hero234a = ({ className }: Hero234aProps) => {
+  return (
+    <section
+      className={cn(
+        "relative min-h-screen overflow-hidden bg-background",
+        className,
+      )}
+    >
+      {/* Contained image gallery */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="relative h-[500px] w-[900px] overflow-hidden rounded-2xl md:h-[600px] md:w-[1200px]">
+          <div className="absolute inset-0 flex flex-col justify-center gap-3">
+            {galleryImages.map((row, rowIndex) => (
+              <motion.div
+                key={rowIndex}
+                className="flex gap-3 will-change-transform"
+                animate={{
+                  x: rowIndex % 2 === 0 ? [-3200, 0] : [0, -3200],
+                }}
+                transition={{
+                  duration: 25 + rowIndex * 5,
+                  repeat: Infinity,
+                  ease: "linear",
+                }}
+              >
+                {[...row, ...row, ...row, ...row].map((image, imageIndex) => (
+                  <motion.div
+                    key={`${rowIndex}-${imageIndex}`}
+                    className="relative flex-shrink-0 overflow-hidden rounded-lg"
+                    style={{
+                      width: "180px",
+                      height: "180px",
+                    }}
+                    whileHover={{ scale: 1.05, rotate: 5 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <img
+                      src={image}
+                      alt="تصویر نمونه"
+                      className="h-full w-full object-cover"
+                    />
+                  </motion.div>
+                ))}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile-friendly ellipse mask */}
+      <div className="pointer-events-none absolute inset-0 z-10">
+        {/* Light masking on mobile, stronger on desktop */}
+        <div className="absolute inset-x-0 top-0 h-[100px] bg-gradient-to-b from-background/80 via-background/40 to-transparent md:h-[200px] md:from-background md:via-background/80" />
+        <div className="absolute inset-x-0 bottom-0 h-[100px] bg-gradient-to-t from-background/80 via-background/40 to-transparent md:h-[200px] md:from-background md:via-background/80" />
+        <div className="absolute inset-y-0 left-0 w-[80px] bg-gradient-to-r from-background/80 via-background/40 to-transparent md:w-[150px] md:from-background md:via-background/80" />
+        <div className="absolute inset-y-0 right-0 w-[80px] bg-gradient-to-l from-background/80 via-background/40 to-transparent md:w-[150px] md:from-background md:via-background/80" />
+
+        {/* Corner masks - lighter on mobile */}
+        <div className="absolute top-0 left-0 h-[150px] w-[150px] bg-gradient-to-br from-background/60 via-background/30 to-transparent md:h-[250px] md:w-[250px] md:from-background/90 md:via-background/60" />
+        <div className="absolute top-0 right-0 h-[150px] w-[150px] bg-gradient-to-bl from-background/60 via-background/30 to-transparent md:h-[250px] md:w-[250px] md:from-background/90 md:via-background/60" />
+        <div className="absolute bottom-0 left-0 h-[150px] w-[150px] bg-gradient-to-tr from-background/60 via-background/30 to-transparent md:h-[250px] md:w-[250px] md:from-background/90 md:via-background/60" />
+        <div className="absolute right-0 bottom-0 h-[150px] w-[150px] bg-gradient-to-tl from-background/60 via-background/30 to-transparent md:h-[250px] md:w-[250px] md:from-background/90 md:via-background/60" />
+      </div>
+
+      <div className="relative z-20 flex min-h-screen items-center justify-center">
+        <motion.div
+          className="rounded-lg bg-black/60 p-8 backdrop-blur-md md:p-12"
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+        >
+          <motion.h1
+            className="text-3xl leading-tight text-white md:text-2xll lg:text-2xll"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.7 }}
+          >
+            استودیویی برای <br />
+            طراحی دیجیتال <br />
+            می‌آفریند
+                                </motion.h1>
+
+          <motion.div
+            className="mt-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 1 }}
+          >
+            <Button size="lg" variant="secondary">
+              مشاهده مطالعات موردی
+                                      </Button>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero234a };
diff --git a/blocks/hero234b.tsx b/blocks/hero234b.tsx
new file mode 100644
index 0000000..8930027
--- /dev/null
+++ b/blocks/hero234b.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const galleryColumns = [
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+  ],
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+  ],
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+  ],
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+  ],
+  [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+  ],
+];
+
+interface Hero234bProps {
+  className?: string;
+}
+
+const Hero234b = ({ className }: Hero234bProps) => {
+  return (
+    <section
+      className={cn(
+        "relative min-h-screen overflow-hidden bg-background",
+        className,
+      )}
+    >
+      <div className="absolute inset-0 flex justify-center gap-6">
+        {galleryColumns.map((column, columnIndex) => (
+          <motion.div
+            key={columnIndex}
+            className="flex flex-col gap-6 will-change-transform"
+            animate={{
+              y: columnIndex % 2 === 0 ? [-1200, 0] : [0, -1200],
+            }}
+            transition={{
+              duration: 20 + columnIndex * 3,
+              repeat: Infinity,
+              ease: "linear",
+            }}
+          >
+            {[...column, ...column, ...column].map((image, imageIndex) => (
+              <motion.div
+                key={`${columnIndex}-${imageIndex}`}
+                className="relative flex-shrink-0 overflow-hidden rounded-xl"
+                style={{
+                  width: columnIndex === 2 ? "200px" : "160px",
+                  height: columnIndex === 2 ? "280px" : "220px",
+                }}
+                whileHover={{
+                  scale: 1.05,
+                  rotate: columnIndex % 2 === 0 ? 2 : -2,
+                  zIndex: 20,
+                }}
+                transition={{ duration: 0.3 }}
+              >
+                <img
+                  src={image}
+                  alt="تصویر نمونه"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
+              </motion.div>
+            ))}
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Top and bottom masks */}
+      <div className="absolute top-0 left-0 z-10 h-[200px] w-full bg-gradient-to-b from-background via-background/80 to-transparent md:h-[300px]" />
+      <div className="absolute bottom-0 left-0 z-10 h-[200px] w-full bg-gradient-to-t from-background via-background/80 to-transparent md:h-[300px]" />
+
+      {/* Side masks for additional focus */}
+      <div className="absolute top-0 left-0 z-10 h-full w-[80px] bg-gradient-to-r from-background/60 to-transparent md:w-[120px]" />
+      <div className="absolute top-0 right-0 z-10 h-full w-[80px] bg-gradient-to-l from-background/60 to-transparent md:w-[120px]" />
+
+      <div className="relative z-20 flex min-h-screen items-center justify-center">
+        <motion.div
+          className="max-w-md rounded-xl bg-black/70 p-8 text-center backdrop-blur-lg md:p-12"
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5, type: "spring" }}
+        >
+          <motion.h1
+            className="text-3xl leading-tight text-white md:text-2xll lg:text-2xll"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.7 }}
+          >
+            استودیویی برای <br />
+            طراحی دیجیتال <br />
+            می‌آفریند
+                                </motion.h1>
+
+          <motion.p
+            className="mt-4 text-white/80"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6, delay: 0.9 }}
+          >
+            جایی که ایده‌ها به تجربه‌های دیجیتال ماندگار تبدیل می‌شوند.
+                                </motion.p>
+
+          <motion.div
+            className="mt-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 1 }}
+          >
+            <Button size="lg" variant="secondary" className="w-full">
+              مشاهده مطالعات موردی
+                                      </Button>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero234b };
diff --git a/blocks/hero235.tsx b/blocks/hero235.tsx
new file mode 100644
index 0000000..b66b788
--- /dev/null
+++ b/blocks/hero235.tsx
@@ -0,0 +1,94 @@
+import { ArrowDown, BookOpen, LayoutGrid, Sparkles } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero235Props {
+  className?: string;
+}
+
+const SERVICES = [
+  {
+    icon: Sparkles,
+    title: "هویت بصری",
+    description:
+      "هویت بصری منسجمی طراحی می‌کنیم که به ماندگاری برند و ایجاد ارتباط مؤثر با مخاطبان کمک می‌کند.",
+  },
+  {
+    icon: LayoutGrid,
+    title: "تجربه‌های تعاملی",
+    description:
+      "با ترکیب طراحی، فناوری و تعامل، تجربه‌هایی ماندگار برای کاربران خلق می‌کنیم.",
+  },
+  {
+    icon: BookOpen,
+    title: "کارگاه‌ها",
+    description:
+      "کارگاه‌های آموزشی و مشاوره‌ای متناسب با نیاز تیم شما برگزار می‌کنیم.",
+  },
+];
+
+const Hero235 = ({ className }: Hero235Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex h-dvh items-center justify-center overflow-hidden bg-background py-32",
+        className,
+      )}
+    >
+      <div aria-hidden={true}>
+        <div className="absolute -right-0 -bottom-[30rem] size-[35rem] rounded-full bg-rose-400 opacity-40 blur-[5rem] md:-right-[2rem] md:-bottom-[50rem] md:size-[55rem] dark:opacity-20" />
+        <div className="absolute -right-[20rem] -bottom-[20rem] size-[35rem] rounded-full bg-sky-500 opacity-40 blur-[5rem] md:-right-[32rem] md:-bottom-[36rem] md:size-[55rem] dark:opacity-20" />
+        <div
+          className="pointer-events-none absolute inset-0 z-0 opacity-40"
+          style={{
+            backgroundImage:
+              "url(/block-media/shadcnblocks/block/noise.png)",
+            backgroundRepeat: "repeat",
+          }}
+        />
+      </div>
+      <div className="relative container flex h-full flex-col justify-between">
+        <div className="flex flex-1 items-center justify-center">
+          <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
+            <h1 className="text-xl font-semibold tracking-tight text-balance text-foreground md:text-2xll lg:text-2xll">
+              استودیوی طراحی و توسعه محصولات دیجیتال
+                                      </h1>
+            <p className="mt-8 max-w-xl text-pretty text-muted-foreground md:text-lg">
+              رابط‌های کاربری و تجربه‌های دیجیتالی طراحی می‌کنیم که علاوه بر زیبایی، عملکردی سریع، مقیاس‌پذیر و کاربرپسند داشته باشند.
+                                      </p>
+            <Button size="lg" className="mt-10">
+              مشاهده مطالعات موردی
+                                        <ArrowDown className="shrink-0" aria-hidden />
+            </Button>
+          </div>
+        </div>
+        <div className="pt-16">
+          <div className="grid gap-12 lg:grid-cols-3 lg:gap-0">
+            {SERVICES.map((service) => {
+              const Icon = service.icon;
+              return (
+                <div
+                  key={service.title}
+                  className={cn(
+                    "flex flex-col border-l border-primary px-6 md:px-8",
+                  )}
+                >
+                  <Icon className="mb-4 size-6" aria-hidden />
+                  <h2 className="font-semibold text-foreground">
+                    {service.title}
+                  </h2>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    {service.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero235 };
diff --git a/blocks/hero236.tsx b/blocks/hero236.tsx
new file mode 100644
index 0000000..3baacae
--- /dev/null
+++ b/blocks/hero236.tsx
@@ -0,0 +1,439 @@
+"use client";
+
+import { Shield, Users, Zap } from "lucide-react";
+import React, { startTransition, useEffect, useRef, useState } from "react";
+import { renderToString } from "react-dom/server";
+
+import { cn } from "@/lib/utils";
+
+const TECH_ICONS = [
+  "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
+  "/block-media/shadcnblocks/block/logos/react.svg",
+  "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+  "/block-media/shadcnblocks/block/logos/vue-icon.svg",
+  "/block-media/shadcnblocks/block/logos/svelte.svg",
+  "/block-media/shadcnblocks/block/logos/solidjs.svg",
+  "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+  "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+  "/block-media/shadcnblocks/block/logos/vite-icon.svg",
+  "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+  "/block-media/shadcnblocks/block/logos/github-icon-black.svg",
+  "/block-media/shadcnblocks/block/logos/graphql.svg",
+  "/block-media/shadcnblocks/block/logos/postgresql.svg",
+  "/block-media/shadcnblocks/block/logos/mongodb.svg",
+  "/block-media/shadcnblocks/block/logos/redis.svg",
+  "/block-media/shadcnblocks/block/logos/python-icon.svg",
+  "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
+  "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
+  "/block-media/shadcnblocks/block/logos/cursor-icon.svg",
+  "/block-media/shadcnblocks/block/logos/openai-icon.svg",
+  "/block-media/shadcnblocks/block/logos/claude-icon.svg",
+  "/block-media/shadcnblocks/block/logos/gemini-icon.svg",
+  "/block-media/shadcnblocks/block/logos/laravel.svg",
+  "/block-media/shadcnblocks/block/logos/remix-icon.svg",
+  "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+  "/block-media/shadcnblocks/block/logos/nuxt.svg",
+  "/block-media/shadcnblocks/block/logos/neon.svg",
+  "/block-media/shadcnblocks/block/logos/redwoodjs.svg",
+  "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
+  "/block-media/shadcnblocks/block/logos/brave-icon.svg",
+];
+
+interface Hero236Props {
+  className?: string;
+}
+
+const Hero236 = ({ className }: Hero236Props) => {
+  const stats = [
+    {
+      icon: <Users className="size-6 stroke-1 opacity-20 md:size-10" />,
+      title: "+100k",
+      description: "کاربر روزانه",
+    },
+    {
+      icon: <Zap className="size-6 stroke-1 opacity-20 md:size-10" />,
+      title: "99.9%",
+      description: "آپتایم",
+    },
+    {
+      icon: <Shield className="size-6 stroke-1 opacity-20 md:size-10" />,
+      title: "24/7",
+      description: "پشتیبانی",
+    },
+  ];
+
+  const images = TECH_ICONS;
+
+  return (
+    <section
+      className={cn("relative w-screen overflow-hidden py-32", className)}
+    >
+      <div className="container flex flex-col lg:flex-row">
+        <div className="mt-10 space-y-12 lg:w-1/2">
+          <p className="w-fit rounded-full bg-muted px-4 py-1 text-sm uppercase">
+            چرا ما؟
+          </p>
+          <h1 className="font-calSans mt-3 max-w-lg text-2xll font-medium lg:text-2xll">
+            <span className="opacity-30">همه کامپوننت‌هایی</span> که نیاز دارید
+          </h1>
+          <p className="max-w-lg text-lg text-muted-foreground">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+
+          <ul className="mt-18 flex flex-wrap gap-9">
+            {stats.map((stat, index) => (
+              <li key={stat.title} className="flex items-center gap-4">
+                <div className="flex size-12 items-center justify-center rounded-2xl border md:size-18">
+                  {stat.icon}
+                </div>
+                <div>
+                  <h2 className="font-calSans text-xl font-medium md:text-3xl">
+                    {stat.title}
+                  </h2>
+                  <p className="text-sm md:text-base">{stat.description}</p>
+                </div>
+                {index !== stats.length - 1 && (
+                  <div className="ms-4 h-full w-px bg-gradient-to-t from-primary via-border to-transparent" />
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="flex h-[500px] w-full items-center justify-center overflow-hidden lg:w-1/2">
+          <div className="absolute flex h-full w-full items-center justify-center">
+            <IconCloud images={images} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero236 };
+
+// Below is the modified component from magic UI
+// Original source: npx shadcn@latest add npx shadcn@latest add "https://magicui.design/r/icon-cloud"
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+interface Icon {
+  x: number;
+  y: number;
+  z: number;
+  scale: number;
+  opacity: number;
+  id: number;
+}
+
+interface IconCloudProps {
+  icons?: React.ReactNode[];
+  images?: string[];
+}
+
+function easeOutCubic(t: number): number {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+export function IconCloud({ icons, images }: IconCloudProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [iconPositions, setIconPositions] = useState<Icon[]>([]);
+  const [rotation] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 });
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [targetRotation, setTargetRotation] = useState<{
+    x: number;
+    y: number;
+    startX: number;
+    startY: number;
+    distance: number;
+    startTime: number;
+    duration: number;
+  } | null>(null);
+  const animationFrameRef = useRef<number>(0);
+  const rotationRef = useRef(rotation);
+  const iconCanvasesRef = useRef<HTMLCanvasElement[]>([]);
+  const imagesLoadedRef = useRef<boolean[]>([]);
+
+  // Create icon canvases once when icons/images change
+  useEffect(() => {
+    if (!icons && !images) return;
+
+    const items = icons || images || [];
+    imagesLoadedRef.current = new Array(items.length).fill(false);
+
+    const newIconCanvases = items.map((item, index) => {
+      const offscreen = document.createElement("canvas");
+      offscreen.width = 40;
+      offscreen.height = 40;
+      const offCtx = offscreen.getContext("2d");
+
+      if (offCtx) {
+        if (images) {
+          // Handle image URLs directly
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          img.src = items[index] as string;
+          img.onload = () => {
+            offCtx.clearRect(0, 0, offscreen.width, offscreen.height);
+
+            // Create circular clipping path
+            offCtx.beginPath();
+            offCtx.arc(20, 20, 20, 0, Math.PI * 2);
+            offCtx.closePath();
+            offCtx.clip();
+
+            // Draw the image
+            offCtx.drawImage(img, 0, 0, 40, 40);
+
+            imagesLoadedRef.current[index] = true;
+          };
+        } else {
+          // Handle SVG icons
+          offCtx.scale(0.4, 0.4);
+          const svgString = renderToString(item as React.ReactElement);
+          const img = new Image();
+          img.src = "data:image/svg+xml;base64," + btoa(svgString);
+          img.onload = () => {
+            offCtx.clearRect(0, 0, offscreen.width, offscreen.height);
+            offCtx.drawImage(img, 0, 0);
+            imagesLoadedRef.current[index] = true;
+          };
+        }
+      }
+      return offscreen;
+    });
+
+    iconCanvasesRef.current = newIconCanvases;
+  }, [icons, images]);
+
+  // Generate initial icon positions on a sphere
+  useEffect(() => {
+    const items = icons || images || [];
+    const newIcons: Icon[] = [];
+    const numIcons = items.length || 20;
+
+    // Fibonacci sphere parameters
+    const offset = 2 / numIcons;
+    const increment = Math.PI * (3 - Math.sqrt(5));
+
+    for (let i = 0; i < numIcons; i++) {
+      const y = i * offset - 1 + offset / 2;
+      const r = Math.sqrt(1 - y * y);
+      const phi = i * increment;
+
+      const x = Math.cos(phi) * r;
+      const z = Math.sin(phi) * r;
+
+      newIcons.push({
+        x: x * 180,
+        y: y * 180,
+        z: z * 180,
+        scale: 1,
+        opacity: 1,
+        id: i,
+      });
+    }
+    startTransition(() => {
+      setIconPositions(newIcons);
+    });
+  }, [icons, images]);
+
+  // Handle mouse events
+  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect || !canvasRef.current) return;
+
+    const x = e.clientX + rect.left;
+    const y = e.clientY + rect.top;
+
+    const ctx = canvasRef.current.getContext("2d");
+    if (!ctx) return;
+
+    iconPositions.forEach((icon) => {
+      const cosX = Math.cos(rotationRef.current.x);
+      const sinX = Math.sin(rotationRef.current.x);
+      const cosY = Math.cos(rotationRef.current.y);
+      const sinY = Math.sin(rotationRef.current.y);
+
+      const rotatedX = icon.x * cosY - icon.z * sinY;
+      const rotatedZ = icon.x * sinY + icon.z * cosY;
+      const rotatedY = icon.y * cosX + rotatedZ * sinX;
+
+      const screenX = canvasRef.current!.width / 2 + rotatedX;
+      const screenY = canvasRef.current!.height / 2 + rotatedY;
+
+      const scale = (rotatedZ + 200) / 300;
+      const radius = 20 * scale;
+      const dx = x - screenX;
+      const dy = y - screenY;
+
+      if (dx * dx + dy * dy < radius * radius) {
+        const targetX = -Math.atan2(
+          icon.y,
+          Math.sqrt(icon.x * icon.x + icon.z * icon.z),
+        );
+        const targetY = Math.atan2(icon.x, icon.z);
+
+        const currentX = rotationRef.current.x;
+        const currentY = rotationRef.current.y;
+        const distance = Math.sqrt(
+          Math.pow(targetX - currentX, 2) + Math.pow(targetY - currentY, 2),
+        );
+
+        const duration = Math.min(2000, Math.max(800, distance * 1000));
+
+        setTargetRotation({
+          x: targetX,
+          y: targetY,
+          startX: currentX,
+          startY: currentY,
+          distance,
+          startTime: performance.now(),
+          duration,
+        });
+        return;
+      }
+    });
+
+    setIsDragging(true);
+    setLastMousePos({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (rect) {
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      setMousePos({ x, y });
+    }
+
+    if (isDragging) {
+      const deltaX = e.clientX - lastMousePos.x;
+      const deltaY = e.clientY - lastMousePos.y;
+
+      rotationRef.current = {
+        x: rotationRef.current.x + deltaY * 0.002,
+        y: rotationRef.current.y + deltaX * 0.002,
+      };
+
+      setLastMousePos({ x: e.clientX, y: e.clientY });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  // Animation and rendering
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
+      const dx = mousePos.x + centerX;
+      const dy = mousePos.y + centerY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      const speed = 0.001 + (distance / maxDistance) * 0.0015;
+
+      if (targetRotation) {
+        const elapsed = performance.now() - targetRotation.startTime;
+        const progress = Math.min(1, elapsed / targetRotation.duration);
+        const easedProgress = easeOutCubic(progress);
+
+        rotationRef.current = {
+          x:
+            targetRotation.startX +
+            (targetRotation.x - targetRotation.startX) * easedProgress,
+          y:
+            targetRotation.startY +
+            (targetRotation.y - targetRotation.startY) * easedProgress,
+        };
+
+        if (progress >= 1) {
+          setTargetRotation(null);
+        }
+      } else if (!isDragging) {
+        rotationRef.current = {
+          x: rotationRef.current.x + (dy / canvas.height) * speed,
+          y: rotationRef.current.y + (dx / canvas.width) * speed,
+        };
+      }
+
+      iconPositions.forEach((icon, index) => {
+        const cosX = Math.cos(rotationRef.current.x);
+        const sinX = Math.sin(rotationRef.current.x);
+        const cosY = Math.cos(rotationRef.current.y);
+        const sinY = Math.sin(rotationRef.current.y);
+
+        const rotatedX = icon.x * cosY - icon.z * sinY;
+        const rotatedZ = icon.x * sinY + icon.z * cosY;
+        const rotatedY = icon.y * cosX + rotatedZ * sinX;
+
+        const scale = (rotatedZ + 200) / 300;
+        const opacity = Math.max(0.2, Math.min(1, (rotatedZ + 150) / 200));
+
+        ctx.save();
+        ctx.translate(
+          canvas.width / 2 + rotatedX,
+          canvas.height / 2 + rotatedY,
+        );
+        ctx.scale(scale, scale);
+        ctx.globalAlpha = opacity;
+
+        if (icons || images) {
+          // Only try to render icons/images if they exist
+          if (
+            iconCanvasesRef.current[index] &&
+            imagesLoadedRef.current[index]
+          ) {
+            ctx.drawImage(iconCanvasesRef.current[index], -20, -20, 50, 50);
+          }
+        } else {
+          // Show numbered circles if no icons/images are provided
+          ctx.beginPath();
+          ctx.arc(0, 0, 20, 0, Math.PI * 2);
+          ctx.fillStyle = "#4444ff";
+          ctx.fill();
+          ctx.fillStyle = "white";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.font = "16px Arial";
+          ctx.fillText(`${icon.id + 1}`, 0, 0);
+        }
+
+        ctx.restore();
+      });
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [icons, images, iconPositions, isDragging, mousePos, targetRotation]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={700}
+      height={600}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      className="rounded-lg"
+      aria-label="ابر آیکون سه‌بعدی تعاملی"
+      role="img"
+    />
+  );
+}
diff --git a/blocks/hero237.tsx b/blocks/hero237.tsx
new file mode 100644
index 0000000..fbae9b9
--- /dev/null
+++ b/blocks/hero237.tsx
@@ -0,0 +1,137 @@
+import { Shield, Users, Zap } from "lucide-react";
+import React from "react";
+
+import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
+import { cn } from "@/lib/utils";
+
+interface Hero237Props {
+  className?: string;
+}
+
+const Hero237 = ({ className }: Hero237Props) => {
+  const circle1Images = [
+    "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+    "/block-media/shadcnblocks/block/logos/react-icon.svg",
+    "/block-media/shadcnblocks/block/logos/vue-icon.svg",
+    "/block-media/shadcnblocks/block/logos/vite-icon.svg",
+    "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+  ];
+
+  const circle2Images = [
+    "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
+    "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+    "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+    "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+  ];
+
+  const circle3Images = [
+    "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+    "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    "/block-media/shadcnblocks/block/logos/laravel-icon.svg",
+  ];
+
+  const circle4Images = [
+    "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+    "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+    "/block-media/shadcnblocks/block/logos/brave-icon.svg",
+    "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
+    "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+    "/block-media/shadcnblocks/block/logos/google-icon.svg",
+  ];
+
+  const stats = [
+    {
+      icon: <Users className="size-6 stroke-1 opacity-20 md:size-10" />,
+      title: "+100k",
+      description: "کاربر روزانه",
+    },
+    {
+      icon: <Zap className="size-6 stroke-1 opacity-20 md:size-10" />,
+      title: "99.9%",
+      description: "آپتایم",
+    },
+    {
+      icon: <Shield className="size-6 stroke-1 opacity-20 md:size-10" />,
+      title: "24/7",
+      description: "پشتیبانی",
+    },
+  ];
+
+  return (
+    <section
+      className={cn(
+        "relative w-screen overflow-hidden border border-b py-32",
+        className,
+      )}
+    >
+      <div className="relative container flex flex-col lg:flex-row">
+        <div className="mt-10 space-y-12 lg:w-1/2">
+          <p className="w-fit rounded-full bg-muted px-4 py-1 text-sm uppercase">
+            چرا ما؟
+          </p>
+          <h1 className="font-calSans mt-3 max-w-lg text-2xll font-medium lg:text-2xll">
+            <span className="opacity-30">همه کامپوننت‌هایی</span> که نیاز دارید
+          </h1>
+          <p className="max-w-lg text-lg text-muted-foreground">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+
+          <ul className="mt-18 flex flex-wrap gap-9">
+            {stats.map((stat, index) => (
+              <li key={stat.title} className="flex items-center gap-4">
+                <div className="flex size-12 items-center justify-center rounded-2xl border md:size-18">
+                  {stat.icon}
+                </div>
+                <div>
+                  <h2 className="font-calSans text-xl font-medium md:text-3xl">
+                    {stat.title}
+                  </h2>
+                  <p className="text-sm md:text-base">{stat.description}</p>
+                </div>
+                {index !== stats.length - 1 && (
+                  <div className="ms-4 h-full w-px bg-gradient-to-t from-black via-border to-transparent" />
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="relative h-112 lg:w-1/2">
+          <div className="relative -left-35 flex h-[1100px] w-[1500px] flex-col items-center justify-center lg:absolute lg:left-0">
+            <OrbitingCircles iconSize={40} radius={310} speed={2}>
+              {circle1Images.map((src, index) => (
+                <div key={index} className="size-12">
+                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
+                </div>
+              ))}
+            </OrbitingCircles>
+            <OrbitingCircles iconSize={40} radius={390} reverse speed={2}>
+              {circle2Images.map((src, index) => (
+                <div key={index} className="size-12">
+                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
+                </div>
+              ))}
+            </OrbitingCircles>
+            <OrbitingCircles iconSize={40} radius={470} speed={2}>
+              {circle3Images.map((src, index) => (
+                <div key={index} className="size-12">
+                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
+                </div>
+              ))}
+            </OrbitingCircles>
+            <OrbitingCircles iconSize={40} radius={550} reverse speed={1}>
+              {circle4Images.map((src, index) => (
+                <div key={index} className="size-12">
+                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
+                </div>
+              ))}
+            </OrbitingCircles>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero237 };
diff --git a/blocks/hero238.tsx b/blocks/hero238.tsx
new file mode 100644
index 0000000..74c7b39
--- /dev/null
+++ b/blocks/hero238.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight, Blocks, Shield, Star, Zap } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero238Props {
+  className?: string;
+}
+
+const Hero238 = ({ className }: Hero238Props) => {
+  const benefits = [
+    {
+      icon: Zap,
+      title: "دسترسی زودهنگام ",
+    },
+    {
+      icon: Star,
+      title: "جدیدترین ویژگی‌ها",
+    },
+    {
+      icon: Shield,
+      title: "پشتیبانی اولویت‌دار",
+    },
+    {
+      icon: Blocks,
+      title: "بلاک‌های اختصاصی",
+    },
+  ];
+
+  return (
+    <section
+      className={cn("h-full w-screen overflow-hidden lg:h-screen", className)}
+    >
+      <AuroraBackground>
+        <div className="relative container flex h-full flex-col py-32 lg:flex-row">
+          <div className="mt-auto space-y-12 lg:w-1/2">
+            <h1 className="mt-3 max-w-xl text-2xll font-medium font-semibold tracking-tighter lg:text-2xll">
+              با یک بار خرید به تمام کامپوننت‌های حرفه‌ای دسترسی داشته باشید
+                                      </h1>
+            <div className="flex items-center gap-4">
+              <Button>شروع رایگان</Button>
+              <Button variant="ghost">
+                مشاهده امکانات <ArrowRight className="rtl:rotate-180" />
+              </Button>
+            </div>
+            <ul className="mt-20 flex flex-wrap gap-4">
+              {benefits.map((benifit, index) => {
+                const Icon = benifit.icon;
+                return (
+                  <li key={benifit.title} className="flex items-center gap-2">
+                    <div className="size-">
+                      <Icon className="size-4" />
+                    </div>
+                    <span className="text-sm">{benifit.title}</span>
+                    {index !== benefits.length - 1 && (
+                      <div className="ms-2 size-1 rounded-full bg-foreground" />
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+          <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden lg:w-1/2">
+            <motion.div
+              initial={{ opacity: 0, y: "50%" }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.2, ease: "easeOut" }}
+              className="absolute right-0 bottom-0 w-[210px] rounded-2xl bg-primary p-4 text-sm text-secondary"
+            >
+              <span className="ms-3 inline-block size-2 rounded-full bg-orange-500" />
+              <span className="font-semibold">ری یو آی</span>
+              <span className="text-muted-foreground">
+                 بلاک‌های آماده برای ساخت رابط کاربری مدرن و سریع{" "}
+              </span>
+            </motion.div>
+          </div>
+        </div>
+      </AuroraBackground>
+    </section>
+  );
+};
+
+export { Hero238 };
+
+// Below is the modified component from Aceternity UI
+// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/aurora-background.json
+// Modified so we could change the aurora animate class and colors
+
+interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+  showRadialGradient?: boolean;
+}
+
+export const AuroraBackground = ({
+  className,
+  children,
+  showRadialGradient = true,
+  ...props
+}: AuroraBackgroundProps) => {
+  return (
+    <main>
+      <div
+        className={cn(
+          "transition-bg relative flex h-[100vh] flex-col items-center justify-center bg-zinc-50 text-slate-950 dark:bg-zinc-900",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className="absolute inset-0 overflow-hidden"
+          style={
+            {
+              "--aurora":
+                "repeating-linear-gradient(100deg,#000_10%,#666_15%,#ccc_20%,#fff_25%,#333_30%)",
+              "--dark-gradient":
+                "repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
+              "--white-gradient":
+                "repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",
+
+              "--gray-200": "#ccc",
+              "--gray-400": "#666",
+              "--gray-800": "#333",
+              "--black": "#000",
+              "--white": "#fff",
+              "--transparent": "transparent",
+            } as React.CSSProperties
+          }
+        >
+          <div
+            //   I'm sorry but this is what peak developer performance looks like // trigger warning
+            className={cn(
+              `pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--black)_10%,var(--gray-400)_15%,var(--gray-200)_20%,var(--white)_25%,var(--gray-800)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:animate-aurora-background after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
+
+              showRadialGradient &&
+                `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
+            )}
+          ></div>
+        </div>
+        {children}
+      </div>
+    </main>
+  );
+};
diff --git a/blocks/hero239.tsx b/blocks/hero239.tsx
new file mode 100644
index 0000000..0aeba33
--- /dev/null
+++ b/blocks/hero239.tsx
@@ -0,0 +1,79 @@
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { ThreeDMarquee } from "@/components/aceternity/3d-marquee";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero239Props {
+  className?: string;
+}
+
+const Hero239 = ({ className }: Hero239Props) => {
+  const images = [
+    "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img2.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img3.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img4.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img5.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img8.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img9.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img10.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img14.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img15.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img16.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img17.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img18.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img19.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img20.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img21.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img22.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img23.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img24.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img25.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img26.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img27.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img2.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img3.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img4.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img5.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img8.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img9.jpeg",
+  ];
+
+  return (
+    <section className={cn("relative py-32", className)}>
+      <div className="container flex flex-col items-center justify-center gap-5 text-center">
+        <p className="w-fit rounded-full bg-muted px-4 py-1 text-sm uppercase">
+          ری یو آی
+        </p>
+        <h1 className="mt-3 max-w-xl text-2xll font-medium font-semibold tracking-tighter lg:max-w-3xl lg:text-2xll">
+          با یک بار خرید به تمام کامپوننت‌های حرفه‌ای دسترسی داشته باشید
+                          </h1>
+        <p className="max-w-xl text-muted-foreground">
+          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+        <div className="flex items-center gap-4">
+          <Button>شروع رایگان</Button>
+          <Button variant="ghost">
+            مشاهده امکانات <ArrowRight className="rtl:rotate-180" />
+          </Button>
+        </div>
+
+        <div className="mt-15 flex h-full w-full items-center justify-center">
+          <ThreeDMarquee className="rounded-none" images={images} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero239 };
diff --git a/blocks/hero24.tsx b/blocks/hero24.tsx
new file mode 100644
index 0000000..e9395f9
--- /dev/null
+++ b/blocks/hero24.tsx
@@ -0,0 +1,80 @@
+import { Expand, Globe, MoveRight, Rocket, Wrench } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero24Props {
+  className?: string;
+}
+
+const Hero24 = ({ className }: Hero24Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <img
+            src="/block-media/shadcnblocks/block/block-1.svg"
+            alt="تصویر نمونه"
+            className="mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28"
+          />
+          <span className="mb-3 text-sm tracking-widest text-muted-foreground md:text-base">
+            پلتفرم
+          </span>
+          <h1 className="mt-4 text-xl font-semibold text-balance lg:text-2xll">
+            کسب‌وکار خود را روی زیرساختی مقیاس‌پذیر توسعه دهید
+                                </h1>
+          <Button className="mt-8" size="lg">
+            همین امروز رایگان شروع کنید
+                                  <MoveRight className="ms-2 rtl:rotate-180" strokeWidth={1} />
+          </Button>
+        </div>
+        <div className="mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4">
+          <div className="flex flex-col gap-3 bg-background p-5 md:gap-6">
+            <Globe className="size-6 shrink-0" />
+            <div>
+              <h2 className="text-sm font-semibold md:text-base">
+                زیرساخت قدرتمند
+              </h2>
+              <p className="text-sm text-muted-foreground md:text-base">
+                زیرساختی قابل اعتماد برای رشد پایدار و مدیریت آسان سرویس‌ها.
+                                            </p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-3 bg-background p-5 md:gap-6">
+            <Rocket className="size-6 shrink-0" />
+            <div>
+              <h2 className="text-sm font-semibold md:text-base">راه‌اندازی آسان</h2>
+              <p className="text-sm text-muted-foreground md:text-base">
+                بدون پیچیدگی، سرویس خود را در کوتاه‌ترین زمان راه‌اندازی کنید.
+                                            </p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-3 bg-background p-5 md:gap-6">
+            <Expand className="size-6 shrink-0" />
+            <div>
+              <h2 className="text-sm font-semibold md:text-base">
+                مقیاس‌پذیری بی‌دردسر
+              </h2>
+              <p className="text-sm text-muted-foreground md:text-base">
+                همراه با رشد کاربران و نیازهای کسب‌وکار، بدون نگرانی مقیاس‌پذیر بمانید.
+                                            </p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-3 bg-background p-5 md:gap-6">
+            <Wrench className="size-6 shrink-0" />
+            <div>
+              <h2 className="text-sm font-semibold md:text-base">
+                نگهداری کم
+              </h2>
+              <p className="text-sm text-muted-foreground md:text-base">
+                زمان خود را صرف توسعه محصول کنید، نه مدیریت زیرساخت.
+                                            </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero24 };
diff --git a/blocks/hero240.tsx b/blocks/hero240.tsx
new file mode 100644
index 0000000..015474c
--- /dev/null
+++ b/blocks/hero240.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+
+import { ThreeDMarquee } from "@/components/aceternity/3d-marquee";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Hero240Props {
+  className?: string;
+}
+
+const Hero240 = ({ className }: Hero240Props) => {
+  const images = [
+    "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img2.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img3.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img4.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img5.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img8.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img9.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img10.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img11.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img14.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img15.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img16.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img17.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img18.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img19.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img20.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img21.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img22.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img23.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img24.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img25.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img26.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img27.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img1.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img2.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img3.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img4.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img5.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img8.jpeg",
+    "/block-media/shadcnblocks/block/guri3/img9.jpeg",
+  ];
+
+  return (
+    <section
+      className={cn(
+        "relative h-full w-screen overflow-hidden py-32",
+        className,
+      )}
+    >
+      <div className="container flex flex-col items-center justify-center gap-5 text-center">
+        <div className="flex items-center gap-2">
+          <Zap className="size-5" />
+          <p className="w-fit rounded-full py-1 font-medium tracking-tight">
+            کتابخانه کامپوننت
+                                </p>
+        </div>
+        <h1 className="mt-3 max-w-xl text-2xll font-medium font-semibold tracking-tighter lg:max-w-3xl lg:text-2xll">
+          کامپوننت‌های آماده برای توسعه سریع‌تر محصولات
+                          </h1>
+        <p className="max-w-xl text-muted-foreground">
+          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+        <div className="mt-10 flex w-full max-w-2xl items-center justify-center gap-4">
+          <div className="flex w-full max-w-md rounded-full border p-1">
+            <Input
+              className="w-full rounded-full border-none shadow-none ring-0 focus-visible:ring-0 focus-visible:outline-none active:ring-0 active:outline-0"
+              placeholder="ایمیل خود را وارد کنید"
+            />
+            <Button className="rounded-full">عضویت رایگان</Button>
+          </div>
+        </div>
+
+        <div className="mt-15 flex h-full w-full items-center justify-center">
+          <ThreeDMarquee className="rounded-none" images={images} />
+          <div className="absolute bottom-0 left-0 h-1/3 w-full bg-gradient-to-t from-background via-background to-transparent" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero240 };
+
+const Zap = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      width="35"
+      height="23"
+      viewBox="0 0 35 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22.042 0.547306C22.2981 -0.152487 23.288 -0.152487 23.544 0.547306L24.3089 2.63602C24.9087 4.27458 25.8587 5.76264 27.0925 6.99648C28.3263 8.23031 29.8144 9.18025 31.453 9.7801L33.5417 10.545C34.2425 10.801 34.2425 11.7909 33.5417 12.047L31.453 12.8118C29.8144 13.4117 28.3263 14.3616 27.0925 15.5954C25.8587 16.8293 24.9087 18.3173 24.3089 19.9559L23.544 22.0446C23.288 22.7455 22.2981 22.7455 22.042 22.0446L21.2772 19.9559C20.6773 18.3173 19.7274 16.8293 18.4935 15.5954C17.2597 14.3616 15.7717 13.4117 14.1331 12.8118L12.0444 12.047C11.3446 11.7909 11.3446 10.801 12.0444 10.545L14.1331 9.7801C15.7717 9.18025 17.2597 8.23031 18.4935 6.99648C19.7274 5.76264 20.6773 4.27458 21.2772 2.63602L22.042 0.547306Z"
+        fill="#343433"
+      />
+      <path
+        d="M5.50713 0.284873C5.63513 -0.0650096 6.13009 -0.0650096 6.2581 0.284873L6.64051 1.32919C6.94042 2.14844 7.41537 2.89243 8.03227 3.50933C8.64916 4.12622 9.39316 4.60117 10.2124 4.90108L11.2567 5.2835C11.6071 5.4115 11.6071 5.90646 11.2567 6.03446L10.2124 6.41688C9.39316 6.71679 8.64916 7.19174 8.03227 7.80863C7.41537 8.42553 6.94042 9.16952 6.64051 9.98877L6.2581 11.0331C6.13009 11.3835 5.63513 11.3835 5.50713 11.0331L5.12471 9.98877C4.8248 9.16952 4.34985 8.42553 3.73296 7.80863C3.11607 7.19174 2.37207 6.71679 1.55282 6.41688L0.508505 6.03446C0.158623 5.90646 0.158623 5.4115 0.508505 5.2835L1.55282 4.90108C2.37207 4.60117 3.11607 4.12622 3.73296 3.50933C4.34985 2.89243 4.8248 2.14844 5.12471 1.32919L5.50713 0.284873Z"
+        fill="#343433"
+      />
+    </svg>
+  );
+};
diff --git a/blocks/hero241.tsx b/blocks/hero241.tsx
new file mode 100644
index 0000000..61c3717
--- /dev/null
+++ b/blocks/hero241.tsx
@@ -0,0 +1,54 @@
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { BackgroundBeamsWithCollision } from "@/components/aceternity/background-beams-with-collision";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero241Props {
+  className?: string;
+}
+
+const Hero241 = ({ className }: Hero241Props) => {
+  return (
+    <section
+      className={cn(
+        "relative h-full min-h-screen w-screen overflow-hidden py-32",
+        className,
+      )}
+    >
+      <div className="static z-10 container flex flex-col items-center justify-center gap-10 text-center">
+        <h1 className="font-playfair mt-10 text-2xll font-medium tracking-tight lg:text-2xll">
+          سریع‌ترین مسیر برای <br /> رابط‌های کاربری آماده استفاده
+                          </h1>
+        <p className="max-w-xl leading-5 font-medium">
+          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                          </p>
+        <div className="flex items-center gap-4">
+          <Button className="text-md rounded-xl font-serif">
+            مشاهده مستندات <ArrowRight className="-rotate-45 rtl:rotate-180" />{" "}
+          </Button>
+          <Button variant="secondary" className="text-md rounded-xl font-serif">
+            شروع رایگان <ArrowRight className="-rotate-45 rtl:rotate-180" />{" "}
+          </Button>
+        </div>
+        <div className="absolute bottom-8 flex items-center justify-center gap-7">
+          <div className="text-end">
+            <h1 className="font-serif text-xl tracking-tight">+۱ میلیون</h1>
+            <p className="text-muted-foreground">مورد اعتماد توسعه‌دهندگان</p>
+          </div>
+          <div className="h-24 w-px bg-foreground" />
+          <div className="text-start">
+            <h1 className="font-serif text-xl tracking-tight">95.1%</h1>
+            <p className="text-muted-foreground">کاهش زمان توسعه</p>
+          </div>
+        </div>
+      </div>
+      <BackgroundBeamsWithCollision className="absolute bottom-0 z-1 bg-gradient-to-b from-[#d9d9d9]/0 to-[#89e5ff]">
+        <span></span>
+      </BackgroundBeamsWithCollision>
+    </section>
+  );
+};
+
+export { Hero241 };
diff --git a/blocks/hero242.tsx b/blocks/hero242.tsx
new file mode 100644
index 0000000..2786c32
--- /dev/null
+++ b/blocks/hero242.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { Check } from "lucide-react";
+import React from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import { Cover } from "@/components/shadcnblocks/cover";
+import { Button } from "@/components/ui/button";
+import type { ChartConfig } from "@/components/ui/chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+interface Hero242Props {
+  className?: string;
+}
+
+const Hero242 = ({ className }: Hero242Props) => {
+  const features = [
+    {
+      title: "توسعه سریع‌تر",
+      description: "ساخت و انتشار ویژگی‌ها با بلاک‌های ما بسیار سریع‌تر است.",
+    },
+    {
+      title: "کاهش چشمگیر زمان توسعه",
+      description: "از فاز طراحی بگذرید و روی رشد کسب‌وکار تمرکز کنید.",
+    },
+    {
+      title: "بیش از ۷۰۰ کامپوننت آماده",
+      description: "دسترسی به بلاک‌های آماده تولید برای هر کاربرد.",
+    },
+    {
+      title: "پشتیبانی تخصصی",
+      description: "دسترسی فوری به بلاک‌هایی که با شما مقیاس می‌گیرند.",
+    },
+    {
+      title: "کامپوننت‌های بهینه برای تبدیل",
+      description: "بلاک‌هایی طراحی‌شده برای تبدیل بازدیدکننده به مشتری.",
+    },
+  ];
+
+  const chartData = [
+    { date: "2024-04-01", views: 372 },
+    { date: "2024-04-02", views: 277 },
+    { date: "2024-04-03", views: 287 },
+    { date: "2024-04-04", views: 502 },
+    { date: "2024-04-05", views: 663 },
+    { date: "2024-04-06", views: 641 },
+    { date: "2024-04-07", views: 425 },
+    { date: "2024-04-08", views: 729 },
+    { date: "2024-04-09", views: 169 },
+    { date: "2024-04-10", views: 451 },
+    { date: "2024-04-11", views: 677 },
+    { date: "2024-04-12", views: 502 },
+    { date: "2024-04-13", views: 722 },
+    { date: "2024-04-14", views: 357 },
+    { date: "2024-04-15", views: 290 },
+    { date: "2024-04-16", views: 328 },
+    { date: "2024-04-17", views: 806 },
+    { date: "2024-04-18", views: 774 },
+    { date: "2024-04-19", views: 423 },
+    { date: "2024-04-20", views: 239 },
+    { date: "2024-04-21", views: 337 },
+    { date: "2024-04-22", views: 394 },
+    { date: "2024-04-23", views: 368 },
+    { date: "2024-04-24", views: 677 },
+    { date: "2024-04-25", views: 465 },
+    { date: "2024-04-26", views: 205 },
+    { date: "2024-04-27", views: 803 },
+    { date: "2024-04-28", views: 302 },
+    { date: "2024-04-29", views: 555 },
+    { date: "2024-04-30", views: 834 },
+    { date: "2024-05-01", views: 385 },
+    { date: "2024-05-02", views: 603 },
+    { date: "2024-05-03", views: 437 },
+    { date: "2024-05-04", views: 805 },
+    { date: "2024-05-05", views: 871 },
+    { date: "2024-05-06", views: 1018 },
+    { date: "2024-05-07", views: 688 },
+    { date: "2024-05-08", views: 359 },
+    { date: "2024-05-09", views: 407 },
+  ];
+
+  const chartConfig = {
+    views: {
+      label: "بازدید صفحه",
+      color: "var(--chart-2)",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <section className={cn("h-full w-screen overflow-hidden py-32", className)}>
+      <div className="container grid grid-cols-1 gap-8 lg:grid-cols-2">
+        <div className="w-full space-y-5">
+          <h1 className="mt-3 w-full max-w-2xl text-2xll font-medium font-semibold tracking-tighter lg:text-2xll">
+            اشتراکی برای رشد <Cover>رشد</Cover> شما
+          </h1>
+
+          <p className="max-w-xl text-muted-foreground">
+            به هزاران توسعه‌دهنده و تیم محصول بپیوندید که با استفاده از این کامپوننت‌ها، توسعه محصولات خود را سریع‌تر و ساده‌تر کرده‌اند.
+                                </p>
+
+          <div className="mt-10 mb-29 flex gap-2">
+            <Button className="h-10 rounded-2xl">شروع رایگان</Button>
+            <Button variant="secondary" className="h-10 rounded-2xl">
+              مشاهده مخزن مخزن کد
+                                      </Button>
+          </div>
+          <ul className="space-y-4">
+            <li className="mb-3">
+              <p className="font-semibold tracking-tight opacity-50">
+                چگونه به رشد شما کمک می‌کنیم
+              </p>
+            </li>
+            {features.map((feature) => (
+              <li key={feature.title} className="flex gap-4 lg:items-center">
+                <Check className="size-4" />
+                <p className="font-medium tracking-tight">
+                  {feature.title}
+                  <span className="ps-2 opacity-30">{feature.description}</span>
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="h-full w-full rounded-2xl bg-muted p-6">
+          <ChartContainer config={chartConfig} className="h-full w-full">
+            <BarChart
+              accessibilityLayer
+              data={chartData}
+              margin={{
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={32}
+                tickFormatter={(value) => {
+                  const date = new Date(value);
+                  return date.toLocaleDateString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                  });
+                }}
+              />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    className="w-[150px]"
+                    nameKey="views"
+                    labelFormatter={(value) => {
+                      return new Date(value).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      });
+                    }}
+                  />
+                }
+              />
+              <Bar dataKey="views" fill="var(--chart-1)" />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero242 };
diff --git a/blocks/hero243.tsx b/blocks/hero243.tsx
new file mode 100644
index 0000000..319705c
--- /dev/null
+++ b/blocks/hero243.tsx
@@ -0,0 +1,69 @@
+import { TrendingUp, Users, Zap } from "lucide-react";
+import React from "react";
+
+import { ContainerTextFlip } from "@/components/aceternity/container-text-flip";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero243Props {
+  className?: string;
+}
+
+const Hero243 = ({ className }: Hero243Props) => {
+  return (
+    <section className={cn("h-full w-screen overflow-hidden py-32", className)}>
+      <div className="container border-t border-b border-dashed">
+        <div className="relative flex w-full max-w-5xl flex-col justify-start border border-t-0 border-dashed px-5 py-12 md:items-center md:justify-center lg:mx-auto">
+          <p className="flex items-center gap-2 gap-3 text-sm text-muted-foreground">
+            <span className="inline-block size-2 rounded bg-green-500" />
+            به‌روزرسانی‌های منظم
+                                </p>
+          <div className="mt-3 mb-7 w-full max-w-xl text-2xll font-medium font-semibold tracking-tighter md:mb-10 md:text-center md:text-2xll lg:relative lg:mb-0 lg:text-start lg:text-2xll">
+            <h1 className="relative z-10 inline md:ms-3">
+              راهی سریع‌تر برای <br className="block md:hidden" /> توسعه{" "}
+              <br className="block md:hidden" />
+            </h1>
+            <ContainerTextFlip
+              className="absolute text-xl font-medium font-semibold tracking-tighter md:bottom-4 md:left-1/2 md:-translate-x-1/2 md:text-2xll lg:-bottom-4 lg:left-auto lg:translate-x-0 lg:text-2xll"
+              words={["محصولات", "خدمات", "ویژگی‌ها", "کامپوننت‌ها"]}
+            />
+          </div>
+        </div>
+        <div className="mx-auto flex w-full max-w-5xl flex-col items-center justify-center border border-t-0 border-b-0 border-dashed py-20">
+          <div className="w-full max-w-2xl space-y-5 md:text-center">
+            <p className="px-5 text-muted-foreground lg:text-lg">
+              صدها بلاک و کامپوننت آماده مبتنی بر React، Tailwind CSS و shadcn/ui که مستقیماً در پروژه‌های شما قابل استفاده هستند.{" "}
+            </p>
+            <Button className="mx-5 h-12 rounded-lg">همین امروز شروع کنید</Button>
+          </div>
+        </div>
+        <ul className="mx-auto grid h-44 w-full max-w-5xl grid-cols-1 border border-b-0 border-dashed md:h-34 md:grid-cols-2 lg:h-24 lg:grid-cols-3">
+          <li className="flex h-full items-center justify-between gap-10 px-5 md:gap-3 lg:justify-center">
+            <div className="flex size-12 items-center justify-center rounded-lg bg-muted">
+              <Zap className="size-6 text-muted-foreground" />
+            </div>
+            <p className="text-lg text-muted-foreground">
+              توسعه سریع‌تر
+                                      </p>
+          </li>
+          <li className="flex h-full items-center justify-between gap-10 border-t border-s border-dashed px-5 md:gap-3 lg:justify-center lg:border-t-0">
+            <div className="flex size-12 items-center justify-center rounded-lg bg-muted">
+              <Users className="size-6 text-muted-foreground" />
+            </div>
+            <p className="text-lg text-muted-foreground">بیش از ۱۰٬۰۰۰ توسعه‌دهنده</p>
+          </li>
+          <li className="col-span-1 flex h-full items-center justify-between gap-10 border-t border-s border-dashed px-5 md:col-span-2 md:justify-center md:gap-3 lg:col-span-1 lg:border-t-0">
+            <div className="flex size-12 items-center justify-center rounded-lg bg-muted">
+              <TrendingUp className="size-6 text-muted-foreground" />
+            </div>
+            <p className="text-lg text-muted-foreground">
+              ۲۵٪ افزایش نرخ تبدیل
+            </p>
+          </li>
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Hero243 };
diff --git a/blocks/hero244.tsx b/blocks/hero244.tsx
new file mode 100644
index 0000000..37fae61
--- /dev/null
+++ b/blocks/hero244.tsx
@@ -0,0 +1,119 @@
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import {
+  DraggableCardBody,
+  DraggableCardContainer,
+} from "@/components/aceternity/draggable-card";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero244Props {
+  className?: string;
+}
+
+const Hero244 = ({ className }: Hero244Props) => {
+  const items = [
+    {
+      title: "مجموعه کنترلر",
+      image:
+        "/block-media/shadcnblocks/block/guri3/img12.jpeg",
+      className: "absolute top-10 left-[20%] rotate-[-5deg]",
+    },
+    {
+      title: "مجموعه ژوئن",
+      image:
+        "/block-media/shadcnblocks/block/guri3/img6.jpeg",
+      className: "absolute top-40 left-[25%] rotate-[-7deg]",
+    },
+    {
+      title: "حال‌وهوای تابستان",
+      image:
+        "/block-media/shadcnblocks/block/guri3/img8.jpeg",
+      className: "absolute top-5 left-[40%] rotate-[8deg]",
+    },
+    {
+      title: "سبک شهری",
+      image:
+        "/block-media/shadcnblocks/block/guri3/img9.jpeg",
+      className: "absolute top-32 left-[55%] rotate-[10deg]",
+    },
+    {
+      title: "نسخه کلاسیک",
+      image:
+        "/block-media/shadcnblocks/block/guri3/img3.jpeg",
+      className: "absolute top-20  lg:right-[35%] rotate-[2deg]",
+    },
+    {
+      title: "سری پریمیوم",
+      image:
+        "/block-media/shadcnblocks/block/guri3/img13.jpeg",
+      className: "absolute top-24 left-[45%] rotate-[-7deg]",
+    },
+    {
+      title: "نسخه محدود",
+      image:
+        "/block-media/shadcnblocks/block/guri3/img7.jpeg",
+      className: "absolute top-8 left-[30%] rotate-[4deg]",
+    },
+  ];
+
+  return (
+    <section
+      className={cn(
+        "relative grid w-screen overflow-hidden border py-32 lg:min-h-screen",
+        className,
+      )}
+    >
+      <div className="relative z-10 container h-full grid-cols-1 items-center justify-center gap-10 lg:grid lg:grid-cols-2">
+        <div className="flex flex-col items-center justify-center text-center lg:items-start lg:text-start">
+          <h1 className="font-calSans max-w-lg text-2xll">
+            کنترل کامل محصول سامانه ابری خود را در اختیار بگیرید
+                                </h1>
+          <p className="mt-10 max-w-md text-muted-foreground">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+
+          <div className="mt-10 flex gap-5">
+            <Button className="h-11 rounded-xl">
+              دسترسی نامحدود <ArrowRight className="-rotate-45 rtl:rotate-180" />
+            </Button>
+            <Button className="h-11 rounded-xl" variant="secondary">
+              آشنایی بیشتر <ArrowRight className="-rotate-45 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+        <DraggableCardContainer className="relative flex h-[80vh] w-full items-center justify-center lg:h-full">
+          <p className="font-calSans absolute top-1/2 mx-auto max-w-sm -translate-y-3/4 text-center text-xl text-muted-foreground">
+            به نسخه حرفه‌ای کتابخانه کامپوننت دسترسی پیدا کنید
+                                </p>
+          {items.map((item) => (
+            <DraggableCardBody
+              key={item.title}
+              className={cn(
+                item.className,
+                "-translate-x-20 scale-75 rounded-2xl p-3 lg:translate-x-0 lg:scale-100",
+              )}
+            >
+              <img
+                src={item.image}
+                alt={item.title}
+                className="pointer-events-none relative z-10 h-82 w-80 rounded-2xl object-cover"
+              />
+              <h3 className="mt-4 text-center text-xl tracking-tighter">
+                {item.title}
+              </h3>
+            </DraggableCardBody>
+          ))}
+        </DraggableCardContainer>
+      </div>
+      <div className="absolute inset-0 flex h-full w-full items-center justify-between">
+        {Array.from({ length: 7 }).map((_, index) => (
+          <div key={index} className="h-full w-px bg-border"></div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Hero244 };
diff --git a/blocks/hero245.tsx b/blocks/hero245.tsx
new file mode 100644
index 0000000..76f2100
--- /dev/null
+++ b/blocks/hero245.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { PointerHighlight } from "@/components/aceternity/pointer-highlight";
+import { Button } from "@/components/ui/button";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+interface Hero245Props {
+  className?: string;
+}
+
+const Hero245 = ({ className }: Hero245Props) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <section
+      className={cn("relative grid w-screen overflow-hidden py-32", className)}
+    >
+      <div className="relative z-10 container h-full grid-cols-1 items-center justify-center gap-6">
+        <div className="flex flex-col items-center justify-center text-center">
+          <div className="mb-10 flex items-center justify-center gap-3 rounded-full bg-muted-foreground/5 p-1 pe-4 text-sm font-medium tracking-tight text-muted-foreground">
+            <div className="flex items-center gap-3 rounded-full bg-muted-foreground/10 px-4 py-1.5">
+              <span className="inline-block size-2 rounded-full bg-blue-500" />
+              <span>در حال استخدام هستیم</span>
+            </div>
+            <div className="flex items-center gap-2">
+              به تیم ما بپیوندید{" "}
+              <ArrowRight className="size-4 rtl:rotate-180" />
+            </div>
+          </div>
+          <h1 className="max-w-2xl text-2xll font-semibold tracking-tighter lg:text-2xll">
+            پروژه بعدی خود را با{" "}
+            <PointerHighlight containerClassName="inline-block">
+              <span>آماده تولید</span>
+            </PointerHighlight>
+            به سطحی حرفه‌ای ارتقا دهید
+                                </h1>
+          <p className="mt-10 max-w-lg text-muted-foreground">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
+                                </p>
+
+          <div className="mt-10 flex w-full flex-col items-center justify-center gap-2">
+            <Button className="rounded-2xl px-6 py-6 text-background shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40] md:rounded-3xl md:px-7 md:py-7 md:text-base">
+              <p className="ms-1 text-xl text-background md:ms-3 md:text-xl">
+                
+              </p>{" "}
+              دانلود نسخه macOS
+                                      </Button>
+            <Button className="text-sm text-muted-foreground" variant="link">
+              دانلود نسخه Windows
+                                      </Button>
+          </div>
+        </div>
+        <div className="relative mt-10 flex h-[80vh] w-full items-center justify-center overflow-hidden rounded-4xl border">
+          <img
+            src="/block-media/shadcnblocks/block/guri3/img7.jpeg"
+            alt="تصویر نمونه"
+            className="size-full object-cover"
+          />
+        </div>
+      </div>
+      <div className="absolute inset-0 flex h-full w-full items-center justify-between">
+        {Array.from({ length: isMobile ? 8 : 18 }).map((_, index) => (
+          <motion.div
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: index * 0.05 }}
+            key={index}
+            className="h-full w-10 bg-gradient-to-l from-transparent to-muted/50"
+          ></motion.div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Hero245 };
diff --git a/blocks/hero246.tsx b/blocks/hero246.tsx
new file mode 100644
index 0000000..6147d80
--- /dev/null
+++ b/blocks/hero246.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import React from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import { Button } from "@/components/ui/button";
+import type { ChartConfig } from "@/components/ui/chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+const bgPattern = {
+  backgroundImage:
+    "linear-gradient(135deg, var(--muted) 25%, transparent 25.5%, transparent 50%, var(--muted) 50.5%, var(--muted) 75%, transparent 75.5%, transparent)",
+  backgroundSize: "10px 10px",
+};
+
+interface Hero246Props {
+  className?: string;
+}
+
+const Hero246 = ({ className }: Hero246Props) => {
+  const chartData = [
+    { date: "2024-04-01", views: 372 },
+    { date: "2024-04-02", views: 277 },
+    { date: "2024-04-03", views: 287 },
+    { date: "2024-04-04", views: 502 },
+    { date: "2024-04-05", views: 663 },
+    { date: "2024-04-06", views: 641 },
+    { date: "2024-04-07", views: 425 },
+    { date: "2024-04-08", views: 729 },
+    { date: "2024-04-09", views: 169 },
+    { date: "2024-04-10", views: 451 },
+    { date: "2024-04-11", views: 677 },
+    { date: "2024-04-12", views: 502 },
+    { date: "2024-04-13", views: 722 },
+    { date: "2024-04-14", views: 357 },
+    { date: "2024-04-15", views: 290 },
+    { date: "2024-04-16", views: 328 },
+    { date: "2024-04-17", views: 806 },
+    { date: "2024-04-18", views: 774 },
+    { date: "2024-04-19", views: 423 },
+    { date: "2024-04-20", views: 239 },
+    { date: "2024-04-21", views: 337 },
+    { date: "2024-04-22", views: 394 },
+    { date: "2024-04-23", views: 368 },
+    { date: "2024-04-24", views: 677 },
+    { date: "2024-04-25", views: 465 },
+    { date: "2024-04-26", views: 205 },
+    { date: "2024-04-27", views: 803 },
+    { date: "2024-04-28", views: 302 },
+    { date: "2024-04-29", views: 555 },
+    { date: "2024-04-30", views: 834 },
+    { date: "2024-05-01", views: 385 },
+    { date: "2024-05-02", views: 603 },
+    { date: "2024-05-03", views: 437 },
+    { date: "2024-05-04", views: 805 },
+    { date: "2024-05-05", views: 871 },
+    { date: "2024-05-06", views: 1018 },
+    { date: "2024-05-07", views: 688 },
+    { date: "2024-05-08", views: 359 },
+    { date: "2024-05-09", views: 407 },
+  ];
+
+  const chartConfig = {
+    views: {
+      label: "بازدید صفحه",
+      color: "var(--chart-2)",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <section
+      className={cn("relative grid w-screen overflow-hidden py-32", className)}
+    >
+      <div className="relative z-10 container h-full grid-cols-1 items-center justify-center gap-6">
+        <div className="flex flex-col items-center justify-center text-center">
+          <div className="flex items-center justify-center gap-3 text-sm font-medium tracking-tight text-muted-foreground">
+            <span className="inline-block size-2 rounded-full bg-green-500" />
+            <span className="uppercase">به‌روزرسانی‌های منظم</span>
+          </div>
+          <h1 className="mt-4 max-w-lg text-2xll font-semibold tracking-tighter lg:max-w-2xl lg:text-2xll">
+            اشتراکی برای رشد کسب‌وکار شما
+                                </h1>
+          <p className="mt-7 max-w-lg text-muted-foreground">
+            با ابزارهای قدرتمند و پشتیبانی مداوم، کسب‌وکار خود را به سطح بعدی
+            برسانید.
+          </p>
+        </div>
+        <div className="relative mt-15 flex h-20 w-full items-center justify-center border border-x-0">
+          <Button className="h-12 rounded-none !px-8">همین امروز شروع کنید</Button>
+          <Button
+            variant="ghost"
+            className="flex h-12 items-center gap-3 rounded-none !px-8"
+          >
+            <PlayIcon />
+            مشاهده نحوه عملکرد
+                                </Button>
+          <BgPattern />
+        </div>
+        <div className="h-fit w-full rounded-2xl p-6 lg:h-[50vh]">
+          <ChartContainer config={chartConfig} className="h-full w-full">
+            <BarChart
+              accessibilityLayer
+              data={chartData}
+              margin={{
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={32}
+                tickFormatter={(value) => {
+                  const date = new Date(value);
+                  return date.toLocaleDateString("fa-IR", {
+                    month: "short",
+                    day: "numeric",
+                  });
+                }}
+              />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    className="w-[150px]"
+                    nameKey="views"
+                    labelFormatter={(value) => {
+                      return new Date(value).toLocaleDateString("fa-IR", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      });
+                    }}
+                  />
+                }
+              />
+              <Bar dataKey="views" fill="#2B7FFF" />
+            </BarChart>
+          </ChartContainer>
+        </div>
+        <div className="relative h-20 border">
+          <BgPattern sideLines={false} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero246 };
+
+const PlayIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      width="15"
+      height="18"
+      viewBox="0 0 15 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M1.11523 3.94458C1.11523 2.36225 2.86573 1.40657 4.19675 2.26222L12.4982 7.59889C13.7229 8.38617 13.7229 10.1763 12.4982 10.9636L4.19675 16.3003C2.86573 17.1559 1.11523 16.2003 1.11523 14.6179V3.94458Z"
+        fill="black"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const BgPattern = ({ sideLines = true }: { sideLines?: boolean }) => {
+  return (
+    <>
+      {/* bg pattern left */}
+      <div
+        className="absolute top-1/2 left-0 z-20 size-20 -translate-x-full -translate-y-1/2 border border-r-0"
+        style={bgPattern}
+      >
+        <span className="absolute -top-1 -right-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -right-1 -bottom-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -bottom-1 -left-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -top-1 -left-1 z-20 size-2 bg-foreground" />
+      </div>
+
+      {/* bg pattern right */}
+      <div
+        className="absolute top-1/2 right-0 z-20 size-20 translate-x-full -translate-y-1/2 border border-l-0"
+        style={bgPattern}
+      >
+        <span className="absolute -top-1 -right-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -right-1 -bottom-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -bottom-1 -left-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -top-1 -left-1 z-20 size-2 bg-foreground" />
+      </div>
+
+      {/* bg Lines left */}
+      {sideLines && (
+        <div className="absolute left-0 z-10 h-[200vh] w-px border-l" />
+      )}
+      {sideLines && (
+        <div className="absolute -left-20 z-10 h-[200vh] w-px border-l" />
+      )}
+
+      {/* bg Lines right */}
+      {sideLines && (
+        <div className="absolute right-0 z-10 h-[200vh] w-px border-l" />
+      )}
+      {sideLines && (
+        <div className="absolute -right-20 z-10 h-[200vh] w-px border-l" />
+      )}
+    </>
+  );
+};
diff --git a/blocks/hero247.tsx b/blocks/hero247.tsx
new file mode 100644
index 0000000..f627d2a
--- /dev/null
+++ b/blocks/hero247.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ButtonItem {
+  text: string;
+  url: string;
+}
+
+interface AnimatedButtonProps extends ButtonItem {
+  variant?: "outline" | "default";
+}
+
+const AnimatedButton = ({ text, url, variant }: AnimatedButtonProps) => {
+  return (
+    <motion.a
+      initial={{
+        opacity: 0,
+        y: 100,
+      }}
+      animate={{
+        opacity: 1,
+        y: 0,
+      }}
+      transition={{
+        duration: 1.5,
+        ease: [0.16, 1, 0.3, 1],
+        delay: variant === "outline" ? 0.4 : 0.7,
+      }}
+      href={url}
+      className={cn(variant === "outline" && "hidden md:block")}
+    >
+      <Button size="lg" variant={variant} className="group">
+        <div className="h-5 overflow-hidden">
+          <div className="flex flex-col items-center gap-4 transition-[translate] duration-300 ease-out group-hover:-translate-y-9">
+            <span>{text}</span>
+            <span>{text}</span>
+          </div>
+        </div>
+      </Button>
+    </motion.a>
+  );
+};
+
+interface Hero247Props {
+  avatar: string;
+  heading: string;
+  secondaryButton: ButtonItem;
+  primaryButton: ButtonItem;
+  className?: string;
+}
+
+const Hero247 = ({
+  className,
+  avatar = "/block-media/shadcnblocks/block/avatar/cool-dude.jpg",
+  heading = "ما هویت‌های بصری ماندگار طراحی می‌کنیم که برندها را از رقبا متمایز می‌سازند.",
+  secondaryButton = {
+    text: "مشاهده مطالعات موردی",
+    url: "https://www.ShadcnBlocks",
+  },
+  primaryButton = {
+    text: "شروع همکاری",
+    url: "https://www.ShadcnBlocks",
+  },
+}: Hero247Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6">
+          <motion.img
+            initial={{ opacity: 0, scale: 0.6 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{
+              duration: 2.2,
+              ease: [0.16, 1, 0.3, 1],
+            }}
+            src={avatar}
+            alt="آواتار"
+            className="size-16 rounded-full lg:size-18"
+          />
+          <motion.h3
+            initial={{ y: 100, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{
+              duration: 1.5,
+              ease: [0.16, 1, 0.3, 1],
+            }}
+            className="max-w-3xl text-center text-xl font-medium lg:text-2xll"
+          >
+            {heading}
+          </motion.h3>
+          <div className="flex items-center gap-2">
+            <AnimatedButton
+              text={secondaryButton.text}
+              url={secondaryButton.url}
+              variant="outline"
+            />
+            <AnimatedButton text={primaryButton.text} url={primaryButton.url} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero247 };
diff --git a/blocks/hero248.tsx b/blocks/hero248.tsx
new file mode 100644
index 0000000..fa29496
--- /dev/null
+++ b/blocks/hero248.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const people = [
+  {
+    id: 1,
+    name: "Alex",
+    designation: "مهندس نرم‌افزار",
+    image:
+      "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+  },
+  {
+    id: 2,
+    name: "Lisa",
+    designation: "طراح محصول",
+    image:
+      "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+  },
+  {
+    id: 3,
+    name: "Julia",
+    designation: "پژوهشگر تجربه کاربری",
+    image:
+      "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
+  },
+];
+
+interface Hero248Props {
+  className?: string;
+}
+
+const Hero248 = ({ className }: Hero248Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 items-start gap-12 md:grid-cols-2 lg:gap-16">
+          <div className="space-y-8">
+            <h1 className="text-xl font-semibold tracking-tight md:text-2xll">
+              تیم ما{" "}
+              <span className="inline-flex items-start gap-4">
+                <div className="relative flex items-start">
+                  <div className="flex [&>div]:transition-transform [&>div]:duration-300 [&>div:hover]:rotate-0 [&>div:nth-child(1)]:-rotate-3 [&>div:nth-child(2)]:rotate-2 [&>div:nth-child(3)]:-rotate-1">
+                    {/* <AnimatedTooltip items={people} /> */}
+                  </div>
+                </div>
+              </span>
+              <span className="ms-6">
+                محصولات دیجیتالی طراحی می‌کنیم که نیاز کاربران و اهداف کسب‌وکار را هم‌زمان پوشش می‌دهند.
+                                            </span>
+            </h1>
+            <p className="text-lg leading-relaxed text-muted-foreground md:text-xl">
+              از ایده تا اجرا  تجربه‌های بصری و راهکارهای مقیاس‌پذیر می‌سازیم
+              که با اهداف کسب‌وکار شما هم‌راستا است و واقعاً با مخاطبان‌تان
+              ارتباط برقرار می‌کند.
+            </p>
+            <Button size="lg">
+              درخواست مشاوره
+                                        <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+          <div className="mx-auto max-w-xl lg:pt-4"></div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero248 };
diff --git a/blocks/hero249.tsx b/blocks/hero249.tsx
new file mode 100644
index 0000000..32f6bed
--- /dev/null
+++ b/blocks/hero249.tsx
@@ -0,0 +1,103 @@
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeFade,
+  MarqueeItem,
+} from "@/components/kibo-ui/marquee";
+import { Globe } from "@/components/magicui/globe";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero249Props {
+  className?: string;
+}
+
+const LOGOS = [
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-9.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-10.svg",
+  },
+];
+
+const Hero249 = ({ className }: Hero249Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container grid xl:grid-cols-2 xl:gap-16">
+          <div className="flex flex-col justify-between gap-6 py-12 text-start">
+            <h1 className="text-xl font-medium tracking-tight text-balance text-foreground md:text-2xll lg:text-2xll">
+              در سراسر جهان ارتباط بگیرید، همکاری کنید و رشد کنید{" "}
+              <span className="text-muted-foreground">
+                با ابزارهایی که سراسر دنیا را پوشش می‌دهند.
+              </span>
+            </h1>
+            <div className="flex max-w-xl flex-col gap-6">
+              <p className="text-muted-foreground md:text-lg">
+                یک پلتفرم یکپارچه برای همکاری تیم‌های بین‌المللی، مدیریت پروژه‌ها و ارتباط مؤثر در هر منطقه زمانی.
+                                            </p>
+              <p className="md:text-lg">
+                ابزارهای همکاری، ارتباطات و مدیریت پروژه را در یک محیط واحد در اختیار تیم خود قرار دهید.
+                                            </p>
+              <Button size="lg" className="w-fit">
+                رزرو دمو
+              </Button>
+            </div>
+          </div>
+          <div className="relative flex min-h-[320px] items-center justify-center">
+            <Globe className="static max-w-full" />
+          </div>
+        </div>
+      </div>
+      <div className="border-b">
+        <div className="container grid items-center gap-10 py-12 lg:grid-cols-2 lg:gap-16">
+          <p className="text-center text-sm lg:text-start lg:text-base">
+            تیم‌هایی که از مرزها فراتر ارتباط می‌گیرند و رشد می‌کنند
+          </p>
+          <Marquee className="relative">
+            <MarqueeContent>
+              {LOGOS.map((logo, index) => (
+                <MarqueeItem key={index}>
+                  <img
+                    src={logo.src}
+                    alt={`لوگوی ${(index + 1).toLocaleString("fa-IR")}`}
+                    className="mx-6 h-6 max-w-24 object-contain opacity-80 grayscale md:h-7 dark:invert"
+                  />
+                </MarqueeItem>
+              ))}
+            </MarqueeContent>
+            <MarqueeFade side="left" />
+            <MarqueeFade side="right" />
+          </Marquee>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero249 };
diff --git a/blocks/hero25.tsx b/blocks/hero25.tsx
new file mode 100644
index 0000000..2a2db81
--- /dev/null
+++ b/blocks/hero25.tsx
@@ -0,0 +1,62 @@
+import { Blocks, MoveRight, Wrench, Zap } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero25Props {
+  className?: string;
+}
+
+const Hero25 = ({ className }: Hero25Props) => {
+  return (
+    <section className={cn("py-20 md:py-28 lg:py-36", className)}>
+      <div className="container px-4 md:px-6">
+        <div className="mx-auto max-w-4xl text-center">
+          <img
+            src="/block-media/shadcnblocks/block/block-4.svg"
+            alt="تصویر نمونه"
+            className="mx-auto mb-6 w-14 md:mb-8 md:w-20 lg:mb-10 lg:w-24"
+          />
+          <span className="mb-2 inline-block text-sm font-medium tracking-wider text-muted-foreground uppercase md:text-base">
+            سیستم‌ها
+          </span>
+          <h1 className="mt-4 text-xl leading-tight font-bold text-balance md:text-2xll lg:text-2xll lg:leading-[1.1]">
+            پلتفرمی برای رشد تیم و مدیریت پروژه‌ها
+                                </h1>
+          <div className="mt-10 flex flex-col justify-center gap-4 sm:flex-row">
+            <Button size="lg" className="px-8 py-6 text-base font-medium">
+              شروع رایگان
+                                        <MoveRight className="ms-2 size-5 rtl:rotate-180" strokeWidth={1.5} />
+            </Button>
+            <Button
+              size="lg"
+              variant="secondary"
+              className="px-8 py-6 text-base font-medium"
+            >
+              مطالعه مستندات
+                                        <MoveRight className="ms-2 size-5 rtl:rotate-180" strokeWidth={1.5} />
+            </Button>
+          </div>
+          <div className="mt-10 lg:mt-12">
+            <ul className="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground lg:text-base">
+              <li className="flex items-center gap-2.5 whitespace-nowrap">
+                <Zap className="size-5 text-primary" />
+                راهنمای راه‌اندازی سریع
+              </li>
+              <li className="flex items-center gap-2.5 whitespace-nowrap">
+                <Blocks className="size-5 text-primary" />
+                کاملاً قابل سفارشی‌سازی
+              </li>
+              <li className="flex items-center gap-2.5 whitespace-nowrap">
+                <Wrench className="size-5 text-primary" />
+                کامپوننت‌های آماده استفاده
+                                            </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero25 };
diff --git a/blocks/hero256.tsx b/blocks/hero256.tsx
new file mode 100644
index 0000000..acc6153
--- /dev/null
+++ b/blocks/hero256.tsx
@@ -0,0 +1,197 @@
+import { Activity, ArrowRight, Receipt, Zap } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import type { HeroFeatureIconsProps } from "@/lib/hero-feature-icons";
+import { cn } from "@/lib/utils";
+
+const Hero256 = ({
+  badge = "با عملیات درآمد هوشمند، کسب‌وکار خود را متحول کنید",
+  heading = "تمام چرخه درآمد خود را ساده و یکپارچه کنید",
+  buttonPrimary = {
+    text: "شروع آزمایش رایگان",
+    href: "#",
+  },
+  buttonSecondary = {
+    text: "درخواست مشاوره",
+    href: "#",
+  },
+  features = [
+    {
+      title: "مدل‌سازی",
+      description:
+        "مدل‌های قیمت‌گذاری پویا که با شرایط بازار و گروه‌های مشتری سازگار می‌شوند",
+      icon: Zap,
+      color: "bg-teal-500",
+      href: "#",
+    },
+    {
+      title: "صدور فاکتور",
+      description:
+        "صدور فاکتور و پردازش پرداخت یکپارچه با مدیریت هوشمند مطالبات معوق",
+      icon: Receipt,
+      color: "bg-blue-500",
+      href: "#",
+    },
+    {
+      title: "تحلیل‌ها",
+      description:
+        "بینش و پیش‌بینی بلادرنگ برای بهینه‌سازی جریان‌های درآمد",
+      icon: Activity,
+      color: "bg-purple-500",
+      href: "#",
+    },
+  ],
+  images = [
+    {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "داشبورد مدیریت درآمد با تحلیل‌ها و معیارها",
+    },
+  ],
+  className,
+}: HeroFeatureIconsProps) => {
+  return (
+    <section className={cn("space-y-8 py-24 lg:py-32", className)}>
+      <div className="container space-y-14">
+        {/* Main Hero Section */}
+        <div className="relative">
+          {/* Background Pattern - only for hero section */}
+          <div
+            className="absolute inset-0 hidden overflow-hidden md:block"
+            style={{
+              maskImage:
+                "radial-gradient(ellipse 150% 200% at 0% 50%, black 0%, black 25%, transparent 65%)",
+              WebkitMaskImage:
+                "radial-gradient(ellipse 150% 200% at 0% 50%, black 0%, black 25%, transparent 65%)",
+            }}
+          >
+            {/* Grid Background */}
+            <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
+
+            {/* Decorative Diamond Pattern - positioned on the right */}
+            <div className="absolute top-1/2 end-0 -translate-x-1/4 -translate-y-1/2">
+              <div className="relative size-64">
+                {/* Diamond pattern - circular arrangement */}
+                <div className="absolute inset-0 flex items-center justify-center">
+                  {Array.from({ length: 12 }).map((_, i) => {
+                    const angle = (i * 360) / 12;
+                    const radius = 80;
+                    const x = Math.cos((angle * Math.PI) / 180) * radius;
+                    const y = Math.sin((angle * Math.PI) / 180) * radius;
+                    return (
+                      <div
+                        key={i}
+                        className="absolute size-3 rotate-45 bg-muted-foreground/20"
+                        style={{
+                          transform: `translate(${x}px, ${y}px) rotate(45deg)`,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+                {/* Inner circle */}
+                <div className="absolute inset-0 flex items-center justify-center">
+                  {Array.from({ length: 8 }).map((_, i) => {
+                    const angle = (i * 360) / 8;
+                    const radius = 50;
+                    const x = Math.cos((angle * Math.PI) / 180) * radius;
+                    const y = Math.sin((angle * Math.PI) / 180) * radius;
+                    return (
+                      <div
+                        key={i}
+                        className="absolute size-2 rotate-45 bg-muted-foreground/15"
+                        style={{
+                          transform: `translate(${x}px, ${y}px) rotate(45deg)`,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Hero Content */}
+          <div className="relative z-10 max-w-2xl text-start">
+            <div className="flex flex-col gap-8">
+              {/* Badge */}
+              <div className="flex w-fit items-center gap-2 border-b border-dashed">
+                <div className="size-2 rounded-full bg-muted-foreground" />
+                <p className="text-xs text-muted-foreground md:text-sm">
+                  {badge}
+                </p>
+              </div>
+
+              {/* Heading */}
+              <h1 className="text-xl leading-tight tracking-tight lg:text-2xll">
+                {heading}
+              </h1>
+
+              {/* Buttons */}
+              <div className="flex flex-col gap-4 sm:flex-row">
+                {buttonPrimary && (
+                  <Button asChild size="lg" className="rounded-lg shadow-md">
+                    <a href={buttonPrimary.href}>{buttonPrimary.text}</a>
+                  </Button>
+                )}
+                {buttonSecondary && (
+                  <Button
+                    asChild
+                    variant="outline"
+                    size="lg"
+                    className="rounded-lg shadow-md"
+                  >
+                    <a href={buttonSecondary.href}>{buttonSecondary.text}</a>
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Features Section */}
+        <div className="flex max-w-3xl flex-col gap-2 md:flex-row md:items-start md:justify-between md:gap-8">
+          {features.map((feature, index) => (
+            <div
+              key={feature.title}
+              className={`flex items-start px-4 py-2 md:py-0 ${index < features.length - 1 ? "border-b border-dashed md:border-e md:border-b-0" : ""}`}
+            >
+              {/* Feature Card Link */}
+              <a
+                href={feature.href}
+                className="group flex w-full flex-col gap-4 transition-opacity hover:opacity-80"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    {/* Icon */}
+                    <div
+                      className={`${feature.color} flex size-6 items-center justify-center rounded-lg p-1 text-primary-foreground`}
+                    >
+                      <feature.icon className="size-5" />
+                    </div>
+                    {/* Title */}
+                    <h3 className="text-lg font-semibold">{feature.title}</h3>
+                  </div>
+
+                  <ArrowRight className="size-6 shrink-0 text-muted-foreground rtl:rotate-180" />
+                </div>
+                {/* Description */}
+                <p className="hidden max-w-xs text-sm leading-relaxed text-muted-foreground md:block">
+                  {feature.description}
+                </p>
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div>
+        <img
+          src={images[0].src}
+          alt={images[0].alt}
+          className="aspect-video h-full w-full object-cover"
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Hero256 };
diff --git a/blocks/hero258.tsx b/blocks/hero258.tsx
new file mode 100644
index 0000000..0c08373
--- /dev/null
+++ b/blocks/hero258.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowRight, ArrowUpRight, Megaphone } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type Hero258Logo = {
+  name: string;
+  src: string;
+  alt: string;
+  className?: string;
+};
+
+type Hero258Card = {
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  href: string;
+};
+
+interface Hero258Props {
+  announcement?: {
+    text: string;
+    href: string;
+  };
+  heading?: string;
+  description?: string;
+  cta?: {
+    label: string;
+    href: string;
+  };
+  logos?: Hero258Logo[];
+  cards?: Hero258Card[];
+  className?: string;
+}
+
+const Hero258 = ({
+  announcement = {
+    text: "به‌روزرسانی هفتگی کامپوننت‌ها",
+    href: "#",
+  },
+  heading = "رابط‌های کاربری حرفه‌ای را سریع‌تر توسعه دهید",
+  description =
+    "صدها کامپوننت ظریف ساخته‌شده با رابط کاربری، استایل‌دهی مدرن و ری یو آی. مستقیم در پروژه خود کپی کنید و برای تطابق با برندتان سفارشی‌سازی کنید.",
+  cta = {
+    label: "مشاهده کامپوننت‌ها",
+    href: "#",
+  },
+  logos = [
+    {
+      name: "Northwind",
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      alt: "لوگوی شریک",
+      className: "h-6 w-auto",
+    },
+    {
+      name: "Helios",
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      alt: "لوگوی شریک",
+      className: "h-6 w-auto",
+    },
+    {
+      name: "ری یو آی",
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      alt: "لوگوی شریک",
+      className: "h-6 w-auto",
+    },
+    {
+      name: "Silverline",
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg",
+      alt: "لوگوی شریک",
+      className: "h-5 w-auto",
+    },
+    {
+      name: "Orion Systems",
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-9.svg",
+      alt: "لوگوی شریک",
+      className: "h-6 w-auto",
+    },
+    {
+      name: "Crescent",
+      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-11.svg",
+      alt: "لوگوی شریک",
+      className: "h-6 w-auto",
+    },
+  ],
+  cards = [
+    {
+      title: "آماده استفاده در پروژه",
+      description:
+        "هر بلاک کد آماده تولید است که مستقیم در پروژه خود کپی می‌کنید. بدون نصب وابستگی یا پیکربندی پیچیده  فقط کامپوننت‌های زیبا.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-1.svg",
+      imageAlt: "ویرایشگر کد با بلاک‌های ری یو آی",
+      href: "#",
+    },
+    {
+      title: "مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی",
+      description:
+        "همه بلاک‌ها از کامپوننت‌های ری یو آی و استایل‌دهی مدرن استفاده می‌کنند و سازگاری، دسترس‌پذیری و سفارشی‌سازی آسان برای تطابق با سیستم طراحی شما را تضمین می‌کنند.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-2.svg",
+      imageAlt: "نمایش کامپوننت‌های ری یو آی",
+      href: "#",
+    },
+  ],
+  className,
+}: Hero258Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <section className={cn("bg-muted/40 py-16 lg:py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-12">
+          <div className="flex flex-col items-center gap-6 text-center">
+            <Badge
+              asChild
+              variant="outline"
+              className="group rounded-full border-border/50 bg-background/80 px-4 py-1.5 text-sm transition hover:border-border/90 hover:bg-background/90"
+            >
+              <a href={announcement.href}>
+                <span className="flex size-7 items-center justify-center rounded-full bg-foreground/10 text-foreground/80 transition group-hover:bg-foreground/15">
+                  <Megaphone aria-hidden="true" className="size-3.5" />
+                  <span className="sr-only">اطلاعیه</span>
+                </span>
+                <span className="font-medium text-foreground/90">
+                  {announcement.text}
+                </span>
+                <ArrowRight className="size-4 text-foreground/50 transition group-hover:translate-x-0.5 group-hover:text-foreground/80 rtl:rotate-180" />
+              </a>
+            </Badge>
+            <div className="flex max-w-4xl flex-col gap-4">
+              <h1 className="text-xl font-medium tracking-tight text-balance md:text-2xll lg:text-2xll">
+                {heading}
+              </h1>
+              <p className="mx-auto max-w-2xl text-base text-muted-foreground md:text-lg">
+                {description}
+              </p>
+            </div>
+            <Button asChild size="lg">
+              <a href={cta.href}>{cta.label}</a>
+            </Button>
+          </div>
+
+          {logos.length > 0 && (
+            <div className="mx-auto flex w-full flex-wrap items-center justify-center gap-x-8 gap-y-6 text-muted-foreground/60 md:gap-x-12 md:py-6">
+              {logos.map((logo) => (
+                <div
+                  key={logo.name}
+                  className="transition hover:text-foreground"
+                  aria-label={logo.name}
+                >
+                  <img
+                    src={logo.src}
+                    alt={logo.alt}
+                    className={cn(
+                      "mx-auto h-6 w-auto opacity-70 grayscale transition hover:opacity-90 hover:grayscale-0 dark:invert",
+                      logo.className,
+                    )}
+                    loading="lazy"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div
+            className="hide-scrollbar flex gap-4 overflow-x-auto pb-4 md:overflow-visible md:pb-0"
+            role="list"
+            aria-label="کارت‌های ویژه"
+            dir="rtl"
+          >
+            {cards.map((card, index) => {
+              const isHovered = hoveredIndex === index;
+              const isOtherHovered =
+                hoveredIndex !== null && hoveredIndex !== index;
+
+              return (
+                <motion.article
+                  layout
+                  key={card.title}
+                  role="listitem"
+                  className={cn(
+                    "group relative flex min-h-96 min-w-72 flex-none overflow-hidden rounded-xl border border-border/60 transition duration-300 md:min-w-0 md:flex-1",
+                  )}
+                  onMouseEnter={() => setHoveredIndex(index)}
+                  onMouseLeave={() => setHoveredIndex(null)}
+                  onFocus={() => setHoveredIndex(index)}
+                  onBlur={() => setHoveredIndex(null)}
+                  tabIndex={0}
+                  animate={{
+                    flex: isHovered ? 1.3 : isOtherHovered ? 0.85 : 1,
+                  }}
+                  transition={{ duration: 0.45, ease: "easeInOut" }}
+                >
+                  <a href={card.href} key={card.title}>
+                    <img
+                      src={card.image}
+                      alt={card.imageAlt}
+                      className={cn(
+                        "absolute inset-0 h-full w-full object-cover transition duration-500",
+                        isHovered ? "scale-105" : "scale-100",
+                      )}
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-black/30 to-black/70 transition duration-300 group-hover:via-black/50 group-hover:to-black/80" />
+
+                    <div className="relative z-10 flex h-full w-full flex-col justify-between text-start">
+                      <div className="p-6">
+                        <h3 className="text-lg font-semibold tracking-tight text-primary-foreground md:text-xl">
+                          {card.title}
+                        </h3>
+                      </div>
+                      <motion.div
+                        layout
+                        className="flex w-full items-end gap-4 p-6"
+                        initial={false}
+                        animate={{
+                          justifyContent: isHovered
+                            ? "space-between"
+                            : "flex-start",
+                        }}
+                        transition={{ duration: 0.35, ease: "easeInOut" }}
+                      >
+                        <AnimatePresence initial={false}>
+                          {isHovered && (
+                            <motion.p
+                              layout
+                              key="card-description"
+                              className="flex-1 text-sm text-primary-foreground md:text-base"
+                              initial={{ opacity: 0 }}
+                              animate={{ opacity: 1 }}
+                              exit={{ opacity: 0 }}
+                              transition={{
+                                duration: 0.4,
+                                delay: 0.2,
+                                ease: "easeInOut",
+                              }}
+                            >
+                              <span>{card.description}</span>
+                            </motion.p>
+                          )}
+                        </AnimatePresence>
+                        <motion.button
+                          layout
+                          className="rounded-full border border-secondary bg-secondary p-2 text-sm font-medium text-secondary-foreground"
+                          initial={false}
+                          transition={{ duration: 0.4, ease: "easeInOut" }}
+                        >
+                          <a href={card.href}>
+                            <ArrowUpRight className="size-4 rtl:rotate-180" />
+                          </a>
+                        </motion.button>
+                      </motion.div>
+                    </div>
+                  </a>
+                </motion.article>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero258 };
diff --git a/blocks/hero259.tsx b/blocks/hero259.tsx
new file mode 100644
index 0000000..39965c3
--- /dev/null
+++ b/blocks/hero259.tsx
@@ -0,0 +1,298 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface LinkItem {
+  text: string;
+  url: string;
+}
+
+interface HeaderProps {
+  companyLogo: string;
+  links: LinkItem[];
+  className?: string;
+}
+
+const Header = ({ companyLogo, links, className }: HeaderProps) => {
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-wrap items-center justify-between gap-2",
+        className,
+      )}
+    >
+      <img
+        src={companyLogo}
+        alt="لوگو"
+        className="w-34 md:w-50 dark:invert"
+      />
+      <div className="flex items-center">
+        {links.map((link, index) => {
+          return (
+            <a href={link.url} key={`link-${index}`}>
+              <Button size="sm" variant="ghost" className="text-xs md:text-sm">
+                {link.text}
+              </Button>
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+interface ContentProps {
+  heading: string;
+  buttonText: string;
+  buttonUrl: string;
+}
+
+const Content = ({ heading, buttonText, buttonUrl }: ContentProps) => {
+  return (
+    <div className="flex flex-col gap-6 md:gap-8">
+      <h3 className="leading-tighter max-w-md text-2xll font-medium md:max-w-lg md:text-2xll">
+        {heading}
+      </h3>
+      <a href={buttonUrl}>
+        <Button variant="outline" className="text-xs md:text-sm">
+          {buttonText}
+        </Button>
+      </a>
+    </div>
+  );
+};
+
+interface FooterProps {
+  companyDescription: string;
+  incubators: string;
+}
+
+const Footer = ({ companyDescription, incubators }: FooterProps) => {
+  return (
+    <div className="flex max-w-md flex-col gap-2 text-xs md:text-sm">
+      <p className="text-muted-foreground">{incubators}</p>
+      <p>{companyDescription}</p>
+    </div>
+  );
+};
+
+const DitherBackground = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationFrameRef = useRef<number | undefined>(undefined);
+  const timeRef = useRef(0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d", { alpha: false });
+    if (!ctx) return;
+
+    const resizeCanvas = () => {
+      const dpr = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      const w = rect.width;
+      const h = rect.height;
+      if (w <= 0 || h <= 0) return;
+      canvas.width = w * dpr;
+      canvas.height = h * dpr;
+      ctx.scale(dpr, dpr);
+    };
+
+    resizeCanvas();
+    const resizeObserver = new ResizeObserver(resizeCanvas);
+    resizeObserver.observe(canvas);
+
+    const SEED = 42.0;
+    const dotSize = 6;
+
+    const swayRandomized = (seed: number, value: number): number => {
+      const f = Math.floor(value);
+      const start = Math.sin(
+        (Math.cos(f * seed) + Math.sin(f * 1024.0)) * 345.0 + seed,
+      );
+      const end = Math.sin(
+        (Math.cos((f + 1.0) * seed) + Math.sin((f + 1.0) * 1024.0)) * 345.0 +
+          seed,
+      );
+      const t = value - f;
+      const smooth = t * t * (3 - 2 * t);
+      return start + (end - start) * smooth;
+    };
+
+    const cosmic = (seed: number, con: [number, number, number]): number => {
+      let sum = swayRandomized(seed, con[2] + con[0]);
+      sum = sum + swayRandomized(seed, con[0] + con[1] + sum);
+      sum = sum + swayRandomized(seed, con[1] + con[2] + sum);
+      return sum * 0.3333333333;
+    };
+
+    const dither = (chance: number, uv: [number, number]): boolean => {
+      const dotValue =
+        Math.sin(uv[0]) * Math.sin(uv[1]) + Math.cos(uv[1]) * Math.cos(uv[0]);
+      return dotValue >= chance * 1.5;
+    };
+
+    const draw = () => {
+      if (!ctx) return;
+
+      const width = canvas.width / (window.devicePixelRatio || 1);
+      const height = canvas.height / (window.devicePixelRatio || 1);
+
+      const aTime = timeRef.current * 0.125;
+
+      const s: [number, number, number] = [
+        swayRandomized(-16405.31527, aTime - 1.11),
+        swayRandomized(-77664.8142, aTime + 1.41),
+        swayRandomized(-50993.519, aTime + 2.61),
+      ].map((v) => v * 5.0) as [number, number, number];
+
+      const c: [number, number, number] = [
+        swayRandomized(-10527.92407, aTime - 1.11),
+        swayRandomized(-61557.6687, aTime + 1.41),
+        swayRandomized(-43527.899, aTime + 2.61),
+      ].map((v) => v * 5.0) as [number, number, number];
+
+      const cols = Math.ceil(width / dotSize);
+      const rows = Math.ceil(height / dotSize);
+      const imageData = ctx.createImageData(width, height);
+      const data = imageData.data;
+
+      const uvTimeMultiplier = timeRef.current * 71.0;
+
+      for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+          const x = col * dotSize;
+          const y = row * dotSize;
+
+          const uv: [number, number] = [x / width, y / height];
+
+          const con: [number, number, number] = [
+            0.0004375 * aTime + c[0] * uv[0] + s[0] * uv[1],
+            0.0005625 * aTime + c[1] * uv[0] + s[1] * uv[1],
+            0.0008125 * aTime + c[2] * uv[0] + s[2] * uv[1],
+          ];
+
+          con[0] = cosmic(SEED, con);
+          con[1] = cosmic(SEED, con);
+          con[2] = cosmic(SEED, con);
+
+          const chance = Math.sin(con[2] * Math.PI);
+
+          const animatedUv: [number, number] = [
+            uv[0] * uvTimeMultiplier,
+            uv[1] * uvTimeMultiplier,
+          ];
+
+          const shouldDraw = dither(chance, animatedUv);
+
+          const color = shouldDraw ? 255 : 0;
+          for (let dy = 0; dy < dotSize && y + dy < height; dy++) {
+            for (let dx = 0; dx < dotSize && x + dx < width; dx++) {
+              const idx = ((y + dy) * width + (x + dx)) * 4;
+              data[idx] = color;
+              data[idx + 1] = color;
+              data[idx + 2] = color;
+              data[idx + 3] = 255;
+            }
+          }
+        }
+      }
+
+      ctx.putImageData(imageData, 0, 0);
+    };
+
+    const animate = () => {
+      timeRef.current += 0.015;
+      draw();
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      resizeObserver.disconnect();
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="h-full w-full"
+      style={{ display: "block" }}
+    />
+  );
+};
+
+interface Hero259Props {
+  companyLogo?: string;
+  heading?: string;
+  buttonText?: string;
+  buttonUrl?: string;
+  companyDescription?: string;
+  incubators?: string;
+  links?: LinkItem[];
+  className?: string;
+}
+
+const Hero259 = ({
+  companyLogo = "/block-media/shadcnblocks/block/lummi/bw17",
+  heading = "کامپوننت‌هایی طراحی‌شده برای توسعه‌دهندگان",
+  buttonText = "شروع کنید",
+  buttonUrl = "https://www.ShadcnBlocks",
+  companyDescription =
+    "صدها بلاک و کامپوننت آماده مبتنی بر React، Tailwind CSS و shadcn/ui که مستقیماً در پروژه‌های شما قابل استفاده هستند.",
+  incubators = "مورد اعتماد شرکت‌های نوآور",
+  links = [
+    {
+      text: "مستندات",
+      url: "https://www.ShadcnBlocks",
+    },
+    {
+      text: "GitHub",
+      url: "https://www.ShadcnBlocks",
+    },
+    {
+      text: "Twitter",
+      url: "https://www.ShadcnBlocks",
+    },
+  ],
+  className,
+}: Hero259Props) => {
+  return (
+    <section className={cn(className)} dir="rtl">
+      <div className="grid grid-cols-10 lg:grid-cols-2">
+        <div
+          className="col-span-9 flex h-screen flex-col justify-between p-6 lg:col-span-1"
+          dir="rtl"
+        >
+          <div className="flex flex-1/2 flex-col justify-between">
+            <Header companyLogo={companyLogo} links={links} />
+            <Content
+              heading={heading}
+              buttonText={buttonText}
+              buttonUrl={buttonUrl}
+            />
+          </div>
+          <div className="col-span-1 flex h-full flex-1/2 items-end">
+            <Footer
+              companyDescription={companyDescription}
+              incubators={incubators}
+            />
+          </div>
+        </div>
+        <div className="col-span-1 h-screen min-h-0 overflow-hidden">
+          <DitherBackground />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero259 };
diff --git a/blocks/hero26.tsx b/blocks/hero26.tsx
new file mode 100644
index 0000000..398627b
--- /dev/null
+++ b/blocks/hero26.tsx
@@ -0,0 +1,68 @@
+import {
+  ArrowRight,
+  Blocks,
+  MessagesSquare,
+  MoveRight,
+  Users,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero26Props {
+  className?: string;
+}
+
+const Hero26 = ({ className }: Hero26Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <a
+            href="#"
+            className="mx-auto mb-3 inline-flex items-center gap-3 rounded-full border px-2 py-1 text-sm"
+          >
+            <Badge className="rounded-full">نسخه جدید</Badge>
+            معرفی Collaboration 2.0
+                                  <span className="flex size-7 items-center justify-center rounded-full bg-muted">
+              <ArrowRight className="w-4" />
+            </span>
+          </a>
+          <h1 className="mx-auto mt-4 mb-3 max-w-3xl text-xl font-semibold text-balance lg:mb-7 lg:text-2xll">
+            همکاری مؤثر را تجربه کنید
+                                </h1>
+          <p className="m mx-auto max-w-3xl text-muted-foreground lg:text-xl">
+            پلتفرمی برای توانمندسازی
+                                  <span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
+              <Users className="me-1 w-4 md:w-5" />
+              تیم‌ها
+            </span>
+            در
+                                  <span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
+              <Blocks className="me-1 w-5" />
+              همکاری،
+            </span>
+            <span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
+              <MessagesSquare className="me-1 w-5" />
+              ارتباط مؤثر
+                                      </span>
+            و مدیریت پروژه‌ها. بدون نیاز به کارت بانکی، رایگان شروع کنید.
+                                </p>
+          <div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
+            <Button size="lg">
+              شروع رایگان
+                                        <MoveRight className="ms-2 rtl:rotate-180" strokeWidth={1} />
+            </Button>
+            <Button size="lg" variant="ghost">
+              آشنایی بیشتر
+                                        <MoveRight className="ms-2 rtl:rotate-180" strokeWidth={1} />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero26 };
diff --git a/blocks/hero261.tsx b/blocks/hero261.tsx
new file mode 100644
index 0000000..8d6efa4
--- /dev/null
+++ b/blocks/hero261.tsx
@@ -0,0 +1,171 @@
+import {
+  ArrowRight,
+  Blend,
+  ChartNoAxesColumn,
+  CircleDot,
+  Diamond,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import type { HeroFeatureIconsProps } from "@/lib/hero-feature-icons";
+import { cn } from "@/lib/utils";
+
+interface DashedLineProps {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+const DashedLine = ({
+  orientation = "horizontal",
+  className,
+}: DashedLineProps) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <div
+      className={cn(
+        "relative text-muted-foreground",
+        isHorizontal ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          isHorizontal
+            ? [
+                "h-px w-full",
+                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
+              ]
+            : [
+                "h-full w-px",
+                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
+              ],
+        )}
+      />
+    </div>
+  );
+};
+
+const Hero261 = ({
+  heading = "توسعه محصول را سریع‌تر انجام دهید",
+  description =
+    "مجموعه‌ای از کامپوننت‌های آماده برای توسعه سریع محصولات دیجیتال.",
+  buttonPrimary = {
+    text: "شروع کنید",
+    href: "#",
+  },
+  buttonSecondary = {
+    text: "بیشتر بدانید",
+    href: "#",
+  },
+  features = [
+    {
+      title: "گردش‌های کار سفارشی",
+      description: "پیشرفت وظایف را در گردش‌کارهای سفارشی تیم خود مدیریت کنید.",
+      icon: CircleDot,
+    },
+    {
+      title: "پروژه‌های بین‌تیمی",
+      description: "همکاری میان تیم‌ها و واحدهای مختلف را ساده‌تر کنید.",
+      icon: Blend,
+    },
+    {
+      title: "نقاط عطف",
+      description: "پروژه‌ها را به فازهای مشخص تقسیم کنید.",
+      icon: Diamond,
+    },
+    {
+      title: "بینش پیشرفت",
+      description: "وضعیت پروژه و میزان پیشرفت را به‌صورت مستمر بررسی کنید.",
+      icon: ChartNoAxesColumn,
+    },
+  ],
+  images = [
+    {
+      src: "/block-media/shadcnblocks/block/dashboard/kanban-ui-dashboard-mainline.png",
+      alt: "پیش‌نمایش داشبورد محصول",
+    },
+  ],
+  className,
+}: HeroFeatureIconsProps) => {
+  return (
+    <section
+      className={cn("overflow-hidden py-28 lg:py-32 lg:pt-44", className)}
+    >
+      <div className="container flex flex-col justify-between gap-8 md:gap-14 lg:flex-row lg:gap-20">
+        {/* Left side - Main content */}
+        <div className="flex-1 text-start">
+          <h1 className="max-w-160 text-3xl tracking-tight text-foreground md:text-xl lg:text-2xll">
+            {heading}
+          </h1>
+
+          {description && (
+            <p className="mt-5 text-xl text-muted-foreground md:text-3xl">
+              {description}
+            </p>
+          )}
+
+          <div className="mt-8 flex flex-wrap items-center gap-4 lg:flex-nowrap">
+            {buttonPrimary && (
+              <Button asChild>
+                <a href={buttonPrimary.href}>{buttonPrimary.text}</a>
+              </Button>
+            )}
+            {buttonSecondary && (
+              <Button variant="outline" asChild>
+                <a href={buttonSecondary.href}>
+                  {buttonSecondary.text}
+                  <ArrowRight className="ms-2 size-4 stroke-3 rtl:rotate-180" />
+                </a>
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Right side - Features */}
+        <div className="relative flex flex-1 flex-col justify-center space-y-5 text-start max-lg:pt-10 lg:ps-10">
+          <DashedLine
+            orientation="vertical"
+            className="absolute top-0 start-0 max-lg:hidden"
+          />
+          <DashedLine
+            orientation="horizontal"
+            className="absolute top-0 lg:hidden"
+          />
+          {features?.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <div key={feature.title} className="flex gap-2.5 lg:gap-5">
+                <Icon className="mt-1 size-4 shrink-0 text-primary lg:size-5" />
+                <div>
+                  <h2 className="font-semibold text-foreground">
+                    {feature.title}
+                  </h2>
+                  <p className="max-w-76 text-sm text-muted-foreground">
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="mt-12 max-lg:ms-6 max-lg:h-[550px] max-lg:overflow-hidden md:mt-20 lg:container lg:mt-24">
+        <div className="relative h-[793px] w-full">
+          {/* Light grid mask background */}
+          <div className="absolute -top-32 left-1/2 h-96 w-screen -translate-x-1/2 [background-image:repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_8px),repeating-linear-gradient(0deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,black,transparent)] [background-size:24px_1px,1px_24px] text-primary opacity-10" />
+          <img
+            src={images[0].src}
+            alt={images[0].alt}
+            className="absolute inset-0 size-full rounded-2xl object-cover object-top-start shadow-lg max-lg:rounded-te-none"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero261 };
diff --git a/blocks/hero262.tsx b/blocks/hero262.tsx
new file mode 100644
index 0000000..062ef2c
--- /dev/null
+++ b/blocks/hero262.tsx
@@ -0,0 +1,121 @@
+import { cn } from "@/lib/utils";
+
+interface DashedLineProps {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+const DashedLine = ({
+  orientation = "horizontal",
+  className,
+}: DashedLineProps) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <div
+      className={cn(
+        "relative text-muted-foreground",
+        isHorizontal ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          isHorizontal
+            ? [
+                "h-px w-full",
+                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
+              ]
+            : [
+                "h-full w-px",
+                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
+                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
+              ],
+        )}
+      />
+    </div>
+  );
+};
+
+interface Stat {
+  value: string;
+  label: string;
+}
+
+interface Hero262Props {
+  heading?: string;
+  subheading?: string;
+  description?: string;
+  stats?: Stat[];
+  className?: string;
+}
+
+const Hero262 = ({
+  heading = "نرم‌افزار باکیفیت برای همه",
+  subheading = "توسعه نرم‌افزارهای مدرن با کمک هوش مصنوعی.",
+  description =
+    "ما متعهدیم که نحوه برنامه‌ریزی، اجرا و تحویل پروژه‌ها توسط تیم‌ها را متحول کنیم. مأموریت ما ارائه مزیت غیرقابل‌رقابت به مشتریان در برابر تأخیر، ناکارآمدی و بی‌نظمی از طریق بینش‌های عملی و همکاری یکپارچه است. برای دادن ابزارهایی که هر پروژه را به خط پایان می‌رسانند، حاضر به هر تلاشی هستیم.\n\nما مشتری‌مدار هستیم  وقت می‌گذاریم تا هر جنبه جریان کار شما را درک کنیم و بهتر از همیشه عمل کنید. ما در این مسیر با هم هستیم؛ چون موفقیت شما، موفقیت ما است.",
+  stats = [
+    {
+      value: "۱۵۰ میلیون دلار",
+      label: "سرمایه جمع‌آوری‌شده",
+    },
+    {
+      value: "۲۰ هزار",
+      label: "شرکت",
+    },
+    {
+      value: "۱٫۳ میلیارد",
+      label: "تراکنش ماهانه",
+    },
+    {
+      value: "۱٫۵ هزار",
+      label: "اتصال در دقیقه",
+    },
+  ],
+  className,
+}: Hero262Props) => {
+  return (
+    <section className={cn("py-28 lg:py-32", className)}>
+      <div className="container flex max-w-5xl flex-col justify-between gap-8 md:gap-20 lg:flex-row lg:items-center lg:gap-24 xl:gap-24">
+        <div className="flex-[1.5] text-start">
+          <h1 className="text-3xl tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
+            {heading}
+          </h1>
+
+          <p className="mt-5 text-xl text-muted-foreground md:text-3xl lg:text-xl">
+            {subheading}
+          </p>
+
+          <div className="mt-8 hidden max-w-lg space-y-6 text-lg text-balance text-muted-foreground md:block lg:mt-12">
+            {description.split("\n\n").map((paragraph, i) => (
+              <p key={i}>{paragraph}</p>
+            ))}
+          </div>
+        </div>
+
+        <div className="relative flex flex-1 flex-col justify-center gap-3 text-start pt-10 lg:pt-0 lg:ps-10">
+          <DashedLine
+            orientation="vertical"
+            className="absolute top-0 start-0 max-lg:hidden"
+          />
+          <DashedLine
+            orientation="horizontal"
+            className="absolute top-0 lg:hidden"
+          />
+          {stats.map((stat) => (
+            <div key={stat.label} className="flex flex-col gap-1">
+              <div className="text-xl tracking-wide md:text-2xll">
+                {stat.value}
+              </div>
+              <div className="text-muted-foreground">{stat.label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero262 };
diff --git a/blocks/hero27.tsx b/blocks/hero27.tsx
new file mode 100644
index 0000000..c2a90a7
--- /dev/null
+++ b/blocks/hero27.tsx
@@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero27Props {
+  className?: string;
+}
+
+const Hero27 = ({ className }: Hero27Props) => {
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      {/* Decorative background element */}
+      <div className="absolute inset-0 -z-10 bg-linear-to-br from-background to-background/80" />
+      <div className="absolute top-1/2 right-0 h-96 w-96 translate-x-1/3 -translate-y-1/2 rounded-full bg-primary/10 blur-3xl" />
+
+      <div className="relative container">
+        <div className="mx-auto flex max-w-6xl flex-col items-start justify-between gap-10 md:gap-20 lg:flex-row lg:items-end">
+          <h1 className="relative text-2xll font-bold tracking-tighter md:text-[8vw] lg:w-3/5 2xl:text-9xl">
+            <span className="relative inline-block transition-transform duration-300 hover:translate-x-1">
+              رشد
+                                      </span>
+            <br />
+            <span className="relative inline-block transition-transform duration-300 hover:translate-x-1">
+              در
+                                      </span>
+            <br />
+            <span className="relative inline-block transition-transform duration-300 hover:translate-x-1">
+              مقیاس سازمانی
+                                      </span>
+          </h1>
+          <div className="lg:max-w-auto max-w-lg space-y-5 lg:mb-4 lg:w-2/5">
+            <p className="text-xl font-bold md:text-xl">
+              راهکاری یکپارچه برای توسعه، مدیریت و مقیاس‌پذیری محصولات دیجیتال.
+                                        <br />
+              
+                                        <br />
+            </p>
+            <p className="text-lg text-muted-foreground">
+              همه ابزارهای موردنیاز برای توسعه و مدیریت محصولات دیجیتال را در یک پلتفرم یکپارچه در اختیار داشته باشید.
+                                      </p>
+            <Button className="group relative mt-8 overflow-hidden" size="lg">
+              <span className="relative z-10">شروع رایگان</span>
+              <span className="absolute inset-0 translate-y-full bg-primary/10 transition-transform duration-300 group-hover:translate-y-0" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero27 };
diff --git a/blocks/hero28.tsx b/blocks/hero28.tsx
new file mode 100644
index 0000000..0da4160
--- /dev/null
+++ b/blocks/hero28.tsx
@@ -0,0 +1,155 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero28Props {
+  className?: string;
+}
+
+const Hero28 = ({ className }: Hero28Props) => {
+  return (
+    <section className={cn("relative py-32", className)}>
+      {/* Background pattern */}
+      <div className="absolute inset-x-0 top-0 container hidden h-full overflow-hidden lg:block">
+        <div className="flex flex-col items-center justify-center">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 520">
+            <defs>
+              <radialGradient id="text-backgroud" cx="50%" cy="50%" r={0.6}>
+                <stop stopColor="black" offset={0.4} />
+                <stop stopColor="black" offset={1} stopOpacity={0} />
+              </radialGradient>
+              <linearGradient id="icon-backgroud" x1="0" y1="0" x2="1" y2="1">
+                <stop stopColor="var(--color-accent)" offset={0} />
+                <stop stopColor="var(--color-background)" offset={1} />
+              </linearGradient>
+              <mask id="mask">
+                <rect
+                  x="0"
+                  y="0"
+                  width="100%"
+                  height="100%"
+                  stroke="none"
+                  fill="black"
+                />
+                <rect
+                  x="80"
+                  y="40"
+                  width="1260"
+                  height="380"
+                  rx="140"
+                  stroke="none"
+                  filter="url(#blur)"
+                  fill="white"
+                />
+                <rect
+                  x="40"
+                  y="-120"
+                  width="1320"
+                  height="600"
+                  stroke="none"
+                  fill="url(#text-backgroud)"
+                />
+              </mask>
+              <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
+                <feGaussianBlur in="SourceGraphic" stdDeviation="40" />
+              </filter>
+            </defs>
+            <path
+              stroke="var(--border)"
+              strokeWidth={1}
+              d="M0,40H1400M0,120H1400M0,200H1400M0,280H1400M0,360H1400M0,440H1400M60,0V520M140,0V520M220,0V520M300,0V520M380,0V520M460,0V520M540,0V520M620,0V520M700,0V520M780,0V520M860,0V520M940,0V520M1020,0V520M1100,0V520M1180,0V520M1260,0V520M1340,0V520"
+              mask="url(#mask)"
+            />
+            <rect
+              x={140}
+              y={120}
+              width={80}
+              height={80}
+              stroke="var(--border)"
+              fill="url(#icon-backgroud)"
+            />
+            <image
+              href="/block-media/shadcnblocks/block/block-1.svg"
+              x={160}
+              y={140}
+              width={40}
+              height={40}
+            />
+            <rect
+              x={60}
+              y={280}
+              width={80}
+              height={80}
+              stroke="var(--border)"
+              fill="url(#icon-backgroud)"
+            />
+            <image
+              href="/block-media/shadcnblocks/block/block-2.svg"
+              x={80}
+              y={300}
+              width={40}
+              height={40}
+            />
+            <rect
+              x={300}
+              y={360}
+              width={80}
+              height={80}
+              stroke="var(--border)"
+              fill="url(#icon-backgroud)"
+            />
+            <image
+              href="/block-media/shadcnblocks/block/block-3.svg"
+              x={320}
+              y={380}
+              width={40}
+              height={40}
+            />
+            <rect
+              x={1180}
+              y={40}
+              width={80}
+              height={80}
+              stroke="var(--border)"
+              fill="url(#icon-backgroud)"
+            />
+            <image
+              href="/block-media/shadcnblocks/block/block-4.svg"
+              x={1200}
+              y={60}
+              width={40}
+              height={40}
+            />
+            <rect
+              x={1260}
+              y={280}
+              width={80}
+              height={80}
+              stroke="var(--border)"
+              fill="url(#icon-backgroud)"
+            />
+            <image
+              href="/block-media/shadcnblocks/block/block-5.svg"
+              x={1280}
+              y={300}
+              width={40}
+              height={40}
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative container flex flex-col items-center text-center">
+        <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+          توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                          </h1>
+        <p className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
+          کامپوننت‌ها و بلاک‌های آماده به شما کمک می‌کنند بدون اتلاف زمان، رابط کاربری حرفه‌ای ایجاد کنید.
+                          </p>
+        <div>
+          <Button>شروع رایگان</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero28 };
diff --git a/blocks/hero29.tsx b/blocks/hero29.tsx
new file mode 100644
index 0000000..ec61731
--- /dev/null
+++ b/blocks/hero29.tsx
@@ -0,0 +1,118 @@
+import { Star } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero29Props {
+  className?: string;
+}
+
+const Hero29 = ({ className }: Hero29Props) => {
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="flex h-full flex-col items-center justify-end">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1400 900"
+            className="h-full w-full"
+          >
+            <defs>
+              <filter id="blur1" x="-20%" y="-20%" width="140%" height="140%">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend
+                  mode="normal"
+                  in="SourceGraphic"
+                  in2="BackgroundImageFix"
+                  result="shape"
+                />
+                <feGaussianBlur
+                  stdDeviation="200"
+                  result="effect1_foregroundBlur"
+                />
+              </filter>
+              <pattern
+                id="innerGrid"
+                width="40"
+                height="40"
+                patternUnits="userSpaceOnUse"
+              >
+                <path
+                  d="M 40 0 L 0 0 0 40"
+                  fill="none"
+                  stroke="hsl(var(--color-background))"
+                  strokeWidth="0.5"
+                  strokeOpacity={0.6}
+                />
+              </pattern>
+              <pattern
+                id="grid"
+                width="160"
+                height="160"
+                patternUnits="userSpaceOnUse"
+              >
+                <rect width="160" height="160" fill="url(#innerGrid)" />
+                <path
+                  d="M 70 80 H 90 M 80 70 V 90"
+                  fill="none"
+                  stroke="hsl(var(--color-background))"
+                  strokeWidth="1"
+                  strokeOpacity={0.3}
+                />
+              </pattern>
+            </defs>
+            <g filter="url(#blur1)">
+              <rect width="1400" height="900" fill="var(--color-background)" />
+              <circle cx="400" cy="740" fill="var(--color-primary)" r="300" />
+              <circle cx="1100" cy="600" fill="var(--color-primary)" r="240" />
+            </g>
+            <rect width="1400" height="900" fill="url(#grid)" />
+          </svg>
+        </div>
+      </div>
+      <div className="relative container flex flex-col items-center text-center">
+        <h1 className="my-3 text-xl font-bold text-pretty sm:text-xl md:my-6 lg:text-2xll">
+          توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                          </h1>
+        <p className="mb-6 max-w-xl text-muted-foreground md:mb-12 lg:text-xl">
+          کامپوننت‌ها و بلاک‌های آماده به شما کمک می‌کنند بدون اتلاف زمان، رابط کاربری حرفه‌ای ایجاد کنید.
+                          </p>
+        <div className="mb-16 space-y-8">
+          <div className="flex items-start gap-4">
+            <div className="flex flex-col items-center gap-2">
+              <Button variant="outline">شروع رایگان</Button>
+              <p className="text-xs text-muted-foreground">
+                بدون نیاز به کارت بانکی
+                                            </p>
+            </div>
+            <Button>درخواست نسخه نمایشی</Button>
+          </div>
+          <div className="flex w-full items-center justify-between rounded-full bg-background px-4 py-2 shadow">
+            <div className="flex items-center">
+              <span className="flex items-center gap-x-0.5">
+                <Star className="size-3 fill-accent-foreground stroke-accent-foreground" />
+                <Star className="size-3 fill-accent-foreground stroke-accent-foreground" />
+                <Star className="size-3 fill-accent-foreground stroke-accent-foreground" />
+                <Star className="size-3 fill-accent-foreground stroke-accent-foreground" />
+                <Star className="size-3 fill-accent-foreground stroke-accent-foreground" />
+              </span>
+              <span className="ms-2 text-xs">۴٫۸ ستاره</span>
+            </div>
+            <div className="text-xs">۲۰۷ دیدگاه کاربران</div>
+          </div>
+        </div>
+      </div>
+      <div className="relative container -mb-48 overflow-hidden">
+        <div className="mx-auto aspect-4/3 max-w-3xl rounded-xl border border-background/40 bg-background/20 p-4">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه قهرمان"
+            className="h-full w-full rounded-md object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero29 };
diff --git a/blocks/hero3.tsx b/blocks/hero3.tsx
new file mode 100644
index 0000000..7a967ac
--- /dev/null
+++ b/blocks/hero3.tsx
@@ -0,0 +1,136 @@
+import { ArrowDownRight, Star } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero3Props {
+  heading?: string;
+  description?: string;
+  buttons?: {
+    primary?: {
+      text: string;
+      url: string;
+      className?: string;
+    };
+    secondary?: {
+      text: string;
+      url: string;
+    };
+  };
+  reviews?: {
+    count: number;
+    avatars: {
+      src: string;
+      alt: string;
+    }[];
+    rating?: number;
+  };
+  className?: string;
+}
+
+const Hero3 = ({
+  heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه سریع رابط کاربری",
+  description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید بدون نیاز به طراحی از ابتدا، مستقیماً در پروژه‌های خود استفاده کنید.",
+  buttons = {
+    primary: {
+      text: "ایجاد حساب کاربری",
+      url: "https://www.ShadcnBlocks",
+    },
+    secondary: {
+      text: "شروع رایگان",
+      url: "https://www.ShadcnBlocks",
+    },
+  },
+  reviews = {
+    count: 200,
+    rating: 5.0,
+    avatars: [
+      {
+        src: "/block-media/shadcnblocks/block/avatar-1.webp",
+        alt: "آواتار ۱",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/avatar-2.webp",
+        alt: "آواتار ۲",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/avatar-3.webp",
+        alt: "آواتار ۳",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/avatar-4.webp",
+        alt: "آواتار ۴",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/avatar-5.webp",
+        alt: "آواتار ۵",
+      },
+    ],
+  },
+  className,
+}: Hero3Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container grid items-center gap-10 lg:grid-cols-2 lg:gap-20">
+        <div className="mx-auto flex flex-col items-center text-center md:ml-auto lg:max-w-3xl lg:items-start lg:text-start">
+          <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll xl:text-2xll">
+            {heading}
+          </h1>
+          <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+            {description}
+          </p>
+          <div className="mb-12 flex w-fit flex-col items-center gap-4 sm:flex-row">
+            <span className="inline-flex items-center -space-x-4">
+              {reviews.avatars.map((avatar, index) => (
+                <Avatar key={index} className="size-12 border">
+                  <AvatarImage src={avatar.src} alt={avatar.alt} />
+                </Avatar>
+              ))}
+            </span>
+            <div>
+              <div className="flex items-center gap-1">
+                {[...Array(5)].map((_, index) => (
+                  <Star
+                    key={index}
+                    className="size-5 fill-yellow-400 text-yellow-400"
+                  />
+                ))}
+                <span className="ms-1 font-semibold">
+                  {reviews.rating?.toFixed(1)}
+                </span>
+              </div>
+              <p className="text-start font-medium text-muted-foreground">
+                مورد اعتماد بیش از {reviews.count} کاربر
+                                            </p>
+            </div>
+          </div>
+          <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+            {buttons.primary && (
+              <Button asChild className="w-full sm:w-auto">
+                <a href={buttons.primary.url}>{buttons.primary.text}</a>
+              </Button>
+            )}
+            {buttons.secondary && (
+              <Button asChild variant="outline">
+                <a href={buttons.secondary.url}>
+                  {buttons.secondary.text}
+                  <ArrowDownRight className="size-4 rtl:rotate-180" />
+                </a>
+              </Button>
+            )}
+          </div>
+        </div>
+        <div className="flex">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه قهرمان"
+            className="max-h-[600px] w-full rounded-md object-cover lg:max-h-[800px]"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero3 };
diff --git a/blocks/hero30.tsx b/blocks/hero30.tsx
new file mode 100644
index 0000000..f401ac1
--- /dev/null
+++ b/blocks/hero30.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero30Props {
+  className?: string;
+}
+
+const Hero30 = ({ className }: Hero30Props) => {
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      <div className="relative container">
+        <div className="grid items-center gap-8 lg:grid-cols-2">
+          <div className="flex flex-col items-center text-center lg:items-start lg:text-start">
+            <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+              توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                                      </h1>
+            <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+              بلاک‌های آماده را متناسب با نیاز خود سفارشی‌سازی کنید و بدون شروع از صفر، پروژه را توسعه دهید.
+                                      </p>
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              <Button variant="outline" className="w-full sm:w-auto">
+                مشاهده امکانات
+                                            </Button>
+              <Button className="w-full sm:w-auto">شروع رایگان</Button>
+            </div>
+          </div>
+          <div className="relative mt-16 -mb-16 flex justify-center gap-4 lg:mt-0 lg:mb-0 lg:justify-end">
+            {/* Mesh background */}
+            <div className="absolute -inset-8 z-0 rounded-2xl bg-linear-to-r from-amber-100 via-red-200 to-teal-100 opacity-70 blur-3xl"></div>
+
+            {/* Images with relative positioning to appear above the mesh */}
+            <div className="relative z-10">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر نمونه قهرمان"
+                className="h-[400px] rounded-lg border border-border object-cover object-center sm:max-w-[320px]"
+              />
+            </div>
+            <div className="relative z-10 hidden flex-col gap-4 sm:flex md:hidden 2xl:flex">
+              <div className="w-[256px] flex-1 overflow-clip rounded-lg border border-border bg-background"></div>
+              <div className="aspect-2/1 w-[256px] overflow-clip rounded-lg border border-border bg-background"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero30 };
diff --git a/blocks/hero31.tsx b/blocks/hero31.tsx
new file mode 100644
index 0000000..e50ce3f
--- /dev/null
+++ b/blocks/hero31.tsx
@@ -0,0 +1,131 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero31Props {
+  className?: string;
+}
+
+const Hero31 = ({ className }: Hero31Props) => {
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      <div className="absolute inset-0 overflow-hidden bg-muted">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1400 900"
+          className="min-h-full min-w-full"
+        >
+          <defs>
+            <filter id="blur1" x="-20%" y="-20%" width="140%" height="140%">
+              <feFlood floodOpacity="0" result="BackgroundImageFix" />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="BackgroundImageFix"
+                result="shape"
+              />
+              <feGaussianBlur
+                stdDeviation="200"
+                result="effect1_foregroundBlur"
+              />
+            </filter>
+            <pattern
+              id="innerGrid"
+              width="40"
+              height="40"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                d="M 40 0 L 0 0 0 40"
+                fill="none"
+                stroke="var(--color-background)"
+                strokeWidth="0.5"
+                strokeOpacity={0.6}
+              />
+            </pattern>
+            <pattern
+              id="grid"
+              width="160"
+              height="160"
+              patternUnits="userSpaceOnUse"
+            >
+              <rect width="160" height="160" fill="url(#innerGrid)" />
+              <path
+                d="M 70 80 H 90 M 80 70 V 90"
+                fill="none"
+                stroke="var(--color-background))"
+                strokeWidth="1"
+                strokeOpacity={0.3}
+              />
+            </pattern>
+          </defs>
+          <g filter="url(#blur1)">
+            <rect width="1400" height="900" fill="var(--muted)" />
+            <rect
+              x="0"
+              y="0"
+              width="1400"
+              height="900"
+              fill="var(--color-primary)"
+            ></rect>
+            <g transform="translate(1400, 900)">
+              <path
+                d="M-707.3 0C-692.6 -130.2 -677.8 -260.4 -612.6 -353.7C-547.3 -446.9 -431.5 -503.2 -321 -556C-210.5 -608.8 -105.2 -658.1 0 -707.3L0 0Z"
+                fill="var(--color-background)"
+              ></path>
+            </g>
+            <g transform="translate(0, 0)">
+              <path
+                d="M707.3 0C662.2 107.6 617.1 215.3 563.8 325.5C510.5 435.7 449 548.5 353.7 612.6C258.3 676.6 129.2 692 0 707.3L0 0Z"
+                fill="var(--color-background)"
+              ></path>
+            </g>
+          </g>
+          <rect width="1400" height="900" fill="url(#grid)" />
+        </svg>
+      </div>
+      <div className="relative container">
+        <div className="flex flex-col items-center text-center">
+          <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+            توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                                </h1>
+          <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+            بلاک‌های آماده را متناسب با نیاز خود سفارشی‌سازی کنید و بدون شروع از صفر، پروژه را توسعه دهید.
+                                </p>
+          <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
+            <Button variant="outline" className="w-full sm:w-auto">
+              مشاهده امکانات
+                                      </Button>
+            <Button className="w-full sm:w-auto">شروع رایگان</Button>
+          </div>
+        </div>
+      </div>
+      <div className="relative container">
+        <div className="mt-16 -mb-48 flex justify-center gap-4 pt-4">
+          <div className="aspect-3/5 w-[320px] rounded-lg border border-border bg-background" />
+          <div className="absolute inset-0">
+            <div className="hidden h-full justify-between px-32 2xl:flex">
+              <div className="flex flex-col gap-8 pb-20">
+                <div className="flex h-[120px] w-[300px] justify-center overflow-clip rounded-lg border border-border bg-background"></div>
+                <div className="flex h-[190px] w-[300px] justify-center overflow-clip rounded-lg border border-border bg-background"></div>
+              </div>
+              <div className="flex flex-col gap-8 pt-20">
+                <div className="flex h-[190px] w-[300px] justify-center overflow-clip rounded-lg border border-border bg-background"></div>
+                <div className="flex h-[120px] w-[300px] justify-center overflow-clip rounded-lg border border-border bg-background"></div>
+              </div>
+            </div>
+            <div className="mx-auto hidden h-full max-w-6xl items-start justify-between px-12 pt-24 md:flex 2xl:hidden">
+              <div className="flex flex-col gap-8 pb-32">
+                <div className="flex h-[120px] w-[300px] justify-center overflow-clip rounded-lg border border-border bg-background"></div>
+              </div>
+              <div className="flex flex-col gap-8 pt-32">
+                <div className="flex h-[190px] w-[300px] justify-center overflow-clip rounded-lg border border-border bg-background"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero31 };
diff --git a/blocks/hero32.tsx b/blocks/hero32.tsx
new file mode 100644
index 0000000..18b6787
--- /dev/null
+++ b/blocks/hero32.tsx
@@ -0,0 +1,149 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Integration {
+  id: string;
+  icon: string;
+}
+
+interface Hero32Props {
+  className?: string;
+  heading?: string;
+  description?: string;
+  button?: {
+    text: string;
+    url: string;
+  };
+  integrations?: Integration[][];
+}
+
+const Hero32 = ({
+  heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه رابط کاربری",
+  description = "تمام بلاک، تصاویر و بخش‌های رابط کاربری به‌صورت مستقل طراحی شده‌اند تا به‌راحتی قابل سفارشی‌سازی باشند.",
+  button = {
+    text: "مشاهده همه بلاک‌ها",
+    url: "https://www.ShadcnBlocks",
+  },
+  integrations = [
+    [
+      {
+        id: "integration-1",
+        icon: "/block-media/shadcnblocks/block/block-1.svg",
+      },
+      {
+        id: "integration-2",
+        icon: "/block-media/shadcnblocks/block/block-2.svg",
+      },
+      {
+        id: "integration-3",
+        icon: "/block-media/shadcnblocks/block/block-3.svg",
+      },
+      {
+        id: "integration-4",
+        icon: "/block-media/shadcnblocks/block/block-4.svg",
+      },
+      {
+        id: "integration-5",
+        icon: "/block-media/shadcnblocks/block/block-5.svg",
+      },
+    ],
+    [
+      {
+        id: "integration-6",
+        icon: "/block-media/shadcnblocks/block/block-6.svg",
+      },
+      {
+        id: "integration-7",
+        icon: "/block-media/shadcnblocks/block/block-1.svg",
+      },
+      {
+        id: "integration-8",
+        icon: "/block-media/shadcnblocks/block/block-2.svg",
+      },
+      {
+        id: "integration-9",
+        icon: "/block-media/shadcnblocks/block/block-3.svg",
+      },
+      {
+        id: "integration-10",
+        icon: "/block-media/shadcnblocks/block/block-4.svg",
+      },
+    ],
+    [
+      {
+        id: "integration-11",
+        icon: "/block-media/shadcnblocks/block/block-5.svg",
+      },
+      {
+        id: "integration-12",
+        icon: "/block-media/shadcnblocks/block/block-6.svg",
+      },
+      {
+        id: "integration-13",
+        icon: "/block-media/shadcnblocks/block/block-1.svg",
+      },
+      {
+        id: "integration-14",
+        icon: "/block-media/shadcnblocks/block/block-2.svg",
+      },
+      {
+        id: "integration-15",
+        icon: "/block-media/shadcnblocks/block/block-3.svg",
+      },
+    ],
+  ],
+  className,
+}: Hero32Props) => {
+  return (
+    <section className={cn("relative overflow-hidden", className)}>
+      <div className="absolute inset-x-0 top-0 flex h-full w-full items-center justify-center opacity-100">
+        <img
+          alt="پس‌زمینه"
+          src="/block-media/shadcnblocks/block/patterns/square-alt-grid.svg"
+          className="[mask-image:radial-gradient(75%_75%_at_center,white,transparent)] opacity-90"
+        />
+      </div>
+      <div className="relative">
+        <div className="relative container flex flex-col items-start md:flex-row md:items-center md:-space-x-26">
+          <div className="z-20 w-full shrink-0 bg-background pt-32 md:-mx-4 md:w-1/2 md:bg-transparent md:px-4 md:pb-32">
+            <div className="flex flex-col items-start text-start">
+              <div className="max-w-sm">
+                <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+                  {heading}
+                </h1>
+                <p className="text-muted-foreground">{description}</p>
+                <Button asChild size="lg" className="mt-10">
+                  <a href={button.url}>{button.text}</a>
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="flex -translate-x-10 flex-col gap-8 pt-12 pb-8 sm:-translate-x-0 md:gap-16 md:py-32">
+              {integrations.map((line, i) => (
+                <div key={i} className="flex gap-x-22 even:translate-x-22">
+                  {line.map((integration) => (
+                    <div
+                      key={integration.id}
+                      className="size-22 rounded-xl border border-background bg-background shadow-xl"
+                    >
+                      <div className="h-full w-full bg-muted/20 p-4">
+                        <img
+                          alt="یکپارچه‌سازی"
+                          src={integration.icon}
+                          className="size-full dark:invert"
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero32 };
diff --git a/blocks/hero33.tsx b/blocks/hero33.tsx
new file mode 100644
index 0000000..8dbf0ba
--- /dev/null
+++ b/blocks/hero33.tsx
@@ -0,0 +1,56 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero33Props {
+  className?: string;
+}
+
+const Hero33 = ({ className }: Hero33Props) => {
+  return (
+    <section className={cn("", className)}>
+      <div className="lg:container">
+        <div className="grid items-center gap-8 lg:grid-cols-2">
+          <div className="container flex flex-col items-center py-12 text-center lg:mx-auto lg:items-start lg:px-0 lg:text-start">
+            <p>نسخه جدید منتشر شد</p>
+            <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+              توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                                      </h1>
+            <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+              بلاک‌های آماده را متناسب با نیاز خود سفارشی‌سازی کنید و بدون شروع از صفر، پروژه را توسعه دهید.
+                                      </p>
+            <div className="mb-24 flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              <Button className="w-full sm:w-auto">
+                شروع رایگان
+                                              <ArrowRight className="size-4 rtl:rotate-180" />
+              </Button>
+              <Button variant="outline" className="w-full sm:w-auto">
+                مشاهده امکانات
+                                            </Button>
+            </div>
+            <div className="rounded border border-border px-8 py-6">
+              <p className="mb-2 text-xl font-medium">شروع پلن‌ها از</p>
+              <div className="mb-4 flex items-baseline justify-center lg:justify-start">
+                <div className="text-xl font-bold lg:text-2xll">۹۹ دلار</div>
+                <div className="text-xl leading-none font-bold lg:text-xl lg:leading-none">
+                  /کاربر
+                </div>
+              </div>
+              <p className="text-sm">
+                پلن‌های متنوع برای تیم‌های کوچک تا سازمان‌های بزرگ، بدون هزینه‌های پنهان.
+                                            </p>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه قهرمان"
+            className="h-full w-full object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero33 };
diff --git a/blocks/hero34.tsx b/blocks/hero34.tsx
new file mode 100644
index 0000000..4f657fc
--- /dev/null
+++ b/blocks/hero34.tsx
@@ -0,0 +1,42 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero34Props {
+  className?: string;
+}
+
+const Hero34 = ({ className }: Hero34Props) => {
+  return (
+    <section className={cn("", className)}>
+      <div className="container">
+        <div className="grid items-center gap-8 bg-muted lg:grid-cols-2">
+          <div className="flex flex-col items-center p-16 text-center lg:items-start lg:text-start">
+            <p>نسخه جدید منتشر شد</p>
+            <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+              توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                                      </h1>
+            <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+              بلاک‌های آماده را متناسب با نیاز خود سفارشی‌سازی کنید و بدون شروع از صفر، پروژه را توسعه دهید.
+                                      </p>
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              <Button>
+                شروع رایگان
+                                              <ArrowRight className="size-4 rtl:rotate-180" />
+              </Button>
+              <Button variant="outline">مشاهده امکانات</Button>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه قهرمان"
+            className="h-full w-full object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero34 };
diff --git a/blocks/hero35.tsx b/blocks/hero35.tsx
new file mode 100644
index 0000000..a9ec200
--- /dev/null
+++ b/blocks/hero35.tsx
@@ -0,0 +1,58 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero35Props {
+  className?: string;
+}
+
+const Hero35 = ({ className }: Hero35Props) => {
+  return (
+    <section className={cn("", className)}>
+      <div className="lg:container">
+        <div className="grid items-center gap-8 lg:grid-cols-2">
+          <div className="container flex flex-col items-center py-32 text-center lg:mx-auto lg:items-start lg:px-0 lg:text-start">
+            <p>نسخه جدید منتشر شد</p>
+            <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+              توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                                      </h1>
+            <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+              بلاک‌های آماده را متناسب با نیاز خود سفارشی‌سازی کنید و بدون شروع از صفر، پروژه را توسعه دهید.
+                                      </p>
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              <Button className="w-full sm:w-auto">
+                <ArrowRight className="me-2 size-4 rtl:rotate-180" />
+                شروع رایگان
+                                            </Button>
+              <Button variant="outline" className="w-full sm:w-auto">
+                مشاهده امکانات
+                                            </Button>
+            </div>
+          </div>
+          <div className="grid aspect-3/4 grid-cols-[1fr_10fr_1fr] grid-rows-[2fr_10fr_2fr] bg-accent">
+            <div className="border-r border-b border-border"></div>
+            <div className="border-b border-border"></div>
+            <div className="relative border-b border-l border-border">
+              <div className="absolute -bottom-[6px] -left-[6px] size-[12px] rounded-full border-[3px] border-[hsl(var(--color-accent-foreground))] bg-accent-foreground ring-[8px] ring-accent"></div>
+            </div>
+            <div className="border-r"></div>
+            <div className="relative">
+              <div className="absolute top-[8%] left-[12%] flex aspect-3/4 w-[60%] justify-center rounded-lg border border-border bg-background"></div>
+              <div className="absolute top-[20%] right-[10%] flex aspect-square w-[30%] justify-center rounded-lg border border-border bg-background"></div>
+              <div className="absolute bottom-[8%] left-[36%] flex aspect-4/3 w-[50%] justify-center rounded-lg border border-border bg-background"></div>
+            </div>
+            <div className="border-l"></div>
+            <div className="relative border-t border-r border-border">
+              <div className="absolute -top-[6px] -right-[6px] size-[12px] rounded-full border-[3px] border-[hsl(var(--color-accent-foreground))] bg-accent-foreground ring-[8px] ring-accent"></div>
+            </div>
+            <div className="border-t border-border"></div>
+            <div className="border-t border-l border-border"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero35 };
diff --git a/blocks/hero36.tsx b/blocks/hero36.tsx
new file mode 100644
index 0000000..58152b2
--- /dev/null
+++ b/blocks/hero36.tsx
@@ -0,0 +1,94 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+// Move card data outside the component
+const heroCards = [
+  {
+    title: "طراحی محصول",
+    image:
+      "/block-media/shadcnblocks/block/block-1.svg",
+    description:
+      "رابط‌های کاربری زیبا و کاربردی که تجربه مشتری را ارتقا می‌دهند.",
+  },
+  {
+    title: "توسعه",
+    image:
+      "/block-media/shadcnblocks/block/block-2.svg",
+    description:
+      "پیاده‌سازی سریع و پایدار با فناوری‌های مدرن و معماری مقیاس‌پذیر.",
+  },
+  {
+    title: "بازاریابی",
+    image:
+      "/block-media/shadcnblocks/block/block-3.svg",
+    description:
+      "استراتژی‌های هدفمند برای رشد برند و جذب مخاطبان جدید.",
+  },
+];
+
+interface Hero36Props {
+  className?: string;
+}
+
+const Hero36 = ({ className }: Hero36Props) => {
+  return (
+    <section
+      className={cn(
+        "relative overflow-hidden bg-accent py-24 md:py-32",
+        className,
+      )}
+    >
+      <div className="absolute inset-0 opacity-50">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.15),transparent_50%)]"></div>
+      </div>
+      <div className="relative container flex flex-col items-center text-center">
+        <Badge
+          variant="outline"
+          className="px-4 py-1.5 text-xs font-medium uppercase"
+        >
+          نسخه جدید منتشر شد
+                          </Badge>
+        <h1 className="my-4 max-w-3xl text-xl font-bold text-pretty sm:text-xl md:my-6 lg:text-2xll">
+          ابزارهایی برای رشد سریع‌تر کسب‌وکارهای دیجیتال
+                          </h1>
+        <p className="max-w-2xl text-muted-foreground">
+          با استفاده از کامپوننت‌های استاندارد، توسعه محصول را سریع‌تر و باکیفیت‌تر انجام دهید.
+                          </p>
+      </div>
+      <div className="container mt-12 grid gap-6 md:mt-16 md:grid-cols-3 md:gap-8">
+        {heroCards.map((item, index) => (
+          <a
+            key={index}
+            href="#"
+            className={cn(
+              "relative flex flex-col items-center rounded-xl border bg-background/70 px-6 py-10 text-center backdrop-blur-sm lg:px-8 lg:py-12",
+              index === 1 && "md:translate-y-4",
+            )}
+          >
+            <div className="mb-6 flex aspect-square w-16 items-center justify-center md:w-20 lg:mb-8">
+              <img
+                src={item.image}
+                alt={item.title}
+                className="h-full w-full object-contain object-center"
+              />
+            </div>
+            <h3 className="mb-3 text-lg font-semibold md:text-xl">
+              {item.title}
+            </h3>
+            <p className="mb-auto text-sm text-muted-foreground">
+              {item.description}
+            </p>
+            <div className="mt-8 flex items-center text-primary md:mt-10">
+              <span className="font-medium">مشاهده جزئیات</span>
+              <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Hero36 };
diff --git a/blocks/hero37.tsx b/blocks/hero37.tsx
new file mode 100644
index 0000000..0acb677
--- /dev/null
+++ b/blocks/hero37.tsx
@@ -0,0 +1,67 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero37Props {
+  className?: string;
+}
+
+const Hero37 = ({ className }: Hero37Props) => {
+  return (
+    <section className={cn("overflow-hidden py-32", className)}>
+      <div className="container flex flex-col items-center text-center">
+        <p className="text-xs uppercase">نسخه جدید منتشر شد</p>
+        <h1 className="my-3 text-xl font-bold text-pretty sm:text-xl md:my-6 lg:text-2xll">
+          توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                          </h1>
+        <p className="mb-6 max-w-xl text-muted-foreground md:mb-12 lg:text-xl">
+          کامپوننت‌ها و بلاک‌های آماده به شما کمک می‌کنند بدون اتلاف زمان، رابط کاربری حرفه‌ای ایجاد کنید.
+                          </p>
+        <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
+          <Button className="w-full sm:w-auto">
+            <ArrowRight className="me-2 size-4 rtl:rotate-180" />
+            شروع رایگان
+                                </Button>
+          <Button variant="outline" className="w-full sm:w-auto">
+            مشاهده امکانات
+                                </Button>
+        </div>
+      </div>
+      <div className="mt-16 flex flex-col items-center justify-center lg:mt-32">
+        <div className="b relative mx-auto aspect-square w-[95%] max-w-[31.25rem] sm:w-full">
+          <div className="absolute inset-x-1/2 top-full z-0 flex w-[120rem] -translate-x-1/2 -translate-y-[4rem] md:-translate-y-[2rem]">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              version="1.1"
+              viewBox="0 0 800 800"
+              className="h-full w-full text-muted-foreground opacity-20"
+            >
+              {Array.from(Array(4000).keys()).map((dot, index, array) => {
+                const angle = 0.2 * index;
+                const scalar = 300 + index * (100 / array.length);
+                const x = Math.round(Math.cos(angle) * scalar);
+                const y = Math.round(Math.sin(angle) * scalar);
+                return (
+                  <circle
+                    key={index}
+                    r={1}
+                    cx={400 + x}
+                    cy={400 + y}
+                    fill="currentColor"
+                    opacity={(array.length - index) / array.length}
+                  />
+                );
+              })}
+            </svg>
+          </div>
+          <div className="absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center rounded-lg border border-border bg-accent opacity-60 md:w-[21.25rem] md:max-w-[21.25rem]"></div>
+          <div className="absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center rounded-lg border border-border bg-accent md:w-[21.25rem] md:max-w-[21.25rem]"></div>
+          <div className="absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[75%] translate-y-[10%] scale-[0.85] rotate-[15deg] justify-center rounded-lg border border-border bg-accent opacity-60 md:w-[21.25rem] md:max-w-[21.25rem]"></div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero37 };
diff --git a/blocks/hero38.tsx b/blocks/hero38.tsx
new file mode 100644
index 0000000..7482a52
--- /dev/null
+++ b/blocks/hero38.tsx
@@ -0,0 +1,69 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero38Props {
+  className?: string;
+}
+
+const Hero38 = ({ className }: Hero38Props) => {
+  return (
+    <section className={cn("", className)}>
+      <div className="container">
+        <div className="grid items-center gap-8 lg:grid-cols-2">
+          <div className="flex flex-col items-center py-32 text-center lg:mx-auto lg:items-start lg:px-0 lg:text-start">
+            <p>نسخه جدید منتشر شد</p>
+            <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+              توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                                      </h1>
+            <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+              بلاک‌های آماده را متناسب با نیاز خود سفارشی‌سازی کنید و بدون شروع از صفر، پروژه را توسعه دهید.
+                                      </p>
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              <Button className="w-full sm:w-auto">
+                <ArrowRight className="me-2 size-4 rtl:rotate-180" />
+                شروع رایگان
+                                            </Button>
+              <Button variant="outline" className="w-full sm:w-auto">
+                مشاهده امکانات
+                                            </Button>
+            </div>
+          </div>
+          <div className="relative aspect-3/4">
+            <div className="absolute inset-0 flex items-center justify-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                version="1.1"
+                viewBox="0 0 800 800"
+                className="h-full w-full text-muted-foreground opacity-20"
+              >
+                {Array.from(Array(720).keys()).map((dot, index, array) => {
+                  const angle = 0.2 * index;
+                  const scalar = 40 + index * (360 / array.length);
+                  const x = Math.round(Math.cos(angle) * scalar);
+                  const y = Math.round(Math.sin(angle) * scalar);
+
+                  return (
+                    <circle
+                      key={index}
+                      r={(3 * index) / array.length}
+                      cx={400 + x}
+                      cy={400 + y}
+                      opacity={1 - Math.sin(angle)}
+                    />
+                  );
+                })}
+              </svg>
+            </div>
+            <div className="absolute top-[10%] left-[8%] flex aspect-5/6 w-[38%] justify-center rounded-lg border border-border bg-accent"></div>
+            <div className="absolute top-[20%] right-[12%] flex aspect-square w-[20%] justify-center rounded-lg border border-border bg-accent"></div>
+            <div className="absolute right-[24%] bottom-[24%] flex aspect-5/6 w-[38%] justify-center rounded-lg border border-border bg-accent"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero38 };
diff --git a/blocks/hero39.tsx b/blocks/hero39.tsx
new file mode 100644
index 0000000..6d215c6
--- /dev/null
+++ b/blocks/hero39.tsx
@@ -0,0 +1,46 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero39Props {
+  className?: string;
+}
+
+const Hero39 = ({ className }: Hero39Props) => {
+  return (
+    <section className={cn("", className)}>
+      <div className="container flex flex-col items-center">
+        <div className="2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-accent/50">
+          <div className="grid items-center gap-8 lg:grid-cols-2">
+            <div className="container flex flex-col items-center px-[4rem] py-16 text-center lg:mx-auto lg:items-start lg:px-[4rem] lg:py-32 lg:text-start">
+              <p>نسخه جدید منتشر شد</p>
+              <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+                توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
+                                            </h1>
+              <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+                بلاک‌های آماده را متناسب با نیاز خود سفارشی‌سازی کنید و بدون شروع از صفر، پروژه را توسعه دهید.
+                                            </p>
+              <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+                <Button className="w-full sm:w-auto">
+                  <ArrowRight className="me-2 size-4 rtl:rotate-180" />
+                  شروع رایگان
+                                                  </Button>
+              </div>
+            </div>
+            <div className="flex flex-col items-center justify-center">
+              <div className="relative aspect-7/8 h-full w-full">
+                <div className="absolute top-[12%] right-[50%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent"></div>
+                <div className="absolute top-[36%] right-[50%] flex aspect-5/6 w-[40%] justify-center rounded-lg border border-border bg-accent"></div>
+                <div className="absolute bottom-[36%] left-[54%] flex aspect-5/6 w-[40%] justify-center rounded-lg border border-border bg-accent"></div>
+                <div className="absolute bottom-[12%] left-[54%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero39 };
diff --git a/blocks/hero4.tsx b/blocks/hero4.tsx
new file mode 100644
index 0000000..745c08f
--- /dev/null
+++ b/blocks/hero4.tsx
@@ -0,0 +1,89 @@
+import { ArrowDownRight, Star } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero4Props {
+  className?: string;
+}
+
+const Hero4 = ({ className }: Hero4Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container grid items-center gap-10 lg:grid-cols-2 lg:gap-20">
+        <div className="flex justify-end bg-muted">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه قهرمان"
+            className="max-h-[600px] w-full rounded-md object-cover lg:max-h-[800px]"
+          />
+        </div>
+        <div className="flex flex-col items-center text-center lg:max-w-3xl lg:items-start lg:text-start">
+          <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll xl:text-2xll">
+            مجموعه‌ای از بلاک‌های آماده برای توسعه سریع رابط کاربری
+                                </h1>
+          <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید بدون نیاز به طراحی از ابتدا، مستقیماً در پروژه‌های خود استفاده کنید.
+                                </p>
+          <div className="mb-12 flex w-fit flex-col items-center gap-4 sm:flex-row">
+            <span className="inline-flex items-center -space-x-4">
+              <Avatar className="size-12 border">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-1.webp"
+                  alt="نمونه"
+                />
+              </Avatar>
+              <Avatar className="size-12 border">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-2.webp"
+                  alt="نمونه"
+                />
+              </Avatar>
+              <Avatar className="size-12 border">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-3.webp"
+                  alt="نمونه"
+                />
+              </Avatar>
+              <Avatar className="size-12 border">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-4.webp"
+                  alt="نمونه"
+                />
+              </Avatar>
+              <Avatar className="size-12 border">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-5.webp"
+                  alt="نمونه"
+                />
+              </Avatar>
+            </span>
+            <div>
+              <div className="flex items-center gap-1">
+                <Star className="size-5 fill-yellow-400 text-yellow-400" />
+                <Star className="size-5 fill-yellow-400 text-yellow-400" />
+                <Star className="size-5 fill-yellow-400 text-yellow-400" />
+                <Star className="size-5 fill-yellow-400 text-yellow-400" />
+                <Star className="size-5 fill-yellow-400 text-yellow-400" />
+                <span className="font-semibold">5.0</span>
+              </div>
+              <p className="text-start font-medium text-muted-foreground">
+                از بیش از ۲۰۰ نظر
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+            <Button className="w-full sm:w-auto">ایجاد حساب کاربری</Button>
+            <Button variant="outline" className="w-full sm:w-auto">
+              شروع رایگان
+                                        <ArrowDownRight className="ms-2 size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero4 };
diff --git a/blocks/hero40.tsx b/blocks/hero40.tsx
new file mode 100644
index 0000000..44b2405
--- /dev/null
+++ b/blocks/hero40.tsx
@@ -0,0 +1,146 @@
+import {
+  ArrowRight,
+  ChartLine,
+  Check,
+  Cloud,
+  CloudCog,
+  Play,
+  Share2,
+  Sparkles,
+  Video,
+} from "lucide-react";
+
+import { Marquee } from "@/components/ui/marquee";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const integrations = [
+  {
+    name: "ذخیره‌سازی",
+    description: "فایل‌های ویدیویی خود را به‌صورت امن در فضای ذخیره‌سازی دلخواه مدیریت کنید.",
+    icon: Cloud,
+  },
+  {
+    name: "هوش مصنوعی",
+    description: "با کمک هوش مصنوعی، تولید محتوای ویدیویی و تصویری را سرعت دهید.",
+    icon: Sparkles,
+  },
+  {
+    name: "تدوین ویدیو",
+    description: "ویدیوها را با ابزارهای حرفه‌ای ویرایش و آماده انتشار کنید.",
+    icon: Video,
+  },
+  {
+    name: "میزبانی ویدیو",
+    description: "محتوا را مستقیماً در سرویس‌های میزبانی ویدیویی منتشر کنید.",
+    icon: CloudCog,
+  },
+  {
+    name: "شبکه‌های اجتماعی",
+    description: "ویدیوهای خود را تنها با چند کلیک در شبکه‌های اجتماعی منتشر کنید.",
+    icon: Share2,
+  },
+  {
+    name: "تحلیل",
+    description: "عملکرد و بازخورد ویدیوها را با ابزارهای تحلیلی بررسی کنید.",
+    icon: ChartLine,
+  },
+];
+
+interface Hero40Props {
+  className?: string;
+}
+
+const Hero40 = ({ className }: Hero40Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          <div className="flex flex-col gap-6">
+            <h1 className="text-2xll font-bold">
+              همه ابزارهای موردنیاز خود را یکپارچه کنید
+                                      </h1>
+            <p className="text-lg text-muted-foreground">
+              تمام سرویس‌ها و ابزارهای کاری خود را به یکدیگر متصل کنید و فرایند تولید و انتشار محتوا را ساده‌تر کنید.
+                                      </p>
+            <div className="flex gap-4">
+              <Button variant="outline" size="lg">
+                <span>مشاهده دمو</span>
+                <Play />
+              </Button>
+              <Button size="lg">
+                <span>شروع رایگان</span>
+                <ArrowRight className="rtl:rotate-180" />
+              </Button>
+            </div>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                <Check className="size-4 text-green-500" />
+                <p className="text-sm text-muted-foreground">
+                  بیش از <span className="font-bold">۱۰۰</span> یکپارچه‌سازی
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Check className="size-4 text-green-500" />
+                <p className="text-sm text-muted-foreground">
+                  نسخه آزمایشی <span className="font-bold">۳۰ روزه</span>
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Check className="size-4 text-green-500" />
+                <p className="text-sm text-muted-foreground">
+                  پشتیبانی تخصصی <span className="font-bold">۲۴/۷</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-6">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر نمونه"
+              className="aspect-video w-full rounded-lg border border-border object-cover"
+            />
+            <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+              <Marquee className="[--duration:30s]">
+                {integrations.map((integration) => (
+                  <div
+                    key={integration.name}
+                    className="flex max-w-72 gap-2 rounded-lg border border-border p-4 dark:bg-muted"
+                  >
+                    <integration.icon className="mt-0.5 size-4 shrink-0" />
+                    <div className="flex flex-col gap-2">
+                      <p className="text-sm">{integration.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {integration.description}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </Marquee>
+              <Marquee reverse className="[--duration:30s]">
+                {integrations.map((integration) => (
+                  <div
+                    key={integration.name}
+                    className="flex max-w-72 gap-2 rounded-lg border border-border p-4 dark:bg-muted"
+                  >
+                    <integration.icon className="mt-0.5 size-4 shrink-0" />
+                    <div className="flex flex-col gap-2">
+                      <p className="text-sm">{integration.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {integration.description}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </Marquee>
+              <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background"></div>
+              <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero40 };
diff --git a/blocks/hero45.tsx b/blocks/hero45.tsx
new file mode 100644
index 0000000..f587e8a
--- /dev/null
+++ b/blocks/hero45.tsx
@@ -0,0 +1,86 @@
+import { HandHelping, Users, Zap } from "lucide-react";
+import React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import type { HeroFeatureIconsProps } from "@/lib/hero-feature-icons";
+import { cn } from "@/lib/utils";
+
+const Hero45 = ({
+  badge = "پلتفرم توسعه",
+  heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه رابط کاربری",
+  images = [
+    {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "تصویر نمونه",
+    },
+  ],
+  features = [
+    {
+      icon: HandHelping,
+      title: "پشتیبانی حرفه‌ای",
+      description:
+        "کارشناسان ما آماده‌اند تا در تمام مراحل راه‌اندازی و توسعه همراه شما باشند.",
+    },
+    {
+      icon: Users,
+      title: "همکاری تیمی",
+      description:
+        "با ابزارهای مدیریت پروژه و ارتباطات، همکاری میان اعضای تیم را بهبود دهید.",
+    },
+    {
+      icon: Zap,
+      title: "عملکرد سریع",
+      description:
+        "زیرساخت بهینه، سرعت بالا و عملکرد پایدار را برای کاربران فراهم می‌کند.",
+    },
+  ],
+  className,
+}: HeroFeatureIconsProps) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container overflow-hidden">
+        <div className="mb-20 flex flex-col items-center gap-6 text-center">
+          <Badge variant="outline">{badge}</Badge>
+          <h1 className="text-xl font-semibold lg:text-2xll">{heading}</h1>
+        </div>
+        <div className="relative mx-auto max-w-5xl">
+          <img
+            src={images[0].src}
+            alt={images[0].alt}
+            className="aspect-video max-h-[500px] w-full rounded-xl object-cover"
+          />
+          <div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent"></div>
+          <div className="absolute -top-28 -right-28 -z-10 aspect-video h-72 w-96 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_20%,transparent_100%)] [background-size:12px_12px] opacity-40 sm:bg-[radial-gradient(hsl(var(--muted-foreground))_1px,transparent_1px)]"></div>
+          <div className="absolute -top-28 -left-28 -z-10 aspect-video h-72 w-96 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_20%,transparent_100%)] [background-size:12px_12px] opacity-40 sm:bg-[radial-gradient(hsl(var(--muted-foreground))_1px,transparent_1px)]"></div>
+        </div>
+        <div className="mx-auto mt-10 flex max-w-5xl flex-col md:flex-row">
+          {features.map((feature, index) => (
+            <React.Fragment key={feature.title}>
+              {index > 0 && (
+                <Separator
+                  orientation="vertical"
+                  className="mx-6 hidden h-auto w-[2px] bg-linear-to-b from-muted via-transparent to-muted md:block"
+                />
+              )}
+              <div
+                key={index}
+                className="flex grow basis-0 flex-col rounded-md bg-background p-4"
+              >
+                <div className="mb-6 flex size-10 items-center justify-center rounded-full bg-background drop-shadow-lg">
+                  <feature.icon className="h-auto w-5" />
+                </div>
+                <h3 className="mb-2 font-semibold">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero45 };
diff --git a/blocks/hero47.tsx b/blocks/hero47.tsx
new file mode 100644
index 0000000..6f4c4e6
--- /dev/null
+++ b/blocks/hero47.tsx
@@ -0,0 +1,95 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero47Props {
+  heading?: string;
+  subheading?: string;
+  description?: string;
+  image?: {
+    src: string;
+    alt: string;
+  };
+  buttons?: {
+    primary?: {
+      text: string;
+      url: string;
+    };
+    secondary?: {
+      text: string;
+      url: string;
+    };
+  };
+  className?: string;
+}
+
+const Hero47 = ({
+  heading = "مجموعه بلاک‌های آماده",
+  subheading = "مبتنی بر shadcn/ui و Tailwind CSS",
+  description = "صدها بلاک و کامپوننت آماده برای توسعه سریع رابط کاربری که مستقیماً در پروژه‌های رابط کاربری قابل استفاده هستند.",
+  buttons = {
+    primary: {
+      text: "شروع رایگان",
+      url: "#",
+    },
+    secondary: {
+      text: "مطالعه مستندات",
+      url: "#",
+    },
+  },
+  image = {
+    src: "/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg",
+    alt: "تصویر نمونه",
+  },
+  className,
+}: Hero47Props) => {
+  return (
+    <section className={cn("bg-background py-20 lg:py-32", className)}>
+      <div className="container flex flex-col items-center gap-10 lg:my-0 lg:flex-row">
+        <div className="flex flex-col gap-7 lg:w-2/3">
+          <h2 className="text-2xll font-semibold text-foreground md:text-2xll lg:text-8xl">
+            <span>{heading}</span>
+            <span className="text-muted-foreground">{subheading}</span>
+          </h2>
+          <p className="text-base text-muted-foreground md:text-lg lg:text-xl">
+            {description}
+          </p>
+          <div className="flex flex-wrap items-start gap-5 lg:gap-7">
+            <Button asChild>
+              <a href={buttons.primary?.url}>
+                <div className="flex items-center gap-2">
+                  <ArrowUpRight className="size-4" />
+                </div>
+                <span className="pe-6 ps-4 text-sm whitespace-nowrap lg:pe-8 lg:ps-6 lg:text-base">
+                  {buttons.primary?.text}
+                </span>
+              </a>
+            </Button>
+            <Button asChild variant="link" className="underline">
+              <a href={buttons.secondary?.url}>{buttons.secondary?.text}</a>
+            </Button>
+          </div>
+        </div>
+        <div className="relative z-10">
+          <div className="absolute top-2.5 left-1/2! h-[92%]! w-[69%]! -translate-x-[52%] overflow-hidden rounded-[35px]">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="size-full object-cover object-[50%_0%]"
+            />
+          </div>
+          <img
+            className="relative z-10"
+            src="/block-media/shadcnblocks/block/mockups/phone-2.png"
+            width={450}
+            height={889}
+            alt="آیفون"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero47 };
diff --git a/blocks/hero49.tsx b/blocks/hero49.tsx
new file mode 100644
index 0000000..812103f
--- /dev/null
+++ b/blocks/hero49.tsx
@@ -0,0 +1,56 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero49Props {
+  className?: string;
+}
+
+const Hero49 = ({ className }: Hero49Props) => {
+  return (
+    <section className={cn("bg-background", className)}>
+      <div className="container mx-auto flex flex-col items-center px-4 pt-10">
+        <div className="flex max-w-3xl flex-col items-center gap-8 text-center">
+          <h1 className="text-2xll font-semibold text-foreground lg:text-8xl">
+            مدیریت مالی را هوشمندانه‌تر انجام دهید
+                                </h1>
+          <p className="text-4 max-w-xl leading-[165%] tracking-tight text-muted-foreground">
+            هزینه‌ها، درآمدها و بودجه خود را در یک داشبورد مدیریت کنید و با تحلیل‌های هوشمند تصمیم‌های مالی دقیق‌تری بگیرید.
+                                </p>
+          <Button className="flex h-fit w-fit items-center gap-[8px] rounded-full px-8 py-5 text-base font-medium transition-all hover:scale-95">
+            <img
+              alt="آیکون‌های دانلود فروشگاه اندروید و فروشگاه آی‌اواس"
+              loading="lazy"
+              width="44"
+              height="18"
+              decoding="async"
+              data-nimg="1"
+              src="/block-media/shadcnblocks/block/hero49/download.svg"
+            />
+            <p>همین امروز شروع کنید</p>
+          </Button>
+        </div>
+        <div className="relative translate-x-[14.7%]">
+          {/* Image inside Iphone */}
+          <div className="absolute top-[12%] left-[36.5%]! h-[67%]! w-[31%]! -translate-x-[52%] overflow-hidden rounded-[10px] bg-muted">
+            <img
+              className="min-h-full min-w-full"
+              src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
+              alt=""
+            />
+          </div>
+          {/* Iphone Image  */}
+          <img
+            alt=""
+            src="/block-media/shadcnblocks/block/hero49/iphone.png"
+            className="relative z-10"
+            loading="lazy"
+            width="1008.71"
+            height="857"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero49 };
diff --git a/blocks/hero5.tsx b/blocks/hero5.tsx
new file mode 100644
index 0000000..dd5fcfb
--- /dev/null
+++ b/blocks/hero5.tsx
@@ -0,0 +1,40 @@
+import { Download } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero5Props {
+  className?: string;
+}
+
+const Hero5 = ({ className }: Hero5Props) => {
+  return (
+    <section className={cn("overflow-hidden py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-between gap-20 lg:flex-row">
+          <div className="flex flex-col items-center gap-6 text-center lg:items-start lg:text-start">
+            <h1 className="text-xl font-bold text-pretty lg:max-w-md lg:text-2xll">
+              رابط کاربری حرفه‌ای، سریع و آماده استفاده
+                                      </h1>
+            <p className="max-w-xl text-xl font-medium lg:text-xl">
+              با استفاده از کامپوننت‌های آماده، طراحی و توسعه محصولات دیجیتال را سریع‌تر و باکیفیت‌تر انجام دهید.
+                                      </p>
+            <div className="flex w-full justify-center lg:justify-start">
+              <Button className="w-full sm:w-auto" size="lg">
+                <Download className="me-2 size-5" />
+                مشاهده امکانات
+                                            </Button>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
+            alt="تصویر نمونه قهرمان"
+            className="aspect-video rounded-md object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero5 };
diff --git a/blocks/hero50.tsx b/blocks/hero50.tsx
new file mode 100644
index 0000000..1726dc4
--- /dev/null
+++ b/blocks/hero50.tsx
@@ -0,0 +1,64 @@
+import { Minus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero50Props {
+  className?: string;
+}
+
+const Hero50 = ({ className }: Hero50Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-7 text-center">
+        <a
+          href="#"
+          className="group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm"
+        >
+          <span className="me-1 font-medium">
+            در نظرسنجی کاربران شرکت کنید
+                                </span>
+          نظر شما به بهبود محصول کمک می‌کند.
+                            <Minus className="mx-1 inline-block w-4" />
+          <span className="font-semibold group-hover:underline">
+            مشاهده معرفی محصول
+                                </span>
+        </a>
+        <h1 className="mx-auto max-w-4xl text-xl font-semibold text-balance lg:text-2xll">
+          همه داده‌های کسب‌وکار در یک داشبورد
+                          </h1>
+        <p className="mx-auto max-w-4xl text-muted-foreground lg:text-xl">
+          اطلاعات مشتریان، بازاریابی، فروش و پشتیبانی را در یک محیط یکپارچه مدیریت و تحلیل کنید.
+                          </p>
+        <div className="flex flex-col justify-center gap-4 sm:flex-row">
+          <Button size="lg">شروع رایگان</Button>
+          <Button size="lg" variant="outline">
+            درخواست نسخه نمایشی
+                                </Button>
+        </div>
+      </div>
+      <div className="relative px-8">
+        <div className="absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%"></div>
+        <div className="relative mx-auto max-w-5xl">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="mt-20 max-h-[580px] w-full rounded-lg object-cover shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+            alt="تصویر نمونه"
+            className="absolute top-1/2 -left-3 hidden max-h-56 -translate-y-1/2 rounded-lg object-cover shadow-md md:block xl:-left-10"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
+            alt="تصویر نمونه"
+            className="absolute top-1/3 -right-3 hidden h-24 w-24 -translate-y-1/2 rounded-lg bg-muted shadow-md md:block xl:-right-10"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero50 };
diff --git a/blocks/hero51.tsx b/blocks/hero51.tsx
new file mode 100644
index 0000000..3f0a32b
--- /dev/null
+++ b/blocks/hero51.tsx
@@ -0,0 +1,62 @@
+import { Globe } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero51Props {
+  className?: string;
+}
+
+const Hero51 = ({ className }: Hero51Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="">
+        <div className="relative container mx-auto max-w-xl py-10 text-center">
+          <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-[size:64px_64px]"></div>
+          <h1 className="mb-3 text-xl lg:text-2xll">
+            مدیریت دارایی‌های دیجیتال در یک پلتفرم
+                                </h1>
+          <p className="mb-5 text-sm text-muted-foreground md:text-base">
+            دارایی‌های دیجیتال خود را مدیریت، تحلیل و مبادله کنید و از ابزارهای حرفه‌ای برای تصمیم‌گیری بهتر بهره ببرید.
+                                </p>
+          <Button>ورود به بازار</Button>
+          <div className="mt-7 flex items-start justify-center gap-2 font-medium md:text-xl">
+            <Globe className="mt-0.5 h-auto w-5" />
+            همکاری با شرکت‌های بین‌المللی
+                                </div>
+        </div>
+        <div className="mx-auto mt-14 max-w-7xl overflow-hidden py-8">
+          <div className="relative w-full">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر نمونه"
+              className="relative left-1/2 mx-auto max-h-[480px] w-full rounded-xl object-cover shadow-md lg:static lg:max-w-[60vw] xl:max-w-3xl"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="تصویر نمونه"
+              className="absolute top-0 right-20 -z-10 hidden max-h-60 -rotate-12 rounded-xl object-cover shadow-md lg:block"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="تصویر نمونه"
+              className="absolute right-20 bottom-0 hidden rotate-12 rounded-xl object-cover shadow-md md:max-h-60 lg:block"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-3.svg"
+              alt="تصویر نمونه"
+              className="absolute top-0 left-1/4 -z-10 max-h-44 -rotate-12 rounded-xl object-cover shadow-md min-[450px]:max-h-52 sm:left-1/3 md:max-h-60 lg:left-20"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-4.svg"
+              alt="تصویر نمونه"
+              className="absolute bottom-0 left-1/4 max-h-44 rotate-12 rounded-xl object-cover shadow-md min-[450px]:max-h-52 sm:left-1/3 md:max-h-60 lg:left-20"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero51 };
diff --git a/blocks/hero53.tsx b/blocks/hero53.tsx
new file mode 100644
index 0000000..43736f1
--- /dev/null
+++ b/blocks/hero53.tsx
@@ -0,0 +1,59 @@
+import { Globe } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero53Props {
+  className?: string;
+}
+
+const Hero53 = ({ className }: Hero53Props) => {
+  return (
+    <section className={cn("relative py-32", className)}>
+      <div className="container px-4 sm:px-6 md:px-8">
+        <div className="absolute inset-0 -z-10 h-full w-full bg-[radial-gradient(var(--muted-foreground)_1px,transparent_1px)] [background-size:14px_14px] opacity-35"></div>
+        <h1 className="text-2xll font-bold tracking-tight md:text-2xll lg:text-2xll xl:text-8xl">
+          مدیریت کد و مستندات را ساده‌تر کنید.
+                          </h1>
+        <div className="mt-10 flex flex-col-reverse gap-8 md:mt-12 md:flex-row md:items-center md:gap-10 lg:mt-14">
+          <div className="flex flex-col gap-6">
+            <Button className="px-6 py-5 sm:w-fit">
+              درخواست دسترسی <Globe className="size-4" />
+            </Button>
+            <div className="flex items-center gap-3">
+              <span className="inline-flex items-center -space-x-1.5">
+                <Avatar className="size-7 border">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-1.webp"
+                    alt="نمونه"
+                  />
+                </Avatar>
+                <Avatar className="size-7 border">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-6.webp"
+                    alt="نمونه"
+                  />
+                </Avatar>
+                <Avatar className="size-7 border">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-3.webp"
+                    alt="نمونه"
+                  />
+                </Avatar>
+              </span>
+              <p className="text-sm text-muted-foreground">
+                مورد اعتماد بیش از ۲۰۰۰ توسعه‌دهنده در سراسر جهان
+              </p>
+            </div>
+          </div>
+          <p className="max-w-lg text-xl leading-relaxed text-muted-foreground">
+            با خودکارسازی مستندسازی، مدیریت وظایف و دانش فنی، سرعت توسعه تیم را افزایش دهید.
+                                </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero53 };
diff --git a/blocks/hero55.tsx b/blocks/hero55.tsx
new file mode 100644
index 0000000..c153b47
--- /dev/null
+++ b/blocks/hero55.tsx
@@ -0,0 +1,40 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero55Props {
+  className?: string;
+}
+
+const Hero55 = ({ className }: Hero55Props) => {
+  return (
+    <section className={cn("relative py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-10 text-center">
+          <a
+            href="#"
+            className="flex items-center gap-2 rounded-full px-2 py-1 text-sm transition-colors hover:bg-muted"
+          >
+            <Badge>۷ روز پیش</Badge>
+            یکپارچه‌سازی پیام‌رسان تیمی منتشر شد
+                                  <ArrowRight className="h-auto w-4 rtl:rotate-180" />
+          </a>
+          <h1 className="text-xl font-semibold lg:text-8xl">
+            مدیریت طراحی و پروژه در یک محیط واحد
+                                </h1>
+          <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
+            <Button size="lg">شروع رایگان</Button>
+            <Button size="lg" variant="outline">
+              درخواست نسخه نمایشی
+                                      </Button>
+          </div>
+        </div>
+      </div>
+      <div className="absolute inset-0 -z-10 bg-[50%_0] bg-[url('/block-media/shadcnblocks/block/shadow-overlay.png')] bg-no-repeat"></div>
+    </section>
+  );
+};
+
+export { Hero55 };
diff --git a/blocks/hero57.tsx b/blocks/hero57.tsx
new file mode 100644
index 0000000..710e035
--- /dev/null
+++ b/blocks/hero57.tsx
@@ -0,0 +1,63 @@
+import { CheckCircle2, Globe, Lock, Star, Zap } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero57Props {
+  className?: string;
+}
+
+const Hero57 = ({ className }: Hero57Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div
+          className="absolute inset-0 top-0 -z-10 mx-auto max-h-[600px] w-full opacity-10"
+          style={{
+            backgroundImage: `url('/block-media/shadcnblocks/block/patterns/grid3.svg')`,
+            backgroundRepeat: "repeat",
+            maskImage:
+              "radial-gradient(ellipse 80% 100% at 50% 30%, #000 40%, transparent 75%)",
+            WebkitMaskImage:
+              "radial-gradient(ellipse 80% 100% at 50% 30%, #000 40%, transparent 75%)",
+          }}
+        ></div>
+        <h1 className="relative mx-auto mb-8 max-w-3xl flex-wrap text-center text-xl font-semibold md:mb-10 md:text-2xll md:leading-snug">
+          <span>
+            پیشنهادهای حرفه‌ای
+                                  <span className="ms-1 opacity-50">۱۰ برابر سریع‌تر</span> با
+            <Globe className="mx-2 mb-1 inline-block h-auto w-8 md:mx-4 md:mb-3 md:w-14" />
+            AI
+          </span>
+          <div className="absolute -top-10 -left-20 hidden w-fit -rotate-12 gap-1 border-b border-dashed border-muted-foreground text-sm font-normal text-muted-foreground underline-offset-3 lg:flex">
+            <Zap className="h-auto w-3" />
+            سریع
+          </div>
+          <div className="absolute top-14 -left-24 hidden w-fit -rotate-12 gap-1 border-b border-dashed border-muted-foreground text-sm font-normal text-muted-foreground underline-offset-3 lg:flex">
+            <Lock className="h-auto w-3" />
+            امن
+          </div>
+          <div className="absolute -top-10 -right-24 hidden w-fit rotate-12 gap-1 border-b border-dashed border-muted-foreground text-sm font-normal text-muted-foreground underline-offset-3 lg:flex">
+            حرفه‌ای
+            <Star className="h-auto w-3" />
+          </div>
+          <div className="absolute top-14 -right-28 hidden w-fit rotate-12 gap-1 border-b border-dashed border-muted-foreground text-sm font-normal text-muted-foreground underline-offset-3 lg:flex">
+            بهینه
+            <CheckCircle2 className="h-auto w-3" />
+          </div>
+        </h1>
+        <p className="mx-auto mb-10 max-w-3xl text-center font-medium text-muted-foreground md:text-xl">
+          با کمک هوش مصنوعی، پیشنهادهای حرفه‌ای و شخصی‌سازی‌شده ایجاد کنید و نرخ تبدیل را افزایش دهید.
+                          </p>
+        <div className="flex flex-col items-center justify-center gap-3 pt-3 pb-12">
+          <Button size="lg">شروع آزمایش رایگان ۱۴ روزه</Button>
+          <div className="text-sm text-muted-foreground md:text-balance">
+            مبتنی بر هوش مصنوعی
+                                </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero57 };
diff --git a/blocks/hero58.tsx b/blocks/hero58.tsx
new file mode 100644
index 0000000..8cd99f4
--- /dev/null
+++ b/blocks/hero58.tsx
@@ -0,0 +1,44 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+interface Hero58Props {
+  className?: string;
+}
+
+const Hero58 = ({ className }: Hero58Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-10 lg:grid-cols-2">
+          <div className="flex flex-col gap-8 lg:gap-12">
+            <h1 className="text-2xll font-semibold lg:text-2xll">
+              فضای کاری <br />
+              <span className="mx-1 inline-block whitespace-nowrap">
+                در هر مکان.
+                                            </span>
+            </h1>
+            <p className="text-muted-foreground lg:text-lg">
+              از هر دستگاه و هر مکان به پروژه‌ها دسترسی داشته باشید و همکاری تیمی را بدون محدودیت ادامه دهید.
+                                      </p>
+            <Button size="lg" className="w-fit">
+              شروع رایگان
+                                        <ArrowRight className="size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+          <div className="relative">
+            <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,var(--muted)_1px,transparent_1px),linear-gradient(to_bottom,var(--muted)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-[size:64px_64px]"></div>
+            {/* illustrations available from https://icons8.com/illustrations/style--tokyo */}
+            <img
+              src="/block-media/shadcnblocks/block/illustrations/tokyo-selecting-the-elements-of-the-horizontal-graph-chart.svg"
+              alt="تصویر نمونه"
+              className="mx-auto max-h-[600px]"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero58 };
diff --git a/blocks/hero59.tsx b/blocks/hero59.tsx
new file mode 100644
index 0000000..76c7f43
--- /dev/null
+++ b/blocks/hero59.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero59Props {
+  className?: string;
+}
+
+const Hero59 = ({ className }: Hero59Props) => {
+  return (
+    <section className={cn("dark relative h-screen bg-background", className)}>
+      <div className="relative z-10 container mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center">
+        <span className="text-xs text-muted-foreground">
+          نسخه آزمایشی در دسترس است
+                          </span>
+        <h1 className="text-2xll font-bold text-foreground lg:text-[4.2rem]">
+          معرفی نسخه جدید پلتفرم
+                          </h1>
+        <p className="text-lg text-muted-foreground">
+          تمام فرایندهای کاری را از برنامه‌ریزی تا اجرا در یک محیط یکپارچه مدیریت کنید.
+                          </p>
+        <div className="flex lg:justify-center">
+          <div className="flex min-w-fit flex-col gap-5 text-sm leading-[.96] whitespace-nowrap lg:flex-row lg:items-stretch">
+            <Button className="h-fit flex-1 rounded-full px-6 py-3.5">
+              ثبت‌نام در نسخه آزمایشی
+                                      </Button>
+            <Button
+              variant="outline"
+              className="h-fit flex-1 rounded-full border border-white/50 bg-transparent px-6 py-3.5 text-foreground hover:bg-transparent"
+            >
+              درخواست نسخه نمایشی
+                                      </Button>
+          </div>
+        </div>
+      </div>
+      <video
+        loop
+        playsInline
+        src="/block-media/shadcnblocks/block/video-2.mp4"
+        className="absolute top-0 left-0 size-full object-cover"
+        autoPlay
+        muted
+      />
+    </section>
+  );
+};
+
+export { Hero59 };
diff --git a/blocks/hero6.tsx b/blocks/hero6.tsx
new file mode 100644
index 0000000..84ff736
--- /dev/null
+++ b/blocks/hero6.tsx
@@ -0,0 +1,86 @@
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero6Props {
+  className?: string;
+}
+
+const Hero6 = ({ className }: Hero6Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-5xl flex-col items-center">
+          <div className="z-10 flex flex-col items-center gap-8 text-center">
+            <div className="max-w-3xl">
+              <h1 className="mb-4 text-xl font-semibold text-pretty lg:text-2xll">
+                پروژه بعدی خود را سریع‌تر توسعه دهید
+                                            </h1>
+              <p className="text-muted-foreground lg:text-xl">
+                کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
+                                            </p>
+            </div>
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
+              <Button>
+                همین امروز شروع کنید
+                                              <ChevronRight className="h-4 rtl:rotate-180" />
+              </Button>
+              <Button variant="ghost">
+                آشنایی بیشتر
+                                              <ChevronRight className="h-4 rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert"
+          />
+          <div className="relative md:col-span-2">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="تصویر نمونه"
+              className="h-full max-h-[500px] w-full object-cover dark:invert"
+            />
+            <Button variant="outline" className="absolute end-5 bottom-5">
+              آشنایی بیشتر
+                                        <ChevronRight className="h-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+        <div className="mx-auto mt-12 grid max-w-7xl grid-cols-2 place-items-center gap-6 md:grid-cols-4">
+          <img
+            src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+            alt="لوگو"
+            className="h-5 sm:h-7 dark:invert"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
+            alt="لوگو"
+            className="h-9 sm:h-11 dark:invert"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
+            alt="لوگو"
+            className="h-4 sm:h-6 dark:hidden"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
+            alt="لوگو"
+            className="hidden h-4 sm:h-6 dark:block"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
+            alt="لوگو"
+            className="h-6 sm:h-7 dark:invert"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero6 };
diff --git a/blocks/hero60.tsx b/blocks/hero60.tsx
new file mode 100644
index 0000000..95ee93e
--- /dev/null
+++ b/blocks/hero60.tsx
@@ -0,0 +1,40 @@
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero60Props {
+  className?: string;
+}
+
+const Hero60 = ({ className }: Hero60Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative max-w-5xl">
+          <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-[size:64px_64px]"></div>
+          <h1 className="text-2xll leading-tight font-extrabold lg:text-8xl lg:leading-snug">
+            سادگی بیشتر. <span className="me-6">بهره‌وری</span>
+            <span className="relative inline-block before:absolute before:top-0 before:-end-2 before:-bottom-2 before:-start-4 before:-z-10 before:rounded-lg before:bg-muted-foreground/15">
+              بیشتر.
+            </span>
+          </h1>
+          <p className="mt-7 text-xl font-light lg:text-3xl">
+            همه ابزارهای موردنیاز برای مدیریت پروژه، همکاری تیمی و پیگیری وظایف را در اختیار داشته باشید.
+                                </p>
+          <div className="mt-12 flex w-fit flex-col gap-2.5 text-center">
+            <Button size="lg">
+              همین حالا رایگان شروع کنید
+              <ChevronRight className="ms-2 h-auto w-4 rtl:rotate-180" />
+            </Button>
+            <p className="text-sm text-muted-foreground">
+              بدون نیاز به کارت بانکی.
+                                      </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero60 };
diff --git a/blocks/hero64.tsx b/blocks/hero64.tsx
new file mode 100644
index 0000000..6dc9b50
--- /dev/null
+++ b/blocks/hero64.tsx
@@ -0,0 +1,180 @@
+import { FaStar } from "react-icons/fa";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface TestimonialCardProps {
+  name: string;
+  title: string;
+  imageSrc: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface RatingDisplayProps {
+  rating?: number;
+  userCount?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  showAvatars?: boolean;
+}
+
+function TestimonialCard({
+  name = "نام مشتری",
+  title = "سمت سازمانی",
+  imageSrc = "/block-media/shadcnblocks/block/avatar-1.webp",
+  className,
+  style,
+}: TestimonialCardProps) {
+  return (
+    <div
+      className={cn(
+        "flex w-[320px] flex-col gap-4 rounded-lg bg-card p-6 shadow-sm",
+        className,
+      )}
+      style={style}
+    >
+      <img
+        src={imageSrc}
+        alt={name}
+        className="h-24 w-24 rounded-md object-cover"
+      />
+      <div className="flex gap-0.5">
+        {Array(5)
+          .fill(null)
+          .map((_, i) => (
+            <FaStar key={i} className="h-5 w-5 fill-yellow-400" />
+          ))}
+      </div>
+      <div className="space-y-2">
+        <div className="h-2 w-[80%] rounded bg-muted"></div>
+        <div className="h-2 w-[90%] rounded bg-muted"></div>
+        <div className="h-2 w-[60%] rounded bg-muted"></div>
+      </div>
+      <div className="space-y-1">
+        <p className="font-semibold text-foreground">{name}</p>
+        <p className="text-sm text-muted-foreground">{title}</p>
+      </div>
+    </div>
+  );
+}
+
+function RatingDisplay({
+  rating = 4.9,
+  userCount = 500,
+  className,
+  style,
+}: RatingDisplayProps) {
+  return (
+    <div className={cn("space-y-0.5", className)} style={style}>
+      <div className="flex items-center gap-3">
+        <div className="flex -space-x-[14px]">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <Avatar key={i} className="size-12">
+              <AvatarImage
+                src={`/block-media/shadcnblocks/block/avatar-$%7Bi}.webp`}
+              />
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+          ))}
+        </div>
+        <div>
+          <div className="flex items-end gap-1.5">
+            <div className="flex gap-1">
+              {Array(5)
+                .fill(null)
+                .map((_, i) => (
+                  <FaStar key={i} className="h-5 w-5 fill-yellow-400" />
+                ))}
+            </div>
+            <p className="text-base leading-4 font-semibold text-foreground">
+              {rating}
+            </p>
+          </div>
+          <p className="text-sm font-medium whitespace-nowrap text-muted-foreground">
+            + {userCount}به جمع هزاران کاربر راضی بپیوندید
+                                </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const Hero64 = () => {
+  return (
+    <section className="py-12 md:py-20">
+      <div className="container px-4 md:px-6">
+        <div className="flex flex-col gap-8 md:flex-row">
+          <div className="mx-auto flex items-start md:mx-0 md:w-1/2 md:items-center">
+            <div className="text-center md:text-start">
+              <h1 className="text-xl font-bold tracking-tight text-foreground sm:text-2xll/tight md:text-2xll/tight">
+                از{" "}
+                <span className="bg-linear-to-tr from-gray-600 to-gray-500 bg-clip-text text-transparent">
+                  نظرات مشتریان
+                                                  </span>{" "}
+                برای افزایش اعتماد و فروش استفاده کنید.
+                                            </h1>
+              <p className="mx-auto mt-3 max-w-md text-base text-muted-foreground sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
+                نظرات مشتریان راضی را جمع‌آوری و نمایش دهید تا اعتماد بسازید و
+                نرخ تبدیل را بالا ببرید.
+              </p>
+              <div className="mt-6 flex justify-center md:hidden">
+                <RatingDisplay />
+              </div>
+              <div className="mx-auto mt-8 w-fit md:ml-0">
+                <Button size="lg" className="px-6">
+                  همین امروز رایگان شروع کنید
+                                                  </Button>
+              </div>
+            </div>
+          </div>
+          <div className="relative mx-auto h-[400px] w-full max-w-xl md:h-[540px] md:w-1/2">
+            <div className="relative h-full">
+              <TestimonialCard
+                name="سارا جانسون"
+                title="مدیر بازاریابی"
+                imageSrc="/block-media/shadcnblocks/block/photos/fabian-centeno-njeVb6E3XB8-unsplash.jpg"
+                className="absolute hidden rounded-lg border md:flex"
+                style={{
+                  left: "0",
+                  top: "40%",
+                  width: "50%",
+                  height: "auto",
+                }}
+              />
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt=""
+                className="absolute hidden rounded-lg md:block"
+                style={{
+                  right: "0",
+                  top: "0",
+                  width: "45%",
+                  height: "42%",
+                  objectFit: "cover",
+                }}
+              />
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                alt=""
+                className="absolute rounded-lg shadow-md"
+                style={{
+                  left: "50%",
+                  top: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "min(100%, 235.625px)",
+                  height: "min(90%, 355.945px)",
+                  objectFit: "cover",
+                }}
+              />
+              <RatingDisplay className="absolute bottom-4 left-1/2 hidden w-[90%] -translate-x-1/2 rounded-md border bg-background px-3 py-2 shadow-lg md:top-[54%] md:right-0 md:bottom-auto md:left-auto md:flex md:w-auto md:translate-x-0" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero64 };
diff --git a/blocks/hero67.tsx b/blocks/hero67.tsx
new file mode 100644
index 0000000..c9ccd28
--- /dev/null
+++ b/blocks/hero67.tsx
@@ -0,0 +1,77 @@
+import { Calendar } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero67Props {
+  className?: string;
+}
+
+const Hero67 = ({ className }: Hero67Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="z-10 mx-auto flex max-w-4xl flex-col items-center gap-14 text-center">
+          <img
+            src="/block-media/shadcnblocks/block/block-1.svg"
+            alt="لوگو"
+            className="h-14"
+          />
+          <div>
+            <h1 className="mb-4 text-3xl font-medium text-pretty lg:text-2xll">
+              وب‌سایت‌های حرفه‌ای و ماندگار بسازید
+                                      </h1>
+            <p className="mx-auto max-w-xl text-muted-foreground">
+              وب‌سایتی طراحی کنید که سریع، کاربرپسند و متناسب با اهداف کسب‌وکار شما باشد.
+                                      </p>
+          </div>
+          <div className="flex w-full flex-col items-center justify-center gap-6 lg:flex-row">
+            <Button size="lg" className="w-full sm:w-fit">
+              <Calendar className="me-2 h-4" />
+              همین امروز شروع کنید
+            </Button>
+            <div className="flex flex-col items-center gap-2 lg:items-start">
+              <span className="inline-flex items-center -space-x-1">
+                <Avatar className="size-7 border">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-1.webp"
+                    alt="نمونه"
+                  />
+                </Avatar>
+                <Avatar className="size-7 border">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-6.webp"
+                    alt="نمونه"
+                  />
+                </Avatar>
+                <Avatar className="size-7 border">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-3.webp"
+                    alt="نمونه"
+                  />
+                </Avatar>
+                <Avatar className="size-7 border">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-4.webp"
+                    alt="نمونه"
+                  />
+                </Avatar>
+              </span>
+              <p className="text-xs text-muted-foreground">
+                مورد اعتماد رهبران صنعت
+              </p>
+            </div>
+          </div>
+        </div>
+        <img
+          src="/block-media/shadcnblocks/block/placeholder-1.svg"
+          alt="تصویر نمونه"
+          className="mx-auto mt-24 aspect-video max-h-[700px] w-full max-w-7xl rounded-t-lg object-cover shadow-md"
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Hero67 };
diff --git a/blocks/hero68.tsx b/blocks/hero68.tsx
new file mode 100644
index 0000000..c861422
--- /dev/null
+++ b/blocks/hero68.tsx
@@ -0,0 +1,80 @@
+import { ArrowRight, DollarSign, Medal, Sparkle, Zap } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero68Props {
+  className?: string;
+}
+
+const Hero68 = ({ className }: Hero68Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="border-x border-t border-dashed px-4 py-20 md:px-16">
+          <div className="mx-auto max-w-3xl">
+            <a
+              href="#"
+              className="mx-auto mb-4 flex w-fit items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm"
+            >
+              <Badge>جدید</Badge>
+              نسخه ۲٫۲ منتشر شد!
+              <ArrowRight className="inline size-4 rtl:rotate-180" />
+            </a>
+            <h1 className="my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl">
+              طراحی وب‌سایت برای استارتاپ‌ها
+                                      </h1>
+            <p className="mx-auto mb-6 max-w-2xl text-center text-muted-foreground lg:text-xl">
+              وب‌سایت‌هایی سریع، مقیاس‌پذیر و بهینه برای رشد کسب‌وکارهای نوپا طراحی می‌کنیم.
+                                      </p>
+            <div className="flex flex-col justify-center gap-2 sm:flex-row">
+              <Button size="lg" className="w-full gap-2 sm:w-auto lg:mt-10">
+                <div className="size-2 rounded-full bg-green-400"></div>
+                شروع نسخه آزمایشی
+                                            </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="w-full gap-2 sm:w-auto lg:mt-10"
+              >
+                <Avatar className="size-8 rounded-full ring-1 ring-input">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-1.webp"
+                    alt="نمونه"
+                  />
+                </Avatar>
+                درخواست نسخه نمایشی
+                                            </Button>
+            </div>
+          </div>
+        </div>
+        <div className="relative grid border-x border-dashed md:grid-cols-3">
+          <Sparkle className="absolute top-0 right-0 h-auto w-5 translate-x-2.5 -translate-y-2.5 fill-primary" />
+          <Sparkle className="absolute top-0 left-0 h-auto w-5 -translate-x-2.5 -translate-y-2.5 fill-primary" />
+          <div className="flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
+            <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
+              <Zap className="w-5 lg:w-6" />
+            </span>
+            تحویل پروژه در ۲ تا ۴ هفته
+                                </div>
+          <div className="flex items-center gap-6 border-x border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
+            <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
+              <DollarSign className="w-5 lg:w-6" />
+            </span>
+            شفافیت کامل در هزینه‌ها
+                                </div>
+          <div className="flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
+            <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
+              <Medal className="w-5 lg:w-6" />
+            </span>
+            تضمین بازگشت وجه در صورت نارضایتی
+                                </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero68 };
diff --git a/blocks/hero7.tsx b/blocks/hero7.tsx
new file mode 100644
index 0000000..4bc6de4
--- /dev/null
+++ b/blocks/hero7.tsx
@@ -0,0 +1,104 @@
+import { Star } from "lucide-react";
+import React from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero7Props {
+  heading?: string;
+  description?: string;
+  button?: {
+    text: string;
+    url: string;
+    className?: string;
+  };
+  reviews?: {
+    count: number;
+    rating?: number;
+    avatars: {
+      src: string;
+      alt: string;
+    }[];
+  };
+  className?: string;
+}
+
+const Hero7 = ({
+  heading = "مجموعه‌ای کامل از بلاک‌ها و کامپوننت‌های آماده",
+  description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید بدون نیاز به طراحی از ابتدا، مستقیماً در پروژه‌های خود استفاده کنید.",
+  button = {
+    text: "مشاهده همه بلاک‌ها",
+    url: "https://www.ShadcnBlocks",
+  },
+  reviews = {
+    count: 200,
+    rating: 5.0,
+    avatars: [
+      {
+        src: "/block-media/shadcnblocks/block/avatar-1.webp",
+        alt: "آواتار ۱",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/avatar-2.webp",
+        alt: "آواتار ۲",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/avatar-3.webp",
+        alt: "آواتار ۳",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/avatar-4.webp",
+        alt: "آواتار ۴",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/avatar-5.webp",
+        alt: "آواتار ۵",
+      },
+    ],
+  },
+  className,
+}: Hero7Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container text-center">
+        <div className="mx-auto flex max-w-5xl flex-col gap-6">
+          <h1 className="text-3xl font-semibold lg:text-2xll">{heading}</h1>
+          <p className="text-balance text-muted-foreground lg:text-lg">
+            {description}
+          </p>
+        </div>
+        <Button asChild size="lg" className="mt-10">
+          <a href={button.url}>{button.text}</a>
+        </Button>
+        <div className="mx-auto mt-10 flex w-fit flex-col items-center gap-4 sm:flex-row">
+          <span className="mx-4 inline-flex items-center -space-x-4">
+            {reviews.avatars.map((avatar, index) => (
+              <Avatar key={index} className="size-14 border">
+                <AvatarImage src={avatar.src} alt={avatar.alt} />
+              </Avatar>
+            ))}
+          </span>
+          <div>
+            <div className="flex items-center gap-1">
+              {[...Array(5)].map((_, index) => (
+                <Star
+                  key={index}
+                  className="size-5 fill-yellow-400 text-yellow-400"
+                />
+              ))}
+              <span className="ms-1 font-semibold">
+                {reviews.rating?.toFixed(1)}
+              </span>
+            </div>
+            <p className="text-start font-medium text-muted-foreground">
+              مورد اعتماد بیش از {reviews.count} کاربر
+                                      </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero7 };
diff --git a/blocks/hero70.tsx b/blocks/hero70.tsx
new file mode 100644
index 0000000..03f603c
--- /dev/null
+++ b/blocks/hero70.tsx
@@ -0,0 +1,172 @@
+"use client";
+import AutoScroll from "embla-carousel-auto-scroll";
+import Autoplay from "embla-carousel-autoplay";
+import { ArrowUpRight, CheckCircle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Hero70Props {
+  className?: string;
+}
+
+const Hero70 = ({ className }: Hero70Props) => {
+  return (
+    <section className={cn("relative bg-background py-14", className)}>
+      <div className="relative z-10 container mx-auto">
+        <div className="py-8">
+          <img
+            src="/block-media/shadcnblocks/block/block-1.svg"
+            className="h-12 lg:h-16"
+            alt=""
+          />
+        </div>
+        <div className="flex flex-col gap-10 py-10 lg:py-28">
+          <div className="hidden items-center gap-6 lg:flex">
+            <div className="flex items-center gap-1.5 text-foreground">
+              <CheckCircle className="size-6" />
+              <span>اشتراک ماهانه طراحی</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-foreground">
+              <CheckCircle className="size-6" />
+              <span>تحویل سریع</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-foreground">
+              <CheckCircle className="size-6" />
+              <span>اشتراک انعطاف‌پذیر</span>
+            </div>
+          </div>
+          <div className="flex">
+            <div className="flex flex-1 flex-col gap-4">
+              <h1 className="max-w-6xl text-xl tracking-tighter text-foreground lg:text-2xll xl:text-9xl">
+                طراحی نامحدود برای رشد سریع کسب‌وکار
+                                            </h1>
+              <p className="text-lg text-foreground lg:text-xl">
+                به خدمات طراحی حرفه‌ای دسترسی داشته باشید،{" "}
+                <span className="font-semibold">بدون نیاز به استخدام تیم داخلی.</span>
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            className="flex h-fit items-center gap-[10px] self-start rounded-full border-2 border-black px-2 py-1.5 text-sm font-semibold lg:px-4 lg:py-3.5 lg:text-base"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/avatar-1.webp"
+              alt=""
+              className="size-9 rounded-full object-cover lg:size-11"
+            />
+            <span>رزرو جلسه مشاوره</span>
+          </Button>
+        </div>
+      </div>
+      <div className="relative flex flex-col">
+        <Carousel
+          opts={{
+            loop: true,
+            align: "center",
+          }}
+          plugins={[
+            AutoScroll({
+              speed: 1,
+            }),
+            Autoplay({
+              playOnInit: true,
+              delay: 1000,
+            }),
+          ]}
+          className="relative mx-auto w-full max-w-full overflow-hidden from-white to-transparent before:absolute before:top-0 before:left-0 before:z-10 before:h-full before:w-[20%] before:bg-linear-to-r before:content-[''] after:absolute after:top-0 after:right-0 after:z-10 after:h-full after:w-[20%] after:bg-linear-to-l after:from-white after:to-transparent after:content-['']"
+        >
+          <CarouselContent className="ml-5 flex gap-5 pl-4">
+            <CarouselItem className="basis-[496px] bg-background">
+              <div className="h-[380px] basis-[480px] overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[496px] bg-background">
+              <div className="h-[380px] basis-[480px] overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[496px] bg-background">
+              <div className="h-[380px] basis-[480px] overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[496px] bg-background">
+              <div className="h-[380px] basis-[480px] overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[496px] bg-background">
+              <div className="h-[380px] basis-[480px] overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-5.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[496px] bg-background">
+              <div className="h-[380px] basis-[480px] overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-6.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[496px] bg-background">
+              <div className="h-[380px] basis-[480px] overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem className="basis-[496px] bg-background">
+              <div className="h-[380px] basis-[480px] overflow-hidden rounded-lg">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </div>
+            </CarouselItem>
+          </CarouselContent>
+        </Carousel>
+      </div>
+      <Button
+        variant="outline"
+        className="relative z-10 mx-auto mt-10 flex h-fit items-center gap-2.5 rounded-full border-2 border-black px-4 py-3.5 text-sm font-semibold transition hover:bg-black hover:text-white lg:text-base"
+      >
+        <span>مشاهده مطالعات موردی</span>
+        <ArrowUpRight className="size-6! rtl:rotate-180" />
+      </Button>
+    </section>
+  );
+};
+
+export { Hero70 };
diff --git a/blocks/hero71.tsx b/blocks/hero71.tsx
new file mode 100644
index 0000000..9f6dd66
--- /dev/null
+++ b/blocks/hero71.tsx
@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero71Props {
+  className?: string;
+}
+
+const Hero71 = ({ className }: Hero71Props) => {
+  return (
+    <section
+      className={cn(
+        "bg-[linear-gradient(#fbf7ec,#e2f1ee)] py-20 text-center",
+        className,
+      )}
+    >
+      <div className="container flex flex-col items-center gap-5">
+        <h1 className="max-w-2xl text-2xll font-medium text-foreground max-lg:text-2xll">
+          همیشه در ذهن مشتریان خود بمانید.
+                          </h1>
+        <p className="max-w-2xl text-muted-foreground max-lg:text-sm">
+          با ابزارهای ارتباط با مشتری، تجربه‌ای بهتر ایجاد کنید و نرخ وفاداری را افزایش دهید.{" "}
+        </p>
+        <div className="flex items-center gap-2.5 text-lg max-lg:flex-col max-lg:text-base">
+          <Button className="w-fit rounded-md border px-8 py-1">با ما آشنا شوید</Button>
+          <Button
+            variant="secondary"
+            className="w-fit rounded-md border px-8 py-1"
+          >
+            رزرو دمو
+          </Button>
+        </div>
+        <img
+          className="mt-10 w-[50%] rounded-xl shadow-[rgba(50,50,105,0.15)_0px_2px_5px_0px,rgba(0,0,0,0.05)_0px_1px_1px_0px] max-lg:w-full"
+          src="/block-media/shadcnblocks/block/placeholder-2.svg"
+          alt=""
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Hero71 };
diff --git a/blocks/hero74.tsx b/blocks/hero74.tsx
new file mode 100644
index 0000000..5c0e731
--- /dev/null
+++ b/blocks/hero74.tsx
@@ -0,0 +1,106 @@
+import {
+  AlignCenter,
+  Brain,
+  Package,
+  ReceiptText,
+  Timer,
+  Vault,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Hero74Props {
+  className?: string;
+}
+
+const Hero74 = ({ className }: Hero74Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div>
+        <div className="container text-center">
+          <h1 className="mb-4 text-2xll font-medium">
+            پلتفرمی یکپارچه برای مدیریت کسب‌وکار
+                                </h1>
+          <p className="text-muted-foreground">
+            همه اطلاعات مالی، اسناد و گزارش‌های مدیریتی را در یک محیط امن و قابل جستجو مدیریت کنید.
+                                </p>
+          <div className="mx-auto mt-8 flex w-full max-w-sm items-center gap-2">
+            <Input type="email" placeholder="ایمیل خود را وارد کنید" />
+            <Button>پیوستن به لیست انتظار</Button>
+          </div>
+          <div className="mx-auto mt-12 grid max-w-3xl grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
+            <div className="flex flex-col items-center gap-2">
+              <div className="flex h-16 w-24 items-center justify-center rounded-md border">
+                <Package />
+              </div>
+              <span className="text-sm text-muted-foreground">
+                کاملاً قابل سفارشی‌سازی
+              </span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <div className="flex h-16 w-24 items-center justify-center rounded-md border">
+                <AlignCenter />
+              </div>
+              <span className="text-sm text-muted-foreground">
+                بینش لحظه‌ای
+              </span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <div className="flex h-16 w-24 items-center justify-center rounded-md border">
+                <Vault />
+              </div>
+              <span className="text-sm text-muted-foreground">
+                فضای ذخیره‌سازی امن
+                                            </span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <div className="flex h-16 w-24 items-center justify-center rounded-md border">
+                <ReceiptText />
+              </div>
+              <span className="text-sm text-muted-foreground">
+                رسیدهای هوشمند
+              </span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <div className="flex h-16 w-24 items-center justify-center rounded-md border">
+                <Timer />
+              </div>
+              <span className="text-sm text-muted-foreground">
+                پیگیری خودکار
+                                            </span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <div className="flex h-16 w-24 items-center justify-center rounded-md border">
+                <Brain />
+              </div>
+              <span className="text-sm text-muted-foreground">
+                جستجوی هوشمند
+                                            </span>
+            </div>
+          </div>
+        </div>
+        <div className="relative mt-20 hidden justify-between gap-10 lg:flex">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="max-h-[500px] w-full rounded-tr-xl rounded-br-md object-cover"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="max-h-[500px] w-full rounded-tl-xl rounded-bl-md object-cover"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-3.svg"
+            alt="تصویر نمونه"
+            className="absolute top-1/2 left-1/2 max-h-80 -translate-x-1/2 -translate-y-1/2 rounded-xl object-cover shadow-md"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero74 };
diff --git a/blocks/hero75.tsx b/blocks/hero75.tsx
new file mode 100644
index 0000000..e4e8713
--- /dev/null
+++ b/blocks/hero75.tsx
@@ -0,0 +1,72 @@
+import { ChevronRight } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero75Props {
+  className?: string;
+}
+
+const Hero75 = ({ className }: Hero75Props) => {
+  return (
+    <section className={cn("dark flex", className)}>
+      <div className="flex w-full items-center justify-center bg-background lg:w-1/2">
+        <div className="container my-10 flex w-[500px] flex-col gap-24">
+          <h1 className="text-xl text-foreground">
+            کسب‌وکار{" "}
+            <span className="bg-linear-to-tr from-foreground to-muted bg-clip-text text-transparent">
+              حرفه‌ای
+            </span>
+          </h1>
+          <div>
+            <h2 className="text-xl text-foreground lg:text-2xll">
+              فرصت‌های شغلی بیشتری به دست آورید
+                                      </h2>
+            <p className="mt-2.5 text-foreground lg:text-xl">
+              با دسترسی به امکانات حرفه‌ای، سریع‌تر فرصت‌های شغلی مناسب خود را پیدا کنید.
+                                      </p>
+            <Button className="mt-10 flex h-fit items-center gap-2.5 rounded-xl px-5 py-4 font-bold">
+              <span>ارتقا به نسخه پریمیوم </span>
+              <ChevronRight className="size-5! rtl:rotate-180" />
+            </Button>
+          </div>
+          <div className="flex items-center gap-3.5">
+            <div className="flex -space-x-3">
+              <Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
+                <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                <AvatarFallback>A</AvatarFallback>
+              </Avatar>
+              <Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
+                <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
+                <AvatarFallback>B</AvatarFallback>
+              </Avatar>
+              <Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
+                <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
+                <AvatarFallback>C</AvatarFallback>
+              </Avatar>
+              <Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
+                <AvatarImage src="/block-media/shadcnblocks/block/avatar-4.webp" />
+                <AvatarFallback>D</AvatarFallback>
+              </Avatar>
+              <Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
+                <AvatarImage src="/block-media/shadcnblocks/block/avatar-5.webp" />
+                <AvatarFallback>E</AvatarFallback>
+              </Avatar>
+            </div>
+            <span className="text-xs text-foreground lg:text-sm">
+              مورد اعتماد هزاران متخصص حوزه سلامت
+                                      </span>
+          </div>
+        </div>
+      </div>
+      <img
+        src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+        alt=""
+        className="hidden h-screen w-1/2 object-cover lg:block"
+      />
+    </section>
+  );
+};
+
+export { Hero75 };
diff --git a/blocks/hero76.tsx b/blocks/hero76.tsx
new file mode 100644
index 0000000..2d4ec82
--- /dev/null
+++ b/blocks/hero76.tsx
@@ -0,0 +1,49 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero76Props {
+  className?: string;
+}
+
+const Hero76 = ({ className }: Hero76Props) => {
+  return (
+    <section
+      className={cn(
+        "container mx-auto mt-32 flex flex-col items-center gap-20 bg-background md:gap-40 md:text-center",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-10 md:items-center">
+        <img
+          src="/block-media/shadcnblocks/block/logos/figma-icon.svg"
+          alt=""
+          className="h-11 w-fit"
+        />
+        <div className="flex max-w-[880px] flex-col items-center gap-6">
+          <h1 className="text-xl tracking-tighter text-foreground capitalize md:text-2xll lg:text-2xll">
+            <p>کتابخانه کامپوننت برای ری یو آی و طراحی رابط</p>
+          </h1>
+          <div className="text-xl text-muted-foreground">
+            <p>رابط‌های کاربری حرفه‌ای را سریع‌تر طراحی و پیاده‌سازی کنید.</p>
+            <p>برای طراحی و توسعه سریع‌تر آماده شوید</p>
+          </div>
+        </div>
+        <Button className="h-fit self-center rounded-full px-6 py-3">
+          دانلود کنید
+        </Button>
+      </div>
+      <div className="w-full overflow-hidden rounded-lg">
+        <AspectRatio ratio={1.916786227 / 1}>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt=""
+            className="size-full object-cover"
+          />
+        </AspectRatio>
+      </div>
+    </section>
+  );
+};
+
+export { Hero76 };
diff --git a/blocks/hero78.tsx b/blocks/hero78.tsx
new file mode 100644
index 0000000..4b436f1
--- /dev/null
+++ b/blocks/hero78.tsx
@@ -0,0 +1,32 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero78Props {
+  className?: string;
+}
+
+const Hero78 = ({ className }: Hero78Props) => {
+  return (
+    <section
+      className={cn(
+        "dark relative flex h-svh max-h-[1400px] w-svw overflow-hidden bg-[url('/block-media/shadcnblocks/block/full-width-backgrounds/pawel-czerwinski-IbHFznCKnqA-unsplash.jpg')] bg-cover bg-center bg-no-repeat font-sans after:absolute after:top-0 after:left-0 after:z-10 after:h-full after:w-full after:bg-black/20 after:content-[''] md:h-svh",
+        className,
+      )}
+    >
+      <div className="relative z-30 m-auto flex max-w-[46.25rem] flex-col items-center justify-center gap-6 px-5">
+        <h1 className="text-center font-serif text-xl leading-tight text-foreground md:text-2xll xl:text-[4.4rem]">
+          دنیای علم را کشف کنید
+                          </h1>
+        <p className="text-center text-base text-foreground">
+          مجموعه‌ای از تصاویر و محتوای علمی که شما را با دستاوردهای فناوری، مهندسی و معماری آشنا می‌کند.
+                          </p>
+        <Button className="h-fit w-fit rounded-full px-7 py-4 text-sm leading-tight font-medium">
+          مشاهده همه تصاویر
+        </Button>
+      </div>
+      <div className="pointer-events-none absolute inset-0 z-20 h-full w-full bg-[url('/block-media/shadcnblocks/block/patterns/noise.png')] bg-repeat opacity-15" />
+    </section>
+  );
+};
+
+export { Hero78 };
diff --git a/blocks/hero79.tsx b/blocks/hero79.tsx
new file mode 100644
index 0000000..ba526d0
--- /dev/null
+++ b/blocks/hero79.tsx
@@ -0,0 +1,46 @@
+import { ArrowDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero79Props {
+  className?: string;
+}
+
+const Hero79 = ({ className }: Hero79Props) => {
+  return (
+    <section
+      className={cn(
+        "dark h-svh w-svw bg-background bg-[url('/block-media/shadcnblocks/block/full-width-backgrounds/andrew-kliatskyi-MaVm_A0xhKk-unsplash.jpg')] bg-cover bg-center bg-no-repeat pt-12 pb-24",
+        className,
+      )}
+    >
+      <div className="container flex h-full flex-col justify-between px-5 xl:px-20">
+        <img
+          src="/block-media/shadcnblocks/block/block-white-1.svg"
+          alt=""
+          className="size-20"
+        />
+        <div className="flex items-end justify-between">
+          <div className="flex w-full flex-col gap-8 md:w-2/3">
+            <h1 className="text-2xll font-medium text-foreground md:text-[5.8rem]">
+              خط تولید فیبر نوری خود را راه‌اندازی کنید
+                                      </h1>
+            <p className="text-xl text-foreground md:text-xl">
+              راهکارهای صنعتی با شبکه تأمین و تولید بین‌المللی.
+                                      </p>
+          </div>
+          <Button
+            variant="ghost"
+            className="hidden items-center gap-2 text-foreground hover:bg-transparent md:flex"
+          >
+            <span className="text-xl">بیشتر بخوانید</span>
+            <ArrowDown className="size-6!" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero79 };
diff --git a/blocks/hero8.tsx b/blocks/hero8.tsx
new file mode 100644
index 0000000..1dde14d
--- /dev/null
+++ b/blocks/hero8.tsx
@@ -0,0 +1,46 @@
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero8Props {
+  className?: string;
+}
+
+const Hero8 = ({ className }: Hero8Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="overflow-hidden border-b border-muted">
+        <div className="container">
+          <div className="mx-auto flex max-w-5xl flex-col items-center">
+            <div className="z-10 items-center text-center">
+              <h1 className="mb-8 text-xl font-semibold text-pretty lg:text-2xll">
+                توسعه رابط کاربری را سریع‌تر آغاز کنید
+                                            </h1>
+              <p className="mx-auto max-w-3xl text-muted-foreground lg:text-xl">
+                کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
+                                            </p>
+              <div className="mt-12 flex w-full flex-col justify-center gap-2 sm:flex-row">
+                <Button>
+                  همین امروز شروع کنید
+                                                    <ChevronRight className="ms-2 h-4 rtl:rotate-180" />
+                </Button>
+                <Button variant="ghost">
+                  آشنایی بیشتر
+                                                    <ChevronRight className="ms-2 h-4 rtl:rotate-180" />
+                </Button>
+              </div>
+            </div>
+          </div>
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="mx-auto mt-24 max-h-[700px] w-full max-w-7xl rounded-t-lg object-cover shadow-lg"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero8 };
diff --git a/blocks/hero80.tsx b/blocks/hero80.tsx
new file mode 100644
index 0000000..9980d68
--- /dev/null
+++ b/blocks/hero80.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { Star } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero80Props {
+  className?: string;
+}
+
+const Hero80 = ({ className }: Hero80Props) => {
+  return (
+    <section className={cn("relative overflow-hidden py-32", className)}>
+      {/* Background gradients */}
+      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_15%_at_40%_55%,hsl(var(--accent))_0%,transparent_100%)] lg:bg-[radial-gradient(ellipse_12%_20%_at_60%_45%,hsl(var(--accent))_0%,transparent_100%)]"></div>
+      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_20%_at_70%_75%,hsl(var(--accent))_0%,transparent_80%)] lg:bg-[radial-gradient(ellipse_15%_30%_at_70%_65%,hsl(var(--accent))_0%,transparent_80%)]"></div>
+
+      {/* Background pattern */}
+      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(hsl(var(--accent-foreground)/0.1)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_60%_at_65%_50%,#000_0%,transparent_80%)] [background-size:8px_8px]"></div>
+
+      <div className="relative z-10 container mx-auto px-4">
+        <div className="grid items-center gap-8 lg:grid-cols-2">
+          {/* Left Column */}
+          <div className="flex flex-col items-center text-center lg:items-start lg:text-start">
+            <a
+              href="https://www.ShadcnBlocks"
+              className="my-6 text-xs font-bold tracking-[0.3em] text-muted-foreground uppercase hover:underline"
+            >
+              پلتفرم کامپوننت
+                                      </a>
+
+            {/* Heading */}
+            <h1 className="text-xl font-semibold sm:text-2xll">
+              رابط کاربری حرفه‌ای
+                                        <br />
+              <span className="text-muted-foreground">به‌سادگی</span>
+            </h1>
+
+            {/* Description */}
+            <p className="my-8 max-w-xl text-muted-foreground lg:text-lg">
+              با مجموعه‌ای از کامپوننت‌های آماده، توسعه وب‌اپلیکیشن‌های مدرن را سریع‌تر آغاز کنید.
+                                      </p>
+
+            {/* Buttons */}
+            <div className="flex w-full flex-col justify-center gap-3 sm:flex-row lg:justify-start">
+              <Button size="lg" className="w-full sm:w-auto">
+                مشاهده کامپوننت‌ها
+                                            </Button>
+              <Button size="lg" variant="outline" className="w-full sm:w-auto">
+                مشاهده دمو
+              </Button>
+            </div>
+
+            {/* Avatar Stack and Stars */}
+            <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center">
+              {/* Avatars */}
+              <div className="flex -space-x-4">
+                {[1, 2, 3, 4, 5].map((num) => (
+                  <Avatar
+                    key={num}
+                    className="size-14 border-2 border-background shadow-sm ring-1 ring-border"
+                  >
+                    <AvatarImage
+                      src={`/block-media/shadcnblocks/block/avatar-$%7Bnum}.webp`}
+                      alt={`آواتار ${num}`}
+                    />
+                  </Avatar>
+                ))}
+              </div>
+
+              {/* Stars */}
+              <div className="flex flex-col items-center sm:items-start">
+                <div className="flex items-center gap-1">
+                  {[...Array(5)].map((_, i) => (
+                    <Star key={i} className="size-5 fill-primary" />
+                  ))}
+                  <span className="font-semibold">5.0</span>
+                </div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  بیش از ۱۰۰۰ توسعه‌دهنده راضی
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column - Images */}
+          <div className="relative grid gap-4 lg:grid-cols-2">
+            {/* Main Image */}
+            <div className="relative aspect-3/4 w-full overflow-hidden rounded-lg bg-muted">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="پیش‌نمایش بلاک‌های رابط کاربری"
+                className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
+              />
+            </div>
+
+            {/* Secondary Image */}
+            <div className="relative aspect-3/4 w-full overflow-hidden rounded-lg bg-muted lg:mt-8">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt="نمونه بلاک"
+                className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero80 };
diff --git a/blocks/hero82.tsx b/blocks/hero82.tsx
new file mode 100644
index 0000000..bbdce9a
--- /dev/null
+++ b/blocks/hero82.tsx
@@ -0,0 +1,56 @@
+import { ArrowRight } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero82Props {
+  className?: string;
+}
+
+const Hero82 = ({ className }: Hero82Props) => {
+  return (
+    <section
+      className={cn(
+        "container flex flex-col gap-10 bg-background py-20 sm:gap-20",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-10 lg:w-[80%] lg:self-center">
+        <h1 className="max-w-2xl text-2xll font-bold tracking-tight text-foreground md:text-2xll lg:text-8xl">
+          مدیریت زمان برای انجام مؤثر وظایف
+                          </h1>
+        <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center">
+          {/* Animated Button */}
+          <Button className="group h-fit rounded-xl p-4 text-xl font-semibold shadow-xl">
+            <div className="size-full overflow-hidden">
+              <div className="flex items-center transition-all group-hover:-translate-x-5">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 -3.552713678800501e-15 820 950"
+                  className="size-5 min-h-5 min-w-5"
+                  fill="white"
+                >
+                  <path d="M404.345 229.846c52.467 0 98.494-20.488 138.08-61.465s59.38-88.626 59.38-142.947c0-5.966-.472-14.444-1.414-25.434-6.912.942-12.096 1.727-15.552 2.355-48.383 6.908-90.954 30.615-127.713 71.12-36.758 40.506-55.137 83.838-55.137 129.996 0 5.337.785 14.13 2.356 26.375zM592.379 950c37.387 0 78.701-25.59 123.943-76.772S796.122 761.915 820 692.836c-88.912-45.844-133.368-111.626-133.368-197.348 0-71.591 35.973-132.82 107.92-183.688-49.954-62.486-115.931-93.729-197.931-93.729-34.56 0-66.134 5.181-94.724 15.543l-17.908 6.594-24.035 9.42c-15.709 5.966-30.004 8.95-42.885 8.95-10.054 0-23.25-3.455-39.586-10.363l-18.38-7.536-17.436-7.065c-25.449-10.676-52.782-16.014-82-16.014-78.23 0-141.065 26.376-188.506 79.128C23.72 349.479 0 419.03 0 505.379c0 121.517 38.015 233.772 114.046 336.763C166.828 914.047 215.054 950 258.724 950c18.537 0 36.916-3.611 55.138-10.833l23.092-9.42 18.38-6.594c25.762-9.106 49.482-13.659 71.16-13.659 22.935 0 49.326 5.81 79.173 17.427l14.609 5.652C550.75 944.191 574.786 950 592.379 950z" />
+                </svg>
+                <span className="block min-w-[calc(100%-20px)]">
+                  دانلود برای Mac
+                </span>
+                <ArrowRight className="size-5! min-h-5 min-w-5 rtl:rotate-180" />
+              </div>
+            </div>
+          </Button>
+        </div>
+      </div>
+      <AspectRatio ratio={1.6 / 1} className="overflow-hidden rounded-3xl">
+        <img
+          src="/block-media/shadcnblocks/block/placeholder-1.svg"
+          alt=""
+          className="size-full object-cover object-center"
+        />
+      </AspectRatio>
+    </section>
+  );
+};
+
+export { Hero82 };
diff --git a/blocks/hero83.tsx b/blocks/hero83.tsx
new file mode 100644
index 0000000..95f646d
--- /dev/null
+++ b/blocks/hero83.tsx
@@ -0,0 +1,94 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ButtonType {
+  title: string;
+  url: string;
+  variant: "outline" | "default";
+}
+
+const BUTTONS: ButtonType[] = [
+  {
+    title: "کاوش",
+    url: "#",
+    variant: "default",
+  },
+  {
+    title: "ثبت‌نام",
+    url: "#",
+    variant: "outline",
+  },
+];
+
+const IMAGES = [
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    alt: "",
+    ratio: 0.644736842,
+    className: "w-[30%]",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    alt: "",
+    ratio: 0.926829268,
+    className: "w-[40%]",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    alt: "",
+    ratio: 0.644736842,
+    className: "w-[30%]",
+  },
+];
+
+interface Hero83Props {
+  className?: string;
+}
+
+const Hero83 = ({ className }: Hero83Props) => {
+  return (
+    <section className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-10 pb-8">
+          <Badge variant="secondary">معرفی ویژگی‌های جدید</Badge>
+          <h1 className="max-w-lg text-center text-xl font-semibold md:max-w-2xl md:text-2xll">
+            فرصت‌های شغلی بیشتری به دست آورید
+                                </h1>
+          <p className="max-w-lg text-center font-medium text-foreground">
+            با دسترسی به امکانات حرفه‌ای، سریع‌تر فرصت‌های شغلی مناسب خود را پیدا کنید.
+                                </p>
+          <div className="flex w-full max-w-lg flex-col items-center justify-center gap-4 md:flex-row md:gap-6">
+            {BUTTONS.map((btn, index) => (
+              <Button
+                asChild
+                variant={btn.variant}
+                size="lg"
+                className="w-full md:flex-1"
+                key={`hero-btn-${index}`}
+              >
+                <a href={btn.url}>{btn.title}</a>
+              </Button>
+            ))}
+          </div>
+        </div>
+        <div className="flex w-full items-end justify-center gap-4">
+          {IMAGES.map((img, index) => (
+            <div className={img.className} key={`hero-img-${index}`}>
+              <AspectRatio ratio={img.ratio} className="rounded-md border">
+                <img
+                  src={img.src}
+                  alt={img.alt}
+                  className="block size-full object-cover object-[50%_0%]"
+                />
+              </AspectRatio>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero83 };
diff --git a/blocks/hero84.tsx b/blocks/hero84.tsx
new file mode 100644
index 0000000..c2ee6b2
--- /dev/null
+++ b/blocks/hero84.tsx
@@ -0,0 +1,83 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Hero84Props {
+  className?: string;
+}
+
+const Hero84 = ({ className }: Hero84Props) => {
+  return (
+    <section
+      className={cn(
+        "h-svg dark overflow-hidden bg-background pt-12 font-sans md:pt-20",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="mb-24 flex flex-col items-center gap-8">
+          <Badge className="w-fit rounded-full border border-white bg-transparent px-8 py-2.5 text-center text-sm font-semibold text-foreground hover:bg-transparent">
+            یکپارچه
+                                </Badge>
+          <div>
+            <h1 className="mb-5 text-center text-2xll font-bold text-foreground">
+              همه ابزارهای کاری را یکپارچه کنید
+                                      </h1>
+            <p className="max-w-[820px] text-center text-xl font-medium text-foreground">
+              همه اطلاعات مشتریان، پروژه‌ها و همکاری تیمی را در یک پلتفرم واحد مدیریت کنید.
+                                      </p>
+          </div>
+        </div>
+        <div className="relative mx-auto aspect-[2.488709677/1] max-w-[87.5rem]">
+          <div className="absolute right-0 bottom-0 z-10 w-[27%] overflow-hidden">
+            <AspectRatio ratio={0.924193548 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt=""
+                className="block size-full object-cover object-top-left"
+              />
+            </AspectRatio>
+          </div>
+          <div className="absolute right-[14%] bottom-0 z-20 w-[32%] overflow-hidden shadow-xl">
+            <AspectRatio ratio={0.924193548 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                alt=""
+                className="block size-full object-cover object-top-left"
+              />
+            </AspectRatio>
+          </div>
+          <div className="absolute bottom-0 left-1/2 z-30 w-[37%] -translate-x-1/2 overflow-hidden shadow-xl">
+            <AspectRatio ratio={0.924193548 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt=""
+                className="block size-full object-cover object-top-left"
+              />
+            </AspectRatio>
+          </div>
+          <div className="absolute bottom-0 left-[14%] z-20 w-[32%] overflow-hidden shadow-xl">
+            <AspectRatio ratio={0.924193548 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                alt=""
+                className="block size-full object-cover object-top-left"
+              />
+            </AspectRatio>
+          </div>
+          <div className="absolute bottom-0 left-0 z-10 w-[27%] overflow-hidden">
+            <AspectRatio ratio={0.924193548 / 1}>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-5.svg"
+                alt=""
+                className="block size-full object-cover object-top-left"
+              />
+            </AspectRatio>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero84 };
diff --git a/blocks/hero85.tsx b/blocks/hero85.tsx
new file mode 100644
index 0000000..56e853a
--- /dev/null
+++ b/blocks/hero85.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Hero85Props {
+  className?: string;
+}
+
+const Hero85 = ({ className }: Hero85Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-16 lg:grid-cols-2">
+          <div className="mx-auto">
+            <div className="flex w-fit items-center gap-2 rounded-full border px-2.5 py-1.5 text-xs font-medium">
+              <Badge>مبتنی بر AI</Badge>
+              راهکاری برای کسب‌وکارهای در حال رشد
+                                      </div>
+            <h1 className="mt-10 mb-4 text-3xl font-semibold lg:text-2xll">
+              مدیریت ارتباط با مشتری، ساده‌تر از همیشه
+                                      </h1>
+            <p className="mx-auto text-muted-foreground lg:text-lg">
+              پورتال اختصاصی مشتریان، اتوماسیون فرایندها و ابزارهای مدیریتی را در یک سامانه یکپارچه در اختیار داشته باشید.
+                                      </p>
+            <div className="mt-10 flex flex-col gap-2 sm:flex-row">
+              <Button size="lg" className="w-full gap-2 sm:w-auto">
+                رایگان شروع کنید
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="w-full gap-2 sm:w-auto"
+              >
+                رزرو دمو
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-col gap-8 lg:hidden">
+            <Carousel
+              opts={{
+                loop: true,
+              }}
+              plugins={[
+                AutoScroll({
+                  speed: 0.8,
+                }),
+              ]}
+              className="-mx-7"
+            >
+              <CarouselContent className="max-h-[350px]">
+                <CarouselItem className="max-w-96">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem className="max-w-96">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem className="max-w-96">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem className="max-w-96">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+              </CarouselContent>
+            </Carousel>
+            <Carousel
+              opts={{
+                loop: true,
+              }}
+              plugins={[
+                AutoScroll({
+                  speed: 0.8,
+                  direction: "backward",
+                }),
+              ]}
+              className="-mx-7"
+            >
+              <CarouselContent className="max-h-[350px]">
+                <CarouselItem className="max-w-96">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem className="max-w-96">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem className="max-w-96">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem className="max-w-96">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+              </CarouselContent>
+            </Carousel>
+          </div>
+          <div className="hidden grid-cols-2 gap-8 lg:grid">
+            <Carousel
+              opts={{
+                loop: true,
+              }}
+              plugins={[
+                AutoScroll({
+                  speed: 0.8,
+                }),
+              ]}
+              orientation="vertical"
+            >
+              <CarouselContent className="max-h-[600px]">
+                <CarouselItem>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+              </CarouselContent>
+            </Carousel>
+            <Carousel
+              opts={{
+                loop: true,
+              }}
+              plugins={[
+                AutoScroll({
+                  speed: 0.8,
+                  direction: "backward",
+                }),
+              ]}
+              orientation="vertical"
+            >
+              <CarouselContent className="max-h-[600px]">
+                <CarouselItem>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-2.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+                <CarouselItem>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-4.svg"
+                    alt="تصویر نمونه"
+                  />
+                </CarouselItem>
+              </CarouselContent>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero85 };
diff --git a/blocks/hero86.tsx b/blocks/hero86.tsx
new file mode 100644
index 0000000..0cfe0bf
--- /dev/null
+++ b/blocks/hero86.tsx
@@ -0,0 +1,51 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero86Props {
+  className?: string;
+}
+
+const Hero86 = ({ className }: Hero86Props) => {
+  return (
+    <section className={cn("pb-24", className)}>
+      <div className="bg-muted pt-16 lg:pt-24">
+        <div className="container flex flex-col items-center lg:flex-row lg:items-start">
+          <div className="relative flex flex-col items-start gap-8 pb-20 lg:w-1/2">
+            <h2 className="text-3xl leading-tight font-bold tracking-tighter text-foreground lg:text-2xll">
+              کمپین‌های تبلیغاتی شما با{" "}
+              <span className="border-muted2 border-b-2">تجربه ما</span> بازدهی بیشتری خواهند داشت.
+                                      </h2>
+            <p className="text-lg text-foreground">
+              با تحلیل داده‌ها، بهینه‌سازی کمپین‌ها و مشاوره تخصصی، بازگشت سرمایه تبلیغات خود را افزایش دهید.
+                                      </p>
+            <Button className="h-fit px-6 py-3.5 text-base font-medium lg:text-lg">
+              می‌خواهم تبلیغات را برون‌سپاری کنم
+            </Button>
+          </div>
+          <div className="relative flex w-full justify-center lg:w-1/2">
+            <div className="relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]">
+              <AspectRatio ratio={355 / 520} className="border-muted2 border">
+                <img
+                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                  alt=""
+                  className="size-full object-cover"
+                />
+              </AspectRatio>
+            </div>
+            <div className="absolute bottom-0 w-full overflow-hidden">
+              <AspectRatio ratio={2} className="relative">
+                <AspectRatio
+                  ratio={1}
+                  className="absolute w-full rounded-full bg-muted"
+                />
+              </AspectRatio>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero86 };
diff --git a/blocks/hero87.tsx b/blocks/hero87.tsx
new file mode 100644
index 0000000..14b0c6a
--- /dev/null
+++ b/blocks/hero87.tsx
@@ -0,0 +1,41 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero87Props {
+  className?: string;
+}
+
+const Hero87 = ({ className }: Hero87Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="text-2xll lg:text-2xll">
+          راهکاری متناسب با نیاز کسب‌وکار شما
+                          </h1>
+        <div className="mt-14 grid gap-10 lg:grid-cols-2">
+          <div>
+            <p className="text-lg text-muted-foreground lg:text-xl">
+              راهکاری انعطاف‌پذیر که متناسب با فرایندهای سازمان شما سفارشی‌سازی می‌شود و همراه با رشد کسب‌وکار توسعه پیدا می‌کند.
+                                      </p>
+            <Button size="lg" className="mt-12">
+              درخواست مشاوره
+                                        <ArrowRight className="ms-2 h-auto w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+          <div className="relative flex items-center justify-center overflow-hidden">
+            <div className="absolute inset-0 -top-1 -z-10 mx-auto h-full w-full max-w-3xl bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-[size:56px_56px] opacity-15"></div>
+            <img
+              src="/block-media/shadcnblocks/block/block-2.svg"
+              alt="تصویر نمونه"
+              className="max-h-[400px]"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero87 };
diff --git a/blocks/hero88.tsx b/blocks/hero88.tsx
new file mode 100644
index 0000000..f0bf66f
--- /dev/null
+++ b/blocks/hero88.tsx
@@ -0,0 +1,54 @@
+import { ArrowDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero88Props {
+  className?: string;
+}
+
+const Hero88 = ({ className }: Hero88Props) => {
+  return (
+    <section
+      className={cn("font-dm_sans bg-background py-12 md:py-32", className)}
+    >
+      <div className="container">
+        <div className="flex w-full flex-col gap-6">
+          <h1 className="text-xl font-bold sm:text-2xll md:text-2xll lg:text-2xll xl:text-8xl">
+            <span className="bg-linear-to-t from-primary to-primary/70 bg-clip-text text-transparent">
+              پلتفرم توسعه رابط کاربری
+                                      </span>
+            <br />
+            <span className="text-foreground">
+              ایده‌های شما را به محصولات دیجیتال حرفه‌ای تبدیل می‌کنیم.
+                                      </span>
+          </h1>
+
+          <p className="text-xl text-muted-foreground sm:text-3xl">
+            با بیش از{" "}
+            <strong className="font-semibold text-foreground">
+              سال‌ها تجربه
+                                      </strong>
+            ، محصولات دیجیتال باکیفیت می‌سازیم که مخاطبان را جذب و رشد
+            کسب‌وکار را شتاب می‌دهند.
+          </p>
+
+          <div className="flex flex-col items-center gap-4 py-4 sm:flex-row sm:flex-wrap">
+            <Button className="w-full rounded-full px-8 py-6 text-lg font-bold sm:w-fit sm:px-12 sm:py-8">
+              شروع همکاری
+                                      </Button>
+            <a
+              href="#"
+              className="inline-flex items-center gap-2 text-lg text-muted-foreground transition-colors hover:text-foreground sm:text-xl"
+            >
+              <span>مشاهده مطالعات موردی</span>
+              <ArrowDown className="size-4 shrink-0 sm:size-6" aria-hidden />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero88 };
diff --git a/blocks/hero89.tsx b/blocks/hero89.tsx
new file mode 100644
index 0000000..ed57c79
--- /dev/null
+++ b/blocks/hero89.tsx
@@ -0,0 +1,67 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero89Props {
+  className?: string;
+}
+
+const Hero89 = ({ className }: Hero89Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex flex-col items-center justify-between gap-10 bg-background p-5 py-20 md:flex-row md:gap-0 md:pr-0 md:pl-9",
+        className,
+      )}
+    >
+      <div className="md:w-1/2">
+        <div className="mx-auto flex max-w-xl flex-col items-start">
+          <h1 className="mb-4 text-xl leading-tight font-semibold tracking-tighter text-foreground lg:text-[64px]">
+            استخدام هوشمند و هدفمند
+                                </h1>
+          <p className="mb-12 text-sm text-foreground lg:text-xl">
+            فرهنگ سازمانی خود را معرفی کنید و بهترین استعدادها را جذب کنید.
+                                </p>
+          <Button className="h-fit rounded-full px-7 py-4 text-sm font-semibold lg:text-base">
+            ثبت فرصت شغلی
+                                </Button>
+        </div>
+      </div>
+      <div className="relative w-full md:w-[45%]">
+        <div className="w-full overflow-hidden rounded-2xl border md:rounded-r-none">
+          <AspectRatio ratio={1.646601942 / 1}>
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt=""
+              className="size-full object-cover"
+            />
+          </AspectRatio>
+        </div>
+        {/* Arrow svg */}
+        <svg
+          width="176"
+          height="101"
+          viewBox="0 0 176 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="absolute top-0 hidden w-[25%] -translate-x-1/2 -translate-y-1/2 stroke-foreground lg:inline-block"
+        >
+          <path
+            d="M1.99999 50.8332C1.99999 50.8332 8.48154 49.5711 9.14573 49.4947C14.2898 49.213 19.4694 49.4695 24.6043 50.0152C37.6066 51.4638 48.999 56.0419 58.643 65.0309C64.3875 70.4653 67.8497 76.0847 63.3772 83.1592C58.6951 90.4386 47.0166 89.2509 42.7034 81.844C38.6754 74.895 40.4347 61.96 43.414 54.954C47.2004 46.1763 57.4275 39.8604 64.9887 34.6776C87.3379 19.3741 124.604 16.1723 149.791 25.5171C156.851 28.1916 165.814 31.2154 171.185 36.7703"
+            strokeWidth="3"
+            strokeMiterlimit="1.5"
+            strokeLinecap="round"
+          />
+          <path
+            d="M145.52 9.53769C145.644 9.4975 145.849 9.70635 145.89 9.83088C148.559 12.1323 150.894 14.6789 153.354 17.1852C157.864 21.7802 162 26.4957 166.175 31.3357C167.855 33.1311 169.535 34.9266 171.256 36.8465C171.718 37.3175 171.294 37.8589 170.582 37.7504C167.73 37.0196 164.837 36.1643 161.984 35.4336C154.376 33.6227 144.231 32.4911 137.824 38.2643"
+            strokeWidth="3"
+            strokeMiterlimit="1.5"
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+    </section>
+  );
+};
+
+export { Hero89 };
diff --git a/blocks/hero9.tsx b/blocks/hero9.tsx
new file mode 100644
index 0000000..1db7a55
--- /dev/null
+++ b/blocks/hero9.tsx
@@ -0,0 +1,70 @@
+import { ChevronRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const codeSample = `
+curl 'https://api.example.com/v1/endpoint' \\
+    -X POST \\
+    -u username:password \\
+    -d param_1=1001 \\
+    -d param_3=true \\
+    -d param_2="Donec quis lorem ligula."
+`.trim();
+
+interface Hero9Props {
+  className?: string;
+}
+
+const Hero9 = ({ className }: Hero9Props) => {
+  return (
+    <section className={cn("relative py-32", className)}>
+      {/* Background gradient */}
+      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_60%_60%_at_65%_50%,hsl(var(--accent))_0%,transparent_80%)]"></div>
+      {/* Background pattern */}
+      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(hsl(var(--accent-foreground)/0.1)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_60%_at_65%_50%,#000_0%,transparent_80%)] [background-size:8px_8px]"></div>
+      {/* Content */}
+      <div className="relative container">
+        <div className="flex flex-col items-start text-start">
+          <Badge variant="outline">نسخه جدید منتشر شد</Badge>
+          <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+            به دنیای توسعه سریع رابط کاربری خوش آمدید
+                                </h1>
+          <p className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
+            کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
+                                </p>
+          <div className="flex w-full flex-col justify-start gap-2 sm:flex-row">
+            <Button className="w-full sm:w-auto">
+              شروع رایگان
+                                        <ChevronRight className="ms-2 size-4 rtl:rotate-180" />
+            </Button>
+            <Button variant="outline" className="w-full sm:w-auto">
+              مشاهده امکانات
+                                      </Button>
+          </div>
+        </div>
+        <div className="relative mt-12 grid grid-cols-12 md:gap-12">
+          <div className="col-span-12 md:col-span-10">
+            <div className="aspect-video overflow-clip rounded-lg border border-border bg-background shadow-md">
+              {/* Hero Image */}
+            </div>
+          </div>
+          <div className="absolute inset-0">
+            <div className="grid h-full grid-cols-12 md:gap-12">
+              <div className="col-span-10 col-start-2 -mt-6 grid translate-y-0 items-start justify-center sm:translate-y-0 sm:items-center md:col-span-6 md:col-end-12 lg:-mt-12 lg:items-start">
+                <div className="absolute h-[140px] w-full rounded-lg bg-primary p-4 shadow-lg">
+                  <pre className="[mask-image:linear-gradient(to_right,#000_80%,transparent_100%)] font-mono text-xs leading-normal text-accent">
+                    <code>{codeSample}</code>
+                  </pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero9 };
diff --git a/blocks/hero90.tsx b/blocks/hero90.tsx
new file mode 100644
index 0000000..23a281a
--- /dev/null
+++ b/blocks/hero90.tsx
@@ -0,0 +1,73 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface Hero90Props {
+  className?: string;
+}
+
+const Hero90 = ({ className }: Hero90Props) => {
+  return (
+    <section
+      className={cn("font-dm_sans bg-background py-12 md:py-20", className)}
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 gap-10 md:gap-20 xl:grid-cols-2">
+          <div className="flex flex-col gap-6">
+            <p className="text-xl font-medium text-foreground">مدیریت ویدیو</p>
+            <h1 className="max-w-[37.5rem] text-xl font-semibold text-foreground sm:text-2xll md:max-w-[51.25rem] md:text-2xll">
+              ویدیوهای مهم را به‌سادگی منتشر کنید
+                                      </h1>
+            <p className="text-xl font-medium text-muted-foreground">
+              ویدیوهای آموزشی، رویدادها و محتوای تیمی را به‌سادگی مدیریت و منتشر کنید.
+                                      </p>
+          </div>
+          <div>
+            <div className="relative mx-auto aspect-[1.723502304/1] max-w-[46.75rem]">
+              <div className="absolute top-0 left-0 z-30 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
+                <div className="m-auto flex w-[85%] flex-col gap-2 md:gap-4">
+                  <div className="flex items-center justify-center gap-[2%]">
+                    <Avatar className="size-[68%]">
+                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                      <AvatarFallback>AV</AvatarFallback>
+                    </Avatar>
+                  </div>
+                  <p className="line-clamp-2 text-center text-[clamp(0.5rem,2.5vw,1.125rem)] font-semibold text-muted-foreground">
+                    از تجربه من، واقعاً افراد بودند که تفاوت را در موفقیت ما
+                    رقم زدند
+                  </p>
+                </div>
+              </div>
+              <div className="absolute bottom-0 left-1/3 z-20 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
+                <div className="m-auto flex w-[85%] flex-col gap-2 md:gap-4">
+                  <Avatar className="mx-auto size-[68%]">
+                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
+                    <AvatarFallback>AV</AvatarFallback>
+                  </Avatar>
+                  <p className="line-clamp-2 text-center text-[clamp(0.5rem,2.5vw,1.125rem)] font-semibold text-muted-foreground">
+                    <span className="text-foreground">افرادی پرشور</span> در
+                    ایجاد ارتباطات معنادار و پیشبرد نوآوری
+                  </p>
+                </div>
+              </div>
+              <div className="absolute right-0 bottom-[15%] z-10 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
+                <div className="m-auto w-[85%]">
+                  <Avatar className="absolute right-[5%] bottom-[5%] z-20 size-[26%]">
+                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
+                    <AvatarFallback>AV</AvatarFallback>
+                  </Avatar>
+                  <p className="line-clamp-4 text-[clamp(0.5rem,2.5vw,1.25rem)] font-semibold text-foreground/60">
+                    فناوری پیشرفت را هدایت می‌کند، ارتباط را تقویت می‌کند،
+                    مسائل را حل می‌کند و امکانات تازه می‌گشاید و آینده کار و
+                    ارتباط ما را شکل می‌دهد
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero90 };
diff --git a/blocks/hero91.tsx b/blocks/hero91.tsx
new file mode 100644
index 0000000..f470094
--- /dev/null
+++ b/blocks/hero91.tsx
@@ -0,0 +1,55 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero91Props {
+  className?: string;
+}
+
+const Hero91 = ({ className }: Hero91Props) => {
+  return (
+    <section
+      className={cn(
+        "flex min-h-screen items-center justify-between bg-background py-14",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-5 px-[10%] lg:w-[50%] lg:pr-0">
+        <p className="font-light text-foreground uppercase">
+          ارائه‌های تعاملی با هوش مصنوعی
+                          </p>
+        <h1 className="text-2xll font-medium text-foreground md:text-2xll lg:text-2xll">
+          پلتفرم ساخت ارائه‌های حرفه‌ای
+                          </h1>
+        <p className="my-8 text-foreground md:text-xl">
+          جلسات، ارائه‌ها و محتوای آموزشی را با کمک هوش مصنوعی تولید و مدیریت کنید.
+                          </p>
+        <div className="flex flex-col gap-4 font-medium md:flex-row">
+          <Button className="h-fit items-center gap-1 rounded-full px-6 py-3">
+            شروع رایگان
+                                </Button>
+          <Button variant="secondary" className="h-fit rounded-full px-6 py-3">
+            رزرو دمو
+          </Button>
+        </div>
+      </div>
+      <div className="relative hidden h-[720px] w-[45%] overflow-hidden rounded-l-full bg-black lg:block">
+        <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          data-wf-ignore="true"
+          data-object-fit="cover"
+          className="h-full w-full rounded-tl-xl object-cover"
+        >
+          <source
+            src="/block-media/shadcnblocks/block/video-1.mp4"
+            type="video/mp4"
+          />
+        </video>
+      </div>
+    </section>
+  );
+};
+
+export { Hero91 };
diff --git a/blocks/hero99.tsx b/blocks/hero99.tsx
new file mode 100644
index 0000000..d4ba247
--- /dev/null
+++ b/blocks/hero99.tsx
@@ -0,0 +1,64 @@
+import { ArrowRight, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero99Props {
+  className?: string;
+}
+
+const Hero99 = ({ className }: Hero99Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative overflow-hidden">
+          <div className="absolute inset-0 -top-1 -left-1 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-[size:92px_92px] opacity-15"></div>
+          <div className="mx-auto max-w-4xl">
+            <a
+              href="#"
+              className="mx-auto mb-4 flex w-fit items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm"
+            >
+              راهنمای توسعه محصول
+                                        <ArrowRight className="inline size-4 rtl:rotate-180" />
+            </a>
+            <h1 className="my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl">
+              راهکارهایی برای رشد سریع‌تر کسب‌وکار
+                                      </h1>
+            <p className="mx-auto mb-8 max-w-2xl text-center text-muted-foreground lg:text-xl">
+              همه ابزارهای موردنیاز برای مدیریت پروژه، همکاری تیمی و توسعه محصولات را در یک پلتفرم در اختیار داشته باشید.
+                                      </p>
+            <div className="flex flex-col justify-center gap-x-2 gap-y-3 sm:flex-row">
+              <Button>
+                شروع کنید
+                <ChevronRight className="ms-2 h-auto w-4 rtl:rotate-180" />
+              </Button>
+              <Button variant="secondary">
+                مشاهده امکانات
+                                              <ChevronRight className="ms-2 h-auto w-4 rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="mt-20 grid gap-6 md:grid-cols-10">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="h-full max-h-[500px] w-full rounded-xl object-cover md:col-span-3"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-2.svg"
+            alt="تصویر نمونه"
+            className="h-full max-h-[500px] w-full rounded-xl object-cover md:col-span-2"
+          />
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-3.svg"
+            alt="تصویر نمونه"
+            className="h-full max-h-[500px] w-full rounded-xl object-cover md:col-span-5"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero99 };
diff --git a/blocks/incentives1.tsx b/blocks/incentives1.tsx
new file mode 100644
index 0000000..a6f0045
--- /dev/null
+++ b/blocks/incentives1.tsx
@@ -0,0 +1,91 @@
+import type { LucideIcon } from "lucide-react";
+import { Gift, Headphones, RefreshCw, ShieldCheck } from "lucide-react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type Incentive = {
+  title: string;
+  icon: LucideIcon;
+  text: string;
+  id: string;
+};
+
+interface Incentives1Props {
+  incentives: Incentive[];
+  className?: string;
+}
+
+const INCENTIVES: Incentive[] = [
+  {
+    id: "1",
+    title: "پشتیبانی فنی",
+    text: "هفت روز هفته، پشتیبانی ۲۴ ساعته",
+    icon: Headphones,
+  },
+  {
+    id: "2",
+    title: "تعویض سریع",
+    text: "پردازش مرجوعی تا ۶۰ روز",
+    icon: RefreshCw,
+  },
+  {
+    id: "3",
+    title: "بسته‌بندی ویژه",
+    text: "بسته‌بندی رایگان برای خریدهای بالای ۱۰۰ دلار",
+    icon: Gift,
+  },
+  {
+    id: "4",
+    title: "ضمانت محصول",
+    text: "گارانتی بی‌دردسر و بدون پیچیدگی",
+    icon: ShieldCheck,
+  },
+];
+
+const Incentives1 = ({
+  incentives = INCENTIVES,
+  className,
+}: Incentives1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Carousel
+          opts={{
+            breakpoints: {
+              "(min-width: 768px)": {
+                active: false,
+              },
+            },
+            align: "start",
+            direction: "rtl",
+          }}
+        >
+          <CarouselContent className="md:ms-0 md:grid md:grid-cols-[repeat(2,_minmax(12.5rem,_18.75rem))] md:justify-center md:gap-5 xl:grid-cols-[repeat(4,_minmax(12.5rem,_18.75rem))]">
+            {incentives.map(({ title, icon: Icon, text, id }) => (
+              <CarouselItem key={id} className="basis-75 md:ps-0">
+                <div className="flex items-center gap-6">
+                  <div className="shrink-0 basis-16">
+                    <div className="flex size-16 place-content-center place-items-center rounded-full border">
+                      <Icon className="w-10" />
+                    </div>
+                  </div>
+                  <div className="flex-1 space-y-1 text-start">
+                    <h3 className="text-base font-semibold">{title}</h3>
+                    <p className="text-sm">{text}</p>
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Incentives1 };
diff --git a/blocks/incentives2.tsx b/blocks/incentives2.tsx
new file mode 100644
index 0000000..7a61405
--- /dev/null
+++ b/blocks/incentives2.tsx
@@ -0,0 +1,107 @@
+import type { LucideIcon } from "lucide-react";
+import { Gift, Headphones, RefreshCw } from "lucide-react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type Incentive = {
+  title: string;
+  icon: LucideIcon;
+  text: string;
+  id: string;
+};
+
+type IncentivesSection = {
+  list: Incentive[];
+  title: string;
+};
+
+interface Incentives2Props extends IncentivesSection {
+  className?: string;
+}
+
+const INCENTIVES_SECTION: IncentivesSection = {
+  title: "خدمات مطمئن، خرید آسان",
+  list: [
+    {
+      id: "1",
+      title: "پشتیبانی فنی",
+      text: "هفت روز هفته، پشتیبانی ۲۴ ساعته",
+      icon: Headphones,
+    },
+    {
+      id: "2",
+      title: "تعویض سریع",
+      text: "پردازش مرجوعی تا ۶۰ روز",
+      icon: RefreshCw,
+    },
+    {
+      id: "3",
+      title: "بسته‌بندی ویژه",
+      text: "بسته‌بندی رایگان برای خریدهای بالای ۱۰۰ دلار",
+      icon: Gift,
+    },
+  ],
+};
+
+const Incentives2 = ({
+  list = INCENTIVES_SECTION.list,
+  title = INCENTIVES_SECTION.title,
+  className,
+}: Incentives2Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden bg-primary py-12.5", className)}
+    >
+      <div className="container">
+        <div className="flex flex-col gap-10 md:items-center xl:grid xl:grid-cols-4 xl:gap-15">
+          <h2 className="text-xl leading-snug font-bold text-primary-foreground max-xl:text-center xl:text-start xl:text-3xl">
+            {title}
+          </h2>
+          <div className="max-md:-mx-[calc((100vw-var(--breakpoint-sm)+4rem)/2)] max-sm:-mx-8 xl:col-span-3">
+            <Carousel
+              opts={{
+                breakpoints: {
+                  "(min-width: 768px)": {
+                    active: false,
+                  },
+                },
+                align: "center",
+                direction: "rtl",
+              }}
+            >
+              <CarouselContent className="ms-0 md:justify-center md:gap-7.5">
+                {list.map(({ title, icon: Icon, text, id }) => (
+                  <CarouselItem
+                    key={id}
+                    className="ps-0 sm:basis-100 md:shrink md:basis-1/3"
+                  >
+                    <div className="mx-auto flex w-full max-w-75 flex-col items-center gap-5">
+                      <Icon className="size-10 stroke-primary-foreground stroke-1" />
+                      <div className="space-y-3">
+                        <h3 className="text-center text-lg font-bold text-primary-foreground xl:text-xl">
+                          {title}
+                        </h3>
+                        <p className="text-center text-primary-foreground/80">
+                          {text}
+                        </p>
+                      </div>
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Incentives2 };
diff --git a/blocks/incentives6.tsx b/blocks/incentives6.tsx
new file mode 100644
index 0000000..c20aee2
--- /dev/null
+++ b/blocks/incentives6.tsx
@@ -0,0 +1,114 @@
+import type { LucideIcon } from "lucide-react";
+import { Package, Phone, Smartphone, Truck } from "lucide-react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { cn } from "@/lib/utils";
+
+type Incentive = {
+  title: string;
+  icon: LucideIcon;
+  text: string;
+};
+
+type Incentives6Props = {
+  incentives: Incentive[];
+  className?: string;
+};
+
+const INCENTIVES_SECTION: Incentive[] = [
+  {
+    title: "پشتیبانی مشتریان",
+    text: "سوالات پرتکرار را ببینید و بهترین راه‌های تماس با ما را بیابید.",
+    icon: Phone,
+  },
+  {
+    title: "اپلیکیشن‌های ما",
+    text: "با اپلیکیشن‌های ساده ما، هوشمندانه‌تر خرید کنید و فضای خود را متحول کنید.",
+    icon: Smartphone,
+  },
+  {
+    title: "راهنما و آموزش",
+    text: "به منابع مفید دسترسی داشته باشید  از راهنمای مونتاژ تا پشتیبانی خانه هوشمند.",
+    icon: Package,
+  },
+  {
+    title: "پیگیری سفارش",
+    text: "به‌روز بمانید  سفارش خود را هر زمان پیگیری، ویرایش یا لغو کنید.",
+    icon: Truck,
+  },
+];
+
+const Incentives6 = ({
+  incentives = INCENTIVES_SECTION,
+  className,
+}: Incentives6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="max-sm:border-y">
+        <div className="container">
+          <Carousel
+            opts={{
+              breakpoints: {
+                "(min-width: 640px)": {
+                  active: false,
+                },
+              },
+              direction: "rtl",
+            }}
+          >
+            <CarouselContent className="ms-0 py-px sm:grid sm:grid-cols-2 lg:grid-cols-4 sm:[&>div]:overflow-auto">
+              {incentives.map(({ title, text, icon: Icon }, index) => (
+                <CarouselItem
+                  className="ps-0 not-last:-me-px sm:-mb-px sm:max-lg:odd:-me-px"
+                  key={index}
+                >
+                  <Item
+                    className="h-full rounded-none py-16 max-sm:border-transparent"
+                    variant="outline"
+                  >
+                    <ItemContent className="items-center">
+                      <ItemMedia className="mx-auto mb-3">
+                        <Icon className="stroke-1.5 size-7 stroke-muted-foreground" />
+                      </ItemMedia>
+                      <ItemTitle className="text-center font-serif text-xl text-foreground">
+                        {title}
+                      </ItemTitle>
+                      <ItemDescription className="line-clamp-none max-w-80 text-center">
+                        {text}
+                      </ItemDescription>
+                    </ItemContent>
+                  </Item>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <div className="flex items-center justify-center sm:hidden">
+              <CarouselPrevious
+                variant="ghost"
+                className="static size-12 translate-0 rtl:rotate-180"
+              />
+              <CarouselNext
+                variant="ghost"
+                className="static size-12 translate-0 rtl:rotate-180"
+              />
+            </div>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Incentives6 };
diff --git a/blocks/incentives7.tsx b/blocks/incentives7.tsx
new file mode 100644
index 0000000..3b84269
--- /dev/null
+++ b/blocks/incentives7.tsx
@@ -0,0 +1,174 @@
+"use client";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type Incentive = {
+  title: string;
+  icon?: string;
+  text: string;
+};
+
+type IncentivesSection = {
+  list: Incentive[];
+  overline: string;
+  text: {
+    strong: string;
+    regular: string;
+  };
+  cta: {
+    link: string;
+    text: string;
+  };
+};
+
+interface Incentives7Props extends IncentivesSection {
+  className?: string;
+}
+
+const INCENTIVES_SECTION: IncentivesSection = {
+  overline: "درباره ما",
+  text: {
+    strong: "برای عملکرد طراحی شده، برای راحتی ساخته شده و برای ماندگاری  ",
+    regular:
+      "لباس‌های ما با هر قدم، هر حرکت و هر روز استراحت همراهتانند. میانبر نیست؛ فقط پارچه‌های پیشرفته و برش استثنایی.",
+  },
+  cta: {
+    link: "#",
+    text: "بیشتر درباره ما",
+  },
+  list: [
+    {
+      icon: "/block-media/shadcnblocks/block/block-1.svg",
+      title: "طراحی دوستدار محیط زیست",
+      text: "با پارچه‌های سازگار با محیط زیست ساخته شده برای عملکرد برتر و کاهش اثر زیست‌محیطی.",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/block-2.svg",
+      title: "پرداخت امن",
+      text: "اطلاعات شما با پرداخت رمزنگاری‌شده محافظت می‌شود؛ تراکنش‌هایی مطمئن و بی‌دردسر.",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/block-3.svg",
+      title: "مرجوعی آسان",
+      text: "حس مناسب نبود؟ تا ۳۰ روز، تعویض یا مرجوعی رایگان داشته باشید.",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/block-4.svg",
+      title: "ارسال سراسری",
+      text: "هر جا که تمرین می‌کنید، لباس‌های ورزشی باکیفیت را تا درب منزل تحویل می‌گیرید.",
+    },
+  ],
+};
+
+const Incentives7 = ({
+  list = INCENTIVES_SECTION.list,
+  overline = INCENTIVES_SECTION.overline,
+  text = INCENTIVES_SECTION.text,
+  cta = INCENTIVES_SECTION.cta,
+  className,
+}: Incentives7Props) => {
+  const [current, setCurrent] = useState(0);
+  const [api, setApi] = useState<CarouselApi>();
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = (api: CarouselApi) => {
+      setCurrent(api?.selectedScrollSnap() ?? 0);
+    };
+
+    updateCurrent(api);
+
+    api.on("reInit", updateCurrent).on("select", updateCurrent);
+
+    return () => {
+      api.off("reInit", updateCurrent).off("select", updateCurrent);
+    };
+  }, [api]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("overflow-hidden py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 justify-between gap-16 lg:grid-cols-2">
+          <div className="flex h-full flex-col justify-between gap-8">
+            <div className="space-y-4 text-start">
+              <h2 className="leading-normal font-medium">{overline}</h2>
+              <p className="text-xl font-medium sm:text-xl xl:text-3xl">
+                <strong>{text.strong}</strong>
+                {text.regular}
+              </p>
+            </div>
+            <div>
+              <Button size="lg" className="max-sm:w-full" asChild>
+                <a href={cta.link}>{cta.text}</a>
+              </Button>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <Carousel
+              opts={{
+                breakpoints: {
+                  "(min-width: 640px)": {
+                    active: false,
+                  },
+                },
+                direction: "rtl",
+              }}
+              setApi={setApi}
+              className="[&>div]:overflow-visible"
+            >
+              <CarouselContent className="sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16">
+                {list.map((item, index) => (
+                  <CarouselItem key={index}>
+                    <Card className="border-none bg-muted p-5 shadow-none sm:bg-background sm:p-0">
+                      <CardContent className="space-y-10 p-0">
+                        <img
+                          className="size-11"
+                          src={item.icon}
+                          alt={item.title}
+                        />
+                        <div className="max-w-110 space-y-1 text-start">
+                          <CardTitle className="text-lg font-medium xl:text-xl">
+                            {item.title}
+                          </CardTitle>
+                          <CardDescription className="text-sm text-balance xl:text-base">
+                            {item.text}
+                          </CardDescription>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+            <div className="relative h-px w-full overflow-hidden bg-primary/30 sm:hidden">
+              <div
+                style={{
+                  width: `${100 / list.length}%`,
+                  transform: `translateX(-${current * 100}%)`,
+                }}
+                className="absolute end-0 z-10 h-full bg-primary transition-transform duration-300"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Incentives7 };
diff --git a/blocks/industries1.tsx b/blocks/industries1.tsx
new file mode 100644
index 0000000..4f6a0ba
--- /dev/null
+++ b/blocks/industries1.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import type { Easing } from "framer-motion";
+import { motion } from "framer-motion";
+import { Plus } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const easeTransition: Easing = [0.25, 0.1, 0.25, 1];
+
+interface Industry {
+  name: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  url: string;
+}
+
+interface Industries1Props {
+  title: string;
+  industryLabel: string;
+  industries: Industry[];
+  className?: string;
+}
+
+const Industries1 = ({
+  className,
+  title = "صنایع",
+  industryLabel = "نگاه کلی",
+  industries = [
+    {
+      name: "بهداشت و درمان",
+      description:
+        "راه‌حل‌های پزشکی نوآورانه و بسترهای سلامت دیجیتال برای بهبود نتایج درمان بیماران و ساده‌سازی ارائه خدمات بهداشتی.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-1.svg",
+      imageAlt: "تصویر فناوری بهداشت و درمان",
+      url: "https://ShadcnBlocks/blocks",
+    },
+    {
+      name: "فین‌تک",
+      description:
+        "راه‌حل‌های پیشرفته فناوری مالی که بانکداری، پرداخت و مدیریت سرمایه‌گذاری را برای عصر دیجیتال متحول می‌کند.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-2.svg",
+      imageAlt: "تصویر فناوری مالی",
+      url: "https://ShadcnBlocks/blocks",
+    },
+    {
+      name: "تجارت الکترونیک",
+      description:
+        "پلتفرم‌های جامع خرده‌فروشی آنلاین و بازارگاه‌ها برای افزایش فروش و ارتقای تجربه مشتری.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-3.svg",
+      imageAlt: "تصویر پلتفرم تجارت الکترونیک",
+      url: "https://ShadcnBlocks/blocks",
+    },
+    {
+      name: "آموزش",
+      description:
+        "سامانه‌های نوین مدیریت یادگیری و فناوری آموزشی برای توانمندسازی دانش‌آموزان و مدرسان در سراسر جهان.",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-4.svg",
+      imageAlt: "تصویر فناوری آموزشی",
+      url: "https://ShadcnBlocks/blocks",
+    },
+  ],
+}: Industries1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="container">
+        <h2 className="mb-8 text-3xl font-medium text-foreground">{title}</h2>
+        <div className="grid grid-cols-1 gap-1 lg:grid-cols-2 xl:grid-cols-4">
+          {industries.map((industry, index) => (
+            <a href={industry.url} key={index}>
+              <motion.div
+                key={index}
+                className="group relative overflow-hidden bg-muted"
+                whileHover="hover"
+                initial="initial"
+              >
+                {/* Default state: Image and heading */}
+                <motion.div
+                  variants={{
+                    initial: {
+                      opacity: 1,
+                      pointerEvents: "auto",
+                      clipPath: "inset(0% 0% 0% 0%)",
+                    },
+                    hover: {
+                      opacity: 0,
+                      pointerEvents: "none",
+                      clipPath: "inset(0% 0% 100% 0%)",
+                    },
+                  }}
+                  transition={{ duration: 0.4, ease: easeTransition }}
+                  className="relative z-0 flex h-full min-h-120 flex-col items-center justify-center lg:min-h-144 xl:min-h-112"
+                >
+                  <div className="flex h-full justify-center">
+                    <img
+                      src={industry.image}
+                      alt={industry.imageAlt}
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                  <h3 className="absolute bottom-10 text-lg font-medium text-foreground">
+                    {industry.name}
+                  </h3>
+                </motion.div>
+
+                {/* Black overlay - slides up from bottom */}
+                <motion.div
+                  className="absolute inset-0 z-10 bg-black"
+                  variants={{
+                    initial: { y: "100%" },
+                    hover: { y: "0%" },
+                  }}
+                  transition={{ duration: 0.4, ease: easeTransition }}
+                  style={{ willChange: "transform" }}
+                />
+
+                {/* Hover state: Description */}
+                <motion.div
+                  variants={{
+                    initial: { opacity: 0, y: 20 },
+                    hover: { opacity: 1, y: 0 },
+                  }}
+                  transition={{ duration: 0.4, ease: easeTransition }}
+                  className="absolute inset-0 z-20 flex min-h-120 items-center justify-center p-8 text-start text-white lg:min-h-144 xl:min-h-112"
+                >
+                  <div className="space-y-3">
+                    <p className="font-medium opacity-90">{industryLabel}:</p>
+                    <p>{industry.description}</p>
+                  </div>
+                </motion.div>
+
+                {/* Plus button */}
+                <motion.div
+                  className="absolute top-4 start-4 z-30"
+                  variants={{
+                    initial: { opacity: 0.7, rotate: 0 },
+                    hover: { opacity: 1, rotate: 90 },
+                  }}
+                  transition={{ duration: 0.4, ease: easeTransition }}
+                >
+                  <div className="relative rounded-full p-2">
+                    <div className="absolute inset-0 rounded-full bg-muted-foreground/20" />
+                    <motion.div
+                      className="absolute inset-0 rounded-full bg-muted-foreground"
+                      variants={{
+                        initial: { opacity: 0 },
+                        hover: { opacity: 1 },
+                      }}
+                      transition={{ duration: 0.4, ease: easeTransition }}
+                    />
+                    <Plus className="relative z-10 size-4" />
+                  </div>
+                </motion.div>
+              </motion.div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Industries1 };
diff --git a/blocks/industries2.tsx b/blocks/industries2.tsx
new file mode 100644
index 0000000..149f037
--- /dev/null
+++ b/blocks/industries2.tsx
@@ -0,0 +1,110 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Industry {
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt: string;
+}
+
+interface Industries2Props {
+  badge: string;
+  heading: string;
+  services: Industry[];
+  className?: string;
+}
+
+const Industries2 = ({
+  className,
+  badge = "صنایع",
+  heading =
+    "تحول صنایع با راه‌حل‌های فناوری نوآورانه که کارایی، رشد و عملیات پایدار را تقویت می‌کنند.",
+  services = [
+    {
+      title: "معدن",
+      description:
+        "توانمندسازی عملیات معدنی با سامانه‌های اتوماسیون پیشرفته، راه‌حل‌های پایش لحظه‌ای، بسترهای مدیریت ایمنی و فناوری‌های بهینه‌سازی منابع که کارایی را بیشینه و استخراج پایدار را تضمین می‌کنند.",
+      imageSrc:
+        "/block-media/shadcnblocks/block/placeholder-1.svg",
+      imageAlt: "آیکون صنعت معدن",
+    },
+    {
+      title: "مالی",
+      description:
+        "ارائه راه‌حل‌های فناوری مالی امن و مقیاس‌پذیر، از جمله بسترهای بانکداری دیجیتال، سامانه‌های پردازش پرداخت، ابزارهای مدیریت ریسک و چارچوب‌های انطباق با مقررات برای نوآوری و رقابت مؤثر مؤسسات مالی.",
+      imageSrc:
+        "/block-media/shadcnblocks/block/placeholder-2.svg",
+      imageAlt: "آیکون صنعت مالی",
+    },
+    {
+      title: "انرژی",
+      description:
+        "تحول عملیات انرژی با فناوری‌های شبکه هوشمند، سامانه‌های مدیریت انرژی تجدیدپذیر، راه‌حل‌های نگهداری پیش‌بینانه و ابزارهای پیش‌بینی تقاضا برای بهینه‌سازی تخصیص منابع و بهبود پایداری.",
+      imageSrc:
+        "/block-media/shadcnblocks/block/placeholder-3.svg",
+      imageAlt: "آیکون صنعت انرژی",
+    },
+    {
+      title: "ساخت‌وساز",
+      description:
+        "ساده‌سازی پروژه‌های ساخت‌وساز با بسترهای مدیریت پروژه، یکپارچه‌سازی BIM، ابزارهای همکاری لحظه‌ای و سامانه‌های پایش ایمنی که هزینه را کاهش، زمان‌بندی را بهبود و بهره‌وری کارگاه را افزایش می‌دهند.",
+      imageSrc:
+        "/block-media/shadcnblocks/block/placeholder-4.svg",
+      imageAlt: "آیکون صنعت ساخت‌وساز",
+    },
+  ],
+}: Industries2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        {/* Header Section */}
+        <div className="mb-16 text-start">
+          {badge && (
+            <Badge
+              variant="outline"
+              className="mb-4 rounded-none border-0 bg-muted p-2 text-primary"
+            >
+              {badge}
+            </Badge>
+          )}
+          <h2 className="max-w-2xl text-3xl leading-tight font-bold text-balance lg:text-xl">
+            {heading}
+          </h2>
+        </div>
+
+        {/* Services Grid */}
+        <div className="space-y-8">
+          {services.map((service, index) => (
+            <div
+              key={index}
+              className="border-b border-border pb-8 first:border-t first:pt-8 last:border-b-0"
+            >
+              <div className="grid grid-cols-1 items-start gap-4 md:grid-cols-12 md:items-center md:gap-8">
+                <div className="order-2 text-start md:order-none md:col-span-4">
+                  <h3 className="text-lg font-semibold text-foreground md:text-xl">
+                    {service.title}
+                  </h3>
+                </div>
+                <div className="order-1 md:order-none md:col-span-2 md:flex md:justify-center">
+                  <img
+                    src={service.imageSrc}
+                    alt={service.imageAlt}
+                    className="h-12 w-12 object-contain md:h-16 md:w-16"
+                  />
+                </div>
+                <div className="order-3 text-start md:order-none md:col-span-6">
+                  <p className="text-sm leading-relaxed text-muted-foreground">
+                    {service.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Industries2 };
diff --git a/blocks/industries3.tsx b/blocks/industries3.tsx
new file mode 100644
index 0000000..da6aa1e
--- /dev/null
+++ b/blocks/industries3.tsx
@@ -0,0 +1,135 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Project {
+  year: string;
+  name: string;
+  description: string;
+  imageSrc: string;
+  imageAlt: string;
+  url: string;
+}
+
+interface Industries3Props {
+  labels: string[];
+  projects: Project[];
+  className?: string;
+}
+
+const Industries3 = ({
+  className,
+  labels = ["سال", "صنعت", "توضیحات"],
+  projects = [
+    {
+      year: "/۲۲۴",
+      name: "/فناوری مصرفی",
+      description: "راه‌حل‌های نوآورانه در الکترونیک مصرفی و دستگاه‌های هوشمند",
+      imageSrc:
+        "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
+      imageAlt: "پلتفرم اتوماسیون",
+      url: "https://ShadcnBlocks/blocks",
+    },
+    {
+      year: "/۲۲۳",
+      name: "/زیست‌فناوری",
+      description:
+        "تحقیقات پیشرفته زیست‌فناوری و توسعه داروسازی",
+      imageSrc:
+        "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg",
+      imageAlt: "داشبورد تحلیل داده",
+      url: "https://ShadcnBlocks/blocks",
+    },
+    {
+      year: "/۲۲۳",
+      name: "/امنیت سایبری",
+      description: "راه‌حل امنیتی در سطح سازمانی برای حفاظت از داده‌ها",
+      imageSrc:
+        "/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png",
+      imageAlt: "پلتفرم امنیتی",
+      url: "https://ShadcnBlocks/blocks",
+    },
+    {
+      year: "/۲۲۲",
+      name: "/فناوری سلامت",
+      description: "سامانه یکپارچه مدیریت بهداشت با قابلیت پزشکی از راه دور",
+      imageSrc:
+        "/block-media/shadcnblocks/block/photos/israel-andrade-YI_9SivVt_s-unsplash.jpg",
+      imageAlt: "پلتفرم پزشکی",
+      url: "https://ShadcnBlocks/blocks",
+    },
+  ],
+}: Industries3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("min-h-screen bg-muted py-16", className)}>
+      <div className="container mx-auto flex flex-col gap-8 px-8">
+        {/* Header Row */}
+        <div className="grid grid-cols-2 gap-8 text-start font-medium text-muted-foreground md:grid-cols-3">
+          <div className="order-2 ps-10 text-sm md:order-1 lg:ps-10">
+            {labels[0]}
+          </div>
+          <div className="order-1 ps-5 text-sm md:order-2 md:ps-0">
+            {labels[1]}
+          </div>
+          <div className="hidden text-sm md:order-3 lg:block">{labels[2]}</div>
+        </div>
+
+        {/* Project Rows */}
+        <div className="space-y-0">
+          {projects.map((project, index) => (
+            <a href={project.url} key={index}>
+              <div className="group relative mb-2 flex min-h-[100px] flex-col justify-center md:min-h-0 lg:mb-0">
+                <div className="relative z-3 grid grid-cols-2 gap-8 transition-all duration-300 md:grid-cols-3 lg:hover:rounded-lg lg:hover:font-medium lg:hover:text-secondary lg:hover:shadow-lg">
+                  {/* Year Column */}
+                  <div className="order-2 flex items-center md:order-1">
+                    <span className="ps-10 text-xs font-medium text-secondary opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
+                      {project.year}
+                    </span>
+                  </div>
+
+                  {/* نام صنعت و توضیحات */}
+                  <div className="order-1 col-span-1 grid grid-cols-2 gap-8 border-b border-muted-foreground/20 p-5 transition-all duration-300 md:order-2 md:col-span-2 md:p-10 md:pe-0 md:ps-0 lg:group-hover:border-transparent">
+                    {/* نام صنعت */}
+                    <div className="flex items-center">
+                      <span className="ms-0 ps-0 text-xl font-medium text-secondary transition-all duration-300 md:text-xl lg:text-foreground lg:group-hover:ps-2 lg:group-hover:text-secondary">
+                        {project.name}
+                      </span>
+                    </div>
+
+                    {/* Description and Button */}
+                    <div className="hidden items-center justify-between gap-4 text-start lg:flex lg:pe-10">
+                      <span className="text-sm text-secondary/80 opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
+                        {project.description}
+                      </span>
+
+                      {/* Action Button */}
+                      <button
+                        type="button"
+                        aria-label="مشاهده جزئیات"
+                        className="flex translate-x-full items-center justify-center rounded-full bg-primary p-1 text-secondary opacity-100 shadow-md transition-all duration-300 ease-out rtl:-translate-x-full lg:opacity-0 lg:group-hover:translate-x-0 lg:group-hover:opacity-100"
+                      >
+                        <ArrowUpRight className="rtl:rotate-180" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Background Image */}
+                <img
+                  src={project.imageSrc}
+                  alt={project.imageAlt}
+                  className="absolute inset-0 z-1 h-full w-full object-cover opacity-100 transition-all duration-300 lg:opacity-0 lg:group-hover:opacity-100"
+                />
+
+                {/* Overlay */}
+                <div className="absolute inset-0 z-2 bg-black/20 opacity-100 transition-all duration-300 lg:opacity-0 lg:group-hover:opacity-100" />
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Industries3 };
diff --git a/blocks/industries4.tsx b/blocks/industries4.tsx
new file mode 100644
index 0000000..76e602f
--- /dev/null
+++ b/blocks/industries4.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { CornerDownRight } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Contractor {
+  id: string;
+  category: string;
+  title: string;
+  imageSrc: string;
+  imageAlt: string;
+  learnMoreUrl: string;
+}
+
+interface Industries4Props {
+  heading: string;
+  contractors: Contractor[];
+  className?: string;
+}
+
+const Industries4 = ({
+  className,
+  heading = "توانمندسازی صنایع انرژی تجدیدپذیر",
+  contractors = [
+    {
+      id: "mining-enterprises",
+      category: "برقابی",
+      title:
+        "تحول در تولید برقابی با مدیریت هوشمند سدها",
+      imageSrc:
+        "/block-media/shadcnblocks/block/industry/hydro.jpg",
+      imageAlt: "محل بهره‌برداری نیروگاه برقابی",
+      learnMoreUrl: "#",
+    },
+    {
+      id: "global-finance",
+      category: "بادی",
+      title:
+        "بیشینه‌سازی بهره‌وری مزرعه‌های بادی با بهینه‌سازی توربین مبتنی بر هوش مصنوعی",
+      imageSrc:
+        "/block-media/shadcnblocks/block/industry/wind.jpg",
+      imageAlt: "تولید انرژی بادی",
+      learnMoreUrl: "#",
+    },
+    {
+      id: "elite-fashion",
+      category: "خورشیدی",
+      title:
+        "گسترش زیرساخت خورشیدی با یکپارچه‌سازی پیشرفته شبکه فتوولتائیک",
+      imageSrc:
+        "/block-media/shadcnblocks/block/industry/solar.jpg",
+      imageAlt: "تولید انرژی خورشیدی",
+      learnMoreUrl: "#",
+    },
+  ],
+}: Industries4Props) => {
+  const [activeContractor, setActiveContractor] = useState(
+    contractors[0]?.id || "",
+  );
+
+  const handleContractorHover = (contractorId: string) => {
+    setActiveContractor(contractorId);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16 md:py-24", className)}>
+      <div className="container">
+        {/* Heading */}
+        <div className="mb-12 text-start">
+          <h2 className="text-xl md:text-2xll lg:text-2xll">{heading}</h2>
+        </div>
+
+        {/* Mobile Contractor Showcase */}
+        <div className="space-y-6 lg:hidden">
+          {contractors.map((contractor) => (
+            <a
+              key={contractor.id}
+              href={contractor.learnMoreUrl}
+              className="block overflow-hidden rounded-lg border border-border"
+            >
+              {/* Image */}
+              <div className="relative aspect-video w-full">
+                <img
+                  src={contractor.imageSrc}
+                  alt={contractor.imageAlt}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+
+              {/* Content */}
+              <div className="space-y-4 p-6 text-start">
+                <div className="flex items-center">
+                  <span className="text-xl font-semibold">
+                    {contractor.category}
+                  </span>
+                </div>
+                <h3 className="text-lg leading-tight text-muted-foreground">
+                  {contractor.title}
+                </h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="p-0 text-sm font-medium text-primary hover:text-primary/80"
+                  asChild
+                >
+                  <a href={contractor.learnMoreUrl}>
+                    <CornerDownRight className="ms-1 h-3 w-3 rtl:-scale-x-100" />
+                    بیشتر بدانید
+                  </a>
+                </Button>
+              </div>
+            </a>
+          ))}
+        </div>
+
+        {/* Desktop Contractor Showcase */}
+        <div className="hidden h-128 overflow-hidden border border-border lg:flex">
+          {contractors.map((contractor) => (
+            <a
+              key={contractor.id}
+              href={contractor.learnMoreUrl}
+              className={`flex h-full cursor-pointer gap-6 overflow-hidden border-s border-border first:border-s-0 ${
+                activeContractor === contractor.id ? "flex-1" : "w-48"
+              }`}
+              onMouseEnter={() => handleContractorHover(contractor.id)}
+            >
+              <div className="flex h-full min-w-0 flex-col justify-between gap-8 p-6 text-start">
+                {/* Logo */}
+                <div className="flex h-14 w-32 items-center">
+                  <span className="text-xl font-semibold">
+                    {contractor.category}
+                  </span>
+                </div>
+
+                <div className="flex flex-col justify-between gap-8">
+                  {/* Expanded Content  */}
+                  <AnimatePresence>
+                    {activeContractor === contractor.id && (
+                      <motion.div
+                        key={`content-${contractor.id}`}
+                        className="space-y-4"
+                      >
+                        <h3 className="text-lg leading-tight text-muted-foreground">
+                          {contractor.title}
+                        </h3>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="p-0 text-sm font-medium text-primary hover:text-primary/80"
+                          asChild
+                        >
+                          <a href={contractor.learnMoreUrl}>
+                            <CornerDownRight className="ms-1 h-3 w-3 rtl:-scale-x-100" />
+                            بیشتر بدانید
+                          </a>
+                        </Button>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              {/* Image  */}
+              <AnimatePresence>
+                {activeContractor === contractor.id && (
+                  <motion.div
+                    key={contractor.id}
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -20 }}
+                    transition={{ duration: 0.4, ease: "easeOut" }}
+                    className={`relative h-full min-w-0 ${
+                      contractor.id === contractors[0]?.id
+                        ? "w-96 flex-shrink-0"
+                        : "flex-1"
+                    }`}
+                  >
+                    <img
+                      src={contractor.imageSrc}
+                      alt={contractor.imageAlt}
+                      className="h-full w-full object-cover"
+                    />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Industries4 };
diff --git a/blocks/integration1.tsx b/blocks/integration1.tsx
new file mode 100644
index 0000000..7fa77f7
--- /dev/null
+++ b/blocks/integration1.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: number;
+  icon: string;
+  title: string;
+  description: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: 1,
+    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    title: "حساب ابری Sheets",
+    description:
+      "داده‌های خود را با حساب ابری Sheets همگام کنید و اتوماسیون را بدون دردسر انجام دهید.",
+  },
+  {
+    id: 2,
+    icon: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    title: "Slack",
+    description:
+      "اعلان‌ها و به‌روزرسانی‌ها را مستقیم در کانال‌های پیام‌رسان تیمی دریافت کنید.",
+  },
+  {
+    id: 3,
+    icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+    title: "Sketch",
+    description:
+      "طراحی‌های طراحی برداری را وارد کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
+  },
+  {
+    id: 4,
+    icon: "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+    title: "Gatsby",
+    description: "با یکپارچه‌سازی Gatsby وب‌سایت‌هایی سریع و بهینه بسازید.",
+  },
+  {
+    id: 5,
+    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+    title: "Shopify",
+    description:
+      "داده‌های فروشگاه Shopify را همگام کنید و مدیریت سفارش‌ها را ساده‌تر کنید.",
+  },
+  {
+    id: 6,
+    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    title: "GitHub",
+    description:
+      "گردش‌کارها را خودکار کنید و تغییرات را با یکپارچه‌سازی مخزن کد پیگیری کنید.",
+  },
+];
+
+const FeatureCard: React.FC<DataItem> = ({ title, description, icon }) => {
+  return (
+    <Card className="w-full rounded-xl bg-background py-2">
+      <CardHeader className="flex flex-row items-center gap-4">
+        <div className="relative h-12 w-12 shrink-0">
+          <img
+            src={icon}
+            alt={title}
+            width={48}
+            height={48}
+            className="h-full w-full object-contain"
+          />
+        </div>
+        <div className="text-start">
+          <CardTitle className="text-lg">{title}</CardTitle>
+          <CardDescription className="text-muted-foreground">
+            {description}
+          </CardDescription>
+        </div>
+      </CardHeader>
+    </Card>
+  );
+};
+
+interface Integration1Props {
+  className?: string;
+}
+
+const Integration1 = ({ className }: Integration1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
+      {/* Background pattern container */}
+      <div className="absolute inset-0 -z-10 overflow-hidden">
+        <div
+          className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_top,black_30%,transparent_70%)] bg-[length:60px_60px] opacity-[0.03] [-webkit-mask-image:radial-gradient(ellipse_at_top,black_30%,transparent_70%)]"
+          style={{
+            backgroundImage:
+              "url('/block-media/shadcnblocks/block/patterns/pie-factory.svg')",
+          }}
+        />
+      </div>
+
+      <div className="relative container flex max-w-5xl flex-col items-center text-center">
+        <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+          ابزارهای محبوبتان را متصل کنید
+        </h1>
+        <h2 className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
+          با اتصال ابزارهایی که هر روز استفاده می‌کنید، گردش‌کار خود را تقویت
+          کنید. یکپارچه‌سازی‌های بی‌درز ما به شما کمک می‌کنند وظایف را خودکار
+          کنید و همه‌چیز را همگام نگه دارید.
+        </h2>
+      </div>
+
+      {/* Integration Cards */}
+      <div className="mx-auto mt-4 grid max-w-4xl grid-cols-1 gap-6 px-4 sm:grid-cols-2 md:mt-8 lg:mt-12">
+        {DATA.map((feature) => (
+          <FeatureCard
+            icon={feature.icon}
+            title={feature.title}
+            description={feature.description}
+            id={feature.id}
+            key={feature.id}
+          />
+        ))}
+      </div>
+
+      {/* Buttons */}
+      <div className="mt-12 flex flex-row flex-wrap items-center justify-center gap-x-4 gap-y-2">
+        <span className="text-muted-foreground">
+          ابزاری دارید که می‌خواهید به آن متصل شوید؟
+        </span>
+        <Button asChild>
+          <a href="https://ShadcnBlocks">درخواست یکپارچه‌سازی</a>
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export { Integration1 };
diff --git a/blocks/integration10.tsx b/blocks/integration10.tsx
new file mode 100644
index 0000000..242e9ef
--- /dev/null
+++ b/blocks/integration10.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const DATA = [
+  {
+    id: 1,
+    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    title: "حساب ابری Sheets",
+    description:
+      "داده‌های خود را با حساب ابری Sheets همگام کنید و اتوماسیون را بدون دردسر انجام دهید.",
+  },
+  {
+    id: 2,
+    icon: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    title: "Slack",
+    description:
+      "اعلان‌ها و به‌روزرسانی‌ها را مستقیم در کانال‌های پیام‌رسان تیمی دریافت کنید.",
+  },
+  {
+    id: 3,
+    icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+    title: "Sketch",
+    description:
+      "طراحی‌های طراحی برداری را وارد کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
+  },
+  {
+    id: 4,
+    icon: "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+    title: "Gatsby",
+    description: "با یکپارچه‌سازی Gatsby وب‌سایت‌هایی سریع و بهینه بسازید.",
+  },
+  {
+    id: 5,
+    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+    title: "Shopify",
+    description:
+      "داده‌های فروشگاه Shopify را همگام کنید و مدیریت سفارش‌ها را ساده‌تر کنید.",
+  },
+  {
+    id: 6,
+    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    title: "GitHub",
+    description:
+      "گردش‌کارها را خودکار کنید و تغییرات را با یکپارچه‌سازی مخزن کد پیگیری کنید.",
+  },
+  {
+    id: 7,
+    icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    title: "Figma",
+    description:
+      "طراحی‌های طراحی رابط را همگام کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
+  },
+  {
+    id: 8,
+    icon: "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+    title: "Dropbox",
+    description:
+      "فایل‌های Dropbox را همگام کنید و مدیریت فایل‌ها را ساده‌تر کنید.",
+  },
+];
+
+interface Integration10Props {
+  className?: string;
+}
+
+const Integration10 = ({ className }: Integration10Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-12", className)}>
+      <div className="container mx-auto max-w-2xl">
+        <h2 className="mb-2 text-start text-xl font-semibold">
+          یکپارچه‌سازی‌ها
+        </h2>
+        <p className="mb-6 text-start text-muted-foreground">
+          فضای کاری خود را با یکپارچه‌سازی‌ها متصل کنید.
+        </p>
+        <div className="space-y-4">
+          {DATA.map(({ id, icon, title, description }) => (
+            <div
+              key={id}
+              className="flex flex-col items-start justify-between gap-4 rounded-xl border bg-background px-6 py-4 text-start shadow-sm md:flex-row md:items-center"
+            >
+              <div className="flex w-full flex-col items-start gap-4 md:w-auto md:flex-row md:items-center">
+                <img
+                  src={icon}
+                  alt={title}
+                  className="h-10 w-10 shrink-0 object-contain"
+                />
+                <div>
+                  <h3 className="text-lg font-medium">{title}</h3>
+                  <p className="text-sm text-muted-foreground">{description}</p>
+                </div>
+              </div>
+              <div className="shrink-0 md:ms-4">
+                <Button variant="outline">اتصال</Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration10 };
diff --git a/blocks/integration11.tsx b/blocks/integration11.tsx
new file mode 100644
index 0000000..aab6bdc
--- /dev/null
+++ b/blocks/integration11.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface Integration {
+  id: number;
+  icon: string;
+  title: string;
+  description: string;
+  category: string;
+  categoryDescription: string;
+  connected: boolean;
+}
+
+const INTEGRATIONS: Integration[] = [
+  {
+    id: 1,
+    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    title: "Google",
+    description:
+      "ابزارهایی برای جذب سرنخ، بازاریابی ایمیلی و پشتیبانی مشتری ارائه می‌دهد.",
+    category: "ابزارهای فروش و بازاریابی",
+    categoryDescription:
+      "کارایی و اثربخشی فعالیت‌های فروش و بازاریابی شما را افزایش می‌دهد",
+    connected: true,
+  },
+  {
+    id: 2,
+    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    title: "GitHub",
+    description: "مدیریت جامع فروش و روابط مشتری را فراهم می‌کند.",
+    category: "ابزارهای فروش و بازاریابی",
+    categoryDescription:
+      "کارایی و اثربخشی فعالیت‌های فروش و بازاریابی شما را افزایش می‌دهد",
+    connected: false,
+  },
+  {
+    id: 3,
+    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+    title: "Spotify",
+    description:
+      "بر مدیریت خط لوله فروش با ابزار بصری تمرکز دارد.",
+    category: "ابزارهای فروش و بازاریابی",
+    categoryDescription:
+      "کارایی و اثربخشی فعالیت‌های فروش و بازاریابی شما را افزایش می‌دهد",
+    connected: false,
+  },
+  {
+    id: 4,
+    icon: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    title: "Slack",
+    description:
+      "همکاری لحظه‌ای و به‌روزرسانی فعالیت‌های سامانه ارتباط با مشتری و فروش را ممکن می‌سازد.",
+    category: "ارتباطات و همکاری",
+    categoryDescription:
+      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
+    connected: true,
+  },
+  {
+    id: 5,
+    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    title: "Google",
+    description: "ارتباطات و زمان‌بندی در سامانه ارتباط با مشتری و فروش را تقویت می‌کند.",
+    category: "ارتباطات و همکاری",
+    categoryDescription:
+      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
+    connected: true,
+  },
+  {
+    id: 6,
+    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    title: "GitHub",
+    description: "یکپارچه‌سازی سامانه ارتباط با مشتری و فروش در Microsoft Teams را پشتیبانی می‌کند.",
+    category: "ارتباطات و همکاری",
+    categoryDescription:
+      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
+    connected: false,
+  },
+  {
+    id: 7,
+    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+    title: "Spotify",
+    description: "نمای یکپارچه از تعاملات و برنامه‌های مشتری ارائه می‌دهد.",
+    category: "ارتباطات و همکاری",
+    categoryDescription:
+      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
+    connected: false,
+  },
+  {
+    id: 8,
+    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    title: "GitHub",
+    description:
+      "فعالیت‌ها و عملکرد پشتیبانی مشتری را پیگیری و مدیریت می‌کند.",
+    category: "ارتباطات و همکاری",
+    categoryDescription:
+      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
+    connected: false,
+  },
+  {
+    id: 9,
+    icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    title: "Figma",
+    description: "پشتیبانی مشتری و تیکتینگ را در سامانه ارتباط با مشتری و فروش ساده‌تر می‌کند.",
+    category: "ارتباطات و همکاری",
+    categoryDescription:
+      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
+    connected: false,
+  },
+];
+
+const TABS = [
+  { label: "همه اپلیکیشن‌ها", value: "all" },
+  { label: "متصل‌شده", value: "connected" },
+  { label: "غیرمتصل", value: "disconnected" },
+];
+
+type CategoryGroup = {
+  category: string;
+  categoryDescription: string;
+  integrations: Integration[];
+};
+
+function groupByCategory(data: Integration[]): CategoryGroup[] {
+  const map = new Map<string, CategoryGroup>();
+  data.forEach((item) => {
+    if (!map.has(item.category)) {
+      map.set(item.category, {
+        category: item.category,
+        categoryDescription: item.categoryDescription,
+        integrations: [],
+      });
+    }
+    map.get(item.category)!.integrations.push(item);
+  });
+  return Array.from(map.values());
+}
+
+interface Integration11Props {
+  className?: string;
+}
+
+const Integration11 = ({ className }: Integration11Props) => {
+  const [tab, setTab] = useState<string>("all");
+  const [toggles, setToggles] = useState<Record<number, boolean>>(() => {
+    const state: Record<number, boolean> = {};
+    INTEGRATIONS.forEach((i) => {
+      state[i.id] = i.connected;
+    });
+    return state;
+  });
+
+  let filtered: Integration[] = INTEGRATIONS;
+  if (tab === "connected") filtered = INTEGRATIONS.filter((i) => toggles[i.id]);
+  if (tab === "disconnected")
+    filtered = INTEGRATIONS.filter((i) => !toggles[i.id]);
+  const grouped = groupByCategory(filtered);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="mb-6 text-start text-xl font-bold">یکپارچه‌سازی‌ها</h1>
+        <Tabs value={tab} onValueChange={setTab} dir="rtl">
+          <TabsList className="mb-8">
+            {TABS.map((t) => (
+              <TabsTrigger
+                key={t.value}
+                value={t.value}
+                className="px-4 py-2 text-sm font-medium"
+              >
+                {t.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {TABS.map((t) => (
+            <TabsContent key={t.value} value={t.value}>
+              {grouped.map((group) => (
+                <div key={group.category} className="mb-10 text-start">
+                  <h2 className="mb-1 text-lg font-semibold">
+                    {group.category}
+                  </h2>
+                  <p className="mb-4 text-sm text-muted-foreground">
+                    {group.categoryDescription}
+                  </p>
+                  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                    {group.integrations.map((integration) => (
+                      <div
+                        key={integration.id}
+                        className="flex min-h-[170px] flex-col justify-between rounded-xl border bg-background p-6 text-start shadow-sm transition hover:shadow-md"
+                      >
+                        <div className="mb-4 flex items-center gap-4">
+                          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-md bg-muted p-2">
+                            <img
+                              src={integration.icon}
+                              alt={integration.title}
+                              width={32}
+                              height={32}
+                              className="h-8 w-8 object-contain"
+                            />
+                          </div>
+                          <div>
+                            <div className="text-base leading-tight font-medium">
+                              {integration.title}
+                            </div>
+                            <div className="text-xs leading-snug text-muted-foreground">
+                              {integration.description}
+                            </div>
+                          </div>
+                        </div>
+                        <div className="mt-auto flex items-center justify-between gap-2">
+                          <Button size="sm" variant="outline">
+                            جزئیات
+                          </Button>
+                          <Switch
+                            checked={toggles[integration.id]}
+                            onCheckedChange={(checked: boolean) =>
+                              setToggles((prev) => ({
+                                ...prev,
+                                [integration.id]: checked,
+                              }))
+                            }
+                          />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Integration11 };
diff --git a/blocks/integration12.tsx b/blocks/integration12.tsx
new file mode 100644
index 0000000..050dc02
--- /dev/null
+++ b/blocks/integration12.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { ArrowLeftRight, Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const permissions = [
+  "مشاهده تحلیل‌ها و معیارهای عملکرد",
+  "ایجاد و مدیریت نقاط عطف پروژه",
+  "تخصیص و به‌روزرسانی مسئولیت‌های تیم",
+  "دریافت و پاسخ به بازخورد مشتری",
+  "مدیریت ترجیحات اعلان و هشدارها",
+];
+
+interface Integration12Props {
+  className?: string;
+}
+
+const Integration12 = ({ className }: Integration12Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "flex min-h-screen items-center justify-center bg-muted py-32",
+        className,
+      )}
+    >
+      <div className="container">
+        <div className="mx-auto flex w-full max-w-md flex-col items-center gap-6 p-0">
+          <div className="flex w-full flex-col items-center gap-2 border-b pb-4">
+            <div className="mt-2 mb-2 flex items-center justify-center gap-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg border bg-background p-3 shadow">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg"
+                  alt="shadcn/ui"
+                  className="h-full w-full object-contain"
+                />
+              </div>
+              <ArrowLeftRight className="size-4 shrink-0" aria-hidden />
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg border bg-background p-3 shadow">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                  alt="ShadcnBlocks"
+                  className="h-full w-full object-contain"
+                />
+              </div>
+            </div>
+            <h1 className="text-center text-xl font-semibold">
+              اتصال ری یو آی به ری یو آی
+            </h1>
+            <p className="mt-1 text-center text-base text-muted-foreground">
+              تیم خود را با پیگیری یکپارچه پروژه و همکاری لحظه‌ای بین پلتفرم‌ها
+              توانمند کنید.
+            </p>
+          </div>
+          <div className="w-full py-6">
+            <ul className="space-y-3 text-start">
+              {permissions.map((perm, i) => (
+                <li
+                  key={i}
+                  className="flex items-center gap-3 text-sm text-foreground"
+                >
+                  <Check className="size-4 shrink-0 text-primary" />
+                  {perm}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="flex w-full items-center justify-start gap-2 pb-2">
+            <Button type="button">اتصال هم‌اکنون</Button>
+            <Button variant="outline" type="button">
+              لغو
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration12 };
diff --git a/blocks/integration13.tsx b/blocks/integration13.tsx
new file mode 100644
index 0000000..05cb5b4
--- /dev/null
+++ b/blocks/integration13.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import type { MotionValue } from "framer-motion";
+import { motion } from "framer-motion";
+import { useMotionValue, useSpring, useTransform } from "framer-motion";
+import React, { useRef } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const Integration13 = () => {
+  const integrations = [
+    {
+      title: "Framer",
+      src: "/block-media/shadcnblocks/block/guri3/integration1.png",
+      href: "#framer",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration1.png"
+          alt="Framer"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+    {
+      title: "MongoDB",
+      src: "/block-media/shadcnblocks/block/guri3/integration2.png",
+      href: "#mongodb",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration2.png"
+          alt="MongoDB"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+    {
+      title: "VSCode",
+      src: "/block-media/shadcnblocks/block/guri3/integration3.png",
+      href: "#vscode",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration3.png"
+          alt="VSCode"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+    {
+      title: "Notion",
+      src: "/block-media/shadcnblocks/block/guri3/integration4.png",
+      href: "#notion",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration4.png"
+          alt="Notion"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+    {
+      title: "Figma",
+      src: "/block-media/shadcnblocks/block/guri3/integration5.png",
+      href: "#figma",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration5.png"
+          alt="Figma"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+    {
+      title: "Discord",
+      src: "/block-media/shadcnblocks/block/guri3/integration6.png",
+      href: "#discord",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration6.png"
+          alt="Discord"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+    {
+      title: "GitHub",
+      src: "/block-media/shadcnblocks/block/guri3/integration7.png",
+      href: "#github",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration7.png"
+          alt="GitHub"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+    {
+      title: "Chrome",
+      src: "/block-media/shadcnblocks/block/guri3/integration8.png",
+      href: "#chrome",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration8.png"
+          alt="Chrome"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+    {
+      title: "Postman",
+      src: "/block-media/shadcnblocks/block/guri3/integration9.png",
+      href: "#postman",
+      icon: (
+        <img
+          src="/block-media/shadcnblocks/block/guri3/integration9.png"
+          alt="Postman"
+          className="h-8 w-8 object-cover"
+        />
+      ),
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className="overflow-hidden py-32">
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">
+          یکپارچه‌سازی‌ها
+        </p>
+        <h2 className="relative py-2 text-center font-sans text-2xll font-semibold tracking-tighter lg:text-2xll">
+          یکپارچه با اپلیکیشن‌های محبوب
+        </h2>
+        <p className="text-md mx-auto mt-5 max-w-xl px-5 text-center text-muted-foreground lg:text-lg">
+          ابزارهای محبوبتان را به پلتفرم متصل کنید و گردش‌کار خود را ساده‌تر و
+          یکپارچه‌تر کنید.
+        </p>
+
+        <div className="relative container my-20 w-fit rounded-4xl bg-muted">
+          <DockIntegrations
+            integrations={integrations}
+            className="hidden md:flex"
+          />
+          <div className="flex flex-wrap items-center justify-center gap-4 py-4 md:hidden">
+            {integrations.map((integration) => (
+              <a
+                key={integration.title}
+                href={integration.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center transition-transform hover:scale-105"
+              >
+                <img
+                  src={integration.src}
+                  alt={integration.title}
+                  className="h-16 w-16 rounded-xl object-cover"
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+        <Button className="h-10 rounded-xl">دسترسی کامل</Button>
+      </div>
+    </section>
+  );
+};
+
+const DockIntegrations = ({
+  integrations,
+  className,
+}: {
+  integrations: {
+    title: string;
+    src: string;
+    href: string;
+    icon: React.ReactNode;
+  }[];
+  className?: string;
+}) => {
+  const mouseX = useMotionValue(Infinity);
+  return (
+    <div
+      className={cn("flex items-end gap-2 px-6 py-6", className)}
+      onMouseMove={(e) => mouseX.set(e.pageX)}
+      onMouseLeave={() => mouseX.set(Infinity)}
+    >
+      {integrations.map((integration) => (
+        <DockIcon
+          key={integration.title}
+          integration={integration}
+          mouseX={mouseX}
+        />
+      ))}
+    </div>
+  );
+};
+
+const DockIcon = ({
+  integration,
+  mouseX,
+}: {
+  integration: { title: string; src: string; href: string };
+  mouseX: MotionValue<number>;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const distance = useTransform(mouseX, (val: number) => {
+    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return val - bounds.x - bounds.width / 2;
+  });
+  const width = useSpring(
+    useTransform(distance, [-100, 0, 100], [64, 85, 64]),
+    {
+      mass: 0.1,
+      stiffness: 150,
+      damping: 12,
+    },
+  );
+  const height = useSpring(
+    useTransform(distance, [-100, 0, 100], [64, 94, 64]),
+    {
+      mass: 0.1,
+      stiffness: 150,
+      damping: 12,
+    },
+  );
+
+  const y = useSpring(useTransform(distance, [-150, 0, 150], [0, -12, 0]), {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  return (
+    <div
+      ref={ref}
+      className="relative flex h-16 w-16 flex-col items-center justify-end"
+    >
+      <motion.div
+        style={{ width, height, y, transformOrigin: "bottom center" }}
+        className="absolute bottom-0 flex items-center justify-center rounded-xl"
+      >
+        <a
+          href={integration.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="h-full w-full"
+        >
+          <img
+            src={integration.src}
+            alt={integration.title}
+            className="h-full w-full rounded-xl object-cover"
+          />
+        </a>
+      </motion.div>
+    </div>
+  );
+};
+
+export { Integration13 };
diff --git a/blocks/integration2.tsx b/blocks/integration2.tsx
new file mode 100644
index 0000000..4db34f5
--- /dev/null
+++ b/blocks/integration2.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  key: number;
+  src: string;
+  alt: string;
+  href: string;
+  width: number;
+  height: number;
+}
+
+const DATA: DataItem[] = [
+  {
+    key: 1,
+    src: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+    alt: "Astro",
+    href: "https://astro.build",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 2,
+    src: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    alt: "GitHub",
+    href: "https://github.com",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 3,
+    src: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    alt: "Google",
+    href: "https://google.com",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 4,
+    src: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+    alt: "Notion",
+    href: "https://notion.so",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 5,
+    src: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    alt: "Slack",
+    href: "https://slack.com",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 6,
+    src: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+    alt: "استایل‌دهی مدرن",
+    href: "https://tailwindcss.com",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 8,
+    src: "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
+    alt: "ویرایشگر کد",
+    href: "https://code.visualstudio.com",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 12,
+    src: "/block-media/shadcnblocks/block/logos/react-icon.svg",
+    alt: "React",
+    href: "https://reactjs.org",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 13,
+    src: "/block-media/shadcnblocks/block/logos/vue-icon.svg",
+    alt: "Vue.js",
+    href: "https://vuejs.org",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 15,
+    src: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+    alt: "Spotify",
+    href: "https://spotify.com",
+    width: 64,
+    height: 64,
+  },
+  {
+    key: 16,
+    src: "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+    alt: "Dropbox",
+    href: "https://dropbox.com",
+    width: 64,
+    height: 64,
+  },
+];
+
+interface Integration2Props {
+  className?: string;
+}
+
+const Integration2 = ({ className }: Integration2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        {/* Heading Section */}
+        <div className="flex flex-col items-center justify-center gap-4 text-center">
+          <h4 className="text-3xl font-medium lg:text-xl">
+            پشتوانه بهترین تیم‌های محصول جهان
+          </h4>
+          <p className="text-xl text-muted-foreground lg:-mt-1">
+            از استارتاپ‌های نوآور تا سازمان‌های تثبیت‌شده
+          </p>
+        </div>
+
+        {/* Marquee Section */}
+        <div className="relative my-20 overflow-hidden">
+          <div className="flex w-full">
+            {/* First marquee group */}
+            <div className="flex shrink-0 animate-marquee items-center gap-4">
+              {DATA.map((logo) => (
+                <a
+                  href={logo.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  key={logo.key}
+                  className="p-4"
+                >
+                  <img
+                    src={logo.src}
+                    alt={logo.alt}
+                    width={logo.width}
+                    height={logo.height}
+                    className="object-contain transition-opacity hover:opacity-70"
+                  />
+                </a>
+              ))}
+            </div>
+            {/* Second marquee group */}
+            <div className="flex shrink-0 animate-marquee items-center gap-4">
+              {DATA.map((logo) => (
+                <a
+                  href={logo.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  key={logo.key}
+                  className="p-4"
+                >
+                  <img
+                    src={logo.src}
+                    alt={logo.alt}
+                    width={logo.width}
+                    height={logo.height}
+                    className="object-contain transition-opacity hover:opacity-70"
+                  />
+                </a>
+              ))}
+            </div>
+          </div>
+          {/* Gradient overlays */}
+          <div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-24 bg-linear-to-r from-background to-transparent" />
+          <div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-24 bg-linear-to-l from-background to-transparent" />
+        </div>
+
+        {/* Explore Button */}
+        <div className="mt-8 flex justify-center">
+          <Button className="gap-2 rounded-full">
+            مشاهده همه ابزارها
+            <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration2 };
diff --git a/blocks/integration3.tsx b/blocks/integration3.tsx
new file mode 100644
index 0000000..f3ed7f0
--- /dev/null
+++ b/blocks/integration3.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const DATA = [
+  {
+    id: 1,
+    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    title: "حساب ابری Sheets",
+    description:
+      "داده‌های خود را با حساب ابری Sheets همگام کنید و اتوماسیون را بدون دردسر انجام دهید.",
+  },
+  {
+    id: 2,
+    icon: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    title: "Slack",
+    description:
+      "اعلان‌ها و به‌روزرسانی‌ها را مستقیم در کانال‌های پیام‌رسان تیمی دریافت کنید.",
+  },
+  {
+    id: 3,
+    icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+    title: "Sketch",
+    description:
+      "طراحی‌های طراحی برداری را وارد کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
+  },
+  {
+    id: 4,
+    icon: "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+    title: "Gatsby",
+    description: "با یکپارچه‌سازی Gatsby وب‌سایت‌هایی سریع و بهینه بسازید.",
+  },
+  {
+    id: 5,
+    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+    title: "Shopify",
+    description:
+      "داده‌های فروشگاه Shopify را همگام کنید و مدیریت سفارش‌ها را ساده‌تر کنید.",
+  },
+  {
+    id: 6,
+    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    title: "GitHub",
+    description:
+      "گردش‌کارها را خودکار کنید و تغییرات را با یکپارچه‌سازی مخزن کد پیگیری کنید.",
+  },
+];
+
+interface Integration3Props {
+  className?: string;
+}
+
+const Integration3 = ({ className }: Integration3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex flex-col items-center text-center">
+          <div className="flex max-w-5xl flex-col items-center text-center">
+            <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
+              یکپارچه‌سازی‌ها
+            </h1>
+            <h2 className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
+              ابزارهای محبوبتان را به گردش‌کار خود متصل کنید.
+            </h2>
+          </div>
+
+          <div className="flex flex-col justify-center gap-4">
+            {DATA.map(({ id, icon, title, description }) => (
+              <div key={id} className="flex items-center gap-4 py-4">
+                <div className="h-12 w-12 shrink-0">
+                  <img
+                    src={icon}
+                    alt={title}
+                    width={48}
+                    height={48}
+                    className="h-full w-full object-contain"
+                  />
+                </div>
+                <div className="text-start">
+                  <div className="text-lg font-semibold">{title}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {description}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration3 };
diff --git a/blocks/integration4.tsx b/blocks/integration4.tsx
new file mode 100644
index 0000000..c477932
--- /dev/null
+++ b/blocks/integration4.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { Cable } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Integration4Props {
+  className?: string;
+}
+
+const Integration4 = ({ className }: Integration4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="relative z-10 container flex flex-col items-center gap-5">
+        <div className="relative my-4 flex flex-row gap-14 md:gap-20 lg:gap-28">
+          {/* Connection Lines SVG */}
+          <svg
+            className="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2"
+            viewBox="0 0 200 50"
+            preserveAspectRatio="xMidYMid meet"
+            aria-hidden
+          >
+            {/* Grid pattern in background */}
+            <pattern
+              id="grid"
+              width="20"
+              height="20"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                d="M 20 0 L 0 0 0 20"
+                fill="none"
+                stroke="rgba(0,0,0,0.1)"
+                strokeWidth="0.5"
+              />
+            </pattern>
+            <rect width="200" height="50" fill="url(#grid)" opacity="0.7" />
+
+            {/* Single connecting line */}
+            <path
+              d="M 40 25 L 160 25"
+              stroke="black"
+              strokeWidth="1"
+              strokeOpacity="0.2"
+              fill="none"
+            />
+
+            {/* Connection dots */}
+            <circle cx="40" cy="25" r="3" fill="black" fillOpacity="0.3" />
+            <circle cx="80" cy="25" r="2" fill="black" fillOpacity="0.3" />
+            <circle cx="120" cy="25" r="2" fill="black" fillOpacity="0.3" />
+            <circle cx="160" cy="25" r="3" fill="black" fillOpacity="0.3" />
+
+            <defs>
+              <linearGradient id="lineGradient" x1="0" y1="0" x2="200" y2="0">
+                <stop offset="0%" stopColor="black" stopOpacity="0.3" />
+                <stop offset="50%" stopColor="black" stopOpacity="0.6" />
+                <stop offset="100%" stopColor="black" stopOpacity="0.3" />
+              </linearGradient>
+            </defs>
+          </svg>
+
+          <div className="relative mb-3 flex h-16 w-16 rounded-xl border bg-background shadow-md md:h-20 md:w-20">
+            <Cable
+              strokeWidth={1.5}
+              className="m-auto h-6 w-6 md:h-10 md:w-10"
+              aria-hidden
+            />
+          </div>
+
+          <div className="relative mb-3 flex h-16 w-16 rounded-xl border bg-background p-4 shadow-md md:h-20 md:w-20">
+            <img
+              src="/block-media/shadcnblocks/block/logos/slack-icon.svg"
+              alt="Slack"
+              className="h-full w-full object-contain"
+            />
+          </div>
+        </div>
+
+        <div className="text-center">
+          <h1 className="mb-4 max-w-2xl text-3xl font-medium text-foreground md:text-xl lg:text-2xll">
+            اتصال جهانی یکپارچه
+          </h1>
+
+          <p className="max-w-2xl text-sm text-muted-foreground md:text-base lg:text-lg">
+            پلتفرم ما تضمین می‌کند داده‌های شما در هر نقطه جهان همگام بمانند.
+            چه به‌صورت محلی کار کنید چه بین‌المللی، اطلاعاتتان به‌صورت لحظه‌ای
+            به‌روزرسانی می‌شود تا دقیق‌ترین و به‌روزترین بینش‌ها را داشته
+            باشید.
+          </p>
+        </div>
+
+        <div className="relative mt-8 aspect-3/1 w-[90%] md:mt-10 md:w-[80%]">
+          <img
+            className="h-full w-full rounded-xl object-cover"
+            src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
+            alt="اتصال جهانی"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration4 };
diff --git a/blocks/integration5.tsx b/blocks/integration5.tsx
new file mode 100644
index 0000000..5895e1e
--- /dev/null
+++ b/blocks/integration5.tsx
@@ -0,0 +1,82 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const images = [
+  "/block-media/shadcnblocks/block/logos/integration/integration-1.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-2.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-3.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-4.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-5.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-6.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-7.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-8.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-9.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-10.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-11.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-12.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-13.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-14.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-15.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-16.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-17.svg",
+  "/block-media/shadcnblocks/block/logos/integration/integration-18.svg",
+];
+
+interface Integration5Props {
+  className?: string;
+}
+
+const Integration5 = ({ className }: Integration5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-between gap-14 md:flex-row lg:gap-20">
+          <div className="basis-1/2 text-start">
+            <p className="font-mono text-sm text-muted-foreground">
+              یکپارچه‌سازی‌ها
+            </p>
+            <h1 className="mt-4 mb-10 text-3xl font-bold text-pretty md:text-xl">
+              یکپارچه‌سازی‌ها را برای پروژه بعدی‌تان کاوش کنید
+            </h1>
+            <p className="text-xl text-muted-foreground">
+              با یکپارچه‌سازی‌های آماده برای پروژه بعدی زمان بیشتری ذخیره
+              کنید و سریع‌تر شروع کنید.
+            </p>
+            <div className="mt-5 flex flex-wrap items-center gap-2">
+              <Button>شروع کنید</Button>
+              <Button variant="outline" className="gap-2">
+                بیشتر بدانید
+                <ArrowRight className="size-4 rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+          <div className="flex basis-1/2 flex-wrap justify-center gap-2 md:max-w-xl md:justify-start">
+            {images.map((image, index) => (
+              <div key={index} className="relative size-20">
+                <svg
+                  viewBox="0 0 80 80"
+                  className="text-muted-foreground/40"
+                  aria-hidden
+                >
+                  <path
+                    fill="currentColor"
+                    d="M75.43,79.22H4.57c-2.09,0-3.79-1.7-3.79-3.79V12.9c0-1,.4-1.98,1.11-2.68L10.22,1.89c.71-.71,1.68-1.11,2.68-1.11h62.54c2.09,0,3.79,1.7,3.79,3.79v70.87c0,2.09-1.7,3.79-3.79,3.79ZM12.9,1.78c-.73,0-1.45.3-1.97.82L2.59,10.92c-.52.52-.82,1.24-.82,1.97v62.54c0,1.54,1.25,2.79,2.79,2.79h70.87c1.54,0,2.79-1.25,2.79-2.79V4.57c0-1.54-1.25-2.79-2.79-2.79H12.9Z"
+                  />
+                </svg>
+                <img
+                  src={image}
+                  alt={`لوگوی یکپارچه‌سازی ${index + 1}`}
+                  className="absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration5 };
diff --git a/blocks/integration6.tsx b/blocks/integration6.tsx
new file mode 100644
index 0000000..02755f4
--- /dev/null
+++ b/blocks/integration6.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import Autoplay from "embla-carousel-autoplay";
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const BUTTON_LOGOS = [
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-1.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-3.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-4.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-5.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-6.svg",
+  },
+];
+
+const LOGOS = [
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-1.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-2.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-3.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-4.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-5.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-6.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-7.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-8.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-9.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-10.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-11.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-13.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-14.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-15.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-16.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-17.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-18.svg",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/integration/integration-8.svg",
+  },
+];
+
+interface Integration6Props {
+  className?: string;
+}
+
+const Integration6 = ({ className }: Integration6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="dark flex flex-col gap-10 overflow-hidden rounded-xl bg-background py-4 md:py-10">
+          <div className="flex w-full flex-col justify-between gap-5 px-10 py-5 lg:flex-row lg:items-end">
+            <div className="flex-1">
+              <div className="flex w-full max-w-[32rem] flex-col gap-5 text-start">
+                <h2 className="text-[2rem] leading-none font-bold tracking-tight text-foreground md:text-[2.75rem] lg:text-2xll">
+                  رابط‌های زیبا را سریع بسازید
+                </h2>
+                <p className="leading-[1.4] text-muted-foreground">
+                  از امروز با بلاک‌های رابط کاربری قابل‌استفاده مجدد طراحی را
+                  هوشمندانه‌تر کنید؛ در زمان صرفه‌جویی کنید، یکپارچگی را افزایش
+                  دهید و تجربه کاربری بهتری بسازید.
+                </p>
+              </div>
+            </div>
+            <div className="lg:self-end">
+              <Button
+                asChild
+                className="h-fit w-full justify-between gap-4 rounded-full p-2.5 pe-5 shadow-[0_0_0_4px_#363636] transition-shadow hover:shadow-[0_0_0_4px_#4b4b4b] sm:w-fit sm:gap-28"
+                variant="secondary"
+              >
+                <a href="#">
+                  <div className="flex items-center gap-2.5">
+                    <Carousel
+                      dir="rtl"
+                      opts={{ direction: "rtl" }}
+                      plugins={[
+                        Autoplay({
+                          delay: 2000,
+                        }),
+                      ]}
+                      className="size-8 shrink-0 overflow-hidden rounded-full border border-white/20 bg-black/50"
+                    >
+                      <CarouselContent className="ms-0 size-7.5">
+                        {BUTTON_LOGOS.map((logo, index) => (
+                          <CarouselItem
+                            key={index}
+                            className="flex size-7.5 overflow-hidden rounded-full p-0"
+                          >
+                            <img
+                              src={logo.src}
+                              alt={`لوگوی یکپارچه‌سازی ${index + 1}`}
+                              className="m-auto block size-4.5 object-contain object-center"
+                            />
+                          </CarouselItem>
+                        ))}
+                      </CarouselContent>
+                    </Carousel>
+                    <div>مشاهده همه کامپوننت‌ها</div>
+                  </div>
+                  <ArrowRight className="rtl:rotate-180" />
+                </a>
+              </Button>
+            </div>
+          </div>
+          <Separator />
+          <Carousel
+            dir="rtl"
+            opts={{
+              loop: true,
+              watchDrag: false,
+              container: "nav",
+              direction: "rtl",
+            }}
+            plugins={[
+              AutoScroll({
+                speed: 0.5,
+              }),
+            ]}
+            className="w-full"
+          >
+            <CarouselContent>
+              {LOGOS.map((logo, index) => (
+                <CarouselItem key={index} className="h-8 basis-20 ps-12">
+                  <img
+                    src={logo.src}
+                    alt={`لوگوی یکپارچه‌سازی ${index + 1}`}
+                    className="block size-full object-contain object-center"
+                  />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <Separator />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration6 };
diff --git a/blocks/integration7.tsx b/blocks/integration7.tsx
new file mode 100644
index 0000000..483c8c6
--- /dev/null
+++ b/blocks/integration7.tsx
@@ -0,0 +1,137 @@
+import { cn } from "@/lib/utils";
+
+type ItemType = { src: string; text: string; className?: string };
+
+const list1: ItemType[] = [
+  {
+    src: "/block-media/shadcnblocks/block/logos/brave-icon.svg",
+    text: "Brave",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+    text: "Facebook",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    text: "Figma",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+    text: "Gatsby",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+    text: "Astro",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/linkedin-icon.svg",
+    text: "LinkedIn",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+    text: "Notion",
+  },
+  {
+    src: "",
+    text: "",
+    className: "bg-linear-to-br from-yellow-500 to-yellow-300",
+  },
+];
+
+const list2: ItemType[] = [
+  {
+    src: "",
+    text: "",
+    className: "bg-linear-to-br from-green-500 to-green-300",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+    text: "Spotify",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    text: "Google",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+    text: "Sketch",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/producthunt-icon.svg",
+    text: "معرفی محصول",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    text: "Slack",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/x.svg",
+    text: "X / شبکه اجتماعی",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/logos/netflix-icon.svg",
+    text: "Netflix",
+  },
+];
+
+const List = ({ list }: { list: ItemType[] }) => {
+  return (
+    <div className="flex gap-3">
+      {list.map((item, i) =>
+        item.src ? (
+          <div
+            className="inline-flex h-10 shrink-0 items-center gap-2 rounded-full bg-muted p-1"
+            key={`list-item-${i}`}
+          >
+            <div className="flex size-8 overflow-hidden rounded-full bg-background p-2">
+              <img
+                src={item.src}
+                alt={item.text}
+                className="m-auto block size-full object-contain object-center"
+              />
+            </div>
+            <p className="pe-2 text-sm font-medium">{item.text}</p>
+          </div>
+        ) : (
+          <div
+            className={`h-10 w-[6.25rem] shrink-0 rounded-full ${item?.className}`}
+            key={`list-item-${i}`}
+            aria-hidden
+          />
+        ),
+      )}
+    </div>
+  );
+};
+
+interface Integration7Props {
+  className?: string;
+}
+
+const Integration7 = ({ className }: Integration7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid w-full grid-cols-1 items-start justify-between overflow-hidden rounded-3xl border border-muted bg-background pe-0 md:grid-cols-[minmax(18.75rem,25rem)_1fr] md:p-8">
+          <div className="order-2 flex flex-col gap-2 p-6 pt-10 text-start md:order-1 md:p-0">
+            <h3 className="text-lg leading-relaxed font-medium tracking-tight">
+              با ابزارهای شما به‌صورت یکپارچه متصل می‌شود!
+            </h3>
+            <p className="text-sm leading-relaxed tracking-tight text-muted-foreground">
+              منابع داده متنوع را متصل کنید تا هوش و عملکرد دستیار شما تقویت
+              شود.
+            </p>
+          </div>
+          <div className="relative order-1 p-4 pb-0 md:order-2 md:p-0">
+            <List list={list1} />
+            <div className="ms-8 pt-3">
+              <List list={list2} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration7 };
diff --git a/blocks/integration8.tsx b/blocks/integration8.tsx
new file mode 100644
index 0000000..724ca6e
--- /dev/null
+++ b/blocks/integration8.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import React from "react";
+
+import { Marquee } from "@/components/magicui/marquee";
+import { cn } from "@/lib/utils";
+
+interface Integration8Props {
+  className?: string;
+}
+
+const logos = [
+  {
+    image: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    name: "Slack",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+    name: "Notion",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    name: "GitHub",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    name: "Google",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/nike-icon.svg",
+    name: "Nike",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+    name: "Sketch",
+  },
+  {
+    image: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    name: "Figma",
+  },
+];
+
+const Integration8 = ({ className }: Integration8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container pt-32">
+        <h1 className="text-center text-2xll font-medium tracking-tight md:text-2xll">
+          یکپارچه با اپلیکیشن‌های محبوب
+        </h1>
+        <p className="mx-auto mt-4 max-w-xl text-center tracking-tight text-muted-foreground/80 md:text-lg">
+          ابزارهای محبوبتان را به پلتفرم متصل کنید و گردش‌کار خود را ساده‌تر و
+          یکپارچه‌تر کنید.
+        </p>
+
+        <div className="relative mt-12">
+          <Marquee pauseOnHover className="[--duration:20s]">
+            {logos.map((logo, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-center gap-4 rounded-full bg-muted px-5 py-2"
+              >
+                <img
+                  src={logo.image}
+                  alt={logo.name}
+                  className="size-5"
+                />
+                <p className="text-lg">{logo.name}</p>
+              </div>
+            ))}
+          </Marquee>
+          <Marquee pauseOnHover reverse className="[--duration:20s]">
+            {logos.map((logo, index) => (
+              <div
+                key={`reverse-${index}`}
+                className="flex items-center justify-center gap-4 rounded-full bg-muted px-5 py-2"
+              >
+                <img
+                  src={logo.image}
+                  alt={logo.name}
+                  className="size-5"
+                />
+                <p className="text-lg">{logo.name}</p>
+              </div>
+            ))}
+          </Marquee>
+          <Marquee pauseOnHover className="[--duration:20s]">
+            {[...logos].reverse().map((logo, index) => (
+              <div
+                key={`rev-list-${index}`}
+                className="flex items-center justify-center gap-4 rounded-full bg-muted px-5 py-2"
+              >
+                <img
+                  src={logo.image}
+                  alt={logo.name}
+                  className="size-5"
+                />
+                <p className="text-lg">{logo.name}</p>
+              </div>
+            ))}
+          </Marquee>
+          <Marquee pauseOnHover reverse className="[--duration:20s]">
+            {[...logos].reverse().map((logo, index) => (
+              <div
+                key={`rev-list-reverse-${index}`}
+                className="flex items-center justify-center gap-4 rounded-full bg-muted px-5 py-2"
+              >
+                <img
+                  src={logo.image}
+                  alt={logo.name}
+                  className="size-5"
+                />
+                <p className="text-lg">{logo.name}</p>
+              </div>
+            ))}
+          </Marquee>
+          <div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-36 bg-gradient-to-r from-background" />
+          <div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-36 bg-gradient-to-l from-background" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration8 };
diff --git a/blocks/integration9.tsx b/blocks/integration9.tsx
new file mode 100644
index 0000000..42a8f99
--- /dev/null
+++ b/blocks/integration9.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const DATA = [
+  {
+    id: 1,
+    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
+    title: "حساب ابری Sheets",
+    description:
+      "داده‌های خود را با حساب ابری Sheets همگام کنید و اتوماسیون را بدون دردسر انجام دهید.",
+  },
+  {
+    id: 2,
+    icon: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+    title: "Slack",
+    description:
+      "اعلان‌ها و به‌روزرسانی‌ها را مستقیم در کانال‌های پیام‌رسان تیمی دریافت کنید.",
+  },
+  {
+    id: 3,
+    icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+    title: "Sketch",
+    description:
+      "طراحی‌های طراحی برداری را وارد کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
+  },
+  {
+    id: 4,
+    icon: "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
+    title: "Gatsby",
+    description: "با یکپارچه‌سازی Gatsby وب‌سایت‌هایی سریع و بهینه بسازید.",
+  },
+  {
+    id: 5,
+    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
+    title: "Shopify",
+    description:
+      "داده‌های فروشگاه Shopify را همگام کنید و مدیریت سفارش‌ها را ساده‌تر کنید.",
+  },
+  {
+    id: 6,
+    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+    title: "GitHub",
+    description:
+      "گردش‌کارها را خودکار کنید و تغییرات را با یکپارچه‌سازی مخزن کد پیگیری کنید.",
+  },
+  {
+    id: 7,
+    icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+    title: "Figma",
+    description:
+      "طراحی‌های طراحی رابط را همگام کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
+  },
+  {
+    id: 8,
+    icon: "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+    title: "Dropbox",
+    description:
+      "فایل‌های Dropbox را همگام کنید و مدیریت فایل‌ها را ساده‌تر کنید.",
+  },
+];
+
+interface Integration9Props {
+  title?: string;
+  data?: typeof DATA;
+  gridCols?: string;
+  className?: string;
+}
+
+const Integration9 = ({
+  title = "یکپارچه‌سازی‌های موجود",
+  data = DATA,
+  className,
+}: Integration9Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="container">
+        <h1 className="mb-8 text-start text-3xl font-semibold">{title}</h1>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {data.map(({ id, icon, title: itemTitle, description }) => (
+            <div
+              key={id}
+              className="flex min-h-[140px] flex-col items-start rounded-xl border bg-background p-6 text-start shadow-sm transition hover:shadow-md"
+            >
+              <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-md bg-muted">
+                <img
+                  src={icon}
+                  alt={itemTitle}
+                  width={32}
+                  height={32}
+                  className="h-8 w-8 object-contain"
+                />
+              </div>
+              <div className="mb-1 text-base font-medium">{itemTitle}</div>
+              <div className="text-xs leading-snug text-muted-foreground">
+                {description}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Integration9 };
diff --git a/blocks/invite-user1.tsx b/blocks/invite-user1.tsx
new file mode 100644
index 0000000..eb2dd92
--- /dev/null
+++ b/blocks/invite-user1.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { CornerDownLeft, UserRoundPlus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface InviteUser1Props {
+  heading?: string;
+  className?: string;
+}
+
+const InviteUser1 = ({
+  heading = "دعوت کاربران",
+  className,
+}: InviteUser1Props) => {
+  const users = [
+    {
+      id: 1,
+      name: "سارا رضایی",
+      email: "sarah.j@company.com",
+      role: "مدیر",
+      status: "فعال",
+    },
+    {
+      id: 2,
+      name: "مایکل چن",
+      email: "m.chen@company.com",
+      role: "همکار",
+      status: "دعوت‌شده",
+    },
+  ];
+
+  return (
+    <section className="py-32">
+      <div className="container flex flex-col gap-6">
+        <div className="text-start">
+          <h2 className="text-xl font-semibold tracking-tight">اعضای تیم</h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            مدیریت و دعوت کاربران به تیم
+          </p>
+        </div>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>نام</TableHead>
+              <TableHead>ایمیل</TableHead>
+              <TableHead>نقش</TableHead>
+              <TableHead>وضعیت</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {users.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell className="font-medium">{user.name}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell>{user.role}</TableCell>
+                <TableCell>{user.status}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button className="w-fit">دعوت کاربران</Button>
+          </DialogTrigger>
+          <DialogContent className={cn("gap-0 overflow-hidden p-0", className)}>
+            <DialogTitle className="flex items-center gap-2 border-b p-4 text-sm font-medium">
+              <UserRoundPlus className="size-4" />
+              {heading}
+            </DialogTitle>
+            <form
+              autoComplete="off"
+              onSubmit={(e) => e.preventDefault()}
+              className="flex flex-col gap-4 bg-muted pt-4"
+            >
+              <div className="flex flex-col gap-4 px-4">
+                <div className="space-y-1">
+                  <Label className="text-xs">آدرس ایمیل</Label>
+                  <Textarea
+                    dir="rtl"
+                    style={{
+                      resize: "none",
+                      minHeight: "100px",
+                    }}
+                    placeholder="آدرس‌های ایمیل را وارد کنید..."
+                    className="text-end"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">تعیین نقش</Label>
+                  <Select defaultValue="collaborator">
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="انتخاب نقش" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="collaborator">همکار</SelectItem>
+                      <SelectItem value="administrator">مدیر</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <DialogFooter className="border-t bg-background px-4 py-3">
+                <Button size="sm" type="submit">
+                  ارسال دعوت‌نامه
+                  <CornerDownLeft className="rtl:rotate-180" />
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </section>
+  );
+};
+
+export { InviteUser1 };
diff --git a/blocks/invite-user2.tsx b/blocks/invite-user2.tsx
new file mode 100644
index 0000000..6e0000a
--- /dev/null
+++ b/blocks/invite-user2.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { CornerDownLeft, UserRoundPlus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface InviteUser2Props {
+  heading?: string;
+  className?: string;
+}
+
+const InviteUser2 = ({
+  heading = "دعوت کاربران",
+  className,
+}: InviteUser2Props) => {
+  const users = [
+    {
+      id: 1,
+      name: "سارا رضایی",
+      email: "sarah.j@company.com",
+      role: "مدیر",
+      status: "فعال",
+    },
+    {
+      id: 2,
+      name: "مایکل چن",
+      email: "m.chen@company.com",
+      role: "همکار",
+      status: "دعوت‌شده",
+    },
+  ];
+
+  return (
+    <section className="py-32">
+      <div className="container flex flex-col gap-6">
+        <div className="text-start">
+          <h2 className="text-xl font-semibold tracking-tight">اعضای تیم</h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            مدیریت و دعوت کاربران به تیم
+          </p>
+        </div>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>نام</TableHead>
+              <TableHead>ایمیل</TableHead>
+              <TableHead>نقش</TableHead>
+              <TableHead>وضعیت</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {users.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell className="font-medium">{user.name}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell>{user.role}</TableCell>
+                <TableCell>{user.status}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button className="w-fit">دعوت کاربران</Button>
+          </SheetTrigger>
+          <SheetContent
+            side="right"
+            className={cn(
+              "flex h-full w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-lg",
+              className,
+            )}
+          >
+            <SheetHeader className="border-b px-6 py-4 text-start">
+              <SheetTitle className="flex items-center gap-2 font-semibold">
+                <UserRoundPlus className="size-4" />
+                {heading}
+              </SheetTitle>
+              <SheetDescription className="sr-only">
+                با وارد کردن آدرس ایمیل، کاربران را به تیم دعوت کنید
+              </SheetDescription>
+            </SheetHeader>
+            <form
+              autoComplete="off"
+              onSubmit={(e) => e.preventDefault()}
+              className="flex flex-1 flex-col gap-6 overflow-y-auto bg-muted pt-6"
+            >
+              <div className="space-y-1 px-6">
+                <Label className="text-xs">آدرس ایمیل</Label>
+                <Textarea
+                  dir="rtl"
+                  style={{
+                    resize: "none",
+                    minHeight: "100px",
+                  }}
+                  placeholder="آدرس‌های ایمیل را وارد کنید..."
+                  className="bg-background text-end"
+                />
+              </div>
+              <div className="space-y-1 px-6">
+                <Label className="text-xs">تعیین نقش</Label>
+                <Select defaultValue="collaborator">
+                  <SelectTrigger className="w-full bg-background">
+                    <SelectValue placeholder="انتخاب نقش" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="collaborator">همکار</SelectItem>
+                    <SelectItem value="administrator">مدیر</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex px-6">
+                <Button type="submit">
+                  ارسال دعوت‌نامه
+                  <CornerDownLeft className="rtl:rotate-180" />
+                </Button>
+              </div>
+            </form>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </section>
+  );
+};
+
+export { InviteUser2 };
diff --git a/blocks/invite-user3.tsx b/blocks/invite-user3.tsx
new file mode 100644
index 0000000..8696f8a
--- /dev/null
+++ b/blocks/invite-user3.tsx
@@ -0,0 +1,312 @@
+"use client";
+
+import { Check, MailIcon, MoreHorizontal, UserIcon } from "lucide-react";
+import { useState } from "react";
+
+import {
+  Tags,
+  TagsContent,
+  TagsEmpty,
+  TagsGroup,
+  TagsInput,
+  TagsItem,
+  TagsList,
+  TagsTrigger,
+  TagsValue,
+} from "@/components/kibo-ui/tags";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  status?: "Pending" | "Accepted";
+}
+
+interface UsersTableProps {
+  users: User[];
+}
+
+const UsersTable = ({ users }: UsersTableProps) => {
+  const columns = [
+    {
+      label: "نام",
+      icon: UserIcon,
+    },
+    {
+      label: "ایمیل",
+      icon: MailIcon,
+    },
+  ];
+
+  return (
+    <div className="space-y-2 text-start">
+      <p className="text-sm font-medium sm:text-base">کاربران دعوت‌شده</p>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column, i) => (
+              <TableHead key={`col-${column.label}-${i}`}>
+                <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <column.icon className="size-3.5" />
+                  <span>{column.label}</span>
+                </div>
+              </TableHead>
+            ))}
+            <TableHead />
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {users.map((user) => (
+            <TableRow key={`user-${user.id}`}>
+              <TableCell>{user.name}</TableCell>
+              <TableCell dir="rtl" className="text-end">{user.email}</TableCell>
+              <TableCell>
+                <Badge
+                  className={
+                    user.status === "Accepted"
+                      ? "bg-green-100 text-green-800"
+                      : "bg-yellow-100 text-yellow-800"
+                  }
+                >
+                  {user.status === "Accepted" ? "پذیرفته" : "در انتظار"}
+                </Badge>
+              </TableCell>
+              <TableCell>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon-sm">
+                      <MoreHorizontal className="size-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem variant="destructive">
+                      لغو دسترسی
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+interface InviteUserFormProps {
+  value: string[];
+  options: {
+    value: string;
+    label: string;
+  }[];
+  onToggle: (value: string) => void;
+}
+
+const InviteUserForm = ({ value, options, onToggle }: InviteUserFormProps) => {
+  const [searchValue, setSearchValue] = useState("");
+
+  const handleCreateEmail = () => {
+    if (searchValue.trim() && !value.includes(searchValue.trim())) {
+      onToggle(searchValue.trim());
+      setSearchValue("");
+    }
+  };
+
+  return (
+    <form
+      autoComplete="off"
+      onSubmit={(e) => e.preventDefault()}
+      className="space-y-2 text-start"
+    >
+      <p className="text-sm font-medium sm:text-base">دعوت کاربر</p>
+      <div className="flex flex-wrap items-start gap-2 sm:flex-nowrap">
+        <Tags>
+          <TagsTrigger>
+            {value.map((tagValue) => {
+              const option = options.find((opt) => opt.value === tagValue);
+              return (
+                <TagsValue key={tagValue} onRemove={() => onToggle(tagValue)}>
+                  {option?.label || tagValue}
+                </TagsValue>
+              );
+            })}
+          </TagsTrigger>
+          <TagsContent>
+            <TagsInput
+              placeholder="جستجوی کاربران..."
+              value={searchValue}
+              onValueChange={setSearchValue}
+            />
+            <TagsList>
+              <TagsEmpty>
+                {searchValue.trim() && (
+                  <Button
+                    variant="ghost"
+                    onClick={handleCreateEmail}
+                    className="m-1 w-full justify-start"
+                  >
+                    ایجاد «{searchValue.trim()}»
+                  </Button>
+                )}
+              </TagsEmpty>
+
+              <TagsGroup>
+                {options.map((option) => (
+                  <TagsItem
+                    key={option.value}
+                    value={option.value}
+                    onSelect={() => onToggle(option.value)}
+                    className="justify-start"
+                  >
+                    <Check
+                      className={cn(
+                        "size-4 opacity-0",
+                        value.includes(option.value) && "opacity-100",
+                      )}
+                    />
+                    {option.label}
+                  </TagsItem>
+                ))}
+              </TagsGroup>
+            </TagsList>
+          </TagsContent>
+        </Tags>
+        <Button
+          type="submit"
+          className="w-full sm:h-10 sm:w-auto"
+          disabled={value.length === 0}
+        >
+          دعوت کاربران
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+interface InviteUser3Props {
+  heading?: string;
+  description?: string;
+  companyLogo?: string;
+  className?: string;
+  nonInvitedConnections?: User[];
+  invitedUsers?: User[];
+}
+
+const InviteUser3 = ({
+  heading = "افراد را به فضای کار خود دعوت کنید",
+  description =
+    "برای آن‌ها ایمیل دعوت ارسال می‌کنیم تا به فضای کار شما بپیوندند.",
+  companyLogo = "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.png",
+  className,
+  nonInvitedConnections = [
+    {
+      id: 3,
+      name: "آلیس اسمیت",
+      email: "alice.smith@example.com",
+    },
+    {
+      id: 5,
+      name: "چارلی براون",
+      email: "charlie.brown@example.com",
+    },
+    {
+      id: 13,
+      name: "کوین هارت",
+      email: "kevin.hart@example.com",
+    },
+    {
+      id: 15,
+      name: "مایکل اسکات",
+      email: "michael.scott@example.com",
+    },
+    {
+      id: 17,
+      name: "اسکار ویلد",
+      email: "oscar.wilde@example.com",
+    },
+  ],
+  invitedUsers = [
+    {
+      id: 1,
+      name: "جین دو",
+      email: "jane.doe@example.com",
+      status: "Pending",
+    },
+    {
+      id: 2,
+      name: "جان دو",
+      email: "john.doe@example.com",
+      status: "Accepted",
+    },
+    {
+      id: 6,
+      name: "دایانا روس",
+      email: "diana.ross@example.com",
+      status: "Accepted",
+    },
+  ],
+}: InviteUser3Props) => {
+  const [value, setValue] = useState<string[]>([]);
+
+  const options = nonInvitedConnections.map((user) => ({
+    value: user.email,
+    label: user.name,
+  }));
+
+  const handleToggle = (selectedValue: string) => {
+    setValue((prev) =>
+      prev.includes(selectedValue)
+        ? prev.filter((v) => v !== selectedValue)
+        : [...prev, selectedValue],
+    );
+  };
+
+  return (
+    <section className="py-32">
+      <div className="container">
+        <div className={cn("mx-auto max-w-3xl space-y-12", className)}>
+          <img
+            src={companyLogo}
+            alt="لوگوی شرکت"
+            className="w-56 sm:w-68 dark:invert"
+          />
+
+          <div className="text-start">
+            <p className="text-xl font-medium sm:text-xl">{heading}</p>
+            <p className="text-sm text-muted-foreground sm:text-base">
+              {description}
+            </p>
+          </div>
+          <div className="space-y-8">
+            <InviteUserForm
+              value={value}
+              options={options}
+              onToggle={handleToggle}
+            />
+            <UsersTable users={invitedUsers} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { InviteUser3 };
diff --git a/blocks/invite-user4.tsx b/blocks/invite-user4.tsx
new file mode 100644
index 0000000..f052218
--- /dev/null
+++ b/blocks/invite-user4.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: string;
+}
+
+interface CopyLinkCardProps {
+  inviteLink: string;
+}
+
+const CopyLinkCard = ({ inviteLink }: CopyLinkCardProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    setCopied(true);
+    navigator.clipboard.writeText(inviteLink);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="space-y-4 rounded-md border bg-muted p-4 text-start">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <p className="font-medium">ارسال لینک</p>
+          <p className="text-sm text-muted-foreground">
+            هر کسی با این لینک می‌تواند دسترسی داشته باشد
+          </p>
+        </div>
+        <Select defaultValue="view">
+          <SelectTrigger className="!bg-background">
+            <SelectValue placeholder="نقش" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="view">دسترسی مشاهده</SelectItem>
+            <SelectItem value="edit">دسترسی ویرایش</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex items-center justify-between rounded-sm border bg-background py-1 pe-1 ps-3">
+        <p dir="rtl" className="text-sm text-end">{inviteLink}</p>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={handleCopy}
+          disabled={copied}
+        >
+          {copied ? <Check className="text-green-500" /> : <Copy />}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const InviteForm = () => {
+  return (
+    <form
+      autoComplete="off"
+      onSubmit={(e) => e.preventDefault()}
+      className="flex flex-col gap-2.5 text-start"
+    >
+      <Label>دعوت با ایمیل</Label>
+      <div className="flex w-full gap-2">
+        <Input
+          required
+          name="email"
+          type="email"
+          dir="rtl"
+          placeholder="ali.rezaei@example.ir"
+          className="text-end"
+        />
+
+        <Button type="submit">دعوت</Button>
+      </div>
+    </form>
+  );
+};
+
+interface UsersTableProps {
+  users: User[];
+}
+
+const UsersTable = ({ users }: UsersTableProps) => {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>نام</TableHead>
+          <TableHead>ایمیل</TableHead>
+          <TableHead>نقش</TableHead>
+          <TableHead>وضعیت</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user) => (
+          <TableRow key={user.id}>
+            <TableCell className="font-medium">{user.name}</TableCell>
+            <TableCell dir="rtl" className="text-end">{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+            <TableCell>{user.status}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+interface InviteUser4Props {
+  heading?: string;
+  inviteLink?: string;
+  className?: string;
+}
+
+const InviteUser4 = ({
+  heading = "دعوت کاربر",
+  inviteLink = "https://www.ShadcnBlocks",
+  className,
+}: InviteUser4Props) => {
+  const users: User[] = [
+    {
+      id: 1,
+      name: "سارا رضایی",
+      email: "sarah.j@company.com",
+      role: "مدیر",
+      status: "فعال",
+    },
+    {
+      id: 2,
+      name: "مایکل چن",
+      email: "m.chen@company.com",
+      role: "همکار",
+      status: "دعوت‌شده",
+    },
+  ];
+
+  return (
+    <section className="py-32">
+      <div className="container flex flex-col gap-6">
+        <div className="text-start">
+          <h2 className="text-xl font-semibold tracking-tight">اعضای تیم</h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            مدیریت و دعوت کاربران به تیم
+          </p>
+        </div>
+
+        <UsersTable users={users} />
+
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button className="w-fit">{heading}</Button>
+          </DialogTrigger>
+          <DialogContent className={cn("gap-0 overflow-hidden p-0", className)}>
+            <DialogTitle className="flex items-center gap-2 border-b bg-muted px-4 py-3 text-base font-medium">
+              {heading}
+            </DialogTitle>
+            <div className="space-y-5 p-4 pt-5">
+              <CopyLinkCard inviteLink={inviteLink} />
+
+              <InviteForm />
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </section>
+  );
+};
+
+export { InviteUser4 };
diff --git a/blocks/leaderboard1.tsx b/blocks/leaderboard1.tsx
new file mode 100644
index 0000000..6d74cbd
--- /dev/null
+++ b/blocks/leaderboard1.tsx
@@ -0,0 +1,68 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface LeaderboardItem {
+  name: string;
+  value: number;
+  maxValue?: number;
+}
+
+interface Leaderboard1Props {
+  title?: string;
+  description?: string;
+  items?: LeaderboardItem[];
+  valuePrefix?: string;
+  className?: string;
+}
+
+const defaultItems: LeaderboardItem[] = [
+  { name: "ایالات متحده", value: 4520 },
+  { name: "بریتانیا", value: 3210 },
+  { name: "آلمان", value: 2890 },
+  { name: "فرانسه", value: 1890 },
+  { name: "کانادا", value: 1240 },
+];
+
+const Leaderboard1 = ({
+  title = "کشورهای برتر",
+  description = "بازدیدکنندگان به تفکیک کشور",
+  items = defaultItems,
+  valuePrefix = "",
+  className,
+}: Leaderboard1Props) => {
+  const maxValue = items[0]?.value || 1;
+
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-2xl", className)}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {items.map((item, index) => (
+          <div key={index} className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <span className="font-medium">{item.name}</span>
+              <span className="text-muted-foreground">
+                {valuePrefix}
+                {formatNumber(item.value)}
+              </span>
+            </div>
+            <Progress value={(item.value / maxValue) * 100} className="h-2" />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+
+export { Leaderboard1 };
diff --git a/blocks/leaderboard2.tsx b/blocks/leaderboard2.tsx
new file mode 100644
index 0000000..d10fc14
--- /dev/null
+++ b/blocks/leaderboard2.tsx
@@ -0,0 +1,118 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatPrice = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency: "IRR",
+  }).format(value);
+
+interface LeaderboardItem {
+  name: string;
+  subtitle?: string;
+  value: string;
+  avatar?: string;
+}
+
+interface Leaderboard2Props {
+  title?: string;
+  description?: string;
+  items?: LeaderboardItem[];
+  className?: string;
+}
+
+const defaultItems: LeaderboardItem[] = [
+  {
+    name: "سارا احمدی",
+    subtitle: "تیم فروش",
+    value: formatPrice(48250),
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
+  },
+  {
+    name: "مهدی رضایی",
+    subtitle: "تیم فروش",
+    value: formatPrice(42100),
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar1.webp",
+  },
+  {
+    name: "نیلوفر کریمی",
+    subtitle: "سازمانی",
+    value: formatPrice(38750),
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar4.webp",
+  },
+  {
+    name: "امیر حسینی",
+    subtitle: "تیم فروش",
+    value: formatPrice(35200),
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
+  },
+  {
+    name: "لیلا محمدی",
+    subtitle: "سازمانی",
+    value: formatPrice(31800),
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
+  },
+];
+
+const Leaderboard2 = ({
+  title = "برترین عملکردها",
+  description = "جدول فروش این ماه",
+  items = defaultItems,
+  className,
+}: Leaderboard2Props) => {
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-2xl", className)}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {items.map((item, index) => (
+          <div key={index} className="flex items-center gap-4">
+            <span className="w-6 text-center text-sm font-medium text-muted-foreground">
+              {formatNumber(index + 1)}
+            </span>
+            <Avatar className="size-10">
+              <AvatarImage
+                src={item.avatar}
+                alt={`تصویر ${item.name}`}
+                className="object-cover"
+              />
+              <AvatarFallback>
+                {item.name
+                  .split(" ")
+                  .map((n) => n[0])
+                  .join("")}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium">{item.name}</p>
+              {item.subtitle && (
+                <p className="truncate text-sm text-muted-foreground">
+                  {item.subtitle}
+                </p>
+              )}
+            </div>
+            <span className="text-sm font-semibold">{item.value}</span>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+
+export { Leaderboard2 };
diff --git a/blocks/leaderboard3.tsx b/blocks/leaderboard3.tsx
new file mode 100644
index 0000000..99f9479
--- /dev/null
+++ b/blocks/leaderboard3.tsx
@@ -0,0 +1,113 @@
+import { Minus, TrendingDown, TrendingUp } from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatChangeAmount = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    signDisplay: "exceptZero",
+  }).format(value);
+
+interface LeaderboardItem {
+  name: string;
+  value: string;
+  change: "up" | "down" | "same";
+  changeAmount?: string;
+}
+
+interface Leaderboard3Props {
+  title?: string;
+  description?: string;
+  items?: LeaderboardItem[];
+  className?: string;
+}
+
+const defaultItems: LeaderboardItem[] = [
+  {
+    name: "جستجوی ارگانیک",
+    value: formatNumber(12450),
+    change: "up",
+    changeAmount: formatChangeAmount(2340),
+  },
+  {
+    name: "مستقیم",
+    value: formatNumber(8230),
+    change: "up",
+    changeAmount: formatChangeAmount(890),
+  },
+  {
+    name: "شبکه‌های اجتماعی",
+    value: formatNumber(5120),
+    change: "down",
+    changeAmount: formatChangeAmount(-320),
+  },
+  {
+    name: "ارجاع",
+    value: formatNumber(3890),
+    change: "same",
+  },
+  {
+    name: "ایمیل",
+    value: formatNumber(2150),
+    change: "up",
+    changeAmount: formatChangeAmount(180),
+  },
+];
+
+const Leaderboard3 = ({
+  title = "منابع ترافیک",
+  description = "برترین کانال‌های جذب کاربر",
+  items = defaultItems,
+  className,
+}: Leaderboard3Props) => {
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-2xl", className)}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {items.map((item, index) => (
+            <div key={index} className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <span className="flex size-8 items-center justify-center rounded-full bg-muted text-sm font-medium">
+                  {formatNumber(index + 1)}
+                </span>
+                <span className="font-medium">{item.name}</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <span className="text-sm font-semibold">{item.value}</span>
+                <div
+                  className={cn(
+                    "flex items-center gap-1 text-sm",
+                    item.change === "up" && "text-green-500",
+                    item.change === "down" && "text-red-500",
+                    item.change === "same" && "text-muted-foreground",
+                  )}
+                >
+                  {item.change === "up" && <TrendingUp className="size-4" />}
+                  {item.change === "down" && (
+                    <TrendingDown className="size-4" />
+                  )}
+                  {item.change === "same" && <Minus className="size-4" />}
+                  {item.changeAmount && <span>{item.changeAmount}</span>}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { Leaderboard3 };
diff --git a/blocks/list1.tsx b/blocks/list1.tsx
new file mode 100644
index 0000000..425e5fc
--- /dev/null
+++ b/blocks/list1.tsx
@@ -0,0 +1,200 @@
+import { BarChart3, Briefcase, Cloud, Shield } from "lucide-react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+type OfferType = "free" | "professional" | "enterprise";
+
+const offerStyles: Record<OfferType, string> = {
+  free: "bg-yellow-400",
+  professional: "bg-green-400",
+  enterprise: "bg-blue-400",
+};
+
+const data = [
+  {
+    id: "security-1",
+    icon: <Shield strokeWidth={2} />,
+    category: "امنیت",
+    description:
+      "راهکار امنیتی سازمانی با حفاظت پیشرفته در برابر تهدید و پایش مستمر",
+    year: 2024,
+    offer: "رایگان",
+    offerType: "free" as OfferType,
+    segment: "کسب‌وکار",
+  },
+  {
+    id: "technology-1",
+    icon: <Cloud strokeWidth={2} />,
+    category: "فناوری",
+    description:
+      "پلتفرم ابری با راهکارهای مقیاس‌پذیر برای کسب‌وکارهای امروزی",
+    year: 2023,
+    offer: "حرفه‌ای",
+    offerType: "professional" as OfferType,
+    segment: "کسب‌وکار",
+  },
+  {
+    id: "services-1",
+    icon: <Briefcase strokeWidth={2} />,
+    category: "خدمات",
+    description:
+      "مجموعه جامع مدیریت کسب‌وکار برای سازمان‌های در حال رشد",
+    year: 2022,
+    offer: "سازمانی",
+    offerType: "enterprise" as OfferType,
+    segment: "سازمانی",
+  },
+  {
+    id: "analytics-1",
+    icon: <BarChart3 strokeWidth={2} />,
+    category: "تحلیل‌داده",
+    description:
+      "پلتفرم تحلیل داده بلادرنگ با داشبورد و گزارش‌گیری قابل سفارشی‌سازی",
+    year: 2024,
+    offer: "حرفه‌ای",
+    offerType: "professional" as OfferType,
+    segment: "کسب‌وکار",
+  },
+  {
+    id: "security-2",
+    icon: <Shield strokeWidth={2} />,
+    category: "امنیت",
+    description:
+      "سیستم پیشرفته حفاظت از نقاط پایانی با تشخیص تهدید مبتنی بر هوش مصنوعی",
+    year: 2023,
+    offer: "حرفه‌ای",
+    offerType: "professional" as OfferType,
+    segment: "سازمانی",
+  },
+  {
+    id: "technology-2",
+    icon: <Cloud strokeWidth={2} />,
+    category: "فناوری",
+    description:
+      "پلتفرم محاسبات بدون سرور با قابلیت مقیاس‌دهی خودکار",
+    year: 2024,
+    offer: "سازمانی",
+    offerType: "enterprise" as OfferType,
+    segment: "کسب‌وکار",
+  },
+  {
+    id: "services-2",
+    icon: <Briefcase strokeWidth={2} />,
+    category: "خدمات",
+    description:
+      "خدمات مشاوره حرفه‌ای برای پروژه‌های تحول دیجیتال",
+    year: 2023,
+    offer: "رایگان",
+    offerType: "free" as OfferType,
+    segment: "کسب‌وکار",
+  },
+];
+
+const formatYear = (year: number) => year.toLocaleString("fa-IR");
+
+interface List1Props {
+  className?: string;
+}
+
+const List1 = ({ className }: List1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container px-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead></TableHead>
+              <TableHead className="hidden font-bold text-primary md:table-cell">
+                دسته‌بندی
+              </TableHead>
+              <TableHead>
+                <span className="hidden font-bold text-primary md:block">
+                  توضیحات
+                </span>
+                <span className="block font-bold text-primary md:hidden">
+                  پروژه
+                </span>
+              </TableHead>
+              <TableHead className="hidden text-end font-bold text-primary md:table-cell">
+                سال
+              </TableHead>
+              <TableHead className="hidden font-bold text-primary md:table-cell">
+                طرح
+              </TableHead>
+              <TableHead className="hidden font-bold text-primary md:table-cell">
+                بخش
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((item) => (
+              <TableRow key={item.id}>
+                <TableCell className="">
+                  <div className="flex items-center gap-2 align-top">
+                    {item.icon}
+                  </div>
+                </TableCell>
+                <TableCell className="hidden md:table-cell">
+                  {item.category}
+                </TableCell>
+                <TableCell className="ps-0 align-top md:ps-4">
+                  <div className="flex flex-col gap-2">
+                    <div className="flex items-baseline justify-between gap-1 md:hidden">
+                      <div className="flex items-center gap-1">
+                        <span className="text-sm font-medium">
+                          {item.category}
+                        </span>
+                        <span className="text-sm text-muted-foreground">
+                           {item.segment}
+                        </span>
+                        <span
+                          className={cn(
+                            "ms-1 block h-1.5 w-4 rounded-full md:hidden",
+                            offerStyles[item.offerType],
+                          )}
+                        ></span>
+                      </div>
+                      <span className="text-xs text-muted-foreground">
+                        {formatYear(item.year)}
+                      </span>
+                    </div>
+                    <p className="text-sm text-muted-foreground md:text-primary">
+                      {item.description}
+                    </p>
+                  </div>
+                </TableCell>
+                <TableCell className="hidden text-end md:table-cell">
+                  {formatYear(item.year)}
+                </TableCell>
+                <TableCell className="hidden md:table-cell">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={cn(
+                        "block h-6 w-1.5 rounded-full",
+                        offerStyles[item.offerType],
+                      )}
+                    ></span>
+                    {item.offer}
+                  </div>
+                </TableCell>
+                <TableCell className="hidden md:table-cell">
+                  {item.segment}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </section>
+  );
+};
+
+export { List1 };
diff --git a/blocks/list2.tsx b/blocks/list2.tsx
new file mode 100644
index 0000000..52f013d
--- /dev/null
+++ b/blocks/list2.tsx
@@ -0,0 +1,124 @@
+import {
+  ArrowRight,
+  Award,
+  Building2,
+  HeartHandshake,
+  Leaf,
+  Lightbulb,
+  Trophy,
+} from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface ListItem {
+  icon: React.ReactNode;
+  title: string;
+  category: string;
+  description: string;
+  link: string;
+}
+
+interface List2Props {
+  heading?: string;
+  items?: ListItem[];
+  className?: string;
+}
+
+const defaultItems: ListItem[] = [
+  {
+    icon: <Trophy />,
+    title: "تقدیر صنعتی",
+    category: "دستاورد",
+    description: "جایزه عملکرد برجسته.",
+    link: "#",
+  },
+  {
+    icon: <Award />,
+    title: "جایزه تعالی",
+    category: "تقدیر",
+    description: "برنده بهترین در دسته.",
+    link: "#",
+  },
+  {
+    icon: <Lightbulb />,
+    title: "جایزه نوآوری",
+    category: "فناوری",
+    description: "راهکار پیشرو سال.",
+    link: "#",
+  },
+  {
+    icon: <HeartHandshake />,
+    title: "موفقیت مشتری",
+    category: "خدمات",
+    description: "ارائه‌دهنده راهکار با بالاترین امتیاز.",
+    link: "#",
+  },
+  {
+    icon: <Building2 />,
+    title: "رهبری جهانی",
+    category: "مدیریت",
+    description: "تیم اجرایی سال.",
+    link: "#",
+  },
+  {
+    icon: <Leaf />,
+    title: "اثر پایداری",
+    category: "محیط‌زیست",
+    description: "تعالی در طرح سبز.",
+    link: "#",
+  },
+];
+
+const List2 = ({
+  heading = "افتخارات و دستاوردهای ما",
+  items = defaultItems,
+  className,
+}: List2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container px-0 md:px-8">
+        <h1 className="mb-10 px-4 text-start text-3xl font-semibold md:mb-14 md:text-xl">
+          {heading}
+        </h1>
+        <div className="flex flex-col">
+          <Separator />
+          {items.map((item, index) => (
+            <React.Fragment key={index}>
+              <div className="grid items-center gap-4 px-4 py-5 md:grid-cols-4">
+                <div className="order-2 flex items-center gap-2 md:order-none">
+                  <span className="flex h-14 w-16 shrink-0 items-center justify-center rounded-md bg-muted">
+                    {item.icon}
+                  </span>
+                  <div className="flex flex-col gap-1 text-start">
+                    <h3 className="font-semibold">{item.title}</h3>
+                    <p className="text-sm text-muted-foreground">
+                      {item.category}
+                    </p>
+                  </div>
+                </div>
+                <p className="order-1 text-start text-xl font-semibold md:order-none md:col-span-2">
+                  {item.description}
+                </p>
+                <Button variant="outline" asChild>
+                  <a
+                    className="order-3 ms-auto w-fit gap-2 md:order-none"
+                    href={item.link}
+                  >
+                    <span>مشاهده پروژه</span>
+                    <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+                  </a>
+                </Button>
+              </div>
+              <Separator />
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { List2 };
diff --git a/blocks/list3.tsx b/blocks/list3.tsx
new file mode 100644
index 0000000..e0fda92
--- /dev/null
+++ b/blocks/list3.tsx
@@ -0,0 +1,189 @@
+import React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Period {
+  from: number;
+  to: number | null;
+}
+
+interface Experience {
+  id: string;
+  period: Period;
+  role: string;
+  company: string;
+}
+
+interface Award {
+  id: string;
+  year: number;
+  title: string;
+  organization: string;
+}
+
+const formatPeriod = ({ from, to }: Period) => {
+  const fromFa = from.toLocaleString("fa-IR");
+  if (to === null) return `${fromFa}  اکنون`;
+  return `${fromFa}  ${to.toLocaleString("fa-IR")}`;
+};
+
+const formatYear = (year: number) => year.toLocaleString("fa-IR");
+
+const experiences: Experience[] = [
+  {
+    id: "exp-1",
+    period: { from: 2019, to: null },
+    role: "مهندس ارشد نرم‌افزار",
+    company: "شرکت نوآوری‌های فناوری",
+  },
+  {
+    id: "exp-2",
+    period: { from: 2018, to: 2020 },
+    role: "توسعه‌دهنده فول‌استک",
+    company: "راهکارهای دیجیتال و همکاری با استارتاپ‌ها",
+  },
+  {
+    id: "exp-3",
+    period: { from: 2017, to: 2018 },
+    role: "توسعه‌دهنده فرانت‌اند",
+    company: "استودیو وب‌کرفت",
+  },
+  {
+    id: "exp-4",
+    period: { from: 2015, to: 2016 },
+    role: "توسعه‌دهنده مبتدی",
+    company: "آزمایشگاه کدفورج",
+  },
+  {
+    id: "exp-5",
+    period: { from: 2014, to: 2015 },
+    role: "کارآموز توسعه",
+    company: "نوآوری‌تک",
+  },
+];
+
+const awards: Award[] = [
+  {
+    id: "award-1",
+    year: 2015,
+    title: "بهترین توسعه‌دهنده تازه‌وارد",
+    organization: "جوایز تعالی فناوری",
+  },
+  {
+    id: "award-2",
+    year: 2015,
+    title: "نوآوری در توسعه وب",
+    organization: "خالقان دیجیتال بریتانیا",
+  },
+  {
+    id: "award-3",
+    year: 2016,
+    title: "کیفیت برجسته کد",
+    organization: "انجمن نرم‌افزار بریتانیا",
+  },
+  {
+    id: "award-4",
+    year: 2017,
+    title: "ستاره درخشان فناوری",
+    organization: "جوایز جهانی توسعه‌دهندگان",
+  },
+  {
+    id: "award-5",
+    year: 2018,
+    title: "توسعه‌دهنده سال",
+    organization: "جوایز تعالی کد",
+  },
+  {
+    id: "award-6",
+    year: 2019,
+    title: "بهترین رهبر تیم فناوری",
+    organization: "انجمن نرم‌افزار بریتانیا",
+  },
+  {
+    id: "award-7",
+    year: 2020,
+    title: "نوآوری در معماری نرم‌افزار",
+    organization: "جوایز نوآوری دیجیتال",
+  },
+  {
+    id: "award-8",
+    year: 2021,
+    title: "رهبر نوظهور فناوری",
+    organization: "شورای فناوری لندن",
+  },
+  {
+    id: "award-9",
+    year: 2022,
+    title: "تعالی در توسعه فول‌استک",
+    organization: "هفتگی توسعه‌دهندگان",
+  },
+  {
+    id: "award-10",
+    year: 2023,
+    title: "بهترین مهندس نرم‌افزار",
+    organization: "فناوری و رسانه اروپا",
+  },
+];
+
+interface List3Props {
+  className?: string;
+}
+
+const List3 = ({ className }: List3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-12">
+          <div className="flex flex-col gap-5 text-start">
+            <span className="text-sm text-muted-foreground">/ مسیر شغلی</span>
+            <h1 className="text-xl md:text-2xll">
+              راهکار می‌سازیم،
+              <br /> آینده را شکل می‌دهیم
+            </h1>
+          </div>
+          <div className="flex flex-col gap-7">
+            <h2 className="text-start text-xl">/ سوابق کاری</h2>
+            <div>
+              {experiences.map((experience) => (
+                <React.Fragment key={experience.id}>
+                  <Separator />
+                  <div className="my-2.5 grid gap-2.5 text-sm sm:grid-cols-3">
+                    <p className="text-start text-muted-foreground">
+                      {formatPeriod(experience.period)}
+                    </p>
+                    <p className="text-start">{experience.role}</p>
+                    <p className="text-start text-muted-foreground">
+                      {experience.company}
+                    </p>
+                  </div>
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+          <div className="flex flex-col gap-7">
+            <h2 className="text-start text-xl">/ افتخارات</h2>
+            <div>
+              {awards.map((award) => (
+                <React.Fragment key={award.id}>
+                  <Separator />
+                  <div className="my-2.5 grid gap-2.5 text-sm sm:grid-cols-3">
+                    <p className="text-start text-muted-foreground">
+                      {formatYear(award.year)}
+                    </p>
+                    <p className="text-start">{award.title}</p>
+                    <p className="text-start text-muted-foreground">
+                      {award.organization}
+                    </p>
+                  </div>
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { List3 };
diff --git a/blocks/live-purchase1.tsx b/blocks/live-purchase1.tsx
new file mode 100644
index 0000000..9866cef
--- /dev/null
+++ b/blocks/live-purchase1.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Purchase {
+  id: string;
+  customerName: string;
+  customerLocation: string;
+  customerAvatar?: string;
+  productName: string;
+  productImage: string;
+  timeAgo: string;
+}
+
+const DEFAULT_PURCHASES: Purchase[] = [
+  {
+    id: "1",
+    customerName: "سارا محمدی",
+    customerLocation: "تهران",
+    productName: "هدفون بی‌سیم",
+    productImage:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+    timeAgo: "۲ دقیقه پیش",
+  },
+  {
+    id: "2",
+    customerName: "علی رضایی",
+    customerLocation: "اصفهان",
+    productName: "کیف چرم دوشی",
+    productImage:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    timeAgo: "۵ دقیقه پیش",
+  },
+  {
+    id: "3",
+    customerName: "مریم حسینی",
+    customerLocation: "شیراز",
+    productName: "هودی نخی",
+    productImage:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+    timeAgo: "۸ دقیقه پیش",
+  },
+];
+
+interface LivePurchase1Props {
+  purchases?: Purchase[];
+  autoRotate?: boolean;
+  rotateInterval?: number;
+  className?: string;
+}
+
+const LivePurchase1 = ({
+  purchases = DEFAULT_PURCHASES,
+  autoRotate = true,
+  rotateInterval = 5000,
+  className,
+}: LivePurchase1Props) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isVisible, setIsVisible] = useState(true);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    if (!autoRotate || purchases.length <= 1) return;
+
+    const timer = setInterval(() => {
+      setIsAnimating(true);
+      setTimeout(() => {
+        setCurrentIndex((prev) => (prev + 1) % purchases.length);
+        setIsAnimating(false);
+      }, 300);
+    }, rotateInterval);
+
+    return () => clearInterval(timer);
+  }, [autoRotate, rotateInterval, purchases.length]);
+
+  if (!isVisible) return null;
+
+  const current = purchases[currentIndex];
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("relative min-h-48 w-full", className)}
+    >
+      <div className="absolute bottom-6 start-6 z-50 max-w-100">
+        <Card
+          className={cn(
+            "gap-0 p-0 shadow-lg transition-all duration-300",
+            isAnimating && "translate-y-2 opacity-0",
+          )}
+        >
+          <CardContent className="p-3">
+            <div className="flex items-start gap-3">
+              <div className="size-14 shrink-0 overflow-hidden rounded-md bg-muted">
+                <img
+                  src={current.productImage}
+                  alt={current.productName}
+                  className="size-full object-cover"
+                />
+              </div>
+
+              <div className="min-w-0 flex-1 text-start">
+                <p className="text-sm">
+                  <span className="font-semibold">{current.customerName}</span>{" "}
+                  <span className="text-muted-foreground">از</span>{" "}
+                  <span>{current.customerLocation}</span>
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  همین الان{" "}
+                  <span className="font-medium text-foreground">
+                    {current.productName}
+                  </span>{" "}
+                  را خرید کرد
+                </p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {current.timeAgo}
+                </p>
+              </div>
+
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-6 shrink-0"
+                aria-label="بستن"
+                onClick={() => setIsVisible(false)}
+              >
+                <X className="size-3" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export { LivePurchase1 };
diff --git a/blocks/live-purchase2.tsx b/blocks/live-purchase2.tsx
new file mode 100644
index 0000000..ca60fb5
--- /dev/null
+++ b/blocks/live-purchase2.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { MapPin, X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Purchase {
+  customerName: string;
+  customerLocation: string;
+  productName: string;
+  productImage: string;
+}
+
+const DEFAULT_PURCHASES: Purchase[] = [
+  {
+    customerName: "رضا",
+    customerLocation: "مشهد",
+    productName: "هدفون پریمیوم",
+    productImage:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+  },
+  {
+    customerName: "نازنین",
+    customerLocation: "تبریز",
+    productName: "کیف چرم",
+    productImage:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    customerName: "امیر",
+    customerLocation: "کرمان",
+    productName: "کفش ورزشی",
+    productImage:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+];
+
+interface LivePurchase2Props {
+  purchases?: Purchase[];
+  autoRotate?: boolean;
+  rotateInterval?: number;
+  className?: string;
+}
+
+const LivePurchase2 = ({
+  purchases = DEFAULT_PURCHASES,
+  autoRotate = true,
+  rotateInterval = 6000,
+  className,
+}: LivePurchase2Props) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  useEffect(() => {
+    if (isDismissed) return;
+
+    const showTimer = setTimeout(() => {
+      setIsVisible(true);
+    }, 2000);
+
+    return () => clearTimeout(showTimer);
+  }, [isDismissed]);
+
+  useEffect(() => {
+    if (!autoRotate || purchases.length <= 1 || !isVisible || isDismissed)
+      return;
+
+    const timer = setInterval(() => {
+      setIsVisible(false);
+      setTimeout(() => {
+        setCurrentIndex((prev) => (prev + 1) % purchases.length);
+        setIsVisible(true);
+      }, 500);
+    }, rotateInterval);
+
+    return () => clearInterval(timer);
+  }, [autoRotate, rotateInterval, purchases.length, isVisible, isDismissed]);
+
+  const handleDismiss = () => {
+    setIsVisible(false);
+    setIsDismissed(true);
+  };
+
+  if (isDismissed) return null;
+
+  const current = purchases[currentIndex];
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("relative min-h-48 w-full", className)}
+    >
+      <div
+        className={cn(
+          "absolute bottom-6 start-6 z-50 max-w-fit transition-all duration-500",
+          isVisible
+            ? "translate-y-0 opacity-100"
+            : "pointer-events-none translate-y-4 opacity-0",
+        )}
+      >
+        <div className="relative flex items-center gap-3 rounded-full bg-background py-2 ps-2 pe-10 shadow-lg ring-1 ring-border">
+          <div className="absolute -top-1.5 end-2">
+            <span className="relative flex size-3">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+              <span className="relative inline-flex size-3 rounded-full bg-emerald-500" />
+            </span>
+          </div>
+
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute end-3 size-6 shrink-0 rounded-full"
+            aria-label="بستن"
+            onClick={handleDismiss}
+          >
+            <X className="size-3" />
+          </Button>
+
+          <div className="size-10 shrink-0 overflow-hidden rounded-full bg-muted">
+            <img
+              src={current.productImage}
+              alt={current.productName}
+              className="size-full object-cover"
+            />
+          </div>
+
+          <div className="flex min-w-0 flex-col text-start">
+            <p className="text-sm">
+              <span className="font-semibold">{current.customerName}</span>{" "}
+              <span className="font-medium">{current.productName}</span>{" "}
+              <span className="text-muted-foreground">را خرید کرد</span>
+            </p>
+            <p className="flex items-center gap-1 text-xs text-muted-foreground">
+              <MapPin className="size-3 shrink-0" />
+              {current.customerLocation}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { LivePurchase2 };
diff --git a/blocks/live-purchase3.tsx b/blocks/live-purchase3.tsx
new file mode 100644
index 0000000..b865cf8
--- /dev/null
+++ b/blocks/live-purchase3.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { CheckCircle2, ShoppingBag, Users, X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Purchase {
+  customerInitial: string;
+  productName: string;
+  timeAgo: string;
+}
+
+interface LivePurchase3Props {
+  purchases?: Purchase[];
+  viewerCount?: number;
+  purchasesToday?: number;
+  className?: string;
+}
+
+const DEFAULT_PURCHASES: Purchase[] = [
+  {
+    customerInitial: "س",
+    productName: "هندزفری بی‌سیم",
+    timeAgo: "همین الان",
+  },
+  {
+    customerInitial: "م",
+    productName: "ساعت هوشمند پرو",
+    timeAgo: "۱ دقیقه پیش",
+  },
+  {
+    customerInitial: "ع",
+    productName: "پایه لپ‌تاپ",
+    timeAgo: "۲ دقیقه پیش",
+  },
+];
+
+const formatCount = (value: number) =>
+  new Intl.NumberFormat("fa-IR").format(value);
+
+const LivePurchase3 = ({
+  purchases = DEFAULT_PURCHASES,
+  viewerCount = 47,
+  purchasesToday = 156,
+  className,
+}: LivePurchase3Props) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isVisible, setIsVisible] = useState(true);
+  const [showNotification, setShowNotification] = useState(true);
+
+  useEffect(() => {
+    if (purchases.length <= 1) return;
+
+    const timer = setInterval(() => {
+      setShowNotification(false);
+      setTimeout(() => {
+        setCurrentIndex((prev) => (prev + 1) % purchases.length);
+        setShowNotification(true);
+      }, 300);
+    }, 4000);
+
+    return () => clearInterval(timer);
+  }, [purchases.length]);
+
+  if (!isVisible) return null;
+
+  const current = purchases[currentIndex];
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("relative min-h-56 w-full", className)}
+    >
+      <div className="absolute bottom-6 start-6 z-50 space-y-3">
+        <Card
+          className={cn(
+            "w-72 gap-0 p-0 shadow-lg transition-all duration-300",
+            showNotification
+              ? "translate-y-0 opacity-100"
+              : "translate-y-2 opacity-0",
+          )}
+        >
+          <CardContent className="p-3">
+            <div className="flex items-center gap-3">
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900 dark:text-emerald-400">
+                <CheckCircle2 className="size-5" />
+              </div>
+              <div className="min-w-0 flex-1 text-start">
+                <p className="text-sm font-medium">خرید جدید!</p>
+                <p className="truncate text-sm text-muted-foreground">
+                  یک نفر {current.productName} را خرید
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {current.timeAgo}
+                </p>
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-6 shrink-0"
+                aria-label="بستن"
+                onClick={() => setIsVisible(false)}
+              >
+                <X className="size-3" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="flex items-center gap-4 rounded-full bg-background px-4 py-2 shadow-lg ring-1 ring-border">
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <Users className="size-4 text-muted-foreground" />
+              <span className="absolute -top-1 -end-1 flex size-2">
+                <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+                <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
+              </span>
+            </div>
+            <span className="text-sm">
+              <span className="font-semibold">
+                {formatCount(viewerCount)}
+              </span>{" "}
+              <span className="text-muted-foreground">در حال مشاهده</span>
+            </span>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <ShoppingBag className="size-4 text-muted-foreground" />
+            <span className="text-sm">
+              <span className="font-semibold">
+                {formatCount(purchasesToday)}
+              </span>{" "}
+              <span className="text-muted-foreground">فروش امروز</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { LivePurchase3 };
diff --git a/blocks/login1.tsx b/blocks/login1.tsx
new file mode 100644
index 0000000..a9744ef
--- /dev/null
+++ b/blocks/login1.tsx
@@ -0,0 +1,91 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Login1Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+    className?: string;
+  };
+  buttonText?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  googleText?: string;
+  signupText?: string;
+  signupLinkText?: string;
+  signupUrl?: string;
+  className?: string;
+}
+
+const Login1 = ({
+  heading = "ورود",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ورود",
+  emailPlaceholder = "ایمیل",
+  passwordPlaceholder = "رمز عبور",
+  signupText = "حساب کاربری ندارید؟",
+  signupLinkText = "ثبت‌نام",
+  signupUrl = "/#",
+  className,
+}: Login1Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-muted", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10 dark:invert"
+            />
+          </a>
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-md border border-muted bg-background px-6 py-8 text-start shadow-md">
+            {heading && <h1 className="w-full text-xl font-semibold">{heading}</h1>}
+            <Input
+              type="email"
+              placeholder={emailPlaceholder}
+              className="text-start text-sm"
+              dir="rtl"
+              required
+            />
+            <Input
+              type="password"
+              placeholder={passwordPlaceholder}
+              className="text-start text-sm"
+              dir="rtl"
+              required
+            />
+            <Button type="submit" className="w-full">
+              {buttonText}
+            </Button>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {signupLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Login1 };
diff --git a/blocks/login2.tsx b/blocks/login2.tsx
new file mode 100644
index 0000000..e127c7b
--- /dev/null
+++ b/blocks/login2.tsx
@@ -0,0 +1,102 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Login2Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+    className?: string;
+  };
+  buttonText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  googleText?: string;
+  signupText?: string;
+  signupLinkText?: string;
+  signupUrl?: string;
+  className?: string;
+}
+
+const Login2 = ({
+  heading = "ورود",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ورود",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  signupText = "حساب کاربری ندارید؟",
+  signupLinkText = "ثبت‌نام",
+  signupUrl = "/#",
+  className,
+}: Login2Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-muted", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10 dark:invert"
+            />
+          </a>
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-md border border-muted bg-background px-6 py-8 text-start shadow-md">
+            {heading && <h1 className="w-full text-xl font-semibold">{heading}</h1>}
+            <div className="flex w-full flex-col gap-2">
+              <Label>{emailLabel}</Label>
+              <Input
+                type="email"
+                placeholder={emailPlaceholder}
+                className="text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{passwordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={passwordPlaceholder}
+                className="text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              {buttonText}
+            </Button>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {signupLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Login2 };
diff --git a/blocks/login3.tsx b/blocks/login3.tsx
new file mode 100644
index 0000000..1ab08df
--- /dev/null
+++ b/blocks/login3.tsx
@@ -0,0 +1,101 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Login3Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+    className?: string;
+  };
+  buttonText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  signupText?: string;
+  signupLinkText?: string;
+  signupUrl?: string;
+  className?: string;
+}
+
+const Login3 = ({
+  heading = "ورود",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ورود",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  signupText = "حساب کاربری ندارید؟",
+  signupLinkText = "ثبت‌نام",
+  signupUrl = "/#",
+  className,
+}: Login3Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-background", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 px-6 py-12 text-start">
+            <a href={logo.url}>
+              <img
+                src={logo.src}
+                alt={logo.alt}
+                title={logo.title}
+                className="h-10 dark:invert"
+              />
+            </a>
+            {heading && <h1 className="w-full text-xl font-semibold">{heading}</h1>}
+            <div className="flex w-full flex-col gap-2">
+              <Label>{emailLabel}</Label>
+              <Input
+                type="email"
+                placeholder={emailPlaceholder}
+                className="text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{passwordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={passwordPlaceholder}
+                className="text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              {buttonText}
+            </Button>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {signupLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Login3 };
diff --git a/blocks/login4.tsx b/blocks/login4.tsx
new file mode 100644
index 0000000..bb0edac
--- /dev/null
+++ b/blocks/login4.tsx
@@ -0,0 +1,139 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Login4Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+    className?: string;
+  };
+  buttonText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  githubText?: string;
+  githubIconAlt?: string;
+  facebookText?: string;
+  facebookIconAlt?: string;
+  signupText?: string;
+  signupLinkText?: string;
+  signupUrl?: string;
+  className?: string;
+}
+
+const Login4 = ({
+  heading = "ورود",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ورود",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  googleText = "ورود با گوگل",
+  googleIconAlt = "گوگل",
+  facebookText = "ورود با فیسبوک",
+  facebookIconAlt = "فیسبوک",
+  githubText = "ورود با گیت‌هاب",
+  githubIconAlt = "گیت‌هاب",
+  signupText = "حساب کاربری ندارید؟",
+  signupLinkText = "ثبت‌نام",
+  signupUrl = "/#",
+  className,
+}: Login4Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-background", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 px-6 py-12 text-start">
+            <a href={logo.url}>
+              <img
+                src={logo.src}
+                alt={logo.alt}
+                title={logo.title}
+                className="h-10 dark:invert"
+              />
+            </a>
+            {heading && <h1 className="w-full text-xl font-semibold">{heading}</h1>}
+            <div className="flex w-full flex-col gap-2">
+              <Label>{emailLabel}</Label>
+              <Input
+                type="email"
+                placeholder={emailPlaceholder}
+                className="text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{passwordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={passwordPlaceholder}
+                className="text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              {buttonText}
+            </Button>
+            <div className="flex w-full flex-col gap-2">
+              <Button type="submit" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                  className="size-5"
+                  alt={googleIconAlt}
+                />
+                {googleText}
+              </Button>
+              <Button type="submit" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
+                  className="size-5"
+                  alt={facebookIconAlt}
+                />
+                {facebookText}
+              </Button>
+              <Button type="submit" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/github-icon.svg"
+                  className="size-5"
+                  alt={githubIconAlt}
+                />
+                {githubText}
+              </Button>
+            </div>
+            <div className="flex w-full justify-center gap-1 text-sm text-muted-foreground">
+              <p>{signupText}</p>
+              <a
+                href={signupUrl}
+                className="font-medium text-primary hover:underline"
+              >
+                {signupLinkText}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Login4 };
diff --git a/blocks/login5.tsx b/blocks/login5.tsx
new file mode 100644
index 0000000..f7e6c52
--- /dev/null
+++ b/blocks/login5.tsx
@@ -0,0 +1,139 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Login5Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+    className?: string;
+  };
+  buttonText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  githubText?: string;
+  githubIconAlt?: string;
+  facebookText?: string;
+  facebookIconAlt?: string;
+  signupText?: string;
+  signupLinkText?: string;
+  signupUrl?: string;
+  className?: string;
+}
+
+const Login5 = ({
+  heading = "ورود",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ورود",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  googleText = "ورود با گوگل",
+  googleIconAlt = "گوگل",
+  facebookText = "ورود با فیسبوک",
+  facebookIconAlt = "فیسبوک",
+  githubText = "ورود با گیت‌هاب",
+  githubIconAlt = "گیت‌هاب",
+  signupText = "حساب کاربری ندارید؟",
+  signupLinkText = "ثبت‌نام",
+  signupUrl = "/#",
+  className,
+}: Login5Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-background", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10 dark:invert"
+            />
+          </a>
+          {heading && <h1 className="text-xl font-semibold">{heading}</h1>}
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-lg bg-muted px-6 py-12 text-start">
+            <div className="flex w-full flex-col gap-2">
+              <Label>{emailLabel}</Label>
+              <Input
+                type="email"
+                placeholder={emailPlaceholder}
+                className="bg-background text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{passwordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={passwordPlaceholder}
+                className="bg-background text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              {buttonText}
+            </Button>
+            <div className="flex w-full flex-col gap-2">
+              <Button type="submit" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                  className="size-5"
+                  alt={googleIconAlt}
+                />
+                {googleText}
+              </Button>
+              <Button type="submit" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
+                  className="size-5"
+                  alt={facebookIconAlt}
+                />
+                {facebookText}
+              </Button>
+              <Button type="submit" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/github-icon.svg"
+                  className="size-5"
+                  alt={githubIconAlt}
+                />
+                {githubText}
+              </Button>
+            </div>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {signupLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Login5 };
diff --git a/blocks/login6.tsx b/blocks/login6.tsx
new file mode 100644
index 0000000..90e6912
--- /dev/null
+++ b/blocks/login6.tsx
@@ -0,0 +1,120 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Login6Props {
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+    className?: string;
+  };
+  buttonText?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  dividerText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  signupText?: string;
+  signupLinkText?: string;
+  signupUrl?: string;
+  className?: string;
+}
+
+const Login6 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ورود",
+  googleText = "ورود با گوگل",
+  googleIconAlt = "گوگل",
+  dividerText = "یا",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  signupText = "حساب کاربری ندارید؟",
+  signupLinkText = "ثبت‌نام",
+  signupUrl = "/#",
+  className,
+}: Login6Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-background", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10 dark:invert"
+            />
+          </a>
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-lg border px-6 py-12 text-start">
+            <Button type="button" className="w-full">
+              <img
+                src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                className="ms-2 size-4"
+                alt={googleIconAlt}
+              />
+              {googleText}
+            </Button>
+
+            <div className="relative flex w-full items-center justify-center py-2">
+              <div className="absolute h-px w-full border-t border-border"></div>
+              <span className="relative bg-background px-2 text-xs text-muted-foreground">
+                {dividerText}
+              </span>
+            </div>
+
+            <div className="flex w-full flex-col gap-2">
+              <Label>{emailLabel}</Label>
+              <Input
+                type="email"
+                placeholder={emailPlaceholder}
+                className="bg-background text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{passwordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={passwordPlaceholder}
+                className="bg-background text-start text-sm"
+                dir="rtl"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full" variant="secondary">
+              {buttonText}
+            </Button>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {signupLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Login6 };
diff --git a/blocks/login7.tsx b/blocks/login7.tsx
new file mode 100644
index 0000000..18a1a17
--- /dev/null
+++ b/blocks/login7.tsx
@@ -0,0 +1,125 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Login7Props {
+  className?: string;
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+  };
+  brandName?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  dividerText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  buttonText?: string;
+  signupText?: string;
+  signupLinkText?: string;
+  signupUrl?: string;
+}
+
+const Login7 = ({
+  className,
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  brandName = "نام برند",
+  googleText = "ورود با گوگل",
+  googleIconAlt = "گوگل",
+  dividerText = "یا",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  buttonText = "ورود",
+  signupText = "حساب کاربری ندارید؟",
+  signupLinkText = "ثبت‌نام",
+  signupUrl = "/#",
+}: Login7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-4">
+          <Card className="mx-auto w-full max-w-[380px] text-start">
+            <CardHeader className="items-center justify-center">
+              <a href={logo.url} className="flex items-center gap-2">
+                <img
+                  src={logo.src}
+                  className="max-h-8"
+                  alt={logo.alt}
+                  title={logo.title}
+                />
+                <span className="text-lg font-semibold tracking-tighter">
+                  {brandName}
+                </span>
+              </a>
+            </CardHeader>
+            <CardContent>
+              <div className="grid gap-4">
+                <Button type="button" variant="outline" className="w-full">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                    className="ms-2 size-4"
+                    alt={googleIconAlt}
+                  />
+                  {googleText}
+                </Button>
+                <div className="flex items-center gap-4">
+                  <span className="h-px w-full bg-input"></span>
+                  <span className="text-xs text-muted-foreground">
+                    {dividerText}
+                  </span>
+                  <span className="h-px w-full bg-input"></span>
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="email">{emailLabel}</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder={emailPlaceholder}
+                    className="text-start"
+                    dir="rtl"
+                    required
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="password">{passwordLabel}</Label>
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder={passwordPlaceholder}
+                    className="text-start"
+                    dir="rtl"
+                    required
+                  />
+                </div>
+                <Button type="submit" className="w-full">
+                  {buttonText}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+          <div className="mx-auto flex gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a href={signupUrl} className="font-medium text-primary underline">
+              {signupLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Login7 };
diff --git a/blocks/login9.tsx b/blocks/login9.tsx
new file mode 100644
index 0000000..af106d9
--- /dev/null
+++ b/blocks/login9.tsx
@@ -0,0 +1,132 @@
+import { FaGithub, FaLinkedin } from "react-icons/fa";
+import { FcGoogle } from "react-icons/fc";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Login9Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+    className?: string;
+  };
+  googleText?: string;
+  githubText?: string;
+  linkedInText?: string;
+  emailText?: string;
+  dividerText?: string;
+  signupText?: string;
+  signupLinkText?: string;
+  signupUrl?: string;
+  className?: string;
+}
+
+const Login9 = ({
+  heading = "ورود",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  googleText = "ادامه با گوگل",
+  githubText = "ادامه با گیت‌هاب",
+  linkedInText = "ادامه با لینکدین",
+  emailText = "ادامه با ایمیل",
+  dividerText = "یا",
+  signupText = "حساب کاربری ندارید؟",
+  signupLinkText = "ثبت‌نام",
+  signupUrl = "/#",
+  className,
+}: Login9Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-muted", className)}
+    >
+      <div className="flex h-full flex-col items-center justify-center gap-8">
+        <div className="flex items-center gap-2">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-8 w-8"
+            />
+          </a>
+        </div>
+
+        <div className="flex w-full max-w-sm flex-col items-start gap-y-6 rounded-md border border-muted border-muted-foreground/20 bg-white p-6 text-start">
+          <div className="flex flex-col items-start gap-y-2">
+            {heading && <h1 className="text-xl font-semibold">{heading}</h1>}
+            <div className="text-sm">
+              <span className="text-muted-foreground">{signupText} </span>
+              <a
+                href={signupUrl}
+                className="font-medium text-primary hover:underline"
+              >
+                {signupLinkText}
+              </a>
+            </div>
+          </div>
+
+          <div className="flex w-full flex-col items-center gap-4">
+            <div className="flex w-full flex-col items-center gap-4">
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full justify-center gap-2"
+              >
+                <FcGoogle className="size-4" />
+                {googleText}
+              </Button>
+
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full justify-center gap-2"
+              >
+                <FaGithub className="size-4" />
+                {githubText}
+              </Button>
+
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full justify-center gap-2"
+              >
+                <FaLinkedin className="size-4" />
+                {linkedInText}
+              </Button>
+            </div>
+
+            <div className="relative w-full">
+              <div className="absolute inset-0 flex items-center">
+                <span className="w-full border-t border-muted-foreground/20" />
+              </div>
+              <div className="relative flex justify-center text-xs">
+                <span className="bg-white px-2 text-muted-foreground">
+                  {dividerText}
+                </span>
+              </div>
+            </div>
+
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+            >
+              {emailText}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Login9 };
diff --git a/blocks/logos1.tsx b/blocks/logos1.tsx
new file mode 100644
index 0000000..739acdb
--- /dev/null
+++ b/blocks/logos1.tsx
@@ -0,0 +1,59 @@
+import { cn } from "@/lib/utils";
+
+interface Logos1Props {
+  className?: string;
+}
+
+const Logos1 = ({ className }: Logos1Props) => {
+  const partners = [
+    {
+      name: "Astro",
+      logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+    },
+    {
+      name: "Vercel",
+      logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
+    },
+    {
+      name: "Astro",
+      logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+    },
+    {
+      name: "Supabase",
+      logo: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
+    },
+    {
+      name: "Figma",
+      logo: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
+    },
+  ];
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "container flex flex-wrap items-center justify-between gap-12 py-32",
+        className,
+      )}
+    >
+      <p className="text-start text-lg leading-[140%] tracking-[-0.32px] text-primary">
+        مورد استفاده شرکت‌های پیشرو جهان
+      </p>
+      <div className="flex flex-wrap items-center gap-x-8 gap-y-6 opacity-70 grayscale lg:gap-[60px]">
+        {partners.map((partner, index) => (
+          <img
+            key={index}
+            src={partner.logo}
+            alt={`لوگوی ${partner.name}`}
+            width={109}
+            height={48}
+            className="object-contain"
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Logos1 };
diff --git a/blocks/logos10.tsx b/blocks/logos10.tsx
new file mode 100644
index 0000000..025baa7
--- /dev/null
+++ b/blocks/logos10.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Logos10Props {
+  className?: string;
+}
+
+const Logos10 = ({ className }: Logos10Props) => {
+  const logos = [
+    {
+      id: "logo-1",
+      description: "Logo 1",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-2",
+      description: "Logo 2",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-3",
+      description: "Logo 3",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-4",
+      description: "Logo 4",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-5",
+      description: "Logo 5",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-6",
+      description: "Logo 6",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto dark:invert",
+    },
+    {
+      id: "logo-7",
+      description: "Logo 7",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-8",
+      description: "Logo 8",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container mx-auto">
+        <h2 className="mb-8 max-w-4xl text-xl font-medium tracking-tighter text-foreground md:text-2xll lg:mb-16">
+          Our blocks are used by the world's best product teams.
+        </h2>
+        <div className="relative flex items-center justify-center">
+          <Carousel
+            opts={{ loop: true }}
+            plugins={[AutoScroll({ playOnInit: true })]}
+          >
+            <CarouselContent className="ml-0">
+              {logos.map((logo, index) => (
+                <CarouselItem
+                  key={logo.id}
+                  className="relative flex h-35 basis-1/2 justify-center border border-r-0 border-border pl-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/6"
+                >
+                  <div className="flex flex-col items-center justify-center lg:mx-10">
+                    <p className="absolute top-2 left-2 text-xs tracking-tighter">
+                      {(index + 1).toString().padStart(2, "0")}
+                    </p>
+                    <img
+                      src={logo.image}
+                      alt={logo.description}
+                      className={logo.className}
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="absolute inset-y-0 left-0 w-32 bg-linear-to-r from-background to-transparent"></div>
+          <div className="absolute inset-y-0 right-0 w-32 bg-linear-to-l from-background to-transparent"></div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos10 };
diff --git a/blocks/logos11.tsx b/blocks/logos11.tsx
new file mode 100644
index 0000000..a19cc99
--- /dev/null
+++ b/blocks/logos11.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const bgPattern = {
+  backgroundImage:
+    "linear-gradient(135deg, var(--muted) 25%, transparent 25.5%, transparent 50%, var(--muted) 50.5%, var(--muted) 75%, transparent 75.5%, transparent)",
+  backgroundSize: "10px 10px",
+};
+
+interface Logos11Props {
+  className?: string;
+}
+
+const Logos11 = ({ className }: Logos11Props) => {
+  const logos = [
+    {
+      id: "logo-1",
+      description: "لوگوی ۱",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-2",
+      fill: true,
+      description: "لوگوی ۲",
+      image:
+        "/block-media/shadcnblocks/block/guri3/arc-white.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-3",
+      description: "لوگوی ۳",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-4",
+      description: "لوگوی ۴",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-5",
+      description: "لوگوی ۵",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-6",
+      description: "لوگوی ۶",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto",
+    },
+    {
+      id: "logo-7",
+      description: "لوگوی ۷",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-8",
+      description: "لوگوی ۸",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      className: "h-7 w-auto",
+    },
+  ];
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative grid w-screen overflow-hidden py-32", className)}
+    >
+      <div className="relative z-10 container h-full items-center justify-center gap-6">
+        <div className="relative flex h-20 w-full items-center justify-center border border-x-0">
+          <h1 className="text-3xl font-medium tracking-tighter md:text-xl">
+            با حمایت بهترین‌ها
+          </h1>
+          <BgPattern />
+        </div>
+        <div className="w-full py-20">
+          <Carousel
+            opts={{ loop: true, align: "start", direction: "rtl" }}
+            plugins={[AutoScroll({ playOnInit: true })]}
+          >
+            <CarouselContent className="ms-0">
+              {logos.map((logo) => (
+                <CarouselItem
+                  key={logo.id}
+                  className={cn(
+                    "relative flex h-35 basis-1/2 justify-center border border-t-0 border-e-0 border-border ps-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/6",
+                    logo.fill && "bg-orange-500",
+                  )}
+                >
+                  <div className="flex flex-col items-center justify-center lg:mx-10">
+                    <img
+                      src={logo.image}
+                      alt={logo.description}
+                      className={logo.className}
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <Carousel
+            opts={{ loop: true, align: "end", direction: "rtl" }}
+            plugins={[AutoScroll({ playOnInit: true })]}
+          >
+            <CarouselContent className="ms-0">
+              {logos.map((logo) => (
+                <CarouselItem
+                  key={logo.id}
+                  className={cn(
+                    "relative flex h-35 basis-1/2 justify-center border border-t-0 border-e-0 border-b-0 border-border ps-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/6",
+                    logo.fill && "bg-orange-500",
+                  )}
+                >
+                  <div className="flex flex-col items-center justify-center lg:mx-10">
+                    <img
+                      src={logo.image}
+                      alt={logo.description}
+                      className={logo.className}
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+        <div className="relative flex h-20 w-full items-center justify-center border border-x-0">
+          <Button className="h-12 rounded-none px-8!">همین الان شروع کنید</Button>
+          <Button
+            variant="ghost"
+            className="flex h-12 items-center gap-3 rounded-none px-8!"
+          >
+            نحوه کار
+            <PlayIcon className="rtl:rotate-180" />
+          </Button>
+          <BgPattern sideLines={false} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos11 };
+
+const PlayIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      width="15"
+      height="18"
+      viewBox="0 0 15 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M1.11523 3.94458C1.11523 2.36225 2.86573 1.40657 4.19675 2.26222L12.4982 7.59889C13.7229 8.38617 13.7229 10.1763 12.4982 10.9636L4.19675 16.3003C2.86573 17.1559 1.11523 16.2003 1.11523 14.6179V3.94458Z"
+        fill="black"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const BgPattern = ({ sideLines = true }: { sideLines?: boolean }) => {
+  return (
+    <>
+      {/* bg pattern left */}
+      <div
+        className="absolute top-1/2 left-0 z-20 size-20 -translate-x-full -translate-y-1/2 border border-e-0"
+        style={bgPattern}
+      >
+        <span className="absolute -top-1 -end-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -end-1 -bottom-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -bottom-1 -start-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -top-1 -start-1 z-20 size-2 bg-foreground" />
+      </div>
+
+      {/* bg pattern right */}
+      <div
+        className="absolute top-1/2 right-0 z-20 size-20 translate-x-full -translate-y-1/2 border border-s-0"
+        style={bgPattern}
+      >
+        <span className="absolute -top-1 -end-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -end-1 -bottom-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -bottom-1 -start-1 z-20 size-2 bg-foreground" />
+        <span className="absolute -top-1 -start-1 z-20 size-2 bg-foreground" />
+      </div>
+
+      {/* bg Lines left */}
+      {sideLines && (
+        <div className="absolute left-0 z-10 h-[200vh] w-px border-s" />
+      )}
+      {sideLines && (
+        <div className="absolute -left-20 z-10 h-[200vh] w-px border-s" />
+      )}
+
+      {/* bg Lines right */}
+      {sideLines && (
+        <div className="absolute right-0 z-10 h-[200vh] w-px border-s" />
+      )}
+      {sideLines && (
+        <div className="absolute -right-20 z-10 h-[200vh] w-px border-s" />
+      )}
+    </>
+  );
+};
diff --git a/blocks/logos12.tsx b/blocks/logos12.tsx
new file mode 100644
index 0000000..2350ef6
--- /dev/null
+++ b/blocks/logos12.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Logos12Props {
+  className?: string;
+}
+
+const Logos12 = ({ className }: Logos12Props) => {
+  const logos = [
+    {
+      id: "logo-1",
+      description: "لوگوی ۱",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-2",
+      description: "لوگوی ۲",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-3",
+      description: "لوگوی ۳",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-4",
+      description: "لوگوی ۴",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-5",
+      description: "لوگوی ۵",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-6",
+      description: "لوگوی ۶",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto dark:invert",
+    },
+    {
+      id: "logo-7",
+      description: "لوگوی ۷",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-8",
+      description: "لوگوی ۸",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative mx-auto flex items-center justify-center pt-8">
+          <Carousel
+            opts={{ loop: true, direction: "rtl", align: "start" }}
+            plugins={[AutoScroll({ playOnInit: true })]}
+          >
+            <CarouselContent className="ms-0">
+              {logos.map((logo) => (
+                <CarouselItem
+                  key={logo.id}
+                  className="relative mx-4 flex h-25 basis-1/2 justify-center border-y border-border ps-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/7"
+                >
+                  <div className="flex flex-col items-center justify-center lg:mx-10">
+                    <img
+                      src={logo.image}
+                      alt={logo.description}
+                      className={logo.className}
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="absolute inset-y-0 start-0 w-32 bg-linear-to-l from-background to-transparent" />
+          <div className="absolute inset-y-0 end-0 w-32 bg-linear-to-r from-background to-transparent" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos12 };
diff --git a/blocks/logos13.tsx b/blocks/logos13.tsx
new file mode 100644
index 0000000..55e6d1b
--- /dev/null
+++ b/blocks/logos13.tsx
@@ -0,0 +1,87 @@
+import { cn } from "@/lib/utils";
+
+interface Logos13Props {
+  className?: string;
+}
+
+const Logos13 = ({ className }: Logos13Props) => {
+  const logos = [
+    {
+      id: "logo-1",
+      description: "۲۲۱",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-2",
+      description: "۲۲۲",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-3",
+      description: "۲۲۳",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-4",
+      description: "۲۲۴",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-5",
+      description: "۲۲۵",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto dark:invert",
+    },
+    {
+      id: "logo-6",
+      description: "۲۲۶",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto dark:invert",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-20 lg:grid-cols-6">
+          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 py-8 text-start lg:sticky">
+            <span className="size-3 bg-orange-500" />
+            <p className="text-xl text-foreground/30 lg:text-xl">شرکای ما</p>
+          </div>
+          <ul className="col-span-4 grid w-full grid-cols-2 gap-2 lg:grid-cols-3">
+            {logos.map((logo, index) => (
+              <li
+                key={index}
+                className="relative flex h-72 items-center justify-center rounded-2xl bg-muted"
+              >
+                <div className="">
+                  <img
+                    src={logo.image}
+                    alt={`لوگوی شریک سال ${logo.description}`}
+                    className={logo.className}
+                  />
+                </div>
+
+                <p className="absolute bottom-4 start-4 font-mono text-sm tracking-tight text-foreground/40">
+                  {logo.description}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos13 };
diff --git a/blocks/logos17.tsx b/blocks/logos17.tsx
new file mode 100644
index 0000000..fdc742c
--- /dev/null
+++ b/blocks/logos17.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import Marquee from "react-fast-marquee";
+
+import { cn } from "@/lib/utils";
+
+interface Company {
+  name: string;
+  logo: string;
+  href?: string;
+}
+
+interface Logos17Props {
+  heading?: string;
+  subheading?: string;
+  topRowCompanies?: Company[];
+  bottomRowCompanies?: Company[];
+  className?: string;
+}
+
+const Logos17 = ({
+  heading = "پشتوانه بهترین تیم‌های محصول جهان.",
+  subheading = "از استارتاپ‌های نسل جدید تا شرکت‌های تثبیت‌شده.",
+  topRowCompanies = [
+    {
+      name: "Mercury",
+      logo: "/block-media/shadcnblocks/block/logos/mercury.svg",
+      href: "#",
+    },
+    {
+      name: "Watershed",
+      logo: "/block-media/shadcnblocks/block/logos/watershed.svg",
+      href: "#",
+    },
+    {
+      name: "Retool",
+      logo: "/block-media/shadcnblocks/block/logos/retool.svg",
+      href: "#",
+    },
+    {
+      name: "Descript",
+      logo: "/block-media/shadcnblocks/block/logos/descript.svg",
+      href: "#",
+    },
+  ],
+  bottomRowCompanies = [
+    {
+      name: "Perplexity",
+      logo: "/block-media/shadcnblocks/block/logos/perplexity.svg",
+      href: "#",
+    },
+    {
+      name: "Monzo",
+      logo: "/block-media/shadcnblocks/block/logos/monzo.svg",
+      href: "#",
+    },
+    {
+      name: "Ramp",
+      logo: "/block-media/shadcnblocks/block/logos/ramp.svg",
+      href: "#",
+    },
+    {
+      name: "Raycast",
+      logo: "/block-media/shadcnblocks/block/logos/raycast.svg",
+      href: "#",
+    },
+    {
+      name: "Arc",
+      logo: "/block-media/shadcnblocks/block/logos/arc.svg",
+      href: "#",
+    },
+  ],
+  className,
+}: Logos17Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden pb-28 lg:pb-32", className)}
+    >
+      <div className="container space-y-10 lg:space-y-16">
+        <div className="text-center">
+          <h2 className="mb-4 text-xl text-balance md:text-xl lg:text-3xl">
+            {heading}
+            <br className="max-md:hidden" />
+            <span className="text-muted-foreground">{subheading}</span>
+          </h2>
+        </div>
+
+        <div className="flex w-full flex-col items-center gap-8">
+          {/* Top row - 4 logos */}
+          <LogoRow
+            companies={topRowCompanies}
+            gridClassName="grid-cols-4"
+            direction="right"
+          />
+
+          {/* Bottom row - 5 logos */}
+          <LogoRow
+            companies={bottomRowCompanies}
+            gridClassName="grid-cols-5"
+            direction="left"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+interface LogoRowProps {
+  companies: Company[];
+  gridClassName: string;
+  direction?: "left" | "right";
+}
+
+const LogoRow = ({ companies, gridClassName, direction }: LogoRowProps) => {
+  return (
+    <>
+      {/* Desktop static version */}
+      <div className="hidden md:block">
+        <div
+          className={cn(
+            "grid items-center justify-items-center gap-x-20 lg:gap-x-28",
+            gridClassName,
+          )}
+        >
+          {companies.map((company, index) => (
+            <a href={company.href || "#"} target="_blank" key={company.logo}>
+              <img
+                src={company.logo}
+                alt={`لوگوی ${company.name}`}
+                className="h-8 w-auto object-contain opacity-50 transition-opacity hover:opacity-70 dark:invert"
+              />
+            </a>
+          ))}
+        </div>
+      </div>
+
+      {/* Mobile marquee version */}
+      <div className="md:hidden">
+        <Marquee direction={direction} pauseOnHover>
+          {companies.map((company, index) => (
+            <a
+              href={company.href || "#"}
+              target="_blank"
+              key={company.logo}
+              className="mx-8 inline-block transition-opacity hover:opacity-70"
+            >
+              <img
+                src={company.logo}
+                alt={`لوگوی ${company.name}`}
+                className="h-8 w-auto object-contain"
+              />
+            </a>
+          ))}
+        </Marquee>
+      </div>
+    </>
+  );
+};
+
+export { Logos17 };
diff --git a/blocks/logos2.tsx b/blocks/logos2.tsx
new file mode 100644
index 0000000..44d9a2c
--- /dev/null
+++ b/blocks/logos2.tsx
@@ -0,0 +1,89 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const logos = [
+  {
+    id: "logo-1",
+    description: "لوگوی ۱",
+    image:
+      "/block-media/shadcnblocks/block/block-1.svg",
+  },
+  {
+    id: "logo-2",
+    description: "لوگوی ۲",
+    image:
+      "/block-media/shadcnblocks/block/block-2.svg",
+  },
+  {
+    id: "logo-3",
+    description: "لوگوی ۳",
+    image:
+      "/block-media/shadcnblocks/block/block-3.svg",
+  },
+  {
+    id: "logo-4",
+    description: "لوگوی ۴",
+    image:
+      "/block-media/shadcnblocks/block/block-4.svg",
+  },
+  {
+    id: "logo-5",
+    description: "لوگوی ۵",
+    image:
+      "/block-media/shadcnblocks/block/block-5.svg",
+  },
+  {
+    id: "logo-6",
+    description: "لوگوی ۶",
+    image:
+      "/block-media/shadcnblocks/block/block-6.svg",
+  },
+];
+
+interface Logos2Props {
+  className?: string;
+}
+
+const Logos2 = ({ className }: Logos2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid overflow-hidden rounded-xl border border-border md:grid-cols-2">
+          <div className="my-auto px-6 py-10 sm:px-10 sm:py-12 lg:p-16">
+            <div className="w-full text-start md:max-w-md">
+              <h2 className="mb-4 text-xl font-semibold lg:text-3xl">
+                گواهی‌های ما گویای همه چیز است
+              </h2>
+              <p className="mb-6 text-lg">
+                کیفیت و استاندارد در هر مرحله برای ما اهمیت دارد. گواهینامه‌های
+                معتبر نشان‌دهنده تعهد ما به ارائه خدمات قابل اعتماد است.
+              </p>
+              <Button className="w-full md:w-fit">
+                تماس بگیرید
+                <ArrowRight className="ms-2 size-5 rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+          <div className="grid grid-cols-3 border-t border-border md:border-s md:border-t-0">
+            {logos.map((logo) => (
+              <div
+                key={logo.id}
+                className="-mb-px flex items-center justify-center border-e border-b border-border p-5 nth-[3n]:border-e-0 sm:p-6"
+              >
+                <img
+                  src={logo.image}
+                  alt={logo.description}
+                  className="size-12 object-cover object-center sm:size-16 lg:size-24"
+                ></img>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos2 };
diff --git a/blocks/logos3.tsx b/blocks/logos3.tsx
new file mode 100644
index 0000000..27d1e6e
--- /dev/null
+++ b/blocks/logos3.tsx
@@ -0,0 +1,131 @@
+// This template requires the Embla Auto Scroll plugin to be installed:
+//
+// npm install embla-carousel-auto-scroll
+
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Logo {
+  id: string;
+  description: string;
+  image: string;
+  className?: string;
+}
+
+interface Logos3Props {
+  heading?: string;
+  logos?: Logo[];
+  className?: string;
+}
+
+const Logos3 = ({
+  heading = "مورد اعتماد شرکت‌های پیشرو",
+  logos = [
+    {
+      id: "logo-1",
+      description: "لوگوی ۱",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-2",
+      description: "لوگوی ۲",
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-3",
+      description: "لوگوی ۳",
+      image:
+        "/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-4",
+      description: "لوگوی ۴",
+      image:
+        "/block-media/shadcnblocks/block/logos/react-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-5",
+      description: "لوگوی ۵",
+      image:
+        "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-6",
+      description: "لوگوی ۶",
+      image:
+        "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-7",
+      description: "لوگوی ۷",
+      image:
+        "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
+      className: "h-4 w-auto",
+    },
+    {
+      id: "logo-8",
+      description: "لوگوی ۸",
+      image:
+        "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+  ],
+  className,
+}: Logos3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-64", className)}>
+      <div className="container flex flex-col items-center text-center">
+        <h1 className="my-6 text-xl font-bold text-pretty lg:text-xl">
+          {heading}
+        </h1>
+      </div>
+      <div className="pt-10 md:pt-16 lg:pt-20">
+        <div className="relative mx-auto flex items-center justify-center lg:max-w-5xl">
+          <Carousel
+            opts={{ loop: true, direction: "rtl", align: "start" }}
+            plugins={[AutoScroll({ playOnInit: true })]}
+          >
+            <CarouselContent className="ms-0">
+              {logos.map((logo) => (
+                <CarouselItem
+                  key={logo.id}
+                  className="flex basis-1/3 justify-center ps-0 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
+                >
+                  <div className="mx-10 flex shrink-0 items-center justify-center">
+                    <div>
+                      <img
+                        src={logo.image}
+                        alt={logo.description}
+                        className={logo.className}
+                      />
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="absolute inset-y-0 start-0 w-12 bg-linear-to-l from-background to-transparent" />
+          <div className="absolute inset-y-0 end-0 w-12 bg-linear-to-r from-background to-transparent" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos3 };
diff --git a/blocks/logos4.tsx b/blocks/logos4.tsx
new file mode 100644
index 0000000..01696c3
--- /dev/null
+++ b/blocks/logos4.tsx
@@ -0,0 +1,76 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const logos = [
+  {
+    name: "Astro",
+    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+  },
+  {
+    name: "Vercel",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
+  },
+  {
+    name: "Supabase",
+    logo: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
+  },
+  {
+    name: "Figma",
+    logo: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
+  },
+  {
+    name: "Astro",
+    logo: "/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg",
+  },
+  {
+    name: "Vercel",
+    logo: "/block-media/shadcnblocks/block/logos/github-wordmark.svg",
+  },
+  {
+    name: "Astro",
+    logo: "/block-media/shadcnblocks/block/logos/sketch-wordmark.svg",
+  },
+  {
+    name: "Supabase",
+    logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
+  },
+];
+
+interface Logos4Props {
+  className?: string;
+}
+
+const Logos4 = ({ className }: Logos4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <Badge variant="outline">شرکای معرفی</Badge>
+          <h1 className="mx-auto mt-8 mb-5 max-w-3xl text-xl font-bold text-balance md:text-2xll">
+            به شبکه شرکای ما بپیوندید. با ما رشد کنید.
+          </h1>
+          <p className="mx-auto max-w-3xl text-xl font-medium text-balance">
+            با شرکت‌های پیشرو صنعت همکاری کنید، فرصت‌های جدید باز کنید و
+            رشد کسب‌وکار خود را سرعت ببخشید.
+          </p>
+          <Button size="lg" className="mt-8">شریک ما شوید</Button>
+        </div>
+      </div>
+      <div className="mx-auto mt-24 grid max-w-5xl grid-cols-2 place-items-center gap-x-4 gap-y-6 md:grid-cols-3 lg:grid-cols-4 lg:gap-6">
+        {logos.map((logo) => (
+          <img
+            className="grayscale"
+            src={logo.logo}
+            key={logo.logo}
+            alt={`لوگوی ${logo.name}`}
+            width={144}
+            height={80}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Logos4 };
diff --git a/blocks/logos5.tsx b/blocks/logos5.tsx
new file mode 100644
index 0000000..541502f
--- /dev/null
+++ b/blocks/logos5.tsx
@@ -0,0 +1,126 @@
+import { cn } from "@/lib/utils";
+
+interface Logos5Props {
+  className?: string;
+}
+
+const Logos5 = ({ className }: Logos5Props) => {
+  const topRowCompanies = [
+    {
+      name: "Mercury",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/mercury.svg",
+      width: 143,
+      height: 26,
+      href: "https://mercury.com",
+    },
+    {
+      name: "Watershed",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/watershed.svg",
+      width: 154,
+      height: 31,
+      href: "https://watershed.com",
+    },
+    {
+      name: "Retool",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/retool.svg",
+      width: 113,
+      height: 22,
+      href: "https://retool.com",
+    },
+    {
+      name: "Descript",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/descript.svg",
+      width: 112,
+      height: 27,
+      href: "https://descript.com",
+    },
+  ];
+
+  const bottomRowCompanies = [
+    {
+      name: "Perplexity",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/perplexity.svg",
+      width: 141,
+      height: 32,
+      href: "https://perplexity.com",
+    },
+    {
+      name: "Monzo",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/monzo.svg",
+      width: 104,
+      height: 18,
+      href: "https://monzo.com",
+    },
+    {
+      name: "Ramp",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/ramp.svg",
+      width: 105,
+      height: 28,
+      href: "https://ramp.com",
+    },
+    {
+      name: "Raycast",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/raycast.svg",
+      width: 128,
+      height: 33,
+      href: "https://raycast.com",
+    },
+    {
+      name: "Arc",
+      logo: "/block-media/shadcnblocks/block/mainline/logos/arc.svg",
+      width: 90,
+      height: 28,
+      href: "https://arc.com",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container space-y-10 lg:space-y-16">
+        <div className="text-center">
+          <h2 className="mb-4 text-xl font-bold text-balance md:text-xl lg:text-3xl">
+            پشتوانه بهترین تیم‌های محصول جهان.
+            <br className="max-md:hidden" />
+            <span className="text-muted-foreground">
+              از استارتاپ‌های نسل جدید تا شرکت‌های تثبیت‌شده.
+            </span>
+          </h2>
+        </div>
+
+        <div className="flex w-full flex-col items-center gap-8">
+          {/* Top row - 4 logos */}
+          <div className="grid grid-cols-2 items-center justify-items-center gap-x-12 gap-y-8 max-md:w-full sm:grid-cols-4 md:gap-x-20 lg:gap-x-28">
+            {topRowCompanies.map((company, index) => (
+              <a href={company.href} target="_blank" key={index}>
+                <img
+                  src={company.logo}
+                  alt={`لوگوی ${company.name}`}
+                  width={company.width}
+                  height={company.height}
+                  className="object-contain transition-opacity hover:opacity-70"
+                />
+              </a>
+            ))}
+          </div>
+
+          {/* Bottom row - 5 logos */}
+          <div className="grid grid-cols-2 items-center justify-items-center gap-x-12 gap-y-8 max-md:w-full sm:grid-cols-5 md:gap-x-20 lg:gap-x-28">
+            {bottomRowCompanies.map((company, index) => (
+              <a href={company.href} target="_blank" key={index}>
+                <img
+                  src={company.logo}
+                  alt={`لوگوی ${company.name}`}
+                  width={company.width}
+                  height={company.height}
+                  className="object-contain transition-opacity hover:opacity-70"
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos5 };
diff --git a/blocks/logos7.tsx b/blocks/logos7.tsx
new file mode 100644
index 0000000..8517208
--- /dev/null
+++ b/blocks/logos7.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+const ITEMS = [
+  {
+    name: "Mercury",
+    src: "/block-media/shadcnblocks/block/mainline/logos/mercury.svg",
+    width: 143,
+    height: 26,
+    href: "https://mercury.com",
+  },
+  {
+    name: "Watershed",
+    src: "/block-media/shadcnblocks/block/mainline/logos/watershed.svg",
+    width: 154,
+    height: 31,
+    href: "https://watershed.com",
+  },
+  {
+    name: "Retool",
+    src: "/block-media/shadcnblocks/block/mainline/logos/retool.svg",
+    width: 113,
+    height: 22,
+    href: "https://retool.com",
+  },
+  {
+    name: "Descript",
+    src: "/block-media/shadcnblocks/block/mainline/logos/descript.svg",
+    width: 112,
+    height: 27,
+    href: "https://descript.com",
+  },
+  {
+    name: "Perplexity",
+    src: "/block-media/shadcnblocks/block/mainline/logos/perplexity.svg",
+    width: 141,
+    height: 32,
+    href: "https://perplexity.ai",
+  },
+  {
+    name: "Monzo",
+    src: "/block-media/shadcnblocks/block/mainline/logos/monzo.svg",
+    width: 104,
+    height: 18,
+    href: "https://monzo.com",
+  },
+  {
+    name: "Ramp",
+    src: "/block-media/shadcnblocks/block/mainline/logos/ramp.svg",
+    width: 105,
+    height: 28,
+    href: "https://ramp.com",
+  },
+  {
+    name: "Raycast",
+    src: "/block-media/shadcnblocks/block/mainline/logos/raycast.svg",
+    width: 128,
+    height: 33,
+    href: "https://raycast.com",
+  },
+  {
+    name: "Arc",
+    src: "/block-media/shadcnblocks/block/mainline/logos/arc.svg",
+    width: 90,
+    height: 28,
+    href: "https://arc.com",
+  },
+];
+
+interface Logos7Props {
+  className?: string;
+}
+
+const Logos7 = ({ className }: Logos7Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden bg-muted py-32 dark:bg-muted", className)}
+    >
+      <div className="container text-center">
+        <h2 className="text-xl font-semibold tracking-tight text-balance lg:text-3xl">
+          پشتوانه بهترین تیم‌های محصول جهان.
+          <br />
+          <span className="text-muted-foreground">
+            از استارتاپ‌های نسل جدید تا شرکت‌های تثبیت‌شده.
+          </span>
+        </h2>
+      </div>
+
+      <div className="relative mt-10">
+        <div className="flex w-full">
+          {/* First marquee group */}
+          <div
+            className="flex shrink-0 animate-marquee items-center gap-12 rtl:[animation-direction:reverse]"
+          >
+            {ITEMS.map((logo, index) => (
+              <a href={logo.href} target="_blank" key={index} className="p-6">
+                <img
+                  src={logo.src}
+                  alt={`لوگوی ${logo.name}`}
+                  width={logo.width}
+                  height={logo.height}
+                  className="object-contain transition-opacity hover:opacity-70"
+                />
+              </a>
+            ))}
+          </div>
+          {/* Second marquee group */}
+          <div
+            className="flex shrink-0 animate-marquee items-center gap-12 rtl:[animation-direction:reverse]"
+          >
+            {ITEMS.map((logo, index) => (
+              <a href={logo.href} target="_blank" key={index} className="p-6">
+                <img
+                  src={logo.src}
+                  alt={`لوگوی ${logo.name}`}
+                  width={logo.width}
+                  height={logo.height}
+                  className="object-contain transition-opacity hover:opacity-70"
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos7 };
diff --git a/blocks/logos8.tsx b/blocks/logos8.tsx
new file mode 100644
index 0000000..a8f698e
--- /dev/null
+++ b/blocks/logos8.tsx
@@ -0,0 +1,72 @@
+import { cn } from "@/lib/utils";
+
+interface Logo {
+  name: string;
+  logo: string;
+  className: string;
+}
+
+interface Logos8Props {
+  title?: string;
+  subtitle?: string;
+  logos?: Logo[];
+  className?: string;
+}
+
+const Logos8 = ({
+  title = "مورد اعتماد شرکت‌های پیشرو",
+  subtitle = "مورد استفاده شرکت‌های پیشرو جهان",
+  logos = [
+    {
+      name: "Vercel",
+      logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      name: "Astro",
+      logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
+      className: "h-5 w-auto",
+    },
+    {
+      name: "Supabase",
+      logo: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
+      className: "h-6 w-auto",
+    },
+    {
+      name: "Figma",
+      logo: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
+      className: "h-5 w-auto",
+    },
+    {
+      name: "Astro",
+      logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-6 w-auto",
+    },
+  ],
+  className,
+}: Logos8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center text-center">
+          <h2 className="text-3xl font-bold">{title}</h2>
+          <p className="mt-1 text-muted-foreground">{subtitle}</p>
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-6 lg:gap-12">
+            {logos.map((logo, index) => (
+              <img
+                key={index}
+                src={logo.logo}
+                alt={`لوگوی ${logo.name}`}
+                width={109}
+                height={48}
+                className={logo.className}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Logos8 };
diff --git a/blocks/logos9.tsx b/blocks/logos9.tsx
new file mode 100644
index 0000000..78c9d3f
--- /dev/null
+++ b/blocks/logos9.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Logos9Props {
+  className?: string;
+}
+
+const Logos9 = ({ className }: Logos9Props) => {
+  const logos = [
+    {
+      id: "logo-1",
+      description: "لوگوی ۱",
+      image:
+        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-2",
+      description: "لوگوی ۲",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-3",
+      description: "لوگوی ۳",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-4",
+      description: "لوگوی ۴",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-5",
+      description: "لوگوی ۵",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-6",
+      description: "لوگوی ۶",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+      className: "h-5 w-auto",
+    },
+    {
+      id: "logo-7",
+      description: "لوگوی ۷",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+      className: "h-7 w-auto",
+    },
+    {
+      id: "logo-8",
+      description: "لوگوی ۸",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+      className: "h-7 w-auto",
+    },
+  ];
+  const testimonials = [
+    {
+      quote:
+        "قابلیت‌های جستجوی هوش مصنوعی اشتراک‌گذاری دانش تیم ما را متحول کرد. واقعاً بازی‌ساز بهره‌وری است.",
+      name: "مرکوری، مدیر مالی",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+    },
+    {
+      quote:
+        "کامپوننت‌های منظم و مستندات عالی ساعت‌های بی‌شماری برای ما ذخیره کرد و سازگاری را حفظ کرد.",
+      name: "پرپلکسیتی، سرپرست یادگیری ماشین",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
+    },
+    {
+      quote:
+        "گزینه‌های سفارشی‌سازی عالی  ظاهری منحصربه‌فرد ساختیم و در عین حال قابلیت اطمینان آزموده را حفظ کردیم.",
+      name: "رتول، مدیر محصول",
+      image:
+        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
+    },
+  ];
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center text-center">
+        <h1 className="my-6 text-lg font-semibold tracking-tight text-foreground">
+          بهترین تیم‌های محصول جهان از بلاک‌های ما استفاده می‌کنند
+        </h1>
+      </div>
+
+      <div className="relative mx-auto flex items-center justify-center pt-8 lg:max-w-5xl">
+        <Carousel
+          opts={{ loop: true, direction: "rtl", align: "start" }}
+          plugins={[AutoScroll({ playOnInit: true })]}
+        >
+          <CarouselContent className="ms-0">
+            {logos.map((logo) => (
+              <CarouselItem
+                key={logo.id}
+                className="flex basis-1/3 justify-center ps-0 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
+              >
+                <div className="flex shrink-0 items-center justify-center lg:mx-10">
+                  <div>
+                    <img
+                      src={logo.image}
+                      alt={logo.description}
+                      className={logo.className}
+                    />
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        <div className="absolute inset-y-0 start-0 w-12 bg-linear-to-l from-background to-transparent" />
+        <div className="absolute inset-y-0 end-0 w-12 bg-linear-to-r from-background to-transparent" />
+      </div>
+      <Separator className="mx-auto my-15 max-w-5xl" />
+
+      <div>
+        <Carousel
+          opts={{ loop: true, direction: "rtl", align: "start" }}
+          className="mx-auto w-full max-w-6xl"
+        >
+          <CarouselContent>
+            {testimonials.map((testimonial, index) => (
+              <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+                <div
+                  className={cn(
+                    "relative w-full border-e border-border px-12 text-center md:px-8 md:text-start",
+                    index == 0 && "lg:border-s",
+                  )}
+                  key={index}
+                >
+                  <h5 className="mt-5 mb-14 line-clamp-3 text-lg tracking-tight text-muted-foreground md:mb-28">
+                    {testimonial.quote}
+                  </h5>
+                  <div className="mt-auto">
+                    <p className="text-lg font-semibold tracking-tight text-foreground">
+                      {testimonial.name}
+                    </p>
+                    <img
+                      className="mx-auto my-5 w-40 md:mx-0"
+                      alt="لوگوی شرکت"
+                      src={testimonial.image}
+                    />
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Logos9 };
diff --git a/blocks/navbar1.tsx b/blocks/navbar1.tsx
new file mode 100644
index 0000000..e1fbecf
--- /dev/null
+++ b/blocks/navbar1.tsx
@@ -0,0 +1,312 @@
+"use client";
+
+import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface MenuItem {
+  title: string;
+  url: string;
+  description?: string;
+  icon?: React.ReactNode;
+  items?: MenuItem[];
+}
+
+interface Navbar1Props {
+  className?: string;
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+    className?: string;
+  };
+  menu?: MenuItem[];
+  auth?: {
+    login: {
+      title: string;
+      url: string;
+    };
+    signup: {
+      title: string;
+      url: string;
+    };
+  };
+}
+
+const Navbar1 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "شادسی‌ان‌بلاکز",
+  },
+  menu = [
+    { title: "خانه", url: "#" },
+    {
+      title: "محصولات",
+      url: "#",
+      items: [
+        {
+          title: "وبلاگ",
+          description: "آخرین اخبار، به‌روزرسانی‌ها و اطلاعات صنعت",
+          icon: <Book className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "شرکت",
+          description: "مأموریت ما نوآوری و توانمندسازی جهان است",
+          icon: <Trees className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "فرصت‌های شغلی",
+          description: "فرصت‌های شغلی و فضای کاری ما",
+          icon: <Sunset className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "پشتیبانی",
+          description: "با تیم پشتیبانی تماس بگیرید یا به انجمن بروید",
+          icon: <Zap className="size-5 shrink-0" />,
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "منابع",
+      url: "#",
+      items: [
+        {
+          title: "راهنمای کاربران",
+          description: "همه پاسخ‌های موردنیاز اینجاست",
+          icon: <Zap className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "تماس با ما",
+          description: "برای هر سؤالی در کنار شما هستیم",
+          icon: <Sunset className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "وضعیت سرویس",
+          description: "وضعیت فعلی سرویس‌ها و اتصال هوشمند",
+          icon: <Trees className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "شرایط استفاده",
+          description: "قوانین و شرایط استفاده از خدمات",
+          icon: <Book className="size-5 shrink-0" />,
+          url: "#",
+        },
+      ],
+    },
+    { title: "قیمت‌گذاری", url: "#" },
+    { title: "وبلاگ", url: "#" },
+  ],
+  auth = {
+    login: { title: "ورود", url: "#" },
+    signup: { title: "ثبت‌نام", url: "#" },
+  },
+  className,
+}: Navbar1Props) => {
+  return (
+    <section lang="fa" className={cn("py-4 text-start", className)}>
+      <div className="container">
+        <nav className="hidden items-center justify-between lg:flex">
+          <div className="flex items-center gap-6">
+            <a href={logo.url} className="flex items-center gap-2">
+              <img
+                src={logo.src}
+                className="max-h-8 dark:invert"
+                alt={logo.alt}
+              />
+              <span className="text-lg font-semibold tracking-tighter">
+                {logo.title}
+              </span>
+            </a>
+            <NavigationMenu
+              dir="rtl"
+              viewport={false}
+              className="relative z-50"
+            >
+              <NavigationMenuList>
+                {menu.map((item) => renderMenuItem(item))}
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
+          <div className="flex gap-2">
+            <Button asChild variant="outline" size="sm">
+              <a href={auth.login.url}>{auth.login.title}</a>
+            </Button>
+            <Button asChild size="sm">
+              <a href={auth.signup.url}>{auth.signup.title}</a>
+            </Button>
+          </div>
+        </nav>
+
+        <div className="block lg:hidden">
+          <div className="flex items-center justify-between">
+            <a href={logo.url} className="flex items-center gap-2">
+              <img
+                src={logo.src}
+                className="max-h-8 dark:invert"
+                alt={logo.alt}
+              />
+            </a>
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  aria-label="باز کردن منو"
+                >
+                  <Menu className="size-4" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent
+                dir="rtl"
+                className="overflow-y-auto text-start"
+              >
+                <SheetHeader>
+                  <SheetTitle>
+                    <a href={logo.url} className="flex items-center gap-2">
+                      <img
+                        src={logo.src}
+                        className="max-h-8 dark:invert"
+                        alt={logo.alt}
+                      />
+                    </a>
+                  </SheetTitle>
+                </SheetHeader>
+                <div className="flex flex-col gap-6 p-4">
+                  <Accordion
+                    type="single"
+                    collapsible
+                    dir="rtl"
+                    className="flex w-full flex-col gap-4 text-start"
+                  >
+                    {menu.map((item) => renderMobileMenuItem(item))}
+                  </Accordion>
+                  <div className="flex flex-col gap-3">
+                    <Button asChild variant="outline">
+                      <a href={auth.login.url}>{auth.login.title}</a>
+                    </Button>
+                    <Button asChild>
+                      <a href={auth.signup.url}>{auth.signup.title}</a>
+                    </Button>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const renderMenuItem = (item: MenuItem) => {
+  if (item.items) {
+    return (
+      <NavigationMenuItem key={item.title} className="relative">
+        <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+          {item.title}
+        </NavigationMenuTrigger>
+        <NavigationMenuContent
+          dir="rtl"
+          className="top-full left-1/2 z-50 mt-1.5 !w-auto -translate-x-1/2 bg-popover p-2 text-start text-popover-foreground"
+        >
+          {item.items.map((subItem) => (
+            <NavigationMenuLink asChild key={subItem.title}>
+              <SubMenuLink item={subItem} />
+            </NavigationMenuLink>
+          ))}
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem key={item.title}>
+      <NavigationMenuLink
+        href={item.url}
+        className="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-start text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground"
+      >
+        {item.title}
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  );
+};
+
+const renderMobileMenuItem = (item: MenuItem) => {
+  if (item.items) {
+    return (
+      <AccordionItem key={item.title} value={item.title} className="border-b-0">
+        <AccordionTrigger className="justify-start py-0 text-start text-base font-semibold hover:no-underline [&>svg]:ms-auto [&>svg]:me-0">
+          {item.title}
+        </AccordionTrigger>
+        <AccordionContent className="mt-2 text-start">
+          {item.items.map((subItem) => (
+            <SubMenuLink key={subItem.title} item={subItem} />
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+
+  return (
+    <a
+      key={item.title}
+      href={item.url}
+      className="block text-start text-base font-semibold"
+    >
+      {item.title}
+    </a>
+  );
+};
+
+const SubMenuLink = ({ item }: { item: MenuItem }) => {
+  return (
+    <a
+      className="flex min-w-80 flex-row gap-4 rounded-md p-3 text-start leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-accent-foreground"
+      href={item.url}
+    >
+      <div className="shrink-0 text-foreground">{item.icon}</div>
+      <div className="min-w-0">
+        <div className="text-sm font-semibold">{item.title}</div>
+        {item.description && (
+          <p className="text-sm leading-snug text-muted-foreground">
+            {item.description}
+          </p>
+        )}
+      </div>
+    </a>
+  );
+};
+
+export { Navbar1 };
diff --git a/blocks/navbar10.tsx b/blocks/navbar10.tsx
new file mode 100644
index 0000000..734d6b0
--- /dev/null
+++ b/blocks/navbar10.tsx
@@ -0,0 +1,824 @@
+"use client";
+import type { LucideIcon } from "lucide-react";
+import {
+  Book,
+  ChevronRight,
+  Code,
+  Database,
+  Globe,
+  Layout,
+  MenuIcon,
+  Monitor,
+  Paintbrush,
+  Server,
+  Settings,
+  Shield,
+  Sparkles,
+  Terminal,
+  Users,
+  X,
+} from "lucide-react";
+import type { MouseEventHandler } from "react";
+import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface MenuLink {
+  label?: string;
+  description?: string;
+  url: string;
+  icon?: LucideIcon;
+  image?: string;
+  background?: string;
+  company?: {
+    logo: string;
+    name: string;
+  };
+}
+
+interface MenuGroup {
+  title: string;
+  links: MenuLink[];
+}
+
+interface MenuItem {
+  id?: number;
+  title: string;
+  url?: string;
+  links?: MenuLink[];
+  featuredLinks?: MenuLink[];
+  imageLink?: MenuLink;
+  groupLinks?: MenuGroup[];
+}
+
+interface DesktopMenuItemProps {
+  item: MenuItem;
+  index: number;
+  contained?: boolean;
+}
+
+interface MobileNavigationMenuProps {
+  open: boolean;
+}
+
+type NavLinkProps = {
+  link: MenuLink;
+  onMouseEnter?: MouseEventHandler<HTMLAnchorElement>;
+  onMouseLeave?: MouseEventHandler<HTMLAnchorElement>;
+  showDescription?: boolean;
+};
+
+const LOGO = {
+  url: "https://www.ShadcnBlocks",
+  src: "/block-media/shadcnblocks/block/block-1.svg",
+  alt: "لوگو",
+  title: "شادسی‌ان‌بلاکز",
+};
+
+const NAVIGATION: MenuItem[] = [
+  {
+    title: "محصولات",
+    id: 1,
+    links: [
+      {
+        label: "بینش‌ها",
+        icon: Book,
+        description: "آخرین اخبار، به‌روزرسانی‌ها و اعلان‌های شرکت",
+        url: "#",
+        image:
+          "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+      },
+      {
+        label: "مهندسی",
+        icon: Code,
+        description: "مقالات فنی، آموزش‌ها، راهنماها و مستندات",
+        url: "#",
+        image:
+          "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+      },
+      {
+        label: "فرهنگ",
+        icon: Users,
+        description: "ارزش‌ها، تجربه‌ها و اهداف تیم",
+        url: "#",
+        image:
+          "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
+      },
+      {
+        label: "مطبوعات",
+        icon: Globe,
+        description: "بازتاب در رسانه، مصاحبه‌ها و مقالات",
+        url: "#",
+        image:
+          "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+      },
+      {
+        label: "API",
+        icon: Monitor,
+        description: "دسترسی برنامه‌نویسی با REST اتصال هوشمند امن",
+        url: "#",
+        image:
+          "/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg",
+      },
+      {
+        label: "CLI",
+        icon: Terminal,
+        description: "ابزار خط فرمان برای خودکارسازی و بهره‌وری",
+        url: "#",
+        image:
+          "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+      },
+      {
+        label: "SDKs",
+        icon: Code,
+        description: "کیت‌های نرم‌افزاری برای یکپارچه‌سازی سریع",
+        url: "#",
+        image:
+          "/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg",
+      },
+    ],
+  },
+  {
+    title: "راه‌حل‌ها",
+    id: 2,
+    featuredLinks: [
+      {
+        label: "آیکون‌ها",
+        icon: Sparkles,
+        description: "کتابخانه آیکون متن‌باز Lucide برای توسعه‌دهندگان",
+        background:
+          "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
+        url: "#",
+      },
+      {
+        label: "تم‌ها",
+        icon: Paintbrush,
+        description: "تم‌ها، استایل‌ها و پیش‌تنظیم ظاهر رابط",
+        background:
+          "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+        url: "#",
+      },
+    ],
+    links: [
+      {
+        description: "راه‌حل تجارت الکترونیک برای کسب‌وکارهای در حال رشد",
+        url: "#",
+        company: {
+          logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+          name: "ARC",
+        },
+      },
+      {
+        description: "ابزار توسعه بهینه برای پلتفرم‌های وب سامانه ابری",
+        url: "#",
+        company: {
+          logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+          name: "descript",
+        },
+      },
+      {
+        description: "امنیت در سطح بانکی برای اپلیکیشن‌های مالی",
+        url: "#",
+        company: {
+          logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+          name: "MERCURY",
+        },
+      },
+      {
+        description: "زیرساخت سلامت برای پلتفرم‌های فناوری پزشکی",
+        url: "#",
+        company: {
+          logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+          name: "ramp",
+        },
+      },
+    ],
+  },
+  {
+    title: "پلتفرم",
+    id: 3,
+    imageLink: {
+      url: "#",
+      image:
+        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+      label: "کاوش بلاک‌های جدید",
+    },
+    groupLinks: [
+      {
+        title: "خدمات اصلی",
+        links: [
+          {
+            label: "میزبانی",
+            icon: Server,
+            description: "زیرساخت جهانی برای اپ‌های مقیاس‌پذیر",
+            url: "#",
+          },
+          {
+            label: "احراز هویت",
+            icon: Shield,
+            description: "ورود امن و دسترسی مبتنی بر نقش",
+            url: "#",
+          },
+          {
+            label: "پایگاه داده",
+            icon: Database,
+            description: "ذخیره‌سازی پایدار و مقیاس‌پذیر داده",
+            url: "#",
+          },
+        ],
+      },
+      {
+        title: "سیستم طراحی",
+        links: [
+          {
+            label: "بلاک",
+            icon: Layout,
+            description: "بلاک‌های قابل‌استفاده برای تجربه رابط کاربری یکپارچه",
+            url: "#",
+          },
+          {
+            label: "توکن‌ها",
+            icon: Settings,
+            description: "توکن‌های طراحی برای برند یکسان",
+            url: "#",
+          },
+          {
+            label: "آیکون‌ها",
+            icon: Sparkles,
+            description: "آیکون‌های Lucide در عناصر رابط",
+            url: "#",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "منابع",
+    url: "#",
+  },
+  {
+    title: "قیمت‌گذاری",
+    url: "#",
+  },
+];
+
+const BUTTON = {
+  label: "ثبت‌نام",
+  isPrimary: true,
+  url: "#",
+};
+
+const MOBILE_BREAKPOINT = 1024;
+
+interface Navbar10Props {
+  /** When true, keeps the navbar inside block preview instead of absolute viewport positioning. */
+  contained?: boolean;
+  className?: string;
+}
+
+const Navbar10 = ({ contained = false, className }: Navbar10Props) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > MOBILE_BREAKPOINT) {
+        setOpen(false);
+      }
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "auto";
+  }, [open]);
+
+  const handleMobileMenu = () => {
+    const nextOpen = !open;
+    setOpen(nextOpen);
+  };
+
+  return (
+    <Fragment>
+      <section
+        lang="fa"
+        className={cn(
+          "pointer-events-auto z-999 flex h-20 w-full items-center justify-center overflow-visible bg-background text-start",
+          contained ? "relative" : "absolute top-0",
+          className,
+        )}
+      >
+        <NavigationMenu
+          dir="rtl"
+          className={cn(
+            "h-20 w-full max-w-full text-start",
+            "after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-['']",
+            "[&>div:last-child]:inset-x-0 [&>div:last-child]:w-full [&>div:last-child]:justify-center",
+            "[&>div:last-child>div]:mt-0 [&>div:last-child>div]:w-full [&>div:last-child>div]:max-w-full",
+            "[&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:border-b",
+            "[&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]",
+          )}
+        >
+          <div className="relative z-999 container grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3">
+            <a
+              href={LOGO.url}
+              className="flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter"
+            >
+              <img
+                src={LOGO.src}
+                alt={LOGO.alt}
+                className="inline-block size-6"
+              />
+              <span className="hidden md:inline-block">{LOGO.title}</span>
+            </a>
+            <div className="hidden xl:flex">
+              <NavigationMenuList>
+                {NAVIGATION.map((item, index) => (
+                  <DesktopMenuItem
+                    key={`desktop-link-${index}`}
+                    item={item}
+                    index={index}
+                    contained={contained}
+                  />
+                ))}
+              </NavigationMenuList>
+            </div>
+            <div className="justify-self-end">
+              <div className="hidden xl:block">
+                <Button variant="ghost">
+                  <a href={BUTTON.url} className="flex items-center gap-1">
+                    {BUTTON.label}
+                    <ChevronRight className="rtl:rotate-180" />
+                  </a>
+                </Button>
+              </div>
+              <div className="xl:hidden">
+                <Button
+                  className="size-11"
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleMobileMenu}
+                  aria-label={open ? "بستن منو" : "باز کردن منو"}
+                >
+                  {open ? (
+                    <X className="size-5.5 stroke-foreground" />
+                  ) : (
+                    <MenuIcon className="size-5.5 stroke-foreground" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </NavigationMenu>
+      </section>
+      <MobileNavigationMenu open={open} />
+    </Fragment>
+  );
+};
+
+const DesktopMenuItem = ({
+  item,
+  index,
+  contained = false,
+}: DesktopMenuItemProps) => {
+  if (item.links || item.featuredLinks || item.groupLinks) {
+    return (
+      <NavigationMenuItem key={`desktop-menu-item-${index}`} value={`${index}`}>
+        <NavigationMenuTrigger className="h-fit bg-transparent text-start font-normal text-foreground/60 [&_svg]:ms-1 [&_svg]:!ml-0">
+          {item.title}
+        </NavigationMenuTrigger>
+        <NavigationMenuContent
+          dir="rtl"
+          className="inset-x-0 left-auto right-auto hidden w-full !rounded-xl !border-0 !p-0 text-start xl:block"
+        >
+          <div
+            className={cn(
+              "mx-auto w-full animate-[fade-in-slide-down_0.35s_cubic-bezier(0.33,1,0.68,1)_forwards] px-8 pt-6 pb-12 text-start",
+              !contained && "max-w-[100vw]",
+            )}
+          >
+            <div className={cn("mx-auto w-full", contained ? "max-w-full" : "container")}>
+              {item.id === 1 && <DropdownMenu1 links={item.links} />}
+              {item.id === 2 && (
+                <DropdownMenu2
+                  featuredLinks={item.featuredLinks}
+                  links={item.links}
+                />
+              )}
+              {item.id === 3 && (
+                <DropdownMenu3
+                  groupLinks={item.groupLinks}
+                  imageLink={item.imageLink}
+                />
+              )}
+            </div>
+          </div>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem key={`desktop-menu-item-${index}`} value={`${index}`}>
+      <NavigationMenuLink
+        href={item.url}
+        className={`${navigationMenuTriggerStyle()} h-fit bg-transparent text-start font-normal text-foreground/60`}
+      >
+        {item.title}
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  );
+};
+
+const DropdownMenu1 = ({ links }: { links?: MenuLink[] }) => {
+  const linksRef = useRef<HTMLAnchorElement[]>([]);
+  const imageRefs = useRef<HTMLDivElement[]>([]);
+
+  const updateImageClasses = (activeIndex: number) => {
+    imageRefs.current.forEach((img, i) => {
+      if (!img) return;
+      const isActive = i === activeIndex;
+
+      img.classList.toggle("opacity-100", isActive);
+      img.classList.toggle("translate-y-0", isActive);
+      img.classList.toggle("opacity-0", !isActive);
+      img.classList.toggle("translate-y-20", !isActive);
+      img.classList.toggle("z-10", isActive);
+    });
+  };
+
+  const handleMouseEnter =
+    (index: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+      linksRef.current.forEach((link) => {
+        if (link && link !== event.currentTarget) {
+          link.classList.add("opacity-50");
+        }
+      });
+
+      updateImageClasses(index);
+    };
+
+  const handleMouseLeave = () => {
+    linksRef.current.forEach((link) => {
+      link?.classList.remove("opacity-50");
+    });
+
+    updateImageClasses(0);
+  };
+
+  if (!links) return null;
+
+  return (
+    <div className="grid grid-cols-2 gap-8">
+      <ul className="grid grid-cols-2 gap-8">
+        {links.map((link, index) => (
+          <NavLink
+            key={`default-nav-link-${index}`}
+            link={link}
+            onMouseEnter={handleMouseEnter(index)}
+            onMouseLeave={handleMouseLeave}
+            ref={(el) => {
+              if (el) linksRef.current[index] = el;
+            }}
+          />
+        ))}
+      </ul>
+      <div className="relative !h-[16rem] w-full overflow-hidden rounded-lg bg-muted">
+        {links.map((link, index) => (
+          <div
+            key={`default-nav-link-img-${index}`}
+            ref={(el) => {
+              if (el) imageRefs.current[index] = el;
+            }}
+            className={`will-change-opacity absolute top-14 start-14 aspect-video w-[43.75rem] overflow-hidden rounded-ss-md border-t border-s transition-all duration-600 ease-in-out will-change-transform ${index === 0
+                ? "z-10 translate-y-0 opacity-100"
+                : "pointer-events-none z-0 translate-y-20 opacity-0"
+              }`}
+          >
+            <img
+              src={link.image}
+              alt={link.label}
+              className="size-full object-cover object-top"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const DropdownMenu2 = ({
+  links,
+  featuredLinks,
+}: {
+  links?: MenuLink[];
+  featuredLinks?: MenuLink[];
+}) => {
+  return (
+    <div>
+      <div className="flex gap-8 pb-8">
+        {featuredLinks &&
+          featuredLinks.map((link, index) => (
+            <FeaturedLink key={`desktop-featured-link-${index}`} link={link} />
+          ))}
+      </div>
+      <Separator />
+      <div className="grid grid-cols-4 pt-8">
+        {links &&
+          links.map((link, index) => (
+            <NavLink key={`default-nav-link-${index}`} link={link} />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+const DropdownMenu3 = ({
+  groupLinks,
+  imageLink,
+}: {
+  groupLinks?: MenuGroup[];
+  imageLink?: MenuLink;
+}) => {
+  return (
+    <div className="grid grid-cols-2 gap-8">
+      <GroupLinks groupLinks={groupLinks} />
+      <FeaturedImageLink link={imageLink} />
+    </div>
+  );
+};
+
+const GroupLinks = ({ groupLinks }: { groupLinks?: MenuGroup[] }) => {
+  const linksRef = useRef<HTMLAnchorElement[]>([]);
+
+  const handleMouseEnter =
+    () => (event: React.MouseEvent<HTMLAnchorElement>) => {
+      linksRef.current.forEach((link) => {
+        if (link && link !== event.currentTarget) {
+          link.classList.add("opacity-50");
+        }
+      });
+    };
+
+  const handleMouseLeave = () => {
+    linksRef.current.forEach((link) => {
+      link?.classList.remove("opacity-50");
+    });
+  };
+
+  if (!groupLinks) return null;
+
+  let linkIndex = 0;
+  return (
+    <div className="grid grid-cols-2 gap-8">
+      {groupLinks.map((group, index1) => (
+        <div key={`group-link-${index1}`}>
+          <div className="mb-4 text-start text-xs text-muted-foreground">
+            {group.title}
+          </div>
+          <ul className="flex flex-col gap-8">
+            {group.links.map((link, index2) => {
+              const index = linkIndex++;
+              return (
+                <li key={`group-link-${index1}-${index2}`}>
+                  <NavLink
+                    link={link}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    ref={(el) => {
+                      if (el) linksRef.current[index] = el;
+                    }}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const FeaturedImageLink = ({ link }: { link?: MenuLink }) => {
+  if (!link) return null;
+
+  return (
+    <div className="hidden xl:block">
+      <a href={link.url} className="w-full max-w-[36.875rem]">
+        <AspectRatio
+          ratio={1.77245509}
+          className="overflow-hidden rounded-[0.25rem] bg-muted"
+        >
+          <div className="size-full">
+            <Badge className="absolute top-2 start-2">جدید</Badge>
+            <div className="flex w-full flex-col items-center justify-center gap-8 pt-10 text-center">
+              <div className="text-xl font-semibold">{link.label}</div>
+              <div className="w-[80%]">
+                <AspectRatio
+                  ratio={1.5}
+                  className="overflow-hidden rounded-[0.25rem] bg-muted"
+                >
+                  <img
+                    src={link.image}
+                    alt={link.label}
+                    className="size-full object-cover object-top"
+                  />
+                </AspectRatio>
+              </div>
+            </div>
+          </div>
+        </AspectRatio>
+      </a>
+    </div>
+  );
+};
+
+const FeaturedLink = ({ link }: { link: MenuLink }) => {
+  return (
+    <a
+      href={link.url}
+      className="group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-7"
+    >
+      <div className="relative z-10 flex w-full items-center gap-6">
+        <div className="flex size-12 shrink-0 rounded-lg border bg-background shadow-lg">
+          {link.icon && (
+            <link.icon className="m-auto size-5 stroke-foreground" />
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          <div className="text-lg font-semibold text-white">{link.label}</div>
+          <div className="font-medium text-white/80">{link.description}</div>
+        </div>
+      </div>
+      <img
+        src={link.background}
+        alt={link.label}
+        className="absolute inset-0 size-full object-cover object-top opacity-90 transition-opacity duration-300 ease-in-out group-hover:opacity-100"
+      />
+    </a>
+  );
+};
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
+  ({ link, onMouseEnter, onMouseLeave }, ref) => {
+    return (
+      <a
+        ref={ref}
+        href={link.url}
+        className="flex w-full gap-2 text-start transition-opacity duration-300"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {link.icon && (
+          <div className="flex size-6 shrink-0 rounded-md border shadow">
+            <link.icon className="m-auto size-3.5" />
+          </div>
+        )}
+        <div className="flex min-w-0 flex-col items-start gap-2 text-start">
+          {link.company && (
+            <div className="block text-base leading-normal xl:hidden">
+              {link.company.name}
+            </div>
+          )}
+          {link.company && (
+            <img
+              className="hidden h-6 xl:block"
+              src={link.company.logo}
+              alt={link.company.name}
+            />
+          )}
+          {link.label && (
+            <div className="text-base leading-normal">{link.label}</div>
+          )}
+          <div className="text-sm leading-normal text-muted-foreground">
+            {link.description}
+          </div>
+        </div>
+      </a>
+    );
+  },
+);
+
+const MobileNavigationMenu = ({ open }: MobileNavigationMenuProps) => {
+  return (
+    <Sheet open={open}>
+      <SheetContent
+        aria-describedby={undefined}
+        side="top"
+        className="inset-0 z-998 h-dvh w-full bg-background pt-20 [&>button]:hidden"
+      >
+        <div className="flex-1 overflow-y-auto">
+          <div className="container py-8">
+            <div className="absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap">
+              <SheetTitle className="text-primary">منوی موبایل</SheetTitle>
+            </div>
+            <div className="flex min-h-full flex-col gap-6">
+              <Accordion
+                type="multiple"
+                dir="rtl"
+                className="w-full text-start"
+              >
+                {NAVIGATION.map((item, index) =>
+                  renderMobileMenuItem(item, index),
+                )}
+              </Accordion>
+
+              <Button asChild>
+                <a href={BUTTON.url}>{BUTTON.label}</a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const renderMobileMenuItem = (item: MenuItem, index: number) => {
+  if (item.links || item.featuredLinks || item.groupLinks) {
+    return (
+      <AccordionItem
+        key={item.title}
+        value={`nav-${index}`}
+        className="border-b-0"
+      >
+        <AccordionTrigger className="h-[2.5rem] items-center justify-start text-start text-base font-normal text-foreground hover:no-underline [&>svg]:ms-auto [&>svg]:me-0">
+          {item.title}
+        </AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-6 p-2">
+          {item.featuredLinks && (
+            <div className="flex flex-col gap-2 p-2">
+              {item.featuredLinks.map((link, index) => (
+                <NavLink key={`default-nav-link-${index}`} link={link} />
+              ))}
+            </div>
+          )}
+
+          {item.links && (
+            <div className="flex flex-col gap-2 p-2">
+              {item.links.map((link, index) => (
+                <NavLink key={`default-nav-link-${index}`} link={link} />
+              ))}
+            </div>
+          )}
+
+          {item.groupLinks && (
+            <div className="flex flex-col gap-2 p-2">
+              {item.groupLinks.map((group, index1) => (
+                <div className="mb-8 last:mb-0" key={`group-link-${index1}`}>
+                  <div className="mb-4 text-start text-xs text-muted-foreground">
+                    {group.title}
+                  </div>
+                  <ul className="flex flex-col gap-2">
+                    {group.links.map((link, index2) => (
+                      <li key={`group-link-${index1}-${index2}`}>
+                        <NavLink link={link} />
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+
+  return (
+    <a
+      key={item.title}
+      href={item.url}
+      className="flex h-[2.5rem] items-center rounded-md text-start text-base leading-[3.75] font-normal text-foreground ring-ring/10 outline-ring/50 transition-all focus-visible:ring-4 focus-visible:outline-1 nth-last-1:border-0"
+    >
+      {item.title}
+    </a>
+  );
+};
+
+export { Navbar10 };
diff --git a/blocks/navbar11.tsx b/blocks/navbar11.tsx
new file mode 100644
index 0000000..c8ecaa5
--- /dev/null
+++ b/blocks/navbar11.tsx
@@ -0,0 +1,577 @@
+"use client";
+import type { LucideIcon } from "lucide-react";
+import {
+  Book,
+  Cloud,
+  Code,
+  Database,
+  Gift,
+  Globe,
+  Heart,
+  Layout,
+  MenuIcon,
+  Monitor,
+  Paintbrush,
+  Server,
+  Settings,
+  Shield,
+  ShoppingCart,
+  Smartphone,
+  Sparkles,
+  Terminal,
+  Users,
+  X,
+  Zap,
+} from "lucide-react";
+import { Fragment, useEffect, useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface MenuLink {
+  label: string;
+  description?: string;
+  url: string;
+  icon: LucideIcon;
+}
+
+interface MenuGroup {
+  title: string;
+  links: MenuLink[];
+}
+
+interface MenuItem {
+  title: string;
+  url?: string;
+  groups?: MenuGroup[];
+}
+
+interface DesktopMenuItemProps {
+  item: MenuItem;
+  index: number;
+}
+
+interface MobileNavigationMenuProps {
+  open: boolean;
+}
+
+const LOGO = {
+  url: "https://www.ShadcnBlocks",
+  src: "/block-media/shadcnblocks/block/block-1.svg",
+  alt: "لوگو",
+  title: "شادسی‌ان‌بلاکز",
+};
+
+const NAVIGATION: MenuItem[] = [
+  {
+    title: "محصولات",
+    groups: [
+      {
+        title: "وبلاگ شرکت",
+        links: [
+          {
+            label: "بینش‌ها",
+            icon: Book,
+            description: "اخبار و به‌روزرسانی‌های شرکت",
+            url: "#",
+          },
+          {
+            label: "مهندسی",
+            icon: Code,
+            description: "مطالب فنی عمیق",
+            url: "#",
+          },
+          {
+            label: "فرهنگ",
+            icon: Users,
+            description: "ارزش‌ها، تجربه‌ها و اهداف تیم",
+            url: "#",
+          },
+          {
+            label: "مطبوعات",
+            icon: Globe,
+            description: "بازتاب در رسانه‌ها",
+            url: "#",
+          },
+        ],
+      },
+      {
+        title: "ابزارهای توسعه",
+        links: [
+          {
+            label: "API",
+            icon: Monitor,
+            description: "دسترسی به REST اتصال هوشمند",
+            url: "#",
+          },
+          {
+            label: "CLI",
+            icon: Terminal,
+            description: "ابزارهای خط فرمان",
+            url: "#",
+          },
+          {
+            label: "SDKها",
+            icon: Code,
+            description: "یکپارچه‌سازی با SDKها",
+            url: "#",
+          },
+          {
+            label: "مستندات",
+            icon: Book,
+            description: "مستندات کامل",
+            url: "#",
+          },
+        ],
+      },
+      {
+        title: "تجارت",
+        links: [
+          {
+            label: "فروشگاه",
+            icon: ShoppingCart,
+            description: "خرید محصولات ما",
+            url: "#",
+          },
+          {
+            label: "طرح‌ها",
+            icon: Database,
+            description: "گزینه‌های اشتراک",
+            url: "#",
+          },
+          {
+            label: "اپ موبایل",
+            icon: Smartphone,
+            description: "خرید در هر مکان",
+            url: "#",
+          },
+          {
+            label: "کارت هدیه",
+            icon: Gift,
+            description: "ارسال فوری هدیه",
+            url: "#",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "راه‌حل‌ها",
+    groups: [
+      {
+        title: "صنایع",
+        links: [
+          {
+            label: "تجارت الکترونیک",
+            icon: ShoppingCart,
+            description: "راه‌حل برای فروشگاه آنلاین",
+            url: "#",
+          },
+          {
+            label: "SaaS",
+            icon: Cloud,
+            description: "ابزار برای اپلیکیشن‌های سامانه ابری",
+            url: "#",
+          },
+          {
+            label: "مالی",
+            icon: Shield,
+            description: "اپلیکیشن‌های مالی امن",
+            url: "#",
+          },
+          {
+            label: "سلامت",
+            icon: Heart,
+            description: "برای پلتفرم‌های پزشکی",
+            url: "#",
+          },
+        ],
+      },
+      {
+        title: "سیستم طراحی",
+        links: [
+          {
+            label: "بلاک",
+            icon: Layout,
+            description: "بخش‌های رابط کاربری قابل‌استفاده مجدد",
+            url: "#",
+          },
+          {
+            label: "توکن‌ها",
+            icon: Settings,
+            description: "مرجع توکن‌های طراحی",
+            url: "#",
+          },
+          {
+            label: "آیکون‌ها",
+            icon: Sparkles,
+            description: "کتابخانه آیکون Lucide",
+            url: "#",
+          },
+          {
+            label: "تم‌ها",
+            icon: Paintbrush,
+            description: "پیش‌تنظیم ظاهر رابط",
+            url: "#",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "پلتفرم",
+    groups: [
+      {
+        title: "خدمات اصلی",
+        links: [
+          {
+            label: "میزبانی",
+            icon: Server,
+            description: "زیرساخت پایدار",
+            url: "#",
+          },
+          {
+            label: "احراز هویت",
+            icon: Shield,
+            description: "ورود امن و نقش‌ها",
+            url: "#",
+          },
+          {
+            label: "پایگاه داده",
+            icon: Database,
+            description: "ذخیره‌سازی مقیاس‌پذیر",
+            url: "#",
+          },
+          {
+            label: "توابع لبه",
+            icon: Zap,
+            description: "منطق با تأخیر کم",
+            url: "#",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "منابع",
+    url: "#",
+  },
+  {
+    title: "قیمت‌گذاری",
+    url: "#",
+  },
+];
+
+const DESKTOP_BUTTONS = [
+  {
+    label: "تماس",
+    isPrimary: false,
+    url: "#",
+  },
+  {
+    label: "ورود",
+    isPrimary: false,
+    url: "#",
+  },
+  {
+    label: "ثبت‌نام",
+    isPrimary: true,
+    url: "#",
+  },
+];
+
+const MOBILE_BUTTONS = [
+  {
+    label: "ثبت‌نام",
+    isPrimary: true,
+    url: "#",
+  },
+  {
+    label: "ورود",
+    isPrimary: false,
+    url: "#",
+  },
+];
+
+const MOBILE_BREAKPOINT = 1024;
+
+interface Navbar11Props {
+  /** When true, positions inside block preview instead of the viewport. */
+  contained?: boolean;
+  className?: string;
+}
+
+const Navbar11 = ({ contained = false, className }: Navbar11Props) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > MOBILE_BREAKPOINT) {
+        setOpen(false);
+      }
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "auto";
+  }, [open]);
+
+  const handleMobileMenu = () => {
+    const nextOpen = !open;
+    setOpen(nextOpen);
+  };
+
+  return (
+    <Fragment>
+      <section
+        lang="fa"
+        className={cn(
+          "pointer-events-auto z-999 flex h-16 w-full items-center justify-center bg-background text-start",
+          contained ? "relative" : "fixed top-0",
+          className,
+        )}
+      >
+        <div className="container">
+          <div className="flex items-center justify-between gap-8">
+            <div className="flex items-center gap-8">
+              <a
+                href={LOGO.url}
+                className="flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter"
+              >
+                <img
+                  src={LOGO.src}
+                  alt={LOGO.alt}
+                  className="inline-block size-6"
+                />
+                <span className="hidden md:inline-block">{LOGO.title}</span>
+              </a>
+              <NavigationMenu
+                dir="rtl"
+                className="relative z-50 hidden xl:flex"
+                viewport={false}
+              >
+                <NavigationMenuList>
+                  {NAVIGATION.map((item, index) => (
+                    <DesktopMenuItem
+                      key={`desktop-link-${index}`}
+                      item={item}
+                      index={index}
+                    />
+                  ))}
+                </NavigationMenuList>
+              </NavigationMenu>
+            </div>
+            <div className="hidden items-center gap-3 xl:flex">
+              {DESKTOP_BUTTONS.map((btn, index) => (
+                <Button
+                  size="sm"
+                  variant={!btn.isPrimary ? "outline" : "default"}
+                  className={
+                    btn.isPrimary
+                      ? "text-primary-foreground"
+                      : "text-foreground"
+                  }
+                  asChild
+                  key={`navbar-btn-${index}`}
+                >
+                  <a href={btn.url}>{btn.label}</a>
+                </Button>
+              ))}
+            </div>
+            <div className="xl:hidden">
+              <Button
+                className="size-11"
+                variant="ghost"
+                onClick={handleMobileMenu}
+                aria-label={open ? "بستن منو" : "باز کردن منو"}
+              >
+                {open ? (
+                  <X className="size-5.5 stroke-foreground" />
+                ) : (
+                  <MenuIcon className="size-5.5 stroke-foreground" />
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <MobileNavigationMenu open={open} />
+    </Fragment>
+  );
+};
+
+const DesktopMenuItem = ({ item, index }: DesktopMenuItemProps) => {
+  if (item.groups) {
+    return (
+      <NavigationMenuItem key={`desktop-menu-item-${index}`} value={`${index}`}>
+        <NavigationMenuTrigger className="h-fit bg-transparent px-2.5 text-start font-normal text-muted-foreground [&_svg]:ms-1 [&_svg]:!ml-0">
+          {item.title}
+        </NavigationMenuTrigger>
+        <NavigationMenuContent
+          dir="rtl"
+          className="start-0 end-auto left-auto z-50 !rounded-xl !border !p-0 text-start"
+        >
+          <ul
+            className="flex flex-row-reverse p-2 text-start"
+            style={{ width: item.groups.length * 248 }}
+          >
+            {item.groups.map((group, index1) => (
+              <li className="flex-1" key={`desktop-group-${index1}`}>
+                <ul>
+                  <li className="px-3 py-2 text-start text-sm leading-normal text-muted-foreground">
+                    {group.title}
+                  </li>
+                  {group.links.map((link, index2) => (
+                    <li key={`desktop-links-${index1}-${index2}`}>
+                      <NavigationMenuLink
+                        asChild
+                        className="group/link flex-row gap-2 px-3 py-2 text-start transition-colors duration-200"
+                      >
+                        <a href={link.url} className="text-start">
+                          <div className="flex size-8 shrink-0 rounded-lg border duration-400 fade-in group-hover/link:bg-background">
+                            <link.icon className="m-auto size-4 group-hover/link:stroke-black" />
+                          </div>
+                          <div className="flex min-w-0 flex-col gap-[2px] text-start">
+                            <div className="text-sm font-medium">
+                              {link.label}
+                            </div>
+                            <div className="text-xs text-muted-foreground group-hover/link:text-foreground">
+                              {link.description}
+                            </div>
+                          </div>
+                        </a>
+                      </NavigationMenuLink>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+            ))}
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem key={`desktop-menu-item-${index}`} value={`${index}`}>
+      <NavigationMenuLink
+        href={item.url}
+        className={`${navigationMenuTriggerStyle()} h-fit bg-transparent px-2.5 text-start font-normal text-muted-foreground`}
+      >
+        {item.title}
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  );
+};
+
+const MobileNavigationMenu = ({ open }: MobileNavigationMenuProps) => {
+  return (
+    <Sheet open={open}>
+      <SheetContent
+        aria-describedby={undefined}
+        side="top"
+        className="dark inset-0 z-998 h-dvh w-full bg-background pt-[3.9375rem] [&>button]:hidden"
+      >
+        <div className="h-full overflow-y-auto pt-10 pb-20">
+          <div className="container">
+            <div className="absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap">
+              <SheetTitle className="text-primary">منوی موبایل</SheetTitle>
+            </div>
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col gap-4">
+                {MOBILE_BUTTONS.map((btn, index) => (
+                  <Button
+                    variant={!btn.isPrimary ? "outline" : "default"}
+                    className={
+                      btn.isPrimary
+                        ? "text-primary-foreground"
+                        : "text-foreground"
+                    }
+                    asChild
+                    key={`navbar-btn-${index}`}
+                  >
+                    <a href={btn.url}>{btn.label}</a>
+                  </Button>
+                ))}
+              </div>
+              <Accordion
+                type="multiple"
+                dir="rtl"
+                className="w-full text-start"
+              >
+                {NAVIGATION.map((item, index) =>
+                  renderMobileMenuItem(item, index),
+                )}
+              </Accordion>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const renderMobileMenuItem = (item: MenuItem, index: number) => {
+  if (item.groups) {
+    return (
+      <AccordionItem
+        key={item.title}
+        value={`nav-${index}`}
+        className="border-b-0"
+      >
+        <AccordionTrigger className="h-[3.75rem] items-center justify-start p-0 !px-4 text-start text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline [&>svg]:ms-auto [&>svg]:me-0">
+          {item.title}
+        </AccordionTrigger>
+        <AccordionContent className="max-h-[60dvh] overflow-x-auto">
+          {item.groups.flatMap((group, groupIndex) =>
+            group.links.map((link, linkIndex) => (
+              <a
+                key={`mobile-link-${groupIndex}-${linkIndex}`}
+                href={link.url}
+                className="flex h-12 items-center gap-2 rounded-lg px-4 text-start text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground"
+              >
+                <link.icon className="size-4 stroke-muted-foreground" />
+                {link.label}
+              </a>
+            )),
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+
+  return (
+    <a
+      key={item.title}
+      href={item.url}
+      className="flex h-[3.75rem] items-center rounded-md p-0 px-4 text-start text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1 nth-last-1:border-0"
+    >
+      {item.title}
+    </a>
+  );
+};
+
+export { Navbar11 };
diff --git a/blocks/navbar14.tsx b/blocks/navbar14.tsx
new file mode 100644
index 0000000..143efd8
--- /dev/null
+++ b/blocks/navbar14.tsx
@@ -0,0 +1,543 @@
+"use client";
+
+import {
+  Award,
+  BarChart3,
+  Bell,
+  Book,
+  BookOpen,
+  Brain,
+  ChevronRight,
+  FileCode,
+  FileText,
+  GraduationCap,
+  MessageSquare,
+  Users,
+  Video,
+} from "lucide-react";
+import { type LucideIcon } from "lucide-react";
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface MenuItem {
+  title: string;
+  href: string;
+  description?: string;
+  icon: LucideIcon;
+}
+
+interface FeaturedContent {
+  title: string;
+  description: string;
+  href: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+}
+
+interface MenuSection {
+  label: string;
+  items: MenuItem[];
+}
+
+interface MegaMenu {
+  label: string;
+  sections: MenuSection[];
+  featured?: FeaturedContent;
+}
+
+interface Navbar14Props {
+  logo?: {
+    src: string;
+    alt: string;
+    href?: string;
+    title?: string;
+  };
+  menus?: MegaMenu[];
+  links?: { label: string; href: string }[];
+  auth?: {
+    login: { label: string; href: string };
+    signup: { label: string; href: string };
+  };
+  className?: string;
+}
+
+const Navbar14 = ({
+  logo = {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "لوگو",
+    href: "#",
+    title: "شادسی‌ان‌بلاکز",
+  },
+  menus = [
+    {
+      label: "محصولات",
+      sections: [
+        {
+          label: "ابزارها",
+          items: [
+            {
+              title: "مدیریت دوره و محتوا",
+              description: "ایجاد، سازماندهی و ارائه دوره‌ها",
+              icon: GraduationCap,
+              href: "#",
+            },
+            {
+              title: "تحلیل دانش‌آموزان",
+              description: "پیگیری پیشرفت و داده‌های عملکرد",
+              icon: BarChart3,
+              href: "#",
+            },
+            {
+              title: "یادگیری تعاملی",
+              description: "جذب دانش‌آموز با محتوای چندرسانه‌ای",
+              icon: Video,
+              href: "#",
+            },
+            {
+              title: "تدریس هوشمند",
+              description: "یادگیری شخصی‌سازی‌شده با هوش مصنوعی",
+              icon: Brain,
+              href: "#",
+            },
+            {
+              title: "همکاری و گفت‌وگو",
+              description: "ارتباط بی‌وقفه دانش‌آموز و مدرس",
+              icon: MessageSquare,
+              href: "#",
+            },
+            {
+              title: "ارزیابی و گواهینامه",
+              description: "سنجش یادگیری با آزمون جامع",
+              icon: Award,
+              href: "#",
+            },
+          ],
+        },
+        {
+          label: "شروع سریع",
+          items: [
+            {
+              title: "آموزش مقدماتی",
+              icon: BookOpen,
+              href: "#",
+            },
+            {
+              title: "یافتن مدرس",
+              icon: Users,
+              href: "#",
+            },
+          ],
+        },
+      ],
+      featured: {
+        title: "یک پلتفرم. هر یادگیرنده.",
+        description: "مسیر یادگیری شخصی برای هر دانش‌آموز.",
+        href: "#",
+        image: {
+          src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+          alt: "محتوای ویژه",
+        },
+      },
+    },
+    {
+      label: "پشتیبانی",
+      sections: [
+        {
+          label: "راهنماها",
+          items: [
+            {
+              title: "مرکز یادگیری",
+              description: "نحوه استفاده مؤثر از پلتفرم",
+              icon: Book,
+              href: "#",
+            },
+            {
+              title: "فهرست دوره‌ها",
+              description: "مرور کتابخانه جامع دوره‌ها",
+              icon: BookOpen,
+              href: "#",
+            },
+            {
+              title: "مستندات اتصال هوشمند",
+              description: "یکپارچه‌سازی با پلتفرم شما",
+              icon: FileCode,
+              href: "#",
+            },
+          ],
+        },
+        {
+          label: "درباره ما",
+          items: [
+            { title: "به‌روزرسانی پلتفرم", icon: FileText, href: "#" },
+            { title: "اخبار و رویدادها", icon: Bell, href: "#" },
+            { title: "وبلاگ آموزشی", icon: Book, href: "#" },
+            { title: "همکاری با ما", icon: Users, href: "#" },
+          ],
+        },
+      ],
+    },
+  ],
+  links = [{ label: "درباره ما", href: "#" }],
+  auth = {
+    login: { label: "ورود", href: "#" },
+    signup: { label: "دمو", href: "#" },
+  },
+  className,
+}: Navbar14Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const hasDescription = (items: MenuItem[]) =>
+    items.some((item) => item.description);
+
+  return (
+    <section
+      lang="fa"
+      className={cn(
+        "border-b border-border bg-background text-start lg:border-b",
+        isOpen && "fixed inset-0 z-50 flex h-dvh flex-col border-b-0",
+        className,
+      )}
+    >
+      <div className="container mx-auto">
+        <nav className="flex items-center justify-between py-4">
+          <div className="flex flex-1 items-center gap-9">
+            <a href={logo.href} className="flex items-center gap-2">
+              <img src={logo.src} alt={logo.alt} className="h-8 dark:invert" />
+              {logo.title && (
+                <span className="text-lg font-semibold">{logo.title}</span>
+              )}
+            </a>
+            <div className="hidden items-center gap-1.5 lg:flex">
+              <NavigationMenu
+                dir="rtl"
+                viewport={false}
+                className="relative z-50"
+              >
+                <NavigationMenuList>
+                  {menus.map((menu) => (
+                    <NavigationMenuItem key={menu.label}>
+                      <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+                        {menu.label}
+                      </NavigationMenuTrigger>
+                      <NavigationMenuContent
+                        dir="rtl"
+                        className="start-0 end-auto left-auto z-50 p-0 text-start"
+                      >
+                        <div className="flex flex-row-reverse">
+                          <div className="p-4 text-start">
+                            {menu.sections
+                              .filter((s) => hasDescription(s.items))
+                              .map((section, i) => (
+                                <div key={section.label}>
+                                  {i > 0 && <Separator className="my-3" />}
+                                  <p className="mb-3 text-start text-[10px] text-muted-foreground uppercase">
+                                    {section.label}
+                                  </p>
+                                  {section.items.map((item) => (
+                                    <NavigationMenuLink
+                                      key={item.title}
+                                      asChild
+                                    >
+                                      <a
+                                        href={item.href}
+                                        className="group flex cursor-pointer flex-row gap-3 text-start"
+                                      >
+                                        <span className="flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background">
+                                          <item.icon className="size-5!" />
+                                        </span>
+                                        <div className="flex min-w-0 flex-col text-start">
+                                          <span className="flex items-center gap-0.5 text-sm font-medium">
+                                            {item.title}
+                                            <ChevronRight className="size-4 text-primary! opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
+                                          </span>
+                                          {item.description && (
+                                            <p className="text-xs text-muted-foreground">
+                                              {item.description}
+                                            </p>
+                                          )}
+                                        </div>
+                                      </a>
+                                    </NavigationMenuLink>
+                                  ))}
+                                </div>
+                              ))}
+                          </div>
+                          <Separator
+                            orientation="vertical"
+                            className="data-[orientation=vertical]:h-auto"
+                          />
+                          <div
+                            className={cn(
+                              "p-4 text-start",
+                              menu.featured && "w-64 shrink-0",
+                            )}
+                          >
+                            {menu.sections
+                              .filter((s) => !hasDescription(s.items))
+                              .map((section, i) => (
+                                <div key={section.label}>
+                                  {i > 0 && (
+                                    <p className="mt-5 mb-3 text-start text-[10px] text-muted-foreground uppercase">
+                                      {section.label}
+                                    </p>
+                                  )}
+                                  {i === 0 && (
+                                    <p className="mb-3 text-start text-[10px] text-muted-foreground uppercase">
+                                      {section.label}
+                                    </p>
+                                  )}
+                                  <div>
+                                    {section.items.map((item) => (
+                                      <NavigationMenuLink
+                                        key={item.title}
+                                        asChild
+                                      >
+                                        <a
+                                          href={item.href}
+                                          className="flex flex-row items-center gap-3 text-start"
+                                        >
+                                          <item.icon className="size-4!" />
+                                          <span className="text-sm font-medium">
+                                            {item.title}
+                                          </span>
+                                        </a>
+                                      </NavigationMenuLink>
+                                    ))}
+                                  </div>
+                                </div>
+                              ))}
+                            {menu.featured && (
+                              <>
+                                <p className="mt-5 mb-3 text-start text-[10px] text-muted-foreground uppercase">
+                                  آخرین به‌روزرسانی‌ها
+                                </p>
+                                <NavigationMenuLink asChild>
+                                  <a href={menu.featured.href}>
+                                    <div className="rounded-lg bg-primary p-3">
+                                      <img
+                                        src={menu.featured.image.src}
+                                        alt={menu.featured.image.alt}
+                                        className="aspect-video w-full rounded-md object-cover"
+                                      />
+                                    </div>
+                                  </a>
+                                </NavigationMenuLink>
+                                <div className="mt-2 flex flex-col gap-1 px-1 text-start">
+                                  <p className="text-start text-xs font-medium">
+                                    {menu.featured.title}
+                                  </p>
+                                  <p className="text-start text-xs text-muted-foreground">
+                                    {menu.featured.description}
+                                  </p>
+                                </div>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      </NavigationMenuContent>
+                    </NavigationMenuItem>
+                  ))}
+                  {links.map((link) => (
+                    <NavigationMenuItem key={link.label}>
+                      <NavigationMenuLink
+                        asChild
+                        className={cn(
+                          navigationMenuTriggerStyle(),
+                          "text-start",
+                        )}
+                      >
+                        <a href={link.href}>{link.label}</a>
+                      </NavigationMenuLink>
+                    </NavigationMenuItem>
+                  ))}
+                </NavigationMenuList>
+              </NavigationMenu>
+            </div>
+          </div>
+
+          <div className="hidden items-center gap-2 lg:flex">
+            <Button variant="outline" asChild>
+              <a href={auth.login.href}>{auth.login.label}</a>
+            </Button>
+            <Button asChild>
+              <a href={auth.signup.href}>{auth.signup.label}</a>
+            </Button>
+          </div>
+
+          <button
+            type="button"
+            className="flex size-10 items-center justify-center rounded-md border lg:hidden"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-expanded={isOpen}
+            aria-label={isOpen ? "بستن منو" : "باز کردن منو"}
+          >
+            <div className="flex w-3.5 flex-col gap-1">
+              <span
+                className={cn(
+                  "h-[1.5px] w-full origin-center rounded-full bg-foreground transition-all duration-300",
+                  isOpen && "translate-y-[5.5px] rotate-45",
+                )}
+              />
+              <span
+                className={cn(
+                  "h-[1.5px] w-full origin-center rounded-full bg-foreground transition-all duration-300",
+                  isOpen && "scale-x-0 opacity-0",
+                )}
+              />
+              <span
+                className={cn(
+                  "h-[1.5px] w-full origin-center rounded-full bg-foreground transition-all duration-300",
+                  isOpen && "-translate-y-[5.5px] -rotate-45",
+                )}
+              />
+            </div>
+          </button>
+        </nav>
+      </div>
+
+      {isOpen && (
+        <div className="flex min-h-0 flex-1 animate-in flex-col overflow-y-auto border-t bg-background text-start duration-200 fade-in slide-in-from-top-2 lg:hidden">
+          <Accordion
+            type="single"
+            collapsible
+            dir="rtl"
+            className="w-full text-start"
+          >
+            {menus.map((menu) => (
+              <AccordionItem
+                key={menu.label}
+                value={menu.label}
+                className="border-b"
+              >
+                <AccordionTrigger className="container mx-auto items-center justify-start pe-10 text-start text-base font-medium hover:no-underline [&>svg]:ms-auto [&>svg]:me-0">
+                  {menu.label}
+                </AccordionTrigger>
+                <AccordionContent className="container mx-auto text-start [&_a]:no-underline">
+                  <div className="space-y-5">
+                    {menu.sections.map((section, i) => (
+                      <div key={section.label}>
+                        {i > 0 && <Separator className="mb-5" />}
+                        <p className="mb-3 text-start text-[10px] text-muted-foreground uppercase">
+                          {section.label}
+                        </p>
+                        <div className="space-y-5">
+                          {section.items.map((item) => (
+                            <a
+                              key={item.title}
+                              href={item.href}
+                              className={cn(
+                                "flex cursor-pointer flex-row gap-3 rounded-md text-start transition-colors",
+                                !item.description && "items-center",
+                              )}
+                              onClick={() => setIsOpen(false)}
+                            >
+                              {item.description ? (
+                                <>
+                                  <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-background">
+                                    <item.icon className="size-4" />
+                                  </span>
+                                  <div className="flex min-w-0 flex-col text-start">
+                                    <span className="text-sm leading-tight font-medium">
+                                      {item.title}
+                                    </span>
+                                    <p className="text-xs leading-tight text-muted-foreground">
+                                      {item.description}
+                                    </p>
+                                  </div>
+                                </>
+                              ) : (
+                                <>
+                                  <item.icon className="size-4" />
+                                  <span className="text-sm font-medium">
+                                    {item.title}
+                                  </span>
+                                </>
+                              )}
+                            </a>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                    {menu.featured && (
+                      <>
+                        <Separator />
+                        <div className="text-start">
+                          <p className="mb-3 text-start text-[10px] text-muted-foreground uppercase">
+                            آخرین به‌روزرسانی‌ها
+                          </p>
+                          <a
+                            href={menu.featured.href}
+                            onClick={() => setIsOpen(false)}
+                          >
+                            <div className="rounded-lg bg-primary p-3">
+                              <img
+                                src={menu.featured.image.src}
+                                alt={menu.featured.image.alt}
+                                className="aspect-video w-full rounded-md object-cover"
+                              />
+                            </div>
+                          </a>
+                          <div className="mt-2 flex flex-col gap-1 px-1 text-start">
+                            <span className="text-xs font-medium">
+                              {menu.featured.title}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              {menu.featured.description}
+                            </span>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+
+          {links.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="block border-b border-border py-4 text-start text-base font-medium transition-colors"
+            >
+              <span className="container mx-auto block text-start">
+                {link.label}
+              </span>
+            </a>
+          ))}
+
+          <div className="container mx-auto mt-auto flex flex-col gap-2 py-8">
+            <Button variant="outline" className="w-full" asChild>
+              <a href={auth.login.href}>{auth.login.label}</a>
+            </Button>
+            <Button className="w-full" asChild>
+              <a href={auth.signup.href}>{auth.signup.label}</a>
+            </Button>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export { Navbar14 };
diff --git a/blocks/navbar17.tsx b/blocks/navbar17.tsx
new file mode 100644
index 0000000..fbf3afd
--- /dev/null
+++ b/blocks/navbar17.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { Menu, X } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+const NAV_LOGO = {
+  url: "https://www.ShadcnBlocks",
+  src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+  alt: "لوگو",
+  title: "شادسی‌ان‌بلاکز",
+};
+
+const NAV_ITEMS = [
+  { name: "خانه", link: "#" },
+  { name: "درباره ما", link: "#" },
+  { name: "قیمت‌گذاری", link: "#" },
+  { name: "تماس", link: "#" },
+];
+
+interface Navbar17Props {
+  className?: string;
+}
+
+const Navbar17 = ({ className }: Navbar17Props) => {
+  const [activeItem, setActiveItem] = useState(NAV_ITEMS[0].name);
+
+  const indicatorRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    const updateIndicator = () => {
+      const activeEl = document.querySelector(
+        `[data-nav-item="${activeItem}"]`,
+      ) as HTMLElement;
+
+      if (activeEl && indicatorRef.current && menuRef.current) {
+        const menuRect = menuRef.current.getBoundingClientRect();
+        const itemRect = activeEl.getBoundingClientRect();
+
+        indicatorRef.current.style.width = `${itemRect.width}px`;
+        indicatorRef.current.style.insetInlineStart = `${itemRect.left - menuRect.left}px`;
+        indicatorRef.current.style.left = "auto";
+      }
+    };
+    updateIndicator();
+    window.addEventListener("resize", updateIndicator);
+
+    return () => window.removeEventListener("resize", updateIndicator);
+  }, [activeItem]);
+
+  return (
+    <section lang="fa" className={cn("py-4 text-start", className)}>
+      <nav className="container flex items-center justify-between">
+        <a href={NAV_LOGO.url} className="flex items-center gap-2">
+          <img src={NAV_LOGO.src} className="max-h-8 w-8" alt={NAV_LOGO.alt} />
+          <span className="text-lg font-semibold tracking-tighter">
+            {NAV_LOGO.title}
+          </span>
+        </a>
+
+        <NavigationMenu className="hidden lg:block" dir="rtl">
+          <NavigationMenuList
+            ref={menuRef}
+            className="relative flex items-center gap-6 rounded-4xl px-8 py-3"
+          >
+            {NAV_ITEMS.map((item) => (
+              <NavigationMenuItem key={item.name}>
+                <NavigationMenuLink
+                  data-nav-item={item.name}
+                  onClick={() => setActiveItem(item.name)}
+                  className={cn(
+                    "relative cursor-pointer text-start text-sm font-medium hover:bg-transparent",
+                    activeItem === item.name
+                      ? "text-foreground"
+                      : "text-muted-foreground",
+                  )}
+                >
+                  {item.name}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            ))}
+            <div
+              ref={indicatorRef}
+              className="absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300"
+            >
+              <div className="h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" />
+            </div>
+          </NavigationMenuList>
+        </NavigationMenu>
+
+        <MobileNav activeItem={activeItem} setActiveItem={setActiveItem} />
+
+        <div className="hidden items-center gap-2 lg:flex">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-10 py-2.5 text-sm font-normal"
+          >
+            ثبت‌نام
+          </Button>
+        </div>
+      </nav>
+    </section>
+  );
+};
+
+export { Navbar17 };
+
+const AnimatedHamburger = ({ isOpen }: { isOpen: boolean }) => {
+  return (
+    <div className="group relative size-full">
+      <div className="absolute flex size-full items-center justify-center">
+        <Menu
+          className={cn(
+            "absolute size-6 text-muted-foreground transition-all duration-300 group-hover:text-foreground",
+            isOpen ? "rotate-90 opacity-0" : "rotate-0 opacity-100",
+          )}
+        />
+        <X
+          className={cn(
+            "absolute size-6 text-muted-foreground transition-all duration-300 group-hover:text-foreground",
+            isOpen ? "rotate-0 opacity-100" : "-rotate-90 opacity-0",
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+const MobileNav = ({
+  activeItem,
+  setActiveItem,
+}: {
+  activeItem: string;
+  setActiveItem: (item: string) => void;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="flex h-full items-center lg:hidden">
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-expanded={isOpen}
+            aria-label={isOpen ? "بستن منو" : "باز کردن منو"}
+          >
+            <AnimatedHamburger isOpen={isOpen} />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          dir="rtl"
+          align="start"
+          className="relative top-4 -end-4 block w-[calc(100vw-32px)] overflow-hidden rounded-xl p-0 text-start start-auto end-0 sm:top-auto sm:end-auto sm:w-80 lg:hidden"
+        >
+          <ul className="w-full bg-background py-4 text-start text-foreground">
+            {NAV_ITEMS.map((navItem) => (
+              <li key={navItem.name}>
+                <a
+                  href={navItem.link}
+                  onClick={() => setActiveItem(navItem.name)}
+                  className={cn(
+                    "flex items-center border-s-[3px] px-6 py-4 text-start text-sm font-medium transition-all duration-75",
+                    activeItem === navItem.name
+                      ? "border-foreground text-foreground"
+                      : "border-transparent text-muted-foreground hover:text-foreground",
+                  )}
+                >
+                  {navItem.name}
+                </a>
+              </li>
+            ))}
+            <li className="flex flex-col px-7 py-2">
+              <Button variant="outline">ثبت‌نام</Button>
+            </li>
+          </ul>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
diff --git a/blocks/navbar18.tsx b/blocks/navbar18.tsx
new file mode 100644
index 0000000..a12b31d
--- /dev/null
+++ b/blocks/navbar18.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import { Menu } from "lucide-react";
+import React from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+const NAV_LOGO = {
+  url: "https://www.ShadcnBlocks",
+  src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+  alt: "لوگو",
+  title: "شادسی‌ان‌بلاکز",
+};
+
+const NAV_ITEMS = [
+  {
+    name: "محصولات",
+    link: "/",
+    hasSubmenu: true,
+    submenu: [
+      {
+        title: "معرفی",
+        href: "/docs",
+        description:
+          "بلاک‌های قابل‌استفاده مجدد ساخته‌شده با کتابخانه پایه و استایل‌دهی مدرن.",
+      },
+      {
+        title: "نصب",
+        href: "/docs/installation",
+        description: "نحوه نصب وابستگی‌ها و ساختاردهی پروژه.",
+      },
+      {
+        title: "تایپوگرافی",
+        href: "/docs/primitives/typography",
+        description: "استایل عناوین، پاراگراف‌ها، فهرست‌ها و موارد مشابه.",
+      },
+    ],
+  },
+  {
+    name: "منابع",
+    link: "/",
+    hasSubmenu: true,
+    submenu: [
+      {
+        title: "دیالوگ هشدار",
+        href: "/docs/primitives/alert-dialog",
+        description:
+          "پنجره مودال برای نمایش محتوای مهم و دریافت پاسخ از کاربر.",
+      },
+      {
+        title: "کارت شناور",
+        href: "/docs/primitives/hover-card",
+        description: "پیش‌نمایش محتوای پشت لینک هنگام هاور یا فوکوس.",
+      },
+      {
+        title: "پیشرفت",
+        href: "/docs/primitives/progress",
+        description: "نمایش میزان پیشرفت یک کار، معمولاً به‌صورت نوار.",
+      },
+      {
+        title: "ناحیه اسکرول",
+        href: "/docs/primitives/scroll-area",
+        description: "جداسازی بصری یا معنایی بخش‌های محتوا.",
+      },
+      {
+        title: "تب‌ها",
+        href: "/docs/primitives/tabs",
+        description: "بخش‌های لایه‌ای محتوا که یک‌بار یکی نمایش داده می‌شوند.",
+      },
+      {
+        title: "راهنما",
+        href: "/docs/primitives/tooltip",
+        description:
+          "نمایش اطلاعات مرتبط با عنصر هنگام هاور یا فوکوس کیبورد.",
+      },
+    ],
+  },
+  { name: "یکپارچه‌سازی", link: "/" },
+];
+
+interface Navbar18Props {
+  className?: string;
+}
+
+const Navbar18 = ({ className }: Navbar18Props) => {
+  return (
+    <section
+      lang="fa"
+      className={cn(
+        "relative z-10 mx-auto flex max-w-full items-center justify-between overflow-visible border border-t-0 bg-muted px-6 py-3 text-start md:w-fit md:rounded-b-2xl lg:gap-4",
+        className,
+      )}
+    >
+      <a href={NAV_LOGO.url} className="flex items-center gap-1">
+        <img
+          src={NAV_LOGO.src}
+          className="max-h-5 dark:invert"
+          alt={NAV_LOGO.alt}
+        />
+        <span className="sr-only">{NAV_LOGO.title}</span>
+      </a>
+
+      <MobileNav />
+
+      <NavigationMenu
+        className="relative z-50 hidden md:flex"
+        dir="rtl"
+        viewport={false}
+      >
+        <NavigationMenuList className="h-full w-full">
+          {NAV_ITEMS.map((item) =>
+            item.hasSubmenu ? (
+              <NavigationMenuItem key={item.name} className="rounded-2xl">
+                <NavigationMenuTrigger className="bg-transparent px-2 py-1 text-start text-xs [&_svg]:ms-1 [&_svg]:!me-0 [&_svg]:!ml-0">
+                  {item.name}
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  dir="rtl"
+                  className="start-0 end-auto left-auto z-50 rounded-2xl text-start"
+                >
+                  <ul
+                    dir="rtl"
+                    className={cn(
+                      "grid w-full gap-2 p-2 text-start",
+                      (item.submenu?.length ?? 0) > 3
+                        ? "w-[300px] md:w-[350px] md:grid-cols-2 lg:w-[400px]"
+                        : "md:w-[150px] lg:w-[200px]",
+                    )}
+                  >
+                    {item.submenu?.map((sub) => (
+                      <ListItem
+                        key={sub.title}
+                        title={sub.title}
+                        href={sub.href}
+                      >
+                        {sub.description}
+                      </ListItem>
+                    ))}
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+            ) : (
+              <NavigationMenuItem key={item.name}>
+                <NavigationMenuLink
+                  href={item.link}
+                  className={cn(
+                    navigationMenuTriggerStyle(),
+                    "bg-transparent px-3 py-1.5 text-start text-xs",
+                  )}
+                >
+                  {item.name}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            ),
+          )}
+        </NavigationMenuList>
+      </NavigationMenu>
+
+      <div className="hidden md:block">
+        <Button
+          variant="outline"
+          className="h-auto rounded-lg px-3 py-1.5 text-xs"
+        >
+          ورود
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            "flex w-full flex-col items-start gap-1 rounded-md p-2 text-start text-xs leading-none no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            className,
+          )}
+          {...props}
+        >
+          <div className="w-full text-start text-xs leading-none font-medium">
+            {title}
+          </div>
+          <p className="w-full text-start text-xs leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  );
+});
+ListItem.displayName = "ListItem";
+
+const MobileNav = () => {
+  return (
+    <div className="me-2 flex items-center justify-center md:hidden">
+      <Popover>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            className="flex size-8 items-center justify-center rounded-md text-foreground hover:bg-accent"
+            aria-label="باز کردن منو"
+          >
+            <Menu className="size-5" />
+          </button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          dir="rtl"
+          align="start"
+          sideOffset={8}
+          className="z-50 w-screen max-w-xs overflow-visible p-0 text-start"
+        >
+          <div className="w-full bg-card/80 pt-2 text-start text-foreground backdrop-blur-md">
+            <Accordion type="single" collapsible className="w-full text-start">
+              {NAV_ITEMS.map((navItem) =>
+                navItem.hasSubmenu ? (
+                  <AccordionItem
+                    key={navItem.name}
+                    value={navItem.name}
+                    className="border-b-0"
+                  >
+                    <AccordionTrigger className="justify-start px-4 py-3 text-start text-xs hover:bg-accent hover:no-underline [&>svg]:ms-auto [&>svg]:me-0">
+                      <span className="text-foreground">{navItem.name}</span>
+                    </AccordionTrigger>
+                    <AccordionContent className="rounded-2xl text-start">
+                      <div className="ms-4 border-s-2 border-muted ps-2">
+                        <ul className="py-1 text-start">
+                          {navItem.submenu?.map((sub) => (
+                            <li
+                              key={sub.title}
+                              className="px-2 py-2 text-xs hover:bg-accent"
+                            >
+                              <a
+                                href={sub.href}
+                                className="block w-full text-start"
+                              >
+                                {sub.title}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                ) : (
+                  <div
+                    key={navItem.name}
+                    className="rounded-lg px-4 py-3 text-start text-xs hover:bg-accent"
+                  >
+                    <a href={navItem.link} className="block w-full text-start">
+                      <span className="text-foreground">{navItem.name}</span>
+                    </a>
+                  </div>
+                ),
+              )}
+            </Accordion>
+            <div className="flex flex-col gap-2 py-2">
+              <Button variant="secondary" className="px-3 text-xs">
+                ورود
+              </Button>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+export { Navbar18 };
diff --git a/blocks/navbar2.tsx b/blocks/navbar2.tsx
new file mode 100644
index 0000000..69e79f3
--- /dev/null
+++ b/blocks/navbar2.tsx
@@ -0,0 +1,302 @@
+"use client";
+import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface MenuItem {
+  title: string;
+  url: string;
+  description?: string;
+  icon?: React.ReactNode;
+  items?: MenuItem[];
+}
+
+interface Navbar2Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+    className?: string;
+  };
+  menu?: MenuItem[];
+  auth?: {
+    login: {
+      title: string;
+      url: string;
+    };
+    signup: {
+      title: string;
+      url: string;
+    };
+  };
+  className?: string;
+}
+
+const Navbar2 = ({
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "شادسی‌ان‌بلاکز",
+  },
+  menu = [
+    { title: "خانه", url: "#" },
+    {
+      title: "محصولات",
+      url: "#",
+      items: [
+        {
+          title: "وبلاگ",
+          description: "آخرین اخبار، به‌روزرسانی‌ها و اطلاعات صنعت",
+          icon: <Book className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "شرکت",
+          description: "مأموریت ما نوآوری و توانمندسازی جهان است",
+          icon: <Trees className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "فرصت‌های شغلی",
+          description: "فرصت‌های شغلی و فضای کاری ما",
+          icon: <Sunset className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "پشتیبانی",
+          description: "با تیم پشتیبانی تماس بگیرید یا به انجمن بروید",
+          icon: <Zap className="size-5 shrink-0" />,
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "منابع",
+      url: "#",
+      items: [
+        {
+          title: "راهنمای کاربران",
+          description: "همه پاسخ‌های موردنیاز اینجاست",
+          icon: <Zap className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "تماس با ما",
+          description: "برای هر سؤالی در کنار شما هستیم",
+          icon: <Sunset className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "وضعیت سرویس",
+          description: "وضعیت فعلی سرویس‌ها و اتصال هوشمند",
+          icon: <Trees className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "شرایط استفاده",
+          description: "قوانین و شرایط استفاده از خدمات",
+          icon: <Book className="size-5 shrink-0" />,
+          url: "#",
+        },
+      ],
+    },
+    { title: "قیمت‌گذاری", url: "#" },
+    { title: "وبلاگ", url: "#" },
+  ],
+  auth = {
+    login: { title: "ورود", url: "#" },
+    signup: { title: "ثبت‌نام", url: "#" },
+  },
+  className,
+}: Navbar2Props) => {
+  return (
+    <section
+      lang="fa"
+      className={cn("overflow-visible py-4 text-start", className)}
+    >
+      <div className="container">
+        <nav className="relative z-10 hidden justify-between overflow-visible lg:flex">
+          <a href={logo.url} className="flex items-center gap-2">
+            <img src={logo.src} className="max-h-8" alt={logo.alt} />
+            <span className="text-lg font-semibold tracking-tighter">
+              {logo.title}
+            </span>
+          </a>
+          <div className="flex items-center gap-6">
+            <NavigationMenu
+              dir="rtl"
+              viewport={false}
+              className="relative z-50 max-w-none overflow-visible"
+            >
+              <NavigationMenuList>
+                {menu.map((item) => renderMenuItem(item))}
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
+          <div className="flex gap-2">
+            <Button asChild variant="outline" size="sm">
+              <a href={auth.login.url}>{auth.login.title}</a>
+            </Button>
+            <Button asChild size="sm">
+              <a href={auth.signup.url}>{auth.signup.title}</a>
+            </Button>
+          </div>
+        </nav>
+
+        <div className="block lg:hidden">
+          <div className="flex items-center justify-between">
+            <a href={logo.url} className="flex items-center gap-2">
+              <img src={logo.src} className="max-h-8" alt={logo.alt} />
+            </a>
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  aria-label="باز کردن منو"
+                >
+                  <Menu className="size-4" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent
+                dir="rtl"
+                className="overflow-y-auto text-start"
+              >
+                <SheetHeader>
+                  <SheetTitle>
+                    <a href={logo.url} className="flex items-center gap-2">
+                      <img src={logo.src} className="max-h-8" alt={logo.alt} />
+                    </a>
+                  </SheetTitle>
+                </SheetHeader>
+                <div className="flex flex-col gap-6 p-4">
+                  <Accordion
+                    type="single"
+                    collapsible
+                    dir="rtl"
+                    className="flex w-full flex-col gap-4 text-start"
+                  >
+                    {menu.map((item) => renderMobileMenuItem(item))}
+                  </Accordion>
+                  <div className="flex flex-col gap-3">
+                    <Button asChild variant="outline">
+                      <a href={auth.login.url}>{auth.login.title}</a>
+                    </Button>
+                    <Button asChild>
+                      <a href={auth.signup.url}>{auth.signup.title}</a>
+                    </Button>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const renderMenuItem = (item: MenuItem) => {
+  if (item.items) {
+    return (
+      <NavigationMenuItem key={item.title} className="relative">
+        <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!me-0 [&_svg]:!ml-0">
+          {item.title}
+        </NavigationMenuTrigger>
+        <NavigationMenuContent
+          dir="rtl"
+          className="start-0 end-auto left-auto z-50 !w-80 max-w-[calc(100vw-2rem)] text-start"
+        >
+          {item.items.map((subItem) => (
+            <NavigationMenuLink asChild key={subItem.title}>
+              <SubMenuLink item={subItem} />
+            </NavigationMenuLink>
+          ))}
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem key={item.title}>
+      <NavigationMenuLink
+        href={item.url}
+        className="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-start text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground"
+      >
+        {item.title}
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  );
+};
+
+const renderMobileMenuItem = (item: MenuItem) => {
+  if (item.items) {
+    return (
+      <AccordionItem key={item.title} value={item.title} className="border-b-0">
+        <AccordionTrigger className="justify-start py-0 text-start text-base font-semibold hover:no-underline [&>svg]:ms-auto [&>svg]:me-0">
+          {item.title}
+        </AccordionTrigger>
+        <AccordionContent className="mt-2 text-start">
+          {item.items.map((subItem) => (
+            <SubMenuLink key={subItem.title} item={subItem} />
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+
+  return (
+    <a
+      key={item.title}
+      href={item.url}
+      className="block text-start text-base font-semibold"
+    >
+      {item.title}
+    </a>
+  );
+};
+
+const SubMenuLink = ({ item }: { item: MenuItem }) => {
+  return (
+    <a
+      className="flex w-full flex-row gap-4 rounded-md p-3 text-start leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-accent-foreground"
+      href={item.url}
+    >
+      <div className="shrink-0 text-muted-foreground">{item.icon}</div>
+      <div className="min-w-0">
+        <div className="text-sm font-semibold">{item.title}</div>
+        {item.description && (
+          <p className="text-sm leading-snug text-muted-foreground">
+            {item.description}
+          </p>
+        )}
+      </div>
+    </a>
+  );
+};
+
+export { Navbar2 };
diff --git a/blocks/navbar21.tsx b/blocks/navbar21.tsx
new file mode 100644
index 0000000..0eb57f5
--- /dev/null
+++ b/blocks/navbar21.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface MenuItem {
+  label: string;
+  href: string;
+}
+
+const menuItems: MenuItem[] = [
+  { label: "خانه", href: "#" },
+  { label: "پروژه‌ها", href: "#" },
+  { label: "درباره ما", href: "#" },
+  { label: "تماس", href: "#" },
+];
+
+const socialLinks = [
+  { label: "ایکس (توییتر)", href: "#" },
+  { label: "اینستاگرام", href: "#" },
+  { label: "آرت‌استیشن", href: "#" },
+];
+
+interface Navbar21Props {
+  className?: string;
+}
+
+const Navbar21 = ({ className }: Navbar21Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  return (
+    <section lang="fa" className={cn("text-start", className)}>
+      <div className="flex items-center justify-between px-6 py-6">
+        <div className="z-50">
+          <div className="flex items-center gap-2">
+            <img
+              src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg"
+              alt="لوگو"
+              className="h-9"
+            />
+          </div>
+        </div>
+
+        <div className="z-50">
+          <button
+            type="button"
+            onClick={toggleMenu}
+            aria-expanded={isOpen}
+            aria-label={isOpen ? "بستن منو" : "باز کردن منو"}
+            className="text-lg tracking-wider text-foreground transition-colors hover:text-muted-foreground"
+          >
+            <AnimatePresence mode="wait">
+              <motion.span
+                key={isOpen ? "close" : "menu"}
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                transition={{ duration: 0.2, ease: "easeInOut" }}
+              >
+                {isOpen ? "بستن" : "منو"}
+              </motion.span>
+            </AnimatePresence>
+          </button>
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="fixed inset-0 z-40 overflow-hidden bg-background"
+          >
+            <div className="flex h-full flex-col items-center justify-center px-6">
+              <motion.div
+                initial={{ y: 50, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 0.1, duration: 0.5 }}
+                className="mb-16 text-center"
+              >
+                {menuItems.map((item, index) => (
+                  <motion.div
+                    key={item.label}
+                    initial={{ y: 30, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ delay: 0.2 + index * 0.1, duration: 0.4 }}
+                    className="mb-5"
+                  >
+                    <a href={item.href} className="group relative inline-block">
+                      <motion.span
+                        className="relative z-10 text-xl font-black text-foreground transition-transform duration-300 md:text-2xll"
+                        initial={{ opacity: 1, filter: "blur(0px)" }}
+                        whileHover={{ opacity: 0.8, filter: "blur(6px)" }}
+                        transition={{ duration: 0.3, ease: "easeInOut" }}
+                      >
+                        {item.label}
+                      </motion.span>
+
+                      <motion.div
+                        className="absolute bottom-0 start-0 h-1 bg-primary"
+                        initial={{ width: 0 }}
+                        whileHover={{ width: "100%" }}
+                        transition={{ duration: 0.3 }}
+                      />
+                    </a>
+                  </motion.div>
+                ))}
+              </motion.div>
+
+              <motion.div
+                initial={{ y: 30, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 0.7, duration: 0.5 }}
+                className="flex flex-col gap-8 sm:flex-row sm:gap-12"
+              >
+                {socialLinks.map((link, index) => (
+                  <motion.a
+                    key={link.label}
+                    href={link.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="group flex items-center gap-2 font-mono text-sm tracking-wider text-muted-foreground transition-transform duration-300 hover:text-foreground group-hover:translate-x-1 rtl:group-hover:-translate-x-1"
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ delay: 0.8 + index * 0.1, duration: 0.3 }}
+                  >
+                    <span>{link.label}</span>
+                  </motion.a>
+                ))}
+              </motion.div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </section>
+  );
+};
+
+export { Navbar21 };
diff --git a/blocks/navbar22.tsx b/blocks/navbar22.tsx
new file mode 100644
index 0000000..8989752
--- /dev/null
+++ b/blocks/navbar22.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { Menu } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface Navbar22Props {
+  className?: string;
+}
+
+const Navbar22 = ({ className }: Navbar22Props) => {
+  const [currentTime, setCurrentTime] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const updateTime = () => {
+      const now = new Date();
+      const timeString = now.toLocaleTimeString("fa-IR", {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: false,
+      });
+      setCurrentTime(timeString);
+    };
+
+    updateTime();
+    const interval = setInterval(updateTime, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const navLinks = [
+    { name: "خانه", href: "#" },
+    { name: "درباره ما", href: "#about" },
+    { name: "قیمت‌گذاری", href: "#pricing" },
+    { name: "تماس", href: "#contact" },
+  ];
+
+  return (
+    <section lang="fa" className={cn("py-4 text-start", className)}>
+      <div className="container">
+        <nav className="w-full">
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div className="flex h-16 items-center justify-between">
+              <div className="flex items-center gap-2">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                  className="max-h-8 dark:invert"
+                  alt="شادسی‌ان‌بلاکز"
+                />
+                <span className="text-lg font-semibold tracking-tighter">
+                  شادسی‌ان‌بلاکز
+                </span>
+              </div>
+              <div className="hidden items-center gap-8 md:flex">
+                {navLinks.map((link) => (
+                  <a
+                    key={link.name}
+                    href={link.href}
+                    className="group relative inline-block h-6 overflow-hidden text-sm font-medium text-muted-foreground hover:text-foreground"
+                  >
+                    <span className="block transition-transform duration-300 group-hover:-translate-y-full">
+                      {link.name}
+                    </span>
+                    <span className="absolute start-0 block w-full border-border border-primary transition-transform duration-300 group-hover:translate-y-[-100%] group-hover:border-b">
+                      {link.name}
+                    </span>
+                  </a>
+                ))}
+              </div>
+              <div className="hidden items-center gap-2 text-sm text-muted-foreground lg:flex">
+                <span className="font-medium">بریزبن</span>
+                <span className="text-muted-foreground">/</span>
+                <span className="font-medium">
+                  {currentTime ? currentTime : "در حال بارگذاری…"}
+                </span>
+              </div>
+              <div className="md:hidden">
+                <Sheet open={isOpen} onOpenChange={setIsOpen}>
+                  <SheetTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="text-muted-foreground hover:bg-muted hover:text-foreground"
+                    >
+                      <Menu className="h-5 w-5" />
+                      <span className="sr-only">باز کردن منو</span>
+                    </Button>
+                  </SheetTrigger>
+                  <SheetContent side="top" className="h-screen text-start">
+                    <SheetTitle className="sr-only">منوی اصلی</SheetTitle>
+                    <div className="m-4 flex flex-col gap-6">
+                      <div className="ms-3">
+                        <a
+                          href="/"
+                          className="flex items-center justify-start gap-2 text-xl font-bold text-foreground"
+                          onClick={() => setIsOpen(false)}
+                        >
+                          <img
+                            src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                            className="max-h-8 dark:invert"
+                            alt="شادسی‌ان‌بلاکز"
+                          />
+                          <span className="text-lg font-semibold tracking-tighter">
+                            شادسی‌ان‌بلاکز
+                          </span>
+                        </a>
+                      </div>
+                      <div className="flex flex-col gap-4">
+                        {navLinks.map((link) => (
+                          <a
+                            key={link.name}
+                            href={link.href}
+                            onClick={() => setIsOpen(false)}
+                            className="rounded-lg px-4 py-2 text-lg font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                          >
+                            {link.name}
+                          </a>
+                        ))}
+                      </div>
+                      <div className="border-t border-border pt-6">
+                        <div className="text-center text-sm text-muted-foreground">
+                          <div className="font-medium">بریزبن</div>
+                          <div className="mt-1">
+                            {currentTime ? currentTime : "در حال بارگذاری…"}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </SheetContent>
+                </Sheet>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </section>
+  );
+};
+
+export { Navbar22 };
diff --git a/blocks/navbar24.tsx b/blocks/navbar24.tsx
new file mode 100644
index 0000000..c58c7be
--- /dev/null
+++ b/blocks/navbar24.tsx
@@ -0,0 +1,304 @@
+"use client";
+
+import {
+  Bell,
+  Heart,
+  Home,
+  LogOut,
+  PanelBottomOpen,
+  Settings,
+  ShoppingCart,
+  User,
+} from "lucide-react";
+import type { MotionValue } from "motion/react";
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+} from "motion/react";
+import { useRef, useState } from "react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Navbar24Props {
+  /** When true, positions inside the block preview instead of the viewport. */
+  contained?: boolean;
+  className?: string;
+}
+
+const Navbar24 = ({ contained = false, className }: Navbar24Props) => {
+  const dockPosition = contained ? "absolute" : "fixed";
+
+  const tabs = [
+    {
+      title: "خانه",
+      icon: <Home />,
+      href: "#home",
+    },
+    {
+      title: "اعلان‌ها",
+      icon: <Bell />,
+      href: "#notifications",
+    },
+    {
+      title: "پروفایل",
+      icon: <User />,
+      href: "#profile",
+    },
+    {
+      title: "تنظیمات",
+      icon: <Settings />,
+      href: "#settings",
+    },
+    {
+      title: "علاقه‌مندی‌ها",
+      icon: <Heart />,
+      href: "#favorites",
+    },
+    {
+      title: "سبد خرید",
+      icon: <ShoppingCart />,
+      href: "#cart",
+    },
+    {
+      title: "خروج",
+      icon: <LogOut />,
+      href: "#logout",
+    },
+  ];
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative overflow-visible",
+        contained ? "py-8" : "py-32",
+        className,
+      )}
+    >
+      <div className="container flex justify-center">
+        <FloatingDock
+          contained={contained}
+          desktopClassName={cn(
+            dockPosition,
+            "bottom-4 left-1/2 -translate-x-1/2",
+          )}
+          mobileClassName={cn(dockPosition, "right-6 bottom-6")}
+          items={tabs}
+        />
+      </div>
+    </section>
+  );
+};
+export { Navbar24 };
+
+// Below is the modified component from Aceternity UI
+// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/floating-dock.json
+// Modified to follow our coding standards and design system
+// We respect copyright and attribution to the original creators
+
+const FloatingDock = ({
+  items,
+  desktopClassName,
+  mobileClassName,
+  contained = false,
+}: {
+  items: { title: string; icon: React.ReactNode; href: string }[];
+  desktopClassName?: string;
+  mobileClassName?: string;
+  contained?: boolean;
+}) => {
+  return (
+    <>
+      <FloatingDockDesktop items={items} className={desktopClassName} />
+      <FloatingDockMobile
+        items={items}
+        className={cn(mobileClassName, contained && "relative")}
+      />
+    </>
+  );
+};
+
+const FloatingDockMobile = ({
+  items,
+  className,
+}: {
+  items: { title: string; icon: React.ReactNode; href: string }[];
+  className?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className={cn("block md:hidden", className)}>
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            layoutId="nav"
+            className="absolute inset-x-0 bottom-full z-99 mb-2 flex flex-col gap-2"
+          >
+            {items.map((item, idx) => (
+              <motion.div
+                key={item.title}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                }}
+                exit={{
+                  opacity: 0,
+                  y: 10,
+                  transition: {
+                    delay: idx * 0.05,
+                  },
+                }}
+                transition={{ delay: (items.length - 1 - idx) * 0.05 }}
+              >
+                <a
+                  href={item.href}
+                  key={item.title}
+                  className="flex h-10 w-10 items-center justify-center rounded-xl bg-foreground text-muted-foreground"
+                >
+                  <div>{item.icon}</div>
+                </a>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        aria-label={open ? "بستن منو" : "باز کردن منو"}
+        className="flex h-10 w-10 items-center justify-center rounded-xl bg-foreground text-muted-foreground"
+      >
+        <PanelBottomOpen />
+      </button>
+    </div>
+  );
+};
+
+const FloatingDockDesktop = ({
+  items,
+  className,
+}: {
+  items: { title: string; icon: React.ReactNode; href: string }[];
+  className?: string;
+}) => {
+  const mouseX = useMotionValue(Infinity);
+  return (
+    <motion.div
+      onMouseMove={(e) => mouseX.set(e.pageX)}
+      onMouseLeave={() => mouseX.set(Infinity)}
+      className={cn(
+        "z-99 mx-auto hidden h-16 items-center justify-center gap-2 rounded-3xl bg-foreground px-5 md:flex",
+        className,
+      )}
+    >
+      {items.map((item) => (
+        <IconContainer mouseX={mouseX} key={item.title} {...item} />
+      ))}
+    </motion.div>
+  );
+};
+
+function IconContainer({
+  mouseX,
+  title,
+  icon,
+  href,
+}: {
+  mouseX: MotionValue;
+  title: string;
+  icon: React.ReactNode;
+  href: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const distance = useTransform(mouseX, (val) => {
+    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+
+    return val - bounds.x - bounds.width / 2;
+  });
+
+  const widthTransform = useTransform(distance, [-150, 0, 150], [40, 60, 40]);
+  const heightTransform = useTransform(distance, [-150, 0, 150], [40, 60, 40]);
+
+  const widthTransformIcon = useTransform(
+    distance,
+    [-150, 0, 150],
+    [20, 40, 20],
+  );
+  const heightTransformIcon = useTransform(
+    distance,
+    [-150, 0, 150],
+    [20, 40, 20],
+  );
+
+  const width = useSpring(widthTransform, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+  const height = useSpring(heightTransform, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  const widthIcon = useSpring(widthTransformIcon, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+  const heightIcon = useSpring(heightTransformIcon, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  const rounded = useSpring(
+    useTransform(distance, [-150, 0, 150], [50, 10, 50]),
+    {
+      mass: 0.1,
+      stiffness: 150,
+      damping: 12,
+    },
+  );
+
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <a href={href}>
+      <motion.div
+        ref={ref}
+        style={{ width, height, borderRadius: rounded }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        className="relative flex aspect-square items-center justify-center bg-background/10"
+      >
+        <AnimatePresence>
+          {hovered && (
+            <motion.div
+              initial={{ opacity: 0, y: 10, x: "-50%" }}
+              animate={{ opacity: 1, y: 0, x: "-50%" }}
+              exit={{ opacity: 0, y: 2, x: "-50%" }}
+              className="absolute -top-8 left-1/2 w-fit rounded-full bg-muted px-4 py-0.5 text-xs whitespace-pre"
+            >
+              {title}
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <motion.div
+          style={{ width: widthIcon, height: heightIcon }}
+          className="flex items-center justify-center text-muted-foreground"
+        >
+          {icon}
+        </motion.div>
+      </motion.div>
+    </a>
+  );
+}
diff --git a/blocks/navbar29.tsx b/blocks/navbar29.tsx
new file mode 100644
index 0000000..c904ee2
--- /dev/null
+++ b/blocks/navbar29.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const NAV_ITEMS = [
+  { label: "خانه", href: "#" },
+  { label: "بلاک‌ها", href: "#" },
+  { label: "تغییرات", href: "#" },
+  { label: "تماس", href: "#" },
+];
+
+const MEGA_MENU_ITEMS = [
+  [
+    { label: "خانه", href: "#" },
+    { label: "درباره ما", href: "#" },
+    { label: "خدمات", href: "#" },
+    { label: "مطالعات موردی", href: "#" },
+    { label: "وبلاگ", href: "#" },
+    { label: "تماس", href: "#" },
+  ],
+  [
+    { label: "ویژگی‌ها", href: "#" },
+    { label: "بلاک", href: "#" },
+    { label: "قالب‌ها", href: "#" },
+    { label: "نمونه‌ها", href: "#" },
+    { label: "منابع", href: "#" },
+    { label: "پشتیبانی", href: "#" },
+  ],
+  [
+    { label: "قیمت‌گذاری", href: "#" },
+    { label: "سازمانی", href: "#" },
+    { label: "شراکت‌ها", href: "#" },
+    { label: "فرصت‌های شغلی", href: "#" },
+    { label: "مطبوعات", href: "#" },
+    { label: "حقوقی", href: "#" },
+  ],
+  [
+    { label: "توییتر", href: "#" },
+    { label: "گیت‌هاب", href: "#" },
+    { label: "دیسکورد", href: "#" },
+    { label: "لینکدین", href: "#" },
+    { label: "یوتیوب", href: "#" },
+    { label: "خبرنامه", href: "#" },
+  ],
+];
+
+const MOBILE_NAV_ITEMS = [
+  { label: "خانه", href: "#" },
+  { label: "درباره ما", href: "#" },
+  { label: "خدمات", href: "#" },
+  { label: "نمونه‌کارها", href: "#" },
+  { label: "وبلاگ", href: "#" },
+  { label: "تماس", href: "#" },
+  { label: "ورود", href: "#" },
+  { label: "قیمت‌گذاری", href: "#" },
+];
+
+const FOOTER_LINKS = [
+  { label: "حریم خصوصی", href: "#" },
+  { label: "شرایط استفاده", href: "#" },
+];
+
+const COMPANY_LINKS = [
+  { label: "+۱ (۱۲۰) ۲۳۳-۱۲۳۱", href: "#" },
+  { label: "۱۴۰۴© شادسی‌ان‌بلاکز", href: "#" },
+];
+
+interface Navbar29Props {
+  className?: string;
+}
+
+const Navbar29 = ({ className }: Navbar29Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("text-right", className)}>
+      <nav className="relative overflow-visible">
+        <ul className="relative z-1 flex w-full items-center justify-between gap-4 p-6 text-lg font-semibold tracking-tight">
+          <li className="w-35">شادسی‌ان‌بلاکز</li>
+          {NAV_ITEMS.map((item) => (
+            <li key={item.label} className="hidden w-32 lg:block">
+              <a
+                href={item.href}
+                className="transition-colors hover:text-foreground/70"
+              >
+                {item.label}
+              </a>
+            </li>
+          ))}
+          <li className="lg:w-14">
+            <Menu setIsOpen={setIsOpen} isOpen={isOpen} />
+          </li>
+        </ul>
+
+        <AnimatePresence mode="popLayout">
+          {isOpen && (
+            <motion.div
+              className="absolute top-0 w-full bg-muted px-6 pt-30 pb-10 text-right"
+              initial={{ clipPath: "inset(0 0 100% 0)" }}
+              animate={{ clipPath: "inset(0% 0 0 0)" }}
+              exit={{ clipPath: "inset(0 0 100% 0)" }}
+              transition={{
+                duration: 0.35,
+                ease: [0.4, 0.0, 0.2, 1],
+              }}
+            >
+              <div className="flex lg:hidden">
+                <ul className="flex w-full flex-col gap-5 text-xl font-semibold tracking-tight">
+                  {MOBILE_NAV_ITEMS.map((item) => (
+                    <li key={item.label}>
+                      <a href={item.href}>{item.label}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="hidden w-full items-center justify-between gap-4 lg:flex">
+                <div className="w-35 opacity-0">شادسی‌ان‌بلاکز</div>
+                {MEGA_MENU_ITEMS.map((section, sectionIndex) => (
+                  <ul key={sectionIndex} className="space-y-5">
+                    {section.map((item) => (
+                      <li
+                        key={item.label}
+                        className={cn(
+                          "group flex w-32 items-center gap-1 text-foreground/40 hover:text-foreground",
+                        )}
+                      >
+                        <a href={item.href}>{item.label}</a>
+                        <ArrowUpRight className="size-4 translate-y-2 opacity-0 transition-all ease-out group-hover:translate-y-0 group-hover:opacity-100 rtl:rotate-180" />
+                      </li>
+                    ))}
+                  </ul>
+                ))}
+                <div className="w-14" />
+              </div>
+              <div className="mt-40 flex w-full flex-col items-center justify-between gap-2 text-sm lg:flex-row lg:gap-4 lg:text-base">
+                <div className="flex items-center gap-4 lg:gap-10">
+                  {COMPANY_LINKS.map((item) => (
+                    <p key={item.label}>{item.label}</p>
+                  ))}
+                </div>
+                <div className="flex items-center gap-4 lg:gap-10">
+                  {FOOTER_LINKS.map((item) => (
+                    <p key={item.label}>{item.label}</p>
+                  ))}
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </nav>
+    </section>
+  );
+};
+
+export { Navbar29 };
+
+const Menu = ({
+  className,
+  setIsOpen,
+  isOpen,
+}: {
+  className?: string;
+  setIsOpen: (value: boolean | ((prev: boolean) => boolean)) => void;
+  isOpen: boolean;
+}) => {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "relative flex h-2 w-8 flex-col items-center justify-center gap-2 after:absolute after:h-12 after:w-full lg:w-14",
+        className,
+      )}
+      onClick={() => setIsOpen((x: boolean) => !x)}
+      aria-expanded={isOpen}
+      aria-label={isOpen ? "بستن منو" : "باز کردن منو"}
+    >
+      <motion.div
+        animate={{ y: isOpen ? 0 : 5, rotate: isOpen ? 45 : 0 }}
+        className="absolute h-0.5 w-full bg-foreground"
+      />
+      <motion.div
+        animate={{ y: isOpen ? 0 : -5, rotate: isOpen ? -45 : 0 }}
+        className="absolute h-0.5 w-full bg-foreground"
+      />
+    </button>
+  );
+};
diff --git a/blocks/navbar3.tsx b/blocks/navbar3.tsx
new file mode 100644
index 0000000..77f9cae
--- /dev/null
+++ b/blocks/navbar3.tsx
@@ -0,0 +1,689 @@
+"use client";
+
+import {
+  ArrowUpRight,
+  BarChart,
+  Bitcoin,
+  Building,
+  Building2,
+  ChevronLeft,
+  ChevronRight,
+  Cloud,
+  Cpu,
+  Film,
+  Fingerprint,
+  GraduationCap,
+  HeartPulse,
+  Leaf,
+  Lock,
+  Menu,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import {
+  Logo,
+  LogoImageDesktop,
+  LogoImageMobile,
+} from "@/components/shadcnblocks/logo";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+
+const solutions = [
+  {
+    title: "زیرساخت ابری",
+    description: "راه‌حل‌های ابری مقیاس‌پذیر برای کسب‌وکارهای مدرن.",
+    href: "#",
+    icon: Cloud,
+  },
+  {
+    title: "امنیت و انطباق",
+    description: "امنیت سطح سازمانی با انطباق خودکار.",
+    href: "#",
+    icon: Lock,
+  },
+  {
+    title: "مدیریت هویت",
+    description: "احراز هویت پیشرفته و کنترل دسترسی.",
+    href: "#",
+    icon: Fingerprint,
+  },
+];
+
+const useCases = [
+  { title: "بانکداری", href: "#", icon: Building2 },
+  { title: "سلامت", href: "#", icon: HeartPulse },
+  { title: "فناوری", href: "#", icon: Cpu },
+  { title: "آموزش", href: "#", icon: GraduationCap },
+  { title: "کشاورزی", href: "#", icon: Leaf },
+  { title: "بانک به‌عنوان سرویس", href: "#", icon: Building },
+  { title: "سرگرمی", href: "#", icon: Film },
+  { title: "SaaS", href: "#", icon: BarChart },
+  { title: "ارز دیجیتال", href: "#", icon: Bitcoin },
+];
+
+const documentationLinks = [
+  { title: "مرجع اتصال هوشمند", href: "#" },
+  { title: "مستندات SDK", href: "#" },
+  { title: "راهنمای یکپارچه‌سازی", href: "#" },
+  { title: "نمونه کد", href: "#" },
+];
+
+const resources = [
+  {
+    title: "وبلاگ",
+    description: "آخرین بینش‌ها، آموزش‌ها و بهترین روش‌ها.",
+    href: "#",
+  },
+  {
+    title: "اخبار",
+    description: "به‌روزرسانی محصول، اعلان‌ها و اخبار شرکت.",
+    href: "#",
+  },
+];
+
+interface Navbar3Props {
+  contained?: boolean;
+  className?: string;
+}
+
+const mobileMenuOverlayClass = (contained: boolean) =>
+  cn(
+    "flex w-full flex-col overflow-scroll border-t border-border bg-background text-start lg:hidden",
+    contained
+      ? "absolute inset-x-0 top-full z-50 max-h-[min(70vh,32rem)]"
+      : "fixed inset-0 top-[72px] z-50 h-[calc(100vh-72px)]",
+  );
+
+const Navbar3 = ({ contained = false, className }: Navbar3Props) => {
+  const [open, setOpen] = useState(false);
+  const [submenu, setSubmenu] = useState<
+    "platform" | "usecases" | "developers" | "resources" | null
+  >(null);
+  return (
+    <section
+      lang="fa"
+      className={cn(
+        "z-20 bg-background text-start",
+        contained ? "relative overflow-visible" : "inset-x-0 top-0",
+        className,
+      )}
+    >
+      <div className="container">
+        <NavigationMenu
+          dir="rtl"
+          className={cn(
+            "min-w-full text-start",
+            contained
+              ? "[&>div:last-child]:inset-x-0 [&>div:last-child]:w-full [&>div:last-child]:justify-center [&>div:last-child>div]:w-full [&>div:last-child>div]:max-w-full"
+              : "[&>div:last-child]:left-1/2 [&>div:last-child]:-translate-x-1/2",
+          )}
+        >
+          <div className="flex w-full items-center justify-between gap-12 py-4">
+            {/* Logo */}
+            <div>
+              {(!open || !submenu) && (
+                <>
+                  <Logo url="https://ShadcnBlocks">
+                    <LogoImageDesktop
+                      src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg"
+                      className="h-7 dark:invert"
+                      alt="لوگو"
+                    />
+                    <LogoImageMobile
+                      src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
+                      className="h-7 dark:invert"
+                      alt="لوگو"
+                    />
+                  </Logo>
+                </>
+              )}
+              {open && submenu && (
+                <Button variant="outline" onClick={() => setSubmenu(null)}>
+                  <ChevronLeft />
+                  بازگشت
+                </Button>
+              )}
+            </div>
+
+            <NavigationMenuList className="hidden lg:flex">
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+                  پلتفرم
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  dir="rtl"
+                  className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
+                >
+                  <div className="flex justify-between gap-8">
+                    <NavigationMenuLink
+                      href="#"
+                      className="group w-1/3 p-0 hover:bg-transparent"
+                    >
+                      <div className="overflow-clip rounded-lg border border-input bg-background">
+                        <div>
+                          <img
+                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                            alt="تصویر نمونه"
+                            className="aspect-[4/3] object-cover object-center"
+                          />
+                        </div>
+                        <div className="p-5 xl:p-8">
+                          <div className="mb-2 text-base">نمای کلی پلتفرم</div>
+                          <div className="text-sm font-normal text-muted-foreground">
+                            ببینید پلتفرم چگونه گردش کار شما را متحول می‌کند.
+                          </div>
+                        </div>
+                      </div>
+                    </NavigationMenuLink>
+                    <div className="max-w-[760px] flex-1">
+                      <div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                        راه‌حل‌ها
+                      </div>
+                      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-8">
+                        {solutions.map((solution, index) => (
+                          <NavigationMenuLink
+                            key={index}
+                            href={solution.href}
+                            className="group block p-4"
+                          >
+                            <div className="mb-5 group-hover:opacity-60">
+                              <solution.icon className="size-5" />
+                            </div>
+                            <div className="mb-1 text-base">
+                              {solution.title}
+                            </div>
+                            <div className="text-sm font-normal text-muted-foreground">
+                              {solution.description}
+                            </div>
+                          </NavigationMenuLink>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+                  موارد استفاده
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  dir="rtl"
+                  className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
+                >
+                  <div className="flex justify-between gap-4">
+                    <div className="w-1/2 max-w-[510px]">
+                      <div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                        موارد استفاده
+                      </div>
+                      <div className="grid grid-cols-2 gap-4">
+                        {useCases.map((useCase, index) => (
+                          <NavigationMenuLink
+                            key={index}
+                            href={useCase.href}
+                            className="group flex flex-row items-center gap-5"
+                          >
+                            <div className="group-hover:opacity-60">
+                              <useCase.icon className="size-4" />
+                            </div>
+                            <div className="text-base">{useCase.title}</div>
+                          </NavigationMenuLink>
+                        ))}
+                      </div>
+                    </div>
+                    <NavigationMenuLink
+                      href="#"
+                      className="group flex-1 p-0 hover:bg-transparent"
+                    >
+                      <div className="flex h-full rounded-lg border border-input bg-background p-0 hover:bg-transparent">
+                        <div className="w-2/5 max-w-[310px] shrink-0 overflow-clip rounded-ss-lg rounded-es-lg">
+                          <img
+                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                            alt="تصویر نمونه"
+                            className="h-full w-full object-cover object-center"
+                          />
+                        </div>
+                        <div className="flex flex-col p-5 xl:p-8">
+                          <div className="mb-8 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                            برای شخصیت کاربری
+                          </div>
+                          <div className="mt-auto text-start">
+                            <div className="mb-4 text-xl">
+                              دعوت به اقدام برای کاربر هدف
+                            </div>
+                            <div className="text-sm font-normal text-muted-foreground">
+                              راه‌حل‌های متناسب با نیازهای منحصربه‌فرد تیم شما.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </NavigationMenuLink>
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+                  توسعه‌دهندگان
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  dir="rtl"
+                  className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
+                >
+                  <div className="flex justify-between gap-8">
+                    <div className="w-1/3 max-w-[404px]">
+                      <div className="mb-4 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                        مستندات
+                      </div>
+                      <div className="mb-6 text-start text-sm font-normal text-muted-foreground">
+                        دعوت به اقدام برای توسعه‌دهندگان
+                      </div>
+                      <div className="-me-2.5 space-y-2.5">
+                        {documentationLinks.map((documentationLink, index) => (
+                          <NavigationMenuLink
+                            key={index}
+                            href={documentationLink.href}
+                            className="group flex flex-row items-center gap-2.5 rounded-md p-2.5 focus:text-accent-foreground"
+                          >
+                            <ArrowUpRight className="size-4 rtl:rotate-180" />
+                            <div className="text-base">
+                              {documentationLink.title}
+                            </div>
+                          </NavigationMenuLink>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="max-w-[716px] flex-1 space-y-6">
+                      <NavigationMenuLink
+                        href="#"
+                        className="flex flex-row items-center overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
+                      >
+                        <div className="flex-1 p-5 xl:p-8">
+                          <div className="mb-2 text-base">نمونه پیاده‌سازی</div>
+                          <div className="text-sm font-normal text-muted-foreground">
+                            پیاده‌سازی‌های واقعی و گزارش‌های موفقیت جامعه ما.
+                          </div>
+                        </div>
+                        <div className="h-[154px] max-w-[264px] shrink-0">
+                          <img
+                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                            alt="تصویر نمونه"
+                            className="h-full w-full object-cover object-center"
+                          />
+                        </div>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink
+                        href="#"
+                        className="flex flex-row items-center overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
+                      >
+                        <div className="flex-1 p-5 xl:p-8">
+                          <div className="mb-2 text-base">لینک نمونه دیگر</div>
+                          <div className="text-sm font-normal text-muted-foreground">
+                            بهترین روش‌ها و تکنیک‌های پیشرفته از توسعه‌دهندگان
+                            خبره.
+                          </div>
+                        </div>
+                        <div className="h-[154px] max-w-[264px] shrink-0">
+                          <img
+                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                            alt="تصویر نمونه"
+                            className="h-full w-full object-cover object-center"
+                          />
+                        </div>
+                      </NavigationMenuLink>
+                    </div>
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+                  منابع
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  dir="rtl"
+                  className="min-w-[min(900px,100%)] max-w-full p-8 text-start"
+                >
+                  <div className="grid grid-cols-2 gap-8">
+                    <div className="flex flex-1 flex-col">
+                      <div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                        منابع
+                      </div>
+                      <div className="grid flex-1 grid-cols-1 gap-6 md:grid-cols-2">
+                        {resources.map((resource, index) => (
+                          <NavigationMenuLink
+                            key={index}
+                            href={resource.href}
+                            className="flex h-full flex-col overflow-clip rounded-lg border border-input bg-background p-5 hover:bg-accent hover:text-accent-foreground xl:p-8"
+                          >
+                            <div className="mt-auto">
+                              <div className="mb-2 text-base">
+                                {resource.title}
+                              </div>
+                              <div className="text-sm font-normal text-muted-foreground">
+                                {resource.description}
+                              </div>
+                            </div>
+                          </NavigationMenuLink>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="">
+                      <div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                        مشتریان
+                      </div>
+                      <NavigationMenuLink
+                        href="#"
+                        className="mb-6 flex flex-row overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
+                      >
+                        <div className="flex-1 p-5 xl:p-8 text-start">
+                          <div className="mb-2 text-base">مشتریان</div>
+                          <div className="text-sm font-normal text-muted-foreground">
+                            ببینید شرکت‌های پیشرو چگونه از پلتفرم ما برای نوآوری
+                            استفاده می‌کنند.
+                          </div>
+                        </div>
+                        <div className="w-1/3 max-w-[130px] shrink-0">
+                          <img
+                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                            alt="تصویر نمونه"
+                            className="h-full w-full object-cover object-center"
+                          />
+                        </div>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink
+                        href="#"
+                        className="flex flex-row items-center gap-3 rounded-lg bg-secondary/30 p-3 hover:bg-secondary/80 focus:bg-secondary/80"
+                      >
+                        <Badge variant="secondary">جدید</Badge>
+                        <span className="text-sm text-ellipsis text-secondary-foreground">
+                          معرفی آخرین قابلیت: داشبورد تحلیل پیشرفته
+                        </span>
+                      </NavigationMenuLink>
+                    </div>
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+            <div className="hidden items-center gap-2 lg:flex">
+              <Button variant="ghost">ورود</Button>
+              <Button variant="outline">
+                همین حالا شروع کنید
+                <ChevronRight className="size-4 rtl:rotate-180" />
+              </Button>
+            </div>
+            <div className="flex items-center gap-4 lg:hidden">
+              <Button
+                variant="outline"
+                size="icon"
+                aria-label="منوی اصلی"
+                onClick={() => {
+                  if (open) {
+                    setOpen(false);
+                    setSubmenu(null);
+                  } else {
+                    setOpen(true);
+                  }
+                }}
+              >
+                {!open && <Menu className="size-4" />}
+                {open && <X className="size-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Mobile Menu (Root) */}
+          {open && (
+            <div className={mobileMenuOverlayClass(contained)}>
+              <div>
+                <button
+                  type="button"
+                  className="flex w-full items-center border-b border-border px-8 py-7 text-start"
+                  onClick={() => setSubmenu("platform")}
+                >
+                  <span className="flex-1">پلتفرم</span>
+                  <span className="shrink-0">
+                    <ChevronRight className="size-4 rtl:rotate-180" />
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  className="flex w-full items-center border-b border-border px-8 py-7 text-start"
+                  onClick={() => setSubmenu("usecases")}
+                >
+                  <span className="flex-1">موارد استفاده</span>
+                  <span className="shrink-0">
+                    <ChevronRight className="size-4 rtl:rotate-180" />
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  className="flex w-full items-center border-b border-border px-8 py-7 text-start"
+                  onClick={() => setSubmenu("developers")}
+                >
+                  <span className="flex-1">توسعه‌دهندگان</span>
+                  <span className="shrink-0">
+                    <ChevronRight className="size-4 rtl:rotate-180" />
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  className="flex w-full items-center border-b border-border px-8 py-7 text-start"
+                  onClick={() => setSubmenu("resources")}
+                >
+                  <span className="flex-1">منابع</span>
+                  <span className="shrink-0">
+                    <ChevronRight className="size-4 rtl:rotate-180" />
+                  </span>
+                </button>
+              </div>
+              <div className="mx-8 mt-auto flex flex-col gap-4 py-12">
+                <Button variant="outline" className="relative" size="lg">
+                  ورود
+                </Button>
+                <Button className="relative" size="lg">
+                  همین حالا شروع کنید
+                </Button>
+              </div>
+            </div>
+          )}
+          {/* Mobile Menu > Platform */}
+          {open && submenu === "platform" && (
+            <div className={mobileMenuOverlayClass(contained)}>
+              <a href="#" className="block space-y-6 px-8 py-8 text-start">
+                <div className="w-full overflow-clip rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                    className="aspect-2/1 h-full w-full object-cover object-center"
+                  />
+                </div>
+                <div>
+                  <div className="mb-2 text-base">نمای کلی پلتفرم</div>
+                  <div className="text-sm font-normal text-muted-foreground">
+                    ببینید پلتفرم چگونه گردش کار شما را متحول می‌کند.
+                  </div>
+                </div>
+              </a>
+              <div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                راه‌حل‌ها
+              </div>
+              <div className="border-t border-border pb-16">
+                {solutions.map((solution, index) => (
+                  <a
+                    key={index}
+                    href={solution.href}
+                    className="group flex w-full items-start gap-x-4 border-b border-border px-8 py-7 text-start hover:bg-accent"
+                  >
+                    <div className="shrink-0">
+                      <solution.icon className="size-6" />
+                    </div>
+                    <div>
+                      <div className="mb-1.5 text-base">{solution.title}</div>
+                      <div className="text-sm font-normal text-muted-foreground">
+                        {solution.description}
+                      </div>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+          {/* Mobile Menu > Use cases */}
+          {open && submenu === "usecases" && (
+            <div className={mobileMenuOverlayClass(contained)}>
+              <div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                موارد استفاده
+              </div>
+              <div>
+                {useCases.map((useCase, index) => (
+                  <a
+                    key={index}
+                    href={useCase.href}
+                    className="group flex w-full items-start gap-x-4 border-t border-border px-8 py-7 text-start hover:bg-accent"
+                  >
+                    <div className="shrink-0">
+                      <useCase.icon className="size-6" />
+                    </div>
+                    <div className="text-base">{useCase.title}</div>
+                  </a>
+                ))}
+              </div>
+              <div className="bg-secondary/30 px-8 pt-8 pb-16">
+                <div className="mb-7 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                  برای شخصیت کاربری
+                </div>
+                <a href="#" className="block space-y-6 text-start">
+                  <div className="overflow-clip rounded-lg">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="aspect-2/1 h-full w-full object-cover object-center"
+                    />
+                  </div>
+                  <div>
+                    <div className="mb-1.5 text-base">
+                      دعوت به اقدام برای کاربر هدف
+                    </div>
+                    <div className="text-sm font-normal text-muted-foreground">
+                      راه‌حل‌های متناسب با نیازهای منحصربه‌فرد تیم شما.
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          )}
+          {/* Mobile Menu > Developers */}
+          {open && submenu === "developers" && (
+            <div className={mobileMenuOverlayClass(contained)}>
+              <a href="#" className="block space-y-6 px-8 py-8 text-start">
+                <div className="w-full overflow-clip rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                    className="aspect-2/1 h-full w-full object-cover object-center"
+                  />
+                </div>
+                <div>
+                  <div className="mb-2 text-base">شروع با اتصال هوشمند ما</div>
+                  <div className="text-sm font-normal text-muted-foreground">
+                    مستندات و راهنماهای جامع برای یکپارچه‌سازی سریع.
+                  </div>
+                </div>
+              </a>
+              <a
+                href="#"
+                className="block space-y-6 border-t border-border px-8 py-8 text-start"
+              >
+                <div className="w-full overflow-clip rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                    alt="تصویر نمونه"
+                    className="aspect-2/1 h-full w-full object-cover object-center"
+                  />
+                </div>
+                <div>
+                  <div className="mb-2 text-base">شروع سریع</div>
+                  <div className="text-sm font-normal text-muted-foreground">
+                    در چند دقیقه با آموزش‌ها و نمونه‌های گام‌به‌گام شروع کنید.
+                  </div>
+                </div>
+              </a>
+              <div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                مستندات
+              </div>
+              <div className="-mx-2.5 space-y-2.5 px-8 pb-16">
+                {documentationLinks.map((documentationLink, index) => (
+                  <NavigationMenuLink
+                    key={index}
+                    href={documentationLink.href}
+                    className="group flex flex-row items-center gap-2.5 rounded-md px-2.5 py-[18px] focus:text-accent-foreground"
+                  >
+                    <div className="flex size-5 items-center justify-center rounded">
+                      <ArrowUpRight className="size-3 rtl:rotate-180" />
+                    </div>
+                    <div className="text-sm">{documentationLink.title}</div>
+                  </NavigationMenuLink>
+                ))}
+              </div>
+            </div>
+          )}
+          {/* Mobile Menu > Resources */}
+          {open && submenu === "resources" && (
+            <div className={mobileMenuOverlayClass(contained)}>
+              <div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                منابع
+              </div>
+              <div>
+                {resources.map((resource, index) => (
+                  <a
+                    key={index}
+                    href={resource.href}
+                    className="group flex w-full items-start gap-x-4 border-t border-border px-8 py-7 text-start hover:bg-accent"
+                  >
+                    <div>
+                      <div className="mb-1.5 text-base">{resource.title}</div>
+                      <div className="text-sm font-normal text-muted-foreground">
+                        {resource.description}
+                      </div>
+                    </div>
+                  </a>
+                ))}
+              </div>
+              <div className="px-8 pt-8 pb-16">
+                <div className="mb-7 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                  مشتریان
+                </div>
+                <a href="#" className="block space-y-6 text-start">
+                  <div className="overflow-clip rounded-lg">
+                    <img
+                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                      alt="تصویر نمونه"
+                      className="aspect-2/1 h-full w-full object-cover object-center"
+                    />
+                  </div>
+                  <div>
+                    <div className="mb-1.5 text-base">مشتریان</div>
+                    <div className="text-sm font-normal text-muted-foreground">
+                      ببینید شرکت‌های پیشرو چگونه از پلتفرم ما برای نوآوری
+                      استفاده می‌کنند.
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          )}
+        </NavigationMenu>
+      </div>
+    </section>
+  );
+};
+
+export { Navbar3 };
diff --git a/blocks/navbar33.tsx b/blocks/navbar33.tsx
new file mode 100644
index 0000000..5c5ae43
--- /dev/null
+++ b/blocks/navbar33.tsx
@@ -0,0 +1,275 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+
+interface DropdownItem {
+  title: string;
+  href: string;
+  description: string;
+}
+
+interface NavItem {
+  label: string;
+  href: string;
+  dropdownItems?: DropdownItem[];
+}
+
+interface Navbar33Props {
+  logo?: {
+    src: string;
+    alt: string;
+    href?: string;
+  };
+  items?: NavItem[];
+  loginHref?: string;
+  /** When true, positions inside a relative parent (e.g. block preview) instead of the viewport. */
+  contained?: boolean;
+  className?: string;
+}
+
+const Navbar33 = ({
+  logo = {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "لوگو",
+    href: "/",
+  },
+  items = [
+    {
+      label: "ویژگی‌ها",
+      href: "#features",
+      dropdownItems: [
+        {
+          title: "تیم‌های محصول مدرن",
+          href: "#feature-modern-teams",
+          description:
+            "بر پایه عادت‌هایی که بهترین تیم‌های محصول را موفق می‌کند",
+        },
+        {
+          title: "تخصیص منابع",
+          href: "#resource-allocation",
+          description: "تخصیص منابع و اجرای پروژه را ساده و یکپارچه کنید",
+        },
+      ],
+    },
+    { label: "درباره ما", href: "/about" },
+    { label: "قیمت‌گذاری", href: "/pricing" },
+    { label: "سوالات متداول", href: "/faq" },
+    { label: "تماس با ما", href: "/contact" },
+  ],
+  loginHref = "/login",
+  contained = false,
+  className,
+}: Navbar33Props) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const overlayPosition = contained ? "absolute" : "fixed";
+
+  return (
+    <header
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "z-50 w-full max-w-[700px] rounded-4xl border bg-background/70 backdrop-blur-md transition-all duration-300",
+        contained
+          ? "relative mx-auto overflow-visible"
+          : "fixed top-5 left-1/2 w-[min(90%,700px)] -translate-x-1/2 lg:top-12",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between px-6 py-3">
+        <a href={logo.href || "/"} className="flex shrink-0 items-center gap-2">
+          <img
+            src={logo.src}
+            alt={logo.alt}
+            className="h-5 w-auto dark:invert"
+          />
+        </a>
+
+        {/* Desktop Navigation */}
+        <NavigationMenu
+          className={cn("max-lg:hidden", contained && "relative z-50")}
+          viewport={false}
+        >
+          <NavigationMenuList>
+            {items.map((link) =>
+              link.dropdownItems ? (
+                <NavigationMenuItem key={link.label}>
+                  <NavigationMenuTrigger className="bg-transparent px-1.5 data-[state=open]:bg-accent/50">
+                    {link.label}
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent
+                    dir="rtl"
+                    className={cn(contained && "z-50")}
+                  >
+                    <ul className="w-[400px] space-y-2 p-4 text-right">
+                      {link.dropdownItems.map((item) => (
+                        <li key={item.title}>
+                          <NavigationMenuLink asChild>
+                            <a
+                              href={item.href}
+                              className="group flex items-center gap-4 rounded-md p-3 text-right leading-none no-underline outline-hidden transition-colors select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                            >
+                              <div className="space-y-1.5 transition-transform duration-300 group-hover:translate-x-1 rtl:group-hover:-translate-x-1">
+                                <div className="text-sm leading-none font-medium">
+                                  {item.title}
+                                </div>
+                                <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                  {item.description}
+                                </p>
+                              </div>
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              ) : (
+                <NavigationMenuItem key={link.label}>
+                  <a
+                    href={link.href}
+                    className="relative bg-transparent px-1.5 text-sm font-medium transition-opacity hover:opacity-75"
+                  >
+                    {link.label}
+                  </a>
+                </NavigationMenuItem>
+              ),
+            )}
+          </NavigationMenuList>
+        </NavigationMenu>
+
+        {/* Auth Buttons */}
+        <div className="flex items-center gap-2.5">
+          <a href={loginHref} className="max-lg:hidden">
+            <Button variant="outline"> 
+              <span className="relative z-10">ورود</span>
+            </Button>
+          </a>
+
+          {/* Hamburger Menu Button (Mobile Only) */}
+          <button
+            className="relative flex size-8 text-muted-foreground lg:hidden"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            <span className="sr-only">باز کردن منوی اصلی</span>
+            <div className="absolute top-1/2 left-1/2 block w-[18px] -translate-x-1/2 -translate-y-1/2">
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out",
+                  isMenuOpen ? "rotate-45" : "-translate-y-1.5",
+                )}
+              />
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out",
+                  isMenuOpen && "opacity-0",
+                )}
+              />
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out",
+                  isMenuOpen ? "-rotate-45" : "translate-y-1.5",
+                )}
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu Navigation */}
+      <div
+        dir="rtl"
+        lang="fa"
+        className={cn(
+          overlayPosition,
+          "inset-x-0 top-[calc(100%+1rem)] flex flex-col rounded-2xl border bg-background p-6 text-right transition-all duration-300 ease-in-out lg:hidden",
+          isMenuOpen
+            ? "visible translate-y-0 opacity-100"
+            : "invisible -translate-y-4 opacity-0",
+        )}
+      >
+        <nav className="flex flex-1 flex-col divide-y divide-border">
+          {items.map((link) =>
+            link.dropdownItems ? (
+              <div key={link.label} className="py-4 first:pt-0 last:pb-0">
+                <button
+                  onClick={() =>
+                    setOpenDropdown(
+                      openDropdown === link.label ? null : link.label,
+                    )
+                  }
+                  className="flex w-full items-center justify-between text-base font-medium text-primary"
+                >
+                  {link.label}
+                  <ChevronRight
+                    className={cn(
+                      "size-4 shrink-0 transition-transform duration-200 rtl:rotate-180",
+                      openDropdown === link.label && "rotate-90 rtl:-rotate-90",
+                    )}
+                  />
+                </button>
+                <div
+                  className={cn(
+                    "overflow-hidden transition-all duration-300",
+                    openDropdown === link.label
+                      ? "mt-4 max-h-[1000px] opacity-100"
+                      : "max-h-0 opacity-0",
+                  )}
+                >
+                  <div className="space-y-3 rounded-lg bg-muted/50 p-4">
+                    {link.dropdownItems.map((item) => (
+                      <a
+                        key={item.title}
+                        href={item.href}
+                        className="group block rounded-md p-2 transition-colors hover:bg-accent"
+                        onClick={() => {
+                          setIsMenuOpen(false);
+                          setOpenDropdown(null);
+                        }}
+                      >
+                        <div className="transition-transform duration-200 group-hover:translate-x-1 rtl:group-hover:-translate-x-1">
+                          <div className="font-medium text-primary">
+                            {item.title}
+                          </div>
+                          <p className="mt-1 text-sm text-muted-foreground">
+                            {item.description}
+                          </p>
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <a
+                key={link.label}
+                href={link.href}
+                className="py-4 text-base font-medium text-primary transition-colors first:pt-0 last:pb-0 hover:text-primary/80"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                {link.label}
+              </a>
+            ),
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export { Navbar33 };
diff --git a/blocks/navbar4.tsx b/blocks/navbar4.tsx
new file mode 100644
index 0000000..10fb09c
--- /dev/null
+++ b/blocks/navbar4.tsx
@@ -0,0 +1,1152 @@
+"use client";
+
+import {
+  AppWindow,
+  ArrowLeft,
+  ArrowRight,
+  ArrowRightLeft,
+  Book,
+  Building,
+  Building2,
+  Calculator,
+  Calendar,
+  CheckCircle2,
+  Clock,
+  Code,
+  Computer,
+  DollarSign,
+  File,
+  Flag,
+  Gavel,
+  Globe,
+  Globe2,
+  Lightbulb,
+  Lock,
+  Menu,
+  Mic,
+  Newspaper,
+  Phone,
+  PieChart,
+  Play,
+  PlayCircle,
+  Puzzle,
+  Pyramid,
+  Rocket,
+  Scale,
+  Search,
+  ShieldCheck,
+  Speech,
+  Table,
+  UserPlus,
+  UserRound,
+  Users,
+  X,
+} from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+
+const solutions = [
+  {
+    id: "solution-1",
+    title: "مدیریت تیم",
+    description: "همکاری تیمی و گردش کار پروژه را ساده کنید.",
+    href: "#",
+    subpages: [
+      {
+        id: "subpage-1",
+        title: "مدیریت وظایف",
+        href: "#",
+        icon: File,
+      },
+      {
+        id: "subpage-2",
+        title: "برنامه‌ریزی تیم",
+        href: "#",
+        icon: Building,
+      },
+      {
+        id: "subpage-3",
+        title: "تخصیص منابع",
+        href: "#",
+        icon: Search,
+      },
+      {
+        id: "subpage-4",
+        title: "ردیابی زمان",
+        href: "#",
+        icon: File,
+      },
+      {
+        id: "subpage-5",
+        title: "تحلیل تیم",
+        href: "#",
+        icon: UserPlus,
+      },
+    ],
+  },
+  {
+    id: "solution-2",
+    title: "مدیریت پروژه",
+    description: "پروژه‌ها را با اطمینان برنامه‌ریزی، پیگیری و تحویل دهید.",
+    href: "#",
+    subpages: [
+      {
+        id: "subpage-6",
+        title: "قالب‌های پروژه",
+        href: "#",
+        icon: CheckCircle2,
+      },
+      {
+        id: "subpage-7",
+        title: "نمای خط زمانی",
+        href: "#",
+        icon: UserRound,
+      },
+      {
+        id: "subpage-8",
+        title: "مدیریت ریسک",
+        href: "#",
+        icon: ShieldCheck,
+      },
+      {
+        id: "subpage-9",
+        title: "پیگیری بودجه",
+        href: "#",
+        icon: Scale,
+      },
+      {
+        id: "subpage-10",
+        title: "تیم‌های جهانی",
+        href: "#",
+        icon: Globe,
+      },
+    ],
+  },
+  {
+    id: "solution-3",
+    title: "اتوماسیون گردش کار",
+    description: "کارهای تکراری را خودکار کنید و روی مهم‌ترین‌ها تمرکز کنید.",
+    href: "#",
+    subpages: [
+      {
+        id: "subpage-11",
+        title: "گردش‌های سفارشی",
+        href: "#",
+        icon: Globe2,
+      },
+      {
+        id: "subpage-12",
+        title: "قالب فرایند",
+        href: "#",
+        icon: Clock,
+      },
+      {
+        id: "subpage-13",
+        title: "قوانین کسب‌وکار",
+        href: "#",
+        icon: DollarSign,
+      },
+      {
+        id: "subpage-14",
+        title: "یکپارچه‌سازی‌ها",
+        href: "#",
+        icon: Phone,
+      },
+      {
+        id: "subpage-15",
+        title: "دسترسی اتصال هوشمند",
+        href: "#",
+        icon: Speech,
+      },
+    ],
+  },
+  {
+    id: "solution-4",
+    title: "راه‌حل‌های سازمانی",
+    description: "سازمان خود را با قابلیت‌های سطح سازمانی مقیاس دهید.",
+    href: "#",
+    subpages: [
+      {
+        id: "subpage-16",
+        title: "تحلیل پیشرفته",
+        href: "#",
+        icon: PieChart,
+      },
+      {
+        id: "subpage-17",
+        title: "کنترل‌های امنیتی",
+        href: "#",
+        icon: Calculator,
+      },
+      {
+        id: "subpage-18",
+        title: "گزارش‌دهی سفارشی",
+        href: "#",
+        icon: Table,
+      },
+    ],
+  },
+];
+
+const solutionTechnologies = [
+  {
+    id: "technology-1",
+    title: "پلتفرم یکپارچه‌سازی",
+    href: "#",
+    icon: Puzzle,
+  },
+  {
+    id: "technology-2",
+    title: "امنیت سازمانی",
+    href: "#",
+    icon: Lock,
+  },
+  {
+    id: "technology-3",
+    title: "اتصال هوشمند توسعه‌دهندگان",
+    href: "#",
+    icon: Code,
+  },
+];
+
+const productCategories = [
+  {
+    title: "محصولات اصلی",
+    products: [
+      {
+        id: "product-1",
+        title: "مدیریت وظایف",
+        description: "کار را به‌صورت مؤثر سازماندهی و پیگیری کنید.",
+        href: "#",
+        image:
+          "/block-media/shadcnblocks/block/block-1.svg",
+      },
+      {
+        id: "product-2",
+        title: "تقویم تیم",
+        description: "برنامه‌ها و مهلت‌ها را هماهنگ کنید.",
+        href: "#",
+        image:
+          "/block-media/shadcnblocks/block/block-2.svg",
+      },
+      {
+        id: "product-3",
+        title: "گردش‌های کار",
+        description: "فرایندهای کسب‌وکار را خودکار کنید.",
+        href: "#",
+        image:
+          "/block-media/shadcnblocks/block/block-3.svg",
+      },
+    ],
+  },
+  {
+    title: "قابلیت‌های پیشرفته",
+    products: [
+      {
+        id: "product-4",
+        title: "مدیریت پورتفولیو",
+        description: "پورتفولیوی پروژه را در مقیاس بزرگ پیگیری و بهینه کنید.",
+        href: "#",
+        image:
+          "/block-media/shadcnblocks/block/block-4.svg",
+      },
+      {
+        id: "product-5",
+        title: "برنامه‌ریزی منابع",
+        description: "بار کاری و ظرفیت تیم را بهینه کنید.",
+        href: "#",
+        image:
+          "/block-media/shadcnblocks/block/block-5.svg",
+      },
+    ],
+  },
+];
+
+const globalCategories = [
+  {
+    title: "راه‌حل‌های سازمانی",
+    features: [
+      {
+        id: "feature-1",
+        title: "تحول دیجیتال",
+        description: "نحوه کار سازمان را با پلتفرم ما متحول کنید.",
+        href: "#",
+        icon: Rocket,
+      },
+      {
+        id: "feature-2",
+        title: "مدیریت تغییر",
+        description: "راهنمایی تخصصی برای تغییر و پذیرش سازمانی.",
+        href: "#",
+        icon: Building2,
+      },
+      {
+        id: "feature-3",
+        title: "استقرار جهانی",
+        description: "در تیم‌های جهانی به‌صورت یکپارچه گسترش دهید.",
+        href: "#",
+        icon: Globe2,
+      },
+    ],
+  },
+  {
+    title: "راه‌حل‌های کسب‌وکار",
+    features: [
+      {
+        id: "feature-4",
+        title: "موفقیت مشتری",
+        description: "پشتیبانی اختصاصی متناسب با نیاز کسب‌وکار شما.",
+        href: "#",
+        icon: Phone,
+      },
+      {
+        id: "feature-5",
+        title: "انطباق",
+        description: "استانداردها و مقررات صنعت را رعایت کنید.",
+        href: "#",
+        icon: Gavel,
+      },
+      {
+        id: "feature-6",
+        title: "محاسبه‌گر ROI",
+        description: "تأثیر بر کسب‌وکار خود را بسنجید.",
+        href: "#",
+        icon: DollarSign,
+      },
+      {
+        id: "feature-7",
+        title: "راه‌حل‌های فناوری",
+        description: "امنیت و ابزار مدیریت در سطح سازمانی.",
+        href: "#",
+        icon: Computer,
+      },
+      {
+        id: "feature-8",
+        title: "برنامه‌ریزی راهبردی",
+        description: "تیم‌ها را هم‌راستا و اهداف شرکت را پیگیری کنید.",
+        href: "#",
+        icon: Flag,
+      },
+    ],
+  },
+];
+
+const regions = [
+  {
+    title: "آسیا و اقیانوسیه",
+    locations: [
+      {
+        title: "چین",
+        href: "#",
+        icon: "🇨🇳",
+      },
+      {
+        title: "هند",
+        href: "#",
+        icon: "🇮🇳",
+      },
+      {
+        title: "ژاپن",
+        href: "#",
+        icon: "🇯🇵",
+      },
+      {
+        title: "تایلند",
+        href: "#",
+        icon: "🇹🇭",
+      },
+    ],
+  },
+  {
+    title: "اروپا",
+    locations: [
+      {
+        title: "ایتالیا",
+        href: "#",
+        icon: "🇮🇹",
+      },
+      {
+        title: "آلمان",
+        href: "#",
+        icon: "🇩🇪",
+      },
+      {
+        title: "لهستان",
+        href: "#",
+        icon: "🇵🇱",
+      },
+      {
+        title: "بریتانیا",
+        href: "#",
+        icon: "🇬🇧",
+      },
+    ],
+  },
+  {
+    title: "قاره آمریکا",
+    locations: [
+      {
+        title: "برزیل",
+        href: "#",
+        icon: "🇧🇷",
+      },
+      {
+        title: "کانادا",
+        href: "#",
+        icon: "🇨🇦",
+      },
+      {
+        title: "مکزیک",
+        href: "#",
+        icon: "🇲🇽",
+      },
+      {
+        title: "ایالات متحده",
+        href: "#",
+        icon: "🇺🇸",
+      },
+    ],
+  },
+  {
+    title: "خاورمیانه و آفریقا",
+    locations: [
+      {
+        title: "مصر",
+        href: "#",
+        icon: "🇸🇦",
+      },
+      {
+        title: "نیجریه",
+        href: "#",
+        icon: "🇳🇬",
+      },
+      {
+        title: "ترکیه",
+        href: "#",
+        icon: "🇹🇷",
+      },
+      {
+        title: "امارات متحده عربی",
+        href: "#",
+        icon: "🇦🇪",
+      },
+    ],
+  },
+];
+
+const resources = [
+  {
+    id: "resource-1",
+    title: "رویدادها و وبینارها",
+    description: "از متخصصان صنعت بیاموزید.",
+    href: "#",
+    icon: Calendar,
+  },
+  {
+    id: "resource-2",
+    title: "پادکست‌ها",
+    description: "بینش درباره بهره‌وری و رهبری.",
+    href: "#",
+    icon: Mic,
+  },
+  {
+    id: "resource-3",
+    title: "وبلاگ",
+    description: "آخرین به‌روزرسانی‌ها و بهترین روش‌ها.",
+    href: "#",
+    icon: Newspaper,
+  },
+  {
+    id: "resource-4",
+    title: "آموزش ویدیویی",
+    description: "با ویدیوهای راهنما شروع کنید.",
+    href: "#",
+    icon: PlayCircle,
+  },
+  {
+    id: "resource-5",
+    title: "پایگاه دانش",
+    description: "راهنماها و مستندات تفصیلی.",
+    href: "#",
+    icon: Book,
+  },
+  {
+    id: "resource-6",
+    title: "گزارش‌های موفقیت",
+    description: "ببینید دیگران چگونه بیشتر دست می‌یابند.",
+    href: "#",
+    icon: Lightbulb,
+  },
+];
+
+const topicGroups = [
+  {
+    title: "منابع یادگیری",
+    topics: [
+      {
+        id: "topic-1",
+        title: "راهنمای شروع",
+        href: "#",
+        icon: Globe,
+      },
+      {
+        id: "topic-2",
+        title: "به‌روزرسانی محصول",
+        href: "#",
+        icon: Rocket,
+      },
+      {
+        id: "topic-3",
+        title: "بهترین روش‌ها",
+        href: "#",
+        icon: Pyramid,
+      },
+      {
+        id: "topic-4",
+        title: "یکپارچه‌سازی‌ها",
+        href: "#",
+        icon: ArrowRightLeft,
+      },
+      {
+        id: "topic-5",
+        title: "مستندات اتصال هوشمند",
+        href: "#",
+        icon: AppWindow,
+      },
+    ],
+  },
+  {
+    title: "انجمن",
+    topics: [
+      {
+        id: "topic-6",
+        title: "انجمن کاربران",
+        href: "#",
+        icon: Play,
+      },
+    ],
+  },
+];
+
+const SolutionsMenu = () => (
+  <div className="grid gap-8 sm:grid-cols-2">
+    <a
+      href="#"
+      className="group relative flex h-full flex-row overflow-hidden rounded-lg bg-primary px-0 pt-8 text-primary-foreground lg:rounded-xl lg:px-6"
+    >
+      <div className="relative flex w-full flex-col space-y-12 text-start md:space-y-8 lg:w-full lg:flex-row lg:justify-between lg:space-y-0 lg:space-x-6 xl:space-x-8">
+        <div className="relative flex flex-col px-6 lg:mb-6 lg:px-0">
+          <span className="mb-6 text-xs font-medium tracking-wider uppercase md:mb-8">
+            گردش کار خود را متحول کنید
+          </span>
+          <div className="mt-auto flex items-center gap-1 text-xs">
+            پلتفرم را کشف کنید
+            <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+          </div>
+          <p className="mt-2 text-xs text-primary-foreground/85">
+            همکاری را ساده کنید، گردش کار را خودکار کنید و بهره‌وری سازمان را
+            بالا ببرید.
+          </p>
+        </div>
+        <div className="relative aspect-2/1 overflow-clip rounded-t ps-6 lg:max-w-64 lg:ps-0 xl:max-w-96">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="تصویر نمونه"
+            className="aspect-2/1 h-full w-full translate-y-px object-cover object-center"
+          />
+        </div>
+      </div>
+    </a>
+
+    <div className="order-last mt-3 sm:order-none sm:mt-0 sm:py-2 md:p-6">
+      <div className="mb-4 text-start leading-none md:col-span-2 lg:col-span-4 lg:mb-6">
+        <strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
+          پلتفرم توسعه‌دهندگان
+        </strong>
+      </div>
+      <div className="grid gap-4 lg:grid-cols-2">
+        {solutionTechnologies.map((technology) => (
+          <NavigationMenuLink
+            key={technology.id}
+            href="#"
+            className="group flex flex-row items-center gap-4"
+          >
+            <technology.icon className="size-4" />
+            <div className="flex-1 text-sm font-medium">{technology.title}</div>
+            <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
+          </NavigationMenuLink>
+        ))}
+      </div>
+    </div>
+    <div className="col-span-full grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
+      {solutions.map((solution) => (
+        <div key={solution.id} className="rounded-md border border-border p-5">
+          <div className="border-b border-border pb-4">
+            <a href={solution.href} className="group flex flex-col text-start">
+              <div className="flex items-center">
+                <strong className="text-sm font-medium">
+                  {solution.title}
+                </strong>
+                <ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {solution.description}
+              </p>
+            </a>
+          </div>
+          <menu className="mt-6 grid gap-y-4">
+            {solution.subpages.map((subpage) => (
+              <NavigationMenuLink
+                key={subpage.id}
+                href={subpage.href}
+                className="group flex flex-row items-center space-x-4 text-start text-foreground/85 hover:text-foreground lg:space-x-4 lg:border-0"
+              >
+                <subpage.icon className="size-4" />
+                <div className="flex-1 text-sm font-medium">
+                  {subpage.title}
+                </div>
+                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
+              </NavigationMenuLink>
+            ))}
+          </menu>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const ProductsMenu = () => (
+  <div className="grid gap-y-12 lg:flex lg:space-x-8">
+    <div className="w-full shrink-0 lg:max-w-[18rem]">
+      <a
+        href="#"
+        className="group relative flex h-full flex-row overflow-hidden rounded-lg px-0 text-primary-foreground lg:rounded-xl"
+      >
+        <div className="relative z-10 flex w-full flex-col text-start">
+          <div className="relative flex aspect-2/1 max-h-[11rem] w-full flex-1 justify-center">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="تصویر نمونه"
+              className="h-full w-full object-cover object-center"
+            />
+          </div>
+          <div className="relative z-20 flex flex-col rounded-b-xl bg-primary p-6">
+            <div className="flex items-center space-x-1 text-xs">
+              راه‌حل‌های سازمانی
+              <ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+            </div>
+            <p className="mt-2 text-xs text-primary-foreground/70">
+              کسب‌وکار خود را با قابلیت‌ها و پشتیبانی سطح سازمانی مقیاس دهید.
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+    <div className="grid w-full gap-y-12 lg:gap-y-6">
+      {productCategories.map((category) => (
+        <div key={category.title} className="grid gap-y-2 lg:gap-y-6">
+          <div className="border-border text-start lg:border-b lg:pb-3">
+            <strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
+              {category.title}
+            </strong>
+          </div>
+          <menu className="grid md:grid-cols-3 md:gap-x-5 lg:gap-y-7">
+            {category.products.map((product) => (
+              <NavigationMenuLink
+                key={product.id}
+                href="#"
+                className="group flex flex-row items-center space-x-6 border-b border-border py-5 text-start sm:py-7 lg:space-x-4 lg:border-0 lg:py-2"
+              >
+                <div className="relative flex aspect-square w-6 shrink-0 items-center justify-center overflow-clip rounded md:size-9 md:p-2">
+                  <img
+                    src={product.image}
+                    alt={product.title}
+                    className="dark:invert"
+                  />
+                </div>
+                <div className="flex-1">
+                  <div className="text-sm font-medium text-foreground/85 group-hover:text-foreground">
+                    {product.title}
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground group-hover:text-foreground">
+                    {product.description}
+                  </p>
+                </div>
+                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
+              </NavigationMenuLink>
+            ))}
+          </menu>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const GlobalGuidanceMenu = () => (
+  <div>
+    <div className="space-y-6 lg:flex lg:space-y-0 lg:space-x-8">
+      <div className="w-full shrink-0 lg:max-w-[18rem]">
+        <a
+          href="#"
+          className="group relative flex h-full flex-row overflow-hidden rounded-lg p-0 text-primary-foreground lg:rounded-xl"
+        >
+          <div className="relative z-10 flex w-full flex-col-reverse text-start lg:flex-col">
+            <div className="relative flex aspect-4/3 max-h-[18rem] w-full flex-1 justify-center">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-3.svg"
+                alt="تصویر نمونه"
+                className="h-full w-full object-cover object-center"
+              />
+            </div>
+            <div className="relative z-20 flex flex-col rounded-b-xl bg-primary p-6">
+              <div className="flex items-center gap-1 text-xs">
+                راه‌حل‌های سازمانی
+                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </div>
+              <p className="mt-2 text-xs text-primary-foreground/85">
+                کسب‌وکار خود را با قابلیت‌ها و پشتیبانی سطح سازمانی مقیاس دهید.
+              </p>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div className="grid w-full gap-y-12 lg:gap-y-6">
+        {globalCategories.map((category) => (
+          <div key={category.title} className="grid gap-y-2 lg:gap-y-6">
+            <div className="border-border text-start lg:border-b lg:pb-3">
+              <strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
+                {category.title}
+              </strong>
+            </div>
+            <menu className="grid md:grid-cols-3 md:gap-x-6 lg:gap-y-6">
+              {category.features.map((feature) => (
+                <NavigationMenuLink
+                  key={feature.id}
+                  href="#"
+                  className="group flex flex-row items-center space-x-4 border-b border-border py-5 text-start sm:py-7 lg:border-0 lg:py-0"
+                >
+                  <div className="flex aspect-square size-9 shrink-0 items-center justify-center">
+                    <feature.icon className="size-5" />
+                  </div>
+                  <div className="flex-1">
+                    <div className="text-sm font-medium text-foreground/85 group-hover:text-foreground">
+                      {feature.title}
+                    </div>
+                    <p className="mt-1 text-xs text-muted-foreground group-hover:text-foreground">
+                      {feature.description}
+                    </p>
+                  </div>
+                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
+                </NavigationMenuLink>
+              ))}
+            </menu>
+          </div>
+        ))}
+      </div>
+    </div>
+    <div className="mt-8">
+      <div className="mb-6 border-border pb-1 text-start lg:border-b">
+        <strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
+          مکان‌های پرطرفدار
+        </strong>
+      </div>
+      <div className="grid gap-6 md:grid-cols-3 lg:grid-cols-4">
+        {regions.map((region) => (
+          <div
+            key={region.title}
+            className="space-y-6 rounded-md border border-border p-6 lg:border-0 lg:p-0"
+          >
+            <div className="text-start text-xs text-muted-foreground">
+              {region.title}
+            </div>
+            <menu className="grid gap-y-3 border-t border-border pt-6 lg:border-0 lg:pt-0">
+              {region.locations.map((location) => (
+                <NavigationMenuLink
+                  key={location.title}
+                  href={location.href}
+                  className="group flex flex-row items-center space-x-4 text-start text-foreground/85 hover:text-foreground lg:space-x-4 lg:border-0 lg:py-0"
+                >
+                  <div className="flex size-4 items-center justify-center">
+                    {location.icon}
+                  </div>
+                  <div className="flex-1 text-sm font-medium">
+                    {location.title}
+                  </div>
+                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
+                </NavigationMenuLink>
+              ))}
+            </menu>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+const PartnersMenu = () => (
+  <div className="grid gap-y-6 md:grid-cols-2 md:gap-x-6 lg:grid-cols-4">
+    <div className="md:col-span-2">
+      <a
+        href="#"
+        className="group relative flex h-full flex-row overflow-hidden rounded-lg bg-primary p-0 text-primary-foreground lg:rounded-xl"
+      >
+        <div className="relative z-10 flex w-full flex-col-reverse text-start">
+          <div className="relative z-20 flex flex-col px-6 pt-6 pb-[14rem] md:pt-40 md:pb-6">
+            <div className="mt-auto flex items-center space-x-1 text-xs font-medium">
+              برنامه شرکا
+              <ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+            </div>
+            <p className="mt-2 text-xs">
+              به شبکه شرکای ما بپیوندید و با پلتفرم بهره‌وری پیشرو کسب‌وکار خود
+              را رشد دهید.
+            </p>
+          </div>
+          <div className="absolute inset-0 top-[32%] bg-accent invert md:top-0">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر نمونه"
+              className="object-fit h-full w-full object-top-right opacity-100 md:h-2/3 md:object-top"
+            />
+          </div>
+        </div>
+      </a>
+    </div>
+    <div className="md:col-span-1">
+      <a
+        href="#"
+        className="group relative flex h-full flex-row overflow-hidden rounded-lg bg-accent p-0 text-accent-foreground lg:rounded-xl"
+      >
+        <div className="relative z-10 flex w-full flex-col-reverse text-start">
+          <div className="relative z-20 flex flex-col px-6 pt-6 pb-[14rem] md:pt-40 md:pb-6">
+            <div className="mt-auto flex items-center space-x-1 text-xs font-medium">
+              شرکای راه‌حل
+              <ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+            </div>
+            <p className="mt-2 text-xs text-muted-foreground">
+              راه‌حل‌هایی بسازید و ارائه دهید که به مشتریان کمک می‌کند بیشتر
+              دست یابند.
+            </p>
+          </div>
+          <div className="absolute inset-0 top-[32%] md:top-0">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-2.svg"
+              alt="تصویر نمونه"
+              className="object-fit h-full w-full object-top-right md:h-2/3 md:object-top"
+            />
+          </div>
+        </div>
+      </a>
+    </div>
+    <div className="grid gap-4 md:col-span-1">
+      <NavigationMenuLink
+        href="#"
+        className="group flex w-full flex-row items-center rounded-lg border border-border lg:rounded-xl"
+      >
+        <div className="flex items-start p-6 text-start">
+          <Users className="size-8" />
+          <div className="ms-4">
+            <div className="mt-auto mb-1 text-sm font-bold text-foreground/85 hover:text-foreground">
+              شرکای پیاده‌سازی
+            </div>
+            <p className="text-xs text-muted-foreground group-hover:text-foreground">
+              همراهی در استقرار و راه‌اندازی برای سازمان شما.
+            </p>
+          </div>
+        </div>
+      </NavigationMenuLink>
+      <NavigationMenuLink
+        href="#"
+        className="group flex w-full flex-row items-center rounded-lg border border-border lg:rounded-xl"
+      >
+        <div className="flex items-start p-6 text-start">
+          <Computer className="size-8" />
+          <div className="ms-4">
+            <div className="mt-auto mb-1 text-sm font-bold text-foreground/85 hover:text-foreground">
+              شرکای فناوری
+            </div>
+            <p className="text-xs text-muted-foreground group-hover:text-foreground">
+              یکپارچه‌سازی با اکوسیستم فناوری و ابزارهای شما.
+            </p>
+          </div>
+        </div>
+      </NavigationMenuLink>
+    </div>
+  </div>
+);
+
+const ResourcesMenu = () => (
+  <div className="grid gap-y-12 md:grid-cols-2 md:gap-x-6 lg:grid-cols-4 lg:gap-6">
+    <div className="col-span-1">
+      <a
+        href="#"
+        className="group relative flex h-full flex-row overflow-hidden rounded-lg bg-primary p-0 text-primary-foreground lg:rounded-xl"
+      >
+        <div className="relative z-10 flex w-full flex-col-reverse text-start">
+          <div className="relative z-20 flex flex-col px-6 pt-6 pb-[14rem] md:pt-40 md:pb-6">
+            <div className="mt-auto flex items-center space-x-1 text-xs">
+              مرکز منابع
+              <ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+            </div>
+            <p className="mt-2 text-xs">
+              به راهنماها، آموزش‌ها و بهترین روش‌ها برای موفقیت بیشتر دسترسی
+              داشته باشید.
+            </p>
+          </div>
+          <div className="absolute inset-0">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-4.svg"
+              alt="تصویر نمونه"
+              className="h-full w-full object-cover object-center invert"
+            />
+          </div>
+          <div className="absolute inset-x-0 top-0 z-10 h-[60%] bg-[linear-gradient(hsl(var(--color-primary))_50%,transparent)] md:top-auto md:bottom-[-10%] md:h-[50%] md:bg-[linear-gradient(transparent,hsl(var(--color-primary))_50%)]"></div>
+        </div>
+      </a>
+    </div>
+    <div className="lg:col-span-2 lg:flex lg:flex-col">
+      <div>
+        <div className="mb-4 border-border pb-3 text-start md:mb-6 lg:border-b">
+          <strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
+            منابع برجسته
+          </strong>
+        </div>
+      </div>
+      <menu className="grid gap-y-4 lg:h-full lg:grid-cols-2 lg:gap-6">
+        {resources.map((resource) => (
+          <NavigationMenuLink
+            key={resource.id}
+            href={resource.href}
+            className="group flex flex-row items-center space-x-4 rounded-md border-border bg-accent px-6 py-5 text-start md:space-x-5 lg:border lg:bg-background lg:p-5"
+          >
+            <resource.icon className="size-6 sm:size-7" />
+            <div className="ml-4 flex-1">
+              <div className="text-sm font-medium text-foreground/85 group-hover:text-foreground">
+                {resource.title}
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground group-hover:text-foreground">
+                {resource.description}
+              </p>
+            </div>
+            <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
+          </NavigationMenuLink>
+        ))}
+      </menu>
+    </div>
+    <div className="col-span-1 md:col-span-2 lg:col-span-1">
+      {topicGroups.map((group) => (
+        <Fragment key={group.title}>
+          <div className="mb-4 border-border pb-3 text-start md:col-span-2 md:mb-7 lg:border-b">
+            <strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
+              {group.title}
+            </strong>
+          </div>
+          <menu className="mb-7 grid md:grid-cols-2 md:gap-x-6 lg:grid-cols-1 lg:gap-x-0">
+            {group.topics.map((topic) => (
+              <NavigationMenuLink
+                key={topic.id}
+                href={topic.href}
+                className="group flex flex-row items-center space-x-6 border-b border-border py-5 text-start sm:py-8 lg:space-x-4 lg:border-0 lg:py-0"
+              >
+                <div className="flex aspect-square size-9 shrink-0 items-center justify-center">
+                  <topic.icon className="size-5" />
+                </div>
+                <div className="flex-1 text-xs font-medium text-foreground/85 group-hover:text-foreground md:text-sm">
+                  {topic.title}
+                </div>
+                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
+              </NavigationMenuLink>
+            ))}
+          </menu>
+        </Fragment>
+      ))}
+    </div>
+  </div>
+);
+
+const navigationMenuItems = [
+  {
+    key: "solutions",
+    label: "راه‌حل‌ها",
+    component: SolutionsMenu,
+  },
+  {
+    key: "products",
+    label: "محصولات",
+    component: ProductsMenu,
+  },
+  {
+    key: "global",
+    label: "شرکت",
+    component: GlobalGuidanceMenu,
+  },
+  {
+    key: "partners",
+    label: "شرکا",
+    component: PartnersMenu,
+  },
+  {
+    key: "resources",
+    label: "منابع",
+    component: ResourcesMenu,
+  },
+] as const;
+
+interface Navbar4Props {
+  contained?: boolean;
+  className?: string;
+}
+
+const mobileMenuOverlayClass = (contained: boolean) =>
+  cn(
+    "container flex w-full flex-col overflow-auto border-t border-border bg-background text-start lg:hidden",
+    contained
+      ? "absolute inset-x-0 top-full z-50 max-h-[min(85vh,40rem)]"
+      : "fixed inset-0 top-[72px] h-[calc(100vh-72px)]",
+  );
+
+const Navbar4 = ({ contained = false, className }: Navbar4Props) => {
+  const [open, setOpen] = useState(false);
+  const [submenu, setSubmenu] = useState<
+    "solutions" | "products" | "global" | "partners" | "resources" | null
+  >(null);
+
+  return (
+    <section
+      lang="fa"
+      className={cn(
+        "z-20 bg-background text-start",
+        contained ? "relative overflow-visible" : "inset-x-0 top-0",
+        className,
+      )}
+    >
+      <div className="container">
+        <NavigationMenu
+          dir="rtl"
+          className={cn(
+            "relative z-50 w-full max-w-full text-start",
+            "[&>div:last-child]:inset-x-0 [&>div:last-child]:w-full [&>div:last-child]:justify-center",
+            "[&>div:last-child>div]:mt-1.5 [&>div:last-child>div]:w-full [&>div:last-child>div]:max-w-full",
+            "[&>div:last-child>div]:rounded-md [&>div:last-child>div]:border [&>div:last-child>div]:bg-popover [&>div:last-child>div]:shadow",
+          )}
+        >
+          <div className="flex w-full justify-between gap-2 py-4">
+            <a
+              href="https://www.ShadcnBlocks"
+              className="flex items-center gap-2"
+            >
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                className="max-h-8 dark:invert"
+                alt="لوگو"
+              />
+              <span className="text-lg font-semibold tracking-tighter">
+                شادسی‌ان‌بلاکز
+              </span>
+            </a>
+            <div className="flex items-center gap-2 xl:gap-8">
+              <NavigationMenuList className="hidden gap-0 lg:flex">
+                {navigationMenuItems.map((item) => (
+                  <NavigationMenuItem key={item.key}>
+                    <NavigationMenuTrigger className="text-start text-xs [&_svg]:ms-1 [&_svg]:!ml-0 xl:text-sm">
+                      {item.label}
+                    </NavigationMenuTrigger>
+                    <NavigationMenuContent
+                      dir="rtl"
+                      className="inset-x-0 start-0 end-0 left-auto right-auto w-full p-6 text-start 2xl:p-12"
+                    >
+                      <item.component />
+                    </NavigationMenuContent>
+                  </NavigationMenuItem>
+                ))}
+              </NavigationMenuList>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button className="hidden md:block">ورود</Button>
+              <Button
+                variant="outline"
+                size="icon"
+                aria-label="منوی اصلی"
+                className="lg:hidden"
+                onClick={() => {
+                  if (open) {
+                    setOpen(false);
+                    setSubmenu(null);
+                  } else {
+                    setOpen(true);
+                  }
+                }}
+              >
+                {!open && <Menu className="size-4" />}
+                {open && <X className="size-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Mobile Menu */}
+          {open && (
+            <div className={mobileMenuOverlayClass(contained)}>
+              {submenu && (
+                <div className="mt-3">
+                  <Button
+                    variant="link"
+                    onClick={() => setSubmenu(null)}
+                    className="relative -start-4"
+                  >
+                    <ArrowLeft className="size-4 rtl:rotate-180" />
+                    بازگشت
+                  </Button>
+                </div>
+              )}
+              {submenu === null && (
+                <div>
+                  {navigationMenuItems.map((item) => (
+                    <button
+                      key={item.key}
+                      type="button"
+                      className="flex w-full items-center border-b border-border py-6 text-start"
+                      onClick={() => setSubmenu(item.key)}
+                    >
+                      <span className="flex-1 text-sm font-medium">
+                        {item.label}
+                      </span>
+                      <span className="shrink-0">
+                        <ArrowRight className="size-4 rtl:rotate-180" />
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              )}
+              {navigationMenuItems.map(
+                (item) =>
+                  submenu === item.key && (
+                    <div key={item.key}>
+                      <h2 className="pt-4 pb-6 text-lg font-medium">
+                        {item.label}
+                      </h2>
+                      <item.component />
+                    </div>
+                  ),
+              )}
+              {/* Mobile menu footer */}
+              <div className="mx-8 mt-auto flex flex-col items-center gap-8 py-12">
+                <Button>ورود</Button>
+              </div>
+            </div>
+          )}
+        </NavigationMenu>
+      </div>
+    </section>
+  );
+};
+
+export { Navbar4 };
diff --git a/blocks/navbar5.tsx b/blocks/navbar5.tsx
new file mode 100644
index 0000000..c86fe39
--- /dev/null
+++ b/blocks/navbar5.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { MenuIcon } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface Navbar5Props {
+  /** برای پیش‌نمایش بلاک: z-index و overflow درست زیرمنو */
+  contained?: boolean;
+  className?: string;
+}
+
+const features = [
+  {
+    title: "داشبورد",
+    description: "نمای کلی فعالیت‌های شما",
+    href: "#",
+  },
+  {
+    title: "تحلیل‌ها",
+    description: "عملکرد خود را پیگیری کنید",
+    href: "#",
+  },
+  {
+    title: "تنظیمات",
+    description: "ترجیحات خود را پیکربندی کنید",
+    href: "#",
+  },
+  {
+    title: "یکپارچه‌سازی‌ها",
+    description: "اتصال به ابزارهای دیگر",
+    href: "#",
+  },
+  {
+    title: "ذخیره‌سازی",
+    description: "مدیریت فایل‌های شما",
+    href: "#",
+  },
+  {
+    title: "پشتیبانی",
+    description: "در صورت نیاز کمک بگیرید",
+    href: "#",
+  },
+];
+
+const Navbar5 = ({ contained = false, className }: Navbar5Props) => {
+  return (
+    <section
+      lang="fa"
+      className={cn(
+        "relative overflow-visible py-4 text-start",
+        contained ? "z-30" : "z-20",
+        className,
+      )}
+    >
+      <div className="container">
+        <nav className="relative z-30 flex items-center justify-between overflow-visible">
+          <a
+            href="https://www.ShadcnBlocks"
+            className="flex items-center gap-2"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+              className="max-h-8 dark:invert"
+              alt="لوگو"
+            />
+            <span className="text-lg font-semibold tracking-tighter">
+              شادسی‌ان‌بلاکز
+            </span>
+          </a>
+          <div className="relative hidden flex-1 justify-center overflow-visible lg:flex">
+            <NavigationMenu
+              dir="rtl"
+              viewport={false}
+              className="relative z-50 max-w-none overflow-visible"
+            >
+              <NavigationMenuList>
+              <NavigationMenuItem className="static">
+                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+                  ویژگی‌ها
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  dir="rtl"
+                  className={cn(
+                    "top-full start-auto end-auto left-1/2 right-auto z-[200] -translate-x-1/2 !overflow-visible p-4 text-start shadow-md",
+                    "!w-[640px] !min-w-[640px] !max-w-[calc(100vw-2rem)] md:!w-[640px]",
+                    contained && "!w-[min(640px,calc(100%-1rem))] !min-w-0",
+                  )}
+                >
+                  <div className="grid w-full min-w-0 grid-cols-2 gap-2">
+                    {features.map((feature, index) => (
+                      <NavigationMenuLink
+                        href={feature.href}
+                        key={index}
+                        className="min-w-0 rounded-md p-3 text-start transition-colors hover:bg-muted/70"
+                      >
+                        <p className="mb-1 font-semibold text-foreground">
+                          {feature.title}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                          {feature.description}
+                        </p>
+                      </NavigationMenuLink>
+                    ))}
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink
+                  href="#"
+                  className={cn(navigationMenuTriggerStyle(), "text-start")}
+                >
+                  محصولات
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink
+                  href="#"
+                  className={cn(navigationMenuTriggerStyle(), "text-start")}
+                >
+                  منابع
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink
+                  href="#"
+                  className={cn(navigationMenuTriggerStyle(), "text-start")}
+                >
+                  تماس
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
+          <div className="hidden items-center gap-4 lg:flex">
+            <Button variant="outline">ورود</Button>
+            <Button>شروع رایگان</Button>
+          </div>
+          <Sheet>
+            <SheetTrigger asChild className="lg:hidden">
+              <Button variant="outline" size="icon" aria-label="باز کردن منو">
+                <MenuIcon className="h-4 w-4" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side="top"
+              dir="rtl"
+              className="max-h-screen overflow-auto text-start"
+            >
+              <SheetHeader>
+                <SheetTitle>
+                  <a
+                    href="https://www.ShadcnBlocks"
+                    className="flex items-center gap-2"
+                  >
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                      className="max-h-8 dark:invert"
+                      alt="لوگو"
+                    />
+                    <span className="text-lg font-semibold tracking-tighter">
+                      شادسی‌ان‌بلاکز
+                    </span>
+                  </a>
+                </SheetTitle>
+              </SheetHeader>
+              <div className="flex flex-col p-4">
+                <Accordion
+                  type="single"
+                  collapsible
+                  dir="rtl"
+                  className="mt-4 mb-2 w-full text-start"
+                >
+                  <AccordionItem value="solutions" className="border-none">
+                    <AccordionTrigger className="justify-start text-base hover:no-underline">
+                      ویژگی‌ها
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <div className="grid md:grid-cols-2">
+                        {features.map((feature, index) => (
+                          <a
+                            href={feature.href}
+                            key={index}
+                            className="rounded-md p-3 text-start transition-colors hover:bg-muted/70"
+                          >
+                            <p className="mb-1 font-semibold text-foreground">
+                              {feature.title}
+                            </p>
+                            <p className="text-sm text-muted-foreground">
+                              {feature.description}
+                            </p>
+                          </a>
+                        ))}
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+                <div className="flex flex-col gap-6">
+                  <a href="#" className="font-medium">
+                    محصولات
+                  </a>
+                  <a href="#" className="font-medium">
+                    منابع
+                  </a>
+                  <a href="#" className="font-medium">
+                    تماس
+                  </a>
+                </div>
+                <div className="mt-6 flex flex-col gap-4">
+                  <Button variant="outline">ورود</Button>
+                  <Button>شروع رایگان</Button>
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </nav>
+      </div>
+    </section>
+  );
+};
+
+export { Navbar5 };
diff --git a/blocks/navbar6.tsx b/blocks/navbar6.tsx
new file mode 100644
index 0000000..1d6b7a5
--- /dev/null
+++ b/blocks/navbar6.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+
+const ITEMS = [
+  {
+    label: "ویژگی‌ها",
+    href: "#",
+    dropdownItems: [
+      {
+        title: "تیم‌های محصول مدرن",
+        href: "#",
+        description:
+          "بر پایه عادت‌هایی ساخته شده که موفق‌ترین تیم‌های محصول را موفق می‌کند",
+      },
+      {
+        title: "تخصیص منابع",
+        href: "#",
+        description: "تخصیص منابع و اجرا را بهینه و یکپارچه کنید",
+      },
+    ],
+  },
+  { label: "درباره ما", href: "#" },
+  { label: "قیمت‌گذاری", href: "#" },
+  { label: "سوالات متداول", href: "#" },
+  { label: "تماس", href: "#" },
+];
+
+interface Navbar6Props {
+  contained?: boolean;
+  className?: string;
+}
+
+const Navbar6 = ({ contained = false, className }: Navbar6Props) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const mobilePanelPosition = contained ? "absolute" : "fixed";
+
+  return (
+    <header
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "z-50 w-full max-w-[700px] rounded-full border bg-background/70 backdrop-blur-md transition-all duration-300",
+        contained
+          ? "relative mx-auto overflow-visible"
+          : "absolute top-5 left-1/2 w-[min(90%,700px)] -translate-x-1/2 lg:top-12",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between px-6 py-3">
+        <a href="/" className="flex shrink-0 items-center gap-2">
+          <img
+            src="/block-media/shadcnblocks/block/block-1.svg"
+            alt="لوگو"
+            className="w-10"
+          />
+        </a>
+
+        <NavigationMenu
+          dir="rtl"
+          viewport={false}
+          className={cn("max-lg:hidden", contained && "relative z-50")}
+        >
+          <NavigationMenuList>
+            {ITEMS.map((link) =>
+              link.dropdownItems ? (
+                <NavigationMenuItem key={link.label}>
+                  <NavigationMenuTrigger className="bg-transparent! px-1.5 text-start data-[state=open]:bg-accent/50 [&_svg]:ms-1 [&_svg]:!ml-0">
+                    {link.label}
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent
+                    dir="rtl"
+                    className="start-0 end-auto left-auto z-50 text-start"
+                  >
+                    <ul className="w-[min(400px,calc(100vw-2rem))] space-y-2 p-4">
+                      {link.dropdownItems.map((item) => (
+                        <li key={item.title}>
+                          <NavigationMenuLink asChild>
+                            <a
+                              href={item.href}
+                              className="group flex gap-4 rounded-md p-3 text-start leading-none no-underline outline-hidden transition-colors select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                            >
+                              <div className="transition-transform duration-300 group-hover:translate-x-1 rtl:group-hover:-translate-x-1">
+                                <div className="mb-1 text-sm leading-none font-medium">
+                                  {item.title}
+                                </div>
+                                <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                  {item.description}
+                                </p>
+                              </div>
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              ) : (
+                <NavigationMenuItem key={link.label}>
+                  <a
+                    href={link.href}
+                    className="relative bg-transparent px-1.5 text-sm font-medium text-muted-foreground"
+                  >
+                    {link.label}
+                  </a>
+                </NavigationMenuItem>
+              ),
+            )}
+          </NavigationMenuList>
+        </NavigationMenu>
+
+        <div className="flex items-center gap-2.5">
+          <a href="/login" className="max-lg:hidden">
+            <Button variant="outline">
+              <span className="relative z-10">ورود</span>
+            </Button>
+          </a>
+
+          <button
+            type="button"
+            className="relative flex size-8 text-muted-foreground lg:hidden"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            aria-label={isMenuOpen ? "بستن منو" : "باز کردن منو"}
+          >
+            <span className="sr-only">منوی اصلی</span>
+            <div className="absolute top-1/2 start-1/2 block w-[18px] -translate-x-1/2 -translate-y-1/2 rtl:translate-x-1/2">
+              <span
+                aria-hidden="true"
+                className={`absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "rotate-45" : "-translate-y-1.5"}`}
+              />
+              <span
+                aria-hidden="true"
+                className={`absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "opacity-0" : ""}`}
+              />
+              <span
+                aria-hidden="true"
+                className={`absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "-rotate-45" : "translate-y-1.5"}`}
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <div
+        className={cn(
+          mobilePanelPosition,
+          "inset-x-0 top-[calc(100%+1rem)] z-50 flex flex-col rounded-2xl border bg-background p-6 text-start transition-all duration-300 ease-in-out lg:hidden",
+          isMenuOpen
+            ? "visible translate-y-0 opacity-100"
+            : "invisible -translate-y-4 opacity-0",
+        )}
+      >
+        <nav className="flex flex-1 flex-col divide-y divide-border">
+          {ITEMS.map((link) =>
+            link.dropdownItems ? (
+              <div key={link.label} className="py-4 first:pt-0 last:pb-0">
+                <button
+                  type="button"
+                  onClick={() =>
+                    setOpenDropdown(
+                      openDropdown === link.label ? null : link.label,
+                    )
+                  }
+                  className="flex w-full items-center justify-between text-base font-medium text-primary"
+                >
+                  {link.label}
+                  <ChevronRight
+                    className={cn(
+                      "size-4 transition-transform duration-200 rtl:rotate-180",
+                      openDropdown === link.label ? "-rotate-90 rtl:rotate-90" : "",
+                    )}
+                  />
+                </button>
+                <div
+                  className={cn(
+                    "overflow-hidden transition-all duration-300",
+                    openDropdown === link.label
+                      ? "mt-4 max-h-[1000px] opacity-100"
+                      : "max-h-0 opacity-0",
+                  )}
+                >
+                  <div className="space-y-3 rounded-lg bg-muted/50 p-4">
+                    {link.dropdownItems.map((item) => (
+                      <a
+                        key={item.title}
+                        href={item.href}
+                        className="group block rounded-md p-2 text-start transition-colors hover:bg-accent"
+                        onClick={() => {
+                          setIsMenuOpen(false);
+                          setOpenDropdown(null);
+                        }}
+                      >
+                        <div className="transition-transform duration-200 group-hover:translate-x-1 rtl:group-hover:-translate-x-1">
+                          <div className="font-medium text-primary">
+                            {item.title}
+                          </div>
+                          <p className="mt-1 text-sm text-muted-foreground">
+                            {item.description}
+                          </p>
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <a
+                key={link.label}
+                href={link.href}
+                className="py-4 text-base font-medium text-primary transition-colors first:pt-0 last:pb-0 hover:text-primary/80"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                {link.label}
+              </a>
+            ),
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export { Navbar6 };
diff --git a/blocks/navbar7.tsx b/blocks/navbar7.tsx
new file mode 100644
index 0000000..2827561
--- /dev/null
+++ b/blocks/navbar7.tsx
@@ -0,0 +1,476 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  Banknote,
+  BarChart,
+  BookOpen,
+  Brain,
+  Cloud,
+  Code,
+  CreditCard,
+  Database,
+  Factory,
+  Fingerprint,
+  Gamepad2,
+  Globe,
+  Home,
+  Lock,
+  Menu,
+  MessageSquare,
+  Plane,
+  Settings,
+  Shield,
+  ShoppingCart,
+  Sparkle,
+  Truck,
+  Users,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+
+interface Solution {
+  title: string;
+  description: string;
+  href: string;
+  icon: LucideIcon;
+}
+
+const DATA_SOLUTIONS: Solution[] = [
+  {
+    title: "راه‌حل اول",
+    description: "زیرساخت مقیاس‌پذیر برای تیم‌های در حال رشد.",
+    href: "#",
+    icon: Cloud,
+  },
+  {
+    title: "راه‌حل دوم",
+    description: "امنیت و کنترل دسترسی در سطح سازمانی.",
+    href: "#",
+    icon: Lock,
+  },
+  {
+    title: "راه‌حل سوم",
+    description: "احراز هویت و مدیریت هویت پیشرفته.",
+    href: "#",
+    icon: Fingerprint,
+  },
+  {
+    title: "راه‌حل چهارم",
+    description: "استقرار ابری انعطاف‌پذیر و پایدار.",
+    href: "#",
+    icon: Cloud,
+  },
+];
+
+interface Platfrom {
+  title: string;
+  href: string;
+  icon: LucideIcon;
+}
+
+const DATA_PLATFORM_CASE: Platfrom[] = [
+  { title: "بانکداری", href: "#", icon: CreditCard },
+  { title: "فین‌تک", href: "#", icon: Banknote },
+  { title: "تجارت الکترونیک", href: "#", icon: ShoppingCart },
+  { title: "سفر و هتلداری", href: "#", icon: Plane },
+  { title: "املاک", href: "#", icon: Home },
+  { title: "بازی", href: "#", icon: Gamepad2 },
+  { title: "تولید", href: "#", icon: Factory },
+  { title: "لجستیک", href: "#", icon: Truck },
+];
+
+interface Resource {
+  title: string;
+  description: string;
+  href: string;
+  icon: LucideIcon;
+}
+
+const DATA_RESOURCES: Resource[] = [
+  {
+    title: "قدرت هوش مصنوعی",
+    description: "منابع مبتنی بر هوش مصنوعی را کشف کنید",
+    href: "#",
+    icon: Sparkle,
+  },
+  {
+    title: "توسعه هوش مصنوعی",
+    description: "ابزارها و چارچوب‌ها برای توسعه AI",
+    href: "#",
+    icon: Code,
+  },
+  {
+    title: "یادگیری ماشین",
+    description: "منابع برای علاقه‌مندان به ML",
+    href: "#",
+    icon: Brain,
+  },
+  {
+    title: "مدیریت داده",
+    description: "بهترین روش‌های مدیریت داده",
+    href: "#",
+    icon: Database,
+  },
+  {
+    title: "هوش مصنوعی ابری",
+    description: "راه‌حل‌های AI مبتنی بر ابر",
+    href: "#",
+    icon: Cloud,
+  },
+  {
+    title: "امنیت AI",
+    description: "اپلیکیشن‌های AI خود را ایمن کنید",
+    href: "#",
+    icon: Shield,
+  },
+  {
+    title: "پیکربندی AI",
+    description: "سیستم‌های AI را مؤثر پیکربندی کنید",
+    href: "#",
+    icon: Settings,
+  },
+  {
+    title: "تحلیل AI",
+    description: "معیارهای عملکرد AI را تحلیل کنید",
+    href: "#",
+    icon: BarChart,
+  },
+  {
+    title: "روندهای جهانی AI",
+    description: "با روندهای جهانی AI به‌روز بمانید",
+    href: "#",
+    icon: Globe,
+  },
+  {
+    title: "انجمن AI",
+    description: "به انجمن هوش مصنوعی بپیوندید",
+    href: "#",
+    icon: Users,
+  },
+  {
+    title: "یادگیری AI",
+    description: "از بهترین منابع AI بیاموزید",
+    href: "#",
+    icon: BookOpen,
+  },
+  {
+    title: "پشتیبانی AI",
+    description: "پشتیبانی برای پرسش‌های مرتبط با AI",
+    href: "#",
+    icon: MessageSquare,
+  },
+];
+
+interface Navbar7Props {
+  contained?: boolean;
+  className?: string;
+}
+
+const mobileMenuOverlayClass = (contained: boolean) =>
+  cn(
+    "flex w-full flex-col overflow-scroll border-t border-border bg-background text-start lg:hidden",
+    contained
+      ? "absolute inset-x-0 top-full z-50 max-h-[min(85vh,40rem)]"
+      : "absolute inset-0 top-[72px] h-[calc(100vh-72px)]",
+  );
+
+const Navbar7 = ({ contained = false, className }: Navbar7Props) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <section
+      lang="fa"
+      className={cn(
+        "bg-background text-start",
+        contained ? "relative z-30 overflow-visible" : "inset-x-0 top-0 z-20",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "container px-4 sm:px-6 md:px-8",
+          !contained && "lg:px-40 xl:px-52",
+        )}
+      >
+        <NavigationMenu
+          dir="rtl"
+          viewport={false}
+          className="relative z-50 max-w-none overflow-visible text-start"
+        >
+          <div className="relative z-30 flex w-full items-center justify-between gap-12 overflow-visible py-4">
+            <a href="#" className="flex items-center gap-2">
+              <img
+                src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
+                className="max-h-8 dark:invert"
+                alt="لوگو"
+              />
+              <span className="text-lg font-semibold tracking-tighter">
+                شادسی‌ان‌بلاکز
+              </span>
+            </a>
+            <div className="relative hidden flex-1 justify-center overflow-visible lg:flex">
+              <NavigationMenuList>
+              <NavigationMenuItem className="static">
+                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+                  پلتفرم
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  dir="rtl"
+                  className={cn(
+                    "top-full start-auto end-auto left-1/2 right-auto z-[200] -translate-x-1/2 !overflow-visible p-4 text-start shadow-md",
+                    "!w-[760px] !min-w-[760px] !max-w-[calc(100vw-2rem)] md:!w-[760px]",
+                    contained &&
+                      "!w-[min(760px,calc(100%-1rem))] !min-w-0",
+                  )}
+                >
+                  <div className="grid w-full grid-cols-2 gap-8">
+                    <div className="min-w-[280px]">
+                      <div className="text-start text-xs tracking-widest text-muted-foreground">
+                        راه‌حل‌ها
+                      </div>
+                      <div className="mt-4 grid gap-4">
+                        {DATA_SOLUTIONS.map((solution, index) => (
+                          <NavigationMenuLink
+                            key={index}
+                            href={solution.href}
+                            className="group flex min-w-0 flex-row items-center hover:bg-transparent"
+                          >
+                            <div className="me-4 rounded-lg bg-muted p-4 shadow-sm">
+                              <solution.icon className="size-6 text-muted-foreground transition-all fade-in group-hover:text-foreground" />
+                            </div>
+                            <div className="flex min-w-0 flex-col gap-1 text-sm text-start">
+                              <div className="font-medium text-foreground">
+                                {solution.title}
+                              </div>
+                              <div className="text-sm font-normal text-muted-foreground">
+                                {solution.description}
+                              </div>
+                            </div>
+                          </NavigationMenuLink>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="min-w-[280px]">
+                      <div className="text-start text-xs tracking-widest text-muted-foreground">
+                        بر اساس کاربرد
+                      </div>
+                      <div className="mt-4 grid grid-cols-2 gap-3">
+                        {DATA_PLATFORM_CASE.map((solution, index) => (
+                          <NavigationMenuLink
+                            key={index}
+                            href={solution.href}
+                            className="group flex min-w-0 flex-row items-center hover:bg-transparent"
+                          >
+                            <div className="me-3 shrink-0 rounded-lg bg-muted p-2 shadow-sm">
+                              <solution.icon className="size-4 text-muted-foreground transition-all fade-in group-hover:text-foreground" />
+                            </div>
+                            <div className="min-w-0 text-sm font-medium">
+                              {solution.title}
+                            </div>
+                          </NavigationMenuLink>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem className="static">
+                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+                  منابع
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  dir="rtl"
+                  className={cn(
+                    "top-full start-auto end-auto left-1/2 right-auto z-[200] -translate-x-1/2 !overflow-visible p-4 text-start shadow-md",
+                    "!w-[820px] !min-w-[820px] !max-w-[calc(100vw-2rem)] md:!w-[820px]",
+                    contained &&
+                      "!w-[min(820px,calc(100%-1rem))] !min-w-0",
+                  )}
+                >
+                  <div className="grid w-full grid-cols-3 gap-4">
+                    {DATA_RESOURCES.map((solution, index) => (
+                      <NavigationMenuLink
+                        key={index}
+                        href={solution.href}
+                        className="group flex flex-row items-center hover:bg-transparent"
+                      >
+                        <div className="me-4 rounded-lg bg-muted p-4 shadow-sm">
+                          <solution.icon className="size-6 text-muted-foreground transition-all fade-in group-hover:text-foreground" />
+                        </div>
+                        <div className="flex min-w-0 flex-col gap-1 text-start text-sm font-normal text-muted-foreground">
+                          <div className="font-medium text-foreground">
+                            {solution.title}
+                          </div>
+                          <div className="font-normal text-muted-foreground">
+                            {solution.description}
+                          </div>
+                        </div>
+                      </NavigationMenuLink>
+                    ))}
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <Button variant="ghost" className="text-start">
+                توسعه‌دهنده
+              </Button>
+              </NavigationMenuList>
+            </div>
+            <div className="hidden items-center gap-4 lg:flex">
+              <Button variant="ghost">ورود</Button>
+              <Button>شروع کنید</Button>
+            </div>
+            <div className="flex items-center gap-4 lg:hidden">
+              <Button
+                variant="outline"
+                size="icon"
+                aria-label="منوی اصلی"
+                onClick={() => setOpen(!open)}
+              >
+                {!open && <Menu className="size-4" />}
+                {open && <X className="size-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {open && (
+            <div className={mobileMenuOverlayClass(contained)}>
+              <Accordion
+                type="single"
+                collapsible
+                dir="rtl"
+                className="w-full text-start"
+              >
+                <AccordionItem
+                  value="platform"
+                  className="border-b-2 border-dashed"
+                >
+                  <AccordionTrigger className="px-2 py-4 text-start hover:no-underline">
+                    پلتفرم
+                  </AccordionTrigger>
+                  <AccordionContent className="px-2 pb-4">
+                    <div className="space-y-6">
+                      <div>
+                        <div className="mb-4 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                          راه‌حل‌ها
+                        </div>
+                        <div className="space-y-4">
+                          {DATA_SOLUTIONS.map((solution, index) => (
+                            <a
+                              key={index}
+                              href={solution.href}
+                              className="group flex items-center gap-4 rounded-lg p-2 text-start hover:bg-muted"
+                            >
+                              <div className="rounded-lg bg-muted p-2 shadow-sm">
+                                <solution.icon className="size-4 text-muted-foreground transition-all group-hover:text-foreground" />
+                              </div>
+                              <div className="min-w-0 flex-1">
+                                <div className="text-sm font-medium text-foreground">
+                                  {solution.title}
+                                </div>
+                                <div className="text-xs text-muted-foreground">
+                                  {solution.description}
+                                </div>
+                              </div>
+                            </a>
+                          ))}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="mb-4 text-start text-xs tracking-widest text-muted-foreground uppercase">
+                          بر اساس کاربرد
+                        </div>
+                        <div className="grid grid-cols-2 gap-2">
+                          {DATA_PLATFORM_CASE.map((useCase, index) => (
+                            <a
+                              key={index}
+                              href={useCase.href}
+                              className="group flex items-center gap-2 rounded-lg p-2 text-start hover:bg-muted"
+                            >
+                              <div className="rounded-lg bg-muted p-1.5 shadow-sm">
+                                <useCase.icon className="size-3 text-muted-foreground transition-all group-hover:text-foreground" />
+                              </div>
+                              <div className="truncate text-sm font-medium">
+                                {useCase.title}
+                              </div>
+                            </a>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem
+                  value="resources"
+                  className="border-b-2 border-dashed"
+                >
+                  <AccordionTrigger className="px-2 py-4 text-start hover:no-underline">
+                    منابع
+                  </AccordionTrigger>
+                  <AccordionContent className="px-2 pb-4">
+                    <div className="space-y-3">
+                      {DATA_RESOURCES.map((resource, index) => (
+                        <a
+                          key={index}
+                          href={resource.href}
+                          className="group flex items-center gap-4 rounded-lg p-2 text-start hover:bg-muted"
+                        >
+                          <div className="rounded-lg bg-muted p-2 shadow-sm">
+                            <resource.icon className="size-4 text-muted-foreground transition-all group-hover:text-foreground" />
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <div className="text-sm font-medium text-foreground">
+                              {resource.title}
+                            </div>
+                            <div className="text-xs text-muted-foreground">
+                              {resource.description}
+                            </div>
+                          </div>
+                        </a>
+                      ))}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+              <a
+                href="#"
+                className="w-full border-y-2 border-dashed px-2 py-4 text-start text-sm font-medium"
+              >
+                توسعه‌دهنده
+              </a>
+
+              <div className="mx-8 mt-auto flex flex-col gap-4 py-12">
+                <span className="text-center text-sm">
+                  مشتری هستید؟ <b>ورود</b>
+                </span>
+                <Button className="relative" size="lg">
+                  همین حالا شروع کنید
+                </Button>
+              </div>
+            </div>
+          )}
+        </NavigationMenu>
+      </div>
+    </section>
+  );
+};
+
+export { Navbar7 };
diff --git a/blocks/navbar8.tsx b/blocks/navbar8.tsx
new file mode 100644
index 0000000..af842c5
--- /dev/null
+++ b/blocks/navbar8.tsx
@@ -0,0 +1,483 @@
+"use client";
+import { Menu, X } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface MenuItem {
+  title: string;
+  url?: string;
+  className?: string;
+  links?: {
+    label: string;
+    description?: string;
+    url: string;
+    image?: string;
+  }[];
+}
+
+interface MobileNavigationMenuProps {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+interface DesktopMenuItemProps {
+  item: MenuItem;
+  index: number;
+}
+
+const LOGO = {
+  url: "https://www.ShadcnBlocks",
+  src: "/block-media/shadcnblocks/block/block-1.svg",
+  alt: "لوگو",
+  title: "شادسی‌ان‌بلاکز",
+};
+
+const NAVIGATION: MenuItem[] = [
+  {
+    title: "محصولات",
+    links: [
+      {
+        label: "وبلاگ شرکت",
+        description: "آخرین بینش‌ها و به‌روزرسانی‌ها",
+        url: "#",
+        image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      },
+      {
+        label: "پلتفرم ما",
+        description: "ابزارهای نوآورانه برای تقویت گردش کار",
+        url: "#",
+        image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      },
+      {
+        label: "فرصت‌های شغلی",
+        description: "نقش‌های باز و فرهنگ کاری ما",
+        url: "#",
+        image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      },
+      {
+        label: "پشتیبانی مشتریان",
+        description: "تماس یا مرور مقالات راهنما",
+        url: "#",
+        image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+      },
+      {
+        label: "مستندات محصول",
+        description: "راهنماها، مراجع و مستندات اتصال هوشمند",
+        url: "#",
+        image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+      },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      {
+        label: "درباره تیم ما",
+        url: "#",
+        description: "بیشتر درباره مأموریت و ارزش‌های ما",
+        image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      },
+      {
+        label: "راهنمای کاربران و پشتیبانی",
+        url: "#",
+        description: "جستجو در راهنمای کاربران برای پاسخ سریع",
+        image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      },
+      {
+        label: "آخرین اخبار",
+        url: "#",
+        description: "به‌روز بمانید با اعلان‌های محصول",
+        image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      },
+    ],
+  },
+  {
+    title: "تماس",
+    url: "#",
+  },
+];
+
+const MOBILE_NAVIGATION: MenuItem[] = [
+  {
+    title: "محصولات",
+    className: "col-span-2",
+    links: [
+      { label: "وبلاگ شرکت", url: "#" },
+      { label: "پلتفرم ما", url: "#" },
+      { label: "فرصت‌های شغلی", url: "#" },
+      { label: "پشتیبانی مشتریان", url: "#" },
+      { label: "مستندات محصول", url: "#" },
+    ],
+  },
+  {
+    title: "شرکت",
+    className: "",
+    links: [
+      { label: "درباره تیم ما", url: "#" },
+      { label: "راهنمای کاربران و پشتیبانی", url: "#" },
+      { label: "آخرین اخبار", url: "#" },
+    ],
+  },
+  {
+    title: "جامعه",
+    className: "",
+    links: [
+      { label: "انجمن", url: "#" },
+      { label: "گروه اسلک", url: "#" },
+      { label: "مشارکت‌کنندگان", url: "#" },
+      { label: "رویدادها", url: "#" },
+    ],
+  },
+];
+
+const NAV_BUTTONS: {
+  label: string;
+  url: string;
+  variant:
+    | "ghost"
+    | "default"
+    | "link"
+    | "destructive"
+    | "outline"
+    | "secondary";
+}[] = [
+  {
+    label: "ورود",
+    url: "#",
+    variant: "ghost",
+  },
+  {
+    label: "ثبت‌نام",
+    url: "#",
+    variant: "default",
+  },
+];
+
+const SOCIAL_LINKS = [
+  { label: "لینکدین", url: "#" },
+  { label: "توییتر", url: "#" },
+  { label: "فیسبوک", url: "#" },
+];
+
+const MOBILE_BREAKPOINT = 1024;
+
+interface Navbar8Props {
+  /** When true, keeps the navbar inside block preview instead of fixed viewport positioning. */
+  contained?: boolean;
+  className?: string;
+}
+
+const Navbar8 = ({ contained = false, className }: Navbar8Props) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const navRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > MOBILE_BREAKPOINT) {
+        setOpen(false);
+      }
+    };
+
+    const handleScroll = () => {
+      if (contained || !navRef.current) return;
+      navRef.current.classList.toggle("bg-background", window.scrollY > 300);
+      navRef.current.classList.toggle(
+        "bg-transparent",
+        !(window.scrollY > 300),
+      );
+    };
+
+    handleResize();
+    handleScroll();
+
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [contained]);
+
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "auto";
+  }, [open]);
+
+  const handleMobileMenu = () => {
+    setOpen((prev) => !prev);
+  };
+
+  return (
+    <section
+      lang="fa"
+      className={cn(
+        "text-start",
+        contained && "relative min-h-[5.5rem] overflow-visible",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "z-500 w-full transition-colors duration-500",
+          contained ? "relative bg-background" : "fixed top-0 bg-transparent",
+        )}
+        ref={navRef}
+      >
+        <div className="container border-b">
+          <div className="flex items-center justify-between gap-3.5 py-5">
+            <a
+              href={LOGO.url}
+              className="flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter"
+            >
+              <img
+                src={LOGO.src}
+                alt={LOGO.alt}
+                className="inline-block size-8"
+              />
+              <span className="hidden md:inline-block">{LOGO.title}</span>
+            </a>
+            <NavigationMenu
+              dir="rtl"
+              viewport={false}
+              className="relative z-50 hidden lg:flex"
+            >
+              <NavigationMenuList>
+                {NAVIGATION.map((item, index) => (
+                  <DesktopMenuItem
+                    key={`desktop-link-${index}`}
+                    item={item}
+                    index={index}
+                  />
+                ))}
+              </NavigationMenuList>
+            </NavigationMenu>
+            <div className="flex items-center gap-3.5">
+              {NAV_BUTTONS.map((button, index) => (
+                <Button
+                  key={`nav-button-${index}`}
+                  variant={button.variant}
+                  asChild
+                >
+                  <a href={button.url}>{button.label}</a>
+                </Button>
+              ))}
+              <div className="lg:hidden">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleMobileMenu}
+                  aria-label={open ? "بستن منو" : "باز کردن منو"}
+                >
+                  <Menu className="size-5.5" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <MobileNavigationMenu open={open} setOpen={setOpen} />
+    </section>
+  );
+};
+
+const DesktopMenuItem = ({ item, index }: DesktopMenuItemProps) => {
+  const imagesRef = useRef<HTMLImageElement[]>([]);
+
+  const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
+    const linkIndex = Number(event.currentTarget.getAttribute("data-index"));
+    if (item.links && imagesRef.current[linkIndex]) {
+      imagesRef.current.forEach((img, i) => {
+        img.classList.toggle("opacity-100", i === linkIndex);
+        img.classList.toggle("opacity-0", i !== linkIndex);
+      });
+    }
+  };
+
+  const handleMouseLeave = () => {
+    imagesRef.current.forEach((img) => {
+      img.classList.remove("opacity-100");
+      img.classList.add("opacity-0");
+    });
+    imagesRef.current[0]?.classList.add("opacity-100");
+  };
+
+  if (item.links) {
+    return (
+      <NavigationMenuItem
+        key={`desktop-menu-item-${index}`}
+        value={`${index}`}
+        className="relative"
+      >
+        <NavigationMenuTrigger className="bg-transparent text-start [&_svg]:ms-1 [&_svg]:!ml-0">
+          {item.title}
+        </NavigationMenuTrigger>
+        <NavigationMenuContent
+          dir="rtl"
+          className="top-full left-1/2 z-50 mt-1.5 !w-auto -translate-x-1/2 max-w-[calc(100vw-2rem)] !rounded-2xl !p-0 text-start"
+        >
+          <div className="grid min-h-[18.75rem] w-[45.25rem] max-w-[calc(100vw-2rem)] grid-cols-[1fr_22.5rem] gap-4 p-3">
+            <div className="text-start">
+              <div className="p-4 text-start leading-normal font-bold">
+                {item.title}
+              </div>
+              <ul>
+                {item.links.map((link, linkIndex) => (
+                  <li key={`desktop-nav-sublink-${linkIndex}`}>
+                    <a
+                      href={link.url}
+                      className="flex items-center gap-4 rounded-lg px-4 py-3 text-start hover:bg-muted"
+                      data-index={linkIndex}
+                      onMouseEnter={handleMouseEnter}
+                      onMouseLeave={handleMouseLeave}
+                    >
+                      <div>
+                        <h3 className="leading-normal font-medium">
+                          {link.label}
+                        </h3>
+                        <p className="leading-normal text-muted-foreground">
+                          {link.description}
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="relative aspect-square w-full overflow-hidden rounded-xl">
+              {item.links.map((link, linkIndex) => (
+                <img
+                  key={linkIndex}
+                  ref={(el) => {
+                    if (el) {
+                      imagesRef.current[linkIndex] = el;
+                    }
+                  }}
+                  src={link.image}
+                  alt={link.label}
+                  className={cn(
+                    "absolute top-0 start-0 h-full w-full object-cover transition-opacity duration-300",
+                    linkIndex === 0 ? "opacity-100" : "opacity-0",
+                  )}
+                />
+              ))}
+            </div>
+          </div>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem
+      key={`desktop-menu-item-${index}`}
+      value={`${index}`}
+      className={`${navigationMenuTriggerStyle()} bg-transparent text-start`}
+    >
+      <NavigationMenuLink href={item.url}>{item.title}</NavigationMenuLink>
+    </NavigationMenuItem>
+  );
+};
+
+const MobileNavigationMenu = ({ open, setOpen }: MobileNavigationMenuProps) => {
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetContent
+        aria-describedby={undefined}
+        side="top"
+        dir="rtl"
+        className="inset-0 z-600 h-dvh w-full bg-primary text-start text-primary-foreground [&>button]:hidden"
+      >
+        <div className="flex-1 overflow-y-auto">
+          <div className="container pb-12">
+            <div className="absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap">
+              <SheetTitle className="text-primary">منوی موبایل</SheetTitle>
+            </div>
+            <div className="flex justify-start pt-5">
+              <SheetClose asChild>
+                <Button
+                  size="icon"
+                  className="size-9 rounded-full bg-muted/20 hover:bg-muted/20"
+                  aria-label="بستن منو"
+                >
+                  <X className="size-5.5" />
+                </Button>
+              </SheetClose>
+            </div>
+            <div className="flex h-full flex-col justify-between gap-30 pt-24">
+              <div className="grid w-full grid-cols-2 gap-x-4 gap-y-10 text-start">
+                {MOBILE_NAVIGATION.map((item, index) =>
+                  renderMobileMenuItem(item, index),
+                )}
+              </div>
+              <div className="col-span-2 flex flex-col gap-4 text-start">
+                <div className="text-xs text-foreground/60 uppercase">
+                  شبکه‌های اجتماعی
+                </div>
+                <div className="flex gap-4">
+                  {SOCIAL_LINKS.map((link, index) => (
+                    <a
+                      key={`social-link-${index}`}
+                      href={link.url}
+                      className="text-primary-foreground"
+                    >
+                      {link.label}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const renderMobileMenuItem = (item: MenuItem, index: number) => {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 text-start text-primary-foreground",
+        item.className,
+      )}
+      key={`mobile-menu-item-${index}`}
+    >
+      <div className="text-xs text-foreground/60 uppercase">{item.title}</div>
+      <ul className="flex flex-col gap-3">
+        {item.links?.map((link, i) => (
+          <li key={`mobile-nav-link-${i}`}>
+            <a
+              href={link.url}
+              className={cn(
+                "text-primary-foreground",
+                index === 0 ? "text-xl" : "text-base",
+                "leading-normal font-medium",
+              )}
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export { Navbar8 };
diff --git a/blocks/navbar9.tsx b/blocks/navbar9.tsx
new file mode 100644
index 0000000..092f864
--- /dev/null
+++ b/blocks/navbar9.tsx
@@ -0,0 +1,460 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  Bell,
+  Book,
+  ChevronRight,
+  FileText,
+  Globe,
+  Grid,
+  HelpCircle,
+  Info,
+  Menu,
+  X,
+} from "lucide-react";
+import { Fragment, useEffect, useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface MenuLink {
+  label: string;
+  description?: string;
+  url?: string;
+  icon?: {
+    component: LucideIcon;
+    color: string;
+  };
+}
+interface MenuItem {
+  title: string;
+  url?: string;
+  links?: MenuLink[];
+}
+
+interface DesktopMenuItemProps {
+  item: MenuItem;
+  index: number;
+}
+
+interface MobileNavigationMenuProps {
+  open: boolean;
+}
+
+interface MenuSubLinkProps {
+  link: MenuLink;
+}
+
+const LOGO = {
+  url: "https://www.ShadcnBlocks",
+  src: "/block-media/shadcnblocks/block/block-1.svg",
+  alt: "لوگو",
+  title: "شادسی‌ان‌بلاکز",
+};
+
+const NAVIGATION: MenuItem[] = [
+  {
+    title: "محصولات",
+    links: [
+      {
+        label: "وبلاگ شرکت",
+        description: "بینش‌ها و به‌روزرسانی‌ها",
+        url: "#",
+        icon: {
+          component: FileText,
+          color: "#10b981",
+        },
+      },
+      {
+        label: "پلتفرم ما",
+        description: "کار خود را قدرتمند کنید",
+        url: "#",
+        icon: {
+          component: Grid,
+          color: "#6366f1",
+        },
+      },
+    ],
+  },
+  {
+    title: "شرکت",
+    links: [
+      {
+        label: "درباره تیم ما",
+        url: "#",
+        description: "مأموریت و ارزش‌های ما",
+        icon: {
+          component: Info,
+          color: "#f59e0b",
+        },
+      },
+      {
+        label: "راهنمای کاربران و پشتیبانی",
+        url: "#",
+        description: "کمک سریع دریافت کنید",
+        icon: {
+          component: HelpCircle,
+          color: "#3b82f6",
+        },
+      },
+      {
+        label: "آخرین اخبار",
+        url: "#",
+        description: "به‌روزرسانی‌های محصول",
+        icon: {
+          component: Bell,
+          color: "#f97316",
+        },
+      },
+    ],
+  },
+  {
+    title: "منابع",
+    links: [
+      {
+        label: "مستندات",
+        url: "#",
+        description: "راهنماها و مراجع",
+        icon: {
+          component: Book,
+          color: "#8b5cf6",
+        },
+      },
+      {
+        label: "مرجع اتصال هوشمند",
+        url: "#",
+        description: "کاوش اتصال هوشمند ما",
+        icon: {
+          component: Globe,
+          color: "#ef4444",
+        },
+      },
+    ],
+  },
+  {
+    title: "قیمت‌گذاری",
+    url: "#",
+  },
+  {
+    title: "تماس",
+    url: "#",
+  },
+];
+
+const PRIMARY_BUTTON = {
+  label: "ثبت‌نام",
+  url: "#",
+};
+
+const MOBILE_BREAKPOINT = 1024;
+
+interface Navbar9Props {
+  className?: string;
+}
+
+const Navbar9 = ({ className }: Navbar9Props) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > MOBILE_BREAKPOINT) {
+        setOpen(false);
+      }
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "auto";
+  }, [open]);
+
+  const handleMobileMenu = () => {
+    const nextOpen = !open;
+    setOpen(nextOpen);
+  };
+
+  return (
+    <Fragment>
+      <section
+        lang="fa"
+        className={cn(
+          "dark pointer-events-auto relative z-999 bg-background text-start",
+          className,
+        )}
+      >
+        <div className="container h-16">
+          <div className="flex h-full items-center justify-between">
+            <a
+              href={LOGO.url}
+              className="flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter"
+            >
+              <img
+                src={LOGO.src}
+                alt={LOGO.alt}
+                className="inline-block size-8 invert"
+              />
+              <span className="hidden text-foreground md:inline-block">
+                {LOGO.title}
+              </span>
+            </a>
+            <NavigationMenu
+              dir="rtl"
+              className="relative z-50 hidden lg:flex"
+              viewport={false}
+            >
+              <NavigationMenuList className="">
+                {NAVIGATION.map((item, index) => (
+                  <DesktopMenuItem
+                    key={`desktop-link-${index}`}
+                    item={item}
+                    index={index}
+                  />
+                ))}
+              </NavigationMenuList>
+            </NavigationMenu>
+            <div className="flex items-center gap-4">
+              <GithubStars repoUrl="https://github.com/shadcn/ui" />
+              <Button asChild>
+                <a href={PRIMARY_BUTTON.url}>{PRIMARY_BUTTON.label}</a>
+              </Button>
+              <div className="lg:hidden">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleMobileMenu}
+                  aria-label={open ? "بستن منو" : "باز کردن منو"}
+                >
+                  {open ? (
+                    <X className="size-5.5 stroke-foreground" />
+                  ) : (
+                    <Menu className="size-5.5 stroke-foreground" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <MobileNavigationMenu open={open} />
+    </Fragment>
+  );
+};
+
+const DesktopMenuItem = ({ item, index }: DesktopMenuItemProps) => {
+  if (item.links) {
+    return (
+      <NavigationMenuItem key={`desktop-menu-item-${index}`} value={`${index}`}>
+        <NavigationMenuTrigger className="h-fit bg-transparent text-start font-normal text-foreground focus:!bg-transparent data-[active=true]:!bg-transparent [&_svg]:ms-1 [&_svg]:!ml-0">
+          {item.title}
+        </NavigationMenuTrigger>
+        <NavigationMenuContent
+          dir="rtl"
+          className="start-0 end-auto left-auto z-50 !rounded-xl !p-0 text-start"
+        >
+          <ul className="w-[20rem] p-2.5 text-start">
+            {item.links.map((link, index) => (
+              <li key={`desktop-nav-sublink-${index}`}>
+                <MenuSubLink link={link} />
+              </li>
+            ))}
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem key={`desktop-menu-item-${index}`} value={`${index}`}>
+      <NavigationMenuLink
+        href={item.url}
+        className={`${navigationMenuTriggerStyle()} h-fit bg-transparent text-start font-normal text-foreground`}
+      >
+        {item.title}
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  );
+};
+
+const MenuSubLink = ({ link }: MenuSubLinkProps) => {
+  return (
+    <a
+      href={link.url}
+      className="flex items-center gap-4 rounded-lg p-2 text-start hover:bg-muted"
+    >
+      <div className="flex w-full items-center justify-between gap-2">
+        <div className="flex gap-2.5 text-start">
+          {link.icon && (
+            <link.icon.component
+              className="size-5 shrink-0"
+              style={{ stroke: link.icon.color }}
+            />
+          )}
+          <div className="flex min-w-0 flex-col gap-1.5 text-start">
+            <h3 className="text-sm leading-none text-foreground">
+              {link.label}
+            </h3>
+            <p className="text-sm leading-[1.2] text-muted-foreground/80">
+              {link.description}
+            </p>
+          </div>
+        </div>
+        <ChevronRight className="size-3.5 shrink-0 stroke-muted-foreground opacity-100 rtl:rotate-180" />
+      </div>
+    </a>
+  );
+};
+
+const MobileNavigationMenu = ({ open }: MobileNavigationMenuProps) => {
+  return (
+    <Sheet open={open}>
+      <SheetContent
+        aria-describedby={undefined}
+        side="top"
+        className="dark inset-0 z-998 h-dvh w-full bg-background pt-16 [&>button]:hidden"
+      >
+        <div className="flex-1 overflow-y-auto">
+          <div className="container pb-12">
+            <div className="absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap">
+              <SheetTitle className="text-primary">منوی موبایل</SheetTitle>
+            </div>
+            <div className="flex h-full flex-col justify-between gap-20">
+              <Accordion
+                type="multiple"
+                dir="rtl"
+                className="w-full text-start"
+              >
+                {NAVIGATION.map((item, index) =>
+                  renderMobileMenuItem(item, index),
+                )}
+              </Accordion>
+              <div className="pb-20">
+                <Button asChild className="w-full">
+                  <a href={PRIMARY_BUTTON.url}>{PRIMARY_BUTTON.label}</a>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const renderMobileMenuItem = (item: MenuItem, index: number) => {
+  if (item.links) {
+    return (
+      <AccordionItem key={item.title} value={`nav-${index}`}>
+        <AccordionTrigger className="h-[3.75rem] items-center justify-start p-0 text-start text-base leading-[3.75] font-normal text-muted-foreground hover:no-underline [&>svg]:ms-auto [&>svg]:me-0">
+          {item.title}
+        </AccordionTrigger>
+        <AccordionContent>
+          {item.links.map((subItem) => (
+            <MenuSubLink key={subItem.label} link={subItem} />
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+
+  return (
+    <a
+      key={item.title}
+      href={item.url}
+      className="flex h-[3.75rem] items-center border-b p-0 text-start text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all focus-visible:ring-4 focus-visible:outline-1 nth-last-1:border-0"
+    >
+      {item.title}
+    </a>
+  );
+};
+
+interface GithubStarsProps {
+  repoUrl: string;
+}
+
+const GithubStars = ({ repoUrl }: GithubStarsProps) => {
+  const [stargazersCount, setStargazersCount] = useState<string>("");
+
+  const [owner, repo] = repoUrl.split("github.com/")[1].split("/");
+  const githubApiEndpoint = `https://api.github.com/repos/${owner}/${repo}`;
+
+  const formatStargazers = (count: number | ""): string => {
+    if (count === "") return "";
+    if (count < 1000) return count.toString();
+    return `${Math.round(count / 1000)}k`;
+  };
+
+  useEffect(() => {
+    const getStars = async () => {
+      try {
+        const response = await fetch(githubApiEndpoint);
+        const json = await response.json();
+        const formattedCount = formatStargazers(json.stargazers_count);
+        setStargazersCount(formattedCount);
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          console.error(error.message);
+        }
+      }
+    };
+
+    getStars();
+  }, [githubApiEndpoint]);
+
+  return (
+    <Button
+      variant="ghost"
+      asChild
+      className="flex items-center gap-1.5 bg-muted text-foreground"
+    >
+      <a href={repoUrl}>
+        <svg width="800px" height="800px" viewBox="0 0 20 20">
+          <g
+            id="Page-1"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+          >
+            <g
+              transform="translate(-140.000000, -7559.000000)"
+              fill="currentColor"
+            >
+              <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path
+                  d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399"
+                  id="github-[#142]"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </svg>
+        <span>{stargazersCount}</span>
+      </a>
+    </Button>
+  );
+};
+
+export { Navbar9 };
diff --git a/blocks/offer-modal1.tsx b/blocks/offer-modal1.tsx
new file mode 100644
index 0000000..f3a3dd6
--- /dev/null
+++ b/blocks/offer-modal1.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const OfferModal1 = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className="relative flex min-h-[28rem] w-full items-center justify-center p-4 md:min-h-[32rem]"
+    >
+      {isOpen ? (
+        <div
+          role="dialog"
+          aria-modal="false"
+          aria-labelledby="offer-modal1-title"
+          className={cn(
+            "relative block h-fit w-full max-w-115 space-y-2.5 rounded-sm border bg-popover p-10 text-popover-foreground shadow-lg ring-1 ring-foreground/10",
+          )}
+        >
+          <div className="absolute end-1.5 top-1.5">
+            <Button
+              type="button"
+              variant="ghost"
+              className="text-xs text-muted-foreground"
+              size="sm"
+              onClick={() => setIsOpen(false)}
+            >
+              بستن
+            </Button>
+          </div>
+          <div className="space-y-2.5">
+            <h2
+              id="offer-modal1-title"
+              className="text-start font-serif text-xl leading-snug font-normal"
+            >
+              در خبرنامه ما عضو شوید و از ۳۵٪ تخفیف اولین سفارش بهره‌مند شوید
+            </h2>
+            <Input
+              type="email"
+              dir="rtl"
+              placeholder="ایمیل خود را وارد کنید"
+              className="text-start"
+            />
+            <Button type="button" className="w-full text-xs">
+              عضویت
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export { OfferModal1 };
diff --git a/blocks/offer-modal4.tsx b/blocks/offer-modal4.tsx
new file mode 100644
index 0000000..fcc5f8e
--- /dev/null
+++ b/blocks/offer-modal4.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRight, Mail, X } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldError } from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { cn } from "@/lib/utils";
+
+const formSchema = z.object({
+  email: z.string().email("آدرس ایمیل نامعتبر است"),
+});
+
+type FormType = z.infer<typeof formSchema>;
+
+type OfferModalData = {
+  overline: string;
+  title: string;
+  description: string;
+};
+
+type Offermodal4Props = OfferModalData;
+
+const OFFER_MODAL = {
+  title: "عضو شوید و از ۲۰٪ تخفیف بهره‌مند شوید",
+  description:
+    "برای دریافت آخرین به‌روزرسانی‌ها ثبت‌نام کنید؛ هر زمان بخواهید می‌توانید لغو اشتراک کنید.",
+};
+
+const OfferModal4 = ({
+  title = OFFER_MODAL.title,
+  description = OFFER_MODAL.description,
+}: Offermodal4Props) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className="relative flex min-h-[32rem] w-full items-center justify-center p-4 md:min-h-[40rem]"
+    >
+      {isOpen ? (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="offer-modal4-title"
+          className={cn(
+            "group relative grid w-full max-w-full overflow-hidden rounded-none border bg-popover text-popover-foreground shadow-lg sm:max-w-190 lg:max-w-117.5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+          )}
+        >
+          <div className="absolute -end-px -top-px z-10">
+            <Button
+              type="button"
+              size="icon-sm"
+              aria-label="بستن"
+              className="origin-top-end rounded-none transition-all duration-300 lg:scale-50 lg:opacity-0 lg:group-hover:scale-100 lg:group-hover:opacity-100 [@media(hover:none)]:scale-100 [@media(hover:none)]:opacity-100"
+              onClick={() => setIsOpen(false)}
+            >
+              <X />
+            </Button>
+          </div>
+          <div className="h-full max-h-72.5 overflow-hidden max-lg:hidden">
+            <img
+              src="/block-media/shadcnblocks/block/ecommerce/promotional/silhouette-with-headphones-1.png"
+              alt="سیلوئت با هدفون"
+              className="block size-full object-cover"
+            />
+          </div>
+          <div className="space-y-5 overflow-y-auto px-9 py-5 lg:px-15 lg:py-7">
+            <div className="space-y-2.5">
+              <h2
+                id="offer-modal4-title"
+                className="text-center text-3xl font-medium"
+              >
+                {title}
+              </h2>
+            </div>
+            <form className="space-y-2.5" onSubmit={form.handleSubmit(onSubmit)}>
+              <div className="flex items-center gap-2.5">
+                <Controller
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <Field className="flex-1" data-invalid={fieldState.invalid}>
+                      <InputGroup dir="rtl">
+                        <InputGroupInput
+                          type="email"
+                          placeholder="ایمیل خود را وارد کنید"
+                          className="text-start"
+                          {...field}
+                          aria-invalid={fieldState.invalid}
+                        />
+                        <InputGroupAddon align="inline-end">
+                          <Mail />
+                        </InputGroupAddon>
+                      </InputGroup>
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+                <Button size="icon" type="submit" className="lg:hidden">
+                  <ArrowRight className="rtl:rotate-180" />
+                </Button>
+              </div>
+              <Button className="w-full max-lg:hidden" type="submit">
+                دریافت تخفیف
+              </Button>
+            </form>
+            <p className="text-center text-xs leading-relaxed text-muted-foreground">
+              {description}
+            </p>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export { OfferModal4 };
diff --git a/blocks/offer-modal5.tsx b/blocks/offer-modal5.tsx
new file mode 100644
index 0000000..ff9144f
--- /dev/null
+++ b/blocks/offer-modal5.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { X } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { z } from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const OFFER_MODAL = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/symbols/ux.svg",
+    alt: "لوگو",
+  },
+  title: "همین حالا عضو شوید و از ۲۰٪ تخفیف بهره‌مند شوید",
+  description:
+    "برای دریافت آخرین به‌روزرسانی‌ها و پیشنهادها ثبت‌نام کنید؛ هر زمان بخواهید می‌توانید لغو اشتراک کنید.",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/promotional/Cozy-Smartphone-Interaction-2.png",
+    alt: "تعامل با گوشی هوشمند",
+  },
+};
+
+const formSchema = z.object({
+  email: z.string().email("آدرس ایمیل نامعتبر است"),
+});
+
+type Image = {
+  src: string;
+  alt: string;
+};
+
+type FormType = z.infer<typeof formSchema>;
+
+type OfferModalData = {
+  logo: Image;
+  image: Image;
+  title: string;
+  description: string;
+};
+
+type Offermodal5Props = OfferModalData;
+
+const OfferModal5 = ({
+  title = OFFER_MODAL.title,
+  logo = OFFER_MODAL.logo,
+  description = OFFER_MODAL.description,
+  image = OFFER_MODAL.image,
+}: Offermodal5Props) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className="relative flex min-h-[40rem] w-full items-center justify-center p-4 md:min-h-[48rem]"
+    >
+      {isOpen ? (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="offer-modal5-title"
+          className={cn(
+            "relative w-full max-w-150 overflow-hidden rounded-xl border bg-popover text-start text-popover-foreground shadow-lg",
+          )}
+        >
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label="بستن"
+            className="absolute end-3 top-3 z-10"
+            onClick={() => setIsOpen(false)}
+          >
+            <X className="size-5 transition-all" />
+          </Button>
+          <div className="max-h-full overflow-y-auto">
+            <div className="space-y-4 p-6 md:p-16">
+              <div className="basis-1/2 space-y-8">
+                <div className="gap-8 space-y-8 p-0">
+                  {logo && (
+                    <img
+                      src={logo.src}
+                      alt={logo.alt}
+                      className="size-11 lg:size-16 dark:invert"
+                    />
+                  )}
+                  <div className="space-y-4">
+                    <h2
+                      id="offer-modal5-title"
+                      className="text-start text-xl leading-tight font-medium md:text-3xl lg:text-xl"
+                    >
+                      {title}
+                    </h2>
+                    <p className="text-start text-xl leading-tight text-muted-foreground">
+                      {description}
+                    </p>
+                  </div>
+                </div>
+                <form onSubmit={form.handleSubmit(onSubmit)}>
+                  <div className="flex items-start gap-3 max-sm:flex-col">
+                    <Controller
+                      control={form.control}
+                      name="email"
+                      render={({ field, fieldState }) => (
+                        <Field
+                          className="w-full flex-1"
+                          data-invalid={fieldState.invalid}
+                        >
+                          <Input
+                            type="email"
+                            dir="rtl"
+                            className="h-10 rounded-full px-6 text-start"
+                            placeholder="ایمیل خود را وارد کنید"
+                            {...field}
+                            aria-invalid={fieldState.invalid}
+                          />
+                          {fieldState.invalid && (
+                            <FieldError errors={[fieldState.error]} />
+                          )}
+                        </Field>
+                      )}
+                    />
+                    <Button
+                      type="submit"
+                      size="lg"
+                      className="rounded-full max-sm:w-full sm:basis-30"
+                    >
+                      عضویت
+                    </Button>
+                  </div>
+                </form>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                با ثبت‌نام، با{" "}
+                <a href="#" className="underline underline-offset-3">
+                  شرایط استفاده
+                </a>{" "}
+                و{" "}
+                <a href="#" className="underline underline-offset-3">
+                  حریم خصوصی
+                </a>{" "}
+                ما موافقت می‌کنید.
+              </p>
+            </div>
+            <div className="h-1/2 basis-1/2">
+              <AspectRatio ratio={1} className="overflow-hidden">
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="block size-full object-cover object-center"
+                />
+              </AspectRatio>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export { OfferModal5 };
diff --git a/blocks/onboarding1.tsx b/blocks/onboarding1.tsx
new file mode 100644
index 0000000..07fc2ac
--- /dev/null
+++ b/blocks/onboarding1.tsx
@@ -0,0 +1,1125 @@
+"use client";
+
+import { Check, ChevronRight, Plus } from "lucide-react";
+import { motion } from "motion/react";
+import React, { useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const toFaDigits = (value: number) => value.toLocaleString("fa-IR");
+
+interface Hyperlink {
+  label: string;
+  href: string;
+}
+
+interface StepComponentProps {
+  onSubmit: () => void;
+  goBack?: () => void;
+  currentStep: number;
+  totalSteps: number;
+}
+
+interface OnboardingStep {
+  component: React.ComponentType<StepComponentProps>;
+}
+
+interface OnboardingStepHeaderProps {
+  title: string;
+  stepIndex: number;
+  totalSteps: number;
+  goBack?: () => void;
+}
+
+const OnboardingStepHeader = ({
+  title,
+  stepIndex,
+  totalSteps,
+  goBack,
+}: OnboardingStepHeaderProps) => {
+  return (
+    <div className="relative">
+      {goBack && stepIndex > 0 && (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={goBack}
+          className="absolute top-1/2 inset-s-full -translate-y-1/2 translate-x-1/2"
+          aria-label="بازگشت به مرحله قبل"
+        >
+          <ChevronRight className="size-4" />
+        </Button>
+      )}
+      <div>
+        <p className="text-sm font-medium text-muted-foreground">
+          {toFaDigits(stepIndex + 1)}/{toFaDigits(totalSteps)}
+        </p>
+        <h3 className="text-xl font-semibold tracking-tight md:whitespace-nowrap">
+          {title}
+        </h3>
+      </div>
+    </div>
+  );
+};
+
+interface OnboardingStepProps {
+  children: React.ReactNode;
+}
+
+const OnboardingStep = ({ children }: OnboardingStepProps) => {
+  return (
+    <div className="flex w-full flex-col-reverse gap-10 sm:rounded-2xl sm:border md:min-h-[85dvh] md:flex-row lg:rounded-3xl">
+      {children}
+    </div>
+  );
+};
+
+interface OnboardingStepLeftWrapperProps {
+  title: string;
+  currentStep: number;
+  totalSteps: number;
+  children: React.ReactNode;
+  goBack?: () => void;
+}
+
+const OnboardingStepLeftWrapper = ({
+  title,
+  currentStep,
+  totalSteps,
+  goBack,
+  children,
+}: OnboardingStepLeftWrapperProps) => {
+  return (
+    <div className="flex flex-1/2 justify-center pe-10 sm:py-10 sm:pb-10 sm:ps-10 md:py-20 lg:justify-start lg:pe-0 lg:ps-24">
+      <div className="flex h-full w-full max-w-sm shrink-0 flex-col gap-6 md:max-w-md">
+        <OnboardingStepHeader
+          title={title}
+          stepIndex={currentStep}
+          totalSteps={totalSteps}
+          goBack={goBack}
+        />
+        {children}
+      </div>
+    </div>
+  );
+};
+
+interface OnboardingStepRightWrapperProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const OnboardingStepRightWrapper = ({
+  children,
+  className,
+}: OnboardingStepRightWrapperProps) => {
+  return (
+    <div
+      className={cn(
+        "hidden flex-1/2 overflow-hidden sm:pt-10 md:pt-20 lg:block",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface FileInputProps {
+  label: string;
+  name: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onRemove: () => void;
+  value: string | null;
+  description?: string;
+}
+
+const FileInput = ({
+  label,
+  name,
+  onChange,
+  onRemove,
+  value,
+  description,
+}: FileInputProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleUploadFile = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className="flex items-center gap-4">
+      <div
+        onClick={handleUploadFile}
+        className="flex size-18 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border bg-muted"
+      >
+        {value ? (
+          <img
+            src={value}
+            alt="تصویر پروفایل"
+            className="size-full object-cover"
+          />
+        ) : (
+          <Plus />
+        )}
+      </div>
+      <div className="space-y-3">
+        <Label>{label}</Label>
+        <div className="flex items-center gap-2">
+          <input
+            type="file"
+            name={name}
+            ref={fileInputRef}
+            className="hidden"
+            onChange={onChange}
+          />
+          <Button
+            variant="outline"
+            type="button"
+            size="sm"
+            onClick={handleUploadFile}
+          >
+            بارگذاری تصویر
+          </Button>
+          {value && (
+            <Button
+              variant="outline"
+              type="button"
+              size="sm"
+              onClick={onRemove}
+            >
+              حذف
+            </Button>
+          )}
+        </div>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+interface DashboardIllustrationProps {
+  image?: string | null;
+  variant?: "zoomed-in" | "zoomed-out";
+  title?: string;
+  transformOrigin?: string;
+  className?: string;
+}
+
+const DashboardIllustration = ({
+  image,
+  variant = "zoomed-out",
+  title = "عنوان فضای کار",
+  transformOrigin = "-20%  -10%",
+  className,
+}: DashboardIllustrationProps) => {
+  return (
+    <motion.div
+      style={{
+        transformOrigin,
+      }}
+      animate={{
+        scale: variant === "zoomed-in" ? 1.5 : 1,
+      }}
+      transition={{
+        type: "spring",
+        stiffness: 300,
+        damping: 40,
+      }}
+      className={cn(
+        "flex h-full w-5xl overflow-hidden rounded-xl border",
+        className,
+      )}
+    >
+      <div className="h-full flex-2/7 shrink-0 overflow-hidden bg-muted">
+        <div className="flex items-center justify-between gap-2 border-b p-4">
+          <div className="flex items-center gap-2 overflow-hidden">
+            <div
+              className={cn(
+                "size-8 shrink-0 overflow-hidden rounded-md",
+                !image && "bg-blue-500",
+              )}
+            >
+              {image && (
+                <img
+                  src={image}
+                  alt="تصویر فضای کار"
+                  className="size-full object-cover"
+                />
+              )}
+            </div>
+            <p className="truncate overflow-hidden font-semibold">{title}</p>
+          </div>
+          <ChevronRight className="size-4 rtl:rotate-180" />
+        </div>
+        <ul className="space-y-2 p-4">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <li
+              key={`sidebar-tab-${index}`}
+              className="h-9 rounded-lg border bg-background/50 hover:shadow-md"
+            />
+          ))}
+        </ul>
+      </div>
+      <div className="flex flex-5/7 shrink-0 flex-col justify-between p-4">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex items-center gap-4">
+              <div className="size-9 rounded-lg border bg-muted/50" />
+              <div className="h-9 w-64 rounded-lg border bg-muted/50" />
+              <div className="flex items-center gap-2">
+                {Array.from({ length: 2 }).map((_, index) => (
+                  <div
+                    key={`icon-btn-${index}`}
+                    className="size-9 rounded-lg border"
+                  />
+                ))}
+              </div>
+            </div>
+            <Button variant="outline">
+              <span className="block h-5 w-20 rounded-md bg-muted/50" />
+              <Plus />
+            </Button>
+          </div>
+
+          <div className="overflow-hidden rounded-lg border">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  {[10, 40, 30, 60].map((width, index) => (
+                    <TableHead
+                      key={`th-${index}`}
+                      style={{ width }}
+                      className="h-9 border-e last:border-e-0"
+                    />
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Array.from({ length: 8 }).map((_, rowIndex) => (
+                  <TableRow
+                    key={`row-${rowIndex}`}
+                    className="even:bg-muted/20"
+                  >
+                    {Array.from({ length: 4 }).map((_, colIndex) => (
+                      <TableCell
+                        key={`cell-${rowIndex}-${colIndex}`}
+                        className="h-9 border-e last:border-e-0"
+                      />
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <div
+              key={`icon-btn-${index}`}
+              className="size-9 rounded-lg border bg-muted/50"
+            />
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+interface FormFieldProps {
+  label: string;
+  placeholder: string;
+  name: string;
+  type?: string;
+  input?: string;
+  onChange?: React.ChangeEventHandler;
+  options?: { label: string; value: string }[];
+}
+
+const FormField = ({
+  label,
+  placeholder,
+  name,
+  type,
+  input = "input",
+  onChange,
+  options,
+}: FormFieldProps) => {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={name}>{label}</Label>
+      {input === "textarea" && (
+        <Textarea
+          id={name}
+          placeholder={placeholder}
+          name={name}
+          className="w-full"
+          style={{
+            resize: "none",
+          }}
+          onChange={onChange}
+        />
+      )}
+      {input === "input" && (
+        <Input
+          type={type}
+          id={name}
+          placeholder={placeholder}
+          name={name}
+          dir={
+            type === "email" || name === "workspaceHandle" ? "ltr" : undefined
+          }
+          className={cn(
+            "w-full",
+            (type === "email" || name === "workspaceHandle") && "text-end",
+          )}
+          onChange={onChange}
+        />
+      )}
+      {input === "select" && (
+        <Select>
+          <SelectTrigger className="w-full">
+            <SelectValue placeholder={placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {options?.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </div>
+  );
+};
+
+interface SkipOnboardingButtonProps {
+  onSubmit: () => void;
+  label: string;
+  description: string;
+}
+
+const SkipOnboardingButton = ({
+  onSubmit,
+  label,
+  description,
+}: SkipOnboardingButtonProps) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button className="w-full" variant="ghost">
+          {label}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>مطمئن هستید؟</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              setIsDialogOpen(false);
+              onSubmit();
+            }}
+          >
+            تأیید
+          </Button>
+          <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
+            انصراف
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const StepOneComponent = ({
+  onSubmit,
+  currentStep,
+  totalSteps,
+}: StepComponentProps) => {
+  const [profilePicture, setProfilePicture] = useState<string | null>(null);
+  const [productUpdates, setProductUpdates] = useState(true);
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setProfilePicture(URL.createObjectURL(e.target.files[0]));
+    }
+  };
+
+  const handleRemoveImage = () => {
+    setProfilePicture(null);
+  };
+
+  const TEXT_FIELDS = [
+    {
+      label: "نام و نام خانوادگی",
+      placeholder: "مریم احمدی‌زاده",
+      name: "name",
+      type: "text",
+    },
+    {
+      label: "بیوگرافی",
+      placeholder: "چند جمله درباره خودتان...",
+      name: "about",
+      type: "text",
+      input: "textarea",
+    },
+    {
+      label: "ایمیل کاری",
+      placeholder: "maryam@example.ir",
+      name: "email",
+      type: "email",
+    },
+  ];
+
+  return (
+    <OnboardingStep>
+      <OnboardingStepLeftWrapper
+        title="تنظیم پروفایل"
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+      >
+        <form
+          onSubmit={(e) => e.preventDefault()}
+          className="space-y-6 py-4 text-start"
+        >
+          <FileInput
+            label="تصویر پروفایل"
+            name="profilePicture"
+            onChange={handleFileUpload}
+            onRemove={handleRemoveImage}
+            value={profilePicture}
+            description="فایل‌های تصویر و jpeg تا ۱۰ مگابایت"
+          />
+
+          <div className="space-y-6 border-b pt-4 pb-6">
+            {TEXT_FIELDS.map((field, i) => {
+              return (
+                <FormField
+                  key={`text-field-${i}-${field.name}`}
+                  label={field.label}
+                  placeholder={field.placeholder}
+                  name={field.name}
+                  type={field.type}
+                  input={field.input}
+                />
+              );
+            })}
+          </div>
+
+          <div className="inline-flex w-full items-center gap-3 text-xs">
+            <span dir="rtl" className="inline-flex shrink-0 items-center">
+              <Switch
+                checked={productUpdates}
+                onCheckedChange={setProductUpdates}
+                aria-label="دریافت به‌روزرسانی‌های محصول"
+              />
+            </span>
+            <div className="space-y-1">
+              <p
+                className={cn(
+                  "font-medium transition-colors",
+                  productUpdates
+                    ? "text-foreground"
+                    : "text-muted-foreground",
+                )}
+              >
+                به‌روزرسانی‌های محصول را برایم بفرستید
+              </p>
+              <p className="text-muted-foreground">
+                از ویژگی‌ها و بهبودهای جدید مطلع بمانید.
+              </p>
+            </div>
+          </div>
+
+          <Button type="submit" onClick={onSubmit} className="mt-4 w-full">
+            ادامه
+          </Button>
+        </form>
+      </OnboardingStepLeftWrapper>
+      <OnboardingStepRightWrapper className="sm:pb-10 md:pb-20">
+        <DashboardIllustration />
+      </OnboardingStepRightWrapper>
+    </OnboardingStep>
+  );
+};
+
+const StepTwoComponent = ({
+  currentStep,
+  totalSteps,
+  onSubmit,
+  goBack,
+}: StepComponentProps) => {
+  const [profilePicture, setProfilePicture] = useState<string | null>(null);
+  const [formValue, setFormValue] = useState<Record<string, string>>({});
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setProfilePicture(URL.createObjectURL(e.target.files[0]));
+    }
+  };
+
+  const handleRemoveImage = () => {
+    setProfilePicture(null);
+  };
+
+  const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setFormValue({ ...formValue, [e.target.name]: e.target.value });
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormValue({ ...formValue, [e.target.name]: e.target.value });
+  };
+
+  const TEXT_FIELDS = [
+    {
+      label: "نام سازمان",
+      placeholder: "آکمه",
+      name: "companyName",
+      type: "text",
+      onChange: handleInputChange,
+    },
+    {
+      label: "آدرس فضای کار",
+      placeholder: "akme-workspace",
+      name: "workspaceHandle",
+      type: "text",
+      onChange: handleInputChange,
+    },
+    {
+      label: "کشور",
+      placeholder: "کشور خود را انتخاب کنید",
+      name: "billingCountry",
+      input: "select",
+      options: [
+        { label: "ایران", value: "ir" },
+        { label: "آمریکا", value: "us" },
+        { label: "کانادا", value: "ca" },
+        { label: "بریتانیا", value: "uk" },
+        { label: "استرالیا", value: "au" },
+      ],
+    },
+    {
+      label: "چطور با ما آشنا شدید؟",
+      placeholder: "موتور جستجو، معرفی دوست، شبکه اجتماعی...",
+      name: "referralSource",
+      type: "text",
+      input: "textarea",
+      onChange: handleTextAreaChange,
+    },
+  ];
+
+  return (
+    <OnboardingStep>
+      <OnboardingStepLeftWrapper
+        title="تنظیم فضای کار"
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        goBack={goBack}
+      >
+        <form
+          onSubmit={(e) => e.preventDefault()}
+          className="space-y-6 py-4 text-start"
+        >
+          <FileInput
+            label="لوگوی فضای کار"
+            name="workspaceLogo"
+            onChange={handleFileUpload}
+            onRemove={handleRemoveImage}
+            value={profilePicture}
+            description="فایل‌های تصویر و jpeg تا ۱۰ مگابایت"
+          />
+
+          <div className="space-y-6 pt-4">
+            {TEXT_FIELDS.map((field, i) => {
+              return (
+                <FormField
+                  key={`text-field-${i}-${field.name}`}
+                  label={field.label}
+                  placeholder={field.placeholder}
+                  name={field.name}
+                  type={field.type}
+                  input={field.input}
+                  onChange={field.onChange}
+                />
+              );
+            })}
+          </div>
+
+          <Button type="submit" onClick={onSubmit} className="mt-4 w-full">
+            ادامه
+          </Button>
+        </form>
+      </OnboardingStepLeftWrapper>
+      <OnboardingStepRightWrapper className="bg-gradient-to-b from-background to-muted">
+        <DashboardIllustration
+          variant="zoomed-in"
+          image={profilePicture}
+          title={formValue?.companyName}
+        />
+      </OnboardingStepRightWrapper>
+    </OnboardingStep>
+  );
+};
+
+const StepThreeComponent = ({
+  currentStep,
+  totalSteps,
+  onSubmit,
+  goBack,
+}: StepComponentProps) => {
+  const [mode, setMode] = useState<string>("pro");
+
+  const modes = [
+    {
+      title: "همگام‌سازی کامل",
+      value: "pro",
+      description:
+        "همه مخاطبین، رویدادها و پیام‌ها همگام می‌شوند. تصویر کامل ارتباطات شما.",
+      image:
+        "/block-media/shadcnblocks/block/block-1.svg",
+    },
+    {
+      title: "فقط مخاطبین",
+      value: "lite",
+      description:
+        "فقط اطلاعات تماس همگام می‌شود. مناسب کاربران حساس به حریم خصوصی.",
+      image:
+        "/block-media/shadcnblocks/block/block-2.svg",
+    },
+  ];
+
+  const features = [
+    "وارد کردن خودکار مخاطبین موجود",
+    "همگام‌سازی رویدادهای تقویم بین دستگاه‌ها",
+    "یادآورهای هوشمند بر اساس برنامه شما",
+  ];
+
+  return (
+    <OnboardingStep>
+      <OnboardingStepLeftWrapper
+        title="اتصال حساب‌ها"
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        goBack={goBack}
+      >
+        <div className="space-y-8 text-start">
+          <div className="space-y-3 text-sm">
+            <p>
+              با اتصال حساب‌ها پتانسیل کامل فضای کار را آزاد کنید. منظم
+              بمانید و هیچ موقعیت مهمی را از دست ندهید.
+            </p>
+            <ul className="space-y-1">
+              {features.map((feature, i) => {
+                return (
+                  <li key={`feature-${i}`} className="flex items-center gap-2">
+                    <Check className="size-4" />
+                    <p>{feature}</p>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+
+          <div className="space-y-3">
+            {modes.map((m, i) => {
+              const isActive = m.value === mode;
+              return (
+                <div
+                  role="button"
+                  key={`mode-${i}`}
+                  tabIndex={0}
+                  onClick={() => setMode(m.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      setMode(m.value);
+                    }
+                  }}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-4 text-start text-xs transition-colors",
+                    isActive
+                      ? "border-primary bg-primary/5"
+                      : "hover:bg-muted/50",
+                  )}
+                >
+                  <img
+                    src={m.image}
+                    alt={m.title}
+                    className="size-10 shrink-0 dark:invert"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={cn(
+                        "font-medium transition-colors",
+                        isActive
+                          ? "text-foreground"
+                          : "text-muted-foreground",
+                      )}
+                    >
+                      {m.title}
+                    </p>
+                    <p className="text-muted-foreground">{m.description}</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="w-full space-y-3">
+            <Button className="w-full gap-2" onClick={onSubmit}>
+              <img
+                src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                alt="گوگل"
+                className="size-4"
+              />
+              اتصال با گوگل
+            </Button>
+            <Button className="w-full gap-2" onClick={onSubmit}>
+              <img
+                src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
+                alt="فیسبوک"
+                className="size-4"
+              />
+              اتصال با فیسبوک
+            </Button>
+            <SkipOnboardingButton
+              onSubmit={onSubmit}
+              label="رد کردن این مرحله"
+              description="می‌توانید بعداً از تنظیمات حساب‌ها را متصل کنید."
+            />
+          </div>
+
+          <p className="text-center text-xs text-muted-foreground">
+            داده‌های شما امن هستند و هرگز با اشخاص ثالث به اشتراک گذاشته نمی‌شوند.
+          </p>
+        </div>
+      </OnboardingStepLeftWrapper>
+      <OnboardingStepRightWrapper className="sm:pb-10 md:pb-20">
+        <DashboardIllustration />
+      </OnboardingStepRightWrapper>
+    </OnboardingStep>
+  );
+};
+
+const StepFourComponent = ({
+  currentStep,
+  totalSteps,
+  onSubmit,
+  goBack,
+}: StepComponentProps) => {
+  const [usecase, setUsecase] = useState<string | null>(null);
+
+  const toggleUsecase = (i: string) => {
+    setUsecase((prev) => (prev === i ? null : i));
+  };
+
+  const descriptions = [
+    "می‌خواهیم تجربه را مطابق شیوه کار شما شخصی‌سازی کنیم.",
+    "کاربرد اصلی خود را انتخاب کنید تا قالب‌ها، نماها و میانبرها را برای شما بهینه کنیم.",
+  ];
+
+  const usecases = [
+    "فروش",
+    "استخدام",
+    "بازاریابی",
+    "موفقیت مشتری",
+    "پشتیبانی",
+    "مهندسی",
+    "محصول",
+    "طراحی",
+    "منابع انسانی",
+    "حقوقی",
+    "مالی",
+    "عملیات",
+    "سایر",
+  ];
+
+  return (
+    <OnboardingStep>
+      <OnboardingStepLeftWrapper
+        title="نقش خود را بگویید"
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        goBack={goBack}
+      >
+        <div className="flex h-full flex-col justify-between text-start">
+          <div className="space-y-6">
+            <div className="space-y-2">
+              {descriptions.map((description, i) => {
+                return (
+                  <p key={`description-${i}`} className="text-sm">
+                    {description}
+                  </p>
+                );
+              })}
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-sm">کدام مورد بیشترین شباهت را به نقش شما دارد؟</p>
+              <div className="flex flex-wrap items-center gap-2">
+                {usecases.map((u, i) => {
+                  const isActive = usecase === u;
+                  return (
+                    <div
+                      key={`usecase-${i}`}
+                      role="button"
+                      tabIndex={0}
+                      className={cn(
+                        "cursor-pointer rounded-lg border px-2 py-1 text-xs transition-colors",
+                        isActive
+                          ? "border-primary bg-primary/5 font-medium text-foreground"
+                          : "text-muted-foreground hover:bg-muted/50",
+                      )}
+                      onClick={() => toggleUsecase(u)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          toggleUsecase(u);
+                        }
+                      }}
+                    >
+                      {u}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {usecase === "سایر" && (
+              <div className="space-y-2">
+                <Label>نقش خود را مشخص کنید</Label>
+                <Input
+                  type="text"
+                  placeholder="مثلاً پژوهش، اداری..."
+                />
+              </div>
+            )}
+          </div>
+
+          <Button onClick={onSubmit} className="w-full">
+            ادامه
+          </Button>
+        </div>
+      </OnboardingStepLeftWrapper>
+      <OnboardingStepRightWrapper className="sm:pb-10 md:pb-20">
+        <DashboardIllustration />
+      </OnboardingStepRightWrapper>
+    </OnboardingStep>
+  );
+};
+
+const StepFiveComponent = ({
+  currentStep,
+  totalSteps,
+  onSubmit,
+  goBack,
+}: StepComponentProps) => {
+  const descriptions = [
+    "وقتی تیم‌ها با هم کار می‌کنند، اتفاقات بزرگی رخ می‌دهد.",
+    "همکاران را به فضای کار دعوت کنید. پروژه‌ها را به اشتراک بگذارید، هم‌زمان همکاری کنید و همه را هم‌سو نگه دارید.",
+  ];
+
+  return (
+    <OnboardingStep>
+      <OnboardingStepLeftWrapper
+        title="دعوت تیم"
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        goBack={goBack}
+      >
+        <div className="flex h-full flex-col justify-between text-start">
+          <div className="space-y-8">
+            <div className="space-y-2">
+              {descriptions.map((description, i) => {
+                return (
+                  <p key={`description-${i}`} className="text-sm">
+                    {description}
+                  </p>
+                );
+              })}
+            </div>
+
+            <form onSubmit={(e) => e.preventDefault()} className="space-y-8">
+              <div className="space-y-4">
+                <Label>آدرس ایمیل را وارد کنید</Label>
+                <div className="space-y-2">
+                  {Array.from({ length: 2 }).map((_, i) => (
+                    <div
+                      key={`input-${i}`}
+                      className="flex flex-col gap-2 sm:flex-row sm:items-center"
+                    >
+                      <Input
+                        type="email"
+                        dir="rtl"
+                        placeholder="ali.rezaei@example.ir"
+                        className="flex-1 text-end"
+                      />
+                      <Select defaultValue="viewer">
+                        <SelectTrigger className="w-full sm:w-36">
+                          <SelectValue placeholder="انتخاب نقش" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="admin">مدیر</SelectItem>
+                          <SelectItem value="editor">ویرایشگر</SelectItem>
+                          <SelectItem value="viewer">بیننده</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Button type="submit" className="w-full">
+                  ارسال دعوت‌نامه
+                </Button>
+                <SkipOnboardingButton
+                  onSubmit={onSubmit}
+                  label="فعلاً رد شوید"
+                  description="هر زمان می‌توانید از تنظیمات فضای کار اعضا را دعوت کنید."
+                />
+              </div>
+            </form>
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            با ادامه، با شرایط استفاده و حریم خصوصی ما موافقت می‌کنید. اعضای
+            دعوت‌شده ایمیلی با دستورالعمل پیوستن به فضای کار دریافت می‌کنند.
+          </p>
+        </div>
+      </OnboardingStepLeftWrapper>
+      <OnboardingStepRightWrapper className="sm:pb-10 md:pb-20">
+        <DashboardIllustration
+          transformOrigin="-20% -10%"
+          variant="zoomed-in"
+          className="translate-x-1/4 xl:translate-x-1/5 2xl:translate-x-0"
+        />
+      </OnboardingStepRightWrapper>
+    </OnboardingStep>
+  );
+};
+
+interface Onboarding1Props {
+  className?: string;
+  companyLogo?: string;
+  copyright?: string;
+  footerLinks?: Hyperlink[];
+  steps?: OnboardingStep[];
+}
+
+const Onboarding1 = ({
+  className,
+  companyLogo = "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg",
+  copyright = `© ${new Date().getFullYear().toLocaleString("fa-IR")} شاد‌سی‌ان بلاکس`,
+  footerLinks = [
+    { label: "حریم خصوصی", href: "https://ShadcnBlocks" },
+    {
+      label: "پشتیبانی",
+      href: "https://ShadcnBlocks",
+    },
+    {
+      label: "خروج",
+      href: "https://ShadcnBlocks",
+    },
+  ],
+  steps = [
+    {
+      component: StepOneComponent,
+    },
+    {
+      component: StepTwoComponent,
+    },
+    {
+      component: StepThreeComponent,
+    },
+    {
+      component: StepFourComponent,
+    },
+    {
+      component: StepFiveComponent,
+    },
+  ],
+}: Onboarding1Props) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const step = steps[currentStep];
+
+  const handleSubmit = () => {
+    if (currentStep !== steps.length - 1) setCurrentStep(currentStep + 1);
+  };
+
+  const handleGoBack = () => {
+    if (currentStep > 0) setCurrentStep(currentStep - 1);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className="py-20">
+      <div
+        className={cn(
+          "container flex flex-col items-center gap-20 text-start",
+          className,
+        )}
+      >
+        <img
+          src={companyLogo}
+          alt="لوگوی شرکت"
+          className="w-54 dark:invert"
+        />
+
+        <step.component
+          onSubmit={handleSubmit}
+          currentStep={currentStep}
+          totalSteps={steps.length}
+          goBack={handleGoBack}
+        />
+
+        <div className="flex flex-wrap items-center justify-center gap-4 text-xs text-muted-foreground">
+          <p>{copyright}</p>
+          {footerLinks.map((link) => (
+            <a key={link.label} href={link.href} className="underline">
+              {link.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Onboarding1 };
diff --git a/blocks/onboarding2.tsx b/blocks/onboarding2.tsx
new file mode 100644
index 0000000..8ddb05f
--- /dev/null
+++ b/blocks/onboarding2.tsx
@@ -0,0 +1,651 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  ChevronLeftIcon,
+  Chrome,
+  LayoutGrid,
+  Leaf,
+  Lock,
+  Puzzle,
+  Shield,
+  Sparkles,
+  Star,
+  User,
+  Workflow,
+} from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface IconListItem {
+  icon: LucideIcon;
+  title: string;
+}
+
+interface StepDef {
+  title: string;
+  description: string | IconListItem[];
+  className?: string;
+  isBlocking?: boolean;
+  component: React.ComponentType<StepComponentProps>;
+  secondaryCta?: React.ComponentType;
+  cta?: React.ComponentType<StepCtaProps>;
+}
+
+const Background = () => {
+  return (
+    <div className="flex h-[100dvh] w-full items-start">
+      <div className="h-full w-64 shrink-0 border-r">
+        <div className="flex h-14 w-full items-center border-b p-4">
+          <img
+            src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.png"
+            className="w-40 dark:invert"
+            alt="logo"
+          />
+        </div>
+        <ul className="space-y-2 p-4">
+          {Array.from({ length: 5 }).map((_, index) => {
+            return (
+              <li
+                key={`dummy-link-${index}`}
+                className="block h-8 w-50 rounded-md bg-muted"
+              />
+            );
+          })}
+        </ul>
+      </div>
+      <div className="flex h-14 w-full items-center border-b p-4">
+        <span className="block h-8 w-full max-w-50 rounded-md bg-muted" />
+      </div>
+    </div>
+  );
+};
+
+interface StepIndicatorProps {
+  totalSteps: number;
+  currentStep: number;
+}
+
+const StepIndicator = ({ totalSteps, currentStep }: StepIndicatorProps) => {
+  return (
+    <div className="flex items-center justify-center gap-2">
+      {Array.from({ length: totalSteps }).map((_, i) => {
+        return (
+          <span
+            key={`step-indicator-${i}`}
+            className={cn(
+              "block size-2 rounded-full transition-colors",
+              currentStep >= i ? "bg-primary" : "border bg-muted",
+            )}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+interface FadeContainerProps {
+  children: React.ReactNode;
+  condition: boolean;
+  className?: string;
+}
+
+const FadeContainer = ({
+  children,
+  condition,
+  className,
+}: FadeContainerProps) => {
+  const fadeVariants = {
+    initial: {
+      opacity: 0,
+      filter: "blur(4px)",
+    },
+    animate: {
+      opacity: 1,
+      filter: "blur(0px)",
+    },
+    exit: {
+      opacity: 0,
+      filter: "blur(4px)",
+    },
+  };
+
+  return (
+    <AnimatePresence mode="popLayout">
+      {condition && (
+        <motion.div
+          variants={fadeVariants}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          className={className}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+interface StepDescriptionCardProps {
+  title: string;
+  description: string | IconListItem[];
+}
+
+const StepDescriptionCard = ({
+  title,
+  description,
+}: StepDescriptionCardProps) => {
+  return (
+    <div className="space-y-2 md:space-y-4">
+      <h3 className="text-xl font-semibold md:text-xl">{title}</h3>
+      <div className="text-sm leading-tight text-muted-foreground md:text-base">
+        {typeof description === "string" ? (
+          <p>{description}</p>
+        ) : (
+          <ul className="space-y-4">
+            {description?.map((item, i) => {
+              return (
+                <li key={`step-${i}`} className="flex items-center gap-2">
+                  <item.icon className="size-4 shrink-0" />
+                  <p>{item.title}</p>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface StepComponentProps {
+  stepIndex: number;
+  onValidationChange: (stepIndex: number, isValid: boolean) => void;
+}
+
+interface StepCtaProps {
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const StepOneComponent = () => {
+  return (
+    <form
+      onSubmit={(e) => e.preventDefault()}
+      className="grid grid-cols-2 gap-2 md:gap-4"
+    >
+      <div className="space-y-2">
+        <Label>نام</Label>
+        <Input type="text" placeholder="نام" className="bg-background" />
+      </div>
+      <div className="space-y-2">
+        <Label>نام خانوادگی</Label>
+        <Input type="text" placeholder="نام خانوادگی" className="bg-background" />
+      </div>
+      <div className="col-span-2 space-y-2">
+        <Label>کجا کار میکنید؟</Label>
+        <Input type="text" placeholder="رویش مارکت" className="bg-background" />
+      </div>
+      <div className="col-span-2 space-y-2">
+        <Label>در چه حوزه ای فعالیت میکنید؟</Label>
+        <Select>
+          <SelectTrigger className="w-full bg-background">
+            <SelectValue placeholder="حوزه را انتخاب کنید" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="technology">تکنولوژی</SelectItem>
+            <SelectItem value="finance">مالی</SelectItem>
+            <SelectItem value="healthcare">بهداشت و درمان</SelectItem>
+            <SelectItem value="retail">خرده فروشی</SelectItem>
+            <SelectItem value="other">سایر</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="col-span-2 space-y-2">
+        <Label>چند نفر در تیم شما هستن؟</Label>
+        <Select>
+          <SelectTrigger className="w-full bg-background">
+            <SelectValue placeholder="سایز تیم شما" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="solo">فقط خودم</SelectItem>
+            <SelectItem value="small">2-10 نفر</SelectItem>
+            <SelectItem value="medium">11-50 نفر</SelectItem>
+            <SelectItem value="large">51-200 نفر</SelectItem>
+            <SelectItem value="enterprise">200+ نفر</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="col-span-2 space-y-2">
+        <Label>چه چیزی نقش شما رو به بهترین نحو توصیف میکند؟</Label>
+        <Select>
+          <SelectTrigger className="w-full bg-background">
+            <SelectValue placeholder="نقش را انتخاب کنید" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="founder">موسس</SelectItem>
+            <SelectItem value="sales">فروش</SelectItem>
+            <SelectItem value="marketing">بازاریابی</SelectItem>
+            <SelectItem value="operations">عملیات</SelectItem>
+            <SelectItem value="other">سایر</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </form>
+  );
+};
+
+const StepTwoComponent = () => {
+  const goalOptions = [
+    { value: "close-deals", label: "بستن معاملات بیشتر" },
+    { value: "grow-network", label: "شبکه ام را رشد بده" },
+    { value: "track-pipeline", label: "خط لوله من را دنبال کنید" },
+    { value: "automate-outreach", label: "دسترسی خودکار" },
+    { value: "team-collaboration", label: "همکاری با تیم" },
+    { value: "find-prospects", label: "چشم انداز جدید پیدا کنید" },
+    { value: "retain-customers", label: "حفظ مشتریان" },
+    { value: "analyze-performance", label: "تجزیه و تحلیل عملکرد" },
+    { value: "streamline-workflow", label: "گردش کار را ساده کنید" },
+    { value: "other", label: "یک چیز دیگر" },
+  ];
+
+  const [selectedGoals, setSelectedGoals] = useState<string[]>([]);
+
+  const toggleGoal = (goalValue: string, checked: boolean) => {
+    setSelectedGoals((prev) =>
+      checked
+        ? [...prev, goalValue]
+        : prev.filter((value) => value !== goalValue),
+    );
+  };
+
+  return (
+    <form
+      onSubmit={(e) => e.preventDefault()}
+      className="grid grid-cols-2 gap-6 pb-2 lg:gap-8"
+    >
+      {goalOptions.map((goal) => {
+        const isSelected = selectedGoals.includes(goal.value);
+        return (
+          <Label htmlFor={goal.value} key={goal.value}>
+            <div
+              role="button"
+              className={cn(
+                "flex w-full cursor-pointer items-center gap-2 rounded-full md:px-6 md:py-4",
+                selectedGoals.includes(goal.value)
+                  ? "md:bg-muted"
+                  : "md:bg-muted/50",
+              )}
+            >
+              <Checkbox
+                id={goal.value}
+                checked={isSelected}
+                onCheckedChange={(checked) =>
+                  toggleGoal(goal.value, checked === true)
+                }
+                className="bg-background"
+              />
+              {goal.label}
+            </div>
+          </Label>
+        );
+      })}
+    </form>
+  );
+};
+
+const StepThreeComponent = ({
+  stepIndex,
+  onValidationChange,
+}: StepComponentProps) => {
+  const [isConnected, setIsConnected] = useState<string | boolean>(false);
+
+  const handleConnectButtonClick = (provider: string) => {
+    setIsConnected(provider);
+    onValidationChange(stepIndex, true);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 md:min-h-[40.5dvh]">
+      <Button
+        variant="outline"
+        onClick={() => handleConnectButtonClick("gmail")}
+        disabled={!!isConnected}
+      >
+        <img
+          src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+          className="size-4"
+          alt="Google"
+        />
+        {isConnected === "gmail" ? "Connected" : "ادامه با گوگل"}
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() => handleConnectButtonClick("facebook")}
+        disabled={!!isConnected}
+      >
+        <img
+          src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
+          className="size-4"
+          alt="Facebook"
+        />
+        {isConnected === "facebook" ? "Connected" : "Continue with Facebook"}
+      </Button>
+      <Button
+        variant="link"
+        onClick={() => handleConnectButtonClick("manual")}
+        disabled={!!isConnected}
+      >
+        {isConnected === "manual" ? "Skipped" : "فعلاً رد شوید"}
+      </Button>
+    </div>
+  );
+};
+
+const StepFourComponent = () => {
+  return (
+    <div className="flex h-full flex-col items-center justify-between md:min-h-[40.5dvh]">
+      <img
+        src="/block-media/shadcnblocks/block/dashboard-placeholder.png"
+        className="w-full"
+        style={{
+          maskImage: "linear-gradient(to bottom, black 0%, transparent 100%)",
+        }}
+        alt="Dashboard placeholder"
+      />
+      <div className="flex w-full items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Leaf className="size-4 fill-primary stroke-green-200" />
+          <p>50k+ active users</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <p>امتیاز ۴٫۹ از ۵</p>
+          <div className="flex items-center gap-1">
+            {Array.from({ length: 5 }).map((_, i) => {
+              return <Star key={i} className="size-4 fill-primary" />;
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const StepFourSecondaryCta = () => {
+  return (
+    <Button className="w-full" size="lg">
+      Get the Extension
+    </Button>
+  );
+};
+
+const StepFourCta = ({ onClick, disabled }: StepCtaProps) => {
+  return (
+    <Button
+      className="w-full"
+      size="lg"
+      variant="ghost"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      شاید بعداً
+    </Button>
+  );
+};
+
+const StepFiveComponent = () => {
+  const premiumFeatures = [
+    {
+      icon: LayoutGrid,
+      title: "Custom Views",
+      description: "Organize your data exactly how you want it",
+    },
+    {
+      icon: Workflow,
+      title: "Automation",
+      description: "Set up triggers and actions to save time",
+    },
+    {
+      icon: Chrome,
+      title: "Web Clipper",
+      description: "Save contacts from any website instantly",
+    },
+    {
+      icon: Sparkles,
+      title: "AI Insights",
+      description: "Get smart suggestions and auto-complete data",
+    },
+    {
+      icon: Puzzle,
+      title: "App Connections",
+      description: "Sync with 2000+ tools you already use",
+    },
+    {
+      icon: Star,
+      title: "پشتیبانی اولویت‌دار",
+      description: "Dedicated help and راه‌اندازی اولیه assistance",
+    },
+  ];
+
+  return (
+    <ul className="space-y-4 md:space-y-6">
+      {premiumFeatures.map((feature) => (
+        <li key={feature.title} className="flex items-start gap-2">
+          <feature.icon className="mt-0.5 size-5 shrink-0" />
+          <div className="space-y-0.5">
+            <p className="text-sm leading-tight font-medium md:text-base">
+              {feature.title}
+            </p>
+            <p className="text-xs text-muted-foreground md:text-sm">
+              {feature.description}
+            </p>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const StepFiveCta = ({ onClick, disabled }: StepCtaProps) => {
+  return (
+    <Button className="w-full" size="lg" onClick={onClick} disabled={disabled}>
+      Activate Trial
+    </Button>
+  );
+};
+
+interface Onboarding2Props {
+  steps: StepDef[];
+  className?: string;
+}
+
+const Onboarding2 = ({
+  steps = [
+    {
+      title: " درمورد خودتون به ما بگویید",
+      description: "چند سوال سریع در مورد تجربه ی شخصیتون",
+      className: "bg-orange-200",
+      component: StepOneComponent,
+    },
+    {
+      title: "چی میخوای به دست بیاری؟",
+      description:
+        "انتخاب همه که اعمال می‌شوند. این به ما کمک می‌کند داشبورد و پیشنهادهای شما را متناسب‌ سازی کنیم",
+      className: "bg-blue-200",
+      component: StepTwoComponent,
+    },
+    {
+      title: "لینک اکانت شما",
+      description: [
+        {
+          icon: User,
+          title:
+            "مخاطبین و جلسات و گفتگوهای خود رو به‌ صورت خودکار همگام‌سازی کنید",
+        },
+        {
+          icon: Shield,
+          title: "دیتا شما ایمن و خصوصی میماند",
+        },
+        {
+          icon: Lock,
+          title: "رمزنگاری با استاندارد سازمانی",
+        },
+      ],
+      className: "bg-pink-200",
+      isBlocking: true,
+      component: StepThreeComponent,
+    },
+    {
+      title: "به وب‌گردی خود سرعت و قدرت ببخشید",
+      description:
+        "افزونه ما به شما این امکان را می‌دهد که با یک کلیک، از هر وب‌سایتی که هستید مخاطبین را ذخیره کنید و یادداشت بردارید",
+      className: "bg-green-200",
+      component: StepFourComponent,
+      secondaryCta: StepFourSecondaryCta,
+      cta: StepFourCta,
+    },
+    {
+      title: "تجربه کامل رو باز کنید ( دسترسی به تمام امکانات )",
+      description:
+        "دوره آزمایشی ۱۴ روزه خود را آغاز کرده و تمامی ویژگی‌ها را تجربه کنید نیاز به کارت اعتباری نیست.",
+      className: "bg-purple-200",
+      component: StepFiveComponent,
+      cta: StepFiveCta,
+    },
+  ],
+  className,
+}: Onboarding2Props) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [stepValidation, setStepValidation] = useState<Record<number, boolean>>(
+    {},
+  );
+
+  const handleStepValidChange = (stepIndex: number, isValid: boolean) => {
+    setStepValidation((prev) => ({ ...prev, [stepIndex]: isValid }));
+  };
+
+  const canProceed = () => {
+    const step = steps[currentStep];
+
+    if (!step.component || !step.isBlocking) return true;
+
+    return stepValidation[currentStep] === true;
+  };
+
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const step = steps[currentStep];
+
+  return (
+    <section>
+      <Background />
+
+      <Dialog open={true}>
+        <DialogContent
+          showCloseButton={false}
+          className={cn(
+            "flex items-center justify-center overflow-hidden rounded-none p-0 md:max-w-3xl md:items-stretch lg:max-w-5xl",
+            className,
+          )}
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>راه‌اندازی اولیه</DialogTitle>
+            <DialogDescription>راهنمای شروع کار</DialogDescription>
+          </DialogHeader>
+
+          <div className="flex min-h-[40dvh] w-full flex-col-reverse items-start tracking-tighter md:flex-row">
+            <div className="flex h-full w-full flex-col justify-between gap-4 p-6 pb-6 md:flex-[45%] md:gap-6 lg:p-12">
+              <div className="space-y-2">
+                <FadeContainer condition={currentStep > 0}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handlePrevious}
+                    disabled={currentStep === 0}
+                  >
+                    <ChevronLeftIcon />
+                    بازگشت
+                  </Button>
+                </FadeContainer>
+                <StepDescriptionCard
+                  title={step.title}
+                  description={step.description}
+                />
+              </div>
+
+              <div className="space-y-4 md:space-y-6">
+                <FadeContainer condition={canProceed()} className="space-y-2">
+                  {step.cta ? (
+                    <step.cta onClick={handleNext} disabled={!canProceed()} />
+                  ) : (
+                    <Button
+                      size="lg"
+                      className="w-full"
+                      onClick={handleNext}
+                      disabled={
+                        currentStep === steps.length - 1 || !canProceed()
+                      }
+                    >
+                      ادامه
+                    </Button>
+                  )}
+                  {step.secondaryCta && <step.secondaryCta />}
+                </FadeContainer>
+
+                <StepIndicator
+                  totalSteps={steps.length}
+                  currentStep={currentStep}
+                />
+              </div>
+            </div>
+
+            <div
+              className={cn(
+                "flex h-full w-full flex-[55%] shrink-0 items-center justify-center p-6 transition-colors lg:p-12",
+                step.className || "bg-foreground/30",
+              )}
+            >
+              <step.component
+                stepIndex={currentStep}
+                onValidationChange={handleStepValidChange}
+              />
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </section>
+  );
+};
+
+export { Onboarding2 };
diff --git a/blocks/order-history1.tsx b/blocks/order-history1.tsx
new file mode 100644
index 0000000..5c442b8
--- /dev/null
+++ b/blocks/order-history1.tsx
@@ -0,0 +1,360 @@
+"use client";
+
+import {
+  ChevronRight,
+  Package,
+  RefreshCcw,
+  Search,
+  ShoppingBag,
+  Truck,
+} from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+type OrderStatus =
+  | "processing"
+  | "shipped"
+  | "delivered"
+  | "cancelled"
+  | "returned";
+
+interface OrderHistoryItem {
+  id: string;
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  status: OrderStatus;
+  total: number;
+  itemCount: number;
+  thumbnails: string[];
+  trackingNumber?: string;
+}
+
+const DEFAULT_ORDERS: OrderHistoryItem[] = [
+  {
+    id: "1",
+    orderNumber: "ORD-2024-78432",
+    orderDate: "2024-12-14",
+    status: "processing",
+    total: 289000.0,
+    itemCount: 2,
+    thumbnails: [
+      "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+      "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+    ],
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-2024-78401",
+    orderDate: "2024-12-10",
+    status: "shipped",
+    total: 549990.0,
+    itemCount: 3,
+    thumbnails: [
+      "/block-media/shadcnblocks/block/ecommerce/electronics/smart-watch-1.png",
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Sleek-Modern-Laptop-1.png",
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Sleek-Smartphone-Close-Up-1.png",
+    ],
+    trackingNumber: "1Z999AA10123456784",
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-2024-78355",
+    orderDate: "2024-11-28",
+    status: "delivered",
+    total: 1249000.0,
+    itemCount: 2,
+    thumbnails: [
+      "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Leather-Sofa-1.png",
+      "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-1.png",
+    ],
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-2024-78290",
+    orderDate: "2024-11-15",
+    status: "cancelled",
+    total: 185000.0,
+    itemCount: 3,
+    thumbnails: [
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Round-Sunglasses-1.png",
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Sunflower-Pendant-Necklace-1.png",
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Pink-Eyeglasses-1.png",
+    ],
+  },
+];
+
+const formatCurrency = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatItemCount = (count: number) =>
+  `${count.toLocaleString("fa-IR")} قلم`;
+
+const statusConfig: Record<
+  OrderStatus,
+  { label: string; className: string; icon: typeof Package }
+> = {
+  processing: {
+    label: "در حال پردازش",
+    className: "bg-amber-500/10 text-amber-600 hover:bg-amber-500/10",
+    icon: Package,
+  },
+  shipped: {
+    label: "ارسال‌شده",
+    className: "bg-blue-500/10 text-blue-600 hover:bg-blue-500/10",
+    icon: Truck,
+  },
+  delivered: {
+    label: "تحویل‌شده",
+    className: "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/10",
+    icon: Package,
+  },
+  cancelled: {
+    label: "لغوشده",
+    className: "bg-red-500/10 text-red-600 hover:bg-red-500/10",
+    icon: Package,
+  },
+  returned: {
+    label: "مرجوع‌شده",
+    className: "bg-slate-500/10 text-slate-600 hover:bg-slate-500/10",
+    icon: RefreshCcw,
+  },
+};
+
+const tabLabels: Record<string, string> = {
+  all: "همه",
+  active: "فعال",
+  delivered: "تحویل‌شده",
+  cancelled: "لغوشده",
+};
+
+interface OrderHistory1Props {
+  orders?: OrderHistoryItem[];
+  className?: string;
+}
+
+const OrderHistory1 = ({
+  orders = DEFAULT_ORDERS,
+  className,
+}: OrderHistory1Props) => {
+  const [activeTab, setActiveTab] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredOrders = orders.filter((order) => {
+    const matchesTab =
+      activeTab === "all" ||
+      (activeTab === "active" &&
+        (order.status === "processing" || order.status === "shipped")) ||
+      order.status === activeTab;
+
+    const matchesSearch =
+      searchQuery === "" ||
+      order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase());
+
+    return matchesTab && matchesSearch;
+  });
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-4xl">
+        <div className="mb-8">
+          <h1 className="text-xl font-bold tracking-tight md:text-3xl">
+            تاریخچه سفارش‌ها
+          </h1>
+          <p className="mt-1 text-muted-foreground">
+            مشاهده و مدیریت سفارش‌های گذشته خود
+          </p>
+        </div>
+
+        <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList>
+              <TabsTrigger value="all">{tabLabels.all}</TabsTrigger>
+              <TabsTrigger value="active">{tabLabels.active}</TabsTrigger>
+              <TabsTrigger value="delivered">
+                {tabLabels.delivered}
+              </TabsTrigger>
+              <TabsTrigger value="cancelled">
+                {tabLabels.cancelled}
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          <div className="relative">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <Input
+              placeholder="جستجو بر اساس شماره سفارش…"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              name="order-history-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی سفارش‌ها"
+              className="ps-9 sm:w-64"
+            />
+          </div>
+        </div>
+
+        {filteredOrders.length > 0 ? (
+          <div className="space-y-4">
+            {filteredOrders.map((order) => {
+              const status = statusConfig[order.status];
+
+              return (
+                <Card
+                  key={order.id}
+                  className="shadow-none transition-shadow hover:shadow-md"
+                >
+                  <CardContent className="p-4 md:p-6">
+                    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                      <div className="flex gap-4">
+                        <div className="relative flex shrink-0">
+                          {order.thumbnails.slice(0, 3).map((thumb, index) => (
+                            <div
+                              key={index}
+                              className={cn(
+                                "relative size-14 overflow-hidden rounded-lg border-2 border-background bg-muted",
+                                index > 0 && "-ms-4",
+                              )}
+                              style={{ zIndex: 3 - index }}
+                            >
+                              <AspectRatio ratio={1}>
+                                <img
+                                  src={thumb}
+                                  alt=""
+                                  className="size-full object-cover"
+                                />
+                              </AspectRatio>
+                            </div>
+                          ))}
+                          {order.itemCount > 3 && (
+                            <div
+                              className="relative -ms-4 flex size-14 items-center justify-center rounded-lg border-2 border-background bg-muted text-sm font-medium text-muted-foreground"
+                              style={{ zIndex: 0 }}
+                            >
+                              +
+                              {(order.itemCount - 3).toLocaleString("fa-IR")}
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="min-w-0 flex-1">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <p className="font-semibold" dir="rtl">
+                              {order.orderNumber}
+                            </p>
+                            <Badge className={status.className}>
+                              {status.label}
+                            </Badge>
+                          </div>
+                          <p className="mt-1 text-sm text-muted-foreground">
+                            {formatOrderDate(order.orderDate)} ·{" "}
+                            {formatItemCount(order.itemCount)}
+                          </p>
+                          {order.trackingNumber && (
+                            <p className="mt-1 text-xs text-muted-foreground">
+                              رهگیری:{" "}
+                              <span dir="rtl" className="tabular-nums">
+                                {order.trackingNumber}
+                              </span>
+                            </p>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="flex items-center justify-between gap-4 sm:flex-col sm:items-end sm:justify-center">
+                        <p className="text-lg font-bold tabular-nums">
+                          {formatCurrency(order.total)}
+                        </p>
+                        <div className="flex gap-2">
+                          {order.status === "shipped" && (
+                            <Button variant="outline" size="sm">
+                              <Truck
+                                className="me-1.5 size-4"
+                                aria-hidden="true"
+                              />
+                              پیگیری مرسوله
+                            </Button>
+                          )}
+                          {order.status === "delivered" && (
+                            <Button variant="outline" size="sm">
+                              <RefreshCcw
+                                className="me-1.5 size-4"
+                                aria-hidden="true"
+                              />
+                              سفارش مجدد
+                            </Button>
+                          )}
+                          <Button variant="ghost" size="sm">
+                            مشاهده
+                            <ChevronRight
+                              className="ms-1 size-4 rtl:rotate-180"
+                              aria-hidden="true"
+                            />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        ) : (
+          <Card className="shadow-none">
+            <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+              <div className="mb-4 flex size-16 items-center justify-center rounded-full bg-muted">
+                <ShoppingBag
+                  className="size-8 text-muted-foreground"
+                  aria-hidden="true"
+                />
+              </div>
+              <h2 className="mb-2 text-lg font-semibold">سفارشی یافت نشد</h2>
+              <p className="mb-6 max-w-sm text-sm text-muted-foreground">
+                {searchQuery
+                  ? `سفارشی با عبارت «${searchQuery}» یافت نشد.`
+                  : "هنوز سفارشی ثبت نکرده‌اید. با شروع خرید، تاریخچه سفارش‌ها اینجا نمایش داده می‌شود."}
+              </p>
+              <Button>
+                <ShoppingBag className="me-2 size-4" aria-hidden="true" />
+                شروع خرید
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+
+        {filteredOrders.length > 0 && (
+          <p className="mt-6 border-t pt-6 text-sm text-muted-foreground">
+            نمایش {filteredOrders.length.toLocaleString("fa-IR")} از{" "}
+            {orders.length.toLocaleString("fa-IR")} سفارش
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { OrderHistory1 };
diff --git a/blocks/order-history2.tsx b/blocks/order-history2.tsx
new file mode 100644
index 0000000..e4d93c2
--- /dev/null
+++ b/blocks/order-history2.tsx
@@ -0,0 +1,554 @@
+"use client";
+
+import {
+  Check,
+  ChevronDown,
+  Clock,
+  MapPin,
+  Package,
+  RotateCcw,
+  Search,
+  Truck,
+} from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type OrderStatus = "pending" | "shipped" | "delivered" | "cancelled";
+
+interface OrderItem {
+  name: string;
+  variant: string;
+  image: string;
+  price: number;
+  quantity: number;
+}
+
+interface ShippingAddress {
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zipCode: string;
+}
+
+interface OrderHistoryItem {
+  id: string;
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  status: OrderStatus;
+  total: number;
+  items: OrderItem[];
+  shippingAddress: ShippingAddress;
+  trackingNumber?: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  estimatedDelivery?: string;
+}
+
+const DEFAULT_ORDERS: OrderHistoryItem[] = [
+  {
+    id: "1",
+    orderNumber: "72831",
+    orderDate: "2025-02-15",
+    status: "pending",
+    total: 109080.0,
+    items: [
+      {
+        name: "چراغ آویز برنجی مدرن",
+        variant: "پوشش مات طلایی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-1.png",
+        price: 109080.0,
+        quantity: 1,
+      },
+    ],
+    shippingAddress: {
+      name: "علی محمدی",
+      street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
+      city: "تهران",
+      state: "تهران",
+      zipCode: "1415783114",
+    },
+  },
+  {
+    id: "2",
+    orderNumber: "71293",
+    orderDate: "2025-02-08",
+    status: "shipped",
+    total: 159080.0,
+    items: [
+      {
+        name: "صندلی ناهارخوری اسکاندیناوی",
+        variant: "بلوط طبیعی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Wooden-Cabinet-1.png",
+        price: 159080.0,
+        quantity: 1,
+      },
+    ],
+    shippingAddress: {
+      name: "علی محمدی",
+      street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
+      city: "تهران",
+      state: "تهران",
+      zipCode: "1415783114",
+    },
+    trackingNumber: "1Z999AA10123456784",
+    estimatedDelivery: "2025-02-12",
+  },
+  {
+    id: "3",
+    orderNumber: "69847",
+    orderDate: "2025-01-25",
+    status: "delivered",
+    total: 449000.0,
+    items: [
+      {
+        name: "کابینت ذخیره‌سازی مین‌سنتری",
+        variant: "چوب گردو",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Wooden-Sideboard-1.png",
+        price: 449000.0,
+        quantity: 1,
+      },
+    ],
+    shippingAddress: {
+      name: "علی محمدی",
+      street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
+      city: "تهران",
+      state: "تهران",
+      zipCode: "1415783114",
+    },
+    trackingNumber: "1Z999AA10123456799",
+  },
+  {
+    id: "4",
+    orderNumber: "68234",
+    orderDate: "2025-01-10",
+    status: "delivered",
+    total: 289000.0,
+    items: [
+      {
+        name: "چراغ ایستاده مینیمال",
+        variant: "نیکل برس‌خورده",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-2.png",
+        price: 189000.0,
+        quantity: 1,
+      },
+      {
+        name: "گلدان سرامیکی",
+        variant: "سفالی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Loveseat-1.png",
+        price: 100000.0,
+        quantity: 1,
+      },
+    ],
+    shippingAddress: {
+      name: "علی محمدی",
+      street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
+      city: "تهران",
+      state: "تهران",
+      zipCode: "1415783114",
+    },
+    trackingNumber: "1Z999AA10123456800",
+  },
+];
+
+const formatCurrency = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const statusConfig: Record<
+  OrderStatus,
+  { label: string; className: string; icon: typeof Clock }
+> = {
+  pending: {
+    label: "در انتظار",
+    className:
+      "bg-slate-100 text-slate-700 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300",
+    icon: Clock,
+  },
+  shipped: {
+    label: "در مسیر تحویل",
+    className:
+      "bg-orange-50 text-orange-600 hover:bg-orange-50 dark:bg-orange-950 dark:text-orange-400",
+    icon: Truck,
+  },
+  delivered: {
+    label: "تحویل‌شده",
+    className:
+      "bg-emerald-50 text-emerald-600 hover:bg-emerald-50 dark:bg-emerald-950 dark:text-emerald-400",
+    icon: Check,
+  },
+  cancelled: {
+    label: "لغوشده",
+    className:
+      "bg-red-50 text-red-600 hover:bg-red-50 dark:bg-red-950 dark:text-red-400",
+    icon: Package,
+  },
+};
+
+const statusFilterLabels: Record<string, string> = {
+  all: "همه سفارش‌ها",
+  pending: "در انتظار",
+  shipped: "در مسیر تحویل",
+  delivered: "تحویل‌شده",
+  cancelled: "لغوشده",
+};
+
+interface OrderHistory2Props {
+  orders?: OrderHistoryItem[];
+  className?: string;
+}
+
+const OrderHistory2 = ({
+  orders = DEFAULT_ORDERS,
+  className,
+}: OrderHistory2Props) => {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+
+  const filteredOrders = orders.filter((order) => {
+    const matchesStatus =
+      statusFilter === "all" || order.status === statusFilter;
+    const matchesSearch =
+      searchQuery === "" ||
+      order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      order.items.some((item) =>
+        item.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      );
+    return matchesStatus && matchesSearch;
+  });
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-5xl">
+        <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h1 className="text-xl font-bold tracking-tight md:text-3xl">
+              سفارش‌های من
+            </h1>
+            <p className="mt-1 text-muted-foreground">
+              مدیریت، پیگیری و مرور خریدهای خود
+            </p>
+          </div>
+
+          <div className="flex gap-3">
+            <div className="relative flex-1 sm:flex-initial">
+              <Search
+                className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+                aria-hidden="true"
+              />
+              <Input
+                placeholder="جستجو…"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                name="order-history-search"
+                inputMode="search"
+                autoComplete="off"
+                aria-label="جستجوی سفارش‌ها و محصولات"
+                className="ps-9 sm:w-48"
+              />
+            </div>
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="w-40" aria-label="فیلتر وضعیت سفارش">
+                <SelectValue placeholder={statusFilterLabels.all} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{statusFilterLabels.all}</SelectItem>
+                <SelectItem value="pending">
+                  {statusFilterLabels.pending}
+                </SelectItem>
+                <SelectItem value="shipped">
+                  {statusFilterLabels.shipped}
+                </SelectItem>
+                <SelectItem value="delivered">
+                  {statusFilterLabels.delivered}
+                </SelectItem>
+                <SelectItem value="cancelled">
+                  {statusFilterLabels.cancelled}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          {filteredOrders.map((order) => {
+            const status = statusConfig[order.status];
+            const StatusIcon = status.icon;
+            const isExpanded = expandedId === order.id;
+            const primaryItem = order.items[0];
+
+            return (
+              <Collapsible
+                key={order.id}
+                open={isExpanded}
+                onOpenChange={(open) => setExpandedId(open ? order.id : null)}
+              >
+                <Card className="shadow-none">
+                  <CollapsibleTrigger asChild>
+                    <CardContent className="cursor-pointer p-4 md:p-6">
+                      <div className="flex items-center gap-4">
+                        <div className="size-14 shrink-0 overflow-hidden rounded-lg bg-muted md:size-16">
+                          <AspectRatio ratio={1}>
+                            <img
+                              src={primaryItem.image}
+                              alt={primaryItem.name}
+                              className="size-full object-cover"
+                            />
+                          </AspectRatio>
+                        </div>
+
+                        <div className="min-w-0 flex-1">
+                          <h3 className="font-medium">{primaryItem.name}</h3>
+                          <p className="text-sm text-muted-foreground">
+                            {primaryItem.variant}
+                          </p>
+                        </div>
+
+                        <div className="hidden items-center gap-6 md:flex">
+                          <Badge
+                            variant="secondary"
+                            className="bg-primary/10 font-mono text-primary hover:bg-primary/10"
+                            dir="rtl"
+                          >
+                            #{order.orderNumber}
+                          </Badge>
+                          <span className="w-32 shrink-0 text-sm text-muted-foreground">
+                            {formatOrderDate(order.orderDate)}
+                          </span>
+                          <Badge className={cn("gap-1.5", status.className)}>
+                            <StatusIcon className="size-3.5" aria-hidden="true" />
+                            {status.label}
+                          </Badge>
+                          <span className="w-24 shrink-0 text-end font-semibold tabular-nums">
+                            {formatCurrency(order.total)}
+                          </span>
+                          <ChevronDown
+                            className={cn(
+                              "size-5 text-muted-foreground transition-transform",
+                              isExpanded && "rotate-180",
+                            )}
+                            aria-hidden="true"
+                          />
+                        </div>
+
+                        <ChevronDown
+                          className={cn(
+                            "size-5 text-muted-foreground transition-transform md:hidden",
+                            isExpanded && "rotate-180",
+                          )}
+                          aria-hidden="true"
+                        />
+                      </div>
+
+                      <div className="mt-3 flex flex-wrap items-center gap-2 md:hidden">
+                        <Badge
+                          variant="secondary"
+                          className="bg-primary/10 font-mono text-primary hover:bg-primary/10"
+                          dir="rtl"
+                        >
+                          #{order.orderNumber}
+                        </Badge>
+                        <span className="text-sm text-muted-foreground">
+                          {formatOrderDate(order.orderDate)}
+                        </span>
+                        <Badge className={cn("gap-1.5", status.className)}>
+                          <StatusIcon className="size-3.5" aria-hidden="true" />
+                          {status.label}
+                        </Badge>
+                        <span className="ms-auto font-semibold tabular-nums">
+                          {formatCurrency(order.total)}
+                        </span>
+                      </div>
+                    </CardContent>
+                  </CollapsibleTrigger>
+
+                  <CollapsibleContent>
+                    <Separator />
+                    <CardContent className="p-4 md:p-6">
+                      <div className="grid gap-6 md:grid-cols-2">
+                        <div>
+                          <h4 className="mb-3 text-sm font-medium">
+                            اقلام سفارش
+                          </h4>
+                          <div className="space-y-3">
+                            {order.items.map((item, index) => (
+                              <div key={index} className="flex gap-3">
+                                <div className="size-12 shrink-0 overflow-hidden rounded-md bg-muted">
+                                  <AspectRatio ratio={1}>
+                                    <img
+                                      src={item.image}
+                                      alt={item.name}
+                                      className="size-full object-cover"
+                                    />
+                                  </AspectRatio>
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                  <p className="text-sm font-medium">
+                                    {item.name}
+                                  </p>
+                                  <p className="text-xs text-muted-foreground">
+                                    {item.variant} · تعداد:{" "}
+                                    {item.quantity.toLocaleString("fa-IR")}
+                                  </p>
+                                </div>
+                                <p className="text-sm font-medium tabular-nums">
+                                  {formatCurrency(item.price)}
+                                </p>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+
+                        <div className="space-y-4">
+                          <div>
+                            <h4 className="mb-2 flex items-center gap-2 text-sm font-medium">
+                              <MapPin
+                                className="size-4 text-muted-foreground"
+                                aria-hidden="true"
+                              />
+                              آدرس ارسال
+                            </h4>
+                            <div className="rounded-lg bg-muted/50 p-3 text-sm">
+                              <p className="font-medium">
+                                {order.shippingAddress.name}
+                              </p>
+                              <p className="text-muted-foreground">
+                                {order.shippingAddress.street}
+                              </p>
+                              <p className="text-muted-foreground">
+                                {order.shippingAddress.city}،{" "}
+                                {order.shippingAddress.state}  کد پستی{" "}
+                                <span dir="rtl" className="tabular-nums">
+                                  {order.shippingAddress.zipCode}
+                                </span>
+                              </p>
+                            </div>
+                          </div>
+
+                          {order.trackingNumber && (
+                            <div>
+                              <h4 className="mb-2 flex items-center gap-2 text-sm font-medium">
+                                <Truck
+                                  className="size-4 text-muted-foreground"
+                                  aria-hidden="true"
+                                />
+                                رهگیری مرسوله
+                              </h4>
+                              <div className="rounded-lg bg-muted/50 p-3 text-sm">
+                                <p
+                                  className="font-mono text-xs tabular-nums"
+                                  dir="rtl"
+                                >
+                                  {order.trackingNumber}
+                                </p>
+                                {order.estimatedDelivery && (
+                                  <p className="mt-1 text-muted-foreground">
+                                    تحویل تقریبی:{" "}
+                                    {formatOrderDate(order.estimatedDelivery)}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="mt-6 flex flex-wrap gap-2">
+                        {order.status === "shipped" && (
+                          <Button size="sm">
+                            <Truck className="me-1.5 size-4" aria-hidden="true" />
+                            پیگیری مرسوله
+                          </Button>
+                        )}
+                        {order.status === "delivered" && (
+                          <>
+                            <Button size="sm" variant="outline">
+                              <RotateCcw
+                                className="me-1.5 size-4"
+                                aria-hidden="true"
+                              />
+                              خرید مجدد
+                            </Button>
+                            <Button size="sm" variant="outline">
+                              بازگشت کالا
+                            </Button>
+                          </>
+                        )}
+                        {order.status === "pending" && (
+                          <Button size="sm" variant="outline">
+                            لغو سفارش
+                          </Button>
+                        )}
+                        <Button size="sm" variant="ghost">
+                          مشاهده فاکتور
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </CollapsibleContent>
+                </Card>
+              </Collapsible>
+            );
+          })}
+
+          {filteredOrders.length === 0 && (
+            <Card className="shadow-none">
+              <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="mb-4 flex size-16 items-center justify-center rounded-full bg-muted">
+                  <Package
+                    className="size-8 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                </div>
+                <h2 className="mb-2 text-lg font-semibold">سفارشی یافت نشد</h2>
+                <p className="max-w-sm text-sm text-muted-foreground">
+                  {searchQuery
+                    ? `سفارشی با عبارت «${searchQuery}» یافت نشد.`
+                    : "هنوز سفارشی ثبت نکرده‌اید."}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { OrderHistory2 };
diff --git a/blocks/order-history3.tsx b/blocks/order-history3.tsx
new file mode 100644
index 0000000..6e438e6
--- /dev/null
+++ b/blocks/order-history3.tsx
@@ -0,0 +1,355 @@
+"use client";
+
+import { CheckCircle, Clock, Search, Truck, XCircle } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type OrderStatus = "pending" | "shipped" | "delivered" | "cancelled";
+
+interface OrderItem {
+  name: string;
+  variant: string;
+  image: string;
+  price: number;
+  quantity: number;
+  status: OrderStatus;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  statIRRate: string;
+}
+
+interface Order {
+  id: string;
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  total: number;
+  items: OrderItem[];
+}
+
+const DEFAULT_ORDERS: Order[] = [
+  {
+    id: "1",
+    orderNumber: "47582",
+    orderDate: "2025-01-15",
+    total: 487000.0,
+    items: [
+      {
+        name: "صندلی راحتی مین‌سنتری",
+        variant: "زرد خردلی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Leather-Sofa-1.png",
+        price: 289000.0,
+        quantity: 1,
+        status: "delivered",
+        statIRRate: "2025-01-22",
+      },
+      {
+        name: "کوسن طرح گل",
+        variant: "چاپ گل‌دار تیره",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Loveseat-1.png",
+        price: 490000.0,
+        quantity: 2,
+        status: "delivered",
+        statIRRate: "2025-01-22",
+      },
+      {
+        name: "گلدان گیاه آپارتمانی",
+        variant: "سبز متوسط",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Wooden-Sideboard-1.png",
+        price: 990000.0,
+        quantity: 1,
+        status: "delivered",
+        statIRRate: "2025-01-18",
+      },
+    ],
+  },
+  {
+    id: "2",
+    orderNumber: "46321",
+    orderDate: "2025-01-10",
+    total: 329000.0,
+    items: [
+      {
+        name: "میز جلو مبلی چوبی",
+        variant: "بلوط طبیعی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Wooden-Cabinet-1.png",
+        price: 249000.0,
+        quantity: 1,
+        status: "delivered",
+        statIRRate: "2025-01-13",
+      },
+      {
+        name: "ست تابلو دیواری بافته",
+        variant: "طرح هندسی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-1.png",
+        price: 800000.0,
+        quantity: 1,
+        status: "delivered",
+        statIRRate: "2025-01-13",
+      },
+    ],
+  },
+  {
+    id: "3",
+    orderNumber: "45890",
+    orderDate: "2024-12-28",
+    total: 159000.0,
+    items: [
+      {
+        name: "چراغ رومیزی سرامیکی",
+        variant: "سفید مات",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-2.png",
+        price: 159000.0,
+        quantity: 1,
+        status: "shipped",
+        statIRRate: "2025-01-05",
+      },
+    ],
+  },
+];
+
+const formatCurrency = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const statusConfig: Record<
+  OrderStatus,
+  { label: string; className: string; icon: typeof CheckCircle }
+> = {
+  pending: {
+    label: "در حال پردازش،",
+    className: "text-slate-600",
+    icon: Clock,
+  },
+  shipped: {
+    label: "ارسال‌شده در",
+    className: "text-blue-600",
+    icon: Truck,
+  },
+  delivered: {
+    label: "تحویل‌شده در",
+    className: "text-emerald-600",
+    icon: CheckCircle,
+  },
+  cancelled: {
+    label: "لغوشده در",
+    className: "text-red-600",
+    icon: XCircle,
+  },
+};
+
+interface OrderHistory3Props {
+  orders?: Order[];
+  className?: string;
+}
+
+const OrderHistory3 = ({
+  orders = DEFAULT_ORDERS,
+  className,
+}: OrderHistory3Props) => {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredOrders = orders.filter((order) => {
+    if (searchQuery === "") return true;
+    const query = searchQuery.toLowerCase();
+    return (
+      order.orderNumber.includes(query) ||
+      order.items.some((item) => item.name.toLowerCase().includes(query))
+    );
+  });
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-4xl">
+        <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h1 className="text-xl font-bold tracking-tight md:text-3xl">
+              سفارش‌های من
+            </h1>
+            <p className="mt-1 text-muted-foreground">
+              مشاهده تاریخچه و جزئیات پیگیری سفارش‌ها
+            </p>
+          </div>
+
+          <div className="relative">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <Input
+              placeholder="جستجو…"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              name="order-history-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی سفارش‌ها و محصولات"
+              className="ps-9 sm:w-56"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          {filteredOrders.map((order) => (
+            <Card
+              key={order.id}
+              className="gap-0 overflow-hidden p-0 shadow-none"
+            >
+              <CardHeader className="bg-muted/40 px-4 py-3 md:px-6 md:py-4">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="grid grid-cols-3 gap-4 sm:flex sm:gap-8">
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        شماره سفارش
+                      </p>
+                      <p className="font-semibold tabular-nums" dir="rtl">
+                        {order.orderNumber}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        تاریخ سفارش
+                      </p>
+                      <p className="font-medium">
+                        {formatOrderDate(order.orderDate)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">مبلغ کل</p>
+                      <p className="font-semibold tabular-nums">
+                        {formatCurrency(order.total)}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button variant="outline" size="sm">
+                      مشاهده فاکتور
+                    </Button>
+                    <Button variant="outline" size="sm">
+                      بایگانی
+                    </Button>
+                  </div>
+                </div>
+              </CardHeader>
+
+              <CardContent className="p-0">
+                {order.items.map((item, index) => {
+                  const status = statusConfig[item.status];
+                  const StatusIcon = status.icon;
+
+                  return (
+                    <div key={index}>
+                      {index > 0 && <Separator />}
+                      <div className="flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between md:p-6">
+                        <div className="flex gap-4">
+                          <div className="size-16 shrink-0 overflow-hidden rounded-lg bg-muted md:size-20">
+                            <AspectRatio ratio={1}>
+                              <img
+                                src={item.image}
+                                alt={item.name}
+                                className="size-full object-cover"
+                              />
+                            </AspectRatio>
+                          </div>
+                          <div>
+                            <h3 className="font-medium">{item.name}</h3>
+                            <p className="text-sm text-muted-foreground">
+                              {item.variant}
+                              {item.quantity > 1 && (
+                                <>
+                                  {" "}
+                                  · تعداد:{" "}
+                                  {item.quantity.toLocaleString("fa-IR")}
+                                </>
+                              )}
+                            </p>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="mt-2"
+                            >
+                              خرید مجدد
+                            </Button>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center gap-2 sm:text-end">
+                          <StatusIcon
+                            className={cn(
+                              "size-5 shrink-0",
+                              item.status === "delivered" && "text-emerald-500",
+                              item.status === "shipped" && "text-blue-500",
+                              item.status === "pending" && "text-slate-400",
+                              item.status === "cancelled" && "text-red-500",
+                            )}
+                            fill={
+                              item.status === "delivered"
+                                ? "currentColor"
+                                : "none"
+                            }
+                            strokeWidth={item.status === "delivered" ? 0 : 2}
+                            aria-hidden="true"
+                          />
+                          <p className="text-sm">
+                            <span className="text-muted-foreground">
+                              {status.label}{" "}
+                            </span>
+                            <span className="font-medium">
+                              {formatOrderDate(item.statIRRate)}
+                            </span>
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </CardContent>
+            </Card>
+          ))}
+
+          {filteredOrders.length === 0 && (
+            <Card className="shadow-none">
+              <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="mb-4 flex size-16 items-center justify-center rounded-full bg-muted">
+                  <Search
+                    className="size-8 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                </div>
+                <h2 className="mb-2 text-lg font-semibold">سفارشی یافت نشد</h2>
+                <p className="max-w-sm text-sm text-muted-foreground">
+                  سفارشی با عبارت «{searchQuery}» یافت نشد.
+                </p>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { OrderHistory3 };
diff --git a/blocks/order-history4.tsx b/blocks/order-history4.tsx
new file mode 100644
index 0000000..6f1550e
--- /dev/null
+++ b/blocks/order-history4.tsx
@@ -0,0 +1,413 @@
+"use client";
+
+import { ArrowRight, Check, Package, Search, Truck } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type OrderStatus = "confirmed" | "processing" | "shipped" | "delivered";
+
+interface OrderItem {
+  name: string;
+  designer: string;
+  image: string;
+  price: number;
+  size?: string;
+  color?: string;
+}
+
+interface Order {
+  id: string;
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  status: OrderStatus;
+  total: number;
+  items: OrderItem[];
+  trackingNumber?: string;
+  /** ISO 8601 date range for estimated delivery */
+  estimatedDeliveryFrom?: string;
+  estimatedDeliveryTo?: string;
+}
+
+const DEFAULT_ORDERS: Order[] = [
+  {
+    id: "1",
+    orderNumber: "SB-2025-00847",
+    orderDate: "2025-01-15",
+    status: "shipped",
+    total: 2450000.0,
+    trackingNumber: "1Z999AA10123456784",
+    estimatedDeliveryFrom: "2025-01-20",
+    estimatedDeliveryTo: "2025-01-22",
+    items: [
+      {
+        name: "صندلی چرمی مجسمه‌وار",
+        designer: "آتلیه کالکشن",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Leather-Sofa-1.png",
+        price: 1890000.0,
+        color: "کانیاک",
+      },
+      {
+        name: "آویز شیشه‌دمیده دست‌ساز",
+        designer: "استودیو لومیِر",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-1.png",
+        price: 560000.0,
+        color: "کهربایی",
+      },
+    ],
+  },
+  {
+    id: "2",
+    orderNumber: "SB-2025-00831",
+    orderDate: "2025-01-08",
+    status: "delivered",
+    total: 3200000.0,
+    items: [
+      {
+        name: "میز کنسول گردو",
+        designer: "نوردیک کرفت",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Wooden-Sideboard-1.png",
+        price: 2400000.0,
+        size: "۱۶۰ × ۴۰ × ۸۵ سانتی‌متر",
+      },
+      {
+        name: "گلدان مجسمه‌ای سرامیکی",
+        designer: "کالکتیو هنرمند",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-2.png",
+        price: 420000.0,
+        color: "سفید مات",
+      },
+      {
+        name: "پتو پشمی کتان",
+        designer: "مزون تکستایل",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Loveseat-1.png",
+        price: 380000.0,
+        color: "طبیعی",
+      },
+    ],
+  },
+  {
+    id: "3",
+    orderNumber: "SB-2024-00798",
+    orderDate: "2024-12-28",
+    status: "delivered",
+    total: 1650000.0,
+    items: [
+      {
+        name: "چراغ ایستاده مینیمال",
+        designer: "لایت اند فرم",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Wooden-Cabinet-1.png",
+        price: 1650000.0,
+        color: "برنجی برس‌خورده",
+      },
+    ],
+  },
+];
+
+const formatCurrency = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatDeliveryRange = (from: string, to: string) =>
+  `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
+
+const statusSteps: { key: OrderStatus; label: string; icon: typeof Check }[] = [
+  { key: "confirmed", label: "تأیید‌شده", icon: Check },
+  { key: "processing", label: "در حال پردازش", icon: Package },
+  { key: "shipped", label: "ارسال‌شده", icon: Truck },
+  { key: "delivered", label: "تحویل‌شده", icon: Check },
+];
+
+const getStatusIndex = (status: OrderStatus) => {
+  return statusSteps.findIndex((s) => s.key === status);
+};
+
+interface OrderHistory4Props {
+  orders?: Order[];
+  className?: string;
+}
+
+const OrderHistory4 = ({
+  orders = DEFAULT_ORDERS,
+  className,
+}: OrderHistory4Props) => {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredOrders = orders.filter((order) => {
+    if (searchQuery === "") return true;
+    const query = searchQuery.toLowerCase();
+    return (
+      order.orderNumber.toLowerCase().includes(query) ||
+      order.items.some(
+        (item) =>
+          item.name.toLowerCase().includes(query) ||
+          item.designer.toLowerCase().includes(query),
+      )
+    );
+  });
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-6xl">
+        <div className="mb-12 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
+          <div>
+            <p className="text-xs font-medium tracking-[0.2em] text-muted-foreground">
+              حساب کاربری
+            </p>
+            <h1 className="mt-2 text-3xl font-light tracking-tight md:text-xl">
+              تاریخچه سفارش‌ها
+            </h1>
+          </div>
+
+          <div className="relative">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <Input
+              placeholder="جستجوی سفارش‌ها…"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              name="order-history-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی سفارش‌ها"
+              className="ps-9 sm:w-64"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-16">
+          {filteredOrders.map((order) => {
+            const currentStatusIndex = getStatusIndex(order.status);
+
+            return (
+              <article key={order.id} className="group">
+                <div className="mb-8 flex flex-col gap-4 border-b pb-6 md:flex-row md:items-center md:justify-between">
+                  <div className="flex flex-wrap items-baseline gap-x-6 gap-y-2">
+                    <h2
+                      className="text-lg font-medium tracking-wide"
+                      dir="rtl"
+                    >
+                      {order.orderNumber}
+                    </h2>
+                    <span className="text-sm text-muted-foreground">
+                      {formatOrderDate(order.orderDate)}
+                    </span>
+                    <span className="text-sm font-medium tabular-nums">
+                      {formatCurrency(order.total)}
+                    </span>
+                  </div>
+
+                  <div className="flex items-center gap-4">
+                    {order.status === "delivered" ? (
+                      <Badge
+                        variant="secondary"
+                        className="rounded-none bg-emerald-50 px-3 py-1 text-xs font-medium tracking-wide text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300"
+                      >
+                        تحویل‌شده
+                      </Badge>
+                    ) : (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-9 rounded-none text-xs tracking-wide"
+                      >
+                        پیگیری سفارش
+                        <ArrowRight
+                          className="ms-2 size-3 rtl:rotate-180"
+                          aria-hidden="true"
+                        />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+
+                {order.status !== "delivered" && (
+                  <div className="mb-10">
+                    <div className="flex items-center justify-between">
+                      {statusSteps.map((step, index) => {
+                        const isCompleted = index <= currentStatusIndex;
+                        const isCurrent = index === currentStatusIndex;
+                        const StepIcon = step.icon;
+
+                        return (
+                          <div
+                            key={step.key}
+                            className="flex flex-1 items-center"
+                          >
+                            <div className="flex flex-col items-center">
+                              <div
+                                className={cn(
+                                  "flex size-10 items-center justify-center rounded-full border-2 transition-colors",
+                                  isCompleted
+                                    ? "border-primary bg-primary text-primary-foreground"
+                                    : "border-muted-foreground/30 text-muted-foreground/30",
+                                  isCurrent && "ring-4 ring-primary/20",
+                                )}
+                              >
+                                <StepIcon
+                                  className="size-4"
+                                  aria-hidden="true"
+                                />
+                              </div>
+                              <span
+                                className={cn(
+                                  "mt-2 text-xs font-medium tracking-wide",
+                                  isCompleted
+                                    ? "text-foreground"
+                                    : "text-muted-foreground/50",
+                                )}
+                              >
+                                {step.label}
+                              </span>
+                            </div>
+                            {index < statusSteps.length - 1 && (
+                              <div
+                                className={cn(
+                                  "mx-2 h-0.5 flex-1",
+                                  index < currentStatusIndex
+                                    ? "bg-primary"
+                                    : "bg-muted-foreground/20",
+                                )}
+                              />
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+
+                    {order.estimatedDeliveryFrom &&
+                      order.estimatedDeliveryTo && (
+                        <p className="mt-4 text-center text-sm text-muted-foreground">
+                          تحویل تقریبی:{" "}
+                          <span className="font-medium text-foreground">
+                            {formatDeliveryRange(
+                              order.estimatedDeliveryFrom,
+                              order.estimatedDeliveryTo,
+                            )}
+                          </span>
+                        </p>
+                      )}
+                  </div>
+                )}
+
+                <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+                  {order.items.map((item, index) => (
+                    <div key={index} className="group/item">
+                      <div className="relative mb-4 overflow-hidden bg-muted/50">
+                        <AspectRatio ratio={4 / 5}>
+                          <img
+                            src={item.image}
+                            alt={item.name}
+                            className="size-full object-cover transition-transform duration-500 group-hover/item:scale-105"
+                          />
+                        </AspectRatio>
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          className="absolute end-4 bottom-4 h-9 rounded-none bg-background/90 text-xs tracking-wide opacity-0 backdrop-blur-sm transition-opacity group-hover/item:opacity-100"
+                        >
+                          خرید مجدد
+                        </Button>
+                      </div>
+
+                      <div>
+                        <p className="text-[10px] font-medium tracking-[0.15em] text-muted-foreground">
+                          {item.designer}
+                        </p>
+                        <h3 className="mt-1 text-sm font-medium">
+                          {item.name}
+                        </h3>
+                        <div className="mt-2 flex items-center gap-3 text-xs text-muted-foreground">
+                          {item.color && <span>{item.color}</span>}
+                          {item.size && <span>{item.size}</span>}
+                          {(item.color || item.size) && (
+                            <Separator
+                              orientation="vertical"
+                              className="h-3"
+                            />
+                          )}
+                          <span className="font-medium text-foreground tabular-nums">
+                            {formatCurrency(item.price)}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-8 flex flex-wrap items-center justify-between gap-4 border-t pt-6">
+                  <div className="flex gap-6 text-xs">
+                    <button
+                      type="button"
+                      className="font-medium tracking-wide text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      مشاهده جزئیات
+                    </button>
+                    <button
+                      type="button"
+                      className="font-medium tracking-wide text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      فاکتور
+                    </button>
+                    {order.status === "delivered" && (
+                      <button
+                        type="button"
+                        className="font-medium tracking-wide text-muted-foreground transition-colors hover:text-foreground"
+                      >
+                        بازگشت کالا
+                      </button>
+                    )}
+                  </div>
+                  {order.trackingNumber && order.status !== "delivered" && (
+                    <p className="text-xs text-muted-foreground">
+                      رهگیری:{" "}
+                      <span className="font-mono tabular-nums" dir="rtl">
+                        {order.trackingNumber}
+                      </span>
+                    </p>
+                  )}
+                </div>
+              </article>
+            );
+          })}
+        </div>
+
+        {filteredOrders.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-24 text-center">
+            <p className="text-sm text-muted-foreground">
+              سفارشی با عبارت «{searchQuery}» یافت نشد.
+            </p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { OrderHistory4 };
diff --git a/blocks/order-history5.tsx b/blocks/order-history5.tsx
new file mode 100644
index 0000000..f5ea210
--- /dev/null
+++ b/blocks/order-history5.tsx
@@ -0,0 +1,526 @@
+"use client";
+
+import {
+  ArrowUpRight,
+  ChevronRight,
+  Package,
+  RotateCcw,
+  Search,
+  Star,
+  Truck,
+} from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+type OrderStatus = "processing" | "shipped" | "delivered" | "returned";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  size: string;
+  color: string;
+  quantity: number;
+  canReturn?: boolean;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  returnByDate?: string;
+}
+
+interface Order {
+  id: string;
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  status: OrderStatus;
+  total: number;
+  items: OrderItem[];
+  /** ISO 8601 date(s) for expected delivery */
+  deliveryDateFrom?: string;
+  deliveryDateTo?: string;
+  trackingUrl?: string;
+}
+
+const DEFAULT_ORDERS: Order[] = [
+  {
+    id: "1",
+    orderNumber: "WEB-9847562",
+    orderDate: "2024-12-12",
+    status: "shipped",
+    total: 1279700.0,
+    deliveryDateFrom: "2024-12-18",
+    deliveryDateTo: "2024-12-20",
+    trackingUrl: "#",
+    items: [
+      {
+        id: "1a",
+        name: "هودی پنبه‌ای اورسایز",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+        price: 499900.0,
+        size: "L",
+        color: "مشکی",
+        quantity: 1,
+      },
+      {
+        id: "1b",
+        name: "جین راسته فاق بلند",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-jay-soundo-2148060180-30624171-1.png",
+        price: 599900.0,
+        size: "32",
+        color: "آبی متوسط",
+        quantity: 1,
+      },
+      {
+        id: "1c",
+        name: "تی‌شرت یقه گرد ساده",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/minimalist-tank-top-flatlay.png",
+        price: 179900.0,
+        size: "M",
+        color: "سفید",
+        quantity: 1,
+      },
+    ],
+  },
+  {
+    id: "2",
+    orderNumber: "WEB-9841203",
+    orderDate: "2024-12-05",
+    status: "delivered",
+    total: 899800.0,
+    deliveryDateFrom: "2024-12-10",
+    items: [
+      {
+        id: "2a",
+        name: "کیف دوشی چرمی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+        price: 699900.0,
+        size: "یک سایز",
+        color: "زرشکی",
+        quantity: 1,
+        canReturn: true,
+        returnByDate: "2025-01-10",
+      },
+      {
+        id: "2b",
+        name: "کلاه بافتنی",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Black-Fedora-Hat-1.png",
+        price: 199900.0,
+        size: "یک سایز",
+        color: "ذغالی",
+        quantity: 1,
+        canReturn: true,
+        returnByDate: "2025-01-10",
+      },
+    ],
+  },
+  {
+    id: "3",
+    orderNumber: "WEB-9835678",
+    orderDate: "2024-11-28",
+    status: "delivered",
+    total: 1599700.0,
+    deliveryDateFrom: "2024-12-03",
+    items: [
+      {
+        id: "3a",
+        name: "پالتو پشمی مخلوط",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-White-Hoodie-1.png",
+        price: 129990.0,
+        size: "M",
+        color: "شتری",
+        quantity: 1,
+        canReturn: false,
+      },
+      {
+        id: "3b",
+        name: "شال کشمیر",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/elegant-peach-scarf.png",
+        price: 299800.0,
+        size: "یک سایز",
+        color: "کرم جو دوسر",
+        quantity: 2,
+        canReturn: false,
+      },
+    ],
+  },
+  {
+    id: "4",
+    orderNumber: "WEB-9828901",
+    orderDate: "2024-11-15",
+    status: "returned",
+    total: 459900.0,
+    items: [
+      {
+        id: "4a",
+        name: "شلوار چینو اسلیم",
+        image:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-jay-soundo-2148060180-30624171-2.png",
+        price: 459900.0,
+        size: "30",
+        color: "خاکی",
+        quantity: 1,
+      },
+    ],
+  },
+];
+
+const formatCurrency = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatDeliveryEstimate = (from: string, to?: string) => {
+  if (to && to !== from) {
+    return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
+  }
+  return formatOrderDate(from);
+};
+
+const statusConfig: Record<
+  OrderStatus,
+  { label: string; color: string; dotColor: string }
+> = {
+  processing: {
+    label: "در حال پردازش",
+    color: "text-amber-600",
+    dotColor: "bg-amber-500",
+  },
+  shipped: {
+    label: "در مسیر تحویل",
+    color: "text-blue-600",
+    dotColor: "bg-blue-500",
+  },
+  delivered: {
+    label: "تحویل‌شده",
+    color: "text-emerald-600",
+    dotColor: "bg-emerald-500",
+  },
+  returned: {
+    label: "مرجوع‌شده",
+    color: "text-muted-foreground",
+    dotColor: "bg-muted-foreground",
+  },
+};
+
+const tabLabels: Record<string, string> = {
+  all: "همه سفارش‌ها",
+  active: "در حال انجام",
+  delivered: "تحویل‌شده",
+  returned: "مرجوعات",
+};
+
+interface OrderHistory5Props {
+  orders?: Order[];
+  className?: string;
+}
+
+const OrderHistory5 = ({
+  orders = DEFAULT_ORDERS,
+  className,
+}: OrderHistory5Props) => {
+  const [activeTab, setActiveTab] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredOrders = orders.filter((order) => {
+    const matchesTab =
+      activeTab === "all" ||
+      (activeTab === "active" &&
+        (order.status === "processing" || order.status === "shipped")) ||
+      order.status === activeTab;
+
+    const matchesSearch =
+      searchQuery === "" ||
+      order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      order.items.some((item) =>
+        item.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      );
+
+    return matchesTab && matchesSearch;
+  });
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-4xl">
+        <div className="mb-8">
+          <h1 className="text-xl font-semibold tracking-tight md:text-3xl">
+            سفارش‌های شما
+          </h1>
+          <p className="mt-1 text-muted-foreground">
+            پیگیری، بازگشت یا خرید مجدد اقلام
+          </p>
+        </div>
+
+        <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList>
+              <TabsTrigger value="all">{tabLabels.all}</TabsTrigger>
+              <TabsTrigger value="active">{tabLabels.active}</TabsTrigger>
+              <TabsTrigger value="delivered">
+                {tabLabels.delivered}
+              </TabsTrigger>
+              <TabsTrigger value="returned">{tabLabels.returned}</TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          <div className="relative">
+            <Search
+              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <Input
+              placeholder="جستجوی سفارش‌ها…"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              name="order-history-search"
+              inputMode="search"
+              autoComplete="off"
+              aria-label="جستجوی سفارش‌ها"
+              className="ps-9 sm:w-64"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          {filteredOrders.map((order) => {
+            const status = statusConfig[order.status];
+
+            return (
+              <Card
+                key={order.id}
+                className="gap-0 overflow-hidden p-0 shadow-none"
+              >
+                <div
+                  className={cn(
+                    "flex flex-wrap items-center justify-between gap-4 px-5 py-4",
+                    !(
+                      order.status === "shipped" && order.deliveryDateFrom
+                    ) && "border-b",
+                  )}
+                >
+                  <div className="flex flex-wrap items-center gap-x-5 gap-y-1">
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        تاریخ ثبت سفارش
+                      </p>
+                      <p className="text-sm font-medium">
+                        {formatOrderDate(order.orderDate)}
+                      </p>
+                    </div>
+                    <Separator orientation="vertical" className="h-8" />
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        شماره سفارش
+                      </p>
+                      <p className="text-sm font-medium" dir="rtl">
+                        {order.orderNumber}
+                      </p>
+                    </div>
+                    <Separator orientation="vertical" className="h-8" />
+                    <div>
+                      <p className="text-xs text-muted-foreground">مجموع</p>
+                      <p className="text-sm font-medium tabular-nums">
+                        {formatCurrency(order.total)}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={cn("size-2 rounded-full", status.dotColor)}
+                      aria-hidden="true"
+                    />
+                    <span className={cn("text-sm font-medium", status.color)}>
+                      {status.label}
+                    </span>
+                  </div>
+                </div>
+
+                {order.status === "shipped" && order.deliveryDateFrom && (
+                  <div className="flex items-center justify-between gap-4 border-b bg-muted/30 px-5 py-3">
+                    <div className="flex items-center gap-3">
+                      <div className="flex size-9 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-950">
+                        <Truck
+                          className="size-4 text-blue-600"
+                          aria-hidden="true"
+                        />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium">
+                          تحویل:{" "}
+                          {formatDeliveryEstimate(
+                            order.deliveryDateFrom,
+                            order.deliveryDateTo,
+                          )}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          بسته شما در راه است
+                        </p>
+                      </div>
+                    </div>
+                    {order.trackingUrl && (
+                      <Button variant="outline" size="sm" asChild>
+                        <a href={order.trackingUrl}>
+                          پیگیری
+                          <ArrowUpRight
+                            className="ms-1.5 size-3.5 rtl:-rotate-90"
+                            aria-hidden="true"
+                          />
+                        </a>
+                      </Button>
+                    )}
+                  </div>
+                )}
+
+                <CardContent className="p-0">
+                  {order.items.map((item, index) => (
+                    <div key={item.id}>
+                      {index > 0 && <Separator />}
+                      <div className="flex gap-5 p-5">
+                        <div className="size-24 shrink-0 overflow-hidden rounded-lg bg-muted sm:size-28">
+                          <AspectRatio ratio={1}>
+                            <img
+                              src={item.image}
+                              alt={item.name}
+                              className="size-full object-cover"
+                            />
+                          </AspectRatio>
+                        </div>
+
+                        <div className="flex min-w-0 flex-1 flex-col">
+                          <div className="flex items-start justify-between gap-3">
+                            <div>
+                              <h3 className="font-medium">{item.name}</h3>
+                              <p className="mt-1 text-sm text-muted-foreground">
+                                {item.color} ·{" "}
+                                <span dir="rtl">{item.size}</span>
+                                {item.quantity > 1 && (
+                                  <>
+                                    {" "}
+                                    · تعداد:{" "}
+                                    {item.quantity.toLocaleString("fa-IR")}
+                                  </>
+                                )}
+                              </p>
+                            </div>
+                            <p className="shrink-0 text-sm font-semibold tabular-nums">
+                              {formatCurrency(item.price)}
+                            </p>
+                          </div>
+
+                          <div className="mt-auto flex flex-wrap items-center gap-2 pt-3">
+                            {order.status === "delivered" && (
+                              <>
+                                <Button variant="secondary" size="sm">
+                                  <RotateCcw
+                                    className="me-1.5 size-3.5"
+                                    aria-hidden="true"
+                                  />
+                                  خرید مجدد
+                                </Button>
+                                {item.canReturn && (
+                                  <Button variant="outline" size="sm">
+                                    شروع بازگشت
+                                  </Button>
+                                )}
+                                <Button variant="ghost" size="sm">
+                                  <Star
+                                    className="me-1.5 size-3.5"
+                                    aria-hidden="true"
+                                  />
+                                  ثبت نظر
+                                </Button>
+                              </>
+                            )}
+                            {order.status === "shipped" && (
+                              <Button variant="secondary" size="sm">
+                                <Package
+                                  className="me-1.5 size-3.5"
+                                  aria-hidden="true"
+                                />
+                                پیگیری قلم
+                              </Button>
+                            )}
+                          </div>
+
+                          {item.canReturn && item.returnByDate && (
+                            <p className="mt-3 text-xs text-muted-foreground">
+                              امکان بازگشت تا{" "}
+                              {formatOrderDate(item.returnByDate)}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </CardContent>
+
+                <div className="flex items-center justify-between border-t bg-muted/20 px-5 py-3">
+                  <Button
+                    variant="link"
+                    size="sm"
+                    className="h-auto p-0 text-foreground"
+                  >
+                    مشاهده جزئیات سفارش
+                    <ChevronRight
+                      className="ms-1 size-4 rtl:rotate-180"
+                      aria-hidden="true"
+                    />
+                  </Button>
+                  <Button variant="ghost" size="sm">
+                    به کمک نیاز دارید؟
+                  </Button>
+                </div>
+              </Card>
+            );
+          })}
+
+          {filteredOrders.length === 0 && (
+            <Card className="gap-0 p-0 shadow-none">
+              <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="mb-4 flex size-14 items-center justify-center rounded-full bg-muted">
+                  <Package
+                    className="size-6 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                </div>
+                <h2 className="text-lg font-semibold">سفارشی یافت نشد</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {searchQuery
+                    ? `نتیجه‌ای برای «${searchQuery}» یافت نشد.`
+                    : "هنوز سفارشی ثبت نکرده‌اید."}
+                </p>
+                <Button className="mt-5">شروع خرید</Button>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { OrderHistory5 };
diff --git a/blocks/order-summary1.tsx b/blocks/order-summary1.tsx
new file mode 100644
index 0000000..d6cb986
--- /dev/null
+++ b/blocks/order-summary1.tsx
@@ -0,0 +1,472 @@
+import {
+  CheckCircle,
+  CreditCard,
+  Download,
+  MapPin,
+  Package,
+  Printer,
+  Truck,
+} from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+  details?: { label: string; value: string }[];
+}
+
+interface ShippingAddress {
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  country: string;
+}
+
+interface PaymentMethod {
+  type: "card" | "paypal" | "bank";
+  lastFour?: string;
+  cardBrand?: string;
+  email?: string;
+}
+
+interface OrderSummaryData {
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  status: "confirmed" | "processing" | "shipped" | "delivered";
+  email: string;
+  items: OrderItem[];
+  subtotal: number;
+  shipping: number;
+  tax: number;
+  discount?: number;
+  total: number;
+  shippingAddress: ShippingAddress;
+  shippingMethod: string;
+  /** ISO 8601 date range for estimated delivery */
+  estimatedDeliveryFrom: string;
+  estimatedDeliveryTo?: string;
+  paymentMethod: PaymentMethod;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatDeliveryEstimate = (from: string, to?: string) => {
+  if (to && to !== from) {
+    return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
+  }
+  return formatOrderDate(from);
+};
+
+const DEFAULT_ORDER: OrderSummaryData = {
+  orderNumber: "ORD-2024-78432",
+  orderDate: "2024-12-14",
+  status: "confirmed",
+  email: "customer@example.com",
+  items: [
+    {
+      id: "1",
+      name: "کفش بژ مینیمال",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+      price: 120.0,
+      quantity: 1,
+      details: [
+        { label: "سایز", value: "42" },
+        { label: "رنگ", value: "بژ" },
+      ],
+    },
+    {
+      id: "2",
+      name: "تاپ آبی گلدوزی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      price: 140.0,
+      quantity: 2,
+      details: [
+        { label: "سایز", value: "M" },
+        { label: "رنگ", value: "آبی" },
+      ],
+    },
+    {
+      id: "3",
+      name: "کلاه فدورا کلاسیک",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+      price: 84.0,
+      quantity: 1,
+      details: [{ label: "سایز", value: "یک سایز" }],
+    },
+  ],
+  subtotal: 484.0,
+  shipping: 12.0,
+  tax: 38.72,
+  discount: 50.0,
+  total: 484.72,
+  shippingAddress: {
+    name: "علی محمدی",
+    street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
+    city: "تهران",
+    state: "تهران",
+    zipCode: "1415783114",
+    country: "ایران",
+  },
+  shippingMethod: "ارسال سریع",
+  estimatedDeliveryFrom: "2024-12-18",
+  estimatedDeliveryTo: "2024-12-20",
+  paymentMethod: {
+    type: "card",
+    lastFour: "4242",
+    cardBrand: "Visa",
+  },
+};
+
+interface OrderSummary1Props {
+  order?: OrderSummaryData;
+  className?: string;
+}
+
+const OrderSummary1 = ({
+  order = DEFAULT_ORDER,
+  className,
+}: OrderSummary1Props) => {
+  const getStatusBadge = (status: OrderSummaryData["status"]) => {
+    const variants: Record<
+      OrderSummaryData["status"],
+      { label: string; className: string }
+    > = {
+      confirmed: {
+        label: "سفارش تأیید شد",
+        className: "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/10",
+      },
+      processing: {
+        label: "در حال پردازش",
+        className: "bg-amber-500/10 text-amber-600 hover:bg-amber-500/10",
+      },
+      shipped: {
+        label: "ارسال‌شده",
+        className: "bg-blue-500/10 text-blue-600 hover:bg-blue-500/10",
+      },
+      delivered: {
+        label: "تحویل‌شده",
+        className: "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/10",
+      },
+    };
+    return variants[status];
+  };
+
+  const statusBadge = getStatusBadge(order.status);
+
+  const formatItemDetails = (details: OrderItem["details"]) => {
+    if (!details?.length) return null;
+    return details
+      .map((d) => `${d.label} ${d.value}`)
+      .join(" · ");
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-4xl">
+        <div className="mb-10 text-center">
+          <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-emerald-500/10">
+            <CheckCircle
+              className="size-8 text-emerald-600"
+              aria-hidden="true"
+            />
+          </div>
+          <h1 className="mb-2 text-xl font-bold tracking-tight md:text-3xl">
+            از خرید شما سپاسگزاریم!
+          </h1>
+          <p className="text-muted-foreground">
+            ایمیل تأیید به{" "}
+            <span className="font-medium text-foreground" dir="rtl">
+              {order.email}
+            </span>{" "}
+            ارسال شد.
+          </p>
+        </div>
+
+        <Card className="mb-6 shadow-none">
+          <CardContent className="flex flex-wrap items-center justify-between gap-4 p-4 md:p-6">
+            <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
+              <div>
+                <p className="text-sm text-muted-foreground">شماره سفارش</p>
+                <p className="font-semibold" dir="rtl">
+                  {order.orderNumber}
+                </p>
+              </div>
+              <Separator
+                orientation="vertical"
+                className="hidden h-10 md:block"
+              />
+              <div>
+                <p className="text-sm text-muted-foreground">تاریخ سفارش</p>
+                <p className="font-medium">
+                  {formatOrderDate(order.orderDate)}
+                </p>
+              </div>
+            </div>
+            <Badge className={statusBadge.className}>{statusBadge.label}</Badge>
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="space-y-6 lg:col-span-2">
+            <Card className="shadow-none">
+              <CardHeader className="pb-4">
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <Package className="size-5" aria-hidden="true" />
+                  اقلام سفارش
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {order.items.map((item, index) => (
+                  <div key={item.id}>
+                    <div className="flex gap-4">
+                      <div className="w-20 shrink-0">
+                        <AspectRatio
+                          ratio={1}
+                          className="overflow-hidden rounded-lg bg-muted"
+                        >
+                          <img
+                            src={item.image}
+                            alt={item.name}
+                            className="size-full object-cover"
+                          />
+                        </AspectRatio>
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <h3 className="font-medium">{item.name}</h3>
+                        {item.details && (
+                          <p className="mt-0.5 text-sm text-muted-foreground">
+                            {formatItemDetails(item.details)}
+                          </p>
+                        )}
+                        <p className="mt-1 text-sm text-muted-foreground">
+                          تعداد: {item.quantity.toLocaleString("fa-IR")}
+                        </p>
+                      </div>
+                      <div className="text-end">
+                        <p className="font-semibold tabular-nums">
+                          {currencyFormatter.format(
+                            item.price * item.quantity,
+                          )}
+                        </p>
+                        {item.quantity > 1 && (
+                          <p className="text-sm text-muted-foreground tabular-nums">
+                            {currencyFormatter.format(item.price)} برای هر قلم
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    {index < order.items.length - 1 && (
+                      <Separator className="mt-4" />
+                    )}
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+
+            <Card className="shadow-none">
+              <CardContent className="p-6">
+                <div className="space-y-3">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">جمع جزء</span>
+                    <span className="tabular-nums">
+                      {currencyFormatter.format(order.subtotal)}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">هزینه ارسال</span>
+                    <span className="tabular-nums">
+                      {order.shipping === 0
+                        ? "رایگان"
+                        : currencyFormatter.format(order.shipping)}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">مالیات</span>
+                    <span className="tabular-nums">
+                      {currencyFormatter.format(order.tax)}
+                    </span>
+                  </div>
+                  {order.discount && order.discount > 0 && (
+                    <div className="flex justify-between text-sm text-emerald-600">
+                      <span>تخفیف</span>
+                      <span className="tabular-nums">
+                        −{currencyFormatter.format(order.discount)}
+                      </span>
+                    </div>
+                  )}
+                  <Separator />
+                  <div className="flex justify-between text-lg font-semibold">
+                    <span>مبلغ پرداخت‌شده</span>
+                    <span className="tabular-nums">
+                      {currencyFormatter.format(order.total)}
+                    </span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="space-y-6">
+            <Card className="shadow-none">
+              <CardHeader className="pb-4">
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <MapPin className="size-5" aria-hidden="true" />
+                  آدرس ارسال
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <p className="font-medium">{order.shippingAddress.name}</p>
+                  <p className="text-sm text-muted-foreground">
+                    {order.shippingAddress.street}
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    {order.shippingAddress.city}،{" "}
+                    {order.shippingAddress.state}  کد پستی{" "}
+                    <span dir="rtl" className="tabular-nums">
+                      {order.shippingAddress.zipCode}
+                    </span>
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    {order.shippingAddress.country}
+                  </p>
+                </div>
+                <Separator />
+                <div className="flex items-start gap-3">
+                  <Truck
+                    className="mt-0.5 size-4 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                  <div>
+                    <p className="text-sm font-medium">
+                      {order.shippingMethod}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      تحویل تقریبی:{" "}
+                      {formatDeliveryEstimate(
+                        order.estimatedDeliveryFrom,
+                        order.estimatedDeliveryTo,
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="shadow-none">
+              <CardHeader className="pb-4">
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <CreditCard className="size-5" aria-hidden="true" />
+                  روش پرداخت
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {order.paymentMethod.type === "card" && (
+                  <div className="flex items-center gap-3">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                      alt="ویزا"
+                      className="size-8"
+                    />
+                    <div>
+                      <p className="text-sm font-medium">
+                        {order.paymentMethod.cardBrand}  پایان:{" "}
+                        <span dir="rtl" className="tabular-nums">
+                          {order.paymentMethod.lastFour}
+                        </span>
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        پرداخت انجام شد
+                      </p>
+                    </div>
+                  </div>
+                )}
+                {order.paymentMethod.type === "paypal" && (
+                  <div className="flex items-center gap-3">
+                    <div className="flex size-10 items-center justify-center rounded-md bg-muted">
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/paypal-icon.svg"
+                        alt="پی‌پال"
+                        className="size-5"
+                      />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium">پی‌پال</p>
+                      <p className="text-sm text-muted-foreground" dir="rtl">
+                        {order.paymentMethod.email}
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            <Card className="shadow-none">
+              <CardContent className="space-y-3 p-4">
+                <Button className="w-full" variant="default">
+                  <Package className="me-2 size-4" aria-hidden="true" />
+                  پیگیری سفارش
+                </Button>
+                <Button className="w-full" variant="outline">
+                  <Download className="me-2 size-4" aria-hidden="true" />
+                  دانلود رسید
+                </Button>
+                <Button className="w-full" variant="ghost">
+                  <Printer className="me-2 size-4" aria-hidden="true" />
+                  چاپ سفارش
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        <div className="mt-10 text-center">
+          <p className="mb-4 text-muted-foreground">
+            درباره سفارش خود سؤالی دارید؟
+          </p>
+          <div className="flex flex-wrap justify-center gap-3">
+            <Button variant="outline" asChild>
+              <a href="#">تماس با پشتیبانی</a>
+            </Button>
+            <Button asChild>
+              <a href="#">ادامه خرید</a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { OrderSummary1 };
diff --git a/blocks/order-summary2.tsx b/blocks/order-summary2.tsx
new file mode 100644
index 0000000..9ee499a
--- /dev/null
+++ b/blocks/order-summary2.tsx
@@ -0,0 +1,439 @@
+import {
+  CheckCircle,
+  CreditCard,
+  Download,
+  MapPin,
+  Package,
+  Printer,
+  Truck,
+} from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+  details?: { label: string; value: string }[];
+}
+
+interface ShippingAddress {
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  country: string;
+}
+
+interface PaymentMethod {
+  type: "card" | "paypal" | "bank";
+  lastFour?: string;
+  cardBrand?: string;
+  email?: string;
+}
+
+interface OrderSummaryData {
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  status: "confirmed" | "processing" | "shipped" | "delivered";
+  email: string;
+  items: OrderItem[];
+  subtotal: number;
+  shipping: number;
+  tax: number;
+  discount?: number;
+  total: number;
+  shippingAddress: ShippingAddress;
+  shippingMethod: string;
+  /** ISO 8601 date range for estimated delivery */
+  estimatedDeliveryFrom: string;
+  estimatedDeliveryTo?: string;
+  paymentMethod: PaymentMethod;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatDeliveryEstimate = (from: string, to?: string) => {
+  if (to && to !== from) {
+    return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
+  }
+  return formatOrderDate(from);
+};
+
+const DEFAULT_ORDER: OrderSummaryData = {
+  orderNumber: "ORD-2024-78432",
+  orderDate: "2024-12-14",
+  status: "confirmed",
+  email: "customer@example.com",
+  items: [
+    {
+      id: "1",
+      name: "کفش بژ مینیمال",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+      price: 120.0,
+      quantity: 1,
+      details: [
+        { label: "سایز", value: "42" },
+        { label: "رنگ", value: "بژ" },
+      ],
+    },
+    {
+      id: "2",
+      name: "تاپ آبی گلدوزی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      price: 140.0,
+      quantity: 2,
+      details: [
+        { label: "سایز", value: "M" },
+        { label: "رنگ", value: "آبی" },
+      ],
+    },
+    {
+      id: "3",
+      name: "کلاه فدورا کلاسیک",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+      price: 84.0,
+      quantity: 1,
+      details: [{ label: "سایز", value: "یک سایز" }],
+    },
+  ],
+  subtotal: 484.0,
+  shipping: 12.0,
+  tax: 38.72,
+  discount: 50.0,
+  total: 484.72,
+  shippingAddress: {
+    name: "علی محمدی",
+    street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
+    city: "تهران",
+    state: "تهران",
+    zipCode: "1415783114",
+    country: "ایران",
+  },
+  shippingMethod: "ارسال سریع",
+  estimatedDeliveryFrom: "2024-12-18",
+  estimatedDeliveryTo: "2024-12-20",
+  paymentMethod: {
+    type: "card",
+    lastFour: "4242",
+    cardBrand: "Visa",
+  },
+};
+
+interface OrderSummary2Props {
+  order?: OrderSummaryData;
+  className?: string;
+}
+
+const formatItemDetails = (details: OrderItem["details"]) => {
+  if (!details?.length) return null;
+  return details.map((d) => `${d.label} ${d.value}`).join(" · ");
+};
+
+const OrderSummary2 = ({
+  order = DEFAULT_ORDER,
+  className,
+}: OrderSummary2Props) => {
+  const getStatusBadge = (status: OrderSummaryData["status"]) => {
+    const variants: Record<
+      OrderSummaryData["status"],
+      { label: string; className: string }
+    > = {
+      confirmed: {
+        label: "سفارش تأیید شد",
+        className: "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/10",
+      },
+      processing: {
+        label: "در حال پردازش",
+        className: "bg-amber-500/10 text-amber-600 hover:bg-amber-500/10",
+      },
+      shipped: {
+        label: "ارسال‌شده",
+        className: "bg-blue-500/10 text-blue-600 hover:bg-blue-500/10",
+      },
+      delivered: {
+        label: "تحویل‌شده",
+        className: "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/10",
+      },
+    };
+    return variants[status];
+  };
+
+  const statusBadge = getStatusBadge(order.status);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-emerald-500/10">
+            <CheckCircle
+              className="size-7 text-emerald-600"
+              aria-hidden="true"
+            />
+          </div>
+          <h1 className="mb-2 text-xl font-bold tracking-tight">
+            از خرید شما سپاسگزاریم!
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            تأییدیه به{" "}
+            <span className="font-medium text-foreground" dir="rtl">
+              {order.email}
+            </span>{" "}
+            ارسال شد.
+          </p>
+        </div>
+
+        <Card className="mb-4 shadow-none">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xs text-muted-foreground">سفارش</p>
+                <p className="font-semibold" dir="rtl">
+                  {order.orderNumber}
+                </p>
+              </div>
+              <Badge className={statusBadge.className}>
+                {statusBadge.label}
+              </Badge>
+            </div>
+            <p className="mt-2 text-xs text-muted-foreground">
+              ثبت‌شده در {formatOrderDate(order.orderDate)}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 shadow-none">
+          <CardHeader className="p-4 pb-2">
+            <CardTitle className="flex items-center gap-2 text-sm font-medium">
+              <Package className="size-4" aria-hidden="true" />
+              اقلام (
+              {order.items.length.toLocaleString("fa-IR")})
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-4 pt-2">
+            <div className="space-y-3">
+              {order.items.map((item, index) => (
+                <div key={item.id}>
+                  <div className="flex gap-3">
+                    <div className="w-14 shrink-0">
+                      <AspectRatio
+                        ratio={1}
+                        className="overflow-hidden rounded-md bg-muted"
+                      >
+                        <img
+                          src={item.image}
+                          alt={item.name}
+                          className="size-full object-cover"
+                        />
+                      </AspectRatio>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h3 className="text-sm leading-tight font-medium">
+                        {item.name}
+                      </h3>
+                      {item.details && (
+                        <p className="text-xs text-muted-foreground">
+                          {formatItemDetails(item.details)}
+                        </p>
+                      )}
+                      <div className="mt-1 flex items-center justify-between">
+                        <span className="text-xs text-muted-foreground">
+                          تعداد: {item.quantity.toLocaleString("fa-IR")}
+                        </span>
+                        <span className="text-sm font-medium tabular-nums">
+                          {currencyFormatter.format(
+                            item.price * item.quantity,
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  {index < order.items.length - 1 && (
+                    <Separator className="mt-3" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 shadow-none">
+          <CardContent className="p-4">
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">جمع جزء</span>
+                <span className="tabular-nums">
+                  {currencyFormatter.format(order.subtotal)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">هزینه ارسال</span>
+                <span className="tabular-nums">
+                  {order.shipping === 0
+                    ? "رایگان"
+                    : currencyFormatter.format(order.shipping)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">مالیات</span>
+                <span className="tabular-nums">
+                  {currencyFormatter.format(order.tax)}
+                </span>
+              </div>
+              {order.discount && order.discount > 0 && (
+                <div className="flex justify-between text-emerald-600">
+                  <span>تخفیف</span>
+                  <span className="tabular-nums">
+                    −{currencyFormatter.format(order.discount)}
+                  </span>
+                </div>
+              )}
+              <Separator className="my-2" />
+              <div className="flex justify-between font-semibold">
+                <span>مجموع</span>
+                <span className="tabular-nums">
+                  {currencyFormatter.format(order.total)}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 shadow-none">
+          <CardContent className="p-4">
+            <div className="space-y-4">
+              <div>
+                <div className="mb-2 flex items-center gap-2">
+                  <MapPin
+                    className="size-4 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                  <span className="text-sm font-medium">تحویل</span>
+                </div>
+                <div className="ms-6 text-sm">
+                  <p className="font-medium">{order.shippingAddress.name}</p>
+                  <p className="text-muted-foreground">
+                    {order.shippingAddress.street}
+                  </p>
+                  <p className="text-muted-foreground">
+                    {order.shippingAddress.city}،{" "}
+                    {order.shippingAddress.state}  کد پستی{" "}
+                    <span dir="rtl" className="tabular-nums">
+                      {order.shippingAddress.zipCode}
+                    </span>
+                  </p>
+                </div>
+                <div className="mt-2 ms-6 flex items-center gap-2 text-sm">
+                  <Truck
+                    className="size-3.5 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                  <span className="text-muted-foreground">
+                    {order.shippingMethod} · تحویل تقریبی{" "}
+                    {formatDeliveryEstimate(
+                      order.estimatedDeliveryFrom,
+                      order.estimatedDeliveryTo,
+                    )}
+                  </span>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div>
+                <div className="mb-2 flex items-center gap-2">
+                  <CreditCard
+                    className="size-4 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                  <span className="text-sm font-medium">پرداخت</span>
+                </div>
+                {order.paymentMethod.type === "card" && (
+                  <div className="ms-6 flex items-center gap-2">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                      alt="ویزا"
+                      className="size-6"
+                    />
+                    <span className="text-sm">
+                      {order.paymentMethod.cardBrand} ····{" "}
+                      <span dir="rtl" className="tabular-nums">
+                        {order.paymentMethod.lastFour}
+                      </span>
+                    </span>
+                  </div>
+                )}
+                {order.paymentMethod.type === "paypal" && (
+                  <div className="ms-6 flex items-center gap-2">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/paypal-icon.svg"
+                      alt="پی‌پال"
+                      className="size-6"
+                    />
+                    <span className="text-sm" dir="rtl">
+                      {order.paymentMethod.email}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="space-y-2">
+          <Button className="w-full">
+            <Package className="me-2 size-4" aria-hidden="true" />
+            پیگیری سفارش
+          </Button>
+          <div className="grid grid-cols-2 gap-2">
+            <Button variant="outline">
+              <Download className="me-2 size-4" aria-hidden="true" />
+              رسید
+            </Button>
+            <Button variant="outline">
+              <Printer className="me-2 size-4" aria-hidden="true" />
+              چاپ
+            </Button>
+          </div>
+        </div>
+
+        <p className="mt-6 text-center text-xs text-muted-foreground">
+          سؤالی دارید؟{" "}
+          <a href="#" className="underline underline-offset-2">
+            تماس با پشتیبانی
+          </a>
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export { OrderSummary2 };
diff --git a/blocks/order-summary3.tsx b/blocks/order-summary3.tsx
new file mode 100644
index 0000000..7c9c04b
--- /dev/null
+++ b/blocks/order-summary3.tsx
@@ -0,0 +1,359 @@
+import { CheckCircle, MapPin, Package, Receipt, Truck } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+  details?: { label: string; value: string }[];
+}
+
+interface ShippingAddress {
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  country: string;
+}
+
+interface PaymentMethod {
+  type: "card" | "paypal" | "bank";
+  lastFour?: string;
+  cardBrand?: string;
+  email?: string;
+}
+
+interface OrderSummaryData {
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  status: "confirmed" | "processing" | "shipped" | "delivered";
+  email: string;
+  items: OrderItem[];
+  subtotal: number;
+  shipping: number;
+  tax: number;
+  discount?: number;
+  total: number;
+  shippingAddress: ShippingAddress;
+  shippingMethod: string;
+  /** ISO 8601 date range for estimated delivery */
+  estimatedDeliveryFrom: string;
+  estimatedDeliveryTo?: string;
+  paymentMethod: PaymentMethod;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatDeliveryEstimate = (from: string, to?: string) => {
+  if (to && to !== from) {
+    return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
+  }
+  return formatOrderDate(from);
+};
+
+const DEFAULT_ORDER: OrderSummaryData = {
+  orderNumber: "ORD-2024-78432",
+  orderDate: "2024-12-14",
+  status: "confirmed",
+  email: "customer@example.com",
+  items: [
+    {
+      id: "1",
+      name: "کفش بژ مینیمال",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+      price: 120.0,
+      quantity: 1,
+      details: [
+        { label: "سایز", value: "42" },
+        { label: "رنگ", value: "بژ" },
+      ],
+    },
+    {
+      id: "2",
+      name: "تاپ آبی گلدوزی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      price: 140.0,
+      quantity: 2,
+      details: [
+        { label: "سایز", value: "M" },
+        { label: "رنگ", value: "آبی" },
+      ],
+    },
+    {
+      id: "3",
+      name: "کلاه فدورا کلاسیک",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+      price: 84.0,
+      quantity: 1,
+      details: [{ label: "سایز", value: "یک سایز" }],
+    },
+  ],
+  subtotal: 484.0,
+  shipping: 12.0,
+  tax: 38.72,
+  discount: 50.0,
+  total: 484.72,
+  shippingAddress: {
+    name: "علی محمدی",
+    street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
+    city: "تهران",
+    state: "تهران",
+    zipCode: "1415783114",
+    country: "ایران",
+  },
+  shippingMethod: "ارسال سریع",
+  estimatedDeliveryFrom: "2024-12-18",
+  estimatedDeliveryTo: "2024-12-20",
+  paymentMethod: {
+    type: "card",
+    lastFour: "4242",
+    cardBrand: "Visa",
+  },
+};
+
+interface OrderSummary3Props {
+  order?: OrderSummaryData;
+  className?: string;
+}
+
+const OrderSummary3 = ({
+  order = DEFAULT_ORDER,
+  className,
+}: OrderSummary3Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container">
+        <div className="mb-12 text-center">
+          <div className="mx-auto mb-6 flex size-20 items-center justify-center rounded-full bg-emerald-500">
+            <CheckCircle
+              className="size-10 text-white"
+              strokeWidth={2.5}
+              aria-hidden="true"
+            />
+          </div>
+          <h1 className="mb-3 text-xl font-bold tracking-tight md:text-2xll">
+            سفارش تأیید شد
+          </h1>
+          <p className="text-lg text-muted-foreground">
+            تأییدیه به{" "}
+            <span className="font-semibold text-foreground" dir="rtl">
+              {order.email}
+            </span>{" "}
+            ارسال شد.
+          </p>
+        </div>
+
+        <Card className="mb-10 border-2 shadow-none">
+          <CardContent className="grid grid-cols-2 divide-x divide-y p-0 md:grid-cols-4 md:divide-y-0">
+            <div className="p-5">
+              <p className="text-xs font-medium tracking-wider text-muted-foreground">
+                شناسه سفارش
+              </p>
+              <p className="mt-1 text-lg font-bold" dir="rtl">
+                {order.orderNumber}
+              </p>
+            </div>
+
+            <div className="p-5">
+              <p className="text-xs font-medium tracking-wider text-muted-foreground">
+                تاریخ سفارش
+              </p>
+              <p className="mt-1 text-lg font-bold">
+                {formatOrderDate(order.orderDate)}
+              </p>
+            </div>
+
+            <div className="p-5">
+              <p className="text-xs font-medium tracking-wider text-muted-foreground">
+                تحویل
+              </p>
+              <p className="mt-1 text-lg font-bold">
+                {formatDeliveryEstimate(
+                  order.estimatedDeliveryFrom,
+                  order.estimatedDeliveryTo,
+                )}
+              </p>
+            </div>
+
+            <div className="p-5">
+              <p className="text-xs font-medium tracking-wider text-muted-foreground">
+                پرداخت
+              </p>
+              <p className="mt-1 text-lg font-bold" dir="rtl">
+                {order.paymentMethod.cardBrand} ****
+                {order.paymentMethod.lastFour}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="mb-10">
+          <h2 className="mb-6 text-xl font-bold">اقلام شما</h2>
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {order.items.map((item) => (
+              <Card
+                key={item.id}
+                className="overflow-hidden border-2 p-0 shadow-none"
+              >
+                <AspectRatio ratio={1} className="bg-muted">
+                  <img
+                    src={item.image}
+                    alt={item.name}
+                    className="size-full object-cover"
+                  />
+                </AspectRatio>
+                <CardContent className="p-5">
+                  <h3 className="text-lg font-bold">{item.name}</h3>
+                  {item.details && (
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {item.details.map((d, i) => (
+                        <span key={d.label}>
+                          {d.label}: {d.value}
+                          {i < item.details!.length - 1 && " · "}
+                        </span>
+                      ))}
+                    </p>
+                  )}
+                  <div className="mt-3 flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">
+                      تعداد: {item.quantity.toLocaleString("fa-IR")}
+                    </span>
+                    <span className="text-xl font-bold tabular-nums">
+                      {currencyFormatter.format(item.price * item.quantity)}
+                    </span>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          <Card className="border-2 shadow-none">
+            <CardContent className="p-6">
+              <div className="mb-4 flex items-center gap-3">
+                <div className="flex size-12 items-center justify-center rounded-xl bg-primary/10">
+                  <MapPin className="size-6 text-primary" aria-hidden="true" />
+                </div>
+                <h3 className="text-xl font-bold">آدرس ارسال</h3>
+              </div>
+              <div className="space-y-1 text-muted-foreground">
+                <p className="font-semibold text-foreground">
+                  {order.shippingAddress.name}
+                </p>
+                <p>{order.shippingAddress.street}</p>
+                <p>
+                  {order.shippingAddress.city}،{" "}
+                  {order.shippingAddress.state}  کد پستی{" "}
+                  <span dir="rtl" className="tabular-nums">
+                    {order.shippingAddress.zipCode}
+                  </span>
+                </p>
+                <p>{order.shippingAddress.country}</p>
+              </div>
+              <Separator className="my-4" />
+              <div className="flex items-center gap-2 text-sm">
+                <Package
+                  className="size-4 text-muted-foreground"
+                  aria-hidden="true"
+                />
+                <span className="font-medium">{order.shippingMethod}</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-2 shadow-none">
+            <CardContent className="p-6">
+              <div className="mb-4 flex items-center gap-3">
+                <div className="flex size-12 items-center justify-center rounded-xl bg-primary/10">
+                  <Receipt
+                    className="size-6 text-primary"
+                    aria-hidden="true"
+                  />
+                </div>
+                <h3 className="text-xl font-bold">خلاصه سفارش</h3>
+              </div>
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">جمع جزء</span>
+                  <span className="font-medium tabular-nums">
+                    {currencyFormatter.format(order.subtotal)}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">هزینه ارسال</span>
+                  <span className="font-medium tabular-nums">
+                    {order.shipping === 0
+                      ? "رایگان"
+                      : currencyFormatter.format(order.shipping)}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">مالیات</span>
+                  <span className="font-medium tabular-nums">
+                    {currencyFormatter.format(order.tax)}
+                  </span>
+                </div>
+                {order.discount && order.discount > 0 && (
+                  <div className="flex justify-between text-emerald-600">
+                    <span>تخفیف</span>
+                    <span className="font-medium tabular-nums">
+                      −{currencyFormatter.format(order.discount)}
+                    </span>
+                  </div>
+                )}
+                <Separator />
+                <div className="flex items-center justify-between pt-2">
+                  <span className="text-xl font-bold">مبلغ پرداخت‌شده</span>
+                  <span className="text-xl font-bold tabular-nums">
+                    {currencyFormatter.format(order.total)}
+                  </span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+          <Button size="lg" className="w-full px-8 sm:w-auto">
+            <Truck className="me-2 size-5" aria-hidden="true" />
+            پیگیری سفارش
+          </Button>
+          <Button size="lg" variant="outline" className="w-full px-8 sm:w-auto">
+            ادامه خرید
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { OrderSummary3 };
diff --git a/blocks/order-summary4.tsx b/blocks/order-summary4.tsx
new file mode 100644
index 0000000..2869dcb
--- /dev/null
+++ b/blocks/order-summary4.tsx
@@ -0,0 +1,709 @@
+"use client";
+
+import {
+  Box,
+  Check,
+  CheckCircle,
+  CreditCard,
+  Download,
+  Home,
+  MapPin,
+  Package,
+  Printer,
+  Receipt,
+  Truck,
+} from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+  details?: { label: string; value: string }[];
+}
+
+interface ShippingAddress {
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  country: string;
+}
+
+interface PaymentMethod {
+  type: "card" | "paypal" | "bank";
+  lastFour?: string;
+  cardBrand?: string;
+  email?: string;
+}
+
+interface StepContent {
+  title: string;
+  description: string;
+  details: { label: string; value: string }[];
+  icon: "receipt" | "box" | "truck" | "home";
+}
+
+interface TimelineStep {
+  id: string;
+  label: string;
+  description: string;
+  /** ISO 8601 datetime */
+  date: string;
+  completed: boolean;
+  current: boolean;
+  content: StepContent;
+}
+
+interface OrderSummaryData {
+  orderNumber: string;
+  /** ISO 8601 date (YYYY-MM-DD) */
+  orderDate: string;
+  status: "confirmed" | "processing" | "shipped" | "delivered";
+  email: string;
+  items: OrderItem[];
+  subtotal: number;
+  shipping: number;
+  tax: number;
+  discount?: number;
+  total: number;
+  shippingAddress: ShippingAddress;
+  shippingMethod: string;
+  estimatedDeliveryFrom: string;
+  estimatedDeliveryTo?: string;
+  paymentMethod: PaymentMethod;
+  timeline: TimelineStep[];
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const dateTimeFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatStepDate = (isoDateTime: string) =>
+  dateTimeFormatter.format(new Date(isoDateTime));
+
+const formatDeliveryEstimate = (from: string, to?: string) => {
+  if (to && to !== from) {
+    return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
+  }
+  return formatOrderDate(from);
+};
+
+const formatItemDetails = (details: OrderItem["details"]) => {
+  if (!details?.length) return null;
+  return details.map((d) => `${d.label} ${d.value}`).join(" · ");
+};
+
+const DEFAULT_ORDER: OrderSummaryData = {
+  orderNumber: "ORD-2024-78432",
+  orderDate: "2024-12-14",
+  status: "delivered",
+  email: "customer@example.com",
+  items: [
+    {
+      id: "1",
+      name: "کفش بژ مینیمال",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+      price: 120.0,
+      quantity: 1,
+      details: [
+        { label: "سایز", value: "42" },
+        { label: "رنگ", value: "بژ" },
+      ],
+    },
+    {
+      id: "2",
+      name: "تاپ آبی گلدوزی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      price: 140.0,
+      quantity: 2,
+      details: [
+        { label: "سایز", value: "M" },
+        { label: "رنگ", value: "آبی" },
+      ],
+    },
+    {
+      id: "3",
+      name: "کلاه فدورا کلاسیک",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+      price: 84.0,
+      quantity: 1,
+      details: [{ label: "سایز", value: "یک سایز" }],
+    },
+  ],
+  subtotal: 484.0,
+  shipping: 12.0,
+  tax: 38.72,
+  discount: 50.0,
+  total: 484.72,
+  shippingAddress: {
+    name: "علی محمدی",
+    street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
+    city: "تهران",
+    state: "تهران",
+    zipCode: "1415783114",
+    country: "ایران",
+  },
+  shippingMethod: "ارسال سریع",
+  estimatedDeliveryFrom: "2024-12-18",
+  estimatedDeliveryTo: "2024-12-20",
+  paymentMethod: {
+    type: "card",
+    lastFour: "4242",
+    cardBrand: "Visa",
+  },
+  timeline: [
+    {
+      id: "1",
+      label: "ثبت سفارش",
+      description: "سفارش شما دریافت شد",
+      date: "2024-12-14T14:30:00",
+      completed: true,
+      current: false,
+      content: {
+        title: "سفارش تأیید شد",
+        description:
+          "سفارش شما دریافت شد و ایمیل تأیید ارسال گردید. پرداخت با موفقیت انجام شد.",
+        icon: "receipt",
+        details: [
+          { label: "شماره سفارش", value: "ORD-2024-78432" },
+          { label: "روش پرداخت", value: "کارت بانکی •••• 4242" },
+          {
+            label: "آدرس صورتحساب",
+            value: "خیابان ولیعصر، تهران",
+          },
+          {
+            label: "مجموع سفارش",
+            value: currencyFormatter.format(484.72),
+          },
+        ],
+      },
+    },
+    {
+      id: "2",
+      label: "آماده‌سازی",
+      description: "در حال آماده‌سازی اقلام",
+      date: "2024-12-14T16:15:00",
+      completed: true,
+      current: false,
+      content: {
+        title: "آماده‌سازی سفارش",
+        description:
+          "تیم انبار در حال جمع‌آوری و بسته‌بندی اقلام شماست. قبل از ارسال، کنترل کیفیت انجام می‌شود.",
+        icon: "box",
+        details: [
+          { label: "انبار", value: "مرکز توزیع تهران" },
+          { label: "اقلام بسته‌بندی‌شده", value: "۳ از ۳ قلم" },
+          { label: "کنترل کیفیت", value: "تأیید شد" },
+          { label: "بسته‌بندی", value: "مواد دوستدار محیط زیست" },
+        ],
+      },
+    },
+    {
+      id: "3",
+      label: "ارسال‌شده",
+      description: "در مسیر تحویل",
+      date: "2024-12-15T09:00:00",
+      completed: true,
+      current: false,
+      content: {
+        title: "ارسال به مقصد",
+        description:
+          "بسته شما در راه است! با شماره رهگیری زیر می‌توانید وضعیت را لحظه‌ای پیگیری کنید.",
+        icon: "truck",
+        details: [
+          { label: "شرکت حمل", value: "پست پیشتاز" },
+          {
+            label: "شماره رهگیری",
+            value: "1Z999AA10123456784",
+          },
+          { label: "تحویل تقریبی", value: "۱۷ آذر ۱۴۰۳" },
+          { label: "موقعیت فعلی", value: "تهران  در حال انتقال" },
+        ],
+      },
+    },
+    {
+      id: "4",
+      label: "تحویل‌شده",
+      description: "بسته تحویل داده شد",
+      date: "2024-12-17T11:45:00",
+      completed: true,
+      current: true,
+      content: {
+        title: "تحویل موفق",
+        description:
+          "بسته شما تحویل داده شد! امیدواریم از خرید راضی باشید. ثبت نظر را فراموش نکنید.",
+        icon: "home",
+        details: [
+          { label: "محل تحویل", value: "درِ ورودی" },
+          { label: "تحویل‌گیرنده", value: "ع. محمدی" },
+          { label: "زمان تحویل", value: "۱۷ آذر ۱۴۰۳، ساعت ۱۱:۴۵" },
+          { label: "عکس تحویل", value: "در بخش رهگیری موجود است" },
+        ],
+      },
+    },
+  ],
+};
+
+interface OrderSummary4Props {
+  order?: OrderSummaryData;
+  className?: string;
+}
+
+const OrderSummary4 = ({
+  order = DEFAULT_ORDER,
+  className,
+}: OrderSummary4Props) => {
+  const [selectedStepIndex, setSelectedStepIndex] = useState(
+    order.timeline.findIndex((step) => step.current),
+  );
+
+  const selectStep = (index: number) => {
+    setSelectedStepIndex(index);
+  };
+
+  const selectedStep = order.timeline[selectedStepIndex];
+  const completedSteps = order.timeline.filter((step) => step.completed).length;
+  const progressPercentage = (completedSteps / order.timeline.length) * 100;
+  const itemCountLabel =
+    order.items.length === 1
+      ? "یک قلم"
+      : `${order.items.length.toLocaleString("fa-IR")} قلم`;
+
+  const getStepIcon = (iconType: StepContent["icon"]) => {
+    switch (iconType) {
+      case "receipt":
+        return <Receipt className="size-5" aria-hidden="true" />;
+      case "box":
+        return <Box className="size-5" aria-hidden="true" />;
+      case "truck":
+        return <Truck className="size-5" aria-hidden="true" />;
+      case "home":
+        return <Home className="size-5" aria-hidden="true" />;
+    }
+  };
+
+  const isTrackingDetail = (label: string) =>
+    label === "شماره رهگیری" || label === "شماره سفارش";
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-3xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-emerald-500/10">
+            <CheckCircle
+              className="size-7 text-emerald-600"
+              aria-hidden="true"
+            />
+          </div>
+          <h1 className="mb-1 text-xl font-bold tracking-tight md:text-3xl">
+            از خرید شما سپاسگزاریم!
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            سفارش{" "}
+            <span className="font-medium" dir="rtl">
+              {order.orderNumber}
+            </span>{" "}
+            · {formatOrderDate(order.orderDate)}
+          </p>
+        </div>
+
+        <Card className="mb-6 shadow-none">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">وضعیت سفارش</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="mb-6">
+              <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full bg-emerald-500 transition-all duration-500"
+                  style={{ width: `${progressPercentage}%` }}
+                />
+              </div>
+              <p className="mt-2 text-xs text-muted-foreground">
+                {completedSteps === order.timeline.length
+                  ? "سفارش تحویل داده شد!"
+                  : `مرحله ${completedSteps.toLocaleString("fa-IR")} از ${order.timeline.length.toLocaleString("fa-IR")}`}
+              </p>
+            </div>
+
+            <div className="hidden md:block">
+              <div className="relative flex justify-between">
+                {order.timeline.map((step, index) => (
+                  <div
+                    key={step.id}
+                    className={cn(
+                      "flex flex-col items-center text-center",
+                      index === 0 && "items-start text-start",
+                      index === order.timeline.length - 1 &&
+                        "items-end text-end",
+                    )}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => selectStep(index)}
+                      aria-label={`${step.label}، ${formatStepDate(step.date)}`}
+                      aria-current={
+                        selectedStepIndex === index ? "step" : undefined
+                      }
+                      className={cn(
+                        "mb-2 flex size-10 items-center justify-center rounded-full border-2 transition-all hover:scale-110",
+                        step.completed
+                          ? "border-emerald-500 bg-emerald-500 text-white"
+                          : "border-muted bg-muted hover:border-emerald-300",
+                        selectedStepIndex === index &&
+                          "ring-2 ring-emerald-500 ring-offset-2 ring-offset-background",
+                      )}
+                    >
+                      {step.completed ? (
+                        <Check className="size-5" aria-hidden="true" />
+                      ) : (
+                        <span className="text-sm font-medium text-muted-foreground">
+                          {(index + 1).toLocaleString("fa-IR")}
+                        </span>
+                      )}
+                    </button>
+                    <p
+                      className={cn(
+                        "text-sm font-medium",
+                        selectedStepIndex === index
+                          ? "text-emerald-600"
+                          : step.completed
+                            ? "text-foreground"
+                            : "text-muted-foreground",
+                      )}
+                    >
+                      {step.label}
+                    </p>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {formatStepDate(step.date)}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="md:hidden">
+              <div className="space-y-3">
+                {order.timeline.map((step, index) => (
+                  <button
+                    key={step.id}
+                    type="button"
+                    onClick={() => selectStep(index)}
+                    aria-label={`${step.label}، ${formatStepDate(step.date)}`}
+                    aria-current={
+                      selectedStepIndex === index ? "step" : undefined
+                    }
+                    className={cn(
+                      "flex w-full gap-3 rounded-lg p-2 text-start transition-colors",
+                      selectedStepIndex === index
+                        ? "bg-emerald-500/10"
+                        : "hover:bg-muted",
+                    )}
+                  >
+                    <div className="flex flex-col items-center">
+                      <div
+                        className={cn(
+                          "flex size-8 shrink-0 items-center justify-center rounded-full border-2",
+                          step.completed
+                            ? "border-emerald-500 bg-emerald-500 text-white"
+                            : "border-muted bg-muted",
+                          selectedStepIndex === index &&
+                            "ring-2 ring-emerald-500 ring-offset-1",
+                        )}
+                      >
+                        {step.completed ? (
+                          <Check className="size-4" aria-hidden="true" />
+                        ) : (
+                          <span className="text-xs font-medium text-muted-foreground">
+                            {(index + 1).toLocaleString("fa-IR")}
+                          </span>
+                        )}
+                      </div>
+                      {index < order.timeline.length - 1 && (
+                        <div
+                          className={cn(
+                            "mt-1 h-6 w-0.5",
+                            step.completed ? "bg-emerald-500" : "bg-muted",
+                          )}
+                        />
+                      )}
+                    </div>
+                    <div className="min-w-0 flex-1 pb-2">
+                      <p
+                        className={cn(
+                          "font-medium",
+                          selectedStepIndex === index
+                            ? "text-emerald-600"
+                            : step.completed
+                              ? "text-foreground"
+                              : "text-muted-foreground",
+                        )}
+                      >
+                        {step.label}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {step.description}
+                      </p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        {formatStepDate(step.date)}
+                      </p>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="mt-6 rounded-lg border bg-muted/30 p-4">
+              <div className="mb-4 flex items-center gap-3">
+                <div className="flex size-10 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-600">
+                  {getStepIcon(selectedStep.content.icon)}
+                </div>
+                <div>
+                  <h3 className="font-semibold">
+                    {selectedStep.content.title}
+                  </h3>
+                  <p className="text-xs text-muted-foreground">
+                    {formatStepDate(selectedStep.date)}
+                  </p>
+                </div>
+              </div>
+              <p className="mb-4 text-sm text-muted-foreground">
+                {selectedStep.content.description}
+              </p>
+              <div className="grid gap-2 sm:grid-cols-2">
+                {selectedStep.content.details.map((detail) => (
+                  <div
+                    key={detail.label}
+                    className="rounded-md bg-background p-3"
+                  >
+                    <p className="text-xs text-muted-foreground">
+                      {detail.label}
+                    </p>
+                    <p
+                      className="text-sm font-medium"
+                      dir={isTrackingDetail(detail.label) ? "ltr" : undefined}
+                    >
+                      {detail.value}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-6 shadow-none">
+          <CardHeader className="pb-4">
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Package className="size-4" aria-hidden="true" />
+              {itemCountLabel}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {order.items.map((item, index) => (
+              <div key={item.id}>
+                <div className="flex gap-4">
+                  <div className="w-16 shrink-0">
+                    <AspectRatio
+                      ratio={1}
+                      className="overflow-hidden rounded-md bg-muted"
+                    >
+                      <img
+                        src={item.image}
+                        alt={item.name}
+                        className="size-full object-cover"
+                      />
+                    </AspectRatio>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-start justify-between gap-2">
+                      <div>
+                        <h3 className="text-sm font-medium">{item.name}</h3>
+                        {item.details && (
+                          <p className="text-xs text-muted-foreground">
+                            {formatItemDetails(item.details)}
+                          </p>
+                        )}
+                        <p className="text-xs text-muted-foreground">
+                          تعداد: {item.quantity.toLocaleString("fa-IR")}
+                        </p>
+                      </div>
+                      <p className="text-sm font-medium tabular-nums">
+                        {currencyFormatter.format(item.price * item.quantity)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                {index < order.items.length - 1 && (
+                  <Separator className="mt-4" />
+                )}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <div className="mb-6 grid gap-6 md:grid-cols-2">
+          <Card className="shadow-none">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-base">
+                <MapPin className="size-4" aria-hidden="true" />
+                تحویل
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div>
+                <p className="text-sm font-medium">
+                  {order.shippingAddress.name}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {order.shippingAddress.street}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {order.shippingAddress.city}،{" "}
+                  {order.shippingAddress.state}  کد پستی{" "}
+                  <span dir="rtl" className="tabular-nums">
+                    {order.shippingAddress.zipCode}
+                  </span>
+                </p>
+              </div>
+              <Separator />
+              <div className="flex items-center gap-2 text-sm">
+                <Truck className="size-4 text-muted-foreground" aria-hidden="true" />
+                <span>{order.shippingMethod}</span>
+              </div>
+              <Badge variant="secondary" className="text-xs">
+                تحویل تقریبی:{" "}
+                {formatDeliveryEstimate(
+                  order.estimatedDeliveryFrom,
+                  order.estimatedDeliveryTo,
+                )}
+              </Badge>
+            </CardContent>
+          </Card>
+
+          <Card className="shadow-none">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-base">
+                <CreditCard className="size-4" aria-hidden="true" />
+                پرداخت
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {order.paymentMethod.type === "card" && (
+                <div className="flex items-center gap-2">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
+                    alt="ویزا"
+                    className="size-6"
+                  />
+                  <span className="text-sm" dir="rtl">
+                    •••• {order.paymentMethod.lastFour}
+                  </span>
+                </div>
+              )}
+              <Separator />
+              <div className="space-y-1.5 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">جمع جزء</span>
+                  <span className="tabular-nums">
+                    {currencyFormatter.format(order.subtotal)}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">هزینه ارسال</span>
+                  <span className="tabular-nums">
+                    {order.shipping === 0
+                      ? "رایگان"
+                      : currencyFormatter.format(order.shipping)}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">مالیات</span>
+                  <span className="tabular-nums">
+                    {currencyFormatter.format(order.tax)}
+                  </span>
+                </div>
+                {order.discount && order.discount > 0 && (
+                  <div className="flex justify-between text-emerald-600">
+                    <span>تخفیف</span>
+                    <span className="tabular-nums">
+                      −{currencyFormatter.format(order.discount)}
+                    </span>
+                  </div>
+                )}
+              </div>
+              <Separator />
+              <div className="flex justify-between font-semibold">
+                <span>مجموع</span>
+                <span className="tabular-nums">
+                  {currencyFormatter.format(order.total)}
+                </span>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-3">
+          <Button>
+            <Package className="me-2 size-4" aria-hidden="true" />
+            پیگیری سفارش
+          </Button>
+          <Button variant="outline">
+            <Download className="me-2 size-4" aria-hidden="true" />
+            دانلود رسید
+          </Button>
+          <Button variant="ghost">
+            <Printer className="me-2 size-4" aria-hidden="true" />
+            چاپ
+          </Button>
+        </div>
+
+        <p className="mt-8 text-center text-sm text-muted-foreground">
+          ایمیل تأیید به{" "}
+          <span className="font-medium text-foreground" dir="rtl">
+            {order.email}
+          </span>{" "}
+          ارسال شد.
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export { OrderSummary4 };
diff --git a/blocks/order-summary5.tsx b/blocks/order-summary5.tsx
new file mode 100644
index 0000000..2584490
--- /dev/null
+++ b/blocks/order-summary5.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import { CheckCircle, Package } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+}
+
+interface OrderSummaryData {
+  orderNumber: string;
+  items: OrderItem[];
+  subtotal: number;
+  shipping: number;
+  tax: number;
+  discount?: number;
+  total: number;
+  /** ISO 8601 date range for estimated delivery */
+  estimatedDeliveryFrom: string;
+  estimatedDeliveryTo?: string;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatDeliveryEstimate = (from: string, to?: string) => {
+  if (to && to !== from) {
+    return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
+  }
+  return formatOrderDate(from);
+};
+
+const DEFAULT_ORDER: OrderSummaryData = {
+  orderNumber: "ORD-2024-78432",
+  items: [
+    {
+      id: "1",
+      name: "کفش بژ مینیمال",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+      price: 120.0,
+      quantity: 1,
+    },
+    {
+      id: "2",
+      name: "تاپ آبی گلدوزی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      price: 140.0,
+      quantity: 2,
+    },
+    {
+      id: "3",
+      name: "کلاه فدورا کلاسیک",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+      price: 84.0,
+      quantity: 1,
+    },
+  ],
+  subtotal: 484.0,
+  shipping: 12.0,
+  tax: 38.72,
+  discount: 50.0,
+  total: 484.72,
+  estimatedDeliveryFrom: "2024-12-18",
+  estimatedDeliveryTo: "2024-12-20",
+};
+
+interface OrderSummary5Props {
+  order?: OrderSummaryData;
+}
+
+const OrderSummary5 = ({ order = DEFAULT_ORDER }: OrderSummary5Props) => {
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className="flex min-h-[400px] items-center justify-center p-8"
+    >
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button size="lg">مشاهده خلاصه سفارش</Button>
+        </SheetTrigger>
+        <SheetContent
+          dir="rtl"
+          lang="fa"
+          side="right"
+          className="flex w-full flex-col px-6 sm:max-w-md"
+        >
+          <SheetHeader className="px-0 text-start">
+            <div className="flex items-center gap-3">
+              <div className="flex size-10 items-center justify-center rounded-full bg-emerald-500">
+                <CheckCircle
+                  className="size-5 text-white"
+                  aria-hidden="true"
+                />
+              </div>
+              <div>
+                <SheetTitle>سفارش تأیید شد</SheetTitle>
+                <SheetDescription dir="rtl">
+                  {order.orderNumber}
+                </SheetDescription>
+              </div>
+            </div>
+          </SheetHeader>
+
+          <ScrollArea className="-mx-6 flex-1 px-6">
+            <div className="space-y-3 py-4">
+              {order.items.map((item) => (
+                <div key={item.id} className="flex gap-3">
+                  <div className="w-16 shrink-0">
+                    <AspectRatio
+                      ratio={1}
+                      className="overflow-hidden rounded-md bg-muted"
+                    >
+                      <img
+                        src={item.image}
+                        alt={item.name}
+                        className="size-full object-cover"
+                      />
+                    </AspectRatio>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate font-medium">{item.name}</p>
+                    <p className="text-sm text-muted-foreground">
+                      تعداد: {item.quantity.toLocaleString("fa-IR")}
+                    </p>
+                  </div>
+                  <p className="font-semibold tabular-nums">
+                    {currencyFormatter.format(item.price * item.quantity)}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+            <Separator />
+
+            <div className="space-y-2 py-4 text-sm">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">جمع جزء</span>
+                <span className="tabular-nums">
+                  {currencyFormatter.format(order.subtotal)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">هزینه ارسال</span>
+                <span className="tabular-nums">
+                  {order.shipping === 0
+                    ? "رایگان"
+                    : currencyFormatter.format(order.shipping)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">مالیات</span>
+                <span className="tabular-nums">
+                  {currencyFormatter.format(order.tax)}
+                </span>
+              </div>
+              {order.discount && order.discount > 0 && (
+                <div className="flex justify-between text-emerald-600">
+                  <span>تخفیف</span>
+                  <span className="tabular-nums">
+                    −{currencyFormatter.format(order.discount)}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            <Separator />
+
+            <div className="flex items-center justify-between py-4">
+              <span className="text-lg font-bold">مجموع</span>
+              <span className="text-xl font-bold tabular-nums">
+                {currencyFormatter.format(order.total)}
+              </span>
+            </div>
+
+            <div className="flex items-center gap-2 rounded-lg bg-muted p-3 text-sm">
+              <Package
+                className="size-4 shrink-0 text-muted-foreground"
+                aria-hidden="true"
+              />
+              <span>
+                تحویل تقریبی:{" "}
+                {formatDeliveryEstimate(
+                  order.estimatedDeliveryFrom,
+                  order.estimatedDeliveryTo,
+                )}
+              </span>
+            </div>
+          </ScrollArea>
+
+          <SheetFooter className="flex-col gap-2 px-0 sm:flex-col">
+            <Button className="w-full">پیگیری سفارش</Button>
+            <Button variant="outline" className="w-full">
+              ادامه خرید
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+};
+
+export { OrderSummary5 };
diff --git a/blocks/order-summary6.tsx b/blocks/order-summary6.tsx
new file mode 100644
index 0000000..659b831
--- /dev/null
+++ b/blocks/order-summary6.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { CheckCircle } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+}
+
+interface OrderSummaryData {
+  orderNumber: string;
+  items: OrderItem[];
+  subtotal: number;
+  shipping: number;
+  total: number;
+  /** ISO 8601 date range for estimated delivery */
+  estimatedDeliveryFrom: string;
+  estimatedDeliveryTo?: string;
+}
+
+const currencyFormatter = new Intl.NumberFormat("fa-IR", {
+  style: "currency",
+  currency: "IRR",
+});
+
+const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+const formatOrderDate = (isoDate: string) =>
+  dateFormatter.format(new Date(isoDate + "T12:00:00"));
+
+const formatDeliveryEstimate = (from: string, to?: string) => {
+  if (to && to !== from) {
+    return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
+  }
+  return formatOrderDate(from);
+};
+
+const DEFAULT_ORDER: OrderSummaryData = {
+  orderNumber: "ORD-2024-78432",
+  items: [
+    {
+      id: "1",
+      name: "کفش بژ مینیمال",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+      price: 120.0,
+      quantity: 1,
+    },
+    {
+      id: "2",
+      name: "تاپ آبی گلدوزی",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      price: 140.0,
+      quantity: 2,
+    },
+  ],
+  subtotal: 400.0,
+  shipping: 12.0,
+  total: 412.0,
+  estimatedDeliveryFrom: "2024-12-18",
+  estimatedDeliveryTo: "2024-12-20",
+};
+
+interface OrderSummary6Props {
+  order?: OrderSummaryData;
+}
+
+const OrderSummary6 = ({ order = DEFAULT_ORDER }: OrderSummary6Props) => {
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className="flex min-h-[400px] items-center justify-center p-8"
+    >
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button size="lg">مشاهده تأیید سفارش</Button>
+        </DialogTrigger>
+        <DialogContent dir="rtl" lang="fa" className="sm:max-w-md">
+          <DialogHeader className="text-center sm:text-center">
+            <div className="mx-auto mb-2 flex size-12 items-center justify-center rounded-full bg-emerald-500">
+              <CheckCircle className="size-6 text-white" aria-hidden="true" />
+            </div>
+            <DialogTitle className="text-xl">سفارش تأیید شد!</DialogTitle>
+            <DialogDescription>
+              سفارش{" "}
+              <span dir="rtl" className="font-medium">
+                {order.orderNumber}
+              </span>{" "}
+              · تحویل{" "}
+              {formatDeliveryEstimate(
+                order.estimatedDeliveryFrom,
+                order.estimatedDeliveryTo,
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 py-2">
+            {order.items.map((item) => (
+              <div key={item.id} className="flex gap-3">
+                <div className="w-12 shrink-0">
+                  <AspectRatio
+                    ratio={1}
+                    className="overflow-hidden rounded-md bg-muted"
+                  >
+                    <img
+                      src={item.image}
+                      alt={item.name}
+                      className="size-full object-cover"
+                    />
+                  </AspectRatio>
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium">{item.name}</p>
+                  <p className="text-xs text-muted-foreground">
+                    تعداد: {item.quantity.toLocaleString("fa-IR")}
+                  </p>
+                </div>
+                <p className="text-sm font-semibold tabular-nums">
+                  {currencyFormatter.format(item.price * item.quantity)}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <Separator />
+
+          <div className="space-y-1.5 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">جمع جزء</span>
+              <span className="tabular-nums">
+                {currencyFormatter.format(order.subtotal)}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">هزینه ارسال</span>
+              <span className="tabular-nums">
+                {order.shipping === 0
+                  ? "رایگان"
+                  : currencyFormatter.format(order.shipping)}
+              </span>
+            </div>
+            <div className="flex justify-between pt-2 text-base font-bold">
+              <span>مجموع</span>
+              <span className="tabular-nums">
+                {currencyFormatter.format(order.total)}
+              </span>
+            </div>
+          </div>
+
+          <DialogFooter className="flex-col gap-2 sm:flex-col">
+            <Button className="w-full">پیگیری سفارش</Button>
+            <Button variant="ghost" className="w-full">
+              ادامه خرید
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export { OrderSummary6 };
diff --git a/blocks/payment-methods1.tsx b/blocks/payment-methods1.tsx
new file mode 100644
index 0000000..73e1957
--- /dev/null
+++ b/blocks/payment-methods1.tsx
@@ -0,0 +1,607 @@
+"use client";
+
+import {
+  CreditCard,
+  MoreVertical,
+  Pencil,
+  Plus,
+  Save,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface PaymentMethod {
+  id: string;
+  type: "visa" | "mastercard" | "amex" | "paypal";
+  last4?: string;
+  expiryMonth?: number;
+  expiryYear?: number;
+  email?: string;
+  isDefault: boolean;
+}
+
+const DEFAULT_METHODS: PaymentMethod[] = [
+  {
+    id: "1",
+    type: "visa",
+    last4: "4242",
+    expiryMonth: 12,
+    expiryYear: 2026,
+    isDefault: true,
+  },
+  {
+    id: "2",
+    type: "mastercard",
+    last4: "8888",
+    expiryMonth: 8,
+    expiryYear: 2025,
+    isDefault: false,
+  },
+  {
+    id: "3",
+    type: "paypal",
+    email: "user@example.com",
+    isDefault: false,
+  },
+];
+
+const PAYMENT_LOGOS: Record<string, string> = {
+  visa: "/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg",
+  mastercard:
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg",
+  amex: "/block-media/shadcnblocks/block/ecommerce/payment-methods/amex.svg",
+  paypal:
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg",
+};
+
+const PAYMENT_TYPE_LABELS: Record<PaymentMethod["type"], string> = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  amex: "American Express",
+  paypal: "PayPal",
+};
+
+const formatCardLast4 = (last4?: string) => {
+  if (!last4) return "";
+  return Number(last4).toLocaleString("fa-IR", { useGrouping: false });
+};
+
+const formatExpiry = (month?: number, year?: number) => {
+  if (!month || !year) return "";
+  return `انقضا: ${month.toLocaleString("fa-IR")}/${year.toLocaleString("fa-IR")}`;
+};
+
+interface PaymentMethods1Props {
+  methods?: PaymentMethod[];
+  className?: string;
+}
+
+const PaymentMethods1 = ({
+  methods: initialMethods = DEFAULT_METHODS,
+  className,
+}: PaymentMethods1Props) => {
+  const [methods, setMethods] = useState(initialMethods);
+  const [selectedId, setSelectedId] = useState(
+    methods.find((m) => m.isDefault)?.id || methods[0]?.id,
+  );
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [isAddingNew, setIsAddingNew] = useState(false);
+  const [editForm, setEditForm] = useState<Partial<PaymentMethod>>({});
+
+  const startEditing = (method: PaymentMethod) => {
+    setEditingId(method.id);
+    setEditForm({ ...method });
+  };
+
+  const cancelEditing = () => {
+    setEditingId(null);
+    setEditForm({});
+  };
+
+  const saveEdit = () => {
+    if (
+      editingId &&
+      editForm.type &&
+      (editForm.type === "paypal"
+        ? editForm.email
+        : editForm.last4 && editForm.expiryMonth && editForm.expiryYear)
+    ) {
+      setMethods((prev) =>
+        prev.map((method) =>
+          method.id === editingId
+            ? ({
+                ...method,
+                ...editForm,
+              } as PaymentMethod)
+            : method,
+        ),
+      );
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  const startAddingNew = () => {
+    setIsAddingNew(true);
+    setEditForm({
+      type: "visa",
+      last4: "",
+      expiryMonth: undefined,
+      expiryYear: undefined,
+      email: undefined,
+      isDefault: methods.length === 0,
+    });
+  };
+
+  const cancelAddingNew = () => {
+    setIsAddingNew(false);
+    setEditForm({});
+  };
+
+  const saveNewMethod = () => {
+    if (
+      editForm.type &&
+      (editForm.type === "paypal"
+        ? editForm.email
+        : editForm.last4 && editForm.expiryMonth && editForm.expiryYear)
+    ) {
+      const newMethod: PaymentMethod = {
+        id: Date.now().toString(),
+        type: editForm.type as "visa" | "mastercard" | "amex" | "paypal",
+        last4: editForm.last4,
+        expiryMonth: editForm.expiryMonth,
+        expiryYear: editForm.expiryYear,
+        email: editForm.email,
+        isDefault: methods.length === 0,
+      };
+      setMethods((prev) => [...prev, newMethod]);
+      setIsAddingNew(false);
+      setEditForm({});
+      if (methods.length === 0) {
+        setSelectedId(newMethod.id);
+      }
+    }
+  };
+
+  const deleteMethod = (id: string) => {
+    setMethods((prev) => prev.filter((method) => method.id !== id));
+    if (selectedId === id && methods.length > 1) {
+      setSelectedId(methods.find((m) => m.id !== id)?.id || "");
+    }
+    if (editingId === id) {
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container mx-auto max-w-2xl px-4">
+        {/* Header */}
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <h1 className="text-xl font-semibold tracking-tight md:text-3xl">
+              روش‌های پرداخت
+            </h1>
+            <p className="mt-1 text-muted-foreground">
+              روش‌های پرداخت ذخیره‌شده خود را مدیریت کنید
+            </p>
+          </div>
+          <Button onClick={startAddingNew}>
+            <Plus className="ms-2 size-4" />
+            افزودن روش پرداخت
+          </Button>
+        </div>
+
+        {/* Payment methods list */}
+        <RadioGroup value={selectedId} onValueChange={setSelectedId}>
+          <div className="space-y-3">
+            {methods.map((method) => (
+              <Card
+                key={method.id}
+                className={cn(
+                  "cursor-pointer gap-0 p-0 transition-colors",
+                  selectedId === method.id &&
+                    editingId !== method.id &&
+                    "border-primary",
+                  editingId === method.id && "border-primary",
+                )}
+                onClick={() =>
+                  editingId !== method.id && setSelectedId(method.id)
+                }
+              >
+                <CardContent className="p-4">
+                  {editingId === method.id ? (
+                    <div className="space-y-4">
+                      <div className="flex items-center justify-between">
+                        <h3 className="font-semibold">ویرایش روش پرداخت</h3>
+                        <div className="flex gap-2">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              cancelEditing();
+                            }}
+                          >
+                            <X className="size-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              saveEdit();
+                            }}
+                          >
+                            <Save className="ms-2 size-4" />
+                            ذخیره
+                          </Button>
+                        </div>
+                      </div>
+                      <div className="grid gap-4 sm:grid-cols-2">
+                        <div className="space-y-2">
+                          <Label htmlFor={`type-${method.id}`}>نوع کارت</Label>
+                          <Select
+                            value={editForm.type || "visa"}
+                            onValueChange={(
+                              value: "visa" | "mastercard" | "amex" | "paypal",
+                            ) => setEditForm({ ...editForm, type: value })}
+                          >
+                            <SelectTrigger
+                              id={`type-${method.id}`}
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="visa">
+                                {PAYMENT_TYPE_LABELS.visa}
+                              </SelectItem>
+                              <SelectItem value="mastercard">
+                                {PAYMENT_TYPE_LABELS.mastercard}
+                              </SelectItem>
+                              <SelectItem value="amex">
+                                {PAYMENT_TYPE_LABELS.amex}
+                              </SelectItem>
+                              <SelectItem value="paypal">
+                                {PAYMENT_TYPE_LABELS.paypal}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        {editForm.type === "paypal" ? (
+                          <div className="space-y-2 sm:col-span-2">
+                            <Label htmlFor={`email-${method.id}`}>
+                              ایمیل کیف پول دیجیتال
+                            </Label>
+                            <Input
+                              id={`email-${method.id}`}
+                              type="email"
+                              value={editForm.email || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  email: e.target.value,
+                                })
+                              }
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </div>
+                        ) : (
+                          <>
+                            <div className="space-y-2">
+                              <Label htmlFor={`last4-${method.id}`}>
+                                چهار رقم آخر
+                              </Label>
+                              <Input
+                                id={`last4-${method.id}`}
+                                maxLength={4}
+                                value={editForm.last4 || ""}
+                                onChange={(e) =>
+                                  setEditForm({
+                                    ...editForm,
+                                    last4: e.target.value
+                                      .replace(/\D/g, "")
+                                      .slice(0, 4),
+                                  })
+                                }
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor={`expiryMonth-${method.id}`}>
+                                ماه انقضا
+                              </Label>
+                              <Input
+                                id={`expiryMonth-${method.id}`}
+                                type="number"
+                                min={1}
+                                max={12}
+                                value={editForm.expiryMonth || ""}
+                                onChange={(e) =>
+                                  setEditForm({
+                                    ...editForm,
+                                    expiryMonth:
+                                      parseInt(e.target.value) || undefined,
+                                  })
+                                }
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor={`expiryYear-${method.id}`}>
+                                سال انقضا
+                              </Label>
+                              <Input
+                                id={`expiryYear-${method.id}`}
+                                type="number"
+                                min={new Date().getFullYear()}
+                                value={editForm.expiryYear || ""}
+                                onChange={(e) =>
+                                  setEditForm({
+                                    ...editForm,
+                                    expiryYear:
+                                      parseInt(e.target.value) || undefined,
+                                  })
+                                }
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-4">
+                      <RadioGroupItem value={method.id} id={method.id} />
+
+                      {/* Payment Logo */}
+                      <div className="flex size-12 items-center justify-center">
+                        {PAYMENT_LOGOS[method.type] ? (
+                          <img
+                            src={PAYMENT_LOGOS[method.type]}
+                            alt={PAYMENT_TYPE_LABELS[method.type]}
+                            className="h-full w-full object-contain"
+                          />
+                        ) : (
+                          <CreditCard className="size-6 text-muted-foreground" />
+                        )}
+                      </div>
+
+                      {/* Details */}
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium">
+                            {method.type === "paypal"
+                              ? PAYMENT_TYPE_LABELS.paypal
+                              : `${PAYMENT_TYPE_LABELS[method.type]} •••• ${formatCardLast4(method.last4)}`}
+                          </span>
+                          {method.isDefault && (
+                            <Badge variant="secondary" className="text-xs">
+                              پیش‌فرض
+                            </Badge>
+                          )}
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                          {method.type === "paypal"
+                            ? method.email
+                            : formatExpiry(
+                                method.expiryMonth,
+                                method.expiryYear,
+                              )}
+                        </p>
+                      </div>
+
+                      {/* Actions */}
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-8"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <MoreVertical className="size-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              startEditing(method);
+                            }}
+                          >
+                            <Pencil className="ms-2 size-4" />
+                            ویرایش
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            className="text-destructive"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              deleteMethod(method.id);
+                            }}
+                          >
+                            <Trash2 className="ms-2 size-4" />
+                            حذف
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+
+            {isAddingNew && (
+              <Card className="gap-0 border-primary p-0">
+                <CardContent className="p-4">
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <h3 className="font-semibold">افزودن روش پرداخت جدید</h3>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={cancelAddingNew}
+                        >
+                          <X className="size-4" />
+                        </Button>
+                        <Button size="sm" onClick={saveNewMethod}>
+                          <Save className="ms-2 size-4" />
+                          ذخیره
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="grid gap-4 sm:grid-cols-2">
+                      <div className="space-y-2">
+                        <Label htmlFor="new-type">نوع کارت</Label>
+                        <Select
+                          value={editForm.type || "visa"}
+                          onValueChange={(
+                            value: "visa" | "mastercard" | "amex" | "paypal",
+                          ) => setEditForm({ ...editForm, type: value })}
+                        >
+                          <SelectTrigger id="new-type">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="visa">
+                              {PAYMENT_TYPE_LABELS.visa}
+                            </SelectItem>
+                            <SelectItem value="mastercard">
+                              {PAYMENT_TYPE_LABELS.mastercard}
+                            </SelectItem>
+                            <SelectItem value="amex">
+                              {PAYMENT_TYPE_LABELS.amex}
+                            </SelectItem>
+                            <SelectItem value="paypal">
+                              {PAYMENT_TYPE_LABELS.paypal}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      {editForm.type === "paypal" ? (
+                        <div className="space-y-2 sm:col-span-2">
+                          <Label htmlFor="new-email">ایمیل کیف پول دیجیتال</Label>
+                          <Input
+                            id="new-email"
+                            type="email"
+                            value={editForm.email || ""}
+                            onChange={(e) =>
+                              setEditForm({
+                                ...editForm,
+                                email: e.target.value,
+                              })
+                            }
+                          />
+                        </div>
+                      ) : (
+                        <>
+                          <div className="space-y-2">
+                            <Label htmlFor="new-last4">چهار رقم آخر</Label>
+                            <Input
+                              id="new-last4"
+                              maxLength={4}
+                              value={editForm.last4 || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  last4: e.target.value
+                                    .replace(/\D/g, "")
+                                    .slice(0, 4),
+                                })
+                              }
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor="new-expiryMonth">ماه انقضا</Label>
+                            <Input
+                              id="new-expiryMonth"
+                              type="number"
+                              min={1}
+                              max={12}
+                              value={editForm.expiryMonth || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  expiryMonth:
+                                    parseInt(e.target.value) || undefined,
+                                })
+                              }
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor="new-expiryYear">سال انقضا</Label>
+                            <Input
+                              id="new-expiryYear"
+                              type="number"
+                              min={new Date().getFullYear()}
+                              value={editForm.expiryYear || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  expiryYear:
+                                    parseInt(e.target.value) || undefined,
+                                })
+                              }
+                            />
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </RadioGroup>
+
+        {methods.length === 0 && (
+          <Card className="p-0">
+            <CardContent className="flex flex-col items-center justify-center py-12">
+              <CreditCard className="mb-4 size-12 text-muted-foreground" />
+              <h2 className="text-xl font-semibold">
+                روش پرداختی ذخیره نشده
+              </h2>
+              <p className="mt-2 text-muted-foreground">
+                برای تسویه‌حساب سریع‌تر، یک روش پرداخت اضافه کنید
+              </p>
+              <Button className="mt-4" onClick={startAddingNew}>
+                <Plus className="ms-2 size-4" />
+                افزودن روش پرداخت
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { PaymentMethods1 };
diff --git a/blocks/payment-methods2.tsx b/blocks/payment-methods2.tsx
new file mode 100644
index 0000000..fc1fcfc
--- /dev/null
+++ b/blocks/payment-methods2.tsx
@@ -0,0 +1,729 @@
+"use client";
+
+import {
+  CreditCard,
+  MoreVertical,
+  Pencil,
+  Plus,
+  Save,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface PaymentMethod {
+  id: string;
+  type: "visa" | "mastercard" | "amex" | "paypal";
+  last4?: string;
+  expiryMonth?: number;
+  expiryYear?: number;
+  email?: string;
+  cardholderName?: string;
+  isDefault: boolean;
+}
+
+const DEFAULT_METHODS: PaymentMethod[] = [
+  {
+    id: "1",
+    type: "visa",
+    last4: "4242",
+    expiryMonth: 12,
+    expiryYear: 2026,
+    cardholderName: "علی رضایی",
+    isDefault: true,
+  },
+  {
+    id: "2",
+    type: "mastercard",
+    last4: "8888",
+    expiryMonth: 8,
+    expiryYear: 2025,
+    cardholderName: "علی رضایی",
+    isDefault: false,
+  },
+  {
+    id: "3",
+    type: "paypal",
+    email: "user@example.com",
+    isDefault: false,
+  },
+];
+
+const PAYMENT_LOGOS: Record<string, string> = {
+  visa: "/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg",
+  mastercard:
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg",
+  amex: "/block-media/shadcnblocks/block/ecommerce/payment-methods/amex.svg",
+  paypal:
+    "/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg",
+};
+
+const PAYMENT_TYPE_LABELS: Record<PaymentMethod["type"], string> = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  amex: "American Express",
+  paypal: "PayPal",
+};
+
+const formatCardLast4 = (last4?: string) => {
+  if (!last4) return "";
+  return Number(last4).toLocaleString("fa-IR", { useGrouping: false });
+};
+
+const formatExpiry = (month?: number, year?: number) => {
+  if (!month || !year) return "";
+  return `انقضا: ${month.toLocaleString("fa-IR")}/${year.toLocaleString("fa-IR")}`;
+};
+
+interface PaymentMethods2Props {
+  methods?: PaymentMethod[];
+  className?: string;
+}
+
+const PaymentMethods2 = ({
+  methods: initialMethods = DEFAULT_METHODS,
+  className,
+}: PaymentMethods2Props) => {
+  const [methods, setMethods] = useState(initialMethods);
+  const [selectedId, setSelectedId] = useState(
+    methods.find((m) => m.isDefault)?.id || methods[0]?.id,
+  );
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [isAddingNew, setIsAddingNew] = useState(false);
+  const [editForm, setEditForm] = useState<Partial<PaymentMethod>>({});
+
+  const startEditing = (method: PaymentMethod) => {
+    setEditingId(method.id);
+    setEditForm({ ...method });
+  };
+
+  const cancelEditing = () => {
+    setEditingId(null);
+    setEditForm({});
+  };
+
+  const saveEdit = () => {
+    if (
+      editingId &&
+      editForm.type &&
+      (editForm.type === "paypal"
+        ? editForm.email
+        : editForm.last4 && editForm.expiryMonth && editForm.expiryYear)
+    ) {
+      setMethods((prev) =>
+        prev.map((method) =>
+          method.id === editingId
+            ? ({
+                ...method,
+                ...editForm,
+              } as PaymentMethod)
+            : method,
+        ),
+      );
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  const startAddingNew = () => {
+    setIsAddingNew(true);
+    setEditForm({
+      type: "visa",
+      last4: "",
+      expiryMonth: undefined,
+      expiryYear: undefined,
+      email: undefined,
+      cardholderName: "",
+      isDefault: methods.length === 0,
+    });
+  };
+
+  const cancelAddingNew = () => {
+    setIsAddingNew(false);
+    setEditForm({});
+  };
+
+  const saveNewMethod = () => {
+    if (
+      editForm.type &&
+      (editForm.type === "paypal"
+        ? editForm.email
+        : editForm.last4 && editForm.expiryMonth && editForm.expiryYear)
+    ) {
+      const newMethod: PaymentMethod = {
+        id: Date.now().toString(),
+        type: editForm.type as "visa" | "mastercard" | "amex" | "paypal",
+        last4: editForm.last4,
+        expiryMonth: editForm.expiryMonth,
+        expiryYear: editForm.expiryYear,
+        email: editForm.email,
+        cardholderName: editForm.cardholderName,
+        isDefault: methods.length === 0,
+      };
+      setMethods((prev) => [...prev, newMethod]);
+      setIsAddingNew(false);
+      setEditForm({});
+      if (methods.length === 0) {
+        setSelectedId(newMethod.id);
+      }
+    }
+  };
+
+  const deleteMethod = (id: string) => {
+    setMethods((prev) => prev.filter((method) => method.id !== id));
+    if (selectedId === id && methods.length > 1) {
+      setSelectedId(methods.find((m) => m.id !== id)?.id || "");
+    }
+    if (editingId === id) {
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  const setAsDefault = (id: string) => {
+    setMethods((prev) =>
+      prev.map((method) => ({
+        ...method,
+        isDefault: method.id === id,
+      })),
+    );
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container mx-auto max-w-3xl px-4">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-xl font-semibold tracking-tight md:text-3xl">
+            روش‌های پرداخت
+          </h1>
+          <p className="mt-2 text-muted-foreground">
+            روش‌های پرداخت ذخیره‌شده خود را مدیریت کنید
+          </p>
+        </div>
+
+        {/* Payment methods grid */}
+        <RadioGroup value={selectedId} onValueChange={setSelectedId}>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {methods.map((method) => (
+              <Card
+                key={method.id}
+                className={cn(
+                  "cursor-pointer transition-all",
+                  selectedId === method.id &&
+                    editingId !== method.id &&
+                    "border-primary ring-2 ring-primary ring-offset-2",
+                  editingId === method.id && "border-primary",
+                )}
+                onClick={() =>
+                  editingId !== method.id && setSelectedId(method.id)
+                }
+              >
+                <CardContent className="p-5">
+                  {editingId === method.id ? (
+                    <div className="space-y-4">
+                      <div className="flex items-center justify-between">
+                        <h3 className="text-sm font-semibold">
+                          ویرایش روش پرداخت
+                        </h3>
+                        <div className="flex gap-2">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              cancelEditing();
+                            }}
+                          >
+                            <X className="size-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              saveEdit();
+                            }}
+                          >
+                            <Save className="ms-2 size-4" />
+                            ذخیره
+                          </Button>
+                        </div>
+                      </div>
+                      <div className="space-y-3">
+                        <div className="space-y-2">
+                          <Label
+                            htmlFor={`type-${method.id}`}
+                            className="text-xs"
+                          >
+                            نوع کارت
+                          </Label>
+                          <Select
+                            value={editForm.type || "visa"}
+                            onValueChange={(
+                              value: "visa" | "mastercard" | "amex" | "paypal",
+                            ) => setEditForm({ ...editForm, type: value })}
+                          >
+                            <SelectTrigger
+                              id={`type-${method.id}`}
+                              className="h-9"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="visa">
+                                {PAYMENT_TYPE_LABELS.visa}
+                              </SelectItem>
+                              <SelectItem value="mastercard">
+                                {PAYMENT_TYPE_LABELS.mastercard}
+                              </SelectItem>
+                              <SelectItem value="amex">
+                                {PAYMENT_TYPE_LABELS.amex}
+                              </SelectItem>
+                              <SelectItem value="paypal">
+                                {PAYMENT_TYPE_LABELS.paypal}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        {editForm.type === "paypal" ? (
+                          <div className="space-y-2">
+                            <Label
+                              htmlFor={`email-${method.id}`}
+                              className="text-xs"
+                            >
+                              ایمیل کیف پول دیجیتال
+                            </Label>
+                            <Input
+                              id={`email-${method.id}`}
+                              type="email"
+                              className="h-9"
+                              value={editForm.email || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  email: e.target.value,
+                                })
+                              }
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </div>
+                        ) : (
+                          <>
+                            <div className="space-y-2">
+                              <Label
+                                htmlFor={`name-${method.id}`}
+                                className="text-xs"
+                              >
+                                نام دارنده کارت
+                              </Label>
+                              <Input
+                                id={`name-${method.id}`}
+                                className="h-9"
+                                value={editForm.cardholderName || ""}
+                                onChange={(e) =>
+                                  setEditForm({
+                                    ...editForm,
+                                    cardholderName: e.target.value,
+                                  })
+                                }
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label
+                                htmlFor={`last4-${method.id}`}
+                                className="text-xs"
+                              >
+                                چهار رقم آخر
+                              </Label>
+                              <Input
+                                id={`last4-${method.id}`}
+                                className="h-9"
+                                maxLength={4}
+                                value={editForm.last4 || ""}
+                                onChange={(e) =>
+                                  setEditForm({
+                                    ...editForm,
+                                    last4: e.target.value
+                                      .replace(/\D/g, "")
+                                      .slice(0, 4),
+                                  })
+                                }
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            </div>
+                            <div className="grid grid-cols-2 gap-3">
+                              <div className="space-y-2">
+                                <Label
+                                  htmlFor={`expiryMonth-${method.id}`}
+                                  className="text-xs"
+                                >
+                                  ماه انقضا
+                                </Label>
+                                <Input
+                                  id={`expiryMonth-${method.id}`}
+                                  type="number"
+                                  className="h-9"
+                                  min={1}
+                                  max={12}
+                                  value={editForm.expiryMonth || ""}
+                                  onChange={(e) =>
+                                    setEditForm({
+                                      ...editForm,
+                                      expiryMonth:
+                                        parseInt(e.target.value) || undefined,
+                                    })
+                                  }
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label
+                                  htmlFor={`expiryYear-${method.id}`}
+                                  className="text-xs"
+                                >
+                                  سال انقضا
+                                </Label>
+                                <Input
+                                  id={`expiryYear-${method.id}`}
+                                  type="number"
+                                  className="h-9"
+                                  min={new Date().getFullYear()}
+                                  value={editForm.expiryYear || ""}
+                                  onChange={(e) =>
+                                    setEditForm({
+                                      ...editForm,
+                                      expiryYear:
+                                        parseInt(e.target.value) || undefined,
+                                    })
+                                  }
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              </div>
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      <div className="flex items-start justify-between">
+                        <RadioGroupItem
+                          value={method.id}
+                          id={method.id}
+                          className="mt-1"
+                        />
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-8"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <MoreVertical className="size-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                startEditing(method);
+                              }}
+                            >
+                              <Pencil className="ms-2 size-4" />
+                              ویرایش
+                            </DropdownMenuItem>
+                            {!method.isDefault && (
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setAsDefault(method.id);
+                                }}
+                              >
+                                تنظیم به‌عنوان پیش‌فرض
+                              </DropdownMenuItem>
+                            )}
+                            <DropdownMenuItem
+                              className="text-destructive"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                deleteMethod(method.id);
+                              }}
+                            >
+                              <Trash2 className="ms-2 size-4" />
+                              حذف
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+
+                      {/* Payment Logo */}
+                      <div className="flex size-16 items-center justify-center">
+                        {PAYMENT_LOGOS[method.type] ? (
+                          <img
+                            src={PAYMENT_LOGOS[method.type]}
+                            alt={PAYMENT_TYPE_LABELS[method.type]}
+                            className="h-10 w-auto object-contain"
+                          />
+                        ) : (
+                          <CreditCard className="size-8 text-muted-foreground" />
+                        )}
+                      </div>
+
+                      {/* Details */}
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          <span className="font-semibold">
+                            {method.type === "paypal"
+                              ? PAYMENT_TYPE_LABELS.paypal
+                              : `${PAYMENT_TYPE_LABELS[method.type]} •••• ${formatCardLast4(method.last4)}`}
+                          </span>
+                          {method.isDefault && (
+                            <Badge variant="secondary" className="text-xs">
+                              پیش‌فرض
+                            </Badge>
+                          )}
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                          {method.type === "paypal"
+                            ? method.email
+                            : method.cardholderName
+                              ? `${method.cardholderName} • ${formatExpiry(method.expiryMonth, method.expiryYear)}`
+                              : formatExpiry(
+                                  method.expiryMonth,
+                                  method.expiryYear,
+                                )}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+
+            {isAddingNew && (
+              <Card className="border-primary">
+                <CardContent className="p-5">
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <h3 className="text-sm font-semibold">
+                        افزودن روش پرداخت جدید
+                      </h3>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={cancelAddingNew}
+                        >
+                          <X className="size-4" />
+                        </Button>
+                        <Button size="sm" onClick={saveNewMethod}>
+                          <Save className="ms-2 size-4" />
+                          ذخیره
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="space-y-3">
+                      <div className="space-y-2">
+                        <Label htmlFor="new-type" className="text-xs">
+                          نوع کارت
+                        </Label>
+                        <Select
+                          value={editForm.type || "visa"}
+                          onValueChange={(
+                            value: "visa" | "mastercard" | "amex" | "paypal",
+                          ) => setEditForm({ ...editForm, type: value })}
+                        >
+                          <SelectTrigger id="new-type" className="h-9">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="visa">
+                              {PAYMENT_TYPE_LABELS.visa}
+                            </SelectItem>
+                            <SelectItem value="mastercard">
+                              {PAYMENT_TYPE_LABELS.mastercard}
+                            </SelectItem>
+                            <SelectItem value="amex">
+                              {PAYMENT_TYPE_LABELS.amex}
+                            </SelectItem>
+                            <SelectItem value="paypal">
+                              {PAYMENT_TYPE_LABELS.paypal}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      {editForm.type === "paypal" ? (
+                        <div className="space-y-2">
+                          <Label htmlFor="new-email" className="text-xs">
+                            ایمیل کیف پول دیجیتال
+                          </Label>
+                          <Input
+                            id="new-email"
+                            type="email"
+                            className="h-9"
+                            value={editForm.email || ""}
+                            onChange={(e) =>
+                              setEditForm({
+                                ...editForm,
+                                email: e.target.value,
+                              })
+                            }
+                          />
+                        </div>
+                      ) : (
+                        <>
+                          <div className="space-y-2">
+                            <Label htmlFor="new-name" className="text-xs">
+                              نام دارنده کارت
+                            </Label>
+                            <Input
+                              id="new-name"
+                              className="h-9"
+                              value={editForm.cardholderName || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  cardholderName: e.target.value,
+                                })
+                              }
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor="new-last4" className="text-xs">
+                              چهار رقم آخر
+                            </Label>
+                            <Input
+                              id="new-last4"
+                              className="h-9"
+                              maxLength={4}
+                              value={editForm.last4 || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  last4: e.target.value
+                                    .replace(/\D/g, "")
+                                    .slice(0, 4),
+                                })
+                              }
+                            />
+                          </div>
+                          <div className="grid grid-cols-2 gap-3">
+                            <div className="space-y-2">
+                              <Label
+                                htmlFor="new-expiryMonth"
+                                className="text-xs"
+                              >
+                                ماه انقضا
+                              </Label>
+                              <Input
+                                id="new-expiryMonth"
+                                type="number"
+                                className="h-9"
+                                min={1}
+                                max={12}
+                                value={editForm.expiryMonth || ""}
+                                onChange={(e) =>
+                                  setEditForm({
+                                    ...editForm,
+                                    expiryMonth:
+                                      parseInt(e.target.value) || undefined,
+                                  })
+                                }
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label
+                                htmlFor="new-expiryYear"
+                                className="text-xs"
+                              >
+                                سال انقضا
+                              </Label>
+                              <Input
+                                id="new-expiryYear"
+                                type="number"
+                                className="h-9"
+                                min={new Date().getFullYear()}
+                                value={editForm.expiryYear || ""}
+                                onChange={(e) =>
+                                  setEditForm({
+                                    ...editForm,
+                                    expiryYear:
+                                      parseInt(e.target.value) || undefined,
+                                  })
+                                }
+                              />
+                            </div>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </RadioGroup>
+
+        {/* Add payment method button */}
+        {!isAddingNew && (
+          <Button
+            variant="outline"
+            className="mt-6 w-full sm:w-auto"
+            onClick={startAddingNew}
+          >
+            <Plus className="ms-2 size-4" />
+            افزودن روش پرداخت
+          </Button>
+        )}
+
+        {methods.length === 0 && (
+          <Card className="mt-6">
+            <CardContent className="flex flex-col items-center justify-center py-12">
+              <CreditCard className="mb-4 size-12 text-muted-foreground" />
+              <h2 className="text-xl font-semibold">
+                روش پرداختی ذخیره نشده
+              </h2>
+              <p className="mt-2 text-center text-muted-foreground">
+                برای تسویه‌حساب سریع‌تر، یک روش پرداخت اضافه کنید
+              </p>
+              <Button className="mt-4" onClick={startAddingNew}>
+                <Plus className="ms-2 size-4" />
+                افزودن روش پرداخت
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { PaymentMethods2 };
diff --git a/blocks/payment-methods3.tsx b/blocks/payment-methods3.tsx
new file mode 100644
index 0000000..0fbc13b
--- /dev/null
+++ b/blocks/payment-methods3.tsx
@@ -0,0 +1,497 @@
+"use client";
+
+import { Pencil, Plus, Save, Shield, Star, X } from "lucide-react";
+import { useState } from "react";
+
+import {
+  CreditCard,
+  CreditCardBack,
+  CreditCardChip,
+  CreditCardCvv,
+  CreditCardExpiry,
+  CreditCardFlipper,
+  CreditCardFront,
+  CreditCardMagStripe,
+  CreditCardName,
+  CreditCardNumber,
+} from "@/components/kibo-ui/credit-card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface PaymentMethod {
+  id: string;
+  bank: "wells-fargo" | "chase";
+  type: "visa" | "mastercard";
+  last4: string;
+  expiryMonth: number;
+  expiryYear: number;
+  cardholderName: string;
+  cvv: string;
+  isDefault: boolean;
+}
+
+const DEFAULT_METHODS: PaymentMethod[] = [
+  {
+    id: "1",
+    bank: "wells-fargo",
+    type: "mastercard",
+    last4: "8888",
+    expiryMonth: 12,
+    expiryYear: 2026,
+    cardholderName: "علی ر. رضایی",
+    cvv: "123",
+    isDefault: true,
+  },
+  {
+    id: "2",
+    bank: "chase",
+    type: "visa",
+    last4: "4242",
+    expiryMonth: 8,
+    expiryYear: 2025,
+    cardholderName: "علی ر. رضایی",
+    cvv: "456",
+    isDefault: false,
+  },
+];
+
+const BANK_LABELS: Record<PaymentMethod["bank"], string> = {
+  "wells-fargo": "Wells Fargo",
+  chase: "Chase",
+};
+
+const PAYMENT_TYPE_LABELS: Record<PaymentMethod["type"], string> = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+};
+
+const formatCardLast4 = (last4?: string) => {
+  if (!last4) return "";
+  return Number(last4).toLocaleString("fa-IR", { useGrouping: false });
+};
+
+const formatExpiryShort = (month?: number, year?: number) => {
+  if (!month || !year) return "";
+  const paddedMonth = month.toLocaleString("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+  const shortYear = (year % 100).toLocaleString("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+  return `${paddedMonth}/${shortYear}`;
+};
+
+interface PaymentMethods3Props {
+  methods?: PaymentMethod[];
+  title?: string;
+  className?: string;
+}
+
+const PaymentMethods3 = ({
+  methods: initialMethods = DEFAULT_METHODS,
+  title = "انتخاب روش پرداخت",
+  className,
+}: PaymentMethods3Props) => {
+  const [methods, setMethods] = useState(initialMethods);
+  const [selectedId, setSelectedId] = useState(
+    methods.find((m) => m.isDefault)?.id || methods[0]?.id,
+  );
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState<Partial<PaymentMethod>>({});
+
+  const startEditing = (method: PaymentMethod) => {
+    setEditingId(method.id);
+    setEditForm({ ...method });
+  };
+
+  const cancelEditing = () => {
+    setEditingId(null);
+    setEditForm({});
+  };
+
+  const saveEdit = () => {
+    if (
+      editingId &&
+      editForm.cardholderName &&
+      editForm.last4 &&
+      editForm.expiryMonth &&
+      editForm.expiryYear &&
+      editForm.cvv
+    ) {
+      setMethods((prev) =>
+        prev.map((method) =>
+          method.id === editingId
+            ? ({
+                ...method,
+                ...editForm,
+              } as PaymentMethod)
+            : method,
+        ),
+      );
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  const setAsDefault = (id: string) => {
+    setMethods((prev) =>
+      prev.map((method) => ({
+        ...method,
+        isDefault: method.id === id,
+      })),
+    );
+  };
+
+  const getCardBackground = (bank: string): string => {
+    switch (bank) {
+      case "chase":
+        return "bg-[#063573]";
+      case "wells-fargo":
+        return "bg-gradient-to-br from-[#D71E2B] to-[#8B0000]";
+      default:
+        return "bg-[#063573]";
+    }
+  };
+
+  const getBankLogo = (bank: string) => {
+    switch (bank) {
+      case "chase":
+        return (
+          <img
+            src="/block-media/shadcnblocks/block/logos/payments/chase-white-wordmark.svg"
+            alt={BANK_LABELS["chase"]}
+            className="h-5"
+          />
+        );
+      case "wells-fargo":
+        return (
+          <img
+            src="/block-media/shadcnblocks/block/logos/payments/wells-fargo-white-wordmark.svg"
+            alt={BANK_LABELS["wells-fargo"]}
+            className="h-4"
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getPaymentProviderLogo = (type: string) => {
+    switch (type) {
+      case "visa":
+        return (
+          <img
+            src="/block-media/shadcnblocks/block/logos/payments/visa-white.svg"
+            alt={PAYMENT_TYPE_LABELS.visa}
+            className="h-4"
+          />
+        );
+      case "کارت اعتباری":
+        return (
+          <img
+            src="/block-media/shadcnblocks/block/logos/payments/mastercard-white.svg"
+            alt={PAYMENT_TYPE_LABELS.mastercard}
+            className="h-6"
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container mx-auto px-4">
+        <div className="mx-auto max-w-4xl">
+          {/* Header */}
+          <h2 className="mb-6 text-xl font-semibold">{title}</h2>
+
+          {/* Cards */}
+          <div className="space-y-6">
+            {methods.map((method) => (
+              <div
+                key={method.id}
+                className="group flex items-center gap-6 rounded-lg border p-4 transition-colors"
+              >
+                {/* Card Details on Left */}
+                <div className="flex flex-1 flex-col justify-start">
+                  {/* Edit Button - Top Aligned */}
+                  {editingId !== method.id && (
+                    <div className="">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          startEditing(method);
+                        }}
+                      >
+                        <Pencil className="ms-2 size-4" />
+                        ویرایش
+                      </Button>
+                    </div>
+                  )}
+
+                  {/* Card Details Below */}
+                  <div className="flex flex-1 flex-col gap-4 pt-4">
+                    <div className="flex gap-3">
+                      {/* Selection Indicator */}
+                      <div className="flex items-center">
+                        <div
+                          className={cn(
+                            "flex size-5 cursor-pointer items-center justify-center rounded-full border-2 transition-colors",
+                            selectedId === method.id
+                              ? "border-primary bg-primary"
+                              : "border-muted-foreground/30",
+                          )}
+                          onClick={() => {
+                            setSelectedId(method.id);
+                            setAsDefault(method.id);
+                          }}
+                        >
+                          {selectedId === method.id && (
+                            <div className="size-1.5 rounded-full bg-primary-foreground" />
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="flex-1">
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <h3 className="font-semibold">
+                              {BANK_LABELS[method.bank]}{" "}
+                              {PAYMENT_TYPE_LABELS[method.type]}
+                            </h3>
+                            {method.isDefault && (
+                              <Badge variant="secondary" className="text-xs">
+                                <Star className="ms-1 size-3 fill-current" />
+                                پیش‌فرض
+                              </Badge>
+                            )}
+                          </div>
+                          <p className="text-sm text-muted-foreground">
+                            •••• •••• •••• {formatCardLast4(method.last4)}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {editingId === method.id ? (
+                      <div className="space-y-4 rounded-lg p-4">
+                        <div className="flex items-center justify-between">
+                          <h4 className="font-semibold">ویرایش جزئیات کارت</h4>
+                          <div className="flex gap-2">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                cancelEditing();
+                              }}
+                            >
+                              <X className="size-4" />
+                            </Button>
+                            <Button
+                              size="sm"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                saveEdit();
+                              }}
+                            >
+                              <Save className="ms-2 size-4" />
+                              ذخیره
+                            </Button>
+                          </div>
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                          <div className="space-y-2">
+                            <Label htmlFor={`cardholder-${method.id}`}>
+                              نام دارنده کارت
+                            </Label>
+                            <Input
+                              id={`cardholder-${method.id}`}
+                              value={editForm.cardholderName || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  cardholderName: e.target.value,
+                                })
+                              }
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor={`last4-${method.id}`}>
+                              چهار رقم آخر
+                            </Label>
+                            <Input
+                              id={`last4-${method.id}`}
+                              maxLength={4}
+                              value={editForm.last4 || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  last4: e.target.value
+                                    .replace(/\D/g, "")
+                                    .slice(0, 4),
+                                })
+                              }
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor={`expiryMonth-${method.id}`}>
+                              ماه انقضا
+                            </Label>
+                            <Input
+                              id={`expiryMonth-${method.id}`}
+                              type="number"
+                              min={1}
+                              max={12}
+                              value={editForm.expiryMonth || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  expiryMonth:
+                                    parseInt(e.target.value) || undefined,
+                                })
+                              }
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor={`expiryYear-${method.id}`}>
+                              سال انقضا
+                            </Label>
+                            <Input
+                              id={`expiryYear-${method.id}`}
+                              type="number"
+                              min={new Date().getFullYear()}
+                              value={editForm.expiryYear || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  expiryYear:
+                                    parseInt(e.target.value) || undefined,
+                                })
+                              }
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor={`cvv-${method.id}`}>کد امنیتی</Label>
+                            <Input
+                              id={`cvv-${method.id}`}
+                              maxLength={4}
+                              value={editForm.cvv || ""}
+                              onChange={(e) =>
+                                setEditForm({
+                                  ...editForm,
+                                  cvv: e.target.value
+                                    .replace(/\D/g, "")
+                                    .slice(0, 4),
+                                })
+                              }
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-2 gap-4 text-sm">
+                        <div>
+                          <p className="text-muted-foreground">دارنده کارت</p>
+                          <p className="font-medium">{method.cardholderName}</p>
+                        </div>
+                        <div>
+                          <p className="text-muted-foreground">انقضا</p>
+                          <p className="font-medium">
+                            {formatExpiryShort(
+                              method.expiryMonth,
+                              method.expiryYear,
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Flipping Card on Right */}
+                <div className="relative">
+                  <CreditCard className="relative w-80 max-w-none">
+                    <CreditCardFlipper>
+                      <CreditCardFront
+                        className={getCardBackground(method.bank)}
+                      >
+                        {/* Bank Logo */}
+                        <div className="absolute top-0 left-0">
+                          {getBankLogo(method.bank)}
+                        </div>
+
+                        <CreditCardChip />
+
+                        {/* Payment Provider Logo */}
+                        <div className="absolute right-0 bottom-0">
+                          {getPaymentProviderLogo(method.type)}
+                        </div>
+
+                        {/* Cardholder Name */}
+                        <CreditCardName className="absolute bottom-0 left-0">
+                          {method.cardholderName}
+                        </CreditCardName>
+                      </CreditCardFront>
+
+                      <CreditCardBack
+                        className={getCardBackground(method.bank)}
+                      >
+                        <CreditCardMagStripe />
+
+                        {/* Card Number on Back */}
+                        <CreditCardNumber className="absolute bottom-0 left-0">
+                          •••• •••• •••• {method.last4}
+                        </CreditCardNumber>
+
+                        {/* Expiry and CVV */}
+                        <div className="absolute top-1/2 flex -translate-y-1/2 gap-4">
+                          <CreditCardExpiry>
+                            {method.expiryMonth.toString().padStart(2, "0")}/
+                            {method.expiryYear.toString().slice(-2)}
+                          </CreditCardExpiry>
+                          <CreditCardCvv>{method.cvv}</CreditCardCvv>
+                        </div>
+                      </CreditCardBack>
+                    </CreditCardFlipper>
+                  </CreditCard>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Add new card button */}
+          <Button variant="outline" className="mt-4 w-full" size="lg">
+            <Plus className="ms-2 size-4" />
+            افزودن کارت جدید
+          </Button>
+
+          {/* Security note */}
+          <div className="mt-6 flex items-center justify-center gap-2 text-sm text-muted-foreground">
+            <Shield className="size-4" />
+            <span>اطلاعات پرداخت شما به‌صورت امن ذخیره می‌شود</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { PaymentMethods3 };
diff --git a/blocks/payment-methods4.tsx b/blocks/payment-methods4.tsx
new file mode 100644
index 0000000..30dfce7
--- /dev/null
+++ b/blocks/payment-methods4.tsx
@@ -0,0 +1,526 @@
+"use client";
+
+import { Pencil, Plus, Save, Shield, Star, X } from "lucide-react";
+import { useState } from "react";
+
+import {
+  CreditCard,
+  CreditCardBack,
+  CreditCardChip,
+  CreditCardCvv,
+  CreditCardExpiry,
+  CreditCardFlipper,
+  CreditCardFront,
+  CreditCardMagStripe,
+  CreditCardName,
+  CreditCardNumber,
+} from "@/components/kibo-ui/credit-card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface PaymentMethod {
+  id: string;
+  bank: "wells-fargo" | "chase";
+  type: "visa" | "mastercard";
+  last4: string;
+  expiryMonth: number;
+  expiryYear: number;
+  cardholderName: string;
+  cvv: string;
+  isDefault: boolean;
+}
+
+const DEFAULT_METHODS: PaymentMethod[] = [
+  {
+    id: "1",
+    bank: "wells-fargo",
+    type: "mastercard",
+    last4: "8888",
+    expiryMonth: 12,
+    expiryYear: 2026,
+    cardholderName: "علی ر. رضایی",
+    cvv: "123",
+    isDefault: true,
+  },
+  {
+    id: "2",
+    bank: "chase",
+    type: "visa",
+    last4: "4242",
+    expiryMonth: 8,
+    expiryYear: 2025,
+    cardholderName: "علی ر. رضایی",
+    cvv: "456",
+    isDefault: false,
+  },
+];
+
+const BANK_LABELS: Record<PaymentMethod["bank"], string> = {
+  "wells-fargo": "Wells Fargo",
+  chase: "Chase",
+};
+
+const PAYMENT_TYPE_LABELS: Record<PaymentMethod["type"], string> = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+};
+
+const formatCardLast4 = (last4?: string) => {
+  if (!last4) return "";
+  return Number(last4).toLocaleString("fa-IR", { useGrouping: false });
+};
+
+const formatExpiryShort = (month?: number, year?: number) => {
+  if (!month || !year) return "";
+  const paddedMonth = month.toLocaleString("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+  const shortYear = (year % 100).toLocaleString("fa-IR", {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+  return `${paddedMonth}/${shortYear}`;
+};
+
+interface PaymentMethods4Props {
+  methods?: PaymentMethod[];
+  title?: string;
+  className?: string;
+}
+
+const PaymentMethods4 = ({
+  methods: initialMethods = DEFAULT_METHODS,
+  title = "انتخاب روش پرداخت",
+  className,
+}: PaymentMethods4Props) => {
+  const [methods, setMethods] = useState(initialMethods);
+  const [selectedId, setSelectedId] = useState(
+    methods.find((m) => m.isDefault)?.id || methods[0]?.id,
+  );
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState<Partial<PaymentMethod>>({});
+  const [api, setApi] = useState<CarouselApi>();
+
+  const startEditing = (method: PaymentMethod) => {
+    setEditingId(method.id);
+    setEditForm({ ...method });
+  };
+
+  const cancelEditing = () => {
+    setEditingId(null);
+    setEditForm({});
+  };
+
+  const saveEdit = () => {
+    if (
+      editingId &&
+      editForm.cardholderName &&
+      editForm.last4 &&
+      editForm.expiryMonth &&
+      editForm.expiryYear &&
+      editForm.cvv
+    ) {
+      setMethods((prev) =>
+        prev.map((method) =>
+          method.id === editingId
+            ? ({
+                ...method,
+                ...editForm,
+              } as PaymentMethod)
+            : method,
+        ),
+      );
+      setEditingId(null);
+      setEditForm({});
+    }
+  };
+
+  const setAsDefault = (id: string) => {
+    setMethods((prev) =>
+      prev.map((method) => ({
+        ...method,
+        isDefault: method.id === id,
+      })),
+    );
+  };
+
+  const getCardBackground = (bank: string): string => {
+    switch (bank) {
+      case "chase":
+        return "bg-[#063573]";
+      case "wells-fargo":
+        return "bg-gradient-to-br from-[#D71E2B] to-[#8B0000]";
+      default:
+        return "bg-[#063573]";
+    }
+  };
+
+  const getBankLogo = (bank: string) => {
+    switch (bank) {
+      case "chase":
+        return (
+          <img
+            src="/block-media/shadcnblocks/block/logos/payments/chase-white-wordmark.svg"
+            alt={BANK_LABELS["chase"]}
+            className="h-5"
+          />
+        );
+      case "wells-fargo":
+        return (
+          <img
+            src="/block-media/shadcnblocks/block/logos/payments/wells-fargo-white-wordmark.svg"
+            alt={BANK_LABELS["wells-fargo"]}
+            className="h-4"
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getPaymentProviderLogo = (type: string) => {
+    switch (type) {
+      case "visa":
+        return (
+          <img
+            src="/block-media/shadcnblocks/block/logos/payments/visa-white.svg"
+            alt={PAYMENT_TYPE_LABELS.visa}
+            className="h-4"
+          />
+        );
+      case "کارت اعتباری":
+        return (
+          <img
+            src="/block-media/shadcnblocks/block/logos/payments/mastercard-white.svg"
+            alt={PAYMENT_TYPE_LABELS.mastercard}
+            className="h-6"
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container mx-auto px-4">
+        <div className="mx-auto max-w-4xl">
+          {/* Header */}
+          <h2 className="mb-6 text-xl font-semibold">{title}</h2>
+
+          {/* Carousel with Cards */}
+          <Carousel
+            setApi={setApi}
+            opts={{
+              align: "start",
+              loop: false,
+            }}
+            className="w-full"
+          >
+            <CarouselContent>
+              {methods.map((method, index) => (
+                <CarouselItem key={method.id}>
+                  <div className="group flex items-center gap-6 rounded-lg border p-4 transition-colors">
+                    {/* Card Details on Left */}
+                    <div className="flex flex-1 flex-col justify-start">
+                      {/* Edit Button - Top Aligned */}
+                      {editingId !== method.id && (
+                        <div className="">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              startEditing(method);
+                            }}
+                          >
+                            <Pencil className="ms-2 size-4" />
+                            ویرایش
+                          </Button>
+                        </div>
+                      )}
+
+                      {/* Card Details Below */}
+                      <div className="flex flex-1 flex-col gap-4 pt-4">
+                        <div className="flex gap-3">
+                          {/* Selection Indicator */}
+                          <div className="flex items-center">
+                            <div
+                              className={cn(
+                                "flex size-5 cursor-pointer items-center justify-center rounded-full border-2 transition-colors",
+                                selectedId === method.id
+                                  ? "border-primary bg-primary"
+                                  : "border-muted-foreground/30",
+                              )}
+                              onClick={() => {
+                                setSelectedId(method.id);
+                                setAsDefault(method.id);
+                                api?.scrollTo(index);
+                              }}
+                            >
+                              {selectedId === method.id && (
+                                <div className="size-1.5 rounded-full bg-primary-foreground" />
+                              )}
+                            </div>
+                          </div>
+
+                          <div className="flex-1">
+                            <div>
+                              <div className="flex items-center gap-2">
+                                <h3 className="font-semibold">
+                                  {BANK_LABELS[method.bank]}{" "}
+                                  {PAYMENT_TYPE_LABELS[method.type]}
+                                </h3>
+                                {method.isDefault && (
+                                  <Badge
+                                    variant="secondary"
+                                    className="text-xs"
+                                  >
+                                    <Star className="ms-1 size-3 fill-current" />
+                                    پیش‌فرض
+                                  </Badge>
+                                )}
+                              </div>
+                              <p className="text-sm text-muted-foreground">
+                                •••• •••• •••• {formatCardLast4(method.last4)}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+
+                        {editingId === method.id ? (
+                          <div className="space-y-4 rounded-lg p-4">
+                            <div className="flex items-center justify-between">
+                              <h4 className="font-semibold">
+                                ویرایش جزئیات کارت
+                              </h4>
+                              <div className="flex gap-2">
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    cancelEditing();
+                                  }}
+                                >
+                                  <X className="size-4" />
+                                </Button>
+                                <Button
+                                  size="sm"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    saveEdit();
+                                  }}
+                                >
+                                  <Save className="ms-2 size-4" />
+                                  ذخیره
+                                </Button>
+                              </div>
+                            </div>
+                            <div className="grid grid-cols-2 gap-4">
+                              <div className="space-y-2">
+                                <Label htmlFor={`cardholder-${method.id}`}>
+                                  نام دارنده کارت
+                                </Label>
+                                <Input
+                                  id={`cardholder-${method.id}`}
+                                  value={editForm.cardholderName || ""}
+                                  onChange={(e) =>
+                                    setEditForm({
+                                      ...editForm,
+                                      cardholderName: e.target.value,
+                                    })
+                                  }
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label htmlFor={`last4-${method.id}`}>
+                                  چهار رقم آخر
+                                </Label>
+                                <Input
+                                  id={`last4-${method.id}`}
+                                  maxLength={4}
+                                  value={editForm.last4 || ""}
+                                  onChange={(e) =>
+                                    setEditForm({
+                                      ...editForm,
+                                      last4: e.target.value
+                                        .replace(/\D/g, "")
+                                        .slice(0, 4),
+                                    })
+                                  }
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label htmlFor={`expiryMonth-${method.id}`}>
+                                  ماه انقضا
+                                </Label>
+                                <Input
+                                  id={`expiryMonth-${method.id}`}
+                                  type="number"
+                                  min={1}
+                                  max={12}
+                                  value={editForm.expiryMonth || ""}
+                                  onChange={(e) =>
+                                    setEditForm({
+                                      ...editForm,
+                                      expiryMonth:
+                                        parseInt(e.target.value) || undefined,
+                                    })
+                                  }
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label htmlFor={`expiryYear-${method.id}`}>
+                                  سال انقضا
+                                </Label>
+                                <Input
+                                  id={`expiryYear-${method.id}`}
+                                  type="number"
+                                  min={new Date().getFullYear()}
+                                  value={editForm.expiryYear || ""}
+                                  onChange={(e) =>
+                                    setEditForm({
+                                      ...editForm,
+                                      expiryYear:
+                                        parseInt(e.target.value) || undefined,
+                                    })
+                                  }
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label htmlFor={`cvv-${method.id}`}>کد امنیتی</Label>
+                                <Input
+                                  id={`cvv-${method.id}`}
+                                  maxLength={4}
+                                  value={editForm.cvv || ""}
+                                  onChange={(e) =>
+                                    setEditForm({
+                                      ...editForm,
+                                      cvv: e.target.value
+                                        .replace(/\D/g, "")
+                                        .slice(0, 4),
+                                    })
+                                  }
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        ) : (
+                          <div className="grid grid-cols-2 gap-4 text-sm">
+                            <div>
+                              <p className="text-muted-foreground">
+                                دارنده کارت
+                              </p>
+                              <p className="font-medium">
+                                {method.cardholderName}
+                              </p>
+                            </div>
+                            <div>
+                              <p className="text-muted-foreground">انقضا</p>
+                              <p className="font-medium">
+                                {formatExpiryShort(
+                                  method.expiryMonth,
+                                  method.expiryYear,
+                                )}
+                              </p>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Flipping Card on Right */}
+                    <div className="relative w-80">
+                      <CreditCard className="relative w-full max-w-none">
+                        <CreditCardFlipper>
+                          <CreditCardFront
+                            className={getCardBackground(method.bank)}
+                          >
+                            {/* Bank Logo */}
+                            <div className="absolute top-0 left-0">
+                              {getBankLogo(method.bank)}
+                            </div>
+
+                            <CreditCardChip />
+
+                            {/* Payment Provider Logo */}
+                            <div className="absolute right-0 bottom-0">
+                              {getPaymentProviderLogo(method.type)}
+                            </div>
+
+                            {/* Cardholder Name */}
+                            <CreditCardName className="absolute bottom-0 left-0">
+                              {method.cardholderName}
+                            </CreditCardName>
+                          </CreditCardFront>
+
+                          <CreditCardBack
+                            className={getCardBackground(method.bank)}
+                          >
+                            <CreditCardMagStripe />
+
+                            {/* Card Number on Back */}
+                            <CreditCardNumber className="absolute bottom-0 left-0">
+                              •••• •••• •••• {method.last4}
+                            </CreditCardNumber>
+
+                            {/* Expiry and CVV */}
+                            <div className="absolute top-1/2 flex -translate-y-1/2 gap-4">
+                              <CreditCardExpiry>
+                                {method.expiryMonth.toString().padStart(2, "0")}
+                                /{method.expiryYear.toString().slice(-2)}
+                              </CreditCardExpiry>
+                              <CreditCardCvv>{method.cvv}</CreditCardCvv>
+                            </div>
+                          </CreditCardBack>
+                        </CreditCardFlipper>
+                      </CreditCard>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious className="rtl:rotate-180" />
+            <CarouselNext className="rtl:rotate-180" />
+          </Carousel>
+
+          {/* Add new card button */}
+          <Button variant="outline" className="mt-4 w-full" size="lg">
+            <Plus className="ms-2 size-4" />
+            افزودن کارت جدید
+          </Button>
+
+          {/* Security note */}
+          <div className="mt-6 flex items-center justify-center gap-2 text-sm text-muted-foreground">
+            <Shield className="size-4" />
+            <span>اطلاعات پرداخت شما به‌صورت امن ذخیره می‌شود</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { PaymentMethods4 };
diff --git a/blocks/pricing1.tsx b/blocks/pricing1.tsx
new file mode 100644
index 0000000..23d43b9
--- /dev/null
+++ b/blocks/pricing1.tsx
@@ -0,0 +1,222 @@
+import { Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+// Features for each pricing tier
+const freeFeatures = [
+  "همکاری زنده",
+  "۱ گیگابایت فضای ذخیره",
+  "۲ پروژه",
+  "پشتیبانی پایه",
+  "شخصی‌سازی محدود",
+  "یکپارچه‌سازی محدود",
+  "دسترسی محدود به اتصال هوشمند",
+];
+
+const proFeatures = [
+  "۲ عضو تیم",
+  "۱۰ گیگابایت فضای ذخیره",
+  "۱۰ پروژه",
+  "پشتیبانی اولویت‌دار",
+  "شخصی‌سازی کامل",
+  "یکپارچه‌سازی کامل",
+  "دسترسی کامل به اتصال هوشمند",
+];
+
+const premiumFeatures = [
+  "۵ عضو تیم",
+  "۵۰ گیگابایت فضای ذخیره",
+  "۵۰ پروژه",
+  "پشتیبانی اختصاصی",
+  "شخصی‌سازی پیشرفته",
+  "تحلیل‌ها",
+  "گزارش‌ها",
+];
+
+const entrepriseFeatures = [
+  "بیش از ۱۰ عضو تیم",
+  "بیش از ۱۰۰ گیگابایت فضای ذخیره",
+  "بیش از ۱۰۰ پروژه",
+  "مدیر حساب اختصاصی",
+  "ویژگی‌های سفارشی",
+  "پشتیبانی سفارشی",
+  "یکپارچه‌سازی سفارشی",
+];
+
+// Pricing tier type definition
+type PricingTier = {
+  name: string;
+  description: string;
+  price: number | null;
+  bgClass: string;
+  interval: string;
+  buttonText: string;
+  buttonVariant:
+    | "default"
+    | "outline"
+    | "secondary"
+    | "destructive"
+    | "ghost"
+    | "link";
+  features: string[];
+  comparison: string;
+  hasPurchaseOption: boolean;
+};
+
+// Pricing tier data
+const pricingTiers: PricingTier[] = [
+  {
+    name: "رایگان",
+    description: "برای استفاده شخصی با امکانات و پشتیبانی محدود",
+    price: 0,
+    bgClass: "",
+    interval: "شامل ۱ کاربر.",
+    buttonText: "شروع کنید",
+    buttonVariant: "outline",
+    features: freeFeatures,
+    comparison: "امکانات",
+    hasPurchaseOption: false,
+  },
+  {
+    name: "حرفه‌ای",
+    description: "برای کسب‌وکارهای کوچک با تمام امکانات و پشتیبانی",
+    price: 290000,
+    bgClass: "bg-muted",
+    interval: "به ازای هر کاربر، ماهانه.",
+    buttonText: "خرید",
+    buttonVariant: "default",
+    features: proFeatures,
+    comparison: "همه‌چیز در رایگان، به‌علاوه:",
+    hasPurchaseOption: true,
+  },
+  {
+    name: "پریمیوم",
+    description:
+      "برای تیم‌ها و سازمان‌ها با امکانات و پشتیبانی پیشرفته",
+    price: 590000,
+    bgClass: "",
+    interval: "به ازای هر کاربر، ماهانه.",
+    buttonText: "خرید",
+    buttonVariant: "outline",
+    features: premiumFeatures,
+    comparison: "همه‌چیز در حرفه‌ای، به‌علاوه:",
+    hasPurchaseOption: true,
+  },
+  {
+    name: "سازمانی",
+    description:
+      "برای شرکت‌های بزرگ با امکانات سفارشی، پشتیبانی ویژه و مدیر حساب اختصاصی",
+    price: null,
+    bgClass: "",
+    interval: "",
+    buttonText: "تماس با فروش",
+    buttonVariant: "outline",
+    features: entrepriseFeatures,
+    comparison: "همه‌چیز در پریمیوم، به‌علاوه:",
+    hasPurchaseOption: false,
+  },
+];
+
+const PricingCard = ({
+  tier,
+  className,
+}: {
+  tier: PricingTier;
+  className?: string;
+}) => {
+  return (
+    <div className={cn("flex h-full flex-col", tier.bgClass, className)}>
+      {/* Card top part with fixed height */}
+      <div className="h-[360px] flex-none">
+        <div className="flex h-full flex-col">
+          {/* Header */}
+          <div className="px-8 pt-8 pb-3">
+            <h3 className="text-3xl font-semibold">{tier.name}</h3>
+          </div>
+
+          {/* Description */}
+          <div className="px-8 pb-6">
+            <p className="line-clamp-2 text-balance text-muted-foreground">
+              {tier.description}
+            </p>
+          </div>
+
+          {/* Price */}
+          <div className="flex grow flex-col justify-start px-8 pb-6">
+            {tier.price !== null && (
+              <div className="mb-4 flex items-start justify-center">
+                <div className="text-center">
+                  <p className="text-2xll font-semibold">
+                    {formatPrice(tier.price)}
+                  </p>
+                  {tier.interval && (
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      {tier.interval}
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* CTA Button */}
+          <div className="mt-auto px-8 pb-8">
+            <Button variant={tier.buttonVariant} className="w-full py-6">
+              {tier.buttonText}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Features */}
+      <div className="grow border-t p-8 text-start">
+        <p className="mb-4 text-lg font-semibold">{tier.comparison}</p>
+        <ul className="space-y-4">
+          {tier.features.map((feature, featureIndex) => (
+            <li key={featureIndex} className="flex items-center gap-3">
+              <Check className="size-5 text-primary" />
+              <span>{feature}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+interface Pricing1Props {
+  className?: string;
+}
+
+const Pricing1 = ({ className }: Pricing1Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-20 max-w-5xl text-center">
+          <h2 className="mb-3 text-xl font-bold text-pretty lg:text-2xll">
+            تعرفه‌ها
+          </h2>
+          <p className="text-muted-foreground lg:text-xl">
+            طرح‌های مقرون‌به‌صرفه ما را ببینید و مناسب‌ترین گزینه را انتخاب
+            کنید. اگر به طرح سفارشی نیاز دارید، با ما تماس بگیرید.
+          </p>
+        </div>
+
+        {/* Grid layout for pricing tiers */}
+        <div className="mx-auto grid max-w-xl rounded-md border lg:max-w-none lg:grid-cols-4 lg:divide-s">
+          {pricingTiers.map((tier) => (
+            <div key={tier.name} className={`${tier.bgClass} h-full`}>
+              <PricingCard tier={tier} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing1 };
diff --git a/blocks/pricing10.tsx b/blocks/pricing10.tsx
new file mode 100644
index 0000000..6a9c85f
--- /dev/null
+++ b/blocks/pricing10.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import { Check, X } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const renderAnnualPrice = (price: number, discount?: number) => {
+  if (!discount) {
+    return formatPrice(price);
+  }
+
+  return (
+    <span className="flex items-center">
+      {formatPrice(price)}
+      <Badge className="ms-1">{discount.toLocaleString("fa-IR")}٪-</Badge>
+    </span>
+  );
+};
+
+const plans = [
+  {
+    title: "رایگان",
+    description: "برای پروژه‌های متن‌باز",
+    price: { monthly: 9, annually: 90000 },
+    href: "#",
+    recommended: false,
+    image: "/block-media/shadcnblocks/block/block-1.svg",
+    featureGroups: [
+      {
+        title: "خلاصه",
+        features: [
+          {
+            title: "۳ کاربر",
+            icon: Check,
+          },
+        ],
+      },
+      {
+        title: "برجسته‌ها",
+        features: [
+          {
+            title: "امکان شامل‌شده",
+            icon: Check,
+          },
+          {
+            title: "امکان غیرفعال",
+            icon: X,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "پایه",
+    description: "برای پروژه‌های متن‌باز",
+    price: { monthly: 50, annually: 450000, annualDiscount: 10 },
+    href: "#",
+    recommended: false,
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+    featureGroups: [
+      {
+        title: "خلاصه",
+        features: [
+          {
+            title: "۱۰ کاربر",
+            icon: Check,
+          },
+        ],
+      },
+      {
+        title: "برجسته‌ها",
+        features: [
+          {
+            title: "امکان شامل‌شده",
+            icon: Check,
+          },
+          {
+            title: "امکان غیرفعال",
+            icon: X,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "تیم",
+    description: "برای پروژه‌های متن‌باز",
+    price: { monthly: 100, annually: 900000, annualDiscount: 10 },
+    href: "#",
+    recommended: true,
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+    featureGroups: [
+      {
+        title: "خلاصه",
+        features: [
+          {
+            title: "۵۰ کاربر",
+            icon: Check,
+          },
+        ],
+      },
+      {
+        title: "برجسته‌ها",
+        features: [
+          {
+            title: "امکان شامل‌شده",
+            icon: Check,
+          },
+          {
+            title: "امکان غیرفعال",
+            icon: X,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "سازمانی",
+    description: "برای پروژه‌های متن‌باز",
+    price: { monthly: 200, annually: 160000, annualDiscount: 20 },
+    href: "#",
+    recommended: false,
+    image: "/block-media/shadcnblocks/block/block-4.svg",
+    featureGroups: [
+      {
+        title: "خلاصه",
+        features: [
+          {
+            title: "کاربران نامحدود",
+            icon: Check,
+          },
+        ],
+      },
+      {
+        title: "برجسته‌ها",
+        features: [
+          {
+            title: "امکان شامل‌شده",
+            icon: Check,
+          },
+          {
+            title: "امکان غیرفعال",
+            icon: X,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+interface Pricing10Props {
+  className?: string;
+}
+
+const Pricing10 = ({ className }: Pricing10Props) => {
+  const [annualBilling, setAnnualBilling] = useState(false);
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container mb-8 lg:mb-0">
+        <div className="flex flex-col gap-y-12 md:gap-y-16">
+          <div className="flex flex-col">
+            <h1 className="my-6 text-3xl font-bold text-pretty md:text-xl xl:text-2xll">
+              طرح‌های تعرفه
+            </h1>
+            <p className="text-muted-foreground lg:text-xl">
+              طرح مناسب خود را انتخاب کنید و همین امروز شروع کنید.
+            </p>
+          </div>
+          <div className="lg:mb-8">
+            <div className="flex h-full flex-col justify-end">
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="annual-billing"
+                  checked={annualBilling}
+                  onCheckedChange={setAnnualBilling}
+                />
+                <Label htmlFor="annual-billing">صورتحساب سالانه</Label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container flex flex-col gap-6 gap-y-8 xl:grid xl:grid-cols-4">
+        {plans.map((plan) => (
+          <article
+            key={plan.title}
+            className={`rounded-xl border ${plan.recommended ? "border-primary" : "border-border lg:mt-7"} overflow-clip`}
+          >
+            {plan.recommended && (
+              <div className="flex h-7 items-center justify-center bg-primary text-center text-xs font-semibold text-primary-foreground">
+                پیشنهادی
+              </div>
+            )}
+            <header className="p-4 sm:p-6 xl:pt-12">
+              <div className="mb-6 md:flex md:items-center xl:block">
+                <div className="mb-1 flex md:flex-1 md:flex-row-reverse md:items-center xl:mb-6 xl:flex-col-reverse xl:items-start xl:gap-y-4">
+                  <div className="flex-1 md:ms-6 xl:ms-0">
+                    <p className="mb-1 text-xl font-medium sm:text-xl">
+                      {plan.title}
+                    </p>
+                    <p className="text-xs text-muted-foreground sm:text-sm 2xl:min-h-10">
+                      {plan.description}
+                    </p>
+                  </div>
+                  <img
+                    src={plan.image}
+                    alt={plan.title}
+                    className="size-16 sm:size-20"
+                  />
+                </div>
+                <div>
+                  <h2 className="mb-1 flex items-start text-xl font-medium md:text-3xl 2xl:text-xl">
+                    {annualBilling
+                      ? renderAnnualPrice(
+                          plan.price.annually,
+                          "annualDiscount" in plan.price
+                            ? plan.price.annualDiscount
+                            : undefined,
+                        )
+                      : formatPrice(plan.price.monthly)}
+                  </h2>
+                  <p className="text-xs font-medium text-muted-foreground">
+                    در ماه
+                  </p>
+                </div>
+              </div>
+              <div>
+                <Button
+                  variant={plan.recommended ? "default" : "outline"}
+                  className="w-full"
+                >
+                  رایگان شروع کنید
+                </Button>
+              </div>
+            </header>
+            <main className="space-y-6 border-t border-border p-4 sm:p-6 md:grid md:grid-cols-2 md:space-y-0 xl:block xl:space-y-6">
+              {plan.featureGroups.map((group) => (
+                <div key={group.title}>
+                  <h2 className="mb-3 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+                    {group.title}
+                  </h2>
+                  <ul className="space-y-3">
+                    {group.features.map((feature) => (
+                      <li
+                        key={feature.title}
+                        className="flex items-center gap-x-2 text-xs font-medium text-muted-foreground"
+                      >
+                        <feature.icon className="size-4" />
+                        {feature.title}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </main>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Pricing10 };
diff --git a/blocks/pricing11.tsx b/blocks/pricing11.tsx
new file mode 100644
index 0000000..5942d2c
--- /dev/null
+++ b/blocks/pricing11.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import { Check, ChevronDown, Info, X } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const plans = [
+  {
+    title: "رایگان",
+    price: { monthly: 9, annually: 90000 },
+    href: "#",
+    recommended: false,
+  },
+  {
+    title: "پایه",
+    price: { monthly: 50, annually: 450000 },
+    href: "#",
+    recommended: false,
+  },
+  {
+    title: "تیم",
+    price: { monthly: 100, annually: 900000 },
+    href: "#",
+    recommended: true,
+  },
+  {
+    title: "سازمانی",
+    price: { monthly: 200, annually: 160000 },
+    href: "#",
+    recommended: false,
+  },
+];
+
+const featureMatrix = [
+  {
+    title: "نمای کلی",
+    features: [
+      {
+        title: "امکان همیشه شامل‌شده",
+        inclusions: [
+          {
+            plan: "رایگان",
+            content:
+              "امکانات پایه برای شروع سریع و بدون هزینه.",
+          },
+          {
+            plan: "پایه",
+            content:
+              "امکانات بیشتر برای کسب‌وکارهای کوچک.",
+          },
+          {
+            plan: "تیم",
+            content: "امکانات تیمی برای همکاری بهتر.",
+          },
+          {
+            plan: "سازمانی",
+            content: "امکانات کامل برای سازمان‌های بزرگ.",
+          },
+        ],
+      },
+      {
+        title: "تعداد محصولات",
+        info: "حداکثر تعداد محصول قابل ثبت",
+        inclusions: [
+          { plan: "رایگان", content: "۱" },
+          { plan: "پایه", content: "۱" },
+          { plan: "تیم", content: "۳" },
+          { plan: "سازمانی", content: "۵" },
+        ],
+      },
+      {
+        title: "تعداد تراکنش‌ها",
+        info: "سقف تراکنش‌های ماهانه",
+        inclusions: [
+          { plan: "رایگان", content: "۳۰ در ماه" },
+          { plan: "پایه", content: "نامحدود" },
+          { plan: "تیم", content: "نامحدود" },
+          { plan: "سازمانی", content: "نامحدود" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "سایر امکانات",
+    features: [
+      {
+        title: "امکان پایه",
+        inclusions: [
+          {
+            plan: "رایگان",
+            content: <Check className="size-4 lg:size-5" />,
+          },
+          {
+            plan: "پایه",
+            content: <Check className="size-4 lg:size-5" />,
+          },
+          {
+            plan: "تیم",
+            content: <Check className="size-4 lg:size-5" />,
+          },
+          {
+            plan: "سازمانی",
+            content: <Check className="size-4 lg:size-5" />,
+          },
+        ],
+      },
+      {
+        title: "امکان سازمانی",
+        info: "فقط در طرح سازمانی در دسترس است",
+        inclusions: [
+          {
+            plan: "رایگان",
+            content: <X className="size-4 text-muted-foreground lg:size-5" />,
+          },
+          {
+            plan: "پایه",
+            content: <X className="size-4 text-muted-foreground lg:size-5" />,
+          },
+          {
+            plan: "تیم",
+            content: <X className="size-4 text-muted-foreground lg:size-5" />,
+          },
+          {
+            plan: "سازمانی",
+            content: <Check className="size-5" />,
+          },
+        ],
+      },
+      {
+        title: "امکان اختیاری",
+        info: "به‌صورت افزونه قابل فعال‌سازی است",
+        inclusions: [
+          {
+            plan: "رایگان",
+            content: <X className="size-4 text-muted-foreground lg:size-5" />,
+          },
+          {
+            plan: "پایه",
+            content: <X className="size-4 text-muted-foreground lg:size-5" />,
+          },
+          {
+            plan: "تیم",
+            content: <Badge>افزونه</Badge>,
+          },
+          {
+            plan: "سازمانی",
+            content: <Badge>افزونه</Badge>,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+interface Pricing11Props {
+  className?: string;
+}
+
+const Pricing11 = ({ className }: Pricing11Props) => {
+  const [billing, setBilling] = useState<"monthly" | "annually">("monthly");
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container mb-8 lg:mb-0">
+        <div className="grid grid-cols-2 gap-y-12 md:gap-y-16">
+          <div className="col-span-2 flex flex-col lg:col-span-1">
+            <h1 className="my-6 text-3xl font-bold text-pretty md:text-xl xl:text-2xll">
+              طرح‌های تعرفه
+            </h1>
+            <p className="text-muted-foreground lg:text-xl">
+              طرح مناسب خود را انتخاب کنید و همین امروز شروع کنید.
+            </p>
+          </div>
+        </div>
+        <div className="bg-background lg:sticky lg:top-16">
+          <div className="mb-8 pt-8">
+            <div className="grid items-end gap-6 border-b border-border pb-8 lg:grid-cols-6">
+              <div className="col-span-2">
+                <div className="flex h-full flex-col justify-end">
+                  <span className="mb-2 text-xs font-medium text-muted-foreground">
+                    صورتحساب
+                  </span>
+                  <Tabs
+                    value={billing}
+                    onValueChange={setBilling as (value: string) => void}
+                  >
+                    <TabsList>
+                      <TabsTrigger value="monthly">ماهانه</TabsTrigger>
+                      <TabsTrigger value="annually">سالانه</TabsTrigger>
+                    </TabsList>
+                  </Tabs>
+                </div>
+              </div>
+              {plans.map((plan) => (
+                <div
+                  key={plan.title}
+                  className="rounded-lg border border-border p-3 2xl:p-4"
+                >
+                  <h3 className="mb-1 text-xl font-medium xl:text-xl">
+                    {plan.title}
+                  </h3>
+                  <p className="mb-4 text-sm font-medium text-muted-foreground">
+                    {formatPrice(plan.price[billing])}
+                    <span className="hidden 2xl:inline"> در ماه</span>
+                  </p>
+                  <Button
+                    variant={plan.recommended ? "default" : "outline"}
+                    className="w-full"
+                  >
+                    <span className="2xl:hidden">ثبت‌نام</span>
+                    <span className="hidden 2xl:inline">رایگان شروع کنید</span>
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="space-y-8 lg:space-y-14">
+          {featureMatrix.map((category) => (
+            <div key={category.title}>
+              <h3 className="mb-6 text-lg font-medium lg:mb-3">
+                {category.title}
+              </h3>
+              <div className="space-y-4 lg:space-y-0">
+                <TooltipProvider delayDuration={150}>
+                  {category.features.map((feature) => (
+                    <Fragment key={feature.title}>
+                      <dl className="hidden grid-cols-6 gap-6 border-b border-border lg:grid">
+                        <dt className="col-span-2 justify-between py-4 pb-4">
+                          <Tooltip>
+                            <h4 className="group flex min-h-6 items-center gap-x-1 font-medium">
+                              {feature.title}{" "}
+                              {feature.info && (
+                                <TooltipTrigger asChild>
+                                  <Info className="ms-2 size-4 cursor-pointer text-muted-foreground group-hover:text-accent-foreground" />
+                                </TooltipTrigger>
+                              )}
+                            </h4>
+                            {feature.info && (
+                              <TooltipContent>{feature.info}</TooltipContent>
+                            )}
+                          </Tooltip>
+                        </dt>
+                        {feature.inclusions.map((inclusion) => (
+                          <dd
+                            key={inclusion.plan}
+                            className="hidden py-4 text-sm text-muted-foreground lg:block"
+                          >
+                            {inclusion.content}
+                          </dd>
+                        ))}
+                      </dl>
+                      <Collapsible
+                        className="group lg:hidden"
+                        defaultOpen={false}
+                      >
+                        <dl
+                          key={feature.title}
+                          className="border-b border-border"
+                        >
+                          <CollapsibleTrigger className="w-full">
+                            <dt className="flex items-center justify-between pb-4">
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <h4 className="group flex items-center gap-x-1 text-sm font-medium md:text-base">
+                                    {feature.title}
+                                    {feature.info && (
+                                      <Info className="ms-2 size-4 cursor-pointer text-muted-foreground group-hover:text-accent-foreground" />
+                                    )}
+                                  </h4>
+                                </TooltipTrigger>
+                                {feature.info && (
+                                  <TooltipContent>
+                                    {feature.info}
+                                  </TooltipContent>
+                                )}
+                              </Tooltip>
+
+                              <ChevronDown className='size-5 transition-transform group-data-[state="open"]:rotate-180' />
+                            </dt>
+                          </CollapsibleTrigger>
+                          <CollapsibleContent>
+                            {feature.inclusions.map((inclusion) => (
+                              <dd
+                                key={inclusion.plan}
+                                className="flex items-center border-b border-border py-3 text-xs text-muted-foreground last:border-b-0 md:py-3.5"
+                              >
+                                <div className="w-1/2 md:w-1/4">
+                                  {inclusion.plan}
+                                </div>
+                                {inclusion.content}
+                              </dd>
+                            ))}
+                          </CollapsibleContent>
+                        </dl>
+                      </Collapsible>
+                    </Fragment>
+                  ))}
+                </TooltipProvider>
+              </div>
+            </div>
+          ))}
+        </div>
+        <p className="mt-4 hidden text-xs text-muted-foreground md:block">
+          * توضیحات و شرایط تکمیلی
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing11 };
diff --git a/blocks/pricing12.tsx b/blocks/pricing12.tsx
new file mode 100644
index 0000000..698f8e6
--- /dev/null
+++ b/blocks/pricing12.tsx
@@ -0,0 +1,153 @@
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const featuredAddons = [
+  {
+    id: "addon-1",
+    title: "افزونه ۱",
+    description: "امکانات تکمیلی برای گسترش قابلیت‌های پایه حساب کاربری.",
+    price: 199000,
+  },
+  {
+    id: "addon-2",
+    title: "افزونه ۲",
+    description: "ابزارهای پیشرفته برای تیم‌های در حال رشد.",
+    price: 199000,
+  },
+  {
+    id: "addon-3",
+    title: "افزونه ۳",
+    description: "یکپارچه‌سازی و گزارش‌دهی حرفه‌ای برای کسب‌وکارها.",
+    price: 199000,
+  },
+];
+
+const otherAddons = [
+  {
+    id: "addon-4",
+    title: "افزونه ۴",
+    description: "افزودن فضای ذخیره‌سازی اضافه به حساب شما.",
+    price: 90000,
+    image: "/block-media/shadcnblocks/block/block-2.svg",
+  },
+  {
+    id: "addon-5",
+    title: "افزونه ۵",
+    description: "دسترسی به قالب‌ها و کامپوننت‌های آماده.",
+    price: 190000,
+    image: "/block-media/shadcnblocks/block/block-3.svg",
+  },
+  {
+    id: "addon-6",
+    title: "افزونه ۶",
+    description: "پشتیبانی اولویت‌دار و پاسخ‌گویی سریع‌تر.",
+    price: 190000,
+    priceFootnote: "این یک یادداشت توضیحی است.",
+    image: "/block-media/shadcnblocks/block/block-4.svg",
+  },
+];
+
+interface Pricing12Props {
+  className?: string;
+}
+
+const Pricing12 = ({ className }: Pricing12Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="rounded-xl border border-border py-6 md:py-8 lg:pt-16 lg:pb-12">
+          <div className="px-6 md:px-8 lg:px-12">
+            <div className="mb-8 md:mb-10 md:flex md:justify-between lg:mb-9">
+              <div className="lg:w-2/3">
+                <h1 className="mb-4 text-xl font-medium md:text-3xl lg:text-xl">
+                  افزونه‌های تکمیلی
+                </h1>
+                <p className="text-xs text-muted-foreground md:text-sm lg:text-base">
+                  با افزودن ماژول‌های تکمیلی، امکانات حساب خود را متناسب با
+                  نیازتان گسترش دهید.
+                </p>
+              </div>
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                alt="افزونه‌ها"
+                className="hidden size-24 md:block lg:size-32"
+              />
+            </div>
+            <div className="flex flex-col gap-x-8 gap-y-3 xl:flex-row">
+              {featuredAddons.map((addon) => (
+                <div
+                  key={addon.id}
+                  className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8"
+                >
+                  <h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
+                    {addon.title}
+                  </h2>
+                  <div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
+                    <p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
+                      {addon.description}
+                    </p>
+                    <div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
+                      <p>
+                        <span className="font-medium lg:text-xl">
+                          {formatPrice(addon.price)}
+                        </span>
+                        <span className="text-xs font-medium text-muted-foreground">
+                          {" "}
+                          در ماه
+                        </span>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="mt-6 border-t border-border md:mt-8 lg:mt-10">
+            <div className="divide-y divide-border px-6 md:px-8 lg:px-12">
+              {otherAddons.map((addon) => (
+                <div
+                  key={addon.id}
+                  className="flex flex-col gap-4 py-6 last:pb-0 md:flex-row md:items-center md:justify-between md:gap-x-12 lg:py-10"
+                >
+                  <div className="flex items-center md:max-w-md md:gap-4 lg:max-w-full lg:gap-6">
+                    <img
+                      src={addon.image}
+                      alt={addon.title}
+                      className="hidden shrink-0 md:block md:size-16 lg:size-20"
+                    />
+                    <div className="max-w-md space-y-1 lg:max-w-md lg:space-y-2">
+                      <p className="mb-1.5 text-lg font-medium md:text-xl lg:mb-2 lg:text-xl">
+                        {addon.title}
+                      </p>
+                      <p className="text-xs text-muted-foreground md:text-xs lg:text-base">
+                        {addon.description}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="shrink-0 md:self-end md:text-end">
+                    <span className="text-xl font-medium md:text-3xl lg:text-xl">
+                      {formatPrice(addon.price)}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {" "}
+                      در ماه
+                    </span>
+                    {addon.priceFootnote && (
+                      <div className="mt-1 text-xs font-medium text-muted-foreground md:max-w-[8rem] lg:max-w-full">
+                        * {addon.priceFootnote}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing12 };
diff --git a/blocks/pricing13.tsx b/blocks/pricing13.tsx
new file mode 100644
index 0000000..e25e3fb
--- /dev/null
+++ b/blocks/pricing13.tsx
@@ -0,0 +1,100 @@
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing13Props {
+  className?: string;
+}
+
+const Pricing13 = ({ className }: Pricing13Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="rounded-xl border border-border py-6 md:py-8 lg:pt-16 lg:pb-12">
+          <div className="px-6 md:px-8 lg:px-12">
+            <div className="mb-8 md:mb-10 md:flex md:justify-between lg:mb-9">
+              <div className="lg:w-2/3">
+                <h1 className="mb-4 text-xl font-medium md:text-3xl lg:text-xl">
+                  افزونه‌های تکمیلی
+                </h1>
+                <p className="text-xs text-muted-foreground md:text-sm lg:text-base">
+                  با افزودن ماژول‌های تکمیلی، امکانات حساب خود را متناسب با
+                  نیازتان گسترش دهید.
+                </p>
+              </div>
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                alt="افزونه‌ها"
+                className="hidden size-24 md:block lg:size-32"
+              />
+            </div>
+            <div className="flex flex-col gap-x-8 gap-y-3 xl:flex-row">
+              <div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
+                <h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
+                  افزونه ۱
+                </h2>
+                <div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
+                  <p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
+                    امکانات پایه برای شروع سریع و بدون پیچیدگی.
+                  </p>
+                  <div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
+                    <p>
+                      <span className="font-medium lg:text-xl">
+                        {formatPrice(90000)}
+                      </span>
+                      <span className="text-xs font-medium text-muted-foreground">
+                        {" "}
+                        در ماه
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
+                <h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
+                  افزونه ۲
+                </h2>
+                <div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
+                  <p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
+                    ابزارهای پیشرفته برای تیم‌های در حال رشد.
+                  </p>
+                  <div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
+                    <p>
+                      <span className="font-medium lg:text-xl">
+                        {formatPrice(990000)}
+                      </span>
+                      <span className="text-xs font-medium text-muted-foreground">
+                        {" "}
+                        در ماه
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
+                <h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
+                  افزونه ۳
+                </h2>
+                <div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
+                  <p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
+                    راهکار سفارشی برای سازمان‌های بزرگ.
+                  </p>
+                  <div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
+                    <p>
+                      <span className="font-medium lg:text-xl">
+                        تماس با فروش
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing13 };
diff --git a/blocks/pricing14.tsx b/blocks/pricing14.tsx
new file mode 100644
index 0000000..4513ea9
--- /dev/null
+++ b/blocks/pricing14.tsx
@@ -0,0 +1,88 @@
+import { Check } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing14Props {
+  className?: string;
+}
+
+const Pricing14 = ({ className }: Pricing14Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-5xl rounded-lg bg-muted p-6 md:p-10">
+          <div className="mb-12 flex items-center gap-3">
+            <span className="text-xl font-bold">طرح استاندارد</span>
+            <Badge
+              variant="outline"
+              className="border-green-200 bg-green-100 text-green-600"
+            >
+              ۲۰٪ تخفیف
+            </Badge>
+          </div>
+          <div className="flex flex-col justify-between gap-6 md:flex-row">
+            <h2 className="max-w-xl text-3xl font-bold md:text-xl">
+              ایده خود را در چند دقیقه با این طرح راه‌اندازی کنید
+            </h2>
+            <div className="md:text-end">
+              <span className="text-3xl font-bold md:text-2xll">
+                {formatPrice(1999000)}
+              </span>
+              <p className="text-muted-foreground">
+                قیمت پایه به ازای هر پروژه
+              </p>
+            </div>
+          </div>
+          <Separator className="my-8" />
+          <div>
+            <p className="mb-5 text-muted-foreground">
+              پروژه خود را با امکانات زیر راه‌اندازی کنید:
+            </p>
+            <div className="flex flex-col justify-between gap-10 md:flex-row md:gap-20">
+              <ul className="grid gap-x-20 gap-y-4 font-medium md:grid-cols-2">
+                <li className="flex items-center gap-2">
+                  <Check className="size-4 shrink-0" />
+                  پروژه‌های نامحدود
+                </li>
+                <li className="flex items-center gap-2">
+                  <Check className="size-4 shrink-0" />
+                  پشتیبانی چت زنده
+                </li>
+                <li className="flex items-center gap-2">
+                  <Check className="size-4 shrink-0" />
+                  همکاری زنده
+                </li>
+                <li className="flex items-center gap-2">
+                  <Check className="size-4 shrink-0" />
+                  دامنه سفارشی
+                </li>
+                <li className="flex items-center gap-2">
+                  <Check className="size-4 shrink-0" />
+                  کاربران نامحدود
+                </li>
+                <li className="flex items-center gap-2">
+                  <Check className="size-4 shrink-0" />
+                  فضای ذخیره نامحدود
+                </li>
+              </ul>
+              <div className="flex flex-col gap-4">
+                <Button size="lg">رزرو دمو</Button>
+                <Button variant="outline" size="lg">
+                  بیشتر بدانید
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing14 };
diff --git a/blocks/pricing15.tsx b/blocks/pricing15.tsx
new file mode 100644
index 0000000..5beecc9
--- /dev/null
+++ b/blocks/pricing15.tsx
@@ -0,0 +1,58 @@
+import { Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const features = [
+  "پروژه‌ها و وظایف نامحدود",
+  "کاربران و همکاران نامحدود",
+  "۱۰۰ گیگابایت فضای ذخیره",
+  "پشتیبانی اولویت‌دار و کمک فوری",
+  "دامنه و برندسازی سفارشی",
+];
+
+interface Pricing15Props {
+  className?: string;
+}
+
+const Pricing15 = ({ className }: Pricing15Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-10 md:flex-row">
+          <div className="w-auto md:w-1/2 lg:w-2/3">
+            <h2 className="mb-4 text-xl font-bold text-balance md:text-2xll">
+              یک طرح، دسترسی نامحدود
+            </h2>
+            <p className="mb-4 text-lg text-muted-foreground">
+              با یک طرح ساده به تمام امکانات دسترسی داشته باشید و بدون محدودیت
+              روی پروژه‌های خود کار کنید.
+            </p>
+            <Button variant="default" size="lg">
+              خرید اشتراک
+            </Button>
+          </div>
+          <div className="w-auth rounded-md border bg-muted p-11 md:w-1/2 lg:w-1/3">
+            <p className="text-2xll font-bold">
+              {formatPrice(199000)}
+              <span className="text-lg">در ماه</span>
+            </p>
+            <ul className="space-y-4 pt-5 font-medium">
+              {features.map((feature, index) => (
+                <li key={index} className="flex">
+                  <Check className="me-2" />
+                  <span className="text-muted-foreground">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing15 };
diff --git a/blocks/pricing16.tsx b/blocks/pricing16.tsx
new file mode 100644
index 0000000..783e76f
--- /dev/null
+++ b/blocks/pricing16.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import { CheckCircle2, Zap } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing16Props {
+  className?: string;
+}
+
+const Pricing16 = ({ className }: Pricing16Props) => {
+  const [isMonthly, setIsMonthly] = useState(true);
+
+  return (
+    <section className={cn("bg-muted/50 py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6">
+          <Badge variant="outline">تعرفه‌ها</Badge>
+          <h1 className="text-center text-xl font-semibold text-balance sm:text-2xll lg:text-2xll">
+            قیمت‌گذاری ساده برای همه؛ همین امروز رایگان شروع کنید
+          </h1>
+          <Tabs
+            value={isMonthly ? "monthly" : "yearly"}
+            onValueChange={(value) => setIsMonthly(value === "monthly")}
+            className="w-80"
+          >
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="monthly">صورتحساب ماهانه</TabsTrigger>
+              <TabsTrigger value="yearly">صورتحساب سالانه</TabsTrigger>
+            </TabsList>
+          </Tabs>
+          <div className="mx-auto mt-4 grid w-full max-w-5xl gap-6 lg:grid-cols-3">
+            <div className="w-full rounded-lg border bg-background p-8 shadow-sm lg:max-w-96">
+              <div className="flex flex-col gap-1">
+                <h3 className="text-xl font-semibold">رایگان</h3>
+                <p className="text-sm text-muted-foreground">رایگان برای همیشه</p>
+              </div>
+              <Separator className="my-6" />
+              <div className="font-semibold">
+                <p className="text-2xll leading-none">{formatPrice(0)}</p>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                به ازای هر کاربر در ماه، صورتحساب{" "}
+                {isMonthly ? "ماهانه" : "سالانه"}
+              </p>
+              <Button variant="outline" className="mt-4 mb-2 w-full">
+                رایگان شروع کنید
+              </Button>
+              <p className="text-center text-sm text-muted-foreground">
+                نیاز به کارت اعتباری نیست
+              </p>
+              <Separator className="my-6" />
+              <div>
+                <p className="mb-3 text-sm font-semibold">امکانات کلیدی:</p>
+                <ul className="flex flex-col gap-2">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>تا ۵ پروژه</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>تا ۵ کاربر</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>تا ۵۰ وظیفه</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>مدیریت وظایف</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>تحلیل‌ها و گزارش‌ها</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="w-full rounded-lg border bg-background p-8 shadow-sm lg:max-w-96">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-xl font-semibold">شروع</h3>
+                  <Badge className="flex items-center gap-1">
+                    <Zap className="size-3" />
+                    محبوب
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  برای تیم‌های کوچک و استارتاپ‌ها
+                </p>
+              </div>
+              <Separator className="my-6" />
+              <div className="flex items-center gap-2">
+                <div className="font-semibold">
+                  <p className="text-2xll leading-none">
+                    {formatPrice(isMonthly ? 20 : 15)}
+                  </p>
+                </div>
+                {!isMonthly && (
+                  <div className="flex flex-col text-sm">
+                    <p className="font-semibold text-destructive">۲۵٪ تخفیف</p>
+                    <p className="text-muted-foreground line-through">
+                      {formatPrice(200000)}
+                    </p>
+                  </div>
+                )}
+              </div>
+              <p className="text-sm text-muted-foreground">
+                به ازای هر کاربر در ماه، صورتحساب{" "}
+                {isMonthly ? "ماهانه" : "سالانه"}
+              </p>
+              <Button className="mt-4 mb-2 w-full">۱۴ روز رایگان امتحان کنید</Button>
+              <p className="text-center text-sm text-muted-foreground">
+                نیاز به کارت اعتباری نیست
+              </p>
+              <Separator className="my-6" />
+              <div>
+                <p className="mb-3 text-sm font-semibold">امکانات کلیدی:</p>
+                <ul className="flex flex-col gap-2">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>پروژه‌های نامحدود</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>کاربران نامحدود</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>وظایف نامحدود</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>فضای ذخیره فایل</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>گردش‌کارهای قابل شخصی‌سازی</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="w-full rounded-lg border bg-background p-8 shadow-sm lg:max-w-96">
+              <div className="flex flex-col gap-1">
+                <h3 className="text-xl font-semibold">سازمانی</h3>
+                <p className="text-sm text-muted-foreground">
+                  برای تیم‌های بزرگ و سازمان‌ها
+                </p>
+              </div>
+              <Separator className="my-6" />
+              <div className="flex items-center gap-2">
+                <div className="font-semibold">
+                  <p className="text-2xll leading-none">
+                    {formatPrice(isMonthly ? 40 : 30)}
+                  </p>
+                </div>
+                {!isMonthly && (
+                  <div className="flex flex-col text-sm">
+                    <p className="font-semibold text-destructive">۲۵٪ تخفیف</p>
+                    <p className="text-muted-foreground line-through">
+                      {formatPrice(400000)}
+                    </p>
+                  </div>
+                )}
+              </div>
+              <p className="text-sm text-muted-foreground">
+                به ازای هر کاربر در ماه، صورتحساب{" "}
+                {isMonthly ? "ماهانه" : "سالانه"}
+              </p>
+              <Button variant="outline" className="mt-4 mb-2 w-full">
+                ۱۴ روز رایگان امتحان کنید
+              </Button>
+              <p className="text-center text-sm text-muted-foreground">
+                نیاز به کارت اعتباری نیست
+              </p>
+              <Separator className="my-6" />
+              <div>
+                <p className="mb-3 text-sm font-semibold">امکانات کلیدی:</p>
+                <ul className="flex flex-col gap-2">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>یکپارچه‌سازی نامحدود</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>بازخورد خودکار</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>دسترسی اتصال هوشمند</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>احراز هویت احراز هویت سازمانی</p>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
+                    <p>پشتیبانی اختصاصی</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing16 };
diff --git a/blocks/pricing2.tsx b/blocks/pricing2.tsx
new file mode 100644
index 0000000..22c3124
--- /dev/null
+++ b/blocks/pricing2.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { CircleCheck } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface PricingFeature {
+  text: string;
+}
+
+interface PricingPlan {
+  id: string;
+  name: string;
+  description: string;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  features: PricingFeature[];
+  button: {
+    text: string;
+    url: string;
+  };
+}
+
+interface Pricing2Props {
+  heading?: string;
+  description?: string;
+  plans?: PricingPlan[];
+  className?: string;
+}
+
+const Pricing2 = ({
+  heading = "تعرفه‌ها",
+  description = "طرح‌های مقرون‌به‌صرفه ما را ببینید",
+  plans = [
+    {
+      id: "plus",
+      name: "پلاس",
+      description: "برای استفاده شخصی",
+      monthlyPrice: 190000,
+      yearlyPrice: 179000,
+      features: [
+        { text: "تا ۵ عضو تیم" },
+        { text: "کتابخانه کامپوننت‌های پایه" },
+        { text: "پشتیبانی انجمن" },
+        { text: "۱ گیگابایت فضای ذخیره" },
+      ],
+      button: {
+        text: "خرید",
+        url: "https://ShadcnBlocks",
+      },
+    },
+    {
+      id: "pro",
+      name: "حرفه‌ای",
+      description: "برای حرفه‌ای‌ها",
+      monthlyPrice: 490000,
+      yearlyPrice: 359000,
+      features: [
+        { text: "اعضای تیم نامحدود" },
+        { text: "کامپوننت‌های پیشرفته" },
+        { text: "پشتیبانی اولویت‌دار" },
+        { text: "فضای ذخیره نامحدود" },
+      ],
+      button: {
+        text: "خرید",
+        url: "https://ShadcnBlocks",
+      },
+    },
+  ],
+  className,
+}: Pricing2Props) => {
+  const [isYearly, setIsYearly] = useState(false);
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
+          <h2 className="text-xl font-semibold text-pretty lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="text-muted-foreground lg:text-xl">{description}</p>
+          <div className="flex items-center gap-3 text-lg">
+            ماهانه
+            <Switch
+              checked={isYearly}
+              onCheckedChange={() => setIsYearly(!isYearly)}
+            />
+            سالانه
+          </div>
+          <div className="flex flex-col items-stretch gap-6 md:flex-row">
+            {plans.map((plan) => (
+              <Card
+                key={plan.id}
+                className="flex w-80 flex-col justify-between text-start"
+              >
+                <CardHeader>
+                  <CardTitle>
+                    <p>{plan.name}</p>
+                  </CardTitle>
+                  <p className="text-sm text-muted-foreground">
+                    {plan.description}
+                  </p>
+                  <div className="flex items-end gap-1">
+                    <span className="text-xl font-semibold">
+                      {formatPrice(
+                        isYearly ? plan.yearlyPrice : plan.monthlyPrice,
+                      )}
+                    </span>
+                    <span className="text-xl font-semibold text-muted-foreground">
+                      {isYearly ? "در سال" : "در ماه"}
+                    </span>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <Separator className="mb-6" />
+                  {plan.id === "pro" && (
+                    <p className="mb-3 font-semibold">
+                      همه‌چیز در پلاس، به‌علاوه:
+                    </p>
+                  )}
+                  <ul className="space-y-4">
+                    {plan.features.map((feature, index) => (
+                      <li
+                        key={index}
+                        className="flex items-center gap-2 text-sm"
+                      >
+                        <CircleCheck className="size-4 shrink-0" />
+                        <span>{feature.text}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+                <CardFooter className="mt-auto">
+                  <Button asChild className="w-full">
+                    <a href={plan.button.url} target="_blank">
+                      {plan.button.text}
+                    </a>
+                  </Button>
+                </CardFooter>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing2 };
diff --git a/blocks/pricing20.tsx b/blocks/pricing20.tsx
new file mode 100644
index 0000000..3351fde
--- /dev/null
+++ b/blocks/pricing20.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BadgeDollarSign,
+  Briefcase,
+  Building,
+  Rocket,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const pricingPlans = [
+  {
+    icon: Rocket,
+    name: "طرح پایه",
+    price: {
+      monthly: 19,
+      yearly: 199,
+    },
+    features: [
+      "ابزارهای پایه مدیریت وظایف",
+      "همگام‌سازی تقویم با یکپارچه‌سازی محدود",
+      "دسترسی به ۱ داشبورد برای پیگیری وظایف",
+      "پیشنهادها و بینش‌های محدود هوش مصنوعی",
+      "پشتیبانی پایه و دسترسی به انجمن",
+    ],
+  },
+  {
+    icon: Briefcase,
+    name: "طرح تجاری",
+    price: {
+      monthly: 29,
+      yearly: 299,
+    },
+    features: [
+      "همه‌چیز در طرح رایگان، به‌علاوه:",
+      "لیست وظایف نامحدود",
+      "همگام‌سازی پیشرفته تقویم",
+      "بینش‌های مبتنی بر هوش مصنوعی",
+      "دسترسی به داشبوردهای سفارشی",
+      "پشتیبانی ایمیل با اولویت",
+    ],
+  },
+  {
+    icon: Building,
+    name: "طرح سازمانی",
+    price: {
+      monthly: 49,
+      yearly: 499,
+    },
+    features: [
+      "همه‌چیز در طرح حرفه‌ای، به‌علاوه:",
+      "مدیر حساب اختصاصی",
+      "یکپارچه‌سازی‌های سفارشی",
+      "همکاری بلادرنگ",
+      "دسترسی مبتنی بر نقش",
+      "پشتیبانی اولویت‌دار ۲۴/۷",
+    ],
+  },
+];
+
+interface Pricing20Props {
+  className?: string;
+}
+
+const Pricing20 = ({ className }: Pricing20Props) => {
+  const [isMonthly] = useState(true);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container flex flex-col gap-6 border-s border-e py-4 lg:py-8">
+          <Badge
+            variant="outline"
+            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <BadgeDollarSign className="size-4" />
+            <span>پیشنهاد ویژه</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
+            تعرفه برای همه
+          </h2>
+          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
+            طرحی را انتخاب کنید که با نیازهای بهره‌وری شما هماهنگ باشد
+          </p>
+        </div>
+      </div>
+
+      <div className="container mt-10 lg:mt-14">
+        <section className="grid border max-lg:divide-y lg:grid-cols-3 lg:divide-s">
+          {pricingPlans.map((plan, index) => (
+            <div key={index} className="flex flex-col justify-between p-6">
+              <div className="space-y-2 border-b pb-6">
+                <div className="flex items-center gap-2.5 text-muted-foreground">
+                  <plan.icon className="size-4" />
+                  <h3 className="text-xl tracking-[-0.8px]">{plan.name}</h3>
+                </div>
+
+                <>
+                  <div className="flex items-baseline font-medium">
+                    <span className="text-[3.5rem] leading-[120%] tracking-[-3.92px]">
+                      {formatPrice(
+                        isMonthly ? plan.price.monthly : plan.price.yearly,
+                      )}
+                    </span>
+                    <span className="text-muted-foreground-subtle text-xl tracking-[-0.96px]">
+                      {isMonthly ? "در ماه" : "در سال"}
+                    </span>
+                  </div>
+                  <p className="text-muted-foreground">
+                    {isMonthly
+                      ? `یا ${formatPrice(plan.price.yearly)} سالانه`
+                      : `یا ${formatPrice(plan.price.monthly)} در ماه`}
+                  </p>
+                </>
+              </div>
+
+              <div className="pt-6">
+                <h4 className="text-muted-foreground-subtle">امکانات شامل‌شده</h4>
+                <ul className="mt-4 space-y-4">
+                  {plan.features.map((feature, index) => (
+                    <li key={index} className="flex items-center gap-4">
+                      <BadgeCheck className="size-6 shrink-0 text-muted-foreground" />
+                      <span className="tracking-[-0.32px] text-muted-foreground">
+                        {feature}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <Button
+                variant={index === 1 ? "default" : "secondary"}
+                className="mt-12"
+              >
+                شروع کنید
+              </Button>
+            </div>
+          ))}
+        </section>
+      </div>
+
+      <div className="mt-12 h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container h-full w-full border-s border-e"></div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing20 };
diff --git a/blocks/pricing21.tsx b/blocks/pricing21.tsx
new file mode 100644
index 0000000..5250831
--- /dev/null
+++ b/blocks/pricing21.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BadgeDollarSign,
+  Briefcase,
+  Building,
+  Rocket,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface FeatureSection {
+  category: string;
+  features: {
+    name: string;
+    basic: string | boolean;
+    business: string | boolean;
+    enterprise: string | boolean;
+  }[];
+}
+
+const pricingPlans = [
+  {
+    icon: Rocket,
+    name: "طرح پایه",
+    price: {
+      monthly: 19,
+      yearly: 199,
+    },
+    features: [
+      "ابزارهای پایه مدیریت وظایف",
+      "همگام‌سازی تقویم با یکپارچه‌سازی محدود",
+      "دسترسی به ۱ داشبورد برای پیگیری وظایف",
+      "پیشنهادها و بینش‌های محدود هوش مصنوعی",
+      "پشتیبانی پایه و دسترسی به انجمن",
+    ],
+  },
+  {
+    icon: Briefcase,
+    name: "طرح تجاری",
+    price: {
+      monthly: 29,
+      yearly: 299,
+    },
+    features: [
+      "همه‌چیز در طرح رایگان، به‌علاوه:",
+      "لیست وظایف نامحدود",
+      "همگام‌سازی پیشرفته تقویم",
+      "بینش‌های مبتنی بر هوش مصنوعی",
+      "دسترسی به داشبوردهای سفارشی",
+      "پشتیبانی ایمیل با اولویت",
+    ],
+  },
+  {
+    icon: Building,
+    name: "طرح سازمانی",
+    price: {
+      monthly: 49,
+      yearly: 499,
+    },
+    features: [
+      "همه‌چیز در طرح حرفه‌ای، به‌علاوه:",
+      "مدیر حساب اختصاصی",
+      "یکپارچه‌سازی‌های سفارشی",
+      "همکاری بلادرنگ",
+      "دسترسی مبتنی بر نقش",
+      "پشتیبانی اولویت‌دار ۲۴/۷",
+    ],
+  },
+];
+
+const comparisonFeatures: FeatureSection[] = [
+  {
+    category: "ابزارهای اصلی",
+    features: [
+      {
+        name: "مدیریت وظایف",
+        basic: "۱۰",
+        business: "۲۵",
+        enterprise: "نامحدود",
+      },
+      {
+        name: "همگام‌سازی تقویم",
+        basic: true,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "یادآورها",
+        basic: true,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "همکاری",
+        basic: false,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "اعلان‌ها",
+        basic: false,
+        business: false,
+        enterprise: true,
+      },
+    ],
+  },
+  {
+    category: "بینش بهره‌وری",
+    features: [
+      {
+        name: "تحلیل‌ها",
+        basic: "۱۰",
+        business: "۲۵",
+        enterprise: "نامحدود",
+      },
+      {
+        name: "گزارش‌ها",
+        basic: true,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "ثبت زمان",
+        basic: true,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "پیگیری اهداف",
+        basic: false,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "روندها",
+        basic: false,
+        business: false,
+        enterprise: true,
+      },
+    ],
+  },
+  {
+    category: "اتوماسیون گردش کار",
+    features: [
+      {
+        name: "اتوماسیون وظایف",
+        basic: "۱۰",
+        business: "۲۵",
+        enterprise: "نامحدود",
+      },
+      {
+        name: "وظایف تکرارشونده",
+        basic: true,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "یکپارچه‌سازی‌ها",
+        basic: true,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "دسترسی اتصال هوشمند",
+        basic: false,
+        business: true,
+        enterprise: true,
+      },
+      {
+        name: "قالب‌های گردش کار",
+        basic: false,
+        business: false,
+        enterprise: true,
+      },
+    ],
+  },
+];
+
+interface Pricing21Props {
+  className?: string;
+}
+
+const Pricing21 = ({ className }: Pricing21Props) => {
+  const [isMonthly, setIsMonthly] = useState(true);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container flex flex-col gap-6 border-s border-e py-4 lg:py-8">
+          <Badge
+            variant="outline"
+            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <BadgeDollarSign className="size-4" />
+            <span>پیشنهاد ویژه</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
+            تعرفه برای همه
+          </h2>
+          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
+            طرحی را انتخاب کنید که با نیازهای بهره‌وری شما هماهنگ باشد
+          </p>
+        </div>
+      </div>
+
+      <div className="container">
+        <section className="py-14 md:py-20 lg:py-24">
+          <div className="flex justify-center">
+            <div className="inline-flex gap-[2px] rounded-md border p-[2px]">
+              <Button
+                variant={isMonthly ? "default" : "outline"}
+                onClick={() => setIsMonthly(true)}
+                className="transition-colors"
+              >
+                ماهانه
+              </Button>
+              <Button
+                variant={!isMonthly ? "default" : "outline"}
+                onClick={() => setIsMonthly(false)}
+                className="transition-colors"
+              >
+                سالانه
+              </Button>
+            </div>
+          </div>
+          <div className="mt-12 overflow-x-auto">
+            <PlanHeaders isMonthly={isMonthly} />
+            <FeatureSections />
+          </div>
+        </section>
+      </div>
+
+      <div className="mt-12 h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container h-full w-full border-s border-e"></div>
+      </div>
+    </section>
+  );
+};
+
+const PlanHeaders = ({ isMonthly }: { isMonthly: boolean }) => (
+  <div className="grid grid-cols-4">
+    <div className="col-span-1 max-lg:hidden max-lg:border"></div>
+    <div className="col-span-4 grid gap-4 border-t max-lg:divide-y max-lg:border lg:col-span-3 lg:grid-cols-3 lg:divide-s">
+      {pricingPlans.map((plan, index) => (
+        <div key={index} className="flex flex-col p-6">
+          <div className="space-y-2 pb-6">
+            <div className="flex items-center gap-2.5 text-muted-foreground">
+              <plan.icon className="size-4" />
+              <h3 className="text-xl tracking-[-0.8px]">{plan.name}</h3>
+            </div>
+            <>
+              <div className="flex items-baseline font-medium">
+                <span className="text-[3.5rem] leading-[120%] tracking-[-3.92px]">
+                  {formatPrice(
+                    isMonthly ? plan.price.monthly : plan.price.yearly,
+                  )}
+                </span>
+                <span className="text-muted-foreground-subtle text-xl tracking-[-0.96px]">
+                  {isMonthly ? "در ماه" : "در سال"}
+                </span>
+              </div>
+              <p className="text-muted-foreground">
+                {isMonthly
+                  ? `یا ${formatPrice(plan.price.yearly)} سالانه`
+                  : `یا ${formatPrice(plan.price.monthly)} در ماه`}
+              </p>
+            </>
+          </div>
+          <Button className="mt-auto">شروع کنید</Button>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const FeatureSections = () => (
+  <>
+    {comparisonFeatures.map((section, sectionIndex) => (
+      <div
+        key={sectionIndex}
+        className={`border-b first:border-t ${sectionIndex === 0 ? "border-t" : ""}`}
+      >
+        <div className="py-4">
+          <h3 className="text-lg tracking-[-0.36px]">{section.category}</h3>
+        </div>
+        {section.features.map((feature, featureIndex) => (
+          <div
+            key={featureIndex}
+            className="grid border-t tracking-[-0.32px] text-muted-foreground max-lg:grid-rows-[auto_1fr] lg:grid-cols-4"
+          >
+            <span className="inline-flex items-center py-4">
+              {feature.name}
+            </span>
+            <div className="col-span-3 grid grid-cols-3 divide-s text-center max-lg:border-t">
+              {[feature.basic, feature.business, feature.enterprise].map(
+                (value, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center justify-center py-4"
+                  >
+                    {typeof value === "boolean" ? (
+                      value ? (
+                        <BadgeCheck className="mx-auto size-5 text-muted-foreground" />
+                      ) : null
+                    ) : (
+                      <span className="text-muted-foreground-subtle font-semibold">
+                        {value}
+                      </span>
+                    )}
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    ))}
+  </>
+);
+
+export { Pricing21 };
diff --git a/blocks/pricing22.tsx b/blocks/pricing22.tsx
new file mode 100644
index 0000000..ed645f9
--- /dev/null
+++ b/blocks/pricing22.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const plans = [
+  {
+    id: "free",
+    name: "رایگان",
+    monthlyPrice: 0,
+    yearlyPrice: 0,
+    description: "رایگان برای همه",
+    features: [
+      "اعضای نامحدود",
+      "۲ تیم",
+      "۵۰۰ مورد کاری",
+      "یکپارچه‌سازی پیام‌رسان تیمی و مخزن کد",
+    ],
+  },
+  {
+    id: "startup",
+    name: "استارتاپ",
+    monthlyPrice: 80000,
+    yearlyPrice: 60000,
+    features: [
+      "همه‌چیز در طرح رایگان، به‌علاوه:",
+      "هوش مصنوعی ری یو آی",
+      "تیم‌های نامحدود",
+      "موارد کاری و آپلود فایل نامحدود",
+      "بینش‌های ری یو آی",
+      "نقش‌های مدیریتی",
+    ],
+  },
+  {
+    id: "enterprise",
+    name: "سازمانی",
+    monthlyPrice: 80000,
+    yearlyPrice: 60000,
+    features: [
+      "همه‌چیز در طرح رایگان، به‌علاوه:",
+      "هوش مصنوعی ری یو آی",
+      "Supermainline AGI",
+      "ناهار روزانه رایگان",
+      "ممیزی‌های تصادفی HIPAA",
+    ],
+  },
+];
+
+interface Pricing22Props {
+  className?: string;
+}
+
+const Pricing22 = ({ className }: Pricing22Props) => {
+  const [isAnnual, setIsAnnual] = useState(false);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="space-y-4 text-center">
+          <h2 className="text-xl font-semibold tracking-tight md:text-xl lg:text-2xll">
+            تعرفه‌ها
+          </h2>
+          <p className="mx-auto max-w-xl leading-snug font-medium text-balance text-muted-foreground">
+            ری یو آی را رایگان با کل تیم خود استفاده کنید. با ارتقای طرح،
+            موارد کاری نامحدود، کنترل‌های امنیتی پیشرفته و امکانات بیشتر را
+            فعال کنید.
+          </p>
+        </div>
+
+        <div className="mt-8 grid gap-6 text-start md:mt-12 lg:mt-20 lg:grid-cols-3">
+          {plans.map((plan) => (
+            <Card
+              key={plan.id}
+              className={`${
+                plan.id === "startup"
+                  ? "border-4 border-primary lg:h-[110%]"
+                  : ""
+              }`}
+            >
+              <CardContent className="flex h-full flex-col justify-between gap-2 p-6">
+                <div className="space-y-2">
+                  <h3 className="font-semibold text-primary">{plan.name}</h3>
+                  <div className="space-y-1">
+                    <div className="text-lg font-medium text-muted-foreground">
+                      {formatPrice(
+                        isAnnual ? plan.yearlyPrice : plan.monthlyPrice,
+                      )}{" "}
+                      {plan.id !== "free" && (
+                        <span className="text-muted-foreground">
+                          به ازای هر کاربر در{" "}
+                          {isAnnual ? "سال" : "ماه"}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {plan.id !== "free" ? (
+                  <div className="mt-4 flex items-center gap-2">
+                    <Switch
+                      checked={isAnnual}
+                      onCheckedChange={() => setIsAnnual(!isAnnual)}
+                    />
+                    <span className="text-sm font-medium">صورتحساب سالانه</span>
+                  </div>
+                ) : (
+                  <span className="text-sm text-muted-foreground">
+                    {plan.description}
+                  </span>
+                )}
+
+                <div className="mt-8 space-y-4">
+                  {plan.features.map((feature) => (
+                    <div
+                      key={feature}
+                      className="flex items-center gap-1.5 text-muted-foreground"
+                    >
+                      <Check className="size-5 shrink-0" />
+                      <span className="text-sm">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+
+                <Button
+                  className="w-fit"
+                  variant={plan.id === "startup" ? "default" : "outline"}
+                >
+                  شروع کنید
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing22 };
diff --git a/blocks/pricing23.tsx b/blocks/pricing23.tsx
new file mode 100644
index 0000000..7d6c52d
--- /dev/null
+++ b/blocks/pricing23.tsx
@@ -0,0 +1,298 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+
+interface FeatureSection {
+  category: string;
+  features: {
+    name: string;
+    free: string | boolean;
+    startup: string | boolean;
+    enterprise: string | boolean;
+  }[];
+}
+
+const pricingPlans = [
+  {
+    name: "رایگان",
+    button: {
+      text: "شروع کنید",
+      variant: "outline" as const,
+    },
+  },
+  {
+    name: "استارتاپ",
+    button: {
+      text: "شروع کنید",
+      variant: "outline" as const,
+    },
+  },
+  {
+    name: "سازمانی",
+    button: {
+      text: "دریافت دمو",
+      variant: "outline" as const,
+    },
+  },
+];
+
+const comparisonFeatures: FeatureSection[] = [
+  {
+    category: "میزان استفاده",
+    features: [
+      {
+        name: "اعضا",
+        free: "نامحدود",
+        startup: "نامحدود",
+        enterprise: "نامحدود",
+      },
+      {
+        name: "تراکنش‌ها",
+        free: "۲۵۰",
+        startup: "نامحدود",
+        enterprise: "نامحدود",
+      },
+      {
+        name: "تیم‌ها",
+        free: "۲",
+        startup: "نامحدود",
+        enterprise: "نامحدود",
+      },
+    ],
+  },
+  {
+    category: "امکانات",
+    features: [
+      {
+        name: "گزارش‌دهی",
+        free: true,
+        startup: true,
+        enterprise: true,
+      },
+      {
+        name: "تحلیل‌ها",
+        free: true,
+        startup: true,
+        enterprise: true,
+      },
+      {
+        name: "ورود و خروج داده",
+        free: true,
+        startup: true,
+        enterprise: true,
+      },
+      {
+        name: "یکپارچه‌سازی‌ها",
+        free: true,
+        startup: true,
+        enterprise: true,
+      },
+      {
+        name: "هوش مصنوعی ری یو آی",
+        free: false,
+        startup: true,
+        enterprise: true,
+      },
+      {
+        name: "نقش‌های مدیریتی",
+        free: false,
+        startup: false,
+        enterprise: false,
+      },
+      {
+        name: "گزارش ممیزی",
+        free: false,
+        startup: false,
+        enterprise: false,
+      },
+    ],
+  },
+  {
+    category: "پشتیبانی",
+    features: [
+      {
+        name: "پشتیبانی اولویت‌دار",
+        free: true,
+        startup: true,
+        enterprise: true,
+      },
+      {
+        name: "مدیر حساب",
+        free: false,
+        startup: false,
+        enterprise: true,
+      },
+      {
+        name: "SLA پایداری",
+        free: false,
+        startup: false,
+        enterprise: true,
+      },
+    ],
+  },
+];
+
+interface Pricing23Props {
+  className?: string;
+}
+
+const Pricing23 = ({ className }: Pricing23Props) => {
+  const [selectedPlan, setSelectedPlan] = useState(1);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <PlanHeaders
+          selectedPlan={selectedPlan}
+          onPlanChange={setSelectedPlan}
+        />
+        <FeatureSections selectedPlan={selectedPlan} />
+      </div>
+    </section>
+  );
+};
+
+const PlanHeaders = ({
+  selectedPlan,
+  onPlanChange,
+}: {
+  selectedPlan: number;
+  onPlanChange: (index: number) => void;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="">
+      {/* Mobile View */}
+      <div className="md:hidden">
+        <Collapsible open={isOpen} onOpenChange={setIsOpen} className="">
+          <div className="flex items-center justify-between border-b py-4">
+            <CollapsibleTrigger className="flex items-center gap-2">
+              <h3 className="text-xl font-semibold">
+                {pricingPlans[selectedPlan].name}
+              </h3>
+              <ChevronsUpDown
+                className={`size-5 transition-transform ${isOpen ? "rotate-180" : ""}`}
+              />
+            </CollapsibleTrigger>
+            <Button
+              variant={pricingPlans[selectedPlan].button.variant}
+              className="w-fit"
+            >
+              {pricingPlans[selectedPlan].button.text}
+            </Button>
+          </div>
+          <CollapsibleContent className="flex flex-col space-y-2 p-2">
+            {pricingPlans.map(
+              (plan, index) =>
+                index !== selectedPlan && (
+                  <Button
+                    size="lg"
+                    variant="secondary"
+                    key={index}
+                    onClick={() => {
+                      onPlanChange(index);
+                      setIsOpen(false);
+                    }}
+                  >
+                    {plan.name}
+                  </Button>
+                ),
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+
+      {/* Desktop View */}
+      <div className="grid grid-cols-4 gap-4 max-md:hidden">
+        <div className="col-span-1 max-md:hidden"></div>
+
+        {pricingPlans.map((plan, index) => (
+          <div key={index} className="">
+            <h3 className="mb-3 text-xl font-semibold">{plan.name}</h3>
+            <Button variant={plan.button.variant} className="">
+              {plan.button.text}
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const FeatureSections = ({ selectedPlan }: { selectedPlan: number }) => (
+  <>
+    {comparisonFeatures.map((section, sectionIndex) => (
+      <div key={sectionIndex} className="">
+        <div className="border-b border-primary/40 py-4">
+          <h3 className="text-lg font-semibold">{section.category}</h3>
+        </div>
+        {section.features.map((feature, featureIndex) => (
+          <div
+            key={featureIndex}
+            className="grid grid-cols-2 font-medium text-primary max-md:border-b md:grid-cols-4"
+          >
+            <span className="inline-flex items-center py-4">
+              {feature.name}
+            </span>
+            {/* Mobile View - Only Selected Plan */}
+            <div className="md:hidden">
+              <div className="flex items-center gap-1 py-4 md:border-b">
+                {(() => {
+                  const value = [
+                    feature.free,
+                    feature.startup,
+                    feature.enterprise,
+                  ][selectedPlan];
+                  return typeof value === "boolean" ? (
+                    value ? (
+                      <Check className="size-5" />
+                    ) : null
+                  ) : (
+                    <div className="flex items-center gap-1">
+                      <Check className="size-4 shrink-0" />
+                      <span>{value}</span>
+                    </div>
+                  );
+                })()}
+              </div>
+            </div>
+            {/* Desktop View - All Plans */}
+            <div className="hidden md:col-span-3 md:grid md:grid-cols-3 md:gap-4">
+              {[feature.free, feature.startup, feature.enterprise].map(
+                (value, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center gap-1 border-b py-4"
+                  >
+                    {typeof value === "boolean" ? (
+                      value ? (
+                        <Check className="size-5" />
+                      ) : null
+                    ) : (
+                      <div className="flex items-center gap-1">
+                        <Check className="size-4 shrink-0" />
+                        <span>{value}</span>
+                      </div>
+                    )}
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    ))}
+  </>
+);
+
+export { Pricing23 };
diff --git a/blocks/pricing24.tsx b/blocks/pricing24.tsx
new file mode 100644
index 0000000..6e7c13e
--- /dev/null
+++ b/blocks/pricing24.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const plans = [
+  {
+    id: "free",
+    name: "رایگان",
+    monthlyPrice: 0,
+    annualPrice: 0,
+    features: [
+      "اعضای نامحدود",
+      "۲ تیم",
+      "۵۰۰ مورد کاری",
+      "یکپارچه‌سازی پیام‌رسان تیمی و مخزن کد",
+    ],
+    cta: "شروع کنید",
+  },
+  {
+    id: "startup",
+    name: "استارتاپ",
+    monthlyPrice: 80000,
+    annualPrice: 600000,
+    monthlyPerUnit: "به ازای هر کاربر در ماه",
+    annualPerUnit: "به ازای هر کاربر در سال",
+    features: [
+      "همه‌چیز در طرح رایگان، به‌علاوه:",
+      "هوش مصنوعی ری یو آی",
+      "تیم‌های نامحدود",
+      "موارد کاری و آپلود فایل نامحدود",
+      "بینش‌های ری یو آی",
+      "نقش‌های مدیریتی",
+    ],
+    cta: "۷ روز آزمایش رایگان",
+    popular: true,
+  },
+  {
+    id: "enterprise",
+    name: "سازمانی",
+    monthlyPrice: 150000,
+    annualPrice: 120000,
+    monthlyPerUnit: "به ازای هر کاربر در ماه",
+    annualPerUnit: "به ازای هر کاربر در سال",
+    features: [
+      "همه‌چیز در طرح رایگان، به‌علاوه:",
+      "هوش مصنوعی ری یو آی",
+      "تیم‌های نامحدود",
+      "موارد کاری و آپلود فایل نامحدود",
+      "بینش‌های ری یو آی",
+      "نقش‌های مدیریتی",
+    ],
+    cta: "شروع کنید",
+  },
+];
+
+interface Pricing24Props {
+  className?: string;
+}
+
+const Pricing24 = ({ className }: Pricing24Props) => {
+  const [isAnnual, setIsAnnual] = useState(true);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl space-y-4 text-center">
+          <h2 className="text-center text-3xl font-semibold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
+            تعرفه‌ها
+          </h2>
+          <p className="text-lg text-balance text-muted-foreground">
+            ری یو آی را رایگان با کل تیم خود استفاده کنید. با ارتقای طرح،
+            موارد کاری نامحدود، کنترل‌های امنیتی پیشرفته و امکانات بیشتر را
+            فعال کنید.
+          </p>
+          <div className="inline-flex items-center gap-3">
+            <span
+              dir="rtl"
+              className="inline-flex shrink-0 items-center"
+            >
+              <Switch
+                checked={isAnnual}
+                onCheckedChange={setIsAnnual}
+                aria-label="تغییر صورتحساب سالانه"
+              />
+            </span>
+            <span
+              className={cn(
+                "text-sm font-medium transition-colors",
+                isAnnual ? "text-foreground" : "text-muted-foreground",
+              )}
+            >
+              صورتحساب سالانه
+            </span>
+          </div>
+        </div>
+
+        <div className="mt-8 grid gap-8 sm:grid-cols-2 md:mt-12 lg:mt-20 lg:grid-cols-3">
+          {plans.map((plan) => (
+            <div
+              key={plan.id}
+              className={cn(plan.popular && "scale-[1.075] rounded-3xl")}
+            >
+              <Card
+                className={cn(
+                  "h-full border-none bg-zinc-100 dark:bg-zinc-900",
+                  plan.popular && "relative ring-2 ring-black",
+                )}
+              >
+                <CardHeader>
+                  <h3 className="text-xl font-semibold">{plan.name}</h3>
+                  <div className="mt-2">
+                    <p className="text-lg font-medium text-muted-foreground">
+                      {formatPrice(
+                        isAnnual ? plan.annualPrice : plan.monthlyPrice,
+                      )}
+                      {(plan.monthlyPerUnit || plan.annualPerUnit) &&
+                        " " +
+                          (isAnnual ? plan.annualPerUnit : plan.monthlyPerUnit)}
+                    </p>
+                  </div>
+                </CardHeader>
+                <CardContent className="flex flex-col space-y-6">
+                  <Button
+                    variant={plan.popular ? "default" : "outline"}
+                    size="lg"
+                  >
+                    {plan.cta}
+                  </Button>
+
+                  <div className="space-y-4">
+                    {plan.features.map((feature) => (
+                      <div key={feature} className="flex items-center gap-3">
+                        <Check className="size-4 shrink-0" />
+                        <span className="text-sm text-muted-foreground">
+                          {feature}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing24 };
diff --git a/blocks/pricing26.tsx b/blocks/pricing26.tsx
new file mode 100644
index 0000000..092586f
--- /dev/null
+++ b/blocks/pricing26.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface DataItem {
+  title: string;
+  description: string;
+  badges: string[];
+  features: { text: string; description: string }[];
+  timeEstimate: string;
+  priceEstimate: string;
+  isHighlighted?: boolean;
+}
+
+interface Pricing26Props {
+  className?: string;
+}
+
+const Pricing26 = ({ className }: Pricing26Props) => {
+  const DATA: DataItem[] = [
+    {
+      title: "طرح شروع",
+      description:
+        "با ابزارها و استراتژی‌های ضروری بازاریابی، حضور دیجیتال خود را برای کسب‌وکارهای کوچک راه‌اندازی کنید.",
+      badges: ["سئو", "شبکه‌های اجتماعی"],
+      features: [
+        { text: "مناسب برای", description: "استارتاپ‌ها، کسب‌وکارهای کوچک" },
+        { text: "تخمین زمان", description: "۲ تا ۴ هفته" },
+        { text: "تخمین قیمت", description: formatPrice(500000) },
+      ],
+      timeEstimate: "۲ تا ۴ هفته",
+      priceEstimate: formatPrice(500000),
+    },
+    {
+      title: "طرح رشد",
+      description:
+        "کسب‌وکار خود را با استراتژی‌های پیشرفته بازاریابی، از جمله کمپین‌های PPC و بازاریابی محتوا گسترش دهید.",
+      badges: ["سئو", "PPC", "بازاریابی محتوا"],
+      features: [
+        { text: "مناسب برای", description: "کسب‌وکارهای در حال رشد" },
+        { text: "تخمین زمان", description: "۴ تا ۶ هفته" },
+        { text: "تخمین قیمت", description: formatPrice(1500000) },
+      ],
+      timeEstimate: "۴ تا ۶ هفته",
+      priceEstimate: formatPrice(1500000),
+      isHighlighted: true,
+    },
+    {
+      title: "طرح سازمانی",
+      description:
+        "راهکارهای جامع بازاریابی برای شرکت‌های بزرگ، شامل تحلیل‌های پیشرفته و کمپین‌های سفارشی.",
+      badges: ["سئو", "PPC", "بازاریابی محتوا"],
+      features: [
+        { text: "مناسب برای", description: "سازمان‌های بزرگ" },
+        { text: "تخمین زمان", description: "۶ تا ۸ هفته" },
+        { text: "تخمین قیمت", description: formatPrice(5000000) },
+      ],
+      timeEstimate: "۶ تا ۸ هفته",
+      priceEstimate: formatPrice(5000000),
+    },
+  ];
+
+  return (
+    <section className={cn("bg-muted py-32", className)}>
+      <div className="container">
+        <h1 className="mb-4 text-xl md:text-3xl lg:mb-8 lg:text-xl">
+          طرح‌های تعرفه
+        </h1>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+          {DATA.map((pkg, idx) => (
+            <div
+              key={idx}
+              className={cn(
+                "flex flex-1 flex-col rounded-3xl p-6 lg:py-8",
+                pkg.isHighlighted ? "bg-amber-200" : "bg-background",
+              )}
+            >
+              {/* Badges */}
+              <div className="mb-4 flex flex-wrap gap-2">
+                {pkg.badges.map((badgeText, i) => (
+                  <Badge
+                    key={i}
+                    variant="outline"
+                    className={cn(
+                      "rounded-sm border bg-transparent px-4 py-2 text-foreground",
+                      pkg.isHighlighted ? "border-foreground" : "border-secondary",
+                    )}
+                  >
+                    {badgeText}
+                  </Badge>
+                ))}
+              </div>
+
+              {/* Title */}
+              <h2 className="mt-24 mb-2 text-base font-medium lg:text-xl">
+                {pkg.title}
+              </h2>
+
+              {/* Description */}
+              <p className="mb-6 text-sm text-muted-foreground">
+                {pkg.description}
+              </p>
+
+              {/* Features */}
+              <div className="mb-6 flex-1">
+                {pkg.features.map((feature, i) => (
+                  <div
+                    key={i}
+                    className={cn(
+                      "py-4",
+                      i === 0 &&
+                        "border-t border-dashed border-muted-foreground",
+                      i !== pkg.features.length - 1 &&
+                        "border-b border-dashed border-muted-foreground",
+                    )}
+                  >
+                    <div className="flex justify-between gap-4">
+                      <span className="text-sm font-medium">
+                        {feature.text}
+                      </span>
+                      <span className="text-sm text-end">
+                        {feature.description}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Button */}
+              <Button className="mt-auto w-full py-6">شروع کنید</Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing26 };
diff --git a/blocks/pricing27.tsx b/blocks/pricing27.tsx
new file mode 100644
index 0000000..07a2dee
--- /dev/null
+++ b/blocks/pricing27.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing27Props {
+  className?: string;
+}
+
+const Pricing27 = ({ className }: Pricing27Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <ul className="grid gap-6 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
+          {/* Main Card */}
+          <li className="md:order-1 lg:col-span-1 xl:col-span-2">
+            <div className="flex h-full flex-col-reverse rounded-lg border bg-muted md:flex-row">
+              <div className="flex flex-col justify-between p-6 md:p-8">
+                <div>
+                  <div>
+                    <p className="text-lg font-semibold">راهکارهای Glide</p>
+                    <p className="mt-3 text-muted-foreground">
+                      راهکار سفارشی پریمیوم با همکاری یک شریک آژانس برتر،
+                      همراه با مدیریت توسعه توسط Glide.
+                    </p>
+                  </div>
+                  <p className="mt-6 text-sm font-semibold text-muted-foreground">
+                    شروع از
+                  </p>
+                  <div className="mt-2 flex items-baseline gap-2">
+                    <span className="text-3xl font-semibold">
+                      {formatPrice(10000000)}
+                    </span>
+                    <span className="text-sm text-muted-foreground">
+                      به ازای هر پروژه
+                    </span>
+                  </div>
+                  <Button size="lg" className="mt-5 w-fit rounded-3xl">
+                    دریافت پیشنهاد رایگان
+                  </Button>
+                </div>
+
+                <div className="mt-8">
+                  <ul className="space-y-2">
+                    <li className="flex items-center">
+                      <Check className="me-2 size-4 shrink-0 text-primary" />
+                      <span className="text-sm text-muted-foreground">
+                        همکاری با Glide و شریک آژانس
+                      </span>
+                    </li>
+                    <li className="flex items-center">
+                      <Check className="me-2 size-4 shrink-0 text-primary" />
+                      <span className="text-sm text-muted-foreground">
+                        ورود داده از بیش از ۱۰۰ منبع
+                      </span>
+                    </li>
+                    <li className="flex items-center">
+                      <Check className="me-2 size-4 shrink-0 text-primary" />
+                      <span className="text-sm text-muted-foreground">
+                        پشتیبانی اولویت‌دار Glide
+                      </span>
+                    </li>
+                  </ul>
+                  <Button variant="link" className="mt-4 px-0">
+                    بیشتر بدانید
+                  </Button>
+                </div>
+              </div>
+
+              <div className="hidden p-6 md:p-8 xl:block xl:w-[800px] 2xl:w-[960px]">
+                <div className="h-full rounded-lg">
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                    alt="راهکارهای Glide"
+                    className="h-full w-full rounded-lg object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+          </li>
+
+          {/* Secondary Card */}
+          <li className="rounded-lg border bg-card p-6 md:p-8">
+            <div className="flex h-full flex-col justify-between">
+              <div>
+                <p className="text-lg font-semibold">استخدام متخصص</p>
+                <p className="mt-3 text-muted-foreground">
+                  در فهرست متخصصان، یک کارشناس گواهی‌شده Glide را پیدا کنید که
+                  با نیازها و ترجیحات پروژه شما هماهنگ باشد.
+                </p>
+                <p className="mt-6 text-sm font-semibold text-muted-foreground">
+                  شروع از
+                </p>
+                <div className="mt-2 flex items-baseline gap-2">
+                  <span className="text-3xl font-semibold">
+                    {formatPrice(2000000)}
+                  </span>
+                  <span className="text-sm text-muted-foreground">
+                    به ازای هر پروژه
+                  </span>
+                </div>
+                <Button
+                  size="lg"
+                  variant="secondary"
+                  className="mt-5 w-fit rounded-3xl"
+                >
+                  مرور متخصصان
+                </Button>
+              </div>
+
+              <div className="mt-8">
+                <ul className="space-y-2">
+                  <li className="flex items-center">
+                    <Check className="me-2 size-4 shrink-0 text-primary" />
+                    <span className="text-sm text-muted-foreground">
+                      استخدام ساعتی یا پروژه‌ای
+                    </span>
+                  </li>
+                  <li className="flex items-center">
+                    <Check className="me-2 size-4 shrink-0 text-primary" />
+                    <span className="text-sm text-muted-foreground">
+                      همکاری با متخصص گواهی‌شده
+                    </span>
+                  </li>
+                  <li className="flex items-center">
+                    <Check className="me-2 size-4 shrink-0 text-primary" />
+                    <span className="text-sm text-muted-foreground">
+                      پشتیبانی Glide
+                    </span>
+                  </li>
+                </ul>
+                <Button variant="link" className="mt-4 px-0">
+                  بیشتر بدانید
+                </Button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing27 };
diff --git a/blocks/pricing28.tsx b/blocks/pricing28.tsx
new file mode 100644
index 0000000..5594046
--- /dev/null
+++ b/blocks/pricing28.tsx
@@ -0,0 +1,443 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import {
+  Bell,
+  Clock,
+  Clock11Icon,
+  Cloud,
+  CloudDrizzle,
+  CloudLightning,
+  CloudRain,
+  CloudSnow,
+  CloudSun,
+  Eye,
+  FileInput,
+  FilePlus,
+  FileSearch,
+  FileText,
+  HardDrive,
+  Key,
+  LifeBuoy,
+  Lock,
+  Mail,
+  Palette,
+  Shield,
+  ShieldAlert,
+  ShieldCheck,
+  ShieldPlus,
+  ShieldQuestion,
+  Star,
+  UserCheck,
+  UserCog,
+  UserPlus,
+  Users,
+  VoicemailIcon,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface PricingPackage {
+  id: string;
+  title: string;
+  monthlyPrice: number;
+  annualPrice: number;
+  description: string;
+  features: {
+    title: string;
+    items: { icon: LucideIcon; text: string }[];
+  }[];
+  isPopular?: boolean;
+}
+
+interface Pricing28Props {
+  className?: string;
+}
+
+const Pricing28 = ({ className }: Pricing28Props) => {
+  const [isAnnually, setIsAnnually] = useState(false);
+
+  const packages: PricingPackage[] = [
+    {
+      id: "basic",
+      title: "طرح پایه",
+      monthlyPrice: 790000,
+      annualPrice: 630000,
+      description: "۱۰ اعتبار در مجموع",
+      features: [
+        {
+          title: "امنیت",
+          items: [
+            { icon: ShieldCheck, text: "امنیت استاندارد" },
+            { icon: Lock, text: "رمزنگاری پایه" },
+            { icon: Key, text: "احراز هویت دو مرحله‌ای" },
+          ],
+        },
+        {
+          title: "ظاهر",
+          items: [
+            { icon: Palette, text: "برندسازی پایه" },
+            { icon: Eye, text: "شخصی‌سازی محدود ظاهر" },
+          ],
+        },
+        {
+          title: "ذخیره‌سازی",
+          items: [
+            { icon: HardDrive, text: "۵ گیگابایت فضای ذخیره" },
+            { icon: FileText, text: "نسخه‌بندی فایل" },
+          ],
+        },
+        {
+          title: "پشتیبانی",
+          items: [
+            { icon: Mail, text: "فقط پشتیبانی ایمیل" },
+            { icon: Clock, text: "ثبت زمان پایه" },
+          ],
+        },
+        {
+          title: "همکاری",
+          items: [
+            { icon: Users, text: "تا ۳ کاربر" },
+            { icon: UserPlus, text: "همکاری پایه تیمی" },
+          ],
+        },
+      ],
+    },
+    {
+      id: "pro",
+      title: "طرح حرفه‌ای",
+      monthlyPrice: 299000,
+      annualPrice: 239000,
+      description: "۵۰ اعتبار در مجموع",
+      features: [
+        {
+          title: "امنیت",
+          items: [
+            { icon: ShieldPlus, text: "امنیت پیشرفته" },
+            { icon: Shield, text: "رمزنگاری پیشرفته" },
+            { icon: Key, text: "احراز هویت دو مرحله‌ای" },
+            { icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
+          ],
+        },
+        {
+          title: "ظاهر",
+          items: [
+            { icon: Palette, text: "برندسازی سفارشی" },
+            { icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
+            { icon: Star, text: "تم‌های سفارشی" },
+          ],
+        },
+        {
+          title: "ذخیره‌سازی",
+          items: [
+            { icon: HardDrive, text: "۵۰ گیگابایت فضای ذخیره" },
+            { icon: FilePlus, text: "نسخه‌بندی فایل" },
+            { icon: Cloud, text: "پشتیبان‌گیری و بازیابی" },
+          ],
+        },
+        {
+          title: "پشتیبانی",
+          items: [
+            { icon: Bell, text: "پشتیبانی اولویت‌دار" },
+            { icon: Clock, text: "پشتیبانی اولویت‌دار ۲۴/۷" },
+            { icon: Mail, text: "پشتیبانی ایمیل و چت" },
+          ],
+        },
+        {
+          title: "همکاری",
+          items: [
+            { icon: Users, text: "کاربران نامحدود" },
+            { icon: UserCheck, text: "همکاری پیشرفته تیمی" },
+            { icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
+          ],
+        },
+      ],
+    },
+    {
+      id: "business",
+      title: "طرح تجاری",
+      monthlyPrice: 599000,
+      annualPrice: 479000,
+      description: "۱۰۰ اعتبار در مجموع",
+      features: [
+        {
+          title: "امنیت",
+          items: [
+            { icon: ShieldPlus, text: "امنیت پیشرفته" },
+            { icon: ShieldCheck, text: "رمزنگاری در سطح سازمانی" },
+            { icon: Key, text: "احراز هویت دو مرحله‌ای" },
+            { icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
+            { icon: LifeBuoy, text: "تیم امنیتی اختصاصی" },
+          ],
+        },
+        {
+          title: "ظاهر",
+          items: [
+            { icon: Palette, text: "برندسازی سفارشی" },
+            { icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
+            { icon: Star, text: "تم‌های سفارشی" },
+            { icon: Star, text: "برچسب سفید" },
+          ],
+        },
+        {
+          title: "ذخیره‌سازی",
+          items: [
+            { icon: HardDrive, text: "۵۰۰ گیگابایت فضای ذخیره" },
+            { icon: FileSearch, text: "نسخه‌بندی فایل" },
+            { icon: CloudRain, text: "پشتیبان‌گیری و بازیابی" },
+            { icon: CloudSnow, text: "آپلود فایل نامحدود" },
+          ],
+        },
+        {
+          title: "پشتیبانی",
+          items: [
+            { icon: Bell, text: "پشتیبانی اولویت‌دار" },
+            { icon: Clock, text: "پشتیبانی اولویت‌دار ۲۴/۷" },
+            { icon: Mail, text: "پشتیبانی ایمیل، چت و تلفن" },
+            { icon: Star, text: "مدیر حساب اختصاصی" },
+          ],
+        },
+        {
+          title: "همکاری",
+          items: [
+            { icon: Users, text: "اعضای تیم نامحدود" },
+            { icon: UserCheck, text: "همکاری پیشرفته تیمی" },
+            { icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
+            { icon: Clock11Icon, text: "گردش‌کارهای سفارشی" },
+          ],
+        },
+      ],
+      isPopular: true,
+    },
+    {
+      id: "enterprise",
+      title: "طرح سازمانی",
+      monthlyPrice: 1199000,
+      annualPrice: 959000,
+      description: "اعتبار نامحدود",
+      features: [
+        {
+          title: "امنیت",
+          items: [
+            { icon: ShieldPlus, text: "امنیت در سطح سازمانی" },
+            { icon: ShieldCheck, text: "رمزنگاری پیشرفته" },
+            { icon: Key, text: "احراز هویت دو مرحله‌ای" },
+            { icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
+            { icon: LifeBuoy, text: "تیم امنیتی اختصاصی" },
+            { icon: ShieldQuestion, text: "گواهی‌های انطباق" },
+          ],
+        },
+        {
+          title: "ظاهر",
+          items: [
+            { icon: Palette, text: "برندسازی سفارشی" },
+            { icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
+            { icon: Star, text: "تم‌های سفارشی" },
+            { icon: Star, text: "برچسب سفید" },
+            { icon: Star, text: "انیمیشن‌های سفارشی" },
+          ],
+        },
+        {
+          title: "ذخیره‌سازی",
+          items: [
+            { icon: HardDrive, text: "۱ ترابایت فضای ذخیره" },
+            { icon: FileInput, text: "نسخه‌بندی فایل" },
+            { icon: CloudLightning, text: "پشتیبان‌گیری و بازیابی" },
+            { icon: CloudDrizzle, text: "آپلود فایل نامحدود" },
+            { icon: CloudSun, text: "راهکار ذخیره‌سازی سفارشی" },
+          ],
+        },
+        {
+          title: "پشتیبانی",
+          items: [
+            { icon: Bell, text: "پشتیبانی پریمیوم ۲۴/۷" },
+            { icon: Clock, text: "مدیر حساب اختصاصی" },
+            { icon: Mail, text: "پشتیبانی ایمیل، چت و تلفن" },
+            { icon: Star, text: "توافق‌نامه SLA سفارشی" },
+          ],
+        },
+        {
+          title: "همکاری",
+          items: [
+            { icon: Users, text: "کاربران نامحدود" },
+            { icon: UserCheck, text: "همکاری پیشرفته تیمی" },
+            { icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
+            { icon: Clock11Icon, text: "گردش‌کارهای سفارشی" },
+            { icon: VoicemailIcon, text: "یکپارچه‌سازی نامحدود" },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl text-center">
+          <h2 className="mb-4 text-xl font-semibold lg:text-2xll">
+            طرح مناسب خود را انتخاب کنید
+          </h2>
+        </div>
+
+        <div className="mx-auto mb-12 flex max-w-3xl items-center justify-center gap-4">
+          <div className="relative me-2 flex items-center">
+            <Avatar className="size-8 border border-primary">
+              <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+              <AvatarFallback>U1</AvatarFallback>
+            </Avatar>
+            <Avatar className="absolute start-6 size-8 border border-primary">
+              <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
+              <AvatarFallback>U2</AvatarFallback>
+            </Avatar>
+            <Avatar className="absolute start-12 size-8 border border-primary">
+              <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
+              <AvatarFallback>U3</AvatarFallback>
+            </Avatar>
+          </div>
+
+          <div className="ms-8 flex items-center gap-4">
+            <span className="text-sm font-medium">
+              بیش از ۵۰ هزار توسعه‌دهنده به ما اعتماد دارند
+            </span>
+            <div className="h-8 w-px bg-border" />
+            <span className="text-sm font-medium">
+              لغو در هر زمان، بدون دردسر
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center gap-2">
+          <span className="text-muted-foreground">دوره صورتحساب</span>
+          <div className="inline-flex items-center rounded-full bg-muted p-1">
+            <RadioGroup
+              defaultValue="monthly"
+              className="grid h-auto w-auto grid-cols-2 gap-0"
+              onValueChange={(value) => {
+                setIsAnnually(value === "annually");
+              }}
+            >
+              <div className='rounded-full transition-all has-[button[data-state="checked"]]:bg-background'>
+                <RadioGroupItem
+                  value="monthly"
+                  id="monthly"
+                  className="peer sr-only"
+                />
+                <Label
+                  htmlFor="monthly"
+                  className="flex h-11 cursor-pointer items-center justify-center whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
+                >
+                  ماهانه
+                </Label>
+              </div>
+              <div className='rounded-full transition-all has-[button[data-state="checked"]]:bg-background'>
+                <RadioGroupItem
+                  value="annually"
+                  id="annually"
+                  className="peer sr-only"
+                />
+                <Label
+                  htmlFor="annually"
+                  className="flex h-11 cursor-pointer items-center justify-center gap-2 whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
+                >
+                  <span>سالانه</span>
+                  <Badge
+                    variant="outline"
+                    className="shrink-0 bg-primary px-1.5 text-xs text-secondary"
+                  >
+                    ۲۰٪-
+                  </Badge>
+                </Label>
+              </div>
+            </RadioGroup>
+          </div>
+        </div>
+
+        <div className="mt-10 grid gap-2 md:grid-cols-2 lg:grid-cols-4">
+          {packages.map((pkg) => (
+            <div key={pkg.id} className="rounded-2xl border p-6">
+              <div className="flex h-full flex-col justify-between gap-5">
+                <div>
+                  <div className="mb-4 flex items-center justify-between">
+                    <h3 className="text-xl">{pkg.title}</h3>
+                    {pkg.isPopular && <Badge>محبوب</Badge>}
+                  </div>
+                  <div className="mb-2 flex items-center gap-2">
+                    <span className="text-2xll font-semibold">
+                      {formatPrice(
+                        isAnnually ? pkg.annualPrice : pkg.monthlyPrice,
+                      )}
+                    </span>
+                    <span className="text-muted-foreground">
+                      {isAnnually ? "در ماه، صورتحساب سالانه" : "در ماه"}
+                    </span>
+                  </div>
+                  <TooltipProvider delayDuration={100}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="cursor-pointer border-b border-dashed border-muted-foreground">
+                          {pkg.description}
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent className="">
+                        اعتبارها برای امکانات و خدمات پریمیوم قابل استفاده
+                        هستند.
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                  <Button className="mt-6 w-full rounded-full">
+                    {pkg.id === "enterprise"
+                      ? "تماس با فروش"
+                      : `دریافت ${pkg.title}`}
+                  </Button>
+                  <div className="mt-6">
+                    {pkg.features.map((feature, i) => (
+                      <div key={i} className="mb-6">
+                        <h4 className="mb-3 text-sm font-medium text-muted-foreground">
+                          {feature.title}
+                        </h4>
+                        <ul className="flex flex-col gap-3">
+                          {feature.items.map((item, j) => (
+                            <li key={j} className="flex gap-2">
+                              <item.icon className="mt-1 size-4 shrink-0 text-primary" />
+                              {item.text}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-8 flex items-center justify-center text-muted-foreground">
+          <Lock className="size-4" />
+          <span className="ms-2 text-sm">
+            پرداخت امن. قدرت گرفته از{" "}
+            <a href="https://ShadcnBlocks" className="underline">
+              ری یو آی
+            </a>
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing28 };
diff --git a/blocks/pricing29.tsx b/blocks/pricing29.tsx
new file mode 100644
index 0000000..0eb5605
--- /dev/null
+++ b/blocks/pricing29.tsx
@@ -0,0 +1,223 @@
+import { Check, ChevronRight } from "lucide-react";
+import { type SVGProps, useId } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+type PricingTier = {
+  id: string;
+  name: string;
+  price: string;
+  description: string;
+  features: string[];
+  cta: {
+    text: string;
+    href: string;
+  };
+};
+
+const ITEMS: PricingTier[] = [
+  {
+    id: "starter",
+    name: "شروع",
+    price: formatPrice(0),
+    description: "رایگان برای همه",
+    features: ["اعضای نامحدود", "۲۵۰ تراکنش", "بدون پشتیبانی"],
+    cta: {
+      text: "رایگان شروع کنید",
+      href: "/signup",
+    },
+  },
+  {
+    id: "basic",
+    name: "پایه",
+    price: formatPrice(299900),
+    description: "به ازای هر کاربر در ماه",
+    features: [
+      "همه‌چیز در طرح رایگان، به‌علاوه:",
+      "هوش مصنوعی ری یو آی",
+      "تیم‌های نامحدود",
+    ],
+    cta: {
+      text: "۷ روز رایگان",
+      href: "/signup",
+    },
+  },
+  {
+    id: "enterprise",
+    name: "سازمانی",
+    price: "سفارشی",
+    description: "قیمت‌گذاری سفارشی",
+    features: [
+      "همه‌چیز در طرح پایه، به‌علاوه:",
+      "کنترل‌های امنیتی پیشرفته",
+      "پشتیبانی مهاجرت",
+    ],
+    cta: {
+      text: "رزرو دمو",
+      href: "/",
+    },
+  },
+];
+
+export const Pricing29 = () => {
+  return (
+    <section className="relative overflow-hidden py-32 text-center">
+      <div className="container">
+        <h1 className="text-xl font-semibold tracking-tight md:text-2xll lg:text-2xll">
+          تعرفه‌ها
+        </h1>
+        <div className="mx-auto mt-4 max-w-[45rem] space-y-2">
+          <p className="text-xl text-muted-foreground md:text-3xl">
+            ری یو آی را رایگان با کل تیم خود استفاده کنید. با ارتقای طرح،
+            امکانات پیشرفته‌تر را فعال کنید.
+          </p>
+        </div>
+
+        <div className="relative mt-8 overflow-hidden md:mt-12 lg:mt-20">
+          <div className="absolute inset-0 hidden rounded-3xl bg-linear-to-r from-primary to-primary/80 md:block">
+            <PlusSigns className="h-full w-full text-foreground/[0.05]" />
+          </div>
+
+          <div className="relative space-y-6 md:grid md:grid-cols-3 md:space-y-0 md:divide-s md:divide-background/20 md:p-6 lg:p-8">
+            {ITEMS.map((tier, index) => (
+              <PricingCard
+                key={tier.id}
+                tier={tier}
+                isHighlighted={index === 1}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
+          <PlusSigns className="size-full text-foreground/[0.05]" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+function PricingCard({
+  tier,
+  isHighlighted,
+}: {
+  tier: PricingTier;
+  isHighlighted: boolean;
+}) {
+  const styles = {
+    card: cn(
+      "flex flex-col gap-6 rounded-xl p-6 sm:rounded-2xl md:rounded-none lg:p-8",
+      isHighlighted
+        ? "max-md:from-primary max-md:to-primary/80 max-md:bg-linear-to-r"
+        : "bg-background max-md:border",
+      "md:bg-transparent",
+    ),
+    title: cn(
+      "font-mono text-sm tracking-widest",
+      isHighlighted ? "text-background/70" : "text-foreground/70",
+      "md:text-background/70",
+    ),
+    price: cn(
+      "text-2xll font-semibold tracking-tight",
+      isHighlighted ? "text-background" : "text-foreground",
+      "md:text-background",
+    ),
+    description: cn(
+      "mt-2 text-xl font-medium",
+      isHighlighted ? "text-background/70" : "text-foreground/70",
+      "md:text-background/70",
+    ),
+    features: cn(
+      "space-y-3 text-sm",
+      isHighlighted ? "text-background/70" : "text-foreground/70",
+      "md:text-background/70",
+    ),
+    button: cn(
+      "group border-foreground/20 relative w-full",
+      "after:from-border after:via-border after:absolute after:inset-0 after:bg-linear-to-t after:to-transparent after:content-[''] after:group-hover:opacity-100 isolate after:z-[-1]",
+      "md:border-background/40 md:text-background md:bg-transparent md:after:opacity-0",
+      isHighlighted &&
+        "md:bg-background md:text-primary hover:md:bg-background/90",
+    ),
+  };
+
+  return (
+    <div className={styles.card}>
+      <h3 className={styles.title}>{tier.name}</h3>
+      <div>
+        <p className={styles.price}>{tier.price}</p>
+        <p className={styles.description}>{tier.description}</p>
+      </div>
+      <ul className={styles.features}>
+        {tier.features.map((feature) => (
+          <li key={feature} className="flex items-center gap-2">
+            <Check className="size-4 shrink-0" />
+            <span>{feature}</span>
+          </li>
+        ))}
+      </ul>
+
+      <div className="flex flex-1 items-end">
+        <Button
+          asChild
+          variant={isHighlighted ? "secondary" : "outline"}
+          size="lg"
+          className={styles.button}
+        >
+          <a href={tier.cta.href}>
+            {tier.cta.text}
+            <ChevronRight className="ms-1 size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180" />
+          </a>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+interface PlusSignsProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
+  const GAP = 16;
+  const STROKE_WIDTH = 1;
+  const PLUS_SIZE = 6;
+  const id = useId();
+  const patternId = `plus-pattern-${id}`;
+
+  return (
+    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          x="0"
+          y="0"
+          width={GAP}
+          height={GAP}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1={GAP / 2}
+            y1={(GAP - PLUS_SIZE) / 2}
+            x2={GAP / 2}
+            y2={(GAP + PLUS_SIZE) / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+          <line
+            x1={(GAP - PLUS_SIZE) / 2}
+            y1={GAP / 2}
+            x2={(GAP + PLUS_SIZE) / 2}
+            y2={GAP / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+};
diff --git a/blocks/pricing3.tsx b/blocks/pricing3.tsx
new file mode 100644
index 0000000..ef66404
--- /dev/null
+++ b/blocks/pricing3.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing3Props {
+  className?: string;
+}
+
+const Pricing3 = ({ className }: Pricing3Props) => {
+  const [isYearly, setIsYearly] = useState(false);
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center text-center">
+          <h2 className="mb-6 text-xl font-bold text-pretty lg:text-2xll">
+            تعرفه‌های مقرون‌به‌صرفه
+          </h2>
+          <p className="text-muted-foreground lg:text-xl">
+            طرح‌های تعرفه ما را ببینید و گزینه مناسب خود را انتخاب کنید.
+          </p>
+          <div className="mt-10 flex items-center gap-3 font-medium">
+            <Switch
+              onCheckedChange={() => setIsYearly(!isYearly)}
+              checked={isYearly}
+            />
+            صورتحساب سالانه
+          </div>
+        </div>
+        <div className="mt-20 grid gap-10 md:grid-cols-3">
+          <div>
+            <div className="flex flex-col justify-between gap-10 rounded-lg border p-6">
+              <div>
+                <p className="mb-2 text-lg font-semibold">طرح پایه</p>
+                <p className="mb-4 text-xl font-semibold">
+                  {formatPrice(0)}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  مناسب افرادی که تازه شروع کرده‌اند. نیازی به کارت اعتباری
+                  نیست.
+                </p>
+              </div>
+              <Button variant="outline" className="w-full">
+                رایگان شروع کنید
+              </Button>
+            </div>
+            <ul className="mt-8 px-6">
+              <li className="flex gap-2">
+                <Check className="w-4" />
+                <p className="text-sm text-muted-foreground">
+                  <span className="me-1 font-semibold text-primary">
+                    دسترسی محدود به امکانات:
+                  </span>
+                  ۳ کاربر، ۱ پروژه، ۱ گیگابایت فضای ذخیره
+                </p>
+              </li>
+              <Separator className="my-4" />
+              <li className="flex gap-2">
+                <Check className="w-4" />
+                <p className="text-sm text-muted-foreground">
+                  <span className="me-1 font-semibold text-primary">
+                    پشتیبانی پایه:
+                  </span>
+                  فقط ایمیل تا ۳۰ روز پس از ثبت‌نام
+                </p>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <div className="flex flex-col justify-between gap-10 rounded-lg border p-6">
+              <div>
+                <p className="mb-2 text-lg font-semibold">طرح استاندارد</p>
+                <p className="mb-4 text-xl font-semibold">
+                  {formatPrice(isYearly ? 199 : 20)}
+                  <span className="ms-1 text-sm font-normal text-muted-foreground">
+                    به ازای هر کاربر
+                  </span>
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  مناسب کسب‌وکارهای کوچک در حال رشد. با ۳۰ روز آزمایش رایگان
+                  شروع کنید.
+                </p>
+              </div>
+              <Button className="w-full">رایگان امتحان کنید</Button>
+            </div>
+            <ul className="mt-8 px-6">
+              <li className="flex gap-2">
+                <Check className="w-4" />
+                <p className="text-sm text-muted-foreground">
+                  <span className="me-1 font-semibold text-primary">
+                    دسترسی به تمام امکانات استاندارد:
+                  </span>
+                  ۱۰ کاربر، ۵ پروژه، ۵ گیگابایت فضای ذخیره
+                </p>
+              </li>
+              <Separator className="my-4" />
+              <li className="flex gap-2">
+                <Check className="w-4" />
+                <p className="text-sm text-muted-foreground">
+                  <span className="me-1 font-semibold text-primary">
+                    پشتیبانی اولویت‌دار:
+                  </span>
+                  پشتیبانی ایمیل و تلفن تا ۳۰ روز پس از ثبت‌نام
+                </p>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <div className="flex flex-col justify-between gap-10 rounded-lg border p-6">
+              <div>
+                <p className="mb-2 text-lg font-semibold">طرح پریمیوم</p>
+                <p className="mb-4 text-xl font-semibold">سفارشی</p>
+                <p className="text-sm text-muted-foreground">
+                  مناسب سازمان‌های بزرگ با نیازهای پیشرفته. برای دریافت
+                  پیشنهاد سفارشی با ما تماس بگیرید.
+                </p>
+              </div>
+              <Button variant="outline" className="w-full">
+                تماس با فروش
+              </Button>
+            </div>
+            <ul className="mt-8 px-6">
+              <li className="flex gap-2">
+                <Check className="w-4" />
+                <p className="text-sm text-muted-foreground">
+                  <span className="me-1 font-semibold text-primary">
+                    پشتیبانی اختصاصی:
+                  </span>
+                  پشتیبانی ۲۴ ساعته ایمیل و تلفن
+                </p>
+              </li>
+              <Separator className="my-4" />
+              <li className="flex gap-2">
+                <Check className="w-4" />
+                <p className="text-sm text-muted-foreground">
+                  <span className="me-1 font-semibold text-primary">
+                    یکپارچه‌سازی‌های سفارشی:
+                  </span>
+                  متناسب با نیازهای سازمان شما
+                </p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing3 };
diff --git a/blocks/pricing30.tsx b/blocks/pricing30.tsx
new file mode 100644
index 0000000..491bc4c
--- /dev/null
+++ b/blocks/pricing30.tsx
@@ -0,0 +1,305 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+
+type PlanType = "free" | "startup" | "enterprise";
+
+interface Plan {
+  name: string;
+  type: PlanType;
+  button: {
+    text: string;
+    variant: "outline";
+    href: string;
+  };
+  features: {
+    [Category in "usage" | "features" | "support"]: {
+      name: string;
+      value: string | boolean;
+    }[];
+  };
+}
+
+const CATEGORY_LABELS: Record<keyof Plan["features"], string> = {
+  usage: "میزان استفاده",
+  features: "امکانات",
+  support: "پشتیبانی",
+};
+
+const plans: Plan[] = [
+  {
+    name: "رایگان",
+    type: "free",
+    button: {
+      text: "شروع کنید",
+      variant: "outline",
+      href: "/signup",
+    },
+    features: {
+      usage: [
+        { name: "اعضا", value: "نامحدود" },
+        { name: "تراکنش‌ها", value: "۲۵۰" },
+        { name: "تیم‌ها", value: "۲" },
+      ],
+      features: [
+        { name: "گزارش‌دهی", value: true },
+        { name: "تحلیل‌ها", value: true },
+        { name: "ورود و خروج داده", value: true },
+        { name: "یکپارچه‌سازی‌ها", value: true },
+        { name: "هوش مصنوعی ری یو آی", value: false },
+        { name: "نقش‌های مدیریتی", value: false },
+        { name: "گزارش ممیزی", value: false },
+      ],
+      support: [
+        { name: "پشتیبانی اولویت‌دار", value: true },
+        { name: "مدیر حساب", value: false },
+        { name: "SLA پایداری", value: false },
+      ],
+    },
+  },
+  {
+    name: "پایه",
+    type: "startup",
+    button: {
+      text: "شروع کنید",
+      variant: "outline",
+      href: "/signup",
+    },
+    features: {
+      usage: [
+        { name: "اعضا", value: "نامحدود" },
+        { name: "تراکنش‌ها", value: "نامحدود" },
+        { name: "تیم‌ها", value: "نامحدود" },
+      ],
+      features: [
+        { name: "گزارش‌دهی", value: true },
+        { name: "تحلیل‌ها", value: true },
+        { name: "ورود و خروج داده", value: true },
+        { name: "یکپارچه‌سازی‌ها", value: true },
+        { name: "هوش مصنوعی ری یو آی", value: true },
+        { name: "نقش‌های مدیریتی", value: false },
+        { name: "گزارش ممیزی", value: false },
+      ],
+      support: [
+        { name: "پشتیبانی اولویت‌دار", value: true },
+        { name: "مدیر حساب", value: false },
+        { name: "SLA پایداری", value: false },
+      ],
+    },
+  },
+  {
+    name: "سازمانی",
+    type: "enterprise",
+    button: {
+      text: "دریافت دمو",
+      variant: "outline",
+      href: "/",
+    },
+    features: {
+      usage: [
+        { name: "اعضا", value: "نامحدود" },
+        { name: "تراکنش‌ها", value: "نامحدود" },
+        { name: "تیم‌ها", value: "نامحدود" },
+      ],
+      features: [
+        { name: "گزارش‌دهی", value: true },
+        { name: "تحلیل‌ها", value: true },
+        { name: "ورود و خروج داده", value: true },
+        { name: "یکپارچه‌سازی‌ها", value: true },
+        { name: "هوش مصنوعی ری یو آی", value: true },
+        { name: "نقش‌های مدیریتی", value: false },
+        { name: "گزارش ممیزی", value: false },
+      ],
+      support: [
+        { name: "پشتیبانی اولویت‌دار", value: true },
+        { name: "مدیر حساب", value: true },
+        { name: "SLA پایداری", value: true },
+      ],
+    },
+  },
+];
+
+export const Pricing30 = () => {
+  const [selectedPlan, setSelectedPlan] = useState(1);
+
+  return (
+    <section className="py-32">
+      <div className="container font-medium">
+        <MobilePricingTable
+          selectedPlan={selectedPlan}
+          onPlanChange={setSelectedPlan}
+        />
+        <DesktopPricingTable />
+      </div>
+    </section>
+  );
+};
+
+const MobilePricingTable = ({
+  selectedPlan,
+  onPlanChange,
+}: {
+  selectedPlan: number;
+  onPlanChange: (index: number) => void;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const plan = plans[selectedPlan];
+
+  return (
+    <div className="md:hidden">
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <div className="flex items-center justify-between border-b py-4">
+          <CollapsibleTrigger className="flex items-center gap-2">
+            <h3 className="text-xl font-semibold">{plan.name}</h3>
+            <ChevronsUpDown
+              className={`size-5 transition-transform ${isOpen ? "rotate-180" : ""}`}
+            />
+          </CollapsibleTrigger>
+          <Button variant={plan.button.variant} className="w-fit">
+            {plan.button.text}
+          </Button>
+        </div>
+        <CollapsibleContent className="flex flex-col space-y-2 p-2">
+          {plans.map(
+            (p, index) =>
+              index !== selectedPlan && (
+                <Button
+                  size="lg"
+                  variant="secondary"
+                  key={index}
+                  onClick={() => {
+                    onPlanChange(index);
+                    setIsOpen(false);
+                  }}
+                >
+                  {p.name}
+                </Button>
+              ),
+          )}
+        </CollapsibleContent>
+      </Collapsible>
+
+      <div className="mt-8">
+        {Object.entries(plan.features).map(
+          ([category, features], sectionIndex) => (
+            <div key={sectionIndex} className="mb-8 space-y-2">
+              <h3 className="mb-4 text-lg font-semibold">
+                {CATEGORY_LABELS[category as keyof Plan["features"]]}
+              </h3>
+              {features.map((feature, featureIndex) => (
+                <div
+                  key={featureIndex}
+                  className="grid grid-cols-2 items-center gap-8"
+                >
+                  <span className="border-b py-2">{feature.name}</span>
+                  <div className="flex items-center gap-1 border-b py-2">
+                    {typeof feature.value === "boolean" ? (
+                      feature.value ? (
+                        <Check className="size-5" />
+                      ) : (
+                        <span className="size-5" />
+                      )
+                    ) : (
+                      <div className="flex items-center gap-1">
+                        <Check className="size-5" />
+                        <span>{feature.value}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ),
+        )}
+      </div>
+    </div>
+  );
+};
+
+const DesktopPricingTable = () => {
+  return (
+    <div className="hidden md:grid md:grid-cols-4">
+      <FeaturesColumn />
+      {plans.map((plan, index) => (
+        <PricingColumn
+          key={plan.name}
+          plan={plan}
+          isHighlighted={index === 1}
+        />
+      ))}
+    </div>
+  );
+};
+
+const FeaturesColumn = () => (
+  <div>
+    <div className="h-[140px]" />
+    {Object.entries(plans[0].features).map(([category, features], index) => (
+      <div key={index}>
+        <h3 className="flex h-20 items-center text-lg font-semibold">
+          {CATEGORY_LABELS[category as keyof Plan["features"]]}
+        </h3>
+        {features.map((feature, featureIndex) => (
+          <div key={featureIndex} className="py-4">
+            {feature.name}
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+const PricingColumn = ({
+  plan,
+  isHighlighted,
+}: {
+  plan: Plan;
+  isHighlighted: boolean;
+}) => {
+  const columnClass = cn("px-6", isHighlighted && "bg-muted border rounded-xl");
+
+  return (
+    <div className={columnClass}>
+      <div className="py-8">
+        <h3 className="mb-3 text-xl font-semibold">{plan.name}</h3>
+        <Button variant={plan.button.variant} asChild>
+          <a href={plan.button.href}>{plan.button.text}</a>
+        </Button>
+      </div>
+
+      {Object.entries(plan.features).map(([, features], sectionIndex) => (
+        <div key={sectionIndex}>
+          <div className="flex h-20 items-center"></div>
+          {features.map((feature, featureIndex) => (
+            <div
+              key={featureIndex}
+              className="flex items-center gap-1 border-b py-4"
+            >
+              {typeof feature.value === "boolean" ? (
+                feature.value ? (
+                  <Check className="size-5" />
+                ) : (
+                  <span className="size-5" />
+                )
+              ) : (
+                <div className="flex items-center gap-1">
+                  <Check className="size-4 shrink-0" />
+                  <span>{feature.value}</span>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/blocks/pricing31.tsx b/blocks/pricing31.tsx
new file mode 100644
index 0000000..b91106b
--- /dev/null
+++ b/blocks/pricing31.tsx
@@ -0,0 +1,179 @@
+"use client";
+import type { LucideIcon } from "lucide-react";
+import {
+  ArrowRight,
+  Bell,
+  Book,
+  Brush,
+  CalendarCheck2,
+  CheckSquare,
+  ClipboardList,
+  Code,
+  Database,
+  FileText,
+  GitBranch,
+  GitPullRequest,
+  LayoutGrid,
+  LifeBuoy,
+  MonitorSmartphone,
+  PhoneCall,
+  Server,
+  Settings2,
+  Slack,
+  Users,
+  Zap,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface FeatureItem {
+  icon: LucideIcon;
+  text: string;
+}
+
+interface PricingPlan {
+  name: string;
+  priceMonthly: number;
+  description: string;
+  bestFor: string;
+  features?: FeatureItem[];
+  mostPopular?: boolean;
+  cta: {
+    text: string;
+    href: string;
+  };
+}
+
+const PLANS: PricingPlan[] = [
+  {
+    name: "شروع",
+    priceMonthly: 90000,
+    description: "عالی برای توسعه‌دهندگان مستقل",
+    bestFor: "فریلنسرهای تازه‌کار",
+    features: [
+      { icon: Code, text: "دسترسی به کامپوننت‌های اصلی" },
+      { icon: LayoutGrid, text: "بلاک‌های چیدمان پایه" },
+      { icon: MonitorSmartphone, text: "قالب‌های طراحی واکنش‌گرا" },
+      { icon: FileText, text: "مستندات مقدماتی" },
+      { icon: GitBranch, text: "تاریخچه نسخه‌ها" },
+      { icon: LifeBuoy, text: "پشتیبانی انجمن" },
+      { icon: Book, text: "راهنمای رابط کاربری به‌صورت پی‌دی‌اف" },
+    ],
+    cta: {
+      text: "شروع کنید",
+      href: "#",
+    },
+  },
+  {
+    name: "حرفه‌ای",
+    priceMonthly: 290000,
+    description: "بهترین گزینه برای تیم‌های در حال رشد",
+    bestFor: "تیم‌های کوچک توسعه و استارتاپ‌ها",
+    features: [
+      { icon: Code, text: "کتابخانه پیشرفته بلاک رابط کاربری" },
+      { icon: Brush, text: "پشتیبانی از تم‌های سفارشی" },
+      { icon: Settings2, text: "ابزارهای سیستم طراحی" },
+      { icon: CheckSquare, text: "شامل تست کامپوننت‌ها" },
+      { icon: Zap, text: "بهبودهای عملکرد" },
+      { icon: Server, text: "میزبانی کامپوننت‌های مشترک" },
+      { icon: PhoneCall, text: "پشتیبانی ایمیل و چت" },
+    ],
+    cta: {
+      text: "شروع کنید",
+      href: "#",
+    },
+  },
+  {
+    name: "تیم",
+    mostPopular: true,
+    priceMonthly: 590000,
+    description: "همکاری و رشد سریع",
+    bestFor: "تیم‌های محصول با چند پروژه",
+    features: [
+      { icon: Users, text: "کنترل دسترسی تیمی" },
+      { icon: GitPullRequest, text: "ادغام و بازبینی بلاک‌های رابط کاربری" },
+      { icon: CalendarCheck2, text: "نقشه راه اولویت‌دار" },
+      { icon: Bell, text: "اعلان به‌روزرسانی‌ها" },
+      { icon: Database, text: "تحلیل استفاده از کامپوننت‌ها" },
+      { icon: Slack, text: "یکپارچه‌سازی پیام‌رسان تیمی" },
+      { icon: ClipboardList, text: "کتابخانه قالب‌های پروژه" },
+    ],
+    cta: {
+      text: "شروع کنید",
+      href: "#",
+    },
+  },
+];
+
+interface Pricing31Props {
+  className?: string;
+}
+
+const Pricing31 = ({ className }: Pricing31Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-9.5">
+          <h1 className="text-center font-serif text-2xll leading-none text-foreground md:text-2xll lg:text-2xll">
+            طرحی برای هر پروژه‌ای که شروع می‌کنید
+          </h1>
+          <div className="mt-3 grid w-full grid-cols-1 gap-5 lg:grid-cols-3">
+            {PLANS.map((plan, index) => (
+              <PlanCard key={index} plan={plan} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const PlanCard = ({ plan }: { plan: PricingPlan }) => {
+  return (
+    <div
+      className={`relative h-full w-full rounded-lg border px-6 py-5 ${plan?.mostPopular ? "border-primary" : "border-border"} bg-background`}
+    >
+      <div className="text-xl">{plan.name}</div>
+      <div className="text-[2.875rem] leading-[1.05] font-semibold">
+        {formatPrice(plan.priceMonthly)}
+      </div>
+      <div className="text-xs text-foreground/60">
+        <div>به ازای هر نفر در ماه</div>
+        <div>{plan.bestFor}</div>
+      </div>
+      <div className="mt-4 mb-6 text-lg font-medium text-foreground">
+        {plan.description}
+      </div>
+      <Button
+        asChild
+        className="w-full"
+        variant={plan.mostPopular ? "default" : "outline"}
+        size="lg"
+      >
+        <a href={plan.cta.href}>
+          {plan.cta.text}
+          <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+        </a>
+      </Button>
+      <div className="mt-6 flex flex-col gap-4">
+        {plan.features?.map((feature, index) => (
+          <div key={index} className="flex items-center gap-3 text-foreground">
+            <feature.icon className="size-5 stroke-1" />
+            {feature.text}
+          </div>
+        ))}
+      </div>
+      {plan.mostPopular && (
+        <div className="absolute start-1/2 top-0 w-fit -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary px-4 py-1 text-xs font-medium text-primary-foreground">
+          محبوب‌ترین
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { Pricing31 };
diff --git a/blocks/pricing32.tsx b/blocks/pricing32.tsx
new file mode 100644
index 0000000..ae1ebd2
--- /dev/null
+++ b/blocks/pricing32.tsx
@@ -0,0 +1,266 @@
+"use client";
+import type { LucideIcon } from "lucide-react";
+import {
+  ArrowRight,
+  Bell,
+  Book,
+  Brush,
+  CalendarCheck2,
+  CheckSquare,
+  ClipboardList,
+  Code,
+  Database,
+  FileText,
+  GitBranch,
+  GitPullRequest,
+  LayoutGrid,
+  LifeBuoy,
+  MonitorSmartphone,
+  PhoneCall,
+  Server,
+  Settings2,
+  Slack,
+  Users,
+  Zap,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface FeatureItem {
+  icon: LucideIcon;
+  text: string;
+}
+
+interface PricingPlan {
+  name: string;
+  priceMonthly: number;
+  priceYearly: number;
+  description: string;
+  bestFor: string;
+  features?: FeatureItem[];
+  mostPopular?: boolean;
+  cta: {
+    text: string;
+    href: string;
+  };
+}
+
+const PLANS: PricingPlan[] = [
+  {
+    name: "شروع",
+    priceMonthly: 90000,
+    priceYearly: 900000,
+    description: "عالی برای توسعه‌دهندگان مستقل",
+    bestFor: "فریلنسرهای تازه‌کار",
+    features: [
+      { icon: Code, text: "دسترسی به کامپوننت‌های اصلی" },
+      { icon: LayoutGrid, text: "بلاک‌های چیدمان پایه" },
+      { icon: MonitorSmartphone, text: "قالب‌های طراحی واکنش‌گرا" },
+      { icon: FileText, text: "مستندات مقدماتی" },
+      { icon: GitBranch, text: "تاریخچه نسخه‌ها" },
+      { icon: LifeBuoy, text: "پشتیبانی انجمن" },
+      { icon: Book, text: "راهنمای رابط کاربری به‌صورت پی‌دی‌اف" },
+    ],
+    cta: {
+      text: "شروع کنید",
+      href: "#",
+    },
+  },
+  {
+    name: "حرفه‌ای",
+    mostPopular: true,
+    priceMonthly: 290000,
+    priceYearly: 290000,
+    description: "بهترین گزینه برای تیم‌های در حال رشد",
+    bestFor: "تیم‌های کوچک توسعه و استارتاپ‌ها",
+    features: [
+      { icon: Code, text: "کتابخانه پیشرفته بلاک رابط کاربری" },
+      { icon: Brush, text: "پشتیبانی از تم‌های سفارشی" },
+      { icon: Settings2, text: "ابزارهای سیستم طراحی" },
+      { icon: CheckSquare, text: "شامل تست کامپوننت‌ها" },
+      { icon: Zap, text: "بهبودهای عملکرد" },
+      { icon: Server, text: "میزبانی کامپوننت‌های مشترک" },
+      { icon: PhoneCall, text: "پشتیبانی ایمیل و چت" },
+    ],
+    cta: {
+      text: "شروع کنید",
+      href: "#",
+    },
+  },
+  {
+    name: "تیم",
+    priceMonthly: 590000,
+    priceYearly: 590000,
+    description: "همکاری و رشد سریع",
+    bestFor: "تیم‌های محصول با چند پروژه",
+    features: [
+      { icon: Users, text: "کنترل دسترسی تیمی" },
+      { icon: GitPullRequest, text: "ادغام و بازبینی بلاک‌های رابط کاربری" },
+      { icon: CalendarCheck2, text: "نقشه راه اولویت‌دار" },
+      { icon: Bell, text: "اعلان به‌روزرسانی‌ها" },
+      { icon: Database, text: "تحلیل استفاده از کامپوننت‌ها" },
+      { icon: Slack, text: "یکپارچه‌سازی پیام‌رسان تیمی" },
+      { icon: ClipboardList, text: "کتابخانه قالب‌های پروژه" },
+    ],
+    cta: {
+      text: "شروع کنید",
+      href: "#",
+    },
+  },
+  {
+    name: "تجاری",
+    priceMonthly: 990000,
+    priceYearly: 990000,
+    description: "کنترل و پشتیبانی کامل",
+    bestFor: "آژانس‌ها و تیم‌های بزرگ",
+    cta: {
+      text: "شروع کنید",
+      href: "#",
+    },
+  },
+  {
+    name: "سازمانی",
+    priceMonthly: 199000,
+    priceYearly: 1990000,
+    description: "راهکارهای سفارشی در مقیاس بزرگ",
+    bestFor: "سازمان‌های بزرگ و پلتفرم‌های SaaS",
+    cta: {
+      text: "شروع کنید",
+      href: "#",
+    },
+  },
+];
+
+interface Pricing32Props {
+  className?: string;
+}
+
+const Pricing32 = ({ className }: Pricing32Props) => {
+  const [checked, setChecked] = useState(true);
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-9.5">
+          <h1 className="text-center font-serif text-2xll leading-none text-foreground md:text-2xll lg:text-2xll">
+            طرحی برای هر پروژه‌ای که شروع می‌کنید
+          </h1>
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex items-center justify-center gap-4">
+              <Label
+                htmlFor="plan-duration"
+                className={cn(
+                  "text-sm transition-colors",
+                  !checked ? "text-foreground" : "text-muted-foreground",
+                )}
+              >
+                سالانه
+              </Label>
+              <span dir="rtl" className="inline-flex shrink-0 items-center">
+                <Switch
+                  id="plan-duration"
+                  checked={checked}
+                  onCheckedChange={setChecked}
+                  aria-label="تغییر دوره صورتحساب"
+                />
+              </span>
+              <Label
+                htmlFor="plan-duration"
+                className={cn(
+                  "text-sm transition-colors",
+                  checked ? "text-foreground" : "text-muted-foreground",
+                )}
+              >
+                ماهانه
+              </Label>
+            </div>
+            <div className="text-center text-green-600">
+              تا ۴۰٪ تخفیف با صورتحساب سالانه
+            </div>
+          </div>
+          <div className="mt-3 grid w-full grid-cols-1 gap-5 lg:grid-cols-6">
+            {PLANS.map((plan, index) => (
+              <PlanCard
+                key={index}
+                plan={plan}
+                monthly={checked}
+                className={
+                  index > PLANS.length - 3 ? "lg:col-span-3" : "lg:col-span-2"
+                }
+              />
+            ))}
+          </div>
+        </div>
+        <div className="m-9.5 flex items-center justify-center">
+          <Button size="lg">مقایسه همه طرح‌ها</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const PlanCard = ({
+  plan,
+  monthly,
+  className,
+}: {
+  plan: PricingPlan;
+  monthly: boolean;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={`relative h-full w-full rounded-lg border px-6 py-5 ${className} ${plan?.mostPopular ? "border-primary" : "border-border"} bg-background`}
+    >
+      <div className="text-xl">{plan.name}</div>
+      <div className="h-[2.875rem] overflow-hidden">
+        <div
+          className={`text-[2.875rem] leading-none font-semibold transition-transform duration-500 ${monthly ? "translate-y-0" : "translate-y-[-3rem]"}`}
+        >
+          <div>{formatPrice(plan.priceMonthly)}</div>
+          <div>{formatPrice(plan.priceYearly)}</div>
+        </div>
+      </div>
+      <div className="text-xs text-foreground/60">
+        <div>به ازای هر نفر در {monthly ? "ماه" : "سال"}</div>
+        <div>{plan.bestFor}</div>
+      </div>
+      <div className="mt-4 mb-6 text-lg font-medium text-foreground">
+        {plan.description}
+      </div>
+      <Button
+        asChild
+        className="w-full"
+        variant={plan.mostPopular ? "default" : "outline"}
+        size="lg"
+      >
+        <a href={plan.cta.href}>
+          {plan.cta.text}
+          <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+        </a>
+      </Button>
+      <div className="mt-6 flex flex-col gap-4">
+        {plan.features?.map((feature, index) => (
+          <div key={index} className="flex items-center gap-3 text-foreground">
+            <feature.icon className="size-5 stroke-1" />
+            {feature.text}
+          </div>
+        ))}
+      </div>
+      {plan.mostPopular && (
+        <div className="absolute start-1/2 top-0 w-fit -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary px-4 py-1 text-xs font-medium text-primary-foreground">
+          محبوب‌ترین
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { Pricing32 };
diff --git a/blocks/pricing33.tsx b/blocks/pricing33.tsx
new file mode 100644
index 0000000..6c930e9
--- /dev/null
+++ b/blocks/pricing33.tsx
@@ -0,0 +1,134 @@
+import {
+  CalendarSync,
+  Globe,
+  MessageCircle,
+  MessagesSquare,
+  PlusCircle,
+  Sparkles,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const ADDONS = [
+  {
+    icon: CalendarSync,
+    name: "شارژ خودکار اعتبار",
+    description:
+      "آستانه را تعیین کنید تا اعتبار شما خودکار شارژ شود  بدون انقضا و بدون وقفه!",
+    price: {
+      unit: "مجموع به ازای هر ۱۰۰۰ اعتبار پیام",
+      amount: 140000,
+    },
+    link: "#",
+  },
+  {
+    icon: MessageCircle,
+    name: "اعتبار پیام اضافه",
+    description: "۱۲ دلار به ازای هر ۱۰۰۰ اعتبار در ماه",
+    price: {
+      unit: "مجموع در ماه",
+      amount: 120000,
+    },
+    link: "#",
+  },
+  {
+    icon: MessagesSquare,
+    name: "عامل‌های اضافه",
+    description: "۷ دلار به ازای هر عامل هوش مصنوعی در ماه",
+    price: {
+      unit: "مجموع در ماه",
+      amount: 70000,
+    },
+    link: "#",
+  },
+  {
+    icon: Globe,
+    name: "دامنه‌های شخصی‌سازی‌شده",
+    description:
+      "از دامنه‌های سفارشی برای اسکریپت embed، پنجره نمایش و لینک قابل اشتراک عامل هوش مصنوعی استفاده کنید  کاملاً با برند شما!",
+    price: {
+      unit: "مجموع در ماه",
+      amount: 590000,
+    },
+    link: "#",
+  },
+  {
+    icon: Sparkles,
+    name: "حذف واترمارک",
+    description: "حذف برندسازی از پنجره نمایش و ویجت",
+    price: {
+      unit: "مجموع در ماه",
+      amount: 390000,
+    },
+    link: "#",
+  },
+];
+
+interface Pricing33Props {
+  className?: string;
+}
+
+const Pricing33 = ({ className }: Pricing33Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col items-center gap-4">
+          <Badge className="flex items-center gap-2 rounded-full border border-muted bg-background px-4 py-1.5">
+            <PlusCircle className="size-2 text-primary" />
+            <p className="text-sm leading-5 font-medium text-foreground">
+              افزونه‌ها
+            </p>
+          </Badge>
+          <h2 className="max-w-full text-center text-3xl font-semibold md:max-w-[42.5rem] md:text-2xll">
+            طرح خود را با افزونه‌های قدرتمند تقویت کنید!
+          </h2>
+          <div className="flex w-full flex-col items-center gap-4 pt-10">
+            {ADDONS.map((addon, i) => (
+              <div
+                className="grid w-full rounded-2xl border border-muted shadow-xs xl:grid-cols-[minmax(36.25rem,48.125rem)_1fr]"
+                key={`addon-${i}`}
+              >
+                <div className="flex w-full flex-col gap-4 p-6 md:flex-row">
+                  <div className="relative flex size-12 after:absolute after:start-1/2 after:top-1/2 after:z-10 after:block after:size-full after:-translate-1/2 after:rounded-full after:content-['']">
+                    <div className="relative z-20 m-auto flex size-11.5 shrink-0 rounded-full bg-foreground">
+                      <addon.icon className="m-auto size-5 stroke-background" />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-xl font-medium">{addon.name}</h3>
+                    <p className="text-base text-muted-foreground">
+                      {addon.description}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex w-full flex-col items-center gap-2 p-6 md:flex-row">
+                  <div className="flex w-full flex-wrap items-center gap-4 md:flex-nowrap">
+                    <div className="text-lg font-semibold">
+                      {formatPrice(addon.price.amount)}
+                    </div>
+                    <div className="text-xs text-foreground/60">
+                      {addon.price.unit}
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    className="block h-12 w-full px-4 md:max-w-[10.625rem]"
+                  >
+                    <a href={addon.link}>دریافت افزونه</a>
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing33 };
diff --git a/blocks/pricing34.tsx b/blocks/pricing34.tsx
new file mode 100644
index 0000000..f97c2fc
--- /dev/null
+++ b/blocks/pricing34.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import { BadgeCheck } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const PRICING_PLANS = [
+  {
+    name: "طرح پایه",
+    monthlyPrice: 0,
+    yearlyPrice: 0,
+    isCustom: false,
+    period: {
+      monthly: "در ماه / کاربر",
+      yearly: "در سال / کاربر",
+    },
+    description: {
+      monthly:
+        "مناسب افرادی که تازه شروع کرده‌اند. نیازی به کارت اعتباری نیست.",
+      yearly:
+        "مناسب افرادی که تازه شروع کرده‌اند. نیازی به کارت اعتباری نیست.",
+    },
+    buttonText: "رایگان شروع کنید",
+    highlighted: false,
+    features: [
+      "امکانات با دسترسی محدود",
+      "پشتیبانی پایه",
+      "وبلاگ هفتگی",
+      "۱۰۰ گیگابایت فضای ذخیره",
+      "پشتیبانی از همه فریم‌ورک‌ها",
+    ],
+  },
+  {
+    name: "طرح استاندارد",
+    monthlyPrice: 200000,
+    yearlyPrice: 200000,
+    isCustom: false,
+    period: {
+      monthly: "در ماه / کاربر",
+      yearly: "در سال / کاربر",
+    },
+    description: {
+      monthly:
+        "مناسب کسب‌وکارهای کوچک در حال رشد. با ۳۰ روز آزمایش رایگان شروع کنید.",
+      yearly:
+        "مناسب کسب‌وکارهای کوچک در حال رشد. ۱۶٪ کمتر نسبت به پرداخت ماهانه.",
+    },
+    buttonText: "شروع کنید",
+    highlighted: true,
+    features: [
+      "امکانات با دسترسی محدود",
+      "پشتیبانی پایه",
+      "وبلاگ هفتگی",
+      "۱۰۰ گیگابایت فضای ذخیره",
+      "پشتیبانی از همه فریم‌ورک‌ها",
+    ],
+  },
+  {
+    name: "طرح پریمیوم",
+    monthlyPrice: null,
+    yearlyPrice: null,
+    isCustom: true,
+    period: {
+      monthly: "در ماه / کاربر",
+      yearly: "در سال / کاربر",
+    },
+    description: {
+      monthly:
+        "مناسب سازمان‌های بزرگ با نیازهای پیشرفته. برای دریافت پیشنهاد سفارشی با ما تماس بگیرید.",
+      yearly:
+        "مناسب سازمان‌های بزرگ با نیازهای پیشرفته. برای دریافت پیشنهاد سفارشی با ما تماس بگیرید.",
+    },
+    buttonText: "شروع کنید",
+    highlighted: false,
+    features: [
+      "امکانات با دسترسی محدود",
+      "پشتیبانی پایه",
+      "وبلاگ هفتگی",
+      "۱۰۰ گیگابایت فضای ذخیره",
+      "پشتیبانی از همه فریم‌ورک‌ها",
+    ],
+  },
+];
+
+interface Pricing34Props {
+  className?: string;
+}
+
+const formatPlanPrice = (
+  price: number | null,
+  isCustom: boolean,
+) => {
+  if (isCustom) {
+    return "سفارشی";
+  }
+  return formatPrice(price ?? 0);
+};
+
+const Pricing34 = ({ className }: Pricing34Props) => {
+  const [billingCycle, setBillingCycle] = useState("monthly");
+
+  return (
+    <section className={cn("bg-background py-32", className)}>
+      <div className="container flex flex-col gap-13">
+        <h1 className="text-center text-2xll font-bold tracking-tighter text-foreground">
+          طرح‌های تعرفه ساده
+        </h1>
+
+        <div className="flex justify-center">
+          <ToggleGroup
+            type="single"
+            value={billingCycle}
+            onValueChange={(value) => {
+              if (value && value !== billingCycle) {
+                setBillingCycle(value);
+              }
+            }}
+            className="rounded-lg bg-muted p-1"
+          >
+            <ToggleGroupItem
+              value="monthly"
+              className="h-8 w-32 rounded-md data-[state=on]:bg-background"
+            >
+              ماهانه
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="yearly"
+              className="h-8 w-32 rounded-md data-[state=on]:bg-background"
+            >
+              سالانه
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-7">
+          {PRICING_PLANS.map((plan, index) => (
+            <Card
+              key={index}
+              className={`max-w-sm rounded-3xl border ${
+                plan.highlighted ? "border-2 border-primary" : "border-border"
+              } shadow-sm`}
+            >
+              <CardHeader>
+                <CardTitle className="text-lg font-medium text-foreground">
+                  {plan.name}
+                </CardTitle>
+                <div className="mt-4">
+                  <div className="text-2xll font-semibold tracking-tight text-muted-foreground">
+                    {formatPlanPrice(
+                      billingCycle === "monthly"
+                        ? plan.monthlyPrice
+                        : plan.yearlyPrice,
+                      plan.isCustom,
+                    )}
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {billingCycle === "monthly"
+                      ? plan.period.monthly
+                      : plan.period.yearly}
+                  </div>
+                </div>
+              </CardHeader>
+
+              <CardContent className="px-7 pt-6">
+                <p className="text-sm text-muted-foreground">
+                  {billingCycle === "monthly"
+                    ? plan.description.monthly
+                    : plan.description.yearly}
+                </p>
+
+                <Button className="mt-6 w-full">{plan.buttonText}</Button>
+
+                <div className="relative mt-12 mb-4 flex items-center justify-center overflow-hidden">
+                  <Separator />
+                  <span className="px-3 text-xs text-muted-foreground opacity-50">
+                    امکانات
+                  </span>
+                  <Separator />
+                </div>
+
+                <ul className="mt-6 space-y-4">
+                  {plan.features.map((feature, idx) => (
+                    <li key={idx} className="flex items-center">
+                      <BadgeCheck className="size-5 text-muted-foreground" />
+                      <span className="ms-3 text-sm text-muted-foreground">
+                        {feature}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing34 };
diff --git a/blocks/pricing35.tsx b/blocks/pricing35.tsx
new file mode 100644
index 0000000..52efd96
--- /dev/null
+++ b/blocks/pricing35.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing35Props {
+  className?: string;
+}
+
+const Pricing35 = ({ className }: Pricing35Props) => {
+  const pricingPlans = [
+    {
+      id: "standard",
+      type: "standard",
+      prices: {
+        quarterly: 150000,
+        yearly: 12,
+      },
+      isCustom: false,
+      isDark: false,
+      hasToggle: true,
+      badge: null,
+      ctaText: "شروع با طرح استاندارد",
+      description:
+        "مناسب افراد یا فریلنسرهایی که تازه شروع کرده‌اند. نیازی به کارت اعتباری نیست.",
+    },
+    {
+      id: "premium",
+      type: "premium",
+      prices: {
+        quarterly: null,
+        yearly: null,
+      },
+      isCustom: true,
+      isDark: true,
+      hasToggle: false,
+      badge: "۱۰ از ۳۰۰ جایگاه باقی مانده",
+      ctaText: "عضویت VIP",
+      description:
+        "مناسب افراد یا فریلنسرهایی که تازه شروع کرده‌اند. نیازی به کارت اعتباری نیست.",
+    },
+  ];
+
+  const [billingPeriods, setBillingPeriods] = useState({
+    standard: "quarterly",
+    premium: "quarterly",
+  });
+
+  const updateBillingPeriod = (
+    planId: string,
+    period: "quarterly" | "yearly",
+  ) => {
+    setBillingPeriods((prev) => ({
+      ...prev,
+      [planId]: period,
+    }));
+  };
+
+  const formatDisplayPrice = (
+    price: number | null,
+    isCustom: boolean,
+  ) => {
+    if (isCustom || price === null) {
+      return "سفارشی";
+    }
+    return `${formatPrice(price)} در ماه`;
+  };
+
+  return (
+    <section className={cn("bg-background", className)}>
+      <div className="container py-32">
+        <header className="mb-10 flex flex-col items-center gap-6 md:mb-20">
+          <h1 className="text-center text-2xll font-bold tracking-tighter text-foreground md:text-2xll">
+            طرح‌های تعرفه انعطاف‌پذیر
+          </h1>
+          <p className="w-full max-w-lg px-4 text-center text-base font-normal tracking-tight text-muted-foreground opacity-70 md:px-0 md:text-lg">
+            طرحی را انتخاب کنید که با نیازها و بودجه شما هماهنگ باشد.
+          </p>
+        </header>
+
+        <div className="flex flex-col justify-center gap-8 px-4 md:flex-row">
+          {pricingPlans.map((plan) => {
+            const currentPeriod = billingPeriods[
+              plan.id as keyof typeof billingPeriods
+            ] as "quarterly" | "yearly";
+
+            return (
+              <Card
+                key={plan.id}
+                className={`h-auto w-full overflow-hidden rounded-4xl border border-border shadow-sm ${plan.isDark ? "bg-foreground text-background" : "bg-background text-foreground"} md:max-w-md`}
+              >
+                <CardContent className="p-6">
+                  <div className="mt-8 mb-8 md:mt-10 md:mb-10">
+                    <div className="flex items-end">
+                      <span className="w-full text-center text-2xll font-semibold tracking-tighter md:text-2xll">
+                        {formatDisplayPrice(
+                          plan.prices[currentPeriod],
+                          plan.isCustom,
+                        )}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="mb-8 flex items-center gap-4 md:mb-10">
+                    <div className="h-px flex-1 bg-muted" />
+                    <span className="text-center text-xs font-normal whitespace-nowrap uppercase opacity-50">
+                      {!plan.isCustom && currentPeriod === "quarterly"
+                        ? "صورتحساب سه‌ماهه"
+                        : !plan.isCustom && currentPeriod === "yearly"
+                          ? "صورتحساب سالانه"
+                          : "صورتحساب انعطاف‌پذیر"}
+                    </span>
+                    <div className="h-px flex-1 bg-muted" />
+                  </div>
+
+                  <div className="mb-8 flex justify-center md:mb-10">
+                    {plan.hasToggle ? (
+                      <ToggleGroup
+                        type="single"
+                        value={currentPeriod}
+                        onValueChange={(value) => {
+                          if (value)
+                            updateBillingPeriod(
+                              plan.id,
+                              value as "quarterly" | "yearly",
+                            );
+                        }}
+                        className="rounded-xl bg-muted p-1"
+                      >
+                        <ToggleGroupItem
+                          value="quarterly"
+                          className="h-8 w-20 rounded-lg data-[state=on]:bg-background"
+                        >
+                          <span className="text-center text-xs font-semibold text-foreground">
+                            سه‌ماهه
+                          </span>
+                        </ToggleGroupItem>
+                        <ToggleGroupItem
+                          value="yearly"
+                          className="h-8 w-20 rounded-lg data-[state=on]:bg-background"
+                        >
+                          <span className="text-center text-xs font-semibold text-foreground">
+                            سالانه
+                          </span>
+                        </ToggleGroupItem>
+                      </ToggleGroup>
+                    ) : plan.badge ? (
+                      <Badge
+                        className={`rounded-xl border bg-muted/20 ${plan.isDark ? "text-background" : "text-foreground"} px-3 py-2 text-xs font-semibold`}
+                      >
+                        {plan.badge}
+                      </Badge>
+                    ) : null}
+                  </div>
+
+                  <div className="mb-8 flex justify-center md:mb-10">
+                    <span className="text-center text-xs font-normal whitespace-nowrap opacity-50">
+                      {currentPeriod === "yearly"
+                        ? "با صورتحساب سالانه ۲۰٪ صرفه‌جویی می‌کنید"
+                        : "با طرح سالانه ۲۰٪ تخفیف بگیرید"}
+                    </span>
+                  </div>
+
+                  <p className="mb-8 w-full text-center text-sm font-normal tracking-tight md:mb-10 md:text-base">
+                    {plan.description}
+                  </p>
+
+                  <Button
+                    variant={plan.isDark ? "secondary" : "default"}
+                    className="h-10 w-full"
+                  >
+                    <span className="text-center text-sm font-normal md:text-base">
+                      {plan.ctaText}
+                    </span>
+                  </Button>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing35 };
diff --git a/blocks/pricing36.tsx b/blocks/pricing36.tsx
new file mode 100644
index 0000000..4f0adf1
--- /dev/null
+++ b/blocks/pricing36.tsx
@@ -0,0 +1,155 @@
+import { ArrowRight, Check } from "lucide-react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing36Props {
+  className?: string;
+}
+
+const Pricing36 = ({ className }: Pricing36Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto grid max-w-4xl gap-6 md:grid-cols-2">
+          <div className="flex flex-col gap-4">
+            <div className="flex h-full flex-col rounded-4xl bg-gradient-to-r from-blue-500 to-purple-500 p-px">
+              <div className="h-full rounded-[31px] bg-background p-8">
+                <div className="flex items-center justify-between">
+                  <p className="text-xl font-semibold">طرح شروع</p>
+                </div>
+                <div className="mt-6 flex flex-col gap-2">
+                  <p className="text-2xll font-bold">
+                    {formatPrice(190000)}
+                    <span className="text-base font-semibold text-muted-foreground">
+                      در ماه
+                    </span>
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    راهکار کامل برای بهره‌وری تیم شما
+                  </p>
+                </div>
+                <Separator className="my-6" />
+                <ul className="space-y-6">
+                  <li className="flex gap-2">
+                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
+                    <div>
+                      <p className="font-medium">ابزارهای همکاری تیمی</p>
+                      <p className="text-sm text-muted-foreground">
+                        همکاری یکپارچه با فضاهای کاری مشترک
+                      </p>
+                    </div>
+                  </li>
+                  <li className="flex gap-2">
+                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
+                    <div>
+                      <p className="font-medium">پیگیری پیشرفته پروژه</p>
+                      <p className="text-sm text-muted-foreground">
+                        پایش پیشرفت پروژه با تحلیل‌ها و گزارش‌های دقیق
+                      </p>
+                    </div>
+                  </li>
+                  <li className="flex gap-2">
+                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
+                    <div>
+                      <p className="font-medium">مدیریت خودکار وظایف</p>
+                      <p className="text-sm text-muted-foreground">
+                        ساده‌سازی گردش کار با اتوماسیون هوشمند وظایف
+                      </p>
+                    </div>
+                  </li>
+                  <li className="flex gap-2">
+                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
+                    <div>
+                      <p className="font-medium">پشتیبانی اولویت‌دار</p>
+                      <p className="text-sm text-muted-foreground">
+                        دریافت کمک تخصصی از کانال‌های اولویت‌دار با پاسخ‌گویی
+                        سریع
+                      </p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <a
+                href="#"
+                className="group flex items-center justify-center gap-1.5 py-3 text-center font-medium text-background"
+              >
+                خرید اشتراک
+                <ArrowRight className="size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col gap-4">
+            <div className="flex h-full flex-col rounded-4xl bg-primary p-px">
+              <div className="h-full rounded-[31px] bg-background p-8">
+                <p className="text-xl font-semibold">طرح سازمانی</p>
+                <div className="mt-6 flex flex-col gap-2">
+                  <p className="text-2xll font-bold">
+                    {formatPrice(490000)}
+                    <span className="text-base font-semibold text-muted-foreground">
+                      در ماه
+                    </span>
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    راهکار کامل برای گردش کار سازمانی شما
+                  </p>
+                </div>
+                <Separator className="my-6" />
+                <ul className="space-y-6">
+                  <li className="flex gap-2">
+                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
+                    <div>
+                      <p className="font-medium">اعضای تیم نامحدود</p>
+                      <p className="text-sm text-muted-foreground">
+                        رشد بدون محدودیت با دسترسی و ابزار همکاری نامحدود
+                      </p>
+                    </div>
+                  </li>
+                  <li className="flex gap-2">
+                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
+                    <div>
+                      <p className="font-medium">داشبورد تحلیل پیشرفته</p>
+                      <p className="text-sm text-muted-foreground">
+                        بینش عمیق با ابزارهای گزارش‌دهی جامع
+                      </p>
+                    </div>
+                  </li>
+                  <li className="flex gap-2">
+                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
+                    <div>
+                      <p className="font-medium">اتوماسیون گردش کار سفارشی</p>
+                      <p className="text-sm text-muted-foreground">
+                        ساخت گردش‌کارهای متناسب برای بهینه‌سازی کارایی تیم
+                      </p>
+                    </div>
+                  </li>
+                  <li className="flex gap-2">
+                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
+                    <div>
+                      <p className="font-medium">مدیر موفقیت اختصاصی</p>
+                      <p className="text-sm text-muted-foreground">
+                        راهنمایی شخصی‌سازی‌شده از متخصصان اختصاصی
+                      </p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <a
+                href="#"
+                className="group flex items-center justify-center gap-1.5 py-3 text-center font-medium text-background"
+              >
+                تماس با ما
+                <ArrowRight className="size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing36 };
diff --git a/blocks/pricing37.tsx b/blocks/pricing37.tsx
new file mode 100644
index 0000000..219580a
--- /dev/null
+++ b/blocks/pricing37.tsx
@@ -0,0 +1,70 @@
+import { BadgeCheck, Clock, Handshake, Snowflake, Star } from "lucide-react";
+
+import { CardSpotlight } from "@/components/aceternity/card-spotlight";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing37Props {
+  className?: string;
+}
+
+const Pricing37 = ({ className }: Pricing37Props) => {
+  const PremiumPlan = {
+    price: 125000,
+    features: [
+      { icon: Snowflake, label: "همه کامپوننت‌های پریمیوم" },
+      { icon: Handshake, label: "دسترسی زودهنگام" },
+      { icon: Star, label: "درخواست کامپوننت" },
+      { icon: Clock, label: "به‌روزرسانی رایگان مادام‌العمر" },
+      { icon: BadgeCheck, label: "پشتیبانی ری یو آی" },
+    ],
+  };
+
+  return (
+    <section className={cn("overflow-hidden py-32", className)}>
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <p className="rounded-full bg-muted px-2 py-1 text-xs uppercase">
+          تعرفه‌ها
+        </p>
+        <h2 className="relative py-2 text-center font-sans text-2xll font-semibold tracking-tighter lg:text-2xll">
+          جعبه‌ابزار نهایی بلاک‌ها
+        </h2>
+        <p className="text-md mx-auto max-w-xl px-5 text-center text-muted-foreground lg:text-lg">
+          تعادل کامل بین عملکرد و شخصی‌سازی.
+        </p>
+
+        <CardSpotlight className="relative mt-14 w-full max-w-md overflow-hidden rounded-3xl text-background">
+          <div className="relative z-10 flex h-full flex-col justify-between">
+            <div>
+              <p className="text-md font-semibold">سوپر پریمیوم</p>
+              <h3 className="mt-[11px] text-xl font-semibold tracking-tight">
+                {formatPrice(PremiumPlan.price)}
+              </h3>
+              <ul className="mt-[30px] space-y-[10px]">
+                {PremiumPlan.features.map((item, i) => (
+                  <li key={i} className="flex items-center gap-2">
+                    <item.icon className="size-4 shrink-0" />
+                    <p className="text-[15px] font-medium tracking-tight opacity-50">
+                      {item.label}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <Button
+              className="mt-20 w-full rounded-xl font-semibold"
+              variant="secondary"
+            >
+              دسترسی فوری
+            </Button>
+          </div>
+        </CardSpotlight>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing37 };
diff --git a/blocks/pricing38.tsx b/blocks/pricing38.tsx
new file mode 100644
index 0000000..0c40e7e
--- /dev/null
+++ b/blocks/pricing38.tsx
@@ -0,0 +1,278 @@
+import { Check, Info, TrendingUp, Users } from "lucide-react";
+
+import { Alert, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const starterFeatures = [
+  "مدیریت شبکه‌های اجتماعی",
+  "تولید محتوا",
+  "تحلیل‌های پایه",
+  "گزارش‌های ماهانه",
+];
+
+const professionalFeatures = [
+  "بهینه‌سازی پیشرفته بهینه‌سازی جستجو",
+  "مدیریت تبلیغات حساب ابری",
+  "تبلیغات شبکه اجتماعی و شبکه تصویری",
+  "کمپین‌های ایمیل مارکتینگ",
+  "استراتژی محتوا",
+  "تحلیل رقبا",
+  "بهینه‌سازی نرخ تبدیل",
+  "طراحی صفحه فرود",
+  "تولید محتوای ویدیویی",
+  "همکاری با اینفلوئنسرها",
+  "بیش از ۵۰۰ قالب بازاریابی",
+  "شامل همه امکانات Starter",
+];
+
+const enterpriseFeatures = [
+  "مدیریت نامحدود کمپین",
+  "مدیر حساب اختصاصی",
+  "پشتیبانی اولویت‌دار ۲۴/۷",
+  "شامل همه امکانات Professional",
+];
+
+interface Pricing38Props {
+  className?: string;
+}
+
+const Pricing38 = ({ className }: Pricing38Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container px-4">
+        <div className="rounded-lg border border-border bg-muted/40 p-1">
+          <div className="grid gap-12 rounded-sm border border-border p-4 md:p-6 lg:grid-cols-2">
+            <div className="flex flex-col gap-12">
+              <div className="flex flex-col gap-4">
+                <p className="text-xs font-medium text-muted-foreground uppercase">
+                  بسته‌های خدماتی
+                </p>
+                <h2 className="text-xl font-medium tracking-tight">
+                  کسب‌وکار خود را با استراتژی‌های اثبات‌شده رشد دهید.
+                </h2>
+                <p className="text-muted-foreground">
+                  از بسته‌های جامع بازاریابی ما انتخاب کنید که برای رشد
+                  کسب‌وکار از استارتاپ تا سطح سازمانی طراحی شده‌اند.
+                </p>
+                <Alert className="w-fit items-center bg-muted/50 has-[>svg]:gap-x-2 [&>svg]:translate-y-0">
+                  <Info />
+                  <AlertTitle className="line-clamp-none text-xs">
+                    همه بسته‌ها شامل مشاوره رایگان و جلسه استراتژی هستند.
+                  </AlertTitle>
+                </Alert>
+              </div>
+              <Separator className="data-[orientation=horizontal]:w-12" />
+              <div className="flex flex-col gap-4">
+                <p className="text-xs font-medium text-muted-foreground uppercase">
+                  راهکارهای سفارشی
+                </p>
+                <h2 className="text-xl font-medium tracking-tight">
+                  به رویکرد اختصاصی نیاز دارید؟
+                </h2>
+                <p className="text-muted-foreground">
+                  <a href="#" className="transition-colors hover:text-primary">
+                    تماس با ما
+                  </a>{" "}
+                  کنید برای راهکارهای بازاریابی سفارشی یا بحث درباره نیازهای
+                  کمپین متناسب با اهداف کسب‌وکار شما.
+                </p>
+              </div>
+              <Separator className="data-[orientation=horizontal]:w-12" />
+              <div className="flex flex-col gap-4">
+                <p className="text-xs font-medium text-muted-foreground uppercase">
+                  پشتیبانی
+                </p>
+                <h2 className="text-xl font-medium tracking-tight">
+                  بهینه‌سازی مستمر
+                </h2>
+                <p className="text-muted-foreground">
+                  کمپین‌های شما را برای حداکثر بازگشت سرمایه به‌طور مداوم
+                  پایش و بهینه می‌کنیم. نیاز به تغییر دارید؟{" "}
+                  <a href="#" className="transition-colors hover:text-primary">
+                    تماس با ما
+                  </a>
+                </p>
+              </div>
+            </div>
+            <div className="space-y-6">
+              <RadioGroup defaultValue="starter">
+                <label
+                  htmlFor="starter"
+                  className="group relative flex cursor-pointer flex-col gap-4 rounded-lg border border-border p-8 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-background"
+                >
+                  <RadioGroupItem
+                    value="starter"
+                    id="starter"
+                    className="hidden"
+                  />
+                  <div className="flex items-center justify-between">
+                    <div className="flex flex-col">
+                      <h3 className="text-lg font-semibold">شروع</h3>
+                      <p className="text-sm text-muted-foreground">
+                        مناسب کسب‌وکارهای کوچک
+                      </p>
+                    </div>
+                    <span className="text-xl font-bold">
+                      {formatPrice(0)}
+                      <span className="text-base font-normal text-muted-foreground">
+                        در ماه
+                      </span>
+                    </span>
+                  </div>
+                  <Separator />
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div className="flex items-start gap-2">
+                      <Users className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <p className="text-sm text-primary/80">
+                        ۳ پلتفرم شبکه اجتماعی
+                      </p>
+                    </div>
+                    <div className="flex items-start gap-2">
+                      <TrendingUp className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <p className="text-sm text-primary/80">
+                        پیگیری عملکرد پایه
+                      </p>
+                    </div>
+                  </div>
+                  <Separator />
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {starterFeatures.map((feature, index) => (
+                      <div key={index} className="flex items-start gap-2">
+                        <Check className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                        <p className="text-sm text-primary/80">{feature}</p>
+                      </div>
+                    ))}
+                  </div>
+                  <span className="absolute -top-2 -end-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary opacity-0 group-has-[[data-state=checked]]:opacity-100">
+                    <Check className="size-3 text-background" />
+                  </span>
+                  <div className="max-h-0 overflow-hidden transition-all duration-300 ease-out group-has-[[data-state=checked]]:max-h-20">
+                    <Button className="mt-4 w-full opacity-0 transition-opacity duration-300 group-has-[[data-state=checked]]:opacity-100">
+                      شروع کنید
+                    </Button>
+                  </div>
+                </label>
+                <label
+                  htmlFor="pro"
+                  className="group relative flex cursor-pointer flex-col gap-4 rounded-lg border border-border p-8 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-background"
+                >
+                  <RadioGroupItem value="pro" id="pro" className="hidden" />
+                  <div className="flex items-center justify-between">
+                    <div className="flex flex-col">
+                      <h3 className="text-lg font-semibold">حرفه‌ای</h3>
+                      <p className="text-sm text-muted-foreground">
+                        راهکار کامل بازاریابی
+                      </p>
+                    </div>
+                    <span className="text-xl font-bold">
+                      {formatPrice(200000)}
+                      <span className="text-base font-normal text-muted-foreground">
+                        در ماه
+                      </span>
+                    </span>
+                  </div>
+                  <Separator />
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div className="flex items-start gap-2">
+                      <Users className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <p className="text-sm text-primary/80">
+                        شامل همه پلتفرم‌های اصلی
+                      </p>
+                    </div>
+                    <div className="flex items-start gap-2">
+                      <TrendingUp className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <p className="text-sm text-primary/80">
+                        تحلیل‌ها و گزارش‌دهی پیشرفته
+                      </p>
+                    </div>
+                  </div>
+                  <Separator />
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {professionalFeatures.map((feature, index) => (
+                      <div key={index} className="flex items-start gap-2">
+                        <Check className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                        <p className="text-sm text-primary/80">{feature}</p>
+                      </div>
+                    ))}
+                  </div>
+                  <span className="absolute -top-2 -end-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary opacity-0 group-has-[[data-state=checked]]:opacity-100">
+                    <Check className="size-3 text-background" />
+                  </span>
+                  <div className="max-h-0 overflow-hidden transition-all duration-300 ease-out group-has-[[data-state=checked]]:max-h-20">
+                    <Button className="mt-4 w-full opacity-0 transition-opacity duration-300 group-has-[[data-state=checked]]:opacity-100">
+                      شروع کنید
+                    </Button>
+                  </div>
+                </label>
+                <label
+                  htmlFor="enterprise"
+                  className="group relative flex cursor-pointer flex-col gap-4 rounded-lg border border-border p-8 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-background"
+                >
+                  <RadioGroupItem
+                    value="enterprise"
+                    id="enterprise"
+                    className="hidden"
+                  />
+                  <div className="flex items-center justify-between">
+                    <div className="flex flex-col">
+                      <h3 className="text-lg font-semibold">سازمانی</h3>
+                      <p className="text-sm text-muted-foreground">
+                        پتانسیل رشد نامحدود
+                      </p>
+                    </div>
+                    <span className="text-xl font-bold">
+                      {formatPrice(990000)}
+                      <span className="text-base font-normal text-muted-foreground">
+                        در ماه
+                      </span>
+                    </span>
+                  </div>
+                  <Separator />
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div className="flex items-start gap-2">
+                      <Users className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <p className="text-sm text-primary/80">
+                        مدیریت نامحدود پلتفرم
+                      </p>
+                    </div>
+                    <div className="flex items-start gap-2">
+                      <TrendingUp className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <p className="text-sm text-primary/80">
+                        پایش عملکرد بلادرنگ
+                      </p>
+                    </div>
+                  </div>
+                  <Separator />
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {enterpriseFeatures.map((feature, index) => (
+                      <div key={index} className="flex items-start gap-2">
+                        <Check className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                        <p className="text-sm text-primary/80">{feature}</p>
+                      </div>
+                    ))}
+                  </div>
+                  <span className="absolute -top-2 -end-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary opacity-0 group-has-[[data-state=checked]]:opacity-100">
+                    <Check className="size-3 text-background" />
+                  </span>
+                  <div className="max-h-0 overflow-hidden transition-all duration-300 ease-out group-has-[[data-state=checked]]:max-h-20">
+                    <Button className="mt-4 w-full opacity-0 transition-opacity duration-300 group-has-[[data-state=checked]]:opacity-100">
+                      شروع کنید
+                    </Button>
+                  </div>
+                </label>
+              </RadioGroup>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing38 };
diff --git a/blocks/pricing4.tsx b/blocks/pricing4.tsx
new file mode 100644
index 0000000..16a2156
--- /dev/null
+++ b/blocks/pricing4.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface PricingPlan {
+  name: string;
+  badge: string;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  features: string[];
+  buttonText: string;
+  isPopular?: boolean;
+}
+
+interface Pricing4Props {
+  title?: string;
+  description?: string;
+  plans?: PricingPlan[];
+  className?: string;
+}
+
+const Pricing4 = ({
+  title = "تعرفه‌ها",
+  description = "طرح‌های مقرون‌به‌صرفه ما را ببینید.",
+  plans = [
+    {
+      name: "رایگان",
+      badge: "رایگان",
+      monthlyPrice: 0,
+      yearlyPrice: 0,
+      features: [
+        "یکپارچه‌سازی نامحدود",
+        "پشتیبانی از ویندوز، لینوکس و مک",
+        "پشتیبانی ۲۴/۷",
+        "به‌روزرسانی رایگان",
+      ],
+      buttonText: "شروع کنید",
+    },
+    {
+      name: "حرفه‌ای",
+      badge: "حرفه‌ای",
+      monthlyPrice: 290000,
+      yearlyPrice: 249000,
+      features: [
+        "همه‌چیز در رایگان",
+        "پشتیبانی تماس زنده ماهانه",
+        "فضای ذخیره نامحدود",
+      ],
+      buttonText: "خرید",
+    },
+    {
+      name: "الیت",
+      badge: "الیت",
+      monthlyPrice: 590000,
+      yearlyPrice: 549000,
+      features: [
+        "همه‌چیز در حرفه‌ای",
+        "تحلیل‌های پیشرفته",
+        "برندسازی سفارشی",
+        "کاربران نامحدود",
+      ],
+      buttonText: "خرید",
+      isPopular: true,
+    },
+  ],
+  className,
+}: Pricing4Props) => {
+  const [isAnnually, setIsAnnually] = useState(false);
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container mx-auto">
+        <div className="flex flex-col gap-6">
+          <h2 className="text-xl font-semibold text-pretty lg:text-2xll">
+            {title}
+          </h2>
+          <div className="flex flex-col justify-between gap-10 md:flex-row">
+            <p className="max-w-3xl text-muted-foreground lg:text-xl">
+              {description}
+            </p>
+            <Tabs
+              value={isAnnually ? "annually" : "monthly"}
+              onValueChange={(value: string) =>
+                setIsAnnually(value === "annually")
+              }
+              className="w-fit shrink-0"
+              aria-label="دوره صورتحساب"
+            >
+              <TabsList className="grid h-11 w-max grid-cols-2 gap-0 rounded-md p-1 text-lg">
+                <TabsTrigger
+                  value="monthly"
+                  className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
+                >
+                  ماهانه
+                </TabsTrigger>
+                <TabsTrigger
+                  value="annually"
+                  className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
+                >
+                  سالانه
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+          <div className="flex w-full flex-col items-stretch gap-6 md:flex-row">
+            {plans.map((plan) => (
+              <div
+                key={plan.name}
+                className={`flex w-full flex-col rounded-lg border p-6 text-start ${
+                  plan.isPopular ? "bg-muted" : ""
+                }`}
+              >
+                <Badge className="mb-8 block w-fit uppercase">
+                  {plan.badge}
+                </Badge>
+                <h3 className="font-mono text-xl lg:text-2xll">
+                  {formatPrice(
+                    isAnnually ? plan.yearlyPrice : plan.monthlyPrice,
+                  )}
+                </h3>
+                <p
+                  className={`text-muted-foreground ${plan.monthlyPrice === 0 ? "invisible" : ""}`}
+                >
+                  {isAnnually ? "در سال" : "در ماه"}
+                </p>
+                <Separator className="my-6" />
+                <div className="flex h-full flex-col justify-between gap-20">
+                  <ul className="space-y-4 text-muted-foreground md:leading-snug">
+                    {plan.features.map((feature, featureIndex) => (
+                      <li
+                        key={featureIndex}
+                        className="flex items-center gap-2"
+                      >
+                        <Check className="size-4 shrink-0" aria-hidden="true" />
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  <Button className="w-full">{plan.buttonText}</Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing4 };
diff --git a/blocks/pricing40.tsx b/blocks/pricing40.tsx
new file mode 100644
index 0000000..6c66120
--- /dev/null
+++ b/blocks/pricing40.tsx
@@ -0,0 +1,225 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Product {
+  title: string;
+  price: string;
+  content: {
+    title: string;
+    items: string[];
+  }[];
+}
+
+const products: Product[] = [
+  {
+    title: "بسته پایه استارتاپ",
+    price: `${formatPrice(5000000)} در ماه`,
+    content: [
+      {
+        title: "کارهایی که انجام می‌دهم",
+        items: [
+          "تعیین اهداف فصلی و ماهانه شامل جریان‌های کاری کلیدی و KPI",
+          "ساخت پایه‌های بازاریابی (پرسونا، پیام، سیستم برند)",
+          "بازطراحی وب‌سایت و توسعه استراتژی محتوا",
+          "استخدام اولین اعضای تیم بازاریابی",
+        ],
+      },
+      {
+        title: "آنچه دریافت می‌کنید",
+        items: [
+          "۱۲ ساعت در هفته برای جلسات Zoom و بازبینی همزمان",
+          "پشتیبانی پیام‌رسان تیمی/ایمیل در ساعات کاری",
+          "جلسات استراتژی دو هفته‌یکبار",
+          "گزارش پیشرفت ماهانه",
+        ],
+      },
+      {
+        title: "مناسب برای",
+        items: [
+          "شرکت‌هایی که پایه‌های بازاریابی می‌سازند",
+          "استارتاپ‌های پیش از گسترش تیم",
+          "بنیان‌گذارانی که به راهنمایی استراتژیک نیاز دارند",
+          "کسب‌وکارهایی در حال انتقال به تیم داخلی",
+        ],
+      },
+    ],
+  },
+  {
+    title: "بسته شتاب‌دهنده رشد",
+    price: `${formatPrice(8500000)} در ماه`,
+    content: [
+      {
+        title: "کارهایی که انجام می‌دهم",
+        items: [
+          "استراتژی و اجرای پیشرفته کمپین",
+          "بهینه‌سازی بازاریابی عملکردی",
+          "راه‌اندازی اتوماسیون بازاریابی",
+          "آموزش تیم و توسعه رهبری",
+        ],
+      },
+      {
+        title: "آنچه دریافت می‌کنید",
+        items: [
+          "۲۰ ساعت در هفته پشتیبانی اختصاصی",
+          "بازبینی عملکرد هفتگی",
+          "داشبورد تحلیل سفارشی",
+          "پشتیبانی اولویت‌دار ۲۴/۷",
+        ],
+      },
+      {
+        title: "مناسب برای",
+        items: [
+          "استارتاپ‌های در حال رشد با تیم موجود",
+          "شرکت‌هایی که محصول جدید راه‌اندازی می‌کنند",
+          "کسب‌وکارهای ورود به بازارهای جدید",
+          "سازمان‌هایی که به رشد سریع نیاز دارند",
+        ],
+      },
+    ],
+  },
+  {
+    title: "بسته راهکار سازمانی",
+    price: `${formatPrice(15000000)} در ماه`,
+    content: [
+      {
+        title: "کارهایی که انجام می‌دهم",
+        items: [
+          "مدیریت کامل بخش بازاریابی",
+          "هماهنگی تیم‌های بین‌وظیفه‌ای",
+          "استراتژی کمپین جهانی",
+          "مشاوره در سطح مدیریت ارشد",
+        ],
+      },
+      {
+        title: "آنچه دریافت می‌کنید",
+        items: [
+          "تیم حساب اختصاصی",
+          "توافق‌نامه SLA سفارشی",
+          "بازبینی کسب‌وکار فصلی",
+          "امنیت در سطح سازمانی",
+        ],
+      },
+      {
+        title: "مناسب برای",
+        items: [
+          "سازمان‌های تثبیت‌شده",
+          "شرکت‌های با بیش از ۵۰۰ کارمند",
+          "سازمان‌های بین‌المللی",
+          "نیازهای پیچیده بازاریابی",
+        ],
+      },
+    ],
+  },
+  {
+    title: "بسته سفارشی",
+    price: "تماس با ما",
+    content: [
+      {
+        title: "کارهایی که انجام می‌دهم",
+        items: [
+          "راهکارهای بازاریابی سفارشی",
+          "آموزش تخصصی تیم",
+          "چالش‌های منحصربه‌فرد بازاریابی",
+          "قیمت‌گذاری و خدمات انعطاف‌پذیر",
+        ],
+      },
+      {
+        title: "آنچه دریافت می‌کنید",
+        items: [
+          "پشتیبانی و خدمات متناسب",
+          "قیمت‌گذاری سفارشی",
+          "تیم حساب اختصاصی",
+          "پشتیبانی نامحدود",
+        ],
+      },
+      {
+        title: "مناسب برای",
+        items: [
+          "شرکت‌های با نیازهای بازاریابی منحصربه‌فرد",
+          "سازمان‌های با چالش‌های پیچیده",
+          "کسب‌وکارهای با اهداف مشخص",
+          "تیم‌هایی که به پشتیبانی تخصصی نیاز دارند",
+        ],
+      },
+    ],
+  },
+];
+
+interface Pricing40Props {
+  className?: string;
+}
+
+const Pricing40 = ({ className }: Pricing40Props) => {
+  const [openItems, setOpenItems] = useState<string[]>([]);
+
+  return (
+    <section className={cn("py-20", className)}>
+      <div className="container">
+        <h2 className="mb-12 text-3xl font-bold tracking-tight">بسته‌ها</h2>
+        <div className="mt-12 space-y-2">
+          {products.map((item, index) => (
+            <Accordion
+              key={index}
+              type="multiple"
+              value={openItems}
+              onValueChange={setOpenItems}
+              className="border-b border-muted"
+            >
+              <AccordionItem value={`item-${index}`} className="border-none">
+                <AccordionTrigger className="flex items-center justify-between gap-4 py-6 transition-all duration-300 hover:no-underline [&>svg]:h-6 [&>svg]:w-6 [&>svg]:shrink-0 [&>svg]:transform [&>svg]:transition-transform [&[data-state=open]>svg]:rotate-180">
+                  <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                    <h3 className="text-start text-xl font-semibold sm:text-xl">
+                      {item.title}
+                    </h3>
+                    <div className="flex items-center gap-4">
+                      <span className="text-lg text-muted-foreground sm:text-xl">
+                        {item.price}
+                      </span>
+                    </div>
+                  </div>
+                </AccordionTrigger>
+
+                <AccordionContent className="pb-6">
+                  <div className="grid gap-8 md:grid-cols-3">
+                    {item.content.map((section, sectionIndex) => (
+                      <div key={sectionIndex} className="space-y-4">
+                        <h4 className="text-xl font-medium text-foreground">
+                          {section.title}
+                        </h4>
+                        <ul className="space-y-3">
+                          {section.items.map((bullet, bulletIndex) => (
+                            <li
+                              key={bulletIndex}
+                              className="flex items-start text-muted-foreground"
+                            >
+                              <span className="me-2">•</span>
+                              {bullet}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing40 };
diff --git a/blocks/pricing41.tsx b/blocks/pricing41.tsx
new file mode 100644
index 0000000..7ee307c
--- /dev/null
+++ b/blocks/pricing41.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Plan {
+  id: string;
+  name: string;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  description?: string;
+  features: string[];
+  highlighted?: boolean;
+  ctaText?: string;
+  ctaHref?: string;
+}
+
+interface Pricing41Props {
+  heading?: string;
+  description?: string;
+  plans?: Plan[];
+  className?: string;
+}
+
+const Pricing41 = ({
+  heading = "تعرفه‌ها",
+  description = "رایگان با کل تیم خود استفاده کنید. با ارتقای طرح، موارد کاری نامحدود، کنترل‌های امنیتی پیشرفته و امکانات بیشتر را فعال کنید.",
+  plans = [
+    {
+      id: "free",
+      name: "رایگان",
+      monthlyPrice: 0,
+      yearlyPrice: 0,
+      description: "رایگان برای همه",
+      features: [
+        "اعضای نامحدود",
+        "۲ تیم",
+        "۵۰۰ مورد کاری",
+        "یکپارچه‌سازی پیام‌رسان تیمی و مخزن کد",
+      ],
+      ctaText: "شروع کنید",
+      ctaHref: "#",
+    },
+    {
+      id: "startup",
+      name: "استارتاپ",
+      monthlyPrice: 80000,
+      yearlyPrice: 60000,
+      features: [
+        "همه امکانات طرح رایگان، به‌علاوه:",
+        "دستیار هوش مصنوعی",
+        "تیم‌های نامحدود",
+        "موارد کاری و آپلود فایل نامحدود",
+        "بینش‌های پیشرفته",
+        "نقش‌های مدیریتی",
+      ],
+      highlighted: true,
+      ctaText: "شروع کنید",
+      ctaHref: "#",
+    },
+    {
+      id: "enterprise",
+      name: "سازمانی",
+      monthlyPrice: 240000,
+      yearlyPrice: 200000,
+      features: [
+        "همه امکانات طرح استارتاپ، به‌علاوه:",
+        "هوش مصنوعی پیشرفته",
+        "SSO و احراز هویت سازمانی",
+        "پشتیبانی اختصاصی",
+        "یکپارچه‌سازی‌های سفارشی",
+      ],
+      ctaText: "تماس با فروش",
+      ctaHref: "#",
+    },
+  ],
+  className,
+}: Pricing41Props) => {
+  const [isAnnual, setIsAnnual] = useState(true);
+
+  return (
+    <section className={cn("py-28 lg:py-32", className)}>
+      <div className="container max-w-5xl">
+        <div className="space-y-4 text-center">
+          <h2 className="text-xl tracking-tight md:text-xl lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="mx-auto max-w-xl leading-snug text-balance text-muted-foreground">
+            {description}
+          </p>
+        </div>
+
+        <div className="mt-8 grid items-start gap-5 text-start md:mt-12 md:grid-cols-3 lg:mt-20">
+          {plans.map((plan) => (
+            <Card
+              key={plan.id}
+              className={cn(
+                plan.highlighted && "origin-top outline-4 outline-primary",
+              )}
+            >
+              <CardContent className="flex flex-col gap-7 px-6 py-5">
+                <div className="space-y-2">
+                  <h3 className="font-semibold text-foreground">{plan.name}</h3>
+                  <div className="space-y-1">
+                    <div className="text-lg font-medium text-muted-foreground">
+                      {formatPrice(
+                        isAnnual ? plan.yearlyPrice : plan.monthlyPrice,
+                      )}{" "}
+                      {plan.id !== "free" && (
+                        <span className="text-muted-foreground">
+                          به ازای هر کاربر در{" "}
+                          {isAnnual ? "سال" : "ماه"}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {plan.id !== "free" ? (
+                  <div className="flex items-center gap-2">
+                    <span
+                      dir="rtl"
+                      className="inline-flex shrink-0 items-center"
+                    >
+                      <Switch
+                        checked={isAnnual}
+                        onCheckedChange={() => setIsAnnual(!isAnnual)}
+                        aria-label="تغییر صورتحساب سالانه"
+                      />
+                    </span>
+                    <span
+                      className={cn(
+                        "text-sm font-medium transition-colors",
+                        isAnnual
+                          ? "text-foreground"
+                          : "text-muted-foreground",
+                      )}
+                    >
+                      صورتحساب سالانه
+                    </span>
+                  </div>
+                ) : (
+                  <span className="text-sm text-muted-foreground">
+                    {plan.description}
+                  </span>
+                )}
+
+                <div className="space-y-3">
+                  {plan.features.map((feature) => (
+                    <div
+                      key={feature}
+                      className="flex items-center gap-1.5 text-muted-foreground"
+                    >
+                      <Check className="size-5 shrink-0" />
+                      <span className="text-sm">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+
+                <Button
+                  className="w-fit"
+                  variant={plan.highlighted ? "default" : "outline"}
+                  asChild
+                >
+                  <a href={plan.ctaHref || "#"}>
+                    {plan.ctaText || "شروع کنید"}
+                  </a>
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing41 };
diff --git a/blocks/pricing42.tsx b/blocks/pricing42.tsx
new file mode 100644
index 0000000..955506c
--- /dev/null
+++ b/blocks/pricing42.tsx
@@ -0,0 +1,225 @@
+"use client";
+
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  name: string;
+  values: (boolean | null | string)[];
+}
+
+interface FeatureSection {
+  category: string;
+  features: Feature[];
+}
+
+interface Plan {
+  name: string;
+  ctaText: string;
+  ctaHref?: string;
+  ctaVariant?: "default" | "outline" | "secondary";
+}
+
+interface Pricing42Props {
+  plans?: Plan[];
+  featureSections?: FeatureSection[];
+  className?: string;
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  Usage: "میزان استفاده",
+  Features: "امکانات",
+  Support: "پشتیبانی",
+};
+
+const Pricing42 = ({
+  plans = [
+    {
+      name: "رایگان",
+      ctaText: "شروع کنید",
+      ctaHref: "#",
+      ctaVariant: "outline",
+    },
+    {
+      name: "استارتاپ",
+      ctaText: "شروع کنید",
+      ctaHref: "#",
+      ctaVariant: "outline",
+    },
+    {
+      name: "سازمانی",
+      ctaText: "درخواست دمو",
+      ctaHref: "#",
+      ctaVariant: "outline",
+    },
+  ],
+  featureSections = [
+    {
+      category: "Usage",
+      features: [
+        {
+          name: "اعضا",
+          values: ["نامحدود", "نامحدود", "نامحدود"],
+        },
+        {
+          name: "تراکنش‌ها",
+          values: ["۲۵۰", "نامحدود", "نامحدود"],
+        },
+        { name: "تیم‌ها", values: ["۲", "نامحدود", "نامحدود"] },
+      ],
+    },
+    {
+      category: "Features",
+      features: [
+        { name: "گزارش‌دهی", values: [true, true, true] },
+        { name: "تحلیل‌ها", values: [true, true, true] },
+        { name: "ورود و خروج داده", values: [true, true, true] },
+        { name: "یکپارچه‌سازی‌ها", values: [true, true, true] },
+        { name: "دستیار هوش مصنوعی", values: [null, true, true] },
+        { name: "نقش‌های مدیریتی", values: [null, null, true] },
+        { name: "گزارش ممیزی", values: [null, null, true] },
+      ],
+    },
+    {
+      category: "Support",
+      features: [
+        { name: "پشتیبانی اولویت‌دار", values: [true, true, true] },
+        { name: "مدیر حساب", values: [null, null, true] },
+        { name: "SLA آپتایم", values: [null, null, true] },
+      ],
+    },
+  ],
+  className,
+}: Pricing42Props) => {
+  const [selectedPlan, setSelectedPlan] = useState(1);
+
+  const renderFeatureValue = (value: boolean | null | string) => {
+    if (value === true) {
+      return <Check className="size-5" />;
+    }
+    if (value === false) {
+      return <X className="size-5" />;
+    }
+    if (value === null) {
+      return null;
+    }
+    return (
+      <div className="flex items-center gap-2">
+        <Check className="size-4 shrink-0" />
+        <span className="text-muted-foreground">{value}</span>
+      </div>
+    );
+  };
+
+  return (
+    <section className={cn("pb-28 lg:py-32", className)}>
+      <div className="container">
+        {/* Plan Headers */}
+        <div>
+          {/* Mobile View */}
+          <div className="md:hidden">
+            <Collapsible className="">
+              <>
+                <div className="flex items-center justify-between border-b py-4">
+                  <CollapsibleTrigger className="flex items-center gap-2">
+                    <h3 className="text-xl font-semibold">
+                      {plans[selectedPlan].name}
+                    </h3>
+                    <ChevronsUpDown
+                      className={cn("size-5 transition-transform")}
+                    />
+                  </CollapsibleTrigger>
+                  <Button
+                    variant={plans[selectedPlan].ctaVariant || "outline"}
+                    className="w-fit"
+                    asChild
+                  >
+                    <a href={plans[selectedPlan].ctaHref || "#"}>
+                      {plans[selectedPlan].ctaText}
+                    </a>
+                  </Button>
+                </div>
+                <CollapsibleContent className="flex flex-col space-y-2 p-2">
+                  {plans.map(
+                    (plan, index) =>
+                      index !== selectedPlan && (
+                        <Button
+                          size="lg"
+                          variant="secondary"
+                          key={index}
+                          onClick={() => setSelectedPlan(index)}
+                        >
+                          {plan.name}
+                        </Button>
+                      ),
+                  )}
+                </CollapsibleContent>
+              </>
+            </Collapsible>
+          </div>
+
+          {/* Desktop View */}
+          <div className="grid grid-cols-4 gap-4 max-md:hidden">
+            <div className="col-span-1 max-md:hidden" />
+            {plans.map((plan, index) => (
+              <div key={index}>
+                <h3 className="mb-3 text-xl font-semibold">{plan.name}</h3>
+                <Button variant={plan.ctaVariant || "outline"} asChild>
+                  <a href={plan.ctaHref || "#"}>{plan.ctaText}</a>
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Feature Sections */}
+        {featureSections.map((section, sectionIndex) => (
+          <div key={sectionIndex}>
+            <div className="border-b border-primary/40 py-4">
+              <h3 className="text-lg font-semibold">
+                {CATEGORY_LABELS[section.category] ?? section.category}
+              </h3>
+            </div>
+            {section.features.map((feature, featureIndex) => (
+              <div
+                key={featureIndex}
+                className="grid grid-cols-2 font-medium text-foreground max-md:border-b md:grid-cols-4"
+              >
+                <span className="inline-flex items-center py-4">
+                  {feature.name}
+                </span>
+                {/* Mobile View - Only Selected Plan */}
+                <div className="md:hidden">
+                  <div className="flex items-center gap-1 py-4 md:border-b">
+                    {renderFeatureValue(feature.values[selectedPlan])}
+                  </div>
+                </div>
+                {/* Desktop View - All Plans */}
+                <div className="hidden md:col-span-3 md:grid md:grid-cols-3 md:gap-4">
+                  {feature.values.map((value, i) => (
+                    <div
+                      key={i}
+                      className="flex items-center gap-1 border-b py-4"
+                    >
+                      {renderFeatureValue(value)}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Pricing42 };
diff --git a/blocks/pricing5.tsx b/blocks/pricing5.tsx
new file mode 100644
index 0000000..3cae7e2
--- /dev/null
+++ b/blocks/pricing5.tsx
@@ -0,0 +1,161 @@
+import { Check, Minus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const perMemberPrice = `${formatPrice(50000)} در ماه به ازای هر عضو`;
+
+type PlanFeature = {
+  feature: string;
+  pro: string | boolean;
+  entreprise: string | boolean;
+};
+
+const planData: PlanFeature[] = [
+  {
+    feature: "پروژه‌ها",
+    pro: "نامحدود",
+    entreprise: "نامحدود",
+  },
+  {
+    feature: "یکپارچه‌سازی‌ها",
+    pro: "نامحدود",
+    entreprise: "نامحدود",
+  },
+  { feature: "همکاری زنده", pro: true, entreprise: true },
+  {
+    feature: "دسترسی‌های سفارشی",
+    pro: true,
+    entreprise: true,
+  },
+  {
+    feature: "اعضای تیم",
+    pro: perMemberPrice,
+    entreprise: perMemberPrice,
+  },
+  {
+    feature: "گزارش‌های پایه",
+    pro: true,
+    entreprise: true,
+  },
+  { feature: "گزارش‌های پیشرفته", pro: false, entreprise: true },
+  { feature: "خروجی گرفتن از داده", pro: false, entreprise: true },
+];
+
+interface Pricing5Props {
+  className?: string;
+}
+
+const Pricing5 = ({ className }: Pricing5Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container max-w-5xl">
+        <div className="flex flex-col items-center gap-4 text-center">
+          <h2 className="mb-2 text-3xl font-semibold lg:text-2xll">تعرفه‌ها</h2>
+          <p className="text-muted-foreground lg:text-lg">
+            طرح مناسب خود را انتخاب کنید و همین امروز شروع کنید.
+          </p>
+        </div>
+        <div className="mt-10 flex flex-col gap-6 lg:flex-row lg:gap-0">
+          <Card className="flex w-full flex-col justify-between gap-8 text-center lg:rounded-e-none lg:border-e-0">
+            <CardHeader>
+              <CardTitle>حرفه‌ای</CardTitle>
+              <p className="text-muted-foreground">
+                برای تیم‌های در حال رشد
+              </p>
+            </CardHeader>
+            <CardContent>
+              <span className="text-2xll font-bold">{formatPrice(100000)}</span>
+              <p className="mt-3 text-muted-foreground">
+                به ازای هر کاربر در ماه
+              </p>
+            </CardContent>
+            <CardFooter>
+              <Button className="w-full">شروع کنید</Button>
+            </CardFooter>
+          </Card>
+          <Separator
+            orientation="vertical"
+            className="hidden h-auto lg:block"
+          />
+          <Card className="flex w-full flex-col justify-between gap-8 rounded-s-none border-s-0 text-center">
+            <CardHeader>
+              <CardTitle>سازمانی</CardTitle>
+              <p className="text-muted-foreground">
+                برای سازمان‌های بزرگ
+              </p>
+            </CardHeader>
+            <CardContent>
+              <span className="text-xl font-bold">تماس با ما</span>
+              <p className="mt-3 text-muted-foreground">با ما تماس بگیرید</p>
+            </CardContent>
+            <CardFooter>
+              <Button className="w-full" variant="outline">
+                شروع کنید
+              </Button>
+            </CardFooter>
+          </Card>
+        </div>
+        <Table className="mt-10 min-w-[420px]">
+          <TableHeader>
+            <TableRow className="hover:bg-background">
+              <TableHead></TableHead>
+              <TableHead className="font-bold text-primary">حرفه‌ای</TableHead>
+              <TableHead className="font-bold text-primary">سازمانی</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {planData.map((item) => (
+              <TableRow key={item.feature} className="hover:bg-background">
+                <TableCell>{item.feature}</TableCell>
+                <TableCell>
+                  {typeof item.pro === "boolean" ? (
+                    item.pro ? (
+                      <Check className="size-6" />
+                    ) : (
+                      <Minus className="size-6" />
+                    )
+                  ) : (
+                    item.pro
+                  )}
+                </TableCell>
+                <TableCell>
+                  {typeof item.entreprise === "boolean" ? (
+                    item.entreprise ? (
+                      <Check className="size-6" />
+                    ) : (
+                      <Minus className="size-6" />
+                    )
+                  ) : (
+                    item.entreprise
+                  )}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing5 };
diff --git a/blocks/pricing6.tsx b/blocks/pricing6.tsx
new file mode 100644
index 0000000..b0a8e24
--- /dev/null
+++ b/blocks/pricing6.tsx
@@ -0,0 +1,77 @@
+import { Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing6Props {
+  heading: string;
+  description?: string;
+  price?: string | number;
+  priceSuffix?: string;
+  features?: string[][];
+  buttonText?: string;
+  className?: string;
+}
+
+const defaultFeatures = [
+  ["نامحدود", "یکپارچه‌سازی‌ها", "پشتیبانی ۲۴/۷"],
+  ["همکاری زنده", "فضای ذخیره نامحدود", "بازگشت وجه ۳۰ روزه"],
+  ["اعضای نامحدود", "شخصی‌سازی", "کاربران نامحدود"],
+];
+
+const Pricing6 = ({
+  heading = "تعرفه‌ها",
+  description = "قیمت‌گذاری ساده با ۷ روز آزمایش رایگان.",
+  price = 290000,
+  priceSuffix = "در ماه",
+  features = defaultFeatures,
+  buttonText = "شروع آزمایش رایگان",
+  className,
+}: Pricing6Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
+          <h2 className="text-xl font-semibold text-pretty lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="max-w-md text-muted-foreground lg:text-xl">
+            {description}
+          </p>
+          <div className="mx-auto flex w-full flex-col rounded-lg border p-6 sm:w-fit sm:min-w-80">
+            <div className="flex items-end justify-center gap-1">
+              <span className="text-2xll font-semibold">
+                {formatPrice(price)}
+              </span>
+              <span className="pb-2 text-muted-foreground">{priceSuffix}</span>
+            </div>
+            <div className="my-6">
+              {features.map((featureGroup, idx) => (
+                <div key={idx}>
+                  <ul className="flex flex-col gap-3">
+                    {featureGroup.map((feature, i) => (
+                      <li
+                        key={i}
+                        className="flex items-center justify-between gap-2 text-sm font-medium"
+                      >
+                        {feature} <Check className="inline size-4 shrink-0" />
+                      </li>
+                    ))}
+                  </ul>
+                  {idx < features.length - 1 && <Separator className="my-6" />}
+                </div>
+              ))}
+            </div>
+            <Button>{buttonText}</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing6 };
diff --git a/blocks/pricing7.tsx b/blocks/pricing7.tsx
new file mode 100644
index 0000000..b66529d
--- /dev/null
+++ b/blocks/pricing7.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+interface Pricing7Props {
+  className?: string;
+}
+
+const Pricing7 = ({ className }: Pricing7Props) => {
+  const [isAnnually, setIsAnnually] = useState(false);
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto mb-20 max-w-3xl text-center">
+          <h2 className="mb-4 text-xl font-semibold lg:text-2xll">تعرفه‌ها</h2>
+          <p className="text-muted-foreground lg:text-lg">
+            طرح مناسب خود را انتخاب کنید و با امکانات متناسب نیازتان شروع
+            کنید.
+          </p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <span className="text-muted-foreground">دوره صورتحساب</span>
+          <div className="inline-flex items-center rounded-md bg-muted p-1">
+            <RadioGroup
+              defaultValue="monthly"
+              className="grid h-auto w-auto grid-cols-2 gap-0"
+              onValueChange={(value) => {
+                setIsAnnually(value === "annually");
+              }}
+            >
+              <div className='rounded-md transition-all has-[button[data-state="checked"]]:bg-background'>
+                <RadioGroupItem
+                  value="monthly"
+                  id="monthly"
+                  className="peer sr-only"
+                />
+                <Label
+                  htmlFor="monthly"
+                  className="flex h-11 cursor-pointer items-center justify-center whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
+                >
+                  ماهانه
+                </Label>
+              </div>
+              <div className='rounded-md transition-all has-[button[data-state="checked"]]:bg-background'>
+                <RadioGroupItem
+                  value="annually"
+                  id="annually"
+                  className="peer sr-only"
+                />
+                <Label
+                  htmlFor="annually"
+                  className="flex h-11 cursor-pointer items-center justify-center gap-2 whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
+                >
+                  <span>سالانه</span>
+                  <Badge
+                    variant="outline"
+                    className="shrink-0 border-green-200 bg-green-100 px-1.5 text-xs text-green-600"
+                  >
+                    ۲۰٪-
+                  </Badge>
+                </Label>
+              </div>
+            </RadioGroup>
+          </div>
+          <div className="mt-10 grid max-w-3xl gap-6 md:grid-cols-2">
+            <div className="rounded-lg border p-6">
+              <div className="flex h-full flex-col justify-between gap-5">
+                <div>
+                  <h3 className="mb-4 text-xl font-semibold">طرح پایه</h3>
+                  <span className="text-2xll font-semibold">
+                    {formatPrice(isAnnually ? 63 : 79)}
+                  </span>
+                  <span className="mb-4 block font-semibold">در ماه</span>
+                  <p className="text-muted-foreground">
+                    مناسب تیم‌های کوچک یا کسب‌وکارهایی که تازه شروع کرده‌اند.
+                  </p>
+                  <p className="mt-6 mb-3 font-semibold">شامل</p>
+                  <ul className="flex flex-col gap-3">
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      محدودیت ۵ پروژه
+                    </li>
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      ۵ گیگابایت فضای ذخیره
+                    </li>
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      تا ۳ کاربر
+                    </li>
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      فقط پشتیبانی ایمیل
+                    </li>
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      بدون ثبت زمان کار
+                    </li>
+                  </ul>
+                </div>
+                <Button>آزمایش رایگان را شروع کنید</Button>
+              </div>
+            </div>
+            <div className="rounded-lg border p-6">
+              <div className="flex h-full flex-col justify-between gap-5">
+                <div>
+                  <h3 className="mb-4 text-xl font-semibold">طرح حرفه‌ای</h3>
+                  <span className="text-2xll font-semibold">
+                    {formatPrice(isAnnually ? 239 : 299)}
+                  </span>
+                  <span className="mb-4 block font-semibold">در ماه</span>
+                  <p className="text-muted-foreground">
+                    مناسب کسب‌وکارهای متوسط تا بزرگ با تمام امکانات موردنیاز.
+                  </p>
+                  <p className="mt-6 mb-3 font-semibold">
+                    همه‌چیز در پایه، به‌علاوه
+                  </p>
+                  <ul className="flex flex-col gap-3">
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      پروژه‌های نامحدود
+                    </li>
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      ۵۰ گیگابایت فضای ذخیره
+                    </li>
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      کاربران نامحدود
+                    </li>
+                    <li className="flex gap-2">
+                      <Check className="mt-1 size-4 shrink-0" />
+                      پشتیبانی اولویت‌دار
+                    </li>
+                  </ul>
+                </div>
+                <Button>آزمایش رایگان را شروع کنید</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing7 };
diff --git a/blocks/pricing8.tsx b/blocks/pricing8.tsx
new file mode 100644
index 0000000..3f900f5
--- /dev/null
+++ b/blocks/pricing8.tsx
@@ -0,0 +1,76 @@
+import { Check } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+const features = [
+  "پشتیبان‌گیری خودکار",
+  "پشتیبانی ۲۴/۷",
+  "پروژه‌های نامحدود",
+  "کاربران نامحدود",
+  "دامنه سفارشی",
+  "برندسازی سفارشی",
+  "تحلیل‌های پیشرفته",
+  "دسترسی‌های سفارشی",
+  "گزارش‌های پیشرفته",
+];
+
+interface Pricing8Props {
+  className?: string;
+}
+
+const Pricing8 = ({ className }: Pricing8Props) => {
+  return (
+    <section className={cn("bg-muted py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-4 text-center">
+          <h2 className="mb-2 text-3xl font-medium lg:text-2xll">تعرفه‌ها</h2>
+          <p className="max-w-lg text-muted-foreground">
+            قیمت‌گذاری ساده و شفاف با امکانات کامل برای رشد کسب‌وکار شما.
+          </p>
+        </div>
+        <div className="mt-10">
+          <Card className="mx-auto flex w-full max-w-sm flex-col justify-between gap-10 rounded-lg p-6 text-center">
+            <p className="text-xl">شروع از</p>
+            <div>
+              <div className="flex items-end justify-center gap-1">
+                <span className="text-xl font-medium lg:text-2xll">
+                  {formatPrice(160000)}
+                </span>
+                <span className="pb-1 text-lg text-muted-foreground">
+                  در ماه
+                </span>
+              </div>
+              <p className="mt-1 text-sm text-muted-foreground">
+                با ۷ روز آزمایش رایگان
+              </p>
+            </div>
+            <Button className="w-full" size="lg">
+              رایگان امتحان کنید
+            </Button>
+          </Card>
+          <p className="lg:text-1xl mt-8 text-center text-xl font-medium lg:mt-10">
+            چه چیزهایی در طرح گنجانده شده
+          </p>
+          <ul className="mx-auto mt-4 grid w-fit md:w-auto md:max-w-2xl md:grid-cols-2 md:ps-14 lg:max-w-4xl lg:grid-cols-3">
+            {features.map((feature, index) => (
+              <li
+                key={index}
+                className="mt-4 flex items-center gap-2 text-sm font-medium"
+              >
+                <Check className="size-5" />
+                <span className="text-muted-foreground">{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Pricing8 };
diff --git a/blocks/pricing9.tsx b/blocks/pricing9.tsx
new file mode 100644
index 0000000..f2490a6
--- /dev/null
+++ b/blocks/pricing9.tsx
@@ -0,0 +1,326 @@
+"use client";
+
+import { CheckIcon, Info, MinusIcon } from "lucide-react";
+import { Fragment, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: string | number) =>
+  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
+
+type TierName = "Free" | "Pro" | "Premium";
+
+interface Tier {
+  id: TierName;
+  name: string;
+  monthlyPrice: number;
+  annualPrice: number;
+  description: string;
+}
+
+interface Feature {
+  name: string;
+  tiers: Partial<Record<TierName, boolean>>;
+  tooltip?: string;
+}
+
+interface Section {
+  name: string;
+  features: Feature[];
+}
+
+const tiers: Tier[] = [
+  {
+    id: "Free",
+    name: "رایگان",
+    monthlyPrice: 0,
+    annualPrice: 0,
+    description: "مناسب شروع و آشنایی با پلتفرم.",
+  },
+  {
+    id: "Pro",
+    name: "حرفه‌ای",
+    monthlyPrice: 100000,
+    annualPrice: 100000,
+    description: "برای تیم‌های کوچک و کسب‌وکارهای در حال رشد.",
+  },
+  {
+    id: "Premium",
+    name: "پریمیوم",
+    monthlyPrice: 150000,
+    annualPrice: 150000,
+    description: "برای سازمان‌هایی با نیازهای پیشرفته.",
+  },
+];
+
+const sections: Section[] = [
+  {
+    name: "امکانات کلیدی",
+    features: [
+      {
+        name: "همکاری زنده",
+        tiers: { Free: true, Pro: true, Premium: true },
+        tooltip: "همکاری همزمان تیمی روی پروژه‌ها",
+      },
+      {
+        name: "پروژه‌های نامحدود",
+        tiers: { Free: true, Pro: true, Premium: true },
+        tooltip: "بدون محدودیت در تعداد پروژه‌ها",
+      },
+      {
+        name: "دسترسی‌های سفارشی",
+        tiers: { Pro: true, Premium: true },
+        tooltip: "تعیین سطح دسترسی برای هر عضو تیم",
+      },
+      {
+        name: "اعضای تیم",
+        tiers: {
+          Premium: true,
+        },
+        tooltip: "مدیریت اعضای تیم در سطح سازمانی",
+      },
+    ],
+  },
+  {
+    name: "گزارش‌دهی",
+    features: [
+      {
+        name: "گزارش‌های پایه",
+        tiers: { Free: true, Pro: true, Premium: true },
+        tooltip: "گزارش‌های ضروری عملکرد و فعالیت",
+      },
+      {
+        name: "گزارش‌های پیشرفته",
+        tiers: { Pro: true, Premium: true },
+        tooltip: "تحلیل عمیق‌تر با فیلترها و نمودارها",
+      },
+      {
+        name: "گزارش‌های سفارشی",
+        tiers: { Premium: true },
+        tooltip: "ساخت گزارش متناسب با نیاز سازمان",
+      },
+      {
+        name: "خروجی گرفتن از داده",
+        tiers: { Premium: true },
+        tooltip: "دریافت خروجی داده در قالب‌های مختلف",
+      },
+    ],
+  },
+];
+
+interface Pricing9Props {
+  className?: string;
+}
+
+const Pricing9 = ({ className }: Pricing9Props) => {
+  const [isAnnual, setIsAnnual] = useState(false);
+  return (
+    <section className={cn("py-24 sm:py-32", className)}>
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-4xl text-center">
+          <p className="mt-2 text-xl font-bold tracking-tight sm:text-2xll">
+            طرح خود را انتخاب کنید
+          </p>
+        </div>
+        <p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-muted-foreground">
+          طرحی را انتخاب کنید که با نیازهای تیم و کسب‌وکار شما هماهنگ باشد.
+        </p>
+        <div className="mt-10 flex flex-col items-center gap-2 lg:hidden">
+          <span className="flex items-center gap-3 text-base font-medium">
+            سالانه
+            <Switch
+              checked={isAnnual}
+              onCheckedChange={() => setIsAnnual(!isAnnual)}
+            />
+            ماهانه
+          </span>
+        </div>
+
+        <div className="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">
+          {tiers.map((tier) => (
+            <Card key={tier.id} className="p-8">
+              <CardHeader className="p-0">
+                <div className="flex flex-col gap-2 text-center">
+                  <span className="text-xl leading-7 font-bold uppercase">
+                    <CardTitle className="text-xl">{tier.name}</CardTitle>
+                  </span>
+                  <span className="text-sm font-normal text-muted-foreground">
+                    {tier.description}
+                  </span>
+                </div>
+                <div className="flex flex-col justify-center gap-x-1 pt-8 text-center">
+                  <span className="text-xl font-bold">
+                    {formatPrice(
+                      isAnnual ? tier.annualPrice : tier.monthlyPrice,
+                    )}
+                  </span>
+                  <span className="text-sm leading-6 text-muted-foreground">
+                    در ماه
+                  </span>
+                </div>
+              </CardHeader>
+              <Button className="mt-8 w-full">خرید طرح</Button>
+              <CardContent className="p-0">
+                <ul className="mt-10 space-y-4 text-sm leading-6">
+                  <TooltipProvider>
+                    {sections.map((section) => (
+                      <li key={section.name}>
+                        <ul role="list" className="space-y-4">
+                          {section.features.map(
+                            (feature) =>
+                              feature.tiers[tier.id] && (
+                                <li
+                                  key={feature.name}
+                                  className="flex items-center justify-between"
+                                >
+                                  <span className="flex items-center gap-3">
+                                    <CheckIcon className="h-5 w-5 flex-none" />
+                                    <span>{feature.name}</span>
+                                  </span>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <Info className="me-1 h-4 w-4 text-muted-foreground" />
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                      {feature.tooltip}
+                                    </TooltipContent>
+                                  </Tooltip>
+                                </li>
+                              ),
+                          )}
+                        </ul>
+                      </li>
+                    ))}
+                  </TooltipProvider>
+                </ul>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="isolate mt-20 hidden lg:block">
+          <div className="relative -mx-8">
+            {tiers.map((tier, idx) => (
+              <div
+                className="absolute inset-x-4 inset-y-0 -z-10 flex"
+                key={tier.id}
+              >
+                <div
+                  className="flex w-1/4 px-4"
+                  style={{
+                    marginInlineStart: `${(idx + 1) * 25}%`,
+                  }}
+                >
+                  <div className="w-full border-s border-e" />
+                </div>
+              </div>
+            ))}
+            <table className="w-full table-fixed border-separate border-spacing-x-8 text-start">
+              <thead>
+                <tr>
+                  <td />
+                  {tiers.map((tier) => (
+                    <th key={tier.id} className="px-6 pt-6 xl:px-8 xl:pt-8">
+                      <div className="flex flex-col gap-2 text-center">
+                        <span className="text-xl leading-7 font-bold uppercase">
+                          {tier.name}
+                        </span>
+                        <span className="text-sm font-normal text-muted-foreground">
+                          {tier.description}
+                        </span>
+                      </div>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>
+                    <div className="flex flex-col gap-2">
+                      <p className="text-sm font-normal text-muted-foreground">
+                        صورتحساب
+                      </p>
+                      <span className="flex items-center gap-3 text-base font-medium">
+                        سالانه
+                        <Switch
+                          checked={isAnnual}
+                          onCheckedChange={() => setIsAnnual(!isAnnual)}
+                        />
+                        ماهانه
+                      </span>
+                    </div>
+                  </th>
+                  {tiers.map((tier) => (
+                    <td key={tier.id} className="px-6 pt-10 xl:px-8">
+                      <div className="flex flex-col justify-center gap-x-1 text-center">
+                        <span className="text-xl font-bold">
+                          {formatPrice(
+                            isAnnual ? tier.annualPrice : tier.monthlyPrice,
+                          )}
+                        </span>
+                        <span className="text-sm leading-6 text-muted-foreground">
+                          در ماه
+                        </span>
+                      </div>
+                      <Button className="mt-8 w-full">شروع کنید</Button>
+                    </td>
+                  ))}
+                </tr>
+                {sections.map((section, sectionIdx) => (
+                  <Fragment key={section.name}>
+                    <tr>
+                      <th
+                        className={cn(
+                          "pb-4 text-sm leading-6 font-semibold",
+                          sectionIdx === 0 ? "pt-8" : "pt-16",
+                        )}
+                      >
+                        {section.name}
+                      </th>
+                    </tr>
+                    <TooltipProvider delayDuration={200}>
+                      {section.features.map((feature) => (
+                        <tr key={feature.name}>
+                          <th className="flex items-center justify-between py-4 text-sm leading-6 font-normal">
+                            {feature.name}
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <Info className="me-1 h-4 w-4 text-muted-foreground hover:text-foreground" />
+                              </TooltipTrigger>
+                              <TooltipContent>{feature.tooltip}</TooltipContent>
+                            </Tooltip>
+                          </th>
+                          {tiers.map((tier) => (
+                            <td key={tier.id} className="px-6 py-4 xl:px-8">
+                              <>
+                                {feature.tiers[tier.id] ? (
+                                  <CheckIcon className="mx-auto h-5 w-5" />
+                                ) : (
+                                  <MinusIcon className="mx-auto h-5 w-5 text-muted-foreground" />
+                                )}
+                              </>
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </TooltipProvider>
+                  </Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+export { Pricing9 };
diff --git a/blocks/process1.tsx b/blocks/process1.tsx
new file mode 100644
index 0000000..7b0f2be
--- /dev/null
+++ b/blocks/process1.tsx
@@ -0,0 +1,119 @@
+import { Asterisk, CornerDownRight } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Process1Props {
+  className?: string;
+}
+
+const Process1 = ({ className }: Process1Props) => {
+  const process = [
+    {
+      step: "۱",
+      title: "کشف و تحقیق",
+      description:
+        "با درک اهداف کسب‌وکار، مخاطب هدف و چالش‌های فعلی شما شروع می‌کنیم. این فاز شامل تحقیق، تحلیل و برنامه‌ریزی استراتژیک برای شناسایی فرصت‌هاست.",
+    },
+    {
+      step: "۲",
+      title: "استراتژی و برنامه‌ریزی",
+      description:
+        "بر اساس یافته‌ها، استراتژی جامعی متناسب با اهداف شما توسعه می‌دهیم. این شامل تعریف رویکرد، زمان‌بندی و نقاط عطف کلیدی برای موفقیت است.",
+    },
+    {
+      step: "۰۳",
+      title: "اجرا و توسعه",
+      description:
+        "استراتژی را از طریق پیاده‌سازی و توسعه دقیق به واقعیت تبدیل می‌کنیم. تیم ما به‌صورت همکاری کار می‌کند تا هر جزئیات با نیازها و استانداردهای شما هم‌خوان باشد.",
+    },
+    {
+      step: "۰۴",
+      title: "بهینه‌سازی و بهبود",
+      description:
+        "عملکرد را به‌طور مستمر پایش و بازخورد جمع‌آوری می‌کنیم تا راه‌حل را پالایش و بهبود دهیم. این فرآیند تکراری موفقیت و رشد بلندمدت را تضمین می‌کند.",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
+          <div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
+            <div className="relative w-fit text-2xll font-semibold tracking-tight lg:text-2xll">
+              <h1 className="w-fit">فرآیند ما</h1>
+              <Asterisk className="absolute -top-2 -left-2 size-5 text-orange-500 md:size-10 lg:-left-14" />
+            </div>
+            <p className="text-start text-base text-foreground/50">
+              از کشف نیازهای شما تا تحویل نهایی، هر مرحله با دقت و شفافیت پیش
+              می‌رود تا بهترین نتیجه حاصل شود.
+            </p>
+
+            <Button
+              variant="ghost"
+              className="flex items-center justify-start gap-2"
+            >
+              <CornerDownRight className="text-orange-500 rtl:rotate-180" />
+              تماس بگیرید
+            </Button>
+          </div>
+          <ul className="relative col-span-4 w-full lg:ps-22">
+            {process.map((step, index) => (
+              <li
+                key={index}
+                className="relative flex flex-col justify-between gap-10 border-t py-8 md:flex-row lg:py-10"
+              >
+                <Illustration className="absolute top-4 left-0" />
+
+                <div className="flex size-12 items-center justify-center bg-muted px-4 py-1 tracking-tighter">
+                  {step.step}
+                </div>
+                <div>
+                  <h3 className="mb-4 text-start text-xl font-semibold tracking-tighter lg:text-3xl">
+                    {step.title}
+                  </h3>
+                  <p className="text-start text-foreground/50">
+                    {step.description}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Process1 };
+
+const Illustration = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="22"
+      height="20"
+      viewBox="0 0 22 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <line
+        x1="0.607422"
+        y1="2.57422"
+        x2="21.5762"
+        y2="2.57422"
+        stroke="#FF0000"
+        strokeWidth="4"
+      />
+      <line
+        x1="19.5762"
+        y1="19.624"
+        x2="19.5762"
+        y2="4.57422"
+        stroke="#FF0000"
+        strokeWidth="4"
+      />
+    </svg>
+  );
+};
diff --git a/blocks/process2.tsx b/blocks/process2.tsx
new file mode 100644
index 0000000..5cb2ec8
--- /dev/null
+++ b/blocks/process2.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { motion, useInView } from "framer-motion";
+import { CornerDownRight } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+// Custom hook to get previous value
+const usePrevious = <T,>(value: T): T | undefined => {
+  const [prev, setPrev] = useState<T | undefined>(undefined);
+  const ref = useRef(value);
+
+  useEffect(() => {
+    setPrev(ref.current);
+    ref.current = value;
+  }, [value]);
+
+  return prev;
+};
+
+interface Process2Props {
+  className?: string;
+}
+
+const Process2 = ({ className }: Process2Props) => {
+  const process = [
+    {
+      step: "۱",
+      title: "کشف و تحقیق",
+      image: "/block-media/shadcnblocks/block/guri4/img11.png",
+      description:
+        "با درک اهداف کسب‌وکار، مخاطب هدف و چالش‌های فعلی شما شروع می‌کنیم. این فاز شامل تحقیق، تحلیل و برنامه‌ریزی استراتژیک برای شناسایی فرصت‌هاست.",
+    },
+    {
+      step: "۲",
+      title: "استراتژی و برنامه‌ریزی",
+      image: "/block-media/shadcnblocks/block/guri4/img12.png",
+      description:
+        "بر اساس یافته‌ها، استراتژی جامعی متناسب با اهداف شما توسعه می‌دهیم. این شامل تعریف رویکرد، زمان‌بندی و نقاط عطف کلیدی برای موفقیت است.",
+    },
+    {
+      step: "۰۳",
+      title: "اجرا و توسعه",
+      image: "/block-media/shadcnblocks/block/guri4/img10.png",
+      description:
+        "استراتژی را از طریق پیاده‌سازی و توسعه دقیق به واقعیت تبدیل می‌کنیم. تیم ما به‌صورت همکاری کار می‌کند تا هر جزئیات با نیازها و استانداردهای شما هم‌خوان باشد.",
+    },
+    {
+      step: "۰۴",
+      title: "بهینه‌سازی و بهبود",
+      image: "/block-media/shadcnblocks/block/guri4/img9.png",
+      description:
+        "عملکرد را به‌طور مستمر پایش و بازخورد جمع‌آوری می‌کنیم تا راه‌حل را پالایش و بهبود دهیم. این فرآیند تکراری موفقیت و رشد بلندمدت را تضمین می‌کند.",
+    },
+  ];
+
+  const [active, setActive] = useState<number>(0);
+  const previousActive = usePrevious(active);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-20">
+          <div className="top-10 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
+            <h1 className="relative w-fit text-2xll font-semibold tracking-tight lg:text-2xll">
+              فرآیند ما
+            </h1>
+            <p className="text-start text-base text-foreground/50">
+              از کشف نیازهای شما تا تحویل نهایی، هر مرحله با دقت و شفافیت پیش
+              می‌رود تا بهترین نتیجه حاصل شود.
+            </p>
+            <div className="relative h-90 overflow-hidden border">
+              {previousActive !== undefined && (
+                <div className="absolute top-0 h-full w-full">
+                  <img
+                    src={process[previousActive].image}
+                    className="h-full w-full object-cover"
+                    alt={process[previousActive].title}
+                  />
+                </div>
+              )}
+              <motion.div
+                initial={{ clipPath: "inset(0% 0% 0% 100%)" }}
+                animate={{ clipPath: "inset(0% 0% 0% 0%)" }}
+                key={active}
+                transition={{
+                  type: "spring",
+                  stiffness: 150,
+                  damping: 20,
+                }}
+                className="h-full w-full"
+              >
+                <img
+                  src={process[active].image}
+                  className="h-full w-full object-cover"
+                  alt={process[active].title}
+                />
+              </motion.div>
+            </div>
+            <Button
+              variant="ghost"
+              className="flex items-center justify-start gap-2"
+            >
+              <CornerDownRight className="text-orange-500 rtl:rotate-180" />
+              تماس بگیرید
+            </Button>
+          </div>
+          <ul className="relative w-full lg:ps-22">
+            {process.map((step, index) => (
+              <ProcessCard
+                key={index}
+                step={step}
+                index={index}
+                setActive={setActive}
+              />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProcessCard = ({
+  step,
+  index,
+  setActive,
+}: {
+  step: {
+    step: string;
+    title: string;
+    image: string;
+    description: string;
+  };
+  index: number;
+  setActive: (index: number) => void;
+}) => {
+  const ref = useRef<HTMLLIElement>(null);
+
+  const itemInView = useInView(ref, {
+    amount: 0,
+    margin: "0px 0px -60% 0px",
+  });
+
+  useEffect(() => {
+    if (itemInView) {
+      setActive(index);
+    }
+  }, [itemInView, index, setActive]);
+
+  return (
+    <li
+      ref={ref}
+      key={index}
+      className="relative flex flex-col justify-between gap-12 border-b py-8 lg:py-16"
+    >
+      <div className="flex w-fit items-center justify-center px-4 py-1 text-9xl tracking-tighter">
+        {step.step}
+      </div>
+      <div>
+        <h3 className="mb-4 text-start text-xl font-semibold tracking-tighter lg:text-3xl">
+          {step.title}
+        </h3>
+        <p className="text-start text-foreground/50">{step.description}</p>
+      </div>
+    </li>
+  );
+};
+
+export { Process2 };
diff --git a/blocks/process3.tsx b/blocks/process3.tsx
new file mode 100644
index 0000000..e830d0a
--- /dev/null
+++ b/blocks/process3.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowDown } from "lucide-react";
+import React from "react";
+
+import { useGoogleFont } from "@/hooks/use-google-font";
+import { cn } from "@/lib/utils";
+
+const processSteps = [
+  {
+    id: 1,
+    title: "کشف",
+    bgColor: "bg-sky-200",
+    numberPosition: "right-[40%] lg:right-[30%]",
+    number: "۰۰۱",
+  },
+  {
+    id: 2,
+    title: "استراتژی",
+    bgColor: "bg-sky-300",
+    numberPosition: "right-[52%] lg:right-[42%]",
+    number: "۰۰۲",
+  },
+  {
+    id: 3,
+    title: "طراحی",
+    bgColor: "bg-sky-400",
+    numberPosition: "right-[62%] lg:right-[58%]",
+    number: "۰۰۰۳",
+  },
+  {
+    id: 4,
+    title: "توسعه",
+    bgColor: "bg-sky-500",
+    numberPosition: "right-[75%] lg:right-[72%]",
+    number: "۰۰۰۴",
+  },
+  {
+    id: 5,
+    title: "راه‌اندازی",
+    bgColor: "bg-sky-600",
+    numberPosition: "right-[85%] lg:right-[85%]",
+    number: "۰۰۰۵",
+  },
+];
+
+interface Process3Props {
+  className?: string;
+}
+
+const Process3 = ({ className }: Process3Props) => {
+  useGoogleFont("Antonio");
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-32", className)}
+      style={
+        {
+          "--font-mono": "Antonio",
+        } as React.CSSProperties
+      }
+    >
+      <div className="container">
+        <div className="flex justify-between gap-[10vw]">
+          <h2 className="hidden pt-4 font-mono text-xl tracking-tighter lg:block">
+            ۰ - ۵
+          </h2>
+          <div className="w-full max-w-xl px-2">
+            <h1 className="text-start text-2xll font-semibold tracking-tighter md:text-8xl">
+              فرآیند
+            </h1>
+            <p className="mt-6 max-w-md text-start text-lg text-foreground/50">
+              رویکرد ساختاریافته ما برای تحویل نتایج برجسته در هر پروژه
+            </p>
+          </div>
+          <h2 className="hidden pt-4 font-mono text-xl tracking-tighter md:block">
+            ۰۰۲
+          </h2>
+        </div>
+        <ul className="mt-20">
+          {processSteps.map((step, index) => (
+            <motion.li
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{
+                type: "spring",
+                stiffness: 100,
+                damping: 20,
+                delay: index * 0.1,
+              }}
+              key={step.id}
+              className="relative flex h-14 w-full items-center md:h-22"
+            >
+              <div
+                className={cn(
+                  "absolute left-1/2 h-14 w-screen -translate-x-1/2 md:h-22",
+                  step.bgColor,
+                )}
+              ></div>
+              <div className="relative z-10 flex items-center gap-2">
+                <ArrowDown className="md:size-12" />
+                <h3 className="text-start text-3xl font-medium tracking-tight md:text-2xll">
+                  {step.title}
+                </h3>
+              </div>
+              <span
+                className={cn(
+                  "font-antonio absolute -bottom-1 text-2xll font-semibold tracking-tighter text-white md:-bottom-3 md:text-8xl",
+                  step.numberPosition,
+                )}
+              >
+                {step.number}
+              </span>
+            </motion.li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Process3 };
diff --git a/blocks/process4.tsx b/blocks/process4.tsx
new file mode 100644
index 0000000..a210c83
--- /dev/null
+++ b/blocks/process4.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import React, { useState } from "react";
+
+import { useGoogleFont } from "@/hooks/use-google-font";
+import { cn } from "@/lib/utils";
+
+interface Process4Props {
+  className?: string;
+}
+
+const Process4 = ({ className }: Process4Props) => {
+  const process = [
+    {
+      title: "انتخاب پلن",
+      description:
+        "پلن متناسب با نیاز و بودجه خود را انتخاب کنید تا مسیر همکاری و زمان‌بندی پروژه از همان ابتدا مشخص شود.",
+      image: "/block-media/shadcnblocks/block/guri4/img14.png",
+    },
+    {
+      title: "ثبت درخواست",
+      description:
+        "جزئیات پروژه را برای ما ارسال کنید تا تیم ما بررسی کند و در کوتاه‌ترین زمان برای هماهنگی با شما تماس بگیرد.",
+      image: "/block-media/shadcnblocks/block/guri4/img10.png",
+    },
+    {
+      title: "تحویل پروژه",
+      description:
+        "پروژه آماده را در موعد توافق‌شده تحویل بگیرید و از کیفیت کار و پشتیبانی پس از تحویل اطمینان حاصل کنید.",
+      image: "/block-media/shadcnblocks/block/guri4/img11.png",
+    },
+  ];
+
+  const [active, setActive] = useState<number | null>(0);
+
+  useGoogleFont("Antonio");
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-32", className)}
+      style={
+        {
+          "--font-mono": "Antonio",
+        } as React.CSSProperties
+      }
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
+          <div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
+            <h1 className="text-start text-2xll font-semibold tracking-tight lg:text-2xll">
+              فرآیند
+              <sup className="align-top font-mono text-lg tracking-tight text-foreground/40">
+                ۰۰۰۳
+              </sup>
+            </h1>
+            <p className="text-start text-base text-foreground/50">
+              سه مرحله ساده از انتخاب تا تحویل  همکاری با ما سریع، شفاف و
+              بدون پیچیدگی است.
+            </p>
+          </div>
+          <ul className="relative col-span-4 w-full space-y-10">
+            {process.map((step, index) => (
+              <li
+                onMouseEnter={() => setActive(index)}
+                key={index}
+                className={cn(
+                  "relative flex w-full max-w-xl cursor-pointer flex-col justify-between gap-10 rounded-3xl bg-background p-10 md:flex-row lg:items-center ltr:ml-auto ltr:mr-20 rtl:mr-auto rtl:ml-20",
+                  index === active ? "bg-background" : "lg:bg-transparent",
+                )}
+              >
+                <AnimatePresence mode="wait">
+                  {index === active && (
+                    <motion.img
+                      key={step.image}
+                      initial={{ opacity: 0, y: -10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -10 }}
+                      transition={{ duration: 0.3 }}
+                      src={step.image}
+                      alt={step.title}
+                      className="absolute top-0 size-30 -translate-y-1/2 rounded-2xl object-cover ltr:right-0 ltr:translate-x-1/4 lg:size-40 ltr:lg:translate-x-1/2 rtl:left-0 rtl:-translate-x-1/4 rtl:lg:-translate-x-1/2"
+                    />
+                  )}
+                </AnimatePresence>
+                <div>
+                  <h2 className="mb-4 text-start font-bold tracking-tight lg:text-3xl">
+                    مرحله {(index + 1).toLocaleString("fa-IR")}
+                  </h2>
+                  <h3 className="mb-4 text-start text-xl font-semibold tracking-tighter lg:text-xl">
+                    {step.title}
+                  </h3>
+                  <p className="line-clamp-2 text-start text-foreground/50">
+                    {step.description}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Process4 };
diff --git a/blocks/product-card1.tsx b/blocks/product-card1.tsx
new file mode 100644
index 0000000..25621a3
--- /dev/null
+++ b/blocks/product-card1.tsx
@@ -0,0 +1,111 @@
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  description: string;
+  price: ProductPrice;
+  badge: {
+    text: string;
+    backgroundColor?: string;
+  };
+}
+
+const PRODUCT_CARD: Product = {
+  name: "کفش ورزشی وکسون کور‌استپ ۰۸",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/joshua-diaz-ETNoDLl8yFE-unsplash-1.jpg",
+    alt: "کفش ورزشی وکسون کور‌استپ",
+  },
+  link: "#",
+  description:
+    "راحتی روزمره با استایل جسورانه سه‌رنگ در این طراحی عملکردمحور.",
+  price: {
+    regular: 499000,
+    sale: 399000,
+    currency: "ریال",
+  },
+  badge: {
+    text: "پرفروش!",
+    backgroundColor: "oklch(50.5% 0.213 27.518)",
+  },
+};
+
+interface ProductCard1Props {
+  className?: string;
+}
+
+const ProductCard1 = ({ className }: ProductCard1Props) => {
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <a
+        href={PRODUCT_CARD.link}
+        className="block max-w-sm transition-opacity hover:opacity-80"
+      >
+      <Card className="h-full overflow-hidden p-0">
+        <CardHeader className="relative block p-0">
+          <AspectRatio ratio={1.268115942} className="overflow-hidden">
+            <img
+              src={PRODUCT_CARD.image.src}
+              alt={PRODUCT_CARD.image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+          {PRODUCT_CARD.badge && (
+            <Badge
+              style={{
+                background: PRODUCT_CARD.badge.backgroundColor,
+              }}
+              className="absolute start-4 top-4"
+            >
+              {PRODUCT_CARD.badge.text}
+            </Badge>
+          )}
+        </CardHeader>
+        <CardContent className="flex h-full flex-col gap-4 pb-6">
+          <CardTitle className="text-xl font-semibold">
+            {PRODUCT_CARD.name}
+          </CardTitle>
+          <CardDescription className="font-medium text-muted-foreground">
+            {PRODUCT_CARD.description}
+          </CardDescription>
+          <div className="mt-auto">
+            <Price onSale={sale != null} className="text-lg font-semibold">
+              <PriceValue
+                price={regular}
+                currency={currency}
+                variant="regular"
+              />
+              <PriceValue price={sale} currency={currency} variant="sale" />
+            </Price>
+          </div>
+        </CardContent>
+      </Card>
+      </a>
+    </div>
+  );
+};
+
+export { ProductCard1 };
diff --git a/blocks/product-card10.tsx b/blocks/product-card10.tsx
new file mode 100644
index 0000000..c92ba7d
--- /dev/null
+++ b/blocks/product-card10.tsx
@@ -0,0 +1,266 @@
+"use client";
+
+import { Eye, ShoppingCart } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type Image = {
+  srcset: string;
+  src: string;
+  sizes: string;
+  alt: string;
+};
+
+type Variant = {
+  value: string;
+  id: string;
+  label: string;
+  image: Image;
+};
+interface Product {
+  name: string;
+  price: ProductPrice;
+  link: string;
+  variantId: string;
+  stockStatusCode: StockStatusCode;
+  badges: Array<{
+    text: string;
+    color: string;
+  }>;
+  image: Image;
+  variants: Array<Variant>;
+}
+
+const PRODUCT_CARD: Product = {
+  name: "بشقاب سرامیکی",
+  price: {
+    regular: 990000.0,
+    sale: 890000.0,
+    currency: "ریال",
+  },
+  link: "#",
+  variantId: "green",
+  stockStatusCode: "IN_STOCK",
+  badges: [
+    {
+      text: "حراج",
+      color: "oklch(57.7% 0.245 27.325)",
+    },
+  ],
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg",
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
+    alt: "بشقاب سرامیکی  سبز",
+    sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+  },
+  variants: [
+    {
+      label: "سبز",
+      id: "green",
+      value: "green",
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
+        alt: "بشقاب سرامیکی  سبز",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    },
+    {
+      label: "صورتی",
+      id: "pink",
+      value: "pink",
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-1.jpg 640w",
+        alt: "بشقاب سرامیکی  صورتی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    },
+  ],
+};
+
+interface ProductCard10Props {
+  className?: string;
+}
+
+const ProductCard10 = ({ className }: ProductCard10Props) => {
+  const [productImage, setProductImage] = useState(PRODUCT_CARD.image);
+
+  const [selectedVariant, setSelectedVariant] = useState(
+    PRODUCT_CARD.variantId,
+  );
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  const onValueChange = (value: string) => {
+    setSelectedVariant(value);
+  };
+
+  const selectedVariantImages = useMemo(() => {
+    return (
+      PRODUCT_CARD.variants.find((v) => v.value === selectedVariant)?.image ??
+      PRODUCT_CARD.image
+    );
+  }, [selectedVariant]);
+
+  useEffect(() => {
+    setProductImage(selectedVariantImages);
+  }, [selectedVariantImages]);
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="group relative block w-full max-w-64 rounded-none border-none bg-background p-0 shadow-none">
+      <a
+        href={PRODUCT_CARD.link}
+        className="absolute inset-0 z-10 size-full"
+      ></a>
+      <CardContent className="p-0">
+        <div className="relative overflow-hidden">
+          <AspectRatio
+            ratio={1}
+            className="flex items-center justify-center overflow-hidden rounded-xl bg-muted/20"
+          >
+            {productImage && (
+              <img
+                srcSet={productImage.srcset}
+                src={productImage.src}
+                alt={productImage.alt}
+                sizes={productImage.sizes}
+                className="size-full origin-center object-contain object-center transition-transform duration-700 group-hover:scale-105"
+              />
+            )}
+          </AspectRatio>
+          {PRODUCT_CARD.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK && (
+            <div className="absolute start-2.5 top-2.5 z-60">
+              <Badge>فروخته شد</Badge>
+            </div>
+          )}
+          {PRODUCT_CARD.stockStatusCode === STOCK_STATUS.IN_STOCK &&
+            PRODUCT_CARD.price.sale && (
+              <div className="absolute start-2.5 top-2.5 z-60">
+                <Badge variant="destructive">حراج</Badge>
+              </div>
+            )}
+          <div className="absolute inset-x-5 top-1/2 z-60 hidden -translate-y-1/2 md:block">
+            <div className="flex flex-col gap-2 opacity-0 duration-700 lg:translate-y-4 lg:group-hover:translate-y-0 lg:group-hover:opacity-100">
+              <Button
+                disabled={
+                  PRODUCT_CARD.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK
+                }
+                className="w-full"
+              >
+                <ShoppingCart />
+                افزودن به سبد
+              </Button>
+              <Button variant="secondary" className="w-full">
+                <Eye />
+                مشاهده سریع
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="flex min-h-44 flex-col gap-2 px-5 pb-8 pt-6 lg:px-7 lg:pb-8">
+          <CardTitle className="text-xl leading-none font-medium underline-offset-3 group-hover:underline">
+            {PRODUCT_CARD.name}
+          </CardTitle>
+          <Price
+            onSale={sale != null}
+            className="text-sm leading-normal font-bold"
+          >
+            <PriceValue
+              price={sale}
+              currency={currency}
+              variant="sale"
+              className="text-red-700"
+            />
+            <PriceValue price={regular} currency={currency} variant="regular" />
+          </Price>
+          <div className="relative z-10 mt-4">
+            <ProductVariants
+              value={selectedVariant}
+              onValueChange={onValueChange}
+              variants={PRODUCT_CARD.variants}
+            />
+          </div>
+        </div>
+      </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+interface ProductVariantsProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  variants: Array<Variant>;
+}
+
+const ProductVariants = ({
+  value,
+  onValueChange,
+  variants,
+}: ProductVariantsProps) => {
+  return (
+    <TooltipProvider>
+      <RadioGroup value={value} onValueChange={onValueChange} className="flex">
+        {variants.map((item, index) => (
+          <Tooltip key={`product-card-10-variant-option-${index}`}>
+            <TooltipTrigger asChild>
+              <Label
+                className="h-11.5 w-8.5 cursor-pointer overflow-hidden rounded-sm has-data-[state=checked]:ring-2"
+                htmlFor={item.id}
+              >
+                <img
+                  src={item.image.src}
+                  srcSet={item.image.srcset}
+                  alt={item.image.alt}
+                  sizes={item.image.sizes}
+                  className="size-full object-contain object-center"
+                />
+                <RadioGroupItem
+                  value={item.value}
+                  id={item.id}
+                  className="sr-only"
+                />
+              </Label>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{item.label}</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </RadioGroup>
+    </TooltipProvider>
+  );
+};
+
+export { ProductCard10 };
diff --git a/blocks/product-card2.tsx b/blocks/product-card2.tsx
new file mode 100644
index 0000000..28af6e3
--- /dev/null
+++ b/blocks/product-card2.tsx
@@ -0,0 +1,114 @@
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  description: string;
+  price: ProductPrice;
+  badge: {
+    text: string;
+    backgroundColor?: string;
+  };
+}
+
+const PRODUCT_CARD: Product = {
+  name: "کفش ورزشی وکسون کور‌استپ ۰۸",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/joshua-diaz-ETNoDLl8yFE-unsplash-1.jpg",
+    alt: "کفش ورزشی وکسون کور‌استپ",
+  },
+  link: "#",
+  description:
+    "راحتی روزمره با استایل جسورانه سه‌رنگ در این طراحی عملکردمحور.",
+  price: {
+    regular: 499000.0,
+    sale: 399000.0,
+    currency: "ریال",
+  },
+  badge: {
+    text: "پرفروش!",
+    backgroundColor: "oklch(50.5% 0.213 27.518)",
+  },
+};
+
+interface ProductCard2Props {
+  className?: string;
+}
+
+const ProductCard2 = ({ className }: ProductCard2Props) => {
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="relative max-w-sm overflow-hidden p-0">
+      <a
+        href={PRODUCT_CARD.link}
+        className="absolute inset-0 z-10 block size-full"
+      ></a>
+      <CardHeader className="relative block p-0">
+        <AspectRatio ratio={1.268115942} className="overflow-hidden">
+          <img
+            src={PRODUCT_CARD.image.src}
+            alt={PRODUCT_CARD.image.alt}
+            className="block size-full object-cover object-center"
+          />
+        </AspectRatio>
+        {PRODUCT_CARD.badge && (
+          <Badge
+            style={{
+              background: PRODUCT_CARD.badge.backgroundColor,
+            }}
+            className="absolute start-4 top-4"
+          >
+            {PRODUCT_CARD.badge.text}
+          </Badge>
+        )}
+      </CardHeader>
+      <CardContent className="flex h-full flex-col gap-4">
+        <CardTitle className="text-xl font-semibold">
+          {PRODUCT_CARD.name}
+        </CardTitle>
+        <CardDescription className="font-medium text-muted-foreground">
+          {PRODUCT_CARD.description}
+        </CardDescription>
+        <div className="mt-auto">
+          <Price onSale={sale != null} className="text-lg font-semibold">
+            <PriceValue price={regular} currency={currency} variant="regular" />
+            <PriceValue price={sale} currency={currency} variant="sale" />
+          </Price>
+        </div>
+      </CardContent>
+      <CardFooter className="pb-6">
+        <CardAction className="w-full">
+          <Button className="relative z-10 w-full">افزودن به سبد</Button>
+        </CardAction>
+      </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export { ProductCard2 };
diff --git a/blocks/product-card21.tsx b/blocks/product-card21.tsx
new file mode 100644
index 0000000..7c150e9
--- /dev/null
+++ b/blocks/product-card21.tsx
@@ -0,0 +1,377 @@
+"use client";
+import { Minus, Plus } from "lucide-react";
+import { startTransition, useEffect, useState } from "react";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type Image = {
+  src: string;
+  srcset?: string;
+  alt: string;
+  sizes?: string;
+};
+
+type ProductColorOptions = {
+  images: Image[];
+  id: string;
+  value: string;
+  label: string;
+  colors: string[];
+};
+
+interface Product {
+  colorOptions: Array<ProductColorOptions>;
+  link: string;
+  name: string;
+  price: ProductPrice;
+  variant: string;
+}
+
+interface ProductCardColorOptionsProps {
+  options: ProductColorOptions[];
+  onValueChange: (value: string) => void;
+  value: string;
+}
+
+const PRODUCT_CARD: Product = {
+  name: "هودی اسلیت اسنشال",
+  variant: "product-1-1",
+  price: {
+    regular: 490000.0,
+    sale: 380000.0,
+    currency: "ریال",
+  },
+  colorOptions: [
+    {
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-2.png 1200w, /block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png 640w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png 904w, /block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-1.png 482w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+      ],
+      id: "product-1-1",
+      value: "product-1-1",
+      label: "سفید",
+      colors: ["#F4F2F0"],
+    },
+    {
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-1.png 360w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Person-in-Green-Hoodie-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Person-in-Green-Hoodie-2.png 655w, /block-media/shadcnblocks/block/ecommerce/clothes/Person-in-Green-Hoodie-1.png 349w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+      ],
+      id: "product-1-2",
+      value: "product-1-2",
+      label: "زیتونی",
+      colors: ["#52462C"],
+    },
+    {
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Navy-and-Orange-Hoodie-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Navy-and-Orange-Hoodie-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Navy-and-Orange-Hoodie-1.png 360w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+      ],
+      id: "product-1-3",
+      value: "product-1-3",
+      label: "سرمه‌ای و نارنجی",
+      colors: ["#2B233A", "#F6862E"],
+    },
+    {
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-1.png 360w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+      ],
+      id: "product-2-1",
+      value: "product-2-1",
+      label: "آبی",
+      colors: ["#233A4E", "#879698"],
+    },
+    {
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Beige-Hoodie-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Beige-Hoodie-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Beige-Hoodie-1.png 360w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Close-up-of-Beige-Hoodie-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Close-up-of-Beige-Hoodie-2.png 655w, /block-media/shadcnblocks/block/ecommerce/clothes/Close-up-of-Beige-Hoodie-1.png 349w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+      ],
+      id: "product-2-2",
+      value: "product-2-2",
+      label: "بژ",
+      colors: ["#BDA994"],
+    },
+    {
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Maroon-Hoodie-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Maroon-Hoodie-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Maroon-Hoodie-1.png 360w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+      ],
+      id: "product-3-1",
+      value: "product-3-1",
+      label: "شرابی",
+      colors: ["#54272E"],
+    },
+    {
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Person-in-Bright-Fashion-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Person-in-Bright-Fashion-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Person-in-Bright-Fashion-1.png 360w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+      ],
+      id: "product-3-2",
+      value: "product-3-2",
+      label: "نارنجی سوخته",
+      colors: ["#C75922"],
+    },
+    {
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Green-Hoodie-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Green-Hoodie-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Green-Hoodie-1.png 360w",
+          alt: "هودی اسلیت اسنشال",
+          sizes: "100w",
+        },
+      ],
+      id: "product-3-3",
+      value: "product-3-3",
+      label: "سبز لیمویی",
+      colors: ["#91A12E"],
+    },
+  ],
+  link: "#",
+};
+
+interface ProductCard21Props {
+  className?: string;
+}
+
+const ProductCard21 = ({ className }: ProductCard21Props) => {
+  const [selectedVariant, setVariant] = useState(PRODUCT_CARD.variant);
+  const [variantImages, setSelectedVariantImages] = useState<
+    Image[] | undefined
+  >();
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  const onValueChange = (value: string) => {
+    setVariant(value);
+  };
+
+  useEffect(() => {
+    const checkedColorImages = PRODUCT_CARD.colorOptions.find(
+      (option) => option.value === selectedVariant,
+    )?.images;
+    startTransition(() => {
+      setSelectedVariantImages(checkedColorImages);
+    });
+  }, [selectedVariant]);
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="w-full max-w-64 rounded-none border-none bg-background p-0 shadow-none">
+      <CardContent className="flex flex-col px-0">
+        <a href={PRODUCT_CARD.link} className="group">
+          <AspectRatio
+            ratio={1}
+            className="flex items-center justify-center overflow-hidden bg-muted/20"
+          >
+            {variantImages &&
+              variantImages.map((img, index) => (
+                <img
+                  key={`product-card-21-img-${index}`}
+                  src={img.src}
+                  srcSet={img.srcset}
+                  alt={img.alt}
+                  sizes={img.sizes}
+                  className="absolute inset-0 size-full object-contain object-center transition-opacity duration-200 first:opacity-100 group-hover:first:not-only:opacity-0 nth-2:opacity-0 group-hover:nth-2:opacity-100"
+                />
+              ))}
+          </AspectRatio>
+        </a>
+        <div className="min-h-44 space-y-2 px-5 pb-8 pt-6 lg:px-7 lg:pb-8">
+          <ProductCardColorOptions
+            onValueChange={onValueChange}
+            value={selectedVariant}
+            options={PRODUCT_CARD.colorOptions}
+          />
+          <a href={PRODUCT_CARD.link}>
+            <CardTitle className="text-xl leading-none font-medium">
+              {PRODUCT_CARD.name}
+            </CardTitle>
+          </a>
+          <Price className="mt-3 text-sm font-medium" onSale={sale != null}>
+            <PriceValue price={regular} currency={currency} variant="regular" />
+            <PriceValue
+              price={sale}
+              currency={currency}
+              variant="sale"
+              className="text-red-800"
+            />
+          </Price>
+          <Button variant="outline" size="sm" className="mt-3 rounded-full">
+            <Plus />
+            افزودن
+          </Button>
+        </div>
+      </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const ProductCardColorOptions = ({
+  options,
+  value,
+  onValueChange,
+}: ProductCardColorOptionsProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (!options) return;
+
+  return (
+    <TooltipProvider>
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className="flex items-start justify-between gap-4"
+      >
+        <RadioGroup
+          value={value}
+          onValueChange={onValueChange}
+          className="flex flex-wrap items-center gap-2"
+        >
+          {options.slice(0, 5).map((option, index) => (
+            <Tooltip key={`product-card-21-${index}`}>
+              <TooltipTrigger asChild>
+                <Label
+                  style={
+                    option.colors?.length === 1
+                      ? {
+                          backgroundColor: option.colors[0],
+                        }
+                      : {
+                          backgroundImage: `linear-gradient(45deg, ${option.colors?.[0]} 0%, ${option.colors?.[0]} 50%, ${option.colors?.[1]} 50%, ${option.colors?.[1]} 100%)`,
+                        }
+                  }
+                  htmlFor={option.id}
+                  className="size-8 cursor-pointer rounded-full border-4 border-background has-data-[state=checked]:ring"
+                >
+                  <RadioGroupItem
+                    value={option.value}
+                    id={option.id}
+                    className="sr-only"
+                  />
+                </Label>
+              </TooltipTrigger>
+              <TooltipContent>{option.label}</TooltipContent>
+            </Tooltip>
+          ))}
+
+          <CollapsibleContent className="contents">
+            {options.slice(5).map((option, index) => (
+              <Tooltip key={`product-card-21-${index}`}>
+                <TooltipTrigger asChild>
+                  <Label
+                    style={
+                      option.colors?.length === 1
+                        ? {
+                            backgroundColor: option.colors[0],
+                          }
+                        : {
+                            backgroundImage: `linear-gradient(45deg, ${option.colors?.[0]} 0%, ${option.colors?.[0]} 50%, ${option.colors?.[1]} 50%, ${option.colors?.[1]} 100%)`,
+                          }
+                    }
+                    htmlFor={option.id}
+                    className="size-8 cursor-pointer rounded-full border-4 border-background has-data-[state=checked]:ring"
+                  >
+                    <RadioGroupItem
+                      value={option.value}
+                      id={option.id}
+                      className="sr-only"
+                    />
+                  </Label>
+                </TooltipTrigger>
+                <TooltipContent>{option.label}</TooltipContent>
+              </Tooltip>
+            ))}
+          </CollapsibleContent>
+        </RadioGroup>
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" size="icon" className="size-8 rounded-full">
+            {isOpen ? <Minus /> : <Plus />}
+          </Button>
+        </CollapsibleTrigger>
+      </Collapsible>
+    </TooltipProvider>
+  );
+};
+
+export { ProductCard21 };
diff --git a/blocks/product-card22.tsx b/blocks/product-card22.tsx
new file mode 100644
index 0000000..8d3418c
--- /dev/null
+++ b/blocks/product-card22.tsx
@@ -0,0 +1,401 @@
+"use client";
+import type { LucideIcon } from "lucide-react";
+import {
+  Activity,
+  BatteryFull,
+  Droplet,
+  Eye,
+  ShoppingCart,
+  Star,
+  Wifi,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type Image = {
+  src: string;
+  alt: string;
+};
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  images: [Image, Image, Image, Image];
+  link: string;
+  rate: string;
+  brand: {
+    text: string;
+    link: string;
+  };
+  name: string;
+  price: ProductPrice;
+  variants?: {
+    image: Image;
+    link: string;
+  }[];
+  specs: {
+    icon: LucideIcon;
+    title: string;
+    detail: string;
+  }[];
+}
+
+interface VariantsLinksProps {
+  variants?: {
+    image: Image;
+    link: string;
+  }[];
+}
+
+interface ProductSpecsProps {
+  specs: {
+    icon: LucideIcon;
+    title: string;
+    detail: string;
+  }[];
+}
+
+const PRODUCT_CARD: Product = {
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/klim-musalimov-IGO10LkxP_g-unsplash-2.jpg",
+      alt: "ساعت هوشمند هورایزن",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/klim-musalimov--TRXQf4GsGY-unsplash-2.jpg",
+      alt: "ساعت هوشمند هورایزن  نمای دوم",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/klim-musalimov-DAGss-dkVOs-unsplash-2.jpg",
+      alt: "ساعت هوشمند هورایزن  نمای سوم",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/klim-musalimov-5BDqNsOroRw-unsplash-2.jpg",
+      alt: "ساعت هوشمند هورایزن  نمای چهارم",
+    },
+  ],
+  link: "#",
+  rate: "۵.۰",
+  brand: {
+    text: "اترنا",
+    link: "#",
+  },
+  name: "ساعت هوشمند هورایزن",
+  price: {
+    regular: 399000.0,
+    sale: 299000.0,
+    currency: "ریال",
+  },
+  variants: [
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/electronics/smart-watch-1.png",
+        alt: "ساعت هوشمند  مدل ۱",
+      },
+      link: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/electronics/smart-watch-2.png",
+        alt: "ساعت هوشمند  مدل ۲",
+      },
+      link: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/electronics/smart-watch-3.png",
+        alt: "ساعت هوشمند  مدل ۳",
+      },
+      link: "#",
+    },
+  ],
+  specs: [
+    {
+      icon: BatteryFull,
+      title: "عمر باتری",
+      detail: "۲۰ ساعت",
+    },
+    {
+      icon: Activity,
+      title: "تناسب اندام",
+      detail: "قدم‌ها + ضربان قلب",
+    },
+    {
+      icon: Wifi,
+      title: "اتصال",
+      detail: "بلوتوث + وای‌فای",
+    },
+    {
+      icon: Droplet,
+      title: "ضد آب",
+      detail: "۵۰ متر",
+    },
+  ],
+};
+
+interface ProductCard22Props {
+  className?: string;
+}
+
+const ProductCard22 = ({ className }: ProductCard22Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const carouselContentRef = useRef<HTMLDivElement>(null);
+  const [zone, setZone] = useState<number>(0);
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  useEffect(() => {
+    const el = carouselContentRef.current;
+    if (!el) return;
+
+    let animationFrameId: number;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = requestAnimationFrame(() => {
+        const rect = el.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const third = rect.width / 3;
+
+        setZone((prev) => {
+          const nextZone = x < third ? 1 : x < third * 2 ? 2 : 3;
+          return prev === nextZone ? prev : nextZone;
+        });
+      });
+    };
+
+    el.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      el.removeEventListener("mousemove", handleMouseMove);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+
+  useEffect(() => {
+    const el = carouselContentRef.current;
+    if (!api || !el) return;
+
+    const handleMouseLeave = () => {
+      setTimeout(() => {
+        setZone(0);
+      }, 25);
+    };
+
+    el.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      el.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (api) {
+      api.scrollTo(zone);
+    }
+  }, [api, zone]);
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="group w-full max-w-64 overflow-hidden p-0 shadow-none">
+      <CardContent className="p-0">
+        <div
+          className="group/carousel relative overflow-hidden"
+          ref={carouselContentRef}
+        >
+          <a href={PRODUCT_CARD.link} className="block">
+            <Carousel opts={{ loop: true, watchDrag: false }} setApi={setApi}>
+              <CarouselContent className="ml-0">
+                {PRODUCT_CARD.images.map((img, index) => (
+                  <CarouselItem
+                    className="pl-0"
+                    key={`product-card-22-img-${index}`}
+                  >
+                    <AspectRatio
+                      ratio={1}
+                      className="flex items-center justify-center overflow-hidden bg-muted/20"
+                    >
+                      <img
+                        src={img.src}
+                        alt={img.alt}
+                        className="size-full object-contain object-center"
+                      />
+                    </AspectRatio>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <div className="absolute inset-x-0 bottom-3.5 z-10">
+                <div className="flex flex-col items-center justify-center gap-4">
+                  <div className="translate-y-2 opacity-0 transition-all duration-500 group-hover:translate-y-0 group-hover:opacity-100">
+                    <Button className="rounded-full" size="lg">
+                      افزودن به سبد
+                    </Button>
+                  </div>
+
+                  <div className="flex max-w-25 translate-y-2 items-center justify-between rounded-full bg-background px-4 py-0.5 opacity-0 shadow transition-all duration-500 group-hover/carousel:translate-y-0 group-hover/carousel:opacity-100">
+                    {Array.from({ length: 3 }).map((_, index) => (
+                      <div
+                        key={`${index}`}
+                        className="flex size-6 items-center justify-center"
+                      >
+                        <div
+                          className={cn(
+                            "size-1.5 origin-center rounded-full border-2 border-primary bg-primary transition-all duration-200",
+                            zone === index + 1 && "scale-150 bg-background",
+                          )}
+                        ></div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </Carousel>
+          </a>
+          <div className="absolute end-5 top-5 opacity-100 transition-opacity duration-500 lg:group-hover:opacity-0">
+            <div className="flex items-center gap-1.5 rounded-full bg-background px-4 py-2 shadow">
+              <Star className="size-3.5 fill-amber-400 stroke-amber-400" />
+              <p className="text-xs">{PRODUCT_CARD.rate}</p>
+            </div>
+          </div>
+          <div className="absolute end-5 top-5 opacity-0 transition-opacity duration-500 group-hover:opacity-100 max-lg:hidden">
+            <Button size="icon" variant="secondary" className="rounded-full">
+              <Eye />
+            </Button>
+          </div>
+          <div className="absolute end-5 bottom-5 lg:hidden">
+            <Button size="icon" className="rounded-full">
+              <ShoppingCart />
+            </Button>
+          </div>
+        </div>
+        <div className="pt-6">
+          <div className="space-y-2 px-5 pb-5 lg:px-7 lg:pb-8">
+            <a className="block" href={PRODUCT_CARD.brand.link}>
+              <p className="text-xs text-muted-foreground uppercase">
+                {PRODUCT_CARD.brand.text}
+              </p>
+            </a>
+            <div className="flex justify-between gap-2 max-lg:flex-col">
+              <div className="flex-1">
+                <a href={PRODUCT_CARD.link}>
+                  <CardTitle className="text-xl leading-none font-medium">
+                    {PRODUCT_CARD.name}
+                  </CardTitle>
+                </a>
+              </div>
+              <div className="shrink-0">
+                <Price
+                  className="flex-col items-start lg:items-end"
+                  onSale={sale != null}
+                >
+                  <PriceValue
+                    price={sale}
+                    currency={currency}
+                    variant="sale"
+                    className="font-medium text-rose-500"
+                  />
+                  <PriceValue
+                    price={regular}
+                    currency={currency}
+                    variant="regular"
+                    className={sale ? "text-sm" : ""}
+                  />
+                </Price>
+              </div>
+            </div>
+            <div className="pt-2">
+              <VariantsLinks variants={PRODUCT_CARD.variants} />
+            </div>
+          </div>
+          <ProductSpecs specs={PRODUCT_CARD.specs} />
+        </div>
+      </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const VariantsLinks = ({ variants }: VariantsLinksProps) => {
+  if (!variants) return;
+
+  return (
+    <ul className="flex flex-wrap gap-2">
+      {variants.map((variant, index) => (
+        <li key={`product-card-22-variant-${index}`}>
+          <a
+            href={variant.link}
+            className="block size-8 overflow-hidden rounded-sm border"
+          >
+            <img
+              src={variant.image.src}
+              alt={variant.image.alt}
+              className="size-full object-contain object-center"
+            />
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const ProductSpecs = ({ specs }: ProductSpecsProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+  if (!specs) return;
+  return (
+    <Carousel
+      opts={{
+        breakpoints: {
+          "(min-width: 1024px)": {
+            watchDrag: false,
+          },
+        },
+      }}
+      onMouseEnter={() =>
+        isDesktop && api?.scrollTo(api.slideNodes().length - 1)
+      }
+      onMouseLeave={() => isDesktop && api?.scrollTo(0)}
+      setApi={setApi}
+      className="bg-background py-3 before:pointer-events-none before:absolute before:inset-y-0 before:left-0 before:z-10 before:h-full before:w-14 before:bg-gradient-to-r before:from-background before:to-transparent after:pointer-events-none after:absolute after:inset-y-0 after:right-0 after:z-10 after:h-full after:w-14 after:bg-gradient-to-l after:from-background after:to-transparent"
+    >
+      <CarouselContent className="ml-0">
+        {specs.map((item, index) => (
+          <CarouselItem
+            className="basis-40 pl-0 not-last:border-r first:pl-5 last:pr-5"
+            key={`product-card-22-specs-${index}`}
+          >
+            <div className="flex items-start gap-2 px-5 py-2">
+              <item.icon className="size-6 stroke-muted-foreground" />
+              <div className="space-y-1">
+                <div className="cursor-default text-xs leading-none font-medium">
+                  {item.detail}
+                </div>
+                <div className="cursor-default text-xs leading-none text-muted-foreground">
+                  {item.title}
+                </div>
+              </div>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+    </Carousel>
+  );
+};
+
+export { ProductCard22 };
diff --git a/blocks/product-card23.tsx b/blocks/product-card23.tsx
new file mode 100644
index 0000000..f4400aa
--- /dev/null
+++ b/blocks/product-card23.tsx
@@ -0,0 +1,229 @@
+"use client";
+import { Search } from "lucide-react";
+import { useState } from "react";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+type Image = {
+  src: string;
+  srcset?: string;
+  alt: string;
+  sizes?: string;
+};
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type ProductColorOptions = {
+  images: Image[];
+  id: string;
+  value: string;
+  colors: string[];
+};
+
+interface Product {
+  images: Array<Image>;
+  name: string;
+  price: ProductPrice;
+  brand: {
+    text: string;
+    link: string;
+  };
+  badges?: Array<string>;
+  variantId?: string;
+  link: string;
+  variants?: Array<ProductColorOptions>;
+}
+
+interface ColorRadioGroupProps {
+  options: ProductColorOptions[];
+  onValueChange: (value: string) => void;
+  value: string;
+}
+
+const PRODUCT_CARD: Product = {
+  name: "لیوان سرامیکی سولستیس",
+  brand: {
+    text: "خاک‌سفال ترا",
+    link: "#",
+  },
+  link: "#",
+  price: { regular: 240000.0, currency: "ریال" },
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/Ceramic-Mug-in-Sunlight-2.png",
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/other/Ceramic-Mug-in-Sunlight-1.png 484w, /block-media/shadcnblocks/block/ecommerce/other/Ceramic-Mug-in-Sunlight-2.png 908w",
+      sizes: "(min-width: 768px) 908px, 100vw",
+      alt: "لیوان سرامیکی سولستیس",
+    },
+  ],
+  variantId: "product-1-1",
+  badges: ["جدید"],
+  variants: [
+    {
+      id: "product-1-1",
+      value: "product-1-1",
+      colors: ["#A5BFB1", "#E38035"],
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/Ceramic-Mug-in-Sunlight-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/Ceramic-Mug-in-Sunlight-1.png 484w, /block-media/shadcnblocks/block/ecommerce/other/Ceramic-Mug-in-Sunlight-2.png 908w",
+          sizes: "(min-width: 768px) 908px, 100vw",
+          alt: "لیوان سرامیکی  طرح اول",
+        },
+      ],
+    },
+    {
+      id: "product-1-2",
+      value: "product-1-2",
+      colors: ["#C12F06", "#32414C"],
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/Colorful-Ceramic-Mug-2.png",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/Colorful-Ceramic-Mug-1.png 484w, /block-media/shadcnblocks/block/ecommerce/other/Colorful-Ceramic-Mug-2.png 904w",
+          sizes: "(min-width: 768px) 908px, 100vw",
+          alt: "لیوان سرامیکی  طرح دوم",
+        },
+      ],
+    },
+  ],
+};
+
+interface ProductCard23Props {
+  className?: string;
+}
+
+const ProductCard23 = ({ className }: ProductCard23Props) => {
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+  const [selectedColorValue, setSelectedColorValue] = useState<string>(
+    PRODUCT_CARD.variantId ?? "",
+  );
+
+  const onColorChange = (value: string) => {
+    setSelectedColorValue(value);
+  };
+
+  const selectedColorImages =
+    PRODUCT_CARD.variants?.find(
+      (variant) => variant.value === selectedColorValue,
+    )?.images ?? PRODUCT_CARD.images;
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="w-full max-w-64 rounded-none border-none bg-background p-0 shadow-none">
+      <CardContent className="p-0">
+        <div className="group relative">
+          <a href={PRODUCT_CARD.link}>
+            <AspectRatio
+              ratio={1}
+              className="flex items-center justify-center overflow-hidden bg-muted/20"
+            >
+              {selectedColorImages.map((img, index) => (
+                <img
+                  src={img.src}
+                  srcSet={img.srcset}
+                  sizes={img.sizes}
+                  alt={img.alt}
+                  key={`product-card-23-img-${index}`}
+                  className="absolute inset-0 size-full origin-center object-contain object-center transition-opacity duration-500 first:opacity-100 group-hover:first:not-only:opacity-0 nth-2:opacity-0 group-hover:nth-2:opacity-100"
+                />
+              ))}
+            </AspectRatio>
+          </a>
+          <div className="absolute end-4 top-4">
+            <Button
+              size="icon"
+              className="transition-opacity duration-500 md:opacity-0 md:group-hover:opacity-100"
+            >
+              <Search />
+            </Button>
+          </div>
+          {PRODUCT_CARD.variants && (
+            <div className="absolute inset-x-0 bottom-0 z-10 p-4">
+              <ColorRadioGroup
+                onValueChange={onColorChange}
+                value={selectedColorValue}
+                options={PRODUCT_CARD.variants}
+              />
+            </div>
+          )}
+        </div>
+        <div className="flex min-h-44 flex-col gap-2 px-5 pb-8 pt-6 lg:px-7 lg:pb-8">
+          <a
+            href={PRODUCT_CARD.brand.link}
+            className="text-xs text-muted-foreground uppercase"
+          >
+            {PRODUCT_CARD.brand.text}
+          </a>
+          <a href={PRODUCT_CARD.link}>
+            <CardTitle className="text-xl leading-none font-medium">
+              {PRODUCT_CARD.name}
+            </CardTitle>
+          </a>
+          <Price className="gap-x-1.5 text-sm" onSale={sale != null}>
+            <PriceValue price={sale} currency={currency} variant="sale" />
+            <PriceValue price={regular} currency={currency} variant="regular" />
+          </Price>
+          {PRODUCT_CARD.badges && PRODUCT_CARD.badges.length > 0 && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              {PRODUCT_CARD.badges.map((text, index) => (
+                <Badge variant="outline" key={`product-card-23-badge-${index}`}>
+                  {text}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+      </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const ColorRadioGroup = ({
+  options,
+  value,
+  onValueChange,
+}: ColorRadioGroupProps) => {
+  return (
+    <RadioGroup onValueChange={onValueChange} value={value} className="flex">
+      {options.map((option, index) => (
+        <div className="shrink-0" key={`product-card-23-color-option-${index}`}>
+          <RadioGroupItem
+            value={option.value}
+            id={option.id}
+            className="peer sr-only"
+          />
+          <Label
+            htmlFor={option.id}
+            style={
+              option.colors?.length === 1
+                ? {
+                    backgroundColor: option.colors[0],
+                  }
+                : {
+                    backgroundImage: `linear-gradient(45deg, ${option.colors?.[0]} 0%, ${option.colors?.[0]} 50%, ${option.colors?.[1]} 50%, ${option.colors?.[1]} 100%)`,
+                  }
+            }
+            className="size-3 cursor-pointer rounded-full peer-data-[state=checked]:ring"
+          ></Label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+};
+
+export { ProductCard23 };
diff --git a/blocks/product-card24.tsx b/blocks/product-card24.tsx
new file mode 100644
index 0000000..fcf67a0
--- /dev/null
+++ b/blocks/product-card24.tsx
@@ -0,0 +1,450 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRight, Plus, X } from "lucide-react";
+import { Fragment, useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type FormType = z.infer<typeof formSchema>;
+type FormFieldName = keyof FormType;
+
+type Image = {
+  src: string;
+  alt: string;
+};
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  name: string;
+  images: Image[];
+  link: string;
+  hinges: Record<FormFieldName, Hinge>;
+  variantId: string;
+  price: ProductPrice;
+}
+
+type Option = {
+  id: string;
+  value: string;
+  colors?: string[];
+  label?: string;
+  images?: Image[];
+  stockStatusCode?: StockStatusCode;
+};
+
+type Hinge = {
+  label?: string;
+  name: FormFieldName;
+  id: string;
+  options: Array<Option>;
+};
+
+interface RadioGroupProps {
+  form: UseFormReturn<FormType>;
+  hinges: Hinge;
+}
+
+const PRODUCT_CARD: Product = {
+  name: "هودی اسلیت اسنشال",
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Navy-and-Orange-Hoodie-2.png",
+      alt: "هودی اسلیت اسنشال",
+    },
+  ],
+  link: "#",
+  price: {
+    regular: 490000.0,
+    sale: 380000.0,
+    currency: "ریال",
+  },
+  variantId: "product-1-3",
+  hinges: {
+    size: {
+      id: "size",
+      name: "size",
+      label: "افزودن سریع",
+      options: [
+        {
+          value: "xs",
+          id: "xs",
+          label: "XS",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          value: "s",
+          id: "s",
+          label: "S",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          value: "m",
+          id: "m",
+          label: "M",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          value: "l",
+          id: "l",
+          label: "L",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          value: "xl",
+          id: "xl",
+          label: "XL",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          value: "2xl",
+          id: "2xl",
+          label: "2XL",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+      ],
+    },
+    color: {
+      id: "color",
+      name: "color",
+      options: [
+        {
+          images: [
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Person-in-Green-Hoodie-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+          ],
+          id: "product-1-2",
+          value: "product-1-2",
+          label: "زیتونی",
+          colors: ["#52462C"],
+        },
+        {
+          images: [
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Navy-and-Orange-Hoodie-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+          ],
+          id: "product-1-3",
+          value: "product-1-3",
+          label: "سرمه‌ای و نارنجی",
+          colors: ["#2B233A", "#F6862E"],
+        },
+        {
+          images: [
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+          ],
+          id: "product-2-1",
+          value: "product-2-1",
+          label: "آبی",
+          colors: ["#233A4E", "#879698"],
+        },
+        {
+          images: [
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Beige-Hoodie-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Close-up-of-Beige-Hoodie-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+          ],
+          id: "product-2-2",
+          value: "product-2-2",
+          label: "بژ",
+          colors: ["#BDA994"],
+        },
+        {
+          images: [
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Maroon-Hoodie-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+          ],
+          id: "product-3-1",
+          value: "product-3-1",
+          label: "شرابی",
+          colors: ["#54272E"],
+        },
+        {
+          images: [
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Person-in-Bright-Fashion-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+          ],
+          id: "product-3-2",
+          value: "product-3-2",
+          label: "نارنجی سوخته",
+          colors: ["#C75922"],
+        },
+        {
+          images: [
+            {
+              src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Green-Hoodie-2.png",
+              alt: "هودی اسلیت اسنشال",
+            },
+          ],
+          id: "product-3-3",
+          value: "product-3-3",
+          label: "سبز لیمویی",
+          colors: ["#91A12E"],
+        },
+      ],
+    },
+  },
+};
+
+const formSchema = z.object({
+  size: z.string(),
+  color: z.string(),
+});
+
+interface ProductCard24Props {
+  className?: string;
+}
+
+const ProductCard24 = ({ className }: ProductCard24Props) => {
+  const [open, setOpen] = useState(false);
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      size: "",
+      color: PRODUCT_CARD.variantId ?? "",
+    },
+  });
+
+  const selectedColor = form.watch("color");
+  const images =
+    PRODUCT_CARD.hinges.color.options.find(
+      (variant) => variant.value === selectedColor,
+    )?.images ?? PRODUCT_CARD.images;
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="group w-full max-w-96 shrink-0 overflow-hidden rounded-none border-0 p-0 shadow-none ring ring-muted">
+      <CardContent className="p-0">
+        <form>
+          <div className="relative w-full">
+            <a href={PRODUCT_CARD.link}>
+              <Carousel
+                opts={{
+                  loop: true,
+                }}
+              >
+                <CarouselContent className="ml-0">
+                  {images.map((image, index) => (
+                    <CarouselItem className="pl-0" key={`${index}`}>
+                      <AspectRatio
+                        ratio={1}
+                        className="flex items-center justify-center overflow-hidden bg-muted/20"
+                      >
+                        <img
+                          src={image.src}
+                          alt={image.alt}
+                          className="size-full object-contain object-center"
+                        />
+                      </AspectRatio>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                {images.length > 1 && (
+                  <Fragment>
+                    <CarouselPrevious type="button" className="left-4" />
+                    <CarouselNext type="button" className="right-4" />
+                  </Fragment>
+                )}
+              </Carousel>
+            </a>
+            <div className="absolute inset-x-0 bottom-0">
+              <div
+                className={cn(
+                  "bg-card py-3 ring ring-muted transition-opacity duration-350 md:opacity-0 md:group-hover:opacity-100",
+                  open && "opacity-100",
+                  !open && "opacity-0",
+                )}
+              >
+                <div className="flex w-full items-center justify-between gap-4 overflow-x-auto pr-1.5 pl-4 [-ms-overflow-style:none] [scrollbar-width:none] [::-webkit-scrollbar]:hidden">
+                  <SizeRadioGroup
+                    hinges={PRODUCT_CARD.hinges.size}
+                    form={form}
+                  />
+                  <div className="shrink-0">
+                    <Button size="sm" variant="ghost">
+                      مشاهده
+                      <ArrowRight />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <CardHeader className="relative min-h-56 gap-4 space-y-4 px-6 pb-10 pt-8 lg:px-8 lg:pb-10">
+            <CardTitle className="text-xl leading-tight font-medium">
+              {PRODUCT_CARD.name}
+            </CardTitle>
+            <div className="flex min-h-10 w-[calc(100%-2rem)] items-center gap-6">
+              <div className="shrink-0">
+                <Price className="text-base" onSale={sale != null}>
+                  <PriceValue price={sale} currency={currency} variant="sale" />
+                  <PriceValue
+                    price={regular}
+                    currency={currency}
+                    variant="regular"
+                  />
+                </Price>
+              </div>
+              <div className="relative">
+                <div
+                  className={cn(
+                    "bg-card transition-opacity duration-350 md:opacity-0 md:group-hover:opacity-100",
+                    open && "opacity-100",
+                    !open && "opacity-0",
+                  )}
+                >
+                  <ColorRadioGroup
+                    hinges={PRODUCT_CARD.hinges.color}
+                    form={form}
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="absolute right-0 bottom-0 md:hidden">
+              <Button
+                variant="ghost"
+                className="rounded-none bg-background hover:bg-background"
+                size="icon"
+                type="button"
+                onClick={() => setOpen(!open)}
+              >
+                {open ? <X /> : <Plus />}
+              </Button>
+            </div>
+          </CardHeader>
+        </form>
+      </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const SizeRadioGroup = ({ form, hinges }: RadioGroupProps) => {
+  return (
+    <Controller
+      control={form.control}
+      name={hinges.name}
+      render={({ field }) => (
+        <Field className="flex min-h-10 shrink-0 items-center gap-1">
+          <FieldLabel className="shrink-0 text-sm">{hinges.label}:</FieldLabel>
+          <RadioGroup
+            onValueChange={field.onChange}
+            value={field.value}
+            className="w-auto grid-flow-col items-center gap-3 text-sm"
+          >
+            {hinges.options.map((option) => (
+              <Field key={option.id}>
+                <RadioGroupItem
+                  id={option.id}
+                  className="peer sr-only"
+                  value={option.value}
+                  disabled={
+                    option.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK
+                  }
+                />
+                <FieldLabel
+                  htmlFor={option.id}
+                  className="cursor-pointer font-normal underline-offset-3 peer-has-data-[state=checked]:underline"
+                >
+                  {option.label}
+                </FieldLabel>
+              </Field>
+            ))}
+          </RadioGroup>
+        </Field>
+      )}
+    />
+  );
+};
+
+const ColorRadioGroup = ({ form, hinges }: RadioGroupProps) => {
+  return (
+    <Controller
+      control={form.control}
+      name={hinges.name}
+      render={({ field }) => (
+        <Field>
+          <RadioGroup
+            onValueChange={field.onChange}
+            value={field.value}
+            className="flex shrink grow justify-end gap-3 overflow-x-auto px-1 py-2 [-ms-overflow-style:none] [scrollbar-width:none] [::-webkit-scrollbar]:hidden"
+          >
+            {hinges.options.map((option) => (
+              <Field key={option.id} className="last:pr-12">
+                <RadioGroupItem
+                  id={option.id}
+                  className="peer sr-only"
+                  value={option.value}
+                />
+                <FieldLabel
+                  htmlFor={option.id}
+                  style={
+                    option.colors?.length === 1
+                      ? {
+                          backgroundColor: option.colors[0],
+                        }
+                      : {
+                          backgroundImage: `linear-gradient(45deg, ${option.colors?.[0]} 0%, ${option.colors?.[0]} 50%, ${option.colors?.[1]} 50%, ${option.colors?.[1]} 100%)`,
+                        }
+                  }
+                  className="size-8 shrink-0 cursor-pointer rounded-full border-3 border-card font-normal peer-has-data-[state=checked]:ring-2"
+                ></FieldLabel>
+              </Field>
+            ))}
+          </RadioGroup>
+        </Field>
+      )}
+    />
+  );
+};
+
+export { ProductCard24 };
diff --git a/blocks/product-card3.tsx b/blocks/product-card3.tsx
new file mode 100644
index 0000000..13cf45c
--- /dev/null
+++ b/blocks/product-card3.tsx
@@ -0,0 +1,115 @@
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  description: string;
+  price: ProductPrice;
+  badge: {
+    text: string;
+    backgroundColor?: string;
+  };
+}
+
+const PRODUCT_CARD: Product = {
+  name: "کفش ورزشی وکسون کور‌استپ ۰۸",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/joshua-diaz-ETNoDLl8yFE-unsplash-1.jpg",
+    alt: "کفش ورزشی وکسون کور‌استپ",
+  },
+  link: "#",
+  description:
+    "راحتی روزمره با استایل جسورانه سه‌رنگ در این طراحی عملکردمحور.",
+  price: {
+    regular: 499000.0,
+    sale: 399000.0,
+    currency: "ریال",
+  },
+  badge: {
+    text: "پرفروش!",
+    backgroundColor: "oklch(50.5% 0.213 27.518)",
+  },
+};
+
+interface ProductCard3Props {
+  className?: string;
+}
+
+const ProductCard3 = ({ className }: ProductCard3Props) => {
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="group max-w-sm gap-0 overflow-hidden p-0">
+      <CardHeader className="relative block p-0">
+        <a href={PRODUCT_CARD.link}>
+          <AspectRatio ratio={1.268115942} className="overflow-hidden">
+            <img
+              src={PRODUCT_CARD.image.src}
+              alt={PRODUCT_CARD.image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+        </a>
+        <CardAction className="absolute inset-x-0 bottom-4 z-100 w-full px-4 transition-opacity md:opacity-0 md:group-hover:opacity-100">
+          <Button className="w-full">افزودن به سبد</Button>
+        </CardAction>
+        {PRODUCT_CARD.badge && (
+          <Badge
+            style={{
+              background: PRODUCT_CARD.badge.backgroundColor,
+            }}
+            className="absolute start-4 top-4"
+          >
+            {PRODUCT_CARD.badge.text}
+          </Badge>
+        )}
+      </CardHeader>
+      <a href={PRODUCT_CARD.link} className="block w-fit">
+        <CardContent className="flex h-full flex-col gap-4 py-6">
+          <CardTitle className="text-xl font-semibold">
+            {PRODUCT_CARD.name}
+          </CardTitle>
+          <CardDescription className="font-medium text-muted-foreground">
+            {PRODUCT_CARD.description}
+          </CardDescription>
+          <div className="mt-auto">
+            <Price onSale={sale != null} className="text-lg font-semibold">
+              <PriceValue
+                price={regular}
+                currency={currency}
+                variant="regular"
+              />
+              <PriceValue price={sale} currency={currency} variant="sale" />
+            </Price>
+          </div>
+        </CardContent>
+      </a>
+      </Card>
+    </div>
+  );
+};
+
+export { ProductCard3 };
diff --git a/blocks/product-card4.tsx b/blocks/product-card4.tsx
new file mode 100644
index 0000000..01c3ccc
--- /dev/null
+++ b/blocks/product-card4.tsx
@@ -0,0 +1,86 @@
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  name: string;
+  brand: string;
+  rate: number;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  price: ProductPrice;
+}
+
+const PRODUCT_CARD: Product = {
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Sporty-Casual-Portrait-1.png",
+    alt: "تاپ کراپ صورتی با طراحی شیک",
+  },
+  name: "تاپ کراپ رز",
+  brand: "آتلیه رز",
+  link: "#",
+  price: {
+    regular: 590000.0,
+    currency: "ریال",
+  },
+  rate: 5,
+};
+
+interface ProductCard4Props {
+  className?: string;
+}
+
+const ProductCard4 = ({ className }: ProductCard4Props) => {
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <a
+        href={PRODUCT_CARD.link}
+        className="block min-w-47.5 md:max-w-64"
+      >
+      <Card className="group h-full min-h-105 gap-3.5 rounded-sm border-none bg-card p-2 shadow-none">
+        <CardHeader className="block p-0">
+          <div className="h-80 w-full overflow-hidden rounded-sm">
+            <img
+              src={PRODUCT_CARD.image.src}
+              alt={PRODUCT_CARD.image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </div>
+        </CardHeader>
+        <CardContent className="flex h-full flex-col gap-2 px-2 pb-1">
+          <div className="mb-1.5 flex justify-between gap-2">
+            <div className="text-xs font-medium text-muted-foreground uppercase">
+              {PRODUCT_CARD.brand}
+            </div>
+            <Rating
+              rate={PRODUCT_CARD.rate}
+              className="[&_svg]:size-3.5 [&_svg]:fill-yellow-500 [&_svg]:stroke-yellow-500 [&>div]:size-3.5"
+            />
+          </div>
+          <CardTitle className="text-lg leading-tight font-semibold">
+            {PRODUCT_CARD.name}
+          </CardTitle>
+          <Price onSale={sale != null} className="text-lg font-semibold">
+            <PriceValue price={regular} currency={currency} variant="regular" />
+            <PriceValue price={sale} currency={currency} variant="sale" />
+          </Price>
+        </CardContent>
+      </Card>
+      </a>
+    </div>
+  );
+};
+
+export { ProductCard4 };
diff --git a/blocks/product-card5.tsx b/blocks/product-card5.tsx
new file mode 100644
index 0000000..17f3600
--- /dev/null
+++ b/blocks/product-card5.tsx
@@ -0,0 +1,78 @@
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  collection: string;
+  price: ProductPrice;
+}
+
+const PRODUCT_CARD: Product = {
+  collection: "ساعت طلایی",
+  name: "گوشواره بلوم و گلیم",
+  link: "#",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Floral-Earrings-1.png",
+    alt: "گوشواره گل‌دار شیک",
+  },
+  price: {
+    regular: 4000000.0,
+    currency: "ریال",
+  },
+};
+
+interface ProductCard5Props {
+  className?: string;
+}
+
+const ProductCard5 = ({ className }: ProductCard5Props) => {
+  const { regular, currency } = PRODUCT_CARD.price;
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <a
+        href={PRODUCT_CARD.link}
+        className="block w-full max-w-80 min-w-47.5"
+      >
+      <Card className="group gap-3.5 rounded-md border-none bg-card p-2 shadow-none">
+        <CardHeader className="block p-0">
+          <AspectRatio ratio={1} className="w-full overflow-hidden rounded-2xl">
+            <img
+              src={PRODUCT_CARD.image.src}
+              alt={PRODUCT_CARD.image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+        </CardHeader>
+        <CardContent className="flex h-full flex-col gap-2 px-2 pb-1">
+          <p className="text-xs text-muted-foreground uppercase">
+            {PRODUCT_CARD.collection}
+          </p>
+          <CardTitle className="leading-tight font-medium">
+            {PRODUCT_CARD.name}
+          </CardTitle>
+          <Price className="text-lg font-semibold">
+            <PriceValue price={regular} currency={currency} variant="regular" />
+            <PriceValue currency={currency} variant="sale" />
+          </Price>
+        </CardContent>
+      </Card>
+      </a>
+    </div>
+  );
+};
+
+export { ProductCard5 };
diff --git a/blocks/product-card6.tsx b/blocks/product-card6.tsx
new file mode 100644
index 0000000..2e76425
--- /dev/null
+++ b/blocks/product-card6.tsx
@@ -0,0 +1,316 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type FieldName = keyof FormType;
+
+type FormType = z.infer<typeof formSchema>;
+
+type Image = {
+  src: string;
+  alt: string;
+};
+
+type Option = {
+  id: string;
+  label: string;
+  color: string;
+  value: string;
+  image: Image;
+};
+
+interface ProductFormProps {
+  colorHinges?: {
+    name: FieldName;
+    options: Omit<Option, "image">[];
+  };
+  form: UseFormReturn<FormType>;
+}
+
+interface RadioGroupProps {
+  options?: Omit<Option, "image">[];
+  field: ControllerRenderProps<FormType>;
+}
+
+type ColorOptionProps = Omit<Option, "image">;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  collection: {
+    label: string;
+    link: string;
+  };
+  name: string;
+  variantId: string;
+  link: string;
+  image: Image;
+  price: ProductPrice;
+  variants: {
+    name: FieldName;
+    options: Array<Option>;
+  };
+  quickAdd: boolean;
+  stockStatusCode: StockStatusCode;
+}
+
+const PRODUCT_CARD: Product = {
+  collection: {
+    label: "رنگ‌های انتزاعی",
+    link: "#",
+  },
+  name: "قاب میدنایت استریک",
+  link: "#",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-CubSQS4iYEE-unsplash-3.jpg",
+    alt: "قاب موبایل میدنایت استریک",
+  },
+  price: {
+    regular: 590000.0,
+    sale: 490000.0,
+    currency: "ریال",
+  },
+  variants: {
+    name: "color",
+    options: [
+      {
+        id: "midnight_black-1",
+        label: "مشکی نیمه‌شب",
+        color: "#0B0B0B",
+        value: "midnight_black",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-CubSQS4iYEE-unsplash-3.jpg",
+          alt: "قاب موبایل مشکی نیمه‌شب",
+        },
+      },
+      {
+        id: "royal_indigo-1",
+        label: "نیلی سلطنتی",
+        color: "#3B0A45",
+        value: "royal_indigo",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-wyEh0ZnwUFM-unsplash-3.jpg",
+          alt: "قاب موبایل نیلی سلطنتی",
+        },
+      },
+      {
+        id: "vibrant_tangerine-1",
+        label: "نارنجی درخشان",
+        color: "#FF6400",
+        value: "vibrant_tangerine",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-kfv-hU9ZVkk-unsplash-3.jpg",
+          alt: "قاب موبایل نارنجی درخشان",
+        },
+      },
+    ],
+  },
+  quickAdd: true,
+  variantId: "midnight_black",
+  stockStatusCode: "IN_STOCK",
+};
+
+const formSchema = z.object({
+  color: z.string(),
+});
+
+interface ProductCard6Props {
+  className?: string;
+}
+
+const ProductCard6 = ({ className }: ProductCard6Props) => {
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: PRODUCT_CARD.variantId,
+    },
+  });
+  const selectedVariant = form.watch("color");
+  const currentVariantImage = PRODUCT_CARD.variants.options.find(
+    (item) => item.value === selectedVariant,
+  )?.image;
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="group max-w-72 gap-2 rounded-none border-none bg-background p-0 shadow-none">
+      <CardHeader className="gap-0 p-0">
+        <AspectRatio ratio={0.76984127} className="overflow-hidden">
+          <a href={PRODUCT_CARD.link} className="block size-full">
+            {currentVariantImage && (
+              <img
+                src={currentVariantImage?.src}
+                alt={currentVariantImage?.alt}
+                className="block size-full object-cover object-center transition-transform duration-500 group-hover:scale-110"
+              />
+            )}
+          </a>
+          {PRODUCT_CARD.quickAdd &&
+            PRODUCT_CARD.stockStatusCode === STOCK_STATUS.IN_STOCK && (
+              <div className="absolute inset-x-5 bottom-5 transition-opacity duration-400 group-hover:opacity-100 xl:opacity-0">
+                <Button
+                  onClick={() => {
+                    form.trigger().then((valid) => {
+                      if (valid) {
+                        form.handleSubmit(onSubmit)();
+                      }
+                    });
+                  }}
+                  className="w-full"
+                >
+                  افزودن سریع
+                </Button>
+              </div>
+            )}
+        </AspectRatio>
+      </CardHeader>
+      <CardContent className="p-0">
+        {(PRODUCT_CARD.stockStatusCode || PRODUCT_CARD.price?.sale) && (
+          <div className="text-sm">
+            {PRODUCT_CARD.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK ? (
+              <span className="text-muted-foreground">فروخته شد</span>
+            ) : (
+              PRODUCT_CARD.price.sale && (
+                <span className="text-destructive">حراج</span>
+              )
+            )}
+          </div>
+        )}
+        <div
+          className={`pt-0.5 ${PRODUCT_CARD.stockStatusCode === STOCK_STATUS.IN_STOCK && !PRODUCT_CARD.price?.sale && "mt-5"}`}
+        >
+          <a className="text-sm font-bold" href={PRODUCT_CARD.collection.link}>
+            {PRODUCT_CARD.collection.label}
+          </a>
+          <div className="flex flex-wrap items-center gap-2 xl:flex-nowrap">
+            <CardTitle className="text-sm font-normal">
+              {PRODUCT_CARD.name}
+            </CardTitle>
+            <div className="transition-opacity duration-400 group-hover:opacity-100 xl:opacity-0">
+              <ProductForm colorHinges={PRODUCT_CARD.variants} form={form} />
+            </div>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="relative mt-1 flex-col items-start gap-3 p-0 xl:flex-row">
+        <div className="transition-opacity duration-400 xl:group-hover:opacity-0">
+          <Price onSale={sale != null} className="text-sm font-medium">
+            <PriceValue price={sale} currency={currency} variant="sale" />
+            <PriceValue price={regular} currency={currency} variant="regular" />
+          </Price>
+        </div>
+        <div className="absolute flex items-center gap-3 bg-background opacity-0 transition-opacity duration-400 group-hover:opacity-100">
+          <Button variant="link" className="h-fit p-0 underline">
+            همین الان بخرید
+          </Button>
+          <Button
+            variant="link"
+            className="h-fit p-0 text-muted-foreground underline"
+          >
+            مشاهده سریع
+          </Button>
+        </div>
+      </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+const ProductForm = ({ colorHinges, form }: ProductFormProps) => {
+  if (!colorHinges) return;
+
+  return (
+    <form>
+      <Controller
+        control={form.control}
+        name={colorHinges.name}
+        render={({ field }) => (
+          <Field>
+            <ColorRadioGroup field={field} options={colorHinges.options} />
+          </Field>
+        )}
+      />
+    </form>
+  );
+};
+
+const ColorRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex gap-0"
+    >
+      {options &&
+        options.map((item, index) => (
+          <Field key={`product-list-6-color-input-${index}`}>
+            <ColorOption
+              label={item.label}
+              id={item.id}
+              color={item.color}
+              value={item.value}
+            />
+          </Field>
+        ))}
+    </RadioGroup>
+  );
+};
+
+const ColorOption = ({ id, value, color, label }: ColorOptionProps) => {
+  return (
+    <FieldLabel
+      htmlFor={id}
+      aria-label={label}
+      className="relative flex size-5 cursor-pointer after:pointer-events-none after:absolute after:inset-1/2 after:size-1 after:-translate-1/2 after:rounded-full after:bg-white after:opacity-0 after:transition-opacity has-checked:after:opacity-100"
+    >
+      <RadioGroupItem id={id} className="sr-only" value={value} />
+      <div
+        style={{
+          backgroundColor: color,
+        }}
+        className="m-auto size-2.5 rounded-full"
+      ></div>
+    </FieldLabel>
+  );
+};
+
+export { ProductCard6 };
diff --git a/blocks/product-card7.tsx b/blocks/product-card7.tsx
new file mode 100644
index 0000000..b9ea9cf
--- /dev/null
+++ b/blocks/product-card7.tsx
@@ -0,0 +1,487 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ClockFading, Heart, ShoppingBag } from "lucide-react";
+import { Fragment } from "react";
+import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+  LOW_STOCK: "LOW_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type option = {
+  id: string;
+  label: string;
+  value: string;
+  stockStatusCode: StockStatusCode;
+};
+
+type FormType = z.infer<typeof formSchema>;
+
+type FieldName = keyof FormType;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  discountPercent?: string;
+  currency: string;
+}
+
+interface ProductFormProps {
+  sizeHinges?: {
+    name: FieldName;
+    label: string;
+    options: Array<option>;
+  };
+}
+
+interface SizeRadioGroupProps {
+  options: Array<option>;
+  field: ControllerRenderProps<FormType>;
+  form: UseFormReturn<FormType>;
+  onSubmit: (values: FormType) => void;
+}
+
+type SizeOptionProps = option;
+
+interface Product {
+  name: string;
+  link: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  price: ProductPrice;
+  sizeHinges: {
+    name: FieldName;
+    label: string;
+    options: Array<option>;
+  };
+}
+
+const PRODUCT_CARD: Product = {
+  name: "سویشرت طرح‌دار ورزشی",
+  link: "#",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/dynamic-sketches-sports-illustrated-sweatshirt.png",
+    alt: "سویشرت طرح‌دار ورزشی",
+  },
+  price: {
+    regular: 590000.0,
+    sale: 490000.0,
+    discountPercent: "-30%",
+    currency: "ریال",
+  },
+  sizeHinges: {
+    name: "size",
+    label: "انتخاب سایز",
+    options: [
+      {
+        id: "xs-1",
+        label: "xs",
+        value: "xs",
+        stockStatusCode: "OUT_OF_STOCK",
+      },
+      {
+        id: "s-1",
+        label: "s",
+        value: "s",
+        stockStatusCode: "OUT_OF_STOCK",
+      },
+      {
+        id: "m-1",
+        label: "m",
+        value: "m",
+        stockStatusCode: "IN_STOCK",
+      },
+      {
+        id: "l-1",
+        label: "l",
+        value: "l",
+        stockStatusCode: "LOW_STOCK",
+      },
+      {
+        id: "xl-1",
+        label: "xl",
+        value: "xl",
+        stockStatusCode: "LOW_STOCK",
+      },
+    ],
+  },
+};
+
+interface ProductCard7Props {
+  className?: string;
+}
+
+const ProductCard7 = ({ className }: ProductCard7Props) => {
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="w-full max-w-64 border-none bg-background p-0 shadow-none">
+      <CardContent className="p-0">
+        <div className="group relative">
+          <a href={PRODUCT_CARD.link}>
+            <AspectRatio
+              ratio={1}
+              className="flex items-center justify-center overflow-hidden bg-muted/20"
+            >
+              <img
+                src={PRODUCT_CARD.image.src}
+                alt={PRODUCT_CARD.image.alt}
+                className="size-full object-contain object-center"
+              />
+            </AspectRatio>
+          </a>
+          <div className="absolute inset-x-0 bottom-0 hidden border bg-background p-3 opacity-0 group-hover:opacity-100 lg:block">
+            <ProductDesktopForm sizeHinges={PRODUCT_CARD.sizeHinges} />
+          </div>
+        </div>
+        <div className="flex min-h-44 items-start justify-between gap-2 px-5 pb-8 pt-6 lg:px-7 lg:pb-8">
+          <a href={PRODUCT_CARD.link} className="flex flex-1 flex-col gap-1">
+            <CardTitle className="text-xl leading-none font-medium">
+              {PRODUCT_CARD.name}
+            </CardTitle>
+            <Price
+              onSale={sale != null}
+              className="flex-col items-start gap-1 text-xs"
+            >
+              <div className="flex items-center gap-1">
+                <PriceValue
+                  currency={currency}
+                  price={sale}
+                  variant="sale"
+                  className="font-semibold text-red-600"
+                />
+                {PRODUCT_CARD.price.discountPercent && (
+                  <Badge className="bg-red-600 px-1.5 py-px">
+                    {PRODUCT_CARD.price.discountPercent}
+                  </Badge>
+                )}
+              </div>
+              <PriceValue
+                price={regular}
+                currency={currency}
+                variant="regular"
+              />
+            </Price>
+          </a>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="hidden rounded-full lg:flex"
+          >
+            <Heart />
+          </Button>
+          <div className="lg:hidden">
+            <ProductMobileForm sizeHinges={PRODUCT_CARD.sizeHinges} />
+          </div>
+        </div>
+      </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  size: z.string().optional(),
+});
+
+const ProductDesktopForm = ({ sizeHinges }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: sizeHinges ? { size: "" } : {},
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col-reverse gap-11 lg:flex-col lg:gap-6"
+    >
+      {sizeHinges && (
+        <Controller
+          control={form.control}
+          name={`${sizeHinges.name}`}
+          render={({ field }) => (
+            <Field className="gap-3">
+              <FieldLabel asChild>
+                <p className="justify-center text-center text-xs leading-normal">
+                  {sizeHinges.label}
+                </p>
+              </FieldLabel>
+              <SizeRadioGroup
+                form={form}
+                onSubmit={onSubmit}
+                field={field}
+                options={sizeHinges.options}
+              />
+            </Field>
+          )}
+        />
+      )}
+
+      {!sizeHinges && (
+        <Button variant="ghost" className="text-xs uppercase">
+          افزودن به سبد
+        </Button>
+      )}
+    </form>
+  );
+};
+
+const ProductMobileForm = ({ sizeHinges }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: sizeHinges ? { size: "" } : {},
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  if (!sizeHinges) {
+    return (
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col-reverse gap-11 lg:flex-col lg:gap-6"
+      >
+        <Button variant="ghost" size="icon" className="rounded-full">
+          <ShoppingBag />
+        </Button>
+      </form>
+    );
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="ghost" size="icon" className="rounded-full">
+          <ShoppingBag />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent aria-describedby={undefined}>
+        <DrawerHeader className="px-5">
+          <DrawerTitle className="text-sm">افزودن به سبد</DrawerTitle>
+        </DrawerHeader>
+        <div className="overflow-y-auto">
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col-reverse gap-11 lg:flex-col lg:gap-6"
+          >
+            {sizeHinges && (
+              <Controller
+                control={form.control}
+                name={`${sizeHinges.name}`}
+                render={({ field }) => (
+                  <Field className="gap-3">
+                    <FieldLabel asChild>
+                      <p className="hidden justify-center text-center text-xs leading-normal lg:block">
+                        {sizeHinges.label}
+                      </p>
+                    </FieldLabel>
+                    <SizeRadioGroup
+                      field={field}
+                      options={sizeHinges.options}
+                      form={form}
+                      onSubmit={onSubmit}
+                    />
+                  </Field>
+                )}
+              />
+            )}
+            {!sizeHinges && (
+              <Button variant="ghost" className="text-xs uppercase">
+                افزودن به سبد
+              </Button>
+            )}
+          </form>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+const SizeRadioGroup = ({
+  options,
+  field,
+  form,
+  onSubmit,
+}: SizeRadioGroupProps) => {
+  if (!options) return;
+
+  const handleOnChange = async (value: string) => {
+    if (form.formState.isSubmitting) return;
+
+    if (value !== field.value && value) {
+      field.onChange(value);
+
+      const valid = await form.trigger(field.name);
+      if (valid) {
+        await form.handleSubmit(onSubmit)();
+      }
+    }
+  };
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={handleOnChange}
+      className="flex w-full flex-col justify-center gap-0 lg:flex-row lg:flex-wrap lg:gap-3"
+    >
+      {options &&
+        options.map((item, index) => (
+          <Fragment key={`product-list-7-size-input-${index}`}>
+            <div className="hidden lg:contents">
+              <SizeOptionDesktop
+                stockStatusCode={item.stockStatusCode}
+                id={item.id}
+                label={item.label}
+                value={item.value}
+              />
+            </div>
+            <div className="contents lg:hidden">
+              <SizeOptionMobile
+                stockStatusCode={item.stockStatusCode}
+                id={`${item.id}-mobile`}
+                label={item.label}
+                value={item.value}
+              />
+            </div>
+          </Fragment>
+        ))}
+    </RadioGroup>
+  );
+};
+
+const SizeOptionDesktop = ({
+  id,
+  label,
+  value,
+  stockStatusCode,
+}: SizeOptionProps) => {
+  if (stockStatusCode === STOCK_STATUS.IN_STOCK) {
+    return (
+      <Field>
+        <FieldLabel
+          htmlFor={id}
+          className="flex h-8 min-w-8 cursor-pointer overflow-hidden rounded-full px-1.5 text-xs leading-none font-normal uppercase hover:ring has-checked:bg-primary has-checked:text-primary-foreground"
+        >
+          <RadioGroupItem
+            id={id}
+            className="sr-only"
+            value={value}
+            aria-label={`انتخاب ${label}`}
+          />
+          <div className="m-auto">{label}</div>
+        </FieldLabel>
+      </Field>
+    );
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div>
+            <Field>
+              <FieldLabel
+                htmlFor={id}
+                className="group/size flex h-8 min-w-8 cursor-pointer overflow-hidden rounded-full px-1.5 text-xs leading-none font-normal uppercase not-has-disabled:hover:ring has-checked:bg-primary has-checked:text-primary-foreground has-disabled:bg-muted has-disabled:text-muted-foreground"
+              >
+                <RadioGroupItem
+                  id={id}
+                  className="sr-only"
+                  value={value}
+                  aria-label={`انتخاب ${label}`}
+                  disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+                />
+                <div className="m-auto flex items-center justify-center gap-1.5">
+                  {stockStatusCode === STOCK_STATUS.LOW_STOCK && (
+                    <ClockFading className="size-4 stroke-muted-foreground group-has-checked/size:stroke-primary-foreground" />
+                  )}
+                  {label}
+                </div>
+              </FieldLabel>
+            </Field>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent
+          side="bottom"
+          className="bg-background px-5 shadow [&>span:nth-child(2)>svg]:bg-background [&>span:nth-child(2)>svg]:fill-background"
+        >
+          <span className="text-center text-xs text-muted-foreground">
+            {stockStatusCode === STOCK_STATUS.LOW_STOCK
+              ? "تنها چند عدد مانده"
+              : "ناموجود"}
+          </span>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+const SizeOptionMobile = ({
+  id,
+  label,
+  value,
+  stockStatusCode,
+}: SizeOptionProps) => {
+  return (
+    <Field>
+      <FieldLabel
+        htmlFor={id}
+        className="px-5 pt-5 text-sm leading-normal font-normal uppercase not-has-disabled:active:bg-muted has-disabled:text-muted-foreground"
+      >
+        <RadioGroupItem
+          id={id}
+          className="sr-only"
+          value={value}
+          aria-label={`انتخاب ${label}`}
+          disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+        />
+        <div className="flex w-full items-center justify-between gap-2 border-b pb-5">
+          {label}
+          <span className="text-center text-xs text-muted-foreground normal-case">
+            {stockStatusCode === STOCK_STATUS.LOW_STOCK && "تنها چند عدد مانده!"}
+          </span>
+        </div>
+      </FieldLabel>
+    </Field>
+  );
+};
+
+export { ProductCard7 };
diff --git a/blocks/product-card8.tsx b/blocks/product-card8.tsx
new file mode 100644
index 0000000..31c0f5d
--- /dev/null
+++ b/blocks/product-card8.tsx
@@ -0,0 +1,561 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Minus, Plus, ShoppingBag, Star, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+type Option = {
+  id: string;
+  label: string;
+  value: string;
+  stockStatusCode: StockStatusCode;
+  color?: string;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  options?: Option[];
+  min?: number;
+  max?: number;
+}
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+  discount?: string;
+}
+
+interface ProductFormProps {
+  hinges: Record<FieldName, Hinges>;
+  onOpenChange: () => void;
+}
+
+interface QuantityProps {
+  field: ControllerRenderProps<FormType>;
+  max?: number;
+  min?: number;
+}
+
+type Image = {
+  srcset: string;
+  sizes: string;
+  alt: string;
+};
+
+interface RadioGroupProps {
+  options?: Array<Option>;
+  id: string;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface Product {
+  name: string;
+  price: ProductPrice;
+  rate: number;
+  images: Image[];
+  link: string;
+  hinges?: Record<FieldName, Hinges>;
+}
+
+const PRODUCT_CARD: Product = {
+  name: "پیراهن میدی راه‌راه عمودی",
+  price: {
+    regular: 990000.0,
+    sale: 790000.0,
+    currency: "ریال",
+    discount: "-۲۰٪",
+  },
+  rate: 5,
+  link: "#",
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555009-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555009-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555009-1.jpg 640w",
+      alt: "پیراهن میدی راه‌راه عمودی",
+      sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555003-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555003-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555003-1.jpg 640w",
+      alt: "پیراهن میدی راه‌راه عمودی  نمای دوم",
+      sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+    },
+  ],
+  hinges: {
+    size: {
+      label: "سایز",
+      id: "size",
+      name: "size",
+      options: [
+        {
+          id: "xs-1",
+          value: "xs",
+          label: "xs",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "s-1",
+          value: "s",
+          label: "s",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "m-1",
+          value: "m",
+          label: "m",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "l-1",
+          value: "l",
+          label: "l",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "xl-1",
+          value: "xl",
+          label: "xl",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "xxl-1",
+          value: "xxl",
+          label: "xxl",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "3xl-1",
+          value: "3xl",
+          label: "3xl",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "4xl-1",
+          value: "4xl",
+          label: "4xl",
+          stockStatusCode: "IN_STOCK",
+        },
+      ],
+    },
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "black-1",
+          label: "مشکی",
+          value: "black",
+          color: "#000000",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "blue-1",
+          label: "آبی",
+          value: "blue",
+          color: "#607FC7",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "red-1",
+          label: "قرمز",
+          value: "red",
+          color: "#97012e",
+          stockStatusCode: "IN_STOCK",
+        },
+      ],
+    },
+    quantity: {
+      label: "تعداد",
+      id: "quantity-1",
+      name: "quantity",
+      min: 1,
+      max: 90,
+    },
+  },
+};
+
+interface ProductCard8Props {
+  className?: string;
+}
+
+const ProductCard8 = ({ className }: ProductCard8Props) => {
+  const [open, setOpen] = useState(false);
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+
+  const onOpenChange = () => {
+    if (PRODUCT_CARD.hinges) {
+      setOpen(!open);
+    }
+  };
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="group relative block w-full max-w-64 rounded-none border-none shadow-none ring ring-border">
+      <a
+        href={PRODUCT_CARD.link}
+        className="absolute inset-0 z-50 size-full"
+      ></a>
+      <CardContent>
+        <div className="relative overflow-hidden">
+          <AspectRatio
+            ratio={1}
+            className="flex items-center justify-center overflow-hidden rounded-[1.25rem] bg-muted/20"
+          >
+            {PRODUCT_CARD.images.map((img, index) => (
+              <div
+                className="absolute inset-0 flex size-full items-center justify-center transition-opacity duration-350 first:z-20 group-hover:first:opacity-0 last:z-10"
+                key={`product-card-8-card-img-${index}`}
+              >
+                <img
+                  srcSet={img.srcset}
+                  alt={img.alt}
+                  sizes={img.sizes}
+                  className="size-full object-contain object-center transition-transform duration-350"
+                />
+              </div>
+            ))}
+          </AspectRatio>
+          <Badge
+            variant="outline"
+            className="absolute start-4 top-4 z-30 rounded-full bg-background font-bold opacity-0 transition-opacity duration-350 group-hover:opacity-100"
+          >
+            <Star className="fill-inherit" />
+            {PRODUCT_CARD.rate}
+          </Badge>
+          {PRODUCT_CARD.price.discount && (
+            <Badge
+              variant="outline"
+              className="absolute end-4 top-4 z-30 rounded-full bg-background font-bold text-red-600 transition-opacity duration-350"
+            >
+              {PRODUCT_CARD.price.discount}
+            </Badge>
+          )}
+          <Button
+            size="icon"
+            onClick={onOpenChange}
+            className="absolute end-4 bottom-4 z-60 rounded-full lg:translate-y-[calc(100%+1rem)] lg:group-hover:translate-y-0"
+          >
+            <ShoppingBag />
+          </Button>
+        </div>
+        <div className="min-h-44 space-y-2 px-5 pb-8 pt-6 lg:px-7 lg:pb-8">
+          <CardTitle className="text-xl leading-none font-medium">
+            {PRODUCT_CARD.name}
+          </CardTitle>
+          <Price onSale={sale != null}>
+            <PriceValue price={sale} currency={currency} variant="sale" />
+            <PriceValue price={regular} currency={currency} variant="regular" />
+          </Price>
+        </div>
+      </CardContent>
+      {PRODUCT_CARD.hinges && (
+        <Collapsible open={open} onOpenChange={onOpenChange}>
+          <CollapsibleContent className="absolute inset-0 z-70 size-full bg-background">
+            <ProductForm
+              onOpenChange={onOpenChange}
+              hinges={PRODUCT_CARD.hinges}
+            />
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+      </Card>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  size: z.string(),
+  color: z.string(),
+  quantity: z.number(),
+});
+
+const ProductForm = ({ onOpenChange, hinges }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: "",
+      size: "",
+      quantity: 1,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const sizeHinges = hinges?.size;
+  const colorHinges = hinges?.color;
+  const quantityHinges = hinges?.quantity;
+
+  const currentColorId = form.watch("color");
+  const currentColor = useMemo(
+    () =>
+      colorHinges?.options?.find((item) => item.value === currentColorId)
+        ?.label ?? "",
+    [currentColorId, colorHinges],
+  );
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="h-full">
+      <div className="relative h-full">
+        <ScrollArea className="h-full pb-30 lg:pb-17">
+          <div className="flex size-full flex-col gap-6">
+            <div className="relative space-y-5 p-4">
+              <Button
+                size="icon"
+                variant="ghost"
+                type="button"
+                onClick={onOpenChange}
+                className="absolute end-2 top-2 rounded-full"
+              >
+                <X />
+              </Button>
+              {sizeHinges && (
+                <Controller
+                  control={form.control}
+                  name={sizeHinges.name}
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel
+                        className="text-base leading-normal font-bold"
+                        asChild
+                      >
+                        <h2>{sizeHinges.label}</h2>
+                      </FieldLabel>
+                      <div className="relative -mr-4 overflow-hidden after:pointer-events-none after:absolute after:end-0 after:top-0 after:block after:h-full after:w-10.5 after:bg-gradient-to-r after:from-transparent after:to-background after:content-['']">
+                        <SizeRadioGroup
+                          field={field}
+                          options={sizeHinges.options}
+                          id={sizeHinges.id}
+                        />
+                      </div>
+                    </Field>
+                  )}
+                />
+              )}
+              {colorHinges && (
+                <Controller
+                  control={form.control}
+                  name={colorHinges.name}
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel
+                        className="text-base leading-normal font-bold"
+                        asChild
+                      >
+                        <h2>{colorHinges.label}</h2>
+                      </FieldLabel>
+                      <ColorRadioGroup
+                        field={field}
+                        options={colorHinges.options}
+                        id={colorHinges.id}
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        {currentColor
+                          ? currentColor
+                          : `${colorHinges.options?.length} رنگ موجود`}
+                      </p>
+                    </Field>
+                  )}
+                />
+              )}
+            </div>
+          </div>
+        </ScrollArea>
+        <div className="absolute inset-x-0 bottom-0">
+          <div className="flex flex-col items-center gap-4 bg-background p-4 lg:flex-row">
+            {quantityHinges && (
+              <Controller
+                control={form.control}
+                name={quantityHinges.name}
+                render={({ field }) => (
+                  <Field className="self-stretch">
+                    <Quantity
+                      field={field}
+                      min={quantityHinges?.min}
+                      max={quantityHinges?.max}
+                    />
+                  </Field>
+                )}
+              />
+            )}
+            <div className="flex-1 self-stretch">
+              <Button
+                disabled={!form.getValues("color") && !form.getValues("size")}
+                className="w-full rounded-full"
+              >
+                افزودن به سبد
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+const SizeRadioGroup = ({ options, id, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      id={id}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full items-center gap-2 overflow-x-auto p-px [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
+      {options.map((item, index) => (
+        <Field
+          className="shrink-0 last:pr-14.5"
+          key={`product-card-8-size-${index}`}
+        >
+          <FieldLabel
+            htmlFor={item.id}
+            className="h-9 cursor-pointer overflow-hidden rounded-full border px-4.5 py-3 text-center leading-none font-normal uppercase ring-primary duration-400 not-has-disabled:hover:ring-1 has-checked:ring has-checked:hover:ring has-disabled:opacity-25"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              aria-label={`انتخاب ${item.label}`}
+              disabled={item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+            />
+            {item.label}
+          </FieldLabel>
+        </Field>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const ColorRadioGroup = ({ options, id, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      id={id}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap items-center gap-2 overflow-x-auto p-px [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
+      {options.map((item, index) => (
+        <Field key={`product-card-8-color-${index}`}>
+          <FieldLabel
+            htmlFor={item.id}
+            className="relative flex size-9 cursor-pointer overflow-hidden rounded-full border ring-primary duration-400 not-has-disabled:hover:ring has-checked:ring has-disabled:opacity-25"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              aria-label={`انتخاب ${item.label}`}
+              disabled={item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+            />
+            <div
+              style={{
+                backgroundColor: item.color,
+              }}
+              className="m-auto size-7.5 rounded-full"
+            ></div>
+            {item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK && (
+              <span className="absolute top-0 bottom-0 left-1/2 z-10 block h-full w-0 rotate-45 border-l"></span>
+            )}
+          </FieldLabel>
+        </Field>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const Quantity = ({ field, max, min }: QuantityProps) => {
+  return (
+    <div
+      className="flex h-9 w-full min-w-34 items-center overflow-hidden rounded-full border shadow-xs"
+      aria-label="quantity"
+    >
+      <Button
+        onClick={() =>
+          field.onChange(Math.max(min || 1, Number(field.value || 1) - 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Minus />
+      </Button>
+      <Input
+        {...field}
+        value={field.value ?? ""}
+        onChange={(e) => {
+          const raw = e.target.value;
+          const parsed = parseInt(raw, 10);
+
+          // Accept empty string for typing, but validate if not a number
+          if (raw === "") {
+            field.onChange("");
+          } else if (!isNaN(parsed)) {
+            field.onChange(parsed);
+          }
+        }}
+        type="number"
+        min={Math.max(min ?? 1, 1)}
+        max={max ?? 99}
+        className="h-full w-full min-w-10 flex-1 [appearance:textfield] rounded-none border-0 px-1 text-center shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <Button
+        onClick={() =>
+          field.onChange(Math.min(max || 99, Number(field.value || 1) + 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Plus />
+      </Button>
+    </div>
+  );
+};
+
+export { ProductCard8 };
diff --git a/blocks/product-card9.tsx b/blocks/product-card9.tsx
new file mode 100644
index 0000000..02a5446
--- /dev/null
+++ b/blocks/product-card9.tsx
@@ -0,0 +1,330 @@
+"use client";
+
+import { ShoppingBag } from "lucide-react";
+import { startTransition, useEffect, useMemo, useState } from "react";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type Badge = {
+  text: string;
+  color: string;
+};
+
+type Image = {
+  srcset?: string;
+  src: string;
+  sizes?: string;
+  alt: string;
+};
+
+type Variant = {
+  color: string;
+  value: string;
+  id: string;
+  label: string;
+  link: string;
+  images: Array<Image>;
+};
+
+interface ProductColorsProps {
+  variants: Omit<Variant, "images">[];
+  value: string;
+  onOptionHover: (value: string) => void;
+}
+
+interface BadgesProps {
+  badges?: Array<Badge>;
+}
+
+interface Product {
+  name: string;
+  price: ProductPrice;
+  category: {
+    label: string;
+    link: string;
+  };
+  link: string;
+  badges?: Array<Badge>;
+  variants: Array<Variant>;
+  images: Array<Image>;
+}
+
+const PRODUCT_CARD: Product = {
+  name: "لیوان سرامیکی",
+  price: {
+    regular: 190000.0,
+    sale: 150000.0,
+    currency: "ریال",
+  },
+  category: {
+    label: "لیوان‌ها",
+    link: "#",
+  },
+  link: "#",
+  badges: [
+    {
+      text: "بهترین انتخاب!",
+      color: "oklch(54.6% 0.245 262.881)",
+    },
+    {
+      text: "حراج",
+      color: "oklch(57.7% 0.245 27.325)",
+    },
+  ],
+  variants: [
+    {
+      color: "#A8A081",
+      link: "#",
+      value: "light_brown",
+      id: "light_brown",
+      label: "قهوه‌ای روشن",
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
+          alt: "لیوان سرامیکی  قهوه‌ای روشن",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
+          alt: "لیوان سرامیکی  نمای دوم",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      ],
+    },
+    {
+      color: "#C2CCCD",
+      link: "#",
+      value: "light_blue",
+      id: "light_blue",
+      label: "آبی روشن",
+      images: [
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
+          alt: "لیوان سرامیکی  آبی روشن",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+        {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
+          alt: "لیوان سرامیکی  نمای دوم",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      ],
+    },
+  ],
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg",
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
+      alt: "لیوان سرامیکی",
+      sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg",
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
+      alt: "لیوان سرامیکی  نمای دوم",
+      sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+    },
+  ],
+};
+
+interface ProductCard9Props {
+  className?: string;
+}
+
+const ProductCard9 = ({ className }: ProductCard9Props) => {
+  const { regular, sale, currency } = PRODUCT_CARD.price;
+  const [selectedColor, setSelectedColor] = useState<string>("");
+  const [productImages, setProductImages] = useState(PRODUCT_CARD.images);
+
+  const onOptionHover = (value: string) => {
+    setSelectedColor(value);
+  };
+
+  const selectedVariantImages = useMemo(() => {
+    return (
+      PRODUCT_CARD.variants.find((v) => v.value === selectedColor)?.images ??
+      PRODUCT_CARD.images
+    );
+  }, [selectedColor]);
+
+  useEffect(() => {
+    startTransition(() => {
+      setProductImages(selectedVariantImages);
+    });
+  }, [selectedColor, selectedVariantImages]);
+
+  return (
+    <div className={cn("flex w-full justify-center", className)}>
+      <Card className="relative block w-full max-w-64 rounded-none border-none bg-background p-0 shadow-none">
+      <CardContent className="p-0">
+        <div className="group relative overflow-hidden">
+          <a href={PRODUCT_CARD.link}>
+            <AspectRatio
+              ratio={1}
+              className="flex items-center justify-center overflow-hidden rounded-xl bg-muted/20"
+            >
+              {productImages.map((img, index) => (
+                <div
+                  className="absolute inset-0 size-full transition-opacity duration-700 first:z-20 group-hover:first:opacity-0 last:z-10 first:[&>img]:scale-105 first:[&>img]:delay-50 group-hover:first:[&>img]:scale-100 last:[&>img]:scale-105 group-hover:last:[&>img]:scale-100"
+                  key={`product-list-9-card-img-wrapper-${index}`}
+                >
+                  <img
+                    srcSet={img.srcset}
+                    src={img.src}
+                    alt={img.alt}
+                    sizes={img.sizes}
+                    className="size-full object-contain object-center transition-transform duration-700"
+                  />
+                </div>
+              ))}
+            </AspectRatio>
+          </a>
+          <div className="absolute start-2.5 top-2.5 z-60">
+            <Badges badges={PRODUCT_CARD.badges} />
+          </div>
+          <div className="absolute end-2.5 bottom-2.5 z-60 md:hidden">
+            <Button variant="secondary" size="icon" className="rounded-full">
+              <ShoppingBag />
+            </Button>
+          </div>
+          <div className="absolute inset-x-4 bottom-4 z-60 hidden md:block">
+            <Button className="w-full rounded-full opacity-0 duration-700 lg:translate-y-4 lg:group-hover:translate-y-0 lg:group-hover:opacity-100">
+              افزودن به سبد
+            </Button>
+          </div>
+        </div>
+        <div className="flex min-h-44 flex-col gap-2 px-5 pb-8 pt-6 lg:px-7 lg:pb-8">
+          <a
+            href={PRODUCT_CARD.category.link}
+            className="text-xs leading-loose font-bold text-muted-foreground uppercase underline-offset-4 hover:underline"
+          >
+            {PRODUCT_CARD.category.label}
+          </a>
+          <a
+            href={PRODUCT_CARD.link}
+            className="underline-offset-4 hover:underline"
+          >
+            <CardTitle className="text-xl leading-none font-medium">
+              {PRODUCT_CARD.name}
+            </CardTitle>
+          </a>
+          <Price
+            onSale={sale != null}
+            className="text-sm leading-normal font-bold"
+          >
+            <PriceValue
+              price={sale}
+              currency={currency}
+              variant="sale"
+              className="text-red-700"
+            />
+            <PriceValue price={regular} currency={currency} variant="regular" />
+          </Price>
+          <ProductColors
+            value={selectedColor}
+            onOptionHover={onOptionHover}
+            variants={PRODUCT_CARD.variants}
+          />
+        </div>
+      </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const ProductColors = ({
+  value,
+  onOptionHover,
+  variants,
+}: ProductColorsProps) => {
+  if (!variants) return;
+
+  return (
+    <TooltipProvider>
+      <RadioGroup value={value} className="mt-2 flex items-center gap-2">
+        {variants.map((item, index) => (
+          <Label
+            className="relative block pb-1.5 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:w-full after:bg-primary after:opacity-0 after:transition-opacity hover:after:opacity-100 has-data-[state=checked]:after:opacity-100"
+            htmlFor={item.id}
+            key={`product-list-9-color-${index}`}
+          >
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <a href={item.link}>
+                  <div
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                    className="size-5.5 border"
+                    onMouseEnter={() => onOptionHover(item.value)}
+                  ></div>
+                </a>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{item.label}</p>
+              </TooltipContent>
+            </Tooltip>
+            <RadioGroupItem
+              value={item.value}
+              id={item.id}
+              className="sr-only"
+            />
+          </Label>
+        ))}
+      </RadioGroup>
+    </TooltipProvider>
+  );
+};
+
+const Badges = ({ badges }: BadgesProps) => {
+  if (!badges) return;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {badges.map((item, index) => (
+        <Badge
+          style={{ backgroundColor: item.color }}
+          key={`product-list-9-badge-${index}`}
+          className="rounded-full dark:text-white"
+        >
+          {item.text}
+        </Badge>
+      ))}
+    </div>
+  );
+};
+
+export { ProductCard9 };
diff --git a/blocks/product-categories1.tsx b/blocks/product-categories1.tsx
new file mode 100644
index 0000000..cb25217
--- /dev/null
+++ b/blocks/product-categories1.tsx
@@ -0,0 +1,65 @@
+import { cn } from "@/lib/utils";
+
+type CategoryImage = {
+  src: string;
+  srcset?: string;
+  alt: string;
+  sizes?: string;
+};
+
+interface ProductCategories {
+  title: string;
+  summary: string;
+  image: CategoryImage;
+}
+
+type ProductCategories1Props = ProductCategories & { className?: string };
+
+const PRODUCT_CATEGORIES: ProductCategories = {
+  title: "عینک آفتابی",
+  summary: "عینک‌های شیک و محافظ برای هر روز آفتانی",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/accessories/Checkered-Sunglasses-on-Stone-Pedestal-1.png",
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Checkered-Sunglasses-on-Stone-Pedestal-1.png 529w, /block-media/shadcnblocks/block/ecommerce/accessories/Checkered-Sunglasses-on-Stone-Pedestal-2.png 992w",
+    alt: "عینک آفتابی",
+    sizes: "(min-width: 992px) 992px, 100vw",
+  },
+};
+
+const ProductCategories1 = ({
+  title = PRODUCT_CATEGORIES.title,
+  summary = PRODUCT_CATEGORIES.summary,
+  image = PRODUCT_CATEGORIES.image,
+  className,
+}: ProductCategories1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 overflow-hidden rounded-xl bg-muted max-md:grid-rows-[repeat(2,minmax(13.75rem,1fr))] md:min-h-91.5 md:grid-cols-2">
+          <div className="flex h-full place-content-center place-items-center px-20 py-8">
+            <div className="flex flex-col gap-3">
+              <h1 className="animate-in text-center text-xl leading-relaxed font-medium duration-600 ease-in slide-in-from-bottom-50 fade-in">
+                {title}
+              </h1>
+              <p className="animate-in text-center text-lg leading-normal text-balance duration-600 ease-in slide-in-from-bottom-50 fade-in">
+                {summary}
+              </p>
+            </div>
+          </div>
+          <div className="relative h-full overflow-hidden">
+            <img
+              src={image.src}
+              alt={image.alt}
+              srcSet={image.srcset}
+              sizes={image.sizes}
+              className="absolute inset-0 size-full origin-center animate-in object-cover object-center duration-600 ease-in zoom-in-140"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ProductCategories1 };
diff --git a/blocks/product-categories2.tsx b/blocks/product-categories2.tsx
new file mode 100644
index 0000000..d9a50aa
--- /dev/null
+++ b/blocks/product-categories2.tsx
@@ -0,0 +1,149 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type ProductCategory = {
+  title: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  summary: string;
+  link: string;
+};
+
+type ProductCategories2Props = {
+  title: string;
+  productCategories: ProductCategory[];
+  className?: string;
+};
+
+const PRODUCT_CATEGORIES = {
+  title: "دسته‌بندی محصولات",
+  productCategories: [
+    {
+      title: "عینک آفتابی",
+      summary: "عینک‌های مدرن با ترکیب استایل و محافظت در برابر آفتاب",
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Checkered-Sunglasses-on-Stone-Pedestal-2.png",
+        alt: "عینک آفتابی",
+      },
+      link: "#",
+    },
+    {
+      title: "جواهرات",
+      summary: "قطعات ظریف برای ارتقای هر استایل",
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Gold-Hoop-Earrings-on-Ceramic-Dish-2.png",
+        alt: "جواهرات",
+      },
+      link: "#",
+    },
+    {
+      title: "کاپشن و ژاکت",
+      summary: "لایه‌بندی با استایل‌های کلاسیک بیرونی",
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Portrait-2.png",
+        alt: "کاپشن و ژاکت",
+      },
+      link: "#",
+    },
+    {
+      title: "کیف",
+      summary: "طراحی‌های کاربردی برای استفاده روزمره",
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png",
+        alt: "کیف",
+      },
+      link: "#",
+    },
+    {
+      title: "کفش",
+      summary: "قدم بردارید با راحتی و استایل",
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+        alt: "کفش",
+      },
+      link: "#",
+    },
+    {
+      title: "لباس",
+      summary: "برش‌های آسان برای هر مناسبت",
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555033-2.jpg",
+        alt: "لباس",
+      },
+      link: "#",
+    },
+  ],
+};
+
+const ProductCategories2 = ({
+  title = PRODUCT_CATEGORIES.title,
+  productCategories = PRODUCT_CATEGORIES.productCategories,
+  className,
+}: ProductCategories2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-10">
+          <h2 className="animate-in text-center text-xl leading-snug font-medium duration-600 fade-in slide-in-from-bottom-6">
+            {title}
+          </h2>
+          <div className="gap grid grid-cols-2 gap-x-2.5 gap-y-10 lg:grid-cols-3">
+            {productCategories?.map((item, index) => (
+              <div
+                key={item.title}
+                style={{
+                  animationDelay: `${100 * index}ms`,
+                }}
+                className="animate-out opacity-0 duration-700 fade-in-100 fill-mode-forwards"
+              >
+                <ProductCategoryCard {...item} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductCategoryCard = ({
+  title,
+  image,
+  summary,
+  link,
+}: ProductCategory) => {
+  return (
+    <Card className="rounded-none border-none bg-background p-0 shadow-none">
+      <CardContent className="p-0">
+        <a href={link} className="flex flex-col gap-4">
+          <AspectRatio
+            ratio={1.363277259}
+            className="overflow-hidden rounded-xl"
+          >
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="size-full origin-center object-cover object-center transition-transform duration-400 hover:scale-115"
+            />
+          </AspectRatio>
+          <div className="space-y-1">
+            <CardTitle className="text-center text-lg leading-tight font-medium sm:text-xl md:text-xl">
+              {title}
+            </CardTitle>
+            <CardDescription className="text-center">{summary}</CardDescription>
+          </div>
+        </a>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { ProductCategories2 };
diff --git a/blocks/product-categories3.tsx b/blocks/product-categories3.tsx
new file mode 100644
index 0000000..b26e968
--- /dev/null
+++ b/blocks/product-categories3.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils";
+
+const PRODUCT_CATEGORIES = {
+  title: "اکسسوری",
+  summary: "اکسسوری‌های شیک و کاربردی برای تکمیل استایل شما",
+  image: {
+    src: "/block-media/shadcnblocks/block/ecommerce/accessories/Gold-Heart-Earrings-2.png",
+    alt: "اکسسوری",
+  },
+};
+
+interface ProductCategories3Props {
+  title: string;
+  summary: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  className?: string;
+}
+
+const ProductCategories3 = ({
+  title = PRODUCT_CATEGORIES.title,
+  summary = PRODUCT_CATEGORIES.summary,
+  image = PRODUCT_CATEGORIES.image,
+  className,
+}: ProductCategories3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative flex min-h-75 items-center justify-center overflow-hidden rounded-xl before:absolute before:inset-0 before:z-20 before:size-full before:bg-black/30">
+          <div className="relative z-30 flex size-full flex-col gap-3 px-6 py-8 md:px-10 lg:px-20">
+            <h1 className="text-center text-xl font-medium text-white sm:text-2xll">
+              {title}
+            </h1>
+            <p className="text-center text-lg text-white">{summary}</p>
+          </div>
+          <div className="absolute inset-0 animate-in duration-700 zoom-in-150">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="size-full object-cover object-center"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ProductCategories3 };
diff --git a/blocks/product-categories4.tsx b/blocks/product-categories4.tsx
new file mode 100644
index 0000000..c75f969
--- /dev/null
+++ b/blocks/product-categories4.tsx
@@ -0,0 +1,118 @@
+import { Fragment } from "react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { cn } from "@/lib/utils";
+
+type BreadcrumbLink = {
+  link?: string;
+  label: string;
+};
+
+interface ProductCategory {
+  title: string;
+  description: string;
+  background: string;
+}
+
+interface ProductCategories4Props extends ProductCategory {
+  breadcrumb: BreadcrumbLink[];
+  className?: string;
+}
+
+const BreadcrumbLinks = [
+  {
+    label: "خانه",
+  },
+  {
+    label: "کیف دستی",
+    link: "#",
+  },
+];
+
+const PRODUCT_CATEGORY: ProductCategory = {
+  background:
+    "/block-media/shadcnblocks/block/ecommerce/clothes/Luxurious-Handbag-Display-2.png",
+  title: "کیف دستی",
+  description:
+    "مجموعه کیف‌های دستی ما را کاوش کنید؛ طراحی‌شده برای استایل و کاربرد در هر مناسبت.",
+};
+
+const ProductCategories4 = ({
+  breadcrumb = BreadcrumbLinks,
+  title = PRODUCT_CATEGORY.title,
+  description = PRODUCT_CATEGORY.description,
+  background = PRODUCT_CATEGORY.background,
+  className,
+}: ProductCategories4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div
+        style={{
+          backgroundImage: `url(${background})`,
+        }}
+        className="relative bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/30"
+      >
+        <div className="relative z-10 container flex min-h-80 flex-col py-4">
+          <div>
+            <ProductsCategoryBreadcrumb links={breadcrumb} />
+          </div>
+          <div className="flex flex-1 items-center">
+            <div className="space-y-4">
+              <h1 className="text-xl leading-tight font-medium text-white sm:text-3xl md:text-xl lg:text-2xll">
+                {title}
+              </h1>
+              <p className="max-w-100 text-balance text-white/80">
+                {description}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductsCategoryBreadcrumb = ({ links }: { links: BreadcrumbLink[] }) => {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {links.map(({ label, link }, index) => {
+          const isLast = index === links.length - 1;
+
+          return (
+            <Fragment key={label}>
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage className="text-white/70">
+                    {label}
+                  </BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink
+                    href={link}
+                    className="cursor-pointer text-white/70 hover:text-white"
+                  >
+                    {label}
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {!isLast && (
+                <BreadcrumbSeparator className="text-white/70">
+                  /
+                </BreadcrumbSeparator>
+              )}
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+export { ProductCategories4 };
diff --git a/blocks/product-categories5.tsx b/blocks/product-categories5.tsx
new file mode 100644
index 0000000..bfa0859
--- /dev/null
+++ b/blocks/product-categories5.tsx
@@ -0,0 +1,148 @@
+import { ShoppingBag } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type ImageMedia = {
+  type: "image";
+  alt: string;
+  src: string;
+  srcSet?: string;
+  sizes?: string;
+};
+
+type VideoMedia = {
+  type: "video";
+  src: string;
+};
+
+type MediaItem = ImageMedia | VideoMedia;
+
+interface ProductCategory {
+  title: string;
+  text: string;
+  link: string;
+  cta?: {
+    link: string;
+    text: string;
+  };
+  media: MediaItem;
+}
+
+interface ProductCategories5Props {
+  categories: ProductCategory[];
+  className?: string;
+}
+
+const PRODUCT_CATEGORIES: ProductCategory[] = [
+  {
+    title: "استایل بی‌زحمت",
+    text: "تا ۵۰٪ تخفیف",
+    link: "#",
+    media: {
+      type: "video",
+      src: "/block-media/shadcnblocks/block/6764045-hd_720_1280_25fps.mp4",
+    },
+  },
+  {
+    title: "ملزومات روزمره",
+    text: "تا ۵۰٪ تخفیف",
+    cta: {
+      link: "#",
+      text: "بیشتر ببینید",
+    },
+    link: "#",
+    media: {
+      type: "image",
+      srcSet:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png 1920w, /images/block/ecommerce/clothes/pexels-cottonbro-6764036-2.jpg 1280w, /images/block/ecommerce/clothes/pexels-cottonbro-6764036-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      alt: "ملزومات روزمره",
+    },
+  },
+];
+
+const ProductCategories5 = ({
+  categories = PRODUCT_CATEGORIES,
+  className,
+}: ProductCategories5Props) => {
+  const category1 = categories[0];
+  const category2 = categories[1];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 border lg:grid-cols-2 xl:grid-cols-3">
+          <div className="col-span-1">
+            <div className="relative aspect-square size-full px-10.5 py-8 lg:aspect-auto lg:min-h-150">
+              <div className="relative z-10">
+                <h2 className="mb-1 text-3xl leading-tight font-semibold text-black sm:text-xl">
+                  {category1.title}
+                </h2>
+                <p className="text-xl leading-tight text-black sm:text-xl">
+                  {category1.text}
+                </p>
+              </div>
+              <div className="absolute end-4 bottom-4 z-10">
+                <Button size="icon" className="size-11 rounded-full" asChild>
+                  <a href={category1.link}>
+                    <ShoppingBag />
+                  </a>
+                </Button>
+              </div>
+              <div className="absolute inset-0">
+                <video
+                  muted
+                  autoPlay
+                  loop
+                  className="size-full object-cover object-center"
+                  src={category1.media.src}
+                ></video>
+              </div>
+            </div>
+          </div>
+          <div className="xl:col-span-2">
+            <div className="relative aspect-square size-full px-10.5 py-8 before:pointer-events-none before:absolute before:inset-x-0 before:-bottom-px before:z-10 before:h-2/3 before:bg-gradient-to-t before:from-white/80 before:to-transparent lg:aspect-auto lg:min-h-150">
+              <div className="relative z-20 flex size-full flex-col items-center justify-end gap-3 pb-6.5">
+                <div>
+                  <h2 className="mb-1 text-center text-3xl leading-tight font-semibold text-black sm:text-xl">
+                    {category2.title}
+                  </h2>
+                  <p className="text-center text-xl leading-tight text-black sm:text-xl">
+                    {category2.text}
+                  </p>
+                </div>
+                {category2.cta && (
+                  <Button size="lg" asChild>
+                    <a href={category2.cta.link}> {category2.cta.text}</a>
+                  </Button>
+                )}
+              </div>
+              <div className="absolute inset-0">
+                {category2.media.type === "image" && (
+                  <img
+                    sizes={category2.media?.sizes}
+                    srcSet={category2.media?.srcSet}
+                    src={category2.media.src}
+                    alt=""
+                    className="size-full object-cover object-[50%_30%]"
+                  />
+                )}
+              </div>
+              <div className="absolute end-4 bottom-4 z-10">
+                <Button size="icon" className="size-11 rounded-full" asChild>
+                  <a href={category2.link}>
+                    <ShoppingBag />
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ProductCategories5 };
diff --git a/blocks/product-detail1.tsx b/blocks/product-detail1.tsx
new file mode 100644
index 0000000..23fe592
--- /dev/null
+++ b/blocks/product-detail1.tsx
@@ -0,0 +1,515 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CircleCheck, Star, StarHalf } from "lucide-react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+type StockStatusCode = "IN_STOCK" | "OUT_OF_STOCK";
+
+interface StockInfo {
+  stockStatusCode?: StockStatusCode;
+  stockQuantity?: number;
+}
+
+type option = {
+  id: string;
+  label: string;
+  stockInfo: StockInfo;
+  color?: string;
+  value: string;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  options?: option[];
+  min?: number;
+  max?: number;
+}
+
+interface ProductImagesProps {
+  images: Array<{
+    srcset: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    sizes: string;
+  }>;
+}
+
+interface ReviewsProps {
+  rate: number;
+  totalReviewers: string;
+}
+
+interface PriceProps {
+  regular: number;
+  sale?: number;
+  currency: string;
+  text?: string;
+}
+
+interface ProductInfoProps {
+  info?: Array<{
+    label: string;
+    value: string;
+  }>;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+type SizeOptionProps = option;
+
+interface RadioGroupProps {
+  options?: Array<option>;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface ProductFormProps {
+  hinges?: Record<FieldName, Hinges>;
+  selected: FormType;
+}
+
+const MAX_STARS = 5;
+
+const PRODUCT_DETAILS = {
+  name: "جاکت شهری راحت",
+  color: "blue",
+  size: "m",
+  reviews: {
+    rate: 3.5,
+    totalReviewers: "۵٫۸ هزار",
+  },
+  description:
+    "این ژاکت پف‌دار دنیمی گرما و استایل خیابانی را در هم می‌آمیزد و با طیف‌های آبی هماهنگ، ظاهری متمایز، جسورانه و در عین حال همه‌کاره خلق می‌کند. برای راحتی در هر فصلی طراحی شده است.",
+  price: {
+    regular: 800000.0,
+    sale: 690000.0,
+    currency: "ریال",
+  },
+  hinges: {
+    size: {
+      label: "انتخاب سایز",
+      id: "size",
+      name: "size",
+      options: [
+        {
+          id: "xs",
+          label: "xs",
+          value: "xs",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        },
+        {
+          id: "s",
+          label: "s",
+          value: "s",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        },
+        {
+          id: "m",
+          label: "m",
+          value: "m",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK",
+          },
+        },
+        {
+          id: "l",
+          label: "l",
+          value: "l",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK",
+          },
+        },
+        {
+          id: "xl",
+          label: "xl",
+          value: "xl",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK",
+          },
+        },
+      ],
+    },
+  } as Record<FieldName, Hinges>,
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png 904w, /block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-1.png 482w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
+      alt: "جاکت شهری راحت",
+      width: 904,
+      height: 1200,
+      sizes: "(min-width: 904px) 904px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-1.png 360w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png",
+      alt: "جاکت شهری راحت",
+      width: 675,
+      height: 1200,
+      sizes: "(min-width: 675px) 675px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-2.png 900w, /block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-m-2.png 900w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-2.png",
+      alt: "جاکت شهری راحت",
+      width: 900,
+      height: 1200,
+      sizes: "(min-width: 900px) 900px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Tattooed-Streetwear-Look-2.png 1050w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Tattooed-Streetwear-Look-2.png",
+      alt: "جاکت شهری راحت",
+      width: 1050,
+      height: 1498,
+      sizes: "(min-width: 1050px) 1050px, 100vw",
+    },
+  ],
+};
+
+interface ProductDetail1Props {
+  className?: string;
+}
+
+const ProductDetail1 = ({ className }: ProductDetail1Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
+          <div>
+            <ProductImages images={PRODUCT_DETAILS.images} />
+          </div>
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div className="flex-1">
+                  <h1 className="text-xl font-bold tracking-tight lg:text-2xll">
+                    {PRODUCT_DETAILS.name}
+                  </h1>
+                  <div className="mt-3 flex flex-wrap items-center gap-4">
+                    <Reviews
+                      rate={PRODUCT_DETAILS.reviews.rate}
+                      totalReviewers={PRODUCT_DETAILS.reviews.totalReviewers}
+                    />
+                    <Badge variant="secondary">
+                      <CircleCheck />
+                      موجود
+                    </Badge>
+                  </div>
+                </div>
+                <Price {...PRODUCT_DETAILS.price} />
+              </div>
+
+              <p className="text-muted-foreground">
+                {PRODUCT_DETAILS.description}
+              </p>
+            </div>
+
+            <Button size="lg" className="w-full">
+              خرید فوری
+            </Button>
+
+            <ProductForm
+              hinges={PRODUCT_DETAILS.hinges}
+              selected={{
+                size: PRODUCT_DETAILS.size,
+                color: PRODUCT_DETAILS.color,
+                quantity: 1,
+              }}
+            />
+
+            <ProductInfo
+              info={[
+                {
+                  label: "جنس",
+                  value: "۱۰۰٪ دنیم ممتاز",
+                },
+                {
+                  label: "مدل",
+                  value: "ژاکت پف‌دار",
+                },
+                {
+                  label: "فصل",
+                  value: "چهار فصل",
+                },
+                {
+                  label: "نگهداری",
+                  value: "قابل شستشو با ماشین لباسشویی",
+                },
+                {
+                  label: "مبدأ",
+                  value: "ساخت ایتالیا",
+                },
+                {
+                  label: "قد",
+                  value: "اندازه استاندارد",
+                },
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductInfo = ({ info }: ProductInfoProps) => {
+  if (!info) return;
+
+  return (
+    <div>
+      <h2 className="mb-4 text-lg font-semibold">جزئیات محصول</h2>
+      <dl>
+        {info.map((item, index) => (
+          <div
+            key={`product-detail-1-info-${index}`}
+            className="flex items-center justify-between border-b py-3 last:border-b-0"
+          >
+            <dt className="text-sm font-medium text-muted-foreground">
+              {item.label}
+            </dt>
+            <dd className="text-sm font-medium">{item.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+};
+
+const ProductImages = ({ images }: ProductImagesProps) => {
+  return (
+    <Carousel
+      opts={{
+        breakpoints: {
+          "(min-width: 768px)": {
+            active: false,
+          },
+        },
+      }}
+    >
+      <CarouselContent className="gap-4 md:m-0 md:grid md:grid-cols-3 xl:gap-5">
+        {images.map((img, index) => (
+          <CarouselItem
+            className="first:col-span-3 md:p-0"
+            key={`product-detail-1-image-${index}`}
+          >
+            <AspectRatio ratio={1} className="overflow-hidden rounded-lg">
+              <img
+                srcSet={img.srcset}
+                alt={img.alt}
+                width={img.width}
+                height={img.height}
+                sizes={img.sizes}
+                className="block size-full object-cover object-center"
+              />
+            </AspectRatio>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <div className="md:hidden">
+        <CarouselPrevious className="start-4" />
+        <CarouselNext className="end-4" />
+      </div>
+    </Carousel>
+  );
+};
+
+const Reviews = ({ rate, totalReviewers }: ReviewsProps) => {
+  const renderStars = () => {
+    const fullStars = Math.floor(rate);
+    const hasHalfStar = rate % 1 >= 0.5;
+    const emptyStars = MAX_STARS - fullStars - (hasHalfStar ? 1 : 0);
+
+    const stars = [];
+
+    for (let i = 0; i < fullStars; i++) {
+      stars.push(
+        <Star
+          key={`product-detail-1-star-full-${i}`}
+          className="size-4 fill-yellow-500 stroke-yellow-500"
+        />,
+      );
+    }
+
+    if (hasHalfStar) {
+      stars.push(
+        <div key="product-detail-1-half-star" className="relative size-4">
+          <StarHalf className="absolute top-0 end-0 size-full fill-yellow-500 stroke-yellow-500" />
+          <StarHalf className="absolute top-0 start-0 size-full -scale-x-100 fill-black/15 stroke-black/15 dark:invert" />
+        </div>,
+      );
+    }
+
+    for (let i = 0; i < emptyStars; i++) {
+      stars.push(
+        <Star
+          key={`product-detail-1-star-empty-${i}`}
+          className="size-4 fill-black/15 stroke-black/15 dark:invert"
+        />,
+      );
+    }
+
+    return stars;
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex items-center gap-1">{renderStars()}</div>
+      {totalReviewers && (
+        <p className="text-base leading-none font-medium whitespace-nowrap text-muted-foreground">
+          {totalReviewers} نظر
+        </p>
+      )}
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+  quantity: z.number().min(1),
+  size: z.string(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: selected?.color,
+      size: selected?.size,
+      quantity: selected?.quantity,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const sizeHinges = hinges?.size;
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      {sizeHinges && (
+        <Controller
+          control={form.control}
+          name={sizeHinges.name}
+          render={({ field }) => (
+            <fieldset className="space-y-3">
+              <legend className="text-base font-semibold">
+                {sizeHinges.label}
+              </legend>
+              <SizeRadioGroup field={field} options={sizeHinges.options} />
+            </fieldset>
+          )}
+        />
+      )}
+    </form>
+  );
+};
+
+const Price = ({ regular, sale, currency }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      {sale && (
+        <span className="text-end text-xl font-bold text-primary">
+          {formatCurrency(sale, currency)}
+        </span>
+      )}
+      <span
+        className={`text-end text-xl font-bold ${sale ? "text-muted-foreground line-through" : "text-foreground"
+          }`}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+    </div>
+  );
+};
+
+const SizeRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex flex-wrap gap-3"
+    >
+      {options &&
+        options.map((item, index) => (
+          <SizeOption
+            key={`product-detail-1-size-input-${index}`}
+            stockInfo={item.stockInfo}
+            id={item.id}
+            label={item.label}
+            value={item.value}
+          />
+        ))}
+    </RadioGroup>
+  );
+};
+
+const SizeOption = ({ id, label, stockInfo, value }: SizeOptionProps) => {
+  const isOutOfStock = stockInfo.stockStatusCode === "OUT_OF_STOCK";
+
+  return (
+    <label
+      htmlFor={id}
+      className="relative flex h-10 w-16 cursor-pointer items-center justify-center rounded-md border text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50"
+    >
+      <RadioGroupItem
+        id={id}
+        className="absolute size-px overflow-hidden opacity-0"
+        value={value}
+        disabled={isOutOfStock}
+      />
+      <span className="uppercase">{label}</span>
+      {isOutOfStock && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="h-px w-full rotate-45 bg-border"></div>
+        </div>
+      )}
+    </label>
+  );
+};
+
+export { ProductDetail1 };
diff --git a/blocks/product-detail10.tsx b/blocks/product-detail10.tsx
new file mode 100644
index 0000000..fd41b8d
--- /dev/null
+++ b/blocks/product-detail10.tsx
@@ -0,0 +1,562 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, ArrowRight, Award, Hammer, MapPin } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+type StockStatusCode = "IN_STOCK" | "OUT_OF_STOCK";
+
+interface StockInfo {
+  stockStatusCode: StockStatusCode;
+  stockQuantity?: number;
+}
+interface ProductImagesProps {
+  images: Array<{
+    srcset: string;
+    sizes: string;
+    alt: string;
+  }>;
+}
+
+interface ProductInfoSectionProps {
+  info: Array<{
+    title: string;
+    content: string;
+  }>;
+}
+
+type Option = {
+  id: string;
+  value: string;
+  label: string;
+  stockInfo: StockInfo;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  min?: number;
+  max?: number;
+  name: FieldName;
+  options?: Option[];
+}
+
+interface ProductForm {
+  selected: FormType;
+  hinges: Record<FieldName, Hinges>;
+}
+
+interface RadioGroupProps {
+  options?: Array<Option>;
+  id: string;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface PriceProps {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+const PRODUCT_DETAILS = {
+  id: "1",
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-1BQySo2Pnfc-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-1BQySo2Pnfc-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-1BQySo2Pnfc-unsplash-1.jpg 640w",
+      sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+      alt: "مبل چرمی اصل بریکستون",
+    },
+
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-dOfuTQp6PiI-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-dOfuTQp6PiI-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-dOfuTQp6PiI-unsplash-1.jpg 640w",
+      sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+      alt: "مبل چرمی اصل بریکستون",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-XE5vVNRbkOk-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-XE5vVNRbkOk-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-XE5vVNRbkOk-unsplash-1.jpg 640w",
+      sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+      alt: "مبل چرمی اصل بریکستون",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/lucas-de-moura-uNZpPRPEnY4-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/furniture/lucas-de-moura-uNZpPRPEnY4-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/lucas-de-moura-uNZpPRPEnY4-unsplash-1.jpg 640w",
+      sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+      alt: "مبل چرمی اصل بریکستون",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-GpKO8VYYWrA-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-GpKO8VYYWrA-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/ozgur-ivo-GpKO8VYYWrA-unsplash-1.jpg 640w",
+      sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+      alt: "مبل چرمی اصل بریکستون",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/john-black-RV9T8txb2uY-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/furniture/john-black-RV9T8txb2uY-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/john-black-RV9T8txb2uY-unsplash-1.jpg 640w",
+      sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+      alt: "مبل چرمی اصل بریکستون",
+    },
+  ],
+  hinges: {
+    material: {
+      label: "جنس",
+      id: "material",
+      name: "material",
+      options: [
+        {
+          id: "light-brown-leather",
+          value: "light-brown-leather",
+          label: "چرم قهوه‌ای روشن",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "dark-brown-leather",
+          value: "dark-brown-leather",
+          label: "چرم قهوه‌ای تیره",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+      ],
+    },
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "light-brown",
+          value: "light-brown",
+          label: "قهوه‌ای روشن",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "dark-brown",
+          value: "dark-brown",
+          label: "قهوه‌ای تیره",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+      ],
+    },
+    size: {
+      label: "سایز",
+      id: "size",
+      name: "size",
+      options: [
+        {
+          id: "90-inch",
+          value: "90-inch",
+          label: "عرض ۹۰ اینچ",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "80-inch",
+          value: "80-inch",
+          label: "عرض ۸۰ اینچ",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+      ],
+    },
+    quantity: {
+      label: "تعداد",
+      id: "quantity",
+      name: "quantity",
+      min: 1,
+      max: 90,
+    },
+  } as Record<FieldName, Hinges>,
+  material: "light-brown-leather",
+  color: "light-brown",
+  size: "80-inch",
+  price: { regular: 1899000, sale: 1599000, currency: "ریال" },
+  stockInfo: {
+    stockStatusCode: "IN_STOCK" as StockStatusCode,
+  },
+  name: "مبل چرمی اصل بریکستون",
+  location: "لس آنجلس، کالیفرنیا",
+  accordion: [
+    {
+      title: "جزئیات",
+      content:
+        "با چوب سخت کوره‌ای و روکش چرم قهوه‌ای روشن ممتاز ساخته شده، مبل بریکستون ظرافت مدرن میانه قرن را با راحتی روزمره ترکیب می‌کند. کوسن‌های مقاوم و ساخت بادوام آن را برای هر فضای نشیمنی ایده‌آل می‌کند.",
+    },
+    {
+      title: "زمان تحویل",
+      content:
+        "ارسال ظرف ۵ تا ۷ روز کاری. زمان تحویل بسته به موقعیت شما ممکن است متفاوت باشد.",
+    },
+  ],
+  description:
+    "<p>جذابیت بی‌زمان مبل بریکستون را در مجموعه چرمی ما کشف کنید. برای راحتی طراحی شده و برای ماندگاری ساخته شده؛ این قطعه هر فضای نشیمنی را ارتقا می‌دهد.</p><p>با دقت و توجه به جزئیات ساخته شده و هر قطعه پیش از عرضه از آزمون‌های سختگیرانه کیفیت عبور می‌کند. مواد ممتاز و تکنیک‌های ساخت حرفه‌ای، مبلمانی می‌سازد که نه‌تنها چشم‌نواز است بلکه در برابر زمان نیز مقاوم می‌ماند.</p><p>تعهد ما به کیفیت فراتر از خود محصول است. از ایده اولیه طراحی تا تحویل نهایی، با هنرمندان ماهر همکاری می‌کنیم تا مبلمانی استثنایی خلق کنیم که زیبایی و کارایی را همزمان به خانه شما می‌آورد.</p>",
+};
+
+interface ProductDetail10Props {
+  className?: string;
+}
+
+const ProductDetail10 = ({ className }: ProductDetail10Props) => {
+  return (
+    <section className={cn("font-ubuntu py-32", className)}>
+      <div className="flex flex-col gap-7">
+        <ProductImages images={PRODUCT_DETAILS.images} />
+        <div className="flex w-full flex-col gap-8 px-4 lg:grid lg:grid-cols-3">
+          <div className="order-2 flex flex-col gap-8 lg:order-1">
+            <ul className="flex flex-col gap-2">
+              <li className="flex items-center gap-2 text-sm">
+                <Award className="size-5 stroke-1" />
+                چرم اصل
+              </li>
+              <li className="flex items-center gap-2 text-sm">
+                <Hammer className="size-5 stroke-1" />
+                دست‌ساز
+              </li>
+              <li className="flex items-center gap-2 text-sm">
+                <MapPin className="size-5 stroke-1" />
+                طراحی‌شده در {PRODUCT_DETAILS.location}
+              </li>
+            </ul>
+            <ProductInfoSection info={PRODUCT_DETAILS.accordion} />
+          </div>
+          <div className="order-1 flex flex-col gap-8 lg:order-2">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex flex-col gap-4">
+                <h2 className="text-lg leading-none font-semibold">
+                  {PRODUCT_DETAILS.name}
+                </h2>
+                <Price {...PRODUCT_DETAILS.price} />
+              </div>
+              <Button>خرید فوری</Button>
+            </div>
+
+            <ProductForm
+              hinges={PRODUCT_DETAILS.hinges}
+              selected={{
+                material: PRODUCT_DETAILS.material,
+                color: PRODUCT_DETAILS.color,
+                size: PRODUCT_DETAILS.size,
+              }}
+            />
+          </div>
+          <div className="order-3 flex flex-col gap-4 text-muted-foreground">
+            <div
+              className="prose prose-sm"
+              dangerouslySetInnerHTML={{ __html: PRODUCT_DETAILS.description }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductImages = ({ images }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+
+  const onSelect = useCallback((carouselApi: CarouselApi) => {
+    if (!carouselApi) return;
+    setCurrent(carouselApi.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  if (!images) return;
+
+  return (
+    <div dir="rtl">
+      <Carousel
+        dir="rtl"
+        opts={{
+          loop: true,
+          align: "start",
+          direction: "rtl",
+          startIndex: 0,
+        }}
+        setApi={setApi}
+        className="w-full"
+      >
+        <CarouselContent className="ms-0 -me-4">
+          {images.map((img, index) => (
+            <CarouselItem
+              key={`product-detail-10-image-${index}`}
+              className="basis-full ps-0 pe-4 lg:basis-[22%]"
+            >
+              <AspectRatio ratio={1} className="overflow-hidden">
+                <img
+                  srcSet={img.srcset}
+                  sizes={img.sizes}
+                  alt={img.alt}
+                  className="block size-full object-cover object-center"
+                />
+              </AspectRatio>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <div className="mt-2 grid grid-cols-2 items-center justify-between px-4">
+        <ul
+          data-show-dots={images.length >= 6}
+          className="flex w-fit items-center data-[show-dots=false]:lg:hidden"
+        >
+          {images.map((_, index) => (
+            <li key={`product-detail-10-indicator-${index}`}>
+              <button
+                aria-current={index + 1 === current ? "true" : undefined}
+                data-state={index + 1 === current ? "active" : "inactive"}
+                onClick={() => api?.scrollTo(index)}
+                type="button"
+                className="group flex size-4 shrink-0"
+              >
+                <div className="m-auto size-2 rounded-full border border-primary group-data-[state=active]:bg-primary"></div>
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="flex w-fit items-center justify-self-end">
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => api?.scrollPrev()}
+            aria-label="اسلاید قبلی"
+          >
+            <ArrowRight />
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => api?.scrollNext()}
+            aria-label="اسلاید بعدی"
+          >
+            <ArrowLeft />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ProductInfoSection = ({ info }: ProductInfoSectionProps) => {
+  if (!info) return;
+
+  return (
+    <Accordion type="multiple" className="w-full">
+      {info.map((item, index) => (
+        <AccordionItem
+          value={`product-info-10-${index}`}
+          key={`product-detail-10-info-${index}`}
+        >
+          <AccordionTrigger className="text-sm font-normal text-foreground">
+            {item.title}
+          </AccordionTrigger>
+          <AccordionContent className="text-sm text-balance text-muted-foreground">
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+const Price = ({ regular, sale, currency }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+      {sale ? (
+        <div
+          data-sale={!!sale}
+          aria-label="قیمت با تخفیف"
+          className="text-base data-[sale=true]:text-foreground"
+        >
+          {formatCurrency(sale, currency)}
+        </div>
+      ) : null}
+      <div
+        data-sale={!!sale}
+        aria-label="قیمت اصلی"
+        className="text-base data-[sale=true]:font-normal data-[sale=true]:text-muted-foreground data-[sale=true]:line-through"
+      >
+        {formatCurrency(regular, currency)}
+      </div>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  material: z.string(),
+  color: z.string(),
+  size: z.string(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductForm) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      material: selected.material,
+      color: selected.color,
+      size: selected.size,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const materialHinges = hinges?.material;
+  const colorHinges = hinges?.color;
+  const sizeHinges = hinges?.size;
+
+  return (
+    <form
+      className="flex flex-col gap-8"
+      onSubmit={form.handleSubmit(onSubmit)}
+    >
+      {materialHinges && (
+        <Controller
+          control={form.control}
+          name={materialHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel asChild>
+                <h2>{materialHinges.label}:</h2>
+              </FieldLabel>
+              <OptionGroup
+                field={field}
+                options={materialHinges.options}
+                id={materialHinges.id}
+              />
+            </Field>
+          )}
+        />
+      )}
+      {colorHinges && (
+        <Controller
+          control={form.control}
+          name={colorHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel asChild>
+                <h2>{colorHinges.label}:</h2>
+              </FieldLabel>
+              <OptionGroup
+                field={field}
+                options={colorHinges.options}
+                id={colorHinges.id}
+              />
+            </Field>
+          )}
+        />
+      )}
+      {sizeHinges && (
+        <Controller
+          control={form.control}
+          name={sizeHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel asChild>
+                <h2>{sizeHinges.label}:</h2>
+              </FieldLabel>
+              <OptionGroup
+                field={field}
+                options={sizeHinges.options}
+                id={sizeHinges.id}
+              />
+            </Field>
+          )}
+        />
+      )}
+    </form>
+  );
+};
+
+const OptionGroup = ({ options, id, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap items-start gap-2"
+    >
+      {options &&
+        options.map((item, index) => (
+          <Field key={`product-detail-10-input-${id}-${index}`}>
+            <FieldLabel
+              htmlFor={item.id}
+              className="flex h-8 max-w-fit items-center justify-center rounded-md border border-muted bg-background px-3 text-xs font-normal shadow-xs has-checked:border-primary has-disabled:bg-muted has-disabled:text-muted-foreground"
+            >
+              <RadioGroupItem
+                id={item.id}
+                className="sr-only"
+                value={item.value}
+                aria-label={`انتخاب ${item.label}`}
+                disabled={item.stockInfo.stockStatusCode === "OUT_OF_STOCK"}
+              />
+              <div>{item.label}</div>
+            </FieldLabel>
+          </Field>
+        ))}
+    </RadioGroup>
+  );
+};
+
+export { ProductDetail10 };
diff --git a/blocks/product-detail2.tsx b/blocks/product-detail2.tsx
new file mode 100644
index 0000000..3f72f7b
--- /dev/null
+++ b/blocks/product-detail2.tsx
@@ -0,0 +1,842 @@
+"use client";
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { LucideIcon } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Heart,
+  Minus,
+  Plus,
+  Ruler,
+  Shirt,
+  Truck,
+  ZoomIn,
+} from "lucide-react";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge, badgeVariants } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useGoogleFont } from "@/hooks/use-google-font";
+import { cn } from "@/lib/utils";
+
+type StockStatusCode = "IN_STOCK" | "OUT_OF_STOCK";
+
+interface StockInfo {
+  stockStatusCode?: StockStatusCode;
+  stockQuantity?: number;
+}
+
+type option = {
+  id: string;
+  label: string;
+  value: string;
+  stockInfo: StockInfo;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  options?: option[];
+  min?: number;
+  max?: number;
+}
+
+interface QuantityProps {
+  field: ControllerRenderProps<FormType>;
+  max?: number;
+  min?: number;
+  id?: string;
+}
+
+interface ProductFormProps {
+  hinges?: Record<FieldName, Hinges>;
+  selected: FormType;
+}
+
+interface RadioGroupProps {
+  options?: Array<option>;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface PriceProps {
+  regular: number;
+  sale?: number;
+  currency: string;
+  text?: string;
+}
+
+interface ProductImagesProps {
+  images: Array<{
+    srcset: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    sizes: string;
+  }>;
+  galleryID: string;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+interface ProductInfoProps {
+  info: {
+    title: {
+      icon: LucideIcon;
+      text: string;
+    };
+    content: string;
+  }[];
+}
+
+const PRODUCT_DETAILS = {
+  name: "کیف مزون لیورا",
+  price: {
+    regular: 420000.0,
+    sale: 399000.0,
+    currency: "ریال",
+  },
+  color: "black",
+  material: "leather",
+  description:
+    "این کیف دستی مجسمه‌ای و نرم، ظرافت و کارایی را در یک قطعه یکپارچه جمع کرده است. با یک تنظیم ساده، از کیف دوشی به دستی یا کراس‌بادی تبدیل می‌شود. بند جداشدنی به شما اجازه می‌دهد هر طور که روزتان می‌خواهد حملش کنیدروی شانه، در دست یا به صورت کراس. جا برای وسایل روزانه مثل گوشی، کیف کارت، کلید و آینه جمع‌وجور کافی دارد. از چرم دانه‌درشت ممتاز ساخته شده و با یراق‌های طلایی مات تکمیل شده است. با بسته‌شدن مغناطیسی محافظت می‌شود و داخل آن جیب زیپ‌دار و محفظه لغزشی برای نظم بیشتر قرار دارد.",
+  hinges: {
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "green",
+          value: "green",
+          label: "سبز",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK",
+          },
+        },
+        {
+          id: "black",
+          value: "black",
+          label: "مشکی",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK",
+          },
+        },
+        {
+          id: "white",
+          value: "white",
+          label: "سفید",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        },
+        {
+          id: "red",
+          value: "red",
+          label: "قرمز",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        },
+      ],
+    },
+    material: {
+      label: "جنس",
+      id: "material",
+      name: "material",
+      options: [
+        {
+          id: "leather",
+          value: "leather",
+          label: "چرم",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK",
+          },
+        },
+        {
+          id: "polyester",
+          value: "polyester",
+          label: "پلی‌استر",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK",
+          },
+        },
+        {
+          id: "nylon",
+          value: "nylon",
+          label: "نایلون",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK",
+          },
+        },
+      ],
+    },
+    quantity: {
+      label: "تعداد",
+      id: "quantity",
+      name: "quantity",
+      min: 1,
+      max: 99,
+    },
+  } as Record<FieldName, Hinges>,
+  info: [
+    {
+      title: {
+        icon: Shirt,
+        text: "ترکیب ساخت",
+      },
+      content:
+        "از چرم دانه‌درشت ممتاز با سیلوئت ساخت‌یافته ساخته شده است. آستر داخلی از کتان نرم دوخته شده. با یراق‌های طلایی مات تزیین شده. شامل دو محفظه داخلی و یک جیب زیپ‌دار است. همراه با بند قابل تنظیم و جداشدنی برای حمل چندسبکه.",
+    },
+    {
+      title: {
+        icon: Truck,
+        text: "ارسال و مرجوعی",
+      },
+      content:
+        "از ارسال رایگان و مرجوعی آسان برای همه خریدها بهره‌مند شوید. سفارش‌ها معمولاً ظرف ۵ تا ۷ روز کاری ارسال می‌شوند.",
+    },
+    {
+      title: {
+        icon: Ruler,
+        text: "ابعاد کیف",
+      },
+      content:
+        "ارتفاع: ۲۱ سانتی‌متر × عرض: ۲۸ سانتی‌متر (۸٫۳ اینچ × ۱۱ اینچ)  به‌راحتی وسایل روزانه جا می‌شود.",
+    },
+    {
+      title: {
+        icon: Heart,
+        text: "راهنمای نگهداری",
+      },
+      content:
+        "با پارچه تمیز و نم‌دار به‌آرامی پاک کنید. از مواد شوینده قوی و قرار گرفتن مستقیم در آفتاب یا رطوبت خودداری کنید. هنگام استفاده نکردن در کیس محافظ ارائه‌شده نگه دارید.",
+    },
+  ],
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg 1086w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-2.jpg 1086w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-1.jpg 1086w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg",
+      alt: "کیف مزون لیورا",
+      width: 1086,
+      height: 1448,
+      sizes: "(min-width: 1086px) 1086px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png 1024w, /block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png 1024w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png",
+      alt: "کیف مزون لیورا",
+      width: 1024,
+      height: 1536,
+      sizes: "(min-width: 1024px) 1024px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png 1024w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-1.png 1024w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png",
+      alt: "کیف مزون لیورا",
+      width: 1024,
+      height: 1536,
+      sizes: "(min-width: 1024px) 1024px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 1023w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-1.png 1023w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png",
+      alt: "کیف مزون لیورا",
+      width: 1023,
+      height: 1537,
+      sizes: "(min-width: 1023px) 1023px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png 1024w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-1.png 1024w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png",
+      alt: "کیف مزون لیورا",
+      width: 1024,
+      height: 1536,
+      sizes: "(min-width: 1024px) 1024px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 1023w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-1.png 1023w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png",
+      alt: "کیف مزون لیورا",
+      width: 1023,
+      height: 1537,
+      sizes: "(min-width: 1023px) 1023px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png 1023w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-1.png 1023w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png",
+      alt: "کیف مزون لیورا",
+      width: 1023,
+      height: 1537,
+      sizes: "(min-width: 1023px) 1023px, 100vw",
+    },
+  ],
+};
+
+interface ProductDetail2Props {
+  className?: string;
+}
+
+const ProductDetail2 = ({ className }: ProductDetail2Props) => {
+  useGoogleFont("Assistant");
+  return (
+    <section
+      className={cn("bg-background py-32 font-sans", className)}
+      style={
+        {
+          "--font-sans": "Assistant",
+        } as React.CSSProperties
+      }
+    >
+      <div className="mx-auto w-full max-w-[75rem] px-4 md:px-12.5">
+        <div className="relative flex flex-col gap-4 md:flex-row md:gap-10">
+          <div className="basis-[65%]">
+            <ProductImages
+              images={PRODUCT_DETAILS.images}
+              galleryID="gallery-2"
+            />
+          </div>
+          <div className="basis-[35%]">
+            <div className="sticky top-12 flex flex-col gap-5">
+              <h1 className="text-3xl leading-tight md:text-[2.5rem]">
+                {PRODUCT_DETAILS.name}
+              </h1>
+              <div className="flex items-center gap-2.5">
+                <Price {...PRODUCT_DETAILS.price} />
+              </div>
+              <ProductForm
+                hinges={PRODUCT_DETAILS.hinges}
+                selected={{
+                  color: PRODUCT_DETAILS.color,
+                  material: PRODUCT_DETAILS.material,
+                  quantity: 1,
+                }}
+              />
+              <p className="text-base leading-loose text-muted-foreground">
+                {PRODUCT_DETAILS.description}
+              </p>
+              <ProductInfo info={PRODUCT_DETAILS.info} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductImages = ({ images, galleryID }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(1);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 end-5",
+          html: `
+            <button type="button" id="pswp-close" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+            </button>
+          `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 start-5",
+          html: `
+            <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+            </div>
+          `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+            let prevIndex = -1;
+
+            pswp.on("change", () => {
+              prevIndex = pswp.currIndex;
+              if (indicatorElem) {
+                indicatorElem.innerHTML = `${(prevIndex + 1).toLocaleString("fa-IR")} / ${pswp.getNumItems().toLocaleString("fa-IR")}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html: `
+          <div class="flex items-center justify-between px-4">
+            <button id="pswp-prev" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+            </button>
+            <button id="pswp-next" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+          </div>
+            
+          `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+          },
+        });
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+    setCurrent(api.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  if (!images) return;
+
+  return (
+    <div className="flex flex-col gap-3" id={galleryID}>
+      <Carousel
+        setApi={setApi}
+        opts={{
+          breakpoints: {
+            "(min-width: 768px)": {
+              active: false,
+            },
+          },
+        }}
+      >
+        <CarouselContent className="gap-2 md:m-0 md:grid md:grid-cols-2">
+          {images.map((img, index) => (
+            <CarouselItem
+              className="first:col-span-2 md:p-0"
+              key={`product-detail-2-image-${index}`}
+            >
+              <AspectRatio ratio={1} className="overflow-hidden">
+                <a
+                  href={img.src}
+                  data-pswp-width={img.width}
+                  data-pswp-height={img.height}
+                  target="_blank"
+                  rel="noreferrer"
+                  data-cropped="true"
+                  className="hover:cursor-zoom-in"
+                >
+                  <img
+                    src={img.src}
+                    alt={img.alt}
+                    className="block size-full object-cover object-center"
+                  />
+                  <Badge
+                    className="pointer-events-none absolute top-3 start-3 size-8 rounded-full bg-background p-1.5 text-xs shadow md:hidden"
+                    variant="secondary"
+                  >
+                    <ZoomIn className="!size-3.5 stroke-muted-foreground" />
+                  </Badge>
+                </a>
+              </AspectRatio>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <div className="flex items-center justify-center gap-2.5 md:hidden">
+        <Button
+          disabled={!canScrollPrev}
+          size="icon"
+          variant="ghost"
+          onClick={() => api?.scrollPrev()}
+        >
+          <ChevronLeft className="size-3 stroke-1 rtl:rotate-180" />
+        </Button>
+        <p className="text-xs text-muted-foreground">
+          {current.toLocaleString("fa-IR")}/{images.length.toLocaleString("fa-IR")}
+        </p>
+        <Button
+          disabled={!canScrollNext}
+          size="icon"
+          variant="ghost"
+          onClick={() => api?.scrollNext()}
+        >
+          <ChevronRight className="size-3 stroke-1 rtl:rotate-180" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const Price = ({ regular, sale, currency }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div className="flex items-start gap-2">
+      {sale && (
+        <div
+          data-sale={!!sale}
+          aria-label="قیمت با تخفیف"
+          className="text-xl leading-tight text-primary"
+        >
+          {formatCurrency(sale, currency)}
+        </div>
+      )}
+      <div
+        data-sale={!!sale}
+        aria-label="قیمت اصلی"
+        className="text-xl leading-tight data-[sale=true]:text-xl data-[sale=true]:text-muted-foreground data-[sale=true]:line-through"
+      >
+        {formatCurrency(regular, currency)}
+      </div>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+  quantity: z.number().min(1),
+  material: z.string(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      quantity: selected.quantity,
+      color: selected.color,
+      material: selected.material,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const colorHinges = hinges?.color;
+  const materialHinges = hinges?.material;
+  const quantityHinges = hinges?.quantity;
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col gap-6"
+    >
+      {colorHinges && (
+        <Controller
+          control={form.control}
+          name={colorHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel
+                asChild
+                className="text-sm leading-normal text-muted-foreground"
+              >
+                <h2>{colorHinges.label}</h2>
+              </FieldLabel>
+              <ColorRadioGroup field={field} options={colorHinges.options} />
+            </Field>
+          )}
+        />
+      )}
+
+      {materialHinges && (
+        <Controller
+          control={form.control}
+          name={materialHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel
+                asChild
+                className="text-sm leading-normal text-muted-foreground"
+              >
+                <h2>{materialHinges.label}</h2>
+              </FieldLabel>
+              <MaterialRadioGroup
+                field={field}
+                options={materialHinges.options}
+              />
+            </Field>
+          )}
+        />
+      )}
+
+      {quantityHinges && (
+        <Controller
+          control={form.control}
+          name={quantityHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel
+                htmlFor={quantityHinges.id}
+                className="text-sm leading-normal text-muted-foreground"
+              >
+                {quantityHinges.label}
+              </FieldLabel>
+              <Quantity
+                field={field}
+                min={quantityHinges.min}
+                max={quantityHinges.max}
+                id={quantityHinges.id}
+              />
+            </Field>
+          )}
+        />
+      )}
+
+      <div className="flex flex-col gap-2.5">
+        <Button size="lg" variant="outline">
+          افزودن به سبد
+        </Button>
+        <Button size="lg">خرید</Button>
+      </div>
+    </form>
+  );
+};
+
+const Quantity = ({ field, max, min, id }: QuantityProps) => {
+  return (
+    <div className="flex h-9 w-31 items-center justify-between overflow-hidden rounded-md border shadow-xs">
+      <Button
+        onClick={() =>
+          field.onChange(Math.max(min || 1, Number(field.value || 1) - 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Minus className="stroke-muted-foreground" />
+      </Button>
+      <Input
+        {...field}
+        value={field.value ?? ""}
+        onChange={(e) => {
+          const raw = e.target.value;
+          const parsed = parseInt(raw, 10);
+
+          // Accept empty string for typing, but validate if not a number
+          if (raw === "") {
+            field.onChange("");
+          } else if (!isNaN(parsed)) {
+            field.onChange(parsed);
+          }
+        }}
+        type="number"
+        id={id}
+        min={Math.max(min ?? 1, 1)}
+        max={max ?? 99}
+        className="h-full w-full flex-1 [appearance:textfield] rounded-none border-0 !bg-background px-1 text-center shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <Button
+        onClick={() =>
+          field.onChange(Math.min(max || 99, Number(field.value || 1) + 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Plus className="stroke-muted-foreground" />
+      </Button>
+    </div>
+  );
+};
+
+const ColorRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap items-start gap-4"
+    >
+      {options.map((item, index) => (
+        <div className="basis-20" key={`product-detail-2-size-input-${index}`}>
+          <label
+            htmlFor={item.id}
+            className="flex h-8 items-center justify-center rounded-md border-1 border-primary px-3 text-sm leading-snug font-normal has-checked:bg-primary has-checked:text-primary-foreground has-data-[disabled=true]:border-border has-data-[disabled=true]:text-muted-foreground has-data-[disabled=true]:line-through"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              aria-label={`انتخاب ${item.label}`}
+              data-disabled={item.stockInfo.stockStatusCode === "OUT_OF_STOCK"}
+            />
+            <span>{item.label}</span>
+          </label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const MaterialRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap items-start gap-4"
+    >
+      {options.map((item, index) => (
+        <div key={`product-detail-2-material-input-${index}`}>
+          <label
+            htmlFor={item.id}
+            className="flex h-8 items-center justify-center rounded-md border-1 border-primary px-3 text-sm leading-snug font-normal has-checked:bg-primary has-checked:text-primary-foreground has-data-[disabled=true]:border-border has-data-[disabled=true]:text-muted-foreground has-data-[disabled=true]:line-through"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              data-disabled={item.stockInfo.stockStatusCode === "OUT_OF_STOCK"}
+            />
+            <span>{item.label}</span>
+          </label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const ProductInfo = ({ info }: ProductInfoProps) => {
+  if (!info) return;
+  return (
+    <Accordion type="multiple" className="w-full">
+      {info.map((item, index) => (
+        <AccordionItem
+          key={`product-detail-2-info-${index}`}
+          value={`item-${index}`}
+        >
+          <AccordionTrigger>
+            <div className="text-base">{item.title.text}</div>
+          </AccordionTrigger>
+          <AccordionContent className="flex flex-col gap-4 text-balance">
+            <p className="text-base leading-loose text-muted-foreground">
+              {item.content}
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+export { ProductDetail2 };
diff --git a/blocks/product-detail3.tsx b/blocks/product-detail3.tsx
new file mode 100644
index 0000000..343b111
--- /dev/null
+++ b/blocks/product-detail3.tsx
@@ -0,0 +1,671 @@
+"use client";
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Minus, Plus } from "lucide-react";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { badgeVariants } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+interface ProductImagesProps {
+  images: Array<{
+    srcset: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    sizes: string;
+  }>;
+  galleryID: string;
+}
+
+interface PriceProps {
+  regular: number;
+  currency: string;
+}
+
+type option = {
+  id: string;
+  label: string;
+  value: string;
+  color?: string;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  options?: option[];
+  min?: number;
+  max?: number;
+}
+
+interface ProductFormProps {
+  hinges?: Record<FieldName, Hinges>;
+  selected?: FormType;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+interface RadioGroupProps {
+  options?: Array<option>;
+  id: string;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface QuantityProps {
+  field: ControllerRenderProps<FormType>;
+  max?: number;
+  min?: number;
+}
+
+const PRODUCT_DETAILS = {
+  name: "۱۱۱ جاکت شهری راحت",
+  price: {
+    regular: 499000.0,
+    currency: "ریال",
+  },
+  color: "blue",
+  size: "xs",
+  description:
+    "این ژاکت پف‌دار دنیمی گرما و استایل خیابانی را در هم می‌آمیزد و با طیف‌های آبی هماهنگ، ظاهری متمایز، جسورانه و در عین حال همه‌کاره خلق می‌کند. برای راحتی در هر فصلی طراحی شده است.",
+  hinges: {
+    quantity: {
+      label: "تعداد",
+      id: "quantity",
+      name: "quantity",
+      min: 1,
+      max: 99,
+    },
+    size: {
+      label: "سایز",
+      id: "size",
+      name: "size",
+      options: [
+        {
+          id: "xs",
+          label: "xs",
+          value: "xs",
+        },
+        {
+          id: "s",
+          label: "s",
+          value: "s",
+        },
+        {
+          id: "m",
+          label: "m",
+          value: "m",
+        },
+        {
+          id: "l",
+          label: "l",
+          value: "l",
+        },
+        {
+          id: "xl",
+          label: "xl",
+          value: "xl",
+        },
+      ],
+    },
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "blue",
+          value: "blue",
+          label: "آبی",
+          color: "#0000FF",
+        },
+        {
+          id: "black",
+          value: "black",
+          label: "مشکی",
+          color: "#000000",
+        },
+        {
+          id: "red",
+          value: "red",
+          label: "قرمز",
+          color: "#FF0000",
+        },
+      ],
+    },
+  } as Record<FieldName, Hinges>,
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764033-3.jpg 1086w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764033-2.jpg 1086w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764033-3.jpg",
+      alt: "جاکت شهری راحت",
+      width: 1086,
+      height: 1448,
+      sizes: "(min-width: 1086px) 1086px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png 904w, /block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-1.png 482w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
+      alt: "جاکت شهری راحت",
+      width: 904,
+      height: 1200,
+      sizes: "(min-width: 904px) 904px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-1.png 360w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-2.png",
+      alt: "جاکت شهری راحت",
+      width: 675,
+      height: 1200,
+      sizes: "(min-width: 675px) 675px, 100vw",
+    },
+  ],
+};
+
+interface ProductDetail3Props {
+  className?: string;
+}
+
+const ProductDetail3 = ({ className }: ProductDetail3Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[minmax(0,1fr)_minmax(0,26.5rem)]">
+          <div>
+            <ProductImages
+              images={PRODUCT_DETAILS.images}
+              galleryID="gallery-3"
+            />
+          </div>
+          <div>
+            <div className="sticky top-0 p-6 lg:p-12">
+              <div className="flex flex-col gap-6">
+                <div className="flex flex-col gap-3">
+                  <h1 className="text-3xl leading-tight font-bold uppercase">
+                    {PRODUCT_DETAILS.name}
+                  </h1>
+                  <Price {...PRODUCT_DETAILS.price} />
+                </div>
+                <ProductForm
+                  hinges={PRODUCT_DETAILS.hinges}
+                  selected={{
+                    color: PRODUCT_DETAILS.color,
+                    size: PRODUCT_DETAILS.size,
+                    quantity: 1,
+                  }}
+                />
+                <p className="text-sm leading-normal text-muted-foreground">
+                  {PRODUCT_DETAILS.description}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductImages = ({ images, galleryID }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(1);
+
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 end-5",
+          html: `
+              <button type="button" id="pswp-close" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+              </button>
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 start-5",
+          html: `
+              <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+              </div>
+            `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+            let prevIndex = -1;
+
+            pswp.on("change", () => {
+              prevIndex = pswp.currIndex;
+              if (indicatorElem) {
+                indicatorElem.innerHTML = `${(prevIndex + 1).toLocaleString("fa-IR")} / ${pswp.getNumItems().toLocaleString("fa-IR")}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html: `
+            <div class="flex items-center justify-between px-4">
+              <button id="pswp-prev" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              </button>
+              <button id="pswp-next" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </button>
+            </div>
+              
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+          },
+        });
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  if (!images) return;
+
+  return (
+    <div id={galleryID} className="flex flex-col gap-5">
+      <Carousel
+        setApi={setApi}
+        opts={{
+          breakpoints: {
+            "(min-width: 768px)": {
+              active: false,
+            },
+          },
+        }}
+        className="w-full"
+      >
+        <CarouselContent className="ms-0 grid-cols-2 md:grid">
+          {images.map((img, index) => (
+            <CarouselItem
+              className="ps-0 md:first:col-span-2"
+              key={`product-detail-3-image-${index}`}
+            >
+              <AspectRatio ratio={0.8} className="overflow-hidden">
+                <a
+                  href={img.src}
+                  data-pswp-width={img.width}
+                  data-pswp-height={img.height}
+                  data-pswp-srcset={img.srcset}
+                  target="_blank"
+                  rel="noreferrer"
+                  data-cropped="true"
+                >
+                  <img
+                    srcSet={img.srcset}
+                    alt={img.alt}
+                    sizes={img.sizes}
+                    className="block size-full object-cover object-center"
+                  />
+                </a>
+              </AspectRatio>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <div className="absolute bottom-0 inset-x-0 md:hidden">
+          <ol className="my-3 flex items-center justify-center">
+            {images.map((_, index) => (
+              <button
+                onClick={() => api?.scrollTo(index)}
+                data-current={index + 1 === current}
+                key={`product-detail-3-image-indicator-${index}`}
+                className="flex size-4 data-[current=true]:[&>span]:bg-primary"
+              >
+                <span className="m-auto block size-2 rounded-full bg-primary/50"></span>
+              </button>
+            ))}
+          </ol>
+        </div>
+      </Carousel>
+    </div>
+  );
+};
+
+const Price = ({ regular, currency }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div aria-label="قیمت اصلی" className="text-sm leading-normal">
+      {formatCurrency(regular, currency)}
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+  quantity: z.number().min(1),
+  size: z.string(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      quantity: 1,
+      size: selected?.size,
+      color: selected?.color,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const quantityHinges = hinges?.quantity;
+  const sizeHinges = hinges?.size;
+  const colorHinges = hinges?.color;
+
+  const currentColorId = form.watch("color");
+  const currentColor = useMemo(
+    () =>
+      colorHinges?.options?.find((item) => item.value === currentColorId)
+        ?.label ?? "",
+    [currentColorId, colorHinges],
+  );
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col gap-6"
+    >
+      {colorHinges && (
+        <Controller
+          control={form.control}
+          name={colorHinges.name}
+          render={({ field }) => (
+            <Field className="gap-2">
+              <FieldLabel
+                className="text-sm leading-normal font-normal"
+                asChild
+              >
+                <p>
+                  {colorHinges.label}: {currentColor}
+                </p>
+              </FieldLabel>
+              <ColorRadioGroup
+                field={field}
+                options={colorHinges.options}
+                id={colorHinges.id}
+              />
+            </Field>
+          )}
+        />
+      )}
+      {sizeHinges && (
+        <Controller
+          control={form.control}
+          name={sizeHinges.name}
+          render={({ field }) => (
+            <Field className="gap-2">
+              <FieldLabel
+                className="text-sm leading-normal font-normal"
+                asChild
+              >
+                <p>{sizeHinges.label}</p>
+              </FieldLabel>
+              <SizeRadioGroup
+                field={field}
+                options={sizeHinges.options}
+                id={sizeHinges.id}
+              />
+            </Field>
+          )}
+        />
+      )}
+      <div className="flex flex-wrap items-center gap-3">
+        {quantityHinges && (
+          <Controller
+            control={form.control}
+            name={quantityHinges.name}
+            render={({ field }) => (
+              <Field>
+                <Quantity
+                  field={field}
+                  min={quantityHinges?.min}
+                  max={quantityHinges?.max}
+                />
+              </Field>
+            )}
+          />
+        )}
+        <Button className="flex-1" variant="secondary">
+          افزودن به سبد
+        </Button>
+        <Button className="flex-1">خرید فوری</Button>
+      </div>
+    </form>
+  );
+};
+
+const ColorRadioGroup = ({ options, id, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      id={id}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap items-center gap-2 !shadow-none"
+    >
+      {options.map((item, index) => (
+        <div key={`product-detail-3-color-input-${index}`}>
+          <label
+            htmlFor={item.id}
+            className="flex size-5.5 cursor-pointer items-center justify-center overflow-hidden ring-primary duration-400 has-checked:ring"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              aria-label={`انتخاب ${item.label}`}
+            />
+            <div
+              style={{
+                backgroundColor: item.color,
+              }}
+              className="size-4.5"
+            ></div>
+          </label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const SizeRadioGroup = ({ options, id, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      id={id}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap items-center gap-2"
+    >
+      {options.map((item, index) => (
+        <div key={`product-detail-3-size-input-${index}`}>
+          <label
+            htmlFor={item.id}
+            className="flex h-9 min-w-28 cursor-pointer items-center justify-center overflow-hidden rounded-md border px-3 py-1 text-sm uppercase shadow-xs duration-400 has-checked:bg-primary has-checked:text-primary-foreground lg:min-w-40"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              aria-label={`انتخاب ${item.label}`}
+            />
+            <div className="text-center">{item.label}</div>
+          </label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const Quantity = ({ field, max, min }: QuantityProps) => {
+  return (
+    <div className="flex h-9 w-full max-w-40 min-w-28 items-center justify-between overflow-hidden rounded-md border shadow-xs">
+      <Button
+        onClick={() =>
+          field.onChange(Math.max(min || 1, Number(field.value || 1) - 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Minus />
+      </Button>
+      <Input
+        {...field}
+        value={field.value ?? ""}
+        onChange={(e) => {
+          const raw = e.target.value;
+          const parsed = parseInt(raw, 10);
+
+          // Accept empty string for typing, but validate if not a number
+          if (raw === "") {
+            field.onChange("");
+          } else if (!isNaN(parsed)) {
+            field.onChange(parsed);
+          }
+        }}
+        type="number"
+        min={min ? min : 1}
+        max={max ? max : 99}
+        className="h-full w-full flex-1 [appearance:textfield] rounded-none border-0 px-1 text-center shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <Button
+        onClick={() =>
+          field.onChange(Math.min(max || 99, Number(field.value || 1) + 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Plus />
+      </Button>
+    </div>
+  );
+};
+
+export { ProductDetail3 };
diff --git a/blocks/product-detail4.tsx b/blocks/product-detail4.tsx
new file mode 100644
index 0000000..fa1b219
--- /dev/null
+++ b/blocks/product-detail4.tsx
@@ -0,0 +1,768 @@
+"use client";
+
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Star, StarHalf } from "lucide-react";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { badgeVariants } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type option = {
+  id: string;
+  label: string;
+  value: string;
+  color?: string;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  options?: option[];
+  min?: number;
+  max?: number;
+}
+
+interface ProductImagesProps {
+  images: Array<{
+    srcset: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    sizes: string;
+    thumbnail: string;
+  }>;
+  galleryID: string;
+}
+
+interface PriceProps {
+  regular: number;
+  currency: string;
+}
+
+interface ReviewsProps {
+  rate: number;
+}
+
+interface ProductFormProps {
+  hinges?: Record<FieldName, Hinges>;
+  selected: FormType;
+  children?: ReactNode;
+}
+
+interface RadioGroupProps {
+  options?: Array<option>;
+  field: ControllerRenderProps<FormType>;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+interface ProductInfoProps {
+  info: {
+    title: string;
+    content: string;
+  }[];
+}
+
+const MAX_STARS = 5;
+
+const PRODUCT_DETAILS = {
+  name: "کیف مزون لیورا",
+  price: {
+    regular: 420000.0,
+    currency: "ریال",
+  },
+  color: "rosewood",
+  reviews: {
+    rate: 3.5,
+  },
+  description:
+    "این کیف دستی مجسمه‌ای و نرم، ظرافت و کارایی را در یک قطعه یکپارچه جمع کرده است. با یک تنظیم ساده، از کیف دوشی به دستی یا کراس‌بادی تبدیل می‌شود. بند جداشدنی به شما اجازه می‌دهد هر طور که روزتان می‌خواهد حملش کنیدروی شانه، در دست یا به صورت کراس. جا برای وسایل روزانه مثل گوشی، کیف کارت، کلید و آینه جمع‌وجور کافی دارد. از چرم دانه‌درشت ممتاز ساخته شده و با یراق‌های طلایی مات تکمیل شده است. با بسته‌شدن مغناطیسی محافظت می‌شود و داخل آن جیب زیپ‌دار و محفظه لغزشی برای نظم بیشتر قرار دارد.",
+  hinges: {
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "charcoal",
+          value: "charcoal",
+          label: "زغالی",
+          color: "#333333",
+        },
+        {
+          id: "sage",
+          value: "sage",
+          label: "سبز مریم‌گلی",
+          color: "#B2C3B2",
+        },
+        {
+          id: "rosewood",
+          value: "rosewood",
+          label: "صورتی ملایم",
+          color: "#B76E79",
+        },
+      ],
+    },
+  } as Record<FieldName, Hinges>,
+  info: [
+    {
+      title: "ترکیب ساخت",
+      content:
+        "از چرم دانه‌درشت ممتاز با سیلوئت ساخت‌یافته ساخته شده است. آستر داخلی از کتان نرم دوخته شده. با یراق‌های طلایی مات تزیین شده. شامل دو محفظه داخلی و یک جیب زیپ‌دار است. همراه با بند قابل تنظیم و جداشدنی برای حمل چندسبکه.",
+    },
+    {
+      title: "ارسال و مرجوعی",
+      content:
+        "از ارسال رایگان و مرجوعی آسان برای همه خریدها بهره‌مند شوید. سفارش‌ها معمولاً ظرف ۵ تا ۷ روز کاری ارسال می‌شوند.",
+    },
+    {
+      title: "ابعاد کیف",
+      content:
+        "ارتفاع: ۲۱ سانتی‌متر × عرض: ۲۸ سانتی‌متر (۸٫۳ اینچ × ۱۱ اینچ)  به‌راحتی وسایل روزانه جا می‌شود.",
+    },
+    {
+      title: "راهنمای نگهداری",
+      content:
+        "با پارچه تمیز و نم‌دار به‌آرامی پاک کنید. از مواد شوینده قوی و قرار گرفتن مستقیم در آفتاب یا رطوبت خودداری کنید. هنگام استفاده نکردن در کیس محافظ ارائه‌شده نگه دارید.",
+    },
+  ],
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 427w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png",
+      alt: "کیف مزون لیورا",
+      width: 800,
+      height: 1200,
+      sizes: "(min-width: 800px) 800px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png 427w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png",
+      alt: "کیف مزون لیورا",
+      width: 800,
+      height: 1200,
+      sizes: "(min-width: 800px) 800px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-1.png 427w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-1.png",
+      alt: "کیف مزون لیورا",
+      width: 800,
+      height: 1200,
+      sizes: "(min-width: 800px) 800px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-1.png 427w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-1.png",
+      alt: "کیف مزون لیورا",
+      width: 800,
+      height: 1200,
+      sizes: "(min-width: 800px) 800px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-1.png 800w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-1.png",
+      alt: "کیف مزون لیورا",
+      width: 800,
+      height: 1200,
+      sizes: "(min-width: 800px) 800px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 800w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-1.png",
+      alt: "کیف مزون لیورا",
+      width: 800,
+      height: 1200,
+      sizes: "(min-width: 800px) 800px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-1.png 800w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-1.png",
+      alt: "کیف مزون لیورا",
+      width: 800,
+      height: 1200,
+      sizes: "(min-width: 800px) 800px, 100vw",
+    },
+  ],
+};
+
+interface ProductDetail4Props {
+  className?: string;
+}
+
+const ProductDetail4 = ({ className }: ProductDetail4Props) => {
+  return (
+    <section className={cn("bg-muted py-32", className)}>
+      <div className="mx-auto w-full max-w-[1340px] lg:px-10">
+        <div className="grid grid-cols-1 gap-7.5 lg:grid-cols-[minmax(0,1fr)_minmax(0,26.25rem)] lg:gap-14 xl:gap-20">
+          <div>
+            <ProductImages
+              images={PRODUCT_DETAILS.images}
+              galleryID="gallery-4"
+            />
+          </div>
+
+          <div className="px-5">
+            <div className="sticky top-5">
+              <div className="flex flex-col gap-2">
+                <h1 className="font-instrument-sans text-xl leading-normal tracking-wider uppercase">
+                  {PRODUCT_DETAILS.name}
+                </h1>
+                <div className="flex items-center justify-between gap-2">
+                  <Price {...PRODUCT_DETAILS.price} />
+                  <Reviews rate={PRODUCT_DETAILS.reviews.rate} />
+                </div>
+              </div>
+              <Separator className="my-6" />
+              <ProductForm
+                hinges={PRODUCT_DETAILS.hinges}
+                selected={{
+                  color: PRODUCT_DETAILS.color,
+                }}
+              >
+                <p className="text-sm leading-normal text-muted-foreground">
+                  {PRODUCT_DETAILS.description}
+                </p>
+              </ProductForm>
+              <div className="mt-8">
+                <ProductInfo info={PRODUCT_DETAILS.info} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductImages = ({ images, galleryID }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const ignoreScroll = useRef(false);
+  const isDesktop = useMediaQuery("(width >= 1024px)");
+  const slideHeightRef = useRef<number | null>(null);
+
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 end-5",
+          html: `
+              <button type="button" id="pswp-close" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+              </button>
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 start-5",
+          html: `
+              <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+              </div>
+            `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+            let prevIndex = -1;
+
+            pswp.on("change", () => {
+              prevIndex = pswp.currIndex;
+              if (indicatorElem) {
+                indicatorElem.innerHTML = `${(prevIndex + 1).toLocaleString("fa-IR")} / ${pswp.getNumItems().toLocaleString("fa-IR")}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html: `
+            <div class="flex items-center justify-between px-4">
+              <button id="pswp-prev" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              </button>
+              <button id="pswp-next" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </button>
+            </div>
+              
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+          },
+        });
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  useEffect(() => {
+    if (!api || !isDesktop) return;
+
+    const slides = api.slideNodes();
+    if (slides.length === 0) return;
+
+    slideHeightRef.current = slides[0].offsetHeight;
+
+    let lastIndex = -1;
+    let ticking = false;
+
+    const updateCurrentIndex = () => {
+      if (!slideHeightRef.current) return;
+      const scrollTop = window.scrollY;
+      const slideHeight = slideHeightRef.current;
+      const index = Math.round(scrollTop / slideHeight);
+
+      if (index !== lastIndex) {
+        lastIndex = index;
+        setCurrent(index);
+      }
+    };
+
+    const onScroll = () => {
+      if (ignoreScroll.current || ticking) return;
+
+      ticking = true;
+      requestAnimationFrame(() => {
+        updateCurrentIndex();
+        ticking = false;
+      });
+    };
+
+    const onResize = () => {
+      const newHeight = slides[0].offsetHeight;
+      slideHeightRef.current = newHeight;
+      updateCurrentIndex();
+    };
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [api, isDesktop, setCurrent]);
+
+  const handleThumbnailClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const target = e.currentTarget;
+    const index = Number(target.getAttribute("data-index"));
+
+    const slides = api?.slideNodes();
+
+    if (slides && index >= 0 && index < slides.length) {
+      const offsetTop =
+        slides[index].getBoundingClientRect().top + window.scrollY;
+      const headerOffset = 80;
+      ignoreScroll.current = true;
+      window.scrollTo({
+        top: offsetTop - headerOffset,
+        behavior: "smooth",
+      });
+      setCurrent(index);
+
+      setTimeout(() => {
+        ignoreScroll.current = false;
+      }, 500);
+    }
+  };
+
+  if (!images) return;
+
+  return (
+    <div id={galleryID} className="relative flex gap-20">
+      <div className="sticky top-5 hidden self-start lg:block">
+        <ol className="flex max-h-[calc(100dvh-2.5rem)] w-fit flex-col gap-4 overflow-y-auto p-px [-ms-overflow-style:none] [scrollbar-width:none] [::-webkit-scrollbar]:hidden">
+          {images.map((img, index) => (
+            <li
+              className="w-14 shrink-0 grow-0"
+              key={`product-detail-4-image-thumbnail-${index}`}
+            >
+              <button
+                data-state={index === current ? "active" : "inactive"}
+                data-index={index}
+                type="button"
+                onClick={handleThumbnailClick}
+                className="block aspect-square w-14 overflow-hidden ring-foreground transition-shadow duration-200 data-[state=active]:ring"
+              >
+                <img
+                  src={img.thumbnail}
+                  alt={img.alt}
+                  className="block size-full object-cover object-center"
+                />
+              </button>
+            </li>
+          ))}
+        </ol>
+      </div>
+      <Carousel
+        setApi={setApi}
+        opts={{
+          breakpoints: {
+            "(min-width: 1024px)": {
+              active: false,
+            },
+          },
+        }}
+        className="w-full"
+      >
+        <CarouselContent className="-ms-5 md:-ms-6 lg:ms-0 lg:flex-col">
+          {images.map((img, index) => (
+            <CarouselItem
+              className="ps-5 md:ps-6 lg:ps-0"
+              key={`product-detail-4-image-${index}`}
+            >
+              <AspectRatio ratio={1} className="size-full overflow-hidden">
+                <a
+                  href={img.src}
+                  data-pswp-width={img.width}
+                  data-pswp-height={img.height}
+                  data-pswp-srcset={img.srcset}
+                  target="_blank"
+                  rel="noreferrer"
+                  data-cropped="true"
+                >
+                  <img
+                    srcSet={img.srcset}
+                    alt={img.alt}
+                    sizes={img.sizes}
+                    className="block size-full object-cover object-center"
+                  />
+                </a>
+              </AspectRatio>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <div className="lg:hidden">
+          <ol className="mt-4 flex items-center justify-center">
+            {images.map((_, index) => (
+              <button
+                onClick={() => api?.scrollTo(index)}
+                data-current={index + 1 === current}
+                key={`product-detail-4-image-indicator-${index}`}
+                className="flex size-5.5 data-[current=true]:[&>span]:bg-primary"
+              >
+                <span className="m-auto block size-1.5 rounded-full bg-primary/50"></span>
+              </button>
+            ))}
+          </ol>
+        </div>
+      </Carousel>
+    </div>
+  );
+};
+
+const Price = ({ regular, currency }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div
+      aria-label="قیمت اصلی"
+      className="text-lg leading-relaxed text-muted-foreground"
+    >
+      {formatCurrency(regular, currency)}
+    </div>
+  );
+};
+
+const Reviews = ({ rate }: ReviewsProps) => {
+  const renderStars = () => {
+    const fullStars = Math.floor(rate);
+    const hasHalfStar = rate % 1 >= 0.5;
+    const emptyStars = MAX_STARS - fullStars - (hasHalfStar ? 1 : 0);
+
+    const stars = [];
+
+    for (let i = 0; i < fullStars; i++) {
+      stars.push(
+        <Star
+          key={`product-detail-4-star-full-${i}`}
+          className="size-3 fill-black stroke-black dark:invert"
+        />,
+      );
+    }
+
+    if (hasHalfStar) {
+      stars.push(
+        <div key="product-detail-4-half-star" className="relative size-3">
+          <StarHalf className="absolute top-0 end-0 size-full fill-black stroke-black dark:invert" />
+          <StarHalf className="absolute top-0 start-0 size-full -scale-x-100 fill-black/15 stroke-black/15 dark:invert" />
+        </div>,
+      );
+    }
+
+    for (let i = 0; i < emptyStars; i++) {
+      stars.push(
+        <Star
+          key={`product-detail-4-star-empty-${i}`}
+          className="size-3 fill-black/15 stroke-black/15 dark:invert"
+        />,
+      );
+    }
+
+    return stars;
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="flex items-center gap-1">{renderStars()}</div>
+      <div className="text-xs text-muted-foreground">
+        ({rate.toLocaleString("fa-IR")})
+      </div>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+});
+
+const ProductForm = ({ hinges, selected, children }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: selected?.color,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const colorHinges = hinges?.color;
+  const currentColorId = form.watch("color");
+  const currentColor = useMemo(
+    () =>
+      colorHinges?.options?.find((item) => item.value === currentColorId)
+        ?.label ?? "",
+    [currentColorId, colorHinges],
+  );
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col gap-6"
+    >
+      {colorHinges && (
+        <Controller
+          control={form.control}
+          name={colorHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel
+                className="text-sm leading-normal font-normal"
+                asChild
+              >
+                <p className="text-muted-foreground">
+                  {colorHinges.label}:{" "}
+                  <span className="text-foreground">{currentColor}</span>
+                </p>
+              </FieldLabel>
+              <ColorRadioGroup field={field} options={colorHinges.options} />
+            </Field>
+          )}
+        />
+      )}
+      {children}
+      <div className="flex flex-col gap-4">
+        <Button variant="outline">افزودن به سبد</Button>
+        <Button>خرید فوری</Button>
+      </div>
+    </form>
+  );
+};
+
+const ColorRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex flex-wrap items-center gap-2"
+    >
+      {options.map((item, index) => (
+        <div key={`product-detail-4-color-input-${index}`}>
+          <label
+            htmlFor={item.id}
+            className="flex size-8.5 cursor-pointer items-center justify-center overflow-hidden ring-primary duration-400 has-checked:ring"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              aria-label={`انتخاب ${item.label}`}
+            />
+            <div
+              style={{
+                backgroundColor: item.color,
+              }}
+              className="size-7.5"
+            ></div>
+          </label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const ProductInfo = ({ info }: ProductInfoProps) => {
+  if (!info) return;
+  return (
+    <Accordion type="multiple" className="w-full">
+      {info.map((item, index) => (
+        <AccordionItem
+          key={`product-detail-4-info-${index}`}
+          value={`item-${index}`}
+        >
+          <AccordionTrigger className="text-base text-muted-foreground uppercase">
+            {item.title}
+          </AccordionTrigger>
+          <AccordionContent className="flex flex-col gap-4 text-balance">
+            <p className="text-sm leading-normal text-muted-foreground">
+              {item.content}
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+export { ProductDetail4 };
diff --git a/blocks/product-detail5.tsx b/blocks/product-detail5.tsx
new file mode 100644
index 0000000..142a140
--- /dev/null
+++ b/blocks/product-detail5.tsx
@@ -0,0 +1,804 @@
+"use client";
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Ruler, ZoomIn } from "lucide-react";
+import type { PhotoSwipe } from "photoswipe/lightbox";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type StockStatusCode = "IN_STOCK" | "LOW_STOCK" | "OUT_OF_STOCK";
+
+interface StockInfo {
+  stockStatusCode: StockStatusCode;
+  stockQuantity?: number;
+}
+
+interface StockMessageProps {
+  stockInfo?: StockInfo;
+}
+
+type sizeChartData = Array<{
+  label: string;
+  usa: string;
+  uk: string;
+  europe: string;
+}>;
+
+type Option = {
+  id: string;
+  label: string;
+  stockInfo: StockInfo;
+  value: string;
+};
+
+interface Hinges {
+  label: string;
+  name: FieldName;
+  id: string;
+  sizeChart?: sizeChartData;
+  options?: Option[];
+}
+
+interface RadioGroupProps {
+  options?: Array<Option>;
+  id: string;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface PriceProps {
+  regular: number;
+  sale?: number;
+  currency: string;
+  text?: string;
+}
+
+interface SizeChartProps {
+  data?: sizeChartData;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+interface ProductForm {
+  hinges: Record<FieldName, Hinges>;
+  selected: FormType;
+}
+
+interface ProductImagesProps {
+  images: Array<{
+    srcset: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    sizes: string;
+    thumbnail: string;
+  }>;
+  galleryID: string;
+}
+
+const PRODUCT_DETAILS = {
+  id: "1",
+  name: "پیراهن گلدوزی اسب داکوتا وسترن",
+  description:
+    "پیراهن دکمه‌دار با برش مدرن و پارچه نرم پنبه‌ای. مناسب محیط کار و استفاده روزمره؛ طراحی مینیمال با جزئیات دوخت دقیق و بسته‌شدن‌های دکمه‌ای کلاسیک.",
+  price: {
+    regular: 590000,
+    currency: "ریال",
+    sale: 490000,
+  },
+  size: "medium",
+  color: "white",
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png 1024w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-1.png 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      sizes: "(min-width: 1024px) 1024px, 100vw",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-1.png",
+      alt: "پیراهن گلدوزی اسب داکوتا وسترن",
+      width: 1024,
+      height: 1536,
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png 1024w, /block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png",
+      sizes: "(min-width: 1024px) 1024px, 100vw",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png",
+      alt: "پیراهن گلدوزی اسب داکوتا وسترن",
+      width: 1024,
+      height: 1536,
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png 1086w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png",
+      sizes: "(min-width: 1086px) 1086px, 100vw",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png",
+      alt: "پیراهن گلدوزی اسب داکوتا وسترن",
+      width: 1086,
+      height: 1448,
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Portrait-2.png 1087w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Portrait-2.png",
+      sizes: "(min-width: 1087px) 1087px, 100vw",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Portrait-2.png",
+      alt: "پیراهن گلدوزی اسب داکوتا وسترن",
+      width: 1087,
+      height: 1446,
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Contemplative-Casual-Chic-2.png 1084w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Contemplative-Casual-Chic-2.png",
+      sizes: "(min-width: 1084px) 1084px, 100vw",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Contemplative-Casual-Chic-2.png",
+      alt: "پیراهن گلدوزی اسب داکوتا وسترن",
+      width: 1084,
+      height: 1451,
+    },
+  ],
+  hinges: {
+    size: {
+      label: "سایز",
+      id: "size",
+      name: "size" as const,
+      sizeChart: [
+        {
+          usa: "0",
+          label: "خیلی کوچک",
+          uk: "4",
+          europe: "32",
+        },
+        {
+          usa: "4",
+          label: "کوچک",
+          uk: "6",
+          europe: "34",
+        },
+        {
+          usa: "6",
+          label: "کوچک",
+          uk: "8",
+          europe: "36",
+        },
+        {
+          usa: "8",
+          label: "متوسط",
+          uk: "10",
+          europe: "38",
+        },
+        {
+          usa: "10",
+          label: "بزرگ",
+          uk: "12",
+          europe: "40",
+        },
+      ],
+      options: [
+        {
+          id: "small",
+          value: "small",
+          label: "S",
+          stockInfo: {
+            stockStatusCode: "LOW_STOCK" as StockStatusCode,
+            stockQuantity: 10,
+          },
+        },
+        {
+          id: "medium",
+          value: "medium",
+          label: "M",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "large",
+          value: "large",
+          label: "L",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK" as StockStatusCode,
+          },
+        },
+      ],
+    },
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color" as const,
+      options: [
+        {
+          id: "white",
+          value: "white",
+          label: "سفید",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "gray",
+          value: "gray",
+          label: "خاکستری",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "black",
+          value: "black",
+          label: "مشکی",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK" as StockStatusCode,
+          },
+        },
+      ],
+    },
+  } as Record<FieldName, Hinges>,
+};
+
+const STATUS_CONFIG = {
+  IN_STOCK: {
+    color: "green",
+    message: "موجود، آماده ارسال",
+  },
+  LOW_STOCK: {
+    color: "amber",
+    getMessage: (qty?: number) =>
+      qty
+        ? `موجودی کم - ${qty.toLocaleString("fa-IR")} عدد باقی مانده`
+        : "موجودی کم - چند عدد باقی مانده",
+  },
+};
+
+interface ProductDetail5Props {
+  className?: string;
+}
+
+const ProductDetail5 = ({ className }: ProductDetail5Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="mx-auto w-full max-w-[93.75rem] lg:px-12">
+        <div className="relative grid w-full grid-cols-1 justify-between gap-2.5 lg:grid-cols-5 lg:gap-15.5">
+          <div className="top-5 self-start lg:sticky lg:col-span-3">
+            <ProductImages
+              images={PRODUCT_DETAILS.images}
+              galleryID="gallery-5"
+            />
+          </div>
+          <div className="justify-self-center lg:col-span-2">
+            <div className="flex max-w-150 flex-col gap-6 px-4 lg:max-w-full lg:px-0">
+              <h1 className="text-3xl leading-tight font-light uppercase lg:text-xl">
+                {PRODUCT_DETAILS.name}
+              </h1>
+              <Price {...PRODUCT_DETAILS.price} />
+              <Separator />
+              <ProductForm
+                hinges={PRODUCT_DETAILS.hinges}
+                selected={{
+                  size: PRODUCT_DETAILS.size,
+                  color: PRODUCT_DETAILS.color,
+                }}
+              />
+              <p className="text-muted-foreground">
+                {PRODUCT_DETAILS.description}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductImages = ({ images, galleryID }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  const thumbnailRef = useRef<HTMLUListElement>(null);
+  const isDesktop = useMediaQuery("(width >= 1024px)");
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-toolbar",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className:
+            "absolute bottom-7.5 inset-x-0 z-50 mx-auto flex w-fit items-center gap-7 animate-fade-in",
+          html: `
+        <button id="pswp-prev" class=" !bg-white flex !size-12 border text-white p-2 rounded-full">
+        <svg class="stroke-black m-auto size-6 stroke-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+        </button>
+        <button id="pswp-close" class=" !bg-white flex !size-15.5 border text-white p-2 rounded-full">
+        <svg class="stroke-black m-auto size-7.5 stroke-1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+        </button>
+        <button id="pswp-next" class=" !bg-white flex !size-12 border text-white p-2 rounded-full">
+        <svg class="stroke-black m-auto size-6 stroke-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+        </button>
+      `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+
+            (
+              pswp as PhotoSwipe & { customToolbarEl?: HTMLElement }
+            ).customToolbarEl = el;
+          },
+        });
+      }
+    });
+
+    lightbox.on("close", () => {
+      const pswp = lightbox.pswp as PhotoSwipe & {
+        customToolbarEl?: HTMLElement;
+      };
+      if (pswp?.customToolbarEl) {
+        pswp.customToolbarEl.remove();
+        pswp.customToolbarEl = undefined;
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = () => setCurrent(api.selectedScrollSnap() + 1);
+    updateCurrent();
+    api.on("select", updateCurrent);
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  useEffect(() => {
+    if (!previewRef.current || !thumbnailRef.current) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (!isDesktop && thumbnailRef.current) {
+        thumbnailRef.current.style.height = `${entry.contentRect.height}px`;
+      }
+    });
+
+    if (!isDesktop) {
+      observer.observe(previewRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [isDesktop]);
+
+  if (!images) return;
+
+  return (
+    <div className="flex w-full items-start gap-4">
+      <ul
+        ref={thumbnailRef}
+        className="hidden shrink-0 grow-0 flex-col gap-4.5 overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] lg:flex [::-webkit-scrollbar]:hidden"
+      >
+        {images.map((img, index) => (
+          <li
+            className="w-full shrink-0 grow-0"
+            key={`product-detail-5-image-thumbnail-${index}`}
+          >
+            <button
+              onClick={() => api?.scrollTo(index)}
+              data-state={index + 1 === current ? "active" : "inactive"}
+              type="button"
+              className="relative block aspect-[0.76] w-20 overflow-hidden after:pointer-events-none after:absolute after:inset-0 after:z-10 after:block after:size-full after:inset-ring-2 after:inset-ring-transparent after:transition-shadow after:duration-200 after:content-[''] data-[state=active]:after:inset-ring-current"
+            >
+              <img
+                src={img.thumbnail}
+                alt={img.alt}
+                className="block size-full object-cover object-center"
+              />
+            </button>
+          </li>
+        ))}
+      </ul>
+      <div className="w-full">
+        <div
+          id={galleryID}
+          className="group/product-photos relative h-fit w-full"
+        >
+          <Carousel
+            setApi={setApi}
+            opts={{ loop: true, align: "center", startIndex: 0 }}
+            className="w-full"
+          >
+            <CarouselContent className="-ms-1">
+              {images.map((img, index) => (
+                <CarouselItem
+                  key={`product-detail-5-image-${index}`}
+                  className="w-full max-w-[75%] ps-1 lg:max-w-full"
+                >
+                  <AspectRatio
+                    ref={previewRef}
+                    ratio={0.8}
+                    className="w-full overflow-hidden bg-muted"
+                  >
+                    <a
+                      href={img.src}
+                      data-pswp-width={img.width}
+                      data-pswp-height={img.height}
+                      data-pswp-srcset={img.srcset}
+                      target="_blank"
+                      rel="noreferrer"
+                      data-cropped="true"
+                    >
+                      <img
+                        srcSet={img.srcset}
+                        alt={img.alt}
+                        width={img.width}
+                        height={img.height}
+                        sizes={img.sizes}
+                        className="block size-full object-cover object-center"
+                      />
+                      {index + 1 === current ? (
+                        <Badge
+                          className="pointer-events-none absolute end-2.5 bottom-2.5 size-8.5 rounded-full bg-background p-1.5 text-xs lg:hidden"
+                          variant="secondary"
+                        >
+                          <ZoomIn className="!size-6.5" />
+                        </Badge>
+                      ) : null}
+                    </a>
+                  </AspectRatio>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+        <div className="lg:hidden">
+          <ol className="my-2.5 flex items-center justify-center gap-0.5">
+            {images.map((_, index) => (
+              <button
+                onClick={() => api?.scrollTo(index)}
+                data-current={index + 1 === current}
+                key={`product-detail-5-image-indicator-${index}`}
+                className="block size-4 data-[current=true]:[&>span]:scale-150 data-[current=true]:[&>span]:bg-primary"
+              >
+                <span className="block size-1.5 rounded-full bg-primary/50"></span>
+              </button>
+            ))}
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Price = ({ regular, sale, currency }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div className="flex items-start gap-2">
+      {sale && (
+        <div
+          data-sale={!!sale}
+          aria-label="قیمت با تخفیف"
+          className="text-lg leading-tight"
+        >
+          {formatCurrency(sale, currency)}
+        </div>
+      )}
+      <div
+        data-sale={!!sale}
+        aria-label="قیمت اصلی"
+        className="text-lg leading-tight data-[sale=true]:line-through"
+      >
+        {formatCurrency(regular, currency)}
+      </div>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+  size: z.string(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductForm) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: selected.color,
+      size: selected.size,
+    },
+  });
+
+  const sizeHinges = hinges?.size;
+  const colorHinges = hinges?.color;
+
+  const sizeValue = form.watch("size");
+  const stockInfo = useMemo(() => {
+    return sizeHinges?.options?.find((item) => item.value === sizeValue)
+      ?.stockInfo;
+  }, [sizeHinges?.options, sizeValue]);
+
+  const isOutOfStock = stockInfo?.stockStatusCode === "OUT_OF_STOCK";
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex w-full flex-col gap-7"
+    >
+      {sizeHinges && (
+        <Controller
+          control={form.control}
+          name={sizeHinges.name}
+          render={({ field }) => (
+            <Field>
+              <div className="flex items-center justify-between gap-2">
+                <FieldLabel
+                  asChild
+                  className="font-light text-muted-foreground"
+                >
+                  <h2>{sizeHinges.label}</h2>
+                </FieldLabel>
+                <SizeChart data={sizeHinges.sizeChart} />
+              </div>
+              <OptionGroup
+                field={field}
+                options={sizeHinges.options}
+                id={sizeHinges.id}
+              />
+            </Field>
+          )}
+        />
+      )}
+      {colorHinges && (
+        <Controller
+          control={form.control}
+          name={colorHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel asChild className="font-light text-muted-foreground">
+                <h2>{colorHinges.label}</h2>
+              </FieldLabel>
+              <OptionGroup
+                field={field}
+                options={colorHinges.options}
+                id={colorHinges.id}
+              />
+            </Field>
+          )}
+        />
+      )}
+      <StockMessege stockInfo={stockInfo} />
+      <div className="flex flex-col gap-2.5">
+        <Button variant="outline" size="lg" disabled={isOutOfStock}>
+          {isOutOfStock ? "فروخته شد" : "افزودن به سبد"}
+        </Button>
+        {!isOutOfStock && <Button size="lg">خرید فوری</Button>}
+      </div>
+    </form>
+  );
+};
+
+const StatIRRot = ({ color }: { color: string }) => (
+  <span className="relative size-6">
+    <span
+      style={{
+        backgroundColor: `var(--color-${color}-600)`,
+      }}
+      className="absolute inset-0 m-auto block size-2 animate-ping rounded-full opacity-75"
+    />
+    <span
+      style={{
+        backgroundColor: `var(--color-${color}-500)`,
+      }}
+      className="absolute inset-0 m-auto block size-2 rounded-full"
+    />
+  </span>
+);
+
+const StockMessege = ({ stockInfo }: StockMessageProps) => {
+  if (!stockInfo) return;
+
+  const { stockStatusCode, stockQuantity } = stockInfo;
+
+  if (stockStatusCode === "IN_STOCK" || stockStatusCode === "LOW_STOCK") {
+    return (
+      <div className="flex items-center gap-2.5">
+        <StatIRRot color={STATUS_CONFIG[stockStatusCode].color} />
+        <p className="text-base leading-[1.4] font-light">
+          {stockStatusCode === "IN_STOCK"
+            ? STATUS_CONFIG.IN_STOCK.message
+            : STATUS_CONFIG.LOW_STOCK.getMessage(stockQuantity)}
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+const OptionGroup = ({ options, id, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap gap-2"
+    >
+      {options &&
+        options.map((item, index) => (
+          <div key={`product-detail-5-input-${index}-${id}`}>
+            <label
+              htmlFor={item.id}
+              className="relative h-9 items-center justify-center rounded-md border-1 px-4 py-2 font-normal shadow-xs ring-primary has-checked:ring has-data-[disabled=true]:text-muted-foreground has-data-[disabled=true]:has-checked:text-muted-foreground"
+            >
+              <RadioGroupItem
+                id={item.id}
+                className="sr-only"
+                value={item.value}
+                aria-label={`انتخاب ${item.label}`}
+                data-disabled={
+                  item.stockInfo.stockStatusCode === "OUT_OF_STOCK"
+                }
+              />
+              <div>{item.label}</div>
+              {item.stockInfo.stockStatusCode === "OUT_OF_STOCK" && (
+                <span className="absolute top-0 bottom-0 start-1/2 z-10 block h-full w-0 rotate-45 border-s"></span>
+              )}
+            </label>
+          </div>
+        ))}
+    </RadioGroup>
+  );
+};
+
+const SizeChart = ({ data }: SizeChartProps) => {
+  if (!data) return;
+
+  const cellClass = "border px-4 py-2.5 text-base font-light";
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant="link"
+          className="h-fit text-xs text-muted-foreground"
+          size="sm"
+        >
+           جدول سایز
+          <Ruler />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="w-full max-w-100 p-11">
+        <DialogHeader className="sr-only">
+          <DialogTitle>راهنمای تبدیل سایز</DialogTitle>
+          <DialogDescription>
+            از این جدول برای یافتن سایز معادل در استانداردهای آمریکا، انگلستان و
+            اروپا استفاده کنید.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Table className="border">
+          <TableHeader>
+            <TableRow>
+              <TableHead colSpan={2} className={`${cellClass} font-semibold`}>
+                آمریکا
+              </TableHead>
+              <TableHead className={`${cellClass} font-semibold`}>
+                انگلستان
+              </TableHead>
+              <TableHead className={`${cellClass} font-semibold`}>
+                اروپا
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((sizes, index) => (
+              <TableRow key={`product-detail-5-row-${index}`}>
+                <TableCell className={cellClass}>{sizes.usa}</TableCell>
+                <TableCell className={cellClass}>{sizes.label}</TableCell>
+                <TableCell className={cellClass}>{sizes.uk}</TableCell>
+                <TableCell className={cellClass}>{sizes.europe}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { ProductDetail5 };
diff --git a/blocks/product-detail6.tsx b/blocks/product-detail6.tsx
new file mode 100644
index 0000000..3dcf5e2
--- /dev/null
+++ b/blocks/product-detail6.tsx
@@ -0,0 +1,1018 @@
+"use client";
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Minus,
+  Plus,
+  RotateCcw,
+  Store,
+  Truck,
+  ZoomIn,
+} from "lucide-react";
+import type { PhotoSwipe } from "photoswipe/lightbox";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type {
+  ControllerRenderProps,
+  SubmitHandler,
+  UseFormReturn,
+} from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+type StockStatusCode = "IN_STOCK" | "OUT_OF_STOCK";
+
+interface StockInfo {
+  stockStatusCode?: StockStatusCode;
+  stockQuantity?: number;
+}
+
+interface ProductImagesProps {
+  images: Array<{
+    alt: string;
+    width: number;
+    height: number;
+    srcset: string;
+    src: string;
+    sizes: string;
+  }>;
+  galleryID: string;
+}
+
+interface Option {
+  id: string;
+  value: string;
+  label: string;
+  stockInfo: StockInfo;
+  price?: price;
+}
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  options?: Option[];
+  min?: number;
+  max?: number;
+}
+
+interface ProductFormProps {
+  hinges: Record<FieldName, Hinges>;
+  onSubmit: SubmitHandler<FormType>;
+  stockInfo?: StockInfo;
+  form: UseFormReturn<z.infer<typeof formSchema>>;
+  selectedSize?: string;
+  productInfo: {
+    name: string;
+    thumbnail: {
+      src: string;
+      alt: string;
+    };
+    price?: price;
+  };
+}
+
+type price = {
+  regular?: number;
+  sale?: number;
+  currency?: string;
+};
+
+interface PriceProps extends price {
+  size?: "default" | "sm";
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+interface SizeRadioGroupProps {
+  options?: Array<Option>;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface ProductInfoSectionsProps {
+  info: {
+    title: string;
+    content: string | string[];
+  }[];
+}
+
+interface RecommendedProductsProps {
+  products: {
+    name: string;
+    price: price;
+    link: string;
+    image: {
+      src: string;
+      alt: string;
+    };
+    category: string;
+  }[];
+}
+
+interface QuantityProps {
+  field: ControllerRenderProps<FormType>;
+  max?: number;
+  min?: number;
+}
+
+const PRODUCT_DETAILS = {
+  name: "کرم درخشندگی رادیانت",
+  size: "200ml",
+  thumbnail: {
+    src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-1.jpg",
+    alt: "کرم درخشندگی رادیانت",
+  },
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-3.jpg",
+      alt: "کرم درخشندگی رادیانت",
+      width: 2400,
+      height: 3000,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/onela-ymeri-vaQgJjd9TUY-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/onela-ymeri-vaQgJjd9TUY-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/onela-ymeri-vaQgJjd9TUY-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/onela-ymeri-vaQgJjd9TUY-unsplash-3.jpg",
+      alt: "کرم درخشندگی رادیانت",
+      width: 2400,
+      height: 2767,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/cheyenne-doig-0vpZpEQ4FFM-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/cheyenne-doig-0vpZpEQ4FFM-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/cheyenne-doig-0vpZpEQ4FFM-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/cheyenne-doig-0vpZpEQ4FFM-unsplash-3.jpg",
+      alt: "کرم درخشندگی رادیانت",
+      width: 2400,
+      height: 2400,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/ibnu-ihza-Z7u2bpbE65Q-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/ibnu-ihza-Z7u2bpbE65Q-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/ibnu-ihza-Z7u2bpbE65Q-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/ibnu-ihza-Z7u2bpbE65Q-unsplash-3.jpg",
+      alt: "کرم درخشندگی رادیانت",
+      width: 2400,
+      height: 1371,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/crystalweed-cannabis-aZZ-pxkC2_c-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/crystalweed-cannabis-aZZ-pxkC2_c-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/crystalweed-cannabis-aZZ-pxkC2_c-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/crystalweed-cannabis-aZZ-pxkC2_c-unsplash-3.jpg",
+      alt: "کرم درخشندگی رادیانت",
+      width: 2400,
+      height: 3600,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/nora-hutton-AjU6Z5k_uBI-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/nora-hutton-AjU6Z5k_uBI-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/nora-hutton-AjU6Z5k_uBI-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/nora-hutton-AjU6Z5k_uBI-unsplash-3.jpg",
+      alt: "کرم درخشندگی رادیانت",
+      width: 2400,
+      height: 3600,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+    },
+  ],
+  features: [
+    {
+      icon: Truck,
+      text: "ارسال رایگان برای سفارش‌های بالای ۵۰ دلار",
+    },
+    {
+      icon: RotateCcw,
+      text: "مرجوعی آسان تا ۳۰ روز",
+    },
+  ],
+  description:
+    "درخشندگی پوستتان را با این کرم سبک افزایش دهیدآبرسانی، روشن‌کنندگی و نرمی برای درخششی سالم و درخشان.",
+  hinges: {
+    size: {
+      label: "سایز",
+      id: "size",
+      name: "size",
+      options: [
+        {
+          id: "100ml",
+          value: "100ml",
+          label: "100ml",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+          price: {
+            regular: 990000.0,
+            sale: 790000.0,
+            currency: "ریال",
+          },
+        },
+        {
+          id: "200ml",
+          value: "200ml",
+          label: "200ml",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+            stockQuantity: 10,
+          },
+          price: {
+            regular: 199000.0,
+            currency: "ریال",
+          },
+        },
+        {
+          id: "300ml",
+          value: "300ml",
+          label: "300ml",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK" as StockStatusCode,
+          },
+          price: {
+            regular: 199000.0,
+            sale: 199000.0,
+            currency: "ریال",
+          },
+        },
+      ],
+    },
+    quantity: {
+      label: "تعداد",
+      id: "quantity",
+      name: "quantity",
+      min: 1,
+      max: 99,
+    },
+  } as Record<FieldName, Hinges>,
+  accordion: [
+    {
+      title: "معرفی محصول",
+      content:
+        "سرم درخشندگی رادیانت لونارا، سرمی سبک و سریع‌جذب برای روشن‌کردن، آبرسانی و یکدست‌کردن رنگ پوست است. با ۱۰٪ ویتامین C و عصاره‌های گیاهی فرموله شده و برای بازگرداندن درخشش طبیعی و محافظت در برابر عوامل محیطی ایده‌آل است.",
+    },
+    {
+      title: "نحوه استفاده",
+      content:
+        "هر صبح ۲ تا ۳ قطره روی پوست تمیز و خشک بزنید. به‌آرامی روی صورت و گردن ماساژ دهید، پیش از مرطوب‌کننده یا ضدآفتاب. فقط برای استفاده خارجی.",
+    },
+    {
+      title: "لیست کامل مواد تشکیل‌دهنده",
+      content: [
+        "Aqua (Water)",
+        "Ascorbic Acid (Vitamin C)",
+        "Sodium Hyaluronate",
+        "Aloe Barbadensis Leaf Juice",
+        "Glycerin",
+        "Niacinamide",
+        "Tocopherol (Vitamin E)",
+        "Citrus Aurantium Dulcis (Orange) Peel Oil",
+        "Potassium Sorbate",
+        "Sodium Benzoate",
+      ],
+    },
+    {
+      title: "ارسال و مرجوعی",
+      content:
+        "ارسال استاندارد برای سفارش‌های بالای ۵۰ دلار رایگان است. مرجوعی تا ۳۰ روز پس از خرید برای محصولات بازنشده و استفاده‌نشده پذیرفته می‌شود. برای جزئیات کامل به وب‌سایت ما مراجعه کنید.",
+    },
+  ],
+};
+
+const RECOMMENDED_PRODUCTS = [
+  {
+    category: "سرم",
+    name: "احیاگر طبیعت",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-1.jpg",
+      alt: "احیاگر طبیعت",
+    },
+    link: "#",
+    price: {
+      regular: 390000.0,
+      sale: 290000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    category: "کرم",
+    name: "کرم دست لوکس‌تاچ",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-1.jpg",
+      alt: "کرم دست لوکس‌تاچ",
+    },
+    link: "#",
+    price: {
+      regular: 790000.0,
+      currency: "ریال",
+    },
+  },
+];
+
+interface ProductDetail6Props {
+  className?: string;
+}
+
+const ProductDetail6 = ({ className }: ProductDetail6Props) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      size: PRODUCT_DETAILS.size,
+      quantity: 1,
+    },
+  });
+
+  const sizeHinges = PRODUCT_DETAILS.hinges?.size;
+  const size = form.watch("size");
+
+  const selectedItem = useMemo(() => {
+    return sizeHinges?.options?.find((item) => item.value === size);
+  }, [size, sizeHinges]);
+
+  const price = selectedItem?.price;
+  const stockInfo = selectedItem?.stockInfo;
+
+  const onSubmit = (data: FormType) => {
+    console.log(data);
+  };
+
+  return (
+    <section className={cn("font-dm-sans px-4 py-32 lg:px-12", className)}>
+      <div className="mx-auto w-full max-w-[88.125rem]">
+        <div className="relative grid grid-cols-1 gap-7 gap-7.5 lg:grid-cols-5 xl:gap-18">
+          <div className="lg:col-span-3">
+            <ProductImages
+              images={PRODUCT_DETAILS.images}
+              galleryID="gallery-6"
+            />
+          </div>
+          <div className="lg:col-span-2">
+            <div className="sticky top-14 flex flex-col gap-4.5">
+              <h1 className="text-[1.75rem] leading-tight font-medium tracking-tight xl:text-[2.5rem]">
+                {PRODUCT_DETAILS.name}
+              </h1>
+              <div className="flex flex-col">
+                <Price
+                  regular={price?.regular}
+                  sale={price?.sale}
+                  currency={price?.currency}
+                />
+              </div>
+              <p>{PRODUCT_DETAILS.description}</p>
+              <ProductForm
+                hinges={PRODUCT_DETAILS.hinges}
+                form={form}
+                onSubmit={onSubmit}
+                selectedSize={selectedItem?.label}
+                stockInfo={stockInfo}
+                productInfo={{
+                  name: PRODUCT_DETAILS.name,
+                  price: price,
+                  thumbnail: PRODUCT_DETAILS.thumbnail,
+                }}
+              />
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center gap-2">
+                  <Truck className="h-5 w-5" />
+                  <span className="text-sm">
+                    ارسال رایگان برای سفارش‌های بالای ۵۰ دلار
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <RotateCcw className="h-5 w-5" />
+                  <span className="text-sm">مرجوعی آسان تا ۳۰ روز</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Store className="h-5 w-5" />
+                  <span className="text-sm">
+                    آماده تحویل در شعبه هاراجوکو
+                  </span>
+                </div>
+              </div>
+              <RecommendedProducts products={RECOMMENDED_PRODUCTS} />
+              <ProductInfoSections info={PRODUCT_DETAILS.accordion} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductImages = ({ images, galleryID }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-toolbar",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className:
+            "absolute bottom-7.5 inset-x-0 z-50 mx-auto flex w-fit items-center gap-7",
+          html: `
+        <button id="pswp-prev" class=" !bg-white flex !size-12 border text-white p-2 rounded-full">
+        <svg class="stroke-black m-auto size-6 stroke-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+        </button>
+        <button id="pswp-close" class=" !bg-white flex !size-15.5 border text-white p-2 rounded-full">
+        <svg class="stroke-black m-auto size-7.5 stroke-1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+        </button>
+        <button id="pswp-next" class=" !bg-white flex !size-12 border text-white p-2 rounded-full">
+        <svg class="stroke-black m-auto size-6 stroke-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+        </button>
+      `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+
+            (
+              pswp as PhotoSwipe & { customToolbarEl?: HTMLElement }
+            ).customToolbarEl = el;
+          },
+        });
+      }
+    });
+
+    lightbox.on("close", () => {
+      const pswp = lightbox.pswp as PhotoSwipe & {
+        customToolbarEl?: HTMLElement;
+      };
+      if (pswp?.customToolbarEl) {
+        pswp.customToolbarEl.remove();
+        pswp.customToolbarEl = undefined;
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = () => setCurrent(api.selectedScrollSnap() + 1);
+    updateCurrent();
+    api.on("select", updateCurrent);
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  if (!images) return;
+
+  return (
+    <div>
+      <div className="overflow-hidden rounded-3xl" id={galleryID}>
+        <Carousel
+          setApi={setApi}
+          className="w-full"
+          opts={{
+            loop: true,
+            breakpoints: {
+              "(min-width: 1024px)": {
+                active: false,
+                align: "start",
+                loop: false,
+              },
+            },
+          }}
+        >
+          <CarouselContent className="-ms-1 lg:grid lg:grid-cols-1 lg:gap-2.5">
+            {images.map((img, index) => {
+              return (
+                <CarouselItem
+                  key={`product-detail-6-image-${index}`}
+                  className="group w-full ps-1"
+                >
+                  <AspectRatio
+                    ratio={1}
+                    className="w-full overflow-hidden rounded-3xl bg-muted"
+                  >
+                    <a
+                      href={img.src}
+                      data-pswp-width={img.width}
+                      data-pswp-height={img.height}
+                      data-pswp-srcset={img.srcset}
+                      target="_blank"
+                      rel="noreferrer"
+                      data-cropped="true"
+                    >
+                      <img
+                        srcSet={img.srcset}
+                        alt={img.alt}
+                        width={img.width}
+                        height={img.height}
+                        sizes={img.sizes}
+                        className="block size-full object-cover object-center"
+                      />
+                    </a>
+                    <Badge
+                      className="pointer-events-none absolute top-5 end-5 h-10 w-10 rounded-full bg-background p-1.5 text-xs opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                      variant="secondary"
+                    >
+                      <ZoomIn />
+                    </Badge>
+                  </AspectRatio>
+                </CarouselItem>
+              );
+            })}
+          </CarouselContent>
+        </Carousel>
+      </div>
+      <div className="lg:hidden">
+        <div className="mt-3.5 flex items-center justify-center">
+          <Button variant="ghost" size="icon" onClick={() => api?.scrollPrev()}>
+            <ChevronLeft className="rtl:rotate-180" />
+          </Button>
+          <div className="min-w-6 text-center text-sm">
+            {current.toLocaleString("fa-IR")}/{images.length.toLocaleString("fa-IR")}
+          </div>
+          <Button variant="ghost" size="icon" onClick={() => api?.scrollNext()}>
+            <ChevronRight className="rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Price = ({ regular, sale, currency, size }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+      {sale && (
+        <div
+          data-sale={!!sale}
+          data-size={size}
+          aria-label="قیمت با تخفیف"
+          className="text-xl leading-normal font-semibold data-[sale=true]:text-red-600 data-[size=sm]:text-base"
+        >
+          {formatCurrency(sale, currency)}
+        </div>
+      )}
+      <div
+        data-sale={!!sale}
+        data-size={size}
+        aria-label="قیمت اصلی"
+        className="text-xl leading-relaxed font-bold data-[sale=true]:text-base data-[sale=true]:font-normal data-[sale=true]:text-muted-foreground data-[sale=true]:line-through data-[size=sm]:text-base"
+      >
+        {formatCurrency(regular, currency)}
+      </div>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  quantity: z.number().min(1).max(99),
+  size: z.string(),
+});
+
+const ProductForm = ({
+  hinges,
+  form,
+  onSubmit,
+  stockInfo,
+  selectedSize,
+  productInfo,
+}: ProductFormProps) => {
+  const cartButtonRef = useRef<HTMLButtonElement>(null);
+  const stickyFormRef = useRef<HTMLDivElement>(null);
+
+  const sizeHinges = hinges?.size;
+  const quantityHinges = hinges?.quantity;
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (stickyFormRef.current) {
+            stickyFormRef.current.classList.toggle(
+              "translate-y-full",
+              entry.isIntersecting,
+            );
+          }
+        });
+      },
+      {
+        threshold: 0.02,
+      },
+    );
+    if (cartButtonRef.current) {
+      observer.observe(cartButtonRef.current);
+    }
+  }, []);
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex w-full flex-col gap-7"
+    >
+      {sizeHinges && (
+        <Controller
+          control={form.control}
+          name={sizeHinges.name}
+          render={({ field }) => (
+            <Field>
+              <FieldLabel asChild className="text-sm leading-relaxed font-bold">
+                <h2>
+                  {sizeHinges.label}:{" "}
+                  <span className="font-normal">{selectedSize}</span>
+                </h2>
+              </FieldLabel>
+              <SizeRadioGroup field={field} options={sizeHinges.options} />
+            </Field>
+          )}
+        />
+      )}
+      <div className="flex flex-wrap items-center justify-start gap-4">
+        {quantityHinges && (
+          <Controller
+            control={form.control}
+            name={quantityHinges.name}
+            render={({ field }) => (
+              <Field>
+                <Quantity
+                  field={field}
+                  max={quantityHinges?.max}
+                  min={quantityHinges?.min}
+                />
+              </Field>
+            )}
+          />
+        )}
+        <div className="flex-1">
+          <Button
+            variant="secondary"
+            className="w-full"
+            disabled={stockInfo?.stockStatusCode === "OUT_OF_STOCK"}
+            ref={cartButtonRef}
+          >
+            افزودن به سبد
+          </Button>
+        </div>
+      </div>
+      <div className="flex w-full shrink-0 basis-full flex-col gap-6">
+        <Button
+          className="w-full"
+          size="lg"
+          disabled={stockInfo?.stockStatusCode === "OUT_OF_STOCK"}
+        >
+          خرید فوری
+        </Button>
+      </div>
+      <div
+        ref={stickyFormRef}
+        className="fixed inset-x-0 bottom-0 z-40 w-full translate-y-full border-t transition-all duration-300"
+      >
+        <div className="flex items-center justify-between gap-2 bg-background px-4 py-2.5">
+          <div className="hidden items-center gap-5 md:flex">
+            <div className="size-[5.625rem] overflow-hidden rounded-[0.375rem]">
+              <img
+                src={productInfo.thumbnail.src}
+                alt={productInfo.thumbnail.alt}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+            <div>
+              <div className="mb-1 text-lg font-medium">{productInfo.name}</div>
+              {productInfo.price ? (
+                <Price size="sm" {...productInfo.price} />
+              ) : null}
+            </div>
+          </div>
+          <div className="flex flex-1 gap-3 md:flex-none">
+            {sizeHinges && (
+              <Controller
+                control={form.control}
+                name={sizeHinges.name}
+                render={({ field }) => (
+                  <Field className="flex-1 md:flex-none">
+                    <Select
+                      onValueChange={field.onChange}
+                      value={String(field.value)}
+                    >
+                      <SelectTrigger className="w-full min-w-20">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sizeHinges?.options?.map((item, index) => (
+                          <SelectItem
+                            key={`product-6-select-size-${index}`}
+                            value={item.id}
+                          >
+                            {item.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </Field>
+                )}
+              />
+            )}
+            {quantityHinges && (
+              <Controller
+                control={form.control}
+                name={quantityHinges.name}
+                render={({ field }) => (
+                  <Field className="hidden md:grid">
+                    <Quantity
+                      field={field}
+                      min={quantityHinges.min}
+                      max={quantityHinges.max}
+                    />
+                  </Field>
+                )}
+              />
+            )}
+            <div className="flex-1 md:flex-none">
+              <Button
+                className="w-full"
+                disabled={stockInfo?.stockStatusCode === "OUT_OF_STOCK"}
+              >
+                افزودن به سبد
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+const Quantity = ({ field, max, min }: QuantityProps) => {
+  return (
+    <div className="flex h-9 w-32 items-center justify-between overflow-hidden rounded-md border shadow-xs">
+      <Button
+        onClick={() =>
+          field.onChange(Math.max(min || 1, Number(field.value || 1) - 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="rounded-none"
+      >
+        <Minus />
+      </Button>
+      <Input
+        {...field}
+        value={field.value ?? ""}
+        onChange={(e) => {
+          const raw = e.target.value;
+          const parsed = parseInt(raw, 10);
+
+          // Accept empty string for typing, but validate if not a number
+          if (raw === "") {
+            field.onChange("");
+          } else if (!isNaN(parsed)) {
+            field.onChange(parsed);
+          }
+        }}
+        type="number"
+        min={min ? min : 1}
+        max={max ? max : 99}
+        className="h-full flex-1 [appearance:textfield] rounded-none border-0 text-center focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <Button
+        onClick={() =>
+          field.onChange(Math.min(max || 99, Number(field.value || 1) + 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="rounded-none"
+      >
+        <Plus />
+      </Button>
+    </div>
+  );
+};
+
+const SizeRadioGroup = ({ options, field }: SizeRadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap items-start gap-2"
+    >
+      {options &&
+        options.map((item, index) => (
+          <div key={`product-detail-6-size-${index}`}>
+            <label
+              htmlFor={item.id}
+              className="relative flex h-9 min-w-10 items-center justify-center rounded-md border px-3 py-2 text-sm font-normal hover:bg-accent hover:text-accent-foreground has-checked:bg-primary has-checked:text-primary-foreground has-data-[disabled=true]:cursor-not-allowed has-data-[disabled=true]:opacity-50"
+            >
+              <RadioGroupItem
+                id={item.id}
+                className="sr-only"
+                value={item.value}
+                aria-label={`انتخاب ${item.label}`}
+                data-disabled={
+                  item.stockInfo.stockStatusCode === "OUT_OF_STOCK"
+                }
+              />
+              <div>{item.label}</div>
+              {item.stockInfo.stockStatusCode === "OUT_OF_STOCK" && (
+                <span className="absolute top-0 bottom-0 start-1/2 z-10 block h-full w-0 rotate-45 border-s"></span>
+              )}
+            </label>
+          </div>
+        ))}
+    </RadioGroup>
+  );
+};
+
+const RecommendedProducts = ({ products }: RecommendedProductsProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(1);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = () => setCurrent(api.selectedScrollSnap() + 1);
+    updateCurrent();
+    api.on("select", updateCurrent);
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  if (!products) return;
+
+  return (
+    <div>
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+        <div className="text-base font-medium tracking-tighter xl:text-xl">
+          محصولات مرتبط
+        </div>
+        <div className="flex items-center">
+          <Button variant="ghost" size="icon" onClick={() => api?.scrollPrev()}>
+            <ChevronLeft className="rtl:rotate-180" />
+          </Button>
+          <div className="w-6 text-center text-sm">
+            {current.toLocaleString("fa-IR")}/{products.length.toLocaleString("fa-IR")}
+          </div>
+          <Button variant="ghost" size="icon" onClick={() => api?.scrollNext()}>
+            <ChevronRight className="rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+      <Carousel
+        opts={{
+          loop: true,
+        }}
+        setApi={setApi}
+        className="w-full"
+      >
+        <CarouselContent>
+          {products.map((item, index) => (
+            <CarouselItem key={`product-detail-6-recommended-${index}`}>
+              <div className="rounded-[1.25rem] bg-muted p-2.5">
+                <div className="grid grid-cols-[minmax(0,4.125rem)_minmax(0,1fr)] items-center gap-3">
+                  <div>
+                    <div className="aspect-square w-full overflow-hidden rounded-[0.625rem]">
+                      <img
+                        src={item.image.src}
+                        alt={item.image.alt}
+                        className="block size-full object-cover object-center"
+                      />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-0.5">
+                    <div className="text-sm text-foreground/50">
+                      {item.category}
+                    </div>
+                    <a
+                      href={item.link}
+                      className="relative block h-fit w-fit !p-0 text-lg leading-[1.5] font-medium after:absolute after:start-0 after:bottom-[0.35rem] after:h-px after:w-full after:origin-end after:scale-x-0 after:bg-foreground after:transition-transform after:duration-200 after:content-[''] hover:after:origin-start hover:after:scale-x-100"
+                    >
+                      {item.name}
+                    </a>
+                    <div className="mt-1">
+                      <Price
+                        regular={item.price.regular}
+                        sale={item.price.sale}
+                        currency={item.price.currency}
+                        size="sm"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  );
+};
+
+const ProductInfoSections = ({ info }: ProductInfoSectionsProps) => {
+  if (!info) return;
+
+  return (
+    <Accordion type="multiple" className="w-full border-b">
+      {info.map((item, index) => (
+        <AccordionItem
+          value={`product-info-${index}`}
+          key={`product-detail-6-info-${index}`}
+        >
+          <AccordionTrigger>{item.title}</AccordionTrigger>
+          <AccordionContent className="flex flex-col gap-4 text-sm leading-normal text-balance">
+            {Array.isArray(item.content) ? (
+              <ul className="list-inside list-disc ps-5">
+                {item.content.map((item, index) => (
+                  <li key={`product-detail-6-info-${index}`}>{item}</li>
+                ))}
+              </ul>
+            ) : (
+              item.content
+            )}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+export { ProductDetail6 };
diff --git a/blocks/product-detail7.tsx b/blocks/product-detail7.tsx
new file mode 100644
index 0000000..c72540b
--- /dev/null
+++ b/blocks/product-detail7.tsx
@@ -0,0 +1,642 @@
+"use client";
+
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { LucideIcon } from "lucide-react";
+import {
+  Circle,
+  Flower2,
+  Heart,
+  Leaf,
+  Minus,
+  Plus,
+  Sprout,
+} from "lucide-react";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { Fragment, useEffect, useRef, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Field } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+interface ProductImagesProps {
+  images: Array<{
+    srcset: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    sizes: string;
+    thumbnail: string;
+  }>;
+  galleryID: string;
+}
+
+interface ProductFeatures {
+  features: Array<string>;
+}
+
+interface SustainabilitySectionProps {
+  sustainability: Array<{
+    text: string;
+    icon: LucideIcon;
+  }>;
+}
+
+interface ProductInfoSectionsProps {
+  info: Array<{
+    title: string;
+    content: string;
+  }>;
+}
+
+interface PriceProps {
+  regular: number;
+  sale?: number;
+  currency: string;
+  discount?: string;
+}
+
+interface QuantityProps {
+  field: ControllerRenderProps<FormType>;
+  max?: number;
+  min?: number;
+}
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  min?: number;
+  max?: number;
+}
+
+interface ProductFormProps {
+  availability: boolean;
+  hinges: Record<FieldName, Hinges>;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+const PRODUCT_DETAILS = {
+  brand: "گیاهان لونارا",
+  name: "سرم درخشندگی رادیانت",
+  new: true,
+  availability: true,
+  price: {
+    regular: 550000,
+    currency: "ریال",
+    sale: 460000,
+    discount: "-۱۵٪",
+  },
+  hinges: {
+    quantity: {
+      label: "تعداد",
+      id: "quantity",
+      name: "quantity",
+      min: 1,
+      max: 99,
+    },
+  } as Record<FieldName, Hinges>,
+  features: [
+    "افزایش درخشندگی و آبرسانی پوست",
+    "غنی از ویتامین C و هیالورونیک اسید",
+    "مناسب همه انواع پوست، از جمله پوست حساس",
+    "تست‌شده توسط متخصص پوست و نکومدوژنیک",
+    "جذب سریع بدون حس چسبندگی",
+  ],
+  sustainability: [
+    {
+      text: "سازگار با محیط زیست",
+      icon: Leaf,
+    },
+    {
+      text: "ارگانیک",
+      icon: Flower2,
+    },
+    {
+      text: "طبیعی",
+      icon: Sprout,
+    },
+    {
+      text: "تولید اخلاقی",
+      icon: Heart,
+    },
+  ],
+  accordion: [
+    {
+      title: "معرفی محصول",
+      content:
+        "سرم درخشندگی رادیانت لونارا، سرمی سبک و سریع‌جذب برای روشن‌کردن، آبرسانی و یکدست‌کردن رنگ پوست است. با ۱۰٪ ویتامین C و عصاره‌های گیاهی فرموله شده و برای بازگرداندن درخشش طبیعی و محافظت در برابر عوامل محیطی ایده‌آل است.",
+    },
+    {
+      title: "نحوه استفاده",
+      content:
+        "هر صبح ۲ تا ۳ قطره روی پوست تمیز و خشک بزنید. به‌آرامی روی صورت و گردن ماساژ دهید، پیش از مرطوب‌کننده یا ضدآفتاب. فقط برای استفاده خارجی.",
+    },
+    {
+      title: "لیست کامل مواد تشکیل‌دهنده",
+      content:
+        "Aqua (Water), Ascorbic Acid (Vitamin C), Sodium Hyaluronate, Aloe Barbadensis Leaf Juice, Glycerin, Niacinamide, Tocopherol (Vitamin E), Citrus Aurantium Dulcis (Orange) Peel Oil, Potassium Sorbate, Sodium Benzoate.",
+    },
+    {
+      title: "ارسال و مرجوعی",
+      content:
+        "ارسال استاندارد برای سفارش‌های بالای ۵۰ دلار رایگان است. مرجوعی تا ۳۰ روز پس از خرید برای محصولات بازنشده و استفاده‌نشده پذیرفته می‌شود. برای جزئیات کامل به وب‌سایت ما مراجعه کنید.",
+    },
+  ],
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-3.jpg 2160w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-3.jpg",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-1.jpg",
+      sizes: "(min-width: 2160px) 2160px, (min-width: 1920px) 1920px, 100vw",
+      alt: "سرم درخشندگی رادیانت",
+      width: 2160,
+      height: 2700,
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-3.jpg",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-1.jpg",
+      sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+      alt: "سرم درخشندگی رادیانت",
+      width: 2400,
+      height: 3000,
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-3.jpg",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-1.jpg",
+      sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+      alt: "سرم درخشندگی رادیانت",
+      width: 2400,
+      height: 3600,
+    },
+  ],
+};
+
+interface ProductDetail7Props {
+  className?: string;
+}
+
+const ProductDetail7 = ({ className }: ProductDetail7Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="mx-auto w-full max-w-375 px-4 font-sans">
+        <div className="relative flex w-full flex-col items-start justify-center gap-6 md:flex-row md:gap-8 xl:gap-20">
+          <div className="top-4 w-full flex-1 self-start md:sticky lg:top-32">
+            <ProductImages
+              images={PRODUCT_DETAILS.images}
+              galleryID="gallery-7"
+            />
+          </div>
+          <div className="w-full shrink-0 md:w-[42%]">
+            <div className="flex flex-col gap-1">
+              <div className="text-xs leading-normal tracking-widest text-muted-foreground uppercase">
+                {PRODUCT_DETAILS.brand}
+              </div>
+              <h1 className="font-serif text-[2rem] leading-tight">
+                {PRODUCT_DETAILS.name}
+              </h1>
+            </div>
+            <div className="py-3">
+              <Price {...PRODUCT_DETAILS.price} />
+            </div>
+            <ProductForm
+              hinges={PRODUCT_DETAILS.hinges}
+              availability={PRODUCT_DETAILS.availability}
+            />
+            <ProductFeatures features={PRODUCT_DETAILS.features} />
+            <SustainabilitySection
+              sustainability={PRODUCT_DETAILS.sustainability}
+            />
+            <ProductInfoSections info={PRODUCT_DETAILS.accordion} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const Price = ({ regular, sale, currency, discount }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-2.5">
+      {sale ? (
+        <div
+          data-sale={!!sale}
+          aria-label="قیمت با تخفیف"
+          className="text-xl leading-normal font-medium text-red-600"
+        >
+          {formatCurrency(sale, currency)}
+        </div>
+      ) : null}
+      <div
+        data-sale={!!sale}
+        aria-label="قیمت اصلی"
+        className="text-xl leading-normal font-medium data-[sale=true]:font-normal data-[sale=true]:text-muted-foreground data-[sale=true]:line-through"
+      >
+        {formatCurrency(regular, currency)}
+      </div>
+      {discount && <Badge variant="destructive">{discount}</Badge>}
+    </div>
+  );
+};
+
+const ProductImages = ({ images, galleryID }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  const thumbnailRef = useRef<HTMLUListElement>(null);
+  const isDesktop = useMediaQuery("(width >= 900px)");
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      mainClass:
+        "[&>div:first-child]:!bg-background [&_*]:!text-foreground [&_*]:!text-shadow-none",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = () => setCurrent(api.selectedScrollSnap() + 1);
+    updateCurrent();
+    api.on("select", updateCurrent);
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  useEffect(() => {
+    if (!previewRef.current || !thumbnailRef.current) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (!isDesktop && thumbnailRef.current) {
+        thumbnailRef.current.style.height = `${entry.contentRect.height}px`;
+      }
+    });
+
+    if (!isDesktop) {
+      observer.observe(previewRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [isDesktop]);
+
+  if (!images) return;
+
+  return (
+    <Fragment>
+      <div className="flex w-full items-start justify-between gap-4">
+        <ul
+          ref={thumbnailRef}
+          className="hidden w-20 shrink-0 grow-0 flex-col gap-2 overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] md:flex [::-webkit-scrollbar]:hidden"
+        >
+          {images.map((img, index) => (
+            <li
+              className="w-full shrink-0"
+              key={`product-detail-7-thumbnail-${index}`}
+            >
+              <button
+                onClick={() => api?.scrollTo(index)}
+                data-state={index + 1 === current ? "active" : "inactive"}
+                type="button"
+                className="relative block size-20 overflow-hidden rounded-[0.875rem] after:pointer-events-none after:absolute after:inset-0 after:z-10 after:block after:size-full after:rounded-[0.875rem] after:inset-ring-2 after:inset-ring-transparent after:transition-shadow after:duration-200 after:content-[''] data-[state=active]:after:inset-ring-current"
+              >
+                <img
+                  src={img.thumbnail}
+                  alt={img.alt}
+                  className="block size-full object-cover object-center"
+                  loading="lazy"
+                />
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="w-full md:max-w-2xl">
+          <div className="group/product-photos relative h-fit w-full">
+            <Badge className="absolute top-4 start-4 z-10 rounded-full bg-lime-200 px-4 py-1 text-base leading-snug text-black">
+              جدید
+            </Badge>
+            <div className="pswp-gallery" id={galleryID}>
+              <Carousel setApi={setApi} className="w-full">
+                <CarouselContent className="-ms-2">
+                  {images.map((img, index) => (
+                    <CarouselItem
+                      key={`product-detail-7-image-${index}`}
+                      className="w-full ps-2"
+                    >
+                      <AspectRatio
+                        ref={previewRef}
+                        ratio={0.8}
+                        className="w-full overflow-hidden rounded-[0.875rem] bg-muted"
+                      >
+                        <a
+                          href={img.src}
+                          data-pswp-width={img.width}
+                          data-pswp-height={img.height}
+                          data-pswp-srcset={img.srcset}
+                          target="_blank"
+                          rel="noreferrer"
+                          data-cropped="true"
+                          className="hover:cursor-zoom-in"
+                        >
+                          <img
+                            srcSet={img.srcset}
+                            alt={img.alt}
+                            width={img.width}
+                            height={img.height}
+                            sizes={img.sizes}
+                            className="block size-full rounded-[0.875rem] object-cover object-center"
+                          />
+                        </a>
+                      </AspectRatio>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <div className="hidden opacity-0 group-hover/product-photos:opacity-100 md:block">
+                  {current > 1 && (
+                    <CarouselPrevious className="start-0 ms-6 size-11 dark:bg-white dark:hover:bg-white dark:[&>svg]:stroke-black" />
+                  )}
+                  {current < images.length && (
+                    <CarouselNext className="end-0 me-6 size-11 dark:bg-white dark:hover:bg-white dark:[&>svg]:stroke-black" />
+                  )}
+                </div>
+              </Carousel>
+            </div>
+            <Badge
+              className="absolute bottom-4 start-4 rounded-full bg-background py-1.5 text-xs xl:hidden"
+              variant="secondary"
+            >
+              {(current || 1).toLocaleString("fa-IR")} /{" "}
+              {images.length.toLocaleString("fa-IR")}
+            </Badge>
+          </div>
+          <div className="relative my-2 h-[0.1875rem] w-full overflow-hidden rounded-[0.625rem] bg-muted xl:hidden">
+            <div
+              style={{
+                width: `calc(100% / ${images.length})`,
+                insetInlineStart: `calc((100% / ${images.length}) * ${current - 1})`,
+              }}
+              className="absolute h-full bg-foreground transition-[inset-inline-start] duration-300"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+const formSchema = z.object({
+  quantity: z.number().min(1),
+});
+
+const ProductForm = ({ availability, hinges }: ProductFormProps) => {
+  const submitButtonRef = useRef<HTMLButtonElement>(null);
+  const stickyButtonWrapperRef = useRef<HTMLDivElement>(null);
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      quantity: 1,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (stickyButtonWrapperRef.current) {
+            stickyButtonWrapperRef.current.classList.toggle(
+              "opacity-0",
+              entry.isIntersecting,
+            );
+          }
+        });
+      },
+      {
+        threshold: 0.02,
+      },
+    );
+    if (submitButtonRef.current) {
+      observer.observe(submitButtonRef.current);
+    }
+  }, []);
+
+  const quantityHinges = hinges?.quantity;
+
+  return (
+    <form
+      className="flex flex-wrap items-center gap-4 py-4"
+      onSubmit={form.handleSubmit(onSubmit)}
+    >
+      <Controller
+        control={form.control}
+        name="quantity"
+        render={({ field }) => (
+          <Field>
+            <Quantity
+              field={field}
+              min={quantityHinges.min}
+              max={quantityHinges.max}
+            />
+          </Field>
+        )}
+      />
+      <Button
+        size="lg"
+        type="submit"
+        className="flex-1"
+        ref={submitButtonRef}
+        disabled={!availability}
+      >
+        {availability ? "افزودن به سبد" : "فروخته شد"}
+      </Button>
+      {availability && (
+        <div
+          ref={stickyButtonWrapperRef}
+          className="fixed inset-x-0 bottom-0 z-10 w-full bg-background p-4 opacity-0 transition-opacity duration-300 md:hidden"
+        >
+          <Button
+            size="lg"
+            type="submit"
+            className="w-full"
+            disabled={!availability}
+          >
+            افزودن به سبد
+          </Button>
+        </div>
+      )}
+    </form>
+  );
+};
+
+const Quantity = ({ field, max, min }: QuantityProps) => {
+  return (
+    <div className="flex h-10 w-32 shrink-0 items-center justify-between overflow-hidden rounded-md border shadow-xs">
+      <Button
+        onClick={() =>
+          field.onChange(Math.max(min || 1, Number(field.value || 1) - 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="size-10 shrink-0 rounded-none"
+      >
+        <Minus />
+      </Button>
+      <Input
+        {...field}
+        value={field.value ?? ""}
+        onChange={(e) => {
+          const raw = e.target.value;
+          const parsed = parseInt(raw, 10);
+          if (raw === "") {
+            field.onChange("");
+          } else if (!isNaN(parsed)) {
+            field.onChange(parsed);
+          }
+        }}
+        type="number"
+        min={min ? min : 1}
+        max={max ? max : 99}
+        className="h-10 w-full [appearance:textfield] rounded-none border-0 !bg-background px-1 text-center shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <Button
+        onClick={() =>
+          field.onChange(Math.min(max || 99, Number(field.value || 1) + 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="size-10 shrink-0 rounded-none"
+      >
+        <Plus />
+      </Button>
+    </div>
+  );
+};
+
+const ProductFeatures = ({ features }: ProductFeatures) => {
+  if (!features) return;
+  return (
+    <ul className="mt-2 mb-6 flex flex-col gap-1">
+      {features.map((text, index) => (
+        <li
+          className="flex items-center gap-3"
+          key={`product-detail-7-features-${index}`}
+        >
+          <Circle className="size-1 fill-foreground stroke-foreground" />
+          {text}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const SustainabilitySection = ({
+  sustainability,
+}: SustainabilitySectionProps) => {
+  if (!sustainability) return;
+  return (
+    <div className="flex flex-wrap gap-10 pt-1 pb-8">
+      {sustainability.map((item, index) => (
+        <div
+          key={`product-detail-7-sustainability-${index}`}
+          className="flex flex-col flex-wrap items-center gap-1"
+        >
+          <item.icon className="size-9 stroke-foreground stroke-1" />
+          <div className="text-xs font-light">{item.text}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const ProductInfoSections = ({ info }: ProductInfoSectionsProps) => {
+  if (!info) return;
+
+  return (
+    <Accordion type="multiple" className="w-full border-t">
+      {info.map((item, index) => (
+        <AccordionItem
+          value={`product-info-${index}`}
+          key={`product-detail-7-info-${index}`}
+        >
+          <AccordionTrigger className="group/trigger font-merriweather py-5 text-xl hover:no-underline [&>svg:last-of-type]:hidden">
+            {item.title}
+            <div className="relative size-5">
+              <Plus className="absolute inset-0 size-full stroke-1 transition-opacity duration-300 group-data-[state=open]/trigger:opacity-0" />
+              <Minus className="absolute inset-0 size-full stroke-1 opacity-0 transition-opacity duration-300 group-data-[state=open]/trigger:opacity-100" />
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="flex flex-col gap-4 text-base text-balance">
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+export { ProductDetail7 };
diff --git a/blocks/product-detail8.tsx b/blocks/product-detail8.tsx
new file mode 100644
index 0000000..59ba990
--- /dev/null
+++ b/blocks/product-detail8.tsx
@@ -0,0 +1,824 @@
+"use client";
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, Star, StarHalf } from "lucide-react";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Field } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+type StockStatusCode = "IN_STOCK" | "OUT_OF_STOCK" | "LOW_STOCK";
+
+interface StockInfo {
+  stockStatusCode: StockStatusCode;
+  stockQuantity?: number;
+}
+
+interface StockMessageProps {
+  stockInfo?: StockInfo;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+interface ReviewsProps {
+  rate: number;
+  totalReviewers: string;
+}
+
+type Option = {
+  label: string;
+  id: string;
+  value: string;
+  stockInfo: StockInfo;
+  image?: {
+    src: string;
+    alt: string;
+  };
+};
+
+interface SizeRadioGroupProps {
+  options?: Array<Option>;
+  label: string;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface ColorRadioGroupProps {
+  options?: Array<Option>;
+  label: string;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  options?: Option[];
+}
+
+interface ProductForm {
+  hinges: Record<FieldName, Hinges>;
+  onSubmit: (data: FormType) => void;
+  stockInfo?: StockInfo;
+  form: UseFormReturn<z.infer<typeof formSchema>>;
+}
+
+interface ProductInfoSectionProps {
+  info: Array<{
+    title: string;
+    content: string;
+  }>;
+}
+
+interface ProductImagesProps {
+  images: Array<{
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    srcset: string;
+    sizes: string;
+    thumbnail: string;
+  }>;
+  galleryID: string;
+  availability?: boolean;
+  discount?: string;
+}
+
+const MAX_STARS = 5;
+
+const STATUS_CONFIG = {
+  IN_STOCK: {
+    color: "green",
+    message: "موجود  امروز تا ساعت ۲۳ سفارش دهید، امروز ارسال می‌شود",
+  },
+  LOW_STOCK: {
+    color: "amber",
+    getMessage: (qty?: number) =>
+      qty
+        ? `موجودی کم - ${qty.toLocaleString("fa-IR")} عدد باقی مانده`
+        : "موجودی کم - چند عدد باقی مانده",
+  },
+  OUT_OF_STOCK: {
+    color: "red",
+    message: "ناموجود  تحویل ظرف ۱۴ روز",
+  },
+};
+
+const PRODUCT_DETAILS = {
+  name: "پیراهن گلدوزی اسب داکوتا وسترن",
+  color: "white",
+  size: "34",
+  reviews: {
+    rate: 3.5,
+    totalReviewers: "۵٫۸ هزار",
+  },
+  price: {
+    regular: 100000.0,
+    sale: 300000.0,
+    currency: "ریال",
+    discount: "-۷۰٪",
+  },
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png 1024w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-1.png 1024w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+      alt: "پیراهن گلدوزی اسب داکوتا وسترن",
+      width: 1024,
+      height: 1536,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-1.png",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png 1024w, /block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png 1024w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png",
+      alt: "پیراهن گلدوزی اسب داکوتا وسترن",
+      width: 1024,
+      height: 1536,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png 1086w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png",
+      alt: "پیراهن گلدوزی اسب داکوتا وسترن",
+      width: 1086,
+      height: 1448,
+      sizes: "(max-width: 1240px) 100vw, 60vw",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png",
+    },
+  ],
+  hinges: {
+    size: {
+      label: "سایز",
+      id: "size",
+      name: "size",
+      options: [
+        {
+          id: "34",
+          value: "34",
+          label: "34",
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "36",
+          value: "36",
+          label: "36",
+          stockInfo: {
+            stockStatusCode: "LOW_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "38",
+          value: "38",
+          label: "38",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "40",
+          value: "40",
+          label: "40",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "42",
+          value: "42",
+          label: "42",
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK" as StockStatusCode,
+          },
+        },
+      ],
+    },
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "white",
+          value: "white",
+          label: "سفید",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png",
+            alt: "سفید",
+          },
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "pink",
+          value: "pink",
+          label: "صورتی",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png",
+            alt: "صورتی",
+          },
+          stockInfo: {
+            stockStatusCode: "IN_STOCK" as StockStatusCode,
+          },
+        },
+        {
+          id: "blue",
+          value: "blue",
+          label: "آبی",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+            alt: "آبی",
+          },
+          stockInfo: {
+            stockStatusCode: "OUT_OF_STOCK" as StockStatusCode,
+          },
+        },
+      ],
+    },
+  } as Record<FieldName, Hinges>,
+  summary:
+    "استایل خود را از روزمره تا مجلسی به‌سرعت تغییر دهید و برای هر موقعیتی آماده باشید.",
+  services: [
+    "ارسال رایگان برای خریدهای بالای ۵۰ یورو",
+    "تحویل فردا با ارسال روز بعد",
+  ],
+  accordion: [
+    {
+      title: "توضیحات",
+      content:
+        "پیراهن دکمه‌دار با برش مدرن و پارچه نرم پنبه‌ای. مناسب برای محیط کار و جلسات رسمی. طراحی مینیمال با جزئیات دوخت دقیق و بسته‌شدن‌های دکمه‌ای کلاسیک. برای حرفه‌ای‌هایی که به دنبال استایل شیک و راحت در محیط اداری هستند.",
+    },
+    {
+      title: "جنس و نگهداری",
+      content:
+        "این لباس از ۸۰٪ ویسکوز و ۲۰٪ پلی‌استر ساخته شده است. برای حفظ بهترین حالت، شستشوی دستی با آب سرد توصیه می‌شود. از سفیدکننده استفاده نکنید و به‌جای خشک‌کن، لباس را صاف روی سطح خشک کنید. در صورت نیاز با دمای پایین اتو کنید. برای خشک‌شویی ملایم نیز مناسب است.",
+    },
+    {
+      title: "ارسال و مرجوعی",
+      content:
+        "زمان ارسال، سیاست مرجوعی و نحوه تعویض کالا را اینجا بخوانید. در تمام مراحل همراه شما هستیم.",
+    },
+  ],
+};
+
+interface ProductDetail8Props {
+  className?: string;
+}
+
+const ProductDetail8 = ({ className }: ProductDetail8Props) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: PRODUCT_DETAILS.color,
+      size: PRODUCT_DETAILS.size,
+    },
+  });
+
+  const onSubmit = (data: FormType) => {
+    console.log(data);
+  };
+
+  const size = form.watch("size");
+
+  const hinges = PRODUCT_DETAILS.hinges;
+  const stockInfo = useMemo(() => {
+    return hinges?.size?.options?.find((item) => item.value === size)
+      ?.stockInfo;
+  }, [hinges, size]);
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="mx-auto w-full max-w-415 px-7.5">
+        <div className="relative mt-5.5 grid grid-cols-1 gap-6 lg:grid-cols-5 lg:gap-18.5">
+          <div className="lg:col-span-3">
+            <ProductImages
+              images={PRODUCT_DETAILS.images}
+              galleryID="product-detail-8-gallery"
+              availability={!(stockInfo?.stockStatusCode === "OUT_OF_STOCK")}
+              discount={PRODUCT_DETAILS.price.discount}
+            />
+          </div>
+          <div className="sticky top-10 self-start lg:col-span-2">
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col gap-2.5">
+                <h1 className="text-xl leading-normal font-bold">
+                  {PRODUCT_DETAILS.name}
+                </h1>
+                <Reviews
+                  rate={PRODUCT_DETAILS.reviews.rate}
+                  totalReviewers={PRODUCT_DETAILS.reviews.totalReviewers}
+                />
+              </div>
+              <div className="flex flex-wrap items-baseline gap-1 text-lg">
+                <div
+                  data-sale={!!PRODUCT_DETAILS.price.sale}
+                  aria-label="قیمت اصلی"
+                  className="data-[sale=true]:text-red-600 data-[sale=true]:line-through"
+                >
+                  {formatCurrency(
+                    PRODUCT_DETAILS.price.regular,
+                    PRODUCT_DETAILS.price.currency,
+                  )}
+                </div>
+                {PRODUCT_DETAILS.price.sale ? (
+                  <div aria-label="قیمت با تخفیف" className="text-primary">
+                    {formatCurrency(
+                      PRODUCT_DETAILS.price.sale,
+                      PRODUCT_DETAILS.price.currency,
+                    )}
+                  </div>
+                ) : null}
+              </div>
+              <p className="text-sm leading-[1.8]">{PRODUCT_DETAILS.summary}</p>
+              <ProductForm
+                hinges={PRODUCT_DETAILS.hinges}
+                form={form}
+                onSubmit={onSubmit}
+                stockInfo={stockInfo}
+              />
+              <ServicesList services={PRODUCT_DETAILS.services} />
+              <ProductInfoSection info={PRODUCT_DETAILS.accordion} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductImages = ({
+  images,
+  galleryID,
+  availability,
+  discount,
+}: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = () => setCurrent(api.selectedScrollSnap() + 1);
+    updateCurrent();
+    api.on("select", updateCurrent);
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api]);
+
+  if (!images) return;
+
+  return (
+    <div className="pswp-gallery" id={galleryID}>
+      <div className="relative">
+        <Carousel
+          opts={{
+            loop: true,
+            breakpoints: {
+              "(min-width: 1024px)": {
+                active: false,
+                align: "start",
+                loop: false,
+              },
+            },
+          }}
+          setApi={setApi}
+          className="w-full"
+        >
+          <CarouselContent className="-mt-2 lg:flex-col">
+            {images.map((img, index) => (
+              <CarouselItem
+                key={`product-detail-8-image-${index}`}
+                className="pt-2 lg:basis-1/3"
+              >
+                <AspectRatio ratio={0.797938144} className="overflow-hidden">
+                  <a
+                    href={img.src}
+                    data-pswp-width={img.width}
+                    data-pswp-height={img.height}
+                    data-pswp-srcset={img.srcset}
+                    target="_blank"
+                    rel="noreferrer"
+                    data-cropped="true"
+                    className="hover:cursor-zoom-in"
+                  >
+                    <img
+                      srcSet={img.srcset}
+                      alt={img.alt}
+                      width={img.width}
+                      height={img.height}
+                      sizes={img.sizes}
+                      className="block size-full object-cover object-center"
+                    />
+                  </a>
+                </AspectRatio>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="lg:hidden">
+            <CarouselPrevious className="start-4 size-11 border-0 bg-primary/20 hover:bg-primary/30 [&>svg]:!size-7 [&>svg]:stroke-primary-foreground" />
+            <CarouselNext className="end-4 size-11 border-0 bg-primary/20 hover:bg-primary/30 [&>svg]:!size-7 [&>svg]:stroke-primary-foreground" />
+          </div>
+        </Carousel>
+        <div className="pointer-events-none absolute top-4 start-4 flex items-center gap-2">
+          <Badge variant="destructive">حراج {discount}</Badge>
+          {availability === false ? <Badge>پیش‌سفارش</Badge> : null}
+        </div>
+      </div>
+      <div className="mt-5">
+        <ul className="flex items-center justify-center md:hidden">
+          {images.map((_, index) => (
+            <li
+              className="shrink-0"
+              key={`product-detail-8-indicator-${index}`}
+            >
+              <button
+                onClick={() => api?.scrollTo(index)}
+                data-state={index + 1 === current ? "active" : "inactive"}
+                type="button"
+                className="flex size-4 duration-200 data-[state=active]:[&>span]:bg-primary"
+              >
+                <span className="m-auto size-2 rounded-full bg-primary/30"></span>
+              </button>
+            </li>
+          ))}
+        </ul>
+        <ul className="hidden w-full max-w-full items-center justify-center gap-2 overflow-auto py-0.5 md:flex lg:hidden">
+          {images.map((img, index) => (
+            <li
+              className="h-16 shrink-0 grow-0 basis-13.5"
+              key={`product-detail-8-thumbnail-${index}`}
+            >
+              <button
+                onClick={() => api?.scrollTo(index)}
+                data-state={index + 1 === current ? "active" : "inactive"}
+                type="button"
+                className="block size-full ring-foreground transition-shadow duration-200 data-[state=active]:ring-2"
+              >
+                <img
+                  src={img.thumbnail}
+                  alt={img.alt}
+                  className="block size-full object-cover object-center"
+                />
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+const Reviews = ({ rate, totalReviewers }: ReviewsProps) => {
+  const renderStars = () => {
+    const fullStars = Math.floor(rate);
+    const hasHalfStar = rate % 1 >= 0.5;
+    const emptyStars = MAX_STARS - fullStars - (hasHalfStar ? 1 : 0);
+
+    const stars = [];
+
+    for (let i = 0; i < fullStars; i++) {
+      stars.push(
+        <Star
+          key={`product-detail-8-star-full-${i}`}
+          className="size-3.5 fill-black stroke-black"
+        />,
+      );
+    }
+
+    if (hasHalfStar) {
+      stars.push(
+        <div key="product-detail-8-half-star" className="relative size-3.5">
+          <StarHalf className="absolute top-0 end-0 size-full fill-black stroke-black dark:invert" />
+          <StarHalf className="absolute top-0 start-0 size-full -scale-x-100 fill-black/15 stroke-black/15 dark:invert" />
+        </div>,
+      );
+    }
+
+    for (let i = 0; i < emptyStars; i++) {
+      stars.push(
+        <Star
+          key={`product-detail-8-star-empty-${i}`}
+          className="size-3.5 fill-black/15 stroke-black/15 dark:invert"
+        />,
+      );
+    }
+
+    return stars;
+  };
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="flex items-center gap-0.5">{renderStars()}</div>
+        <Button
+          variant="link"
+          className="h-fit p-0 leading-none font-normal text-muted-foreground"
+        >
+          {totalReviewers} نظر
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+  size: z.string(),
+});
+
+const ProductForm = ({ hinges, form, onSubmit, stockInfo }: ProductForm) => {
+  const sizeHinges = hinges?.size;
+  const colorHinges = hinges?.color;
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex w-full flex-col gap-7"
+    >
+      {colorHinges && (
+        <Controller
+          control={form.control}
+          name={colorHinges.name}
+          render={({ field }) => (
+            <Field>
+              <ColorRadioGroup
+                field={field}
+                options={colorHinges.options}
+                label={colorHinges.label}
+              />
+            </Field>
+          )}
+        />
+      )}
+      <Controller
+        control={form.control}
+        name={sizeHinges.name}
+        render={({ field }) => (
+          <Field>
+            <SizeRadioGroup
+              field={field}
+              options={sizeHinges.options}
+              label={sizeHinges.label}
+            />
+          </Field>
+        )}
+      />
+
+      <StockMessege stockInfo={stockInfo} />
+      <div className="flex w-full shrink-0 basis-full flex-col gap-6">
+        {stockInfo?.stockStatusCode === "OUT_OF_STOCK" ? (
+          <Fragment>
+            <Button size="lg">پیش‌سفارش</Button>
+          </Fragment>
+        ) : (
+          <Button size="lg">افزودن به سبد</Button>
+        )}
+      </div>
+    </form>
+  );
+};
+
+const SizeRadioGroup = ({ options, label, field }: SizeRadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2.5">
+        <div className="flex w-full items-baseline justify-between gap-1">
+          <h2 className="text-sm leading-[1.8] font-semibold">{label}</h2>
+        </div>
+        <RadioGroup
+          {...field}
+          value={`${field.value}`}
+          onValueChange={(value) => {
+            if (value != field.value && value) {
+              field.onChange(value);
+            }
+          }}
+          className="flex w-full flex-wrap items-start gap-2"
+        >
+          {options &&
+            options.map((item, index) => (
+              <div key={`product-detail-8-size-${index}`}>
+                <label
+                  htmlFor={item.id}
+                  className="relative flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-md border-1 text-sm leading-snug font-normal shadow-xs has-checked:ring has-data-[disabled=true]:text-muted-foreground has-checked:has-data-[disabled=true]:text-muted-foreground"
+                >
+                  <RadioGroupItem
+                    id={item.id}
+                    className="sr-only"
+                    value={item.value}
+                    aria-label={`انتخاب ${item.label}`}
+                    data-disabled={
+                      item.stockInfo.stockStatusCode === "OUT_OF_STOCK"
+                    }
+                  />
+                  <div>{item.label}</div>
+                  {item.stockInfo.stockStatusCode === "OUT_OF_STOCK" && (
+                    <span className="absolute top-0 bottom-0 start-1/2 z-10 block h-full w-0 rotate-45 border-s"></span>
+                  )}
+                </label>
+              </div>
+            ))}
+        </RadioGroup>
+      </div>
+    </div>
+  );
+};
+
+const ColorRadioGroup = ({ options, label, field }: ColorRadioGroupProps) => {
+  const colorRef = useRef<HTMLDivElement>(null);
+
+  const getColorName = (id: string) =>
+    options?.find((item) => item.id === id)?.label;
+
+  if (!options) return;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2.5">
+        <h2 className="text-sm leading-[1.8] font-semibold">
+          {label} <span ref={colorRef} className="text-sm font-normal"></span>
+        </h2>
+        <RadioGroup
+          {...field}
+          value={`${field.value}`}
+          onValueChange={(value) => {
+            if (value != field.value && value) {
+              field.onChange(value);
+            }
+          }}
+          className="flex w-full flex-wrap items-start gap-2"
+        >
+          {options &&
+            options.map((item, index) => (
+              <div key={`product-detail-8-color-${index}`}>
+                <label
+                  htmlFor={item.id}
+                  data-disabled={
+                    item.stockInfo.stockStatusCode === "OUT_OF_STOCK"
+                  }
+                  onMouseOver={() => {
+                    if (colorRef.current) {
+                      colorRef.current.innerHTML = item.label;
+                    }
+                  }}
+                  onMouseLeave={() => {
+                    if (colorRef.current) {
+                      colorRef.current.innerHTML =
+                        getColorName(field.value) || "";
+                    }
+                  }}
+                  aria-label={`انتخاب ${item.label}`}
+                  className="relative h-16 w-12.5 overflow-hidden rounded-md text-base leading-snug font-normal shadow-xs has-checked:ring-2"
+                >
+                  <RadioGroupItem
+                    id={item.id}
+                    className="sr-only"
+                    value={item.value}
+                    aria-label={`انتخاب ${item.label}`}
+                  />
+                  <img
+                    src={item?.image?.src}
+                    alt={item?.image?.alt}
+                    className="block size-full object-cover object-center"
+                  />
+                  {item.stockInfo.stockStatusCode === "OUT_OF_STOCK" && (
+                    <span className="absolute top-0 bottom-0 start-1/2 z-10 block h-full w-0 rotate-45 border-s"></span>
+                  )}
+                </label>
+              </div>
+            ))}
+        </RadioGroup>
+      </div>
+    </div>
+  );
+};
+
+const StockMessege = ({ stockInfo }: StockMessageProps) => {
+  if (!stockInfo) return;
+
+  const { stockStatusCode, stockQuantity } = stockInfo;
+  const statusColor = STATUS_CONFIG?.[stockStatusCode].color;
+
+  return (
+    <div className="inline-flex items-center gap-2.5">
+      <p
+        className="text-sm leading-[1.4]"
+        style={{
+          color: `var(--color-${statusColor}-600)`,
+        }}
+      >
+        {stockStatusCode === "LOW_STOCK"
+          ? STATUS_CONFIG.LOW_STOCK.getMessage(stockQuantity)
+          : STATUS_CONFIG[stockStatusCode].message}
+      </p>
+    </div>
+  );
+};
+
+const ServicesList = ({ services }: { services: string[] }) => {
+  if (!services) return;
+
+  return (
+    <ul className="flex flex-col">
+      {services.map((text, index) => (
+        <li
+          className="flex items-center gap-1.5"
+          key={`product-detail-8-service-${index}`}
+        >
+          <Check className="size-4 stroke-3" />
+          <p className="text-sm leading-[1.8]">{text}</p>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const ProductInfoSection = ({ info }: ProductInfoSectionProps) => {
+  if (!info) return;
+
+  return (
+    <Accordion type="multiple" className="w-full border-t">
+      {info.map((item, index) => (
+        <AccordionItem
+          value={item.title}
+          key={`product-detail-8-info-${index}`}
+        >
+          <AccordionTrigger className="text-sm leading-[1.2] hover:no-underline">
+            {item.title}
+          </AccordionTrigger>
+          <AccordionContent className="text-base text-balance">
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+export { ProductDetail8 };
diff --git a/blocks/product-detail9.tsx b/blocks/product-detail9.tsx
new file mode 100644
index 0000000..07dc663
--- /dev/null
+++ b/blocks/product-detail9.tsx
@@ -0,0 +1,453 @@
+"use client";
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useEffect, useRef, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Field } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+type StockStatusCode = "IN_STOCK" | "OUT_OF_STOCK";
+
+interface StockInfo {
+  stockStatusCode: StockStatusCode;
+  stockQuantity?: number;
+}
+
+interface PriceProps {
+  regular: number;
+  sale?: number;
+  currency: string;
+  stockInfo?: StockInfo;
+}
+
+type option = {
+  id: string;
+  label: string;
+  value: string;
+};
+
+interface Hinges {
+  label: string;
+  id?: string;
+  name: FieldName;
+  options?: option[];
+}
+
+interface ProductFormProps {
+  hinges: Record<FieldName, Hinges>;
+  selected: {
+    size: string;
+  };
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+interface RadioGroupProps {
+  options?: Array<option>;
+  label: string;
+  field: ControllerRenderProps<FormType>;
+}
+
+interface ProductImagesProps {
+  images: Array<{
+    srcset: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    sizes: string;
+  }>;
+  galleryID: string;
+}
+
+interface ProductInfoProps {
+  info: Array<{
+    label: string;
+    value: string;
+  }>;
+}
+
+const PRODUCT_DETAILS = {
+  name: "پالس‌ویر ۷۶۰ ال‌ایکس  طوفان خاک قاهره",
+  size: "8",
+  price: {
+    regular: 580000.0,
+    sale: 530000.0,
+    currency: "ریال",
+  },
+  info: [
+    {
+      label: "مدل",
+      value: "Pulsewear 760",
+    },
+    {
+      label: "استایل",
+      value: "CZ5594-100",
+    },
+    {
+      label: "سال",
+      value: "۲۲۵",
+    },
+  ],
+  description:
+    "هنرمند مشهور بریتانیایی سلاح لوری با تراکنیت همکاری می‌کند تا سیلوئت ۷۰۰R را خلق کند. مدل تراکنیت ۷۰۰R سلاح اکلیپس مه، رویه بافتنی خاکستری طوفانی دارد که با روکش‌های سوئد آبی مه‌آلود و جزئیات ابسیدین تیره ترکیب شده است. برند تراکنیت روی پنل کناری، پاشنه و زبانه کفی دیده می‌شود. در پایان، میانسول مه‌رنگ با زیره ذغالی خال‌خالی برای کنتراست و بافت تکمیل شده است.",
+  hinges: {
+    size: {
+      label: "سایز",
+      id: "size",
+      name: "size" as const,
+      options: [
+        {
+          id: "8",
+          value: "8",
+          label: "8",
+        },
+        {
+          id: "8.5",
+          value: "8.5",
+          label: "8.5",
+        },
+        {
+          id: "9",
+          value: "9",
+          label: "9",
+        },
+        {
+          id: "9.5",
+          value: "9.5",
+          label: "9.5",
+        },
+        {
+          id: "10",
+          value: "10",
+          label: "10",
+        },
+        {
+          id: "10.5",
+          value: "10.5",
+          label: "10.5",
+        },
+        {
+          id: "11",
+          value: "11",
+          label: "11",
+        },
+        {
+          id: "11.5",
+          value: "11.5",
+          label: "11.5",
+        },
+        {
+          id: "12",
+          value: "12",
+          label: "12",
+        },
+        {
+          id: "13",
+          value: "13",
+          label: "13",
+        },
+      ],
+    },
+  },
+  images: [
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529146-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529146-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529146-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529146-3.jpg",
+      alt: "پالس‌ویر ۷۶۰ ال‌ایکس  طوفان خاک قاهره",
+      width: 1920,
+      height: 2400,
+      sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529147-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529147-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529147-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529147-3.jpg",
+      alt: "پالس‌ویر ۷۶۰ ال‌ایکس  طوفان خاک قاهره",
+      width: 1920,
+      height: 2400,
+      sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+    },
+    {
+      srcset:
+        "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529148-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529148-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529148-1.jpg 640w",
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-melvin-buezo-1253763-2529148-3.jpg",
+      alt: "پالس‌ویر ۷۶۰ ال‌ایکس  طوفان خاک قاهره",
+      width: 1920,
+      height: 2400,
+      sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+    },
+  ],
+};
+
+interface ProductDetail9Props {
+  className?: string;
+}
+
+const ProductDetail9 = ({ className }: ProductDetail9Props) => {
+  return (
+    <section className={cn("font-ubuntu py-32", className)}>
+      <div className="relative grid w-full grid-cols-1 border-y border-primary lg:grid-cols-2">
+        <div>
+          <ProductImages
+            images={PRODUCT_DETAILS.images}
+            galleryID="gallery-9"
+          />
+        </div>
+        <div className="sticky top-4.5 self-start py-4.5">
+          <div className="flex flex-col gap-9 overflow-hidden px-4.5">
+            <div>
+              <h1 className="text-3xl leading-none font-normal lg:text-2xll">
+                {PRODUCT_DETAILS.name}
+              </h1>
+              <div className="mt-4.5">
+                <Price
+                  regular={PRODUCT_DETAILS.price.regular}
+                  sale={PRODUCT_DETAILS.price.sale}
+                  currency={PRODUCT_DETAILS.price.currency}
+                />
+              </div>
+            </div>
+            <ProductForm
+              hinges={PRODUCT_DETAILS.hinges}
+              selected={{
+                size: PRODUCT_DETAILS.size,
+              }}
+            />
+            <div className="-mx-4.5">
+              <ProductInfo info={PRODUCT_DETAILS.info} />
+            </div>
+
+            <p className="text-lg">{PRODUCT_DETAILS.description}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductInfo = ({ info }: ProductInfoProps) => {
+  if (!info) return;
+
+  return (
+    <ul className="flex flex-col border-t border-primary text-lg leading-tight">
+      {info.map((item, index) => (
+        <li
+          className="flex border-primary"
+          key={`product-detail-9-info-${index}`}
+        >
+          <div className="shrink-0 grow-0 basis-36 border-e border-b border-inherit px-4.5 py-2.5">
+            {item.label}
+          </div>
+          <div className="flex-1 border-b border-inherit px-4.5 py-2.5">
+            {item.value}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const ProductImages = ({ images, galleryID }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api]);
+
+  if (!images) return;
+
+  return (
+    <div className="pswp-gallery border-e border-primary" id={galleryID}>
+      <Carousel
+        opts={{
+          breakpoints: {
+            "(min-width: 1024px)": { active: false },
+          },
+        }}
+        setApi={setApi}
+        className="w-full"
+      >
+        <CarouselContent className="ms-0 lg:flex-col">
+          {images.map((item, index) => {
+            return (
+              <CarouselItem
+                key={`product-detail-9-image-${index}`}
+                className="border-b border-primary ps-0 last:border-b-0"
+              >
+                <AspectRatio ratio={1}>
+                  <a
+                    href={item.src}
+                    data-pswp-width={item.width}
+                    data-pswp-height={item.height}
+                    data-pswp-srcset={item.srcset}
+                    target="_blank"
+                    rel="noreferrer"
+                    data-cropped="true"
+                  >
+                    <img
+                      srcSet={item.srcset}
+                      alt={item.alt}
+                      sizes={item.sizes}
+                      className="block size-full object-cover object-center"
+                    />
+                  </a>
+                </AspectRatio>
+              </CarouselItem>
+            );
+          })}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  );
+};
+
+const Price = ({ regular, sale, currency }: PriceProps) => {
+  if (!regular || !currency) return;
+
+  const formatCurrency = (
+    value: number,
+    currency: string = "ریال",
+    locale: string = "fa-IR",
+  ) => {
+    return `${value.toLocaleString(locale)} ${currency}`;
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+      {sale ? (
+        <div
+          data-sale={!!sale}
+          aria-label="قیمت با تخفیف"
+          className="text-xl leading-[0.9] data-[sale=true]:text-foreground"
+        >
+          {formatCurrency(sale, currency)}
+        </div>
+      ) : null}
+      <div
+        data-sale={!!sale}
+        aria-label="قیمت اصلی"
+        className="text-xl leading-[0.9] data-[sale=true]:font-normal data-[sale=true]:text-muted-foreground data-[sale=true]:line-through"
+      >
+        {formatCurrency(regular, currency)}
+      </div>
+    </div>
+  );
+};
+
+const formSchema = z.object({
+  size: z.string(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      size: selected.size,
+    },
+  });
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const sizeHinges = hinges?.size;
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col gap-9"
+    >
+      <Controller
+        control={form.control}
+        name={sizeHinges.name}
+        render={({ field }) => (
+          <Field>
+            <h2 className="w-16 text-base leading-snug">{sizeHinges.label}</h2>
+            <SizeRadioGroup
+              field={field}
+              options={sizeHinges.options}
+              label={sizeHinges.label}
+            />
+          </Field>
+        )}
+      />
+      <div className="flex max-w-3xl flex-col gap-2.5">
+        <Button size="lg" variant="outline">
+          افزودن به سبد
+        </Button>
+        <Button size="lg">خرید فوری</Button>
+      </div>
+    </form>
+  );
+};
+
+const SizeRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap justify-start gap-2"
+    >
+      {options &&
+        options.map((item, index) => (
+          <div key={`product-detail-9-size-${index}`}>
+            <label
+              htmlFor={item.id}
+              className="flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-md border px-2.5 text-center text-sm leading-tight font-normal shadow-xs has-checked:border-primary has-checked:bg-background"
+            >
+              <RadioGroupItem
+                id={item.id}
+                className="sr-only"
+                value={item.value}
+                aria-label={`انتخاب ${item.label}`}
+              />
+              <div>{item.label}</div>
+            </label>
+          </div>
+        ))}
+    </RadioGroup>
+  );
+};
+
+export { ProductDetail9 };
diff --git a/blocks/product-gallery1.tsx b/blocks/product-gallery1.tsx
new file mode 100644
index 0000000..f6aa7c3
--- /dev/null
+++ b/blocks/product-gallery1.tsx
@@ -0,0 +1,102 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type ProductImages = {
+  srcset: string;
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  sizes: string;
+}[];
+
+const PRODUCT_IMAGES: ProductImages = [
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png 904w, /block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-1.png 482w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
+    alt: "",
+    width: 904,
+    height: 1200,
+    sizes: "(min-width: 904px) 904px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-1.png 360w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png",
+    alt: "",
+    width: 675,
+    height: 1200,
+    sizes: "(min-width: 675px) 675px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-2.png 900w, /block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-m-2.png 900w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-2.png",
+    alt: "",
+    width: 900,
+    height: 1200,
+    sizes: "(min-width: 900px) 900px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Tattooed-Streetwear-Look-2.png 1050w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Tattooed-Streetwear-Look-2.png",
+    alt: "",
+    width: 1050,
+    height: 1498,
+    sizes: "(min-width: 1050px) 1050px, 100vw",
+  },
+];
+interface ProductGallery1Props {
+  className?: string;
+}
+
+const ProductGallery1 = ({ className }: ProductGallery1Props) => {
+  return (
+    <section className={cn("mx-auto w-full max-w-160", className)}>
+      <Carousel
+        opts={{
+          breakpoints: {
+            "(min-width: 768px)": {
+              active: false,
+            },
+          },
+        }}
+      >
+        <CarouselContent className="gap-4 md:m-0 md:grid md:grid-cols-3 xl:gap-5">
+          {PRODUCT_IMAGES.map((img, index) => (
+            <CarouselItem
+              className="first:col-span-3 md:p-0"
+              key={`product-gallery-1-image-${index}`}
+            >
+              <AspectRatio ratio={1} className="overflow-hidden rounded-lg">
+                <img
+                  srcSet={img.srcset}
+                  alt={img.alt}
+                  width={img.width}
+                  height={img.height}
+                  sizes={img.sizes}
+                  className="block size-full object-cover object-center"
+                />
+              </AspectRatio>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <div className="md:hidden">
+          <CarouselPrevious className="left-4" />
+          <CarouselNext className="right-4" />
+        </div>
+      </Carousel>
+    </section>
+  );
+};
+
+export { ProductGallery1 };
diff --git a/blocks/product-gallery2.tsx b/blocks/product-gallery2.tsx
new file mode 100644
index 0000000..5da6c2e
--- /dev/null
+++ b/blocks/product-gallery2.tsx
@@ -0,0 +1,315 @@
+"use client";
+import "photoswipe/style.css";
+
+import { ChevronLeft, ChevronRight, ZoomIn } from "lucide-react";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge, badgeVariants } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type ProductImages = {
+  srcset: string;
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  sizes: string;
+}[];
+
+interface ProductGallery2Props {
+  images: ProductImages;
+  galleryID: string;
+  className?: string;
+}
+
+const PRODUCT_IMAGES: ProductImages = [
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 427w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png 427w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-1.png 427w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-1.png 427w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-1.png 800w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 800w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-1.png 800w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+];
+
+const ProductGallery2 = ({
+  galleryID = "ProductGallery2",
+  images = PRODUCT_IMAGES,
+  className,
+}: ProductGallery2Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(1);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 right-5",
+          html: `
+            <button type="button" id="pswp-close" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+            </button>
+          `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 left-5",
+          html: `
+            <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+            </div>
+          `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+            let prevIndex = -1;
+
+            pswp.on("change", () => {
+              prevIndex = pswp.currIndex;
+              if (indicatorElem) {
+                indicatorElem.innerHTML = `${prevIndex + 1} / ${pswp.getNumItems()}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html: `
+          <div class="flex items-center justify-between px-4">
+            <button id="pswp-prev" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+            </button>
+            <button id="pswp-next" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+          </div>
+            
+          `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+          },
+        });
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+    setCurrent(api.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  if (!images) return;
+
+  return (
+    <section className={cn("mx-auto w-full max-w-170", className)}>
+      <div className="flex flex-col gap-3" id={galleryID}>
+        <Carousel
+          setApi={setApi}
+          opts={{
+            breakpoints: {
+              "(min-width: 768px)": {
+                active: false,
+              },
+            },
+          }}
+        >
+          <CarouselContent className="gap-2 md:m-0 md:grid md:grid-cols-2">
+            {images.map((img, index) => (
+              <CarouselItem
+                className="first:col-span-2 md:p-0"
+                key={`product-gallery-2-image-${index}`}
+              >
+                <AspectRatio ratio={1} className="overflow-hidden">
+                  <a
+                    href={img.src}
+                    data-pswp-width={img.width}
+                    data-pswp-height={img.height}
+                    target="_blank"
+                    rel="noreferrer"
+                    data-cropped="true"
+                    className="hover:cursor-zoom-in"
+                  >
+                    <img
+                      src={img.src}
+                      alt={img.alt}
+                      className="block size-full object-cover object-center"
+                    />
+                    <Badge
+                      className="pointer-events-none absolute top-3 left-3 size-8 rounded-full bg-background p-1.5 text-xs shadow md:hidden"
+                      variant="secondary"
+                    >
+                      <ZoomIn className="!size-3.5 stroke-muted-foreground" />
+                    </Badge>
+                  </a>
+                </AspectRatio>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        <div className="flex items-center justify-center gap-2.5 md:hidden">
+          <Button
+            disabled={!canScrollPrev}
+            size="icon"
+            variant="ghost"
+            onClick={() => api?.scrollPrev()}
+          >
+            <ChevronLeft className="size-3 stroke-1" />
+          </Button>
+          <p className="text-xs text-muted-foreground">
+            {current}/{images.length}
+          </p>
+          <Button
+            disabled={!canScrollNext}
+            size="icon"
+            variant="ghost"
+            onClick={() => api?.scrollNext()}
+          >
+            <ChevronRight className="size-3 stroke-1" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ProductGallery2 };
diff --git a/blocks/product-gallery3.tsx b/blocks/product-gallery3.tsx
new file mode 100644
index 0000000..e9aa4a2
--- /dev/null
+++ b/blocks/product-gallery3.tsx
@@ -0,0 +1,263 @@
+"use client";
+import "photoswipe/style.css";
+
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { badgeVariants } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type ProductImages = {
+  srcset: string;
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  sizes: string;
+}[];
+
+interface ProductGallery3Props {
+  images: ProductImages;
+  galleryID: string;
+  className?: string;
+}
+
+const PRODUCT_IMAGES: ProductImages = [
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764033-3.jpg 1086w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764033-2.jpg 1086w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764033-3.jpg",
+    alt: "",
+    width: 1086,
+    height: 1448,
+    sizes: "(min-width: 1086px) 1086px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png 904w, /block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-1.png 482w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
+    alt: "",
+    width: 904,
+    height: 1200,
+    sizes: "(min-width: 904px) 904px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-1.png 360w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-2.png",
+    alt: "",
+    width: 675,
+    height: 1200,
+    sizes: "(min-width: 675px) 675px, 100vw",
+  },
+];
+
+const ProductGallery3 = ({
+  images = PRODUCT_IMAGES,
+  galleryID = "ProductGallery3",
+  className,
+}: ProductGallery3Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(1);
+
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 right-5",
+          html: `
+              <button type="button" id="pswp-close" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+              </button>
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 left-5",
+          html: `
+              <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+              </div>
+            `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+            let prevIndex = -1;
+
+            pswp.on("change", () => {
+              prevIndex = pswp.currIndex;
+              if (indicatorElem) {
+                indicatorElem.innerHTML = `${prevIndex + 1} / ${pswp.getNumItems()}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html: `
+            <div class="flex items-center justify-between px-4">
+              <button id="pswp-prev" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              </button>
+              <button id="pswp-next" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </button>
+            </div>
+              
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+          },
+        });
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  if (!images) return;
+
+  return (
+    <section className={cn("mx-auto w-full max-w-228", className)}>
+      <div id={galleryID} className="flex flex-col gap-5">
+        <Carousel
+          setApi={setApi}
+          opts={{
+            breakpoints: {
+              "(min-width: 768px)": {
+                active: false,
+              },
+            },
+          }}
+          className="w-full"
+        >
+          <CarouselContent className="ml-0 grid-cols-2 md:grid">
+            {images.map((img, index) => (
+              <CarouselItem
+                className="pl-0 md:first:col-span-2"
+                key={`product-gallery-3-image-${index}`}
+              >
+                <AspectRatio ratio={0.8} className="overflow-hidden">
+                  <a
+                    href={img.src}
+                    data-pswp-width={img.width}
+                    data-pswp-height={img.height}
+                    data-pswp-srcset={img.srcset}
+                    target="_blank"
+                    rel="noreferrer"
+                    data-cropped="true"
+                  >
+                    <img
+                      srcSet={img.srcset}
+                      alt={img.alt}
+                      sizes={img.sizes}
+                      className="block size-full object-cover object-center"
+                    />
+                  </a>
+                </AspectRatio>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 md:hidden">
+            <ol className="my-3 flex items-center justify-center">
+              {images.map((_, index) => (
+                <button
+                  onClick={() => api?.scrollTo(index)}
+                  data-current={index + 1 === current}
+                  key={`product-detail-3-image-indicator-${index}`}
+                  className="flex size-4 data-[current=true]:[&>span]:bg-primary"
+                >
+                  <span className="m-auto block size-2 rounded-full bg-primary/50"></span>
+                </button>
+              ))}
+            </ol>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { ProductGallery3 };
diff --git a/blocks/product-gallery4.tsx b/blocks/product-gallery4.tsx
new file mode 100644
index 0000000..36af312
--- /dev/null
+++ b/blocks/product-gallery4.tsx
@@ -0,0 +1,412 @@
+"use client";
+import "photoswipe/style.css";
+
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { badgeVariants } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type ProductImages = {
+  srcset: string;
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  sizes: string;
+  thumbnail: string;
+}[];
+
+interface ProductGallery4Props {
+  images: ProductImages;
+  galleryID: string;
+  className?: string;
+}
+
+const PRODUCT_IMAGES = [
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 427w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png 427w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-1.png 427w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-1.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-1.png 427w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-1.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-1.png 800w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-1.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 800w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-1.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-1.png 800w",
+    src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-1.png",
+    alt: "",
+    width: 800,
+    height: 1200,
+    sizes: "(min-width: 800px) 800px, 100vw",
+  },
+];
+
+const ProductGallery4 = ({
+  images = PRODUCT_IMAGES,
+  galleryID = "ProductGallery4",
+  className,
+}: ProductGallery4Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const ignoreScroll = useRef(false);
+  const isDesktop = useMediaQuery("(width >= 1024px)");
+  const slideHeightRef = useRef<number | null>(null);
+
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 right-5",
+          html: `
+              <button type="button" id="pswp-close" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+              </button>
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 left-5",
+          html: `
+              <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+              </div>
+            `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+            let prevIndex = -1;
+
+            pswp.on("change", () => {
+              prevIndex = pswp.currIndex;
+              if (indicatorElem) {
+                indicatorElem.innerHTML = `${prevIndex + 1} / ${pswp.getNumItems()}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html: `
+            <div class="flex items-center justify-between px-4">
+              <button id="pswp-prev" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              </button>
+              <button id="pswp-next" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </button>
+            </div>
+              
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+          },
+        });
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [galleryID]);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  useEffect(() => {
+    if (!api || !isDesktop) return;
+
+    const slides = api.slideNodes();
+    if (slides.length === 0) return;
+
+    slideHeightRef.current = slides[0].offsetHeight;
+
+    let lastIndex = -1;
+    let ticking = false;
+
+    const updateCurrentIndex = () => {
+      if (!slideHeightRef.current) return;
+      const scrollTop = window.scrollY;
+      const slideHeight = slideHeightRef.current;
+      const index = Math.round(scrollTop / slideHeight);
+
+      if (index !== lastIndex) {
+        lastIndex = index;
+        setCurrent(index);
+      }
+    };
+
+    const onScroll = () => {
+      if (ignoreScroll.current || ticking) return;
+
+      ticking = true;
+      requestAnimationFrame(() => {
+        updateCurrentIndex();
+        ticking = false;
+      });
+    };
+
+    const onResize = () => {
+      const newHeight = slides[0].offsetHeight;
+      slideHeightRef.current = newHeight;
+      updateCurrentIndex();
+    };
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [api, isDesktop, setCurrent]);
+
+  const handleThumbnailClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const target = e.currentTarget;
+    const index = Number(target.getAttribute("data-index"));
+
+    const slides = api?.slideNodes();
+
+    if (slides && index >= 0 && index < slides.length) {
+      const offsetTop =
+        slides[index].getBoundingClientRect().top + window.scrollY;
+      const headerOffset = 80;
+      ignoreScroll.current = true;
+      window.scrollTo({
+        top: offsetTop - headerOffset,
+        behavior: "smooth",
+      });
+      setCurrent(index);
+
+      setTimeout(() => {
+        ignoreScroll.current = false;
+      }, 500);
+    }
+  };
+
+  if (!images) return;
+
+  return (
+    <section className={cn("mx-auto w-full max-w-190", className)}>
+      <div id={galleryID} className="relative flex justify-center gap-20">
+        <div className="sticky top-5 hidden self-start lg:block">
+          <ol className="flex max-h-[calc(100dvh-2.5rem)] w-fit flex-col gap-4 overflow-y-auto p-px [-ms-overflow-style:none] [scrollbar-width:none] [::-webkit-scrollbar]:hidden">
+            {images.map((img, index) => (
+              <li
+                className="w-14 shrink-0 grow-0"
+                key={`product-gallery-4-image-thumbnail-${index}`}
+              >
+                <button
+                  data-state={index === current ? "active" : "inactive"}
+                  data-index={index}
+                  type="button"
+                  onClick={handleThumbnailClick}
+                  className="block aspect-square w-14 overflow-hidden ring-foreground transition-shadow duration-200 data-[state=active]:ring"
+                >
+                  <img
+                    src={img.thumbnail}
+                    alt={img.alt}
+                    className="block size-full object-cover object-center"
+                  />
+                </button>
+              </li>
+            ))}
+          </ol>
+        </div>
+        <Carousel
+          setApi={setApi}
+          opts={{
+            breakpoints: {
+              "(min-width: 1024px)": {
+                active: false,
+              },
+            },
+          }}
+          className="w-full"
+        >
+          <CarouselContent className="-ml-5 md:-ml-6 lg:ml-0 lg:flex-col">
+            {images.map((img, index) => (
+              <CarouselItem
+                className="pl-5 md:pl-6 lg:pl-0"
+                key={`product-gallery-4-image-${index}`}
+              >
+                <AspectRatio ratio={1} className="size-full overflow-hidden">
+                  <a
+                    href={img.src}
+                    data-pswp-width={img.width}
+                    data-pswp-height={img.height}
+                    data-pswp-srcset={img.srcset}
+                    target="_blank"
+                    rel="noreferrer"
+                    data-cropped="true"
+                  >
+                    <img
+                      srcSet={img.srcset}
+                      alt={img.alt}
+                      sizes={img.sizes}
+                      className="block size-full object-cover object-center"
+                    />
+                  </a>
+                </AspectRatio>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="lg:hidden">
+            <ol className="mt-4 flex items-center justify-center">
+              {images.map((_, index) => (
+                <button
+                  onClick={() => api?.scrollTo(index)}
+                  data-current={index + 1 === current}
+                  key={`product-gallery-4-image-indicator-${index}`}
+                  className="flex size-5.5 data-[current=true]:[&>span]:bg-primary"
+                >
+                  <span className="m-auto block size-1.5 rounded-full bg-primary/50"></span>
+                </button>
+              ))}
+            </ol>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { ProductGallery4 };
diff --git a/blocks/product-gallery7.tsx b/blocks/product-gallery7.tsx
new file mode 100644
index 0000000..45faf4e
--- /dev/null
+++ b/blocks/product-gallery7.tsx
@@ -0,0 +1,345 @@
+"use client";
+import "photoswipe/style.css";
+
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge, badgeVariants } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+type ProductImages = {
+  srcset: string;
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  sizes: string;
+  thumbnail: string;
+}[];
+
+interface ProductGallery7Props {
+  images: ProductImages;
+  galleryID: string;
+  className?: string;
+}
+
+const PRODUCT_IMAGES: ProductImages = [
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-3.jpg 2160w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-1.jpg 640w",
+    src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-3.jpg",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-1.jpg",
+    sizes: "(min-width: 2160px) 2160px, (min-width: 1920px) 1920px, 100vw",
+    alt: "",
+    width: 2160,
+    height: 2700,
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-1.jpg 640w",
+    src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-3.jpg",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/brittney-weng-CSquI0aw_Rg-unsplash-1.jpg",
+    sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+    alt: "",
+    width: 2400,
+    height: 3000,
+  },
+  {
+    srcset:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-3.jpg 2400w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-2.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-1.jpg 640w",
+    src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-3.jpg",
+    thumbnail:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/kadarius-seegars-Mxy5gokl8mE-unsplash-1.jpg",
+    sizes: "(min-width: 2400px) 2400px, (min-width: 1920px) 1920px, 100vw",
+    alt: "",
+    width: 2400,
+    height: 3600,
+  },
+];
+
+const ProductGallery7 = ({
+  images = PRODUCT_IMAGES,
+  galleryID = "ProductGallery7",
+  className,
+}: ProductGallery7Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  const thumbnailRef = useRef<HTMLUListElement>(null);
+  const isDesktop = useMediaQuery("(width >= 900px)");
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + galleryID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 end-5",
+          html: `
+              <button type="button" id="pswp-close" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+              </button>
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 start-5",
+          html: `
+              <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+              </div>
+            `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+
+            pswp.on("change", () => {
+              if (indicatorElem) {
+                indicatorElem.innerHTML = `${pswp.currIndex + 1} / ${pswp.getNumItems()}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html: `
+            <div class="flex items-center justify-between px-4">
+              <button type="button" id="pswp-prev" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </button>
+              <button type="button" id="pswp-next" class="${buttonClassName}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              </button>
+            </div>
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+          },
+        });
+      }
+    });
+
+    lightbox.init();
+    lightboxRef.current = lightbox;
+
+    return () => {
+      lightbox.destroy();
+      lightboxRef.current = null;
+    };
+  }, [galleryID]);
+
+  const onSelect = useCallback((carouselApi: CarouselApi) => {
+    if (!carouselApi) return;
+    setCurrent(carouselApi.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  useEffect(() => {
+    const lightbox = lightboxRef.current;
+    if (!lightbox || !api) return;
+
+    const syncCarousel = () => {
+      api.scrollTo(lightbox.pswp?.currIndex || 0);
+    };
+
+    lightbox.on("change", syncCarousel);
+
+    return () => {
+      lightbox.off("change", syncCarousel);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (!previewRef.current || !thumbnailRef.current) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (!isDesktop && thumbnailRef.current) {
+        thumbnailRef.current.style.height = `${entry.contentRect.height}px`;
+      }
+    });
+
+    if (!isDesktop) {
+      observer.observe(previewRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [isDesktop]);
+
+  if (!images) return;
+
+  return (
+    <section dir="rtl" className={cn("mx-auto w-full max-w-193", className)}>
+      <div className="flex w-full items-start justify-center gap-4">
+        <ul
+          ref={thumbnailRef}
+          className="hidden w-20 shrink-0 grow-0 flex-col gap-2 overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] md:flex [::-webkit-scrollbar]:hidden"
+        >
+          {images.map((img, index) => (
+            <li
+              className="w-full shrink-0"
+              key={`product-gallery-7-thumbnail-${index}`}
+            >
+              <button
+                onClick={() => api?.scrollTo(index)}
+                data-state={index + 1 === current ? "active" : "inactive"}
+                type="button"
+                className="relative block size-20 overflow-hidden rounded-[0.875rem] after:pointer-events-none after:absolute after:inset-0 after:z-10 after:block after:size-full after:rounded-[0.875rem] after:inset-ring-2 after:inset-ring-transparent after:transition-shadow after:duration-200 after:content-[''] data-[state=active]:after:inset-ring-current"
+              >
+                <img
+                  src={img.thumbnail}
+                  alt={img.alt}
+                  className="block size-full object-cover object-center"
+                  loading="lazy"
+                />
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="w-full md:max-w-2xl">
+          <div className="group/product-photos relative h-fit w-full">
+            <Badge className="absolute top-4 start-4 z-10 rounded-full bg-lime-200 px-4 py-1 text-base leading-snug text-black">
+              New
+            </Badge>
+            <div className="pswp-gallery" id={galleryID}>
+              <Carousel
+                dir="rtl"
+                setApi={setApi}
+                opts={{ direction: "rtl", align: "start" }}
+                className="w-full"
+              >
+                <CarouselContent className="-ms-2">
+                  {images.map((img, index) => (
+                    <CarouselItem
+                      key={`product-gallery-7-image-${index}`}
+                      className="w-full ps-2"
+                    >
+                      <AspectRatio
+                        ref={index === 0 ? previewRef : undefined}
+                        ratio={0.8}
+                        className="w-full overflow-hidden rounded-[0.875rem] bg-muted"
+                      >
+                        <a
+                          href={img.src}
+                          data-pswp-width={img.width}
+                          data-pswp-height={img.height}
+                          data-pswp-srcset={img.srcset}
+                          data-cropped="true"
+                          className="block size-full hover:cursor-zoom-in"
+                        >
+                          <img
+                            src={img.src}
+                            srcSet={img.srcset}
+                            alt={img.alt}
+                            width={img.width}
+                            height={img.height}
+                            sizes={img.sizes}
+                            className="block size-full rounded-[0.875rem] object-cover object-center"
+                          />
+                        </a>
+                      </AspectRatio>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <div className="hidden opacity-0 group-hover/product-photos:opacity-100 md:block">
+                  {current > 1 && (
+                    <CarouselPrevious className="start-0 ms-6 size-11 dark:bg-white dark:hover:bg-white dark:[&>svg]:stroke-black" />
+                  )}
+                  {current < images.length && (
+                    <CarouselNext className="end-0 me-6 size-11 dark:bg-white dark:hover:bg-white dark:[&>svg]:stroke-black" />
+                  )}
+                </div>
+              </Carousel>
+            </div>
+            <Badge
+              className="absolute bottom-4 start-4 rounded-full bg-background py-1.5 text-xs xl:hidden"
+              variant="secondary"
+            >
+              {current || 1} / {images.length}
+            </Badge>
+          </div>
+          <div className="relative my-2 h-[0.1875rem] w-full overflow-hidden rounded-[0.625rem] bg-muted xl:hidden">
+            <div
+              style={{
+                width: `calc(100% / ${images.length})`,
+                insetInlineStart: `calc((100% / ${images.length}) * ${current - 1})`,
+              }}
+              className="absolute h-full bg-foreground transition-[inset-inline-start] duration-300"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ProductGallery7 };
diff --git a/blocks/product-list1.tsx b/blocks/product-list1.tsx
new file mode 100644
index 0000000..7bfc9dc
--- /dev/null
+++ b/blocks/product-list1.tsx
@@ -0,0 +1,201 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  description: string;
+  price: ProductPrice;
+  badge?: {
+    text: string;
+    color?: string;
+  };
+}
+
+type ProductCardProps = Product;
+
+type ProductList = Array<Product>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    name: "وکسون کور‌استپ ۰۸ ال‌ایکس",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/joshua-diaz-ETNoDLl8yFE-unsplash-1.jpg",
+      alt: "کفش ورزشی با طراحی سه‌رنگ",
+    },
+    link: "#",
+    description:
+      "راحتی روزمره در کنار استایل جسورانه سه‌رنگ، در طراحی عمل‌گرایانه.",
+    price: {
+      regular: 499000.0,
+      sale: 399000.0,
+      currency: "ریال",
+    },
+    badge: {
+      text: "دارد سریع فروش می‌رود!",
+      color: "oklch(57.7% 0.245 27.325)",
+    },
+  },
+  {
+    name: "جاکت شهری راحت",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
+      alt: "جاکت پفی جین با طیف آبی",
+    },
+    link: "#",
+    description:
+      "پفی جین با طیف آبی ملایم، مناسب لایه‌لایه پوشیدن در همه فصل‌ها.",
+    price: {
+      regular: 180000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "کیف مزون لیورا",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-1.png",
+      alt: "کیف زنانه توت‌بگ",
+    },
+    link: "#",
+    description:
+      "کیفی شیک که به‌راحتی از حالت شانه‌ای به کراس‌بادی یا دسته‌دار تبدیل می‌شود.",
+    price: {
+      regular: 420000.0,
+      currency: "ریال",
+    },
+    badge: {
+      text: "جدید",
+    },
+  },
+];
+
+interface ProductList1Props {
+  className?: string;
+}
+
+const ProductList1 = ({ className }: ProductList1Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid place-items-center gap-6 md:grid-cols-2 xl:grid-cols-3">
+          {PRODUCTS_LIST.map((item, index) => (
+            <ProductCard key={`product-list-1-card-${index}`} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductCard = ({
+  name,
+  description,
+  link,
+  image,
+  badge,
+  price,
+}: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <a
+      href={link}
+      className="block h-full w-full max-w-md transition-opacity hover:opacity-80"
+    >
+      <Card className="h-full overflow-hidden p-0">
+        <CardHeader className="relative block p-0">
+          <AspectRatio ratio={1.268115942} className="overflow-hidden">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+          {badge && (
+            <Badge
+              style={{
+                backgroundColor: badge.color,
+              }}
+              className="absolute start-4 top-4"
+            >
+              {badge.text}
+            </Badge>
+          )}
+        </CardHeader>
+        <CardContent className="flex h-full flex-col gap-4 pb-6">
+          <CardTitle className="text-xl font-semibold">{name}</CardTitle>
+          <CardDescription className="font-medium text-muted-foreground">
+            {description}
+          </CardDescription>
+          <div className="mt-auto">
+            <ProductCardPrice
+              regular={regular}
+              sale={sale}
+              currency={currency}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2 text-lg font-semibold">
+      {onSale ? (
+        <span className="leading-tight text-foreground">
+          {formatCurrency(sale, currency)}
+        </span>
+      ) : null}
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+    </div>
+  );
+};
+
+export { ProductList1 };
diff --git a/blocks/product-list10.tsx b/blocks/product-list10.tsx
new file mode 100644
index 0000000..80af30d
--- /dev/null
+++ b/blocks/product-list10.tsx
@@ -0,0 +1,549 @@
+import { Eye, ShoppingCart } from "lucide-react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    srcset?: string;
+    sizes?: string;
+    alt: string;
+  };
+  link: string;
+  price: ProductPrice;
+  stockStatusCode: StockStatusCode;
+  badges?: Array<{
+    text: string;
+    color?: string;
+  }>;
+}
+
+type ProductCardProps = Product;
+
+interface FeaturedPromotion {
+  kicker: string;
+  title: string;
+  cta: {
+    link: string;
+    label: string;
+  };
+  link: string;
+  image: string;
+}
+
+type FeaturedPromotionCardProps = FeaturedPromotion;
+
+type ProductList = Array<{
+  featuredPromotion: FeaturedPromotion;
+  products: Array<Product>;
+}>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    featuredPromotion: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/linh-le-giP0e750Dr8-unsplash-1.jpg",
+      title: "قطعاتی ماندگار (کلاسیک) که برای راحتی و سبک طراحی شده‌اند.",
+      kicker: "فضاهای روزمره‌تان را ارتقا دهید.",
+      cta: {
+        label: "خرید مبلمان و موارد دیگر",
+        link: "#",
+      },
+      link: "#",
+    },
+    products: [
+      {
+        name: "مبل چرمی",
+        price: {
+          regular: 899000.0,
+          sale: 799000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "ماگ سرامیکی",
+        price: {
+          regular: 59900.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "کتری چای",
+        price: {
+          regular: 920000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "OUT_OF_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "شمع‌های معطر",
+        price: {
+          regular: 500000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: 'قاب چوبی ۵×۷ اینچ',
+        price: {
+          regular: 200000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "آباژور کره‌ای",
+        price: {
+          regular: 199000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "صندلی چرمی",
+        price: {
+          regular: 899000.0,
+          sale: 799000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        badges: [
+          {
+            text: "بهترین انتخاب!",
+            color: "oklch(54.6% 0.245 262.881)",
+          },
+          {
+            text: "حراج",
+            color: "oklch(57.7% 0.245 27.325)",
+          },
+        ],
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "فنجان سرامیکی",
+        price: {
+          regular: 190000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "OUT_OF_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+    ],
+  },
+  {
+    featuredPromotion: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207892-1.jpg",
+      title: "از شمع تا قاب؛ جزئیات کوچک، اثر بزرگ.",
+      kicker: "جزئیاتی که خانه می‌سازند",
+      cta: {
+        label: "کاوش اکسسوری‌های خانه",
+        link: "#",
+      },
+      link: "#",
+    },
+    products: [
+      {
+        name: "صندلی ناهارخوری",
+        price: {
+          regular: 299000.0,
+          sale: 199000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "OUT_OF_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "ساعت دیواری",
+        price: {
+          regular: 159000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "بشقاب سرامیکی",
+        price: {
+          regular: 990000.0,
+          sale: 890000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        badges: [
+          {
+            text: "حراج",
+            color: "oklch(57.7% 0.245 27.325)",
+          },
+        ],
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "کابینت چوبی",
+        price: {
+          regular: 699000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "صندلی چوبی",
+        price: {
+          regular: 490000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "فنجان سرامیکی",
+        price: {
+          regular: 190000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8533748-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8533748-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8533748-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8533748-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "فنجان سرامیکی",
+        price: {
+          regular: 190000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+      {
+        name: "صندلی چوبی",
+        price: {
+          regular: 490000.0,
+          currency: "ریال",
+        },
+        link: "#",
+        stockStatusCode: "IN_STOCK",
+        image: {
+          src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-3.jpg",
+          srcset:
+            "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-1.jpg 640w",
+          alt: "تصویر محصول",
+          sizes:
+            "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+        },
+      },
+    ],
+  },
+];
+
+interface ProductList10Props {
+  className?: string;
+}
+
+const ProductList10 = ({ className }: ProductList10Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-5">
+          {PRODUCTS_LIST.map((item, index) => (
+            <div
+              className="flex flex-col gap-5 lg:flex-row lg:even:flex-row-reverse"
+              key={`product-list-10-featured-promo-${index}`}
+            >
+              <div className="flex-1/3">
+                <FeaturedPromotionCard {...item.featuredPromotion} />
+              </div>
+              <div className="flex-2/3">
+                <div className="grid grid-cols-2 gap-5 md:grid-cols-4">
+                  {item.products.map((product, index) => (
+                    <ProductCard
+                      {...product}
+                      key={`product-10-list-card-${index}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductCard = ({
+  link,
+  image,
+  name,
+  price,
+  stockStatusCode,
+}: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Card className="group relative block rounded-none border-none bg-background p-0 shadow-none">
+      <a href={link} className="absolute inset-0 z-10 size-full"></a>
+      <CardContent className="p-0">
+        <div className="relative overflow-hidden">
+          <AspectRatio
+            ratio={0.749767365}
+            className="overflow-hidden rounded-xl"
+          >
+            <img
+              srcSet={image.srcset}
+              alt={image.alt}
+              sizes={image.sizes}
+              className="block size-full origin-center object-cover object-center transition-transform duration-700 group-hover:scale-110"
+            />
+          </AspectRatio>
+          {stockStatusCode === STOCK_STATUS.OUT_OF_STOCK && (
+            <div className="absolute start-2.5 top-2.5 z-60">
+              <Badge>فروخته شد</Badge>
+            </div>
+          )}
+          {stockStatusCode === STOCK_STATUS.IN_STOCK && price.sale && (
+            <div className="absolute start-2.5 top-2.5 z-60">
+              <Badge variant="destructive">حراج</Badge>
+            </div>
+          )}
+          <div className="absolute inset-x-5 top-1/2 z-60 hidden -translate-y-1/2 md:block">
+            <div className="flex flex-col gap-2 opacity-0 duration-700 lg:translate-y-4 lg:group-hover:translate-y-0 lg:group-hover:opacity-100">
+              <Button
+                disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+                className="w-full"
+              >
+                <ShoppingCart />
+                افزودن به سبد
+              </Button>
+              <Button variant="secondary" className="w-full">
+                <Eye />
+                مشاهده سریع
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-1 pt-3">
+          <CardTitle className="leading-normal font-normal underline-offset-3 group-hover:underline">
+            {name}
+          </CardTitle>
+          <ProductCardPrice regular={regular} sale={sale} currency={currency} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const FeaturedPromotionCard = ({
+  kicker,
+  title,
+  cta,
+  link,
+  image,
+}: FeaturedPromotionCardProps) => {
+  return (
+    <Card
+      style={{
+        backgroundImage: `url(${image})`,
+      }}
+      className="relative h-full min-h-160 border-none bg-cover bg-center bg-no-repeat p-10 shadow-none md:min-h-100"
+    >
+      <a href={link} className="absolute inset-0 z-10 size-full"></a>
+      <CardHeader className="gap-2.5 p-0">
+        <p>{kicker}</p>
+        <CardTitle className="text-xl font-medium">{title}</CardTitle>
+        <div className="relative z-20 mt-5">
+          <Button size="lg" asChild>
+            <a href={cta.link}>{cta.label}</a>
+          </Button>
+        </div>
+      </CardHeader>
+    </Card>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2 text-sm leading-normal font-bold">
+      {onSale ? (
+        <span className="leading-tight text-red-700">
+          {formatCurrency(sale, currency)}
+        </span>
+      ) : null}
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+    </div>
+  );
+};
+
+export { ProductList10 };
diff --git a/blocks/product-list2.tsx b/blocks/product-list2.tsx
new file mode 100644
index 0000000..85f8d43
--- /dev/null
+++ b/blocks/product-list2.tsx
@@ -0,0 +1,248 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  description: string;
+  price: ProductPrice;
+  badge?: {
+    text: string;
+    color?: string;
+  };
+}
+
+type ProductCardProps = Product;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type ProductList = Array<Product>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    name: "وکسون کور‌استپ ۰۸ ال‌ایکس",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/joshua-diaz-ETNoDLl8yFE-unsplash-1.jpg",
+      alt: "کفش ورزشی با طراحی سه‌رنگ",
+    },
+    link: "#",
+    description:
+      "راحتی روزمره در کنار استایل جسورانه سه‌رنگ، در طراحی عمل‌گرایانه.",
+    price: {
+      regular: 499000.0,
+      sale: 399000.0,
+      currency: "ریال",
+    },
+    badge: {
+      text: "دارد سریع فروش می‌رود!",
+      color: "oklch(57.7% 0.245 27.325)",
+    },
+  },
+  {
+    name: "جاکت شهری راحت",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
+      alt: "جاکت پفی جین با طیف آبی",
+    },
+    link: "#",
+    description:
+      "پفی جین با طیف آبی ملایم، مناسب لایه‌لایه پوشیدن در همه فصل‌ها.",
+    price: {
+      regular: 180000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "کیف مزون لیورا",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-1.png",
+      alt: "کیف زنانه توت‌بگ",
+    },
+    link: "#",
+    description:
+      "کیفی شیک که به‌راحتی از حالت شانه‌ای به کراس‌بادی یا دسته‌دار تبدیل می‌شود.",
+    price: {
+      regular: 420000.0,
+      currency: "ریال",
+    },
+    badge: {
+      text: "جدید",
+    },
+  },
+  {
+    name: "وکسون تیون‌پادز پرو",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/White-Wireless-Earbuds-in-Charging-Case-1.jpeg",
+      alt: "ایرباد بی‌سیم سفید در کیف شارژ",
+    },
+    link: "#",
+    description:
+      "تیون‌پادز پرو با صدای فراگیر، راحتی تمام‌روز و شارژ سریع در قابی جمع‌وجور و آماده جیب ارائه می‌شود.",
+    price: {
+      regular: 129000.0,
+      sale: 990000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "سرم درخشان رادیانت گلو",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-alesiakozik-7795810-1.jpg",
+      alt: "سرم مراقبت پوست",
+    },
+    link: "#",
+    description:
+      "سرم درخشان لونارا، سرمی سبک و سریع‌الجذب برای روشن‌تر کردن، آبرسانی و یکدست‌تر کردن رنگ پوست.",
+    price: {
+      regular: 490000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "هدفون شادوتون",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/Luxurious-Headphones-1.jpeg",
+      alt: "هدفون لوکس",
+    },
+    link: "#",
+    description:
+      "صدایی نرم و عمیق؛ هر نت با وضوح و هر ضرب با عمق احساس می‌شود.",
+    price: {
+      regular: 530000.0,
+      currency: "ریال",
+    },
+  },
+];
+
+interface ProductList2Props {
+  className?: string;
+}
+
+const ProductList2 = ({ className }: ProductList2Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-[repeat(auto-fit,minmax(var(--container-xs),auto))]">
+          {PRODUCTS_LIST.map((item, index) => (
+            <ProductCard key={`product-list-2-card-${index}`} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductCard = ({
+  name,
+  description,
+  link,
+  image,
+  badge,
+  price,
+}: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Card className="relative h-full w-full max-w-md overflow-hidden p-0">
+      <a href={link} className="absolute inset-0 z-10 block size-full"></a>
+      <CardHeader className="relative block p-0">
+        <AspectRatio ratio={1.268115942} className="overflow-hidden">
+          <img
+            src={image.src}
+            alt={image.alt}
+            className="block size-full object-cover object-center"
+          />
+        </AspectRatio>
+        {badge && (
+          <Badge
+            style={{
+              backgroundColor: badge.color,
+            }}
+            className="absolute start-4 top-4"
+          >
+            {badge.text}
+          </Badge>
+        )}
+      </CardHeader>
+      <CardContent className="flex h-full flex-col gap-4">
+        <CardTitle className="text-xl font-semibold">{name}</CardTitle>
+        <CardDescription className="font-medium text-muted-foreground">
+          {description}
+        </CardDescription>
+        <div className="mt-auto">
+          <ProductCardPrice
+            regular={regular}
+            sale={sale}
+            currency={currency}
+          />
+        </div>
+      </CardContent>
+      <CardFooter className="pb-6">
+        <CardAction className="w-full">
+          <Button className="relative z-10 w-full">افزودن به سبد</Button>
+        </CardAction>
+      </CardFooter>
+    </Card>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2 text-lg font-semibold">
+      {onSale ? (
+        <span className="leading-tight text-foreground">
+          {formatCurrency(sale, currency)}
+        </span>
+      ) : null}
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+    </div>
+  );
+};
+
+export { ProductList2 };
diff --git a/blocks/product-list3.tsx b/blocks/product-list3.tsx
new file mode 100644
index 0000000..b8ca8aa
--- /dev/null
+++ b/blocks/product-list3.tsx
@@ -0,0 +1,245 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  description: string;
+  price: ProductPrice;
+  badge?: {
+    text: string;
+    color?: string;
+  };
+}
+type ProductCardProps = Product;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type ProductList = Array<Product>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    name: "وکسون کور‌استپ ۰۸ ال‌ایکس",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/joshua-diaz-ETNoDLl8yFE-unsplash-1.jpg",
+      alt: "کفش ورزشی با طراحی سه‌رنگ",
+    },
+    link: "#",
+    description:
+      "راحتی روزمره در کنار استایل جسورانه سه‌رنگ، در طراحی عمل‌گرایانه.",
+    price: {
+      regular: 499000.0,
+      sale: 399000.0,
+      currency: "ریال",
+    },
+    badge: {
+      text: "دارد سریع فروش می‌رود!",
+      color: "oklch(57.7% 0.245 27.325)",
+    },
+  },
+  {
+    name: "جاکت شهری راحت",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
+      alt: "جاکت پفی جین با طیف آبی",
+    },
+    link: "#",
+    description:
+      "پفی جین با طیف آبی ملایم، مناسب لایه‌لایه پوشیدن در همه فصل‌ها.",
+    price: {
+      regular: 180000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "کیف مزون لیورا",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-1.png",
+      alt: "کیف زنانه توت‌بگ",
+    },
+    link: "#",
+    description:
+      "کیفی شیک که به‌راحتی از حالت شانه‌ای به کراس‌بادی یا دسته‌دار تبدیل می‌شود.",
+    price: {
+      regular: 420000.0,
+      currency: "ریال",
+    },
+    badge: {
+      text: "جدید",
+    },
+  },
+  {
+    name: "وکسون تیون‌پادز پرو",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/White-Wireless-Earbuds-in-Charging-Case-1.jpeg",
+      alt: "ایرباد بی‌سیم سفید در کیف شارژ",
+    },
+    link: "#",
+    description:
+      "تیون‌پادز پرو با صدای فراگیر، راحتی تمام‌روز و شارژ سریع در قابی جمع‌وجور و آماده جیب ارائه می‌شود.",
+    price: {
+      regular: 129000.0,
+      sale: 990000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "سرم درخشان رادیانت گلو",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-alesiakozik-7795810-1.jpg",
+      alt: "سرم مراقبت پوست",
+    },
+    link: "#",
+    description:
+      "سرم درخشان لونارا، سرمی سبک و سریع‌الجذب برای روشن‌تر کردن، آبرسانی و یکدست‌تر کردن رنگ پوست.",
+    price: {
+      regular: 490000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "هدفون شادوتون",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/Luxurious-Headphones-1.jpeg",
+      alt: "هدفون لوکس",
+    },
+    link: "#",
+    description:
+      "صدایی نرم و عمیق؛ هر نت با وضوح و هر ضرب با عمق احساس می‌شود.",
+    price: {
+      regular: 530000.0,
+      currency: "ریال",
+    },
+  },
+];
+
+interface ProductList3Props {
+  className?: string;
+}
+
+const ProductList3 = ({ className }: ProductList3Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-[repeat(auto-fit,minmax(var(--container-xs),auto))]">
+          {PRODUCTS_LIST.map((item, index) => (
+            <ProductCard key={`product-list-3-card-${index}`} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductCard = ({
+  name,
+  description,
+  link,
+  image,
+  badge,
+  price,
+}: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <a href={link} className="block h-full w-fit">
+      <Card className="group h-full w-full max-w-md min-w-xs overflow-hidden p-0">
+        <CardHeader className="relative block p-0">
+          <AspectRatio ratio={1.268115942} className="overflow-hidden">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+          <CardAction className="absolute bottom-4 w-full px-4 transition-opacity md:opacity-0 md:group-hover:opacity-100">
+            <Button className="w-full">افزودن به سبد</Button>
+          </CardAction>
+          {badge && (
+            <Badge
+              style={{
+                backgroundColor: badge.color,
+              }}
+              className="absolute start-4 top-4"
+            >
+              {badge.text}
+            </Badge>
+          )}
+        </CardHeader>
+        <CardContent className="flex h-full flex-col gap-4 pb-6">
+          <CardTitle className="text-xl font-semibold">{name}</CardTitle>
+          <CardDescription className="font-medium text-muted-foreground">
+            {description}
+          </CardDescription>
+          <div className="mt-auto">
+            <ProductCardPrice
+              regular={regular}
+              sale={sale}
+              currency={currency}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2 text-lg font-semibold">
+      {onSale ? (
+        <span className="leading-tight text-foreground">
+          {formatCurrency(sale, currency)}
+        </span>
+      ) : null}
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+    </div>
+  );
+};
+
+export { ProductList3 };
diff --git a/blocks/product-list4.tsx b/blocks/product-list4.tsx
new file mode 100644
index 0000000..0887286
--- /dev/null
+++ b/blocks/product-list4.tsx
@@ -0,0 +1,234 @@
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Product {
+  name: string;
+  brand: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  price: ProductPrice;
+  rate: number;
+}
+
+interface PromoCard {
+  image: string;
+  title: string;
+  cta: {
+    label: string;
+    link: string;
+  };
+  tagline: string;
+}
+
+type PromoCardProps = PromoCard;
+
+type ProductCardProps = Product;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type ProductList = Array<Product>;
+
+const PROMO_CARD: PromoCard = {
+  image:
+    "/block-media/shadcnblocks/block/ecommerce/clothes/Summer-Fashion-Duo-1.png",
+  title: "کالکشن مد تابستانه",
+  tagline: "لایه‌های سبک، اثر پررنگ.",
+  cta: {
+    label: "مشاهده تازه‌ها",
+    link: "#",
+  },
+};
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Sporty-Casual-Portrait-1.png",
+      alt: "تاپ کراپ صورتی با طراحی شیک",
+    },
+    name: "تاپ کراپ رز کات",
+    brand: "آتلیه رزه",
+    link: "#",
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    rate: 5,
+  },
+  {
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-1.png",
+      alt: "پیراهن آبی آستین‌کوتاه گلدوزی‌شده",
+    },
+    name: "بلوز آستین‌کوتاه آژور بلوم",
+    brand: "آتلیه رزه",
+    link: "#",
+    price: {
+      regular: 780000.0,
+      sale: 600000.0,
+      currency: "ریال",
+    },
+    rate: 4,
+  },
+  {
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/Person-in-Activewear-1.png",
+      alt: "تاپ ورزشی سبز",
+    },
+    name: "تاپ ورزشی پالس‌فلکس",
+    brand: "رزه اکتیو",
+    link: "#",
+    price: {
+      regular: 790000.0,
+      currency: "ریال",
+    },
+    rate: 4,
+  },
+];
+
+interface ProductList4Props {
+  className?: string;
+}
+
+const ProductList4 = ({ className }: ProductList4Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container grid w-full gap-7 md:grid-cols-3 lg:grid-cols-4">
+        <div className="md:col-span-3 lg:col-span-1">
+          <PromoCard {...PROMO_CARD} />
+        </div>
+        {PRODUCTS_LIST.map((item, index) => (
+          <ProductCard key={`product-list-4-card-${index}`} {...item} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+const PromoCard = ({ image, title, cta, tagline }: PromoCardProps) => {
+  return (
+    <Card
+      style={{
+        backgroundImage: `url(${image})`,
+      }}
+      className="relative flex h-full min-h-105 w-full min-w-47.5 flex-col justify-between gap-5 overflow-hidden rounded-md bg-cover bg-center bg-no-repeat p-7 before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/60 before:to-transparent lg:max-w-80 lg:bg-top"
+    >
+      <CardHeader className="z-10 p-0">
+        <CardTitle className="mb-2.5 max-w-40 text-xl leading-tight font-medium dark:text-black">
+          {title}
+        </CardTitle>
+        <CardDescription className="text-sm text-foreground dark:text-black">
+          {tagline}
+        </CardDescription>
+      </CardHeader>
+      <CardAction className="z-10 w-full">
+        <Button asChild className="w-full">
+          <a href={cta.link}>{cta.label}</a>
+        </Button>
+      </CardAction>
+    </Card>
+  );
+};
+
+const ProductCard = ({
+  name,
+  link,
+  image,
+  price,
+  brand,
+  rate,
+}: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <a href={link} className="block h-full w-full min-w-47.5 md:max-w-80">
+      <Card className="group h-full min-h-105 gap-3.5 rounded-none border-none bg-background p-0 shadow-none">
+        <CardHeader className="block p-0">
+          <div className="h-80 w-full overflow-hidden rounded-md">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </div>
+        </CardHeader>
+        <CardContent className="flex h-full flex-col gap-2 p-0">
+          <div className="mb-1.5 flex justify-between gap-2">
+            <div className="text-xs font-medium text-muted-foreground uppercase">
+              {brand}
+            </div>
+            <Rating
+              rate={rate}
+              className="[&_svg]:size-3.5 [&_svg]:fill-yellow-500 [&_svg]:stroke-yellow-500 [&>div]:size-3.5"
+            />
+          </div>
+          <CardTitle className="text-lg leading-tight font-semibold">
+            {name}
+          </CardTitle>
+          <ProductCardPrice
+            regular={regular}
+            sale={sale}
+            currency={currency}
+          />
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2 text-lg font-semibold">
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+      {onSale ? (
+        <span className="leading-tight text-foreground">
+          {formatCurrency(sale, currency)}
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+export { ProductList4 };
diff --git a/blocks/product-list5.tsx b/blocks/product-list5.tsx
new file mode 100644
index 0000000..ebe9e9b
--- /dev/null
+++ b/blocks/product-list5.tsx
@@ -0,0 +1,178 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Product {
+  name: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  price: ProductPrice;
+  collection: string;
+}
+
+type ProductCardProps = Product;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type ProductList = Array<Product>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    collection: "ساعت طلایی",
+    name: "گوشواره بلوم و گلیم",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Floral-Earrings-1.png",
+      alt: "گوشواره گل‌دار ظریف",
+    },
+    price: {
+      regular: 4000000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    collection: "ساعت طلایی",
+    name: "گوشواره درخشش عاشقانه",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Gold-Heart-Earrings-1.png",
+      alt: "گوشواره طلایی قلبی",
+    },
+    price: {
+      regular: 8000000.0,
+      sale: 7599000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    collection: "ساعت طلایی",
+    name: "گوشواره زمزمه طلایی",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Gold-Hoop-Earrings-on-Ceramic-Dish-1.png",
+      alt: "گوشواره حلقه‌ای طلایی",
+    },
+    price: {
+      regular: 6000000.0,
+      currency: "ریال",
+    },
+  },
+];
+
+interface ProductList5Props {
+  className?: string;
+}
+
+const ProductList5 = ({ className }: ProductList5Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-12 flex flex-col gap-12 md:flex-row md:justify-between">
+          <div className="flex flex-col gap-4">
+            <p className="text-center leading-tight font-medium text-primary md:text-start">
+              جایی که ظرافت، همراه هر روز است.
+            </p>
+            <h1 className="text-center text-xl font-semibold md:text-start">
+              محبوب‌ترین‌های مشتریان
+            </h1>
+          </div>
+          <div className="self-end">
+            <Button variant="secondary">مشاهده کالکشن</Button>
+          </div>
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
+          {PRODUCTS_LIST.map((item, index) => (
+            <ProductCard key={`product-list-5-card-${index}`} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProductCard = ({
+  name,
+  link,
+  image,
+  price,
+  collection,
+}: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <a href={link} className="block h-full w-full min-w-47.5">
+      <Card className="group h-full gap-3.5 rounded-none border-none bg-background p-0 shadow-none">
+        <CardHeader className="block p-0">
+          <AspectRatio ratio={1} className="w-full overflow-hidden rounded-2xl">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+        </CardHeader>
+        <CardContent className="flex h-full flex-col gap-2 p-0">
+          <p className="text-xs text-muted-foreground uppercase">
+            {collection}
+          </p>
+          <CardTitle className="leading-tight font-medium">{name}</CardTitle>
+          <ProductCardPrice
+            regular={regular}
+            sale={sale}
+            currency={currency}
+          />
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2 text-lg font-semibold">
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+      {onSale ? (
+        <span className="leading-tight text-foreground">
+          {formatCurrency(sale, currency)}
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+export { ProductList5 };
diff --git a/blocks/product-list6.tsx b/blocks/product-list6.tsx
new file mode 100644
index 0000000..95d4554
--- /dev/null
+++ b/blocks/product-list6.tsx
@@ -0,0 +1,728 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+interface ListCarouselProps {
+  productsList: Array<ProductCard>;
+}
+
+type Image = {
+  src: string;
+  alt: string;
+};
+
+type Option = {
+  id: string;
+  label: string;
+  color: string;
+  value: string;
+  image: Image;
+};
+
+interface Product {
+  name: string;
+  collection: {
+    label: string;
+    link: string;
+  };
+  variantId: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: string;
+  price: ProductPrice;
+  quickAdd?: boolean;
+  variants?: {
+    name: FieldName;
+    options: Array<Option>;
+  };
+  stockStatusCode: StockStatusCode;
+}
+
+type ProductCard = Product;
+
+type ProductCardProps = ProductCard;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type FieldName = keyof FormType;
+
+type FormType = z.infer<typeof formSchema>;
+
+interface ProductFormProps {
+  colorHinges?: {
+    name: FieldName;
+    options: Omit<Option, "image">[];
+  };
+  form: UseFormReturn<FormType>;
+}
+
+interface RadioGroupProps {
+  options?: Omit<Option, "image">[];
+  field: ControllerRenderProps<FormType>;
+}
+
+type ColorOptionProps = Omit<Option, "image">;
+
+type ProductList = Array<Product>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    collection: {
+      label: "رنگ‌های بهاری",
+      link: "#",
+    },
+    name: "کاور مینت گارد",
+    variantId: "mint_guard",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung--uF6u5Cmnsw-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح سبز نعنایی",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    quickAdd: true,
+    stockStatusCode: "OUT_OF_STOCK",
+  },
+  {
+    collection: {
+      label: "رنگ‌های انتزاعی",
+      link: "#",
+    },
+    name: "کاور خط نیمه‌شب",
+    variantId: "midnight_black-1",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-CubSQS4iYEE-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح خطی تیره",
+    },
+    price: {
+      regular: 590000.0,
+      sale: 490000.0,
+      currency: "ریال",
+    },
+    variants: {
+      name: "color",
+      options: [
+        {
+          id: "midnight_black-1",
+          label: "مشکی نیمه‌شب",
+          color: "#0B0B0B",
+          value: "midnight_black",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-CubSQS4iYEE-unsplash-3.jpg",
+            alt: "کاور گوشی مشکی",
+          },
+        },
+        {
+          id: "royal_indigo-1",
+          label: "نیلی سلطنتی",
+          color: "#3B0A45",
+          value: "royal_indigo",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-wyEh0ZnwUFM-unsplash-3.jpg",
+            alt: "کاور گوشی نیلی",
+          },
+        },
+        {
+          id: "vibrant_tangerine-1",
+          label: "نارنجی درخشان",
+          color: "#FF6400",
+          value: "vibrant_tangerine",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-kfv-hU9ZVkk-unsplash-3.jpg",
+            alt: "کاور گوشی نارنجی",
+          },
+        },
+      ],
+    },
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+  {
+    collection: {
+      label: "سایه‌های آرامش",
+      link: "#",
+    },
+    name: "کاور درخشش آمتیست",
+    variantId: "pastel_lavender",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-EVL1nwmdg_g-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح بنفش ملایم",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    variants: {
+      name: "color",
+      options: [
+        {
+          id: "pastel_charcoal-1",
+          label: "خاکستری زغالی",
+          color: "#4A4A4A",
+          value: "pastel_charcoal",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-h_t-VwFFLAY-unsplash-3.jpg",
+            alt: "کاور گوشی خاکستری",
+          },
+        },
+        {
+          id: "pastel_lavender-1",
+          label: "اسطوخودوس",
+          color: "#CBA4DB",
+          value: "pastel_lavender",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-EVL1nwmdg_g-unsplash-3.jpg",
+            alt: "کاور گوشی یاسی",
+          },
+        },
+        {
+          id: "pastel_peach-1",
+          label: "هلویی",
+          color: "#FFDAB9",
+          value: "pastel_peach",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-f-scc2htKNQ-unsplash-3.jpg",
+            alt: "کاور گوشی هلویی",
+          },
+        },
+      ],
+    },
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+  {
+    collection: {
+      label: "هنر در حرکت",
+      link: "#",
+    },
+    name: "کاور هجوم رنگ",
+    variantId: "color_rush",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-f-scc2htKNQ-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح رنگی پویا",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+  {
+    collection: {
+      label: "افق‌های مرتفع",
+      link: "#",
+    },
+    name: "کاور قله‌های تک‌رنگ",
+    variantId: "monochrome_peaks",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-fCO3tBcnkhg-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح کوهستان تک‌رنگ",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+  {
+    collection: {
+      label: "ریمیکس رترو",
+      link: "#",
+    },
+    name: "کاور پیچ و تورفتگی",
+    variantId: "twist_&_grid",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-h_t-VwFFLAY-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح شبکه‌ای رترو",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+  {
+    collection: {
+      label: "بیان‌های جسورانه",
+      link: "#",
+    },
+    name: "کاور کلمات مرکباتی",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-kfv-hU9ZVkk-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح تایپوگرافی",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    variants: {
+      name: "color",
+      options: [
+        {
+          id: "midnight_black-2",
+          label: "مشکی نیمه‌شب",
+          color: "#0B0B0B",
+          value: "midnight_black",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-OXW7AuNsKVI-unsplash-3.jpg",
+            alt: "کاور گوشی مشکی",
+          },
+        },
+        {
+          id: "royal_indigo-2",
+          label: "نیلی سلطنتی",
+          color: "#3B0A45",
+          value: "royal_indigo",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-wyEh0ZnwUFM-unsplash-3.jpg",
+            alt: "کاور گوشی نیلی",
+          },
+        },
+        {
+          id: "vibrant_tangerine-2",
+          label: "نارنجی درخشان",
+          color: "#FF6400",
+          value: "vibrant_tangerine",
+          image: {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-kfv-hU9ZVkk-unsplash-3.jpg",
+            alt: "کاور گوشی نارنجی",
+          },
+        },
+      ],
+    },
+    variantId: "vibrant_tangerine-2",
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+  {
+    collection: {
+      label: "فراتر از افق",
+      link: "#",
+    },
+    name: "کاور سوار بر آسمان",
+    variantId: "sky_drift",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-mAUQI0qnKGw-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح آسمان",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+  {
+    collection: {
+      label: "سری آسمانی",
+      link: "#",
+    },
+    name: "کاور پرده نیمه‌شب",
+    variantId: "midnight_veil",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-OXW7AuNsKVI-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح شبانه",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+  {
+    collection: {
+      label: "رویاهای ساحلی",
+      link: "#",
+    },
+    name: "کاور زمزمه جزر و مد",
+    variantId: "tide_whisper",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/other/jascent-leung-wyEh0ZnwUFM-unsplash-3.jpg",
+      alt: "کاور گوشی با طرح ساحلی",
+    },
+    price: {
+      regular: 590000.0,
+      currency: "ریال",
+    },
+
+    quickAdd: true,
+    stockStatusCode: "IN_STOCK",
+  },
+];
+
+interface ProductList6Props {
+  className?: string;
+}
+
+const ProductList6 = ({ className }: ProductList6Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <ListCarousel productsList={PRODUCTS_LIST} />
+      </div>
+    </section>
+  );
+};
+
+const ListCarousel = ({ productsList }: ListCarouselProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  const onSelect = useCallback((carouselApi: CarouselApi) => {
+    if (!carouselApi) return;
+    setCanScrollPrev(carouselApi.canScrollPrev());
+    setCanScrollNext(carouselApi.canScrollNext());
+    setCurrent(carouselApi.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  if (!productsList) return;
+
+  return (
+    <Carousel
+      dir="rtl"
+      opts={{
+        align: "start",
+        direction: "rtl",
+      }}
+      setApi={setApi}
+    >
+      <div className="flex items-center justify-between pb-6">
+        <div className="flex flex-wrap items-end gap-2">
+          <h2 className="text-lg leading-tight font-black uppercase xl:text-xl">
+            محبوب‌ترین
+          </h2>
+          <p className="text-sm font-medium text-muted-foreground xl:text-base">
+            تا ۳۰٪ تخفیف
+          </p>
+        </div>
+        <div className="hidden items-center gap-2 xl:flex">
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="static size-8 shrink-0 translate-0 touch-manipulation"
+            disabled={!canScrollPrev}
+            onClick={() => api?.scrollPrev()}
+            aria-label="اسلاید قبلی"
+          >
+            <ChevronRight className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="static size-8 shrink-0 translate-0 touch-manipulation"
+            disabled={!canScrollNext}
+            onClick={() => api?.scrollNext()}
+            aria-label="اسلاید بعدی"
+          >
+            <ChevronLeft className="size-4" />
+          </Button>
+        </div>
+      </div>
+      <CarouselContent className="ms-0 -me-4">
+        {productsList.map((product, index) => (
+          <CarouselItem
+            key={`product-list-6-item-${index}`}
+            className="ps-0 pe-4 sm:basis-1/2 xl:basis-1/4"
+          >
+            <ProductCard {...product} />
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <div className="flex items-center justify-center pt-5 xl:hidden">
+        {productsList.map((_, index) => (
+          <button
+            onClick={() => api?.scrollTo(index)}
+            data-active={current === index + 1}
+            className="flex size-6 after:m-auto after:h-1 after:w-5 after:bg-muted-foreground/50 after:transition-colors data-[active=true]:after:bg-primary sm:last:hidden"
+            key={`product-list-6-pagination-bullets-${index}`}
+          ></button>
+        ))}
+      </div>
+    </Carousel>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+});
+
+const ProductCard = ({
+  name,
+  image,
+  stockStatusCode,
+  price,
+  link,
+  collection,
+  quickAdd,
+  variants,
+  variantId,
+}: ProductCardProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: variantId,
+    },
+  });
+  const selectedVariant = form.watch("color");
+  const currentVariantImage =
+    variants?.options.find((item) => item.value === selectedVariant)?.image ||
+    image;
+
+  const { regular, sale, currency } = price;
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  return (
+    <Card className="group gap-2 rounded-none border-none bg-background p-0 shadow-none">
+      <CardHeader className="gap-0 p-0">
+        <AspectRatio ratio={0.76984127} className="overflow-hidden">
+          <a href={link} className="block size-full">
+            {currentVariantImage && (
+              <img
+                src={currentVariantImage?.src}
+                alt={currentVariantImage?.alt}
+                className="block size-full object-cover object-center transition-transform duration-500 group-hover:scale-110"
+              />
+            )}
+          </a>
+          {quickAdd && stockStatusCode === STOCK_STATUS.IN_STOCK && (
+            <div className="absolute inset-x-5 bottom-5 transition-opacity duration-400 group-hover:opacity-100 xl:opacity-0">
+              <Button
+                onClick={() => {
+                  form.trigger().then((valid) => {
+                    if (valid) {
+                      form.handleSubmit(onSubmit)();
+                    }
+                  });
+                }}
+                className="w-full"
+              >
+                افزودن سریع
+              </Button>
+            </div>
+          )}
+        </AspectRatio>
+      </CardHeader>
+      <CardContent className="p-0">
+        {(stockStatusCode || price?.sale) && (
+          <div className="text-sm">
+            {stockStatusCode === STOCK_STATUS.OUT_OF_STOCK ? (
+              <span className="text-muted-foreground">فروخته شد</span>
+            ) : (
+              price.sale && <span className="text-destructive">حراج</span>
+            )}
+          </div>
+        )}
+        <div
+          className={`pt-0.5 ${stockStatusCode === STOCK_STATUS.IN_STOCK && !price?.sale && "mt-5"}`}
+        >
+          <a className="text-sm font-bold" href={collection.link}>
+            {collection.label}
+          </a>
+          <div className="flex flex-wrap items-center gap-2 xl:flex-nowrap">
+            <CardTitle className="text-sm font-normal">{name}</CardTitle>
+            <div className="transition-opacity duration-400 group-hover:opacity-100 xl:opacity-0">
+              <ProductForm colorHinges={variants} form={form} />
+            </div>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="relative mt-1 flex-col items-start gap-3 p-0 xl:flex-row">
+        <div className="transition-opacity duration-400 xl:group-hover:opacity-0">
+          <ProductCardPrice
+            regular={regular}
+            sale={sale}
+            currency={currency}
+          />
+        </div>
+        <div className="absolute flex items-center gap-3 bg-background opacity-0 transition-opacity duration-400 group-hover:opacity-100">
+          <Button variant="link" className="h-fit p-0 underline">
+            همین حالا بخرید
+          </Button>
+          <Button
+            variant="link"
+            className="h-fit p-0 text-muted-foreground underline"
+          >
+            مشاهده سریع
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+const ProductForm = ({ colorHinges, form }: ProductFormProps) => {
+  if (!colorHinges) return;
+
+  return (
+    <form>
+      <Controller
+        control={form.control}
+        name={colorHinges.name}
+        render={({ field }) => (
+          <Field>
+            <ColorRadioGroup field={field} options={colorHinges.options} />
+          </Field>
+        )}
+      />
+    </form>
+  );
+};
+
+const ColorRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex gap-0"
+    >
+      {options &&
+        options.map((item, index) => (
+          <Field key={`product-list-6-color-input-${index}`}>
+            <ColorOption
+              label={item.label}
+              id={item.id}
+              color={item.color}
+              value={item.value}
+            />
+          </Field>
+        ))}
+    </RadioGroup>
+  );
+};
+
+const ColorOption = ({ id, value, color, label }: ColorOptionProps) => {
+  return (
+    <FieldLabel
+      htmlFor={id}
+      aria-label={label}
+      className="relative flex size-5 cursor-pointer after:pointer-events-none after:absolute after:inset-1/2 after:size-1 after:-translate-1/2 after:rounded-full after:bg-white after:opacity-0 after:transition-opacity has-checked:after:opacity-100"
+    >
+      <RadioGroupItem id={id} className="sr-only" value={value} />
+      <div
+        style={{
+          backgroundColor: color,
+        }}
+        className="m-auto size-2.5 rounded-full"
+      ></div>
+    </FieldLabel>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2 text-sm font-medium">
+      {onSale ? (
+        <span className="leading-tight text-foreground">
+          {formatCurrency(sale, currency)}
+        </span>
+      ) : null}
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+    </div>
+  );
+};
+
+export { ProductList6 };
diff --git a/blocks/product-list7.tsx b/blocks/product-list7.tsx
new file mode 100644
index 0000000..8b6bb17
--- /dev/null
+++ b/blocks/product-list7.tsx
@@ -0,0 +1,860 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ClockFading, Heart, ShoppingBag } from "lucide-react";
+import { Fragment } from "react";
+import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+  LOW_STOCK: "LOW_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type Option = {
+  id: string;
+  label: string;
+  value: string;
+  stockStatusCode: StockStatusCode;
+};
+
+type FormType = z.infer<typeof formSchema>;
+
+type FieldName = keyof FormType;
+
+interface HingeOptionGroup {
+  name: FieldName;
+  label: string;
+  options: Option[];
+}
+
+interface Product {
+  name: string;
+  link: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  price: ProductPrice;
+  sizeHinges?: HingeOptionGroup;
+}
+
+type ProductCardProps = Product;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  discountPercent?: string;
+  currency: string;
+}
+
+interface ProductFormProps {
+  sizeHinges?: HingeOptionGroup;
+}
+
+interface SizeRadioGroupProps {
+  options: Array<Option>;
+  field: ControllerRenderProps<FormType>;
+  form: UseFormReturn<FormType>;
+  onSubmit: (values: FormType) => void;
+}
+
+type SizeOptionProps = Option;
+
+type ProductList = Array<Product>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    name: "سویشرت طرح‌دار",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/dynamic-sketches-sports-illustrated-sweatshirt.png",
+      alt: "سویشرت ورزشی با طرح اسکچ",
+    },
+    price: {
+      regular: 590000.0,
+      sale: 490000.0,
+      discountPercent: "-۳۰٪",
+      currency: "ریال",
+    },
+    sizeHinges: {
+      name: "size",
+      label: "انتخاب سایز",
+      options: [
+        {
+          id: "xs-1",
+          label: "xs",
+          value: "xs",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "s-1",
+          label: "s",
+          value: "s",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "m-1",
+          label: "m",
+          value: "m",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "l-1",
+          label: "l",
+          value: "l",
+          stockStatusCode: "LOW_STOCK",
+        },
+        {
+          id: "xl-1",
+          label: "xl",
+          value: "xl",
+          stockStatusCode: "LOW_STOCK",
+        },
+      ],
+    },
+  },
+  {
+    name: "سویشرت گردنی با لوگوی گلدوزی",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+      alt: "سویشرت گردنی دو رنگ با لوگوی گلدوزی",
+    },
+    price: {
+      regular: 800000.0,
+      currency: "ریال",
+    },
+    sizeHinges: {
+      name: "size",
+      label: "انتخاب سایز",
+      options: [
+        {
+          id: "m-2",
+          label: "m",
+          value: "m",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "l-2",
+          label: "l",
+          value: "l",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "xl-2",
+          label: "xl",
+          value: "xl",
+          stockStatusCode: "LOW_STOCK",
+        },
+      ],
+    },
+  },
+  {
+    name: "هودی مشکی",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+      alt: "هودی مشکی",
+    },
+    price: {
+      regular: 750000.0,
+      currency: "ریال",
+    },
+    sizeHinges: {
+      name: "size",
+      label: "انتخاب سایز",
+      options: [
+        {
+          id: "s-3",
+          label: "s",
+          value: "s",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "m-3",
+          label: "m",
+          value: "m",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "l-3",
+          label: "l",
+          value: "l",
+          stockStatusCode: "LOW_STOCK",
+        },
+        {
+          id: "xl-3",
+          label: "xl",
+          value: "xl",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "2xl-3",
+          label: "2xl",
+          value: "2xl",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "3xl-3",
+          label: "3xl",
+          value: "3xl",
+          stockStatusCode: "LOW_STOCK",
+        },
+      ],
+    },
+  },
+  {
+    name: "پاشنه‌بلند براق با کفی قرمز امضادار",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/elegant-patent-stilettos-with-signature-red-soles.png",
+      alt: "کفش پاشنه‌بلند براق با کفی قرمز",
+    },
+    price: {
+      regular: 750000.0,
+      currency: "ریال",
+    },
+    sizeHinges: {
+      name: "size",
+      label: "انتخاب سایز",
+      options: [
+        {
+          id: "34-4",
+          label: "34",
+          value: "34",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "35-4",
+          label: "35",
+          value: "35",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "36-4",
+          label: "36",
+          value: "36",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "39-4",
+          label: "39",
+          value: "39",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "40-4",
+          label: "40",
+          value: "40",
+          stockStatusCode: "LOW_STOCK",
+        },
+        {
+          id: "41-4",
+          label: "41",
+          value: "41",
+          stockStatusCode: "IN_STOCK",
+        },
+      ],
+    },
+  },
+  {
+    name: "شال هلویی ظریف",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/elegant-peach-scarf.png",
+      alt: "شال ابریشمی هلویی",
+    },
+    price: {
+      regular: 350000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "کیف چرمی مارون",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+      alt: "کیف چرمی مارون",
+    },
+    price: {
+      regular: 850000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "تاپ مینیمال",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/minimalist-tank-top-flatlay.png",
+      alt: "تاپ مشکی مینیمال",
+    },
+    price: {
+      regular: 750000.0,
+      currency: "ریال",
+    },
+    sizeHinges: {
+      name: "size",
+      label: "انتخاب سایز",
+      options: [
+        {
+          id: "s-5",
+          label: "s",
+          value: "s",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "m-5",
+          label: "m",
+          value: "m",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "l-5",
+          label: "l",
+          value: "l",
+          stockStatusCode: "LOW_STOCK",
+        },
+        {
+          id: "xl-5",
+          label: "xl",
+          value: "xl",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "2xl-5",
+          label: "2xl",
+          value: "2xl",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "3xl-5",
+          label: "3xl",
+          value: "3xl",
+          stockStatusCode: "LOW_STOCK",
+        },
+      ],
+    },
+  },
+  {
+    name: "کیف دستی مدرن",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/modern-handbag-display.png",
+      alt: "کیف دستی مدرن",
+    },
+    price: {
+      regular: 850000.0,
+      currency: "ریال",
+    },
+  },
+  {
+    name: "کفش مول قرمز چرمی",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/red-leather-mules.png",
+      alt: "کفش مول قرمز چرمی",
+    },
+    price: {
+      regular: 155000.0,
+      sale: 990000.0,
+      discountPercent: "-۲۰٪",
+      currency: "ریال",
+    },
+    sizeHinges: {
+      name: "size",
+      label: "انتخاب سایز",
+      options: [
+        {
+          id: "34-6",
+          label: "34",
+          value: "34",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "35-6",
+          label: "35",
+          value: "35",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "36-6",
+          label: "36",
+          value: "36",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "39-6",
+          label: "39",
+          value: "39",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "40-6",
+          label: "40",
+          value: "40",
+          stockStatusCode: "LOW_STOCK",
+        },
+        {
+          id: "41-6",
+          label: "41",
+          value: "41",
+          stockStatusCode: "IN_STOCK",
+        },
+      ],
+    },
+  },
+  {
+    name: "کتانی مارون شیک",
+    link: "#",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+      alt: "کتانی مارون",
+    },
+    price: {
+      regular: 285000.0,
+      currency: "ریال",
+    },
+    sizeHinges: {
+      name: "size",
+      label: "انتخاب سایز",
+      options: [
+        {
+          id: "34-7",
+          label: "34",
+          value: "34",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "35-7",
+          label: "35",
+          value: "35",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "36-7",
+          label: "36",
+          value: "36",
+          stockStatusCode: "IN_STOCK",
+        },
+      ],
+    },
+  },
+];
+
+interface ProductList7Props {
+  className?: string;
+}
+
+const ProductList7 = ({ className }: ProductList7Props) => {
+  return (
+    <section className={cn("px-5 py-32", className)}>
+      <h2 className="mb-8 text-center text-xl leading-normal font-medium">
+        پیشنهادهایی مخصوص شما
+      </h2>
+      <div className="grid w-full items-center gap-x-1 gap-y-6 sm:grid-cols-[repeat(auto-fit,minmax(22.75rem,1fr))]">
+        {PRODUCTS_LIST.map((item, index) => (
+          <ProductCard {...item} key={`product-list-7-card-${index}`} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+const ProductCard = ({
+  link,
+  image,
+  name,
+  price,
+  sizeHinges,
+}: ProductCardProps) => {
+  const { regular, sale, currency, discountPercent } = price;
+
+  return (
+    <Card className="h-full border-none bg-background p-0 shadow-none">
+      <CardContent className="p-0">
+        <div className="group relative">
+          <a href={link}>
+            <AspectRatio ratio={0.78125} className="overflow-hidden">
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="block size-full object-cover object-center"
+              />
+            </AspectRatio>
+          </a>
+          <div className="absolute inset-x-0 bottom-0 hidden border bg-background p-3 opacity-0 group-hover:opacity-100 lg:block">
+            <ProductDesktopForm sizeHinges={sizeHinges} />
+          </div>
+        </div>
+        <div className="flex items-start justify-between gap-2 px-2 pt-2">
+          <a href={link} className="flex flex-1 flex-col gap-1">
+            <CardTitle className="text-xs font-normal">{name}</CardTitle>
+            <ProductCardPrice
+              regular={regular}
+              sale={sale}
+              currency={currency}
+              discountPercent={discountPercent}
+            />
+          </a>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="hidden rounded-full lg:flex"
+          >
+            <Heart />
+          </Button>
+          <div className="lg:hidden">
+            <ProductMobileForm sizeHinges={sizeHinges} />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const formSchema = z.object({
+  size: z.string().optional(),
+});
+
+const ProductDesktopForm = ({ sizeHinges }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: sizeHinges ? { size: "" } : {},
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col-reverse gap-11 lg:flex-col lg:gap-6"
+    >
+      {sizeHinges && (
+        <Controller
+          control={form.control}
+          name={`${sizeHinges.name}`}
+          render={({ field }) => (
+            <Field className="gap-3">
+              <FieldLabel asChild>
+                <p className="justify-center text-center text-xs leading-normal">
+                  {sizeHinges.label}
+                </p>
+              </FieldLabel>
+              <SizeRadioGroup
+                form={form}
+                onSubmit={onSubmit}
+                field={field}
+                options={sizeHinges.options}
+              />
+            </Field>
+          )}
+        />
+      )}
+
+      {!sizeHinges && (
+        <Button variant="ghost" className="text-xs uppercase">
+          افزودن به سبد
+        </Button>
+      )}
+    </form>
+  );
+};
+
+const ProductMobileForm = ({ sizeHinges }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: sizeHinges ? { size: "" } : {},
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  if (!sizeHinges) {
+    return (
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col-reverse gap-11 lg:flex-col lg:gap-6"
+      >
+        <Button variant="ghost" size="icon" className="rounded-full">
+          <ShoppingBag />
+        </Button>
+      </form>
+    );
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="ghost" size="icon" className="rounded-full">
+          <ShoppingBag />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent aria-describedby={undefined}>
+        <DrawerHeader className="px-5">
+          <DrawerTitle className="text-sm">افزودن به سبد</DrawerTitle>
+        </DrawerHeader>
+        <div className="overflow-y-auto">
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col-reverse gap-11 lg:flex-col lg:gap-6"
+          >
+            {sizeHinges && (
+              <Controller
+                control={form.control}
+                name={`${sizeHinges.name}`}
+                render={({ field }) => (
+                  <Field className="gap-3">
+                    <FieldLabel asChild>
+                      <p className="hidden justify-center text-center text-xs leading-normal lg:block">
+                        {sizeHinges.label}
+                      </p>
+                    </FieldLabel>
+                    <SizeRadioGroup
+                      field={field}
+                      options={sizeHinges.options}
+                      form={form}
+                      onSubmit={onSubmit}
+                    />
+                  </Field>
+                )}
+              />
+            )}
+            {!sizeHinges && (
+              <Button variant="ghost" className="text-xs uppercase">
+                افزودن به سبد
+              </Button>
+            )}
+          </form>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+const SizeRadioGroup = ({
+  options,
+  field,
+  form,
+  onSubmit,
+}: SizeRadioGroupProps) => {
+  if (!options) return;
+
+  const handleOnChange = async (value: string) => {
+    if (form.formState.isSubmitting) return;
+
+    if (value !== field.value && value) {
+      field.onChange(value);
+
+      const valid = await form.trigger(field.name);
+      if (valid) {
+        await form.handleSubmit(onSubmit)();
+      }
+    }
+  };
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={handleOnChange}
+      className="flex w-full flex-col justify-center gap-0 lg:flex-row lg:flex-wrap lg:gap-3"
+    >
+      {options &&
+        options.map((item, index) => (
+          <Fragment key={`product-list-7-size-input-${index}`}>
+            <div className="hidden lg:contents">
+              <SizeOptionDesktop
+                stockStatusCode={item.stockStatusCode}
+                id={item.id}
+                label={item.label}
+                value={item.value}
+              />
+            </div>
+            <div className="contents lg:hidden">
+              <SizeOptionMobile
+                stockStatusCode={item.stockStatusCode}
+                id={`${item.id}-mobile`}
+                label={item.label}
+                value={item.value}
+              />
+            </div>
+          </Fragment>
+        ))}
+    </RadioGroup>
+  );
+};
+
+const SizeOptionDesktop = ({
+  id,
+  label,
+  value,
+  stockStatusCode,
+}: SizeOptionProps) => {
+  if (stockStatusCode === STOCK_STATUS.IN_STOCK) {
+    return (
+      <Field>
+        <FieldLabel
+          htmlFor={id}
+          className="flex h-8 min-w-8 cursor-pointer overflow-hidden rounded-full px-1.5 text-xs leading-none font-normal uppercase hover:ring has-checked:bg-primary has-checked:text-primary-foreground"
+        >
+          <RadioGroupItem
+            id={id}
+            className="sr-only"
+            value={value}
+            aria-label={`انتخاب ${label}`}
+          />
+          <div className="m-auto">{label}</div>
+        </FieldLabel>
+      </Field>
+    );
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div>
+            <Field>
+              <FieldLabel
+                htmlFor={id}
+                className="group/size flex h-8 min-w-8 cursor-pointer overflow-hidden rounded-full px-1.5 text-xs leading-none font-normal uppercase not-has-disabled:hover:ring has-checked:bg-primary has-checked:text-primary-foreground has-disabled:bg-muted has-disabled:text-muted-foreground"
+              >
+                <RadioGroupItem
+                  id={id}
+                  className="sr-only"
+                  value={value}
+                  aria-label={`انتخاب ${label}`}
+                  disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+                />
+                <div className="m-auto flex items-center justify-center gap-1.5">
+                  {stockStatusCode === STOCK_STATUS.LOW_STOCK && (
+                    <ClockFading className="size-4 stroke-muted-foreground group-has-checked/size:stroke-primary-foreground" />
+                  )}
+                  {label}
+                </div>
+              </FieldLabel>
+            </Field>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent
+          side="bottom"
+          className="bg-background px-5 shadow [&>span:nth-child(2)>svg]:bg-background [&>span:nth-child(2)>svg]:fill-background"
+        >
+          <span className="text-center text-xs text-muted-foreground">
+            {stockStatusCode === STOCK_STATUS.LOW_STOCK
+              ? "تنها چند عدد مانده"
+              : "ناموجود"}
+          </span>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+const SizeOptionMobile = ({
+  id,
+  label,
+  value,
+  stockStatusCode,
+}: SizeOptionProps) => {
+  return (
+    <Field>
+      <FieldLabel
+        htmlFor={id}
+        className="px-5 pt-5 text-sm leading-normal font-normal uppercase not-has-disabled:active:bg-muted has-disabled:text-muted-foreground"
+      >
+        <RadioGroupItem
+          id={id}
+          className="sr-only"
+          value={value}
+          aria-label={`انتخاب ${label}`}
+          disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+        />
+        <div className="flex w-full items-center justify-between gap-2 border-b pb-5">
+          {label}
+          <span className="text-center text-xs text-muted-foreground normal-case">
+            {stockStatusCode === STOCK_STATUS.LOW_STOCK && "تنها چند عدد مانده!"}
+          </span>
+        </div>
+      </FieldLabel>
+    </Field>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+  discountPercent,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+  discountPercent?: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-col items-start gap-1 text-xs">
+      {onSale ? (
+        <div className="flex items-center gap-1">
+          <span className="leading-tight font-semibold text-red-600">
+            {formatCurrency(sale, currency)}
+          </span>
+          {discountPercent && (
+            <Badge className="bg-red-600 px-1.5 py-px">{discountPercent}</Badge>
+          )}
+        </div>
+      ) : null}
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+    </div>
+  );
+};
+
+export { ProductList7 };
diff --git a/blocks/product-list8.tsx b/blocks/product-list8.tsx
new file mode 100644
index 0000000..c4428fd
--- /dev/null
+++ b/blocks/product-list8.tsx
@@ -0,0 +1,1161 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Minus, Plus, ShoppingBag, Star, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+type Option = {
+  id: string;
+  label: string;
+  value: string;
+  stockStatusCode: StockStatusCode;
+  color?: string;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  options?: Option[];
+  min?: number;
+  max?: number;
+}
+
+type HingesMap = Record<FieldName, Hinges>;
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+  discount?: string;
+}
+
+interface ProductFormProps {
+  hinges: HingesMap;
+  onOpenChange: () => void;
+}
+
+interface QuantityProps {
+  field: ControllerRenderProps<FormType>;
+  max?: number;
+  min?: number;
+}
+
+type Image = {
+  srcset?: string;
+  src: string;
+  sizes?: string;
+  alt: string;
+};
+
+interface Product {
+  link: string;
+  images: [Image, Image];
+  name: string;
+  price: ProductPrice;
+  rate: number;
+  hinges?: HingesMap;
+}
+
+type ProductCardProps = Product;
+
+interface RadioGroupProps {
+  options?: Array<Option>;
+  id: string;
+  field: ControllerRenderProps<FormType>;
+}
+
+type ProductList = Array<Product>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    name: "پیراهن میدی راه‌راه عمودی",
+    price: {
+      regular: 990000.0,
+      sale: 790000.0,
+      currency: "ریال",
+      discount: "-۲۰٪",
+    },
+    rate: 5,
+    link: "#",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555009-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555009-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555009-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555009-1.jpg 640w",
+        alt: "پیراهن میدی راه‌راه عمودی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555003-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555003-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555003-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555003-1.jpg 640w",
+        alt: "نمای دیگر پیراهن میدی راه‌راه",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    ],
+    hinges: {
+      size: {
+        label: "سایز",
+        id: "size",
+        name: "size",
+        options: [
+          {
+            id: "xs-1",
+            value: "xs",
+            label: "xs",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+          {
+            id: "s-1",
+            value: "s",
+            label: "s",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+          {
+            id: "m-1",
+            value: "m",
+            label: "m",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "l-1",
+            value: "l",
+            label: "l",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "xl-1",
+            value: "xl",
+            label: "xl",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "xxl-1",
+            value: "xxl",
+            label: "xxl",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "3xl-1",
+            value: "3xl",
+            label: "3xl",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "4xl-1",
+            value: "4xl",
+            label: "4xl",
+            stockStatusCode: "IN_STOCK",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        id: "color",
+        name: "color",
+        options: [
+          {
+            id: "black-1",
+            label: "مشکی",
+            value: "black",
+            color: "#000000",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "blue-1",
+            label: "آبی",
+            value: "blue",
+            color: "#607FC7",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "red-1",
+            label: "قرمز",
+            value: "red",
+            color: "#97012e",
+            stockStatusCode: "IN_STOCK",
+          },
+        ],
+      },
+      quantity: {
+        label: "تعداد",
+        id: "quantity-1",
+        name: "quantity",
+        min: 1,
+        max: 90,
+      },
+    },
+  },
+  {
+    name: "پیراهن میدی بندی",
+    price: {
+      regular: 990000.0,
+      currency: "ریال",
+    },
+    rate: 4.5,
+    link: "#",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555022-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555022-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555022-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555022-1.jpg 640w",
+        alt: "پیراهن میدی بندی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555033-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-15555033-1.jpg 640w",
+        alt: "نمای دیگر پیراهن میدی بندی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    ],
+    hinges: {
+      size: {
+        label: "سایز",
+        id: "size",
+        name: "size",
+        options: [
+          {
+            id: "xs-2",
+            value: "xs",
+            label: "xs",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "s-2",
+            value: "s",
+            label: "s",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "m-2",
+            value: "m",
+            label: "m",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "l-2",
+            value: "l",
+            label: "l",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        id: "color",
+        name: "color",
+        options: [
+          {
+            id: "black-2",
+            label: "مشکی",
+            value: "black",
+            color: "#000000",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+          {
+            id: "white-2",
+            label: "سفید",
+            value: "white",
+            color: "#FFFFFF",
+            stockStatusCode: "IN_STOCK",
+          },
+        ],
+      },
+      quantity: {
+        label: "تعداد",
+        id: "quantity-2",
+        name: "quantity",
+        min: 1,
+        max: 90,
+      },
+    },
+  },
+  {
+    name: "شرت‌درس میدی کمربنددار",
+    price: {
+      regular: 149000.0,
+      currency: "ریال",
+    },
+    rate: 4.5,
+    link: "#",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19745200-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19745200-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19745200-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19745200-1.jpg 640w",
+        alt: "شرت‌درس میدی کمربنددار",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19745178-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19745178-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19745178-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19745178-1.jpg 640w",
+        alt: "نمای دیگر شرت‌درس میدی کمربنددار",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    ],
+    hinges: {
+      size: {
+        label: "سایز",
+        id: "size",
+        name: "size",
+        options: [
+          {
+            id: "xs-3",
+            value: "xs",
+            label: "xs",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "s-3",
+            value: "s",
+            label: "s",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "m-3",
+            value: "m",
+            label: "m",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "l-3",
+            value: "l",
+            label: "l",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        id: "color",
+        name: "color",
+        options: [
+          {
+            id: "black-3",
+            label: "مشکی",
+            value: "black",
+            color: "#000000",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "blue-3",
+            label: "آبی",
+            value: "blue",
+            color: "#607FC7",
+            stockStatusCode: "IN_STOCK",
+          },
+        ],
+      },
+      quantity: {
+        label: "تعداد",
+        id: "quantity-3",
+        name: "quantity",
+        min: 1,
+        max: 90,
+      },
+    },
+  },
+  {
+    name: "تاپ آستین بلند",
+    price: {
+      regular: 490000.0,
+      currency: "ریال",
+    },
+    rate: 4.5,
+    link: "#",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881407-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881407-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881407-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881407-1.jpg 640w",
+        alt: "تاپ آستین بلند صورتی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881409-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881409-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881409-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881409-1.jpg 640w",
+        alt: "نمای دیگر تاپ آستین بلند",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    ],
+    hinges: {
+      size: {
+        label: "سایز",
+        id: "size",
+        name: "size",
+        options: [
+          {
+            id: "xs-4",
+            value: "xs",
+            label: "xs",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "s-4",
+            value: "s",
+            label: "s",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "m-4",
+            value: "m",
+            label: "m",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "l-4",
+            value: "l",
+            label: "l",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        id: "color",
+        name: "color",
+        options: [
+          {
+            id: "pink-4",
+            label: "صورتی",
+            value: "pink",
+            color: "#F1E1E1",
+            stockStatusCode: "IN_STOCK",
+          },
+        ],
+      },
+      quantity: {
+        label: "تعداد",
+        id: "quantity-4",
+        name: "quantity",
+        min: 1,
+        max: 90,
+      },
+    },
+  },
+  {
+    name: "تاپ آستین بلند",
+    price: {
+      regular: 490000.0,
+      currency: "ریال",
+    },
+    rate: 4.5,
+    link: "#",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881457-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881457-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881457-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881457-1.jpg 640w",
+        alt: "تاپ آستین بلند کرم",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881454-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881454-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881454-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881454-1.jpg 640w",
+        alt: "نمای دیگر تاپ آستین بلند کرم",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    ],
+    hinges: {
+      size: {
+        label: "سایز",
+        id: "size",
+        name: "size",
+        options: [
+          {
+            id: "xs-5",
+            value: "xs",
+            label: "xs",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "s-5",
+            value: "s",
+            label: "s",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "m-5",
+            value: "m",
+            label: "m",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "l-5",
+            value: "l",
+            label: "l",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        id: "color",
+        name: "color",
+        options: [
+          {
+            id: "black-5",
+            label: "مشکی",
+            value: "black",
+            color: "#000000",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+          {
+            id: "white-5",
+            label: "سفید",
+            value: "white",
+            color: "#FFFFFF",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "pink-5",
+            label: "صورتی",
+            value: "pink",
+            color: "#F1E1E1",
+            stockStatusCode: "IN_STOCK",
+          },
+        ],
+      },
+      quantity: {
+        label: "تعداد",
+        id: "quantity-5",
+        name: "quantity",
+        min: 1,
+        max: 90,
+      },
+    },
+  },
+  {
+    name: "شرت‌درس میدی کمربنددار",
+    price: {
+      regular: 990000.0,
+      currency: "ریال",
+    },
+    rate: 4.5,
+    link: "#",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851438-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851438-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851438-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851438-1.jpg 640w",
+        alt: "شرت‌درس میدی کمربنددار بژ",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-1.jpg 640w",
+        alt: "نمای دیگر شرت‌درس میدی بژ",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    ],
+    hinges: {
+      size: {
+        label: "سایز",
+        id: "size",
+        name: "size",
+        options: [
+          {
+            id: "xs-6",
+            value: "xs",
+            label: "xs",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "s-6",
+            value: "s",
+            label: "s",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "m-6",
+            value: "m",
+            label: "m",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "l-6",
+            value: "l",
+            label: "l",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        id: "color",
+        name: "color",
+        options: [
+          {
+            id: "beige-6",
+            label: "بژ",
+            value: "beige",
+            color: "#EDE8EC",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "white-6",
+            label: "سفید",
+            value: "white",
+            color: "#FFFFFF",
+            stockStatusCode: "IN_STOCK",
+          },
+        ],
+      },
+      quantity: {
+        label: "تعداد",
+        id: "quantity-6",
+        name: "quantity",
+        min: 1,
+        max: 90,
+      },
+    },
+  },
+  {
+    name: "پالتو بارانی",
+    price: {
+      regular: 199000.0,
+      sale: 990000.0,
+      discount: "-۵۰٪",
+      currency: "ریال",
+    },
+    rate: 4.5,
+    link: "#",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851622-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851622-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851622-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851622-1.jpg 640w",
+        alt: "پالتو بارانی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851458-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851458-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851458-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851458-1.jpg 640w",
+        alt: "نمای دیگر پالتو بارانی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    ],
+    hinges: {
+      size: {
+        label: "سایز",
+        id: "size",
+        name: "size",
+        options: [
+          {
+            id: "xs-7",
+            value: "xs",
+            label: "xs",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "s-7",
+            value: "s",
+            label: "s",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "m-7",
+            value: "m",
+            label: "m",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "l-7",
+            value: "l",
+            label: "l",
+            stockStatusCode: "OUT_OF_STOCK",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        id: "color",
+        name: "color",
+        options: [
+          {
+            id: "black-7",
+            label: "مشکی",
+            value: "black",
+            color: "#000000",
+            stockStatusCode: "IN_STOCK",
+          },
+          {
+            id: "beige-7",
+            label: "بژ",
+            value: "beige",
+            color: "#EDE8EC",
+            stockStatusCode: "IN_STOCK",
+          },
+        ],
+      },
+      quantity: {
+        label: "تعداد",
+        id: "quantity-7",
+        name: "quantity",
+        min: 1,
+        max: 90,
+      },
+    },
+  },
+  {
+    name: "کیف مینی چرم مصنوعی",
+    price: {
+      regular: 990000.0,
+      currency: "ریال",
+    },
+    rate: 4.5,
+    link: "#",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-dhanno-22432995-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-dhanno-22432995-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-dhanno-22432995-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-dhanno-22432995-1.jpg 640w",
+        alt: "کیف مینی چرم مصنوعی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-dhanno-22432980-2.jpg",
+        srcset:
+          "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-dhanno-22432980-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-dhanno-22432980-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/clothes/pexels-dhanno-22432980-1.jpg 640w",
+        alt: "نمای دیگر کیف مینی چرم مصنوعی",
+        sizes: "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+      },
+    ],
+  },
+];
+
+interface ProductList8Props {
+  className?: string;
+}
+
+const ProductList8 = ({ className }: ProductList8Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="grid grid-cols-1 gap-px sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
+        {PRODUCTS_LIST.map((item, index) => (
+          <ProductCard key={`product-list-8-card-${index}`} {...item} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+const ProductCard = ({
+  link,
+  images,
+  name,
+  price,
+  rate,
+  hinges,
+}: ProductCardProps) => {
+  const [open, setOpen] = useState(false);
+  const { regular, sale, currency } = price;
+
+  const onOpenChange = () => {
+    if (hinges) {
+      setOpen(!open);
+    }
+  };
+
+  return (
+    <Card className="group relative block rounded-none border-none py-5 shadow-none ring ring-border">
+      <a href={link} className="absolute inset-0 z-50 size-full"></a>
+      <CardContent>
+        <div className="relative overflow-hidden">
+          <AspectRatio
+            ratio={0.833342901}
+            className="overflow-hidden rounded-[1.25rem]"
+          >
+            {images.map((img, index) => (
+              <div
+                className="absolute inset-0 size-full transition-opacity duration-350 first:z-20 group-hover:first:opacity-0 last:z-10 first:[&>img]:scale-110 first:[&>img]:delay-50 group-hover:first:[&>img]:scale-100 last:[&>img]:scale-110 group-hover:last:[&>img]:scale-100"
+                key={`product-list-8-card-img-${index}`}
+              >
+                <img
+                  src={img.src}
+                  srcSet={img.srcset}
+                  alt={img.alt}
+                  sizes={img.sizes}
+                  className="block size-full object-cover object-center transition-transform duration-350"
+                />
+              </div>
+            ))}
+          </AspectRatio>
+          <Badge
+            variant="outline"
+            className="absolute start-4 top-4 z-30 rounded-full bg-background font-bold opacity-0 transition-opacity duration-350 group-hover:opacity-100"
+          >
+            <Star className="fill-inherit" />
+            {rate.toLocaleString("fa-IR")}
+          </Badge>
+          {price.discount && (
+            <Badge
+              variant="outline"
+              className="absolute end-4 top-4 z-30 rounded-full bg-background font-bold text-red-600 transition-opacity duration-350"
+            >
+              {price.discount}
+            </Badge>
+          )}
+          <Button
+            size="icon"
+            onClick={onOpenChange}
+            className="absolute end-4 bottom-4 z-60 rounded-full lg:translate-y-[calc(100%+1rem)] lg:group-hover:translate-y-0"
+          >
+            <ShoppingBag />
+          </Button>
+        </div>
+        <div className="space-y-0.5 pt-3.5">
+          <CardTitle className="leading-relaxed">{name}</CardTitle>
+          <ProductCardPrice regular={regular} sale={sale} currency={currency} />
+        </div>
+      </CardContent>
+      {hinges && (
+        <Collapsible open={open} onOpenChange={onOpenChange}>
+          <CollapsibleContent className="absolute inset-0 z-70 size-full bg-background">
+            <ProductForm onOpenChange={onOpenChange} hinges={hinges} />
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+    </Card>
+  );
+};
+
+const formSchema = z.object({
+  size: z.string(),
+  color: z.string(),
+  quantity: z.number(),
+});
+
+const ProductForm = ({ onOpenChange, hinges }: ProductFormProps) => {
+  const form = useForm<FormType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: "",
+      size: "",
+      quantity: 1,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const sizeHinges = hinges?.size;
+  const colorHinges = hinges?.color;
+  const quantityHinges = hinges?.quantity;
+
+  const currentColorId = form.watch("color");
+  const currentColor = useMemo(
+    () =>
+      colorHinges?.options?.find((item) => item.value === currentColorId)
+        ?.label ?? "",
+    [currentColorId, colorHinges],
+  );
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="h-full">
+      <div className="relative h-full">
+        <ScrollArea className="h-full pb-30 lg:pb-17">
+          <div className="flex size-full flex-col gap-6">
+            <div className="relative space-y-5 p-4">
+              <Button
+                size="icon"
+                variant="ghost"
+                type="button"
+                onClick={onOpenChange}
+                className="absolute end-2 top-2 rounded-full"
+              >
+                <X />
+              </Button>
+              {sizeHinges && (
+                <Controller
+                  control={form.control}
+                  name={sizeHinges.name}
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel
+                        className="text-base leading-normal font-bold"
+                        asChild
+                      >
+                        <h2>{sizeHinges.label}</h2>
+                      </FieldLabel>
+                      <div className="relative -me-4 overflow-hidden after:pointer-events-none after:absolute after:end-0 after:top-0 after:block after:h-full after:w-10.5 after:bg-gradient-to-l after:from-transparent after:to-background after:content-['']">
+                        <SizeRadioGroup
+                          field={field}
+                          options={sizeHinges.options}
+                          id={sizeHinges.id}
+                        />
+                      </div>
+                    </Field>
+                  )}
+                />
+              )}
+              {colorHinges && (
+                <Controller
+                  control={form.control}
+                  name={colorHinges.name}
+                  render={({ field }) => (
+                    <Field>
+                      <FieldLabel
+                        className="text-base leading-normal font-bold"
+                        asChild
+                      >
+                        <h2>{colorHinges.label}</h2>
+                      </FieldLabel>
+                      <ColorRadioGroup
+                        field={field}
+                        options={colorHinges.options}
+                        id={colorHinges.id}
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        {currentColor
+                          ? currentColor
+                          : `${colorHinges.options?.length.toLocaleString("fa-IR")} رنگ موجود`}
+                      </p>
+                    </Field>
+                  )}
+                />
+              )}
+            </div>
+          </div>
+        </ScrollArea>
+        <div className="absolute inset-x-0 bottom-0">
+          <div className="flex flex-col items-center gap-4 bg-background p-4 lg:flex-row">
+            {quantityHinges && (
+              <Controller
+                control={form.control}
+                name={quantityHinges.name}
+                render={({ field }) => (
+                  <Field className="self-stretch">
+                    <Quantity
+                      field={field}
+                      min={quantityHinges?.min}
+                      max={quantityHinges?.max}
+                    />
+                  </Field>
+                )}
+              />
+            )}
+            <div className="flex-1 self-stretch">
+              <Button
+                disabled={!form.getValues("color") && !form.getValues("size")}
+                className="w-full rounded-full"
+              >
+                افزودن به سبد
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+const SizeRadioGroup = ({ options, id, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      id={id}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full items-center gap-2 overflow-x-auto p-px [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
+      {options.map((item, index) => (
+        <Field
+          className="shrink-0 last:pe-14.5"
+          key={`product-list-8-size-${index}`}
+        >
+          <FieldLabel
+            htmlFor={item.id}
+            className="h-9 cursor-pointer overflow-hidden rounded-full border px-4.5 py-3 text-center leading-none font-normal uppercase ring-primary duration-400 not-has-disabled:hover:ring-1 has-checked:ring has-checked:hover:ring has-disabled:opacity-25"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              aria-label={`انتخاب ${item.label}`}
+              disabled={item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+            />
+            {item.label}
+          </FieldLabel>
+        </Field>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const ColorRadioGroup = ({ options, id, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      id={id}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap items-center gap-2 overflow-x-auto p-px [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
+      {options.map((item, index) => (
+        <Field key={`product-list-8-color-${index}`}>
+          <FieldLabel
+            htmlFor={item.id}
+            className="relative flex size-9 cursor-pointer overflow-hidden rounded-full border ring-primary duration-400 not-has-disabled:hover:ring has-checked:ring has-disabled:opacity-25"
+          >
+            <RadioGroupItem
+              id={item.id}
+              className="sr-only"
+              value={item.value}
+              aria-label={`انتخاب ${item.label}`}
+              disabled={item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+            />
+            <div
+              style={{
+                backgroundColor: item.color,
+              }}
+              className="m-auto size-7.5 rounded-full"
+            ></div>
+            {item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK && (
+              <span className="absolute top-0 bottom-0 start-1/2 z-10 block h-full w-0 rotate-45 border-s"></span>
+            )}
+          </FieldLabel>
+        </Field>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const Quantity = ({ field, max, min }: QuantityProps) => {
+  return (
+    <div
+      className="flex h-9 w-full min-w-34 items-center overflow-hidden rounded-full border shadow-xs"
+      aria-label="تعداد"
+    >
+      <Button
+        onClick={() =>
+          field.onChange(Math.max(min || 1, Number(field.value || 1) - 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Minus />
+      </Button>
+      <Input
+        {...field}
+        value={field.value ?? ""}
+        onChange={(e) => {
+          const raw = e.target.value;
+          const parsed = parseInt(raw, 10);
+
+          // Accept empty string for typing, but validate if not a number
+          if (raw === "") {
+            field.onChange("");
+          } else if (!isNaN(parsed)) {
+            field.onChange(parsed);
+          }
+        }}
+        type="number"
+        min={Math.max(min ?? 1, 1)}
+        max={max ?? 99}
+        className="h-full w-full min-w-10 flex-1 [appearance:textfield] rounded-none border-0 px-1 text-center shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <Button
+        onClick={() =>
+          field.onChange(Math.min(max || 99, Number(field.value || 1) + 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Plus />
+      </Button>
+    </div>
+  );
+};
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const ProductCardPrice = ({
+  regular,
+  sale,
+  currency,
+}: {
+  regular: number;
+  sale?: number;
+  currency: string;
+}) => {
+  const onSale = sale != null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-2">
+      {onSale ? (
+        <span className="leading-tight text-foreground">
+          {formatCurrency(sale, currency)}
+        </span>
+      ) : null}
+      <span
+        className={cn(
+          "leading-tight",
+          onSale
+            ? "text-muted-foreground line-through"
+            : "text-foreground",
+        )}
+      >
+        {formatCurrency(regular, currency)}
+      </span>
+    </div>
+  );
+};
+
+export { ProductList8 };
diff --git a/blocks/product-list9.tsx b/blocks/product-list9.tsx
new file mode 100644
index 0000000..85deed5
--- /dev/null
+++ b/blocks/product-list9.tsx
@@ -0,0 +1,1407 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, ShoppingBag } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { Price, PriceValue } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { type CarouselApi } from "@/components/ui/carousel";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type Variant = {
+  color: string;
+  value: string;
+  id: string;
+  label: string;
+  link: string;
+  images: [Image, Image];
+};
+interface Product {
+  name: string;
+  category: {
+    label: string;
+    link: string;
+  };
+  images: [Image, Image];
+  link: string;
+  price: ProductPrice;
+  variants: Array<Variant>;
+  badges?: Array<Badge>;
+}
+
+interface PromoData {
+  image: string;
+  title: string;
+  kicker: string;
+  cta: {
+    label: string;
+    link: string;
+  };
+}
+
+type PromoCardProps = PromoData;
+
+type Badge = {
+  text: string;
+  color: string;
+};
+
+type ProductCardProps = Product;
+
+type Image = {
+  srcset?: string;
+  src: string;
+  sizes?: string;
+  alt: string;
+};
+
+interface ProductColorsProps {
+  variants: Omit<Variant, "images">[];
+  value: string;
+  onOptionHover: (value: string) => void;
+}
+
+interface BadgesProps {
+  badges?: Array<Badge>;
+}
+
+type ProductList = Array<{
+  title: string;
+  value: string;
+  promotion: PromoData;
+  products: Array<Product>;
+}>;
+
+const PRODUCTS_LIST: ProductList = [
+  {
+    title: "تازه‌ها",
+    value: "new_arrivals",
+    promotion: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/furniture/john-black-RV9T8txb2uY-unsplash-1.jpg",
+      title: "تازه. شیک. همین الان.",
+      kicker: "پیشنهاد ویژه",
+      cta: {
+        label: "مشاهده تازه‌ها",
+        link: "#",
+      },
+    },
+    products: [
+      {
+        name: "مبل چرمی",
+        price: {
+          regular: 899000.0,
+          sale: 799000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "صندلی‌ها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#4e2115",
+            link: "#",
+            label: "قهوه‌ای دربی",
+            value: "brown_derby-1",
+            id: "brown_derby-1",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        badges: [
+          {
+            text: "حراج",
+            color: "oklch(57.7% 0.245 27.325)",
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "لیوان سرامیکی",
+        price: {
+          regular: 59900.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "فنجان‌ها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#4E7055",
+            link: "#",
+            label: "سبز",
+            value: "green-2",
+            id: "green-2",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+          {
+            color: "#5F788B",
+            link: "#",
+            label: "آبی",
+            value: "blue-2",
+            id: "blue-2",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "کتری چای",
+        price: {
+          regular: 920000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "ظروف آشپزخانه",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#FFFFFF",
+            link: "#",
+            label: "سفید",
+            value: "white-3",
+            id: "white-3",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "شمع‌های معطر",
+        price: {
+          regular: 500000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "شمع‌ها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#000000",
+            link: "#",
+            label: "مشکی",
+            value: "black-4",
+            id: "black-4",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+          {
+            color: "#E8B951",
+            link: "#",
+            label: "طلایی",
+            value: "gold-5",
+            id: "gold-5",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: 'قاب چوبی ۵×۷ اینچ',
+        price: {
+          regular: 200000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "قاب‌ها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#C6B89C",
+            link: "#",
+            label: "قهوه‌ای",
+            value: "brown-6",
+            id: "brown-6",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "آباژور کره‌ای",
+        price: {
+          regular: 199000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "چراغ‌ها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#B8B9BD",
+            link: "#",
+            label: "خاکستری",
+            value: "gray-7",
+            id: "gray-7",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "پرفروش‌ها",
+    value: "hot_items",
+    promotion: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207892-1.jpg",
+      title: "جسورانه. ضروری.",
+      kicker: "حراج",
+      cta: {
+        label: "مشاهده تازه‌ها",
+        link: "#",
+      },
+    },
+    products: [
+      {
+        name: "صندلی چرمی",
+        price: {
+          regular: 899000.0,
+          sale: 799000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "صندلی‌ها",
+          link: "#",
+        },
+        link: "#",
+        badges: [
+          {
+            text: "بهترین انتخاب!",
+            color: "oklch(54.6% 0.245 262.881)",
+          },
+          {
+            text: "حراج",
+            color: "oklch(57.7% 0.245 27.325)",
+          },
+        ],
+        variants: [
+          {
+            color: "#000000",
+            link: "#",
+            label: "مشکی",
+            value: "black-8",
+            id: "black-8",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "فنجان سرامیکی",
+        price: {
+          regular: 190000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "فنجان‌ها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#A8A081",
+            link: "#",
+            label: "قهوه‌ای",
+            value: "brown-9",
+            id: "brown-9",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+          {
+            color: "#C2CCCD",
+            link: "#",
+            label: "قهوه‌ای",
+            value: "brown-10",
+            id: "brown-10",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "صندلی ناهارخوری",
+        price: {
+          regular: 299000.0,
+          sale: 199000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "صندلی",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#DAC9AF",
+            link: "#",
+            label: "قهوه‌ای",
+            value: "brown-11",
+            id: "brown-11",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "ساعت دیواری",
+        price: {
+          regular: 159000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "ساعت‌ها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#FFFFFF",
+            link: "#",
+            label: "سفید",
+            value: "white-12",
+            id: "white-12",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "بشقاب سرامیکی",
+        price: {
+          regular: 990000.0,
+          sale: 890000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "ظروف آشپزخانه",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#709C69",
+            link: "#",
+            label: "سبز",
+            value: "green-13",
+            id: "green-13",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+          {
+            color: "#E5BBB4",
+            link: "#",
+            label: "صورتی",
+            value: "pink-14",
+            id: "pink-14",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        badges: [
+          {
+            text: "حراج",
+            color: "oklch(57.7% 0.245 27.325)",
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "کابینت چوبی",
+        price: {
+          regular: 699000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "کشوها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#9f8568",
+            link: "#",
+            label: "قهوه‌ای",
+            value: "brown-15",
+            id: "brown-15",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+      {
+        name: "صندلی چوبی",
+        price: {
+          regular: 490000.0,
+          currency: "ریال",
+        },
+        category: {
+          label: "صندلی‌ها",
+          link: "#",
+        },
+        link: "#",
+        variants: [
+          {
+            color: "#9f8568",
+            link: "#",
+            label: "قهوه‌ای",
+            value: "brown-16",
+            id: "brown-16",
+            images: [
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+              {
+                src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-3.jpg",
+                srcset:
+                  "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-1.jpg 640w",
+                alt: "تصویر محصول",
+                sizes:
+                  "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+              },
+            ],
+          },
+        ],
+        images: [
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+          {
+            src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-3.jpg",
+            srcset:
+              "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-1.jpg 640w",
+            alt: "تصویر محصول",
+            sizes:
+              "(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const ProductList9TitleBlock = () => {
+  return (
+    <div dir="rtl" className="flex flex-col items-start gap-2 text-start">
+      <h2 className="text-xl leading-snug font-bold lg:text-3xl">تازه‌ها</h2>
+      <p className="font-medium text-muted-foreground">
+        مرز سنتی بین فضای شخصی و حرفه‌ای را از بین ببرید.
+      </p>
+    </div>
+  );
+};
+
+const ProductList9Header = () => {
+  return (
+    <div className="mb-8 flex items-start justify-between gap-4">
+      <div className="flex gap-4">
+        {PRODUCTS_LIST.map((item) => (
+          <span
+            key={`product-list-9-tab-label-${item.value}`}
+            className="pb-1 font-medium text-muted-foreground"
+          >
+            {item.title}
+          </span>
+        ))}
+      </div>
+      <ProductList9TitleBlock />
+    </div>
+  );
+};
+
+type TabProductCarouselProps = {
+  promotion: PromoData;
+  products: Product[];
+};
+
+const TabProductCarousel = ({
+  promotion,
+  products,
+}: TabProductCarouselProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  const onScroll = useCallback((carouselApi: CarouselApi) => {
+    if (!carouselApi) return;
+    const progress = Math.max(
+      0,
+      Math.min(1, carouselApi.scrollProgress() ?? 0),
+    );
+    setScrollProgress(progress + 0.25);
+  }, []);
+
+  const onSelect = useCallback(
+    (carouselApi: CarouselApi) => {
+      if (!carouselApi) return;
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+      onScroll(carouselApi);
+    },
+    [onScroll],
+  );
+
+  useEffect(() => {
+    if (!api) return;
+
+    requestAnimationFrame(() => {
+      onSelect(api);
+    });
+
+    api.on("reInit", onSelect).on("scroll", onScroll).on("select", onSelect);
+
+    return () => {
+      api.off("reInit", onSelect);
+      api.off("scroll", onScroll);
+      api.off("select", onSelect);
+    };
+  }, [api, onScroll, onSelect]);
+
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-x-3 gap-y-5 sm:grid-cols-2 md:hidden">
+        <PromoCard {...promotion} />
+        {products.map((product, index) => (
+          <ProductCard
+            key={`product-list-9-mobile-item-${index}`}
+            {...product}
+          />
+        ))}
+      </div>
+
+      <Carousel
+        dir="rtl"
+        opts={{
+          align: "start",
+          direction: "rtl",
+        }}
+        setApi={setApi}
+        className="hidden w-full md:block"
+      >
+        <CarouselContent className="ml-0 -mr-4 flex">
+          <CarouselItem className="pl-0 pr-4 basis-1/3 lg:basis-1/4 xl:basis-1/5">
+            <PromoCard {...promotion} />
+          </CarouselItem>
+          {products.map((product, index) => (
+            <CarouselItem
+              className="pl-0 pr-4 basis-1/3 lg:basis-1/4 xl:basis-1/5"
+              key={`product-list-9-item-${index}`}
+            >
+              <ProductCard {...product} />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <div className="mt-6 flex items-center gap-3">
+          <div className="relative h-0.5 w-full overflow-hidden bg-muted">
+            <div
+              style={{
+                transform: `scaleX(${scrollProgress})`,
+              }}
+              className="h-full origin-start bg-primary"
+            ></div>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="static size-8 shrink-0 translate-0 touch-manipulation"
+            disabled={!canScrollPrev}
+            onClick={() => api?.scrollPrev()}
+          >
+            <ChevronRight className="size-4" />
+            <span className="sr-only">اسلاید قبلی</span>
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="static size-8 shrink-0 translate-0 touch-manipulation"
+            disabled={!canScrollNext}
+            onClick={() => api?.scrollNext()}
+          >
+            <ChevronLeft className="size-4" />
+            <span className="sr-only">اسلاید بعدی</span>
+          </Button>
+        </div>
+      </Carousel>
+    </>
+  );
+};
+
+interface ProductList9Props {
+  className?: string;
+}
+
+const ProductList9 = ({ className }: ProductList9Props) => {
+  const [mounted, setMounted] = useState(false);
+  const [activeTab, setActiveTab] = useState(PRODUCTS_LIST[0].value);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <section className={cn("overflow-hidden py-32", className)}>
+        <div className="container">
+          <ProductList9Header />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className={cn("overflow-hidden py-32", className)}>
+      <div className="container">
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="block"
+        >
+          <div className="mb-8 flex items-start justify-between gap-4">
+            <TabsList className="!h-auto gap-4 bg-transparent p-0">
+              {PRODUCTS_LIST.map((item) => (
+                <TabsTrigger
+                  key={`product-list-9-tab-trigger-${item.value}`}
+                  value={item.value}
+                  className="rounded-none bg-transparent px-0 pb-1 font-medium text-muted-foreground shadow-none data-active:bg-transparent data-active:text-foreground data-active:underline data-active:underline-offset-8 data-active:!shadow-none"
+                >
+                  {item.title}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            <ProductList9TitleBlock />
+          </div>
+          {PRODUCTS_LIST.map((item, index) => (
+            <TabsContent
+              value={item.value}
+              key={`product-list-9-tab-content-${index}`}
+              className="mt-0 data-[state=active]:animate-fade-in"
+            >
+              {activeTab === item.value ? (
+                <TabProductCarousel
+                  key={item.value}
+                  promotion={item.promotion}
+                  products={item.products}
+                />
+              ) : null}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+const PromoCard = ({ image, title, cta, kicker }: PromoCardProps) => {
+  return (
+    <Card
+      dir="rtl"
+      className="group relative flex size-full min-h-95 min-w-47.5 flex-col items-start justify-between gap-5 overflow-hidden rounded-xl !p-6 text-start before:absolute before:inset-0 before:z-10 before:bg-black/20 lg:max-w-80"
+    >
+      <img
+        src={image}
+        alt={title}
+        className="absolute inset-0 z-5 size-full origin-center object-cover object-center transition-transform duration-700 group-hover:scale-110"
+      />
+      <a href={cta.link} className="absolute inset-0 z-10 size-full"></a>
+      <CardHeader className="pointer-events-none z-20 w-full gap-4 p-0 text-start">
+        <p className="font-bold text-white">{kicker}</p>
+        <CardTitle className="text-start text-3xl leading-tight text-white md:text-xl">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardAction className="z-20 self-start">
+        <Button asChild variant="secondary" className="rounded-full">
+          <a href={cta.link}>{cta.label}</a>
+        </Button>
+      </CardAction>
+    </Card>
+  );
+};
+
+const ProductCard = ({
+  link,
+  images,
+  name,
+  price,
+  category,
+  variants,
+  badges,
+}: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+  const [selectedColor, setSelectedColor] = useState<string>("");
+
+  const onOptionHover = (value: string) => {
+    setSelectedColor(value);
+  };
+
+  const productImages = useMemo(() => {
+    return variants.find((v) => v.value === selectedColor)?.images ?? images;
+  }, [images, selectedColor, variants]);
+
+  return (
+    <Card className="relative block rounded-none border-none bg-background p-0 shadow-none ring-0">
+      <CardContent className="p-0">
+        <div className="group relative overflow-hidden">
+          <a href={link}>
+            <AspectRatio ratio={1} className="overflow-hidden rounded-xl">
+              {productImages.map((img, index) => (
+                <div
+                  className="absolute inset-0 size-full transition-opacity duration-700 first:z-20 group-hover:first:opacity-0 last:z-10 first:[&>img]:scale-105 first:[&>img]:delay-50 group-hover:first:[&>img]:scale-100 last:[&>img]:scale-105 group-hover:last:[&>img]:scale-100"
+                  key={`product-list-9-card-img-wrapper-${index}`}
+                >
+                  <img
+                    srcSet={img.srcset}
+                    alt={img.alt}
+                    sizes={img.sizes}
+                    className="block size-full object-cover object-center transition-transform duration-700"
+                  />
+                </div>
+              ))}
+            </AspectRatio>
+          </a>
+          <div className="absolute start-2.5 top-2.5 z-60">
+            <Badges badges={badges} />
+          </div>
+          <div className="absolute end-2.5 bottom-2.5 z-60 md:hidden">
+            <Button variant="secondary" size="icon" className="rounded-full">
+              <ShoppingBag />
+            </Button>
+          </div>
+          <div className="absolute inset-x-4 bottom-4 z-60 hidden md:block">
+            <Button
+              variant="secondary"
+              className="w-full rounded-full opacity-0 duration-700 lg:translate-y-4 lg:group-hover:translate-y-0 lg:group-hover:opacity-100"
+            >
+              انتخاب گزینه‌ها
+            </Button>
+          </div>
+        </div>
+        <div className="flex flex-col gap-1 pt-5">
+          <a
+            href={category.link}
+            dir="rtl"
+            className="block w-full text-start text-xs leading-loose font-bold text-muted-foreground uppercase underline-offset-4 hover:underline"
+          >
+            {category.label}
+          </a>
+          <a
+            href={link}
+            dir="rtl"
+            className="block w-full text-start underline-offset-4 hover:underline"
+          >
+            <CardTitle className="text-start leading-normal">{name}</CardTitle>
+          </a>
+          <div dir="rtl" className="flex w-full justify-start">
+            <Price
+              onSale={sale != null}
+              className="text-sm leading-normal font-bold"
+            >
+              <PriceValue
+                price={sale}
+                currency={currency}
+                variant="sale"
+                className="text-red-700"
+              />
+              <PriceValue price={regular} currency={currency} variant="regular" />
+            </Price>
+          </div>
+          <ProductColors
+            value={selectedColor}
+            onOptionHover={onOptionHover}
+            variants={variants}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const ProductColors = ({
+  value,
+  onOptionHover,
+  variants,
+}: ProductColorsProps) => {
+  if (!variants) return;
+
+  return (
+    <TooltipProvider>
+      <RadioGroup value={value} className="mt-2 flex items-center gap-2">
+        {variants.map((item, index) => (
+          <Label
+            className="relative block pb-1.5 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:w-full after:bg-primary after:opacity-0 after:transition-opacity hover:after:opacity-100 has-data-[state=checked]:after:opacity-100"
+            htmlFor={item.id}
+            key={`product-list-9-color-${index}`}
+          >
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <a href={item.link}>
+                  <div
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                    className="size-5.5 border"
+                    onMouseEnter={() => onOptionHover(item.value)}
+                  ></div>
+                </a>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{item.label}</p>
+              </TooltipContent>
+            </Tooltip>
+            <RadioGroupItem
+              value={item.value}
+              id={item.id}
+              className="sr-only"
+            />
+          </Label>
+        ))}
+      </RadioGroup>
+    </TooltipProvider>
+  );
+};
+
+const Badges = ({ badges }: BadgesProps) => {
+  if (!badges) return;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {badges.map((item, index) => (
+        <Badge
+          style={{ backgroundColor: item.color }}
+          key={`product-list-9-badge-${index}`}
+          className="rounded-full dark:text-white"
+        >
+          {item.text}
+        </Badge>
+      ))}
+    </div>
+  );
+};
+
+export { ProductList9 };
diff --git a/blocks/product-quick-view4.tsx b/blocks/product-quick-view4.tsx
new file mode 100644
index 0000000..fa3fa74
--- /dev/null
+++ b/blocks/product-quick-view4.tsx
@@ -0,0 +1,490 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Heart } from "lucide-react";
+import { useMemo } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import { Price } from "@/components/shadcnblocks/price";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { FieldLegend, FieldSet } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+type Image = {
+  src: string;
+  alt: string;
+};
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type Option = {
+  id: string;
+  value: string;
+  label: string;
+  thumbnail?: string;
+  stockStatusCode?: StockStatusCode;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  min?: number;
+  max?: number;
+  name: FieldName;
+  options?: Option[];
+}
+
+type Product = {
+  images: Image[];
+  name: string;
+  description: string;
+  link: string;
+  price: ProductPrice;
+  hinges: Record<FieldName, Hinges>;
+  variant: {
+    color: string;
+    size: string;
+  };
+};
+
+interface ProductImagesProps {
+  images: Image[];
+}
+
+interface ProductFormProps {
+  hinges: Record<FieldName, Hinges>;
+  selected?: FormType;
+}
+
+interface RadioGroupProps {
+  options?: Array<Option>;
+  field: ControllerRenderProps<FormType>;
+}
+
+type SizeOptionProps = Option;
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const PRODUCT_DETAILS: Product = {
+  name: "کلاه فدورا قهوه‌ای روشن شیک",
+  description:
+    "طراحی شیک و سبک برای استایل روزمره؛ راحتی و ظرافت در یک کلاه فدورا.",
+  link: "#",
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Hat-and-Sunglasses-2.png",
+      alt: "کلاه فدورا قهوه‌ای با عینک آفتابی",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Portrait-hat-2.png",
+      alt: "پرتره با کلاه فدورا شیک",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Modern-Look-2.png",
+      alt: "استایل مدرن با کلاه فدورا",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Fashionable-Pose-2.png",
+      alt: "پوز مد با کلاه فدورا",
+    },
+  ],
+  price: {
+    regular: 499000.0,
+    sale: 389000.0,
+    currency: "ریال",
+  },
+  variant: {
+    color: "light-brown",
+    size: "size-1",
+  },
+  hinges: {
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "light-brown",
+          value: "light-brown",
+          label: "قهوه‌ای روشن",
+          thumbnail:
+            "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Beige-Fedora-1.png",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "dark-brown",
+          value: "dark-brown",
+          label: "قهوه‌ای تیره",
+          thumbnail:
+            "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-1.png",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "black",
+          value: "black",
+          label: "مشکی",
+          thumbnail:
+            "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Black-Fedora-Hat-1.png",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+      ],
+    },
+    size: {
+      label: "سایز کلاه",
+      id: "size",
+      name: "size",
+      options: [
+        {
+          id: "size-1",
+          value: "size-1",
+          label: "6⅝",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "size-2",
+          value: "size-2",
+          label: "6¾",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "size-3",
+          value: "size-3",
+          label: "6⅞",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "size-4",
+          value: "size-4",
+          label: "7",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "size-5",
+          value: "size-5",
+          label: "7⅛",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "size-6",
+          value: "size-6",
+          label: "7¼",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "size-7",
+          value: "size-7",
+          label: "7⅜",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "size-8",
+          value: "size-8",
+          label: "7½",
+          stockStatusCode: "IN_STOCK",
+        },
+      ],
+    },
+  },
+};
+
+const ProductQuickView4 = ({
+  images = PRODUCT_DETAILS.images,
+  name = PRODUCT_DETAILS.name,
+  description = PRODUCT_DETAILS.description,
+  link = PRODUCT_DETAILS.link,
+  price = PRODUCT_DETAILS.price,
+  hinges = PRODUCT_DETAILS.hinges,
+  variant = PRODUCT_DETAILS.variant,
+}) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Dialog defaultOpen>
+      <DialogContent
+        style={
+          {
+            "--dialog-height": "calc(100dvh - 2.5rem)",
+            "--dialog-max-height": "38.75rem",
+          } as React.CSSProperties
+        }
+        className="block h-dvh w-full max-w-240! rounded-none border-none p-0 md:h-[var(--dialog-height)] md:max-h-[var(--dialog-max-height)]"
+      >
+        <div className="max-md:hide-scrollbar grid overflow-auto max-md:h-full md:grid-cols-2 md:overflow-hidden">
+          <div>
+            <ProductImages images={images} />
+          </div>
+          <div>
+            <div className="hide-scrollbar h-full space-y-5 px-8 py-8 md:h-[var(--dialog-height)] md:max-h-[var(--dialog-max-height)] md:overflow-auto md:px-15 md:py-14">
+              <div className="space-y-2">
+                <DialogTitle className="text-xl leading-normal font-semibold">
+                  {name}
+                </DialogTitle>
+                <DialogDescription>{description}</DialogDescription>
+              </div>
+              <Price
+                onSale={sale != null}
+                className="items-end text-xl font-semibold"
+              >
+                {sale != null && (
+                  <span className="leading-tight text-foreground">
+                    {formatCurrency(sale, currency)}
+                  </span>
+                )}
+                <span
+                  className={
+                    sale != null
+                      ? "leading-tight text-muted-foreground line-through"
+                      : "leading-tight text-foreground"
+                  }
+                >
+                  {formatCurrency(regular, currency)}
+                </span>
+              </Price>
+              <ProductForm
+                hinges={hinges}
+                selected={{
+                  color: variant?.color,
+                  size: variant?.size,
+                }}
+              />
+              <Button variant="link" className="px-0" asChild>
+                <a href={link}>مشاهده جزئیات محصول</a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const ProductImages = ({ images }: ProductImagesProps) => {
+  if (!images) return;
+
+  return (
+    <Carousel className="h-full md:[&>div]:h-full">
+      <CarouselContent className="-ms-0 md:h-full">
+        {images.map((img, index) => (
+          <CarouselItem
+            className="w-full ps-0 md:h-[var(--dialog-height)] md:max-h-[var(--dialog-max-height)]"
+            key={index}
+          >
+            <div className="size-full overflow-hidden max-md:aspect-square">
+              <img
+                src={img.src}
+                alt={img.alt}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="start-1.5" />
+      <CarouselNext className="end-1.5" />
+    </Carousel>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+  size: z.string(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductFormProps) => {
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: selected?.color ?? "",
+      size: selected?.size ?? "",
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const colorHinges = hinges?.color;
+  const sizeHinges = hinges?.size;
+
+  const selectedColorValue = form.watch("color");
+  const selectedSizeValue = form.watch("size");
+
+  const currentColor = useMemo(
+    () =>
+      colorHinges?.options?.find((item) => item.value === selectedColorValue)
+        ?.label ?? "",
+    [selectedColorValue, colorHinges],
+  );
+
+  const currentSize = useMemo(
+    () =>
+      sizeHinges?.options?.find((item) => item.value === selectedSizeValue)
+        ?.label ?? "",
+    [selectedSizeValue, sizeHinges],
+  );
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <div className="space-y-5">
+        {colorHinges && (
+          <Controller
+            control={form.control}
+            name={colorHinges.name}
+            render={({ field }) => (
+              <FieldSet className="gap-2">
+                <FieldLegend className="text-sm leading-normal">
+                  <h2>
+                    {colorHinges.label}:{" "}
+                    <span className="text-sm font-normal text-muted-foreground">
+                      {currentColor}
+                    </span>
+                  </h2>
+                </FieldLegend>
+                <ColorRadioGroup field={field} options={colorHinges.options} />
+              </FieldSet>
+            )}
+          />
+        )}
+        {sizeHinges && (
+          <Controller
+            control={form.control}
+            name={sizeHinges.name}
+            render={({ field }) => (
+              <FieldSet className="gap-2">
+                <FieldLegend className="text-sm leading-normal">
+                  <h2>
+                    {sizeHinges.label}:{" "}
+                    <span className="text-sm font-normal text-muted-foreground">
+                      {currentSize}
+                    </span>
+                  </h2>
+                </FieldLegend>
+                <SizeRadioGroup field={field} options={sizeHinges.options} />
+              </FieldSet>
+            )}
+          />
+        )}
+        <div className="flex gap-3">
+          <Button size="lg">افزودن به سبد</Button>
+          <Button size="icon-lg" variant="outline">
+            <Heart />
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+const ColorRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={field.value}
+      onValueChange={field.onChange}
+      className="flex flex-wrap items-center gap-3"
+    >
+      {options.map((item, index) => (
+        <label
+          key={index}
+          htmlFor={item.id}
+          className="relative size-10 shrink-0 cursor-pointer overflow-hidden rounded-md border p-0.5 duration-400 has-checked:ring has-disabled:opacity-60"
+        >
+          <RadioGroupItem
+            id={item.id}
+            className="absolute size-px overflow-hidden opacity-0"
+            value={item.value}
+            aria-label={`انتخاب ${item.label}`}
+            disabled={item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+          />
+          <div
+            style={{
+              backgroundImage: `url(${item.thumbnail})`,
+            }}
+            className="size-full overflow-hidden rounded-sm bg-cover bg-center bg-no-repeat"
+          ></div>
+        </label>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const SizeRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={field.value}
+      onValueChange={field.onChange}
+      className="flex w-full flex-wrap justify-start gap-2"
+    >
+      {options &&
+        options.map((item) => (
+          <SizeOption
+            key={item.id}
+            stockStatusCode={item.stockStatusCode}
+            id={item.id}
+            label={item.label}
+            value={item.value}
+          />
+        ))}
+    </RadioGroup>
+  );
+};
+
+const SizeOption = ({ id, label, stockStatusCode, value }: SizeOptionProps) => {
+  return (
+    <label
+      htmlFor={id}
+      className="relative flex h-10 min-w-10 shrink-0 cursor-pointer items-center justify-center rounded-md border px-5 py-2.5 text-center text-sm leading-none uppercase not-has-disabled:hover:ring has-checked:bg-primary has-checked:text-primary-foreground has-disabled:cursor-not-allowed has-disabled:bg-muted has-disabled:text-muted-foreground has-disabled:line-through"
+    >
+      <RadioGroupItem
+        id={id}
+        className="absolute size-px overflow-hidden opacity-0"
+        value={value}
+        aria-label={`انتخاب ${label}`}
+        disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+      />
+      {label}
+    </label>
+  );
+};
+
+export { ProductQuickView4 };
diff --git a/blocks/product-quick-view5.tsx b/blocks/product-quick-view5.tsx
new file mode 100644
index 0000000..43dd6d4
--- /dev/null
+++ b/blocks/product-quick-view5.tsx
@@ -0,0 +1,827 @@
+"use client";
+
+import "photoswipe/style.css";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import clsx from "clsx";
+import type { LucideIcon } from "lucide-react";
+import { Tag, Truck } from "lucide-react";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useEffect, useId, useRef, useState } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import type { PriceType } from "@/components/shadcnblocks/price";
+import { Price } from "@/components/shadcnblocks/price";
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge, badgeVariants } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { FieldLegend, FieldSet } from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+
+const STOCK_STATUS = {
+  IN_STOCK: {
+    code: "IN_STOCK",
+    message: (qt?: number) =>
+      qt
+        ? `پیش‌سفارش امروز  ${qt.toLocaleString("fa-IR")} عدد باقی مانده`
+        : "موجود، آماده ارسال",
+    color: "oklch(64.8% 0.2 131.684)",
+  },
+  LOW_STOCK: {
+    code: "LOW_STOCK",
+    message: "دارد سریع فروش می‌رود!",
+    color: "oklch(76.9% 0.188 70.08)",
+  },
+  OUT_OF_STOCK: {
+    code: "OUT_OF_STOCK",
+    message: "ناموجود",
+    color: "oklch(58.6% 0.253 17.585)",
+  },
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type Image = {
+  src: string;
+  alt: string;
+  thumbnail: string;
+  width: number;
+  height: number;
+};
+
+type SocialIcon = {
+  title: string;
+  light: string;
+  dark: string;
+};
+
+type SocialLink = {
+  link: string;
+  icon: SocialIcon;
+};
+
+type StockStatus = {
+  code: StockStatusCode;
+  quantity?: number;
+};
+
+interface ProductImagesProps {
+  images: Image[];
+  galleryID?: string;
+  badges?: string[];
+}
+
+interface StockStatusProps {
+  status?: StockStatus;
+}
+
+type ServiceListType = {
+  icon: LucideIcon;
+  text: string;
+}[];
+
+interface ServicesListProps {
+  list?: ServiceListType;
+}
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+type Option = {
+  id: string;
+  value: string;
+  label: string;
+  thumbnail?: string;
+  color?: string;
+  stockStatusCode?: StockStatusCode;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  min?: number;
+  max?: number;
+  name: FieldName;
+  options?: Option[];
+}
+
+interface FormProps {
+  hinges: Record<FieldName, Hinges>;
+  selected?: FormType;
+}
+
+interface RadioGroupProps {
+  options?: Array<Option>;
+  field: ControllerRenderProps<FormType>;
+}
+
+type AccordionItemType = {
+  title: string;
+  value: string;
+  content: {
+    text?: string;
+    list?: string[];
+  };
+};
+
+interface AccordionSectionProps {
+  section?: AccordionItemType[];
+}
+
+interface SocialMediaLinksProps {
+  links?: SocialLink[];
+}
+
+interface Product {
+  images: Image[];
+  galleryID?: string;
+  badges?: string[];
+  name: string;
+  price: PriceType;
+  stockStatus?: StockStatus;
+  services?: ServiceListType;
+  hinges: Record<FieldName, Hinges>;
+  link: string;
+  accordion?: AccordionItemType[];
+  socialLinks?: SocialLink[];
+}
+
+type ProductQuickView5Props = Product;
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const PRODUCT_DETAILS: Product = {
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/modern-audio-device.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/modern-audio-device.png",
+      alt: "دستگاه صوتی مدرن",
+      width: 992,
+      height: 1200,
+    },
+
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/modern-audio-panel.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/modern-audio-panel.png",
+      alt: "پنل صوتی مدرن",
+      width: 1200,
+      height: 800,
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/elegant-turntable-scene.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/elegant-turntable-scene.png",
+      alt: "صحنه گرامافون شیک",
+      width: 840,
+      height: 1200,
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/sleek-metallic-component.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/sleek-metallic-component.png",
+      alt: "قطعه فلزی براق",
+      width: 640,
+      height: 640,
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/turntable-stylus-close-up.png",
+      thumbnail:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/turntable-stylus-close-up.png",
+      alt: "پنل کنترل مدرن",
+      width: 640,
+      height: 640,
+    },
+  ],
+  badges: ["جدید"],
+  name: "گرامافون دقیق پرو",
+  price: {
+    regular: 1299000.0,
+    currency: "ریال",
+  },
+  stockStatus: {
+    code: "IN_STOCK",
+    quantity: 28,
+  },
+  services: [
+    {
+      icon: Truck,
+      text: "ارسال ویژه سفید شامل می‌شود",
+    },
+    {
+      icon: Tag,
+      text: "ارتقای رایگان کارتریج",
+    },
+  ],
+  hinges: {
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "color-1",
+          value: "color-1",
+          label: "نقره‌ای",
+          color: "#C0C0C0",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "color-2",
+          value: "color-2",
+          label: "مشکی مات",
+          color: "#1a1a1a",
+          stockStatusCode: "IN_STOCK",
+        },
+      ],
+    },
+    quantity: {
+      label: "تعداد",
+      id: "quantity",
+      name: "quantity",
+      min: 1,
+      max: 10,
+    },
+  },
+  link: "#",
+  accordion: [
+    {
+      value: "description",
+      title: "توضیحات",
+      content: {
+        text: "وینیل را همان‌گونه بشنوید که باید شنیده شود. گرامافون پرو با موتور دایرکت‌درایو دقیق، بازوی صوتی قابل تنظیم و شاسی ضدلرزش، بازتولید صدایی پاکیزه ارائه می‌دهد. چه شنونده حرفه‌ای باشید و چه تازه به دنیای صفحه برگشته‌اید، این دستگاه صدایی گرم و جزئی‌نما تحویل می‌دهد.",
+      },
+    },
+    {
+      value: "features",
+      title: "ویژگی‌ها",
+      content: {
+        list: [
+          "موتور دایرکت‌درایو با قفل کوارتز برای سرعت پایدار",
+          "بازوی صوتی S شکل با وزنه متقابل قابل تنظیم",
+          "پری‌آمپ فونو داخلی با امکان بای‌پس",
+          "پایه‌های ضدلرزش و صفحه سنگین برای کاهش رزونانس",
+          "خروجی USB برای دیجیتال‌سازی مجموعه وینیل شما",
+        ],
+      },
+    },
+    {
+      value: "shipping",
+      title: "ارسال",
+      content: {
+        text: "ارسال ویژه سفید برای تمام سفارش‌های گرامافون رایگان است. دستگاه شما توسط تیم تحویل با دقت باز و نصب می‌شود. زمان تحویل تقریبی: ۷ تا ۱۰ روز کاری.",
+      },
+    },
+  ],
+  socialLinks: [
+    {
+      icon: {
+        title: "Facebook",
+        light:
+          "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+        dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
+      },
+      link: "#",
+    },
+    {
+      icon: {
+        title: "X",
+        light:
+          "/block-media/shadcnblocks/block/logos/x.svg",
+        dark: "/block-media/shadcnblocks/block/logos/x.svg",
+      },
+      link: "#",
+    },
+    {
+      icon: {
+        title: "Instagram",
+        light:
+          "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+        dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+      },
+      link: "#",
+    },
+  ],
+};
+
+const ProductQuickView5 = ({
+  images = PRODUCT_DETAILS.images,
+  badges = PRODUCT_DETAILS.badges,
+  name = PRODUCT_DETAILS.name,
+  price = PRODUCT_DETAILS.price,
+  stockStatus = PRODUCT_DETAILS.stockStatus,
+  services = PRODUCT_DETAILS.services,
+  hinges = PRODUCT_DETAILS.hinges,
+  link = PRODUCT_DETAILS.link,
+  accordion = PRODUCT_DETAILS.accordion,
+  socialLinks = PRODUCT_DETAILS.socialLinks,
+}: ProductQuickView5Props) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Dialog open>
+      <DialogContent
+        style={
+          {
+            "--dialog-height": "calc(100dvh - 2.5rem)",
+            "--dialog-max-height": "45rem",
+          } as React.CSSProperties
+        }
+        className="h-[var(--dialog-height)] w-dvw max-w-300! border-none p-0 max-md:top-auto max-md:bottom-0 max-md:start-0 max-md:h-[calc(100dvh-100px)] max-md:translate-0! max-md:overflow-auto md:max-h-[var(--dialog-max-height)] md:w-[calc(100dvw-4rem)]"
+      >
+        <div className="grid grid-cols-1 gap-5 max-md:p-10 max-sm:px-5 md:h-[var(--dialog-height)] md:max-h-[var(--dialog-max-height)] md:grid-cols-2">
+          <div className="overflow-hidden md:py-10 md:ps-10">
+            <ProductImages badges={badges} images={images} />
+          </div>
+          <div className="hide-scrollbar md:h-[var(--dialog-height)] md:max-h-[var(--dialog-max-height)] md:overflow-auto md:py-10 md:pe-10">
+            <div className="space-y-6">
+              <div className="space-y-1">
+                <DialogTitle className="text-3xl leading-tight font-light tracking-tight">
+                  {name}
+                </DialogTitle>
+                <Price
+                  onSale={sale != null}
+                  className="items-end text-xl leading-relaxed"
+                >
+                  {sale != null && (
+                    <span className="leading-tight text-foreground">
+                      {formatCurrency(sale, currency)}
+                    </span>
+                  )}
+                  <span
+                    className={
+                      sale != null
+                        ? "leading-tight text-muted-foreground line-through"
+                        : "leading-tight text-foreground"
+                    }
+                  >
+                    {formatCurrency(regular, currency)}
+                  </span>
+                </Price>
+              </div>
+              <div className="space-y-2 border-y py-4">
+                <StockStatus status={stockStatus} />
+                <ServicesList list={services} />
+              </div>
+              <div className="mt-7.5 space-y-3">
+                <Form hinges={hinges} />
+                <Button
+                  asChild
+                  variant="link"
+                  className="px-0 underline underline-offset-4"
+                >
+                  <a href={link}>مشاهده جزئیات</a>
+                </Button>
+                <AccordionSection section={accordion} />
+              </div>
+              <div className="mt-10">
+                <SocialMediaLinks links={socialLinks} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const ProductImages = ({ images, galleryID, badges }: ProductImagesProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+
+  const generatedGalleryID = useId();
+  const PhotoSwipeID = galleryID?.trim() ?? generatedGalleryID;
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + PhotoSwipeID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 end-5",
+          html: `
+            <button type="button" id="pswp-close" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+            </button>
+          `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 start-5",
+          html: `
+            <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+            </div>
+          `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+            let prevIndex = -1;
+
+            pswp.on("change", () => {
+              prevIndex = pswp.currIndex;
+              if (indicatorElem) {
+                indicatorElem.innerHTML = `${(prevIndex + 1).toLocaleString("fa-IR")} / ${pswp.getNumItems().toLocaleString("fa-IR")}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html: `
+          <div class="flex items-center justify-between px-4">
+            <button id="pswp-prev" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+            </button>
+            <button id="pswp-next" class="${buttonClassName}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+          </div>
+            
+          `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+          },
+        });
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [PhotoSwipeID]);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = (api: CarouselApi) =>
+      setCurrent(api?.selectedScrollSnap() ?? 0);
+    updateCurrent(api);
+    api.on("select", updateCurrent);
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  const handleThumbnailClick = (index: number) => {
+    api?.scrollTo(index);
+  };
+
+  if (!images) return;
+
+  return (
+    <div className="space-y-4" id={PhotoSwipeID}>
+      <div className="relative overflow-hidden">
+        <Carousel setApi={setApi} className="group">
+          <CarouselContent className="ms-0">
+            {images.map((img, index) => (
+              <CarouselItem className="ps-0" key={index}>
+                <AspectRatio ratio={1} className="overflow-hidden rounded-sm">
+                  <a
+                    href={img.src}
+                    data-pswp-width={img.width}
+                    data-pswp-height={img.height}
+                    target="_blank"
+                    rel="noreferrer"
+                    data-cropped="true"
+                  >
+                    <img
+                      src={img.src}
+                      alt={img.alt}
+                      className="block size-full object-cover object-center"
+                    />
+                  </a>
+                </AspectRatio>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <CarouselPrevious className="start-6 -translate-x-5 group-hover:translate-x-0" />
+            <CarouselNext className="end-6 translate-x-5 group-hover:translate-x-0" />
+          </div>
+        </Carousel>
+        {badges && (
+          <div className="absolute inset-x-4 top-4">
+            <div className="flex items-center gap-3">
+              {badges?.map((item, index) => (
+                <Badge key={index}>{item}</Badge>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+      <div
+        className={clsx(
+          "relative max-md:hidden",
+          "after:pointer-events-none after:absolute after:inset-y-0 after:-end-px after:z-10 after:block after:h-full after:w-7.5 after:bg-linear-to-s after:from-background after:to-transparent",
+          "before:pointer-events-none before:absolute before:inset-y-0 before:-start-px before:z-10 before:block before:h-full before:w-7.5 before:bg-linear-to-e before:from-background before:to-transparent",
+        )}
+      >
+        <div className="hide-scrollbar w-full overflow-auto px-7.5">
+          <div className="flex items-center gap-4 py-0.5">
+            {images.map(({ thumbnail, alt }, index) => (
+              <button
+                data-state={index === current ? "active" : "inactive"}
+                className="size-18 shrink-0 basis-18 overflow-hidden rounded-xs border-border data-[state=active]:ring-2"
+                key={index}
+                onClick={() => handleThumbnailClick(index)}
+              >
+                <img
+                  src={thumbnail}
+                  alt={alt}
+                  className="block size-full object-cover object-center"
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const StockStatus = ({ status }: StockStatusProps) => {
+  if (!status) return;
+
+  return (
+    <div className="flex items-center gap-2.5">
+      <div className="shrink-0 basis-3">
+        <div
+          style={{
+            backgroundColor: STOCK_STATUS[status.code].color,
+          }}
+          className="size-3 rounded-full"
+        ></div>
+      </div>
+      <p className="flex-1 leading-normal">
+        {status.code === STOCK_STATUS.IN_STOCK.code
+          ? STOCK_STATUS.IN_STOCK.message(status?.quantity)
+          : STOCK_STATUS[status.code].message}
+      </p>
+    </div>
+  );
+};
+
+const ServicesList = ({ list }: ServicesListProps) => {
+  if (!list) return;
+
+  return (
+    <ul className="space-y-2">
+      {list.map((item, index) => (
+        <li className="flex items-center gap-2.5" key={index}>
+          <item.icon className="size-4 shrink-0" />
+          <p className="flex-1 leading-normal">{item.text}</p>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+  quantity: z.number(),
+});
+
+const Form = ({ hinges, selected }: FormProps) => {
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: selected?.color ?? "",
+      quantity: selected?.quantity ?? 1,
+    },
+  });
+
+  const onSubmit = (data: FormType) => {
+    console.log(data);
+  };
+
+  const colorHinges = hinges?.color;
+  const quantityHinges = hinges?.quantity;
+
+  return (
+    <div>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="space-y-5">
+          {colorHinges && (
+            <Controller
+              control={form.control}
+              name={colorHinges.name}
+              render={({ field }) => (
+                <FieldSet className="gap-2">
+                  <FieldLegend className="text-sm leading-normal">
+                    {colorHinges.label}
+                  </FieldLegend>
+                  <ColorRadioGroup
+                    field={field}
+                    options={colorHinges.options}
+                  />
+                </FieldSet>
+              )}
+            />
+          )}
+          {quantityHinges && (
+            <Controller
+              control={form.control}
+              name={quantityHinges.name}
+              render={({ field }) => (
+                <FieldSet>
+                  <FieldLegend className="text-sm leading-normal">
+                    {quantityHinges.label}
+                  </FieldLegend>
+                  <QuantityInput
+                    onValueChange={field.onChange}
+                    inputProps={{ ...field }}
+                    className="max-w-30 rounded-sm"
+                  />
+                </FieldSet>
+              )}
+            />
+          )}
+        </div>
+        <div className="mt-8 space-y-2.5">
+          <Button size="lg" className="w-full uppercase">
+            افزودن به سبد
+          </Button>
+          <Button size="lg" variant="outline" className="w-full uppercase">
+            خرید فوری
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const ColorRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={field.value as string}
+      onValueChange={field.onChange}
+      className="flex flex-wrap items-center gap-2"
+    >
+      {options.map((item, index) => (
+        <label
+          key={index}
+          htmlFor={item.id}
+          className="relative size-7 shrink-0 cursor-pointer overflow-hidden rounded-full border p-0.5 duration-400 has-checked:ring has-disabled:opacity-60"
+        >
+          <RadioGroupItem
+            id={item.id}
+            className="absolute size-px overflow-hidden opacity-0"
+            value={item.value}
+            aria-label={`انتخاب ${item.label}`}
+            disabled={item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK.code}
+          />
+          <div
+            style={{
+              backgroundColor: item.color,
+            }}
+            className="size-full rounded-full"
+          ></div>
+        </label>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const AccordionSection = ({ section }: AccordionSectionProps) => {
+  if (!section) return;
+
+  return (
+    <Accordion type="multiple" className="w-full border-y border-border">
+      {section.map(({ value, title, content }, index) => (
+        <AccordionItem value={value} key={index}>
+          <AccordionTrigger className="font-normal uppercase hover:no-underline">
+            {title}
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="space-y-4">
+              {content.text && (
+                <p className="leading-relaxed">{content.text}</p>
+              )}
+              {content.list && (
+                <ul className="space-y-1">
+                  {content.list.map((text, index) => (
+                    <li className="leading-relaxed" key={`list-${index}`}>
+                      {text}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+const SocialMediaLinks = ({ links }: SocialMediaLinksProps) => {
+  if (!links) return;
+
+  return (
+    <div className="space-y-3">
+      <p className="uppercase">اشتراک‌گذاری</p>
+      <ul className="flex flex-wrap gap-1">
+        {links.map(({ icon, link }) => (
+          <li key={crypto.randomUUID()}>
+            <Button size="icon-lg" asChild variant="ghost">
+              <a href={link}>
+                <img
+                  className="size-5 dark:invert"
+                  alt={icon.title}
+                  src={icon.light}
+                />
+              </a>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export { ProductQuickView5 };
diff --git a/blocks/product-quick-view6.tsx b/blocks/product-quick-view6.tsx
new file mode 100644
index 0000000..2acae51
--- /dev/null
+++ b/blocks/product-quick-view6.tsx
@@ -0,0 +1,408 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { GitCompareArrows, Heart, Minus, Plus, X } from "lucide-react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { Price } from "@/components/shadcnblocks/price";
+import { Rating } from "@/components/shadcnblocks/rating";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type Image = {
+  src: string;
+  alt: string;
+};
+
+interface Reviews {
+  rate: number;
+  totalReviewers: string;
+  link: string;
+}
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type Product = {
+  images: Image[];
+  name: string;
+  reviews: Reviews;
+  price: ProductPrice;
+  stockStatusCode: StockStatusCode;
+  description: string;
+  hinges: Record<FieldName, Hinges>;
+  categories: {
+    text: string;
+    link: string;
+  }[];
+};
+
+type ProductQuickView6Props = Product;
+
+interface ProductImagesProps {
+  images: Image[];
+}
+
+type ProductFormType = z.infer<typeof productForm>;
+type FieldName = keyof ProductFormType;
+
+interface QuantityProps {
+  field: ControllerRenderProps<ProductFormType>;
+  max?: number;
+  min?: number;
+}
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const PRODUCT_DETAILS: Product = {
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-3.jpg",
+      alt: "صندلی ناهارخوری از نمای جلو",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193654-3.jpg",
+      alt: "صندلی ناهارخوری از نمای جانبی",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193627-3.jpg",
+      alt: "جزئیات بافت صندلی ناهارخوری",
+    },
+
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193650-3.jpg",
+      alt: "صندلی در فضای ناهارخوری",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193649-3.jpg",
+      alt: "صندلی ناهارخوری در دکور داخلی",
+    },
+  ],
+  name: "صندلی ناهارخوری آلو",
+  reviews: {
+    rate: 4.5,
+    totalReviewers: "۵٫۸ هزار نظر",
+    link: "#",
+  },
+  price: {
+    regular: 499000.0,
+    sale: 389000.0,
+    currency: "ریال",
+  },
+  stockStatusCode: "IN_STOCK",
+  description:
+    "طراحی مدرن و راحت برای میز ناهارخوری؛ ترکیبی از استحکام، زیبایی و راحتی در استفاده روزمره.",
+  hinges: {
+    quantity: {
+      id: "quantity",
+      name: "quantity",
+      label: "تعداد",
+      min: 1,
+      max: 99,
+    },
+  },
+  categories: [
+    {
+      text: "مبلمان",
+      link: "#",
+    },
+    {
+      text: "صندلی",
+      link: "#",
+    },
+  ],
+};
+
+const ProductQuickView6 = ({
+  images = PRODUCT_DETAILS.images,
+  name = PRODUCT_DETAILS.name,
+  price = PRODUCT_DETAILS.price,
+  reviews = PRODUCT_DETAILS.reviews,
+  stockStatusCode = PRODUCT_DETAILS.stockStatusCode,
+  description = PRODUCT_DETAILS.description,
+  hinges = PRODUCT_DETAILS.hinges,
+  categories = PRODUCT_DETAILS.categories,
+}: ProductQuickView6Props) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Sheet defaultOpen>
+      <SheetContent className="w-full max-md:!max-w-[calc(100dvw-3rem)] sm:!max-w-200 md:!max-w-200 lg:!max-w-240 [&>button]:hidden">
+        <div className="absolute end-2 top-2 z-10">
+          <SheetClose asChild>
+            <Button size="icon-lg" className="rounded-full" variant="secondary">
+              <X />
+            </Button>
+          </SheetClose>
+        </div>
+        <div className="h-full p-4 max-md:overflow-auto md:p-6">
+          <div className="flex h-full gap-6 max-md:flex-col lg:gap-10">
+            <div className="h-full basis-5/12">
+              <ProductImages images={images} />
+            </div>
+            <div className="h-full basis-7/12 pb-10">
+              <div className="hide-scrollbar h-full overflow-auto md:mt-2">
+                <SheetTitle className="text-xl leading-tight md:text-xl lg:text-xl">
+                  {name}
+                </SheetTitle>
+                <div className="mt-2.5 flex flex-wrap items-center">
+                  <Rating
+                    className="me-1 gap-0.5 [&_svg]:size-3.5 [&>div]:size-3.5"
+                    rate={reviews.rate}
+                  />
+                  <a
+                    href={reviews.link}
+                    className="text-sm text-muted-foreground"
+                  >
+                    ({reviews.totalReviewers})
+                  </a>
+                </div>
+                <Price
+                  onSale={sale != null}
+                  className="mt-5 text-lg font-medium lg:text-xl"
+                >
+                  <span
+                    className={
+                      sale != null
+                        ? "leading-tight text-muted-foreground line-through"
+                        : "leading-tight text-foreground"
+                    }
+                  >
+                    {formatCurrency(regular, currency)}
+                  </span>
+                  {sale != null && (
+                    <span className="leading-tight text-foreground">
+                      {formatCurrency(sale, currency)}
+                    </span>
+                  )}
+                </Price>
+                <Badge className="my-3 uppercase">
+                  {stockStatusCode === STOCK_STATUS.IN_STOCK
+                    ? "موجود"
+                    : "ناموجود"}
+                </Badge>
+                <SheetDescription className="text-base leading-relaxed">
+                  {description}
+                </SheetDescription>
+                <Separator className="my-4" />
+                <div className="flex flex-col gap-5">
+                  <ProductForm
+                    selected={{
+                      quantity: 1,
+                    }}
+                    hinges={hinges}
+                  />
+                  <div>
+                    <Separator className="my-4" />
+                    <p className="text-sm">
+                      دسته‌ها:{" "}
+                      {categories.map((item) => (
+                        <a
+                          href={item.link}
+                          key={crypto.randomUUID()}
+                          className="mx-0.5 underline-offset-3 hover:underline"
+                        >
+                          {item.text}
+                        </a>
+                      ))}
+                    </p>
+                    <Separator className="my-4" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const ProductImages = ({ images }: ProductImagesProps) => {
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+
+  if (!images) return;
+
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      orientation={isDesktop ? "vertical" : "horizontal"}
+      className="md:h-[calc(100dvh-3rem)] md:[&>div]:h-full"
+    >
+      <CarouselContent className="max-md:-ms-3 md:-mt-6 md:h-full">
+        {images.map((img) => (
+          <CarouselItem
+            className="basis-50 max-md:ps-3 md:basis-100 md:pt-6"
+            key={crypto.randomUUID()}
+          >
+            <AspectRatio ratio={0.75} className="overflow-hidden rounded-xl">
+              <img
+                src={img.src}
+                alt={img.alt}
+                className="block size-full object-cover object-center"
+              />
+            </AspectRatio>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+    </Carousel>
+  );
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  name: FieldName;
+  min?: number;
+  max?: number;
+}
+
+interface ProductFormProps {
+  hinges: Record<FieldName, Hinges>;
+  selected?: ProductFormType;
+}
+
+const productForm = z.object({
+  quantity: z.number(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductFormProps) => {
+  const form = useForm({
+    resolver: zodResolver(productForm),
+    defaultValues: {
+      quantity: selected?.quantity ?? 1,
+    },
+  });
+
+  function onSubmit(values: ProductFormType) {
+    console.log(values);
+  }
+
+  const quantityHinges = hinges?.quantity;
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <div className="flex flex-col gap-5">
+        <Controller
+          control={form.control}
+          name={quantityHinges.name}
+          render={({ field }) => (
+            <Field className="gap-3">
+              <FieldLabel>{quantityHinges.label}</FieldLabel>
+              <Quantity
+                field={field}
+                min={quantityHinges?.min}
+                max={quantityHinges?.max}
+              />
+            </Field>
+          )}
+        />
+        <div className="space-y-3">
+          <div className="flex gap-3">
+            <Button className="flex-1 rounded-full">افزودن به سبد</Button>
+            <Button size="icon" variant="outline" className="rounded-full">
+              <Heart />
+            </Button>
+            <Button size="icon" variant="outline" className="rounded-full">
+              <GitCompareArrows />
+            </Button>
+          </div>
+          <Button variant="secondary" className="w-full rounded-full">
+            خرید فوری
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+const Quantity = ({ field, max, min }: QuantityProps) => {
+  return (
+    <div
+      className="flex h-9 w-full max-w-40 min-w-28 items-center overflow-hidden rounded-full border shadow-xs"
+      aria-label="تعداد"
+    >
+      <Button
+        onClick={() =>
+          field.onChange(Math.max(min || 1, Number(field.value || 1) - 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Minus />
+      </Button>
+      <Input
+        {...field}
+        value={field.value ?? ""}
+        onChange={(e) => {
+          const raw = e.target.value;
+          const parsed = parseInt(raw, 10);
+
+          // Accept empty string for typing, but validate if not a number
+          if (raw === "") {
+            field.onChange("");
+          } else if (!isNaN(parsed)) {
+            field.onChange(parsed);
+          }
+        }}
+        type="number"
+        min={min ? min : 1}
+        max={max ? max : 99}
+        className="w-full min-w-10 flex-1 [appearance:textfield] rounded-none border-0 !bg-background px-1 text-center shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <Button
+        onClick={() =>
+          field.onChange(Math.min(max || 99, Number(field.value || 1) + 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Plus />
+      </Button>
+    </div>
+  );
+};
+
+export { ProductQuickView6 };
diff --git a/blocks/product-quick-view7.tsx b/blocks/product-quick-view7.tsx
new file mode 100644
index 0000000..b29da57
--- /dev/null
+++ b/blocks/product-quick-view7.tsx
@@ -0,0 +1,592 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import clsx from "clsx";
+import { ArrowRight, Minus, Plus, ShoppingBag, X } from "lucide-react";
+import { useMemo } from "react";
+import type { ControllerRenderProps } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+import { Price } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+
+const STOCK_STATUS = {
+  IN_STOCK: "IN_STOCK",
+  OUT_OF_STOCK: "OUT_OF_STOCK",
+} as const;
+
+type StockStatusCode = keyof typeof STOCK_STATUS;
+
+type Image = {
+  src: string;
+  alt: string;
+};
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type Option = {
+  id: string;
+  value: string;
+  label: string;
+  thumbnail?: string;
+  stockStatusCode?: StockStatusCode;
+};
+
+interface Hinges {
+  label: string;
+  id: string;
+  min?: number;
+  max?: number;
+  name: FieldName;
+  options?: Option[];
+}
+
+type Product = {
+  images: Image[];
+  name: string;
+  link: string;
+  price: ProductPrice;
+  badges: string[];
+  hinges: Record<FieldName, Hinges>;
+  variant: {
+    color: string;
+    size: string;
+  };
+};
+
+type FormType = z.infer<typeof formSchema>;
+type FieldName = keyof FormType;
+
+interface ProductImagesProps {
+  images: Image[];
+}
+
+interface ProductFormProps {
+  hinges: Record<FieldName, Hinges>;
+  selected: FormType;
+}
+
+interface RadioGroupProps {
+  options?: Array<Option>;
+  field: ControllerRenderProps<FormType>;
+}
+
+type SizeOptionProps = Option;
+
+interface QuantityProps {
+  field: ControllerRenderProps<FormType>;
+  max?: number;
+  min?: number;
+}
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const PRODUCT_DETAILS: Product = {
+  name: "کلاه فدورا قهوه‌ای روشن شیک",
+  link: "#",
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Hat-and-Sunglasses-2.png",
+      alt: "کلاه فدورا قهوه‌ای با عینک آفتابی",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Portrait-hat-2.png",
+      alt: "پرتره با کلاه فدورا شیک",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Modern-Look-2.png",
+      alt: "استایل مدرن با کلاه فدورا",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/accessories/Fashionable-Pose-2.png",
+      alt: "پوز مد با کلاه فدورا",
+    },
+  ],
+  price: {
+    regular: 499000.0,
+    sale: 389000.0,
+    currency: "ریال",
+  },
+  badges: ["حراج", "جدید"],
+  variant: {
+    color: "light-brown",
+    size: "size-1",
+  },
+  hinges: {
+    color: {
+      label: "رنگ",
+      id: "color",
+      name: "color",
+      options: [
+        {
+          id: "light-brown",
+          value: "light-brown",
+          label: "قهوه‌ای روشن",
+          thumbnail:
+            "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Beige-Fedora-1.png",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "dark-brown",
+          value: "dark-brown",
+          label: "قهوه‌ای تیره",
+          thumbnail:
+            "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-1.png",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "black",
+          value: "black",
+          label: "مشکی",
+          thumbnail:
+            "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Black-Fedora-Hat-1.png",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+      ],
+    },
+    size: {
+      label: "سایز کلاه",
+      id: "size",
+      name: "size",
+      options: [
+        {
+          id: "size-1",
+          value: "size-1",
+          label: "6⅝",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "size-2",
+          value: "size-2",
+          label: "6¾",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "size-3",
+          value: "size-3",
+          label: "6⅞",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "size-4",
+          value: "size-4",
+          label: "7",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "size-5",
+          value: "size-5",
+          label: "7⅛",
+          stockStatusCode: "IN_STOCK",
+        },
+        {
+          id: "size-6",
+          value: "size-6",
+          label: "7¼",
+          stockStatusCode: "OUT_OF_STOCK",
+        },
+        {
+          id: "size-7",
+          value: "size-7",
+          label: "7⅜",
+          stockStatusCode: "IN_STOCK",
+        },
+      ],
+    },
+    quantity: {
+      label: "تعداد",
+      id: "quantity",
+      name: "quantity",
+      min: 1,
+      max: 90,
+    },
+  },
+};
+
+const ProductQuickView7 = ({
+  images = PRODUCT_DETAILS.images,
+  name = PRODUCT_DETAILS.name,
+  link = PRODUCT_DETAILS.link,
+  price = PRODUCT_DETAILS.price,
+  badges = PRODUCT_DETAILS.badges,
+  hinges = PRODUCT_DETAILS.hinges,
+  variant = PRODUCT_DETAILS.variant,
+}) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Dialog defaultOpen>
+      <DialogContent
+        showCloseButton={false}
+        className="h-[calc(100dvh-5rem)] max-h-195 max-w-[calc(100dvw-2rem)] rounded-xl p-0 sm:max-w-137.5"
+      >
+        <div className="absolute top-5 end-5 z-10">
+          <DialogClose asChild>
+            <Button size="icon-lg" className="rounded-full" variant="secondary">
+              <X />
+            </Button>
+          </DialogClose>
+        </div>
+        <div className="hide-scrollbar overflow-auto p-4">
+          <div className="space-y-3">
+            <div className="space-y-9">
+              <ProductImages images={images} />
+              <div className="space-y-2.5">
+                <DialogTitle className="text-xl font-medium">
+                  <a href={link}>{name}</a>
+                </DialogTitle>
+                <div className="flex flex-wrap items-center gap-2.5">
+                  <Price
+                    onSale={sale != null}
+                    className="items-end gap-x-1 text-xl font-medium"
+                  >
+                    {sale != null && (
+                      <span className="leading-tight text-foreground">
+                        {formatCurrency(sale, currency)}
+                      </span>
+                    )}
+                    <span
+                      className={clsx(
+                        "leading-tight",
+                        sale != null
+                          ? "text-base text-muted-foreground line-through"
+                          : "text-xl text-foreground",
+                      )}
+                    >
+                      {formatCurrency(regular, currency)}
+                    </span>
+                  </Price>
+                  {badges?.map((text) => (
+                    <Badge key={crypto.randomUUID()}>{text}</Badge>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <ProductForm
+              hinges={hinges}
+              selected={{
+                quantity: 1,
+                color: variant.color,
+                size: variant.size,
+              }}
+            />
+            <Button variant="ghost" asChild>
+              <a href={link}>
+                مشاهده جزئیات کامل
+                <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
+              </a>
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const ProductImages = ({ images }: ProductImagesProps) => {
+  if (!images) return;
+
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+        slidesToScroll: 2,
+      }}
+    >
+      <CarouselContent className="-ms-5">
+        {images.map((img) => (
+          <CarouselItem className="basis-1/2 ps-5" key={crypto.randomUUID()}>
+            <AspectRatio ratio={0.83} className="overflow-hidden rounded-xl">
+              <img
+                src={img.src}
+                alt={img.alt}
+                className="block size-full object-cover object-center"
+              />
+            </AspectRatio>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="start-1.5" />
+      <CarouselNext className="end-1.5" />
+    </Carousel>
+  );
+};
+
+const formSchema = z.object({
+  color: z.string(),
+  size: z.string(),
+  quantity: z.number(),
+});
+
+const ProductForm = ({ hinges, selected }: ProductFormProps) => {
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      color: selected.color,
+      size: selected.size,
+      quantity: selected.quantity,
+    },
+  });
+
+  function onSubmit(values: FormType) {
+    console.log(values);
+  }
+
+  const colorHinges = hinges?.color;
+  const sizeHinges = hinges?.size;
+  const quantityHinges = hinges?.quantity;
+
+  const selectedColorValue = form.watch("color");
+  const selectedSizeValue = form.watch("size");
+
+  const currentColor = useMemo(
+    () =>
+      colorHinges?.options?.find((item) => item.value === selectedColorValue)
+        ?.label ?? "",
+    [selectedColorValue, colorHinges],
+  );
+
+  const currentSize = useMemo(
+    () =>
+      sizeHinges?.options?.find((item) => item.value === selectedSizeValue)
+        ?.label ?? "",
+    [selectedSizeValue, sizeHinges],
+  );
+
+  return (
+    <div className="space-y-3">
+      <Separator />
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="space-y-4">
+          {colorHinges && (
+            <Controller
+              control={form.control}
+              name={colorHinges.name}
+              render={({ field }) => (
+                <fieldset className="flex flex-col gap-2">
+                  <legend className="mb-2 text-sm leading-normal font-medium">
+                    {colorHinges.label}:{" "}
+                    <span className="font-normal text-muted-foreground">
+                      {currentColor}
+                    </span>
+                  </legend>
+                  <ColorRadioGroup
+                    field={field}
+                    options={colorHinges.options}
+                  />
+                </fieldset>
+              )}
+            />
+          )}
+          {sizeHinges && (
+            <Controller
+              control={form.control}
+              name={sizeHinges.name}
+              render={({ field }) => (
+                <fieldset className="flex flex-col gap-2">
+                  <legend className="mb-2 text-sm leading-normal font-medium">
+                    {sizeHinges.label}:{" "}
+                    <span className="font-normal text-muted-foreground">
+                      {currentSize}
+                    </span>
+                  </legend>
+                  <SizeRadioGroup field={field} options={sizeHinges.options} />
+                </fieldset>
+              )}
+            />
+          )}
+        </div>
+        <Separator className="my-4" />
+        <div className="space-y-2.5">
+          <div className="flex flex-col gap-2 md:flex-row">
+            <Controller
+              control={form.control}
+              name={quantityHinges.name}
+              render={({ field }) => (
+                <Quantity
+                  field={field}
+                  min={quantityHinges?.min}
+                  max={quantityHinges?.max}
+                />
+              )}
+            />
+            <Button className="w-full rounded-full md:flex-1">
+              افزودن به سبد
+              <ShoppingBag />
+            </Button>
+          </div>
+          <Button className="w-full rounded-full" variant="outline">
+            خرید فوری
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const ColorRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex flex-wrap items-center gap-3"
+    >
+      {options.map((item) => (
+        <label
+          key={item.id}
+          htmlFor={item.id}
+          className="relative flex size-10 cursor-pointer overflow-hidden rounded-md border p-0.5 duration-400 has-checked:ring has-disabled:opacity-60"
+        >
+          <RadioGroupItem
+            id={item.id}
+            className="absolute size-px overflow-hidden opacity-0"
+            value={item.value}
+            aria-label={`انتخاب ${item.label}`}
+            disabled={item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+          />
+          <div
+            style={{
+              backgroundImage: `url(${item.thumbnail})`,
+            }}
+            className="size-full overflow-hidden rounded-sm bg-cover bg-center bg-no-repeat"
+          ></div>
+        </label>
+      ))}
+    </RadioGroup>
+  );
+};
+
+const SizeRadioGroup = ({ options, field }: RadioGroupProps) => {
+  if (!options) return;
+
+  return (
+    <RadioGroup
+      {...field}
+      value={`${field.value}`}
+      onValueChange={(value) => {
+        if (value != field.value && value) {
+          field.onChange(value);
+        }
+      }}
+      className="flex w-full flex-wrap justify-start gap-2"
+    >
+      {options &&
+        options.map((item) => (
+          <SizeOption
+            key={item.id}
+            stockStatusCode={item.stockStatusCode}
+            id={item.id}
+            label={item.label}
+            value={item.value}
+          />
+        ))}
+    </RadioGroup>
+  );
+};
+
+const SizeOption = ({ id, label, stockStatusCode, value }: SizeOptionProps) => {
+  return (
+    <label
+      htmlFor={id}
+      className="relative flex h-10 min-w-10 shrink-0 cursor-pointer items-center justify-center rounded-md border px-5 py-2.5 text-center text-sm leading-none uppercase not-has-disabled:hover:ring has-checked:bg-primary has-checked:text-primary-foreground has-disabled:cursor-not-allowed has-disabled:bg-muted has-disabled:text-muted-foreground has-disabled:line-through"
+    >
+      <RadioGroupItem
+        id={id}
+        className="absolute size-px overflow-hidden opacity-0"
+        value={value}
+        aria-label={`انتخاب ${label}`}
+        disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
+      />
+      {label}
+    </label>
+  );
+};
+
+const Quantity = ({ field, max, min }: QuantityProps) => {
+  return (
+    <div
+      className="flex h-9 w-full max-w-40 min-w-28 items-center overflow-hidden rounded-full border shadow-xs"
+      aria-label="تعداد"
+    >
+      <Button
+        onClick={() =>
+          field.onChange(Math.max(min || 1, Number(field.value || 1) - 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Minus />
+      </Button>
+      <Input
+        {...field}
+        value={field.value ?? ""}
+        onChange={(e) => {
+          const raw = e.target.value;
+          const parsed = parseInt(raw, 10);
+
+          // Accept empty string for typing, but validate if not a number
+          if (raw === "") {
+            field.onChange("");
+          } else if (!isNaN(parsed)) {
+            field.onChange(parsed);
+          }
+        }}
+        type="number"
+        min={min ? min : 1}
+        max={max ? max : 99}
+        className="w-full min-w-10 flex-1 [appearance:textfield] rounded-none border-0 !bg-background px-1 text-center shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <Button
+        onClick={() =>
+          field.onChange(Math.min(max || 99, Number(field.value || 1) + 1))
+        }
+        variant="ghost"
+        type="button"
+        size="icon"
+        className="shrink-0 rounded-none"
+      >
+        <Plus />
+      </Button>
+    </div>
+  );
+};
+
+export { ProductQuickView7 };
diff --git a/blocks/product-quick-view8.tsx b/blocks/product-quick-view8.tsx
new file mode 100644
index 0000000..5155b85
--- /dev/null
+++ b/blocks/product-quick-view8.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { X } from "lucide-react";
+
+import { Price } from "@/components/shadcnblocks/price";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+type Image = {
+  alt: string;
+  src: string;
+};
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type Product = {
+  images: Image[];
+  price: ProductPrice;
+  name: string;
+  description: string;
+};
+
+type ProductQuickView8Props = Product;
+
+interface ProductImagesProps {
+  images: Image[];
+}
+
+const formatCurrency = (
+  value: number,
+  currency: string = "ریال",
+  locale: string = "fa-IR",
+) => {
+  return `${value.toLocaleString(locale)} ${currency}`;
+};
+
+const PRODUCT_DETAILS: Product = {
+  images: [
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/modern-audio-device.png",
+      alt: "دستگاه صوتی مدرن",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/modern-audio-panel.png",
+      alt: "پنل صوتی مدرن",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/ecommerce/electronics/turntable/elegant-turntable-scene.png",
+      alt: "صحنه گرامافون شیک",
+    },
+  ],
+  price: {
+    regular: 1299000.0,
+    currency: "ریال",
+  },
+  name: "گرامافون دقیق پرو",
+  description:
+    "وینیل را همان‌گونه بشنوید که باید شنیده شود. موتور دایرکت‌درایو دقیق، بازوی صوتی قابل تنظیم و شاسی ضدلرزش برای بازتولید صدایی پاکیزه.",
+};
+
+const ProductQuickView8 = ({
+  images = PRODUCT_DETAILS.images,
+  price = PRODUCT_DETAILS.price,
+  name = PRODUCT_DETAILS.name,
+  description = PRODUCT_DETAILS.description,
+}: ProductQuickView8Props) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Dialog defaultOpen>
+      <DialogContent showCloseButton={false} className="p-4 sm:max-w-168">
+        <div className="absolute top-5 end-5 z-50">
+          <DialogClose asChild>
+            <Button className="rounded-full" size="icon-sm" variant="secondary">
+              <X />
+            </Button>
+          </DialogClose>
+        </div>
+        <div className="hide-scrollbar max-h-[calc(100dvh-8rem)] overflow-auto">
+          <ProductImages images={images} />
+          <div className="pt-4 pb-20">
+            <div className="space-y-6">
+              <div className="space-y-1">
+                <Price
+                  onSale={sale != null}
+                  className="items-end gap-x-1 text-base font-medium"
+                >
+                  {sale != null && (
+                    <span className="leading-tight text-foreground">
+                      {formatCurrency(sale, currency)}
+                    </span>
+                  )}
+                  <span
+                    className={
+                      sale != null
+                        ? "leading-tight text-muted-foreground line-through"
+                        : "leading-tight text-foreground"
+                    }
+                  >
+                    {formatCurrency(regular, currency)}
+                  </span>
+                </Price>
+                <DialogTitle className="text-xl font-medium">
+                  {name}
+                </DialogTitle>
+              </div>
+              <DialogDescription className="text-base leading-relaxed">
+                {description}
+              </DialogDescription>
+            </div>
+            <DialogFooter className="fixed inset-x-0 bottom-0">
+              <div className="w-full rounded-b-lg bg-background p-4">
+                <Button className="w-full">افزودن به سبد</Button>
+              </div>
+            </DialogFooter>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const ProductImages = ({ images }: ProductImagesProps) => {
+  return (
+    <Carousel>
+      <CarouselContent>
+        {images.map((img) => (
+          <CarouselItem key={crypto.randomUUID()}>
+            <AspectRatio ratio={1.4} className="overflow-hidden rounded-sm">
+              <img
+                src={img.src}
+                alt={img.alt}
+                className="block size-full object-cover object-center"
+              />
+            </AspectRatio>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="start-1" />
+      <CarouselNext className="end-1" />
+    </Carousel>
+  );
+};
+
+export { ProductQuickView8 };
diff --git a/blocks/product-specs1.tsx b/blocks/product-specs1.tsx
new file mode 100644
index 0000000..d0a68fa
--- /dev/null
+++ b/blocks/product-specs1.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import {
+  Battery,
+  Box,
+  ChevronDown,
+  Cpu,
+  HardDrive,
+  Monitor,
+  Wifi,
+} from "lucide-react";
+import { useState } from "react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface Spec {
+  label: string;
+  value: string;
+}
+
+interface SpecCategory {
+  id: string;
+  name: string;
+  icon: React.ReactNode;
+  specs: Spec[];
+}
+
+const DEFAULT_CATEGORIES: SpecCategory[] = [
+  {
+    id: "display",
+    name: "نمایشگر",
+    icon: <Monitor className="size-4" />,
+    specs: [
+      { label: "اندازه صفحه", value: '۶٫۷ اینچ Super Retina XDR' },
+      { label: "وضوح تصویر", value: "۲۷۹۶ × ۱۲۹۰ پیکسل" },
+      { label: "تراکم پیکسل", value: "۴۶۰ ppi" },
+      { label: "نرخ نوساز", value: "۱ تا ۱۲۰ هرتز ProMotion" },
+      { label: "نوع صفحه", value: "OLED، HDR" },
+      { label: "روشنایی حداکثر", value: "۲۰۰۰ نیت (فضای باز)" },
+    ],
+  },
+  {
+    id: "performance",
+    name: "عملکرد",
+    icon: <Cpu className="size-4" />,
+    specs: [
+      { label: "پردازنده", value: "تراشه A17 حرفه‌ای" },
+      { label: "هسته‌های CPU", value: "۶ هسته (۲ عملکردی + ۴ کارآمد)" },
+      { label: "پردازنده گرافیکی", value: "GPU شش‌هسته‌ای" },
+      { label: "موتور عصبی", value: "۱۶ هسته" },
+      { label: "حافظه RAM", value: "۸ گیگابایت" },
+    ],
+  },
+  {
+    id: "storage",
+    name: "حافظه",
+    icon: <HardDrive className="size-4" />,
+    specs: [
+      { label: "حافظه داخلی", value: "۲۵۶ / ۵۱۲ گیگابایت / ۱ ترابایت" },
+      { label: "قابل گسترش", value: "خیر" },
+      { label: "فضای ابری", value: "iCloud (۵ گیگابایت رایگان)" },
+    ],
+  },
+  {
+    id: "battery",
+    name: "باتری و شارژ",
+    icon: <Battery className="size-4" />,
+    specs: [
+      { label: "ظرفیت باتری", value: "۴۴۲۲ میلی‌آمپرساعت" },
+      { label: "پخش ویدیو", value: "تا ۲۹ ساعت" },
+      { label: "پخش آنلاین", value: "تا ۲۵ ساعت" },
+      { label: "شارژ سیمی", value: "شارژ سریع ۲۷ وات" },
+      { label: "شارژ بی‌سیم", value: "MagSafe ۱۵ وات، Qi ۷٫۵ وات" },
+      { label: "شارژ معکوس", value: "خیر" },
+    ],
+  },
+  {
+    id: "connectivity",
+    name: "ارتباطات",
+    icon: <Wifi className="size-4" />,
+    specs: [
+      { label: "۵G", value: "بله (sub-6 GHz، mmWave)" },
+      { label: "Wi-Fi", value: "Wi-Fi 6E (802.11ax)" },
+      { label: "بلوتوث", value: "۵٫۳" },
+      { label: "NFC", value: "بله" },
+      { label: "USB", value: "USB-C 3.0 (۱۰ گیگابیت بر ثانیه)" },
+      { label: "ماهواره", value: "SOS اضطراری" },
+    ],
+  },
+  {
+    id: "physical",
+    name: "مشخصات فیزیکی",
+    icon: <Box className="size-4" />,
+    specs: [
+      { label: "ارتفاع", value: "۱۵۹٫۹ میلی‌متر" },
+      { label: "عرض", value: "۷۶٫۷ میلی‌متر" },
+      { label: "ضخامت", value: "۸٫۲۵ میلی‌متر" },
+      { label: "وزن", value: "۲۲۱ گرم" },
+      { label: "بدنه", value: "قاب تیتانیومی، محافظ سرامیکی" },
+      { label: "مقاومت در برابر آب", value: "IP68 (۶ متر به مدت ۳۰ دقیقه)" },
+    ],
+  },
+];
+
+interface ProductSpecs1Props {
+  categories?: SpecCategory[];
+  title?: string;
+  className?: string;
+}
+
+const ProductSpecs1 = ({
+  categories = DEFAULT_CATEGORIES,
+  title = "مشخصات فنی",
+  className,
+}: ProductSpecs1Props) => {
+  const [openCategories, setOpenCategories] = useState<string[]>(
+    categories.map((c) => c.id),
+  );
+
+  const toggleCategory = (id: string) => {
+    setOpenCategories((prev) =>
+      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id],
+    );
+  };
+
+  const expandAll = () => setOpenCategories(categories.map((c) => c.id));
+  const collapseAll = () => setOpenCategories([]);
+
+  return (
+    <section className={cn("py-16 md:py-24", className)}>
+      <div className="container max-w-4xl">
+        {/* Header */}
+        <div className="mb-8 flex items-center justify-between">
+          <h2 className="text-xl font-semibold tracking-tight md:text-3xl">
+            {title}
+          </h2>
+          <div className="flex gap-2 text-sm">
+            <button
+              onClick={expandAll}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              باز کردن همه
+            </button>
+            <span className="text-muted-foreground">·</span>
+            <button
+              onClick={collapseAll}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              بستن همه
+            </button>
+          </div>
+        </div>
+
+        {/* Spec Categories */}
+        <div className="space-y-4">
+          {categories.map((category) => (
+            <Collapsible
+              key={category.id}
+              open={openCategories.includes(category.id)}
+              onOpenChange={() => toggleCategory(category.id)}
+            >
+              <div className="rounded-lg border">
+                <CollapsibleTrigger className="flex w-full items-center justify-between p-4 text-start hover:bg-muted/50">
+                  <div className="flex items-center gap-3">
+                    <div className="flex size-8 items-center justify-center rounded-md bg-muted">
+                      {category.icon}
+                    </div>
+                    <span className="font-medium">{category.name}</span>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "size-5 text-muted-foreground transition-transform",
+                      openCategories.includes(category.id) && "rotate-180",
+                    )}
+                  />
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="border-t">
+                    <Table>
+                      <TableBody>
+                        {category.specs.map((spec, index) => (
+                          <TableRow
+                            key={index}
+                            className="hover:bg-transparent"
+                          >
+                            <TableCell className="w-1/2 py-3 text-muted-foreground">
+                              {spec.label}
+                            </TableCell>
+                            <TableCell className="py-3 font-medium">
+                              {spec.value}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </CollapsibleContent>
+              </div>
+            </Collapsible>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ProductSpecs1 };
diff --git a/blocks/product-specs2.tsx b/blocks/product-specs2.tsx
new file mode 100644
index 0000000..dc84896
--- /dev/null
+++ b/blocks/product-specs2.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { Check, X } from "lucide-react";
+import { useState } from "react";
+
+import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface Spec {
+  label: string;
+  value: string | boolean;
+  highlight?: boolean;
+}
+
+interface SpecGroup {
+  id: string;
+  name: string;
+  specs: Spec[];
+}
+
+const DEFAULT_SPEC_GROUPS: SpecGroup[] = [
+  {
+    id: "overview",
+    name: "نمای کلی",
+    specs: [
+      { label: "مدل", value: "MacBook حرفه‌ای 14 (2024)", highlight: true },
+      { label: "پردازنده", value: "اپل M3 حرفه‌ای", highlight: true },
+      { label: "حافظه", value: "۱۸ گیگابایت Unified Memory" },
+      { label: "ذخیره‌سازی", value: "۵۱۲ گیگابایت SSD" },
+      { label: "نمایشگر", value: '۱۴٫۲ اینچ Liquid Retina XDR', highlight: true },
+      { label: "عمر باتری", value: "تا ۱۷ ساعت" },
+      { label: "وزن", value: "۱٫۶۰ کیلوگرم (۳٫۵ پوند)" },
+      { label: "رنگ", value: "مشکی فضایی" },
+    ],
+  },
+  {
+    id: "display",
+    name: "نمایشگر",
+    specs: [
+      { label: "اندازه صفحه", value: '۱۴٫۲ اینچ (قطری)' },
+      { label: "وضوح تصویر", value: "۳۲۴ × ۱۹۶۴ پیکسل" },
+      { label: "تراکم پیکسل", value: "۲۵۴ ppi" },
+      { label: "نوع صفحه", value: "Liquid Retina XDR" },
+      { label: "نرخ نوساز", value: "ProMotion (۲۴ تا ۱۲۰ هرتز)", highlight: true },
+      { label: "روشنایی حداکثر (HDR)", value: "۱۶۰۰ نیت" },
+      { label: "روشنایی حداکثر (SDR)", value: "۱۰۰۰ نیت" },
+      { label: "رنگ گسترده (P3)", value: true },
+      { label: "True Tone", value: true },
+      { label: "فناوری ProMotion", value: true },
+    ],
+  },
+  {
+    id: "performance",
+    name: "تراشه و عملکرد",
+    specs: [
+      { label: "تراشه", value: "اپل M3 حرفه‌ای", highlight: true },
+      { label: "هسته‌های CPU", value: "۱۱ هسته (۵ عملکردی + ۶ کارآمد)" },
+      { label: "هسته‌های GPU", value: "۱۴ هسته" },
+      { label: "موتور عصبی", value: "۱۶ هسته" },
+      { label: "پهنای باند حافظه", value: "۱۵۰ گیگابایت بر ثانیه" },
+      { label: "حافظه یکپارچه", value: "۱۸ گیگابایت (قابل تنظیم تا ۳۶ گیگابایت)" },
+      { label: "ردیابی پرتو سخت‌افزاری", value: true },
+      { label: "موتور رسانه", value: true },
+    ],
+  },
+  {
+    id: "storage",
+    name: "حافظه و ذخیره‌سازی",
+    specs: [
+      { label: "حافظه پایه", value: "۵۱۲ گیگابایت SSD" },
+      { label: "حداکثر حافظه", value: "۸ ترابایت SSD" },
+      { label: "نوع حافظه", value: "NVMe SSD" },
+      { label: "سرعت خواندن", value: "تا ۷٫۴ گیگابایت بر ثانیه" },
+      { label: "حافظه RAM پایه", value: "۱۸ گیگابایت Unified" },
+      { label: "حداکثر RAM", value: "۳۶ گیگابایت Unified" },
+      { label: "نوع RAM", value: "LPDDR5" },
+      { label: "قابل ارتقا توسط کاربر", value: false },
+    ],
+  },
+  {
+    id: "connectivity",
+    name: "درگاه‌ها و ارتباطات",
+    specs: [
+      { label: "درگاه‌های Thunderbolt 4", value: "۳" },
+      { label: "درگاه HDMI", value: "۱ (پشتیبانی از ۸K)" },
+      { label: "اسلات کارت SDXC", value: true },
+      { label: "MagSafe 3", value: true },
+      { label: "جک هدفون", value: "۳٫۵ میلی‌متر (امپدانس بالا)" },
+      { label: "Wi-Fi", value: "Wi-Fi 6E (802.11ax)" },
+      { label: "بلوتوث", value: "۵٫۳" },
+    ],
+  },
+  {
+    id: "dimensions",
+    name: "ابعاد و وزن",
+    specs: [
+      { label: "ارتفاع", value: "۱٫۵۵ سانتی‌متر (۰٫۶۱ اینچ)" },
+      { label: "عرض", value: "۳۱٫۲۶ سانتی‌متر (۱۲٫۳۱ اینچ)" },
+      { label: "عمق", value: "۲۲٫۱۲ سانتی‌متر (۸٫۷۱ اینچ)" },
+      { label: "وزن", value: "۱٫۶۰ کیلوگرم (۳٫۵ پوند)" },
+    ],
+  },
+];
+
+interface ProductSpecs2Props {
+  specGroups?: SpecGroup[];
+  title?: string;
+  className?: string;
+}
+
+const ProductSpecs2 = ({
+  specGroups = DEFAULT_SPEC_GROUPS,
+  title = "مشخصات",
+  className,
+}: ProductSpecs2Props) => {
+  const [activeTab, setActiveTab] = useState(specGroups[0]?.id || "overview");
+
+  const renderValue = (value: string | boolean) => {
+    if (typeof value === "boolean") {
+      return value ? (
+        <Check className="size-5 text-emerald-600" />
+      ) : (
+        <X className="size-5 text-muted-foreground" />
+      );
+    }
+    return value;
+  };
+
+  return (
+    <section className={cn("py-16 text-start md:py-24", className)}>
+      <div className="container max-w-5xl" dir="rtl">
+        {/* Header */}
+        <h2 className="mb-8 text-start text-xl font-semibold tracking-tight md:text-3xl">
+          {title}
+        </h2>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="text-start">
+          <ScrollableTabsList className="rounded-none [&_[data-slot=scroll-area-viewport]]:dir-rtl">
+            <TabsList className="flex h-auto w-full justify-start overflow-y-hidden">
+              {specGroups.map((group) => (
+                <TabsTrigger key={group.id} value={group.id}>
+                  {group.name}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </ScrollableTabsList>
+
+          {specGroups.map((group) => (
+            <TabsContent key={group.id} value={group.id} className="mt-0 text-start">
+              <div className="rounded-lg border" dir="rtl">
+                <div className="grid divide-y">
+                  {group.specs.map((spec, index) => (
+                    <div
+                      key={index}
+                      className={cn(
+                        "grid grid-cols-2 gap-4 px-4 py-3 text-start md:px-6",
+                        spec.highlight && "bg-muted/30",
+                      )}
+                    >
+                      <div className="flex items-center justify-start gap-2 text-start">
+                        <span className="text-muted-foreground">
+                          {spec.label}
+                        </span>
+                        {spec.highlight && (
+                          <Badge
+                            variant="secondary"
+                            className="text-xs font-normal"
+                          >
+                            مشخصه کلیدی
+                          </Badge>
+                        )}
+                      </div>
+                      <div className="flex items-center justify-end text-end font-medium">
+                        {renderValue(spec.value)}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </TabsContent>
+          ))}
+        </Tabs>
+
+        {/* Quick Specs Summary */}
+        <div className="mt-8 rounded-lg bg-muted/30 p-6 text-start">
+          <h3 className="mb-4 text-start font-medium">نکات برجسته</h3>
+          <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4">
+            {specGroups[0]?.specs
+              .filter((s) => s.highlight)
+              .slice(0, 4)
+              .map((spec, index) => (
+                <div key={index} className="text-start">
+                  <p className="text-sm text-muted-foreground">{spec.label}</p>
+                  <p className="font-semibold">{spec.value as string}</p>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ProductSpecs2 };
diff --git a/blocks/project1.tsx b/blocks/project1.tsx
new file mode 100644
index 0000000..5491d33
--- /dev/null
+++ b/blocks/project1.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { motion, useInView } from "framer-motion";
+import { MoveUpRight } from "lucide-react";
+import { useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+const heroImage =
+  "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-g3U7sqtdJ1w-unsplash.jpg";
+
+const gridImages2 = [
+  "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-u9-yqtr6YrM-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-VEaI2ftIV2M-unsplash.jpg",
+];
+
+const projectDetails = [
+  { label: "مشتری", value: "پروژه داخلی" },
+  { label: "موقعیت", value: "اوسفول، نروژ" },
+  { label: "سال", value: "۲۲۴" },
+  {
+    label: "دامنه کار",
+    value: "معماری کامپوننت‌محور، فناوری پایدار، سیستم تم مستقل",
+  },
+] as const;
+
+const FadeUpOnScroll = ({
+  children,
+  delay = 0,
+}: {
+  children: React.ReactNode;
+  delay?: number;
+}) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const isInView = useInView(ref, { once: true, margin: "-50px" });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 24 }}
+      animate={isInView ? { opacity: 1, y: 0 } : {}}
+      transition={{ duration: 0.8, delay, ease: "easeOut" }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface Project1Props {
+  className?: string;
+}
+
+const Project1 = ({ className }: Project1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-8 lg:py-32", className)}>
+      <div className="container space-y-6">
+        <FadeUpOnScroll>
+          <header className="border-b border-border pb-6 text-start md:pb-8">
+            <div className="flex flex-row gap-2 md:flex-row md:gap-3">
+              <h1 className="text-3xl text-foreground md:text-2xl lg:text-5xl">
+                پروژه
+              </h1>
+              <h2 className="text-3xl font-light text-muted-foreground md:text-2xl lg:text-5xl">نورث‌بیس</h2>
+            </div>
+          </header>
+        </FadeUpOnScroll>
+
+        <div className="flex justify-between gap-6 font-medium">
+          <p className="max-w-3xl text-start leading-relaxed font-medium text-muted-foreground">یک صفحه فرود مینیمال که سادگی و آرامش بصری طراحی اسکاندیناوی را در یک رابط سبک و سریع جای داده است.</p>
+          <a
+            href="#"
+            className="inline-flex shrink-0 items-center gap-1 text-primary hover:underline"
+          >
+            مشاهده وب‌سایت
+            <MoveUpRight className="h-4 w-5 rtl:-scale-x-100" />
+          </a>
+        </div>
+
+        <FadeUpOnScroll delay={0.15}>
+          <div className="overflow-hidden rounded-sm border border-border">
+            <img
+              src={heroImage}
+              alt="صفحه فرود مینیمال با تایپوگرافی روشن و فضای خالی فراوان."
+              className="aspect-[16/7] w-full object-cover"
+            />
+          </div>
+        </FadeUpOnScroll>
+
+        <FadeUpOnScroll delay={0.25}>
+          <div className="flex flex-col items-start justify-end py-4 md:py-6">
+            <div className="space-y-6 text-start lg:w-1/2">
+              <p className="text-sm leading-relaxed text-muted-foreground md:text-base lg:text-lg">هر بخش رابط با دقت طراحی شده  کامپوننت‌های توکار، چیدمان منعطف و نماهای واکنش‌گرا، تجربه‌ای روان بدون پیچیدگی اضافی را ممکن می‌سازند. بهینه برای سرعت و ساخته‌شده با بلاک‌های آماده ری یو آی، این رابط روی همه دستگاه‌ها یکدست کار می‌کند و اصول سادگی و کارایی را در خود جای داده است.</p>
+              <p className="text-sm leading-relaxed text-muted-foreground md:text-base lg:text-lg">این صفحه فرود، طراحی اسکاندیناوی را به جوهره خود رسانده است. تایپوگرافی سبک و فضای خالی سنجیده، خوانایی را به حداکثر می‌رسانند و با چیدمان مینیمال، تمرکز کاربر روی محتوای اصلی دست‌نخورده باقی می‌ماند. کل رابط با بلاک‌های آماده ری یو آی و بهینه برای سرعت ساخته شده است.</p>
+              <div className="space-y-4">
+                {projectDetails.map((detail) => (
+                  <div
+                    key={detail.label}
+                    className="flex flex-col border-b border-border py-3 text-sm sm:flex-row sm:items-center sm:justify-between md:text-base"
+                  >
+                    <span className="text-xs font-medium tracking-wide text-muted-foreground md:text-sm">
+                      {detail.label}
+                    </span>
+                    <span className="font-semibold text-foreground">
+                      {detail.value}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </FadeUpOnScroll>
+
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:gap-6">
+          {gridImages2.map((src, i) => (
+            <div
+              key={i}
+              className="overflow-hidden rounded-sm border border-border"
+            >
+              <img
+                src={src}
+                alt={
+                  i === 0
+                    ? "نمای داخلی رابط مینیمال با تایپوگرافی روشن، کارت‌های توکار و تم گرم."
+                    : "صفحه تنظیمات با نمای کامل و دسترسی سریع."
+                }
+                className="w-full object-cover transition-transform duration-500"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project1 };
diff --git a/blocks/project10.tsx b/blocks/project10.tsx
new file mode 100644
index 0000000..b62412d
--- /dev/null
+++ b/blocks/project10.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import type { Variants } from "framer-motion";
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project10Props {
+  className?: string;
+}
+
+const Project10 = ({ className }: Project10Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+      alt: "موکاپ طراحی محصول",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+      alt: "معماری فرانت‌اند",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+      alt: "نمای محصول",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+      alt: "طراحی رابط دیجیتال",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+      alt: "بصری صفحه فرود بازاریابی",
+    },
+  ];
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        ease: "easeOut",
+      },
+    },
+  };
+
+  const imageVariants: Variants = {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.8,
+        ease: "easeOut",
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <motion.div
+        className="container"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <motion.header
+          className="mb-12 flex flex-col gap-6 text-start lg:flex-row lg:items-start lg:justify-between"
+          variants={itemVariants}
+        >
+          <div className="flex-1">
+            <h1 className="mb-4 text-4xl font-bold sm:text-5xl lg:text-6xl">طراحی وب</h1>
+            <p className="max-w-md text-base leading-relaxed text-muted-foreground sm:text-lg">پشت هر رابط ساده، معماری منظمی از کامپوننت‌ها و توکن‌های طراحی نهفته است.</p>
+          </div>
+
+          <div className="flex flex-col gap-4 sm:flex-row lg:flex-col lg:items-end lg:gap-6">
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-fit gap-2 border-muted-foreground/20 bg-transparent hover:bg-muted/10"
+            >
+              مشاهده مطالعه موردی
+              <ArrowUpRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+
+            <div className="flex gap-8 sm:gap-12">
+              <div className="text-sm">
+                <p className="mb-1 text-muted-foreground">دسته‌بندی</p>
+                <p className="font-medium">طراحی</p>
+              </div>
+              <div className="text-sm">
+                <p className="mb-1 text-muted-foreground">رسانه</p>
+                <p className="font-medium">نمایش دیزاین سیستم</p>
+              </div>
+            </div>
+          </div>
+        </motion.header>
+
+        <motion.div
+          className="mb-16 overflow-hidden rounded-2xl bg-muted/20"
+          variants={imageVariants}
+        >
+          <img
+            src="/block-media/shadcnblocks/block/lummi/bw14.jpeg"
+            alt="تصویر شاخص پروژه"
+            className="h-auto w-full object-cover"
+          />
+        </motion.div>
+
+        <div className="mb-20 space-y-12 text-start lg:space-y-16">
+          <motion.section variants={itemVariants}>
+            <div className="grid items-start gap-8 border-b border-border pb-8 lg:grid-cols-2 lg:gap-12 lg:pb-12">
+              <div>
+                <span className="text-4xl font-light text-muted-foreground sm:text-5xl lg:text-6xl">
+                  ۱
+                </span>
+                <h2 className="mt-4 text-2xl font-bold sm:text-3xl">الهام.</h2>
+              </div>
+              <div className="space-y-4">
+                <p className="leading-relaxed text-muted-foreground">طراحی محصول از تجربه‌های همیشه در حال تغییر کاربر، نیازهای تازه و تنوع بسترها الهام می‌گیرد. هر تعامل منحصربه‌فرد است و فرصت‌های بی‌پایانی برای بهبود تجربه فراهم می‌آورد.</p>
+                <p className="leading-relaxed text-muted-foreground">از صفحه ورود تا داشبورد نهایی، هر نما بخشی از یک تجربه کاربری پیوسته است.</p>
+              </div>
+            </div>
+          </motion.section>
+
+          <motion.section variants={itemVariants}>
+            <div className="grid items-start gap-8 border-b border-border pb-8 lg:grid-cols-2 lg:gap-12 lg:pb-12">
+              <div>
+                <span className="text-4xl font-light text-muted-foreground sm:text-5xl lg:text-6xl">
+                  ۲
+                </span>
+                <h2 className="mt-4 text-2xl font-bold sm:text-3xl">
+                  چالش‌ها.
+                </h2>
+              </div>
+              <div className="space-y-4">
+                <p className="leading-relaxed text-muted-foreground">رسیدن به رابط ایده‌آل اغلب به تکرار صبورانه، تست با کاربر و توجه دقیق به جزئیات نیاز دارد. انعطاف‌پذیری، احترام به دسترس‌پذیری و دیدی دقیق لازم است.</p>
+                <p className="leading-relaxed text-muted-foreground">غیرقابل‌پیش‌بینی بودن رفتار کاربر، هر طراحی را به چالشی ارزشمند تبدیل می‌کند.</p>
+              </div>
+            </div>
+          </motion.section>
+
+          <motion.section variants={itemVariants}>
+            <div className="grid items-start gap-8 border-b border-border pb-8 lg:grid-cols-2 lg:gap-12 lg:pb-12">
+              <div>
+                <span className="text-4xl font-light text-muted-foreground sm:text-5xl lg:text-6xl">
+                  ۳
+                </span>
+                <h2 className="mt-4 text-2xl font-bold sm:text-3xl">پاداش.</h2>
+              </div>
+              <div className="space-y-4">
+                <p className="leading-relaxed text-muted-foreground">پاداش ساخت با بلاک‌های آماده در سرعت و کیفیت آن است؛ هر کامپوننت قابل‌استفاده مجدد، زمان توسعه را کوتاه‌تر و تجربه را یکدست‌تر می‌کند.</p>
+                <p className="leading-relaxed text-muted-foreground">زیبایی محصولات دیجیتال را از دریچه طراحی ثبت می‌کند؛ از صفحه فرود تا داشبورد.</p>
+              </div>
+            </div>
+          </motion.section>
+        </div>
+
+        <motion.section className="space-y-4" variants={itemVariants}>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            {images.slice(0, 2).map((image, index) => (
+              <motion.div
+                key={index}
+                className="overflow-hidden rounded-xl bg-muted/20"
+                variants={imageVariants}
+              >
+                <img
+                  src={image.src || "/placeholder.svg"}
+                  alt={image.alt}
+                  className="h-64 w-full object-cover transition-transform duration-500 hover:scale-105 sm:h-80 lg:h-96"
+                />
+              </motion.div>
+            ))}
+          </div>
+
+          <div className="relative overflow-hidden rounded-xl">
+            <motion.div
+              className="flex gap-4"
+              animate={{
+                x: [0, 400, 800, 0],
+              }}
+              transition={{
+                duration: 12,
+                repeat: Number.POSITIVE_INFINITY,
+                ease: "linear",
+              }}
+            >
+              {images.slice(2, 5).map((image, index) => (
+                <motion.div
+                  key={index}
+                  className="w-80 flex-shrink-0 overflow-hidden rounded-xl bg-muted/20 sm:w-96"
+                  variants={imageVariants}
+                >
+                  <img
+                    src={image.src || "/placeholder.svg"}
+                    alt={image.alt}
+                    className="h-48 w-full object-cover sm:h-64"
+                  />
+                </motion.div>
+              ))}
+
+              {images.slice(2, 5).map((image, index) => (
+                <motion.div
+                  key={`duplicate-${index}`}
+                  className="w-80 flex-shrink-0 overflow-hidden rounded-xl bg-muted/20 sm:w-96"
+                  variants={imageVariants}
+                >
+                  <img
+                    src={image.src || "/placeholder.svg"}
+                    alt={image.alt}
+                    className="h-48 w-full object-cover sm:h-64"
+                  />
+                </motion.div>
+              ))}
+            </motion.div>
+          </div>
+        </motion.section>
+      </motion.div>
+    </section>
+  );
+};
+
+export { Project10 };
diff --git a/blocks/project12.tsx b/blocks/project12.tsx
new file mode 100644
index 0000000..62af04a
--- /dev/null
+++ b/blocks/project12.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { ArrowLeft } from "lucide-react";
+import { motion } from "motion/react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const headingLines = [
+  "در قلب داده‌های فروش",
+  "تجربه‌ای از طراحی داشبورد محصول",
+  "برای تصمیم‌گیری سریع‌تر",
+];
+
+const maskReveal = {
+  hidden: { clipPath: "inset(0% 0% 0% 100%)", opacity: 0 },
+  visible: {
+    clipPath: "inset(0% 0% 0% 0%)",
+    opacity: 1,
+  },
+};
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+  },
+};
+
+interface Project12Props {
+  className?: string;
+}
+
+const Project12 = ({ className }: Project12Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container space-y-12">
+        <div className="flex flex-col gap-8 text-start lg:flex-row lg:items-start lg:justify-between lg:gap-16">
+          <div className="flex-1 lg:max-w-2xl">
+            <motion.div
+              initial="hidden"
+              animate="visible"
+              variants={fadeUp}
+              transition={{ delay: 0.5, duration: 0.8, ease: "easeOut" }}
+            >
+              <Button
+                variant="secondary"
+                className="mb-6 h-auto p-1 font-normal text-muted-foreground hover:text-foreground"
+              >
+                <ArrowLeft className="ms-2 h-4 w-4 rtl:rotate-180" />
+                بازگشت
+              </Button>
+            </motion.div>
+
+            <div className="space-y-2 overflow-hidden">
+              {headingLines.map((line, i) => (
+                <motion.h1
+                  key={i}
+                  className="text-3xl leading-tight font-bold text-foreground md:text-4xl lg:text-5xl"
+                  initial="hidden"
+                  animate="visible"
+                  variants={maskReveal}
+                  transition={{
+                    delay: i * 0.3,
+                    duration: 0.9,
+                    ease: "easeInOut",
+                  }}
+                >
+                  {line}
+                </motion.h1>
+              ))}
+            </div>
+          </div>
+
+          <motion.div
+            className="mt-1 flex-shrink-0 lg:w-80"
+            initial="hidden"
+            animate="visible"
+            variants={fadeUp}
+            transition={{ delay: 0.7, duration: 0.8, ease: "easeOut" }}
+          >
+            <div className="space-y-6">
+              <p className="text-sm leading-relaxed text-muted-foreground">این پروژه تجربه مرور مطالعات موردی را از مسیر یک رابط روان بازطراحی می‌کند. مجموعه‌ای از بهترین نتایج مشتریان با هدف نمایش ROI و معیارهای قابل اندازه‌گیری.</p>
+
+              <div className="space-y-4">
+                {[
+                  ["سال", "۲۲۵"],
+                  ["پروژه", "داشبورد مطالعات موردی B2B"],
+                  ["لوممی", "نمای کلی"],
+                ].map(([label, value], i) => (
+                  <motion.div
+                    key={label}
+                    variants={fadeUp}
+                    transition={{
+                      delay: 0.9 + i * 0.2,
+                      duration: 0.8,
+                      ease: "easeOut",
+                    }}
+                    initial="hidden"
+                    animate="visible"
+                  >
+                    <p className="mb-1 text-xs tracking-wide text-muted-foreground">
+                      {label}
+                    </p>
+                    <p className="font-medium text-foreground">{value}</p>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        </div>
+
+        <motion.div
+          className="w-full"
+          initial={{ opacity: 0, y: 40, scale: 1.02 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ duration: 1.2, delay: 1, ease: "easeOut" }}
+        >
+          <img
+            src="/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg"
+            alt="طراح محصول"
+            className="w-full rounded-xl border border-border object-cover shadow-xl"
+          />
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Project12 };
diff --git a/blocks/project13.tsx b/blocks/project13.tsx
new file mode 100644
index 0000000..454e10a
--- /dev/null
+++ b/blocks/project13.tsx
@@ -0,0 +1,225 @@
+"use client";
+import type { Variants } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+const images = {
+  hero: "/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg",
+};
+
+const gridImages = [
+  {
+    src: "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+    alt: "اکتشاف تم ۱",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+    alt: "اکتشاف تم ۲",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+    alt: "اکتشاف تم ۳",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
+    alt: "اکتشاف تم ۴",
+  },
+];
+
+interface Project13Props {
+  className?: string;
+}
+
+const Project13 = ({ className }: Project13Props) => {
+  const { scrollYProgress } = useScroll();
+
+  const heroY = useTransform(scrollYProgress, [0, 1], [0, -300]);
+  const heroScale = useTransform(scrollYProgress, [0, 0.5], [1, 1.2]);
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.3,
+        duration: 0.8,
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: { opacity: 0, y: 80 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 1,
+        ease: "easeInOut",
+      },
+    },
+  };
+
+  const imageVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        duration: 1.2,
+        ease: "easeInOut",
+      },
+    },
+  };
+
+  const titleVariants: Variants = {
+    hidden: { opacity: 0, y: 100, scale: 0.9 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: {
+        duration: 1.4,
+        ease: "easeInOut",
+        delay: 0.2,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("min-h-screen", className)}>
+      <motion.section
+        className="relative overflow-hidden"
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+      >
+        <motion.div
+          className="relative flex h-[60vh] items-center justify-center md:h-[70vh] md:border-[50px] md:border-white lg:h-[100vh]"
+          style={{ y: heroY, scale: heroScale }}
+        >
+          <motion.img
+            src={images.hero}
+            alt="تصویر شاخص «عمق‌های درخشان»"
+            className="absolute inset-0 h-full w-full object-cover"
+            variants={imageVariants}
+          />
+          <div className="absolute inset-0 bg-black/30" />
+          <motion.h1
+            className="relative z-10 px-4 text-center text-4xl font-semibold text-white md:text-6xl lg:text-7xl xl:text-8xl"
+            variants={titleVariants}
+          >
+            عمق‌های درخشان
+          </motion.h1>
+        </motion.div>
+      </motion.section>
+
+      <motion.section
+        className="px-4 py-12 text-start md:px-8 md:py-16 lg:px-16 lg:py-20 xl:px-24"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-150px" }}
+        variants={containerVariants}
+      >
+        <div className="mx-auto max-w-7xl">
+          <motion.p
+            className="mb-12 max-w-7xl border-b pb-7 text-lg leading-relaxed md:mb-16 md:text-xl lg:mb-20 lg:text-2xl"
+            variants={itemVariants}
+          >این کاوش به رابطه ژرف میان رنگ، توکن طراحی و ادراک کاربر می‌پردازد و زبانی بصری می‌سازد که یک دیزاین سیستم منسجم را شکل می‌دهد.</motion.p>
+
+          <div className="grid grid-cols-2 gap-8 md:grid-cols-3 md:gap-12 lg:grid-cols-3 lg:gap-16">
+            <motion.div variants={itemVariants}>
+              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
+                پروژه
+              </h3>
+              <p className="text-base md:text-lg">عمق‌های درخشان</p>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
+                استودیو
+              </h3>
+              <p className="text-base md:text-lg">پریسم کالکتیو</p>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
+                سال
+              </h3>
+              <p className="text-base md:text-lg">۲۲۵</p>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
+                نقش
+              </h3>
+              <p className="mb-4 text-base md:text-lg">مدیر خلاق</p>
+            </motion.div>
+            <motion.div variants={itemVariants}>
+              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
+                ابزارها
+              </h3>
+              <p className="text-base md:text-lg">طراحی رابط، ویرایشگر کد، نمایش مؤلفه‌ها</p>
+            </motion.div>
+          </div>
+        </div>
+      </motion.section>
+
+      <motion.section
+        className="pb-12 md:pb-16 lg:pb-20"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        variants={containerVariants}
+      >
+        <div className="grid grid-cols-1 md:grid-cols-2">
+          {gridImages.map((image, index) => (
+            <motion.div
+              key={index}
+              className="md:col-span-1 lg:col-span-1"
+              variants={imageVariants}
+              transition={{ duration: 0.6, ease: "easeInOut" }}
+            >
+              <div className="relative aspect-square overflow-hidden">
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="h-full w-full object-cover transition-transform duration-700 hover:scale-110"
+                />
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.section>
+
+      <motion.section
+        className="px-4 py-5 text-start md:px-8 md:py-5 md:pb-22 lg:px-16 xl:px-24"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        variants={containerVariants}
+      >
+        <div className="mx-auto max-w-7xl">
+          <div className="grid grid-cols-1 items-start gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
+            <motion.div variants={itemVariants}>
+              <h3 className="mb-4 text-sm tracking-wider text-muted-foreground">
+                مفهوم
+              </h3>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <h2 className="mb-6 text-2xl font-medium md:mb-8 md:text-3xl lg:text-4xl">زبان رنگ</h2>
+
+              <div className="space-y-4 leading-relaxed font-medium text-muted-foreground md:space-y-6">
+                <p>سیستم رنگ و توکن‌های طراحی برای داشبوردهای CRM و تحلیل، با تمرکز بر خوانایی داده‌ها و سلسله‌مراتب بصری واضح.</p>
+
+                <p>هر توکن رنگ برای هدایت توجه کاربر به KPIهای مهم، هشدارها و اقدامات موردنیاز در رابط فروش طراحی شده است.</p>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </motion.section>
+    </section>
+  );
+};
+
+export { Project13 };
diff --git a/blocks/project13a.tsx b/blocks/project13a.tsx
new file mode 100644
index 0000000..48a4abf
--- /dev/null
+++ b/blocks/project13a.tsx
@@ -0,0 +1,225 @@
+"use client";
+import type { Variants } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+const images = {
+  hero: "/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg",
+};
+
+const galleryImages = [
+  {
+    src: "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+    alt: "اکتشاف تم ۱",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+    alt: "اکتشاف تم ۲",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+    alt: "اکتشاف تم ۳",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
+    alt: "اکتشاف تم ۴",
+  },
+];
+
+interface Project13aProps {
+  className?: string;
+}
+
+const Project13a = ({ className }: Project13aProps) => {
+  const { scrollYProgress } = useScroll();
+
+  const heroY = useTransform(scrollYProgress, [0, 1], [0, -200]);
+  const textY = useTransform(scrollYProgress, [0, 0.5], [0, -100]);
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        duration: 0.6,
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: { opacity: 0, y: 60 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.8,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  };
+
+  const imageVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        duration: 1.2,
+        ease: "easeOut",
+      },
+    },
+  };
+
+  const titleVariants: Variants = {
+    hidden: { opacity: 0, y: 150 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 1.6,
+        ease: [0.25, 0.46, 0.45, 0.94],
+        delay: 0.3,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("min-h-screen", className)}>
+      <motion.section
+        className="relative overflow-hidden"
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+      >
+        <motion.div
+          className="relative flex h-screen items-center justify-center"
+          style={{ y: heroY }}
+        >
+          <motion.img
+            src={images.hero}
+            alt="تصویر شاخص «عمق‌های درخشان»"
+            className="absolute inset-0 h-full w-full object-cover"
+            variants={imageVariants}
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-black/40 to-black/60" />
+          <motion.div
+            className="relative z-10 px-4 text-center"
+            style={{ y: textY }}
+          >
+            <motion.h1
+              className="mb-6 text-5xl font-bold text-white md:text-7xl lg:text-8xl xl:text-9xl"
+              variants={titleVariants}
+            >
+              عمق‌های
+              <br />
+              درخشان
+            </motion.h1>
+            <motion.p
+              className="mx-auto max-w-2xl text-lg text-white/90 md:text-xl"
+              variants={itemVariants}
+            >سیستم طراحی یکپارچه برای داشبوردهای B2B</motion.p>
+          </motion.div>
+        </motion.div>
+      </motion.section>
+
+      <motion.section
+        className="-mt-1 px-4 py-16 text-start md:px-8 md:py-24 lg:px-16 lg:py-32 xl:px-24"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        variants={containerVariants}
+      >
+        <div className="mx-auto max-w-7xl">
+          <motion.div
+            className="mb-16 grid grid-cols-1 gap-12 md:grid-cols-2 lg:gap-20"
+            variants={itemVariants}
+          >
+            <div>
+              <h2 className="mb-8 text-3xl font-semibold md:text-4xl lg:text-5xl">
+                مرور پروژه
+              </h2>
+              <p className="text-lg leading-relaxed md:text-xl">کاوشی ژرف در سیستم رنگ و توکن‌های طراحی، که از مسیر یک دیزاین سیستم منسجم و تم‌پذیر شکل گرفته است.</p>
+            </div>
+            <div className="space-y-8">
+              <div>
+                <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
+                  استودیو
+                </h3>
+                <p className="text-lg md:text-xl">پریسم کالکتیو</p>
+              </div>
+              <div>
+                <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
+                  سال و نقش
+                </h3>
+                <p className="text-lg md:text-xl">۲۲۵  مدیر خلاق</p>
+              </div>
+              <div>
+                <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
+                  ابزارها
+                </h3>
+                <p className="text-lg md:text-xl">طراحی رابط، ویرایشگر کد، نمایش مؤلفه‌ها</p>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </motion.section>
+
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        variants={containerVariants}
+      >
+        <div>
+          {galleryImages.map((image, index) => (
+            <motion.div
+              key={index}
+              className="relative overflow-hidden"
+              variants={imageVariants}
+              transition={{ duration: 0.6, ease: "easeInOut" }}
+            >
+              <div className="relative aspect-auto overflow-hidden lg:aspect-video">
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.section>
+
+      <motion.section
+        className="px-4 py-5 text-start md:px-8 md:py-5 lg:px-16 xl:px-24"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        variants={containerVariants}
+      >
+        <div className="mx-auto max-w-7xl py-24">
+          <div className="grid grid-cols-1 items-start gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
+            <motion.div variants={itemVariants}>
+              <h3 className="mb-4 text-sm tracking-wider text-muted-foreground">
+                مفهوم
+              </h3>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <h2 className="mb-6 text-2xl font-medium md:mb-8 md:text-3xl lg:text-4xl">زبان رنگ</h2>
+
+              <div className="space-y-4 leading-relaxed font-medium text-muted-foreground md:space-y-6">
+                <p>این کاوش به رابطه ژرف میان رنگ، توکن طراحی و ادراک کاربر می‌پردازد و زبانی بصری می‌سازد که یک دیزاین سیستم منسجم را شکل می‌دهد.</p>
+
+                <p>هر توکن رنگ برای هدایت توجه کاربر به KPIهای مهم، هشدارها و اقدامات موردنیاز در داشبوردهای CRM طراحی شده است.</p>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </motion.section>
+    </section>
+  );
+};
+
+export { Project13a };
diff --git a/blocks/project14.tsx b/blocks/project14.tsx
new file mode 100644
index 0000000..0689e77
--- /dev/null
+++ b/blocks/project14.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project14Props {
+  className?: string;
+}
+
+const Project14 = ({ className }: Project14Props) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 40 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.7, ease: "easeOut" },
+  };
+
+  const staggerContainer = {
+    initial: {},
+    animate: {
+      transition: {
+        staggerChildren: 0.18,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <motion.div
+          className="mb-16 text-center"
+          variants={fadeInUp}
+          initial="initial"
+          animate="animate"
+        >
+          <motion.p
+            className="mb-4 text-sm tracking-widest text-muted-foreground"
+            variants={fadeInUp}
+          >
+            پروژه
+          </motion.p>
+          <motion.h1
+            className="text-2xl font-bold tracking-wide md:text-5xl lg:text-7xl"
+            variants={fadeInUp}
+          >
+            آستین موتورز
+          </motion.h1>
+        </motion.div>
+
+        <motion.div
+          className="mb-24 grid gap-6 md:grid-cols-2"
+          variants={staggerContainer}
+          initial="initial"
+          animate="animate"
+        >
+          <motion.div
+            className="relative overflow-hidden rounded-md"
+            variants={fadeInUp}
+          >
+            <motion.div
+              className="relative h-[400px] w-full"
+              whileHover={{ scale: 1.03 }}
+              transition={{ duration: 0.4, ease: "easeOut" }}
+            >
+              <img
+                src="/block-media/shadcnblocks/block/lummi/bw1.jpeg"
+                alt="نمای محصول با انیمیشن حرکت روان"
+                className="h-full w-full object-cover grayscale filter transition-transform duration-500 hover:scale-105"
+              />
+            </motion.div>
+          </motion.div>
+          <motion.div
+            className="relative overflow-hidden rounded-md"
+            variants={fadeInUp}
+          >
+            <motion.div
+              className="relative h-[400px] w-full"
+              whileHover={{ scale: 1.03 }}
+              transition={{ duration: 0.4, ease: "easeOut" }}
+            >
+              <img
+                src="/block-media/shadcnblocks/block/lummi/bw2.jpeg"
+                alt="نمای اصلی محصول با تم دراماتیک"
+                className="h-full w-full object-cover grayscale filter transition-transform duration-500 hover:scale-105"
+              />
+            </motion.div>
+          </motion.div>
+        </motion.div>
+
+        <motion.div
+          className="mb-16 text-center"
+          variants={staggerContainer}
+          initial="initial"
+          animate="animate"
+        >
+          <motion.div
+            className="mb-12 flex items-center justify-evenly gap-4"
+            variants={staggerContainer}
+          >
+            <motion.div variants={fadeInUp}>
+              <p className="mb-2 text-xs tracking-widest text-muted-foreground">
+                دسته‌بندی
+              </p>
+              <p className="font-medium tracking-wide md:text-lg">محصول</p>
+            </motion.div>
+            <motion.div variants={fadeInUp}>
+              <p className="mb-2 text-xs tracking-widest text-muted-foreground">
+                سال
+              </p>
+              <p className="font-medium tracking-wide md:text-lg">۲۲۵</p>
+            </motion.div>
+            <motion.div variants={fadeInUp}>
+              <p className="mb-2 text-xs tracking-widest text-muted-foreground">محصول</p>
+              <p className="font-medium tracking-wide md:text-lg">
+                آستین لایف‌استایل
+              </p>
+            </motion.div>
+          </motion.div>
+          <motion.div className="mx-auto max-w-4xl" variants={fadeInUp}>
+            <p className="leading-relaxed">آستین موتورز با این پروژه، پیکربندی‌گر آنلاین و وب‌سایت محصول خود را به یک تجربه دیجیتال مدرن تبدیل کرد. هر صفحه با بلاک‌های آماده ری یو آی ساخته شده تا تعهد برند به مهندسی دقیق و طراحی ماندگار در فضای وب هم بازتاب یابد؛ جایی که کامپوننت‌های استاندارد با یک تم اختصاصی درهم می‌آمیزند. نتیجه، رابطی سریع، واکنش‌گرا و یکدست روی همه دستگاه‌هاست که هویت برند را در هر تعامل تقویت می‌کند.</p>
+          </motion.div>
+        </motion.div>
+
+        <motion.div
+          className="mb-6"
+          variants={fadeInUp}
+          initial="initial"
+          animate="animate"
+        >
+          <motion.div
+            className="relative overflow-hidden rounded-lg"
+            whileHover={{ scale: 1.02 }}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+          >
+            <div className="relative h-[600px] w-full">
+              <img
+                src="/block-media/shadcnblocks/block/lummi/bw7.jpeg"
+                alt="داشبورد محصول با کامپوننت‌های غنی و تم مدرن"
+                className="h-full w-full object-cover grayscale filter duration-500 hover:scale-105"
+              />
+            </div>
+          </motion.div>
+        </motion.div>
+
+        <motion.div
+          className="grid gap-6 md:grid-cols-2"
+          variants={staggerContainer}
+          initial="initial"
+          animate="animate"
+        >
+          <motion.div
+            className="relative overflow-hidden rounded-md"
+            variants={fadeInUp}
+          >
+            <motion.div
+              className="relative h-[400px] w-full"
+              whileHover={{ scale: 1.03 }}
+              transition={{ duration: 0.4, ease: "easeOut" }}
+            >
+              <img
+                src="/block-media/shadcnblocks/block/lummi/bw9.jpeg"
+                alt="نمای جانبی محصول روی پس‌زمینه شهری"
+                className="h-full w-full object-cover grayscale filter transition-transform duration-500 hover:scale-105"
+              />
+            </motion.div>
+          </motion.div>
+          <motion.div
+            className="relative overflow-hidden rounded-md"
+            variants={fadeInUp}
+          >
+            <motion.div
+              className="relative h-[400px] w-full"
+              whileHover={{ scale: 1.03 }}
+              transition={{ duration: 0.4, ease: "easeOut" }}
+            >
+              <img
+                src="/block-media/shadcnblocks/block/lummi/bw5.jpeg"
+                alt="نمای نزدیک کامپوننت و جزئیات تعامل"
+                className="h-full w-full object-cover grayscale filter transition-transform duration-500 hover:scale-105"
+              />
+            </motion.div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Project14 };
diff --git a/blocks/project2.tsx b/blocks/project2.tsx
new file mode 100644
index 0000000..520d171
--- /dev/null
+++ b/blocks/project2.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project2Props {
+  title: string;
+  title2?: string;
+  year: string;
+  category: string;
+  client: string;
+  imageSrc: string;
+  imageAlt: string;
+  overviewHeading: string;
+  mainDescription: string;
+  detailDescription: string;
+  buttonText: string;
+  className?: string;
+}
+
+const Project2 = ({
+  title = "دیجیتال",
+  title2 = "تیم",
+  year = "«۲۲۴»",
+  category = "«دیزاین سیستم»",
+  client = "«استودیو محصول»",
+  imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
+  imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
+  overviewHeading = "مرور پروژه",
+  mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
+  detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
+  buttonText = "تماس با ما",
+  className,
+}: Project2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="py-12 text-start">
+          <div>
+            <h1 className="text-6xl leading-none font-light tracking-tight text-foreground md:text-8xl lg:text-9xl">
+              {title}
+              {title2 && (
+                <>
+                  <br />
+                  {title2}
+                </>
+              )}
+            </h1>
+          </div>
+
+          <div className="mt-12 grid grid-cols-3 text-sm tracking-wider text-muted-foreground md:grid-cols-6">
+            <div>
+              <span className="block">سال</span>
+              <span className="text-foreground">{year}</span>
+            </div>
+            <div>
+              <span className="block">دسته‌بندی</span>
+              <span className="text-foreground">{category}</span>
+            </div>
+            <div className="ms-16">
+              <span className="block">مشتری</span>
+              <span className="text-foreground">{client}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative">
+          <div className="aspect-[16/10] overflow-hidden">
+            <img
+              src={imageSrc}
+              alt={imageAlt}
+              className="h-full w-full object-cover"
+            />
+          </div>
+        </div>
+
+        <div className="mx-auto max-w-5xl px-6 py-16 text-start md:px-12 lg:px-24">
+          <div>
+            <h2 className="mb-8 text-sm tracking-wider text-foreground">
+              {overviewHeading}
+            </h2>
+          </div>
+
+          <div>
+            <h2 className="mb-8 text-xl leading-relaxed font-light text-foreground md:text-2xl">
+              {mainDescription}
+            </h2>
+
+            <p className="mb-12 text-base leading-relaxed text-muted-foreground">
+              {detailDescription}
+            </p>
+
+            <div>
+              <Button variant="outline" className="group gap-2">
+                {buttonText}
+                <ArrowRight className="size-4 transition-transform rtl:rotate-180" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project2 };
diff --git a/blocks/project2a.tsx b/blocks/project2a.tsx
new file mode 100644
index 0000000..68703e5
--- /dev/null
+++ b/blocks/project2a.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Project2aProps {
+  title: string;
+  title2?: string;
+  year: string;
+  category: string;
+  client: string;
+  imageSrc: string;
+  imageAlt: string;
+  imageCaption: string;
+  mainDescription: string;
+  detailDescription: string;
+  buttonText: string;
+  className?: string;
+}
+
+const Project2a = ({
+  title = "دیجیتال",
+  title2 = "تیم",
+  year = "«۲۲۴»",
+  category = "«دیزاین سیستم»",
+  client = "«استودیو محصول»",
+  imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
+  imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
+  imageCaption = "نمای داشبورد فروش با نمودارهای KPI و خط لوله معاملات",
+  mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
+  detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
+  buttonText = "تماس با ما",
+  className,
+}: Project2aProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto px-8 py-20">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-20 flex flex-col items-center justify-center gap-6">
+            <Label className="text-sm tracking-wider text-foreground">
+              پروژه
+            </Label>
+            <h1 className="text-center text-7xl leading-none font-light tracking-tight text-foreground md:text-8xl lg:text-9xl">
+              {title}
+              {title2 && (
+                <>
+                  <br />
+                  {title2}
+                </>
+              )}
+            </h1>
+            <div className="mx-auto mt-12 h-px w-24 bg-border"></div>
+          </div>
+
+          <div className="mb-24 grid grid-cols-3 justify-items-center text-sm tracking-wider text-muted-foreground">
+            <div className="text-center">
+              <span className="block">سال</span>
+              <span className="text-foreground">{year}</span>
+            </div>
+            <div className="text-center">
+              <span className="block">دسته‌بندی</span>
+              <span className="text-foreground">{category}</span>
+            </div>
+            <div className="text-center">
+              <span className="block">مشتری</span>
+              <span className="text-foreground">{client}</span>
+            </div>
+          </div>
+
+          <div className="mb-24">
+            <div className="aspect-[16/10] overflow-hidden bg-muted">
+              <img
+                src={imageSrc}
+                alt={imageAlt}
+                className="h-full w-full object-cover"
+              />
+            </div>
+            <div className="mt-6 text-center text-xs tracking-widest text-muted-foreground">
+              <em>{imageCaption}</em>
+            </div>
+          </div>
+
+          <div className="mx-auto max-w-5xl text-start">
+            <div className="space-y-8">
+              <h2 className="mb-8 text-xl leading-relaxed font-light text-foreground md:text-2xl">
+                {mainDescription}
+              </h2>
+
+              <p className="mb-12 text-base leading-relaxed text-muted-foreground">
+                {detailDescription}
+              </p>
+
+              <div>
+                <Button variant="outline" className="group gap-2">
+                  {buttonText}
+                  <ArrowRight className="size-4 transition-transform rtl:rotate-180" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project2a };
diff --git a/blocks/project2b.tsx b/blocks/project2b.tsx
new file mode 100644
index 0000000..45f6f3c
--- /dev/null
+++ b/blocks/project2b.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project2bProps {
+  title: string;
+  title2?: string;
+  year: string;
+  category: string;
+  client: string;
+  imageSrc: string;
+  imageAlt: string;
+  imageCaption?: string;
+  overviewHeading: string;
+  mainDescription: string;
+  detailDescription: string;
+  buttonText: string;
+  className?: string;
+}
+
+const Project2b = ({
+  title = "دیجیتال",
+  title2 = "تیم",
+  year = "«۲۲۴»",
+  category = "«دیزاین سیستم»",
+  client = "«استودیو محصول»",
+  imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
+  imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
+  imageCaption = "نمای داشبورد فروش با نمودارهای KPI و خط لوله معاملات",
+  overviewHeading = "مرور پروژه",
+  mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
+  detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
+  buttonText = "تماس با ما",
+  className,
+}: Project2bProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto px-8 py-24">
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-24 grid grid-cols-12 gap-8">
+            <div className="col-span-12 text-start md:col-span-8">
+              <h1 className="text-4xl leading-tight font-normal tracking-wider text-foreground md:text-6xl lg:text-7xl">
+                {title}
+                {title2 && (
+                  <>
+                    <br />
+                    {title2}
+                  </>
+                )}
+              </h1>
+            </div>
+            <div className="col-span-12 md:col-span-4">
+              <div className="space-y-6 border-s border-border ps-8 text-start">
+                <div className="space-y-2">
+                  <div className="text-xs font-medium tracking-wider text-muted-foreground">
+                    سال
+                  </div>
+                  <div className="text-sm font-medium text-foreground">
+                    {year}
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-xs font-medium tracking-wider text-muted-foreground">
+                    دسته‌بندی
+                  </div>
+                  <div className="text-sm font-medium text-foreground">
+                    {category}
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-xs font-medium tracking-wider text-muted-foreground">
+                    مشتری
+                  </div>
+                  <div className="text-sm font-medium text-foreground">
+                    {client}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-24">
+            <div className="aspect-[3/2] overflow-hidden bg-muted">
+              <img
+                src={imageSrc}
+                alt={imageAlt}
+                className="h-full w-full object-cover"
+              />
+            </div>
+            {imageCaption && (
+              <div className="mt-4 text-start text-xs font-medium tracking-wider text-muted-foreground">
+                {imageCaption}
+              </div>
+            )}
+          </div>
+
+          <div className="grid grid-cols-12 gap-8">
+            <div className="col-span-12 text-start md:col-span-3">
+              <h2 className="text-xs font-medium tracking-wider text-foreground">
+                {overviewHeading}
+              </h2>
+            </div>
+            <div className="col-span-12 text-start md:col-span-9">
+              <div className="space-y-8">
+                <h3 className="text-xl leading-relaxed font-light text-foreground md:text-2xl">
+                  {mainDescription}
+                </h3>
+                <p className="text-base leading-relaxed text-muted-foreground">
+                  {detailDescription}
+                </p>
+                <div className="pt-4">
+                  <Button variant="outline" className="group gap-2">
+                    {buttonText}
+                    <ArrowRight className="size-4 transition-transform rtl:rotate-180" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project2b };
diff --git a/blocks/project2c.tsx b/blocks/project2c.tsx
new file mode 100644
index 0000000..b89f993
--- /dev/null
+++ b/blocks/project2c.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project2cProps {
+  title: string;
+  title2?: string;
+  year: string;
+  category: string;
+  client: string;
+  imageSrc: string;
+  imageAlt: string;
+  imageCaption?: string;
+  overviewHeading: string;
+  mainDescription: string;
+  detailDescription: string;
+  buttonText: string;
+  className?: string;
+}
+
+const Project2c = ({
+  title = "دیجیتال",
+  title2 = "تیم",
+  year = "«۲۲۴»",
+  category = "«دیزاین سیستم»",
+  client = "«استودیو محصول»",
+  imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
+  imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
+  imageCaption = "نمای داشبورد فروش با نمودارهای KPI و خط لوله معاملات",
+  overviewHeading = "مرور پروژه",
+  mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
+  detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
+  buttonText = "تماس با ما",
+  className,
+}: Project2cProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto px-6 py-16 lg:px-8">
+        <div className="mb-20">
+          <div className="mb-16 text-start">
+            <div className="mb-6 flex items-center gap-4">
+              <div className="h-2 w-2 bg-foreground"></div>
+              <span className="text-sm font-medium text-muted-foreground">
+                نمایش پروژه
+              </span>
+            </div>
+            <h1 className="text-6xl leading-[0.85] font-light tracking-tight text-foreground md:text-8xl lg:text-9xl">
+              {title}
+              {title2 && (
+                <>
+                  <br />
+                  {title2}
+                </>
+              )}
+            </h1>
+          </div>
+
+          <div className="grid grid-cols-1 gap-8 text-start md:grid-cols-3">
+            <div className="group">
+              <div className="h-px w-full bg-border"></div>
+              <div className="mt-4 text-sm font-medium text-muted-foreground">
+                سال
+              </div>
+              <div className="mt-1 text-lg text-foreground">{year}</div>
+            </div>
+            <div className="group">
+              <div className="h-px w-full bg-border"></div>
+              <div className="mt-4 text-sm font-medium text-muted-foreground">
+                دسته‌بندی
+              </div>
+              <div className="mt-1 text-lg text-foreground">{category}</div>
+            </div>
+            <div className="group">
+              <div className="h-px w-full bg-border"></div>
+              <div className="mt-4 text-sm font-medium text-muted-foreground">
+                مشتری
+              </div>
+              <div className="mt-1 text-lg text-foreground">{client}</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-20">
+          <div className="aspect-[16/9] overflow-hidden">
+            <img
+              src={imageSrc}
+              alt={imageAlt}
+              className="h-full w-full object-cover"
+            />
+          </div>
+          {imageCaption && (
+            <div className="mt-6 text-start">
+              <p className="text-sm font-medium text-muted-foreground">
+                {imageCaption}
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-16">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:gap-16">
+            <div className="mb-8 text-start lg:mb-0 lg:w-1/3">
+              <div className="sticky top-8">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="h-3 w-3 bg-foreground"></div>
+                  <h2 className="text-lg font-medium text-foreground">
+                    {overviewHeading}
+                  </h2>
+                </div>
+              </div>
+            </div>
+
+            <div className="text-start lg:w-2/3">
+              <div className="space-y-12">
+                <div className="relative">
+                  <h3 className="text-3xl leading-tight font-light text-foreground md:text-4xl">
+                    {mainDescription}
+                  </h3>
+                </div>
+
+                <div>
+                  <p className="text-lg leading-relaxed text-muted-foreground">
+                    {detailDescription}
+                  </p>
+                </div>
+
+                <div className="flex justify-start">
+                  <Button variant="outline" className="group gap-2">
+                    {buttonText}
+                    <ArrowRight className="size-4 transition-transform rtl:rotate-180" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project2c };
diff --git a/blocks/project2d.tsx b/blocks/project2d.tsx
new file mode 100644
index 0000000..0f908b9
--- /dev/null
+++ b/blocks/project2d.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project2dProps {
+  title: string;
+  title2?: string;
+  year: string;
+  category: string;
+  client: string;
+  imageSrc: string;
+  imageAlt: string;
+  imageCaption?: string;
+  overviewHeading: string;
+  mainDescription: string;
+  detailDescription: string;
+  buttonText: string;
+  className?: string;
+}
+
+const Project2d = ({
+  title = "دیجیتال",
+  title2 = "تیم",
+  year = "«۲۲۴»",
+  category = "«دیزاین سیستم»",
+  client = "«استودیو محصول»",
+  imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
+  imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
+  imageCaption = "نمای داشبورد فروش با نمودارهای KPI و خط لوله معاملات",
+  overviewHeading = "مرور پروژه",
+  mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
+  detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
+  buttonText = "تماس با ما",
+  className,
+}: Project2dProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container mx-auto px-6 py-20 lg:px-12">
+        <div className="mb-40">
+          <div className="grid grid-cols-12 gap-8 lg:gap-16">
+            <div className="col-span-12 text-start lg:col-span-7">
+              <div className="mb-12">
+                <div className="mb-6 inline-flex items-center gap-4">
+                  <div className="h-px w-16 bg-foreground"></div>
+                  <span className="text-sm font-medium tracking-widest text-muted-foreground">
+                    پروژه
+                  </span>
+                </div>
+                <h1 className="text-5xl leading-[0.95] font-light tracking-tight text-foreground md:text-7xl lg:text-8xl xl:text-9xl">
+                  {title}
+                  {title2 && (
+                    <>
+                      <br />
+                      {title2}
+                    </>
+                  )}
+                </h1>
+              </div>
+            </div>
+
+            <div className="col-span-12 lg:col-span-5">
+              <div className="h-full lg:pt-32">
+                <div className="space-y-8">
+                  <div className="rounded-lg bg-muted/50 p-8">
+                    <div className="grid grid-cols-1 gap-6 text-start">
+                      <div className="flex items-center justify-between border-b border-border pb-4">
+                        <span className="text-sm font-medium text-muted-foreground">
+                          سال
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {year}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between border-b border-border pb-4">
+                        <span className="text-sm font-medium text-muted-foreground">
+                          دسته‌بندی
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {category}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-muted-foreground">
+                          مشتری
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {client}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-32">
+          <div className="relative">
+            <div className="aspect-[5/3] overflow-hidden rounded-2xl">
+              <img
+                src={imageSrc}
+                alt={imageAlt}
+                className="h-full w-full object-cover"
+              />
+            </div>
+            {imageCaption && (
+              <div className="absolute -end-4 bottom-8 max-w-xs rounded-lg bg-background/95 p-4 lg:-end-8">
+                <p className="text-start text-sm font-medium text-muted-foreground">
+                  {imageCaption}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-12 gap-8 lg:gap-16">
+          <div className="col-span-12 text-start lg:col-span-4">
+            <div className="sticky top-8">
+              <h2 className="mb-6 text-sm font-medium tracking-widest text-muted-foreground">
+                {overviewHeading}
+              </h2>
+              <div className="h-px w-12 bg-foreground"></div>
+            </div>
+          </div>
+
+          <div className="col-span-12 text-start lg:col-span-8">
+            <div className="space-y-12">
+              <h3 className="text-3xl leading-relaxed font-light text-foreground md:text-4xl">
+                {mainDescription}
+              </h3>
+
+              <div className="prose prose-lg max-w-none">
+                <p className="text-lg leading-relaxed text-muted-foreground">
+                  {detailDescription}
+                </p>
+              </div>
+
+              <div className="pt-8">
+                <Button variant="outline" size="lg" className="group gap-2">
+                  {buttonText}
+                  <ArrowRight className="size-4 transition-transform rtl:rotate-180" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project2d };
diff --git a/blocks/project4.tsx b/blocks/project4.tsx
new file mode 100644
index 0000000..f96032b
--- /dev/null
+++ b/blocks/project4.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Project4Props {
+  className?: string;
+}
+
+const Project4 = ({ className }: Project4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="container max-w-4xl">
+        <div className="mb-20 text-start">
+          <div className="mb-12">
+            <p className="text-sm font-semibold tracking-widest text-muted-foreground">طراحی دیزاین سیستم</p>
+            <h1 className="mt-4 text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl">نووا</h1>
+            <p className="mt-6 text-2xl text-muted-foreground md:text-3xl">دیزاین سیستم نهایی بر طراحی تمیز و مینیمال تأکید دارد تا محتوای محصول در مرکز توجه قرار گیرد.</p>
+          </div>
+
+          <div className="flex flex-wrap gap-12 text-sm">
+            <div>
+              <p className="font-semibold tracking-wider text-muted-foreground">
+                مدیر خلاق
+              </p>
+              <p className="mt-2 text-lg font-medium">مایا چن</p>
+            </div>
+            <div>
+              <p className="font-semibold tracking-wider text-muted-foreground">
+                صنعت
+              </p>
+              <p className="mt-2 text-lg font-medium">ابزار توسعه (سامانه ابری)</p>
+            </div>
+            <div>
+              <p className="font-semibold tracking-wider text-muted-foreground">
+                سال
+              </p>
+              <p className="mt-2 text-lg font-medium">۲۲۴</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-20">
+        <div className="container max-w-7xl">
+          <img
+            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-BRVqq2uak4E-unsplash.jpg"
+            alt="طراحی لوگو و سیستم تایپوگرافی"
+            className="w-full rounded-lg"
+          />
+        </div>
+      </div>
+
+      <div className="container max-w-4xl text-start">
+        <div className="prose prose-lg mb-16 max-w-none">
+          <p className="lead">رویکرد ما با تحقیق گسترده کاربر و مصاحبه با تیم‌ها آغاز شد تا نیازهای واقعی محصول را بفهمیم. دیزاین سیستم را طوری تدوین کردیم که نووا را در تقاطع کیفیت حرفه‌ای و سادگی اصیل قرار دهد.</p>
+        </div>
+
+        <div className="mb-16">
+          <div className="prose prose-lg max-w-none">
+            <h2>چالش</h2>
+
+            <p>بازار ابزارهای سامانه ابری پر از محصولاتی است که خود را «سریع» و «ساده» معرفی می‌کنند. نووا باید با تجربه کاربری اصیل و کیفیت واقعی، در عین حال برای تیم‌های روزمره در دسترس بماند و از جمع متمایز شود.</p>
+
+            <h3>تمایز در بازار</h3>
+            <p>با توسعه آگاهانه محصول و یک دیزاین سیستم هدفمند، نووا امروز به‌عنوان مرجعی معتبر در فضای ابزارهای توسعه ایستاده و پیوندی پایدار با کاربران حرفه‌ای می‌سازد.</p>
+
+            <h3>دسترس‌پذیری (a11y) ممتاز</h3>
+            <p>تم و توکن‌های رنگ تمایزدهنده کلیدی محصول شد؛ رویکرد مینیمال اجازه داد محتوای داشبورد بدرخشد و در عین حال حس حرفه‌ای بودن حفظ شود.</p>
+
+            <div className="not-prose -mx-8 my-12 sm:-mx-16 lg:-mx-32">
+              <img
+                src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-jcHO600npH8-unsplash.jpg"
+                alt="مجموعه‌ای رنگارنگ از کامپوننت‌های آماده داشبورد"
+                className="w-full rounded-lg"
+              />
+              <p className="mt-4 text-center text-sm text-muted-foreground italic">محصول باید هم آن‌قدر حرفه‌ای باشد که اعتماد تیم‌ها را جلب کند، هم برای کاربران تازه‌کار از هر سطحی ساده و در دسترس بماند.</p>
+            </div>
+
+            <h2>فرآیند</h2>
+
+            <p>دیزاین سیستم جدید، نووا را به‌عنوان محصولی حرفه‌ای و در عین حال صمیمی در فضای ابزارهای سامانه ابری جای داد. زیبایی‌شناسی تمیز و کاربرمحور با مخاطب هدف هم‌خوان شد و به ۴۰٪ افزایش در سرعت توسعه و یکپارچه‌سازی‌های قوی منجر شد.</p>
+
+            <h3>روش طراحی ما</h3>
+            <ol>
+              <li>راهنمای دیزاین سیستم و استراتژی عرضه</li>
+              <li>کاوش هویت بصری و پروتوتایپ</li>
+              <li>نمای داشبورد نووا روی دسکتاپ</li>
+              <li>پالت رنگ و توکن‌های طراحی</li>
+              <li>تحقیق کاربر و استراتژی محصول</li>
+            </ol>
+
+            <h2>نتیجه</h2>
+
+            <p>نووا از ما خواست رابطی بسازیم که در بازار رقابتی ابزارهای سامانه ابری متمایزش کند. چالش ما این بود که سرعت، کیفیت تجربه کاربری و حس حرفه‌ای بودن را در هر نقطه از محصول منتقل کنیم.</p>
+
+            <p>با پیام‌های مشابه زیاد در فضای ابزارهای سامانه ابری، باید جایگاهی منحصربه‌فرد پیدا می‌کردیم که سرعت توسعه نووا با بلاک‌های آماده و کیفیت تجربه کاربری‌اش را برجسته کند.</p>
+
+            <p>پالت رنگ زنده نووا به تمایزدهنده کلیدی محصول تبدیل شد و وضوح و سلسله‌مراتب داده را در سراسر داشبورد تقویت کرد.</p>
+
+            <div className="not-prose -mx-8 my-12 sm:-mx-16 lg:-mx-32">
+              <img
+                src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-2tuH5dIqQEc-unsplash.jpg"
+                alt="نمایش دیزاین سیستم نووا"
+                className="w-full rounded-lg"
+              />
+              <p className="mt-4 text-center text-sm text-muted-foreground italic">بازطراحی کامل رابط یک محصول سامانه ابری ممتاز با بلاک‌های آماده ری یو آی، با محوریت سرعت و تجربه کاربری.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project4 };
diff --git a/blocks/project4a.tsx b/blocks/project4a.tsx
new file mode 100644
index 0000000..98270f6
--- /dev/null
+++ b/blocks/project4a.tsx
@@ -0,0 +1,139 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Project4aProps {
+  className?: string;
+}
+
+const Project4a = ({ className }: Project4aProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="container max-w-7xl">
+        <div className="grid grid-cols-1 gap-16 lg:grid-cols-4">
+          <div className="text-start lg:col-span-1">
+            <div className="space-y-8 lg:sticky lg:top-8">
+              <div>
+                <p className="mb-4 text-xs font-semibold tracking-widest text-muted-foreground">طراحی دیزاین سیستم</p>
+                <h1 className="mb-4 text-4xl font-bold">نووا</h1>
+                <p className="leading-relaxed text-muted-foreground">بازطراحی کامل رابط یک محصول سامانه ابری ممتاز با بلاک‌های آماده ری یو آی.</p>
+              </div>
+
+              <div className="space-y-6 border-t pt-8">
+                <div>
+                  <p className="mb-1 text-xs font-semibold tracking-wider text-muted-foreground">
+                    مدیر خلاق
+                  </p>
+                  <p className="font-medium">مایا چن</p>
+                </div>
+                <div>
+                  <p className="mb-1 text-xs font-semibold tracking-wider text-muted-foreground">
+                    صنعت
+                  </p>
+                  <p className="font-medium">ابزار توسعه (سامانه ابری)</p>
+                </div>
+                <div>
+                  <p className="mb-1 text-xs font-semibold tracking-wider text-muted-foreground">
+                    سال
+                  </p>
+                  <p className="font-medium">۲۲۴</p>
+                </div>
+              </div>
+
+              <nav className="border-t pt-8">
+                <p className="mb-4 text-xs font-semibold tracking-wider text-muted-foreground">
+                  بخش‌ها
+                </p>
+                <div className="space-y-2">
+                  <a
+                    href="#challenge"
+                    className="block text-sm transition-colors hover:text-primary"
+                  >
+                    چالش
+                  </a>
+                  <a
+                    href="#process"
+                    className="block text-sm transition-colors hover:text-primary"
+                  >
+                    فرآیند
+                  </a>
+                  <a
+                    href="#outcome"
+                    className="block text-sm transition-colors hover:text-primary"
+                  >
+                    نتیجه
+                  </a>
+                </div>
+              </nav>
+            </div>
+          </div>
+
+          <div className="text-start lg:col-span-3">
+            <div className="mb-16">
+              <img
+                src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-BRVqq2uak4E-unsplash.jpg"
+                alt="طراحی لوگو و سیستم تایپوگرافی"
+                className="w-full rounded-lg"
+              />
+            </div>
+
+            <div className="prose prose-lg max-w-none">
+              <p className="lead">رویکرد ما با تحقیق گسترده کاربر و مصاحبه با تیم‌ها آغاز شد تا نیازهای واقعی محصول را بفهمیم. دیزاین سیستم را طوری تدوین کردیم که نووا را در تقاطع کیفیت حرفه‌ای و سادگی اصیل قرار دهد.</p>
+
+              <h2 id="challenge">چالش</h2>
+
+              <p>بازار ابزارهای سامانه ابری پر از محصولاتی است که خود را «سریع» و «ساده» معرفی می‌کنند. نووا باید با تجربه کاربری اصیل و کیفیت واقعی، در عین حال برای تیم‌های روزمره در دسترس بماند و از جمع متمایز شود.</p>
+
+              <h3>تمایز در بازار</h3>
+              <p>با توسعه آگاهانه محصول و یک دیزاین سیستم هدفمند، نووا امروز به‌عنوان مرجعی معتبر در فضای ابزارهای توسعه ایستاده و پیوندی پایدار با کاربران حرفه‌ای می‌سازد.</p>
+
+              <h3>دسترس‌پذیری (a11y) ممتاز</h3>
+              <p>تم و توکن‌های رنگ تمایزدهنده کلیدی محصول شد؛ رویکرد مینیمال اجازه داد محتوای داشبورد بدرخشد و در عین حال حس حرفه‌ای بودن حفظ شود.</p>
+
+              <div className="not-prose my-16">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-jcHO600npH8-unsplash.jpg"
+                  alt="مجموعه‌ای رنگارنگ از کامپوننت‌های آماده داشبورد"
+                  className="w-full rounded-lg"
+                />
+                <p className="mt-4 text-center text-sm text-muted-foreground italic">محصول باید هم آن‌قدر حرفه‌ای باشد که اعتماد تیم‌ها را جلب کند، هم برای کاربران تازه‌کار از هر سطحی ساده و در دسترس بماند.</p>
+              </div>
+
+              <h2 id="process">فرآیند</h2>
+
+              <p>دیزاین سیستم جدید، نووا را به‌عنوان محصولی حرفه‌ای و در عین حال صمیمی در فضای ابزارهای سامانه ابری جای داد. زیبایی‌شناسی تمیز و کاربرمحور با مخاطب هدف هم‌خوان شد و به ۴۰٪ افزایش در سرعت توسعه و یکپارچه‌سازی‌های قوی منجر شد.</p>
+
+              <h3>روش طراحی ما</h3>
+              <ol>
+                <li>راهنمای دیزاین سیستم و استراتژی عرضه</li>
+                <li>کاوش هویت بصری و پروتوتایپ</li>
+                <li>نمای داشبورد نووا روی دسکتاپ</li>
+                <li>پالت رنگ و توکن‌های طراحی</li>
+                <li>تحقیق کاربر و استراتژی محصول</li>
+              </ol>
+
+              <h2 id="outcome">نتیجه</h2>
+
+              <p>نووا از ما خواست رابطی بسازیم که در بازار رقابتی ابزارهای سامانه ابری متمایزش کند. چالش ما این بود که سرعت، کیفیت تجربه کاربری و حس حرفه‌ای بودن را در هر نقطه از محصول منتقل کنیم.</p>
+
+              <p>با پیام‌های مشابه زیاد در فضای ابزارهای سامانه ابری، باید جایگاهی منحصربه‌فرد پیدا می‌کردیم که سرعت توسعه نووا با بلاک‌های آماده و کیفیت تجربه کاربری‌اش را برجسته کند.</p>
+
+              <p>پالت رنگ زنده نووا به تمایزدهنده کلیدی محصول تبدیل شد و وضوح و سلسله‌مراتب داده را در سراسر داشبورد تقویت کرد.</p>
+
+              <div className="not-prose my-16">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-2tuH5dIqQEc-unsplash.jpg"
+                  alt="نمایش دیزاین سیستم نووا"
+                  className="w-full rounded-lg"
+                />
+                <p className="mt-4 text-center text-sm text-muted-foreground italic">دیزاین سیستم نهایی بر طراحی تمیز و مینیمال تأکید دارد تا محتوای محصول در مرکز توجه قرار گیرد.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project4a };
diff --git a/blocks/project4b.tsx b/blocks/project4b.tsx
new file mode 100644
index 0000000..35358fb
--- /dev/null
+++ b/blocks/project4b.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Project4bProps {
+  className?: string;
+}
+
+const Project4b = ({ className }: Project4bProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="container mb-20 max-w-6xl">
+        <div className="text-center">
+          <p className="mb-4 text-sm font-semibold tracking-widest text-muted-foreground">طراحی دیزاین سیستم</p>
+          <h1 className="mb-6 text-5xl font-bold md:text-6xl lg:text-7xl">نووا</h1>
+          <p className="mx-auto max-w-3xl text-xl leading-relaxed text-muted-foreground md:text-2xl">دیزاین سیستم نهایی بر طراحی تمیز و مینیمال تأکید دارد تا محتوای محصول در مرکز توجه قرار گیرد.</p>
+
+          <div className="mt-12 flex justify-center gap-12 text-sm">
+            <div>
+              <p className="mb-1 font-semibold tracking-wider text-muted-foreground">
+                مدیر خلاق
+              </p>
+              <p className="font-medium">مایا چن</p>
+            </div>
+            <div>
+              <p className="mb-1 font-semibold tracking-wider text-muted-foreground">
+                صنعت
+              </p>
+              <p className="font-medium">فرآیند طراحی نووا</p>
+            </div>
+            <div>
+              <p className="mb-1 font-semibold tracking-wider text-muted-foreground">
+                سال
+              </p>
+              <p className="font-medium">۲۲۴</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-20">
+        <div className="container max-w-7xl">
+          <img
+            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-BRVqq2uak4E-unsplash.jpg"
+            alt="طراحی لوگو و سیستم تایپوگرافی"
+            className="w-full rounded-lg"
+          />
+        </div>
+      </div>
+
+      <div className="container mb-20 max-w-4xl">
+        <div className="prose prose-lg mb-16 max-w-none text-center">
+          <p className="lead">رویکرد ما با تحقیق گسترده کاربر و مصاحبه با تیم‌ها آغاز شد تا نیازهای واقعی محصول را بفهمیم. دیزاین سیستم را طوری تدوین کردیم که نووا را در تقاطع کیفیت حرفه‌ای و سادگی اصیل قرار دهد.</p>
+        </div>
+        <div className="container max-w-5xl">
+          <img
+            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-3XSkkuic3Pg-unsplash.jpg"
+            alt="ابزار توسعه (سامانه ابری)"
+            className="w-full rounded-lg"
+          />
+        </div>
+      </div>
+
+      <div className="container mb-20 max-w-4xl text-start">
+        <div className="prose prose-lg mb-16 max-w-none">
+          <h2>چالش</h2>
+
+          <p>بازار ابزارهای سامانه ابری پر از محصولاتی است که خود را «سریع» و «ساده» معرفی می‌کنند. نووا باید با تجربه کاربری اصیل و کیفیت واقعی، در عین حال برای تیم‌های روزمره در دسترس بماند و از جمع متمایز شود.</p>
+
+          <h3>تمایز در بازار</h3>
+          <p>با توسعه آگاهانه محصول و یک دیزاین سیستم هدفمند، نووا امروز به‌عنوان مرجعی معتبر در فضای ابزارهای توسعه ایستاده و پیوندی پایدار با کاربران حرفه‌ای می‌سازد.</p>
+
+          <h3>دسترس‌پذیری (a11y) ممتاز</h3>
+          <p>تم و توکن‌های رنگ تمایزدهنده کلیدی محصول شد؛ رویکرد مینیمال اجازه داد محتوای داشبورد بدرخشد و در عین حال حس حرفه‌ای بودن حفظ شود.</p>
+        </div>
+
+        <div className="container max-w-5xl">
+          <img
+            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-jcHO600npH8-unsplash.jpg"
+            alt="مجموعه‌ای رنگارنگ از کامپوننت‌های آماده داشبورد"
+            className="w-full rounded-lg"
+          />
+          <p className="mt-4 text-center text-sm text-muted-foreground italic">محصول باید هم آن‌قدر حرفه‌ای باشد که اعتماد تیم‌ها را جلب کند، هم برای کاربران تازه‌کار از هر سطحی ساده و در دسترس بماند.</p>
+        </div>
+      </div>
+
+      <div className="container mb-20 max-w-4xl text-start">
+        <div className="prose prose-lg mb-16 max-w-none">
+          <h2>فرآیند</h2>
+
+          <p>دیزاین سیستم جدید، نووا را به‌عنوان محصولی حرفه‌ای و در عین حال صمیمی در فضای ابزارهای سامانه ابری جای داد. زیبایی‌شناسی تمیز و کاربرمحور با مخاطب هدف هم‌خوان شد و به ۴۰٪ افزایش در سرعت توسعه و یکپارچه‌سازی‌های قوی منجر شد.</p>
+
+          <h3>روش طراحی ما</h3>
+          <ol>
+            <li>راهنمای دیزاین سیستم و استراتژی عرضه</li>
+            <li>کاوش هویت بصری و پروتوتایپ</li>
+            <li>نمای داشبورد نووا روی دسکتاپ</li>
+            <li>پالت رنگ و توکن‌های طراحی</li>
+            <li>تحقیق کاربر و استراتژی محصول</li>
+          </ol>
+        </div>
+
+        <div className="container max-w-5xl">
+          <img
+            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-dxIzIveffLE-unsplash.jpg"
+            alt="کامپوننت‌های پایه نووا"
+            className="w-full rounded-lg"
+          />
+        </div>
+      </div>
+
+      <div className="container mb-20 max-w-4xl text-start">
+        <div className="prose prose-lg mb-16 max-w-none">
+          <h2>نتیجه</h2>
+
+          <p>نووا از ما خواست رابطی بسازیم که در بازار رقابتی ابزارهای سامانه ابری متمایزش کند. چالش ما این بود که سرعت، کیفیت تجربه کاربری و حس حرفه‌ای بودن را در هر نقطه از محصول منتقل کنیم.</p>
+
+          <p>با پیام‌های مشابه زیاد در فضای ابزارهای سامانه ابری، باید جایگاهی منحصربه‌فرد پیدا می‌کردیم که سرعت توسعه نووا با بلاک‌های آماده و کیفیت تجربه کاربری‌اش را برجسته کند.</p>
+
+          <p>پالت رنگ زنده نووا به تمایزدهنده کلیدی محصول تبدیل شد و وضوح و سلسله‌مراتب داده را در سراسر داشبورد تقویت کرد.</p>
+        </div>
+
+        <div className="container max-w-5xl">
+          <img
+            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-2tuH5dIqQEc-unsplash.jpg"
+            alt="نمایش دیزاین سیستم نووا"
+            className="w-full rounded-lg"
+          />
+          <p className="mt-4 text-center text-sm text-muted-foreground italic">بازطراحی کامل رابط یک محصول سامانه ابری ممتاز با بلاک‌های آماده ری یو آی، با محوریت سرعت و تجربه کاربری.</p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project4b };
diff --git a/blocks/project4c.tsx b/blocks/project4c.tsx
new file mode 100644
index 0000000..4224159
--- /dev/null
+++ b/blocks/project4c.tsx
@@ -0,0 +1,151 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Project4cProps {
+  className?: string;
+}
+
+const Project4c = ({ className }: Project4cProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="relative mb-20">
+        <div className="relative h-screen max-h-[80vh] overflow-hidden">
+          <img
+            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-BRVqq2uak4E-unsplash.jpg"
+            alt="طراحی لوگو و سیستم تایپوگرافی"
+            className="h-full w-full object-cover"
+          />
+          <div className="absolute inset-0 bg-black/40"></div>
+          <div className="absolute inset-0 flex items-center justify-center text-center text-white">
+            <div className="max-w-4xl px-8">
+              <p className="mb-4 text-sm font-semibold tracking-widest opacity-90">طراحی دیزاین سیستم</p>
+              <h1 className="mb-6 text-6xl font-bold md:text-8xl lg:text-9xl">جهت طراحی</h1>
+              <p className="mx-auto max-w-3xl text-xl leading-relaxed opacity-90 md:text-2xl">بازطراحی کامل رابط یک محصول سامانه ابری ممتاز با بلاک‌های آماده ری یو آی، با محوریت سرعت و تجربه کاربری.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container max-w-4xl">
+        <div className="mb-16 border-b pb-12 text-start">
+          <div className="flex flex-wrap items-start justify-between gap-8">
+            <div className="space-y-6">
+              <div>
+                <p className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground">نتایج و دستاوردها</p>
+                <p className="text-lg font-medium">مایا چن</p>
+              </div>
+              <div>
+                <p className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground">
+                  صنعت و دسته‌بندی
+                </p>
+                <p className="text-lg font-medium">پالت رنگ و توکن‌های طراحی</p>
+              </div>
+              <div>
+                <p className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground">
+                  سال پروژه
+                </p>
+                <p className="text-lg font-medium">۲۲۴</p>
+              </div>
+            </div>
+            <div className="text-end">
+              <p className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground">
+                زمان مطالعه
+              </p>
+              <p className="text-lg font-medium">۵ دقیقه</p>
+            </div>
+          </div>
+        </div>
+
+        <article className="prose prose-lg prose-gray max-w-none text-start">
+          <p className="lead text-2xl leading-relaxed">نووا از ما خواست رابطی بسازیم که در بازار رقابتی ابزارهای سامانه ابری متمایزش کند. چالش ما این بود که سرعت، کیفیت تجربه کاربری و حس حرفه‌ای بودن را در هر نقطه از محصول منتقل کنیم.</p>
+
+          <h2>چالش</h2>
+
+          <p>بازار ابزارهای سامانه ابری پر از محصولاتی است که خود را «سریع» و «ساده» معرفی می‌کنند. نووا باید با تجربه کاربری اصیل و کیفیت واقعی، در عین حال برای تیم‌های روزمره در دسترس بماند و از جمع متمایز شود.</p>
+
+          <blockquote>
+            <p>«باید رابطی می‌ساختیم که با بلاک‌های آماده ری یو آی سریع پیاده شود و در عین حال هویت بصری منحصربه‌فرد نووا را حفظ کند.»</p>
+          </blockquote>
+
+          <p>دیزاین سیستم جدید، نووا را به‌عنوان محصولی حرفه‌ای و در عین حال صمیمی در فضای ابزارهای سامانه ابری جای داد. زیبایی‌شناسی تمیز و کاربرمحور با مخاطب هدف هم‌خوان شد و اثری تجاری قابل اندازه‌گیری به‌جا گذاشت.</p>
+
+          <figure className="not-prose -mx-8 my-16 sm:-mx-16">
+            <img
+              src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-3XSkkuic3Pg-unsplash.jpg"
+              alt="بازخورد مثبت کاربران"
+              className="w-full rounded-lg"
+            />
+            <figcaption className="mt-4 px-8 text-center text-sm text-muted-foreground italic sm:px-16">کامپوننت‌های پایه و توکن‌های طراحی، شالوده تجربه اصیل نووا را شکل می‌دهند.</figcaption>
+          </figure>
+
+          <h2>رویکرد راهبردی</h2>
+
+          <p>فرآیند ما با تحقیق گسترده کاربر و مصاحبه با تیم‌ها آغاز شد تا نیازهای محصول را بفهمیم. دیزاین سیستم را طوری تدوین کردیم که نووا را در تقاطع کیفیت حرفه‌ای و سادگی اصیل قرار دهد.</p>
+
+          <h3>روش طراحی</h3>
+
+          <p>رویکردی نظام‌مند پیش گرفتیم تا هر نقطه تماس محصول، ارزش‌ها و جایگاه نووا را تقویت کند:</p>
+
+          <ol>
+            <li>
+              <strong> ساخت چند نسخه اولیه از بلاک‌ها</strong> درک نیازهای کاربر و جریان‌های محصول</li>
+            <li>
+              <strong>کاوش هویت بصری و پروتوتایپ</strong>کامپوننت‌های پایه نووا</li>
+            <li>
+              <strong>نمای داشبورد نووا روی دسکتاپ</strong>نمایش دیزاین سیستم نووا</li>
+            <li>
+              <strong> ایجاد دیزاین سیستم منسجم</strong> تضمین پیاده‌سازی یکپارچه</li>
+            <li>
+              <strong>تحقیق کاربر و استراتژی محصول</strong>سامانه ابری  دیزاین سیستم</li>
+          </ol>
+
+          <div className="not-prose my-16 grid gap-8 sm:-mx-8">
+            <img
+              src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-dxIzIveffLE-unsplash.jpg"
+              alt="فرآیند طراحی نووا"
+              className="w-full rounded-lg"
+            />
+            <img
+              src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-gf8m6ffBG5s-unsplash.jpg"
+              alt="توسعه محصول نووا"
+              className="w-full rounded-lg"
+            />
+          </div>
+
+          <h2>افزایش سرعت توسعه</h2>
+
+          <p>با ابزارهای مشابه زیاد در بازار، محصول باید هم آن‌قدر حرفه‌ای باشد که اعتماد تیم‌ها را جلب کند، هم برای کاربران تازه‌کار از هر سطحی ساده و در دسترس بماند.</p>
+
+          <div className="not-prose my-12 grid grid-cols-3 gap-8 rounded-lg bg-muted p-8 text-center">
+            <div>
+              <div className="text-3xl font-bold">۴۰٪</div>
+              <div className="text-sm text-muted-foreground">یکپارچه‌سازی جدید فروشگاهی</div>
+            </div>
+            <div>
+              <div className="text-3xl font-bold">۱۵+</div>
+              <div className="text-sm text-muted-foreground">راهنمای دیزاین سیستم و استراتژی عرضه</div>
+            </div>
+            <div>
+              <div className="text-3xl font-bold">۸۵٪</div>
+              <div className="text-sm text-muted-foreground"> ساخت کامپوننت‌های پایه با ری یو آی</div>
+            </div>
+          </div>
+
+          <p>تم و توکن‌های رنگ تمایزدهنده کلیدی محصول شد؛ رویکرد مینیمال اجازه داد محتوای داشبورد بدرخشد و در عین حال حس حرفه‌ای بودن حفظ شود.</p>
+
+          <figure className="not-prose -mx-8 my-16 sm:-mx-16">
+            <img
+              src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-2tuH5dIqQEc-unsplash.jpg"
+              alt="نووا"
+              className="w-full rounded-lg"
+            />
+            <figcaption className="mt-4 px-8 text-center text-sm text-muted-foreground italic sm:px-16">دیزاین سیستم نهایی بر طراحی تمیز و مینیمال تأکید دارد تا محتوای محصول در مرکز توجه قرار گیرد و تجربه‌ای منسجم و به‌یادماندنی خلق شود.</figcaption>
+          </figure>
+        </article>
+      </div>
+    </section>
+  );
+};
+
+export { Project4c };
diff --git a/blocks/project5.tsx b/blocks/project5.tsx
new file mode 100644
index 0000000..64ae945
--- /dev/null
+++ b/blocks/project5.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project5Props {
+  className?: string;
+}
+
+const Project5 = ({ className }: Project5Props) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6 },
+  };
+
+  const staggerContainer = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
+      <div className="container space-y-8">
+        <motion.header
+          className="pb-8 text-start md:pb-12"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <div className="flex flex-col gap-y-12 lg:flex-row lg:items-start lg:justify-between">
+            <motion.div variants={fadeInUp} className="flex-1">
+              <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl">چشم‌انداز طراحی</h1>
+              <motion.p
+                variants={fadeInUp}
+                className="mt-6 max-w-xl text-lg leading-relaxed font-medium text-muted-foreground"
+              >کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش می‌کشد و گفت‌وگویی میان کاربر و سادگی خام رابط می‌آفریند.</motion.p>
+            </motion.div>
+
+            <motion.div
+              variants={fadeInUp}
+              className="w-full max-w-md space-y-4"
+            >
+              <div className="flex items-center justify-between border-b border-border pb-3">
+                <span className="font-medium text-muted-foreground">
+                  استودیو
+                </span>
+                <span className="font-medium text-foreground">نکسوس لبز</span>
+              </div>
+              <div className="flex items-center justify-between border-b border-border pb-3">
+                <span className="font-medium text-muted-foreground">دمو</span>
+                <span className="font-medium text-foreground">مهندسی فرانت‌اند</span>
+              </div>
+              <div className="flex items-center justify-between border-b border-border pb-3">
+                <span className="font-medium text-muted-foreground">سال</span>
+                <span className="font-medium text-foreground">۲۲۴</span>
+              </div>
+              <div className="flex items-center justify-between border-b border-border pb-3">
+                <span className="font-medium text-muted-foreground">
+                  دسته‌بندی
+                </span>
+                <span className="font-medium text-foreground">نمایش</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-muted-foreground">نمایش زنده آنلاین</span>
+                <Button
+                  variant="link"
+                  className="h-auto p-0 font-medium text-foreground hover:text-primary"
+                >
+                  مشاهده جزئیات
+                </Button>
+              </div>
+            </motion.div>
+          </div>
+        </motion.header>
+
+        <motion.main
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <motion.div
+            variants={fadeInUp}
+            className="relative aspect-video overflow-hidden rounded-lg bg-muted/30"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/photos/nubelson-fernandes-xxa7qYObMrI-unsplash.jpg"
+              alt="نمایش کتابخانه کامپوننت مدرن  ارائه معاصر یک دیزاین سیستم متن‌باز"
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-background/5" />
+          </motion.div>
+        </motion.main>
+
+        <motion.div
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+          className="space-y-8"
+        >
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-1 gap-8 md:grid-cols-2"
+          >
+            <div className="relative aspect-video overflow-hidden rounded-lg bg-muted/30">
+              <img
+                src="/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg"
+                alt="پژواک  کتابخانه کامپوننت متن‌باز مبتنی بر ری یو آی"
+                className="h-full w-full object-cover"
+              />
+              <div className="absolute inset-0 bg-background/5" />
+            </div>
+            <div className="relative aspect-video overflow-hidden rounded-lg bg-muted/30">
+              <img
+                src="/block-media/shadcnblocks/block/photos/marvin-meyer-SYTO3xs06fU-unsplash.jpg"
+                alt="نمای جزئی از یک کامپوننت  ترکیب کد و طراحی"
+                className="h-full w-full object-cover"
+              />
+              <div className="absolute inset-0 bg-background/5" />
+            </div>
+          </motion.div>
+        </motion.div>
+
+        <motion.div
+          className="py-12 md:py-16"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <div className="flex flex-col gap-y-8 text-start md:flex-row md:items-start md:justify-between">
+            <motion.div variants={fadeInUp}>
+              <h2 className="text-lg font-semibold tracking-wide text-foreground">پژواک  کتابخانه کامپوننت</h2>
+            </motion.div>
+            <motion.div variants={fadeInUp} className="max-w-2xl">
+              <p className="text-lg leading-relaxed font-medium text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد، ساختار بلاک‌ها و رفتار حالت‌ها که فرم نهایی رابط را تعریف می‌کنند، استخراج کرده‌ایم. این نمایش، توسعه‌دهنده را دعوت می‌کند رابطه خود با بلاک‌های رابط را از منظری تازه ببیند.</p>
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Project5 };
diff --git a/blocks/project5a.tsx b/blocks/project5a.tsx
new file mode 100644
index 0000000..9bd2d25
--- /dev/null
+++ b/blocks/project5a.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project5aProps {
+  className?: string;
+}
+
+const Project5a = ({ className }: Project5aProps) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6 },
+  };
+
+  const staggerContainer = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
+      <div className="container">
+        <motion.header
+          className="pb-12 text-start md:pb-16"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+            <motion.div variants={fadeInUp} className="lg:col-span-2">
+              <div className="space-y-6">
+                <div className="flex items-center gap-3">
+                  <div className="h-0.5 w-8 bg-primary"></div>
+                  <span className="text-sm font-medium tracking-wider text-muted-foreground">نمایش زنده آنلاین</span>
+                </div>
+                <h1 className="text-5xl font-bold tracking-tight text-foreground md:text-6xl lg:text-7xl">فرآیند طراحی</h1>
+                <p className="max-w-2xl text-lg leading-relaxed text-muted-foreground">کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش می‌کشد.</p>
+              </div>
+            </motion.div>
+
+            <motion.div
+              variants={fadeInUp}
+              className="flex h-full flex-col justify-end"
+            >
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-sm text-muted-foreground">دمو</span>
+                  <span className="text-sm font-medium text-foreground">معرفی نکسوس لبز</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm text-muted-foreground">سال</span>
+                  <span className="text-sm font-medium text-foreground">
+                    ۲۲۴
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm text-muted-foreground">رسانه</span>
+                  <span className="text-sm font-medium text-foreground">چشم‌انداز طراحی</span>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </motion.header>
+
+        <motion.main
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+          className="space-y-12 md:space-y-16"
+        >
+          <motion.div variants={fadeInUp}>
+            <div className="relative aspect-[16/9] overflow-hidden rounded-lg bg-muted/30">
+              <img
+                src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-eHD8Y1Znfpk-unsplash.jpg"
+                alt="نمایش کتابخانه کامپوننت مدرن  ارائه معاصر یک دیزاین سیستم متن‌باز"
+                className="h-full w-full object-cover"
+              />
+              <div className="absolute inset-0 bg-background/5" />
+            </div>
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-1 gap-12 text-start lg:grid-cols-2"
+          >
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <div className="flex items-center gap-3">
+                  <div className="h-0.5 w-6 bg-primary"></div>
+                  <span className="text-sm font-medium tracking-wider text-muted-foreground">مهندسی فرانت‌اند</span>
+                </div>
+                <h2 className="text-3xl font-bold tracking-tight text-foreground lg:text-4xl">پژواک  کتابخانه کامپوننت</h2>
+              </div>
+              <div className="space-y-4">
+                <p className="leading-relaxed text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد، ساختار بلاک‌ها و رفتار حالت‌ها را استخراج کرده‌ایم.</p>
+                <p className="leading-relaxed text-muted-foreground">این نمایش، توسعه‌دهنده را دعوت می‌کند رابطه خود با بلاک‌های رابط را از نو ببیند و گفت‌وگویی میان کاربر و سادگی خام کامپوننت‌ها و الگوهای رابط می‌آفریند.</p>
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              <div className="relative aspect-square overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg"
+                  alt="پژواک  کتابخانه کامپوننت متن‌باز مبتنی بر ری یو آی"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+              <div className="relative aspect-square overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/zhao-yangyang-4uMRVFnJcP4-unsplash.jpg"
+                  alt="نمای جزئی از یک کامپوننت  ترکیب کد و طراحی"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+            </div>
+          </motion.div>
+        </motion.main>
+      </div>
+    </section>
+  );
+};
+
+export { Project5a };
diff --git a/blocks/project5b.tsx b/blocks/project5b.tsx
new file mode 100644
index 0000000..6e727fb
--- /dev/null
+++ b/blocks/project5b.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project5bProps {
+  className?: string;
+}
+
+const Project5b = ({ className }: Project5bProps) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6 },
+  };
+
+  const staggerContainer = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
+      <div className="container">
+        <motion.header
+          className="pb-16 text-start md:pb-20"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+            <motion.div variants={fadeInUp} className="space-y-6">
+              <div className="flex items-center gap-4">
+                <div className="h-px w-12 bg-foreground"></div>
+                <span className="text-sm font-medium tracking-wider text-muted-foreground">نکسوس لبز</span>
+              </div>
+              <h1 className="text-6xl font-bold tracking-tight text-foreground md:text-7xl lg:text-8xl">
+                پژواک
+                <br />۴۵ بلاک</h1>
+            </motion.div>
+            <div className="flex justify-start pt-16">
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-foreground">جزئیات نمایش</h3>
+                <div className="space-y-2">
+                  <p className="text-sm text-muted-foreground">نمایش زنده آنلاین • ۲۲۴</p>
+                  <p className="text-sm text-muted-foreground">چشم‌انداز طراحی</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.header>
+
+        <motion.main
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+          className="space-y-8 md:space-y-20"
+        >
+          <motion.div variants={fadeInUp} className="relative">
+            <div className="relative aspect-[21/9] overflow-hidden rounded-lg bg-muted/30">
+              <img
+                src="/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg"
+                alt="رابط کاربری، استایل‌دهی مدرن و کتابخانه پایه"
+                className="h-full w-full object-cover"
+              />
+              <div className="absolute inset-0 bg-background/5" />
+            </div>
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-16"
+          >
+            <div className="space-y-6">
+              <div className="relative aspect-square overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/michal-balog-HTNB1UDJ4Hg-unsplash.jpg"
+                  alt="پژواک  نمای اصلی کتابخانه کامپوننت"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              <div className="relative aspect-square overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png"
+                  alt="جزئیات دست‌ساز کامپوننت با میکرواینتراکشن ظریف"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-1 gap-8 text-start md:gap-16 lg:grid-cols-2"
+          >
+            <div className="space-y-8">
+              <div className="space-y-4">
+                <div className="flex items-center gap-4">
+                  <div className="h-px w-16 bg-foreground"></div>
+                  <span className="text-sm font-medium tracking-wider text-muted-foreground">
+                    مفهوم
+                  </span>
+                </div>
+                <h2 className="text-4xl font-bold tracking-tight text-foreground lg:text-5xl">مشخصات فنی</h2>
+              </div>
+              <div className="space-y-6">
+                <p className="text-lg leading-relaxed text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد را استخراج کرده‌ایم.</p>
+                <p className="leading-relaxed text-muted-foreground">این نمایش، توسعه‌دهنده را دعوت می‌کند رابطه خود با بلاک‌های رابط را از نو ببیند و ساختار بلاک‌ها و تعامل حالت‌ها را کاوش کند.</p>
+              </div>
+            </div>
+
+            <div className="space-y-8">
+              <div className="space-y-6">
+                <div className="space-y-4">
+                  <h3 className="text-xl font-semibold text-foreground">فناوری و فرآیند</h3>
+                  <div className="space-y-3">
+                    <div className="flex items-start gap-3">
+                      <div className="mt-2 h-1 w-1 rounded-full bg-foreground"></div>
+                      <p className="text-sm text-muted-foreground">اکوسیستم کامپوننت اوپن‌سورس</p>
+                    </div>
+                    <div className="flex items-start gap-3">
+                      <div className="mt-2 h-1 w-1 rounded-full bg-foreground"></div>
+                      <p className="text-sm text-muted-foreground">نمای جزئی از یک کامپوننت</p>
+                    </div>
+                    <div className="flex items-start gap-3">
+                      <div className="mt-2 h-1 w-1 rounded-full bg-foreground"></div>
+                      <p className="text-sm text-muted-foreground">مهندسی فرانت‌اند معاصر</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <h3 className="text-xl font-semibold text-foreground">۳۲ تم</h3>
+                  <div className="overflow-hidden">
+                    <table className="w-full border-t border-b border-muted-foreground/20">
+                      <tbody>
+                        <tr className="border-b border-muted-foreground/10">
+                          <td className="bg-muted/5 px-4 py-3 text-sm font-medium text-muted-foreground">بلاک‌ها</td>
+                          <td className="px-4 py-3 text-sm text-foreground">۱۸۰ کامپوننت</td>
+                        </tr>
+                        <tr className="border-b border-muted-foreground/10">
+                          <td className="bg-muted/5 px-4 py-3 text-sm font-medium text-muted-foreground">اوپن‌سورس</td>
+                          <td className="px-4 py-3 text-sm text-foreground">کامپوننت‌ها</td>
+                        </tr>
+                        <tr>
+                          <td className="bg-muted/5 px-4 py-3 text-sm font-medium text-muted-foreground">پوشش تست</td>
+                          <td className="px-4 py-3 text-sm text-foreground">نمایش کتابخانه کامپوننت مدرن  نمای جزئی از یک بلاک</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </motion.main>
+      </div>
+    </section>
+  );
+};
+
+export { Project5b };
diff --git a/blocks/project5c.tsx b/blocks/project5c.tsx
new file mode 100644
index 0000000..2719a70
--- /dev/null
+++ b/blocks/project5c.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project5cProps {
+  className?: string;
+}
+
+const Project5c = ({ className }: Project5cProps) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6 },
+  };
+
+  const staggerContainer = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
+      <div className="container">
+        <motion.header
+          className="pb-12 text-start md:pb-16"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
+            <motion.div variants={fadeInUp} className="lg:col-span-2">
+              <h1 className="text-5xl font-bold tracking-tight text-foreground md:text-6xl">چشم‌انداز طراحی</h1>
+              <p className="mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground">کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش می‌کشد و گفت‌وگویی میان کاربر و سادگی خام رابط می‌آفریند.</p>
+            </motion.div>
+
+            <motion.div variants={fadeInUp} className="space-y-4">
+              <div className="grid grid-cols-2 gap-4 bg-muted/50 p-6">
+                <div className="space-y-1">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    استودیو
+                  </p>
+                  <p className="text-sm font-semibold text-foreground">نکسوس لبز</p>
+                </div>
+                <div className="space-y-1">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    سال
+                  </p>
+                  <p className="text-sm font-semibold text-foreground">
+                    ۲۲۴
+                  </p>
+                </div>
+                <div className="space-y-1">
+                  <p className="text-xs font-medium text-muted-foreground">محل دمو</p>
+                  <p className="text-sm font-semibold text-foreground">مهندسی فرانت‌اند</p>
+                </div>
+                <div className="space-y-1">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    رسانه
+                  </p>
+                  <p className="text-sm font-semibold text-foreground">نمایش زنده آنلاین</p>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </motion.header>
+
+        <motion.main
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+          className="space-y-12"
+        >
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-1 gap-6 md:grid-cols-4"
+          >
+            <div className="md:col-span-3">
+              <div className="relative aspect-[16/9] overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/daniel-leone-g30P1zcOzXo-unsplash.jpg"
+                  alt="کامپوننت کارت  نسخه مینیمال"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+            </div>
+            <div className="space-y-6">
+              <div className="relative h-full overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg"
+                  alt="پژواک  نمای اصلی کتابخانه کامپوننت"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+            </div>
+          </motion.div>
+        </motion.main>
+
+        <motion.section
+          className="py-12 md:py-16"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <div className="flex flex-col gap-y-8 text-start md:flex-row md:items-start md:justify-between">
+            <motion.div variants={fadeInUp}>
+              <h2 className="text-lg font-semibold tracking-wide text-foreground">پژواک  کتابخانه کامپوننت</h2>
+            </motion.div>
+            <motion.div variants={fadeInUp} className="max-w-2xl">
+              <p className="text-lg leading-relaxed font-medium text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد، ساختار بلاک‌ها و رفتار حالت‌ها که فرم نهایی رابط را تعریف می‌کنند، استخراج کرده‌ایم. این نمایش، توسعه‌دهنده را دعوت می‌کند رابطه خود با بلاک‌های رابط را از منظری تازه ببیند.</p>
+            </motion.div>
+          </div>
+        </motion.section>
+      </div>
+    </section>
+  );
+};
+
+export { Project5c };
diff --git a/blocks/project5d.tsx b/blocks/project5d.tsx
new file mode 100644
index 0000000..c7a1223
--- /dev/null
+++ b/blocks/project5d.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project5dProps {
+  className?: string;
+}
+
+const Project5d = ({ className }: Project5dProps) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6 },
+  };
+
+  const staggerContainer = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
+      <div className="container max-w-4xl">
+        <motion.header
+          className="pb-16 text-start md:pb-20"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <motion.div variants={fadeInUp} className="space-y-6">
+            <div className="flex items-center gap-3">
+              <div className="h-0.5 w-8 bg-foreground"></div>
+              <span className="text-xs font-medium tracking-widest text-muted-foreground">نکسوس لبز</span>
+            </div>
+            <h1 className="text-4xl font-normal tracking-tight text-foreground md:text-5xl">چشم‌انداز طراحی</h1>
+            <p className="max-w-2xl text-base leading-relaxed text-muted-foreground">کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش می‌کشد.</p>
+          </motion.div>
+        </motion.header>
+
+        <motion.main
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+          className="space-y-12 text-start"
+        >
+          <motion.div
+            variants={fadeInUp}
+            className="relative aspect-[4/3] overflow-hidden bg-muted/30"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg"
+              alt="پژواک  نمای اصلی کتابخانه کامپوننت"
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-background/5" />
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-2 gap-8 md:grid-cols-4"
+          >
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground">دمو</p>
+              <p className="text-sm text-foreground">مشاهده دموی کامل</p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground">سال</p>
+              <p className="text-sm text-foreground">۲۲۴</p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground">
+                رسانه
+              </p>
+              <p className="text-sm text-foreground">مهندسی فرانت‌اند</p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground">
+                وضعیت
+              </p>
+              <p className="text-sm text-foreground">در حال نمایش</p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="relative aspect-[3/2] overflow-hidden bg-muted/30"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg"
+              alt="نمای جزئی از یک کامپوننت  ترکیب کد و طراحی"
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-background/5" />
+          </motion.div>
+
+          <motion.div variants={fadeInUp} className="space-y-6">
+            <h2 className="text-xl font-medium text-foreground">نمایش زنده آنلاین</h2>
+            <p className="leading-relaxed text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد، ساختار بلاک‌ها و رفتار حالت‌ها که فرم نهایی رابط را تعریف می‌کنند، استخراج کرده‌ایم.</p>
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="relative aspect-[16/9] overflow-hidden bg-muted/30"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/photos/christopher-gower-vjMgqUkS8q8-unsplash.jpg"
+              alt="نمایش کتابخانه کامپوننت مدرن  ارائه معاصر یک دیزاین سیستم متن‌باز"
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-background/5" />
+          </motion.div>
+
+          <motion.div variants={fadeInUp} className="pt-8">
+            <Button
+              variant="default"
+              className="w-full bg-foreground py-6 font-medium text-background hover:bg-foreground/90"
+            >پژواک  کتابخانه کامپوننت</Button>
+          </motion.div>
+        </motion.main>
+      </div>
+    </section>
+  );
+};
+
+export { Project5d };
diff --git a/blocks/project5e.tsx b/blocks/project5e.tsx
new file mode 100644
index 0000000..e70188f
--- /dev/null
+++ b/blocks/project5e.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project5eProps {
+  className?: string;
+}
+
+const Project5e = ({ className }: Project5eProps) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6 },
+  };
+
+  const staggerContainer = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw13.jpeg",
+      alt: "داشبورد فروش",
+      title: "داشبورد فروش",
+      description: "نمایش KPIهای درآمد و نرخ تبدیل",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+      alt: "خط لوله معاملات",
+      title: "خط لوله معاملات",
+      description: "مدیریت بصری مراحل فروش",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-g3U7sqtdJ1w-unsplash.jpg",
+      alt: "گزارش عملکرد",
+      title: "گزارش عملکرد",
+      description: "تحلیل ROI کمپین‌های بازاریابی",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
+      alt: "امتیازدهی لید",
+      title: "امتیازدهی لید",
+      description: "شناسایی خودکار لیدهای آماده خرید",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/photos/christin-hume-Hcfwew744z4-unsplash.jpg",
+      alt: "اتوماسیون ایمیل",
+      title: "اتوماسیون ایمیل",
+      description: "جریان‌های ایمیل هدفمند برای هر بخش",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
+      alt: "یکپارچه‌سازی CRM",
+      title: "یکپارچه‌سازی CRM",
+      description: "اتصال به Salesforce و HubSpot",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-u9-yqtr6YrM-unsplash.jpg",
+      alt: "تحلیل مشتری",
+      title: "تحلیل مشتری",
+      description: "بخش‌بندی و پیش‌بینی ریزش",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
+      <div className="container">
+        <motion.header
+          className="pb-16 md:pb-24"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <motion.div variants={fadeInUp} className="space-y-8 text-center">
+            <div className="space-y-4">
+              <div className="flex items-center justify-center gap-4">
+                <div className="h-px w-24 bg-foreground"></div>
+                <span className="text-sm font-medium tracking-wider text-muted-foreground">
+                  CloudStar Analytics
+                </span>
+                <div className="h-px w-24 bg-foreground"></div>
+              </div>
+              <h1 className="text-5xl font-bold tracking-tight text-foreground md:text-6xl lg:text-7xl">
+                پلتفرم تحلیل فروش
+              </h1>
+              <p className="mx-auto max-w-3xl text-lg leading-relaxed text-muted-foreground md:text-xl">
+                مجموعه‌ای از داشبوردها و ابزارهای تحلیلی برای تیم‌های فروش
+                و بازاریابی B2B. داده‌های زنده از CRM، اتوماسیون ایمیل و
+                گزارش‌گیری در یک پلتفرم یکپارچه.
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+              <Button variant="outline" size="lg">
+                درخواست دمو
+              </Button>
+              <div className="text-sm text-muted-foreground">
+                مورد استفاده ۵۰۰+ شرکت B2B • ۲۰۲۴ • SaaS
+              </div>
+            </div>
+          </motion.div>
+        </motion.header>
+
+        <motion.main
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+          className="space-y-16"
+        >
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
+          >
+            {images.map((image, index) => (
+              <motion.div
+                key={index}
+                variants={fadeInUp}
+                className={`group relative overflow-hidden rounded-lg bg-muted/20 ${
+                  index === 0 ? "md:col-span-2 lg:col-span-1" : ""
+                } ${index === 3 ? "lg:col-span-2" : ""} ${
+                  index === 6 ? "md:col-span-2 lg:col-span-1" : ""
+                }`}
+              >
+                <div className="relative aspect-square overflow-hidden">
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="absolute inset-0 size-full min-h-full min-w-full object-cover object-center transition-transform duration-700 group-hover:scale-105"
+                  />
+                  <div className="absolute inset-0 bg-background/0 transition-all duration-300 group-hover:bg-background/10" />
+                </div>
+
+                <div className="absolute inset-x-0 bottom-0 translate-y-full bg-gradient-to-t from-background/90 to-transparent p-6 text-start transition-transform duration-300 group-hover:translate-y-0">
+                  <h3 className="mb-2 text-lg font-semibold text-foreground">
+                    {image.title}
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    {image.description}
+                  </p>
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="mx-auto max-w-4xl space-y-8 text-center"
+          >
+            <div className="space-y-4">
+              <h2 className="text-3xl font-bold text-foreground">
+                قابلیت‌های کلیدی
+              </h2>
+              <p className="text-lg leading-relaxed text-muted-foreground">
+                پلتفرم CloudStar Analytics به تیم‌های فروش کمک می‌کند
+                داده‌های پراکنده را در یک داشبورد یکپارچه ببینند. از
+                امتیازدهی لید تا گزارش ROI کمپین، همه‌چیز در یک نما.
+              </p>
+              <p className="leading-relaxed text-muted-foreground">
+                هر ویجت برای تصمیم‌گیری سریع طراحی شده: خط لوله معاملات،
+                نرخ تبدیل، پیش‌بینی درآمد و هشدارهای خودکار برای لیدهای
+                داغ. یکپارچه با Salesforce، HubSpot و ابزارهای محبوب فروش.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 gap-8 text-center md:grid-cols-3">
+              <div className="space-y-2">
+                <div className="text-2xl font-bold text-foreground">۷</div>
+                <div className="text-sm text-muted-foreground">ماژول تحلیلی</div>
+              </div>
+              <div className="space-y-2">
+                <div className="text-2xl font-bold text-foreground">۵۰۰+</div>
+                <div className="text-sm text-muted-foreground">
+                  شرکت B2B
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="text-2xl font-bold text-foreground">۴۰٪</div>
+                <div className="text-sm text-muted-foreground">افزایش تبدیل</div>
+              </div>
+            </div>
+          </motion.div>
+        </motion.main>
+      </div>
+    </section>
+  );
+};
+
+export { Project5e };
diff --git a/blocks/project5f.tsx b/blocks/project5f.tsx
new file mode 100644
index 0000000..e4e77f1
--- /dev/null
+++ b/blocks/project5f.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project5fProps {
+  className?: string;
+}
+
+const Project5f = ({ className }: Project5fProps) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6 },
+  };
+
+  const staggerContainer = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
+      <div className="container">
+        <motion.header
+          className="pb-12 md:pb-16"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <motion.div
+            variants={fadeInUp}
+            className="rounded-xl bg-muted/20 p-8 md:p-12"
+          >
+            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+              <div className="space-y-6 text-start">
+                <div className="inline-flex items-center gap-3 rounded-full bg-muted/50 px-4 py-2">
+                  <div className="h-1.5 w-1.5 rounded-full bg-foreground"></div>
+                  <span className="text-sm font-medium text-muted-foreground">درخواست دمو</span>
+                </div>
+                <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-5xl">مهندسی فرانت‌اند</h1>
+                <p className="text-lg leading-relaxed text-muted-foreground">کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش می‌کشد.</p>
+              </div>
+              <div className="rounded-lg bg-background/50 p-6">
+                <div className="grid grid-cols-2 gap-6">
+                  <div className="text-center">
+                    <p className="text-sm font-medium text-muted-foreground">دمو</p>
+                    <p className="mt-2 text-lg font-semibold text-foreground">مشاهده دموی زنده</p>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      سال
+                    </p>
+                    <p className="mt-2 text-lg font-semibold text-foreground">
+                      ۲۲۴
+                    </p>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      رسانه
+                    </p>
+                    <p className="mt-2 text-lg font-semibold text-foreground">نکسوس لبز</p>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      وضعیت
+                    </p>
+                    <p className="mt-2 text-lg font-semibold text-foreground">
+                      فعال
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </motion.header>
+
+        <motion.main
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+          className="space-y-8"
+        >
+          <motion.div
+            variants={fadeInUp}
+            className="relative aspect-[21/9] overflow-hidden rounded-xl bg-muted/30"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg"
+              alt="پژواک  نمای اصلی کتابخانه کامپوننت"
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-background/5" />
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="relative aspect-[16/9] overflow-hidden rounded-xl bg-muted/30"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/photos/michal-balog-HTNB1UDJ4Hg-unsplash.jpg"
+              alt="کتابخانه پژواک را در نمایش زنده آنلاین تجربه کنید"
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-background/5" />
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="relative aspect-[16/9] overflow-hidden rounded-xl bg-muted/30"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg"
+              alt="نمایش کتابخانه کامپوننت مدرن  ارائه معاصر یک دیزاین سیستم متن‌باز"
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-background/5" />
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="rounded-xl bg-muted/20 p-8 md:p-12"
+          >
+            <div className="flex flex-col gap-6 text-start md:flex-row md:items-center md:justify-between">
+              <div className="space-y-2">
+                <h3 className="text-xl font-bold text-foreground">نمایش زنده آنلاین</h3>
+                <p className="text-muted-foreground">نمای جزئی از یک کامپوننت  ترکیب کد و طراحی</p>
+              </div>
+              <Button
+                variant="default"
+                className="bg-foreground px-8 py-4 font-medium text-background hover:bg-foreground/90"
+              >پژواک  کتابخانه کامپوننت</Button>
+            </div>
+          </motion.div>
+        </motion.main>
+      </div>
+    </section>
+  );
+};
+
+export { Project5f };
diff --git a/blocks/project5g.tsx b/blocks/project5g.tsx
new file mode 100644
index 0000000..e59c8cb
--- /dev/null
+++ b/blocks/project5g.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Project5gProps {
+  className?: string;
+}
+
+const Project5g = ({ className }: Project5gProps) => {
+  const fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6 },
+  };
+
+  const staggerContainer = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
+      <div className="container">
+        <motion.header
+          className="pb-16 md:pb-24"
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+        >
+          <div className="grid grid-cols-1 gap-16 lg:grid-cols-5">
+            <motion.div variants={fadeInUp} className="text-start lg:col-span-3">
+              <div className="space-y-8">
+                <div className="space-y-4">
+                  <span className="text-sm font-medium tracking-widest text-muted-foreground">نکسوس لبز / ۲۲۴</span>
+                  <h1 className="text-5xl font-bold tracking-tight text-foreground md:text-6xl lg:text-7xl">
+                    پژواک
+                    <span className="text-muted-foreground">
+                      <br />نمایش</span>
+                  </h1>
+                </div>
+                <p className="max-w-2xl text-xl leading-relaxed text-muted-foreground">کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش می‌کشد.</p>
+              </div>
+            </motion.div>
+
+            <motion.div variants={fadeInUp} className="lg:col-span-2">
+              <div className="relative aspect-[3/4] overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/marvin-meyer-SYTO3xs06fU-unsplash.jpg"
+                  alt="نمای جزئی از یک کامپوننت  ترکیب کد و طراحی"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+            </motion.div>
+          </div>
+        </motion.header>
+
+        <motion.main
+          initial="initial"
+          animate="animate"
+          variants={staggerContainer}
+          className="space-y-16"
+        >
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-1 gap-8 lg:grid-cols-3"
+          >
+            <div className="lg:col-span-2">
+              <div className="relative aspect-[16/10] overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg"
+                  alt="پژواک  نمای اصلی کتابخانه کامپوننت"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+            </div>
+
+            <div className="space-y-8 text-start">
+              <div className="space-y-6">
+                <h2 className="text-2xl font-bold text-foreground">اوپن‌سورس</h2>
+                <div className="space-y-4">
+                  <div className="border-s-2 border-border ps-4">
+                    <p className="text-sm font-medium text-muted-foreground">دمو</p>
+                    <p className="text-lg font-semibold text-foreground">دمو در دسترس</p>
+                  </div>
+                  <div className="border-s-2 border-border ps-4">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      رسانه
+                    </p>
+                    <p className="text-lg font-semibold text-foreground">برنامه‌ریزی دمو</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="relative aspect-square overflow-hidden rounded-lg bg-muted/30">
+                <img
+                  src="/block-media/shadcnblocks/block/photos/nubelson-fernandes-xxa7qYObMrI-unsplash.jpg"
+                  alt="نمایش کتابخانه کامپوننت مدرن  ارائه معاصر یک دیزاین سیستم متن‌باز"
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-background/5" />
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            variants={fadeInUp}
+            className="grid grid-cols-1 gap-16 lg:grid-cols-2"
+          >
+            <div className="space-y-6 text-start">
+              <h2 className="text-3xl font-bold text-foreground">چشم‌انداز طراحی</h2>
+              <p className="text-lg leading-relaxed text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد، ساختار بلاک‌ها و رفتار حالت‌ها که فرم نهایی رابط را تعریف می‌کنند، استخراج کرده‌ایم.</p>
+              <p className="leading-relaxed text-muted-foreground">این نمایش، توسعه‌دهنده را دعوت می‌کند رابطه خود با بلاک‌های رابط را از نو ببیند و گفت‌وگویی میان کاربر و سادگی خام کامپوننت‌ها و الگوهای رابط می‌آفریند.</p>
+            </div>
+
+            <div className="flex items-end justify-start">
+              <div className="space-y-4 text-start">
+                <div>
+                  <p className="text-sm text-muted-foreground">مهندسی فرانت‌اند</p>
+                  <p className="text-lg font-semibold text-foreground">
+                    هر روز ۱۰ صبح تا ۶ عصر
+                  </p>
+                </div>
+                <Button
+                  variant="default"
+                  className="bg-foreground px-8 py-4 font-medium text-background hover:bg-foreground/90"
+                >نمایش زنده آنلاین</Button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.main>
+      </div>
+    </section>
+  );
+};
+
+export { Project5g };
diff --git a/blocks/project6.tsx b/blocks/project6.tsx
new file mode 100644
index 0000000..2882114
--- /dev/null
+++ b/blocks/project6.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Badge } from "@/components/ui/badge";
+
+interface Project6Props {
+  title?: string;
+  subtitle?: string;
+  category?: string;
+  year?: string;
+  description?: string;
+  images?: Array<{ src?: string; alt: string }>;
+  src: string;
+  alt: string;
+  index: number;
+}
+
+const ImageBlock = ({
+  src,
+  alt,
+  index,
+}: {
+  src?: string;
+  alt: string;
+  index: number;
+}) => (
+  <motion.div
+    initial={{ opacity: 0, y: 50 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.6, delay: index * 0.1 }}
+    viewport={{ once: true, margin: "-100px" }}
+    className="group relative mb-8 last:mb-0"
+  >
+    <div className="relative aspect-[4/5] overflow-hidden rounded-2xl bg-muted">
+      {src ? (
+        <motion.img
+          src={src}
+          alt={alt}
+          className="h-full w-full object-cover"
+          whileHover={{ scale: 1.05 }}
+          transition={{ duration: 0.3, ease: "easeOut" }}
+        />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center text-muted-foreground">
+          <span className="text-sm">جایگاه تصویر</span>
+        </div>
+      )}
+      <div className="absolute inset-0 bg-gradient-to-t from-muted/50 via-transparent to-transparent" />
+      <motion.div
+        className="absolute inset-0 bg-muted/20"
+        initial={{ opacity: 0 }}
+        whileHover={{ opacity: 1 }}
+        transition={{ duration: 0.3 }}
+      />
+    </div>
+  </motion.div>
+);
+
+const StickySection = ({
+  title,
+  subtitle,
+  category,
+  year,
+  description,
+}: {
+  title: string;
+  subtitle: string;
+  category: string;
+  year: string;
+  description: string;
+}) => (
+  <div className="top-20 flex flex-col self-start text-start lg:sticky lg:min-h-screen lg:justify-between">
+    <motion.div
+      initial={{ opacity: 0, x: 30 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration: 0.6 }}
+    >
+      <div className="space-y-3">
+        <h1 className="text-5xl font-bold tracking-tight text-foreground md:text-6xl">
+          {title}
+        </h1>
+        <p className="text-xl text-muted-foreground">{subtitle}</p>
+        <div className="flex items-center gap-4">
+          <Badge
+            variant="secondary"
+            className="rounded-3xl bg-muted px-4 py-1 text-xs font-medium text-foreground"
+          >
+            {category}
+          </Badge>
+          <span className="rounded-3xl border border-border px-3 text-sm text-muted-foreground">
+            {year}
+          </span>
+        </div>
+      </div>
+    </motion.div>
+
+    <motion.div
+      initial={{ opacity: 0, x: 30 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration: 0.6, delay: 0.2 }}
+      className="mt-5 space-y-3 md:sticky md:bottom-9"
+    >
+      <h3 className="text-sm font-medium tracking-wider text-foreground">
+        درباره
+      </h3>
+      <p className="max-w-sm text-sm leading-relaxed tracking-wide text-muted-foreground">
+        {description}
+      </p>
+    </motion.div>
+  </div>
+);
+
+const ProjectCard = ({ title, category, src, alt, index }: Project6Props) => (
+  <motion.div
+    initial={{ opacity: 0, y: 30 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.5, delay: index * 0.1 }}
+    viewport={{ once: true }}
+    className="group relative cursor-pointer"
+  >
+    <div className="relative aspect-[4/3] overflow-hidden rounded-2xl">
+      <motion.img
+        src={src}
+        alt={alt}
+        className="h-full w-full object-cover"
+        whileHover={{ scale: 1.1 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      />
+      <div className="absolute inset-0 bg-muted/40 transition-all duration-300 group-hover:bg-muted/20" />
+      <div className="absolute inset-0 flex flex-col justify-between p-6 text-start">
+        <Badge
+          variant="secondary"
+          className="self-start border border-muted bg-background text-xs font-medium text-foreground"
+        >
+          {category}
+        </Badge>
+        <h3 className="text-2xl font-semibold text-foreground opacity-70">
+          {title}
+        </h3>
+      </div>
+    </div>
+  </motion.div>
+);
+
+export const Project6 = ({
+  title = "نمای شهری",
+  subtitle = "مجموعه نماهای موبایل",
+  category = "طراحی",
+  year = "۲۲۵",
+  description = "مجموعه‌ای جذاب از نماهای رابط که جوهره تجربه کاربری مدرن را از دریچه طراحان معاصر با تم تک‌رنگ به تصویر می‌کشد.",
+  images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+      alt: "نمای رابط ۱",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+      alt: "نمای رابط ۲",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+      alt: "نمای رابط ۳",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+      alt: "نمای رابط ۴",
+    },
+  ],
+}: Partial<ReturnType<typeof StickySection>["props"]> & {
+  images?: Array<{ src?: string; alt: string }>;
+}) => {
+  const projectCards = [
+    {
+      title: "محتوایی",
+      category: "موبایل",
+      src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+      alt: "نمای موبایل",
+    },
+    {
+      title: "معماری وب",
+      category: "وب",
+      src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+      alt: "نمای محصول",
+    },
+    {
+      title: "معماری فرانت‌اند",
+      category: "سبک زندگی",
+      src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+      alt: "محتوای لایف‌استایل",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className="py-32">
+      <div className="container">
+        <div className="grid gap-12 lg:grid-cols-2 lg:gap-20">
+          <StickySection
+            title={title!}
+            subtitle={subtitle!}
+            category={category!}
+            year={year!}
+            description={description!}
+          />
+          <div className="space-y-10">
+            {images?.map((img, index) => (
+              <ImageBlock
+                key={index}
+                src={img.src}
+                alt={img.alt}
+                index={index}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-32 text-start">
+          <h3 className="mb-6 text-sm font-bold font-medium tracking-wider text-foreground">
+            مجموعه‌های بیشتر
+          </h3>
+          <div className="grid gap-6 pb-16 md:grid-cols-3">
+            {projectCards.map((project, index) => (
+              <ProjectCard key={project.title} {...project} index={index} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/project6a.tsx b/blocks/project6a.tsx
new file mode 100644
index 0000000..fc9756e
--- /dev/null
+++ b/blocks/project6a.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Badge } from "@/components/ui/badge";
+
+interface Project6aProps {
+  title?: string;
+  subtitle?: string;
+  category?: string;
+  year?: string;
+  description?: string;
+  images?: Array<{ src?: string; alt: string }>;
+  src: string;
+  alt: string;
+  index: number;
+}
+
+const ImageBlock = ({
+  src,
+  alt,
+  index,
+}: {
+  src?: string;
+  alt: string;
+  index: number;
+}) => (
+  <motion.div
+    initial={{ opacity: 0, y: 50 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.6, delay: index * 0.1 }}
+    viewport={{ once: true, margin: "-100px" }}
+    className="group relative mb-8 last:mb-0"
+  >
+    <div className="relative aspect-[4/5] overflow-hidden rounded-2xl bg-muted">
+      {src ? (
+        <motion.img
+          src={src}
+          alt={alt}
+          className="h-full w-full object-cover"
+          whileHover={{ scale: 1.05 }}
+          transition={{ duration: 0.3, ease: "easeOut" }}
+        />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center text-muted-foreground">
+          <span className="text-sm">جایگاه تصویر</span>
+        </div>
+      )}
+      <div className="absolute inset-0 bg-gradient-to-t from-muted/50 via-transparent to-transparent" />
+      <motion.div
+        className="absolute inset-0 bg-muted/20"
+        initial={{ opacity: 0 }}
+        whileHover={{ opacity: 1 }}
+        transition={{ duration: 0.3 }}
+      />
+    </div>
+  </motion.div>
+);
+
+const ProjectRow = ({ title, category, src, alt, index }: Project6aProps) => (
+  <motion.div
+    initial={{ opacity: 0 }}
+    whileInView={{ opacity: 1 }}
+    transition={{ duration: 0.5, delay: index * 0.1 }}
+    viewport={{ once: true }}
+    className="group flex cursor-pointer items-center gap-4 rounded-lg p-3 text-start transition-all duration-300 hover:bg-muted/20"
+  >
+    <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-lg">
+      <motion.img
+        src={src}
+        alt={alt}
+        className="h-full w-full object-cover"
+        whileHover={{ scale: 1.1 }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      />
+      <div className="absolute inset-0 bg-muted/40 transition-all duration-300 group-hover:bg-muted/20" />
+    </div>
+    <div className="flex-1 space-y-1">
+      <h4 className="text-lg leading-tight font-semibold text-foreground">
+        {title}
+      </h4>
+      <Badge
+        variant="secondary"
+        className="h-6 bg-muted text-xs font-medium text-foreground"
+      >
+        {category}
+      </Badge>
+    </div>
+  </motion.div>
+);
+
+export const Project6a = ({
+  title = "نمای شهری",
+  subtitle = "مجموعه نماهای موبایل",
+  category = "طراحی",
+  year = "۲۲۵",
+  description = "مجموعه‌ای جذاب از نماهای رابط که جوهره تجربه کاربری مدرن را از دریچه طراحان معاصر با تم تک‌رنگ به تصویر می‌کشد.",
+  images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+      alt: "نمای رابط ۱",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+      alt: "نمای رابط ۲",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+      alt: "نمای رابط ۳",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+      alt: "نمای رابط ۴",
+    },
+  ],
+}: Partial<Project6aProps> & {
+  images?: Array<{ src?: string; alt: string }>;
+}) => {
+  const projectRows = [
+    {
+      title: "محتوایی",
+      category: "موبایل",
+      src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+      alt: "نمای موبایل",
+    },
+    {
+      title: "معماری وب",
+      category: "وب",
+      src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+      alt: "نمای محصول",
+    },
+    {
+      title: "معماری فرانت‌اند",
+      category: "سبک زندگی",
+      src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+      alt: "محتوای لایف‌استایل",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className="py-32">
+      <div className="container">
+        <div className="mx-auto max-w-4xl text-start">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="mb-16 space-y-6"
+          >
+            <div className="space-y-3">
+              <h1 className="text-5xl font-bold tracking-tight text-foreground md:text-6xl">
+                {title}
+              </h1>
+              <p className="text-xl text-muted-foreground">{subtitle}</p>
+              <div className="flex items-center gap-4">
+                <Badge
+                  variant="secondary"
+                  className="rounded-3xl bg-muted px-4 py-1 text-xs font-medium text-foreground"
+                >
+                  {category}
+                </Badge>
+                <span className="rounded-3xl border border-border px-3 text-sm text-muted-foreground">
+                  {year}
+                </span>
+              </div>
+            </div>
+          </motion.div>
+
+          <div className="mb-16 space-y-10">
+            {images?.map((img, index) => (
+              <ImageBlock
+                key={index}
+                src={img.src}
+                alt={img.alt}
+                index={index}
+              />
+            ))}
+          </div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            viewport={{ once: true }}
+            className="mb-16 space-y-6"
+          >
+            <h3 className="text-sm font-medium tracking-wider text-foreground">
+              درباره
+            </h3>
+            <p className="max-w-2xl text-sm leading-relaxed tracking-wide text-muted-foreground">
+              {description}
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            viewport={{ once: true }}
+            className="space-y-6"
+          >
+            <h3 className="text-sm font-bold tracking-wider text-foreground">
+              مجموعه‌های بیشتر
+            </h3>
+            <div className="space-y-2">
+              {projectRows.map((project, index) => (
+                <ProjectRow key={project.title} {...project} index={index} />
+              ))}
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/blocks/project7.tsx b/blocks/project7.tsx
new file mode 100644
index 0000000..9d31143
--- /dev/null
+++ b/blocks/project7.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const images = {
+  hero: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+  carousel: [
+    "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+  ],
+  dayOne: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+  dayTwo: [
+    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+  ],
+};
+
+const PROCESS_ALTS = ["فرآیند پیاده‌سازی ۱", "فرآیند پیاده‌سازی ۲", "فرآیند پیاده‌سازی ۳"];
+const CONSTRUCTION_ALTS = [
+  "جزئیات پیاده‌سازی ۱",
+  "جزئیات پیاده‌سازی ۲",
+  "جزئیات پیاده‌سازی ۳",
+  "جزئیات پیاده‌سازی ۴",
+];
+
+interface Project7Props {
+  className?: string;
+}
+
+const Project7 = ({ className }: Project7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("", className)}>
+      <section className="relative flex h-[700px] items-center justify-center overflow-hidden">
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+          style={{ backgroundImage: `url(${images.hero})` }}
+        >
+          <div className="absolute inset-0 bg-black/40" />
+        </div>
+
+        <div className="relative z-10 mx-auto max-w-4xl px-4 text-center text-white">
+          <p className="mb-6 text-sm tracking-[0.2em] text-white/80">استودیو محصول مدرن</p>
+          <h1 className="mb-6 text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl">
+            مرکانت
+            <br />پروژه داشبورد</h1>
+          <p className="mx-auto max-w-xl text-base leading-relaxed text-white/80 md:text-xl">با انتخاب دقیق فناوری و راه‌حل‌های معماری نوآورانه، نه فقط یک رابط، بلکه یک دیزاین سیستم زنده و قابل‌گسترش ساخته‌ایم.</p>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-4xl px-4 py-8 text-start md:py-12">
+        <div className="mb-12">
+          <h2 className="mb-8 text-2xl font-light text-foreground md:text-3xl">فلسفه طراحی و چشم‌انداز</h2>
+          <div className="prose prose-gray max-w-none text-muted-foreground">
+            <p>بخش‌های مشترک رابط از کامپوننت‌های پایه و الگوهای بازاستفاده بهره می‌برند و کاربر را به یک تجربه منسجم پیوند می‌دهند، در حالی که حسی مدرن و پیچیده حفظ می‌شود.</p>
+            <p>هر جزئیات، از چیدمان KPIها تا فیلترهای گزارش، با دقت برنامه‌ریزی شد تا هم تجربه کاربر و هم انسجام کل محصول را ارتقا دهد. این داشبورد فروش، معیارهای کلیدی تیم را در یک نمای یکپارچه نمایش می‌دهد.</p>
+            <p>کارایی در هر لایه محصول تنیده شده  از بارگذاری تنبل (بارگذاری هوشمند) و کش هوشمند تا کامپوننت‌های بهینه که تجربه‌ای سریع برای همه کاربران فراهم می‌کنند.</p>
+          </div>
+        </div>
+
+        <div className="relative">
+          <Carousel
+            dir="rtl"
+            opts={{
+              align: "start",
+              direction: "rtl",
+            }}
+            className="w-full"
+          >
+            <CarouselContent>
+              {images.carousel.map((image, index) => (
+                <CarouselItem key={index}>
+                  <div className="aspect-[5/3] overflow-hidden">
+                    <img
+                      src={image}
+                      alt={PROCESS_ALTS[index] ?? `فرآیند پروژه ${index + 1}`}
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious className="start-4" />
+            <CarouselNext className="end-4" />
+          </Carousel>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-4xl px-4 py-8 text-start md:py-12">
+        <div className="mb-12">
+          <h2 className="mb-8 text-2xl font-light text-foreground md:text-3xl">پیاده‌سازی و فناوری</h2>
+          <div className="prose prose-gray max-w-none text-muted-foreground">
+            <p>برجسته‌ترین ویژگی محصول، سیستم تم دولایه آن است  لایه‌ای که حالت روشن و تیره را به بهترین شکل مدیریت می‌کند و در عین حال کارایی بالا ارائه می‌دهد. هر صفحه از چیدمان تمام‌عرض بهره می‌برد که نمای کاملی از داده‌ها را قاب می‌گیرد.</p>
+            <p>داشبورد مرکانت با جوایز متعدد محصول از جمله نشان بهترین تجربه کاربری و جایزه نوآوری در دیزاین سیستم شناخته شده است. این پروژه نشان می‌دهد چگونه معماری سنجیده فرانت‌اند می‌تواند تراکم داده را مدیریت کند و در عین حال فضاهایی معنادار برای تمرکز کاربر بسازد.</p>
+            <p>محصول سامانه ابری پیشرویی با ۴۷ نمای کاربردی که با معماری نوآورانه، کامپوننت‌های پایدار و یکپارچگی هوشمندانه با دیزاین سیستم، کار با داده را بازتعریف می‌کند.</p>
+          </div>
+        </div>
+
+        <div className="aspect-[16/9] overflow-hidden md:aspect-[21/9]">
+          <img
+            src={images.dayOne}
+            alt="نمای اصلی داشبورد مرکانت"
+            className="h-full w-full object-cover"
+          />
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-4xl px-4 py-8 text-start md:py-12">
+        <div className="mb-12">
+          <h2 className="mb-8 text-2xl font-light text-foreground md:text-3xl">نوآوری معماری فرانت‌اند</h2>
+          <div className="prose prose-gray max-w-none text-muted-foreground">
+            <p>این پروژه نمایانگر آینده طراحی داشبوردهای سازمانی است  جایی که عملکرد، مقیاس‌پذیری و طراحی کاربرمحور گرد هم می‌آیند تا تجربه‌ای بسازند که واقعاً کار با داده را ارتقا می‌دهد.</p>
+            <p>نوآوری فنی ما شامل یک معماری کامپوننت‌محور است که حجم کد را ۳۰٪ کاهش می‌دهد و در عین حال اجازه می‌دهد چیدمان‌های متمایز و منعطف محصول شکل بگیرند. این الگوهای معماری، نماهای کاربردی در چند سطح می‌آفرینند و تجربه کاربر را به سطحی تازه می‌برند.</p>
+            <p>فراتر از کیفیت فنی، این محصول به محرکی برای رشد تیم تبدیل شده و سرمایه‌گذاری بیشتر در دیزاین سیستم و ابزارهای مشترک را برانگیخته که به نفع کل سازمان است.</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 md:gap-6">
+          {images.dayTwo.map((image, index) => (
+            <div key={index} className="aspect-square overflow-hidden">
+              <img
+                src={image}
+                alt={CONSTRUCTION_ALTS[index] ?? `جزئیات ساخت ${index + 1}`}
+                className="h-full w-full object-cover"
+              />
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-4xl px-4 py-8 text-start md:py-12">
+        <h2 className="mb-8 text-2xl font-light text-foreground md:text-3xl">نتایج و دستاوردهای پروژه</h2>
+        <div className="prose prose-gray max-w-none text-muted-foreground">
+          <p>داشبورد مرکانت فصل تازه‌ای در طراحی محصولات سازمانی است. رویکرد ما بر ساخت یک سیستم ماژولار متمرکز بود که در عین حفظ یکپارچگی و وضوح، حس انسجام را در کل محصول تقویت کند.</p>
+          <p>فرآیند ساخت از کامپوننت‌های آماده ری یو آی بهره برد؛ بلاک‌ها به‌صورت ماژولار و با دقت سرهم شدند. این رویکرد زمان توسعه را ۴۰٪ کاهش داد و دوباره‌کاری را به حداقل رساند.</p>
+          <p>انتخاب فناوری بر پایداری و کارایی بلندمدت متمرکز بود  رابط کاربری، استایل‌دهی مدرن و کتابخانه پایه زیرساختی می‌سازند که با تغییر داده و حالت، رفتار و ظاهر متفاوتی را به‌درستی نمایش می‌دهد.</p>
+        </div>
+      </section>
+    </section>
+  );
+};
+
+export { Project7 };
diff --git a/blocks/project8.tsx b/blocks/project8.tsx
new file mode 100644
index 0000000..b7b99a6
--- /dev/null
+++ b/blocks/project8.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project8Props {
+  className?: string;
+}
+
+const Project8 = ({ className }: Project8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <motion.div
+        className="container"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <div className="mb-16 text-center">
+          <motion.h1
+            className="mb-4 text-4xl font-bold tracking-tight text-foreground md:text-8xl"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            تایرل فشن
+          </motion.h1>
+          <motion.p
+            className="text-xl text-muted-foreground md:text-2xl"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >ثبت زیبایی‌شناسی یک تم تیره نئو-نوآر.</motion.p>
+        </div>
+
+        <motion.div
+          className="relative mb-16 w-full"
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1, delay: 0.6 }}
+        >
+          <div className="relative aspect-[16/10] overflow-hidden rounded-lg">
+            <img
+              src="/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg"
+              alt="نمای خلاق رابط با تم پویا"
+              className="h-full w-full object-cover"
+            />
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="grid w-full grid-cols-1 text-start md:grid-cols-2"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">خلاقیت</h3>
+          </div>
+
+          <div className="space-y-6">
+            <div className="flex justify-between">
+              <p className="text-2xl text-muted-foreground">۲۲۵</p>
+              <h4 className="text-sm font-semibold text-foreground">
+                منطقه خلیج سان‌فرانسیسکو
+              </h4>
+            </div>
+
+            <p className="text-base leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد. این رابط از افکت‌های نور و سطوح بازتابنده بهره می‌برد تا حس آینده‌نگر را تقویت کند و هر صفحه را به بیانی از ظرافت فردا تبدیل کند.</p>
+
+            <p className="text-base leading-relaxed text-foreground">داشبورد CRM با طراحی مینیمال که KPIهای فروش، خط لوله معاملات و عملکرد تیم را در یک نمای یکپارچه نمایش می‌دهد. هر ویجت داده‌های زنده را از اتصال Salesforce و HubSpot دریافت می‌کند. نتیجه، یک دیزاین سیستمی است که استانداردهای متعارف را به چالش می‌کشد و در عین حال تکامل سبک را جشن می‌گیرد.</p>
+
+            <div className="space-y-1 text-base text-muted-foreground">
+              <h5 className="font-medium text-foreground">عوامل پروژه (تیم)</h5>
+              <p>مدیر خلاق: مایا چن</p>
+              <p>طراح تجربه کاربری: الکس ریورا</p>
+              <p>طراح رابط: جوردان کیم</p>
+              <p>معمار فرانت‌اند: سام پاتل</p>
+              <p>مهندس کیفیت (QA): کیسی ونگ</p>
+              <p>مهندس دیزاین سیستم: رایلی مارتینز</p>
+              <p>توسعه‌دهنده فرانت‌اند: تیلور بروکس</p>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+};
+
+export { Project8 };
diff --git a/blocks/project8a.tsx b/blocks/project8a.tsx
new file mode 100644
index 0000000..2c78689
--- /dev/null
+++ b/blocks/project8a.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project8aProps {
+  className?: string;
+}
+
+const Project8a = ({ className }: Project8aProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <motion.div
+        className="container"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <div className="mb-16 text-center">
+          <motion.h1
+            className="mb-4 text-3xl font-bold tracking-tight text-foreground md:text-8xl"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            تایرل فشن
+          </motion.h1>
+          <motion.p
+            className="text-xl text-muted-foreground md:text-2xl"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >ثبت زیبایی‌شناسی یک تم تیره نئو-نوآر.</motion.p>
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="relative mb-16 w-full"
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 1, delay: 0.6 }}
+      >
+        <div className="relative aspect-[16/9] overflow-hidden">
+          <img
+            src="/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg"
+            alt="نمای خلاق رابط با تم پویا"
+            className="h-full w-full object-cover"
+          />
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="container"
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 0.8 }}
+      >
+        <div className="grid w-full grid-cols-1 text-start md:grid-cols-2">
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">خلاقیت</h3>
+          </div>
+
+          <div className="space-y-6">
+            <div className="flex justify-between">
+              <p className="text-2xl text-muted-foreground">۲۲۴</p>
+              <h4 className="text-sm font-semibold text-foreground">
+                منطقه خلیج سان‌فرانسیسکو
+              </h4>
+            </div>
+
+            <p className="text-base leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد. این رابط از افکت‌های نور و سطوح بازتابنده بهره می‌برد تا حس آینده‌نگر را تقویت کند و هر صفحه را به بیانی از ظرافت فردا تبدیل کند.</p>
+
+            <p className="text-base leading-relaxed text-foreground">داشبورد CRM با طراحی مینیمال که KPIهای فروش، خط لوله معاملات و عملکرد تیم را در یک نمای یکپارچه نمایش می‌دهد. هر ویجت داده‌های زنده را از اتصال Salesforce و HubSpot دریافت می‌کند. نتیجه، یک دیزاین سیستمی است که استانداردهای متعارف را به چالش می‌کشد و در عین حال تکامل سبک را جشن می‌گیرد.</p>
+
+            <div className="space-y-1 text-base text-muted-foreground">
+              <h5 className="font-medium text-foreground">عوامل پروژه (تیم)</h5>
+              <p>مدیر خلاق: مایا چن</p>
+              <p>طراح تجربه کاربری: الکس ریورا</p>
+              <p>طراح رابط: جوردان کیم</p>
+              <p>معمار فرانت‌اند: سام پاتل</p>
+              <p>مهندس کیفیت (QA): کیسی ونگ</p>
+              <p>مهندس دیزاین سیستم: رایلی مارتینز</p>
+              <p>توسعه‌دهنده فرانت‌اند: تیلور بروکس</p>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </section>
+  );
+};
+
+export { Project8a };
diff --git a/blocks/project8b.tsx b/blocks/project8b.tsx
new file mode 100644
index 0000000..2722bec
--- /dev/null
+++ b/blocks/project8b.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project8bProps {
+  className?: string;
+}
+
+const Project8b = ({ className }: Project8bProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <motion.div
+        className="container"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <div className="mb-16 text-center">
+          <motion.h1
+            className="mb-4 text-3xl font-bold tracking-tight text-foreground md:text-8xl"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            تایرل فشن
+          </motion.h1>
+          <motion.p
+            className="text-xl text-muted-foreground md:text-2xl"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >ثبت زیبایی‌شناسی یک تم تیره نئو-نوآر.</motion.p>
+        </div>
+
+        <motion.div
+          className="grid grid-cols-1 items-center gap-12 text-start lg:grid-cols-2"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+        >
+          <div className="relative">
+            <div className="relative aspect-[4/5] overflow-hidden rounded-lg">
+              <img
+                src="/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg"
+                alt="نمای خلاق رابط با تم پویا"
+                className="h-full w-full object-cover"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-8">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold text-foreground">
+                خلاقیت
+              </h3>
+            </div>
+
+            <div className="space-y-6">
+              <div className="flex justify-between">
+                <p className="text-2xl text-muted-foreground">۲۲۴</p>
+                <h4 className="text-sm font-semibold text-foreground">
+                  منطقه خلیج سان‌فرانسیسکو
+                </h4>
+              </div>
+
+              <p className="text-base leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد. این رابط از افکت‌های نور و سطوح بازتابنده بهره می‌برد تا حس آینده‌نگر را تقویت کند و هر صفحه را به بیانی از ظرافت فردا تبدیل کند.</p>
+
+              <p className="text-base leading-relaxed text-foreground">داشبورد CRM با طراحی مینیمال که KPIهای فروش، خط لوله معاملات و عملکرد تیم را در یک نمای یکپارچه نمایش می‌دهد. هر ویجت داده‌های زنده را از اتصال Salesforce و HubSpot دریافت می‌کند. نتیجه، یک دیزاین سیستمی است که استانداردهای متعارف را به چالش می‌کشد و در عین حال تکامل سبک را جشن می‌گیرد.</p>
+
+              <div className="space-y-1 text-base text-muted-foreground">
+                <h5 className="font-medium text-foreground">عوامل پروژه (تیم)</h5>
+                <p>مدیر خلاق: مایا چن</p>
+                <p>طراح تجربه کاربری: الکس ریورا</p>
+                <p>طراح رابط: جوردان کیم</p>
+                <p>معمار فرانت‌اند: سام پاتل</p>
+                <p>مهندس کیفیت (QA): کیسی ونگ</p>
+                <p>مهندس دیزاین سیستم: رایلی مارتینز</p>
+                <p>توسعه‌دهنده فرانت‌اند: تیلور بروکس</p>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+};
+
+export { Project8b };
diff --git a/blocks/project8c.tsx b/blocks/project8c.tsx
new file mode 100644
index 0000000..466ee0f
--- /dev/null
+++ b/blocks/project8c.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project8cProps {
+  className?: string;
+}
+
+const Project8c = ({ className }: Project8cProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <motion.div
+        className="container max-w-4xl"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <div className="mb-16 text-center">
+          <motion.h1
+            className="mb-4 text-3xl font-bold tracking-tight text-foreground md:text-8xl"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            تایرل فشن
+          </motion.h1>
+          <motion.p
+            className="text-xl text-muted-foreground md:text-2xl"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >ثبت زیبایی‌شناسی یک تم تیره نئو-نوآر.</motion.p>
+        </div>
+
+        <motion.div
+          className="relative mx-auto mb-12 max-w-2xl"
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1, delay: 0.6 }}
+        >
+          <div className="relative aspect-[3/2] overflow-hidden rounded-lg">
+            <img
+              src="/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg"
+              alt="نمای خلاق رابط با تم پویا"
+              className="h-full w-full object-cover"
+            />
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="space-y-12 text-start"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          <div className="flex items-center justify-between border-b border-border pb-4">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold text-foreground">
+                خلاقیت
+              </h3>
+            </div>
+            <div className="text-start">
+              <p className="text-2xl text-muted-foreground">۲۲۴</p>
+              <h4 className="text-sm font-semibold text-foreground">
+                منطقه خلیج سان‌فرانسیسکو
+              </h4>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            <div className="space-y-6">
+              <p className="text-base leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد.</p>
+
+              <p className="text-base leading-relaxed text-foreground">داشبورد CRM با طراحی مینیمال که KPIهای فروش، خط لوله معاملات و عملکرد تیم را در یک نمای یکپارچه نمایش می‌دهد. هر ویجت داده‌های زنده را از اتصال Salesforce و HubSpot دریافت می‌کند.</p>
+            </div>
+
+            <div className="space-y-1 text-base text-muted-foreground">
+              <h5 className="mb-3 font-medium text-foreground">عوامل پروژه (تیم)</h5>
+              <p>مدیر خلاق: مایا چن</p>
+              <p>طراح تجربه کاربری: الکس ریورا</p>
+              <p>طراح رابط: جوردان کیم</p>
+              <p>معمار فرانت‌اند: سام پاتل</p>
+              <p>مهندس کیفیت (QA): کیسی ونگ</p>
+              <p>مهندس دیزاین سیستم: رایلی مارتینز</p>
+              <p>توسعه‌دهنده فرانت‌اند: تیلور بروکس</p>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+};
+
+export { Project8c };
diff --git a/blocks/project8d.tsx b/blocks/project8d.tsx
new file mode 100644
index 0000000..829679d
--- /dev/null
+++ b/blocks/project8d.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project8dProps {
+  className?: string;
+}
+
+const Project8d = ({ className }: Project8dProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <motion.div
+        className="container max-w-5xl"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <div className="mb-20 text-center">
+          <motion.h1
+            className="mb-6 text-3xl font-bold tracking-tight text-foreground md:text-8xl"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            تایرل فشن
+          </motion.h1>
+          <motion.p
+            className="text-xl text-muted-foreground md:text-2xl"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >ثبت زیبایی‌شناسی یک تم تیره نئو-نوآر.</motion.p>
+        </div>
+
+        <motion.div
+          className="relative mb-20"
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1, delay: 0.6 }}
+        >
+          <div className="relative aspect-[2/1] overflow-hidden rounded-lg">
+            <img
+              src="/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg"
+              alt="نمای خلاق رابط با تم پویا"
+              className="h-full w-full object-cover"
+            />
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="space-y-16 text-start"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
+            <div className="md:col-span-1">
+              <h3 className="mb-2 text-lg font-semibold text-foreground">
+                خلاقیت
+              </h3>
+              <p className="text-2xl text-muted-foreground">۲۲۴</p>
+              <h4 className="mt-1 text-sm font-semibold text-foreground">
+                منطقه خلیج سان‌فرانسیسکو
+              </h4>
+            </div>
+
+            <div className="space-y-6 md:col-span-3">
+              <p className="text-lg leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد. این رابط از افکت‌های نور و سطوح بازتابنده بهره می‌برد تا حس آینده‌نگر را تقویت کند و هر صفحه را به بیانی از ظرافت فردا تبدیل کند.</p>
+
+              <p className="text-lg leading-relaxed text-foreground">داشبورد CRM با طراحی مینیمال که KPIهای فروش، خط لوله معاملات و عملکرد تیم را در یک نمای یکپارچه نمایش می‌دهد. هر ویجت داده‌های زنده را از اتصال Salesforce و HubSpot دریافت می‌کند. نتیجه، یک دیزاین سیستمی است که استانداردهای متعارف را به چالش می‌کشد و در عین حال تکامل سبک را جشن می‌گیرد.</p>
+            </div>
+          </div>
+
+          <div className="border-t border-border pt-8">
+            <div className="space-y-2 text-base text-muted-foreground">
+              <h5 className="mb-4 font-medium text-foreground">عوامل پروژه (تیم)</h5>
+              <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
+                <p>مدیر خلاق: مایا چن</p>
+                <p>طراح تجربه کاربری: الکس ریورا</p>
+                <p>طراح رابط: جوردان کیم</p>
+                <p>معمار فرانت‌اند: سام پاتل</p>
+                <p>مهندس کیفیت (QA): کیسی ونگ</p>
+                <p>مهندس دیزاین سیستم: رایلی مارتینز</p>
+                <p>توسعه‌دهنده فرانت‌اند: تیلور بروکس</p>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+};
+
+export { Project8d };
diff --git a/blocks/project8e.tsx b/blocks/project8e.tsx
new file mode 100644
index 0000000..a022827
--- /dev/null
+++ b/blocks/project8e.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Project8eProps {
+  className?: string;
+}
+
+const Project8e = ({ className }: Project8eProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="relative min-h-screen">
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage:
+              "url('/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg')",
+          }}
+        >
+          <div className="absolute inset-0 bg-black/40" />
+        </div>
+
+        <div className="relative z-10 flex min-h-screen items-center justify-center py-32">
+          <motion.div
+            className="container"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <div className="text-center">
+              <motion.h1
+                className="mb-4 text-3xl font-bold tracking-tight text-white md:text-8xl"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.2 }}
+              >
+                تایرل فشن
+              </motion.h1>
+              <motion.p
+                className="text-xl text-white/80 md:text-2xl"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.4 }}
+              >ثبت زیبایی‌شناسی یک تم تیره نئو-نوآر.</motion.p>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="bg-white py-32">
+        <motion.div
+          className="container"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          <div className="grid w-full grid-cols-1 text-start md:grid-cols-2">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold text-foreground">
+                خلاقیت
+              </h3>
+            </div>
+
+            <div className="space-y-6">
+              <div className="flex justify-between">
+                <p className="text-2xl text-muted-foreground">۲۲۴</p>
+                <h4 className="text-sm font-semibold text-foreground">
+                  منطقه خلیج سان‌فرانسیسکو
+                </h4>
+              </div>
+
+              <p className="text-base leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد. این رابط از افکت‌های نور و سطوح بازتابنده بهره می‌برد تا حس آینده‌نگر را تقویت کند و هر صفحه را به بیانی از ظرافت فردا تبدیل کند.</p>
+
+              <p className="text-base leading-relaxed text-foreground">داشبورد CRM با طراحی مینیمال که KPIهای فروش، خط لوله معاملات و عملکرد تیم را در یک نمای یکپارچه نمایش می‌دهد. هر ویجت داده‌های زنده را از اتصال Salesforce و HubSpot دریافت می‌کند. نتیجه، یک دیزاین سیستمی است که استانداردهای متعارف را به چالش می‌کشد و در عین حال تکامل سبک را جشن می‌گیرد.</p>
+
+              <div className="space-y-1 text-base text-muted-foreground">
+                <h5 className="font-medium text-foreground">عوامل پروژه (تیم)</h5>
+                <p>مدیر خلاق: مایا چن</p>
+                <p>طراح تجربه کاربری: الکس ریورا</p>
+                <p>طراح رابط: جوردان کیم</p>
+                <p>معمار فرانت‌اند: سام پاتل</p>
+                <p>مهندس کیفیت (QA): کیسی ونگ</p>
+                <p>مهندس دیزاین سیستم: رایلی مارتینز</p>
+                <p>توسعه‌دهنده فرانت‌اند: تیلور بروکس</p>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Project8e };
diff --git a/blocks/project9.tsx b/blocks/project9.tsx
new file mode 100644
index 0000000..9860ad0
--- /dev/null
+++ b/blocks/project9.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Project9Props {
+  className?: string;
+}
+
+const Project9 = ({ className }: Project9Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+      alt: "داشبورد تحلیل فروش",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+      alt: "پرتره در منظر طبیعی",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+      alt: "دره کوهستانی مه‌آلود",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+      alt: "نمودار عملکرد کمپین",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+      alt: "داشبورد تحلیل فروش",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+      alt: "پرتره در منظر طبیعی",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+      alt: "دره کوهستانی مه‌آلود",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+      alt: "نمودار عملکرد کمپین",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-20", className)}>
+      <div className="container flex flex-col gap-8 lg:flex-row">
+        <motion.div
+          className="top-0 flex h-auto w-full flex-col justify-start p-6 text-start sm:p-8 lg:sticky lg:h-screen lg:w-1/2"
+          initial={{ opacity: 0, x: 30 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <nav className="mb-12">
+            <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+              <span className="cursor-pointer transition-colors hover:text-foreground">
+                مطالعات موردی
+              </span>
+              <span>/</span>
+              <span className="cursor-pointer transition-colors hover:text-foreground">
+                تحلیل
+              </span>
+              <span>/</span>
+              <span className="text-foreground">بازطراحی داشبورد CRM</span>
+            </div>
+          </nav>
+
+          <motion.h1
+            className="mb-12 text-4xl leading-tight font-light sm:text-5xl md:text-6xl"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            بازطراحی داشبورد CRM
+          </motion.h1>
+
+          <div className="space-y-8">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+            >
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-lg font-medium">ثبت شده</h3>
+                <span className="text-muted-foreground">۲ فوریه ۲۲۵</span>
+              </div>
+              <Separator />
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.5 }}
+            >
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-lg font-medium">موقعیت</h3>
+                <span className="text-muted-foreground">نیمکره شمالی</span>
+              </div>
+              <Separator />
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.6 }}
+            >
+              <div className="mb-4">
+                <h3 className="mb-4 text-lg font-medium">مرور پروژه</h3>
+                <p className="leading-relaxed text-muted-foreground">
+                  بازطراحی رابط داشبورد CRM برای یک شرکت B2B با ۲۰۰ کاربر
+                  فعال. تمرکز بر نمایش KPIهای فروش، قیف معاملات و گزارش‌های
+                  عملکرد تیم در یک نمای یکپارچه و قابل‌اقدام.
+                </p>
+              </div>
+            </motion.div>
+          </div>
+        </motion.div>
+
+        <div className="w-full lg:w-1/2">
+          <motion.div
+            className="p-6 sm:p-8"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+          >
+            <motion.div
+              className="overflow-hidden rounded-lg"
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, ease: "easeOut" }}
+              whileHover={{ scale: 1.02, transition: { duration: 0.3 } }}
+            >
+              <img
+                src="/block-media/shadcnblocks/block/lummi/bw1.jpeg"
+                className="max-h-[30rem] w-full object-cover transition-transform duration-700 hover:scale-105"
+                alt="تصویر شاخص پروژه"
+              />
+            </motion.div>
+          </motion.div>
+
+          <motion.div
+            className="grid grid-cols-1 gap-6 px-6 pb-16 sm:grid-cols-2 sm:px-8"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >
+            {images.map((image, index) => (
+              <motion.div
+                key={index}
+                className="overflow-hidden rounded-lg"
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{
+                  duration: 0.6,
+                  delay: 0.5 + index * 0.1,
+                  ease: "easeOut",
+                }}
+                whileHover={{ scale: 1.02, transition: { duration: 0.3 } }}
+              >
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="h-full w-full object-cover transition-transform duration-700 hover:scale-105"
+                />
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Project9 };
diff --git a/blocks/projects1.tsx b/blocks/projects1.tsx
new file mode 100644
index 0000000..a991bee
--- /dev/null
+++ b/blocks/projects1.tsx
@@ -0,0 +1,106 @@
+"use client";
+import { motion } from "framer-motion";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const projects1prop = [
+  {
+    title: "شکوفایی تجربه",
+    description:
+      "طراحی پروتوتایپ‌های پیشرفته رابط برای داشبوردها و محصولات مدرن.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ali-moradi-qNic6LXHw-w-unsplash.jpg",
+    tag: "معماری رابط",
+  },
+  {
+    title: "طراحی رابط",
+    description:
+      "شکل‌دهی هویت بصری محصول از مسیر پروتوتایپ‌های سه‌بعدی و چیدمان مفهومی برای صفحات اصلی.",
+    image:
+      "/block-media/shadcnblocks/block/photos/israel-andrade-YI_9SivVt_s-unsplash.jpg",
+    tag: "معماری اطلاعات",
+  },
+  {
+    title: "چیدمان ماژولار",
+    description:
+      "کاوش الگوهای چیدمان فشرده و ماژولار برای داشبوردهای متراکم از داده.",
+    image:
+      "/block-media/shadcnblocks/block/photos/nastuh-abootalebi-eHD8Y1Znfpk-unsplash.jpg",
+    tag: "مفهوم طراحی",
+  },
+  {
+    title: "نماهای کلی محصول",
+    description:
+      "خلق چیدمان‌های رابط آرام و ظریف که کارایی را با هماهنگی بصری متعادل می‌کنند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-lISGL8VWpPE-unsplash.jpg",
+    tag: "معماری فرانت‌اند",
+  },
+  {
+    title: "فرم + جریان",
+    description:
+      "بازتعریف چیدمان‌های باز داشبورد با گذارهای روان و استفاده بهینه از فضا.",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg",
+    tag: "داشبورد ادمین تمام‌صفحه",
+  },
+];
+
+interface Projects1Props {
+  className?: string;
+}
+
+const Projects1 = ({ className }: Projects1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-10 flex items-center justify-between border-b border-border pb-4 text-start">
+          <h2 className="text-2xl font-semibold sm:text-lg">برجسته‌های معماری فرانت‌اند</h2>
+        </div>
+        <div className="space-y-12">
+          {projects1prop.map((project, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, ease: "easeOut" }}
+              className="flex flex-col-reverse gap-6 text-start md:grid md:grid-cols-2 md:pt-10"
+            >
+              <div className="flex flex-col justify-between">
+                <h3 className="mb-2 text-lg font-medium sm:text-4xl">
+                  {project.title}
+                </h3>
+                <div>
+                  <p className="mb-3 max-w-sm text-sm font-medium text-foreground">
+                    {project.description}
+                  </p>
+                  <Badge variant="outline" className="px-3 py-2">
+                    {project.tag}
+                  </Badge>
+                </div>
+              </div>
+
+              <motion.div
+                className="aspect-[3/2] w-full overflow-hidden rounded-sm"
+                initial={{ y: -80, opacity: 0 }}
+                whileInView={{ y: 0, opacity: 1 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+                viewport={{ once: true }}
+              >
+                <img
+                  src={project.image}
+                  alt={project.title}
+                  className="h-full w-full rounded-sm object-cover"
+                />
+              </motion.div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects1 };
diff --git a/blocks/projects10.tsx b/blocks/projects10.tsx
new file mode 100644
index 0000000..7f8573b
--- /dev/null
+++ b/blocks/projects10.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+
+interface Projects10Props {
+  className?: string;
+}
+
+const Projects10 = ({ className }: Projects10Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+      alt: "چیدمان کارت‌ها روی پس‌زمینه ملایم",
+      title: "تم روشن صبحگاهی",
+      description: "رابط مینیمال با فضای خالی سنجیده و ریتم منظم",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+      alt: "کارت‌های آماری با نمودار زنده",
+      title: "نمای تم سرد",
+      description: "تم روشن، کارت‌ها را با رنگ‌های گرم می‌آراید",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+      alt: "منوی کشویی در جریان ناوبری",
+      title: "تم تیره مه‌آلود",
+      description: "تم روشن سپیده، رابط را زنده می‌کند",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+      alt: "نمای جامعه کاربران",
+      title: "نمای جانبی",
+      description: "تجربه‌ای که با الگو و رنگ نشانه‌گذاری شده",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw19.jpeg",
+      alt: "نمای پروفایل کاربر",
+      title: "نمای گرم",
+      description: "نمای مطالعه محتوا در تم روشن",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw18.jpeg",
+      alt: "نمای کاربر در تم تیره",
+      title: "هماهنگی مینیمال",
+      description: "بلاک Hero با گرادیان نرم و تایپوگرافی درشت",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw15.jpeg",
+      alt: "کارت‌های شاخص در تم غروب",
+      title: "تم سپیده‌دم",
+      description: "نوار پیشرفت و اسکلتون لودینگ هنگام بارگذاری داده",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+      alt: "داشبوردهای تعاملی",
+      title: "حالت موفقیت پس از ثبت",
+      description: "کامپوننت‌ها برای توازن و ریتم بصری سنجیده چیده شده‌اند",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
+      alt: "انیمیشن ظریف ورود کارت‌ها",
+      title: "حالت‌های موفقیت و نوتیفیکیشن‌های دلنشین تجربه را گرم می‌کنند",
+      description: "حالت‌ها و پیام‌های راهنما کنار کاربر تجربه را گرم‌تر می‌کنند",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 md:grid-cols-3">
+          {images.map((image, index) => (
+            <div
+              key={index}
+              className="group relative aspect-square overflow-hidden"
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+              />
+              <div className="absolute inset-0 bg-background/0 transition-all duration-300 group-hover:bg-background/10" />
+              <div className="absolute inset-x-0 bottom-0 translate-y-full transform p-6 transition-transform duration-300 group-hover:translate-y-0">
+                <div className="text-center">
+                  <h3 className="mb-2 text-xl font-semibold text-muted">
+                    {image.title}
+                  </h3>
+                  <p className="text-sm text-muted">{image.description}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects10 };
diff --git a/blocks/projects11.tsx b/blocks/projects11.tsx
new file mode 100644
index 0000000..6fbc28f
--- /dev/null
+++ b/blocks/projects11.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ImageData {
+  src: string;
+  alt: string;
+}
+
+const images: ImageData[] = [
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    alt: "حالت موفقیت پس از ثبت",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    alt: "کارت‌ها در تم گرم غروب",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    alt: "نمای کلی گسترده داشبورد",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+    alt: "کارت‌های شاخص با تم گرم",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    alt: "نمای رابط در حالت تک‌رنگ",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+    alt: "ترکیب‌بندی تک‌رنگ معاصر رابط",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    alt: "نمای خواندن محتوا در تم روشن",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
+    alt: "منوی کشویی روی پس‌زمینه ملایم",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
+    alt: "رابط مینیمال",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
+    alt: "فرم ثبت‌نام با اعتبارسنجی زنده",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
+    alt: "چیدمان کارت‌ها روی پس‌زمینه ملایم",
+  },
+  {
+    src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+    alt: "رابط مینیمال با فضای خالی سنجیده و ریتم منظم",
+  },
+];
+
+interface Projects11Props {
+  className?: string;
+}
+
+const Projects11 = ({ className }: Projects11Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3">
+          {images.map((image, index) => (
+            <motion.div
+              key={index}
+              className="mb-4 break-inside-avoid md:mb-6"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: index * 0.05 }}
+            >
+              <div className="group relative overflow-hidden border-border transition-all duration-300">
+                <motion.img
+                  src={image.src}
+                  alt={image.alt}
+                  className="h-auto w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:brightness-105"
+                />
+                <div className="absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" />
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects11 };
diff --git a/blocks/projects12.tsx b/blocks/projects12.tsx
new file mode 100644
index 0000000..54c3a05
--- /dev/null
+++ b/blocks/projects12.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useSpring,
+} from "framer-motion";
+import { useCallback, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const projects = [
+  {
+    title: "طراحی مقیاس‌پذیر",
+    img: "/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg",
+    year: "۱۴۰۴",
+    type: "محصول",
+  },
+  {
+    title: "رابط شهری رنگارنگ",
+    img: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
+    year: "۱۴۰۴",
+    type: "طراحی وب",
+  },
+  {
+    title: "داشبورد مینیمال لوکس",
+    img: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+    year: "۱۴۰۴",
+    type: "رابط کاربری",
+  },
+  {
+    title: "صفحه اصلی مینیمال",
+    img: "/block-media/shadcnblocks/block/lummi/bw13.jpeg",
+    year: "۱۴۰۴",
+    type: "طراحی محصول",
+  },
+  {
+    title: "معماری فرانت‌اند",
+    img: "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
+    year: "۱۴۰۴",
+    type: "تم گرم و دنج",
+  },
+  {
+    title: "کامپوننت در بستر واقعی",
+    img: "/block-media/shadcnblocks/block/lummi/bw16.jpeg",
+    year: "۱۴۰۴",
+    type: "مودال تأیید با بلاک Dialog",
+  },
+];
+
+interface Projects12Props {
+  className?: string;
+}
+
+const Projects12 = ({ className }: Projects12Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  const springX = useSpring(mouseX, {
+    stiffness: 300,
+    damping: 30,
+    mass: 0.8,
+  });
+  const springY = useSpring(mouseY, {
+    stiffness: 300,
+    damping: 30,
+    mass: 0.8,
+  });
+
+  const handleContainerMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!containerRef.current) return;
+
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - containerRect.left;
+      const y = e.clientY - containerRect.top;
+
+      mouseX.set(x - 50);
+      mouseY.set(y + 30);
+    },
+    [mouseX, mouseY],
+  );
+
+  const handleProjectMouseEnter = useCallback((index: number) => {
+    setHoveredIndex(index);
+    setIsHovering(true);
+  }, []);
+
+  const handleContainerMouseLeave = useCallback(() => {
+    setHoveredIndex(null);
+    setIsHovering(false);
+  }, []);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-20", className)}>
+      <div className="container">
+        <div className="mb-10 flex items-end justify-between text-start">
+          <h2 className="text-2xl font-semibold">گالری استودیو</h2>
+        </div>
+
+        <div
+          ref={containerRef}
+          className="relative grid grid-cols-1 gap-x-6 gap-y-7 sm:grid-cols-2 lg:grid-cols-3"
+          onMouseMove={handleContainerMouseMove}
+          onMouseLeave={handleContainerMouseLeave}
+        >
+          {projects.map((project, index) => (
+            <div key={index} className="group relative text-start">
+              <div
+                className="relative cursor-pointer overflow-hidden rounded-xl"
+                onMouseEnter={() => handleProjectMouseEnter(index)}
+              >
+                <img
+                  src={project.img}
+                  alt={project.title}
+                  className="h-[400px] w-full rounded-lg object-cover transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:scale-[1.05] group-hover:brightness-110"
+                />
+
+                <div className="absolute inset-0 rounded-lg bg-black/0 transition-all duration-500 group-hover:bg-black/10" />
+              </div>
+
+              <div className="mt-4 flex justify-between gap-0.5">
+                <h3 className="text-sm leading-tight font-medium transition-colors duration-300 group-hover:text-neutral-800 md:text-base">
+                  {project.title}
+                </h3>
+                <div className="flex flex-col items-end text-end">
+                  <p className="text-sm text-neutral-600">{project.year}</p>
+                  <p className="text-sm text-muted-foreground">
+                    {project.type}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+
+          <AnimatePresence>
+            {isHovering && hoveredIndex !== null && (
+              <motion.div
+                style={{
+                  x: springX,
+                  y: springY,
+                }}
+                initial={{
+                  opacity: 0,
+                  scale: 0.8,
+                }}
+                animate={{
+                  opacity: 1,
+                  scale: 1,
+                }}
+                exit={{
+                  opacity: 0,
+                  scale: 0.8,
+                }}
+                transition={{
+                  type: "spring",
+                  stiffness: 400,
+                  damping: 25,
+                  mass: 0.5,
+                }}
+                className="pointer-events-none absolute top-0 left-0 z-[9999] select-none"
+              >
+                <div className="relative">
+                  <div className="absolute inset-0 rounded-xl border border-white/10 bg-black/95 shadow-2xl shadow-black/30 backdrop-blur-md" />
+
+                  <div className="relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-white">
+                    <span className="text-base">کاوش</span>
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full border border-white/30 bg-white/10">
+                      <motion.span
+                        animate={{ x: [0, 2, 0] }}
+                        transition={{
+                          duration: 2,
+                          repeat: Number.POSITIVE_INFINITY,
+                          ease: "easeInOut",
+                        }}
+                        className="inline-block text-xs rtl:rotate-180"
+                      >
+                        →
+                      </motion.span>
+                    </div>
+                  </div>
+
+                  <div className="absolute inset-0 scale-105 rounded-2xl bg-white/5 blur-sm" />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects12 };
diff --git a/blocks/projects13.tsx b/blocks/projects13.tsx
new file mode 100644
index 0000000..745d6d2
--- /dev/null
+++ b/blocks/projects13.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects13Props {
+  className?: string;
+}
+
+const persianIndices = ["۱", "۲", "۰۳", "۰۴"];
+
+const Projects13 = ({ className }: Projects13Props) => {
+  const projects = [
+    {
+      id: 1,
+      title: "پلتفرم فروشگاه آنلاین",
+      description:
+        "پلتفرمی کاملاً مقیاس‌پذیر برای فروش آنلاین از صفر طراحی و توسعه داده شد؛ با تمرکز بر سادگی و عملکرد، گردش کار بیش از ۱۰٬۰۰۰ کاربر در صنایع مختلف را متحول کرد.",
+      launchDate: "۲۸ فروردین ۱۴۰۴",
+      image: "/block-media/shadcnblocks/block/guri4/img1.png",
+    },
+    {
+      id: 2,
+      title: "اپلیکیشن بانکداری موبایل",
+      description:
+        "اپلیکیشن بانکداری موبایل امن و کاربرپسند با پردازش لحظه‌ای تراکنش، احراز هویت بیومتریک و تجربه‌ای روان برای مؤسسات مالی ساخته شد.",
+      launchDate: "۲۵ اسفند ۱۴۰۳",
+      image: "/block-media/shadcnblocks/block/guri4/img2.png",
+    },
+    {
+      id: 3,
+      title: "تولیدکننده محتوای هوش مصنوعی",
+      description:
+        "پلتفرمی مبتنی بر هوش مصنوعی برای تولید محتوای جذاب بازاریابی، با قابلیت‌های پیشرفته پردازش زبان طبیعی و قالب‌های قابل تنظیم توسعه یافت.",
+      launchDate: "۹ اسفند ۱۴۰۳",
+      image: "/block-media/shadcnblocks/block/guri4/img3.png",
+    },
+    {
+      id: 4,
+      title: "ابزار مدیریت پروژه",
+      description:
+        "راه‌حل جامع مدیریت پروژه با همکاری بلادرنگ، پیگیری وظایف و داشبورد تحلیلی برای تیم‌های دورکار و سازمان‌ها ایجاد شد.",
+      launchDate: "۳۰ دی ۱۴۰۳",
+      image: "/block-media/shadcnblocks/block/guri4/img10.png",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <ul className="relative w-full">
+          <li className="hidden justify-between gap-10 border-b pt-15 pb-2 text-sm tracking-tight text-foreground/40 lg:flex lg:text-base">
+            <p className="w-1/4 text-start">پروژه‌ها</p>
+            <p className="w-2/4 text-start">توضیحات</p>
+            <p className="w-1/4 text-start">گالری</p>
+          </li>
+          {projects.map((project, index) => (
+            <li
+              key={project.id}
+              className="flex w-full flex-col justify-between gap-10 border-b py-10 text-start lg:flex-row lg:py-15"
+            >
+              <div className="flex gap-4 text-xl font-medium tracking-tighter lg:w-1/4">
+                <p>{persianIndices[index]}</p>
+                <div className="flex flex-col gap-1">
+                  <p>{project.title}</p>
+                  <p className="text-muted-foreground">({project.launchDate})</p>
+                </div>
+              </div>
+              <div className="text-2xl leading-relaxed lg:w-2/4 lg:text-3xl">
+                {project.description}
+              </div>
+              <div className="w-full text-sm text-foreground/50 lg:h-30 lg:w-1/4 lg:ps-20 lg:text-base">
+                <img
+                  src={project.image}
+                  alt={project.title}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Projects13 };
diff --git a/blocks/projects14.tsx b/blocks/projects14.tsx
new file mode 100644
index 0000000..cc1216a
--- /dev/null
+++ b/blocks/projects14.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects14Props {
+  className?: string;
+}
+
+const Projects14 = ({ className }: Projects14Props) => {
+  const hiddenGridIndex = [0, 1, 2, 6, 9];
+
+  const projects = [
+    {
+      id: 3,
+      title: "پلتفرم فروشگاه آنلاین",
+      description: "فول‌استک",
+      href: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img11.png",
+    },
+    {
+      id: 4,
+      title: "اپلیکیشن بانکداری موبایل",
+      description: "رابط و تجربه کاربری",
+      href: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img9.png",
+    },
+    {
+      id: 5,
+      title: "تولیدکننده محتوای هوش مصنوعی",
+      description: "هوش مصنوعی",
+      href: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img10.png",
+    },
+    {
+      id: 6,
+      title: "پلتفرم رسانه‌ای",
+      description: "وب‌اپ",
+      href: "#",
+      image: "/block-media/shadcnblocks/block/guri3/img25.jpeg",
+    },
+    {
+      id: 7,
+      title: "ابزار مدیریت پروژه",
+      description: "وب‌اپ",
+      href: "#",
+      image: "/block-media/shadcnblocks/block/guri4/img6.png",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative w-full text-start">
+          <div className="flex justify-between text-3xl font-medium tracking-tight lg:text-5xl">
+            <h1>کارهای منتخب</h1>
+            <a
+              href="#"
+              className="group flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground"
+            >
+              مشاهده همه
+              <ArrowUpRight className="size-[1em] transition-transform duration-300 group-hover:rotate-45 rtl:rotate-180" />
+            </a>
+          </div>
+          <div className="grid grid-cols-2 gap-5 md:grid-cols-5">
+            {Array.from({ length: 10 }).map((_, index) => {
+              if (hiddenGridIndex.includes(index)) {
+                return (
+                  <div key={index} className="mt-10 opacity-0" aria-hidden />
+                );
+              }
+
+              const projectIndex =
+                index -
+                hiddenGridIndex.filter((hidden) => hidden < index).length;
+              const project = projects[projectIndex];
+
+              if (!project) return null;
+
+              return (
+                <motion.a
+                  href={project.href}
+                  key={index}
+                  initial={{ opacity: 0, y: 50 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.05 }}
+                  viewport={{ once: true }}
+                  className="group mt-10 flex flex-col gap-2 overflow-hidden text-start"
+                >
+                  <img
+                    src={project.image}
+                    alt={project.title}
+                    className="h-65 w-full object-cover transition-transform duration-300 group-hover:-translate-y-4 group-hover:scale-110"
+                  />
+                  <div>
+                    <h3 className="text-xl font-medium tracking-tight transition-colors duration-300 group-hover:text-muted-foreground">
+                      {project.title}
+                    </h3>
+                    <p className="text-foreground/40">{project.description}</p>
+                  </div>
+                </motion.a>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects14 };
diff --git a/blocks/projects15.tsx b/blocks/projects15.tsx
new file mode 100644
index 0000000..ef699b4
--- /dev/null
+++ b/blocks/projects15.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { AudioLines } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects15Props {
+  className?: string;
+}
+
+interface VideoSectionProps {
+  videoSrc: string;
+  thumbnailSrc: string;
+  studioName: string;
+  projectTitle: string;
+}
+
+const VideoSection: React.FC<VideoSectionProps> = ({
+  videoSrc,
+  thumbnailSrc,
+  studioName,
+  projectTitle,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (isHovered) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      }
+    }
+  }, [isHovered]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className="group relative h-[50vh] w-full cursor-pointer overflow-hidden"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Thumbnail Image */}
+      <img
+        src={thumbnailSrc}
+        alt={projectTitle}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-0" : "opacity-100"
+          }`}
+      />
+
+      {/* Video */}
+      <video
+        ref={videoRef}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+      >
+        <source src={videoSrc} type="video/mp4" />
+        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
+      </video>
+
+      <div className="absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" />
+
+      <div className="absolute inset-0 bottom-12 flex items-end">
+        <div className="px-6 text-start text-white sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <p className="mb-2 text-xs font-medium tracking-wider opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base">
+            {studioName}
+          </p>
+          <h2 className="max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg">
+            {projectTitle}
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Projects15: React.FC<Projects15Props> = ({ className }) => {
+  const videoSections = [
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/3571264-hd_1280_720_30fps.mp4",
+      studioName: "مریدیان لبز",
+      projectTitle: "تعامل‌های اثیری",
+    },
+
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/1448735-hd_1366_720_24fps.mp4",
+      studioName: "زنیث دیجیتال",
+      projectTitle: "نکسوس استودیو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/19348567-hd_1280_720_25fps.mp4",
+      studioName: "پریزم لبز",
+      projectTitle: "مرزهای نو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/9882072-hd_1280_720_30fps.mp4",
+      studioName: "سمفونی تعامل",
+      projectTitle: "تعامل‌های روان",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("min-h-screen bg-background", className)}>
+      {/* Header Section */}
+      <div className="relative h-[50vh] bg-background">
+        <div className="absolute inset-0 bottom-12 flex items-end">
+          <div className="px-6 text-start text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20">
+            <h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl">
+              کاوش در پروژه‌های ما
+            </h1>
+
+            <div className="flex items-center">
+              <p className="me-4 text-sm font-medium tracking-wider opacity-80">
+                کارهای ما
+              </p>
+              <div className="opacity-60">
+                <AudioLines className="h-6 w-6" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Video Sections */}
+      <div className="w-full">
+        {videoSections.map((section, index) => (
+          <VideoSection
+            key={index}
+            videoSrc={section.videoSrc}
+            thumbnailSrc={section.thumbnailSrc}
+            studioName={section.studioName}
+            projectTitle={section.projectTitle}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Projects15 };
diff --git a/blocks/projects15a.tsx b/blocks/projects15a.tsx
new file mode 100644
index 0000000..2569e48
--- /dev/null
+++ b/blocks/projects15a.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { AudioLines } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects15aProps {
+  className?: string;
+}
+
+interface VideoSectionProps {
+  videoSrc: string;
+  thumbnailSrc: string;
+  studioName: string;
+  projectTitle: string;
+}
+
+const VideoSection: React.FC<VideoSectionProps> = ({
+  videoSrc,
+  thumbnailSrc,
+  studioName,
+  projectTitle,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (isHovered) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      }
+    }
+  }, [isHovered]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className="group relative h-[50vh] w-full cursor-pointer overflow-hidden"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Thumbnail Image */}
+      <img
+        src={thumbnailSrc}
+        alt={projectTitle}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-0" : "opacity-100"
+          }`}
+      />
+
+      {/* Video */}
+      <video
+        ref={videoRef}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+      >
+        <source src={videoSrc} type="video/mp4" />
+        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
+      </video>
+
+      <div className="absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" />
+
+      <div className="absolute inset-0 bottom-12 flex items-end">
+        <div className="px-6 text-start text-white sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <p className="mb-2 text-xs font-medium tracking-wider opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base">
+            {studioName}
+          </p>
+          <h2 className="max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg">
+            {projectTitle}
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Projects15a: React.FC<Projects15aProps> = ({ className }) => {
+  const videoSections = [
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/3571264-hd_1280_720_30fps.mp4",
+      studioName: "مریدیان لبز",
+      projectTitle: "تعامل‌های اثیری",
+    },
+
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/1448735-hd_1366_720_24fps.mp4",
+      studioName: "زنیث دیجیتال",
+      projectTitle: "نکسوس استودیو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/19348567-hd_1280_720_25fps.mp4",
+      studioName: "پریزم لبز",
+      projectTitle: "مرزهای نو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/9882072-hd_1280_720_30fps.mp4",
+      studioName: "سمفونی تعامل",
+      projectTitle: "تعامل‌های روان",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("min-h-screen bg-background", className)}>
+      {/* Header Section */}
+      <div className="relative h-[50vh] bg-background">
+        <div className="absolute inset-0 bottom-12 flex items-end">
+          <div className="px-6 text-start text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20">
+            <h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl">
+              کاوش در پروژه‌های ما
+            </h1>
+
+            <div className="flex items-center">
+              <p className="me-4 text-sm font-medium tracking-wider opacity-80">
+                کارهای ما
+              </p>
+              <div className="opacity-60">
+                <AudioLines className="h-6 w-6" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Video Sections - 2 Column Grid */}
+      <div className="grid w-full grid-cols-1 md:grid-cols-2">
+        {videoSections.map((section, index) => (
+          <VideoSection
+            key={index}
+            videoSrc={section.videoSrc}
+            thumbnailSrc={section.thumbnailSrc}
+            studioName={section.studioName}
+            projectTitle={section.projectTitle}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Projects15a };
diff --git a/blocks/projects15b.tsx b/blocks/projects15b.tsx
new file mode 100644
index 0000000..fa5bd63
--- /dev/null
+++ b/blocks/projects15b.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { AudioLines } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects15bProps {
+  className?: string;
+}
+
+interface VideoSectionProps {
+  videoSrc: string;
+  thumbnailSrc: string;
+  studioName: string;
+  projectTitle: string;
+}
+
+const VideoSection: React.FC<VideoSectionProps> = ({
+  videoSrc,
+  thumbnailSrc,
+  studioName,
+  projectTitle,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (isHovered) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      }
+    }
+  }, [isHovered]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className="group relative h-[50vh] w-full cursor-pointer overflow-hidden md:h-[60vh]"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Thumbnail Image */}
+      <img
+        src={thumbnailSrc}
+        alt={projectTitle}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-0" : "opacity-100"
+          }`}
+      />
+
+      {/* Video */}
+      <video
+        ref={videoRef}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+      >
+        <source src={videoSrc} type="video/mp4" />
+        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
+      </video>
+
+      <div className="absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" />
+
+      <div className="absolute inset-0 bottom-12 flex items-end">
+        <div className="px-6 text-start text-white sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <p className="mb-2 text-xs font-medium tracking-wider opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base">
+            {studioName}
+          </p>
+          <h2 className="max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg">
+            {projectTitle}
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Projects15b: React.FC<Projects15bProps> = ({ className }) => {
+  const videoSections = [
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/3571264-hd_1280_720_30fps.mp4",
+      studioName: "مریدیان لبز",
+      projectTitle: "تعامل‌های اثیری",
+    },
+
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/1448735-hd_1366_720_24fps.mp4",
+      studioName: "زنیث دیجیتال",
+      projectTitle: "نکسوس استودیو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/19348567-hd_1280_720_25fps.mp4",
+      studioName: "پریزم لبز",
+      projectTitle: "مرزهای نو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/9882072-hd_1280_720_30fps.mp4",
+      studioName: "سمفونی تعامل",
+      projectTitle: "تعامل‌های روان",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("min-h-screen bg-background", className)}>
+      {/* All Sections in 2 Column Grid */}
+      <div className="grid w-full grid-cols-1 md:grid-cols-2">
+        {/* Header Section */}
+        <div className="relative h-[50vh] bg-background md:h-[60vh]">
+          <div className="absolute inset-0 bottom-12 flex items-end">
+            <div className="px-6 text-start text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20">
+              <h1 className="mb-4 max-w-1/2 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl">
+                کاوش در پروژه‌های ما
+              </h1>
+
+              <div className="flex items-center">
+                <p className="me-4 text-sm font-medium tracking-wider opacity-80">
+                  کارهای ما
+                </p>
+                <div className="opacity-60">
+                  <AudioLines className="h-6 w-6" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Video Sections */}
+        {videoSections.map((section, index) => (
+          <VideoSection
+            key={index}
+            videoSrc={section.videoSrc}
+            thumbnailSrc={section.thumbnailSrc}
+            studioName={section.studioName}
+            projectTitle={section.projectTitle}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Projects15b };
diff --git a/blocks/projects15c.tsx b/blocks/projects15c.tsx
new file mode 100644
index 0000000..ae346b8
--- /dev/null
+++ b/blocks/projects15c.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+import { AudioLines } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects15cProps {
+  className?: string;
+}
+
+interface VideoSectionProps {
+  videoSrc: string;
+  thumbnailSrc: string;
+  studioName: string;
+  projectTitle: string;
+}
+
+const VideoSection: React.FC<VideoSectionProps> = ({
+  videoSrc,
+  thumbnailSrc,
+  studioName,
+  projectTitle,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (isHovered) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      }
+    }
+  }, [isHovered]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className="group relative h-[50vh] w-full cursor-pointer overflow-hidden rounded-lg md:h-[60vh]"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Thumbnail Image */}
+      <img
+        src={thumbnailSrc}
+        alt={projectTitle}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-0" : "opacity-100"
+          }`}
+      />
+
+      {/* Video */}
+      <video
+        ref={videoRef}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+      >
+        <source src={videoSrc} type="video/mp4" />
+        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
+      </video>
+
+      <div className="absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" />
+
+      <div className="absolute inset-0 bottom-12 flex items-end">
+        <div className="px-6 text-start text-white sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <p className="mb-2 text-xs font-medium tracking-wider opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base">
+            {studioName}
+          </p>
+          <h2 className="max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg">
+            {projectTitle}
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Projects15c: React.FC<Projects15cProps> = ({ className }) => {
+  const videoSections = [
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/3571264-hd_1280_720_30fps.mp4",
+      studioName: "مریدیان لبز",
+      projectTitle: "تعامل‌های اثیری",
+    },
+
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/1448735-hd_1366_720_24fps.mp4",
+      studioName: "زنیث دیجیتال",
+      projectTitle: "نکسوس استودیو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/19348567-hd_1280_720_25fps.mp4",
+      studioName: "پریزم لبز",
+      projectTitle: "مرزهای نو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/9882072-hd_1280_720_30fps.mp4",
+      studioName: "سمفونی تعامل",
+      projectTitle: "تعامل‌های روان",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-8 md:py-32", className)}>
+      <div className="container mx-auto">
+        {/* Header Section */}
+        <div className="mb-12 text-start text-foreground">
+          <h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl">
+            کاوش در پروژه‌های ما
+          </h1>
+
+          <div className="flex items-center">
+            <p className="me-4 text-sm font-medium tracking-wider opacity-80">
+              کارهای ما
+            </p>
+            <div className="opacity-60">
+              <AudioLines className="h-6 w-6" />
+            </div>
+          </div>
+        </div>
+
+        {/* Video Sections with Padding */}
+        <div className="space-y-8 md:space-y-12">
+          {videoSections.map((section, index) => (
+            <div key={index}>
+              <VideoSection
+                videoSrc={section.videoSrc}
+                thumbnailSrc={section.thumbnailSrc}
+                studioName={section.studioName}
+                projectTitle={section.projectTitle}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects15c };
diff --git a/blocks/projects15d.tsx b/blocks/projects15d.tsx
new file mode 100644
index 0000000..3023693
--- /dev/null
+++ b/blocks/projects15d.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { AudioLines } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects15dProps {
+  className?: string;
+}
+
+interface VideoSectionProps {
+  videoSrc: string;
+  thumbnailSrc: string;
+  studioName: string;
+  projectTitle: string;
+  className?: string;
+}
+
+const VideoSection: React.FC<VideoSectionProps> = ({
+  videoSrc,
+  thumbnailSrc,
+  studioName,
+  projectTitle,
+  className = "",
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (isHovered) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      }
+    }
+  }, [isHovered]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className={`group relative w-full cursor-pointer overflow-hidden rounded-lg ${className}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Thumbnail Image */}
+      <img
+        src={thumbnailSrc}
+        alt={projectTitle}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-0" : "opacity-100"
+          }`}
+      />
+
+      {/* Video */}
+      <video
+        ref={videoRef}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+      >
+        <source src={videoSrc} type="video/mp4" />
+        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
+      </video>
+
+      <div className="absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" />
+
+      <div className="absolute inset-0 bottom-12 flex items-end">
+        <div className="px-6 text-start text-white sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <p className="mb-2 text-xs font-medium tracking-wider opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base">
+            {studioName}
+          </p>
+          <h2 className="max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg">
+            {projectTitle}
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Projects15d = ({ className }: Projects15dProps) => {
+  const videoSections = [
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/3571264-hd_1280_720_30fps.mp4",
+      studioName: "مریدیان لبز",
+      projectTitle: "تعامل‌های اثیری",
+    },
+
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/1448735-hd_1366_720_24fps.mp4",
+      studioName: "زنیث دیجیتال",
+      projectTitle: "نکسوس استودیو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/19348567-hd_1280_720_25fps.mp4",
+      studioName: "پریزم لبز",
+      projectTitle: "مرزهای نو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/9882072-hd_1280_720_30fps.mp4",
+      studioName: "سمفونی تعامل",
+      projectTitle: "تعامل‌های روان",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-8 md:py-32", className)}>
+      <div className="container mx-auto">
+        {/* Header Section */}
+        <div className="mb-12 text-start text-foreground">
+          <h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl">
+            کاوش در پروژه‌های ما
+          </h1>
+
+          <div className="flex items-center">
+            <p className="me-4 text-sm font-medium tracking-wider opacity-80">
+              کارهای ما
+            </p>
+            <div className="opacity-60">
+              <AudioLines className="h-6 w-6" />
+            </div>
+          </div>
+        </div>
+
+        {/* Simple 2x2 Grid Layout */}
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:gap-8">
+          {videoSections.map((section, index) => (
+            <VideoSection
+              key={index}
+              videoSrc={section.videoSrc}
+              thumbnailSrc={section.thumbnailSrc}
+              studioName={section.studioName}
+              projectTitle={section.projectTitle}
+              className="aspect-video"
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects15d };
diff --git a/blocks/projects15e.tsx b/blocks/projects15e.tsx
new file mode 100644
index 0000000..4a2f8bb
--- /dev/null
+++ b/blocks/projects15e.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { AudioLines } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface VideoSectionProps {
+  videoSrc: string;
+  thumbnailSrc: string;
+  studioName: string;
+  projectTitle: string;
+}
+
+const VideoSection: React.FC<VideoSectionProps> = ({
+  videoSrc,
+  thumbnailSrc,
+  studioName,
+  projectTitle,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (isHovered) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      }
+    }
+  }, [isHovered]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className="group relative h-[60vh] w-full cursor-pointer overflow-hidden md:h-[70vh]"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Thumbnail Image */}
+      <img
+        src={thumbnailSrc}
+        alt={projectTitle}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-0" : "opacity-100"
+          }`}
+      />
+
+      {/* Video */}
+      <video
+        ref={videoRef}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+      >
+        <source src={videoSrc} type="video/mp4" />
+        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
+      </video>
+
+      <div className="absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" />
+
+      <div className="absolute inset-0 bottom-12 flex items-end">
+        <div className="px-6 text-start text-white sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <p className="mb-2 text-xs font-medium tracking-wider opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base">
+            {studioName}
+          </p>
+          <h2 className="max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg">
+            {projectTitle}
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const videoSections = [
+  {
+    thumbnailSrc:
+      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+    videoSrc:
+      "/block-media/shadcnblocks/block/3571264-hd_1280_720_30fps.mp4",
+    studioName: "مریدیان لبز",
+    projectTitle: "تعامل‌های اثیری",
+  },
+
+  {
+    thumbnailSrc:
+      "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+    videoSrc:
+      "/block-media/shadcnblocks/block/1448735-hd_1366_720_24fps.mp4",
+    studioName: "زنیث دیجیتال",
+    projectTitle: "نکسوس استودیو",
+  },
+  {
+    thumbnailSrc:
+      "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+    videoSrc:
+      "/block-media/shadcnblocks/block/19348567-hd_1280_720_25fps.mp4",
+    studioName: "پریزم لبز",
+    projectTitle: "مرزهای نو",
+  },
+  {
+    thumbnailSrc:
+      "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+    videoSrc:
+      "/block-media/shadcnblocks/block/9882072-hd_1280_720_30fps.mp4",
+    studioName: "سمفونی تعامل",
+    projectTitle: "تعامل‌های روان",
+  },
+];
+
+interface Projects15eProps {
+  className?: string;
+}
+
+const Projects15e = ({ className }: Projects15eProps) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("w-full bg-background", className)}>
+      {/* Header Section */}
+      <div className="container py-16">
+        <div className="text-start text-foreground">
+          <h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl">
+            کاوش در پروژه‌های ما
+          </h1>
+
+          <div className="flex items-center">
+            <p className="me-4 text-sm font-medium tracking-wider opacity-80">
+              کارهای ما
+            </p>
+            <div className="opacity-60">
+              <AudioLines className="h-6 w-6" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Full Width Carousel */}
+      <div className="w-full">
+        <Carousel
+          dir="rtl"
+          opts={{
+            align: "start",
+            loop: true,
+            direction: "rtl",
+          }}
+          className="w-full"
+        >
+          <CarouselContent className="-ms-2 md:-ms-4">
+            {videoSections.map((section, index) => (
+              <CarouselItem
+                key={index}
+                className="ps-2 md:basis-4/5 md:ps-4 lg:basis-3/4 xl:basis-2/3"
+              >
+                <VideoSection
+                  videoSrc={section.videoSrc}
+                  thumbnailSrc={section.thumbnailSrc}
+                  studioName={section.studioName}
+                  projectTitle={section.projectTitle}
+                />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious className="start-4 md:start-8" />
+          <CarouselNext className="end-4 md:end-8" />
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Projects15e };
diff --git a/blocks/projects16.tsx b/blocks/projects16.tsx
new file mode 100644
index 0000000..3db7e16
--- /dev/null
+++ b/blocks/projects16.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const imgPaths = [
+  "/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/vasilis-karkalas-LadCWrSL7X8-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/vanessa-werder-LjFEoGuj5eY-unsplash.jpg",
+  "/block-media/shadcnblocks/block/photos/vanessa-werder-4G228Duzmn8-unsplash.jpg",
+];
+
+interface Projects16Props {
+  className?: string;
+}
+
+const Projects16 = ({ className }: Projects16Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="mb-12 text-start text-xl leading-tight font-medium md:text-3xl">کشف امکانات بلاک‌ها،<br />ساخت تجربه‌هایی روان و<br />بلاک Hero چشمگیر در تم روشن</h1>
+
+        <div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="space-y-4">
+            <img
+              src={imgPaths[0]}
+              alt="بلاک Hero آرام با فضای خالی فراوان"
+              className="aspect-[4/3] w-full rounded-lg object-cover"
+            />
+            <img
+              src={imgPaths[2]}
+              alt="گرادیان نرم پس‌زمینه بلاک Hero"
+              className="aspect-[4/5] w-full rounded-lg object-cover"
+            />
+          </div>
+
+          <div className="space-y-4">
+            <img
+              src={imgPaths[1]}
+              alt="کارت‌های رنگی روی پس‌زمینه روشن"
+              className="aspect-[4/5] w-full rounded-lg object-cover"
+            />
+            <img
+              src={imgPaths[3]}
+              alt="از موبایل تا دسکتاپ، یکدست و واکنش‌گرا."
+              className="aspect-[4/3] w-full rounded-lg object-cover"
+            />
+          </div>
+        </div>
+
+        <div className="max-w-md text-start">
+          <p className="mb-4 text-muted-foreground">تجربه کاربری همواره در حال تکامل است و بی‌پایان الهام‌بخش. از یک میکروانیمیشن ساده تا یک داشبورد پیچیده، هر روز الگویی تازه برای ساختن و بهبود می‌آورد.</p>
+          <Button variant="link" className="h-auto px-0 text-sm font-medium">
+            کشف بیشتر{" "}
+            <span className="inline-block rtl:rotate-180" aria-hidden>
+              →
+            </span>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects16 };
diff --git a/blocks/projects17.tsx b/blocks/projects17.tsx
new file mode 100644
index 0000000..b415a48
--- /dev/null
+++ b/blocks/projects17.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const projects17Prop = [
+  {
+    id: 1,
+    title: "افزایش ۴۰٪ نرخ تبدیل",
+    location: "شرکت SaaS B2B",
+    year: "۱۴۰۳",
+    category: "CRM",
+    description:
+      "پیاده‌سازی امتیازدهی لید و اتوماسیون ایمیل که نرخ تبدیل را از ۸٪ به ۲۲٪ رساند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+  },
+  {
+    id: 2,
+    title: "کاهش ۶۰٪ زمان پاسخ",
+    location: "تیم پشتیبانی ۵۰ نفره",
+    year: "۱۴۰۳",
+    category: "پشتیبانی",
+    description:
+      "یکپارچه‌سازی CRM با سیستم تیکتینگ و خودکارسازی پاسخ به سوالات متداول.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+  },
+  {
+    id: 3,
+    title: "داشبورد فروش یکپارچه",
+    location: "استارتاپ فناوری",
+    year: "۱۴۰۲",
+    category: "تحلیل",
+    description:
+      "ساخت داشبورد KPI برای نمایش درآمد، قیف فروش و پیش‌بینی فصلی در یک نما.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-3QqzCTIfUJI-unsplash.jpg",
+  },
+  {
+    id: 4,
+    title: "خودکارسازی کمپین ایمیل",
+    location: "آژانس بازاریابی",
+    year: "۱۴۰۲",
+    category: "بازاریابی",
+    description:
+      "راه‌اندازی ۱۲ جریان ایمیل هدفمند با نرخ باز شدن ۲۶٪ و کلیک ۸٪.",
+    image:
+      "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+  },
+  {
+    id: 5,
+    title: "بهینه‌سازی SEO",
+    location: "فروشگاه آنلاین",
+    year: "۱۴۰۳",
+    category: "سئو",
+    description:
+      "افزایش ترافیک ارگانیک ۸۵٪ با استراتژی محتوا و بهینه‌سازی فنی در ۶ ماه.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+  },
+  {
+    id: 6,
+    title: "گزارش عملکرد فصلی",
+    location: "شرکت سازمانی",
+    year: "۱۴۰۲",
+    category: "گزارش‌گیری",
+    description:
+      "گزارش تحلیلی سه‌ماهه با بررسی MRR، churn rate و LTV برای هیئت‌مدیره.",
+    image:
+      "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
+  },
+];
+
+interface Projects17Props {
+  className?: string;
+}
+
+const Projects17 = ({ className }: Projects17Props) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) return;
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="w-full">
+        <div className="mb-16 px-8 text-start">
+          <h1 className="text-3xl font-medium tracking-tight lg:text-6xl">
+            پروژه‌ها
+          </h1>
+        </div>
+        <div className="relative w-full">
+          <Carousel
+            dir="rtl"
+            setApi={setCarouselApi}
+            opts={{
+              align: "start",
+              direction: "rtl",
+              loop: false,
+              breakpoints: {
+                "(max-width: 768px)": {
+                  dragFree: true,
+                },
+              },
+            }}
+            className="w-full"
+          >
+            <CarouselContent>
+              {projects17Prop.map((project) => (
+                <CarouselItem key={project.id} className="basis-auto ps-8">
+                  <div className="w-[500px] space-y-6 text-start">
+                    <div className="aspect-[4/3] overflow-hidden rounded-md">
+                      <img
+                        src={project.image || "/placeholder.svg"}
+                        alt={project.title}
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                    <div className="space-y-4">
+                      <div className="space-y-2">
+                        <h2 className="text-2xl tracking-tight">
+                          {project.title}
+                        </h2>
+                        <p className="text-sm text-muted-foreground">
+                          {project.location}
+                        </p>
+                      </div>
+
+                      <Button variant="secondary">مشاهده پروژه</Button>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="pointer-events-none absolute inset-x-4 inset-y-0 top-40 z-10 flex justify-between">
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollPrev()}
+              disabled={!canScrollPrev}
+              className="pointer-events-auto ms-4 h-10 w-10 rounded-full border-gray-200 bg-white/90 hover:bg-white"
+            >
+              <ArrowRight className="h-4 w-4" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollNext()}
+              disabled={!canScrollNext}
+              className="pointer-events-auto me-4 h-10 w-10 rounded-full border-gray-200 bg-white/90 hover:bg-white"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects17 };
diff --git a/blocks/projects17a.tsx b/blocks/projects17a.tsx
new file mode 100644
index 0000000..abb9120
--- /dev/null
+++ b/blocks/projects17a.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const projects17aProp = [
+  {
+    id: 1,
+    title: "افزایش ۴۰٪ نرخ تبدیل",
+    location: "شرکت SaaS B2B",
+    year: "۱۴۰۳",
+    category: "CRM",
+    description:
+      "پیاده‌سازی امتیازدهی لید و اتوماسیون ایمیل که نرخ تبدیل را از ۸٪ به ۲۲٪ رساند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+  },
+  {
+    id: 2,
+    title: "کاهش ۶۰٪ زمان پاسخ",
+    location: "تیم پشتیبانی ۵۰ نفره",
+    year: "۱۴۰۳",
+    category: "پشتیبانی",
+    description:
+      "یکپارچه‌سازی CRM با سیستم تیکتینگ و خودکارسازی پاسخ به سوالات متداول.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+  },
+  {
+    id: 3,
+    title: "داشبورد فروش یکپارچه",
+    location: "استارتاپ فناوری",
+    year: "۱۴۰۲",
+    category: "تحلیل",
+    description:
+      "ساخت داشبورد KPI برای نمایش درآمد، قیف فروش و پیش‌بینی فصلی در یک نما.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-3QqzCTIfUJI-unsplash.jpg",
+  },
+  {
+    id: 4,
+    title: "خودکارسازی کمپین ایمیل",
+    location: "آژانس بازاریابی",
+    year: "۱۴۰۲",
+    category: "بازاریابی",
+    description:
+      "راه‌اندازی ۱۲ جریان ایمیل هدفمند با نرخ باز شدن ۲۶٪ و کلیک ۸٪.",
+    image:
+      "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+  },
+  {
+    id: 5,
+    title: "بهینه‌سازی SEO",
+    location: "فروشگاه آنلاین",
+    year: "۱۴۰۳",
+    category: "سئو",
+    description:
+      "افزایش ترافیک ارگانیک ۸۵٪ با استراتژی محتوا و بهینه‌سازی فنی در ۶ ماه.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+  },
+  {
+    id: 6,
+    title: "گزارش عملکرد فصلی",
+    location: "شرکت سازمانی",
+    year: "۱۴۰۲",
+    category: "گزارش‌گیری",
+    description:
+      "گزارش تحلیلی سه‌ماهه با بررسی MRR، churn rate و LTV برای هیئت‌مدیره.",
+    image:
+      "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
+  },
+];
+
+interface Projects17aProps {
+  className?: string;
+}
+
+const Projects17a = ({ className }: Projects17aProps) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) return;
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="w-full">
+        <div className="mb-16 px-8 text-start">
+          <h1 className="text-3xl font-medium tracking-tight lg:text-6xl">
+            پروژه‌ها
+          </h1>
+          <p className="mt-4 text-lg text-muted-foreground">
+            مطالعات موردی با چیدمان مینیمال
+          </p>
+        </div>
+        <div className="relative w-full">
+          <Carousel
+            dir="rtl"
+            setApi={setCarouselApi}
+            opts={{
+              align: "start",
+              direction: "rtl",
+              loop: false,
+              breakpoints: {
+                "(max-width: 768px)": {
+                  dragFree: true,
+                },
+              },
+            }}
+            className="w-full"
+          >
+            <CarouselContent>
+              {projects17aProp.map((project) => (
+                <CarouselItem key={project.id} className="basis-auto ps-8">
+                  <div className="w-[700px] space-y-4 text-start">
+                    <div className="aspect-video overflow-hidden rounded-xl">
+                      <img
+                        src={project.image || "/placeholder.svg"}
+                        alt={project.title}
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between gap-4">
+                        <h2 className="text-2xl font-normal tracking-tight">
+                          {project.title}
+                        </h2>
+                        <span className="shrink-0 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
+                          {project.category}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="pointer-events-none absolute inset-x-4 inset-y-0 top-52 z-10 flex justify-between">
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollPrev()}
+              disabled={!canScrollPrev}
+              className="pointer-events-auto ms-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white"
+            >
+              <ArrowRight className="h-5 w-5" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollNext()}
+              disabled={!canScrollNext}
+              className="pointer-events-auto me-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white"
+            >
+              <ArrowLeft className="h-5 w-5" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects17a };
diff --git a/blocks/projects17b.tsx b/blocks/projects17b.tsx
new file mode 100644
index 0000000..230f090
--- /dev/null
+++ b/blocks/projects17b.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import { ArrowLeft, ArrowRight, Calendar, MapPin, Tag } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const projects17bProp = [
+  {
+    id: 1,
+    title: "افزایش ۴۰٪ نرخ تبدیل",
+    location: "شرکت SaaS B2B",
+    year: "۱۴۰۳",
+    category: "CRM",
+    description:
+      "پیاده‌سازی امتیازدهی لید و اتوماسیون ایمیل که نرخ تبدیل را از ۸٪ به ۲۲٪ رساند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+  },
+  {
+    id: 2,
+    title: "کاهش ۶۰٪ زمان پاسخ",
+    location: "تیم پشتیبانی ۵۰ نفره",
+    year: "۱۴۰۳",
+    category: "پشتیبانی",
+    description:
+      "یکپارچه‌سازی CRM با سیستم تیکتینگ و خودکارسازی پاسخ به سوالات متداول.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+  },
+  {
+    id: 3,
+    title: "داشبورد فروش یکپارچه",
+    location: "استارتاپ فناوری",
+    year: "۱۴۰۲",
+    category: "تحلیل",
+    description:
+      "ساخت داشبورد KPI برای نمایش درآمد، قیف فروش و پیش‌بینی فصلی در یک نما.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-3QqzCTIfUJI-unsplash.jpg",
+  },
+  {
+    id: 4,
+    title: "خودکارسازی کمپین ایمیل",
+    location: "آژانس بازاریابی",
+    year: "۱۴۰۲",
+    category: "بازاریابی",
+    description:
+      "راه‌اندازی ۱۲ جریان ایمیل هدفمند با نرخ باز شدن ۲۶٪ و کلیک ۸٪.",
+    image:
+      "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+  },
+  {
+    id: 5,
+    title: "بهینه‌سازی SEO",
+    location: "فروشگاه آنلاین",
+    year: "۱۴۰۳",
+    category: "سئو",
+    description:
+      "افزایش ترافیک ارگانیک ۸۵٪ با استراتژی محتوا و بهینه‌سازی فنی در ۶ ماه.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+  },
+  {
+    id: 6,
+    title: "گزارش عملکرد فصلی",
+    location: "شرکت سازمانی",
+    year: "۱۴۰۲",
+    category: "گزارش‌گیری",
+    description:
+      "گزارش تحلیلی سه‌ماهه با بررسی MRR، churn rate و LTV برای هیئت‌مدیره.",
+    image:
+      "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
+  },
+];
+
+interface Projects17bProps {
+  className?: string;
+}
+
+const Projects17b = ({ className }: Projects17bProps) => {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!carouselApi) return;
+    const updateSelection = () => {
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.canScrollNext());
+    };
+    updateSelection();
+    carouselApi.on("select", updateSelection);
+    return () => {
+      carouselApi.off("select", updateSelection);
+    };
+  }, [carouselApi]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="w-full">
+        <div className="mb-16 px-8 text-start">
+          <h1 className="text-3xl font-medium tracking-tight lg:text-6xl">
+            پروژه‌ها
+          </h1>
+          <p className="mt-4 text-lg text-muted-foreground">
+            مطالعات موردی با جزئیات و اطلاعات کامل
+          </p>
+        </div>
+        <div className="relative w-full">
+          <Carousel
+            dir="rtl"
+            setApi={setCarouselApi}
+            opts={{
+              align: "start",
+              direction: "rtl",
+              loop: false,
+              breakpoints: {
+                "(max-width: 768px)": {
+                  dragFree: true,
+                },
+              },
+            }}
+            className="w-full"
+          >
+            <CarouselContent className="pe-8">
+              {projects17bProp.map((project) => (
+                <CarouselItem key={project.id} className="basis-auto ps-8">
+                  <div className="w-[calc(100vw-6rem)] sm:w-[350px] md:w-[450px]">
+                    <div className="overflow-hidden rounded-xl border bg-card text-start text-card-foreground shadow-sm">
+                      <div className="aspect-square overflow-hidden">
+                        <img
+                          src={project.image || "/placeholder.svg"}
+                          alt={project.title}
+                          className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
+                        />
+                      </div>
+                      <div className="space-y-4 p-6">
+                        <div className="space-y-3">
+                          <div className="flex items-start justify-between gap-3">
+                            <h2 className="text-xl leading-tight font-semibold">
+                              {project.title}
+                            </h2>
+                            <Badge variant="secondary" className="shrink-0">
+                              <Tag className="me-1 h-3 w-3" />
+                              {project.category}
+                            </Badge>
+                          </div>
+
+                          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                            <div className="flex items-center gap-1">
+                              <MapPin className="h-4 w-4" />
+                              {project.location}
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <Calendar className="h-4 w-4" />
+                              {project.year}
+                            </div>
+                          </div>
+                        </div>
+
+                        <p className="text-sm leading-relaxed text-muted-foreground">
+                          {project.description}
+                        </p>
+
+                        <div className="pt-2">
+                          <Button
+                            variant="default"
+                            size="sm"
+                            className="w-full"
+                          >
+                            مشاهده جزئیات
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="pointer-events-none absolute inset-x-0 inset-y-0 top-60 z-10 flex justify-between px-8">
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollPrev()}
+              disabled={!canScrollPrev}
+              className="pointer-events-auto h-10 w-10 rounded-full border-gray-200 bg-white/90 shadow-lg hover:bg-white"
+            >
+              <ArrowRight className="h-4 w-4" />
+              <span className="sr-only">اسلاید قبلی</span>
+            </Button>
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => carouselApi?.scrollNext()}
+              disabled={!canScrollNext}
+              className="pointer-events-auto h-10 w-10 rounded-full border-gray-200 bg-white/90 shadow-lg hover:bg-white"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              <span className="sr-only">اسلاید بعدی</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects17b };
diff --git a/blocks/projects18.tsx b/blocks/projects18.tsx
new file mode 100644
index 0000000..9a20e12
--- /dev/null
+++ b/blocks/projects18.tsx
@@ -0,0 +1,114 @@
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const projects = [
+  {
+    heading: "فضای کاری طراحی",
+    subheading: "طراحی محصول",
+    description:
+      "این پروژه شامل بازطراحی کامل داشبورد یک محصول سامانه ابری است؛ تمرکز بر زیبایی‌شناسی مینیمال و باز با تأکیدهای رنگی گرم. هدف، بیشینه‌سازی خوانایی داده و بهینه‌سازی جریان کاربر است.",
+    image:
+      "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg",
+    url: "#",
+  },
+  {
+    heading: "رابط مدرن محصول",
+    subheading: "داشبورد کاری",
+    description:
+      "در این پروژه داشبورد همکاری پویایی طراحی شد که بهره‌وری و کار تیمی را تقویت می‌کند؛ شامل نواحی کاری منعطف، کامپوننت‌های ماژولار و فضاهای تمرکز.",
+    image:
+      "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg",
+    url: "#",
+  },
+  {
+    heading: "رابط دنج اپ سفارش غذا",
+    subheading: "رابط فروشگاهی",
+    description:
+      "در این پروژه یک رابط صمیمی برای یک اپ سفارش غذا ساخته شد؛ شامل چیدمان سفارشی کارت‌ها، انتخاب تم گرم و طراحی بخش‌های شاخص.",
+    image:
+      "/block-media/shadcnblocks/block/photos/michal-balog-HTNB1UDJ4Hg-unsplash.jpg",
+    url: "#",
+  },
+  {
+    heading: "رابط فروشگاه بوتیک",
+    subheading: "طراحی اپ سفارش غذا",
+    description:
+      "هدف اینجا خلق یک رابط فراگیر برای فروشگاه آنلاین است که تجربه خرید کاربر را ارتقا می‌دهد؛ با تمرکز بر جانمایی استراتژیک محصول و سلسله‌مراتب بصری.",
+    image:
+      "/block-media/shadcnblocks/block/photos/ivan-lopatin-w2DMtHixE5o-unsplash.jpg",
+    url: "#",
+  },
+];
+
+const projectNumbers = ["۱", "۲", "۰۳", "۰۴"];
+
+interface Projects18Props {
+  className?: string;
+}
+
+const Projects18 = ({ className }: Projects18Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-start">
+          <p className="mb-1 text-muted-foreground md:text-lg">
+            ایده‌ها را به واقعیت تبدیل کنید
+          </p>
+          <h1 className="text-3xl font-bold md:text-7xl">پروژه‌ها</h1>
+          <p className="mt-7 max-w-2xl text-muted-foreground">جایی که مهندسی، طراحی و چشم‌انداز برای ساخت رابط‌های خیره‌کننده گرد هم می‌آیند. مجموعه کامل پروژه‌های ما را ببینید؛ هر کدام با دقت ساخته شده تا تجربه کاربری را دگرگون کند و کار مشتریانمان را در سراسر جهان بهتر سازد.</p>
+          <Button variant="outline" size="lg" className="mt-7">
+            مشاهده همه
+            <ArrowDownRight className="size-4 rtl:rotate-180" />
+          </Button>
+        </div>
+        <div className="mt-24 flex flex-col gap-5 md:mt-36">
+          {projects.map((project, idx) => (
+            <a
+              key={idx}
+              href={project.url}
+              className="group relative isolate min-h-72 bg-cover bg-center px-5 py-14 text-start lg:px-12 lg:py-24"
+              style={{
+                backgroundImage: `url(${project.image})`,
+              }}
+            >
+              <div className="relative z-10 flex flex-col gap-7 text-white/80 transition-colors duration-300 ease-out group-hover:text-white lg:flex-row">
+                <div className="flex gap-1 text-2xl font-bold">
+                  <span>/</span>
+                  <span>{projectNumbers[idx]}</span>
+                </div>
+                <div className="flex flex-1 flex-col gap-2.5">
+                  <h3 className="text-2xl font-bold lg:text-4xl">
+                    {project.heading}
+                  </h3>
+                  <p className="text-sm font-medium">{project.subheading}</p>
+                </div>
+                <div className="flex-1">
+                  <div className="flex flex-col">
+                    <p>{project.description}</p>
+                    <div className="mt-2.5 h-0 overflow-hidden transition-all duration-300 ease-out group-hover:h-10">
+                      <div>
+                        <Button
+                          variant="outline"
+                          size="lg"
+                          className="dark w-fit opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100"
+                        >
+                          مشاهده پروژه
+                          <ArrowUpRight className="size-4 rtl:rotate-180" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="absolute inset-0 z-0 bg-black/80 backdrop-blur-xs transition-all duration-300 ease-out group-hover:bg-black/50 group-hover:backdrop-blur-none" />
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects18 };
diff --git a/blocks/projects2.tsx b/blocks/projects2.tsx
new file mode 100644
index 0000000..56ae838
--- /dev/null
+++ b/blocks/projects2.tsx
@@ -0,0 +1,76 @@
+import { cn } from "@/lib/utils";
+
+interface Projects2type {
+  title: string;
+  description: string;
+  imagePath: string;
+  imageAlt: string;
+}
+
+const projects2prop: Projects2type[] = [
+  {
+    title: "موزاییک",
+    description:
+      "کاوشی در هماهنگی میان معماری فرانت‌اند و تجربه کاربر. این رویکرد کامپوننت‌های استاندارد و چیدمان منعطف را می‌آمیزد تا رابط‌هایی روان و قابل‌نگهداری بسازد.",
+    imagePath: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    imageAlt: "نمایش تعاملی دیجیتال مدرن",
+  },
+  {
+    title: "محصول بازطراحی‌شده",
+    description:
+      "بازطراحی داشبورد CRM با تمرکز بر نمایش خط لوله معاملات و KPIهای فروش در یک نمای یکپارچه.",
+    imagePath: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    imageAlt: "موکاپ‌ها و عناصر دیزاین سیستم",
+  },
+  {
+    title: "فضاهای تمرکز",
+    description:
+      "یک نمایش تعاملی که داده‌های زنده را به نمودارها و کارت‌های واکنش‌گرا تبدیل می‌کند و کاربر را به کاوش در داشبورد دعوت می‌کند.",
+    imagePath: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    imageAlt: "مفهوم طراحی رابط و معماری فرانت‌اند",
+  },
+];
+
+interface Projects2Props {
+  className?: string;
+}
+
+const Projects2 = ({ className }: Projects2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="mb-16 text-4xl font-normal tracking-wide text-foreground md:mb-24 md:text-6xl lg:text-7xl">نمایش پروژه‌ها</h1>
+
+        <div className="space-y-16 md:space-y-24 lg:space-y-32">
+          {projects2prop.map((project, index) => (
+            <div
+              key={index}
+              className="grid grid-cols-1 items-center gap-8 text-start lg:grid-cols-12 lg:gap-12"
+            >
+              <div className="order-2 lg:order-1 lg:col-span-4">
+                <h2 className="mb-4 text-base font-bold tracking-wide text-foreground md:text-base">
+                  {project.title}
+                </h2>
+                <p className="max-w-sm text-sm leading-relaxed text-muted-foreground md:text-base">
+                  {project.description}
+                </p>
+              </div>
+
+              <div className="order-1 lg:order-2 lg:col-span-8">
+                <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg border border-border">
+                  <img
+                    src={project.imagePath}
+                    alt={project.imageAlt}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects2 };
diff --git a/blocks/projects3.tsx b/blocks/projects3.tsx
new file mode 100644
index 0000000..f16daec
--- /dev/null
+++ b/blocks/projects3.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  useScroll,
+  useTransform,
+} from "framer-motion";
+import { Plus } from "lucide-react";
+import React from "react";
+import { useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const projects = [
+  {
+    id: 1,
+    title: "بهینه‌سازی گردش کار طراحی",
+    category: "رابط و تجربه کاربری",
+    date: "۲۰ خرداد ۱۴۰۴",
+    image:
+      "/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg",
+  },
+  {
+    id: 2,
+    title: "دسترسی یکپارچه جهانی",
+    category: "فناوری ابری",
+    date: "۱۸ خرداد ۱۴۰۴",
+    image:
+      "/block-media/shadcnblocks/block/photos/israel-andrade-YI_9SivVt_s-unsplash.jpg",
+  },
+];
+
+const ProjectItem = ({
+  project,
+  index,
+  containerRef,
+  hoveredIndex,
+  setHoveredIndex,
+  mousePos,
+  setMousePos,
+}: {
+  project: {
+    id: number;
+    title: string;
+    category: string;
+    date: string;
+    image: string;
+  };
+  index: number;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  hoveredIndex: number | null;
+  setHoveredIndex: (index: number | null) => void;
+  mousePos: { x: number; y: number };
+  setMousePos: (pos: { x: number; y: number }) => void;
+}) => {
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end start"],
+  });
+
+  const scrollScale = useTransform(
+    scrollYProgress,
+    [0, 0.5, 1],
+    [0.95, 1, 1.05],
+  );
+  const scrollY = useTransform(scrollYProgress, [0, 1], [50, -50]);
+  const scrollOpacity = useTransform(
+    scrollYProgress,
+    [0, 0.2, 0.8, 1],
+    [0.7, 1, 1, 0.7],
+  );
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    setMousePos({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+    setHoveredIndex(index);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredIndex(null);
+  };
+
+  return (
+    <motion.div
+      key={project.id}
+      className="group relative cursor-pointer"
+      variants={{
+        hidden: { opacity: 0, y: 60, scale: 0.95 },
+        visible: {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          transition: {
+            duration: 0.8,
+            ease: [0.25, 0.46, 0.45, 0.94],
+          },
+        },
+      }}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      whileHover={{ scale: 1.02 }}
+      transition={{ duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }}
+    >
+      <motion.div
+        className="relative overflow-hidden rounded-xl"
+        style={{
+          scale: scrollScale,
+          y: scrollY,
+          opacity: scrollOpacity,
+        }}
+      >
+        <motion.img
+          src={project.image}
+          alt={project.title}
+          className="h-full w-full rounded-xl object-cover"
+          initial={{ scale: 1.1 }}
+          animate={{ scale: hoveredIndex === index ? 1.15 : 1.1 }}
+          transition={{
+            duration: 0.8,
+            ease: [0.25, 0.46, 0.45, 0.94],
+          }}
+        />
+        <motion.div
+          className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"
+          initial={{ opacity: 0.6 }}
+          animate={{ opacity: hoveredIndex === index ? 0.8 : 0.6 }}
+          transition={{ duration: 0.4 }}
+        />
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
+          <motion.div
+            className="flex items-center gap-2 text-sm text-white/80 lg:mb-4"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: hoveredIndex === index ? -5 : 0 }}
+            transition={{ duration: 0.5, delay: 0.1, ease: "easeOut" }}
+          >
+            <p className="text-lg font-medium">{project.date}</p>
+            <span>|</span>
+            <p>{project.category}</p>
+          </motion.div>
+          <motion.h2
+            className="px-4 text-center text-xl font-semibold md:text-4xl"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{
+              opacity: 1,
+              y: hoveredIndex === index ? -10 : 0,
+              scale: hoveredIndex === index ? 1.05 : 1,
+            }}
+            transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
+          >
+            {project.title}
+          </motion.h2>
+        </div>
+      </motion.div>
+
+      <AnimatePresence>
+        {hoveredIndex === index && (
+          <motion.div
+            key={`icon-${project.id}`}
+            initial={{ opacity: 0, scale: 0, rotate: -180 }}
+            animate={{ opacity: 1, scale: 1, rotate: 0 }}
+            exit={{ opacity: 0, scale: 0, rotate: 180 }}
+            transition={{
+              type: "spring",
+              stiffness: 400,
+              damping: 25,
+              duration: 0.3,
+            }}
+            style={{
+              top: mousePos.y - 24,
+              left: mousePos.x - 24,
+              position: "absolute",
+              pointerEvents: "none",
+            }}
+            className="z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/30 bg-white/20 text-white shadow-lg backdrop-blur-sm"
+          >
+            <motion.div
+              transition={{
+                duration: 2,
+                repeat: Number.POSITIVE_INFINITY,
+                ease: "linear",
+              }}
+            >
+              <Plus size={20} />
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+};
+
+interface Projects3Props {
+  className?: string;
+}
+
+const Projects3 = ({ className }: Projects3Props) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const isInView = useInView(containerRef, { once: true, margin: "-100px" });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container space-y-16">
+        <h1 className="text-center text-4xl font-semibold md:text-6xl">
+          پروژه‌های ما
+        </h1>
+
+        <motion.div
+          ref={containerRef}
+          className="mx-auto grid max-w-7xl grid-cols-1 gap-8 lg:gap-12"
+          variants={{
+            hidden: { opacity: 0 },
+            visible: {
+              opacity: 1,
+              transition: {
+                staggerChildren: 0.3,
+                delayChildren: 0.2,
+              },
+            },
+          }}
+          initial="hidden"
+          animate={isInView ? "visible" : "hidden"}
+        >
+          {projects.map((project, index) => (
+            <ProjectItem
+              key={project.id}
+              project={project}
+              index={index}
+              containerRef={containerRef}
+              hoveredIndex={hoveredIndex}
+              setHoveredIndex={setHoveredIndex}
+              mousePos={mousePos}
+              setMousePos={setMousePos}
+            />
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects3 };
diff --git a/blocks/projects4.tsx b/blocks/projects4.tsx
new file mode 100644
index 0000000..bd9fc4a
--- /dev/null
+++ b/blocks/projects4.tsx
@@ -0,0 +1,93 @@
+import { cn } from "@/lib/utils";
+
+interface Projects4Props {
+  className?: string;
+}
+
+const Projects4 = ({ className }: Projects4Props) => {
+  const projects = [
+    {
+      id: 1,
+      title: "بهینه‌سازی گردش کار طراحی",
+      category: "رابط و تجربه کاربری",
+      date: "۲۰ خرداد ۱۴۰۴",
+      image:
+        "/block-media/shadcnblocks/block/illustrations/tokyo-browser-window-with-settings-and-design-panels.svg",
+    },
+    {
+      id: 2,
+      title: "دسترسی یکپارچه جهانی",
+      category: "فناوری ابری",
+      date: "۱۸ خرداد ۱۴۰۴",
+      image:
+        "/block-media/shadcnblocks/block/illustrations/tokyo-exchange-between-the-user-and-the-global-network.svg",
+    },
+    {
+      id: 3,
+      title: "رابط بارگذاری صفحه بعد",
+      category: "توسعه فرانت‌اند",
+      date: "۱۵ خرداد ۱۴۰۴",
+      image:
+        "/block-media/shadcnblocks/block/illustrations/tokyo-loading-the-next-page.svg",
+    },
+    {
+      id: 4,
+      title: "تحلیل ترافیک وب",
+      category: "مصورسازی داده",
+      date: "۱۰ خرداد ۱۴۰۴",
+      image:
+        "/block-media/shadcnblocks/block/illustrations/tokyo-volumetric-analytics-of-different-types-in-web-browsers.svg",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container space-y-16">
+        <div className="flex flex-col justify-start gap-5 text-start md:gap-12 lg:flex-row lg:items-center lg:justify-between">
+          <h1 className="text-4xl font-medium md:text-5xl lg:text-7xl">
+            کاوش در پروژه‌های ما
+          </h1>
+
+          <div className="flex flex-col items-start gap-6 md:flex-row">
+            <p className="max-w-xs text-lg font-medium text-muted-foreground">مجموعه‌ای گزیده از نماها که رویکرد ما به طراحی تمیز، تجربه کاربری آگاهانه و وب مدرن را نشان می‌دهد.</p>
+
+            <div className="max-w-xs">
+              <span className="font-medium text-foreground">هویت بصری</span>
+              <p className="text-base text-muted-foreground">
+                هر پروژه مطالعه موردی منحصربه‌فردی است که با دقت، عملکرد و
+                هدف ساخته شده.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2">
+          {projects.map((project) => (
+            <div key={project.id} className="group text-start">
+              <img
+                src={project.image}
+                alt={project.title}
+                className="h-96 w-full rounded-lg bg-accent object-contain transition-transform duration-300 group-hover:scale-105"
+              />
+              <div className="mt-4 flex items-start justify-between">
+                <div>
+                  <h2 className="text-xl font-semibold">{project.title}</h2>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    {project.category}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xl font-medium text-muted-foreground">
+                    {project.date}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects4 };
diff --git a/blocks/projects5.tsx b/blocks/projects5.tsx
new file mode 100644
index 0000000..9d29a36
--- /dev/null
+++ b/blocks/projects5.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+const projects5prop = [
+  {
+    title: "طراحی مقیاس‌پذیر",
+    img: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
+    year: "۱۴۰۴",
+    type: "محصول",
+    url: "#",
+  },
+  {
+    title: "رابط شهری رنگارنگ",
+    img: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
+    year: "۱۴۰۴",
+    type: "طراحی وب",
+    url: "#",
+  },
+  {
+    title: "داشبورد مینیمال لوکس",
+    img: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
+    year: "۱۴۰۴",
+    type: "رابط کاربری",
+    url: "#",
+  },
+  {
+    title: "رابط شهری مینیمال",
+    img: "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-g3U7sqtdJ1w-unsplash.jpg",
+    year: "۱۴۰۴",
+    type: "طراحی محصول",
+    url: "#",
+  },
+  {
+    title: "معماری فرانت‌اند",
+    img: "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
+    year: "۱۴۰۴",
+    type: "صفحه اصلی مینیمال",
+    url: "#",
+  },
+  {
+    title: "کامپوننت در بستر واقعی",
+    img: "/block-media/shadcnblocks/block/lummi/bw16.jpeg",
+    year: "۱۴۰۴",
+    type: "مودال تأیید با بلاک Dialog",
+    url: "#",
+  },
+];
+
+interface Projects5Props {
+  className?: string;
+}
+
+const Projects5 = ({ className }: Projects5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container text-start">
+        <h1 className="text-7xl leading-tight">پروژه‌ها</h1>
+
+        <div className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2">
+          {projects5prop.map((project, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 50 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: index * 0.1 }}
+              viewport={{ once: true }}
+              className="group overflow-hidden rounded-lg border border-border bg-background"
+            >
+              <a href={project.url} className="block overflow-hidden">
+                <img
+                  src={project.img}
+                  alt={project.title}
+                  className="h-96 w-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105"
+                />
+              </a>
+              <div className="flex items-center justify-between px-5 py-4">
+                <div>
+                  <h2 className="text-lg font-semibold">{project.title}</h2>
+                  <p className="text-muted-foreground">{project.type}</p>
+                </div>
+                <div className="rounded-2xl border border-border px-5 py-2 text-sm font-semibold">
+                  {project.year}
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects5 };
diff --git a/blocks/projects6.tsx b/blocks/projects6.tsx
new file mode 100644
index 0000000..adc2541
--- /dev/null
+++ b/blocks/projects6.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import type { Variants } from "framer-motion";
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const projects6Props = [
+  {
+    id: 1,
+    category: "محصول",
+    title: "پوما",
+    image: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+    description: "رابط‌های جسورانه و الگوهای ماندگار.",
+  },
+  {
+    id: 2,
+    category: "فرهنگ",
+    title: "پس از انتشار",
+    image: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+    description: "چه انتشاری!",
+  },
+  {
+    id: 3,
+    category: "فرهنگ",
+    title: "نمایش پروژه",
+    image: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+    description: "ثبت تعامل‌های واقعی کاربر در محیط محصول.",
+  },
+  {
+    id: 4,
+    category: "وب",
+    title: "ظرافت",
+    image: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+    description: "الگوهای رابطی که محصولات نسل ما را تعریف می‌کنند.",
+  },
+];
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.6,
+      ease: "easeOut",
+    },
+  },
+};
+
+const ProjectCard = ({
+  project,
+}: {
+  project: (typeof projects6Props)[0];
+  index: number;
+}) => {
+  return (
+    <motion.div
+      variants={itemVariants}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      className="group relative cursor-pointer overflow-hidden rounded-3xl bg-black shadow-2xl"
+    >
+      <div className="relative aspect-[5/5] overflow-hidden">
+        <img
+          src={project.image}
+          alt={project.title}
+          className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
+        />
+
+        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+
+        <div className="absolute top-4 start-4">
+          <span className="inline-block rounded-full border border-white/20 bg-black/50 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur-sm">
+            {project.category}
+          </span>
+        </div>
+
+        <div className="absolute top-4 end-4 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-sm">
+            <ArrowUpRight className="h-4 w-4 text-white rtl:rotate-180" />
+          </div>
+        </div>
+
+        <div className="absolute inset-x-4 bottom-4 text-start">
+          <h3 className="mb-1 text-2xl font-bold tracking-tight text-white md:text-3xl">
+            {project.title}
+          </h3>
+          <p className="text-sm text-white/70 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            {project.description}
+          </p>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+interface Projects6Props {
+  className?: string;
+}
+
+const Projects6 = ({ className }: Projects6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+          className="mb-20 text-center"
+        >
+          <div className="mb-6">
+            <span className="inline-flex items-center gap-2 text-sm font-medium tracking-wide text-muted-foreground">
+              <div className="h-2 w-2 rounded-full bg-foreground"></div>کاربر در حال تعامل</span>
+          </div>
+          <h1 className="text-6xl leading-none font-black tracking-tight md:text-8xl lg:text-9xl">
+            <span className="block">ثبت</span>
+            <span className="block">لحظات</span>
+          </h1>
+        </motion.div>
+
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className="mx-auto grid max-w-7xl grid-cols-1 gap-4 md:grid-cols-2"
+        >
+          {projects6Props.map((project, index) => (
+            <ProjectCard key={project.id} project={project} index={index} />
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects6 };
diff --git a/blocks/projects7.tsx b/blocks/projects7.tsx
new file mode 100644
index 0000000..7dfc12e
--- /dev/null
+++ b/blocks/projects7.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects7Type {
+  id: number;
+  title: string;
+  category: string;
+  description: string;
+  image: string;
+  tags: string[];
+}
+
+const categoryLabels: Record<string, string> = {
+  MINIMAL: "مینیمال",
+  ABSTRACT: "انتزاعی",
+  EDITORIAL: "ادیتوریال",
+  "STUDIO SHOT": "عکاسی استودیو",
+};
+
+const filterCategories = [
+  { key: "ALL", label: "همه" },
+  { key: "MINIMAL", label: "مینیمال" },
+  { key: "ABSTRACT", label: "انتزاعی" },
+  { key: "EDITORIAL", label: "ادیتوریال" },
+  { key: "STUDIO SHOT", label: "عکاسی استودیو" },
+] as const;
+
+const Projects7Data: Projects7Type[] = [
+  {
+    id: 1,
+    title: "هندسه مینیمال",
+    category: "MINIMAL",
+    description:
+      "ترکیبی تمیز با تمرکز بر شکل‌های ساده و فضای منفی که آرامش و وضوح را برمی‌انگیزد.",
+    image: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
+    tags: ["minimal", "geometry"],
+  },
+  {
+    id: 2,
+    title: "جریان رنگ انتزاعی",
+    category: "ABSTRACT",
+    description:
+      "رنگ‌های زنده در الگویی انتزاعی می‌آمیزند و حس حرکت و انرژی می‌آفرینند.",
+    image: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
+    tags: ["abstract", "color"],
+  },
+  {
+    id: 3,
+    title: "پرتره ادیتوریال",
+    category: "EDITORIAL",
+    description:
+      "پرتره‌ای ادیتوریال چشمگیر با نورپردازی دراماتیک و تمرکز بر بیان و حس.",
+    image: "/block-media/shadcnblocks/block/lummi/random3.jpeg",
+    tags: ["editorial", "portrait"],
+  },
+  {
+    id: 4,
+    title: "طبیعت بی‌جان استودیو",
+    category: "STUDIO SHOT",
+    description:
+      "عکاسی استودیویی با چیدمانی دقیق از اشیای روزمره که بافت و فرم را برجسته می‌کند.",
+    image: "/block-media/shadcnblocks/block/lummi/random4.jpeg",
+    tags: ["studio", "still-life"],
+  },
+  {
+    id: 5,
+    title: "سایه‌های مینیمال",
+    category: "MINIMAL",
+    description:
+      "سایه‌های نرم و گرادیان‌های ظریف، صحنه‌ای آرام و مینیمال با حس مدرن می‌سازند.",
+    image: "/block-media/shadcnblocks/block/lummi/random5.jpeg",
+    tags: ["minimal", "shadows"],
+  },
+  {
+    id: 6,
+    title: "استودیوی انتزاعی",
+    category: "ABSTRACT",
+    description:
+      "نور استودیو با فرم‌های انتزاعی در این ترکیب‌بندی آزمایشی می‌آمیزد و هنر و عکاسی را در هم می‌کشد.",
+    image: "/block-media/shadcnblocks/block/lummi/random6.jpeg",
+    tags: ["abstract", "studio"],
+  },
+];
+
+interface Projects7Props {
+  className?: string;
+}
+
+const Projects7 = ({ className }: Projects7Props) => {
+  const [activeFilter, setActiveFilter] = useState<string>("ALL");
+  const [filteredItems, setFilteredItems] = useState(Projects7Data);
+
+  const handleFilterChange = (category: string) => {
+    setActiveFilter(category);
+
+    if (category === "ALL") {
+      setFilteredItems(Projects7Data);
+    } else {
+      const filtered = Projects7Data.filter(
+        (item) =>
+          item.category === category ||
+          item.tags.includes(category.toLowerCase().replace(" ", "-")),
+      );
+      setFilteredItems(filtered);
+    }
+  };
+
+  const activeFilterLabel =
+    filterCategories.find((item) => item.key === activeFilter)?.label ??
+    activeFilter;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-16 flex flex-wrap justify-center gap-8">
+            {filterCategories.map(({ key, label }) => (
+              <button
+                key={key}
+                onClick={() => handleFilterChange(key)}
+                className={`text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground ${
+                  activeFilter === key
+                    ? "border-b-2 border-border pb-1 text-foreground"
+                    : "text-gray-500"
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+
+          <motion.div layout className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            <AnimatePresence mode="wait">
+              {filteredItems.map((item) => (
+                <motion.div
+                  key={item.id}
+                  layout
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{
+                    duration: 0.2,
+                    ease: "easeInOut",
+                  }}
+                  className="group relative cursor-pointer overflow-hidden rounded-lg"
+                >
+                  <div className="relative aspect-[4/3] h-96 w-full">
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className="object-cover transition-transform duration-300"
+                    />
+
+                    <motion.div className="absolute inset-0 flex flex-col items-center justify-center bg-black/60 p-8 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                      <motion.div className="translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
+                        <p className="mb-4 text-xs font-medium tracking-widest text-gray-300">
+                          {categoryLabels[item.category] ?? item.category}
+                        </p>
+                        <h3 className="mb-4 text-2xl font-light tracking-wide">
+                          {item.title}
+                        </h3>
+                        <p className="max-w-xs text-sm leading-relaxed text-gray-200">
+                          {item.description}
+                        </p>
+                      </motion.div>
+                    </motion.div>
+                  </div>
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </motion.div>
+
+          {filteredItems.length === 0 && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="py-16 text-center"
+            >
+              <p className="text-lg text-gray-500">
+                موردی در دسته «{activeFilterLabel}» یافت نشد.
+              </p>
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects7 };
diff --git a/blocks/projects8.tsx b/blocks/projects8.tsx
new file mode 100644
index 0000000..bb111bd
--- /dev/null
+++ b/blocks/projects8.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects8type {
+  id: number;
+  title: string;
+  category: string;
+  description: string;
+  image: string;
+  tags: string[];
+}
+
+const categoryLabels: Record<string, string> = {
+  "MOONLIGHT VISIONS": "فروش",
+  "PIXEL PARADE": "بازاریابی",
+  "WANDER SKETCHES": "CRM",
+  "ECHO FIELDS": "تحلیل",
+  "NEON TAPESTRY": "پشتیبانی",
+  VIDEOS: "گزارش",
+};
+
+const filterCategories = [
+  { key: "ALL", label: "همه" },
+  { key: "MOONLIGHT VISIONS", label: "فروش" },
+  { key: "PIXEL PARADE", label: "بازاریابی" },
+  { key: "WANDER SKETCHES", label: "CRM" },
+  { key: "ECHO FIELDS", label: "تحلیل" },
+  { key: "NEON TAPESTRY", label: "پشتیبانی" },
+] as const;
+
+const Projects8Data: Projects8type[] = [
+  {
+    id: 1,
+    title: "افزایش ۴۰٪ نرخ تبدیل",
+    category: "MOONLIGHT VISIONS",
+    description:
+      "پیاده‌سازی اتوماسیون ایمیل و امتیازدهی لید برای شرکت SaaS B2B.",
+    image:
+      "/block-media/shadcnblocks/block/photos/vanessa-werder-LjFEoGuj5eY-unsplash.jpg",
+    tags: ["crm", "automation"],
+  },
+  {
+    id: 2,
+    title: "کاهش ۶۰٪ زمان پاسخ‌گویی",
+    category: "PIXEL PARADE",
+    description:
+      "یکپارچه‌سازی CRM با سیستم تیکتینگ برای تیم پشتیبانی ۵۰ نفره.",
+    image:
+      "/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg",
+    tags: ["support", "crm"],
+  },
+  {
+    id: 3,
+    title: "داشبورد فروش یکپارچه",
+    category: "WANDER SKETCHES",
+    description:
+      "ساخت داشبورد KPI برای نمایش درآمد، قیف فروش و پیش‌بینی فصلی.",
+    image:
+      "/block-media/shadcnblocks/block/photos/vanessa-werder-PrsQ3hfBFTI-unsplash.jpg",
+    tags: ["analytics", "sales"],
+  },
+  {
+    id: 4,
+    title: "داشبورد تحلیلی",
+    category: "ECHO FIELDS",
+    description:
+      "داشبورد تحلیلی برای نمایش KPIهای فروش و بازاریابی با نمودارهای تعاملی.",
+    image:
+      "/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg",
+    tags: ["analytics", "dashboard"],
+  },
+  {
+    id: 5,
+    title: "خودکارسازی کمپین",
+    category: "NEON TAPESTRY",
+    description:
+      "راه‌اندازی جریان‌های ایمیل هدفمند برای ۱۲ بخش مخاطب مختلف.",
+    image:
+      "/block-media/shadcnblocks/block/photos/vanessa-werder-4G228Duzmn8-unsplash.jpg",
+    tags: ["marketing", "email"],
+  },
+  {
+    id: 6,
+    title: "گزارش عملکرد فصلی",
+    category: "VIDEOS",
+    description:
+      "گزارش تحلیلی سه‌ماهه با بررسی ROI کمپین‌ها و رشد درآمد تکرارشونده.",
+    image:
+      "/block-media/shadcnblocks/block/photos/vasilis-karkalas-1LT5DG5BD6Q-unsplash.jpg",
+    tags: ["reporting", "revenue"],
+  },
+];
+
+interface Projects8Props {
+  className?: string;
+}
+
+const Projects8 = ({ className }: Projects8Props) => {
+  const [activeFilter, setActiveFilter] = useState<string>("ALL");
+  const [filteredItems, setFilteredItems] = useState(Projects8Data);
+
+  const handleFilterChange = (category: string) => {
+    setActiveFilter(category);
+
+    if (category === "ALL") {
+      setFilteredItems(Projects8Data);
+    } else {
+      const filtered = Projects8Data.filter(
+        (item) =>
+          item.category === category ||
+          item.tags.includes(category.toLowerCase().replace(" ", "-")),
+      );
+      setFilteredItems(filtered);
+    }
+  };
+
+  const activeFilterLabel =
+    filterCategories.find((item) => item.key === activeFilter)?.label ??
+    categoryLabels[activeFilter] ??
+    activeFilter;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-16 flex flex-wrap justify-center gap-8">
+            {filterCategories.map(({ key, label }) => (
+              <button
+                key={key}
+                onClick={() => handleFilterChange(key)}
+                className={`text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground ${
+                  activeFilter === key
+                    ? "border-b-2 border-border pb-1 text-foreground"
+                    : "text-gray-500"
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+
+          <motion.div layout className="grid grid-cols-1 gap-8 md:grid-cols-3">
+            <AnimatePresence mode="wait">
+              {filteredItems.map((item) => (
+                <motion.div
+                  key={item.id}
+                  layout
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{
+                    duration: 0.2,
+                    ease: "easeInOut",
+                  }}
+                  className="group relative cursor-pointer overflow-hidden rounded-lg"
+                >
+                  <div className="relative aspect-[4/3] h-96 w-full">
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className="object-cover transition-transform duration-300"
+                    />
+
+                    <motion.div className="absolute inset-0 flex flex-col items-center justify-center bg-black/60 p-8 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                      <motion.div className="translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
+                        <p className="mb-4 text-xs font-medium tracking-widest text-gray-300">
+                          {categoryLabels[item.category] ?? item.category}
+                        </p>
+                        <h3 className="mb-4 text-2xl font-light tracking-wide">
+                          {item.title}
+                        </h3>
+                        <p className="max-w-xs text-sm leading-relaxed text-gray-200">
+                          {item.description}
+                        </p>
+                      </motion.div>
+                    </motion.div>
+                  </div>
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </motion.div>
+
+          {filteredItems.length === 0 && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="py-16 text-center"
+            >
+              <p className="text-lg text-gray-500">
+                موردی در دسته «{activeFilterLabel}» یافت نشد.
+              </p>
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects8 };
diff --git a/blocks/projects9.tsx b/blocks/projects9.tsx
new file mode 100644
index 0000000..e2dd259
--- /dev/null
+++ b/blocks/projects9.tsx
@@ -0,0 +1,78 @@
+import { cn } from "@/lib/utils";
+
+interface Projects9Props {
+  className?: string;
+}
+
+const Projects9 = ({ className }: Projects9Props) => {
+  const images = [
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
+      alt: "نمای خلوت",
+      title: "افکت‌های نور",
+      description: "لحظه‌ای از آرامش در یک تجربه روان",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
+      alt: "جریان اصلی کاربر",
+      title: "فضای تمرکز",
+      description: "گرید منظمی که حس نظم و وضوح می‌سازد",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
+      alt: "تم بهاری روشن",
+      title: "فرم چندمرحله‌ای",
+      description: "جایی که طراحی و کد در هماهنگی کامل می‌آمیزند",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
+      alt: "نمای کلی داشبورد",
+      title: "نمای کلی داشبورد",
+      description: "کامپوننت‌هایی که با تکرار و تست پالایش شده‌اند",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
+      alt: "منوی کشویی (Drawer)",
+      title: "حالت تمرکز (Focus Mode)",
+      description: "جریان آنبوردینگ که کاربر را گام‌به‌گام پیش می‌برد",
+    },
+    {
+      src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
+      alt: "بلاک‌های چیده‌شده داشبورد",
+      title: "نمودار خطی درآمد در حالت تیره",
+      description: "افکت‌های نور و گرادیان در تم تیره",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 md:grid-cols-2">
+          {images.map((image, index) => (
+            <div
+              key={index}
+              className="group relative aspect-square overflow-hidden"
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+              />
+              <div className="absolute inset-0 bg-background/0 transition-all duration-300 group-hover:bg-background/10" />
+              <div className="absolute inset-x-0 bottom-0 translate-y-full transform p-6 transition-transform duration-300 group-hover:translate-y-0">
+                <div className="text-center">
+                  <h3 className="mb-2 text-xl font-semibold text-muted">
+                    {image.title}
+                  </h3>
+                  <p className="text-sm text-muted">{image.description}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Projects9 };
diff --git a/blocks/promo-banner1.tsx b/blocks/promo-banner1.tsx
new file mode 100644
index 0000000..b3166ae
--- /dev/null
+++ b/blocks/promo-banner1.tsx
@@ -0,0 +1,61 @@
+import { Truck } from "lucide-react";
+
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+interface PromoBanner1Props {
+  threshold?: number;
+  currentAmount?: number;
+  currency?: string;
+  className?: string;
+}
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+const PromoBanner1 = ({
+  threshold = 75,
+  currentAmount = 45,
+  currency = "IRR",
+  className,
+}: PromoBanner1Props) => {
+  const progress = Math.min((currentAmount / threshold) * 100, 100);
+  const remaining = threshold - currentAmount;
+  const hasQualified = remaining <= 0;
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-primary text-primary-foreground", className)}
+    >
+      <div className="container flex items-center justify-center gap-3 py-2.5">
+        <Truck className="size-4 shrink-0" />
+        {hasQualified ? (
+          <p className="text-sm font-medium">
+            🎉 ارسال رایگان برای شما فعال شد!
+          </p>
+        ) : (
+          <div className="flex items-center gap-3">
+            <p className="shrink-0 text-sm">
+              فقط{" "}
+              <span className="font-semibold">
+                {formatPrice(remaining, currency)}
+              </span>{" "}
+              دیگر تا <span className="font-semibold">ارسال رایگان</span>
+            </p>
+            <Progress
+              value={progress}
+              className="dark hidden h-1.5 w-24 sm:block"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { PromoBanner1 };
diff --git a/blocks/promo-banner2.tsx b/blocks/promo-banner2.tsx
new file mode 100644
index 0000000..2897f98
--- /dev/null
+++ b/blocks/promo-banner2.tsx
@@ -0,0 +1,44 @@
+import { ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface PromoBanner2Props {
+  message?: string;
+  discount?: string;
+  link?: string;
+  linkText?: string;
+  className?: string;
+}
+
+const PromoBanner2 = ({
+  message = "فروش زمستانه",
+  discount = "تا ۵۰٪ تخفیف",
+  link = "#",
+  linkText = "خرید کنید",
+  className,
+}: PromoBanner2Props) => {
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-primary text-primary-foreground", className)}
+    >
+      <div className="container py-2.5">
+        <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-center text-sm">
+          <span className="font-semibold">{message}</span>
+          <span className="hidden sm:inline">·</span>
+          <span>{discount}</span>
+          <a
+            href={link}
+            className="inline-flex items-center gap-1 font-medium underline underline-offset-4 hover:no-underline"
+          >
+            {linkText}
+            <ArrowRight className="size-3 rtl:rotate-180" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PromoBanner2 };
diff --git a/blocks/promo-banner3.tsx b/blocks/promo-banner3.tsx
new file mode 100644
index 0000000..5b15ffe
--- /dev/null
+++ b/blocks/promo-banner3.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { Gift } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface PromoBanner3Props {
+  deliveryDate?: string;
+  cutoffTime?: Date;
+  className?: string;
+}
+
+const formatCountdownPart = (value: number) =>
+  value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });
+
+const PromoBanner3 = ({
+  deliveryDate = "۲۴ دی",
+  cutoffTime,
+  className,
+}: PromoBanner3Props) => {
+  const defaultCutoffTime = useMemo(
+    () => new Date(Date.now() + 4 * 60 * 60 * 1000),
+    [],
+  );
+  const targetTime = cutoffTime ?? defaultCutoffTime;
+
+  const [timeLeft, setTimeLeft] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const now = new Date().getTime();
+      const target = targetTime.getTime();
+      const diff = target - now;
+
+      if (diff <= 0) {
+        return { hours: 0, minutes: 0, seconds: 0 };
+      }
+
+      return {
+        hours: Math.floor(diff / (1000 * 60 * 60)),
+        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
+        seconds: Math.floor((diff % (1000 * 60)) / 1000),
+      };
+    };
+
+    setTimeLeft(calculateTimeLeft());
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetTime]);
+
+  const countdown = [
+    formatCountdownPart(timeLeft.hours),
+    formatCountdownPart(timeLeft.minutes),
+    formatCountdownPart(timeLeft.seconds),
+  ].join(":");
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-primary text-primary-foreground", className)}
+    >
+      <div className="container py-2.5">
+        <div className="flex flex-wrap items-center justify-center gap-3 text-sm">
+          <div className="flex items-center gap-2">
+            <Gift className="size-4 shrink-0" />
+            <span>
+              تا{" "}
+              <span
+                dir="rtl"
+                className="inline-block font-mono font-bold tabular-nums"
+              >
+                {countdown}
+              </span>{" "}
+              دیگر سفارش دهید؛ تحویل تا{" "}
+              <span className="font-semibold">{deliveryDate}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PromoBanner3 };
diff --git a/blocks/promo-banner4.tsx b/blocks/promo-banner4.tsx
new file mode 100644
index 0000000..63a09e1
--- /dev/null
+++ b/blocks/promo-banner4.tsx
@@ -0,0 +1,54 @@
+import { RotateCcw, Shield, Truck } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface TrustItem {
+  icon: React.ReactNode;
+  text: string;
+}
+
+interface PromoBanner4Props {
+  items?: TrustItem[];
+  className?: string;
+}
+
+const DEFAULT_ITEMS: TrustItem[] = [
+  {
+    icon: <Truck className="size-4" />,
+    text: "ارسال رایگان برای سفارش‌های بالای ۵۰ دلار",
+  },
+  {
+    icon: <RotateCcw className="size-4" />,
+    text: "مرجوعی رایگان تا ۳۰ روز",
+  },
+  { icon: <Shield className="size-4" />, text: "تسویه امن" },
+];
+
+const PromoBanner4 = ({
+  items = DEFAULT_ITEMS,
+  className,
+}: PromoBanner4Props) => {
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "w-full border-b bg-primary text-primary-foreground",
+        className,
+      )}
+    >
+      <div className="container py-2">
+        <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-1">
+          {items.map((item, index) => (
+            <div key={index} className="flex items-center gap-2 text-sm">
+              {item.icon}
+              <span>{item.text}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PromoBanner4 };
diff --git a/blocks/promo-banner5.tsx b/blocks/promo-banner5.tsx
new file mode 100644
index 0000000..f4e7033
--- /dev/null
+++ b/blocks/promo-banner5.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface PromoBanner5Props {
+  endTime?: Date;
+  message?: string;
+  description?: string;
+  className?: string;
+}
+
+const formatCountdownPart = (value: number) =>
+  value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });
+
+const PromoBanner5 = ({
+  endTime,
+  message = "پایان حراج در",
+  description = "تا ۵۰٪ تخفیف روی محصولات منتخب",
+  className,
+}: PromoBanner5Props) => {
+  const defaultEndTime = useMemo(
+    () => new Date(Date.now() + 24 * 60 * 60 * 1000),
+    [],
+  );
+  const targetTime = endTime ?? defaultEndTime;
+
+  const [timeLeft, setTimeLeft] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const now = new Date().getTime();
+      const target = targetTime.getTime();
+      const diff = target - now;
+
+      if (diff <= 0) {
+        return { hours: 0, minutes: 0, seconds: 0 };
+      }
+
+      return {
+        hours: Math.floor(diff / (1000 * 60 * 60)),
+        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
+        seconds: Math.floor((diff % (1000 * 60)) / 1000),
+      };
+    };
+
+    setTimeLeft(calculateTimeLeft());
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetTime]);
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-primary text-primary-foreground", className)}
+    >
+      <div className="container py-2.5">
+        <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm">
+          <span className="font-medium">{message}</span>
+          <div
+            dir="rtl"
+            className="flex items-center gap-1 font-mono text-lg font-bold tabular-nums"
+          >
+            <span className="rounded bg-primary/80 px-2 py-0.5">
+              {formatCountdownPart(timeLeft.hours)}
+            </span>
+            <span>:</span>
+            <span className="rounded bg-primary/80 px-2 py-0.5">
+              {formatCountdownPart(timeLeft.minutes)}
+            </span>
+            <span>:</span>
+            <span className="rounded bg-primary/80 px-2 py-0.5">
+              {formatCountdownPart(timeLeft.seconds)}
+            </span>
+          </div>
+          <span className="opacity-90">{description}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PromoBanner5 };
diff --git a/blocks/promo-banner6.tsx b/blocks/promo-banner6.tsx
new file mode 100644
index 0000000..e568c0d
--- /dev/null
+++ b/blocks/promo-banner6.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { Gift } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface PromoBanner6Props {
+  endTime?: Date;
+  title?: string;
+  className?: string;
+}
+
+const COUNTDOWN_UNITS = [
+  { key: "days", label: "روز" },
+  { key: "hours", label: "ساعت" },
+  { key: "minutes", label: "دقیقه" },
+  { key: "seconds", label: "ثانیه" },
+] as const;
+
+const formatCountdownPart = (value: number) =>
+  value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });
+
+const PromoBanner6 = ({
+  endTime,
+  title = "فروش تعطیلات",
+  className,
+}: PromoBanner6Props) => {
+  const defaultEndTime = useMemo(
+    () => new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
+    [],
+  );
+  const targetTime = endTime ?? defaultEndTime;
+
+  const [timeLeft, setTimeLeft] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const now = new Date().getTime();
+      const target = targetTime.getTime();
+      const diff = target - now;
+
+      if (diff <= 0) {
+        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+      }
+
+      return {
+        days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
+        seconds: Math.floor((diff % (1000 * 60)) / 1000),
+      };
+    };
+
+    setTimeLeft(calculateTimeLeft());
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetTime]);
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-primary text-primary-foreground", className)}
+    >
+      <div className="container py-3">
+        <div className="flex flex-wrap items-center justify-center gap-4">
+          <div className="flex items-center gap-2">
+            <Gift className="size-5 shrink-0" />
+            <span className="font-semibold">{title}</span>
+          </div>
+          <div
+            dir="rtl"
+            className="flex items-center gap-2 tabular-nums"
+          >
+            {COUNTDOWN_UNITS.map((unit, index) => (
+              <div key={unit.key} className="flex items-center gap-2">
+                <div className="flex flex-col items-center">
+                  <span className="min-w-10 rounded bg-white/20 px-2 py-1 text-center font-mono text-lg font-bold">
+                    {formatCountdownPart(timeLeft[unit.key])}
+                  </span>
+                  <span className="mt-0.5 text-[10px] opacity-80">
+                    {unit.label}
+                  </span>
+                </div>
+                {index < COUNTDOWN_UNITS.length - 1 && (
+                  <span className="mb-4 text-lg font-bold opacity-50">:</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PromoBanner6 };
diff --git a/blocks/promo-banner7.tsx b/blocks/promo-banner7.tsx
new file mode 100644
index 0000000..8a3daf3
--- /dev/null
+++ b/blocks/promo-banner7.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { Zap } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+interface PromoBanner7Props {
+  endTime?: Date;
+  totalStock?: number;
+  soldStock?: number;
+  className?: string;
+}
+
+const formatCountdownPart = (value: number) =>
+  value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });
+
+const PromoBanner7 = ({
+  endTime,
+  totalStock = 100,
+  soldStock = 73,
+  className,
+}: PromoBanner7Props) => {
+  const defaultEndTime = useMemo(
+    () => new Date(Date.now() + 6 * 60 * 60 * 1000),
+    [],
+  );
+  const targetTime = endTime ?? defaultEndTime;
+
+  const [timeLeft, setTimeLeft] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const now = new Date().getTime();
+      const target = targetTime.getTime();
+      const diff = target - now;
+
+      if (diff <= 0) {
+        return { hours: 0, minutes: 0, seconds: 0 };
+      }
+
+      return {
+        hours: Math.floor(diff / (1000 * 60 * 60)),
+        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
+        seconds: Math.floor((diff % (1000 * 60)) / 1000),
+      };
+    };
+
+    setTimeLeft(calculateTimeLeft());
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetTime]);
+
+  const soldPercentage = (soldStock / totalStock) * 100;
+  const remaining = totalStock - soldStock;
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full bg-primary text-primary-foreground", className)}
+    >
+      <div className="container py-2.5">
+        <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
+          <div className="flex items-center gap-2">
+            <Zap className="size-4 shrink-0 fill-current" />
+            <span className="font-semibold">حراج محدود</span>
+          </div>
+
+          <div
+            dir="rtl"
+            className="flex items-center font-mono font-bold tabular-nums"
+          >
+            <span>{formatCountdownPart(timeLeft.hours)}</span>
+            <span className="animate-pulse">:</span>
+            <span>{formatCountdownPart(timeLeft.minutes)}</span>
+            <span className="animate-pulse">:</span>
+            <span>{formatCountdownPart(timeLeft.seconds)}</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Progress
+              value={soldPercentage}
+              className="h-2 w-20 bg-primary/80 [&>div]:bg-white"
+            />
+            <span className="text-sm">
+              <span className="font-semibold">
+                {remaining.toLocaleString("fa-IR")}
+              </span>{" "}
+              عدد باقی‌مانده
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PromoBanner7 };
diff --git a/blocks/rate-card1.tsx b/blocks/rate-card1.tsx
new file mode 100644
index 0000000..03e1485
--- /dev/null
+++ b/blocks/rate-card1.tsx
@@ -0,0 +1,142 @@
+import { Ticket } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface RateCard1Props {
+  className?: string;
+}
+
+const RateCard1 = ({ className }: RateCard1Props) => {
+  const BOOKING_CONDITIONS = [
+    "حداقل دوره همکاری  ۲ ماه",
+    "برای توضیح بیشتر زمان تماس را هماهنگ کنید",
+    "هر زمان بخواهید مکث یا لغو کنید",
+  ];
+
+  const process = [
+    {
+      step: "01",
+      title: "بازبینی اول  ۴۲ ساعت",
+      description:
+        "تحلیل اولیه قیمت‌گذاری و تحقیق بازار ظرف ۴۲ ساعت انجام می‌شود. پیشنهادهای جامع استراتژی قیمت بر اساس رقبا و جایگاه بازار ارائه می‌شود.",
+    },
+    {
+      step: "02",
+      title: "پالایش استراتژی  ۷۲ ساعت",
+      description:
+        "توسعه مدل قیمت‌گذاری با سطوح و پیشنهاد ارزش. همه سناریوها در برابر اهداف کسب‌وکار و حاشیه سود هدف آزمایش و اعتبارسنجی می‌شوند.",
+    },
+    {
+      step: "03",
+      title: "برنامه اجرا  ۵ روز",
+      description:
+        "نقشه راه کامل اجرای قیمت با زمان‌بندی و تخصیص منابع. راهنمای گام‌به‌گام برای اعمال قیمت جدید در همه کانال‌ها و بخش‌های مشتری.",
+    },
+    {
+      step: "04",
+      title: "آزمایش و بهینه‌سازی  ۱ هفته",
+      description:
+        "راه‌اندازی A/B تست و ابزار پایش عملکرد قیمت. شاخص‌های کلیدی رصد و تنظیمات لحظه‌ای برای بیشینه کردن درآمد و رضایت مشتری.",
+    },
+    {
+      step: "05",
+      title: "بازبینی نهایی  ۱۰ روز",
+      description:
+        "ممیزی جامع قیمت با تحلیل عملکرد و پیشنهادهای آینده. مستندات و مواد آموزشی کامل برای مدیریت مستمر قیمت توسط تیم شما.",
+    },
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mt-20 flex grid w-full grid-cols-1 flex-col justify-between gap-15 md:gap-10 lg:grid-cols-7">
+          <div className="top-1/5 flex h-fit w-full max-w-lg flex-col gap-15 gap-40 lg:sticky lg:col-span-3">
+            <div className="relative flex h-fit w-fit justify-between text-2xll font-semibold tracking-tight lg:text-2xll">
+              {" "}
+              <h1 className="w-fit text-foreground/20">
+                قیمت‌گذاری <br />
+                ساده
+              </h1>
+              <Illustration className="absolute top-0 -right-4" />
+              <Illustration className="absolute -bottom-2 -left-4 rotate-180" />
+            </div>
+
+            <div className="flex w-full flex-col gap-4">
+              <h1 className="text-xl font-medium tracking-tighter lg:text-2xll">
+                ۳٬۴۹۹ دلار{" "}
+                <sup className="align-top text-base font-normal tracking-normal text-foreground/50 lg:text-lg">
+                  /ماه
+                </sup>{" "}
+              </h1>
+              <ul className="my-3 space-y-1">
+                {BOOKING_CONDITIONS.map((condition, index) => (
+                  <li
+                    key={index}
+                    className="flex items-center gap-4 text-lg tracking-tight text-foreground/50"
+                  >
+                    <span className="size-2 bg-orange-500" />
+                    {condition}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <ul className="relative col-span-1 w-full lg:col-span-4 lg:pl-22">
+            {process.map((step, index) => (
+              <li
+                key={index}
+                className="relative flex flex-col justify-between gap-10 border-b py-8 md:flex-row lg:py-10"
+              >
+                <div className="flex size-8 items-center justify-center rounded-lg border border-orange-500 tracking-tighter">
+                  <Ticket className="storke-1 size-4 text-orange-500" />
+                </div>
+                <div className="w-fit">
+                  <h3 className="mb-4 text-xl font-semibold tracking-tighter lg:text-xl">
+                    {step.title}
+                  </h3>
+                  <p className="line-clamp-2 text-foreground/50">
+                    {step.description}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { RateCard1 };
+
+const Illustration = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="22"
+      height="20"
+      viewBox="0 0 22 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <line
+        x1="0.607422"
+        y1="2.57422"
+        x2="21.5762"
+        y2="2.57422"
+        stroke="#FF0000"
+        strokeWidth="4"
+      />
+      <line
+        x1="19.5762"
+        y1="19.624"
+        x2="19.5762"
+        y2="4.57422"
+        stroke="#FF0000"
+        strokeWidth="4"
+      />
+    </svg>
+  );
+};
diff --git a/blocks/rate-card2.tsx b/blocks/rate-card2.tsx
new file mode 100644
index 0000000..17948eb
--- /dev/null
+++ b/blocks/rate-card2.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { Target } from "lucide-react";
+import React from "react";
+
+import { BorderButton } from "@/components/shadcnblocks/border-button";
+import { useGoogleFont } from "@/hooks/use-google-font";
+import { cn } from "@/lib/utils";
+
+interface RateCard2Props {
+  className?: string;
+}
+
+const RateCard2 = ({ className }: RateCard2Props) => {
+  const pricingPlans = [
+    {
+      title: "نگهداری ماهانه",
+      description:
+        "پکیج مناسب تیم‌هایی که به‌صورت مداوم به تحلیل قیمت، بازبینی و پشتیبانی استراتژیک نیاز دارند.",
+      price: "۳٬۴۹۹ دلار",
+      period: "/ماه",
+      features: [
+        "حداکثر ۲ درخواست فعال هم‌زمان",
+        "بازبینی نامحدود",
+        "دسترسی پشتیبانی اولویت‌دار ۲۴/۷",
+        "مدیر حساب اختصاصی",
+      ],
+    },
+    {
+      title: "پکیج پریمیوم",
+      description:
+        "برای سازمان‌هایی که به تحلیل پیشرفته، یکپارچه‌سازی سفارشی و جلسات استراتژی منظم نیاز دارند.",
+      price: "۵٬۹۹۹ دلار",
+      period: "/ماه",
+      features: [
+        "حداکثر ۵ درخواست فعال هم‌زمان",
+        "داشبورد تحلیل پیشرفته",
+        "یکپارچه‌سازی‌های سفارشی",
+        "مشاوره استراتژی هفتگی",
+      ],
+    },
+  ];
+
+  useGoogleFont("Antonio");
+  return (
+    <section
+      className={cn("bg-background py-32", className)}
+      style={
+        {
+          "--font-mono": "Antonio",
+        } as React.CSSProperties
+      }
+    >
+      <div className="container flex flex-col items-center justify-center gap-8 lg:gap-15">
+        <div className="flex w-full max-w-6xl flex-col items-center justify-between gap-4 lg:flex-row">
+          {pricingPlans.map((plan, index) => (
+            <div
+              key={index}
+              className="flex w-full flex-col justify-between gap-10 rounded-3xl bg-muted p-10"
+            >
+              <div>
+                <h2 className="text-3xl font-semibold tracking-tight">
+                  {plan.title}
+                </h2>
+                <p className="mt-4 w-full max-w-xs text-lg tracking-tight text-foreground/30">
+                  {plan.description}
+                </p>
+              </div>
+              <ul className="mt-5">
+                <li className="mb-4 text-xs font-medium text-foreground/40 uppercase">
+                  شامل می‌شود:
+                </li>
+                {plan.features.map((feature, featureIndex) => (
+                  <li
+                    key={featureIndex}
+                    className="mt-1 flex items-center gap-2 font-medium"
+                  >
+                    <Target className="size-4" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-10 flex items-end justify-between">
+                <h1 className="text-xl font-medium tracking-tighter lg:text-2xll">
+                  <span className="font-mono">{plan.price}</span>
+                  <sup className="ps-2 align-top text-sm font-normal tracking-normal tracking-tight lg:text-base">
+                    {plan.period}
+                  </sup>
+                </h1>
+                <BorderButton
+                  variant="outline"
+                  className="relative rounded-none !px-4 uppercase shadow-none"
+                >
+                  شروع کنید
+                </BorderButton>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { RateCard2 };
diff --git a/blocks/resource1.tsx b/blocks/resource1.tsx
new file mode 100644
index 0000000..16e356a
--- /dev/null
+++ b/blocks/resource1.tsx
@@ -0,0 +1,217 @@
+import { Book, Download, Share2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Resource1Props {
+  className?: string;
+}
+
+const Resource1 = ({ className }: Resource1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container grid gap-12 md:grid-cols-12 md:gap-8">
+        <div className="order-last md:order-none md:col-span-4 lg:col-span-3">
+          <aside className="flex flex-col gap-2">
+            <div className="mb-6 overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+              <div className="border-b border-border bg-muted/50 px-5 py-4">
+                <h3 className="flex items-center text-sm font-semibold">
+                  <Book className="ms-2.5 size-3.5 text-muted-foreground" />
+                  سند راهنما
+                </h3>
+              </div>
+              <div className="p-5">
+                <div className="gap-4 text-lg leading-snug font-semibold text-foreground">
+                  <p>راهنمای جامع راه‌اندازی استارتاپ</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mb-6 overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+              <div className="border-b border-border bg-muted/50 px-5 py-4">
+                <h3 className="flex items-center text-sm font-semibold">
+                  <Download className="ms-2.5 size-3.5 text-muted-foreground" />
+                  گزینه‌های دانلود
+                </h3>
+              </div>
+              <div className="p-5">
+                <div className="space-y-4">
+                  <p className="text-start text-sm text-muted-foreground">
+                    از این راهنما لذت بردید؟ برای مطالعه آفلاین یا
+                    اشتراک‌گذاری، آن را دانلود کنید.
+                  </p>
+                  <div className="flex flex-col space-y-2">
+                    <Button
+                      className="w-full justify-between"
+                      variant="default"
+                    >
+                      فرمت پی‌دی‌اف
+                      <Download className="me-2 size-4" />
+                    </Button>
+                    <Button
+                      className="w-full justify-between"
+                      variant="outline"
+                    >
+                      نسخه چاپی
+                      <Download className="me-2 size-4" />
+                    </Button>
+                  </div>
+                  <p className="mt-4 text-center text-xs text-muted-foreground">
+                    زمان مطالعه: ۵ دقیقه
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mb-6 overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+              <div className="border-b border-border bg-muted/50 px-5 py-4">
+                <h3 className="flex items-center text-sm font-semibold">
+                  <Share2 className="ms-2.5 size-3.5 text-muted-foreground" />
+                  اشتراک‌گذاری این راهنما
+                </h3>
+              </div>
+              <div className="p-5">
+                <ul className="flex items-center gap-2">
+                  <li>
+                    <a
+                      href="#"
+                      className="flex size-10 items-center justify-center rounded-full border border-border bg-muted/50 transition-colors hover:bg-muted"
+                      aria-label="اشتراک در اینستاگرام"
+                    >
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/instagram-icon.svg"
+                        alt="اینستاگرام"
+                        className="size-5"
+                      />
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      className="flex size-10 items-center justify-center rounded-full border border-border bg-muted/50 transition-colors hover:bg-muted"
+                      aria-label="اشتراک در لینکدین"
+                    >
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/linkedin-icon.svg"
+                        alt="لینکدین"
+                        className="size-5"
+                      />
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      className="flex size-10 items-center justify-center rounded-full border border-border bg-muted/50 transition-colors hover:bg-muted"
+                      aria-label="اشتراک در پروداکت هانت"
+                    >
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/producthunt-icon.svg"
+                        alt="پروداکت هانت"
+                        className="size-5"
+                      />
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      className="flex size-10 items-center justify-center rounded-full border border-border bg-muted/50 transition-colors hover:bg-muted"
+                      aria-label="اشتراک در توییتر"
+                    >
+                      <img
+                        src="/block-media/shadcnblocks/block/logos/twitter-icon.svg"
+                        alt="توییتر"
+                        className="size-5"
+                      />
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </aside>
+        </div>
+        <div className="md:col-span-7 md:col-start-5 lg:col-start-6">
+          <article className="prose prose-sm dark:prose-invert text-start">
+            <h1>وایت‌پیپر: راهنمای جامع راه‌اندازی استارتاپ SaaS</h1>
+            <p>
+              راه‌اندازی یک محصول نرم‌افزاری B2B نیازمند برنامه‌ریزی دقیق در
+              حوزه‌های محصول، فروش و بازاریابی است. این راهنما چارچوب عملی
+              برای ساخت MVP، جذب اولین مشتریان و رسیدن به درآمد تکرارشونده را
+              ارائه می‌دهد.
+            </p>
+            <h2>تعریف بازار هدف</h2>
+            <p>
+              پیش از نوشتن حتی یک خط کد، باید{" "}
+              <a href="#">پرسونای خریدار</a> و مشکل اصلی او را مشخص کنید.
+            </p>
+            <blockquote>
+              بهترین استارتاپ‌های SaaS مشکلی را حل می‌کنند که مشتریان فعلی
+              برای آن بودجه اختصاص داده‌اند، نه مشکلی که فقط «خوب است داشته باشند».
+            </blockquote>
+            <h3>تحقیق مشتری</h3>
+            <p>
+              با حداقل ۲۰ مصاحبه با مدیران فروش، بازاریابی و عملیات شروع کنید:
+            </p>
+            <ul>
+              <li>بزرگ‌ترین چالش روزانه آن‌ها چیست؟</li>
+              <li>اکنون این مشکل را چگونه حل می‌کنند؟</li>
+              <li>چه مبلغی برای راه‌حل بهتر پرداخت می‌کنند؟</li>
+            </ul>
+            <p>
+              الگوهای تکراری در پاسخ‌ها، هسته ارزش پیشنهادی محصول شما را
+              شکل می‌دهند.
+            </p>
+            <h3>ساخت MVP</h3>
+            <p>
+              MVP باید یک جریان کاری اصلی را به‌طور کامل پوشش دهد؛ نه تمام
+              قابلیت‌های آینده. برای CRM، این معمولاً مدیریت لید و پیگیری
+              معامله است.
+            </p>
+            <p>
+              تیم‌های موفق MVP خود را ظرف ۶ تا ۸ هفته به ۳ تا ۵ مشتری آزمایشی
+              ارائه می‌دهند و بازخورد را هفتگی جمع‌آوری می‌کنند.
+            </p>
+            <h3>مدل قیمت‌گذاری</h3>
+            <p>
+              قیمت‌گذاری بر اساس ارزش تحویل‌داده‌شده (تعداد کاربر، حجم داده یا
+              تعداد معامله) معمولاً بهتر از قیمت ثابت عمل می‌کند.
+            </p>
+            <div>
+              <table>
+                <thead>
+                  <tr>
+                    <th>پلن</th>
+                    <th>مشتری هدف</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>استارتر</td>
+                    <td>تیم‌های ۱ تا ۵ نفره</td>
+                  </tr>
+                  <tr className="m-0 border-t p-0 even:bg-muted">
+                    <td>حرفه‌ای</td>
+                    <td>شرکت‌های در حال رشد</td>
+                  </tr>
+                  <tr className="m-0 border-t p-0 even:bg-muted">
+                    <td>سازمانی</td>
+                    <td>سازمان‌های بزرگ</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <p>
+              مشتریان اولیه را با تخفیف سالانه جذب کنید، اما از همان ابتدا
+              قیمت واقعی را نشان دهید تا وابستگی به تخفیف ایجاد نشود.
+            </p>
+            <p>
+              هدف سه‌ماهه اول: ۱۰ مشتری پرداخت‌کننده، نرخ ریزش زیر ۵٪ و
+              NPS بالای ۴۰.
+            </p>
+          </article>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Resource1 };
diff --git a/blocks/resource2.tsx b/blocks/resource2.tsx
new file mode 100644
index 0000000..fcfb04f
--- /dev/null
+++ b/blocks/resource2.tsx
@@ -0,0 +1,302 @@
+import { ArrowLeft, Facebook, Link, Linkedin, Twitter } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Resource2Props {
+  navigation: {
+    backText: string;
+    backHref: string;
+    className?: string;
+  };
+  blog: {
+    title: string;
+    author: string;
+    role: string;
+    date: string;
+    readTime: string;
+    imageSrc: string;
+    content: React.ReactNode;
+  };
+  social: {
+    heading: string;
+    links: Array<{
+      icon: "link" | "linkedin" | "twitter" | "facebook";
+      href: string;
+      label: string;
+    }>;
+  };
+  illustration: {
+    imageSrc: string;
+    imageAlt: string;
+  };
+  className?: string;
+}
+
+const Resource2 = ({
+  className,
+  navigation = {
+    backText: "همه مقالات",
+    backHref: "/resources",
+  },
+  blog = {
+    title:
+      "ساخت وب‌اپلیکیشن‌های پایدار: راهنمای توسعه‌دهنده برای کدنویسی سبز",
+    author: "سارا چن",
+    date: "۲۵ آذر ۱۴۰۳",
+    readTime: "۸ دقیقه مطالعه",
+    role: "توسعه‌دهنده ارشد",
+    imageSrc: "/block-media/shadcnblocks/block/avatar-1.webp",
+    content: (
+      <>
+        <p>
+          دنیای دیجیتال انرژی بیشتری نسبت به کل صنعت هوانوردی مصرف می‌کند. ما
+          به‌عنوان توسعه‌دهنده مسئولیت داریم برنامه‌هایی بسازیم که نه‌تنها
+          کاربردی و زیبا باشند، بلکه برای سیاره ما نیز پایدار باشند.
+        </p>
+
+        <h2>ردپای کربنی کد</h2>
+        <p>
+          هر خط کدی که می‌نویسیم تأثیر محیطی دارد. از انرژی مصرفی سرورها تا
+          منابع به‌کاررفته در ساخت دستگاه‌ها، انتخاب‌های دیجیتال ما مهم‌تر از
+          آنچه فکر می‌کنیم اهمیت دارند.
+        </p>
+
+        <h3>درک تأثیر</h3>
+        <p>
+          وب‌اپلیکیشن‌های مدرن به‌شدت پرمصرف هستند. این واقعیت‌های
+          چشمگیر را در نظر بگیرید:
+        </p>
+        <ul>
+          <li>
+            <strong>مراکز داده</strong> ۱٪ از برق جهانی را مصرف می‌کنند
+          </li>
+          <li>
+            <strong>پخش ویدیو</strong> ۳٪ از انتشار کربن جهانی را تشکیل
+            می‌دهد
+          </li>
+          <li>
+            <strong>هرزنامه ایمیل</strong> سالانه ۱۷ میلیون تن CO₂ تولید
+            می‌کند
+          </li>
+        </ul>
+
+        <blockquote>
+          <p>
+            «پایدارترین کد، کدی است که اصلاً نمی‌نویسید. دومین کد پایدار، کدی
+            است که کارآمد اجرا می‌شود.»
+          </p>
+        </blockquote>
+
+        <h2>اصول کدنویسی سبز</h2>
+        <p>این اصول پایه را هر توسعه‌دهنده باید رعایت کند:</p>
+        <ol>
+          <li>
+            <strong>بهینه‌سازی برای عملکرد:</strong> کد سریع‌تر، انرژی کمتری
+            مصرف می‌کند
+          </li>
+          <li>
+            <strong>کاهش وابستگی‌ها:</strong> هر پکیج به حجم بسته اضافه
+            می‌کند
+          </li>
+          <li>
+            <strong>استفاده از الگوریتم‌های کارآمد:</strong> پیچیدگی بهتر یعنی
+            محاسبه کمتر
+          </li>
+          <li>
+            <strong>پیاده‌سازی استراتژی‌های کش:</strong> کاهش عملیات تکراری
+          </li>
+          <li>
+            <strong>انتخاب هاستینگ سبز:</strong> سرورهای با انرژی تجدیدپذیر
+          </li>
+        </ol>
+
+        <h3>پیاده‌سازی عملی</h3>
+        <p>
+          بیایید چند نمونه مشخص از پیاده‌سازی این اصول را ببینیم:
+        </p>
+
+        <h4>۱ بهینه‌سازی تصویر</h4>
+        <p>
+          تصاویر اغلب ۶۰ تا ۸۰ درصد حجم یک صفحه را تشکیل می‌دهند. از
+          فرمت‌های مدرن مثل WebP یا AVIF استفاده کنید، بارگذاری هوشمند پیاده
+          کنید و تصاویر با اندازه مناسب سرو کنید.
+        </p>
+
+        <h4>۲ تقسیم کد (تقسیم هوشمند بار)</h4>
+        <p>
+          فقط جاوااسکریپتی را بارگذاری کنید که کاربر واقعاً به آن نیاز
+          دارد. این کار حجم بسته اولیه را کم می‌کند و عملکرد را بهبود
+          می‌دهد.
+        </p>
+
+        <h4>۳. بهینه‌سازی پایگاه داده</h4>
+        <p>
+          کوئری‌های کارآمد بنویسید، ایندکس‌گذاری درست انجام دهید و connection
+          pooling پیاده کنید تا بار پایگاه داده کاهش یابد.
+        </p>
+
+        <h2>آینده توسعه پایدار</h2>
+        <p>
+          با حرکت به جلو، پایداری باید در هر تصمیم توسعه یک ملاحظه اصلی
+          شود. ابزارهایی مثل <strong>ابزار تست سرعت</strong> و{" "}
+          <strong>ابزار تحلیل عملکرد</strong> می‌توانند به سنجش تأثیر محیطی
+          برنامه‌های ما کمک کنند.
+        </p>
+
+        <p>
+          مسیر توسعه وب پایدار مستمر است، اما هر بهینه‌سازی کوچک به آینده
+          دیجیتال سبزتر کمک می‌کند. با یک اصل شروع کنید، تأثیر را بسنجید و
+          به‌تدریج شیوه‌های پایدارتر را به گردش کار توسعه خود اضافه کنید.
+        </p>
+      </>
+    ),
+  },
+  social = {
+    heading: "اشتراک‌گذاری این مقاله",
+    links: [
+      { icon: "link", href: "#", label: "کپی لینک" },
+      { icon: "linkedin", href: "#", label: "اشتراک در لینکدین" },
+      { icon: "twitter", href: "#", label: "اشتراک در X" },
+      { icon: "facebook", href: "#", label: "اشتراک در فیسبوک" },
+    ],
+  },
+  illustration = {
+    imageSrc: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt:
+      "تصویر توسعه وب پایدار با تمرین‌های کدنویسی سبز و تأثیر محیطی",
+  },
+}: Resource2Props) => {
+  const getIcon = (icon: string, className: string) => {
+    switch (icon) {
+      case "link":
+        return <Link className={`size-4 ${className}`} />;
+      case "شبکه حرفه‌ای":
+        return <Linkedin className={`size-4 ${className}`} />;
+      case "شبکه اجتماعی":
+        return <Twitter className={`size-4 ${className}`} />;
+      case "شبکه اجتماعی":
+        return <Facebook className={`size-4 ${className}`} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("", className)}>
+      <div className="min-h-128 bg-primary text-primary-foreground">
+        <div className="container py-16">
+          <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+            <div className="flex h-full max-w-md flex-col justify-between gap-8">
+              <div className="space-y-6">
+                <div className="flex items-center gap-2 text-primary-foreground">
+                  <a
+                    href={navigation.backHref}
+                    className="group/nav flex items-center gap-2 transition-all duration-200 hover:gap-4"
+                  >
+                    <ArrowLeft className="size-4 rtl:rotate-180 group-hover/nav:text-primary-foreground" />
+                    <span className="transition-colors group-hover/nav:text-primary-foreground group-hover/nav:underline">
+                      {navigation.backText}
+                    </span>
+                  </a>
+                </div>
+                <h1 className="text-start text-3xl leading-tight font-medium">
+                  {blog.title}
+                </h1>
+              </div>
+              <div className="flex flex-col gap-8">
+                <div className="space-y-2 text-start">
+                  <p className="text-lg text-muted-foreground">{blog.author}</p>
+                  <p className="text-muted-foreground">
+                    {blog.date} • {blog.readTime}
+                  </p>
+                </div>
+                <div className="space-y-4 text-start">
+                  <h3>{social.heading}</h3>
+                  <div className="flex gap-3">
+                    {social.links.map((link, index) => (
+                      <Button
+                        key={index}
+                        variant="outline"
+                        size="icon"
+                        className="group/btn h-12 w-12 rounded-full border-border/10 bg-muted/20 transition-colors hover:bg-transparent hover:text-muted"
+                        asChild
+                      >
+                        <a
+                          href={link.href}
+                          aria-label={link.label}
+                          className="flex items-center justify-center"
+                        >
+                          {getIcon(
+                            link.icon,
+                            "text-muted/30 group-hover/btn:text-primary-foreground transition-colors",
+                          )}
+                        </a>
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="col-span-2 h-full w-full">
+              <div className="aspect-video min-h-96 w-full">
+                <img
+                  src={illustration.imageSrc}
+                  alt={illustration.imageAlt}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container mx-auto py-16 md:max-w-2xl xl:max-w-5xl">
+        <div className="prose max-w-none pb-16 text-start prose-headings:text-foreground prose-p:text-muted-foreground prose-blockquote:border-s-primary prose-blockquote:text-muted-foreground prose-strong:text-foreground prose-em:text-foreground prose-ol:text-muted-foreground prose-ul:text-muted-foreground prose-li:text-muted-foreground">
+          {blog.content}
+        </div>
+        <div className="flex flex-col justify-between gap-8 border-t border-border py-8 md:flex-row">
+          <div className="flex items-center gap-3">
+            <Avatar className="size-12 border xl:size-16">
+              <AvatarImage src={blog.imageSrc} />
+              <AvatarFallback>{blog.author}</AvatarFallback>
+            </Avatar>
+            <div className="text-start">
+              <p className="font-medium">{blog.author}</p>
+              <p className="text-sm text-muted-foreground">{blog.role}</p>
+            </div>
+          </div>
+          <div className="space-y-4 text-start">
+            <h3>{social.heading}</h3>
+            <div className="flex gap-3">
+              {social.links.map((link, index) => (
+                <Button
+                  key={index}
+                  variant="outline"
+                  size="icon"
+                  className="group/btn h-12 w-12 rounded-full border-border bg-muted transition-colors hover:bg-transparent hover:text-muted"
+                  asChild
+                >
+                  <a
+                    href={link.href}
+                    aria-label={link.label}
+                    className="flex items-center justify-center"
+                  >
+                    {getIcon(
+                      link.icon,
+                      "text-muted-foreground group-hover/btn:text-primary transition-colors",
+                    )}
+                  </a>
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Resource2 };
diff --git a/blocks/resource3.tsx b/blocks/resource3.tsx
new file mode 100644
index 0000000..8c42166
--- /dev/null
+++ b/blocks/resource3.tsx
@@ -0,0 +1,225 @@
+import {
+  CheckCircle2,
+  Facebook,
+  Home,
+  Instagram,
+  Linkedin,
+  Twitter,
+} from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Resource3Props {
+  className?: string;
+}
+
+const Resource3 = ({ className }: Resource3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/" aria-label="صفحه اصلی">
+                <Home className="h-4 w-4" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">کامپوننت‌ها</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>محصولات</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <h1 className="mt-7 text-start text-3xl font-semibold md:text-2xll">
+          قرارداد حرفه‌ای خدمات
+        </h1>
+        <div className="relative mt-12 grid gap-16 md:grid-cols-2">
+          <article className="order-2 mx-auto prose text-start md:order-1 dark:prose-invert">
+            <div>
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-1.svg"
+                alt="تصویر نمونه سند"
+                className="mt-0 mb-8 aspect-video w-full rounded-lg object-cover"
+              />
+            </div>
+            <h1>شرایط و ضوابط قرارداد خدمات</h1>
+            <p>
+              این سند چارچوب حقوقی همکاری بین ارائه‌دهنده خدمات نرم‌افزاری و
+              مشتری سازمانی را تعریف می‌کند. شامل دامنه کار، تحویل‌دادنی‌ها،
+              زمان‌بندی پرداخت و شرایط فسخ است.
+            </p>
+            <h2>دامنه خدمات</h2>
+            <p>
+              ارائه‌دهنده متعهد به پیاده‌سازی، پیکربندی و آموزش{" "}
+              <a href="#">پلتفرم CRM</a> مطابق مشخصات فنی پیوست می‌شود.
+            </p>
+            <blockquote>
+              هر تغییر در دامنه کار پس از امضای قرارداد، از طریق درخواست تغییر
+              (Change Request) با برآورد هزینه و زمان جداگانه انجام می‌شود.
+            </blockquote>
+            <h3>تحویل‌دادنی‌ها</h3>
+            <p>
+              تحویل‌دادنی‌های اصلی قرارداد شامل موارد زیر است:
+            </p>
+            <ul>
+              <li>پیکربندی اولیه CRM و یکپارچه‌سازی با ایمیل</li>
+              <li>مهاجرت داده مشتریان موجود (حداکثر ۱۰,۰۰۰ رکورد)</li>
+              <li>آموزش ۲ جلسه‌ای برای تیم فروش (حداکثر ۱۵ نفر)</li>
+            </ul>
+            <p>
+              هر تحویل‌دادنی پس از تأیید کتبی مشتری، به‌عنوان پذیرفته‌شده
+              ثبت می‌شود.
+            </p>
+            <h3>زمان‌بندی و پرداخت</h3>
+            <p>
+              پروژه در ۳ فاز اجرا می‌شود و پرداخت‌ها بر اساس تحویل هر فاز
+              انجام می‌گیرد:
+            </p>
+            <p>
+              فاز ۱ (پیکربندی): ۴۰٪ — فاز ۲ (مهاجرت داده): ۳۵٪ — فاز ۳
+              (آموزش و تحویل نهایی): ۲۵٪
+            </p>
+            <h3>ضمانت و پشتیبانی</h3>
+            <p>
+              ارائه‌دهنده ۹۰ روز پس از تحویل نهایی، رفع باگ و پشتیبانی فنی
+              رایگان ارائه می‌دهد. پشتیبانی مداوم طبق قرارداد SLA جداگانه
+              قابل تمدید است.
+            </p>
+            <div>
+              <table>
+                <thead>
+                  <tr>
+                    <th>سطح SLA</th>
+                    <th>زمان پاسخ</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>بحرانی</td>
+                    <td>۲ ساعت</td>
+                  </tr>
+                  <tr className="m-0 border-t p-0 even:bg-muted">
+                    <td>بالا</td>
+                    <td>۸ ساعت</td>
+                  </tr>
+                  <tr className="m-0 border-t p-0 even:bg-muted">
+                    <td>عادی</td>
+                    <td>۲۴ ساعت</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <p>
+              مشتری متعهد است نماینده فنی اختصاص دهد و دسترسی‌های لازم برای
+              یکپارچه‌سازی را ظرف ۵ روز کاری فراهم کند.
+            </p>
+            <p>
+              این قرارداد از تاریخ امضا به مدت ۱۲ ماه معتبر است و با
+              توافق طرفین قابل تمدید می‌باشد.
+            </p>
+          </article>
+          <div className="order-1 h-fit text-start md:sticky md:top-20 md:order-2">
+            <p className="mb-2 text-lg font-semibold">بریده‌ای از سند</p>
+            <p className="text-muted-foreground">
+              قالب جامع قرارداد خدمات برای ارائه‌دهندگان حرفه‌ای و مشتریان
+              آن‌ها. این سند دامنه کار، تحویل‌دادنی‌ها، زمان‌بندی و شرایط
+              خدمات را مشخص می‌کند تا انتظارات شفاف باشد و منافع هر دو طرف
+              حفظ شود.
+            </p>
+            <Button size="lg" className="mt-6">
+              دانلود سند
+            </Button>
+            <Separator className="my-6" />
+            <div className="flex gap-3">
+              <Avatar className="size-10 rounded-full border">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-2.webp"
+                  alt="رضا محمدی"
+                />
+              </Avatar>
+              <div>
+                <h2 className="text-sm font-medium">بازبینی‌شده توسط رضا محمدی</h2>
+                <p className="text-sm text-muted-foreground">مشاور حقوقی</p>
+              </div>
+            </div>
+            <Separator className="my-6" />
+            <p className="mb-4 text-sm font-medium">ویژگی‌های کلیدی</p>
+            <ul className="flex flex-col gap-2">
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 shrink-0" />
+                <p>شرایط قابل سفارشی‌سازی</p>
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 shrink-0" />
+                <p>امضای دیجیتال</p>
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 shrink-0" />
+                <p>پیگیری سند</p>
+              </li>
+            </ul>
+            <Separator className="my-6" />
+            <div className="flex items-center justify-between gap-4">
+              <p className="text-sm font-medium">اشتراک‌گذاری این قالب</p>
+              <ul className="flex gap-2">
+                <li>
+                  <a
+                    href="#"
+                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
+                    aria-label="اشتراک در فیسبوک"
+                  >
+                    <Facebook className="size-4" />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
+                    aria-label="اشتراک در توییتر"
+                  >
+                    <Twitter className="size-4" />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
+                    aria-label="اشتراک در لینکدین"
+                  >
+                    <Linkedin className="size-4" />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
+                    aria-label="اشتراک در اینستاگرام"
+                  >
+                    <Instagram className="size-4" />
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Resource3 };
diff --git a/blocks/resources1.tsx b/blocks/resources1.tsx
new file mode 100644
index 0000000..baebf7d
--- /dev/null
+++ b/blocks/resources1.tsx
@@ -0,0 +1,683 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRight, Slash } from "lucide-react";
+import { Fragment, useCallback, useMemo, useState } from "react";
+import { ControllerRenderProps, useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { z } from "zod";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface BreadcrumbItem {
+  label: string;
+  link: string;
+}
+
+interface Post {
+  categoryKey: string;
+  category: string;
+  title: string;
+  summary: string;
+  link: string;
+  cta: string;
+  thumbnail: string;
+}
+
+interface Category {
+  label: string;
+  value: string;
+}
+
+interface FilterFormProps {
+  categories: Array<Category>;
+  onCategoryChange: (selectedCategories: string[]) => void;
+}
+
+interface BlogsResultProps {
+  posts: Array<Post>;
+  categories: Array<Category>;
+}
+
+interface BreadcrumbBlogProps {
+  breadcrumb: Array<BreadcrumbItem>;
+}
+
+const POSTS_PER_PAGE = 6;
+
+const BREADCRUMB: Array<BreadcrumbItem> = [
+  {
+    label: "منابع",
+    link: "#",
+  },
+  {
+    label: "گزارش‌ها",
+    link: "#",
+  },
+];
+
+const CATEGORIES: Array<Category> = [
+  {
+    label: "همه",
+    value: "all",
+  },
+  {
+    label: "بهره‌وری",
+    value: "productivity",
+  },
+  {
+    label: "دسترس‌پذیری",
+    value: "accessibility",
+  },
+  {
+    label: "کارایی",
+    value: "performance",
+  },
+];
+
+const PRIMARY_POST: Post = {
+  categoryKey: "all",
+  category: "ویژه نوآوری",
+  title: "چگونه هوش مصنوعی توسعه فرانت‌اند را متحول می‌کند",
+  summary:
+    "ببینید ابزارهایی مثل GitHub Copilot، مولدهای طراحی هوش مصنوعی و دستیارهای کدنویسی چگونه ساخت UI و تحویل قابلیت‌ها را برای توسعه‌دهندگان تغییر می‌دهند.",
+  link: "#",
+  cta: "کشف آینده",
+  thumbnail:
+    "/block-media/shadcnblocks/block/placeholder-1.svg",
+};
+
+const POSTS: Array<Post> = [
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "۵ افزونه ویرایشگر کد که ساعت‌ها وقت شما را ذخیره می‌کند",
+    summary:
+      "افزونه‌های ضروری برای افزایش بهره‌وری کدنویسی و ساده‌تر کردن گردش کار.",
+    link: "#",
+    cta: "ویرایشگر را تقویت کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "مدیریت زمان برای توسعه‌دهندگان: چه چیزی واقعاً جواب می‌دهد",
+    summary:
+      "استراتژی‌های اثبات‌شده برای جلوگیری از فرسودگی و مدیریت وظایف بدون استرس.",
+    link: "#",
+    cta: "زمان را مدیریت کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "خودکارسازی گردش کار با اجرای خودکار وظایفها",
+    summary:
+      "از Gulp، اسکریپت‌های npm و GitHub Actions برای خودکار کردن کارهای تکراری توسعه استفاده کنید.",
+    link: "#",
+    cta: "همین حالا خودکار کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "روتین‌های روزانه مؤثر برای توسعه‌دهندگان",
+    summary:
+      "روتین‌هایی که توسعه‌دهندگان برتر برای ماندن پرانرژی، خلاق و متمرکز دنبال می‌کنند.",
+    link: "#",
+    cta: "جریان کاری خود را بیابید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "تسلط بر کنترل نسخه با این میانبرها",
+    summary:
+      "گردش کار version control را با aliasها و نکات قدرتمند Git تسریع کنید.",
+    link: "#",
+    cta: "Git را سریع‌تر کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "کاهش تعویض زمینه در کار توسعه",
+    summary:
+      "حواس‌پرتی را کم کنید و با تمرکز عمیق روی کد پیش بروید.",
+    link: "#",
+    cta: "متمرکز بمانید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "راه‌اندازی دورکاری: ابزارهای محیط بدون حواس‌پرتی",
+    summary:
+      "فضا و استک نرم‌افزاری را برای حداکثر بهره‌وری در کار از خانه تنظیم کنید.",
+    link: "#",
+    cta: "محیط کار را ارتقا دهید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    categoryKey: "productivity",
+    category: "بهره‌وری",
+    title: "پومودورو برای برنامه‌نویسان: واقعاً مؤثر است؟",
+    summary:
+      "بررسی عملی تکنیک پومودورو و اثربخشی آن در توسعه نرم‌افزار.",
+    link: "#",
+    cta: "روش را امتحان کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "چرا دسترس‌پذیری باید بخشی از نسخه اولیه محصول شما باشد",
+    summary:
+      "فراگیر کردن محصول از روز اول، قابلیت استفاده و دسترسی را بهبود می‌دهد.",
+    link: "#",
+    cta: "دلیلش را بدانید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "استفاده درست از نقش‌های برچسب دسترس‌پذیری در وب‌اپ",
+    summary:
+      "چگونه با نقش‌ها و landmarkهای ARIA پشتیبانی screen reader را تقویت کنید.",
+    link: "#",
+    cta: "معناشناسی را بهبود دهید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "نکات کنتراست رنگ برای خوانایی بهتر",
+    summary:
+      "ترکیب‌های رنگی دسترس‌پذیر مطابق استاندارد WCAG را بیاموزید.",
+    link: "#",
+    cta: "رنگ‌ها را اصلاح کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "ناوبری با کیبورد: تجربه‌ای که نادیده گرفته می‌شود",
+    summary:
+      "وب‌سایت را کاملاً با کیبورد قابل استفاده کنید  برای دسترس‌پذیری و سرعت.",
+    link: "#",
+    cta: "ناوبری را تست کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "فرم‌های دسترس‌پذیر: برچسب، خطا و بازخورد",
+    summary:
+      "با دستورالعمل‌های واضح برای screen reader و کاربران، فرم‌ها را قابل فهم‌تر کنید.",
+    link: "#",
+    cta: "فرم‌ها را اصلاح کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "تست با صفحه‌خوان: راهنمای مبتدی",
+    summary:
+      "چگونه با screen readerهای رایج سایت را تست کنید و به چه چیزهایی گوش دهید.",
+    link: "#",
+    cta: "تست را شروع کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "تفکر طراحی فراگیر در توسعه رابط کاربری",
+    summary:
+      "رابط‌هایی طراحی کنید که از ابتدا همه توانایی‌ها را در نظر بگیرند.",
+    link: "#",
+    cta: "برای همه طراحی کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    categoryKey: "accessibility",
+    category: "دسترس‌پذیری",
+    title: "ممیزی دسترس‌پذیری: ابزارها و چک‌لیست‌ها",
+    summary:
+      "ممیزی کامل با Axe، Lighthouse و چک‌لیست‌های دستی انجام دهید.",
+    link: "#",
+    cta: "ممیزی کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "بارگذاری هوشمند تصاویر با استاندارد وب مدرن",
+    summary:
+      "زمان بارگذاری را با lazy-loading بومی و استراتژی‌های جایگزین بهبود دهید.",
+    link: "#",
+    cta: "تصاویر را بهینه کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "فشرده‌سازی برنامه‌نویسی وب بدون خراب کردن اپ",
+    summary:
+      "بهترین روش‌های minify و tree-shaking برای bundleهای سریع‌تر.",
+    link: "#",
+    cta: "کد را کوچک کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "شاخص‌های عملکرد وب توضیح داده شد: جابجایی چیدمان، زمان بارگذاری اصلی، تأخیر اولین تعامل",
+    summary:
+      "اندازه‌گیری و بهبود Core Web Vitals برای تجربه کاربری بهتر.",
+    link: "#",
+    cta: "شاخص‌ها را بهبود دهید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "رندر سمت سرور در برابر کلاینت: کدام سریع‌تر است؟",
+    summary:
+      "SSR و CSR را مقایسه کنید و بدانید هر کدام چه زمانی برای کارایی بهتر مناسب‌اند.",
+    link: "#",
+    cta: "گزینه‌ها را بررسی کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "بهینه‌سازی فونت برای بارگذاری سریع‌تر",
+    summary:
+      "فونت را بدون مسدود کردن رندر یا جابجایی layout بارگذاری کنید.",
+    link: "#",
+    cta: "فونت‌ها را سریع کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "کاهش حجم بسته با تقسیم هوشمند بار",
+    summary:
+      "با import پویا و chunking مبتنی بر مسیر، زمان بار اولیه را کم کنید.",
+    link: "#",
+    cta: "تقسیم‌بندی کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-5.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "استراتژی‌های کش برای وب‌اپ‌های مدرن",
+    summary:
+      "از کش HTTP، service worker و CDN برای سرعت و پشتیبانی آفلاین بهره ببرید.",
+    link: "#",
+    cta: "هوشمندانه کش کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-6.svg",
+  },
+  {
+    categoryKey: "performance",
+    category: "کارایی",
+    title: "تحلیل گلوگاه‌های کارایی با ابزار تحلیل مرورگر",
+    summary:
+      "با تب Performance در DevTools مشکلات زمان اجرا را پیدا و رفع کنید.",
+    link: "#",
+    cta: "همین حالا تحلیل کنید",
+    thumbnail:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+];
+
+const FilterFormSchema = z.object({
+  items: z.array(z.string()).refine((value) => value.length > 0, {
+    message: "حداقل یک دسته باید انتخاب شود.",
+  }),
+});
+
+const FilterForm = ({ categories, onCategoryChange }: FilterFormProps) => {
+  const form = useForm<z.infer<typeof FilterFormSchema>>({
+    resolver: zodResolver(FilterFormSchema),
+    defaultValues: {
+      items: [CATEGORIES[0].value],
+    },
+  });
+
+  const handleCheckboxChange = useCallback(
+    (
+      checked: boolean | string,
+      categoryValue: string,
+      field: ControllerRenderProps<z.infer<typeof FilterFormSchema>, "items">,
+    ) => {
+      let updatedValues = checked
+        ? [...field.value, categoryValue]
+        : field.value.filter((value: string) => value !== categoryValue);
+
+      // If no categories are checked, add "all"
+      if (updatedValues.length === 0) {
+        form.setValue("items", ["all"]);
+        onCategoryChange(["all"]);
+        return;
+      }
+
+      // Remove "all" if specific category is checked
+      if (updatedValues.includes("all")) {
+        updatedValues = updatedValues.filter((v: string) => v !== "all");
+      }
+
+      // Avoid unnecessary updates
+      if (JSON.stringify(field.value) !== JSON.stringify(updatedValues)) {
+        form.setValue("items", updatedValues);
+        onCategoryChange(updatedValues);
+      }
+    },
+    [form, onCategoryChange],
+  );
+
+  return (
+    <form>
+      <Controller
+        control={form.control}
+        name="items"
+        render={({ field }) => (
+          <FieldGroup className="flex w-full flex-row flex-wrap gap-2.5">
+            {categories.map((category) => {
+              const isChecked = field.value?.includes(category.value);
+              const inputId = `category-${category.value}`;
+              return (
+                <FieldLabel
+                  key={category.value}
+                  htmlFor={inputId}
+                  className="flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5"
+                >
+                  {category.label}
+                  <Checkbox
+                    id={inputId}
+                    checked={isChecked}
+                    onCheckedChange={(checked) =>
+                      handleCheckboxChange(checked, category.value, field)
+                    }
+                  />
+                </FieldLabel>
+              );
+            })}
+            <FieldError
+              errors={
+                form.formState.errors.items
+                  ? [form.formState.errors.items]
+                  : undefined
+              }
+            />
+          </FieldGroup>
+        )}
+      />
+    </form>
+  );
+};
+
+const ResourcesResult = ({ posts, categories }: BlogsResultProps) => {
+  const [visibleCount, setVisibleCount] = useState(POSTS_PER_PAGE);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([
+    CATEGORIES[0].value,
+  ]);
+  const handleCategoryChange = useCallback((selected: string[]) => {
+    setSelectedCategories(selected);
+    setVisibleCount(POSTS_PER_PAGE);
+  }, []);
+
+  const handleLoadMore = useCallback(() => {
+    setVisibleCount((prev) => prev + POSTS_PER_PAGE);
+  }, []);
+  const filteredPosts = useMemo(() => {
+    return posts.filter(
+      (post) =>
+        selectedCategories.includes(post.categoryKey) ||
+        selectedCategories.includes("all"),
+    );
+  }, [posts, selectedCategories]);
+
+  const postsToDisplay = filteredPosts.length > 0 ? filteredPosts : posts;
+
+  const hasMore = visibleCount < postsToDisplay.length;
+
+  return (
+    <div>
+      <FilterForm
+        categories={categories}
+        onCategoryChange={handleCategoryChange}
+      />
+      <div className="flex w-full flex-col gap-4 py-8 lg:gap-8">
+        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
+          {postsToDisplay.slice(0, visibleCount).map((post) => (
+            <ResourcesCard key={post.title} {...post} />
+          ))}
+        </div>
+        <div className="flex justify-center">
+          {hasMore && (
+            <Button variant="secondary" onClick={handleLoadMore}>
+              بارگذاری بیشتر
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const BreadcrumbBlog = ({ breadcrumb }: BreadcrumbBlogProps) => {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {breadcrumb.map((item, i) => {
+          return (
+            <Fragment key={`${item.label}`}>
+              <BreadcrumbItem>
+                <BreadcrumbLink href={item.link}>{item.label}</BreadcrumbLink>
+              </BreadcrumbItem>
+              {i < breadcrumb.length - 1 ? (
+                <BreadcrumbSeparator>
+                  <Slash />
+                </BreadcrumbSeparator>
+              ) : null}
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+const EmailFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, "ایمیل الزامی است")
+    .email("آدرس ایمیل نامعتبر است"),
+});
+
+const EmailForm = () => {
+  const form = useForm<z.infer<typeof EmailFormSchema>>({
+    resolver: zodResolver(EmailFormSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof EmailFormSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
+      <Controller
+        control={form.control}
+        name="email"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor="emailInput" className="sr-only">
+              ایمیل
+            </FieldLabel>
+            <div className="w-full">
+              <div className="relative flex w-full flex-col gap-2 lg:block">
+                <Input
+                  {...field}
+                  type="email"
+                  id="emailInput"
+                  dir="rtl"
+                  placeholder="ایمیل خود را وارد کنید"
+                  className="h-fit bg-background py-4 ps-5 pe-5 text-start lg:pr-[13.75rem]"
+                  aria-invalid={fieldState.invalid}
+                />
+                <div className="top-1/2 right-2.5 lg:absolute lg:-translate-y-1/2">
+                  <Button
+                    type="submit"
+                    className="w-full rounded-full lg:w-fit"
+                  >
+                    مشاهده محصول در عمل
+                    <ArrowRight className="rtl:rotate-180" />
+                  </Button>
+                </div>
+              </div>
+              {fieldState.invalid && (
+                <FieldError errors={[fieldState.error]} className="py-1" />
+              )}
+            </div>
+          </Field>
+        )}
+      />
+    </form>
+  );
+};
+
+const ResourcesCard = ({
+  category,
+  title,
+  thumbnail,
+  summary,
+  link,
+  cta,
+}: Post) => {
+  return (
+    <a href={link} className="block h-full w-full">
+      <Card className="size-full border py-0">
+        <CardContent className="p-0">
+          <div className="border-b p-2.5 text-start text-sm leading-[1.2] font-medium text-muted-foreground">
+            {category}
+          </div>
+          <AspectRatio ratio={1.520833333} className="overflow-hidden">
+            <img
+              src={thumbnail}
+              alt={title}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+          <div className="flex w-full flex-col gap-5 p-5 text-start">
+            <h2 className="text-lg leading-none font-bold md:text-xl">
+              {title}
+            </h2>
+            <div className="w-full max-w-[20rem]">
+              <p className="text-sm leading-[1.4] font-medium text-foreground">
+                {summary}
+              </p>
+            </div>
+            <div>
+              <Badge className="rounded-full">
+                {cta}
+                <ArrowRight className="rtl:rotate-180" />
+              </Badge>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </a>
+  );
+};
+
+interface Resources1Props {
+  className?: string;
+}
+
+const Resources1 = ({ className }: Resources1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
+      <div className="bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat">
+        <div className="container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex w-full flex-col justify-between gap-12">
+            <div className="flex w-full max-w-[36rem] flex-col gap-8 text-start">
+              <BreadcrumbBlog breadcrumb={BREADCRUMB} />
+              <div className="flex w-full flex-col gap-5">
+                <h1 className="text-[2.5rem] leading-[1.2] font-semibold md:text-2xll lg:text-2xll">
+                  مرور گزارش‌ها
+                </h1>
+                <p className="text-xl leading-[1.4] font-semibold text-foreground">
+                  بهترین گزارش، گزارشی است که خواننده را با محتوای جذاب و
+                  پژوهش‌محور، در قالبی روشن و قابل‌درک، درگیر نگه می‌دارد.
+                </p>
+              </div>
+              <div className="max-w-[30rem]">
+                <EmailForm />
+              </div>
+            </div>
+          </div>
+          <div className="w-full max-w-[27.5rem]">
+            <ResourcesCard {...PRIMARY_POST} />
+          </div>
+        </div>
+      </div>
+      <div className="py-20">
+        <div className="container flex flex-col gap-8 text-start">
+          <h2 className="text-[1.75rem] leading-none font-medium md:text-[2.25rem] lg:text-[2rem]">
+            همه گزارش‌ها
+          </h2>
+          <div>
+            <ResourcesResult posts={POSTS} categories={CATEGORIES} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Resources1 };
diff --git a/blocks/resources2.tsx b/blocks/resources2.tsx
new file mode 100644
index 0000000..67d9cd3
--- /dev/null
+++ b/blocks/resources2.tsx
@@ -0,0 +1,422 @@
+"use client";
+
+import { Sparkles } from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const CATEGORIES = [
+  { value: "all", label: "همه" },
+  { value: "data", label: "داده" },
+  { value: "ai", label: "هوش مصنوعی" },
+  { value: "security", label: "امنیت" },
+  { value: "news", label: "اخبار" },
+] as const;
+
+type BlogCategory = Exclude<(typeof CATEGORIES)[number]["value"], "all">;
+
+const CATEGORY_LABELS: Record<BlogCategory, string> = {
+  data: "داده",
+  ai: "هوش مصنوعی",
+  security: "امنیت",
+  news: "اخبار",
+};
+
+interface Blog {
+  title: string;
+  category: BlogCategory;
+  date: string;
+  author: string[];
+  link: string;
+}
+
+const blogs: Blog[] = [
+  {
+    title:
+      "کاوش در عمق تکنیک‌ها و کاربردهای تحلیل داده مدرن",
+    category: "data",
+    date: "۱۴ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "مسیر در چشم‌انداز پیچیده هوش مصنوعی و یادگیری ماشین پیشرفته",
+    category: "ai",
+    date: "۱۳ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "تقویت دفاع دیجیتال: استراتژی‌های پیشرفته امنیت سایبری برای سازمان‌های مدرن",
+    category: "security",
+    date: "۱۲ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "درک و کاوش در معماری‌ها و مفاهیم رایانش توزیع‌شده",
+    category: "data",
+    date: "۱۱ آذر ۱۴۰۳",
+    author: ["/block-media/shadcnblocks/block/avatar-2.webp"],
+    link: "#",
+  },
+  {
+    title:
+      "پیشرفت‌های علمی اخیر در تحقیقات فناوری کوانتومی پیشرفته",
+    category: "news",
+    date: "۱۰ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "به‌کارگیری یادگیری ماشین در سناریوها و موارد واقعی کسب‌وکار",
+    category: "ai",
+    date: "۹ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "تدوین استراتژی‌های مؤثر برای تنظیم و بهینه‌سازی کارایی پایگاه داده",
+    category: "data",
+    date: "۸ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "پیاده‌سازی اصول امنیت Zero Trust در سراسر سازمان",
+    category: "security",
+    date: "۷ آذر ۱۴۰۳",
+    author: ["/block-media/shadcnblocks/block/avatar-1.webp"],
+    link: "#",
+  },
+  {
+    title:
+      "راهنمای جامع معماری‌ها و توسعه رایانش بدون سرور مدرن",
+    category: "ai",
+    date: "۶ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "اخبار صنعت: تازه‌ترین به‌روزرسانی‌ها در نوآوری‌های شبکه و فناوری‌های نوظهور",
+    category: "news",
+    date: "۵ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "تحول تحلیل کلان‌داده: از بینش‌های تاریخی تا مدل‌های پیش‌بینی",
+    category: "data",
+    date: "۴ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    ],
+    link: "#",
+  },
+  {
+    title: "روندهای نوظهور در پردازش زبان طبیعی و هوش مصنوعی گفتگومحور",
+    category: "ai",
+    date: "۳ آذر ۱۴۰۳",
+    author: ["/block-media/shadcnblocks/block/avatar-3.webp"],
+    link: "#",
+  },
+  {
+    title: "امنیت بلاک‌چین: حفاظت از دارایی‌های دیجیتال در عصر مدرن",
+    category: "security",
+    date: "۲ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    ],
+    link: "#",
+  },
+  {
+    title:
+      "خبر فوری: پیشرفت‌های انقلابی در کاربردهای رایانش کوانتومی",
+    category: "news",
+    date: "۱ آذر ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title: "تحلیل بلادرنگ: پردازش و تجسم داده‌های جریانی",
+    category: "data",
+    date: "۳۰ آبان ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title: "معماری‌های یادگیری عمیق برای بینایی ماشین",
+    category: "ai",
+    date: "۲۹ آبان ۱۴۰۳",
+    author: ["/block-media/shadcnblocks/block/avatar-1.webp"],
+    link: "#",
+  },
+  {
+    title: "تشخیص پیشرفته تهدید: استفاده از هوش مصنوعی در دفاع سایبری",
+    category: "security",
+    date: "۲۸ آبان ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title: "تازه‌ترین تحولات در فناوری‌های پردازش داده ابری‌بومی",
+    category: "news",
+    date: "۲۷ آبان ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+  {
+    title: "عملیات یادگیری ماشین: ساده‌سازی گردش‌کار توسعه هوش مصنوعی",
+    category: "ai",
+    date: "۲۶ آبان ۱۴۰۳",
+    author: ["/block-media/shadcnblocks/block/avatar-2.webp"],
+    link: "#",
+  },
+  {
+    title: "مقررات حریم خصوصی داده: تضمین انطباق در عملیات جهانی",
+    category: "security",
+    date: "۲۵ آبان ۱۴۰۳",
+    author: [
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    ],
+    link: "#",
+  },
+];
+
+interface Resources2Props {
+  className?: string;
+}
+
+const Resources2 = ({ className }: Resources2Props) => {
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+  const filteredBlogs = blogs.filter(
+    (blog) =>
+      selectedCategory === "all" || blog.category === selectedCategory,
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="text-start text-xl font-medium sm:text-2xll md:text-2xll">
+          منابع و گزارش‌های تخصصی
+        </h1>
+        <p className="mt-4 text-start text-lg text-muted-foreground">
+          دیدگاه‌ها و تحلیل‌های ما درباره موضوعات کلیدی را کشف کنید.
+        </p>
+        <div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-12">
+          <a
+            href="#"
+            className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5 lg:col-span-7 lg:row-span-2"
+          >
+            <img
+              src="/block-media/shadcnblocks/block/photos/simone-hutsch-ba454dc72896-unsplash.jpg"
+              alt="شروع کار با پلتفرم‌ها و زیرساخت دیجیتال مدرن"
+              className="size-full max-h-[550px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
+            <div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
+              <Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
+                <Sparkles className="size-4" />
+                مطلب ویژه
+              </Badge>
+              <div className="flex flex-col gap-4">
+                <h2 className="text-xl font-medium text-background">
+                  شروع کار با پلتفرم‌ها و زیرساخت دیجیتال مدرن
+                </h2>
+                <div className="flex items-center gap-2">
+                  <time className="text-sm text-background/80">
+                    ۱۴ آذر ۱۴۰۳
+                  </time>
+                  <div className="flex items-center -space-x-2">
+                    <Avatar className="size-6 border border-primary">
+                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                    </Avatar>
+                    <Avatar className="size-6 border border-primary">
+                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
+                    </Avatar>
+                    <Avatar className="size-6 border border-primary">
+                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
+                    </Avatar>
+                    <span className="z-10 grid size-6 place-items-center rounded-full border border-primary bg-primary/90 text-xs text-background backdrop-blur-sm">
+                      +۲
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a>
+          <div className="flex flex-col gap-4 lg:col-span-5 lg:row-span-2 lg:flex-col">
+            <a
+              href="#"
+              className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5"
+            >
+              <img
+                src="/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg"
+                alt="ساده‌سازی عملیات کسب‌وکار با خودکارسازی گردش کار"
+                className="size-full max-h-[267px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
+              <div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
+                <Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
+                  جدیدترین
+                </Badge>
+                <div className="flex flex-col gap-4">
+                  <h2 className="text-xl font-medium text-background">
+                    ساده‌سازی عملیات کسب‌وکار با خودکارسازی مؤثر گردش کار
+                  </h2>
+                  <div className="flex items-center gap-2">
+                    <time className="text-sm text-background/80">
+                      ۲۳ بهمن ۱۴۲
+                    </time>
+                    <Avatar className="size-6 border border-primary">
+                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                    </Avatar>
+                  </div>
+                </div>
+              </div>
+            </a>
+            <a
+              href="#"
+              className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5"
+            >
+              <img
+                src="/block-media/shadcnblocks/block/photos/simone-hutsch-zr8IvMz0OWk-unsplash.jpg"
+                alt="بهبود چشمگیر کارایی جستجو"
+                className="size-full max-h-[267px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
+              <div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
+                <Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
+                  جدیدترین
+                </Badge>
+                <div className="flex flex-col gap-4">
+                  <h2 className="text-xl font-medium text-background">
+                    افزایش کارایی کلی: چگونه کارایی جستجو را به‌طور چشمگیر
+                    بهبود دادیم
+                  </h2>
+                  <div className="flex items-center gap-2">
+                    <time className="text-sm text-background/80">
+                      ۱۲ فروردین ۱۴۰۴
+                    </time>
+                    <Avatar className="size-6 border border-primary">
+                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
+                    </Avatar>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div className="mt-24">
+          <h2 className="mb-6 text-start text-xl font-medium md:text-3xl">
+            آخرین به‌روزرسانی‌ها
+          </h2>
+          <Tabs
+            defaultValue="all"
+            className="border-b border-border"
+            onValueChange={setSelectedCategory}
+          >
+            <TabsList className="flex h-auto gap-2 bg-background p-0">
+              {CATEGORIES.map((category) => (
+                <TabsTrigger
+                  key={category.value}
+                  value={category.value}
+                  className="group relative py-2.5 data-[state=active]:!shadow-none"
+                >
+                  {category.label}
+                  <span className="absolute -bottom-px group-data-[state=active]:h-px group-data-[state=active]:w-full group-data-[state=active]:bg-primary" />
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+          <div className="mt-4">
+            {filteredBlogs.map((blog, idx) => (
+              <a
+                key={idx}
+                href={blog.link}
+                className="flex flex-col justify-between gap-4 border-b border-border py-6 text-start md:flex-row"
+              >
+                <h3 className="font-medium md:line-clamp-1">{blog.title}</h3>
+                <div className="flex w-full shrink-0 grid-cols-3 justify-between gap-2 md:grid md:max-w-80">
+                  <p className="text-sm text-muted-foreground">
+                    {CATEGORY_LABELS[blog.category]}
+                  </p>
+                  <time className="text-sm text-muted-foreground">
+                    {blog.date}
+                  </time>
+                  <div className="hidden items-center justify-end -space-x-2 md:flex">
+                    {blog.author.map((author, authorIdx) => (
+                      <Avatar
+                        key={authorIdx}
+                        className="size-6 border border-border"
+                      >
+                        <AvatarImage src={author} />
+                      </Avatar>
+                    ))}
+                  </div>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Resources2 };
diff --git a/blocks/resources3.tsx b/blocks/resources3.tsx
new file mode 100644
index 0000000..7e4cb3a
--- /dev/null
+++ b/blocks/resources3.tsx
@@ -0,0 +1,142 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface FeaturedPostData {
+  title: string;
+  imageUrl: string;
+  link: string;
+}
+
+const FEATURED_POST: FeaturedPostData = {
+  title: "ساخت بلاک‌های قابل استفاده مجدد رابط کاربری برای مبتدیان",
+  imageUrl:
+    "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  link: "#",
+};
+
+const ARTICLES = [
+  {
+    date: "۱۳ دی ۱۴۰۳",
+    category: "سیستم طراحی",
+    link: "#",
+    title: "تسلط بر الگوهای بلاک رابط کاربری قابل استفاده مجدد در اپلیکیشن‌های رابط کاربری",
+  },
+  {
+    date: "۱۴ دی ۱۴۰۳",
+    category: "بهترین روش‌ها",
+    link: "#",
+    title: "۱۰ اشتباه رایج که هنگام ساخت کامپوننت‌های رابط کاربری باید از آن‌ها دوری کنید",
+  },
+  {
+    date: "۱۵ دی ۱۴۰۳",
+    category: "کامپوننت‌ها",
+    link: "#",
+    title: "راهنمای گام‌به‌گام ساخت بلاک‌های کارت انعطاف‌پذیر",
+  },
+  {
+    date: "۱۶ دی ۱۴۰۳",
+    category: "دسترس‌پذیری",
+    link: "#",
+    title: "تضمین دسترس‌پذیری در کامپوننت‌های بلاک رابط کاربری سفارشی",
+  },
+  {
+    date: "۱۷ دی ۱۴۰۳",
+    category: "کارایی",
+    link: "#",
+    title: "چگونه بلاک‌های رابط کاربری را برای سرعت و کارایی بهینه کنیم",
+  },
+  {
+    date: "۱۸ دی ۱۴۰۳",
+    category: "فریم‌ورک‌ها",
+    link: "#",
+    title: "ساخت بلاک‌های رابط کاربری مقیاس‌پذیر با استایل‌دهی مدرن و Headless رابط کاربری",
+  },
+  {
+    date: "۱۹ دی ۱۴۰۳",
+    category: "سیستم طراحی",
+    link: "#",
+    title: "ایجاد بلاک‌های رابط کاربری یکپارچه در یک سیستم طراحی مشترک",
+  },
+  {
+    date: "۲۰ دی ۱۴۰۳",
+    category: "React",
+    link: "#",
+    title: "چرا رابط کاربری بهترین ابزار برای بلاک‌های رابط کاربری مبتنی بر کامپوننت است",
+  },
+];
+
+interface Resources3Props {
+  className?: string;
+}
+
+const Resources3 = ({ className }: Resources3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <FeaturedPost {...FEATURED_POST} />
+        <div className="flex w-full flex-col gap-4">
+          <h2 className="mt-16 text-start text-xl font-semibold">منابع</h2>
+          <div>
+            {ARTICLES.map((article, index) => (
+              <a
+                href={article.link}
+                key={index}
+                className="block w-full hover:bg-foreground/10"
+              >
+                <div className="flex flex-col items-baseline justify-between gap-2 border-t py-6 text-start text-foreground md:flex-row">
+                  <div className="basis-1/4 font-medium">{article.date}</div>
+                  <div className="basis-1/4">{article.category}</div>
+                  <div className="basis-1/2 text-muted-foreground">
+                    {article.title}
+                  </div>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const FeaturedPost = ({ title, imageUrl, link }: FeaturedPostData) => {
+  return (
+    <div className="flex flex-col justify-between gap-10 rounded-2xl bg-muted p-10 xl:flex-row">
+      <div className="basis-full text-start lg:basis-1/2">
+        <div className="flex flex-col gap-5">
+          <Badge variant="outline" className="bg-background">
+            منبع ویژه
+          </Badge>
+          <h2 className="text-xl leading-[1.2] font-normal text-foreground md:text-[2.5rem] xl:text-[3.125rem]">
+            {title}
+          </h2>
+          <div>
+            <Button
+              asChild
+              className="group relative mt-5 !px-6 transition-all hover:!ps-8 hover:!pe-4"
+            >
+              <a href={link}>
+                بیشتر بخوانید
+                <ArrowRight className="absolute top-1/2 end-4 -translate-y-1/2 opacity-0 transition-all group-hover:translate-x-1.5 group-hover:opacity-100 rtl:rotate-180 rtl:group-hover:-translate-x-1.5" />
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="basis-full lg:basis-1/2">
+        <div className="mx-auto aspect-[1.782729805] w-full max-w-[40rem] overflow-hidden rounded-2xl">
+          <img
+            src={imageUrl}
+            alt={title}
+            className="block size-full object-cover object-center"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { Resources3 };
diff --git a/blocks/resources4.tsx b/blocks/resources4.tsx
new file mode 100644
index 0000000..f60d388
--- /dev/null
+++ b/blocks/resources4.tsx
@@ -0,0 +1,114 @@
+import { ArrowRight } from "lucide-react";
+import { Fragment } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const news = [
+  {
+    title:
+      "پلتفرم هوش مصنوعی TechFlow اکنون در Azure Marketplace در دسترس است",
+    category: "همکاری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    date: "۲۵ خرداد ۱۴۰۳",
+    link: "#",
+  },
+  {
+    title: "CodeSphere: معرفی جدیدترین ابزار توسعه ما",
+    category: "بیانیه رسانه‌ای",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    date: "۲۰ خرداد ۱۴۰۳",
+    link: "#",
+  },
+  {
+    title:
+      "DataViz و CloudNative همکاری در ابزارهای تحلیل نسل بعد را اعلام کردند",
+    category: "همکاری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    date: "۸ خرداد ۱۴۰۳",
+    link: "#",
+  },
+  {
+    title:
+      "QuantumByte پلتفرم رایانش لبه EdgeCompute را معرفی کرد",
+    category: "اخبار",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    date: "۲۳ اردیبهشت ۱۴۰۳",
+    link: "#",
+  },
+  {
+    title: "در نشست جهانی DevCon ۲۲۴ در برلین همراه ما باشید",
+    category: "بیانیه رسانه‌ای",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    date: "۱۶ اردیبهشت ۱۴۰۳",
+    link: "#",
+  },
+];
+
+interface Resources4Props {
+  className?: string;
+}
+
+const Resources4 = ({ className }: Resources4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-start justify-between gap-5 lg:flex-row lg:gap-2">
+          <div className="flex w-full max-w-56 items-center gap-3 text-start text-sm">
+            <span className="size-2 rounded-full bg-primary"></span>
+            منابع
+          </div>
+          <div className="flex-1 text-start">
+            <h2 className="text-3xl">
+              در جریان بمانید؟
+              <br />
+              <span className="text-primary/50">
+                آخرین به‌روزرسانی‌های ما را کشف کنید.
+              </span>
+            </h2>
+            <div className="mt-14">
+              <Separator />
+              {news.map((item, idx) => (
+                <Fragment key={idx}>
+                  <a
+                    href={item.link}
+                    className="group flex flex-col justify-between gap-10 py-6 text-start transition-all duration-400 lg:flex-row lg:items-center lg:hover:bg-muted"
+                  >
+                    <div className="flex items-center gap-2 text-lg transition-all duration-400 lg:group-hover:translate-x-8 rtl:lg:group-hover:-translate-x-8">
+                      <p className="inline text-pretty text-primary">
+                        {item.title}
+                        <ArrowRight className="ms-2 inline size-4 shrink-0 opacity-0 transition-all duration-400 rtl:rotate-180 lg:group-hover:text-primary lg:group-hover:opacity-100" />
+                      </p>
+                    </div>
+                    <div className="flex w-full items-center justify-between transition-all duration-400 lg:max-w-72 lg:group-hover:-translate-x-4 rtl:lg:group-hover:translate-x-4 xl:max-w-80">
+                      <p className="text-xs text-muted-foreground">
+                        {item.category}
+                      </p>
+                      <div className="flex items-center gap-2">
+                        <Avatar className="size-7 rounded-full border border-border">
+                          <AvatarImage src={item.avatar} />
+                        </Avatar>
+                        <time className="text-xs text-muted-foreground">
+                          {item.date}
+                        </time>
+                      </div>
+                    </div>
+                  </a>
+                  <Separator />
+                </Fragment>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Resources4 };
diff --git a/blocks/resources5.tsx b/blocks/resources5.tsx
new file mode 100644
index 0000000..87bab74
--- /dev/null
+++ b/blocks/resources5.tsx
@@ -0,0 +1,174 @@
+import { ArrowRight, BookOpen, Play, Users } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface Resources5Props {
+  courses: Array<{
+    badge?: string;
+    title: string;
+    description: string;
+    author: {
+      name: string;
+      title: string;
+      avatar: string;
+      className?: string;
+    };
+    image: string;
+    lessons: number;
+    videos: number;
+    duration: string;
+    audience: string[];
+    gradient: string;
+    cta: {
+      text: string;
+      url: string;
+    };
+  }>;
+  className?: string;
+}
+
+const Resources5 = ({
+  className,
+  courses = [
+    {
+      badge: "دوره",
+      title: "تسلط بر مبانی Sanity Studio",
+      description:
+        "مفاهیم اصلی Sanity Studio را از طراحی schema تا مدل‌سازی محتوا بیاموزید. اولین سیستم مدیریت محتوای خود را با تمرین‌های عملی و مثال‌های واقعی بسازید.",
+      author: {
+        name: "علی رضایی",
+        title: "سازنده محصول ارشد در Sanity",
+        avatar:
+          "/block-media/shadcnblocks/block/avatar-4.webp",
+      },
+      lessons: 12,
+      videos: 15,
+      duration: "۴۲:۱۸ دقیقه",
+      audience: ["توسعه‌دهندگان", "تولیدکنندگان محتوا"],
+      gradient: "from-blue-100 to-purple-100",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-1.svg",
+      cta: {
+        text: "شروع",
+        url: "https://www.ShadcnBlocks",
+      },
+    },
+    {
+      badge: "دوره",
+      title: "عملیات پیشرفته محتوا",
+      description:
+        "به ویژگی‌های پیشرفته Sanity از جمله کامپوننت‌های ورودی سفارشی، قوانین اعتبارسنجی و بهینه‌سازی کارایی بپردازید. گردش‌کارهای محتوایی مقیاس‌پذیر برای اپلیکیشن‌های سازمانی بسازید.",
+      author: {
+        name: "مریم رودریگز",
+        title: "استراتژیست ارشد محتوا",
+        avatar:
+          "/block-media/shadcnblocks/block/avatar-3.webp",
+      },
+      lessons: 18,
+      videos: 22,
+      duration: "۵۸:۴۵ دقیقه",
+      audience: ["توسعه‌دهندگان", "تولیدکنندگان محتوا", "طراحان"],
+      gradient: "from-green-100 to-emerald-100",
+      image:
+        "/block-media/shadcnblocks/block/placeholder-2.svg",
+      cta: {
+        text: "شروع",
+        url: "https://www.ShadcnBlocks",
+      },
+    },
+  ],
+}: Resources5Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-16", className)}
+    >
+      <div className="flex flex-col gap-8">
+        {courses.map((course) => (
+          <div
+            key={course.title}
+            className="relative flex flex-col gap-8 border-t border-border py-16 md:p-8"
+          >
+            <div className="container grid grid-cols-1 gap-10 md:grid-cols-2">
+              <div className="flex flex-col gap-4 text-start">
+                <div>
+                  <Badge variant="secondary" className="rounded-none">
+                    {course.badge}
+                  </Badge>
+                </div>
+
+                <h3 className="text-xl font-bold">{course.title}</h3>
+
+                <div className="space-y-2 text-sm text-foreground/90">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-4 w-4" />
+                    <span>{course.audience.join("، ")}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <BookOpen className="h-4 w-4" />
+                    <span>{course.lessons} درس</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Play className="h-4 w-4" />
+                    <span>
+                      {course.videos} ویدیو، {course.duration}
+                    </span>
+                  </div>
+                </div>
+
+                <p className="text-lg leading-relaxed">{course.description}</p>
+
+                <div>
+                  <div className="flex items-center gap-3">
+                    <Avatar className="size-10 border xl:size-12">
+                      <AvatarImage src={course.author.avatar} />
+                      <AvatarFallback>{course.author.name}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="font-medium">{course.author.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {course.author.title}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <a
+                  href={course.cta.url}
+                  className="group/btn flex w-fit items-center gap-2 border-s border-border p-1 hover:bg-accent"
+                >
+                  <span className="font-medium">{course.cta.text}</span>
+                  <ArrowRight className="h-4 w-4 text-primary transition-transform group-hover/btn:translate-x-1 rtl:rotate-180 rtl:group-hover/btn:-translate-x-1" />
+                </a>
+              </div>
+
+              <div>
+                <div
+                  className={`group grid aspect-video w-full place-items-center rounded-lg bg-gradient-to-br pt-6 pe-8 ${course.gradient} transition duration-200 ease-out hover:scale-[1.03] hover:-rotate-2 dark:from-muted dark:to-muted/50`}
+                >
+                  <div className="shadow-duo col-start-1 row-start-1 flex aspect-square w-24 origin-top-right rotate-[-6deg] rounded-md border border-border bg-muted/50 transition duration-500 ease-out group-hover:scale-[1.1] group-hover:rotate-[-2deg] lg:w-32"></div>
+                  <div className="shadow-duo col-start-1 row-start-1 flex aspect-square w-24 origin-top-right rotate-[-8deg] rounded-md border border-border bg-muted/50 transition duration-500 ease-out group-hover:scale-[1.1] group-hover:rotate-[-8deg] lg:w-32"></div>
+                  <div className="shadow-duo col-start-1 row-start-1 flex aspect-square w-24 origin-top-right rotate-[-10deg] rounded-md border border-border bg-card transition duration-500 ease-out group-hover:scale-[1.1] group-hover:rotate-[-14deg] lg:w-32">
+                    <div className="m-4 h-4 w-4 rounded-full bg-muted shadow-inner"></div>
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <img
+                        src={course.image}
+                        alt={course.title}
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Resources5 };
diff --git a/blocks/reviews1.tsx b/blocks/reviews1.tsx
new file mode 100644
index 0000000..32fb9dd
--- /dev/null
+++ b/blocks/reviews1.tsx
@@ -0,0 +1,176 @@
+import { BadgeCheck } from "lucide-react";
+
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Review {
+  id: string;
+  rating: number;
+  title: string;
+  content: string;
+  author: {
+    name: string;
+    avatar?: string;
+  };
+  date: string;
+  verified?: boolean;
+}
+
+const DEFAULT_REVIEWS: Review[] = [
+  {
+    id: "1",
+    rating: 5,
+    title: "فراتر از انتظارم بود",
+    content:
+      "اول کمی تردید داشتم، ولی این محصول واقعاً جواب داد. کیفیت ساخت عالی است و زودتر از موعد به دستم رسید. اگر هنوز مردد هستید، حتماً پیشنهاد می‌کنم امتحان کنید.",
+    author: {
+      name: "سارا احمدی",
+      avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    date: "۲۰ آذر ۱۴۰۳",
+    verified: true,
+  },
+  {
+    id: "2",
+    rating: 4,
+    title: "ارزش خرید بالا",
+    content:
+      "به‌طور کلی محصول خوبی است و دقیقاً همان کاری را می‌کند که باید. یک ستاره کم کردم چون بسته‌بندی می‌توانست بهتر باشد، ولی خود محصول عالی است.",
+    author: {
+      name: "مازیار رضایی",
+      avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    date: "۱۸ آذر ۱۴۰۳",
+    verified: true,
+  },
+  {
+    id: "3",
+    rating: 5,
+    title: "عالی برای استفاده روزمره",
+    content:
+      "یک ماه است هر روز از آن استفاده می‌کنم و هنوز مثل روز اول به نظر می‌رسد و درست کار می‌کند. با این قیمت، کیفیت ساخت واقعاً قابل تحسین است. برای خواهرم هم یکی خریدم.",
+    author: {
+      name: "نیلوفر حسینی",
+      avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    date: "۱۵ آذر ۱۴۰۳",
+    verified: true,
+  },
+  {
+    id: "4",
+    rating: 4,
+    title: "خوب، ولی کامل نیست",
+    content:
+      "محصول خوب است و درست کار می‌کند. تنها نکته کوچک این است که رنگ کمی با عکس‌ها فرق دارد، ولی در مجموع خرید رضایت‌بخشی بود.",
+    author: {
+      name: "امیر محمدی",
+    },
+    date: "۱۲ آذر ۱۴۰۳",
+    verified: false,
+  },
+  {
+    id: "5",
+    rating: 5,
+    title: "بهترین خرید امسالم",
+    content:
+      "واقعاً عاشقش شدم! به جزئیات با دقت زیادی توجه شده. وقتی سوال داشتم، پشتیبانی هم بسیار مفید بود. از هر نظر پنج ستاره.",
+    author: {
+      name: "رؤیا کاظمی",
+      avatar: "/block-media/shadcnblocks/block/avatar-7.webp",
+    },
+    date: "۸ آذر ۱۴۰۳",
+    verified: true,
+  },
+];
+
+interface Reviews1Props {
+  reviews?: Review[];
+  title?: string;
+  className?: string;
+}
+
+const Reviews1 = ({
+  reviews = DEFAULT_REVIEWS,
+  title = "نظرات مشتریان",
+  className,
+}: Reviews1Props) => {
+  const averageRating =
+    reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length;
+
+  const formattedAverage = averageRating.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+  const reviewCountLabel = `${reviews.length.toLocaleString("fa-IR")} نظر`;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-3xl">
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold tracking-tight md:text-3xl">
+            {title}
+          </h2>
+          <div className="mt-2 flex items-center gap-3">
+            <Rating rate={averageRating} className="[&_svg]:size-5" />
+            <span className="text-sm text-muted-foreground">
+              {formattedAverage} از ۵ · {reviewCountLabel}
+            </span>
+          </div>
+        </div>
+
+        <div className="space-y-0">
+          {reviews.map((review, index) => (
+            <div key={review.id}>
+              {index > 0 && <Separator className="my-6" />}
+              <div className="space-y-3">
+                <div>
+                  <Rating rate={review.rating} className="[&_svg]:size-4" />
+                  <h3 className="mt-2 font-medium">{review.title}</h3>
+                </div>
+
+                <p className="text-sm leading-relaxed text-muted-foreground">
+                  {review.content}
+                </p>
+
+                <div className="flex items-center gap-3">
+                  <Avatar className="size-8">
+                    <AvatarImage
+                      src={review.author.avatar}
+                      alt={review.author.name}
+                    />
+                    <AvatarFallback className="text-xs">
+                      {review.author.name
+                        .split(/\s+/)
+                        .slice(0, 2)
+                        .map((part) => part[0])
+                        .join("")}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex items-center gap-2 text-sm">
+                    <span className="font-medium">{review.author.name}</span>
+                    {review.verified && (
+                      <span className="flex items-center gap-1 text-emerald-600">
+                        <BadgeCheck className="size-4" />
+                        <span className="text-xs">خرید تأییدشده</span>
+                      </span>
+                    )}
+                    <span className="text-muted-foreground">·</span>
+                    <span className="text-muted-foreground">{review.date}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Reviews1 };
diff --git a/blocks/reviews18.tsx b/blocks/reviews18.tsx
new file mode 100644
index 0000000..e7f37f4
--- /dev/null
+++ b/blocks/reviews18.tsx
@@ -0,0 +1,445 @@
+"use client";
+
+import "photoswipe/style.css";
+
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+
+import { Rating } from "@/components/shadcnblocks/rating";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { badgeVariants } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+type ImageType = {
+  src: string;
+  width: number;
+  height: number;
+  alt?: string;
+};
+
+type ReviewType = {
+  rate: number;
+  author?: string;
+  verifiedBuyer?: boolean;
+  country?: {
+    name: string;
+    code: string;
+  };
+  date: string;
+  title: string;
+  comment: string;
+  images?: ImageType[];
+};
+
+type ReplyType = {
+  title: string;
+  comment: string;
+  date: string;
+};
+
+type ReviewWithOptionalReply = ReviewType & {
+  reply?: ReplyType;
+};
+
+interface Reviews18Props {
+  reviews?: ReviewWithOptionalReply[];
+  pageAmmount?: string;
+  className?: string;
+}
+
+type ReviewProps = ReviewWithOptionalReply;
+
+const REVIEWS: ReviewWithOptionalReply[] = [
+  {
+    rate: 5,
+    author: "جواد حسینی",
+    verifiedBuyer: true,
+    country: {
+      name: "کانادا",
+      code: "CA",
+    },
+    date: "۲ ماه پیش",
+    title: "ساعت زیبا با کیفیت عالی",
+    comment:
+      "واقعاً این ساعت را دوست دارم! حس لوکس دارد، روی مچ راحت است و حضوری حتی بهتر از عکس به نظر می‌رسد. جزئیاتش چشمگیر است و هم با استایل روزمره و هم رسمی جور درمی‌آید. سریع رسید و بسته‌بندی محکم بود. از وقتی رسیده تقریباً هر روز بسته‌ام  قطعاً پیشنهاد می‌کنم.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Watch-on-Womans-Wrist-2.png",
+        width: 1200,
+        height: 1200,
+        alt: "ساعت روی مچ",
+      },
+    ],
+  },
+  {
+    rate: 5,
+    author: "ناشناس",
+    verifiedBuyer: true,
+    country: {
+      name: "ایالات متحده",
+      code: "US",
+    },
+    date: "۲ ماه پیش",
+    title: "جواهرات خیره‌کننده",
+    comment:
+      "کیفیت ساخت فوق‌العاده است. جواهرات ظریف و زیر نور زیبا می‌درخشد. دقیقاً همان چیزی بود که می‌خواستم  سبک، راحت و بسیار شیک. حس برند لوکس دارد و در جعبه زیبایی رسید که تجربه خرید را بهتر کرد. تا حالا چندین تعریف شنیده‌ام.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Jewelry-Portrait-1.png",
+        width: 349,
+        height: 640,
+        alt: "پرتره با جواهرات",
+      },
+    ],
+  },
+  {
+    rate: 5,
+    author: "ناشناس",
+    verifiedBuyer: true,
+    country: {
+      name: "ایالات متحده",
+      code: "US",
+    },
+    date: "۲ ماه پیش",
+    title: "اندازه دقیق و طراحی شیک",
+    comment:
+      "کیفیت پارچه عالی است  نرم، فیت مناسب و رنگ‌هایی که حضوری هم مثل عکس‌ها جذاب‌اند. هر دو قطعه بادوام و راحت‌اند و دوختشان دقیق است. اندازه‌ها هم دقیقاً مطابق راهنما بود. حتماً دوباره از این فروشگاه سفارش می‌دهم چون ارزش خرید واقعاً بالاست.",
+    images: [
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881454-1.jpg",
+        width: 640,
+        height: 853,
+        alt: "تصویر نظر مشتری  لباس ۱",
+      },
+      {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-19881457-1.jpg",
+        width: 640,
+        height: 853,
+        alt: "تصویر نظر مشتری  لباس ۲",
+      },
+    ],
+  },
+  {
+    rate: 5,
+    author: "ناشناس",
+    verifiedBuyer: true,
+    country: {
+      name: "ایالات متحده",
+      code: "US",
+    },
+    date: "۲ ماه پیش",
+    title: "کیفیت شگفت‌انگیز",
+    comment:
+      "از کیفیت کلی و بسته‌بندی خیلی راضی‌ام. همه‌چیز لوکس و بادوام است، از جنس تا جزئیات پرداخت. ارسال سریع بود و کالا سالم رسید. این برند از انتظارم بالاتر رفت و همین الان دنبال خرید بعدی‌ام.",
+  },
+  {
+    rate: 5,
+    author: "ناشناس",
+    verifiedBuyer: true,
+    country: {
+      name: "استرالیا",
+      code: "AU",
+    },
+    date: "۲ ماه پیش",
+    title: "کاملاً پیشنهاد می‌کنم",
+    comment:
+      "در همه جنبه‌ها از انتظارم فراتر رفت. جنس‌ها لوکس‌اند، ساخت عالی است و رنگ‌ها حضوری فوق‌العاده‌اند. وقتی درباره سایز سوال داشتم، پشتیبانی هم بسیار مفید بود. ارسال سریع، بسته‌بندی زیبا و تجربه خرید عالی  از خریدم کاملاً راضی‌ام.",
+  },
+];
+
+const sortOptions = [
+  { value: "featured", label: "برگزیده" },
+  { value: "highest_rating", label: "بیشترین امتیاز" },
+  { value: "lowest_rating", label: "کمترین امتیاز" },
+] as const;
+
+const Reviews18 = ({
+  reviews = REVIEWS,
+  pageAmmount = "۱ تا ۲۰ از ۲۲۵ نظر",
+  className,
+}: Reviews18Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32", className)}
+    >
+      <div className="container">
+        <div className="flex items-center justify-between border-b py-4">
+          <p className="text-sm max-sm:sr-only">{pageAmmount}</p>
+          <Select defaultValue="featured">
+            <SelectTrigger className="w-45" aria-label="مرتب‌سازی نظرات">
+              <SelectValue placeholder="برگزیده" />
+            </SelectTrigger>
+            <SelectContent dir="rtl">
+              {sortOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div>
+          {reviews.map((item, index) => (
+            <Review key={`${item.author}-${item.title}-${index}`} {...item} />
+          ))}
+        </div>
+        <div className="flex items-center justify-center">
+          <Button size="lg" className="rounded-full">
+            نمایش بیشتر
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const Review = ({
+  title,
+  comment,
+  images,
+  rate,
+  author,
+  verifiedBuyer,
+  country,
+  date,
+}: ReviewProps) => {
+  return (
+    <div className="grid grid-cols-1 gap-x-10 gap-y-6 py-10 lg:grid-cols-3">
+      <div className="col-span-1">
+        <div className="space-y-2">
+          <Rating rate={rate} />
+          <div className="flex items-baseline gap-2 lg:flex-col">
+            <p className="text-base leading-normal font-medium text-muted-foreground lg:text-xl">
+              {author}
+            </p>
+            {verifiedBuyer && (
+              <p className="text-sm leading-normal font-medium text-green-600">
+                خریدار تأییدشده
+              </p>
+            )}
+          </div>
+        </div>
+        <div className="mt-3 lg:mt-4">
+          {country && (
+            <div className="inline-flex gap-1">
+              <img
+                alt={`پرچم ${country.name}`}
+                className="inline-block w-5"
+                src={`https://purecatamphetamine.github.io/country-flag-icons/3x2/${country.code}.svg`}
+              />
+              <span className="text-sm text-muted-foreground">
+                <span>{country.name}</span>، <span>{date}</span>
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="space-y-2 lg:col-span-2 lg:space-y-5">
+        <h2 className="text-lg leading-normal font-bold text-primary lg:text-xl">
+          {title}
+        </h2>
+        <p className="leading-relaxed text-muted-foreground">{comment}</p>
+        <div className="max-lg:mt-5">
+          <ReviewCarousel images={images} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ReviewCarousel = ({
+  images,
+  galleryID,
+}: {
+  images?: ImageType[];
+  galleryID?: string;
+}) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
+  const generatedGalleryID = useId();
+  const PhotoSwipeID = galleryID?.trim() ?? generatedGalleryID;
+
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#" + PhotoSwipeID,
+      children: "a",
+      bgOpacity: 1,
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      close: false,
+      zoom: false,
+      counter: false,
+      mainClass: "[&>div:first-child]:!bg-background",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+    lightboxRef.current = lightbox;
+    const buttonClassName = cn(
+      buttonVariants({
+        variant: "outline",
+        size: "icon",
+        className: "rounded-full",
+      }),
+    );
+    const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
+
+    lightbox.on("uiRegister", () => {
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-close-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 end-5",
+          html: `
+              <button type="button" id="pswp-close" class="${buttonClassName}" aria-label="بستن گالری">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+              </button>
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-close")?.addEventListener("click", () =>
+              pswp.close(),
+            );
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-indicator-btn",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-5 start-5",
+          html: `
+              <div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
+              </div>
+            `,
+          onInit: (el, pswp) => {
+            const indicatorElem = el.querySelector("#pswp-indicator");
+            let prevIndex = -1;
+
+            pswp.on("change", () => {
+              prevIndex = pswp.currIndex;
+              if (indicatorElem) {
+                const current = (prevIndex + 1).toLocaleString("fa-IR");
+                const total = pswp.getNumItems().toLocaleString("fa-IR");
+                indicatorElem.innerHTML = `${current} / ${total}`;
+              }
+            });
+          },
+        });
+      }
+
+      if (lightbox?.pswp?.ui) {
+        lightbox.pswp.ui.registerElement({
+          name: "custom-next-prev-btns",
+          order: 10,
+          isButton: false,
+          appendTo: "root",
+          className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
+          html:
+            images && images.length < 2
+              ? ""
+              : `
+            <div class="flex items-center justify-between px-4">
+              <button type="button" id="pswp-prev" class="${buttonClassName}" aria-label="تصویر بعدی">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              </button>
+              <button type="button" id="pswp-next" class="${buttonClassName}" aria-label="تصویر قبلی">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </button>
+            </div>
+            `,
+          onInit: (el, pswp) => {
+            el.querySelector("#pswp-prev")?.addEventListener("click", () =>
+              pswp.next(),
+            );
+            el.querySelector("#pswp-next")?.addEventListener("click", () =>
+              pswp.prev(),
+            );
+          },
+        });
+      }
+    });
+
+    return () => lightbox.destroy();
+  }, [PhotoSwipeID, images]);
+
+  const onSelect = useCallback((carouselApi: CarouselApi) => {
+    if (!carouselApi) return;
+    setCurrent(carouselApi.selectedScrollSnap() + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    onSelect(api);
+    return () => {
+      api.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  useEffect(() => {
+    if (lightboxRef.current && api) {
+      lightboxRef.current.on("change", () => {
+        api.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
+      });
+    }
+  }, [api, current]);
+
+  if (!images?.length) return null;
+
+  return (
+    <div id={PhotoSwipeID}>
+      <Carousel setApi={setApi} opts={{ direction: "rtl", align: "start" }}>
+        <CarouselContent>
+          {images.map((img, index) => (
+            <CarouselItem
+              className="sm:basis-1/3 lg:basis-1/5"
+              key={`${img.src}-${index}`}
+            >
+              <AspectRatio ratio={1}>
+                <a
+                  href={img.src}
+                  data-pswp-width={img.width}
+                  data-pswp-height={img.height}
+                  target="_blank"
+                  rel="noreferrer"
+                  data-cropped="true"
+                >
+                  <img
+                    src={img.src}
+                    alt={img.alt ?? `تصویر ${(index + 1).toLocaleString("fa-IR")}`}
+                    className="block size-full object-cover object-center"
+                  />
+                </a>
+              </AspectRatio>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  );
+};
+
+export { Reviews18 };
diff --git a/blocks/reviews2.tsx b/blocks/reviews2.tsx
new file mode 100644
index 0000000..5b7bfc6
--- /dev/null
+++ b/blocks/reviews2.tsx
@@ -0,0 +1,227 @@
+import { BadgeCheck } from "lucide-react";
+
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+interface Review {
+  id: string;
+  rating: number;
+  title: string;
+  content: string;
+  author: {
+    name: string;
+    avatar?: string;
+  };
+  date: string;
+  verified?: boolean;
+}
+
+const DEFAULT_REVIEWS: Review[] = [
+  {
+    id: "1",
+    rating: 5,
+    title: "فراتر از انتظارم بود",
+    content:
+      "اول کمی تردید داشتم، ولی این محصول واقعاً جواب داد. کیفیت ساخت عالی است و زودتر از موعد به دستم رسید. اگر هنوز مردد هستید، حتماً پیشنهاد می‌کنم امتحان کنید.",
+    author: {
+      name: "سارا احمدی",
+      avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    date: "۲۰ آذر ۱۴۰۳",
+    verified: true,
+  },
+  {
+    id: "2",
+    rating: 4,
+    title: "ارزش خرید بالا",
+    content:
+      "به‌طور کلی محصول خوبی است و دقیقاً همان کاری را می‌کند که باید. یک ستاره کم کردم چون بسته‌بندی می‌توانست بهتر باشد، ولی خود محصول عالی است.",
+    author: {
+      name: "مازیار رضایی",
+      avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    date: "۱۸ آذر ۱۴۰۳",
+    verified: true,
+  },
+  {
+    id: "3",
+    rating: 5,
+    title: "عالی برای استفاده روزمره",
+    content:
+      "یک ماه است هر روز از آن استفاده می‌کنم و هنوز مثل روز اول به نظر می‌رسد و درست کار می‌کند. با این قیمت، کیفیت ساخت واقعاً قابل تحسین است. برای خواهرم هم یکی خریدم.",
+    author: {
+      name: "نیلوفر حسینی",
+      avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    date: "۱۵ آذر ۱۴۰۳",
+    verified: true,
+  },
+  {
+    id: "4",
+    rating: 4,
+    title: "خوب، ولی کامل نیست",
+    content:
+      "محصول خوب است و درست کار می‌کند. تنها نکته کوچک این است که رنگ کمی با عکس‌ها فرق دارد، ولی در مجموع خرید رضایت‌بخشی بود.",
+    author: {
+      name: "امیر محمدی",
+    },
+    date: "۱۲ آذر ۱۴۰۳",
+    verified: false,
+  },
+  {
+    id: "5",
+    rating: 5,
+    title: "بهترین خرید امسالم",
+    content:
+      "واقعاً عاشقش شدم! به جزئیات با دقت زیادی توجه شده. وقتی سوال داشتم، پشتیبانی هم بسیار مفید بود. از هر نظر پنج ستاره.",
+    author: {
+      name: "رؤیا کاظمی",
+      avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    date: "۸ آذر ۱۴۰۳",
+    verified: true,
+  },
+  {
+    id: "6",
+    rating: 3,
+    title: "قابل قبول، ولی انتظار بیشتری داشتم",
+    content:
+      "با توجه به قیمت، محصول معمولی است؛ چیز خاصی نیست ولی کارش را انجام می‌دهد. ارسال سریع بود که نکته مثبتش بود.",
+    author: {
+      name: "پارسا موسوی",
+    },
+    date: "۵ آذر ۱۴۰۳",
+    verified: true,
+  },
+];
+
+interface Reviews2Props {
+  reviews?: Review[];
+  title?: string;
+  className?: string;
+}
+
+const Reviews2 = ({
+  reviews = DEFAULT_REVIEWS,
+  title = "نظرات مشتریان",
+  className,
+}: Reviews2Props) => {
+  const totalReviews = reviews.length;
+  const averageRating =
+    reviews.reduce((sum, review) => sum + review.rating, 0) / totalReviews;
+
+  const formattedAverage = averageRating.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+  const ratingCounts = [5, 4, 3, 2, 1].map((star) => ({
+    star,
+    count: reviews.filter((r) => r.rating === star).length,
+    percentage:
+      (reviews.filter((r) => r.rating === star).length / totalReviews) * 100,
+  }));
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-5xl">
+        <h2 className="mb-8 text-xl font-semibold tracking-tight md:text-3xl">
+          {title}
+        </h2>
+
+        <div className="grid gap-8 lg:grid-cols-[280px_1fr] lg:gap-12">
+          <div className="space-y-6">
+            <div className="text-center lg:text-start">
+              <div className="text-2xll font-bold">{formattedAverage}</div>
+              <Rating
+                rate={averageRating}
+                className="mt-2 justify-center lg:justify-start [&_svg]:size-5"
+              />
+              <p className="mt-1 text-sm text-muted-foreground">
+                بر اساس {totalReviews.toLocaleString("fa-IR")} نظر
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              {ratingCounts.map(({ star, count, percentage }) => (
+                <div key={star} className="flex items-center gap-3">
+                  <span className="w-10 shrink-0 text-sm text-muted-foreground">
+                    {star.toLocaleString("fa-IR")} ★
+                  </span>
+                  <Progress value={percentage} className="h-2 flex-1" />
+                  <span className="w-8 shrink-0 text-end text-sm text-muted-foreground">
+                    {count.toLocaleString("fa-IR")}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            {reviews.map((review) => (
+              <Card key={review.id} className="gap-0 p-0 shadow-none">
+                <CardContent className="p-5">
+                  <div className="space-y-3">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="flex items-center gap-2.5">
+                        <Avatar className="size-9">
+                          <AvatarImage
+                            src={review.author.avatar}
+                            alt={review.author.name}
+                          />
+                          <AvatarFallback className="text-xs">
+                            {review.author.name
+                              .split(/\s+/)
+                              .slice(0, 2)
+                              .map((part) => part[0])
+                              .join("")}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div>
+                          <div className="flex items-center gap-1.5">
+                            <span className="text-sm font-medium">
+                              {review.author.name}
+                            </span>
+                            {review.verified && (
+                              <BadgeCheck
+                                className="size-4 text-emerald-600"
+                                aria-label="خرید تأییدشده"
+                              />
+                            )}
+                          </div>
+                          <p className="text-xs text-muted-foreground">
+                            {review.date}
+                          </p>
+                        </div>
+                      </div>
+                      <Rating
+                        rate={review.rating}
+                        className="[&_svg]:size-3.5 [&>div]:size-3.5"
+                      />
+                    </div>
+
+                    <div>
+                      <h3 className="font-medium">{review.title}</h3>
+                      <p className="mt-1.5 line-clamp-3 text-sm leading-relaxed text-muted-foreground">
+                        {review.content}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Reviews2 };
diff --git a/blocks/reviews23.tsx b/blocks/reviews23.tsx
new file mode 100644
index 0000000..5369b65
--- /dev/null
+++ b/blocks/reviews23.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type ReviewType = {
+  author: {
+    image?: string;
+    name: string;
+    verifiedBuyer?: boolean;
+  };
+  comment: string;
+  image?: string;
+  product: {
+    name: string;
+    image: string;
+    link: string;
+  };
+};
+
+type ReviewCardType = ReviewType;
+
+interface Reviews23Props {
+  reviews?: ReviewType[];
+  title?: string;
+  className?: string;
+}
+
+const REVIEWS: ReviewType[] = [
+  {
+    author: {
+      image: "/block-media/shadcnblocks/block/avatar-1.webp",
+      name: "ژاله وحدتی",
+      verifiedBuyer: true,
+    },
+    comment:
+      "رژگونه خیلی نرم پخش می‌شود و درخشش طبیعی می‌دهد. سبک است، قابل لایه‌گذاری است و تا آخر روز محو نمی‌شود. واقعاً تحت تأثیرم!",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/promotional/Close-Up-of-Womans-Face-1.png",
+    product: {
+      name: "رژگونه ابریشمی درخشان",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/Makeup-Product-Flat-Lay-1.png",
+      link: "#",
+    },
+  },
+  {
+    author: {
+      image: "/block-media/shadcnblocks/block/avatar-3.webp",
+      name: "ژاله وحدتی",
+      verifiedBuyer: true,
+    },
+    comment:
+      "رنگش زیباست و بافت کرمی‌اش کار با آن را خیلی آسان می‌کند. لب‌ها را آبرسان می‌کند و درخشش برنزی غنی می‌دهد. حالا جزو لوازم ثابت آرایشم شده.",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/Close-Up-of-Lips-1.png",
+    product: {
+      name: "رژ لب برنزی درخشان",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/Shimmering-Bronze-Lipstick-Close-Up-1.png",
+      link: "#",
+    },
+  },
+  {
+    author: {
+      image: "/block-media/shadcnblocks/block/avatar-4.webp",
+      name: "ژاله وحدتی",
+      verifiedBuyer: true,
+    },
+    comment:
+      "این سرم ضد چروک سریع جذب می‌شود و پوستم سفت‌تر و نرم‌تر شده. بعد از چند هفته خطوط ریز به‌طور محسوسی نرم‌تر به نظر می‌رسند. عاشقش شدم!",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/Skincare-Routine-Close-Up-1.png",
+    product: {
+      name: "سرم ضد چروک جوان‌ساز",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/Frosted-Glass-Dropper-1.png",
+      link: "#",
+    },
+  },
+  {
+    author: {
+      image: "/block-media/shadcnblocks/block/avatar-5.webp",
+      name: "ژاله وحدتی",
+      verifiedBuyer: true,
+    },
+    comment:
+      "کرمی با آبرسانی عمیق که غنی است ولی سنگین نیست. پوستم تا آخر روز نرم، مرطوب و درخشان می‌ماند. برای پوست خشک یا حساس عالی است.",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/Woman-Applying-Face-Cream-1.png",
+    product: {
+      name: "کرم آبران فوق‌العاده صورت",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-carlos-diaz-216017-18350286-1.jpg",
+      link: "#",
+    },
+  },
+  {
+    author: {
+      image: "/block-media/shadcnblocks/block/avatar-2.webp",
+      name: "ژاله وحدتی",
+      verifiedBuyer: true,
+    },
+    comment:
+      "کرم بدن واقعاً لوکس است! روی پوست ذوب می‌شود و آن را ابریشمی، تغذیه‌شده و با عطر ملایم می‌گذارد. برای استفاده روزانه عالی  شدیداً پیشنهاد می‌کنم.",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/promotional/Skincare-Routine-1.png",
+    product: {
+      name: "کرم مغذی بدن",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/skin-care-product/Elegant-Hand-Holding-Skincare-Product-1.png",
+      link: "#",
+    },
+  },
+];
+
+const Reviews23 = ({
+  reviews = REVIEWS,
+  title = "مشتریان عاشق ما هستند",
+  className,
+}: Reviews23Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container space-y-8">
+        <div className="flex items-center justify-between gap-4">
+          <h2 className="font-serif text-xl">{title}</h2>
+          <div className="flex gap-3">
+            <Button
+              onClick={() => api?.scrollPrev()}
+              variant="outline"
+              className="rounded-full"
+              size="icon-lg"
+              aria-label="اسلاید قبلی"
+            >
+              <ChevronRight />
+            </Button>
+            <Button
+              onClick={() => api?.scrollNext()}
+              variant="outline"
+              className="rounded-full"
+              size="icon-lg"
+              aria-label="اسلاید بعدی"
+            >
+              <ChevronLeft />
+            </Button>
+          </div>
+        </div>
+        <div>
+          <Carousel
+            setApi={setApi}
+            className="[&>div]:overflow-visible"
+            opts={{ direction: "rtl", align: "start" }}
+          >
+            <CarouselContent>
+              {reviews.map((review, index) => (
+                <CarouselItem
+                  className="sm:basis-9/12 md:basis-150 lg:basis-1/2 xl:basis-1/3"
+                  key={`${review.product.name}-${index}`}
+                >
+                  <ReviewCard {...review} />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ReviewCard = ({ image, product, author, comment }: ReviewCardType) => {
+  const initials = author.name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join("");
+
+  return (
+    <Card className="h-full rounded-lg px-4 py-5">
+      <CardContent className="flex h-full flex-col justify-between p-0">
+        <div className="flex gap-3 max-md:flex-col-reverse">
+          <div className="flex-1 space-y-4">
+            <div className="flex gap-3">
+              <Avatar className="size-12.5 border">
+                <AvatarImage src={author.image} alt={author.name} />
+                <AvatarFallback>{initials}</AvatarFallback>
+              </Avatar>
+              <div className="space-y-0.5">
+                <h3 className="font-serif text-base leading-normal">
+                  {author.name}
+                </h3>
+                {author.verifiedBuyer && (
+                  <span className="text-xs text-muted-foreground">
+                    خریدار تأییدشده
+                  </span>
+                )}
+              </div>
+            </div>
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              {comment}
+            </p>
+          </div>
+          {image && (
+            <div className="basis-40">
+              <AspectRatio ratio={0.8} className="overflow-hidden rounded-lg">
+                <img
+                  src={image}
+                  alt={`تصویر نظر ${author.name} درباره ${product.name}`}
+                  className="block size-full object-cover object-center"
+                />
+              </AspectRatio>
+            </div>
+          )}
+        </div>
+        <div className="mt-auto space-y-3 pt-3">
+          <Separator />
+          <a href={product.link} className="group flex items-center gap-3">
+            <div className="size-10 shrink-0 overflow-hidden rounded-sm">
+              <img
+                src={product.image}
+                alt={product.name}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+            <span className="text-sm font-medium underline-offset-2 group-hover:underline">
+              {product.name}
+            </span>
+          </a>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { Reviews23 };
diff --git a/blocks/reviews3.tsx b/blocks/reviews3.tsx
new file mode 100644
index 0000000..091eac2
--- /dev/null
+++ b/blocks/reviews3.tsx
@@ -0,0 +1,297 @@
+"use client";
+
+import { BadgeCheck, ThumbsUp } from "lucide-react";
+import { useState } from "react";
+
+import { Rating } from "@/components/shadcnblocks/rating";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Review {
+  id: string;
+  rating: number;
+  title: string;
+  content: string;
+  author: {
+    name: string;
+    avatar?: string;
+  };
+  date: string;
+  verified?: boolean;
+  images?: string[];
+  helpful?: number;
+  variant?: string;
+}
+
+const DEFAULT_REVIEWS: Review[] = [
+  {
+    id: "1",
+    rating: 5,
+    title: "کیفیت فوق‌العاده",
+    content:
+      "دوخت و جزئیاتش باورنکردنی است. عکس‌ها حقش را نمی‌دهند؛ حضوری حتی بهتر به نظر می‌رسد. جنسش لوکس است و اندازه‌اش دقیقاً مناسب است. تا حالا خیلی تعریف شنیده‌ام!",
+    author: {
+      name: "سارا احمدی",
+      avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    date: "۲۰ آذر ۱۴۰۳",
+    verified: true,
+    images: [
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Person-in-Activewear-1.png",
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+    ],
+    helpful: 24,
+    variant: "سایز M، آبی نفتی",
+  },
+  {
+    id: "2",
+    rating: 4,
+    title: "محصول عالی، اندازه کمی کوچک",
+    content:
+      "کیفیت و طراحی را دوست دارم. کمی کوچک‌تر از اندازه معمول است؛ پیشنهاد می‌کنم یک سایز بزرگ‌تر بگیرید. به‌جز آن دقیقاً همان چیزی بود که می‌خواستم. ارسال هم سریع بود!",
+    author: {
+      name: "مازیار رضایی",
+      avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    date: "۱۸ آذر ۱۴۰۳",
+    verified: true,
+    helpful: 18,
+    variant: "سایز L، مشکی",
+  },
+  {
+    id: "3",
+    rating: 5,
+    title: "علاقه جدیدم!",
+    content:
+      "ماه‌ها دنبال چنین محصولی بودم. به جزئیات با دقت زیادی توجه شده؛ از دوخت تا یراق‌آلات همه‌چیز عالی است. ارزش هر ریالش را دارد.",
+    author: {
+      name: "نیلوفر حسینی",
+      avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    date: "۱۵ آذر ۱۴۰۳",
+    verified: true,
+    images: [
+      "/block-media/shadcnblocks/block/ecommerce/clothes/elegant-peach-scarf.png",
+    ],
+    helpful: 31,
+    variant: "یک سایز، کرم",
+  },
+  {
+    id: "4",
+    rating: 5,
+    title: "فراتر از انتظار",
+    content:
+      "اول برای خرید آنلاین مردد بودم، ولی خوشحالم که سفارش دادم. رنگ دقیقاً مثل عکس است و کیفیت عالی. وقتی درباره نگهداری سوال داشتم، پشتیبانی هم سریع پاسخ داد.",
+    author: {
+      name: "امیر محمدی",
+    },
+    date: "۱۲ آذر ۱۴۰۳",
+    verified: false,
+    helpful: 12,
+  },
+  {
+    id: "5",
+    rating: 4,
+    title: "زیبا ولی گران",
+    content:
+      "محصول زیبا و بادوام است. مدتی به‌خاطر قیمت مردد بودم، ولی در نهایت از خریدم راضی‌ام. دوست دارم در آینده گزینه‌های رنگی بیشتری هم اضافه شود.",
+    author: {
+      name: "رؤیا کاظمی",
+      avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    date: "۸ آذر ۱۴۰۳",
+    verified: true,
+    images: [
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Gold-Earrings-1.png",
+    ],
+    helpful: 8,
+    variant: "طلایی",
+  },
+];
+
+interface Reviews3Props {
+  reviews?: Review[];
+  title?: string;
+  className?: string;
+}
+
+const Reviews3 = ({
+  reviews = DEFAULT_REVIEWS,
+  title = "نظرات مشتریان",
+  className,
+}: Reviews3Props) => {
+  const [helpfulClicked, setHelpfulClicked] = useState<Set<string>>(new Set());
+
+  const totalReviews = reviews.length;
+  const averageRating =
+    reviews.reduce((sum, review) => sum + review.rating, 0) / totalReviews;
+
+  const formattedAverage = averageRating.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+  const handleHelpful = (reviewId: string) => {
+    setHelpfulClicked((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(reviewId)) {
+        newSet.delete(reviewId);
+      } else {
+        newSet.add(reviewId);
+      }
+      return newSet;
+    });
+  };
+
+  const getHelpfulCount = (review: Review) => {
+    const base = review.helpful ?? 0;
+    const total = base + (helpfulClicked.has(review.id) ? 1 : 0);
+    return total.toLocaleString("fa-IR");
+  };
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-3xl">
+        <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h2 className="text-xl font-semibold tracking-tight md:text-3xl">
+              {title}
+            </h2>
+            <div className="mt-2 flex items-center gap-2">
+              <Rating rate={averageRating} className="[&_svg]:size-5" />
+              <span className="text-lg font-semibold">{formattedAverage}</span>
+              <span className="text-sm text-muted-foreground">
+                ({totalReviews.toLocaleString("fa-IR")} نظر)
+              </span>
+            </div>
+          </div>
+          <Button variant="outline">ثبت نظر</Button>
+        </div>
+
+        <div className="space-y-0">
+          {reviews.map((review, index) => (
+            <div key={review.id}>
+              {index > 0 && <Separator className="my-6" />}
+              <Card className="border-0 p-0 shadow-none">
+                <CardContent className="space-y-4 p-0">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex items-center gap-3">
+                      <Avatar className="size-10">
+                        <AvatarImage
+                          src={review.author.avatar}
+                          alt={review.author.name}
+                        />
+                        <AvatarFallback>
+                          {review.author.name
+                            .split(/\s+/)
+                            .slice(0, 2)
+                            .map((part) => part[0])
+                            .join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium">
+                            {review.author.name}
+                          </span>
+                          {review.verified && (
+                            <span
+                              className="flex items-center gap-1 text-emerald-600"
+                              title="خرید تأییدشده"
+                            >
+                              <BadgeCheck className="size-4" />
+                              <span className="sr-only">خرید تأییدشده</span>
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                          <span>{review.date}</span>
+                          {review.variant && (
+                            <>
+                              <span>·</span>
+                              <span>{review.variant}</span>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <Rating
+                      rate={review.rating}
+                      className="[&_svg]:size-4 [&>div]:size-4"
+                    />
+                  </div>
+
+                  <div>
+                    <h3 className="font-medium">{review.title}</h3>
+                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                      {review.content}
+                    </p>
+                  </div>
+
+                  {review.images && review.images.length > 0 && (
+                    <div className="flex gap-2">
+                      {review.images.map((image, imgIndex) => (
+                        <div
+                          key={imgIndex}
+                          className="size-20 overflow-hidden rounded-lg sm:size-24"
+                        >
+                          <AspectRatio ratio={1}>
+                            <img
+                              src={image}
+                              alt={`تصویر نظر ${(imgIndex + 1).toLocaleString("fa-IR")}`}
+                              className="size-full object-cover"
+                            />
+                          </AspectRatio>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-4">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className={cn(
+                        "h-8 gap-1.5 text-muted-foreground",
+                        helpfulClicked.has(review.id) && "text-foreground",
+                      )}
+                      onClick={() => handleHelpful(review.id)}
+                    >
+                      <ThumbsUp
+                        className={cn(
+                          "size-4",
+                          helpfulClicked.has(review.id) && "fill-current",
+                        )}
+                      />
+                      مفید بود
+                      {review.helpful !== undefined && (
+                        <span>({getHelpfulCount(review)})</span>
+                      )}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 text-muted-foreground"
+                    >
+                      گزارش
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Reviews3 };
diff --git a/blocks/reviews4.tsx b/blocks/reviews4.tsx
new file mode 100644
index 0000000..34d6f0d
--- /dev/null
+++ b/blocks/reviews4.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import { Star } from "lucide-react";
+import { useState } from "react";
+
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+interface Review {
+  id: string;
+  rating: number;
+  content: string;
+  author: {
+    name: string;
+    avatar?: string;
+  };
+  date: string;
+}
+
+const DEFAULT_REVIEWS: Review[] = [
+  {
+    id: "1",
+    rating: 5,
+    content:
+      "واقعاً این محصول را دوست دارم! کیفیتش از انتظارم بهتر بود و زود به دستم رسید. حتماً دوباره می‌خرم.",
+    author: {
+      name: "سارا احمدی",
+      avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    date: "۲۰ آذر ۱۴۰۳",
+  },
+  {
+    id: "2",
+    rating: 5,
+    content:
+      "عالی! دقیقاً همان چیزی بود که دنبالش بودم. با این قیمت، ارزش خریدش بالاست.",
+    author: {
+      name: "مازیار رضایی",
+      avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    date: "۱۸ آذر ۱۴۰۳",
+  },
+  {
+    id: "3",
+    rating: 4,
+    content:
+      "به‌طور کلی کیفیت خوبی دارد. یک ستاره کم کردم چون ارسال کمی بیشتر از موعد طول کشید، ولی خود محصول عالی است.",
+    author: {
+      name: "نیلوفر حسینی",
+      avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    date: "۱۵ آذر ۱۴۰۳",
+  },
+  {
+    id: "4",
+    rating: 5,
+    content:
+      "برای سومین بار سفارش دادم. کیفیت همیشه ثابت است و وقتی سوال داشتم، پشتیبانی سریع جواب داد.",
+    author: {
+      name: "امیر محمدی",
+    },
+    date: "۱۲ آذر ۱۴۰۳",
+  },
+  {
+    id: "5",
+    rating: 4,
+    content:
+      "محصول خوبی است و همان‌طور که توضیح داده شده کار می‌کند. به دوستان و خانواده پیشنهاد می‌کنم.",
+    author: {
+      name: "رؤیا کاظمی",
+      avatar: "/block-media/shadcnblocks/block/avatar-7.webp",
+    },
+    date: "۸ آذر ۱۴۰۳",
+  },
+  {
+    id: "6",
+    rating: 5,
+    content:
+      "وای! به جزئیات با دقت زیادی توجه شده. معلوم است با وسواس ساخته شده.",
+    author: {
+      name: "کاوه مرادی",
+      avatar: "/block-media/shadcnblocks/block/avatar-4.webp",
+    },
+    date: "۵ آذر ۱۴۰۳",
+  },
+];
+
+interface Reviews4Props {
+  reviews?: Review[];
+  className?: string;
+}
+
+const Reviews4 = ({ reviews = DEFAULT_REVIEWS, className }: Reviews4Props) => {
+  const [selectedRating, setSelectedRating] = useState<number | null>(null);
+
+  const totalReviews = reviews.length;
+  const averageRating =
+    reviews.reduce((sum, review) => sum + review.rating, 0) / totalReviews;
+
+  const formattedAverage = averageRating.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+  const ratingCounts = [5, 4, 3, 2, 1].map((star) => ({
+    star,
+    count: reviews.filter((r) => r.rating === star).length,
+    percentage:
+      (reviews.filter((r) => r.rating === star).length / totalReviews) * 100,
+  }));
+
+  const filteredReviews = selectedRating
+    ? reviews.filter((r) => r.rating === selectedRating)
+    : reviews;
+
+  const selectedStarLabel =
+    selectedRating?.toLocaleString("fa-IR") ?? "";
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-4xl">
+        <div className="mb-8 rounded-xl border bg-muted/30 p-6 md:p-8">
+          <div className="flex flex-col gap-6 md:flex-row md:items-center md:gap-12">
+            <div className="text-center md:text-start">
+              <div className="text-2xll font-bold tracking-tight">
+                {formattedAverage}
+              </div>
+              <Rating
+                rate={averageRating}
+                className="mt-2 justify-center md:justify-start [&_svg]:size-5"
+              />
+              <p className="mt-2 text-sm text-muted-foreground">
+                {totalReviews.toLocaleString("fa-IR")} نظر
+              </p>
+            </div>
+
+            <div className="flex-1 space-y-2">
+              {ratingCounts.map(({ star, count, percentage }) => (
+                <button
+                  key={star}
+                  type="button"
+                  onClick={() =>
+                    setSelectedRating(selectedRating === star ? null : star)
+                  }
+                  className={cn(
+                    "flex w-full items-center gap-3 rounded-md px-2 py-1 transition-colors hover:bg-muted",
+                    selectedRating === star && "bg-muted",
+                  )}
+                  aria-pressed={selectedRating === star}
+                  aria-label={`فیلتر نظرات ${star.toLocaleString("fa-IR")} ستاره، ${count.toLocaleString("fa-IR")} مورد`}
+                >
+                  <div className="flex w-12 shrink-0 items-center gap-1 text-sm">
+                    <span>{star.toLocaleString("fa-IR")}</span>
+                    <Star className="size-3.5 fill-current" />
+                  </div>
+                  <Progress value={percentage} className="h-2 flex-1" />
+                  <span className="w-8 shrink-0 text-end text-sm text-muted-foreground">
+                    {count.toLocaleString("fa-IR")}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {selectedRating && (
+          <div className="mb-4 flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">
+              نمایش نظرات {selectedStarLabel} ستاره
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto p-1 text-xs"
+              onClick={() => setSelectedRating(null)}
+            >
+              حذف فیلتر
+            </Button>
+          </div>
+        )}
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          {filteredReviews.map((review) => (
+            <div
+              key={review.id}
+              className="rounded-lg border bg-card p-4 transition-shadow hover:shadow-sm"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex items-center gap-2.5">
+                  <Avatar className="size-8">
+                    <AvatarImage
+                      src={review.author.avatar}
+                      alt={review.author.name}
+                    />
+                    <AvatarFallback className="text-xs">
+                      {review.author.name
+                        .split(/\s+/)
+                        .slice(0, 2)
+                        .map((part) => part[0])
+                        .join("")}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className="text-sm font-medium">{review.author.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {review.date}
+                    </p>
+                  </div>
+                </div>
+                <Rating
+                  rate={review.rating}
+                  className="[&_svg]:size-3 [&>div]:size-3"
+                />
+              </div>
+              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                {review.content}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {filteredReviews.length === 0 && selectedRating && (
+          <p className="py-8 text-center text-muted-foreground">
+            هنوز نظری با {selectedStarLabel} ستاره ثبت نشده است.
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { Reviews4 };
diff --git a/blocks/reviews5.tsx b/blocks/reviews5.tsx
new file mode 100644
index 0000000..5bc4945
--- /dev/null
+++ b/blocks/reviews5.tsx
@@ -0,0 +1,308 @@
+"use client";
+
+import { BadgeCheck, ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Review {
+  id: string;
+  rating: number;
+  title: string;
+  content: string;
+  author: {
+    name: string;
+    avatar?: string;
+  };
+  date: string;
+  /** برای مرتب‌سازی جدیدترین؛ تاریخ نمایشی ممکن است شمسی باشد */
+  postedAt?: number;
+  verified?: boolean;
+  helpful?: number;
+}
+
+const DEFAULT_REVIEWS: Review[] = [
+  {
+    id: "1",
+    rating: 5,
+    title: "فراتر از انتظارم بود",
+    content:
+      "اول کمی تردید داشتم، ولی این محصول واقعاً جواب داد. کیفیت ساخت عالی است و زودتر از موعد به دستم رسید.",
+    author: {
+      name: "سارا احمدی",
+      avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    date: "۲۰ آذر ۱۴۰۳",
+    postedAt: 6,
+    verified: true,
+    helpful: 42,
+  },
+  {
+    id: "2",
+    rating: 5,
+    title: "بهترین خرید امسالم",
+    content:
+      "واقعاً عاشقش شدم! به جزئیات با دقت زیادی توجه شده. وقتی سوال داشتم، پشتیبانی هم بسیار مفید بود.",
+    author: {
+      name: "مازیار رضایی",
+      avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    date: "۱۸ آذر ۱۴۰۳",
+    postedAt: 5,
+    verified: true,
+    helpful: 38,
+  },
+  {
+    id: "3",
+    rating: 4,
+    title: "ارزش خرید بالا",
+    content:
+      "به‌طور کلی محصول خوبی است و دقیقاً همان کاری را می‌کند که باید. پیشنهاد می‌کنم.",
+    author: {
+      name: "نیلوفر حسینی",
+      avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    date: "۱۵ آذر ۱۴۰۳",
+    postedAt: 4,
+    verified: true,
+    helpful: 24,
+  },
+  {
+    id: "4",
+    rating: 5,
+    title: "عالی برای استفاده روزمره",
+    content:
+      "یک ماه است هر روز از آن استفاده می‌کنم و هنوز مثل روز اول به نظر می‌رسد و درست کار می‌کند. کیفیت ساخت قابل تحسین است.",
+    author: { name: "امیر محمدی" },
+    date: "۱۲ آذر ۱۴۰۳",
+    postedAt: 3,
+    verified: false,
+    helpful: 19,
+  },
+  {
+    id: "5",
+    rating: 4,
+    title: "خوب، ولی جای بهبود دارد",
+    content:
+      "محصول خوبی است. رنگ کمی با عکس‌ها فرق داشت، ولی در مجموع از خریدم راضی‌ام.",
+    author: {
+      name: "رؤیا کاظمی",
+      avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    date: "۸ آذر ۱۴۰۳",
+    postedAt: 2,
+    verified: true,
+    helpful: 12,
+  },
+  {
+    id: "6",
+    rating: 3,
+    title: "قابل قبول، ولی انتظار بیشتری داشتم",
+    content:
+      "با توجه به قیمت، محصول معمولی است؛ چیز خاصی نیست ولی کارش را انجام می‌دهد. ارسال سریع بود.",
+    author: { name: "پارسا موسوی" },
+    date: "۵ آذر ۱۴۰۳",
+    postedAt: 1,
+    verified: true,
+    helpful: 8,
+  },
+];
+
+type SortOption = "helpful" | "newest" | "highest" | "lowest";
+
+interface Reviews5Props {
+  reviews?: Review[];
+  title?: string;
+  className?: string;
+}
+
+const sortLabels: Record<SortOption, string> = {
+  helpful: "مفیدترین",
+  newest: "جدیدترین",
+  highest: "بیشترین امتیاز",
+  lowest: "کمترین امتیاز",
+};
+
+const Reviews5 = ({
+  reviews = DEFAULT_REVIEWS,
+  title = "نظرات مشتریان",
+  className,
+}: Reviews5Props) => {
+  const [sortBy, setSortBy] = useState<SortOption>("helpful");
+
+  const totalReviews = reviews.length;
+  const averageRating =
+    reviews.reduce((sum, r) => sum + r.rating, 0) / totalReviews;
+
+  const formattedAverage = averageRating.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+  const ratingCounts = [5, 4, 3, 2, 1].map((star) => ({
+    star,
+    count: reviews.filter((r) => r.rating === star).length,
+    percentage:
+      (reviews.filter((r) => r.rating === star).length / totalReviews) * 100,
+  }));
+
+  const sortedReviews = [...reviews].sort((a, b) => {
+    switch (sortBy) {
+      case "helpful":
+        return (b.helpful || 0) - (a.helpful || 0);
+      case "newest":
+        return (b.postedAt ?? 0) - (a.postedAt ?? 0);
+      case "highest":
+        return b.rating - a.rating;
+      case "lowest":
+        return a.rating - b.rating;
+      default:
+        return 0;
+    }
+  });
+
+  const formatHelpfulCount = (count: number) =>
+    `${count.toLocaleString("fa-IR")} نفر این نظر را مفید دانستند`;
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-16 md:py-24", className)}
+    >
+      <div className="container max-w-3xl">
+        <div className="mb-6 flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+            <div className="mt-2 flex items-center gap-3">
+              <div className="flex items-baseline gap-1">
+                <span className="text-3xl font-bold">{formattedAverage}</span>
+                <span className="text-sm text-muted-foreground">از ۵</span>
+              </div>
+              <Rating rate={averageRating} className="[&_svg]:size-4" />
+              <span className="text-sm text-muted-foreground">
+                ({totalReviews.toLocaleString("fa-IR")})
+              </span>
+            </div>
+          </div>
+
+          <div className="flex gap-2 sm:w-48">
+            <div className="flex flex-col gap-1.5 text-xs text-muted-foreground">
+              {[5, 4, 3, 2, 1].map((n) => (
+                <span key={n} className="h-2 leading-none">
+                  {n.toLocaleString("fa-IR")}
+                </span>
+              ))}
+            </div>
+            <div className="flex flex-1 flex-col gap-1.5">
+              {ratingCounts.map(({ star, percentage }) => (
+                <Progress key={star} value={percentage} className="h-2" />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <Separator className="mb-4" />
+
+        <div className="mb-4 flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">
+            {totalReviews.toLocaleString("fa-IR")} نظر
+          </span>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="gap-1">
+                مرتب‌سازی: {sortLabels[sortBy]}
+                <ChevronDown className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {(Object.keys(sortLabels) as SortOption[]).map((option) => (
+                <DropdownMenuItem
+                  key={option}
+                  onClick={() => setSortBy(option)}
+                  className={cn(sortBy === option && "font-medium")}
+                >
+                  {sortLabels[option]}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div className="space-y-0">
+          {sortedReviews.map((review, index) => (
+            <div key={review.id}>
+              {index > 0 && <Separator className="my-4" />}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-2">
+                    <Avatar className="size-7">
+                      <AvatarImage
+                        src={review.author.avatar}
+                        alt={review.author.name}
+                      />
+                      <AvatarFallback className="text-xs">
+                        {review.author.name
+                          .split(/\s+/)
+                          .slice(0, 2)
+                          .map((part) => part[0])
+                          .join("")}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="text-sm font-medium">
+                      {review.author.name}
+                    </span>
+                    {review.verified && (
+                      <BadgeCheck
+                        className="size-4 text-emerald-600"
+                        aria-label="خرید تأییدشده"
+                      />
+                    )}
+                  </div>
+                  <span className="text-xs text-muted-foreground">
+                    {review.date}
+                  </span>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Rating
+                    rate={review.rating}
+                    className="[&_svg]:size-3.5 [&>div]:size-3.5"
+                  />
+                  <span className="font-medium">{review.title}</span>
+                </div>
+
+                <p className="text-sm text-muted-foreground">
+                  {review.content}
+                </p>
+
+                {review.helpful !== undefined && review.helpful > 0 && (
+                  <p className="text-xs text-muted-foreground">
+                    {formatHelpfulCount(review.helpful)}
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-6 text-center">
+          <Button variant="outline">نمایش نظرات بیشتر</Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Reviews5 };
diff --git a/blocks/reviews6.tsx b/blocks/reviews6.tsx
new file mode 100644
index 0000000..cc457e2
--- /dev/null
+++ b/blocks/reviews6.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import {
+  Price,
+  type PriceType,
+  PriceValue,
+} from "@/components/shadcnblocks/price";
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Card, CardContent, CardDescription } from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type Product = {
+  name: string;
+  image: string;
+  price: PriceType;
+  link: string;
+};
+
+type ReviewType = {
+  image: string;
+  rate: number;
+  comment: string;
+  author: string;
+  product: Product;
+};
+
+interface Reviews6Props {
+  title?: string;
+  overline?: string;
+  reviews?: ReviewType[];
+  className?: string;
+}
+
+type ReviewCardProps = ReviewType;
+type ProductCardProps = Product;
+
+const REVIEWS: ReviewType[] = [
+  {
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Serene-Listening-2.png",
+    rate: 5,
+    comment:
+      "«این هدفون روتین روزمره‌ام را عوض کرد. صدا غنی است، آهنگ کامل است و حذف نویز چشمگیر است. واقعاً از استفاده روزانه لذت می‌برم.»",
+    author: "امیر رضایی",
+    product: {
+      name: "هدفون بی‌سیم آئروتون",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+      price: {
+        regular: 566000,
+        currency: "ریال",
+      },
+      link: "#",
+    },
+  },
+  {
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Woman-Smiling-Indoors-2.png",
+    rate: 5,
+    comment:
+      "«این گوشی واقعاً یک ارتقا حس می‌شود. دوربین واضح است، صفحه‌نمایش زیباست و عملکرد بی‌نقص است. هر روز از کار با آن لذت می‌برم.»",
+    author: "سوفیا لطفی",
+    product: {
+      name: "گوشی هوشمند لومااج پرو",
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/Sleek-Smartphone-Close-Up-1.png",
+      price: {
+        regular: 1566000,
+        currency: "ریال",
+      },
+      link: "#",
+    },
+  },
+];
+
+const Reviews6 = ({
+  reviews = REVIEWS,
+  title = "بیش از ۱۰٬۰۰۰ مشتری راضی",
+  overline = "نظر مشتریان ما",
+  className,
+}: Reviews6Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+  const onButtonClick = (index: number) => {
+    if (!api) return;
+    api.scrollTo(index);
+  };
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = (carouselApi: CarouselApi) => {
+      setCurrent(carouselApi?.selectedScrollSnap() ?? 0);
+    };
+
+    const updateScrollSnaps = (carouselApi: CarouselApi) => {
+      setScrollSnaps(carouselApi?.scrollSnapList() ?? []);
+    };
+
+    updateCurrent(api);
+    updateScrollSnaps(api);
+
+    api
+      .on("reInit", updateCurrent)
+      .on("select", updateCurrent)
+      .on("resize", updateScrollSnaps);
+
+    return () => {
+      api
+        .off("reInit", updateCurrent)
+        .off("select", updateCurrent)
+        .off("resize", updateScrollSnaps);
+    };
+  }, [api]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-primary py-32", className)}
+    >
+      <div className="container space-y-7 lg:space-y-10">
+        <div className="space-y-3 text-center">
+          {overline && (
+            <p className="leading-normal text-primary-foreground">{overline}</p>
+          )}
+          <h2 className="text-xl font-bold text-primary-foreground lg:text-2xll">
+            {title}
+          </h2>
+        </div>
+        <div className="space-y-5">
+          <Carousel setApi={setApi} className="group" opts={{ direction: "rtl" }}>
+            <CarouselContent>
+              {reviews.map((review, index) => (
+                <CarouselItem key={index}>
+                  <ReviewCard {...review} />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <div className="opacity-0 transition-opacity group-hover:opacity-100">
+              <CarouselPrevious className="start-5" />
+              <CarouselNext className="end-5" />
+            </div>
+          </Carousel>
+          <div className="flex items-center justify-center gap-2">
+            {scrollSnaps.map((_, index) => (
+              <button
+                type="button"
+                data-state={current === index ? "active" : "inactive"}
+                className="group flex size-5"
+                key={index}
+                aria-label={`رفتن به نظر ${(index + 1).toLocaleString("fa-IR")}`}
+                aria-current={current === index ? "true" : undefined}
+                onClick={() => onButtonClick(index)}
+              >
+                <span className="m-auto block size-2 rounded-full bg-primary-foreground/50 group-data-[state=active]:bg-primary-foreground" />
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ReviewCard = ({
+  image,
+  product,
+  rate,
+  comment,
+  author,
+}: ReviewCardProps) => {
+  return (
+    <Card className="h-full max-h-fit min-h-132.5 overflow-hidden border-none p-0">
+      <CardContent className="h-full p-0 lg:grid lg:grid-cols-2">
+        <div className="relative max-md:flex max-md:flex-col">
+          <div className="relative size-full overflow-hidden max-lg:aspect-[1.4]">
+            <div className="absolute inset-0">
+              <img
+                src={image}
+                alt={`تصویر نظر ${author} درباره ${product.name}`}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+          </div>
+          <div className="md:absolute md:bottom-4 md:start-4">
+            <ProductCard {...product} />
+          </div>
+        </div>
+        <div className="flex p-8 lg:px-20 lg:py-12">
+          <div className="m-auto w-full space-y-4">
+            <div className="w-fit max-lg:mx-auto">
+              <Rating
+                rate={rate}
+                className="[&>svg]:fill-yellow-500 [&>svg]:stroke-yellow-500"
+              />
+            </div>
+            <CardDescription className="text-xl leading-normal text-foreground max-lg:text-center lg:text-xl">
+              {comment}
+            </CardDescription>
+            <p className="text-sm font-semibold max-lg:text-center">
+               {author}
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const ProductCard = ({ image, name, price }: ProductCardProps) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <div className="min-h-31 border bg-background p-2 ps-8 md:max-w-100 md:rounded-xl md:shadow-xl">
+      <div className="flex items-center gap-4">
+        <div className="shrink-0 basis-28">
+          <div className="size-28 overflow-hidden rounded-lg">
+            <img
+              src={image}
+              alt={name}
+              className="block size-full object-cover object-center"
+            />
+          </div>
+        </div>
+        <div className="space-y-1">
+          <h3 className="text-base">{name}</h3>
+          <Price className="text-sm font-semibold" onSale={!!sale}>
+            <PriceValue variant="sale" price={sale} currency={currency} />
+            <PriceValue variant="regular" price={regular} currency={currency} />
+          </Price>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { Reviews6 };
diff --git a/blocks/reviews8.tsx b/blocks/reviews8.tsx
new file mode 100644
index 0000000..a28337e
--- /dev/null
+++ b/blocks/reviews8.tsx
@@ -0,0 +1,292 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Rating } from "@/components/shadcnblocks/rating";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type ReviewType = {
+  rate: number;
+  title: string;
+  comment?: string;
+  verifiedBuyer?: boolean;
+  author: string;
+  image?: string;
+  type?: "text" | "image";
+};
+
+interface Reviews8Props {
+  reviews?: ReviewType[];
+  title?: string;
+  className?: string;
+}
+
+type ReviewCardProps = ReviewType;
+
+const customerRoleLabel = (verified?: boolean) =>
+  verified ? "خریدار تأییدشده" : "مشتری";
+
+const REVIEWS: ReviewType[] = [
+  {
+    rate: 4,
+    title: "طراحی آگاهانه که حس می‌شود",
+    comment:
+      "هر قطعه ظرافت آرامی دارد. معلوم است برای ساخت و جزئیات وقت گذاشته‌اند. ظریف، کاربردی و با کیفیت ساخت عالی.",
+    author: "لوکا مرادی",
+    verifiedBuyer: false,
+    type: "text",
+  },
+  {
+    rate: 5,
+    title: "مینیمال، ولی پر از شخصیت",
+    author: "ژوان احمدی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+    type: "image",
+  },
+  {
+    rate: 4,
+    title: "تعادل کامل میان سبک و کارایی",
+    comment:
+      "دوست دارم همه‌چیز عمدی به نظر برسد؛ نه اضافه، نه کم. این آیتم‌ها بدون شلوغ کردن فضا، به خانه‌ام شخصیت می‌دهند.",
+    author: "لوکا مرادی",
+    verifiedBuyer: false,
+    type: "text",
+  },
+  {
+    rate: 5,
+    title: "جاودانه و عکاسی زیبا",
+    author: "ژوان احمدی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Jewelry-Portrait-1.png",
+    type: "image",
+  },
+  {
+    rate: 4,
+    title: "روزمره را ارتقا می‌دهد",
+    comment:
+      "کم پیش می‌آید دکوری پیدا کنید که هم هنری باشد هم کاربردی. این محصولات هم در زندگی روزمره جا می‌گیرند و هم توجه را جلب می‌کنند.",
+    author: "لوکا مرادی",
+    verifiedBuyer: false,
+    type: "text",
+  },
+  {
+    rate: 5,
+    title: "ظریف، مدرن و خیره‌کننده",
+    author: "ژوان احمدی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Gold-Earrings-1.png",
+    type: "image",
+  },
+  {
+    rate: 4,
+    title: "با نیت واقعی ساخته شده",
+    comment:
+      "هیچ‌چیز حس تولید انبوه نمی‌دهد. بافت، وزن و پرداخت کار  همه گرم و منحصربه‌فردند؛ چیزی که کمتر جایی می‌بینید.",
+    author: "لوکا مرادی",
+    verifiedBuyer: false,
+    type: "text",
+  },
+  {
+    rate: 5,
+    title: "زیبایی بدون تلاش",
+    author: "ژوان احمدی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Watch-on-Womans-Wrist-1.png",
+    type: "image",
+  },
+];
+
+const Reviews8 = ({
+  reviews = REVIEWS,
+  title = "صداهای واقعی، نظرات صادقانه",
+  className,
+}: Reviews8Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+  const [current, setCurrent] = useState(0);
+
+  const onButtonClick = (index: number) => {
+    if (!api) return;
+    api.scrollTo(index);
+  };
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = (carouselApi: CarouselApi) => {
+      setCurrent(carouselApi?.selectedScrollSnap() ?? 0);
+    };
+
+    const updateScrollSnaps = (carouselApi: CarouselApi) => {
+      setScrollSnaps(carouselApi?.scrollSnapList() ?? []);
+    };
+
+    updateCurrent(api);
+    updateScrollSnaps(api);
+
+    api
+      .on("reInit", updateCurrent)
+      .on("select", updateCurrent)
+      .on("resize", updateScrollSnaps);
+
+    return () => {
+      api
+        .off("reInit", updateCurrent)
+        .off("select", updateCurrent)
+        .off("resize", updateScrollSnaps);
+    };
+  }, [api]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container space-y-7.5">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
+              {title}
+            </h2>
+          </div>
+          <div className="flex gap-3 max-md:hidden">
+            <Button
+              onClick={() => api?.scrollPrev()}
+              variant="outline"
+              className="rounded-full"
+              size="icon-lg"
+              aria-label="اسلاید قبلی"
+            >
+              <ChevronRight />
+            </Button>
+            <Button
+              onClick={() => api?.scrollNext()}
+              variant="outline"
+              className="rounded-full"
+              size="icon-lg"
+              aria-label="اسلاید بعدی"
+            >
+              <ChevronLeft />
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-8">
+          <Carousel
+            opts={{
+              align: "start",
+              direction: "rtl",
+            }}
+            setApi={setApi}
+            className="[&>div]:overflow-visible"
+          >
+            <CarouselContent>
+              {reviews.map(({ type, ...review }, index) => (
+                <CarouselItem
+                  className="sm:basis-1/2 lg:basis-1/4 xl:basis-1/6"
+                  key={index}
+                >
+                  {type === "image" ? (
+                    <ImageReviewCard {...review} />
+                  ) : (
+                    <TextReviewCard {...review} />
+                  )}
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="flex items-center justify-center gap-4 md:hidden">
+            {scrollSnaps.map((_, index) => (
+              <button
+                type="button"
+                data-state={current === index ? "active" : "inactive"}
+                className="h-2.5 w-2.5 rounded-full border transition-all data-[state=active]:w-5 data-[state=active]:border-primary"
+                key={index}
+                aria-label={`رفتن به اسلاید ${(index + 1).toLocaleString("fa-IR")}`}
+                aria-current={current === index ? "true" : undefined}
+                onClick={() => onButtonClick(index)}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const TextReviewCard = ({
+  rate,
+  title,
+  comment,
+  author,
+  verifiedBuyer,
+}: ReviewCardProps) => {
+  return (
+    <Card className="h-full rounded-lg border-primary p-5">
+      <CardContent className="space-y-5 p-0">
+        <Rating className="[&_svg]:size-3 [&>div]:size-3" rate={rate} />
+        <CardTitle className="leading-tight">{title}</CardTitle>
+        {comment && (
+          <CardDescription className="leading-relaxed text-foreground">
+            {comment}
+          </CardDescription>
+        )}
+        <div>
+          <p className="text-xs">{author}</p>
+          <p className="text-xs text-muted-foreground">
+            {customerRoleLabel(verifiedBuyer)}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const ImageReviewCard = ({
+  image,
+  title,
+  rate,
+  author,
+  verifiedBuyer,
+}: ReviewCardProps) => {
+  return (
+    <Card className="h-full border-0 bg-background p-0 shadow-none">
+      <CardContent className="space-y-5 p-0">
+        <AspectRatio ratio={1} className="overflow-hidden rounded-lg">
+          <img
+            src={image}
+            alt={`تصویر نظر: ${title}`}
+            className="block size-full object-cover object-center"
+          />
+        </AspectRatio>
+        <Rating className="[&_svg]:size-3 [&>div]:size-3" rate={rate} />
+        <CardTitle className="leading-tight">{title}</CardTitle>
+        <div>
+          <p className="text-xs">{author}</p>
+          <p className="text-xs text-muted-foreground">
+            {customerRoleLabel(verifiedBuyer)}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { Reviews8 };
diff --git a/blocks/reviews9.tsx b/blocks/reviews9.tsx
new file mode 100644
index 0000000..672332a
--- /dev/null
+++ b/blocks/reviews9.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { Minus } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Rating } from "@/components/shadcnblocks/rating";
+import { Card, CardContent } from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+type ReviewType = {
+  rate: number;
+  comment: string;
+  author: string;
+  date: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+};
+
+interface Reviews9Props {
+  reviews?: ReviewType[];
+  title?: string;
+  className?: string;
+}
+
+type ReviewCardProps = ReviewType;
+
+const REVIEWS: ReviewType[] = [
+  {
+    rate: 5,
+    comment:
+      "این آباژور مجسمه‌ای به فضا گرما و ظرافت می‌بخشد و در عین هنری بودن، کاربردی است.",
+    author: "آوا تهرانی",
+    date: "۲۰ آذر ۱۴۰۳",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Artistic-Lamp-1.png",
+      alt: "آباژور هنری مدرن در فضای داخلی",
+    },
+  },
+  {
+    rate: 5,
+    comment:
+      "مبل مینیمال لوکس است، راحت و دقیقاً همان چیزی که برای استراحت می‌خواستم.",
+    author: "آوا تهرانی",
+    date: "۱۸ آذر ۱۴۰۳",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Minimalist-Sofa-1.png",
+      alt: "مبل مینیمال مدرن",
+    },
+  },
+  {
+    rate: 5,
+    comment:
+      "کابینت چوبی زیبا فضای من را گرم‌تر و کاربردی‌تر کرده؛ کیفیت ساخت عالی است.",
+    author: "آوا تهرانی",
+    date: "۱۵ آذر ۱۴۰۳",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/Modern-Wooden-Cabinet-1.png",
+      alt: "کابینت چوبی مدرن",
+    },
+  },
+  {
+    rate: 5,
+    comment:
+      "این مجسمه مدرن با حضور هنری ظریف، دکور داخلی را یک پله ارتقا داده است.",
+    author: "آوا تهرانی",
+    date: "۱۲ آذر ۱۴۰۳",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Interior-with-Sculptural-Element-1.png",
+      alt: "مجسمه در فضای داخلی مینیمال",
+    },
+  },
+  {
+    rate: 5,
+    comment:
+      "میز پذیرایی مینیمال هماهنگ با فضاست و در عین سادگی، ظاهری چشمگیر دارد.",
+    author: "آوا تهرانی",
+    date: "۸ آذر ۱۴۰۳",
+    image: {
+      src: "/block-media/shadcnblocks/block/ecommerce/furniture/Minimalist-Wooden-Sideboard-1.png",
+      alt: "میز پذیرایی چوبی مینیمال",
+    },
+  },
+];
+
+const Reviews9 = ({
+  reviews = REVIEWS,
+  title = "نظرات مشتریان",
+  className,
+}: Reviews9Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+  const onButtonClick = (index: number) => {
+    if (!api) return;
+    api.scrollTo(index);
+  };
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateCurrent = (carouselApi: CarouselApi) => {
+      setCurrent(carouselApi?.selectedScrollSnap() ?? 0);
+    };
+
+    const updateScrollSnaps = (carouselApi: CarouselApi) => {
+      setScrollSnaps(carouselApi?.scrollSnapList() ?? []);
+    };
+
+    updateCurrent(api);
+    updateScrollSnaps(api);
+
+    api
+      .on("reInit", updateCurrent)
+      .on("select", updateCurrent)
+      .on("resize", updateScrollSnaps);
+
+    return () => {
+      api
+        .off("reInit", updateCurrent)
+        .off("select", updateCurrent)
+        .off("resize", updateScrollSnaps);
+    };
+  }, [api]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("py-32", className)}
+    >
+      <div className="container space-y-10">
+        <h2 className="text-xl font-medium tracking-tighter xl:text-2xll">
+          {title}
+        </h2>
+        <Carousel setApi={setApi} opts={{ direction: "rtl", align: "start" }}>
+          <CarouselContent>
+            {reviews.map((review, index) => (
+              <CarouselItem className="sm:basis-1/2 lg:basis-1/3" key={index}>
+                <ReviewCard {...review} />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="max-xl:hidden">
+            <CarouselNext
+              className="end-0 size-16 translate-x-1/2 bg-background/40 backdrop-blur-lg [&>svg]:!size-6"
+              aria-label="اسلاید بعدی"
+            />
+            <CarouselPrevious
+              className="start-0 size-16 -translate-x-1/2 bg-background/40 backdrop-blur-lg [&>svg]:!size-6"
+              aria-label="اسلاید قبلی"
+            />
+          </div>
+        </Carousel>
+        <div className="-mt-5 flex items-center justify-center xl:hidden">
+          {scrollSnaps.map((_, index) => (
+            <button
+              type="button"
+              data-state={current === index ? "active" : "inactive"}
+              className="group flex size-4"
+              key={index}
+              aria-label={`رفتن به اسلاید ${(index + 1).toLocaleString("fa-IR")}`}
+              aria-current={current === index ? "true" : undefined}
+              onClick={() => onButtonClick(index)}
+            >
+              <span className="m-auto block size-2 rounded-full bg-primary/20 group-data-[state=active]:bg-primary" />
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ReviewCard = ({
+  rate,
+  comment,
+  author,
+  date,
+  image,
+}: ReviewCardProps) => {
+  const formattedRate = rate.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+  return (
+    <Card className="h-full overflow-hidden bg-primary/5 p-0">
+      <CardContent className="flex h-full p-0 max-xl:flex-col-reverse">
+        <div className="flex-1 space-y-6 p-8">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 max-xl:justify-center">
+              <Rating className="[&_svg]:size-4 [&>div]:size-4" rate={rate} />
+              <p className="font-bold">{formattedRate}</p>
+            </div>
+            <p className="text-lg font-medium max-xl:text-center">{comment}</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2 max-xl:justify-center">
+            <p className="text-sm font-medium text-muted-foreground">
+              {author}
+            </p>
+            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+              <Minus className="size-3.5" aria-hidden />
+              <p>{date}</p>
+            </div>
+          </div>
+        </div>
+        <div className="h-full shrink-0 basis-37.5">
+          <div className="h-full overflow-hidden rounded-xl max-xl:aspect-[0.8]">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="block size-full object-cover object-center"
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { Reviews9 };
diff --git a/blocks/service1.tsx b/blocks/service1.tsx
new file mode 100644
index 0000000..7901737
--- /dev/null
+++ b/blocks/service1.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+interface Service1Props {
+  className?: string;
+}
+
+const Service1 = ({ className }: Service1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
+      {/* Full Width Hero */}
+      <div className="bg-muted py-32">
+        <div className="container text-center">
+          <h1 className="text-xl font-bold tracking-tight md:text-2xll lg:text-2xll">
+            طراحی تجربه و رابط کاربری
+          </h1>
+        </div>
+      </div>
+
+      {/* Intro Section */}
+      <div className="py-16">
+        <div className="container">
+          <div className="mx-auto max-w-3xl space-y-8 text-start">
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
+              طراحی کاربرمحور با تمرکز بر تبدیل
+            </h2>
+            <p className="text-xl leading-relaxed text-muted-foreground">
+              ما معتقدیم طراحی خوب باید برای هر کاربری که با محصول شما تعامل
+              دارد، شهودی، دسترس‌پذیر و هدفمند باشد. رویکرد طراحی تجربه و رابط کاربری ما بر
+              درک نیازها، رفتارها و نقاط درد کاربران تمرکز دارد تا رابط‌هایی
+              بسازیم که نه‌تنها زیبا به نظر برسند، بلکه بی‌نقص کار کنند.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Content Section */}
+      <div className="py-16">
+        <div className="container">
+          <div className="mx-auto prose prose-sm max-w-3xl dark:prose-invert">
+            <h2>خلق تجربه‌های دیجیتال معنادار</h2>
+            <p>
+              ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب می‌کنیم تا
+              تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش می‌دهند.
+            </p>
+
+            <p>
+              از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با داده‌های
+              واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما تضمین می‌کند هر
+              عنصر هدفی دارد و هم به اهداف کسب‌وکار شما کمک می‌کند و هم تجربه
+              کاربری استثنایی ارائه می‌دهد.
+            </p>
+
+            <p>
+              ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
+              مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در عین
+              حال انعطاف لازم برای رشد و تحول آینده را دارند.
+            </p>
+
+            <p>
+              رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
+              وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
+              هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین می‌کند و
+              محصولاتی می‌سازد که در بازار موفق می‌شوند.
+            </p>
+
+            <p>
+              هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که نه‌تنها
+              از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و از سوی
+              کاربران تأیید شده‌اند.
+            </p>
+
+            <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
+            <ul>
+              <li>تحقیق کاربر و توسعه پرسونا</li>
+              <li>معماری اطلاعات و نقشه‌برداری سفر کاربر</li>
+              <li>وایرفریم و نمونه‌سازی تعاملی</li>
+              <li>طراحی بصری و یکپارچه‌سازی برند</li>
+              <li>آزمایش کاربردپذیری و اعتبارسنجی طراحی</li>
+              <li>ایجاد و مستندسازی سیستم طراحی</li>
+            </ul>
+
+            <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
+            <p>
+              فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین نیازهای
+              کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم طراحی تجربه و رابط کاربری
+              عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به خلق تعامل‌های
+              معناداری مربوط است که نتیجه می‌دهند.
+            </p>
+
+            <p>
+              از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر طراحی
+              به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند شما را منعکس
+              و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های ما برای عملکرد،
+              دسترس‌پذیری و مقیاس‌پذیری در تمام دستگاه‌ها و پلتفرم‌ها بهینه
+              شده‌اند.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Service1 };
diff --git a/blocks/service2.tsx b/blocks/service2.tsx
new file mode 100644
index 0000000..1f778cb
--- /dev/null
+++ b/blocks/service2.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+interface Service2Props {
+  className?: string;
+}
+
+const Service2 = ({ className }: Service2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
+      {/* Full Width Hero with Background Image */}
+      <div
+        className="relative flex min-h-[500px] items-center justify-center bg-cover bg-center bg-no-repeat py-32"
+        style={{
+          backgroundImage:
+            "url('/block-media/shadcnblocks/block/photos/christopher-gower-vjMgqUkS8q8-unsplash.jpg')",
+        }}
+      >
+        {/* Dark overlay for better text readability */}
+        <div className="absolute inset-0 bg-black/50"></div>
+
+        <div className="relative z-10 container text-center">
+          <h1 className="text-xl font-medium tracking-tight text-white md:text-2xll lg:text-2xll">
+            طراحی تجربه و رابط کاربری
+          </h1>
+        </div>
+      </div>
+
+      {/* Intro Section */}
+      <div className="py-16">
+        <div className="container">
+          <div className="mx-auto max-w-3xl space-y-8 text-start">
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
+              طراحی کاربرمحور با تمرکز بر تبدیل
+            </h2>
+            <p className="text-xl leading-relaxed text-muted-foreground">
+              ما معتقدیم طراحی خوب باید برای هر کاربری که با محصول شما تعامل
+              دارد، شهودی، دسترس‌پذیر و هدفمند باشد. رویکرد طراحی تجربه و رابط کاربری ما بر
+              درک نیازها، رفتارها و نقاط درد کاربران تمرکز دارد تا رابط‌هایی
+              بسازیم که نه‌تنها زیبا به نظر برسند، بلکه بی‌نقص کار کنند.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Content Section */}
+      <div className="py-16">
+        <div className="container">
+          <div className="mx-auto prose prose-sm max-w-3xl dark:prose-invert">
+            <h2>خلق تجربه‌های دیجیتال معنادار</h2>
+            <p>
+              ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب می‌کنیم تا
+              تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش می‌دهند.
+            </p>
+
+            <p>
+              از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با داده‌های
+              واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما تضمین می‌کند هر
+              عنصر هدفی دارد و هم به اهداف کسب‌وکار شما کمک می‌کند و هم تجربه
+              کاربری استثنایی ارائه می‌دهد.
+            </p>
+
+            <p>
+              ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
+              مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در عین
+              حال انعطاف لازم برای رشد و تحول آینده را دارند.
+            </p>
+
+            <p>
+              رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
+              وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
+              هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین می‌کند و
+              محصولاتی می‌سازد که در بازار موفق می‌شوند.
+            </p>
+
+            <p>
+              هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که نه‌تنها
+              از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و از سوی
+              کاربران تأیید شده‌اند.
+            </p>
+
+            <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
+            <ul>
+              <li>تحقیق کاربر و توسعه پرسونا</li>
+              <li>معماری اطلاعات و نقشه‌برداری سفر کاربر</li>
+              <li>وایرفریم و نمونه‌سازی تعاملی</li>
+              <li>طراحی بصری و یکپارچه‌سازی برند</li>
+              <li>آزمایش کاربردپذیری و اعتبارسنجی طراحی</li>
+              <li>ایجاد و مستندسازی سیستم طراحی</li>
+            </ul>
+
+            <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
+            <p>
+              فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین نیازهای
+              کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم طراحی تجربه و رابط کاربری
+              عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به خلق تعامل‌های
+              معناداری مربوط است که نتیجه می‌دهند.
+            </p>
+
+            <p>
+              از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر طراحی
+              به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند شما را منعکس
+              و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های ما برای عملکرد،
+              دسترس‌پذیری و مقیاس‌پذیری در تمام دستگاه‌ها و پلتفرم‌ها بهینه
+              شده‌اند.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Service2 };
diff --git a/blocks/service3.tsx b/blocks/service3.tsx
new file mode 100644
index 0000000..9e8eee1
--- /dev/null
+++ b/blocks/service3.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+interface Service3Props {
+  className?: string;
+}
+
+const Service3 = ({ className }: Service3Props) => {
+  const stats = [
+    {
+      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
+      title: "مجموعه طراحی حرفه‌ای",
+      value: "۱۰۰٪",
+      description: "تسلط طراحی",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      value: "۵+",
+      description: "سال تجربه",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+      title: "Sketch",
+      value: "۲۰۰+",
+      description: "پروژه تکمیل‌شده",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
+      {/* Full Width Hero with Background Image */}
+      <div
+        className="relative flex min-h-[500px] items-center justify-center bg-cover bg-center bg-no-repeat py-32"
+        style={{
+          backgroundImage:
+            "url('/block-media/shadcnblocks/block/photos/christopher-gower-vjMgqUkS8q8-unsplash.jpg')",
+        }}
+      >
+        {/* Dark overlay for better text readability */}
+        <div className="absolute inset-0 bg-black/50"></div>
+
+        <div className="relative z-10 container text-center">
+          <div className="mx-auto flex flex-col items-center space-y-6">
+            <img
+              src="/block-media/shadcnblocks/block/symbols/ux-white.svg"
+              alt="طراحی تجربه و رابط کاربری"
+              className="w-24"
+            />
+            <h1 className="text-xl font-medium tracking-tight text-white md:text-2xll lg:text-2xll">
+              طراحی تجربه و رابط کاربری
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      {/* Stats & Technical Section */}
+      <div className="bg-muted py-16">
+        <div className="container">
+          <div className="mx-auto max-w-3xl">
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+              {stats.map((stat, index) => (
+                <div
+                  key={index}
+                  className="rounded-lg border bg-background p-6 text-center"
+                >
+                  <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center">
+                    <img
+                      src={stat.icon}
+                      alt={stat.title}
+                      className="h-8 w-8 object-contain"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <div className="text-xl font-bold">{stat.value}</div>
+                    <div className="text-sm font-medium">{stat.title}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {stat.description}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Content Section */}
+      <div className="py-16">
+        <div className="container">
+          <div className="mx-auto prose prose-sm max-w-3xl dark:prose-invert">
+            <h2>خلق تجربه‌های دیجیتال معنادار</h2>
+            <p>
+              ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب می‌کنیم تا
+              تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش می‌دهند.
+            </p>
+
+            <p>
+              از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با داده‌های
+              واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما تضمین می‌کند هر
+              عنصر هدفی دارد و هم به اهداف کسب‌وکار شما کمک می‌کند و هم تجربه
+              کاربری استثنایی ارائه می‌دهد.
+            </p>
+
+            <p>
+              ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
+              مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در عین
+              حال انعطاف لازم برای رشد و تحول آینده را دارند.
+            </p>
+
+            <p>
+              رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
+              وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
+              هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین می‌کند و
+              محصولاتی می‌سازد که در بازار موفق می‌شوند.
+            </p>
+
+            <p>
+              هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که نه‌تنها
+              از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و از سوی
+              کاربران تأیید شده‌اند.
+            </p>
+
+            <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
+            <ul>
+              <li>تحقیق کاربر و توسعه پرسونا</li>
+              <li>معماری اطلاعات و نقشه‌برداری سفر کاربر</li>
+              <li>وایرفریم و نمونه‌سازی تعاملی</li>
+              <li>طراحی بصری و یکپارچه‌سازی برند</li>
+              <li>آزمایش کاربردپذیری و اعتبارسنجی طراحی</li>
+              <li>ایجاد و مستندسازی سیستم طراحی</li>
+            </ul>
+
+            <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
+            <p>
+              فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین نیازهای
+              کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم طراحی تجربه و رابط کاربری
+              عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به خلق تعامل‌های
+              معناداری مربوط است که نتیجه می‌دهند.
+            </p>
+
+            <p>
+              از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر طراحی
+              به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند شما را منعکس
+              و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های ما برای عملکرد،
+              دسترس‌پذیری و مقیاس‌پذیری در تمام دستگاه‌ها و پلتفرم‌ها بهینه
+              شده‌اند.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Service3 };
diff --git a/blocks/service4.tsx b/blocks/service4.tsx
new file mode 100644
index 0000000..9afc74a
--- /dev/null
+++ b/blocks/service4.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { BookOpen, Map, Palette, Pen, TestTube, Users } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Service4Props {
+  className?: string;
+}
+
+const Service4 = ({ className }: Service4Props) => {
+  const services = [
+    {
+      icon: Users,
+      title: "تحقیق کاربر و توسعه پرسونا",
+    },
+    {
+      icon: Map,
+      title: "معماری اطلاعات و نقشه‌برداری سفر کاربر",
+    },
+    {
+      icon: Pen,
+      title: "وایرفریم و نمونه‌سازی تعاملی",
+    },
+    {
+      icon: Palette,
+      title: "طراحی بصری و یکپارچه‌سازی برند",
+    },
+    {
+      icon: TestTube,
+      title: "آزمایش کاربردپذیری و اعتبارسنجی طراحی",
+    },
+    {
+      icon: BookOpen,
+      title: "ایجاد و مستندسازی سیستم طراحی",
+    },
+  ];
+
+  const stats = [
+    {
+      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
+      title: "مجموعه طراحی حرفه‌ای",
+      value: "۱۰۰٪",
+      description: "تسلط طراحی",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      value: "۵+",
+      description: "سال تجربه",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+      title: "Sketch",
+      value: "۲۰۰+",
+      description: "پروژه تکمیل‌شده",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
+      {/* Simple Hero */}
+      <div className="bg-muted py-32">
+        <div className="container">
+          <div className="flex items-center justify-center gap-4">
+            <img
+              src="/block-media/shadcnblocks/block/symbols/ux.svg"
+              alt="طراحی تجربه و رابط کاربری"
+              className="h-16 dark:invert"
+            />
+            <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+              طراحی تجربه و رابط کاربری
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content with Sidebar */}
+      <div className="py-16">
+        <div className="container max-w-5xl">
+          <div className="grid gap-12 lg:grid-cols-3">
+            {/* Content Section */}
+            <div className="lg:col-span-2">
+              <div className="prose prose-sm max-w-none dark:prose-invert">
+                <h2>طراحی کاربرمحور با تمرکز بر تبدیل</h2>
+                <p>
+                  ما معتقدیم طراحی خوب باید برای هر کاربری که با محصول شما
+                  تعامل دارد، شهودی، دسترس‌پذیر و هدفمند باشد. رویکرد طراحی
+                  تجربه و رابط کاربری ما بر درک نیازها، رفتارها و نقاط درد کاربران تمرکز
+                  دارد تا رابط‌هایی بسازیم که نه‌تنها زیبا به نظر برسند، بلکه
+                  بی‌نقص کار کنند.
+                </p>
+
+                <h2>خلق تجربه‌های دیجیتال معنادار</h2>
+                <p>
+                  ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب
+                  می‌کنیم تا تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش
+                  می‌دهند.
+                </p>
+
+                <p>
+                  از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با
+                  داده‌های واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما
+                  تضمین می‌کند هر عنصر هدفی دارد و هم به اهداف کسب‌وکار شما
+                  کمک می‌کند و هم تجربه کاربری استثنایی ارائه می‌دهد.
+                </p>
+
+                <p>
+                  ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
+                  مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در
+                  عین حال انعطاف لازم برای رشد و تحول آینده را دارند.
+                </p>
+
+                <p>
+                  رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
+                  وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
+                  هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین
+                  می‌کند و محصولاتی می‌سازد که در بازار موفق می‌شوند.
+                </p>
+
+                <p>
+                  هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که
+                  نه‌تنها از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و
+                  از سوی کاربران تأیید شده‌اند.
+                </p>
+
+                <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
+                <div className="space-y-3">
+                  {services.map((service, index) => {
+                    const Icon = service.icon;
+                    return (
+                      <div key={index} className="flex items-center gap-3">
+                        <Icon className="h-5 w-5 text-primary" />
+                        <span>{service.title}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
+                <p>
+                  فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین
+                  نیازهای کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم
+                  طراحی تجربه و رابط کاربری عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به
+                  خلق تعامل‌های معناداری مربوط است که نتیجه می‌دهند.
+                </p>
+
+                <p>
+                  از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر
+                  طراحی به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند
+                  شما را منعکس و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های
+                  ما برای عملکرد، دسترس‌پذیری و مقیاس‌پذیری در تمام
+                  دستگاه‌ها و پلتفرم‌ها بهینه شده‌اند.
+                </p>
+              </div>
+            </div>
+
+            {/* Stats Sidebar */}
+            <div className="lg:col-span-1">
+              <div className="rounded-lg bg-muted/50 p-6 lg:sticky lg:top-8">
+                <h3 className="mb-6 text-lg font-semibold">تخصص ما</h3>
+                <div className="space-y-6">
+                  {stats.map((stat, index) => (
+                    <div key={index} className="flex items-center gap-4">
+                      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center">
+                        <img
+                          src={stat.icon}
+                          alt={stat.title}
+                          className="h-6 w-6 object-contain"
+                        />
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-sm font-medium">{stat.title}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {stat.description}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Service4 };
diff --git a/blocks/service5.tsx b/blocks/service5.tsx
new file mode 100644
index 0000000..09ff034
--- /dev/null
+++ b/blocks/service5.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import { Code, Droplet, Layout, Smartphone } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Service5Props {
+  className?: string;
+}
+
+const Service5 = ({ className }: Service5Props) => {
+  const stats = [
+    {
+      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
+      title: "مجموعه طراحی حرفه‌ای",
+      value: "۱۰۰٪",
+      description: "تسلط طراحی",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      value: "۵+",
+      description: "سال تجربه",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+      title: "Sketch",
+      value: "۲۰۰+",
+      description: "پروژه تکمیل‌شده",
+    },
+  ];
+
+  const relatedServices = [
+    {
+      icon: Droplet,
+      title: "هویت برند",
+      description: "طراحی لوگو و راهنمای برند",
+      link: "#",
+    },
+    {
+      icon: Code,
+      title: "توسعه وب",
+      description: "توسعه وب‌سایت اختصاصی",
+      link: "#",
+    },
+    {
+      icon: Smartphone,
+      title: "طراحی اپلیکیشن موبایل",
+      description: "رابط کاربری موبایل اپل و موبایل اندروید",
+      link: "#",
+    },
+    {
+      icon: Layout,
+      title: "سیستم‌های طراحی",
+      description: "کتابخانه‌های کامپوننت مقیاس‌پذیر",
+      link: "#",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-5xl">
+        <div className="grid gap-12 lg:grid-cols-3">
+          {/* Content Section */}
+          <div className="lg:col-span-2">
+            {/* Icon and Intro */}
+            <div className="mb-12 space-y-8">
+              <div className="flex justify-center lg:justify-start">
+                <div className="rounded-lg bg-muted p-4">
+                  <img
+                    src="/block-media/shadcnblocks/block/symbols/ux.svg"
+                    alt="طراحی تجربه و رابط کاربری"
+                    className="h-12 dark:invert"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-6">
+                <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+                  طراحی تجربه و رابط کاربری
+                </h1>
+                <p className="text-xl leading-relaxed text-muted-foreground">
+                  ما معتقدیم طراحی خوب باید برای هر کاربری که با محصول شما
+                  تعامل دارد، شهودی، دسترس‌پذیر و هدفمند باشد. رویکرد طراحی
+                  تجربه و رابط کاربری ما بر درک نیازها، رفتارها و نقاط درد کاربران تمرکز
+                  دارد تا رابط‌هایی بسازیم که نه‌تنها زیبا به نظر برسند، بلکه
+                  بی‌نقص کار کنند.
+                </p>
+              </div>
+            </div>
+
+            {/* Main Content */}
+            <div className="prose prose-sm max-w-none dark:prose-invert">
+              <h2>خلق تجربه‌های دیجیتال معنادار</h2>
+              <p>
+                ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب
+                می‌کنیم تا تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش
+                می‌دهند.
+              </p>
+
+              <p>
+                از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با
+                داده‌های واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما
+                تضمین می‌کند هر عنصر هدفی دارد و هم به اهداف کسب‌وکار شما
+                کمک می‌کند و هم تجربه کاربری استثنایی ارائه می‌دهد.
+              </p>
+
+              <p>
+                ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
+                مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در
+                عین حال انعطاف لازم برای رشد و تحول آینده را دارند.
+              </p>
+
+              <p>
+                رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
+                وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
+                هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین
+                می‌کند و محصولاتی می‌سازد که در بازار موفق می‌شوند.
+              </p>
+
+              <p>
+                هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که
+                نه‌تنها از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و
+                از سوی کاربران تأیید شده‌اند.
+              </p>
+
+              <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
+              <ul>
+                <li>تحقیق کاربر و توسعه پرسونا</li>
+                <li>معماری اطلاعات و نقشه‌برداری سفر کاربر</li>
+                <li>وایرفریم و نمونه‌سازی تعاملی</li>
+                <li>طراحی بصری و یکپارچه‌سازی برند</li>
+                <li>آزمایش کاربردپذیری و اعتبارسنجی طراحی</li>
+                <li>ایجاد و مستندسازی سیستم طراحی</li>
+              </ul>
+
+              <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
+              <p>
+                فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین
+                نیازهای کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم
+                طراحی تجربه و رابط کاربری عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به
+                خلق تعامل‌های معناداری مربوط است که نتیجه می‌دهند.
+              </p>
+
+              <p>
+                از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر
+                طراحی به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند
+                شما را منعکس و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های
+                ما برای عملکرد، دسترس‌پذیری و مقیاس‌پذیری در تمام
+                دستگاه‌ها و پلتفرم‌ها بهینه شده‌اند.
+              </p>
+            </div>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-8 lg:col-span-1">
+            {/* Stats Section */}
+            <div className="rounded-lg bg-muted/50 p-6">
+              <h3 className="mb-6 text-lg font-semibold">تخصص ما</h3>
+              <div className="space-y-6">
+                {stats.map((stat, index) => (
+                  <div key={index} className="flex items-center gap-4">
+                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center">
+                      <img
+                        src={stat.icon}
+                        alt={stat.title}
+                        className="h-6 w-6 object-contain"
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <div className="text-sm font-medium">{stat.title}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {stat.description}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Related Services */}
+            <div className="rounded-lg bg-muted/50 p-6">
+              <h3 className="mb-6 text-lg font-semibold">خدمات مرتبط</h3>
+              <div className="space-y-4">
+                {relatedServices.map((service, index) => {
+                  const Icon = service.icon;
+                  return (
+                    <div key={index} className="group">
+                      <a
+                        href={service.link}
+                        className="block space-y-1 rounded-md p-3 transition-colors hover:bg-background"
+                      >
+                        <div className="flex items-center gap-2">
+                          <Icon className="h-4 w-4 text-muted-foreground group-hover:text-primary" />
+                          <div className="text-sm font-medium group-hover:text-primary">
+                            {service.title}
+                          </div>
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {service.description}
+                        </div>
+                      </a>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Service5 };
diff --git a/blocks/service6.tsx b/blocks/service6.tsx
new file mode 100644
index 0000000..86fc2d7
--- /dev/null
+++ b/blocks/service6.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+import {
+  BookOpen,
+  Code,
+  Droplet,
+  Layout,
+  Map,
+  Palette,
+  Pen,
+  Smartphone,
+  TestTube,
+  Users,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Service6Props {
+  className?: string;
+}
+
+const Service6 = ({ className }: Service6Props) => {
+  const services = [
+    {
+      icon: Users,
+      title: "تحقیق کاربر و توسعه پرسونا",
+    },
+    {
+      icon: Map,
+      title: "معماری اطلاعات و نقشه‌برداری سفر کاربر",
+    },
+    {
+      icon: Pen,
+      title: "وایرفریم و نمونه‌سازی تعاملی",
+    },
+    {
+      icon: Palette,
+      title: "طراحی بصری و یکپارچه‌سازی برند",
+    },
+    {
+      icon: TestTube,
+      title: "آزمایش کاربردپذیری و اعتبارسنجی طراحی",
+    },
+    {
+      icon: BookOpen,
+      title: "ایجاد و مستندسازی سیستم طراحی",
+    },
+  ];
+
+  const stats = [
+    {
+      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
+      title: "مجموعه طراحی حرفه‌ای",
+      description: "تسلط طراحی",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "سال تجربه",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+      title: "Sketch",
+      description: "پروژه تکمیل‌شده",
+    },
+  ];
+
+  const relatedServices = [
+    {
+      icon: Droplet,
+      title: "هویت برند",
+      description: "طراحی لوگو و راهنمای برند",
+      link: "#",
+    },
+    {
+      icon: Code,
+      title: "توسعه وب",
+      description: "توسعه وب‌سایت اختصاصی",
+      link: "#",
+    },
+    {
+      icon: Smartphone,
+      title: "طراحی اپلیکیشن موبایل",
+      description: "رابط کاربری موبایل اپل و موبایل اندروید",
+      link: "#",
+    },
+    {
+      icon: Layout,
+      title: "سیستم‌های طراحی",
+      description: "کتابخانه‌های کامپوننت مقیاس‌پذیر",
+      link: "#",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-3xl">
+        {/* Icon and Intro */}
+        <div className="mb-12 space-y-8 text-center">
+          <div className="flex justify-center">
+            <div className="rounded-lg bg-muted p-4">
+              <img
+                src="/block-media/shadcnblocks/block/symbols/ux.svg"
+                alt="طراحی تجربه و رابط کاربری"
+                className="h-12 dark:invert"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-6">
+            <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+              طراحی تجربه و رابط کاربری
+            </h1>
+            <p className="text-xl leading-relaxed text-muted-foreground">
+              ما معتقدیم طراحی خوب باید برای هر کاربری که با محصول شما تعامل
+              دارد، شهودی، دسترس‌پذیر و هدفمند باشد. رویکرد طراحی تجربه و رابط کاربری ما بر
+              درک نیازها، رفتارها و نقاط درد کاربران تمرکز دارد تا رابط‌هایی
+              بسازیم که نه‌تنها زیبا به نظر برسند، بلکه بی‌نقص کار کنند.
+            </p>
+          </div>
+        </div>
+
+        {/* Expertise Section */}
+        <div className="mb-16">
+          <h2 className="mb-8 text-center text-xl font-semibold tracking-tight md:text-3xl">
+            تخصص ما
+          </h2>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+            {stats.map((stat, index) => (
+              <div
+                key={index}
+                className="rounded-lg bg-muted/50 p-6 text-center"
+              >
+                <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center">
+                  <img
+                    src={stat.icon}
+                    alt={stat.title}
+                    className="h-8 w-8 object-contain"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">{stat.title}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {stat.description}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="mx-auto prose prose-sm mb-16 max-w-none dark:prose-invert">
+          <h2>خلق تجربه‌های دیجیتال معنادار</h2>
+          <p>
+            ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب می‌کنیم تا
+            تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش می‌دهند.
+          </p>
+
+          <p>
+            از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با داده‌های
+            واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما تضمین می‌کند هر
+            عنصر هدفی دارد و هم به اهداف کسب‌وکار شما کمک می‌کند و هم تجربه
+            کاربری استثنایی ارائه می‌دهد.
+          </p>
+
+          <p>
+            ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
+            مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در عین
+            حال انعطاف لازم برای رشد و تحول آینده را دارند.
+          </p>
+
+          <p>
+            رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
+            وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
+            هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین می‌کند و
+            محصولاتی می‌سازد که در بازار موفق می‌شوند.
+          </p>
+
+          <p>
+            هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که نه‌تنها
+            از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و از سوی
+            کاربران تأیید شده‌اند.
+          </p>
+
+          <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
+          <div className="space-y-3">
+            {services.map((service, index) => {
+              const Icon = service.icon;
+              return (
+                <div key={index} className="flex items-center gap-3">
+                  <Icon className="h-5 w-5 text-primary" />
+                  <span>{service.title}</span>
+                </div>
+              );
+            })}
+          </div>
+
+          <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
+          <p>
+            فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین نیازهای
+            کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم طراحی تجربه و رابط کاربری
+            عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به خلق تعامل‌های
+            معناداری مربوط است که نتیجه می‌دهند.
+          </p>
+
+          <p>
+            از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر طراحی
+            به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند شما را منعکس
+            و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های ما برای عملکرد،
+            دسترس‌پذیری و مقیاس‌پذیری در تمام دستگاه‌ها و پلتفرم‌ها بهینه
+            شده‌اند.
+          </p>
+        </div>
+
+        {/* Related Services */}
+        <div className="rounded-lg">
+          <h2 className="mb-8 text-center text-xl font-semibold tracking-tight md:text-3xl">
+            خدمات مرتبط
+          </h2>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+            {relatedServices.map((service, index) => {
+              const Icon = service.icon;
+              return (
+                <div key={index} className="group rounded-lg bg-muted/50">
+                  <a
+                    href={service.link}
+                    className="block space-y-2 rounded-lg p-6 transition-colors hover:bg-muted"
+                  >
+                    <div className="flex items-center gap-3">
+                      <Icon className="h-5 w-5 text-muted-foreground group-hover:text-primary" />
+                      <div className="text-lg font-medium group-hover:text-primary">
+                        {service.title}
+                      </div>
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      {service.description}
+                    </div>
+                  </a>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Service6 };
diff --git a/blocks/service7.tsx b/blocks/service7.tsx
new file mode 100644
index 0000000..d1949c7
--- /dev/null
+++ b/blocks/service7.tsx
@@ -0,0 +1,260 @@
+"use client";
+
+import {
+  BookOpen,
+  Code,
+  Droplet,
+  Layout,
+  Map,
+  Palette,
+  Pen,
+  Smartphone,
+  TestTube,
+  Users,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Service7Props {
+  className?: string;
+}
+
+const Service7 = ({ className }: Service7Props) => {
+  const services = [
+    {
+      icon: Users,
+      title: "تحقیق کاربر و توسعه پرسونا",
+    },
+    {
+      icon: Map,
+      title: "معماری اطلاعات و نقشه‌برداری سفر کاربر",
+    },
+    {
+      icon: Pen,
+      title: "وایرفریم و نمونه‌سازی تعاملی",
+    },
+    {
+      icon: Palette,
+      title: "طراحی بصری و یکپارچه‌سازی برند",
+    },
+    {
+      icon: TestTube,
+      title: "آزمایش کاربردپذیری و اعتبارسنجی طراحی",
+    },
+    {
+      icon: BookOpen,
+      title: "ایجاد و مستندسازی سیستم طراحی",
+    },
+  ];
+
+  const stats = [
+    {
+      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
+      title: "مجموعه طراحی حرفه‌ای",
+      description: "تسلط طراحی",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "سال تجربه",
+    },
+    {
+      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
+      title: "Sketch",
+      description: "پروژه تکمیل‌شده",
+    },
+  ];
+
+  const relatedServices = [
+    {
+      icon: Droplet,
+      title: "هویت برند",
+      description: "طراحی لوگو و راهنمای برند",
+      link: "#",
+    },
+    {
+      icon: Code,
+      title: "توسعه وب",
+      description: "توسعه وب‌سایت اختصاصی",
+      link: "#",
+    },
+    {
+      icon: Smartphone,
+      title: "طراحی اپلیکیشن موبایل",
+      description: "رابط کاربری موبایل اپل و موبایل اندروید",
+      link: "#",
+    },
+    {
+      icon: Layout,
+      title: "سیستم‌های طراحی",
+      description: "کتابخانه‌های کامپوننت مقیاس‌پذیر",
+      link: "#",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
+      <div className="container max-w-4xl">
+        {/* Icon and Intro */}
+        <div className="mb-16 space-y-8">
+          <div className="flex justify-start">
+            <div className="rounded-full bg-muted p-6">
+              <img
+                src="/block-media/shadcnblocks/block/symbols/ux.svg"
+                alt="طراحی تجربه و رابط کاربری"
+                className="h-16 dark:invert"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-6">
+            <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+              طراحی تجربه و رابط کاربری
+            </h1>
+            <p className="max-w-3xl text-xl leading-relaxed text-muted-foreground">
+              ما معتقدیم طراحی خوب باید برای هر کاربری که با محصول شما تعامل
+              دارد، شهودی، دسترس‌پذیر و هدفمند باشد. رویکرد طراحی تجربه و رابط کاربری ما بر
+              درک نیازها، رفتارها و نقاط درد کاربران تمرکز دارد تا رابط‌هایی
+              بسازیم که نه‌تنها زیبا به نظر برسند، بلکه بی‌نقص کار کنند.
+            </p>
+          </div>
+        </div>
+
+        {/* Expertise Section */}
+        <div className="mb-16">
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold tracking-tight md:text-xl">
+              تخصص ما
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              ابزارهای حرفه‌ای و تجربه اثبات‌شده
+            </p>
+          </div>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            {stats.map((stat, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-3 rounded-lg border p-4"
+              >
+                <div className="flex h-10 w-10 items-center justify-center">
+                  <img
+                    src={stat.icon}
+                    alt={stat.title}
+                    className="h-6 w-6 object-contain"
+                  />
+                </div>
+                <div>
+                  <div className="text-sm font-medium">{stat.title}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {stat.description}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="prose prose-sm mb-16 max-w-none dark:prose-invert">
+          <h2>خلق تجربه‌های دیجیتال معنادار</h2>
+          <p>
+            ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب می‌کنیم تا
+            تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش می‌دهند.
+          </p>
+
+          <p>
+            از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با داده‌های
+            واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما تضمین می‌کند هر
+            عنصر هدفی دارد و هم به اهداف کسب‌وکار شما کمک می‌کند و هم تجربه
+            کاربری استثنایی ارائه می‌دهد.
+          </p>
+
+          <p>
+            ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
+            مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در عین
+            حال انعطاف لازم برای رشد و تحول آینده را دارند.
+          </p>
+
+          <p>
+            رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
+            وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
+            هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین می‌کند و
+            محصولاتی می‌سازد که در بازار موفق می‌شوند.
+          </p>
+
+          <p>
+            هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که نه‌تنها
+            از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و از سوی
+            کاربران تأیید شده‌اند.
+          </p>
+
+          <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
+          <div className="space-y-3">
+            {services.map((service, index) => {
+              const Icon = service.icon;
+              return (
+                <div key={index} className="flex items-center gap-3">
+                  <Icon className="h-5 w-5 text-primary" />
+                  <span>{service.title}</span>
+                </div>
+              );
+            })}
+          </div>
+
+          <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
+          <p>
+            فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین نیازهای
+            کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم طراحی تجربه و رابط کاربری
+            عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به خلق تعامل‌های
+            معناداری مربوط است که نتیجه می‌دهند.
+          </p>
+
+          <p>
+            از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر طراحی
+            به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند شما را منعکس
+            و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های ما برای عملکرد،
+            دسترس‌پذیری و مقیاس‌پذیری در تمام دستگاه‌ها و پلتفرم‌ها بهینه
+            شده‌اند.
+          </p>
+        </div>
+
+        {/* Related Services */}
+        <div>
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold tracking-tight md:text-xl">
+              خدمات مرتبط
+            </h2>
+            <p className="mt-2 text-muted-foreground">
+              سایر خدمات طراحی و توسعه ما را ببینید
+            </p>
+          </div>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            {relatedServices.map((service, index) => {
+              const Icon = service.icon;
+              return (
+                <div key={index} className="group">
+                  <a
+                    href={service.link}
+                    className="block space-y-3 rounded-lg border p-6 transition-colors hover:bg-muted/50"
+                  >
+                    <div className="flex items-center gap-2">
+                      <Icon className="h-5 w-5 text-muted-foreground group-hover:text-primary" />
+                      <div className="font-medium group-hover:text-primary">
+                        {service.title}
+                      </div>
+                    </div>
+                    <div className="text-sm leading-relaxed text-muted-foreground">
+                      {service.description}
+                    </div>
+                  </a>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Service7 };
diff --git a/blocks/services1.tsx b/blocks/services1.tsx
new file mode 100644
index 0000000..895fc8e
--- /dev/null
+++ b/blocks/services1.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Services1Props {
+  className?: string;
+}
+
+const Services1 = ({ className }: Services1Props) => {
+  const services = [
+    {
+      title: "استراتژی",
+      description:
+        "ما نقشه راهی می‌چینیم که با چشم‌انداز شما هم‌راستا باشد و هر گام هدفمند و مؤثر باشد.",
+      subHeading: "خدمات استراتژی",
+      items: [
+        "تحلیل بازار و بینش‌ها",
+        "تعیین اهداف و نقشه‌برداری",
+        "یکپارچه‌سازی نوآوری",
+      ],
+    },
+    {
+      title: "مشاوره",
+      description:
+        "با شما همکاری می‌کنیم تا نیازهای منحصربه‌فردتان را بشناسیم و بینش و راه‌حل‌های عملی ارائه دهیم.",
+      items: [
+        "بازطراحی ساختار سازمانی",
+        "بهینه‌سازی فرآیندها",
+        "تحلیل و بهبود عملکرد",
+      ],
+    },
+    {
+      title: "توسعه",
+      description:
+        "از استراتژی‌های ورود به بازار تا توسعه مشارکت‌ها، محرک سفر رشد شما هستیم.",
+      items: [
+        "استراتژی‌های ورود به بازار",
+        "توسعه مشارکت‌ها",
+        "ادغام و تملک",
+      ],
+    },
+    {
+      title: "پایش",
+      description:
+        "ابزارها و بینش‌های لازم برای نظارت و بهبود هر جنبه از عملیات کسب‌وکار شما را فراهم می‌کنیم.",
+      items: [
+        "تحلیل لحظه‌ای",
+        "پایش شاخص‌های عملکرد",
+        "راه‌حل‌های مدیریت ریسک",
+      ],
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl">
+          <h2 className="mb-4 text-xl font-semibold text-foreground">خدمات</h2>
+
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            {services.map((service, index) => (
+              <div key={index} className="rounded-lg bg-muted p-8">
+                <h3 className="mb-4 text-base font-medium text-foreground">
+                  {service.title}
+                </h3>
+
+                <p className="mb-6 text-xs leading-relaxed text-muted-foreground">
+                  {service.description}
+                </p>
+
+                <ul className="space-y-3">
+                  {service.items.map((item, itemIndex) => (
+                    <li key={itemIndex} className="flex items-center gap-3">
+                      <div className="flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/20">
+                        <Check className="h-2.5 w-2.5 text-muted-foreground" />
+                      </div>
+                      <span className="text-xs text-foreground">{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services1 };
diff --git a/blocks/services10.tsx b/blocks/services10.tsx
new file mode 100644
index 0000000..84c4718
--- /dev/null
+++ b/blocks/services10.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import {
+  ArrowRight,
+  CheckCircle,
+  Code,
+  Cog,
+  PenTool,
+  Shrub,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Services10Props {
+  className?: string;
+}
+
+const Services10 = ({ className }: Services10Props) => {
+  const services = [
+    {
+      icon: <Cog className="h-6 w-6" />,
+      title: "استراتژی محصول",
+      description:
+        "از تحقیق بازار تا پرسونای کاربر، به ساخت محصولاتی که اهمیت دارند کمک می‌کنیم. رویکرد استراتژیک ما تضمین می‌کند محصول شما نیازهای واقعی کاربران را برآورده کند.",
+      items: [
+        "تحقیق و تحلیل بازار",
+        "پرسونای کاربر و نقشه‌برداری سفر",
+        "تحلیل رقبا",
+        "توسعه نقشه راه محصول",
+      ],
+      deliverables: [
+        "سند استراتژی",
+        "گزارش تحقیق کاربر",
+        "نقشه راه و زمان‌بندی",
+      ],
+      duration: "۲ تا ۴ هفته",
+      price: "از ۵٬۰۰۰ دلار",
+      featured: false,
+    },
+    {
+      icon: <PenTool className="h-6 w-6" />,
+      title: "طراحی",
+      description:
+        "طراحی‌های زیبا و کاربردی که تجربه‌های به‌یادماندنی برای کاربر خلق می‌کنند. بر زیبایی‌شناسی و کاربردپذیری تمرکز می‌کنیم تا طراحی‌هایی بسازیم که تبدیل ایجاد کنند.",
+      items: [
+        "طراحی رابط کاربری/تجربه کاربری",
+        "نمونه‌سازی تعاملی",
+        "ایجاد سیستم طراحی",
+        "آزمایش کاربردپذیری",
+      ],
+      deliverables: ["سیستم طراحی", "نمونه‌های تعاملی", "مشخصات طراحی"],
+      duration: "۳ تا ۶ هفته",
+      price: "از ۸٬۰۰۰ دلار",
+      featured: true,
+    },
+    {
+      icon: <Code className="h-6 w-6" />,
+      title: "توسعه وب",
+      description:
+        "اپلیکیشن‌های پایدار و مقیاس‌پذیر با فناوری‌ها و فریم‌ورک‌های مدرن. تضمین می‌کنیم اپلیکیشن شما سریع، امن و قابل نگهداری باشد.",
+      items: [
+        "توسعه فرانت‌اند",
+        "توسعه بک‌اند",
+        "یکپارچه‌سازی اتصال هوشمند",
+        "بهینه‌سازی عملکرد",
+      ],
+      deliverables: ["کد منبع", "مستندات فنی", "راهنمای استقرار"],
+      duration: "۶ تا ۱۲ هفته",
+      price: "از ۱۵٬۰۰۰ دلار",
+      featured: true,
+    },
+    {
+      icon: <Shrub className="h-6 w-6" />,
+      title: "بازاریابی",
+      description:
+        "ابتکارات رشد استراتژیک برای مقیاس‌دهی محصول و بیشینه‌سازی تأثیر. از رویکردهای مبتنی بر داده برای بهینه‌سازی تلاش‌های بازاریابی استفاده می‌کنیم.",
+      items: [
+        "استراتژی و پیاده‌سازی سئو",
+        "تحلیل و پایش عملکرد",
+        "آزمایش A/B و بهینه‌سازی",
+        "استراتژی بازاریابی محتوا",
+      ],
+      deliverables: [
+        "برنامه بازاریابی",
+        "داشبورد تحلیل",
+        "گزارش‌های عملکرد",
+      ],
+      duration: "مداوم",
+      price: "از ۳٬۰۰۰ دلار در ماه",
+      featured: false,
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/30 py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl space-y-16">
+          <div className="space-y-4 text-center">
+            <Badge variant="outline" className="bg-background">
+              خدمات ما
+            </Badge>
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl lg:text-2xll">
+              راه‌حل‌های دیجیتال جامع
+            </h2>
+            <p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground md:text-xl">
+              قیمت‌گذاری شفاف برای راه‌حل‌های دیجیتال در سطح جهانی، متناسب با
+              نیازهای کسب‌وکار و اهداف رشد شما.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            {services.map((service, index) => (
+              <div
+                key={index}
+                className={`group relative overflow-hidden rounded-xl border transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${
+                  service.featured
+                    ? "border-primary/20 bg-background shadow-lg"
+                    : "border-border bg-background/80 backdrop-blur-sm hover:bg-background"
+                }`}
+              >
+                <div className="p-8">
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`rounded-lg p-3 ${
+                          service.featured
+                            ? "bg-primary/10 text-primary"
+                            : "bg-muted text-muted-foreground"
+                        }`}
+                      >
+                        {service.icon}
+                      </div>
+                      <div>
+                        <h3 className="text-xl font-semibold">
+                          {service.title}
+                        </h3>
+                        <div className="mt-1 text-sm text-muted-foreground">
+                          {service.duration}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <p className="mt-6 leading-relaxed text-muted-foreground">
+                    {service.description}
+                  </p>
+
+                  <div className="mt-6 space-y-4">
+                    <div>
+                      <h4 className="mb-3 text-sm font-medium">
+                        موارد شامل:
+                      </h4>
+                      <ul className="space-y-2">
+                        {service.items.map((item, itemIndex) => (
+                          <li
+                            key={itemIndex}
+                            className="flex items-center gap-3 text-sm"
+                          >
+                            <CheckCircle className="h-4 w-4 shrink-0 text-green-600" />
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    <div className="rounded-lg bg-muted/50 p-4">
+                      <h4 className="mb-2 text-sm font-medium">خروجی‌ها:</h4>
+                      <div className="flex flex-wrap gap-2">
+                        {service.deliverables.map((deliverable, delivIndex) => (
+                          <Badge
+                            key={delivIndex}
+                            variant="secondary"
+                            className="text-xs"
+                          >
+                            {deliverable}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-8 border-t border-border pt-6">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="text-lg font-semibold">
+                          {service.price}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          پیشنهاد قیمت اختصاصی در دسترس است
+                        </div>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant={service.featured ? "default" : "outline"}
+                        className="transition-all group-hover:shadow-md"
+                      >
+                        شروع کنید
+                        <ArrowRight className="ms-1 h-3 w-3 rtl:rotate-180 transition-transform group-hover:translate-x-1 rtl:group-hover:-translate-x-1" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="rounded-xl border bg-background p-8 text-center">
+            <h3 className="mb-2 text-xl font-semibold">
+              به راه‌حل اختصاصی نیاز دارید؟
+            </h3>
+            <p className="mb-6 text-muted-foreground">
+              بسته‌های سفارشی ترکیبی از چند خدمت برای تحول دیجیتال جامع
+              ارائه می‌دهیم.
+            </p>
+            <Button
+              size="lg"
+              className="bg-gradient-to-r from-primary to-primary/80"
+            >
+              رزرو مشاوره
+              <ArrowRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services10 };
diff --git a/blocks/services11.tsx b/blocks/services11.tsx
new file mode 100644
index 0000000..4062abe
--- /dev/null
+++ b/blocks/services11.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type ServiceProps = {
+  title: string;
+  image: string;
+  url: string;
+};
+
+const services: ServiceProps[] = [
+  {
+    title: "توسعه وب",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-6jEVl7xPH3E-unsplash.jpg",
+    url: "",
+  },
+  {
+    title: "توسعه اپلیکیشن موبایل",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-gDmVqxZt1hg-unsplash.jpg",
+    url: "",
+  },
+];
+
+interface Services11Props {
+  className?: string;
+}
+
+const Services11 = ({ className }: Services11Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container grid grid-cols-1 gap-10 lg:grid-cols-3">
+        <div className="flex flex-col justify-between lg:col-span-1">
+          <div>
+            <h2 className="mb-4 text-xl font-medium text-foreground md:text-2xll">
+              خدمات ما
+            </h2>
+            <p className="w-72 text-base tracking-tight text-muted-foreground">
+              راه‌حل‌های دیجیتال جامع ارائه می‌دهیم تا کسب‌وکار شما رشد کند. از
+              توسعه وب تا اپلیکیشن موبایل، نتایجی فراتر از انتظار تحویل
+              می‌دهیم.
+            </p>
+          </div>
+          <Button variant="outline" className="mt-8 w-fit">
+            مشاهده همه خدمات
+            <ArrowUpRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2">
+          {services.map((service, idx) => (
+            <motion.a
+              key={idx}
+              href={service.url}
+              whileHover={{ opacity: 0.8 }}
+              className="group block overflow-hidden rounded-xl"
+            >
+              <Card className="relative aspect-[3/4] overflow-hidden border-none bg-muted p-0">
+                <img
+                  src={service.image}
+                  alt={service.title}
+                  className="absolute inset-0 h-full w-full object-cover"
+                />
+                <CardContent className="absolute inset-0 flex flex-col justify-start p-6">
+                  <div className="pe-4 font-semibold text-white">
+                    {service.title}
+                  </div>
+                </CardContent>
+                <ArrowUpRight className="absolute top-6 end-6 h-6 w-6 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+              </Card>
+            </motion.a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services11 };
diff --git a/blocks/services12.tsx b/blocks/services12.tsx
new file mode 100644
index 0000000..6253b7d
--- /dev/null
+++ b/blocks/services12.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type ServiceProps = {
+  title: string;
+  image: string;
+  url: string;
+};
+
+const services: ServiceProps[] = [
+  {
+    title: "توسعه وب",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-6jEVl7xPH3E-unsplash.jpg",
+    url: "",
+  },
+  {
+    title: "توسعه اپلیکیشن موبایل",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-gDmVqxZt1hg-unsplash.jpg",
+    url: "",
+  },
+  {
+    title: "طراحی رابط کاربری/تجربه کاربری",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
+    url: "",
+  },
+  {
+    title: "بازاریابی دیجیتال",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
+    url: "",
+  },
+  {
+    title: "راه‌حل‌های ابری",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
+    url: "",
+  },
+];
+
+interface Services12Props {
+  className?: string;
+}
+
+const Services12 = ({ className }: Services12Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container grid grid-cols-1 gap-10 lg:grid-cols-3">
+        <div className="flex flex-col justify-between lg:col-span-1">
+          <div>
+            <h2 className="mb-4 text-xl font-medium text-foreground md:text-2xll">
+              خدمات ویژه
+            </h2>
+            <p className="w-72 text-base tracking-tight text-muted-foreground">
+              راه‌حل‌های دیجیتال جامع ارائه می‌دهیم تا کسب‌وکار شما رشد کند. از
+              توسعه وب تا اپلیکیشن موبایل، نتایجی فراتر از انتظار تحویل
+              می‌دهیم.
+            </p>
+          </div>
+          <Button variant="outline" className="mt-8 w-fit">
+            مشاهده همه خدمات
+            <ArrowUpRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2">
+          {/* Featured Services - First 2 */}
+          {services.slice(0, 2).map((service, idx) => (
+            <motion.a
+              key={idx}
+              href={service.url}
+              whileHover={{ opacity: 0.8 }}
+              className="group block overflow-hidden rounded-xl"
+            >
+              <Card className="relative aspect-[3/4] overflow-hidden p-0">
+                <img
+                  src={service.image}
+                  alt={service.title}
+                  className="absolute inset-0 h-full w-full object-cover"
+                />
+                <CardContent className="absolute inset-0 flex flex-col justify-start p-6">
+                  <div className="pe-4 font-semibold text-white">
+                    {service.title}
+                  </div>
+                </CardContent>
+                <ArrowUpRight className="absolute top-6 end-6 h-6 w-6 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+              </Card>
+            </motion.a>
+          ))}
+
+          {/* Secondary Services - Remaining 3 */}
+          <div className="col-span-full grid grid-cols-1 gap-4 sm:grid-cols-3">
+            {services.slice(2).map((service, idx) => (
+              <motion.a
+                key={idx + 2}
+                href={service.url}
+                whileHover={{ opacity: 0.8 }}
+                className="group block overflow-hidden rounded-xl"
+              >
+                <Card className="relative aspect-[4/3] overflow-hidden p-0">
+                  <img
+                    src={service.image}
+                    alt={service.title}
+                    className="absolute inset-0 h-full w-full object-cover"
+                  />
+                  <CardContent className="absolute inset-0 flex flex-col justify-start p-4">
+                    <div className="pe-4 text-sm font-semibold text-white">
+                      {service.title}
+                    </div>
+                  </CardContent>
+                  <ArrowUpRight className="absolute top-4 end-4 h-5 w-5 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+                </Card>
+              </motion.a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services12 };
diff --git a/blocks/services13.tsx b/blocks/services13.tsx
new file mode 100644
index 0000000..880b944
--- /dev/null
+++ b/blocks/services13.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type ServiceProps = {
+  title: string;
+  image: string;
+  url: string;
+  size?: "large" | "medium" | "small";
+};
+
+const services: ServiceProps[] = [
+  {
+    title: "توسعه وب",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-6jEVl7xPH3E-unsplash.jpg",
+    url: "",
+    size: "large",
+  },
+  {
+    title: "توسعه اپلیکیشن موبایل",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-gDmVqxZt1hg-unsplash.jpg",
+    url: "",
+    size: "medium",
+  },
+  {
+    title: "طراحی رابط کاربری/تجربه کاربری",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
+    url: "",
+    size: "small",
+  },
+  {
+    title: "بازاریابی دیجیتال",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
+    url: "",
+    size: "medium",
+  },
+  {
+    title: "راه‌حل‌های ابری",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
+    url: "",
+    size: "small",
+  },
+];
+
+interface Services13Props {
+  className?: string;
+}
+
+const Services13 = ({ className }: Services13Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container grid grid-cols-1 gap-10 lg:grid-cols-3">
+        <div className="flex flex-col justify-between lg:col-span-1">
+          <div>
+            <h2 className="mb-4 text-xl font-medium text-foreground md:text-2xll">
+              خدمات ویژه
+            </h2>
+            <p className="w-72 text-base tracking-tight text-muted-foreground">
+              راه‌حل‌های دیجیتال جامع ارائه می‌دهیم تا کسب‌وکار شما رشد کند. از
+              توسعه وب تا اپلیکیشن موبایل، نتایجی فراتر از انتظار تحویل
+              می‌دهیم.
+            </p>
+          </div>
+          <Button variant="outline" className="mt-8 w-fit">
+            مشاهده همه خدمات
+            <ArrowUpRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2">
+          {/* Web Development - Hero card */}
+          <motion.a
+            href={services[0].url}
+            whileHover={{ opacity: 0.8, scale: 1.02 }}
+            className="group col-span-1 block overflow-hidden rounded-xl sm:col-span-2"
+          >
+            <Card className="relative aspect-[16/9] overflow-hidden p-0">
+              <img
+                src={services[0].image}
+                alt={services[0].title}
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+              <CardContent className="absolute inset-0 flex flex-col justify-end p-8">
+                <div className="pe-4 text-xl font-bold text-white">
+                  {services[0].title}
+                </div>
+              </CardContent>
+              <ArrowUpRight className="absolute top-8 end-8 h-8 w-8 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+            </Card>
+          </motion.a>
+
+          {/* Mobile App Development */}
+          <motion.a
+            href={services[1].url}
+            whileHover={{ opacity: 0.8, scale: 1.02 }}
+            className="group block overflow-hidden rounded-xl"
+          >
+            <Card className="relative aspect-[4/5] overflow-hidden p-0">
+              <img
+                src={services[1].image}
+                alt={services[1].title}
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+              <CardContent className="absolute inset-0 flex flex-col justify-end p-6">
+                <div className="pe-4 text-lg font-semibold text-white">
+                  {services[1].title}
+                </div>
+              </CardContent>
+              <ArrowUpRight className="absolute top-6 end-6 h-6 w-6 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+            </Card>
+          </motion.a>
+
+          {/* UI/UX Design */}
+          <motion.a
+            href={services[2].url}
+            whileHover={{ opacity: 0.8, scale: 1.02 }}
+            className="group block overflow-hidden rounded-xl"
+          >
+            <Card className="relative aspect-[4/5] overflow-hidden p-0">
+              <img
+                src={services[2].image}
+                alt={services[2].title}
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+              <CardContent className="absolute inset-0 flex flex-col justify-end p-6">
+                <div className="pe-4 text-lg font-semibold text-white">
+                  {services[2].title}
+                </div>
+              </CardContent>
+              <ArrowUpRight className="absolute top-6 end-6 h-6 w-6 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+            </Card>
+          </motion.a>
+
+          {/* Digital Marketing */}
+          <motion.a
+            href={services[3].url}
+            whileHover={{ opacity: 0.8, scale: 1.02 }}
+            className="group block overflow-hidden rounded-xl"
+          >
+            <Card className="relative aspect-[4/5] overflow-hidden p-0">
+              <img
+                src={services[3].image}
+                alt={services[3].title}
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+              <CardContent className="absolute inset-0 flex flex-col justify-end p-6">
+                <div className="pe-4 text-lg font-semibold text-white">
+                  {services[3].title}
+                </div>
+              </CardContent>
+              <ArrowUpRight className="absolute top-6 end-6 h-6 w-6 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+            </Card>
+          </motion.a>
+
+          {/* Cloud Solutions */}
+          <motion.a
+            href={services[4].url}
+            whileHover={{ opacity: 0.8, scale: 1.02 }}
+            className="group block overflow-hidden rounded-xl"
+          >
+            <Card className="relative aspect-[4/5] overflow-hidden p-0">
+              <img
+                src={services[4].image}
+                alt={services[4].title}
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+              <CardContent className="absolute inset-0 flex flex-col justify-end p-6">
+                <div className="pe-4 text-lg font-semibold text-white">
+                  {services[4].title}
+                </div>
+              </CardContent>
+              <ArrowUpRight className="absolute top-6 end-6 h-6 w-6 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+            </Card>
+          </motion.a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services13 };
diff --git a/blocks/services14.tsx b/blocks/services14.tsx
new file mode 100644
index 0000000..89501d4
--- /dev/null
+++ b/blocks/services14.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type ServiceProps = {
+  title: string;
+  image: string;
+  url: string;
+};
+
+const services: ServiceProps[] = [
+  {
+    title: "توسعه وب",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-6jEVl7xPH3E-unsplash.jpg",
+    url: "",
+  },
+  {
+    title: "توسعه اپلیکیشن موبایل",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-gDmVqxZt1hg-unsplash.jpg",
+    url: "",
+  },
+  {
+    title: "طراحی رابط کاربری/تجربه کاربری",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
+    url: "",
+  },
+  {
+    title: "بازاریابی دیجیتال",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
+    url: "",
+  },
+];
+
+interface Services14Props {
+  className?: string;
+}
+
+const Services14 = ({ className }: Services14Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container grid grid-cols-1 gap-12 lg:grid-cols-2">
+        <div className="flex flex-col justify-between">
+          <div>
+            <h2 className="mb-4 text-xl font-medium text-foreground md:text-2xll">
+              خدمات ما
+            </h2>
+            <p className="w-80 text-base tracking-tight text-muted-foreground">
+              راه‌حل‌های دیجیتال جامع ارائه می‌دهیم که کسب‌وکار شما را متحول
+              می‌کنند. از ایده تا استقرار، تضمین می‌کنیم هر پروژه نتیجه‌ای
+              استثنایی تحویل دهد.
+            </p>
+          </div>
+          <Button variant="outline" className="mt-8 w-fit">
+            مشاهده خدمات
+            <ArrowUpRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          {services.map((service, idx) => (
+            <motion.a
+              key={idx}
+              href={service.url}
+              whileHover={{ opacity: 0.8 }}
+              className="group block overflow-hidden rounded-lg"
+            >
+              <Card className="relative aspect-square overflow-hidden p-0">
+                <img
+                  src={service.image}
+                  alt={service.title}
+                  className="absolute inset-0 h-full w-full object-cover"
+                />
+                <CardContent className="absolute inset-0 flex flex-col justify-end p-4">
+                  <div className="font-semibold text-white">
+                    {service.title}
+                  </div>
+                </CardContent>
+                <ArrowUpRight className="absolute top-4 end-4 h-5 w-5 text-white transition-transform group-hover:scale-110 rtl:rotate-180" />
+              </Card>
+            </motion.a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services14 };
diff --git a/blocks/services15.tsx b/blocks/services15.tsx
new file mode 100644
index 0000000..847dde3
--- /dev/null
+++ b/blocks/services15.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type ServiceProps = {
+  title: string;
+  image: string;
+  url: string;
+  height: "tall" | "medium" | "short";
+};
+
+const services: ServiceProps[] = [
+  {
+    title: "توسعه وب",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-6jEVl7xPH3E-unsplash.jpg",
+    url: "",
+    height: "tall",
+  },
+  {
+    title: "توسعه اپلیکیشن موبایل",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-gDmVqxZt1hg-unsplash.jpg",
+    url: "",
+    height: "medium",
+  },
+  {
+    title: "طراحی رابط کاربری/تجربه کاربری",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
+    url: "",
+    height: "short",
+  },
+  {
+    title: "بازاریابی دیجیتال",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
+    url: "",
+    height: "tall",
+  },
+  {
+    title: "راه‌حل‌های ابری",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
+    url: "",
+    height: "tall",
+  },
+  {
+    title: "تحلیل داده",
+    image:
+      "/block-media/shadcnblocks/block/photos/simone-hutsch-h4H-6HQ2zog-unsplash.jpg",
+    url: "",
+    height: "medium",
+  },
+];
+
+interface Services15Props {
+  className?: string;
+}
+
+const Services15 = ({ className }: Services15Props) => {
+  const getHeightClass = (height: ServiceProps["height"]) => {
+    switch (height) {
+      case "tall":
+        return "h-96";
+      case "medium":
+        return "h-72";
+      case "short":
+        return "h-56";
+      default:
+        return "h-56";
+    }
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-16 max-w-2xl">
+          <h2 className="mb-4 text-xl font-medium text-foreground md:text-2xll">
+            راه‌حل‌های دیجیتال
+          </h2>
+          <p className="text-base tracking-tight text-muted-foreground">
+            کسب‌وکار خود را با خدمات دیجیتال جامع ما متحول کنید. خلاقیت را با
+            تخصص فنی ترکیب می‌کنیم تا راه‌حل‌هایی ارائه دهیم که رشد را تقویت
+            می‌کنند.
+          </p>
+        </div>
+
+        {/* Masonry Layout using CSS Columns */}
+        <div className="columns-1 gap-6 sm:columns-2 lg:columns-3">
+          {services.map((service, idx) => (
+            <motion.a
+              key={idx}
+              href={service.url}
+              whileHover={{ y: -4 }}
+              className="group mb-6 block break-inside-avoid overflow-hidden rounded-xl"
+            >
+              <Card
+                className={`relative ${getHeightClass(service.height)} overflow-hidden p-0`}
+              >
+                <img
+                  src={service.image}
+                  alt={service.title}
+                  className="absolute inset-0 h-full w-full object-cover"
+                />
+                {/* Color overlay on hover */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                <CardContent className="absolute inset-0 flex flex-col justify-end p-6">
+                  <div className="font-semibold text-white">
+                    {service.title}
+                  </div>
+                </CardContent>
+                <ArrowUpRight className="absolute top-6 end-6 h-6 w-6 text-white transition-all duration-300 rtl:rotate-180 group-hover:rotate-45 rtl:group-hover:-rotate-[135deg]" />
+              </Card>
+            </motion.a>
+          ))}
+        </div>
+
+        <div className="mt-12 text-center">
+          <Button variant="outline" className="mx-auto">
+            مشاهده همه خدمات
+            <ArrowUpRight className="ms-2 h-4 w-4 rtl:rotate-180" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services15 };
diff --git a/blocks/services16.tsx b/blocks/services16.tsx
new file mode 100644
index 0000000..eb70be0
--- /dev/null
+++ b/blocks/services16.tsx
@@ -0,0 +1,139 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const services = [
+  {
+    title: "استراتژی محصول",
+    description:
+      "اهداف روشن تعریف می‌کنیم، ذینفعان را هم‌راستا می‌کنیم و ابتکاراتی را اولویت‌بندی می‌کنیم که تأثیر قابل اندازه‌گیری دارند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/daria-nepriakhina-zoCDWPuiRuA-unsplash.jpg",
+    categories: [
+      "چشم‌انداز و اهداف",
+      "هم‌راستایی ذینفعان",
+      "اولویت‌بندی",
+      "نقشه‌برداری",
+      "برنامه‌ریزی تحویل",
+      "شاخص‌ها",
+    ],
+  },
+  {
+    title: "بازاریابی رشد و چرخه عمر",
+    description:
+      "آزمایش تمام قیف و برنامه‌های چرخه عمر که مشتریان را جذب، فعال و حفظ می‌کنند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/diggity-marketing-SB0WARG16HI-unsplash.jpg",
+    categories: [
+      "جذب",
+      "فعال‌سازی",
+      "حفظ",
+      "انتساب",
+      "آزمایش",
+    ],
+  },
+  {
+    title: "عملیات محتوا و سئو",
+    description:
+      "سیستم‌های محتوای عملیاتی و استراتژی‌های جستجو که رشد ارگانیک را در طول زمان تقویت می‌کنند.",
+    image:
+      "/block-media/shadcnblocks/block/photos/stephen-dawson-qwtCeJ5cLYs-unsplash.jpg",
+    categories: [
+      "نقشه‌برداری موضوعات",
+      "سئوی فنی",
+      "فرآیند تحریریه",
+      "توزیع",
+    ],
+  },
+  {
+    title: "یکپارچه‌سازی هوش مصنوعی و اتوماسیون",
+    description:
+      "از هوش مصنوعی و اتوماسیون برای ساده‌سازی گردش کار، بهبود تصمیم‌گیری و ایجاد فرصت‌های جدید کسب‌وکار بهره ببرید.",
+    image:
+      "/block-media/shadcnblocks/block/photos/marvin-meyer-SYTO3xs06fU-unsplash.jpg",
+    categories: [
+      "اتوماسیون فرآیند",
+      "یادگیری ماشین",
+      "تحلیل داده",
+      "چت‌بات‌ها",
+      "تحلیل پیش‌بینی‌کننده",
+      "راه‌حل‌های AI اختصاصی",
+    ],
+  },
+];
+
+interface Services16Props {
+  className?: string;
+}
+
+const Services16 = ({ className }: Services16Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-start gap-4 md:grid-cols-4">
+          <div className=""></div>
+          <h1 className="col-span-3 text-2xll font-semibold sm:text-2xll md:text-8xl lg:text-9xl">
+            خدمات.
+          </h1>
+        </div>
+        <div className="mt-20">
+          <Accordion type="multiple" defaultValue={["item-0"]}>
+            {services.map((service, index) => (
+              <AccordionItem value={`item-${index}`} key={index}>
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex w-full grid-cols-4 items-center gap-4 sm:grid">
+                    <span className="text-base text-muted-foreground">
+                      {(index + 1).toLocaleString("fa-IR", {
+                        minimumIntegerDigits: 2,
+                      })}
+                    </span>
+                    <h2 className="col-span-3 text-lg font-semibold tracking-tight">
+                      {service.title}
+                    </h2>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="flex grid-cols-4 pt-6 pb-12 sm:grid sm:gap-4">
+                  <div />
+                  <div className="col-span-3 grid gap-10 lg:grid-cols-5">
+                    <div className="flex flex-col gap-4 md:flex-row md:gap-8 lg:col-span-3">
+                      <img
+                        src={service.image}
+                        alt={service.title}
+                        className="aspect-[1.4] w-52 rounded-xl object-cover"
+                      />
+                      <div className="flex flex-col gap-2 sm:gap-3">
+                        <h4 className="text-xl font-medium tracking-tight sm:text-3xl">
+                          {service.title}
+                        </h4>
+                        <p className="text-muted-foreground sm:text-base">
+                          {service.description}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex flex-col gap-4 lg:col-span-2">
+                      <p className="text-xs text-muted-foreground">
+                        دسته‌بندی‌ها
+                      </p>
+                      <div className="flex flex-wrap gap-2">
+                        {service.categories.map((category, index) => (
+                          <Badge key={index}>{category}</Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services16 };
diff --git a/blocks/services18.tsx b/blocks/services18.tsx
new file mode 100644
index 0000000..33a273f
--- /dev/null
+++ b/blocks/services18.tsx
@@ -0,0 +1,119 @@
+import { ArrowUpRight, Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const services = [
+  {
+    title: "طراحی وب",
+    category: "طراحی",
+    image:
+      "/block-media/shadcnblocks/block/photos/tirza-van-dijk-o1SKqmgSDbg-unsplash.jpg",
+  },
+  {
+    title: "بازاریابی دیجیتال",
+    category: "بازاریابی",
+    image:
+      "/block-media/shadcnblocks/block/photos/adem-ay-Tk9m_HP4rgQ-unsplash.jpg",
+  },
+  {
+    title: "توسعه اپلیکیشن",
+    category: "توسعه",
+    image:
+      "/block-media/shadcnblocks/block/photos/marvin-meyer-SYTO3xs06fU-unsplash.jpg",
+  },
+  {
+    title: "تولید محتوا",
+    category: "محتوا",
+    image:
+      "/block-media/shadcnblocks/block/photos/christin-hume-Hcfwew744z4-unsplash.jpg",
+  },
+];
+
+interface Services18Props {
+  className?: string;
+}
+
+const Services18 = ({ className }: Services18Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <span className="size-3 rounded-sm bg-primary" />
+            <p className="tracking-tight">خدمات ما</p>
+          </div>
+          <p className="text-sm">
+            <span className="font-mono">+۳٬۰۰۰</span> پروژه تکمیل‌شده
+          </p>
+        </div>
+        <div className="mt-20 grid grid-cols-1 gap-20 lg:grid-cols-3">
+          <div className="flex flex-col gap-7">
+            <h1 className="text-2xll font-semibold">راه‌حل‌های خلاقانه</h1>
+            <p className="text-lg text-muted-foreground">
+              کسب‌وکار خود را با استراتژی‌های دیجیتال اختصاصی و طراحی
+              تأثیرگذار ارتقا دهید.
+            </p>
+            <Separator />
+            <div className="flex flex-col gap-5 tracking-tight">
+              <div className="flex items-center gap-2.5">
+                <span className="grid size-6 shrink-0 place-items-center rounded-full bg-muted">
+                  <Plus className="size-3.5" />
+                </span>
+                <p className="font-medium">افزایش تعامل و نتایج</p>
+              </div>
+              <div className="flex items-center gap-2.5">
+                <span className="grid size-6 shrink-0 place-items-center rounded-full bg-muted">
+                  <Plus className="size-3.5" />
+                </span>
+                <p className="font-medium">ساخته‌شده برای رشد فردا</p>
+              </div>
+            </div>
+            <Button className="w-fit gap-2" size="lg">
+              شروع کنید
+              <ArrowUpRight className="rtl:rotate-180" />
+            </Button>
+          </div>
+          <div className="col-span-2 space-y-4">
+            {services.map((service, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between rounded-md border bg-muted py-2 ps-2 pe-6 dark:bg-card"
+              >
+                <div className="flex items-center gap-5">
+                  <img
+                    src={service.image}
+                    alt={service.title}
+                    className="h-20 w-32 rounded-sm border object-cover"
+                  />
+                  <div className="flex flex-col">
+                    <h2 className="text-lg font-medium tracking-tight">
+                      {service.title}
+                    </h2>
+                    <p className="tracking-tight text-muted-foreground">
+                      {service.category}
+                    </p>
+                  </div>
+                </div>
+                <div className="hidden items-center gap-1.5 sm:flex">
+                  {Array.from({ length: services.length }).map((_, i) => (
+                    <span
+                      key={i}
+                      className={cn(
+                        "size-2.5 rounded-full",
+                        i <= index ? "bg-primary" : "bg-muted-foreground/20",
+                      )}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services18 };
diff --git a/blocks/services19.tsx b/blocks/services19.tsx
new file mode 100644
index 0000000..cff524c
--- /dev/null
+++ b/blocks/services19.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { motion, useSpring } from "framer-motion";
+import React, { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Services19Props {
+  className?: string;
+}
+
+const Services19 = ({ className }: Services19Props) => {
+  const SPRING = {
+    mass: 0.1,
+    stiffness: 100,
+    damping: 10,
+  };
+
+  const xSpring = useSpring(0, SPRING);
+  const ySpring = useSpring(0, SPRING);
+  const scaleSpring = useSpring(0, SPRING);
+  const opacity = useSpring(0, SPRING);
+
+  const services = [
+    {
+      title: "هویت برند",
+      categories: ["طراحی لوگو", "راهنمای برند"],
+      subcategories: ["هویت بصری", "استراتژی برند"],
+      image: "/block-media/shadcnblocks/block/guri4/img1.png",
+    },
+    {
+      title: "طراحی رابط کاربری/تجربه کاربری",
+      categories: ["رابط کاربری", "تجربه کاربری"],
+      subcategories: ["وایرفریم", "نمونه‌سازی"],
+      image: "/block-media/shadcnblocks/block/guri4/img2.png",
+    },
+    {
+      title: "توسعه وب",
+      categories: ["فرانت‌اند", "بک‌اند"],
+      subcategories: ["طراحی واکنش‌گرا", "یکپارچه‌سازی اتصال هوشمند"],
+      image: "/block-media/shadcnblocks/block/guri4/img3.png",
+    },
+    {
+      title: "بازاریابی دیجیتال",
+      categories: ["بهینه‌سازی سئو", "استراتژی محتوا"],
+      subcategories: ["شبکه‌های اجتماعی", "تحلیل"],
+      image: "/block-media/shadcnblocks/block/guri4/img4.png",
+    },
+    {
+      title: "طراحی گرافیک",
+      categories: ["طراحی چاپ", "دارایی‌های دیجیتال"],
+      subcategories: ["بروشور", "گرافیک شبکه‌های اجتماعی"],
+      image: "/block-media/shadcnblocks/block/guri4/img5.png",
+    },
+    {
+      title: "مشاوره",
+      categories: ["برنامه‌ریزی استراتژیک", "تحلیل کسب‌وکار"],
+      subcategories: ["تحقیق بازار", "تحلیل رقبا"],
+      image: "/block-media/shadcnblocks/block/guri4/img6.png",
+    },
+  ];
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLTableElement>) => {
+    const bounds = e.currentTarget.getBoundingClientRect();
+    xSpring.set(e.clientX - bounds.left + 20);
+    ySpring.set(e.clientY - bounds.top + 20);
+  };
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-center gap-15">
+          <h1 className="text-xl font-medium tracking-tighter lg:text-2xll">
+            خدماتی که{" "}
+            <span className="font-instrumentSerif text-2xll font-normal italic lg:text-2xll">
+              ارائه می‌دهیم
+            </span>
+            <sup className="ps-2 align-top text-sm font-normal tracking-normal">
+              [۰۴]
+            </sup>
+          </h1>
+          <div className="relative w-full">
+            <table
+              onPointerMove={handlePointerMove}
+              onPointerEnter={() => {
+                opacity.set(1);
+                scaleSpring.set(1);
+              }}
+              onPointerLeave={() => {
+                opacity.set(0);
+                scaleSpring.set(0);
+              }}
+              className="w-full"
+            >
+              <tbody>
+                {services.map((service, index) => (
+                  <tr
+                    key={index}
+                    onPointerEnter={() => {
+                      setCurrentIndex(index);
+                    }}
+                    className="group relative cursor-pointer border-b"
+                  >
+                    <td className="py-5">
+                      <h3 className="text-xl font-medium tracking-tight lg:text-xl">
+                        {service.title}
+                      </h3>
+                    </td>
+                    <td className="hidden lg:table-cell">
+                      <div className="w-full max-w-2xs pe-5 text-center text-sm tracking-tighter text-foreground/30 group-hover:text-foreground lg:text-base">
+                        <p>{service.categories[0]}</p>
+                        <p>{service.categories[1]}</p>
+                      </div>
+                    </td>
+                    <td className="text-end text-sm tracking-tighter text-foreground/30 group-hover:text-foreground lg:text-base">
+                      <div>
+                        <p>{service.subcategories[0]}</p>
+                        <p>{service.subcategories[1]}</p>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {/* Cursor-following image */}
+            <motion.div
+              className="pointer-events-none absolute top-0 start-0 hidden size-40 border sm:block"
+              style={{
+                x: xSpring,
+                y: ySpring,
+                opacity: opacity,
+                scale: scaleSpring,
+              }}
+            >
+              <img
+                src={services[currentIndex].image}
+                alt={services[currentIndex].title}
+                className="h-full w-full object-cover"
+              />
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services19 };
diff --git a/blocks/services20.tsx b/blocks/services20.tsx
new file mode 100644
index 0000000..aae176e
--- /dev/null
+++ b/blocks/services20.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { CornerDownLeft, Milestone } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const services = [
+  {
+    id: 1,
+    title: "برندسازی",
+    options: ["طراحی لوگو", "هویت برند", "راهنمای استایل", "پالت رنگ"],
+  },
+  {
+    id: 2,
+    title: "توسعه",
+    options: [
+      "وب‌اپلیکیشن",
+      "اپلیکیشن موبایل",
+      "اتصال هوشمندها",
+      "طراحی پایگاه داده",
+      "DevOps",
+    ],
+  },
+  {
+    id: 3,
+    title: "بازاریابی",
+    options: ["سئو", "شبکه‌های اجتماعی", "استراتژی محتوا", "تحلیل"],
+  },
+  {
+    id: 4,
+    title: "راه‌اندازی",
+    options: ["آزمایش", "استقرار", "پشتیبانی راه‌اندازی", "رفع اشکال"],
+  },
+  {
+    id: 5,
+    title: "پشتیبانی",
+    options: ["پشتیبانی ۲۴/۷", "نگهداری", "به‌روزرسانی", "آموزش"],
+  },
+];
+
+interface Services20Props {
+  className?: string;
+}
+
+const Services20 = ({ className }: Services20Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col justify-between gap-[10vw] lg:flex-row">
+          <h2 className="pt-4 tracking-tight text-foreground/30 md:block">
+            خدماتی که ارائه می‌دهیم
+          </h2>
+          <div className="w-full max-w-3xl px-2">
+            <h1 className="text-3xl font-semibold tracking-tighter md:text-2xll">
+              رویکرد جامع ما برای تحویل نتایج استثنایی از طریق متدولوژی
+              ساختاریافته
+            </h1>
+            <Button variant="ghost" className="mt-6 gap-2 lg:text-base">
+              <CornerDownLeft className="size-5 text-orange-500 rtl:-scale-x-100" />
+              تماس بگیرید
+            </Button>
+          </div>
+        </div>
+        <ul className="mt-20 space-y-2">
+          {services.map((service, index) => (
+            <motion.li
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{
+                type: "spring",
+                stiffness: 100,
+                damping: 20,
+                delay: index * 0.1,
+              }}
+              key={service.id}
+              className="relative flex h-54 w-full flex-col justify-center gap-5 md:h-27 lg:flex-row lg:items-center lg:justify-between"
+            >
+              <div
+                style={{
+                  backgroundImage:
+                    "repeating-linear-gradient(45deg, transparent, transparent 2px, var(--muted) 2px, var(--muted) 4px)",
+                }}
+                className={cn(
+                  "absolute left-1/2 h-54 w-screen -translate-x-1/2 md:h-27",
+                )}
+              ></div>
+
+              <h3 className="relative z-1 text-3xl font-medium tracking-tight md:text-8xl">
+                {service.title}
+              </h3>
+              <div className="relative z-10 flex w-full max-w-xs flex-wrap gap-2">
+                {service.options.map((option, optionIndex) => (
+                  <div
+                    key={optionIndex}
+                    className="flex items-center justify-center gap-3"
+                  >
+                    <Milestone className="size-5 text-muted-foreground" />{" "}
+                    {option}
+                  </div>
+                ))}
+              </div>
+            </motion.li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Services20 };
diff --git a/blocks/services21.tsx b/blocks/services21.tsx
new file mode 100644
index 0000000..b232274
--- /dev/null
+++ b/blocks/services21.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { BorderButton } from "@/components/shadcnblocks/border-button";
+import { cn } from "@/lib/utils";
+
+// Custom hook to get previous value
+const usePrevious = <T,>(value: T): T | undefined => {
+  const [prev, setPrev] = useState<T | undefined>(undefined);
+  const ref = useRef(value);
+
+  useEffect(() => {
+    setPrev(ref.current);
+    ref.current = value;
+  }, [value]);
+
+  return prev;
+};
+
+interface Services21Props {
+  className?: string;
+}
+
+const Services21 = ({ className }: Services21Props) => {
+  const services = [
+    {
+      id: "{۱}",
+      title: "طراحی محصول",
+      image: "/block-media/shadcnblocks/block/guri4/img11.png",
+      description:
+        "با درک اهداف کسب‌وکار، مخاطب هدف و چالش‌های فعلی شما شروع می‌کنیم. این فاز شامل تحقیق، تحلیل و برنامه‌ریزی استراتژیک برای شناسایی فرصت‌هاست.",
+    },
+    {
+      id: "{۲}",
+      title: "طراحی برند",
+      image: "/block-media/shadcnblocks/block/guri3/img25.jpeg",
+      description:
+        "بر اساس یافته‌ها، استراتژی جامعی متناسب با اهداف شما توسعه می‌دهیم. این شامل تعریف رویکرد، زمان‌بندی و نقاط عطف کلیدی برای موفقیت است.",
+    },
+    {
+      id: "{۰۳}",
+      title: "طراحی رابط کاربری/تجربه کاربری",
+      image: "/block-media/shadcnblocks/block/guri4/img10.png",
+      description:
+        "استراتژی را از طریق پیاده‌سازی و توسعه دقیق به واقعیت تبدیل می‌کنیم. تیم ما به‌صورت همکاری کار می‌کند تا هر جزئیات با نیازها و استانداردهای شما هم‌خوان باشد.",
+    },
+    {
+      id: "{۰۴}",
+      title: "برندسازی",
+      image: "/block-media/shadcnblocks/block/guri4/img9.png",
+      description:
+        "عملکرد را به‌طور مستمر پایش و بازخورد جمع‌آوری می‌کنیم تا راه‌حل را پالایش و بهبود دهیم. این فرآیند تکراری موفقیت و رشد بلندمدت را تضمین می‌کند.",
+    },
+    {
+      id: "{۰۵}",
+      title: "بسته‌بندی",
+      image: "/block-media/shadcnblocks/block/guri3/img25.jpeg",
+      description:
+        "راه‌حل‌های بسته‌بندی جامعی می‌سازیم که محصولات شما را محافظت و در عین حال دیده‌شدن برند را تقویت می‌کنند. طراحی‌های ما عملکرد و جذابیت بصری را متعادل می‌کنند تا تعامل مصرف‌کننده را افزایش دهند.",
+    },
+  ];
+
+  const [active, setActive] = useState<number>(0);
+  const previousActive = usePrevious(active);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex w-full flex-col justify-between lg:flex-row lg:gap-20">
+          <div className="top-10 h-fit w-full space-y-7 py-8 lg:sticky lg:max-w-xs">
+            <div className="relative h-90 overflow-hidden">
+              {previousActive !== undefined && (
+                <div className="absolute top-0 h-full w-full">
+                  <img
+                    src={services[previousActive].image}
+                    className="h-full w-full object-cover"
+                    alt={services[previousActive].title}
+                  />
+                </div>
+              )}
+              <motion.div
+                initial={{ clipPath: "inset(0% 0% 0% 100%)" }}
+                animate={{ clipPath: "inset(0% 0% 0% 0%)" }}
+                key={active}
+                transition={{
+                  type: "spring",
+                  stiffness: 150,
+                  damping: 20,
+                }}
+                className="h-full w-full"
+              >
+                <img
+                  src={services[active].image}
+                  className="h-full w-full object-cover"
+                  alt={services[active].title}
+                />
+              </motion.div>
+            </div>
+            <p className="font-semibold tracking-tight text-foreground/20">
+              {services[active].title}
+            </p>
+            <p className="text-base text-foreground/50">
+              {services[active].description}
+            </p>
+          </div>
+          <div className="relative w-full xl:ps-20">
+            <ul>
+              {services.map((service, index) => (
+                <li
+                  key={index}
+                  onMouseEnter={() => setActive(index)}
+                  className={cn(
+                    "cursor-pointer border-b border-foreground/20 py-8 text-2xll font-semibold tracking-tight lg:text-2xll",
+                  )}
+                >
+                  <div
+                    className={index === active ? "opacity-100" : "opacity-20"}
+                  >
+                    <span>{service.title}</span>
+                    <sup className="align-super text-sm text-red-500 lg:text-3xl">
+                      {service.id}
+                    </sup>
+                  </div>
+                </li>
+              ))}
+            </ul>
+            <BorderButton className="group mt-10 gap-2 border-red-100 bg-red-500/10 text-red-500">
+              شروع کنید
+              <ArrowUpRight className="size-4 transition-transform duration-300 rtl:rotate-180 group-hover:rotate-45 rtl:group-hover:-rotate-[135deg]" />
+            </BorderButton>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services21 };
diff --git a/blocks/services3.tsx b/blocks/services3.tsx
new file mode 100644
index 0000000..99ed8c4
--- /dev/null
+++ b/blocks/services3.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { Code, Cog, PenTool, Shrub } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Services3Props {
+  className?: string;
+}
+
+const Services3 = ({ className }: Services3Props) => {
+  const services = [
+    {
+      icon: <Cog className="h-5 w-5" />,
+      title: "استراتژی محصول",
+      items: ["تحقیق بازار", "پرسونای کاربر"],
+    },
+    {
+      icon: <PenTool className="h-5 w-5" />,
+      title: "طراحی",
+      items: ["طراحی رابط کاربری/تجربه کاربری", "نمونه‌سازی", "طراحی تعامل"],
+    },
+    {
+      icon: <Code className="h-5 w-5" />,
+      title: "توسعه وب",
+      items: ["توسعه فرانت‌اند", "توسعه بک‌اند"],
+    },
+    {
+      icon: <Shrub className="h-5 w-5" />,
+      title: "بازاریابی",
+      items: ["استراتژی سئو", "تحلیل و داده", "آزمایش A/B"],
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-2xl space-y-12">
+          <div className="space-y-4">
+            <h2 className="text-start text-xl font-semibold tracking-tight md:text-3xl">
+              خدمات
+            </h2>
+            <p className="text-start text-lg tracking-tight text-muted-foreground md:text-xl">
+              تجربه‌های دیجیتالی خلق می‌کنیم که توجه را جلب و تبدیل را افزایش
+              می‌دهند.
+            </p>
+          </div>
+
+          <div className="space-y-10">
+            {services.map((service, index) => (
+              <div
+                key={index}
+                className="grid grid-cols-3 border-b border-border pb-6"
+              >
+                <div className="flex items-center gap-4">
+                  {service.icon}
+                  <h2 className="text-base font-medium">{service.title}</h2>
+                </div>
+                <div />
+                <div className="item-end flex flex-col gap-1 text-sm text-muted-foreground">
+                  {service.items.map((item, itemIndex) => (
+                    <p key={itemIndex}>{item}</p>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services3 };
diff --git a/blocks/services4.tsx b/blocks/services4.tsx
new file mode 100644
index 0000000..87bcd22
--- /dev/null
+++ b/blocks/services4.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { Code, Cog, PenTool, Shrub } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Services4Props {
+  className?: string;
+}
+
+const Services4 = ({ className }: Services4Props) => {
+  const services = [
+    {
+      icon: <Cog className="h-6 w-6" />,
+      title: "استراتژی محصول",
+      description:
+        "برنامه‌ریزی استراتژیک و جایگاه‌یابی در بازار تا محصول شما نیازهای کاربر و اهداف کسب‌وکار را برآورده کند.",
+      items: ["تحقیق بازار", "پرسونای کاربر", "تحلیل رقبا"],
+    },
+    {
+      icon: <PenTool className="h-6 w-6" />,
+      title: "طراحی",
+      description:
+        "طراحی‌های زیبا و کاربرمحور که تجربه‌های جذاب در تمام پلتفرم‌ها خلق می‌کنند.",
+      items: ["طراحی رابط کاربری/تجربه کاربری", "نمونه‌سازی", "طراحی تعامل"],
+    },
+    {
+      icon: <Code className="h-6 w-6" />,
+      title: "توسعه وب",
+      description:
+        "وب‌اپلیکیشن‌های مدرن و مقیاس‌پذیر با جدیدترین فناوری‌ها و بهترین روش‌ها.",
+      items: ["توسعه فرانت‌اند", "توسعه بک‌اند", "یکپارچه‌سازی اتصال هوشمند"],
+    },
+    {
+      icon: <Shrub className="h-6 w-6" />,
+      title: "بازاریابی",
+      description:
+        "استراتژی‌های مبتنی بر داده برای راه‌اندازی موفق و مقیاس‌دهی کارآمد محصول.",
+      items: ["استراتژی سئو", "تحلیل و داده", "آزمایش A/B"],
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl space-y-12">
+          <div className="space-y-4 text-center">
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
+              خدمات
+            </h2>
+            <p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground md:text-xl">
+              تجربه‌های دیجیتالی خلق می‌کنیم که توجه را جلب و تبدیل را افزایش
+              می‌دهند و چشم‌انداز شما را به واقعیت تبدیل می‌کنند.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            {services.map((service, index) => (
+              <div
+                key={index}
+                className="space-y-6 rounded-lg border border-border p-8 transition-shadow hover:shadow-sm"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="rounded-full bg-muted p-3">
+                    {service.icon}
+                  </div>
+                  <h3 className="text-xl font-semibold">{service.title}</h3>
+                </div>
+                <p className="leading-relaxed text-muted-foreground">
+                  {service.description}
+                </p>
+                <div className="space-y-2">
+                  {service.items.map((item, itemIndex) => (
+                    <div key={itemIndex} className="flex items-center gap-2">
+                      <div className="h-1.5 w-1.5 rounded-full bg-foreground" />
+                      <span className="text-sm font-medium">{item}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services4 };
diff --git a/blocks/services5.tsx b/blocks/services5.tsx
new file mode 100644
index 0000000..dfaf9d2
--- /dev/null
+++ b/blocks/services5.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { Code, Cog, PenTool, Shrub } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Services5Props {
+  className?: string;
+}
+
+const Services5 = ({ className }: Services5Props) => {
+  const services = [
+    {
+      icon: <Cog className="h-6 w-6" />,
+      title: "استراتژی محصول",
+      description:
+        "تحلیل جامع بازار و برنامه‌ریزی استراتژیک برای موقعیت‌یابی محصول شما در بازارهای رقابتی.",
+      items: [
+        "تحقیق بازار",
+        "پرسونای کاربر",
+        "تحلیل رقبا",
+        "نقشه راه محصول",
+      ],
+    },
+    {
+      icon: <PenTool className="h-6 w-6" />,
+      title: "طراحی",
+      description:
+        "راه‌حل‌های طراحی کاربرمحور که تجربه‌های شهودی و جذاب در تمام نقاط تماس دیجیتال خلق می‌کنند.",
+      items: ["طراحی رابط کاربری/تجربه کاربری", "نمونه‌سازی", "سیستم‌های طراحی", "آزمایش کاربر"],
+    },
+    {
+      icon: <Code className="h-6 w-6" />,
+      title: "توسعه وب",
+      description:
+        "وب‌اپلیکیشن‌های مدرن و مقیاس‌پذیر با پیشرفته‌ترین فناوری‌ها و بهترین روش‌های توسعه.",
+      items: [
+        "توسعه فرانت‌اند",
+        "توسعه بک‌اند",
+        "یکپارچه‌سازی اتصال هوشمند",
+        "بهینه‌سازی عملکرد",
+      ],
+    },
+    {
+      icon: <Shrub className="h-6 w-6" />,
+      title: "بازاریابی",
+      description:
+        "خدمات بازاریابی و بهینه‌سازی استراتژیک برای راه‌اندازی و مقیاس‌دهی موفق محصولات دیجیتال.",
+      items: [
+        "استراتژی سئو",
+        "راه‌اندازی تحلیل",
+        "آزمایش A/B",
+        "بازاریابی رشد",
+      ],
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl space-y-16">
+          <div className="space-y-4 text-center">
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
+              خدمات
+            </h2>
+            <p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground md:text-xl">
+              راه‌حل‌های دیجیتال جامع برای رشد کسب‌وکار شما در بازار امروز.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            {services.map((service, index) => (
+              <div key={index} className="space-y-6 rounded-xl bg-muted p-8">
+                <div className="flex items-start gap-4">
+                  <div className="rounded-lg border border-border bg-background p-2">
+                    {service.icon}
+                  </div>
+                  <div className="space-y-2">
+                    <h3 className="text-xl font-semibold">{service.title}</h3>
+                    <p className="text-sm leading-relaxed text-muted-foreground">
+                      {service.description}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold tracking-wide text-muted-foreground">
+                    موارد شامل
+                  </h4>
+                  <div className="grid grid-cols-2 gap-2">
+                    {service.items.map((item, itemIndex) => (
+                      <div key={itemIndex} className="flex items-center gap-2">
+                        <div className="h-1 w-1 rounded-full bg-foreground" />
+                        <span className="text-sm">{item}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services5 };
diff --git a/blocks/services6.tsx b/blocks/services6.tsx
new file mode 100644
index 0000000..12ce3c5
--- /dev/null
+++ b/blocks/services6.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { Code, Cog, PenTool, Shrub } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Services6Props {
+  className?: string;
+}
+
+const Services6 = ({ className }: Services6Props) => {
+  const services = [
+    {
+      icon: <Cog className="h-8 w-8" />,
+      title: "استراتژی محصول",
+      description:
+        "از تحقیق بازار تا پرسونای کاربر، به ساخت محصولاتی که اهمیت دارند کمک می‌کنیم.",
+      items: ["تحقیق بازار", "پرسونای کاربر"],
+    },
+    {
+      icon: <PenTool className="h-8 w-8" />,
+      title: "طراحی",
+      description:
+        "طراحی‌های زیبا و کاربردی که تجربه‌های به‌یادماندنی برای کاربر خلق می‌کنند.",
+      items: ["طراحی رابط کاربری/تجربه کاربری", "نمونه‌سازی", "طراحی تعامل"],
+    },
+    {
+      icon: <Code className="h-8 w-8" />,
+      title: "توسعه وب",
+      description:
+        "اپلیکیشن‌های پایدار و مقیاس‌پذیر با فناوری‌ها و فریم‌ورک‌های مدرن.",
+      items: ["توسعه فرانت‌اند", "توسعه بک‌اند"],
+    },
+    {
+      icon: <Shrub className="h-8 w-8" />,
+      title: "بازاریابی",
+      description:
+        "ابتکارات رشد استراتژیک برای مقیاس‌دهی محصول و بیشینه‌سازی تأثیر.",
+      items: ["استراتژی سئو", "تحلیل و داده", "آزمایش A/B"],
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl space-y-16">
+          <div className="space-y-4 text-center">
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
+              خدمات
+            </h2>
+            <p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground md:text-xl">
+              راه‌حل‌های دیجیتال جامع ارائه می‌دهیم که نتیجه می‌دهند و از
+              انتظارات فراتر می‌روند.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+            {services.map((service, index) => (
+              <div key={index} className="group space-y-6 text-center">
+                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-muted transition-colors group-hover:bg-foreground group-hover:text-background">
+                  {service.icon}
+                </div>
+                <div className="space-y-3">
+                  <h3 className="text-lg font-semibold">{service.title}</h3>
+                  <p className="text-sm leading-relaxed text-muted-foreground">
+                    {service.description}
+                  </p>
+                </div>
+                <div className="space-y-2">
+                  {service.items.map((item, itemIndex) => (
+                    <div
+                      key={itemIndex}
+                      className="text-xs font-medium text-muted-foreground"
+                    >
+                      {item}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services6 };
diff --git a/blocks/services7.tsx b/blocks/services7.tsx
new file mode 100644
index 0000000..3e47016
--- /dev/null
+++ b/blocks/services7.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { Code, Cog, PenTool, Shrub } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Services7Props {
+  className?: string;
+}
+
+const Services7 = ({ className }: Services7Props) => {
+  const services = [
+    {
+      icon: <Cog className="h-6 w-6" />,
+      title: "استراتژی محصول",
+      description:
+        "از تحقیق بازار تا پرسونای کاربر، به ساخت محصولاتی که اهمیت دارند کمک می‌کنیم.",
+      items: ["تحقیق بازار", "پرسونای کاربر"],
+    },
+    {
+      icon: <PenTool className="h-6 w-6" />,
+      title: "طراحی",
+      description:
+        "طراحی‌های زیبا و کاربردی که تجربه‌های به‌یادماندنی برای کاربر خلق می‌کنند.",
+      items: ["طراحی رابط کاربری/تجربه کاربری", "نمونه‌سازی", "طراحی تعامل"],
+    },
+    {
+      icon: <Code className="h-6 w-6" />,
+      title: "توسعه وب",
+      description:
+        "اپلیکیشن‌های پایدار و مقیاس‌پذیر با فناوری‌ها و فریم‌ورک‌های مدرن.",
+      items: ["توسعه فرانت‌اند", "توسعه بک‌اند"],
+    },
+    {
+      icon: <Shrub className="h-6 w-6" />,
+      title: "بازاریابی",
+      description:
+        "ابتکارات رشد استراتژیک برای مقیاس‌دهی محصول و بیشینه‌سازی تأثیر.",
+      items: ["استراتژی سئو", "تحلیل و داده", "آزمایش A/B"],
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-4xl space-y-16">
+          <div className="space-y-4 text-center">
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
+              خدمات
+            </h2>
+            <p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground md:text-xl">
+              راه‌حل‌های جامع برای تحقق چشم‌انداز دیجیتال شما.
+            </p>
+          </div>
+
+          <div className="space-y-6">
+            {services.map((service, index) => (
+              <div
+                key={index}
+                className="flex flex-col items-start gap-6 rounded-lg border border-border p-6 transition-shadow hover:shadow-sm md:flex-row"
+              >
+                <div className="flex-shrink-0">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
+                    {service.icon}
+                  </div>
+                </div>
+                <div className="flex-1 space-y-3">
+                  <h3 className="text-xl font-semibold">{service.title}</h3>
+                  <p className="leading-relaxed text-muted-foreground">
+                    {service.description}
+                  </p>
+                  <div className="flex flex-wrap gap-2">
+                    {service.items.map((item, itemIndex) => (
+                      <span
+                        key={itemIndex}
+                        className="inline-flex items-center rounded-full bg-muted px-3 py-1 text-xs font-medium"
+                      >
+                        {item}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services7 };
diff --git a/blocks/services8.tsx b/blocks/services8.tsx
new file mode 100644
index 0000000..d3aec41
--- /dev/null
+++ b/blocks/services8.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import { Code, Cog, PenTool, Shrub } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+interface Services8Props {
+  className?: string;
+}
+
+const Services8 = ({ className }: Services8Props) => {
+  const services = [
+    {
+      icon: <Cog className="h-5 w-5" />,
+      title: "استراتژی محصول",
+      shortDescription: "برنامه‌ریزی استراتژیک و جایگاه‌یابی در بازار",
+      description:
+        "از تحقیق بازار تا پرسونای کاربر، به ساخت محصولاتی که اهمیت دارند کمک می‌کنیم. رویکرد استراتژیک ما تضمین می‌کند محصول شما نیازهای واقعی کاربران را برآورده کند.",
+      items: [
+        "تحقیق بازار",
+        "پرسونای کاربر",
+        "تحلیل رقبا",
+        "نقشه راه محصول",
+      ],
+      deliverables: [
+        "سند استراتژی",
+        "پروفایل پرسونای کاربر",
+        "گزارش تحلیل بازار",
+      ],
+    },
+    {
+      icon: <PenTool className="h-5 w-5" />,
+      title: "طراحی",
+      shortDescription: "راه‌حل‌های طراحی کاربرمحور",
+      description:
+        "طراحی‌های زیبا و کاربردی که تجربه‌های به‌یادماندنی برای کاربر خلق می‌کنند. بر زیبایی‌شناسی و کاربردپذیری تمرکز می‌کنیم تا طراحی‌هایی بسازیم که تبدیل ایجاد کنند.",
+      items: [
+        "طراحی رابط کاربری/تجربه کاربری",
+        "نمونه‌سازی",
+        "طراحی تعامل",
+        "سیستم‌های طراحی",
+      ],
+      deliverables: ["سیستم طراحی", "نمونه‌های تعاملی", "موکاپ رابط کاربری/تجربه کاربری"],
+    },
+    {
+      icon: <Code className="h-5 w-5" />,
+      title: "توسعه وب",
+      shortDescription: "اپلیکیشن‌های مدرن و مقیاس‌پذیر",
+      description:
+        "اپلیکیشن‌های پایدار و مقیاس‌پذیر با فناوری‌ها و فریم‌ورک‌های مدرن. تضمین می‌کنیم اپلیکیشن شما سریع، امن و قابل نگهداری باشد.",
+      items: [
+        "توسعه فرانت‌اند",
+        "توسعه بک‌اند",
+        "یکپارچه‌سازی اتصال هوشمند",
+        "بهینه‌سازی عملکرد",
+      ],
+      deliverables: ["کد منبع", "مستندات", "راهنمای استقرار"],
+    },
+    {
+      icon: <Shrub className="h-5 w-5" />,
+      title: "بازاریابی",
+      shortDescription: "استراتژی‌های رشد و بهینه‌سازی",
+      description:
+        "ابتکارات رشد استراتژیک برای مقیاس‌دهی محصول و بیشینه‌سازی تأثیر. از رویکردهای مبتنی بر داده برای بهینه‌سازی تلاش‌های بازاریابی استفاده می‌کنیم.",
+      items: [
+        "استراتژی سئو",
+        "تحلیل و داده",
+        "آزمایش A/B",
+        "بازاریابی محتوا",
+      ],
+      deliverables: [
+        "برنامه بازاریابی",
+        "راه‌اندازی تحلیل",
+        "گزارش‌های عملکرد",
+      ],
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl space-y-16">
+          <div className="space-y-4 text-center">
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
+              خدمات
+            </h2>
+            <p className="text-lg tracking-tight text-muted-foreground md:text-xl">
+              برای اطلاعات بیشتر روی هر خدمت کلیک کنید.
+            </p>
+          </div>
+
+          <Accordion
+            type="single"
+            collapsible
+            defaultValue="item-0"
+            className="space-y-4"
+          >
+            {services.map((service, index) => (
+              <AccordionItem
+                key={index}
+                value={`item-${index}`}
+                className="rounded-lg border border-border last:border-b"
+              >
+                <AccordionTrigger className="px-6 py-6 hover:bg-muted/50 hover:no-underline">
+                  <div className="flex items-center gap-4">
+                    {service.icon}
+                    <div className="text-start">
+                      <h3 className="text-lg font-semibold">{service.title}</h3>
+                      <p className="text-sm text-muted-foreground">
+                        {service.shortDescription}
+                      </p>
+                    </div>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="space-y-6 border-t border-b border-border bg-muted/20 p-6">
+                  <p className="leading-relaxed text-muted-foreground">
+                    {service.description}
+                  </p>
+
+                  <div className="grid gap-6 md:grid-cols-2">
+                    <div>
+                      <h4 className="mb-3 font-medium">موارد شامل:</h4>
+                      <ul className="space-y-1">
+                        {service.items.map((item, itemIndex) => (
+                          <li
+                            key={itemIndex}
+                            className="flex items-center gap-2 text-sm"
+                          >
+                            <div className="h-1 w-1 rounded-full bg-foreground" />
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    <div>
+                      <h4 className="mb-3 font-medium">خروجی‌ها:</h4>
+                      <ul className="space-y-1">
+                        {service.deliverables.map((deliverable, delivIndex) => (
+                          <li
+                            key={delivIndex}
+                            className="flex items-center gap-2 text-sm"
+                          >
+                            <div className="h-1 w-1 rounded-full bg-foreground" />
+                            {deliverable}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services8 };
diff --git a/blocks/services9.tsx b/blocks/services9.tsx
new file mode 100644
index 0000000..6f73569
--- /dev/null
+++ b/blocks/services9.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { ArrowRight, Code, Cog, PenTool, Shrub } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Services9Props {
+  className?: string;
+}
+
+const Services9 = ({ className }: Services9Props) => {
+  const services = [
+    {
+      icon: <Cog className="h-6 w-6" />,
+      title: "استراتژی محصول",
+      description:
+        "از تحقیق بازار تا پرسونای کاربر، به ساخت محصولاتی که اهمیت دارند کمک می‌کنیم.",
+      items: ["تحقیق بازار", "پرسونای کاربر"],
+      duration: "۲ تا ۴ هفته",
+      price: "از ۵٬۰۰۰ دلار",
+    },
+    {
+      icon: <PenTool className="h-6 w-6" />,
+      title: "طراحی",
+      description:
+        "طراحی‌های زیبا و کاربردی که تجربه‌های به‌یادماندنی برای کاربر خلق می‌کنند.",
+      items: ["طراحی رابط کاربری/تجربه کاربری", "نمونه‌سازی", "طراحی تعامل"],
+      duration: "۳ تا ۶ هفته",
+      price: "از ۸٬۰۰۰ دلار",
+    },
+    {
+      icon: <Code className="h-6 w-6" />,
+      title: "توسعه وب",
+      description:
+        "اپلیکیشن‌های پایدار و مقیاس‌پذیر با فناوری‌ها و فریم‌ورک‌های مدرن.",
+      items: ["توسعه فرانت‌اند", "توسعه بک‌اند"],
+      duration: "۶ تا ۱۲ هفته",
+      price: "از ۱۵٬۰۰۰ دلار",
+    },
+    {
+      icon: <Shrub className="h-6 w-6" />,
+      title: "بازاریابی",
+      description:
+        "ابتکارات رشد استراتژیک برای مقیاس‌دهی محصول و بیشینه‌سازی تأثیر.",
+      items: ["استراتژی سئو", "تحلیل و داده", "آزمایش A/B"],
+      duration: "مداوم",
+      price: "از ۳٬۰۰۰ دلار در ماه",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-6xl space-y-16">
+          <div className="space-y-4 text-center">
+            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
+              خدمات
+            </h2>
+            <p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground md:text-xl">
+              قیمت‌گذاری شفاف برای راه‌حل‌های دیجیتال در سطح جهانی، متناسب با
+              نیازهای شما.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+            {services.map((service, index) => (
+              <div
+                key={index}
+                className="flex flex-col rounded-xl border border-border p-8 transition-shadow hover:shadow-lg"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="rounded-lg bg-muted p-2">
+                      {service.icon}
+                    </div>
+                    <h3 className="text-xl font-semibold">{service.title}</h3>
+                  </div>
+                  <div className="text-end">
+                    <div className="text-sm text-muted-foreground">
+                      مدت زمان
+                    </div>
+                    <div className="text-sm font-medium">
+                      {service.duration}
+                    </div>
+                  </div>
+                </div>
+
+                <p className="mt-6 leading-relaxed text-muted-foreground">
+                  {service.description}
+                </p>
+
+                <div className="mt-6 flex-1 space-y-2">
+                  <div className="text-sm font-medium text-muted-foreground">
+                    موارد شامل:
+                  </div>
+                  <ul className="space-y-1">
+                    {service.items.map((item, itemIndex) => (
+                      <li
+                        key={itemIndex}
+                        className="flex items-center gap-2 text-sm"
+                      >
+                        <div className="h-1 w-1 rounded-full bg-foreground" />
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="mt-6 border-t border-border pt-6">
+                  <div className="flex items-center justify-between">
+                    <div className="text-lg font-semibold">{service.price}</div>
+                    <Button size="sm" variant="outline">
+                      شروع کنید
+                      <ArrowRight className="h-3 w-3 rtl:rotate-180" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Services9 };
diff --git a/blocks/settings-integrations1.tsx b/blocks/settings-integrations1.tsx
new file mode 100644
index 0000000..547075d
--- /dev/null
+++ b/blocks/settings-integrations1.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { Filter, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  category: string;
+  className?: string;
+}
+
+interface IntegrationCardProps {
+  integration: IntegrationItem;
+  className?: string;
+}
+
+const IntegrationCard = ({ integration, className }: IntegrationCardProps) => {
+  return (
+    <div
+      className={cn(
+        "flex cursor-pointer items-center gap-3 rounded-xl border p-3 hover:shadow-md",
+        className,
+      )}
+    >
+      <img
+        src={integration.image}
+        alt={integration.title}
+        className={cn("size-8", integration.className)}
+      />
+      <div className="space-y-1 text-sm">
+        <p>{integration.title}</p>
+        <p className="text-xs">{integration.category}</p>
+      </div>
+    </div>
+  );
+};
+
+interface SettingsIntegrations1Props {
+  className?: string;
+  heading?: string;
+  subHeading?: string;
+  title?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations1 = ({
+  className,
+  heading = "یکپارچه‌سازی‌ها",
+  subHeading = "به‌سادگی با اپلیکیشن‌ها و سرویس‌های محبوبتان متصل شوید.",
+  title = "مرور یکپارچه‌سازی‌ها",
+  integrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      category: "ارتباطات",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/drive.svg",
+      title: "فضای ابری",
+      category: "ذخیره‌سازی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      category: "بهره‌وری",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/jira.svg",
+      title: "Jira",
+      category: "مدیریت پروژه",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/asana.svg",
+      title: "Asana",
+      category: "مدیریت پروژه",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+      title: "Dropbox",
+      category: "ذخیره‌سازی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      category: "طراحی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      category: "توسعه",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/payment-methods/stripe.svg",
+      title: "Stripe",
+      category: "پرداخت",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/confluence.svg",
+      title: "Confluence",
+      category: "بهره‌وری",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/monday.svg",
+      title: "Monday",
+      category: "مدیریت پروژه",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/excel.svg",
+      title: "Excel",
+      category: "بهره‌وری",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      title: "Vercel",
+      category: "توسعه",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/retool.svg",
+      title: "Retool",
+      category: "توسعه",
+      className: "dark:invert",
+    },
+  ],
+}: SettingsIntegrations1Props) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+
+  const categories = useMemo(() => {
+    return [...new Set(integrations.map((i) => i.category))];
+  }, [integrations]);
+
+  const filteredIntegrations = useMemo(() => {
+    return integrations.filter((integration) => {
+      const matchesSearch = integration.title
+        .toLowerCase()
+        .includes(searchValue.toLowerCase());
+      const matchesCategory =
+        selectedCategories.length === 0 ||
+        selectedCategories.includes(integration.category);
+      return matchesSearch && matchesCategory;
+    });
+  }, [integrations, searchValue, selectedCategories]);
+
+  const toggleCategory = (category: string) => {
+    setSelectedCategories((prev) =>
+      prev.includes(category)
+        ? prev.filter((c) => c !== category)
+        : [...prev, category],
+    );
+  };
+
+  return (
+    <section className="py-32">
+      <div className="container max-w-4xl">
+        <div className={cn("flex flex-col", className)}>
+          <div className="space-y-2 border-b pb-6">
+            <h3 className="text-xl font-semibold tracking-tight">{heading}</h3>
+            <p className="text-sm font-medium text-muted-foreground">
+              {subHeading}
+            </p>
+          </div>
+          <div className="mt-6 space-y-4">
+            <p className="text-lg font-semibold tracking-tight">{title}</p>
+            <div className="flex items-center gap-4">
+              <div className="relative w-full">
+                <Search className="absolute top-1/2 start-2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="جستجو"
+                  className="ps-7"
+                  value={searchValue}
+                  onChange={(e) => setSearchValue(e.target.value)}
+                />
+              </div>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">
+                    <Filter
+                      className={cn(
+                        "size-3",
+                        selectedCategories.length > 0 && "fill-primary",
+                      )}
+                    />
+                    فیلتر
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="end" className="w-56">
+                  <div className="space-y-3">
+                    <p className="text-sm font-medium">دسته‌بندی‌ها</p>
+                    <div className="space-y-2">
+                      {categories.map((category) => (
+                        <Label
+                          key={category}
+                          className="cursor-pointer font-normal"
+                        >
+                          <Checkbox
+                            checked={selectedCategories.includes(category)}
+                            onCheckedChange={() => toggleCategory(category)}
+                          />
+                          <span className="text-sm">{category}</span>
+                        </Label>
+                      ))}
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {filteredIntegrations.length > 0 ? (
+                filteredIntegrations.map((integration, i) => {
+                  return (
+                    <IntegrationCard
+                      key={`integration-${i}-${integration.title}`}
+                      integration={integration}
+                    />
+                  );
+                })
+              ) : (
+                <p className="text-sm">یکپارچه‌سازی‌ای یافت نشد</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations1 };
diff --git a/blocks/settings-integrations2.tsx b/blocks/settings-integrations2.tsx
new file mode 100644
index 0000000..4e90620
--- /dev/null
+++ b/blocks/settings-integrations2.tsx
@@ -0,0 +1,219 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  isConnected?: boolean;
+  link: string;
+  className?: string;
+}
+
+interface CtaText {
+  title: string;
+  ctaText: string;
+  ctaLink: string;
+}
+
+interface SettingsIntegrations2Props {
+  heading?: string;
+  description?: CtaText[];
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations2 = ({
+  heading = "یکپارچه‌سازی‌ها",
+  description = [
+    {
+      title:
+        "با اتصال اپلیکیشن‌ها و سرویس‌های محبوبتان، گردش کار خود را بهبود دهید.",
+      ctaText: "بیشتر بدانید",
+      ctaLink: "https://ShadcnBlocks",
+    },
+    {
+      title: "سؤالی درباره راه‌اندازی یکپارچه‌سازی‌ها دارید؟",
+      ctaText: "صحبت با فروش",
+      ctaLink: "https://ShadcnBlocks",
+    },
+  ],
+  integrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌ها و به‌روزرسانی‌ها را به کانال‌های تیم ارسال کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/drive.svg",
+      title: "فضای ابری",
+      description: "به فایل‌های فضای ابری دسترسی داشته باشید و آن‌ها را همگام‌سازی کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      description: "صفحات و پایگاه‌های داده فضای کاری را همگام‌سازی کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/jira.svg",
+      title: "Jira",
+      description: "مسائل را پیگیری کنید و پروژه‌های چابک خود را مدیریت کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/asana.svg",
+      title: "Asana",
+      description: "وظایف را مدیریت کنید و با تیم همکاری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+      title: "Dropbox",
+      description: "فایل‌ها را به‌صورت امن در فضای ابری ذخیره و به اشتراک بگذارید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "طرح‌ها را وارد کنید و روی نمونه‌ها همکاری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "مخازن را متصل کنید و گردش کارها را خودکار کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/payment-methods/stripe.svg",
+      title: "Stripe",
+      description: "پرداخت‌ها را پردازش کنید و اشتراک‌ها را مدیریت کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/confluence.svg",
+      title: "Confluence",
+      description: "مستندات تیم را ایجاد و به اشتراک بگذارید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/monday.svg",
+      title: "Monday",
+      description: "گردش کارها را ساماندهی کنید و پیشرفت پروژه را پیگیری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/excel.svg",
+      title: "Excel",
+      description: "داده‌های جدول را به‌راحتی وارد و صادر کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      title: "Vercel",
+      description: "اپلیکیشن‌های وب را مستقر کنید و پیش‌نمایش بگیرید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/retool.svg",
+      title: "Retool",
+      description: "ابزارها و داشبوردهای داخلی سفارشی بسازید.",
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+  ],
+}: SettingsIntegrations2Props) => {
+  return (
+    <section className="py-32">
+      <div className="container max-w-4xl">
+        <div className="flex flex-col gap-3">
+          <p className="text-xl font-semibold tracking-tight sm:text-xl">
+            {heading}
+          </p>
+          <div className="space-y-1 sm:space-y-0">
+            {description.map((item, i) => {
+              return (
+                <p
+                  key={`description-${i}`}
+                  className="flex flex-wrap items-center gap-1 gap-y-0 text-xs text-muted-foreground sm:text-sm sm:leading-tight"
+                >
+                  {item.title}
+                  <a href={item.ctaLink} className="underline">
+                    {item.ctaText}
+                  </a>
+                </p>
+              );
+            })}
+          </div>
+          <ul className="mt-8">
+            {integrations.map((integration, i) => {
+              return (
+                <li
+                  key={`integration-${i}-${integration.title}`}
+                  className="border-t last:border-b"
+                >
+                  <a
+                    href={integration.link}
+                    className="group flex cursor-pointer items-center gap-4 py-6 hover:bg-muted/50 sm:px-2"
+                  >
+                    <img
+                      src={integration.image}
+                      alt={integration.title}
+                      className={cn("size-6", integration.className)}
+                    />
+                    <div className="flex-1 text-sm">
+                      <p className="font-medium">{integration.title}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {integration.description}
+                      </p>
+                    </div>
+                    {integration.isConnected ? (
+                      <div>
+                        <Badge className="bg-green-100 text-green-800">
+                          متصل
+                        </Badge>
+                      </div>
+                    ) : (
+                      <div className="opacity-0 group-hover:opacity-100">
+                        <ArrowRight className="size-5 text-muted-foreground rtl:rotate-180" />
+                      </div>
+                    )}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations2 };
diff --git a/blocks/settings-integrations3.tsx b/blocks/settings-integrations3.tsx
new file mode 100644
index 0000000..ec28ba5
--- /dev/null
+++ b/blocks/settings-integrations3.tsx
@@ -0,0 +1,207 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  isConnected?: boolean;
+  link: string;
+  className?: string;
+}
+
+interface IntegrationCardProps {
+  integration: IntegrationItem;
+}
+
+const IntegrationCard = ({ integration }: IntegrationCardProps) => {
+  return (
+    <a
+      href={integration.link}
+      className="group flex cursor-pointer flex-col gap-4 rounded-lg border p-4 hover:bg-muted/30 hover:shadow-md"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <img
+          src={integration.image}
+          alt={integration.title}
+          className={cn("size-10 sm:size-16", integration.className)}
+        />
+        {integration.isConnected ? (
+          <div>
+            <Badge className="bg-green-100 text-green-800">متصل</Badge>
+          </div>
+        ) : (
+          <div className="opacity-0 group-hover:opacity-100">
+            <ArrowRight className="size-5 text-muted-foreground rtl:rotate-180" />
+          </div>
+        )}
+      </div>
+      <div className="flex-1 text-base">
+        <p className="font-medium">{integration.title}</p>
+        <p className="text-sm text-muted-foreground">
+          {integration.description}
+        </p>
+      </div>
+    </a>
+  );
+};
+
+interface IntegrationListProps {
+  integrations: IntegrationItem[];
+}
+
+const IntegrationList = ({ integrations }: IntegrationListProps) => {
+  return (
+    <ul className="mt-8 grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+      {integrations.map((integration, i) => {
+        return (
+          <li key={`integration-${i}-${integration.title}`}>
+            <IntegrationCard integration={integration} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+interface SettingsIntegrations3Props {
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations3 = ({
+  heading = "ابزارهای محبوبتان را متصل کنید",
+  subHeading = "با یکپارچه‌سازی‌های محبوب، ارسال‌های فرم را همگام کنید و در وقت صرفه‌جویی کنید.",
+  integrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌ها و به‌روزرسانی‌ها را به کانال‌های تیم ارسال کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/drive.svg",
+      title: "فضای ابری",
+      description: "به فایل‌های فضای ابری دسترسی داشته باشید و آن‌ها را همگام‌سازی کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      description: "صفحات و پایگاه‌های داده فضای کاری را همگام‌سازی کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/jira.svg",
+      title: "Jira",
+      description: "مسائل را پیگیری کنید و پروژه‌های چابک خود را مدیریت کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/asana.svg",
+      title: "Asana",
+      description: "وظایف را مدیریت کنید و با تیم همکاری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+      title: "Dropbox",
+      description: "فایل‌ها را به‌صورت امن در فضای ابری ذخیره و به اشتراک بگذارید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "طرح‌ها را وارد کنید و روی نمونه‌ها همکاری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "مخازن را متصل کنید و گردش کارها را خودکار کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/payment-methods/stripe.svg",
+      title: "Stripe",
+      description: "پرداخت‌ها را پردازش کنید و اشتراک‌ها را مدیریت کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/confluence.svg",
+      title: "Confluence",
+      description: "مستندات تیم را ایجاد و به اشتراک بگذارید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/monday.svg",
+      title: "Monday",
+      description: "گردش کارها را ساماندهی کنید و پیشرفت پروژه را پیگیری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/excel.svg",
+      title: "Excel",
+      description: "داده‌های جدول را به‌راحتی وارد و صادر کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      title: "Vercel",
+      description: "اپلیکیشن‌های وب را مستقر کنید و پیش‌نمایش بگیرید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/retool.svg",
+      title: "Retool",
+      description: "ابزارها و داشبوردهای داخلی سفارشی بسازید.",
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+  ],
+}: SettingsIntegrations3Props) => {
+  return (
+    <section className="py-32">
+      <div className="container max-w-5xl">
+        <div className="flex flex-col gap-3">
+          <p className="text-xl font-semibold tracking-tight sm:text-3xl">
+            {heading}
+          </p>
+          <p className="text-lg font-medium text-muted-foreground">
+            {subHeading}
+          </p>
+
+          <IntegrationList integrations={integrations} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations3 };
diff --git a/blocks/settings-integrations3a.tsx b/blocks/settings-integrations3a.tsx
new file mode 100644
index 0000000..a758fa4
--- /dev/null
+++ b/blocks/settings-integrations3a.tsx
@@ -0,0 +1,210 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  isConnected?: boolean;
+  link: string;
+  className?: string;
+}
+
+interface IntegrationCardProps {
+  integration: IntegrationItem;
+}
+
+const IntegrationCard = ({ integration }: IntegrationCardProps) => {
+  return (
+    <a
+      href={integration.link}
+      className="group flex h-full cursor-pointer flex-col gap-4 p-4 hover:bg-muted/50"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <img
+          src={integration.image}
+          alt={integration.title}
+          className={cn("size-10 sm:size-16", integration.className)}
+        />
+        {integration.isConnected ? (
+          <div>
+            <Badge className="bg-green-100 text-green-800">متصل</Badge>
+          </div>
+        ) : (
+          <div className="opacity-0 group-hover:opacity-100">
+            <ArrowRight className="size-5 text-muted-foreground rtl:rotate-180" />
+          </div>
+        )}
+      </div>
+      <div className="flex-1 text-base">
+        <p className="font-medium">{integration.title}</p>
+        <p className="text-sm text-muted-foreground">
+          {integration.description}
+        </p>
+      </div>
+    </a>
+  );
+};
+
+interface IntegrationListProps {
+  integrations: IntegrationItem[];
+}
+
+const IntegrationList = ({ integrations }: IntegrationListProps) => {
+  return (
+    <ul className="mt-8 grid gap-px bg-muted sm:grid-cols-2 md:grid-cols-3">
+      {integrations.map((integration, i) => {
+        return (
+          <li
+            key={`integration-${i}-${integration.title}`}
+            className="bg-background"
+          >
+            <IntegrationCard integration={integration} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+interface SettingsIntegrations3aProps {
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations3a = ({
+  heading = "ابزارهای محبوبتان را متصل کنید",
+  subHeading = "با یکپارچه‌سازی‌های محبوب، ارسال‌های فرم را همگام کنید و در وقت صرفه‌جویی کنید.",
+  integrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌ها و به‌روزرسانی‌ها را به کانال‌های تیم ارسال کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/drive.svg",
+      title: "فضای ابری",
+      description: "به فایل‌های فضای ابری دسترسی داشته باشید و آن‌ها را همگام‌سازی کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      description: "صفحات و پایگاه‌های داده فضای کاری را همگام‌سازی کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/jira.svg",
+      title: "Jira",
+      description: "مسائل را پیگیری کنید و پروژه‌های چابک خود را مدیریت کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/asana.svg",
+      title: "Asana",
+      description: "وظایف را مدیریت کنید و با تیم همکاری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+      title: "Dropbox",
+      description: "فایل‌ها را به‌صورت امن در فضای ابری ذخیره و به اشتراک بگذارید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "طرح‌ها را وارد کنید و روی نمونه‌ها همکاری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "مخازن را متصل کنید و گردش کارها را خودکار کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/payment-methods/stripe.svg",
+      title: "Stripe",
+      description: "پرداخت‌ها را پردازش کنید و اشتراک‌ها را مدیریت کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/confluence.svg",
+      title: "Confluence",
+      description: "مستندات تیم را ایجاد و به اشتراک بگذارید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/monday.svg",
+      title: "Monday",
+      description: "گردش کارها را ساماندهی کنید و پیشرفت پروژه را پیگیری کنید.",
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/excel.svg",
+      title: "Excel",
+      description: "داده‌های جدول را به‌راحتی وارد و صادر کنید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      title: "Vercel",
+      description: "اپلیکیشن‌های وب را مستقر کنید و پیش‌نمایش بگیرید.",
+      isConnected: true,
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/mainline/logos/retool.svg",
+      title: "Retool",
+      description: "ابزارها و داشبوردهای داخلی سفارشی بسازید.",
+      link: "https://ShadcnBlocks",
+      className: "dark:invert",
+    },
+  ],
+}: SettingsIntegrations3aProps) => {
+  return (
+    <section className="py-32">
+      <div className="container max-w-5xl">
+        <div className="flex flex-col gap-3">
+          <p className="text-xl font-semibold tracking-tight sm:text-3xl">
+            {heading}
+          </p>
+          <p className="text-lg font-medium text-muted-foreground">
+            {subHeading}
+          </p>
+
+          <IntegrationList integrations={integrations} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations3a };
diff --git a/blocks/settings-integrations4.tsx b/blocks/settings-integrations4.tsx
new file mode 100644
index 0000000..d1511d7
--- /dev/null
+++ b/blocks/settings-integrations4.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import { useState } from "react";
+
+import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  isConnected?: boolean;
+  category: string;
+  className?: string;
+}
+
+interface IntegrationCardProps {
+  integration: IntegrationItem;
+  onToggle?: (title: string) => void;
+}
+
+const IntegrationCard = ({ integration, onToggle }: IntegrationCardProps) => {
+  return (
+    <div className="flex items-start gap-4 rounded-lg border p-4 text-start">
+      <img
+        src={integration.image}
+        alt={`لوگوی ${integration.title}`}
+        className={cn("size-10 shrink-0", integration.className)}
+      />
+      <div className="min-w-0 flex-1 space-y-1">
+        <p className="font-medium">{integration.title}</p>
+        <p className="text-sm text-muted-foreground">
+          {integration.description}
+        </p>
+      </div>
+      <div className="flex shrink-0 flex-col items-end gap-2 sm:flex-row sm:items-center">
+        {integration.isConnected && (
+          <Badge variant="secondary" className="bg-green-100 text-green-800">
+            متصل
+          </Badge>
+        )}
+        <Button
+          variant={integration.isConnected ? "outline" : "default"}
+          size="sm"
+          onClick={() => onToggle?.(integration.title)}
+        >
+          {integration.isConnected ? "قطع اتصال" : "اتصال"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+interface SettingsIntegrations4Props {
+  className?: string;
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations4 = ({
+  className,
+  heading = "یکپارچه‌سازی‌ها",
+  subHeading = "ابزارها و سرویس‌های محبوبتان را متصل کنید و گردش کار خود را ساده‌تر کنید.",
+  integrations: initialIntegrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌ها و به‌روزرسانی‌ها را به کانال‌های تیم ارسال کنید.",
+      isConnected: true,
+      category: "communication",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/discord-icon.svg",
+      title: "Discord",
+      description: "سرور گفتگوی تیمی خود را برای هشدارهای لحظه‌ای متصل کنید.",
+      category: "communication",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/microsoft-teams-icon.svg",
+      title: "Microsoft Teams",
+      description: "با Teams برای همکاری یکپارچه ادغام شوید.",
+      category: "communication",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/google-icon.svg",
+      title: "فضای ابری",
+      description: "به فایل‌های فضای ابری دسترسی داشته باشید و آن‌ها را همگام‌سازی کنید.",
+      isConnected: true,
+      category: "storage",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+      title: "Dropbox",
+      description: "فایل‌ها را به‌صورت امن در فضای ابری ذخیره و به اشتراک بگذارید.",
+      category: "storage",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/microsoft-onedrive-icon.svg",
+      title: "OneDrive",
+      description: "فایل‌ها و پوشه‌های OneDrive را همگام‌سازی کنید.",
+      category: "storage",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "مخازن را متصل کنید و گردش کارها را خودکار کنید.",
+      isConnected: true,
+      category: "development",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/gitlab-icon.svg",
+      title: "GitLab",
+      description: "با GitLab برای خطوط استقرار خودکار ادغام شوید.",
+      category: "development",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      title: "Vercel",
+      description: "اپلیکیشن‌های وب را مستقر کنید و پیش‌نمایش بگیرید.",
+      category: "development",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/stripe-icon.svg",
+      title: "Stripe",
+      description: "پرداخت‌ها را پردازش کنید و اشتراک‌ها را مدیریت کنید.",
+      isConnected: true,
+      category: "payments",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/paypal-icon.svg",
+      title: "PayPal",
+      description: "پرداخت‌های کیف پول دیجیتال را از مشتریان بپذیرید.",
+      category: "payments",
+    },
+  ],
+}: SettingsIntegrations4Props) => {
+  const [integrations, setIntegrations] = useState(initialIntegrations);
+
+  const categories = [...new Set(integrations.map((i) => i.category))];
+
+  const handleToggle = (title: string) => {
+    setIntegrations((prev) =>
+      prev.map((i) =>
+        i.title === title ? { ...i, isConnected: !i.isConnected } : i,
+      ),
+    );
+  };
+
+  const getCategoryLabel = (category: string) => {
+    const labels: Record<string, string> = {
+      communication: "ارتباطات",
+      storage: "ذخیره‌سازی",
+      development: "توسعه",
+      payments: "پرداخت",
+    };
+    return labels[category] ?? category;
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container max-w-4xl">
+        <div className="space-y-2 border-b pb-6 text-start">
+          <h2 className="text-xl font-semibold tracking-tight">{heading}</h2>
+          <p className="text-sm text-muted-foreground">{subHeading}</p>
+        </div>
+
+        <Tabs defaultValue={categories[0]} className="mt-6">
+          <div className="flex w-full justify-start">
+            <ScrollableTabsList className="rounded-none">
+              <TabsList className="overflow-y-hidden">
+                {categories.map((category) => (
+                  <TabsTrigger key={category} value={category}>
+                    {getCategoryLabel(category)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </ScrollableTabsList>
+          </div>
+
+          {categories.map((category) => (
+            <TabsContent key={category} value={category} className="mt-6 text-start">
+              <div className="space-y-4">
+                {integrations
+                  .filter((i) => i.category === category)
+                  .map((integration) => (
+                    <IntegrationCard
+                      key={integration.title}
+                      integration={integration}
+                      onToggle={handleToggle}
+                    />
+                  ))}
+              </div>
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations4 };
diff --git a/blocks/settings-integrations5.tsx b/blocks/settings-integrations5.tsx
new file mode 100644
index 0000000..b11c374
--- /dev/null
+++ b/blocks/settings-integrations5.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  isConnected?: boolean;
+  className?: string;
+}
+
+interface IntegrationRowProps {
+  integration: IntegrationItem;
+  onToggle?: (title: string) => void;
+}
+
+const IntegrationRow = ({ integration, onToggle }: IntegrationRowProps) => {
+  return (
+    <div className="flex items-center justify-between gap-4 py-4">
+      <div className="flex items-center gap-4">
+        <div className="flex size-12 items-center justify-center rounded-lg border bg-muted/50">
+          <img
+            src={integration.image}
+            alt={`لوگوی ${integration.title}`}
+            className={cn("size-7", integration.className)}
+          />
+        </div>
+        <div className="space-y-0.5">
+          <p className="font-medium">{integration.title}</p>
+          <p className="text-sm text-muted-foreground">
+            {integration.description}
+          </p>
+        </div>
+      </div>
+      <Switch
+        checked={integration.isConnected}
+        onCheckedChange={() => onToggle?.(integration.title)}
+      />
+    </div>
+  );
+};
+
+interface SettingsIntegrations5Props {
+  className?: string;
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations5 = ({
+  className,
+  heading = "اپلیکیشن‌های متصل",
+  subHeading = "مدیریت اپلیکیشن‌هایی که به حساب شما دسترسی دارند.",
+  integrations: initialIntegrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌ها را در فضای کاری پیام‌رسان تیمی دریافت کنید",
+      isConnected: true,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/google-icon.svg",
+      title: "فضای ابری",
+      description: "اسناد و فایل‌ها را به‌صورت خودکار همگام‌سازی کنید",
+      isConnected: true,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      description: "داده‌ها را به فضای کاری یادداشت‌برداری صادر کنید",
+      isConnected: false,
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "مخازن را برای پیگیری مسائل متصل کنید",
+      isConnected: true,
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "طرح‌ها را مستقیماً از طراحی رابط وارد کنید",
+      isConnected: false,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/jira-icon.svg",
+      title: "Jira",
+      description: "وظایف و مسائل را با پروژه‌های Jira همگام کنید",
+      isConnected: true,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/linear-icon.svg",
+      title: "Linear",
+      description: "مسائل را در Linear ایجاد و پیگیری کنید",
+      isConnected: false,
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/stripe-icon.svg",
+      title: "Stripe",
+      description: "پرداخت‌ها را پردازش کنید و تراکنش‌ها را مشاهده کنید",
+      isConnected: true,
+    },
+  ],
+}: SettingsIntegrations5Props) => {
+  const [integrations, setIntegrations] = useState(initialIntegrations);
+
+  const handleToggle = (title: string) => {
+    setIntegrations((prev) =>
+      prev.map((i) =>
+        i.title === title ? { ...i, isConnected: !i.isConnected } : i,
+      ),
+    );
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container max-w-2xl">
+        <div className="rounded-lg border">
+          <div className="border-b p-6">
+            <h2 className="text-lg font-semibold">{heading}</h2>
+            <p className="text-sm text-muted-foreground">{subHeading}</p>
+          </div>
+          <div className="divide-y px-6">
+            {integrations.map((integration) => (
+              <IntegrationRow
+                key={integration.title}
+                integration={integration}
+                onToggle={handleToggle}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations5 };
diff --git a/blocks/settings-integrations6.tsx b/blocks/settings-integrations6.tsx
new file mode 100644
index 0000000..79d8ea1
--- /dev/null
+++ b/blocks/settings-integrations6.tsx
@@ -0,0 +1,185 @@
+import { ExternalLink, Settings2, Trash2 } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  status: "active" | "inactive" | "error";
+  lastSync?: string;
+  className?: string;
+}
+
+interface SettingsIntegrations6Props {
+  className?: string;
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations6 = ({
+  className,
+  heading = "یکپارچه‌سازی‌ها",
+  subHeading = "سرویس‌های متصل خود را مشاهده و مدیریت کنید.",
+  integrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      status: "active",
+      lastSync: "۲ دقیقه پیش",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/google-icon.svg",
+      title: "فضای ابری",
+      status: "active",
+      lastSync: "۵ دقیقه پیش",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      status: "error",
+      lastSync: "ناموفق، ۱ ساعت پیش",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      status: "active",
+      lastSync: "همین الان",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      status: "inactive",
+      lastSync: "هرگز",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/jira-icon.svg",
+      title: "Jira",
+      status: "active",
+      lastSync: "۱۰ دقیقه پیش",
+    },
+  ],
+}: SettingsIntegrations6Props) => {
+  const getStatusBadge = (status: IntegrationItem["status"]) => {
+    switch (status) {
+      case "active":
+        return (
+          <Badge variant="secondary" className="bg-green-100 text-green-800">
+            فعال
+          </Badge>
+        );
+      case "inactive":
+        return <Badge variant="secondary">غیرفعال</Badge>;
+      case "error":
+        return (
+          <Badge variant="secondary" className="bg-red-100 text-red-800">
+            خطا
+          </Badge>
+        );
+    }
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container max-w-4xl">
+        <div className="space-y-2 border-b pb-6">
+          <h2 className="text-xl font-semibold tracking-tight">{heading}</h2>
+          <p className="text-sm text-muted-foreground">{subHeading}</p>
+        </div>
+
+        <div className="mt-6">
+          <TooltipProvider>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>سرویس</TableHead>
+                  <TableHead>وضعیت</TableHead>
+                  <TableHead>آخرین همگام‌سازی</TableHead>
+                  <TableHead className="text-end">عملیات</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {integrations.map((integration) => (
+                  <TableRow key={integration.title}>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <img
+                          src={integration.image}
+                          alt={`لوگوی ${integration.title}`}
+                          className={cn("size-6", integration.className)}
+                        />
+                        <span className="font-medium">{integration.title}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>{getStatusBadge(integration.status)}</TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {integration.lastSync}
+                    </TableCell>
+                    <TableCell className="text-end">
+                      <div className="flex items-center justify-end gap-1">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                              <ExternalLink className="size-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>باز کردن</TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                              <Settings2 className="size-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>تنظیمات</TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="text-destructive hover:text-destructive"
+                            >
+                              <Trash2 className="size-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>حذف</TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TooltipProvider>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations6 };
diff --git a/blocks/settings-integrations7.tsx b/blocks/settings-integrations7.tsx
new file mode 100644
index 0000000..af216b6
--- /dev/null
+++ b/blocks/settings-integrations7.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import { Check, Plus, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  isConnected?: boolean;
+  category: string;
+  className?: string;
+}
+
+interface IntegrationCardProps {
+  integration: IntegrationItem;
+  onToggle?: (title: string) => void;
+}
+
+const IntegrationCard = ({ integration, onToggle }: IntegrationCardProps) => {
+  return (
+    <div className="group relative overflow-hidden rounded-xl border bg-card transition-all hover:shadow-lg">
+      <div className="p-6">
+        <div className="flex items-start gap-4">
+          <div className="flex size-14 shrink-0 items-center justify-center rounded-xl border bg-background">
+            <img
+              src={integration.image}
+              alt={`لوگوی ${integration.title}`}
+              className={cn("size-8", integration.className)}
+            />
+          </div>
+          <div className="flex-1 space-y-1">
+            <h3 className="font-semibold">{integration.title}</h3>
+            <p className="text-sm text-muted-foreground">
+              {integration.description}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="border-t bg-muted/30 px-6 py-3">
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">
+            {integration.category}
+          </span>
+          <Button
+            size="sm"
+            variant={integration.isConnected ? "secondary" : "default"}
+            className="h-8"
+            onClick={() => onToggle?.(integration.title)}
+          >
+            {integration.isConnected ? (
+              <>
+                <Check className="size-3.5" />
+                متصل
+              </>
+            ) : (
+              <>
+                <Plus className="size-3.5" />
+                اتصال
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface SettingsIntegrations7Props {
+  className?: string;
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations7 = ({
+  className,
+  heading = "یکپارچه‌سازی اپلیکیشن‌ها",
+  subHeading = "ابزارهای محبوبتان را متصل کنید و گردش کار خود را تقویت کنید.",
+  integrations: initialIntegrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌های لحظه‌ای را در کانال‌های خود دریافت کنید.",
+      isConnected: true,
+      category: "ارتباطات",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/discord-icon.svg",
+      title: "Discord",
+      description: "هشدارها را به سرور گفتگوی تیمی ارسال کنید.",
+      category: "ارتباطات",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/google-icon.svg",
+      title: "فضای ابری",
+      description: "فایل‌ها را به‌صورت خودکار همگام‌سازی و پشتیبان‌گیری کنید.",
+      isConnected: true,
+      category: "ذخیره‌سازی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+      title: "Dropbox",
+      description: "به فایل‌های Dropbox خود بدون وقفه دسترسی داشته باشید.",
+      category: "ذخیره‌سازی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "مخازن را متصل کنید و تغییرات را پیگیری کنید.",
+      isConnected: true,
+      category: "توسعه",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/gitlab-icon.svg",
+      title: "GitLab",
+      description: "با GitLab برای یکپارچه‌سازی استقرار خودکار متصل شوید.",
+      category: "توسعه",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      description: "صفحات و پایگاه‌های داده را دوطرفه همگام‌سازی کنید.",
+      category: "بهره‌وری",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/linear-icon.svg",
+      title: "Linear",
+      description: "مسائل را از همینجا ایجاد و مدیریت کنید.",
+      isConnected: true,
+      category: "بهره‌وری",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/stripe-icon.svg",
+      title: "Stripe",
+      description: "پرداخت‌ها و اشتراک‌ها را پردازش کنید.",
+      isConnected: true,
+      category: "پرداخت",
+    },
+  ],
+}: SettingsIntegrations7Props) => {
+  const [integrations, setIntegrations] = useState(initialIntegrations);
+  const [searchValue, setSearchValue] = useState("");
+
+  const filteredIntegrations = useMemo(() => {
+    if (!searchValue) return integrations;
+    return integrations.filter(
+      (i) =>
+        i.title.toLowerCase().includes(searchValue.toLowerCase()) ||
+        i.category.toLowerCase().includes(searchValue.toLowerCase()),
+    );
+  }, [integrations, searchValue]);
+
+  const handleToggle = (title: string) => {
+    setIntegrations((prev) =>
+      prev.map((i) =>
+        i.title === title ? { ...i, isConnected: !i.isConnected } : i,
+      ),
+    );
+  };
+
+  const connectedCount = integrations.filter((i) => i.isConnected).length;
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container max-w-6xl">
+        <div className="mb-8 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold tracking-tight">{heading}</h1>
+            <p className="text-muted-foreground">{subHeading}</p>
+            <p className="text-sm text-muted-foreground">
+              {connectedCount.toLocaleString("fa-IR")} از{" "}
+              {integrations.length.toLocaleString("fa-IR")} یکپارچه‌سازی متصل
+              است
+            </p>
+          </div>
+          <div className="relative w-full sm:w-72">
+            <Search className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="جستجوی یکپارچه‌سازی‌ها..."
+              className="ps-9"
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {filteredIntegrations.map((integration) => (
+            <IntegrationCard
+              key={integration.title}
+              integration={integration}
+              onToggle={handleToggle}
+            />
+          ))}
+        </div>
+
+        {filteredIntegrations.length === 0 && (
+          <div className="py-12 text-center">
+            <p className="text-muted-foreground">
+              یکپارچه‌سازی‌ای مطابق «{searchValue}» یافت نشد
+            </p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations7 };
diff --git a/blocks/settings-integrations8.tsx b/blocks/settings-integrations8.tsx
new file mode 100644
index 0000000..ddac7f0
--- /dev/null
+++ b/blocks/settings-integrations8.tsx
@@ -0,0 +1,269 @@
+"use client";
+
+import { ChevronRight, Circle, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  isConnected?: boolean;
+  category: string;
+  className?: string;
+}
+
+interface SettingsIntegrations8Props {
+  className?: string;
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations8 = ({
+  className,
+  heading = "یکپارچه‌سازی‌ها",
+  subHeading = "اپلیکیشن‌ها و سرویس‌های محبوبتان را مرور و متصل کنید.",
+  integrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌ها را به کانال‌های پیام‌رسان تیمی ارسال کنید",
+      isConnected: true,
+      category: "ارتباطات",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/discord-icon.svg",
+      title: "Discord",
+      description: "به‌روزرسانی‌ها را در سرورهای گفتگوی تیمی منتشر کنید",
+      category: "ارتباطات",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/microsoft-teams-icon.svg",
+      title: "Microsoft Teams",
+      description: "با تیم خود همکاری کنید",
+      isConnected: true,
+      category: "ارتباطات",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/google-icon.svg",
+      title: "فضای ابری",
+      description: "فایل‌ها را ذخیره و همگام‌سازی کنید",
+      isConnected: true,
+      category: "ذخیره‌سازی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
+      title: "Dropbox",
+      description: "ذخیره‌سازی ابری فایل",
+      category: "ذخیره‌سازی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/microsoft-onedrive-icon.svg",
+      title: "OneDrive",
+      description: "فضای ابری Microsoft",
+      category: "ذخیره‌سازی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "میزبانی کد و همکاری",
+      isConnected: true,
+      category: "توسعه",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/gitlab-icon.svg",
+      title: "GitLab",
+      description: "پلتفرم DevOps",
+      category: "توسعه",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      title: "Vercel",
+      description: "مستقرسازی اپلیکیشن‌های وب",
+      category: "توسعه",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "همکاری در طراحی",
+      isConnected: true,
+      category: "طراحی",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      description: "یادداشت و مستندسازی",
+      category: "بهره‌وری",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/linear-icon.svg",
+      title: "Linear",
+      description: "پیگیری مسائل",
+      isConnected: true,
+      category: "بهره‌وری",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/jira-icon.svg",
+      title: "Jira",
+      description: "مدیریت پروژه",
+      category: "بهره‌وری",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/stripe-icon.svg",
+      title: "Stripe",
+      description: "پردازش پرداخت",
+      isConnected: true,
+      category: "پرداخت",
+    },
+  ],
+}: SettingsIntegrations8Props) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+  const categories = useMemo(() => {
+    return [...new Set(integrations.map((i) => i.category))];
+  }, [integrations]);
+
+  const filteredIntegrations = useMemo(() => {
+    return integrations.filter((integration) => {
+      const matchesSearch =
+        !searchValue ||
+        integration.title.toLowerCase().includes(searchValue.toLowerCase()) ||
+        integration.description
+          .toLowerCase()
+          .includes(searchValue.toLowerCase());
+      const matchesCategory =
+        !selectedCategory || integration.category === selectedCategory;
+      return matchesSearch && matchesCategory;
+    });
+  }, [integrations, searchValue, selectedCategory]);
+
+  const getCategoryCount = (category: string) => {
+    return integrations.filter((i) => i.category === category).length;
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-6xl">
+        <div className="mb-8 space-y-2 text-start">
+          <h1 className="text-3xl font-bold tracking-tight">{heading}</h1>
+          <p className="text-muted-foreground">{subHeading}</p>
+        </div>
+
+        <div className="flex flex-col gap-6 lg:flex-row">
+          {/* Sidebar */}
+          <div className="w-full shrink-0 lg:w-56">
+            <div className="sticky top-8 space-y-4">
+              <div className="relative">
+                <Search className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="جستجو..."
+                  className="ps-9"
+                  value={searchValue}
+                  onChange={(e) => setSearchValue(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <button
+                  onClick={() => setSelectedCategory(null)}
+                  className={cn(
+                    "flex w-full items-center justify-between rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-muted",
+                    !selectedCategory && "bg-muted font-medium",
+                  )}
+                >
+                  <span>همه یکپارچه‌سازی‌ها</span>
+                  <span className="text-muted-foreground">
+                    {integrations.length.toLocaleString("fa-IR")}
+                  </span>
+                </button>
+                {categories.map((category) => (
+                  <button
+                    key={category}
+                    onClick={() => setSelectedCategory(category)}
+                    className={cn(
+                      "flex w-full items-center justify-between rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-muted",
+                      selectedCategory === category && "bg-muted font-medium",
+                    )}
+                  >
+                    <span>{category}</span>
+                    <span className="text-muted-foreground">
+                      {getCategoryCount(category).toLocaleString("fa-IR")}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Main content */}
+          <div className="flex-1">
+            <ScrollArea className="h-[600px] pe-4">
+              <div className="space-y-2">
+                {filteredIntegrations.map((integration) => (
+                  <a
+                    key={integration.title}
+                    href="#"
+                    className="group flex items-center gap-4 rounded-lg border p-4 text-start transition-colors hover:bg-muted/50"
+                  >
+                    <div className="flex size-12 shrink-0 items-center justify-center rounded-lg border bg-background">
+                      <img
+                        src={integration.image}
+                        alt={`لوگوی ${integration.title}`}
+                        className={cn("size-7", integration.className)}
+                      />
+                    </div>
+                    <div className="min-w-0 flex-1 space-y-1 text-start">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="font-medium">{integration.title}</span>
+                        {integration.isConnected && (
+                          <Badge
+                            variant="secondary"
+                            className="bg-green-100 text-green-800"
+                          >
+                            <Circle className="me-1 size-2 fill-current" />
+                            متصل
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        {integration.description}
+                      </p>
+                    </div>
+                    <ChevronRight
+                      className="size-5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 rtl:rotate-180"
+                    />
+                  </a>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations8 };
diff --git a/blocks/settings-integrations9.tsx b/blocks/settings-integrations9.tsx
new file mode 100644
index 0000000..cde7850
--- /dev/null
+++ b/blocks/settings-integrations9.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import { ExternalLink, MoreHorizontal, RefreshCw, Trash2 } from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  status: "active" | "inactive" | "error";
+  connectedBy?: {
+    name: string;
+    avatar: string;
+  };
+  lastActivity?: string;
+  className?: string;
+}
+
+interface SettingsIntegrations9Props {
+  className?: string;
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations9 = ({
+  className,
+  heading = "یکپارچه‌سازی‌های متصل",
+  subHeading = "یکپارچه‌سازی‌های فعال و دسترسی‌های آن‌ها را مدیریت کنید.",
+  integrations: initialIntegrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌ها و هشدارهای فضای کاری",
+      status: "active",
+      connectedBy: {
+        name: "الهام میرزایی",
+        avatar:
+          "/block-media/shadcnblocks/block/avatar-1.webp",
+      },
+      lastActivity: "همین الان فعال",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/google-icon.svg",
+      title: "فضای ابری",
+      description: "همگام‌سازی و پشتیبان‌گیری فایل",
+      status: "active",
+      connectedBy: {
+        name: "جردن لی",
+        avatar:
+          "/block-media/shadcnblocks/block/avatar/avatar3.webp",
+      },
+      lastActivity: "۵ دقیقه پیش همگام شد",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "وب‌هوک مخازن",
+      status: "active",
+      connectedBy: {
+        name: "سام چناری",
+        avatar:
+          "/block-media/shadcnblocks/block/avatar-2.webp",
+      },
+      lastActivity: "آخرین تغییر، ۲ ساعت پیش",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      description: "همگام‌سازی مستندات",
+      status: "error",
+      connectedBy: {
+        name: "تیلور کیمیایی",
+        avatar:
+          "/block-media/shadcnblocks/block/avatar-7.webp",
+      },
+      lastActivity: "همگام‌سازی ناموفق",
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "وارد کردن فایل‌های طراحی",
+      status: "inactive",
+      connectedBy: {
+        name: "کاوه پارک",
+        avatar:
+          "/block-media/shadcnblocks/block/avatar-5.webp",
+      },
+      lastActivity: "متوقف",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/stripe-icon.svg",
+      title: "Stripe",
+      description: "پردازش پرداخت",
+      status: "active",
+      connectedBy: {
+        name: "ریحانه جعفری",
+        avatar:
+          "/block-media/shadcnblocks/block/avatar-3.webp",
+      },
+      lastActivity: "۱۲ تراکنش امروز",
+    },
+  ],
+}: SettingsIntegrations9Props) => {
+  const [integrations, setIntegrations] = useState(initialIntegrations);
+
+  const handleRemove = (title: string) => {
+    setIntegrations((prev) => prev.filter((i) => i.title !== title));
+  };
+
+  const getStatusBadge = (status: IntegrationItem["status"]) => {
+    switch (status) {
+      case "active":
+        return (
+          <Badge variant="secondary" className="bg-green-100 text-green-800">
+            فعال
+          </Badge>
+        );
+      case "inactive":
+        return <Badge variant="secondary">متوقف</Badge>;
+      case "error":
+        return (
+          <Badge variant="secondary" className="bg-red-100 text-red-800">
+            خطا
+          </Badge>
+        );
+    }
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container max-w-4xl">
+        <div className="mb-8 flex items-start justify-between">
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold tracking-tight">{heading}</h1>
+            <p className="text-muted-foreground">{subHeading}</p>
+          </div>
+          <Button>افزودن یکپارچه‌سازی</Button>
+        </div>
+
+        <div className="space-y-4">
+          {integrations.map((integration) => (
+            <div
+              key={integration.title}
+              className="group rounded-xl border bg-card p-6 transition-shadow hover:shadow-md"
+            >
+              <div className="flex items-start gap-4">
+                <div className="flex size-14 shrink-0 items-center justify-center rounded-xl border bg-muted/50">
+                  <img
+                    src={integration.image}
+                    alt={`لوگوی ${integration.title}`}
+                    className={cn("size-8", integration.className)}
+                  />
+                </div>
+                <div className="flex-1 space-y-3">
+                  <div className="flex items-start justify-between">
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold">{integration.title}</h3>
+                        {getStatusBadge(integration.status)}
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        {integration.description}
+                      </p>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="opacity-0 group-hover:opacity-100"
+                        >
+                          <MoreHorizontal className="size-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>
+                          <ExternalLink className="me-2 size-4" />
+                          باز کردن تنظیمات
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <RefreshCw className="me-2 size-4" />
+                          اتصال مجدد
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="text-destructive focus:text-destructive"
+                          onClick={() => handleRemove(integration.title)}
+                        >
+                          <Trash2 className="me-2 size-4" />
+                          حذف
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                    {integration.connectedBy && (
+                      <div className="flex items-center gap-2">
+                        <Avatar className="size-5">
+                          <AvatarImage src={integration.connectedBy.avatar} />
+                          <AvatarFallback>
+                            {integration.connectedBy.name[0]}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span>متصل‌شده توسط {integration.connectedBy.name}</span>
+                      </div>
+                    )}
+                    {integration.lastActivity && (
+                      <>
+                        <span>•</span>
+                        <span>{integration.lastActivity}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {integrations.length === 0 && (
+          <div className="rounded-xl border border-dashed py-12 text-center">
+            <p className="text-muted-foreground">
+              هنوز یکپارچه‌سازی‌ای متصل نشده است.
+            </p>
+            <Button className="mt-4">مرور یکپارچه‌سازی‌ها</Button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations9 };
diff --git a/blocks/settings-members1.tsx b/blocks/settings-members1.tsx
new file mode 100644
index 0000000..aa60c97
--- /dev/null
+++ b/blocks/settings-members1.tsx
@@ -0,0 +1,266 @@
+"use client";
+
+import {
+  CornerDownLeft,
+  Search,
+  SlidersHorizontal,
+  UserRoundPlus,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name?: string;
+  email: string;
+  accessLevel: string;
+  status?: string;
+}
+
+interface UsersTableProps {
+  users: User[];
+}
+
+const UsersTable = ({ users }: UsersTableProps) => {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>کاربر</TableHead>
+          <TableHead>نقش</TableHead>
+          <TableHead></TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user) => (
+          <TableRow key={user.email}>
+            <TableCell className="flex max-w-56 items-center gap-2 font-medium">
+              <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-background">
+                {user.name ? user.name.charAt(0) : "?"}
+              </span>
+              {user.name}
+              <span className="text-muted-foreground">{user.email}</span>
+            </TableCell>
+            <TableCell>
+              <Badge variant="secondary">{user.accessLevel}</Badge>
+            </TableCell>
+            <TableCell>
+              {user.status === "دعوت در انتظار" && (
+                <Badge className="bg-blue-100 text-blue-800">
+                  {user.status}
+                </Badge>
+              )}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+const InviteUserForm = () => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>
+          <UserRoundPlus /> افزودن عضو
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="gap-0 overflow-hidden p-0">
+        <DialogTitle className="flex items-center gap-2 border-b p-4 text-sm font-medium">
+          <UserRoundPlus className="size-4" />
+          افزودن عضو جدید
+        </DialogTitle>
+        <form
+          autoComplete="off"
+          onSubmit={(e) => e.preventDefault()}
+          className="flex flex-col gap-4 bg-muted pt-4"
+        >
+          <div className="flex flex-col gap-4 px-4">
+            <div className="space-y-1">
+              <Label className="text-xs">آدرس ایمیل</Label>
+              <Input
+                placeholder="colleague@company.com"
+                className="bg-background"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">تعیین نقش</Label>
+              <Select defaultValue="editor">
+                <SelectTrigger className="w-full bg-background">
+                  <SelectValue placeholder="انتخاب نقش" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="owner">مالک</SelectItem>
+                  <SelectItem value="editor">ویرایشگر</SelectItem>
+                  <SelectItem value="viewer">بیننده</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter className="border-t bg-background px-4 py-3">
+            <Button size="sm" type="submit">
+              ارسال دعوت <CornerDownLeft className="rtl:rotate-180" />
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+interface SettingsMembers1Props {
+  heading?: string;
+  subHeading?: string;
+  className?: string;
+  users?: User[];
+}
+
+const SettingsMembers1 = ({
+  heading = "اعضای تیم",
+  subHeading = "اعضای تیم خود را مشاهده و مدیریت کنید. دسترسی و نقش هر کاربر در سازمان را کنترل کنید.",
+  users = [
+    {
+      name: "الهام حسینی",
+      email: "emily.w@acme.io",
+      accessLevel: "مالک",
+    },
+    {
+      email: "john.d@acme.io",
+      accessLevel: "ویرایشگر",
+      status: "دعوت در انتظار",
+    },
+    {
+      name: "Michael Park",
+      email: "michael.p@acme.io",
+      accessLevel: "بیننده",
+    },
+    {
+      email: "lisa.t@acme.io",
+      accessLevel: "ویرایشگر",
+      status: "دعوت در انتظار",
+    },
+  ],
+  className,
+}: SettingsMembers1Props) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [selectedAccessLevels, setSelectedAccessLevels] = useState<string[]>(
+    [],
+  );
+
+  const accessLevels = useMemo(() => {
+    return Array.from(new Set(users.map((user) => user.accessLevel)));
+  }, [users]);
+
+  const filteredUsers = useMemo(() => {
+    return users.filter((user) => {
+      const isAccessLevelSelected =
+        selectedAccessLevels.length === 0 ||
+        selectedAccessLevels.includes(user.accessLevel);
+      const isSearchMatch =
+        user.name?.toLowerCase().includes(searchValue.toLowerCase()) ||
+        user.email.toLowerCase().includes(searchValue.toLowerCase());
+      return isAccessLevelSelected && isSearchMatch;
+    });
+  }, [users, selectedAccessLevels, searchValue]);
+
+  const toggleAccessLevel = (accessLevel: string) => {
+    setSelectedAccessLevels((prev) => {
+      if (prev.includes(accessLevel)) {
+        return prev.filter((level) => level !== accessLevel);
+      }
+      return [...prev, accessLevel];
+    });
+  };
+
+  return (
+    <section className="py-32">
+      <div className="container max-w-4xl">
+        <div className={cn("flex flex-col gap-8", className)}>
+          <div className="space-y-3 border-b pb-8">
+            <h3 className="text-xl font-semibold tracking-tight">{heading}</h3>
+            <p className="text-sm font-medium text-muted-foreground">
+              {subHeading}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 sm:flex-nowrap">
+            <div className="relative w-full min-w-20">
+              <Search className="absolute top-1/2 start-2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder="جستجو"
+                className="ps-7"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+              />
+            </div>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline">
+                  <SlidersHorizontal />
+                  فیلتر
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent align="end" className="w-56">
+                <div className="space-y-3">
+                  <p className="text-sm font-medium">نقش</p>
+                  <div className="space-y-2">
+                    {accessLevels.map((accessLevel) => (
+                      <Label
+                        key={accessLevel}
+                        className="cursor-pointer font-normal"
+                      >
+                        <Checkbox
+                          checked={selectedAccessLevels.includes(accessLevel)}
+                          onCheckedChange={() => toggleAccessLevel(accessLevel)}
+                        />
+                        <span className="text-sm">{accessLevel}</span>
+                      </Label>
+                    ))}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <InviteUserForm />
+          </div>
+
+          <UsersTable users={filteredUsers} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsMembers1 };
diff --git a/blocks/settings-members2.tsx b/blocks/settings-members2.tsx
new file mode 100644
index 0000000..f565e3b
--- /dev/null
+++ b/blocks/settings-members2.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import { CornerDownLeft, MoreHorizontalIcon, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name: string;
+  email: string;
+  accessLevel: string;
+  status?: string;
+  image?: string;
+}
+
+interface Cta {
+  title: string;
+  ctaText: string;
+  ctaLink: string;
+}
+
+interface SettingsMembers2Props {
+  heading?: string;
+  subHeading?: Cta;
+  users?: User[];
+  className?: string;
+}
+
+const SettingsMembers2 = ({
+  heading = "اعضای فضای کاری",
+  subHeading = {
+    title:
+      "هم‌تیمی‌ها را اضافه کنید تا روی پروژه‌ها با هم کار کنید. دسترسی و سطح دسترسی هر عضو را مدیریت کنید.",
+    ctaText: "راهنمای سطح دسترسی اعضا",
+    ctaLink: "#",
+  },
+  users = [
+    {
+      name: "سوفیا مارتینز",
+      email: "sofia.m@example.com",
+      accessLevel: "مالک",
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
+    },
+    {
+      name: "امیر چناری",
+      email: "alex.c@example.com",
+      accessLevel: "ویرایشگر",
+      status: "دعوت در انتظار",
+    },
+    {
+      name: "Jordan Blake",
+      email: "jordan.b@example.com",
+      accessLevel: "بیننده",
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
+    },
+    {
+      name: "Morgan Reid",
+      email: "morgan.r@example.com",
+      accessLevel: "ویرایشگر",
+      status: "دعوت در انتظار",
+    },
+  ],
+  className = "",
+}: SettingsMembers2Props) => {
+  const [searchValue, setSearchValue] = useState("");
+
+  const filteredUsers = useMemo(() => {
+    return users.filter((user) => {
+      return (
+        user.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+        user.email.toLowerCase().includes(searchValue.toLowerCase())
+      );
+    });
+  }, [users, searchValue]);
+
+  return (
+    <section className="py-32">
+      <div className="container max-w-3xl">
+        <div className={cn("space-y-6", className)}>
+          <div className="space-y-4">
+            <h3 className="text-xl font-semibold tracking-tight">{heading}</h3>
+            <CtaText cta={subHeading} />
+          </div>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between gap-3">
+              <div className="relative w-full max-w-56 min-w-20">
+                <Search className="absolute top-1/2 start-2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="جستجو"
+                  className="ps-7"
+                  value={searchValue}
+                  onChange={(e) => setSearchValue(e.target.value)}
+                />
+              </div>
+              <InviteUserForm />
+            </div>
+
+            <p className="text-xs font-semibold text-muted-foreground">
+              {filteredUsers.length.toLocaleString("fa-IR")} عضو
+            </p>
+
+            <UsersList users={filteredUsers} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsMembers2 };
+
+const InviteUserForm = () => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>دعوت عضو</Button>
+      </DialogTrigger>
+      <DialogContent className="gap-0 overflow-hidden p-0">
+        <DialogTitle className="flex items-center gap-2 border-b p-4 text-sm font-medium">
+          دعوت عضو تیم
+        </DialogTitle>
+        <form
+          autoComplete="off"
+          onSubmit={(e) => e.preventDefault()}
+          className="flex flex-col gap-4 bg-muted pt-4"
+        >
+          <div className="flex flex-col gap-4 px-4">
+            <div className="space-y-1">
+              <Label className="text-xs">آدرس ایمیل</Label>
+              <Input
+                placeholder="name@yourcompany.com"
+                className="bg-background"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">انتخاب نقش</Label>
+              <Select defaultValue="editor">
+                <SelectTrigger className="w-full bg-background">
+                  <SelectValue placeholder="انتخاب نقش" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="owner">مالک</SelectItem>
+                  <SelectItem value="editor">ویرایشگر</SelectItem>
+                  <SelectItem value="viewer">بیننده</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter className="border-t bg-background px-4 py-3">
+            <Button size="sm" type="submit">
+              ارسال دعوتنامه <CornerDownLeft className="rtl:rotate-180" />
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+interface CtaTextProps {
+  cta: Cta;
+}
+
+const CtaText = ({ cta }: CtaTextProps) => {
+  return (
+    <p className="text-xs text-muted-foreground sm:text-sm">
+      {cta.title}{" "}
+      <a href={cta.ctaLink} className="whitespace-nowrap underline">
+        {cta.ctaText}
+      </a>
+    </p>
+  );
+};
+
+interface UserCardProps {
+  user: User;
+}
+
+const UserCard = ({ user }: UserCardProps) => {
+  return (
+    <div className="flex w-full items-center justify-between">
+      <div className="flex items-center gap-2 sm:flex-2/3">
+        <div className="flex size-10 items-center justify-center overflow-hidden rounded-full bg-muted">
+          {user.image ? (
+            <img
+              src={user.image}
+              alt={`تصویر ${user.name}`}
+              className="size-full object-cover"
+            />
+          ) : (
+            <span className="text-sm font-medium">{user.name.charAt(0)}</span>
+          )}
+        </div>
+        <div className="text-sm font-medium">
+          <p>{user.name}</p>
+          <p className="text-xs text-muted-foreground">{user.email}</p>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3 sm:flex-1/3">
+        <Select defaultValue={user.accessLevel}>
+          <SelectTrigger className="min-w-24">
+            <SelectValue placeholder="انتخاب نقش" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="مالک">مالک</SelectItem>
+            <SelectItem value="ویرایشگر">ویرایشگر</SelectItem>
+            <SelectItem value="بیننده">بیننده</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" aria-label="باز کردن منو" size="icon-sm">
+              <MoreHorizontalIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-fit max-w-56" align="end">
+            <DropdownMenuItem>انتقال مالکیت</DropdownMenuItem>
+            <DropdownMenuItem>حذف از تیم</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+};
+
+interface UsersListProps {
+  users: User[];
+}
+
+const UsersList = ({ users }: UsersListProps) => {
+  return (
+    <ul className="overflow-x-auto">
+      {users.map((user, i) => {
+        return (
+          <li
+            key={`user-card-${i}`}
+            className="w-full min-w-80 shrink-0 border-b py-3 first:pt-0"
+          >
+            <UserCard user={user} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
diff --git a/blocks/settings-members3.tsx b/blocks/settings-members3.tsx
new file mode 100644
index 0000000..8b5471b
--- /dev/null
+++ b/blocks/settings-members3.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import { Mail, MoreHorizontal, Shield, UserPlus } from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface Member {
+  id: string;
+  name: string;
+  email: string;
+  role: "admin" | "member" | "viewer";
+  avatar?: string;
+  joinedAt: string;
+}
+
+interface SettingsMembers3Props {
+  heading?: string;
+  description?: string;
+  members?: Member[];
+  className?: string;
+}
+
+const roleColors = {
+  admin: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400",
+  member: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+  viewer: "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
+};
+
+const getRoleLabel = (role: Member["role"]) => {
+  const labels: Record<Member["role"], string> = {
+    admin: "مدیر",
+    member: "عضو",
+    viewer: "بیننده",
+  };
+  return labels[role];
+};
+
+const SettingsMembers3 = ({
+  heading = "اعضای تیم",
+  description = "اعضای تیم و سطح دسترسی آن‌ها را مدیریت کنید.",
+  members = [
+    {
+      id: "1",
+      name: "مریم چناری",
+      email: "sarah.chen@company.io",
+      role: "admin",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
+      joinedAt: "ژانویه ۲۲۴",
+    },
+    {
+      id: "2",
+      name: "مهدی جعفری",
+      email: "marcus.j@company.io",
+      role: "member",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
+      joinedAt: "مارس ۲۲۴",
+    },
+    {
+      id: "3",
+      name: "Elena محمدی",
+      email: "elena.r@company.io",
+      role: "member",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
+      joinedAt: "آوریل ۲۲۴",
+    },
+    {
+      id: "4",
+      name: "داوود Park",
+      email: "david.p@company.io",
+      role: "viewer",
+      joinedAt: "ژوئن ۲۲۴",
+    },
+    {
+      id: "5",
+      name: "Aisha Patel",
+      email: "aisha.p@company.io",
+      role: "member",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
+      joinedAt: "اوت ۲۲۴",
+    },
+    {
+      id: "6",
+      name: "Thomas Wright",
+      email: "thomas.w@company.io",
+      role: "viewer",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
+      joinedAt: "اکتبر ۲۲۴",
+    },
+  ],
+  className,
+}: SettingsMembers3Props) => {
+  const [isInviteOpen, setIsInviteOpen] = useState(false);
+
+  return (
+    <section className="py-32">
+      <div className="container max-w-5xl">
+        <div className={cn("space-y-8", className)}>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="space-y-1">
+              <h2 className="text-xl font-semibold tracking-tight">
+                {heading}
+              </h2>
+              <p className="text-sm text-muted-foreground">{description}</p>
+            </div>
+            <Dialog open={isInviteOpen} onOpenChange={setIsInviteOpen}>
+              <DialogTrigger asChild>
+                <Button>
+                  <UserPlus className="size-4" />
+                  دعوت عضو
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>دعوت عضو تیم</DialogTitle>
+                  <DialogDescription>
+                    دعوتنامه‌ای برای پیوستن به تیم ارسال کنید.
+                  </DialogDescription>
+                </DialogHeader>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    setIsInviteOpen(false);
+                  }}
+                  className="space-y-4"
+                >
+                  <div className="space-y-2">
+                    <Label htmlFor="email">آدرس ایمیل</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="colleague@company.io"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="role">نقش</Label>
+                    <Select defaultValue="member">
+                      <SelectTrigger id="role">
+                        <SelectValue placeholder="انتخاب نقش" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="admin">مدیر</SelectItem>
+                        <SelectItem value="member">عضو</SelectItem>
+                        <SelectItem value="viewer">بیننده</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <DialogFooter>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setIsInviteOpen(false)}
+                    >
+                      انصراف
+                    </Button>
+                    <Button type="submit">ارسال دعوت</Button>
+                  </DialogFooter>
+                </form>
+              </DialogContent>
+            </Dialog>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {members.map((member) => (
+              <Card key={member.id}>
+                <CardHeader className="pb-3">
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                      <Avatar className="size-12">
+                        <AvatarImage src={member.avatar} alt={`تصویر ${member.name}`} />
+                        <AvatarFallback className="text-sm font-medium">
+                          {member.name
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="space-y-1">
+                        <CardTitle className="text-base">
+                          {member.name}
+                        </CardTitle>
+                        <Badge
+                          variant="secondary"
+                          className={cn("text-xs", roleColors[member.role])}
+                        >
+                          <Shield className="me-1 size-3" />
+                          {getRoleLabel(member.role)}
+                        </Badge>
+                      </div>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="size-8">
+                          <MoreHorizontal className="size-4" />
+                          <span className="sr-only">باز کردن منو</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>تغییر نقش</DropdownMenuItem>
+                        <DropdownMenuItem>مشاهده فعالیت</DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="text-destructive">
+                          حذف عضو
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  <CardDescription className="flex items-center gap-2 text-sm">
+                    <Mail className="size-4" />
+                    {member.email}
+                  </CardDescription>
+                  <p className="text-xs text-muted-foreground">
+                    عضویت از {member.joinedAt}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsMembers3 };
diff --git a/blocks/settings-members4.tsx b/blocks/settings-members4.tsx
new file mode 100644
index 0000000..a6fad5f
--- /dev/null
+++ b/blocks/settings-members4.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import { Trash2, UserPlus } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface Member {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  avatar?: string;
+  status: "active" | "pending";
+}
+
+interface SettingsMembers4Props {
+  heading?: string;
+  description?: string;
+  members?: Member[];
+  className?: string;
+}
+
+const SettingsMembers4 = ({
+  heading = "اعضای سازمان",
+  description = "مدیریت کسانی که به این سازمان دسترسی دارند.",
+  members = [
+    {
+      id: "1",
+      name: "نینا کووالسکی",
+      email: "nina.k@startup.co",
+      role: "مالک",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
+      status: "active",
+    },
+    {
+      id: "2",
+      name: "جیمز لیو",
+      email: "james.l@startup.co",
+      role: "مدیر",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
+      status: "active",
+    },
+    {
+      id: "3",
+      name: "راحله سبز",
+      email: "rachel.g@startup.co",
+      role: "توسعه‌دهنده",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
+      status: "active",
+    },
+    {
+      id: "4",
+      name: "Omar Hassan",
+      email: "omar.h@startup.co",
+      role: "توسعه‌دهنده",
+      status: "pending",
+    },
+    {
+      id: "5",
+      name: "لیلا Wang",
+      email: "lisa.w@startup.co",
+      role: "طراح",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
+      status: "active",
+    },
+  ],
+  className,
+}: SettingsMembers4Props) => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [isInviteOpen, setIsInviteOpen] = useState(false);
+
+  const allSelected = selectedIds.length === members.length;
+  const someSelected = selectedIds.length > 0 && !allSelected;
+
+  const toggleAll = () => {
+    if (allSelected) {
+      setSelectedIds([]);
+    } else {
+      setSelectedIds(members.map((m) => m.id));
+    }
+  };
+
+  const toggleMember = (id: string) => {
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id],
+    );
+  };
+
+  const selectedCount = selectedIds.length;
+
+  const roleStats = useMemo(() => {
+    const stats: Record<string, number> = {};
+    members.forEach((m) => {
+      stats[m.role] = (stats[m.role] || 0) + 1;
+    });
+    return stats;
+  }, [members]);
+
+  return (
+    <section className="py-32">
+      <div className="container max-w-3xl">
+        <div className={cn("space-y-6", className)}>
+          <div className="space-y-1">
+            <h2 className="text-xl font-semibold tracking-tight">{heading}</h2>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            {Object.entries(roleStats).map(([role, count]) => (
+              <Badge key={role} variant="outline" className="font-normal">
+                {role}: {count.toLocaleString("fa-IR")}
+              </Badge>
+            ))}
+          </div>
+
+          <div className="rounded-lg border">
+            <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-3">
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  checked={allSelected}
+                  onCheckedChange={toggleAll}
+                  aria-label="انتخاب همه"
+                  {...(someSelected && { "data-state": "indeterminate" })}
+                />
+                <span className="text-sm font-medium">
+                  {selectedCount > 0
+                    ? `${selectedCount.toLocaleString("fa-IR")} مورد انتخاب شده`
+                    : `${members.length.toLocaleString("fa-IR")} عضو`}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                {selectedCount > 0 && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="text-destructive hover:bg-destructive/10"
+                    onClick={() => setSelectedIds([])}
+                  >
+                    <Trash2 className="size-4" />
+                    حذف
+                  </Button>
+                )}
+                <Dialog open={isInviteOpen} onOpenChange={setIsInviteOpen}>
+                  <DialogTrigger asChild>
+                    <Button size="sm">
+                      <UserPlus className="size-4" />
+                      دعوت
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>دعوت عضو</DialogTitle>
+                      <DialogDescription>
+                        عضو جدیدی به سازمان خود اضافه کنید.
+                      </DialogDescription>
+                    </DialogHeader>
+                    <form
+                      onSubmit={(e) => {
+                        e.preventDefault();
+                        setIsInviteOpen(false);
+                      }}
+                      className="space-y-4"
+                    >
+                      <div className="space-y-2">
+                        <Label htmlFor="invite-email">آدرس ایمیل</Label>
+                        <Input
+                          id="invite-email"
+                          type="email"
+                          placeholder="name@company.com"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="invite-role">نقش</Label>
+                        <Select defaultValue="developer">
+                          <SelectTrigger id="invite-role">
+                            <SelectValue placeholder="انتخاب نقش" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="admin">مدیر</SelectItem>
+                            <SelectItem value="developer">توسعه‌دهنده</SelectItem>
+                            <SelectItem value="designer">طراح</SelectItem>
+                            <SelectItem value="viewer">بیننده</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <DialogFooter>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={() => setIsInviteOpen(false)}
+                        >
+                          انصراف
+                        </Button>
+                        <Button type="submit">ارسال دعوت</Button>
+                      </DialogFooter>
+                    </form>
+                  </DialogContent>
+                </Dialog>
+              </div>
+            </div>
+
+            <ul className="divide-y">
+              {members.map((member) => (
+                <li
+                  key={member.id}
+                  className={cn(
+                    "flex items-center gap-4 px-4 py-3 transition-colors",
+                    selectedIds.includes(member.id) && "bg-muted/30",
+                  )}
+                >
+                  <Checkbox
+                    checked={selectedIds.includes(member.id)}
+                    onCheckedChange={() => toggleMember(member.id)}
+                    aria-label={`انتخاب ${member.name}`}
+                  />
+                  <Avatar className="size-9">
+                    <AvatarImage src={member.avatar} alt={`تصویر ${member.name}`} />
+                    <AvatarFallback className="text-xs">
+                      {member.name
+                        .split(" ")
+                        .map((n) => n[0])
+                        .join("")}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <p className="truncate text-sm font-medium">
+                        {member.name}
+                      </p>
+                      {member.status === "pending" && (
+                        <Badge
+                          variant="secondary"
+                          className="bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+                        >
+                          در انتظار
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {member.email}
+                    </p>
+                  </div>
+                  <Badge variant="outline" className="shrink-0 font-normal">
+                    {member.role}
+                  </Badge>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsMembers4 };
diff --git a/blocks/settings-members5.tsx b/blocks/settings-members5.tsx
new file mode 100644
index 0000000..e998123
--- /dev/null
+++ b/blocks/settings-members5.tsx
@@ -0,0 +1,352 @@
+"use client";
+
+import {
+  Clock,
+  MoreVertical,
+  Send,
+  UserCheck,
+  UserPlus,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface ActiveMember {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  avatar?: string;
+  lastActive: string;
+}
+
+interface PendingInvite {
+  id: string;
+  email: string;
+  role: string;
+  sentAt: string;
+  expiresIn: string;
+}
+
+interface SettingsMembers5Props {
+  heading?: string;
+  description?: string;
+  activeMembers?: ActiveMember[];
+  pendingInvites?: PendingInvite[];
+  className?: string;
+}
+
+const SettingsMembers5 = ({
+  heading = "مدیریت تیم",
+  description = "اعضای فعال را ببینید و دعوت‌های در انتظار را مدیریت کنید.",
+  activeMembers = [
+    {
+      id: "1",
+      name: "Priya Sharma",
+      email: "priya@designlab.io",
+      role: "مالک",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
+      lastActive: "الان",
+    },
+    {
+      id: "2",
+      name: "Kevin O'Brien",
+      email: "kevin@designlab.io",
+      role: "مدیر",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar12.jpg",
+      lastActive: "۲ ساعت پیش",
+    },
+    {
+      id: "3",
+      name: "Yuki Tanaka",
+      email: "yuki@designlab.io",
+      role: "ویرایشگر",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar13.jpg",
+      lastActive: "دیروز",
+    },
+    {
+      id: "4",
+      name: "Carlos Mendez",
+      email: "carlos@designlab.io",
+      role: "ویرایشگر",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar14.jpg",
+      lastActive: "۳ روز پیش",
+    },
+  ],
+  pendingInvites = [
+    {
+      id: "p1",
+      email: "maya.wilson@gmail.com",
+      role: "ویرایشگر",
+      sentAt: "۱۵ ژانویه ۲۲۶",
+      expiresIn: "۵ روز",
+    },
+    {
+      id: "p2",
+      email: "alex.foster@outlook.com",
+      role: "بیننده",
+      sentAt: "۲۰ ژانویه ۲۲۶",
+      expiresIn: "۱۰ روز",
+    },
+  ],
+  className,
+}: SettingsMembers5Props) => {
+  const [isInviteOpen, setIsInviteOpen] = useState(false);
+
+  return (
+    <section className="py-32">
+      <div className="container max-w-3xl">
+        <div className={cn("space-y-6", className)}>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+            <div className="space-y-1">
+              <h2 className="text-xl font-semibold tracking-tight">
+                {heading}
+              </h2>
+              <p className="text-sm text-muted-foreground">{description}</p>
+            </div>
+            <Dialog open={isInviteOpen} onOpenChange={setIsInviteOpen}>
+              <DialogTrigger asChild>
+                <Button>
+                  <UserPlus className="size-4" />
+                  دعوت
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>دعوت عضو جدید</DialogTitle>
+                  <DialogDescription>
+                    دعوتنامه ایمیلی برای پیوستن به تیم ارسال کنید.
+                  </DialogDescription>
+                </DialogHeader>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    setIsInviteOpen(false);
+                  }}
+                  className="space-y-4"
+                >
+                  <div className="space-y-2">
+                    <Label htmlFor="new-email">آدرس ایمیل</Label>
+                    <Input
+                      id="new-email"
+                      type="email"
+                      placeholder="colleague@example.com"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="new-role">تعیین نقش</Label>
+                    <Select defaultValue="editor">
+                      <SelectTrigger id="new-role">
+                        <SelectValue placeholder="انتخاب نقش" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="admin">مدیر</SelectItem>
+                        <SelectItem value="editor">ویرایشگر</SelectItem>
+                        <SelectItem value="viewer">بیننده</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <DialogFooter>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setIsInviteOpen(false)}
+                    >
+                      انصراف
+                    </Button>
+                    <Button type="submit">
+                      <Send className="size-4" />
+                      ارسال دعوت
+                    </Button>
+                  </DialogFooter>
+                </form>
+              </DialogContent>
+            </Dialog>
+          </div>
+
+          <Tabs defaultValue="active" className="w-full">
+            <TabsList className="w-full justify-start">
+              <TabsTrigger value="active" className="gap-2">
+                <UserCheck className="size-4" />
+                فعال
+                <Badge
+                  variant="secondary"
+                  className="ms-1 size-5 justify-center rounded-full p-0 text-xs"
+                >
+                  {activeMembers.length.toLocaleString("fa-IR")}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger value="pending" className="gap-2">
+                <Clock className="size-4" />
+                در انتظار
+                {pendingInvites.length > 0 && (
+                  <Badge
+                    variant="secondary"
+                    className="ms-1 size-5 justify-center rounded-full bg-amber-100 p-0 text-xs text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+                  >
+                    {pendingInvites.length.toLocaleString("fa-IR")}
+                  </Badge>
+                )}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="active" className="mt-4">
+              <div className="rounded-lg border">
+                <ul className="divide-y">
+                  {activeMembers.map((member) => (
+                    <li
+                      key={member.id}
+                      className="flex items-center justify-between gap-4 px-4 py-3"
+                    >
+                      <div className="flex items-center gap-3">
+                        <Avatar className="size-10">
+                          <AvatarImage src={member.avatar} alt={`تصویر ${member.name}`} />
+                          <AvatarFallback>
+                            {member.name
+                              .split(" ")
+                              .map((n) => n[0])
+                              .join("")}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div>
+                          <p className="text-sm font-medium">{member.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {member.email}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <div className="hidden text-end sm:block">
+                          <Badge variant="outline" className="font-normal">
+                            {member.role}
+                          </Badge>
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            {member.lastActive === "الان" ? (
+                              <span className="flex items-center gap-1">
+                                <span className="size-2 rounded-full bg-green-500" />
+                                آنلاین
+                              </span>
+                            ) : (
+                              `فعال، ${member.lastActive}`
+                            )}
+                          </p>
+                        </div>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-8"
+                            >
+                              <MoreVertical className="size-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem>ویرایش نقش</DropdownMenuItem>
+                            <DropdownMenuItem>مشاهده پروفایل</DropdownMenuItem>
+                            <DropdownMenuItem className="text-destructive">
+                              حذف
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="pending" className="mt-4">
+              {pendingInvites.length === 0 ? (
+                <div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-center">
+                  <Clock className="mb-3 size-10 text-muted-foreground/50" />
+                  <p className="text-sm font-medium">دعوت در انتظاری وجود ندارد</p>
+                  <p className="text-xs text-muted-foreground">
+                    برای شروع، اعضای تیم را دعوت کنید
+                  </p>
+                </div>
+              ) : (
+                <div className="rounded-lg border">
+                  <ul className="divide-y">
+                    {pendingInvites.map((invite) => (
+                      <li
+                        key={invite.id}
+                        className="flex items-center justify-between gap-4 px-4 py-3"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="flex size-10 items-center justify-center rounded-full bg-muted">
+                            <Clock className="size-4 text-muted-foreground" />
+                          </div>
+                          <div>
+                            <p className="text-sm font-medium">
+                              {invite.email}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              ارسال‌شده {invite.sentAt} · انقضا تا{" "}
+                              {invite.expiresIn}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Badge variant="outline" className="font-normal">
+                            {invite.role}
+                          </Badge>
+                          <Button variant="ghost" size="sm">
+                            <Send className="size-4" />
+                            ارسال مجدد
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-8 text-muted-foreground hover:text-destructive"
+                          >
+                            <X className="size-4" />
+                          </Button>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsMembers5 };
diff --git a/blocks/settings-notifications1.tsx b/blocks/settings-notifications1.tsx
new file mode 100644
index 0000000..0b370d5
--- /dev/null
+++ b/blocks/settings-notifications1.tsx
@@ -0,0 +1,162 @@
+import { Bell, Mail, Smartphone } from "lucide-react";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface NotificationSettingItem {
+  id: string;
+  title: string;
+  description: string;
+  email: boolean;
+  app: boolean;
+}
+
+interface NotificationSettingsTableProps {
+  notificationSettings: NotificationSettingItem[];
+}
+
+const NotificationSettingsTable = ({
+  notificationSettings,
+}: NotificationSettingsTableProps) => {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow className="[&_div]:flex [&_div]:items-center [&_div]:justify-center [&_div]:gap-1 [&_div]:font-semibold [&_div]:text-muted-foreground/80 [&_div_svg]:size-4">
+          <TableHead>
+            <div className="!justify-start">
+              <Bell /> موضوع اطلاع‌رسانی
+            </div>
+          </TableHead>
+          <TableHead>
+            <div>
+              <Mail /> ایمیل
+            </div>
+          </TableHead>
+          <TableHead>
+            <div>
+              <Smartphone /> اپلیکیشن
+            </div>
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {notificationSettings.map((notification) => {
+          return (
+            <TableRow key={notification.id}>
+              <TableCell>
+                <p className="font-semibold">{notification.title}</p>
+                <p className="text-xs font-medium text-muted-foreground/70">
+                  {notification.description}
+                </p>
+              </TableCell>
+              <TableCell className="text-center">
+                <Checkbox defaultChecked={notification.email} />
+              </TableCell>
+              <TableCell className="text-center">
+                <Checkbox defaultChecked={notification.app} />
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+};
+
+interface SettingsNotifications1Props {
+  heading?: string;
+  subHeading?: string;
+  className?: string;
+  notificationSettings?: NotificationSettingItem[];
+}
+
+const SettingsNotifications1 = ({
+  heading = "اعلان‌ها",
+  subHeading = "تنظیمات ایمیل و اعلان‌های فوری خود را مدیریت کنید.",
+  notificationSettings = [
+    {
+      id: "mentions",
+      title: "ارجاع مستقیم",
+      description:
+        "وقتی هم‌تیمی شما را به یک لید، تسک یا گفت‌وگو ارجاع می‌دهد، مطلع شوید.",
+      email: true,
+      app: true,
+    },
+    {
+      id: "replies",
+      title: "پاسخ به نظرات",
+      description: "وقتی دیگران به گفت‌وگوهای شما پاسخ می‌دهند، به‌روزرسانی دریافت کنید.",
+      email: true,
+      app: true,
+    },
+    {
+      id: "access-requests",
+      title: "درخواست‌های دسترسی",
+      description:
+        "از درخواست‌های مجوز و تغییر وضعیت تأیید مطلع بمانید.",
+      email: true,
+      app: true,
+    },
+    {
+      id: "task-assignments",
+      title: "تکالیف جدید",
+      description: "وقتی وظیفه یا موردی به شما محول می‌شود، مطلع شوید.",
+      email: true,
+      app: true,
+    },
+    {
+      id: "shared-items",
+      title: "محتوای اشتراک‌گذاری‌شده",
+      description:
+        "وقتی همکاران فایل، لینک یا محتوای دیگری با شما به اشتراک می‌گذارند، مطلع شوید.",
+      email: true,
+      app: true,
+    },
+  ],
+  className,
+}: SettingsNotifications1Props) => {
+  return (
+    <section className="py-32">
+      <div
+        className={cn(
+          "container max-w-4xl space-y-10 tracking-tight",
+          className,
+        )}
+      >
+        <div className="space-y-2">
+          <h3 className="text-xl font-semibold">{heading}</h3>
+          <p className="font-medium text-muted-foreground">{subHeading}</p>
+        </div>
+
+        <div className="flex w-full items-center justify-between gap-4 border-y py-10">
+          <div>
+            <p className="font-semibold">خلاصه صبحگاهی</p>
+            <p className="text-sm font-medium text-muted-foreground">
+              مروری روزانه بر برجسته‌ترین فعالیت‌ها و مهلت‌های پیش رو.
+            </p>
+          </div>
+          <Switch />
+        </div>
+
+        <div className="space-y-4">
+          <p className="text-lg font-semibold">هشدارهای فعالیت تیم</p>
+
+          <NotificationSettingsTable
+            notificationSettings={notificationSettings}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsNotifications1 };
diff --git a/blocks/settings-notifications2.tsx b/blocks/settings-notifications2.tsx
new file mode 100644
index 0000000..96802d6
--- /dev/null
+++ b/blocks/settings-notifications2.tsx
@@ -0,0 +1,83 @@
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+interface NotificationItem {
+  id: string;
+  title: string;
+  description: string;
+  enabled: boolean;
+}
+
+interface SettingsNotifications2Props {
+  heading?: string;
+  subHeading?: string;
+  className?: string;
+  notifications?: NotificationItem[];
+}
+
+const SettingsNotifications2 = ({
+  heading = "اعلان‌ها",
+  subHeading = "انتخاب کنید کدام اعلان‌ها را دریافت کنید.",
+  notifications = [
+    {
+      id: "email-updates",
+      title: "به‌روزرسانی‌های ایمیل",
+      description: "ایمیل‌های مربوط به فعالیت حساب و امنیت دریافت کنید.",
+      enabled: true,
+    },
+    {
+      id: "push-notifications",
+      title: "اعلان‌های فوری",
+      description: "اعلان‌های فوری را روی موبایل دریافت کنید.",
+      enabled: true,
+    },
+    {
+      id: "weekly-digest",
+      title: "خلاصه هفتگی",
+      description: "خلاصه هفتگی فعالیت و بینش‌ها را دریافت کنید.",
+      enabled: false,
+    },
+    {
+      id: "marketing-emails",
+      title: "ایمیل‌های بازاریابی",
+      description: "نکات، به‌روزرسانی محصول و پیشنهادهای تبلیغاتی دریافت کنید.",
+      enabled: false,
+    },
+  ],
+  className,
+}: SettingsNotifications2Props) => {
+  return (
+    <section className="py-32">
+      <div
+        className={cn(
+          "container max-w-2xl space-y-8 tracking-tight",
+          className,
+        )}
+      >
+        <div className="space-y-2">
+          <h3 className="text-xl font-semibold">{heading}</h3>
+          <p className="font-medium text-muted-foreground">{subHeading}</p>
+        </div>
+
+        <div className="divide-y">
+          {notifications.map((notification) => (
+            <div
+              key={notification.id}
+              className="flex items-center justify-between gap-4 py-4"
+            >
+              <div className="space-y-0.5">
+                <p className="font-medium">{notification.title}</p>
+                <p className="text-sm text-muted-foreground">
+                  {notification.description}
+                </p>
+              </div>
+              <Switch defaultChecked={notification.enabled} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsNotifications2 };
diff --git a/blocks/settings-notifications3.tsx b/blocks/settings-notifications3.tsx
new file mode 100644
index 0000000..bb92b38
--- /dev/null
+++ b/blocks/settings-notifications3.tsx
@@ -0,0 +1,135 @@
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+interface NotificationItem {
+  id: string;
+  title: string;
+  description: string;
+  enabled: boolean;
+}
+
+interface NotificationCategory {
+  id: string;
+  title: string;
+  notifications: NotificationItem[];
+}
+
+interface SettingsNotifications3Props {
+  heading?: string;
+  subHeading?: string;
+  className?: string;
+  categories?: NotificationCategory[];
+}
+
+const SettingsNotifications3 = ({
+  heading = "اعلان‌ها",
+  subHeading = "نحوه دریافت اعلان‌ها در بخش‌های مختلف را مدیریت کنید.",
+  categories = [
+    {
+      id: "activity",
+      title: "فعالیت",
+      notifications: [
+        {
+          id: "comments",
+          title: "نظرات",
+          description: "وقتی کسی روی پست‌های شما نظر می‌گذارد یا به شما پاسخ می‌دهد.",
+          enabled: true,
+        },
+        {
+          id: "mentions",
+          title: "ارجاع‌ها",
+          description:
+            "وقتی هم‌تیمی شما را به یک لید، تیکت یا تسک ارجاع می‌دهد.",
+          enabled: true,
+        },
+        {
+          id: "follows",
+          title: "دنبال‌کنندگان جدید",
+          description: "وقتی کسی شروع به دنبال کردن حساب شما می‌کند.",
+          enabled: false,
+        },
+      ],
+    },
+    {
+      id: "updates",
+      title: "به‌روزرسانی‌ها",
+      notifications: [
+        {
+          id: "product-updates",
+          title: "به‌روزرسانی محصول",
+          description: "اخبار قابلیت‌ها و بهبودهای جدید.",
+          enabled: true,
+        },
+        {
+          id: "tips",
+          title: "نکات و آموزش‌ها",
+          description: "محتوای مفید برای استفاده بهتر از پلتفرم.",
+          enabled: false,
+        },
+      ],
+    },
+    {
+      id: "account",
+      title: "حساب",
+      notifications: [
+        {
+          id: "security",
+          title: "هشدارهای امنیتی",
+          description: "هشدارهای مهم درباره امنیت حساب شما.",
+          enabled: true,
+        },
+        {
+          id: "billing",
+          title: "به‌روزرسانی صورتحساب",
+          description: "اعلان‌های مربوط به پرداخت‌ها و فاکتورها.",
+          enabled: true,
+        },
+      ],
+    },
+  ],
+  className,
+}: SettingsNotifications3Props) => {
+  return (
+    <section className="py-32">
+      <div
+        className={cn(
+          "container max-w-2xl space-y-10 tracking-tight",
+          className,
+        )}
+      >
+        <div className="space-y-2">
+          <h3 className="text-xl font-semibold">{heading}</h3>
+          <p className="font-medium text-muted-foreground">{subHeading}</p>
+        </div>
+
+        <div className="space-y-8">
+          {categories.map((category) => (
+            <div key={category.id} className="space-y-4">
+              <h4 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
+                {category.title}
+              </h4>
+              <div className="divide-y rounded-lg border">
+                {category.notifications.map((notification) => (
+                  <div
+                    key={notification.id}
+                    className="flex items-center justify-between gap-4 p-4"
+                  >
+                    <div className="space-y-0.5">
+                      <p className="font-medium">{notification.title}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {notification.description}
+                      </p>
+                    </div>
+                    <Switch defaultChecked={notification.enabled} />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsNotifications3 };
diff --git a/blocks/settings-notifications4.tsx b/blocks/settings-notifications4.tsx
new file mode 100644
index 0000000..18588b3
--- /dev/null
+++ b/blocks/settings-notifications4.tsx
@@ -0,0 +1,143 @@
+import { Bell, Mail, MessageSquare } from "lucide-react";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface NotificationSettingItem {
+  id: string;
+  title: string;
+  description: string;
+  email: boolean;
+  sms: boolean;
+}
+
+interface SettingsNotifications4Props {
+  heading?: string;
+  subHeading?: string;
+  className?: string;
+  notifications?: NotificationSettingItem[];
+}
+
+const SettingsNotifications4 = ({
+  heading = "اعلان‌ها",
+  subHeading = "تنظیمات ایمیل و پیامک خود را مدیریت کنید.",
+  notifications = [
+    {
+      id: "mentions",
+      title: "ارجاع مستقیم",
+      description:
+        "وقتی هم‌تیمی شما را به یک لید یا تسک ارجاع می‌دهد، مطلع شوید.",
+      email: true,
+      sms: false,
+    },
+    {
+      id: "comments",
+      title: "نظرات",
+      description: "وقتی کسی روی پست‌های شما نظر می‌گذارد، به‌روزرسانی دریافت کنید.",
+      email: true,
+      sms: false,
+    },
+    {
+      id: "messages",
+      title: "پیام‌های مستقیم",
+      description: "پیام‌های خصوصی جدید از سایر کاربران.",
+      email: true,
+      sms: true,
+    },
+    {
+      id: "assignments",
+      title: "محول‌شدن وظایف",
+      description: "وقتی وظیفه‌ای به شما محول می‌شود.",
+      email: true,
+      sms: false,
+    },
+    {
+      id: "deadlines",
+      title: "یادآور مهلت‌ها",
+      description: "یادآوری برای مهلت‌های پیش رو.",
+      email: true,
+      sms: true,
+    },
+    {
+      id: "security",
+      title: "هشدارهای امنیتی",
+      description: "اعلان‌های مهم امنیتی برای حساب شما.",
+      email: true,
+      sms: true,
+    },
+    {
+      id: "billing",
+      title: "به‌روزرسانی صورتحساب",
+      description: "اعلان‌های مربوط به پرداخت‌ها و فاکتورها.",
+      email: true,
+      sms: false,
+    },
+  ],
+  className,
+}: SettingsNotifications4Props) => {
+  return (
+    <section className="py-32">
+      <div
+        className={cn(
+          "container max-w-4xl space-y-8 tracking-tight",
+          className,
+        )}
+      >
+        <div className="space-y-2">
+          <h3 className="text-xl font-semibold">{heading}</h3>
+          <p className="font-medium text-muted-foreground">{subHeading}</p>
+        </div>
+
+        <Table>
+          <TableHeader>
+            <TableRow className="[&_div]:flex [&_div]:items-center [&_div]:justify-center [&_div]:gap-1.5 [&_div]:font-semibold [&_div]:text-muted-foreground/80 [&_div_svg]:size-4">
+              <TableHead>
+                <div className="!justify-start">
+                  <Bell /> موضوع اطلاع‌رسانی
+                </div>
+              </TableHead>
+              <TableHead>
+                <div>
+                  <Mail /> ایمیل
+                </div>
+              </TableHead>
+              <TableHead>
+                <div>
+                  <MessageSquare /> پیامک
+                </div>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {notifications.map((notification) => (
+              <TableRow key={notification.id}>
+                <TableCell>
+                  <p className="font-semibold">{notification.title}</p>
+                  <p className="text-xs font-medium text-muted-foreground/70">
+                    {notification.description}
+                  </p>
+                </TableCell>
+                <TableCell className="text-center">
+                  <Checkbox defaultChecked={notification.email} />
+                </TableCell>
+                <TableCell className="text-center">
+                  <Checkbox defaultChecked={notification.sms} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsNotifications4 };
diff --git a/blocks/settings-profile1.tsx b/blocks/settings-profile1.tsx
new file mode 100644
index 0000000..6a974c9
--- /dev/null
+++ b/blocks/settings-profile1.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { Camera, X } from "lucide-react";
+import { useState } from "react";
+
+import {
+  FileUpload,
+  FileUploadItem,
+  FileUploadItemDelete,
+  FileUploadList,
+  FileUploadTrigger,
+} from "@/components/diceui/file-upload";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface ProfileFormData {
+  name: string;
+  email: string;
+  username: string;
+  avatar?: string;
+  bio?: string;
+}
+
+interface SettingsProfile1Props {
+  defaultValues?: Partial<ProfileFormData>;
+  onSave?: (data: ProfileFormData) => void;
+  className?: string;
+}
+
+const SettingsProfile1 = ({
+  defaultValues = {
+    name: "الهام میرزایی",
+    email: "alex.morgan@email.com",
+    username: "alexmorgan",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+    bio: "طراح محصول با بیش از ۸ سال تجربه در خلق تجربه‌های دیجیتال کاربرپسند. در حال حاضر روی سیستم‌های طراحی و دسترس‌پذیری تمرکز دارم.",
+  },
+  className,
+}: SettingsProfile1Props) => {
+  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);
+
+  const initials = defaultValues.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase();
+
+  // Get preview URL from uploaded file or use default avatar
+  const avatarPreview =
+    avatarFiles.length > 0
+      ? URL.createObjectURL(avatarFiles[0])
+      : defaultValues.avatar;
+
+  return (
+    <Card className={cn("w-full max-w-lg", className)}>
+      <CardHeader>
+        <CardTitle>پروفایل</CardTitle>
+        <CardDescription>
+          اطلاعات شخصی و تصویر پروفایل خود را به‌روزرسانی کنید.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Avatar Upload */}
+        <FileUpload
+          value={avatarFiles}
+          onValueChange={setAvatarFiles}
+          accept="image/*"
+          maxFiles={1}
+          maxSize={2 * 1024 * 1024}
+        >
+          <div className="flex items-center gap-4">
+            <FileUploadTrigger asChild>
+              <button
+                type="button"
+                className="group relative size-20 shrink-0 cursor-pointer rounded-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
+              >
+                <Avatar className="size-20">
+                  <AvatarImage
+                    src={avatarPreview}
+                    alt={`تصویر ${defaultValues.name}`}
+                    className="object-cover"
+                  />
+                  <AvatarFallback className="text-xl font-semibold">
+                    {initials}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
+                  <Camera className="size-6 text-white" />
+                </div>
+              </button>
+            </FileUploadTrigger>
+
+            <div className="space-y-1">
+              <p className="text-sm font-medium">تصویر پروفایل</p>
+              <p className="text-xs text-muted-foreground">
+                برای بارگذاری تصویر جدید روی آواتار کلیک کنید
+              </p>
+              <p className="text-xs text-muted-foreground">
+                تصویر، تصویر یا تصویر. حداکثر ۲ مگابایت.
+              </p>
+            </div>
+          </div>
+
+          {avatarFiles.length > 0 && (
+            <FileUploadList className="mt-3">
+              {avatarFiles.map((file, index) => (
+                <FileUploadItem
+                  key={index}
+                  value={file}
+                  className="rounded-lg border bg-muted/30 p-2"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">{file.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {(file.size / 1024).toLocaleString("fa-IR", {
+                        maximumFractionDigits: 1,
+                      })}{" "}
+                      کیلوبایت
+                    </p>
+                  </div>
+                  <FileUploadItemDelete asChild>
+                    <Button variant="ghost" size="icon" className="size-8">
+                      <X className="size-4" />
+                    </Button>
+                  </FileUploadItemDelete>
+                </FileUploadItem>
+              ))}
+            </FileUploadList>
+          )}
+        </FileUpload>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="name">نام کامل</Label>
+            <Input
+              id="name"
+              placeholder="نام خود را وارد کنید"
+              defaultValue={defaultValues.name}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">نام کاربری</Label>
+            <Input
+              id="username"
+              placeholder="نام کاربری را وارد کنید"
+              defaultValue={defaultValues.username}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="email">ایمیل</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="ایمیل خود را وارد کنید"
+            defaultValue={defaultValues.email}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="bio">درباره من</Label>
+          <Textarea
+            id="bio"
+            placeholder="درباره خودتان بنویسید"
+            rows={4}
+            defaultValue={defaultValues.bio}
+          />
+          <p className="text-xs text-muted-foreground">
+            توضیح کوتاه برای پروفایل. حداکثر ۱۶۰ کاراکتر.
+          </p>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-end gap-2">
+        <Button variant="outline">انصراف</Button>
+        <Button>ذخیره تغییرات</Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export { SettingsProfile1 };
diff --git a/blocks/settings-profile2.tsx b/blocks/settings-profile2.tsx
new file mode 100644
index 0000000..4469c70
--- /dev/null
+++ b/blocks/settings-profile2.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import { Camera, Github, Globe, Linkedin, Twitter } from "lucide-react";
+import { useState } from "react";
+
+import { FileUpload, FileUploadTrigger } from "@/components/diceui/file-upload";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface ProfileFormData {
+  name: string;
+  email: string;
+  username: string;
+  avatar?: string;
+  bio?: string;
+  jobTitle?: string;
+  company?: string;
+  location?: string;
+  website?: string;
+  socialLinks?: {
+    twitter?: string;
+    linkedin?: string;
+    github?: string;
+  };
+}
+
+interface SettingsProfile2Props {
+  defaultValues?: Partial<ProfileFormData>;
+  onSave?: (data: ProfileFormData) => void;
+  className?: string;
+}
+
+const SettingsProfile2 = ({
+  defaultValues = {
+    name: "Jordan چناری",
+    email: "jordan.chen@email.com",
+    username: "jordanchen",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
+    bio: "توسعه‌دهنده فول‌استک با اشتیاق به ساخت محصولات تأثیرگذار. مشارکت‌کننده متن‌باز و گاهی نویسنده وبلاگ فناوری.",
+    jobTitle: "مهندس نرم‌افزار ارشد",
+    company: "ری یو آی Inc",
+    location: "Seattle, WA",
+    website: "https://jordanchen.dev",
+    socialLinks: {
+      twitter: "jordanchen",
+      linkedin: "jordanchen",
+      github: "jordanchen",
+    },
+  },
+  className,
+}: SettingsProfile2Props) => {
+  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);
+
+  const initials = defaultValues.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase();
+
+  const avatarPreview =
+    avatarFiles.length > 0
+      ? URL.createObjectURL(avatarFiles[0])
+      : defaultValues.avatar;
+
+  return (
+    <Card className={cn("w-full max-w-2xl", className)}>
+      <CardHeader>
+        <CardTitle>ویرایش پروفایل</CardTitle>
+        <CardDescription>
+          اطلاعات عمومی پروفایل خود را مدیریت کنید.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-8">
+        {/* Avatar Section */}
+        <FileUpload
+          value={avatarFiles}
+          onValueChange={setAvatarFiles}
+          accept="image/*"
+          maxFiles={1}
+          maxSize={2 * 1024 * 1024}
+        >
+          <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
+            <div className="relative">
+              <Avatar className="size-24">
+                <AvatarImage
+                  src={avatarPreview}
+                  alt={`تصویر ${defaultValues.name}`}
+                  className="object-cover"
+                />
+                <AvatarFallback className="text-xl font-semibold">
+                  {initials}
+                </AvatarFallback>
+              </Avatar>
+              <FileUploadTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="secondary"
+                  className="absolute -end-1 -bottom-1 size-8 rounded-full shadow-md"
+                >
+                  <Camera className="size-4" />
+                </Button>
+              </FileUploadTrigger>
+            </div>
+            <div className="space-y-1 text-center sm:text-start">
+              <p className="text-sm font-medium">تصویر پروفایل</p>
+              <p className="text-xs text-muted-foreground">
+                برای بارگذاری تصویر جدید روی آیکون دوربین کلیک کنید.
+                <br />
+                پیشنهاد: تصویر مربعی، حداقل ۴۰۰×۴۰۰ پیکسل.
+              </p>
+            </div>
+          </div>
+        </FileUpload>
+
+        <Separator />
+
+        {/* Personal Information */}
+        <div className="space-y-4">
+          <h3 className="text-sm font-medium">اطلاعات شخصی</h3>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="name">نام کامل</Label>
+              <Input id="name" defaultValue={defaultValues.name} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="username">نام کاربری</Label>
+              <div className="flex">
+                <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                  @
+                </span>
+                <Input
+                  id="username"
+                  className="rounded-s-none"
+                  defaultValue={defaultValues.username}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="bio">درباره من</Label>
+            <Textarea
+              id="bio"
+              rows={3}
+              defaultValue={defaultValues.bio}
+              placeholder="درباره خودتان چند خط بنویسید"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Work Information */}
+        <div className="space-y-4">
+          <h3 className="text-sm font-medium">کار</h3>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="jobTitle">عنوان شغلی</Label>
+              <Input id="jobTitle" defaultValue={defaultValues.jobTitle} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="company">شرکت</Label>
+              <Input id="company" defaultValue={defaultValues.company} />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="location">موقعیت</Label>
+            <Input
+              id="location"
+              defaultValue={defaultValues.location}
+              placeholder="شهر، کشور"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Social Links */}
+        <div className="space-y-4">
+          <h3 className="text-sm font-medium">لینک‌های شبکه‌های اجتماعی</h3>
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <Globe className="size-5 shrink-0 text-muted-foreground" />
+              <Input
+                placeholder="https://yourwebsite.com"
+                defaultValue={defaultValues.website}
+              />
+            </div>
+            <div className="flex items-center gap-3">
+              <Twitter className="size-5 shrink-0 text-muted-foreground" />
+              <div className="flex flex-1">
+                <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                  x.com/
+                </span>
+                <Input
+                  className="rounded-s-none"
+                  placeholder="نام کاربری"
+                  defaultValue={defaultValues.socialLinks?.twitter}
+                />
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Linkedin className="size-5 shrink-0 text-muted-foreground" />
+              <div className="flex flex-1">
+                <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                  شبکه حرفه‌ای.com/in/
+                </span>
+                <Input
+                  className="rounded-s-none"
+                  placeholder="نام کاربری"
+                  defaultValue={defaultValues.socialLinks?.linkedin}
+                />
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Github className="size-5 shrink-0 text-muted-foreground" />
+              <div className="flex flex-1">
+                <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                  مخزن کد.com/
+                </span>
+                <Input
+                  className="rounded-s-none"
+                  placeholder="نام کاربری"
+                  defaultValue={defaultValues.socialLinks?.github}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4">
+          <Button variant="outline">انصراف</Button>
+          <Button>ذخیره تغییرات</Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { SettingsProfile2 };
diff --git a/blocks/settings-profile3.tsx b/blocks/settings-profile3.tsx
new file mode 100644
index 0000000..7c5fa57
--- /dev/null
+++ b/blocks/settings-profile3.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { Upload, X } from "lucide-react";
+import { useState } from "react";
+
+import { FileUpload, FileUploadTrigger } from "@/components/diceui/file-upload";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface ProfileFormData {
+  name: string;
+  email: string;
+  avatar?: string;
+  coverImage?: string;
+  bio?: string;
+  timezone?: string;
+  language?: string;
+}
+
+interface SettingsProfile3Props {
+  defaultValues?: Partial<ProfileFormData>;
+  onSave?: (data: ProfileFormData) => void;
+  className?: string;
+}
+
+const SettingsProfile3 = ({
+  defaultValues = {
+    name: "Sam Rivera",
+    email: "sam.rivera@email.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
+    coverImage:
+      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
+    bio: "مدیر بازاریابی و استراتژیست رشد که به استارتاپ‌های SaaS در جذب مشتری و افزایش MRR کمک می‌کند. علاقه‌مند به تحلیل داده و اتوماسیون.",
+    timezone: "America/Los_Angeles",
+    language: "en",
+  },
+  className,
+}: SettingsProfile3Props) => {
+  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);
+  const [coverFiles, setCoverFiles] = useState<File[]>([]);
+
+  const initials = defaultValues.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase();
+
+  const avatarPreview =
+    avatarFiles.length > 0
+      ? URL.createObjectURL(avatarFiles[0])
+      : defaultValues.avatar;
+
+  const coverPreview =
+    coverFiles.length > 0
+      ? URL.createObjectURL(coverFiles[0])
+      : defaultValues.coverImage;
+
+  return (
+    <div className={cn("w-full max-w-2xl space-y-6", className)}>
+      {/* Cover Image Card */}
+      <Card className="overflow-hidden pt-0">
+        <FileUpload
+          value={coverFiles}
+          onValueChange={setCoverFiles}
+          accept="image/*"
+          maxFiles={1}
+          maxSize={5 * 1024 * 1024}
+        >
+          <div
+            className="relative h-32 bg-muted bg-cover bg-center sm:h-40"
+            style={{
+              backgroundImage: coverPreview
+                ? `url(${coverPreview})`
+                : undefined,
+            }}
+          >
+            <div className="absolute inset-0 bg-black/20" />
+            <div className="absolute start-3 bottom-3 flex gap-2">
+              <FileUploadTrigger asChild>
+                <Button size="sm" variant="secondary" className="shadow-md">
+                  <Upload className="me-2 size-4" />
+                  تغییر کاور
+                </Button>
+              </FileUploadTrigger>
+              {coverFiles.length > 0 && (
+                <Button
+                  size="icon"
+                  variant="secondary"
+                  className="size-8 shadow-md"
+                  onClick={() => setCoverFiles([])}
+                >
+                  <X className="size-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </FileUpload>
+
+        <CardContent className="-mt-12 pb-6 sm:-mt-14">
+          <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-end">
+            <FileUpload
+              dir="rtl"
+              value={avatarFiles}
+              onValueChange={setAvatarFiles}
+              accept="image/*"
+              maxFiles={1}
+              maxSize={2 * 1024 * 1024}
+            >
+              <div className="relative">
+                <Avatar className="size-24 border-4 border-card shadow-lg sm:size-28">
+                  <AvatarImage
+                    src={avatarPreview}
+                    alt={`تصویر ${defaultValues.name}`}
+                    className="object-cover"
+                  />
+                  <AvatarFallback className="text-xl font-semibold">
+                    {initials}
+                  </AvatarFallback>
+                </Avatar>
+                <FileUploadTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="secondary"
+                    className="absolute -end-1 -bottom-1 size-8 rounded-full shadow-md"
+                  >
+                    <Upload className="size-4" />
+                  </Button>
+                </FileUploadTrigger>
+              </div>
+            </FileUpload>
+            <div className="space-y-1 text-center sm:pb-1 sm:text-start">
+              <h3 className="text-lg font-semibold">{defaultValues.name}</h3>
+              <p className="text-sm text-muted-foreground">
+                {defaultValues.email}
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Basic Info Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>اطلاعات پایه</CardTitle>
+          <CardDescription>
+            این اطلاعات در پروفایل عمومی شما نمایش داده می‌شود.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">نام نمایشی</Label>
+            <Input id="name" defaultValue={defaultValues.name} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="bio">درباره</Label>
+            <Textarea
+              id="bio"
+              rows={4}
+              defaultValue={defaultValues.bio}
+              placeholder="درباره خودتان برای دیگران بنویسید"
+            />
+            <p className="text-xs text-muted-foreground">
+              می‌توانید از قالب‌بندی متن برای قالب‌بندی استفاده کنید
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Preferences Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>ترجیحات</CardTitle>
+          <CardDescription>
+            تجربه خود را با تنظیمات منطقه‌ای شخصی‌سازی کنید.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="language">زبان</Label>
+              <Select defaultValue={defaultValues.language}>
+                <SelectTrigger id="language">
+                  <SelectValue placeholder="انتخاب زبان" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="fa">فارسی</SelectItem>
+                  <SelectItem value="en">انگلیسی</SelectItem>
+                  <SelectItem value="es">اسپانیایی</SelectItem>
+                  <SelectItem value="fr">فرانسوی</SelectItem>
+                  <SelectItem value="de">آلمانی</SelectItem>
+                  <SelectItem value="ja">ژاپنی</SelectItem>
+                  <SelectItem value="zh">چینی</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="timezone">منطقه زمانی</Label>
+              <Select defaultValue={defaultValues.timezone}>
+                <SelectTrigger id="timezone">
+                  <SelectValue placeholder="انتخاب منطقه زمانی" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="America/New_York">
+                    زمان شرقی (ET)
+                  </SelectItem>
+                  <SelectItem value="America/Chicago">
+                    زمان مرکزی (CT)
+                  </SelectItem>
+                  <SelectItem value="America/Denver">
+                    زمان کوهستان (MT)
+                  </SelectItem>
+                  <SelectItem value="America/Los_Angeles">
+                    زمان اقیانوس آرام (PT)
+                  </SelectItem>
+                  <SelectItem value="Europe/London">
+                    گرینویچ
+                  </SelectItem>
+                  <SelectItem value="Europe/Paris">
+                    وقت اروپای مرکزی (CET)
+                  </SelectItem>
+                  <SelectItem value="Asia/Tehran">
+                    وقت ایران (IRST)
+                  </SelectItem>
+                  <SelectItem value="Asia/Tokyo">
+                    وقت استاندارد ژاپن (JST)
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Actions */}
+      <div className="flex justify-end gap-2">
+        <Button variant="outline">انصراف</Button>
+        <Button>ذخیره تغییرات</Button>
+      </div>
+    </div>
+  );
+};
+
+export { SettingsProfile3 };
diff --git a/blocks/settings-profile4.tsx b/blocks/settings-profile4.tsx
new file mode 100644
index 0000000..fa1a7c8
--- /dev/null
+++ b/blocks/settings-profile4.tsx
@@ -0,0 +1,462 @@
+"use client";
+
+import {
+  Camera,
+  ChevronRight,
+  Globe,
+  Link2,
+  Mail,
+  MapPin,
+  Phone,
+  Settings,
+  User,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import {
+  FileUpload,
+  FileUploadDropzone,
+  FileUploadItem,
+  FileUploadItemDelete,
+  FileUploadItemPreview,
+  FileUploadList,
+  FileUploadTrigger,
+} from "@/components/diceui/file-upload";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface ProfileData {
+  name: string;
+  username: string;
+  email: string;
+  avatar?: string;
+  bio?: string;
+  phone?: string;
+  location?: string;
+  website?: string;
+  twitter?: string;
+  linkedin?: string;
+  github?: string;
+  timezone?: string;
+  language?: string;
+}
+
+interface SettingsProfile4Props {
+  defaultValues?: Partial<ProfileData>;
+  className?: string;
+}
+
+const sections = [
+  { id: "personal", label: "اطلاعات شخصی", icon: User },
+  { id: "contact", label: "تماس", icon: Mail },
+  { id: "social", label: "شبکه‌های اجتماعی", icon: Link2 },
+  { id: "preferences", label: "ترجیحات", icon: Settings },
+];
+
+const SettingsProfile4 = ({
+  defaultValues = {
+    name: "الهام میرزایی",
+    username: "alexmorgan",
+    email: "alex.morgan@email.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+    bio: "طراح محصول با بیش از ۸ سال تجربه در خلق تجربه‌های دیجیتال کاربرپسند. علاقه‌مند به دسترس‌پذیری و سیستم‌های طراحی.",
+    phone: "+1 (555) 123-4567",
+    location: "San Francisco, CA",
+    website: "https://alexmorgan.design",
+    twitter: "alexmorgan",
+    linkedin: "alexmorgan",
+    github: "alexmorgan",
+    timezone: "America/Los_Angeles",
+    language: "en",
+  },
+  className,
+}: SettingsProfile4Props) => {
+  const [activeSection, setActiveSection] = useState("personal");
+  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);
+
+  const initials = defaultValues.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase();
+
+  const avatarPreview =
+    avatarFiles.length > 0
+      ? URL.createObjectURL(avatarFiles[0])
+      : defaultValues.avatar;
+
+  return (
+    <section className={cn("py-16", className)}>
+      <div className="container">
+        {/* Header */}
+        <div className="mb-6">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>تنظیمات</span>
+            <ChevronRight className="size-4 rtl:rotate-180" />
+            <span className="text-foreground">ویرایش پروفایل</span>
+          </div>
+          <h1 className="mt-2 text-xl font-semibold">ویرایش پروفایل</h1>
+          <p className="text-muted-foreground">
+            اطلاعات شخصی و ترجیحات خود را مدیریت کنید
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-8 lg:flex-row">
+          {/* Sidebar Navigation */}
+          <aside className="lg:w-56 lg:shrink-0">
+            <nav className="space-y-1">
+              {sections.map((section) => {
+                const Icon = section.icon;
+                return (
+                  <button
+                    key={section.id}
+                    onClick={() => setActiveSection(section.id)}
+                    className={cn(
+                      "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-start text-sm transition-colors",
+                      activeSection === section.id
+                        ? "bg-primary text-primary-foreground"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    )}
+                  >
+                    <Icon className="size-4" />
+                    {section.label}
+                  </button>
+                );
+              })}
+            </nav>
+          </aside>
+
+          {/* Main Content */}
+          <main className="min-w-0 flex-1">
+            <div className="rounded-xl border bg-card shadow-sm">
+              {/* Personal Info Section */}
+              {activeSection === "personal" && (
+                <div className="p-6">
+                  <h2 className="text-lg font-semibold">اطلاعات شخصی</h2>
+                  <p className="text-sm text-muted-foreground">
+                    تصویر و جزئیات شخصی خود را به‌روزرسانی کنید
+                  </p>
+
+                  <div className="mt-6 space-y-6">
+                    {/* Avatar */}
+                    <FileUpload
+                      value={avatarFiles}
+                      onValueChange={setAvatarFiles}
+                      accept="image/*"
+                      maxFiles={1}
+                      maxSize={2 * 1024 * 1024}
+                    >
+                      <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+                        <Avatar className="size-24 shrink-0">
+                          <AvatarImage
+                            src={avatarPreview}
+                            alt={`تصویر ${defaultValues.name}`}
+                            className="object-cover"
+                          />
+                          <AvatarFallback className="text-xl">
+                            {initials}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="flex-1 space-y-3">
+                          <FileUploadDropzone className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors hover:border-primary/50 hover:bg-muted/50">
+                            <div className="flex size-10 items-center justify-center rounded-full bg-muted">
+                              <Camera className="size-5 text-muted-foreground" />
+                            </div>
+                            <div className="space-y-1">
+                              <p className="text-sm font-medium">
+                                <FileUploadTrigger asChild>
+                                  <Button variant="link" className="h-auto p-0">
+                                    برای بارگذاری کلیک کنید
+                                  </Button>
+                                </FileUploadTrigger>{" "}
+                                یا بکشید و رها کنید
+                              </p>
+                              <p className="text-xs text-muted-foreground">
+                                تصویر، تصویر یا تصویر (حداکثر ۲ مگابایت)
+                              </p>
+                            </div>
+                          </FileUploadDropzone>
+                          {avatarFiles.length > 0 && (
+                            <FileUploadList>
+                              {avatarFiles.map((file, index) => (
+                                <FileUploadItem
+                                  key={index}
+                                  value={file}
+                                  className="flex items-center gap-3 rounded-lg border bg-muted/30 p-3"
+                                >
+                                  <FileUploadItemPreview className="size-10 shrink-0 rounded-md" />
+                                  <div className="min-w-0 flex-1">
+                                    <p className="truncate text-sm font-medium">
+                                      {file.name}
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                      {(file.size / 1024).toLocaleString("fa-IR", {
+                                        maximumFractionDigits: 1,
+                                      })}{" "}
+                                      کیلوبایت
+                                    </p>
+                                  </div>
+                                  <FileUploadItemDelete asChild>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-8 shrink-0"
+                                    >
+                                      <X className="size-4" />
+                                    </Button>
+                                  </FileUploadItemDelete>
+                                </FileUploadItem>
+                              ))}
+                            </FileUploadList>
+                          )}
+                        </div>
+                      </div>
+                    </FileUpload>
+
+                    <Separator />
+
+                    <div className="grid gap-6 sm:grid-cols-2">
+                      <div className="space-y-2">
+                        <Label htmlFor="name">نام و نام خانوادگی</Label>
+                        <Input id="name" defaultValue={defaultValues.name} />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="username">نام کاربری</Label>
+                        <div className="flex">
+                          <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                            @
+                          </span>
+                          <Input
+                            id="username"
+                            className="rounded-s-none"
+                            defaultValue={defaultValues.username}
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="bio">درباره من</Label>
+                      <Textarea
+                        id="bio"
+                        rows={4}
+                        defaultValue={defaultValues.bio}
+                        placeholder="چند جمله درباره خودتان بنویسید"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        توضیح کوتاه برای پروفایل
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Contact Section */}
+              {activeSection === "contact" && (
+                <div className="p-6">
+                  <h2 className="text-lg font-semibold">اطلاعات تماس</h2>
+                  <p className="text-sm text-muted-foreground">
+                    دیگران چطور می‌توانند با شما تماس بگیرند؟
+                  </p>
+
+                  <div className="mt-6 space-y-6">
+                    <div className="space-y-2">
+                      <Label htmlFor="email">آدرس ایمیل</Label>
+                      <div className="relative">
+                        <Mail className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                          id="email"
+                          type="email"
+                          className="ps-10"
+                          defaultValue={defaultValues.email}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="phone">شماره تلفن</Label>
+                      <div className="relative">
+                        <Phone className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                          id="phone"
+                          type="tel"
+                          className="ps-10"
+                          defaultValue={defaultValues.phone}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="location">موقعیت</Label>
+                      <div className="relative">
+                        <MapPin className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                          id="location"
+                          className="ps-10"
+                          defaultValue={defaultValues.location}
+                          placeholder="شهر، کشور"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="website">وب‌سایت</Label>
+                      <div className="relative">
+                        <Globe className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                          id="website"
+                          type="url"
+                          className="ps-10"
+                          defaultValue={defaultValues.website}
+                          placeholder="https://yourwebsite.com"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Social Links Section */}
+              {activeSection === "social" && (
+                <div className="p-6">
+                  <h2 className="text-lg font-semibold">شبکه‌های اجتماعی</h2>
+                  <p className="text-sm text-muted-foreground">
+                    حساب‌های شبکه‌های اجتماعی خود را متصل کنید
+                  </p>
+
+                  <div className="mt-6 space-y-6">
+                    <div className="space-y-2">
+                      <Label htmlFor="twitter">شبکه اجتماعی</Label>
+                      <div className="flex">
+                        <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                          x.com/
+                        </span>
+                        <Input
+                          id="twitter"
+                          className="rounded-s-none"
+                          defaultValue={defaultValues.twitter}
+                          placeholder="نام کاربری"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="linkedin">شبکه حرفه‌ای</Label>
+                      <div className="flex">
+                        <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                          شبکه حرفه‌ای.com/in/
+                        </span>
+                        <Input
+                          id="linkedin"
+                          className="rounded-s-none"
+                          defaultValue={defaultValues.linkedin}
+                          placeholder="نام کاربری"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="github">مخزن کد</Label>
+                      <div className="flex">
+                        <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                          مخزن کد.com/
+                        </span>
+                        <Input
+                          id="github"
+                          className="rounded-s-none"
+                          defaultValue={defaultValues.github}
+                          placeholder="نام کاربری"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Preferences Section */}
+              {activeSection === "preferences" && (
+                <div className="p-6">
+                  <h2 className="text-lg font-semibold">ترجیحات</h2>
+                  <p className="text-sm text-muted-foreground">
+                    تجربه خود را شخصی‌سازی کنید
+                  </p>
+
+                  <div className="mt-6 space-y-6">
+                    <div className="space-y-2">
+                      <Label htmlFor="language">زبان</Label>
+                      <Select defaultValue={defaultValues.language}>
+                        <SelectTrigger id="language">
+                          <SelectValue placeholder="انتخاب زبان" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="fa">فارسی</SelectItem>
+                          <SelectItem value="en">انگلیسی</SelectItem>
+                          <SelectItem value="es">اسپانیایی</SelectItem>
+                          <SelectItem value="fr">فرانسوی</SelectItem>
+                          <SelectItem value="de">آلمانی</SelectItem>
+                          <SelectItem value="ja">ژاپنی</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="timezone">منطقه زمانی</Label>
+                      <Select defaultValue={defaultValues.timezone}>
+                        <SelectTrigger id="timezone">
+                          <SelectValue placeholder="انتخاب منطقه زمانی" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="America/New_York">
+                            زمان شرقی (ET)
+                          </SelectItem>
+                          <SelectItem value="America/Chicago">
+                            زمان مرکزی (CT)
+                          </SelectItem>
+                          <SelectItem value="America/Denver">
+                            زمان کوهستان (MT)
+                          </SelectItem>
+                          <SelectItem value="America/Los_Angeles">
+                            زمان اقیانوس آرام (PT)
+                          </SelectItem>
+                          <SelectItem value="Europe/London">گرینویچ</SelectItem>
+                          <SelectItem value="Europe/Paris">
+                            وقت اروپای مرکزی (CET)
+                          </SelectItem>
+                          <SelectItem value="Asia/Tehran">
+                            وقت ایران (IRST)
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Footer with actions */}
+              <div className="flex items-center justify-end gap-3 border-t px-6 py-4">
+                <Button variant="outline">انصراف</Button>
+                <Button>ذخیره تغییرات</Button>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsProfile4 };
diff --git a/blocks/settings-profile5.tsx b/blocks/settings-profile5.tsx
new file mode 100644
index 0000000..63a271b
--- /dev/null
+++ b/blocks/settings-profile5.tsx
@@ -0,0 +1,350 @@
+"use client";
+
+import { Camera, Github, Globe, Linkedin, MapPin, Twitter } from "lucide-react";
+import { useState } from "react";
+
+import { FileUpload, FileUploadTrigger } from "@/components/diceui/file-upload";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface ProfileData {
+  name: string;
+  username: string;
+  email: string;
+  avatar?: string;
+  bio?: string;
+  role?: string;
+  location?: string;
+  website?: string;
+  twitter?: string;
+  linkedin?: string;
+  github?: string;
+}
+
+interface SettingsProfile5Props {
+  defaultValues?: Partial<ProfileData>;
+  className?: string;
+}
+
+const SettingsProfile5 = ({
+  defaultValues = {
+    name: "Jordan چناری",
+    username: "jordanchen",
+    email: "jordan.chen@email.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
+    bio: "توسعه‌دهنده فول‌استک که ابزارهای وب مدرن می‌سازد. علاقه‌مند به متن‌باز و گاهی نویسنده درباره معماری نرم‌افزار.",
+    role: "مهندس نرم‌افزار ارشد",
+    location: "Seattle, WA",
+    website: "https://jordanchen.dev",
+    twitter: "jordanchen",
+    linkedin: "jordanchen",
+    github: "jordanchen",
+  },
+  className,
+}: SettingsProfile5Props) => {
+  const [formData, setFormData] = useState(defaultValues);
+  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);
+
+  const updateField = (field: keyof ProfileData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const avatarPreview =
+    avatarFiles.length > 0
+      ? URL.createObjectURL(avatarFiles[0])
+      : formData.avatar;
+
+  const initials = formData.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase();
+
+  return (
+    <section className={cn("py-16", className)}>
+      <div className="container">
+        <div className="mb-8">
+          <h1 className="text-xl font-semibold">ویرایش پروفایل</h1>
+          <p className="text-muted-foreground">
+            اطلاعات پروفایل خود را به‌روزرسانی کنید. تغییرات در پیش‌نمایش
+            منعکس می‌شوند.
+          </p>
+        </div>
+
+        <div className="grid gap-8 lg:grid-cols-5">
+          {/* Edit Form - Takes more space */}
+          <div className="space-y-6 lg:col-span-3">
+            <Card>
+              <CardHeader>
+                <CardTitle>اطلاعات پایه</CardTitle>
+                <CardDescription>اطلاعات عمومی پروفایل شما</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <FileUpload
+                  value={avatarFiles}
+                  onValueChange={setAvatarFiles}
+                  accept="image/*"
+                  maxFiles={1}
+                  maxSize={2 * 1024 * 1024}
+                >
+                  <div className="flex items-center gap-4">
+                    <div className="relative">
+                      <Avatar className="size-16">
+                        <AvatarImage
+                          src={avatarPreview}
+                          alt={`تصویر ${formData.name}`}
+                          className="object-cover"
+                        />
+                        <AvatarFallback>{initials}</AvatarFallback>
+                      </Avatar>
+                      <FileUploadTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="secondary"
+                          className="absolute -end-1 -bottom-1 size-6 rounded-full shadow-sm"
+                        >
+                          <Camera className="size-3" />
+                        </Button>
+                      </FileUploadTrigger>
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium">تصویر پروفایل</p>
+                      <p className="text-xs text-muted-foreground">
+                        تصویر، تصویر یا تصویر. حداکثر ۲ مگابایت.
+                      </p>
+                    </div>
+                  </div>
+                </FileUpload>
+
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">نام</Label>
+                    <Input
+                      id="name"
+                      value={formData.name}
+                      onChange={(e) => updateField("name", e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="username">نام کاربری</Label>
+                    <Input
+                      id="username"
+                      value={formData.username}
+                      onChange={(e) => updateField("username", e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="role">نقش / عنوان</Label>
+                  <Input
+                    id="role"
+                    value={formData.role}
+                    onChange={(e) => updateField("role", e.target.value)}
+                    placeholder="شغل یا حرفه شما چیست؟"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="bio">درباره من</Label>
+                  <Textarea
+                    id="bio"
+                    rows={3}
+                    value={formData.bio}
+                    onChange={(e) => updateField("bio", e.target.value)}
+                    placeholder="درباره خودتان برای دیگران بنویسید"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="location">موقعیت</Label>
+                  <Input
+                    id="location"
+                    value={formData.location}
+                    onChange={(e) => updateField("location", e.target.value)}
+                    placeholder="شهر، کشور"
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>لینک‌ها</CardTitle>
+                <CardDescription>وب‌سایت و شبکه‌های اجتماعی شما</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="website">وب‌سایت</Label>
+                  <Input
+                    id="website"
+                    type="url"
+                    value={formData.website}
+                    onChange={(e) => updateField("website", e.target.value)}
+                    placeholder="https://yourwebsite.com"
+                  />
+                </div>
+
+                <div className="grid gap-4 sm:grid-cols-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="twitter">شبکه اجتماعی</Label>
+                    <Input
+                      id="twitter"
+                      value={formData.twitter}
+                      onChange={(e) => updateField("twitter", e.target.value)}
+                      placeholder="نام کاربری"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="linkedin">شبکه حرفه‌ای</Label>
+                    <Input
+                      id="linkedin"
+                      value={formData.linkedin}
+                      onChange={(e) => updateField("linkedin", e.target.value)}
+                      placeholder="نام کاربری"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="github">مخزن کد</Label>
+                    <Input
+                      id="github"
+                      value={formData.github}
+                      onChange={(e) => updateField("github", e.target.value)}
+                      placeholder="نام کاربری"
+                    />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <div className="flex justify-end gap-3">
+              <Button variant="outline">انصراف</Button>
+              <Button>ذخیره تغییرات</Button>
+            </div>
+          </div>
+
+          {/* Live Preview */}
+          <div className="lg:col-span-2">
+            <div className="sticky top-8">
+              <div className="rounded-xl bg-muted/50 p-6">
+                <div className="mb-3 flex items-center justify-between">
+                  <p className="text-sm font-medium">پیش‌نمایش زنده</p>
+                  <Badge variant="secondary" className="text-xs">
+                    نمای عمومی
+                  </Badge>
+                </div>
+
+                <Card className="!shadow-none">
+                  <CardContent className="pt-6">
+                    <div className="flex flex-col items-center text-center">
+                      <Avatar className="size-20 ring-2 ring-background">
+                        <AvatarImage
+                          src={avatarPreview}
+                          alt={`تصویر ${formData.name}`}
+                          className="object-cover"
+                        />
+                        <AvatarFallback className="text-xl">
+                          {initials}
+                        </AvatarFallback>
+                      </Avatar>
+
+                      <h3 className="mt-4 text-lg font-semibold">
+                        {formData.name || "نام شما"}
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        @{formData.username || "نام‌کاربری"}
+                      </p>
+
+                      {formData.role && (
+                        <p className="mt-1 text-sm">{formData.role}</p>
+                      )}
+
+                      {formData.location && (
+                        <div className="mt-2 flex items-center gap-1 text-sm text-muted-foreground">
+                          <MapPin className="size-3.5" />
+                          <span>{formData.location}</span>
+                        </div>
+                      )}
+
+                      {formData.bio && (
+                        <>
+                          <Separator className="my-4" />
+                          <p className="text-sm text-muted-foreground">
+                            {formData.bio}
+                          </p>
+                        </>
+                      )}
+
+                      {(formData.website ||
+                        formData.twitter ||
+                        formData.linkedin ||
+                        formData.github) && (
+                        <>
+                          <Separator className="my-4" />
+                          <div className="flex gap-3">
+                            {formData.website && (
+                              <a
+                                href={formData.website}
+                                className="text-muted-foreground hover:text-foreground"
+                              >
+                                <Globe className="size-5" />
+                              </a>
+                            )}
+                            {formData.twitter && (
+                              <a
+                                href={`https://x.com/${formData.twitter}`}
+                                className="text-muted-foreground hover:text-foreground"
+                              >
+                                <Twitter className="size-5" />
+                              </a>
+                            )}
+                            {formData.linkedin && (
+                              <a
+                                href={`https://linkedin.com/in/${formData.linkedin}`}
+                                className="text-muted-foreground hover:text-foreground"
+                              >
+                                <Linkedin className="size-5" />
+                              </a>
+                            )}
+                            {formData.github && (
+                              <a
+                                href={`https://github.com/${formData.github}`}
+                                className="text-muted-foreground hover:text-foreground"
+                              >
+                                <Github className="size-5" />
+                              </a>
+                            )}
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <p className="mt-3 text-center text-xs text-muted-foreground">
+                  این‌گونه پروفایل شما برای دیگران نمایش داده می‌شود
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsProfile5 };
diff --git a/blocks/settings-profile6.tsx b/blocks/settings-profile6.tsx
new file mode 100644
index 0000000..ceed0e8
--- /dev/null
+++ b/blocks/settings-profile6.tsx
@@ -0,0 +1,425 @@
+"use client";
+
+import { Check, ChevronLeft, ChevronRight, Upload } from "lucide-react";
+import { useState } from "react";
+
+import { FileUpload, FileUploadTrigger } from "@/components/diceui/file-upload";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface ProfileData {
+  name: string;
+  username: string;
+  avatar?: string;
+  bio?: string;
+  email?: string;
+  phone?: string;
+  location?: string;
+  website?: string;
+  twitter?: string;
+  linkedin?: string;
+}
+
+interface SettingsProfile6Props {
+  defaultValues?: Partial<ProfileData>;
+  className?: string;
+}
+
+const steps = [
+  { id: 1, title: "اطلاعات پایه", description: "نام و تصویر" },
+  { id: 2, title: "تماس", description: "راه‌های ارتباط با شما" },
+  { id: 3, title: "شبکه‌های اجتماعی", description: "حضور آنلاین شما" },
+  { id: 4, title: "بازبینی", description: "تأیید اطلاعات" },
+];
+
+const SettingsProfile6 = ({
+  defaultValues = {
+    name: "",
+    username: "",
+    avatar: "",
+    bio: "",
+    email: "",
+    phone: "",
+    location: "",
+    website: "",
+    twitter: "",
+    linkedin: "",
+  },
+  className,
+}: SettingsProfile6Props) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);
+  const [formData, setFormData] = useState<ProfileData>({
+    name: defaultValues.name || "",
+    username: defaultValues.username || "",
+    avatar: defaultValues.avatar || "",
+    bio: defaultValues.bio || "",
+    email: defaultValues.email || "",
+    phone: defaultValues.phone || "",
+    location: defaultValues.location || "",
+    website: defaultValues.website || "",
+    twitter: defaultValues.twitter || "",
+    linkedin: defaultValues.linkedin || "",
+  });
+
+  const updateField = (field: keyof ProfileData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const nextStep = () => setCurrentStep((prev) => Math.min(prev + 1, 4));
+  const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
+
+  const avatarPreview =
+    avatarFiles.length > 0
+      ? URL.createObjectURL(avatarFiles[0])
+      : formData.avatar;
+
+  const initials = formData.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase();
+
+  return (
+    <section className={cn("py-16", className)}>
+      <div className="container max-w-2xl">
+        {/* Header */}
+        <div className="mb-8 text-center">
+          <h1 className="text-xl font-semibold">تکمیل پروفایل</h1>
+          <p className="text-muted-foreground">
+            به دیگران کمک کنید بهتر شما را بشناسند
+          </p>
+        </div>
+
+        {/* Progress Steps */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between">
+            {steps.map((step, index) => (
+              <div key={step.id} className="flex items-center">
+                <div className="flex flex-col items-center">
+                  <div
+                    className={cn(
+                      "flex size-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors",
+                      currentStep > step.id
+                        ? "border-primary bg-primary text-primary-foreground"
+                        : currentStep === step.id
+                          ? "border-primary text-primary"
+                          : "border-muted text-muted-foreground",
+                    )}
+                  >
+                    {currentStep > step.id ? (
+                      <Check className="size-5" />
+                    ) : (
+                      step.id.toLocaleString("fa-IR")
+                    )}
+                  </div>
+                  <div className="mt-2 text-center">
+                    <p
+                      className={cn(
+                        "text-sm font-medium",
+                        currentStep >= step.id
+                          ? "text-foreground"
+                          : "text-muted-foreground",
+                      )}
+                    >
+                      {step.title}
+                    </p>
+                    <p className="hidden text-xs text-muted-foreground sm:block">
+                      {step.description}
+                    </p>
+                  </div>
+                </div>
+                {index < steps.length - 1 && (
+                  <div
+                    className={cn(
+                      "mx-2 h-0.5 w-12 sm:w-20",
+                      currentStep > step.id ? "bg-primary" : "bg-muted",
+                    )}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Step Content */}
+        <Card>
+          <CardContent className="p-6">
+            {/* Step 1: Basic Info */}
+            {currentStep === 1 && (
+              <div className="space-y-6">
+                <FileUpload
+                  value={avatarFiles}
+                  onValueChange={setAvatarFiles}
+                  accept="image/*"
+                  maxFiles={1}
+                  maxSize={2 * 1024 * 1024}
+                >
+                  <div className="flex flex-col items-center gap-4">
+                    <Avatar className="size-24">
+                      <AvatarImage
+                        src={avatarPreview}
+                        alt={
+                          formData.name
+                            ? `تصویر ${formData.name}`
+                            : "تصویر پروفایل"
+                        }
+                        className="object-cover"
+                      />
+                      <AvatarFallback className="text-xl">
+                        {initials || "?"}
+                      </AvatarFallback>
+                    </Avatar>
+                    <FileUploadTrigger asChild>
+                      <Button variant="outline" size="sm">
+                        <Upload className="me-2 size-4" />
+                        بارگذاری تصویر
+                      </Button>
+                    </FileUploadTrigger>
+                  </div>
+                </FileUpload>
+
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">نام و نام خانوادگی *</Label>
+                    <Input
+                      id="name"
+                      value={formData.name}
+                      onChange={(e) => updateField("name", e.target.value)}
+                      placeholder="نام کامل خود را وارد کنید"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="username">نام کاربری *</Label>
+                    <div className="flex">
+                      <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                        @
+                      </span>
+                      <Input
+                        id="username"
+                        className="rounded-s-none"
+                        value={formData.username}
+                        onChange={(e) =>
+                          updateField("username", e.target.value)
+                        }
+                        placeholder="یک نام کاربری انتخاب کنید"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="bio">درباره من</Label>
+                    <Textarea
+                      id="bio"
+                      rows={3}
+                      value={formData.bio}
+                      onChange={(e) => updateField("bio", e.target.value)}
+                      placeholder="کمی درباره خودتان بنویسید"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Step 2: Contact */}
+            {currentStep === 2 && (
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email">آدرس ایمیل *</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => updateField("email", e.target.value)}
+                    placeholder="ایمیل خود را وارد کنید"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="phone">شماره تلفن</Label>
+                  <Input
+                    id="phone"
+                    type="tel"
+                    value={formData.phone}
+                    onChange={(e) => updateField("phone", e.target.value)}
+                    placeholder="۰۹۱۲ ۳۴۵ ۶۷۸۹"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="location">موقعیت</Label>
+                  <Input
+                    id="location"
+                    value={formData.location}
+                    onChange={(e) => updateField("location", e.target.value)}
+                    placeholder="شهر، کشور"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Step 3: Social */}
+            {currentStep === 3 && (
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="website">وب‌سایت شخصی</Label>
+                  <Input
+                    id="website"
+                    type="url"
+                    value={formData.website}
+                    onChange={(e) => updateField("website", e.target.value)}
+                    placeholder="https://yourwebsite.com"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="twitter">شبکه اجتماعی</Label>
+                  <div className="flex">
+                    <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                      x.com/
+                    </span>
+                    <Input
+                      id="twitter"
+                      className="rounded-s-none"
+                      value={formData.twitter}
+                      onChange={(e) => updateField("twitter", e.target.value)}
+                      placeholder="نام کاربری"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="linkedin">شبکه حرفه‌ای</Label>
+                  <div className="flex">
+                    <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
+                      شبکه حرفه‌ای.com/in/
+                    </span>
+                    <Input
+                      id="linkedin"
+                      className="rounded-s-none"
+                      value={formData.linkedin}
+                      onChange={(e) => updateField("linkedin", e.target.value)}
+                      placeholder="نام کاربری"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Step 4: Review */}
+            {currentStep === 4 && (
+              <div className="space-y-6">
+                <div className="flex items-center gap-4">
+                  <Avatar className="size-16">
+                    <AvatarImage
+                      src={avatarPreview}
+                      alt={
+                        formData.name
+                          ? `تصویر ${formData.name}`
+                          : "تصویر پروفایل"
+                      }
+                      className="object-cover"
+                    />
+                    <AvatarFallback>{initials || "?"}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <h3 className="font-semibold">
+                      {formData.name || "نام ثبت نشده"}
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      @{formData.username || "نام‌کاربری"}
+                    </p>
+                  </div>
+                </div>
+
+                {formData.bio && (
+                  <p className="text-sm text-muted-foreground">
+                    {formData.bio}
+                  </p>
+                )}
+
+                <div className="grid gap-4 rounded-lg border p-4 sm:grid-cols-2">
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground">
+                      ایمیل
+                    </p>
+                    <p className="text-sm">{formData.email || "ثبت نشده"}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground">
+                      تلفن
+                    </p>
+                    <p className="text-sm">{formData.phone || "ثبت نشده"}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground">
+                      موقعیت
+                    </p>
+                    <p className="text-sm">{formData.location || "ثبت نشده"}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground">
+                      وب‌سایت
+                    </p>
+                    <p className="text-sm">{formData.website || "ثبت نشده"}</p>
+                  </div>
+                </div>
+
+                <div className="rounded-lg bg-muted/50 p-4">
+                  <p className="text-sm text-muted-foreground">
+                    اطلاعات بالا را بازبینی کنید. برای ذخیره پروفایل روی
+                    «تکمیل پروفایل» بزنید یا برای ویرایش به عقب برگردید.
+                  </p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Navigation */}
+        <div className="mt-6 flex items-center justify-between">
+          <Button
+            variant="outline"
+            onClick={prevStep}
+            disabled={currentStep === 1}
+          >
+            <ChevronLeft className="me-2 size-4 rtl:rotate-180" />
+            بازگشت
+          </Button>
+
+          {currentStep < 4 ? (
+            <Button onClick={nextStep}>
+              ادامه
+              <ChevronRight className="ms-2 size-4 rtl:rotate-180" />
+            </Button>
+          ) : (
+            <Button>
+              <Check className="me-2 size-4" />
+              تکمیل پروفایل
+            </Button>
+          )}
+        </div>
+
+        {/* Skip option */}
+        {currentStep < 4 && (
+          <p className="mt-4 text-center text-sm text-muted-foreground">
+            <button
+              onClick={() => setCurrentStep(4)}
+              className="underline hover:text-foreground"
+            >
+              رفتن به بازبینی
+            </button>
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { SettingsProfile6 };
diff --git a/blocks/settings-profile7.tsx b/blocks/settings-profile7.tsx
new file mode 100644
index 0000000..02f3d6b
--- /dev/null
+++ b/blocks/settings-profile7.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { Camera, Check, Pencil, X } from "lucide-react";
+import { useState } from "react";
+
+import { FileUpload, FileUploadTrigger } from "@/components/diceui/file-upload";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface ProfileData {
+  name: string;
+  email: string;
+  avatar?: string;
+  role?: string;
+  location?: string;
+}
+
+interface SettingsProfile7Props {
+  defaultValues?: Partial<ProfileData>;
+  className?: string;
+}
+
+const SettingsProfile7 = ({
+  defaultValues = {
+    name: "الهام میرزایی",
+    email: "alex.morgan@email.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+    role: "طراح محصول",
+    location: "San Francisco, CA",
+  },
+  className,
+}: SettingsProfile7Props) => {
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [formData, setFormData] = useState(defaultValues);
+  const [tempValue, setTempValue] = useState("");
+  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);
+
+  const avatarPreview =
+    avatarFiles.length > 0
+      ? URL.createObjectURL(avatarFiles[0])
+      : formData.avatar;
+
+  const startEdit = (field: string, currentValue: string) => {
+    setEditingField(field);
+    setTempValue(currentValue);
+  };
+
+  const saveEdit = (field: keyof ProfileData) => {
+    setFormData((prev) => ({ ...prev, [field]: tempValue }));
+    setEditingField(null);
+  };
+
+  const cancelEdit = () => {
+    setEditingField(null);
+    setTempValue("");
+  };
+
+  const initials = formData.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase();
+
+  const EditableField = ({
+    field,
+    label,
+    value,
+  }: {
+    field: keyof ProfileData;
+    label: string;
+    value?: string;
+  }) => {
+    const isEditing = editingField === field;
+
+    return (
+      <div className="group flex items-center justify-between py-2">
+        <div className="min-w-0 flex-1">
+          <p className="text-xs text-muted-foreground">{label}</p>
+          {isEditing ? (
+            <div className="mt-1 flex items-center gap-2">
+              <Input
+                value={tempValue}
+                onChange={(e) => setTempValue(e.target.value)}
+                className="h-8"
+                autoFocus
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") saveEdit(field);
+                  if (e.key === "Escape") cancelEdit();
+                }}
+              />
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-8 shrink-0"
+                onClick={() => saveEdit(field)}
+              >
+                <Check className="size-4 text-green-600" />
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-8 shrink-0"
+                onClick={cancelEdit}
+              >
+                <X className="size-4 text-muted-foreground" />
+              </Button>
+            </div>
+          ) : (
+            <p className="truncate text-sm font-medium">
+              {value || <span className="text-muted-foreground">ثبت نشده</span>}
+            </p>
+          )}
+        </div>
+        {!isEditing && (
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-8 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => startEdit(field, value || "")}
+          >
+            <Pencil className="size-3.5" />
+          </Button>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Card className={cn("w-full max-w-md", className)}>
+      <CardContent className="p-4">
+        <div className="flex gap-4">
+          {/* Avatar */}
+          <FileUpload
+            value={avatarFiles}
+            onValueChange={setAvatarFiles}
+            accept="image/*"
+            maxFiles={1}
+            maxSize={2 * 1024 * 1024}
+          >
+            <div className="relative shrink-0">
+              <Avatar className="size-16">
+                <AvatarImage
+                  src={avatarPreview}
+                  alt={
+                    formData.name ? `تصویر ${formData.name}` : "تصویر پروفایل"
+                  }
+                  className="object-cover"
+                />
+                <AvatarFallback>{initials}</AvatarFallback>
+              </Avatar>
+              <FileUploadTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="secondary"
+                  className="absolute -end-1 -bottom-1 size-6 rounded-full shadow-sm"
+                >
+                  <Camera className="size-3" />
+                </Button>
+              </FileUploadTrigger>
+            </div>
+          </FileUpload>
+
+          {/* Editable Fields */}
+          <div className="min-w-0 flex-1 divide-y">
+            <EditableField field="name" label="نام" value={formData.name} />
+            <EditableField field="role" label="نقش" value={formData.role} />
+            <EditableField field="email" label="ایمیل" value={formData.email} />
+            <EditableField
+              field="location"
+              label="موقعیت"
+              value={formData.location}
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { SettingsProfile7 };
diff --git a/blocks/shader1.tsx b/blocks/shader1.tsx
new file mode 100644
index 0000000..eb118d1
--- /dev/null
+++ b/blocks/shader1.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: { [key: string]: { value: unknown } };
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * 0.5;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: { [key: string]: { value: unknown } };
+  className?: string;
+  color?: string;
+}
+
+const Shader1 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec3 u_color;
+    uniform sampler2D u_channel0;
+
+  	#define t (u_time * 0.5)
+  	mat2 m(float a){float c=cos(a), s=sin(a);return mat2(c,-s,s,c);}
+  	float map(vec3 p){
+  		p.xz*= m(t*0.4);p.xy*= m(t*0.3);
+  		vec3 q = p*2.+t;
+  		return length(p+vec3(sin(t*0.7)))*log(length(p)+1.) + sin(q.x+sin(q.z+sin(q.y)))*2.5 - 0.5;
+  	}
+
+  	void mainImage( out vec4 fragColor, in vec2 fragCoord ){
+  		vec2 p = fragCoord.xy/u_resolution.y - vec2(.9,.5);
+  		vec3 cl = vec3(0.);
+  		float d = .9;
+  		for(int i=0; i<=5; i++)	{
+  			vec3 p = vec3(0,0,5.) + normalize(vec3(p, -1.))*d;
+  			float rz = map(p);
+  			float f =  clamp((rz - map(p+.1))*0.5, -.1, 1. );
+
+        vec3 base = u_color * 0.25;
+        vec3 bright = u_color * 1.75;
+
+        vec3 l = base + bright * f;
+  			cl = cl*l + (1.-smoothstep(0., 2.5, rz))*.7*l;
+  			d += min(rz, 1.);
+  		}
+  		fragColor = vec4(cl * u_color, 1.0);	}
+
+      void main() {
+        vec4 fragColor;
+        vec2 fragCoord = vUv * u_resolution.xy;
+        mainImage(fragColor, fragCoord);
+        gl_FragColor = fragColor;
+      }
+  `,
+  uniforms = {},
+  className,
+  color = "#0000ff",
+}: ShaderBackgroundProps) => {
+  const shaderUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      u_color: { value: new THREE.Color(color) },
+      ...uniforms,
+    }),
+    [uniforms, color],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader1 };
diff --git a/blocks/shader10.tsx b/blocks/shader10.tsx
new file mode 100644
index 0000000..fec43f5
--- /dev/null
+++ b/blocks/shader10.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import { Canvas, useFrame, useLoader } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+const FALLBACK_IMAGES = [
+  "/block-media/external/unsplash/photo-1551250928-243dc937c49d.jpg",
+  "/block-media/external/unsplash/photo-1551250928-e4a05afaed1e.jpg",
+  "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
+];
+
+const vertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+const fragmentShader = `
+  uniform sampler2D u_texture1;
+  uniform sampler2D u_texture2;
+  uniform float u_progress;
+  uniform vec2 u_resolution;
+  uniform vec2 u_texture1size;
+  uniform vec2 u_texture2size;
+  varying vec2 vUv;
+
+  vec2 getCoverUV(vec2 uv, vec2 textureSize) {
+    vec2 s = u_resolution / textureSize;
+    float scale = max(s.x, s.y);
+    vec2 scaledSize = textureSize * scale;
+    vec2 offset = (u_resolution - scaledSize) * 0.5;
+    return (uv * u_resolution - offset) / scaledSize;
+  }
+
+  vec2 getDistortedUv(vec2 uv, vec2 direction, float factor) {
+    vec2 scaledDirection = direction;
+    scaledDirection.y *= 2.0;
+    return uv - scaledDirection * factor;
+  }
+
+  struct LensDistortion {
+    vec2 distortedUV;
+    float inside;
+  };
+
+  LensDistortion getLensDistortion(
+    vec2 p,
+    vec2 uv,
+    vec2 sphereCenter,
+    float sphereRadius,
+    float focusFactor
+  ) {
+    vec2 distortionDirection = normalize(p - sphereCenter);
+    float focusRadius = sphereRadius * focusFactor;
+    float focusStrength = sphereRadius / 3000.0;
+    float focusSdf = length(sphereCenter - p) - focusRadius;
+    float sphereSdf = length(sphereCenter - p) - sphereRadius;
+    float inside = smoothstep(0.0, 1.0, -sphereSdf / (sphereRadius * 0.001));
+
+    float magnifierFactor = focusSdf / (sphereRadius - focusRadius);
+    float mFactor = clamp(magnifierFactor * inside, 0.0, 1.0);
+    mFactor = pow(mFactor, 5.0);
+
+    float distortionFactor = mFactor * focusStrength;
+
+    vec2 distortedUV = getDistortedUv(uv, distortionDirection, distortionFactor);
+
+    return LensDistortion(distortedUV, inside);
+  }
+
+  void main() {
+    vec2 center = vec2(0.5, 0.5);
+    vec2 p = vUv * u_resolution;
+
+    vec2 uv1 = getCoverUV(vUv, u_texture1size);
+    vec2 uv2 = getCoverUV(vUv, u_texture2size);
+
+    float maxRadius = length(u_resolution) * 1.5;
+    float bubbleRadius = u_progress * maxRadius;
+    vec2 sphereCenter = center * u_resolution;
+    float focusFactor = 0.25;
+
+    float dist = length(sphereCenter - p);
+    float mask = step(bubbleRadius, dist);
+
+    vec4 currentImg = texture2D(u_texture1, uv1);
+
+    LensDistortion distortion = getLensDistortion(
+      p, uv2, sphereCenter, bubbleRadius, focusFactor
+    );
+
+    vec4 newImg = texture2D(u_texture2, distortion.distortedUV);
+
+    float finalMask = max(mask, 1.0 - distortion.inside);
+    vec4 color = mix(newImg, currentImg, finalMask);
+
+    gl_FragColor = color;
+  }
+`;
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  imageSources: string[];
+  transitionDuration: number;
+  pauseDuration: number;
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  imageSources,
+  transitionDuration,
+  pauseDuration,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const progressRef = useRef(0);
+  const holdRef = useRef(Math.max(pauseDuration, 0));
+  const textureSources = useMemo(
+    () => (imageSources.length > 0 ? imageSources : FALLBACK_IMAGES),
+    [imageSources],
+  );
+  const textures = useLoader(
+    THREE.TextureLoader,
+    textureSources,
+  ) as THREE.Texture[];
+  const indicesRef = useRef({ current: 0, next: textures.length > 1 ? 1 : 0 });
+
+  const shaderUniforms = useMemo(
+    () => ({
+      u_texture1: { value: null as THREE.Texture | null },
+      u_texture2: { value: null as THREE.Texture | null },
+      u_texture1size: { value: new THREE.Vector2(1, 1) },
+      u_texture2size: { value: new THREE.Vector2(1, 1) },
+      u_progress: { value: 0 },
+      u_resolution: { value: new THREE.Vector2(1, 1) },
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    textures.forEach((texture) => {
+      texture.wrapS = THREE.ClampToEdgeWrapping;
+      texture.wrapT = THREE.ClampToEdgeWrapping;
+      texture.minFilter = THREE.LinearFilter;
+      texture.magFilter = THREE.LinearFilter;
+      texture.generateMipmaps = false;
+      texture.needsUpdate = true;
+    });
+  }, [textures]);
+
+  useEffect(() => {
+    indicesRef.current = {
+      current: 0,
+      next: textures.length > 1 ? 1 : 0,
+    };
+    progressRef.current = 0;
+    holdRef.current = Math.max(pauseDuration, 0);
+  }, [textures.length, pauseDuration]);
+
+  useFrame((state, delta) => {
+    if (!meshRef.current) {
+      return;
+    }
+
+    const material = meshRef.current.material as THREE.ShaderMaterial;
+    const { width, height } = state.size;
+    const [texture1, texture2] = (() => {
+      const current = indicesRef.current.current;
+      const next = indicesRef.current.next;
+      const first = textures[current] ?? null;
+      const second = textures[next] ?? first;
+      return [first, second];
+    })();
+
+    if (texture1) {
+      material.uniforms.u_texture1.value = texture1;
+      const image = texture1.image as
+        | { width?: number; height?: number }
+        | undefined;
+      material.uniforms.u_texture1size.value.set(
+        image?.width ?? 1,
+        image?.height ?? 1,
+      );
+    }
+
+    if (texture2) {
+      material.uniforms.u_texture2.value = texture2;
+      const image = texture2.image as
+        | { width?: number; height?: number }
+        | undefined;
+      material.uniforms.u_texture2size.value.set(
+        image?.width ?? 1,
+        image?.height ?? 1,
+      );
+    }
+
+    material.uniforms.u_resolution.value.set(width, height);
+
+    if (textures.length > 1) {
+      const effectiveHoldDuration = Math.max(pauseDuration, 0);
+
+      if (holdRef.current > 0) {
+        holdRef.current = Math.max(holdRef.current - delta, 0);
+        material.uniforms.u_progress.value = 0;
+      } else {
+        progressRef.current += delta / Math.max(transitionDuration, 0.0001);
+        const easedProgress = Math.min(progressRef.current, 1);
+        material.uniforms.u_progress.value =
+          easedProgress * easedProgress * (3 - 2 * easedProgress);
+
+        if (progressRef.current >= 1) {
+          progressRef.current = 0;
+          indicesRef.current.current = indicesRef.current.next;
+          indicesRef.current.next =
+            (indicesRef.current.next + 1) % textures.length;
+          if (effectiveHoldDuration > 0) {
+            holdRef.current = effectiveHoldDuration;
+          }
+        }
+      }
+    } else {
+      material.uniforms.u_progress.value = 0;
+    }
+
+    const camera = state.camera as
+      | THREE.PerspectiveCamera
+      | THREE.OrthographicCamera;
+    if ((camera as THREE.PerspectiveCamera).isPerspectiveCamera) {
+      const perspectiveCamera = camera as THREE.PerspectiveCamera;
+      const distance = Math.abs(
+        perspectiveCamera.position.z - meshRef.current.position.z,
+      );
+      const fovRadians = THREE.MathUtils.degToRad(perspectiveCamera.fov);
+      const planeHeight = 2 * Math.tan(fovRadians / 2) * distance;
+      const planeWidth = (planeHeight * width) / height;
+      meshRef.current.scale.set(planeWidth / 2, planeHeight / 2, 1);
+    } else if ((camera as THREE.OrthographicCamera).isOrthographicCamera) {
+      const orthoCamera = camera as THREE.OrthographicCamera;
+      const planeWidth = orthoCamera.right - orthoCamera.left;
+      const planeHeight = orthoCamera.top - orthoCamera.bottom;
+      meshRef.current.scale.set(planeWidth / 2, planeHeight / 2, 1);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={shaderUniforms}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface Background20Props {
+  images?: string[];
+  transitionDuration?: number;
+  pauseDuration?: number;
+  className?: string;
+}
+
+const Shader10 = ({
+  images,
+  transitionDuration = 6,
+  pauseDuration = 2,
+  className,
+}: Background20Props) => {
+  const resolvedImages = images && images.length > 0 ? images : FALLBACK_IMAGES;
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          imageSources={resolvedImages}
+          transitionDuration={transitionDuration}
+          pauseDuration={pauseDuration}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader10 };
diff --git a/blocks/shader11.tsx b/blocks/shader11.tsx
new file mode 100644
index 0000000..c279188
--- /dev/null
+++ b/blocks/shader11.tsx
@@ -0,0 +1,223 @@
+"use client";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Bloom, EffectComposer } from "@react-three/postprocessing";
+import { KernelSize } from "postprocessing";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface TorusFromSlicesProps {
+  slices?: number;
+  majorRadius?: number;
+  sliceRadius?: number;
+  sliceDepth?: number;
+  bevelEnabled?: boolean;
+}
+
+function TorusFromSlices({
+  slices = 10,
+  majorRadius = 1.0,
+  sliceRadius = 5,
+  sliceDepth = 1,
+  bevelEnabled = true,
+}: TorusFromSlicesProps) {
+  const meshRef = useRef<THREE.InstancedMesh>(null);
+  const dummy = useMemo(() => new THREE.Object3D(), []);
+
+  const sliceGeometry = useMemo(() => {
+    const shape = new THREE.Shape();
+    const points: THREE.Vector2[] = [];
+
+    const steps = 256;
+    const a = sliceRadius * 1.5;
+    const b = sliceRadius * 0.25;
+    const n = 2;
+
+    for (let i = 0; i <= steps; i++) {
+      const theta = (i / steps) * Math.PI * 2;
+
+      const cosT = Math.cos(theta);
+      const sinT = Math.sin(theta);
+
+      const x = Math.sign(cosT) * Math.pow(Math.abs(cosT), 2 / n) * a;
+      const y = Math.sign(sinT) * Math.pow(Math.abs(sinT), 2 / n) * b;
+
+      points.push(new THREE.Vector2(x, y));
+    }
+
+    shape.setFromPoints(points);
+
+    const extrudeSettings = {
+      depth: sliceDepth,
+      bevelEnabled: bevelEnabled,
+      bevelThickness: Math.min(sliceDepth * 0.5, 0.02),
+      bevelSize: Math.min(sliceRadius * 0.04, 0.02),
+      bevelSegments: 32,
+      steps: 64,
+      curveSegments: 128,
+    };
+
+    const geom = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+    geom.center();
+    geom.computeVertexNormals();
+    return geom;
+  }, [sliceRadius, sliceDepth, bevelEnabled]);
+
+  useFrame((state) => {
+    if (!meshRef.current) return;
+
+    for (let i = 0; i < slices; i++) {
+      const t = (i / slices) * Math.PI * 2;
+      const x = majorRadius * Math.cos(t);
+      const z = majorRadius * Math.sin(t);
+
+      const radial = new THREE.Vector3(x, 0, z).normalize();
+
+      const q = new THREE.Quaternion();
+      q.setFromUnitVectors(new THREE.Vector3(0, 0, 1), radial);
+
+      const edgeRotation = new THREE.Quaternion().setFromEuler(
+        new THREE.Euler(0, Math.PI / 2, 0),
+      );
+      q.multiply(edgeRotation);
+
+      const animatedRotation =
+        Math.sin(state.clock.elapsedTime * 0.8 + i * 0.3) * 0.25;
+
+      const twistRotation = new THREE.Quaternion().setFromEuler(
+        new THREE.Euler(animatedRotation, 0, 0),
+      );
+      q.multiply(twistRotation);
+
+      dummy.position.set(x, 0, z);
+      dummy.quaternion.copy(q);
+      dummy.updateMatrix();
+      meshRef.current.setMatrixAt(i, dummy.matrix);
+    }
+    meshRef.current.instanceMatrix.needsUpdate = true;
+  });
+
+  return (
+    <instancedMesh
+      ref={meshRef}
+      args={[
+        sliceGeometry,
+        new THREE.MeshPhysicalMaterial({
+          roughness: 0.5,
+          metalness: 1.0,
+          clearcoat: 0,
+          ior: 2.8,
+          iridescence: 1.0,
+          color: "#3db2ff",
+          emissive: "#1a75ff",
+          emissiveIntensity: 0.01,
+        }),
+        slices,
+      ]}
+      castShadow
+    />
+  );
+}
+
+function RotatingTorus() {
+  const groupRef = useRef<THREE.Group>(null);
+
+  useFrame((state) => {
+    if (groupRef.current) {
+      const t = state.clock.getElapsedTime();
+      groupRef.current.rotation.y = t * -0.15;
+    }
+  });
+
+  return (
+    <group ref={groupRef} position={[4, -4, 3]} rotation={[Math.PI / 3, 0, 0]}>
+      <TorusFromSlices
+        slices={30}
+        majorRadius={4.5}
+        sliceRadius={1.5}
+        sliceDepth={0.035}
+        bevelEnabled={true}
+      />
+    </group>
+  );
+}
+
+interface Shader11Props {
+  className?: string;
+}
+
+const Shader11 = ({ className }: Shader11Props) => {
+  return (
+    <section
+      style={{
+        background: "linear-gradient(135deg, #050a1f 10%, #0f3b7a 90%)",
+      }}
+      className={cn(className, "absolute inset-0 h-screen w-full")}
+    >
+      <Canvas shadows camera={{ position: [0, 0, 6], fov: 50 }}>
+        <ambientLight intensity={0.3} color="#4fa9ff" />
+
+        <directionalLight
+          position={[5, 5, 5]}
+          intensity={1.4}
+          color="#3db2ff"
+          castShadow
+        />
+        <directionalLight
+          position={[-5, 5, 5]}
+          intensity={0.8}
+          color="#1461ff"
+        />
+        <directionalLight
+          position={[0, 8, -5]}
+          intensity={0.6}
+          color="#00e5ff"
+        />
+
+        <spotLight
+          position={[3, 6, 2]}
+          angle={0.4}
+          penumbra={0.3}
+          intensity={1.6}
+          color="#3db2ff"
+          castShadow
+        />
+        <spotLight
+          position={[-4, 4, -3]}
+          angle={0.3}
+          penumbra={0.5}
+          intensity={1.2}
+          color="#00f5ff"
+        />
+        <spotLight
+          position={[0, 3, 6]}
+          angle={0.5}
+          penumbra={0.4}
+          intensity={1.0}
+          color="#5fbaff"
+        />
+
+        <pointLight position={[0, -1, 0]} intensity={0.5} color="#1461ff" />
+
+        <RotatingTorus />
+
+        <EffectComposer multisampling={8}>
+          <Bloom
+            kernelSize={3}
+            luminanceThreshold={0}
+            luminanceSmoothing={0.4}
+            intensity={0.9}
+          />
+          <Bloom
+            kernelSize={KernelSize.HUGE}
+            luminanceThreshold={0}
+            luminanceSmoothing={0}
+            intensity={0.6}
+          />
+        </EffectComposer>
+      </Canvas>
+    </section>
+  );
+};
+export { Shader11 };
diff --git a/blocks/shader12.tsx b/blocks/shader12.tsx
new file mode 100644
index 0000000..72453a9
--- /dev/null
+++ b/blocks/shader12.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: Record<string, THREE.IUniform>;
+  timeMultiplier: number;
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  timeMultiplier,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * timeMultiplier;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: Record<string, THREE.IUniform>;
+  className?: string;
+  timeMultiplier?: number;
+  baseColor?: THREE.ColorRepresentation;
+  accent?: THREE.ColorRepresentation;
+  glow?: THREE.ColorRepresentation;
+}
+
+const Shader12 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+  precision highp float;
+
+  varying vec2 vUv;
+  uniform float u_time;
+  uniform vec3 u_resolution;
+
+  uniform vec3 u_baseColor;
+  uniform vec3 u_accent;
+  uniform vec3 u_glow;
+
+  #define A(a) mat2(cos(a+vec4(0,11,33,0)))  // rotate
+
+  void mainImage(out vec4 C, vec2 U)
+  {
+      float t = u_time * 6.3;
+      float d = 0.0;
+      float i = d;
+      float s;
+      vec2 R = u_resolution.xy;
+      vec2 m = -vec2(t / 30.0, 0.3); // kamera w spoczynku
+
+      vec3 o = vec3(0.0, 2.0, -15.0); // kamera
+      vec3 u = normalize(vec3((U - 0.5 * R) / R.y, 0.6)); // kierunek widzenia
+      vec3 c, p, g;
+
+      mat2 v = A(m.y); // pitch
+      mat2 h = A(m.x); // yaw
+
+      for (; i++ < 90.0;)
+      {
+          p = o + u * d;
+          p.yz *= v;
+          p.xz *= h;
+          p.y -= pow(length(p.xz), 2.0) * 0.01;
+          p.y += cos(length(round(p.xz)) - t / 5.5);
+          g = abs(p - round(p));
+          s = max(g.x, max(p.y * -sign(m.y), g.z)) - 0.3;
+          if (s < 0.001 || d > 90.0) break;
+          d += s * 0.2;
+      }
+
+      vec3 baseColor   = u_baseColor;
+      vec3 accent      = u_accent;
+      vec3 glow        = u_glow;
+
+      c = mix(baseColor, accent, 2.5 / d);
+      c += glow * 2.9 / (d * 2.0);
+
+      float vignette = smoothstep(0.8, 0.1, length((U - 0.5 * R) / R.y));
+      c *= vignette;
+
+      float noise = fract(sin(dot(U, vec2(12.9898,78.233))) * 43758.5453);
+      c += noise * 0.02;
+      c += 1.*s/d;
+
+      C = vec4(c, 1.0);
+  }
+
+  void main() {
+      vec4 fragColor;
+      vec2 fragCoord = vUv * u_resolution.xy;
+      mainImage(fragColor, fragCoord);
+      gl_FragColor = fragColor;
+  }
+  `,
+  uniforms = {},
+  className,
+  timeMultiplier = 0.8,
+  baseColor = "#020304",
+  accent = "#9a61ff",
+  glow = "#9a23ff",
+}: ShaderBackgroundProps) => {
+  const baseUniform = useMemo(() => new THREE.Color(baseColor), [baseColor]);
+  const accentUniform = useMemo(() => new THREE.Color(accent), [accent]);
+  const glowUniform = useMemo(() => new THREE.Color(glow), [glow]);
+
+  const shaderUniforms = useMemo<Record<string, THREE.IUniform>>(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      ...(uniforms ?? {}),
+      u_baseColor: { value: baseUniform },
+      u_accent: { value: accentUniform },
+      u_glow: { value: glowUniform },
+    }),
+    [uniforms, baseUniform, accentUniform, glowUniform],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+          timeMultiplier={timeMultiplier}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader12 };
diff --git a/blocks/shader13.tsx b/blocks/shader13.tsx
new file mode 100644
index 0000000..b629797
--- /dev/null
+++ b/blocks/shader13.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: Record<string, THREE.IUniform>;
+  timeMultiplier: number;
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  timeMultiplier,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * timeMultiplier;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: Record<string, THREE.IUniform>;
+  className?: string;
+  color?: THREE.ColorRepresentation;
+  timeMultiplier?: number;
+}
+
+const Shader13 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+  precision mediump float;
+  varying vec2 vUv;
+  uniform float u_time;
+  uniform vec3 u_resolution;
+  uniform vec3 u_color;
+
+  void mainImage(out vec4 o, vec2 v)
+  {
+      o = vec4(0.0);
+      vec2 u = (v + v - u_resolution.xy) / u_resolution.y;
+      u /= 0.5 + 0.2 * dot(u, u);
+      u += 0.2 * cos(u_time) - 7.56;
+
+      for (int i = 0; i < 3; i++) {
+          o[i] = 1.0 - exp(-6.0 / exp(6.0 * length(v + sin(5.0 * v.y - 3.0 * u_time + float(i)) / 4.0)));
+          v = sin(1.5 * u.yx + 2.0 * cos(u -= 0.01));
+      }
+
+      float brightness = dot(o.rgb, vec3(0.299, 0.587, 0.114));
+
+      o.rgb = brightness * u_color;
+      o.a = 1.0;
+  }
+
+  void main() {
+    vec4 fragColor;
+    vec2 fragCoord = vUv * u_resolution.xy;
+    mainImage(fragColor, fragCoord);
+    gl_FragColor = fragColor;
+  }
+  `,
+  uniforms = {},
+  className,
+  color = "#ff0000",
+  timeMultiplier = 0.5,
+}: ShaderBackgroundProps) => {
+  const colorUniformValue = useMemo(() => new THREE.Color(color), [color]);
+
+  const shaderUniforms = useMemo<Record<string, THREE.IUniform>>(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      ...(uniforms ?? {}),
+      u_color: { value: colorUniformValue },
+    }),
+    [uniforms, colorUniformValue],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+          timeMultiplier={timeMultiplier}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader13 };
diff --git a/blocks/shader14.tsx b/blocks/shader14.tsx
new file mode 100644
index 0000000..75b76d2
--- /dev/null
+++ b/blocks/shader14.tsx
@@ -0,0 +1,313 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  fragmentShader: string;
+  vertexShader: string;
+  uniforms: Record<string, THREE.IUniform>;
+  renderTarget?: THREE.WebGLRenderTarget;
+  onRender?: (texture: THREE.Texture) => void;
+}
+
+const ShaderPlane = ({
+  fragmentShader,
+  vertexShader,
+  uniforms,
+  renderTarget,
+  onRender,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size, gl } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+
+      if (renderTarget) {
+        gl.setRenderTarget(renderTarget);
+        gl.render(meshRef.current, state.camera);
+        gl.setRenderTarget(null);
+        onRender?.(renderTarget.texture);
+      }
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  className?: string;
+  backgroundColor?: THREE.ColorRepresentation;
+  color?: THREE.ColorRepresentation;
+}
+
+const Shader14 = ({
+  className = "absolute inset-0 w-full h-screen",
+  backgroundColor = "#000000",
+  color = "#f0f0f0",
+}: ShaderBackgroundProps) => {
+  const vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }
+  `;
+
+  const fragmentShaderA = `
+    precision mediump float;
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec3 u_backgroundColor;
+    uniform vec3 u_color;
+
+    #define TWOPI 6.28318530718
+
+    vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}
+    vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}
+    vec4 permute(vec4 x){return mod289(((x*34.0)+10.0)*x);}
+    vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}
+
+    float snoise(vec3 v){
+      const vec2 C=vec2(1.0/6.0,1.0/3.0);
+      const vec4 D=vec4(0.0,0.5,1.0,2.0);
+      vec3 i=floor(v+dot(v,C.yyy));
+      vec3 x0=v-i+dot(i,C.xxx);
+      vec3 g=step(x0.yzx,x0.xyz);
+      vec3 l=vec3(1.0)-g;
+      vec3 i1=min(g.xyz,l.zxy);
+      vec3 i2=max(g.xyz,l.zxy);
+      vec3 x1=x0-i1+C.xxx;
+      vec3 x2=x0-i2+C.yyy;
+      vec3 x3=x0-D.yyy;
+      i=mod289(i);
+      vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));
+      float n_=0.142857142857;
+      vec3 ns=n_*D.wyz-D.xzx;
+      vec4 j=p-49.0*floor(p*ns.z*ns.z);
+      vec4 x_=floor(j*ns.z);
+      vec4 y_=floor(j-7.0*x_);
+      vec4 x=x_*ns.x+ns.yyyy;
+      vec4 y=y_*ns.x+ns.yyyy;
+      vec4 h=vec4(1.0)-abs(x)-abs(y);
+      vec4 b0=vec4(x.xy,y.xy);
+      vec4 b1=vec4(x.zw,y.zw);
+      vec4 s0=floor(b0)*2.0+1.0;
+      vec4 s1=floor(b1)*2.0+1.0;
+      vec4 sh=-step(h,vec4(0.0));
+      vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
+      vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
+      vec3 p0=vec3(a0.xy,h.x);
+      vec3 p1=vec3(a0.zw,h.y);
+      vec3 p2=vec3(a1.xy,h.z);
+      vec3 p3=vec3(a1.zw,h.w);
+      vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
+      p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;
+      vec4 m=max(0.5-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);
+      m=m*m;
+      return 55.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
+    }
+
+    void mainImage(out vec4 fragColor,in vec2 fragCoord){
+      vec3 c;
+      float l,z=u_time;
+      vec2 r=u_resolution.xy;
+      vec2 uv0=fragCoord.xy/r;
+      float noiseStrength=0.16;
+      float noiseScale=0.001;
+      float speed=0.1;
+      float noiseTime=u_time*speed;
+      float noise=snoise(vec3(
+          (fragCoord.x-r.x/2.)*noiseScale,
+          (fragCoord.y-r.y/2.)*noiseScale,
+          noiseTime));
+      uv0.x=fract(uv0).x+noiseStrength*sin(noise*TWOPI);
+      uv0.y=fract(uv0).y+noiseStrength*cos(noise*TWOPI);
+      for(int i=0;i<3;i++){
+        vec2 uv,p=uv0;
+        uv=p;
+        p-=.5;
+        p.x*=r.x/r.y;
+        z+=.03;
+        l=length(p);
+        uv+=p/l*(sin(z)+1.)*abs(sin(l*9.-z-z));
+        c[i]=.05/length(mod(uv,1.)-.5);
+      }
+      fragColor=vec4(c/l,1.0);
+    }
+
+    void main(){
+      vec4 fragColor;
+      vec2 fragCoord=vUv*u_resolution.xy;
+      mainImage(fragColor,fragCoord);
+
+      vec3 pattern = fragColor.rgb * u_color;
+      fragColor.rgb = mix(u_backgroundColor, pattern, 0.6);
+
+      gl_FragColor=fragColor;
+    }
+  `;
+
+  const fragmentShaderImage = `
+    precision mediump float;
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform sampler2D u_channel0;
+
+    float character(int n, vec2 p){
+      p=floor(p*vec2(-4.0,4.0)+2.5);
+      if(clamp(p.x,0.0,4.0)==p.x){
+        if(clamp(p.y,0.0,4.0)==p.y){
+          int a=int(round(p.x)+5.0*round(p.y));
+          if(((n>>a)&1)==1)return 1.0;
+        }
+      }
+      return 0.0;
+    }
+
+    void mainImage(out vec4 fragColor,in vec2 fragCoord){
+      vec2 pix=fragCoord.xy;
+      vec3 col=texture2D(u_channel0,floor(pix/16.0)*16.0/u_resolution.xy).rgb;
+      float gray=0.3*col.r+0.59*col.g+0.11*col.b;
+      int n=4096;
+      if(gray>0.1)n=4096;
+      if(gray>0.1064)n=131200;
+      if(gray>0.1096)n=4329476;
+      if(gray>0.1130)n=459200;
+      if(gray>0.1263)n=4591748;
+      if(gray>0.1395)n=12652620;
+      if(gray>0.1628)n=14749828;
+      if(gray>0.1860)n=18393220;
+      if(gray>0.2093)n=15239300;
+      if(gray>0.2326)n=17318431;
+      if(gray>0.2558)n=32641156;
+      if(gray>0.2791)n=18393412;
+      if(gray>0.3023)n=18157905;
+      if(gray>0.3256)n=17463428;
+      if(gray>0.3488)n=14954572;
+      if(gray>0.3721)n=13177118;
+      if(gray>0.3953)n=6566222;
+      if(gray>0.4186)n=16269839;
+      if(gray>0.4419)n=18444881;
+      if(gray>0.4651)n=18400814;
+      if(gray>0.4884)n=33061392;
+      if(gray>0.5116)n=15255086;
+      if(gray>0.5349)n=32045584;
+      if(gray>0.5581)n=18405034;
+      if(gray>0.5814)n=15022158;
+      if(gray>0.6047)n=15018318;
+      if(gray>0.6279)n=16272942;
+      if(gray>0.6512)n=18415153;
+      if(gray>0.6744)n=32641183;
+      if(gray>0.6977)n=32540207;
+      if(gray>0.7209)n=18732593;
+      if(gray>0.7442)n=18667121;
+      if(gray>0.7674)n=16267326;
+      if(gray>0.7907)n=32575775;
+      if(gray>0.8140)n=15022414;
+      if(gray>0.8372)n=15255537;
+      if(gray>0.8605)n=32032318;
+      if(gray>0.8837)n=32045617;
+      if(gray>0.9070)n=33081316;
+      if(gray>0.9302)n=32045630;
+      if(gray>0.9535)n=33061407;
+      if(gray>0.9767)n=11512810;
+
+      vec2 p=mod(pix/8.0,2.0)-vec2(1.0);
+      vec3 finalCol=col*character(n,p);
+      fragColor=vec4(finalCol,1.0);
+    }
+
+    void main(){
+      vec4 fragColor;
+      vec2 fragCoord=vUv*u_resolution.xy;
+      mainImage(fragColor,fragCoord);
+      gl_FragColor=fragColor;
+    }
+  `;
+
+  const backgroundColorValue = useMemo(
+    () => new THREE.Color(backgroundColor),
+    [backgroundColor],
+  );
+  const colorValue = useMemo(() => new THREE.Color(color), [color]);
+
+  const renderTarget = useMemo(() => {
+    if (typeof window === "undefined") return null;
+    return new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      format: THREE.RGBAFormat,
+    });
+  }, []);
+
+  const uniformsA = useMemo<Record<string, THREE.IUniform>>(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      u_backgroundColor: { value: backgroundColorValue },
+      u_color: { value: colorValue },
+    }),
+    [backgroundColorValue, colorValue],
+  );
+
+  const uniformsImage = useMemo<Record<string, THREE.IUniform>>(() => {
+    if (!renderTarget) {
+      return {
+        u_time: { value: 0 },
+        u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+        u_channel0: { value: null },
+      };
+    }
+
+    return {
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      u_channel0: { value: renderTarget.texture },
+    };
+  }, [renderTarget]);
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        {renderTarget && (
+          <>
+            <ShaderPlane
+              vertexShader={vertexShader}
+              fragmentShader={fragmentShaderA}
+              uniforms={uniformsA}
+              renderTarget={renderTarget}
+            />
+            <ShaderPlane
+              vertexShader={vertexShader}
+              fragmentShader={fragmentShaderImage}
+              uniforms={uniformsImage}
+            />
+          </>
+        )}
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader14 };
diff --git a/blocks/shader15.tsx b/blocks/shader15.tsx
new file mode 100644
index 0000000..3481e9d
--- /dev/null
+++ b/blocks/shader15.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Base color filter applied to the dispersed light.
+ *
+ * **Note:** This shader simulates light dispersion, splitting the spectrum into RGB components.
+ * The `color` prop does not directly set the visible color  instead, it acts as a *filter* that
+ * determines which parts of the spectrum remain visible.
+ *
+ * For example:
+ * - `#ffffff` → full visible spectrum (rainbow effect)
+ * - `#ffff00` → red and green wavelengths (no blue)
+ * - `#ff0000` → only red wavelengths visible
+ *
+ * In short, `color` behaves like a spectral mask rather than a surface color.
+ */
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: Record<string, THREE.IUniform>;
+  timeMultiplier: number;
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  timeMultiplier,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * timeMultiplier;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: Record<string, THREE.IUniform>;
+  className?: string;
+  color?: THREE.ColorRepresentation;
+  timeMultiplier?: number;
+}
+
+const Shader15 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec3 u_color;
+
+    float v(in vec2 uv, float d, float o){
+        return 1.0-smoothstep(0.0, d, distance(uv.x, 0.5 + sin(o+uv.y*3.0)*0.3));
+    }
+
+    vec4 b(vec2 uv, float o) {
+     float d = 0.05+abs(sin(o*0.2))*0.25 * distance(uv.y+0.5, 0.0);
+     return vec4(v(uv+vec2(d*0.25, 0.0), d, o), 0.0, 0.0, 1.0) +
+            vec4(0.0, v(uv-vec2(0.015, 0.005), d, o), 0.0, 1.0) +
+            vec4(0.0, 0.0, v(uv-vec2(d*0.5, 0.015), d, o), 1.0);
+    }
+
+    void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
+     	vec2 uv = fragCoord.xy / u_resolution.y;
+     	uv.x -= 0.75;
+
+      float angle = radians(-45.0);
+      mat2 rot = mat2(cos(angle), -sin(angle),
+                      sin(angle),  cos(angle));
+      uv = rot * uv;
+
+        vec4 accumulated =  b(uv, u_time)*0.5 +
+            b(uv, u_time*2.0)*0.5 +
+            b(uv+vec2(0.3, 0.0), u_time*3.3)*0.5;
+
+        fragColor = vec4(accumulated.rgb * u_color, 1.0);
+    }
+
+      void main() {
+        vec4 fragColor;
+        vec2 fragCoord = vUv * u_resolution.xy;
+        mainImage(fragColor, fragCoord);
+        gl_FragColor = fragColor;
+      }
+  `,
+  uniforms,
+  className = "absolute inset-0 w-full h-screen",
+  color = "#ffffff",
+  timeMultiplier = 0.5,
+}: ShaderBackgroundProps) => {
+  const colorUniformValue = useMemo(() => new THREE.Color(color), [color]);
+
+  const shaderUniforms = useMemo<Record<string, THREE.IUniform>>(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      ...(uniforms ?? {}),
+      u_color: { value: colorUniformValue },
+    }),
+    [uniforms, colorUniformValue],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+          timeMultiplier={timeMultiplier}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader15 };
diff --git a/blocks/shader16.tsx b/blocks/shader16.tsx
new file mode 100644
index 0000000..54b6ed0
--- /dev/null
+++ b/blocks/shader16.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: Record<string, THREE.IUniform>;
+  timeMultiplier: number;
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  timeMultiplier,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * timeMultiplier;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: Record<string, THREE.IUniform>;
+  className?: string;
+  color?: THREE.ColorRepresentation;
+  timeMultiplier?: number;
+}
+
+const Shader16 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec3 u_color;
+
+    float rand(float x) { return fract(sin(x) * 4358.5453123); }
+    float rand(vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5357); }
+
+    float invader(vec2 p, float n)
+    {
+	p.x = abs(p.x);
+	p.y = floor(p.y - 5.0);
+        return step(p.x, 2.0) * step(1.0, floor(mod(n/(exp2(floor(p.x - 3.0*p.y))),2.0)));
+    }
+
+    float ring(vec2 uv, float rnd)
+    {
+        float t = 0.6*(u_time+0.2*rnd);
+        float i = floor(t/2.0);
+        vec2 pos = 2.0*vec2(rand(i*0.123), rand(i*2.371))-1.0;
+	return smoothstep(0.2, 0.0, abs(length(uv-pos)-mod(t,2.0)));
+    }
+
+    void mainImage(out vec4 fragColor, in vec2 fragCoord)
+    {
+
+        vec2 p = fragCoord.xy;
+	vec2 uv = p / u_resolution.xy - 0.5;
+        p.y += 20.0*u_time;
+        float r = rand(floor(p/8.0));
+        vec2 ip = mod(p,8.0)-4.0;
+
+        float a = -0.3*smoothstep(0.1, 0.8, length(uv)) +
+            invader(ip, 809999.0*r) * (0.06 + 0.3*ring(uv,r) + max(0.0, 0.2*sin(10.0*r*u_time)));
+
+	fragColor = vec4(u_color + a, 1.0);
+    }
+
+      void main() {
+        vec4 fragColor;
+        vec2 fragCoord = vUv * u_resolution.xy;
+        mainImage(fragColor, fragCoord);
+        gl_FragColor = fragColor;
+      }
+  `,
+  uniforms,
+  className = "absolute inset-0 w-full h-screen",
+  color = "#e5e5e5",
+  timeMultiplier = 1.5,
+}: ShaderBackgroundProps) => {
+  const colorUniformValue = useMemo(() => new THREE.Color(color), [color]);
+
+  const shaderUniforms = useMemo<Record<string, THREE.IUniform>>(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      ...(uniforms ?? {}),
+      u_color: { value: colorUniformValue },
+    }),
+    [uniforms, colorUniformValue],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+          timeMultiplier={timeMultiplier}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader16 };
diff --git a/blocks/shader17.tsx b/blocks/shader17.tsx
new file mode 100644
index 0000000..26c8680
--- /dev/null
+++ b/blocks/shader17.tsx
@@ -0,0 +1,978 @@
+"use client";
+
+import { Canvas, useFrame, useLoader, useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface Background27Props {
+  className?: string;
+  imageUrl?: string;
+  pointerColor?: string;
+}
+
+interface PointerState {
+  uv: THREE.Vector2;
+  prev: THREE.Vector2;
+  delta: THREE.Vector2;
+  instant: THREE.Vector2;
+  moved: boolean;
+  target: THREE.Vector2;
+}
+
+const POINTER_LERP_SPEED = 10;
+const POINTER_VELOCITY_LERP = 40;
+const POINTER_MIN_DELTA = 0.0001;
+const POINTER_POSITION_EPSILON = 0.0002;
+const MAX_INFLUENCE_TEXTURE_SIZE = 1024;
+
+const createDefaultInfluenceTexture = () => {
+  const texture = new THREE.DataTexture(
+    new Uint8Array([255, 255, 255, 255]),
+    1,
+    1,
+    THREE.RGBAFormat,
+  );
+  texture.needsUpdate = true;
+  texture.wrapS = THREE.ClampToEdgeWrapping;
+  texture.wrapT = THREE.ClampToEdgeWrapping;
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  return texture;
+};
+
+const getImageDimensions = (image: CanvasImageSource) => {
+  const video = image as HTMLVideoElement;
+  if (video && typeof video.videoWidth === "number" && video.videoWidth > 0) {
+    return { width: video.videoWidth, height: video.videoHeight };
+  }
+
+  const htmlImage = image as HTMLImageElement;
+  if (
+    htmlImage &&
+    typeof htmlImage.naturalWidth === "number" &&
+    htmlImage.naturalWidth > 0
+  ) {
+    return { width: htmlImage.naturalWidth, height: htmlImage.naturalHeight };
+  }
+
+  const bitmap = image as ImageBitmap;
+  if (
+    bitmap &&
+    typeof bitmap.width === "number" &&
+    typeof bitmap.height === "number" &&
+    bitmap.width > 0 &&
+    bitmap.height > 0
+  ) {
+    return { width: bitmap.width, height: bitmap.height };
+  }
+
+  const canvas = image as HTMLCanvasElement;
+  if (
+    canvas &&
+    typeof canvas.width === "number" &&
+    typeof canvas.height === "number" &&
+    canvas.width > 0 &&
+    canvas.height > 0
+  ) {
+    return { width: canvas.width, height: canvas.height };
+  }
+
+  return { width: 1, height: 1 };
+};
+
+const createLuminanceInfluenceTexture = (
+  source: THREE.Texture,
+  targetWidth?: number,
+  targetHeight?: number,
+) => {
+  const image = source.image as CanvasImageSource | undefined;
+
+  if (!image) {
+    return null;
+  }
+
+  const { width: imageWidth, height: imageHeight } = getImageDimensions(image);
+
+  if (!imageWidth || !imageHeight) {
+    return null;
+  }
+
+  let canvasWidth = Math.max(1, targetWidth ?? imageWidth);
+  let canvasHeight = Math.max(1, targetHeight ?? imageHeight);
+
+  const widthScale = Math.min(MAX_INFLUENCE_TEXTURE_SIZE / canvasWidth, 1);
+  const heightScale = Math.min(MAX_INFLUENCE_TEXTURE_SIZE / canvasHeight, 1);
+  const scale = Math.min(widthScale, heightScale);
+
+  if (scale < 1) {
+    canvasWidth = Math.max(1, Math.floor(canvasWidth * scale));
+    canvasHeight = Math.max(1, Math.floor(canvasHeight * scale));
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const context = canvas.getContext("2d");
+
+  if (!context) {
+    return null;
+  }
+
+  context.imageSmoothingEnabled = true;
+  context.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+  const imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);
+  const { data } = imageData;
+  const output = new Uint8Array(canvasWidth * canvasHeight * 4);
+
+  for (let i = 0; i < canvasWidth * canvasHeight; i++) {
+    const baseIndex = i * 4;
+    const luminance = Math.round(
+      data[baseIndex] * 0.299 +
+        data[baseIndex + 1] * 0.587 +
+        data[baseIndex + 2] * 0.114,
+    );
+    output[baseIndex] = luminance;
+    output[baseIndex + 1] = luminance;
+    output[baseIndex + 2] = luminance;
+    output[baseIndex + 3] = 255;
+  }
+
+  const texture = new THREE.DataTexture(
+    output,
+    canvasWidth,
+    canvasHeight,
+    THREE.RGBAFormat,
+  );
+  texture.needsUpdate = true;
+  texture.wrapS = THREE.ClampToEdgeWrapping;
+  texture.wrapT = THREE.ClampToEdgeWrapping;
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  return texture;
+};
+
+const BASE_VERTEX_SHADER = `
+  precision highp float;
+
+  attribute vec3 position;
+  attribute vec2 uv;
+
+  varying vec2 vUv;
+  varying vec2 vL;
+  varying vec2 vR;
+  varying vec2 vT;
+  varying vec2 vB;
+
+  uniform vec2 u_texel;
+
+  void main () {
+    vUv = uv;
+    vL = vUv - vec2(u_texel.x, 0.0);
+    vR = vUv + vec2(u_texel.x, 0.0);
+    vT = vUv + vec2(0.0, u_texel.y);
+    vB = vUv - vec2(0.0, u_texel.y);
+    gl_Position = vec4(position.xy, 0.0, 1.0);
+  }
+`;
+
+const ADVECTION_SHADER = `
+  precision highp float;
+  precision highp sampler2D;
+
+  varying vec2 vUv;
+  uniform sampler2D u_velocity_texture;
+  uniform sampler2D u_input_texture;
+  uniform sampler2D u_influence_texture;
+  uniform vec2 u_texel;
+  uniform float u_dt;
+  uniform float u_use_influence;
+
+  vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
+    vec2 st = uv / tsize - 0.5;
+
+    vec2 iuv = floor(st);
+    vec2 fuv = fract(st);
+
+    vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
+    vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
+    vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
+    vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);
+
+    return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
+  }
+
+  void main () {
+    vec2 coord = vUv - u_dt * bilerp(u_velocity_texture, vUv, u_texel).xy * u_texel;
+    float influence = texture2D(u_influence_texture, vec2(vUv.x, 1.0 - vUv.y)).r;
+    float dissipation = (0.85 + influence * 0.1 * u_use_influence);
+
+    gl_FragColor = dissipation * bilerp(u_input_texture, coord, u_texel);
+    gl_FragColor.a = 1.0;
+  }
+`;
+
+const DIVERGENCE_SHADER = `
+  precision highp float;
+  precision highp sampler2D;
+
+  varying vec2 vUv;
+  varying vec2 vL;
+  varying vec2 vR;
+  varying vec2 vT;
+  varying vec2 vB;
+  uniform sampler2D u_velocity_texture;
+
+  void main () {
+    float L = texture2D(u_velocity_texture, vL).x;
+    float R = texture2D(u_velocity_texture, vR).x;
+    float T = texture2D(u_velocity_texture, vT).y;
+    float B = texture2D(u_velocity_texture, vB).y;
+
+    float div = 0.6 * (R - L + T - B);
+    gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
+  }
+`;
+
+const PRESSURE_SHADER = `
+  precision highp float;
+  precision highp sampler2D;
+
+  varying vec2 vUv;
+  varying vec2 vL;
+  varying vec2 vR;
+  varying vec2 vT;
+  varying vec2 vB;
+  uniform sampler2D u_pressure_texture;
+  uniform sampler2D u_divergence_texture;
+  uniform sampler2D u_influence_texture;
+
+  void main () {
+    float influence = texture2D(u_influence_texture, vec2(vUv.x, 1.0 - vUv.y)).r;
+
+    float L = texture2D(u_pressure_texture, vL).x;
+    float R = texture2D(u_pressure_texture, vR).x;
+    float T = texture2D(u_pressure_texture, vT).x;
+    float B = texture2D(u_pressure_texture, vB).x;
+    float divergence = texture2D(u_divergence_texture, vUv).x;
+
+    float pressure = (L + R + B + T - divergence) * 0.25;
+    pressure += (0.2 * influence);
+
+    gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
+  }
+`;
+
+const GRADIENT_SHADER = `
+  precision highp float;
+  precision highp sampler2D;
+
+  varying vec2 vUv;
+  varying vec2 vL;
+  varying vec2 vR;
+  varying vec2 vT;
+  varying vec2 vB;
+  uniform sampler2D u_pressure_texture;
+  uniform sampler2D u_velocity_texture;
+  uniform sampler2D u_influence_texture;
+
+  void main () {
+    float L = texture2D(u_pressure_texture, vL).x;
+    float R = texture2D(u_pressure_texture, vR).x;
+    float T = texture2D(u_pressure_texture, vT).x;
+    float B = texture2D(u_pressure_texture, vB).x;
+    vec2 velocity = texture2D(u_velocity_texture, vUv).xy;
+    velocity.xy -= vec2(R - L, T - B);
+    gl_FragColor = vec4(velocity, 0.0, 1.0);
+  }
+`;
+
+const POINT_SHADER = `
+  precision highp float;
+  precision highp sampler2D;
+
+  varying vec2 vUv;
+  uniform sampler2D u_input_texture;
+  uniform float u_ratio;
+  uniform vec3 u_point_value;
+  uniform vec2 u_point;
+  uniform float u_point_size;
+  uniform sampler2D u_influence_texture;
+
+  void main () {
+    vec2 p = vUv - u_point.xy;
+    p.x *= u_ratio;
+    vec3 splat = pow(3.0, -dot(p, p) / u_point_size) * u_point_value;
+
+    float influence = texture2D(u_influence_texture, vec2(vUv.x, 1.0 - vUv.y)).r;
+    splat *= (0.7 + 0.2 * influence);
+
+    vec3 base = texture2D(u_input_texture, vUv).xyz;
+    gl_FragColor = vec4(base + splat, 1.0);
+  }
+`;
+
+const DISPLAY_VERTEX_SHADER = `
+  varying vec2 vUv;
+
+  void main () {
+    vUv = uv;
+    gl_Position = vec4(position.xy, 0.0, 1.0);
+  }
+`;
+
+const DISPLAY_FRAGMENT_SHADER = `
+  precision highp float;
+
+  varying vec2 vUv;
+  uniform sampler2D u_colorTexture;
+  uniform sampler2D u_fluidTexture;
+
+  float luma(vec3 color) {
+    return dot(color, vec3(0.299, 0.587, 0.114));
+  }
+
+  void main () {
+    vec4 image = texture2D(u_colorTexture, vUv);
+    vec3 gray = vec3(luma(image.rgb));
+    vec3 fluid = texture2D(u_fluidTexture, vUv).rgb;
+    vec3 shifted = vec3(
+      texture2D(u_fluidTexture, vUv + vec2(0.0006, 0.0)).r,
+      texture2D(u_fluidTexture, vUv).g,
+      texture2D(u_fluidTexture, vUv - vec2(0.0006, 0.0)).b
+    );
+
+    float mask = clamp(length(fluid) * 1.5, 0.0, 1.0);
+    mask = pow(mask, 0.6);
+    mask = smoothstep(0.05, 0.8, mask);
+
+    vec3 fluidColor = mix(fluid, shifted, 3.0);
+    fluidColor = normalize(fluidColor + 0.1) * 0.8;
+
+    vec3 color = mix(gray, image.rgb + fluidColor * 0.4, mask);
+    gl_FragColor = vec4(color, image.a);
+  }
+`;
+
+const requestFloatSupport = (renderer: THREE.WebGLRenderer) => {
+  const gl = renderer.getContext();
+  const extensions = [
+    "OES_texture_float",
+    "OES_texture_float_linear",
+    "OES_texture_half_float",
+    "OES_texture_half_float_linear",
+    "WEBGL_color_buffer_float",
+    "EXT_color_buffer_float",
+    "EXT_color_buffer_half_float",
+  ];
+  extensions.forEach((name) => {
+    if (name && gl.getExtension(name) === null) {
+      return;
+    }
+  });
+};
+
+const getSupportedTextureType = (renderer: THREE.WebGLRenderer) => {
+  const gl = renderer.getContext();
+  const isWebGL2 = renderer.capabilities.isWebGL2;
+
+  if (isWebGL2) {
+    if (
+      gl.getExtension("EXT_color_buffer_float") ||
+      gl.getExtension("WEBGL_color_buffer_float")
+    ) {
+      return THREE.FloatType;
+    }
+    if (gl.getExtension("EXT_color_buffer_half_float")) {
+      return THREE.HalfFloatType;
+    }
+  } else {
+    if (
+      gl.getExtension("OES_texture_float") &&
+      gl.getExtension("WEBGL_color_buffer_float")
+    ) {
+      return THREE.FloatType;
+    }
+    if (
+      gl.getExtension("OES_texture_half_float") &&
+      gl.getExtension("EXT_color_buffer_half_float")
+    ) {
+      return THREE.HalfFloatType;
+    }
+  }
+
+  return THREE.UnsignedByteType;
+};
+
+const createRenderTarget = (
+  width: number,
+  height: number,
+  type: THREE.TextureDataType,
+) => {
+  const target = new THREE.WebGLRenderTarget(width, height, {
+    type,
+    format: THREE.RGBAFormat,
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter,
+    depthBuffer: false,
+    stencilBuffer: false,
+  });
+  target.texture.wrapS = THREE.ClampToEdgeWrapping;
+  target.texture.wrapT = THREE.ClampToEdgeWrapping;
+  target.texture.generateMipmaps = false;
+  return target;
+};
+
+class DoubleFBO {
+  read: THREE.WebGLRenderTarget;
+  write: THREE.WebGLRenderTarget;
+
+  constructor(width: number, height: number, type: THREE.TextureDataType) {
+    this.read = createRenderTarget(width, height, type);
+    this.write = createRenderTarget(width, height, type);
+  }
+
+  swap() {
+    const temp = this.read;
+    this.read = this.write;
+    this.write = temp;
+  }
+
+  dispose() {
+    this.read.dispose();
+    this.write.dispose();
+  }
+}
+
+class FluidSimulation {
+  private renderer: THREE.WebGLRenderer;
+  private scene: THREE.Scene;
+  private camera: THREE.OrthographicCamera;
+  private quad: THREE.Mesh<THREE.PlaneGeometry, THREE.RawShaderMaterial>;
+  private geometry: THREE.PlaneGeometry;
+  private advectionMaterial: THREE.RawShaderMaterial;
+  private divergenceMaterial: THREE.RawShaderMaterial;
+  private pressureMaterial: THREE.RawShaderMaterial;
+  private gradientMaterial: THREE.RawShaderMaterial;
+  private pointMaterial: THREE.RawShaderMaterial;
+  private defaultInfluenceTexture: THREE.DataTexture;
+  private influenceTexture: THREE.Texture;
+  private ownsInfluenceTexture: boolean;
+  private velocity: DoubleFBO;
+  private dye: DoubleFBO;
+  private divergence: THREE.WebGLRenderTarget;
+  private pressure: DoubleFBO;
+  private pointerColor: THREE.Vector3;
+  private aspect: number;
+
+  constructor(
+    renderer: THREE.WebGLRenderer,
+    width: number,
+    height: number,
+    pointerColor: THREE.Vector3,
+  ) {
+    this.renderer = renderer;
+    this.pointerColor = pointerColor.clone();
+
+    requestFloatSupport(renderer);
+    this.defaultInfluenceTexture = createDefaultInfluenceTexture();
+    this.influenceTexture = this.defaultInfluenceTexture;
+    this.ownsInfluenceTexture = false;
+
+    const type = getSupportedTextureType(renderer);
+
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    this.geometry = new THREE.PlaneGeometry(2, 2);
+
+    this.advectionMaterial = this.createAdvectionMaterial(width, height);
+    this.divergenceMaterial = this.createDivergenceMaterial(width, height);
+    this.pressureMaterial = this.createPressureMaterial(width, height);
+    this.gradientMaterial = this.createGradientMaterial(width, height);
+    this.pointMaterial = this.createPointMaterial(width, height);
+    this.updateInfluenceUniforms(this.influenceTexture, false);
+
+    this.quad = new THREE.Mesh(this.geometry, this.advectionMaterial);
+    this.quad.frustumCulled = false;
+    this.scene.add(this.quad);
+
+    this.velocity = new DoubleFBO(width, height, type);
+    this.dye = new DoubleFBO(width, height, type);
+    this.pressure = new DoubleFBO(width, height, type);
+    this.divergence = createRenderTarget(width, height, type);
+
+    this.aspect = width / Math.max(height, 1);
+    this.updateTexelUniforms(width, height);
+  }
+
+  private createAdvectionMaterial(width: number, height: number) {
+    return new THREE.RawShaderMaterial({
+      vertexShader: BASE_VERTEX_SHADER,
+      fragmentShader: ADVECTION_SHADER,
+      uniforms: {
+        u_velocity_texture: { value: null },
+        u_input_texture: { value: null },
+        u_influence_texture: { value: this.influenceTexture },
+        u_texel: { value: new THREE.Vector2(1 / width, 1 / height) },
+        u_dt: { value: 0.016 },
+        u_use_influence: { value: 0.0 },
+      },
+      depthTest: false,
+      depthWrite: false,
+      blending: THREE.NoBlending,
+    });
+  }
+
+  private createDivergenceMaterial(width: number, height: number) {
+    return new THREE.RawShaderMaterial({
+      vertexShader: BASE_VERTEX_SHADER,
+      fragmentShader: DIVERGENCE_SHADER,
+      uniforms: {
+        u_velocity_texture: { value: null },
+        u_texel: { value: new THREE.Vector2(1 / width, 1 / height) },
+      },
+      depthTest: false,
+      depthWrite: false,
+      blending: THREE.NoBlending,
+    });
+  }
+
+  private createPressureMaterial(width: number, height: number) {
+    return new THREE.RawShaderMaterial({
+      vertexShader: BASE_VERTEX_SHADER,
+      fragmentShader: PRESSURE_SHADER,
+      uniforms: {
+        u_pressure_texture: { value: null },
+        u_divergence_texture: { value: null },
+        u_influence_texture: { value: this.influenceTexture },
+        u_texel: { value: new THREE.Vector2(1 / width, 1 / height) },
+      },
+      depthTest: false,
+      depthWrite: false,
+      blending: THREE.NoBlending,
+    });
+  }
+
+  private createGradientMaterial(width: number, height: number) {
+    return new THREE.RawShaderMaterial({
+      vertexShader: BASE_VERTEX_SHADER,
+      fragmentShader: GRADIENT_SHADER,
+      uniforms: {
+        u_pressure_texture: { value: null },
+        u_velocity_texture: { value: null },
+        u_influence_texture: { value: this.influenceTexture },
+        u_texel: { value: new THREE.Vector2(1 / width, 1 / height) },
+      },
+      depthTest: false,
+      depthWrite: false,
+      blending: THREE.NoBlending,
+    });
+  }
+
+  private createPointMaterial(width: number, height: number) {
+    return new THREE.RawShaderMaterial({
+      vertexShader: BASE_VERTEX_SHADER,
+      fragmentShader: POINT_SHADER,
+      uniforms: {
+        u_input_texture: { value: null },
+        u_ratio: { value: width / Math.max(height, 1) },
+        u_point_value: { value: new THREE.Vector3() },
+        u_point: { value: new THREE.Vector2(0.5, 0.5) },
+        u_point_size: { value: 0.02 },
+        u_influence_texture: { value: this.influenceTexture },
+        u_texel: { value: new THREE.Vector2(1 / width, 1 / height) },
+      },
+      depthTest: false,
+      depthWrite: false,
+      blending: THREE.NoBlending,
+    });
+  }
+
+  private updateInfluenceUniforms(
+    texture: THREE.Texture,
+    enableInfluence: boolean,
+  ) {
+    this.advectionMaterial.uniforms.u_influence_texture.value = texture;
+    this.pressureMaterial.uniforms.u_influence_texture.value = texture;
+    this.gradientMaterial.uniforms.u_influence_texture.value = texture;
+    this.pointMaterial.uniforms.u_influence_texture.value = texture;
+    this.advectionMaterial.uniforms.u_use_influence.value = enableInfluence
+      ? 1.0
+      : 0.0;
+  }
+
+  setInfluenceTexture(texture: THREE.Texture | null, ownsTexture = false) {
+    if (
+      this.ownsInfluenceTexture &&
+      this.influenceTexture &&
+      this.influenceTexture !== this.defaultInfluenceTexture
+    ) {
+      this.influenceTexture.dispose();
+    }
+
+    if (texture) {
+      this.influenceTexture = texture;
+      this.ownsInfluenceTexture = ownsTexture;
+      this.updateInfluenceUniforms(texture, true);
+    } else {
+      this.influenceTexture = this.defaultInfluenceTexture;
+      this.ownsInfluenceTexture = false;
+      this.updateInfluenceUniforms(this.defaultInfluenceTexture, false);
+    }
+  }
+
+  private updateTexelUniforms(width: number, height: number) {
+    const texel = new THREE.Vector2(1 / width, 1 / height);
+    (this.advectionMaterial.uniforms.u_texel.value as THREE.Vector2).copy(
+      texel,
+    );
+    (this.divergenceMaterial.uniforms.u_texel.value as THREE.Vector2).copy(
+      texel,
+    );
+    (this.pressureMaterial.uniforms.u_texel.value as THREE.Vector2).copy(texel);
+    (this.gradientMaterial.uniforms.u_texel.value as THREE.Vector2).copy(texel);
+    (this.pointMaterial.uniforms.u_texel.value as THREE.Vector2).copy(texel);
+    this.pointMaterial.uniforms.u_ratio.value = width / Math.max(height, 1);
+  }
+
+  private blit(
+    material: THREE.RawShaderMaterial,
+    target: THREE.WebGLRenderTarget | null,
+  ) {
+    this.quad.material = material;
+    this.renderer.setRenderTarget(target);
+    this.renderer.render(this.scene, this.camera);
+    this.renderer.setRenderTarget(null);
+  }
+
+  private splat(pointer: PointerState) {
+    const material = this.pointMaterial;
+    material.uniforms.u_point.value.copy(pointer.uv);
+    material.uniforms.u_ratio.value = this.aspect;
+
+    const deltaLength = pointer.delta.length();
+    if (deltaLength <= 0.0) {
+      return;
+    }
+
+    const velocityValue = material.uniforms.u_point_value
+      .value as THREE.Vector3;
+    velocityValue.set(pointer.delta.x, pointer.delta.y, 0.0);
+    velocityValue.multiplyScalar(10.0);
+    material.uniforms.u_point_size.value = 0.005;
+    material.uniforms.u_input_texture.value = this.velocity.read.texture;
+    this.blit(material, this.velocity.write);
+    this.velocity.swap();
+
+    const colorValue = material.uniforms.u_point_value.value as THREE.Vector3;
+    const colorIntensity = THREE.MathUtils.clamp(deltaLength * 20.0, 0.0, 1.0);
+    if (colorIntensity <= 0.0) {
+      return;
+    }
+    colorValue.copy(this.pointerColor).multiplyScalar(300 * colorIntensity);
+    material.uniforms.u_point_size.value = 0.0025;
+    material.uniforms.u_input_texture.value = this.dye.read.texture;
+    this.blit(material, this.dye.write);
+    this.dye.swap();
+  }
+
+  update(delta: number, pointer: PointerState) {
+    if (pointer?.moved) {
+      this.splat(pointer);
+    }
+
+    this.advectionMaterial.uniforms.u_dt.value = delta;
+
+    this.advectionMaterial.uniforms.u_velocity_texture.value =
+      this.velocity.read.texture;
+    this.advectionMaterial.uniforms.u_input_texture.value =
+      this.velocity.read.texture;
+    this.blit(this.advectionMaterial, this.velocity.write);
+    this.velocity.swap();
+
+    this.advectionMaterial.uniforms.u_velocity_texture.value =
+      this.velocity.read.texture;
+    this.advectionMaterial.uniforms.u_input_texture.value =
+      this.dye.read.texture;
+    this.blit(this.advectionMaterial, this.dye.write);
+    this.dye.swap();
+
+    this.divergenceMaterial.uniforms.u_velocity_texture.value =
+      this.velocity.read.texture;
+    this.blit(this.divergenceMaterial, this.divergence);
+
+    for (let i = 0; i < 10; i++) {
+      this.pressureMaterial.uniforms.u_pressure_texture.value =
+        this.pressure.read.texture;
+      this.pressureMaterial.uniforms.u_divergence_texture.value =
+        this.divergence.texture;
+      this.blit(this.pressureMaterial, this.pressure.write);
+      this.pressure.swap();
+    }
+
+    this.gradientMaterial.uniforms.u_pressure_texture.value =
+      this.pressure.read.texture;
+    this.gradientMaterial.uniforms.u_velocity_texture.value =
+      this.velocity.read.texture;
+    this.blit(this.gradientMaterial, this.velocity.write);
+    this.velocity.swap();
+  }
+
+  setPointerColor(color: THREE.Vector3) {
+    this.pointerColor.copy(color);
+  }
+
+  getTexture() {
+    return this.dye.read.texture;
+  }
+
+  dispose() {
+    this.geometry.dispose();
+    this.advectionMaterial.dispose();
+    this.divergenceMaterial.dispose();
+    this.pressureMaterial.dispose();
+    this.gradientMaterial.dispose();
+    this.pointMaterial.dispose();
+    this.velocity.dispose();
+    this.dye.dispose();
+    this.pressure.dispose();
+    this.divergence.dispose();
+    if (
+      this.ownsInfluenceTexture &&
+      this.influenceTexture &&
+      this.influenceTexture !== this.defaultInfluenceTexture
+    ) {
+      this.influenceTexture.dispose();
+    }
+    this.defaultInfluenceTexture.dispose();
+  }
+}
+
+const FluidRevealPlane = ({
+  imageUrl,
+  pointerColor,
+}: {
+  imageUrl: string;
+  pointerColor: string;
+}) => {
+  const colorVector = useMemo(() => {
+    const color = new THREE.Color(pointerColor);
+    return new THREE.Vector3(color.r, color.g, color.b);
+  }, [pointerColor]);
+
+  const pointerColorRef = useRef(colorVector.clone());
+  const texture = useLoader(THREE.TextureLoader, imageUrl);
+  const { gl, size } = useThree();
+
+  const materialRef = useRef<THREE.ShaderMaterial>(null);
+  const simulationRef = useRef<FluidSimulation | null>(null);
+  const pointerRef = useRef<PointerState>({
+    uv: new THREE.Vector2(0.5, 0.5),
+    prev: new THREE.Vector2(0.5, 0.5),
+    delta: new THREE.Vector2(),
+    instant: new THREE.Vector2(),
+    moved: false,
+    target: new THREE.Vector2(0.5, 0.5),
+  });
+
+  useEffect(() => {
+    pointerColorRef.current.copy(colorVector);
+    simulationRef.current?.setPointerColor(colorVector);
+  }, [colorVector]);
+
+  const uniforms = useMemo(
+    () => ({
+      u_colorTexture: { value: null as THREE.Texture | null },
+      u_fluidTexture: { value: null as THREE.Texture | null },
+    }),
+    [],
+  );
+
+  const uniformsRef = useRef(uniforms);
+  const textureRef = useRef(texture);
+
+  useEffect(() => {
+    uniformsRef.current = uniforms;
+  }, [uniforms]);
+
+  useEffect(() => {
+    textureRef.current = texture;
+    const currentTexture = textureRef.current;
+    const currentUniforms = uniformsRef.current;
+
+    currentUniforms.u_colorTexture.value = currentTexture;
+    currentTexture.wrapS = THREE.ClampToEdgeWrapping;
+    currentTexture.wrapT = THREE.ClampToEdgeWrapping;
+    currentTexture.minFilter = THREE.LinearFilter;
+    currentTexture.magFilter = THREE.LinearFilter;
+    currentTexture.generateMipmaps = false;
+    currentTexture.colorSpace = THREE.LinearSRGBColorSpace;
+    currentTexture.needsUpdate = true;
+    if (materialRef.current) {
+      materialRef.current.uniforms.u_colorTexture.value = currentTexture;
+    }
+  }, [texture]);
+
+  useEffect(() => {
+    const width = Math.max(1, Math.floor(size.width * gl.getPixelRatio()));
+    const height = Math.max(1, Math.floor(size.height * gl.getPixelRatio()));
+    const previous = simulationRef.current;
+    const simulation = new FluidSimulation(
+      gl,
+      width,
+      height,
+      pointerColorRef.current,
+    );
+    simulationRef.current = simulation;
+    previous?.dispose();
+
+    return () => {
+      simulation.dispose();
+      if (simulationRef.current === simulation) {
+        simulationRef.current = null;
+      }
+    };
+  }, [gl, size.width, size.height]);
+
+  useEffect(() => {
+    const simulation = simulationRef.current;
+    if (!simulation) {
+      return;
+    }
+
+    if (!texture.image) {
+      simulation.setInfluenceTexture(null);
+      return;
+    }
+
+    const pixelRatio = gl.getPixelRatio();
+    const targetWidth = Math.max(1, Math.floor(size.width * pixelRatio));
+    const targetHeight = Math.max(1, Math.floor(size.height * pixelRatio));
+    const influenceTexture = createLuminanceInfluenceTexture(
+      texture,
+      targetWidth,
+      targetHeight,
+    );
+    if (!influenceTexture) {
+      simulation.setInfluenceTexture(null);
+      return;
+    }
+
+    simulation.setInfluenceTexture(influenceTexture, true);
+  }, [gl, texture, size.width, size.height]);
+
+  useEffect(() => {
+    const element = gl.domElement;
+
+    const updatePointer = (event: PointerEvent) => {
+      const rect = element.getBoundingClientRect();
+      const x = (event.clientX - rect.left) / rect.width;
+      const y = (event.clientY - rect.top) / rect.height;
+
+      const pointer = pointerRef.current;
+      pointer.target.set(
+        THREE.MathUtils.clamp(x, 0, 1),
+        THREE.MathUtils.clamp(1 - y, 0, 1),
+      );
+      pointer.moved = true;
+    };
+
+    const handleLeave = () => {
+      const pointer = pointerRef.current;
+      pointer.target.copy(pointer.uv);
+      pointer.moved = false;
+      pointer.delta.set(0, 0);
+      pointer.instant.set(0, 0);
+    };
+
+    element.addEventListener("pointermove", updatePointer);
+    element.addEventListener("pointerdown", updatePointer);
+    element.addEventListener("pointerenter", updatePointer);
+    element.addEventListener("pointerleave", handleLeave);
+
+    return () => {
+      element.removeEventListener("pointermove", updatePointer);
+      element.removeEventListener("pointerdown", updatePointer);
+      element.removeEventListener("pointerenter", updatePointer);
+      element.removeEventListener("pointerleave", handleLeave);
+    };
+  }, [gl]);
+
+  useFrame(() => {
+    const simulation = simulationRef.current;
+    const material = materialRef.current;
+    if (!simulation || !material) return;
+
+    const pointer = pointerRef.current;
+
+    pointer.prev.copy(pointer.uv);
+
+    const positionLerp = 1 - Math.exp((-1 / 60) * POINTER_LERP_SPEED);
+    if (
+      pointer.target.distanceToSquared(pointer.uv) <=
+      POINTER_POSITION_EPSILON * POINTER_POSITION_EPSILON
+    ) {
+      pointer.uv.copy(pointer.target);
+    } else {
+      pointer.uv.lerp(pointer.target, positionLerp);
+    }
+
+    pointer.instant.copy(pointer.uv).sub(pointer.prev);
+    const velocityLerp = 1 - Math.exp((-1 / 60) * POINTER_VELOCITY_LERP);
+    pointer.delta.lerp(pointer.instant, velocityLerp);
+
+    const deltaLength = pointer.delta.length();
+    const hasMovement = deltaLength > POINTER_MIN_DELTA;
+    pointer.moved = hasMovement;
+    if (!hasMovement) {
+      pointer.delta.set(0, 0);
+    }
+
+    const FIXED_DT = 1 / 60;
+
+    simulation.update(FIXED_DT, pointer);
+
+    const textureRef = simulation.getTexture();
+    material.uniforms.u_fluidTexture.value = textureRef;
+    uniformsRef.current.u_fluidTexture.value = textureRef;
+  });
+
+  return (
+    <mesh frustumCulled={false}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        ref={materialRef}
+        uniforms={uniforms}
+        vertexShader={DISPLAY_VERTEX_SHADER}
+        fragmentShader={DISPLAY_FRAGMENT_SHADER}
+        depthTest={false}
+        depthWrite={false}
+        toneMapped={false}
+      />
+    </mesh>
+  );
+};
+
+const Shader17 = ({
+  className,
+  imageUrl = "/block-media/shadcnblocks/block/background27/bg-photo.png",
+  pointerColor = "#ffffff",
+}: Background27Props) => {
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas
+        gl={{ powerPreference: "high-performance", antialias: false }}
+        frameloop="always"
+        className={cn(className, "absolute inset-0 h-screen w-full")}
+        orthographic
+        camera={{ position: [0, 0, 1], near: 0.01, far: 10, zoom: 1 }}
+        dpr={[1, 2]}
+      >
+        <FluidRevealPlane imageUrl={imageUrl} pointerColor={pointerColor} />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader17 };
diff --git a/blocks/shader18.tsx b/blocks/shader18.tsx
new file mode 100644
index 0000000..f274e25
--- /dev/null
+++ b/blocks/shader18.tsx
@@ -0,0 +1,289 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { startTransition, useEffect, useMemo, useRef, useState } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: { [key: string]: { value: unknown } };
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface Background28Props {
+  className?: string;
+  channel0Url?: string;
+  channel1Url?: string;
+  channel2Url?: string;
+  channel3Url?: string;
+
+  Silhouette_height?: number;
+  Vertical_drift?: number;
+  Warp_tex_scale?: number;
+  Edge_sharpness?: number;
+  Tiling_rate?: number;
+}
+
+export const Shader18 = ({
+  className = "absolute inset-0 w-full h-screen bg-black",
+
+  channel0Url = "/block-media/shadcnblocks/block/background28/noise1.jpg",
+  channel1Url = "/block-media/shadcnblocks/block/background28/noise1.jpg",
+  channel2Url = "/block-media/shadcnblocks/block/background28/noise2.png",
+  channel3Url = "/block-media/shadcnblocks/block/background28/noise2.png",
+
+  Silhouette_height = 0.45,
+  Vertical_drift = 0.57,
+  Warp_tex_scale = 2.9,
+  Edge_sharpness = 0.15,
+  Tiling_rate = 0.6,
+}: Background28Props) => {
+  const [textures, setTextures] = useState<{
+    t0: THREE.Texture | null;
+    t1: THREE.Texture | null;
+    t2: THREE.Texture | null;
+    t3: THREE.Texture | null;
+  }>({
+    t0: null,
+    t1: null,
+    t2: null,
+    t3: null,
+  });
+
+  useEffect(() => {
+    const loader = new THREE.TextureLoader();
+    const t0 = loader.load(channel0Url);
+    const t1 = loader.load(channel1Url);
+    const t2 = loader.load(channel2Url);
+    const t3 = loader.load(channel3Url);
+
+    [t0, t1, t2, t3].forEach((t) => {
+      t.wrapS = t.wrapT = THREE.RepeatWrapping;
+    });
+
+    startTransition(() => {
+      setTextures({ t0, t1, t2, t3 });
+    });
+  }, [channel0Url, channel1Url, channel2Url, channel3Url]);
+
+  const vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }
+  `;
+
+  const fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+
+    uniform sampler2D u_channel0;
+    uniform sampler2D u_channel1;
+    uniform sampler2D u_channel2;
+    uniform sampler2D u_channel3;
+
+    uniform float u_silhouette_height;
+    uniform float u_vertical_drift;
+    uniform float u_warp_tex_scale;
+    uniform float u_edge_sharpness;
+    uniform float u_tiling_rate;
+
+    #define ENABLE_MASKING
+    #define ENABLE_SOFT_EDGE
+    #define ENABLE_DETAIL
+    #define ENABLE_WARP
+    #define ENABLE_COLOR
+
+    const int NUM_PARABOLAS = 26;
+    const float SPEED = 0.0025;
+    const float SCROLL_SPEED = -0.05;
+    const float HORIZONTAL_DRIFT = 0.1;
+    const float CURVATURE_BASE = 0.005;
+    const float CURVATURE_DRIFT = 0.02;
+    const float WARP_STRENGTH = 0.025;
+
+    vec3 flame_color_ramp(float val) {
+      vec3 color_a = 1.2 * vec3(1.2, 0.1, 0.2);
+      vec3 color_b = 1.8 * vec3(1.0, 0.8, 0.5);
+      vec3 color_c = 0.95 * vec3(0.25, 0.25, 0.4);
+      vec3 color_d = 0.5 * vec3(0.35, 0.2, 0.4);
+
+      float pos_a = 0.35;
+      float pos_b = 0.65;
+
+      if (val < pos_a)
+          return mix(color_a, color_b, val / pos_a);
+      else if (val < pos_b)
+          return mix(color_b, color_c, (val - pos_a) / (pos_b - pos_a));
+      return mix(color_c, color_d, (val - pos_b) / (1.0 - pos_b));
+    }
+
+    vec2 warp(vec2 uv, vec2 warp_uvs, float strength, sampler2D tex) {
+      vec4 w = texture2D(tex, warp_uvs);
+      return uv + strength * w.xy;
+    }
+
+    vec3 get_focus(float i) {
+      vec4 r = texture2D(u_channel0, vec2(i, u_time * SPEED * 0.1));
+      float x = i + mix(-HORIZONTAL_DRIFT, HORIZONTAL_DRIFT, r.r);
+      float y = (1.0 - u_silhouette_height) + mix(-u_vertical_drift, u_vertical_drift, r.g);
+      vec2 focus = vec2(x, y);
+      float directrix = y + CURVATURE_BASE + mix(0.0, CURVATURE_DRIFT, r.b);
+      return vec3(focus, directrix);
+    }
+
+    vec4 stretched_scrolling_noise(vec2 uv) {
+      vec2 scrolled_uvs = vec2(0.85 * uv.s, 0.2 * uv.t + u_time * 0.1 * SCROLL_SPEED);
+      vec4 n = texture2D(u_channel1, scrolled_uvs);
+      return 1.0 - n;
+    }
+
+    vec4 contrast(vec4 in_rgb, float c) {
+      return ((in_rgb - 0.5) * c) + 0.5;
+    }
+
+    vec3 desaturate(vec3 in_rgb) {
+      const vec3 W = vec3(0.2125, 0.7154, 0.0721);
+      float luminance = dot(in_rgb, W);
+      return vec3(luminance);
+    }
+
+    float quadratic_signed_distance(vec2 uv, vec2 focus, float c) {
+      float x = uv.s;
+      float a = (x - focus.x);
+      float a2 = a * a;
+      float b2 = focus.y * focus.y;
+      float c2 = c * c;
+      float denominator = 2.0 * (focus.y - c);
+      float y = (a2 + b2 - c2) / denominator;
+      return (1.0 - uv.y) - y;
+    }
+
+    void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+      vec2 uv = fragCoord.xy / u_resolution.xy;
+
+      float tilt_strength = 0.35;
+      vec2 tilt_dir = vec2(-1.0, 0.0);
+      float wind_strength = tilt_strength * pow(uv.y, 2.);
+      uv += wind_strength * tilt_dir;
+
+      uv *= vec2(u_tiling_rate, 1.0);
+
+      float Warp_strength_dynamic = mix(4.0 * WARP_STRENGTH, 0.4 * WARP_STRENGTH, pow(1.0 - uv.y, 0.2));
+      Warp_strength_dynamic = clamp(Warp_strength_dynamic, 0.0, 0.2);
+
+      vec2 warped_uv = uv;
+    #ifdef ENABLE_WARP
+      vec2 warp_tex_uvs = vec2(u_warp_tex_scale * uv.s + 0.0005 * u_time * 0.1, 0.25 * uv.t - 0.8 * u_time);
+      warped_uv = warp(uv, warp_tex_uvs, Warp_strength_dynamic, u_channel2);
+    #endif
+
+      float silhouette_mask = 1.0;
+      float edge_gradient = 1.0;
+
+      for (int i = 0; i < NUM_PARABOLAS; i++) {
+        float seed = float(i) / float(NUM_PARABOLAS - 1);
+        vec3 focus = get_focus(seed);
+        float d1 = quadratic_signed_distance(warped_uv, focus.xy, focus.z);
+        float vertical_dist = u_edge_sharpness * d1;
+        if (vertical_dist < 0.0)
+            silhouette_mask = min(silhouette_mask, 0.0);
+        else
+            edge_gradient = min(edge_gradient, vertical_dist);
+      }
+
+      float c = mix(1.0, 5.0, 1.0 - edge_gradient);
+      vec2 scroll_uvs = warped_uv;
+      scroll_uvs.y = mix(2.0 * scroll_uvs.y, 0.7 * scroll_uvs.y, pow(uv.y, 0.5));
+      vec4 scroll_tex = contrast(stretched_scrolling_noise(scroll_uvs), c);
+      scroll_tex = vec4(desaturate(scroll_tex.rgb), 1.0);
+
+      vec4 plasma_color = vec4(flame_color_ramp(edge_gradient), 1.0);
+      fragColor = plasma_color * silhouette_mask;
+      fragColor *= edge_gradient;
+      fragColor *= scroll_tex;
+    }
+
+    void main() {
+      vec4 fragColor;
+      vec2 fragCoord = vUv * u_resolution.xy;
+      mainImage(fragColor, fragCoord);
+      gl_FragColor = fragColor;
+    }
+  `;
+
+  const uniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      u_channel0: { value: textures.t0 },
+      u_channel1: { value: textures.t1 },
+      u_channel2: { value: textures.t2 },
+      u_channel3: { value: textures.t3 },
+      u_silhouette_height: { value: Silhouette_height },
+      u_vertical_drift: { value: Vertical_drift },
+      u_warp_tex_scale: { value: Warp_tex_scale },
+      u_edge_sharpness: { value: Edge_sharpness },
+      u_tiling_rate: { value: Tiling_rate },
+    }),
+    [
+      textures,
+      Silhouette_height,
+      Vertical_drift,
+      Warp_tex_scale,
+      Edge_sharpness,
+      Tiling_rate,
+    ],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        {textures.t0 && (
+          <ShaderPlane
+            vertexShader={vertexShader}
+            fragmentShader={fragmentShader}
+            uniforms={uniforms}
+          />
+        )}
+      </Canvas>
+    </section>
+  );
+};
diff --git a/blocks/shader19.tsx b/blocks/shader19.tsx
new file mode 100644
index 0000000..8389d84
--- /dev/null
+++ b/blocks/shader19.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: Record<string, THREE.IUniform>;
+  timeMultiplier: number;
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  timeMultiplier,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * timeMultiplier;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: Record<string, THREE.IUniform>;
+  className?: string;
+  timeMultiplier?: number;
+  backgroundColor?: THREE.ColorRepresentation;
+  objectColor?: THREE.ColorRepresentation;
+}
+
+const Shader19 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec3 u_backgroundColor;
+    uniform vec3 u_objectColor;
+
+    vec3 hash(vec3 p) {
+      p = vec3(
+        dot(p, vec3(127.1, 311.7, 74.7)),
+        dot(p, vec3(269.5, 183.3, 246.1)),
+        dot(p, vec3(113.5, 271.9, 124.6))
+      );
+      return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
+    }
+
+    float noise(vec3 x) {
+      x = x * 1.5;
+      vec3 p = floor(x);
+      vec3 w = fract(x);
+      vec3 u = w * w * w * (w * (w * 6.0 - 15.0) + 10.0);
+
+      vec3 ga = hash(p + vec3(0.0, 0.0, 0.0));
+      vec3 gb = hash(p + vec3(1.0, 0.0, 0.0));
+      vec3 gc = hash(p + vec3(0.0, 1.0, 0.0));
+      vec3 gd = hash(p + vec3(1.0, 1.0, 0.0));
+      vec3 ge = hash(p + vec3(0.0, 0.0, 1.0));
+      vec3 gf = hash(p + vec3(1.0, 0.0, 1.0));
+      vec3 gg = hash(p + vec3(0.0, 1.0, 1.0));
+      vec3 gh = hash(p + vec3(1.0, 1.0, 1.0));
+
+      float va = dot(ga, w - vec3(0.0, 0.0, 0.0));
+      float vb = dot(gb, w - vec3(1.0, 0.0, 0.0));
+      float vc = dot(gc, w - vec3(0.0, 1.0, 0.0));
+      float vd = dot(gd, w - vec3(1.0, 1.0, 0.0));
+      float ve = dot(ge, w - vec3(0.0, 0.0, 1.0));
+      float vf = dot(gf, w - vec3(1.0, 0.0, 1.0));
+      float vg = dot(gg, w - vec3(0.0, 1.0, 1.0));
+      float vh = dot(gh, w - vec3(1.0, 1.0, 1.0));
+
+      return va +
+             u.x * (vb - va) +
+             u.y * (vc - va) +
+             u.z * (ve - va) +
+             u.x * u.y * (va - vb - vc + vd) +
+             u.y * u.z * (va - vc - ve + vg) +
+             u.z * u.x * (va - vb - ve + vf) +
+             u.x * u.y * u.z * (-va + vb + vc - vd + ve - vf - vg + vh);
+    }
+
+    void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+      vec2 p = (2.0 * fragCoord - u_resolution.xy) / u_resolution.y;
+      float angle = radians(45.0);
+      mat2 rot = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
+      p = rot * p;
+
+      vec3 rd = vec3(0.0, 0.0, -1.0);
+
+      float wave = 0.05 * sin(p.y * 6.0);
+      float rod_x = fract((p.x + wave) * 5.0) * 2.0 - 1.0;
+      float rod_z = sqrt(1.0 - rod_x * rod_x);
+      vec3 n = vec3(rod_x, 0.0, -rod_z);
+
+      float refractive_index = 0.4;
+      vec3 refracted_ray = mix(n, rd, refractive_index);
+      float z_dist = 0.4 / (refracted_ray.z + 0.00001);
+      vec3 pos = vec3(p, 0.0) + z_dist * refracted_ray;
+
+      float dispersion = 0.015;
+      float t = u_time * 0.2;
+
+      vec2 motion = vec2(t * 0.3, t * 0.2);
+
+      float nR = noise(vec3(pos.xy + motion + vec2(dispersion, 0.0), 0.0));
+      float nG = noise(vec3(pos.xy + motion, 0.0));
+      float nB = noise(vec3(pos.xy + motion - vec2(dispersion, 0.0), 0.0));
+
+      vec3 refract_col = vec3(nR, nG, nB);
+      refract_col = 1.0 - mix(vec3(0.0), vec3(1.0), smoothstep(-0.5, 0.0, refract_col));
+
+      float g = 1.0 - abs(n.z);
+      g = g * 0.4 / (g * 0.4 - g + 1.0);
+      float glass = (1.0 - 0.3 * g);
+
+      vec3 pattern = clamp(vec3(glass) - refract_col, 0.0, 1.0);
+      vec3 finalColor = mix(u_objectColor, u_backgroundColor, pattern);
+      fragColor = vec4(finalColor, 1.0);
+    }
+
+    void main() {
+      vec4 fragColor;
+      vec2 fragCoord = vUv * u_resolution.xy;
+      mainImage(fragColor, fragCoord);
+      gl_FragColor = fragColor;
+    }
+  `,
+  uniforms,
+  className = "absolute inset-0 w-full h-screen",
+  timeMultiplier = 1.5,
+  backgroundColor = "#ffffff",
+  objectColor = "#000000",
+}: ShaderBackgroundProps) => {
+  const backgroundColorValue = useMemo(
+    () => new THREE.Color(backgroundColor),
+    [backgroundColor],
+  );
+  const objectColorValue = useMemo(
+    () => new THREE.Color(objectColor),
+    [objectColor],
+  );
+
+  const shaderUniforms = useMemo<Record<string, THREE.IUniform>>(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      ...(uniforms ?? {}),
+      u_backgroundColor: { value: backgroundColorValue },
+      u_objectColor: { value: objectColorValue },
+    }),
+    [uniforms, backgroundColorValue, objectColorValue],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas
+        gl={{ antialias: true }}
+        className={cn(className, "absolute inset-0 h-screen w-full")}
+      >
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+          timeMultiplier={timeMultiplier}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader19 };
diff --git a/blocks/shader2.tsx b/blocks/shader2.tsx
new file mode 100644
index 0000000..3857dbc
--- /dev/null
+++ b/blocks/shader2.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: { [key: string]: { value: unknown } };
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * 0.5;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: { [key: string]: { value: unknown } };
+  className?: string;
+  color?: string;
+}
+
+const Shader2 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec3 u_color;
+    uniform sampler2D u_channel0;
+
+    void mainImage( out vec4 fragColor, in vec2 fragCoord )
+	{
+		vec2 p = 6.*(( fragCoord.xy-.5* u_resolution.xy )/u_resolution.y)-.5 ;
+		vec2 i = p;
+		float c = 0.0;
+		float r = length(p+vec2(sin(u_time),sin(u_time*.300+5.))*0.05);
+		float d = length(p);
+		float rot = d+u_time+p.x*.0500;
+		for (float n = 0.0; n < 4.0; n++) {
+			p *= mat2(cos(rot-sin(u_time/5.0)), sin(rot), -sin(rot), cos(rot))*-0.2;
+			float t = r-u_time/(n+3.0);
+			i -= p + vec2(sin(t - i.x-r) + sin(t + i.y) / 50. ,sin(t - i.y / 12.0) + cos(t + i.x)+r) /20.;
+			c += 2.0/length(vec2((sin(i.x+t)/.15), (cos(i.y+t)/.15)));
+		}
+		c /= 8.0;
+		vec3 color1 = u_color * 0.8;
+		vec3 color2 = u_color * 1.0;
+		vec3 color3 = u_color * 0.6;
+
+		vec3 finalColor = mix(color1, color2, 0.8);
+		finalColor = mix(finalColor, color3, 0.2);
+
+		finalColor *= smoothstep(0.0, 0.6, c * 0.5);
+		finalColor *= u_color;
+		fragColor = vec4(finalColor, 1.0);
+	}
+
+    void main() {
+      vec4 fragColor;
+      vec2 fragCoord = vUv * u_resolution.xy;
+      mainImage(fragColor, fragCoord);
+      gl_FragColor = fragColor;
+    }
+  `,
+  uniforms = {},
+  className,
+  color = "#cc33ff",
+}: ShaderBackgroundProps) => {
+  const shaderUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      u_color: { value: new THREE.Color(color) },
+      ...uniforms,
+    }),
+    [uniforms, color],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader2 };
diff --git a/blocks/shader20.tsx b/blocks/shader20.tsx
new file mode 100644
index 0000000..a756a17
--- /dev/null
+++ b/blocks/shader20.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: Record<string, THREE.IUniform>;
+  timeMultiplier: number;
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  timeMultiplier,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * timeMultiplier;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: Record<string, THREE.IUniform>;
+  className?: string;
+  timeMultiplier?: number;
+  metaballColor?: THREE.ColorRepresentation;
+  backgroundColor?: THREE.ColorRepresentation;
+}
+
+const Shader20 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec3 u_metaballColor;
+    uniform vec3 u_backgroundColor;
+
+    float metaball(vec2 p, vec2 c, float r) {
+        return r * r / dot(p - c, p - c);
+    }
+
+    float map(vec2 p) {
+        float v = 0.0;
+        v += metaball(p, vec2(sin(u_time), cos(u_time * 0.5)), 0.3);
+        v += metaball(p, vec2(-cos(u_time * 0.8), sin(u_time * 0.3)), 0.3);
+        return 0.5 - v;
+    }
+
+    void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+        vec2 p = (2.0 * fragCoord - u_resolution.xy) / u_resolution.y;
+        vec3 rd = vec3(0.0, 0.0, -1.0);
+
+        bool isPortrait = (u_resolution.y > u_resolution.x);
+
+        if (isPortrait) {
+            p = vec2(p.y, -p.x);
+        }
+
+        float glassSide = isPortrait ? step(p.x, 0.0) : step(0.0, p.x);
+
+        float rod_x = fract(p.x * 8.0) * 2.0 - 1.0;
+        float rod_z = sqrt(1.0 - rod_x * rod_x);
+        vec3 n = vec3(rod_x, 0.0, -rod_z);
+
+        float refractive_index = 0.4;
+        vec3 refracted_ray = mix(n, rd, refractive_index);
+        float z_dist = 0.4 / (refracted_ray.z + 0.00001);
+        vec3 pos = mix(vec3(p, 0.0), vec3(p, 0.0) + z_dist * refracted_ray, glassSide);
+
+        float metaballMask = smoothstep(-0.05, 0.0, map(pos.xy));
+
+        vec3 baseColor = mix(u_metaballColor, u_backgroundColor, metaballMask);
+
+        float g = 1.0 - abs(n.z);
+        g = g * 0.4 / (g * 0.4 - g + 1.0);
+        float glass = 1.0 - 0.4 * g;
+        vec3 glassColor = baseColor * glass;
+
+        vec3 finalColor = mix(baseColor, glassColor, glassSide);
+
+        fragColor = vec4(finalColor, 1.0);
+    }
+
+    void main() {
+      vec4 fragColor;
+      vec2 fragCoord = vUv * u_resolution.xy;
+      mainImage(fragColor, fragCoord);
+      gl_FragColor = fragColor;
+    }
+  `,
+  uniforms,
+  className = "absolute inset-0 w-full h-screen",
+  timeMultiplier = 1,
+  metaballColor = "#000000",
+  backgroundColor = "#ffffff",
+}: ShaderBackgroundProps) => {
+  const metaballColorValue = useMemo(
+    () => new THREE.Color(metaballColor),
+    [metaballColor],
+  );
+  const backgroundColorValue = useMemo(
+    () => new THREE.Color(backgroundColor),
+    [backgroundColor],
+  );
+
+  const shaderUniforms = useMemo<Record<string, THREE.IUniform>>(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      ...(uniforms ?? {}),
+      u_metaballColor: { value: metaballColorValue },
+      u_backgroundColor: { value: backgroundColorValue },
+    }),
+    [uniforms, metaballColorValue, backgroundColorValue],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas
+        gl={{ antialias: true }}
+        className={cn(className, "absolute inset-0 h-screen w-full")}
+      >
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+          timeMultiplier={timeMultiplier}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader20 };
diff --git a/blocks/shader3.tsx b/blocks/shader3.tsx
new file mode 100644
index 0000000..70dedcc
--- /dev/null
+++ b/blocks/shader3.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: { [key: string]: { value: unknown } };
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+  const mousePos = useRef({ x: 0, y: 0 });
+  const targetPos = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      targetPos.current.x = (event.clientX / window.innerWidth) * 2 - 1;
+      targetPos.current.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * 0.5;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+
+      const lerpFactor = 0.025;
+      mousePos.current.x +=
+        (targetPos.current.x - mousePos.current.x) * lerpFactor;
+      mousePos.current.y +=
+        (targetPos.current.y - mousePos.current.y) * lerpFactor;
+      material.uniforms.u_mouse.value.set(
+        mousePos.current.x,
+        mousePos.current.y,
+        0.0,
+        0.0,
+      );
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: { [key: string]: { value: unknown } };
+  className?: string;
+  color?: string;
+}
+
+const Shader3 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+    const float CIRCLE_SCALE = 1.0;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec4 u_mouse;
+    uniform vec3 u_color;
+    uniform sampler2D u_channel0;
+
+    #define R u_resolution
+    #define PI 3.141528
+
+    const float refractIndex = 0.3;
+
+    vec3 hsv(float h,float s,float v){return ((clamp(abs(fract(h+vec3(0.,.666,.333))*6.-3.)-1.,0.,1.)-1.)*s+1.)*v;}
+    vec3 rgb2hsv(vec3 c){
+      vec4 K = vec4(0.0, -1.0/3.0, 2.0/3.0, -1.0);
+      vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+      vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+      float d = q.x - min(q.w, q.y);
+      float e = 1.0e-10;
+      return vec3(abs(q.z + (q.w - q.y) / (6.0*d + e)), d / (q.x + e), q.x);
+    }
+
+    float map(float val, float inA, float inB, float outA, float outB) {
+      return (val - inA) / (inB - inA) * (outB - outA) + outA;
+    }
+
+    float fresnel(vec3 direction, vec3 normal, float power, bool invert) {
+        vec3 halfDirection = normalize( normal + direction );
+        float cosine = dot( halfDirection, direction );
+        float product = max( cosine, 0.0 );
+        float factor = invert ? 1.0 - pow( product, power ) : pow( product, power );
+        return factor;
+    }
+    vec4 remapShadows(vec4 color) {
+      float factor = 10.;
+      return vec4(
+        pow(color.x, factor),
+        pow(color.y, factor),
+        pow(color.z, factor),
+        color.w
+      );
+    }
+    float specular(vec3 eyeVector, vec3 worldNormal, vec3 light, float shininess, float diffuseness) {
+      vec3 normal = worldNormal;
+      vec3 lightVector = normalize(-light);
+      vec3 halfVector = normalize(eyeVector + lightVector);
+      float NdotL = dot(normal, lightVector);
+      float NdotH =  dot(normal, halfVector);
+      float kDiffuse = max(0.0, NdotL);
+      float NdotH2 = NdotH * NdotH;
+      float kSpecular = pow(NdotH2, shininess);
+      return kSpecular + kDiffuse * diffuseness;
+    }
+
+    vec4 sampleBackground(vec3 normal, sampler2D bg) {
+      float phi = acos(normal.y);
+      float sinPhi = sin(phi);
+      float theta =
+        abs(sinPhi) > 0.0001
+          ? acos(normal.x / sinPhi)
+          : 0.;
+      vec2 coord = vec2(
+        map(theta, 0., PI, 0., 1.),
+        map(phi, 0., PI, 1., 0.)
+      );
+
+      return texture(bg, coord);
+    }
+
+    float lambert(vec3 normal, vec3 lightPos){
+      return max(dot(normal, lightPos), 0.05);
+    }
+
+    float hash12(vec2 p)
+    {
+      vec3 p3  = fract(vec3(p.xyx) * .1031);
+        p3 += dot(p3, p3.yzx + 33.33);
+        return fract((p3.x + p3.y) * p3.z);
+    }
+
+    vec2 globalPos(vec2 pos){
+        vec2 mover = u_mouse.xy * 0.25;
+        return pos-mover + hash12(gl_FragCoord.xy + u_time * 0.1)*.0125;
+    }
+
+    float circle(vec2 pos,float lo, float hi){
+        return smoothstep(lo,hi,length(globalPos(pos)));
+    }
+
+    vec3 gradient(float d){
+        float a = smoothstep(0.0, 1.0, d);
+        vec3 colA = mix(vec3(0.05,0.05,0.05),vec3(.4,.6,.6),smoothstep(0.05,0.05,0.05) * d);
+        vec3 colB = mix(u_color * 0.06, u_color * 0.9, a);
+        return mix(colA, colB, d);
+    }
+
+    vec3 coloredRim(vec2 pos, float lamVal) {
+        float rimRadius = 0.035 * CIRCLE_SCALE + lamVal * 0.05 * CIRCLE_SCALE;
+        float innerRadius = 0.03 * CIRCLE_SCALE + lamVal * 0.025 * CIRCLE_SCALE;
+        float dist = length(globalPos(pos));
+
+        float rimMask = smoothstep(innerRadius, rimRadius, dist) * (1.0 - smoothstep(rimRadius, rimRadius + 0.05, dist));
+
+        vec3 hsvColor = rgb2hsv(u_color);
+        float baseHue = hsvColor.x;
+        float sat = hsvColor.y;
+        float hue = baseHue + dist * 2.0;
+        vec3 rimColor = hsv(hue, sat, 1.0);
+
+        return rimColor * rimMask;
+    }
+
+    float sdfCircle(vec2 pos, float r) {
+        return length(globalPos(pos)) - r;
+    }
+    vec2 sdfNormal(vec2 pos, float r) {
+        vec2 e = vec2(1.0/R.x, 1.0/R.y) * 1.5;
+        float dx = sdfCircle(pos + vec2(e.x, 0.0), r) - sdfCircle(pos - vec2(e.x, 0.0), r);
+        float dy = sdfCircle(pos + vec2(0.0, e.y), r) - sdfCircle(pos - vec2(0.0, e.y), r);
+        vec2 n = normalize(vec2(dx, dy));
+        return n;
+    }
+    vec3 shadeAt(vec2 pos, float lamVal) {
+        float dLocal = 1. - circle(pos, 0.05 * CIRCLE_SCALE, .3 * CIRCLE_SCALE + lamVal * 0.025 * CIRCLE_SCALE);
+        return gradient(dLocal);
+    }
+    vec3 refractSDFColor(vec2 pos, float lamVal) {
+    float shiftPxR = 2.0;
+    float shiftPxG = 0.0;
+    float shiftPxB = -2.0;
+
+    float r = 0.175 * CIRCLE_SCALE + lamVal * 0.6125 * CIRCLE_SCALE;
+    vec2 n2 = normalize(sdfNormal(pos, r));
+
+    vec2 px = 1.0 / R.xy;
+    vec3 cR = shadeAt(pos + n2 * px * shiftPxR, lamVal);
+    vec3 cG = shadeAt(pos + n2 * px * shiftPxG, lamVal);
+    vec3 cB = shadeAt(pos + n2 * px * shiftPxB, lamVal);
+    return vec3(cR.r, cG.g, cB.b);
+    }
+
+    void mainImage( out vec4 fragColor, in vec2 fragCoord )
+    {
+        vec2 uv = fragCoord / R.xy;
+        vec2 p = (fragCoord/R.xy-.5)*vec2(R.x/R.y,1.)*2.;
+
+        float angle = PI / 4.0;
+        float cosA = cos(angle);
+        float sinA = sin(angle);
+        vec2 rotatedP = vec2(
+            p.x * cosA - p.y * sinA,
+            p.x * sinA + p.y * cosA
+        );
+
+        vec3 rd = vec3(0.0, 0.0, -1.0);
+        float rod_x = fract(rotatedP.x * 2.) * 2.0 - 1.0;
+        float rod_z = sqrt(1.0 - rod_x*rod_x);
+        vec3 n = vec3(rod_x, 0.0, -rod_z);
+
+        vec3 refracted_ray = mix(n, rd, refractIndex);
+        float dist = 0.8;
+        float z_dist = dist / (refracted_ray.z  - 0.8);
+        vec3 pos = vec3(p, 0.0) + z_dist*refracted_ray;
+        vec2 subPos = vec2(pos.xy * pos.z);
+
+        vec3 lpos = normalize(vec3(0., 0., -1.0));
+        vec3 lcol = vec3(1.);
+        float lambert = pow(lambert(n,lpos),2.);
+        vec3 reflectedDir = normalize(reflect(rd, n));
+        float fresnel = fresnel(rd, n, 8.,true);
+        float fresnelStrength = 0.595;
+
+        float d = 1.-circle(subPos,0.05 * CIRCLE_SCALE,.3 * CIRCLE_SCALE + lambert * 0.0125 *CIRCLE_SCALE);
+        vec3 color = gradient(d);
+
+        vec3 rimColor = coloredRim(subPos, lambert);
+        color += rimColor * 0.65;
+
+        float g = 1.0 - abs(n.z);
+        g = g * 0.8 / (g * 0.8 - g + 1.0);
+        float glass = 1.-((1.0 - 0.3 * g) - g * hash12(gl_FragCoord.xy + d));
+        vec3 refrCol = refractSDFColor(subPos, lambert);
+        color = mix(color, refrCol, 0.65);
+        color += lambert * color * 0.05 * d;
+        color += color * glass * d * 0.05;
+        color = clamp(color,0.,1.);
+
+        color = pow(color,vec3(1./1.222));
+
+        fragColor = vec4(vec3(color),1.0);
+    }
+
+    void main() {
+      vec4 fragColor;
+      vec2 fragCoord = vUv * u_resolution.xy;
+      mainImage(fragColor, fragCoord);
+      gl_FragColor = fragColor;
+    }
+  `,
+  uniforms = {},
+  className,
+  color = "#bbffcc",
+}: ShaderBackgroundProps) => {
+  const shaderUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      u_mouse: { value: new THREE.Vector4(0, 0, 0, 0) },
+      u_color: { value: new THREE.Color(color) },
+      ...uniforms,
+    }),
+    [uniforms, color],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader3 };
diff --git a/blocks/shader4.tsx b/blocks/shader4.tsx
new file mode 100644
index 0000000..1b60ddd
--- /dev/null
+++ b/blocks/shader4.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: { [key: string]: { value: unknown } };
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: { [key: string]: { value: unknown } };
+  className?: string;
+}
+
+const Shader4 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform float u_aberration;
+
+    float lightImpulses(vec2 v, float time) {
+        float streak = 0.0;
+
+        for (int j = 0; j < 4; j++) {
+            float seed = float(j) * 1.37;
+            float phase = dot(v, normalize(vec2(sin(seed*12.3), cos(seed*4.7))));
+            float speed = 0.4 + fract(sin(seed*77.7)*43758.5);
+
+            float pulse = exp(-30.0 * pow(fract(phase*0.2 + time*speed) - 0.5, 2.0));
+
+            streak += pulse;
+        }
+
+        return streak;
+    }
+
+    vec4 getScene(vec2 fragCoord, vec2 resolution) {
+        float i = .13, a;
+        vec2 r = resolution;
+
+        vec2 p = (fragCoord+fragCoord - r) / r.y / .9;
+        vec2 d = vec2(-1,1);
+        vec2 b = p - i*d;
+        vec2 c = p * mat2(1, 1, d/(.1 + i/dot(b,b)));
+        vec2 v = c * mat2(cos(.5*log(a=dot(c,c))))/i;
+        vec2 w = vec2(0.0);
+
+        for(; i++<9.; w += 1.1+sin(v))
+            v += 0.9* sin(v.yx/i+u_time) / i + .3;
+
+        i = length(5.0);
+
+        vec4 base = 0.9 - exp( -exp( c.x * vec4(0.0,0.0,0,0) )
+                       /  vec4(length(w))
+                       / ( 2. + i*i/4. - i )
+                       / ( .5 + 1. / a )
+                       / ( .03 + abs( length(p)-.7 ) )
+                 );
+
+        float streak = lightImpulses(v, u_time);
+        base.rgb += streak * 0.015;
+
+        return base;
+    }
+
+    void mainImage(out vec4 fragColor, in vec2 fragCoord)
+    {
+        vec2 r = u_resolution.xy;
+        vec2 uv = fragCoord / r;
+
+        float u_aberration = 10.0;
+        float ChromaticAberration = u_aberration;
+        vec2 texel = 1.0 / r;
+        vec2 coords = (uv - 0.5) * 2.0;
+        float coordDot = dot(coords, coords);
+        vec2 precompute = ChromaticAberration * coordDot * coords;
+
+        vec2 uvR = uv - texel * precompute;
+        vec2 uvB = uv + texel * precompute;
+
+        vec2 fragCoordR = uvR * r;
+        vec2 fragCoordB = uvB * r;
+
+        vec4 colR = getScene(fragCoordR, r);
+        vec4 colG = getScene(fragCoord , r);
+        vec4 colB = getScene(fragCoordB, r);
+
+        fragColor = vec4(colR.r, colG.g, colB.b, 1.0);
+    }
+
+    void main() {
+        vec4 fragColor;
+        vec2 fragCoord = vUv * u_resolution.xy;
+        mainImage(fragColor, fragCoord);
+        gl_FragColor = fragColor;
+    }
+  `,
+  uniforms = {},
+  className,
+}: ShaderBackgroundProps) => {
+  const shaderUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      ...uniforms,
+    }),
+    [uniforms],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader4 };
diff --git a/blocks/shader5.tsx b/blocks/shader5.tsx
new file mode 100644
index 0000000..85aad04
--- /dev/null
+++ b/blocks/shader5.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: { [key: string]: { value: unknown } };
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * 0.5;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: { [key: string]: { value: unknown } };
+  className?: string;
+}
+
+const Shader5 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+
+    #define T           u_time + 50.
+    #define P(z)        vec3(0.0, 0.0, 0.)
+    #define rot(a)      mat2(cos(a + vec4(0, 33, 11, 0)))
+
+    float sphere(vec3 p, vec3 center, float radius) {
+        return length(p - center) - radius;
+    }
+
+    float hash12(vec2 p) {
+        vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+        p3 += dot(p3, p3.yzx + 33.33);
+        return fract((p3.x + p3.y) * p3.z);
+    }
+
+    float interleavedGradientNoise(vec2 pixel) {
+        pixel = floor(pixel);
+        const vec2 magic = vec2(0.06711056, 0.00583715);
+        return fract(52.9829189 * fract(dot(pixel, magic)));
+    }
+
+    float BlueNoise(vec2 p, float time) {
+        float ig = interleavedGradientNoise(p);
+        float jitter = hash12(p + time);
+        return fract(ig + jitter * 0.5);
+    }
+
+    void mainImage(out vec4 fragColor, in vec2 u) {
+        float s = 0.001;
+        float d = 0.0;
+        float i = 0.0;
+
+        vec3 r = u_resolution;
+        vec3 ro = P(T);
+        vec3 p = ro;
+        vec3 Z = normalize(P(T + 1.0) - p);
+        vec3 D = vec3((u - r.xy * 0.5) / r.y, 1.0) * 0.5;
+
+        vec4 o = vec4(0.0);
+
+        for (; i++ < 100.0 && s > 0.0001;) {
+            p = ro + D * d;
+            p.xy *= rot(-p.z * 0.5 + sin(u_time * 0.5));
+            p.z += u_time;
+
+            float gyroidDist = length(p.xy - P(p.z).xy) - 0.5 + sin(u_time * 1.5) * 0.1 - 1.0 + sin(p.z * 0.1) * 0.2;
+
+            vec3 sphereCenter = vec3(0.0, 0., 3.+u_time);
+            float noise = sin(p.x * 3.1 + u_time) * 0.1 + 
+                          sin(p.y * 2.7 - u_time * 0.8) * 0.05;
+
+            float radius = 1.0 + noise * 0.3;
+            float sphereDist = sphere(p, sphereCenter, radius);
+
+            float sceneDist = min(-gyroidDist, sphereDist);
+            s = abs(sceneDist);
+
+            d += s;
+
+            float fade = smoothstep(0.0001, 0.01, s);
+
+            vec3 base = sin(p * 3.0 + u_time) * 0.5 + 0.75;
+            vec3 neon = pow(base, vec3(4.0));
+            neon *= vec3(0.2, 0.8, 1.2);
+            o.rgb += neon * fade * 5.5;
+        }
+
+        o.rgb = o.rgb * exp(-d * 1.0);
+        o.rgb = pow(o.rgb, vec3(1.0 / 25.0));
+
+        float dither = BlueNoise(u, u_time * 0.5) - 0.5;
+        o.rgb += dither * (1.0/255.0);
+
+        o.rgb = clamp(o.rgb, 0.0, 1.0);
+
+        fragColor = vec4(o.rgb, 1.0);
+    }
+
+    void main() {
+        vec4 fragColor;
+        vec2 fragCoord = vUv * u_resolution.xy;
+        mainImage(fragColor, fragCoord);
+        gl_FragColor = fragColor;
+    }
+`,
+  uniforms = {},
+  className,
+}: ShaderBackgroundProps) => {
+  const shaderUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      ...uniforms,
+    }),
+    [uniforms],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader5 };
diff --git a/blocks/shader6.tsx b/blocks/shader6.tsx
new file mode 100644
index 0000000..8b2244b
--- /dev/null
+++ b/blocks/shader6.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: { [key: string]: { value: unknown } };
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * 0.5;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: { [key: string]: { value: unknown } };
+  className?: string;
+  color?: string;
+  backgroundColor?: string;
+}
+
+const Shader6 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform vec3 u_color;
+    uniform vec3 u_bg_color;
+
+    float bayerDither(vec2 fragCoord) {
+        float scale = 4.0;
+        int x = int(mod(floor(fragCoord.x / scale), 4.0));
+        int y = int(mod(floor(fragCoord.y / scale), 4.0));
+        int idx = x + y * 4;
+        float bayer[16];
+        bayer[0] = 0.0;  bayer[1] = 8.0;  bayer[2] = 2.0;  bayer[3] = 10.0;
+        bayer[4] = 12.0; bayer[5] = 4.0;  bayer[6] = 14.0; bayer[7] = 6.0;
+        bayer[8] = 3.0;  bayer[9] = 11.0; bayer[10] = 1.0; bayer[11] = 9.0;
+        bayer[12] = 15.0; bayer[13] = 7.0; bayer[14] = 13.0; bayer[15] = 5.0;
+        return bayer[idx] / 16.0;
+    }
+
+    #define SPECULAR
+
+    void mainImage(out vec4 col, in vec2 pc)
+    {
+        float time = u_time / 3.0;
+        vec2 a = vec2(u_resolution.x / u_resolution.y, 1.0);
+        vec2 c = pc.xy / u_resolution.xy * a * 3.5 + time * 0.3;
+
+        float k = 0.1 + cos(c.y + sin(0.148 - time)) + 2.4 * time;
+        float w = 0.9 + sin(c.x + cos(0.628 + time)) - 0.7 * time;
+        float d = length(c);
+        float s = 7.0 * cos(d + w) * sin(k + w);
+
+        col = vec4(0.5 + 0.5 * cos(s + vec3(0.2, 0.5, 0.9)), 1.0);
+    }
+
+    void main() {
+        vec2 fragCoord = vUv * u_resolution.xy;
+        vec4 col;
+        mainImage(col, fragCoord);
+
+        float gray = dot(col.rgb, vec3(0.299, 0.587, 0.114));
+        float threshold = bayerDither(fragCoord);
+        float bw = step(threshold, gray);
+        col.rgb = mix(u_bg_color, u_color, bw);
+
+        gl_FragColor = col;
+    }
+  `,
+  uniforms = {},
+  className,
+  color = "#ffaa08",
+  backgroundColor = "#000000",
+}: ShaderBackgroundProps) => {
+  const shaderUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      u_color: { value: new THREE.Color(color) },
+      u_bg_color: { value: new THREE.Color(backgroundColor) },
+      ...uniforms,
+    }),
+    [uniforms, color, backgroundColor],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader6 };
diff --git a/blocks/shader7.tsx b/blocks/shader7.tsx
new file mode 100644
index 0000000..06e56cd
--- /dev/null
+++ b/blocks/shader7.tsx
@@ -0,0 +1,572 @@
+"use client";
+
+import { useFBO } from "@react-three/drei";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface UniformMap {
+  [key: string]: { value: unknown };
+}
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: UniformMap;
+  className?: string;
+  color?: string;
+}
+
+const defaultVertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 1.0);
+    }
+  `;
+
+const defaultFragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform sampler2D u_fluid;
+    uniform float u_distortionAmount;
+    uniform vec3 u_color;
+
+    #define time u_time
+
+    const float arrow_density = 4.5;
+    const float arrow_length = .45;
+
+    const int iterationTime1 = 20;
+    const int iterationTime2 = 20;
+    const int vector_field_mode = 0;
+    const float scale = 6.;
+
+    const float velocity_x = 0.1;
+    const float velocity_y = 0.2;
+
+    const float mode_2_speed = 2.5;
+    const float mode_1_detail = 200.;
+    const float mode_1_twist = 50.;
+
+    const bool isArraw = true;
+
+    const vec3 luma = vec3(0.2126, 0.7152, 0.0722);
+
+    float f(in vec2 p)
+    {
+        return tanh(p.x+sin(p.y+time*velocity_x)) * sin(p.y*p.x*0.1+time*velocity_y);
+    }
+
+    struct Field {
+        vec2 vel;
+        vec2 pos;
+    };
+
+    Field field(in vec2 p,in int mode)
+    {
+        Field field;
+        if(mode == 0){
+            vec2 ep = vec2(0.05,0.);
+            vec2 rz= vec2(0);
+            for( int i=0; i<iterationTime1; i++ )
+            {
+                float t0 = f(p);
+                float t1 = f(p + ep.xy);
+                float t2 = f(p + ep.yx);
+                vec2 g = vec2((t1-t0), (t2-t0))/ep.xx;
+                vec2 t = vec2(-g.y,g.x);
+
+                p += (mode_1_twist*0.01)*t + g*(1./mode_1_detail);
+                p.x = p.x + sin( time*mode_2_speed/10.)/10.;
+                p.y = p.y + cos(time*mode_2_speed/10.)/10.;
+                rz= g;
+            }
+            field.vel = rz;
+            return field;
+        }
+
+        if(mode == 1){
+            vec2 ep = vec2(0.05,0.);
+            vec2 rz= vec2(0);
+            for( int i=0; i<iterationTime1; i++ )
+            {
+                float t0 = f(p);
+                float t1 = f(p + ep.xy);
+                float t2 = f(p + ep.yx);
+                vec2 g = vec2((t1-t0), (t2-t0))/ep.xx;
+                vec2 t = vec2(-g.y,g.x);
+
+                p += (mode_1_twist*0.01)*t + g*(1./mode_1_detail);
+                p.x = p.x + sin( time*mode_2_speed/10.)/10.;
+                p.y = p.y + cos(time*mode_2_speed/10.)/10.;
+                rz= g;
+            }
+
+            field.vel = rz;
+            for(int i=1; i<iterationTime2; i++){
+                p.x+=0.3/float(i)*sin(float(i)*3.*p.y+time*mode_2_speed) + 0.5;
+                p.y+=0.3/float(i)*cos(float(i)*3.*p.x + time*mode_2_speed) + 0.5;
+            }
+            field.pos = p;
+            return field;
+        }
+
+        return field;
+    }
+
+    float segm(in vec2 p, in vec2 a, in vec2 b)
+    {
+        vec2 pa = p - a;
+        vec2 ba = b - a;
+        float h = clamp(dot(pa,ba)/dot(ba,ba), 0., 1.);
+        return length(pa - ba*h)*20.*arrow_density;
+    }
+
+    float fieldviz(in vec2 p,in int mode)
+    {
+        vec2 ip = floor(p*arrow_density)/arrow_density + .5/arrow_density;
+        vec2 t = field(ip,mode).vel;
+        float m = min(0.1,pow(length(t),0.5)*(arrow_length/arrow_density));
+        vec2 b = normalize(t)*m;
+        float rz = segm(p, ip, ip+b);
+        vec2 prp = (vec2(-b.y,b.x));
+        rz = min(rz,segm(p, ip+b, ip+b*0.65+prp*0.3));
+        return clamp(min(rz,segm(p, ip+b, ip+b*0.65-prp*0.3)),0.,1.);
+    }
+
+    vec3 getRGB(in Field fld,in int mode){
+
+        if(mode == 0){
+            vec2 p = fld.vel;
+            float magnitude = length(p);
+            float angle = atan(p.y, p.x);
+            float pulse = 0.5 + 0.5 * sin(angle * 2.0 + time * 0.75);
+            float glow = smoothstep(0.0, 1.2, magnitude) * pow(pulse, 2.0);
+            vec3 base = u_color * 0.03;
+            vec3 accent = u_color * 0.9;
+            return clamp(base + accent * glow, 0.0, 1.0);
+        }
+
+        if(mode == 1){
+            vec2 p = fld.pos;
+            float ripple = sin(p.x * 1.5 + time * 0.4) * 0.5 + 0.5;
+            float swirl = cos(p.y * 1.5 - time * 0.6) * 0.5 + 0.5;
+            vec3 base = u_color * 0.02;
+            vec3 accent = u_color * 0.8;
+            return clamp(base + accent * pow(ripple * swirl, 1.5), 0.0, 1.0);
+        }
+
+        return vec3(0.0);
+    }
+
+    void mainImage( out vec4 fragColor, in vec2 fragCoord )
+    {
+        vec2 p = fragCoord.xy / u_resolution.xy-0.5 ;
+        p.x *= u_resolution.x/u_resolution.y;
+        p *= scale;
+
+        vec3 col;
+        int vector_mode = 0;
+        Field fld = field(p,vector_mode);
+        col = getRGB(fld,vector_mode);
+        col = mix(col, col * 1.1, 0.25);
+        col = pow(col, vec3(1.2));
+
+        fragColor = vec4(col,1.0);
+    }
+
+    void main() {
+        vec2 fluid = texture2D(u_fluid, vUv).xy;
+        vec2 warpedUv = vUv + fluid * (0.5 * u_distortionAmount);
+        vec2 warpedFragCoord = warpedUv * u_resolution.xy;
+
+        vec4 col = vec4(0.0);
+        mainImage(col, warpedFragCoord);
+
+        gl_FragColor = col;
+    }
+  `;
+
+const simulationVertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 1.0);
+  }
+`;
+
+const fluidFragmentShader = `
+  uniform float u_time;
+  uniform vec2 u_resolution;
+  uniform vec4 u_mouse;
+  uniform int u_frame;
+  uniform sampler2D iPreviousFrame;
+  uniform float uBrushSize;
+  uniform float uBrushStrength;
+  uniform float uFluidDecay;
+  uniform float uTrailLength;
+  uniform float uStopDecay;
+  varying vec2 vUv;
+
+  vec2 ur, U;
+
+  float ln(vec2 p, vec2 a, vec2 b) {
+      return length(p-a-(b-a)*clamp(dot(p-a,b-a)/dot(b-a,b-a),0.,1.));
+  }
+
+  vec4 t(vec2 v, int a, int b) {
+      return texture2D(iPreviousFrame, fract((v+vec2(float(a),float(b)))/ur));
+  }
+
+  vec4 t(vec2 v) {
+      return texture2D(iPreviousFrame, fract(v/ur));
+  }
+
+  float area(vec2 a, vec2 b, vec2 c) {
+      float A = length(b-c), B = length(c-a), C = length(a-b), s = 0.5*(A+B+C);
+      return sqrt(s*(s-A)*(s-B)*(s-C));
+  }
+
+  void main() {
+      U = vUv * u_resolution;
+      ur = u_resolution.xy;
+
+      if (u_frame < 1) {
+          float w = 0.5+sin(0.2*U.x)*0.5;
+          float q = length(U-0.5*ur);
+          gl_FragColor = vec4(0.1*exp(-0.001*q*q),0,0,w);
+      } else {
+          vec2 v = U,
+               A = v + vec2( 1, 1),
+               B = v + vec2( 1,-1),
+               C = v + vec2(-1, 1),
+               D = v + vec2(-1,-1);
+
+          for (int i = 0; i < 8; i++) {
+              v -= t(v).xy;
+              A -= t(A).xy;
+              B -= t(B).xy;
+              C -= t(C).xy;
+              D -= t(D).xy;
+          }
+
+          vec4 me = t(v);
+          vec4 n = t(v, 0, 1),
+              e = t(v, 1, 0),
+              s = t(v, 0, -1),
+              w = t(v, -1, 0);
+          vec4 ne = .25*(n+e+s+w);
+          me = mix(t(v), ne, vec4(0.15,0.15,0.95,0.));
+          me.z = me.z - 0.01*((area(A,B,C)+area(B,C,D))-4.);
+
+          vec4 pr = vec4(e.z,w.z,n.z,s.z);
+          me.xy = me.xy + 100.*vec2(pr.x-pr.y, pr.z-pr.w)/ur;
+
+          me.xy *= uFluidDecay;
+          me.z *= uTrailLength;
+
+          if (u_mouse.z > 0.0) {
+              vec2 mousePos = u_mouse.xy;
+              vec2 mousePrev = u_mouse.zw;
+              vec2 mouseVel = mousePos - mousePrev;
+              float velMagnitude = length(mouseVel);
+              float q = ln(U, mousePos, mousePrev);
+              vec2 m = mousePos - mousePrev;
+              float l = length(m);
+              if (l > 0.0) m = min(l, 10.0) * m / l;
+
+              float brushSizeFactor = 1e-4 / uBrushSize;
+              float strengthFactor = 0.03 * uBrushStrength;
+
+              float falloff = exp(-brushSizeFactor*q*q*q);
+              falloff = pow(falloff, 0.5);
+
+              me.xyw += strengthFactor * falloff * vec3(m, 10.);
+
+              if (velMagnitude < 2.0) {
+                  float distToCursor = length(U - mousePos);
+                  float influence = exp(-distToCursor * 0.01);
+                  float cursorDecay = mix(1.0, uStopDecay, influence);
+                  me.xy *= cursorDecay;
+                  me.z *= cursorDecay;
+              }
+          }
+
+          gl_FragColor = clamp(me, -0.4, 0.4);
+      }
+  }
+`;
+
+const config = {
+  brushSize: 12.0,
+  brushStrength: 0.45,
+  fluidDecay: 0.95,
+  trailLength: 0.85,
+  stopDecay: 0.85,
+  distortionAmount: 1.5,
+  lerpFactor: 0.15,
+};
+
+interface SimulationProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: UniformMap;
+  color: string;
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  color,
+}: SimulationProps) => {
+  const { size, gl } = useThree();
+
+  const fluidMaterial = useRef<THREE.ShaderMaterial | null>(null);
+  const displayMaterial = useRef<THREE.ShaderMaterial | null>(null);
+  const fluidMeshRef = useRef<THREE.Mesh | null>(null);
+  const displayMeshRef = useRef<THREE.Mesh | null>(null);
+
+  const fluidTarget1 = useFBO(size.width, size.height, {
+    minFilter: THREE.LinearFilter,
+    magFilter: THREE.LinearFilter,
+    format: THREE.RGBAFormat,
+    type: THREE.FloatType,
+  });
+  const fluidTarget2 = useFBO(size.width, size.height, {
+    minFilter: THREE.LinearFilter,
+    magFilter: THREE.LinearFilter,
+    format: THREE.RGBAFormat,
+    type: THREE.FloatType,
+  });
+
+  const currentFluidTarget = useRef(fluidTarget1);
+  const previousFluidTarget = useRef(fluidTarget2);
+  const frameCount = useRef(0);
+
+  const mouse = useRef({ x: 0, y: 0, prevX: 0, prevY: 0 });
+  const targetMouse = useRef({ x: 0, y: 0 });
+  const smoothMouse = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const halfX = size.width / 2;
+    const halfY = size.height / 2;
+
+    mouse.current = { x: halfX, y: halfY, prevX: halfX, prevY: halfY };
+    targetMouse.current = { x: halfX, y: halfY };
+    smoothMouse.current = { x: halfX, y: halfY };
+  }, [size]);
+
+  useEffect(() => {
+    const { domElement } = gl;
+
+    const handleMouseMove = (event: MouseEvent) => {
+      const rect = domElement.getBoundingClientRect();
+      targetMouse.current.x = event.clientX - rect.left;
+      targetMouse.current.y = rect.height - (event.clientY - rect.top);
+    };
+
+    const handleMouseLeave = () => {};
+
+    domElement.addEventListener("mousemove", handleMouseMove);
+    domElement.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      domElement.removeEventListener("mousemove", handleMouseMove);
+      domElement.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [gl]);
+
+  const fluidUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector2(size.width, size.height) },
+      u_mouse: { value: new THREE.Vector4(0, 0, 0, 0) },
+      u_frame: { value: 0 },
+      iPreviousFrame: { value: null },
+      uBrushSize: { value: config.brushSize },
+      uBrushStrength: { value: config.brushStrength },
+      uFluidDecay: { value: config.fluidDecay },
+      uTrailLength: { value: config.trailLength },
+      uStopDecay: { value: config.stopDecay },
+    }),
+    [size.width, size.height],
+  );
+
+  const displayUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(size.width, size.height, 1) },
+      u_fluid: { value: null },
+      u_distortionAmount: { value: config.distortionAmount },
+      u_color: { value: new THREE.Color(color) },
+      ...uniforms,
+    }),
+    [size.width, size.height, uniforms, color],
+  );
+
+  useEffect(() => {
+    frameCount.current = 0;
+    fluidTarget1.setSize(size.width, size.height);
+    fluidTarget2.setSize(size.width, size.height);
+
+    if (fluidMaterial.current) {
+      const resolution = fluidMaterial.current.uniforms.u_resolution
+        .value as THREE.Vector2;
+      resolution.set(size.width, size.height);
+    }
+
+    if (displayMaterial.current) {
+      const resolution = displayMaterial.current.uniforms.u_resolution
+        .value as THREE.Vector3;
+      resolution.set(size.width, size.height, 1);
+    }
+  }, [size, fluidTarget1, fluidTarget2]);
+
+  useEffect(() => {
+    if (displayMaterial.current) {
+      displayMaterial.current.uniforms.u_fluid.value =
+        currentFluidTarget.current.texture;
+    }
+  }, []);
+
+  useFrame(({ gl, clock, camera }) => {
+    const time = clock.getElapsedTime();
+
+    mouse.current.prevX = smoothMouse.current.x;
+    mouse.current.prevY = smoothMouse.current.y;
+
+    smoothMouse.current.x +=
+      (targetMouse.current.x - smoothMouse.current.x) * config.lerpFactor;
+    smoothMouse.current.y +=
+      (targetMouse.current.y - smoothMouse.current.y) * config.lerpFactor;
+
+    mouse.current.x = smoothMouse.current.x;
+    mouse.current.y = smoothMouse.current.y;
+
+    if (fluidMaterial.current) {
+      fluidMaterial.current.uniforms.u_time.value = time;
+      fluidMaterial.current.uniforms.u_frame.value = frameCount.current;
+      fluidMaterial.current.uniforms.u_mouse.value.set(
+        mouse.current.x,
+        mouse.current.y,
+        mouse.current.prevX,
+        mouse.current.prevY,
+      );
+      fluidMaterial.current.uniforms.u_resolution.value.set(
+        size.width,
+        size.height,
+      );
+    }
+
+    if (fluidMaterial.current && fluidMeshRef.current) {
+      fluidMaterial.current.uniforms.iPreviousFrame.value =
+        previousFluidTarget.current.texture;
+      gl.setRenderTarget(currentFluidTarget.current);
+      gl.render(fluidMeshRef.current, camera);
+    }
+
+    if (displayMaterial.current) {
+      displayMaterial.current.uniforms.u_time.value = time;
+      displayMaterial.current.uniforms.u_resolution.value.set(
+        size.width,
+        size.height,
+        1,
+      );
+      displayMaterial.current.uniforms.u_fluid.value =
+        currentFluidTarget.current.texture;
+    }
+
+    if (displayMaterial.current && displayMeshRef.current) {
+      gl.setRenderTarget(null);
+      gl.render(displayMeshRef.current, camera);
+    }
+
+    const temp = currentFluidTarget.current;
+    currentFluidTarget.current = previousFluidTarget.current;
+    previousFluidTarget.current = temp;
+
+    frameCount.current += 1;
+  });
+
+  const fluidPlane = useMemo(
+    () => (
+      <mesh ref={fluidMeshRef}>
+        <planeGeometry args={[2, 2]} />
+        <shaderMaterial
+          ref={fluidMaterial}
+          uniforms={fluidUniforms}
+          vertexShader={simulationVertexShader}
+          fragmentShader={fluidFragmentShader}
+        />
+      </mesh>
+    ),
+    [fluidUniforms],
+  );
+
+  const displayPlane = useMemo(
+    () => (
+      <mesh ref={displayMeshRef}>
+        <planeGeometry args={[2, 2]} />
+        <shaderMaterial
+          ref={displayMaterial}
+          uniforms={displayUniforms}
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          side={THREE.FrontSide}
+          depthTest={false}
+          depthWrite={false}
+        />
+      </mesh>
+    ),
+    [displayUniforms, fragmentShader, vertexShader],
+  );
+
+  return (
+    <>
+      {fluidPlane}
+      {displayPlane}
+    </>
+  );
+};
+
+const Shader7 = ({
+  vertexShader = defaultVertexShader,
+  fragmentShader = defaultFragmentShader,
+  uniforms = {},
+  className,
+  color = "#bbffcc",
+}: ShaderBackgroundProps) => {
+  const [simKey, setSimKey] = useState(0);
+
+  useEffect(() => {
+    const handleResize = () => setSimKey((prev) => prev + 1);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return (
+    <section
+      className={cn(className, "absolute inset-0 h-screen w-full")}
+      color={color}
+    >
+      <Canvas>
+        <ShaderPlane
+          key={simKey}
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={uniforms}
+          color={color}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader7 };
diff --git a/blocks/shader8.tsx b/blocks/shader8.tsx
new file mode 100644
index 0000000..918a39a
--- /dev/null
+++ b/blocks/shader8.tsx
@@ -0,0 +1,412 @@
+"use client";
+
+import { Canvas, createPortal, useFrame, useThree } from "@react-three/fiber";
+import type { PointerEvent as ReactPointerEvent, RefObject } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+type PingPongUniforms = {
+  u_time: { value: number };
+  u_resolution: { value: THREE.Vector3 };
+  u_mouse: { value: THREE.Vector2 };
+  u_channel0: { value: THREE.Texture | null };
+};
+
+type UniformsRef = RefObject<PingPongUniforms | null>;
+
+const vertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 1.0);
+  }
+`;
+
+const fragmentBufferA = `
+precision highp float;
+
+varying vec2 vUv;
+uniform float u_time;
+uniform vec3 u_resolution;
+uniform sampler2D u_channel0;
+uniform vec2 u_mouse;
+
+float sdOrientedBox(in vec2 p, in vec2 a, in vec2 b, float th) {
+  float l = length(b-a);
+  vec2  d = (b-a)/l;
+  vec2  q = p-(a+b)*0.5;
+  q = mat2(d.x,-d.y,d.y,d.x)*q;
+  q = abs(q)-vec2(l*0.5,th);
+  return length(max(q,0.0)) + min(max(q.x,q.y),0.0);    
+}
+
+float sdCross(in vec2 p, float th, float crossRadius) {
+  float upper = 1. - crossRadius;
+  float lower = 0. + crossRadius;
+  vec2 v1 = vec2(lower, upper);
+  vec2 v12 = vec2(upper, lower);
+  vec2 v2 = vec2(lower, lower);
+  vec2 v22 = vec2(upper, upper);
+
+  float d1 = sdOrientedBox(p, v1,  v12, th);
+  float d2 = sdOrientedBox(p, v2,  v22, th);
+
+  float c1 = 1.0 - step(0.01, d1);
+  float c2 = 1.0 - step(0.01, d2);
+  return max(c1, c2);
+}
+
+float square(in vec2 p, float size) {
+  vec2 c = p - 0.5;
+  vec2 halfsq = vec2(size * 0.5);
+  return step(abs(c.x), halfsq.x) * step(abs(c.y), halfsq.y);
+}
+
+float line(in vec2 p, float radius) {
+  float upper = 1.0 - radius;
+  float lower = 0.0 + radius;
+  vec2 v1  = vec2(lower, lower);
+  vec2 v12 = vec2(upper, upper);
+  float d = sdOrientedBox(p, v1, v12, 0.028);
+  return 1.0 - step(0.01, d);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / u_resolution.xy;
+
+  float ar = u_resolution.y / u_resolution.x;
+  uv.y *= ar;
+
+  float GRID_SIZE = 25.0;
+  float gridSizeInverse = 1.0 / GRID_SIZE;
+  vec2 uv1 = uv * GRID_SIZE;
+  vec2 uv_i = floor(uv1);
+  vec2 uv_f = fract(uv1);
+
+  vec2 cellCenter = (uv_i + 0.5) * gridSizeInverse;
+
+  vec2 m = u_mouse;
+  m.y *= ar;
+
+  const float ACTIVATION_RADIUS = 0.05;
+  const float AGE_INCREMENT = 0.025;
+
+  vec4 prev = texture2D(u_channel0, vUv);
+  float age = prev.r;
+  float isActive = prev.g;
+
+  float activation = 0.0;
+  if (u_mouse.x >= 0.0) {
+    float distToMouse = distance(cellCenter, m);
+    activation = 1.0 - step(ACTIVATION_RADIUS, distToMouse);
+  }
+
+  if (activation > 0.0) {
+    age = 0.0;
+    isActive = 1.0;
+  } else if (isActive > 0.5) {
+    age = min(age + AGE_INCREMENT, 1.0);
+    if (age >= 1.0) {
+      age = 0.0;
+      isActive = 0.0;
+    }
+  } else {
+    age = 0.0;
+    isActive = 0.0;
+  }
+
+  fragColor = vec4(age, isActive, 0.0, 1.0);
+}
+
+void main() {
+  vec4 fragColor;
+  vec2 fragCoord = vUv * u_resolution.xy;
+  mainImage(fragColor, fragCoord);
+  gl_FragColor = fragColor;
+}
+`;
+
+const fragmentImage = `
+precision highp float;
+
+varying vec2 vUv;
+uniform vec3 u_resolution;
+uniform sampler2D u_channel0;
+
+float sdOrientedBox(in vec2 p, in vec2 a, in vec2 b, float th) {
+  float l = length(b-a);
+  vec2  d = (b-a)/l;
+  vec2  q = p-(a+b)*0.5;
+  q = mat2(d.x,-d.y,d.y,d.x)*q;
+  q = abs(q)-vec2(l*0.5,th);
+  return length(max(q,0.0)) + min(max(q.x,q.y),0.0);
+}
+
+float sdCross(in vec2 p, float th, float crossRadius) {
+  float upper = 1. - crossRadius;
+  float lower = 0. + crossRadius;
+  vec2 v1 = vec2(lower, upper);
+  vec2 v12 = vec2(upper, lower);
+  vec2 v2 = vec2(lower, lower);
+  vec2 v22 = vec2(upper, upper);
+
+  float d1 = sdOrientedBox(p, v1,  v12, th);
+  float d2 = sdOrientedBox(p, v2,  v22, th);
+
+  float c1 = 1.0 - step(0.01, d1);
+  float c2 = 1.0 - step(0.01, d2);
+  return max(c1, c2);
+}
+
+float square(in vec2 p, float size) {
+  vec2 c = p - 0.5;
+  vec2 halfsq = vec2(size * 0.5);
+  return step(abs(c.x), halfsq.x) * step(abs(c.y), halfsq.y);
+}
+
+float line(in vec2 p, float radius) {
+  float upper = 1.0 - radius;
+  float lower = 0.0 + radius;
+  vec2 v1  = vec2(lower, lower);
+  vec2 v12 = vec2(upper, upper);
+  float d = sdOrientedBox(p, v1, v12, 0.028);
+  return 1.0 - step(0.01, d);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / u_resolution.xy;
+  float ar = u_resolution.y / u_resolution.x;
+  uv.y *= ar;
+
+  float GRID_SIZE = 25.0;
+  float gridSizeInverse = 1.0 / GRID_SIZE;
+
+  vec2 uv1 = uv * GRID_SIZE;
+  vec2 uv_i = floor(uv1);
+  vec2 uv_f = fract(uv1);
+
+  vec4 data = texture2D(u_channel0, vUv);
+  float age = data.r;
+  float isActive = data.g;
+
+  const float AGE_STAGE_CROSS = 0.33;
+  const float AGE_STAGE_LINE = 0.66;
+
+  float shapeMask = 0.0;
+  if (isActive > 0.5) {
+    float stageSquare = 1.0 - step(AGE_STAGE_CROSS, age);
+    float stageCross = step(AGE_STAGE_CROSS, age) * (1.0 - step(AGE_STAGE_LINE, age));
+    float stageLine = step(AGE_STAGE_LINE, age);
+
+    float squareShape = square(uv_f, 0.8);
+    float crossShape = sdCross(uv_f, 0.028, 0.68);
+    float lineShape = line(uv_f, 0.68);
+
+    shapeMask = stageSquare * squareShape + stageCross * crossShape + stageLine * lineShape;
+  }
+
+  float dots = step(0.95, uv_f.x) * step(0.95, uv_f.y);
+
+  vec3 col = max(vec3(shapeMask), vec3(dots));
+
+  fragColor = vec4(col, 1.0);
+}
+
+void main() {
+  vec4 fragColor;
+  vec2 fragCoord = vUv * u_resolution.xy;
+  mainImage(fragColor, fragCoord);
+  gl_FragColor = fragColor;
+}
+`;
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: PingPongUniforms;
+}) => (
+  <mesh>
+    <planeGeometry args={[2, 2]} />
+    <shaderMaterial
+      vertexShader={vertexShader}
+      fragmentShader={fragmentShader}
+      uniforms={uniforms}
+      side={THREE.FrontSide}
+      depthTest={false}
+      depthWrite={false}
+    />
+  </mesh>
+);
+
+const PingPongScene = ({ uniformsRef }: { uniformsRef: UniformsRef }) => {
+  const bufferScene = useMemo(() => new THREE.Scene(), []);
+  const imageScene = useMemo(() => new THREE.Scene(), []);
+  const camera = useMemo(() => {
+    const cam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    cam.position.set(0, 0, 1);
+    cam.lookAt(0, 0, 0);
+    return cam;
+  }, []);
+  const activeTarget = useRef<THREE.WebGLRenderTarget | null>(null);
+  const passiveTarget = useRef<THREE.WebGLRenderTarget | null>(null);
+  const { gl, size } = useThree();
+  const glRef = useRef(gl);
+
+  useEffect(() => {
+    glRef.current = gl;
+  }, [gl]);
+
+  useEffect(() => {
+    const previousAutoClear = glRef.current.autoClear;
+    glRef.current.autoClear = false;
+    return () => {
+      if (glRef.current) {
+        glRef.current.autoClear = previousAutoClear;
+      }
+    };
+  }, []);
+
+  const uniforms = useMemo<PingPongUniforms>(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(size.width, size.height, 1) },
+      u_mouse: { value: new THREE.Vector2(-1, -1) },
+      u_channel0: { value: null },
+    }),
+    [size.width, size.height],
+  );
+
+  useEffect(() => {
+    uniformsRef.current = uniforms;
+    return () => {
+      if (uniformsRef.current === uniforms) uniformsRef.current = null;
+    };
+  }, [uniforms, uniformsRef]);
+
+  useEffect(() => {
+    const options = {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      format: THREE.RGBAFormat,
+    };
+
+    const rt1 = new THREE.WebGLRenderTarget(size.width, size.height, options);
+    const rt2 = new THREE.WebGLRenderTarget(size.width, size.height, options);
+
+    activeTarget.current?.dispose();
+    passiveTarget.current?.dispose();
+
+    activeTarget.current = rt1;
+    passiveTarget.current = rt2;
+
+    uniforms.u_resolution.value.set(size.width, size.height, 1);
+
+    const prevTarget = gl.getRenderTarget();
+    const prevClearColor = gl.getClearColor(new THREE.Color()).clone();
+    const prevClearAlpha = gl.getClearAlpha();
+
+    gl.setClearColor(0x000000, 1);
+    gl.setRenderTarget(rt1);
+    gl.clear(true, true, true);
+    gl.setRenderTarget(rt2);
+    gl.clear(true, true, true);
+    gl.setRenderTarget(prevTarget);
+    gl.setClearColor(prevClearColor, prevClearAlpha);
+
+    return () => {
+      rt1.dispose();
+      rt2.dispose();
+    };
+  }, [gl, size.width, size.height, uniforms]);
+
+  const uniformsRefLocal = useRef(uniforms);
+
+  useEffect(() => {
+    uniformsRefLocal.current = uniforms;
+  }, [uniforms]);
+
+  useFrame(({ clock }) => {
+    if (!activeTarget.current || !passiveTarget.current) return;
+
+    uniformsRefLocal.current.u_time.value = clock.getElapsedTime();
+
+    uniformsRefLocal.current.u_channel0.value = passiveTarget.current.texture;
+    gl.setRenderTarget(activeTarget.current);
+    gl.render(bufferScene, camera);
+
+    const temp = activeTarget.current;
+    activeTarget.current = passiveTarget.current;
+    passiveTarget.current = temp;
+
+    uniformsRefLocal.current.u_channel0.value = passiveTarget.current.texture;
+    gl.setRenderTarget(null);
+    gl.render(imageScene, camera);
+  });
+
+  return (
+    <>
+      {createPortal(
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentBufferA}
+          uniforms={uniforms}
+        />,
+        bufferScene,
+      )}
+      {createPortal(
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentImage}
+          uniforms={uniforms}
+        />,
+        imageScene,
+      )}
+    </>
+  );
+};
+
+interface Shader8Props {
+  className?: string;
+}
+
+const Shader8 = ({ className }: Shader8Props) => {
+  const uniformsRef = useRef<PingPongUniforms | null>(null);
+
+  const handlePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const uniforms = uniformsRef.current;
+      if (!uniforms) return;
+      const rect = event.currentTarget.getBoundingClientRect();
+      const x = (event.clientX - rect.left) / rect.width;
+      const y = 1.0 - (event.clientY - rect.top) / rect.height;
+      uniforms.u_mouse.value.set(x, y);
+    },
+    [],
+  );
+
+  const handlePointerLeave = useCallback(() => {
+    const uniforms = uniformsRef.current;
+    if (!uniforms) return;
+    uniforms.u_mouse.value.set(-1, -1);
+  }, []);
+
+  return (
+    <section
+      className={cn(className, "absolute inset-0 h-screen w-full")}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+    >
+      <Canvas>
+        <PingPongScene uniformsRef={uniformsRef} />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader8 };
diff --git a/blocks/shader9.tsx b/blocks/shader9.tsx
new file mode 100644
index 0000000..b55b7cc
--- /dev/null
+++ b/blocks/shader9.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+import { cn } from "@/lib/utils";
+
+interface ShaderPlaneProps {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: { [key: string]: { value: unknown } };
+}
+
+const ShaderPlane = ({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+}: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const { size } = useThree();
+
+  const mouseLerp = useRef(new THREE.Vector2(0, 0));
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.u_time.value = state.clock.elapsedTime * 0.5;
+      material.uniforms.u_resolution.value.set(size.width, size.height, 1.0);
+
+      const aspect = size.width / size.height;
+      const targetX = state.pointer.x * aspect;
+      const targetY = state.pointer.y;
+
+      mouseLerp.current.lerp(new THREE.Vector2(targetX, targetY), 0.1);
+
+      material.uniforms.u_mouse.value.copy(mouseLerp.current);
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        side={THREE.FrontSide}
+        depthTest={false}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+};
+
+interface ShaderBackgroundProps {
+  vertexShader?: string;
+  fragmentShader?: string;
+  uniforms?: { [key: string]: { value: unknown } };
+  className?: string;
+}
+
+const Shader9 = ({
+  vertexShader = `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+    gl_Position = vec4(position, 1.0);
+    }
+  `,
+  fragmentShader = `
+    precision highp float;
+
+    varying vec2 vUv;
+    uniform float u_time;
+    uniform vec3 u_resolution;
+    uniform sampler2D u_channel0;
+    uniform vec2 u_mouse;
+
+    #define T u_time / 2.0
+    #define PI 3.141596
+    #define TAU 6.283185
+    #define S smoothstep
+    const float EPSILON = 1e-6;
+
+    mat2 rotate(float a){
+      float s = sin(a);
+      float c = cos(a);
+      return mat2(c,-s,s,c);
+    }
+
+    void mainImage(out vec4 O, in vec2 I){
+      vec2 R = u_resolution.xy;
+      vec2 uv = (I*2.0 - R) / R.y;
+
+      O.rgb = vec3(0.05, 0.05, 0.1);
+      O.a = 1.0;
+
+      vec3 ro = vec3(0.0, 0.0, -13.0);
+      vec3 rd = normalize(vec3(uv, 1.0));
+
+      float zMax = 20.0;
+      float z = 0.1;
+
+      vec3 col = vec3(0.05, 0.05, 0.075);
+      float glow = 0.0;
+
+      for (float i = 0.0; i < 100.0; i++) {
+        vec3 p = ro + rd * z;
+
+        p.xz = rotate(p.y * 0.4 + T) * p.xz;
+
+        float ang = acos(p.x / 4.0);
+        float n = 6.0;
+        float doff = cos(ang * n);
+
+        float d = length(p) - (6.0 + doff * 0.6);
+        d = abs(d) + 0.1;
+
+        vec3 c = (0.7 + 0.5 * sin(vec3(2, 1, 1) + p.x));
+        glow += pow(0.015 / d, 2.0);
+        col += glow * c;
+
+        if (d < 0.5) {
+        float distToMouse = length(uv - u_mouse);
+        float influence = 1.0 - smoothstep(0.0, 0.5, distToMouse); 
+        col = mix(col, vec3(1.0, 0.0, 0.0), influence);
+    }
+
+        if (d < EPSILON || z > zMax) break;
+        z += max(d * 0.1, EPSILON * 2.0);
+      }
+
+      col = col / (1.0 + col);
+      O.rgb = col;
+    }
+      
+
+    void main() {
+      vec4 fragColor;
+      vec2 fragCoord = vUv * u_resolution.xy;
+      mainImage(fragColor, fragCoord);
+      gl_FragColor = fragColor;
+    }
+  `,
+  uniforms = {},
+  className,
+}: ShaderBackgroundProps) => {
+  const shaderUniforms = useMemo(
+    () => ({
+      u_time: { value: 0 },
+      u_resolution: { value: new THREE.Vector3(1, 1, 1) },
+      u_mouse: { value: new THREE.Vector2(0, 0) },
+      ...uniforms,
+    }),
+    [uniforms],
+  );
+
+  return (
+    <section className={cn(className, "absolute inset-0 h-screen w-full")}>
+      <Canvas>
+        <ShaderPlane
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShader}
+          uniforms={shaderUniforms}
+        />
+      </Canvas>
+    </section>
+  );
+};
+
+export { Shader9 };
diff --git a/blocks/shopping-cart1.tsx b/blocks/shopping-cart1.tsx
new file mode 100644
index 0000000..c13a50d
--- /dev/null
+++ b/blocks/shopping-cart1.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+
+interface CartItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+}
+
+const DEFAULT_ITEMS: CartItem[] = [
+  {
+    id: "1",
+    name: "کفش ورزشی بژ مینیمال",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+    price: 120.0,
+    quantity: 1,
+  },
+  {
+    id: "2",
+    name: "بلوز آبی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+    price: 140.0,
+    quantity: 1,
+  },
+  {
+    id: "3",
+    name: "کلاه فدورا کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+    price: 84.0,
+    quantity: 1,
+  },
+];
+
+const ShoppingCart1 = ({
+  initialItems = DEFAULT_ITEMS,
+}: {
+  initialItems?: CartItem[];
+}) => {
+  const [items, setItems] = useState(initialItems);
+
+  const removeItem = (id: string) => {
+    setItems(items.filter((item) => item.id !== id));
+  };
+
+  const subtotal = items.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0,
+  );
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat("fa-IR", {
+      style: "currency",
+      currency: "IRR",
+    }).format(price);
+  };
+
+  if (items.length === 0) {
+    return (
+      <section className="py-32">
+        <div className="container max-w-lg text-center">
+          <h1 className="mb-4 text-xl font-semibold">سبد خرید شما خالی است</h1>
+          <p className="mb-8 text-muted-foreground">
+            هنوز محصولی به سبد اضافه نکرده‌اید.
+          </p>
+          <Button asChild>
+            <a href="#">ادامه خرید</a>
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-32">
+      <div className="container max-w-2xl">
+        <h1 className="mb-8 text-3xl font-semibold">سبد خرید</h1>
+
+        <div className="space-y-4">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center gap-4 rounded-lg border p-4"
+            >
+              <div className="w-20 shrink-0">
+                <AspectRatio ratio={1} className="overflow-hidden rounded-md">
+                  <img
+                    src={item.image}
+                    alt={item.name}
+                    className="size-full object-cover"
+                  />
+                </AspectRatio>
+              </div>
+
+              <div className="flex-1">
+                <h3 className="font-medium">{item.name}</h3>
+                <p className="text-sm text-muted-foreground">
+                  تعداد: {item.quantity.toLocaleString("fa-IR")}
+                </p>
+              </div>
+
+              <div className="text-end">
+                <p className="font-semibold">
+                  {formatPrice(item.price * item.quantity)}
+                </p>
+              </div>
+
+              <Button
+                variant="ghost"
+                size="icon"
+                className="shrink-0"
+                onClick={() => removeItem(item.id)}
+                aria-label={`حذف ${item.name} از سبد`}
+              >
+                <X className="size-4" />
+                <span className="sr-only">حذف از سبد</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <Separator className="my-6" />
+
+        <div className="space-y-4">
+          <div className="flex justify-between text-lg font-semibold">
+            <span>جمع کل</span>
+            <span>{formatPrice(subtotal)}</span>
+          </div>
+
+          <Button size="lg" className="w-full">
+            ادامه به تسویه
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ShoppingCart1 };
diff --git a/blocks/shopping-cart14.tsx b/blocks/shopping-cart14.tsx
new file mode 100644
index 0000000..7e084d8
--- /dev/null
+++ b/blocks/shopping-cart14.tsx
@@ -0,0 +1,426 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowUpRight, PackageOpen, X } from "lucide-react";
+import { useCallback } from "react";
+import { useFieldArray, useForm, type UseFormReturn } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import {
+  Empty,
+  EmptyContent,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Field } from "@/components/ui/field";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  details: {
+    label: string;
+    value: string;
+  }[];
+};
+
+interface ShoppingCart14Props {
+  cartItems: CartItem[];
+}
+
+interface FullCartProps {
+  cartItems: CartItem[];
+}
+
+interface CartItemProps extends CartItem {
+  index: number;
+  form: UseFormReturn<CartFormType>;
+  quantity: number;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کفش اسپرت زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+    price: {
+      regular: 354.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "قرمز",
+      },
+      {
+        label: "سایز",
+        value: "36",
+      },
+    ],
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "سوئیشرت دو رنگ با لوگوی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "آبی و سفید",
+      },
+      {
+        label: "سایز",
+        value: "L",
+      },
+    ],
+  },
+  {
+    product_id: "product-3",
+    link: "#",
+    name: "هودی مشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+    price: {
+      regular: 84.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "مشکی",
+      },
+      {
+        label: "سایز",
+        value: "XL",
+      },
+    ],
+  },
+  {
+    product_id: "product-4",
+    link: "#",
+    name: "کیف چرمی زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: {
+      regular: 245.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "زرشکی",
+      },
+    ],
+  },
+  {
+    product_id: "product-5",
+    link: "#",
+    name: "کلاه فدورا کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-1.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "بژ",
+      },
+    ],
+  },
+];
+
+const cartFormSchema = z.object({
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CartFormType = z.infer<typeof cartFormSchema>;
+
+const ShoppingCart14 = ({ cartItems = CART_ITEMS }: ShoppingCart14Props) => {
+  const isEmpty = cartItems.length === 0;
+
+  return (
+    <Sheet defaultOpen>
+      <SheetContent
+        aria-describedby={undefined}
+        className="top-4 end-4 h-[calc(100dvh-2rem)] w-full rounded-2xl border border-s-0 bg-background/75 backdrop-blur-md max-md:!max-w-[calc(100dvw-2rem)] md:!max-w-150"
+      >
+        {isEmpty ? <EmptyCart /> : <FullCart cartItems={cartItems} />}
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const EmptyCart = () => {
+  return (
+    <Empty>
+      <EmptyContent className="gap-3.5">
+        <EmptyMedia>
+          <PackageOpen className="size-25 stroke-muted-foreground stroke-1" />
+        </EmptyMedia>
+
+        <EmptyTitle className="text-center text-sm text-muted-foreground">
+          محصولی در سبد نیست
+        </EmptyTitle>
+      </EmptyContent>
+    </Empty>
+  );
+};
+
+const FullCart = ({ cartItems }: FullCartProps) => {
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: 1,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm<CartFormType>({
+    resolver: zodResolver(cartFormSchema),
+    defaultValues: {
+      products: defaultProducts,
+    },
+  });
+
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const formItems = form.watch("products");
+  const itemsCount = formItems && formItems.length ? formItems.length : 0;
+
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+
+  const onSubmit = (data: CartFormType) => {
+    console.log(data);
+  };
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  return (
+    <form className="h-full" onSubmit={form.handleSubmit(onSubmit)}>
+      <div className="flex h-full flex-col">
+        <SheetHeader className="h-17 border-b p-3.5">
+          <SheetTitle className="text-xl">
+            سبد خرید
+            <sup className="ms-3.5 align-[0.5rem] text-lg">
+              ({itemsCount.toLocaleString("fa-IR")})
+            </sup>
+          </SheetTitle>
+        </SheetHeader>
+        <div className="h-[calc(100dvh-12.375rem)]">
+          <div className="hide-scrollbar max-h-full overflow-auto py-3.5">
+            <div className="grid gap-1.5 px-3.5 sm:grid-cols-2">
+              {fields.map((field, index) => (
+                <CartItem
+                  key={field.id}
+                  index={index}
+                  form={form}
+                  onRemoveClick={() => handleRemove(index)()}
+                  quantity={field.quantity}
+                  onQuantityChange={(newQty: number) =>
+                    handleQuantityChange(index)(newQty)
+                  }
+                  {...(cartItems.find(
+                    (p) => p.product_id === field.product_id,
+                  ) as CartItem)}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+        <SheetFooter className="h-24.5 gap-3.5 border-t p-3.5">
+          <div className="flex w-full items-center justify-between gap-3.5">
+            <p className="text-sm">جمع کل</p>
+            <span className="text-sm">
+              {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+            </span>
+          </div>
+          <div className="flex gap-2">
+            <Button asChild className="flex-1" variant="outline">
+              <a href="#">
+                مشاهده سبد
+                <ArrowUpRight className="ms-2 size-4 rtl:rotate-180" />
+              </a>
+            </Button>
+            <Button className="flex-1">
+              ادامه به تسویه
+              <ArrowUpRight className="ms-2 size-4 rtl:rotate-180" />
+            </Button>
+          </div>
+        </SheetFooter>
+      </div>
+    </form>
+  );
+};
+
+const CartItem = ({
+  image,
+  name,
+  details,
+  index,
+  form,
+  onQuantityChange,
+  onRemoveClick,
+  price,
+  quantity,
+}: CartItemProps) => {
+  const { regular, currency } = price;
+
+  return (
+    <Card className="relative border-none bg-transparent p-0 shadow-none">
+      <div className="absolute top-2.5 end-2.5 z-10">
+        <Button
+          type="button"
+          size="icon-sm"
+          variant="ghost"
+          className="size-5"
+          onClick={onRemoveClick}
+          aria-label={`حذف ${name} از سبد`}
+        >
+          <X />
+          <span className="sr-only">حذف از سبد</span>
+        </Button>
+      </div>
+      <CardContent className="flex h-full flex-col p-0">
+        <AspectRatio ratio={1.2} className="overflow-hidden rounded-2xl">
+          <img
+            src={image}
+            alt={name}
+            className="block size-full object-cover object-center"
+          />
+        </AspectRatio>
+        <div className="flex h-full flex-col justify-between gap-5 p-2.5">
+          <div>
+            <CardTitle className="text-sm leading-snug font-normal">
+              {name}
+            </CardTitle>
+            <ul className="">
+              {details.map((item, index) => {
+                const isLast = index === details.length - 1;
+                return (
+                  <li className="inline" key={`product-details-${index}`}>
+                    <dl className="inline text-sm font-medium">
+                      <dt className="sr-only inline">{item.label}: </dt>
+                      <dd className="inline text-muted-foreground">
+                        {item.value}
+                      </dd>
+                      {!isLast && (
+                        <span className="mx-1 text-muted-foreground">/</span>
+                      )}
+                    </dl>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+          <div className="mt-auto flex flex-wrap items-center justify-between gap-5">
+            <QuantityField
+              form={form}
+              index={index}
+              onQuantityChange={onQuantityChange}
+            />
+            <div className="inline-flex items-baseline gap-1">
+              <span className="text-sm text-muted-foreground">
+                {quantity.toLocaleString("fa-IR")}
+              </span>
+              <span className="text-sm text-muted-foreground">×</span>
+              <span className="text-sm font-normal text-muted-foreground">
+                {formatPrice(regular, currency)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const QuantityField = ({
+  form,
+  index,
+  onQuantityChange,
+}: {
+  form: ReturnType<typeof useForm<CartFormType>>;
+  index: number;
+  onQuantityChange: (n: number) => void;
+}) => {
+  return (
+    <Controller
+      control={form.control}
+      name={`products.${index}.quantity`}
+      render={({ field }) => (
+        <Field className="gap-3">
+          <div className="w-full max-w-28">
+            <QuantityInput
+              inputProps={field}
+              onValueChange={(newQty) => {
+                field.onChange(newQty);
+                onQuantityChange(newQty);
+              }}
+              className="rounded-none border-none !shadow-none"
+            />
+          </div>
+        </Field>
+      )}
+    />
+  );
+};
+
+export { ShoppingCart14 };
diff --git a/blocks/shopping-cart15.tsx b/blocks/shopping-cart15.tsx
new file mode 100644
index 0000000..270366b
--- /dev/null
+++ b/blocks/shopping-cart15.tsx
@@ -0,0 +1,912 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckCircle, Info } from "lucide-react";
+import { useCallback, useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import z from "zod";
+
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardTitle } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Field, FieldError } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+type UsefulLink = {
+  text: string;
+  link: string;
+};
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type EmptyCartData = {
+  title: string;
+  description: string;
+  cta: {
+    link: string;
+    text: string;
+  };
+};
+
+type Option = {
+  id: string;
+  label: string;
+  value: string;
+  color?: string;
+};
+
+interface OptionsProps extends Partial<Variant> {
+  currentValue?: string;
+}
+
+interface Variant {
+  label: string;
+  id: string;
+  name: string;
+  options?: Option[];
+  type: "select" | "radio";
+}
+
+type EmptyCartProps = EmptyCartData;
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  details?: {
+    label: string;
+    value: string;
+  }[];
+  variants?: Partial<Record<"color" | "size", Variant>>;
+  sizeValue?: string;
+  colorValue?: string;
+};
+
+interface FullCartProps {
+  cartItems: CartItem[];
+  formItems: CartFormType["products"];
+  form: UseFormReturn<CartFormType>;
+  usefulLinks: UsefulLink[];
+}
+
+interface CartItemProps extends CartItem {
+  index: number;
+  form: ReturnType<typeof useForm<CartFormType>>;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+interface UsefulLinksListProps {
+  links: UsefulLink[];
+}
+
+interface EditProductProps {
+  index: number;
+  variants?: Partial<Record<"color" | "size", Variant>>;
+  onCancel: () => void;
+  currentVariant: {
+    color?: string;
+    size?: string;
+  };
+}
+
+const EMPTY_CART_DATA = {
+  title: "سبد خرید شما خالی است",
+  description:
+    "سبد هنوز خالی است؛ همه محصولات ما را ببینید و اولین خرید خود را شروع کنید",
+  cta: {
+    link: "#",
+    text: "مشاهده محصولات",
+  },
+};
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کفش ورزشی بژ مینیمال",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+    price: {
+      regular: 149.0,
+      currency: "IRR",
+      sale: 120.0,
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "EU 36",
+      },
+      {
+        label: "رنگ",
+        value: "بژ",
+      },
+    ],
+    sizeValue: "EU_36",
+    colorValue: "product-1-beige",
+    variants: {
+      size: {
+        label: "سایز",
+        name: "size",
+        id: "size",
+        type: "select",
+        options: [
+          {
+            label: "EU 36",
+            id: "product-1-EU_36",
+            value: "EU_36",
+          },
+          {
+            label: "EU 36.5",
+            id: "product-1-EU_36.5",
+            value: "EU_36.5",
+          },
+          {
+            label: "EU 37",
+            id: "product-1-EU_37",
+            value: "EU_37",
+          },
+          {
+            label: "EU 37.5",
+            id: "product-1-EU_37.5",
+            value: "EU_37.5",
+          },
+          {
+            label: "EU 39",
+            id: "product-1-EU_39",
+            value: "EU_39",
+          },
+          {
+            label: "EU 39.5",
+            id: "product-1-EU_39.5",
+            value: "EU_39.5",
+          },
+          {
+            label: "EU 41",
+            id: "product-1-EU_41",
+            value: "EU_41",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        name: "color",
+        id: "color",
+        type: "radio",
+        options: [
+          {
+            label: "مشکی",
+            id: "product-1-black",
+            value: "product-1-black",
+            color: "#000000",
+          },
+          {
+            label: "آبی",
+            id: "product-1-blue",
+            value: "product-1-blue",
+            color: "#1581BF",
+          },
+          {
+            label: "هلویی",
+            id: "product-1-peach",
+            value: "product-1-peach",
+            color: "#FF5555",
+          },
+          {
+            label: "بژ",
+            id: "product-1-beige",
+            value: "product-1-beige",
+            color: "#D7C097",
+          },
+        ],
+      },
+    },
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "بلوز آبی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+    price: {
+      regular: 140.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "S",
+      },
+      {
+        label: "رنگ",
+        value: "آبی",
+      },
+    ],
+    sizeValue: "S",
+    colorValue: "product-2-blue",
+    variants: {
+      size: {
+        label: "سایز",
+        name: "size",
+        id: "size",
+        type: "select",
+        options: [
+          {
+            label: "S",
+            id: "product-2-S",
+            value: "S",
+          },
+          {
+            label: "M",
+            id: "product-2-M",
+            value: "M",
+          },
+          {
+            label: "XL",
+            id: "product-XL",
+            value: "XL",
+          },
+        ],
+      },
+      color: {
+        label: "رنگ",
+        name: "color",
+        id: "color",
+        type: "radio",
+        options: [
+          {
+            label: "مشکی",
+            id: "product-2-black",
+            value: "product-2-black",
+            color: "#000000",
+          },
+          {
+            label: "آبی",
+            id: "product-2-blue",
+            value: "product-2-blue",
+            color: "#1581BF",
+          },
+          {
+            label: "هلویی",
+            id: "product-2-peach",
+            value: "product-2-peach",
+            color: "#FF5555",
+          },
+        ],
+      },
+    },
+  },
+  {
+    product_id: "product-3",
+    link: "#",
+    name: "کلاه فدورا کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+    price: {
+      regular: 84.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "بژ",
+      },
+    ],
+    colorValue: "product-1-beige",
+    variants: {
+      color: {
+        label: "رنگ",
+        name: "color",
+        id: "color",
+        type: "radio",
+        options: [
+          {
+            label: "مشکی",
+            id: "product-3-black",
+            value: "product-3-black",
+            color: "#000000",
+          },
+          {
+            label: "آبی",
+            id: "product-3-blue",
+            value: "product-3-blue",
+            color: "#1581BF",
+          },
+          {
+            label: "بژ",
+            id: "product-1-beige",
+            value: "product-1-beige",
+            color: "#D7C097",
+          },
+        ],
+      },
+    },
+  },
+];
+
+const USEFUL_LINKS: UsefulLink[] = [
+  {
+    text: "بازگشت و تعویض",
+    link: "#",
+  },
+  {
+    text: "ارسال به منزل",
+    link: "#",
+  },
+  {
+    text: "گارانتی",
+    link: "#",
+  },
+];
+
+const cartFormSchema = z.object({
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+      color: z.string(),
+      size: z.string(),
+    })
+    .array(),
+});
+
+type CartFormType = z.infer<typeof cartFormSchema>;
+
+const ShoppingCart15 = ({
+  emptyCartData = EMPTY_CART_DATA,
+  cartItems = CART_ITEMS,
+  usefulLinks = USEFUL_LINKS,
+}) => {
+  const { title, description, cta } = emptyCartData;
+
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: 1,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm<CartFormType>({
+    resolver: zodResolver(cartFormSchema),
+    defaultValues: {
+      products: defaultProducts,
+    },
+  });
+
+  const formItems = form.watch("products");
+
+  const isEmpty = formItems.length === 0;
+
+  return (
+    <section className="py-32">
+      <div className="container">
+        {isEmpty ? (
+          <EmptyCart title={title} description={description} cta={cta} />
+        ) : (
+          <FullCart
+            usefulLinks={usefulLinks}
+            form={form}
+            formItems={formItems}
+            cartItems={cartItems}
+          />
+        )}
+      </div>
+    </section>
+  );
+};
+
+const EmptyCart = ({ title, description, cta }: EmptyCartProps) => {
+  return (
+    <Empty className="gap-8">
+      <EmptyHeader className="gap-3">
+        <EmptyTitle className="text-xl">{title}</EmptyTitle>
+        <EmptyDescription className="text-lg text-balance">
+          {description}
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent className="gap-3.5">
+        <Button asChild size="lg">
+          <a href={cta.link}>{cta.text}</a>
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+};
+
+const FullCart = ({
+  cartItems,
+  form,
+  formItems,
+  usefulLinks,
+}: FullCartProps) => {
+  const itemsCount = formItems && formItems.length ? formItems.length : 0;
+
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+
+  const onSubmit = (data: CartFormType) => {
+    console.log(data);
+  };
+
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+  return (
+    <div className="space-y-4">
+      <div className="space-y-1 xl:px-16">
+        <h1 className="text-xl font-semibold">سبد خرید</h1>
+        <p className="font-medium text-muted-foreground">
+          {itemsCount.toLocaleString("fa-IR")} کالا
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-10 lg:grid-cols-3">
+        <div className="col-span-2">
+          <div className="xl:px-16">
+            <div className="flex flex-col gap-6">
+              <Alert className="bg-muted">
+                <Info className="stroke-muted-foreground" />
+                <AlertDescription className="text-muted-foreground">
+                  بیش از حد قبل از ثبت سفارش معطل نشوید. محصولات تنها پس از
+                  تکمیل خرید برای شما رزرو می‌شوند.
+                </AlertDescription>
+              </Alert>
+              <div>
+                <form onSubmit={form.handleSubmit(onSubmit)}>
+                  <div className="space-y-5">
+                    {fields.map((field, index) => (
+                      <CartItem
+                        key={field.id}
+                        index={index}
+                        form={form}
+                        onRemoveClick={() => handleRemove(index)()}
+                        onQuantityChange={(newQty: number) =>
+                          handleQuantityChange(index)(newQty)
+                        }
+                        {...(cartItems.find(
+                          (p) => p.product_id === field.product_id,
+                        ) as CartItem)}
+                      />
+                    ))}
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-span-1">
+          <div className="space-y-5 xl:px-16">
+            <PromoCode />
+            <div className="">
+              <dl className="flex items-center justify-between gap-2 pb-4 not-first:pt-4 not-last:border-b">
+                <dt className="text-sm">جمع جزء</dt>
+                <dd className="text-sm">
+                  {formatPrice(totalPrice ?? 0, cartItems[0].price.currency)}
+                </dd>
+              </dl>
+              <dl className="flex items-center justify-between gap-2 pb-4 not-first:pt-4 not-last:border-b">
+                <dt className="text-sm">هزینه ارسال</dt>
+                <dd className="text-sm">
+                  {formatPrice(30.0, cartItems[0].price.currency)}
+                </dd>
+              </dl>
+              <dl className="flex items-center justify-between gap-2 pb-4 not-first:pt-4 not-last:border-b">
+                <dt className="text-sm">جمع کل</dt>
+                <dd className="text-xl font-bold">
+                  {formatPrice(totalPrice ?? 0, cartItems[0].price.currency)}
+                </dd>
+              </dl>
+            </div>
+            <div className="max-lg:fixed max-lg:inset-x-0 max-lg:bottom-0 max-lg:mb-0">
+              <div className="max-lg:space-y-3 max-lg:border-t max-lg:bg-background max-lg:px-6 max-lg:py-4">
+                <div className="flex items-center justify-between gap-2 lg:hidden">
+                  <p>
+                    جمع جزء {itemsCount.toLocaleString("fa-IR")} کالا
+                  </p>
+                  <span className="text-base font-bold">
+                    {formatPrice(totalPrice ?? 0, cartItems[0].price.currency)}
+                  </span>
+                </div>
+                <Button size="lg" className="w-full">
+                  ادامه به تسویه
+                </Button>
+              </div>
+            </div>
+            <UsefulLinksList links={usefulLinks} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const CartItem = ({
+  image,
+  name,
+  details,
+  index,
+  form,
+  onQuantityChange,
+  onRemoveClick,
+  price,
+  link,
+  variants,
+  sizeValue,
+  colorValue,
+}: CartItemProps) => {
+  const [openEdit, setOpenEdit] = useState(false);
+  const { regular, currency, sale } = price;
+
+  return (
+    <div>
+      <Card className="group relative border-none bg-transparent p-0 shadow-none">
+        <CardContent className="flex h-full gap-6 p-0 max-sm:flex-col">
+          <div className="shrink-0 grow-0 basis-53">
+            <AspectRatio ratio={1} className="overflow-hidden rounded-sm">
+              <img
+                src={image}
+                alt={name}
+                className="block size-full object-cover object-center"
+              />
+            </AspectRatio>
+          </div>
+
+          <div className="flex flex-1 flex-col items-start justify-between gap-3 pt-4 md:pt-6">
+            <div className="flex w-full justify-between gap-2 max-sm:flex-col">
+              <div className="flex-1">
+                <div className="space-y-2">
+                  <CardTitle className="text-sm leading-snug font-medium transition-colors duration-300 hover:text-primary">
+                    <a href={link}>{name}</a>
+                  </CardTitle>
+                  <ProductDetails details={details} />
+                </div>
+              </div>
+              <div className="flex flex-wrap items-center gap-x-2 text-lg font-semibold">
+                {sale != null && (
+                  <span className="leading-tight text-rose-600">
+                    {formatPrice(sale, currency)}
+                  </span>
+                )}
+                <span
+                  className={
+                    sale != null
+                      ? "leading-tight text-muted-foreground line-through"
+                      : "leading-tight"
+                  }
+                >
+                  {formatPrice(regular, currency)}
+                </span>
+              </div>
+            </div>
+            <QuantityField
+              form={form}
+              index={index}
+              onQuantityChange={onQuantityChange}
+            />
+            <CardFooter className="gap-4 p-0">
+              <Button
+                variant="link"
+                className="h-fit p-0 text-xs text-muted-foreground underline"
+                onClick={onRemoveClick}
+                aria-label={`حذف ${name} از سبد`}
+              >
+                حذف
+              </Button>
+              <Button
+                variant="link"
+                type="button"
+                onClick={() => {
+                  setOpenEdit((prev) => !prev);
+                }}
+                className="h-fit p-0 text-xs text-muted-foreground underline"
+                aria-label={`ویرایش ${name}`}
+              >
+                ویرایش
+              </Button>
+            </CardFooter>
+          </div>
+        </CardContent>
+      </Card>
+      <Collapsible open={openEdit}>
+        <CollapsibleContent>
+          <EditProduct
+            onCancel={() => setOpenEdit(false)}
+            variants={variants}
+            index={index}
+            currentVariant={{
+              size: sizeValue,
+              color: colorValue,
+            }}
+          />
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+const promoCodeFormSchema = z.object({
+  promoCode: z.string().trim().min(3),
+});
+
+type promoCodeFormType = z.infer<typeof promoCodeFormSchema>;
+
+const PromoCode = () => {
+  const [showCodeForm, setShowCodeForm] = useState(false);
+
+  const promoForm = useForm<promoCodeFormType>({
+    resolver: zodResolver(promoCodeFormSchema),
+    defaultValues: {
+      promoCode: "",
+    },
+  });
+
+  const onSubmit = (data: promoCodeFormType) => {
+    console.log(data);
+  };
+
+  const onCancel = () => {
+    setShowCodeForm(false);
+  };
+
+  return (
+    <Collapsible open={showCodeForm} onOpenChange={setShowCodeForm}>
+      <CollapsibleTrigger asChild>
+        <Button variant="link" className="h-fit p-0 text-primary underline">
+          افزودن کد تخفیف
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-3 overflow-hidden data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down">
+        <form onSubmit={promoForm.handleSubmit(onSubmit)}>
+          <Controller
+            name="promoCode"
+            control={promoForm.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <Input
+                  {...field}
+                  id="promo-code"
+                  placeholder="کد تخفیف"
+                  aria-invalid={fieldState.invalid}
+                />
+                {fieldState.invalid && (
+                  <FieldError errors={[fieldState.error]} />
+                )}
+              </Field>
+            )}
+          />
+          <div className="flex items-center gap-4 pt-3">
+            <Button
+              onClick={onCancel}
+              type="button"
+              variant="outline"
+              className="flex-1"
+            >
+              انصراف
+            </Button>
+            <Button className="flex-1">افزودن</Button>
+          </div>
+        </form>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+const UsefulLinksList = ({ links }: UsefulLinksListProps) => {
+  if (!links) return;
+
+  return (
+    <ul className="space-y-3 py-5">
+      {links.map(({ link, text }) => (
+        <li key={crypto.randomUUID()}>
+          <Button
+            asChild
+            variant="link"
+            className="h-fit !p-0 text-muted-foreground underline"
+          >
+            <a href={link}>
+              <CheckCircle />
+              {text}
+            </a>
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const ProductDetails = ({
+  details,
+}: {
+  details?: {
+    label: string;
+    value: string;
+  }[];
+}) => {
+  if (!details) return;
+  return (
+    <ul className="flex flex-col gap-0.5">
+      {details?.map((item, index) => (
+        <li key={`product-details-${index}`}>
+          <dl className="text-xs text-muted-foreground">
+            <dt className="inline">{item.label}: </dt>
+            <dd className="inline">{item.value}</dd>
+          </dl>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const QuantityField = ({
+  form,
+  index,
+  onQuantityChange,
+}: {
+  form: ReturnType<typeof useForm<CartFormType>>;
+  index: number;
+  onQuantityChange: (n: number) => void;
+}) => {
+  return (
+    <Controller
+      control={form.control}
+      name={`products.${index}.quantity`}
+      render={({ field }) => (
+        <Field className="gap-3">
+          <div className="w-full max-w-28">
+            <QuantityInput
+              inputProps={field}
+              onValueChange={(newQty) => {
+                field.onChange(newQty);
+                onQuantityChange(newQty);
+              }}
+            />
+          </div>
+        </Field>
+      )}
+    />
+  );
+};
+
+const EditProduct = ({
+  variants,
+  onCancel,
+  currentVariant,
+}: EditProductProps) => {
+  const [variant, setVariant] = useState({
+    size: currentVariant.size,
+    color: currentVariant.color,
+  });
+
+  if (!variants) return;
+
+  return (
+    <div className="py-4">
+      <div className="space-y-6 border-y px-4 py-6">
+        <div className="flex w-full gap-6 max-sm:flex-col">
+          <ColorOptions currentValue={variant.color} {...variants.color} />
+          <SizeOptions currentValue={variant.size} {...variants.size} />
+        </div>
+        <div className="flex gap-3 max-sm:flex-col">
+          <Button
+            onClick={onCancel}
+            type="button"
+            variant="outline"
+            className="flex-1"
+          >
+            انصراف
+          </Button>
+          <Button type="button" className="flex-1">
+            ذخیره
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ColorOptions = ({ options, label, currentValue, name }: OptionsProps) => {
+  if (!options) return;
+
+  return (
+    <div className="space-y-3">
+      <Label className="text-sm font-bold">{label}</Label>
+      <RadioGroup name={name} className="flex flex-wrap gap-3">
+        {options.map((option) => (
+          <Label
+            key={option.id}
+            className="block size-9 cursor-pointer has-checked:ring-2"
+            style={{
+              backgroundColor: option.color,
+            }}
+          >
+            <RadioGroupItem
+              className="sr-only"
+              value={option.value}
+              id={option.id}
+              defaultChecked={currentValue === option.value}
+            />
+          </Label>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+};
+
+const SizeOptions = ({ options, label, currentValue, name }: OptionsProps) => {
+  if (!options) return;
+
+  const currentSizeLabel = options?.filter(
+    (item) => item.value === currentValue,
+  )[0]?.label;
+
+  return (
+    <div className="space-y-3">
+      <Label className="text-sm font-bold">{label}</Label>
+      <Select name={name}>
+        <SelectTrigger className="w-60">
+          <SelectValue placeholder={currentSizeLabel} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.id} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+export { ShoppingCart15 };
diff --git a/blocks/shopping-cart16.tsx b/blocks/shopping-cart16.tsx
new file mode 100644
index 0000000..d780a48
--- /dev/null
+++ b/blocks/shopping-cart16.tsx
@@ -0,0 +1,647 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import clsx from "clsx";
+import { ChevronUp, ShoppingBag, TicketPercent, X } from "lucide-react";
+import { Fragment, memo, useCallback, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Field } from "@/components/ui/field";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  details: {
+    label: string;
+    value: string;
+  }[];
+};
+
+type SuggestedProduct = {
+  name: string;
+  image: string;
+  price: ProductPrice;
+  link: string;
+};
+
+interface ShoppingCart16Props {
+  cartItems: CartItem[];
+  suggestedProducts: SuggestedProduct[];
+}
+
+interface CartItemProps extends CartItem {
+  index: number;
+  form: ReturnType<typeof useForm<CartFormType>>;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+interface suggestedProductsProps {
+  products: SuggestedProduct[];
+}
+
+type ProductCardProp = SuggestedProduct;
+
+interface CartItemActionsProps {
+  index: number;
+  form: ReturnType<typeof useForm<CartFormType>>;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کفش اسپرت زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
+    price: {
+      regular: 354.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "قرمز",
+      },
+      {
+        label: "سایز",
+        value: "36",
+      },
+    ],
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "سوئیشرت دو رنگ با لوگوی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "آبی و سفید",
+      },
+      {
+        label: "سایز",
+        value: "L",
+      },
+    ],
+  },
+  {
+    product_id: "product-3",
+    link: "#",
+    name: "هودی مشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+    price: {
+      regular: 84.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "مشکی",
+      },
+      {
+        label: "سایز",
+        value: "XL",
+      },
+    ],
+  },
+  {
+    product_id: "product-4",
+    link: "#",
+    name: "کیف چرمی زرشکی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: {
+      regular: 245.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "زرشکی",
+      },
+    ],
+  },
+  {
+    product_id: "product-5",
+    link: "#",
+    name: "کلاه فدورا کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-1.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "رنگ",
+        value: "بژ",
+      },
+    ],
+  },
+];
+
+const SUGGESTED_PRODUCTS: SuggestedProduct[] = [
+  {
+    name: "تی‌شرت سفید",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Tattooed-Streetwear-Look-2.png",
+    price: {
+      regular: 88.0,
+      currency: "IRR",
+    },
+  },
+  {
+    name: "هودی کلاسیک شهری",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-2.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+  },
+  {
+    name: "هودی استریت‌لاین",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Blue-Hoodie-2.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+  },
+  {
+    name: "هودی خیابانی هریتیج",
+    link: "#",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Maroon-Hoodie-2.png",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+  },
+];
+
+const cartFormSchema = z.object({
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CartFormType = z.infer<typeof cartFormSchema>;
+
+const ShoppingCart16 = ({
+  cartItems = CART_ITEMS,
+  suggestedProducts = SUGGESTED_PRODUCTS,
+}: ShoppingCart16Props) => {
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: 1,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm<CartFormType>({
+    resolver: zodResolver(cartFormSchema),
+    defaultValues: {
+      products: defaultProducts,
+    },
+  });
+
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const formItems = form.watch("products");
+
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+
+  const itemsCount = formItems && formItems.length ? formItems.length : 0;
+
+  const onSubmit = (data: CartFormType) => {
+    console.log(data);
+  };
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  return (
+    <Sheet defaultOpen>
+      <SheetContent
+        aria-describedby={undefined}
+        className="w-[90dvw] gap-0 sm:max-w-120 lg:max-w-150 [&>button]:hidden"
+      >
+        {itemsCount === 0 && (
+          <div className="absolute end-5 top-5">
+            <SheetClose asChild>
+              <Button
+                variant="ghost"
+                size="icon-lg"
+                className="rounded-full"
+                aria-label="بستن"
+              >
+                <X className="size-6.5" />
+              </Button>
+            </SheetClose>
+          </div>
+        )}
+        {itemsCount > 0 && (
+          <Fragment>
+            <SheetHeader className="flex flex-row items-center justify-between gap-4 bg-black px-3 py-3 md:px-5 lg:px-7.5">
+              <SheetTitle className="text-lg font-medium text-white">
+                سبد خرید ({itemsCount.toLocaleString("fa-IR")})
+              </SheetTitle>
+              <SheetClose asChild>
+                <Button
+                  variant="secondary"
+                  size="icon-sm"
+                  className="rounded-full"
+                  aria-label="بستن"
+                >
+                  <X className="size-4.5" />
+                </Button>
+              </SheetClose>
+            </SheetHeader>
+            <form className="contents" onSubmit={form.handleSubmit(onSubmit)}>
+              <div className="h-full overflow-auto px-3 py-4 md:px-5 lg:px-7.5">
+                <ul className="space-y-5">
+                  {fields.map((field, index) => {
+                    return (
+                      <li key={field.id}>
+                        <CartItem
+                          {...(cartItems.find(
+                            (p) => p.product_id === field.product_id,
+                          ) as CartItem)}
+                          form={form}
+                          onRemoveClick={() => handleRemove(index)()}
+                          onQuantityChange={(newQty: number) =>
+                            handleQuantityChange(index)(newQty)
+                          }
+                          index={index}
+                        />
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+              <SuggestedProducts products={suggestedProducts} />
+              <SheetFooter className="mt-0 block border-t px-3 py-2.5 md:px-5 lg:px-7.5">
+                <div className="space-y-3.5">
+                  <div className="space-y-1.5">
+                    <div className="flex items-center gap-2">
+                      <TicketPercent className="size-4.5" />
+                      <p className="text-xs leading-normal font-medium">
+                        FIRST10 ({formatPrice(20)} تخفیف)
+                      </p>
+                    </div>
+                    <div className="flex flex-wrap justify-between gap-2">
+                      <div className="text-sm font-medium">هزینه ارسال</div>
+                      <div className="text-sm font-medium">
+                        خرید بالای{" "}
+                        <b>{formatPrice(150, cartItems[0]?.price.currency)}</b>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex flex-wrap justify-between gap-2">
+                    <h3 className="text-base leading-none font-medium">
+                      جمع کل
+                    </h3>
+                    <div className="text-lg leading-none font-medium">
+                      {formatPrice(
+                        totalPrice ?? 0,
+                        cartItems[0]?.price.currency,
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex flex-wrap gap-2.5">
+                    <Button
+                      size="lg"
+                      variant="outline"
+                      className="flex-1 rounded-full"
+                      type="submit"
+                    >
+                      ادامه به تسویه
+                    </Button>
+                    <Button
+                      size="lg"
+                      className="flex-1 rounded-full"
+                      type="button"
+                    >
+                      مشاهده سبد
+                    </Button>
+                  </div>
+                  <small className="leading-normal font-medium text-muted-foreground">
+                    مالیات، تخفیف و هزینه ارسال در مرحله تسویه محاسبه می‌شود
+                  </small>
+                </div>
+              </SheetFooter>
+            </form>
+          </Fragment>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const CartItem = ({
+  image,
+  name,
+  link,
+  details,
+  price,
+  index,
+  form,
+  onRemoveClick,
+  onQuantityChange,
+}: CartItemProps) => {
+  const { regular, sale, currency } = price;
+
+  console.log(index);
+  return (
+    <div className="flex gap-4">
+      <div className="basis-21 lg:basis-27.5">
+        <a href={link}>
+          <AspectRatio
+            ratio={0.833353128}
+            className="overflow-hidden rounded-md"
+          >
+            <img
+              src={image}
+              alt={name}
+              className="block size-full object-cover object-center"
+            />
+          </AspectRatio>
+        </a>
+      </div>
+      <div className="max-sm:space-y-2.5 sm:contents">
+        <div className="flex-1 space-y-2">
+          <h4 className="text-sm font-medium transition-colors hover:text-foreground/80 lg:text-base">
+            <a href={link}>{name}</a>
+          </h4>
+          <ul className="flex flex-wrap gap-3">
+            {details.map((item, index) => (
+              <li key={`product-details-${index}`}>
+                <dl className="text-sm font-medium">
+                  <dt className="inline">{item.label}: </dt>
+                  <dd className="inline text-muted-foreground">{item.value}</dd>
+                </dl>
+              </li>
+            ))}
+          </ul>
+          <div className="flex flex-wrap items-center gap-x-1 pt-1.5 text-base font-medium">
+            {sale != null && (
+              <span className="leading-tight text-rose-600">
+                {formatPrice(sale, currency)}
+              </span>
+            )}
+            <span
+              className={
+                sale != null
+                  ? "leading-tight text-muted-foreground line-through"
+                  : "leading-tight"
+              }
+            >
+              {formatPrice(regular, currency)}
+            </span>
+          </div>
+        </div>
+        <CartItemActions
+          form={form}
+          onRemoveClick={onRemoveClick}
+          index={index}
+          onQuantityChange={onQuantityChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+const CartItemActions = memo(
+  ({ onRemoveClick, index, form, onQuantityChange }: CartItemActionsProps) => {
+    return (
+      <div className="flex flex-col justify-between gap-4 sm:items-end">
+        <Button
+          variant="link"
+          type="button"
+          className="h-fit w-fit px-0 py-0 text-muted-foreground hover:underline"
+          onClick={onRemoveClick}
+          aria-label="حذف از سبد"
+        >
+          حذف
+        </Button>
+        <div>
+          <QuantityField
+            form={form}
+            index={index}
+            onQuantityChange={onQuantityChange}
+          />
+        </div>
+      </div>
+    );
+  },
+  (prev, next) =>
+    prev.onRemoveClick !== next.onRemoveClick &&
+    prev.onQuantityChange !== next.onQuantityChange,
+);
+
+const QuantityField = memo(
+  ({
+    form,
+    index,
+    onQuantityChange,
+  }: {
+    form: ReturnType<typeof useForm<CartFormType>>;
+    index: number;
+    onQuantityChange: (n: number) => void;
+  }) => {
+    return (
+      <Controller
+        control={form.control}
+        name={`products.${index}.quantity`}
+        render={({ field }) => (
+          <Field className="gap-3">
+            <div className="w-full max-w-28">
+              <QuantityInput
+                inputProps={field}
+                onValueChange={(newQty) => {
+                  field.onChange(newQty);
+                  onQuantityChange(newQty);
+                }}
+              />
+            </div>
+          </Field>
+        )}
+      />
+    );
+  },
+);
+
+const ProductCard = ({ image, name, price, link }: ProductCardProp) => {
+  const { regular, sale, currency } = price;
+
+  return (
+    <Card className="h-full p-0">
+      <CardContent className="flex gap-2.5 p-2.5">
+        <div className="basis-20">
+          <a href={link}>
+            <AspectRatio ratio={0.8} className="overflow-hidden rounded-xl">
+              <img
+                src={image}
+                alt={name}
+                className="block size-full object-cover object-center"
+              />
+            </AspectRatio>
+          </a>
+        </div>
+        <div className="flex-1">
+          <div className="space-y-1">
+            <a
+              href={link}
+              className="inline-block text-sm leading-snug font-medium transition-colors duration-300 hover:text-rose-600 md:text-base"
+            >
+              {name}
+            </a>
+            <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-x-1 text-sm font-medium sm:text-base">
+                {sale != null && (
+                  <span className="leading-tight text-rose-600">
+                    {formatPrice(sale, currency)}
+                  </span>
+                )}
+                <span
+                  className={
+                    sale != null
+                      ? "leading-tight text-muted-foreground line-through"
+                      : "leading-tight"
+                  }
+                >
+                  {formatPrice(regular, currency)}
+                </span>
+              </div>
+              <Button
+                size="icon"
+                className="rounded-full"
+                aria-label={`افزودن ${name} به سبد`}
+              >
+                <ShoppingBag className="size-3.5" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const SuggestedProducts = ({ products }: suggestedProductsProps) => {
+  const [open, setOpen] = useState(true);
+
+  if (!products) return;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="border-t">
+      <CollapsibleTrigger className="flex w-full justify-between px-3 pt-4 pb-3 md:px-5 lg:px-7.5">
+        <h3 className="text-sm leading-relaxed font-medium">
+          پیشنهاد برای شما
+        </h3>
+        <ChevronUp
+          className={clsx(
+            "size-4 stroke-muted-foreground transition-transform duration-300 rtl:rotate-180",
+            open ? "rotate-0" : "rotate-180",
+          )}
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-3 pb-4 md:px-5 lg:px-7.5">
+        <div className="-mx-3 md:-mx-5 lg:-mx-7.5">
+          <div className="overflow-hidden px-7.5">
+            <Carousel
+              opts={{
+                align: "start",
+              }}
+              className="[&>div]:overflow-visible"
+            >
+              <CarouselContent>
+                {products.map((product, index) => (
+                  <CarouselItem
+                    className="basis-[75dvw] sm:basis-95"
+                    key={`product-img-${index}`}
+                  >
+                    <ProductCard {...product} />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export { ShoppingCart16 };
diff --git a/blocks/shopping-cart17.tsx b/blocks/shopping-cart17.tsx
new file mode 100644
index 0000000..b98ae6e
--- /dev/null
+++ b/blocks/shopping-cart17.tsx
@@ -0,0 +1,564 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import clsx from "clsx";
+import {
+  CheckCircle,
+  Heart,
+  HeartCrack,
+  PartyPopper,
+  PlusCircle,
+  X,
+} from "lucide-react";
+import { useCallback, useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useFieldArray,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import z from "zod";
+
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import { Alert, AlertTitle } from "@/components/ui/alert";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Field, FieldError } from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type EmptyCartData = {
+  title: string;
+  description: string;
+  cta: {
+    link: string;
+    text: string;
+  };
+};
+
+type EmptyCartProps = EmptyCartData;
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  details?: {
+    label: string;
+    value: string;
+  }[];
+};
+
+interface FullCartProps {
+  cartItems: CartItem[];
+  formItems: CartFormType["products"];
+  form: UseFormReturn<CartFormType>;
+}
+
+interface CartItemProps extends CartItem {
+  index: number;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+const EMPTY_CART_DATA = {
+  title: "سبد خرید شما خالی است",
+  description:
+    "سبد هنوز خالی است؛ همه محصولات ما را ببینید و اولین خرید خود را شروع کنید",
+  cta: {
+    link: "#",
+    text: "مشاهده محصولات",
+  },
+};
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کرم آبرسان لوماگلو",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-3.jpg",
+    price: {
+      regular: 49.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "100ml",
+      },
+    ],
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "ست مراقبت درخشان",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-amelie-chen-243775000-12352170-3.jpg",
+    price: {
+      regular: 140.0,
+      currency: "IRR",
+    },
+  },
+  {
+    product_id: "product-3",
+    link: "#",
+    name: "کرم جوان‌سازی تایم‌لس",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-carlos-diaz-216017-18350286-3.jpg",
+    price: {
+      regular: 84.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "240ml",
+      },
+    ],
+  },
+  {
+    product_id: "product-4",
+    link: "#",
+    name: "اسپری قفل‌کننده رطوبت",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-rdne-8903695-3.jpg",
+    price: {
+      regular: 245.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "250ml",
+      },
+    ],
+  },
+  {
+    product_id: "product-5",
+    link: "#",
+    name: "کرم شب هیدرابلوم",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-volkerthimm-19049367-3.jpg",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "200ml",
+      },
+    ],
+  },
+];
+
+const cartFormSchema = z.object({
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CartFormType = z.infer<typeof cartFormSchema>;
+
+const ShoppingCart17 = ({
+  emptyCartData = EMPTY_CART_DATA,
+  cartItems = CART_ITEMS,
+}) => {
+  const { title, description, cta } = emptyCartData;
+
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: 1,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm<CartFormType>({
+    resolver: zodResolver(cartFormSchema),
+    defaultValues: {
+      products: defaultProducts,
+    },
+  });
+
+  const formItems = form.watch("products");
+
+  const isEmpty = formItems.length === 0;
+
+  return (
+    <Sheet defaultOpen>
+      <SheetContent className="block w-[92dvw] [&>button]:hidden">
+        <div className="h-full">
+          <div className="absolute inset-x-0">
+            <div className="flex justify-end px-5 py-2">
+              <SheetClose asChild>
+                <Button
+                  size="icon-sm"
+                  variant="secondary"
+                  className="rounded-full"
+                  aria-label="بستن"
+                >
+                  <X />
+                </Button>
+              </SheetClose>
+            </div>
+          </div>
+          <div
+            style={
+              {
+                "--header-height": "7rem",
+                "--footer-height": "6.5rem",
+              } as React.CSSProperties
+            }
+            className="h-full pt-12"
+          >
+            {isEmpty ? (
+              <div className="mx-auto w-fit py-4">
+                <EmptyCart title={title} description={description} cta={cta} />
+              </div>
+            ) : (
+              <FullCart
+                form={form}
+                formItems={formItems}
+                cartItems={cartItems}
+              />
+            )}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+const EmptyCart = ({ title, description, cta }: EmptyCartProps) => {
+  return (
+    <Empty className="w-full max-w-70 !p-0">
+      <EmptyHeader>
+        <EmptyMedia>
+          <HeartCrack className="size-10 fill-rose-500 stroke-foreground stroke-2" />
+        </EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        <EmptyDescription className="font-light">
+          {description}
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent className="gap-3.5">
+        <Button asChild size="lg">
+          <a href={cta.link}>{cta.text}</a>
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+};
+
+const FullCart = ({ cartItems, form, formItems }: FullCartProps) => {
+  const itemsCount = formItems && formItems.length ? formItems.length : 0;
+
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+
+  const onSubmit = (data: CartFormType) => {
+    console.log(data);
+  };
+
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="space-y-4 px-5 py-4">
+        <SheetHeader className="p-0">
+          <div className="flex items-center justify-between gap-4">
+            <SheetTitle className="text-xl font-bold">
+              سبد خرید
+              <span className="ms-1 text-sm font-bold">
+                ({itemsCount.toLocaleString("fa-IR")})
+              </span>
+            </SheetTitle>
+            <Button variant="outline" size="sm" className="rounded-full">
+              <Heart />
+              علاقه‌مندی‌ها
+            </Button>
+          </div>
+        </SheetHeader>
+      </div>
+      <div className="flex-1">
+        <div className="hide-scrollbar h-[calc(100dvh-calc(var(--header-height)+var(--footer-height)))] space-y-5 overflow-auto px-5 pb-5">
+          <Alert className="items-center border-none bg-emerald-50 dark:bg-emerald-800/60">
+            <CheckCircle className="stroke-emerald-500 stroke-2" />
+            <AlertTitle className="line-clamp-none text-xs font-normal">
+              ارسال رایگان استاندارد به منزل برای شما فعال است
+            </AlertTitle>
+          </Alert>
+          <FormProvider {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+              <div className="space-y-5">
+                {fields.map((field, index) => (
+                  <CartItem
+                    key={field.id}
+                    index={index}
+                    onRemoveClick={() => handleRemove(index)()}
+                    onQuantityChange={(newQty: number) =>
+                      handleQuantityChange(index)(newQty)
+                    }
+                    {...(cartItems.find(
+                      (p) => p.product_id === field.product_id,
+                    ) as CartItem)}
+                  />
+                ))}
+              </div>
+            </form>
+          </FormProvider>
+          <PromoCode />
+        </div>
+      </div>
+      <SheetFooter className="p-5">
+        <div className="flex w-full items-center justify-between gap-3.5">
+          <p className="text-sm font-bold">جمع کل</p>
+          <span className="text-sm font-bold">
+            {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+          </span>
+        </div>
+        <Button>ادامه به تسویه</Button>
+      </SheetFooter>
+    </div>
+  );
+};
+
+const CartItem = ({
+  image,
+  name,
+  details,
+  index,
+  onQuantityChange,
+  onRemoveClick,
+  price,
+}: CartItemProps) => {
+  const { regular, currency } = price;
+
+  return (
+    <Card className="group relative border-none bg-transparent p-0 shadow-none">
+      <CardContent className="flex h-full gap-4 p-0">
+        <div className="shrink-0 grow-0 basis-20 sm:basis-36">
+          <div className="relative">
+            <AspectRatio ratio={0.8} className="overflow-hidden rounded-sm">
+              <img
+                src={image}
+                alt={name}
+                className="block size-full object-cover object-center"
+              />
+            </AspectRatio>
+            <div className="absolute start-1 top-1 z-10 transition-opacity duration-300 group-hover:opacity-100 md:opacity-0">
+              <Button
+                type="button"
+                size="icon-sm"
+                variant="secondary"
+                className="size-5.5 rounded-full"
+                onClick={onRemoveClick}
+                aria-label={`حذف ${name} از سبد`}
+              >
+                <X className="size-3 stroke-2" />
+                <span className="sr-only">حذف از سبد</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-1 flex-col items-start justify-between gap-3">
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <CardTitle className="text-xs leading-snug font-medium">
+                {name}
+              </CardTitle>
+              <span className="text-xs font-bold">
+                {formatPrice(regular, currency)}
+              </span>
+            </div>
+            {details && (
+              <ul>
+                {details?.map((item, index) => {
+                  const isLast = index === details.length - 1;
+                  return (
+                    <li className="inline" key={`product-details-${index}`}>
+                      <dl className="inline text-xs font-medium">
+                        <dt className="sr-only inline">{item.label}: </dt>
+                        <dd className="inline text-muted-foreground">
+                          {item.value}
+                        </dd>
+                        {!isLast && (
+                          <span className="mx-1 text-muted-foreground">/</span>
+                        )}
+                      </dl>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+            <QuantityField index={index} onQuantityChange={onQuantityChange} />
+          </div>
+          <Button variant="link" className="h-fit p-0 text-xs">
+            افزودن به علاقه‌مندی‌ها
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const QuantityField = ({
+  index,
+  onQuantityChange,
+}: {
+  index: number;
+  onQuantityChange: (n: number) => void;
+}) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={`products.${index}.quantity`}
+      control={control}
+      render={({ field }) => {
+        return (
+          <Field className="w-full max-w-28">
+            <QuantityInput
+              inputProps={field}
+              onValueChange={(newQty) => {
+                field.onChange(newQty);
+                onQuantityChange(newQty);
+              }}
+              className="rounded-none"
+            />
+          </Field>
+        );
+      }}
+    />
+  );
+};
+
+const promoCodeFormSchema = z.object({
+  promoCode: z.string().trim().min(3),
+});
+
+type promoCodeFormType = z.infer<typeof promoCodeFormSchema>;
+
+const PromoCode = () => {
+  const [showPromoInput, setShowPromoInput] = useState(false);
+  const promoForm = useForm<promoCodeFormType>({
+    resolver: zodResolver(promoCodeFormSchema),
+    defaultValues: {
+      promoCode: "",
+    },
+  });
+
+  const onSubmit = (data: promoCodeFormType) => {
+    console.log(data);
+  };
+
+  const handlePromoCodeForm = (checked: boolean) => {
+    setShowPromoInput(checked);
+  };
+
+  return (
+    <div className="space-y-5 py-5">
+      <div className="flex items-center gap-3">
+        <Checkbox onCheckedChange={handlePromoCodeForm} id="terms" />
+        <Label htmlFor="terms">افزودن کد تخفیف</Label>
+      </div>
+      <form
+        className={clsx(!showPromoInput && "sr-only")}
+        onSubmit={promoForm.handleSubmit(onSubmit)}
+      >
+        <Controller
+          name="promoCode"
+          control={promoForm.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <InputGroup>
+                <InputGroupAddon>
+                  <PartyPopper />
+                </InputGroupAddon>
+                <InputGroupInput
+                  {...field}
+                  id="promo-code"
+                  placeholder="کد تخفیف"
+                  aria-invalid={fieldState.invalid}
+                />
+                <InputGroupButton asChild>
+                  <Button
+                    variant="ghost"
+                    type="submit"
+                    aria-label="اعمال کد تخفیف"
+                  >
+                    <PlusCircle />
+                  </Button>
+                </InputGroupButton>
+              </InputGroup>
+              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+            </Field>
+          )}
+        />
+      </form>
+    </div>
+  );
+};
+
+export { ShoppingCart17 };
diff --git a/blocks/shopping-cart18.tsx b/blocks/shopping-cart18.tsx
new file mode 100644
index 0000000..7234713
--- /dev/null
+++ b/blocks/shopping-cart18.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { Minus, Plus, ShoppingBag, Trash2, X } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface CartItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+  variant?: string;
+}
+
+const DEFAULT_ITEMS: CartItem[] = [
+  {
+    id: "1",
+    name: "تی‌شرت پنبه‌ای کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/minimalist-tank-top-flatlay.png",
+    price: 29.99,
+    quantity: 2,
+    variant: "سفید / M",
+  },
+  {
+    id: "2",
+    name: "کیف چرمی کراس‌بادی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: 89.0,
+    quantity: 1,
+    variant: "زرشکی",
+  },
+];
+
+interface ShoppingCart18Props {
+  items?: CartItem[];
+  className?: string;
+}
+
+const ShoppingCart18 = ({
+  items: initialItems = DEFAULT_ITEMS,
+  className,
+}: ShoppingCart18Props) => {
+  const [items, setItems] = useState(initialItems);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const updateQuantity = (id: string, delta: number) => {
+    setItems((prev) =>
+      prev
+        .map((item) =>
+          item.id === id
+            ? { ...item, quantity: Math.max(0, item.quantity + delta) }
+            : item,
+        )
+        .filter((item) => item.quantity > 0),
+    );
+  };
+
+  const removeItem = (id: string) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat("fa-IR", {
+      style: "currency",
+      currency: "IRR",
+    }).format(price);
+  };
+
+  const subtotal = items.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0,
+  );
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
+
+  return (
+    <div className={cn("inline-flex", className)}>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className="relative"
+            aria-label="سبد خرید"
+          >
+            <ShoppingBag className="size-5" />
+            {itemCount > 0 && (
+              <span className="absolute -top-1 -end-1 flex size-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+                {itemCount.toLocaleString("fa-IR")}
+              </span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 p-0" align="end">
+          <div className="flex items-center justify-between border-b p-4">
+            <h3 className="font-semibold">
+              سبد خرید ({itemCount.toLocaleString("fa-IR")})
+            </h3>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              onClick={() => setIsOpen(false)}
+              aria-label="بستن"
+            >
+              <X className="size-4" />
+            </Button>
+          </div>
+
+          {items.length > 0 ? (
+            <>
+              <div className="max-h-80 overflow-y-auto p-4">
+                <div className="space-y-4">
+                  {items.map((item) => (
+                    <div key={item.id} className="flex gap-3">
+                      <div className="size-16 shrink-0 overflow-hidden rounded-md bg-muted">
+                        <AspectRatio ratio={1}>
+                          <img
+                            src={item.image}
+                            alt={item.name}
+                            className="size-full object-cover"
+                          />
+                        </AspectRatio>
+                      </div>
+                      <div className="flex min-w-0 flex-1 flex-col">
+                        <h4 className="truncate text-sm font-medium">
+                          {item.name}
+                        </h4>
+                        {item.variant && (
+                          <p className="text-xs text-muted-foreground">
+                            {item.variant}
+                          </p>
+                        )}
+                        <p className="text-sm font-semibold">
+                          {formatPrice(item.price)}
+                        </p>
+                        <div className="mt-auto flex items-center justify-between">
+                          <div className="flex items-center gap-1">
+                            <Button
+                              variant="outline"
+                              size="icon"
+                              className="size-6"
+                              onClick={() => updateQuantity(item.id, -1)}
+                              aria-label={`کاهش تعداد ${item.name}`}
+                            >
+                              <Minus className="size-3" />
+                            </Button>
+                            <span className="w-6 text-center text-sm">
+                              {item.quantity.toLocaleString("fa-IR")}
+                            </span>
+                            <Button
+                              variant="outline"
+                              size="icon"
+                              className="size-6"
+                              onClick={() => updateQuantity(item.id, 1)}
+                              aria-label={`افزایش تعداد ${item.name}`}
+                            >
+                              <Plus className="size-3" />
+                            </Button>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-6 text-muted-foreground hover:text-destructive"
+                            onClick={() => removeItem(item.id)}
+                            aria-label={`حذف ${item.name} از سبد`}
+                          >
+                            <Trash2 className="size-3" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="p-4">
+                <div className="mb-4 flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">جمع جزء</span>
+                  <span className="text-lg font-semibold">
+                    {formatPrice(subtotal)}
+                  </span>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Button className="w-full">ادامه به تسویه</Button>
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    مشاهده سبد
+                  </Button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="p-8 text-center">
+              <ShoppingBag className="mx-auto mb-3 size-10 text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">
+                سبد خرید شما خالی است
+              </p>
+              <Button
+                variant="outline"
+                className="mt-4"
+                onClick={() => setIsOpen(false)}
+              >
+                ادامه خرید
+              </Button>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export { ShoppingCart18 };
diff --git a/blocks/shopping-cart19.tsx b/blocks/shopping-cart19.tsx
new file mode 100644
index 0000000..dddf26a
--- /dev/null
+++ b/blocks/shopping-cart19.tsx
@@ -0,0 +1,348 @@
+"use client";
+
+import { Minus, Plus, ShoppingBag, Tag, Truck, X } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+interface CartItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+  variant?: string;
+}
+
+interface UpsellProduct {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+}
+
+const DEFAULT_ITEMS: CartItem[] = [
+  {
+    id: "1",
+    name: "هدفون بی‌سیم نویزکنسل",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+    price: 249.99,
+    quantity: 1,
+  },
+  {
+    id: "2",
+    name: "کیف چرمی پریمیوم",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Watch-on-Womans-Wrist-1.png",
+    price: 79.0,
+    quantity: 1,
+  },
+];
+
+const DEFAULT_UPSELLS: UpsellProduct[] = [
+  {
+    id: "u1",
+    name: "پایه هدفون",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    price: 29.99,
+  },
+  {
+    id: "u2",
+    name: "کیف حمل",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    price: 39.99,
+  },
+];
+
+const FREE_SHIPPING_THRESHOLD = 150;
+
+interface ShoppingCart19Props {
+  items?: CartItem[];
+  upsells?: UpsellProduct[];
+  className?: string;
+}
+
+const ShoppingCart19 = ({
+  items: initialItems = DEFAULT_ITEMS,
+  upsells = DEFAULT_UPSELLS,
+  className,
+}: ShoppingCart19Props) => {
+  const [items, setItems] = useState(initialItems);
+  const [promoCode, setPromoCode] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const updateQuantity = (id: string, delta: number) => {
+    setItems((prev) =>
+      prev
+        .map((item) =>
+          item.id === id
+            ? { ...item, quantity: Math.max(0, item.quantity + delta) }
+            : item,
+        )
+        .filter((item) => item.quantity > 0),
+    );
+  };
+
+  const removeItem = (id: string) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const addUpsell = (product: UpsellProduct) => {
+    const existing = items.find((item) => item.id === product.id);
+    if (existing) {
+      updateQuantity(product.id, 1);
+    } else {
+      setItems((prev) => [...prev, { ...product, quantity: 1 }]);
+    }
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat("fa-IR", {
+      style: "currency",
+      currency: "IRR",
+    }).format(price);
+  };
+
+  const subtotal = items.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0,
+  );
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
+  const freeShippingProgress = Math.min(
+    (subtotal / FREE_SHIPPING_THRESHOLD) * 100,
+    100,
+  );
+  const amountToFreeShipping = FREE_SHIPPING_THRESHOLD - subtotal;
+
+  return (
+    <div className={cn("inline-flex", className)}>
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className="relative"
+            aria-label="سبد خرید"
+          >
+            <ShoppingBag className="size-5" />
+            {itemCount > 0 && (
+              <span className="absolute -top-1 -end-1 flex size-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+                {itemCount.toLocaleString("fa-IR")}
+              </span>
+            )}
+          </Button>
+        </SheetTrigger>
+        <SheetContent className="flex w-full flex-col p-0 sm:max-w-md">
+          <SheetHeader className="border-b p-4">
+            <SheetTitle>
+              سبد خرید ({itemCount.toLocaleString("fa-IR")})
+            </SheetTitle>
+          </SheetHeader>
+
+          {items.length > 0 ? (
+            <>
+              <div className="border-b bg-muted/30 p-4">
+                {subtotal >= FREE_SHIPPING_THRESHOLD ? (
+                  <div className="flex items-center gap-2 text-sm text-emerald-600">
+                    <Truck className="size-4" />
+                    <span className="font-medium">ارسال رایگان برای شما فعال شد!</span>
+                  </div>
+                ) : (
+                  <>
+                    <div className="mb-2 flex items-center gap-2 text-sm">
+                      <Truck className="size-4 text-muted-foreground" />
+                      <span>
+                        فقط{" "}
+                        <span className="font-semibold">
+                          {formatPrice(amountToFreeShipping)}
+                        </span>{" "}
+                        دیگر تا ارسال رایگان
+                      </span>
+                    </div>
+                    <Progress value={freeShippingProgress} className="h-2" />
+                  </>
+                )}
+              </div>
+
+              <ScrollArea className="flex-1">
+                <div className="p-4">
+                  <div className="space-y-4">
+                    {items.map((item) => (
+                      <div key={item.id} className="flex gap-3">
+                        <div className="size-20 shrink-0 overflow-hidden rounded-lg bg-muted">
+                          <AspectRatio ratio={1}>
+                            <img
+                              src={item.image}
+                              alt={item.name}
+                              className="size-full object-cover"
+                            />
+                          </AspectRatio>
+                        </div>
+                        <div className="flex min-w-0 flex-1 flex-col">
+                          <div className="flex items-start justify-between gap-2">
+                            <h4 className="text-sm leading-tight font-medium">
+                              {item.name}
+                            </h4>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-6 shrink-0"
+                              onClick={() => removeItem(item.id)}
+                              aria-label={`حذف ${item.name} از سبد`}
+                            >
+                              <X className="size-3" />
+                            </Button>
+                          </div>
+                          {item.variant && (
+                            <p className="text-xs text-muted-foreground">
+                              {item.variant}
+                            </p>
+                          )}
+                          <div className="mt-auto flex items-center justify-between pt-2">
+                            <div className="flex items-center rounded-md border">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="size-8 rounded-none"
+                                onClick={() => updateQuantity(item.id, -1)}
+                                aria-label={`کاهش تعداد ${item.name}`}
+                              >
+                                <Minus className="size-3" />
+                              </Button>
+                              <span className="w-8 text-center text-sm">
+                                {item.quantity.toLocaleString("fa-IR")}
+                              </span>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="size-8 rounded-none"
+                                onClick={() => updateQuantity(item.id, 1)}
+                                aria-label={`افزایش تعداد ${item.name}`}
+                              >
+                                <Plus className="size-3" />
+                              </Button>
+                            </div>
+                            <span className="font-semibold">
+                              {formatPrice(item.price * item.quantity)}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {upsells.length > 0 && (
+                    <div className="mt-6">
+                      <p className="mb-3 text-sm font-medium">
+                        شاید این‌ها را هم بپسندید
+                      </p>
+                      <div className="flex gap-3 overflow-x-auto pb-2">
+                        {upsells.map((product) => (
+                          <div
+                            key={product.id}
+                            className="w-28 shrink-0 rounded-lg border p-2"
+                          >
+                            <div className="mb-2 aspect-square overflow-hidden rounded bg-muted">
+                              <img
+                                src={product.image}
+                                alt={product.name}
+                                className="size-full object-cover"
+                              />
+                            </div>
+                            <p className="truncate text-xs font-medium">
+                              {product.name}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {formatPrice(product.price)}
+                            </p>
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="mt-2 h-7 w-full text-xs"
+                              onClick={() => addUpsell(product)}
+                              aria-label={`افزودن ${product.name}`}
+                            >
+                              افزودن
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ScrollArea>
+
+              <div className="border-t p-4">
+                <div className="mb-4 flex gap-2">
+                  <div className="relative flex-1">
+                    <Tag className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      placeholder="کد تخفیف"
+                      value={promoCode}
+                      onChange={(e) => setPromoCode(e.target.value)}
+                      className="ps-9"
+                    />
+                  </div>
+                  <Button variant="outline">اعمال</Button>
+                </div>
+
+                <Separator className="mb-4" />
+
+                <div className="mb-4 space-y-2">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">جمع جزء</span>
+                    <span>{formatPrice(subtotal)}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">هزینه ارسال</span>
+                    <span>
+                      {subtotal >= FREE_SHIPPING_THRESHOLD
+                        ? "رایگان"
+                        : "محاسبه در مرحله تسویه"}
+                    </span>
+                  </div>
+                  <Separator />
+                  <div className="flex justify-between font-semibold">
+                    <span>جمع کل</span>
+                    <span>{formatPrice(subtotal)}</span>
+                  </div>
+                </div>
+
+                <Button className="w-full" size="lg">
+                  ادامه به تسویه · {formatPrice(subtotal)}
+                </Button>
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-1 flex-col items-center justify-center p-8 text-center">
+              <ShoppingBag className="mb-4 size-12 text-muted-foreground" />
+              <h3 className="font-semibold">سبد خرید شما خالی است</h3>
+              <p className="mt-1 text-sm text-muted-foreground">
+                برای شروع، محصولی به سبد اضافه کنید
+              </p>
+              <Button className="mt-6" onClick={() => setIsOpen(false)}>
+                ادامه خرید
+              </Button>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+};
+
+export { ShoppingCart19 };
diff --git a/blocks/shopping-cart2.tsx b/blocks/shopping-cart2.tsx
new file mode 100644
index 0000000..354a8db
--- /dev/null
+++ b/blocks/shopping-cart2.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import { Minus, Plus, ShoppingCart, Trash2 } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+
+interface CartItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+  variant?: string;
+}
+
+const DEFAULT_ITEMS: CartItem[] = [
+  {
+    id: "1",
+    name: "کفش ورزشی بژ مینیمال",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+    price: 120.0,
+    quantity: 1,
+    variant: "سایز: ۳۶ اروپایی",
+  },
+  {
+    id: "2",
+    name: "بلوز آبی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+    price: 140.0,
+    quantity: 1,
+    variant: "سایز: S",
+  },
+  {
+    id: "3",
+    name: "کلاه فدورا کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+    price: 84.0,
+    quantity: 1,
+    variant: "رنگ: بژ",
+  },
+];
+
+const ShoppingCart2 = ({
+  initialItems = DEFAULT_ITEMS,
+}: {
+  initialItems?: CartItem[];
+}) => {
+  const [items, setItems] = useState(initialItems);
+
+  const updateQuantity = (id: string, delta: number) => {
+    setItems(
+      items
+        .map((item) =>
+          item.id === id
+            ? { ...item, quantity: Math.max(0, item.quantity + delta) }
+            : item,
+        )
+        .filter((item) => item.quantity > 0),
+    );
+  };
+
+  const removeItem = (id: string) => {
+    setItems(items.filter((item) => item.id !== id));
+  };
+
+  const subtotal = items.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0,
+  );
+  const shipping = 9.99;
+  const total = subtotal + shipping;
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat("fa-IR", {
+      style: "currency",
+      currency: "IRR",
+    }).format(price);
+  };
+
+  if (items.length === 0) {
+    return (
+      <section className="py-32">
+        <div className="container max-w-lg text-center">
+          <h1 className="mb-4 text-xl font-semibold">سبد خرید شما خالی است</h1>
+          <p className="mb-8 text-muted-foreground">
+            هنوز محصولی به سبد اضافه نکرده‌اید.
+          </p>
+          <Button asChild>
+            <a href="#">ادامه خرید</a>
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-32">
+      <div className="container">
+        <h1 className="mb-8 text-3xl font-semibold">سبد خرید</h1>
+
+        <div className="grid gap-8 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <div className="space-y-4">
+              {items.map((item) => (
+                <div
+                  key={item.id}
+                  className="flex gap-4 rounded-lg border bg-card p-4"
+                >
+                  <div className="w-24 shrink-0">
+                    <AspectRatio
+                      ratio={1}
+                      className="overflow-hidden rounded-md bg-muted"
+                    >
+                      <img
+                        src={item.image}
+                        alt={item.name}
+                        className="size-full object-cover"
+                      />
+                    </AspectRatio>
+                  </div>
+
+                  <div className="flex flex-1 flex-col justify-between">
+                    <div>
+                      <h3 className="font-medium">{item.name}</h3>
+                      {item.variant && (
+                        <p className="text-sm text-muted-foreground">
+                          {item.variant}
+                        </p>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-8"
+                        onClick={() => updateQuantity(item.id, -1)}
+                        aria-label={`کاهش تعداد ${item.name}`}
+                      >
+                        <Minus className="size-3" />
+                      </Button>
+                      <span className="w-8 text-center">
+                        {item.quantity.toLocaleString("fa-IR")}
+                      </span>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-8"
+                        onClick={() => updateQuantity(item.id, 1)}
+                        aria-label={`افزایش تعداد ${item.name}`}
+                      >
+                        <Plus className="size-3" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col items-end justify-between">
+                    <div className="text-end">
+                      <p className="font-semibold">
+                        {formatPrice(item.price * item.quantity)}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {formatPrice(item.price)} هر عدد
+                      </p>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-muted-foreground"
+                      onClick={() => removeItem(item.id)}
+                      aria-label={`حذف ${item.name} از سبد`}
+                    >
+                      <Trash2 className="me-1 size-4" />
+                      حذف
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="lg:col-span-1">
+            <div className="rounded-lg border bg-card p-6">
+              <h2 className="mb-4 text-lg font-semibold">خلاصه سفارش</h2>
+
+              <div className="space-y-3">
+                <div className="flex justify-between text-sm">
+                  <span className="flex items-center gap-1.5 text-muted-foreground">
+                    <ShoppingCart className="size-4" />
+                    {items.length.toLocaleString("fa-IR")} مورد
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">جمع جزء</span>
+                  <span>{formatPrice(subtotal)}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">هزینه ارسال</span>
+                  <span>{formatPrice(shipping)}</span>
+                </div>
+
+                <Separator />
+
+                <div className="flex justify-between font-semibold">
+                  <span>جمع کل</span>
+                  <span>{formatPrice(total)}</span>
+                </div>
+              </div>
+
+              <Button size="lg" className="mt-6 w-full">
+                ادامه به تسویه
+              </Button>
+
+              <p className="mt-4 text-center text-xs text-muted-foreground">
+                مالیات در مرحله تسویه محاسبه می‌شود
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ShoppingCart2 };
diff --git a/blocks/shopping-cart20.tsx b/blocks/shopping-cart20.tsx
new file mode 100644
index 0000000..974b756
--- /dev/null
+++ b/blocks/shopping-cart20.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { ShoppingBag, X } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface CartItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+}
+
+const DEFAULT_ITEMS: CartItem[] = [
+  {
+    id: "1",
+    name: "تی‌شرت پنبه‌ای گردن‌گرد",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/minimalist-tank-top-flatlay.png",
+    price: 35.0,
+    quantity: 1,
+  },
+  {
+    id: "2",
+    name: "شلوار چینو فیت اسلیم",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-jay-soundo-2148060180-30624171-2.png",
+    price: 68.0,
+    quantity: 1,
+  },
+];
+
+interface ShoppingCart20Props {
+  items?: CartItem[];
+  className?: string;
+}
+
+const ShoppingCart20 = ({
+  items: initialItems = DEFAULT_ITEMS,
+  className,
+}: ShoppingCart20Props) => {
+  const [items, setItems] = useState(initialItems);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const removeItem = (id: string) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat("fa-IR", {
+      style: "currency",
+      currency: "IRR",
+    }).format(price);
+  };
+
+  const subtotal = items.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0,
+  );
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
+
+  return (
+    <div className={cn("inline-flex", className)}>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="relative gap-2"
+            aria-label="سبد خرید"
+          >
+            <ShoppingBag className="size-4" />
+            <span className="hidden sm:inline">سبد خرید</span>
+            {itemCount > 0 && (
+              <span className="flex size-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+                {itemCount.toLocaleString("fa-IR")}
+              </span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-72 p-0" align="end">
+          {items.length > 0 ? (
+            <>
+              <div className="max-h-64 overflow-y-auto p-3">
+                <div className="space-y-3">
+                  {items.map((item) => (
+                    <div key={item.id} className="group flex gap-3">
+                      <div className="size-12 shrink-0 overflow-hidden rounded bg-muted">
+                        <AspectRatio ratio={1}>
+                          <img
+                            src={item.image}
+                            alt={item.name}
+                            className="size-full object-cover"
+                          />
+                        </AspectRatio>
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-start justify-between gap-1">
+                          <h4 className="truncate text-sm font-medium">
+                            {item.name}
+                          </h4>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                            onClick={() => removeItem(item.id)}
+                            aria-label={`حذف ${item.name} از سبد`}
+                          >
+                            <X className="size-3" />
+                          </Button>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs text-muted-foreground">
+                            تعداد: {item.quantity.toLocaleString("fa-IR")}
+                          </span>
+                          <span className="text-sm font-medium">
+                            {formatPrice(item.price)}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="border-t bg-muted/30 p-3">
+                <div className="mb-3 flex items-center justify-between">
+                  <span className="text-sm">جمع جزء</span>
+                  <span className="font-semibold">{formatPrice(subtotal)}</span>
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    مشاهده سبد
+                  </Button>
+                  <Button size="sm">ادامه به تسویه</Button>
+                </div>
+
+                <div className="mt-3 border-t pt-3">
+                  <p className="mb-2 text-center text-xs text-muted-foreground">
+                    پرداخت سریع
+                  </p>
+                  <div className="grid grid-cols-2 gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-9 bg-black text-white hover:bg-black/90 hover:text-white"
+                    >
+                      پرداخت موبایلی
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-9 bg-[#ffc439] text-black hover:bg-[#f5bb36] hover:text-black"
+                    >
+                      کیف پول دیجیتال
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="p-6 text-center">
+              <ShoppingBag className="mx-auto mb-2 size-8 text-muted-foreground" />
+              <p className="text-sm font-medium">سبد خرید خالی است</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                برای شروع، محصولی به سبد اضافه کنید
+              </p>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export { ShoppingCart20 };
diff --git a/blocks/shopping-cart3.tsx b/blocks/shopping-cart3.tsx
new file mode 100644
index 0000000..9ecc197
--- /dev/null
+++ b/blocks/shopping-cart3.tsx
@@ -0,0 +1,359 @@
+"use client";
+
+import {
+  Minus,
+  Plus,
+  RefreshCcw,
+  Shield,
+  ShoppingCart,
+  Tag,
+  Trash2,
+  Truck,
+} from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+
+interface CartItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  quantity: number;
+  variant?: string;
+}
+
+const DEFAULT_ITEMS: CartItem[] = [
+  {
+    id: "1",
+    name: "کفش ورزشی بژ مینیمال",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
+    price: 120.0,
+    quantity: 1,
+    variant: "سایز: ۳۶ اروپایی",
+  },
+  {
+    id: "2",
+    name: "بلوز آبی گلدوزی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
+    price: 140.0,
+    quantity: 1,
+    variant: "سایز: S",
+  },
+  {
+    id: "3",
+    name: "کلاه فدورا کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
+    price: 84.0,
+    quantity: 1,
+    variant: "رنگ: بژ",
+  },
+];
+
+const ShoppingCart3 = ({
+  initialItems = DEFAULT_ITEMS,
+}: {
+  initialItems?: CartItem[];
+}) => {
+  const [items, setItems] = useState(initialItems);
+  const [promoCode, setPromoCode] = useState("");
+  const [appliedPromo, setAppliedPromo] = useState<string | null>(null);
+  const [promoError, setPromoError] = useState<string | null>(null);
+
+  const updateQuantity = (id: string, delta: number) => {
+    setItems(
+      items
+        .map((item) =>
+          item.id === id
+            ? { ...item, quantity: Math.max(0, item.quantity + delta) }
+            : item,
+        )
+        .filter((item) => item.quantity > 0),
+    );
+  };
+
+  const removeItem = (id: string) => {
+    setItems(items.filter((item) => item.id !== id));
+  };
+
+  const applyPromoCode = () => {
+    setPromoError(null);
+    if (!promoCode.trim()) {
+      setPromoError("لطفاً کد تخفیف را وارد کنید");
+      return;
+    }
+    if (promoCode.toUpperCase() === "SAVE10") {
+      setAppliedPromo(promoCode.toUpperCase());
+      setPromoCode("");
+    } else {
+      setPromoError("کد تخفیف نامعتبر است");
+    }
+  };
+
+  const removePromo = () => {
+    setAppliedPromo(null);
+    setPromoError(null);
+  };
+
+  const subtotal = items.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0,
+  );
+  const discount = appliedPromo ? subtotal * 0.1 : 0;
+  const shipping = 9.99;
+  const total = subtotal - discount + shipping;
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat("fa-IR", {
+      style: "currency",
+      currency: "IRR",
+    }).format(price);
+  };
+
+  if (items.length === 0) {
+    return (
+      <section className="py-32">
+        <div className="container max-w-lg text-center">
+          <div className="mx-auto mb-6 flex size-16 items-center justify-center rounded-full bg-muted">
+            <ShoppingCart className="size-8 text-muted-foreground" />
+          </div>
+          <h1 className="mb-4 text-xl font-semibold">سبد خرید شما خالی است</h1>
+          <p className="mb-8 text-muted-foreground">
+            هنوز محصولی به سبد اضافه نکرده‌اید.
+          </p>
+          <Button asChild>
+            <a href="#">ادامه خرید</a>
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-32">
+      <div className="container">
+        <h1 className="mb-8 text-3xl font-semibold">سبد خرید</h1>
+
+        <div className="grid gap-8 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <div className="space-y-6">
+              {items.map((item) => (
+                <div
+                  key={item.id}
+                  className="flex gap-6 rounded-xl border bg-card p-5"
+                >
+                  <div className="w-36 shrink-0">
+                    <AspectRatio
+                      ratio={1}
+                      className="overflow-hidden rounded-lg bg-muted"
+                    >
+                      <img
+                        src={item.image}
+                        alt={item.name}
+                        className="size-full object-cover"
+                      />
+                    </AspectRatio>
+                  </div>
+
+                  <div className="flex flex-1 flex-col justify-between py-1">
+                    <div className="space-y-1">
+                      <h3 className="text-lg font-medium">{item.name}</h3>
+                      {item.variant && (
+                        <p className="text-sm text-muted-foreground">
+                          {item.variant}
+                        </p>
+                      )}
+                      <p className="text-xs text-muted-foreground">
+                        شناسه کالا: {item.id.padStart(6, "0")}
+                      </p>
+                      <Badge
+                        variant="secondary"
+                        className="mt-2 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
+                      >
+                        موجود
+                      </Badge>
+                    </div>
+
+                    <div className="flex items-center gap-3 pt-4">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-9"
+                        onClick={() => updateQuantity(item.id, -1)}
+                        aria-label={`کاهش تعداد ${item.name}`}
+                      >
+                        <Minus className="size-4" />
+                      </Button>
+                      <span className="w-10 text-center text-lg font-medium">
+                        {item.quantity.toLocaleString("fa-IR")}
+                      </span>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-9"
+                        onClick={() => updateQuantity(item.id, 1)}
+                        aria-label={`افزایش تعداد ${item.name}`}
+                      >
+                        <Plus className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col items-end justify-between py-1">
+                    <div className="text-end">
+                      <p className="text-xl font-semibold">
+                        {formatPrice(item.price * item.quantity)}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {formatPrice(item.price)} هر عدد
+                      </p>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-muted-foreground hover:text-destructive"
+                      onClick={() => removeItem(item.id)}
+                      aria-label={`حذف ${item.name} از سبد`}
+                    >
+                      <Trash2 className="me-1.5 size-4" />
+                      حذف
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="lg:col-span-1">
+            <div className="rounded-lg border bg-card p-6">
+              <h2 className="mb-4 text-lg font-semibold">خلاصه سفارش</h2>
+
+              <div className="mb-4">
+                {appliedPromo ? (
+                  <div className="flex items-center justify-between rounded-md bg-green-50 px-3 py-2 dark:bg-green-950">
+                    <div className="flex items-center gap-2">
+                      <Badge
+                        variant="secondary"
+                        className="gap-1 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
+                      >
+                        <Tag className="size-3" />
+                        {appliedPromo}
+                      </Badge>
+                      <span className="text-sm text-green-700 dark:text-green-300">
+                        ۱۰٪ تخفیف
+                      </span>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-1 text-muted-foreground hover:text-foreground"
+                      onClick={removePromo}
+                      aria-label="حذف کد تخفیف"
+                    >
+                      حذف
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    <div className="flex gap-2">
+                      <Input
+                        placeholder="کد تخفیف"
+                        value={promoCode}
+                        onChange={(e) => {
+                          setPromoCode(e.target.value);
+                          setPromoError(null);
+                        }}
+                        className="flex-1"
+                      />
+                      <Button variant="outline" onClick={applyPromoCode}>
+                        اعمال
+                      </Button>
+                    </div>
+                    {promoError && (
+                      <p className="text-sm text-destructive">{promoError}</p>
+                    )}
+                    <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      کد
+                      <Badge variant="outline" className="font-mono text-xs">
+                        SAVE10
+                      </Badge>
+                      را برای ۱۰٪ تخفیف امتحان کنید
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <Separator className="my-4" />
+
+              <div className="space-y-3">
+                <div className="flex justify-between text-sm">
+                  <span className="flex items-center gap-1.5 text-muted-foreground">
+                    <ShoppingCart className="size-4" />
+                    {items.length.toLocaleString("fa-IR")} مورد
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">جمع جزء</span>
+                  <span>{formatPrice(subtotal)}</span>
+                </div>
+                {discount > 0 && (
+                  <div className="flex justify-between text-sm text-green-600">
+                    <span>تخفیف</span>
+                    <span>-{formatPrice(discount)}</span>
+                  </div>
+                )}
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">هزینه ارسال</span>
+                  <span>{formatPrice(shipping)}</span>
+                </div>
+
+                <Separator />
+
+                <div className="flex justify-between font-semibold">
+                  <span>جمع کل</span>
+                  <span>{formatPrice(total)}</span>
+                </div>
+              </div>
+
+              <Button size="lg" className="mt-6 w-full">
+                ادامه به تسویه
+              </Button>
+
+              <p className="mt-4 text-center text-xs text-muted-foreground">
+                مالیات در مرحله تسویه محاسبه می‌شود
+              </p>
+
+              <Separator className="my-6" />
+
+              <div className="space-y-3">
+                <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                  <Truck className="size-5 shrink-0" />
+                  <span>
+                    ارسال رایگان برای سفارش‌های بالای {formatPrice(150)}
+                  </span>
+                </div>
+                <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                  <RefreshCcw className="size-5 shrink-0" />
+                  <span>بازگشت رایگان تا ۳۰ روز</span>
+                </div>
+                <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                  <Shield className="size-5 shrink-0" />
+                  <span>پرداخت امن</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { ShoppingCart3 };
diff --git a/blocks/shopping-cart7.tsx b/blocks/shopping-cart7.tsx
new file mode 100644
index 0000000..21f7701
--- /dev/null
+++ b/blocks/shopping-cart7.tsx
@@ -0,0 +1,431 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowUpRight, PackageOpen, X } from "lucide-react";
+import { useCallback } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useFieldArray,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import z from "zod";
+
+import QuantityInput from "@/components/shadcnblocks/quantity-input";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Empty,
+  EmptyContent,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Field } from "@/components/ui/field";
+
+interface ProductPrice {
+  regular: number;
+  sale?: number;
+  currency: string;
+}
+
+type CartItem = {
+  product_id: string;
+  link: string;
+  name: string;
+  image: string;
+  price: ProductPrice;
+  details?: {
+    label: string;
+    value: string;
+  }[];
+};
+
+interface ShoppingCart7Props {
+  cartItems: CartItem[];
+}
+
+interface FullCartProps {
+  cartItems: CartItem[];
+  formItems: CartFormType["products"];
+  form: UseFormReturn<CartFormType>;
+}
+
+interface CartItemProps extends CartItem {
+  index: number;
+  quantity: number;
+  onRemoveClick: () => void;
+  onQuantityChange: (newQty: number) => void;
+}
+
+const formatPrice = (price: number, currency = "IRR") =>
+  new Intl.NumberFormat("fa-IR", {
+    style: "currency",
+    currency,
+  }).format(price);
+
+const CART_ITEMS: CartItem[] = [
+  {
+    product_id: "product-1",
+    link: "#",
+    name: "کرم آبرسان لوماگلو",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/point-normal-Xp0bTCLD07k-unsplash-3.jpg",
+    price: {
+      regular: 49.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "100ml",
+      },
+    ],
+  },
+  {
+    product_id: "product-2",
+    link: "#",
+    name: "ست مراقبت درخشان",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-amelie-chen-243775000-12352170-3.jpg",
+    price: {
+      regular: 140.0,
+      currency: "IRR",
+    },
+  },
+  {
+    product_id: "product-3",
+    link: "#",
+    name: "کرم جوان‌سازی تایم‌لس",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-carlos-diaz-216017-18350286-3.jpg",
+    price: {
+      regular: 84.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "240ml",
+      },
+    ],
+  },
+  {
+    product_id: "product-4",
+    link: "#",
+    name: "اسپری قفل‌کننده رطوبت",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-rdne-8903695-3.jpg",
+    price: {
+      regular: 245.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "250ml",
+      },
+    ],
+  },
+  {
+    product_id: "product-5",
+    link: "#",
+    name: "کرم شب هیدرابلوم",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/skin-care-product/pexels-volkerthimm-19049367-3.jpg",
+    price: {
+      regular: 499.0,
+      currency: "IRR",
+    },
+    details: [
+      {
+        label: "سایز",
+        value: "200ml",
+      },
+    ],
+  },
+];
+
+const cartFormSchema = z.object({
+  products: z
+    .object({
+      product_id: z.string(),
+      quantity: z.number(),
+      price: z.number(),
+    })
+    .array(),
+});
+
+type CartFormType = z.infer<typeof cartFormSchema>;
+
+const ShoppingCart7 = ({ cartItems = CART_ITEMS }: ShoppingCart7Props) => {
+  const defaultProducts = cartItems.map((item) => ({
+    product_id: item.product_id,
+    quantity: 1,
+    price: item.price.sale ?? item.price.regular,
+  }));
+
+  const form = useForm<CartFormType>({
+    resolver: zodResolver(cartFormSchema),
+    defaultValues: {
+      products: defaultProducts,
+    },
+  });
+
+  const formItems = form.watch("products");
+
+  const isEmpty = formItems.length === 0;
+
+  return (
+    <Dialog defaultOpen>
+      <DialogContent
+        aria-describedby={undefined}
+        style={
+          {
+            "--dialog-space-y": "1.25rem",
+          } as React.CSSProperties
+        }
+        className="max-h-[calc(100dvh-calc(2*var(--dialog-space-y)))] gap-0 p-0 sm:max-w-240"
+      >
+        <div className=""></div>
+        {isEmpty ? (
+          <EmptyCart />
+        ) : (
+          <FullCart form={form} formItems={formItems} cartItems={cartItems} />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const EmptyCart = () => {
+  return (
+    <Empty>
+      <EmptyContent className="gap-3.5">
+        <EmptyMedia>
+          <PackageOpen className="size-25 stroke-muted-foreground stroke-[0.03rem]" />
+        </EmptyMedia>
+
+        <EmptyTitle className="text-center text-sm text-muted-foreground">
+          محصولی در سبد نیست
+        </EmptyTitle>
+      </EmptyContent>
+    </Empty>
+  );
+};
+
+const FullCart = ({ cartItems, form, formItems }: FullCartProps) => {
+  const itemsCount = formItems && formItems.length ? formItems.length : 0;
+  const totalPrice = formItems?.reduce(
+    (sum, p) => sum + p.price * p.quantity,
+    0,
+  );
+
+  const onSubmit = (data: CartFormType) => {
+    console.log(data);
+  };
+
+  const { fields, remove, update } = useFieldArray({
+    control: form.control,
+    name: "products",
+  });
+
+  const handleQuantityChange = useCallback(
+    (index: number) => (newQty: number) =>
+      update(index, { ...fields[index], quantity: newQty }),
+    [update, fields],
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div
+          style={
+            {
+              "--header-height": "4.1875rem",
+              "--footer-height": "6.125rem",
+            } as React.CSSProperties
+          }
+          className="flex max-h-full flex-col"
+        >
+          <DialogHeader className="h-[var(--header-height)] border-b p-3.5">
+            <DialogTitle className="text-xl">
+              سبد خرید
+              <sup className="ms-3.5 align-[0.5rem] text-lg">
+                ({itemsCount.toLocaleString("fa-IR")})
+              </sup>
+            </DialogTitle>
+          </DialogHeader>
+          <div className="hide-scrollbar max-h-[calc(100dvh-calc(2*var(--dialog-space-y))-calc(var(--header-height)+var(--footer-height)))] overflow-auto">
+            <div className="hide-scrollbar max-h-full overflow-auto py-3.5">
+              <div className="grid grid-cols-1 gap-1.5 px-3.5 sm:grid-cols-2 md:grid-cols-3">
+                {fields.map((field, index) => (
+                  <CartItem
+                    key={field.id}
+                    index={index}
+                    onRemoveClick={() => handleRemove(index)()}
+                    quantity={field.quantity}
+                    onQuantityChange={(newQty: number) =>
+                      handleQuantityChange(index)(newQty)
+                    }
+                    {...(cartItems.find(
+                      (p) => p.product_id === field.product_id,
+                    ) as CartItem)}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="h-[var(--footer-height)] flex-col gap-3.5 border-t p-3.5 sm:flex-col">
+            <div className="flex w-full items-center justify-between gap-3.5">
+              <p className="text-sm">جمع کل</p>
+              <span className="text-sm">
+                {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
+              </span>
+            </div>
+            <div className="flex gap-2">
+              <Button asChild className="flex-1" variant="outline">
+                <a href="#">
+                  مشاهده سبد
+                  <ArrowUpRight className="ms-2 size-4 rtl:rotate-180" />
+                </a>
+              </Button>
+              <Button className="flex-1">
+                ادامه به تسویه
+                <ArrowUpRight className="ms-2 size-4 rtl:rotate-180" />
+              </Button>
+            </div>
+          </DialogFooter>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+const CartItem = ({
+  image,
+  name,
+  details,
+  index,
+  onQuantityChange,
+  onRemoveClick,
+  price,
+  quantity,
+}: CartItemProps) => {
+  const { regular, currency } = price;
+
+  return (
+    <Card className="relative border-none bg-transparent p-0 shadow-none">
+      <div className="absolute top-2.5 end-2.5 z-10">
+        <Button
+          type="button"
+          size="icon-sm"
+          variant="ghost"
+          className="size-5"
+          onClick={onRemoveClick}
+          aria-label={`حذف ${name} از سبد`}
+        >
+          <X />
+          <span className="sr-only">حذف از سبد</span>
+        </Button>
+      </div>
+      <CardContent className="flex h-full flex-col p-0">
+        <AspectRatio ratio={1.2} className="overflow-hidden rounded-2xl">
+          <img
+            src={image}
+            alt={name}
+            className="block size-full object-cover object-center"
+          />
+        </AspectRatio>
+        <div className="flex h-full flex-col justify-between gap-5 p-2.5">
+          <div>
+            <CardTitle className="text-sm leading-snug font-normal">
+              {name}
+            </CardTitle>
+            {details && (
+              <ul>
+                {details?.map((item, index) => {
+                  const isLast = index === details.length - 1;
+                  return (
+                    <li className="inline" key={`product-details-${index}`}>
+                      <dl className="inline text-sm font-medium">
+                        <dt className="sr-only inline">{item.label}: </dt>
+                        <dd className="inline text-muted-foreground">
+                          {item.value}
+                        </dd>
+                        {!isLast && (
+                          <span className="mx-1 text-muted-foreground">/</span>
+                        )}
+                      </dl>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+          <div className="mt-auto flex flex-wrap items-center justify-between gap-5">
+            <QuantityField index={index} onQuantityChange={onQuantityChange} />
+            <div className="inline-flex items-baseline gap-1">
+              <span className="text-sm text-muted-foreground">
+                {quantity.toLocaleString("fa-IR")}
+              </span>
+              <span className="text-sm text-muted-foreground">×</span>
+              <span className="text-sm font-normal text-muted-foreground">
+                {formatPrice(regular, currency)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const QuantityField = ({
+  index,
+  onQuantityChange,
+}: {
+  index: number;
+  onQuantityChange: (n: number) => void;
+}) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={`products.${index}.quantity`}
+      control={control}
+      render={({ field }) => {
+        return (
+          <Field className="w-full max-w-28">
+            <QuantityInput
+              inputProps={field}
+              onValueChange={(newQty) => {
+                field.onChange(newQty);
+                onQuantityChange(newQty);
+              }}
+              className="rounded-none border-none !shadow-none"
+            />
+          </Field>
+        );
+      }}
+    />
+  );
+};
+
+export { ShoppingCart7 };
diff --git a/blocks/sidebar1.tsx b/blocks/sidebar1.tsx
new file mode 100644
index 0000000..3b19198
--- /dev/null
+++ b/blocks/sidebar1.tsx
@@ -0,0 +1,205 @@
+import {
+  BarChart3,
+  ClipboardList,
+  HelpCircle,
+  LayoutDashboard,
+  Settings,
+} from "lucide-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+};
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild isActive={item.isActive}>
+        <a href={item.href}>
+          <Icon className="size-4" />
+          <span>{item.label}</span>
+        </a>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        <SidebarLogo logo={sidebarData.logo} />
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarGroup>
+          <SidebarGroupLabel>{sidebarData.footerGroup.title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {sidebarData.footerGroup.items.map((item) => (
+                <NavMenuItem key={item.label} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar1Props {
+  className?: string;
+}
+
+const Sidebar1 = ({ className }: Sidebar1Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar1 };
diff --git a/blocks/sidebar10.tsx b/blocks/sidebar10.tsx
new file mode 100644
index 0000000..f315804
--- /dev/null
+++ b/blocks/sidebar10.tsx
@@ -0,0 +1,516 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+
+  return (
+    <Sidebar side="right" variant="inset" {...props}>
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar10Props {
+  className?: string;
+}
+
+const Sidebar10 = ({ className }: Sidebar10Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ms-1" />
+            <Separator
+              orientation="vertical"
+              className="ms-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>داشبورد</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar10 };
diff --git a/blocks/sidebar11.tsx b/blocks/sidebar11.tsx
new file mode 100644
index 0000000..1f8dcbe
--- /dev/null
+++ b/blocks/sidebar11.tsx
@@ -0,0 +1,509 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="top"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar11Props {
+  className?: string;
+}
+
+const Sidebar11 = ({ className }: Sidebar11Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <SidebarTrigger className="-me-1 ms-auto" />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <AppSidebar />
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar11 };
diff --git a/blocks/sidebar12.tsx b/blocks/sidebar12.tsx
new file mode 100644
index 0000000..af3744f
--- /dev/null
+++ b/blocks/sidebar12.tsx
@@ -0,0 +1,602 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+// Dashboard sections for right sidebar - dense technical menu
+const dashboardSections = [
+  {
+    title: "شاخص‌ها",
+    items: [
+      { label: "نمای کلی", isActive: true },
+      { label: "بازدید صفحات" },
+      { label: "نشست‌ها" },
+      { label: "نرخ پرش" },
+      { label: "میانگین مدت" },
+    ],
+  },
+  {
+    title: "درآمد",
+    items: [
+      { label: "درآمد ماهانه (درآمد ماهانه تکرارشونده)" },
+      { label: "درآمد سالانه (ARR)" },
+      { label: "ارزش طول عمر (LTV)" },
+      { label: "نرخ ریزش" },
+    ],
+  },
+  {
+    title: "کاربران",
+    items: [
+      { label: "کاربران فعال" },
+      { label: "ثبت‌نام جدید" },
+      { label: "نگهداشت" },
+      { label: "گروه‌های هم‌دوره" },
+    ],
+  },
+  {
+    title: "رویدادها",
+    items: [
+      { label: "کلیک‌ها" },
+      { label: "تبدیل‌ها" },
+      { label: "تحلیل قیف" },
+    ],
+  },
+];
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SidebarLeft = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+const SidebarRight = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar
+      side="left"
+      collapsible="none"
+      className="sticky top-0 hidden h-svh border-s lg:flex"
+      {...props}
+    >
+      <SidebarHeader className="h-16 justify-center border-b">
+        <div className="px-3">
+          <span className="text-sm font-medium">داشبورد</span>
+        </div>
+      </SidebarHeader>
+      <SidebarContent className="gap-0 overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {/* Mini chart section */}
+
+          {dashboardSections.map((section) => (
+            <SidebarGroup key={section.title} className="py-2">
+              <SidebarGroupLabel className="px-3 text-[10px] tracking-wider text-muted-foreground/70 uppercase">
+                {section.title}
+              </SidebarGroupLabel>
+              <SidebarGroupContent>
+                <div className="flex flex-col">
+                  {section.items.map((item) => (
+                    <button
+                      key={item.label}
+                      className={cn(
+                        "px-3 py-1 text-start text-xs transition-colors hover:bg-muted/50",
+                        item.isActive
+                          ? "bg-muted text-foreground"
+                          : "text-muted-foreground hover:text-foreground",
+                      )}
+                    >
+                      {item.label}
+                    </button>
+                  ))}
+                </div>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+    </Sidebar>
+  );
+};
+
+interface Sidebar12Props {
+  className?: string;
+}
+
+const Sidebar12 = ({ className }: Sidebar12Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar12 };
diff --git a/blocks/sidebar13.tsx b/blocks/sidebar13.tsx
new file mode 100644
index 0000000..6c69b01
--- /dev/null
+++ b/blocks/sidebar13.tsx
@@ -0,0 +1,319 @@
+"use client";
+
+import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
+import * as React from "react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: Array<{
+    label: string;
+    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    href: string;
+    isActive?: boolean;
+    children?: Array<{
+      label: string;
+      icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+      href: string;
+      isActive?: boolean;
+    }>;
+  }>;
+  defaultOpen?: boolean;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "شاد‌سی‌ان بلاکس",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [],
+  },
+};
+
+// File tree data structure
+type FileTreeItem = {
+  name: string;
+  label: string;
+  type: "file" | "folder";
+  children?: FileTreeItem[];
+};
+
+const fileTreeData: FileTreeItem[] = [
+  {
+    name: "src",
+    label: "کد منبع",
+    type: "folder",
+    children: [
+      {
+        name: "components",
+        label: "کامپوننت‌ها",
+        type: "folder",
+        children: [
+          {
+            name: "ui",
+            label: "رابط کاربری",
+            type: "folder",
+            children: [
+              { name: "button.tsx", label: "دکمه.tsx", type: "file" },
+              { name: "card.tsx", label: "کارت.tsx", type: "file" },
+              { name: "dialog.tsx", label: "دیالوگ.tsx", type: "file" },
+              { name: "input.tsx", label: "ورودی.tsx", type: "file" },
+              { name: "sidebar.tsx", label: "سایدبار.tsx", type: "file" },
+            ],
+          },
+          { name: "app-sidebar.tsx", label: "سایدبار اپ.tsx", type: "file" },
+          { name: "nav-main.tsx", label: "ناوبری اصلی.tsx", type: "file" },
+          { name: "nav-user.tsx", label: "ناوبری کاربر.tsx", type: "file" },
+        ],
+      },
+      {
+        name: "lib",
+        label: "کتابخانه",
+        type: "folder",
+        children: [{ name: "utils.ts", label: "ابزارها.ts", type: "file" }],
+      },
+      {
+        name: "app",
+        label: "اپلیکیشن",
+        type: "folder",
+        children: [
+          { name: "layout.tsx", label: "چیدمان.tsx", type: "file" },
+          { name: "page.tsx", label: "صفحه.tsx", type: "file" },
+          { name: "globals.css", label: "استایل‌های عمومی.استایل‌دهی", type: "file" },
+        ],
+      },
+    ],
+  },
+  {
+    name: "public",
+    label: "عمومی",
+    type: "folder",
+    children: [
+      { name: "favicon.ico", label: "آیکن سایت.ico", type: "file" },
+      { name: "logo.svg", label: "لوگو.svg", type: "file" },
+    ],
+  },
+  { name: "package.json", label: "پیکربندی بسته.json", type: "file" },
+  { name: "tsconfig.json", label: "پیکربندی زبان نوع‌ایمن.json", type: "file" },
+  {
+    name: "tailwind.config.ts",
+    label: "پیکربندی استایل‌دهی مدرن.ts",
+    type: "file",
+  },
+  { name: "README.md", label: "راهنما.md", type: "file" },
+];
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const FileTreeNode = ({
+  item,
+  depth = 0,
+}: {
+  item: FileTreeItem;
+  depth?: number;
+}) => {
+  const [isOpen, setIsOpen] = React.useState(depth < 2);
+
+  if (item.type === "file") {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton className="text-start data-[active=true]:bg-transparent">
+          <File className="size-4 shrink-0" />
+          <span className="truncate">{item.label}</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="group/collapsible [&[data-state=open]>button>svg:last-child]:rotate-90"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton className="text-start">
+            {isOpen ? (
+              <FolderOpen className="size-4 shrink-0 text-muted-foreground" />
+            ) : (
+              <Folder className="size-4 shrink-0 text-muted-foreground" />
+            )}
+            <span className="truncate">{item.label}</span>
+            <ChevronRight className="ms-auto size-4 shrink-0 transition-transform rtl:rotate-180" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        {item.children && (
+          <CollapsibleContent>
+            <SidebarMenuSub className="border-l-0 border-s border-sidebar-border">
+              {item.children.map((child) => (
+                <FileTreeNode key={child.name} item={child} depth={depth + 1} />
+              ))}
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        )}
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" dir="rtl" {...props}>
+      <SidebarHeader>
+        <SidebarLogo logo={sidebarData.logo} />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          <SidebarGroup>
+            <SidebarGroupLabel className="text-start">فایل‌ها</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {fileTreeData.map((item) => (
+                  <FileTreeNode key={item.name} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar13Props {
+  className?: string;
+}
+
+const Sidebar13 = ({ className }: Sidebar13Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 text-start">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">کامپوننت‌ها</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">رابط کاربری</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>دکمه.tsx</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar13 };
diff --git a/blocks/sidebar14.tsx b/blocks/sidebar14.tsx
new file mode 100644
index 0000000..d018cfc
--- /dev/null
+++ b/blocks/sidebar14.tsx
@@ -0,0 +1,554 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+// Slide-out submenu panel component
+const SlideOutPanel = ({
+  item,
+  onClose,
+}: {
+  item: NavItem;
+  onClose: () => void;
+}) => {
+  if (!item.children?.length) return null;
+
+  return (
+    <div className="absolute top-0 right-full z-50 h-full w-56 animate-in border-e bg-background shadow-lg slide-in-from-right-2">
+      <div className="flex h-full flex-col">
+        <div className="flex items-center gap-2 border-b px-4 py-3">
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="بستن زیرمنو"
+            className="rounded-sm p-1 hover:bg-muted"
+          >
+            <ChevronRight className="size-4" />
+          </button>
+          <span className="font-medium">{item.label}</span>
+        </div>
+        <div className="flex-1 overflow-auto p-2">
+          <SidebarMenu>
+            {item.children.map((child) => {
+              const ChildIcon = child.icon;
+              return (
+                <SidebarMenuItem key={child.label}>
+                  <SidebarMenuButton asChild isActive={child.isActive}>
+                    <a href={child.href}>
+                      <ChildIcon className="size-4" />
+                      <span>{child.label}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              );
+            })}
+          </SidebarMenu>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const NavMenuItem = ({
+  item,
+  onOpenSubmenu,
+}: {
+  item: NavItem;
+  onOpenSubmenu: (item: NavItem) => void;
+}) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        isActive={item.isActive}
+        onClick={() => onOpenSubmenu(item)}
+      >
+        <Icon className="size-4" />
+        <span>{item.label}</span>
+        <ChevronRight className="ms-auto size-4" />
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+  const [openSubmenu, setOpenSubmenu] = React.useState<NavItem | null>(null);
+
+  return (
+    <Sidebar
+      side="right"
+      {...props}
+      className="[&>[data-slot=sidebar-inner]]:overflow-visible"
+    >
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem
+                    key={item.label}
+                    item={item}
+                    onOpenSubmenu={setOpenSubmenu}
+                  />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+      {openSubmenu && (
+        <SlideOutPanel
+          item={openSubmenu}
+          onClose={() => setOpenSubmenu(null)}
+        />
+      )}
+    </Sidebar>
+  );
+};
+
+interface Sidebar14Props {
+  className?: string;
+}
+
+const Sidebar14 = ({ className }: Sidebar14Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar14 };
diff --git a/blocks/sidebar15.tsx b/blocks/sidebar15.tsx
new file mode 100644
index 0000000..70872eb
--- /dev/null
+++ b/blocks/sidebar15.tsx
@@ -0,0 +1,507 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  Check,
+  ChevronDown,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+// Nav item with dropdown menu for children
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronDown className="ms-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          className="min-w-48 rounded-lg"
+          side="bottom"
+          align="start"
+          sideOffset={4}
+        >
+          {item.children!.map((child) => {
+            const ChildIcon = child.icon;
+            return (
+              <DropdownMenuItem key={child.label} asChild>
+                <a href={child.href} className="flex items-center gap-2">
+                  <ChildIcon className="size-4" />
+                  <span>{child.label}</span>
+                </a>
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <SidebarGroup key={group.title}>
+            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.label} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar15Props {
+  className?: string;
+}
+
+const Sidebar15 = ({ className }: Sidebar15Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar15 };
diff --git a/blocks/sidebar16.tsx b/blocks/sidebar16.tsx
new file mode 100644
index 0000000..6d087f0
--- /dev/null
+++ b/blocks/sidebar16.tsx
@@ -0,0 +1,846 @@
+"use client";
+
+import {
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  LogOut,
+  Search,
+  User,
+  X,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: Array<{
+    label: string;
+    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    href: string;
+    isActive?: boolean;
+    children?: Array<{
+      label: string;
+      icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+      href: string;
+      isActive?: boolean;
+    }>;
+  }>;
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+// AWS-style mega menu data - extensive service catalog
+const megaMenuCategories = [
+  {
+    id: "compute",
+    title: "محاسبات",
+    sections: [
+      {
+        title: "نمونه‌ها",
+        items: [
+          "EC2 Instances",
+          "Spot Instances",
+          "Reserved Instances",
+          "Dedicated Hosts",
+          "Capacity Reservations",
+        ],
+      },
+      {
+        title: "کانتینرها",
+        items: [
+          "ECS",
+          "EKS",
+          "Fargate",
+          "ECR",
+          "App Runner",
+          "Red Hat OpenShift",
+        ],
+      },
+      {
+        title: "بدون سرور",
+        items: [
+          "Lambda",
+          "Lambda@Edge",
+          "Step Functions",
+          "EventBridge",
+          "SQS",
+          "SNS",
+        ],
+      },
+      {
+        title: "لبه و ترکیبی",
+        items: ["Outposts", "Wavelength", "Local Zones", "Snow Family"],
+      },
+    ],
+  },
+  {
+    id: "storage",
+    title: "ذخیره‌سازی",
+    sections: [
+      {
+        title: "ذخیره‌سازی شیء",
+        items: [
+          "S3 Standard",
+          "S3 Intelligent-Tiering",
+          "S3 Glacier",
+          "S3 Glacier Deep Archive",
+          "S3 Access Points",
+        ],
+      },
+      {
+        title: "ذخیره‌سازی بلاکی",
+        items: [
+          "EBS Volumes",
+          "EBS Snapshots",
+          "Instance Store",
+          "FSx for NetApp",
+        ],
+      },
+      {
+        title: "ذخیره‌سازی فایل",
+        items: ["EFS", "FSx for Windows", "FSx for Lustre", "FSx for OpenZFS"],
+      },
+      {
+        title: "انتقال داده",
+        items: [
+          "DataSync",
+          "Transfer Family",
+          "Snow Family",
+          "Storage Gateway",
+        ],
+      },
+    ],
+  },
+  {
+    id: "database",
+    title: "پایگاه داده",
+    sections: [
+      {
+        title: "رابطه‌ای",
+        items: [
+          "RDS for PostgreSQL",
+          "RDS for MySQL",
+          "RDS for MariaDB",
+          "RDS for Oracle",
+          "RDS for SQL Server",
+          "Aurora PostgreSQL",
+          "Aurora MySQL",
+          "Aurora Serverless",
+        ],
+      },
+      {
+        title: "کلید-مقدار",
+        items: [
+          "DynamoDB",
+          "DynamoDB Accelerator",
+          "ElastiCache Redis",
+          "ElastiCache Memcached",
+          "MemoryDB",
+        ],
+      },
+      {
+        title: "سندی",
+        items: ["DocumentDB", "MongoDB Compatible"],
+      },
+      {
+        title: "سایر",
+        items: [
+          "Neptune",
+          "Timestream",
+          "QLDB",
+          "Keyspaces",
+          "Redshift",
+          "Redshift Serverless",
+        ],
+      },
+    ],
+  },
+  {
+    id: "networking",
+    title: "شبکه",
+    sections: [
+      {
+        title: "شبکه پایه",
+        items: [
+          "VPC",
+          "Subnets",
+          "Route Tables",
+          "Internet Gateway",
+          "NAT Gateway",
+          "Elastic IPs",
+        ],
+      },
+      {
+        title: "اتصال",
+        items: [
+          "Direct Connect",
+          "Site-to-Site VPN",
+          "Client VPN",
+          "Transit Gateway",
+          "PrivateLink",
+        ],
+      },
+      {
+        title: "DNS و CDN",
+        items: ["Route 53", "CloudFront", "Global Accelerator"],
+      },
+      {
+        title: "امنیت شبکه",
+        items: [
+          "Security Groups",
+          "Network ACLs",
+          "WAF",
+          "Shield",
+          "Firewall Manager",
+        ],
+      },
+    ],
+  },
+  {
+    id: "security",
+    title: "امنیت و هویت",
+    sections: [
+      {
+        title: "هویت",
+        items: [
+          "IAM",
+          "IAM Identity Center",
+          "Organizations",
+          "Resource Access Manager",
+          "Directory Service",
+        ],
+      },
+      {
+        title: "تشخیص",
+        items: ["GuardDuty", "Inspector", "Macie", "Security Hub", "Detective"],
+      },
+      {
+        title: "محافظت",
+        items: ["WAF", "Shield", "Firewall Manager", "Network Firewall"],
+      },
+      {
+        title: "انطباق",
+        items: ["Audit Manager", "Artifact", "Config", "CloudTrail"],
+      },
+      {
+        title: "رمزنگاری",
+        items: [
+          "KMS",
+          "CloudHSM",
+          "Certificate Manager",
+          "Secrets Manager",
+          "Private CA",
+        ],
+      },
+    ],
+  },
+  {
+    id: "analytics",
+    title: "تحلیل داده",
+    sections: [
+      {
+        title: "دریاچه‌های داده",
+        items: ["Lake Formation", "Glue", "Glue DataBrew", "Data Exchange"],
+      },
+      {
+        title: "سرویس‌های پرس‌وجو",
+        items: ["Athena", "Redshift", "OpenSearch", "QuickSight"],
+      },
+      {
+        title: "استریم",
+        items: [
+          "Kinesis Data Streams",
+          "Kinesis Firehose",
+          "Kinesis Analytics",
+          "MSK",
+          "MSK Serverless",
+        ],
+      },
+      {
+        title: "کلان‌داده",
+        items: ["EMR", "EMR Serverless", "EMR on EKS"],
+      },
+    ],
+  },
+  {
+    id: "ml",
+    title: "یادگیری ماشین",
+    sections: [
+      {
+        title: "پلتفرم ML",
+        items: [
+          "SageMaker Studio",
+          "SageMaker Notebooks",
+          "SageMaker Training",
+          "SageMaker Inference",
+          "SageMaker Pipelines",
+        ],
+      },
+      {
+        title: "سرویس‌های هوش مصنوعی",
+        items: [
+          "Bedrock",
+          "Rekognition",
+          "Textract",
+          "Comprehend",
+          "Translate",
+          "Polly",
+          "Transcribe",
+          "Lex",
+        ],
+      },
+      {
+        title: "چارچوب‌های ML",
+        items: ["Deep Learning AMIs", "Deep Learning Containers", "Neuron"],
+      },
+    ],
+  },
+  {
+    id: "devtools",
+    title: "ابزارهای توسعه",
+    sections: [
+      {
+        title: "CI/CD",
+        items: [
+          "CodeCommit",
+          "CodeBuild",
+          "CodeDeploy",
+          "CodePipeline",
+          "CodeArtifact",
+        ],
+      },
+      {
+        title: "توسعه",
+        items: [
+          "Cloud9",
+          "CodeStar",
+          "X-Ray",
+          "CodeGuru",
+          "Fault Injection Simulator",
+        ],
+      },
+      {
+        title: "SDK و ابزارها",
+        items: ["CLI", "CloudShell", "SDKs", "CDK", "SAM", "Amplify"],
+      },
+    ],
+  },
+  {
+    id: "management",
+    title: "مدیریت",
+    sections: [
+      {
+        title: "پایش",
+        items: [
+          "CloudWatch Metrics",
+          "CloudWatch Logs",
+          "CloudWatch Alarms",
+          "CloudWatch Dashboards",
+          "CloudWatch Synthetics",
+          "CloudWatch RUM",
+        ],
+      },
+      {
+        title: "حاکمیت",
+        items: [
+          "Organizations",
+          "Control Tower",
+          "Service Catalog",
+          "Systems Manager",
+          "Trusted Advisor",
+        ],
+      },
+      {
+        title: "زیرساخت",
+        items: ["CloudFormation", "OpsWorks", "App Config", "Launch Wizard"],
+      },
+      {
+        title: "مدیریت هزینه",
+        items: [
+          "Cost Explorer",
+          "Budgets",
+          "Cost & Usage Report",
+          "Savings Plans",
+          "Reserved Instance Reporting",
+        ],
+      },
+    ],
+  },
+  {
+    id: "integration",
+    title: "یکپارچه‌سازی برنامه",
+    sections: [
+      {
+        title: "پیام‌رسانی",
+        items: ["SQS", "SNS", "MQ", "EventBridge", "EventBridge Scheduler"],
+      },
+      {
+        title: "گردش کار",
+        items: [
+          "Step Functions",
+          "AppFlow",
+          "Managed Workflows for Apache Airflow",
+        ],
+      },
+      {
+        title: "اتصال هوشمندها",
+        items: ["API Gateway", "AppSync", "Location Service"],
+      },
+    ],
+  },
+];
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+// Full-screen mega menu panel component (AWS-style)
+const MegaMenuPanel = ({
+  category,
+  onClose,
+}: {
+  category: (typeof megaMenuCategories)[0];
+  onClose: () => void;
+}) => {
+  return (
+    <div className="absolute top-0 right-full z-50 h-full w-[calc(100vw-var(--sidebar-width))] animate-in border-e bg-background shadow-lg slide-in-from-right-2">
+      <div className="flex h-full flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b px-6 py-4">
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="بازگشت"
+              className="rounded-sm p-1 hover:bg-muted"
+            >
+              <ChevronRight className="size-4" />
+            </button>
+            <h2 className="text-lg font-semibold">{category.title}</h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="بستن"
+            className="rounded-sm p-1 hover:bg-muted"
+          >
+            <X className="size-5" />
+          </button>
+        </div>
+
+        {/* Content - scrollable grid of sections */}
+        <div className="flex-1 overflow-auto p-6">
+          <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+            {category.sections.map((section) => (
+              <div key={section.title}>
+                <h3 className="mb-3 text-start text-sm font-semibold text-foreground">
+                  {section.title}
+                </h3>
+                <ul className="space-y-1">
+                  {section.items.map((item) => (
+                    <li key={item}>
+                      <a
+                        href="#"
+                        className="block rounded px-2 py-1 text-start text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                      >
+                        {item}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Category nav item
+const CategoryItem = ({
+  category,
+  isSelected,
+  onClick,
+}: {
+  category: (typeof megaMenuCategories)[0];
+  isSelected: boolean;
+  onClick: () => void;
+}) => {
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton isActive={isSelected} onClick={onClick}>
+        <span>{category.title}</span>
+        <ChevronRight className="ms-auto size-4" />
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+  const [selectedCategory, setSelectedCategory] = React.useState<
+    (typeof megaMenuCategories)[0] | null
+  >(null);
+
+  const handleCategoryClick = (category: (typeof megaMenuCategories)[0]) => {
+    setSelectedCategory(selectedCategory?.id === category.id ? null : category);
+  };
+
+  return (
+    <Sidebar
+      side="right"
+      {...props}
+      className="[&>[data-slot=sidebar-inner]]:overflow-visible"
+    >
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>خدمات</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {megaMenuCategories.map((category) => (
+                <CategoryItem
+                  key={category.id}
+                  category={category}
+                  isSelected={selectedCategory?.id === category.id}
+                  onClick={() => handleCategoryClick(category)}
+                />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+      {selectedCategory && (
+        <MegaMenuPanel
+          category={selectedCategory}
+          onClose={() => setSelectedCategory(null)}
+        />
+      )}
+    </Sidebar>
+  );
+};
+
+interface Sidebar16Props {
+  className?: string;
+}
+
+const Sidebar16 = ({ className }: Sidebar16Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar16 };
diff --git a/blocks/sidebar17.tsx b/blocks/sidebar17.tsx
new file mode 100644
index 0000000..c2ddc49
--- /dev/null
+++ b/blocks/sidebar17.tsx
@@ -0,0 +1,449 @@
+"use client";
+
+import {
+  Check,
+  ChevronsUpDown,
+  FileText,
+  FolderTree,
+  GitBranch,
+  LogOut,
+  Settings,
+  User,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+// Tab-specific navigation content
+const filesNavItems: NavItem[] = [
+  { label: "src", icon: FolderTree, href: "#" },
+  { label: "components", icon: FolderTree, href: "#" },
+  { label: "pages", icon: FolderTree, href: "#" },
+  { label: "lib", icon: FolderTree, href: "#" },
+  { label: "hooks", icon: FolderTree, href: "#" },
+  { label: "package.json", icon: FileText, href: "#" },
+  { label: "tsconfig.json", icon: FileText, href: "#" },
+  { label: "README.md", icon: FileText, href: "#", isActive: true },
+  { label: "tailwind.config.ts", icon: FileText, href: "#" },
+  { label: "next.config.js", icon: FileText, href: "#" },
+];
+
+const gitNavItems: NavItem[] = [
+  { label: "main", icon: GitBranch, href: "#", isActive: true },
+  { label: "develop", icon: GitBranch, href: "#" },
+  { label: "feature/sidebar", icon: GitBranch, href: "#" },
+  { label: "feature/auth", icon: GitBranch, href: "#" },
+  { label: "feature/dashboard", icon: GitBranch, href: "#" },
+  { label: "fix/bug-123", icon: GitBranch, href: "#" },
+  { label: "fix/styling-issues", icon: GitBranch, href: "#" },
+  { label: "release/v1.0.0", icon: GitBranch, href: "#" },
+];
+
+const settingsNavItems: NavItem[] = [
+  { label: "عمومی", icon: Settings, href: "#", isActive: true },
+  { label: "ظاهر", icon: Settings, href: "#" },
+  { label: "ویرایشگر", icon: Settings, href: "#" },
+  { label: "میانبرها", icon: Settings, href: "#" },
+  { label: "افزونه‌ها", icon: Settings, href: "#" },
+  { label: "فضاهای کار", icon: Settings, href: "#" },
+  { label: "حریم خصوصی", icon: Settings, href: "#" },
+  { label: "به‌روزرسانی‌ها", icon: Settings, href: "#" },
+];
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavList = ({ items, label }: { items: NavItem[]; label: string }) => {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>{label}</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => {
+            const Icon = item.icon;
+            return (
+              <SidebarMenuItem key={item.label}>
+                <SidebarMenuButton asChild isActive={item.isActive}>
+                  <a href={item.href}>
+                    <Icon className="size-4" />
+                    <span>{item.label}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            );
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+  const [activeTab, setActiveTab] = React.useState("files");
+
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="w-full">
+            <TabsTrigger
+              value="files"
+              className="flex-1"
+              aria-label="مرورگر فایل"
+            >
+              <FolderTree className="size-4" />
+            </TabsTrigger>
+            <TabsTrigger
+              value="git"
+              className="flex-1"
+              aria-label="شاخه‌های گیت"
+            >
+              <GitBranch className="size-4" />
+            </TabsTrigger>
+            <TabsTrigger
+              value="settings"
+              className="flex-1"
+              aria-label="تنظیمات"
+            >
+              <Settings className="size-4" />
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </SidebarHeader>
+      <SidebarContent>
+        {activeTab === "files" && (
+          <NavList items={filesNavItems} label="مرورگر" />
+        )}
+        {activeTab === "git" && (
+          <NavList items={gitNavItems} label="شاخه‌ها" />
+        )}
+        {activeTab === "settings" && (
+          <NavList items={settingsNavItems} label="تنظیمات" />
+        )}
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar17Props {
+  className?: string;
+}
+
+const Sidebar17 = ({ className }: Sidebar17Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar17 };
diff --git a/blocks/sidebar18.tsx b/blocks/sidebar18.tsx
new file mode 100644
index 0000000..1765d99
--- /dev/null
+++ b/blocks/sidebar18.tsx
@@ -0,0 +1,484 @@
+"use client";
+
+import {
+  Check,
+  ChevronsUpDown,
+  Hash,
+  Headphones,
+  LogOut,
+  Mic,
+  Plus,
+  Settings,
+  User,
+  Users,
+  Volume2,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: Array<{
+    label: string;
+    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    href: string;
+    isActive?: boolean;
+    children?: Array<{
+      label: string;
+      icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+      href: string;
+      isActive?: boolean;
+    }>;
+  }>;
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+// Channel-style navigation data
+const channels = [
+  { id: "1", name: "عمومی", type: "text", unread: 3 },
+  { id: "2", name: "اعلان‌ها", type: "text", unread: 0 },
+  { id: "3", name: "تصادفی", type: "text", unread: 12 },
+  { id: "4", name: "راهنما", type: "text", unread: 0 },
+  { id: "5", name: "بازخورد", type: "text", unread: 1 },
+];
+
+const voiceChannels = [
+  { id: "v1", name: "صدای عمومی", type: "voice", users: 3 },
+  { id: "v2", name: "اتاق جلسه", type: "voice", users: 0 },
+  { id: "v3", name: "موسیقی", type: "voice", users: 1 },
+];
+
+const directMessages = [
+  {
+    id: "dm1",
+    name: "سارا احمدی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    status: "online",
+    unread: 2,
+  },
+  {
+    id: "dm2",
+    name: "میکاییل رضایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    status: "idle",
+    unread: 0,
+  },
+  {
+    id: "dm3",
+    name: "نیلوفر حسینی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    status: "offline",
+    unread: 0,
+  },
+  {
+    id: "dm4",
+    name: "آرش کیانی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    status: "online",
+    unread: 5,
+  },
+];
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <div className="flex items-center gap-2 rounded-md bg-sidebar-accent/50 p-2">
+      <Avatar className="size-8">
+        <AvatarImage src={user.avatar} alt={user.name} />
+        <AvatarFallback>
+          {user.name
+            .split(" ")
+            .map((n) => n[0])
+            .join("")}
+        </AvatarFallback>
+      </Avatar>
+      <div className="flex-1 truncate">
+        <p className="truncate text-sm font-medium">{user.name}</p>
+        <p className="truncate text-xs text-muted-foreground">آنلاین</p>
+      </div>
+      <div className="flex gap-1">
+        <Button variant="ghost" size="icon" className="size-8">
+          <Mic className="size-4" />
+        </Button>
+        <Button variant="ghost" size="icon" className="size-8">
+          <Headphones className="size-4" />
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-8">
+              <Settings className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Settings className="me-2 size-4" />
+              تنظیمات
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+
+  return (
+    <Sidebar side="right" {...props}>
+      {/* Top Section - Workspace */}
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+      </SidebarHeader>
+
+      {/* Middle Section - Scrollable channels */}
+      <SidebarContent>
+        {/* Text Channels */}
+        <SidebarGroup>
+          <SidebarGroupLabel className="flex items-center justify-between">
+            <span>کانال‌های متنی</span>
+            <Button variant="ghost" size="icon" className="size-5">
+              <Plus className="size-3" />
+            </Button>
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {channels.map((channel) => (
+                <SidebarMenuItem key={channel.id}>
+                  <SidebarMenuButton isActive={channel.id === "1"}>
+                    <Hash className="size-4" />
+                    <span>{channel.name}</span>
+                    {channel.unread > 0 && (
+                      <span className="ms-auto flex size-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                        {channel.unread}
+                      </span>
+                    )}
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Voice Channels */}
+        <SidebarGroup>
+          <SidebarGroupLabel className="flex items-center justify-between">
+            <span>کانال‌های صوتی</span>
+            <Button variant="ghost" size="icon" className="size-5">
+              <Plus className="size-3" />
+            </Button>
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {voiceChannels.map((channel) => (
+                <SidebarMenuItem key={channel.id}>
+                  <SidebarMenuButton>
+                    <Volume2 className="size-4" />
+                    <span>{channel.name}</span>
+                    {channel.users > 0 && (
+                      <span className="ms-auto flex items-center gap-1 text-xs text-muted-foreground">
+                        <Users className="size-3" />
+                        {channel.users}
+                      </span>
+                    )}
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Direct Messages */}
+        <SidebarGroup>
+          <SidebarGroupLabel className="flex items-center justify-between">
+            <span>پیام‌های مستقیم</span>
+            <Button variant="ghost" size="icon" className="size-5">
+              <Plus className="size-3" />
+            </Button>
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {directMessages.map((dm) => (
+                <SidebarMenuItem key={dm.id}>
+                  <SidebarMenuButton>
+                    <div className="relative">
+                      <Avatar className="size-6">
+                        <AvatarImage src={dm.avatar} alt={dm.name} />
+                        <AvatarFallback className="text-[10px]">
+                          {dm.name
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span
+                        className={cn(
+                          "absolute -start-0.5 -bottom-0.5 size-2.5 rounded-full border-2 border-sidebar",
+                          dm.status === "online" && "bg-green-500",
+                          dm.status === "idle" && "bg-yellow-500",
+                          dm.status === "offline" && "bg-gray-400",
+                        )}
+                      />
+                    </div>
+                    <span>{dm.name}</span>
+                    {dm.unread > 0 && (
+                      <span className="ms-auto flex size-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                        {dm.unread}
+                      </span>
+                    )}
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      {/* Bottom Section - User controls (always visible) */}
+      <SidebarFooter className="border-t">
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+    </Sidebar>
+  );
+};
+
+interface Sidebar18Props {
+  className?: string;
+}
+
+const Sidebar18 = ({ className }: Sidebar18Props) => {
+  return (
+    <SidebarProvider dir="rtl" lang="fa" className={cn(className)}>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar18 };
diff --git a/blocks/sidebar19.tsx b/blocks/sidebar19.tsx
new file mode 100644
index 0000000..12befad
--- /dev/null
+++ b/blocks/sidebar19.tsx
@@ -0,0 +1,607 @@
+"use client";
+
+import {
+  Bell,
+  Check,
+  ChevronsUpDown,
+  Hash,
+  Headphones,
+  Lock,
+  Mic,
+  MoreHorizontal,
+  PencilLine,
+  Pin,
+  Plus,
+  Settings,
+  Trash2,
+  Volume2,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+// Types
+type TextChannel = {
+  id: string;
+  name: string;
+  type: "text";
+  locked: boolean;
+  unread: number;
+  isActive?: boolean;
+};
+
+type VoiceChannel = {
+  id: string;
+  name: string;
+  type: "voice";
+  users: string[];
+};
+
+type Channel = TextChannel | VoiceChannel;
+
+type ChannelCategory = {
+  id: string;
+  name: string;
+  isOpen: boolean;
+  channels: Channel[];
+};
+
+type Member = {
+  id: string;
+  name: string;
+  avatar: string;
+  role: string;
+  status: "online" | "idle" | "dnd" | "offline";
+};
+
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Data
+const workspaces: Workspace[] = [
+  {
+    id: "1",
+    name: "ShadcnBlocks",
+    logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    plan: "سازمانی",
+  },
+  {
+    id: "2",
+    name: "ری یو آی قالب‌ها",
+    logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    plan: "استارتاپ",
+  },
+  {
+    id: "3",
+    name: "ری یو آی بخش‌ها",
+    logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    plan: "رایگان",
+  },
+];
+
+const currentUser: UserData = {
+  name: "علی رضایی",
+  email: "ali@example.com",
+  avatar:
+    "/block-media/shadcnblocks/block/avatar-2.webp",
+};
+
+const channelCategories: ChannelCategory[] = [
+  {
+    id: "cat1",
+    name: "اطلاعات",
+    isOpen: true,
+    channels: [
+      { id: "1", name: "اعلان‌ها", type: "text", locked: true, unread: 0 },
+      { id: "2", name: "قوانین", type: "text", locked: true, unread: 0 },
+      { id: "3", name: "خوش‌آمد", type: "text", locked: false, unread: 0 },
+    ],
+  },
+  {
+    id: "cat2",
+    name: "عمومی",
+    isOpen: true,
+    channels: [
+      {
+        id: "4",
+        name: "عمومی",
+        type: "text",
+        locked: false,
+        unread: 12,
+        isActive: true,
+      },
+      { id: "5", name: "تصادفی", type: "text", locked: false, unread: 3 },
+      {
+        id: "6",
+        name: "معرفی‌ها",
+        type: "text",
+        locked: false,
+        unread: 0,
+      },
+    ],
+  },
+  {
+    id: "cat3",
+    name: "توسعه",
+    isOpen: true,
+    channels: [
+      { id: "7", name: "فرانت‌اند", type: "text", locked: false, unread: 5 },
+      { id: "8", name: "بک‌اند", type: "text", locked: false, unread: 0 },
+      { id: "9", name: "دواپس", type: "text", locked: false, unread: 1 },
+      { id: "10", name: "بازبینی کد", type: "text", locked: false, unread: 0 },
+    ],
+  },
+  {
+    id: "cat4",
+    name: "کانال‌های صوتی",
+    isOpen: true,
+    channels: [
+      {
+        id: "v1",
+        name: "صدای عمومی",
+        type: "voice",
+        users: ["سارا", "میکاییل", "آرش"],
+      },
+      { id: "v2", name: "اتاق جلسه", type: "voice", users: [] },
+      { id: "v3", name: "برنامه‌نویسی دونفره", type: "voice", users: ["نیلوفر"] },
+    ],
+  },
+];
+
+const members: Member[] = [
+  {
+    id: "1",
+    name: "سارا احمدی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "مدیر",
+    status: "online",
+  },
+  {
+    id: "2",
+    name: "میکاییل رضایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "ناظر",
+    status: "online",
+  },
+  {
+    id: "3",
+    name: "نیلوفر حسینی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "عضو",
+    status: "idle",
+  },
+  {
+    id: "4",
+    name: "آرش کیانی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "عضو",
+    status: "dnd",
+  },
+  {
+    id: "5",
+    name: "کاوه ویلسون",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    role: "عضو",
+    status: "offline",
+  },
+  {
+    id: "6",
+    name: "جواد لطفی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    role: "عضو",
+    status: "offline",
+  },
+];
+
+// Helper
+const getInitials = (name: string) =>
+  name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+const statusColors: Record<Member["status"], string> = {
+  online: "bg-green-500",
+  idle: "bg-yellow-500",
+  dnd: "bg-red-500",
+  offline: "bg-gray-400",
+};
+
+// Components
+const WorkspaceSwitcher = () => {
+  const [selected, setSelected] = React.useState(workspaces[0]);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const ChannelItem = ({ channel }: { channel: Channel }) => {
+  const isText = channel.type === "text";
+  const isVoice = channel.type === "voice";
+
+  return (
+    <SidebarMenuItem className="group/item">
+      <SidebarMenuButton isActive={isText && channel.isActive} className="ps-8">
+        {isVoice ? (
+          <Volume2 className="size-4 text-muted-foreground" />
+        ) : channel.locked ? (
+          <Lock className="size-4 text-muted-foreground" />
+        ) : (
+          <Hash className="size-4 text-muted-foreground" />
+        )}
+        <span
+          className={cn(
+            isText && channel.unread > 0 && "font-semibold text-foreground",
+          )}
+        >
+          {channel.name}
+        </span>
+        {isText && channel.unread > 0 && (
+          <Badge
+            variant="default"
+            className="ms-auto size-5 justify-center rounded-full p-0 text-[10px]"
+          >
+            {channel.unread}
+          </Badge>
+        )}
+        {isVoice && channel.users.length > 0 && (
+          <span className="ms-auto text-xs text-muted-foreground">
+            {channel.users.length}
+          </span>
+        )}
+      </SidebarMenuButton>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <SidebarMenuAction className="opacity-0 group-hover/item:opacity-100">
+            <MoreHorizontal className="size-3.5" />
+          </SidebarMenuAction>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="left" align="start">
+          <DropdownMenuItem>
+            <Bell className="me-2 size-4" />
+            بی‌صدا کردن کانال
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Pin className="me-2 size-4" />
+            سنجاق کانال
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <PencilLine className="me-2 size-4" />
+            ویرایش کانال
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="text-destructive">
+            <Trash2 className="me-2 size-4" />
+            حذف کانال
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {isVoice && channel.users.length > 0 && (
+        <div className="mt-1 ms-6 space-y-1">
+          {channel.users.map((userName) => (
+            <div
+              key={userName}
+              className="flex items-center gap-2 py-0.5 text-xs text-muted-foreground"
+            >
+              <div className="size-4 rounded-full bg-muted" />
+              <span>{userName}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </SidebarMenuItem>
+  );
+};
+
+const ChannelCategoryGroup = ({ category }: { category: ChannelCategory }) => {
+  const [isOpen, setIsOpen] = React.useState(category.isOpen);
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupLabel asChild className="group/label">
+          <CollapsibleTrigger className="flex w-full items-center justify-between">
+            <span className="truncate text-xs font-semibold tracking-wider uppercase">
+              {category.name}
+            </span>
+            <Plus className="size-3.5 opacity-0 transition-opacity group-hover/label:opacity-100" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {category.channels.map((channel) => (
+                <ChannelItem key={channel.id} channel={channel} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </CollapsibleContent>
+      </SidebarGroup>
+    </Collapsible>
+  );
+};
+
+const MemberItem = ({
+  member,
+  showStatus = true,
+}: {
+  member: Member;
+  showStatus?: boolean;
+}) => (
+  <button
+    className={cn(
+      "flex w-full items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted",
+      member.status === "offline" && "opacity-50 hover:opacity-100",
+    )}
+  >
+    <div className="relative">
+      <Avatar className="size-8">
+        <AvatarImage src={member.avatar} alt={member.name} />
+        <AvatarFallback className="text-xs">
+          {getInitials(member.name)}
+        </AvatarFallback>
+      </Avatar>
+      {showStatus && member.status !== "offline" && (
+        <span
+          className={cn(
+            "absolute -start-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background",
+            statusColors[member.status],
+          )}
+        />
+      )}
+    </div>
+    <div className="flex-1 text-start">
+      <p className="text-sm font-medium">{member.name}</p>
+      <p className="text-xs text-muted-foreground">{member.role}</p>
+    </div>
+  </button>
+);
+
+const MembersList = () => {
+  const online = members.filter((m) => m.status !== "offline");
+  const offline = members.filter((m) => m.status === "offline");
+
+  return (
+    <div className="flex flex-col gap-4 p-2">
+      <div>
+        <p className="mb-2 px-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+          آنلاین  {online.length}
+        </p>
+        <div className="space-y-0.5">
+          {online.map((member) => (
+            <MemberItem key={member.id} member={member} />
+          ))}
+        </div>
+      </div>
+      <div>
+        <p className="mb-2 px-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+          آفلاین  {offline.length}
+        </p>
+        <div className="space-y-0.5">
+          {offline.map((member) => (
+            <MemberItem key={member.id} member={member} showStatus={false} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => (
+  <div className="flex items-center gap-2 rounded-md bg-sidebar-accent/50 p-2">
+    <Avatar className="size-8">
+      <AvatarImage src={user.avatar} alt={user.name} />
+      <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
+    </Avatar>
+    <div className="flex-1 truncate">
+      <p className="truncate text-sm font-medium">{user.name}</p>
+      <p className="truncate text-xs text-muted-foreground">آنلاین</p>
+    </div>
+    <TooltipProvider delayDuration={0}>
+      <div className="flex gap-0.5">
+        {[
+          { icon: Mic, label: "بی‌صدا" },
+          { icon: Headphones, label: "قطع صدا" },
+          { icon: Settings, label: "تنظیمات" },
+        ].map(({ icon: Icon, label }) => (
+          <Tooltip key={label}>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8">
+                <Icon className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{label}</TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+    </TooltipProvider>
+  </div>
+);
+
+const SidebarLeft = (props: React.ComponentProps<typeof Sidebar>) => (
+  <Sidebar side="right" {...props}>
+    <SidebarHeader>
+      <WorkspaceSwitcher />
+    </SidebarHeader>
+    <SidebarContent className="overflow-hidden">
+      <ScrollArea className="min-h-0 flex-1">
+        {channelCategories.map((category) => (
+          <ChannelCategoryGroup key={category.id} category={category} />
+        ))}
+      </ScrollArea>
+    </SidebarContent>
+    <SidebarFooter>
+      <NavUser user={currentUser} />
+    </SidebarFooter>
+  </Sidebar>
+);
+
+const SidebarRight = (props: React.ComponentProps<typeof Sidebar>) => (
+  <Sidebar
+    side="left"
+    collapsible="none"
+    className="sticky top-0 hidden h-svh w-60 border-s lg:flex"
+    {...props}
+  >
+    <SidebarHeader className="h-16 justify-center border-b">
+      <div className="px-2">
+        <span className="font-semibold">اعضا</span>
+      </div>
+    </SidebarHeader>
+    <SidebarContent className="overflow-hidden">
+      <ScrollArea className="min-h-0 flex-1">
+        <MembersList />
+      </ScrollArea>
+    </SidebarContent>
+  </Sidebar>
+);
+
+interface Sidebar19Props {
+  className?: string;
+}
+
+const Sidebar19 = ({ className }: Sidebar19Props) => (
+  <SidebarProvider dir="rtl" lang="fa" className={cn(className)}>
+    <SidebarLeft />
+    <SidebarInset>
+      <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger className="-ms-1" />
+        <Separator
+          orientation="vertical"
+          className="ms-2 data-[orientation=vertical]:h-4"
+        />
+        <Hash className="size-5 text-muted-foreground" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage className="font-semibold">عمومی</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div className="flex flex-1 flex-col gap-4 p-4">
+        <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+    <SidebarRight />
+  </SidebarProvider>
+);
+
+export { Sidebar19 };
diff --git a/blocks/sidebar2.tsx b/blocks/sidebar2.tsx
new file mode 100644
index 0000000..94318b4
--- /dev/null
+++ b/blocks/sidebar2.tsx
@@ -0,0 +1,316 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronRight,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  Settings,
+  Sparkles,
+  Star,
+  Users,
+} from "lucide-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+};
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        <SidebarLogo logo={sidebarData.logo} />
+      </SidebarHeader>
+      <SidebarContent>
+        {sidebarData.navGroups.map((group) => (
+          <Collapsible
+            key={group.title}
+            defaultOpen={group.defaultOpen}
+            className="group/collapsible"
+          >
+            <SidebarGroup>
+              <SidebarGroupLabel asChild>
+                <CollapsibleTrigger className="flex w-full items-center">
+                  {group.title}
+                  <ChevronRight className="ms-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {group.items.map((item) => (
+                      <NavMenuItem key={item.label} item={item} />
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarGroup>
+          <SidebarGroupLabel>{sidebarData.footerGroup.title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {sidebarData.footerGroup.items.map((item) => (
+                <NavMenuItem key={item.label} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar2Props {
+  className?: string;
+}
+
+const Sidebar2 = ({ className }: Sidebar2Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar2 };
diff --git a/blocks/sidebar20.tsx b/blocks/sidebar20.tsx
new file mode 100644
index 0000000..0262e63
--- /dev/null
+++ b/blocks/sidebar20.tsx
@@ -0,0 +1,321 @@
+"use client";
+
+import {
+  Book,
+  ChevronRight,
+  ExternalLink,
+  FileText,
+  Search,
+} from "lucide-react";
+import * as React from "react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Documentation structure
+const docsNav = [
+  {
+    title: "شروع کار",
+    defaultOpen: true,
+    items: [
+      { title: "مقدمه", href: "#", isActive: true },
+      { title: "نصب", href: "#" },
+      { title: "ساختار پروژه", href: "#" },
+      { title: "پیکربندی", href: "#" },
+    ],
+  },
+  {
+    title: "مفاهیم اصلی",
+    defaultOpen: true,
+    items: [
+      { title: "کامپوننت‌ها", href: "#" },
+      { title: "استایل‌دهی", href: "#" },
+      { title: "تم", href: "#" },
+      { title: "حالت تاریک", href: "#" },
+      { title: "تایپوگرافی", href: "#" },
+    ],
+  },
+  {
+    title: "فهرست کامپوننت‌ها",
+    defaultOpen: false,
+    items: [
+      { title: "Accordion", href: "#" },
+      { title: "Alert", href: "#" },
+      { title: "Avatar", href: "#" },
+      { title: "Badge", href: "#" },
+      { title: "Button", href: "#" },
+      { title: "Card", href: "#" },
+      { title: "Checkbox", href: "#" },
+      { title: "Dialog", href: "#" },
+      { title: "Dropdown Menu", href: "#" },
+      { title: "Input", href: "#" },
+      { title: "Select", href: "#" },
+      { title: "Sidebar", href: "#" },
+      { title: "Table", href: "#" },
+      { title: "Tabs", href: "#" },
+      { title: "Toast", href: "#" },
+    ],
+  },
+  {
+    title: "راهنماها",
+    defaultOpen: false,
+    items: [
+      { title: "احراز هویت", href: "#" },
+      { title: "فرم‌ها", href: "#" },
+      { title: "دریافت داده", href: "#" },
+      { title: "مدیریت وضعیت", href: "#" },
+      { title: "تست", href: "#" },
+      { title: "استقرار", href: "#" },
+    ],
+  },
+  {
+    title: "مرجع اتصال هوشمند",
+    defaultOpen: false,
+    items: [
+      { title: "CLI", href: "#" },
+      { title: "پیکربندی", href: "#" },
+      { title: "ابزارها", href: "#" },
+    ],
+  },
+];
+
+// On this page - table of contents
+const tableOfContents = [
+  { title: "نمای کلی", href: "#overview", level: 1 },
+  { title: "پیش‌نیازها", href: "#prerequisites", level: 2 },
+  { title: "شروع سریع", href: "#quick-start", level: 1 },
+  { title: "استفاده از CLI", href: "#using-the-cli", level: 2 },
+  { title: "راه‌اندازی دستی", href: "#manual-setup", level: 2 },
+  { title: "پیکربندی", href: "#configuration", level: 1 },
+  { title: "گزینه‌های پایه", href: "#basic-options", level: 2 },
+  { title: "گزینه‌های پیشرفته", href: "#advanced-options", level: 2 },
+  { title: "گام‌های بعدی", href: "#next-steps", level: 1 },
+];
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="جستجو در مستندات..."
+            className="ps-8"
+          />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const DocSection = ({ section }: { section: (typeof docsNav)[0] }) => {
+  const [isOpen, setIsOpen] = React.useState(section.defaultOpen);
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupLabel asChild className="group/label">
+          <CollapsibleTrigger className="flex w-full items-center">
+            <ChevronRight className="ms-1 size-3.5 transition-transform group-data-[state=open]/label:rotate-90" />
+            <span>{section.title}</span>
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {section.items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild isActive={item.isActive}>
+                    <a href={item.href}>
+                      <FileText className="size-4" />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </CollapsibleContent>
+      </SidebarGroup>
+    </Collapsible>
+  );
+};
+
+const SidebarLeft = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                  <Book className="size-5 text-primary-foreground" />
+                </div>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-semibold">مستندات</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    v2.0.0
+                  </span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {docsNav.map((section) => (
+            <DocSection key={section.title} section={section} />
+          ))}
+
+          {/* لینک‌های خارجی */}
+          <SidebarGroup className="mt-auto">
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#" target="_blank" rel="noopener noreferrer">
+                      <ExternalLink className="size-4" />
+                      <span>مخزن کد</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#" target="_blank" rel="noopener noreferrer">
+                      <ExternalLink className="size-4" />
+                      <span>گفتگوی تیمی</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </ScrollArea>
+      </SidebarContent>
+    </Sidebar>
+  );
+};
+
+const SidebarRight = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const [activeSection, setActiveSection] = React.useState("#overview");
+
+  return (
+    <Sidebar
+      side="left"
+      collapsible="none"
+      className="sticky top-0 hidden h-svh w-56 border-s lg:flex"
+      {...props}
+    >
+      <SidebarHeader className="h-16 justify-center border-b">
+        <div className="px-2">
+          <span className="text-sm font-medium">در این صفحه</span>
+        </div>
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <nav className="flex flex-col gap-1">
+                {tableOfContents.map((item) => (
+                  <a
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setActiveSection(item.href)}
+                    className={cn(
+                      "block rounded-md px-2 py-1 text-sm transition-colors hover:text-foreground",
+                      item.level === 2 && "ps-4",
+                      activeSection === item.href
+                        ? "font-medium text-foreground"
+                        : "text-muted-foreground",
+                    )}
+                  >
+                    {item.title}
+                  </a>
+                ))}
+              </nav>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </ScrollArea>
+      </SidebarContent>
+    </Sidebar>
+  );
+};
+
+interface Sidebar20Props {
+  className?: string;
+}
+
+const Sidebar20 = ({ className }: Sidebar20Props) => {
+  return (
+    <SidebarProvider dir="rtl" lang="fa" className={cn(className)}>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">مستندات</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">شروع کار</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>مقدمه</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar20 };
diff --git a/blocks/sidebar21.tsx b/blocks/sidebar21.tsx
new file mode 100644
index 0000000..3b5170e
--- /dev/null
+++ b/blocks/sidebar21.tsx
@@ -0,0 +1,466 @@
+"use client";
+
+import {
+  ArrowRight,
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const [activeItem, setActiveItem] = React.useState<NavItem | null>(null);
+
+  // Get all items with children for drill-down
+  const drillableItems = sidebarData.navGroups.flatMap((group) =>
+    group.items.filter((item) => item.children && item.children.length > 0),
+  );
+
+  const handleItemClick = (item: NavItem) => {
+    if (item.children && item.children.length > 0) {
+      setActiveItem(item);
+    }
+  };
+
+  const handleBackToMain = () => {
+    setActiveItem(null);
+  };
+
+  // Main view - show all nav groups
+  if (!activeItem) {
+    return (
+      <Sidebar side="right" {...props}>
+        <SidebarHeader>
+          <SidebarLogo logo={sidebarData.logo} />
+        </SidebarHeader>
+        <SidebarContent>
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => {
+                    const Icon = item.icon;
+                    const hasChildren =
+                      item.children && item.children.length > 0;
+
+                    return (
+                      <SidebarMenuItem key={item.label}>
+                        {hasChildren ? (
+                          <SidebarMenuButton
+                            isActive={item.isActive}
+                            onClick={() => handleItemClick(item)}
+                          >
+                            <Icon className="size-4" />
+                            <span>{item.label}</span>
+                            <ChevronRight className="ms-auto size-4" />
+                          </SidebarMenuButton>
+                        ) : (
+                          <SidebarMenuButton asChild isActive={item.isActive}>
+                            <a href={item.href}>
+                              <Icon className="size-4" />
+                              <span>{item.label}</span>
+                            </a>
+                          </SidebarMenuButton>
+                        )}
+                      </SidebarMenuItem>
+                    );
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        <SidebarFooter>
+          {sidebarData.user && <NavUser user={sidebarData.user} />}
+        </SidebarFooter>
+        <SidebarRail />
+      </Sidebar>
+    );
+  }
+
+  // Drill-down view - show sub-items
+  const Icon = activeItem.icon;
+
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader className="border-b">
+        <div className="flex items-center gap-2 px-2 py-1">
+          <button
+            type="button"
+            onClick={handleBackToMain}
+            aria-label="بازگشت"
+            className="flex size-8 items-center justify-center rounded-md hover:bg-sidebar-accent"
+          >
+            <ArrowRight className="size-4" />
+          </button>
+          <div className="flex flex-1 items-center gap-2">
+            <Icon className="size-4" />
+            <span className="font-medium">{activeItem.label}</span>
+          </div>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {activeItem.children!.map((child) => {
+                const ChildIcon = child.icon;
+                return (
+                  <SidebarMenuItem key={child.label}>
+                    <SidebarMenuButton asChild isActive={child.isActive}>
+                      <a href={child.href}>
+                        <ChildIcon className="size-4" />
+                        <span>{child.label}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar21Props {
+  className?: string;
+}
+
+const Sidebar21 = ({ className }: Sidebar21Props) => {
+  return (
+    <SidebarProvider dir="rtl" lang="fa" className={cn(className)}>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar21 };
diff --git a/blocks/sidebar3.tsx b/blocks/sidebar3.tsx
new file mode 100644
index 0000000..57cae79
--- /dev/null
+++ b/blocks/sidebar3.tsx
@@ -0,0 +1,278 @@
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  Settings,
+  Sparkles,
+  Star,
+  Users,
+} from "lucide-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+};
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild isActive={item.isActive}>
+        <a href={item.href}>
+          <Icon className="size-4" />
+          <span>{item.label}</span>
+        </a>
+      </SidebarMenuButton>
+      {hasChildren && (
+        <SidebarMenuSub>
+          {item.children!.map((child) => (
+            <SidebarMenuSubItem key={child.label}>
+              <SidebarMenuSubButton asChild isActive={child.isActive}>
+                <a href={child.href}>{child.label}</a>
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+          ))}
+        </SidebarMenuSub>
+      )}
+    </SidebarMenuItem>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        <SidebarLogo logo={sidebarData.logo} />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarGroup>
+          <SidebarGroupLabel>{sidebarData.footerGroup.title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {sidebarData.footerGroup.items.map((item) => (
+                <NavMenuItem key={item.label} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar3Props {
+  className?: string;
+}
+
+const Sidebar3 = ({ className }: Sidebar3Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar3 };
diff --git a/blocks/sidebar4.tsx b/blocks/sidebar4.tsx
new file mode 100644
index 0000000..61e2dc7
--- /dev/null
+++ b/blocks/sidebar4.tsx
@@ -0,0 +1,306 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronRight,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  Settings,
+  Sparkles,
+  Star,
+  Users,
+} from "lucide-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  children?: NavItem[];
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+};
+
+type SidebarData = {
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  navGroups: NavGroup[];
+  footerGroup: NavGroup;
+};
+
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        <SidebarLogo logo={sidebarData.logo} />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarGroup>
+          <SidebarGroupLabel>{sidebarData.footerGroup.title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {sidebarData.footerGroup.items.map((item) => (
+                <NavMenuItem key={item.label} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar4Props {
+  className?: string;
+}
+
+const Sidebar4 = ({ className }: Sidebar4Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar4 };
diff --git a/blocks/sidebar5.tsx b/blocks/sidebar5.tsx
new file mode 100644
index 0000000..d06b590
--- /dev/null
+++ b/blocks/sidebar5.tsx
@@ -0,0 +1,377 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronRight,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  Users,
+} from "lucide-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        <SidebarLogo logo={sidebarData.logo} />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarGroup>
+          <SidebarGroupLabel>{sidebarData.footerGroup.title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {sidebarData.footerGroup.items.map((item) => (
+                <NavMenuItem key={item.label} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar5Props {
+  className?: string;
+}
+
+const Sidebar5 = ({ className }: Sidebar5Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar5 };
diff --git a/blocks/sidebar6.tsx b/blocks/sidebar6.tsx
new file mode 100644
index 0000000..ee02ed1
--- /dev/null
+++ b/blocks/sidebar6.tsx
@@ -0,0 +1,453 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Array<{
+    id: string;
+    name: string;
+    logo: string;
+    plan: string;
+  }>;
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg">
+          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              className="size-6 text-primary-foreground invert dark:invert-0"
+            />
+          </div>
+          <div className="flex flex-col gap-0.5 text-start leading-none">
+            <span className="font-medium">{logo.title}</span>
+            <span className="text-xs text-muted-foreground">
+              {logo.description}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        <SidebarLogo logo={sidebarData.logo} />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar6Props {
+  className?: string;
+}
+
+const Sidebar6 = ({ className }: Sidebar6Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar6 };
diff --git a/blocks/sidebar7.tsx b/blocks/sidebar7.tsx
new file mode 100644
index 0000000..b686fbb
--- /dev/null
+++ b/blocks/sidebar7.tsx
@@ -0,0 +1,514 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+
+  return (
+    <Sidebar side="right" {...props}>
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar7Props {
+  className?: string;
+}
+
+const Sidebar7 = ({ className }: Sidebar7Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar7 };
diff --git a/blocks/sidebar8.tsx b/blocks/sidebar8.tsx
new file mode 100644
index 0000000..6ea7566
--- /dev/null
+++ b/blocks/sidebar8.tsx
@@ -0,0 +1,519 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0 group-data-[collapsible=icon]:hidden">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={item.isActive}
+          tooltip={item.label}
+        >
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+
+  return (
+    <Sidebar side="right" collapsible="icon" {...props}>
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar8Props {
+  className?: string;
+}
+
+const Sidebar8 = ({ className }: Sidebar8Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar8 };
diff --git a/blocks/sidebar9.tsx b/blocks/sidebar9.tsx
new file mode 100644
index 0000000..e7cf10e
--- /dev/null
+++ b/blocks/sidebar9.tsx
@@ -0,0 +1,514 @@
+"use client";
+
+import {
+  BadgeCheck,
+  BarChart3,
+  Briefcase,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  ClipboardList,
+  Clock3,
+  FileText,
+  Folder,
+  Globe2,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Sparkles,
+  Star,
+  User,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+// Base nav item - used by simple sidebars
+type NavItem = {
+  label: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+  isActive?: boolean;
+  // Optional children for submenus (Sidebar3+)
+  children?: NavItem[];
+};
+
+// Nav group with optional collapsible state
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+  // Optional: default collapsed state (Sidebar2+)
+  defaultOpen?: boolean;
+};
+
+// User data for footer (Sidebar6+)
+type UserData = {
+  name: string;
+  email: string;
+  avatar: string;
+};
+
+// Workspace data for switcher (Sidebar7+)
+type Workspace = {
+  id: string;
+  name: string;
+  logo: string;
+  plan: string;
+};
+
+// Complete sidebar data structure
+type SidebarData = {
+  // Logo/branding (all sidebars)
+  logo: {
+    src: string;
+    alt: string;
+    title: string;
+    description: string;
+  };
+  // Main navigation groups (all sidebars)
+  navGroups: NavGroup[];
+  // Footer navigation group (all sidebars)
+  footerGroup: NavGroup;
+  // User data for user footer (Sidebar6+)
+  user?: UserData;
+  // Workspaces for switcher (Sidebar7+)
+  workspaces?: Workspace[];
+  // Currently active workspace (Sidebar7+)
+  activeWorkspace?: string;
+};
+
+// Shared sidebar data - works with all sidebar variations
+const sidebarData: SidebarData = {
+  logo: {
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "شاد‌سی‌ان بلاکس",
+    title: "ShadcnBlocks",
+    description: "اپلیکیشن خود را بسازید",
+  },
+  navGroups: [
+    {
+      title: "نمای کلی",
+      defaultOpen: true,
+      items: [
+        {
+          label: "داشبورد",
+          icon: LayoutDashboard,
+          href: "#",
+          isActive: true,
+        },
+        { label: "وظایف", icon: ClipboardList, href: "#" },
+        { label: "نقشه راه", icon: BarChart3, href: "#" },
+      ],
+    },
+    {
+      title: "پروژه‌ها",
+      defaultOpen: true,
+      items: [
+        {
+          label: "پروژه‌های فعال",
+          icon: Briefcase,
+          href: "#",
+          children: [
+            { label: "پروژه آلفا", icon: FileText, href: "#" },
+            { label: "پروژه بتا", icon: FileText, href: "#" },
+            { label: "پروژه گاما", icon: FileText, href: "#" },
+          ],
+        },
+        {
+          label: "بایگانی",
+          icon: Folder,
+          href: "#",
+          children: [
+            { label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
+            { label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
+          ],
+        },
+      ],
+    },
+    {
+      title: "تیم",
+      defaultOpen: false,
+      items: [
+        { label: "اعضا", icon: Users, href: "#" },
+        { label: "اسپرینت‌ها", icon: Clock3, href: "#" },
+        { label: "تأییدها", icon: BadgeCheck, href: "#" },
+        { label: "بازبینی‌ها", icon: Star, href: "#" },
+      ],
+    },
+    {
+      title: "فضای کار",
+      defaultOpen: false,
+      items: [
+        { label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
+        { label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
+      ],
+    },
+  ],
+  footerGroup: {
+    title: "پشتیبانی",
+    items: [
+      { label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
+      { label: "تنظیمات", icon: Settings, href: "#" },
+    ],
+  },
+  user: {
+    name: "علی رضایی",
+    email: "ali@example.com",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+  },
+  workspaces: [
+    {
+      id: "1",
+      name: "ShadcnBlocks",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "سازمانی",
+    },
+    {
+      id: "2",
+      name: "ری یو آی قالب‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "استارتاپ",
+    },
+    {
+      id: "3",
+      name: "ری یو آی بخش‌ها",
+      logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+      plan: "رایگان",
+    },
+  ],
+  activeWorkspace: "1",
+};
+
+// Helper to get active workspace
+const getActiveWorkspace = (data: SidebarData): Workspace | undefined => {
+  return data.workspaces?.find((w) => w.id === data.activeWorkspace);
+};
+
+const WorkspaceSwitcher = ({
+  workspaces,
+  activeWorkspace,
+}: {
+  workspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) => {
+  const [selected, setSelected] = React.useState(activeWorkspace);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
+                <img
+                  src={selected.logo}
+                  alt={selected.name}
+                  className="size-6 text-primary-foreground invert dark:invert-0"
+                />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{selected.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selected.plan}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              فضاهای کار
+            </DropdownMenuLabel>
+            {workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => setSelected(workspace)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm bg-primary">
+                  <img
+                    src={workspace.logo}
+                    alt={workspace.name}
+                    className="size-4 text-primary-foreground invert dark:invert-0"
+                  />
+                </div>
+                <span>{workspace.name}</span>
+                {workspace.id === selected.id && (
+                  <Check className="ms-auto size-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const SearchForm = () => {
+  return (
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            جستجو
+          </Label>
+          <SidebarInput id="search" placeholder="جستجو..." className="ps-8" />
+          <Search className="pointer-events-none absolute top-1/2 start-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+};
+
+const NavMenuItem = ({ item }: { item: NavItem }) => {
+  const Icon = item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+
+  if (!hasChildren) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={item.isActive}>
+          <a href={item.href}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={item.isActive}>
+            <Icon className="size-4" />
+            <span>{item.label}</span>
+            <ChevronRight className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.children!.map((child) => (
+              <SidebarMenuSubItem key={child.label}>
+                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                  <a href={child.href}>{child.label}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+};
+
+const NavUser = ({ user }: { user: UserData }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="size-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side="bottom"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <User className="me-2 size-4" />
+              حساب کاربری
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="me-2 size-4" />
+              خروج
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const activeWorkspace = getActiveWorkspace(sidebarData);
+
+  return (
+    <Sidebar side="right" variant="floating" {...props}>
+      <SidebarHeader>
+        {sidebarData.workspaces && activeWorkspace && (
+          <WorkspaceSwitcher
+            workspaces={sidebarData.workspaces}
+            activeWorkspace={activeWorkspace}
+          />
+        )}
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="overflow-hidden">
+        <ScrollArea className="min-h-0 flex-1">
+          {sidebarData.navGroups.map((group) => (
+            <SidebarGroup key={group.title}>
+              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <NavMenuItem key={item.label} item={item} />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        {sidebarData.user && <NavUser user={sidebarData.user} />}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+interface Sidebar9Props {
+  className?: string;
+}
+
+const Sidebar9 = ({ className }: Sidebar9Props) => {
+  return (
+    <SidebarProvider
+      dir="rtl"
+      lang="fa"
+      className={cn(className)}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="ms-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>داشبورد</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export { Sidebar9 };
diff --git a/blocks/signup1.tsx b/blocks/signup1.tsx
new file mode 100644
index 0000000..0d0001b
--- /dev/null
+++ b/blocks/signup1.tsx
@@ -0,0 +1,96 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Signup1Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+  };
+  buttonText?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  confirmPasswordPlaceholder?: string;
+  googleText?: string;
+  signupText?: string;
+  signupUrl?: string;
+  loginLinkText?: string;
+  className?: string;
+}
+
+const Signup1 = ({
+  heading = "ثبت‌نام",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ایجاد حساب کاربری",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  confirmPasswordPlaceholder = "تکرار رمز عبور",
+  signupText = "از قبل حساب کاربری دارید؟",
+  signupUrl = "https://ShadcnBlocks",
+  loginLinkText = "ورود",
+  className,
+}: Signup1Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-muted", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10 dark:invert"
+            />
+          </a>
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-md border border-muted bg-background px-6 py-8 shadow-md">
+            {heading && <h1 className="text-xl font-semibold">{heading}</h1>}
+            <Input
+              type="email"
+              placeholder={emailPlaceholder}
+              className="text-sm"
+              required
+            />
+            <Input
+              type="password"
+              placeholder={passwordPlaceholder}
+              className="text-sm"
+              required
+            />
+            <Input
+              type="password"
+              placeholder={confirmPasswordPlaceholder}
+              className="text-sm"
+              required
+            />
+            <Button type="submit" className="w-full">
+              {buttonText}
+            </Button>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {loginLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup1 };
diff --git a/blocks/signup10.tsx b/blocks/signup10.tsx
new file mode 100644
index 0000000..e0e3704
--- /dev/null
+++ b/blocks/signup10.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Signup10Props {
+  className?: string;
+  heading?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  dividerText?: string;
+  emailPlaceholder?: string;
+  continueButtonText?: string;
+  termsIntroText?: string;
+  termsLinkText?: string;
+  termsUrl?: string;
+  termsConnectorText?: string;
+  privacyLinkText?: string;
+  privacyUrl?: string;
+  loginPromptText?: string;
+  loginUrl?: string;
+  loginLinkText?: string;
+  logoAlt?: string;
+  sideImageAlt?: string;
+  sideImageSrc?: string;
+}
+
+const Signup10 = ({
+  className,
+  heading = "حساب رایگان خود را ایجاد کنید",
+  googleText = "ثبت‌نام با گوگل",
+  googleIconAlt = "گوگل",
+  dividerText = "یا",
+  emailPlaceholder = "example@email.com",
+  continueButtonText = "ادامه",
+  termsIntroText = "با ادامه، با",
+  termsLinkText = "شرایط استفاده",
+  termsUrl = "#",
+  termsConnectorText = "و",
+  privacyLinkText = "حریم خصوصی",
+  privacyUrl = "#",
+  loginPromptText = "از قبل حساب کاربری دارید؟",
+  loginUrl = "#",
+  loginLinkText = "ورود",
+  logoAlt = "لوگو",
+  sideImageAlt = "پیش‌نمایش محصول",
+  sideImageSrc = "/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg",
+}: Signup10Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background", className)}
+    >
+      <div className="container flex min-h-screen flex-col items-center justify-between gap-20 py-16 lg:flex-row lg:px-0 lg:py-0">
+        <div className="mx-auto flex w-full max-w-xl flex-col items-center gap-6">
+          <div className="flex h-14 w-14 items-center justify-center">
+            <img
+              className="h-14 w-12"
+              alt={logoAlt}
+              src="/block-media/shadcnblocks/block/block-1.svg"
+            />
+          </div>
+
+          <h1 className="mb-8 w-full text-center text-3xl font-medium tracking-tighter text-foreground md:text-xl">
+            {heading}
+          </h1>
+
+          <Button
+            type="button"
+            variant="outline"
+            className="flex h-14 w-full max-w-lg items-center justify-center gap-8 rounded-full border-muted-foreground/30"
+          >
+            <img
+              className="h-5 w-5"
+              alt={googleIconAlt}
+              src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+            />
+            <span className="font-medium">{googleText}</span>
+          </Button>
+
+          <div className="flex w-full max-w-lg items-center gap-6">
+            <Separator className="flex-1" />
+            <span className="font-medium tracking-tight">{dividerText}</span>
+            <Separator className="flex-1" />
+          </div>
+
+          <div className="w-full max-w-lg">
+            <Input
+              type="email"
+              className="h-14 rounded-full border-none bg-muted px-5 py-4 font-medium"
+              placeholder={emailPlaceholder}
+              required
+            />
+          </div>
+
+          <Button
+            type="submit"
+            className="h-14 w-full max-w-lg rounded-full bg-foreground text-background hover:bg-foreground/90"
+          >
+            <span className="font-medium tracking-tight">
+              {continueButtonText}
+            </span>
+          </Button>
+
+          <p className="mb-8 w-full text-center text-sm tracking-tight text-foreground/40">
+            {termsIntroText}{" "}
+            <a href={termsUrl} className="underline">
+              {termsLinkText}
+            </a>{" "}
+            {termsConnectorText}{" "}
+            <a href={privacyUrl} className="underline">
+              {privacyLinkText}
+            </a>
+            .
+          </p>
+
+          <p className="mb-20 w-full text-center text-sm font-medium tracking-tight text-muted-foreground lg:mb-8">
+            {loginPromptText}{" "}
+            <a href={loginUrl} className="underline">
+              {loginLinkText}
+            </a>
+          </p>
+        </div>
+        <div className="hidden h-screen w-full bg-muted lg:block">
+          <img
+            src={sideImageSrc}
+            className="size-full object-cover"
+            alt={sideImageAlt}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup10 };
diff --git a/blocks/signup2.tsx b/blocks/signup2.tsx
new file mode 100644
index 0000000..355d119
--- /dev/null
+++ b/blocks/signup2.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Signup2Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+  };
+  buttonText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  confirmPasswordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  confirmPasswordPlaceholder?: string;
+  googleText?: string;
+  signupText?: string;
+  signupUrl?: string;
+  loginLinkText?: string;
+  className?: string;
+}
+
+const Signup2 = ({
+  heading = "ثبت‌نام",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ایجاد حساب کاربری",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  confirmPasswordLabel = "تکرار رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  confirmPasswordPlaceholder = "تکرار رمز عبور",
+  signupText = "از قبل حساب کاربری دارید؟",
+  signupUrl = "https://ShadcnBlocks",
+  loginLinkText = "ورود",
+  className,
+}: Signup2Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-muted", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10 dark:invert"
+            />
+          </a>
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-md border border-muted bg-background px-6 py-8 shadow-md">
+            {heading && <h1 className="text-xl font-semibold">{heading}</h1>}
+            <div className="flex w-full flex-col gap-2">
+              <Label>{emailLabel}</Label>
+              <Input
+                type="email"
+                placeholder={emailPlaceholder}
+                className="text-sm"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{passwordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={passwordPlaceholder}
+                className="text-sm"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{confirmPasswordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={confirmPasswordPlaceholder}
+                className="text-sm"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              {buttonText}
+            </Button>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {loginLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup2 };
diff --git a/blocks/signup3.tsx b/blocks/signup3.tsx
new file mode 100644
index 0000000..2811e20
--- /dev/null
+++ b/blocks/signup3.tsx
@@ -0,0 +1,128 @@
+import { FaFacebook, FaGithub, FaGoogle } from "react-icons/fa";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Signup3Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  buttonText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  googleText?: string;
+  githubText?: string;
+  facebookText?: string;
+  loginPromptText?: string;
+  loginText?: string;
+  loginUrl?: string;
+  className?: string;
+}
+
+const Signup3 = ({
+  heading = "ثبت‌نام",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ایجاد حساب کاربری",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  googleText = "ثبت‌نام با گوگل",
+  githubText = "ثبت‌نام با گیت‌هاب",
+  facebookText = "ثبت‌نام با فیسبوک",
+  loginPromptText = "از قبل حساب کاربری دارید؟",
+  loginText = "ورود",
+  loginUrl = "https://ShadcnBlocks",
+  className,
+}: Signup3Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex w-full max-w-sm flex-col items-center gap-y-8">
+          <div className="flex flex-col items-center gap-y-2">
+            <div className="flex items-center gap-1 lg:justify-start">
+              <a href={logo.url}>
+                <img
+                  src={logo.src}
+                  alt={logo.alt}
+                  title={logo.title}
+                  className="h-12"
+                />
+              </a>
+            </div>
+          </div>
+          <div className="flex w-full flex-col gap-8 rounded-md bg-muted px-6 py-8">
+            <div className="flex flex-col items-center gap-y-2">
+              {heading && <h1 className="text-xl font-semibold">{heading}</h1>}
+            </div>
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
+                <Label>{emailLabel}</Label>
+                <Input
+                  type="email"
+                  placeholder={emailPlaceholder}
+                  required
+                  className="bg-background"
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label>{passwordLabel}</Label>
+                <Input
+                  type="password"
+                  placeholder={passwordPlaceholder}
+                  required
+                  className="bg-background"
+                />
+              </div>
+              <Button type="submit" className="mt-2 w-full">
+                {buttonText}
+              </Button>
+              <div className="flex flex-col gap-2">
+                <Button variant="outline" className="w-full">
+                  <FaGoogle className="size-4" />
+                  {googleText}
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <FaGithub className="size-4" />
+                  {githubText}
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <FaFacebook className="size-4" />
+                  {facebookText}
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{loginPromptText}</p>
+            <a
+              href={loginUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {loginText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup3 };
diff --git a/blocks/signup4.tsx b/blocks/signup4.tsx
new file mode 100644
index 0000000..4dfc288
--- /dev/null
+++ b/blocks/signup4.tsx
@@ -0,0 +1,144 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Signup4Props {
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  className?: string;
+  signupText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  facebookText?: string;
+  facebookIconAlt?: string;
+  githubText?: string;
+  githubIconAlt?: string;
+  loginText?: string;
+  loginLinkText?: string;
+  loginUrl?: string;
+}
+
+const Signup4 = ({
+  className,
+  heading = "ثبت‌نام",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/block-1.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  signupText = "ایجاد حساب کاربری",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  googleText = "ثبت‌نام با گوگل",
+  googleIconAlt = "گوگل",
+  facebookText = "ثبت‌نام با فیسبوک",
+  facebookIconAlt = "فیسبوک",
+  githubText = "ثبت‌نام با گیت‌هاب",
+  githubIconAlt = "گیت‌هاب",
+  loginText = "از قبل حساب کاربری دارید؟",
+  loginLinkText = "ورود",
+  loginUrl = "#",
+}: Signup4Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex w-full max-w-sm flex-col items-center gap-y-8">
+          <div className="flex flex-col items-center gap-y-2">
+            <div className="flex items-center gap-1 lg:justify-start">
+              <a href={logo.url}>
+                <img
+                  src={logo.src}
+                  alt={logo.alt}
+                  title={logo.title}
+                  className="h-12"
+                />
+              </a>
+            </div>
+            <h1 className="text-xl font-semibold">{heading}</h1>
+          </div>
+          <div className="flex w-full flex-col gap-8 rounded-md border border-input bg-background px-6 py-12">
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
+                <Label>{emailLabel}</Label>
+                <Input
+                  type="email"
+                  placeholder={emailPlaceholder}
+                  required
+                  className="bg-background"
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label>{passwordLabel}</Label>
+                <Input
+                  type="password"
+                  placeholder={passwordPlaceholder}
+                  required
+                  className="bg-background"
+                />
+              </div>
+              <Button type="submit" className="mt-2 w-full">
+                {signupText}
+              </Button>
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="grid gap-4">
+                <Button variant="outline" className="w-full">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                    alt={googleIconAlt}
+                    className="size-5"
+                  />
+                  {googleText}
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/github-icon.svg"
+                    alt={githubIconAlt}
+                    className="size-5"
+                  />
+                  {githubText}
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
+                    alt={facebookIconAlt}
+                    className="size-5"
+                  />
+                  {facebookText}
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{loginText}</p>
+            <a
+              href={loginUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {loginLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup4 };
diff --git a/blocks/signup5.tsx b/blocks/signup5.tsx
new file mode 100644
index 0000000..a1a25e0
--- /dev/null
+++ b/blocks/signup5.tsx
@@ -0,0 +1,136 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Signup5Props {
+  className?: string;
+  heading?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+  };
+  buttonText?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  githubText?: string;
+  githubIconAlt?: string;
+  facebookText?: string;
+  facebookIconAlt?: string;
+  signupText?: string;
+  signupUrl?: string;
+  loginLinkText?: string;
+}
+
+const Signup5 = ({
+  className,
+  heading = "ثبت‌نام",
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ایجاد حساب کاربری",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  googleText = "ثبت‌نام با گوگل",
+  googleIconAlt = "گوگل",
+  githubText = "ثبت‌نام با گیت‌هاب",
+  githubIconAlt = "گیت‌هاب",
+  facebookText = "ثبت‌نام با فیسبوک",
+  facebookIconAlt = "فیسبوک",
+  signupText = "از قبل حساب کاربری دارید؟",
+  signupUrl = "https://ShadcnBlocks",
+  loginLinkText = "ورود",
+}: Signup5Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-background", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10 dark:invert"
+            />
+          </a>
+          {heading && <h1 className="text-xl font-semibold">{heading}</h1>}
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-lg bg-muted px-6 py-12">
+            <div className="flex w-full flex-col gap-2">
+              <Label>{emailLabel}</Label>
+              <Input
+                type="email"
+                placeholder={emailPlaceholder}
+                className="bg-background text-sm"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{passwordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={passwordPlaceholder}
+                className="bg-background text-sm"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              {buttonText}
+            </Button>
+            <div className="flex w-full flex-col gap-2">
+              <Button type="button" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                  className="size-5"
+                  alt={googleIconAlt}
+                />
+                {googleText}
+              </Button>
+              <Button type="button" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
+                  className="size-5"
+                  alt={facebookIconAlt}
+                />
+                {facebookText}
+              </Button>
+              <Button type="button" className="w-full" variant="outline">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/github-icon.svg"
+                  className="size-5"
+                  alt={githubIconAlt}
+                />
+                {githubText}
+              </Button>
+            </div>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {loginLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup5 };
diff --git a/blocks/signup6.tsx b/blocks/signup6.tsx
new file mode 100644
index 0000000..b06b46a
--- /dev/null
+++ b/blocks/signup6.tsx
@@ -0,0 +1,125 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface Signup6Props {
+  className?: string;
+  logo: {
+    url: string;
+    src: string;
+    alt: string;
+    title?: string;
+  };
+  buttonText?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  confirmPasswordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  confirmPasswordPlaceholder?: string;
+  signupText?: string;
+  signupUrl?: string;
+  loginLinkText?: string;
+}
+
+const Signup6 = ({
+  className,
+  logo = {
+    url: "https://www.ShadcnBlocks",
+    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg",
+    alt: "لوگو",
+    title: "نام برند",
+  },
+  buttonText = "ایجاد حساب کاربری",
+  googleText = "ثبت‌نام با گوگل",
+  googleIconAlt = "گوگل",
+  emailLabel = "ایمیل",
+  passwordLabel = "رمز عبور",
+  confirmPasswordLabel = "تکرار رمز عبور",
+  emailPlaceholder = "example@email.com",
+  passwordPlaceholder = "رمز عبور",
+  confirmPasswordPlaceholder = "تکرار رمز عبور",
+  signupText = "از قبل حساب کاربری دارید؟",
+  signupUrl = "https://ShadcnBlocks",
+  loginLinkText = "ورود",
+}: Signup6Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("h-screen bg-background", className)}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-6 lg:justify-start">
+          <a href={logo.url}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              title={logo.title}
+              className="h-10 dark:invert"
+            />
+          </a>
+          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-lg border px-6 py-12">
+            <Button type="button" className="w-full">
+              <img
+                src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                className="ms-2 size-4"
+                alt={googleIconAlt}
+              />
+              {googleText}
+            </Button>
+
+            <div className="relative flex w-full items-center justify-center py-6">
+              <div className="absolute h-px w-full border-t border-border"></div>
+            </div>
+
+            <div className="flex w-full flex-col gap-2">
+              <Label>{emailLabel}</Label>
+              <Input
+                type="email"
+                placeholder={emailPlaceholder}
+                className="bg-background text-sm"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{passwordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={passwordPlaceholder}
+                className="bg-background text-sm"
+                required
+              />
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <Label>{confirmPasswordLabel}</Label>
+              <Input
+                type="password"
+                placeholder={confirmPasswordPlaceholder}
+                className="bg-background text-sm"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full" variant="secondary">
+              {buttonText}
+            </Button>
+          </div>
+          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+            <p>{signupText}</p>
+            <a
+              href={signupUrl}
+              className="font-medium text-primary hover:underline"
+            >
+              {loginLinkText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup6 };
diff --git a/blocks/signup7.tsx b/blocks/signup7.tsx
new file mode 100644
index 0000000..e54278a
--- /dev/null
+++ b/blocks/signup7.tsx
@@ -0,0 +1,180 @@
+import { CheckSquare, FolderKanban, Users } from "lucide-react";
+import { FcGoogle } from "react-icons/fc";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Signup7Props {
+  className?: string;
+  heading?: string;
+  description?: string;
+  googleText?: string;
+  dividerText?: string;
+  emailButtonText?: string;
+  ssoButtonText?: string;
+  loginPromptText?: string;
+  loginUrl?: string;
+  loginLinkText?: string;
+  termsIntroText?: string;
+  termsLinkText?: string;
+  termsUrl?: string;
+  termsConnectorText?: string;
+  privacyLinkText?: string;
+  privacyUrl?: string;
+  badgeMonthlyAlt?: string;
+  badgeProductHuntAlt?: string;
+  previewImageAlt?: string;
+  feature1Title?: string;
+  feature1Description?: string;
+  feature2Title?: string;
+  feature2Description?: string;
+  feature3Title?: string;
+  feature3Description?: string;
+}
+
+const Signup7 = ({
+  className,
+  heading = "حساب کاربری خود را همین امروز ایجاد کنید",
+  description = "پلن پایه برای استفاده شخصی. پلن‌های حرفه‌ای برای تیم‌ها و کسب‌وکارها.",
+  googleText = "ادامه با گوگل",
+  dividerText = "یا",
+  emailButtonText = "ادامه با ایمیل",
+  ssoButtonText = "یا ورود یکپارچه سازمانی (SSO)",
+  loginPromptText = "از قبل حساب کاربری دارید؟",
+  loginUrl = "/#",
+  loginLinkText = "ورود",
+  termsIntroText = "با ادامه، با",
+  termsLinkText = "شرایط استفاده",
+  termsUrl = "/#",
+  termsConnectorText = "و",
+  privacyLinkText = "حریم خصوصی",
+  privacyUrl = "/#",
+  badgeMonthlyAlt = "نشان ماهانه Product Hunt",
+  badgeProductHuntAlt = "نشان Product Hunt",
+  previewImageAlt = "پیش‌نمایش محصول",
+  feature1Title = "فضاهای کاری را منظم کنید",
+  feature1Description =
+    "همه کارها را در یک داشبورد متمرکز نگه دارید.",
+  feature2Title = "پیگیری وظایف و مهلت‌ها",
+  feature2Description =
+    "اولویت‌ها را تعیین کنید و پیشرفت همه پروژه‌ها را رصد کنید.",
+  feature3Title = "همکاری با تیم",
+  feature3Description =
+    "اسناد را به‌اشتراک بگذارید و با هم‌تیمی‌ها به‌صورت لحظه‌ای ارتباط بگیرید.",
+}: Signup7Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-muted/60 py-32 2xl:bg-background", className)}
+    >
+      <div className="container lg:max-w-[1400px] lg:px-0 2xl:px-8">
+        <div className="grid rounded-2xl border-border lg:grid-cols-2 lg:bg-muted/30 2xl:border 2xl:py-10">
+          <div className="mx-auto flex max-w-xl flex-col justify-between lg:px-20">
+            <div className="lg:mt-24">
+              <div className="flex flex-col gap-2">
+                <h1 className="text-xl font-bold">{heading}</h1>
+                <p className="font-medium text-muted-foreground">
+                  {description}
+                </p>
+              </div>
+              <div className="mt-16 flex flex-col gap-6">
+                <Button type="button">
+                  <FcGoogle />
+                  {googleText}
+                </Button>
+                <div className="flex items-center gap-2">
+                  <Separator className="flex-1" />
+                  <span className="text-sm text-muted-foreground">
+                    {dividerText}
+                  </span>
+                  <Separator className="flex-1" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Button type="button" variant="outline">
+                    {emailButtonText}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="text-muted-foreground hover:text-primary"
+                  >
+                    {ssoButtonText}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="mt-10 space-y-2">
+              <p className="text-sm text-muted-foreground">
+                {loginPromptText}{" "}
+                <a href={loginUrl} className="text-primary">
+                  {loginLinkText}
+                </a>
+              </p>
+              <p className="text-sm text-muted-foreground">
+                {termsIntroText}{" "}
+                <a href={termsUrl} className="text-primary">
+                  {termsLinkText}
+                </a>{" "}
+                {termsConnectorText}{" "}
+                <a href={privacyUrl} className="text-primary">
+                  {privacyLinkText}
+                </a>
+                .
+              </p>
+            </div>
+          </div>
+          <div className="rounded-s-2xl border-border pt-14 lg:border-y lg:border-s lg:bg-muted/60 lg:py-8 lg:ps-12">
+            <div className="mx-auto flex max-w-xl justify-between gap-4 lg:mx-0 lg:max-w-none lg:justify-start lg:gap-8">
+              <div className="flex flex-row items-center gap-4">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/ph-monthly.svg"
+                  alt={badgeMonthlyAlt}
+                  className="h-10"
+                />
+                <img
+                  src="/block-media/shadcnblocks/block/logos/producthunt-badge.png"
+                  alt={badgeProductHuntAlt}
+                  className="h-10"
+                />
+              </div>
+            </div>
+            <div className="mt-6 hidden rounded-s-xl border-y border-s border-dashed border-border bg-muted py-1.5 ps-1.5 lg:block">
+              <img
+                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                alt={previewImageAlt}
+                className="max-h-[450px] w-full rounded-s-xl border-y border-s border-border object-cover"
+              />
+            </div>
+            <div className="mt-8 me-3 hidden grid-cols-3 gap-3 lg:grid">
+              <div>
+                <FolderKanban className="mb-1 size-4" />
+                <p className="text-sm font-medium">{feature1Title}</p>
+                <p className="text-sm text-muted-foreground">
+                  {feature1Description}
+                </p>
+              </div>
+              <div>
+                <CheckSquare className="mb-1 size-4" />
+                <p className="text-sm font-medium">{feature2Title}</p>
+                <p className="text-sm text-muted-foreground">
+                  {feature2Description}
+                </p>
+              </div>
+              <div>
+                <Users className="mb-1 size-4" />
+                <p className="text-sm font-medium">{feature3Title}</p>
+                <p className="text-sm text-muted-foreground">
+                  {feature3Description}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup7 };
diff --git a/blocks/signup8.tsx b/blocks/signup8.tsx
new file mode 100644
index 0000000..1946494
--- /dev/null
+++ b/blocks/signup8.tsx
@@ -0,0 +1,118 @@
+import { ChevronRight } from "lucide-react";
+import React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Signup8Props {
+  className?: string;
+  badgeText?: string;
+  headingLine1?: string;
+  headingLine2?: string;
+  headingLine3?: string;
+  description?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  emailButtonText?: string;
+  noCreditCardText?: string;
+  previewLogoAlt?: string;
+}
+
+const Signup8 = ({
+  className,
+  badgeText = "بلوک‌های آماده برای توسعه اپلیکیشن",
+  headingLine1 = "بلوک‌های آماده",
+  headingLine2 = "با Shadcn UI",
+  headingLine3 = "و Tailwind.",
+  description = "مجموعه‌ای از کامپوننت‌های آماده و استاندارد بر پایه رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید مستقیماً در پروژه خود استفاده کنید.",
+  googleText = "ثبت‌نام با گوگل",
+  googleIconAlt = "گوگل",
+  emailButtonText = "ثبت‌نام با ایمیل",
+  noCreditCardText = "نیاز به کارت اعتباری نیست",
+  previewLogoAlt = "لوگو",
+}: Signup8Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-32", className)}
+    >
+      <div className="relative container flex flex-col items-center">
+        <div className="flex w-full flex-col items-center justify-between gap-8 overflow-hidden rounded-3xl border-border p-4 sm:border lg:flex-row lg:p-12">
+          <div className="flex w-full flex-col gap-8">
+            <Badge
+              variant="outline"
+              className="flex w-fit items-center gap-4 rounded-full px-6 py-2"
+            >
+              <span className="text-sm font-medium text-muted-foreground">
+                {badgeText}
+              </span>
+              <ChevronRight className="size-4! rtl:rotate-180" />
+            </Badge>
+
+            <h1 className="text-2xll font-semibold tracking-tighter">
+              {headingLine1}
+              <br />
+              {headingLine2}
+              <br />
+              {headingLine3}
+            </h1>
+
+            <p className="text-xl font-normal tracking-tight text-muted-foreground">
+              {description}
+            </p>
+
+            <div className="flex w-full flex-col gap-4">
+              <Button
+                type="button"
+                className="text-md h-12 w-full rounded-lg bg-primary text-primary-foreground"
+              >
+                <img
+                  src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+                  alt={googleIconAlt}
+                  className="size-4"
+                />
+                {googleText}
+              </Button>
+
+              <Button
+                type="button"
+                variant="outline"
+                className="text-md h-12 w-full rounded-lg"
+              >
+                {emailButtonText}
+              </Button>
+            </div>
+
+            <p className="text-center text-sm text-muted-foreground">
+              {noCreditCardText}
+            </p>
+          </div>
+
+          <div className="w-full">
+            <div className="ms-0 flex h-[500px] w-full flex-col items-center justify-center rounded-3xl border border-border bg-muted p-2 lg:ms-32">
+              <Card className="relative h-full w-full rounded-2xl border">
+                <CardContent className="flex h-full w-full items-center justify-center p-0">
+                  <div className="absolute top-4 inset-s-4 flex items-center gap-2">
+                    <div className="size-3.5 rounded-full bg-red-500" />
+                    <div className="size-3.5 rounded-full bg-yellow-500" />
+                    <div className="size-3.5 rounded-full bg-green-500" />
+                  </div>
+                  <img
+                    className="size-60"
+                    alt={previewLogoAlt}
+                    src="/block-media/shadcnblocks/block/block-1.svg"
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup8 };
diff --git a/blocks/signup9.tsx b/blocks/signup9.tsx
new file mode 100644
index 0000000..9f44a34
--- /dev/null
+++ b/blocks/signup9.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Signup9Logo {
+  id: string;
+  description: string;
+  image: string;
+  className: string;
+}
+
+interface Signup9Props {
+  className?: string;
+  heading?: string;
+  googleText?: string;
+  googleIconAlt?: string;
+  dividerText?: string;
+  emailPlaceholder?: string;
+  continueButtonText?: string;
+  loginPromptText?: string;
+  loginUrl?: string;
+  loginLinkText?: string;
+  logoAlt?: string;
+  logos?: Signup9Logo[];
+}
+
+const defaultLogos: Signup9Logo[] = [
+  {
+    id: "logo-1",
+    description: "لوگوی Astro",
+    image: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+    className: "h-6 w-auto",
+  },
+  {
+    id: "logo-2",
+    description: "لوگوی شرکت ۱",
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+    className: "h-6 w-auto",
+  },
+  {
+    id: "logo-3",
+    description: "لوگوی شرکت ۲",
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+    className: "h-6 w-auto",
+  },
+  {
+    id: "logo-4",
+    description: "لوگوی شرکت ۳",
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+    className: "h-6 w-auto",
+  },
+  {
+    id: "logo-5",
+    description: "لوگوی شرکت ۴",
+    image:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+    className: "h-6 w-auto",
+  },
+];
+
+const Signup9 = ({
+  className,
+  heading = "حساب رایگان خود را ایجاد کنید",
+  googleText = "ثبت‌نام با گوگل",
+  googleIconAlt = "گوگل",
+  dividerText = "یا",
+  emailPlaceholder = "example@email.com",
+  continueButtonText = "ادامه",
+  loginPromptText = "از قبل حساب کاربری دارید؟",
+  loginUrl = "#",
+  loginLinkText = "ورود",
+  logoAlt = "لوگو",
+  logos = defaultLogos,
+}: Signup9Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background", className)}
+    >
+      <div className="container flex min-h-screen items-center justify-center py-4">
+        <div className="mx-auto flex w-full max-w-xl flex-col items-center gap-6">
+          <div className="flex h-14 w-14 items-center justify-center">
+            <img
+              className="h-14 w-12"
+              alt={logoAlt}
+              src="/block-media/shadcnblocks/block/block-1.svg"
+            />
+          </div>
+
+          <h1 className="mb-8 w-full text-center text-3xl font-medium tracking-tighter text-foreground md:text-xl">
+            {heading}
+          </h1>
+
+          <Button
+            type="button"
+            variant="outline"
+            className="flex h-14 w-full max-w-lg items-center justify-center gap-8 rounded-full border-muted-foreground/30"
+          >
+            <img
+              className="h-5 w-5"
+              alt={googleIconAlt}
+              src="/block-media/shadcnblocks/block/logos/google-icon.svg"
+            />
+            <span className="font-medium">{googleText}</span>
+          </Button>
+
+          <div className="flex w-full max-w-lg items-center gap-6">
+            <Separator className="flex-1" />
+            <span className="font-medium tracking-tight">{dividerText}</span>
+            <Separator className="flex-1" />
+          </div>
+
+          <div className="w-full max-w-lg">
+            <Input
+              type="email"
+              className="h-14 rounded-full border-none bg-muted px-5 py-4 font-medium"
+              placeholder={emailPlaceholder}
+              required
+            />
+          </div>
+
+          <Button
+            type="submit"
+            className="h-14 w-full max-w-lg rounded-full bg-foreground text-background hover:bg-foreground/90"
+          >
+            <span className="font-medium tracking-tight">
+              {continueButtonText}
+            </span>
+          </Button>
+
+          <p className="mb-8 w-full text-center text-sm font-medium tracking-tight text-muted-foreground">
+            {loginPromptText}{" "}
+            <a href={loginUrl} className="cursor-pointer underline">
+              {loginLinkText}
+            </a>
+          </p>
+
+          <div className="relative mx-auto flex items-center justify-center opacity-20">
+            <Carousel
+              dir="rtl"
+              opts={{ loop: true, direction: "rtl" }}
+              plugins={[AutoScroll({ playOnInit: true })]}
+            >
+              <CarouselContent className="ms-0">
+                {logos.map((logo) => (
+                  <CarouselItem
+                    key={logo.id}
+                    className="flex basis-1/3 justify-center sm:basis-1/4 md:basis-1/5 lg:basis-1/4"
+                  >
+                    <div className="flex shrink-0 items-center justify-center lg:mx-10">
+                      <img
+                        src={logo.image}
+                        alt={logo.description}
+                        className={logo.className}
+                      />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+            <div className="pointer-events-none absolute inset-y-0 inset-s-0 w-12 bg-linear-to-e from-background to-transparent" />
+            <div className="pointer-events-none absolute inset-y-0 inset-e-0 w-12 bg-linear-to-s from-background to-transparent" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Signup9 };
diff --git a/blocks/skills1.tsx b/blocks/skills1.tsx
new file mode 100644
index 0000000..0adfac7
--- /dev/null
+++ b/blocks/skills1.tsx
@@ -0,0 +1,114 @@
+import { CornerDownRight } from "lucide-react";
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Skills1Props {
+  className?: string;
+}
+
+const Skills1 = ({ className }: Skills1Props) => {
+  const stack = [
+    {
+      name: "Figma",
+      category: "ابزار طراحی",
+      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      experience: "۲ سال سابقه",
+      className: "h-9",
+    },
+    {
+      name: "React",
+      category: "کتابخانه جاوااسکریپت",
+      icon: "/block-media/shadcnblocks/block/logos/react-icon.svg",
+      experience: "۴ سال سابقه",
+    },
+    {
+      name: "Next.js",
+      category: "فریم‌ورک فول‌استک",
+      icon: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+      experience: "۳ سال سابقه",
+      className: "dark:invert",
+    },
+    {
+      name: "استایل‌دهی مدرن",
+      category: "فریم‌ورک CSS",
+      icon: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+      experience: "۳ سال سابقه",
+    },
+    {
+      name: "v0",
+      category: "ابزار هوش مصنوعی",
+      icon: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
+      experience: "۳ سال سابقه",
+      className: "dark:invert",
+    },
+    {
+      name: "Vite",
+      category: "ابزار بیلد",
+      icon: "/block-media/shadcnblocks/block/logos/vite-icon.svg",
+      experience: "۳ سال سابقه",
+    },
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
+          <div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
+            <h1 className="text-2xll font-semibold tracking-tight lg:text-2xll">
+              ابزارها و پشته فنی
+            </h1>
+            <p className="text-base text-foreground/50">
+              فناوری‌هایی که هر روز با آن‌ها طراحی و توسعه می‌دهم  از رابط
+              کاربری تا استقرار محصول.
+            </p>
+
+            <div className="mt-20 flex w-full justify-between border-t py-2 lg:mt-34">
+              <Button variant="ghost" className="tracking-tight lg:text-lg">
+                <CornerDownRight className="size-5 text-orange-500" />
+                گیت‌هاب
+              </Button>
+              <Button variant="ghost" className="tracking-tight lg:text-lg">
+                <CornerDownRight className="size-5 text-orange-500" />
+                تماس بگیرید
+              </Button>
+            </div>
+          </div>
+          <ul className="relative col-span-4 w-full space-y-4">
+            {stack.map((item, index) => (
+              <li
+                key={index}
+                className="flex flex-row items-center justify-between gap-10 rounded-2xl bg-muted p-2"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="flex size-20 items-center justify-center rounded-2xl bg-background p-2">
+                    <img
+                      src={item.icon}
+                      alt={item.name}
+                      className={cn("h-8 w-8 object-contain", item.className)}
+                    />
+                  </div>
+                  <div>
+                    <h2 className="text-xl font-semibold tracking-tight">
+                      {item.name}
+                    </h2>
+                    <p className="text-sm text-foreground/50">{item.category}</p>
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  className="me-3 rounded-full bg-foreground/5 hover:bg-foreground/10"
+                >
+                  {item.experience}
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Skills1 };
diff --git a/blocks/skills2.tsx b/blocks/skills2.tsx
new file mode 100644
index 0000000..a14a0e7
--- /dev/null
+++ b/blocks/skills2.tsx
@@ -0,0 +1,145 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Skills2Props {
+  className?: string;
+}
+
+const Skills2 = ({ className }: Skills2Props) => {
+  const stack = [
+    {
+      name: "Figma",
+      category: "ابزار طراحی",
+      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      usage: "۷۵٪",
+    },
+    {
+      name: "React",
+      category: "کتابخانه جاوااسکریپت",
+      icon: "/block-media/shadcnblocks/block/logos/react-icon.svg",
+      usage: "۹۵٪",
+    },
+    {
+      name: "Next.js",
+      category: "فریم‌ورک فول‌استک",
+      icon: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
+      usage: "۹۰٪",
+      className: "dark:invert",
+    },
+    {
+      name: "استایل‌دهی مدرن",
+      category: "فریم‌ورک CSS",
+      icon: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
+      usage: "۹۰٪",
+    },
+    {
+      name: "v0",
+      category: "ابزار هوش مصنوعی",
+      icon: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
+      usage: "۸۵٪",
+      className: "dark:invert",
+    },
+    {
+      name: "Vite",
+      category: "ابزار بیلد",
+      icon: "/block-media/shadcnblocks/block/logos/vite-icon.svg",
+      usage: "۸۰٪",
+    },
+    {
+      name: "TypeScript",
+      category: "زبان برنامه‌نویسی",
+      icon: "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
+      usage: "۸۵٪",
+    },
+    {
+      name: "GitHub",
+      category: "کنترل نسخه",
+      icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      usage: "۹۵٪",
+      className: "dark:invert",
+    },
+    {
+      name: "ویرایشگر کد",
+      category: "ویرایشگر کد",
+      icon: "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
+      usage: "۷۰٪",
+    },
+    {
+      name: "Vercel",
+      category: "پلتفرم میزبانی",
+      icon: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
+      usage: "۸۰٪",
+      className: "dark:invert",
+    },
+    {
+      name: "Notion",
+      category: "ابزار بهره‌وری",
+      icon: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      usage: "۸۵٪",
+    },
+    {
+      name: "Cursor",
+      category: "ویرایشگر کد هوشمند",
+      icon: "/block-media/shadcnblocks/block/logos/cursor-icon.svg",
+      usage: "۹۵٪",
+      className: "dark:invert",
+    },
+    {
+      name: "Astro",
+      category: "فریم‌ورک وب",
+      icon: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
+      usage: "۶۰٪",
+      className: "dark:invert",
+    },
+    {
+      name: "Shadcn/ui",
+      category: "کتابخانه کامپوننت",
+      icon: "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
+      usage: "۹۰٪",
+      className: "dark:invert",
+    },
+  ];
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container space-y-10">
+        <h1 className="text-2xll font-semibold tracking-tight lg:text-2xll">
+          ابزارها و پشته فنی
+        </h1>
+
+        <ul className="relative grid w-full gap-3 lg:grid-cols-2">
+          {stack.map((item, index) => (
+            <li
+              key={index}
+              className="flex flex-row items-center justify-between gap-10 rounded-2xl p-2"
+              style={{
+                backgroundImage:
+                  "repeating-linear-gradient(45deg, transparent, transparent 2px, var(--muted) 2px, var(--muted) 4px)",
+              }}
+            >
+              <div className="flex items-center gap-4">
+                <div className="flex size-20 items-center justify-center rounded-2xl p-2">
+                  <img
+                    src={item.icon}
+                    alt={item.name}
+                    className={cn("h-8 w-8 object-contain", item.className)}
+                  />
+                </div>
+                <div>
+                  <h2 className="text-xl font-semibold tracking-tight">
+                    {item.name}
+                  </h2>
+                  <p className="text-sm text-foreground/50">{item.category}</p>
+                </div>
+              </div>
+              <div className="rounded-full ps-5 font-semibold">{item.usage}</div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { Skills2 };
diff --git a/blocks/social-media-trending1.tsx b/blocks/social-media-trending1.tsx
new file mode 100644
index 0000000..a076c10
--- /dev/null
+++ b/blocks/social-media-trending1.tsx
@@ -0,0 +1,342 @@
+"use client";
+import { ChevronLeft, ChevronRight, Play } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const INSTAGRAM_ICON = {
+  title: "اینستاگرام",
+  light:
+    "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+} as const;
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+
+type Product = {
+  image: string;
+  name: string;
+  href: string;
+};
+
+type SocialMediaPost = {
+  name: string;
+  userAvatar: string;
+  username: string;
+  profileLink: string;
+  socialMediaIcon: { title: string; light: string; dark: string };
+  video: string;
+  product: Product;
+};
+
+type SocialMediaPostCardProps = SocialMediaPost;
+
+interface SocialMediaTrending1Props {
+  className?: string;
+  posts?: SocialMediaPost[];
+}
+
+const SOCIAL_MEDIA_POSTS: SocialMediaPost[] = [
+  {
+    name: "سارا احمدی",
+    userAvatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    profileLink: "#",
+    username: "@saraahmadi",
+    socialMediaIcon: INSTAGRAM_ICON,
+    video:
+      "/block-media/shadcnblocks/block/6875749-hd_720_1366_25fps.mp4",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+      name: "هدفون بی‌سیم",
+      href: "#",
+    },
+  },
+  {
+    name: "مریم حسینی",
+    userAvatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    profileLink: "#",
+    username: "@maryam.h",
+    socialMediaIcon: INSTAGRAM_ICON,
+    video:
+      "/block-media/shadcnblocks/block/4773195-hd_720_1280_24fps.mp4",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/klim-musalimov-IGO10LkxP_g-unsplash-2.jpg",
+      name: "ساعت هوشمند",
+      href: "#",
+    },
+  },
+  {
+    name: "علی محمدی",
+    userAvatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    profileLink: "#",
+    username: "@alimohammadi",
+    socialMediaIcon: INSTAGRAM_ICON,
+    video:
+      "/block-media/shadcnblocks/block/9130461-hd_720_1280_30fps.mp4",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/White-Wireless-Earbuds-in-Charging-Case-1.jpeg",
+      name: "ایرباد بی‌سیم",
+      href: "#",
+    },
+  },
+
+  {
+    name: "امیر رضایی",
+    userAvatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    profileLink: "#",
+    username: "@amirrezaei",
+    socialMediaIcon: INSTAGRAM_ICON,
+    video:
+      "/block-media/shadcnblocks/block/8128031-hd_720_1280_25fps.mp4",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/dennis-cortes-saa-4nYJWns-unsplash-1.jpg",
+      name: "دسته بازی PS4",
+      href: "#",
+    },
+  },
+  {
+    name: "پویا جعفری",
+    userAvatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    profileLink: "#",
+    username: "@poyajafari",
+    socialMediaIcon: INSTAGRAM_ICON,
+    video:
+      "/block-media/shadcnblocks/block/4076728-hd_720_1280_50fps.mp4",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/Laptop-on-Cozy-Blanket-1.png",
+      name: "لپ‌تاپ روزمره",
+      href: "#",
+    },
+  },
+  {
+    name: "لیلا کریمی",
+    userAvatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    profileLink: "#",
+    username: "@leila.karimi",
+    socialMediaIcon: INSTAGRAM_ICON,
+    video:
+      "/block-media/shadcnblocks/block/3625767-hd_720_1366_50fps.mp4",
+    product: {
+      image:
+        "/block-media/shadcnblocks/block/ecommerce/electronics/Sleek-Smartphone-Close-Up-1.png",
+      name: "گوشی هوشمند",
+      href: "#",
+    },
+  },
+];
+
+const SocialMediaTrending1 = ({
+  className,
+  posts = SOCIAL_MEDIA_POSTS,
+}: SocialMediaTrending1Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [scrollProgress, setScrollProgress] = useState(0);
+
+  const handleScroll = useCallback((emblaApi: CarouselApi) => {
+    const progress = Math.max(0, Math.min(1, emblaApi?.scrollProgress() ?? 0));
+    setScrollProgress(progress);
+  }, []);
+
+  useEffect(() => {
+    if (!api) return;
+
+    api.on("scroll", handleScroll);
+    api.on("reInit", handleScroll);
+
+    return () => {
+      api.off("scroll", handleScroll);
+      api.off("reInit", handleScroll);
+    };
+  }, [api, handleScroll]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container">
+        <h2 className="mb-8 text-center font-serif text-xl leading-snug font-medium md:text-3xl">
+          ترندهای شبکه‌های اجتماعی
+        </h2>
+        <Carousel
+          dir="rtl"
+          opts={{
+            align: "start",
+            direction: "rtl",
+          }}
+          className="[&>div]:overflow-visible"
+          setApi={setApi}
+        >
+          <CarouselContent className="ml-0 -mr-4">
+            {posts.map((item, index) => (
+              <CarouselItem
+                className="basis-[75%] pl-0 pr-4 sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
+                key={index}
+              >
+                <SocialMediaPostCard {...item} />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        <div className="mt-8 flex items-center gap-3">
+          <div className="flex-1">
+            <div className="relative h-0.5 w-full overflow-hidden bg-muted">
+              <div
+                className="h-full origin-right bg-primary"
+                style={{ transform: `scaleX(${scrollProgress})` }}
+              />
+            </div>
+          </div>
+          <Button
+            type="button"
+            onClick={() => api?.scrollPrev()}
+            className="shrink-0 rounded-full max-sm:hidden"
+            size="icon-lg"
+            aria-label="اسلاید قبلی"
+          >
+            <ChevronRight className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            onClick={() => api?.scrollNext()}
+            className="shrink-0 rounded-full max-sm:hidden"
+            size="icon-lg"
+            aria-label="اسلاید بعدی"
+          >
+            <ChevronLeft className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const SocialMediaPostCard = ({
+  userAvatar,
+  username,
+  name,
+  socialMediaIcon,
+  video,
+  product,
+}: SocialMediaPostCardProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  return (
+    <Card dir="rtl" lang="fa" className="h-full gap-3 p-4">
+      <CardHeader className="flex items-center gap-2 p-0">
+        <div className="shrink-0 basis-10">
+          <Avatar className="size-10 border">
+            <AvatarImage src={userAvatar} alt={name} />
+            <AvatarFallback>{username}</AvatarFallback>
+          </Avatar>
+        </div>
+        <div className="flex-1 text-start">
+          <div className="text-sm leading-normal font-medium">{name}</div>
+          <div className="text-xs leading-normal font-medium text-muted-foreground">
+            {username}
+          </div>
+        </div>
+        <div className="shrink-0 basis-4.5">
+          <img
+            className="size-4.5 dark:hidden"
+            alt={socialMediaIcon.title}
+            src={socialMediaIcon.light}
+          />
+          <img
+            className="hidden size-4.5 dark:block"
+            alt={socialMediaIcon.title}
+            src={socialMediaIcon.dark}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        <AspectRatio ratio={0.75} className="group overflow-hidden rounded-xl">
+          <video
+            muted
+            playsInline
+            preload="metadata"
+            className="size-full object-cover object-center"
+            onPlay={() => setIsPlaying(true)}
+            onPause={() => setIsPlaying(false)}
+            onMouseEnter={() => {
+              videoRef.current?.play();
+            }}
+            onMouseLeave={() => {
+              if (!videoRef.current) return;
+              videoRef.current.pause();
+              videoRef.current.currentTime = 0;
+            }}
+            ref={videoRef}
+            src={video}
+          ></video>
+          {!isPlaying && (
+            <div className="pointer-events-none absolute top-1/2 left-1/2 z-10 -translate-1/2 transition-opacity duration-500 group-hover:opacity-0">
+              <Button
+                size="icon-lg"
+                className="rounded-full"
+                aria-label="پخش ویدیو"
+              >
+                <Play />
+              </Button>
+            </div>
+          )}
+        </AspectRatio>
+      </CardContent>
+      <CardFooter className="p-0">
+        <a
+          className="flex w-full flex-1 items-center gap-3"
+          href={product.href}
+        >
+          <div className="shrink-0 basis-10">
+            <div className="size-10 overflow-hidden rounded-full">
+              <img
+                src={product.image}
+                alt={product.name}
+                className="block size-full object-cover object-center"
+              />
+            </div>
+          </div>
+          <div className="flex-1 text-start">
+            <p className="text-sm leading-normal font-medium">{product.name}</p>
+          </div>
+          <Button
+            variant="outline"
+            className="rounded-full"
+            size="icon-sm"
+            aria-label={`مشاهده ${product.name}`}
+          >
+            <ChevronLeft className="size-4 rtl:rotate-180" />
+          </Button>
+        </a>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export { SocialMediaTrending1 };
diff --git a/blocks/social-media-trending2.tsx b/blocks/social-media-trending2.tsx
new file mode 100644
index 0000000..429ee13
--- /dev/null
+++ b/blocks/social-media-trending2.tsx
@@ -0,0 +1,294 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import { useCallback, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const INSTAGRAM_ICON = {
+  title: "اینستاگرام",
+  light:
+    "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+} as const;
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+
+type SocialMediaPost = {
+  userAvatar: string;
+  username: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  productLink: string;
+  socialMediaIcon: { title: string; light: string; dark: string };
+};
+
+interface SocialMediaTrending2Props {
+  className?: string;
+  posts?: SocialMediaPost[];
+  title: string;
+  socialMediaProfile: {
+    href: string;
+    label: string;
+  };
+}
+
+const SECTION_DATA = {
+  title: "ما را دنبال کنید!",
+  socialMediaProfile: {
+    href: "#",
+    label: "@instagram",
+  },
+  posts: [
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      username: "@saraahmadi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png",
+        alt: "پرتره شیک مد",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+      username: "@maryam.h",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Contemplative-Casual-Chic-2.png",
+        alt: "استایل کژوال شیک",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-6.webp",
+      username: "@alimohammadi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Outdoor-Trio-2.png",
+        alt: "گروه سه‌نفره شیک در فضای باز",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+      username: "@amirrezaei",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+        alt: "زن با لباس تک‌رنگ",
+      },
+
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+      username: "@poyajafari",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Portrait-2.png",
+        alt: "پرتره مینیمال مد",
+      },
+
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-4.webp",
+      username: "@leila.karimi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Fashion-Portrait-2.png",
+        alt: "پرتره مدرن مد",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      username: "@saraahmadi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-m-2.png",
+        alt: "استایل کژوال مدرن",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+      username: "@maryam.h",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Portrait-of-a-Woman-and-Man-2.png",
+        alt: "پرتره زن و مرد مدرن",
+      },
+
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-6.webp",
+      username: "@alimohammadi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+        alt: "پست استایل مد",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+      username: "@amirrezaei",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764033-2.jpg",
+        alt: "پست لباس و اکسسوری",
+      },
+      productLink: "#",
+    },
+  ],
+};
+
+const SocialMediaTrending2 = ({
+  className,
+  posts = SECTION_DATA.posts,
+  title = SECTION_DATA.title,
+  socialMediaProfile = SECTION_DATA.socialMediaProfile,
+}: SocialMediaTrending2Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+
+  const toggleAutoplay = useCallback(() => {
+    const autoScroll = api?.plugins()?.autoScroll;
+    if (!autoScroll) return;
+
+    const playOrStop = autoScroll.isPlaying()
+      ? autoScroll.stop
+      : autoScroll.play;
+    playOrStop();
+  }, [api]);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden bg-accent py-32", className)}
+    >
+      <div className="space-y-8">
+        <div className="container">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex-1">
+              <h2 className="text-xl leading-tight font-bold tracking-tight max-md:text-center md:text-3xl lg:text-xl">
+                {title}
+              </h2>
+            </div>
+            <div className="shrink-0 max-md:hidden">
+              <Button asChild variant="link" className="underline">
+                <a
+                  href={socialMediaProfile.href}
+                  aria-label={`مشاهده ${socialMediaProfile.label} در اینستاگرام`}
+                >
+                  {socialMediaProfile.label}
+                </a>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div onMouseEnter={toggleAutoplay} onMouseLeave={toggleAutoplay}>
+          <Carousel
+            dir="rtl"
+            opts={{
+              loop: true,
+              direction: "rtl",
+            }}
+            setApi={setApi}
+            plugins={[AutoScroll()]}
+          >
+            <CarouselContent className="ml-0 -mr-4">
+              {posts.map(
+                (
+                  { userAvatar, username, socialMediaIcon, image, productLink },
+                  index,
+                ) => (
+                  <CarouselItem
+                    className="basis-[75%] pl-0 pr-4 sm:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5"
+                    key={index}
+                  >
+                    <Card
+                      dir="rtl"
+                      lang="fa"
+                      className="group relative gap-0 overflow-hidden p-0"
+                    >
+                      <a
+                        href={productLink}
+                        className="absolute inset-0 z-10 block"
+                        aria-label={`مشاهده پست ${username}`}
+                      ></a>
+                      <CardContent className="p-0">
+                        <AspectRatio className="overflow-hidden">
+                          <img
+                            src={image.src}
+                            alt={image.alt}
+                            className="block size-full origin-center object-cover object-center transition-transform duration-500 group-hover:scale-110"
+                          />
+                        </AspectRatio>
+                      </CardContent>
+                      <CardFooter className="gap-2 px-4 py-2.5">
+                        <div className="shrink-0 basis-10">
+                          <Avatar className="size-10 border">
+                            <AvatarImage
+                              src={userAvatar}
+                              alt={`آواتار ${username}`}
+                            />
+                            <AvatarFallback>{username}</AvatarFallback>
+                          </Avatar>
+                        </div>
+                        <div className="flex-1 text-start">
+                          <div className="text-sm leading-normal font-medium">
+                            {username}
+                          </div>
+                        </div>
+                        <div className="shrink-0 basis-4.5">
+                          <img
+                            className="size-4.5 dark:hidden"
+                            alt={socialMediaIcon.title}
+                            src={socialMediaIcon.light}
+                          />
+                          <img
+                            className="hidden size-4.5 dark:block"
+                            alt={socialMediaIcon.title}
+                            src={socialMediaIcon.dark}
+                          />
+                        </div>
+                      </CardFooter>
+                    </Card>
+                  </CarouselItem>
+                ),
+              )}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SocialMediaTrending2 };
diff --git a/blocks/social-media-trending3.tsx b/blocks/social-media-trending3.tsx
new file mode 100644
index 0000000..27b126e
--- /dev/null
+++ b/blocks/social-media-trending3.tsx
@@ -0,0 +1,206 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const INSTAGRAM_ICON = {
+  title: "اینستاگرام",
+  light:
+    "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+} as const;
+
+type SocialMediaPost = {
+  image: {
+    src: string;
+    alt: string;
+  };
+  productLink: string;
+};
+
+type FeaturedSection = {
+  title: string;
+  profile: {
+    image: string;
+    username: string;
+    followers: string;
+  };
+  cta: {
+    label: string;
+    href: string;
+  };
+};
+
+interface SocialMediaTrending3Props {
+  className?: string;
+  posts?: SocialMediaPost[];
+  featuredSection?: FeaturedSection;
+}
+
+const SECTION_DATA = {
+  featuredSection: {
+    title: "آنلاین با ما در ارتباط باشید",
+    profile: {
+      image:
+        "/block-media/shadcnblocks/block/block-6.svg",
+      username: "@instagram",
+      followers: "۲۸ هزار دنبال‌کننده",
+    },
+    cta: {
+      label: "همین حالا بپیوندید",
+      href: "#",
+    },
+  },
+  posts: [
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Checkered-Sunglasses-on-Stone-Pedestal-2.png",
+        alt: "عینک آفتابی شطرنجی",
+      },
+      productLink: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Gold-Earrings-2.png",
+        alt: "گوشواره طلای ظریف",
+      },
+      productLink: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Golden-Hair-Clip-Close-Up-2.png",
+        alt: "کلیپس مو طلایی",
+      },
+      productLink: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Jewelry-Close-Up-2.png",
+        alt: "نمای نزدیک جواهرات",
+      },
+      productLink: "#",
+    },
+
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Pearl-Bracelet-on-Wrist-2.png",
+        alt: "دستبند مروارید",
+      },
+      productLink: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Gold-Hoop-Earrings-on-Ceramic-Dish-2.png",
+        alt: "گوشواره حلقه‌ای طلا",
+      },
+      productLink: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Seated-Portrait-2.png",
+        alt: "پرتره نشسته شیک",
+      },
+      productLink: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Gold-Heart-Earrings-2.png",
+        alt: "گوشواره قلب طلایی",
+      },
+      productLink: "#",
+    },
+    {
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Blonde-Hairstyle-2.png",
+        alt: "مدل مو بلوند شیک",
+      },
+      productLink: "#",
+    },
+  ],
+};
+
+const SocialMediaTrending3 = ({
+  className,
+  posts = SECTION_DATA.posts,
+  featuredSection = SECTION_DATA.featuredSection,
+}: SocialMediaTrending3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <ul className="grid h-full max-h-150 grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-6 [&>li]:overflow-hidden [&>li]:rounded-xl [&>li]:bg-accent">
+          <li className="col-span-2">
+            <div className="flex h-full flex-col gap-4 p-6 sm:flex-row sm:items-center">
+              <div className="flex-1 text-start">
+                <h3 className="text-xl leading-tight tracking-tight sm:max-w-60">
+                  {featuredSection.title}
+                </h3>
+              </div>
+              <div className="space-y-10 lg:basis-50">
+                <div className="flex items-center gap-2.5">
+                  <div className="shrink-0 basis-10">
+                    <Avatar className="size-10 border">
+                      <AvatarImage
+                        src={featuredSection.profile.image}
+                        alt={`آواتار ${featuredSection.profile.username}`}
+                      />
+                      <AvatarFallback>
+                        {featuredSection.profile.username}
+                      </AvatarFallback>
+                    </Avatar>
+                  </div>
+                  <div className="space-y-0.5 text-start">
+                    <p className="leading-normal font-medium">
+                      {featuredSection.profile.username}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {featuredSection.profile.followers}
+                    </p>
+                  </div>
+                </div>
+                <Button asChild size="lg" className="w-full">
+                  <a
+                    href={featuredSection.cta.href}
+                    aria-label={`${featuredSection.cta.label}  ${featuredSection.profile.username}`}
+                  >
+                    {featuredSection.cta.label}
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </li>
+          {posts.map(({ image, productLink }, index) => (
+            <li
+              key={index}
+              className="not-nth-8:aspect-square nth-8:col-span-2 nth-8:aspect-[2.034]"
+            >
+              <a
+                href={productLink}
+                className="group relative block size-full overflow-hidden"
+                aria-label={`مشاهده پست اینستاگرام: ${image.alt}`}
+              >
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="block size-full object-cover object-center"
+                />
+                <div className="pointer-events-none absolute top-3 end-3 flex size-10 items-center justify-center rounded-full bg-background/90 opacity-0 shadow-sm transition-opacity duration-200 group-hover:opacity-100">
+                  <img
+                    className="size-5 dark:hidden"
+                    alt={INSTAGRAM_ICON.title}
+                    src={INSTAGRAM_ICON.light}
+                  />
+                  <img
+                    className="hidden size-5 dark:block"
+                    alt={INSTAGRAM_ICON.title}
+                    src={INSTAGRAM_ICON.dark}
+                  />
+                </div>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { SocialMediaTrending3 };
diff --git a/blocks/social-media-trending4.tsx b/blocks/social-media-trending4.tsx
new file mode 100644
index 0000000..283a7f6
--- /dev/null
+++ b/blocks/social-media-trending4.tsx
@@ -0,0 +1,311 @@
+import type { CSSProperties } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const INSTAGRAM_ICON = {
+  title: "اینستاگرام",
+  light:
+    "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+} as const;
+
+type SocialMediaPost = {
+  userAvatar: string;
+  username: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  productLink: string;
+  socialMediaIcon: { title: string; light: string; dark: string };
+};
+
+interface SocialMediaTrending4Props {
+  className?: string;
+  posts?: SocialMediaPost[];
+  title?: string;
+  socialMediaProfile?: {
+    href: string;
+    label: string;
+  };
+}
+
+const SECTION_DATA = {
+  title: "ما را دنبال کنید!",
+  socialMediaProfile: {
+    href: "#",
+    label: "@instagram",
+  },
+  posts: [
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      username: "@saraahmadi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Chic-Fashion-Portrait-2.png",
+        alt: "پرتره شیک مد",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+      username: "@maryam.h",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Contemplative-Casual-Chic-2.png",
+        alt: "استایل کژوال شیک",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-6.webp",
+      username: "@alimohammadi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Outdoor-Trio-2.png",
+        alt: "گروه سه‌نفره شیک در فضای باز",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+      username: "@amirrezaei",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-White-Hoodie-1.png",
+        alt: "زن با لباس تک‌رنگ",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+      username: "@poyajafari",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Portrait-2.png",
+        alt: "پرتره مینیمال مد",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-4.webp",
+      username: "@leila.karimi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Fashion-Portrait-2.png",
+        alt: "پرتره مدرن مد",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      username: "@saraahmadi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-m-2.png",
+        alt: "استایل کژوال مدرن",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+      username: "@maryam.h",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Portrait-of-a-Woman-and-Man-2.png",
+        alt: "پرتره زن و مرد مدرن",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-6.webp",
+      username: "@alimohammadi",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+        alt: "پست استایل مد",
+      },
+      productLink: "#",
+    },
+    {
+      userAvatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+      username: "@amirrezaei",
+      socialMediaIcon: INSTAGRAM_ICON,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-cottonbro-6764033-2.jpg",
+        alt: "پست لباس و اکسسوری",
+      },
+      productLink: "#",
+    },
+  ],
+};
+
+const COLUMNS = 4;
+
+const PostCard = ({ post }: { post: SocialMediaPost }) => {
+  const { userAvatar, username, socialMediaIcon, image, productLink } = post;
+  return (
+    <Card dir="rtl" lang="fa" className="group relative gap-0 overflow-hidden p-0">
+      <a
+        href={productLink}
+        className="absolute inset-0 z-10 block"
+        aria-label={`مشاهده پست ${username}`}
+      />
+      <CardContent className="p-0">
+        <AspectRatio className="overflow-hidden">
+          <img
+            src={image.src}
+            alt={image.alt}
+            className="block size-full origin-center object-cover object-center transition-transform duration-500 group-hover:scale-110"
+          />
+        </AspectRatio>
+      </CardContent>
+      <CardFooter className="gap-2 px-4 py-2.5">
+        <div className="shrink-0 basis-10">
+          <Avatar className="size-10 border">
+            <AvatarImage src={userAvatar} alt={`آواتار ${username}`} />
+            <AvatarFallback>{username}</AvatarFallback>
+          </Avatar>
+        </div>
+        <div className="flex-1 text-start">
+          <div className="text-sm leading-normal font-medium">{username}</div>
+        </div>
+        <div className="shrink-0 basis-4.5">
+          <img
+            className="size-4.5 dark:hidden"
+            alt={socialMediaIcon.title}
+            src={socialMediaIcon.light}
+          />
+          <img
+            className="hidden size-4.5 dark:block"
+            alt={socialMediaIcon.title}
+            src={socialMediaIcon.dark}
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+const MarqueeColumn = ({
+  posts,
+  reverse = false,
+  duration = "30s",
+}: {
+  posts: SocialMediaPost[];
+  reverse?: boolean;
+  duration?: string;
+}) => {
+  return (
+    <div
+      className="relative flex flex-col gap-(--gap) overflow-hidden"
+      style={
+        {
+          "--gap": "1rem",
+          "--duration": duration,
+        } as CSSProperties
+      }
+    >
+      {Array.from({ length: 2 }).map((_, i) => (
+        <div
+          key={i}
+          className={cn(
+            "flex shrink-0 animate-marquee-vertical flex-col justify-around gap-4",
+            reverse && "direction-[reverse]",
+          )}
+          style={{ animationDuration: duration }}
+        >
+          {posts.map((post, index) => (
+            <PostCard key={index} post={post} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const SocialMediaTrending4 = ({
+  className,
+  posts = SECTION_DATA.posts,
+  title = SECTION_DATA.title,
+  socialMediaProfile = SECTION_DATA.socialMediaProfile,
+}: SocialMediaTrending4Props) => {
+  const columns: SocialMediaPost[][] = Array.from(
+    { length: COLUMNS },
+    () => [],
+  );
+  posts.forEach((post, i) => {
+    columns[i % COLUMNS].push(post);
+  });
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden bg-background py-32", className)}
+    >
+      <div className="container space-y-8">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex-1">
+            <h2 className="text-xl leading-tight font-bold tracking-tight max-md:text-center md:text-3xl lg:text-xl">
+              {title}
+            </h2>
+          </div>
+          <div className="shrink-0 max-md:hidden">
+            <Button asChild variant="link" className="underline">
+              <a
+                href={socialMediaProfile.href}
+                aria-label={`مشاهده ${socialMediaProfile.label} در اینستاگرام`}
+              >
+                {socialMediaProfile.label}
+              </a>
+            </Button>
+          </div>
+        </div>
+
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 bg-linear-to-b from-background to-transparent" />
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-24 bg-linear-to-t from-background to-transparent" />
+
+          <div className="grid h-[600px] grid-cols-2 gap-4 overflow-hidden md:grid-cols-4">
+            {columns.map((columnPosts, colIndex) => (
+              <MarqueeColumn
+                key={colIndex}
+                posts={columnPosts}
+                reverse={colIndex % 2 === 1}
+                duration={`${25 + colIndex * 5}s`}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-center md:hidden">
+          <Button asChild variant="link" className="underline">
+            <a
+              href={socialMediaProfile.href}
+              aria-label={`مشاهده ${socialMediaProfile.label} در اینستاگرام`}
+            >
+              {socialMediaProfile.label}
+            </a>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SocialMediaTrending4 };
diff --git a/blocks/social-media-trending5.tsx b/blocks/social-media-trending5.tsx
new file mode 100644
index 0000000..5479c22
--- /dev/null
+++ b/blocks/social-media-trending5.tsx
@@ -0,0 +1,290 @@
+"use client";
+
+import { Play } from "lucide-react";
+import { useRef, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const SOCIAL_ICONS = {
+  instagram: {
+    title: "اینستاگرام",
+    light:
+      "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+  twitter: {
+    title: "توییتر",
+    light:
+      "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
+    dark: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
+  },
+} as const;
+
+type SocialMediaIcon = { title: string; light: string; dark: string };
+
+type ImagePost = {
+  type: "image";
+  image: {
+    src: string;
+    alt: string;
+  };
+  productLink: string;
+  socialMediaIcon?: SocialMediaIcon;
+};
+
+type VideoPost = {
+  type: "video";
+  video: string;
+  productLink: string;
+  socialMediaIcon?: SocialMediaIcon;
+};
+
+type SocialMediaPost = ImagePost | VideoPost;
+
+type FeaturedSection = {
+  title: string;
+  profile: {
+    image: string;
+    username: string;
+    followers: string;
+  };
+  cta: {
+    label: string;
+    href: string;
+  };
+};
+
+interface SocialMediaTrending5Props {
+  className?: string;
+  posts?: SocialMediaPost[];
+  featuredSection?: FeaturedSection;
+}
+
+const SECTION_DATA = {
+  featuredSection: {
+    title: "آنلاین با ما در ارتباط باشید",
+    profile: {
+      image:
+        "/block-media/shadcnblocks/block/block-6.svg",
+      username: "@instagram",
+      followers: "۲۸ هزار دنبال‌کننده",
+    },
+    cta: {
+      label: "همین حالا بپیوندید",
+      href: "#",
+    },
+  },
+  posts: [
+    {
+      type: "image" as const,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Checkered-Sunglasses-on-Stone-Pedestal-2.png",
+        alt: "عینک آفتابی شطرنجی",
+      },
+      productLink: "#",
+      socialMediaIcon: SOCIAL_ICONS.instagram,
+    },
+    {
+      type: "video" as const,
+      video:
+        "/block-media/shadcnblocks/block/6875749-hd_720_1366_25fps.mp4",
+      productLink: "#",
+      socialMediaIcon: SOCIAL_ICONS.instagram,
+    },
+    {
+      type: "image" as const,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Gold-Earrings-2.png",
+        alt: "گوشواره طلای ظریف",
+      },
+      productLink: "#",
+      socialMediaIcon: SOCIAL_ICONS.twitter,
+    },
+    {
+      type: "image" as const,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Golden-Hair-Clip-Close-Up-2.png",
+        alt: "کلیپس مو طلایی",
+      },
+      productLink: "#",
+      socialMediaIcon: SOCIAL_ICONS.instagram,
+    },
+    {
+      type: "image" as const,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Jewelry-Close-Up-2.png",
+        alt: "نمای نزدیک جواهرات",
+      },
+      productLink: "#",
+      socialMediaIcon: SOCIAL_ICONS.twitter,
+    },
+    {
+      type: "image" as const,
+      image: {
+        src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Pearl-Bracelet-on-Wrist-2.png",
+        alt: "دستبند مروارید",
+      },
+      productLink: "#",
+      socialMediaIcon: SOCIAL_ICONS.instagram,
+    },
+  ] satisfies SocialMediaPost[],
+};
+
+const SocialIconOverlay = ({
+  icon,
+  showOnHover = true,
+}: {
+  icon: SocialMediaIcon;
+  showOnHover?: boolean;
+}) => (
+  <div
+    className={cn(
+      "pointer-events-none absolute top-3 end-3 flex size-10 items-center justify-center rounded-full bg-background/90 shadow-sm transition-opacity duration-200",
+      showOnHover ? "opacity-0 group-hover:opacity-100" : "invisible",
+    )}
+  >
+    <img className="size-5 dark:hidden" alt={icon.title} src={icon.light} />
+    <img
+      className="hidden size-5 dark:block"
+      alt={icon.title}
+      src={icon.dark}
+    />
+  </div>
+);
+
+const VideoCard = ({
+  video,
+  productLink,
+  socialMediaIcon,
+}: {
+  video: string;
+  productLink: string;
+  socialMediaIcon?: SocialMediaIcon;
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  return (
+    <a
+      href={productLink}
+      className="group relative block aspect-square size-full overflow-hidden rounded-xl bg-muted"
+      aria-label="مشاهده ویدیوی شبکه اجتماعی"
+    >
+      <video
+        muted
+        playsInline
+        preload="metadata"
+        className="block size-full object-cover object-center"
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+        onMouseEnter={() => videoRef.current?.play()}
+        onMouseLeave={() => {
+          if (!videoRef.current) return;
+          videoRef.current.pause();
+          videoRef.current.currentTime = 0;
+        }}
+        ref={videoRef}
+        src={video}
+      />
+      {!isPlaying && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div
+            className="rounded-full bg-background/80 p-4 transition-opacity duration-300 group-hover:scale-110 group-hover:bg-background/90"
+            aria-hidden
+          >
+            <Play className="size-8 fill-foreground text-foreground" />
+            <span className="sr-only">پخش ویدیو</span>
+          </div>
+        </div>
+      )}
+      {socialMediaIcon && (
+        <SocialIconOverlay icon={socialMediaIcon} showOnHover={!isPlaying} />
+      )}
+    </a>
+  );
+};
+
+const SocialMediaTrending5 = ({
+  className,
+  posts = SECTION_DATA.posts,
+  featuredSection = SECTION_DATA.featuredSection,
+}: SocialMediaTrending5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <ul className="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4 [&>li]:overflow-hidden [&>li]:rounded-xl [&>li]:bg-accent">
+          <li className="col-span-2">
+            <div className="flex h-full flex-col gap-4 p-6 sm:flex-row sm:items-center">
+              <div className="flex-1 text-start">
+                <h3 className="text-xl leading-tight tracking-tight sm:max-w-60">
+                  {featuredSection.title}
+                </h3>
+              </div>
+              <div className="space-y-10 lg:basis-50">
+                <div className="flex items-center gap-2.5">
+                  <div className="shrink-0 basis-10">
+                    <Avatar className="size-10 border">
+                      <AvatarImage
+                        src={featuredSection.profile.image}
+                        alt={`آواتار ${featuredSection.profile.username}`}
+                      />
+                      <AvatarFallback>
+                        {featuredSection.profile.username}
+                      </AvatarFallback>
+                    </Avatar>
+                  </div>
+                  <div className="space-y-0.5 text-start">
+                    <p className="leading-normal font-medium">
+                      {featuredSection.profile.username}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {featuredSection.profile.followers}
+                    </p>
+                  </div>
+                </div>
+                <Button asChild size="lg" className="w-full">
+                  <a
+                    href={featuredSection.cta.href}
+                    aria-label={`${featuredSection.cta.label}  ${featuredSection.profile.username}`}
+                  >
+                    {featuredSection.cta.label}
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </li>
+          {posts.map((post, index) => (
+            <li key={index} className="aspect-square">
+              {post.type === "video" ? (
+                <VideoCard
+                  video={post.video}
+                  productLink={post.productLink}
+                  socialMediaIcon={post.socialMediaIcon}
+                />
+              ) : (
+                <a
+                  href={post.productLink}
+                  className="group relative block size-full overflow-hidden"
+                  aria-label={`مشاهده پست ${post.socialMediaIcon?.title ?? "شبکه اجتماعی"}: ${post.image.alt}`}
+                >
+                  <img
+                    src={post.image.src}
+                    alt={post.image.alt}
+                    className="block size-full object-cover object-center"
+                  />
+                  {post.socialMediaIcon && (
+                    <SocialIconOverlay icon={post.socialMediaIcon} />
+                  )}
+                </a>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { SocialMediaTrending5 };
diff --git a/blocks/stats-card1.tsx b/blocks/stats-card1.tsx
new file mode 100644
index 0000000..d9d83e0
--- /dev/null
+++ b/blocks/stats-card1.tsx
@@ -0,0 +1,58 @@
+import { TrendingDown, TrendingUp } from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const formatChange = (value: number) =>
+  `${new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+    signDisplay: "exceptZero",
+  }).format(value)}٪`;
+
+interface StatsCard1Props {
+  title?: string;
+  value?: string;
+  change?: number;
+  changeLabel?: string;
+  className?: string;
+}
+
+const StatsCard1 = ({
+  title = "مجموع درآمد",
+  value = formatPrice(45231890),
+  change = 20.1,
+  changeLabel = "نسبت به ماه گذشته",
+  className,
+}: StatsCard1Props) => {
+  const isPositive = change >= 0;
+
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold">{value}</div>
+        <div className="mt-1 flex items-center gap-1 text-sm">
+          {isPositive ? (
+            <TrendingUp className="size-4 text-green-500" />
+          ) : (
+            <TrendingDown className="size-4 text-red-500" />
+          )}
+          <span className={isPositive ? "text-green-500" : "text-red-500"}>
+            {formatChange(change)}
+          </span>
+          <span className="text-muted-foreground">{changeLabel}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard1 };
diff --git a/blocks/stats-card10.tsx b/blocks/stats-card10.tsx
new file mode 100644
index 0000000..ee15826
--- /dev/null
+++ b/blocks/stats-card10.tsx
@@ -0,0 +1,70 @@
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const formatChangeBadge = (value: number) =>
+  `${new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(Math.abs(value))}٪`;
+
+interface StatsCard10Props {
+  title?: string;
+  value?: string;
+  change?: number;
+  period?: string;
+  className?: string;
+}
+
+const StatsCard10 = ({
+  title = "مجموع فروش",
+  value = formatPrice(23456000),
+  change = 12.5,
+  period = "نسبت به هفته گذشته",
+  className,
+}: StatsCard10Props) => {
+  const isPositive = change >= 0;
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "w-full max-w-xs border-s-4",
+        isPositive ? "border-s-green-500" : "border-s-red-500",
+        className,
+      )}
+    >
+      <CardContent className="pt-6">
+        <div className="flex items-start justify-between">
+          <div>
+            <p className="text-sm font-medium text-muted-foreground">{title}</p>
+            <p className="mt-1 text-3xl font-bold">{value}</p>
+          </div>
+          <div
+            className={cn(
+              "flex items-center gap-1 rounded-full px-2 py-1 text-sm font-medium",
+              isPositive
+                ? "bg-green-500/10 text-green-600"
+                : "bg-red-500/10 text-red-600",
+            )}
+          >
+            {isPositive ? (
+              <ArrowUpRight className="size-4" />
+            ) : (
+              <ArrowDownRight className="size-4" />
+            )}
+            {formatChangeBadge(change)}
+          </div>
+        </div>
+        <p className="mt-2 text-sm text-muted-foreground">{period}</p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard10 };
diff --git a/blocks/stats-card2.tsx b/blocks/stats-card2.tsx
new file mode 100644
index 0000000..8120e79
--- /dev/null
+++ b/blocks/stats-card2.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { Area, AreaChart, ResponsiveContainer } from "recharts";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface StatsCard2Props {
+  title?: string;
+  value?: string;
+  data?: { value: number }[];
+  className?: string;
+}
+
+const defaultData = [
+  { value: 186 },
+  { value: 305 },
+  { value: 237 },
+  { value: 273 },
+  { value: 209 },
+  { value: 314 },
+  { value: 290 },
+];
+
+const StatsCard2 = ({
+  title = "کاربران فعال",
+  value = formatNumber(2350),
+  data = defaultData,
+  className,
+}: StatsCard2Props) => {
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pb-4">
+        <div className="text-3xl font-bold">{value}</div>
+        <div className="mt-3 h-16">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={data}>
+              <defs>
+                <linearGradient
+                  id="sparklineGradient"
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset="0%"
+                    stopColor="var(--chart-1)"
+                    stopOpacity={0.3}
+                  />
+                  <stop
+                    offset="100%"
+                    stopColor="var(--chart-1)"
+                    stopOpacity={0}
+                  />
+                </linearGradient>
+              </defs>
+              <Area
+                type="monotone"
+                dataKey="value"
+                stroke="var(--chart-1)"
+                strokeWidth={2}
+                fill="url(#sparklineGradient)"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard2 };
diff --git a/blocks/stats-card3.tsx b/blocks/stats-card3.tsx
new file mode 100644
index 0000000..201b2aa
--- /dev/null
+++ b/blocks/stats-card3.tsx
@@ -0,0 +1,51 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatAmount = (amount: number, unit: string) =>
+  unit === "ریال" ? formatPrice(amount) : `${unit}${formatNumber(amount)}`;
+
+interface StatsCard3Props {
+  title?: string;
+  value?: number;
+  target?: number;
+  unit?: string;
+  className?: string;
+}
+
+const StatsCard3 = ({
+  title = "هدف ماهانه",
+  value = 7500000,
+  target = 10000000,
+  unit = "ریال",
+  className,
+}: StatsCard3Props) => {
+  const percentage = Math.min(Math.round((value / target) * 100), 100);
+
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold">{formatAmount(value, unit)}</div>
+        <div className="mt-3 space-y-2">
+          <Progress value={percentage} className="h-2" />
+          <div className="flex justify-between text-sm text-muted-foreground">
+            <span>{formatNumber(percentage)}٪ تکمیل‌شده</span>
+            <span>هدف: {formatAmount(target, unit)}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard3 };
diff --git a/blocks/stats-card4.tsx b/blocks/stats-card4.tsx
new file mode 100644
index 0000000..0a8ce54
--- /dev/null
+++ b/blocks/stats-card4.tsx
@@ -0,0 +1,49 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+interface StatsCard4Props {
+  title?: string;
+  currentValue?: string;
+  currentLabel?: string;
+  previousValue?: string;
+  previousLabel?: string;
+  className?: string;
+}
+
+const StatsCard4 = ({
+  title = "درآمد",
+  currentValue = formatPrice(12450000),
+  currentLabel = "این ماه",
+  previousValue = formatPrice(10230000),
+  previousLabel = "ماه گذشته",
+  className,
+}: StatsCard4Props) => {
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <div className="text-xl font-bold">{currentValue}</div>
+            <div className="text-sm text-muted-foreground">{currentLabel}</div>
+          </div>
+          <div className="border-s ps-4">
+            <div className="text-xl font-bold text-muted-foreground">
+              {previousValue}
+            </div>
+            <div className="text-sm text-muted-foreground">{previousLabel}</div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard4 };
diff --git a/blocks/stats-card5.tsx b/blocks/stats-card5.tsx
new file mode 100644
index 0000000..57ac3f5
--- /dev/null
+++ b/blocks/stats-card5.tsx
@@ -0,0 +1,60 @@
+import { DollarSign, ShoppingCart, TrendingUp, Users } from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const formatChange = (value: number) =>
+  `${new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+    signDisplay: "exceptZero",
+  }).format(value)}٪`;
+
+type IconType = "dollar" | "users" | "cart" | "trending";
+
+interface StatsCard5Props {
+  title?: string;
+  value?: string;
+  subtitle?: string;
+  icon?: IconType;
+  className?: string;
+}
+
+const iconMap = {
+  dollar: DollarSign,
+  users: Users,
+  cart: ShoppingCart,
+  trending: TrendingUp,
+};
+
+const StatsCard5 = ({
+  title = "مجموع درآمد",
+  value = formatPrice(45231000),
+  subtitle = `${formatChange(20.1)} نسبت به ماه گذشته`,
+  icon = "dollar",
+  className,
+}: StatsCard5Props) => {
+  const Icon = iconMap[icon];
+
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+        <div className="rounded-md bg-primary/10 p-2">
+          <Icon className="size-4 text-primary" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold">{value}</div>
+        <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard5 };
diff --git a/blocks/stats-card6.tsx b/blocks/stats-card6.tsx
new file mode 100644
index 0000000..a60e69d
--- /dev/null
+++ b/blocks/stats-card6.tsx
@@ -0,0 +1,71 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface BreakdownItem {
+  label: string;
+  value: string;
+  percentage?: number;
+}
+
+interface StatsCard6Props {
+  title?: string;
+  totalValue?: string;
+  breakdown?: BreakdownItem[];
+  className?: string;
+}
+
+const defaultBreakdown: BreakdownItem[] = [
+  { label: "دسکتاپ", value: formatPrice(32450000), percentage: 65 },
+  { label: "موبایل", value: formatPrice(12300000), percentage: 25 },
+  { label: "تبلت", value: formatPrice(5250000), percentage: 10 },
+];
+
+const StatsCard6 = ({
+  title = "درآمد بر اساس دستگاه",
+  totalValue = formatPrice(50000000),
+  breakdown = defaultBreakdown,
+  className,
+}: StatsCard6Props) => {
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold">{totalValue}</div>
+        <div className="mt-4 space-y-3">
+          {breakdown.map((item, index) => (
+            <div key={index} className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div
+                  className="size-2 rounded-full"
+                  style={{
+                    backgroundColor: `var(--chart-${(index % 5) + 1})`,
+                  }}
+                />
+                <span className="text-sm">{item.label}</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm">
+                <span className="font-medium">{item.value}</span>
+                {item.percentage !== undefined && (
+                  <span className="text-muted-foreground">
+                    {formatNumber(item.percentage)}٪
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard6 };
diff --git a/blocks/stats-card7.tsx b/blocks/stats-card7.tsx
new file mode 100644
index 0000000..1bc0601
--- /dev/null
+++ b/blocks/stats-card7.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatStorage = (amount: number, unit = "گیگابایت") =>
+  `${formatNumber(amount)} ${unit}`;
+
+interface StatsCard7Props {
+  title?: string;
+  value?: string;
+  percentage?: number;
+  label?: string;
+  className?: string;
+}
+
+const StatsCard7 = ({
+  title = "فضای مصرف‌شده",
+  value = formatStorage(75),
+  percentage = 75,
+  label = `از ${formatNumber(100)} گیگابایت`,
+  className,
+}: StatsCard7Props) => {
+  const data = [
+    { name: "used", value: percentage },
+    { name: "remaining", value: 100 - percentage },
+  ];
+
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-4">
+          <div className="relative size-20">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={data}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={28}
+                  outerRadius={38}
+                  paddingAngle={0}
+                  dataKey="value"
+                  startAngle={90}
+                  endAngle={-270}
+                  strokeWidth={0}
+                >
+                  <Cell fill="var(--chart-1)" />
+                  <Cell fill="var(--muted)" />
+                </Pie>
+              </PieChart>
+            </ResponsiveContainer>
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span className="text-sm font-semibold">
+                {formatNumber(percentage)}٪
+              </span>
+            </div>
+          </div>
+          <div>
+            <div className="text-xl font-bold">{value}</div>
+            <div className="text-sm text-muted-foreground">{label}</div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard7 };
diff --git a/blocks/stats-card8.tsx b/blocks/stats-card8.tsx
new file mode 100644
index 0000000..0594727
--- /dev/null
+++ b/blocks/stats-card8.tsx
@@ -0,0 +1,76 @@
+import { AlertCircle, CheckCircle, XCircle } from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatPercent = (value: number) =>
+  `${new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(value)}٪`;
+
+type StatusType = "healthy" | "warning" | "critical";
+
+interface StatsCard8Props {
+  title?: string;
+  value?: string;
+  status?: StatusType;
+  statusLabel?: string;
+  className?: string;
+}
+
+const statusConfig = {
+  healthy: {
+    icon: CheckCircle,
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+    label: "سالم",
+  },
+  warning: {
+    icon: AlertCircle,
+    color: "text-yellow-500",
+    bgColor: "bg-yellow-500/10",
+    label: "هشدار",
+  },
+  critical: {
+    icon: XCircle,
+    color: "text-red-500",
+    bgColor: "bg-red-500/10",
+    label: "بحرانی",
+  },
+};
+
+const StatsCard8 = ({
+  title = "وضعیت سامانه",
+  value = formatPercent(99.9),
+  status = "healthy",
+  statusLabel,
+  className,
+}: StatsCard8Props) => {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+  const displayLabel = statusLabel || config.label;
+
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold">{value}</div>
+        <div className="mt-3 flex items-center gap-2">
+          <div className={cn("rounded-full p-1", config.bgColor)}>
+            <Icon className={cn("size-4", config.color)} />
+          </div>
+          <span className={cn("text-sm font-medium", config.color)}>
+            {displayLabel}
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard8 };
diff --git a/blocks/stats-card9.tsx b/blocks/stats-card9.tsx
new file mode 100644
index 0000000..518800c
--- /dev/null
+++ b/blocks/stats-card9.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const formatPrice = (value: number) =>
+  `${value.toLocaleString("fa-IR")} ریال`;
+
+interface StatsCard9Props {
+  title?: string;
+  monthlyValue?: string;
+  annualValue?: string;
+  monthlyLabel?: string;
+  annualLabel?: string;
+  className?: string;
+}
+
+const StatsCard9 = ({
+  title = "درآمد تکرارشونده",
+  monthlyValue = formatPrice(12450000),
+  annualValue = formatPrice(149400000),
+  monthlyLabel = "درآمد تکرارشونده ماهانه",
+  annualLabel = "درآمد تکرارشونده سالانه",
+  className,
+}: StatsCard9Props) => {
+  const [period, setPeriod] = useState<"monthly" | "annual">("monthly");
+
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+        <Tabs
+          value={period}
+          onValueChange={(v) => setPeriod(v as "monthly" | "annual")}
+        >
+          <TabsList className="h-7">
+            <TabsTrigger value="monthly" className="px-2 text-xs">
+              ماهانه
+            </TabsTrigger>
+            <TabsTrigger value="annual" className="px-2 text-xs">
+              سالانه
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold">
+          {period === "monthly" ? monthlyValue : annualValue}
+        </div>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {period === "monthly" ? monthlyLabel : annualLabel}
+        </p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { StatsCard9 };
diff --git a/blocks/stats1.tsx b/blocks/stats1.tsx
new file mode 100644
index 0000000..2db26b0
--- /dev/null
+++ b/blocks/stats1.tsx
@@ -0,0 +1,52 @@
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface Stats1Props {
+  className?: string;
+}
+
+const Stats1 = ({ className }: Stats1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="text-center text-xl font-semibold lg:text-2xll">
+          بینش‌های عملکرد پلتفرم
+        </h1>
+        <div className="grid gap-10 pt-9 md:grid-cols-3 lg:gap-0 lg:pt-20">
+          <div className="text-center">
+            <p className="text-sm font-medium text-muted-foreground">
+              زمان استخدام را تا
+            </p>
+            <p className="pt-4 text-2xll font-semibold lg:pt-10">۴ برابر</p>
+            <p className="text-xl font-semibold text-muted-foreground">
+              سریع‌تر کاهش دهید
+            </p>
+          </div>
+          <div className="text-center">
+            <p className="text-sm font-medium text-muted-foreground">
+              مشتریان شاهد کاهش
+            </p>
+            <p className="pt-4 text-2xll font-semibold lg:pt-10">
+              {formatNumber(50)}٪
+            </p>
+            <p className="text-xl font-semibold text-muted-foreground">
+              در زمان استخدام بوده‌اند
+            </p>
+          </div>
+          <div className="text-center">
+            <p className="text-sm font-medium text-muted-foreground">
+              میانگین تعداد استخدام در هر
+            </p>
+            <p className="pt-4 text-2xll font-semibold lg:pt-10">
+              {formatNumber(3)}
+            </p>
+            <p className="text-xl font-semibold text-muted-foreground">ماه</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats1 };
diff --git a/blocks/stats10.tsx b/blocks/stats10.tsx
new file mode 100644
index 0000000..ca8ad3c
--- /dev/null
+++ b/blocks/stats10.tsx
@@ -0,0 +1,80 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const statsData = [
+  {
+    logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+    avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
+    avatarFallback: "",
+    logoAlt: "لوگوی شرکت نمونه ۱",
+    avatarAlt: "تصویر مشتری ۱",
+    heading: `${formatNumber(89)}٪`,
+    text: "توقف هزینه روی تبلیغات بدون تبدیل",
+  },
+  {
+    logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+    avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
+    avatarFallback: "",
+    logoAlt: "لوگوی شرکت نمونه ۲",
+    avatarAlt: "تصویر مشتری ۲",
+    heading: `${formatNumber(7)} ساعت`,
+    text: "صرفه‌جویی روزانه در مدیریت تبلیغات",
+  },
+  {
+    logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
+    avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
+    avatarFallback: "",
+    logoAlt: "لوگوی شرکت نمونه ۳",
+    avatarAlt: "تصویر مشتری ۳",
+    heading: `${formatNumber(2540)}٪`,
+    text: "رشد در سرمایه‌گذاری تبلیغاتی کل مشتریان",
+  },
+];
+
+interface Stats10Props {
+  className?: string;
+}
+
+const Stats10 = ({ className }: Stats10Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-12 md:py-20", className)}>
+      <div className="container max-w-[75rem]">
+        <div className="pt-10 pb-10">
+          <div className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3">
+            {statsData.map(
+              (
+                { logo, avatar, avatarFallback, logoAlt, avatarAlt, heading, text },
+                i,
+              ) => (
+                <a href="#" key={`link${i}`} className="block w-full">
+                  <Card className="rounded-3xl border-2 p-10 transition hover:-translate-y-3 hover:border-primary">
+                    <CardContent className="block p-0">
+                      <div className="flex items-center gap-7">
+                        <Avatar className="h-14 w-14 overflow-hidden rounded-full border">
+                          <AvatarImage src={avatar} alt={avatarAlt} />
+                          <AvatarFallback>{avatarFallback}</AvatarFallback>
+                        </Avatar>
+                        <img src={logo} alt={logoAlt} className="h-6" />
+                      </div>
+                      <div className="mt-6 text-2xll leading-tight font-semibold">
+                        {heading}
+                      </div>
+                      <p className="mb-5 max-w-52 text-lg font-medium">
+                        {text}
+                      </p>
+                    </CardContent>
+                  </Card>
+                </a>
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats10 };
diff --git a/blocks/stats11.tsx b/blocks/stats11.tsx
new file mode 100644
index 0000000..c379d70
--- /dev/null
+++ b/blocks/stats11.tsx
@@ -0,0 +1,77 @@
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatDecimal = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(value);
+
+interface Stats11Props {
+  className?: string;
+}
+
+const Stats11 = ({ className }: Stats11Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative isolate overflow-hidden bg-linear-to-b from-primary/10 to-transparent md:border-x md:border-border">
+          <div className="absolute right-0 -left-px -z-20 h-full w-full bg-[linear-gradient(90deg,var(--muted-foreground)_1px,transparent_1px)] [mask-image:linear-gradient(transparent_25%,black_25%,black_75%,transparent_75%)] [background-size:calc(100%/16)_100%] [mask-size:100%_16px] opacity-20 [-webkit-mask-image:linear-gradient(transparent_25%,black_25%,black_75%,transparent_75%)] [-webkit-mask-size:100%_16px]" />
+
+          <div>
+            <h2 className="mb-16 max-w-3xl text-3xl leading-10 font-semibold sm:mb-24 md:mx-10">
+              انقلاب در مراقبت‌های بهداشتی با فناوری هوش مصنوعی.
+              <span className="font-medium text-primary/50">
+                {" "}
+                پلتفرم تشخیصی پیشرفته ما به پزشکان کمک می‌کند در چند ثانیه
+                تشخیص دقیق بدهند.
+              </span>
+            </h2>
+            <div className="relative grid max-w-2xl gap-4 border-x border-border pb-32 sm:grid-cols-2 sm:gap-10 sm:pb-44 md:ms-10 md:border-0">
+              <div className="absolute inset-0 -top-[1100px] -left-[calc(1000px-22vw)] -z-10 size-[1500px] rounded-full border border-primary bg-background sm:-top-[480%] sm:-left-[185%] sm:size-[2000px] md:-top-[906%] md:-left-[294%] md:size-[3500px] lg:-top-[1186%] lg:-left-[380%] lg:size-[4500px] xl:-top-[1200%] xl:-left-[350%] 2xl:-top-[1196%] 2xl:-left-[345%]"></div>
+              <div className="flex flex-col gap-2">
+                <span className="flex gap-5 text-3xl font-semibold">
+                  <span className="relative -start-px w-px bg-primary/50"></span>
+                  {formatNumber(1000000)}+
+                </span>
+                <p className="ps-5 font-medium text-muted-foreground/80">
+                  تشخیص انجام‌شده
+                </p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <span className="flex gap-5 text-3xl font-semibold">
+                  <span className="relative -start-px w-px bg-primary/50"></span>
+                  {formatNumber(95)}٪
+                </span>
+                <p className="ps-5 font-medium text-muted-foreground/80">
+                  دقت تشخیص
+                </p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <span className="flex gap-5 text-3xl font-semibold">
+                  <span className="relative -start-px w-px bg-primary/50"></span>
+                  {formatNumber(3000)}+
+                </span>
+                <p className="ps-5 font-medium text-muted-foreground/80">
+                  ارائه‌دهندگان خدمات بهداشتی
+                </p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <span className="flex gap-5 text-3xl font-semibold">
+                  <span className="relative -start-px w-px bg-primary/50"></span>
+                  {formatDecimal(2.5)} ثانیه
+                </span>
+                <p className="ps-5 font-medium text-muted-foreground/80">
+                  زمان پاسخ
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats11 };
diff --git a/blocks/stats12.tsx b/blocks/stats12.tsx
new file mode 100644
index 0000000..894af8e
--- /dev/null
+++ b/blocks/stats12.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import NumberFlow from "@number-flow/react";
+import { motion, useInView } from "framer-motion";
+import { ArrowLeft, RefreshCcw } from "lucide-react";
+import { useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const numberFlowLocales = "fa-IR-u-nu-latn";
+
+const STATS = {
+  monthly: {
+    TotalRevenue: 12.3,
+    TotalUsers: 0.3,
+    CompanyGrowth: 300,
+    NewCustomers: 100,
+    BigCorpClients: 10,
+  },
+  yearly: {
+    TotalRevenue: 105,
+    TotalUsers: 50,
+    CompanyGrowth: 30,
+    NewCustomers: 1.5,
+    BigCorpClients: 75,
+  },
+} as const;
+
+const ZERO_STATS = {
+  monthly: {
+    TotalRevenue: 0,
+    TotalUsers: 0,
+    CompanyGrowth: 0,
+    NewCustomers: 0,
+    BigCorpClients: 0,
+  },
+  yearly: {
+    TotalRevenue: 0,
+    TotalUsers: 0,
+    CompanyGrowth: 0,
+    NewCustomers: 0,
+    BigCorpClients: 0,
+  },
+};
+
+interface Stats12Props {
+  className?: string;
+}
+
+const Stats12 = ({ className }: Stats12Props) => {
+  const [showMonthlyStats, setShowMonthlyStats] = useState(false);
+  const ref = useRef(null);
+  const isInView = useInView(ref);
+  const stats = isInView ? STATS : ZERO_STATS;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex justify-center">
+        <div className="flex w-full flex-col justify-between gap-4 lg:flex-row">
+          <div className="w-full lg:w-1/3">
+            <h1 className="font-calSans w-full text-2xll font-medium">
+              فقط حرف نمی‌زنیم، نتیجه تحویل می‌دهیم
+            </h1>
+            <p className="my-4 text-lg tracking-tight text-muted-foreground">
+              با تمرکز بر اجرا و پیگیری مستمر، نتایج ملموس برای تیم شما
+              می‌سازیم؛ نه وعده‌های توخالی.
+            </p>
+            <Button
+              variant="secondary"
+              className="text-md group mt-10 flex w-fit items-center justify-center gap-2 rounded-full px-6 py-1 tracking-tight shadow-none"
+            >
+              <span>با ما شروع کنید</span>
+              <ArrowLeft className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0" />
+            </Button>
+            <div className="mt-10 lg:w-[115%]">
+              <Graph />
+            </div>
+          </div>
+          <div ref={ref} className="flex w-full flex-col items-start lg:w-1/2">
+            <h1 className="font-calSans text-8xl leading-0 lg:text-[10rem]">
+              <NumberFlow
+                value={
+                  showMonthlyStats
+                    ? stats.monthly.TotalRevenue
+                    : stats.yearly.TotalRevenue
+                }
+                locales={numberFlowLocales}
+                format={{
+                  minimumFractionDigits: 1,
+                  maximumFractionDigits: 1,
+                }}
+                suffix=" میلیون ریال"
+                className="font-calSans"
+              />
+            </h1>
+            <div className="mb-6 flex flex-col items-center justify-center gap-6 lg:flex-row lg:gap-17">
+              <p>و این فقط در یک سال است</p>
+              <Button
+                variant="secondary"
+                className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-6 py-1 tracking-tight shadow-none transition-all duration-300 ease-out active:scale-95"
+                onClick={() => setShowMonthlyStats(!showMonthlyStats)}
+              >
+                <span>
+                  {showMonthlyStats
+                    ? "نمایش آمار سالانه"
+                    : "نمایش آمار ماهانه"}
+                </span>
+                <RefreshCcw className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0" />
+              </Button>
+            </div>
+            <div className="mt-auto mb-10 grid w-full grid-cols-2 gap-14">
+              <div className="text-start">
+                <h2 className="text-xl font-medium lg:text-2xll">
+                  <NumberFlow
+                    value={
+                      showMonthlyStats
+                        ? stats.monthly.TotalUsers
+                        : stats.yearly.TotalUsers
+                    }
+                    locales={numberFlowLocales}
+                    format={{
+                      minimumFractionDigits: 1,
+                      maximumFractionDigits: 1,
+                    }}
+                    suffix=" هزار+"
+                  />
+                </h2>
+                <p className="text-muted-foreground/70">اعضای تیم</p>
+              </div>
+              <div className="text-end">
+                <h2 className="text-xl font-medium lg:text-2xll">
+                  <NumberFlow
+                    value={
+                      showMonthlyStats
+                        ? stats.monthly.CompanyGrowth
+                        : stats.yearly.CompanyGrowth
+                    }
+                    locales={numberFlowLocales}
+                    suffix="٪"
+                  />
+                </h2>
+                <p className="text-muted-foreground/70">رشد شرکت</p>
+              </div>
+              <div className="text-start">
+                <h2 className="text-xl font-medium lg:text-2xll">
+                  <NumberFlow
+                    value={
+                      showMonthlyStats
+                        ? stats.monthly.NewCustomers
+                        : stats.yearly.NewCustomers
+                    }
+                    locales={numberFlowLocales}
+                    format={{
+                      minimumFractionDigits: 1,
+                      maximumFractionDigits: 1,
+                    }}
+                    suffix=" میلیون"
+                  />
+                </h2>
+                <p className="text-muted-foreground/70">مشتریان جدید</p>
+              </div>
+              <div className="text-end">
+                <h2 className="text-xl font-medium lg:text-2xll">
+                  <NumberFlow
+                    value={
+                      showMonthlyStats
+                        ? stats.monthly.BigCorpClients
+                        : stats.yearly.BigCorpClients
+                    }
+                    locales={numberFlowLocales}
+                    prefix="~"
+                    suffix="+"
+                  />
+                </h2>
+                <p className="text-muted-foreground/70">مشتریان سازمانی بزرگ</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats12 };
+
+function Graph() {
+  return (
+    <div className="wrapper">
+      <motion.svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 644 388"
+        initial={{
+          clipPath: "inset(0px 100% 0px 0px)",
+        }}
+        animate={{
+          clipPath: "inset(0px 0% 0px 0px)",
+        }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          damping: 18,
+        }}
+      >
+        <g clipPath="url(#grad)">
+          <path
+            d="M1 118.5C1 118.5 83.308 102.999 114.735 89.4998C146.162 76.0008 189.504 87.7868 235.952 77.4998C273.548 69.1718 294.469 62.4938 329.733 46.9998C409.879 11.7848 452.946 30.9998 483.874 22.4998C514.802 13.9998 635.97 0.84884 644 1.49984"
+            stroke="#0090FF"
+            strokeWidth="2"
+          />
+          <path
+            d="M113.912 89.4888C82.437 102.988 1 118.487 1 118.487V438.477H644V1.49977C635.957 0.849773 514.601 13.9988 483.625 22.4978C452.649 30.9958 409.515 11.7838 329.245 46.9938C293.926 62.4868 272.973 69.1638 235.318 77.4908C188.798 87.7768 145.388 75.9908 113.912 89.4888Z"
+            fill="url(#grad)"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="grad"
+            x1="321.5"
+            y1="0.476773"
+            x2="321.5"
+            y2="387.477"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#138EED" stopOpacity="0.4" />
+            <stop offset="1" stopColor="#058FFB" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </motion.svg>
+    </div>
+  );
+}
diff --git a/blocks/stats13.tsx b/blocks/stats13.tsx
new file mode 100644
index 0000000..7fe9db8
--- /dev/null
+++ b/blocks/stats13.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import NumberFlow from "@number-flow/react";
+import { motion } from "framer-motion";
+import { CirclePercent } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const numberFlowLocales = "fa-IR-u-nu-latn";
+
+const css = `
+.candy-bg {
+    background-color: hsl(0 0% 96%, 2%);
+    background-image: linear-gradient(
+      135deg,
+      hsl(0 0% 96%) 25%,
+      transparent 25.5%,
+      transparent 50%,
+      hsl(0 0% 96%) 50.5%,
+      hsl(0 0% 96%) 75%,
+      transparent 75.5%,
+      transparent
+    );
+    background-size: 10px 10px;
+  }`;
+
+interface Stats13Props {
+  className?: string;
+}
+
+const Stats13 = ({ className }: Stats13Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <style>{css}</style>
+      <div className="gradient container">
+        <div className="mx-auto max-w-2xl text-center">
+          <h1 className="font-calSans w-full text-2xll font-medium lg:text-2xll">
+            به حرف باور نداریم، نتیجه تحویل می‌دهیم
+          </h1>
+          <p className="my-4 tracking-tight text-muted-foreground lg:px-15 lg:text-lg">
+            با تمرکز بر اجرا و پیگیری مستمر، نتایج ملموس برای تیم شما
+            می‌سازیم؛ نه وعده‌های توخالی.
+          </p>
+        </div>
+        <div className="relative mx-auto mt-20 flex h-112 max-w-4xl items-center justify-center gap-2">
+          {[
+            { value: 35, label: "رقیب ۱", delay: 0.2 },
+            { value: 25, label: "رقیب ۲", delay: 0.4 },
+            {
+              value: 99,
+              label: "ShadcnBlocks",
+              className: "bg-sky-400",
+              showToolTip: true,
+              delay: 0.6,
+            },
+            { value: 37, label: "رقیب ۴", delay: 0.8 },
+          ].map((props, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.5,
+                delay: index * 0.2,
+                type: "spring",
+                damping: 10,
+              }}
+              className="h-full w-full"
+            >
+              <BarChart {...props} />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats13 };
+
+const BarChart = ({
+  value,
+  label,
+  className = "",
+  showToolTip = false,
+  delay = 0,
+}: {
+  value: number;
+  label: string;
+  className?: string;
+  showToolTip?: boolean;
+  delay?: number;
+}) => {
+  return (
+    <div className="group relative h-full w-full">
+      <div className="candy-bg relative h-full w-full overflow-hidden rounded-[40px]">
+        <motion.div
+          initial={{ opacity: 0, y: 100, height: 0 }}
+          animate={{ opacity: 1, y: 0, height: `${value}%` }}
+          transition={{ duration: 0.5, type: "spring", damping: 20, delay }}
+          className={cn(
+            "absolute bottom-0 mt-auto w-full rounded-[40px] bg-primary/80 p-3 text-white",
+            className,
+          )}
+        >
+          <div className="relative flex h-15 w-full items-center justify-center gap-2 rounded-full bg-muted/20 tracking-tighter">
+            <div className="absolute top-1 start-1 hidden h-13 w-13 items-center justify-center rounded-full bg-muted/20 md:flex">
+              <CirclePercent className="size-8" />
+            </div>
+            <NumberFlow
+              value={value}
+              locales={numberFlowLocales}
+              suffix="٪"
+            />
+          </div>
+        </motion.div>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 100, height: 0 }}
+        animate={{ opacity: 1, y: 0, height: `${value}%` }}
+        transition={{ duration: 0.5, type: "spring", damping: 15, delay }}
+        className="absolute bottom-0 w-full"
+      >
+        <motion.div
+          initial={{ opacity: 0, y: 100 }}
+          animate={{ opacity: showToolTip ? 1 : 0, y: showToolTip ? 0 : 100 }}
+          transition={{ duration: 0.5, type: "spring", damping: 15, delay }}
+          className="absolute -top-9 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-muted-foreground px-2 py-1 text-white"
+        >
+          <div className="absolute -bottom-9 left-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-muted-foreground transition-all duration-300 ease-in-out" />
+          <svg
+            className={cn(
+              "absolute -bottom-2 left-1/2 -translate-x-1/2",
+              className?.includes("bg-sky-400")
+                ? "text-sky-400"
+                : "text-muted-foreground",
+            )}
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.83855 8.41381C4.43827 9.45255 5.93756 9.45255 6.53728 8.41381L9.65582 3.01233C10.2555 1.97359 9.50589 0.675159 8.30646 0.675159H2.06937C0.869935 0.675159 0.120287 1.97359 0.720006 3.01233L3.83855 8.41381Z"
+              fill="currentColor"
+            />
+          </svg>
+          تبدیل
+        </motion.div>
+      </motion.div>
+      <p className="mx-auto mt-2 w-fit tracking-tight text-muted-foreground/80">
+        {label}
+      </p>
+    </div>
+  );
+};
diff --git a/blocks/stats14.tsx b/blocks/stats14.tsx
new file mode 100644
index 0000000..a735440
--- /dev/null
+++ b/blocks/stats14.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import NumberFlow from "@number-flow/react";
+import { motion } from "framer-motion";
+import { ArrowLeft } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const numberFlowLocales = "fa-IR-u-nu-latn";
+const MotionNumberFlow = motion.create(NumberFlow);
+
+const Stats14 = () => {
+  return (
+    <section dir="rtl" lang="fa" className="py-32">
+      <div className="container flex items-center justify-center">
+        <DottedDiv className="h-114 w-full">
+          <div className="flex h-full w-full flex-col items-center justify-center bg-muted/30">
+            <p className="tracking-tight opacity-50 md:text-lg">
+              ۵۰ بلاک جدید هر ماه
+            </p>
+            <AnimatedNumberCountdown
+              endDate={new Date("2025-12-31")}
+              className="my-4"
+            />
+            <Button
+              variant="secondary"
+              className="text-md group mt-7 flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight shadow-none"
+            >
+              <span>به لیست انتظار بپیوندید</span>
+              <ArrowLeft className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0" />
+            </Button>
+          </div>
+        </DottedDiv>
+      </div>
+    </section>
+  );
+};
+
+export { Stats14 };
+
+const DottedDiv = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div
+    className={cn("relative h-full w-full overflow-hidden sm:p-4", className)}
+  >
+    <div className="absolute top-4 left-0 hidden h-[1.5px] w-[100%] bg-muted sm:block" />
+    <div className="absolute bottom-4 left-0 hidden h-[1.5px] w-[100%] bg-muted sm:block" />
+    <div className="absolute -top-25 left-4 hidden h-[130%] w-[1.5px] bg-muted sm:block" />
+    <div className="absolute -top-25 right-4 hidden h-[130%] w-[1.5px] bg-muted sm:block" />
+    <div className="absolute top-[12.5px] left-[12.5px] z-10 hidden size-2 rounded-full bg-foreground sm:block" />
+    <div className="absolute top-[12.5px] right-[12.5px] z-10 hidden size-2 rounded-full bg-foreground sm:block" />
+    <div className="absolute bottom-[12.5px] left-[12.5px] z-10 hidden size-2 rounded-full bg-foreground sm:block" />
+    <div className="absolute right-[12.5px] bottom-[12.5px] z-10 hidden size-2 rounded-full bg-foreground sm:block" />
+    {children}
+  </div>
+);
+
+interface CountdownProps {
+  endDate: Date;
+  startDate?: Date;
+  className?: string;
+}
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+function AnimatedNumberCountdown({
+  endDate,
+  startDate,
+  className,
+}: CountdownProps) {
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const start = startDate ? new Date(startDate) : new Date();
+      const end = new Date(endDate);
+      const difference = end.getTime() - start.getTime();
+
+      if (difference > 0) {
+        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+        const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
+        const minutes = Math.floor((difference / 1000 / 60) % 60);
+        const seconds = Math.floor((difference / 1000) % 60);
+
+        setTimeLeft({ days, hours, minutes, seconds });
+      } else {
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+      }
+    };
+
+    calculateTimeLeft();
+    const timer = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(timer);
+  }, [endDate, startDate]);
+
+  return (
+    <div className={`flex items-center justify-center gap-4 ${className}`}>
+      <div className="flex flex-col items-center">
+        <MotionNumberFlow
+          value={timeLeft.days}
+          locales={numberFlowLocales}
+          className="text-3xl font-semibold tracking-tight sm:text-2xll"
+          format={{ minimumIntegerDigits: 2 }}
+        />
+        <span className="text-sm text-muted-foreground">روز</span>
+      </div>
+      <div className="text-xl font-bold">:</div>
+      <div className="flex flex-col items-center">
+        <MotionNumberFlow
+          value={timeLeft.hours}
+          locales={numberFlowLocales}
+          className="text-3xl font-semibold tracking-tight sm:text-2xll"
+          format={{ minimumIntegerDigits: 2 }}
+        />
+        <span className="text-sm text-muted-foreground">ساعت</span>
+      </div>
+      <div className="text-xl font-bold">:</div>
+      <div className="flex flex-col items-center">
+        <MotionNumberFlow
+          value={timeLeft.minutes}
+          locales={numberFlowLocales}
+          className="text-3xl font-semibold tracking-tight sm:text-2xll"
+          format={{ minimumIntegerDigits: 2 }}
+        />
+        <span className="text-sm text-muted-foreground">دقیقه</span>
+      </div>
+      <div className="text-xl font-bold">:</div>
+      <div className="flex flex-col items-center">
+        <MotionNumberFlow
+          value={timeLeft.seconds}
+          locales={numberFlowLocales}
+          className="text-3xl font-semibold tracking-tight sm:text-2xll"
+          format={{ minimumIntegerDigits: 2 }}
+        />
+        <span className="text-sm text-muted-foreground">ثانیه</span>
+      </div>
+    </div>
+  );
+}
diff --git a/blocks/stats15.tsx b/blocks/stats15.tsx
new file mode 100644
index 0000000..41b882c
--- /dev/null
+++ b/blocks/stats15.tsx
@@ -0,0 +1,216 @@
+"use client";
+
+import NumberFlow from "@number-flow/react";
+import { motion } from "framer-motion";
+import { ArrowLeft } from "lucide-react";
+import React, { useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const numberFlowLocales = "fa-IR-u-nu-latn";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface Stats15Props {
+  className?: string;
+}
+
+const Stats15 = ({ className }: Stats15Props) => {
+  const ref = useRef(null);
+  const IllustrationRef = useRef(null);
+  const [selectedYear, setSelectedYear] = useState(2021);
+
+  const Stats = {
+    2021: {
+      TotalRevenue: 12.3,
+      TotalUsers: 0.3,
+      CompanyGrowth: 300,
+      NewCustomers: 100,
+      BigCorpClients: 10,
+      PathHeight: 0,
+    },
+    2022: {
+      TotalRevenue: 105,
+      TotalUsers: 50,
+      CompanyGrowth: 30,
+      NewCustomers: 1.5,
+      BigCorpClients: 75,
+      PathHeight: 55,
+    },
+    2023: {
+      TotalRevenue: 250,
+      TotalUsers: 120,
+      CompanyGrowth: 45,
+      NewCustomers: 2.8,
+      BigCorpClients: 150,
+      PathHeight: 105,
+    },
+    2024: {
+      TotalRevenue: 500,
+      TotalUsers: 300,
+      CompanyGrowth: 65,
+      NewCustomers: 4.2,
+      BigCorpClients: 250,
+      PathHeight: 160,
+    },
+  };
+
+  const years = Object.keys(Stats).map(Number);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col md:flex-row">
+        <div className="z-10 md:flex-1">
+          <h1 className="font-cal max-w-xl text-2xll font-medium tracking-tighter md:text-2xll">
+            اعداد دروغ نمی‌گویند
+          </h1>
+          <p className="mt-4 max-w-xl text-muted-foreground/80">
+            با تمرکز بر اجرا و پیگیری مستمر، نتایج ملموس برای تیم شما
+            می‌سازیم؛ نه وعده‌های توخالی.
+          </p>
+          <div className="my-10 flex gap-4">
+            <Button
+              variant="secondary"
+              className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+            >
+              <span>مستندات</span>
+              <ArrowLeft className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0" />
+            </Button>
+            <Button
+              variant="default"
+              className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
+            >
+              <span>شروع کنید</span>
+              <ArrowLeft className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0" />
+            </Button>
+          </div>
+          <div
+            ref={ref}
+            className="mt-12 flex max-w-3xl flex-col items-start bg-background md:mt-32 xl:bg-transparent"
+          >
+            <div className="mt-auto mb-10 grid w-full grid-cols-2 gap-4 md:grid-cols-4">
+              <div className="w-full text-start">
+                <h2 className="text-xl font-medium lg:text-2xll">
+                  <NumberFlow
+                    value={Stats[selectedYear as keyof typeof Stats].TotalUsers}
+                    locales={numberFlowLocales}
+                    format={{
+                      minimumFractionDigits: 1,
+                      maximumFractionDigits: 1,
+                    }}
+                    suffix=" هزار+"
+                  />
+                </h2>
+                <p className="text-sm whitespace-pre text-muted-foreground/70">
+                  اعضای تیم
+                </p>
+              </div>
+              <div className="w-full text-start">
+                <h2 className="text-xl font-medium lg:text-2xll">
+                  <NumberFlow
+                    value={
+                      Stats[selectedYear as keyof typeof Stats].CompanyGrowth
+                    }
+                    locales={numberFlowLocales}
+                    suffix="٪"
+                  />
+                </h2>
+                <p className="text-sm whitespace-pre text-muted-foreground/70">
+                  رشد شرکت
+                </p>
+              </div>
+              <div className="w-full text-start">
+                <h2 className="text-xl font-medium lg:text-2xll">
+                  <NumberFlow
+                    value={
+                      Stats[selectedYear as keyof typeof Stats].NewCustomers
+                    }
+                    locales={numberFlowLocales}
+                    format={{
+                      minimumFractionDigits: 1,
+                      maximumFractionDigits: 1,
+                    }}
+                    suffix=" میلیون"
+                  />
+                </h2>
+                <p className="text-sm whitespace-pre text-muted-foreground/70">
+                  مشتریان جدید
+                </p>
+              </div>
+              <div ref={IllustrationRef} className="w-full text-start">
+                <h2 className="text-xl font-medium lg:text-2xll">
+                  <NumberFlow
+                    value={
+                      Stats[selectedYear as keyof typeof Stats].BigCorpClients
+                    }
+                    locales={numberFlowLocales}
+                    prefix="~"
+                    suffix="+"
+                  />
+                </h2>
+                <p className="text-sm whitespace-pre text-muted-foreground/70">
+                  مشتریان سازمانی بزرگ
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="relative flex w-fit flex-row flex-wrap gap-2 md:mt-42 md:flex-col">
+          {years.map((year) => (
+            <div key={year} className="group">
+              <button
+                onClick={() => setSelectedYear(year)}
+                className={`relative rounded-full px-4 py-1 text-sm transition-all ease-out ${
+                  selectedYear === year
+                    ? "bg-primary text-primary-foreground md:translate-x-8"
+                    : "bg-muted/70 group-hover:translate-x-4 group-hover:bg-muted"
+                }`}
+              >
+                {formatNumber(year)} - {formatNumber(year + 1)}
+              </button>
+            </div>
+          ))}
+          <LinkIllustration
+            className="absolute bottom-9 -right-14 hidden translate-x-full -translate-y-full text-orange-500 md:block"
+            PathHeight={Stats[selectedYear as keyof typeof Stats].PathHeight}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats15 };
+
+const LinkIllustration = ({ className = "", PathHeight = 0 }) => {
+  return (
+    <svg
+      width="280"
+      height="124"
+      viewBox="0 0 412 178"
+      overflow="visible"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <motion.path
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 1 }}
+        key={PathHeight}
+        d={`M408.308 ${PathHeight}H294L114.965 274H1`}
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <motion.path
+        d={`M408.308 ${PathHeight}H294L114.965 274H1`}
+        stroke="black"
+        strokeWidth="1.5"
+        opacity="0.1"
+      />
+      <circle cx="408.309" cy={PathHeight} r="5" fill="currentColor" />
+      <circle cx="2" cy="274" r="5" fill="currentColor" />
+    </svg>
+  );
+};
diff --git a/blocks/stats16.tsx b/blocks/stats16.tsx
new file mode 100644
index 0000000..3c189cf
--- /dev/null
+++ b/blocks/stats16.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import React from "react";
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+
+import type { ChartConfig } from "@/components/ui/chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface StatItem {
+  title: string;
+  description: string;
+}
+
+const statsData: StatItem[] = [
+  {
+    title: `${formatNumber(100)}٪`,
+    description: "بهینه‌شده برای سئو",
+  },
+  {
+    title: `${formatNumber(750)}+`,
+    description: "بلاک آماده",
+  },
+  {
+    title: `${formatNumber(85)} هزار+`,
+    description: "اعتماد توسعه‌دهندگان",
+  },
+];
+
+interface Stats16Props {
+  className?: string;
+}
+
+const Stats16 = ({ className }: Stats16Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">
+          آمار
+        </p>
+        <h2 className="relative py-2 text-center font-sans text-xl font-semibold tracking-tighter lg:text-2xll">
+          آمارهایی که تفاوت را نشان می‌دهند
+        </h2>
+        <p className="mx-auto max-w-xl px-5 text-center text-sm text-muted-foreground lg:text-base">
+          با داده‌های واقعی و شفاف، ارزش واقعی محصول را ببینید و تصمیم‌های
+          بهتری بگیرید.
+        </p>
+
+        <div className="my-20 h-[30vh] w-full max-w-xl">
+          <ChartLineDots />
+        </div>
+        <div className="flex w-full max-w-2xl items-center justify-between">
+          {statsData.map((stat, index) => (
+            <div
+              key={index}
+              className="flex w-25 flex-col items-center justify-center gap-2 text-center"
+            >
+              <h2 className="text-3xl font-semibold tracking-tighter md:text-2xll">
+                {stat.title}
+              </h2>
+              <p className="text-sm text-muted-foreground">
+                {stat.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const chartData = [
+  { month: "ژان", desktop: 186, mobile: 80 },
+  { month: "فور", desktop: 305, mobile: 200 },
+  { month: "مار", desktop: 237, mobile: 120 },
+  { month: "آپر", desktop: 73, mobile: 190 },
+  { month: "مه", desktop: 209, mobile: 130 },
+  { month: "ژوئ", desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "دسکتاپ",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "موبایل",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+const ChartLineDots = () => {
+  return (
+    <ChartContainer config={chartConfig} className="h-full w-full">
+      <LineChart
+        accessibilityLayer
+        data={chartData}
+        margin={{
+          left: 12,
+          right: 12,
+        }}
+      >
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+        />
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel />}
+        />
+        <Line
+          dataKey="desktop"
+          type="natural"
+          stroke="var(--color-desktop)"
+          strokeWidth={2}
+          dot={{
+            fill: "var(--color-desktop)",
+          }}
+          activeDot={{
+            r: 6,
+          }}
+        />
+      </LineChart>
+    </ChartContainer>
+  );
+};
+
+export { Stats16 };
diff --git a/blocks/stats17.tsx b/blocks/stats17.tsx
new file mode 100644
index 0000000..764bb11
--- /dev/null
+++ b/blocks/stats17.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { TrendingUp } from "lucide-react";
+import React from "react";
+import { RadialBar, RadialBarChart } from "recharts";
+
+import type { ChartConfig } from "@/components/ui/chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatDecimal = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(value);
+
+interface StatItem {
+  title: string;
+  description: string;
+}
+
+const statsData: StatItem[] = [
+  {
+    title: `${formatNumber(100)}٪`,
+    description: "بهینه‌شده برای سئو",
+  },
+  {
+    title: `${formatNumber(750)}+`,
+    description: "بلاک آماده",
+  },
+  {
+    title: `${formatNumber(85)} هزار+`,
+    description: "اعتماد توسعه‌دهندگان",
+  },
+];
+
+interface Stats17Props {
+  className?: string;
+}
+
+const Stats17 = ({ className }: Stats17Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">آمار</p>
+        <h2 className="relative py-2 text-center font-sans text-xl font-semibold tracking-tighter lg:text-2xll">
+          آمارهایی که تفاوت را نشان می‌دهند
+        </h2>
+        <p className="mx-auto max-w-xl px-5 text-center text-sm text-muted-foreground lg:text-base">
+          با داده‌های واقعی و شفاف، ارزش واقعی محصول را ببینید و تصمیم‌های
+          بهتری بگیرید.
+        </p>
+
+        <div className="mt-18 grid w-full max-w-2xl grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="h-full w-full">
+            <ChartRadialSimple />
+            <div className="mt-2 w-full flex-col items-center justify-center text-center text-sm">
+              <div className="flex items-center justify-center gap-2 leading-none font-medium">
+                رشد {formatDecimal(5.2)}٪ در این ماه{" "}
+                <TrendingUp className="h-4 w-4" />
+              </div>
+              <div className="mt-2 leading-none text-muted-foreground">
+                نمایش کل بازدیدکنندگان در {formatNumber(6)} ماه گذشته
+              </div>
+            </div>
+          </div>
+          <div className="mt-10 flex w-full flex-row items-center justify-between gap-4 md:mt-0 md:flex-col">
+            {statsData.map((stat, index) => (
+              <div
+                key={index}
+                className="flex w-25 flex-col items-center justify-center gap-2 text-center"
+              >
+                <h2 className="text-3xl font-semibold tracking-tighter md:text-xl">
+                  {stat.title}
+                </h2>
+                <p className="text-sm text-muted-foreground">
+                  {stat.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+];
+
+const chartConfig = {
+  visitors: {
+    label: "بازدیدکنندگان",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "#8EC5FD",
+  },
+  safari: {
+    label: "Safari",
+    color: "#2B7FFC",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "#165DFC",
+  },
+  edge: {
+    label: "Edge",
+    color: "#1448E6",
+  },
+  other: {
+    label: "سایر",
+    color: "#193CB9",
+  },
+} satisfies ChartConfig;
+
+const ChartRadialSimple = () => {
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="mx-auto aspect-square max-h-[300px]"
+    >
+      <RadialBarChart data={chartData} innerRadius={30} outerRadius={150}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel nameKey="browser" />}
+        />
+        <RadialBar dataKey="visitors" background />
+      </RadialBarChart>
+    </ChartContainer>
+  );
+};
+
+export { Stats17 };
diff --git a/blocks/stats18.tsx b/blocks/stats18.tsx
new file mode 100644
index 0000000..ba0981f
--- /dev/null
+++ b/blocks/stats18.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import React from "react";
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";
+
+import type { ChartConfig } from "@/components/ui/chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface StatItem {
+  title: string;
+  description: string;
+}
+
+const statsData: StatItem[] = [
+  {
+    title: `${formatNumber(100)}٪`,
+    description: "بهینه‌شده برای سئو",
+  },
+  {
+    title: `${formatNumber(750)}+`,
+    description: "بلاک آماده",
+  },
+  {
+    title: `${formatNumber(85)} هزار+`,
+    description: "اعتماد توسعه‌دهندگان",
+  },
+];
+
+interface Stats18Props {
+  className?: string;
+}
+
+const Stats18 = ({ className }: Stats18Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container flex w-full flex-col items-center justify-center px-4">
+        <p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">آمار</p>
+        <h2 className="relative py-2 text-center font-sans text-xl font-semibold tracking-tighter lg:text-2xll">
+          آمارهایی که تفاوت را نشان می‌دهند
+        </h2>
+        <p className="mx-auto max-w-xl px-5 text-center text-sm text-muted-foreground lg:text-base">
+          با داده‌های واقعی و شفاف، ارزش واقعی محصول را ببینید و تصمیم‌های
+          بهتری بگیرید.
+        </p>
+
+        <div className="my-10 h-[40vh] w-full max-w-xl">
+          <ChartRadarDots />
+        </div>
+        <div className="flex w-full max-w-2xl items-center justify-between">
+          {statsData.map((stat, index) => (
+            <div
+              key={index}
+              className="flex w-25 flex-col items-center justify-center gap-2 text-center"
+            >
+              <h2 className="text-3xl font-semibold tracking-tighter md:text-2xll">
+                {stat.title}
+              </h2>
+              <p className="text-sm text-muted-foreground">
+                {stat.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const chartData = [
+  { month: "ژان", desktop: 186 },
+  { month: "فور", desktop: 305 },
+  { month: "مار", desktop: 237 },
+  { month: "آپر", desktop: 273 },
+  { month: "مه", desktop: 209 },
+  { month: "ژوئ", desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "دسکتاپ",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const ChartRadarDots = () => {
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="mx-auto aspect-square max-h-[350px]"
+    >
+      <RadarChart data={chartData}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <PolarAngleAxis dataKey="month" />
+        <PolarGrid />
+        <Radar
+          dataKey="desktop"
+          fill="var(--color-desktop)"
+          fillOpacity={0.6}
+          dot={{
+            r: 4,
+            fillOpacity: 1,
+          }}
+        />
+      </RadarChart>
+    </ChartContainer>
+  );
+};
+
+export { Stats18 };
diff --git a/blocks/stats19.tsx b/blocks/stats19.tsx
new file mode 100644
index 0000000..ace3188
--- /dev/null
+++ b/blocks/stats19.tsx
@@ -0,0 +1,67 @@
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface Stats19Props {
+  className?: string;
+}
+
+const Stats19 = ({ className }: Stats19Props) => {
+  const stats = [
+    {
+      number: `${formatNumber(80)} هزار+`,
+      description:
+        "از دسترسی به بیش از ۸۰ هزار کاربر تا پشتیبانی از بیش از ۲۰ استارتاپ؛ این اعداد وسعت، تأثیر و تداوم کار ما را نشان می‌دهند.",
+    },
+    {
+      number: `${formatNumber(20)}+`,
+      description:
+        "استارتاپ‌هایی که با راهکارهای نوآورانه و راهنمایی استراتژیک برای رشد و موفقیت در بازارهایشان پشتیبانی شده‌اند.",
+    },
+    {
+      number: `${formatNumber(95)}٪`,
+      description:
+        "نرخ رضایت مشتری با پشتیبانی مستمر، تحویل باکیفیت و همکاری‌های بلندمدت مبتنی بر اعتماد.",
+    },
+    {
+      number: `${formatNumber(150)}+`,
+      description:
+        "پروژه‌های تکمیل‌شده در صنایع مختلف، از وب تا موبایل، هر کدام متناسب با نیاز کسب‌وکار.",
+    },
+    {
+      number: `${formatNumber(5)} سال`,
+      description:
+        "سال‌ها تجربه در صنعت، با یادگیری مستمر و سازگاری با فناوری‌ها و نیازهای بازار.",
+    },
+    {
+      number: `${formatNumber(24)}/${formatNumber(7)}`,
+      description:
+        "پشتیبانی ۲۴ ساعته برای نگهداری و رفع مشکلات بحرانی تا اجرای روان برنامه‌ها.",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-20 lg:grid-cols-6">
+          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 py-8 lg:sticky">
+            <span className="size-3 bg-orange-500" />
+            <p className="text-xl text-foreground/30">دستاوردها</p>
+          </div>
+          <ul className="col-span-4 w-full">
+            {stats.map((stat, index) => (
+              <li key={index} className="grid grid-cols-5 border-b py-8">
+                <h3 className="col-span-2 text-xl font-medium">
+                  {stat.number}
+                </h3>
+                <p className="col-span-3">{stat.description}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats19 };
diff --git a/blocks/stats2.tsx b/blocks/stats2.tsx
new file mode 100644
index 0000000..4a1791a
--- /dev/null
+++ b/blocks/stats2.tsx
@@ -0,0 +1,80 @@
+import { ArrowDown, ArrowUp, Infinity as InfinityIcon } from "lucide-react";
+
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface Stats2Props {
+  className?: string;
+}
+
+const Stats2 = ({ className }: Stats2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h1 className="text-center text-xl font-semibold lg:text-2xll">
+          بینش‌های عملکرد پلتفرم
+        </h1>
+        <div className="grid gap-6 pt-9 text-center md:grid-cols-3 lg:pt-20">
+          <Card className="border-none bg-accent p-8 lg:p-10">
+            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
+              <ArrowUp className="ms-1 h-8 text-green-400" />
+              {formatNumber(20000)}
+            </p>
+            <p className="text-muted-foreground">
+              رشد چشمگیر در تعداد کاربران فعال پلتفرم.
+            </p>
+          </Card>
+          <Card className="border-none bg-accent p-8 lg:p-10">
+            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
+              <ArrowUp className="ms-1 h-8 text-green-400" />
+              {formatNumber(20)}+
+            </p>
+            <p className="text-muted-foreground">
+              ابزار و یکپارچه‌سازی آماده برای تیم‌های مختلف.
+            </p>
+          </Card>
+          <Card className="border-none bg-accent p-8 lg:p-10">
+            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
+              <ArrowDown className="ms-1 h-8 text-red-400" />
+              {formatNumber(50)}٪
+            </p>
+            <p className="text-muted-foreground">
+              کاهش زمان پردازش و بهبود کارایی عملیات.
+            </p>
+          </Card>
+          <Card className="border-none bg-accent p-8 lg:p-10">
+            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
+              <ArrowUp className="ms-1 h-8 text-green-400" />
+              {formatNumber(100)}+
+            </p>
+            <p className="text-muted-foreground">
+              پوشش جهانی در بیش از صد بازار فعال.
+            </p>
+          </Card>
+          <Card className="border-none bg-accent p-8 lg:p-10">
+            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
+              <ArrowUp className="ms-1 h-8 text-green-400" />
+              {formatNumber(100)}٪
+            </p>
+            <p className="text-muted-foreground">
+              رضایت کامل مشتریان از کیفیت خدمات.
+            </p>
+          </Card>
+          <Card className="border-none bg-accent p-8 lg:p-10">
+            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
+              <InfinityIcon className="ms-1 h-8" />
+              بی‌نهایت
+            </p>
+            <p className="text-muted-foreground">
+              دسترسی پایدار بدون محدودیت زمانی.
+            </p>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats2 };
diff --git a/blocks/stats4.tsx b/blocks/stats4.tsx
new file mode 100644
index 0000000..1029682
--- /dev/null
+++ b/blocks/stats4.tsx
@@ -0,0 +1,70 @@
+import { Star } from "lucide-react";
+import { BiLogoPlayStore } from "react-icons/bi";
+import { FaApple } from "react-icons/fa";
+import { SiTrustpilot } from "react-icons/si";
+
+import { cn } from "@/lib/utils";
+
+const formatRating = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(value);
+
+interface Stats4Props {
+  className?: string;
+}
+
+const Stats4 = ({ className }: Stats4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col-reverse items-center justify-between gap-4 lg:flex-row">
+          <p className="text-center text-lg font-medium lg:text-start lg:text-xl">
+            بینش‌های عملکرد پلتفرم
+          </p>
+          <div className="flex items-center gap-6 lg:gap-12">
+            <div className="flex flex-col items-center gap-1">
+              <div className="flex items-center gap-2 text-xl font-medium">
+                <span>{formatRating(4.8)}</span>
+                <Star />
+              </div>
+              <div className="flex items-center gap-2">
+                <FaApple className="lg:ms-1" />
+                <span className="text-xs whitespace-nowrap lg:text-sm">
+                  فروشگاه آی‌اواس
+                </span>
+              </div>
+            </div>
+            <div className="flex flex-col items-center gap-1">
+              <div className="flex items-center gap-2 text-xl font-medium">
+                <span>{formatRating(4.8)}</span>
+                <Star />
+              </div>
+              <div className="flex items-center gap-2">
+                <BiLogoPlayStore className="lg:ms-1" />
+                <span className="text-xs whitespace-nowrap lg:text-sm">
+                  فروشگاه اندروید
+                </span>
+              </div>
+            </div>
+            <div className="flex flex-col items-center gap-1">
+              <div className="flex items-center gap-2 text-xl font-medium">
+                <span>{formatRating(4.9)}</span>
+                <Star />
+              </div>
+              <div className="flex items-center gap-2">
+                <SiTrustpilot className="lg:ms-1" />
+                <span className="text-xs whitespace-nowrap lg:text-sm">
+                  سایت نظرسنجی
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats4 };
diff --git a/blocks/stats5.tsx b/blocks/stats5.tsx
new file mode 100644
index 0000000..11e9fdd
--- /dev/null
+++ b/blocks/stats5.tsx
@@ -0,0 +1,64 @@
+import { BarChart3, TrendingDown, TrendingUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface Stats5Props {
+  className?: string;
+}
+
+const Stats5 = ({ className }: Stats5Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background/50 py-20 md:py-32", className)}
+    >
+      <div className="container flex flex-col items-start text-start">
+        <h2 className="mb-12 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-xl md:mb-20 md:max-w-[30rem] lg:max-w-[40rem] lg:text-2xll lg:leading-[4rem]">
+          بینش‌های عملکرد پلتفرم
+        </h2>
+        <div className="flex w-full flex-col gap-x-8 gap-y-12 border-border md:flex-row md:border-b md:pb-10">
+          <div className="group w-full">
+            <div className="relative mb-4 text-2xll font-bold text-primary transition-transform duration-300 group-hover:scale-105 md:mb-6 lg:text-2xll">
+              <span>{formatNumber(95)}</span>
+              <span className="text-xl lg:text-2xll">٪</span>
+              <div className="absolute -bottom-2 start-0 h-1 w-12 rounded-full bg-primary"></div>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground md:text-lg">
+              <TrendingUp className="h-5 w-5 text-green-500" />
+              <span className="leading-7">رضایت کاربران</span>
+            </div>
+          </div>
+
+          <div className="group w-full">
+            <div className="relative mb-4 text-2xll font-bold text-primary transition-transform duration-300 group-hover:scale-105 md:mb-6 lg:text-2xll">
+              <span>{formatNumber(95)}</span>
+              <span className="text-xl lg:text-2xll">٪</span>
+              <div className="absolute -bottom-2 start-0 h-1 w-12 rounded-full bg-primary"></div>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground md:text-lg">
+              <TrendingDown className="h-5 w-5 text-red-500" />
+              <span className="leading-7">کاهش هزینه عملیاتی</span>
+            </div>
+          </div>
+
+          <div className="group w-full">
+            <div className="relative mb-4 text-2xll font-bold text-primary transition-transform duration-300 group-hover:scale-105 md:mb-6 lg:text-2xll">
+              <span>{formatNumber(95)}</span>
+              <span className="text-xl lg:text-2xll">٪</span>
+              <div className="absolute -bottom-2 start-0 h-1 w-12 rounded-full bg-primary"></div>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground md:text-lg">
+              <BarChart3 className="h-5 w-5 text-blue-500" />
+              <span className="leading-7">در دسترس بودن سامانه</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats5 };
diff --git a/blocks/stats6.tsx b/blocks/stats6.tsx
new file mode 100644
index 0000000..c7edd05
--- /dev/null
+++ b/blocks/stats6.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+interface Stats6Props {
+  className?: string;
+}
+
+const Stats6 = ({ className }: Stats6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-accent py-32", className)}>
+      <div className="container flex flex-col items-start text-start">
+        <div className="mb-12 w-full md:mb-16">
+          <h2 className="mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-xl md:max-w-[30rem] lg:max-w-[37rem] lg:text-2xll">
+            بینش‌های عملکرد پلتفرم
+          </h2>
+          <div className="flex flex-col justify-start gap-2 sm:flex-row">
+            <Button className="w-full sm:w-auto">شروع کنید</Button>
+            <Button variant="outline" className="w-full sm:w-auto">
+              بیشتر بدانید
+            </Button>
+          </div>
+        </div>
+        <div className="grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16">
+          <div className="w-full">
+            <div className="mb-2 text-xl font-semibold sm:text-xl lg:text-2xll">
+              {formatNumber(90)}٪
+            </div>
+            <div className="text-base leading-6 text-muted-foreground lg:text-lg">
+              رضایت مشتری
+            </div>
+          </div>
+          <div className="w-full">
+            <div className="mb-2 text-xl font-semibold sm:text-xl lg:text-2xll">
+              {formatNumber(200)}+
+            </div>
+            <div className="text-base leading-6 text-muted-foreground lg:text-lg">
+              تیم‌های فعال
+            </div>
+          </div>
+          <div className="w-full">
+            <div className="mb-2 text-xl font-semibold sm:text-xl lg:text-2xll">
+              {formatNumber(99)}٪
+            </div>
+            <div className="text-base leading-6 text-muted-foreground lg:text-lg">
+              در دسترس بودن سامانه
+            </div>
+          </div>
+          <div className="w-full">
+            <div className="mb-2 text-xl font-semibold sm:text-xl lg:text-2xll">
+              {formatNumber(150)}+
+            </div>
+            <div className="text-base leading-6 text-muted-foreground lg:text-lg">
+              یکپارچه‌سازی‌های آماده
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats6 };
diff --git a/blocks/stats7.tsx b/blocks/stats7.tsx
new file mode 100644
index 0000000..804f294
--- /dev/null
+++ b/blocks/stats7.tsx
@@ -0,0 +1,69 @@
+import { ArrowDown, ArrowUp } from "lucide-react";
+
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatPercent = (value: number) =>
+  `${new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(value)}٪`;
+
+interface Stats7Props {
+  className?: string;
+}
+
+const Stats7 = ({ className }: Stats7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-3xl rounded-lg border p-6 md:p-10">
+          <h2 className="mb-6 text-xl font-medium">آمار هفتگی</h2>
+          <div className="flex flex-col gap-8">
+            <div>
+              <div className="mb-2 flex justify-between">
+                <p className="font-medium">کارهای انجام‌شده</p>
+                <span className="flex items-center gap-1 font-medium text-green-400">
+                  {formatPercent(80.2)} <ArrowUp size={16} />
+                </span>
+              </div>
+              <Progress value={80} />
+              <p className="mt-1 text-sm text-muted-foreground">
+                {formatNumber(10)}٪ بیشتر از هفته گذشته
+              </p>
+            </div>
+            <div>
+              <div className="mb-2 flex justify-between">
+                <p className="font-medium">شاخص پیشرفت</p>
+                <span className="flex items-center gap-1 font-medium text-destructive">
+                  {formatPercent(55.2)} <ArrowDown size={16} />
+                </span>
+              </div>
+              <Progress value={55} />
+              <p className="mt-1 text-sm text-muted-foreground">
+                {formatNumber(29)}٪ کمتر از هفته گذشته
+              </p>
+            </div>
+
+            <div>
+              <div className="mb-2 flex justify-between">
+                <p className="font-medium">نرخ خطا</p>
+                <span className="flex items-center gap-1 font-medium text-destructive">
+                  {formatPercent(20.1)} <ArrowDown size={16} />
+                </span>
+              </div>
+              <Progress value={20} />
+              <p className="mt-1 text-sm text-muted-foreground">
+                {formatNumber(5)}٪ بیشتر از هفته گذشته
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats7 };
diff --git a/blocks/stats8.tsx b/blocks/stats8.tsx
new file mode 100644
index 0000000..11b10bf
--- /dev/null
+++ b/blocks/stats8.tsx
@@ -0,0 +1,88 @@
+import { ArrowLeft } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const formatNumber = (value: number) => value.toLocaleString("fa-IR");
+
+const formatDecimal = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(value);
+
+const formatPercent = (value: number) => `${formatDecimal(value)}٪`;
+
+interface Stats8Props {
+  className?: string;
+  heading?: string;
+  description?: string;
+  link?: {
+    text: string;
+    url: string;
+  };
+  stats?: Array<{
+    id: string;
+    value: string;
+    label: string;
+  }>;
+}
+
+const Stats8 = ({
+  heading = "بینش‌های عملکرد پلتفرم",
+  description = "پایداری و مقیاس‌پذیری برای همه کاربران",
+  link = {
+    text: "گزارش کامل تأثیر را بخوانید",
+    url: "https://www.ShadcnBlocks",
+  },
+  stats = [
+    {
+      id: "stat-1",
+      value: `${formatNumber(250)}٪+`,
+      label: "میانگین رشد تعامل کاربران",
+    },
+    {
+      id: "stat-2",
+      value: `${formatDecimal(2.5)} میلیون ریال`,
+      label: "صرفه‌جویی سالانه برای هر شریک سازمانی",
+    },
+    {
+      id: "stat-3",
+      value: `${formatNumber(200)}+`,
+      label: "یکپارچه‌سازی با پلتفرم‌های برتر صنعت",
+    },
+    {
+      id: "stat-4",
+      value: formatPercent(99.9),
+      label: "رضایت مشتری در سال گذشته",
+    },
+  ],
+  className,
+}: Stats8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-4">
+          <h2 className="text-xl font-bold md:text-xl">{heading}</h2>
+          <p>{description}</p>
+          <a
+            href={link.url}
+            className="flex items-center gap-1 font-bold hover:underline"
+          >
+            {link.text}
+            <ArrowLeft className="h-auto w-4" />
+          </a>
+        </div>
+        <div className="mt-14 grid gap-x-5 gap-y-8 md:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat) => (
+            <div key={stat.id} className="flex flex-col gap-5">
+              <div className="text-2xll font-bold">{stat.value}</div>
+              <p>{stat.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats8 };
diff --git a/blocks/stats9.tsx b/blocks/stats9.tsx
new file mode 100644
index 0000000..3948d9e
--- /dev/null
+++ b/blocks/stats9.tsx
@@ -0,0 +1,129 @@
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const formatDecimal = (value: number) =>
+  new Intl.NumberFormat("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(value);
+
+const formatPercent = (value: number) => `${formatDecimal(value)}٪`;
+
+interface Stats9Props {
+  className?: string;
+}
+
+const Stats9 = ({ className }: Stats9Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid items-center gap-12 lg:grid-cols-2">
+          <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
+            <div className="flex flex-col items-center gap-3 text-center lg:items-start lg:text-start">
+              <Badge
+                variant="outline"
+                className="flex w-fit items-center gap-1"
+              >
+                امکانات
+              </Badge>
+              <h1 className="mb-5 text-xl font-semibold text-pretty">
+                همین امروز تجربه دیجیتال خود را متحول کنید
+              </h1>
+              <p className="text-muted-foreground">
+                با فناوری پیشرفته، گردش کار خود را ساده کنید و امکانات تازه‌ای
+                در فضای دیجیتال کشف کنید.
+              </p>
+            </div>
+            <div className="mt-12 flex justify-center gap-7 lg:justify-start">
+              <div className="flex flex-col gap-1.5">
+                <p className="text-xl font-bold text-foreground sm:text-3xl">
+                  {formatDecimal(2.5)} میلیون+
+                </p>
+                <p className="text-muted-foreground">کاربران خدمت‌رسانی‌شده</p>
+              </div>
+              <Separator orientation="vertical" className="h-auto" />
+              <div className="flex flex-col gap-1.5">
+                <p className="text-xl font-bold text-foreground sm:text-3xl">
+                  {formatPercent(99.9)}
+                </p>
+                <p className="text-muted-foreground">در دسترس بودن</p>
+              </div>
+              <Separator orientation="vertical" className="h-auto" />
+              <div className="flex flex-col gap-1.5">
+                <p className="text-xl font-bold text-foreground sm:text-3xl">
+                  {formatDecimal(4.8)}
+                </p>
+                <p className="text-muted-foreground">امتیاز کاربران</p>
+              </div>
+            </div>
+          </div>
+          <div className="grid gap-2.5 text-start sm:grid-cols-2 sm:text-center lg:text-start">
+            <div className="flex items-center gap-5 rounded-lg border border-border bg-muted p-6 sm:flex-col sm:items-start sm:p-7">
+              <img
+                src="/block-media/shadcnblocks/block/block-1.svg"
+                alt="لوگوی یکپارچه‌سازی ابری"
+                className="mx-0 size-12 sm:mx-auto lg:mx-0"
+              />
+              <div className="flex flex-col gap-1">
+                <p className="text-sm font-semibold text-foreground sm:text-base">
+                  یکپارچه‌سازی ابری
+                </p>
+                <p className="text-sm text-muted-foreground sm:text-base">
+                  راهکارهای ابری یکپارچه برای نیازهای کسب‌وکار مدرن
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-5 rounded-lg border border-border bg-muted p-6 sm:flex-col sm:items-start sm:p-7">
+              <img
+                src="/block-media/shadcnblocks/block/block-2.svg"
+                alt="لوگوی پایش ۲۴ ساعته"
+                className="mx-0 size-12 sm:mx-auto lg:mx-0"
+              />
+              <div className="flex flex-col gap-1">
+                <p className="text-sm font-semibold text-foreground sm:text-base">
+                  پایش ۲۴ ساعته
+                </p>
+                <p className="text-sm text-muted-foreground sm:text-base">
+                  پایش و پشتیبانی بی‌وقفه سامانه
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-5 rounded-lg border border-border bg-muted p-6 sm:flex-col sm:items-start sm:p-7">
+              <img
+                src="/block-media/shadcnblocks/block/block-3.svg"
+                alt="لوگوی ابزارهای هوش مصنوعی"
+                className="mx-0 size-12 sm:mx-auto lg:mx-0"
+              />
+              <div className="flex flex-col gap-1">
+                <p className="text-sm font-semibold text-foreground sm:text-base">
+                  ابزارهای مبتنی بر هوش مصنوعی
+                </p>
+                <p className="text-sm text-muted-foreground sm:text-base">
+                  الگوریتم‌های یادگیری ماشین پیشرفته با بینش‌های هوشمند
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-5 rounded-lg border border-border bg-muted p-6 sm:flex-col sm:items-start sm:p-7">
+              <img
+                src="/block-media/shadcnblocks/block/block-4.svg"
+                alt="لوگوی امنیت سازمانی"
+                className="mx-0 size-12 sm:mx-auto lg:mx-0"
+              />
+              <div className="flex flex-col gap-1">
+                <p className="text-sm font-semibold text-foreground sm:text-base">
+                  امنیت سازمانی
+                </p>
+                <p className="text-sm text-muted-foreground sm:text-base">
+                  رمزنگاری در سطح نظامی و محافظت پیشرفته در برابر تهدیدها
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Stats9 };
diff --git a/blocks/team1.tsx b/blocks/team1.tsx
new file mode 100644
index 0000000..022a1cf
--- /dev/null
+++ b/blocks/team1.tsx
@@ -0,0 +1,94 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface TeamMember {
+  id: string;
+  name: string;
+  role: string;
+  avatar: string;
+}
+
+interface Team1Props {
+  heading?: string;
+  subheading?: string;
+  description?: string;
+  members?: TeamMember[];
+  className?: string;
+}
+
+const Team1 = ({
+  heading = "تیم ما",
+  description = "تیم متنوع ما از متخصصان با دهه‌ها تجربه در طراحی، مهندسی و توسعه محصول تشکیل شده است.",
+  members = [
+    {
+      id: "member-1",
+      name: "سارا احمدی",
+      role: "مدیرعامل و بنیان‌گذار",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    {
+      id: "member-2",
+      name: "امیر رضایی",
+      role: "مدیر فناوری",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    {
+      id: "member-3",
+      name: "مریم حسینی",
+      role: "مدیر طراحی",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    {
+      id: "member-4",
+      name: "علی محمدی",
+      role: "مهندس ارشد",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-4.webp",
+    },
+    {
+      id: "member-5",
+      name: "نازنین طاهری",
+      role: "مدیر محصول",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+    },
+    {
+      id: "member-6",
+      name: "پویا جعفری",
+      role: "طراح تجربه کاربری",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-6.webp",
+    },
+  ],
+  className,
+}: Team1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center text-center">
+        <h2 className="my-6 text-xl font-bold text-pretty lg:text-xl">
+          {heading}
+        </h2>
+        <p className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
+          {description}
+        </p>
+      </div>
+      <div className="container mt-16 grid gap-x-8 gap-y-16 md:grid-cols-2 lg:grid-cols-3">
+        {members.map((member) => (
+          <div key={member.id} className="flex flex-col items-center">
+            <Avatar className="mb-4 size-20 border md:mb-5 lg:size-24">
+              <AvatarImage src={member.avatar} alt={member.name} />
+              <AvatarFallback>{member.name}</AvatarFallback>
+            </Avatar>
+            <p className="text-center font-medium">{member.name}</p>
+            <p className="text-center text-muted-foreground">{member.role}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Team1 };
diff --git a/blocks/team10.tsx b/blocks/team10.tsx
new file mode 100644
index 0000000..7e48c47
--- /dev/null
+++ b/blocks/team10.tsx
@@ -0,0 +1,140 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const members = [
+  {
+    name: "سارا احمدی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "مدیرعامل",
+  },
+  {
+    name: "امیر رضایی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    role: "مدیر فناوری",
+  },
+  {
+    name: "مریم حسینی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "مدیر محصول",
+  },
+  {
+    name: "علی محمدی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    role: "مهندس ارشد",
+  },
+  {
+    name: "پویا جعفری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "طراح تجربه کاربری",
+  },
+  {
+    name: "دانیال ویلسونی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    role: "مهندس داده",
+  },
+  {
+    name: "لیلا کریمی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "طراح رابط کاربری",
+  },
+  {
+    name: "نازنین طاهری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "مهندس دواپس",
+  },
+  {
+    name: "زهرا دیو",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "مدیر محصول",
+  },
+  {
+    name: "رضا مارتین",
+    image:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    role: "مدیر کل",
+  },
+  {
+    name: "ژیلا سفید",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "مدیر منابع انسانی",
+  },
+  {
+    name: "وحید کلارک",
+    image:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    role: "مدیر فروش",
+  },
+  {
+    name: "پریسا معمار",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "مدیر شبکه‌های اجتماعی",
+  },
+  {
+    name: "توماج لی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    role: "مهندس امنیت",
+  },
+  {
+    name: "محمد گارسیا",
+    image:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+    role: "دانشمند داده",
+  },
+  {
+    name: "رامین تام",
+    image:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+    role: "مهندس تضمین کیفیت",
+  },
+];
+
+interface Team10Props {
+  className?: string;
+}
+
+const Team10 = ({ className }: Team10Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
+      <div className="container">
+        <div className="max-w-xl text-start">
+          <h2 className="mb-5 text-xl md:text-2xll">با متخصصان ما آشنا شوید</h2>
+          <p className="mb-12 text-muted-foreground md:text-lg">
+            به تیم متخصصان ما بپیوندید و بخشی از شرکتی نوآور باشید که با
+            راه‌حل‌های خلاقانه آینده فناوری را می‌سازد.
+          </p>
+          <Button size="lg">به تیم ما بپیوندید</Button>
+        </div>
+        <div className="mt-20 grid grid-cols-2 gap-x-4 gap-y-8 md:grid-cols-3 md:gap-8 lg:grid-cols-4">
+          {members.map((member) => (
+            <div key={member.name} className="flex items-center gap-3 text-start">
+              <Avatar className="size-10 border border-border">
+                <AvatarImage src={member.image} alt={member.name} />
+              </Avatar>
+              <div>
+                <h3 className="text-sm font-medium">{member.name}</h3>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  {member.role}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team10 };
diff --git a/blocks/team11.tsx b/blocks/team11.tsx
new file mode 100644
index 0000000..da4a957
--- /dev/null
+++ b/blocks/team11.tsx
@@ -0,0 +1,292 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React, { memo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface TeamMember {
+  image: string;
+  name: string;
+  role: string;
+  description: string;
+}
+
+interface TeamMemberCardProps {
+  member: TeamMember;
+  highlighted?: boolean;
+}
+
+const TeamMemberCard = memo(
+  ({ member, highlighted = false }: TeamMemberCardProps) => {
+    return (
+      <div
+        className={cn(
+          "flex flex-col gap-4 px-2 md:px-5 md:pt-8",
+          highlighted && "md:py-0 md:pb-4",
+        )}
+      >
+        <div
+          className={cn(
+            "flex flex-col gap-2 pt-4 md:flex-row md:items-center",
+            !highlighted && "border-b pb-4 md:border-b-2",
+          )}
+        >
+          <img
+            src={member.image}
+            alt={member.name}
+            className="size-full rounded border object-cover md:size-12"
+          />
+
+          <div className="flex flex-col gap-1 tracking-tight text-start">
+            <p className="line-clamp-1">{member.name}</p>
+            <p className="line-clamp-1 text-sm text-muted-foreground">
+              {member.role}
+            </p>
+          </div>
+        </div>
+        {highlighted && (
+          <>
+            <span className="h-0.5 w-full bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500" />
+            <p className="line-clamp-2 text-start text-xs">
+              {member.description}
+            </p>
+          </>
+        )}
+      </div>
+    );
+  },
+);
+TeamMemberCard.displayName = "TeamMemberCard";
+
+interface Team11Props {
+  heading?: string;
+  description?: string;
+  members?: TeamMember[];
+  className?: string;
+}
+
+const Team11 = ({
+  className,
+  heading = "با تیم فناوری ما آشنا شوید",
+  description = "ذهن‌های نوآور که آینده فناوری را می‌سازند",
+  members = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar6.webp",
+      name: "سارا احمدی",
+      role: "مدیر فناوری",
+      description:
+        "مهندس سابق گوگل با ۱۲ سال تجربه در معماری ابری.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
+      name: "امیر رضایی",
+      role: "مهندس ارشد نرم‌افزار",
+      description: "سازنده محصول توسعه کامل متخصص رابط کاربری و سرور برنامه.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
+      name: "مریم حسینی",
+      role: "مدیر محصول",
+      description:
+        "استراتژیست محصول داده‌محور با پیشینه طراحی تجربه کاربری.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
+      name: "علی محمدی",
+      role: "مهندس دواپس",
+      description:
+        "متخصص اتوماسیون زیرساخت برای استقرار بی‌درنگ.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
+      name: "نازنین طاهری",
+      role: "طراح تجربه و رابط کاربری",
+      description: "طراح خلاق با اشتیاق به طراحی کاربرمحور.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
+      name: "پویا جعفری",
+      role: "دانشمند داده",
+      description: "متخصص یادگیری ماشین که داده را به بینش تبدیل می‌کند.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
+      name: "مائده گارسیا",
+      role: "توسعه‌دهنده فرانت‌اند",
+      description:
+        "متخصص رابط کاربری و زبان نوع‌ایمن برای تجربه کاربری روان.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+      name: "حسین ویلسون",
+      role: "توسعه‌دهنده بک‌اند",
+      description: "معمار اتصال هوشمند و متخصص بهینه‌سازی پایگاه داده.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
+      name: "راحیل پارخی",
+      role: "مهندس تضمین کیفیت",
+      description:
+        "متخصص QA که اطمینان می‌دهد محصولات بالاترین استانداردها را دارند.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
+      name: "رایان فوستر",
+      role: "توسعه‌دهنده موبایل",
+      description: "متخصص موبایل اپل و موبایل اندروید برای تجربه موبایل روان.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
+      name: "اسکندر چن",
+      role: "مهندس امنیت",
+      description: "متخصص امنیت سایبری برای محافظت از سیستم‌ها.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar12.jpg",
+      name: "کیوان مولر",
+      role: "نویسنده فنی",
+      description:
+        "متخصص مستندسازی که مفاهیم فنی را قابل فهم می‌کند.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar13.jpg",
+      name: "سوفیا اندرسون",
+      role: "مدیر بازاریابی",
+      description: "متخصص بازاریابی رشد برای جذب کاربر.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar13.jpg",
+      name: "یوسف گونزالز",
+      role: "مهندس فروش",
+      description:
+        "متخصص فروش فنی برای کمک به درک راه‌حل‌ها توسط مشتریان.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar14.jpg",
+      name: "مینا دام",
+      role: "مدیر موفقیت مشتری",
+      description:
+        "مدافع مشتری برای اطمینان از دستیابی مشتریان به اهدافشان.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar15.jpg",
+      name: "نیما مطاقیان",
+      role: "تحلیل‌گر کسب‌وکار",
+      description:
+        "تحلیل‌گر داده که نیازهای کسب‌وکار را به راه‌حل تبدیل می‌کند.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar16.jpg",
+      name: "ژیلا لیو",
+      role: "مدیر منابع انسانی",
+      description:
+        "متخصص عملیات منابع انسانی برای ساخت فرهنگ سازمانی.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar17.jpg",
+      name: "کامران اوبراین",
+      role: "مدیر مالی",
+      description: "متخصص برنامه‌ریزی مالی برای ثبات کسب‌وکار.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar18.jpg",
+      name: "آندیا تورس",
+      role: "استراتژیست محتوا",
+      description: "متخصص بازاریابی محتوا برای کمپین‌های دیجیتال B2B.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar19.jpg",
+      name: "رضا کیم",
+      role: "مشاور حقوقی",
+      description: "وکیل فناوری برای هدایت در چشم‌اندازهای مقرراتی.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar20.jpg",
+      name: "ژنفر والش",
+      role: "مدیر عملیات",
+      description: "متخصص عملیات برای اطمینان از کارکرد روان کسب‌وکار.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar21.jpg",
+      name: "دانیال پاتیل",
+      role: "مهندس پژوهش",
+      description: "متخصص تحقیق و توسعه برای کاوش فناوری‌های پیشرفته.",
+    },
+  ],
+}: Team11Props) => {
+  const [hoveredMember, setHoveredMember] = useState<number | null>(null);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-14">
+          <div className="flex flex-col gap-4 border-b-2 pb-6 text-start">
+            <h3 className="text-3xl font-light tracking-tight lg:text-2xll">
+              {heading}
+            </h3>
+            <p className="text-sm tracking-tight text-muted-foreground lg:text-lg">
+              {description}
+            </p>
+          </div>
+          <ul
+            onMouseLeave={() => setHoveredMember(null)}
+            className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+          >
+            {members.map((member, index) => {
+              return (
+                <li
+                  key={`team-11-member-${member.name}-${index}`}
+                  onMouseEnter={() => setHoveredMember(index)}
+                  className="relative"
+                >
+                  <TeamMemberCard member={member} />
+
+                  {hoveredMember === index && (
+                    <motion.div
+                      layoutId="team-11-member-card"
+                      transition={{
+                        layout: {
+                          duration: 0.2,
+                          type: "spring",
+                          bounce: 0.1,
+                        },
+                      }}
+                      className="pointer-events-none absolute inset-0 z-10 hidden h-max rounded-2xl bg-background shadow-lg md:block dark:border"
+                    >
+                      <TeamMemberCard member={member} highlighted />
+                    </motion.div>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team11 };
diff --git a/blocks/team12.tsx b/blocks/team12.tsx
new file mode 100644
index 0000000..fbdc3a0
--- /dev/null
+++ b/blocks/team12.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const teamMembers = [
+  {
+    id: 1,
+    name: "علی رضوی",
+    designation: "مدیرعامل و بنیان‌گذار",
+    image:
+      "/block-media/shadcnblocks/block/guri4/img14.png",
+    className: "lg:mt-0",
+  },
+  {
+    id: 2,
+    name: "سارا احمدی",
+    designation: "مدیر طراحی",
+    image:
+      "/block-media/shadcnblocks/block/guri4/img4.png",
+    className: "lg:mt-[5%]",
+  },
+  {
+    id: 3,
+    name: "امیر محمدی",
+    designation: "توسعه‌دهنده ارشد",
+    image:
+      "/block-media/shadcnblocks/block/guri4/img12.png",
+    className: "lg:mt-[10%]",
+  },
+];
+
+interface Team12Props {
+  className?: string;
+}
+
+const Team12 = ({ className }: Team12Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative w-full">
+          <div className="flex justify-between text-sm font-medium tracking-tight lg:text-xl">
+            <p>[ با تیم فوق‌العاده ما آشنا شوید ]</p>
+            <a
+              href="#"
+              aria-label="به تیم ما بپیوندید"
+              className="group flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground"
+            >
+              [ به ما بپیوندید
+              <ArrowRight className="size-[1em] transition-transform duration-300 group-hover:rotate-45 rtl:rotate-180" />
+              ]
+            </a>
+          </div>
+          <div className="mt-10 flex justify-between gap-4 lg:gap-[10vw]">
+            {teamMembers.map((member, idx) => (
+              <div key={member.id} className={cn(member.className, "w-1/2")}>
+                <motion.div
+                  initial={{ clipPath: "inset(0% 0% 100% 0%)" }}
+                  animate={{ clipPath: "inset(0% 0% 0% 0%)" }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 150,
+                    damping: 20,
+                    delay: idx * 0.05,
+                  }}
+                  className={cn(member.className, "h-112 overflow-hidden")}
+                >
+                  <img
+                    src={member.image}
+                    alt={member.name}
+                    className="pointer-events-none h-full w-full object-cover object-top"
+                  />
+                </motion.div>
+                <div className="pt-4 pb-1 text-start">
+                  <p className="font-medium tracking-tight text-foreground lg:text-xl lg:text-lg">
+                    {member.name}
+                  </p>
+                  <p className="text-sm text-foreground/50">
+                    {member.designation}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team12 };
diff --git a/blocks/team13.tsx b/blocks/team13.tsx
new file mode 100644
index 0000000..2f1fa5a
--- /dev/null
+++ b/blocks/team13.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const teamMembers = [
+  {
+    id: 1,
+    name: "علی رضوی",
+    designation: "مدیرعامل و بنیان‌گذار",
+    image:
+      "/block-media/shadcnblocks/block/guri4/img14.png",
+    className: "h-105",
+  },
+  {
+    id: 2,
+    name: "سارا احمدی",
+    designation: "مدیر طراحی",
+    image:
+      "/block-media/shadcnblocks/block/guri4/img4.png",
+    className: "h-80",
+  },
+  {
+    id: 3,
+    name: "امیر محمدی",
+    designation: "توسعه‌دهنده ارشد",
+    image:
+      "/block-media/shadcnblocks/block/guri4/img5.png",
+    className: "h-120",
+  },
+  {
+    id: 4,
+    name: "مریم حسینی",
+    designation: "مدیر محصول",
+    image:
+      "/block-media/shadcnblocks/block/guri4/img12.png",
+    className: "h-82",
+  },
+];
+
+interface Team13Props {
+  className?: string;
+}
+
+const Team13 = ({ className }: Team13Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative w-full">
+          <div className="flex justify-between text-sm font-medium tracking-tight lg:text-xl">
+            <p>[ با تیم فوق‌العاده ما آشنا شوید ]</p>
+            <a
+              href="#"
+              aria-label="به تیم ما بپیوندید"
+              className="group flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground"
+            >
+              [ به ما بپیوندید
+              <ArrowRight className="size-[1em] transition-transform duration-300 group-hover:rotate-45 rtl:rotate-180" />
+              ]
+            </a>
+          </div>
+
+          <div className="mt-12 lg:hidden">
+            <Carousel
+              opts={{
+                align: "start",
+                loop: true,
+              }}
+              className="w-full"
+            >
+              <CarouselContent>
+                {teamMembers.map((member) => (
+                  <CarouselItem className="basis-1/2" key={member.id}>
+                    <div className="w-full">
+                      <motion.div
+                        initial={{ clipPath: "inset(0% 0% 100% 0%)" }}
+                        whileInView={{ clipPath: "inset(0% 0% 0% 0%)" }}
+                        transition={{
+                          type: "spring",
+                          stiffness: 150,
+                          damping: 20,
+                        }}
+                        className={cn(member.className, "overflow-hidden")}
+                      >
+                        <img
+                          src={member.image}
+                          alt={member.name}
+                          className="pointer-events-none h-full w-full object-cover object-top"
+                        />
+                      </motion.div>
+                    </div>
+                    <div className="pt-4 pb-1 text-start">
+                      <p className="text-lg font-medium tracking-tight text-foreground">
+                        {member.name}
+                      </p>
+                      <p className="text-sm text-foreground/50">
+                        {member.designation}
+                      </p>
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious className="start-2" />
+              <CarouselNext className="end-2" />
+            </Carousel>
+          </div>
+
+          <div className="mt-12 hidden justify-between gap-4 lg:flex">
+            {teamMembers.map((member, idx) => (
+              <div key={member.id} className={cn("w-1/2")}>
+                <motion.div
+                  initial={{ clipPath: "inset(0% 0% 100% 0%)" }}
+                  animate={{ clipPath: "inset(0% 0% 0% 0%)" }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 150,
+                    damping: 20,
+                    delay: idx * 0.05,
+                  }}
+                  className={cn(member.className, "overflow-hidden")}
+                >
+                  <img
+                    src={member.image}
+                    alt={member.name}
+                    className="pointer-events-none h-full w-full object-cover object-top"
+                  />
+                </motion.div>
+                <div className="pt-4 pb-1 text-start">
+                  <p className="font-medium tracking-tight text-foreground lg:text-xl lg:text-lg">
+                    {member.name}
+                  </p>
+                  <p className="text-sm text-foreground/50">
+                    {member.designation}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team13 };
diff --git a/blocks/team15.tsx b/blocks/team15.tsx
new file mode 100644
index 0000000..011bf36
--- /dev/null
+++ b/blocks/team15.tsx
@@ -0,0 +1,199 @@
+import { Instagram, Linkedin, Twitter, Users } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface TeamMember {
+  id: string;
+  name: string;
+  role: string;
+  avatar: string;
+  social: {
+    twitter?: string;
+    instagram?: string;
+    linkedin?: string;
+  };
+}
+
+interface Team15Props {
+  label: string;
+  title1: string;
+  title2: string;
+  subtitle: string;
+  members: TeamMember[];
+  className?: string;
+}
+
+const Team15 = ({
+  className,
+  label = "با خالقان ما آشنا شوید",
+  title1 = "آینده را می‌سازیم",
+  title2 = "با هم",
+  subtitle = "تیم متنوع ما از نوآوران، طراحان و مهندسان با هم کار می‌کنند تا تجربه‌های دیجیتال استثنایی بسازند که تفاوت ایجاد کند.",
+  members = [
+    {
+      id: "maryam-hosseini",
+      name: "مریم حسینی",
+      role: "مدیر خلاقیت",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
+      social: {
+        twitter: "#",
+        instagram: "#",
+        linkedin: "#",
+      },
+    },
+    {
+      id: "amir-rezaei",
+      name: "امیر رضایی",
+      role: "توسعه‌دهنده ارشد",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar3.webp",
+      social: {
+        twitter: "#",
+        instagram: "#",
+        linkedin: "#",
+      },
+    },
+    {
+      id: "sara-petrov",
+      name: "سارا پتریا",
+      role: "طراح تجربه کاربری",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+      social: {
+        twitter: "#",
+        instagram: "#",
+        linkedin: "#",
+      },
+    },
+    {
+      id: "ali-mohammadi",
+      name: "علی محمدی",
+      role: "مدیر محصول",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
+      social: {
+        twitter: "#",
+        instagram: "#",
+        linkedin: "#",
+      },
+    },
+    {
+      id: "nazanin-singh",
+      name: "نازنین سینگ",
+      role: "مدیر بازاریابی",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar8.webp",
+      social: {
+        twitter: "#",
+        instagram: "#",
+        linkedin: "#",
+      },
+    },
+    {
+      id: "pouya-jafari",
+      name: "پویا جعفری",
+      role: "دانشمند داده",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar/avatar5.webp",
+      social: {
+        twitter: "#",
+        instagram: "#",
+        linkedin: "#",
+      },
+    },
+  ],
+}: Team15Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-24", className)}>
+      <div className="container mx-auto px-4">
+        <div className="mb-16 text-center">
+          <div className="mb-4 flex items-center justify-center gap-2">
+            <Users className="h-4 w-4 text-foreground" />
+            <p className="text-sm font-medium tracking-wider text-muted-foreground">
+              {label}
+            </p>
+          </div>
+
+          <h2 className="mb-4 text-xl md:text-2xll lg:text-2xll">
+            <span className="font-semibold text-foreground">{title1}</span>{" "}
+            <span className="font-medium text-muted-foreground italic">
+              {title2}
+            </span>
+          </h2>
+
+          <p className="mx-auto max-w-2xl text-muted-foreground">{subtitle}</p>
+        </div>
+
+        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {members.map((member) => (
+            <Card
+              key={member.id}
+              className="border-border/50 bg-card/50 p-6 backdrop-blur-sm"
+            >
+              <div className="grid grid-cols-2 items-start gap-4">
+                <div className="flex flex-col justify-between gap-6 text-start">
+                  <div>
+                    <h3 className="font-medium text-foreground">
+                      {member.name}
+                    </h3>
+                    <p className="text-xs text-muted-foreground">
+                      {member.role}
+                    </p>
+                  </div>
+
+                  <div className="flex gap-2">
+                    {member.social.twitter && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="h-8 w-8 rounded-md border-border/50 bg-background/50 p-0 transition-all duration-200"
+                        aria-label={`توییتر ${member.name}`}
+                      >
+                        <Twitter className="h-3 w-3" />
+                      </Button>
+                    )}
+                    {member.social.instagram && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="h-8 w-8 rounded-md border-border/50 bg-background/50 p-0 transition-all duration-200"
+                        aria-label={`اینستاگرام ${member.name}`}
+                      >
+                        <Instagram className="h-3 w-3" />
+                      </Button>
+                    )}
+                    {member.social.linkedin && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="h-8 w-8 rounded-md border-border/50 bg-background/50 p-0 transition-all duration-200"
+                        aria-label={`لینکدین ${member.name}`}
+                      >
+                        <Linkedin className="h-3 w-3" />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <div className="h-full">
+                    <img
+                      src={member.avatar}
+                      alt={member.name}
+                      className="h-full w-full rounded-lg object-cover"
+                    />
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team15 };
diff --git a/blocks/team2.tsx b/blocks/team2.tsx
new file mode 100644
index 0000000..05a77b4
--- /dev/null
+++ b/blocks/team2.tsx
@@ -0,0 +1,161 @@
+import { Github, Linkedin, Twitter } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface TeamMember {
+  id: string;
+  name: string;
+  role: string;
+  avatar: string;
+  github?: string;
+  twitter?: string;
+  linkedin?: string;
+}
+
+interface Team1Props {
+  heading?: string;
+  subheading?: string;
+  description?: string;
+  members?: TeamMember[];
+  className?: string;
+}
+
+const Team2 = ({
+  heading = "تیم ما",
+  description = "تیم متنوع ما از متخصصان با دهه‌ها تجربه در طراحی، مهندسی و توسعه محصول تشکیل شده است.",
+  members = [
+    {
+      id: "member-1",
+      name: "سارا احمدی",
+      role: "مدیرعامل و بنیان‌گذار",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-2",
+      name: "امیر رضایی",
+      role: "مدیر فناوری",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-3",
+      name: "مریم حسینی",
+      role: "مدیر طراحی",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-4",
+      name: "علی محمدی",
+      role: "مهندس ارشد",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-4.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-5",
+      name: "نازنین طاهری",
+      role: "مدیر محصول",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-6",
+      name: "پویا جعفری",
+      role: "طراح تجربه کاربری",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-6.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+  ],
+  className,
+}: Team1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-24 lg:py-32", className)}>
+      <div className="container mx-auto px-4">
+        <div className="mb-16 text-center">
+          <h2 className="mb-6 text-3xl font-bold tracking-tight lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        </div>
+
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {members.map((member) => (
+            <div key={member.id} className="p-6">
+              <div className="flex flex-col items-center text-center">
+                <div className="mb-4">
+                  <Avatar className="size-20 lg:size-24">
+                    <AvatarImage src={member.avatar} alt={member.name} />
+                    <AvatarFallback className="text-lg font-semibold">
+                      {member.name}
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+
+                <div className="mb-6">
+                  <h3 className="mb-1 text-lg font-semibold">{member.name}</h3>
+                  <p className="text-sm font-medium text-primary">
+                    {member.role}
+                  </p>
+                </div>
+
+                <div className="flex gap-3">
+                  {member.github && (
+                    <a
+                      href={member.github}
+                      className="rounded-lg bg-muted/50 p-2"
+                      aria-label={`گیت‌هاب ${member.name}`}
+                    >
+                      <Github className="size-4 text-muted-foreground" />
+                    </a>
+                  )}
+                  {member.twitter && (
+                    <a
+                      href={member.twitter}
+                      className="rounded-lg bg-muted/50 p-2"
+                      aria-label={`توییتر ${member.name}`}
+                    >
+                      <Twitter className="size-4 text-muted-foreground" />
+                    </a>
+                  )}
+                  {member.linkedin && (
+                    <a
+                      href={member.linkedin}
+                      className="rounded-lg bg-muted/50 p-2"
+                      aria-label={`لینکدین ${member.name}`}
+                    >
+                      <Linkedin className="size-4 text-muted-foreground" />
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team2 };
diff --git a/blocks/team3.tsx b/blocks/team3.tsx
new file mode 100644
index 0000000..1b4fb9b
--- /dev/null
+++ b/blocks/team3.tsx
@@ -0,0 +1,183 @@
+import { Github, Linkedin, Twitter } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface TeamMember {
+  id: string;
+  name: string;
+  role: string;
+  avatar: string;
+  github?: string;
+  twitter?: string;
+  linkedin?: string;
+}
+
+interface Team3Props {
+  heading?: string;
+  subheading?: string;
+  description?: string;
+  members?: TeamMember[];
+  className?: string;
+}
+
+const Team3 = ({
+  heading = "تیم ما",
+  description = "تیم متنوع ما از متخصصان با دهه‌ها تجربه در طراحی، مهندسی و توسعه محصول تشکیل شده است.",
+  members = [
+    {
+      id: "member-1",
+      name: "سارا احمدی",
+      role: "مدیرعامل و بنیان‌گذار",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-2",
+      name: "امیر رضایی",
+      role: "مدیر فناوری",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-3",
+      name: "مریم حسینی",
+      role: "مدیر طراحی",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-4",
+      name: "علی محمدی",
+      role: "مهندس ارشد",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-4.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-5",
+      name: "نازنین طاهری",
+      role: "مدیر محصول",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+    {
+      id: "member-6",
+      name: "پویا جعفری",
+      role: "طراح تجربه کاربری",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-6.webp",
+      github: "#",
+      twitter: "#",
+      linkedin: "#",
+    },
+  ],
+  className,
+}: Team3Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-gradient-to-b from-background to-muted/20 py-24 lg:py-32",
+        className,
+      )}
+    >
+      <div className="container mx-auto px-4">
+        <div className="mb-20 text-center">
+          <h2 className="mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-xl font-bold tracking-tight text-transparent lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="mx-auto max-w-3xl text-xl leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        </div>
+
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {members.map((member) => (
+            <div
+              key={member.id}
+              className="group relative overflow-hidden rounded-2xl border border-border/50 bg-card p-8 transition-all duration-300 hover:-translate-y-2 hover:border-primary/20 hover:shadow-2xl hover:shadow-primary/10"
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+
+              <div className="relative flex flex-col items-center text-center">
+                <div className="relative mb-6">
+                  <div className="absolute inset-0 rounded-full bg-gradient-to-r from-primary/20 to-primary/10 blur-xl transition-all duration-300 group-hover:blur-2xl" />
+                  <Avatar className="relative size-24 shadow-lg ring-4 ring-background transition-all duration-300 group-hover:ring-primary/20 lg:size-28">
+                    <AvatarImage
+                      src={member.avatar}
+                      alt={member.name}
+                      className="object-cover"
+                    />
+                    <AvatarFallback className="bg-gradient-to-br from-primary/10 to-primary/5 text-xl font-semibold">
+                      {member.name
+                        .split(" ")
+                        .map((n) => n[0])
+                        .join("")}
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+
+                <div className="mb-6">
+                  <h3 className="mb-2 text-xl font-bold transition-colors duration-300 group-hover:text-primary">
+                    {member.name}
+                  </h3>
+                  <p className="inline-block rounded-full bg-muted/50 px-4 py-1.5 text-sm font-medium text-muted-foreground">
+                    {member.role}
+                  </p>
+                </div>
+
+                <div className="flex gap-3">
+                  {member.github && (
+                    <a
+                      href={member.github}
+                      className="rounded-xl bg-muted/80 p-3 transition-all duration-300 hover:scale-110 hover:bg-primary/10 hover:shadow-lg"
+                      aria-label={`گیت‌هاب ${member.name}`}
+                    >
+                      <Github className="size-5 text-muted-foreground transition-colors duration-300 hover:text-primary" />
+                    </a>
+                  )}
+                  {member.twitter && (
+                    <a
+                      href={member.twitter}
+                      className="rounded-xl bg-muted/80 p-3 transition-all duration-300 hover:scale-110 hover:bg-primary/10 hover:shadow-lg"
+                      aria-label={`توییتر ${member.name}`}
+                    >
+                      <Twitter className="size-5 text-muted-foreground transition-colors duration-300 hover:text-primary" />
+                    </a>
+                  )}
+                  {member.linkedin && (
+                    <a
+                      href={member.linkedin}
+                      className="rounded-xl bg-muted/80 p-3 transition-all duration-300 hover:scale-110 hover:bg-primary/10 hover:shadow-lg"
+                      aria-label={`لینکدین ${member.name}`}
+                    >
+                      <Linkedin className="size-5 text-muted-foreground transition-colors duration-300 hover:text-primary" />
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team3 };
diff --git a/blocks/team36.tsx b/blocks/team36.tsx
new file mode 100644
index 0000000..9adb76d
--- /dev/null
+++ b/blocks/team36.tsx
@@ -0,0 +1,77 @@
+import { cn } from "@/lib/utils";
+
+interface TeamMember {
+  name: string;
+  role: string;
+  image: string;
+}
+
+interface Team36Props {
+  heading?: string;
+  members?: TeamMember[];
+  className?: string;
+}
+
+const Team36 = ({
+  heading = "سرمایه‌گذاران ما",
+  members = [
+    {
+      name: "آرش پاکزاد",
+      role: "بلک‌برد ونچرز",
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
+    },
+    {
+      name: "رامین صادقی",
+      role: "مرکز مطالعات",
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar-2.webp",
+    },
+    {
+      name: "لیلا محمدی",
+      role: "تک‌نکسوس",
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar-3.webp",
+    },
+    {
+      name: "مهدی کریمی",
+      role: "اتومول کپیتال",
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar-4.webp",
+    },
+    {
+      name: "نیلوفر احمدی",
+      role: "وندربرگ",
+      image:
+        "/block-media/shadcnblocks/block/avatar/avatar-5.webp",
+    },
+  ],
+  className,
+}: Team36Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("container max-w-5xl py-12", className)}
+    >
+      <h2 className="text-start text-xl font-medium tracking-wide text-foreground">
+        {heading}
+      </h2>
+      <div className="mt-8 grid grid-cols-2 gap-12 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+        {members.map((member) => (
+          <div key={member.name} className="text-start">
+            <img
+              src={member.image}
+              alt={member.name}
+              className="size-30 object-cover"
+            />
+            <h3 className="mt-3 font-semibold">{member.name}</h3>
+            <p className="text-muted-foreground">{member.role}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Team36 };
diff --git a/blocks/team4.tsx b/blocks/team4.tsx
new file mode 100644
index 0000000..d438b22
--- /dev/null
+++ b/blocks/team4.tsx
@@ -0,0 +1,124 @@
+import { Github, Twitter, Users } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const teamMembers = [
+  {
+    name: "رضا کریمی",
+    role: "مدیرعامل و بنیان‌گذار",
+    image:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+
+    bio: "با پیشینه‌ای در توسعه نرم‌افزار و چشم‌اندازی برای بهره‌وری، رضا تیم را با تمرکز بر نوآوری کاربرمحور رهبری می‌کند.",
+    social: {
+      twitter: "#",
+      github: "#",
+    },
+  },
+  {
+    name: "زهرا موسوی",
+    role: "مدیر ارشد محصول",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+
+    bio: "زهرا سال‌ها تجربه در طراحی و استراتژی محصول دارد و اطمینان می‌دهد هر قابلیت بالاترین استانداردهای کارایی و طراحی را داشته باشد.",
+    social: {
+      twitter: "#",
+    },
+  },
+  {
+    name: "امیر نوری",
+    role: "مدیر مهندسی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+
+    bio: "امیر چشم‌انداز فنی را هدایت می‌کند، بر توسعه نظارت دارد و اطمینان می‌دهد محصول برای کاربران در سراسر جهان پایدار، امن و مقیاس‌پذیر باشد.",
+    social: {
+      twitter: "#",
+      github: "#",
+    },
+  },
+  {
+    name: "سمیه رحیمی",
+    role: "مدیر بازاریابی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+
+    bio: "سمیه با درک عمیق از بازار B2B و تخصص در بازاریابی محتوا، مأموریت و مزایای محصول ما را به مشتریان هدف منتقل می‌کند.",
+    social: {
+      twitter: "#",
+    },
+  },
+];
+
+interface Team4Props {
+  className?: string;
+}
+
+const Team4 = ({ className }: Team4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-6 py-4 text-start lg:py-8">
+          <Badge
+            variant="outline"
+            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <Users className="size-4" />
+            <span>با هم پیش برویم!</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
+            ذهن‌های پشت مأموریت
+          </h2>
+          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
+            تیمی متعهدی که با شور و اشتیاق آینده بهره‌وری را می‌سازد.
+          </p>
+        </div>
+
+        <div className="mt-10 grid gap-x-12 gap-y-16 sm:grid-cols-2 md:mt-14 lg:grid-cols-4">
+          {teamMembers.map((member) => (
+            <div key={member.name} className="group flex flex-col text-start">
+              <img
+                src={member.image}
+                alt={member.name}
+                width={80}
+                height={80}
+                className="rounded-full object-contain"
+              />
+              <div className="mt-6 flex flex-col tracking-[-0.32px]">
+                <h3 className="text-lg">{member.name}</h3>
+                <p className="text-muted-foreground-subtle">{member.role}</p>
+                <p className="mt-4 text-sm tracking-[-0.36px] text-muted-foreground">
+                  {member.bio}
+                </p>
+                <div className="mt-6 flex gap-2">
+                  {member.social.twitter && (
+                    <a
+                      href={member.social.twitter}
+                      className="hover:text-foreground"
+                      aria-label={`توییتر ${member.name}`}
+                    >
+                      <Twitter />
+                    </a>
+                  )}
+                  {member.social.github && (
+                    <a
+                      href={member.social.github}
+                      className="hover:text-foreground"
+                      aria-label={`گیت‌هاب ${member.name}`}
+                    >
+                      <Github />
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team4 };
diff --git a/blocks/team5.tsx b/blocks/team5.tsx
new file mode 100644
index 0000000..ccd9f4e
--- /dev/null
+++ b/blocks/team5.tsx
@@ -0,0 +1,169 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const team = [
+  {
+    id: "person-1",
+    name: "سارا احمدی",
+    role: "مدیرعامل و هم‌بنیان‌گذار",
+    department: "رهبری",
+    description:
+      "مدیر محصول سابق در گوگل با بیش از ۱۰ سال تجربه ساخت محصولاتی که میلیون‌ها نفر روزانه از آن‌ها استفاده می‌کنند. علاقه‌مند به ایجاد اثر معنادار از طریق فناوری.",
+    expertise: ["استراتژی محصول", "رهبری تیم", "رشد"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+  },
+  {
+    id: "person-2",
+    name: "امیر رضایی",
+    role: "مدیر فناوری و هم‌بنیان‌گذار",
+    department: "مهندسی",
+    description:
+      "مهندس سابق متا که تیم‌های ساخت زیرساخت برای میلیاردها کاربر را رهبری کرده. عاشق حل چالش‌های فنی پیچیده.",
+    expertise: ["معماری سیستم", "هوش مصنوعی/یادگیری ماشین", "مقیاس‌پذیری"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  {
+    id: "person-3",
+    name: "مریم حسینی",
+    role: "مدیر طراحی",
+    department: "طراحی",
+    description:
+      "رهبر طراحی با سابقه در Airbnb و طراحی رابط. باور دارد طراحی عالی باید نامرئی باشد و مشکلات واقعی کاربر را حل کند.",
+    expertise: ["طراحی تجربه کاربری", "سیستم‌های طراحی", "تحقیق کاربری"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+  },
+  {
+    id: "person-4",
+    name: "علی محمدی",
+    role: "معاون مهندسی",
+    department: "مهندسی",
+    description:
+      "تیم‌های مهندسی در درگاه پرداخت و Uber را ساخته و مقیاس داده. بر ساخت تیم‌های پرفورمنس بالا و سیستم‌های پایدار تمرکز دارد.",
+    expertise: ["ساخت تیم", "سیستم‌های بک‌اند", "دواپس"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+  },
+  {
+    id: "person-5",
+    name: "نازنین طاهری",
+    role: "مدیر بازاریابی",
+    department: "بازاریابی",
+    description:
+      "استراتژیست بازاریابی که چند استارتاپ را از صفر به درآمد میلیونی رسانده. متخصص بازاریابی رشد و برندسازی.",
+    expertise: ["بازاریابی رشد", "استراتژی برند", "محتوا"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+  },
+  {
+    id: "person-6",
+    name: "پویا جعفری",
+    role: "مدیر فروش",
+    department: "فروش",
+    description:
+      "رهبر فروش با سابقه ساخت تیم‌های پرفورمنس بالا و فراتر رفتن از اهداف درآمدی در بازارهای رقابتی.",
+    expertise: ["فروش سازمانی", "مدیریت تیم", "موفقیت مشتری"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+  },
+];
+
+interface Team5Props {
+  className?: string;
+}
+
+const Team5 = ({ className }: Team5Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-gradient-to-b from-background to-muted/20 py-24",
+        className,
+      )}
+    >
+      <div className="container mx-auto px-4">
+        <div className="mb-16 text-center">
+          <h2 className="mb-6 text-xl font-bold tracking-tight lg:text-2xll">
+            تیم ما
+          </h2>
+          <p className="mx-auto max-w-3xl text-xl leading-relaxed text-muted-foreground">
+            تیم متنوع ما از متخصصان با دهه‌ها تجربه در طراحی، مهندسی و توسعه
+            محصول تشکیل شده است.
+          </p>
+        </div>
+
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {team.map((member) => (
+            <Card
+              key={member.id}
+              className="group border-0 bg-card/50 backdrop-blur-sm transition-all duration-300 hover:shadow-lg"
+            >
+              <CardContent className="p-6">
+                <div className="relative mb-6">
+                  <Avatar className="mx-auto h-20 w-20">
+                    <AvatarImage src={member.avatar} alt={member.name} />
+                    <AvatarFallback className="bg-gradient-to-br from-primary/20 to-secondary/20 text-xl font-bold text-primary">
+                      {member.name
+                        .split(" ")
+                        .map((n) => n[0])
+                        .join("")}
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+
+                <div className="mb-4 text-center">
+                  <h3 className="mb-1 text-lg font-semibold transition-colors group-hover:text-primary">
+                    {member.name}
+                  </h3>
+                  <p className="mb-2 text-sm font-medium text-primary">
+                    {member.role}
+                  </p>
+                  <Badge variant="outline" className="text-xs">
+                    {member.department}
+                  </Badge>
+                </div>
+
+                <p className="mb-4 text-sm leading-relaxed text-muted-foreground">
+                  {member.description}
+                </p>
+
+                <div className="flex flex-wrap justify-center gap-1">
+                  {member.expertise.map((skill, index) => (
+                    <Badge
+                      key={index}
+                      variant="secondary"
+                      className="bg-muted/50 px-2 py-1 text-xs"
+                    >
+                      {skill}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-16 border-t pt-16 text-center">
+          <h3 className="mb-4 text-xl font-semibold">
+            آماده‌اید آینده را با ما بسازید؟
+          </h3>
+          <p className="mx-auto mb-6 max-w-2xl text-muted-foreground">
+            همیشه به دنبال افراد بااستعداد هستیم که اشتیاق ما به نوآوری و ایجاد
+            تفاوت را دارند. فرصت‌های شغلی فعلی ما را ببینید.
+          </p>
+          <Button size="lg" className="px-8">
+            مشاهده فرصت‌های شغلی
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team5 };
diff --git a/blocks/team6.tsx b/blocks/team6.tsx
new file mode 100644
index 0000000..f394d24
--- /dev/null
+++ b/blocks/team6.tsx
@@ -0,0 +1,172 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const team = [
+  {
+    id: "person-1",
+    name: "سارا احمدی",
+    role: "مدیرعامل و هم‌بنیان‌گذار",
+    department: "رهبری",
+    description:
+      "مدیر محصول سابق در گوگل با بیش از ۱۰ سال تجربه ساخت محصولاتی که میلیون‌ها نفر روزانه از آن‌ها استفاده می‌کنند. علاقه‌مند به ایجاد اثر معنادار از طریق فناوری.",
+    expertise: ["استراتژی محصول", "رهبری تیم", "رشد"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+  },
+  {
+    id: "person-2",
+    name: "امیر رضایی",
+    role: "مدیر فناوری و هم‌بنیان‌گذار",
+    department: "مهندسی",
+    description:
+      "مهندس سابق متا که تیم‌های ساخت زیرساخت برای میلیاردها کاربر را رهبری کرده. عاشق حل چالش‌های فنی پیچیده.",
+    expertise: ["معماری سیستم", "هوش مصنوعی/یادگیری ماشین", "مقیاس‌پذیری"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  {
+    id: "person-3",
+    name: "مریم حسینی",
+    role: "مدیر طراحی",
+    department: "طراحی",
+    description:
+      "رهبر طراحی با سابقه در Airbnb و طراحی رابط. باور دارد طراحی عالی باید نامرئی باشد و مشکلات واقعی کاربر را حل کند.",
+    expertise: ["طراحی تجربه کاربری", "سیستم‌های طراحی", "تحقیق کاربری"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+  },
+  {
+    id: "person-4",
+    name: "علی محمدی",
+    role: "معاون مهندسی",
+    department: "مهندسی",
+    description:
+      "تیم‌های مهندسی در درگاه پرداخت و Uber را ساخته و مقیاس داده. بر ساخت تیم‌های پرفورمنس بالا و سیستم‌های پایدار تمرکز دارد.",
+    expertise: ["ساخت تیم", "سیستم‌های بک‌اند", "دواپس"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+  },
+  {
+    id: "person-5",
+    name: "نازنین طاهری",
+    role: "مدیر بازاریابی",
+    department: "بازاریابی",
+    description:
+      "استراتژیست بازاریابی که چند استارتاپ را از صفر به درآمد میلیونی رسانده. متخصص بازاریابی رشد و برندسازی.",
+    expertise: ["بازاریابی رشد", "استراتژی برند", "محتوا"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+  },
+  {
+    id: "person-6",
+    name: "پویا جعفری",
+    role: "مدیر فروش",
+    department: "فروش",
+    description:
+      "رهبر فروش با سابقه ساخت تیم‌های پرفورمنس بالا و فراتر رفتن از اهداف درآمدی در بازارهای رقابتی.",
+    expertise: ["فروش سازمانی", "مدیریت تیم", "موفقیت مشتری"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+  },
+  {
+    id: "person-7",
+    name: "زهرا کاظمی",
+    role: "مدیر محتوا",
+    department: "بازاریابی",
+    description:
+      "استراتژیست بازاریابی که چند استارتاپ را از صفر به درآمد میلیونی رسانده. متخصص بازاریابی رشد و برندسازی.",
+    expertise: ["بازاریابی رشد", "استراتژی برند", "محتوا"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+  },
+  {
+    id: "person-8",
+    name: "سینا اکبری",
+    role: "مدیر فروش سازمانی",
+    department: "فروش",
+    description:
+      "رهبر فروش با سابقه ساخت تیم‌های پرفورمنس بالا و فراتر رفتن از اهداف درآمدی در بازارهای رقابتی.",
+    expertise: ["فروش سازمانی", "مدیریت تیم", "موفقیت مشتری"],
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+  },
+];
+
+interface Team6Props {
+  className?: string;
+}
+
+const Team6 = ({ className }: Team6Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "bg-gradient-to-b from-background to-muted/20 py-24",
+        className,
+      )}
+    >
+      <div className="container mx-auto px-4">
+        <div className="mb-16 text-center">
+          <h2 className="mb-6 text-xl font-bold tracking-tight lg:text-2xll">
+            تیم ما
+          </h2>
+          <p className="mx-auto max-w-3xl text-xl leading-relaxed text-muted-foreground">
+            تیم متنوع ما از متخصصان با دهه‌ها تجربه در طراحی، مهندسی و توسعه
+            محصول تشکیل شده است.
+          </p>
+        </div>
+
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+          {team.map((member) => (
+            <div
+              key={member.id}
+              className="group rounded-lg border border-muted bg-card/50 p-6 backdrop-blur-sm transition-all duration-300 hover:bg-muted"
+            >
+              <div className="relative mb-6">
+                <Avatar className="mx-auto h-20 w-20">
+                  <AvatarImage src={member.avatar} alt={member.name} />
+                  <AvatarFallback className="bg-gradient-to-br from-primary/20 to-secondary/20 text-xl font-bold text-primary">
+                    {member.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+              </div>
+
+              <div className="text-center">
+                <h3 className="mb-1 text-lg font-semibold transition-colors group-hover:text-primary">
+                  {member.name}
+                </h3>
+                <p className="mb-2 text-sm font-medium text-primary">
+                  {member.role}
+                </p>
+                <Badge variant="outline" className="text-xs">
+                  {member.department}
+                </Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-16 border-t pt-16 text-center">
+          <h3 className="mb-4 text-xl font-semibold">
+            آماده‌اید آینده را با ما بسازید؟
+          </h3>
+          <p className="mx-auto mb-6 max-w-2xl text-muted-foreground">
+            همیشه به دنبال افراد بااستعداد هستیم که اشتیاق ما به نوآوری و ایجاد
+            تفاوت را دارند. فرصت‌های شغلی فعلی ما را ببینید.
+          </p>
+          <Button size="lg" className="px-8">
+            مشاهده فرصت‌های شغلی
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team6 };
diff --git a/blocks/team7.tsx b/blocks/team7.tsx
new file mode 100644
index 0000000..be56cf5
--- /dev/null
+++ b/blocks/team7.tsx
@@ -0,0 +1,67 @@
+import { cn } from "@/lib/utils";
+
+const team = [
+  {
+    name: "آرش پاکزاد",
+    company: "بلک‌برد ونچرز",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+  },
+  {
+    name: "رامین صادقی",
+    company: "مرکز مطالعات",
+    image:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  {
+    name: "لیلا محمدی",
+    company: "تک‌نکسوس",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+  },
+  {
+    name: "مهدی کریمی",
+    company: "اتومول کپیتال",
+    image:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+  },
+  {
+    name: "نیلوفر احمدی",
+    company: "وندربرگ",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+  },
+];
+
+interface Team7Props {
+  className?: string;
+}
+
+const Team7 = ({ className }: Team7Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <h2 className="text-start text-xl font-medium tracking-wide text-primary">
+          سرمایه‌گذاران ما
+        </h2>
+        <div className="mt-8 grid grid-cols-2 gap-12 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+          {team.map((investor) => (
+            <div key={investor.name} className="text-start">
+              <img
+                src={investor.image}
+                alt={investor.name}
+                width={120}
+                height={120}
+                className="rounded-full object-cover"
+              />
+              <h3 className="mt-3 font-semibold">{investor.name}</h3>
+              <p className="text-muted-foreground">{investor.company}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team7 };
diff --git a/blocks/team8.tsx b/blocks/team8.tsx
new file mode 100644
index 0000000..00c14fb
--- /dev/null
+++ b/blocks/team8.tsx
@@ -0,0 +1,215 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const formatYears = (years: number) =>
+  `${years.toLocaleString("fa-IR")}+ سال تجربه`;
+
+const members = [
+  {
+    name: "علی رضوی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    role: "مدیرعامل",
+    yearsOfExperience: 15,
+  },
+  {
+    name: "سارا احمدی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "طراح ارشد",
+    yearsOfExperience: 8,
+  },
+  {
+    name: "امیر محمدی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+    role: "مهندس ارشد",
+    yearsOfExperience: 10,
+  },
+  {
+    name: "مریم حسینی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "مدیر بازاریابی",
+    yearsOfExperience: 12,
+  },
+  {
+    name: "پویا جعفری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "مدیر فروش",
+    yearsOfExperience: 7,
+  },
+  {
+    name: "سمیه رحیمی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "مدیر موفقیت مشتری",
+    yearsOfExperience: 5,
+  },
+  {
+    name: "حسین کاظمی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    role: "مدیر فناوری",
+    yearsOfExperience: 20,
+  },
+  {
+    name: "نرگس مرادی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "طراح محصول",
+    yearsOfExperience: 6,
+  },
+  {
+    name: "آرمان نوری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    role: "مهندس فرانت‌اند",
+    yearsOfExperience: 4,
+  },
+  {
+    name: "لیلا کریمی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "متخصص بازاریابی",
+    yearsOfExperience: 3,
+  },
+  {
+    name: "کامران پارخی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "نماینده فروش",
+    yearsOfExperience: 5,
+  },
+  {
+    name: "مهسا امینی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "متخصص پشتیبانی",
+    yearsOfExperience: 2,
+  },
+  {
+    name: "توماج راست",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "مهندس بک‌اند",
+    yearsOfExperience: 8,
+  },
+  {
+    name: "مینا کیانی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "طراح رابط کاربری",
+    yearsOfExperience: 4,
+  },
+  {
+    name: "دانیال غفاری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    role: "مدیر بازاریابی",
+    yearsOfExperience: 9,
+  },
+  {
+    name: "ژیلا لطفی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "مدیر فروش",
+    yearsOfExperience: 11,
+  },
+  {
+    name: "امیر حسینی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+    role: "مدیر پشتیبانی",
+    yearsOfExperience: 6,
+  },
+  {
+    name: "پریسا معمار",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "مدیر عملیات",
+    yearsOfExperience: 18,
+  },
+  {
+    name: "رایان طهماسب",
+    image:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    role: "مهندس سیستم",
+    yearsOfExperience: 7,
+  },
+  {
+    name: "سحر تابنده",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "طراح تجربه کاربری",
+    yearsOfExperience: 5,
+  },
+];
+
+interface Team8Props {
+  className?: string;
+}
+
+const Team8 = ({ className }: Team8Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-32", className)}
+    >
+      <div className="container">
+        <h2 className="text-start text-2xll font-medium md:text-2xll">
+          پیشگامان فناوری <br />
+          <span className="text-primary/50">که آینده را می‌سازند</span>
+        </h2>
+        <p className="mt-6 max-w-md text-start text-muted-foreground">
+          ما توسعه‌دهندگان، مهندسان و نوآوران فناوری درخشان را گرد هم
+          می‌آوریم تا راه‌حل‌های دیجیتال پیشگامانه بسازیم.
+        </p>
+        <Carousel>
+          <div className="mt-4 hidden items-center justify-start gap-4 md:flex">
+            <CarouselPrevious className="static size-11 translate-x-0 translate-y-0" />
+            <CarouselNext className="static size-11 translate-x-0 translate-y-0" />
+          </div>
+          <div className="mt-16 [&>div[data-slot=carousel-content]]:overflow-visible">
+            <CarouselContent className="max-w-[min(calc(100vw-4rem),24rem)] select-none">
+              {members.map((member) => (
+                <CarouselItem key={member.name} className="max-w-72">
+                  <div className="rounded-2xl border border-border bg-background p-7 text-center">
+                    <img
+                      src={member.image}
+                      alt={member.name}
+                      className="mx-auto size-20 rounded-full border border-border"
+                    />
+                    <div className="mt-6 flex flex-col justify-center">
+                      <p className="text-lg font-medium text-primary">
+                        {member.name}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {member.role}
+                      </p>
+                    </div>
+                    <Separator className="my-6 bg-linear-to-r from-background via-border to-background" />
+                    <p className="text-sm text-muted-foreground">
+                      {formatYears(member.yearsOfExperience)}
+                    </p>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Team8 };
diff --git a/blocks/team9.tsx b/blocks/team9.tsx
new file mode 100644
index 0000000..a819934
--- /dev/null
+++ b/blocks/team9.tsx
@@ -0,0 +1,368 @@
+"use client";
+
+import { SearchIcon } from "lucide-react";
+import { useState } from "react";
+
+import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const categories = [
+  "مهندسی",
+  "طراحی",
+  "بازاریابی",
+  "فروش",
+  "پشتیبانی",
+  "رهبری",
+] as const;
+
+const formatYears = (years: number) =>
+  `${years.toLocaleString("fa-IR")} سال تجربه`;
+
+interface Member {
+  name: string;
+  image: string;
+  role: string;
+  yearsOfExperience: number;
+  categories: (typeof categories)[number];
+}
+
+const members: Member[] = [
+  {
+    name: "علی رضوی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    role: "مدیرعامل",
+    yearsOfExperience: 15,
+    categories: "رهبری",
+  },
+  {
+    name: "سارا احمدی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "طراح ارشد",
+    yearsOfExperience: 8,
+    categories: "طراحی",
+  },
+  {
+    name: "امیر محمدی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "مهندس ارشد",
+    yearsOfExperience: 10,
+    categories: "مهندسی",
+  },
+  {
+    name: "مریم حسینی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "مدیر بازاریابی",
+    yearsOfExperience: 12,
+    categories: "بازاریابی",
+  },
+  {
+    name: "پویا جعفری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "مدیر فروش",
+    yearsOfExperience: 7,
+    categories: "فروش",
+  },
+  {
+    name: "سمیه رحیمی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "مدیر موفقیت مشتری",
+    yearsOfExperience: 5,
+    categories: "پشتیبانی",
+  },
+  {
+    name: "حسین کاظمی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    role: "مدیر فناوری",
+    yearsOfExperience: 20,
+    categories: "رهبری",
+  },
+  {
+    name: "نرگس مرادی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "طراح محصول",
+    yearsOfExperience: 6,
+    categories: "طراحی",
+  },
+  {
+    name: "آرمان نوری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+    role: "مهندس فرانت‌اند",
+    yearsOfExperience: 4,
+    categories: "مهندسی",
+  },
+  {
+    name: "لیلا کریمی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "متخصص بازاریابی",
+    yearsOfExperience: 3,
+    categories: "بازاریابی",
+  },
+  {
+    name: "کامران پارخی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    role: "نماینده فروش",
+    yearsOfExperience: 5,
+    categories: "فروش",
+  },
+  {
+    name: "مهسا امینی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "متخصص پشتیبانی",
+    yearsOfExperience: 2,
+    categories: "پشتیبانی",
+  },
+  {
+    name: "توماج راست",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "مهندس بک‌اند",
+    yearsOfExperience: 8,
+    categories: "مهندسی",
+  },
+  {
+    name: "مینا کیانی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "طراح رابط کاربری",
+    yearsOfExperience: 4,
+    categories: "طراحی",
+  },
+  {
+    name: "دانیال غفاری",
+    image:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    role: "مدیر بازاریابی",
+    yearsOfExperience: 9,
+    categories: "بازاریابی",
+  },
+  {
+    name: "ژیلا لطفی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "مدیر فروش",
+    yearsOfExperience: 11,
+    categories: "فروش",
+  },
+  {
+    name: "امیر حسینی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "مدیر پشتیبانی",
+    yearsOfExperience: 6,
+    categories: "پشتیبانی",
+  },
+  {
+    name: "پریسا معمار",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "مدیر عملیات",
+    yearsOfExperience: 18,
+    categories: "رهبری",
+  },
+  {
+    name: "رایان طهماسب",
+    image:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    role: "مهندس سیستم",
+    yearsOfExperience: 7,
+    categories: "مهندسی",
+  },
+  {
+    name: "سحر تابنده",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "طراح تجربه کاربری",
+    yearsOfExperience: 5,
+    categories: "طراحی",
+  },
+  {
+    name: "کیوان احمدی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "بازاریابی محتوا",
+    yearsOfExperience: 4,
+    categories: "بازاریابی",
+  },
+  {
+    name: "مائده رضایی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "سرپرست تیم فروش",
+    yearsOfExperience: 8,
+    categories: "فروش",
+  },
+  {
+    name: "سروش اعلایی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-8.webp",
+    role: "پشتیبانی فنی",
+    yearsOfExperience: 3,
+    categories: "پشتیبانی",
+  },
+  {
+    name: "نیایش چینی",
+    image:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    role: "مدیر مالی",
+    yearsOfExperience: 16,
+    categories: "رهبری",
+  },
+  {
+    name: "آرش ترنر",
+    image:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    role: "مهندس دواپس",
+    yearsOfExperience: 6,
+    categories: "مهندسی",
+  },
+  {
+    name: "نینا پاتیل",
+    image:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    role: "طراح موشن",
+    yearsOfExperience: 4,
+    categories: "طراحی",
+  },
+  {
+    name: "سامان رابرتس",
+    image:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    role: "مهندس ابری",
+    yearsOfExperience: 5,
+    categories: "مهندسی",
+  },
+  {
+    name: "ژیلا ژان",
+    image:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    role: "مهندس امنیت",
+    yearsOfExperience: 7,
+    categories: "مهندسی",
+  },
+  {
+    name: "مارکو جانسون",
+    image:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    role: "مهندس موبایل",
+    yearsOfExperience: 6,
+    categories: "مهندسی",
+  },
+];
+
+interface Team9Props {
+  className?: string;
+}
+
+const Team9 = ({ className }: Team9Props) => {
+  const [selectedCategory, setSelectedCategory] = useState<string>(
+    categories[0],
+  );
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredMembers = members.filter((member) => {
+    const matchesCategory = selectedCategory === member.categories;
+    const query = searchQuery.trim().toLowerCase();
+    const matchesSearch =
+      query === "" ||
+      member.name.toLowerCase().includes(query) ||
+      member.role.toLowerCase().includes(query);
+
+    return matchesCategory && matchesSearch;
+  });
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-8 text-start">
+          <h2 className="text-xl md:text-2xll">با تیم ما آشنا شوید</h2>
+          <p className="max-w-2xl text-muted-foreground">
+            گروه متنوع ما از متخصصان، تخصص‌های طراحی، مهندسی و فناوری را گرد
+            هم آورده تا راه‌حل‌های نوآورانه‌ای بسازیم که ایده‌ها را به واقعیت
+            تبدیل کند.
+          </p>
+        </div>
+        <div className="mt-14">
+          <div className="flex flex-col justify-between gap-4 md:flex-row">
+            <Tabs
+              value={selectedCategory}
+              onValueChange={setSelectedCategory}
+              className="-mx-8 overflow-x-auto px-8"
+            >
+              <ScrollableTabsList className="rounded-none">
+                <TabsList className="flex h-auto justify-start gap-4 overflow-y-hidden bg-background md:flex-wrap">
+                  {categories.map((category) => (
+                    <TabsTrigger
+                      key={category}
+                      value={category}
+                      className="relative flex flex-col items-center gap-2 overflow-visible whitespace-nowrap !shadow-none data-[state=active]:text-foreground"
+                    >
+                      {category}
+                      <span
+                        className={cn(
+                          "absolute -bottom-1 h-0.5 w-full bg-primary opacity-0",
+                          selectedCategory === category && "opacity-100",
+                        )}
+                      />
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </ScrollableTabsList>
+            </Tabs>
+            <div className="relative h-fit">
+              <Input
+                className="ps-9"
+                placeholder="جستجوی اعضا"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+              <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-muted-foreground/80">
+                <SearchIcon className="size-4" />
+              </div>
+            </div>
+          </div>
+          <div className="mt-9 grid gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {filteredMembers.map((member) => (
+              <div
+                key={member.name}
+                className="rounded-2xl border border-border bg-background p-7 text-center"
+              >
+                <img
+                  src={member.image}
+                  alt={member.name}
+                  className="mx-auto size-28 rounded-full border border-border"
+                />
+                <div className="mt-6 flex flex-col justify-center">
+                  <p className="text-xl font-medium text-primary">
+                    {member.name}
+                  </p>
+                  <p className="text-sm text-muted-foreground">{member.role}</p>
+                </div>
+                <Separator className="my-6 bg-linear-to-r from-background via-border to-background" />
+                <p className="text-sm text-muted-foreground">
+                  {formatYears(member.yearsOfExperience)}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Team9 };
diff --git a/blocks/test/BlogBlocksCard.tsx b/blocks/test/BlogBlocksCard.tsx
new file mode 100644
index 0000000..f49dd97
--- /dev/null
+++ b/blocks/test/BlogBlocksCard.tsx
@@ -0,0 +1,29 @@
+type BlogBlocksCardProps = {
+  category: string;
+  title: string;
+  description: string;
+  date: string;
+  authors: string[];
+};
+
+export function BlogBlocksCard({ category, title, description, date, authors }: BlogBlocksCardProps) {
+  return (
+    <article
+      data-slot="card"
+      className="group relative row-span-5 grid grid-rows-subgrid gap-3 rounded-xl bg-card bg-linear-to-b from-card from-65% to-transparent p-6 text-card-foreground shadow-xl ring-1 shadow-black/6.5 ring-border"
+    >
+      <time className="text-sm text-muted-foreground">{date}</time>
+      <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+      <p className="text-muted-foreground">{description}</p>
+      <div className="grid grid-cols-[1fr_auto] items-end gap-2 pt-4">
+        <div className="space-y-1">
+          <span className="text-xs uppercase tracking-wide text-muted-foreground/80">{category}</span>
+          <div className="text-sm text-muted-foreground">{authors.join(", ")}</div>
+        </div>
+        <div className="flex h-6 items-center text-sm font-medium text-primary transition-colors duration-200 group-hover:text-foreground">
+          ادامه مطلب
+                          </div>
+      </div>
+    </article>
+  );
+}
diff --git a/blocks/test/BlogBlocksCategoryTabs.tsx b/blocks/test/BlogBlocksCategoryTabs.tsx
new file mode 100644
index 0000000..34e0f8c
--- /dev/null
+++ b/blocks/test/BlogBlocksCategoryTabs.tsx
@@ -0,0 +1,32 @@
+type BlogBlocksCategoryTabsProps = {
+  labels: string[];
+};
+
+export function BlogBlocksCategoryTabs({ labels }: BlogBlocksCategoryTabsProps) {
+  return (
+    <div
+      role="tablist"
+      aria-label="دسته‌بندی وبلاگ"
+      className="-ml-0.5 flex snap-x snap-mandatory overflow-x-auto py-3 max-md:px-6"
+    >
+      {labels.map((label, index) => (
+        <button
+          key={label}
+          role="tab"
+          aria-selected={index === 0}
+          className="group snap-center px-1 text-muted-foreground disabled:pointer-events-none disabled:opacity-50"
+        >
+          <span
+            className={
+              index === 0
+                ? "flex w-fit items-center gap-2 rounded-md bg-card px-3 py-1.5 text-sm font-medium text-primary shadow-sm ring-1 shadow-black/6.5 ring-border transition-colors"
+                : "flex w-fit items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors group-hover:bg-foreground/5 hover:text-foreground"
+            }
+          >
+            <span className="capitalize">{label}</span>
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/blocks/testimonial1.tsx b/blocks/testimonial1.tsx
new file mode 100644
index 0000000..6086049
--- /dev/null
+++ b/blocks/testimonial1.tsx
@@ -0,0 +1,225 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    name: "سارا احمدی",
+    role: "مدیرعامل و بنیان‌گذار",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
+    content:
+      "این کتابخانه کامپوننت، روش ساخت محصولات ما را متحول کرد. کل داشبورد را در نصف زمانی که معمولاً لازم بود، تحویل دادیم.",
+  },
+  {
+    name: "مازیار رضایی",
+    role: "مدیر فناوری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
+    content:
+      "توجه به دسترس‌پذیری و عملکرد قابل تحسین است. امتیاز ابزار تحلیل عملکرد ما پس از استفاده از این کامپوننت‌ها به‌طور محسوسی بهبود یافت.",
+  },
+  {
+    name: "نیلوفر حسینی",
+    role: "مدیر محصول",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
+    content:
+      "بالاخره یک سیستم طراحی که توسعه‌دهندگان واقعاً دوست دارند از آن استفاده کنند. مستندات روشن است، کامپوننت‌ها انعطاف‌پذیرند و مقادیر پیش‌فرض منطقی‌اند. کم پیش می‌آید هر سه را با هم ببینید.",
+  },
+  {
+    name: "امیر محمدی",
+    role: "سرپرست فنی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar7.webp",
+    content:
+      "سال‌ها کتابخانه‌های مختلف رابط کاربری را امتحان کردیم. این یکی تعادل عالی بین پیش‌فرض‌های مشخص و انعطاف سفارشی‌سازی برقرار می‌کند.",
+  },
+  {
+    name: "رؤیا کاظمی",
+    role: "طراح ارشد",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar2.webp",
+    content:
+      "به‌عنوان طراح، قدردانم که کامپوننت‌ها به‌طور دقیق با طرح‌های طراحی رابط ما هم‌خوان‌اند. تحویل از طراحی به توسعه هرگز این‌قدر روان نبوده. هر پیکسل هدفمند است و سیستم فاصله‌گذاری حفظ یکنواختی در صفحات را آسان می‌کند. با کتابخانه‌های زیادی کار کرده‌ام، اما این اولین بار است که مجبور نیستم مدام استایل‌ها را بازنویسی کنم.",
+  },
+  {
+    name: "پارسا موسوی",
+    role: "توسعه‌دهنده فول‌استک",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
+    content:
+      "پشتیبانی زبان نوع‌ایمن عالی است. تکمیل خودکار بدون دردسر کار می‌کند و خطاها را پیش از رسیدن به محیط تولید می‌گیرم. تجربه توسعه در سطح بالایی است.",
+  },
+  {
+    name: "مهسا نوری",
+    role: "مهندس تجربه کاربری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
+    content:
+      "این کامپوننت‌ها موارد خاصی را پوشش می‌دهند که حتی از وجودشان بی‌خبر بودم. حالت تاریک، پشتیبانی راست‌به‌چپ و ناوبری با صفحه‌کلید  همه از پیش آماده‌اند.",
+  },
+  {
+    name: "علی رحمانی",
+    role: "مدیر مهندسی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar12.jpg",
+    content:
+      "سرعت تیم ما پس از استفاده از این کتابخانه به‌طور محسوسی افزایش یافت. زمان کمتر برای کدهای تکراری رابط کاربری یعنی زمان بیشتر برای منطق کسب‌وکار.",
+  },
+];
+
+interface Testimonial1Props {
+  className?: string;
+}
+
+const Testimonial1 = ({ className }: Testimonial1Props) => {
+  const getColumns = (count: number) => {
+    return Array.from({ length: count }, (_, colIdx) =>
+      testimonials.filter((_, i) => i % count === colIdx),
+    );
+  };
+
+  const mobileColumns = getColumns(2);
+  const tabletColumns = getColumns(3);
+  const desktopColumns = getColumns(4);
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden border-b pt-32", className)}
+    >
+      <div className="container">
+        <div className="flex flex-col items-center gap-6">
+          <Badge variant="outline">نظرات مشتریان</Badge>
+          <h2 className="text-center text-3xl tracking-tight lg:text-2xll">
+            با مشتریان راضی ما آشنا شوید
+          </h2>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            تجربه تیم‌هایی را بخوانید که با کامپوننت‌های ما گردش کار خود را
+            متحول کرده‌اند.
+          </p>
+        </div>
+      </div>
+
+      <div className="container mt-10 h-[450px] md:h-[500px] lg:h-[522px]">
+        {/* Mobile: 2 columns */}
+        <div className="flex gap-4 md:hidden">
+          {mobileColumns.map((column, colIdx) => (
+            <div
+              key={colIdx}
+              className={cn(
+                "flex w-1/2 flex-col gap-4",
+                colIdx === 1 && "mt-8",
+              )}
+            >
+              {column.map((testimonial, idx) => (
+                <Card key={idx}>
+                  <CardContent className="px-4 text-sm leading-6 text-muted-foreground">
+                    <q>{testimonial.content}</q>
+                  </CardContent>
+                  <CardFooter className="px-4">
+                    <div className="flex gap-3 leading-5">
+                      <Avatar className="size-8 rounded-full ring-1 ring-input">
+                        <AvatarImage
+                          src={testimonial.avatar}
+                          alt={testimonial.name}
+                        />
+                      </Avatar>
+                      <div className="text-xs">
+                        <p className="font-medium">{testimonial.name}</p>
+                        <p className="text-muted-foreground">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+                  </CardFooter>
+                </Card>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        {/* Tablet: 3 columns */}
+        <div className="hidden gap-4 md:flex lg:hidden">
+          {tabletColumns.map((column, colIdx) => (
+            <div
+              key={colIdx}
+              className={cn(
+                "flex w-1/3 flex-col gap-4",
+                colIdx === 1 && "mt-10",
+                colIdx === 2 && "mt-20",
+              )}
+            >
+              {column.map((testimonial, idx) => (
+                <Card key={idx}>
+                  <CardContent className="px-6 leading-7 text-muted-foreground">
+                    <q>{testimonial.content}</q>
+                  </CardContent>
+                  <CardFooter>
+                    <div className="flex gap-4 leading-5">
+                      <Avatar className="size-9 rounded-full ring-1 ring-input">
+                        <AvatarImage
+                          src={testimonial.avatar}
+                          alt={testimonial.name}
+                        />
+                      </Avatar>
+                      <div className="text-sm">
+                        <p className="font-medium">{testimonial.name}</p>
+                        <p className="text-muted-foreground">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+                  </CardFooter>
+                </Card>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        {/* Desktop: 4 columns */}
+        <div className="hidden gap-4 lg:flex">
+          {desktopColumns.map((column, colIdx) => (
+            <div
+              key={colIdx}
+              className={cn(
+                "flex w-1/4 flex-col gap-4",
+                colIdx === 1 && "mt-10",
+                colIdx === 2 && "mt-20",
+              )}
+            >
+              {column.map((testimonial, idx) => (
+                <Card key={idx}>
+                  <CardContent className="px-6 leading-7 text-muted-foreground">
+                    <q>{testimonial.content}</q>
+                  </CardContent>
+                  <CardFooter>
+                    <div className="flex gap-4 leading-5">
+                      <Avatar className="size-9 rounded-full ring-1 ring-input">
+                        <AvatarImage
+                          src={testimonial.avatar}
+                          alt={testimonial.name}
+                        />
+                      </Avatar>
+                      <div className="text-sm">
+                        <p className="font-medium">{testimonial.name}</p>
+                        <p className="text-muted-foreground">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+                  </CardFooter>
+                </Card>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial1 };
diff --git a/blocks/testimonial10.tsx b/blocks/testimonial10.tsx
new file mode 100644
index 0000000..46e33d6
--- /dev/null
+++ b/blocks/testimonial10.tsx
@@ -0,0 +1,55 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface Testimonial10Props {
+  className?: string;
+  quote?: string;
+  author?: {
+    name: string;
+    role: string;
+    avatar: {
+      src: string;
+      alt: string;
+      className?: string;
+    };
+  };
+}
+
+const Testimonial10 = ({
+  className,
+  quote = "این پلتفرم نحوه کار تیم ما را متحول کرد. سرعت تحویل افزایش یافت و کیفیت محصول به‌طور محسوسی بهتر شد.",
+  author = {
+    name: "رضا کریمی",
+    role: "بنیان‌گذار و مدیرعامل",
+    avatar: {
+      src: "/block-media/shadcnblocks/block/avatar-1.webp",
+      alt: "رضا کریمی",
+    },
+  },
+}: Testimonial10Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center text-center">
+          <p className="mb-16 max-w-4xl px-8 font-medium lg:text-3xl">
+            &ldquo;{quote}&rdquo;
+          </p>
+          <div className="flex items-center gap-2 md:gap-4">
+            <Avatar className="size-12 md:size-16">
+              <AvatarImage src={author.avatar.src} alt={author.avatar.alt} />
+              <AvatarFallback>{author.name}</AvatarFallback>
+            </Avatar>
+            <div className="text-start">
+              <p className="text-sm font-medium md:text-base">{author.name}</p>
+              <p className="text-sm text-muted-foreground md:text-base">
+                {author.role}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial10 };
diff --git a/blocks/testimonial11.tsx b/blocks/testimonial11.tsx
new file mode 100644
index 0000000..25ade13
--- /dev/null
+++ b/blocks/testimonial11.tsx
@@ -0,0 +1,181 @@
+import { Star } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    id: "testimonial-1",
+    text: "در یک آخر هفته کل سیستم طراحی را منتقل کردیم. کیفیت کامپوننت‌ها فوق‌العاده است و ماه‌ها از کار تیم ما کاسته. به‌شدت توصیه می‌کنم.",
+    name: "سارا احمدی",
+    company: "Vercel",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar4.webp",
+  },
+  {
+    id: "testimonial-2",
+    text: "بالاخره کتابخانه‌ای که با شما نمی‌جنگد. فقط کار می‌کند.",
+    name: "مازیار رضایی",
+    company: "Stripe",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar1.webp",
+  },
+  {
+    id: "testimonial-3",
+    text: "پیش‌فرض‌های دسترس‌پذیری فوق‌العاده‌اند. پس از مهاجرت، در اولین بار ممیزی استاندارد دسترس‌پذیری را با موفقیت پشت سر گذاشتیم؛ چنین تجربه‌ای تا به حال نداشتیم.",
+    name: "مهسا نوری",
+    company: "Shopify",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
+  },
+  {
+    id: "testimonial-4",
+    text: "زمان توسعه فرانت‌اند را ۴۰٪ کاهش دادیم. سیستم تم‌بندی فوق‌العاده انعطاف‌پذیر است.",
+    name: "امیرحسین قاسمی",
+    company: "Linear",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
+  },
+  {
+    id: "testimonial-5",
+    text: "صفحه فرود را در دو روز به‌جای دو هفته تحویل دادیم. بلاک‌ها از پیش برای production آماده‌اند.",
+    name: "نیلوفر حسینی",
+    company: "Supabase",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar6.webp",
+  },
+  {
+    id: "testimonial-6",
+    text: "به‌عنوان بنیان‌گذار تنها، این نزدیک‌ترین چیز به داشتن یک تیم طراحی کامل است. هر کامپوننت صیقلی و هدفمند به نظر می‌رسد. ده‌ها کتابخانه رابط کاربری امتحان کردم و هیچ‌کدام به این نزدیک نیست.",
+    name: "کاوه مرادی",
+    company: "Resend",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
+  },
+  {
+    id: "testimonial-7",
+    text: "طراحان ما به‌خاطر زیبایی دوستش دارند. مهندسان ما به‌خاطر ترکیب‌پذیری. کم پیش می‌آید هر دو را در یک کتابخانه ببینید.",
+    name: "مهتاب شریفی",
+    company: "Clerk",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
+  },
+  {
+    id: "testimonial-8",
+    text: "کل داشبورد سامانه ابری را با این کامپوننت‌ها در کمتر از یک ماه بازسازی کردیم. فقط پشتیبانی حالت تاریک هفته‌ها از ما وقت گرفت. مشتریان فوراً بهبود کیفیت را متوجه شدند.",
+    name: "علی رحمانی",
+    company: "Planetscale",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
+  },
+  {
+    id: "testimonial-9",
+    text: "بهترین سرمایه‌گذاری سال ما. در اولین اسپرینت خودش را جبران کرد.",
+    name: "سمیرا جعفری",
+    company: "Railway",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
+  },
+];
+
+interface Testimonial11Props {
+  className?: string;
+}
+
+const Testimonial11 = ({ className }: Testimonial11Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative bg-muted bg-[linear-gradient(var(--muted)_0%,var(--background)_100%)] py-32",
+        className,
+      )}
+    >
+      <div className="container pb-16">
+        <div className="flex flex-col items-start gap-12 sm:flex-row sm:items-center sm:justify-between sm:gap-32">
+          <div className="flex flex-1 flex-col items-start text-start">
+            <h2 className="my-6 text-xl font-semibold text-pretty lg:text-xl">
+              مورد علاقه توسعه‌دهندگان در سراسر جهان
+            </h2>
+            <p className="max-w-3xl text-muted-foreground lg:text-xl">
+              هزاران تیم با کامپوننت‌های ما سریع‌تر تحویل می‌دهند. این‌ها حرف
+              آن‌هاست.
+            </p>
+          </div>
+          <div className="block shrink-0 flex-row gap-12 sm:flex sm:flex-col lg:flex-row lg:gap-24">
+            <div className="mr-8 mb-8 inline-block sm:mr-0 sm:mb-0">
+              <img
+                src="/block-media/shadcnblocks/block/logos/astro-wordmark.svg"
+                alt="لوگوی Astro"
+                className="mb-4 h-6 dark:invert"
+              />
+              <div className="flex items-center">
+                <div className="mr-4 shrink-0 text-sm font-semibold">
+                  ۴٫۸ / ۵
+                </div>
+                <div className="flex items-center gap-0.5">
+                  <Star className="size-5 fill-primary stroke-none" />
+                  <Star className="size-5 fill-primary stroke-none" />
+                  <Star className="size-5 fill-primary stroke-none" />
+                  <Star className="size-5 fill-primary stroke-none" />
+                  <Star className="size-5 fill-primary stroke-none" />
+                </div>
+              </div>
+            </div>
+            <div className="mr-8 mb-8 inline-block sm:mr-0 sm:mb-0">
+              <img
+                src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
+                alt="لوگوی میزبانی ابری"
+                className="mb-6 h-4 dark:invert"
+              />
+              <div className="flex items-center">
+                <div className="mr-4 shrink-0 text-sm font-semibold">
+                  ۴٫۸ / ۵
+                </div>
+                <div className="flex items-center gap-0.5">
+                  <Star className="size-5 fill-primary stroke-none" />
+                  <Star className="size-5 fill-primary stroke-none" />
+                  <Star className="size-5 fill-primary stroke-none" />
+                  <Star className="size-5 fill-primary stroke-none" />
+                  <Star className="size-5 fill-primary stroke-none" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container mt-16 sm:mt-0">
+        <div className="w-full columns-1 gap-4 sm:columns-2 lg:columns-3 lg:gap-6 [&>div:nth-child(n+5)]:hidden sm:[&>div:nth-child(n+5)]:inline-block sm:[&>div:nth-child(n+9)]:hidden lg:[&>div:nth-child(n+9)]:inline-block">
+          {testimonials.map((testimonial) => (
+            <div
+              key={testimonial.id}
+              className="mb-4 inline-block w-full rounded-lg border border-border bg-background p-6 lg:mb-6"
+            >
+              <div className="flex flex-col">
+                <p className="mb-4 text-xs leading-relaxed text-muted-foreground">
+                  &ldquo;{testimonial.text}&rdquo;
+                </p>
+                <div className="flex items-center gap-1 md:gap-2">
+                  <Avatar className="size-8 md:size-10">
+                    <AvatarImage src={testimonial.avatar} />
+                    <AvatarFallback>{testimonial.name}</AvatarFallback>
+                  </Avatar>
+                  <div className="text-start">
+                    <p className="text-xs font-medium">{testimonial.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {testimonial.company}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="pointer-events-none absolute bottom-0 left-0 hidden w-full sm:block sm:h-[16.875rem] sm:bg-[linear-gradient(transparent_0%,hsl(var(--accent))_100%)] lg:h-56"></div>
+    </section>
+  );
+};
+
+export { Testimonial11 };
diff --git a/blocks/testimonial12.tsx b/blocks/testimonial12.tsx
new file mode 100644
index 0000000..a5613cf
--- /dev/null
+++ b/blocks/testimonial12.tsx
@@ -0,0 +1,136 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Testimonial12Props {
+  className?: string;
+}
+
+const Testimonial12 = ({ className }: Testimonial12Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative rounded-2xl bg-muted">
+          <Carousel className="static">
+            <CarouselContent className="-ml-4">
+              <CarouselItem className="grid grid-cols-1 gap-y-10 pt-4 pr-4 pb-14 pl-8 sm:pt-8 lg:grid-cols-3 lg:gap-10 lg:p-20">
+                <div>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
+                    alt="تصویر سارا احمدی"
+                    className="mx-auto max-h-80 rounded-xl lg:mx-0 lg:max-h-none"
+                  />
+                  <div className="mt-4 text-center">
+                    <h3 className="font-semibold">سارا احمدی</h3>
+                    <p className="text-muted-foreground">مدیرعامل، نایک</p>
+                  </div>
+                </div>
+                <div className="col-span-2">
+                  <div className="mb-6 flex items-center justify-center gap-2 lg:mb-8 lg:justify-start">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/nike-icon.svg"
+                      alt="لوگوی نایک"
+                      className="h-auto w-7 lg:w-11"
+                    />
+                    <span className="text-xl font-semibold lg:text-3xl">
+                      نایک
+                    </span>
+                  </div>
+                  <p className="text-center text-xl font-semibold lg:text-start lg:text-xl">
+                    «با این پلتفرم توانستیم تجربه کاربری را متحول کنیم و رشد
+                    قابل‌توجهی در تعامل کاربران داشته باشیم.»
+                  </p>
+                  <Separator className="my-8 lg:my-10" />
+                  <div className="grid justify-center gap-10 text-center md:grid-cols-2 lg:justify-start lg:text-start">
+                    <div className="flex flex-col">
+                      <span className="mb-4 text-xl font-semibold md:text-2xll">
+                        ۲٫۲x
+                      </span>
+                      <span className="font-medium">کاربران فعال ماهانه</span>
+                      <span className="text-muted-foreground">
+                        نسبت به ماه گذشته
+                      </span>
+                    </div>
+                    <div className="flex flex-col">
+                      <span className="mb-4 text-xl font-semibold md:text-2xll">
+                        ۲۵۶٪
+                      </span>
+                      <span className="font-medium">افزایش درآمد</span>
+                      <span className="text-muted-foreground">
+                        نسبت به سال گذشته
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </CarouselItem>
+              <CarouselItem className="grid grid-cols-1 gap-y-10 pt-4 pr-4 pb-14 pl-8 sm:pt-8 lg:grid-cols-3 lg:gap-10 lg:p-20">
+                <div>
+                  <img
+                    src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
+                    alt="تصویر مازیار رضایی"
+                    className="mx-auto max-h-80 rounded-xl lg:mx-0 lg:max-h-none"
+                  />
+                  <div className="mt-4 text-center">
+                    <h3 className="font-semibold">مازیار رضایی</h3>
+                    <p className="text-muted-foreground">مدیر فناوری، پیام‌رسان تیمی</p>
+                  </div>
+                </div>
+                <div className="col-span-2">
+                  <div className="mb-6 flex items-center justify-center gap-2 lg:mb-8 lg:justify-start">
+                    <img
+                      src="/block-media/shadcnblocks/block/logos/slack-icon.svg"
+                      alt="لوگوی پیام‌رسان تیمی"
+                      className="h-auto w-5 lg:mr-1 lg:w-9"
+                    />
+                    <span className="text-xl font-semibold lg:text-3xl">
+                      پیام‌رسان تیمی
+                    </span>
+                  </div>
+                  <p className="text-center text-xl font-semibold lg:text-start lg:text-xl">
+                    «یکپارچه‌سازی سریع و نتایج ملموس، این راه‌حل را به انتخاب
+                    اول تیم ما تبدیل کرد.»
+                  </p>
+                  <Separator className="my-8 lg:my-10" />
+                  <div className="grid justify-center gap-10 text-center md:grid-cols-2 lg:justify-start lg:text-start">
+                    <div className="flex flex-col">
+                      <span className="mb-4 text-xl font-semibold md:text-2xll">
+                        ۱٫۵x
+                      </span>
+                      <span className="font-medium">کاربران فعال ماهانه</span>
+                      <span className="text-muted-foreground">
+                        نسبت به ماه گذشته
+                      </span>
+                    </div>
+                    <div className="flex flex-col">
+                      <span className="mb-4 text-xl font-semibold md:text-2xll">
+                        ۱۵۰٪
+                      </span>
+                      <span className="font-medium">افزایش درآمد</span>
+                      <span className="text-muted-foreground">
+                        نسبت به سال گذشته
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </CarouselItem>
+            </CarouselContent>
+            <div className="absolute right-6 bottom-6 z-10 lg:right-10 lg:bottom-10">
+              <div className="relative flex items-center gap-4">
+                <CarouselPrevious className="static translate-y-0" />
+                <CarouselNext className="static translate-y-0" />
+              </div>
+            </div>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial12 };
diff --git a/blocks/testimonial13.tsx b/blocks/testimonial13.tsx
new file mode 100644
index 0000000..dc94f0d
--- /dev/null
+++ b/blocks/testimonial13.tsx
@@ -0,0 +1,50 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface Testimonial13Props {
+  className?: string;
+}
+
+const Testimonial13 = ({ className }: Testimonial13Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-accent py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center text-center">
+          <div className="mb-8 flex items-center rounded-full bg-background p-1 shadow-md">
+            <Avatar className="size-10">
+              <AvatarImage
+                src="/block-media/shadcnblocks/block/avatar-1.webp"
+                alt="سارا احمدی"
+              />
+              <AvatarFallback>سا</AvatarFallback>
+            </Avatar>
+            <Avatar className="-ml-3 size-10">
+              <AvatarImage
+                src="/block-media/shadcnblocks/block/avatar-3.webp"
+                alt="رؤیا کاظمی"
+              />
+              <AvatarFallback>رک</AvatarFallback>
+            </Avatar>
+            <Avatar className="-ml-3 size-10">
+              <AvatarImage
+                src="/block-media/shadcnblocks/block/avatar-2.webp"
+                alt="مازیار رضایی"
+              />
+              <AvatarFallback>مر</AvatarFallback>
+            </Avatar>
+            <div className="mx-2 text-xs font-medium">
+              مورد اعتماد طراحان پیشرو
+            </div>
+          </div>
+          <p className="max-w-4xl text-xl font-medium lg:text-xl">
+            &ldquo;به‌عنوان طراح، این کامپوننت‌ها دقیقاً همان چیزی هستند که برای
+            ساخت رابط‌های یکدست و زیبا نیاز داشتیم. تحویل به توسعه هرگز
+            این‌قدر روان نبوده.&rdquo;
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial13 };
diff --git a/blocks/testimonial14.tsx b/blocks/testimonial14.tsx
new file mode 100644
index 0000000..16641ff
--- /dev/null
+++ b/blocks/testimonial14.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    id: "testimonial-1",
+    text: "این کتابخانه کامپوننت روش ساخت محصولات ما را متحول کرد. کل داشبورد را در نصف زمان معمول تحویل دادیم.",
+    name: "سارا احمدی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+  },
+  {
+    id: "testimonial-2",
+    text: "توجه به دسترس‌پذیری و عملکرد قابل تحسین است. امتیاز ابزار تحلیل عملکرد ما به‌طور محسوسی بهبود یافت.",
+    name: "مازیار رضایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+  },
+  {
+    id: "testimonial-3",
+    text: "بالاخره یک سیستم طراحی که توسعه‌دهندگان واقعاً دوست دارند. مستندات روشن و مقادیر پیش‌فرض منطقی‌اند.",
+    name: "نیلوفر حسینی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+  },
+];
+
+interface Testimonial14Props {
+  className?: string;
+}
+
+const Testimonial14 = ({ className }: Testimonial14Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    const updateCurrent = () => {
+      setCurrent(api.selectedScrollSnap());
+    };
+
+    api.on("select", updateCurrent);
+    return () => {
+      api.off("select", updateCurrent);
+    };
+  }, [api]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <Carousel setApi={setApi}>
+        <CarouselContent>
+          {testimonials.map((testimonial) => (
+            <CarouselItem key={testimonial.id}>
+              <div className="container flex flex-col items-center text-center">
+                <p className="mb-8 max-w-4xl font-medium md:px-8 lg:text-3xl">
+                  &ldquo;{testimonial.text}&rdquo;
+                </p>
+                <Avatar className="mb-2 size-12 md:size-24">
+                  <AvatarImage
+                    src={testimonial.avatar}
+                    alt={testimonial.name}
+                  />
+                  <AvatarFallback>{testimonial.name}</AvatarFallback>
+                </Avatar>
+                <p className="mb-1 text-sm font-medium md:text-lg">
+                  {testimonial.name}
+                </p>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <div className="container flex justify-center py-16">
+        {testimonials.map((testimonial, index) => (
+          <Button
+            key={testimonial.id}
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              api?.scrollTo(index);
+            }}
+          >
+            <div
+              className={`size-2.5 rounded-full ${index === current ? "bg-primary" : "bg-input"}`}
+            />
+          </Button>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial14 };
diff --git a/blocks/testimonial15.tsx b/blocks/testimonial15.tsx
new file mode 100644
index 0000000..f59d7e9
--- /dev/null
+++ b/blocks/testimonial15.tsx
@@ -0,0 +1,131 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Testimonial15Props {
+  className?: string;
+}
+
+const Testimonial15 = ({ className }: Testimonial15Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("mb-32 bg-muted pt-32 dark:bg-background", className)}
+    >
+      <div className="container">
+        <div className="grid gap-20 lg:grid-cols-2 lg:gap-32">
+          <div className="text-center lg:text-start">
+            <h1 className="mb-4 text-3xl font-bold text-balance lg:text-xl">
+              همین امروز جامعه نوآوران را کشف کنید
+            </h1>
+            <p className="mb-8 text-muted-foreground">
+              به شبکه‌ای جهانی از رهبران فکری، توسعه‌دهندگان محصول و نوآوران
+              بپیوندید تا ایده‌ها را به اشتراک بگذارید، از یکدیگر بیاموزید و در
+              رویدادها و گفت‌وگوهای منحصربه‌فرد شرکت کنید.
+            </p>
+            <Button className="mb-10 lg:mb-20">عضو شوید</Button>
+            <p className="mb-7 text-xs text-muted-foreground uppercase">
+              مورد استفاده شرکت‌های پیشرو
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-10 lg:justify-start">
+              <img
+                src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+                alt="لوگوی ری یو آی"
+                className="h-5 dark:invert"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/supabase-wordmark.svg"
+                alt="لوگوی پایگاه داده ابری"
+                className="h-6 dark:hidden"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/supabase-wordmark-dark.svg"
+                alt="لوگوی پایگاه داده ابری"
+                className="hidden h-6 dark:block"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
+                alt="لوگوی استایل‌دهی مدرن"
+                className="h-4 dark:hidden"
+              />
+              <img
+                src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
+                alt="لوگوی استایل‌دهی مدرن"
+                className="hidden h-4 dark:block"
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-5">
+            <div className="flex gap-5 rounded-xl bg-card p-6">
+              <Avatar className="size-9 rounded-full ring-1 ring-input">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-1.webp"
+                  alt="نیلوفر حسینی"
+                />
+              </Avatar>
+              <div>
+                <p className="mb-1 text-sm font-medium">نیلوفر حسینی</p>
+                <p className="text-xs text-muted-foreground">
+                  عضویت در جامعه نوآوران رویکرد من به توسعه محصول را کاملاً
+                  تغییر داد. بحث‌ها بسیار آموزنده‌اند و رویدادهای جامعه برای
+                  شبکه‌سازی با هم‌صنفیان عالی بوده‌اند.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-5 rounded-xl border p-6">
+              <Avatar className="size-9 rounded-full ring-1 ring-input">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-2.webp"
+                  alt="امیر محمدی"
+                />
+              </Avatar>
+              <div>
+                <p className="mb-1 text-sm font-medium">امیر محمدی</p>
+                <p className="text-xs text-muted-foreground">
+                  عضویت در این جامعه کمک کرده همیشه با جدیدترین روندهای نوآوری
+                  هم‌گام باشم. کارگاه‌های اختصاصی برای هر کسی که می‌خواهد
+                  دانشش را گسترش دهد بسیار ارزشمندند.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-5 rounded-xl bg-card p-6">
+              <Avatar className="size-9 rounded-full ring-1 ring-input">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-3.webp"
+                  alt="سارا احمدی"
+                />
+              </Avatar>
+              <div>
+                <p className="mb-1 text-sm font-medium">سارا احمدی</p>
+                <p className="text-xs text-muted-foreground">
+                  جامعه نوآوران در ارتباط با افراد هم‌فکر نقش بسزایی داشته.
+                  بینش‌های ارزشمندی به دست آوردم و مشارکت‌هایی شکل دادم که به
+                  مسیر حرفه‌ای من سود رسانده.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-5 rounded-t-xl border-x border-t px-5 pt-6 pb-1">
+              <Avatar className="size-9 rounded-full ring-1 ring-input">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-4.webp"
+                  alt="علی رحمانی"
+                />
+              </Avatar>
+              <div>
+                <p className="mb-1 text-sm font-medium">علی رحمانی</p>
+                <p className="text-xs text-muted-foreground">
+                  چند رویداد مجازی در جامعه نوآوران شرکت کردم و بسیار مفید
+                  بودند. یادگیری از رهبران حوزه تأثیر قابل‌توجهی بر رشد حرفه‌ای
+                  من گذاشته است.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial15 };
diff --git a/blocks/testimonial16.tsx b/blocks/testimonial16.tsx
new file mode 100644
index 0000000..0b83ff9
--- /dev/null
+++ b/blocks/testimonial16.tsx
@@ -0,0 +1,299 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const tweets = [
+  {
+    id: 1,
+    author: "امیر محمدی",
+    tag: "amir_mohammadi",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    content: (
+      <p className="text-sm text-muted-foreground">
+        تازه برای همه نیازهای مدیریت پروژه تیم به
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        مهاجرت کردیم. رابط کاربری فوق‌العاده روان و شهودی است!
+      </p>
+    ),
+    excerpt: (
+      <p className="line-clamp-1 font-medium md:text-xl">
+        تازه برای همه نیازهای مدیریت پروژه تیم به
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        مهاجرت کردیم
+      </p>
+    ),
+  },
+  {
+    id: 2,
+    author: "نیلوفر حسینی",
+    tag: "niloofar_h",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content: (
+      <p className="text-sm text-muted-foreground">
+        باورنکردنی است
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        چقدر ارتباطات داخلی ما را ساده کرده. جلسات کوتاه‌تر و تصمیم‌ها سریع‌تر
+        شده!
+      </p>
+    ),
+    excerpt: (
+      <p className="line-clamp-1 font-medium md:text-xl">
+        باورنکردنی است
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        چقدر ارتباطات داخلی
+      </p>
+    ),
+  },
+  {
+    id: 3,
+    author: "پارسا موسوی",
+    tag: "parsa_mousavi",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    content: (
+      <p className="text-sm text-muted-foreground">
+        طرفدار
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        هستم. هر هفته ساعت‌ها کار اداری ذخیره می‌کنیم. اگر هنوز استفاده
+        نمی‌کنید، دیرکرده‌اید!
+      </p>
+    ),
+    excerpt: (
+      <p className="line-clamp-1 font-medium md:text-xl">
+        طرفدار
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+         هر هفته ساعت‌ها
+      </p>
+    ),
+  },
+  {
+    id: 4,
+    author: "مهسا نوری",
+    tag: "mahsa_nouri",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content: (
+      <p className="text-sm text-muted-foreground">
+        تشکر از
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        برای ساده‌سازی گردش کار تحلیل. بینش‌های بلادرنگ برای ما تحول‌آفرین
+        بود!
+      </p>
+    ),
+    excerpt: (
+      <p className="line-clamp-1 font-medium md:text-xl">
+        تشکر از
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        برای ساده‌سازی
+      </p>
+    ),
+  },
+  {
+    id: 5,
+    author: "علی رحمانی",
+    tag: "ali_rahmani",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    content: (
+      <p className="text-sm text-muted-foreground">
+        یک ماه است از
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        استفاده می‌کنم و می‌توانم بگویم نحوه همکاری تیم توسعه ما از راه دور
+        را متحول کرده!
+      </p>
+    ),
+    excerpt: (
+      <p className="line-clamp-1 font-medium md:text-xl">
+        یک ماه است از
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        استفاده می‌کنم
+      </p>
+    ),
+  },
+  {
+    id: 6,
+    author: "سارا احمدی",
+    tag: "sara_ahmadi",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content: (
+      <p className="text-sm text-muted-foreground">
+        تجربه فوق‌العاده با
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        برای مدیریت عرضه محصول. آخرین محصول ما به لطف ابزارهایشان بی‌نقص به
+        بازار رسید.
+      </p>
+    ),
+    excerpt: (
+      <p className="line-clamp-1 font-medium md:text-xl">
+        تجربه فوق‌العاده با
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        برای مدیریت
+      </p>
+    ),
+  },
+  {
+    id: 7,
+    author: "رؤیا کاظمی",
+    tag: "roya_kazemi",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content: (
+      <p className="text-sm text-muted-foreground">
+        ممنون از
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        برای منابع عالی. تیم طراحی ما در چند هفته کارایی را ۳۰٪ افزایش داد!
+      </p>
+    ),
+    excerpt: (
+      <p className="line-clamp-1 font-medium md:text-xl">
+        ممنون از
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        برای منابع
+      </p>
+    ),
+  },
+  {
+    id: 8,
+    author: "سمیرا جعفری",
+    tag: "samira_jafari",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content: (
+      <p className="text-sm text-muted-foreground">
+        چند ماه است از
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        استفاده می‌کنم. این پلتفرم برای مدیریت تیم‌های دورکار تحول‌آفرین است.
+        شدیداً توصیه می‌کنم!
+      </p>
+    ),
+    excerpt: (
+      <p className="line-clamp-1 font-medium md:text-xl">
+        چند ماه است از
+        <a href="#" className="mx-1 text-blue-600">
+          @ری یو آی
+        </a>
+        استفاده می‌کنم
+      </p>
+    ),
+  },
+];
+
+interface Testimonial16Props {
+  className?: string;
+}
+
+const Testimonial16 = ({ className }: Testimonial16Props) => {
+  const [expandedTweetId, setExpandedTweetId] = useState<number | null>(null);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-8 lg:grid-cols-2">
+          <h2 className="max-w-md text-3xl font-medium lg:text-[42px] lg:leading-tight">
+            ببینید پلتفرم ما چه تأثیری دارد
+          </h2>
+          <div>
+            <p className="mb-4 text-xl font-medium text-muted-foreground">
+              ببینید دیگران چه می‌گویند
+            </p>
+            <Separator />
+            {tweets.map((tweet) => (
+              <React.Fragment key={tweet.id}>
+                <div className="select-none">
+                  <div
+                    onClick={() =>
+                      setExpandedTweetId((prevId) =>
+                        prevId === tweet.id ? null : tweet.id,
+                      )
+                    }
+                    className="cursor-pointer"
+                  >
+                    <div
+                      className={cn(
+                        "overflow-hidden transition-all duration-500",
+                        expandedTweetId === tweet.id
+                          ? "max-h-[500px]"
+                          : "max-h-20",
+                      )}
+                    >
+                      {expandedTweetId === tweet.id ? (
+                        <div className="py-4">
+                          <div className="mb-3 flex gap-4 leading-5">
+                            <Avatar className="size-9 rounded-full ring-1 ring-input">
+                              <AvatarImage
+                                src={tweet.avatar}
+                                alt={tweet.author}
+                              />
+                            </Avatar>
+                            <div className="text-sm">
+                              <p className="font-medium">{tweet.author}</p>
+                              <p className="text-muted-foreground">
+                                {tweet.tag}
+                              </p>
+                            </div>
+                          </div>
+                          {tweet.content}
+                        </div>
+                      ) : (
+                        <div className="py-4 transition-colors hover:bg-muted">
+                          <div className="flex gap-3 px-2">
+                            <Avatar className="h-full w-8">
+                              <AvatarImage
+                                src={tweet.avatar}
+                                alt={tweet.author}
+                              />
+                            </Avatar>
+                            <div>{tweet.excerpt}</div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <Separator />
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+export { Testimonial16 };
diff --git a/blocks/testimonial17.tsx b/blocks/testimonial17.tsx
new file mode 100644
index 0000000..4db44e3
--- /dev/null
+++ b/blocks/testimonial17.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import { startTransition, useEffect, useState } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Testimonial17Props {
+  className?: string;
+}
+
+const Testimonial17 = ({ className }: Testimonial17Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    startTransition(() => {
+      setCount(api.scrollSnapList().length);
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+
+    api.on("select", () => {
+      startTransition(() => {
+        setCurrent(api.selectedScrollSnap() + 1);
+      });
+    });
+  }, [api]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-14 lg:grid lg:grid-cols-3 lg:gap-0">
+          <h2 className="text-center text-3xl font-bold lg:text-start lg:text-xl">
+            تیم‌ها با پلتفرم ما شکوفا شده‌اند
+          </h2>
+          <Carousel setApi={setApi} className="w-full lg:hidden">
+            <CarouselContent>
+              <CarouselItem>
+                <div className="rounded-2xl border p-8 select-none">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+                    alt="لوگوی ری یو آی"
+                    className="mb-6 h-5 dark:invert"
+                  />
+                  <p className="mb-10 text-xl font-semibold">
+                    تیم ما پس از استفاده از این پلتفرم جهش چشمگیری در بهره‌وری
+                    داشته. واقعاً تحول‌آفرین است.
+                  </p>
+                  <div className="mb-3 flex gap-4">
+                    <Avatar className="size-12 rounded-full ring-1 ring-input">
+                      <AvatarImage
+                        src="/block-media/shadcnblocks/block/avatar-1.webp"
+                        alt="سارا احمدی"
+                      />
+                    </Avatar>
+                    <div>
+                      <p className="font-medium">سارا احمدی</p>
+                      <p className="text-muted-foreground">
+                        مدیر محصول، @company
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CarouselItem>
+              <CarouselItem>
+                <div className="rounded-2xl border p-8 select-none">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
+                    alt="لوگوی فریم‌ورک وب"
+                    className="mb-6 h-9 dark:invert"
+                  />
+                  <p className="mb-10 text-xl font-semibold">
+                    این ابزار فرایند توسعه را ساده کرده و همکاری تیم را
+                    بی‌سابقه بهبود داده.
+                  </p>
+                  <div className="mb-3 flex gap-4">
+                    <Avatar className="size-12 rounded-full ring-1 ring-input">
+                      <AvatarImage
+                        src="/block-media/shadcnblocks/block/avatar-2.webp"
+                        alt="مازیار رضایی"
+                      />
+                    </Avatar>
+                    <div>
+                      <p className="font-medium">مازیار رضایی</p>
+                      <p className="text-muted-foreground">
+                        مدیر فناوری، @company
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CarouselItem>
+              <CarouselItem>
+                <div className="rounded-2xl border p-8 select-none">
+                  <img
+                    src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-white.svg"
+                    alt="لوگوی استایل‌دهی مدرن"
+                    className="mb-6 h-4 lg:h-5"
+                  />
+                  <p className="mb-10 text-xl font-semibold">
+                    چرخه‌های توسعه را ۳۳٫۲٪ کاهش دادیم به لطف کارایی‌ای که این
+                    پلتفرم به ما می‌دهد.
+                  </p>
+                  <div className="mb-3 flex gap-4">
+                    <Avatar className="size-12 rounded-full ring-1 ring-input">
+                      <AvatarImage
+                        src="/block-media/shadcnblocks/block/avatar-3.webp"
+                        alt="نیلوفر حسینی"
+                      />
+                    </Avatar>
+                    <div>
+                      <p className="font-medium">نیلوفر حسینی</p>
+                      <p className="text-muted-foreground">
+                        سازنده محصول ارشد، @company
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CarouselItem>
+            </CarouselContent>
+            <div className="mt-8 flex justify-center">
+              {Array.from({ length: count }).map((_, index) => (
+                <span
+                  key={index}
+                  className={cn(
+                    "mx-2 inline-block size-3 cursor-pointer rounded-full border-2",
+                    index + 1 === current && "border-primary bg-primary",
+                  )}
+                  onClick={() => api && api.scrollTo(index)}
+                />
+              ))}
+            </div>
+          </Carousel>
+          <div className="col-span-2 hidden grid-cols-2 items-center gap-6 lg:grid">
+            <div className="rounded-2xl border p-8">
+              <img
+                src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+                alt="لوگوی ری یو آی"
+                className="mb-6 h-6 dark:invert"
+              />
+              <p className="mb-10 text-xl font-semibold">
+                تیم ما پس از استفاده از این پلتفرم جهش چشمگیری در بهره‌وری
+                داشته. برای ما واقعاً تحول‌آفرین بوده!
+              </p>
+              <div className="mb-3 flex gap-4">
+                <Avatar className="size-12 rounded-full ring-1 ring-input">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-1.webp"
+                    alt="سارا احمدی"
+                  />
+                </Avatar>
+                <div>
+                  <p className="font-medium">سارا احمدی</p>
+                  <p className="text-muted-foreground">
+                    مدیر محصول، @company
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col gap-6">
+              <div className="rounded-2xl border p-8">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
+                  alt="لوگوی فریم‌ورک وب"
+                  className="mb-6 h-8 dark:invert"
+                />
+                <p className="mb-10 text-xl font-semibold">
+                  این ابزار فرایند توسعه را ساده کرده و همکاری تیم را
+                  بی‌سابقه بهبود داده.
+                </p>
+                <div className="mb-3 flex gap-4">
+                  <Avatar className="size-12 rounded-full ring-1 ring-input">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-2.webp"
+                      alt="مازیار رضایی"
+                    />
+                  </Avatar>
+                  <div>
+                    <p className="font-medium">مازیار رضایی</p>
+                    <p className="text-muted-foreground">
+                      مدیر فناوری، @company
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="rounded-2xl border p-8">
+                <img
+                  src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-black.svg"
+                  alt="لوگوی استایل‌دهی مدرن"
+                  className="mb-6 h-4 dark:invert"
+                />
+                <p className="mb-10 text-xl font-semibold">
+                  چرخه‌های توسعه را ۳۰٪ کاهش دادیم به لطف کارایی‌ای که این
+                  پلتفرم به ما می‌دهد.
+                </p>
+                <div className="mb-3 flex gap-4">
+                  <Avatar className="size-12 rounded-full ring-1 ring-input">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-3.webp"
+                      alt="نیلوفر حسینی"
+                    />
+                  </Avatar>
+                  <div>
+                    <p className="font-medium">نیلوفر حسینی</p>
+                    <p className="text-muted-foreground">
+                      سازنده محصول ارشد، @company
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial17 };
diff --git a/blocks/testimonial18.tsx b/blocks/testimonial18.tsx
new file mode 100644
index 0000000..e0782bf
--- /dev/null
+++ b/blocks/testimonial18.tsx
@@ -0,0 +1,63 @@
+import { Star, Zap } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface Testimonial18Props {
+  className?: string;
+}
+
+const Testimonial18 = ({ className }: Testimonial18Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-4">
+          <div className="flex items-center gap-1 text-sm font-semibold">
+            <Zap className="h-6 w-auto fill-primary" />
+            امتیاز ۵ ستاره از بیش از ۱۰۰۰ مشتری
+          </div>
+          <h2 className="text-center text-3xl font-semibold lg:text-xl">
+            با مشتریان راضی ما آشنا شوید
+          </h2>
+          <p className="text-center text-muted-foreground lg:text-lg">
+            به شبکه‌ای جهانی از رهبران فکری و توسعه‌دهندگان محصول بپیوندید
+          </p>
+        </div>
+        <div className="mx-auto mt-20 max-w-5xl rounded-2xl bg-muted p-6 md:p-20">
+          <div className="mb-6 flex gap-1">
+            <Star className="size-5 fill-amber-500 text-amber-500" />
+            <Star className="size-5 fill-amber-500 text-amber-500" />
+            <Star className="size-5 fill-amber-500 text-amber-500" />
+            <Star className="size-5 fill-amber-500 text-amber-500" />
+            <Star className="size-5 fill-amber-500 text-amber-500" />
+          </div>
+          <q className="text-xl font-semibold md:text-xl">
+            عضویت در جامعه نوآوران چشم‌انداز من را به‌طور کامل برای بهتر شدن
+            متحول کرد
+          </q>
+          <p className="mt-6 text-muted-foreground">
+            در جامعه نوآوران توانستم ایده‌ها را به اشتراک بگذارم، از دیگران
+            بیاموزم و در رویدادها و گفت‌وگوهای منحصربه‌فرد شرکت کنم. این جامعه
+            برای شبکه‌سازی با هم‌صنفیان عالی بوده است.
+          </p>
+          <div className="mt-6 flex gap-4">
+            <Avatar className="size-14 rounded-full ring-1 ring-input">
+              <AvatarImage
+                src="/block-media/shadcnblocks/block/avatar-1.webp"
+                alt="نیلوفر حسینی"
+              />
+            </Avatar>
+            <div>
+              <p className="font-medium">نیلوفر حسینی</p>
+              <p className="text-sm text-muted-foreground">
+                مدیرعامل در @company
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial18 };
diff --git a/blocks/testimonial19.tsx b/blocks/testimonial19.tsx
new file mode 100644
index 0000000..c84926f
--- /dev/null
+++ b/blocks/testimonial19.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import { ChevronRight, Star, Zap } from "lucide-react";
+import { useRef } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Card } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    name: "سارا احمدی",
+    role: "مدیرعامل و بنیان‌گذار",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "این پلتفرم نحوه مدیریت پروژه‌های ما را متحول کرد. فوق‌العاده کاربرپسند و کارآمد است.",
+  },
+  {
+    name: "مازیار رضایی",
+    role: "مدیر فناوری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    content:
+      "یکپارچه‌سازی و عملکرد بی‌نقصش مرا تحت تأثیر قرار داد. عملیات فنی ما بسیار روان‌تر شده.",
+  },
+  {
+    name: "نیلوفر حسینی",
+    role: "مدیر عملیات",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content:
+      "مدیریت کارهای روزمره هرگز این‌قدر آسان نبوده. رابط کاربری شهودی است و وقت زیادی برای ما ذخیره می‌کند.",
+  },
+  {
+    name: "امیر محمدی",
+    role: "سرپرست فنی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    content:
+      "ابزارهای ارائه‌شده گردش کار و همکاری تیم را به‌طور محسوسی بهبود داد. شدیداً توصیه می‌کنم!",
+  },
+  {
+    name: "رؤیا کاظمی",
+    role: "طراح",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "از منظر طراحی، انعطاف و سهولت استفاده فوق‌العاده است. برای تیم ما به ابزاری ضروری تبدیل شده.",
+  },
+  {
+    name: "پارسا موسوی",
+    role: "توسعه‌دهنده",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    content:
+      "به‌عنوان توسعه‌دهنده، قابلیت‌های قدرتمند و سادگی را قدردانی می‌کنم. فرایندهای ما را به‌طور چشمگیری ساده کرده.",
+  },
+];
+
+interface Testimonial19Props {
+  className?: string;
+}
+
+const Testimonial19 = ({ className }: Testimonial19Props) => {
+  const plugin = useRef(
+    AutoScroll({
+      startDelay: 500,
+      speed: 0.7,
+    }),
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center gap-4">
+        <div className="flex items-center gap-1 text-sm font-semibold">
+          <Zap className="h-6 w-auto fill-primary" />
+          امتیاز ۵ ستاره از بیش از ۱۰۰۰ مشتری
+        </div>
+        <h2 className="text-center text-3xl font-semibold lg:text-xl">
+          با مشتریان راضی ما آشنا شوید
+        </h2>
+        <p className="text-center text-muted-foreground lg:text-lg">
+          به شبکه‌ای جهانی از رهبران فکری و توسعه‌دهندگان محصول بپیوندید
+        </p>
+        <a href="#" className="flex items-center gap-1 font-semibold">
+          مشاهده همه نظرات
+          <ChevronRight className="mt-0.5 h-4 w-auto" />
+        </a>
+      </div>
+      <div className="lg:container">
+        <div className="mt-16 space-y-4">
+          <Carousel
+            opts={{
+              loop: true,
+            }}
+            plugins={[plugin.current]}
+            onMouseLeave={() => plugin.current.play()}
+            className="relative before:absolute before:top-0 before:bottom-0 before:left-0 before:z-10 before:w-36 before:bg-linear-to-r before:from-background before:to-transparent after:absolute after:top-0 after:right-0 after:bottom-0 after:z-10 after:w-36 after:bg-linear-to-l after:from-background after:to-transparent"
+          >
+            <CarouselContent>
+              {testimonials.map((testimonial, index) => (
+                <CarouselItem key={index} className="basis-auto">
+                  <Card className="max-w-96 p-6 select-none">
+                    <div className="flex justify-between">
+                      <div className="mb-4 flex gap-4">
+                        <Avatar className="size-14 rounded-full ring-1 ring-input">
+                          <AvatarImage
+                            src={testimonial.avatar}
+                            alt={testimonial.name}
+                          />
+                        </Avatar>
+                        <div>
+                          <p className="font-medium">{testimonial.name}</p>
+                          <p className="text-sm text-muted-foreground">
+                            {testimonial.role}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex gap-1">
+                        <Star className="size-5 fill-amber-500 text-amber-500" />
+                        <Star className="size-5 fill-amber-500 text-amber-500" />
+                        <Star className="size-5 fill-amber-500 text-amber-500" />
+                        <Star className="size-5 fill-amber-500 text-amber-500" />
+                        <Star className="size-5 fill-amber-500 text-amber-500" />
+                      </div>
+                    </div>
+                    <q className="leading-7 text-muted-foreground">
+                      {testimonial.content}
+                    </q>
+                  </Card>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial19 };
diff --git a/blocks/testimonial2.tsx b/blocks/testimonial2.tsx
new file mode 100644
index 0000000..d9c5baf
--- /dev/null
+++ b/blocks/testimonial2.tsx
@@ -0,0 +1,49 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Testimonial2Props {
+  className?: string;
+}
+
+const Testimonial2 = ({ className }: Testimonial2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="text-center">
+          <div className="text-3xl font-bold md:text-2xll lg:text-2xll">
+            <p className="flex flex-wrap items-center justify-center">
+              همین حالا استخدام کنید
+              <span className="mx-4 inline-flex items-center -space-x-4">
+                <Avatar className="size-11 border lg:size-16">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-1.webp"
+                    alt="آواتار ۱"
+                  />
+                </Avatar>
+                <Avatar className="size-11 border lg:size-16">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-6.webp"
+                    alt="آواتار ۲"
+                  />
+                </Avatar>
+                <Avatar className="size-11 border lg:size-16">
+                  <AvatarImage
+                    src="/block-media/shadcnblocks/block/avatar-3.webp"
+                    alt="آواتار ۳"
+                  />
+                </Avatar>
+              </span>
+              سریع و کاملاً رایگان.
+            </p>
+          </div>
+          <Button size="lg" className="mt-10">
+            رایگان شروع کنید
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial2 };
diff --git a/blocks/testimonial20.tsx b/blocks/testimonial20.tsx
new file mode 100644
index 0000000..52bb059
--- /dev/null
+++ b/blocks/testimonial20.tsx
@@ -0,0 +1,73 @@
+import { Sparkle } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface Testimonial20Props {
+  className?: string;
+}
+
+const Testimonial20 = ({ className }: Testimonial20Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="relative grid border border-dashed md:grid-cols-2">
+          <div className="border-dashed px-6 py-12 md:border-r md:px-12 md:py-16">
+            <p className="mb-6 text-center font-medium md:text-xl">
+              «پلتفرم در همه جنبه‌ها از انتظارات ما فراتر رفت. پیاده‌سازی روان
+              بود و{" "}
+              <strong className="font-bold">نتایج فوق‌العاده است!</strong>»
+            </p>
+            <div className="flex flex-col items-center justify-center gap-4 md:flex-row">
+              <Avatar className="size-14 rounded-full border">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-1.webp"
+                  alt="سارا احمدی"
+                />
+              </Avatar>
+              <p className="text-center font-medium md:text-start">
+                سارا احمدی، مدیر عملیات
+              </p>
+            </div>
+          </div>
+          <div className="px-6 py-12 text-center md:px-12 md:py-16">
+            <p className="mb-6 text-center font-medium md:text-xl">
+              «تیم در تمام فرایند
+              <strong className="mx-1 font-bold">کیفیت استثنایی</strong>
+              ارائه داد. پشتیبانی در هر مرحله قابل تحسین بود.»
+            </p>
+            <div className="flex flex-col items-center justify-center gap-4 md:flex-row">
+              <Avatar className="size-14 rounded-full border">
+                <AvatarImage
+                  src="/block-media/shadcnblocks/block/avatar-2.webp"
+                  alt="مازیار رضایی"
+                />
+              </Avatar>
+              <p className="text-center font-medium md:text-start">
+                مازیار رضایی، سرپرست فنی
+              </p>
+            </div>
+          </div>
+          <Sparkle
+            strokeWidth={1}
+            className="absolute -top-[9px] -left-[9px] size-4 fill-primary"
+          />
+          <Sparkle
+            strokeWidth={1}
+            className="absolute -top-2 -right-2 size-4 fill-primary"
+          />
+          <Sparkle
+            strokeWidth={1}
+            className="absolute -right-2 -bottom-2 size-4 fill-primary"
+          />
+          <Sparkle
+            strokeWidth={1}
+            className="absolute -bottom-2 -left-2 size-4 fill-primary"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial20 };
diff --git a/blocks/testimonial21.tsx b/blocks/testimonial21.tsx
new file mode 100644
index 0000000..2a5bc5b
--- /dev/null
+++ b/blocks/testimonial21.tsx
@@ -0,0 +1,176 @@
+import { Handshake } from "lucide-react";
+import React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    logo: {
+      src: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+      alt: "لوگوی Astro",
+      width: 96.75,
+      height: 36,
+    },
+    quote:
+      "تیم ما در Zerostatic به خودکارسازی بسیار وابسته است و این اپ آن را به سطح دیگری برده. انگار یک دستیار مجازی درون گردش کارم تعبیه شده.",
+    author: {
+      name: "امیرحسین قاسمی",
+      role: "طراح محصول، Zerostatic",
+      image:
+        "/block-media/shadcnblocks/block/avatar-8.webp",
+    },
+  },
+  {
+    logo: {
+      src: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
+      alt: "لوگوی طراحی رابط",
+      width: 90.75,
+      height: 36,
+    },
+    quote:
+      "به‌ویژه یکپارچه‌سازی بی‌نقص تقویم و قابلیت‌های پیشرفته مدیریت وظایف را دوست دارم که همه را هم‌راستا و منظم نگه می‌دارد.",
+    author: {
+      name: "نیلوفر حسینی",
+      role: "مدیر محصول، یادداشت‌برداری",
+      image:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+  },
+  {
+    logo: {
+      src: "/block-media/shadcnblocks/block/logos/sketch-wordmark.svg",
+      alt: "لوگوی طراحی برداری",
+      width: 100.75,
+      height: 36,
+    },
+    quote:
+      "به اپ بهره‌وری نیاز داشتیم که با نیازهای در حال تغییر تیم ما رشد کند؛ این انتخاب عالی بود. ابزارهای خودکارسازی ساعت‌ها از ما وقت گرفت.",
+    author: {
+      name: "امیر محمدی",
+      role: "مدیر عملیات، پیام‌رسان تیمی",
+      image:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+  },
+  {
+    logo: {
+      src: "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
+      alt: "لوگوی استایل‌دهی مدرن",
+      width: 110.75,
+      height: 36,
+    },
+    quote:
+      "این پلتفرم برای مدیریت پروژه در تیم‌های توزیع‌شده بی‌نهایت ارزشمند بود. یکپارچه‌سازی با ابزارهای موجود، راه‌اندازی را آسان کرد.",
+    author: {
+      name: "علی رحمانی",
+      role: "مدیر مهندسی، مخزن کد",
+      image:
+        "/block-media/shadcnblocks/block/avatar-4.webp",
+    },
+  },
+  {
+    logo: {
+      src: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
+      alt: "لوگوی میزبانی ابری",
+      width: 96.75,
+      height: 36,
+    },
+    quote:
+      "به‌عنوان طراح، سادگی بصری و جذابیت این اپ را قدردانی می‌کنم. مدیریت وظایف را ساده می‌کند بدون اینکه از قابلیت‌های قدرتمند بگذرد.",
+    author: {
+      name: "رؤیا کاظمی",
+      role: "سرپرست طراحی، طراحی رابط",
+      image:
+        "/block-media/shadcnblocks/block/avatar-7.webp",
+    },
+  },
+  {
+    logo: {
+      src: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
+      alt: "لوگوی پایگاه داده ابری",
+      width: 96.75,
+      height: 36,
+    },
+    quote:
+      "یادآورهای هوشمند و زمان‌بندی خودکار تیم را متمرکز و منظم نگه می‌دارد. قابلیت‌های همکاری هم برای ما بسیار مفید بوده.",
+    author: {
+      name: "پارسا موسوی",
+      role: "استراتژیست محتوا، Loom",
+      image:
+        "/block-media/shadcnblocks/block/avatar-6.webp",
+    },
+  },
+];
+
+interface Testimonial21Props {
+  className?: string;
+}
+
+const Testimonial21 = ({ className }: Testimonial21Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
+          <Badge
+            variant="outline"
+            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <Handshake className="size-4" />
+            <span>خیلی دوستش داریم</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
+            کارشناسان صنعت چه می‌گویند
+          </h2>
+          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
+            مورد اعتماد متخصصان شرکت‌های پیشرو فناوری
+          </p>
+        </div>
+      </div>
+
+      <div className="container mt-10 grid gap-8 sm:grid-cols-2 md:mt-14 lg:grid-cols-3">
+        {testimonials.map((testimonial, index) => (
+          <Card
+            key={index}
+            className="flex flex-col gap-6 rounded-md bg-background p-6 shadow-sm"
+          >
+            <img
+              src={testimonial.logo.src}
+              alt={testimonial.logo.alt}
+              width={testimonial.logo.width}
+              height={testimonial.logo.height}
+              className="object-contain dark:invert"
+            />
+
+            <blockquote className="text-muted-foreground-subtle text-lg font-normal italic">{`«${testimonial.quote}»`}</blockquote>
+
+            <div className="mt-auto flex items-center gap-4">
+              <img
+                src={testimonial.author.image}
+                alt={`تصویر ${testimonial.author.name}`}
+                width={48}
+                height={48}
+                className="rounded-full object-cover"
+              />
+              <div>
+                <p className="text-lg tracking-[-0.36px]">
+                  {testimonial.author.name}
+                </p>
+                <p className="text-muted-foreground">
+                  {testimonial.author.role}
+                </p>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      <div className="mt-12 h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container h-full w-full border-x"></div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial21 };
diff --git a/blocks/testimonial23.tsx b/blocks/testimonial23.tsx
new file mode 100644
index 0000000..19809fd
--- /dev/null
+++ b/blocks/testimonial23.tsx
@@ -0,0 +1,245 @@
+"use client";
+import {
+  BadgeCheck,
+  ChevronRight,
+  Clock,
+  MessageSquareCode,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  id: string;
+  name: string;
+  username: string;
+  date: string;
+  avatar: string;
+  content: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    id: "1",
+    name: "امیر محمدی",
+    username: "amir_mohammadi",
+    date: "۵ مهر ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    content:
+      "این پلتفرم کاملاً نحوه مدیریت پروژه‌هایم را تغییر داد. ابزارها هم شهودی‌اند هم قدرتمند و گردش کارم را بی‌سابقه ساده کرده‌اند. برای بهره‌وری تحول‌آفرین است!",
+  },
+  {
+    id: "2",
+    name: "نیلوفر حسینی",
+    username: "niloofar_h",
+    date: "۳۰ شهریور ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "قابلیت‌های همکاری واقعاً برجسته است و به تیم من اجازه می‌دهد هر جا که هستیم بی‌نقص با هم کار کنیم؛ دورکاری را به‌طور محسوسی آسان‌تر کرده. ویرایش بلادرنگ و اشتراک‌گذاری شهودی نحوه کار ما را عوض کرده و دردسر نسخه‌ها و ایمیل‌های بی‌پایان را حذف کرده.",
+  },
+  {
+    id: "3",
+    name: "سارا احمدی",
+    username: "sara_ahmadi",
+    date: "۲۵ شهریور ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content: "تحلیل‌ها تحول‌آفرین‌اند!",
+  },
+  {
+    id: "4",
+    name: "پارسا موسوی",
+    username: "parsa_mousavi",
+    date: "۲۰ شهریور ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    content:
+      "دوست دارم چقدر ادغام این پلتفرم با ابزارهای موجود آسان است. گردش کارم را به‌طور چشمگیری ساده کرده و هر هفته ساعت‌ها برایم ذخیره می‌کند.",
+  },
+  {
+    id: "5",
+    name: "رؤیا کاظمی",
+    username: "roya_kazemi",
+    date: "۱۵ شهریور ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content:
+      "قالب‌های طراحی فوق‌العاده‌اند. کمک کردند پروژه‌ها را سریع‌تر تحویل دهم بدون اینکه کیفیت پایین بیاید. شدیداً توصیه می‌کنم!",
+  },
+  {
+    id: "6",
+    name: "مهسا نوری",
+    username: "mahsa_nouri",
+    date: "۱۰ شهریور ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content:
+      "این پلتفرم مدیریت پروژه را بسیار آسان کرده. شهودی، کارآمد و همه را روی اهداف مشترک نگه می‌دارد.",
+  },
+  {
+    id: "7",
+    name: "فاطمه رستمی",
+    username: "fateme_rastemi",
+    date: "۵ شهریور ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content:
+      "ابزارهای برندسازی شگفت‌انگیزند. به ما کمک کردند در همه کمپین‌ها یکنواختی حفظ کنیم؛ برد بزرگی برای تیم بود.",
+  },
+  {
+    id: "8",
+    name: "مهتاب شریفی",
+    username: "mahtab_sharifi",
+    date: "۳۰ مرداد ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "ابزارهای ویرایش وکتور عالی‌اند. فرایند خلاقانه من را بسیار روان‌تر و لذت‌بخش‌تر کرده‌اند.",
+  },
+  {
+    id: "9",
+    name: "کاوه مرادی",
+    username: "kaveh_moradi",
+    date: "۲۵ مرداد ۱۴۲",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    content:
+      "قابلیت‌های انیمیشن باورنکردنی‌اند. پروژه‌هایم را به سطح بالاتری برده‌اند و از نتیجه بسیار راضی‌ام.",
+  },
+];
+
+const TestimonialCard = ({ testimonial }: { testimonial: DataItem }) => (
+  <Card className="relative mb-5 break-inside-avoid rounded-xl p-5 shadow-sm">
+    <div className="flex items-center gap-4">
+      <Avatar className="h-10 w-10 rounded-full ring-1 ring-muted">
+        <AvatarImage src={testimonial.avatar} alt={testimonial.name} />
+      </Avatar>
+      <div>
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium">{testimonial.name}</p>
+          <BadgeCheck className="h-4 w-4 fill-cyan-400 stroke-white" />
+        </div>
+        <p className="mt-2 text-xs text-muted-foreground">
+          @{testimonial.username}
+        </p>
+      </div>
+      <div className="ms-auto hover:cursor-pointer">
+        <img
+          src="/block-media/shadcnblocks/block/logos/x.svg"
+          alt="لوگوی X"
+          className="h-4 w-4"
+        />
+      </div>
+    </div>
+
+    <div className="my-4 border-t border-dashed border-border" />
+
+    <div className="text-sm text-foreground">
+      <q>{testimonial.content}</q>
+    </div>
+
+    <div className="mt-4 flex items-center gap-2 text-xs text-muted-foreground">
+      <Clock className="h-4 w-4" />
+      <span>{testimonial.date}</span>
+    </div>
+  </Card>
+);
+
+interface Testimonial23Props {
+  className?: string;
+}
+
+const Testimonial23 = ({ className }: Testimonial23Props) => {
+  const [columnCount, setColumnCount] = useState(3);
+
+  useEffect(() => {
+    const getColumnCount = () => {
+      if (typeof window === "undefined") return 3;
+      const width = window.innerWidth;
+      if (width < 768) return 1;
+      if (width < 1024) return 2;
+      return 3;
+    };
+
+    const updateColumnCount = () => {
+      setColumnCount(getColumnCount());
+    };
+
+    updateColumnCount();
+    window.addEventListener("resize", updateColumnCount);
+    return () => window.removeEventListener("resize", updateColumnCount);
+  }, []);
+
+  const reorderForColumns = (items: DataItem[], columns: number) => {
+    const itemsPerColumn = Math.ceil(items.length / columns);
+    const reordered: DataItem[] = [];
+
+    for (let col = 0; col < columns; col++) {
+      for (let row = 0; row < itemsPerColumn; row++) {
+        const originalIndex = row * columns + col;
+        if (originalIndex < items.length) {
+          reordered.push(items[originalIndex]);
+        }
+      }
+    }
+
+    return reordered;
+  };
+
+  const reorderedData = useMemo(() => {
+    return reorderForColumns(DATA, columnCount);
+  }, [columnCount]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="my-4 flex justify-center">
+          <Badge variant="outline" className="rounded-sm py-2 shadow-md">
+            <MessageSquareCode className="me-2 size-4 text-muted-foreground" />
+            <span>بازخورد مشتریان</span>
+          </Badge>
+        </div>
+
+        <div className="flex flex-col items-center gap-6 px-4 sm:px-8">
+          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
+            بشنویید مشتریان ما <br /> چه می‌گویند
+          </h2>
+
+          <div className="mt-4 flex flex-col items-center gap-4 sm:flex-row">
+            <span>
+              ببینید <b>ری یو آی</b> چگونه گردش کار در صنایع مختلف را متحول
+              می‌کند.
+            </span>
+          </div>
+        </div>
+
+        <div className="relative mt-14 w-full px-4 after:absolute after:inset-x-0 after:-bottom-2 after:h-96 after:bg-linear-to-t after:from-background sm:px-8 md:px-16 lg:px-32">
+          <div className="columns-1 gap-5 md:columns-2 lg:columns-3">
+            {reorderedData.map((testimonial) => (
+              <TestimonialCard key={testimonial.id} testimonial={testimonial} />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-center">
+          <Button className="mt-4 gap-2 rounded-lg px-5 py-3 text-sm shadow-sm transition-colors hover:bg-primary/90 focus:outline-none disabled:pointer-events-none disabled:opacity-50">
+            <span className="flex items-center gap-1">
+              <span>بیشتر ببینید</span>
+              <span className="text-muted/80">-</span>
+              <span className="text-muted/80">نظرات</span>
+            </span>
+            <ChevronRight className="h-4 w-4 text-muted-foreground/80" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial23 };
diff --git a/blocks/testimonial24.tsx b/blocks/testimonial24.tsx
new file mode 100644
index 0000000..d83c797
--- /dev/null
+++ b/blocks/testimonial24.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { Star } from "lucide-react";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  name: string;
+  avatar: string;
+  content: string;
+  margin?: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    name: "امیرحسین قاسمی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    content:
+      "این ابزار کاملاً گردش کارم را متحول کرد. قابلیت‌ها شهودی‌اند و همکاری با تیم را بسیار آسان‌تر کرده.",
+    margin: "mt-6",
+  },
+  {
+    name: "نیلوفر حسینی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content:
+      "قالب‌های طراحی نجات‌بخش بودند. کمک کردند پروژه‌ها را سریع‌تر تحویل دهم بدون اینکه کیفیت پایین بیاید.",
+  },
+  {
+    name: "پارسا موسوی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    content:
+      "بهره‌وری تیم ما از وقتی از این پلتفرم استفاده می‌کنیم جهش کرده. برای هر تیم خلاق ضروری است.",
+    margin: "mt-4",
+  },
+  {
+    name: "سارا احمدی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content:
+      "داشبورد تحلیل باورنکردنی است. بینش‌های لازم برای تصمیم‌های مبتنی بر داده را به ما می‌دهد.",
+  },
+  {
+    name: "مازیار رضایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-5.webp",
+    content:
+      "یکپارچه‌سازی با ابزارهای موجود بی‌نقص بود. مستندات اتصال هوشمند کامل و قابل فهم است.",
+  },
+  {
+    name: "مهسا نوری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "پلتفرم مدیریت پروژه‌های خلاقانه و هماهنگ نگه داشتن تیم را بسیار آسان کرده.",
+  },
+  {
+    name: "فاطمه رستمی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content:
+      "ابزارهای برندسازی در سطح بالایی‌اند. به حفظ یکنواختی در همه کمپین‌ها کمک کرده‌اند.",
+  },
+  {
+    name: "مهتاب شریفی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content:
+      "ابزارهای ویرایش وکتور عالی‌اند. فرایند خلاقانه من را بسیار روان‌تر کرده‌اند.",
+  },
+  {
+    name: "کاوه مرادی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    content:
+      "قابلیت‌های انیمیشن باورنکردنی‌اند. پروژه‌هایم را به سطح بالاتری برده‌اند.",
+  },
+];
+
+interface RewardCardProps {
+  icon: string;
+  title: string;
+  subtitle: string;
+}
+
+const RewardCard = ({ icon, title, subtitle }: RewardCardProps) => (
+  <div className="flex flex-col gap-2 rounded-xl bg-muted p-2 px-4 shadow-sm">
+    <div className="flex flex-row items-center gap-2">
+      <div className="rounded-full bg-background p-2">
+        <img
+          src={icon}
+          alt={title}
+          width={40}
+          height={40}
+          className="rounded-full"
+        />
+      </div>
+      <div className="flex flex-col">
+        <span className="text-sm font-medium">{title}</span>
+        <span className="text-sm text-muted-foreground">{subtitle}</span>
+      </div>
+    </div>
+  </div>
+);
+
+interface Testimonial24Props {
+  className?: string;
+}
+
+const Testimonial24 = ({ className }: Testimonial24Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6 px-4 sm:px-8">
+          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
+            ببینید چرا خلاقان <br /> پلتفرم ما را دوست دارند
+          </h2>
+
+          <div className="mt-4 flex flex-col items-center gap-4 sm:flex-row">
+            <RewardCard
+              icon="/block-media/shadcnblocks/block/block-1.svg"
+              title="برترین برای طراحی"
+              subtitle="انتخاب ۱۴۲"
+            />
+
+            <RewardCard
+              icon="/block-media/shadcnblocks/block/block-2.svg"
+              title="برترین برای خلاقیت"
+              subtitle="انتخاب ۱۴۱"
+            />
+          </div>
+        </div>
+
+        <div className="relative mt-14 w-full px-4 after:absolute after:inset-x-0 after:-bottom-2 after:h-96 after:bg-linear-to-t after:from-background sm:px-8 md:px-16 lg:px-32">
+          <ResponsiveMasonry
+            columnsCountBreakPoints={{ 350: 1, 768: 2, 1024: 3 }}
+          >
+            <Masonry gutter="20px" columnsCount={3}>
+              {DATA.map((testimonial, idx) => (
+                <Card
+                  key={idx}
+                  className={cn(
+                    "rounded-xl p-5 shadow-sm",
+                    idx > 3 && idx <= 5 && "hidden md:block",
+                    idx > 5 && "hidden lg:block",
+                    testimonial.margin,
+                  )}
+                >
+                  <div className="mb-4 flex gap-1">
+                    {[...Array(5)].map((_, i) => (
+                      <Star key={i} className="h-4 w-4 fill-primary" />
+                    ))}
+                  </div>
+
+                  <div className="mt-4 text-sm text-foreground">
+                    <q>{testimonial.content}</q>
+                  </div>
+
+                  <div className="mt-4 flex items-center gap-2">
+                    <Avatar className="size-9 rounded-full ring-1 ring-muted">
+                      <AvatarImage
+                        src={testimonial.avatar}
+                        alt={testimonial.name}
+                      />
+                    </Avatar>
+                    <div className="text-sm">
+                      <p className="font-medium">{testimonial.name}</p>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </Masonry>
+          </ResponsiveMasonry>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial24 };
diff --git a/blocks/testimonial25.tsx b/blocks/testimonial25.tsx
new file mode 100644
index 0000000..f1a2398
--- /dev/null
+++ b/blocks/testimonial25.tsx
@@ -0,0 +1,154 @@
+import { ArrowLeft } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const items = [
+  {
+    quote: "Mainline را به‌جای CRM استفاده می‌کنیم و هنوز هم جواب می‌دهد!",
+    author: "نیلوفر حسینی",
+    role: "مدیر محصول",
+    company: "ری یو آی Finance",
+    image:
+      "/block-media/shadcnblocks/block/mainline/testimonials/amy-chase.webp",
+  },
+  {
+    quote: "توانستم ۸۰٪ تیمم را با ربات‌های Mainline جایگزین کنم.",
+    author: "مازیار رضایی",
+    role: "مهندس ارشد",
+    company: "ری یو آی Finance",
+    image:
+      "/block-media/shadcnblocks/block/mainline/testimonials/jonas-kotara.webp",
+  },
+  {
+    quote:
+      "مسیر بنیان‌گذاری به‌اندازه کافی سخت است؛ داشتن یک اپ مدیریت محصول عالی کمک بزرگی است.",
+    author: "کاوه مرادی",
+    role: "بنیان‌گذار",
+    company: "ری یو آی Finance",
+    image:
+      "/block-media/shadcnblocks/block/mainline/testimonials/kevin-yam.webp",
+  },
+  {
+    quote: "می‌توانم از این ابزار به‌جای مدیر محصولم استفاده کنم.",
+    author: "رضا کریمی",
+    role: "بنیان‌گذار",
+    company: "ری یو آی Finance",
+    image:
+      "/block-media/shadcnblocks/block/mainline/testimonials/kundo-marta.webp",
+  },
+  {
+    quote: "Mainline را به‌جای CRM استفاده می‌کنیم و هنوز هم جواب می‌دهد!",
+    author: "نیلوفر حسینی",
+    role: "مدیر محصول",
+    company: "ری یو آی Finance",
+    image:
+      "/block-media/shadcnblocks/block/mainline/testimonials/amy-chase.webp",
+  },
+  {
+    quote: "توانستم ۸۰٪ تیمم را با ربات‌های Mainline جایگزین کنم.",
+    author: "مازیار رضایی",
+    role: "مهندس ارشد",
+    company: "ری یو آی Finance",
+    image:
+      "/block-media/shadcnblocks/block/mainline/testimonials/jonas-kotara.webp",
+  },
+  {
+    quote:
+      "مسیر بنیان‌گذاری به‌اندازه کافی سخت است؛ داشتن یک اپ مدیریت محصول عالی کمک بزرگی است.",
+    author: "کاوه مرادی",
+    role: "بنیان‌گذار",
+    company: "ری یو آی Finance",
+    image:
+      "/block-media/shadcnblocks/block/mainline/testimonials/kevin-yam.webp",
+  },
+  {
+    quote: "می‌توانم از این ابزار به‌جای مدیر محصولم استفاده کنم.",
+    author: "رضا کریمی",
+    role: "بنیان‌گذار",
+    company: "ری یو آی Finance",
+    image:
+      "/block-media/shadcnblocks/block/mainline/testimonials/kundo-marta.webp",
+  },
+];
+
+interface Testimonial25Props {
+  className?: string;
+}
+
+const Testimonial25 = ({ className }: Testimonial25Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold tracking-tight md:text-xl lg:text-2xll">
+            مورد اعتماد سازندگان محصول
+          </h2>
+          <p className="max-w-md leading-snug font-medium text-muted-foreground">
+            ری یو آی بر پایه عادت‌هایی ساخته شده که موفق‌ترین تیم‌های محصول را
+            می‌سازد: تمرکز، سرعت و همیشه تلاش برای کیفیت بالا.
+          </p>
+          <Button variant="outline" className="">
+            مطالعات موردی مشتریان را بخوانید <ArrowLeft className="size-4" />
+          </Button>
+        </div>
+
+        <div className="relative mt-8 md:mt-12 lg:mt-20">
+          <Carousel
+            opts={{
+              align: "start",
+              loop: true,
+            }}
+            className="w-full"
+          >
+            <CarouselContent className="">
+              {items.map((testimonial, index) => (
+                <CarouselItem
+                  key={index}
+                  className="grow basis-4/5 md:basis-3/5 lg:basis-[28%] xl:basis-1/4"
+                >
+                  <Card className="h-full overflow-hidden border-none bg-muted">
+                    <CardContent className="flex h-full flex-col p-0">
+                      <img
+                        src={testimonial.image}
+                        alt={testimonial.author}
+                        className="h-[288px] object-cover object-top lg:h-[328px]"
+                      />
+                      <div className="flex flex-1 flex-col justify-between gap-10 p-6">
+                        <blockquote className="text-lg leading-none! font-medium text-primary md:text-xl">
+                          {testimonial.quote}
+                        </blockquote>
+                        <div className="space-y-0.5">
+                          <div className="text-sm font-semibold">
+                            {testimonial.author}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {testimonial.role}، {testimonial.company}
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <div className="mt-8 flex gap-3">
+              <CarouselPrevious className="static size-10 translate-x-0 translate-y-0" />
+              <CarouselNext className="static size-10 translate-x-0 translate-y-0" />
+            </div>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial25 };
diff --git a/blocks/testimonial26.tsx b/blocks/testimonial26.tsx
new file mode 100644
index 0000000..815d4a7
--- /dev/null
+++ b/blocks/testimonial26.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import { type SVGProps, useEffect, useId, useState } from "react";
+
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const TESTIMONIALS = [
+  {
+    id: 1,
+    quote:
+      "پلتفرم Charter سرعت بی‌نظیر، چارچوب حساب انعطاف‌پذیر و طراحی API-first دارد. درک عمیقشان از اکوسیستم برای مقیاس‌دهی عملیات مالی ما حیاتی بوده.",
+    author: "علی رحمانی",
+    role: "بنیان‌گذار، میزبانی ابری",
+    company: "Vercel",
+    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
+  },
+  {
+    id: 2,
+    quote:
+      "رویکرد API-first و زیرساخت قدرتمند Charter عملیات مالی ما را کاملاً متحول کرد. انعطاف و سرعت پلتفرم به ما امکان داده آنچه نیاز داریم را کارآمد و امن بسازیم.",
+    author: "مازیار رضایی",
+    role: "مدیر مهندسی، Astro",
+    company: "Astro",
+    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
+  },
+  {
+    id: 3,
+    quote:
+      "پلتفرم Charter از انتظارات ما فراتر رفت؛ فرایند یکپارچه‌سازی روان و تیم پشتیبانی استثنایی. ابزارهای قدرتمند و زیرساخت پایدار در مسیر مقیاس‌دهی ما نقش کلیدی داشته.",
+    author: "سارا احمدی",
+    role: "مدیر فناوری، طراحی رابط",
+    company: "Figma",
+    logo: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
+  },
+  {
+    id: 4,
+    quote:
+      "Charter نحوه مدیریت زیرساخت مالی ما را متحول کرد. رویکرد API-first و قابلیت‌های پلتفرم، انعطاف ساخت راه‌حل‌های سفارشی در مقیاس را به ما داده.",
+    author: "کاوه مرادی",
+    role: "مدیرعامل، پایگاه داده ابری",
+    company: "Supabase",
+    logo: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
+  },
+  {
+    id: 5,
+    quote:
+      "ترکیب معماری انعطاف‌پذیر پلتفرم Charter و تیم پشتیبانی استثنایی، عملیات ما را متحول کرد. سرعت، پایداری و مقیاس‌پذیری در صنعت بی‌رقیب است.",
+    author: "نیلوفر حسینی",
+    role: "مدیر محصول، ری یو آی",
+    company: "Shadcn/ui",
+    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg",
+  },
+];
+
+interface Testimonial26Props {
+  className?: string;
+}
+
+const Testimonial26 = ({ className }: Testimonial26Props) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
+      <div className="container max-w-4xl">
+        <Carousel
+          opts={{
+            align: "center",
+            loop: true,
+          }}
+          setApi={setApi}
+        >
+          <CarouselContent>
+            {TESTIMONIALS.map((testimonial) => (
+              <CarouselItem
+                key={testimonial.id}
+                className="flex cursor-grab flex-col gap-6 lg:gap-8"
+              >
+                <blockquote className="font-hubot-sans pointer-events-none text-xl leading-relaxed font-semibold tracking-tight text-balance select-none md:text-3xl lg:text-xl">
+                  {testimonial.quote}
+                </blockquote>
+                <div className="flex items-center gap-4">
+                  {testimonial.logo && (
+                    <div className="relative h-8 w-24">
+                      <img
+                        src={testimonial.logo}
+                        alt={`لوگوی ${testimonial.company}`}
+                        className="object-contain dark:invert"
+                        aria-hidden="true"
+                      />
+                    </div>
+                  )}
+                  <div className="h-8 w-px bg-border" aria-hidden="true" />
+                  <div>
+                    <cite className="font-semibold not-italic">
+                      {testimonial.author}
+                    </cite>
+                    <p className="text-sm font-medium text-muted-foreground">
+                      {testimonial.role}
+                    </p>
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        <div
+          className="mt-10 flex gap-2 lg:mt-16"
+          role="group"
+          aria-label="ناوبری نظرات"
+        >
+          {TESTIMONIALS.map((_, index) => (
+            <button
+              key={index}
+              type="button"
+              className={cn(
+                "size-4 cursor-pointer rounded-full transition-colors duration-300",
+                index === current
+                  ? "bg-muted-foreground"
+                  : "bg-muted-foreground/20 hover:bg-muted-foreground/50",
+              )}
+              onClick={() => api?.scrollTo(index)}
+              aria-label={`رفتن به نظر ${index + 1}`}
+              aria-current={index === current ? "true" : undefined}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="absolute inset-x-0 top-16 isolate z-[-1] h-[300px] md:top-28 lg:top-32">
+        <div className="absolute inset-x-0 bottom-0 z-10 h-40 bg-linear-to-t from-background via-background/40 to-transparent" />
+        <div className="absolute inset-x-0 top-0 z-10 h-40 bg-linear-to-b from-background via-background/40 to-transparent" />
+        <PlusSigns className="size-full text-foreground/5" />
+      </div>
+    </section>
+  );
+};
+
+interface PlusSignsProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
+  const GAP = 18;
+  const STROKE_WIDTH = 1;
+  const PLUS_SIZE = 4;
+  const id = useId();
+  const patternId = `plus-pattern-${id}`;
+
+  return (
+    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          x="0"
+          y="0"
+          width={GAP}
+          height={GAP}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1={GAP / 2}
+            y1={(GAP - PLUS_SIZE) / 2}
+            x2={GAP / 2}
+            y2={(GAP + PLUS_SIZE) / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+          <line
+            x1={(GAP - PLUS_SIZE) / 2}
+            y1={GAP / 2}
+            x2={(GAP + PLUS_SIZE) / 2}
+            y2={GAP / 2}
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+};
+
+export { Testimonial26 };
diff --git a/blocks/testimonial27.tsx b/blocks/testimonial27.tsx
new file mode 100644
index 0000000..f47b6fa
--- /dev/null
+++ b/blocks/testimonial27.tsx
@@ -0,0 +1,198 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+const TESTIMONIALS = [
+  {
+    quote:
+      "بیش از همه دوست دارم همه‌چیز یک‌جا باشد؛ مسیریابی را ساده می‌کند و ۱۰ برابر شهودی‌تر از Chili Piper است!",
+    link: "#",
+    author: {
+      name: "سارا احمدی",
+      image:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      role: "مدیر فناوری، ARC",
+    },
+    company: {
+      logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
+      name: "ARC",
+    },
+  },
+  {
+    quote:
+      "این اپ بی‌نقص در عملیات GTM ما ادغام شده و نیاز به ابزار جداگانه و اتصالات پیچیده را حذف کرده.",
+    link: "#",
+    author: {
+      name: "کاوه مرادی",
+      image:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+      role: "مدیرعامل و بنیان‌گذار، Descript",
+    },
+    company: {
+      logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+      name: "Descript",
+    },
+  },
+];
+
+const CASE_STUDIES = [
+  {
+    title: "چگونه کارایی GTM را ۱۰ برابر کردیم",
+    link: "#",
+    stats: [
+      {
+        number: "۱۰x",
+        text: "افزایش کارایی GTM",
+      },
+    ],
+    author: {
+      name: "امیر محمدی",
+      image:
+        "/block-media/shadcnblocks/block/avatar-8.webp",
+      role: "مدیر بازاریابی",
+    },
+    background:
+      "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+  },
+  {
+    title: "چگونه ری یو آی زمان پاسخ به لید را ۸۰٪ کاهش داد",
+    link: "#",
+    stats: [
+      {
+        number: "۸۰٪",
+        text: "پاسخ سریع‌تر به لید",
+      },
+    ],
+    author: {
+      name: "نیلوفر حسینی",
+      image:
+        "/block-media/shadcnblocks/block/avatar-7.webp",
+      role: "مدیر فروش",
+    },
+    background:
+      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+  },
+  {
+    title: "از صفر تا ۷ میلیون دلار در قیف فروش",
+    link: "#",
+    stats: [
+      {
+        number: "$۷M",
+        text: "قیف فروش inbound تولیدشده",
+      },
+    ],
+    author: {
+      name: "مهسا نوری",
+      image:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+      role: "مدیر بازاریابی",
+    },
+    background:
+      "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
+  },
+];
+
+interface AuthorProps {
+  image: string;
+  name: string;
+  role: string;
+}
+
+const Author = ({ image, name, role }: AuthorProps) => {
+  return (
+    <div className="flex items-center gap-3">
+      <Avatar className="size-10 rounded-xl bg-background/50">
+        <AvatarImage src={image} alt={name} />
+        <AvatarFallback>{name}</AvatarFallback>
+      </Avatar>
+      <div className="flex flex-col gap-0.5">
+        <div className="text-sm font-medium text-foreground">{name}</div>
+        <div className="text-sm text-muted-foreground">{role}</div>
+      </div>
+    </div>
+  );
+};
+
+interface Testimonial27Props {
+  className?: string;
+}
+
+const Testimonial27 = ({ className }: Testimonial27Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-6">
+        <div className="flex flex-col justify-between gap-6 md:flex-row md:items-end">
+          <div className="flex flex-col gap-4">
+            <h2 className="text-xl font-bold tracking-tight md:text-2xll">
+              مردم چه فکر می‌کنند
+            </h2>
+            <div className="max-w-[28.75rem]">
+              <p className="text-lg text-muted-foreground md:text-xl">
+                گام‌به‌بازار را با مسیریابی هوشمندتر، intent قابل اجرا و
+                زمان‌بندی سریع‌تر متحول کنید.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
+          {TESTIMONIALS.map((testimonial, index) => (
+            <div
+              key={index}
+              className="flex h-full flex-col justify-between gap-8 rounded-2xl bg-muted p-6"
+            >
+              <div className="flex flex-col gap-6">
+                <p className="text-xl leading-relaxed font-medium text-foreground">
+                  {testimonial.quote}
+                </p>
+              </div>
+              <div className="flex items-center justify-between">
+                <Author
+                  image={testimonial.author.image}
+                  role={testimonial.author.role}
+                  name={testimonial.author.name}
+                />
+                <div className="w-24">
+                  <img
+                    className="w-full object-contain object-center opacity-80"
+                    src={testimonial.company.logo}
+                    alt={`لوگوی ${testimonial.company.name}`}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-3">
+          {CASE_STUDIES.map((caseStudy, index) => (
+            <a
+              key={index}
+              href={caseStudy.link}
+              className="group relative flex aspect-square flex-col justify-between gap-8 overflow-hidden rounded-2xl bg-muted p-8 transition-all duration-300 hover:bg-foreground hover:shadow-lg"
+            >
+              <div
+                className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20 transition-all duration-300 group-hover:scale-105 group-hover:opacity-10"
+                style={{ backgroundImage: `url(${caseStudy.background})` }}
+              />
+              <div className="relative flex flex-col gap-3">
+                <div className="text-2xll font-bold tracking-tight text-foreground transition-colors duration-300 group-hover:text-background">
+                  {caseStudy.stats[0].number}
+                </div>
+                <p className="text-sm font-medium text-muted-foreground transition-colors duration-300 group-hover:text-background/80">
+                  {caseStudy.stats[0].text}
+                </p>
+              </div>
+              <div className="relative flex flex-col gap-6">
+                <p className="text-xl leading-tight font-semibold text-foreground transition-colors duration-300 group-hover:text-background">
+                  {caseStudy.title}
+                </p>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial27 };
diff --git a/blocks/testimonial28.tsx b/blocks/testimonial28.tsx
new file mode 100644
index 0000000..41c140e
--- /dev/null
+++ b/blocks/testimonial28.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import * as React from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const Testimonial28 = () => {
+  const testimonials = [
+    {
+      name: "سارا احمدی",
+      content:
+        "این پلتفرم کاملاً نحوه مدیریت پروژه‌های ما را تغییر داد. ابزارها شهودی و قدرتمندند و گردش کار تیم را بی‌سابقه ساده کرده‌اند. دیگر به ابزارهای پراکنده نیاز نداریم.",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    {
+      name: "مازیار رضایی",
+      content:
+        "یکپارچه‌سازی با سیستم‌های موجود بدون دردسر بود. تیم فنی از روز اول تحت تأثیر قرار گرفت و بهره‌وری به‌طور محسوسی افزایش یافت.",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    {
+      name: "امیر محمدی",
+      content:
+        "قابلیت‌های همکاری تیم ما را هم‌راستا نگه می‌دارد. حتی در دورکاری، همه روی یک صفحه هستند و تصمیم‌ها سریع‌تر گرفته می‌شود.",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    {
+      name: "نیلوفر حسینی",
+      content:
+        "داشبورد تحلیل بینش‌های ارزشمندی می‌دهد. تصمیم‌های مبتنی بر داده گرفتن برای ما از قبل هرگز این‌قدر آسان نبوده.",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    {
+      name: "پارسا موسوی",
+      content:
+        "پشتیبانی زبان نوع‌ایمن و مستندات شفاف، تجربه توسعه را لذت‌بخش کرده. خطاها را زودتر می‌گیریم و سریع‌تر تحویل می‌دهیم.",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+    },
+    {
+      name: "رؤیا کاظمی",
+      content:
+        "از منظر طراحی، کامپوننت‌ها با سیستم طراحی ما هم‌خوان‌اند. تحویل به توسعه روان است و کیفیت بصری یکدست مانده.",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-7.webp",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className="bg-background py-32">
+      <div className="container">
+        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground lg:text-2xll">
+          نظرات مشتریان
+        </h1>
+
+        <Carousel className="mx-auto w-full md:max-w-5xl lg:mt-30">
+          <CarouselContent>
+            {testimonials.map((currentTestimonial, index) => (
+              <CarouselItem key={index}>
+                <DashedCard>
+                  <div className="px-5 py-10 lg:p-20">
+                    <div className="flex items-center justify-center gap-3">
+                      <Avatar className="relative size-12 rounded-full">
+                        <AvatarImage
+                          src={currentTestimonial.avatar}
+                          alt={currentTestimonial.name}
+                        />
+                      </Avatar>
+                      <h2 className="text-xl font-bold tracking-tight text-foreground">
+                        {currentTestimonial.name}
+                      </h2>
+                    </div>
+                    <p className="mt-5 text-center text-lg tracking-tight">
+                      {currentTestimonial.content}
+                    </p>
+                  </div>
+                </DashedCard>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="mt-6 flex items-center justify-center gap-3 lg:mt-24">
+            <CarouselPrevious className="relative top-0 left-0 translate-y-0 lg:p-6" />
+            <div className="relative flex h-10 w-[50px] items-center justify-center overflow-hidden lg:w-[200px]">
+              <LineHorizontal className="absolute left-0 clear-both" />
+            </div>
+            <CarouselNext
+              variant="default"
+              className="relative top-0 left-0 translate-y-0 lg:p-6"
+            />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+const LineHorizontal = ({ className = "" }) => (
+  <svg
+    height="1"
+    className={cn("absolute h-1 w-full", className)}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.63721 1.62573H1125.26"
+      stroke="#2C2D30"
+      strokeOpacity="0.1"
+      strokeWidth="1.40102"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeDasharray="5.6 8.41"
+    />
+  </svg>
+);
+
+const LineVertical = ({ className = "" }) => (
+  <svg
+    className={cn("absolute h-full w-1", className)}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.93457 0.886963V910.841"
+      stroke="#2C2D30"
+      strokeOpacity="0.1"
+      strokeWidth="1.40102"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeDasharray="5.6 8.41"
+    />
+  </svg>
+);
+
+const DashedCard = ({ children }: { children: React.ReactNode }) => (
+  <div className="group relative items-center justify-center overflow-hidden p-4">
+    <LineHorizontal className="top-4 left-0" />
+    <LineHorizontal className="bottom-4 left-0" />
+    <LineVertical className="top-0 left-4" />
+    <LineVertical className="top-0 right-4" />
+    <IconSvgs.Plus className="absolute top-1.5 left-1.5" />
+    <IconSvgs.Plus className="absolute top-1.5 right-[7px]" />
+    <IconSvgs.Plus className="absolute bottom-[7px] left-1.5" />
+    <IconSvgs.Plus className="absolute right-[7px] bottom-[7px]" />
+    <div>{children}</div>
+  </div>
+);
+
+const IconSvgs = {
+  SvgBorder1: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      {...props}
+      width="78"
+      height="73"
+      viewBox="0 0 68 67"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M34.0021 5.5111C31.6361 5.5181 27.1901 4.5351 25.3921 3.9141C19.1911 1.7761 9.96914 -0.7129 4.61214 5.7881C0.595138 10.6571 0.538138 15.5941 4.04314 25.5591C4.71314 27.4591 5.59914 31.0741 5.54114 33.5811C5.59514 36.0881 4.71314 39.7031 4.04314 41.6031C0.534138 51.5681 0.595137 56.5051 4.60814 61.3731C9.96914 67.8751 19.1911 65.3861 25.3881 63.2481C27.1861 62.6271 31.6361 61.6451 33.9981 61.6521C36.3641 61.6451 40.8111 62.6271 42.6081 63.2481C48.8101 65.3861 58.0311 67.8751 63.3891 61.3741C67.4051 56.5041 67.4631 51.5681 63.9571 41.6031C63.2871 39.7031 62.4021 36.0881 62.4591 33.5811C62.4011 31.0741 63.2881 27.4591 63.9571 25.5591C67.4671 15.5941 67.4051 10.6611 63.3891 5.7891C58.0281 -0.7129 48.8091 1.7761 42.6091 3.9141C40.8111 4.5351 36.3611 5.5181 33.9991 5.5101H34.0021V5.5111Z"
+        stroke="#2C2D30"
+        strokeOpacity="0.1"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  ),
+  SvgBorder2: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      {...props}
+      width="78"
+      height="73"
+      viewBox="0 0 78 73"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M75.6648 29.841C75.5905 29.4622 75.435 29.104 75.2088 28.791C74.9841 28.4768 74.6942 28.2149 74.3588 28.023L65.6588 23.053C65.2554 22.822 64.9196 22.489 64.6852 22.0875C64.4507 21.686 64.3258 21.23 64.3228 20.765L64.2888 10.972C64.2887 10.5834 64.2038 10.1994 64.0401 9.84692C63.8764 9.49442 63.6377 9.18187 63.3408 8.93105C59.7093 5.84379 55.5254 3.47294 51.0108 1.94405C50.7323 1.85062 50.4406 1.80268 50.1468 1.80205C49.6882 1.79933 49.2366 1.91506 48.8358 2.13805L39.9958 7.07605C39.6003 7.29665 39.1548 7.41221 38.7019 7.41168C38.249 7.41116 37.8038 7.29457 37.4088 7.07305L28.5748 2.11105C28.2467 1.92714 27.8836 1.81429 27.5091 1.77983C27.1346 1.74538 26.757 1.79008 26.4008 1.91105C21.8794 3.42193 17.6863 5.77842 14.0448 8.85505C13.748 9.10691 13.5092 9.41998 13.3447 9.77278C13.1802 10.1256 13.0939 10.5098 13.0918 10.899L13.0478 20.681C13.0458 21.1465 12.921 21.6033 12.6861 22.0051C12.4512 22.407 12.1144 22.7399 11.7098 22.97L3.00483 27.923C2.66872 28.1135 2.37768 28.3742 2.15159 28.6875C1.92551 29.0007 1.76971 29.3591 1.69483 29.7381C0.772786 34.353 0.768369 39.1044 1.68183 43.7211C1.75583 44.1011 1.91183 44.459 2.13783 44.772C2.36283 45.086 2.65283 45.3481 2.98783 45.5391L11.6878 50.5091C12.0917 50.7399 12.4276 51.0729 12.662 51.4747C12.8963 51.8765 13.0208 52.3329 13.0228 52.798L13.0578 62.59C13.058 62.9787 13.1428 63.3627 13.3066 63.7152C13.4703 64.0677 13.7089 64.3802 14.0058 64.6311C17.6352 67.722 21.8192 70.0948 26.3348 71.623C26.6916 71.7424 27.0694 71.7862 27.444 71.7516C27.8186 71.717 28.1819 71.6048 28.5108 71.4221L37.3528 66.484C37.7479 66.2635 38.1929 66.1478 38.6453 66.1478C39.0978 66.1478 39.5427 66.2635 39.9378 66.484L48.7598 71.427C49.0879 71.6111 49.451 71.724 49.8255 71.7585C50.2001 71.7929 50.5777 71.7481 50.9338 71.6271C55.4549 70.1161 59.6477 67.7596 63.2888 64.6831C63.5867 64.4316 63.8263 64.1183 63.991 63.7651C64.1558 63.4118 64.2417 63.0269 64.2428 62.637L64.2868 52.8571C64.2889 52.3916 64.4137 51.9348 64.6486 51.533C64.8835 51.1311 65.2202 50.7982 65.6248 50.5681L74.3288 45.6151C74.6651 45.4247 74.9564 45.164 75.1826 44.8508C75.4089 44.5375 75.5648 44.1791 75.6398 43.8C76.5638 39.19 76.5708 34.443 75.6618 29.83L75.6648 29.841Z"
+        stroke="#2C2D30"
+        strokeOpacity="0.1"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  ),
+  Plus: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      {...props}
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M11.1301 0.868652V22.9502" stroke="black" />
+      <path d="M22.1709 11.9097H0.0893555" stroke="black" />
+    </svg>
+  ),
+};
+
+export { Testimonial28 };
diff --git a/blocks/testimonial29.tsx b/blocks/testimonial29.tsx
new file mode 100644
index 0000000..f4ba32d
--- /dev/null
+++ b/blocks/testimonial29.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import AutoPlay from "embla-carousel-autoplay";
+import React from "react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Testimonial29Props {
+  className?: string;
+}
+
+const Testimonial29 = ({ className }: Testimonial29Props) => {
+  const testimonials = [
+    {
+      name: "امیر محمدی",
+      role: "مدیر خلاقیت @amir_m @ری یو آی_blocks",
+      quote:
+        "«این پلتفرم گردش کار خلاقانه ما را متحول کرد. ابزارها شهودی‌اند و نتیجه‌ها از انتظارمان فراتر بود.»",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-4.webp",
+    },
+    {
+      name: "سارا احمدی",
+      role: "طراح محصول @sara_ahmadi @ری یو آی_design",
+      quote:
+        "«طراحی محصول با این ابزار لذت‌بخش شده. سرعت iterate و همکاری با تیم هرگز این‌قدر روان نبوده.»",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+    {
+      name: "مازیار رضایی",
+      role: "سازنده محصول ارشد @maziar_rezaei @ری یو آی_dev",
+      quote:
+        "«کد تمیز، API واضح و مستندات عالی. تجربه توسعه‌ای که واقعاً لذت می‌بری.»",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-2.webp",
+    },
+    {
+      name: "نیلوفر حسینی",
+      role: "سرپرست رابط کاربری/تجربه کاربری @niloofar_h @ری یو آی_ui",
+      quote:
+        "«رابط کاربری یکدست و زیباست. کاربران فوراً تفاوت کیفیت را احساس کردند.»",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-3.webp",
+    },
+    {
+      name: "کاوه مرادی",
+      role: "مدیر بازاریابی @kaveh_m @ری یو آی_marketing",
+      quote:
+        "«کمپین‌های ما با بینش‌های دقیق‌تر و زمان‌بندی بهتر اجرا می‌شوند. ROI به‌طور محسوسی بهتر شده.»",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-5.webp",
+    },
+    {
+      name: "مهسا نوری",
+      role: "مدیر فناوری @mahsa_nouri @ری یو آی_tech",
+      quote:
+        "«زیرساخت پایدار و مقیاس‌پذیر است. تیم فنی با اطمینان روی رشد تمرکز می‌کند.»",
+      avatar:
+        "/block-media/shadcnblocks/block/avatar-1.webp",
+    },
+  ];
+
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container flex flex-col items-center justify-center">
+        <h1 className="mb-10 text-center text-2xll font-bold tracking-tighter text-foreground">
+          نظرات مشتریان
+        </h1>
+
+        <Carousel
+          className="mx-auto my-20 w-full max-w-3xl"
+          opts={{
+            loop: true,
+          }}
+          plugins={[AutoPlay({ playOnInit: true, delay: 2000 })]}
+          setApi={(api) => {
+            if (api) {
+              api.on("select", () => {
+                setActiveIndex(api.selectedScrollSnap());
+              });
+            }
+          }}
+        >
+          <CarouselContent>
+            {testimonials.map((testimonial, index) => (
+              <CarouselItem key={index} className="flex flex-col items-center">
+                <div className="flex w-full flex-col items-center gap-12">
+                  <div className="relative flex size-30 items-center justify-center rounded-3xl bg-foreground p-2.5 shadow-xl">
+                    <div className="flex size-full items-center justify-center rounded-2xl bg-background p-4">
+                      <Avatar className="size-full">
+                        <AvatarImage
+                          src={testimonial.avatar}
+                          alt={testimonial.name}
+                          className="object-cover"
+                        />
+                        <AvatarFallback>
+                          {testimonial.name.charAt(0)}
+                        </AvatarFallback>
+                      </Avatar>
+                    </div>
+                  </div>
+
+                  <div className="relative space-y-2 text-center">
+                    <h2 className="text-xl font-medium tracking-tighter text-foreground">
+                      {testimonial.name}
+                    </h2>
+                    <p className="text-lg tracking-tight text-muted-foreground/70">
+                      {testimonial.role}
+                    </p>
+                  </div>
+
+                  <Card className="border-none shadow-none">
+                    <CardContent className="p-0">
+                      <p className="text-center text-xl tracking-tight text-foreground md:text-3xl">
+                        {testimonial.quote}
+                      </p>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+
+          <div className="mt-20 flex justify-center">
+            <div className="flex items-center gap-1">
+              {testimonials.map((_, index) => (
+                <div
+                  key={index}
+                  className={`h-1 rounded-full ${
+                    index === activeIndex
+                      ? "w-10 bg-foreground"
+                      : "w-4 bg-muted"
+                  }`}
+                  aria-label={`رفتن به اسلاید ${index + 1}`}
+                />
+              ))}
+            </div>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial29 };
diff --git a/blocks/testimonial3.tsx b/blocks/testimonial3.tsx
new file mode 100644
index 0000000..78667e1
--- /dev/null
+++ b/blocks/testimonial3.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils";
+
+interface Testimonial3Props {
+  className?: string;
+}
+
+const Testimonial3 = ({ className }: Testimonial3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6 border-y py-14 text-center md:py-20">
+          <q className="block max-w-4xl text-xl font-medium lg:text-3xl">
+            با این کامپوننت‌ها سرعت توسعه ما چند برابر شد و کیفیت رابط کاربری
+            به‌طور محسوسی بهتر شد. دیگر وقتمان را صرف ساختن عناصر تکراری نمی‌کنیم.
+          </q>
+          <div className="flex flex-col items-center gap-2 sm:flex-row">
+            <img
+              src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
+              alt="لوگوی ری یو آی"
+              className="h-5 dark:invert"
+            />
+            <p className="font-medium">رضا کریمی، بنیان‌گذار و مدیرعامل</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial3 };
diff --git a/blocks/testimonial30.tsx b/blocks/testimonial30.tsx
new file mode 100644
index 0000000..ef63072
--- /dev/null
+++ b/blocks/testimonial30.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    company: "Descript",
+    logo: "/block-media/shadcnblocks/block/logos/company/icons/descript.svg",
+    wordmark:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
+    author: "سمیه اکبری",
+    role: "مربی بهره‌وری، Descript",
+    avatar:
+      "/block-media/shadcnblocks/block/photos/portraits/Elegant%20Woman%20Portrait.png",
+    quote:
+      "«این محصول روزمرگی من را متحول کرد. مدیریت وظایف شهودی و یادآورها مرا بی‌سابقه منظم نگه می‌دارند.»",
+    outcome: (
+      <p className="text-muted-foreground">
+        تکمیل{" "}
+        <span className="font-medium text-foreground">
+          ۱۲ پروژه بزرگ در ۲ ماه
+        </span>
+      </p>
+    ),
+  },
+  {
+    company: "Ramp",
+    logo: "/block-media/shadcnblocks/block/logos/company/icons/ramp.svg",
+    wordmark:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+    author: "امیرحسین قاسمی",
+    role: "طراح فریلنس، Ramp",
+    avatar:
+      "/block-media/shadcnblocks/block/photos/portraits/joseph-gonzalez-iFgRcqHznqg-unsplash.jpg",
+    quote:
+      "«با این ابزار بالاخره دید واضحی از ددلاین‌ها دارم. همگام‌سازی تقویم برای گردش کارم تحول‌آفرین بود.»",
+    outcome: (
+      <p className="text-muted-foreground">
+        افزایش بهره‌وری{" "}
+        <span className="font-medium text-foreground">۴۰٪ در یک فصل</span>
+      </p>
+    ),
+  },
+  {
+    company: "Watershed",
+    logo: "/block-media/shadcnblocks/block/logos/company/icons/watershed.svg",
+    wordmark:
+      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
+    author: "مهتاب شریفی",
+    role: "مدیر عملیات، Watershed",
+    avatar:
+      "/block-media/shadcnblocks/block/photos/portraits/good-faces-xmSWVeGEnJw-unsplash.jpg",
+    quote:
+      "«قابلیت یادداشت و خلاصه جلسات هر هفته ساعت‌ها برایم ذخیره می‌کند. به‌جای کارهای اداری تکراری روی کار مهم تمرکز می‌کنم.»",
+    outcome: (
+      <p className="text-muted-foreground">
+        بیش از ۳۰ ساعت صرفه‌جویی،{" "}
+        <span className="font-medium text-foreground">
+          کاهش ۶۰٪ زمان اداری
+        </span>
+      </p>
+    ),
+  },
+];
+
+interface Testimonial30Props {
+  className?: string;
+}
+
+const Testimonial30 = ({ className }: Testimonial30Props) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const startTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    timerRef.current = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+      setProgress(0);
+    }, 5000);
+  }, []);
+
+  useEffect(() => {
+    startTimer();
+
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [startTimer]);
+
+  useEffect(() => {
+    const progressInterval = setInterval(() => {
+      setProgress((prevProgress) => {
+        if (prevProgress >= 100) {
+          return 0;
+        }
+        return prevProgress + 2;
+      });
+    }, 100);
+
+    return () => clearInterval(progressInterval);
+  }, [currentIndex]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mb-12 flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
+          <h1 className="text-3xl font-semibold md:text-xl">
+            مورد علاقه علاقه‌مندان بهره‌وری
+          </h1>
+          <Button variant="outline">نظرات کاربران را بخوانید</Button>
+        </div>
+        <Accordion
+          type="single"
+          collapsible
+          value={currentIndex.toString()}
+          onValueChange={(value) => {
+            if (value) {
+              const index = parseInt(value);
+              setCurrentIndex(index);
+              setProgress(0);
+              startTimer();
+            }
+          }}
+        >
+          {testimonials.map((testimonial, index) => (
+            <AccordionItem
+              key={index}
+              value={index.toString()}
+              className="items-center"
+            >
+              <AccordionTrigger className="hover:no-underline">
+                <div className="flex flex-1 items-center gap-4">
+                  <div className="flex max-w-3xs flex-1 items-center gap-4">
+                    <span className="flex size-8 items-center justify-center rounded-lg bg-primary">
+                      <img
+                        src={testimonial.logo}
+                        alt={`لوگوی ${testimonial.company}`}
+                        className="h-4 invert dark:invert-0"
+                      />
+                    </span>
+                    <p className="text-lg font-medium tracking-tight">
+                      {testimonial.company}
+                    </p>
+                  </div>
+                  <div className="hidden text-base font-normal md:block">
+                    {testimonial.outcome}
+                  </div>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="flex flex-col gap-12 px-0 py-4 md:flex-row md:items-center md:py-9 lg:px-12">
+                <img
+                  src={testimonial.avatar}
+                  alt={testimonial.author}
+                  width={208}
+                  height={208}
+                  className="aspect-square max-w-52 rounded-lg object-cover"
+                />
+                <div className="flex flex-1 flex-col items-start">
+                  <img
+                    src={testimonial.wordmark}
+                    alt={`لوگوی ${testimonial.company}`}
+                    className="h-6 dark:invert"
+                  />
+                  <p className="font-hedvigLettersSerif mt-6 max-w-2xl text-xl text-foreground">
+                    {testimonial.quote}
+                  </p>
+                  <div className="flex w-full justify-between">
+                    <div>
+                      <p className="mt-3 text-lg text-sm font-medium">
+                        {testimonial.author}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {testimonial.role}
+                      </p>
+                    </div>
+                    <Progress value={progress} className="h-1 w-16 self-end" />
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial30 };
diff --git a/blocks/testimonial31.tsx b/blocks/testimonial31.tsx
new file mode 100644
index 0000000..056c087
--- /dev/null
+++ b/blocks/testimonial31.tsx
@@ -0,0 +1,146 @@
+import { ArrowLeft } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+interface Testimonial {
+  quote: string;
+  author: string;
+  role: string;
+  company: string;
+  image: string;
+}
+
+interface Testimonial31Props {
+  heading?: string;
+  description?: string;
+  ctaText?: string;
+  ctaHref?: string;
+  testimonials?: Testimonial[];
+  className?: string;
+}
+
+const Testimonial31 = ({
+  heading = "مورد اعتماد سازندگان محصول",
+  description = "بر پایه عادت‌هایی ساخته شده که موفق‌ترین تیم‌های محصول را می‌سازد: تمرکز، سرعت و همیشه تلاش برای کیفیت بالا.",
+  ctaText = "مطالعات موردی مشتریان را بخوانید",
+  ctaHref = "#",
+  testimonials = [
+    {
+      quote: "از این ابزار به‌جای CRM استفاده می‌کنیم و هنوز هم جواب می‌دهد!",
+      author: "نیلوفر حسینی",
+      role: "مدیر محصول",
+      company: "ری یو آی Finance",
+      image:
+        "/block-media/shadcnblocks/block/mainline/testimonials/amy-chase.webp",
+    },
+    {
+      quote: "توانستم ۸۰٪ تیمم را با خودکارسازی جایگزین کنم.",
+      author: "مازیار رضایی",
+      role: "مهندس ارشد",
+      company: "TechCorp",
+      image:
+        "/block-media/shadcnblocks/block/mainline/testimonials/jonas-kotara.webp",
+    },
+    {
+      quote:
+        "مسیر بنیان‌گذاری به‌اندازه کافی سخت است؛ داشتن یک اپ مدیریت محصول عالی کمک بزرگی است.",
+      author: "کاوه مرادی",
+      role: "بنیان‌گذار",
+      company: "StartupXYZ",
+      image:
+        "/block-media/shadcnblocks/block/mainline/testimonials/kevin-yam.webp",
+    },
+    {
+      quote: "می‌توانم از این ابزار به‌جای مدیر محصولم استفاده کنم.",
+      author: "رضا کریمی",
+      role: "بنیان‌گذار",
+      company: "InnovateCo",
+      image:
+        "/block-media/shadcnblocks/block/mainline/testimonials/kundo-marta.webp",
+    },
+  ],
+  className,
+}: Testimonial31Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("overflow-hidden py-28 lg:py-32", className)}
+    >
+      <div className="container">
+        <div className="space-y-4">
+          <h2 className="text-xl tracking-tight md:text-xl lg:text-2xll">
+            {heading}
+          </h2>
+          <p className="max-w-md leading-snug text-muted-foreground">
+            {description}
+          </p>
+          <Button variant="outline" className="shadow-md" asChild>
+            <a href={ctaHref}>
+              {ctaText} <ArrowLeft className="size-4" />
+            </a>
+          </Button>
+        </div>
+
+        <div className="relative mt-8 -mr-[max(3rem,calc((100vw-80rem)/2+3rem))] md:mt-12 lg:mt-20">
+          <Carousel
+            opts={{
+              align: "start",
+              loop: true,
+            }}
+            className="w-full"
+          >
+            <CarouselContent>
+              {testimonials.map((testimonial, index) => (
+                <CarouselItem
+                  key={index}
+                  className="basis-4/5 sm:basis-3/5 md:basis-2/5 lg:basis-[28%] xl:basis-[28%] 2xl:basis-1/4"
+                >
+                  <Card className="h-full overflow-hidden border-none bg-muted !pt-0">
+                    <CardContent className="flex h-full flex-col p-0">
+                      <div className="relative h-[288px] lg:h-[328px]">
+                        <img
+                          src={testimonial.image}
+                          alt={testimonial.author}
+                          className="absolute inset-0 size-full object-cover object-top"
+                        />
+                      </div>
+                      <div className="flex flex-1 flex-col justify-between gap-10 p-6">
+                        <blockquote className="text-lg leading-tight font-medium md:text-xl lg:text-xl">
+                          {testimonial.quote}
+                        </blockquote>
+                        <div className="space-y-0.5">
+                          <div className="font-semibold text-primary">
+                            {testimonial.author}، {testimonial.role}
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {testimonial.company}
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <div className="mt-8 flex gap-3">
+              <CarouselPrevious className="static size-14 translate-x-0 translate-y-0 bg-muted transition-colors hover:bg-muted/80 [&>svg]:size-6 lg:[&>svg]:size-8" />
+              <CarouselNext className="static size-14 translate-x-0 translate-y-0 bg-muted transition-colors hover:bg-muted/80 [&>svg]:size-6 lg:[&>svg]:size-8" />
+            </div>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial31 };
diff --git a/blocks/testimonial4.tsx b/blocks/testimonial4.tsx
new file mode 100644
index 0000000..7fa9880
--- /dev/null
+++ b/blocks/testimonial4.tsx
@@ -0,0 +1,107 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Testimonial4Props {
+  className?: string;
+}
+
+const Testimonial4 = ({ className }: Testimonial4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col gap-6">
+          <div className="grid grid-cols-1 items-stretch gap-x-0 gap-y-4 lg:grid-cols-3 lg:gap-4">
+            <img
+              src="/block-media/shadcnblocks/block/placeholder-1.svg"
+              alt="تصویر مشتری"
+              className="h-72 w-full rounded-md object-cover lg:h-auto"
+            />
+            <Card className="col-span-2 flex items-center justify-center p-6">
+              <div className="flex flex-col gap-4">
+                <q className="text-xl font-medium lg:text-3xl">
+                  این کتابخانه کامپوننت نحوه ساخت محصولات ما را تغییر داد. تیم
+                  ما در زمان کوتاه‌تری رابط‌هایی با کیفیت بالاتر تحویل می‌دهد.
+                </q>
+                <div className="flex flex-col items-start">
+                  <p>سارا احمدی</p>
+                  <p className="text-muted-foreground">مدیرعامل، شرکت نوآوران</p>
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+            <Card>
+              <CardContent className="px-6 pt-6 leading-7 text-foreground/70">
+                <q>
+                  پشتیبانی زبان نوع‌ایمن و مستندات شفاف، تجربه توسعه را برای ما
+                  لذت‌بخش کرده است.
+                </q>
+              </CardContent>
+              <CardFooter>
+                <div className="flex gap-4 leading-5">
+                  <Avatar className="size-9 rounded-full ring-1 ring-input">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-2.webp"
+                      alt="پارسا موسوی"
+                    />
+                  </Avatar>
+                  <div className="text-sm">
+                    <p className="font-medium">پارسا موسوی</p>
+                    <p className="text-muted-foreground">توسعه‌دهنده فول‌استک</p>
+                  </div>
+                </div>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardContent className="px-6 pt-6 leading-7 text-foreground/70">
+                <q>
+                  طرح‌های ما دقیقاً با کامپوننت‌ها هم‌خوان است و تحویل به توسعه
+                  هرگز این‌قدر روان نبوده.
+                </q>
+              </CardContent>
+              <CardFooter>
+                <div className="flex gap-4 leading-5">
+                  <Avatar className="size-9 rounded-full ring-1 ring-input">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-3.webp"
+                      alt="رؤیا کاظمی"
+                    />
+                  </Avatar>
+                  <div className="text-sm">
+                    <p className="font-medium">رؤیا کاظمی</p>
+                    <p className="text-muted-foreground">طراح ارشد</p>
+                  </div>
+                </div>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardContent className="px-6 pt-6 leading-7 text-foreground/70">
+                <q>
+                  پشتیبانی راست‌به‌چپ و حالت تاریک از پیش آماده است و این برای ما در
+                  بازار ایران حیاتی بود.
+                </q>
+              </CardContent>
+              <CardFooter>
+                <div className="flex gap-4 leading-5">
+                  <Avatar className="size-9 rounded-full ring-1 ring-input">
+                    <AvatarImage
+                      src="/block-media/shadcnblocks/block/avatar-3.webp"
+                      alt="مهسا نوری"
+                    />
+                  </Avatar>
+                  <div className="text-sm">
+                    <p className="font-medium">مهسا نوری</p>
+                    <p className="text-muted-foreground">مهندس تجربه کاربری</p>
+                  </div>
+                </div>
+              </CardFooter>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial4 };
diff --git a/blocks/testimonial6.tsx b/blocks/testimonial6.tsx
new file mode 100644
index 0000000..52b4b82
--- /dev/null
+++ b/blocks/testimonial6.tsx
@@ -0,0 +1,116 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    name: "سارا احمدی",
+    role: "مدیرعامل و بنیان‌گذار",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "این کتابخانه کیفیت محصولات ما را متحول کرد. تیم ما با اطمینان بیشتری سریع‌تر تحویل می‌دهد و دیگر نگران جزئیات رابط کاربری نیستیم.",
+  },
+  {
+    name: "مازیار رضایی",
+    role: "مدیر فناوری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    content:
+      "معماری کامپوننت‌ها تمیز و قابل نگهداری است. یکپارچه‌سازی با پروژه موجود بدون دردسر انجام شد و تیم فنی از روز اول راضی بود.",
+  },
+  {
+    name: "نیلوفر حسینی",
+    role: "مدیر محصول",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content:
+      "سرعت iterate کردن روی ایده‌ها چند برابر شد. محصول را زودتر به دست کاربران می‌رسانیم و بازخورد را سریع‌تر اعمال می‌کنیم.",
+  },
+  {
+    name: "امیر محمدی",
+    role: "سرپرست فنی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    content:
+      "بسیاری از موارد خاص از پیش پوشش داده شده‌اند. تیم من دیگر وقتش را صرف رفع باگ‌های تکراری رابط کاربری نمی‌کند.",
+  },
+  {
+    name: "رؤیا کاظمی",
+    role: "طراح",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content:
+      "فاصله‌گذاری، تایپوگرافی و رنگ‌ها با سیستم طراحی ما هم‌خوان است. تحویل به توسعه بدون اصطکاک انجام می‌شود.",
+  },
+  {
+    name: "پارسا موسوی",
+    role: "توسعه‌دهنده",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    content:
+      "تجربه توسعه عالی است. تکمیل خودکار درست کار می‌کند، propها معنادارند و رفتار کامپوننت‌ها قابل پیش‌بینی است.",
+  },
+];
+
+interface Testimonial6Props {
+  className?: string;
+}
+
+const Testimonial6 = ({ className }: Testimonial6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <Carousel className="w-full">
+          <div className="mb-8 flex justify-between px-1 lg:mb-12">
+            <h2 className="text-xl font-semibold lg:text-2xll">
+              چرا مشتریان ما را دوست دارند
+            </h2>
+            <div className="flex items-center gap-2">
+              <CarouselPrevious className="static translate-y-0" />
+              <CarouselNext className="static translate-y-0" />
+            </div>
+          </div>
+          <CarouselContent>
+            {testimonials.map((testimonial, idx) => (
+              <CarouselItem
+                key={idx}
+                className="basis-full md:basis-1/2 lg:basis-1/3"
+              >
+                <div className="h-full p-1">
+                  <div className="flex h-full flex-col justify-between rounded-lg border p-6">
+                    <q className="leading-7 text-foreground/70">
+                      {testimonial.content}
+                    </q>
+                    <div className="mt-6 flex gap-4 leading-5">
+                      <Avatar className="size-9 rounded-full ring-1 ring-input">
+                        <AvatarImage
+                          src={testimonial.avatar}
+                          alt={testimonial.name}
+                        />
+                      </Avatar>
+                      <div className="text-sm">
+                        <p className="font-medium">{testimonial.name}</p>
+                        <p className="text-muted-foreground">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial6 };
diff --git a/blocks/testimonial7.tsx b/blocks/testimonial7.tsx
new file mode 100644
index 0000000..b2e683a
--- /dev/null
+++ b/blocks/testimonial7.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import AutoScroll from "embla-carousel-auto-scroll";
+import { useRef } from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { cn } from "@/lib/utils";
+
+const testimonials1 = [
+  {
+    name: "سارا احمدی",
+    role: "مدیرعامل و بنیان‌گذار",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+    content:
+      "این کتابخانه کامپوننت روش ساخت محصولات ما را متحول کرد. کل داشبورد را در نصف زمان معمول تحویل دادیم.",
+  },
+  {
+    name: "مازیار رضایی",
+    role: "مدیر فناوری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar5.webp",
+    content:
+      "توجه به دسترس‌پذیری و عملکرد قابل تحسین است. امتیاز ابزار تحلیل عملکرد ما به‌طور محسوسی بهبود یافت.",
+  },
+  {
+    name: "نیلوفر حسینی",
+    role: "مدیر محصول",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.webp",
+    content:
+      "بالاخره یک سیستم طراحی که توسعه‌دهندگان واقعاً دوست دارند. مستندات روشن و مقادیر پیش‌فرض منطقی‌اند.",
+  },
+  {
+    name: "امیر محمدی",
+    role: "سرپرست فنی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
+    content:
+      "تعادل عالی بین پیش‌فرض‌های مشخص و انعطاف سفارشی‌سازی برقرار می‌کند.",
+  },
+  {
+    name: "رؤیا کاظمی",
+    role: "طراح ارشد",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
+    content:
+      "کامپوننت‌ها با طرح‌های طراحی رابط ما هم‌خوان‌اند. تحویل از طراحی به توسعه هرگز این‌قدر روان نبوده.",
+  },
+  {
+    name: "پارسا موسوی",
+    role: "توسعه‌دهنده فول‌استک",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
+    content:
+      "پشتیبانی زبان نوع‌ایمن عالی است. تکمیل خودکار درست کار می‌کند و خطاها را پیش از رسیدن به محیط تولید می‌گیرم.",
+  },
+];
+
+const testimonials2 = [
+  {
+    name: "مهسا نوری",
+    role: "مهندس تجربه کاربری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
+    content:
+      "این کامپوننت‌ها موارد خاصی را پوشش می‌دهند که از وجودشان بی‌خبر بودم. حالت تاریک و راست‌به‌چپ از پیش آماده‌اند.",
+  },
+  {
+    name: "علی رحمانی",
+    role: "مدیر مهندسی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar7.webp",
+    content:
+      "سرعت تیم ما به‌طور محسوسی افزایش یافت. زمان کمتر برای رابط کاربری یعنی زمان بیشتر برای منطق کسب‌وکار.",
+  },
+  {
+    name: "امیرحسین قاسمی",
+    role: "توسعه‌دهنده فرانت‌اند",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
+    content:
+      "سفارشی‌سازی کامپوننت‌ها بدون جنگ با کتابخانه آسان است. ترکیب‌پذیری عالی دارند.",
+  },
+  {
+    name: "مهتاب شریفی",
+    role: "طراح محصول",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
+    content:
+      "یکنواختی بصری در همه کامپوننت‌ها قابل توجه است. اپلیکیشن ما بالاخره یکدست به نظر می‌رسد.",
+  },
+  {
+    name: "کاوه مرادی",
+    role: "بنیان‌گذار استارتاپ",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
+    content:
+      "با این کامپوننت‌ها نسخه اولیه محصول را در زمان رکورد راه‌اندازی کردیم. ماه‌ها از زمان توسعه صرفه‌جویی شد.",
+  },
+  {
+    name: "سمیرا جعفری",
+    role: "مهندس DevOps",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar2.webp",
+    content:
+      "حتی از منظر زیرساخت، حجم بسته معقول است و عملکرد پایدار است.",
+  },
+];
+
+interface Testimonial7Props {
+  className?: string;
+}
+
+const Testimonial7 = ({ className }: Testimonial7Props) => {
+  const plugin1 = useRef(
+    AutoScroll({
+      startDelay: 500,
+      speed: 0.7,
+    }),
+  );
+
+  const plugin2 = useRef(
+    AutoScroll({
+      startDelay: 500,
+      speed: 0.7,
+      direction: "backward",
+    }),
+  );
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col items-center gap-6">
+        <Badge variant="outline">نظرات مشتریان</Badge>
+        <h2 className="text-center text-3xl lg:text-2xll">
+          با مشتریان راضی ما آشنا شوید
+        </h2>
+        <p className="text-center text-muted-foreground lg:text-lg">
+          تجربه تیم‌هایی را بخوانید که با کامپوننت‌های ما گردش کار خود را
+          متحول کرده‌اند.
+        </p>
+      </div>
+      <div className="lg:container">
+        <div className="mt-16 space-y-6 [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent)]">
+          <Carousel
+            opts={{
+              loop: true,
+            }}
+            plugins={[plugin1.current]}
+            onMouseLeave={() => plugin1.current.play()}
+          >
+            <CarouselContent className="-ml-4">
+              {testimonials1.map((testimonial, index) => (
+                <CarouselItem key={index} className="basis-auto py-px pl-4">
+                  <Card className="max-w-96 gap-2 p-6 select-none">
+                    <div className="mb-4 flex gap-4">
+                      <Avatar className="size-9 rounded-full ring-1 ring-input">
+                        <AvatarImage
+                          src={testimonial.avatar}
+                          alt={testimonial.name}
+                        />
+                      </Avatar>
+                      <div className="text-sm">
+                        <p className="font-medium">{testimonial.name}</p>
+                        <p className="text-muted-foreground">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+                    <q className="text-muted-foreground">
+                      {testimonial.content}
+                    </q>
+                  </Card>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <Carousel
+            opts={{
+              loop: true,
+            }}
+            plugins={[plugin2.current]}
+            onMouseLeave={() => plugin2.current.play()}
+          >
+            <CarouselContent className="-ml-4">
+              {testimonials2.map((testimonial, index) => (
+                <CarouselItem key={index} className="basis-auto py-px pl-4">
+                  <Card className="max-w-96 p-6 select-none">
+                    <div className="mb-4 flex gap-4">
+                      <Avatar className="size-9 rounded-full ring-1 ring-input">
+                        <AvatarImage
+                          src={testimonial.avatar}
+                          alt={testimonial.name}
+                        />
+                      </Avatar>
+                      <div className="text-sm">
+                        <p className="font-medium">{testimonial.name}</p>
+                        <p className="text-muted-foreground">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+                    <q className="text-muted-foreground">
+                      {testimonial.content}
+                    </q>
+                  </Card>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial7 };
diff --git a/blocks/testimonial8.tsx b/blocks/testimonial8.tsx
new file mode 100644
index 0000000..c099135
--- /dev/null
+++ b/blocks/testimonial8.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const defaultTestimonials = [
+  {
+    name: "سارا احمدی",
+    role: "مدیرعامل و بنیان‌گذار",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "این پلتفرم کاملاً نحوه مدیریت پروژه‌های ما را تغییر داد. رابط کاربری شهودی و قابلیت‌های قدرتمند، بهره‌وری تیم ما را ۴۰٪ افزایش داد. بدون آن نمی‌توانم کسب‌وکارمان را اداره کنم. پشتیبانی مشتریان عالی است و به‌روزرسانی‌های منظم ما را جلوتر از رقبا نگه می‌دارد.",
+  },
+  {
+    name: "مازیار رضایی",
+    role: "مدیر فناوری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    content:
+      "قابلیت‌های یکپارچه‌سازی فوق‌العاده است. همه ابزارهای موجود را بدون درز به هم متصل کردیم و همکاری بلادرنگ، گردش کار توسعه ما را متحول کرد.",
+  },
+  {
+    name: "نیلوفر حسینی",
+    role: "مدیر محصول",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content:
+      "به‌عنوان مدیر محصول، به ابزاری نیاز دارم که نظم و ارتباط مؤثر با تیم را ممکن کند. این پلتفرم با مدیریت جامع پروژه، داشبوردهای گزارش‌دهی شفاف و ابزارهای همکاری یکپارچه، هر دو را فراهم می‌کند. ردیابی پیشرفت در لحظه برای برنامه‌ریزی اسپرینت و به‌روزرسانی ذینفعان برای ما بسیار ارزشمند بوده است.",
+  },
+  {
+    name: "امیر محمدی",
+    role: "مدیر عملیات",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    content:
+      "قابلیت‌های تحلیل و گزارش‌دهی دید بی‌سابقه‌ای به عملیات ما داده است. اکنون با اطمینان تصمیم‌های مبتنی بر داده می‌گیریم و کارایی در همه بخش‌ها به‌طور چشمگیری بهبود یافته. داشبوردهای سفارشی و گزارش‌های خودکار هر هفته ساعت‌ها وقت ما را ذخیره می‌کند.",
+  },
+  {
+    name: "سمیه اکبری",
+    role: "سرپرست فنی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content:
+      "تجربه توسعه استثنایی. اتصال هوشمند مستندسازی شده و SDKها پایدار و قابل اعتمادند.",
+  },
+  {
+    name: "مهتاب شریفی",
+    role: "طراح",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "سیستم طراحی و کتابخانه کامپوننت، فرایند طراحی ما را ساده کرد. اکنون رابط‌های یکدست و زیبا را بسیار سریع‌تر می‌سازیم و همکاری بین طراحی و توسعه هرگز این‌قدر روان نبوده. کنترل نسخه برای دارایی‌های طراحی و فرایند تحویل بدون اصطکاک، تکرارهای بی‌پایان رفت و برگشت را حذف کرده است.",
+  },
+  {
+    name: "پارسا موسوی",
+    role: "توسعه‌دهنده",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    content:
+      "کیفیت کد و عملکرد در سطح بالایی است. پلتفرم مقیاس ما را بدون مشکل پوشش می‌دهد و ابزارهای توسعه، دیباگ و بهینه‌سازی را آسان کرده‌اند. برای تیم توسعه ما تحول‌آفرین بوده. مستندات جامع و پشتیبانی فعال جامعه، راه‌اندازی اولیه توسعه‌دهندگان جدید را بسیار روان کرده است.",
+  },
+  {
+    name: "فاطمه رستمی",
+    role: "مدیر بازاریابی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content:
+      "اتوماسیون بازاریابی تحول‌آفرین بود. نرخ تعامل ما ۶۰٪ افزایش یافت و بازگشت سرمایه به‌طور محسوسی بهتر شد. بینش‌های پلتفرم درک ما از مخاطب را عمیق‌تر کرده است.",
+  },
+];
+
+interface Testimonial8Props {
+  testimonials?: Array<{
+    name: string;
+    role: string;
+    avatar: string;
+    content: string;
+  }>;
+  className?: string;
+}
+
+const Testimonial8 = ({
+  testimonials = defaultTestimonials,
+  className,
+}: Testimonial8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-4">
+          <h2 className="text-center text-3xl font-semibold lg:text-2xll">
+            مشتریان ما چه می‌گویند
+          </h2>
+          <p className="text-muted-foreground lg:text-xl">
+            ببینید مشتریان ما چگونه با محصولات ما کسب‌وکارشان را می‌سازند
+          </p>
+        </div>
+        <div className="relative mt-14 w-full after:absolute after:inset-x-0 after:-bottom-2 after:h-96 after:bg-linear-to-t after:from-background">
+          <div
+            className="columns-1 gap-5 md:columns-2 lg:columns-3"
+            style={{ columnGap: "20px" }}
+          >
+            {testimonials.map((testimonial, idx) => {
+              // Reorder for masonry flow: distribute across columns first
+              const displayIdx = (idx % 3) * 3 + Math.floor(idx / 3);
+
+              return (
+                <div
+                  key={idx}
+                  className={cn(
+                    "mb-5",
+                    displayIdx > 3 && displayIdx <= 5 && "hidden md:block",
+                    displayIdx > 5 && "hidden lg:block",
+                  )}
+                >
+                  <Card className="break-inside-avoid p-5">
+                    <div className="flex gap-4 leading-5">
+                      <Avatar className="size-10 rounded-full ring-1 ring-input">
+                        <AvatarImage
+                          src={testimonial.avatar}
+                          alt={testimonial.name}
+                        />
+                      </Avatar>
+                      <div className="mb-2 text-sm">
+                        <p className="font-semibold text-foreground">
+                          {testimonial.name}
+                        </p>
+                        <p className="text-muted-foreground">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="leading-7 text-foreground/60">
+                      <q>{testimonial.content}</q>
+                    </div>
+                  </Card>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial8 };
diff --git a/blocks/testimonial9.tsx b/blocks/testimonial9.tsx
new file mode 100644
index 0000000..cbd0282
--- /dev/null
+++ b/blocks/testimonial9.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    name: "سارا احمدی",
+    role: "مدیرعامل و بنیان‌گذار",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-1.webp",
+    content:
+      "این کتابخانه کیفیت محصولات ما را متحول کرد. تیم ما با اطمینان بیشتری سریع‌تر تحویل می‌دهد و دیگر نگران جزئیات رابط کاربری نیستیم. پیشنهاد می‌کنم هر تیم محصولی آن را امتحان کند.",
+    link: "#",
+    icon: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+  {
+    name: "مازیار رضایی",
+    role: "مدیر فناوری",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-2.webp",
+    content:
+      "معماری کامپوننت‌ها تمیز و قابل نگهداری است. یکپارچه‌سازی با پروژه موجود بدون دردسر انجام شد و تیم فنی از روز اول راضی بود.",
+    link: "#",
+    icon: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
+  },
+  {
+    name: "نیلوفر حسینی",
+    role: "مدیر عملیات",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-3.webp",
+    content:
+      "سرعت iterate کردن روی ایده‌ها چند برابر شد. محصول را زودتر به دست کاربران می‌رسانیم و بازخورد را سریع‌تر اعمال می‌کنیم. این برای تیم ما تحول‌آفرین بوده است.",
+    link: "#",
+    icon: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
+  },
+  {
+    name: "امیر محمدی",
+    role: "سرپرست فنی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-4.webp",
+    content:
+      "بسیاری از موارد خاص از پیش پوشش داده شده‌اند. تیم من دیگر وقتش را صرف رفع باگ‌های تکراری رابط کاربری نمی‌کند و روی چیزهای مهم‌تر تمرکز دارد.",
+    link: "#",
+    icon: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
+  },
+  {
+    name: "رؤیا کاظمی",
+    role: "طراح",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-7.webp",
+    content:
+      "فاصله‌گذاری، تایپوگرافی و رنگ‌ها با سیستم طراحی ما هم‌خوان است. تحویل به توسعه بدون اصطکاک انجام می‌شود و همکاری بین طراحی و توسعه هرگز این‌قدر روان نبوده.",
+    link: "#",
+    icon: "/block-media/shadcnblocks/block/logos/producthunt-icon.svg",
+  },
+  {
+    name: "پارسا موسوی",
+    role: "توسعه‌دهنده",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar-6.webp",
+    content:
+      "تجربه توسعه عالی است. تکمیل خودکار درست کار می‌کند، propها معنادارند و رفتار کامپوننت‌ها قابل پیش‌بینی است. برای هر تیم توسعه‌ای توصیه می‌کنم.",
+    link: "#",
+    icon: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
+  },
+];
+
+interface Testimonial9Props {
+  className?: string;
+}
+
+const Testimonial9 = ({ className }: Testimonial9Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6">
+          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
+            مورد اعتماد بیش از ۱۰۰۰ مشتری
+          </h2>
+          <p className="text-muted-foreground lg:text-lg">
+            مشتریان راضی در سراسر دنیا از محصولات ما استفاده می‌کنند
+          </p>
+        </div>
+        <div className="mt-14 w-full">
+          <ResponsiveMasonry
+            columnsCountBreakPoints={{ 350: 1, 768: 2, 1024: 3 }}
+          >
+            <Masonry gutter="20px" columnsCount={3}>
+              {testimonials.map((testimonial, idx) => {
+                return (
+                  <Card key={idx} className="p-5">
+                    <div className="flex justify-between">
+                      <div className="flex gap-4 leading-5">
+                        <Avatar className="size-9 rounded-full ring-1 ring-input">
+                          <AvatarImage
+                            src={testimonial.avatar}
+                            alt={testimonial.name}
+                          />
+                        </Avatar>
+                        <div className="text-sm">
+                          <p className="font-medium">{testimonial.name}</p>
+                          <p className="text-muted-foreground">
+                            {testimonial.role}
+                          </p>
+                        </div>
+                      </div>
+                      <a href={testimonial.link}>
+                        <img
+                          alt="منبع نظر"
+                          src={testimonial.icon}
+                          className="size-4"
+                        />
+                      </a>
+                    </div>
+                    <div className="mt-8 leading-7 text-foreground/70">
+                      <q>{testimonial.content}</q>
+                    </div>
+                  </Card>
+                );
+              })}
+            </Masonry>
+          </ResponsiveMasonry>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Testimonial9 };
diff --git a/blocks/timeline1.tsx b/blocks/timeline1.tsx
new file mode 100644
index 0000000..c98088b
--- /dev/null
+++ b/blocks/timeline1.tsx
@@ -0,0 +1,72 @@
+import { CircleArrowOutUpRight, Files, Layout } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface Timeline1Props {
+  className?: string;
+}
+
+const Timeline1 = ({ className }: Timeline1Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex flex-col items-center justify-center text-center sm:max-w-xl">
+          <div className="flex flex-col items-center">
+            <span className="flex size-24 items-center justify-center rounded-full border-2 border-foreground">
+              <Files className="size-8" strokeWidth={2} />
+            </span>
+            <h2 className="my-2 text-3xl font-medium">یکپارچه‌سازی داده</h2>
+            <p className="text-muted-foreground">
+              ابزارها و پلتفرم‌های فعلی خود را بدون دردسر به هم وصل کنید. سیستم
+              ما داده‌های شما را در تمام سرویس‌های متصل به‌صورت خودکار
+              همگام‌سازی و مدیریت می‌کند.
+            </p>
+          </div>
+          <span
+            className="my-3 h-36 w-[2px]"
+            style={{
+              backgroundImage:
+                "linear-gradient(to bottom, #000 10%, rgba(255, 255, 255, 0) 0%)",
+              backgroundPosition: "left",
+              backgroundSize: "3px 15px",
+              backgroundRepeat: "repeat-y",
+            }}
+          ></span>
+          <div className="flex flex-col items-center">
+            <span className="flex size-24 items-center justify-center rounded-full border-2 border-foreground">
+              <Layout className="size-8" strokeWidth={2} />
+            </span>
+            <h2 className="my-2 text-3xl font-medium">پیکربندی سفارشی</h2>
+            <p className="text-muted-foreground">
+              پلتفرم را با رابط شهودی ما مطابق نیازهای خود شخصی‌سازی کنید.
+              گردش‌کارهای قدرتمند بسازید  بدون نیاز به دانش فنی.
+            </p>
+          </div>
+          <span
+            className="my-3 h-36 w-[2px]"
+            style={{
+              backgroundImage:
+                "linear-gradient(to bottom, #000 10%, rgba(255, 255, 255, 0) 0%)",
+              backgroundPosition: "left",
+              backgroundSize: "3px 15px",
+              backgroundRepeat: "repeat-y",
+            }}
+          ></span>
+          <div className="flex flex-col items-center">
+            <span className="flex size-24 items-center justify-center rounded-full border-2 border-foreground">
+              <CircleArrowOutUpRight className="size-8" strokeWidth={2} />
+            </span>
+            <h2 className="my-2 text-3xl font-medium">توسعه کسب‌وکار</h2>
+            <p className="text-muted-foreground">
+              به تحلیل‌ها و ابزارهای جامعی دسترسی داشته باشید که برای رشد شما
+              طراحی شده‌اند. عملکرد را پایش کنید و بدون دردسر تصمیم‌های مبتنی
+              بر داده بگیرید.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline1 };
diff --git a/blocks/timeline10.tsx b/blocks/timeline10.tsx
new file mode 100644
index 0000000..4593875
--- /dev/null
+++ b/blocks/timeline10.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Timeline10Props {
+  className?: string;
+}
+
+const Timeline10 = ({ className }: Timeline10Props) => {
+  const currentPhase = 2;
+
+  const timelinePhases = [
+    {
+      id: 0,
+      date: "۲۵ دی ۱۴۲",
+      title: "فاز اول",
+      description:
+        "جمع‌آوری داده اولیه و طراحی معماری مدل برای سیستم هوش مصنوعی.",
+    },
+    {
+      id: 1,
+      date: "۱۰ فروردین ۱۴۰۳",
+      title: "فاز دوم",
+      description:
+        "آموزش و اعتبارسنجی مدل با پیاده‌سازی مجموعه داده اصلی.",
+    },
+    {
+      id: 2,
+      date: "۲۵ خرداد ۱۴۰۳",
+      title: "فاز سوم",
+      description:
+        "یکپارچه‌سازی قابلیت‌های پیشرفته و بهینه‌سازی عملکرد.",
+    },
+    {
+      id: 3,
+      date: "۱۱ شهریور ۱۴۰۳",
+      title: "فاز چهارم",
+      description:
+        "آزمایش نهایی، استقرار و راه‌اندازی سیستم بهبود مستمر.",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container flex flex-col items-center">
+        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-2xll">
+          خط زمانی
+        </h1>
+        <Card className="relative w-full border-none shadow-none md:py-16">
+          <CardContent className="p-0">
+            <div className="relative flex flex-col items-center md:mt-12">
+              <Separator className="absolute -top-8 start-0 hidden md:block" />
+              {currentPhase && (
+                <motion.div
+                  initial={{ width: 0 }}
+                  whileInView={{
+                    width: `${(currentPhase / timelinePhases.length) * 104}%`,
+                  }}
+                  transition={{ ease: "easeOut", duration: 0.5 }}
+                  className={cn(
+                    "absolute -top-[32px] start-0 hidden h-0.5 bg-foreground md:block",
+                  )}
+                />
+              )}
+
+              <div className="grid gap-6 md:grid-cols-4">
+                {timelinePhases.map((phase, index) => (
+                  <div key={phase.id} className="relative space-y-2">
+                    <Separator
+                      orientation="vertical"
+                      className="absolute top-6 start-0 block md:hidden"
+                    />
+                    {index == 0 && (
+                      <motion.div
+                        initial={{ height: 0 }}
+                        whileInView={{
+                          height: currentPhase * 112,
+                        }}
+                        transition={{ ease: "easeOut", duration: 0.5 }}
+                        className={cn(
+                          "absolute start-0 z-10 w-0.5 bg-foreground md:hidden",
+                        )}
+                      />
+                    )}
+                    <div className="absolute top-0 -start-[9px] z-10 mb-5 flex size-5 items-center justify-center rounded-full bg-foreground p-1 md:-top-10 md:start-0">
+                      <div className="size-full rounded-full bg-background" />
+                    </div>
+
+                    <div className="ps-7 text-start md:ps-0">
+                      <p className="text-sm text-muted-foreground">
+                        {phase.date}
+                      </p>
+                      <h2 className="text-xl font-bold tracking-tighter text-foreground">
+                        {phase.title}
+                      </h2>
+                      <p className="text-sm text-muted-foreground">
+                        {phase.description}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline10 };
diff --git a/blocks/timeline11.tsx b/blocks/timeline11.tsx
new file mode 100644
index 0000000..fe67146
--- /dev/null
+++ b/blocks/timeline11.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Cpu, FlagIcon, LocateFixed, RocketIcon } from "lucide-react";
+import React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface Timeline11Props {
+  className?: string;
+}
+
+const Timeline11 = ({ className }: Timeline11Props) => {
+  const currentPhase = 2;
+  const timelinePhases = [
+    {
+      id: 0,
+      date: "۲۵ دی ۱۴۲",
+      title: "فاز اول",
+      description: "آغاز مقدمات پروژه و برنامه‌ریزی استراتژیک.",
+      icon: RocketIcon,
+    },
+    {
+      id: 1,
+      date: "۲۰ اسفند ۱۴۲",
+      title: "فاز دوم",
+      description: "مرحله پژوهش تفصیلی و توسعه اولیه.",
+      icon: Cpu,
+    },
+    {
+      id: 2,
+      date: "۱۶ خرداد ۱۴۰۳",
+      title: "فاز سوم",
+      description: "پیاده‌سازی هسته و دستیابی به نقاط عطف کلیدی.",
+      icon: LocateFixed,
+    },
+    {
+      id: 3,
+      date: "۳۰ شهریور ۱۴۰۳",
+      title: "فاز چهارم",
+      description: "اصلاحات نهایی و تکمیل پروژه.",
+      icon: FlagIcon,
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container flex flex-col items-center justify-center">
+        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-2xll">
+          خط زمانی
+        </h1>
+        <Card className="relative w-full border-none shadow-none md:py-16">
+          <CardContent className="relative flex flex-col items-center p-0 md:mt-12">
+            <Separator className="absolute -top-8 start-0 hidden md:block" />
+            {currentPhase && (
+              <motion.div
+                initial={{ width: 0 }}
+                whileInView={{
+                  width: `${(currentPhase / timelinePhases.length) * 104}%`,
+                }}
+                transition={{ ease: "easeOut", duration: 0.5 }}
+                className={cn(
+                  "absolute -top-[33px] start-0 hidden h-0.5 bg-foreground md:block",
+                )}
+              />
+            )}
+            <div className="grid gap-6 md:grid-cols-4">
+              {timelinePhases.map((phase, index) => {
+                const PhaseIcon = phase.icon;
+                return (
+                  <div key={phase.id} className="relative space-y-2">
+                    <Separator
+                      orientation="vertical"
+                      className="absolute top-6 start-2.5 block md:hidden"
+                    />
+                    {index == 0 && (
+                      <motion.div
+                        initial={{ height: 0 }}
+                        whileInView={{
+                          height: currentPhase * 125,
+                        }}
+                        transition={{ ease: "easeOut", duration: 0.5 }}
+                        className={cn(
+                          "absolute top-22 start-2.5 z-10 w-0.5 bg-foreground md:hidden",
+                        )}
+                      />
+                    )}
+                    <div className="absolute top-4 -start-6 z-10 mb-5 flex size-18 items-center justify-center rounded-full bg-background p-1 md:-top-17 md:-start-4">
+                      <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
+                        <div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
+                          <PhaseIcon size={16} />
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="ps-13 text-start md:ps-0">
+                      <p className="mt-10 text-sm text-muted-foreground">
+                        {phase.date}
+                      </p>
+                      <h2 className="text-xl font-bold tracking-tighter text-foreground">
+                        {phase.title}
+                      </h2>
+                      <p className="text-sm text-muted-foreground">
+                        {phase.description}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline11 };
diff --git a/blocks/timeline12.tsx b/blocks/timeline12.tsx
new file mode 100644
index 0000000..84c53d1
--- /dev/null
+++ b/blocks/timeline12.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { DownloadIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface Timeline12Props {
+  className?: string;
+}
+
+const PHASES__DATA = [
+  {
+    id: "phase1",
+    phase: "۱",
+    title: "راه‌اندازی",
+    date: "۱۲ اسفند ۱۴۰۳",
+    heading: "چگونه راه‌اندازی کنیم",
+    description:
+      "این فاز مبانی شروع کار را پوشش می‌دهد. نحوه راه‌اندازی، پیکربندی و آماده‌سازی برای مراحل بعدی را بیاموزید.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "تصویر فاز اول",
+  },
+  {
+    id: "phase2",
+    phase: "۲",
+    title: "ساخت",
+    date: "۱ فروردین ۱۴۰۴",
+    heading: "چگونه بسازیم",
+    description:
+      "در این فاز روی ساختاردهی و ساخت بلاک‌های اصلی تمرکز کنید. بهترین روش‌های توسعه را یاد بگیرید.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "تصویر فاز دوم",
+  },
+  {
+    id: "phase3",
+    phase: "۳",
+    title: "آزمایش",
+    date: "۱۷ فروردین ۱۴۰۴",
+    heading: "چگونه آزمایش کنیم",
+    description:
+      "آزمایش، کیفیت و پایداری را تضمین می‌کند. اشکال‌زدایی، رفع مشکلات و پالایش پروژه را بیاموزید.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "تصویر فاز سوم",
+  },
+  {
+    id: "phase4",
+    phase: "۴",
+    title: "عرضه",
+    date: "۲۵ فروردین ۱۴۰۴",
+    heading: "چگونه عرضه کنیم",
+    description:
+      "فاز نهایی روی بهینه‌سازی، استقرار و اطمینان از اجرای روان برای انتشار متمرکز است.",
+    imageSrc:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "تصویر فاز چهارم",
+  },
+];
+
+const Timeline12 = ({ className }: Timeline12Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background", className)}>
+      <div className="container flex flex-col items-center justify-center py-32">
+        <h1 className="mb-12 text-center text-2xll font-semibold tracking-tighter lg:mb-25 lg:text-2xll">
+          تنها چهار فاز
+        </h1>
+        <Tabs defaultValue="phase1" dir="rtl" className="w-full text-start">
+          <TabsList className="grid w-full grid-cols-4 bg-transparent p-0">
+            {PHASES__DATA.map((phase) => (
+              <TabsTrigger
+                key={phase.id}
+                className="text-md flex items-center justify-center gap-1 rounded-none border-b-2 pb-6 shadow-none! data-[state=active]:border-b-foreground"
+                value={phase.id}
+              >
+                {phase.title}
+                <span className="hidden text-foreground/40 md:inline">
+                  {phase.phase}
+                </span>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          {PHASES__DATA.map((phase) => (
+            <TabsContent
+              key={phase.id}
+              value={phase.id}
+              dir="rtl"
+              className="mt-12 grid items-start gap-12 lg:grid-cols-2"
+            >
+              <div className="col-span-1 flex flex-col items-start gap-2 text-start lg:max-w-lg lg:gap-4">
+                <p className="text-sm font-semibold tracking-tight text-muted-foreground">
+                  {phase.date}
+                </p>
+                <h2 className="text-3xl font-medium tracking-tighter text-foreground md:text-2xll">
+                  {phase.heading}
+                </h2>
+                <p className="text-lg font-normal tracking-tighter text-muted-foreground">
+                  {phase.description}
+                </p>
+                <Button
+                  variant="outline"
+                  className="mt-8 flex w-fit items-center gap-2 rounded-full border border-border px-4! py-2"
+                >
+                  <p className="text-md font-medium text-foreground">
+                    برای{" "}
+                    <span className="text-foreground/80">دانلود اپ</span>{" "}
+                    کلیک کنید
+                  </p>
+                  <DownloadIcon className="size-4 shrink-0" />
+                </Button>
+              </div>
+              <motion.div
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 100, y: 0 }}
+                transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
+                className="relative z-20 col-span-1"
+              >
+                <Card className="group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none">
+                  <CardContent className="size-full rounded-2xl border-2 border-background bg-muted">
+                    <img
+                      src={phase.imageSrc}
+                      className="size-full transition-all ease-in-out group-hover:scale-95"
+                      alt={phase.imageAlt}
+                    />
+                  </CardContent>
+                </Card>
+              </motion.div>
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline12 };
diff --git a/blocks/timeline13.tsx b/blocks/timeline13.tsx
new file mode 100644
index 0000000..9f56a10
--- /dev/null
+++ b/blocks/timeline13.tsx
@@ -0,0 +1,204 @@
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+interface Timeline13Props {
+  className?: string;
+}
+
+const formatPercent = (value: number) =>
+  `${value.toLocaleString("fa-IR")}٪`;
+
+const Timeline13 = ({ className }: Timeline13Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col text-start">
+          <h1 className="mb-2 text-3xl font-semibold md:text-2xll">
+            مسیر تا عرضه محصول
+          </h1>
+          <p className="max-w-2xl text-muted-foreground">
+            مراحل ضروری برای رساندن ایده نوآورانه به بازار و تضمین عرضه
+            موفق محصول را دنبال کنید.
+          </p>
+        </div>
+        <div className="mt-8 flex flex-col gap-6 rounded-xl border border-border bg-card p-4 sm:p-8 lg:p-11">
+          <div className="contents items-center justify-between sm:flex">
+            <h2 className="text-xl font-semibold tracking-tight">
+              راهنمایی از پیشگامان صنعت
+            </h2>
+            <Button className="order-last">درخواست دمو</Button>
+          </div>
+          <div className="mt-3 flex gap-4 sm:flex-col">
+            <div className="relative">
+              <div className="grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:grid-cols-3 sm:items-center">
+                <div
+                  className="absolute inset-0 start-1/2 w-px -translate-x-1/2 bg-ring sm:inset-auto sm:start-auto sm:h-px sm:w-full sm:translate-x-0"
+                />
+                <span className="relative top-3 size-2 rounded-full bg-ring sm:top-0" />
+                <span className="relative top-3 size-2 rounded-full bg-ring sm:top-0" />
+                <span className="relative top-3 size-2 rounded-full bg-ring sm:top-0" />
+              </div>
+              <div
+                className="animate-timeline-reveal absolute inset-0 grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:grid-cols-3 sm:items-center"
+              >
+                <div
+                  className="absolute inset-0 start-1/2 w-px -translate-x-1/2 bg-primary sm:inset-auto sm:start-auto sm:h-px sm:w-full sm:translate-x-0"
+                />
+                <span className="relative top-3 size-2 rounded-full bg-primary sm:top-0" />
+                <span className="relative top-3 size-2 rounded-full bg-primary sm:top-0" />
+                <span className="relative top-3 size-2 rounded-full bg-primary sm:top-0" />
+              </div>
+            </div>
+            <div className="grid gap-10 sm:grid-cols-3">
+              <div className="flex h-full flex-col justify-between gap-4 text-start">
+                <div className="flex flex-col">
+                  <div className="flex h-8 w-fit items-center gap-px overflow-hidden rounded-md border border-border bg-border text-sm font-medium">
+                    <span className="grid h-full place-items-center bg-background px-2">
+                      ۱
+                    </span>
+                    <span className="grid h-full place-items-center bg-background px-2">
+                      ایده‌پردازی
+                    </span>
+                  </div>
+                  <h3 className="mt-5 font-medium">
+                    ایده را مطرح و اعتبارسنجی کنید
+                  </h3>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    با تحقیق بازار، مصاحبه با مشتری و تحلیل رقبا، ایده محصول
+                    خود را پالایش کنید.
+                  </p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <Progress
+                      value={15}
+                      className="h-1 flex-1 rtl:scale-x-[-1]"
+                    />
+                    <span className="w-8 text-end text-xs text-muted-foreground">
+                      {formatPercent(15)}
+                    </span>
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    حدود ۲ هفته
+                  </p>
+                </div>
+              </div>
+              <div className="flex h-full flex-col justify-between gap-4 text-start">
+                <div className="flex flex-col">
+                  <div className="flex h-8 w-fit items-center gap-px overflow-hidden rounded-md border border-border bg-border text-sm font-medium">
+                    <span className="grid h-full place-items-center bg-background px-2">
+                      ۲
+                    </span>
+                    <span className="grid h-full place-items-center bg-background px-2">
+                      توسعه
+                    </span>
+                  </div>
+                  <h3 className="mt-5 font-medium">نسخه اولیه را بسازید</h3>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    طراحی، نمونه‌سازی و توسعه حداقل محصول قابل عرضه. بر اساس
+                    بازخورد و آزمایش اولیه سریع تکرار کنید.
+                  </p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <Progress
+                      value={85}
+                      className="h-1 flex-1 rtl:scale-x-[-1]"
+                    />
+                    <span className="w-8 text-end text-xs text-muted-foreground">
+                      {formatPercent(85)}
+                    </span>
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    حدود ۶ هفته
+                  </p>
+                </div>
+              </div>
+              <div className="flex h-full flex-col justify-between gap-4 text-start">
+                <div className="flex flex-col">
+                  <div className="flex h-8 w-fit items-center gap-px overflow-hidden rounded-md border border-border bg-border text-sm font-medium">
+                    <span className="grid h-full place-items-center bg-background px-2">
+                      ۰۳
+                    </span>
+                    <span className="grid h-full place-items-center bg-background px-2">
+                      عرضه
+                    </span>
+                  </div>
+                  <h3 className="mt-5 font-medium">ورود به بازار</h3>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    طرح عرضه را با کمپین‌های بازاریابی، ارتباط‌گیری و پشتیبانی
+                    مشتری اجرا کنید تا اثر و پذیرش بیشینه شود.
+                  </p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <Progress
+                      value={100}
+                      className="h-1 flex-1 rtl:scale-x-[-1]"
+                    />
+                    <span className="w-8 text-end text-xs text-muted-foreground">
+                      {formatPercent(100)}
+                    </span>
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    عرضه تکمیل شد
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <style>
+        {`
+        /* Mobile: Top to bottom animation */
+        @keyframes timeline-reveal-mobile {
+          from {
+            clip-path: inset(0 0 100% 0);
+          }
+          to {
+            clip-path: inset(0% 0 0 0);
+          }
+        }
+        
+        /* Desktop: reveal along timeline (LTR) */
+        @keyframes timeline-reveal-desktop {
+          from {
+            clip-path: inset(0 100% 0 0);
+          }
+          to {
+            clip-path: inset(0 0% 0 0);
+          }
+        }
+
+        /* Desktop: reveal along timeline (RTL) */
+        @keyframes timeline-reveal-desktop-rtl {
+          from {
+            clip-path: inset(0 0 0 100%);
+          }
+          to {
+            clip-path: inset(0 0 0 0%);
+          }
+        }
+        
+        .animate-timeline-reveal {
+          animation: timeline-reveal-mobile 5s linear;
+        }
+        
+        @media (min-width: 640px) {
+          .animate-timeline-reveal {
+            animation: timeline-reveal-desktop 5s linear;
+          }
+
+          [dir="rtl"] .animate-timeline-reveal {
+            animation: timeline-reveal-desktop-rtl 5s linear;
+          }
+        }
+        `}
+      </style>
+    </section>
+  );
+};
+
+export { Timeline13 };
diff --git a/blocks/timeline14.tsx b/blocks/timeline14.tsx
new file mode 100644
index 0000000..7f94b24
--- /dev/null
+++ b/blocks/timeline14.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const formatStep = (value: number) =>
+  value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });
+
+const data = [
+  {
+    title: "آغاز شرکت",
+    description:
+      "سفر ما با یک ایده ساده شروع شد: فناوری را برای همه در دسترس کنیم. آنچه با تیمی کوچک سه توسعه‌دهنده در یک گاراژ آغاز شد، امروز پایه مأموریت ما برای در دسترس‌سازی توسعه نرم‌افزار است.",
+    date: "۲۲۰",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+  },
+  {
+    title: "عرضه اولین محصول",
+    description:
+      "پس از ماه‌ها توسعه، اولین محصول را به عموم عرضه کردیم. واکنش فراتر از انتظار بود  ۱۰ هزار کاربر در هفته اول ثبت‌نام کردند و اعتبار ایده ما را تأیید کرد.",
+    date: "۲۲۱",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+  },
+  {
+    title: "سرمایه‌گذاری مرحله اول",
+    description:
+      "راند سری A را با حمایت سرمایه‌گذاران برجسته که به مأموریت ما اعتقاد داشتند جمع کردیم. این سرمایه به ما اجازه داد تیم را گسترش دهیم، در تحقیق و توسعه سرمایه‌گذاری کنیم و برای گسترش بین‌المللی آماده شویم.",
+    date: "۲۲۲",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+  },
+  {
+    title: "گسترش جهانی",
+    description:
+      "دفاتر لندن، توکیو و سائوپائولو را باز کردیم و از استارتاپ محلی به شرکت فناوری جهانی تبدیل شدیم. پلتفرم ما اکنون بیش از ۵۰۰ هزار کاربر در ۵۰ کشور دارد.",
+    date: "۲۲۳",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+  },
+];
+
+interface Timeline14Props {
+  className?: string;
+}
+
+const Timeline14 = ({ className }: Timeline14Props) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    const observerOptions = {
+      root: null,
+      rootMargin: "-50% 0px -50% 0px",
+      threshold: 0,
+    };
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const index = itemRefs.current.findIndex(
+            (ref) => ref === entry.target,
+          );
+          if (index !== -1) {
+            setActiveIndex(index);
+          }
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(
+      observerCallback,
+      observerOptions,
+    );
+
+    itemRefs.current.forEach((ref) => {
+      if (ref) {
+        observer.observe(ref);
+      }
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container text-start">
+        <h1 className="max-w-4xl text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
+          <span className="font-medium">از استارتاپ تا پلتفرم جهانی</span>
+          <br />
+          <span className="text-muted-foreground">مسیر ما</span>
+        </h1>
+      </div>
+      <div className="relative mt-16 lg:mt-28">
+        <div className="sticky top-0 z-10 border-y bg-background py-3.5">
+          <div className="container">
+            <div className="flex justify-between gap-4 text-xl md:text-xl">
+              <p className="font-mono text-muted-foreground">
+                {formatStep(activeIndex + 1)}
+              </p>
+              <p className="font-mono">{data[activeIndex]?.date}</p>
+            </div>
+          </div>
+        </div>
+        <div className="container">
+          <div className="flex flex-col">
+            {data.map((item, index) => (
+              <div
+                key={index}
+                ref={(el) => {
+                  itemRefs.current[index] = el;
+                }}
+                className={cn(
+                  "flex flex-col items-center gap-7 py-14 opacity-50 transition-opacity duration-300 md:flex-row md:gap-10 md:py-20",
+                  index === activeIndex && "opacity-100",
+                )}
+              >
+                <img
+                  src={item.image}
+                  alt={item.title}
+                  className="aspect-[16/12] rounded-lg border object-cover md:w-1/3 md:max-w-[440px]"
+                />
+                <div className="text-start">
+                  <h2 className="mb-3 text-xl font-medium md:mb-4 md:text-xl">
+                    {item.title}
+                  </h2>
+                  <p className="text-muted-foreground md:text-balance">
+                    {item.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline14 };
diff --git a/blocks/timeline2.tsx b/blocks/timeline2.tsx
new file mode 100644
index 0000000..401e2b4
--- /dev/null
+++ b/blocks/timeline2.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const sections = [
+  {
+    subTitle: "داشبورد هوشمند",
+    title: "گردش کار خود را ساده کنید",
+    description:
+      "با رابط شهودی ما گردش کار خود را بهینه کنید. به ابزارها و قابلیت‌های قدرتمندی دسترسی داشته باشید که برای افزایش بهره‌وری و کارایی طراحی شده‌اند.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+  {
+    subTitle: "مدیریت تیم",
+    title: "همکاری بی‌نقص با تیم‌ها",
+    description:
+      "همکاری روان در سراسر سازمان را ممکن کنید. منابع را با کنترل‌های دسترسی و تنظیمات مجوز قابل سفارشی‌سازی، به‌صورت کارآمد به اشتراک بگذارید.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
+  },
+  {
+    subTitle: "تحلیل پیشرفته",
+    title: "گزینه‌های پیکربندی انعطاف‌پذیر",
+    description:
+      "تجربه خود را با گزینه‌های پیکربندی پیشرفته شخصی‌سازی کنید. پلتفرم را با راهکار چندمنظوره ما مطابق نیازهای خاص خود تطبیق دهید.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
+  },
+  {
+    subTitle: "ابزارهای خودکارسازی",
+    title: "تجربه کاربری ساده‌شده",
+    description:
+      "رابط کاربری دوستانه‌ای را تجربه کنید که برای کارایی طراحی شده است. بلاک‌های شهودی ما کارهای پیچیده را ساده و در دسترس می‌کنند.",
+    image:
+      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+  },
+];
+
+interface Timeline2Props {
+  className?: string;
+}
+
+const Timeline2 = ({ className }: Timeline2Props) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const sectionRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const viewportHeight = window.innerHeight;
+      const viewportCenter = viewportHeight / 2;
+
+      let closestSection = 0;
+      let closestDistance = Infinity;
+
+      sectionRefs.current.forEach((section, index) => {
+        if (section) {
+          const rect = section.getBoundingClientRect();
+          const sectionCenter = rect.top + rect.height / 2;
+          const distance = Math.abs(sectionCenter - viewportCenter);
+
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestSection = index;
+          }
+        }
+      });
+
+      setActiveIndex(closestSection);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-7xl">
+        <h1 className="mb-14 max-w-2xl text-start text-xl font-semibold text-balance md:text-2xll">
+          گردش کار خود را با راهکار ما متحول کنید
+        </h1>
+        <div className="flex justify-between gap-20">
+          <div className="flex flex-col gap-16 text-start md:w-1/2">
+            {sections.map((section, index) => (
+              <div
+                key={index}
+                ref={(el) => {
+                  sectionRefs.current[index] = el;
+                }}
+                className="flex flex-col gap-4 md:h-[50vh]"
+              >
+                <div className="block rounded-2xl border bg-muted p-4 md:hidden">
+                  <img
+                    src={section.image}
+                    alt={section.title}
+                    className="h-full max-h-full w-full max-w-full rounded-2xl object-cover"
+                  />
+                </div>
+                <p className="text-sm font-semibold text-muted-foreground md:text-base">
+                  {section.subTitle}
+                </p>
+                <h1 className="text-xl font-semibold md:text-xl">
+                  {section.title}
+                </h1>
+                <p className="text-muted-foreground">{section.description}</p>
+              </div>
+            ))}
+          </div>
+          <div className="sticky top-56 start-0 hidden h-fit w-full items-center justify-center md:flex">
+            <img
+              src={sections[sections.length - 1].image}
+              alt={sections[sections.length - 1].title}
+              className="invisible h-full max-h-[550px] w-full max-w-full object-cover"
+            />
+
+            {sections.map((item, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "absolute inset-0 flex h-full items-center justify-center rounded-2xl border bg-muted p-4 transition-opacity duration-200",
+                  index === activeIndex ? "opacity-100" : "opacity-0",
+                )}
+              >
+                <img
+                  src={item.image}
+                  alt={item.title}
+                  className="h-full max-h-full w-full max-w-full rounded-2xl border object-cover"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline2 };
diff --git a/blocks/timeline3.tsx b/blocks/timeline3.tsx
new file mode 100644
index 0000000..a38f9f9
--- /dev/null
+++ b/blocks/timeline3.tsx
@@ -0,0 +1,115 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Feature {
+  image: string;
+  title: string;
+  description: string;
+}
+
+interface Timeline3Props {
+  className?: string;
+  heading: string;
+  description: string;
+  buttons: {
+    primary: {
+      text: string;
+      url: string;
+    };
+    secondary: {
+      text: string;
+      url: string;
+    };
+  };
+  features?: Feature[];
+}
+
+const Timeline3 = ({
+  className,
+  heading = "تفاوت را با ما تجربه کنید",
+  description = "ما به ایجاد مشارکت‌های پایدار با مشتریانمان باور داریم و بر موفقیت بلندمدت از طریق نوآوری مشترک و پشتیبانی متعهد تمرکز می‌کنیم.",
+  buttons = {
+    primary: {
+      text: "همین حالا شروع کنید",
+      url: "#",
+    },
+    secondary: {
+      text: "رزرو دمو",
+      url: "#",
+    },
+  },
+  features = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/placeholder-4.svg",
+      title: "گسترش بین‌المللی",
+      description:
+        "فعالیت‌ها را به ۵ کشور جدید گسترش دادیم و به میلیون‌ها کاربر تازه دست یافتیم.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/placeholder-5.svg",
+      title: "جذب سرمایه سری B",
+      description:
+        "۵۰ میلیون دلار سرمایه سری B برای تسریع توسعه محصول جذب کردیم.",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/placeholder-5.svg",
+      title: "راه‌اندازی محصول",
+      description:
+        "محصول اصلی خود را با موفقیت به بازار عرضه کردیم." ,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/placeholder-5.svg",
+      title: "تأسیس شرکت",
+      description:
+        "با چشم‌اندازی برای تحول در صنعت آغاز به کار کردیم.",
+    },
+  ],
+}: Timeline3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container max-w-6xl">
+        <div className="relative grid gap-16 md:grid-cols-2">
+          <div className="top-40 h-fit text-start md:sticky">
+            <h2 className="mt-4 mb-6 text-xl font-semibold md:text-2xll">
+              {heading}
+            </h2>
+            <p className="font-medium text-muted-foreground md:text-xl">
+              {description}
+            </p>
+            <div className="mt-8 flex flex-col gap-4 lg:flex-row">
+              <Button className="gap-2" size="lg" asChild>
+                <a href={buttons.primary.url}>{buttons.primary.text}</a>
+              </Button>
+              <Button variant="outline" size="lg" className="gap-2" asChild>
+                <a href={buttons.secondary.url}>{buttons.secondary.text}</a>
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-col gap-12 md:gap-20">
+            {features.map((feature, index) => (
+              <div key={index} className="rounded-xl border p-2">
+                <img
+                  src={feature.image}
+                  alt={feature.title}
+                  className="aspect-video w-full rounded-xl border border-dashed object-cover"
+                />
+                <div className="p-6 text-start">
+                  <h3 className="mb-1 text-xl font-semibold">
+                    {feature.title}
+                  </h3>
+                  <p className="text-muted-foreground">{feature.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline3 };
diff --git a/blocks/timeline4.tsx b/blocks/timeline4.tsx
new file mode 100644
index 0000000..5f6c7b6
--- /dev/null
+++ b/blocks/timeline4.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import { motion, useScroll, useTransform } from "framer-motion";
+import { Cpu, LayoutList, LocateFixed, Rocket, Users } from "lucide-react";
+import { useRef } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const DATA = [
+  {
+    title: "سازماندهی کنید",
+    description:
+      "از همان ابتدا قوی شروع کنید؛ تقویم‌ها و ابزارهایی مثل حساب ابری Calendar، مدیریت وظایف و پیام‌رسان تیمی را در یک جا همگام کنید.",
+    icon: LayoutList,
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
+      alt: "سازماندهی",
+    },
+  },
+  {
+    title: "پیگیری پیشرفت",
+    description:
+      "عملکرد خود را با داشبوردهای لحظه‌ای و تحلیل‌های دقیق پایش کنید. با گزارش‌های خودکار همیشه جلوتر باشید.",
+    icon: LocateFixed,
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-2.svg",
+      alt: "پیگیری پیشرفت",
+    },
+    reverse: true,
+  },
+  {
+    title: "همکاری بی‌نقص",
+    description:
+      "تیم خود را با داشبوردهای مشترک و ابزارهای ارتباطی فوری توانمند کنید. همه را با پلتفرم‌های یکپارچه هم‌راستا نگه دارید.",
+    icon: Users,
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-3.svg",
+      alt: "همکاری بی‌نقص",
+    },
+  },
+  {
+    title: "یکپارچه‌سازی بی‌درز",
+    description:
+      "در چند پلتفرم به‌صورت یکپارچه متصل شوید تا واگذاری وظایف روان و خودکار فراهم شود.",
+    icon: Cpu,
+    image: {
+      src: "/block-media/shadcnblocks/block/placeholder-4.svg",
+      alt: "یکپارچه‌سازی بی‌درز",
+    },
+    reverse: true,
+  },
+];
+
+const Timeline4 = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start center", "end center"],
+  });
+  const height = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+
+  return (
+    <section dir="rtl" lang="fa" className="py-32">
+      <div className="border-y">
+        <div className="container flex flex-col gap-6 border-x py-4 text-start max-lg:border-x lg:py-8">
+          <Badge
+            variant="outline"
+            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+          >
+            <Rocket className="size-4" />
+            <span>تسریع</span>
+          </Badge>
+          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
+            سفر برنامه‌ریزی خود را تسریع کنید
+          </h2>
+          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
+            گردش کار خود را گام‌به‌گام با ابزارهای هوشمند، بینش‌های عملی و
+            همکاری بی‌درز کنترل کنید
+          </p>
+        </div>
+      </div>
+
+      <div
+        ref={ref}
+        className="relative container border-x pb-40 lg:pt-20 [&>*:last-child]:pb-20 [&>div>div:first-child]:pt-20!"
+      >
+        <div className="pointer-events-none absolute top-0 z-0 h-full w-[3px] max-lg:-translate-x-5 lg:left-1/2 lg:-translate-x-1/2">
+          <div className="h-4 w-[3px] bg-linear-to-b from-transparent to-foreground/10"></div>
+          <div className="relative h-[calc(100%-1rem)] w-full bg-linear-to-b from-foreground/10 via-foreground/10 to-transparent">
+            <motion.div
+              className="absolute top-0 left-0 z-10 w-[3px] rounded-full bg-linear-to-b from-transparent via-foreground to-transparent"
+              style={{ height }}
+            />
+          </div>
+        </div>
+        {DATA.map((item, index) => (
+          <div key={index} className="relative flex">
+            <div
+              className={`flex w-full justify-center px-1 py-10 text-end md:gap-6 lg:gap-10 ${item?.reverse ? "lg:flex-row-reverse lg:text-start" : ""} `}
+            >
+              <div className="flex-1 max-lg:hidden">
+                <h3 className="text-xl tracking-[-0.96px]">{item.title}</h3>
+                <p
+                  className={`mt-2.5 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground ${item?.reverse ? "" : "ms-auto"}`}
+                >
+                  {item.description}
+                </p>
+              </div>
+              <div className="z-[-1] size-fit -translate-y-5 bg-background p-4 max-lg:translate-x-4">
+                <div className="rounded-[10px] border bg-card p-[5px] shadow-md">
+                  <div className="size-fit rounded-md border bg-muted p-1">
+                    <item.icon className="size-4 shrink-0" />
+                  </div>
+                </div>
+              </div>
+              <div className="flex-1 max-lg:translate-x-4">
+                <div className="text-start lg:pointer-events-none lg:hidden">
+                  <h3 className="text-xl tracking-[-0.96px]">{item.title}</h3>
+                  <p className="mt-2.5 mb-10 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground">
+                    {item.description}
+                  </p>
+                </div>
+                <div className="flex items-start justify-start">
+                  <div className={` ${item?.reverse ? "lg:ms-auto" : ""}`}>
+                    <div className="px-6 lg:px-10">
+                      <DiagonalPattern className="h-6 lg:h-10" />
+                    </div>
+                    <div className="relative grid grid-cols-[auto_1fr_auto] items-stretch">
+                      <DiagonalPattern className="h-full w-6 lg:w-10" />
+                      <img
+                        src={item.image.src}
+                        width={400}
+                        height={500}
+                        alt={item.image.alt}
+                        className="object-contain dark:invert"
+                      />
+                      <DiagonalPattern className="w-6 lg:w-10" />
+                    </div>
+                    <div className="px-6 lg:px-10">
+                      <DiagonalPattern className="h-6 lg:h-10" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container h-full w-full border-x"></div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline4 };
+
+const DiagonalPattern = ({
+  className,
+  patternColor = "hsl(var(--foreground))",
+  patternOpacity = 0.15,
+}: {
+  className?: string;
+  patternColor?: string;
+  patternOpacity?: number;
+}) => {
+  const svgPattern = `url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23${patternColor}' fill-opacity='${patternOpacity}' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")`;
+
+  return (
+    <div
+      className={cn("h-full w-full border-2 border-dashed", className)}
+      style={{
+        backgroundImage: svgPattern,
+      }}
+    />
+  );
+};
diff --git a/blocks/timeline5.tsx b/blocks/timeline5.tsx
new file mode 100644
index 0000000..df2c054
--- /dev/null
+++ b/blocks/timeline5.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { Cloud, Sparkles, Users, XCircle } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    icon: <Cloud strokeWidth={1.5} className="size-12" />,
+    title: "بینش‌های مبتنی بر هوش مصنوعی",
+    description:
+      "با الگوریتم‌های پیشرفته هوش مصنوعی بینش‌های عملی بگیرید و تصمیم‌های مبتنی بر داده برای کسب‌وکار خود اتخاذ کنید.",
+  },
+  {
+    icon: <XCircle strokeWidth={1.5} className="size-12" />,
+    title: "خودکارسازی بدون خطا",
+    description:
+      "با ابزارهای خودکارسازی هوشمند خطاهای دستی را حذف کنید و دقت و یکپارچگی را در تمام فرآیندها تضمین کنید.",
+  },
+  {
+    icon: <Users strokeWidth={1.5} className="size-12" />,
+    title: "همکاری بی‌نقص تیمی",
+    description:
+      "با ابزارهای همکاری مبتنی بر هوش مصنوعی که ارتباط بلادرنگ و گردش‌کارهای مشترک را ممکن می‌کنند، کار تیمی را تقویت کنید.",
+  },
+];
+
+interface Timeline5Props {
+  className?: string;
+}
+
+const Timeline5 = ({ className }: Timeline5Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16">
+          <div className="lg:sticky lg:top-24 lg:self-start">
+            <div className="max-w-lg text-start">
+              <h2 className="text-3xl font-bold tracking-tight text-primary sm:text-xl lg:text-2xll">
+                <span className="relative inline-block">
+                  <span className="text-muted-foreground">هوش مصنوعی</span>
+                  <Sparkles className="absolute -top-2 -start-4 size-5 fill-yellow-500 stroke-none" />
+                </span>
+                <br />
+                را به گردش‌کارهای فعلی‌تان اضافه کنید
+              </h2>
+              <p className="mt-12 text-base text-muted-foreground">
+                هوش مصنوعی را بی‌درز در گردش‌کارهای خود یکپارچه کنید. وظایف را
+                خودکار کنید، کارایی را افزایش دهید و جلوتر بمانید.
+              </p>
+            </div>
+          </div>
+
+          <div className="-mt-8 sm:-mt-12">
+            {DATA.map((item, index) => (
+              <div
+                key={index}
+                className="relative my-12 overflow-hidden rounded-lg bg-muted px-8 py-16 shadow-none sm:px-12 sm:py-24 lg:px-16 lg:py-32"
+              >
+                <div className="gap-4 sm:gap-6">
+                  <div className="block shrink-0">{item.icon}</div>
+                  <div className="absolute top-12 end-12 text-2xll">
+                    {(index + 1).toLocaleString("fa-IR", {
+                      minimumIntegerDigits: 2,
+                      useGrouping: false,
+                    })}
+                  </div>
+                  <div className="mt-6 text-start">
+                    <h4 className="mb-2 text-xl font-semibold text-primary">
+                      {item.title}
+                    </h4>
+                    <p className="mt-6 text-xs text-muted-foreground sm:text-base">
+                      {item.description}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline5 };
diff --git a/blocks/timeline6.tsx b/blocks/timeline6.tsx
new file mode 100644
index 0000000..9d5b52c
--- /dev/null
+++ b/blocks/timeline6.tsx
@@ -0,0 +1,99 @@
+import { Clock, Cloud, FileCheck, Scale, Users, XCircle } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface DataItem {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+const DATA: DataItem[] = [
+  {
+    icon: <Cloud strokeWidth={1.5} className="size-12" />,
+    title: "افزایش بهره‌وری",
+    description:
+      "با ابزارهای پیشرفته مدیریت وظایف، گردش‌کارهای خود را ساده کنید و ناکارآمدی‌ها را حذف کنید.",
+  },
+  {
+    icon: <XCircle strokeWidth={1.5} className="size-12" />,
+    title: "کاهش خطاها",
+    description:
+      "وظایف تکراری را خودکار کنید تا خطای انسانی کاهش یابد و نتایج یکسان تضمین شود.",
+  },
+  {
+    icon: <Users strokeWidth={1.5} className="size-12" />,
+    title: "تقویت همکاری",
+    description:
+      "ارتباط و همکاری تیم را با به‌روزرسانی‌های بلادرنگ و فضاهای کاری مشترک بهبود دهید.",
+  },
+  {
+    icon: <Scale strokeWidth={1.5} className="size-12" />,
+    title: "مقیاس‌پذیری بی‌درز",
+    description:
+      "تیم و پروژه‌های خود را بدون دردسر گسترش دهید؛ با راهکارهای انعطاف‌پذیر و مقیاس‌پذیر.",
+  },
+  {
+    icon: <FileCheck strokeWidth={1.5} className="size-12" />,
+    title: "پیگیری پیشرفت",
+    description:
+      "با پیگیری دقیق پیشرفت و بینش‌های عملی، همیشه بر اهداف خود مسلط باشید.",
+  },
+  {
+    icon: <Clock strokeWidth={1.5} className="size-12" />,
+    title: "صرفه‌جویی در زمان",
+    description:
+      "با خودکارسازی وظایف و فرآیندهای زمان‌بر، روی آنچه مهم‌تر است تمرکز کنید.",
+  },
+];
+
+interface Timeline6Props {
+  className?: string;
+}
+
+const Timeline6 = ({ className }: Timeline6Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16">
+          <div className="lg:sticky lg:top-24 lg:self-start">
+            <div className="max-w-lg text-start">
+              <h2 className="text-3xl font-bold tracking-tight text-primary sm:text-xl lg:text-2xll">
+                ابزارهای ما
+                <br />
+                بهره‌وری را به
+                <br />
+                <span className="text-muted-foreground">ابرقدرت شما</span>{" "}
+                تبدیل می‌کنند
+              </h2>
+            </div>
+          </div>
+
+          <div className="-mt-8 sm:-mt-12">
+            {DATA.map((item, index) => (
+              <div
+                key={index}
+                className="relative flex flex-col justify-center overflow-hidden border-b py-8 shadow-none sm:py-12"
+              >
+                <div className="flex gap-4 text-start sm:gap-6">
+                  <div className="shrink-0">{item.icon}</div>
+                  <div>
+                    <h4 className="mb-2 text-xl font-semibold text-primary sm:text-3xl">
+                      {item.title}
+                    </h4>
+                    <p className="mt-6 text-sm text-muted-foreground sm:text-base">
+                      {item.description}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline6 };
diff --git a/blocks/timeline7.tsx b/blocks/timeline7.tsx
new file mode 100644
index 0000000..ba19713
--- /dev/null
+++ b/blocks/timeline7.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Check, ChevronLeft, ChevronRight, Circle } from "lucide-react";
+import React, { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Timeline7Props {
+  className?: string;
+}
+
+interface StepProps {
+  title: string;
+  imageSrc: string;
+  description: string;
+}
+
+const steps: StepProps[] = [
+  {
+    title: "معرفی",
+    imageSrc:
+      "/block-media/shadcnblocks/block/placeholder-1.svg",
+    description:
+      "به راهنمای گام‌به‌گام ما خوش آمدید. این بخش معرفی به شما کمک می‌کند با فرآیند آشنا شوید و بدانید چه انتظاری داشته باشید.",
+  },
+  {
+    title: "اطلاعات شخصی",
+    imageSrc:
+      "/block-media/shadcnblocks/block/placeholder-2.svg",
+    description:
+      "در این بخش، برخی اطلاعات پایه از شما جمع‌آوری می‌کنیم تا تجربه‌تان شخصی‌سازی شود و پیشنهادهای بهتری ارائه دهیم.",
+  },
+  {
+    title: "جزئیات آدرس",
+    imageSrc:
+      "/block-media/shadcnblocks/block/placeholder-3.svg",
+    description:
+      "لطفاً جزئیات آدرس خود را وارد کنید تا محصولات را به محل درست تحویل دهیم و هزینه ارسال محاسبه شود.",
+  },
+  {
+    title: "بازبینی و ثبت",
+    imageSrc:
+      "/block-media/shadcnblocks/block/placeholder-4.svg",
+    description:
+      "پیش از نهایی کردن، لحظه‌ای تمام اطلاعات واردشده را مرور کنید. می‌توانید به هر مرحله برگردید.",
+  },
+];
+
+const ProcessBar: React.FC<{
+  currentStep: number;
+  steps: StepProps[];
+}> = ({ currentStep, steps }) => (
+  <div className="relative w-full scale-75">
+    <div className="flex items-center justify-between">
+      {steps.map((step, index) => (
+        <React.Fragment key={step.title}>
+          <div className="flex flex-col items-center">
+            <motion.div
+              className={`z-10 flex h-8 w-8 items-center justify-center rounded-full ${
+                index <= currentStep
+                  ? "bg-neutral-800 text-white"
+                  : "bg-gray-200 text-white dark:bg-gray-800 dark:text-gray-600"
+              }`}
+              animate={{ scale: 1.02 }}
+            >
+              {index < currentStep ? (
+                <Check size={17} />
+              ) : (
+                <Circle size={17} fill="white" />
+              )}
+            </motion.div>
+          </div>
+          {index < steps.length - 1 && (
+            <div className="relative grow">
+              <div className="absolute -top-1 h-1.5 w-full bg-muted" />
+              <motion.div
+                className="absolute -top-1 h-1.5 w-full bg-primary"
+                initial={{ width: "0%" }}
+                animate={{
+                  width: index < currentStep ? "100%" : "0%",
+                }}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
+              />
+            </div>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  </div>
+);
+
+const StepperContent: React.FC<{ step: StepProps }> = ({ step }) => {
+  return (
+    <div className="my-4 flex min-h-[400px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl bg-muted p-6 text-center">
+      <motion.div
+        key={step.imageSrc}
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        className="flex h-[200px] w-[500px] items-center justify-center overflow-hidden"
+      >
+        <img
+          src={step.imageSrc}
+          alt={step.title}
+          className="w-[500px]"
+          onError={(e) => {
+            e.currentTarget.src =
+              "/block-media/shadcnblocks/block/placeholder-1.svg";
+          }}
+        />
+      </motion.div>
+      <p className="mt-6 px-10 text-base leading-snug font-normal tracking-tight text-muted-foreground">
+        {step.description}
+      </p>
+    </div>
+  );
+};
+
+const NavButtons: React.FC<{
+  currentStep: number;
+  totalSteps: number;
+  handlePrev: () => void;
+  handleNext: () => void;
+}> = ({ handlePrev, handleNext }) => (
+  <div className="flex w-full justify-end gap-3 tracking-tight">
+    <Button
+      onClick={handleNext}
+      className="flex gap-2 transition-all ease-in-out hover:gap-4"
+      variant="default"
+    >
+      بعدی
+      <ChevronRight size={20} className="rtl:rotate-180" />
+    </Button>
+
+    <Button
+      onClick={handlePrev}
+      className="flex gap-2 transition-all ease-in-out hover:gap-4"
+      variant="secondary"
+    >
+      <ChevronLeft size={20} className="rtl:rotate-180" />
+      قبلی
+    </Button>
+  </div>
+);
+
+const Timeline7: React.FC<Timeline7Props> = ({ className }) => {
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const handleNext = () => {
+    setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
+  };
+
+  const handlePrev = () => {
+    setCurrentStep((prev) => Math.max(prev - 1, 0));
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container flex max-w-2xl flex-col items-center gap-10 md:gap-0">
+        <h1 className="mb-10 text-center text-2xll font-bold tracking-tighter text-foreground">
+          گام‌به‌گام
+        </h1>
+        <ProcessBar currentStep={currentStep} steps={steps} />
+        <StepperContent step={steps[currentStep]} />
+        <NavButtons
+          handlePrev={handlePrev}
+          handleNext={handleNext}
+          currentStep={currentStep}
+          totalSteps={steps.length}
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Timeline7 };
diff --git a/blocks/timeline8.tsx b/blocks/timeline8.tsx
new file mode 100644
index 0000000..2e42ac4
--- /dev/null
+++ b/blocks/timeline8.tsx
@@ -0,0 +1,121 @@
+import * as React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type TimelineEntry = {
+  date: string;
+  items: {
+    content: string;
+    highlights?: { text: string; position: number }[];
+  }[];
+};
+
+const timelineData: TimelineEntry[] = [
+  {
+    date: "۱ فروردین ۱۴۰۴",
+    items: [
+      {
+        content:
+          "راه‌اندازی <strong>تولید کد مبتنی بر هوش مصنوعی</strong> در IDE ما؛ توسعه‌دهندگان می‌توانند با دستورات زبان طبیعی کد پایه تولید کنند.",
+      },
+      {
+        content:
+          "معرفی <em>پیشنهادهای کد زمینه‌محور</em> که ساختار پروژه و الگوهای کدنویسی را درک می‌کنند تا تکمیل دقیق‌تری ارائه دهند.",
+      },
+      {
+        content:
+          "افزودن قابلیت <u>بازآرایی خودکار کد</u> که بهبودها را پیشنهاد و روی پایگاه کد موجود اعمال می‌کند.",
+      },
+    ],
+  },
+  {
+    date: "۲۹ اسفند ۱۴۰۳",
+    items: [
+      {
+        content:
+          "انتشار <strong>دستیار اشکال‌زدایی مبتنی بر هوش مصنوعی</strong> که مشکلات احتمالی را شناسایی و پیش از اجرا راه‌حل پیشنهاد می‌دهد.",
+      },
+      {
+        content:
+          "پیاده‌سازی <em>تولید هوشمند مستندات</em> که به‌صورت خودکار از کامنت‌ها و ساختار کد، مستندات جامع می‌سازد.",
+      },
+      {
+        content:
+          "تقویت <u>خودکارسازی بازبینی کد</u> با تحلیل کیفیت کد و بهترین روش‌ها توسط هوش مصنوعی.",
+      },
+    ],
+  },
+  {
+    date: "۲۷ اسفند ۱۴۰۳",
+    items: [
+      {
+        content:
+          "اعلام قابلیت <strong>برنامه‌نویسی دونفره با هوش مصنوعی</strong> که کمک و توضیح بلادرنگ در کدنویسی ارائه می‌دهد.",
+      },
+      {
+        content:
+          "راه‌اندازی <em>مدیریت هوشمند وابستگی‌ها</em> که نسخه‌های بهینه بسته‌ها را پیشنهاد و تعارض‌های احتمالی را شناسایی می‌کند.",
+      },
+      {
+        content:
+          "معرفی <u>تولید خودکار تست</u> که مجموعه تست جامع بر اساس عملکرد کد می‌سازد.",
+      },
+    ],
+  },
+];
+
+interface Timeline8Props {
+  className?: string;
+}
+
+const Timeline8 = ({ className }: Timeline8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground lg:text-2xll">
+          خط زمانی
+        </h1>
+        <div className="relative mx-auto max-w-4xl">
+          <Separator
+            orientation="vertical"
+            className="absolute top-4 start-2 bg-muted"
+          />
+          {timelineData.map((entry, index) => (
+            <div key={index} className="relative mb-10 ps-8">
+              <div className="absolute top-2 start-0 flex size-5 items-center justify-center rounded-full bg-foreground">
+                <div className="size-3 rounded-full bg-background" />
+              </div>
+              <Badge
+                variant="secondary"
+                className="mb-4 rounded-xl px-3 py-2 text-sm"
+              >
+                {entry.date}
+              </Badge>
+
+              <Card className="my-5 border-none shadow-none">
+                <CardContent className="px-2">
+                  <ul className="flex flex-col gap-1">
+                    {entry.items.map((item, itemIndex) => (
+                      <li key={itemIndex} className="flex gap-3 text-start">
+                        <span className="mt-2 h-2 w-2 flex-none rounded-full bg-foreground" />
+                        <span
+                          className="text-md leading-relaxed text-foreground"
+                          dangerouslySetInnerHTML={{ __html: item.content }}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline8 };
diff --git a/blocks/timeline9.tsx b/blocks/timeline9.tsx
new file mode 100644
index 0000000..a4fa8b7
--- /dev/null
+++ b/blocks/timeline9.tsx
@@ -0,0 +1,83 @@
+import * as React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type TimelineEntry = {
+  date: string;
+  title: string;
+  content: string;
+};
+
+const timelineData: TimelineEntry[] = [
+  {
+    date: "۱۹۵۶",
+    title: "تولد هوش مصنوعی",
+    content:
+      "اصطلاح «هوش مصنوعی» در کنفرانس دارتموث ابداع شد و آغاز رسمی این حوزه به‌عنوان یک رشته علمی را رقم زد. جان مک‌کارتی، ماروین مینسکی، نیتانیل رچستر و کلود شانون این رویداد تأثیرگذار را سازماندهی کردند و زمینه را برای دهه‌ها پژوهش و توسعه فراهم ساختند.",
+  },
+  {
+    date: "۱۹۶۶–۱۹۷۳",
+    title: "امیدواری اولیه و اولین زمستان هوش مصنوعی",
+    content:
+      "سال‌های اولیه با خوش‌بینی قابل‌توجهی همراه بود؛ برنامه‌هایی مثل ELIZA (اولین چت‌بات) و SHRDLU (سیستم درک زبان طبیعی) ساخته شد. اما در اوایل دهه ۱۹۷۰ بودجه‌ها کاهش یافت، چون پژوهشگران با محدودیت‌های توان پردازشی اولیه و پیچیدگی هوش انسان روبه‌رو شدند.",
+  },
+  {
+    date: "۱۹۸۰–۱۹۸۷",
+    title: "سیستم‌های خبره و احیا",
+    content:
+      "هوش مصنوعی با توسعه سیستم‌های خبره مثل MYCIN (برای تشخیص پزشکی) و DENDRAL (برای تحلیل شیمیایی) دوباره رونق گرفت. این سیستم‌ها با رویکرد قاعده‌محور، تصمیم‌گیری انسانی را در حوزه‌های خاص شبیه‌سازی می‌کردند و زمینه را برای علاقه و بودجه تازه در پژوهش هوش مصنوعی فراهم کردند.",
+  },
+  {
+    date: "۱۹۹۷",
+    title: "پیروزی Deep Blue بر قهرمان شطرنج",
+    content:
+      "Deep Blue آی‌بی‌ام اولین سیستم رایانه‌ای شد که در مسابقه شش‌بازی، قهرمان وقت جهان گاری کاسپاروف را شکست داد. این نقطه عطف پتانسیل هوش مصنوعی برای پیشی گرفتن از انسان در بازی‌های راهبردی پیچیده را نشان داد و توجه عموم را به خود جلب کرد.",
+  },
+];
+
+interface Timeline9Props {
+  className?: string;
+}
+
+const Timeline9 = ({ className }: Timeline9Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
+      <div className="container">
+        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-2xll">
+          تاریخچه هوش مصنوعی
+        </h1>
+        <div className="relative mx-auto max-w-4xl">
+          <Separator
+            orientation="vertical"
+            className="absolute top-4 start-2 bg-muted"
+          />
+          {timelineData.map((entry, index) => (
+            <div key={index} className="relative mb-10 ps-8">
+              <div className="absolute top-3.5 start-0 flex size-4 items-center justify-center rounded-full bg-foreground" />
+              <h4 className="rounded-xl py-2 text-start text-xl font-bold tracking-tight xl:mb-4 xl:px-3">
+                {entry.title}
+              </h4>
+
+              <h5 className="text-md top-3 -start-34 rounded-xl tracking-tight text-muted-foreground xl:absolute">
+                {entry.date}
+              </h5>
+
+              <Card className="my-5 border-none shadow-none">
+                <CardContent className="px-0 xl:px-2">
+                  <div
+                    className="prose text-start text-foreground dark:prose-invert"
+                    dangerouslySetInnerHTML={{ __html: entry.content }}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Timeline9 };
diff --git a/blocks/todo1.tsx b/blocks/todo1.tsx
new file mode 100644
index 0000000..cbce05f
--- /dev/null
+++ b/blocks/todo1.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { cn } from "@/lib/utils";
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+interface Todo1Props {
+  heading?: string;
+  description?: string;
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+  },
+  {
+    id: "4",
+    title: "برنامه ورزش صبحگاهی",
+    completed: true,
+  },
+  {
+    id: "5",
+    title: "خواندن مستندات رابط کاربری",
+    completed: false,
+  },
+];
+
+const Todo1 = ({
+  heading = "لیست کارهای ساده",
+  description = "روی هر کار کلیک کنید تا وضعیت انجام آن با بازخورد بصری تغییر کند.",
+  initialTodos = defaultTodos,
+  className,
+}: Todo1Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <ItemGroup>
+            {todos.map((todo) => (
+              <Item
+                key={todo.id}
+                variant={todo.completed ? "muted" : "default"}
+                className={cn(
+                  "cursor-pointer items-center border-b transition-opacity",
+                  todo.completed && "opacity-60",
+                )}
+                onClick={() => toggleTodo(todo.id)}
+              >
+                <ItemMedia>
+                  <Checkbox
+                    checked={todo.completed}
+                    onCheckedChange={() => toggleTodo(todo.id)}
+                    onClick={(e) => e.stopPropagation()}
+                    aria-label={
+                      todo.completed
+                        ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                        : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+                    }
+                  />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle
+                    className={
+                      todo.completed ? "text-muted-foreground line-through" : ""
+                    }
+                  >
+                    {todo.title}
+                  </ItemTitle>
+                </ItemContent>
+              </Item>
+            ))}
+          </ItemGroup>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo1 };
diff --git a/blocks/todo10.tsx b/blocks/todo10.tsx
new file mode 100644
index 0000000..f449e7e
--- /dev/null
+++ b/blocks/todo10.tsx
@@ -0,0 +1,1527 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  ArrowDown,
+  ArrowUp,
+  Calendar,
+  Check,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Circle,
+  Copy,
+  Flag,
+  GripVertical,
+  List,
+  MoreVertical,
+  Move,
+  Plus,
+  Puzzle,
+  SendHorizonal,
+  Star,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const formatDueDate = (date: Date) =>
+  date.toLocaleDateString("fa-IR", { month: "short", day: "numeric" });
+
+interface Todo10Labels {
+  moreActions: string;
+  addTaskAbove: string;
+  addTaskBelow: string;
+  dateSection: string;
+  prioritySection: string;
+  today: string;
+  tomorrow: string;
+  nextWeek: string;
+  nextMonth: string;
+  noDate: string;
+  moveTo: string;
+  duplicate: string;
+  copyTaskLink: string;
+  addExtension: string;
+  removeFavorite: string;
+  addFavorite: string;
+  delete: string;
+  cancel: string;
+  deleteDialogTitle: string;
+  deleteDialogDescription: (title: string) => string;
+  addTaskLabel: string;
+  taskPlaceholder: string;
+  dateLabel: string;
+  priorityLabel: string;
+  noPriority: string;
+  selectProject: string;
+  submitTask: string;
+  emptyTitle: string;
+  emptyDescription: string;
+  allTasks: (count: number) => string;
+  completedLabel: string;
+  expandSubtasks: string;
+  collapseSubtasks: string;
+  dragTask: (title: string) => string;
+  markIncomplete: (title: string) => string;
+  markComplete: (title: string) => string;
+}
+
+const defaultLabels: Todo10Labels = {
+  moreActions: "گزینه‌های بیشتر",
+  addTaskAbove: "افزودن کار بالا",
+  addTaskBelow: "افزودن کار پایین",
+  dateSection: "تاریخ",
+  prioritySection: "اولویت",
+  today: "امروز",
+  tomorrow: "فردا",
+  nextWeek: "هفته آینده",
+  nextMonth: "ماه آینده",
+  noDate: "بدون تاریخ",
+  moveTo: "انتقال به…",
+  duplicate: "تکثیر",
+  copyTaskLink: "کپی لینک کار",
+  addExtension: "افزودن افزونه…",
+  removeFavorite: "حذف از علاقه‌مندی‌ها",
+  addFavorite: "افزودن به علاقه‌مندی‌ها",
+  delete: "حذف",
+  cancel: "انصراف",
+  deleteDialogTitle: "حذف کار؟",
+  deleteDialogDescription: (title) =>
+    `کار «${title}» برای همیشه حذف می‌شود.`,
+  addTaskLabel: "افزودن کار جدید",
+  taskPlaceholder: "عنوان کار",
+  dateLabel: "تاریخ",
+  priorityLabel: "اولویت",
+  noPriority: "بدون اولویت",
+  selectProject: "انتخاب پروژه",
+  submitTask: "افزودن کار",
+  emptyTitle: "هنوز کاری ندارید",
+  emptyDescription: "با افزودن اولین کار خود شروع کنید.",
+  allTasks: (count) => `همه کارها (${count})`,
+  completedLabel: "انجام‌شده",
+  expandSubtasks: "نمایش زیرکارها",
+  collapseSubtasks: "پنهان کردن زیرکارها",
+  dragTask: (title) => `جابه‌جایی «${title}»`,
+  markIncomplete: (title) => `علامت‌گذاری «${title}» به‌عنوان انجام‌نشده`,
+  markComplete: (title) => `علامت‌گذاری «${title}» به‌عنوان انجام‌شده`,
+};
+
+interface Todo10Props {
+  projects?: Project[];
+  initialTodos?: Todo[];
+  labels?: Todo10Labels;
+  className?: string;
+}
+
+type Priority = "P1" | "P2" | "P3" | "P4";
+type SortOption =
+  | "manual"
+  | "dueDate"
+  | "priority"
+  | "title"
+  | "createdAt"
+  | "updatedAt";
+
+interface Subtask {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+interface Project {
+  id: string;
+  name: string;
+  color?: string;
+}
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+  projectId: string;
+  priority?: Priority;
+  dueDate?: Date;
+  starred?: boolean;
+  subtasks: Subtask[];
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface TodoFilters {
+  projects: string[];
+  priorities: string[];
+  starredOnly: boolean;
+}
+
+const defaultProjects: Project[] = [
+  { id: "personal", name: "کارهای شخصی 🏠", color: "#3b82f6" },
+  { id: "work", name: "پروژه‌های کاری 💼", color: "#8b5cf6" },
+  { id: "shopping", name: "لیست خرید 🛒", color: "#10b981" },
+  { id: "learning", name: "اهداف یادگیری 📚", color: "#ec4899" },
+];
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+    projectId: "work",
+    priority: "P1",
+    dueDate: new Date(2025, 9, 25),
+    starred: true,
+    subtasks: [
+      { id: "s1", title: "نوشتن مستندات اتصال هوشمند", completed: true },
+      { id: "s2", title: "افزودن نمونه کد", completed: false },
+    ],
+    createdAt: new Date(2025, 9, 15),
+    updatedAt: new Date(2025, 9, 20),
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+    projectId: "work",
+    priority: "P2",
+    subtasks: [],
+    createdAt: new Date(2025, 9, 18),
+    updatedAt: new Date(2025, 9, 20),
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+    projectId: "shopping",
+    priority: "P3",
+    subtasks: [],
+    createdAt: new Date(2025, 9, 20),
+    updatedAt: new Date(2025, 9, 20),
+  },
+  {
+    id: "4",
+    title: "برنامه ورزش صبحگاهی",
+    completed: true,
+    projectId: "personal",
+    priority: "P2",
+    subtasks: [],
+    createdAt: new Date(2024, 9, 19),
+    updatedAt: new Date(2024, 9, 23),
+  },
+  {
+    id: "5",
+    title: "خواندن مستندات رابط کاربری",
+    completed: false,
+    projectId: "learning",
+    priority: "P4",
+    starred: true,
+    subtasks: [],
+    createdAt: new Date(2025, 9, 16),
+    updatedAt: new Date(2025, 9, 20),
+  },
+  {
+    id: "6",
+    title: "آماده‌سازی ارائه جلسه تیم",
+    completed: false,
+    projectId: "work",
+    priority: "P2",
+    dueDate: new Date(2025, 10, 5),
+    subtasks: [
+      { id: "s3", title: "ساخت اسلایدها", completed: false },
+      { id: "s4", title: "آماده‌سازی محیط دمو", completed: false },
+    ],
+    createdAt: new Date(2025, 9, 30),
+    updatedAt: new Date(2025, 9, 30),
+  },
+  {
+    id: "7",
+    title: "برنامه‌ریزی سفر کوهنوردی آخر هفته",
+    completed: false,
+    projectId: "personal",
+    priority: "P3",
+    dueDate: new Date(2025, 10, 8),
+    starred: true,
+    subtasks: [
+      { id: "s5", title: "بررسی پیش‌بینی آب‌وهوا", completed: false },
+      { id: "s6", title: "بستن وسایل", completed: false },
+    ],
+    createdAt: new Date(2025, 9, 30),
+    updatedAt: new Date(2025, 9, 30),
+  },
+  {
+    id: "8",
+    title: "بازبینی pull request شماره ۲۳۴",
+    completed: true,
+    projectId: "work",
+    priority: "P2",
+    subtasks: [],
+    createdAt: new Date(2024, 9, 22),
+    updatedAt: new Date(2024, 9, 23),
+  },
+  {
+    id: "9",
+    title: "به‌روزرسانی مستندات پروژه",
+    completed: true,
+    projectId: "work",
+    priority: "P3",
+    subtasks: [],
+    createdAt: new Date(2024, 9, 22),
+    updatedAt: new Date(2024, 9, 23),
+  },
+  {
+    id: "10",
+    title: "رفع مشکلات طراحی واکنش‌گرا",
+    completed: true,
+    projectId: "work",
+    priority: "P1",
+    subtasks: [],
+    createdAt: new Date(2024, 9, 21),
+    updatedAt: new Date(2024, 9, 22),
+  },
+];
+
+const priorityColors: Record<Priority, string> = {
+  P1: "text-red-500",
+  P2: "text-orange-500",
+  P3: "text-yellow-500",
+  P4: "text-gray-500",
+};
+
+const priorityLabels: Record<Priority, string> = {
+  P1: "P1 - فوری",
+  P2: "P2 - بالا",
+  P3: "P3 - متوسط",
+  P4: "P4 - پایین",
+};
+
+function sortTodos(todos: Todo[], sortBy: SortOption): Todo[] {
+  if (sortBy === "manual") return todos;
+
+  return [...todos].sort((a, b) => {
+    switch (sortBy) {
+      case "dueDate":
+        if (!a.dueDate && !b.dueDate) return 0;
+        if (!a.dueDate) return 1;
+        if (!b.dueDate) return -1;
+        return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
+
+      case "priority": {
+        const priorityOrder = { P1: 1, P2: 2, P3: 3, P4: 4 };
+        const aPriority = a.priority ? priorityOrder[a.priority] : 5;
+        const bPriority = b.priority ? priorityOrder[b.priority] : 5;
+        return aPriority - bPriority;
+      }
+
+      case "title":
+        return a.title.localeCompare(b.title, "fa");
+
+      case "createdAt":
+        return (
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        );
+
+      case "updatedAt":
+        return (
+          new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+        );
+
+      default:
+        return 0;
+    }
+  });
+}
+
+function filterTodos(todos: Todo[], filters: TodoFilters): Todo[] {
+  let result = [...todos];
+
+  if (filters.starredOnly) {
+    result = result.filter((todo) => todo.starred);
+  }
+  if (filters.projects.length > 0) {
+    result = result.filter((todo) => filters.projects.includes(todo.projectId));
+  }
+  if (filters.priorities.length > 0) {
+    result = result.filter((todo) =>
+      todo.priority ? filters.priorities.includes(todo.priority) : false,
+    );
+  }
+
+  return result;
+}
+
+interface TodoActionsDropdownProps {
+  todo: Todo;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDelete?: (id: string) => void;
+  onUpdate?: (todo: Todo) => void;
+  onToggleStar?: (id: string) => void;
+  labels: Todo10Labels;
+}
+
+const TodoActionsDropdown = ({
+  todo,
+  isOpen,
+  onOpenChange,
+  onDelete,
+  onUpdate,
+  onToggleStar,
+  labels,
+}: TodoActionsDropdownProps) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  const dateOptions = [
+    { type: "today" as const, label: labels.today, color: "text-blue-500" },
+    { type: "tomorrow" as const, label: labels.tomorrow, color: "text-green-500" },
+    { type: "next-week" as const, label: labels.nextWeek, color: "text-cyan-500" },
+    {
+      type: "next-month" as const,
+      label: labels.nextMonth,
+      color: "text-orange-500",
+    },
+    { type: "no-date" as const, label: labels.noDate, color: "text-yellow-500" },
+  ];
+
+  const getPresetDate = (
+    type: "today" | "tomorrow" | "next-week" | "next-month" | "no-date",
+  ): Date | undefined => {
+    const now = new Date();
+    switch (type) {
+      case "today":
+        return now;
+      case "tomorrow": {
+        const tomorrow = new Date(now);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+        return tomorrow;
+      }
+      case "next-week": {
+        const nextWeek = new Date(now);
+        nextWeek.setDate(nextWeek.getDate() + 7);
+        return nextWeek;
+      }
+      case "next-month": {
+        const nextMonth = new Date(now);
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        return nextMonth;
+      }
+      case "no-date":
+        return undefined;
+    }
+  };
+
+  const setDate = (
+    dateType: "today" | "tomorrow" | "next-week" | "next-month" | "no-date",
+  ) => {
+    if (!onUpdate) return;
+    const newDate = getPresetDate(dateType);
+    onUpdate({ ...todo, dueDate: newDate });
+  };
+
+  const setPriority = (priority: Priority) => {
+    if (!onUpdate) return;
+    onUpdate({ ...todo, priority });
+  };
+
+  const handleCopyLink = () => {
+    const taskUrl = `${window.location.origin}/task/${todo.id}`;
+    navigator.clipboard.writeText(taskUrl);
+  };
+
+  return (
+    <>
+      <DropdownMenu modal={false} open={isOpen} onOpenChange={onOpenChange}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            aria-label={labels.moreActions}
+            className={cn(
+              "-me-2 transition-all duration-200 ease-out",
+              "-translate-x-2 scale-50 opacity-0",
+              "group-hover:translate-x-0 group-hover:scale-100 group-hover:opacity-100",
+              isOpen && "translate-x-0 scale-100 opacity-100",
+            )}
+          >
+            <MoreVertical className="size-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          onClick={(e) => e.stopPropagation()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          className="w-64"
+        >
+          <DropdownMenuItem onClick={(e) => e.stopPropagation()}>
+            <ArrowUp className="size-4" aria-hidden />
+            {labels.addTaskAbove}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={(e) => e.stopPropagation()}>
+            <ArrowDown className="size-4" aria-hidden />
+            {labels.addTaskBelow}
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <div className="px-2 py-1.5">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">{labels.dateSection}</span>
+              <span className="text-xs text-muted-foreground">T</span>
+            </div>
+            <TooltipProvider delayDuration={300}>
+              <div className="mt-1 flex items-center gap-3">
+                {dateOptions.map((option) => (
+                  <Tooltip key={option.type}>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setDate(option.type);
+                        }}
+                        className="cursor-pointer rounded p-1 transition-colors hover:bg-accent"
+                      >
+                        <Calendar className={`${option.color} size-4`} />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{option.label}</TooltipContent>
+                  </Tooltip>
+                ))}
+              </div>
+            </TooltipProvider>
+          </div>
+
+          <div className="px-2 py-1.5">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">{labels.prioritySection}</span>
+              <span className="text-xs text-muted-foreground">Y</span>
+            </div>
+            <TooltipProvider delayDuration={300}>
+              <div className="mt-1 flex items-center gap-3">
+                {(["P1", "P2", "P3", "P4"] as Priority[]).map((priority) => (
+                  <Tooltip key={priority}>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setPriority(priority);
+                        }}
+                      >
+                        <Circle
+                          className={cn("size-4", priorityColors[priority])}
+                        />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{priorityLabels[priority]}</TooltipContent>
+                  </Tooltip>
+                ))}
+              </div>
+            </TooltipProvider>
+          </div>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem onClick={(e) => e.stopPropagation()}>
+            <Move className="size-4" aria-hidden />
+            {labels.moveTo}
+            <span className="ms-auto text-xs text-muted-foreground">V</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={(e) => e.stopPropagation()}>
+            <Plus className="size-4" aria-hidden />
+            {labels.duplicate}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handleCopyLink();
+            }}
+          >
+            <Copy className="size-4" aria-hidden />
+            {labels.copyTaskLink}
+            <span className="ms-auto text-xs text-muted-foreground">⇧ ⌘ L</span>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem onClick={(e) => e.stopPropagation()}>
+            <Puzzle className="size-4" aria-hidden />
+            {labels.addExtension}
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          {!todo.completed && (
+            <>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleStar?.(todo.id);
+                }}
+              >
+                <Star
+                  className={cn(
+                    "size-4",
+                    todo.starred &&
+                      "fill-amber-500 text-amber-500 dark:fill-amber-400 dark:text-amber-400",
+                  )}
+                />
+                {todo.starred ? labels.removeFavorite : labels.addFavorite}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
+
+          <DropdownMenuItem
+            variant="destructive"
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpenChange(false);
+              setShowDeleteDialog(true);
+            }}
+          >
+            <Trash2 className="size-4" aria-hidden />
+            {labels.delete}
+            <span className="ms-auto text-xs text-muted-foreground">⌘ ⌫</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent dir="rtl" lang="fa" className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{labels.deleteDialogTitle}</DialogTitle>
+            <DialogDescription>
+              {labels.deleteDialogDescription(todo.title)}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowDeleteDialog(false);
+              }}
+            >
+              {labels.cancel}
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete?.(todo.id);
+                setShowDeleteDialog(false);
+              }}
+            >
+              {labels.delete}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  project?: Project;
+  onToggle: (id: string) => void;
+  onToggleSubtask: (todoId: string, subtaskId: string) => void;
+  onToggleExpand: (id: string) => void;
+  onDelete?: (id: string) => void;
+  onUpdate?: (todo: Todo) => void;
+  onToggleStar?: (id: string) => void;
+  isExpanded: boolean;
+  labels: Todo10Labels;
+}
+
+const SortableTodoItem = ({
+  todo,
+  project,
+  onToggle,
+  onToggleSubtask,
+  onToggleExpand,
+  onDelete,
+  onUpdate,
+  onToggleStar,
+  isExpanded,
+  labels,
+}: SortableTodoItemProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const completedSubtasks = todo.subtasks.filter((st) => st.completed).length;
+  const totalSubtasks = todo.subtasks.length;
+
+  return (
+    <div ref={setNodeRef} style={style} className="w-full">
+      <Item
+        variant={todo.completed ? "muted" : "default"}
+        className={cn(
+          "group cursor-pointer items-start rounded-none border-0 border-b border-border",
+          todo.completed ? "py-1 opacity-60 hover:opacity-80" : "py-2",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-0.5">
+            <div className="relative flex items-center">
+              {todo.subtasks.length > 0 && !todo.completed && (
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onToggleExpand(todo.id);
+                  }}
+                  className="absolute -start-8"
+                  aria-label={
+                    isExpanded ? labels.collapseSubtasks : labels.expandSubtasks
+                  }
+                  aria-expanded={isExpanded}
+                >
+                  <ChevronRight
+                    className={cn(
+                      "size-4 text-muted-foreground transition-transform duration-200 rtl:rotate-180",
+                      isExpanded && "rotate-90 rtl:rotate-90",
+                    )}
+                  />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                {...attributes}
+                {...listeners}
+                className={cn(
+                  "absolute -translate-x-1 scale-50 cursor-grab opacity-0 transition-all group-hover:translate-x-0 group-hover:scale-100 group-hover:opacity-100 active:cursor-grabbing",
+                  todo.subtasks.length > 0 ? "-start-14" : "-start-8",
+                )}
+                onClick={(e) => e.stopPropagation()}
+                aria-label={labels.dragTask(todo.title)}
+              >
+                <GripVertical className="size-4 text-muted-foreground" />
+              </Button>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggle(todo.id);
+              }}
+              className={cn(
+                "shrink-0 rounded-full transition-all duration-200",
+                "-ms-1",
+                todo.completed && "-me-2",
+              )}
+              aria-label={
+                todo.completed
+                  ? labels.markIncomplete(todo.title)
+                  : labels.markComplete(todo.title)
+              }
+            >
+              <div className="relative">
+                {!todo.completed ? (
+                  <Circle
+                    className={cn(
+                      "size-5",
+                      todo.priority && priorityColors[todo.priority],
+                    )}
+                  />
+                ) : (
+                  <CheckCircle2
+                    className="size-5 text-muted-foreground"
+                    strokeWidth={2}
+                  />
+                )}
+              </div>
+            </Button>
+          </div>
+        </ItemMedia>
+        <ItemContent className="min-w-0">
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-1.5">
+              <ItemTitle
+                className={cn(
+                  "flex-1",
+                  todo.completed && "text-muted-foreground line-through",
+                )}
+              >
+                {todo.title}
+              </ItemTitle>
+              <div className="flex shrink-0 items-center gap-1">
+                {todo.dueDate && !todo.completed && (
+                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                    <Calendar className="size-3" />
+                    {formatDueDate(todo.dueDate)}
+                  </div>
+                )}
+                {!todo.completed && (
+                  <div
+                    className={cn(
+                      todo.completed
+                        ? "opacity-0 transition-opacity group-hover:opacity-100"
+                        : "",
+                    )}
+                  >
+                    <TodoActionsDropdown
+                      todo={todo}
+                      isOpen={isDropdownOpen}
+                      onOpenChange={setIsDropdownOpen}
+                      onDelete={onDelete}
+                      onUpdate={onUpdate}
+                      onToggleStar={onToggleStar}
+                      labels={labels}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+            {project && !todo.completed && (
+              <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground/60">
+                <span>{project.name}</span>
+                {totalSubtasks > 0 && (
+                  <>
+                    <span>·</span>
+                    <span>{totalSubtasks}</span>
+                  </>
+                )}
+              </div>
+            )}
+            {isExpanded && todo.subtasks.length > 0 && !todo.completed && (
+              <div
+                className={cn(
+                  "overflow-hidden transition-all duration-300 ease-in-out",
+                  isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0",
+                )}
+              >
+                <div className="mt-1.5 space-y-0.5">
+                  {todo.subtasks.map((subtask) => (
+                    <div
+                      key={subtask.id}
+                      className="group/subtask -ms-1 flex items-center gap-1.5 rounded px-1 py-0.5 transition-colors hover:bg-accent/20"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onToggleSubtask(todo.id, subtask.id);
+                      }}
+                    >
+                      <button
+                        className={cn(
+                          "flex size-3.5 shrink-0 items-center justify-center rounded border transition-all",
+                          subtask.completed
+                            ? "border-primary bg-primary"
+                            : "border-muted-foreground/30 hover:border-primary/50",
+                        )}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onToggleSubtask(todo.id, subtask.id);
+                        }}
+                        aria-label={
+                          subtask.completed
+                            ? labels.markIncomplete(subtask.title)
+                            : labels.markComplete(subtask.title)
+                        }
+                      >
+                        {subtask.completed && (
+                          <Check
+                            className="size-2.5 text-primary-foreground"
+                            strokeWidth={3}
+                          />
+                        )}
+                      </button>
+                      <span
+                        className={cn(
+                          "line-clamp-1 cursor-pointer text-xs transition-all select-none",
+                          subtask.completed
+                            ? "text-muted-foreground/50 line-through"
+                            : "text-muted-foreground",
+                        )}
+                      >
+                        {subtask.title}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </ItemContent>
+      </Item>
+    </div>
+  );
+};
+
+interface AddTaskFormProps {
+  projects: Project[];
+  selectedProjectId: string;
+  onAddTask: (
+    title: string,
+    projectId: string,
+    dueDate?: Date,
+    priority?: Priority,
+  ) => void;
+  onProjectChange: (projectId: string) => void;
+  labels: Todo10Labels;
+}
+
+const AddTaskForm = ({
+  projects,
+  selectedProjectId,
+  onAddTask,
+  onProjectChange,
+  labels,
+}: AddTaskFormProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [title, setTitle] = useState("");
+  const [date, setDate] = useState<Date | undefined>();
+  const [priority, setPriority] = useState<Priority | undefined>();
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const selectedProject = projects.find((p) => p.id === selectedProjectId);
+
+  const handleAddTask = () => {
+    if (title.trim()) {
+      onAddTask(title.trim(), selectedProjectId, date, priority);
+      setTitle("");
+      setDate(undefined);
+      setPriority(undefined);
+      setIsExpanded(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setTitle("");
+    setDate(undefined);
+    setPriority(undefined);
+    setIsExpanded(false);
+  };
+
+  if (!isExpanded) {
+    return (
+      <Button
+        variant="ghost"
+        size="lg"
+        className="w-full justify-start gap-2"
+        onClick={() => setIsExpanded(true)}
+      >
+        <Plus className="h-4 w-4" aria-hidden />
+        {labels.addTaskLabel}
+      </Button>
+    );
+  }
+
+  return (
+    <InputGroup>
+      <InputGroupInput
+        autoFocus
+        placeholder={labels.taskPlaceholder}
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        aria-label={labels.taskPlaceholder}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && title.trim()) {
+            e.preventDefault();
+            handleAddTask();
+          }
+          if (e.key === "Escape") {
+            handleCancel();
+          }
+        }}
+        className="py-3 text-base font-medium"
+      />
+      <InputGroupAddon align="block-end" className="flex-wrap">
+        <Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
+          <PopoverTrigger asChild>
+            <InputGroupButton
+              size="sm"
+              className={date ? "text-blue-500" : ""}
+              aria-label={labels.dateLabel}
+            >
+              <Calendar className="h-4 w-4" aria-hidden />
+              {date ? (
+                <span className="text-xs">{formatDueDate(date)}</span>
+              ) : (
+                labels.dateLabel
+              )}
+            </InputGroupButton>
+          </PopoverTrigger>
+          <PopoverContent
+            dir="rtl"
+            lang="fa"
+            className="w-auto p-2"
+            align="start"
+          >
+            <div className="space-y-2">
+              <div className="space-y-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start"
+                  onClick={() => {
+                    setDate(new Date());
+                    setDatePickerOpen(false);
+                  }}
+                >
+                  {labels.today}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start"
+                  onClick={() => {
+                    const tomorrow = new Date();
+                    tomorrow.setDate(tomorrow.getDate() + 1);
+                    setDate(tomorrow);
+                    setDatePickerOpen(false);
+                  }}
+                >
+                  {labels.tomorrow}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start"
+                  onClick={() => {
+                    const nextWeek = new Date();
+                    nextWeek.setDate(nextWeek.getDate() + 7);
+                    setDate(nextWeek);
+                    setDatePickerOpen(false);
+                  }}
+                >
+                  {labels.nextWeek}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start"
+                  onClick={() => {
+                    setDate(undefined);
+                    setDatePickerOpen(false);
+                  }}
+                >
+                  {labels.noDate}
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <InputGroupButton
+              size="sm"
+              className={priority ? priorityColors[priority] : ""}
+              aria-label={labels.priorityLabel}
+            >
+              {priority ? (
+                <Circle
+                  className={cn("h-4 w-4", priorityColors[priority])}
+                  aria-hidden
+                />
+              ) : (
+                <Flag className="h-4 w-4" aria-hidden />
+              )}
+              {priority ? priorityLabels[priority] : labels.priorityLabel}
+            </InputGroupButton>
+          </PopoverTrigger>
+          <PopoverContent
+            dir="rtl"
+            lang="fa"
+            className="w-48 p-2"
+            align="start"
+          >
+            <div className="space-y-1">
+              {(["P1", "P2", "P3", "P4"] as Priority[]).map((p) => (
+                <Button
+                  key={p}
+                  variant={priority === p ? "secondary" : "ghost"}
+                  className="w-full justify-start gap-2"
+                  onClick={() => setPriority(p)}
+                >
+                  <Circle className={cn("h-3.5 w-3.5", priorityColors[p])} />
+                  {priorityLabels[p]}
+                </Button>
+              ))}
+              <Button
+                variant="ghost"
+                className="w-full justify-start"
+                onClick={() => setPriority(undefined)}
+              >
+                {labels.noPriority}
+              </Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </InputGroupAddon>
+      <InputGroupAddon align="block-end">
+        <Popover>
+          <PopoverTrigger asChild>
+            <InputGroupButton size="sm" className="gap-2">
+              {selectedProject ? selectedProject.name : labels.selectProject}
+              <ChevronDown className="h-3.5 w-3.5" aria-hidden />
+            </InputGroupButton>
+          </PopoverTrigger>
+          <PopoverContent
+            dir="rtl"
+            lang="fa"
+            className="w-56 p-2"
+            align="start"
+          >
+            <div className="space-y-1">
+              {projects.map((project) => (
+                <Button
+                  key={project.id}
+                  variant={
+                    selectedProjectId === project.id ? "secondary" : "ghost"
+                  }
+                  className="w-full justify-start"
+                  onClick={() => onProjectChange(project.id)}
+                >
+                  {project.name}
+                </Button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+        <InputGroupButton
+          size="sm"
+          onClick={handleCancel}
+          variant="secondary"
+          className="ms-auto"
+        >
+          <X className="h-4 w-4" aria-hidden />
+          <span className="hidden sm:inline">{labels.cancel}</span>
+        </InputGroupButton>
+        <InputGroupButton
+          size="sm"
+          onClick={handleAddTask}
+          disabled={!title.trim()}
+          variant="default"
+        >
+          <SendHorizonal className="h-4 w-4 rtl:rotate-180" aria-hidden />
+          <span className="hidden sm:inline">{labels.submitTask}</span>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+};
+
+const Todo10 = ({
+  projects = defaultProjects,
+  initialTodos = defaultTodos,
+  labels = defaultLabels,
+  className,
+}: Todo10Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+  const [sortBy, setSortBy] = useState<SortOption>("manual");
+  const [filters, setFilters] = useState<TodoFilters>({
+    projects: [],
+    priorities: [],
+    starredOnly: false,
+  });
+  const [selectedProjectId, setSelectedProjectId] = useState<string>(
+    projects[0]?.id ?? "personal",
+  );
+  const [isCompletedExpanded, setIsCompletedExpanded] = useState(true);
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+  const [expandedTodos, setExpandedTodos] = useState<Set<string>>(
+    new Set(
+      initialTodos
+        .filter((t) => t.subtasks.length > 0 && !t.completed)
+        .map((t) => t.id),
+    ),
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const filteredTodos = useMemo(() => {
+    return filterTodos(todos, filters);
+  }, [todos, filters]);
+
+  const { filteredActiveTodos, filteredCompletedTodos } = useMemo(() => {
+    const completedTasks = filteredTodos.filter((todo) => todo.completed);
+    const activeTasks = filteredTodos.filter((todo) => !todo.completed);
+
+    const sortedActive = sortTodos(activeTasks, sortBy);
+    const sortedCompleted = sortTodos(completedTasks, sortBy);
+
+    return {
+      filteredActiveTodos: sortedActive,
+      filteredCompletedTodos: sortedCompleted,
+    };
+  }, [filteredTodos, sortBy]);
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  const toggleSubtask = (todoId: string, subtaskId: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === todoId
+          ? {
+              ...todo,
+              subtasks: todo.subtasks.map((st) =>
+                st.id === subtaskId ? { ...st, completed: !st.completed } : st,
+              ),
+            }
+          : todo,
+      ),
+    );
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpandedTodos((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const addTask = (
+    title: string,
+    projectId: string,
+    dueDate?: Date,
+    priority?: Priority,
+  ) => {
+    const newTodo: Todo = {
+      id: `todo-${Date.now()}`,
+      title,
+      completed: false,
+      projectId,
+      dueDate,
+      priority,
+      subtasks: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    setTodos((prevTodos) => [...prevTodos, newTodo]);
+  };
+
+  const handleUpdate = (updatedTodo: Todo) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === updatedTodo.id
+          ? { ...updatedTodo, updatedAt: new Date() }
+          : todo,
+      ),
+    );
+  };
+
+  const handleDelete = (id: string) => {
+    setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
+  };
+
+  const handleToggleStar = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, starred: !todo.starred } : todo,
+      ),
+    );
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = todos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id && sortBy === "manual") {
+      const oldIndex = todos.findIndex((item) => item.id === active.id);
+      const newIndex = todos.findIndex((item) => item.id === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setTodos((items) => arrayMove(items, oldIndex, newIndex));
+      }
+    }
+
+    setActiveTodo(null);
+  };
+
+  const hasTodos = todos.length > 0;
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          {!hasTodos ? (
+            <Empty>
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <List aria-hidden />
+                </EmptyMedia>
+                <EmptyTitle>{labels.emptyTitle}</EmptyTitle>
+                <EmptyDescription>{labels.emptyDescription}</EmptyDescription>
+              </EmptyHeader>
+              <EmptyContent>
+                <AddTaskForm
+                  projects={projects}
+                  selectedProjectId={selectedProjectId}
+                  onAddTask={addTask}
+                  onProjectChange={setSelectedProjectId}
+                  labels={labels}
+                />
+              </EmptyContent>
+            </Empty>
+          ) : (
+            <div className="mx-auto flex w-full max-w-4xl flex-col gap-4">
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-semibold">
+                  {labels.allTasks(filteredActiveTodos.length)}
+                </h3>
+              </div>
+
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext
+                  items={filteredActiveTodos.map((t) => t.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <ItemGroup className="w-full">
+                    {filteredActiveTodos.map((todo) => {
+                      const project = projects.find(
+                        (p) => p.id === todo.projectId,
+                      );
+                      return (
+                        <SortableTodoItem
+                          key={todo.id}
+                          todo={todo}
+                          project={project}
+                          onToggle={toggleTodo}
+                          onToggleSubtask={toggleSubtask}
+                          onToggleExpand={toggleExpand}
+                          onDelete={handleDelete}
+                          onUpdate={handleUpdate}
+                          onToggleStar={handleToggleStar}
+                          isExpanded={expandedTodos.has(todo.id)}
+                          labels={labels}
+                        />
+                      );
+                    })}
+                  </ItemGroup>
+                </SortableContext>
+
+                <AddTaskForm
+                  projects={projects}
+                  selectedProjectId={selectedProjectId}
+                  onAddTask={addTask}
+                  onProjectChange={setSelectedProjectId}
+                  labels={labels}
+                />
+
+                {filteredCompletedTodos.length > 0 && (
+                  <div className="space-y-3 border-t border-border/50 pt-6">
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setIsCompletedExpanded(!isCompletedExpanded)
+                      }
+                      className="group flex w-full items-center gap-2 text-xs font-semibold text-muted-foreground transition-colors hover:text-foreground"
+                      aria-expanded={isCompletedExpanded}
+                      aria-label={
+                        isCompletedExpanded
+                          ? `بستن بخش ${labels.completedLabel}`
+                          : `باز کردن بخش ${labels.completedLabel}`
+                      }
+                    >
+                      <ChevronDown
+                        className={cn(
+                          "size-3.5 text-muted-foreground transition-transform duration-200",
+                          !isCompletedExpanded && "-rotate-90",
+                        )}
+                        aria-hidden
+                      />
+                      <span>{labels.completedLabel}</span>
+                      <span className="rounded-full bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                        {filteredCompletedTodos.length}
+                      </span>
+                    </button>
+
+                    <div
+                      className={cn(
+                        "overflow-hidden transition-all duration-300 ease-in-out",
+                        isCompletedExpanded
+                          ? "max-h-[2000px] opacity-100"
+                          : "max-h-0 opacity-0",
+                      )}
+                    >
+                      <ItemGroup className="w-full">
+                        {filteredCompletedTodos.map((todo) => {
+                          const project = projects.find(
+                            (p) => p.id === todo.projectId,
+                          );
+                          return (
+                            <SortableTodoItem
+                              key={todo.id}
+                              todo={todo}
+                              project={project}
+                              onToggle={toggleTodo}
+                              onToggleSubtask={toggleSubtask}
+                              onToggleExpand={toggleExpand}
+                              onDelete={handleDelete}
+                              onUpdate={handleUpdate}
+                              onToggleStar={handleToggleStar}
+                              isExpanded={expandedTodos.has(todo.id)}
+                              labels={labels}
+                            />
+                          );
+                        })}
+                      </ItemGroup>
+                    </div>
+                  </div>
+                )}
+
+                <DragOverlay>
+                  {activeTodo ? (
+                    <Item
+                      variant={activeTodo.completed ? "muted" : "default"}
+                      className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                    >
+                      <ItemMedia>
+                        <div className="flex items-center gap-2">
+                          <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            className="cursor-grabbing"
+                            aria-hidden
+                            tabIndex={-1}
+                          >
+                            <GripVertical className="size-4 text-muted-foreground" />
+                          </Button>
+                          <Checkbox
+                            checked={activeTodo.completed}
+                            aria-hidden
+                            tabIndex={-1}
+                          />
+                        </div>
+                      </ItemMedia>
+                      <ItemContent>
+                        <ItemTitle
+                          className={
+                            activeTodo.completed
+                              ? "text-muted-foreground line-through"
+                              : ""
+                          }
+                        >
+                          {activeTodo.title}
+                        </ItemTitle>
+                      </ItemContent>
+                    </Item>
+                  ) : null}
+                </DragOverlay>
+              </DndContext>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo10 };
diff --git a/blocks/todo2.tsx b/blocks/todo2.tsx
new file mode 100644
index 0000000..ab0f49a
--- /dev/null
+++ b/blocks/todo2.tsx
@@ -0,0 +1,264 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { cn } from "@/lib/utils";
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+interface Todo2Props {
+  heading?: string;
+  description?: string;
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+  },
+  {
+    id: "4",
+    title: "برنامه ورزش صبحگاهی",
+    completed: true,
+  },
+  {
+    id: "5",
+    title: "خواندن مستندات رابط کاربری",
+    completed: false,
+  },
+];
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  onToggle: (id: string) => void;
+}
+
+const SortableTodoItem = ({ todo, onToggle }: SortableTodoItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <Item
+        variant={todo.completed ? "muted" : "default"}
+        className={cn(
+          "cursor-pointer items-center border-b transition-opacity",
+          todo.completed && "opacity-60",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              {...attributes}
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`جابه‌جایی «${todo.title}»`}
+            >
+              <GripVertical className="size-4 text-muted-foreground" />
+            </Button>
+            <Checkbox
+              checked={todo.completed}
+              onCheckedChange={() => onToggle(todo.id)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                todo.completed
+                  ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                  : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+              }
+            />
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle
+            className={
+              todo.completed ? "text-muted-foreground line-through" : ""
+            }
+          >
+            {todo.title}
+          </ItemTitle>
+        </ItemContent>
+      </Item>
+    </div>
+  );
+};
+
+const Todo2 = ({
+  heading = "لیست کارها با کشیدن و رها کردن",
+  description =
+    "با دستگیره کارها را مرتب کنید و برای تغییر وضعیت انجام روی آن‌ها کلیک کنید.",
+  initialTodos = defaultTodos,
+  className,
+}: Todo2Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = todos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setTodos((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+
+    setActiveTodo(null);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={todos.map((t) => t.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <ItemGroup className="max-w-2xl">
+                {todos.map((todo) => (
+                  <SortableTodoItem
+                    key={todo.id}
+                    todo={todo}
+                    onToggle={toggleTodo}
+                  />
+                ))}
+              </ItemGroup>
+            </SortableContext>
+            <DragOverlay>
+              {activeTodo ? (
+                <Item
+                  variant={activeTodo.completed ? "muted" : "default"}
+                  className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                >
+                  <ItemMedia>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-grabbing"
+                        aria-hidden
+                        tabIndex={-1}
+                      >
+                        <GripVertical className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Checkbox
+                        checked={activeTodo.completed}
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    </div>
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle
+                      className={
+                        activeTodo.completed
+                          ? "text-muted-foreground line-through"
+                          : ""
+                      }
+                    >
+                      {activeTodo.title}
+                    </ItemTitle>
+                  </ItemContent>
+                </Item>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo2 };
diff --git a/blocks/todo3.tsx b/blocks/todo3.tsx
new file mode 100644
index 0000000..eb8b277
--- /dev/null
+++ b/blocks/todo3.tsx
@@ -0,0 +1,369 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ChevronDown, GripVertical } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { cn } from "@/lib/utils";
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+interface Todo3Props {
+  heading?: string;
+  description?: string;
+  activeLabel?: string;
+  completedLabel?: string;
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+  },
+  {
+    id: "4",
+    title: "برنامه ورزش صبحگاهی",
+    completed: true,
+  },
+  {
+    id: "5",
+    title: "خواندن مستندات رابط کاربری",
+    completed: false,
+  },
+  {
+    id: "6",
+    title: "به‌روزرسانی مستندات پروژه",
+    completed: true,
+  },
+];
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  onToggle: (id: string) => void;
+  isAnimating?: boolean;
+}
+
+const SortableTodoItem = ({
+  todo,
+  onToggle,
+  isAnimating = false,
+}: SortableTodoItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <Item
+        variant={todo.completed || isAnimating ? "muted" : "default"}
+        className={cn(
+          "cursor-pointer items-center border-b transition-all duration-500",
+          isAnimating && "opacity-0",
+          !isAnimating && todo.completed && "opacity-60",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              {...attributes}
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`جابه‌جایی «${todo.title}»`}
+            >
+              <GripVertical className="size-4 text-muted-foreground" />
+            </Button>
+            <Checkbox
+              checked={todo.completed || isAnimating}
+              onCheckedChange={() => onToggle(todo.id)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                todo.completed
+                  ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                  : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+              }
+            />
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle
+            className={cn(
+              "transition-all duration-500",
+              (todo.completed || isAnimating) &&
+                "text-muted-foreground line-through",
+            )}
+          >
+            {todo.title}
+          </ItemTitle>
+        </ItemContent>
+      </Item>
+    </div>
+  );
+};
+
+const Todo3 = ({
+  heading = "لیست کارها با بخش انجام‌شده‌ها",
+  description =
+    "کارها را با کشیدن مرتب کنید، وضعیت انجام را تغییر دهید و کارهای انجام‌شده را در بخشی تاشو مدیریت کنید.",
+  activeLabel = "فعال",
+  completedLabel = "انجام‌شده",
+  initialTodos = defaultTodos,
+  className,
+}: Todo3Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+  const [isCompletedExpanded, setIsCompletedExpanded] = useState(true);
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+  const [animatingTodoId, setAnimatingTodoId] = useState<string | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const toggleTodo = (id: string) => {
+    const todo = todos.find((t) => t.id === id);
+    if (!todo) return;
+
+    if (!todo.completed) {
+      setAnimatingTodoId(id);
+      setTimeout(() => {
+        setTodos((prevTodos) =>
+          prevTodos.map((t) => (t.id === id ? { ...t, completed: true } : t)),
+        );
+        setAnimatingTodoId(null);
+      }, 1000);
+    } else {
+      setTodos((prevTodos) =>
+        prevTodos.map((t) => (t.id === id ? { ...t, completed: false } : t)),
+      );
+    }
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = todos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setTodos((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+
+    setActiveTodo(null);
+  };
+
+  const activeTodos = todos.filter((todo) => !todo.completed);
+  const completedTodos = todos.filter((todo) => todo.completed);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="flex max-w-2xl flex-col gap-6">
+              {activeTodos.length > 0 && (
+                <div className="flex flex-col gap-2">
+                  <h3 className="text-lg font-semibold">
+                    {activeLabel} ({activeTodos.length})
+                  </h3>
+                  <SortableContext
+                    items={activeTodos.map((t) => t.id)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    <ItemGroup>
+                      {activeTodos.map((todo) => (
+                        <SortableTodoItem
+                          key={todo.id}
+                          todo={todo}
+                          onToggle={toggleTodo}
+                          isAnimating={animatingTodoId === todo.id}
+                        />
+                      ))}
+                    </ItemGroup>
+                  </SortableContext>
+                </div>
+              )}
+
+              {completedTodos.length > 0 && (
+                <div className="flex flex-col gap-3 border-t border-border/50 pt-6">
+                  <button
+                    type="button"
+                    onClick={() => setIsCompletedExpanded(!isCompletedExpanded)}
+                    className="group flex w-full items-center gap-2 text-xs font-semibold text-muted-foreground transition-colors hover:text-foreground"
+                    aria-expanded={isCompletedExpanded}
+                    aria-label={
+                      isCompletedExpanded
+                        ? `بستن بخش ${completedLabel}`
+                        : `باز کردن بخش ${completedLabel}`
+                    }
+                  >
+                    <ChevronDown
+                      className={cn(
+                        "size-3.5 text-muted-foreground transition-transform duration-200",
+                        !isCompletedExpanded && "-rotate-90",
+                      )}
+                      aria-hidden
+                    />
+                    <span>{completedLabel}</span>
+                    <span className="rounded-full bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                      {completedTodos.length}
+                    </span>
+                  </button>
+
+                  <div
+                    className={cn(
+                      "overflow-hidden transition-all duration-300 ease-in-out",
+                      isCompletedExpanded
+                        ? "max-h-[2000px] opacity-100"
+                        : "max-h-0 opacity-0",
+                    )}
+                  >
+                    <ItemGroup>
+                      {completedTodos.map((todo) => (
+                        <Item
+                          key={todo.id}
+                          variant="muted"
+                          className="cursor-pointer items-center border-b opacity-60 transition-all duration-500 hover:opacity-80"
+                          onClick={() => toggleTodo(todo.id)}
+                        >
+                          <ItemMedia>
+                            <Checkbox
+                              checked={todo.completed}
+                              onCheckedChange={() => toggleTodo(todo.id)}
+                              onClick={(e) => e.stopPropagation()}
+                              aria-label={`علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`}
+                            />
+                          </ItemMedia>
+                          <ItemContent>
+                            <ItemTitle className="text-muted-foreground line-through">
+                              {todo.title}
+                            </ItemTitle>
+                          </ItemContent>
+                        </Item>
+                      ))}
+                    </ItemGroup>
+                  </div>
+                </div>
+              )}
+            </div>
+            <DragOverlay>
+              {activeTodo ? (
+                <Item
+                  variant={activeTodo.completed ? "muted" : "default"}
+                  className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                >
+                  <ItemMedia>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-grabbing"
+                        aria-hidden
+                        tabIndex={-1}
+                      >
+                        <GripVertical className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Checkbox
+                        checked={activeTodo.completed}
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    </div>
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle
+                      className={
+                        activeTodo.completed
+                          ? "text-muted-foreground line-through"
+                          : ""
+                      }
+                    >
+                      {activeTodo.title}
+                    </ItemTitle>
+                  </ItemContent>
+                </Item>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo3 };
diff --git a/blocks/todo4.tsx b/blocks/todo4.tsx
new file mode 100644
index 0000000..b1aa89d
--- /dev/null
+++ b/blocks/todo4.tsx
@@ -0,0 +1,354 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical, Plus, X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { cn } from "@/lib/utils";
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+interface Todo4Props {
+  heading?: string;
+  description?: string;
+  addTaskLabel?: string;
+  taskPlaceholder?: string;
+  cancelLabel?: string;
+  submitLabel?: string;
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+  },
+];
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  onToggle: (id: string) => void;
+  isNew?: boolean;
+}
+
+const SortableTodoItem = ({
+  todo,
+  onToggle,
+  isNew = false,
+}: SortableTodoItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={isNew ? "animate-in duration-500 fade-in" : ""}
+    >
+      <Item
+        variant={todo.completed ? "muted" : "default"}
+        className={cn(
+          "cursor-pointer items-center border-b transition-opacity",
+          todo.completed && "opacity-60",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              {...attributes}
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`جابه‌جایی «${todo.title}»`}
+            >
+              <GripVertical className="size-4 text-muted-foreground" />
+            </Button>
+            <Checkbox
+              checked={todo.completed}
+              onCheckedChange={() => onToggle(todo.id)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                todo.completed
+                  ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                  : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+              }
+            />
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle
+            className={
+              todo.completed ? "text-muted-foreground line-through" : ""
+            }
+          >
+            {todo.title}
+          </ItemTitle>
+        </ItemContent>
+      </Item>
+    </div>
+  );
+};
+
+const Todo4 = ({
+  heading = "لیست کارها با افزودن کار جدید",
+  description =
+    "کار جدید بسازید، با کشیدن مرتب کنید و وضعیت انجام را تغییر دهید.",
+  addTaskLabel = "افزودن کار جدید",
+  taskPlaceholder = "عنوان کار",
+  cancelLabel = "انصراف",
+  submitLabel = "افزودن کار",
+  initialTodos = defaultTodos,
+  className,
+}: Todo4Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+  const [isFormExpanded, setIsFormExpanded] = useState(false);
+  const [newTaskTitle, setNewTaskTitle] = useState("");
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+  const [newTodoIds, setNewTodoIds] = useState<Set<string>>(new Set());
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  const handleAddTask = () => {
+    if (newTaskTitle.trim()) {
+      const newTodo: Todo = {
+        id: Date.now().toString(),
+        title: newTaskTitle.trim(),
+        completed: false,
+      };
+      setTodos((prevTodos) => [...prevTodos, newTodo]);
+      setNewTodoIds((prev) => new Set(prev).add(newTodo.id));
+      setNewTaskTitle("");
+      setIsFormExpanded(false);
+
+      setTimeout(() => {
+        setNewTodoIds((prev) => {
+          const updated = new Set(prev);
+          updated.delete(newTodo.id);
+          return updated;
+        });
+      }, 500);
+    }
+  };
+
+  const handleCancel = () => {
+    setNewTaskTitle("");
+    setIsFormExpanded(false);
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = todos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setTodos((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+
+    setActiveTodo(null);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="flex max-w-2xl flex-col gap-4">
+              {!isFormExpanded ? (
+                <Button
+                  variant="ghost"
+                  size="lg"
+                  className="w-full justify-start gap-2"
+                  onClick={() => setIsFormExpanded(true)}
+                >
+                  <Plus className="h-4 w-4" aria-hidden />
+                  {addTaskLabel}
+                </Button>
+              ) : (
+                <div className="flex flex-col gap-2 rounded-lg border p-4">
+                  <Input
+                    autoFocus
+                    placeholder={taskPlaceholder}
+                    value={newTaskTitle}
+                    onChange={(e) => setNewTaskTitle(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && newTaskTitle.trim()) {
+                        handleAddTask();
+                      }
+                      if (e.key === "Escape") {
+                        handleCancel();
+                      }
+                    }}
+                    className="text-base font-medium"
+                    aria-label={taskPlaceholder}
+                  />
+                  <div className="flex items-center justify-end gap-2">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={handleCancel}
+                    >
+                      <X className="h-4 w-4" aria-hidden />
+                      {cancelLabel}
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={handleAddTask}
+                      disabled={!newTaskTitle.trim()}
+                    >
+                      <Plus className="h-4 w-4" aria-hidden />
+                      {submitLabel}
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              <SortableContext
+                items={todos.map((t) => t.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <ItemGroup>
+                  {todos.map((todo) => (
+                    <SortableTodoItem
+                      key={todo.id}
+                      todo={todo}
+                      onToggle={toggleTodo}
+                      isNew={newTodoIds.has(todo.id)}
+                    />
+                  ))}
+                </ItemGroup>
+              </SortableContext>
+            </div>
+            <DragOverlay>
+              {activeTodo ? (
+                <Item
+                  variant={activeTodo.completed ? "muted" : "default"}
+                  className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                >
+                  <ItemMedia>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-grabbing"
+                        aria-hidden
+                        tabIndex={-1}
+                      >
+                        <GripVertical className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Checkbox
+                        checked={activeTodo.completed}
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    </div>
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle
+                      className={
+                        activeTodo.completed
+                          ? "text-muted-foreground line-through"
+                          : ""
+                      }
+                    >
+                      {activeTodo.title}
+                    </ItemTitle>
+                  </ItemContent>
+                </Item>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo4 };
diff --git a/blocks/todo5.tsx b/blocks/todo5.tsx
new file mode 100644
index 0000000..83c54ab
--- /dev/null
+++ b/blocks/todo5.tsx
@@ -0,0 +1,565 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  Check,
+  Edit,
+  GripVertical,
+  MoreVertical,
+  Plus,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { cn } from "@/lib/utils";
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+interface Todo5Props {
+  heading?: string;
+  description?: string;
+  addTaskLabel?: string;
+  taskPlaceholder?: string;
+  cancelLabel?: string;
+  submitLabel?: string;
+  editLabel?: string;
+  deleteLabel?: string;
+  saveEditLabel?: string;
+  cancelEditLabel?: string;
+  moreActionsLabel?: string;
+  editFieldLabel?: string;
+  deleteDialogTitle?: string;
+  deleteDialogDescription?: string;
+  deleteConfirmLabel?: string;
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+  },
+];
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  onToggle: (id: string) => void;
+  editingTodo: string | null;
+  editTitle: string;
+  onStartEdit: (todo: Todo) => void;
+  onSaveEdit: () => void;
+  onCancelEdit: () => void;
+  onEditTitleChange: (title: string) => void;
+  onDeleteClick: (id: string) => void;
+  editLabel: string;
+  deleteLabel: string;
+  saveEditLabel: string;
+  cancelEditLabel: string;
+  moreActionsLabel: string;
+  editFieldLabel: string;
+}
+
+const SortableTodoItem = ({
+  todo,
+  onToggle,
+  editingTodo,
+  editTitle,
+  onStartEdit,
+  onSaveEdit,
+  onCancelEdit,
+  onEditTitleChange,
+  onDeleteClick,
+  editLabel,
+  deleteLabel,
+  saveEditLabel,
+  cancelEditLabel,
+  moreActionsLabel,
+  editFieldLabel,
+}: SortableTodoItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <Item
+        variant={todo.completed ? "muted" : "default"}
+        className={cn(
+          "group cursor-pointer items-center border-b transition-opacity",
+          todo.completed && "opacity-60",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              {...attributes}
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`جابه‌جایی «${todo.title}»`}
+            >
+              <GripVertical className="size-4 text-muted-foreground" />
+            </Button>
+            <Checkbox
+              checked={todo.completed}
+              onCheckedChange={() => onToggle(todo.id)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                todo.completed
+                  ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                  : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+              }
+            />
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          {editingTodo === todo.id ? (
+            <Input
+              value={editTitle}
+              onChange={(e) => onEditTitleChange(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  onSaveEdit();
+                }
+                if (e.key === "Escape") {
+                  onCancelEdit();
+                }
+              }}
+              onClick={(e) => e.stopPropagation()}
+              className="text-base font-medium"
+              autoFocus
+              aria-label={editFieldLabel}
+            />
+          ) : (
+            <ItemTitle
+              className={
+                todo.completed ? "text-muted-foreground line-through" : ""
+              }
+            >
+              {todo.title}
+            </ItemTitle>
+          )}
+        </ItemContent>
+        <ItemActions>
+          {editingTodo === todo.id ? (
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSaveEdit();
+                }}
+                aria-label={saveEditLabel}
+              >
+                <Check className="h-4 w-4" aria-hidden />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCancelEdit();
+                }}
+                aria-label={cancelEditLabel}
+              >
+                <X className="h-4 w-4" aria-hidden />
+              </Button>
+            </div>
+          ) : (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="opacity-0 transition-opacity group-hover:opacity-100"
+                  onClick={(e) => e.stopPropagation()}
+                  aria-label={moreActionsLabel}
+                >
+                  <MoreVertical className="h-4 w-4" aria-hidden />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onStartEdit(todo);
+                  }}
+                >
+                  <Edit className="h-4 w-4" aria-hidden />
+                  {editLabel}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  variant="destructive"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDeleteClick(todo.id);
+                  }}
+                >
+                  <Trash2 className="h-4 w-4" aria-hidden />
+                  {deleteLabel}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </ItemActions>
+      </Item>
+    </div>
+  );
+};
+
+const Todo5 = ({
+  heading = "لیست کارها با ویرایش و حذف",
+  description =
+    "کار جدید بسازید، با کشیدن مرتب کنید، ویرایش کنید یا حذف کنید.",
+  addTaskLabel = "افزودن کار جدید",
+  taskPlaceholder = "عنوان کار",
+  cancelLabel = "انصراف",
+  submitLabel = "افزودن کار",
+  editLabel = "ویرایش",
+  deleteLabel = "حذف",
+  saveEditLabel = "ذخیره ویرایش",
+  cancelEditLabel = "لغو ویرایش",
+  moreActionsLabel = "گزینه‌های بیشتر",
+  editFieldLabel = "ویرایش عنوان کار",
+  deleteDialogTitle = "حذف کار؟",
+  deleteDialogDescription =
+    "این کار برای همیشه حذف می‌شود و این عمل قابل بازگشت نیست.",
+  deleteConfirmLabel = "حذف",
+  initialTodos = defaultTodos,
+  className,
+}: Todo5Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+  const [isFormExpanded, setIsFormExpanded] = useState(false);
+  const [newTaskTitle, setNewTaskTitle] = useState("");
+  const [editingTodo, setEditingTodo] = useState<string | null>(null);
+  const [editTitle, setEditTitle] = useState("");
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [todoToDelete, setTodoToDelete] = useState<string | null>(null);
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  const handleAddTask = () => {
+    if (newTaskTitle.trim()) {
+      const newTodo: Todo = {
+        id: Date.now().toString(),
+        title: newTaskTitle.trim(),
+        completed: false,
+      };
+      setTodos((prevTodos) => [...prevTodos, newTodo]);
+      setNewTaskTitle("");
+      setIsFormExpanded(false);
+    }
+  };
+
+  const handleStartEdit = (todo: Todo) => {
+    setEditingTodo(todo.id);
+    setEditTitle(todo.title);
+  };
+
+  const handleSaveEdit = () => {
+    if (editingTodo && editTitle.trim()) {
+      setTodos((prevTodos) =>
+        prevTodos.map((todo) =>
+          todo.id === editingTodo ? { ...todo, title: editTitle.trim() } : todo,
+        ),
+      );
+      setEditingTodo(null);
+      setEditTitle("");
+    }
+  };
+
+  const handleCancelEdit = () => {
+    setEditingTodo(null);
+    setEditTitle("");
+  };
+
+  const handleDeleteClick = (id: string) => {
+    setTodoToDelete(id);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (todoToDelete) {
+      setTodos((prevTodos) =>
+        prevTodos.filter((todo) => todo.id !== todoToDelete),
+      );
+      setDeleteDialogOpen(false);
+      setTodoToDelete(null);
+    }
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = todos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setTodos((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+
+    setActiveTodo(null);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="flex max-w-2xl flex-col gap-4">
+              {!isFormExpanded ? (
+                <Button
+                  variant="ghost"
+                  size="lg"
+                  className="w-full justify-start gap-2"
+                  onClick={() => setIsFormExpanded(true)}
+                >
+                  <Plus className="h-4 w-4" aria-hidden />
+                  {addTaskLabel}
+                </Button>
+              ) : (
+                <div className="flex flex-col gap-2 rounded-lg border p-4">
+                  <Input
+                    autoFocus
+                    placeholder={taskPlaceholder}
+                    value={newTaskTitle}
+                    onChange={(e) => setNewTaskTitle(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && newTaskTitle.trim()) {
+                        handleAddTask();
+                      }
+                      if (e.key === "Escape") {
+                        setNewTaskTitle("");
+                        setIsFormExpanded(false);
+                      }
+                    }}
+                    className="text-base font-medium"
+                    aria-label={taskPlaceholder}
+                  />
+                  <div className="flex items-center justify-end gap-2">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => {
+                        setNewTaskTitle("");
+                        setIsFormExpanded(false);
+                      }}
+                    >
+                      <X className="h-4 w-4" aria-hidden />
+                      {cancelLabel}
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={handleAddTask}
+                      disabled={!newTaskTitle.trim()}
+                    >
+                      <Plus className="h-4 w-4" aria-hidden />
+                      {submitLabel}
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              <SortableContext
+                items={todos.map((t) => t.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <ItemGroup>
+                  {todos.map((todo) => (
+                    <SortableTodoItem
+                      key={todo.id}
+                      todo={todo}
+                      onToggle={toggleTodo}
+                      editingTodo={editingTodo}
+                      editTitle={editTitle}
+                      onStartEdit={handleStartEdit}
+                      onSaveEdit={handleSaveEdit}
+                      onCancelEdit={handleCancelEdit}
+                      onEditTitleChange={setEditTitle}
+                      onDeleteClick={handleDeleteClick}
+                      editLabel={editLabel}
+                      deleteLabel={deleteLabel}
+                      saveEditLabel={saveEditLabel}
+                      cancelEditLabel={cancelEditLabel}
+                      moreActionsLabel={moreActionsLabel}
+                      editFieldLabel={editFieldLabel}
+                    />
+                  ))}
+                </ItemGroup>
+              </SortableContext>
+            </div>
+            <DragOverlay>
+              {activeTodo ? (
+                <Item
+                  variant={activeTodo.completed ? "muted" : "default"}
+                  className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                >
+                  <ItemMedia>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-grabbing"
+                        aria-hidden
+                        tabIndex={-1}
+                      >
+                        <GripVertical className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Checkbox
+                        checked={activeTodo.completed}
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    </div>
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle
+                      className={
+                        activeTodo.completed
+                          ? "text-muted-foreground line-through"
+                          : ""
+                      }
+                    >
+                      {activeTodo.title}
+                    </ItemTitle>
+                  </ItemContent>
+                </Item>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      </div>
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent dir="rtl" lang="fa" className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deleteDialogTitle}</DialogTitle>
+            <DialogDescription>{deleteDialogDescription}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              {cancelLabel}
+            </Button>
+            <Button variant="destructive" onClick={handleDeleteConfirm}>
+              {deleteConfirmLabel}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </section>
+  );
+};
+
+export { Todo5 };
diff --git a/blocks/todo6.tsx b/blocks/todo6.tsx
new file mode 100644
index 0000000..1b54238
--- /dev/null
+++ b/blocks/todo6.tsx
@@ -0,0 +1,636 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Filter, GripVertical, Plus, SortAsc, Star, X } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type Priority = "high" | "medium" | "low";
+type SortOption = "manual" | "title" | "priority";
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+  priority: Priority;
+  starred: boolean;
+}
+
+interface Filters {
+  starredOnly: boolean;
+  priorities: Priority[];
+}
+
+interface Todo6Props {
+  heading?: string;
+  description?: string;
+  filterLabel?: string;
+  filterByLabel?: string;
+  starredOnlyLabel?: string;
+  prioritySectionLabel?: string;
+  clearFiltersLabel?: string;
+  sortLabel?: string;
+  sortByLabel?: string;
+  manualOrderLabel?: string;
+  titleSortLabel?: string;
+  prioritySortLabel?: string;
+  addTaskLabel?: string;
+  taskPlaceholder?: string;
+  cancelLabel?: string;
+  submitLabel?: string;
+  emptyFiltersMessage?: string;
+  taskCountLabel?: (count: number) => string;
+  priorityLabels?: Record<Priority, string>;
+  sortBadges?: Record<SortOption, string>;
+  starredAriaLabel?: string;
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultPriorityLabels: Record<Priority, string> = {
+  high: "بالا",
+  medium: "متوسط",
+  low: "پایین",
+};
+
+const defaultSortBadges: Record<SortOption, string> = {
+  manual: "د",
+  title: "ع",
+  priority: "ا",
+};
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+    priority: "high",
+    starred: true,
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+    priority: "medium",
+    starred: false,
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+    priority: "low",
+    starred: false,
+  },
+  {
+    id: "4",
+    title: "برنامه ورزش صبحگاهی",
+    completed: true,
+    priority: "medium",
+    starred: false,
+  },
+  {
+    id: "5",
+    title: "خواندن مستندات رابط کاربری",
+    completed: false,
+    priority: "high",
+    starred: true,
+  },
+];
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  onToggle: (id: string) => void;
+  priorityLabels: Record<Priority, string>;
+  starredAriaLabel: string;
+}
+
+const SortableTodoItem = ({
+  todo,
+  onToggle,
+  priorityLabels,
+  starredAriaLabel,
+}: SortableTodoItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <Item
+        variant={todo.completed ? "muted" : "default"}
+        className={cn(
+          "cursor-pointer items-center border-b transition-opacity",
+          todo.completed && "opacity-60",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              {...attributes}
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`جابه‌جایی «${todo.title}»`}
+            >
+              <GripVertical className="size-4 text-muted-foreground" />
+            </Button>
+            <Checkbox
+              checked={todo.completed}
+              onCheckedChange={() => onToggle(todo.id)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                todo.completed
+                  ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                  : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+              }
+            />
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          <div className="flex items-center gap-2">
+            <ItemTitle
+              className={
+                todo.completed ? "text-muted-foreground line-through" : ""
+              }
+            >
+              {todo.title}
+            </ItemTitle>
+            {todo.starred && (
+              <Star
+                className="size-4 fill-amber-500 text-amber-500"
+                aria-label={starredAriaLabel}
+              />
+            )}
+            <Badge variant="outline" className="text-xs">
+              {priorityLabels[todo.priority]}
+            </Badge>
+          </div>
+        </ItemContent>
+      </Item>
+    </div>
+  );
+};
+
+const Todo6 = ({
+  heading = "لیست کارها با فیلتر و مرتب‌سازی",
+  description =
+    "کار بسازید، با کشیدن مرتب کنید، بر اساس اولویت و ستاره فیلتر کنید و بر اساس عنوان یا اولویت مرتب کنید.",
+  filterLabel = "فیلتر",
+  filterByLabel = "فیلتر بر اساس",
+  starredOnlyLabel = "فقط ستاره‌دار",
+  prioritySectionLabel = "اولویت",
+  clearFiltersLabel = "پاک کردن فیلترها",
+  sortLabel = "مرتب‌سازی",
+  sortByLabel = "مرتب‌سازی بر اساس",
+  manualOrderLabel = "ترتیب دستی",
+  titleSortLabel = "عنوان (الف–ی)",
+  prioritySortLabel = "اولویت",
+  addTaskLabel = "افزودن کار جدید",
+  taskPlaceholder = "عنوان کار",
+  cancelLabel = "انصراف",
+  submitLabel = "افزودن کار",
+  emptyFiltersMessage = "هیچ کاری با فیلترهای شما مطابقت ندارد.",
+  taskCountLabel = (count) => `${count} کار`,
+  priorityLabels = defaultPriorityLabels,
+  sortBadges = defaultSortBadges,
+  starredAriaLabel = "ستاره‌دار",
+  initialTodos = defaultTodos,
+  className,
+}: Todo6Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+  const [isFormExpanded, setIsFormExpanded] = useState(false);
+  const [newTaskTitle, setNewTaskTitle] = useState("");
+  const [sortBy, setSortBy] = useState<SortOption>("manual");
+  const [filters, setFilters] = useState<Filters>({
+    starredOnly: false,
+    priorities: [],
+  });
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  const handleAddTask = () => {
+    if (newTaskTitle.trim()) {
+      const newTodo: Todo = {
+        id: Date.now().toString(),
+        title: newTaskTitle.trim(),
+        completed: false,
+        priority: "medium",
+        starred: false,
+      };
+      setTodos((prevTodos) => [...prevTodos, newTodo]);
+      setNewTaskTitle("");
+      setIsFormExpanded(false);
+    }
+  };
+
+  const togglePriorityFilter = (priority: Priority) => {
+    setFilters((prev) => ({
+      ...prev,
+      priorities: prev.priorities.includes(priority)
+        ? prev.priorities.filter((p) => p !== priority)
+        : [...prev.priorities, priority],
+    }));
+  };
+
+  const clearFilters = () => {
+    setFilters({
+      starredOnly: false,
+      priorities: [],
+    });
+  };
+
+  const activeFilterCount =
+    (filters.starredOnly ? 1 : 0) + filters.priorities.length;
+
+  const filteredAndSortedTodos = useMemo(() => {
+    let filtered = todos.filter((todo) => {
+      if (filters.starredOnly && !todo.starred) return false;
+      if (
+        filters.priorities.length > 0 &&
+        !filters.priorities.includes(todo.priority)
+      )
+        return false;
+      return true;
+    });
+
+    if (sortBy === "title") {
+      filtered = [...filtered].sort((a, b) =>
+        a.title.localeCompare(b.title, "fa"),
+      );
+    } else if (sortBy === "priority") {
+      const priorityOrder: Record<Priority, number> = {
+        high: 1,
+        medium: 2,
+        low: 3,
+      };
+      filtered = [...filtered].sort(
+        (a, b) => priorityOrder[a.priority] - priorityOrder[b.priority],
+      );
+    }
+
+    return filtered;
+  }, [todos, filters, sortBy]);
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = filteredAndSortedTodos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+    if (sortBy !== "manual") {
+      setSortBy("manual");
+    }
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = filteredAndSortedTodos.findIndex(
+        (item) => item.id === active.id,
+      );
+      const newIndex = filteredAndSortedTodos.findIndex(
+        (item) => item.id === over.id,
+      );
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const reorderedFiltered = arrayMove(
+          filteredAndSortedTodos,
+          oldIndex,
+          newIndex,
+        );
+        const reorderedIds = reorderedFiltered.map((t) => t.id);
+        setTodos((items) => {
+          const sortedItems = [...items].sort((a, b) => {
+            const aIndex = reorderedIds.indexOf(a.id);
+            const bIndex = reorderedIds.indexOf(b.id);
+            if (aIndex === -1) return 1;
+            if (bIndex === -1) return -1;
+            return aIndex - bIndex;
+          });
+          return sortedItems;
+        });
+      }
+    }
+
+    setActiveTodo(null);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="flex max-w-2xl flex-col gap-4">
+              <div className="flex flex-wrap items-center gap-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <Filter className="h-4 w-4" aria-hidden />
+                      {filterLabel}
+                      {activeFilterCount > 0 && (
+                        <Badge variant="secondary" className="px-1.5 py-0">
+                          {activeFilterCount}
+                        </Badge>
+                      )}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="w-64">
+                    <DropdownMenuLabel>{filterByLabel}</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuCheckboxItem
+                      checked={filters.starredOnly}
+                      onCheckedChange={(checked) =>
+                        setFilters((prev) => ({
+                          ...prev,
+                          starredOnly: checked,
+                        }))
+                      }
+                    >
+                      <Star className="h-4 w-4" aria-hidden />
+                      {starredOnlyLabel}
+                    </DropdownMenuCheckboxItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuLabel className="text-xs">
+                      {prioritySectionLabel}
+                    </DropdownMenuLabel>
+                    <DropdownMenuCheckboxItem
+                      checked={filters.priorities.includes("high")}
+                      onCheckedChange={() => togglePriorityFilter("high")}
+                    >
+                      {priorityLabels.high}
+                    </DropdownMenuCheckboxItem>
+                    <DropdownMenuCheckboxItem
+                      checked={filters.priorities.includes("medium")}
+                      onCheckedChange={() => togglePriorityFilter("medium")}
+                    >
+                      {priorityLabels.medium}
+                    </DropdownMenuCheckboxItem>
+                    <DropdownMenuCheckboxItem
+                      checked={filters.priorities.includes("low")}
+                      onCheckedChange={() => togglePriorityFilter("low")}
+                    >
+                      {priorityLabels.low}
+                    </DropdownMenuCheckboxItem>
+                    {activeFilterCount > 0 && (
+                      <>
+                        <DropdownMenuSeparator />
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="w-full"
+                          onClick={clearFilters}
+                        >
+                          <X className="h-4 w-4" aria-hidden />
+                          {clearFiltersLabel}
+                        </Button>
+                      </>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                <Separator orientation="vertical" className="h-8" />
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <SortAsc className="h-4 w-4" aria-hidden />
+                      {sortLabel}
+                      <Badge variant="secondary" className="px-1.5 py-0">
+                        {sortBadges[sortBy]}
+                      </Badge>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuLabel>{sortByLabel}</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuRadioGroup
+                      value={sortBy}
+                      onValueChange={(value) => setSortBy(value as SortOption)}
+                    >
+                      <DropdownMenuRadioItem value="manual">
+                        {manualOrderLabel}
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="title">
+                        {titleSortLabel}
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="priority">
+                        {prioritySortLabel}
+                      </DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                <div className="ms-auto text-sm text-muted-foreground">
+                  {taskCountLabel(filteredAndSortedTodos.length)}
+                </div>
+              </div>
+
+              {!isFormExpanded ? (
+                <Button
+                  variant="ghost"
+                  size="lg"
+                  className="w-full justify-start gap-2"
+                  onClick={() => setIsFormExpanded(true)}
+                >
+                  <Plus className="h-4 w-4" aria-hidden />
+                  {addTaskLabel}
+                </Button>
+              ) : (
+                <div className="flex flex-col gap-2 rounded-lg border p-4">
+                  <Input
+                    autoFocus
+                    placeholder={taskPlaceholder}
+                    value={newTaskTitle}
+                    onChange={(e) => setNewTaskTitle(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && newTaskTitle.trim()) {
+                        handleAddTask();
+                      }
+                      if (e.key === "Escape") {
+                        setNewTaskTitle("");
+                        setIsFormExpanded(false);
+                      }
+                    }}
+                    className="text-base font-medium"
+                    aria-label={taskPlaceholder}
+                  />
+                  <div className="flex items-center justify-end gap-2">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => {
+                        setNewTaskTitle("");
+                        setIsFormExpanded(false);
+                      }}
+                    >
+                      <X className="h-4 w-4" aria-hidden />
+                      {cancelLabel}
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={handleAddTask}
+                      disabled={!newTaskTitle.trim()}
+                    >
+                      <Plus className="h-4 w-4" aria-hidden />
+                      {submitLabel}
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              <SortableContext
+                items={filteredAndSortedTodos.map((t) => t.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <ItemGroup>
+                  {filteredAndSortedTodos.length === 0 ? (
+                    <div className="py-8 text-center text-sm text-muted-foreground">
+                      {emptyFiltersMessage}
+                    </div>
+                  ) : (
+                    filteredAndSortedTodos.map((todo) => (
+                      <SortableTodoItem
+                        key={todo.id}
+                        todo={todo}
+                        onToggle={toggleTodo}
+                        priorityLabels={priorityLabels}
+                        starredAriaLabel={starredAriaLabel}
+                      />
+                    ))
+                  )}
+                </ItemGroup>
+              </SortableContext>
+            </div>
+            <DragOverlay>
+              {activeTodo ? (
+                <Item
+                  variant={activeTodo.completed ? "muted" : "default"}
+                  className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                >
+                  <ItemMedia>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-grabbing"
+                        aria-hidden
+                        tabIndex={-1}
+                      >
+                        <GripVertical className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Checkbox
+                        checked={activeTodo.completed}
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    </div>
+                  </ItemMedia>
+                  <ItemContent>
+                    <div className="flex items-center gap-2">
+                      <ItemTitle
+                        className={
+                          activeTodo.completed
+                            ? "text-muted-foreground line-through"
+                            : ""
+                        }
+                      >
+                        {activeTodo.title}
+                      </ItemTitle>
+                      {activeTodo.starred && (
+                        <Star
+                          className="size-4 fill-amber-500 text-amber-500"
+                          aria-hidden
+                        />
+                      )}
+                      <Badge variant="outline" className="text-xs">
+                        {priorityLabels[activeTodo.priority]}
+                      </Badge>
+                    </div>
+                  </ItemContent>
+                </Item>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo6 };
diff --git a/blocks/todo7.tsx b/blocks/todo7.tsx
new file mode 100644
index 0000000..6282d53
--- /dev/null
+++ b/blocks/todo7.tsx
@@ -0,0 +1,927 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { format } from "date-fns";
+import { faIR } from "date-fns/locale";
+import {
+  Bell,
+  Calendar,
+  ChevronDown,
+  Filter,
+  Flag,
+  GripVertical,
+  Plus,
+  SendHorizonal,
+  SortAsc,
+  Star,
+  X,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Calendar as CalendarComponent } from "@/components/ui/calendar";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type Priority = "P1" | "P2" | "P3" | "P4";
+type SortOption = "manual" | "title" | "priority";
+
+interface Project {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface PriorityOption {
+  value: Priority;
+  label: string;
+  color: string;
+}
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+  priority?: Priority;
+  starred: boolean;
+  projectId: string;
+  dueDate?: Date;
+}
+
+interface Filters {
+  starredOnly: boolean;
+  priorities: Priority[];
+  projects: string[];
+}
+
+interface Todo7Props {
+  heading?: string;
+  description?: string;
+  projects?: Project[];
+  priorities?: PriorityOption[];
+  filterLabel?: string;
+  filterByLabel?: string;
+  starredOnlyLabel?: string;
+  prioritySectionLabel?: string;
+  projectsSectionLabel?: string;
+  clearFiltersLabel?: string;
+  sortLabel?: string;
+  sortByLabel?: string;
+  manualOrderLabel?: string;
+  titleSortLabel?: string;
+  prioritySortLabel?: string;
+  addTaskLabel?: string;
+  taskPlaceholder?: string;
+  dateLabel?: string;
+  priorityLabel?: string;
+  remindersLabel?: string;
+  selectProjectLabel?: string;
+  cancelLabel?: string;
+  submitLabel?: string;
+  emptyFiltersMessage?: string;
+  taskCountLabel?: (count: number) => string;
+  sortBadges?: Record<SortOption, string>;
+  starredAriaLabel?: string;
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultProjects: Project[] = [
+  { id: "personal", name: "کارهای شخصی 🏠", color: "#3b82f6" },
+  { id: "work", name: "پروژه‌های کاری 💼", color: "#8b5cf6" },
+  { id: "shopping", name: "لیست خرید 🛒", color: "#10b981" },
+  { id: "fitness", name: "سلامت و تناسب اندام 💪", color: "#f59e0b" },
+  { id: "learning", name: "اهداف یادگیری 📚", color: "#ec4899" },
+];
+
+const defaultPriorities: PriorityOption[] = [
+  { value: "P1", label: "P1 - فوری", color: "text-red-500" },
+  { value: "P2", label: "P2 - بالا", color: "text-orange-500" },
+  { value: "P3", label: "P3 - متوسط", color: "text-yellow-500" },
+  { value: "P4", label: "P4 - پایین", color: "text-blue-500" },
+];
+
+const defaultSortBadges: Record<SortOption, string> = {
+  manual: "د",
+  title: "ع",
+  priority: "ا",
+};
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+    priority: "P2",
+    starred: true,
+    projectId: "work",
+    dueDate: new Date(2025, 9, 25),
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+    priority: "P3",
+    starred: false,
+    projectId: "work",
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+    priority: "P4",
+    starred: false,
+    projectId: "shopping",
+  },
+];
+
+const formatDueDate = (date: Date) =>
+  format(date, "d MMM", { locale: faIR });
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  onToggle: (id: string) => void;
+  projects: Project[];
+  priorities: PriorityOption[];
+  starredAriaLabel: string;
+}
+
+const SortableTodoItem = ({
+  todo,
+  onToggle,
+  projects,
+  priorities,
+  starredAriaLabel,
+}: SortableTodoItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const priority = priorities.find((p) => p.value === todo.priority);
+  const project = projects.find((p) => p.id === todo.projectId);
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <Item
+        variant={todo.completed ? "muted" : "default"}
+        className={cn(
+          "cursor-pointer items-center border-b transition-opacity",
+          todo.completed && "opacity-60",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              {...attributes}
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`جابه‌جایی «${todo.title}»`}
+            >
+              <GripVertical className="size-4 text-muted-foreground" />
+            </Button>
+            <Checkbox
+              checked={todo.completed}
+              onCheckedChange={() => onToggle(todo.id)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                todo.completed
+                  ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                  : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+              }
+            />
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          <div className="flex flex-wrap items-center gap-2">
+            <ItemTitle
+              className={
+                todo.completed ? "text-muted-foreground line-through" : ""
+              }
+            >
+              {todo.title}
+            </ItemTitle>
+            {todo.starred && (
+              <Star
+                className="size-4 fill-amber-500 text-amber-500"
+                aria-label={starredAriaLabel}
+              />
+            )}
+            {priority && (
+              <Badge variant="outline" className={cn("text-xs", priority.color)}>
+                {priority.value}
+              </Badge>
+            )}
+            {project && (
+              <Badge variant="outline" className="text-xs">
+                {project.name}
+              </Badge>
+            )}
+            {todo.dueDate && (
+              <span className="text-xs text-muted-foreground">
+                {formatDueDate(todo.dueDate)}
+              </span>
+            )}
+          </div>
+        </ItemContent>
+      </Item>
+    </div>
+  );
+};
+
+const Todo7 = ({
+  heading = "لیست کار پیشرفته",
+  description =
+    "کار با تاریخ، اولویت، یادآور و پروژه بسازید. با کشیدن مرتب کنید، فیلتر و مرتب‌سازی کنید.",
+  projects = defaultProjects,
+  priorities = defaultPriorities,
+  filterLabel = "فیلتر",
+  filterByLabel = "فیلتر بر اساس",
+  starredOnlyLabel = "فقط ستاره‌دار",
+  prioritySectionLabel = "اولویت",
+  projectsSectionLabel = "پروژه‌ها",
+  clearFiltersLabel = "پاک کردن فیلترها",
+  sortLabel = "مرتب‌سازی",
+  sortByLabel = "مرتب‌سازی بر اساس",
+  manualOrderLabel = "ترتیب دستی",
+  titleSortLabel = "عنوان (الف–ی)",
+  prioritySortLabel = "اولویت",
+  addTaskLabel = "افزودن کار جدید",
+  taskPlaceholder = "عنوان کار",
+  dateLabel = "تاریخ",
+  priorityLabel = "اولویت",
+  remindersLabel = "یادآورها",
+  selectProjectLabel = "انتخاب پروژه",
+  cancelLabel = "انصراف",
+  submitLabel = "افزودن کار",
+  emptyFiltersMessage = "هیچ کاری با فیلترهای شما مطابقت ندارد.",
+  taskCountLabel = (count) => `${count} کار`,
+  sortBadges = defaultSortBadges,
+  starredAriaLabel = "ستاره‌دار",
+  initialTodos = defaultTodos,
+  className,
+}: Todo7Props) => {
+  const [todos, setTodos] = useState<Todo[]>(initialTodos);
+  const [isFormExpanded, setIsFormExpanded] = useState(false);
+  const [formData, setFormData] = useState({
+    title: "",
+    dueDate: undefined as Date | undefined,
+    priority: null as Priority | null,
+    reminders: [] as Date[],
+    projectId: projects[0]?.id ?? "personal",
+  });
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [sortBy, setSortBy] = useState<SortOption>("manual");
+  const [filters, setFilters] = useState<Filters>({
+    starredOnly: false,
+    priorities: [],
+    projects: [],
+  });
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  const resetForm = () => ({
+    title: "",
+    dueDate: undefined,
+    priority: null as Priority | null,
+    reminders: [] as Date[],
+    projectId: projects[0]?.id ?? "personal",
+  });
+
+  const handleAddTask = () => {
+    if (formData.title.trim()) {
+      const newTodo: Todo = {
+        id: Date.now().toString(),
+        title: formData.title.trim(),
+        completed: false,
+        priority: formData.priority ?? undefined,
+        starred: false,
+        projectId: formData.projectId,
+        dueDate: formData.dueDate,
+      };
+      setTodos((prevTodos) => [...prevTodos, newTodo]);
+      setFormData(resetForm());
+      setIsFormExpanded(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setFormData(resetForm());
+    setIsFormExpanded(false);
+  };
+
+  const togglePriorityFilter = (priority: Priority) => {
+    setFilters((prev) => ({
+      ...prev,
+      priorities: prev.priorities.includes(priority)
+        ? prev.priorities.filter((p) => p !== priority)
+        : [...prev.priorities, priority],
+    }));
+  };
+
+  const toggleProjectFilter = (projectId: string) => {
+    setFilters((prev) => ({
+      ...prev,
+      projects: prev.projects.includes(projectId)
+        ? prev.projects.filter((p) => p !== projectId)
+        : [...prev.projects, projectId],
+    }));
+  };
+
+  const clearFilters = () => {
+    setFilters({
+      starredOnly: false,
+      priorities: [],
+      projects: [],
+    });
+  };
+
+  const activeFilterCount =
+    (filters.starredOnly ? 1 : 0) +
+    filters.priorities.length +
+    filters.projects.length;
+
+  const filteredAndSortedTodos = useMemo(() => {
+    let filtered = todos.filter((todo) => {
+      if (filters.starredOnly && !todo.starred) return false;
+      if (
+        filters.priorities.length > 0 &&
+        todo.priority &&
+        !filters.priorities.includes(todo.priority)
+      )
+        return false;
+      if (
+        filters.projects.length > 0 &&
+        !filters.projects.includes(todo.projectId)
+      )
+        return false;
+      return true;
+    });
+
+    if (sortBy === "title") {
+      filtered = [...filtered].sort((a, b) =>
+        a.title.localeCompare(b.title, "fa"),
+      );
+    } else if (sortBy === "priority") {
+      const priorityOrder: Record<Priority, number> = {
+        P1: 1,
+        P2: 2,
+        P3: 3,
+        P4: 4,
+      };
+      filtered = [...filtered].sort(
+        (a, b) =>
+          (priorityOrder[(a.priority || "P4") as Priority] || 4) -
+          (priorityOrder[(b.priority || "P4") as Priority] || 4),
+      );
+    }
+
+    return filtered;
+  }, [todos, filters, sortBy]);
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = filteredAndSortedTodos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+    if (sortBy !== "manual") {
+      setSortBy("manual");
+    }
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = filteredAndSortedTodos.findIndex(
+        (item) => item.id === active.id,
+      );
+      const newIndex = filteredAndSortedTodos.findIndex(
+        (item) => item.id === over.id,
+      );
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const reorderedFiltered = arrayMove(
+          filteredAndSortedTodos,
+          oldIndex,
+          newIndex,
+        );
+        const reorderedIds = reorderedFiltered.map((t) => t.id);
+        setTodos((items) => {
+          const sortedItems = [...items].sort((a, b) => {
+            const aIndex = reorderedIds.indexOf(a.id);
+            const bIndex = reorderedIds.indexOf(b.id);
+            if (aIndex === -1) return 1;
+            if (bIndex === -1) return -1;
+            return aIndex - bIndex;
+          });
+          return sortedItems;
+        });
+      }
+    }
+
+    setActiveTodo(null);
+  };
+
+  const selectedProject = projects.find((p) => p.id === formData.projectId);
+  const selectedPriority = priorities.find(
+    (p) => p.value === formData.priority,
+  );
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="flex max-w-2xl flex-col gap-4">
+              <div className="flex flex-wrap items-center gap-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <Filter className="h-4 w-4" aria-hidden />
+                      {filterLabel}
+                      {activeFilterCount > 0 && (
+                        <Badge variant="secondary" className="px-1.5 py-0">
+                          {activeFilterCount}
+                        </Badge>
+                      )}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="w-64">
+                    <DropdownMenuLabel>{filterByLabel}</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuCheckboxItem
+                      checked={filters.starredOnly}
+                      onCheckedChange={(checked) =>
+                        setFilters((prev) => ({
+                          ...prev,
+                          starredOnly: checked,
+                        }))
+                      }
+                    >
+                      <Star className="h-4 w-4" aria-hidden />
+                      {starredOnlyLabel}
+                    </DropdownMenuCheckboxItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuLabel className="text-xs">
+                      {prioritySectionLabel}
+                    </DropdownMenuLabel>
+                    {priorities.map((priority) => (
+                      <DropdownMenuCheckboxItem
+                        key={priority.value}
+                        checked={filters.priorities.includes(priority.value)}
+                        onCheckedChange={() =>
+                          togglePriorityFilter(priority.value)
+                        }
+                      >
+                        <Flag
+                          className={cn("h-4 w-4", priority.color)}
+                          aria-hidden
+                        />
+                        {priority.label}
+                      </DropdownMenuCheckboxItem>
+                    ))}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuLabel className="text-xs">
+                      {projectsSectionLabel}
+                    </DropdownMenuLabel>
+                    {projects.map((project) => (
+                      <DropdownMenuCheckboxItem
+                        key={project.id}
+                        checked={filters.projects.includes(project.id)}
+                        onCheckedChange={() => toggleProjectFilter(project.id)}
+                      >
+                        {project.name}
+                      </DropdownMenuCheckboxItem>
+                    ))}
+                    {activeFilterCount > 0 && (
+                      <>
+                        <DropdownMenuSeparator />
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="w-full"
+                          onClick={clearFilters}
+                        >
+                          <X className="h-4 w-4" aria-hidden />
+                          {clearFiltersLabel}
+                        </Button>
+                      </>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                <Separator orientation="vertical" className="h-8" />
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <SortAsc className="h-4 w-4" aria-hidden />
+                      {sortLabel}
+                      <Badge variant="secondary" className="px-1.5 py-0">
+                        {sortBadges[sortBy]}
+                      </Badge>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuLabel>{sortByLabel}</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuRadioGroup
+                      value={sortBy}
+                      onValueChange={(value) => setSortBy(value as SortOption)}
+                    >
+                      <DropdownMenuRadioItem value="manual">
+                        {manualOrderLabel}
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="title">
+                        {titleSortLabel}
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="priority">
+                        {prioritySortLabel}
+                      </DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                <div className="ms-auto text-sm text-muted-foreground">
+                  {taskCountLabel(filteredAndSortedTodos.length)}
+                </div>
+              </div>
+
+              {!isFormExpanded ? (
+                <Button
+                  variant="ghost"
+                  size="lg"
+                  className="w-full justify-start gap-2"
+                  onClick={() => setIsFormExpanded(true)}
+                >
+                  <Plus className="h-4 w-4" aria-hidden />
+                  {addTaskLabel}
+                </Button>
+              ) : (
+                <InputGroup className="flex-col">
+                  <InputGroupInput
+                    autoFocus
+                    placeholder={taskPlaceholder}
+                    value={formData.title}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        title: e.target.value,
+                      }))
+                    }
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && formData.title.trim()) {
+                        handleAddTask();
+                      }
+                      if (e.key === "Escape") {
+                        handleCancel();
+                      }
+                    }}
+                    className="py-3 text-base font-medium"
+                    aria-label={taskPlaceholder}
+                  />
+                  <InputGroupAddon
+                    align="block-end"
+                    className="flex-wrap border-t"
+                  >
+                    <Popover
+                      open={datePickerOpen}
+                      onOpenChange={setDatePickerOpen}
+                    >
+                      <PopoverTrigger asChild>
+                        <InputGroupButton
+                          size="sm"
+                          className={formData.dueDate ? "text-chart-1" : ""}
+                          aria-label={dateLabel}
+                        >
+                          <Calendar className="h-4 w-4" aria-hidden />
+                          {formData.dueDate ? (
+                            <span className="text-xs">
+                              {formatDueDate(formData.dueDate)}
+                            </span>
+                          ) : (
+                            dateLabel
+                          )}
+                        </InputGroupButton>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        dir="rtl"
+                        lang="fa"
+                        align="start"
+                        className="w-auto p-0"
+                      >
+                        <CalendarComponent
+                          mode="single"
+                          selected={formData.dueDate}
+                          onSelect={(date) => {
+                            setFormData((prev) => ({ ...prev, dueDate: date }));
+                            if (date) {
+                              setDatePickerOpen(false);
+                            }
+                          }}
+                          disabled={(date) => date < new Date()}
+                        />
+                      </PopoverContent>
+                    </Popover>
+
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <InputGroupButton
+                          size="sm"
+                          className={
+                            selectedPriority ? selectedPriority.color : ""
+                          }
+                          aria-label={priorityLabel}
+                        >
+                          {selectedPriority ? (
+                            <Flag
+                              className={cn(
+                                "h-4 w-4",
+                                selectedPriority.color,
+                              )}
+                              aria-hidden
+                            />
+                          ) : (
+                            <Flag className="h-4 w-4" aria-hidden />
+                          )}
+                          {selectedPriority?.label || priorityLabel}
+                        </InputGroupButton>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        dir="rtl"
+                        lang="fa"
+                        className="w-48 p-2"
+                        align="start"
+                      >
+                        <div className="space-y-1">
+                          {priorities.map((priority) => (
+                            <Button
+                              key={priority.value}
+                              variant={
+                                formData.priority === priority.value
+                                  ? "secondary"
+                                  : "ghost"
+                              }
+                              className="w-full justify-start gap-2"
+                              onClick={() =>
+                                setFormData((prev) => ({
+                                  ...prev,
+                                  priority: priority.value,
+                                }))
+                              }
+                            >
+                              <Flag
+                                className={cn("h-3.5 w-3.5", priority.color)}
+                                aria-hidden
+                              />
+                              {priority.label}
+                            </Button>
+                          ))}
+                        </div>
+                      </PopoverContent>
+                    </Popover>
+
+                    <InputGroupButton
+                      size="sm"
+                      className={
+                        formData.reminders.length > 0 ? "text-chart-2" : ""
+                      }
+                      aria-label={remindersLabel}
+                    >
+                      <Bell className="h-4 w-4" aria-hidden />
+                      {formData.reminders.length > 0
+                        ? `${formData.reminders.length}`
+                        : remindersLabel}
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                  <InputGroupAddon align="block-end" className="border-t">
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <InputGroupButton size="sm" className="gap-2">
+                          {selectedProject
+                            ? selectedProject.name
+                            : selectProjectLabel}
+                          <ChevronDown className="h-3.5 w-3.5" aria-hidden />
+                        </InputGroupButton>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        dir="rtl"
+                        lang="fa"
+                        className="w-56 p-2"
+                        align="start"
+                      >
+                        <div className="space-y-1">
+                          {projects.map((project) => (
+                            <Button
+                              key={project.id}
+                              variant={
+                                formData.projectId === project.id
+                                  ? "secondary"
+                                  : "ghost"
+                              }
+                              className="w-full justify-start"
+                              onClick={() =>
+                                setFormData((prev) => ({
+                                  ...prev,
+                                  projectId: project.id,
+                                }))
+                              }
+                            >
+                              {project.name}
+                            </Button>
+                          ))}
+                        </div>
+                      </PopoverContent>
+                    </Popover>
+                    <InputGroupButton
+                      size="sm"
+                      onClick={handleCancel}
+                      variant="secondary"
+                      className="ms-auto"
+                    >
+                      <X className="h-4 w-4" aria-hidden />
+                      <span className="hidden sm:inline">{cancelLabel}</span>
+                    </InputGroupButton>
+                    <InputGroupButton
+                      size="sm"
+                      onClick={handleAddTask}
+                      disabled={!formData.title.trim()}
+                      variant="default"
+                    >
+                      <SendHorizonal
+                        className="h-4 w-4 rtl:rotate-180"
+                        aria-hidden
+                      />
+                      <span className="hidden sm:inline">{submitLabel}</span>
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                </InputGroup>
+              )}
+
+              <SortableContext
+                items={filteredAndSortedTodos.map((t) => t.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <ItemGroup>
+                  {filteredAndSortedTodos.length === 0 ? (
+                    <div className="py-8 text-center text-sm text-muted-foreground">
+                      {emptyFiltersMessage}
+                    </div>
+                  ) : (
+                    filteredAndSortedTodos.map((todo) => (
+                      <SortableTodoItem
+                        key={todo.id}
+                        todo={todo}
+                        onToggle={toggleTodo}
+                        projects={projects}
+                        priorities={priorities}
+                        starredAriaLabel={starredAriaLabel}
+                      />
+                    ))
+                  )}
+                </ItemGroup>
+              </SortableContext>
+            </div>
+            <DragOverlay>
+              {activeTodo ? (
+                <Item
+                  variant={activeTodo.completed ? "muted" : "default"}
+                  className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                >
+                  <ItemMedia>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-grabbing"
+                        aria-hidden
+                        tabIndex={-1}
+                      >
+                        <GripVertical className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Checkbox
+                        checked={activeTodo.completed}
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    </div>
+                  </ItemMedia>
+                  <ItemContent>
+                    <div className="flex items-center gap-2">
+                      <ItemTitle
+                        className={
+                          activeTodo.completed
+                            ? "text-muted-foreground line-through"
+                            : ""
+                        }
+                      >
+                        {activeTodo.title}
+                      </ItemTitle>
+                      {activeTodo.starred && (
+                        <Star
+                          className="size-4 fill-amber-500 text-amber-500"
+                          aria-hidden
+                        />
+                      )}
+                      {activeTodo.priority && (
+                        <Badge variant="outline" className="text-xs">
+                          {activeTodo.priority}
+                        </Badge>
+                      )}
+                    </div>
+                  </ItemContent>
+                </Item>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo7 };
diff --git a/blocks/todo8.tsx b/blocks/todo8.tsx
new file mode 100644
index 0000000..39d91bf
--- /dev/null
+++ b/blocks/todo8.tsx
@@ -0,0 +1,495 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ChevronDown, ChevronRight, GripVertical, Plus } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { cn } from "@/lib/utils";
+
+interface Subtask {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+  subtasks: Subtask[];
+  expanded?: boolean;
+}
+
+interface SubtaskLabels {
+  placeholder: string;
+  addButton: string;
+  submit: string;
+  cancel: string;
+  expand: string;
+  collapse: string;
+}
+
+interface Todo8Props {
+  heading?: string;
+  description?: string;
+  subtaskLabels?: SubtaskLabels;
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultSubtaskLabels: SubtaskLabels = {
+  placeholder: "عنوان زیرکار",
+  addButton: "افزودن زیرکار",
+  submit: "افزودن",
+  cancel: "انصراف",
+  expand: "نمایش زیرکارها",
+  collapse: "پنهان کردن زیرکارها",
+};
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "برنامه‌ریزی راه‌اندازی پروژه",
+    completed: false,
+    expanded: true,
+    subtasks: [
+      { id: "1-1", title: "تدوین جدول زمانی پروژه", completed: true },
+      { id: "1-2", title: "برنامه‌ریزی جلسات تیم", completed: true },
+      { id: "1-3", title: "آماده‌سازی ارائه", completed: false },
+      { id: "1-4", title: "بررسی بودجه", completed: false },
+    ],
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+    expanded: false,
+    subtasks: [
+      { id: "2-1", title: "ساخت وایرفریم", completed: false },
+      { id: "2-2", title: "دریافت تأیید ذی‌نفعان", completed: false },
+    ],
+  },
+  {
+    id: "3",
+    title: "نوشتن مستندات",
+    completed: false,
+    expanded: false,
+    subtasks: [],
+  },
+];
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  onToggle: (id: string) => void;
+  onToggleSubtask: (todoId: string, subtaskId: string) => void;
+  onToggleExpand: (id: string) => void;
+  onAddSubtask: (todoId: string, title: string) => void;
+  subtaskLabels: SubtaskLabels;
+}
+
+const SortableTodoItem = ({
+  todo,
+  onToggle,
+  onToggleSubtask,
+  onToggleExpand,
+  onAddSubtask,
+  subtaskLabels,
+}: SortableTodoItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const completedSubtasks = todo.subtasks.filter((st) => st.completed).length;
+  const totalSubtasks = todo.subtasks.length;
+  const progress =
+    totalSubtasks > 0
+      ? Math.round((completedSubtasks / totalSubtasks) * 100)
+      : 0;
+
+  const [newSubtaskTitle, setNewSubtaskTitle] = useState("");
+  const [isAddingSubtask, setIsAddingSubtask] = useState(false);
+
+  const handleAddSubtask = () => {
+    if (newSubtaskTitle.trim()) {
+      onAddSubtask(todo.id, newSubtaskTitle.trim());
+      setNewSubtaskTitle("");
+      setIsAddingSubtask(false);
+    }
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <Item
+        variant={todo.completed ? "muted" : "default"}
+        className={cn(
+          "cursor-pointer items-center border-b transition-opacity",
+          todo.completed && "opacity-60",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              {...attributes}
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`جابه‌جایی «${todo.title}»`}
+            >
+              <GripVertical className="size-4 text-muted-foreground" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleExpand(todo.id);
+              }}
+              aria-label={todo.expanded ? subtaskLabels.collapse : subtaskLabels.expand}
+              aria-expanded={todo.expanded}
+            >
+              {todo.expanded ? (
+                <ChevronDown className="size-4 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="size-4 text-muted-foreground rtl:rotate-180" />
+              )}
+            </Button>
+            <Checkbox
+              checked={todo.completed}
+              onCheckedChange={() => onToggle(todo.id)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                todo.completed
+                  ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                  : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+              }
+            />
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          <div className="flex items-center gap-2">
+            <ItemTitle
+              className={
+                todo.completed ? "text-muted-foreground line-through" : ""
+              }
+            >
+              {todo.title}
+            </ItemTitle>
+            {totalSubtasks > 0 && (
+              <div
+                className="flex items-center gap-1 text-xs text-muted-foreground"
+                aria-label={`پیشرفت «${todo.title}»: ${completedSubtasks} از ${totalSubtasks}`}
+              >
+                <span className="font-medium">
+                  {completedSubtasks}/{totalSubtasks}
+                </span>
+                <div className="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full bg-primary transition-all"
+                    style={{ width: `${progress}%` }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </ItemContent>
+      </Item>
+      {todo.expanded && (
+        <div className="border-b bg-muted/30 ps-12">
+          <div className="flex flex-col">
+            {todo.subtasks.map((subtask) => (
+              <div
+                key={subtask.id}
+                className="flex items-center gap-2 border-b px-4 py-2 last:border-b-0 hover:bg-muted/50"
+              >
+                <Checkbox
+                  checked={subtask.completed}
+                  onCheckedChange={() => onToggleSubtask(todo.id, subtask.id)}
+                  onClick={(e) => e.stopPropagation()}
+                  aria-label={
+                    subtask.completed
+                      ? `علامت‌گذاری «${subtask.title}» به‌عنوان انجام‌نشده`
+                      : `علامت‌گذاری «${subtask.title}» به‌عنوان انجام‌شده`
+                  }
+                />
+                <span
+                  className={cn(
+                    "flex-1 text-sm",
+                    subtask.completed && "text-muted-foreground line-through",
+                  )}
+                >
+                  {subtask.title}
+                </span>
+              </div>
+            ))}
+            {isAddingSubtask ? (
+              <div className="flex items-center gap-2 px-4 py-2">
+                <Input
+                  autoFocus
+                  placeholder={subtaskLabels.placeholder}
+                  value={newSubtaskTitle}
+                  onChange={(e) => setNewSubtaskTitle(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleAddSubtask();
+                    }
+                    if (e.key === "Escape") {
+                      setIsAddingSubtask(false);
+                      setNewSubtaskTitle("");
+                    }
+                  }}
+                  className="h-8"
+                  onClick={(e) => e.stopPropagation()}
+                  aria-label={subtaskLabels.placeholder}
+                />
+                <Button
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleAddSubtask();
+                  }}
+                >
+                  {subtaskLabels.submit}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsAddingSubtask(false);
+                    setNewSubtaskTitle("");
+                  }}
+                >
+                  {subtaskLabels.cancel}
+                </Button>
+              </div>
+            ) : (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="justify-start gap-2 px-4 py-2"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsAddingSubtask(true);
+                }}
+              >
+                <Plus className="size-4" aria-hidden />
+                {subtaskLabels.addButton}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Todo8 = ({
+  heading = "لیست کار با زیرکارها",
+  description =
+    "کارهای تاشو با زیرکارهای تو در تو، نمایش پیشرفت و مرتب‌سازی با کشیدن. زیرکارها یا کار اصلی را جداگانه تکمیل کنید.",
+  subtaskLabels = defaultSubtaskLabels,
+  initialTodos = defaultTodos,
+  className,
+}: Todo8Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  const toggleSubtask = (todoId: string, subtaskId: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === todoId
+          ? {
+              ...todo,
+              subtasks: todo.subtasks.map((st) =>
+                st.id === subtaskId ? { ...st, completed: !st.completed } : st,
+              ),
+            }
+          : todo,
+      ),
+    );
+  };
+
+  const toggleExpand = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, expanded: !todo.expanded } : todo,
+      ),
+    );
+  };
+
+  const addSubtask = (todoId: string, title: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === todoId
+          ? {
+              ...todo,
+              subtasks: [
+                ...todo.subtasks,
+                { id: `${todoId}-${Date.now()}`, title, completed: false },
+              ],
+              expanded: true,
+            }
+          : todo,
+      ),
+    );
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = todos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = todos.findIndex((item) => item.id === active.id);
+      const newIndex = todos.findIndex((item) => item.id === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setTodos((items) => arrayMove(items, oldIndex, newIndex));
+      }
+    }
+
+    setActiveTodo(null);
+  };
+
+  const allTodoIds = useMemo(() => todos.map((t) => t.id), [todos]);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="flex max-w-2xl flex-col gap-4">
+              <SortableContext
+                items={allTodoIds}
+                strategy={verticalListSortingStrategy}
+              >
+                <ItemGroup>
+                  {todos.map((todo) => (
+                    <SortableTodoItem
+                      key={todo.id}
+                      todo={todo}
+                      onToggle={toggleTodo}
+                      onToggleSubtask={toggleSubtask}
+                      onToggleExpand={toggleExpand}
+                      onAddSubtask={addSubtask}
+                      subtaskLabels={subtaskLabels}
+                    />
+                  ))}
+                </ItemGroup>
+              </SortableContext>
+            </div>
+            <DragOverlay>
+              {activeTodo ? (
+                <Item
+                  variant={activeTodo.completed ? "muted" : "default"}
+                  className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                >
+                  <ItemMedia>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-grabbing"
+                        aria-hidden
+                        tabIndex={-1}
+                      >
+                        <GripVertical className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Checkbox
+                        checked={activeTodo.completed}
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    </div>
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle
+                      className={
+                        activeTodo.completed
+                          ? "text-muted-foreground line-through"
+                          : ""
+                      }
+                    >
+                      {activeTodo.title}
+                    </ItemTitle>
+                  </ItemContent>
+                </Item>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo8 };
diff --git a/blocks/todo9.tsx b/blocks/todo9.tsx
new file mode 100644
index 0000000..6ac47ff
--- /dev/null
+++ b/blocks/todo9.tsx
@@ -0,0 +1,508 @@
+"use client";
+
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical, Plus, Search, Tag, X } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface TagOption {
+  id: string;
+  label: string;
+}
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+  tags: string[];
+}
+
+interface Todo9Props {
+  heading?: string;
+  description?: string;
+  searchPlaceholder?: string;
+  filterByTagsLabel?: string;
+  clearFiltersLabel?: string;
+  emptySearchMessage?: string;
+  emptyListMessage?: string;
+  addTagLabel?: string;
+  tagCatalog?: TagOption[];
+  initialTodos?: Todo[];
+  className?: string;
+}
+
+const defaultTagCatalog: TagOption[] = [
+  { id: "work", label: "کاری" },
+  { id: "personal", label: "شخصی" },
+  { id: "urgent", label: "فوری" },
+  { id: "shopping", label: "خرید" },
+  { id: "health", label: "سلامت" },
+  { id: "fitness", label: "ورزش" },
+  { id: "learning", label: "یادگیری" },
+  { id: "documentation", label: "مستندات" },
+  { id: "code-review", label: "بازبینی کد" },
+];
+
+const defaultTodos: Todo[] = [
+  {
+    id: "1",
+    title: "تکمیل مستندات پروژه",
+    completed: false,
+    tags: ["work", "urgent", "documentation"],
+  },
+  {
+    id: "2",
+    title: "خرید بلاک‌های ری یو آی از ری یو آی",
+    completed: false,
+    tags: ["work", "code-review"],
+  },
+  {
+    id: "3",
+    title: "خرید خواربار",
+    completed: false,
+    tags: ["personal", "shopping"],
+  },
+  {
+    id: "4",
+    title: "برنامه ورزش صبحگاهی",
+    completed: true,
+    tags: ["health", "fitness"],
+  },
+  {
+    id: "5",
+    title: "خواندن مستندات رابط کاربری",
+    completed: false,
+    tags: ["learning", "work"],
+  },
+];
+
+interface SortableTodoItemProps {
+  todo: Todo;
+  onToggle: (id: string) => void;
+  onRemoveTag: (id: string, tag: string) => void;
+  onAddTag: (id: string, tag: string) => void;
+  tagCatalog: TagOption[];
+  getTagLabel: (tagId: string) => string;
+  addTagLabel: string;
+}
+
+const SortableTodoItem = ({
+  todo,
+  onToggle,
+  onRemoveTag,
+  onAddTag,
+  tagCatalog,
+  getTagLabel,
+  addTagLabel,
+}: SortableTodoItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: todo.id });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const availableToAdd = tagCatalog.filter((tag) => !todo.tags.includes(tag.id));
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <Item
+        variant={todo.completed ? "muted" : "default"}
+        className={cn(
+          "cursor-pointer items-center border-b transition-opacity",
+          todo.completed && "opacity-60",
+        )}
+        onClick={() => onToggle(todo.id)}
+      >
+        <ItemMedia>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              {...attributes}
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`جابه‌جایی «${todo.title}»`}
+            >
+              <GripVertical className="size-4 text-muted-foreground" />
+            </Button>
+            <Checkbox
+              checked={todo.completed}
+              onCheckedChange={() => onToggle(todo.id)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                todo.completed
+                  ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
+                  : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
+              }
+            />
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <ItemTitle
+                className={
+                  todo.completed ? "text-muted-foreground line-through" : ""
+                }
+              >
+                {todo.title}
+              </ItemTitle>
+            </div>
+            <div className="flex flex-wrap items-center gap-1">
+              {todo.tags.map((tag) => (
+                <Badge
+                  key={tag}
+                  variant="secondary"
+                  className="cursor-pointer text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRemoveTag(todo.id, tag);
+                  }}
+                  aria-label={`حذف برچسب ${getTagLabel(tag)}`}
+                >
+                  {getTagLabel(tag)}
+                  <X className="ms-1 size-3" aria-hidden />
+                </Badge>
+              ))}
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 px-2"
+                    onClick={(e) => e.stopPropagation()}
+                    aria-label={addTagLabel}
+                  >
+                    <Plus className="size-3" aria-hidden />
+                    <Tag className="size-3" aria-hidden />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                  dir="rtl"
+                  lang="fa"
+                  className="w-48 p-2"
+                  align="start"
+                >
+                  <div className="space-y-1">
+                    {availableToAdd.map((tag) => (
+                      <Button
+                        key={tag.id}
+                        variant="ghost"
+                        className="w-full justify-start"
+                        onClick={() => onAddTag(todo.id, tag.id)}
+                      >
+                        <Tag className="me-2 size-3" aria-hidden />
+                        {tag.label}
+                      </Button>
+                    ))}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </ItemContent>
+      </Item>
+    </div>
+  );
+};
+
+const Todo9 = ({
+  heading = "لیست کار با جستجو و برچسب",
+  description =
+    "جستجوی لحظه‌ای، چند برچسب برای هر کار، فیلتر بر اساس برچسب و مرتب‌سازی با کشیدن. برچسب‌ها را به هر کار اضافه یا حذف کنید.",
+  searchPlaceholder = "جستجوی کارها...",
+  filterByTagsLabel = "فیلتر بر اساس برچسب:",
+  clearFiltersLabel = "پاک کردن فیلترها",
+  emptySearchMessage = "هیچ کاری با جستجوی شما مطابقت ندارد.",
+  emptyListMessage = "کاری وجود ندارد.",
+  addTagLabel = "افزودن برچسب",
+  tagCatalog = defaultTagCatalog,
+  initialTodos = defaultTodos,
+  className,
+}: Todo9Props) => {
+  const [todos, setTodos] = useState(initialTodos);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
+
+  const getTagLabel = (tagId: string) =>
+    tagCatalog.find((tag) => tag.id === tagId)?.label ?? tagId;
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const toggleTodo = (id: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+      ),
+    );
+  };
+
+  const removeTag = (id: string, tag: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id
+          ? { ...todo, tags: todo.tags.filter((t) => t !== tag) }
+          : todo,
+      ),
+    );
+  };
+
+  const addTag = (id: string, tag: string) => {
+    setTodos((prevTodos) =>
+      prevTodos.map((todo) =>
+        todo.id === id && !todo.tags.includes(tag)
+          ? { ...todo, tags: [...todo.tags, tag] }
+          : todo,
+      ),
+    );
+  };
+
+  const toggleTagFilter = (tag: string) => {
+    setSelectedTags((prev) =>
+      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
+    );
+  };
+
+  const filteredTodos = useMemo(() => {
+    const query = searchQuery.trim();
+    return todos.filter((todo) => {
+      if (query && !todo.title.includes(query)) {
+        return false;
+      }
+
+      if (selectedTags.length > 0) {
+        const hasSelectedTag = selectedTags.some((tag) =>
+          todo.tags.includes(tag),
+        );
+        if (!hasSelectedTag) return false;
+      }
+
+      return true;
+    });
+  }, [todos, searchQuery, selectedTags]);
+
+  const allTags = useMemo(() => {
+    const tagSet = new Set<string>();
+    todos.forEach((todo) => {
+      todo.tags.forEach((tag) => tagSet.add(tag));
+    });
+    return Array.from(tagSet).sort((a, b) =>
+      getTagLabel(a).localeCompare(getTagLabel(b), "fa"),
+    );
+  }, [todos, tagCatalog]);
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const todo = filteredTodos.find((t) => t.id === active.id);
+    setActiveTodo(todo || null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = filteredTodos.findIndex((item) => item.id === active.id);
+      const newIndex = filteredTodos.findIndex((item) => item.id === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const reorderedFiltered = arrayMove(filteredTodos, oldIndex, newIndex);
+        const reorderedIds = reorderedFiltered.map((t) => t.id);
+        setTodos((items) => {
+          const sortedItems = [...items].sort((a, b) => {
+            const aIndex = reorderedIds.indexOf(a.id);
+            const bIndex = reorderedIds.indexOf(b.id);
+            if (aIndex === -1) return 1;
+            if (bIndex === -1) return -1;
+            return aIndex - bIndex;
+          });
+          return sortedItems;
+        });
+      }
+    }
+
+    setActiveTodo(null);
+  };
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto flex max-w-2xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
+            <p className="text-muted-foreground">{description}</p>
+          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="flex max-w-2xl flex-col gap-4">
+              <div className="flex flex-col gap-4">
+                <div className="relative">
+                  <Search
+                    className="absolute top-1/2 inset-s-3 size-4 -translate-y-1/2 text-muted-foreground"
+                    aria-hidden
+                  />
+                  <Input
+                    placeholder={searchPlaceholder}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="ps-9"
+                    aria-label={searchPlaceholder}
+                  />
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="text-sm text-muted-foreground">
+                    {filterByTagsLabel}
+                  </span>
+                  {allTags.map((tag) => (
+                    <Badge
+                      key={tag}
+                      variant={
+                        selectedTags.includes(tag) ? "default" : "outline"
+                      }
+                      className="cursor-pointer"
+                      onClick={() => toggleTagFilter(tag)}
+                    >
+                      <Tag className="me-1 size-3" aria-hidden />
+                      {getTagLabel(tag)}
+                    </Badge>
+                  ))}
+                  {selectedTags.length > 0 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSelectedTags([])}
+                    >
+                      <X className="me-1 size-3" aria-hidden />
+                      {clearFiltersLabel}
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              <SortableContext
+                items={filteredTodos.map((t) => t.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <ItemGroup>
+                  {filteredTodos.length === 0 ? (
+                    <div className="py-8 text-center text-sm text-muted-foreground">
+                      {searchQuery || selectedTags.length > 0
+                        ? emptySearchMessage
+                        : emptyListMessage}
+                    </div>
+                  ) : (
+                    filteredTodos.map((todo) => (
+                      <SortableTodoItem
+                        key={todo.id}
+                        todo={todo}
+                        onToggle={toggleTodo}
+                        onRemoveTag={removeTag}
+                        onAddTag={addTag}
+                        tagCatalog={tagCatalog}
+                        getTagLabel={getTagLabel}
+                        addTagLabel={addTagLabel}
+                      />
+                    ))
+                  )}
+                </ItemGroup>
+              </SortableContext>
+            </div>
+            <DragOverlay>
+              {activeTodo ? (
+                <Item
+                  variant={activeTodo.completed ? "muted" : "default"}
+                  className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
+                >
+                  <ItemMedia>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-grabbing"
+                        aria-hidden
+                        tabIndex={-1}
+                      >
+                        <GripVertical className="size-4 text-muted-foreground" />
+                      </Button>
+                      <Checkbox
+                        checked={activeTodo.completed}
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    </div>
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle
+                      className={
+                        activeTodo.completed
+                          ? "text-muted-foreground line-through"
+                          : ""
+                      }
+                    >
+                      {activeTodo.title}
+                    </ItemTitle>
+                  </ItemContent>
+                </Item>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Todo9 };
diff --git a/blocks/trust-strip1.tsx b/blocks/trust-strip1.tsx
new file mode 100644
index 0000000..60d8113
--- /dev/null
+++ b/blocks/trust-strip1.tsx
@@ -0,0 +1,73 @@
+import { RotateCcw, Shield, Star, Truck } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface TrustItem {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+}
+
+interface TrustStrip1Props {
+  items?: TrustItem[];
+  className?: string;
+}
+
+const DEFAULT_ITEMS: TrustItem[] = [
+  {
+    icon: <Truck className="size-5" />,
+    title: "ارسال رایگان",
+    description: "برای سفارش‌های بالای ۵۰ دلار",
+  },
+  {
+    icon: <RotateCcw className="size-5" />,
+    title: "مرجوعی آسان",
+    description: "ضمانت بازگشت ۳۰ روزه",
+  },
+  {
+    icon: <Shield className="size-5" />,
+    title: "پرداخت امن",
+    description: "تراکنش ۱۰۰٪ محافظت‌شده",
+  },
+  {
+    icon: <Star className="size-5" />,
+    title: "امتیاز ۴٫۹ از ۵",
+    description: "از بیش از ۱۰٬۰۰۰ نظر",
+  },
+];
+
+const TrustStrip1 = ({
+  items = DEFAULT_ITEMS,
+  className,
+}: TrustStrip1Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("border-y bg-muted/30 py-6", className)}
+    >
+      <div className="container">
+        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+          {items.map((item, index) => (
+            <div key={index} className="flex items-center gap-3">
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+                {item.icon}
+              </div>
+              <div className="text-start">
+                <p className="leading-tight font-medium">{item.title}</p>
+                {item.description && (
+                  <p className="text-sm text-muted-foreground">
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { TrustStrip1 };
diff --git a/blocks/trust-strip2.tsx b/blocks/trust-strip2.tsx
new file mode 100644
index 0000000..ddadfeb
--- /dev/null
+++ b/blocks/trust-strip2.tsx
@@ -0,0 +1,91 @@
+import { Star } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface TrustStrip2Props {
+  rating?: number;
+  reviewCount?: number;
+  customerCount?: string;
+  pressLogos?: { name: string; logo?: string }[];
+  className?: string;
+}
+
+const DEFAULT_LOGOS = [
+  { name: "Forbes" },
+  { name: "TechCrunch" },
+  { name: "Vogue" },
+  { name: "Wired" },
+  { name: "GQ" },
+];
+
+const formatRating = (value: number) =>
+  value.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+const TrustStrip2 = ({
+  rating = 4.9,
+  reviewCount = 12500,
+  customerCount = "بیش از ۱ میلیون",
+  pressLogos = DEFAULT_LOGOS,
+  className,
+}: TrustStrip2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-8", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6 md:flex-row md:justify-between">
+          <div className="flex flex-wrap items-center justify-center gap-6 md:justify-start">
+            <div className="flex items-center gap-2">
+              <div className="flex">
+                {[...Array(5)].map((_, i) => (
+                  <Star
+                    key={i}
+                    className={cn(
+                      "size-5",
+                      i < Math.floor(rating)
+                        ? "fill-amber-400 text-amber-400"
+                        : "fill-muted text-muted",
+                    )}
+                  />
+                ))}
+              </div>
+              <span className="font-semibold">{formatRating(rating)}</span>
+              <span className="text-muted-foreground">
+                ({reviewCount.toLocaleString("fa-IR")} نظر)
+              </span>
+            </div>
+
+            <div className="hidden h-6 w-px bg-border md:block" />
+
+            <p className="text-muted-foreground">
+              مورد اعتماد{" "}
+              <span className="font-semibold text-foreground">
+                {customerCount}
+              </span>{" "}
+              مشتری
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-center justify-center gap-6">
+            <span className="text-sm text-muted-foreground">
+              منتشر شده در:
+            </span>
+            <div className="flex flex-wrap items-center justify-center gap-4">
+              {pressLogos.map((logo, index) => (
+                <span
+                  key={index}
+                  className="text-sm font-semibold text-muted-foreground"
+                >
+                  {logo.name}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { TrustStrip2 };
diff --git a/blocks/trust-strip3.tsx b/blocks/trust-strip3.tsx
new file mode 100644
index 0000000..9e09fd3
--- /dev/null
+++ b/blocks/trust-strip3.tsx
@@ -0,0 +1,65 @@
+import { Award, Lock, Medal, ShieldCheck } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Certification {
+  icon: React.ReactNode;
+  name: string;
+}
+
+interface TrustStrip3Props {
+  certifications?: Certification[];
+  guarantees?: string[];
+  className?: string;
+}
+
+const DEFAULT_CERTIFICATIONS: Certification[] = [
+  { icon: <ShieldCheck className="size-5" />, name: "امن با SSL" },
+  { icon: <Lock className="size-5" />, name: "مطابق استاندارد PCI" },
+  { icon: <Award className="size-5" />, name: "دارای گواهی اعتماد" },
+  { icon: <Medal className="size-5" />, name: "بالاترین امتیاز ۲۲۴" },
+];
+
+const DEFAULT_GUARANTEES = [
+  "ضمانت بازگشت وجه",
+  "محصولات اصیل",
+  "تسویه امن",
+];
+
+const TrustStrip3 = ({
+  certifications = DEFAULT_CERTIFICATIONS,
+  guarantees = DEFAULT_GUARANTEES,
+  className,
+}: TrustStrip3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("border-y py-6", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center gap-6 md:flex-row md:justify-between">
+          <div className="flex flex-wrap items-center justify-center gap-4 md:justify-start">
+            {certifications.map((cert, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-2 rounded-full bg-muted px-3 py-1.5"
+              >
+                <span className="text-muted-foreground">{cert.icon}</span>
+                <span className="text-sm font-medium">{cert.name}</span>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-muted-foreground md:justify-end">
+            {guarantees.map((guarantee, index) => (
+              <div key={index} className="flex items-center gap-1.5">
+                <div className="size-1.5 shrink-0 rounded-full bg-emerald-500" />
+                <span>{guarantee}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { TrustStrip3 };
diff --git a/blocks/trust-strip4.tsx b/blocks/trust-strip4.tsx
new file mode 100644
index 0000000..341170e
--- /dev/null
+++ b/blocks/trust-strip4.tsx
@@ -0,0 +1,95 @@
+import {
+  BadgeCheck,
+  Headphones,
+  RotateCcw,
+  Shield,
+  Star,
+  Truck,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface TrustStrip4Props {
+  rating?: number;
+  reviewCount?: number;
+  className?: string;
+}
+
+const formatRating = (value: number) =>
+  value.toLocaleString("fa-IR", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
+const FEATURES = [
+  {
+    icon: <Truck className="size-4" />,
+    text: "ارسال رایگان برای سفارش‌های بالای ۷۵ دلار",
+  },
+  {
+    icon: <RotateCcw className="size-4" />,
+    text: "مرجوعی رایگان تا ۳۰ روز",
+  },
+  { icon: <Shield className="size-4" />, text: "گارانتی ۲ ساله" },
+  { icon: <Headphones className="size-4" />, text: "پشتیبانی ۲۴/۷" },
+];
+
+const TrustStrip4 = ({
+  rating = 4.8,
+  reviewCount = 25000,
+  className,
+}: TrustStrip4Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-4", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
+          <div className="flex flex-wrap items-center justify-center gap-4">
+            <div className="flex items-center gap-2">
+              <div className="flex">
+                {[...Array(5)].map((_, i) => (
+                  <Star
+                    key={i}
+                    className={cn(
+                      "size-4",
+                      i < Math.floor(rating)
+                        ? "fill-amber-400 text-amber-400"
+                        : "fill-muted text-muted",
+                    )}
+                  />
+                ))}
+              </div>
+              <span className="text-sm font-semibold">
+                {formatRating(rating)}
+              </span>
+            </div>
+            <Separator orientation="vertical" className="hidden h-4 sm:block" />
+            <span className="text-sm text-muted-foreground">
+              بیش از {reviewCount.toLocaleString("fa-IR")} نظر تأییدشده
+            </span>
+          </div>
+
+          <div className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
+            {FEATURES.map((feature, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-1.5 text-sm text-muted-foreground"
+              >
+                {feature.icon}
+                <span>{feature.text}</span>
+              </div>
+            ))}
+          </div>
+
+          <Badge variant="secondary" className="gap-1.5">
+            <BadgeCheck className="size-3.5 text-emerald-600" />
+            فروشنده تأییدشده
+          </Badge>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { TrustStrip4 };
diff --git a/blocks/user-profile1.tsx b/blocks/user-profile1.tsx
new file mode 100644
index 0000000..837ce84
--- /dev/null
+++ b/blocks/user-profile1.tsx
@@ -0,0 +1,109 @@
+import { Mail, MapPin } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name: string;
+  avatar?: string;
+  role?: string;
+  bio?: string;
+  location?: string;
+  email?: string;
+  verified?: boolean;
+}
+
+interface UserProfile1Props {
+  user?: User;
+  className?: string;
+}
+
+const UserProfile1 = ({
+  user = {
+    name: "الهام میرزایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+    role: "طراح ارشد محصول",
+    bio: "طراحی تجربه‌های دیجیتال شهودی با تمرکز بر دسترس‌پذیری و رضایت کاربر. سابقه کار در فیگما و استرایپ.",
+    location: "تهران، ایران",
+    email: "elham.mirzaei@email.com",
+    verified: true,
+  },
+  className,
+}: UserProfile1Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex justify-center">
+        <Card className="w-full max-w-sm text-center">
+          <CardHeader className="pb-0">
+            <div className="flex flex-col items-center gap-4">
+              <Avatar className="size-24">
+                <AvatarImage
+                  src={user.avatar}
+                  alt={user.name}
+                  className="object-cover"
+                />
+                <AvatarFallback className="text-xl font-semibold">
+                  {initials}
+                </AvatarFallback>
+              </Avatar>
+              <div className="space-y-1">
+                <div className="flex items-center justify-center gap-2">
+                  <h3 className="text-xl font-semibold">{user.name}</h3>
+                  {user.verified && (
+                    <Badge variant="secondary" className="text-xs">
+                      تأیید‌شده
+                    </Badge>
+                  )}
+                </div>
+                {user.role && (
+                  <p className="text-sm text-muted-foreground">{user.role}</p>
+                )}
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4 pt-6">
+            {user.bio && (
+              <p className="text-sm text-muted-foreground">{user.bio}</p>
+            )}
+            <div className="flex flex-col items-center gap-2 text-sm text-muted-foreground">
+              {user.location && (
+                <div className="flex items-center gap-1.5">
+                  <MapPin className="size-3.5" />
+                  <span>{user.location}</span>
+                </div>
+              )}
+              {user.email && (
+                <div className="flex items-center gap-1.5">
+                  <Mail className="size-3.5" />
+                  <span dir="rtl">{user.email}</span>
+                </div>
+              )}
+            </div>
+          </CardContent>
+          <CardFooter className="flex gap-2">
+            <Button className="flex-1">پیام</Button>
+            <Button variant="outline" className="flex-1">
+              دنبال کردن
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </section>
+  );
+};
+
+export { UserProfile1 };
diff --git a/blocks/user-profile10.tsx b/blocks/user-profile10.tsx
new file mode 100644
index 0000000..bcf3185
--- /dev/null
+++ b/blocks/user-profile10.tsx
@@ -0,0 +1,84 @@
+import { BadgeCheck, LayoutGrid, Plus, Users } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name: string;
+  image?: string;
+  bio?: string;
+  verified?: boolean;
+  followers?: number;
+  posts?: number;
+}
+
+interface UserProfile10Props {
+  user?: User;
+  className?: string;
+}
+
+const UserProfile10 = ({
+  user = {
+    name: "سارا احمدی",
+    image:
+      "/block-media/shadcnblocks/block/portraits/Elegant%20Woman%20Portrait.png",
+    bio: "مهندس UX؛ ساخت تجربه‌های شهودی با ترکیب کد و طراحی",
+    verified: true,
+    followers: 1248,
+    posts: 42,
+  },
+  className,
+}: UserProfile10Props) => {
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "w-full max-w-xs overflow-hidden pt-0 shadow-lg",
+        className,
+      )}
+    >
+      <div className="relative aspect-[4/5] w-full overflow-hidden">
+        <img
+          src={user.image}
+          alt={user.name}
+          className="size-full object-cover"
+        />
+      </div>
+
+      <CardContent className="space-y-4 p-5">
+        <div>
+          <div className="flex items-center gap-1.5">
+            <h3 className="text-lg font-semibold">{user.name}</h3>
+            {user.verified && (
+              <BadgeCheck className="size-5 fill-emerald-500 text-card" />
+            )}
+          </div>
+          {user.bio && (
+            <p className="mt-1 text-sm text-muted-foreground">{user.bio}</p>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <span className="flex items-center gap-1.5">
+              <Users className="size-4" />
+              {user.followers?.toLocaleString("fa-IR")}
+            </span>
+            <span className="flex items-center gap-1.5">
+              <LayoutGrid className="size-4" />
+              {user.posts?.toLocaleString("fa-IR")}
+            </span>
+          </div>
+          <Button size="sm" className="gap-1.5">
+            دنبال کردن
+            <Plus className="size-4" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { UserProfile10 };
diff --git a/blocks/user-profile11.tsx b/blocks/user-profile11.tsx
new file mode 100644
index 0000000..57ca109
--- /dev/null
+++ b/blocks/user-profile11.tsx
@@ -0,0 +1,89 @@
+import { BadgeCheck, LayoutGrid, Plus, Users } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name: string;
+  image?: string;
+  bio?: string;
+  verified?: boolean;
+  followers?: number;
+  posts?: number;
+}
+
+interface UserProfile11Props {
+  user?: User;
+  className?: string;
+}
+
+const UserProfile11 = ({
+  user = {
+    name: "سارا احمدی",
+    image:
+      "/block-media/shadcnblocks/block/portraits/Elegant%20Woman%20Portrait.png",
+    bio: "مهندس UX؛ ساخت تجربه‌های شهودی با ترکیب کد و طراحی",
+    verified: true,
+    followers: 1248,
+    posts: 42,
+  },
+  className,
+}: UserProfile11Props) => {
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative w-full max-w-xs overflow-hidden rounded-2xl shadow-lg",
+        className,
+      )}
+    >
+      {/* Full background image */}
+      <img
+        src={user.image}
+        alt={`تصویر ${user.name}`}
+        className="aspect-[3/4] w-full object-cover"
+      />
+
+      {/* Gradient overlay for text readability */}
+      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+
+      {/* Content overlay at bottom - uses explicit light colors since it's always on dark overlay */}
+      <div className="absolute inset-x-0 bottom-0 space-y-3 p-5 text-start text-white">
+        {/* Name with verification badge */}
+        <div>
+          <div className="flex items-center gap-1.5">
+            <h3 className="text-lg font-semibold">{user.name}</h3>
+            {user.verified && (
+              <BadgeCheck className="size-5 fill-emerald-500 text-white" />
+            )}
+          </div>
+          {user.bio && <p className="mt-1 text-sm text-white/80">{user.bio}</p>}
+        </div>
+
+        {/* Stats and follow button */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4 text-sm text-white/80">
+            <span className="flex items-center gap-1.5">
+              <Users className="size-4" />
+              {user.followers?.toLocaleString("fa-IR")}
+            </span>
+            <span className="flex items-center gap-1.5">
+              <LayoutGrid className="size-4" />
+              {user.posts?.toLocaleString("fa-IR")}
+            </span>
+          </div>
+          <Button
+            size="sm"
+            className="gap-1.5 bg-white/20 text-white backdrop-blur-sm hover:bg-white/30"
+          >
+            دنبال کردن
+            <Plus className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { UserProfile11 };
diff --git a/blocks/user-profile12.tsx b/blocks/user-profile12.tsx
new file mode 100644
index 0000000..9790ebc
--- /dev/null
+++ b/blocks/user-profile12.tsx
@@ -0,0 +1,126 @@
+import { BadgeCheck, MessageSquare, Pencil, Plus } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Stat {
+  label: string;
+  value: string;
+}
+
+interface User {
+  name: string;
+  username: string;
+  avatar?: string;
+  coverImage?: string;
+  bio?: string;
+  verified?: boolean;
+}
+
+interface UserProfile12Props {
+  user?: User;
+  stats?: Stat[];
+  className?: string;
+}
+
+const UserProfile12 = ({
+  user = {
+    name: "امیر رضایی",
+    username: "@amir_rezaei",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar12.jpg",
+    coverImage:
+      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
+    bio: "توسعه‌دهنده فول‌استک با علاقه به ساخت وب‌اپلیکیشن‌های زیبا و پرفورمنس. مشارکت‌کننده متن‌باز و علاقه‌مند به TypeScript.",
+    verified: true,
+  },
+  stats = [
+    { label: "پست‌ها", value: "۸۴۷" },
+    { label: "دنبال‌شده", value: "۳۱۲" },
+    { label: "دنبال‌کننده", value: "۸۹ هزار" },
+  ],
+  className,
+}: UserProfile12Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-md overflow-hidden pt-0", className)}
+    >
+      <div
+        className="h-36 bg-muted bg-cover bg-center"
+        style={{
+          backgroundImage: user.coverImage
+            ? `url(${user.coverImage})`
+            : undefined,
+        }}
+      />
+
+      <CardContent className="relative px-6 pb-6">
+        <Avatar className="-mt-14 size-28 border-4 border-card shadow-lg">
+          <AvatarImage
+            src={user.avatar}
+            alt={user.name}
+            className="object-cover"
+          />
+          <AvatarFallback className="text-xl font-semibold">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="absolute top-4 end-6 gap-1.5"
+        >
+          <Pencil className="size-3.5" />
+          ویرایش پروفایل
+        </Button>
+
+        <div className="mt-3">
+          <div className="flex items-center gap-2">
+            <h2 className="text-xl font-bold">{user.name}</h2>
+            {user.verified && (
+              <BadgeCheck className="size-6 fill-sky-500 text-card" />
+            )}
+          </div>
+          <p className="text-muted-foreground" dir="rtl">
+            {user.username}
+          </p>
+        </div>
+
+        <div className="mt-4 flex items-center gap-2">
+          <Button className="gap-1.5">
+            <Plus className="size-4" />
+            دنبال کردن
+          </Button>
+          <Button variant="outline" size="icon" aria-label="پیام">
+            <MessageSquare className="size-4" />
+          </Button>
+        </div>
+
+        {user.bio && (
+          <p className="mt-5 text-sm text-muted-foreground">{user.bio}</p>
+        )}
+
+        <div className="mt-6 flex items-center justify-between border-t pt-6">
+          {stats.map((stat) => (
+            <div key={stat.label} className="text-center">
+              <div className="text-xl font-bold">{stat.value}</div>
+              <div className="text-sm text-muted-foreground">{stat.label}</div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { UserProfile12 };
diff --git a/blocks/user-profile13.tsx b/blocks/user-profile13.tsx
new file mode 100644
index 0000000..c8ccc77
--- /dev/null
+++ b/blocks/user-profile13.tsx
@@ -0,0 +1,146 @@
+import { Bookmark, Briefcase, Star } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface UserData {
+  name: string;
+  role: string;
+  avatar?: string;
+  coverImage?: string;
+  isOnline?: boolean;
+  skills?: string[];
+  rating?: number;
+  projects?: number;
+  hourlyRate?: number;
+}
+
+interface UserProfile13Props {
+  user?: UserData;
+  className?: string;
+}
+
+const UserProfile13 = ({
+  user = {
+    name: "امیر رضایی",
+    role: "توسعه‌دهنده فول‌استک",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar1.webp",
+    coverImage:
+      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
+    isOnline: true,
+    skills: ["React", "TypeScript", "Node.js", "PostgreSQL"],
+    rating: 4.8,
+    projects: 127,
+    hourlyRate: 95,
+  },
+  className,
+}: UserProfile13Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  const extraSkills =
+    user.skills && user.skills.length > 3 ? user.skills.length - 3 : 0;
+  const displayedSkills = user.skills?.slice(0, 3) || [];
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-sm overflow-hidden pt-0", className)}
+    >
+      <div
+        className="h-36 bg-muted bg-cover bg-center"
+        style={{
+          backgroundImage: user.coverImage
+            ? `url(${user.coverImage})`
+            : undefined,
+        }}
+      />
+
+      <CardContent className="relative px-5 pb-5">
+        <div className="relative -mt-10 inline-block">
+          <Avatar className="size-20 border-4 border-card shadow-lg">
+            <AvatarImage
+              src={user.avatar}
+              alt={user.name}
+              className="object-cover"
+            />
+            <AvatarFallback className="text-xl font-semibold">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          {user.isOnline && (
+            <span className="absolute end-1 bottom-1 size-4 rounded-full border-2 border-card bg-emerald-500" />
+          )}
+        </div>
+
+        <Button
+          variant="outline"
+          size="icon"
+          className="absolute top-4 end-5 size-9 rounded-full"
+          aria-label="ذخیره"
+        >
+          <Bookmark className="size-4" />
+        </Button>
+
+        <div className="mt-2">
+          <h3 className="text-xl font-semibold">{user.name}</h3>
+          <p className="text-sm text-muted-foreground">{user.role}</p>
+        </div>
+
+        <div className="mt-4 flex flex-wrap gap-2">
+          {displayedSkills.map((skill) => (
+            <Badge key={skill} variant="outline" className="rounded-full">
+              {skill}
+            </Badge>
+          ))}
+          {extraSkills > 0 && (
+            <Badge variant="outline" className="rounded-full">
+              +{extraSkills.toLocaleString("fa-IR")}
+            </Badge>
+          )}
+        </div>
+
+        <div className="mt-5 flex items-center justify-between border-t pt-5">
+          <div className="flex items-center gap-1.5">
+            <Star className="size-4 fill-current" />
+            <span className="font-semibold">
+              {user.rating?.toLocaleString("fa-IR", {
+                minimumFractionDigits: 1,
+                maximumFractionDigits: 1,
+              })}
+            </span>
+            <span className="text-sm text-muted-foreground">امتیاز</span>
+          </div>
+          <div className="h-8 w-px bg-border" />
+          <div className="flex items-center gap-1.5">
+            <Briefcase className="size-4" />
+            <span className="font-semibold">
+              {user.projects?.toLocaleString("fa-IR")}
+            </span>
+            <span className="text-sm text-muted-foreground">پروژه</span>
+          </div>
+          <div className="h-8 w-px bg-border" />
+          <div>
+            <span className="font-semibold" dir="rtl">
+              ${user.hourlyRate?.toLocaleString("fa-IR")}/ساعت
+            </span>
+            <span className="block text-xs text-muted-foreground">نرخ</span>
+          </div>
+        </div>
+
+        <Button className="mt-5 w-full rounded-full" size="lg">
+          استخدام من
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { UserProfile13 };
diff --git a/blocks/user-profile14.tsx b/blocks/user-profile14.tsx
new file mode 100644
index 0000000..850c00d
--- /dev/null
+++ b/blocks/user-profile14.tsx
@@ -0,0 +1,156 @@
+import { Bookmark, Briefcase, Star } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface UserData {
+  name: string;
+  role: string;
+  avatar?: string;
+  coverImage?: string;
+  isOnline?: boolean;
+  skills?: string[];
+  rating?: number;
+  projects?: number;
+  hourlyRate?: number;
+}
+
+interface UserProfile14Props {
+  user?: UserData;
+  className?: string;
+}
+
+const UserProfile14 = ({
+  user = {
+    name: "امیر رضایی",
+    role: "توسعه‌دهنده فول‌استک",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
+    coverImage:
+      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
+    isOnline: true,
+    skills: ["React", "TypeScript", "Node.js", "PostgreSQL"],
+    rating: 4.8,
+    projects: 127,
+    hourlyRate: 95,
+  },
+  className,
+}: UserProfile14Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  const extraSkills =
+    user.skills && user.skills.length > 3 ? user.skills.length - 3 : 0;
+  const displayedSkills = user.skills?.slice(0, 3) || [];
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative w-full max-w-sm overflow-hidden rounded-2xl",
+        className,
+      )}
+    >
+      <img
+        src={user.coverImage}
+        alt=""
+        className="absolute inset-0 size-full object-cover"
+      />
+
+      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
+
+      <div className="relative flex flex-col p-5 text-white">
+        <div className="flex items-start justify-between">
+          <div className="relative">
+            <Avatar className="size-20 border-2 border-white/30 shadow-lg">
+              <AvatarImage
+                src={user.avatar}
+                alt={user.name}
+                className="object-cover"
+              />
+              <AvatarFallback className="bg-white/20 text-xl font-semibold text-white">
+                {initials}
+              </AvatarFallback>
+            </Avatar>
+            {user.isOnline && (
+              <span className="absolute end-1 bottom-1 size-4 rounded-full border-2 border-black/50 bg-emerald-500" />
+            )}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-9 rounded-full border border-white/30 text-white hover:bg-white/10 hover:text-white"
+            aria-label="ذخیره"
+          >
+            <Bookmark className="size-4" />
+          </Button>
+        </div>
+
+        <div className="mt-4">
+          <h3 className="text-xl font-semibold">{user.name}</h3>
+          <p className="text-sm text-white/70">{user.role}</p>
+        </div>
+
+        <div className="mt-4 flex flex-wrap gap-2">
+          {displayedSkills.map((skill) => (
+            <Badge
+              key={skill}
+              variant="outline"
+              className="rounded-full border-white/30 bg-white/10 text-white hover:bg-white/20"
+            >
+              {skill}
+            </Badge>
+          ))}
+          {extraSkills > 0 && (
+            <Badge
+              variant="outline"
+              className="rounded-full border-white/30 bg-white/10 text-white"
+            >
+              +{extraSkills.toLocaleString("fa-IR")}
+            </Badge>
+          )}
+        </div>
+
+        <div className="mt-6 flex items-center justify-between">
+          <div className="flex items-center gap-1.5">
+            <Star className="size-4 fill-amber-400 text-amber-400" />
+            <span className="font-semibold">
+              {user.rating?.toLocaleString("fa-IR", {
+                minimumFractionDigits: 1,
+                maximumFractionDigits: 1,
+              })}
+            </span>
+            <span className="text-sm text-white/60">امتیاز</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Briefcase className="size-4 text-white/60" />
+            <span className="font-semibold">
+              {user.projects?.toLocaleString("fa-IR")}
+            </span>
+            <span className="text-sm text-white/60">پروژه</span>
+          </div>
+          <div>
+            <span className="font-semibold" dir="rtl">
+              ${user.hourlyRate?.toLocaleString("fa-IR")}/ساعت
+            </span>
+            <span className="block text-xs text-white/60">نرخ</span>
+          </div>
+        </div>
+
+        <Button
+          className="mt-6 w-full rounded-full bg-white text-black hover:bg-white/90"
+          size="lg"
+        >
+          استخدام من
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export { UserProfile14 };
diff --git a/blocks/user-profile2.tsx b/blocks/user-profile2.tsx
new file mode 100644
index 0000000..777be03
--- /dev/null
+++ b/blocks/user-profile2.tsx
@@ -0,0 +1,174 @@
+import { Github, Globe, Linkedin, Twitter } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface SocialLinks {
+  twitter?: string;
+  linkedin?: string;
+  github?: string;
+  website?: string;
+}
+
+interface Stats {
+  followers: number;
+  following: number;
+  projects: number;
+}
+
+interface User {
+  name: string;
+  avatar?: string;
+  role?: string;
+  company?: string;
+  bio?: string;
+  socialLinks?: SocialLinks;
+  stats?: Stats;
+}
+
+interface UserProfile2Props {
+  user?: User;
+  className?: string;
+}
+
+const formatNumber = (num: number): string => {
+  if (num >= 1000000) {
+    const value = num / 1000000;
+    const formatted = parseFloat(value.toFixed(1).replace(/\.0$/, "")).toLocaleString(
+      "fa-IR",
+      { useGrouping: false },
+    );
+    return `${formatted} میلیون`;
+  }
+  if (num >= 1000) {
+    const value = num / 1000;
+    const formatted = parseFloat(value.toFixed(1).replace(/\.0$/, "")).toLocaleString(
+      "fa-IR",
+      { useGrouping: false },
+    );
+    return `${formatted} هزار`;
+  }
+  return num.toLocaleString("fa-IR");
+};
+
+const UserProfile2 = ({
+  user = {
+    name: "امیر رضایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
+    role: "توسعه‌دهنده فول‌استک",
+    company: "ورسل",
+    bio: "ساخت ابزار برای توسعه‌دهندگان. علاقه‌مند به متن‌باز. مدافع TypeScript. وب را سریع‌تر می‌کنیم، یک کامیت در هر بار.",
+    socialLinks: {
+      twitter: "https://twitter.com",
+      linkedin: "https://linkedin.com",
+      github: "https://github.com",
+      website: "https://example.com",
+    },
+    stats: {
+      followers: 12400,
+      following: 892,
+      projects: 47,
+    },
+  },
+  className,
+}: UserProfile2Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  const socialIcons = [
+    { key: "twitter", icon: Twitter, href: user.socialLinks?.twitter },
+    { key: "linkedin", icon: Linkedin, href: user.socialLinks?.linkedin },
+    { key: "github", icon: Github, href: user.socialLinks?.github },
+    { key: "website", icon: Globe, href: user.socialLinks?.website },
+  ].filter((item) => item.href);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex justify-center">
+        <div className="w-full max-w-md space-y-6">
+          <div className="flex items-start gap-5">
+            <Avatar className="size-20 shrink-0">
+              <AvatarImage
+                src={user.avatar}
+                alt={user.name}
+                className="object-cover"
+              />
+              <AvatarFallback className="text-xl font-semibold">
+                {initials}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0 flex-1 space-y-1">
+              <h3 className="text-xl font-semibold">{user.name}</h3>
+              <p className="text-sm text-muted-foreground">
+                {user.role}
+                {user.company && (
+                  <>
+                    {" "}
+                    در <span className="font-medium">{user.company}</span>
+                  </>
+                )}
+              </p>
+              {socialIcons.length > 0 && (
+                <div className="flex gap-2 pt-2">
+                  {socialIcons.map(({ key, icon: Icon, href }) => (
+                    <a
+                      key={key}
+                      href={href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      <Icon className="size-4" />
+                    </a>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {user.bio && (
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              {user.bio}
+            </p>
+          )}
+
+          {user.stats && (
+            <div className="flex gap-6 border-y py-4">
+              <div className="text-center">
+                <p className="text-xl font-semibold">
+                  {formatNumber(user.stats.followers)}
+                </p>
+                <p className="text-xs text-muted-foreground">دنبال‌کننده</p>
+              </div>
+              <div className="text-center">
+                <p className="text-xl font-semibold">
+                  {formatNumber(user.stats.following)}
+                </p>
+                <p className="text-xs text-muted-foreground">دنبال‌شده</p>
+              </div>
+              <div className="text-center">
+                <p className="text-xl font-semibold">
+                  {formatNumber(user.stats.projects)}
+                </p>
+                <p className="text-xs text-muted-foreground">پروژه</p>
+              </div>
+            </div>
+          )}
+
+          <div className="flex gap-3">
+            <Button className="flex-1">دنبال کردن</Button>
+            <Button variant="outline" className="flex-1">
+              پیام
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { UserProfile2 };
diff --git a/blocks/user-profile3.tsx b/blocks/user-profile3.tsx
new file mode 100644
index 0000000..5ff894a
--- /dev/null
+++ b/blocks/user-profile3.tsx
@@ -0,0 +1,241 @@
+import {
+  Calendar,
+  Github,
+  Globe,
+  Linkedin,
+  MapPin,
+  Twitter,
+} from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface SocialLinks {
+  twitter?: string;
+  linkedin?: string;
+  github?: string;
+  website?: string;
+}
+
+interface Stats {
+  followers: number;
+  following: number;
+  contributions: number;
+}
+
+interface User {
+  name: string;
+  avatar?: string;
+  coverImage?: string;
+  role?: string;
+  company?: string;
+  bio?: string;
+  location?: string;
+  joinedAt?: string;
+  skills?: string[];
+  socialLinks?: SocialLinks;
+  stats?: Stats;
+  isFollowing?: boolean;
+}
+
+interface UserProfile3Props {
+  user?: User;
+  className?: string;
+}
+
+const formatNumber = (num: number): string => {
+  if (num >= 1000000) {
+    const value = num / 1000000;
+    const formatted = parseFloat(value.toFixed(1).replace(/\.0$/, "")).toLocaleString(
+      "fa-IR",
+      { useGrouping: false },
+    );
+    return `${formatted} میلیون`;
+  }
+  if (num >= 1000) {
+    const value = num / 1000;
+    const formatted = parseFloat(value.toFixed(1).replace(/\.0$/, "")).toLocaleString(
+      "fa-IR",
+      { useGrouping: false },
+    );
+    return `${formatted} هزار`;
+  }
+  return num.toLocaleString("fa-IR");
+};
+
+const UserProfile3 = ({
+  user = {
+    name: "سارا احمدی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+    coverImage:
+      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
+    role: "مهندس طراحی",
+    company: "لینیر",
+    bio: "پل زدن بین طراحی و مهندسی برای ساخت تجربه‌های کاربری روان. پیش‌تر سیستم‌های طراحی در نوشن ساخته و به Radix UI مشارکت کرده‌ام. درباره توکن‌های طراحی، معماری کامپوننت و تقاطع زیبایی‌شناسی و کارایی می‌نویسم.",
+    location: "تهران، ایران",
+    joinedAt: "فروردین ۱۴۰۰",
+    skills: [
+      "React",
+      "TypeScript",
+      "Figma",
+      "سیستم‌های طراحی",
+      "CSS",
+      "انیمیشن",
+    ],
+    socialLinks: {
+      twitter: "https://twitter.com",
+      linkedin: "https://linkedin.com",
+      github: "https://github.com",
+      website: "https://example.com",
+    },
+    stats: {
+      followers: 8420,
+      following: 312,
+      contributions: 1247,
+    },
+    isFollowing: false,
+  },
+  className,
+}: UserProfile3Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  const socialIcons = [
+    { key: "twitter", icon: Twitter, href: user.socialLinks?.twitter },
+    { key: "linkedin", icon: Linkedin, href: user.socialLinks?.linkedin },
+    { key: "github", icon: Github, href: user.socialLinks?.github },
+    { key: "website", icon: Globe, href: user.socialLinks?.website },
+  ].filter((item) => item.href);
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto max-w-2xl overflow-hidden rounded-xl border bg-card">
+          <div className="relative h-32 bg-muted sm:h-40">
+            {user.coverImage && (
+              <img
+                src={user.coverImage}
+                alt=""
+                className="size-full object-cover"
+              />
+            )}
+          </div>
+
+          <div className="relative px-6 pb-6">
+            <div className="-mt-12 mb-4 flex items-end justify-between sm:-mt-14">
+              <Avatar className="size-24 border-4 border-card sm:size-28">
+                <AvatarImage
+                  src={user.avatar}
+                  alt={user.name}
+                  className="object-cover"
+                />
+                <AvatarFallback className="text-xl font-semibold">
+                  {initials}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex gap-2">
+                <Button variant={user.isFollowing ? "outline" : "default"}>
+                  {user.isFollowing ? "دنبال‌شده" : "دنبال کردن"}
+                </Button>
+                <Button variant="outline">پیام</Button>
+              </div>
+            </div>
+
+            <div className="space-y-1">
+              <h2 className="text-xl font-bold">{user.name}</h2>
+              <p className="text-muted-foreground">
+                {user.role}
+                {user.company && (
+                  <>
+                    {" "}
+                    در <span className="font-medium">{user.company}</span>
+                  </>
+                )}
+              </p>
+            </div>
+
+            {user.bio && (
+              <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
+                {user.bio}
+              </p>
+            )}
+
+            <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
+              {user.location && (
+                <div className="flex items-center gap-1.5">
+                  <MapPin className="size-3.5" />
+                  <span>{user.location}</span>
+                </div>
+              )}
+              {user.joinedAt && (
+                <div className="flex items-center gap-1.5">
+                  <Calendar className="size-3.5" />
+                  <span>عضویت از {user.joinedAt}</span>
+                </div>
+              )}
+            </div>
+
+            {socialIcons.length > 0 && (
+              <div className="mt-4 flex gap-3">
+                {socialIcons.map(({ key, icon: Icon, href }) => (
+                  <a
+                    key={key}
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-muted-foreground transition-colors hover:text-foreground"
+                  >
+                    <Icon className="size-5" />
+                  </a>
+                ))}
+              </div>
+            )}
+
+            {user.stats && (
+              <div className="mt-6 flex gap-6 border-t pt-6">
+                <div>
+                  <span className="font-semibold">
+                    {formatNumber(user.stats.followers)}
+                  </span>{" "}
+                  <span className="text-muted-foreground">دنبال‌کننده</span>
+                </div>
+                <div>
+                  <span className="font-semibold">
+                    {formatNumber(user.stats.following)}
+                  </span>{" "}
+                  <span className="text-muted-foreground">دنبال‌شده</span>
+                </div>
+                <div>
+                  <span className="font-semibold">
+                    {formatNumber(user.stats.contributions)}
+                  </span>{" "}
+                  <span className="text-muted-foreground">مشارکت</span>
+                </div>
+              </div>
+            )}
+
+            {user.skills && user.skills.length > 0 && (
+              <div className="mt-6 border-t pt-6">
+                <h3 className="mb-3 text-sm font-medium">مهارت‌ها</h3>
+                <div className="flex flex-wrap gap-2">
+                  {user.skills.map((skill) => (
+                    <Badge key={skill} variant="secondary">
+                      {skill}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { UserProfile3 };
diff --git a/blocks/user-profile4.tsx b/blocks/user-profile4.tsx
new file mode 100644
index 0000000..c8bb008
--- /dev/null
+++ b/blocks/user-profile4.tsx
@@ -0,0 +1,79 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name: string;
+  avatar?: string;
+  role?: string;
+  status?: "online" | "offline" | "away" | "busy";
+}
+
+interface UserProfile4Props {
+  user?: User;
+  className?: string;
+  showStatus?: boolean;
+}
+
+const statusColors = {
+  online: "bg-emerald-500",
+  offline: "bg-muted-foreground",
+  away: "bg-amber-500",
+  busy: "bg-red-500",
+};
+
+const UserProfile4 = ({
+  user = {
+    name: "الهام میرزایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+    role: "طراح محصول",
+    status: "online",
+  },
+  className,
+  showStatus = true,
+}: UserProfile4Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "inline-flex max-w-xs items-center gap-3 rounded-full border bg-card py-1.5 ps-1.5 pe-4 shadow-sm",
+        className,
+      )}
+    >
+      <div className="relative">
+        <Avatar className="size-8">
+          <AvatarImage
+            src={user.avatar}
+            alt={user.name}
+            className="object-cover"
+          />
+          <AvatarFallback className="text-xs font-medium">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+        {showStatus && user.status && (
+          <span
+            className={cn(
+              "absolute -bottom-0.5 -end-0.5 size-3 rounded-full border-2 border-card",
+              statusColors[user.status],
+            )}
+          />
+        )}
+      </div>
+      <div className="flex flex-col">
+        <span className="text-sm leading-tight font-medium">{user.name}</span>
+        {user.role && (
+          <span className="text-xs text-muted-foreground">{user.role}</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { UserProfile4 };
diff --git a/blocks/user-profile5.tsx b/blocks/user-profile5.tsx
new file mode 100644
index 0000000..d27c0bd
--- /dev/null
+++ b/blocks/user-profile5.tsx
@@ -0,0 +1,97 @@
+import { Mail, Phone } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name: string;
+  avatar?: string;
+  coverImage?: string;
+  role?: string;
+  department?: string;
+  email?: string;
+  phone?: string;
+}
+
+interface UserProfile5Props {
+  user?: User;
+  className?: string;
+}
+
+const UserProfile5 = ({
+  user = {
+    name: "مریم حسینی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
+    coverImage:
+      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
+    role: "طراح ارشد محصول",
+    department: "تیم طراحی",
+    email: "maryam.hosseini@company.com",
+    phone: "+982112345678",
+  },
+  className,
+}: UserProfile5Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  return (
+    <Card
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-xs overflow-hidden pt-0", className)}
+    >
+      <div
+        className="relative h-24 bg-muted bg-cover bg-center"
+        style={{
+          backgroundImage: user.coverImage
+            ? `url(${user.coverImage})`
+            : undefined,
+        }}
+      >
+        <span className="absolute bottom-2 start-4 text-xs font-medium text-white drop-shadow-sm">
+          {user.department}
+        </span>
+      </div>
+      <CardContent className="-mt-10 flex flex-col items-center px-6 pb-6">
+        <Avatar className="size-20 border-4 border-card shadow-lg">
+          <AvatarImage
+            src={user.avatar}
+            alt={user.name}
+            className="object-cover"
+          />
+          <AvatarFallback className="text-xl font-semibold">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+        <h3 className="mt-4 text-lg font-semibold">{user.name}</h3>
+        <p className="text-sm text-muted-foreground">{user.role}</p>
+
+        <div className="mt-6 flex w-full gap-2">
+          {user.email && (
+            <Button variant="outline" size="sm" className="flex-1" asChild>
+              <a href={`mailto:${user.email}`} className="inline-flex items-center gap-2">
+                <Mail className="size-4" />
+                ایمیل
+              </a>
+            </Button>
+          )}
+          {user.phone && (
+            <Button variant="outline" size="sm" className="flex-1" asChild>
+              <a href={`tel:${user.phone}`} className="inline-flex items-center gap-2">
+                <Phone className="size-4" />
+                تماس
+              </a>
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { UserProfile5 };
diff --git a/blocks/user-profile6.tsx b/blocks/user-profile6.tsx
new file mode 100644
index 0000000..8f72daf
--- /dev/null
+++ b/blocks/user-profile6.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import { Briefcase, Github, Linkedin, MapPin, Twitter } from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name: string;
+  avatar?: string;
+  role?: string;
+  company?: string;
+  location?: string;
+  bio?: string;
+  socialLinks?: {
+    twitter?: string;
+    linkedin?: string;
+    github?: string;
+  };
+  about?: string;
+  experience?: Array<{
+    title: string;
+    company: string;
+    period: string;
+    description: string;
+  }>;
+  projects?: Array<{
+    name: string;
+    description: string;
+    tech: string[];
+  }>;
+}
+
+interface UserProfile6Props {
+  user?: User;
+  className?: string;
+}
+
+const UserProfile6 = ({
+  user = {
+    name: "امیر رضایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
+    role: "مهندس ارشد نرم‌افزار",
+    company: "ورسل",
+    location: "تهران، ایران",
+    bio: "ساخت آینده توسعه وب. مشارکت‌کننده متن‌باز و علاقه‌مند به TypeScript.",
+    socialLinks: {
+      twitter: "https://twitter.com",
+      linkedin: "https://linkedin.com",
+      github: "https://github.com",
+    },
+    about:
+      "مهندس نرم‌افزار با بیش از ۸ سال تجربه در ساخت وب‌اپلیکیشن‌های مقیاس‌پذیر. در React، TypeScript و Node.js تخصص دارم. اکنون روی ابزارهای توسعه و بهبود تجربه توسعه‌دهندگان تمرکز می‌کنم. پیش‌تر در استرایپ و گوگل کار کرده‌ام. به متن‌باز علاقه‌مندم و به پروژه‌های محبوبی از جمله Next.js و Tailwind CSS مشارکت داشته‌ام.",
+    experience: [
+      {
+        title: "مهندس ارشد نرم‌افزار",
+        company: "ورسل",
+        period: "۱۴۱ - تاکنون",
+        description:
+          "رهبری توسعه قابلیت‌های فریم‌ورک وب و بهبود عملکرد build.",
+      },
+      {
+        title: "مهندس نرم‌افزار",
+        company: "استرایپ",
+        period: "۱۳۹۸ - ۱۴۱",
+        description:
+          "ساخت زیرساخت پرداخت با پردازش میلیون‌ها تراکنش روزانه.",
+      },
+      {
+        title: "توسعه‌دهنده فرانت‌اند",
+        company: "گوگل",
+        period: "۱۳۹۵ - ۱۳۹۸",
+        description:
+          "توسعه رابط کاربری برای محصولات حساب ابری Cloud Platform.",
+      },
+    ],
+    projects: [
+      {
+        name: "DevTools حرفه‌ای",
+        description:
+          "افزونه مرورگر برای دیباگ پیشرفته با بیش از ۵۰ هزار کاربر فعال.",
+        tech: ["TypeScript", "React", "Chrome APIs"],
+      },
+      {
+        name: "دروازه اتصال هوشمند",
+        description:
+          "راه‌حل متن‌باز مدیریت اتصال هوشمند برای معماری‌های میکروسرویس.",
+        tech: ["Go", "Kubernetes", "gRPC"],
+      },
+      {
+        name: "سیستم طراحی",
+        description: "کتابخانه کامپوننت مورد استفاده در بیش از ۲۰ اپلیکیشن داخلی.",
+        tech: ["React", "Storybook", "Tailwind"],
+      },
+    ],
+  },
+  className,
+}: UserProfile6Props) => {
+  const [activeTab, setActiveTab] = useState("about");
+
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  return (
+    <Card dir="rtl" lang="fa" className={cn("w-full max-w-2xl", className)}>
+      <CardContent className="p-6">
+        <div className="flex items-start gap-4">
+          <Avatar className="size-20 border-2 border-border">
+            <AvatarImage
+              src={user.avatar}
+              alt={user.name}
+              className="object-cover"
+            />
+            <AvatarFallback className="text-xl font-semibold">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex-1">
+            <h2 className="text-xl font-semibold">{user.name}</h2>
+            <p className="text-muted-foreground">
+              {user.role}
+              {user.company && (
+                <span>
+                  {" "}
+                  در <span className="font-medium">{user.company}</span>
+                </span>
+              )}
+            </p>
+            {user.location && (
+              <p className="mt-1 flex items-center gap-1 text-sm text-muted-foreground">
+                <MapPin className="size-3.5" />
+                {user.location}
+              </p>
+            )}
+            {user.bio && (
+              <p className="mt-2 text-sm text-muted-foreground">{user.bio}</p>
+            )}
+            <div className="mt-3 flex items-center gap-2">
+              {user.socialLinks?.twitter && (
+                <Button variant="ghost" size="icon" className="size-8" asChild>
+                  <a
+                    href={user.socialLinks.twitter}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Twitter className="size-4" />
+                  </a>
+                </Button>
+              )}
+              {user.socialLinks?.linkedin && (
+                <Button variant="ghost" size="icon" className="size-8" asChild>
+                  <a
+                    href={user.socialLinks.linkedin}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Linkedin className="size-4" />
+                  </a>
+                </Button>
+              )}
+              {user.socialLinks?.github && (
+                <Button variant="ghost" size="icon" className="size-8" asChild>
+                  <a
+                    href={user.socialLinks.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Github className="size-4" />
+                  </a>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="mt-6 w-full"
+        >
+          <TabsList className="w-full justify-start">
+            <TabsTrigger value="about">درباره</TabsTrigger>
+            <TabsTrigger value="experience">سابقه کاری</TabsTrigger>
+            <TabsTrigger value="projects">پروژه‌ها</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="about" className="mt-4">
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              {user.about}
+            </p>
+          </TabsContent>
+
+          <TabsContent value="experience" className="mt-4">
+            <div className="space-y-4">
+              {user.experience?.map((exp, index) => (
+                <div
+                  key={index}
+                  className="border-s-2 border-border pb-4 ps-4 last:pb-0"
+                >
+                  <div className="flex items-start gap-2">
+                    <Briefcase className="mt-0.5 size-4 text-muted-foreground" />
+                    <div>
+                      <h4 className="font-medium">{exp.title}</h4>
+                      <p className="text-sm text-muted-foreground">
+                        {exp.company} · {exp.period}
+                      </p>
+                      <p className="mt-1 text-sm text-muted-foreground">
+                        {exp.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="projects" className="mt-4">
+            <div className="grid gap-4">
+              {user.projects?.map((project, index) => (
+                <div key={index} className="rounded-lg border p-4">
+                  <h4 className="font-medium">{project.name}</h4>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {project.description}
+                  </p>
+                  <div className="mt-2 flex flex-wrap gap-1">
+                    {project.tech.map((tech) => (
+                      <span
+                        key={tech}
+                        className="rounded bg-muted px-2 py-0.5 text-xs"
+                      >
+                        {tech}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+};
+
+export { UserProfile6 };
diff --git a/blocks/user-profile9.tsx b/blocks/user-profile9.tsx
new file mode 100644
index 0000000..dbda539
--- /dev/null
+++ b/blocks/user-profile9.tsx
@@ -0,0 +1,261 @@
+import {
+  ArrowDown,
+  ArrowUp,
+  Calendar,
+  Eye,
+  FileText,
+  Github,
+  Globe,
+  Linkedin,
+  MapPin,
+  MessageSquare,
+  Star,
+  Twitter,
+  Users,
+} from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface Stat {
+  label: string;
+  value: string;
+  change?: number;
+  icon: "eye" | "users" | "star" | "file" | "message";
+}
+
+interface User {
+  name: string;
+  avatar?: string;
+  coverImage?: string;
+  role?: string;
+  company?: string;
+  location?: string;
+  joinedAt?: string;
+  bio?: string;
+  socialLinks?: {
+    twitter?: string;
+    linkedin?: string;
+    github?: string;
+    website?: string;
+  };
+}
+
+interface UserProfile9Props {
+  user?: User;
+  stats?: Stat[];
+  className?: string;
+}
+
+const statIcons = {
+  eye: Eye,
+  users: Users,
+  star: Star,
+  file: FileText,
+  message: MessageSquare,
+};
+
+const UserProfile9 = ({
+  user = {
+    name: "امیر رضایی",
+    avatar:
+      "/block-media/shadcnblocks/block/avatar/avatar5.webp",
+    coverImage:
+      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
+    role: "مهندس ارشد نرم‌افزار",
+    company: "ورسل",
+    location: "تهران، ایران",
+    joinedAt: "فروردین ۱۴۰۰",
+    bio: "ساخت آینده توسعه وب. مشارکت‌کننده متن‌باز، علاقه‌مند به TypeScript و عاشق قهوه. سابقه کار در استرایپ و گوگل.",
+    socialLinks: {
+      twitter: "https://twitter.com",
+      linkedin: "https://linkedin.com",
+      github: "https://github.com",
+      website: "https://example.com",
+    },
+  },
+  stats = [
+    {
+      label: "بازدید پروفایل",
+      value: "۱۲٬۸۴۷",
+      change: 12.5,
+      icon: "eye",
+    },
+    {
+      label: "دنبال‌کننده",
+      value: "۸٬۴۲۰",
+      change: 8.2,
+      icon: "users",
+    },
+    {
+      label: "ستاره دریافت‌شده",
+      value: "۲٬۱۵۶",
+      change: -3.1,
+      icon: "star",
+    },
+    { label: "پست‌ها", value: "۱۴۲", change: 24.8, icon: "file" },
+  ],
+  className,
+}: UserProfile9Props) => {
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("");
+
+  return (
+    <div
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-4xl space-y-6", className)}
+    >
+      <Card className="overflow-hidden pt-0">
+        <div
+          className="h-32 bg-muted bg-cover bg-center sm:h-40"
+          style={{
+            backgroundImage: user.coverImage
+              ? `url(${user.coverImage})`
+              : undefined,
+          }}
+        />
+        <CardContent className="relative pb-6">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:gap-6">
+            <Avatar className="-mt-12 size-24 border-4 border-card shadow-lg sm:-mt-16 sm:size-32">
+              <AvatarImage
+                src={user.avatar}
+                alt={user.name}
+                className="object-cover"
+              />
+              <AvatarFallback className="text-3xl font-semibold">
+                {initials}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1 space-y-1">
+              <h1 className="text-xl font-bold">{user.name}</h1>
+              <p className="text-muted-foreground">
+                {user.role}
+                {user.company && (
+                  <span>
+                    {" "}
+                    در <span className="font-medium">{user.company}</span>
+                  </span>
+                )}
+              </p>
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+                {user.location && (
+                  <span className="flex items-center gap-1">
+                    <MapPin className="size-3.5" />
+                    {user.location}
+                  </span>
+                )}
+                {user.joinedAt && (
+                  <span className="flex items-center gap-1">
+                    <Calendar className="size-3.5" />
+                    عضویت از {user.joinedAt}
+                  </span>
+                )}
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button>دنبال کردن</Button>
+              <Button variant="outline">پیام</Button>
+            </div>
+          </div>
+
+          {user.bio && (
+            <p className="mt-4 text-sm text-muted-foreground">{user.bio}</p>
+          )}
+
+          <div className="mt-4 flex items-center gap-2">
+            {user.socialLinks?.twitter && (
+              <Button variant="ghost" size="icon" className="size-8" asChild>
+                <a
+                  href={user.socialLinks.twitter}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Twitter className="size-4" />
+                </a>
+              </Button>
+            )}
+            {user.socialLinks?.linkedin && (
+              <Button variant="ghost" size="icon" className="size-8" asChild>
+                <a
+                  href={user.socialLinks.linkedin}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Linkedin className="size-4" />
+                </a>
+              </Button>
+            )}
+            {user.socialLinks?.github && (
+              <Button variant="ghost" size="icon" className="size-8" asChild>
+                <a
+                  href={user.socialLinks.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Github className="size-4" />
+                </a>
+              </Button>
+            )}
+            {user.socialLinks?.website && (
+              <Button variant="ghost" size="icon" className="size-8" asChild>
+                <a
+                  href={user.socialLinks.website}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Globe className="size-4" />
+                </a>
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {stats.map((stat) => {
+          const Icon = statIcons[stat.icon];
+          const isPositive = stat.change && stat.change > 0;
+          const isNegative = stat.change && stat.change < 0;
+
+          return (
+            <Card key={stat.label}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">
+                  {stat.label}
+                </CardTitle>
+                <Icon className="size-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-xl font-bold">{stat.value}</div>
+                {stat.change !== undefined && (
+                  <p
+                    className={cn(
+                      "mt-1 flex items-center gap-1 text-xs",
+                      isPositive && "text-emerald-600",
+                      isNegative && "text-red-600",
+                      !isPositive && !isNegative && "text-muted-foreground",
+                    )}
+                  >
+                    {isPositive && <ArrowUp className="size-3" />}
+                    {isNegative && <ArrowDown className="size-3" />}
+                    {Math.abs(stat.change).toLocaleString("fa-IR", {
+                      useGrouping: false,
+                    })}
+                    ٪ نسبت به ماه قبل
+                  </p>
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export { UserProfile9 };
diff --git a/blocks/waitlist1.tsx b/blocks/waitlist1.tsx
new file mode 100644
index 0000000..d00e5e9
--- /dev/null
+++ b/blocks/waitlist1.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+
+import { BackgroundLines } from "@/components/aceternity/background-lines";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Waitlist1Props {
+  className?: string;
+}
+
+const JOINED_COUNT = 1000;
+
+const Waitlist1 = ({ className }: Waitlist1Props) => {
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "flex w-full min-h-[32rem] items-center justify-center overflow-hidden py-16 md:min-h-[40rem] md:py-24",
+        className,
+      )}
+    >
+      <BackgroundLines className="container flex h-auto min-h-[32rem] w-full flex-col items-center justify-center px-4 md:h-auto md:min-h-[40rem]">
+        <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter md:py-10 lg:text-8xl">
+          به لیست انتظار بپیوندید
+        </h2>
+        <p className="text-md mx-auto max-w-xl text-center text-muted-foreground lg:text-lg">
+          زودتر از همه از راه‌اندازی مطلع شوید. با ثبت ایمیل، دسترسی زودهنگام و
+          مزایای ویژه دریافت کنید.
+        </p>
+        <div className="relative z-20 mx-auto mt-10 flex w-full max-w-md items-center justify-center gap-3 rounded-full p-1">
+          <Input
+            type="email"
+            className="h-10 w-full rounded-xl border-none bg-muted shadow-none ring-0 focus-visible:ring-0 focus-visible:outline-none active:ring-0 active:outline-0"
+            placeholder="ایمیل خود را وارد کنید"
+          />
+          <Button className="h-10 shrink-0 rounded-xl">
+            پیوستن به لیست انتظار
+          </Button>
+        </div>
+        <div className="mt-10 flex items-center justify-center gap-2">
+          <span className="inline-flex items-center -space-x-2.5">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Avatar key={index} className="size-8">
+                <AvatarImage
+                  src={`/block-media/shadcnblocks/block/guri3/avatar${index + 1}.png`}
+                  alt={`عضو ${(index + 1).toLocaleString("fa-IR")}`}
+                />
+              </Avatar>
+            ))}
+          </span>
+          <p className="tracking-tight text-muted-foreground/80">
+            بیش از {JOINED_COUNT.toLocaleString("fa-IR")} نفر قبلاً پیوسته‌اند
+          </p>
+        </div>
+      </BackgroundLines>
+    </section>
+  );
+};
+
+export { Waitlist1 };
diff --git a/blocks/waitlist2.tsx b/blocks/waitlist2.tsx
new file mode 100644
index 0000000..c20e04e
--- /dev/null
+++ b/blocks/waitlist2.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Calendar } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Waitlist2Props {
+  logo?: string;
+  badge?: string;
+  heading?: string;
+  description?: string;
+  avatars?: string[];
+  joinedPeople?: number;
+  launchDate?: string;
+  className?: string;
+}
+
+const COUNTDOWN_UNITS = [
+  { key: "day", label: "روز" },
+  { key: "hour", label: "ساعت" },
+  { key: "minute", label: "دقیقه" },
+  { key: "second", label: "ثانیه" },
+] as const;
+
+type CountdownTimeLeft = Record<
+  (typeof COUNTDOWN_UNITS)[number]["key"],
+  number
+>;
+
+const formatCountdownValue = (value: number) =>
+  value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });
+
+const SignupForm = () => {
+  return (
+    <div className="relative mt-8 w-full max-w-md overflow-hidden rounded-xl p-px md:rounded-lg">
+      <div
+        style={{
+          background:
+            "conic-gradient(transparent 70%, var(--color-blue-500) 90%)",
+          animationDuration: "4s",
+        }}
+        className="absolute top-1/2 aspect-square w-full -translate-y-1/2 scale-200 animate-spin opacity-70"
+      />
+      <form className="relative z-10 flex w-full flex-col items-center gap-2 rounded-xl bg-background p-2 md:flex-row md:rounded-lg md:p-1">
+        <Input
+          className="w-full"
+          required
+          type="email"
+          placeholder="ایمیل خود را وارد کنید"
+        />
+        <Button type="submit" className="w-full shrink-0 md:w-auto">
+          پیوستن به لیست انتظار
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+interface JoinedPeopleProps {
+  joinedPeople: number;
+  avatars: string[];
+}
+
+const JoinedPeople = ({ joinedPeople, avatars }: JoinedPeopleProps) => {
+  return (
+    <div className="mt-4 flex items-center justify-center">
+      <div className="relative flex flex-col items-center gap-2 md:flex-row md:gap-4">
+        <div className="flex items-center">
+          {avatars.map((avatar, index) => {
+            return (
+              <div key={`waitlist-avatar-${index}`} className="h-8 w-6">
+                <div className="size-8">
+                  <img
+                    src={avatar}
+                    alt={`عضو ${(index + 1).toLocaleString("fa-IR")}`}
+                    className="size-full shrink-0 rounded-full bg-background object-cover object-top p-0.5"
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <p className="text-sm text-muted-foreground">
+          بیش از {joinedPeople.toLocaleString("fa-IR")} نفر قبلاً پیوسته‌اند
+        </p>
+      </div>
+    </div>
+  );
+};
+
+interface CountdownTimerProps {
+  targetDate: string;
+}
+
+const CountdownTimer = ({ targetDate }: CountdownTimerProps) => {
+  const [timeLeft, setTimeLeft] = useState<CountdownTimeLeft>({
+    day: 0,
+    hour: 0,
+    minute: 0,
+    second: 0,
+  });
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const target = new Date(targetDate).getTime();
+      const now = new Date().getTime();
+      const difference = target - now;
+
+      if (difference > 0) {
+        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+        const hours = Math.floor(
+          (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+        );
+        const minutes = Math.floor(
+          (difference % (1000 * 60 * 60)) / (1000 * 60),
+        );
+        const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+
+        setTimeLeft({
+          day: days,
+          hour: hours,
+          minute: minutes,
+          second: seconds,
+        });
+      } else {
+        setTimeLeft({ day: 0, hour: 0, minute: 0, second: 0 });
+      }
+    };
+
+    calculateTimeLeft();
+
+    const timer = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
+
+  return (
+    <div className="mt-6 flex flex-col items-center gap-6">
+      <div className="flex justify-center gap-6">
+        {COUNTDOWN_UNITS.map(({ key, label }, index) => {
+          const value = timeLeft[key];
+
+          return (
+            <React.Fragment key={`waitlist-timer-${key}`}>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xl">{formatCountdownValue(value)}</span>
+                <span className="text-xs text-muted-foreground">{label}</span>
+              </div>
+              {index < COUNTDOWN_UNITS.length - 1 ? (
+                <span className="text-muted-foreground">:</span>
+              ) : null}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      <div className="flex items-center gap-2">
+        <Calendar className="text-muted-foreground" size={14} />
+        <span className="text-xs leading-0">
+          زمان باقی‌مانده تا راه‌اندازی
+        </span>
+      </div>
+    </div>
+  );
+};
+
+const Waitlist2 = ({
+  logo = "/block-media/shadcnblocks/block/block-white-1.svg",
+  badge = `به‌زودی  ${(new Date().getFullYear() + 1).toLocaleString("fa-IR")}`,
+  heading = "به لیست انتظار بپیوندید",
+  description = "زودتر از همه از راه‌اندازی مطلع شوید. با ثبت ایمیل، دسترسی زودهنگام و مزایای ویژه دریافت کنید.",
+  avatars = [
+    "/block-media/shadcnblocks/block/portraits/joseph-gonzalez-iFgRcqHznqg-unsplash.jpg",
+    "/block-media/shadcnblocks/block/portraits/michael-dam-mEZ3PoFGs_k-unsplash.jpg",
+    "/block-media/shadcnblocks/block/portraits/nima-motaghian-nejad-_omdf_EgRUo-unsplash.jpg",
+    "/block-media/shadcnblocks/block/portraits/good-faces-xmSWVeGEnJw-unsplash.jpg",
+    "/block-media/shadcnblocks/block/portraits/christian-buehner-DItYlc26zVI-unsplash 1.png",
+  ],
+  joinedPeople = 12500,
+  launchDate = `01/01/${new Date().getFullYear() + 1}`,
+  className,
+}: Waitlist2Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container">
+        <div className="flex flex-col items-center">
+          <div className="flex flex-col items-center gap-6">
+            <div className="flex size-12 items-center justify-center rounded-2xl bg-primary p-2">
+              <img src={logo} alt="لوگو" className="size-full" />
+            </div>
+            <Badge variant="outline">
+              <div className="relative flex items-center justify-center">
+                <span className="size-1.5 rounded-full bg-primary" />
+                <motion.span
+                  initial={{
+                    scale: 1,
+                    opacity: 1,
+                  }}
+                  animate={{
+                    scale: 2,
+                    opacity: 0,
+                  }}
+                  transition={{
+                    duration: 1,
+                    ease: "easeInOut",
+                    repeat: Infinity,
+                    repeatType: "loop",
+                    repeatDelay: 0.5,
+                  }}
+                  className="absolute size-1.5 rounded-full bg-primary"
+                />
+              </div>
+              {badge}
+            </Badge>
+          </div>
+
+          <div className="mt-6 flex flex-col items-center gap-2">
+            <h3 className="text-center text-3xl font-medium lg:text-xl">
+              {heading}
+            </h3>
+            <p className="max-w-md text-center text-muted-foreground">
+              {description}
+            </p>
+          </div>
+
+          <SignupForm />
+
+          <JoinedPeople joinedPeople={joinedPeople} avatars={avatars} />
+
+          <CountdownTimer targetDate={launchDate} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Waitlist2 };
diff --git a/blocks/waitlist3.tsx b/blocks/waitlist3.tsx
new file mode 100644
index 0000000..0cc7785
--- /dev/null
+++ b/blocks/waitlist3.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface Waitlist3Props {
+  companyLogo?: string;
+  badge?: string;
+  heading?: string;
+  description?: string;
+  joinedPeople?: number;
+  avatars?: string[];
+  companyName?: string;
+  companyUrl?: string;
+  image?: string;
+  className?: string;
+}
+
+const Waitlist3 = ({
+  companyLogo = "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
+  badge = "به‌زودی  سه‌ماهه اول ۱۴۰۵",
+  heading = "نسل بعدی ابزارهای توسعه را می‌سازید؟",
+  description = "با ثبت ایمیل در برنامه دسترسی زودهنگام، به ابزارهای توسعه پیشرفته دسترسی پیدا کنید و زودتر از همه آینده برنامه‌نویسی را تجربه کنید.",
+  joinedPeople = 165,
+  avatars = [
+    "/block-media/shadcnblocks/block/portraits/alexander-hipp-iEEBWgY_6lA-unsplash.jpg",
+    "/block-media/shadcnblocks/block/portraits/michael-dam-mEZ3PoFGs_k-unsplash.jpg",
+    "/block-media/shadcnblocks/block/portraits/nima-motaghian-nejad-_omdf_EgRUo-unsplash.jpg",
+  ],
+  companyName = "Ramp",
+  companyUrl = "https://ShadcnBlocks",
+  image = "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
+  className,
+}: Waitlist3Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32 lg:h-screen", className)}>
+      <div className="container h-full">
+        <div className="grid h-full grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-0">
+          <div className="col-span-1 flex h-full flex-col items-start justify-between gap-20">
+            <img
+              src={companyLogo}
+              alt="لوگوی شرکت"
+              className="w-32 dark:invert"
+            />
+
+            <div className="flex max-w-sm flex-col gap-4 sm:max-w-full lg:max-w-md">
+              <Badge variant="outline">{badge}</Badge>
+
+              <h3 className="text-start text-3xl font-semibold lg:text-xl">
+                {heading}
+              </h3>
+
+              <p className="max-w-md text-start text-muted-foreground">
+                {description}
+              </p>
+
+              <div className="mt-2 flex flex-col gap-4">
+                <form className="flex gap-2">
+                  <Input
+                    type="email"
+                    required
+                    placeholder="ایمیل خود را وارد کنید"
+                  />
+                  <Button type="submit" className="shrink-0">
+                    پیوستن به لیست انتظار
+                  </Button>
+                </form>
+
+                <div className="flex items-center">
+                  <div className="relative flex items-center">
+                    {avatars.map((avatar, index) => {
+                      return (
+                        <img
+                          key={`waitlist-avatar-${index}`}
+                          src={avatar}
+                          alt={`عضو ${(index + 1).toLocaleString("fa-IR")}`}
+                          style={{
+                            transform: `translateX(-${index * 10}px)`,
+                          }}
+                          className="size-8 rounded-full border bg-muted object-cover object-top p-px"
+                        />
+                      );
+                    })}
+                    <p
+                      style={{
+                        transform: `translateX(-${(avatars.length - 2) * 10}px)`,
+                      }}
+                      className="text-xs text-muted-foreground"
+                    >
+                      بیش از {joinedPeople.toLocaleString("fa-IR")} نفر قبلاً
+                      پیوسته‌اند
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <p className="text-start text-xs text-muted-foreground">
+              © {new Date().getFullYear().toLocaleString("fa-IR")} {" "}
+              <a
+                href={companyUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary underline"
+              >
+                {companyName}
+              </a>{" "}
+               تمامی حقوق محفوظ است.
+            </p>
+          </div>
+          <div className="col-span-1 flex h-full flex-col items-start justify-between overflow-hidden">
+            <img
+              src={image}
+              alt="تصویر لیست انتظار"
+              className="h-full max-h-96 w-full object-cover lg:max-h-full"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Waitlist3 };
diff --git a/blocks/wishlist1.tsx b/blocks/wishlist1.tsx
new file mode 100644
index 0000000..bf53d2c
--- /dev/null
+++ b/blocks/wishlist1.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { Heart, ShoppingCart, Trash2, TrendingDown } from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface WishlistItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  originalPrice?: number;
+  inStock: boolean;
+  priceDrop?: boolean;
+}
+
+const DEFAULT_ITEMS: WishlistItem[] = [
+  {
+    id: "1",
+    name: "هدفون بی‌سیم نویزکنسل",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+    price: 50000,
+    originalPrice: 60000,
+    inStock: true,
+    priceDrop: true,
+  },
+  {
+    id: "2",
+    name: "کیف چرمی کراس‌بادی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: 180000,
+    inStock: true,
+  },
+  {
+    id: "3",
+    name: "پالتو پشمی کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-White-Hoodie-1.png",
+    price: 1200000,
+    inStock: false,
+  },
+  {
+    id: "4",
+    name: "گوشواره حلقه‌ای طلا",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Gold-Earrings-1.png",
+    price: 8000000,
+    originalPrice: 9000000,
+    inStock: true,
+    priceDrop: true,
+  },
+  {
+    id: "5",
+    name: "هودی پنبه‌ای اوورسایز",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+    price: 6500000,
+    inStock: true,
+  },
+  {
+    id: "6",
+    name: "ساعت مینیمال",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Watch-on-Womans-Wrist-1.png",
+    price: 12500000,
+    inStock: true,
+  },
+];
+
+interface Wishlist1Props {
+  items?: WishlistItem[];
+  className?: string;
+}
+
+const Wishlist1 = ({ items = DEFAULT_ITEMS, className }: Wishlist1Props) => {
+  const [wishlistItems, setWishlistItems] = useState(items);
+
+  const removeItem = (id: string) => {
+    setWishlistItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat("fa-IR", {
+      style: "currency",
+      currency: "IRR",
+    }).format(price);
+  };
+
+  return (
+    <section className={cn("py-16 md:py-24", className)}>
+      <div className="container max-w-6xl">
+        {/* Header */}
+        <div className="mb-8 flex items-center justify-between">
+          <div>
+            <h1 className="text-xl font-semibold tracking-tight md:text-3xl">
+              لیست علاقه‌مندی‌های من
+            </h1>
+            <p className="mt-1 text-muted-foreground">
+              {wishlistItems.length.toLocaleString("fa-IR")} مورد ذخیره شده
+            </p>
+          </div>
+          {wishlistItems.length > 0 && (
+            <Button variant="outline">
+              <ShoppingCart className="me-2 size-4" />
+              افزودن همه به سبد
+            </Button>
+          )}
+        </div>
+
+        {/* Grid */}
+        {wishlistItems.length > 0 ? (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {wishlistItems.map((item) => (
+              <Card key={item.id} className="group gap-0 overflow-hidden p-0">
+                <div className="relative">
+                  <AspectRatio ratio={1} className="bg-muted">
+                    <img
+                      src={item.image}
+                      alt={item.name}
+                      className={cn(
+                        "size-full object-cover",
+                        !item.inStock && "opacity-50",
+                      )}
+                    />
+                  </AspectRatio>
+
+                  {/* Badges */}
+                  <div className="absolute top-3 left-3 flex flex-col gap-2">
+                    {item.priceDrop && (
+                      <Badge className="bg-emerald-600 hover:bg-emerald-600">
+                        <TrendingDown className="me-1 size-3" />
+                        کاهش قیمت
+                      </Badge>
+                    )}
+                    {!item.inStock && (
+                      <Badge variant="secondary">ناموجود</Badge>
+                    )}
+                  </div>
+
+                  {/* Remove Button */}
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="absolute top-3 right-3 opacity-0 transition-opacity group-hover:opacity-100"
+                    onClick={() => removeItem(item.id)}
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </div>
+
+                <CardContent className="p-4">
+                  <h3 className="leading-tight font-medium">{item.name}</h3>
+                  <div className="mt-2 flex items-center gap-2">
+                    <span className="text-lg font-semibold">
+                      {formatPrice(item.price)}
+                    </span>
+                    {item.originalPrice && (
+                      <span className="text-sm text-muted-foreground line-through">
+                        {formatPrice(item.originalPrice)}
+                      </span>
+                    )}
+                  </div>
+                  <Button
+                    className="mt-4 w-full"
+                    disabled={!item.inStock}
+                    variant={item.inStock ? "default" : "secondary"}
+                  >
+                    {item.inStock ? "افزودن به سبد" : "هنگام موجود بودن اطلاع بده"}
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <Card className="p-0">
+            <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+              <div className="mb-4 flex size-16 items-center justify-center rounded-full bg-muted">
+                <Heart className="size-8 text-muted-foreground" />
+              </div>
+              <h2 className="text-xl font-semibold">لیست علاقه‌مندی شما خالی است</h2>
+              <p className="mt-2 max-w-sm text-muted-foreground">
+                با کلیک روی آیکن قلب در هر محصول، موارد مورد علاقه را ذخیره کنید
+              </p>
+              <Button className="mt-6">ادامه خرید</Button>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { Wishlist1 };
diff --git a/blocks/wishlist2.tsx b/blocks/wishlist2.tsx
new file mode 100644
index 0000000..2bda602
--- /dev/null
+++ b/blocks/wishlist2.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import {
+  ArrowUpDown,
+  Check,
+  Heart,
+  Share2,
+  ShoppingCart,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface WishlistItem {
+  id: string;
+  name: string;
+  image: string;
+  price: number;
+  originalPrice?: number;
+  inStock: boolean;
+  dateAdded: string;
+  category: string;
+}
+
+const DEFAULT_ITEMS: WishlistItem[] = [
+  {
+    id: "1",
+    name: "هدفون بی‌سیم نویزکنسل",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/electronics/Modern-White-Headphones-1.png",
+    price: 50000,
+    originalPrice: 60000,
+    inStock: true,
+    dateAdded: "2024-12-10",
+    category: "لوازم الکترونیکی",
+  },
+  {
+    id: "2",
+    name: "کیف چرمی کراس‌بادی",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
+    price: 180000,
+    inStock: true,
+    dateAdded: "2024-12-08",
+    category: "اکسسوری",
+  },
+  {
+    id: "3",
+    name: "پالتو پشمی کلاسیک",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-White-Hoodie-1.png",
+    price: 1200000,
+    inStock: false,
+    dateAdded: "2024-12-05",
+    category: "پوشاک",
+  },
+  {
+    id: "4",
+    name: "گوشواره حلقه‌ای طلا",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Gold-Earrings-1.png",
+    price: 8000000,
+    originalPrice: 9000000,
+    inStock: true,
+    dateAdded: "2024-12-02",
+    category: "زیورآلات",
+  },
+  {
+    id: "5",
+    name: "هودی پنبه‌ای اوورسایز",
+    image:
+      "/block-media/shadcnblocks/block/ecommerce/clothes/black-hoodie-against-light-background.png",
+    price: 6500000,
+    inStock: true,
+    dateAdded: "2024-11-28",
+    category: "پوشاک",
+  },
+];
+
+type SortOption = "date" | "price-low" | "price-high" | "name";
+
+interface Wishlist2Props {
+  items?: WishlistItem[];
+  className?: string;
+}
+
+const Wishlist2 = ({ items = DEFAULT_ITEMS, className }: Wishlist2Props) => {
+  const [wishlistItems, setWishlistItems] = useState(items);
+  const [sortBy, setSortBy] = useState<SortOption>("date");
+
+  const removeItem = (id: string) => {
+    setWishlistItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat("fa-IR", {
+      style: "currency",
+      currency: "IRR",
+    }).format(price);
+  };
+
+  const formatDate = (isoDate: string) => {
+    return new Intl.DateTimeFormat("fa-IR", { dateStyle: "medium" }).format(
+      new Date(isoDate),
+    );
+  };
+
+  const sortedItems = [...wishlistItems].sort((a, b) => {
+    switch (sortBy) {
+      case "price-low":
+        return a.price - b.price;
+      case "price-high":
+        return b.price - a.price;
+      case "name":
+        return a.name.localeCompare(b.name, "fa");
+      default:
+        return (
+          new Date(b.dateAdded).getTime() - new Date(a.dateAdded).getTime()
+        );
+    }
+  });
+
+  const sortLabels: Record<SortOption, string> = {
+    date: "تاریخ افزودن",
+    "price-low": "قیمت: کم به زیاد",
+    "price-high": "قیمت: زیاد به کم",
+    name: "نام",
+  };
+
+  return (
+    <section
+      className={cn(
+        "-mx-4 w-[calc(100%+2rem)] max-w-none py-16 md:py-24",
+        className,
+      )}
+    >
+      <div className="w-full max-w-none px-0">
+        {/* Header */}
+        <div className="mb-6 flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-xl font-semibold tracking-tight md:text-3xl">
+              موارد ذخیره‌شده
+            </h1>
+            <p className="mt-1 text-muted-foreground">
+              {wishlistItems.length.toLocaleString("fa-IR")} مورد در لیست علاقه‌مندی
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2 sm:justify-end">
+            <Button variant="outline" size="sm">
+              <Share2 className="me-2 size-4" />
+              اشتراک‌گذاری لیست
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <ArrowUpDown className="me-2 size-4" />
+                  {sortLabels[sortBy]}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                {(Object.keys(sortLabels) as SortOption[]).map((option) => (
+                  <DropdownMenuItem
+                    key={option}
+                    onClick={() => setSortBy(option)}
+                  >
+                    {sortBy === option && <Check className="me-2 size-4" />}
+                    <span className={sortBy !== option ? "ps-6" : ""}>
+                      {sortLabels[option]}
+                    </span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        {/* List */}
+        {sortedItems.length > 0 ? (
+          <div className="box-border min-w-full w-full rounded-lg border">
+            {sortedItems.map((item, index) => (
+              <div key={item.id}>
+                {index > 0 && <Separator />}
+                <div className="flex w-full gap-4 p-4">
+                  <div className="size-24 shrink-0 overflow-hidden rounded-lg bg-muted sm:size-28">
+                    <AspectRatio ratio={1}>
+                      <img
+                        src={item.image}
+                        alt={item.name}
+                        className={cn(
+                          "size-full object-cover",
+                          !item.inStock && "opacity-50",
+                        )}
+                      />
+                    </AspectRatio>
+                  </div>
+
+                  <div className="flex min-w-0 flex-1 flex-col">
+                    <div className="flex w-full items-start justify-between gap-2">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <h3 className="leading-tight font-medium">{item.name}</h3>
+                          {!item.inStock && (
+                            <Badge variant="secondary" className="shrink-0">
+                              ناموجود
+                            </Badge>
+                          )}
+                        </div>
+                        <p className="mt-0.5 text-sm text-muted-foreground">
+                          {item.category}
+                        </p>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="shrink-0"
+                        onClick={() => removeItem(item.id)}
+                        aria-label={`حذف ${item.name}`}
+                      >
+                        <X className="size-4" />
+                      </Button>
+                    </div>
+
+                    <div className="mt-2 flex flex-wrap items-center gap-2">
+                      <span className="font-semibold">{formatPrice(item.price)}</span>
+                      {item.originalPrice && (
+                        <span className="text-sm text-muted-foreground line-through">
+                          {formatPrice(item.originalPrice)}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="mt-auto flex w-full flex-wrap items-center justify-between gap-3 pt-3">
+                      <span className="text-xs text-muted-foreground">
+                        افزوده‌شده در {formatDate(item.dateAdded)}
+                      </span>
+                      <Button size="sm" disabled={!item.inStock} className="shrink-0">
+                        <ShoppingCart className="me-2 size-4" />
+                        {item.inStock ? "افزودن به سبد" : "ناموجود"}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="flex w-full flex-col items-center justify-center rounded-lg border py-16 text-center">
+            <div className="mb-4 flex size-16 items-center justify-center rounded-full bg-muted">
+              <Heart className="size-8 text-muted-foreground" />
+            </div>
+            <h2 className="text-xl font-semibold">موردی ذخیره نشده است</h2>
+            <p className="mt-2 w-full max-w-none text-muted-foreground">
+              مجموعه را مرور کنید و محصولات مورد علاقه را ذخیره کنید
+            </p>
+            <Button className="mt-6">مشاهده محصولات</Button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export { Wishlist2 };